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

package/dist/web/features/activity/ContextItemDialog.mjs

@@ -0,0 +1,276 @@
+import { fetchContextItemDetail } from "../../lib/contextDetailApi.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle, Panel, Spinner } from "@agimon-ai/po-web-components";
+//#region src/web/features/activity/ContextItemDialog.tsx
+/**
+* What one row of the composition actually is.
+*
+* The panel answers "what does this cost"; a reader who clicks a row is asking
+* the follow-up, "and what am I paying for". That is the description the model
+* reads, the schema it is handed, and for a tool the split between the two,
+* because the two are cut differently: prose comes out with the package, a
+* schema only with the tool.
+*
+* Fetched on open rather than carried by the projection. The full text of every
+* tool in a composition is an order of magnitude larger than the figures, and
+* is wanted one row at a time.
+*/
+function tokens(value) {
+	return `~${value.toLocaleString()}`;
+}
+function ContextItemDialog({ sessionId, target, warnings, onClose }) {
+	const [detail, setDetail] = useState(null);
+	const [error, setError] = useState(null);
+	const itemKind = target?.itemKind ?? null;
+	const name = target?.name ?? null;
+	const request = sessionId === null || itemKind === null || name === null ? null : `${sessionId}\u0000${itemKind}\u0000${name}`;
+	const [shown, setShown] = useState(null);
+	if (shown !== request) {
+		setShown(request);
+		setDetail(null);
+		setError(null);
+	}
+	useEffect(() => {
+		if (sessionId === null || itemKind === null || name === null) return;
+		let live = true;
+		fetchContextItemDetail(sessionId, itemKind, name).then((result) => {
+			if (!live) return;
+			if (result.ok) setDetail(result.detail);
+			else setError(result.error);
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		sessionId,
+		itemKind,
+		name
+	]);
+	if (target === null) return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: (next) => {
+			if (!next) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			width: "lg",
+			"data-testid": "context-item-dialog",
+			"aria-describedby": void 0,
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, {
+				"data-testid": "context-item-title",
+				children: target.itemKind === "prompt" ? "system prompt" : target.name
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "text-sm text-doom-dim",
+				children: [
+					target.itemKind,
+					" · ",
+					target.owner
+				]
+			})] }), /* @__PURE__ */ jsxs(DialogBody, { children: [target.itemKind === "tool" && warnings && warnings.length > 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "warnings",
+				children: /* @__PURE__ */ jsx("ul", {
+					"data-testid": "context-item-warnings",
+					"aria-live": "polite",
+					className: "flex flex-col gap-3",
+					children: warnings.map((warning, index) => /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-col gap-1 text-sm break-words",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-doom-yellow",
+								children: warning.source
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm text-doom-dim",
+								children: warning.path
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-doom-text",
+								children: warning.message
+							})
+						]
+					}, index))
+				})
+			}) : null, error !== null ? /* @__PURE__ */ jsx("p", {
+				"data-testid": "context-item-error",
+				className: "text-sm text-doom-dim",
+				children: error
+			}) : detail === null ? /* @__PURE__ */ jsxs("p", {
+				"data-testid": "context-item-loading",
+				className: "flex items-center gap-2 text-sm text-doom-dim",
+				children: [/* @__PURE__ */ jsx(Spinner, {}), "reading the session's inventory"]
+			}) : /* @__PURE__ */ jsx(ContextItemBody, { detail })] })]
+		})
+	});
+}
+function ContextItemBody({ detail }) {
+	if (detail.itemKind === "prompt") return /* @__PURE__ */ jsx(PromptBody, { detail });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			detail.itemKind === "tool" ? /* @__PURE__ */ jsx(ToolCost, { detail }) : /* @__PURE__ */ jsx(SkillFacts, { detail }),
+			detail.itemKind === "skill" || detail.description !== void 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "description",
+				children: /* @__PURE__ */ jsx("p", {
+					"data-testid": "context-item-description",
+					className: "text-base leading-relaxed whitespace-pre-wrap text-doom-text",
+					children: detail.description
+				})
+			}) : null,
+			detail.itemKind === "skill" && detail.body !== void 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "body",
+				children: /* @__PURE__ */ jsx(Pre, {
+					testId: "context-item-body",
+					children: detail.body
+				})
+			}) : null,
+			detail.itemKind === "tool" && detail.promptSnippet !== void 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "prompt snippet",
+				children: /* @__PURE__ */ jsx(Pre, {
+					testId: "context-item-snippet",
+					children: detail.promptSnippet
+				})
+			}) : null,
+			detail.itemKind === "tool" && detail.promptGuidelines !== void 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "prompt guidelines",
+				children: /* @__PURE__ */ jsx("ul", {
+					"data-testid": "context-item-guidelines",
+					className: "flex flex-col gap-1",
+					children: detail.promptGuidelines.map((line) => /* @__PURE__ */ jsx("li", {
+						className: "text-sm leading-relaxed text-doom-dim",
+						children: line
+					}, line))
+				})
+			}) : null,
+			detail.itemKind === "tool" && detail.parameters !== void 0 ? /* @__PURE__ */ jsx(Section, {
+				title: "parameters",
+				children: /* @__PURE__ */ jsx(Pre, {
+					testId: "context-item-schema",
+					children: JSON.stringify(detail.parameters, null, 2)
+				})
+			}) : null
+		]
+	});
+}
+function Section({ title, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-lg font-semibold text-doom-hi",
+			children: title
+		}), children]
+	});
+}
+function Pre({ testId, children, tall = false }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		className: `overflow-auto bg-doom-deep px-3 py-2 ${tall ? "max-h-[60vh]" : "max-h-64"}`,
+		children: /* @__PURE__ */ jsx("pre", {
+			"data-testid": testId,
+			className: "text-sm leading-relaxed whitespace-pre-wrap text-doom-dim",
+			children
+		})
+	});
+}
+/**
+* The whole prompt, and the two things a figure alone would mislead about.
+*
+* The count overlaps the panel's own total, because the tool prose and skill
+* listings priced there are inside this text. And a session that has sent
+* nothing has no built prompt to show: assembling one would fire the hooks that
+* a real turn fires, so the pre-hook base is shown and named as such.
+*/
+function PromptBody({ detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-testid": "context-item-cost",
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx(Row, {
+					label: "prompt",
+					value: tokens(detail.tokens),
+					strong: true
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-doom-dim",
+					children: "counted apart from the panel total: the tool and skill prose priced there is part of this text"
+				}),
+				detail.stage === "base" ? /* @__PURE__ */ jsx("p", {
+					"data-testid": "context-item-stage",
+					className: "text-sm text-doom-dim",
+					children: "this session has sent nothing yet, so this is the prompt before packages add to it at the first message"
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(Section, {
+			title: "text",
+			children: /* @__PURE__ */ jsx(Pre, {
+				testId: "context-item-prompt",
+				tall: true,
+				children: detail.text
+			})
+		})]
+	});
+}
+/** A tool is paid twice, so the split is the useful figure rather than the total. */
+function ToolCost({ detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "context-item-cost",
+		className: "flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "schema",
+				value: tokens(detail.tokens.schemaTokens)
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "system prompt",
+				value: tokens(detail.tokens.promptTokens)
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "total",
+				value: tokens(detail.tokens.totalTokens),
+				strong: true
+			}),
+			detail.active ? null : /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-doom-dim",
+				children: "not sent to the model; costs nothing until switched on"
+			})
+		]
+	});
+}
+function SkillFacts({ detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "context-item-cost",
+		className: "flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "listing",
+				value: tokens(detail.tokens),
+				strong: true
+			}),
+			detail.filePath ? /* @__PURE__ */ jsx(Row, {
+				label: "file",
+				value: detail.filePath
+			}) : null,
+			detail.modelInvocable ? null : /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-doom-dim",
+				children: "not offered to the model"
+			})
+		]
+	});
+}
+function Row({ label, value, strong = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline justify-between gap-3",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-sm text-doom-dim",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: `truncate text-sm ${strong ? "font-semibold text-doom-text" : "text-doom-dim"}`,
+			children: value
+		})]
+	});
+}
+//#endregion
+export { ContextItemDialog };
+
+//# sourceMappingURL=ContextItemDialog.mjs.map

package/dist/web/features/activity/ContextItemDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextItemDialog.mjs","names":[],"sources":["../../../../src/web/features/activity/ContextItemDialog.tsx"],"sourcesContent":["import type { ContextItemDetail, ContextItemKind, ContextToolWarning } from '@agimon-ai/po-core/contextApi';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Panel,\n  Spinner,\n} from '@agimon-ai/po-web-components';\nimport { useEffect, useState } from 'react';\n\nimport { fetchContextItemDetail } from '../../lib/contextDetailApi';\n\n/**\n * What one row of the composition actually is.\n *\n * The panel answers \"what does this cost\"; a reader who clicks a row is asking\n * the follow-up, \"and what am I paying for\". That is the description the model\n * reads, the schema it is handed, and for a tool the split between the two,\n * because the two are cut differently: prose comes out with the package, a\n * schema only with the tool.\n *\n * Fetched on open rather than carried by the projection. The full text of every\n * tool in a composition is an order of magnitude larger than the figures, and\n * is wanted one row at a time.\n */\n\nfunction tokens(value: number): string {\n  return `~${value.toLocaleString()}`;\n}\n\ninterface Target {\n  itemKind: ContextItemKind;\n  name: string;\n  owner: string;\n}\n\nexport interface ContextItemDialogProps {\n  sessionId: string | null;\n  target: Target | null;\n  warnings?: readonly ContextToolWarning[];\n  onClose: () => void;\n}\n\nexport function ContextItemDialog({ sessionId, target, warnings, onClose }: ContextItemDialogProps) {\n  const [detail, setDetail] = useState<ContextItemDetail | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const itemKind = target?.itemKind ?? null;\n  const name = target?.name ?? null;\n\n  // A second click must not show the first row's answer for a frame, so the\n  // reset happens during render rather than in the effect that refetches.\n  const request =\n    sessionId === null || itemKind === null || name === null ? null : `${sessionId}\\u0000${itemKind}\\u0000${name}`;\n  const [shown, setShown] = useState<string | null>(null);\n  if (shown !== request) {\n    setShown(request);\n    setDetail(null);\n    setError(null);\n  }\n\n  useEffect(() => {\n    if (sessionId === null || itemKind === null || name === null) return;\n    // A reply that lands after the reader moved on belongs to a row that is no\n    // longer open, so it is dropped rather than painted.\n    let live = true;\n    void fetchContextItemDetail(sessionId, itemKind, name).then((result) => {\n      if (!live) return;\n      if (result.ok) setDetail(result.detail);\n      else setError(result.error);\n    });\n    return () => {\n      live = false;\n    };\n  }, [sessionId, itemKind, name]);\n\n  if (target === null) return null;\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(next) => {\n        if (!next) onClose();\n      }}\n    >\n      <DialogContent width=\"lg\" data-testid=\"context-item-dialog\" aria-describedby={undefined}>\n        <DialogHeader>\n          <DialogTitle data-testid=\"context-item-title\">\n            {target.itemKind === 'prompt' ? 'system prompt' : target.name}\n          </DialogTitle>\n          <span className=\"text-sm text-doom-dim\">\n            {target.itemKind} · {target.owner}\n          </span>\n        </DialogHeader>\n        <DialogBody>\n          {target.itemKind === 'tool' && warnings && warnings.length > 0 ? (\n            <Section title=\"warnings\">\n              <ul data-testid=\"context-item-warnings\" aria-live=\"polite\" className=\"flex flex-col gap-3\">\n                {warnings.map((warning, index) => (\n                  <li key={index} className=\"flex flex-col gap-1 text-sm break-words\">\n                    <span className=\"text-doom-yellow\">{warning.source}</span>\n                    <span className=\"text-sm text-doom-dim\">{warning.path}</span>\n                    <p className=\"text-doom-text\">{warning.message}</p>\n                  </li>\n                ))}\n              </ul>\n            </Section>\n          ) : null}\n          {error !== null ? (\n            <p data-testid=\"context-item-error\" className=\"text-sm text-doom-dim\">\n              {error}\n            </p>\n          ) : detail === null ? (\n            <p data-testid=\"context-item-loading\" className=\"flex items-center gap-2 text-sm text-doom-dim\">\n              <Spinner />\n              reading the session's inventory\n            </p>\n          ) : (\n            <ContextItemBody detail={detail} />\n          )}\n        </DialogBody>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction ContextItemBody({ detail }: { detail: ContextItemDetail }) {\n  if (detail.itemKind === 'prompt') return <PromptBody detail={detail} />;\n  return (\n    <div className=\"flex flex-col gap-3\">\n      {detail.itemKind === 'tool' ? <ToolCost detail={detail} /> : <SkillFacts detail={detail} />}\n\n      {detail.itemKind === 'skill' || detail.description !== undefined ? (\n        <Section title=\"description\">\n          <p\n            data-testid=\"context-item-description\"\n            className=\"text-base leading-relaxed whitespace-pre-wrap text-doom-text\"\n          >\n            {detail.description}\n          </p>\n        </Section>\n      ) : null}\n\n      {detail.itemKind === 'skill' && detail.body !== undefined ? (\n        <Section title=\"body\">\n          <Pre testId=\"context-item-body\">{detail.body}</Pre>\n        </Section>\n      ) : null}\n\n      {detail.itemKind === 'tool' && detail.promptSnippet !== undefined ? (\n        <Section title=\"prompt snippet\">\n          <Pre testId=\"context-item-snippet\">{detail.promptSnippet}</Pre>\n        </Section>\n      ) : null}\n\n      {detail.itemKind === 'tool' && detail.promptGuidelines !== undefined ? (\n        <Section title=\"prompt guidelines\">\n          <ul data-testid=\"context-item-guidelines\" className=\"flex flex-col gap-1\">\n            {detail.promptGuidelines.map((line) => (\n              <li key={line} className=\"text-sm leading-relaxed text-doom-dim\">\n                {line}\n              </li>\n            ))}\n          </ul>\n        </Section>\n      ) : null}\n\n      {detail.itemKind === 'tool' && detail.parameters !== undefined ? (\n        <Section title=\"parameters\">\n          <Pre testId=\"context-item-schema\">{JSON.stringify(detail.parameters, null, 2)}</Pre>\n        </Section>\n      ) : null}\n    </div>\n  );\n}\n\nfunction Section({ title, children }: { title: string; children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span className=\"text-lg font-semibold text-doom-hi\">{title}</span>\n      {children}\n    </div>\n  );\n}\n\nfunction Pre({ testId, children, tall = false }: { testId: string; children: string; tall?: boolean }) {\n  return (\n    <Panel className={`overflow-auto bg-doom-deep px-3 py-2 ${tall ? 'max-h-[60vh]' : 'max-h-64'}`}>\n      <pre data-testid={testId} className=\"text-sm leading-relaxed whitespace-pre-wrap text-doom-dim\">\n        {children}\n      </pre>\n    </Panel>\n  );\n}\n\n/**\n * The whole prompt, and the two things a figure alone would mislead about.\n *\n * The count overlaps the panel's own total, because the tool prose and skill\n * listings priced there are inside this text. And a session that has sent\n * nothing has no built prompt to show: assembling one would fire the hooks that\n * a real turn fires, so the pre-hook base is shown and named as such.\n */\nfunction PromptBody({ detail }: { detail: Extract<ContextItemDetail, { itemKind: 'prompt' }> }) {\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div data-testid=\"context-item-cost\" className=\"flex flex-col gap-1\">\n        <Row label=\"prompt\" value={tokens(detail.tokens)} strong />\n        <p className=\"text-sm text-doom-dim\">\n          counted apart from the panel total: the tool and skill prose priced there is part of this text\n        </p>\n        {detail.stage === 'base' ? (\n          <p data-testid=\"context-item-stage\" className=\"text-sm text-doom-dim\">\n            this session has sent nothing yet, so this is the prompt before packages add to it at the first message\n          </p>\n        ) : null}\n      </div>\n      <Section title=\"text\">\n        <Pre testId=\"context-item-prompt\" tall>\n          {detail.text}\n        </Pre>\n      </Section>\n    </div>\n  );\n}\n\n/** A tool is paid twice, so the split is the useful figure rather than the total. */\nfunction ToolCost({ detail }: { detail: Extract<ContextItemDetail, { itemKind: 'tool' }> }) {\n  return (\n    <div data-testid=\"context-item-cost\" className=\"flex flex-col gap-1\">\n      <Row label=\"schema\" value={tokens(detail.tokens.schemaTokens)} />\n      <Row label=\"system prompt\" value={tokens(detail.tokens.promptTokens)} />\n      <Row label=\"total\" value={tokens(detail.tokens.totalTokens)} strong />\n      {detail.active ? null : (\n        <p className=\"text-sm text-doom-dim\">not sent to the model; costs nothing until switched on</p>\n      )}\n    </div>\n  );\n}\n\nfunction SkillFacts({ detail }: { detail: Extract<ContextItemDetail, { itemKind: 'skill' }> }) {\n  return (\n    <div data-testid=\"context-item-cost\" className=\"flex flex-col gap-1\">\n      <Row label=\"listing\" value={tokens(detail.tokens)} strong />\n      {detail.filePath ? <Row label=\"file\" value={detail.filePath} /> : null}\n      {detail.modelInvocable ? null : <p className=\"text-sm text-doom-dim\">not offered to the model</p>}\n    </div>\n  );\n}\n\nfunction Row({ label, value, strong = false }: { label: string; value: string; strong?: boolean }) {\n  return (\n    <div className=\"flex items-baseline justify-between gap-3\">\n      <span className=\"text-sm text-doom-dim\">{label}</span>\n      <span className={`truncate text-sm ${strong ? 'font-semibold text-doom-text' : 'text-doom-dim'}`}>{value}</span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/activity/ContextPanel.cjs

@@ -0,0 +1,248 @@
+const require_pluginRegistry = require("../../lib/pluginRegistry.cjs");
+const require_contextComposition = require("../../lib/contextComposition.cjs");
+const require_sessionsStore = require("../../stores/sessionsStore.cjs");
+const require_sessionStore = require("../../stores/sessionStore.cjs");
+const require_PluginSurface = require("../../components/PluginSurface.cjs");
+const require_ContextItemDialog = require("./ContextItemDialog.cjs");
+let react = require("react");
+let _agimon_ai_po_core_contextApi = require("@agimon-ai/po-core/contextApi");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/activity/ContextPanel.tsx
+/** Short enough to sit in a fixed column without wrapping the tool's own name. */
+const SOURCE_LABEL = {
+	extension: "ext",
+	mcp: "mcp",
+	plugin: "plug",
+	core: "core"
+};
+/** The tilde is the whole caveat in one character: this is arithmetic, not a bill. */
+function tokens(value) {
+	return value === null ? "-" : `~${value.toLocaleString()}`;
+}
+/**
+* What the session is carrying.
+*
+* Every tool and skill in here is spending context before the first message,
+* so the surface is built around the one question worth asking of it: what is
+* this costing, and what do I switch off to stop paying it. Modes head the
+* groups because a mode is what you switch; packages head the rows inside them
+* because a package is what you add or remove. It reads only; switching stays
+* with the composer chips that already own it.
+*/
+function withoutMcpInventory(groups) {
+	return groups.map((group) => {
+		const mcp = group.items.filter((item) => item.source === "mcp");
+		const activeMcpTokens = mcp.reduce((sum, item) => sum + (item.active ? item.tokens ?? 0 : 0), 0);
+		const inactiveMcpTokens = mcp.reduce((sum, item) => sum + (item.active ? 0 : item.tokens ?? 0), 0);
+		return {
+			...group,
+			items: group.items.filter((item) => item.source !== "mcp"),
+			tokens: group.tokens === null ? null : Math.max(0, group.tokens - activeMcpTokens),
+			inactiveTokens: Math.max(0, group.inactiveTokens - inactiveMcpTokens)
+		};
+	});
+}
+function ContextPanel() {
+	const statuses = require_sessionStore.useActiveSession((state) => state.statuses);
+	const widgets = require_sessionStore.useActiveSession((state) => state.widgets);
+	const projection = require_sessionStore.useActiveSession((state) => state.minorModes);
+	const context = require_sessionStore.useActiveSession((state) => state.context);
+	const sessionId = require_sessionsStore.useActiveSessionMeta()?.summary.id ?? null;
+	const [target, setTarget] = (0, react.useState)(null);
+	const [targetSession, setTargetSession] = (0, react.useState)(sessionId);
+	if (targetSession !== sessionId) {
+		setTargetSession(sessionId);
+		setTarget(null);
+	}
+	const warnings = (0, _agimon_ai_po_core_contextApi.parseContextToolWarnings)(statuses[_agimon_ai_po_core_contextApi.CONTEXT_TOOL_WARNINGS_STATUS_KEY]);
+	const groups = context ? require_contextComposition.projectedGroups(context) : require_contextComposition.contextGroups(statuses, widgets, projection);
+	const total = require_contextComposition.totalTokens(groups);
+	const idle = require_contextComposition.inactiveTotal(groups);
+	const visibleGroups = withoutMcpInventory(groups);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "context-panel",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "context-scroll",
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PluginSurface.PluginSurface, {
+					slot: require_pluginRegistry.HOST_SLOTS.context,
+					sessionId
+				}), groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+					"data-testid": "context-empty",
+					className: "px-4 py-5",
+					title: "no composition yet",
+					description: "the session reports its major mode, minor modes, and domains once it has started."
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-col",
+					children: visibleGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextGroupView, {
+						group,
+						warnings,
+						onSelect: setTarget
+					}, `${group.kind}:${group.id}`))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "shrink-0 border-t border-doom-border px-4 py-3",
+				children: [
+					context?.systemPrompt ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Button, {
+						variant: "ghost",
+						size: "card",
+						"data-testid": "context-system-prompt",
+						title: "read the system prompt this session is running under",
+						onClick: () => setTarget({
+							itemKind: "prompt",
+							name: "system",
+							owner: "session"
+						}),
+						className: "flex-row items-center justify-between gap-2 rounded-none px-0 py-px",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm text-doom-dim",
+							children: context.systemPrompt.stage === "base" ? "system prompt (base)" : "system prompt"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm text-doom-dim",
+							children: tokens(context.systemPrompt.tokens)
+						})]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm font-semibold text-doom-text",
+							children: "active"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-testid": "context-total",
+							className: "text-sm font-semibold text-doom-text",
+							children: tokens(total)
+						})]
+					}),
+					idle > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm text-doom-dim",
+							children: "inactive"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-testid": "context-inactive",
+							className: "text-sm text-doom-dim",
+							children: `+${tokens(idle)}`
+						})]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm leading-relaxed text-doom-dim",
+						children: `estimated · ${context?.estimator ?? "gpt-tokenizer"} BPE · not a billed total`
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContextItemDialog.ContextItemDialog, {
+				sessionId,
+				target,
+				warnings: target?.itemKind === "tool" && Object.hasOwn(warnings, target.name) ? warnings[target.name] : void 0,
+				onClose: () => setTarget(null)
+			})
+		]
+	});
+}
+/** Active carries the bright ink, inactive the faint one, so what the model sees reads at a glance. */
+function ink(active) {
+	return active ? "text-doom-hi" : "text-doom-dim";
+}
+function ContextGroupView({ group, warnings, onSelect }) {
+	const groupActive = group.items.length === 0 || group.items.some((item) => item.active);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": `context-group-${group.id}`,
+		"data-kind": group.kind,
+		"data-active": groupActive,
+		className: "flex flex-col gap-1 border-b border-doom-border-soft px-3 py-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 px-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "text-sm font-semibold text-doom-faint",
+					children: "#"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `min-w-0 flex-1 truncate text-lg font-semibold text-doom-hi`,
+					children: group.label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "inline-block text-sm text-doom-dim first-letter:uppercase",
+					children: group.kind
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": `context-subtotal-${group.id}`,
+					className: "w-14 text-right text-sm text-doom-dim",
+					children: tokens(group.tokens)
+				})
+			]
+		}), group.items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			"data-testid": `context-pending-${group.id}`,
+			className: "px-1 text-sm text-doom-dim",
+			children: group.detail || "no tools or skills reported"
+		}) : require_contextComposition.ownersOf(group).map((owner) => {
+			const ownerActive = owner.items.some((item) => item.active);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-testid": `context-owner-${owner.owner}`,
+					"data-active": ownerActive,
+					title: owner.owner,
+					className: "flex items-center gap-2 px-1 pt-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `min-w-0 flex-1 truncate text-base font-semibold text-doom-hi`,
+							children: require_contextComposition.ownerLabel(owner.owner)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm text-doom-dim",
+							children: SOURCE_LABEL[owner.source]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "w-14 text-right text-sm text-doom-dim",
+							children: tokens(owner.tokens)
+						})
+					]
+				}), owner.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Button, {
+					variant: "ghost",
+					size: "card",
+					"data-testid": `context-row-${item.name}`,
+					"data-active": item.active,
+					onClick: () => onSelect({
+						itemKind: item.itemKind,
+						name: item.name,
+						owner: item.owner
+					}),
+					className: "flex-row items-center gap-2 rounded-none py-px pr-1 pl-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("abbr", {
+							title: item.itemKind,
+							className: `w-4 shrink-0 text-center text-2xs font-semibold no-underline ${item.active ? "text-doom-violet" : "text-doom-faint"}`,
+							children: item.itemKind === "skill" ? "S" : "T"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: `min-w-0 flex-1 truncate text-base font-medium ${ink(item.active)}`,
+							children: item.name
+						}),
+						item.itemKind === "tool" && Object.hasOwn(warnings, item.name) && (warnings[item.name]?.length ?? 0) > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("abbr", {
+							"data-testid": `context-warning-${item.name}`,
+							"aria-label": `${item.name} has warnings`,
+							title: "warnings: open tool details for origins",
+							className: "shrink-0 text-xs font-semibold text-doom-yellow no-underline",
+							children: "!"
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							title: item.active ? void 0 : "not sent to the model; costs nothing until switched on",
+							className: `w-14 text-right text-sm ${item.active ? "text-doom-text" : "text-doom-dim"}`,
+							children: item.active ? tokens(item.tokens) : `(${tokens(item.tokens)})`
+						})
+					]
+				}, `${item.itemKind}:${item.name}`))]
+			}, owner.owner);
+		})]
+	});
+}
+//#endregion
+exports.ContextPanel = ContextPanel;
+
+//# sourceMappingURL=ContextPanel.cjs.map

package/dist/web/features/activity/ContextPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.cjs","names":["useActiveSession","useActiveSessionMeta","useState","parseContextToolWarnings","CONTEXT_TOOL_WARNINGS_STATUS_KEY","projectedGroups","contextGroups","totalTokens","inactiveTotal","PluginSurface","HOST_SLOTS","EmptyState","Button","ContextItemDialog","ownersOf","ownerLabel"],"sources":["../../../../src/web/features/activity/ContextPanel.tsx"],"sourcesContent":["import {\n  CONTEXT_TOOL_WARNINGS_STATUS_KEY,\n  parseContextToolWarnings,\n  type ContextToolWarning,\n  type ContextItemKind,\n} from '@agimon-ai/po-core/contextApi';\nimport { Button, EmptyState } from '@agimon-ai/po-web-components';\nimport { useState } from 'react';\n\nimport { PluginSurface } from '../../components/PluginSurface';\nimport {\n  type ContextGroup,\n  type ContextItemSource,\n  contextGroups,\n  inactiveTotal,\n  ownerLabel,\n  ownersOf,\n  projectedGroups,\n  totalTokens,\n} from '../../lib/contextComposition';\nimport { HOST_SLOTS } from '../../lib/pluginRegistry';\nimport { useActiveSessionMeta } from '../../stores/sessionsStore';\nimport { useActiveSession } from '../../stores/sessionStore';\nimport { ContextItemDialog } from './ContextItemDialog';\n\n/** The row a reader clicked, which is all the detail request is made of. */\ninterface ItemTarget {\n  itemKind: ContextItemKind;\n  name: string;\n  owner: string;\n}\n\n/** Short enough to sit in a fixed column without wrapping the tool's own name. */\nconst SOURCE_LABEL: Record<ContextItemSource, string> = {\n  extension: 'ext',\n  mcp: 'mcp',\n  plugin: 'plug',\n  core: 'core',\n};\n\n/** The tilde is the whole caveat in one character: this is arithmetic, not a bill. */\nfunction tokens(value: number | null): string {\n  return value === null ? '-' : `~${value.toLocaleString()}`;\n}\n\n/**\n * What the session is carrying.\n *\n * Every tool and skill in here is spending context before the first message,\n * so the surface is built around the one question worth asking of it: what is\n * this costing, and what do I switch off to stop paying it. Modes head the\n * groups because a mode is what you switch; packages head the rows inside them\n * because a package is what you add or remove. It reads only; switching stays\n * with the composer chips that already own it.\n */\nfunction withoutMcpInventory(groups: readonly ContextGroup[]): ContextGroup[] {\n  return groups.map((group) => {\n    const mcp = group.items.filter((item) => item.source === 'mcp');\n    const activeMcpTokens = mcp.reduce((sum, item) => sum + (item.active ? (item.tokens ?? 0) : 0), 0);\n    const inactiveMcpTokens = mcp.reduce((sum, item) => sum + (item.active ? 0 : (item.tokens ?? 0)), 0);\n    return {\n      ...group,\n      items: group.items.filter((item) => item.source !== 'mcp'),\n      tokens: group.tokens === null ? null : Math.max(0, group.tokens - activeMcpTokens),\n      inactiveTokens: Math.max(0, group.inactiveTokens - inactiveMcpTokens),\n    };\n  });\n}\n\nexport function ContextPanel() {\n  const statuses = useActiveSession((state) => state.statuses);\n  const widgets = useActiveSession((state) => state.widgets);\n  const projection = useActiveSession((state) => state.minorModes);\n  const context = useActiveSession((state) => state.context);\n  const sessionId = useActiveSessionMeta()?.summary.id ?? null;\n  const [target, setTarget] = useState<ItemTarget | null>(null);\n  const [targetSession, setTargetSession] = useState(sessionId);\n  if (targetSession !== sessionId) {\n    setTargetSession(sessionId);\n    setTarget(null);\n  }\n  const warnings = parseContextToolWarnings(statuses[CONTEXT_TOOL_WARNINGS_STATUS_KEY]);\n  // The runtime's grouping wins once it arrives; the status line only has to\n  // carry the surface until the session has reported its inventory.\n  const groups = context ? projectedGroups(context) : contextGroups(statuses, widgets, projection);\n  const total = totalTokens(groups);\n  const idle = inactiveTotal(groups);\n  const visibleGroups = withoutMcpInventory(groups);\n  return (\n    <div data-testid=\"context-panel\" className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n      <div data-testid=\"context-scroll\" className=\"min-h-0 flex-1 overflow-y-auto\">\n        <PluginSurface slot={HOST_SLOTS.context} sessionId={sessionId} />\n        {groups.length === 0 ? (\n          <EmptyState\n            data-testid=\"context-empty\"\n            className=\"px-4 py-5\"\n            title=\"no composition yet\"\n            description=\"the session reports its major mode, minor modes, and domains once it has started.\"\n          />\n        ) : (\n          <div className=\"flex flex-col\">\n            {visibleGroups.map((group) => (\n              <ContextGroupView\n                key={`${group.kind}:${group.id}`}\n                group={group}\n                warnings={warnings}\n                onSelect={setTarget}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className=\"shrink-0 border-t border-doom-border px-4 py-3\">\n        {/* Above the totals rather than inside them. The prompt carries every\n            tool's prose and every skill's listing, which the group subtotals\n            have already counted, so the two figures overlap and adding them\n            would bill the same text twice. */}\n        {context?.systemPrompt ? (\n          <Button\n            variant=\"ghost\"\n            size=\"card\"\n            data-testid=\"context-system-prompt\"\n            title=\"read the system prompt this session is running under\"\n            onClick={() => setTarget({ itemKind: 'prompt', name: 'system', owner: 'session' })}\n            className=\"flex-row items-center justify-between gap-2 rounded-none px-0 py-px\"\n          >\n            <span className=\"text-sm text-doom-dim\">\n              {context.systemPrompt.stage === 'base' ? 'system prompt (base)' : 'system prompt'}\n            </span>\n            <span className=\"text-sm text-doom-dim\">{tokens(context.systemPrompt.tokens)}</span>\n          </Button>\n        ) : null}\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm font-semibold text-doom-text\">active</span>\n          <span data-testid=\"context-total\" className=\"text-sm font-semibold text-doom-text\">\n            {tokens(total)}\n          </span>\n        </div>\n        {idle > 0 ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm text-doom-dim\">inactive</span>\n            <span data-testid=\"context-inactive\" className=\"text-sm text-doom-dim\">\n              {`+${tokens(idle)}`}\n            </span>\n          </div>\n        ) : null}\n        <span className=\"text-sm leading-relaxed text-doom-dim\">\n          {`estimated · ${context?.estimator ?? 'gpt-tokenizer'} BPE · not a billed total`}\n        </span>\n      </div>\n\n      <ContextItemDialog\n        sessionId={sessionId}\n        target={target}\n        warnings={\n          target?.itemKind === 'tool' && Object.hasOwn(warnings, target.name) ? warnings[target.name] : undefined\n        }\n        onClose={() => setTarget(null)}\n      />\n    </div>\n  );\n}\n\n/** Active carries the bright ink, inactive the faint one, so what the model sees reads at a glance. */\nfunction ink(active: boolean): string {\n  return active ? 'text-doom-hi' : 'text-doom-dim';\n}\n\nfunction ContextGroupView({\n  group,\n  warnings,\n  onSelect,\n}: {\n  group: ContextGroup;\n  warnings: Readonly<Record<string, readonly ContextToolWarning[]>>;\n  onSelect: (target: ItemTarget) => void;\n}) {\n  // A group that reported rows is active when any of them is; one still pending keeps the normal head.\n  const groupActive = group.items.length === 0 || group.items.some((item) => item.active);\n  return (\n    <div\n      data-testid={`context-group-${group.id}`}\n      data-kind={group.kind}\n      data-active={groupActive}\n      className=\"flex flex-col gap-1 border-b border-doom-border-soft px-3 py-3\"\n    >\n      {/* The same head the activity dock uses, for the same reason: the glyph\n          says \"section\", so a mode never reads as one more row among the tools\n          it brought with it. */}\n      <div className=\"flex items-center gap-2 px-1\">\n        <span aria-hidden className=\"text-sm font-semibold text-doom-faint\">\n          #\n        </span>\n        <span className={`min-w-0 flex-1 truncate text-lg font-semibold text-doom-hi`}>{group.label}</span>\n        <span className=\"inline-block text-sm text-doom-dim first-letter:uppercase\">{group.kind}</span>\n        <span data-testid={`context-subtotal-${group.id}`} className=\"w-14 text-right text-sm text-doom-dim\">\n          {tokens(group.tokens)}\n        </span>\n      </div>\n\n      {group.items.length === 0 ? (\n        <p data-testid={`context-pending-${group.id}`} className=\"px-1 text-sm text-doom-dim\">\n          {group.detail || 'no tools or skills reported'}\n        </p>\n      ) : (\n        ownersOf(group).map((owner) => {\n          const ownerActive = owner.items.some((item) => item.active);\n          return (\n            <div key={owner.owner} className=\"flex flex-col\">\n              {/* The package heads its own rows, so the source tag sits here\n                rather than repeating on every tool that shares it. */}\n              <div\n                data-testid={`context-owner-${owner.owner}`}\n                data-active={ownerActive}\n                title={owner.owner}\n                className=\"flex items-center gap-2 px-1 pt-1\"\n              >\n                <span className={`min-w-0 flex-1 truncate text-base font-semibold text-doom-hi`}>\n                  {ownerLabel(owner.owner)}\n                </span>\n                <span className=\"text-sm text-doom-dim\">{SOURCE_LABEL[owner.source]}</span>\n                <span className=\"w-14 text-right text-sm text-doom-dim\">{tokens(owner.tokens)}</span>\n              </div>\n              {owner.items.map((item) => (\n                // A row is a question as much as a figure: what am I paying for.\n                // The answer is too large to have travelled with the panel, so\n                // the row asks for it rather than carrying it.\n                <Button\n                  variant=\"ghost\"\n                  size=\"card\"\n                  key={`${item.itemKind}:${item.name}`}\n                  data-testid={`context-row-${item.name}`}\n                  data-active={item.active}\n                  onClick={() => onSelect({ itemKind: item.itemKind, name: item.name, owner: item.owner })}\n                  className=\"flex-row items-center gap-2 rounded-none py-px pr-1 pl-4\"\n                >\n                  <abbr\n                    title={item.itemKind}\n                    className={`w-4 shrink-0 text-center text-2xs font-semibold no-underline ${item.active ? 'text-doom-violet' : 'text-doom-faint'}`}\n                  >\n                    {item.itemKind === 'skill' ? 'S' : 'T'}\n                  </abbr>\n                  <span className={`min-w-0 flex-1 truncate text-base font-medium ${ink(item.active)}`}>\n                    {item.name}\n                  </span>\n                  {item.itemKind === 'tool' &&\n                  Object.hasOwn(warnings, item.name) &&\n                  (warnings[item.name]?.length ?? 0) > 0 ? (\n                    <abbr\n                      data-testid={`context-warning-${item.name}`}\n                      aria-label={`${item.name} has warnings`}\n                      title=\"warnings: open tool details for origins\"\n                      className=\"shrink-0 text-xs font-semibold text-doom-yellow no-underline\"\n                    >\n                      !\n                    </abbr>\n                  ) : null}\n                  <span\n                    title={item.active ? undefined : 'not sent to the model; costs nothing until switched on'}\n                    className={`w-14 text-right text-sm ${item.active ? 'text-doom-text' : 'text-doom-dim'}`}\n                  >\n                    {item.active ? tokens(item.tokens) : `(${tokens(item.tokens)})`}\n                  </span>\n                </Button>\n              ))}\n            </div>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/activity/ContextPanel.d.mts

@@ -0,0 +1,4 @@
+//#region src/web/features/activity/ContextPanel.d.ts
+export declare function ContextPanel(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ContextPanel.d.mts.map

package/dist/web/features/activity/ContextPanel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.d.mts","names":[],"sources":["../../../../src/web/features/activity/ContextPanel.tsx"],"mappings":";wBAqEgB,gCAAY,IAAA"}