feat(apps): AppsScreen and InspectorView wiring (#1263) (#1286)

* feat(apps): AppsScreen and InspectorView wiring (#1263)

Adds the Apps tab as a top-level screen composed of `AppListItem`,
`AppDetailPanel`, and `AppRenderer`. The screen is presentational —
selection, form values, running, and maximize state are local; data and
side effects come in via props and callbacks.

InspectorView filters `tools` through `isAppTool` (wrapped in a try/catch
so a malformed `_meta.ui.resourceUri` skips one tool instead of dropping
every following App), exposes the Apps tab in `ALL_TABS` after Tools, and
wires Phase-3 stub callbacks plus a stub bridge factory.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(apps): extract AppControls and rename Refresh button

Pulls the sidebar list, search input, "List updated" indicator, and
Refresh button out of `AppsScreen` into a dedicated `AppControls`
group, mirroring `ToolControls` and `TaskControls`. The Refresh button
moves from a full-width row beneath the list to the top-right of the
title row (single label "Refresh", matching `TaskControls`).

`AppsScreen` keeps the right-pane orchestration (selection, form,
running, maximize, header actions) and now delegates the entire
sidebar to `AppControls`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(stories): seed InspectorView demo tools with MCP Apps

Adds three apps (Cohort Data, Weather Widget, Ops Dashboard) carrying
real `_meta.ui.resourceUri` to the demo tools list so the Apps tab has
content in the Default story alongside the existing tools.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(apps): drop AppDetailPanel title row to avoid duplicate name

The parent AppsScreen header already shows the app name, so the panel's
own title/icon row rendered the name twice. Remove the title row (and
its now-unused imports, styled subcomponents, and the four tests that
asserted on title/icon rendering).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(resources): drop annotation badges from ResourceListItem

The list row now renders just the resource title/name. Audience and
priority badges remain visible in the preview/template panels, so the
data is still surfaced — just not duplicated in the picker. Drops the
now-unused AnnotationBadge import, the badge-only stories, and the
badge-rendering test.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(apps): address review — share hasInputFields, show header icon

- Extracts the duplicated `Object.keys(inputSchema.properties ?? {}).length > 0`
  check from `AppsScreen` (and the equivalent in `AppDetailPanel`'s
  `hasFields`) into a shared `hasInputFields` helper in `toolUtils`,
  with tests.
- Renders the selected tool's first icon next to the right-pane header
  title in `AppsScreen`, restoring the icon visibility that was lost
  when `AppDetailPanel`'s title row was removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(apps): finish hasInputFields extraction; document isOpening

- AppDetailPanel now actually calls the shared `hasInputFields` helper
  instead of inlining the same `Object.keys(...).length > 0` check.
- AppsScreen comments why `isOpening={false}` is hardcoded: the screen
  flips to AppRenderer synchronously, so the loading state is unreachable
  here — the prop remains for standalone use and Phase 3 wiring.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/AppControls/AppControls.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { fn, userEvent, within } from "storybook/test";
+import { AppControls } from "./AppControls";
+import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
+
+const sampleApps: Tool[] = [
+  {
+    name: "get-cohort-data",
+    title: "Cohort Data",
+    description: "Returns cohort retention heatmap data.",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/cohort" } },
+  },
+  {
+    name: "weather-widget",
+    title: "Weather Widget",
+    description: "Live weather and a five-day forecast for any city.",
+    icons: [{ src: SUN_ICON_SVG, mimeType: "image/svg+xml" }],
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/weather" } },
+  },
+  {
+    name: "ops-dashboard",
+    title: "Ops Dashboard",
+    description: "Current operational status across services.",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/ops" } },
+  },
+  {
+    name: "git_log",
+    description: "Recent commits on the current branch.",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/git-log" } },
+  },
+];
+
+const meta: Meta<typeof AppControls> = {
+  title: "Groups/AppControls",
+  component: AppControls,
+  args: {
+    onRefreshList: fn(),
+    onSelectApp: fn(),
+    listChanged: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppControls>;
+
+export const Default: Story = {
+  args: {
+    tools: sampleApps,
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    tools: sampleApps,
+    selectedName: "weather-widget",
+  },
+};
+
+export const WithSearch: Story = {
+  args: {
+    tools: sampleApps,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(
+      await canvas.findByPlaceholderText("Search apps..."),
+      "git",
+    );
+  },
+};
+
+export const ListChanged: Story = {
+  args: {
+    tools: sampleApps,
+    listChanged: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    tools: [],
+  },
+};

clients/web/src/components/groups/AppControls/AppControls.test.tsx

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { AppControls } from "./AppControls";
+
+const sampleApps: Tool[] = [
+  {
+    name: "weather",
+    title: "Weather Widget",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/weather" } },
+  },
+  {
+    name: "ops",
+    title: "Ops Dashboard",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/ops" } },
+  },
+  {
+    name: "git_status",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/git-status" } },
+  },
+];
+
+const baseProps = {
+  tools: sampleApps,
+  listChanged: false,
+  onRefreshList: vi.fn(),
+  onSelectApp: vi.fn(),
+};
+
+describe("AppControls", () => {
+  it("renders the title with the app count and a search input", () => {
+    renderWithMantine(<AppControls {...baseProps} />);
+    expect(screen.getByText("MCP Apps (3)")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search apps...")).toBeInTheDocument();
+  });
+
+  it("renders all apps by default", () => {
+    renderWithMantine(<AppControls {...baseProps} />);
+    expect(screen.getByText("Weather Widget")).toBeInTheDocument();
+    expect(screen.getByText("Ops Dashboard")).toBeInTheDocument();
+    expect(screen.getByText("git_status")).toBeInTheDocument();
+  });
+
+  it("filters apps by name when typing in the search input", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppControls {...baseProps} />);
+    await user.type(screen.getByPlaceholderText("Search apps..."), "git");
+    expect(screen.getByText("git_status")).toBeInTheDocument();
+    expect(screen.queryByText("Weather Widget")).not.toBeInTheDocument();
+  });
+
+  it("filters apps by title when typing in the search input", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppControls {...baseProps} />);
+    await user.type(
+      screen.getByPlaceholderText("Search apps..."),
+      "weather widget",
+    );
+    expect(screen.getByText("Weather Widget")).toBeInTheDocument();
+    expect(screen.queryByText("Ops Dashboard")).not.toBeInTheDocument();
+  });
+
+  it("shows 'No apps available' when the tool list is empty", () => {
+    renderWithMantine(<AppControls {...baseProps} tools={[]} />);
+    expect(screen.getByText("No apps available")).toBeInTheDocument();
+    expect(screen.getByText("MCP Apps (0)")).toBeInTheDocument();
+  });
+
+  it("shows 'No matching apps' when search yields no results", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppControls {...baseProps} />);
+    await user.type(screen.getByPlaceholderText("Search apps..."), "zzz");
+    expect(screen.getByText("No matching apps")).toBeInTheDocument();
+  });
+
+  it("invokes onSelectApp when an unselected app is clicked", async () => {
+    const user = userEvent.setup();
+    const onSelectApp = vi.fn();
+    renderWithMantine(<AppControls {...baseProps} onSelectApp={onSelectApp} />);
+    await user.click(screen.getByText("git_status"));
+    expect(onSelectApp).toHaveBeenCalledWith("git_status");
+  });
+
+  it("does not invoke onSelectApp when the already-selected app is clicked", async () => {
+    const user = userEvent.setup();
+    const onSelectApp = vi.fn();
+    renderWithMantine(
+      <AppControls
+        {...baseProps}
+        selectedName="git_status"
+        onSelectApp={onSelectApp}
+      />,
+    );
+    await user.click(screen.getByText("git_status"));
+    expect(onSelectApp).not.toHaveBeenCalled();
+  });
+
+  it("invokes onRefreshList when the toolbar Refresh button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRefreshList = vi.fn();
+    renderWithMantine(
+      <AppControls {...baseProps} onRefreshList={onRefreshList} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(onRefreshList).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not show the list-changed indicator when listChanged is false", () => {
+    renderWithMantine(<AppControls {...baseProps} />);
+    expect(screen.queryByText("List updated")).not.toBeInTheDocument();
+  });
+
+  it("shows the list-changed indicator when listChanged is true", async () => {
+    const user = userEvent.setup();
+    const onRefreshList = vi.fn();
+    renderWithMantine(
+      <AppControls {...baseProps} listChanged onRefreshList={onRefreshList} />,
+    );
+    expect(screen.getByText("List updated")).toBeInTheDocument();
+    // Both the toolbar button and the list-changed indicator's button render
+    // as "Refresh"; either one should drive onRefreshList.
+    const refreshButtons = screen.getAllByRole("button", { name: "Refresh" });
+    expect(refreshButtons).toHaveLength(2);
+    await user.click(refreshButtons[1]);
+    expect(onRefreshList).toHaveBeenCalledTimes(1);
+  });
+});

clients/web/src/components/groups/AppControls/AppControls.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import {
+  Button,
+  Group,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
+import { AppListItem } from "../AppListItem/AppListItem";
+
+export interface AppControlsProps {
+  tools: Tool[];
+  selectedName?: string;
+  listChanged: boolean;
+  onRefreshList: () => void;
+  onSelectApp: (name: string) => void;
+}
+
+const LIST_MAX_HEIGHT =
+  "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 220px)";
+
+const ToolbarButton = Button.withProps({
+  variant: "subtle",
+  size: "sm",
+});
+
+const EmptyState = Text.withProps({
+  c: "dimmed",
+  ta: "center",
+  py: "xl",
+});
+
+export function AppControls({
+  tools,
+  selectedName,
+  listChanged,
+  onRefreshList,
+  onSelectApp,
+}: AppControlsProps) {
+  const [searchText, setSearchText] = useState("");
+  const query = searchText.toLowerCase();
+  const filteredTools = searchText
+    ? tools.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(query) ||
+          (tool.title?.toLowerCase().includes(query) ?? false),
+      )
+    : tools;
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between">
+        <Title order={4}>MCP Apps ({tools.length})</Title>
+        <ToolbarButton onClick={onRefreshList}>Refresh</ToolbarButton>
+      </Group>
+      <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      <TextInput
+        placeholder="Search apps..."
+        value={searchText}
+        onChange={(e) => setSearchText(e.currentTarget.value)}
+      />
+      <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
+        <Stack gap="xs">
+          {filteredTools.length === 0 ? (
+            <EmptyState>
+              {tools.length === 0 ? "No apps available" : "No matching apps"}
+            </EmptyState>
+          ) : (
+            filteredTools.map((tool) => (
+              <AppListItem
+                key={tool.name}
+                tool={tool}
+                selected={tool.name === selectedName}
+                onClick={() => {
+                  if (tool.name !== selectedName) onSelectApp(tool.name);
+                }}
+              />
+            ))
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
+    </Stack>
+  );
+}

clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx

@@ -4,8 +4,6 @@ import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { AppDetailPanel } from "./AppDetailPanel";
 
-const ICON_SRC = "data:image/svg+xml,%3Csvg/%3E";
-
 const noFieldsTool: Tool = {
   name: "no_input_app",
   title: "No Input App",
@@ -25,16 +23,6 @@ const requiredFieldTool: Tool = {
   },
 };
 
-const optionalFieldTool: Tool = {
-  name: "greet",
-  inputSchema: {
-    type: "object",
-    properties: {
-      name: { type: "string", description: "The name to greet" },
-    },
-  },
-};
-
 const baseProps = {
   formValues: {},
   isOpening: false,
@@ -43,20 +31,6 @@ const baseProps = {
 };
 
 describe("AppDetailPanel", () => {
-  it("prefers the title over the name", () => {
-    renderWithMantine(
-      <AppDetailPanel {...baseProps} tool={requiredFieldTool} />,
-    );
-    expect(screen.getByText("Greet")).toBeInTheDocument();
-  });
-
-  it("falls back to the name when title is missing", () => {
-    renderWithMantine(
-      <AppDetailPanel {...baseProps} tool={optionalFieldTool} />,
-    );
-    expect(screen.getByText("greet")).toBeInTheDocument();
-  });
-
   it("renders the description when provided", () => {
     renderWithMantine(<AppDetailPanel {...baseProps} tool={noFieldsTool} />);
     expect(screen.getByText("Takes no parameters")).toBeInTheDocument();
@@ -69,22 +43,6 @@ describe("AppDetailPanel", () => {
     expect(screen.queryByText("Takes no parameters")).not.toBeInTheDocument();
   });
 
-  it("renders the first icon when tool.icons is present", () => {
-    renderWithMantine(
-      <AppDetailPanel
-        {...baseProps}
-        tool={{ ...noFieldsTool, icons: [{ src: ICON_SRC }] }}
-      />,
-    );
-    const img = screen.getByRole("presentation");
-    expect(img).toHaveAttribute("src", ICON_SRC);
-  });
-
-  it("does not render an icon when tool.icons is missing", () => {
-    renderWithMantine(<AppDetailPanel {...baseProps} tool={noFieldsTool} />);
-    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
-  });
-
   it("renders the schema form using the tool's inputSchema", () => {
     renderWithMantine(
       <AppDetailPanel {...baseProps} tool={requiredFieldTool} />,

clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.tsx

@@ -1,8 +1,8 @@
-import { Button, Divider, Group, Image, Stack, Text } from "@mantine/core";
+import { Button, Divider, Stack, Text } from "@mantine/core";
 import { MdPlayArrow } from "react-icons/md";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
-import { resolveDisplayLabel } from "../../../utils/toolUtils";
 import { SchemaForm } from "../SchemaForm/SchemaForm";
+import { hasInputFields } from "../../../utils/toolUtils";
 
 export interface AppDetailPanelProps {
   tool: Tool;
@@ -12,29 +12,11 @@ export interface AppDetailPanelProps {
   onOpenApp: () => void;
 }
 
-const PanelTitle = Text.withProps({
-  fw: 700,
-  size: "lg",
-  truncate: true,
-});
-
 const DescriptionText = Text.withProps({
   size: "sm",
   c: "dimmed",
 });
 
-const TitleRow = Group.withProps({
-  gap: "sm",
-  align: "center",
-  wrap: "nowrap",
-});
-
-const PanelIcon = Image.withProps({
-  w: 24,
-  h: 24,
-  fit: "contain",
-});
-
 function hasMissingRequiredFields(
   schema: Tool["inputSchema"],
   values: Record<string, unknown>,
@@ -53,19 +35,13 @@ export function AppDetailPanel({
   onFormChange,
   onOpenApp,
 }: AppDetailPanelProps) {
-  const { name, title, description, icons, inputSchema } = tool;
+  const { description, inputSchema } = tool;
-  const iconSrc = icons?.[0]?.src;
   const hasErrors = hasMissingRequiredFields(inputSchema, formValues);
   const disabled = isOpening || hasErrors;
-  const hasFields = Object.keys(inputSchema.properties ?? {}).length > 0;
+  const hasFields = hasInputFields(tool);
 
   return (
     <Stack gap="md" miw={0}>
-      <TitleRow>
-        {iconSrc && <PanelIcon src={iconSrc} alt="" />}
-        <PanelTitle>{resolveDisplayLabel(name, title)}</PanelTitle>
-      </TitleRow>
-
       {description && <DescriptionText>{description}</DescriptionText>}
 
       {hasFields && <Divider />}

clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx

@@ -53,48 +53,3 @@ export const Template: Story = {
     selected: false,
   },
 };
-
-export const WithAudience: Story = {
-  args: {
-    resource: {
-      name: "settings.json",
-      uri: "file:///settings.json",
-      annotations: { audience: ["user"] },
-    },
-    selected: false,
-  },
-};
-
-export const WithPriority: Story = {
-  args: {
-    resource: {
-      name: "schema.sql",
-      uri: "file:///schema.sql",
-      annotations: { priority: 0.8 },
-    },
-    selected: false,
-  },
-};
-
-export const WithAudienceAndPriority: Story = {
-  args: {
-    resource: {
-      name: "config.json",
-      title: "Configuration File",
-      uri: "file:///config.json",
-      annotations: { audience: ["user", "assistant"], priority: 0.5 },
-    },
-    selected: false,
-  },
-};
-
-export const TemplateWithAnnotations: Story = {
-  args: {
-    resource: {
-      name: "User Profile",
-      uriTemplate: "file:///users/{userId}/profile",
-      annotations: { audience: ["assistant"], priority: 0.2 },
-    },
-    selected: false,
-  },
-};

clients/web/src/components/groups/ResourceListItem/ResourceListItem.test.tsx

@@ -29,7 +29,7 @@ describe("ResourceListItem", () => {
     expect(screen.getByText("Configuration")).toBeInTheDocument();
   });
 
-  it("renders annotation badges when annotations are present", () => {
+  it("does not render annotation badges even when annotations are present", () => {
     renderWithMantine(
       <ResourceListItem
         resource={{
@@ -40,19 +40,8 @@ describe("ResourceListItem", () => {
         onClick={() => {}}
       />,
     );
-    expect(screen.getByText("audience: user")).toBeInTheDocument();
-    expect(screen.getByText("priority: high")).toBeInTheDocument();
-  });
-
-  it("hides badges when only an empty audience annotation exists", () => {
-    renderWithMantine(
-      <ResourceListItem
-        resource={{ ...baseResource, annotations: { audience: [] } }}
-        selected={false}
-        onClick={() => {}}
-      />,
-    );
     expect(screen.queryByText(/audience/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/priority/)).not.toBeInTheDocument();
   });
 
   it("invokes onClick when the row is clicked", async () => {

clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx

@@ -1,9 +1,8 @@
-import { Group, Text, UnstyledButton } from "@mantine/core";
+import { Text, UnstyledButton } from "@mantine/core";
 import type {
   Resource,
   ResourceTemplate,
 } from "@modelcontextprotocol/sdk/types.js";
-import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 
 export interface ResourceListItemProps {
   resource: Resource | ResourceTemplate;
@@ -11,28 +10,11 @@ export interface ResourceListItemProps {
   onClick: () => void;
 }
 
-const RowGroup = Group.withProps({
-  gap: "xs",
-  wrap: "wrap",
-  justify: "space-between",
-});
-
-const BadgeGroup = Group.withProps({
-  gap: "xs",
-  wrap: "wrap",
-});
-
 export function ResourceListItem({
   resource,
   selected,
   onClick,
 }: ResourceListItemProps) {
-  const audience = resource.annotations?.audience;
-  const priority = resource.annotations?.priority;
-  const showBadges =
-    (audience !== undefined && audience.length > 0) || priority !== undefined;
-  const label = <Text fw={500}>{resource.title ?? resource.name}</Text>;
-
   return (
     <UnstyledButton
       w="100%"
@@ -41,21 +23,7 @@ export function ResourceListItem({
       bg={selected ? "var(--mantine-primary-color-light)" : undefined}
       onClick={onClick}
     >
-      {showBadges ? (
+      <Text fw={500}>{resource.title ?? resource.name}</Text>
-        <RowGroup>
-          {label}
-          <BadgeGroup>
-            {audience !== undefined && audience.length > 0 && (
-              <AnnotationBadge facet="audience" value={audience} />
-            )}
-            {priority !== undefined && (
-              <AnnotationBadge facet="priority" value={priority} />
-            )}
-          </BadgeGroup>
-        </RowGroup>
-      ) : (
-        label
-      )}
     </UnstyledButton>
   );
 }

clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx

@@ -0,0 +1,151 @@
+import { useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import type { AppBridge } from "@modelcontextprotocol/ext-apps/app-bridge";
+import { fn, userEvent, within } from "storybook/test";
+import { AppsScreen, type AppsScreenProps } from "./AppsScreen";
+import type {
+  AppRendererHandle,
+  BridgeFactory,
+} from "../../elements/AppRenderer/AppRenderer";
+import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
+
+const PLACEHOLDER_SANDBOX = "data:text/html,<title>Mock%20Sandbox</title>";
+
+function createMockBridge(): AppBridge {
+  return {
+    sendToolInput: async () => {},
+    sendToolResult: async () => {},
+    sendToolCancelled: async () => {},
+    teardownResource: async () => ({}),
+    close: async () => {},
+  } as unknown as AppBridge;
+}
+
+const okBridgeFactory: BridgeFactory = () => createMockBridge();
+
+const cohortApp: Tool = {
+  name: "get-cohort-data",
+  title: "Cohort Data",
+  description: "Returns cohort retention heatmap data.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      metric: { type: "string", description: "retention | engagement" },
+      periodType: { type: "string", description: "daily | weekly | monthly" },
+      cohortCount: { type: "number", description: "Cohorts to render" },
+      maxPeriods: { type: "number", description: "Periods per cohort" },
+    },
+    required: ["metric", "periodType"],
+  },
+  _meta: { ui: { resourceUri: "ui://apps/cohort-heatmap" } },
+};
+
+const weatherApp: Tool = {
+  name: "weather-widget",
+  title: "Weather Widget",
+  description: "Live weather and a five-day forecast for any city.",
+  icons: [{ src: SUN_ICON_SVG, mimeType: "image/svg+xml" }],
+  inputSchema: {
+    type: "object",
+    properties: {
+      city: { type: "string", description: "City name" },
+    },
+    required: ["city"],
+  },
+  _meta: { ui: { resourceUri: "ui://apps/weather" } },
+};
+
+const dashboardApp: Tool = {
+  name: "ops-dashboard",
+  title: "Ops Dashboard",
+  description: "Current operational status across services.",
+  inputSchema: { type: "object" },
+  _meta: { ui: { resourceUri: "ui://apps/ops" } },
+};
+
+const sampleApps: Tool[] = [cohortApp, weatherApp, dashboardApp];
+
+const meta: Meta<typeof AppsScreen> = {
+  title: "Screens/AppsScreen",
+  component: AppsScreen,
+  parameters: { layout: "fullscreen" },
+  args: {
+    sandboxPath: PLACEHOLDER_SANDBOX,
+    bridgeFactory: okBridgeFactory,
+    listChanged: false,
+    onRefreshList: fn(),
+    onSelectApp: fn(),
+    onOpenApp: fn(),
+    onCloseApp: fn(),
+  },
+  // Each story uses its own ref so AppRenderer's imperative handle gets a
+  // fresh slot per render (Storybook may keep the canvas mounted across
+  // arg edits, but the ref itself is owned by the wrapping component).
+  render: function StoryRender(args: AppsScreenProps) {
+    const ref = useRef<AppRendererHandle>(null);
+    return <AppsScreen {...args} rendererRef={ref} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppsScreen>;
+
+async function selectByLabel(canvasElement: HTMLElement, label: string) {
+  const canvas = within(canvasElement);
+  await userEvent.click(await canvas.findByText(label));
+}
+
+async function clickByName(canvasElement: HTMLElement, name: RegExp) {
+  const canvas = within(canvasElement);
+  await userEvent.click(await canvas.findByRole("button", { name }));
+}
+
+export const NoSelection: Story = {
+  args: { tools: sampleApps },
+};
+
+export const AppSelected: Story = {
+  args: { tools: sampleApps },
+  play: async ({ canvasElement }) => {
+    await selectByLabel(canvasElement, "Cohort Data");
+  },
+};
+
+export const AppRunning: Story = {
+  args: { tools: sampleApps },
+  play: async ({ canvasElement }) => {
+    await selectByLabel(canvasElement, "Weather Widget");
+    const canvas = within(canvasElement);
+    const cityField = await canvas.findByRole("textbox", { name: /city/i });
+    await userEvent.type(cityField, "Reykjavik");
+    await clickByName(canvasElement, /open app/i);
+  },
+};
+
+export const AppRunningMaximized: Story = {
+  args: { tools: sampleApps },
+  play: async ({ canvasElement }) => {
+    await selectByLabel(canvasElement, "Weather Widget");
+    const canvas = within(canvasElement);
+    const cityField = await canvas.findByRole("textbox", { name: /city/i });
+    await userEvent.type(cityField, "Reykjavik");
+    await clickByName(canvasElement, /open app/i);
+    await userEvent.click(await canvas.findByLabelText("Maximize"));
+  },
+};
+
+export const NoFieldsApp: Story = {
+  args: { tools: sampleApps },
+  play: async ({ canvasElement }) => {
+    await selectByLabel(canvasElement, "Ops Dashboard");
+  },
+};
+
+export const WithListChanged: Story = {
+  args: { tools: sampleApps, listChanged: true },
+};
+
+export const Empty: Story = {
+  args: { tools: [] },
+};

clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx

@@ -0,0 +1,282 @@
+import { createRef } from "react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import type { AppBridge } from "@modelcontextprotocol/ext-apps/app-bridge";
+import {
+  renderWithMantine,
+  screen,
+  within,
+} from "../../../test/renderWithMantine";
+import { AppsScreen } from "./AppsScreen";
+import type {
+  AppRendererHandle,
+  BridgeFactory,
+} from "../../elements/AppRenderer/AppRenderer";
+
+const noFieldsApp: Tool = {
+  name: "ops",
+  title: "Ops Dashboard",
+  inputSchema: { type: "object" },
+  _meta: { ui: { resourceUri: "ui://apps/ops" } },
+};
+
+const fieldedApp: Tool = {
+  name: "weather",
+  title: "Weather Widget",
+  inputSchema: {
+    type: "object",
+    properties: {
+      city: { type: "string", description: "City name" },
+    },
+    required: ["city"],
+  },
+  _meta: { ui: { resourceUri: "ui://apps/weather" } },
+};
+
+const cohortApp: Tool = {
+  name: "cohorts",
+  title: "Cohort Data",
+  description: "Cohort retention",
+  inputSchema: {
+    type: "object",
+    properties: { metric: { type: "string" } },
+  },
+  _meta: { ui: { resourceUri: "ui://apps/cohorts" } },
+};
+
+const okBridgeFactory: BridgeFactory = () =>
+  ({
+    sendToolInput: async () => {},
+    sendToolResult: async () => {},
+    sendToolCancelled: async () => {},
+    teardownResource: async () => ({}),
+    close: async () => {},
+  }) as unknown as AppBridge;
+
+function buildProps(overrides: Partial<Parameters<typeof AppsScreen>[0]> = {}) {
+  return {
+    tools: [fieldedApp, noFieldsApp, cohortApp] as Tool[],
+    listChanged: false,
+    // happy-dom would otherwise try to fetch the iframe `src` over the
+    // network. A data URL keeps the AppRenderer mountable without leaving
+    // the test environment.
+    sandboxPath: "data:text/html,<title>sandbox</title>",
+    bridgeFactory: okBridgeFactory,
+    rendererRef: createRef<AppRendererHandle>(),
+    onRefreshList: vi.fn(),
+    onSelectApp: vi.fn(),
+    onOpenApp: vi.fn(),
+    onCloseApp: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("AppsScreen", () => {
+  it("renders the empty selection state", () => {
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    expect(screen.getByText("Select an app to view details")).toBeVisible();
+    expect(screen.getByText("MCP Apps (3)")).toBeInTheDocument();
+  });
+
+  it("shows 'No apps available' when the tool list is empty", () => {
+    renderWithMantine(<AppsScreen {...buildProps({ tools: [] })} />);
+    expect(screen.getByText("No apps available")).toBeInTheDocument();
+    expect(screen.getByText("MCP Apps (0)")).toBeInTheDocument();
+  });
+
+  it("filters the list via the search input", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.type(screen.getByPlaceholderText("Search apps..."), "weather");
+    expect(screen.getByText("Weather Widget")).toBeInTheDocument();
+    expect(screen.queryByText("Ops Dashboard")).not.toBeInTheDocument();
+  });
+
+  it("shows 'No matching apps' when search yields no results", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.type(screen.getByPlaceholderText("Search apps..."), "zzz");
+    expect(screen.getByText("No matching apps")).toBeInTheDocument();
+  });
+
+  it("opens the detail panel when a fielded app is selected", async () => {
+    const user = userEvent.setup();
+    const onSelectApp = vi.fn();
+    const onOpenApp = vi.fn();
+    renderWithMantine(
+      <AppsScreen {...buildProps({ onSelectApp, onOpenApp })} />,
+    );
+    await user.click(screen.getByText("Weather Widget"));
+    expect(onSelectApp).toHaveBeenCalledWith("weather");
+    expect(onOpenApp).not.toHaveBeenCalled();
+    expect(
+      screen.getByRole("button", { name: /Open App/ }),
+    ).toBeInTheDocument();
+  });
+
+  it("auto-launches a no-fields app on selection", async () => {
+    const user = userEvent.setup();
+    const onOpenApp = vi.fn();
+    renderWithMantine(<AppsScreen {...buildProps({ onOpenApp })} />);
+    await user.click(screen.getByText("Ops Dashboard"));
+    expect(onOpenApp).toHaveBeenCalledWith("ops", {});
+    // Renderer iframe replaces the form; Open App button is gone.
+    expect(
+      screen.queryByRole("button", { name: /Open App/ }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByTitle("Ops Dashboard")).toBeInTheDocument();
+  });
+
+  it("invokes onOpenApp with form values when Open App is clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenApp = vi.fn();
+    renderWithMantine(<AppsScreen {...buildProps({ onOpenApp })} />);
+    await user.click(screen.getByText("Weather Widget"));
+    const cityField = screen.getByRole("textbox", { name: /city/i });
+    await user.type(cityField, "Reykjavik");
+    await user.click(screen.getByRole("button", { name: /Open App/ }));
+    expect(onOpenApp).toHaveBeenCalledWith("weather", { city: "Reykjavik" });
+    expect(screen.getByTitle("Weather Widget")).toBeInTheDocument();
+  });
+
+  it("returns to the input form when 'Back to Input' is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.click(screen.getByText("Weather Widget"));
+    await user.type(
+      screen.getByRole("textbox", { name: /city/i }),
+      "Reykjavik",
+    );
+    await user.click(screen.getByRole("button", { name: /Open App/ }));
+    await user.click(screen.getByRole("button", { name: /Back to Input/ }));
+    expect(
+      screen.getByRole("button", { name: /Open App/ }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show 'Back to Input' for a no-fields app", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.click(screen.getByText("Ops Dashboard"));
+    expect(
+      screen.queryByRole("button", { name: /Back to Input/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("toggles maximize, hiding the sidebar", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.click(screen.getByText("Ops Dashboard"));
+    expect(screen.getByText("MCP Apps (3)")).toBeInTheDocument();
+    await user.click(screen.getByLabelText("Maximize"));
+    expect(screen.queryByText("MCP Apps (3)")).not.toBeInTheDocument();
+    await user.click(screen.getByLabelText("Restore"));
+    expect(screen.getByText("MCP Apps (3)")).toBeInTheDocument();
+  });
+
+  it("calls onCloseApp and clears selection on Close", async () => {
+    const user = userEvent.setup();
+    const onCloseApp = vi.fn();
+    renderWithMantine(<AppsScreen {...buildProps({ onCloseApp })} />);
+    await user.click(screen.getByText("Ops Dashboard"));
+    await user.click(screen.getByLabelText("Close"));
+    expect(onCloseApp).toHaveBeenCalledTimes(1);
+    expect(screen.getByText("Select an app to view details")).toBeVisible();
+  });
+
+  it("ignores re-clicking the same app (no duplicate onSelectApp)", async () => {
+    const user = userEvent.setup();
+    const onSelectApp = vi.fn();
+    renderWithMantine(<AppsScreen {...buildProps({ onSelectApp })} />);
+    // After the first click "Weather Widget" appears both in the sidebar
+    // list item and the right-pane header, so target the sidebar entry
+    // explicitly via the list-item button role.
+    const listItem = screen.getByRole("button", { name: /Weather Widget/ });
+    await user.click(listItem);
+    await user.click(listItem);
+    expect(onSelectApp).toHaveBeenCalledTimes(1);
+  });
+
+  it("resets form state when switching to a different app", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<AppsScreen {...buildProps()} />);
+    await user.click(screen.getByText("Weather Widget"));
+    await user.type(
+      screen.getByRole("textbox", { name: /city/i }),
+      "Reykjavik",
+    );
+    await user.click(screen.getByText("Cohort Data"));
+    // Cohort form is fresh; Reykjavik (the previous tool's input) is gone.
+    expect(screen.queryByDisplayValue("Reykjavik")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Open App/ }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the ListChangedIndicator when listChanged is true", async () => {
+    const user = userEvent.setup();
+    const onRefreshList = vi.fn();
+    renderWithMantine(
+      <AppsScreen {...buildProps({ listChanged: true, onRefreshList })} />,
+    );
+    // The indicator and toolbar both render "Refresh" buttons; the indicator
+    // is a sibling of the "List updated" label, so target it via that label.
+    expect(screen.getByText("List updated")).toBeInTheDocument();
+    const refreshButtons = screen.getAllByRole("button", { name: "Refresh" });
+    expect(refreshButtons).toHaveLength(2);
+    await user.click(refreshButtons[0]);
+    expect(onRefreshList).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onRefreshList when the toolbar Refresh button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRefreshList = vi.fn();
+    renderWithMantine(<AppsScreen {...buildProps({ onRefreshList })} />);
+    await user.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(onRefreshList).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the tool icon next to the header title when present", async () => {
+    const user = userEvent.setup();
+    const iconSrc = "data:image/svg+xml,%3Csvg/%3E";
+    const iconedApp: Tool = {
+      name: "weather-with-icon",
+      title: "Weather (Iconed)",
+      icons: [{ src: iconSrc }],
+      inputSchema: { type: "object" },
+      _meta: { ui: { resourceUri: "ui://apps/weather-iconed" } },
+    };
+    renderWithMantine(<AppsScreen {...buildProps({ tools: [iconedApp] })} />);
+    await user.click(screen.getByText("Weather (Iconed)"));
+    const headerImg = screen
+      .getAllByRole("presentation")
+      .find((img) => img.getAttribute("src") === iconSrc);
+    expect(headerImg).toBeDefined();
+  });
+
+  it("ignores selection of an unknown tool name (defensive)", async () => {
+    const user = userEvent.setup();
+    const onSelectApp = vi.fn();
+    const { rerender } = renderWithMantine(
+      <AppsScreen {...buildProps({ onSelectApp })} />,
+    );
+    // Click an item, then re-render with a tools list that no longer
+    // contains it: the selection state stays put, but a follow-up click
+    // on the same name no-ops because the lookup fails.
+    await user.click(screen.getByText("Weather Widget"));
+    rerender(
+      <AppsScreen
+        {...buildProps({ onSelectApp, tools: [noFieldsApp, cohortApp] })}
+      />,
+    );
+    // Sidebar no longer shows Weather Widget; the right pane falls back
+    // to the empty selection state since the lookup misses.
+    expect(
+      within(screen.getByText("MCP Apps (2)").parentElement!).queryByText(
+        "Weather Widget",
+      ),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Select an app to view details")).toBeVisible();
+  });
+});

clients/web/src/components/screens/AppsScreen/AppsScreen.tsx

@@ -0,0 +1,276 @@
+import { useState, type Ref } from "react";
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Flex,
+  Group,
+  Image,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  MdArrowBack,
+  MdClose,
+  MdFullscreen,
+  MdFullscreenExit,
+} from "react-icons/md";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import {
+  AppRenderer,
+  type AppRendererHandle,
+  type BridgeFactory,
+} from "../../elements/AppRenderer/AppRenderer";
+import { AppDetailPanel } from "../../groups/AppDetailPanel/AppDetailPanel";
+import { AppControls } from "../../groups/AppControls/AppControls";
+import { hasInputFields, resolveDisplayLabel } from "../../../utils/toolUtils";
+
+export interface AppsScreenProps {
+  tools: Tool[];
+  listChanged: boolean;
+  sandboxPath: string;
+  bridgeFactory: BridgeFactory;
+  rendererRef: Ref<AppRendererHandle>;
+  onRefreshList: () => void;
+  onSelectApp: (name: string) => void;
+  onOpenApp: (name: string, args: Record<string, unknown>) => void;
+  onCloseApp: () => void;
+}
+
+const ScreenLayout = Flex.withProps({
+  variant: "screen",
+  h: "calc(100vh - var(--app-shell-header-height, 0px))",
+  gap: "md",
+  p: "xl",
+  align: "flex-start",
+});
+
+const Sidebar = Stack.withProps({
+  w: 340,
+  flex: "0 0 auto",
+});
+
+const SidebarCard = Card.withProps({
+  withBorder: true,
+  padding: "lg",
+});
+
+const ContentCard = Card.withProps({
+  withBorder: true,
+  padding: "lg",
+});
+
+const EmptyState = Text.withProps({
+  c: "dimmed",
+  ta: "center",
+  py: "xl",
+});
+
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+  gap: "sm",
+});
+
+const HeaderLabel = Group.withProps({
+  gap: "sm",
+  wrap: "nowrap",
+  align: "center",
+  flex: 1,
+  miw: 0,
+});
+
+const HeaderIcon = Image.withProps({
+  w: 24,
+  h: 24,
+  fit: "contain",
+});
+
+const HeaderTitle = Text.withProps({
+  fw: 600,
+  size: "lg",
+  truncate: true,
+  flex: 1,
+  miw: 0,
+});
+
+const HeaderActions = Group.withProps({
+  gap: "xs",
+  wrap: "nowrap",
+});
+
+const RendererFrame = Stack.withProps({
+  flex: 1,
+  miw: 0,
+  mih: 0,
+  gap: 0,
+});
+
+const ContentStack = Stack.withProps({
+  gap: "md",
+  h: "100%",
+});
+
+export function AppsScreen({
+  tools,
+  listChanged,
+  sandboxPath,
+  bridgeFactory,
+  rendererRef,
+  onRefreshList,
+  onSelectApp,
+  onOpenApp,
+  onCloseApp,
+}: AppsScreenProps) {
+  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
+    undefined,
+  );
+  const [formValues, setFormValues] = useState<Record<string, unknown>>({});
+  const [running, setRunning] = useState(false);
+  const [maximized, setMaximized] = useState(false);
+
+  const selectedTool = selectedAppName
+    ? tools.find((t) => t.name === selectedAppName)
+    : undefined;
+  const selectedHasFields = selectedTool ? hasInputFields(selectedTool) : false;
+
+  function handleSelect(name: string) {
+    if (name === selectedAppName) return;
+    const next = tools.find((t) => t.name === name);
+    if (!next) return;
+    setSelectedAppName(name);
+    setFormValues({});
+    setMaximized(false);
+    onSelectApp(name);
+    // No-input apps auto-launch on selection so the user lands directly in
+    // the running view; apps with fields wait for the explicit Open App click.
+    if (!hasInputFields(next)) {
+      setRunning(true);
+      onOpenApp(name, {});
+    } else {
+      setRunning(false);
+    }
+  }
+
+  function handleOpen() {
+    if (!selectedTool) return;
+    setRunning(true);
+    onOpenApp(selectedTool.name, formValues);
+  }
+
+  function handleClose() {
+    setRunning(false);
+    setSelectedAppName(undefined);
+    setFormValues({});
+    setMaximized(false);
+    onCloseApp();
+  }
+
+  function handleBackToInput() {
+    setRunning(false);
+    setMaximized(false);
+  }
+
+  return (
+    <ScreenLayout>
+      {!maximized && (
+        <Sidebar>
+          <SidebarCard>
+            <AppControls
+              tools={tools}
+              selectedName={selectedAppName}
+              listChanged={listChanged}
+              onRefreshList={onRefreshList}
+              onSelectApp={handleSelect}
+            />
+          </SidebarCard>
+        </Sidebar>
+      )}
+
+      <ContentCard flex={1} h="100%">
+        {selectedTool ? (
+          <ContentStack>
+            <HeaderRow>
+              <HeaderLabel>
+                {selectedTool.icons?.[0]?.src && (
+                  <HeaderIcon src={selectedTool.icons[0].src} alt="" />
+                )}
+                <HeaderTitle>
+                  {resolveDisplayLabel(selectedTool.name, selectedTool.title)}
+                </HeaderTitle>
+              </HeaderLabel>
+              <HeaderActions>
+                {running && selectedHasFields && (
+                  <Button
+                    variant="subtle"
+                    size="sm"
+                    leftSection={<MdArrowBack aria-hidden size={16} />}
+                    onClick={handleBackToInput}
+                  >
+                    Back to Input
+                  </Button>
+                )}
+                {running && (
+                  <Tooltip label={maximized ? "Restore" : "Maximize"}>
+                    <ActionIcon
+                      variant="subtle"
+                      onClick={() => setMaximized((m) => !m)}
+                      aria-label={maximized ? "Restore" : "Maximize"}
+                    >
+                      {maximized ? (
+                        <MdFullscreenExit aria-hidden size={20} />
+                      ) : (
+                        <MdFullscreen aria-hidden size={20} />
+                      )}
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+                <Tooltip label="Close">
+                  <ActionIcon
+                    variant="subtle"
+                    onClick={handleClose}
+                    aria-label="Close"
+                  >
+                    <MdClose aria-hidden size={20} />
+                  </ActionIcon>
+                </Tooltip>
+              </HeaderActions>
+            </HeaderRow>
+            {running ? (
+              <RendererFrame>
+                {/* Keying by name forces the renderer to remount when the
+                    selected app changes, ensuring a fresh bridge and iframe
+                    rather than reusing the previous app's transport. */}
+                <AppRenderer
+                  key={selectedTool.name}
+                  sandboxPath={sandboxPath}
+                  tool={selectedTool}
+                  bridgeFactory={bridgeFactory}
+                  ref={rendererRef}
+                />
+              </RendererFrame>
+            ) : (
+              // `isOpening` is always false here because `handleOpen`
+              // synchronously flips `running` to true, swapping in the
+              // AppRenderer before the panel could render its loading
+              // state. The prop stays in `AppDetailPanel`'s API for
+              // standalone use (the `Opening` story) and for Phase 3
+              // wiring, where a managed-state hook can hold the panel
+              // in a pending state across an awaited `tools/call`.
+              <AppDetailPanel
+                tool={selectedTool}
+                formValues={formValues}
+                isOpening={false}
+                onFormChange={setFormValues}
+                onOpenApp={handleOpen}
+              />
+            )}
+          </ContentStack>
+        ) : (
+          <EmptyState>Select an app to view details</EmptyState>
+        )}
+      </ContentCard>
+    </ScreenLayout>
+  );
+}

clients/web/src/components/views/InspectorView/InspectorView.stories.tsx

@@ -3,6 +3,7 @@ import type {
   Resource,
   ResourceTemplate,
   Task,
+  Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import type {
   InspectorResourceSubscription,
@@ -13,9 +14,54 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { InspectorView } from "./InspectorView";
 import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScreen.fixtures";
-import { longToolList as demoTools } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
+import { longToolList as demoRegularTools } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
+import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
 import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
 
+// MCP App tools — `isAppTool` detects these via `_meta.ui.resourceUri`,
+// so they get filtered into the Apps tab while still appearing on Tools.
+const demoApps: Tool[] = [
+  {
+    name: "get-cohort-data",
+    title: "Cohort Data",
+    description: "Cohort retention heatmap with adjustable period and metric.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        metric: { type: "string", description: "retention | engagement" },
+        periodType: { type: "string", description: "daily | weekly | monthly" },
+        cohortCount: { type: "number", description: "Cohorts to render" },
+        maxPeriods: { type: "number", description: "Periods per cohort" },
+      },
+      required: ["metric", "periodType"],
+    },
+    _meta: { ui: { resourceUri: "ui://apps/cohort-heatmap" } },
+  },
+  {
+    name: "weather-widget",
+    title: "Weather Widget",
+    description: "Live weather and a five-day forecast for any city.",
+    icons: [{ src: SUN_ICON_SVG, mimeType: "image/svg+xml" }],
+    inputSchema: {
+      type: "object",
+      properties: {
+        city: { type: "string", description: "City name" },
+      },
+      required: ["city"],
+    },
+    _meta: { ui: { resourceUri: "ui://apps/weather" } },
+  },
+  {
+    name: "ops-dashboard",
+    title: "Ops Dashboard",
+    description: "Current operational status across services.",
+    inputSchema: { type: "object" },
+    _meta: { ui: { resourceUri: "ui://apps/ops" } },
+  },
+];
+
+const demoTools: Tool[] = [...demoApps, ...demoRegularTools];
+
 const demoServers: ServerEntry[] = [
   {
     id: "5e8c3d1f-2a4b-4c6d-8e7f-1a2b3c4d5e6f",

clients/web/src/components/views/InspectorView/InspectorView.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import userEvent from "@testing-library/user-event";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import type { ServerEntry } from "@inspector/core/mcp/types.js";
 import {
   renderWithMantine,
@@ -127,6 +128,53 @@ describe("InspectorView", () => {
     expect(screen.getAllByText("Alpha").length).toBeGreaterThan(0);
   });
 
+  it("filters tools to apps and auto-launches a no-fields app on the Apps tab", async () => {
+    vi.spyOn(Math, "random").mockReturnValue(0.1);
+    const user = userEvent.setup();
+    const opsApp: Tool = {
+      name: "ops",
+      title: "Ops Dashboard",
+      inputSchema: { type: "object" },
+      _meta: { ui: { resourceUri: "ui://apps/ops" } },
+    };
+    // Plain (non-app) tool plus a tool with a malformed UI resource URI
+    // exercise both branches of the appTools filter: the non-app drop and
+    // the try/catch around `isAppTool` for malformed metadata.
+    const plainTool: Tool = {
+      name: "shell.exec",
+      title: "Run Shell",
+      inputSchema: { type: "object" },
+    };
+    const malformedAppTool: Tool = {
+      name: "broken",
+      title: "Broken App",
+      inputSchema: { type: "object" },
+      _meta: { ui: { resourceUri: "not-a-ui-uri" } },
+    };
+    renderWithMantine(
+      <InspectorView
+        {...baseProps}
+        servers={[sampleServer]}
+        tools={[opsApp, plainTool, malformedAppTool]}
+      />,
+    );
+    await user.click(screen.getByRole("switch"));
+    await waitFor(
+      () => {
+        expect(screen.getByRole("switch")).toBeChecked();
+      },
+      { timeout: 2000 },
+    );
+    const tabSelect = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect);
+    await user.click(await screen.findByText("Apps"));
+    expect(screen.getByText("MCP Apps (1)")).toBeInTheDocument();
+    // Auto-launch on selection mounts the AppRenderer, which invokes the
+    // stub bridge factory wired in InspectorView.
+    await user.click(screen.getByText("Ops Dashboard"));
+    expect(screen.getByTitle("Ops Dashboard")).toBeInTheDocument();
+  });
+
   it("toggles autoScroll on the Logs screen after connecting", async () => {
     vi.spyOn(Math, "random").mockReturnValue(0.1);
     const user = userEvent.setup();

clients/web/src/components/views/InspectorView/InspectorView.tsx

@@ -9,15 +9,22 @@ import type {
   Task,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
+import type { AppBridge } from "@modelcontextprotocol/ext-apps/app-bridge";
 import type {
   ConnectionStatus,
   InspectorResourceSubscription,
   MessageEntry,
   ServerEntry,
 } from "@inspector/core/mcp/types.js";
+import { isAppTool } from "@inspector/core/mcp/apps.js";
 import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
 import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen";
 import { ToolsScreen } from "../../screens/ToolsScreen/ToolsScreen";
+import { AppsScreen } from "../../screens/AppsScreen/AppsScreen";
+import type {
+  AppRendererHandle,
+  BridgeFactory,
+} from "../../elements/AppRenderer/AppRenderer";
 import { PromptsScreen } from "../../screens/PromptsScreen/PromptsScreen";
 import { ResourcesScreen } from "../../screens/ResourcesScreen/ResourcesScreen";
 import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
@@ -31,6 +38,7 @@ const SERVERS_TAB = "Servers";
 const ALL_TABS: string[] = [
   SERVERS_TAB,
   "Tools",
+  "Apps",
   "Prompts",
   "Resources",
   "Tasks",
@@ -38,6 +46,20 @@ const ALL_TABS: string[] = [
   "History",
 ];
 
+// Demo stub: Phase 3 wiring will replace this with a factory derived from
+// the active MCP `Client`. Apps are detected from the tools list, so the
+// "Apps" tab is exposed whenever the server advertises tools capability —
+// the screen itself receives only the already-filtered subset.
+const STUB_SANDBOX_PATH = "about:blank";
+const stubBridgeFactory: BridgeFactory = () =>
+  ({
+    sendToolInput: async () => {},
+    sendToolResult: async () => {},
+    sendToolCancelled: async () => {},
+    teardownResource: async () => ({}),
+    close: async () => {},
+  }) as unknown as AppBridge;
+
 const SCREEN_ENTER_MS = 350;
 const SCREEN_EXIT_MS = 250;
 
@@ -152,6 +174,19 @@ export function InspectorView({
   // toggles can cancel the previous attempt before it resolves and
   // overwrites the new server's state.
   const handshakeTimer = useRef<number | undefined>(undefined);
+  const appRendererRef = useRef<AppRendererHandle>(null);
+  const appTools = useMemo<Tool[]>(() => {
+    return tools.filter((tool) => {
+      try {
+        return isAppTool(tool);
+      } catch {
+        // `isAppTool` throws on malformed `_meta.ui.resourceUri`; tolerate
+        // mixed-validity tool lists by skipping the bad tool rather than
+        // halting the filter (and hiding every following App).
+        return false;
+      }
+    });
+  }, [tools]);
 
   // The view is the single source of truth for connection state. Any
   // `connection` field on incoming `serversInput` items is intentionally
@@ -290,6 +325,19 @@ export function InspectorView({
               onCallTool={noop}
             />
           </ScreenStage>
+          <ScreenStage active={activeTab === "Apps"}>
+            <AppsScreen
+              tools={appTools}
+              listChanged={false}
+              sandboxPath={STUB_SANDBOX_PATH}
+              bridgeFactory={stubBridgeFactory}
+              rendererRef={appRendererRef}
+              onRefreshList={noop}
+              onSelectApp={noop}
+              onOpenApp={noop}
+              onCloseApp={noop}
+            />
+          </ScreenStage>
           <ScreenStage active={activeTab === "Prompts"}>
             <PromptsScreen
               prompts={prompts}

clients/web/src/types/navigation.ts

@@ -1,5 +1,6 @@
 export type InspectorTab =
   | "tools"
+  | "apps"
   | "prompts"
   | "resources"
   | "logs"

clients/web/src/utils/toolUtils.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
-import { resolveDisplayLabel } from "./toolUtils";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { hasInputFields, resolveDisplayLabel } from "./toolUtils";
 
 describe("resolveDisplayLabel", () => {
   it("returns the title when provided", () => {
@@ -18,3 +19,31 @@ describe("resolveDisplayLabel", () => {
     expect(resolveDisplayLabel("send_message", "")).toBe("");
   });
 });
+
+describe("hasInputFields", () => {
+  const baseTool = (inputSchema: Tool["inputSchema"]): Tool => ({
+    name: "t",
+    inputSchema,
+  });
+
+  it("returns false when properties is missing", () => {
+    expect(hasInputFields(baseTool({ type: "object" }))).toBe(false);
+  });
+
+  it("returns false when properties is empty", () => {
+    expect(hasInputFields(baseTool({ type: "object", properties: {} }))).toBe(
+      false,
+    );
+  });
+
+  it("returns true when properties has at least one entry", () => {
+    expect(
+      hasInputFields(
+        baseTool({
+          type: "object",
+          properties: { x: { type: "string" } },
+        }),
+      ),
+    ).toBe(true);
+  });
+});

clients/web/src/utils/toolUtils.ts

@@ -1,3 +1,5 @@
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+
 /**
  * Returns the display label for an MCP entity that follows the BaseMetadata
  * shape (Tool, Prompt, Resource): the optional `title` if provided, else the
@@ -7,3 +9,13 @@
 export function resolveDisplayLabel(name: string, title?: string): string {
   return title ?? name;
 }
+
+/**
+ * True when the tool's input schema declares at least one property — used by
+ * App-flow callers to decide whether to render a form or auto-launch. Kept in
+ * one place so the definition of "has fields" stays consistent if it ever
+ * grows to consider `additionalProperties`, `anyOf`, etc.
+ */
+export function hasInputFields(tool: Tool): boolean {
+  return Object.keys(tool.inputSchema.properties ?? {}).length > 0;
+}