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

package/dist/web/components/SessionMcp.mjs

@@ -0,0 +1,278 @@
+import { sessionMcpToolsPrompt } from "../lib/sessionMcpPrompt.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, CodeBlock, EmptyState, Input, SectionLabel, StatusBadge } from "@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__ */ jsx(StatusBadge, {
+		tone: TONES[status],
+		size: "xs",
+		children: status
+	});
+}
+function McpError({ state }) {
+	return state.error === void 0 ? null : /* @__PURE__ */ 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__ */ jsxs("span", { children: [state.error, " Displayed data may be out of date."] }), /* @__PURE__ */ jsx(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__ */ 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__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-b border-doom-border px-5 py-4",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-doom-hi",
+					children: "Remote MCP activity"
+				}), /* @__PURE__ */ 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__ */ jsx(StatusBadge, {
+					tone: state.error ? "error" : "info",
+					size: "sm",
+					children: state.error ? "offline" : "live"
+				}) : /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: state.showLatest,
+					children: "latest calls"
+				})]
+			}),
+			/* @__PURE__ */ jsx(McpError, { state }),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto px-5",
+				"aria-busy": state.loading,
+				children: state.loading ? /* @__PURE__ */ jsx(EmptyState, {
+					title: "loading MCP calls",
+					description: "Reading this session's remote tool history.",
+					className: "py-8"
+				}) : calls.length === 0 ? /* @__PURE__ */ jsx(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__ */ jsx(Accordion, {
+					type: "multiple",
+					children: calls.map((call) => /* @__PURE__ */ jsxs(AccordionItem, {
+						value: call.id,
+						children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+							className: "py-3",
+							"data-testid": `mcp-call-${call.id}`,
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1",
+								children: [
+									/* @__PURE__ */ jsx(CallStatus, { status: call.status }),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 break-all text-base font-semibold text-doom-hi",
+										children: call.toolName
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "ml-auto flex shrink-0 items-center gap-3 text-sm text-doom-dim",
+										children: [/* @__PURE__ */ jsx("span", { children: call.finishedAt === void 0 ? "in progress" : `${Math.max(0, call.finishedAt - call.startedAt).toLocaleString()} ms` }), /* @__PURE__ */ jsx("time", {
+											dateTime: new Date(call.startedAt).toISOString(),
+											title: new Date(call.startedAt).toLocaleString(),
+											children: new Date(call.startedAt).toLocaleTimeString()
+										})]
+									})
+								]
+							})
+						}), /* @__PURE__ */ jsxs(AccordionContent, {
+							className: "space-y-3 pb-4",
+							children: [
+								/* @__PURE__ */ jsxs("p", {
+									className: "text-sm text-doom-dim",
+									children: [
+										call.clientName,
+										" · ",
+										new Date(call.startedAt).toLocaleString()
+									]
+								}),
+								/* @__PURE__ */ jsx(SectionLabel, { children: "arguments" }),
+								/* @__PURE__ */ jsx("div", {
+									className: "max-h-64 overflow-auto",
+									children: /* @__PURE__ */ jsx(CodeBlock, {
+										text: call.input,
+										className: "language-json"
+									})
+								}),
+								/* @__PURE__ */ jsx(SectionLabel, { children: "result" }),
+								call.output === void 0 ? /* @__PURE__ */ 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__ */ jsx("div", {
+									className: "max-h-80 overflow-auto",
+									children: /* @__PURE__ */ jsx(CodeBlock, {
+										text: call.output,
+										className: "language-json"
+									})
+								})
+							]
+						})]
+					}, call.id))
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 border-t border-doom-border px-5 py-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-doom-dim",
+					children: "Text previews are limited to 16 KB. Common credential fields are redacted."
+				}), /* @__PURE__ */ jsx(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] = useState("");
+	const [copyState, setCopyState] = 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(sessionMcpToolsPrompt(tools, toolPrefix));
+			setCopyState("copied");
+		} catch {
+			setCopyState("failed");
+		}
+	}
+	const filtered = tools.filter((tool) => `${tool.name} ${tool.description}`.toLowerCase().includes(query.trim().toLowerCase()));
+	return /* @__PURE__ */ 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__ */ jsxs("div", {
+				className: "space-y-3 border-b border-doom-border-soft px-4 py-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(SectionLabel, { children: "available tools" }), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(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__ */ jsx(StatusBadge, {
+								tone: "info",
+								size: "xs",
+								children: tools.length
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-sm text-doom-dim",
+						children: [
+							/* @__PURE__ */ jsx("p", { children: "Tools granted to this session's remote connections." }),
+							toolPrefix ? /* @__PURE__ */ jsxs("p", {
+								className: "mt-1",
+								"data-testid": "session-mcp-remote-prefix",
+								children: ["remote names start with ", /* @__PURE__ */ jsxs("code", {
+									className: "text-doom-text",
+									children: [toolPrefix, "_"]
+								})]
+							}) : null,
+							/* @__PURE__ */ jsxs("output", {
+								"aria-live": "polite",
+								children: [copyState === "failed" ? "copying the prompt was blocked. allow clipboard access and try again." : "", copyState === "copied" ? "prompt copied." : ""]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						"aria-label": "Search MCP tools",
+						placeholder: "search tools...",
+						value: query,
+						onChange: (event) => setQuery(event.target.value)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(McpError, { state }),
+			/* @__PURE__ */ 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__ */ jsx(EmptyState, {
+					title: "loading tools",
+					className: "py-5"
+				}) : !state.snapshot?.available ? /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Accordion, {
+					type: "multiple",
+					children: filtered.map((tool) => /* @__PURE__ */ jsxs(AccordionItem, {
+						value: tool.name,
+						children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+							className: "py-3",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 break-all text-base font-semibold text-doom-hi",
+								children: tool.name
+							})
+						}), /* @__PURE__ */ jsxs(AccordionContent, {
+							className: "space-y-3 pb-3",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "whitespace-pre-wrap break-words text-base leading-relaxed",
+									children: tool.description
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-sm text-doom-dim",
+									children: tool.connections.join(", ")
+								}),
+								/* @__PURE__ */ jsx(SectionLabel, { children: "input schema" }),
+								/* @__PURE__ */ jsx("div", {
+									className: "max-h-64 overflow-auto",
+									children: /* @__PURE__ */ jsx(CodeBlock, {
+										text: JSON.stringify(tool.inputSchema, null, 2),
+										className: "language-json"
+									})
+								})
+							]
+						})]
+					}, tool.name))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { SessionMcp, SessionMcpTools };
+
+//# sourceMappingURL=SessionMcp.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionMcp.mjs","names":[],"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/Story.fixture.cjs

@@ -0,0 +1,124 @@
+const require_sealedSession = require("../lib/sealedSession.cjs");
+const require_transport = require("../lib/transport.cjs");
+const require_sessionModel = require("../lib/sessionModel.cjs");
+const require_sessionsStore = require("../stores/sessionsStore.cjs");
+const require_sessionStore = require("../stores/sessionStore.cjs");
+const require_workspacesStore = require("../stores/workspacesStore.cjs");
+let react = require("react");
+let _tanstack_react_router = require("@tanstack/react-router");
+let _agimon_ai_po_web_components_theme = require("@agimon-ai/po-web-components/theme");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/components/Story.fixture.tsx
+/** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */
+function mockStoryRequests(responses = {}) {
+	const request = async (input, init) => {
+		const url = new URL(input, "https://story.invalid");
+		const method = init?.method?.toUpperCase() ?? "GET";
+		const key = `${method} ${url.pathname}${url.search}`;
+		const fallback = `${method} ${url.pathname}`;
+		const body = responses[key] ?? responses[fallback];
+		if (body instanceof Response) return body.clone();
+		return body === void 0 ? Response.json({ error: `No story response for ${key}.` }, { status: 503 }) : Response.json(body);
+	};
+	require_sealedSession.sealedHttpSession.fetch = request;
+	globalThis.fetch = (input, init) => request(input instanceof Request ? input.url : String(input), {
+		...input instanceof Request ? { method: input.method } : {},
+		...init
+	});
+	require_transport.bindTransport(() => void 0, async () => {
+		throw new Error("Server methods are unavailable in isolated stories.");
+	});
+}
+mockStoryRequests();
+const STORY_SESSION_ID = "story-session";
+const STORY_WORKSPACE_ID = "story-workspace";
+function seedStorySession(patch = {}, metaPatch = {}) {
+	const timestamp = "2026-09-01T10:00:00.000Z";
+	const meta = {
+		summary: {
+			id: STORY_SESSION_ID,
+			workspaceId: STORY_WORKSPACE_ID,
+			name: "Review component stories",
+			cwd: "/workspace/po",
+			createdAt: timestamp,
+			updatedAt: timestamp,
+			phase: "idle",
+			phaseSince: timestamp,
+			attach: "attached",
+			pendingMessageCount: 0,
+			everPrompted: true,
+			awaitingInput: false
+		},
+		attach: "attached",
+		reason: "",
+		replayed: 0,
+		dropped: 0,
+		...metaPatch
+	};
+	require_sessionsStore.sessionsStore.setState(() => ({
+		order: [STORY_SESSION_ID],
+		byId: { [STORY_SESSION_ID]: meta },
+		activeId: STORY_SESSION_ID,
+		transferringToId: null,
+		hydrated: true
+	}));
+	require_workspacesStore.workspacesStore.setState(() => ({
+		order: [STORY_WORKSPACE_ID],
+		byId: { [STORY_WORKSPACE_ID]: {
+			id: STORY_WORKSPACE_ID,
+			root: "/workspace/po",
+			available: true
+		} },
+		selectedId: STORY_WORKSPACE_ID,
+		hydrated: true
+	}));
+	require_sessionStore.sessionStoreFor(STORY_SESSION_ID).setState(() => ({
+		...require_sessionModel.initialSessionState,
+		...patch
+	}));
+}
+/** Inline variables for the shipped light or dark theme, so one story can show either scheme. */
+function storyTheme(scheme) {
+	const theme = (0, _agimon_ai_po_web_components_theme.builtinTheme)(`doom-one-${scheme}`);
+	return theme ? {
+		...(0, _agimon_ai_po_web_components_theme.themeCssVariables)(theme),
+		colorScheme: scheme
+	} : {};
+}
+/** A memory router supplies navigation context without starting the application runtime. */
+function StoryFrame({ children, path = "/", className = "mx-auto min-h-screen max-w-3xl bg-doom-bg p-6" }) {
+	const [router] = (0, react.useState)(() => {
+		const root = (0, _tanstack_react_router.createRootRoute)({ component: _tanstack_react_router.Outlet });
+		const component = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			children
+		}) });
+		const routes = [
+			"/",
+			"/session/$sessionId",
+			"/session/$sessionId/$tabId",
+			"/settings",
+			"/settings/$section"
+		].map((routePath) => (0, _tanstack_react_router.createRoute)({
+			getParentRoute: () => root,
+			path: routePath,
+			component,
+			validateSearch: (search) => search
+		}));
+		return (0, _tanstack_react_router.createRouter)({
+			routeTree: root.addChildren(routes),
+			history: (0, _tanstack_react_router.createMemoryHistory)({ initialEntries: [path] })
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_router.RouterProvider, { router });
+}
+//#endregion
+exports.STORY_SESSION_ID = STORY_SESSION_ID;
+exports.STORY_WORKSPACE_ID = STORY_WORKSPACE_ID;
+exports.StoryFrame = StoryFrame;
+exports.mockStoryRequests = mockStoryRequests;
+exports.seedStorySession = seedStorySession;
+exports.storyTheme = storyTheme;
+
+//# sourceMappingURL=Story.fixture.cjs.map

package/dist/web/components/Story.fixture.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Story.fixture.cjs","names":["initialSessionState","builtinTheme","themeCssVariables","useState","createRootRoute","Outlet","TooltipProvider","createRoute","createRouter","createMemoryHistory","RouterProvider"],"sources":["../../../src/web/components/Story.fixture.tsx"],"sourcesContent":["import { TooltipProvider } from '@agimon-ai/po-web-components';\nimport { builtinTheme, themeCssVariables } from '@agimon-ai/po-web-components/theme';\nimport {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  Outlet,\n  RouterProvider,\n} from '@tanstack/react-router';\nimport { type CSSProperties, type ReactNode, useState } from 'react';\n\nimport { sealedHttpSession } from '../lib/sealedSession.ts';\nimport { initialSessionState, type SessionState } from '../lib/sessionModel.ts';\nimport { bindTransport } from '../lib/transport.ts';\nimport { sessionsStore, type SessionMeta } from '../stores/sessionsStore.ts';\nimport { sessionStoreFor } from '../stores/sessionStore.ts';\nimport { workspacesStore } from '../stores/workspacesStore.ts';\n\n/** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */\nexport function mockStoryRequests(responses: Readonly<Record<string, unknown>> = {}): void {\n  const request = async (input: string, init?: RequestInit): Promise<Response> => {\n    const url = new URL(input, 'https://story.invalid');\n    const method = init?.method?.toUpperCase() ?? 'GET';\n    const key = `${method} ${url.pathname}${url.search}`;\n    const fallback = `${method} ${url.pathname}`;\n    const body = responses[key] ?? responses[fallback];\n    if (body instanceof Response) return body.clone();\n    return body === undefined\n      ? Response.json({ error: `No story response for ${key}.` }, { status: 503 })\n      : Response.json(body);\n  };\n  sealedHttpSession.fetch = request;\n  globalThis.fetch = (input, init) =>\n    request(input instanceof Request ? input.url : String(input), {\n      ...(input instanceof Request ? { method: input.method } : {}),\n      ...init,\n    });\n  bindTransport(\n    () => undefined,\n    async () => {\n      throw new Error('Server methods are unavailable in isolated stories.');\n    },\n  );\n}\n\nmockStoryRequests();\n\nexport const STORY_SESSION_ID = 'story-session';\nexport const STORY_WORKSPACE_ID = 'story-workspace';\n\nexport function seedStorySession(patch: Partial<SessionState> = {}, metaPatch: Partial<SessionMeta> = {}): void {\n  const timestamp = '2026-09-01T10:00:00.000Z';\n  const meta: SessionMeta = {\n    summary: {\n      id: STORY_SESSION_ID,\n      workspaceId: STORY_WORKSPACE_ID,\n      name: 'Review component stories',\n      cwd: '/workspace/po',\n      createdAt: timestamp,\n      updatedAt: timestamp,\n      phase: 'idle',\n      phaseSince: timestamp,\n      attach: 'attached',\n      pendingMessageCount: 0,\n      everPrompted: true,\n      awaitingInput: false,\n    },\n    attach: 'attached',\n    reason: '',\n    replayed: 0,\n    dropped: 0,\n    ...metaPatch,\n  };\n  sessionsStore.setState(() => ({\n    order: [STORY_SESSION_ID],\n    byId: { [STORY_SESSION_ID]: meta },\n    activeId: STORY_SESSION_ID,\n    transferringToId: null,\n    hydrated: true,\n  }));\n  workspacesStore.setState(() => ({\n    order: [STORY_WORKSPACE_ID],\n    byId: { [STORY_WORKSPACE_ID]: { id: STORY_WORKSPACE_ID, root: '/workspace/po', available: true } },\n    selectedId: STORY_WORKSPACE_ID,\n    hydrated: true,\n  }));\n  sessionStoreFor(STORY_SESSION_ID).setState(() => ({ ...initialSessionState, ...patch }));\n}\n\n/** Inline variables for the shipped light or dark theme, so one story can show either scheme. */\nexport function storyTheme(scheme: 'light' | 'dark'): CSSProperties {\n  const theme = builtinTheme(`doom-one-${scheme}`);\n  return (theme ? { ...themeCssVariables(theme), colorScheme: scheme } : {}) as CSSProperties;\n}\n\n/** A memory router supplies navigation context without starting the application runtime. */\nexport function StoryFrame({\n  children,\n  path = '/',\n  className = 'mx-auto min-h-screen max-w-3xl bg-doom-bg p-6',\n}: {\n  children: ReactNode;\n  path?: string;\n  className?: string;\n}) {\n  const [router] = useState(() => {\n    const root = createRootRoute({ component: Outlet });\n    const component = () => (\n      <TooltipProvider>\n        <div className={className}>{children}</div>\n      </TooltipProvider>\n    );\n    const routes = ['/', '/session/$sessionId', '/session/$sessionId/$tabId', '/settings', '/settings/$section'].map(\n      (routePath) =>\n        createRoute({ getParentRoute: () => root, path: routePath, component, validateSearch: (search) => search }),\n    );\n    return createRouter({\n      routeTree: root.addChildren(routes),\n      history: createMemoryHistory({ initialEntries: [path] }),\n    });\n  });\n  return <RouterProvider router={router} />;\n}\n"],"mappings":"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"}

package/dist/web/components/Story.fixture.d.mts

@@ -0,0 +1,19 @@
+import { SessionState } from "../lib/sessionModel.mjs";
+import { SessionMeta } from "../stores/sessionsStore.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/web/components/Story.fixture.d.ts
+/** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */
+export declare function mockStoryRequests(responses?: Readonly<Record<string, unknown>>): void;
+export declare const STORY_SESSION_ID = "story-session";
+export declare const STORY_WORKSPACE_ID = "story-workspace";
+export declare function seedStorySession(patch?: Partial<SessionState>, metaPatch?: Partial<SessionMeta>): void;
+/** Inline variables for the shipped light or dark theme, so one story can show either scheme. */
+export declare function storyTheme(scheme: 'light' | 'dark'): CSSProperties;
+/** A memory router supplies navigation context without starting the application runtime. */
+export declare function StoryFrame({ children, path, className }: {
+  children: ReactNode;
+  path?: string;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Story.fixture.d.mts.map

package/dist/web/components/Story.fixture.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Story.fixture.d.mts","names":[],"sources":["../../../src/web/components/Story.fixture.tsx"],"mappings":";;;;;wBAoBgB,kBAAkB,YAAW,SAAS;qBA4BzC;qBACA;wBAEG,iBAAiB,QAAO,QAAQ,eAAoB,YAAW,QAAQ;;wBAwCvE,WAAW,2BAA2B;;wBAMtC,aACd,UACA,MACA;EAEA,UAAU;EACV;EACA;oBACD,IAAA"}

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

@@ -0,0 +1,119 @@
+import { sealedHttpSession } from "../lib/sealedSession.mjs";
+import { bindTransport } from "../lib/transport.mjs";
+import { initialSessionState } from "../lib/sessionModel.mjs";
+import { sessionsStore } from "../stores/sessionsStore.mjs";
+import { sessionStoreFor } from "../stores/sessionStore.mjs";
+import { workspacesStore } from "../stores/workspacesStore.mjs";
+import { useState } from "react";
+import { Outlet, RouterProvider, createMemoryHistory, createRootRoute, createRoute, createRouter } from "@tanstack/react-router";
+import { builtinTheme, themeCssVariables } from "@agimon-ai/po-web-components/theme";
+import { jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "@agimon-ai/po-web-components";
+//#region src/web/components/Story.fixture.tsx
+/** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */
+function mockStoryRequests(responses = {}) {
+	const request = async (input, init) => {
+		const url = new URL(input, "https://story.invalid");
+		const method = init?.method?.toUpperCase() ?? "GET";
+		const key = `${method} ${url.pathname}${url.search}`;
+		const fallback = `${method} ${url.pathname}`;
+		const body = responses[key] ?? responses[fallback];
+		if (body instanceof Response) return body.clone();
+		return body === void 0 ? Response.json({ error: `No story response for ${key}.` }, { status: 503 }) : Response.json(body);
+	};
+	sealedHttpSession.fetch = request;
+	globalThis.fetch = (input, init) => request(input instanceof Request ? input.url : String(input), {
+		...input instanceof Request ? { method: input.method } : {},
+		...init
+	});
+	bindTransport(() => void 0, async () => {
+		throw new Error("Server methods are unavailable in isolated stories.");
+	});
+}
+mockStoryRequests();
+const STORY_SESSION_ID = "story-session";
+const STORY_WORKSPACE_ID = "story-workspace";
+function seedStorySession(patch = {}, metaPatch = {}) {
+	const timestamp = "2026-09-01T10:00:00.000Z";
+	const meta = {
+		summary: {
+			id: STORY_SESSION_ID,
+			workspaceId: STORY_WORKSPACE_ID,
+			name: "Review component stories",
+			cwd: "/workspace/po",
+			createdAt: timestamp,
+			updatedAt: timestamp,
+			phase: "idle",
+			phaseSince: timestamp,
+			attach: "attached",
+			pendingMessageCount: 0,
+			everPrompted: true,
+			awaitingInput: false
+		},
+		attach: "attached",
+		reason: "",
+		replayed: 0,
+		dropped: 0,
+		...metaPatch
+	};
+	sessionsStore.setState(() => ({
+		order: [STORY_SESSION_ID],
+		byId: { [STORY_SESSION_ID]: meta },
+		activeId: STORY_SESSION_ID,
+		transferringToId: null,
+		hydrated: true
+	}));
+	workspacesStore.setState(() => ({
+		order: [STORY_WORKSPACE_ID],
+		byId: { [STORY_WORKSPACE_ID]: {
+			id: STORY_WORKSPACE_ID,
+			root: "/workspace/po",
+			available: true
+		} },
+		selectedId: STORY_WORKSPACE_ID,
+		hydrated: true
+	}));
+	sessionStoreFor(STORY_SESSION_ID).setState(() => ({
+		...initialSessionState,
+		...patch
+	}));
+}
+/** Inline variables for the shipped light or dark theme, so one story can show either scheme. */
+function storyTheme(scheme) {
+	const theme = builtinTheme(`doom-one-${scheme}`);
+	return theme ? {
+		...themeCssVariables(theme),
+		colorScheme: scheme
+	} : {};
+}
+/** A memory router supplies navigation context without starting the application runtime. */
+function StoryFrame({ children, path = "/", className = "mx-auto min-h-screen max-w-3xl bg-doom-bg p-6" }) {
+	const [router] = useState(() => {
+		const root = createRootRoute({ component: Outlet });
+		const component = () => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		}) });
+		const routes = [
+			"/",
+			"/session/$sessionId",
+			"/session/$sessionId/$tabId",
+			"/settings",
+			"/settings/$section"
+		].map((routePath) => createRoute({
+			getParentRoute: () => root,
+			path: routePath,
+			component,
+			validateSearch: (search) => search
+		}));
+		return createRouter({
+			routeTree: root.addChildren(routes),
+			history: createMemoryHistory({ initialEntries: [path] })
+		});
+	});
+	return /* @__PURE__ */ jsx(RouterProvider, { router });
+}
+//#endregion
+export { STORY_SESSION_ID, STORY_WORKSPACE_ID, StoryFrame, mockStoryRequests, seedStorySession, storyTheme };
+
+//# sourceMappingURL=Story.fixture.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Story.fixture.mjs","names":[],"sources":["../../../src/web/components/Story.fixture.tsx"],"sourcesContent":["import { TooltipProvider } from '@agimon-ai/po-web-components';\nimport { builtinTheme, themeCssVariables } from '@agimon-ai/po-web-components/theme';\nimport {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  Outlet,\n  RouterProvider,\n} from '@tanstack/react-router';\nimport { type CSSProperties, type ReactNode, useState } from 'react';\n\nimport { sealedHttpSession } from '../lib/sealedSession.ts';\nimport { initialSessionState, type SessionState } from '../lib/sessionModel.ts';\nimport { bindTransport } from '../lib/transport.ts';\nimport { sessionsStore, type SessionMeta } from '../stores/sessionsStore.ts';\nimport { sessionStoreFor } from '../stores/sessionStore.ts';\nimport { workspacesStore } from '../stores/workspacesStore.ts';\n\n/** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */\nexport function mockStoryRequests(responses: Readonly<Record<string, unknown>> = {}): void {\n  const request = async (input: string, init?: RequestInit): Promise<Response> => {\n    const url = new URL(input, 'https://story.invalid');\n    const method = init?.method?.toUpperCase() ?? 'GET';\n    const key = `${method} ${url.pathname}${url.search}`;\n    const fallback = `${method} ${url.pathname}`;\n    const body = responses[key] ?? responses[fallback];\n    if (body instanceof Response) return body.clone();\n    return body === undefined\n      ? Response.json({ error: `No story response for ${key}.` }, { status: 503 })\n      : Response.json(body);\n  };\n  sealedHttpSession.fetch = request;\n  globalThis.fetch = (input, init) =>\n    request(input instanceof Request ? input.url : String(input), {\n      ...(input instanceof Request ? { method: input.method } : {}),\n      ...init,\n    });\n  bindTransport(\n    () => undefined,\n    async () => {\n      throw new Error('Server methods are unavailable in isolated stories.');\n    },\n  );\n}\n\nmockStoryRequests();\n\nexport const STORY_SESSION_ID = 'story-session';\nexport const STORY_WORKSPACE_ID = 'story-workspace';\n\nexport function seedStorySession(patch: Partial<SessionState> = {}, metaPatch: Partial<SessionMeta> = {}): void {\n  const timestamp = '2026-09-01T10:00:00.000Z';\n  const meta: SessionMeta = {\n    summary: {\n      id: STORY_SESSION_ID,\n      workspaceId: STORY_WORKSPACE_ID,\n      name: 'Review component stories',\n      cwd: '/workspace/po',\n      createdAt: timestamp,\n      updatedAt: timestamp,\n      phase: 'idle',\n      phaseSince: timestamp,\n      attach: 'attached',\n      pendingMessageCount: 0,\n      everPrompted: true,\n      awaitingInput: false,\n    },\n    attach: 'attached',\n    reason: '',\n    replayed: 0,\n    dropped: 0,\n    ...metaPatch,\n  };\n  sessionsStore.setState(() => ({\n    order: [STORY_SESSION_ID],\n    byId: { [STORY_SESSION_ID]: meta },\n    activeId: STORY_SESSION_ID,\n    transferringToId: null,\n    hydrated: true,\n  }));\n  workspacesStore.setState(() => ({\n    order: [STORY_WORKSPACE_ID],\n    byId: { [STORY_WORKSPACE_ID]: { id: STORY_WORKSPACE_ID, root: '/workspace/po', available: true } },\n    selectedId: STORY_WORKSPACE_ID,\n    hydrated: true,\n  }));\n  sessionStoreFor(STORY_SESSION_ID).setState(() => ({ ...initialSessionState, ...patch }));\n}\n\n/** Inline variables for the shipped light or dark theme, so one story can show either scheme. */\nexport function storyTheme(scheme: 'light' | 'dark'): CSSProperties {\n  const theme = builtinTheme(`doom-one-${scheme}`);\n  return (theme ? { ...themeCssVariables(theme), colorScheme: scheme } : {}) as CSSProperties;\n}\n\n/** A memory router supplies navigation context without starting the application runtime. */\nexport function StoryFrame({\n  children,\n  path = '/',\n  className = 'mx-auto min-h-screen max-w-3xl bg-doom-bg p-6',\n}: {\n  children: ReactNode;\n  path?: string;\n  className?: string;\n}) {\n  const [router] = useState(() => {\n    const root = createRootRoute({ component: Outlet });\n    const component = () => (\n      <TooltipProvider>\n        <div className={className}>{children}</div>\n      </TooltipProvider>\n    );\n    const routes = ['/', '/session/$sessionId', '/session/$sessionId/$tabId', '/settings', '/settings/$section'].map(\n      (routePath) =>\n        createRoute({ getParentRoute: () => root, path: routePath, component, validateSearch: (search) => search }),\n    );\n    return createRouter({\n      routeTree: root.addChildren(routes),\n      history: createMemoryHistory({ initialEntries: [path] }),\n    });\n  });\n  return <RouterProvider router={router} />;\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,SAAgB,kBAAkB,YAA+C,CAAC,GAAS;CACzF,MAAM,UAAU,OAAO,OAAe,SAA0C;EAC9E,MAAM,MAAM,IAAI,IAAI,OAAO,uBAAuB;EAClD,MAAM,SAAS,MAAM,QAAQ,YAAY,KAAK;EAC9C,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,WAAW,IAAI;EAC5C,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI;EAClC,MAAM,OAAO,UAAU,QAAQ,UAAU;EACzC,IAAI,gBAAgB,UAAU,OAAO,KAAK,MAAM;EAChD,OAAO,SAAS,KAAA,IACZ,SAAS,KAAK,EAAE,OAAO,yBAAyB,IAAI,GAAG,GAAG,EAAE,QAAQ,IAAI,CAAC,IACzE,SAAS,KAAK,IAAI;CACxB;CACA,kBAAkB,QAAQ;CAC1B,WAAW,SAAS,OAAO,SACzB,QAAQ,iBAAiB,UAAU,MAAM,MAAM,OAAO,KAAK,GAAG;EAC5D,GAAI,iBAAiB,UAAU,EAAE,QAAQ,MAAM,OAAO,IAAI,CAAC;EAC3D,GAAG;CACL,CAAC;CACH,oBACQ,KAAA,GACN,YAAY;EACV,MAAM,IAAI,MAAM,qDAAqD;CACvE,CACF;AACF;AAEA,kBAAkB;AAElB,MAAa,mBAAmB;AAChC,MAAa,qBAAqB;AAElC,SAAgB,iBAAiB,QAA+B,CAAC,GAAG,YAAkC,CAAC,GAAS;CAC9G,MAAM,YAAY;CAClB,MAAM,OAAoB;EACxB,SAAS;GACP,IAAI;GACJ,aAAa;GACb,MAAM;GACN,KAAK;GACL,WAAW;GACX,WAAW;GACX,OAAO;GACP,YAAY;GACZ,QAAQ;GACR,qBAAqB;GACrB,cAAc;GACd,eAAe;EACjB;EACA,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,GAAG;CACL;CACA,cAAc,gBAAgB;EAC5B,OAAO,CAAC,gBAAgB;EACxB,MAAM,GAAG,mBAAmB,KAAK;EACjC,UAAU;EACV,kBAAkB;EAClB,UAAU;CACZ,EAAE;CACF,gBAAgB,gBAAgB;EAC9B,OAAO,CAAC,kBAAkB;EAC1B,MAAM,GAAG,qBAAqB;GAAE,IAAI;GAAoB,MAAM;GAAiB,WAAW;EAAK,EAAE;EACjG,YAAY;EACZ,UAAU;CACZ,EAAE;CACF,gBAAgB,gBAAgB,CAAC,CAAC,gBAAgB;EAAE,GAAG;EAAqB,GAAG;CAAM,EAAE;AACzF;;AAGA,SAAgB,WAAW,QAAyC;CAClE,MAAM,QAAQ,aAAa,YAAY,QAAQ;CAC/C,OAAQ,QAAQ;EAAE,GAAG,kBAAkB,KAAK;EAAG,aAAa;CAAO,IAAI,CAAC;AAC1E;;AAGA,SAAgB,WAAW,EACzB,UACA,OAAO,KACP,YAAY,mDAKX;CACD,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,OAAO,gBAAgB,EAAE,WAAW,OAAO,CAAC;EAClD,MAAM,kBACJ,oBAAC,iBAAD,EAAA,UACE,oBAAC,OAAD;GAAgB;GAAY;EAAc,CAAA,EAC3B,CAAA;EAEnB,MAAM,SAAS;GAAC;GAAK;GAAuB;GAA8B;GAAa;EAAoB,CAAC,CAAC,KAC1G,cACC,YAAY;GAAE,sBAAsB;GAAM,MAAM;GAAW;GAAW,iBAAiB,WAAW;EAAO,CAAC,CAC9G;EACA,OAAO,aAAa;GAClB,WAAW,KAAK,YAAY,MAAM;GAClC,SAAS,oBAAoB,EAAE,gBAAgB,CAAC,IAAI,EAAE,CAAC;EACzD,CAAC;CACH,CAAC;CACD,OAAO,oBAAC,gBAAD,EAAwB,OAAS,CAAA;AAC1C"}