@burdenoff/microfe-vibecontrols 2026.613.1 → 2026.618.1

package/dist/pages/ai/AIPage.js

@@ -1,87 +1,90 @@
 import { useVibeNavigate as e } from "../../providers/VibeControlsProvider.js";
 import t from "../../hooks/useCachedInitialData.js";
 import { PageHeader as n } from "../../components/shared/PageHeader.js";
-import { ErrorState as r } from "../../components/shared/ErrorState.js";
-import { EmptyState as i } from "../../components/shared/EmptyState.js";
-import { AI_CORE_PACKAGE as a, AI_PROVIDER_PACKAGES as o } from "../../constants/pluginCatalog.js";
-import { PluginGate as s } from "../../components/shared/PluginGate.js";
-import { RequireAgentReachable as c } from "../../components/shared/RequireAgentReachable.js";
-import { useActiveAgentProfile as l } from "../../hooks/useActiveAgentProfile.js";
+import { ErrorState as ee } from "../../components/shared/ErrorState.js";
+import { EmptyState as r } from "../../components/shared/EmptyState.js";
+import { AI_CORE_PACKAGE as i, AI_PROVIDER_PACKAGES as a } from "../../constants/pluginCatalog.js";
+import { PluginGate as o } from "../../components/shared/PluginGate.js";
+import { RequireAgentReachable as s } from "../../components/shared/RequireAgentReachable.js";
+import { useActiveAgentProfile as c } from "../../hooks/useActiveAgentProfile.js";
 import "../../components/shared/index.js";
+import { VIBE_PERMISSIONS as l } from "../../constants/permissions.js";
 import { PageSkeleton as u } from "../../components/shared/PageSkeleton.js";
-import { PluginHarnessPicker as d } from "../../components/ai/PluginHarnessPicker.js";
-import { AITemplatesTab as f } from "../../components/ai/AITemplatesTab.js";
-import { AIContextsTab as p } from "../../components/ai/AIContextsTab.js";
-import { AIPromptsTab as m } from "../../components/ai/AIPromptsTab.js";
-import { AITasksTab as h } from "../../components/ai/AITasksTab.js";
-import { AIStatsTab as ee } from "../../components/ai/AIStatsTab.js";
-import { AIPlaygroundTab as g } from "../../components/ai/AIPlaygroundTab.js";
-import { BridleConfigPanel as _ } from "../../components/agent-manager/BridleConfigPanel.js";
-import { AIOverviewTab as v } from "../../components/ai/AIOverviewTab.js";
-import { InstructionFilesManager as y } from "../../components/ai/InstructionFilesManager.js";
-import { AISessionsTab as te } from "../../components/ai/AISessionsTab.js";
-import { AIQueueTab as b } from "../../components/ai/AIQueueTab.js";
-import { ClaudeCredentialsCard as x } from "../../components/ai/ClaudeCredentialsCard.js";
-import { AIPlanPanel as S } from "../../components/ai/AIPlanPanel.js";
-import { AIModeToggle as C } from "../../components/ai/AIModeToggle.js";
-import { useCallback as w, useMemo as T, useState as ne } from "react";
-import { useI18n as E } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { BarChart3 as D, FileCode2 as O, FileText as k, LayoutDashboard as A, ListChecks as j, ListTodo as M, MessageSquare as N, MessagesSquare as P, Play as F, ScrollText as I } from "lucide-react";
-import { useMatch as L, useParams as R } from "react-router-dom";
-import { jsx as z, jsxs as B } from "react/jsx-runtime";
-import { MotionPage as V } from "@burdenoff/fe-libs/shared/motion";
+import { PluginHarnessPicker as te } from "../../components/ai/PluginHarnessPicker.js";
+import { AITemplatesTab as ne } from "../../components/ai/AITemplatesTab.js";
+import { AIContextsTab as d } from "../../components/ai/AIContextsTab.js";
+import { AIPromptsTab as re } from "../../components/ai/AIPromptsTab.js";
+import { AITasksTab as f } from "../../components/ai/AITasksTab.js";
+import { AIStatsTab as p } from "../../components/ai/AIStatsTab.js";
+import { AIPlaygroundTab as m } from "../../components/ai/AIPlaygroundTab.js";
+import { BridleConfigPanel as ie } from "../../components/agent-manager/BridleConfigPanel.js";
+import { AIOverviewTab as h } from "../../components/ai/AIOverviewTab.js";
+import { InstructionFilesManager as g } from "../../components/ai/InstructionFilesManager.js";
+import { AISessionsTab as ae } from "../../components/ai/AISessionsTab.js";
+import { AIQueueTab as _ } from "../../components/ai/AIQueueTab.js";
+import { ClaudeCredentialsCard as v } from "../../components/ai/ClaudeCredentialsCard.js";
+import { AIPlanPanel as y } from "../../components/ai/AIPlanPanel.js";
+import { AIModeToggle as b } from "../../components/ai/AIModeToggle.js";
+import { useCallback as x, useMemo as S, useState as oe } from "react";
+import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { BarChart3 as C, FileCode2 as w, FileText as T, LayoutDashboard as E, ListChecks as D, ListTodo as O, MessageSquare as k, MessagesSquare as A, Play as j, ScrollText as M } from "lucide-react";
+import { useMatch as N, useParams as P } from "react-router-dom";
+import { usePermissions as F } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as I, jsxs as L } from "react/jsx-runtime";
+import { AccessDenied as R } from "@burdenoff/fe-libs/shared/components";
+import { MotionPage as z } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/ai/AIPage.tsx
-var H = [
+var B = [
 	{
 		id: "overview",
-		icon: A
+		icon: E
 	},
 	{
 		id: "templates",
-		icon: O
+		icon: w
 	},
 	{
 		id: "contexts",
-		icon: k
+		icon: T
 	},
 	{
 		id: "prompts",
-		icon: N
+		icon: k
 	},
 	{
 		id: "instructions",
-		icon: I
+		icon: M
 	},
 	{
 		id: "sessions",
-		icon: P
+		icon: A
 	},
 	{
 		id: "queue",
-		icon: j
+		icon: D
 	},
 	{
 		id: "tasks",
-		icon: M
+		icon: O
 	},
 	{
 		id: "stats",
-		icon: D
+		icon: C
 	},
 	{
 		id: "playground",
-		icon: F
+		icon: j
 	},
 	{
 		id: "config",
-		icon: A
+		icon: E
 	}
-], U = new Set(H.map((e) => e.id));
-function W() {
-	let { t: D } = E(), { tab: O } = R(), k = L("vibecontrols/ai-tools/plan") ? "plan" : "ai", A = O && U.has(O) ? O : "overview", j = e(), M = w((e, t) => {
-		let n = D(e);
+], V = new Set(B.map((e) => e.id));
+function H() {
+	let { t: C } = se(), { hasPermission: w, isLoading: T } = F(), E = w(l.AGENT_READ), { tab: D } = P(), O = N("vibecontrols/ai-tools/plan") ? "plan" : "ai", k = D && V.has(D) ? D : "overview", j = e(), M = x((e, t) => {
+		let n = C(e);
 		return n === e ? t : n;
-	}, [D]), N = w((e) => {
+	}, [C]), H = x((e) => {
 		switch (e) {
 			case "overview": return M("ai.overview", "Overview");
 			case "templates": return M("ai.templates", "Templates");
@@ -96,127 +99,130 @@ function W() {
 			case "config": return M("ai.config", "Config");
 			default: return e;
 		}
-	}, [M]), { agents: F, loading: I, error: W, refetch: G } = t();
-	W && console.error("[ai] failed to load initial workspace data", W);
-	let K = T(() => F.find((e) => e.isActive && e.tunnelUrl) ?? null, [F]), q = K?.id ?? "", { active: J } = l(K?.id ?? null), Y = T(() => ({
-		id: q,
-		profile: J
-	}), [q, J]), X = w((e) => {
+	}, [M]), { agents: U, loading: W, error: G, refetch: K } = t();
+	G && console.error("[ai] failed to load initial workspace data", G);
+	let q = S(() => U.find((e) => e.isActive && e.tunnelUrl) ?? null, [U]), J = q?.id ?? "", { active: Y } = c(q?.id ?? null), X = S(() => ({
+		id: J,
+		profile: Y
+	}), [J, Y]), ce = x((e) => {
 		j(e === "overview" ? "/ai-tools/ai" : `/ai-tools/ai/${e}`);
-	}, [j]), Z = w((e) => {
+	}, [j]), Z = x((e) => {
 		j(`/ai-tools/sessions/${e}`);
-	}, [j]), re = !!q, [Q, $] = ne(null), ie = w(() => {
+	}, [j]), le = !!J, [Q, $] = oe(null), ue = x(() => {
 		$(M("ai.pluginInstalled", "Plugin installed. Opening AI chat…")), console.info("[ai] orchestrator install completed — navigating to AI chat"), j("/ai");
-	}, [M, j]), ae = w(() => {
+	}, [M, j]), de = x(() => {
 		$(M("ai.harnessUpdated", "Harness updated.")), console.info("[ai] harness picker changed");
 	}, [M]);
-	return /* @__PURE__ */ B(V, {
+	return T ? /* @__PURE__ */ I(z, {
+		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		children: /* @__PURE__ */ I(u, { variant: "detail" })
+	}) : E ? /* @__PURE__ */ L(z, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			/* @__PURE__ */ z(n, {
+			/* @__PURE__ */ I(n, {
 				title: M("nav.ai", "AI"),
 				description: M("ai.description", "Manage AI sessions, prompts, templates, and contexts for your vibecoding workflow")
 			}),
-			/* @__PURE__ */ z("div", {
+			/* @__PURE__ */ I("div", {
 				"data-tour": "vibecontrols-ai-mode-toggle",
-				children: /* @__PURE__ */ z(C, {
-					aiHref: `/ai-tools/ai/${A}`,
-					activeMode: k
+				children: /* @__PURE__ */ I(b, {
+					aiHref: `/ai-tools/ai/${k}`,
+					activeMode: O
 				})
 			}),
-			k === "ai" && /* @__PURE__ */ z("div", {
+			O === "ai" && /* @__PURE__ */ I("div", {
 				className: "border-b border-border-default -mx-4 sm:-mx-6 px-4 sm:px-6",
 				"data-tour": "vibecontrols-ai-tabs-nav",
-				children: /* @__PURE__ */ z("nav", {
+				children: /* @__PURE__ */ I("nav", {
 					className: "flex gap-1 overflow-x-auto pb-1",
 					role: "tablist",
-					children: H.map((e) => {
-						let t = e.icon, n = A === e.id;
-						return /* @__PURE__ */ B("button", {
+					children: B.map((e) => {
+						let t = e.icon, n = k === e.id;
+						return /* @__PURE__ */ L("button", {
 							type: "button",
 							role: "tab",
 							"aria-selected": n,
-							onClick: () => X(e.id),
+							onClick: () => ce(e.id),
 							className: `flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-md border-b-2 px-2.5 py-2 text-xs font-medium transition-colors sm:px-3 sm:py-2.5 sm:text-sm ${n ? "border-action-primary-bg text-action-primary-bg" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-default"}`,
-							children: [/* @__PURE__ */ z(t, { className: "size-3.5 sm:h-4 sm:w-4" }), N(e.id)]
+							children: [/* @__PURE__ */ I(t, { className: "size-3.5 sm:h-4 sm:w-4" }), H(e.id)]
 						}, e.id);
 					})
 				})
 			}),
-			I && F.length === 0 ? /* @__PURE__ */ z(u, {
+			W && U.length === 0 ? /* @__PURE__ */ I(u, {
 				variant: "rows",
 				count: 6
-			}) : W ? /* @__PURE__ */ z(r, {
+			}) : G ? /* @__PURE__ */ I(ee, {
 				title: M("ai.loadFailed.title", "Could not load the AI workspace"),
 				message: M("ai.loadFailed.message", "We couldn't load the AI workspace. Please try again in a moment."),
-				onRetry: G
-			}) : re ? k === "plan" ? /* @__PURE__ */ z(c, {
-				agentId: q,
-				children: /* @__PURE__ */ z(S, {
-					agent: Y,
-					tunnelUrl: K?.tunnelUrl ?? null
+				onRetry: K
+			}) : le ? O === "plan" ? /* @__PURE__ */ I(s, {
+				agentId: J,
+				children: /* @__PURE__ */ I(y, {
+					agent: X,
+					tunnelUrl: q?.tunnelUrl ?? null
 				})
-			}) : /* @__PURE__ */ z(c, {
-				agentId: q,
-				children: /* @__PURE__ */ z("div", {
+			}) : /* @__PURE__ */ I(s, {
+				agentId: J,
+				children: /* @__PURE__ */ I("div", {
 					"data-tour": "vibecontrols-ai-plugin-gate",
-					children: /* @__PURE__ */ z(s, {
-						agentId: q,
-						required: [a],
+					children: /* @__PURE__ */ I(o, {
+						agentId: J,
+						required: [i],
 						mode: "all",
 						eyebrow: M("ai.pluginRequired", "AI plugin required"),
 						title: M("ai.installOrchestrator", "Install the AI orchestrator"),
 						description: M("ai.installOrchestratorDesc", "The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue."),
-						onInstalled: ie,
-						children: /* @__PURE__ */ B("div", {
+						onInstalled: ue,
+						children: /* @__PURE__ */ L("div", {
 							className: "space-y-6",
 							children: [
-								Q && /* @__PURE__ */ z("div", {
+								Q && /* @__PURE__ */ I("div", {
 									role: "status",
 									className: "rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text",
 									children: Q
 								}),
-								/* @__PURE__ */ z(d, {
-									agentId: q,
-									packages: o,
+								/* @__PURE__ */ I(te, {
+									agentId: J,
+									packages: a,
 									title: M("ai.harnessesTitle", "AI harnesses"),
 									description: M("ai.harnessesDesc", "Install and manage the coding-agent harnesses available on this agent. You can install multiple and switch between them per-session."),
-									onChange: ae
+									onChange: de
 								}),
-								/* @__PURE__ */ B("div", { children: [
-									A === "overview" && /* @__PURE__ */ z(v, {
-										agent: Y,
+								/* @__PURE__ */ L("div", { children: [
+									k === "overview" && /* @__PURE__ */ I(h, {
+										agent: X,
 										onNavigateToSession: Z
 									}),
-									A === "templates" && /* @__PURE__ */ z(f, { agentId: q }),
-									A === "contexts" && /* @__PURE__ */ z(p, { agent: Y }),
-									A === "prompts" && /* @__PURE__ */ z(m, { agent: Y }),
-									A === "instructions" && /* @__PURE__ */ z(y, { agentId: q }),
-									A === "sessions" && /* @__PURE__ */ z(te, {
-										agent: Y,
+									k === "templates" && /* @__PURE__ */ I(ne, { agentId: J }),
+									k === "contexts" && /* @__PURE__ */ I(d, { agent: X }),
+									k === "prompts" && /* @__PURE__ */ I(re, { agent: X }),
+									k === "instructions" && /* @__PURE__ */ I(g, { agentId: J }),
+									k === "sessions" && /* @__PURE__ */ I(ae, {
+										agent: X,
 										onNavigateToSession: Z
 									}),
-									A === "queue" && /* @__PURE__ */ z(b, {
-										agent: Y,
+									k === "queue" && /* @__PURE__ */ I(_, {
+										agent: X,
 										onNavigateToSession: Z
 									}),
-									A === "tasks" && /* @__PURE__ */ z(h, {}),
-									A === "stats" && /* @__PURE__ */ z(ee, { agent: Y }),
-									A === "playground" && /* @__PURE__ */ z(g, { agent: Y }),
-									A === "config" && /* @__PURE__ */ B("div", {
+									k === "tasks" && /* @__PURE__ */ I(f, {}),
+									k === "stats" && /* @__PURE__ */ I(p, { agent: X }),
+									k === "playground" && /* @__PURE__ */ I(m, { agent: X }),
+									k === "config" && /* @__PURE__ */ L("div", {
 										className: "space-y-6",
-										children: [/* @__PURE__ */ z(x, { agent: Y }), /* @__PURE__ */ z(_, { agent: Y })]
+										children: [/* @__PURE__ */ I(v, { agent: X }), /* @__PURE__ */ I(ie, { agent: X })]
 									})
 								] })
 							]
 						})
 					})
 				})
-			}) : /* @__PURE__ */ z(i, {
-				icon: /* @__PURE__ */ z(P, { className: "size-8 text-text-secondary" }),
+			}) : /* @__PURE__ */ I(r, {
+				icon: /* @__PURE__ */ I(A, { className: "size-8 text-text-secondary" }),
 				title: M("ai.noActiveAgent", "No active agent available"),
 				description: M("ai.noActiveAgentDescription", "AI features require an active agent with a configured tunnel URL and API key. Add an agent or start an existing one."),
-				action: /* @__PURE__ */ z("button", {
+				action: /* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => j("/agents"),
 					className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm",
@@ -224,9 +230,12 @@ function W() {
 				})
 			})
 		]
+	}) : /* @__PURE__ */ I(R, {
+		title: M("ai.denied.title", "Access Denied"),
+		description: M("ai.denied.description", "You do not have permission to view AI features.")
 	});
 }
 //#endregion
-export { W as AIPage };
+export { H as AIPage };
 
 //# sourceMappingURL=AIPage.js.map

package/dist/pages/ai/AIPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIPage.js","names":[],"sources":["../../../src/pages/ai/AIPage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useMatch, useParams } from 'react-router-dom';\nimport {\n  LayoutDashboard,\n  FileCode2,\n  FileText,\n  MessageSquare,\n  MessagesSquare,\n  ListTodo,\n  ListChecks,\n  BarChart3,\n  Play,\n  ScrollText,\n} from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  PageHeader,\n  EmptyState,\n  ErrorState,\n  PluginGate,\n  RequireAgentReachable,\n} from '@/components/shared';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { AI_CORE_PACKAGE, AI_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\nimport { PluginHarnessPicker } from '@/components/ai/PluginHarnessPicker';\n\nimport { AIOverviewTab } from '@/components/ai/AIOverviewTab';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { InstructionFilesManager } from '@/components/ai/InstructionFilesManager';\nimport { AISessionsTab } from '@/components/ai/AISessionsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIQueueTab } from '@/components/ai/AIQueueTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { ClaudeCredentialsCard } from '@/components/ai/ClaudeCredentialsCard';\nimport { BridleConfigPanel } from '@/components/agent-manager/BridleConfigPanel';\nimport { AIPlanPanel } from '@/components/ai/AIPlanPanel';\nimport { AIModeToggle } from '@/components/ai/AIModeToggle';\n\ntype AIMode = 'plan' | 'ai';\n\ntype AITab =\n  | 'overview'\n  | 'templates'\n  | 'contexts'\n  | 'prompts'\n  | 'instructions'\n  | 'sessions'\n  | 'queue'\n  | 'tasks'\n  | 'stats'\n  | 'playground'\n  | 'config';\n\nconst tabs: { id: AITab; icon: typeof LayoutDashboard }[] = [\n  { id: 'overview', icon: LayoutDashboard },\n  { id: 'templates', icon: FileCode2 },\n  { id: 'contexts', icon: FileText },\n  { id: 'prompts', icon: MessageSquare },\n  { id: 'instructions', icon: ScrollText },\n  { id: 'sessions', icon: MessagesSquare },\n  { id: 'queue', icon: ListChecks },\n  { id: 'tasks', icon: ListTodo },\n  { id: 'stats', icon: BarChart3 },\n  { id: 'playground', icon: Play },\n  { id: 'config', icon: LayoutDashboard },\n];\n\nconst validTabs = new Set<string>(tabs.map((t) => t.id));\n\n/**\n * AI page — tab-based layout for AI / vibecoding features.\n *\n * URL shape:\n *   /ai-tools              → routed to /ai-tools/ai/overview (handled in VibeControlsRoutes).\n *   /ai-tools/plan         → Plan mode (full-bleed plannotator iframe panel).\n *   /ai-tools/ai/:tab      → AI mode (the existing 9 sub-tabs).\n *\n * The mode toggle below `PageHeader` switches between the two without a\n * full route reload — the AIPlanPanel inside Plan mode reuses the same\n * agent context that AI mode already loaded.\n */\nexport function AIPage() {\n  const { t } = useI18n();\n  const { tab: tabParam } = useParams<{ tab?: string }>();\n  const planRouteMatch = useMatch('vibecontrols/ai-tools/plan');\n  const activeMode: AIMode = planRouteMatch ? 'plan' : 'ai';\n  const activeTab: AITab = tabParam && validTabs.has(tabParam) ? (tabParam as AITab) : 'overview';\n  const handleNavigate = useVibeNavigate();\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const tabLabel = useCallback(\n    (tabId: AITab): string => {\n      switch (tabId) {\n        case 'overview':\n          return tr('ai.overview', 'Overview');\n        case 'templates':\n          return tr('ai.templates', 'Templates');\n        case 'contexts':\n          return tr('ai.contexts', 'Contexts');\n        case 'prompts':\n          return tr('ai.prompts', 'Prompts');\n        case 'instructions':\n          return tr('ai.instructions', 'Instructions');\n        case 'sessions':\n          return tr('nav.sessions', 'Sessions');\n        case 'queue':\n          return tr('ai.queue', 'Queue');\n        case 'tasks':\n          return tr('ai.tasks', 'Tasks');\n        case 'stats':\n          return tr('ai.stats', 'Stats');\n        case 'playground':\n          return tr('ai.playground', 'Playground');\n        case 'config':\n          return tr('ai.config', 'Config');\n        default:\n          return tabId;\n      }\n    },\n    [tr]\n  );\n\n  const { agents, loading: agentsLoading, error: agentsError, refetch } = useCachedInitialData();\n\n  // If the initial data query throws (e.g. gateway query-cost limit, network\n  // error, transient federation issue), surface a friendly fallback rather\n  // than the raw GraphQL error. The technical details still go to the console\n  // for debuggability — without PII, since the error message itself never\n  // contains secrets.\n  if (agentsError) {\n    console.error('[ai] failed to load initial workspace data', agentsError);\n  }\n  const activeAgent = useMemo(\n    () => agents.find((agent) => agent.isActive && agent.tunnelUrl) ?? null,\n    [agents]\n  );\n  const agentId = activeAgent?.id ?? '';\n  // AgentRef threads the canonical agent → profile → plugins/data\n  // hierarchy through every aiApi call. Components receive the ref\n  // and construct paths via `agentApiPath(profile, ...)`.\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const switchTab = useCallback(\n    (tab: AITab) => {\n      handleNavigate(tab === 'overview' ? '/ai-tools/ai' : `/ai-tools/ai/${tab}`);\n    },\n    [handleNavigate]\n  );\n\n  const navigateToSession = useCallback(\n    (sessionId: string) => {\n      handleNavigate(`/ai-tools/sessions/${sessionId}`);\n    },\n    [handleNavigate]\n  );\n\n  const hasAgent = !!agentId;\n\n  // Surface install lifecycle for debuggability. PluginGate / PluginHarnessPicker\n  // already render inline error chips, but a console breadcrumb + a top-level\n  // banner helps when the install actually succeeds on the agent but a stale\n  // detection cache hides the success — without this the install button looked\n  // like it silently swallowed errors.\n  const [lastInstallNote, setLastInstallNote] = useState<string | null>(null);\n  // PluginGate fires this only on the unsatisfied → satisfied transition (once\n  // the orchestrator is actually live on the agent). When that happens, route\n  // straight into the AI chat (AgentManagerPage at `/ai`) instead of leaving\n  // the user on a \"Refreshing…\" note that needed a manual reload (G5). No\n  // window.location.reload() — the SPA navigation re-renders the workbench with\n  // the freshly-detected plugin state.\n  const handleInstalled = useCallback(() => {\n    setLastInstallNote(tr('ai.pluginInstalled', 'Plugin installed. Opening AI chat…'));\n    console.info('[ai] orchestrator install completed — navigating to AI chat');\n    handleNavigate('/ai');\n  }, [tr, handleNavigate]);\n  const handleHarnessChange = useCallback(() => {\n    setLastInstallNote(tr('ai.harnessUpdated', 'Harness updated.'));\n\n    console.info('[ai] harness picker changed');\n  }, [tr]);\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      <PageHeader\n        title={tr('nav.ai', 'AI')}\n        description={tr(\n          'ai.description',\n          'Manage AI sessions, prompts, templates, and contexts for your vibecoding workflow'\n        )}\n      />\n\n      {/* Mode pivot — Plan / AI. Sits below PageHeader, above the\n          AI-mode sub-tab strip. Switching to Plan hides the 9 sub-tabs\n          and renders the AIPlanPanel in their place. Stays inside\n          /ai-tools so the active sub-tab survives the toggle. */}\n      {/* AIModeToggle is a custom component that doesn't forward rest props\n          onto a DOM node, so the tour anchor lives on a wrapper <div>. */}\n      <div data-tour=\"vibecontrols-ai-mode-toggle\">\n        <AIModeToggle aiHref={`/ai-tools/ai/${activeTab}`} activeMode={activeMode} />\n      </div>\n\n      {/* AI sub-tab navigation — only rendered in AI mode. */}\n      {activeMode === 'ai' && (\n        <div\n          className=\"border-b border-border-default -mx-4 sm:-mx-6 px-4 sm:px-6\"\n          data-tour=\"vibecontrols-ai-tabs-nav\"\n        >\n          <nav className=\"flex gap-1 overflow-x-auto pb-1\" role=\"tablist\">\n            {tabs.map((tab) => {\n              const Icon = tab.icon;\n              const isActive = activeTab === tab.id;\n              return (\n                <button\n                  type=\"button\"\n                  key={tab.id}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  onClick={() => switchTab(tab.id)}\n                  className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-md border-b-2 px-2.5 py-2 text-xs font-medium transition-colors sm:px-3 sm:py-2.5 sm:text-sm ${\n                    isActive\n                      ? 'border-action-primary-bg text-action-primary-bg'\n                      : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n                  }`}\n                >\n                  <Icon className=\"size-3.5 sm:h-4 sm:w-4\" />\n                  {tabLabel(tab.id)}\n                </button>\n              );\n            })}\n          </nav>\n        </div>\n      )}\n\n      {/* Content */}\n      {agentsLoading && agents.length === 0 ? (\n        <PageSkeleton variant=\"rows\" count={6} />\n      ) : agentsError ? (\n        <ErrorState\n          title={tr('ai.loadFailed.title', 'Could not load the AI workspace')}\n          message={tr(\n            'ai.loadFailed.message',\n            \"We couldn't load the AI workspace. Please try again in a moment.\"\n          )}\n          onRetry={refetch}\n        />\n      ) : !hasAgent ? (\n        <EmptyState\n          icon={<MessagesSquare className=\"size-8 text-text-secondary\" />}\n          title={tr('ai.noActiveAgent', 'No active agent available')}\n          description={tr(\n            'ai.noActiveAgentDescription',\n            'AI features require an active agent with a configured tunnel URL and API key. Add an agent or start an existing one.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => handleNavigate('/agents')}\n              className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n            >\n              {tr('ai.goToAgents', 'Go to Agents')}\n            </button>\n          }\n        />\n      ) : activeMode === 'plan' ? (\n        <RequireAgentReachable agentId={agentId}>\n          <AIPlanPanel agent={agentRef} tunnelUrl={activeAgent?.tunnelUrl ?? null} />\n        </RequireAgentReachable>\n      ) : (\n        <RequireAgentReachable agentId={agentId}>\n          {/* PluginGate is a custom component that doesn't forward rest props\n              onto a DOM node, so the tour anchor lives on a wrapper <div>. */}\n          <div data-tour=\"vibecontrols-ai-plugin-gate\">\n            <PluginGate\n              agentId={agentId}\n              required={[AI_CORE_PACKAGE]}\n              mode=\"all\"\n              eyebrow={tr('ai.pluginRequired', 'AI plugin required')}\n              title={tr('ai.installOrchestrator', 'Install the AI orchestrator')}\n              description={tr(\n                'ai.installOrchestratorDesc',\n                'The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.'\n              )}\n              onInstalled={handleInstalled}\n            >\n              <div className=\"space-y-6\">\n                {lastInstallNote && (\n                  <div\n                    role=\"status\"\n                    className=\"rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\"\n                  >\n                    {lastInstallNote}\n                  </div>\n                )}\n                <PluginHarnessPicker\n                  agentId={agentId}\n                  packages={AI_PROVIDER_PACKAGES}\n                  title={tr('ai.harnessesTitle', 'AI harnesses')}\n                  description={tr(\n                    'ai.harnessesDesc',\n                    'Install and manage the coding-agent harnesses available on this agent. You can install multiple and switch between them per-session.'\n                  )}\n                  onChange={handleHarnessChange}\n                />\n                <div>\n                  {activeTab === 'overview' && (\n                    <AIOverviewTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'templates' && <AITemplatesTab agentId={agentId} />}\n                  {activeTab === 'contexts' && <AIContextsTab agent={agentRef} />}\n                  {activeTab === 'prompts' && <AIPromptsTab agent={agentRef} />}\n                  {activeTab === 'instructions' && <InstructionFilesManager agentId={agentId} />}\n                  {activeTab === 'sessions' && (\n                    <AISessionsTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'queue' && (\n                    <AIQueueTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'tasks' && <AITasksTab />}\n                  {activeTab === 'stats' && <AIStatsTab agent={agentRef} />}\n                  {activeTab === 'playground' && <AIPlaygroundTab agent={agentRef} />}\n                  {activeTab === 'config' && (\n                    <div className=\"space-y-6\">\n                      <ClaudeCredentialsCard agent={agentRef} />\n                      <BridleConfigPanel agent={agentRef} />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </PluginGate>\n          </div>\n        </RequireAgentReachable>\n      )}\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AIPage.js","names":[],"sources":["../../../src/pages/ai/AIPage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useMatch, useParams } from 'react-router-dom';\nimport {\n  LayoutDashboard,\n  FileCode2,\n  FileText,\n  MessageSquare,\n  MessagesSquare,\n  ListTodo,\n  ListChecks,\n  BarChart3,\n  Play,\n  ScrollText,\n} from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n  PageHeader,\n  EmptyState,\n  ErrorState,\n  PluginGate,\n  RequireAgentReachable,\n} from '@/components/shared';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { AI_CORE_PACKAGE, AI_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\nimport { PluginHarnessPicker } from '@/components/ai/PluginHarnessPicker';\n\nimport { AIOverviewTab } from '@/components/ai/AIOverviewTab';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { InstructionFilesManager } from '@/components/ai/InstructionFilesManager';\nimport { AISessionsTab } from '@/components/ai/AISessionsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIQueueTab } from '@/components/ai/AIQueueTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { ClaudeCredentialsCard } from '@/components/ai/ClaudeCredentialsCard';\nimport { BridleConfigPanel } from '@/components/agent-manager/BridleConfigPanel';\nimport { AIPlanPanel } from '@/components/ai/AIPlanPanel';\nimport { AIModeToggle } from '@/components/ai/AIModeToggle';\n\ntype AIMode = 'plan' | 'ai';\n\ntype AITab =\n  | 'overview'\n  | 'templates'\n  | 'contexts'\n  | 'prompts'\n  | 'instructions'\n  | 'sessions'\n  | 'queue'\n  | 'tasks'\n  | 'stats'\n  | 'playground'\n  | 'config';\n\nconst tabs: { id: AITab; icon: typeof LayoutDashboard }[] = [\n  { id: 'overview', icon: LayoutDashboard },\n  { id: 'templates', icon: FileCode2 },\n  { id: 'contexts', icon: FileText },\n  { id: 'prompts', icon: MessageSquare },\n  { id: 'instructions', icon: ScrollText },\n  { id: 'sessions', icon: MessagesSquare },\n  { id: 'queue', icon: ListChecks },\n  { id: 'tasks', icon: ListTodo },\n  { id: 'stats', icon: BarChart3 },\n  { id: 'playground', icon: Play },\n  { id: 'config', icon: LayoutDashboard },\n];\n\nconst validTabs = new Set<string>(tabs.map((t) => t.id));\n\n/**\n * AI page — tab-based layout for AI / vibecoding features.\n *\n * URL shape:\n *   /ai-tools              → routed to /ai-tools/ai/overview (handled in VibeControlsRoutes).\n *   /ai-tools/plan         → Plan mode (full-bleed plannotator iframe panel).\n *   /ai-tools/ai/:tab      → AI mode (the existing 9 sub-tabs).\n *\n * The mode toggle below `PageHeader` switches between the two without a\n * full route reload — the AIPlanPanel inside Plan mode reuses the same\n * agent context that AI mode already loaded.\n */\nexport function AIPage() {\n  const { t } = useI18n();\n  // The AI surface is agent-centric — gate it on `agent:read`, consistent\n  // with AgentsLandingPage (defense-in-depth; the gateway enforces it too).\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canReadAgents = hasPermission(VIBE_PERMISSIONS.AGENT_READ);\n  const { tab: tabParam } = useParams<{ tab?: string }>();\n  const planRouteMatch = useMatch('vibecontrols/ai-tools/plan');\n  const activeMode: AIMode = planRouteMatch ? 'plan' : 'ai';\n  const activeTab: AITab = tabParam && validTabs.has(tabParam) ? (tabParam as AITab) : 'overview';\n  const handleNavigate = useVibeNavigate();\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const tabLabel = useCallback(\n    (tabId: AITab): string => {\n      switch (tabId) {\n        case 'overview':\n          return tr('ai.overview', 'Overview');\n        case 'templates':\n          return tr('ai.templates', 'Templates');\n        case 'contexts':\n          return tr('ai.contexts', 'Contexts');\n        case 'prompts':\n          return tr('ai.prompts', 'Prompts');\n        case 'instructions':\n          return tr('ai.instructions', 'Instructions');\n        case 'sessions':\n          return tr('nav.sessions', 'Sessions');\n        case 'queue':\n          return tr('ai.queue', 'Queue');\n        case 'tasks':\n          return tr('ai.tasks', 'Tasks');\n        case 'stats':\n          return tr('ai.stats', 'Stats');\n        case 'playground':\n          return tr('ai.playground', 'Playground');\n        case 'config':\n          return tr('ai.config', 'Config');\n        default:\n          return tabId;\n      }\n    },\n    [tr]\n  );\n\n  const { agents, loading: agentsLoading, error: agentsError, refetch } = useCachedInitialData();\n\n  // If the initial data query throws (e.g. gateway query-cost limit, network\n  // error, transient federation issue), surface a friendly fallback rather\n  // than the raw GraphQL error. The technical details still go to the console\n  // for debuggability — without PII, since the error message itself never\n  // contains secrets.\n  if (agentsError) {\n    console.error('[ai] failed to load initial workspace data', agentsError);\n  }\n  const activeAgent = useMemo(\n    () => agents.find((agent) => agent.isActive && agent.tunnelUrl) ?? null,\n    [agents]\n  );\n  const agentId = activeAgent?.id ?? '';\n  // AgentRef threads the canonical agent → profile → plugins/data\n  // hierarchy through every aiApi call. Components receive the ref\n  // and construct paths via `agentApiPath(profile, ...)`.\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const switchTab = useCallback(\n    (tab: AITab) => {\n      handleNavigate(tab === 'overview' ? '/ai-tools/ai' : `/ai-tools/ai/${tab}`);\n    },\n    [handleNavigate]\n  );\n\n  const navigateToSession = useCallback(\n    (sessionId: string) => {\n      handleNavigate(`/ai-tools/sessions/${sessionId}`);\n    },\n    [handleNavigate]\n  );\n\n  const hasAgent = !!agentId;\n\n  // Surface install lifecycle for debuggability. PluginGate / PluginHarnessPicker\n  // already render inline error chips, but a console breadcrumb + a top-level\n  // banner helps when the install actually succeeds on the agent but a stale\n  // detection cache hides the success — without this the install button looked\n  // like it silently swallowed errors.\n  const [lastInstallNote, setLastInstallNote] = useState<string | null>(null);\n  // PluginGate fires this only on the unsatisfied → satisfied transition (once\n  // the orchestrator is actually live on the agent). When that happens, route\n  // straight into the AI chat (AgentManagerPage at `/ai`) instead of leaving\n  // the user on a \"Refreshing…\" note that needed a manual reload (G5). No\n  // window.location.reload() — the SPA navigation re-renders the workbench with\n  // the freshly-detected plugin state.\n  const handleInstalled = useCallback(() => {\n    setLastInstallNote(tr('ai.pluginInstalled', 'Plugin installed. Opening AI chat…'));\n    console.info('[ai] orchestrator install completed — navigating to AI chat');\n    handleNavigate('/ai');\n  }, [tr, handleNavigate]);\n  const handleHarnessChange = useCallback(() => {\n    setLastInstallNote(tr('ai.harnessUpdated', 'Harness updated.'));\n\n    console.info('[ai] harness picker changed');\n  }, [tr]);\n\n  if (permissionsLoading) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <PageSkeleton variant=\"detail\" />\n      </MotionPage>\n    );\n  }\n\n  if (!canReadAgents) {\n    return (\n      <AccessDenied\n        title={tr('ai.denied.title', 'Access Denied')}\n        description={tr('ai.denied.description', 'You do not have permission to view AI features.')}\n      />\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      <PageHeader\n        title={tr('nav.ai', 'AI')}\n        description={tr(\n          'ai.description',\n          'Manage AI sessions, prompts, templates, and contexts for your vibecoding workflow'\n        )}\n      />\n\n      {/* Mode pivot — Plan / AI. Sits below PageHeader, above the\n          AI-mode sub-tab strip. Switching to Plan hides the 9 sub-tabs\n          and renders the AIPlanPanel in their place. Stays inside\n          /ai-tools so the active sub-tab survives the toggle. */}\n      {/* AIModeToggle is a custom component that doesn't forward rest props\n          onto a DOM node, so the tour anchor lives on a wrapper <div>. */}\n      <div data-tour=\"vibecontrols-ai-mode-toggle\">\n        <AIModeToggle aiHref={`/ai-tools/ai/${activeTab}`} activeMode={activeMode} />\n      </div>\n\n      {/* AI sub-tab navigation — only rendered in AI mode. */}\n      {activeMode === 'ai' && (\n        <div\n          className=\"border-b border-border-default -mx-4 sm:-mx-6 px-4 sm:px-6\"\n          data-tour=\"vibecontrols-ai-tabs-nav\"\n        >\n          <nav className=\"flex gap-1 overflow-x-auto pb-1\" role=\"tablist\">\n            {tabs.map((tab) => {\n              const Icon = tab.icon;\n              const isActive = activeTab === tab.id;\n              return (\n                <button\n                  type=\"button\"\n                  key={tab.id}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  onClick={() => switchTab(tab.id)}\n                  className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-md border-b-2 px-2.5 py-2 text-xs font-medium transition-colors sm:px-3 sm:py-2.5 sm:text-sm ${\n                    isActive\n                      ? 'border-action-primary-bg text-action-primary-bg'\n                      : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n                  }`}\n                >\n                  <Icon className=\"size-3.5 sm:h-4 sm:w-4\" />\n                  {tabLabel(tab.id)}\n                </button>\n              );\n            })}\n          </nav>\n        </div>\n      )}\n\n      {/* Content */}\n      {agentsLoading && agents.length === 0 ? (\n        <PageSkeleton variant=\"rows\" count={6} />\n      ) : agentsError ? (\n        <ErrorState\n          title={tr('ai.loadFailed.title', 'Could not load the AI workspace')}\n          message={tr(\n            'ai.loadFailed.message',\n            \"We couldn't load the AI workspace. Please try again in a moment.\"\n          )}\n          onRetry={refetch}\n        />\n      ) : !hasAgent ? (\n        <EmptyState\n          icon={<MessagesSquare className=\"size-8 text-text-secondary\" />}\n          title={tr('ai.noActiveAgent', 'No active agent available')}\n          description={tr(\n            'ai.noActiveAgentDescription',\n            'AI features require an active agent with a configured tunnel URL and API key. Add an agent or start an existing one.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => handleNavigate('/agents')}\n              className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n            >\n              {tr('ai.goToAgents', 'Go to Agents')}\n            </button>\n          }\n        />\n      ) : activeMode === 'plan' ? (\n        <RequireAgentReachable agentId={agentId}>\n          <AIPlanPanel agent={agentRef} tunnelUrl={activeAgent?.tunnelUrl ?? null} />\n        </RequireAgentReachable>\n      ) : (\n        <RequireAgentReachable agentId={agentId}>\n          {/* PluginGate is a custom component that doesn't forward rest props\n              onto a DOM node, so the tour anchor lives on a wrapper <div>. */}\n          <div data-tour=\"vibecontrols-ai-plugin-gate\">\n            <PluginGate\n              agentId={agentId}\n              required={[AI_CORE_PACKAGE]}\n              mode=\"all\"\n              eyebrow={tr('ai.pluginRequired', 'AI plugin required')}\n              title={tr('ai.installOrchestrator', 'Install the AI orchestrator')}\n              description={tr(\n                'ai.installOrchestratorDesc',\n                'The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.'\n              )}\n              onInstalled={handleInstalled}\n            >\n              <div className=\"space-y-6\">\n                {lastInstallNote && (\n                  <div\n                    role=\"status\"\n                    className=\"rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\"\n                  >\n                    {lastInstallNote}\n                  </div>\n                )}\n                <PluginHarnessPicker\n                  agentId={agentId}\n                  packages={AI_PROVIDER_PACKAGES}\n                  title={tr('ai.harnessesTitle', 'AI harnesses')}\n                  description={tr(\n                    'ai.harnessesDesc',\n                    'Install and manage the coding-agent harnesses available on this agent. You can install multiple and switch between them per-session.'\n                  )}\n                  onChange={handleHarnessChange}\n                />\n                <div>\n                  {activeTab === 'overview' && (\n                    <AIOverviewTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'templates' && <AITemplatesTab agentId={agentId} />}\n                  {activeTab === 'contexts' && <AIContextsTab agent={agentRef} />}\n                  {activeTab === 'prompts' && <AIPromptsTab agent={agentRef} />}\n                  {activeTab === 'instructions' && <InstructionFilesManager agentId={agentId} />}\n                  {activeTab === 'sessions' && (\n                    <AISessionsTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'queue' && (\n                    <AIQueueTab agent={agentRef} onNavigateToSession={navigateToSession} />\n                  )}\n                  {activeTab === 'tasks' && <AITasksTab />}\n                  {activeTab === 'stats' && <AIStatsTab agent={agentRef} />}\n                  {activeTab === 'playground' && <AIPlaygroundTab agent={agentRef} />}\n                  {activeTab === 'config' && (\n                    <div className=\"space-y-6\">\n                      <ClaudeCredentialsCard agent={agentRef} />\n                      <BridleConfigPanel agent={agentRef} />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </PluginGate>\n          </div>\n        </RequireAgentReachable>\n      )}\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}