@agimon-ai/po-web-dashboard 0.0.0-alpha.64 → 0.0.0-alpha.65

package/dist/views.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_ToolRendererBoundary = require("./web/lib/ToolRendererBoundary.cjs");
+const require_HomePage = require("./web/components/HomePage.cjs");
 const require_MascotMark = require("./web/components/MascotMark.cjs");
 const require_PluginPage = require("./web/components/PluginPage.cjs");
 const require_PluginSurface = require("./web/components/PluginSurface.cjs");
@@ -67,6 +68,8 @@ exports.DevProxyTargets = require_DevProxyTargets.DevProxyTargets;
 exports.DialogOverlay = require_DialogOverlay.DialogOverlay;
 exports.DockTabs = require_DockTabs.DockTabs;
 exports.DormantPanel = require_DormantPanel.DormantPanel;
+exports.HomePage = require_HomePage.HomePage;
+exports.HomeView = require_HomePage.HomeView;
 exports.HostsSettings = require_HostsSettings.HostsSettings;
 exports.ImageSettings = require_ImageSettings.ImageSettings;
 exports.LoginFlowDialog = require_LoginFlowDialog.LoginFlowDialog;

package/dist/views.d.mts

@@ -1,4 +1,5 @@
 import { ToolRendererBoundary } from "./web/lib/ToolRendererBoundary.mjs";
+import { HomePage, HomeView, HomeViewProps } from "./web/components/HomePage.mjs";
 import { MascotMark, MascotMarkProps } from "./web/components/MascotMark.mjs";
 import { PluginPage } from "./web/components/PluginPage.mjs";
 import { PluginSurface } from "./web/components/PluginSurface.mjs";
@@ -53,4 +54,4 @@ import { SettingsPanelHost } from "./web/features/settings/SettingsPanelHost.mjs
 import { TemplateSettings } from "./web/features/settings/TemplateSettings.mjs";
 import { TunnelSettings } from "./web/features/settings/TunnelSettings.mjs";
 import { TopBar } from "./web/features/status/TopBar.mjs";
-export { ActivityDock, AppearanceSettings, CockpitHost, CommandPalette, Composer, ComposerPrompt, ContextItemDialog, ContextItemDialogProps, ContextPanel, ContextPanelView, ContributedSettings, DevProxyTargets, DialogOverlay, DockFaceSnapshot, DockTabs, DormantPanel, HostsSettings, HostsSettingsProps, ImageSettings, LoginFlowDialog, METHOD_LABEL, MascotMark, MascotMarkProps, MentionPreviewAsset, MentionPreviews, MessageFileLinkHandler, MessageMarkdown, ModelPopup, NewSessionDialog, NotificationSettings, PairedDeviceList, PairingApprovalDialog, PluginPage, PluginSettings, PluginSurface, ProviderSettings, QrCode, QrCodeProps, QueueSheet, RefusedCard, RemoteAccessDialog, RemoteAccessOptions, RemoteAccessPairing, RemoteControlSettings, RepositorySettings, RepositoryWorkspace, ResumeSessionDialog, SelectionBar, SessionActivity, SessionActivityView, SessionMcp, SessionMcpSettings, SessionMcpTools, SessionRailDialogs, SessionTranscriptView, SettingsMenu, SettingsPanelHost, TemplateSettings, ThreadView, Timeline, ToolCard, ToolRendererBoundary, TopBar, Transcript, TrustedDeviceList, TrustedDeviceListView, TrustedDeviceListViewProps, TunnelSettings, WelcomePanel, addComposerFiles, appearedFaces, hostKeyFor, isQuickTunnel, nestedToolCard, readComposerFiles, sessionActivity, useNewSessionActions, useSessionRail };
+export { ActivityDock, AppearanceSettings, CockpitHost, CommandPalette, Composer, ComposerPrompt, ContextItemDialog, ContextItemDialogProps, ContextPanel, ContextPanelView, ContributedSettings, DevProxyTargets, DialogOverlay, DockFaceSnapshot, DockTabs, DormantPanel, HomePage, HomeView, HomeViewProps, HostsSettings, HostsSettingsProps, ImageSettings, LoginFlowDialog, METHOD_LABEL, MascotMark, MascotMarkProps, MentionPreviewAsset, MentionPreviews, MessageFileLinkHandler, MessageMarkdown, ModelPopup, NewSessionDialog, NotificationSettings, PairedDeviceList, PairingApprovalDialog, PluginPage, PluginSettings, PluginSurface, ProviderSettings, QrCode, QrCodeProps, QueueSheet, RefusedCard, RemoteAccessDialog, RemoteAccessOptions, RemoteAccessPairing, RemoteControlSettings, RepositorySettings, RepositoryWorkspace, ResumeSessionDialog, SelectionBar, SessionActivity, SessionActivityView, SessionMcp, SessionMcpSettings, SessionMcpTools, SessionRailDialogs, SessionTranscriptView, SettingsMenu, SettingsPanelHost, TemplateSettings, ThreadView, Timeline, ToolCard, ToolRendererBoundary, TopBar, Transcript, TrustedDeviceList, TrustedDeviceListView, TrustedDeviceListViewProps, TunnelSettings, WelcomePanel, addComposerFiles, appearedFaces, hostKeyFor, isQuickTunnel, nestedToolCard, readComposerFiles, sessionActivity, useNewSessionActions, useSessionRail };

package/dist/views.mjs

@@ -1,4 +1,5 @@
 import { ToolRendererBoundary } from "./web/lib/ToolRendererBoundary.mjs";
+import { HomePage, HomeView } from "./web/components/HomePage.mjs";
 import { MascotMark } from "./web/components/MascotMark.mjs";
 import { PluginPage } from "./web/components/PluginPage.mjs";
 import { PluginSurface } from "./web/components/PluginSurface.mjs";
@@ -53,4 +54,4 @@ import { SettingsMenu } from "./web/features/settings/SettingsMenu.mjs";
 import { RepositoryWorkspace } from "./web/features/settings/RepositoryWorkspace.mjs";
 import { SettingsPanelHost } from "./web/features/settings/SettingsPanelHost.mjs";
 import { TopBar } from "./web/features/status/TopBar.mjs";
-export { ActivityDock, AppearanceSettings, CommandPalette, Composer, ComposerPrompt, ContextItemDialog, ContextPanel, ContextPanelView, ContributedSettings, DevProxyTargets, DialogOverlay, DockTabs, DormantPanel, HostsSettings, ImageSettings, LoginFlowDialog, METHOD_LABEL, MascotMark, MentionPreviewAsset, MentionPreviews, MessageMarkdown, ModelPopup, NewSessionDialog, NotificationSettings, PairedDeviceList, PairingApprovalDialog, PluginPage, PluginSettings, PluginSurface, ProviderSettings, QrCode, QueueSheet, RefusedCard, RemoteAccessDialog, RemoteAccessOptions, RemoteAccessPairing, RemoteControlSettings, RepositorySettings, RepositoryWorkspace, ResumeSessionDialog, SelectionBar, SessionActivity, SessionMcp, SessionMcpSettings, SessionMcpTools, SessionRailDialogs, SessionTranscriptView, SettingsMenu, SettingsPanelHost, TemplateSettings, ThreadView, Timeline, ToolCard, ToolRendererBoundary, TopBar, Transcript, TrustedDeviceList, TrustedDeviceListView, TunnelSettings, WelcomePanel, addComposerFiles, appearedFaces, hostKeyFor, isQuickTunnel, nestedToolCard, readComposerFiles, sessionActivity, useNewSessionActions, useSessionRail };
+export { ActivityDock, AppearanceSettings, CommandPalette, Composer, ComposerPrompt, ContextItemDialog, ContextPanel, ContextPanelView, ContributedSettings, DevProxyTargets, DialogOverlay, DockTabs, DormantPanel, HomePage, HomeView, HostsSettings, ImageSettings, LoginFlowDialog, METHOD_LABEL, MascotMark, MentionPreviewAsset, MentionPreviews, MessageMarkdown, ModelPopup, NewSessionDialog, NotificationSettings, PairedDeviceList, PairingApprovalDialog, PluginPage, PluginSettings, PluginSurface, ProviderSettings, QrCode, QueueSheet, RefusedCard, RemoteAccessDialog, RemoteAccessOptions, RemoteAccessPairing, RemoteControlSettings, RepositorySettings, RepositoryWorkspace, ResumeSessionDialog, SelectionBar, SessionActivity, SessionMcp, SessionMcpSettings, SessionMcpTools, SessionRailDialogs, SessionTranscriptView, SettingsMenu, SettingsPanelHost, TemplateSettings, ThreadView, Timeline, ToolCard, ToolRendererBoundary, TopBar, Transcript, TrustedDeviceList, TrustedDeviceListView, TunnelSettings, WelcomePanel, addComposerFiles, appearedFaces, hostKeyFor, isQuickTunnel, nestedToolCard, readComposerFiles, sessionActivity, useNewSessionActions, useSessionRail };

package/dist/web/components/HomePage.cjs

@@ -0,0 +1,80 @@
+const require_pluginRegistry = require("../lib/pluginRegistry.cjs");
+const require_ToolRendererBoundary = require("../lib/ToolRendererBoundary.cjs");
+const require_usePluginSlotProps = require("../stores/usePluginSlotProps.cjs");
+let react = require("react");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/web/components/HomePage.tsx
+/** Home's frame: a 2/3 main column and a 1/3 side column on wide screens, stacked below that. */
+function HomeView({ main, side, onShowSessions, navigationToggle = "mobile" }) {
+	const empty = main.length === 0 && side.length === 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		"aria-label": "Home",
+		"data-testid": "home-page",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-po-bg font-sans text-base text-po-text",
+		children: [onShowSessions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `shrink-0 px-3 pt-2 ${navigationToggle === "mobile" ? "md:hidden" : ""}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				variant: "ghost",
+				size: "icon-md",
+				"data-testid": "mobile-sessions-open",
+				title: "Show sessions",
+				"aria-label": "Show sessions",
+				onClick: onShowSessions,
+				className: "text-po-dim",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.FolderIcon, { className: "size-4" })
+			})
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 md:px-8 md:py-8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "text-2xl font-semibold text-po-hi",
+				children: "Home"
+			}), empty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.EmptyState, {
+				title: "Nothing on Home yet",
+				description: "Apps you add show up here."
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-1 items-start gap-4 xl:grid-cols-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-testid": "home-main",
+					className: `flex min-w-0 flex-col gap-4 ${side.length > 0 ? "xl:col-span-2" : "xl:col-span-3"}`,
+					children: main
+				}), side.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-testid": "home-side",
+					className: "flex min-w-0 flex-col gap-4",
+					children: side
+				}) : null]
+			})]
+		})]
+	});
+}
+/**
+* The Home screen at `/`: every global plugin's `home-apps` card. A card asks for the narrow
+* column with `data: { column: 'side' }`; each renders behind its own boundary.
+*/
+function HomePage({ onShowSessions, navigationToggle }) {
+	const props = require_usePluginSlotProps.usePluginSlotProps(null);
+	const main = [];
+	const side = [];
+	for (const fill of require_pluginRegistry.globalSlotFills(require_pluginRegistry.HOST_SLOTS.homeApps)) {
+		const component = fill.component;
+		if (component === void 0) continue;
+		const key = `${fill.pluginId}:${fill.id}`;
+		const card = (0, react.createElement)(require_ToolRendererBoundary.ToolRendererBoundary, {
+			key,
+			toolName: key,
+			children: (failed) => failed ? null : (0, react.createElement)(component, props)
+		});
+		(fill.data?.column === "side" ? side : main).push(card);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HomeView, {
+		main,
+		side,
+		...onShowSessions === void 0 ? {} : { onShowSessions },
+		...navigationToggle === void 0 ? {} : { navigationToggle }
+	});
+}
+//#endregion
+exports.HomePage = HomePage;
+exports.HomeView = HomeView;
+
+//# sourceMappingURL=HomePage.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.cjs","names":["Button","FolderIcon","EmptyState","usePluginSlotProps","globalSlotFills","HOST_SLOTS","createElement","ToolRendererBoundary"],"sources":["../../../src/web/components/HomePage.tsx"],"sourcesContent":["import { Button, EmptyState, FolderIcon } from '@agimon-ai/po-web-components';\nimport { createElement, type ReactNode } from 'react';\n\nimport { globalSlotFills, HOST_SLOTS } from '../lib/pluginRegistry';\nimport { ToolRendererBoundary } from '../lib/ToolRendererBoundary';\nimport { usePluginSlotProps } from '../stores/usePluginSlotProps';\n\nexport interface HomeViewProps {\n  /** Cards for the wide column, in slot order. */\n  main: readonly ReactNode[];\n  /** Cards for the narrow column; the column is left out when there are none. */\n  side: readonly ReactNode[];\n  onShowSessions?: () => void;\n  navigationToggle?: 'mobile' | 'always';\n}\n\n/** Home's frame: a 2/3 main column and a 1/3 side column on wide screens, stacked below that. */\nexport function HomeView({ main, side, onShowSessions, navigationToggle = 'mobile' }: HomeViewProps) {\n  const empty = main.length === 0 && side.length === 0;\n  return (\n    <section\n      aria-label=\"Home\"\n      data-testid=\"home-page\"\n      className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-po-bg font-sans text-base text-po-text\"\n    >\n      {onShowSessions ? (\n        <div className={`shrink-0 px-3 pt-2 ${navigationToggle === 'mobile' ? 'md:hidden' : ''}`}>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-md\"\n            data-testid=\"mobile-sessions-open\"\n            title=\"Show sessions\"\n            aria-label=\"Show sessions\"\n            onClick={onShowSessions}\n            className=\"text-po-dim\"\n          >\n            <FolderIcon className=\"size-4\" />\n          </Button>\n        </div>\n      ) : null}\n      <div className=\"mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 md:px-8 md:py-8\">\n        <h1 className=\"text-2xl font-semibold text-po-hi\">Home</h1>\n        {empty ? (\n          <EmptyState title=\"Nothing on Home yet\" description=\"Apps you add show up here.\" />\n        ) : (\n          <div className=\"grid grid-cols-1 items-start gap-4 xl:grid-cols-3\">\n            <div\n              data-testid=\"home-main\"\n              className={`flex min-w-0 flex-col gap-4 ${side.length > 0 ? 'xl:col-span-2' : 'xl:col-span-3'}`}\n            >\n              {main}\n            </div>\n            {side.length > 0 ? (\n              <div data-testid=\"home-side\" className=\"flex min-w-0 flex-col gap-4\">\n                {side}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n/**\n * The Home screen at `/`: every global plugin's `home-apps` card. A card asks for the narrow\n * column with `data: { column: 'side' }`; each renders behind its own boundary.\n */\nexport function HomePage({\n  onShowSessions,\n  navigationToggle,\n}: {\n  onShowSessions?: () => void;\n  navigationToggle?: 'mobile' | 'always';\n}) {\n  const props = usePluginSlotProps(null);\n  const main: ReactNode[] = [];\n  const side: ReactNode[] = [];\n  for (const fill of globalSlotFills(HOST_SLOTS.homeApps)) {\n    const component = fill.component;\n    if (component === undefined) continue;\n    const key = `${fill.pluginId}:${fill.id}`;\n    const card = createElement(ToolRendererBoundary, {\n      key,\n      toolName: key,\n      children: (failed: boolean) => (failed ? null : createElement(component, props)),\n    });\n    const column = (fill.data as { column?: unknown } | undefined)?.column;\n    (column === 'side' ? side : main).push(card);\n  }\n  return (\n    <HomeView\n      main={main}\n      side={side}\n      {...(onShowSessions === undefined ? {} : { onShowSessions })}\n      {...(navigationToggle === undefined ? {} : { navigationToggle })}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,SAAS,EAAE,MAAM,MAAM,gBAAgB,mBAAmB,YAA2B;CACnG,MAAM,QAAQ,KAAK,WAAW,KAAK,KAAK,WAAW;CACnD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACE,cAAW;EACX,eAAY;EACZ,WAAU;EAHZ,UAAA,CAKG,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAW,sBAAsB,qBAAqB,WAAW,cAAc;GAClF,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,6BAAAA,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,OAAM;IACN,cAAW;IACX,SAAS;IACT,WAAU;IAEV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,YAAD,EAAY,WAAU,SAAU,CAAA;GAC1B,CAAA;EACL,CAAA,IACH,MACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IAAoC,UAAA;GAAQ,CAAA,GACzD,QACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,YAAD;IAAY,OAAM;IAAsB,aAAY;GAA8B,CAAA,IAElF,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KACE,eAAY;KACZ,WAAW,+BAA+B,KAAK,SAAS,IAAI,kBAAkB;KAE7E,UAAA;IACE,CAAA,GACJ,KAAK,SAAS,IACb,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,eAAY;KAAY,WAAU;KACpC,UAAA;IACE,CAAA,IACH,IACD;GAEJ,CAAA,CAAA;EACE,CAAA,CAAA;;AAEb;;;;;AAMA,SAAgB,SAAS,EACvB,gBACA,oBAIC;CACD,MAAM,QAAQC,2BAAAA,mBAAmB,IAAI;CACrC,MAAM,OAAoB,CAAC;CAC3B,MAAM,OAAoB,CAAC;CAC3B,KAAK,MAAM,QAAQC,uBAAAA,gBAAgBC,uBAAAA,WAAW,QAAQ,GAAG;EACvD,MAAM,YAAY,KAAK;EACvB,IAAI,cAAc,KAAA,GAAW;EAC7B,MAAM,MAAM,GAAG,KAAK,SAAS,GAAG,KAAK;EACrC,MAAM,QAAA,GAAOC,MAAAA,cAAAA,CAAcC,6BAAAA,sBAAsB;GAC/C;GACA,UAAU;GACV,WAAW,WAAqB,SAAS,QAAA,GAAOD,MAAAA,cAAAA,CAAc,WAAW,KAAK;EAChF,CAAC;EAED,CADgB,KAAK,MAA2C,WACpD,SAAS,OAAO,KAAA,CAAM,KAAK,IAAI;CAC7C;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACQ;EACA;EACN,GAAK,mBAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,eAAe;EAC1D,GAAK,qBAAqB,KAAA,IAAY,CAAC,IAAI,EAAE,iBAAiB;CAC/D,CAAA;AAEL"}

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

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/web/components/HomePage.d.ts
+export interface HomeViewProps {
+  /** Cards for the wide column, in slot order. */
+  main: readonly ReactNode[];
+  /** Cards for the narrow column; the column is left out when there are none. */
+  side: readonly ReactNode[];
+  onShowSessions?: () => void;
+  navigationToggle?: 'mobile' | 'always';
+}
+/** Home's frame: a 2/3 main column and a 1/3 side column on wide screens, stacked below that. */
+export declare function HomeView({ main, side, onShowSessions, navigationToggle }: HomeViewProps): import("react").JSX.Element;
+/**
+ * The Home screen at `/`: every global plugin's `home-apps` card. A card asks for the narrow
+ * column with `data: { column: 'side' }`; each renders behind its own boundary.
+ */
+export declare function HomePage({ onShowSessions, navigationToggle }: {
+  onShowSessions?: () => void;
+  navigationToggle?: 'mobile' | 'always';
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=HomePage.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.d.mts","names":[],"sources":["../../../src/web/components/HomePage.tsx"],"mappings":";;iBAOiB;;EAEf,eAAe;;EAEf,eAAe;EACf;EACA;;;wBAIc,WAAW,MAAM,MAAM,gBAAgB,oBAA+B,gCAAa,IAAA;;;;;wBAmDnF,WACd,gBACA;EAEA;EACA;oBACD,IAAA"}

package/dist/web/components/HomePage.mjs

@@ -0,0 +1,79 @@
+import { HOST_SLOTS, globalSlotFills } from "../lib/pluginRegistry.mjs";
+import { ToolRendererBoundary } from "../lib/ToolRendererBoundary.mjs";
+import { usePluginSlotProps } from "../stores/usePluginSlotProps.mjs";
+import { createElement } from "react";
+import { Button, EmptyState, FolderIcon } from "@agimon-ai/po-web-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/web/components/HomePage.tsx
+/** Home's frame: a 2/3 main column and a 1/3 side column on wide screens, stacked below that. */
+function HomeView({ main, side, onShowSessions, navigationToggle = "mobile" }) {
+	const empty = main.length === 0 && side.length === 0;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Home",
+		"data-testid": "home-page",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-po-bg font-sans text-base text-po-text",
+		children: [onShowSessions ? /* @__PURE__ */ jsx("div", {
+			className: `shrink-0 px-3 pt-2 ${navigationToggle === "mobile" ? "md:hidden" : ""}`,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-md",
+				"data-testid": "mobile-sessions-open",
+				title: "Show sessions",
+				"aria-label": "Show sessions",
+				onClick: onShowSessions,
+				className: "text-po-dim",
+				children: /* @__PURE__ */ jsx(FolderIcon, { className: "size-4" })
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 md:px-8 md:py-8",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-semibold text-po-hi",
+				children: "Home"
+			}), empty ? /* @__PURE__ */ jsx(EmptyState, {
+				title: "Nothing on Home yet",
+				description: "Apps you add show up here."
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 items-start gap-4 xl:grid-cols-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-testid": "home-main",
+					className: `flex min-w-0 flex-col gap-4 ${side.length > 0 ? "xl:col-span-2" : "xl:col-span-3"}`,
+					children: main
+				}), side.length > 0 ? /* @__PURE__ */ jsx("div", {
+					"data-testid": "home-side",
+					className: "flex min-w-0 flex-col gap-4",
+					children: side
+				}) : null]
+			})]
+		})]
+	});
+}
+/**
+* The Home screen at `/`: every global plugin's `home-apps` card. A card asks for the narrow
+* column with `data: { column: 'side' }`; each renders behind its own boundary.
+*/
+function HomePage({ onShowSessions, navigationToggle }) {
+	const props = usePluginSlotProps(null);
+	const main = [];
+	const side = [];
+	for (const fill of globalSlotFills(HOST_SLOTS.homeApps)) {
+		const component = fill.component;
+		if (component === void 0) continue;
+		const key = `${fill.pluginId}:${fill.id}`;
+		const card = createElement(ToolRendererBoundary, {
+			key,
+			toolName: key,
+			children: (failed) => failed ? null : createElement(component, props)
+		});
+		(fill.data?.column === "side" ? side : main).push(card);
+	}
+	return /* @__PURE__ */ jsx(HomeView, {
+		main,
+		side,
+		...onShowSessions === void 0 ? {} : { onShowSessions },
+		...navigationToggle === void 0 ? {} : { navigationToggle }
+	});
+}
+//#endregion
+export { HomePage, HomeView };
+
+//# sourceMappingURL=HomePage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.mjs","names":[],"sources":["../../../src/web/components/HomePage.tsx"],"sourcesContent":["import { Button, EmptyState, FolderIcon } from '@agimon-ai/po-web-components';\nimport { createElement, type ReactNode } from 'react';\n\nimport { globalSlotFills, HOST_SLOTS } from '../lib/pluginRegistry';\nimport { ToolRendererBoundary } from '../lib/ToolRendererBoundary';\nimport { usePluginSlotProps } from '../stores/usePluginSlotProps';\n\nexport interface HomeViewProps {\n  /** Cards for the wide column, in slot order. */\n  main: readonly ReactNode[];\n  /** Cards for the narrow column; the column is left out when there are none. */\n  side: readonly ReactNode[];\n  onShowSessions?: () => void;\n  navigationToggle?: 'mobile' | 'always';\n}\n\n/** Home's frame: a 2/3 main column and a 1/3 side column on wide screens, stacked below that. */\nexport function HomeView({ main, side, onShowSessions, navigationToggle = 'mobile' }: HomeViewProps) {\n  const empty = main.length === 0 && side.length === 0;\n  return (\n    <section\n      aria-label=\"Home\"\n      data-testid=\"home-page\"\n      className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-po-bg font-sans text-base text-po-text\"\n    >\n      {onShowSessions ? (\n        <div className={`shrink-0 px-3 pt-2 ${navigationToggle === 'mobile' ? 'md:hidden' : ''}`}>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-md\"\n            data-testid=\"mobile-sessions-open\"\n            title=\"Show sessions\"\n            aria-label=\"Show sessions\"\n            onClick={onShowSessions}\n            className=\"text-po-dim\"\n          >\n            <FolderIcon className=\"size-4\" />\n          </Button>\n        </div>\n      ) : null}\n      <div className=\"mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 md:px-8 md:py-8\">\n        <h1 className=\"text-2xl font-semibold text-po-hi\">Home</h1>\n        {empty ? (\n          <EmptyState title=\"Nothing on Home yet\" description=\"Apps you add show up here.\" />\n        ) : (\n          <div className=\"grid grid-cols-1 items-start gap-4 xl:grid-cols-3\">\n            <div\n              data-testid=\"home-main\"\n              className={`flex min-w-0 flex-col gap-4 ${side.length > 0 ? 'xl:col-span-2' : 'xl:col-span-3'}`}\n            >\n              {main}\n            </div>\n            {side.length > 0 ? (\n              <div data-testid=\"home-side\" className=\"flex min-w-0 flex-col gap-4\">\n                {side}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n/**\n * The Home screen at `/`: every global plugin's `home-apps` card. A card asks for the narrow\n * column with `data: { column: 'side' }`; each renders behind its own boundary.\n */\nexport function HomePage({\n  onShowSessions,\n  navigationToggle,\n}: {\n  onShowSessions?: () => void;\n  navigationToggle?: 'mobile' | 'always';\n}) {\n  const props = usePluginSlotProps(null);\n  const main: ReactNode[] = [];\n  const side: ReactNode[] = [];\n  for (const fill of globalSlotFills(HOST_SLOTS.homeApps)) {\n    const component = fill.component;\n    if (component === undefined) continue;\n    const key = `${fill.pluginId}:${fill.id}`;\n    const card = createElement(ToolRendererBoundary, {\n      key,\n      toolName: key,\n      children: (failed: boolean) => (failed ? null : createElement(component, props)),\n    });\n    const column = (fill.data as { column?: unknown } | undefined)?.column;\n    (column === 'side' ? side : main).push(card);\n  }\n  return (\n    <HomeView\n      main={main}\n      side={side}\n      {...(onShowSessions === undefined ? {} : { onShowSessions })}\n      {...(navigationToggle === undefined ? {} : { navigationToggle })}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,SAAS,EAAE,MAAM,MAAM,gBAAgB,mBAAmB,YAA2B;CACnG,MAAM,QAAQ,KAAK,WAAW,KAAK,KAAK,WAAW;CACnD,OACE,qBAAC,WAAD;EACE,cAAW;EACX,eAAY;EACZ,WAAU;EAHZ,UAAA,CAKG,iBACC,oBAAC,OAAD;GAAK,WAAW,sBAAsB,qBAAqB,WAAW,cAAc;GAClF,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,OAAM;IACN,cAAW;IACX,SAAS;IACT,WAAU;IAEV,UAAA,oBAAC,YAAD,EAAY,WAAU,SAAU,CAAA;GAC1B,CAAA;EACL,CAAA,IACH,MACJ,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,MAAD;IAAI,WAAU;IAAoC,UAAA;GAAQ,CAAA,GACzD,QACC,oBAAC,YAAD;IAAY,OAAM;IAAsB,aAAY;GAA8B,CAAA,IAElF,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KACE,eAAY;KACZ,WAAW,+BAA+B,KAAK,SAAS,IAAI,kBAAkB;KAE7E,UAAA;IACE,CAAA,GACJ,KAAK,SAAS,IACb,oBAAC,OAAD;KAAK,eAAY;KAAY,WAAU;KACpC,UAAA;IACE,CAAA,IACH,IACD;GAEJ,CAAA,CAAA;EACE,CAAA,CAAA;;AAEb;;;;;AAMA,SAAgB,SAAS,EACvB,gBACA,oBAIC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,OAAoB,CAAC;CAC3B,MAAM,OAAoB,CAAC;CAC3B,KAAK,MAAM,QAAQ,gBAAgB,WAAW,QAAQ,GAAG;EACvD,MAAM,YAAY,KAAK;EACvB,IAAI,cAAc,KAAA,GAAW;EAC7B,MAAM,MAAM,GAAG,KAAK,SAAS,GAAG,KAAK;EACrC,MAAM,OAAO,cAAc,sBAAsB;GAC/C;GACA,UAAU;GACV,WAAW,WAAqB,SAAS,OAAO,cAAc,WAAW,KAAK;EAChF,CAAC;EAED,CADgB,KAAK,MAA2C,WACpD,SAAS,OAAO,KAAA,CAAM,KAAK,IAAI;CAC7C;CACA,OACE,oBAAC,UAAD;EACQ;EACA;EACN,GAAK,mBAAmB,KAAA,IAAY,CAAC,IAAI,EAAE,eAAe;EAC1D,GAAK,qBAAqB,KAAA,IAAY,CAAC,IAAI,EAAE,iBAAiB;CAC/D,CAAA;AAEL"}

package/dist/web/components/PluginPage.cjs

@@ -1,8 +1,8 @@
 const require_pluginRegistry = require("../lib/pluginRegistry.cjs");
 const require_usePluginSlotProps = require("../stores/usePluginSlotProps.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");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/components/PluginPage.tsx
 /**
 * The plugin page at `/page/<pageId>`: the `page` fill with that id, filling the main

package/dist/web/components/PluginPage.mjs

@@ -1,8 +1,8 @@
 import { HOST_SLOTS, slotFills } from "../lib/pluginRegistry.mjs";
 import { usePluginSlotProps } from "../stores/usePluginSlotProps.mjs";
 import { createElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, EmptyState, FolderIcon } from "@agimon-ai/po-web-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/components/PluginPage.tsx
 /**
 * The plugin page at `/page/<pageId>`: the `page` fill with that id, filling the main

package/dist/web/components/QrCode.cjs

@@ -1,6 +1,6 @@
 const require_qrMatrix = require("../lib/qrMatrix.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/components/QrCode.tsx
 /** Modules of white space a scanner needs around the code, per the QR spec. */
 const QUIET_ZONE = 4;

package/dist/web/components/QrCode.mjs

@@ -1,6 +1,6 @@
 import { qrMatrix } from "../lib/qrMatrix.mjs";
-import { jsx } from "react/jsx-runtime";
 import { cn } from "@agimon-ai/po-web-components";
+import { jsx } from "react/jsx-runtime";
 //#region src/web/components/QrCode.tsx
 /** Modules of white space a scanner needs around the code, per the QR spec. */
 const QUIET_ZONE = 4;

package/dist/web/components/SessionMcp.cjs

@@ -1,7 +1,7 @@
 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");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/components/SessionMcp.tsx
 const TONES = {
 	running: "running",

package/dist/web/components/SessionMcp.mjs

@@ -1,7 +1,7 @@
 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";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/components/SessionMcp.tsx
 const TONES = {
 	running: "running",

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

@@ -7,8 +7,8 @@ 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");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/components/Story.fixture.tsx
 /** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */
 function mockStoryRequests(responses = {}) {

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

@@ -7,8 +7,8 @@ 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";
+import { jsx } from "react/jsx-runtime";
 //#region src/web/components/Story.fixture.tsx
 /** Only imported by stories. Unknown requests fail closed instead of reaching a real hub. */
 function mockStoryRequests(responses = {}) {

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

@@ -11,8 +11,8 @@ const require_ContextPanel = require("./ContextPanel.cjs");
 const require_DockTabs = require("./DockTabs.cjs");
 let react = require("react");
 let _tanstack_react_store = require("@tanstack/react-store");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/features/activity/ActivityDock.tsx
 /** How long a face that just appeared keeps its tint before it fades. */
 const ATTENTION_MS = 2400;

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

@@ -11,8 +11,8 @@ import { ContextPanel } from "./ContextPanel.mjs";
 import { DockTabs } from "./DockTabs.mjs";
 import { useEffect, useRef, useState } from "react";
 import { useStore } from "@tanstack/react-store";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ActivityIcon, Button, ChevronRightIcon, CloseIcon, Kbd, LightbulbIcon, LoaderIcon, SparklesIcon } from "@agimon-ai/po-web-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/features/activity/ActivityDock.tsx
 /** How long a face that just appeared keeps its tint before it fades. */
 const ATTENTION_MS = 2400;

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

@@ -1,7 +1,7 @@
 const require_contextDetailApi = require("../../lib/contextDetailApi.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");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/features/activity/ContextItemDialog.tsx
 /**
 * What one row of the composition actually is.

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

@@ -1,7 +1,7 @@
 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";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/features/activity/ContextItemDialog.tsx
 /**
 * What one row of the composition actually is.

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

@@ -6,8 +6,8 @@ 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");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/features/activity/ContextPanel.tsx
 function tokens(value) {
 	return value === null ? "-" : `~${value.toLocaleString()}`;

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

@@ -6,8 +6,8 @@ import { PluginSurface } from "../../components/PluginSurface.mjs";
 import { ContextItemDialog } from "./ContextItemDialog.mjs";
 import { useState } from "react";
 import { CONTEXT_TOOL_WARNINGS_STATUS_KEY, parseContextToolWarnings } from "@agimon-ai/po-core/contextApi";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, ChevronRightIcon, EmptyState, Input, SearchIcon } from "@agimon-ai/po-web-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/features/activity/ContextPanel.tsx
 function tokens(value) {
 	return value === null ? "-" : `~${value.toLocaleString()}`;

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

@@ -1,20 +1,21 @@
 let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/features/activity/DockTabs.tsx
-const HOST_TABS = [{
+const ACTIVITY_TAB = {
 	id: "activity",
 	label: "Activity",
 	icon: _agimon_ai_po_web_components.ActivityIcon
-}, {
+};
+const CONTEXT_TAB = {
 	id: "context",
 	label: "Context",
 	icon: _agimon_ai_po_web_components.PuzzleIcon
-}];
-/** Host faces followed by the active session's plugin-contributed faces. */
+};
+/** Activity first, then MCP and the session's plugin-contributed faces, with Context always last. */
 function DockTabs({ contributed = [], mcpEnabled = false, active, onSelect, badges = {}, attention = [] }) {
 	const tabs = [
-		...HOST_TABS,
+		ACTIVITY_TAB,
 		...mcpEnabled ? [{
 			id: "mcp",
 			label: "MCP",
@@ -24,7 +25,8 @@ function DockTabs({ contributed = [], mcpEnabled = false, active, onSelect, badg
 			id,
 			label,
 			icon
-		}))
+		})),
+		CONTEXT_TAB
 	];
 	const listRef = (0, react.useRef)(null);
 	const shown = attention.at(-1) ?? active;

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

@@ -1 +1 @@
-{"version":3,"file":"DockTabs.cjs","names":["ActivityIcon","PuzzleIcon","ServerIcon","useRef","Button","NavTabBadge"],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"sourcesContent":["import type { DockFaceContribution } from '@agimon-ai/po-core/web';\nimport { ActivityIcon, Button, NavTabBadge, PuzzleIcon, ServerIcon } from '@agimon-ai/po-web-components';\nimport { useEffect, useRef } from 'react';\n\nimport type { DockTab } from '../../stores/uiStore';\n\nconst HOST_TABS: readonly (Pick<DockFaceContribution, 'label' | 'icon'> & { id: DockTab })[] = [\n  { id: 'activity', label: 'Activity', icon: ActivityIcon },\n  { id: 'context', label: 'Context', icon: PuzzleIcon },\n];\n\n/** Host faces followed by the active session's plugin-contributed faces. */\nexport function DockTabs({\n  contributed = [],\n  mcpEnabled = false,\n  active,\n  onSelect,\n  badges = {},\n  attention = [],\n}: {\n  contributed?: readonly DockFaceContribution[];\n  mcpEnabled?: boolean;\n  /** The face on screen, which may be a fallback for the saved pick. */\n  active: DockTab;\n  /** The person picked a face. */\n  onSelect: (tab: DockTab) => void;\n  /** Items on a face that want the person's eye, such as unviewed files. Zero shows nothing. */\n  badges?: Readonly<Record<string, number>>;\n  /** Faces that just appeared; they announce themselves with a short tint instead of taking over. */\n  attention?: readonly string[];\n}) {\n  const tabs = [\n    ...HOST_TABS,\n    ...(mcpEnabled ? [{ id: 'mcp', label: 'MCP', icon: ServerIcon }] : []),\n    ...contributed.map(({ id, label, icon }) => ({ id, label, icon })),\n  ];\n  const listRef = useRef<HTMLDivElement>(null);\n  const shown = attention.at(-1) ?? active;\n  // A face that just appeared, or the one picked, is scrolled into the strip so\n  // its tint and underline are seen rather than clipped at the rail's edge.\n  useEffect(() => {\n    const list = listRef.current;\n    const tab = Array.from(list?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? []).find(\n      (element) => element.dataset.testid === `dock-tab-${shown}`,\n    );\n    if (!list || !tab) return;\n    // The list is the tabs' offset parent, so these are positions inside the strip.\n    const left = tab.offsetLeft;\n    const right = left + tab.offsetWidth;\n    const target =\n      left < list.scrollLeft\n        ? left\n        : right > list.scrollLeft + list.clientWidth\n          ? right - list.clientWidth\n          : list.scrollLeft;\n    if (target === list.scrollLeft) return;\n    const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n    list.scrollTo({ left: target, behavior: reduced ? 'auto' : 'smooth' });\n  }, [shown]);\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-label=\"Dock view\"\n      // The track is always there, so a face appearing never shifts the row; a\n      // vertical wheel scrolls the strip sideways.\n      onWheel={(event) => {\n        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;\n      }}\n      className=\"relative flex min-w-0 items-end gap-6 overflow-x-scroll overflow-y-hidden [scrollbar-width:thin]\"\n    >\n      {tabs.map((tab) => {\n        const count = badges[tab.id] ?? 0;\n        return (\n          <Button\n            key={tab.id}\n            variant=\"ghost\"\n            size=\"xs\"\n            role=\"tab\"\n            aria-selected={tab.id === active}\n            // An icon tab names itself on hover and to assistive tech.\n            aria-label={tab.icon ? tab.label : undefined}\n            title={tab.icon ? tab.label : undefined}\n            data-testid={`dock-tab-${tab.id}`}\n            data-active={tab.id === active}\n            data-attention={attention.includes(tab.id) || undefined}\n            onClick={() => onSelect(tab.id)}\n            className={`h-auto shrink-0 gap-1.5 rounded-none border-b-2 px-0 pb-3 text-base hover:bg-transparent ${\n              tab.id === active\n                ? 'border-po-green font-semibold text-po-hi'\n                : 'border-transparent font-medium text-po-text hover:text-po-text'\n            }`}\n          >\n            {/* The tint fades out through the transition when attention ends; reduced motion just removes it. */}\n            <span\n              className={`-mx-1.5 flex items-center rounded px-1.5 py-0.5 transition-colors duration-700 ${\n                attention.includes(tab.id) ? 'bg-po-tint-green text-po-green' : ''\n              }`}\n            >\n              {tab.icon ? <tab.icon className=\"size-5\" /> : tab.label}\n            </span>\n            {count > 0 ? (\n              <>\n                <NavTabBadge active aria-hidden>\n                  {count}\n                </NavTabBadge>\n                <span className=\"sr-only\">, {count} new</span>\n              </>\n            ) : null}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DockTabs.cjs","names":["ActivityIcon","PuzzleIcon","ServerIcon","useRef","Button","NavTabBadge"],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"sourcesContent":["import type { DockFaceContribution } from '@agimon-ai/po-core/web';\nimport { ActivityIcon, Button, NavTabBadge, PuzzleIcon, ServerIcon } from '@agimon-ai/po-web-components';\nimport { useEffect, useRef } from 'react';\n\nimport type { DockTab } from '../../stores/uiStore';\n\nconst ACTIVITY_TAB = { id: 'activity', label: 'Activity', icon: ActivityIcon } as const;\nconst CONTEXT_TAB = { id: 'context', label: 'Context', icon: PuzzleIcon } as const;\n\n/** Activity first, then MCP and the session's plugin-contributed faces, with Context always last. */\nexport function DockTabs({\n  contributed = [],\n  mcpEnabled = false,\n  active,\n  onSelect,\n  badges = {},\n  attention = [],\n}: {\n  contributed?: readonly DockFaceContribution[];\n  mcpEnabled?: boolean;\n  /** The face on screen, which may be a fallback for the saved pick. */\n  active: DockTab;\n  /** The person picked a face. */\n  onSelect: (tab: DockTab) => void;\n  /** Items on a face that want the person's eye, such as unviewed files. Zero shows nothing. */\n  badges?: Readonly<Record<string, number>>;\n  /** Faces that just appeared; they announce themselves with a short tint instead of taking over. */\n  attention?: readonly string[];\n}) {\n  const tabs: (Pick<DockFaceContribution, 'label' | 'icon'> & { id: DockTab })[] = [\n    ACTIVITY_TAB,\n    ...(mcpEnabled ? [{ id: 'mcp', label: 'MCP', icon: ServerIcon }] : []),\n    ...contributed.map(({ id, label, icon }) => ({ id, label, icon })),\n    CONTEXT_TAB,\n  ];\n  const listRef = useRef<HTMLDivElement>(null);\n  const shown = attention.at(-1) ?? active;\n  // A face that just appeared, or the one picked, is scrolled into the strip so\n  // its tint and underline are seen rather than clipped at the rail's edge.\n  useEffect(() => {\n    const list = listRef.current;\n    const tab = Array.from(list?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? []).find(\n      (element) => element.dataset.testid === `dock-tab-${shown}`,\n    );\n    if (!list || !tab) return;\n    // The list is the tabs' offset parent, so these are positions inside the strip.\n    const left = tab.offsetLeft;\n    const right = left + tab.offsetWidth;\n    const target =\n      left < list.scrollLeft\n        ? left\n        : right > list.scrollLeft + list.clientWidth\n          ? right - list.clientWidth\n          : list.scrollLeft;\n    if (target === list.scrollLeft) return;\n    const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n    list.scrollTo({ left: target, behavior: reduced ? 'auto' : 'smooth' });\n  }, [shown]);\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-label=\"Dock view\"\n      // The track is always there, so a face appearing never shifts the row; a\n      // vertical wheel scrolls the strip sideways.\n      onWheel={(event) => {\n        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;\n      }}\n      className=\"relative flex min-w-0 items-end gap-6 overflow-x-scroll overflow-y-hidden [scrollbar-width:thin]\"\n    >\n      {tabs.map((tab) => {\n        const count = badges[tab.id] ?? 0;\n        return (\n          <Button\n            key={tab.id}\n            variant=\"ghost\"\n            size=\"xs\"\n            role=\"tab\"\n            aria-selected={tab.id === active}\n            // An icon tab names itself on hover and to assistive tech.\n            aria-label={tab.icon ? tab.label : undefined}\n            title={tab.icon ? tab.label : undefined}\n            data-testid={`dock-tab-${tab.id}`}\n            data-active={tab.id === active}\n            data-attention={attention.includes(tab.id) || undefined}\n            onClick={() => onSelect(tab.id)}\n            className={`h-auto shrink-0 gap-1.5 rounded-none border-b-2 px-0 pb-3 text-base hover:bg-transparent ${\n              tab.id === active\n                ? 'border-po-green font-semibold text-po-hi'\n                : 'border-transparent font-medium text-po-text hover:text-po-text'\n            }`}\n          >\n            {/* The tint fades out through the transition when attention ends; reduced motion just removes it. */}\n            <span\n              className={`-mx-1.5 flex items-center rounded px-1.5 py-0.5 transition-colors duration-700 ${\n                attention.includes(tab.id) ? 'bg-po-tint-green text-po-green' : ''\n              }`}\n            >\n              {tab.icon ? <tab.icon className=\"size-5\" /> : tab.label}\n            </span>\n            {count > 0 ? (\n              <>\n                <NavTabBadge active aria-hidden>\n                  {count}\n                </NavTabBadge>\n                <span className=\"sr-only\">, {count} new</span>\n              </>\n            ) : null}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { DockTab } from "../../stores/uiStore.mjs";
 import { DockFaceContribution } from "@agimon-ai/po-core/web";
 //#region src/web/features/activity/DockTabs.d.ts
-/** Host faces followed by the active session's plugin-contributed faces. */
+/** Activity first, then MCP and the session's plugin-contributed faces, with Context always last. */
 export declare function DockTabs({ contributed, mcpEnabled, active, onSelect, badges, attention }: {
   contributed?: readonly DockFaceContribution[];
   mcpEnabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"DockTabs.d.mts","names":[],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"mappings":";;;;wBAYgB,WACd,aACA,YACA,QACA,UACA,QACA;EAEA,uBAAuB;EACvB;;EAEA,QAAQ;;EAER,WAAW,KAAK;;EAEhB,SAAS,SAAS;;EAElB;oBACD,IAAA"}
+{"version":3,"file":"DockTabs.d.mts","names":[],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"mappings":";;;;wBAUgB,WACd,aACA,YACA,QACA,UACA,QACA;EAEA,uBAAuB;EACvB;;EAEA,QAAQ;;EAER,WAAW,KAAK;;EAEhB,SAAS,SAAS;;EAElB;oBACD,IAAA"}

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

@@ -1,20 +1,21 @@
 import { useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ActivityIcon, Button, NavTabBadge, PuzzleIcon, ServerIcon } from "@agimon-ai/po-web-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/features/activity/DockTabs.tsx
-const HOST_TABS = [{
+const ACTIVITY_TAB = {
 	id: "activity",
 	label: "Activity",
 	icon: ActivityIcon
-}, {
+};
+const CONTEXT_TAB = {
 	id: "context",
 	label: "Context",
 	icon: PuzzleIcon
-}];
-/** Host faces followed by the active session's plugin-contributed faces. */
+};
+/** Activity first, then MCP and the session's plugin-contributed faces, with Context always last. */
 function DockTabs({ contributed = [], mcpEnabled = false, active, onSelect, badges = {}, attention = [] }) {
 	const tabs = [
-		...HOST_TABS,
+		ACTIVITY_TAB,
 		...mcpEnabled ? [{
 			id: "mcp",
 			label: "MCP",
@@ -24,7 +25,8 @@ function DockTabs({ contributed = [], mcpEnabled = false, active, onSelect, badg
 			id,
 			label,
 			icon
-		}))
+		})),
+		CONTEXT_TAB
 	];
 	const listRef = useRef(null);
 	const shown = attention.at(-1) ?? active;

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

@@ -1 +1 @@
-{"version":3,"file":"DockTabs.mjs","names":[],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"sourcesContent":["import type { DockFaceContribution } from '@agimon-ai/po-core/web';\nimport { ActivityIcon, Button, NavTabBadge, PuzzleIcon, ServerIcon } from '@agimon-ai/po-web-components';\nimport { useEffect, useRef } from 'react';\n\nimport type { DockTab } from '../../stores/uiStore';\n\nconst HOST_TABS: readonly (Pick<DockFaceContribution, 'label' | 'icon'> & { id: DockTab })[] = [\n  { id: 'activity', label: 'Activity', icon: ActivityIcon },\n  { id: 'context', label: 'Context', icon: PuzzleIcon },\n];\n\n/** Host faces followed by the active session's plugin-contributed faces. */\nexport function DockTabs({\n  contributed = [],\n  mcpEnabled = false,\n  active,\n  onSelect,\n  badges = {},\n  attention = [],\n}: {\n  contributed?: readonly DockFaceContribution[];\n  mcpEnabled?: boolean;\n  /** The face on screen, which may be a fallback for the saved pick. */\n  active: DockTab;\n  /** The person picked a face. */\n  onSelect: (tab: DockTab) => void;\n  /** Items on a face that want the person's eye, such as unviewed files. Zero shows nothing. */\n  badges?: Readonly<Record<string, number>>;\n  /** Faces that just appeared; they announce themselves with a short tint instead of taking over. */\n  attention?: readonly string[];\n}) {\n  const tabs = [\n    ...HOST_TABS,\n    ...(mcpEnabled ? [{ id: 'mcp', label: 'MCP', icon: ServerIcon }] : []),\n    ...contributed.map(({ id, label, icon }) => ({ id, label, icon })),\n  ];\n  const listRef = useRef<HTMLDivElement>(null);\n  const shown = attention.at(-1) ?? active;\n  // A face that just appeared, or the one picked, is scrolled into the strip so\n  // its tint and underline are seen rather than clipped at the rail's edge.\n  useEffect(() => {\n    const list = listRef.current;\n    const tab = Array.from(list?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? []).find(\n      (element) => element.dataset.testid === `dock-tab-${shown}`,\n    );\n    if (!list || !tab) return;\n    // The list is the tabs' offset parent, so these are positions inside the strip.\n    const left = tab.offsetLeft;\n    const right = left + tab.offsetWidth;\n    const target =\n      left < list.scrollLeft\n        ? left\n        : right > list.scrollLeft + list.clientWidth\n          ? right - list.clientWidth\n          : list.scrollLeft;\n    if (target === list.scrollLeft) return;\n    const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n    list.scrollTo({ left: target, behavior: reduced ? 'auto' : 'smooth' });\n  }, [shown]);\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-label=\"Dock view\"\n      // The track is always there, so a face appearing never shifts the row; a\n      // vertical wheel scrolls the strip sideways.\n      onWheel={(event) => {\n        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;\n      }}\n      className=\"relative flex min-w-0 items-end gap-6 overflow-x-scroll overflow-y-hidden [scrollbar-width:thin]\"\n    >\n      {tabs.map((tab) => {\n        const count = badges[tab.id] ?? 0;\n        return (\n          <Button\n            key={tab.id}\n            variant=\"ghost\"\n            size=\"xs\"\n            role=\"tab\"\n            aria-selected={tab.id === active}\n            // An icon tab names itself on hover and to assistive tech.\n            aria-label={tab.icon ? tab.label : undefined}\n            title={tab.icon ? tab.label : undefined}\n            data-testid={`dock-tab-${tab.id}`}\n            data-active={tab.id === active}\n            data-attention={attention.includes(tab.id) || undefined}\n            onClick={() => onSelect(tab.id)}\n            className={`h-auto shrink-0 gap-1.5 rounded-none border-b-2 px-0 pb-3 text-base hover:bg-transparent ${\n              tab.id === active\n                ? 'border-po-green font-semibold text-po-hi'\n                : 'border-transparent font-medium text-po-text hover:text-po-text'\n            }`}\n          >\n            {/* The tint fades out through the transition when attention ends; reduced motion just removes it. */}\n            <span\n              className={`-mx-1.5 flex items-center rounded px-1.5 py-0.5 transition-colors duration-700 ${\n                attention.includes(tab.id) ? 'bg-po-tint-green text-po-green' : ''\n              }`}\n            >\n              {tab.icon ? <tab.icon className=\"size-5\" /> : tab.label}\n            </span>\n            {count > 0 ? (\n              <>\n                <NavTabBadge active aria-hidden>\n                  {count}\n                </NavTabBadge>\n                <span className=\"sr-only\">, {count} new</span>\n              </>\n            ) : null}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,MAAM,YAAyF,CAC7F;CAAE,IAAI;CAAY,OAAO;CAAY,MAAM;AAAa,GACxD;CAAE,IAAI;CAAW,OAAO;CAAW,MAAM;AAAW,CACtD;;AAGA,SAAgB,SAAS,EACvB,cAAc,CAAC,GACf,aAAa,OACb,QACA,UACA,SAAS,CAAC,GACV,YAAY,CAAC,KAYZ;CACD,MAAM,OAAO;EACX,GAAG;EACH,GAAI,aAAa,CAAC;GAAE,IAAI;GAAO,OAAO;GAAO,MAAM;EAAW,CAAC,IAAI,CAAC;EACpE,GAAG,YAAY,KAAK,EAAE,IAAI,OAAO,YAAY;GAAE;GAAI;GAAO;EAAK,EAAE;CACnE;CACA,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK;CAGlC,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,MAAM,MAAM,MAAM,KAAK,MAAM,iBAA8B,gBAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAC/E,YAAY,QAAQ,QAAQ,WAAW,YAAY,OACtD;EACA,IAAI,CAAC,QAAQ,CAAC,KAAK;EAEnB,MAAM,OAAO,IAAI;EACjB,MAAM,QAAQ,OAAO,IAAI;EACzB,MAAM,SACJ,OAAO,KAAK,aACR,OACA,QAAQ,KAAK,aAAa,KAAK,cAC7B,QAAQ,KAAK,cACb,KAAK;EACb,IAAI,WAAW,KAAK,YAAY;EAChC,MAAM,UAAU,WAAW,aAAa,kCAAkC,CAAC,CAAC,YAAY;EACxF,KAAK,SAAS;GAAE,MAAM;GAAQ,UAAU,UAAU,SAAS;EAAS,CAAC;CACvE,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,cAAW;EAGX,UAAU,UAAU;GAClB,IAAI,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,IAAI,MAAM,MAAM,GAAG,MAAM,cAAc,cAAc,MAAM;EAC/F;EACA,WAAU;EAET,UAAA,KAAK,KAAK,QAAQ;GACjB,MAAM,QAAQ,OAAO,IAAI,OAAO;GAChC,OACE,qBAAC,QAAD;IAEE,SAAQ;IACR,MAAK;IACL,MAAK;IACL,iBAAe,IAAI,OAAO;IAE1B,cAAY,IAAI,OAAO,IAAI,QAAQ,KAAA;IACnC,OAAO,IAAI,OAAO,IAAI,QAAQ,KAAA;IAC9B,eAAa,YAAY,IAAI;IAC7B,eAAa,IAAI,OAAO;IACxB,kBAAgB,UAAU,SAAS,IAAI,EAAE,KAAK,KAAA;IAC9C,eAAe,SAAS,IAAI,EAAE;IAC9B,WAAW,4FACT,IAAI,OAAO,SACP,6CACA;IAhBR,UAAA,CAoBE,oBAAC,QAAD;KACE,WAAW,kFACT,UAAU,SAAS,IAAI,EAAE,IAAI,mCAAmC;KAGjE,UAAA,IAAI,OAAO,oBAAC,IAAI,MAAL,EAAU,WAAU,SAAU,CAAA,IAAI,IAAI;IAC9C,CAAA,GACL,QAAQ,IACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD;KAAa,QAAA;KAAO,eAAA;KACjB,UAAA;IACU,CAAA,GACb,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAA0B;MAAG;MAAM;KAAU;IAC7C,CAAA,CAAA,EAAA,CAAA,IACA,IACE;GAlCD,GAAA,IAAI,EAkCH;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"DockTabs.mjs","names":[],"sources":["../../../../src/web/features/activity/DockTabs.tsx"],"sourcesContent":["import type { DockFaceContribution } from '@agimon-ai/po-core/web';\nimport { ActivityIcon, Button, NavTabBadge, PuzzleIcon, ServerIcon } from '@agimon-ai/po-web-components';\nimport { useEffect, useRef } from 'react';\n\nimport type { DockTab } from '../../stores/uiStore';\n\nconst ACTIVITY_TAB = { id: 'activity', label: 'Activity', icon: ActivityIcon } as const;\nconst CONTEXT_TAB = { id: 'context', label: 'Context', icon: PuzzleIcon } as const;\n\n/** Activity first, then MCP and the session's plugin-contributed faces, with Context always last. */\nexport function DockTabs({\n  contributed = [],\n  mcpEnabled = false,\n  active,\n  onSelect,\n  badges = {},\n  attention = [],\n}: {\n  contributed?: readonly DockFaceContribution[];\n  mcpEnabled?: boolean;\n  /** The face on screen, which may be a fallback for the saved pick. */\n  active: DockTab;\n  /** The person picked a face. */\n  onSelect: (tab: DockTab) => void;\n  /** Items on a face that want the person's eye, such as unviewed files. Zero shows nothing. */\n  badges?: Readonly<Record<string, number>>;\n  /** Faces that just appeared; they announce themselves with a short tint instead of taking over. */\n  attention?: readonly string[];\n}) {\n  const tabs: (Pick<DockFaceContribution, 'label' | 'icon'> & { id: DockTab })[] = [\n    ACTIVITY_TAB,\n    ...(mcpEnabled ? [{ id: 'mcp', label: 'MCP', icon: ServerIcon }] : []),\n    ...contributed.map(({ id, label, icon }) => ({ id, label, icon })),\n    CONTEXT_TAB,\n  ];\n  const listRef = useRef<HTMLDivElement>(null);\n  const shown = attention.at(-1) ?? active;\n  // A face that just appeared, or the one picked, is scrolled into the strip so\n  // its tint and underline are seen rather than clipped at the rail's edge.\n  useEffect(() => {\n    const list = listRef.current;\n    const tab = Array.from(list?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? []).find(\n      (element) => element.dataset.testid === `dock-tab-${shown}`,\n    );\n    if (!list || !tab) return;\n    // The list is the tabs' offset parent, so these are positions inside the strip.\n    const left = tab.offsetLeft;\n    const right = left + tab.offsetWidth;\n    const target =\n      left < list.scrollLeft\n        ? left\n        : right > list.scrollLeft + list.clientWidth\n          ? right - list.clientWidth\n          : list.scrollLeft;\n    if (target === list.scrollLeft) return;\n    const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n    list.scrollTo({ left: target, behavior: reduced ? 'auto' : 'smooth' });\n  }, [shown]);\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-label=\"Dock view\"\n      // The track is always there, so a face appearing never shifts the row; a\n      // vertical wheel scrolls the strip sideways.\n      onWheel={(event) => {\n        if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;\n      }}\n      className=\"relative flex min-w-0 items-end gap-6 overflow-x-scroll overflow-y-hidden [scrollbar-width:thin]\"\n    >\n      {tabs.map((tab) => {\n        const count = badges[tab.id] ?? 0;\n        return (\n          <Button\n            key={tab.id}\n            variant=\"ghost\"\n            size=\"xs\"\n            role=\"tab\"\n            aria-selected={tab.id === active}\n            // An icon tab names itself on hover and to assistive tech.\n            aria-label={tab.icon ? tab.label : undefined}\n            title={tab.icon ? tab.label : undefined}\n            data-testid={`dock-tab-${tab.id}`}\n            data-active={tab.id === active}\n            data-attention={attention.includes(tab.id) || undefined}\n            onClick={() => onSelect(tab.id)}\n            className={`h-auto shrink-0 gap-1.5 rounded-none border-b-2 px-0 pb-3 text-base hover:bg-transparent ${\n              tab.id === active\n                ? 'border-po-green font-semibold text-po-hi'\n                : 'border-transparent font-medium text-po-text hover:text-po-text'\n            }`}\n          >\n            {/* The tint fades out through the transition when attention ends; reduced motion just removes it. */}\n            <span\n              className={`-mx-1.5 flex items-center rounded px-1.5 py-0.5 transition-colors duration-700 ${\n                attention.includes(tab.id) ? 'bg-po-tint-green text-po-green' : ''\n              }`}\n            >\n              {tab.icon ? <tab.icon className=\"size-5\" /> : tab.label}\n            </span>\n            {count > 0 ? (\n              <>\n                <NavTabBadge active aria-hidden>\n                  {count}\n                </NavTabBadge>\n                <span className=\"sr-only\">, {count} new</span>\n              </>\n            ) : null}\n          </Button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,MAAM,eAAe;CAAE,IAAI;CAAY,OAAO;CAAY,MAAM;AAAa;AAC7E,MAAM,cAAc;CAAE,IAAI;CAAW,OAAO;CAAW,MAAM;AAAW;;AAGxE,SAAgB,SAAS,EACvB,cAAc,CAAC,GACf,aAAa,OACb,QACA,UACA,SAAS,CAAC,GACV,YAAY,CAAC,KAYZ;CACD,MAAM,OAA2E;EAC/E;EACA,GAAI,aAAa,CAAC;GAAE,IAAI;GAAO,OAAO;GAAO,MAAM;EAAW,CAAC,IAAI,CAAC;EACpE,GAAG,YAAY,KAAK,EAAE,IAAI,OAAO,YAAY;GAAE;GAAI;GAAO;EAAK,EAAE;EACjE;CACF;CACA,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK;CAGlC,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,MAAM,MAAM,MAAM,KAAK,MAAM,iBAA8B,gBAAc,KAAK,CAAC,CAAC,CAAC,CAAC,MAC/E,YAAY,QAAQ,QAAQ,WAAW,YAAY,OACtD;EACA,IAAI,CAAC,QAAQ,CAAC,KAAK;EAEnB,MAAM,OAAO,IAAI;EACjB,MAAM,QAAQ,OAAO,IAAI;EACzB,MAAM,SACJ,OAAO,KAAK,aACR,OACA,QAAQ,KAAK,aAAa,KAAK,cAC7B,QAAQ,KAAK,cACb,KAAK;EACb,IAAI,WAAW,KAAK,YAAY;EAChC,MAAM,UAAU,WAAW,aAAa,kCAAkC,CAAC,CAAC,YAAY;EACxF,KAAK,SAAS;GAAE,MAAM;GAAQ,UAAU,UAAU,SAAS;EAAS,CAAC;CACvE,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,cAAW;EAGX,UAAU,UAAU;GAClB,IAAI,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,IAAI,MAAM,MAAM,GAAG,MAAM,cAAc,cAAc,MAAM;EAC/F;EACA,WAAU;EAET,UAAA,KAAK,KAAK,QAAQ;GACjB,MAAM,QAAQ,OAAO,IAAI,OAAO;GAChC,OACE,qBAAC,QAAD;IAEE,SAAQ;IACR,MAAK;IACL,MAAK;IACL,iBAAe,IAAI,OAAO;IAE1B,cAAY,IAAI,OAAO,IAAI,QAAQ,KAAA;IACnC,OAAO,IAAI,OAAO,IAAI,QAAQ,KAAA;IAC9B,eAAa,YAAY,IAAI;IAC7B,eAAa,IAAI,OAAO;IACxB,kBAAgB,UAAU,SAAS,IAAI,EAAE,KAAK,KAAA;IAC9C,eAAe,SAAS,IAAI,EAAE;IAC9B,WAAW,4FACT,IAAI,OAAO,SACP,6CACA;IAhBR,UAAA,CAoBE,oBAAC,QAAD;KACE,WAAW,kFACT,UAAU,SAAS,IAAI,EAAE,IAAI,mCAAmC;KAGjE,UAAA,IAAI,OAAO,oBAAC,IAAI,MAAL,EAAU,WAAU,SAAU,CAAA,IAAI,IAAI;IAC9C,CAAA,GACL,QAAQ,IACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD;KAAa,QAAA;KAAO,eAAA;KACjB,UAAA;IACU,CAAA,GACb,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAA0B;MAAG;MAAM;KAAU;IAC7C,CAAA,CAAA,EAAA,CAAA,IACA,IACE;GAlCD,GAAA,IAAI,EAkCH;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/web/features/connection/RefusedCard.cjs

@@ -1,7 +1,7 @@
 const require_sessionSummary = require("../../lib/sessionSummary.cjs");
 const require_sessionsStore = require("../../stores/sessionsStore.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/web/features/connection/RefusedCard.tsx
 function Detail({ label, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/dist/web/features/connection/RefusedCard.mjs

@@ -1,7 +1,7 @@
 import { abbreviateCwd } from "../../lib/sessionSummary.mjs";
 import { useActiveSessionMeta } from "../../stores/sessionsStore.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, Spinner } from "@agimon-ai/po-web-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/features/connection/RefusedCard.tsx
 function Detail({ label, value }) {
 	return /* @__PURE__ */ jsxs("div", {