Commit graph inspector/clients/web/src/components/views/InspectorView
Author SHA1 Message Date
cliffhall
c5d02456e0 Phase 5: Lift ServerEntry into core/mcp/types.ts
ServerEntry was previously defined as `Pick<ServerCardProps, ...>` in
ServerListScreen, inverting the natural dependency direction (data shape
derived from a UI prop type). Phase 5's cleanup pass calls this out
specifically.

Move the canonical ServerEntry into core/mcp/types.ts and have
ServerCardProps extend it. ServerListScreen, InspectorView, and their
stories now import ServerEntry from core directly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-26 19:17:57 -04:00
cliffhall
bb8241c2aa Share long tool fixture across ToolControls and InspectorView stories
Extract a 20-tool fixture (filesystem, database, git, http, misc) into
ToolsScreen.fixtures.ts — large enough that the ToolControls list scrolls
and the Tools tab in InspectorView shows realistic surface area.

Wire it into the Default stories of both ToolControls and InspectorView,
mirroring the LoggingScreen.fixtures.ts pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-26 11:25:54 -04:00
cliffhall
4c1d2f2c34 Phase 4: Move screen selection state into the screens themselves
ToolsScreen, PromptsScreen, and ResourcesScreen each tracked the user's
current selection via `selectedXxxName` / `onSelectXxx` props, hoisting
screen-local UI state into whatever rendered them. InspectorView never
threaded those callbacks anywhere, so clicks in the controls panel did
not display the matching detail panel — the detail panel only rendered
if a parent fed selection back in.

Move selection into `useState` inside each screen and drop the
`selectedXxxName` / `onSelectXxx` props. MCP-derived data (`callState`,
`getPromptState`, `readState`) keeps flowing in from `InspectorView` as
props. ResourcesScreen wraps `onReadResource` so a template-expanded URI
becomes the selected resource for preview rendering.

Update each screen's stories to drop the deleted props. Stories that
need a pre-selected item use a `play` function to click it — no
component coupling to Storybook.

Add Phase 4.3 to the interfaces plan describing the rule.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-26 09:27:22 -04:00
cliffhall
1ed81c5f0e Address PR #1221 review round 4 feedback
- InspectorView: cancel any in-flight stub handshake timer when a new
  connect request arrives or the user disconnects, via a `useRef`-backed
  timer handle. Prevents a stale handshake resolver from overwriting the
  next attempt's connection state.
- InspectorView: document that screens unmount on tab switch (matches
  prior `{activeTab === X && <Screen />}` behavior; local screen state
  resets on every transition). If Phase 3 needs persistence, add
  `keepMounted` to the Transition.
- InspectorView: document the `mih: "100%"` height assumption on
  ScreenStageContainer — depends on `AppShell.Main` providing a definite
  parent height for the stack itself to fill (absolute children render
  regardless, but nested ScrollArea screens may need this).
- ViewHeader: comment the `Select w={140}` magic number — sized to fit
  the longest current tab label ("Resources").

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 19:50:58 -04:00
cliffhall
1785a5281c Share LoggingScreen fixture with InspectorView story; tune transition timing
- Extract `mixedEntries` (50 mixed-level log entries) into
  `LoggingScreen.fixtures.ts` so both `LoggingScreen.stories` and
  `InspectorView.stories` can consume it. The InspectorView Default story
  now shows a populated, scrollable Logs tab.
- InspectorView screen transitions: separate enter (350ms) and exit (250ms)
  durations via Mantine Transition's `exitDuration` prop, so screens leave
  faster than they enter.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 19:46:18 -04:00
cliffhall
d3c2645e38 Animate InspectorView screen transitions and refactor App.tsx
- InspectorView: wrap each screen in a Mantine `Transition` (`fade-up`,
  350ms). Outgoing screens fade out and slide down 30px; incoming screens
  fade in and slide up to meet the ViewHeader. A `pos: "relative"` Stack
  container holds the screens so the absolute-positioned `Transition`
  wrappers stack in the same area without pushing layout.
- InspectorView: reorder ALL_TABS so Logs sits beside History at the end:
  Servers · Tools · Prompts · Resources · Tasks · Logs · History.
- App.tsx: refactor to AGENTS.md guidelines — extract `PageContainer`,
  `PageStack`, `ThemeToggle`, `SubtitleText` as `.withProps()`
  subcomponents; replace inline unicode glyphs with `MdLightMode` /
  `MdDarkMode` icons (matches the ViewHeader pattern); convert the click
  handler to a `function` declaration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 19:33:57 -04:00
cliffhall
473bd95826 Address PR #1221 review round 3 feedback
- InspectorView: simulate the connect flow through "connecting" with a
  randomized 50-500ms handshake delay and an 85% success rate. On success,
  measure observed latency from connect start; on failure, set a plausible
  error message. Connection error message flows through to the active
  ServerCard's connection state. Real wiring (Phase 3) replaces this with
  `useConnection`.
- InspectorView: document that the view owns connection state (input
  `serversInput` connection fields are intentionally ignored), and mark
  `noop` callbacks as Phase-3 stubs.
- ServerStatusIndicator: add `showLabel?: boolean` escape hatch so consumers
  in constrained containers can override the default viewport-based
  visibility.
- ServerListScreen.stories: add `WithActiveServer` story exercising the
  dimming + `inert` behaviour in isolation.
- ViewHeader.stories: rename "Logging" → "Logs" to match `ALL_TABS` in
  InspectorView.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 19:05:18 -04:00
cliffhall
9553fb9c8a Add InspectorView state machine driving screens from props
InspectorView replaces the prior pair (ConnectedView/UnconnectedView wrapping
children) with a single state-machine view. Holds activeServer, connectionStatus,
initializeResult, latencyMs, activeTab, and availableTabs internally; renders
the appropriate screen based on activeTab; switches the header between connected
and unconnected modes.

Screen data (servers, tools, prompts, resources, resourceTemplates, subscriptions,
logs, tasks, progressByTaskId, history) flows in via props so stories can populate
the entire view with fixtures. Demo data lives in stories, not in the view.

Stories include one server per transport (stdio, sse, streamable-http) so the
TransportBadge / descriptor variants are all visible.

Reorders ViewHeader.stories tabs to match the new ALL_TABS sequence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 18:33:52 -04:00