@agimon-ai/po-web-dashboard 0.0.0-alpha.0

package/dist/web/components/Remote.fixture.mjs

@@ -0,0 +1,72 @@
+import { DEV_PROXY_TARGETS_ROUTE } from "../../types/devProxy.mjs";
+import { devProxyStore } from "../stores/devProxyStore.mjs";
+import { remoteAccessStore } from "../stores/remoteAccessStore.mjs";
+import { mockStoryRequests } from "./Story.fixture.mjs";
+//#region src/web/components/Remote.fixture.tsx
+const remoteView = {
+	status: "off",
+	devices: [{
+		id: "story-device",
+		label: "A paired phone with a long descriptive name",
+		userAgent: "Example mobile browser on a personal phone",
+		createdAt: "2026-09-01T10:00:00.000Z",
+		lastSeenAt: "2026-09-01T10:00:00.000Z",
+		self: false
+	}],
+	pending: [],
+	trustedDevices: [{
+		id: "story-trusted-phone",
+		label: "A trusted phone with a long descriptive name",
+		platform: "ios",
+		createdAt: "2026-09-01T10:00:00.000Z",
+		lastSeenAt: "2026-09-01T10:00:00.000Z",
+		self: false
+	}],
+	settings: {
+		autoCloseEnabled: true,
+		autoCloseMinutes: 30,
+		sessionExpiryEnabled: true,
+		idleMinutes: 15,
+		absoluteHours: 24,
+		tunnel: { kind: "quick" },
+		sandbox: {
+			enabled: true,
+			workspaces: ["/workspace/po"]
+		}
+	}
+};
+function seedRemoteStory(patch = {}, proxyPatch = {}) {
+	const proxy = {
+		targets: [{
+			name: "component-preview",
+			port: 3e3,
+			createdAt: 0
+		}],
+		canRegister: true,
+		busy: false,
+		...proxyPatch
+	};
+	mockStoryRequests({ [`GET ${DEV_PROXY_TARGETS_ROUTE}`]: {
+		targets: proxy.targets,
+		canRegister: proxy.canRegister
+	} });
+	devProxyStore.setState(() => proxy);
+	remoteAccessStore.setState(() => ({
+		step: "options",
+		busy: false,
+		view: remoteView,
+		pairUrl: "https://example.invalid/pair#story-only",
+		pairCode: "STORY-CODE",
+		pairFingerprint: "0123456789abcdef0123456789abcdef",
+		pairRevision: 1,
+		passkeys: {
+			supported: true,
+			count: 0
+		},
+		...patch
+	}));
+}
+//#endregion
+export { remoteView, seedRemoteStory };
+
+//# sourceMappingURL=Remote.fixture.mjs.map

package/dist/web/components/Remote.fixture.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Remote.fixture.mjs","names":[],"sources":["../../../src/web/components/Remote.fixture.tsx"],"sourcesContent":["import { DEV_PROXY_TARGETS_ROUTE } from '../../types/devProxy.ts';\nimport type { RemoteAccessStateView } from '../../types/remoteAccess.ts';\nimport { devProxyStore, type DevProxyState } from '../stores/devProxyStore.ts';\nimport { remoteAccessStore, type RemoteAccessState } from '../stores/remoteAccessStore.ts';\nimport { mockStoryRequests } from './Story.fixture.tsx';\n\nexport const remoteView: RemoteAccessStateView = {\n  status: 'off',\n  devices: [\n    {\n      id: 'story-device',\n      label: 'A paired phone with a long descriptive name',\n      userAgent: 'Example mobile browser on a personal phone',\n      createdAt: '2026-09-01T10:00:00.000Z',\n      lastSeenAt: '2026-09-01T10:00:00.000Z',\n      self: false,\n    },\n  ],\n  pending: [],\n  trustedDevices: [\n    {\n      id: 'story-trusted-phone',\n      label: 'A trusted phone with a long descriptive name',\n      platform: 'ios',\n      createdAt: '2026-09-01T10:00:00.000Z',\n      lastSeenAt: '2026-09-01T10:00:00.000Z',\n      self: false,\n    },\n  ],\n  settings: {\n    autoCloseEnabled: true,\n    autoCloseMinutes: 30,\n    sessionExpiryEnabled: true,\n    idleMinutes: 15,\n    absoluteHours: 24,\n    tunnel: { kind: 'quick' },\n    sandbox: { enabled: true, workspaces: ['/workspace/po'] },\n  },\n};\n\nexport function seedRemoteStory(patch: Partial<RemoteAccessState> = {}, proxyPatch: Partial<DevProxyState> = {}): void {\n  const proxy: DevProxyState = {\n    targets: [{ name: 'component-preview', port: 3000, createdAt: 0 }],\n    canRegister: true,\n    busy: false,\n    ...proxyPatch,\n  };\n  mockStoryRequests({ [`GET ${DEV_PROXY_TARGETS_ROUTE}`]: { targets: proxy.targets, canRegister: proxy.canRegister } });\n  devProxyStore.setState(() => proxy);\n  remoteAccessStore.setState(() => ({\n    step: 'options',\n    busy: false,\n    view: remoteView,\n    pairUrl: 'https://example.invalid/pair#story-only',\n    pairCode: 'STORY-CODE',\n    pairFingerprint: '0123456789abcdef0123456789abcdef',\n    pairRevision: 1,\n    passkeys: { supported: true, count: 0 },\n    ...patch,\n  }));\n}\n"],"mappings":";;;;;AAMA,MAAa,aAAoC;CAC/C,QAAQ;CACR,SAAS,CACP;EACE,IAAI;EACJ,OAAO;EACP,WAAW;EACX,WAAW;EACX,YAAY;EACZ,MAAM;CACR,CACF;CACA,SAAS,CAAC;CACV,gBAAgB,CACd;EACE,IAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW;EACX,YAAY;EACZ,MAAM;CACR,CACF;CACA,UAAU;EACR,kBAAkB;EAClB,kBAAkB;EAClB,sBAAsB;EACtB,aAAa;EACb,eAAe;EACf,QAAQ,EAAE,MAAM,QAAQ;EACxB,SAAS;GAAE,SAAS;GAAM,YAAY,CAAC,eAAe;EAAE;CAC1D;AACF;AAEA,SAAgB,gBAAgB,QAAoC,CAAC,GAAG,aAAqC,CAAC,GAAS;CACrH,MAAM,QAAuB;EAC3B,SAAS,CAAC;GAAE,MAAM;GAAqB,MAAM;GAAM,WAAW;EAAE,CAAC;EACjE,aAAa;EACb,MAAM;EACN,GAAG;CACL;CACA,kBAAkB,GAAG,OAAO,4BAA4B;EAAE,SAAS,MAAM;EAAS,aAAa,MAAM;CAAY,EAAE,CAAC;CACpH,cAAc,eAAe,KAAK;CAClC,kBAAkB,gBAAgB;EAChC,MAAM;EACN,MAAM;EACN,MAAM;EACN,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,cAAc;EACd,UAAU;GAAE,WAAW;GAAM,OAAO;EAAE;EACtC,GAAG;CACL,EAAE;AACJ"}

package/dist/web/components/SessionMcp.cjs

@@ -0,0 +1,279 @@
+const require_sessionMcpPrompt = require("../lib/sessionMcpPrompt.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/components/SessionMcp.tsx
+const TONES = {
+	running: "running",
+	succeeded: "ok",
+	failed: "error",
+	cancelled: "neutral",
+	interrupted: "neutral"
+};
+function CallStatus({ status }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.StatusBadge, {
+		tone: TONES[status],
+		size: "xs",
+		children: status
+	});
+}
+function McpError({ state }) {
+	return state.error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "alert",
+		className: "flex items-center justify-between gap-3 border-b border-doom-border px-4 py-3 text-sm text-doom-red",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [state.error, " Displayed data may be out of date."] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+			variant: "outline",
+			size: "xs",
+			onClick: state.refresh,
+			children: "retry"
+		})]
+	});
+}
+/** Remote calls are not chat messages and never enter the agent's transcript. */
+function SessionMcp({ state }) {
+	const calls = state.snapshot?.calls ?? [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		"data-testid": "session-mcp-history",
+		"aria-label": "MCP call history",
+		className: "flex h-full min-h-0 flex-col bg-doom-bg text-doom-text",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-b border-doom-border px-5 py-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-lg font-semibold text-doom-hi",
+					children: "Remote MCP activity"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "mt-1 text-sm text-doom-dim",
+					children: [
+						state.snapshot?.total ?? 0,
+						" calls recorded · ",
+						state.before === void 0 ? "latest calls" : "older calls"
+					]
+				})] }), state.before === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.StatusBadge, {
+					tone: state.error ? "error" : "info",
+					size: "sm",
+					children: state.error ? "offline" : "live"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: state.showLatest,
+					children: "latest calls"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(McpError, { state }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1 overflow-y-auto px-5",
+				"aria-busy": state.loading,
+				children: state.loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					title: "loading MCP calls",
+					description: "Reading this session's remote tool history.",
+					className: "py-8"
+				}) : calls.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					title: "no MCP calls recorded yet",
+					description: "Remote tool calls will appear here as they start. Calls made before history capture was added are not available.",
+					className: "py-8"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Accordion, {
+					type: "multiple",
+					children: calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.AccordionItem, {
+						value: call.id,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AccordionTrigger, {
+							className: "py-3",
+							"data-testid": `mcp-call-${call.id}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CallStatus, { status: call.status }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "min-w-0 break-all text-base font-semibold text-doom-hi",
+										children: call.toolName
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "ml-auto flex shrink-0 items-center gap-3 text-sm text-doom-dim",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: call.finishedAt === void 0 ? "in progress" : `${Math.max(0, call.finishedAt - call.startedAt).toLocaleString()} ms` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+											dateTime: new Date(call.startedAt).toISOString(),
+											title: new Date(call.startedAt).toLocaleString(),
+											children: new Date(call.startedAt).toLocaleTimeString()
+										})]
+									})
+								]
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.AccordionContent, {
+							className: "space-y-3 pb-4",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+									className: "text-sm text-doom-dim",
+									children: [
+										call.clientName,
+										" · ",
+										new Date(call.startedAt).toLocaleString()
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SectionLabel, { children: "arguments" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "max-h-64 overflow-auto",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.CodeBlock, {
+										text: call.input,
+										className: "language-json"
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SectionLabel, { children: "result" }),
+								call.output === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-sm text-doom-dim",
+									children: call.status === "interrupted" ? "The host stopped before a result was recorded." : "Waiting for the tool result."
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "max-h-80 overflow-auto",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.CodeBlock, {
+										text: call.output,
+										className: "language-json"
+									})
+								})
+							]
+						})]
+					}, call.id))
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-t border-doom-border px-5 py-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm text-doom-dim",
+					children: "Text previews are limited to 16 KB. Common credential fields are redacted."
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+					variant: "outline",
+					size: "sm",
+					disabled: state.loading || state.snapshot?.nextBefore === void 0,
+					onClick: state.loadOlder,
+					children: "older calls"
+				})]
+			})
+		]
+	});
+}
+/** Inventory comes from the same grant-filtered surface that the remote caller can use. */
+function SessionMcpTools({ state }) {
+	const [query, setQuery] = (0, react.useState)("");
+	const [copyState, setCopyState] = (0, react.useState)("idle");
+	const tools = state.snapshot?.tools ?? [];
+	const toolPrefix = state.snapshot?.toolPrefix;
+	async function copyPrompt() {
+		if (navigator.clipboard === void 0) {
+			setCopyState("failed");
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(require_sessionMcpPrompt.sessionMcpToolsPrompt(tools, toolPrefix));
+			setCopyState("copied");
+		} catch {
+			setCopyState("failed");
+		}
+	}
+	const filtered = tools.filter((tool) => `${tool.name} ${tool.description}`.toLowerCase().includes(query.trim().toLowerCase()));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		"data-testid": "session-mcp-tools",
+		"aria-label": "Available MCP tools",
+		className: "flex min-h-0 flex-1 flex-col text-doom-text",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-3 border-b border-doom-border-soft px-4 py-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SectionLabel, { children: "available tools" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+								type: "button",
+								variant: "outline",
+								size: "xs",
+								"data-testid": "session-mcp-copy-prompt",
+								disabled: !state.snapshot?.available || tools.length === 0,
+								onClick: () => void copyPrompt(),
+								children: copyState === "copied" ? "copied" : "copy as prompt"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.StatusBadge, {
+								tone: "info",
+								size: "xs",
+								children: tools.length
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-sm text-doom-dim",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "Tools granted to this session's remote connections." }),
+							toolPrefix ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "mt-1",
+								"data-testid": "session-mcp-remote-prefix",
+								children: ["remote names start with ", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", {
+									className: "text-doom-text",
+									children: [toolPrefix, "_"]
+								})]
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("output", {
+								"aria-live": "polite",
+								children: [copyState === "failed" ? "copying the prompt was blocked. allow clipboard access and try again." : "", copyState === "copied" ? "prompt copied." : ""]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+						"aria-label": "Search MCP tools",
+						placeholder: "search tools...",
+						value: query,
+						onChange: (event) => setQuery(event.target.value)
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(McpError, { state }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-h-0 flex-1 overflow-y-auto px-4",
+				"aria-busy": state.loading,
+				children: state.snapshot === void 0 && state.loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					title: "loading tools",
+					className: "py-5"
+				}) : !state.snapshot?.available ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					title: "no active MCP connection",
+					description: "History is retained. Available tools return when the session and its remote connection are active.",
+					className: "py-5"
+				}) : filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					title: query ? "no matching tools" : "no tools granted",
+					description: query ? "Try a different tool name." : "This connection does not currently grant any tools.",
+					className: "py-5"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Accordion, {
+					type: "multiple",
+					children: filtered.map((tool) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.AccordionItem, {
+						value: tool.name,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.AccordionTrigger, {
+							className: "py-3",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "min-w-0 break-all text-base font-semibold text-doom-hi",
+								children: tool.name
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.AccordionContent, {
+							className: "space-y-3 pb-3",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "whitespace-pre-wrap break-words text-base leading-relaxed",
+									children: tool.description
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-sm text-doom-dim",
+									children: tool.connections.join(", ")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SectionLabel, { children: "input schema" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "max-h-64 overflow-auto",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.CodeBlock, {
+										text: JSON.stringify(tool.inputSchema, null, 2),
+										className: "language-json"
+									})
+								})
+							]
+						})]
+					}, tool.name))
+				})
+			})
+		]
+	});
+}
+//#endregion
+exports.SessionMcp = SessionMcp;
+exports.SessionMcpTools = SessionMcpTools;
+
+//# sourceMappingURL=SessionMcp.cjs.map

package/dist/web/components/SessionMcp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionMcp.cjs","names":["StatusBadge","Button","EmptyState","Accordion","AccordionItem","AccordionTrigger","AccordionContent","SectionLabel","CodeBlock","useState","sessionMcpToolsPrompt","Input"],"sources":["../../../src/web/components/SessionMcp.tsx"],"sourcesContent":["import type { SessionMcpCallStatus } from '@agimon-ai/po-core/sessionMcp';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Button,\n  CodeBlock,\n  EmptyState,\n  Input,\n  SectionLabel,\n  StatusBadge,\n} from '@agimon-ai/po-web-components';\nimport { useState } from 'react';\n\nimport { sessionMcpToolsPrompt } from '../lib/sessionMcpPrompt';\nimport type { SessionMcpViewState } from '../lib/useSessionMcp';\n\nconst TONES = {\n  running: 'running',\n  succeeded: 'ok',\n  failed: 'error',\n  cancelled: 'neutral',\n  interrupted: 'neutral',\n} as const;\n\nfunction CallStatus({ status }: { status: SessionMcpCallStatus }) {\n  return (\n    <StatusBadge tone={TONES[status]} size=\"xs\">\n      {status}\n    </StatusBadge>\n  );\n}\n\nfunction McpError({ state }: { state: SessionMcpViewState }) {\n  return state.error === undefined ? null : (\n    <div\n      role=\"alert\"\n      className=\"flex items-center justify-between gap-3 border-b border-doom-border px-4 py-3 text-sm text-doom-red\"\n    >\n      <span>{state.error} Displayed data may be out of date.</span>\n      <Button variant=\"outline\" size=\"xs\" onClick={state.refresh}>\n        retry\n      </Button>\n    </div>\n  );\n}\n\n/** Remote calls are not chat messages and never enter the agent's transcript. */\nexport function SessionMcp({ state }: { state: SessionMcpViewState }) {\n  const calls = state.snapshot?.calls ?? [];\n  return (\n    <section\n      data-testid=\"session-mcp-history\"\n      aria-label=\"MCP call history\"\n      className=\"flex h-full min-h-0 flex-col bg-doom-bg text-doom-text\"\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-3 border-b border-doom-border px-5 py-4\">\n        <div>\n          <h2 className=\"text-lg font-semibold text-doom-hi\">Remote MCP activity</h2>\n          <p className=\"mt-1 text-sm text-doom-dim\">\n            {state.snapshot?.total ?? 0} calls recorded · {state.before === undefined ? 'latest calls' : 'older calls'}\n          </p>\n        </div>\n        {state.before === undefined ? (\n          <StatusBadge tone={state.error ? 'error' : 'info'} size=\"sm\">\n            {state.error ? 'offline' : 'live'}\n          </StatusBadge>\n        ) : (\n          <Button variant=\"outline\" size=\"sm\" onClick={state.showLatest}>\n            latest calls\n          </Button>\n        )}\n      </div>\n      <McpError state={state} />\n      <div className=\"min-h-0 flex-1 overflow-y-auto px-5\" aria-busy={state.loading}>\n        {state.loading ? (\n          <EmptyState\n            title=\"loading MCP calls\"\n            description=\"Reading this session's remote tool history.\"\n            className=\"py-8\"\n          />\n        ) : calls.length === 0 ? (\n          <EmptyState\n            title=\"no MCP calls recorded yet\"\n            description=\"Remote tool calls will appear here as they start. Calls made before history capture was added are not available.\"\n            className=\"py-8\"\n          />\n        ) : (\n          <Accordion type=\"multiple\">\n            {calls.map((call) => (\n              <AccordionItem key={call.id} value={call.id}>\n                <AccordionTrigger className=\"py-3\" data-testid={`mcp-call-${call.id}`}>\n                  <span className=\"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1\">\n                    <CallStatus status={call.status} />\n                    <span className=\"min-w-0 break-all text-base font-semibold text-doom-hi\">{call.toolName}</span>\n                    <span className=\"ml-auto flex shrink-0 items-center gap-3 text-sm text-doom-dim\">\n                      <span>\n                        {call.finishedAt === undefined\n                          ? 'in progress'\n                          : `${Math.max(0, call.finishedAt - call.startedAt).toLocaleString()} ms`}\n                      </span>\n                      <time\n                        dateTime={new Date(call.startedAt).toISOString()}\n                        title={new Date(call.startedAt).toLocaleString()}\n                      >\n                        {new Date(call.startedAt).toLocaleTimeString()}\n                      </time>\n                    </span>\n                  </span>\n                </AccordionTrigger>\n                <AccordionContent className=\"space-y-3 pb-4\">\n                  <p className=\"text-sm text-doom-dim\">\n                    {call.clientName} · {new Date(call.startedAt).toLocaleString()}\n                  </p>\n                  <SectionLabel>arguments</SectionLabel>\n                  <div className=\"max-h-64 overflow-auto\">\n                    <CodeBlock text={call.input} className=\"language-json\" />\n                  </div>\n                  <SectionLabel>result</SectionLabel>\n                  {call.output === undefined ? (\n                    <p className=\"text-sm text-doom-dim\">\n                      {call.status === 'interrupted'\n                        ? 'The host stopped before a result was recorded.'\n                        : 'Waiting for the tool result.'}\n                    </p>\n                  ) : (\n                    <div className=\"max-h-80 overflow-auto\">\n                      <CodeBlock text={call.output} className=\"language-json\" />\n                    </div>\n                  )}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        )}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-between gap-3 border-t border-doom-border px-5 py-3\">\n        <p className=\"text-sm text-doom-dim\">\n          Text previews are limited to 16 KB. Common credential fields are redacted.\n        </p>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={state.loading || state.snapshot?.nextBefore === undefined}\n          onClick={state.loadOlder}\n        >\n          older calls\n        </Button>\n      </div>\n    </section>\n  );\n}\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\n/** Inventory comes from the same grant-filtered surface that the remote caller can use. */\nexport function SessionMcpTools({ state }: { state: SessionMcpViewState }) {\n  const [query, setQuery] = useState('');\n  const [copyState, setCopyState] = useState<CopyState>('idle');\n  const tools = state.snapshot?.tools ?? [];\n  const toolPrefix = state.snapshot?.toolPrefix;\n\n  async function copyPrompt(): Promise<void> {\n    if (navigator.clipboard === undefined) {\n      setCopyState('failed');\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(sessionMcpToolsPrompt(tools, toolPrefix));\n      setCopyState('copied');\n    } catch {\n      setCopyState('failed');\n    }\n  }\n\n  const filtered = tools.filter((tool) =>\n    `${tool.name} ${tool.description}`.toLowerCase().includes(query.trim().toLowerCase()),\n  );\n  return (\n    <section\n      data-testid=\"session-mcp-tools\"\n      aria-label=\"Available MCP tools\"\n      className=\"flex min-h-0 flex-1 flex-col text-doom-text\"\n    >\n      <div className=\"space-y-3 border-b border-doom-border-soft px-4 py-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <SectionLabel>available tools</SectionLabel>\n          <div className=\"flex items-center gap-2\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-testid=\"session-mcp-copy-prompt\"\n              disabled={!state.snapshot?.available || tools.length === 0}\n              onClick={() => void copyPrompt()}\n            >\n              {copyState === 'copied' ? 'copied' : 'copy as prompt'}\n            </Button>\n            <StatusBadge tone=\"info\" size=\"xs\">\n              {tools.length}\n            </StatusBadge>\n          </div>\n        </div>\n        <div className=\"text-sm text-doom-dim\">\n          <p>Tools granted to this session's remote connections.</p>\n          {toolPrefix ? (\n            <p className=\"mt-1\" data-testid=\"session-mcp-remote-prefix\">\n              remote names start with <code className=\"text-doom-text\">{toolPrefix}_</code>\n            </p>\n          ) : null}\n          <output aria-live=\"polite\">\n            {copyState === 'failed' ? 'copying the prompt was blocked. allow clipboard access and try again.' : ''}\n            {copyState === 'copied' ? 'prompt copied.' : ''}\n          </output>\n        </div>\n        <Input\n          aria-label=\"Search MCP tools\"\n          placeholder=\"search tools...\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n        />\n      </div>\n      <McpError state={state} />\n      <div className=\"min-h-0 flex-1 overflow-y-auto px-4\" aria-busy={state.loading}>\n        {state.snapshot === undefined && state.loading ? (\n          <EmptyState title=\"loading tools\" className=\"py-5\" />\n        ) : !state.snapshot?.available ? (\n          <EmptyState\n            title=\"no active MCP connection\"\n            description=\"History is retained. Available tools return when the session and its remote connection are active.\"\n            className=\"py-5\"\n          />\n        ) : filtered.length === 0 ? (\n          <EmptyState\n            title={query ? 'no matching tools' : 'no tools granted'}\n            description={query ? 'Try a different tool name.' : 'This connection does not currently grant any tools.'}\n            className=\"py-5\"\n          />\n        ) : (\n          <Accordion type=\"multiple\">\n            {filtered.map((tool) => (\n              <AccordionItem key={tool.name} value={tool.name}>\n                <AccordionTrigger className=\"py-3\">\n                  <span className=\"min-w-0 break-all text-base font-semibold text-doom-hi\">{tool.name}</span>\n                </AccordionTrigger>\n                <AccordionContent className=\"space-y-3 pb-3\">\n                  <p className=\"whitespace-pre-wrap break-words text-base leading-relaxed\">{tool.description}</p>\n                  <p className=\"text-sm text-doom-dim\">{tool.connections.join(', ')}</p>\n                  <SectionLabel>input schema</SectionLabel>\n                  <div className=\"max-h-64 overflow-auto\">\n                    <CodeBlock text={JSON.stringify(tool.inputSchema, null, 2)} className=\"language-json\" />\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/web/components/SessionMcp.d.mts

@@ -0,0 +1,12 @@
+import { SessionMcpViewState } from "../lib/useSessionMcp.mjs";
+//#region src/web/components/SessionMcp.d.ts
+/** Remote calls are not chat messages and never enter the agent's transcript. */
+export declare function SessionMcp({ state }: {
+  state: SessionMcpViewState;
+}): import("react").JSX.Element;
+/** Inventory comes from the same grant-filtered surface that the remote caller can use. */
+export declare function SessionMcpTools({ state }: {
+  state: SessionMcpViewState;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SessionMcp.d.mts.map

package/dist/web/components/SessionMcp.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionMcp.d.mts","names":[],"sources":["../../../src/web/components/SessionMcp.tsx"],"mappings":";;;wBAiDgB,aAAa;EAAW,OAAO;oBAAqB,IAAA;;wBA4GpD,kBAAkB;EAAW,OAAO;oBAAqB,IAAA"}