🤖 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

---

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

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

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

@@ -13,6 +13,7 @@ import type {
 import { getArtifactKind } from "@/common/utils/artifactKind";
 import { ArtifactsPanel } from "./ArtifactsPanel";
 import { writeArtifactSelection } from "./artifactSelection";
+import { openMcpAppView } from "./mcpAppViewsStore";
 
 const meta: Meta<typeof ArtifactsPanel> = {
   title: "Features/RightSidebar/ArtifactsPanel",
@@ -475,3 +476,155 @@ 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>`;
+
+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" },
+        },
+      })}
+    >
+      <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>
+    </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 };
@@ -280,4 +282,52 @@ 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");
+    }
+  });
 });

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

@@ -9,7 +9,9 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "@/browser/components/SelectPrimitive/SelectPrimitive";
@@ -27,6 +29,8 @@ import { getErrorMessage } from "@/common/utils/errors";
 import { useArtifactSelection, writeArtifactSelection } from "./artifactSelection";
 import { downloadArtifact } from "./artifactDownload";
 import { ArtifactViewer } from "./ArtifactViewer";
+import { McpAppFrame } from "./McpAppFrame";
+import { mcpAppSelectionKey, useMcpAppViews } from "./mcpAppViewsStore";
 import type { ArtifactFrameKey } from "./SandboxedArtifactFrame";
 
 /** While the tab is visible, re-list this often to catch writes no tool event reports. */
@@ -60,8 +64,12 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
   const panelRef = useRef<HTMLDivElement | null>(null);
   // Set while a list request runs, so a slow walk is not aborted by the next poll tick.
   const listInFlightRef = useRef(false);
+  // MCP Apps: "Open in Artifacts" on a tool card selects its view through the selection map.
   const { path: selectedPath } = useArtifactSelection(props.workspaceId);
   const setSelectedPath = (path: string) => writeArtifactSelection(props.workspaceId, { path });
+  const appViews = useMcpAppViews(props.workspaceId);
+  const selectedApp =
+    appViews.find((view) => mcpAppSelectionKey(view.toolCallId) === selectedPath) ?? null;
 
   useEffect(() => {
     if (!api) return;
@@ -113,7 +121,10 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
   }, []);
 
   const entries: ArtifactEntry[] = listing?.available === true ? listing.entries : [];
-  const selected = entries.find((entry) => entry.path === selectedPath) ?? entries[0] ?? null;
+  const selected =
+    selectedApp != null
+      ? null
+      : (entries.find((entry) => entry.path === selectedPath) ?? entries[0] ?? null);
   const selectedKey = selected ? `${selected.path}\u0000${selected.modifiedMs}` : null;
 
   useEffect(() => {
@@ -192,7 +203,14 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
   const downloadableResult = selectedResult?.status === "ok" ? selectedResult : null;
 
   const viewerBody =
-    selected == null ? null : readState?.path === selected.path && readState.result ? (
+    selectedApp != null ? (
+      <McpAppFrame
+        // Reload remounts the view, so it re-fetches its resource and result.
+        key={`${selectedApp.toolCallId}\u0000${reloadTick}`}
+        workspaceId={props.workspaceId}
+        view={selectedApp}
+      />
+    ) : selected == null ? null : readState?.path === selected.path && readState.result ? (
       <ArtifactViewer
         // Remount per file version so renderer state (zoom, JSON mode, frames) starts fresh.
         key={`${readState.path}\u0000${readState.modifiedMs}`}
@@ -225,7 +243,10 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
   // The version menu joins the actions once artifact versions exist.
   const artbar = (
     <div className="border-border-light bg-sidebar flex shrink-0 items-center gap-1.5 border-b px-2 py-1.5">
-      <Select value={selected?.path ?? ""} onValueChange={setSelectedPath}>
+      <Select
+        value={selectedApp ? mcpAppSelectionKey(selectedApp.toolCallId) : (selected?.path ?? "")}
+        onValueChange={setSelectedPath}
+      >
         <SelectTrigger
           aria-label="Artifact"
           className="h-6 min-w-0 flex-1 justify-between px-2 text-xs [&>span]:min-w-0"
@@ -246,6 +267,22 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
               </span>
             </SelectItem>
           ))}
+          {appViews.length > 0 && (
+            <SelectGroup>
+              <SelectLabel>App views</SelectLabel>
+              {appViews.map((view) => (
+                <SelectItem
+                  key={view.toolCallId}
+                  value={mcpAppSelectionKey(view.toolCallId)}
+                  className="text-xs"
+                >
+                  <span className="min-w-0 truncate">
+                    {view.label} · {view.serverName}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
         </SelectContent>
       </Select>
       {changedPaths.size > 0 && (
@@ -303,13 +340,21 @@ export function ArtifactsPanel(props: { workspaceId: string; inDialog?: boolean
   );
 
   let body: React.ReactNode;
-  if (listError != null) {
+  // App views do not depend on the artifacts folder, so they show even without a listing.
+  if (selectedApp != null) {
+    body = (
+      <>
+        {artbar}
+        <div className="min-h-0 flex-1 overflow-auto">{viewerBody}</div>
+      </>
+    );
+  } else if (listError != null) {
     body = <div className="text-danger p-4 text-xs">{listError}</div>;
   } else if (listing == null) {
     body = <div className="text-muted p-4 text-xs">Loading…</div>;
   } else if (!listing.available) {
     body = <div className="text-muted p-4 text-xs leading-relaxed">{listing.reason}</div>;
-  } else if (entries.length === 0) {
+  } else if (entries.length === 0 && appViews.length === 0) {
     body = (
       <div className="text-muted p-4 text-xs leading-relaxed">
         No artifacts yet. Files the agent writes to{" "}