🤖 feat: MCP Apps views in the Artifacts tab

- MCP Apps host backend: advertise the ui extension, fetch `ui://` view resources, keep tool results in a bounded side store
- MCP Apps views in the Artifacts tab (App views picker group) with a sandboxed frame, CSP and the host bridge
- "Open in Artifacts" on MCP tool calls that carry a view
- Storybook play test for an MCP Apps view
- Codex review round 1 fixes: the stored result record is the authoritative view binding (getView returns invocation), failure snapshots keep resourceUri, records publish only after the atomic write, view tool calls honor the effective tool allowlist, optional resourceUri with independent visibility, consent shows an argument preview, Reload remounts the view, connections made under the other MCP Apps setting restart when idle, frame navigation guard on McpAppFrame
- Codex review round 2 fixes: MCP App views fail closed outside the desktop app (no fetch, frame or host), failed or interrupted app calls record their invocation, oversize display snapshots drop only the app link, the picker stays above listing errors while views are open, the narrow layout opens views only in the dialog, the consent strip shows the full arguments and declines calls over 64 KiB

---

_Generated with `xum` • Model: `anthropic:claude-opus-5-5` • Thinking: `high` • Cost: `$117.29`_

<!-- mux-attribution: model=anthropic:claude-opus-5-5 thinking=high costs=117.29 -->

Author: ThomasK33

src/browser/components/SelectPrimitive/SelectPrimitive.tsx

@@ -116,4 +116,18 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem };
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("text-muted px-2 py-1 text-[11px] font-medium", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel };

src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx

@@ -299,6 +299,23 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
     return () => window.removeEventListener("keydown", handler);
   }, [artifactsExperimentEnabled, isTimelineSidebarHidden, workspaceId]);
 
+  // "Open in Artifacts" on an MCP Apps tool card: while the sidebar is hidden, the dialog is
+  // the only place the view can show.
+  useEffect(() => {
+    if (!artifactsExperimentEnabled) {
+      return;
+    }
+    const handler = (event: Event) => {
+      const detail = (event as CustomEvent<{ workspaceId: string }>).detail;
+      if (detail?.workspaceId !== workspaceId || !isTimelineSidebarHidden()) {
+        return;
+      }
+      setArtifactsDialogWorkspaceId(workspaceId);
+    };
+    window.addEventListener(CUSTOM_EVENTS.OPEN_MCP_APP_VIEW, handler);
+    return () => window.removeEventListener(CUSTOM_EVENTS.OPEN_MCP_APP_VIEW, handler);
+  }, [artifactsExperimentEnabled, isTimelineSidebarHidden, workspaceId]);
+
   const isDevcontainerWorkspace = isDevcontainerRuntime(runtimeConfig);
   const isRuntimeRunning = isDevcontainerWorkspace && runtimeStatus === "running";
   // Mirrors TaskService.isLocalUnrelatedMessagingEndpoint: unrelated delivery requires local or

src/browser/features/RightSidebar/ArtifactsTab/ArtifactsPanel.stories.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, type ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { useEffect, useRef, type ReactNode } from "react";
 import { APIProvider } from "@/browser/contexts/API";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import { createMockORPCClient } from "@/browser/stories/mocks/orpc";
@@ -15,6 +15,7 @@ import { getArtifactKind } from "@/common/utils/artifactKind";
 import { ArtifactsPanel } from "./ArtifactsPanel";
 import { writeArtifactSelection } from "./artifactSelection";
 import { DESKTOP_ONLY_PREVIEW_NOTICE } from "./executableFrames";
+import { openMcpAppView } from "./mcpAppViewsStore";
 
 /**
  * HTML/SVG frames mount only in the desktop app, detected by its preload bridge
@@ -520,3 +521,177 @@ export const BridgeEscapeExitsFullscreen: Story = {
     );
   },
 };
+
+// MCP Apps view (artifacts experiment): a fake server view implementing the spec handshake.
+// The frame is opaque-origin, so the play test reads progress from the heights the view
+// reports: 321px only after initialize -> initialized -> tool-input -> tool-result, then
+// 333px once its own tools/call round trip (behind the consent strip) succeeded.
+const MCP_APP_TOOL_CALL_ID = "call-weather-1";
+const MCP_APP_VIEW_HTML = `<!doctype html>
+<html>
+<head>
+<style>
+  body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; color: #0f172a; }
+  h1 { font-size: 16px; margin: 0 0 8px; }
+  li { font-size: 13px; }
+</style>
+</head>
+<body>
+  <h1>Weather view</h1>
+  <ul id="log"></ul>
+  <script>
+    const seen = {};
+    let nextId = 1;
+    const pending = new Map();
+    const log = (text) => {
+      const li = document.createElement("li");
+      li.textContent = text;
+      document.getElementById("log").appendChild(li);
+    };
+    const send = (message) => window.parent.postMessage(message, "*");
+    const request = (method, params) =>
+      new Promise((resolve, reject) => {
+        const id = nextId++;
+        pending.set(id, { resolve, reject });
+        send({ jsonrpc: "2.0", id, method, params });
+      });
+    const notify = (method, params) => send({ jsonrpc: "2.0", method, params });
+    const maybeReady = () => {
+      if (!(seen.init && seen.input && seen.result) || seen.sized) return;
+      seen.sized = true;
+      notify("ui/notifications/size-changed", { width: 400, height: 321 });
+      request("tools/call", { name: "get_forecast", arguments: { city: "Berlin" } }).then(
+        (result) => {
+          log("Forecast: " + result.content[0].text);
+          notify("ui/notifications/size-changed", { width: 400, height: 333 });
+        },
+        (error) => log("tools/call failed: " + error.message)
+      );
+    };
+    window.addEventListener("message", (event) => {
+      const message = event.data;
+      if (message.id !== undefined && pending.has(message.id)) {
+        const entry = pending.get(message.id);
+        pending.delete(message.id);
+        if (message.error) entry.reject(message.error);
+        else entry.resolve(message.result);
+        return;
+      }
+      if (message.method === "ui/resource-teardown") {
+        send({ jsonrpc: "2.0", id: message.id, result: {} });
+      } else if (message.method === "ui/notifications/tool-input") {
+        seen.input = true;
+        log("Input: " + JSON.stringify(message.params.arguments));
+      } else if (message.method === "ui/notifications/tool-result") {
+        seen.result = true;
+        log("Result: " + message.params.content[0].text);
+      }
+      maybeReady();
+    });
+    request("ui/initialize", {
+      protocolVersion: "2026-01-26",
+      appInfo: { name: "weather-view", version: "1.0.0" },
+      appCapabilities: {},
+    }).then((result) => {
+      seen.init = true;
+      log("Host theme: " + result.hostContext.theme);
+      notify("ui/notifications/initialized", {});
+      maybeReady();
+    });
+  </script>
+</body>
+</html>`;
+
+/**
+ * MCP App views mount only in the desktop app (executableFrames.ts). Storybook has no preload
+ * bridge, so these stories stand one in and restore the original afterwards.
+ */
+function DesktopApiStub(props: { children: ReactNode }) {
+  const originalApiRef = useRef(window.api);
+  window.api = {
+    platform: "linux",
+    versions: { node: "20.0.0", chrome: "120.0.0", electron: "28.0.0" },
+    getIsRosetta: () => Promise.resolve(false),
+  };
+  useEffect(() => {
+    const savedApi = originalApiRef.current;
+    return () => {
+      window.api = savedApi;
+    };
+  }, []);
+  return <>{props.children}</>;
+}
+
+function renderMcpAppView() {
+  updatePersistedState(ARTIFACTS_ALLOW_CDN_SCRIPTS_KEY, true);
+  openMcpAppView(WORKSPACE_ID, {
+    toolCallId: MCP_APP_TOOL_CALL_ID,
+    serverName: "weather",
+    resourceUri: "ui://weather/view.html",
+    toolName: "show_weather",
+    label: "Show weather",
+    arguments: { city: "Berlin" },
+    cancelled: false,
+  });
+  return (
+    <APIProvider
+      client={createMockORPCClient({
+        artifacts: { listing: listingFor(FILES), files: FILES },
+        mcpApps: {
+          views: {
+            [MCP_APP_TOOL_CALL_ID]: {
+              html: MCP_APP_VIEW_HTML,
+              // jsdelivr is on the CDN allowlist; the tile host is not, so it is listed as
+              // not granted.
+              csp: { resourceDomains: ["https://cdn.jsdelivr.net", "https://tiles.example.com"] },
+              prefersBorder: null,
+              resultAvailable: true,
+              result: { content: [{ type: "text", text: "Berlin: 18°C, light rain" }] },
+              invocation: {
+                serverName: "weather",
+                toolName: "show_weather",
+                arguments: { city: "Berlin" },
+              },
+            },
+          },
+          // get_forecast is visible to the model too: the first call needs the user's consent.
+          callTool: (input) =>
+            input.consented
+              ? { status: "ok", result: { content: [{ type: "text", text: "Sunny tomorrow" }] } }
+              : { status: "consent_required" },
+        },
+      })}
+    >
+      <DesktopApiStub>
+        <div className="bg-background flex h-screen justify-end">
+          <div className="bg-sidebar border-border-light h-full w-full max-w-[440px] border-l">
+            <ArtifactsPanel workspaceId={WORKSPACE_ID} />
+          </div>
+        </div>
+      </DesktopApiStub>
+    </APIProvider>
+  );
+}
+
+const playMcpAppView = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement);
+  const frame = await canvas.findByTestId("mcp-app-frame");
+  await expect(frame.getAttribute("sandbox")).toBe("allow-scripts");
+  await canvas.findByText(/Not granted to this view: https:\/\/tiles\.example\.com/);
+  await waitFor(() => expect(frame.style.height).toBe("321px"), { timeout: 5000 });
+  const strip = await canvas.findByRole("alert");
+  await expect(strip.textContent).toContain("Allow get_forecast from weather?");
+  await userEvent.click(within(strip).getByRole("button", { name: "Allow" }));
+  await waitFor(() => expect(frame.style.height).toBe("333px"), { timeout: 5000 });
+};
+
+export const McpAppViewLaptop: Story = {
+  ...LAPTOP,
+  render: () => renderMcpAppView(),
+  play: ({ canvasElement }) => playMcpAppView(canvasElement),
+};
+export const McpAppViewPhone: Story = {
+  ...PHONE,
+  render: () => renderMcpAppView(),
+  play: ({ canvasElement }) => playMcpAppView(canvasElement),
+};

src/browser/features/RightSidebar/ArtifactsTab/ArtifactsPanel.test.tsx

@@ -7,6 +7,7 @@ import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { installDom } from "../../../../../tests/ui/dom";
 import { APIProvider, type APIClient } from "@/browser/contexts/API";
+import { ThemeProvider } from "@/browser/contexts/ThemeContext";
 import type {
   ArtifactEntry,
   ArtifactListing,
@@ -18,6 +19,7 @@ import {
 } from "@/common/constants/storage";
 import { ArtifactsPanel } from "./ArtifactsPanel";
 import { readArtifactSelection, writeArtifactSelection } from "./artifactSelection";
+import { closeMcpAppView, openMcpAppView } from "./mcpAppViewsStore";
 
 function entry(path: string, modifiedMs: number, kind: ArtifactEntry["kind"]): ArtifactEntry {
   return { path, kind, size: 10, modifiedMs };
@@ -74,6 +76,8 @@ describe("ArtifactsPanel", () => {
   beforeEach(() => {
     cleanupDom = installDom();
     window.localStorage.clear();
+    // Desktop mode, so app views mount their frame (executableFrames.ts).
+    window.api = { getIsRosetta: () => Promise.resolve(false) } as unknown as typeof window.api;
   });
 
   afterEach(() => {
@@ -302,4 +306,93 @@ describe("ArtifactsPanel", () => {
     const view = renderPanel();
     expect(await view.findByText(/is too large to preview/)).toBeTruthy();
   });
+
+  test("Reload re-fetches a selected app view", async () => {
+    fake = createFakeArtifactsApi(
+      { available: true, dir: "/scratch/artifacts", entries: [], truncated: false },
+      {}
+    );
+    let getViewCalls = 0;
+    fake.api.mcpApps = {
+      getView: () => {
+        getViewCalls += 1;
+        return Promise.resolve({
+          success: true as const,
+          data: {
+            html: "<p>view</p>",
+            csp: {},
+            prefersBorder: null,
+            resultAvailable: false,
+            result: null,
+            invocation: null,
+          },
+        });
+      },
+    };
+    openMcpAppView("ws-app-reload", {
+      toolCallId: "call-1",
+      serverName: "charts",
+      resourceUri: "ui://charts/view",
+      toolName: "show_chart",
+      label: "Show chart",
+      arguments: {},
+      cancelled: false,
+    });
+    try {
+      const view = render(<ArtifactsPanel workspaceId="ws-app-reload" />, {
+        wrapper: (props: { children: ReactNode }) => (
+          <ThemeProvider forcedTheme="dark">
+            <ApiWrapper>{props.children}</ApiWrapper>
+          </ThemeProvider>
+        ),
+      });
+      await view.findByTestId("mcp-app-frame");
+      expect(getViewCalls).toBe(1);
+      fireEvent.click(view.getByRole("button", { name: "Reload artifact" }));
+      await waitFor(() => expect(getViewCalls).toBe(2));
+    } finally {
+      closeMcpAppView("ws-app-reload", "call-1");
+    }
+  });
+
+  test("the remaining app views stay reachable after closing one, without a listing", async () => {
+    fake = createFakeArtifactsApi(
+      { available: true, dir: "/scratch/artifacts", entries: [], truncated: false },
+      {}
+    );
+    fake.api.artifacts = {
+      ...fake.api.artifacts,
+      list: () => Promise.resolve({ success: false as const, error: "Listing failed" }),
+    };
+    fake.api.mcpApps = {
+      getView: () => Promise.resolve({ success: false as const, error: "No view" }),
+    };
+    const ref = (toolCallId: string, label: string) => ({
+      toolCallId,
+      serverName: "charts",
+      resourceUri: "ui://charts/view",
+      toolName: "show_chart",
+      label,
+      arguments: {},
+      cancelled: false,
+    });
+    openMcpAppView("ws-app-close", ref("call-a", "First view"));
+    openMcpAppView("ws-app-close", ref("call-b", "Second view"));
+    try {
+      const view = render(<ArtifactsPanel workspaceId="ws-app-close" />, {
+        wrapper: (props: { children: ReactNode }) => (
+          <ThemeProvider forcedTheme="dark">
+            <ApiWrapper>{props.children}</ApiWrapper>
+          </ThemeProvider>
+        ),
+      });
+      // The most recently opened view is selected; close it.
+      fireEvent.click(await view.findByRole("button", { name: "Close view" }));
+      expect(await view.findByText("Listing failed")).toBeTruthy();
+      expect(view.getByRole("combobox", { name: "Artifact" })).toBeTruthy();
+    } finally {
+      closeMcpAppView("ws-app-close", "call-a");
+      closeMcpAppView("ws-app-close", "call-b");
+    }
+  });
 });