modelcontextprotocol
diff --git a/‎clients/web/src/App.tsx‎
Lines changed: 610 additions & 48 deletions b/‎clients/web/src/App.tsx‎
Lines changed: 610 additions & 48 deletions
diff --git a/‎clients/web/src/components/groups/ServerCard/ServerCard.tsx‎
Lines changed: 7 additions & 1 deletion b/‎clients/web/src/components/groups/ServerCard/ServerCard.tsx‎
Lines changed: 7 additions & 1 deletion
diff --git a/‎clients/web/src/components/views/InspectorView/InspectorView.stories.tsx‎
Lines changed: 94 additions & 1 deletion b/‎clients/web/src/components/views/InspectorView/InspectorView.stories.tsx‎
Lines changed: 94 additions & 1 deletion
@@ -75,7 +75,13 @@ function getCommandOrUrl(config: MCPServerConfig): string {
   if (config.type === "sse" || config.type === "streamable-http") {
     return config.url;
   }
-  return config.command;
+  // Show the full argv for stdio so the card displays the same thing
+  // that gets spawned. Otherwise a `command: "npx", args: ["-y", "pkg"]`
+  // config renders as just "npx", which is misleading.
+  const args = config.args ?? [];
+  return args.length > 0
+    ? `${config.command} ${args.join(" ")}`
+    : config.command;
 }
 
 export function ServerCard({
 
@@ -1,10 +1,12 @@
 import type {
+  InitializeResult,
   Prompt,
   Resource,
   ResourceTemplate,
   Task,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
+import type { AppBridge } from "@modelcontextprotocol/ext-apps/app-bridge";
 import type {
   InspectorResourceSubscription,
   MessageEntry,
@@ -17,6 +19,19 @@ import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScr
 import { longToolList as demoRegularTools } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
 import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
 import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
+import type { BridgeFactory } from "../../elements/AppRenderer/AppRenderer";
+
+// Stories never drive a real MCP App bridge — render the iframe stage with
+// a no-op factory so the AppsScreen mounts without trying to postMessage to
+// a real sandbox.
+const noopBridgeFactory: BridgeFactory = () =>
+  ({
+    sendToolInput: async () => {},
+    sendToolResult: async () => {},
+    sendToolCancelled: async () => {},
+    teardownResource: async () => ({}),
+    close: async () => {},
+  }) as unknown as AppBridge;
 
 // MCP App tools — `isAppTool` detects these via `_meta.ui.resourceUri`,
 // so they get filtered into the Apps tab while still appearing on Tools.
@@ -234,12 +249,18 @@ const demoHistory: MessageEntry[] = [
   },
 ];
 
+const demoInitializeResult: InitializeResult = {
+  protocolVersion: "2025-06-18",
+  capabilities: {},
+  serverInfo: { name: "Local Dev Server", version: "1.2.0" },
+};
+
 const meta: Meta<typeof InspectorView> = {
   title: "Views/InspectorView",
   component: InspectorView,
   parameters: { layout: "fullscreen" },
   args: {
-    onToggleTheme: fn(),
+    // Data
     servers: demoServers,
     tools: demoTools,
     prompts: demoPrompts,
@@ -250,6 +271,57 @@ const meta: Meta<typeof InspectorView> = {
     tasks: demoTasks,
     progressByTaskId: demoProgressByTaskId,
     history: demoHistory,
+
+    // Connection state — stories default to "disconnected"; per-story
+    // overrides drive the connected / error narratives.
+    activeServer: undefined,
+    connectionStatus: "disconnected",
+    initializeResult: undefined,
+    latencyMs: undefined,
+    errorMessage: undefined,
+
+    // Misc state
+    currentLogLevel: "info",
+    sandboxPath: "about:blank",
+    bridgeFactory: noopBridgeFactory,
+
+    // Callbacks — all wired to storybook spies so play functions can assert
+    // on dispatch. Real wiring routes these to InspectorClient methods (the
+    // app shell at clients/web/src/App.tsx).
+    onToggleTheme: fn(),
+    onToggleConnection: fn(),
+    onDisconnect: fn(),
+    onServerAdd: fn(),
+    onServerImportConfig: fn(),
+    onServerImportJson: fn(),
+    onServerInfo: fn(),
+    onServerSettings: fn(),
+    onServerEdit: fn(),
+    onServerClone: fn(),
+    onServerRemove: fn(),
+    onCallTool: fn(),
+    onRefreshTools: fn(),
+    onGetPrompt: fn(),
+    onRefreshPrompts: fn(),
+    onReadResource: fn(),
+    onSubscribeResource: fn(),
+    onUnsubscribeResource: fn(),
+    onRefreshResources: fn(),
+    onCancelTask: fn(),
+    onClearCompletedTasks: fn(),
+    onRefreshTasks: fn(),
+    onSetLogLevel: fn(),
+    onClearLogs: fn(),
+    onExportLogs: fn(),
+    onCopyAllLogs: fn(),
+    onClearHistory: fn(),
+    onExportHistory: fn(),
+    onReplayHistory: fn(),
+    onTogglePinHistory: fn(),
+    onSelectApp: fn(),
+    onOpenApp: fn(),
+    onCloseApp: fn(),
+    onRefreshApps: fn(),
   },
 };
 
@@ -263,3 +335,24 @@ export const NoServers: Story = {
     servers: [],
   },
 };
+
+// Renders the connected-state shell (full tab list, ViewHeader in connected
+// mode). The other tabs still render their disconnected fixtures because
+// the lists are passed through as static data — that's fine for visual
+// regression / storybook play function coverage.
+export const Connected: Story = {
+  args: {
+    activeServer: demoServers[0]!.id,
+    connectionStatus: "connected",
+    initializeResult: demoInitializeResult,
+    latencyMs: 142,
+  },
+};
+
+export const ConnectionError: Story = {
+  args: {
+    activeServer: demoServers[0]!.id,
+    connectionStatus: "error",
+    errorMessage: "Handshake timeout",
+  },
+};
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,13 @@ function getCommandOrUrl(config: MCPServerConfig): string {`
`75`	`75`	`if (config.type === "sse" \|\| config.type === "streamable-http") {`
`76`	`76`	`return config.url;`
`77`	`77`	`}`
`78`		`- return config.command;`
	`78`	`+ // Show the full argv for stdio so the card displays the same thing`
	`79`	+ // that gets spawned. Otherwise a `command: "npx", args: ["-y", "pkg"]`
	`80`	`+ // config renders as just "npx", which is misleading.`
	`81`	`+ const args = config.args ?? [];`
	`82`	`+ return args.length > 0`
	`83`	+ ? `${config.command} ${args.join(" ")}`
	`84`	`+ : config.command;`
`79`	`85`	`}`
`80`	`86`
`81`	`87`	`export function ServerCard({`