@burdenoff/microfe-vibecontrols 2026.522.4 → 2026.522.6

package/dist/components/ai/AIModeToggle.js

@@ -0,0 +1,43 @@
+import { useVibeNavigate as e } from "../../providers/VibeControlsProvider.js";
+import { useCallback as t } from "react";
+import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Brain as r, MapIcon as i } from "lucide-react";
+import { useLocation as a } from "react-router-dom";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/ai/AIModeToggle.tsx
+var c = "/ai-tools/plan";
+function l(e) {
+	return e.endsWith("/ai-tools/plan") || e.includes("/ai-tools/plan/");
+}
+function u({ planHref: u = c, aiHref: d, activeMode: f, className: p }) {
+	let { t: m } = n(), { pathname: h } = a(), g = e(), _ = t((e, t) => {
+		let n = m(e);
+		return n === e ? t : n;
+	}, [m]), v = f ?? (l(h) ? "plan" : "ai"), y = t((e) => {
+		g(e === "plan" ? u : d);
+	}, [
+		d,
+		g,
+		u
+	]);
+	return /* @__PURE__ */ o("div", {
+		role: "tablist",
+		"aria-label": _("ai.modeToggleLabel", "AI workspace mode"),
+		className: `inline-flex rounded-lg border border-border-default bg-bg-sunken p-0.5 ${p ?? ""}`,
+		children: ["plan", "ai"].map((e) => {
+			let t = v === e, n = e === "plan" ? i : r;
+			return /* @__PURE__ */ s("button", {
+				role: "tab",
+				"aria-selected": t,
+				"data-testid": `ai-mode-toggle-${e}`,
+				onClick: () => y(e),
+				className: `flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${t ? "bg-bg-surface text-action-primary-bg shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
+				children: [/* @__PURE__ */ o(n, { className: "h-4 w-4" }), e === "plan" ? _("ai.mode.plan", "Plan") : _("ai.mode.ai", "AI")]
+			}, e);
+		})
+	});
+}
+//#endregion
+export { u as AIModeToggle };
+
+//# sourceMappingURL=AIModeToggle.js.map

package/dist/components/ai/AIModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIModeToggle.js","names":[],"sources":["../../../src/components/ai/AIModeToggle.tsx"],"sourcesContent":["/**\n * AIModeToggle — Plan / AI mode pivot.\n *\n * Rendered both on /ai-tools (AIPage) above the 9-tab sub-nav and on\n * /ai (AgentManagerPage) in the page header. Active state is computed\n * by matching the current pathname against the two route patterns.\n * Plan click navigates to the canonical Plan workspace\n * (/ai-tools/plan); AI click takes the caller's preferred AI landing\n * page (the AgentManagerPage points back to /ai, while AIPage stays\n * inside /ai-tools/ai/:tab so the active sub-tab is preserved).\n */\n\nimport { useCallback } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { Brain, MapIcon } from 'lucide-react';\n\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\n\nexport type AIMode = 'plan' | 'ai';\n\ninterface AIModeToggleProps {\n  /** Path Plan toggle navigates to. Defaults to `/ai-tools/plan`. */\n  planHref?: string;\n  /** Path AI toggle navigates to when active mode is `plan`. */\n  aiHref: string;\n  /**\n   * Optional explicit active-mode override. When unset the component\n   * derives the active mode from the current pathname.\n   */\n  activeMode?: AIMode;\n  className?: string;\n}\n\nconst DEFAULT_PLAN_HREF = '/ai-tools/plan';\n\nfunction isPlanRoute(pathname: string): boolean {\n  return pathname.endsWith('/ai-tools/plan') || pathname.includes('/ai-tools/plan/');\n}\n\nexport function AIModeToggle({\n  planHref = DEFAULT_PLAN_HREF,\n  aiHref,\n  activeMode,\n  className,\n}: AIModeToggleProps) {\n  const { t } = useI18n();\n  const { pathname } = useLocation();\n  const navigate = 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 resolvedMode: AIMode = activeMode ?? (isPlanRoute(pathname) ? 'plan' : 'ai');\n\n  const onClick = useCallback(\n    (mode: AIMode) => {\n      navigate(mode === 'plan' ? planHref : aiHref);\n    },\n    [aiHref, navigate, planHref]\n  );\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={tr('ai.modeToggleLabel', 'AI workspace mode')}\n      className={`inline-flex rounded-lg border border-border-default bg-bg-sunken p-0.5 ${className ?? ''}`}\n    >\n      {(['plan', 'ai'] as const).map((m) => {\n        const isActive = resolvedMode === m;\n        const Icon = m === 'plan' ? MapIcon : Brain;\n        return (\n          <button\n            key={m}\n            role=\"tab\"\n            aria-selected={isActive}\n            data-testid={`ai-mode-toggle-${m}`}\n            onClick={() => onClick(m)}\n            className={`flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-md transition-colors ${\n              isActive\n                ? 'bg-bg-surface text-action-primary-bg shadow-sm'\n                : 'text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            <Icon className=\"h-4 w-4\" />\n            {m === 'plan' ? tr('ai.mode.plan', 'Plan') : tr('ai.mode.ai', 'AI')}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAkCA,IAAM,IAAoB;AAE1B,SAAS,EAAY,GAA2B;AAC9C,QAAO,EAAS,SAAS,iBAAiB,IAAI,EAAS,SAAS,kBAAkB;;AAGpF,SAAgB,EAAa,EAC3B,cAAW,GACX,WACA,eACA,gBACoB;CACpB,IAAM,EAAE,SAAM,GAAS,EACjB,EAAE,gBAAa,GAAa,EAC5B,IAAW,GAAiB,EAE5B,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EAEK,IAAuB,MAAe,EAAY,EAAS,GAAG,SAAS,OAEvE,IAAU,GACb,MAAiB;AAChB,IAAS,MAAS,SAAS,IAAW,EAAO;IAE/C;EAAC;EAAQ;EAAU;EAAS,CAC7B;AAED,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,EAAG,sBAAsB,oBAAoB;EACzD,WAAW,0EAA0E,KAAa;YAEhG,CAAC,QAAQ,KAAK,CAAW,KAAK,MAAM;GACpC,IAAM,IAAW,MAAiB,GAC5B,IAAO,MAAM,SAAS,IAAU;AACtC,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,iBAAe;IACf,eAAa,kBAAkB;IAC/B,eAAe,EAAQ,EAAE;IACzB,WAAW,wFACT,IACI,mDACA;cATR,CAYE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,MAAM,SAAS,EAAG,gBAAgB,OAAO,GAAG,EAAG,cAAc,KAAK,CAC5D;MAbF,EAaE;IAEX;EACE,CAAA"}

package/dist/components/vibe/VibeAgentEmptyState.js

@@ -1,29 +1,137 @@
-import { useVibeNavigate as e } from "../../providers/VibeControlsProvider.js";
-import { EmptyState as t } from "../shared/EmptyState.js";
+import { useAttachAgentToVibeMutation as e, useListAgentsQuery as t } from "../../generated/wspace-operations.js";
+import { useVibeNavigate as n } from "../../providers/VibeControlsProvider.js";
+import { EmptyState as r } from "../shared/EmptyState.js";
 import "../shared/index.js";
-import { ArrowRight as n, Server as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as i, useMemo as a, useState as o } from "react";
+import { ArrowRight as s, Plus as c, Server as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/vibe/VibeAgentEmptyState.tsx
-var o = ({ vibeId: o, tr: s }) => {
-	let c = e();
-	return /* @__PURE__ */ i("div", {
+var p = ({ vibeId: p, tr: m, onAttached: h }) => {
+	let g = n(), [_, v] = o(!1), [y, b] = o(null), [x, S] = o(null), { data: C, loading: w } = t({
+		skip: !_,
+		fetchPolicy: "cache-and-network"
+	}), [T] = e(), E = a(() => C?.vibecontrolsAgents ?? [], [C]), D = i(async (e) => {
+		b(null), S(e);
+		try {
+			await T({ variables: { input: {
+				vibeId: p,
+				agentId: e
+			} } }), v(!1), h?.();
+		} catch (e) {
+			b(e instanceof Error ? e.message : String(e));
+		} finally {
+			S(null);
+		}
+	}, [
+		T,
+		p,
+		h
+	]), O = i(() => {
+		g(`/agents${p ? `?attachToVibe=${encodeURIComponent(p)}` : ""}`);
+	}, [g, p]);
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
 		className: "rounded-lg border border-border-default bg-bg-surface",
-		children: /* @__PURE__ */ i(t, {
-			icon: /* @__PURE__ */ i(r, { className: "w-8 h-8 text-text-secondary" }),
-			title: s("vibeDetails.noAgentTitle", "No agent attached"),
-			description: s("vibeDetails.noAgentDescription", "This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs."),
-			action: /* @__PURE__ */ a("button", {
+		children: /* @__PURE__ */ d(r, {
+			icon: /* @__PURE__ */ d(l, { className: "w-8 h-8 text-text-secondary" }),
+			title: m("vibeDetails.noAgentTitle", "No agent attached"),
+			description: m("vibeDetails.noAgentDescription", "This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs."),
+			action: /* @__PURE__ */ f("button", {
 				type: "button",
-				onClick: () => {
-					c(`/agents${o ? `?attachToVibe=${encodeURIComponent(o)}` : ""}`);
-				},
+				onClick: () => v(!0),
 				className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
-				children: [s("vibeDetails.connectAnAgent", "Connect an agent to this vibe"), /* @__PURE__ */ i(n, { className: "w-4 h-4" })]
+				children: [m("vibeDetails.connectAnAgent", "Connect an agent to this vibe"), /* @__PURE__ */ d(s, { className: "w-4 h-4" })]
 			})
 		})
-	});
+	}), _ && /* @__PURE__ */ d("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": "vibe-attach-agent-title",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+		onClick: (e) => {
+			e.target === e.currentTarget && v(!1);
+		},
+		children: /* @__PURE__ */ f("div", {
+			className: "w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl",
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "flex items-center justify-between px-5 py-4 border-b border-border-subtle",
+					children: [/* @__PURE__ */ d("h2", {
+						id: "vibe-attach-agent-title",
+						className: "text-base font-semibold text-text-primary",
+						children: m("vibeDetails.attachAgentTitle", "Attach an agent")
+					}), /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: () => v(!1),
+						className: "text-text-secondary hover:text-text-primary transition-colors",
+						"aria-label": m("common.close", "Close"),
+						children: "✕"
+					})]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "px-5 py-4 max-h-[60vh] overflow-y-auto",
+					children: [w && E.length === 0 ? /* @__PURE__ */ d("p", {
+						className: "text-sm text-text-secondary",
+						children: m("common.loading", "Loading…")
+					}) : E.length === 0 ? /* @__PURE__ */ f("div", {
+						className: "text-sm text-text-secondary space-y-3",
+						children: [/* @__PURE__ */ d("p", { children: m("vibeDetails.noWorkspaceAgents", "No agents in this workspace yet. Register one first, then attach it to this vibe.") }), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: O,
+							className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+							children: [/* @__PURE__ */ d(c, { className: "w-4 h-4" }), m("vibeDetails.registerAgent", "Register an agent")]
+						})]
+					}) : /* @__PURE__ */ d("ul", {
+						className: "space-y-2",
+						children: E.map((e) => /* @__PURE__ */ d("li", { children: /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => D(e.id),
+							disabled: x !== null,
+							className: "w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60",
+							children: [/* @__PURE__ */ f("span", {
+								className: "flex items-center gap-3 min-w-0",
+								children: [/* @__PURE__ */ d(l, { className: "w-4 h-4 text-text-secondary flex-shrink-0" }), /* @__PURE__ */ f("span", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("span", {
+										className: "block text-sm font-medium text-text-primary truncate",
+										children: e.name
+									}), /* @__PURE__ */ f("span", {
+										className: "block text-xs text-text-secondary truncate",
+										children: [
+											e.hostname || "—",
+											" ",
+											e.isActive ? `· ${m("agents.active", "Active")}` : `· ${m("agents.inactive", "Inactive")}`
+										]
+									})]
+								})]
+							}), /* @__PURE__ */ d("span", {
+								className: "text-xs text-text-tertiary",
+								children: x === e.id ? m("common.attaching", "Attaching…") : m("vibeDetails.attach", "Attach")
+							})]
+						}) }, e.id))
+					}), y && /* @__PURE__ */ d("p", {
+						className: "mt-3 text-sm text-status-error-text",
+						children: y
+					})]
+				}),
+				E.length > 0 && /* @__PURE__ */ f("div", {
+					className: "flex items-center justify-between px-5 py-3 border-t border-border-subtle",
+					children: [/* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: O,
+						className: "text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1",
+						children: [/* @__PURE__ */ d(c, { className: "w-3.5 h-3.5" }), m("vibeDetails.registerAgent", "Register a new agent")]
+					}), /* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: () => v(!1),
+						className: "text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover",
+						children: m("common.cancel", "Cancel")
+					})]
+				})
+			]
+		})
+	})] });
 };
 //#endregion
-export { o as VibeAgentEmptyState };
+export { p as VibeAgentEmptyState };
 
 //# sourceMappingURL=VibeAgentEmptyState.js.map

package/dist/components/vibe/VibeAgentEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * The CTA deep-links to the agents page with `?attachToVibe=<vibeId>` so the\n * agents UI can offer a direct \"attach to this vibe\" affordance and bounce\n * the user back when done.\n */\nimport type { FC } from 'react';\nimport { Server, ArrowRight } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr }) => {\n  const navigate = useVibeNavigate();\n\n  const handleConnect = () => {\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  };\n\n  return (\n    <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n      <EmptyState\n        icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n        title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n        description={tr(\n          'vibeDetails.noAgentDescription',\n          'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n        )}\n        action={\n          <button\n            type=\"button\"\n            onClick={handleConnect}\n            className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n          >\n            {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n            <ArrowRight className=\"w-4 h-4\" />\n          </button>\n        }\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,KAAqD,EAAE,WAAQ,YAAS;CACnF,IAAM,IAAW,GAAiB;AAOlC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAQ,WAAU,+BAAgC,CAAA;GACxD,OAAO,EAAG,4BAA4B,oBAAoB;GAC1D,aAAa,EACX,kCACA,gKACD;GACD,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAjBkB;AAE1B,OAAS,UADK,IAAS,iBAAiB,mBAAmB,EAAO,KAAK,KAC5C;;IAgBnB,WAAU;cAHZ,CAKG,EAAG,8BAA8B,gCAAgC,EAClE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CAC3B;;GAEX,CAAA;EACE,CAAA"}
+{"version":3,"file":"VibeAgentEmptyState.js","names":[],"sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"sourcesContent":["/**\n * VibeAgentEmptyState — shown on the Vibe details page when the vibe has no\n * agent attached. Tabs that depend on an agent (sessions, gitops, GraphQL\n * playground, git) are hidden, and the user is invited to attach an agent.\n *\n * UX: opens an in-place modal listing the workspace's existing agents so the\n * user can attach one without leaving the vibe detail page. Falls back to\n * navigating to the agents page only if no agents exist in the workspace\n * (so the user can register their first one).\n */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { FC } from 'react';\nimport { ArrowRight, Plus, Server } from 'lucide-react';\nimport { EmptyState } from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport {\n  useListAgentsQuery,\n  useAttachAgentToVibeMutation,\n  type ListAgentsQuery,\n} from '@/generated/wspace-operations';\n\nexport interface VibeAgentEmptyStateProps {\n  vibeId: string;\n  tr: (key: string, fallback: string) => string;\n  /** Optional: called after a successful attach so the parent can refetch. */\n  onAttached?: () => void;\n}\n\nexport const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps> = ({ vibeId, tr, onAttached }) => {\n  const navigate = useVibeNavigate();\n  const [open, setOpen] = useState(false);\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [busyAgentId, setBusyAgentId] = useState<string | null>(null);\n\n  const { data, loading } = useListAgentsQuery({\n    skip: !open,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [attach] = useAttachAgentToVibeMutation();\n\n  const agents = useMemo<ListAgentsQuery['vibecontrolsAgents']>(\n    () => data?.vibecontrolsAgents ?? [],\n    [data]\n  );\n\n  const handleAttach = useCallback(\n    async (agentId: string) => {\n      setErrorMessage(null);\n      setBusyAgentId(agentId);\n      try {\n        await attach({ variables: { input: { vibeId, agentId } } });\n        setOpen(false);\n        onAttached?.();\n      } catch (err) {\n        setErrorMessage(err instanceof Error ? err.message : String(err));\n      } finally {\n        setBusyAgentId(null);\n      }\n    },\n    [attach, vibeId, onAttached]\n  );\n\n  const handleRegisterNew = useCallback(() => {\n    // Deep-link to the agents page with vibeId so the agents UI can offer\n    // a \"register and attach to this vibe\" affordance.\n    const query = vibeId ? `?attachToVibe=${encodeURIComponent(vibeId)}` : '';\n    navigate(`/agents${query}`);\n  }, [navigate, vibeId]);\n\n  return (\n    <>\n      <div className=\"rounded-lg border border-border-default bg-bg-surface\">\n        <EmptyState\n          icon={<Server className=\"w-8 h-8 text-text-secondary\" />}\n          title={tr('vibeDetails.noAgentTitle', 'No agent attached')}\n          description={tr(\n            'vibeDetails.noAgentDescription',\n            'This vibe is not attached to an agent yet. Sessions, GitOps, GraphQL playground, and git tooling all run through an agent — connect one to unlock those tabs.'\n          )}\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setOpen(true)}\n              className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              {tr('vibeDetails.connectAnAgent', 'Connect an agent to this vibe')}\n              <ArrowRight className=\"w-4 h-4\" />\n            </button>\n          }\n        />\n      </div>\n\n      {open && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"vibe-attach-agent-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\"\n          onClick={(e) => {\n            if (e.target === e.currentTarget) setOpen(false);\n          }}\n        >\n          <div className=\"w-full max-w-md rounded-lg bg-bg-elevated border border-border-default shadow-xl\">\n            <div className=\"flex items-center justify-between px-5 py-4 border-b border-border-subtle\">\n              <h2\n                id=\"vibe-attach-agent-title\"\n                className=\"text-base font-semibold text-text-primary\"\n              >\n                {tr('vibeDetails.attachAgentTitle', 'Attach an agent')}\n              </h2>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                className=\"text-text-secondary hover:text-text-primary transition-colors\"\n                aria-label={tr('common.close', 'Close')}\n              >\n                ✕\n              </button>\n            </div>\n\n            <div className=\"px-5 py-4 max-h-[60vh] overflow-y-auto\">\n              {loading && agents.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">{tr('common.loading', 'Loading…')}</p>\n              ) : agents.length === 0 ? (\n                <div className=\"text-sm text-text-secondary space-y-3\">\n                  <p>\n                    {tr(\n                      'vibeDetails.noWorkspaceAgents',\n                      'No agents in this workspace yet. Register one first, then attach it to this vibe.'\n                    )}\n                  </p>\n                  <button\n                    type=\"button\"\n                    onClick={handleRegisterNew}\n                    className=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover transition-colors\"\n                  >\n                    <Plus className=\"w-4 h-4\" />\n                    {tr('vibeDetails.registerAgent', 'Register an agent')}\n                  </button>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {agents.map((a) => (\n                    <li key={a.id}>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleAttach(a.id)}\n                        disabled={busyAgentId !== null}\n                        className=\"w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-md border border-border-subtle hover:border-border-default hover:bg-action-ghost-bg-hover transition-colors text-left disabled:opacity-60\"\n                      >\n                        <span className=\"flex items-center gap-3 min-w-0\">\n                          <Server className=\"w-4 h-4 text-text-secondary flex-shrink-0\" />\n                          <span className=\"min-w-0\">\n                            <span className=\"block text-sm font-medium text-text-primary truncate\">\n                              {a.name}\n                            </span>\n                            <span className=\"block text-xs text-text-secondary truncate\">\n                              {a.hostname || '—'}{' '}\n                              {a.isActive\n                                ? `· ${tr('agents.active', 'Active')}`\n                                : `· ${tr('agents.inactive', 'Inactive')}`}\n                            </span>\n                          </span>\n                        </span>\n                        <span className=\"text-xs text-text-tertiary\">\n                          {busyAgentId === a.id\n                            ? tr('common.attaching', 'Attaching…')\n                            : tr('vibeDetails.attach', 'Attach')}\n                        </span>\n                      </button>\n                    </li>\n                  ))}\n                </ul>\n              )}\n\n              {errorMessage && (\n                <p className=\"mt-3 text-sm text-status-error-text\">{errorMessage}</p>\n              )}\n            </div>\n\n            {agents.length > 0 && (\n              <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-subtle\">\n                <button\n                  type=\"button\"\n                  onClick={handleRegisterNew}\n                  className=\"text-xs text-text-secondary hover:text-text-primary inline-flex items-center gap-1\"\n                >\n                  <Plus className=\"w-3.5 h-3.5\" />\n                  {tr('vibeDetails.registerAgent', 'Register a new agent')}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(false)}\n                  className=\"text-sm px-3 py-1.5 rounded-md border border-border-default text-text-primary hover:bg-action-ghost-bg-hover\"\n                >\n                  {tr('common.cancel', 'Cancel')}\n                </button>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AA4BA,IAAa,KAAqD,EAAE,WAAQ,OAAI,oBAAiB;CAC/F,IAAM,IAAW,GAAiB,EAC5B,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAC/D,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAE7D,EAAE,SAAM,eAAY,EAAmB;EAC3C,MAAM,CAAC;EACP,aAAa;EACd,CAAC,EACI,CAAC,KAAU,GAA8B,EAEzC,IAAS,QACP,GAAM,sBAAsB,EAAE,EACpC,CAAC,EAAK,CACP,EAEK,IAAe,EACnB,OAAO,MAAoB;AAEzB,EADA,EAAgB,KAAK,EACrB,EAAe,EAAQ;AACvB,MAAI;AAGF,GAFA,MAAM,EAAO,EAAE,WAAW,EAAE,OAAO;IAAE;IAAQ;IAAS,EAAE,EAAE,CAAC,EAC3D,EAAQ,GAAM,EACd,KAAc;WACP,GAAK;AACZ,KAAgB,aAAe,QAAQ,EAAI,UAAU,OAAO,EAAI,CAAC;YACzD;AACR,KAAe,KAAK;;IAGxB;EAAC;EAAQ;EAAQ;EAAW,CAC7B,EAEK,IAAoB,QAAkB;AAI1C,IAAS,UADK,IAAS,iBAAiB,mBAAmB,EAAO,KAAK,KAC5C;IAC1B,CAAC,GAAU,EAAO,CAAC;AAEtB,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAQ,WAAU,+BAAgC,CAAA;GACxD,OAAO,EAAG,4BAA4B,oBAAoB;GAC1D,aAAa,EACX,kCACA,gKACD;GACD,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAQ,GAAK;IAC5B,WAAU;cAHZ,CAKG,EAAG,8BAA8B,gCAAgC,EAClE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CAC3B;;GAEX,CAAA;EACE,CAAA,EAEL,KACC,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,mBAAgB;EAChB,WAAU;EACV,UAAU,MAAM;AACd,GAAI,EAAE,WAAW,EAAE,iBAAe,EAAQ,GAAM;;YAGlD,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MACE,IAAG;MACH,WAAU;gBAET,EAAG,gCAAgC,kBAAkB;MACnD,CAAA,EACL,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAQ,GAAM;MAC7B,WAAU;MACV,cAAY,EAAG,gBAAgB,QAAQ;gBACxC;MAEQ,CAAA,CACL;;IAEN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KAAW,EAAO,WAAW,IAC5B,kBAAC,KAAD;MAAG,WAAU;gBAA+B,EAAG,kBAAkB,WAAW;MAAK,CAAA,GAC/E,EAAO,WAAW,IACpB,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD,EAAA,UACG,EACC,iCACA,oFACD,EACC,CAAA,EACJ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EAAG,6BAA6B,oBAAoB,CAC9C;SACL;UAEN,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAO,KAAK,MACX,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAa,EAAE,GAAG;OACjC,UAAU,MAAgB;OAC1B,WAAU;iBAJZ,CAME,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,kBAAC,GAAD,EAAQ,WAAU,6CAA8C,CAAA,EAChE,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACE,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAE;UACE,CAAA,EACP,kBAAC,QAAD;UAAM,WAAU;oBAAhB;WACG,EAAE,YAAY;WAAK;WACnB,EAAE,WACC,KAAK,EAAG,iBAAiB,SAAS,KAClC,KAAK,EAAG,mBAAmB,WAAW;WACrC;YACF;WACF;WACP,kBAAC,QAAD;QAAM,WAAU;kBACb,MAAgB,EAAE,KACf,EAAG,oBAAoB,aAAa,GACpC,EAAG,sBAAsB,SAAS;QACjC,CAAA,CACA;UACN,EA3BI,EAAE,GA2BN,CACL;MACC,CAAA,EAGN,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAuC;MAAiB,CAAA,CAEnE;;IAEL,EAAO,SAAS,KACf,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA,EAC/B,EAAG,6BAA6B,uBAAuB,CACjD;SACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAQ,GAAM;MAC7B,WAAU;gBAET,EAAG,iBAAiB,SAAS;MACvB,CAAA,CACL;;IAEJ;;EACF,CAAA,CAEP,EAAA,CAAA"}

package/dist/pages/CatalogPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogPage.js","names":[],"sources":["../../src/pages/CatalogPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, BookOpen, RefreshCw } from 'lucide-react';\nimport { CatalogCard } from '@/components/catalog';\nimport type { CatalogCardData } from '@/components/catalog';\nimport { CatalogForm } from '@/components/catalog';\nimport type { CatalogFormData } from '@/components/catalog';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListCatalogsQuery, useCreateCatalogMutation } from '@/generated/wspace-operations';\n\nexport function CatalogPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const visibilityOptions = [\n    { value: 'all', label: tr('catalog.allVisibility', 'All Visibility') },\n    { value: 'PRIVATE', label: tr('catalog.visibilityPrivate', 'Private') },\n    { value: 'INTERNAL', label: tr('catalog.visibilityInternal', 'Internal') },\n    { value: 'PUBLIC', label: tr('catalog.visibilityPublic', 'Public') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [visibilityFilter, setVisibilityFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [accumulated, setAccumulated] = useState<CatalogCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListCatalogsQuery({\n    variables: {\n      filter: {\n        visibility:\n          visibilityFilter !== 'all'\n            ? (visibilityFilter as 'PRIVATE' | 'INTERNAL' | 'PUBLIC')\n            : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const [createCatalog] = useCreateCatalogMutation({ refetchQueries: ['ListCatalogs'] });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_CATALOG');\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): CatalogCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        visibility: item.visibility as CatalogCardData['visibility'],\n        componentCount: (item.componentCount as number) || 0,\n        vibeCount: (item.vibeCount as number) || 0,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  // Mirror the watched query's items into local state. fetchMore below uses\n  // updateQuery to append new pages into the watched data, so this single\n  // effect handles both the initial load and load-more cases.\n  useEffect(() => {\n    const items = data?.vibecontrolsCatalogs?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsCatalogs?.items, mapItems]);\n\n  const total = data?.vibecontrolsCatalogs?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const filteredCatalogs = accumulated;\n  const catalogs = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsCatalogs) return prev;\n          const prevList = prev.vibecontrolsCatalogs;\n          const nextList = fetchMoreResult.vibecontrolsCatalogs;\n          return {\n            ...prev,\n            vibecontrolsCatalogs: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleCatalogSelect = (catalog: CatalogCardData) => {\n    navigate(`/catalogs/${catalog.id}`);\n  };\n\n  const handleCreateCatalog = async (formData: CatalogFormData) => {\n    const res = await createCatalog({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          visibility: formData.visibility,\n          ownerName: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    const newCatalogId = res.data?.createVibecontrolsCatalog?.id;\n    if (newCatalogId) await flushTags(newCatalogId);\n    setSuccessMessage(tr('catalog.createdSuccess', 'Catalog created successfully'));\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && catalogs.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('catalog.failedLoad', 'Failed to load catalogs')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('catalog.title', 'Catalogs')}\n        description={tr('catalog.description', '{{total}} catalogs', {\n          total: catalogs.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('catalog.createCatalog', 'Create Catalog')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n        <SearchInput\n          value={searchQuery}\n          onChange={setSearchQuery}\n          placeholder={tr('catalog.searchPlaceholder', 'Search catalogs...')}\n          className=\"flex-1 sm:w-64 sm:flex-none\"\n        />\n        <FilterDropdown\n          label={tr('catalog.filterVisibility', 'Visibility')}\n          value={visibilityFilter}\n          options={visibilityOptions}\n          onChange={setVisibilityFilter}\n        />\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('catalog.showingResults', 'Showing {{filtered}} of {{total}} catalogs', {\n          filtered: filteredCatalogs.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && catalogs.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredCatalogs.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"catalog-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredCatalogs.map((catalog) => (\n              <MotionItem key={catalog.id}>\n                <CatalogCard catalog={catalog} onOpen={handleCatalogSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<BookOpen className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || visibilityFilter !== 'all'\n              ? tr('catalog.emptyNoResults', 'No catalogs found')\n              : tr('catalog.emptyNoCatalogs', 'No catalogs yet')\n          }\n          description={\n            searchQuery || visibilityFilter !== 'all'\n              ? tr('catalog.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr('catalog.emptyCreate', 'Create your first catalog to organize components')\n          }\n          action={\n            !searchQuery && visibilityFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('catalog.createCatalog', 'Create Catalog')}\n                </button>\n                <GetHelpButton prompt=\"What is a Catalog in VibeControls and how do I create one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredCatalogs.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore\n              ? tr('common.loading', 'Loading...')\n              : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <CatalogForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateCatalog}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('catalog.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_CATALOG\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CatalogPage.js","names":[],"sources":["../../src/pages/CatalogPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, BookOpen, RefreshCw } from 'lucide-react';\nimport { CatalogCard } from '@/components/catalog';\nimport type { CatalogCardData } from '@/components/catalog';\nimport { CatalogForm } from '@/components/catalog';\nimport type { CatalogFormData } from '@/components/catalog';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListCatalogsQuery, useCreateCatalogMutation } from '@/generated/wspace-operations';\n\nexport function CatalogPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const visibilityOptions = [\n    { value: 'all', label: tr('catalog.allVisibility', 'All Visibility') },\n    { value: 'PRIVATE', label: tr('catalog.visibilityPrivate', 'Private') },\n    { value: 'INTERNAL', label: tr('catalog.visibilityInternal', 'Internal') },\n    { value: 'PUBLIC', label: tr('catalog.visibilityPublic', 'Public') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [visibilityFilter, setVisibilityFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [accumulated, setAccumulated] = useState<CatalogCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListCatalogsQuery({\n    variables: {\n      filter: {\n        visibility:\n          visibilityFilter !== 'all'\n            ? (visibilityFilter as 'PRIVATE' | 'INTERNAL' | 'PUBLIC')\n            : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const [createCatalog] = useCreateCatalogMutation({ refetchQueries: ['ListCatalogs'] });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_CATALOG');\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): CatalogCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        visibility: item.visibility as CatalogCardData['visibility'],\n        componentCount: (item.componentCount as number) || 0,\n        vibeCount: (item.vibeCount as number) || 0,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  // Mirror the watched query's items into local state. fetchMore below uses\n  // updateQuery to append new pages into the watched data, so this single\n  // effect handles both the initial load and load-more cases.\n  useEffect(() => {\n    const items = data?.vibecontrolsCatalogs?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsCatalogs?.items, mapItems]);\n\n  const total = data?.vibecontrolsCatalogs?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const filteredCatalogs = accumulated;\n  const catalogs = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsCatalogs) return prev;\n          const prevList = prev.vibecontrolsCatalogs;\n          const nextList = fetchMoreResult.vibecontrolsCatalogs;\n          return {\n            ...prev,\n            vibecontrolsCatalogs: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleCatalogSelect = (catalog: CatalogCardData) => {\n    navigate(`/catalogs/${catalog.id}`);\n  };\n\n  const handleCreateCatalog = async (formData: CatalogFormData) => {\n    const res = await createCatalog({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          visibility: formData.visibility,\n          ownerName: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    const newCatalogId = res.data?.createVibecontrolsCatalog?.id;\n    if (newCatalogId) await flushTags(newCatalogId);\n    setSuccessMessage(tr('catalog.createdSuccess', 'Catalog created successfully'));\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && catalogs.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('catalog.failedLoad', 'Failed to load catalogs')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('catalog.title', 'Catalogs')}\n        description={tr('catalog.description', '{{total}} catalogs', {\n          total: catalogs.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('catalog.createCatalog', 'Create Catalog')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n        <SearchInput\n          value={searchQuery}\n          onChange={setSearchQuery}\n          placeholder={tr('catalog.searchPlaceholder', 'Search catalogs...')}\n          className=\"flex-1 sm:w-64 sm:flex-none\"\n        />\n        <FilterDropdown\n          label={tr('catalog.filterVisibility', 'Visibility')}\n          value={visibilityFilter}\n          options={visibilityOptions}\n          onChange={setVisibilityFilter}\n        />\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('catalog.showingResults', 'Showing {{filtered}} of {{total}} catalogs', {\n          filtered: filteredCatalogs.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && catalogs.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredCatalogs.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"catalog-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredCatalogs.map((catalog) => (\n              <MotionItem key={catalog.id}>\n                <CatalogCard catalog={catalog} onOpen={handleCatalogSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<BookOpen className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || visibilityFilter !== 'all'\n              ? tr('catalog.emptyNoResults', 'No catalogs found')\n              : tr('catalog.emptyNoCatalogs', 'No catalogs yet')\n          }\n          description={\n            searchQuery || visibilityFilter !== 'all'\n              ? tr('catalog.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr('catalog.emptyCreate', 'Create your first catalog to organize components')\n          }\n          action={\n            !searchQuery && visibilityFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('catalog.createCatalog', 'Create Catalog')}\n                </button>\n                <GetHelpButton prompt=\"What is a Catalog in VibeControls and how do I create one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredCatalogs.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore ? tr('common.loading', 'Loading...') : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <CatalogForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateCatalog}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('catalog.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_CATALOG\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/ComponentsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentsPage.js","names":[],"sources":["../../src/pages/ComponentsPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, Box, RefreshCw } from 'lucide-react';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListComponentsQuery, useCreateComponentMutation } from '@/generated/wspace-operations';\n\nexport function ComponentsPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const typeOptions = [\n    { value: 'all', label: tr('component.allTypes', 'All Types') },\n    { value: 'SERVICE', label: tr('component.typeService', 'Service') },\n    { value: 'FRONTEND', label: tr('component.typeFrontend', 'Frontend') },\n    { value: 'LIBRARY', label: tr('component.typeLibrary', 'Library') },\n    { value: 'API', label: tr('component.typeApi', 'API') },\n    { value: 'MOBILE', label: tr('component.typeMobile', 'Mobile') },\n    { value: 'DATABASE', label: tr('component.typeDatabase', 'Database') },\n    { value: 'INFRASTRUCTURE', label: tr('component.typeInfrastructure', 'Infrastructure') },\n    { value: 'CUSTOM', label: tr('component.typeCustom', 'Custom') },\n  ];\n\n  const lifecycleOptions = [\n    { value: 'all', label: tr('component.allLifecycles', 'All Lifecycles') },\n    { value: 'EXPERIMENTAL', label: tr('component.lifecycleExperimental', 'Experimental') },\n    { value: 'PRODUCTION', label: tr('component.lifecycleProduction', 'Production') },\n    { value: 'DEPRECATED', label: tr('component.lifecycleDeprecated', 'Deprecated') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [lifecycleFilter, setLifecycleFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [accumulated, setAccumulated] = useState<ComponentCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListComponentsQuery({\n    variables: {\n      filter: {\n        type: typeFilter !== 'all' ? typeFilter : undefined,\n        lifecycle: lifecycleFilter !== 'all' ? lifecycleFilter : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const [createComponent] = useCreateComponentMutation({\n    refetchQueries: ['ListComponents'],\n    awaitRefetchQueries: true,\n  });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_COMPONENT');\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): ComponentCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        type: item.type as ComponentCardData['type'],\n        lifecycle: item.lifecycle as ComponentCardData['lifecycle'],\n        version: (item.version as string) || null,\n        language: (item.language as string) || null,\n        framework: (item.framework as string) || null,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  useEffect(() => {\n    const items = data?.vibecontrolsComponents?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsComponents?.items, mapItems]);\n\n  const total = data?.vibecontrolsComponents?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const components = accumulated;\n  const filteredComponents = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsComponents) return prev;\n          const prevList = prev.vibecontrolsComponents;\n          const nextList = fetchMoreResult.vibecontrolsComponents;\n          return {\n            ...prev,\n            vibecontrolsComponents: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleComponentSelect = (component: ComponentCardData) => {\n    navigate(`/components/${component.id}`);\n  };\n\n  const handleCreateComponent = async (formData: ComponentFormData) => {\n    const result = await createComponent({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          type: formData.type,\n          lifecycle: formData.lifecycle,\n          language: formData.language || undefined,\n          framework: formData.framework || undefined,\n          version: formData.version || undefined,\n          owner: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    if (!result.data?.createVibecontrolsComponent?.id) {\n      throw new Error(tr('component.failedCreate', 'Failed to create component'));\n    }\n    const newComponentId = result.data.createVibecontrolsComponent.id;\n    setShowCreateForm(false);\n    setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n    await flushTags(newComponentId);\n    await refetch();\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && components.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('component.failedLoad', 'Failed to load components')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('component.title', 'Components')}\n        description={tr('component.description', '{{total}} components', {\n          total: components.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('component.createComponent', 'Create Component')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('component.searchPlaceholder', 'Search components...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n        </div>\n        <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n          <FilterDropdown\n            label={tr('component.filterType', 'Type')}\n            value={typeFilter}\n            options={typeOptions}\n            onChange={setTypeFilter}\n          />\n          <FilterDropdown\n            label={tr('component.filterLifecycle', 'Lifecycle')}\n            value={lifecycleFilter}\n            options={lifecycleOptions}\n            onChange={setLifecycleFilter}\n          />\n        </div>\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('component.showingResults', 'Showing {{filtered}} of {{total}} components', {\n          filtered: filteredComponents.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && components.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredComponents.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"component-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredComponents.map((component) => (\n              <MotionItem key={component.id}>\n                <ComponentCard component={component} onOpen={handleComponentSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<Box className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyNoResults', 'No components found')\n              : tr('component.emptyNoComponents', 'No components yet')\n          }\n          description={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'component.emptyCreate',\n                  'Register your first component to start tracking your software catalog'\n                )\n          }\n          action={\n            !searchQuery && typeFilter === 'all' && lifecycleFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('component.createComponent', 'Create Component')}\n                </button>\n                <GetHelpButton prompt=\"What is a Component in VibeControls and how do I add one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredComponents.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore\n              ? tr('common.loading', 'Loading...')\n              : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <ComponentForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateComponent}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('component.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComponentsPage.js","names":[],"sources":["../../src/pages/ComponentsPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, Box, RefreshCw } from 'lucide-react';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListComponentsQuery, useCreateComponentMutation } from '@/generated/wspace-operations';\n\nexport function ComponentsPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const typeOptions = [\n    { value: 'all', label: tr('component.allTypes', 'All Types') },\n    { value: 'SERVICE', label: tr('component.typeService', 'Service') },\n    { value: 'FRONTEND', label: tr('component.typeFrontend', 'Frontend') },\n    { value: 'LIBRARY', label: tr('component.typeLibrary', 'Library') },\n    { value: 'API', label: tr('component.typeApi', 'API') },\n    { value: 'MOBILE', label: tr('component.typeMobile', 'Mobile') },\n    { value: 'DATABASE', label: tr('component.typeDatabase', 'Database') },\n    { value: 'INFRASTRUCTURE', label: tr('component.typeInfrastructure', 'Infrastructure') },\n    { value: 'CUSTOM', label: tr('component.typeCustom', 'Custom') },\n  ];\n\n  const lifecycleOptions = [\n    { value: 'all', label: tr('component.allLifecycles', 'All Lifecycles') },\n    { value: 'EXPERIMENTAL', label: tr('component.lifecycleExperimental', 'Experimental') },\n    { value: 'PRODUCTION', label: tr('component.lifecycleProduction', 'Production') },\n    { value: 'DEPRECATED', label: tr('component.lifecycleDeprecated', 'Deprecated') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [lifecycleFilter, setLifecycleFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [accumulated, setAccumulated] = useState<ComponentCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListComponentsQuery({\n    variables: {\n      filter: {\n        type: typeFilter !== 'all' ? typeFilter : undefined,\n        lifecycle: lifecycleFilter !== 'all' ? lifecycleFilter : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const [createComponent] = useCreateComponentMutation({\n    refetchQueries: ['ListComponents'],\n    awaitRefetchQueries: true,\n  });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_COMPONENT');\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): ComponentCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        type: item.type as ComponentCardData['type'],\n        lifecycle: item.lifecycle as ComponentCardData['lifecycle'],\n        version: (item.version as string) || null,\n        language: (item.language as string) || null,\n        framework: (item.framework as string) || null,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  useEffect(() => {\n    const items = data?.vibecontrolsComponents?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsComponents?.items, mapItems]);\n\n  const total = data?.vibecontrolsComponents?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const components = accumulated;\n  const filteredComponents = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsComponents) return prev;\n          const prevList = prev.vibecontrolsComponents;\n          const nextList = fetchMoreResult.vibecontrolsComponents;\n          return {\n            ...prev,\n            vibecontrolsComponents: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleComponentSelect = (component: ComponentCardData) => {\n    navigate(`/components/${component.id}`);\n  };\n\n  const handleCreateComponent = async (formData: ComponentFormData) => {\n    const result = await createComponent({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          type: formData.type,\n          lifecycle: formData.lifecycle,\n          language: formData.language || undefined,\n          framework: formData.framework || undefined,\n          version: formData.version || undefined,\n          owner: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    if (!result.data?.createVibecontrolsComponent?.id) {\n      throw new Error(tr('component.failedCreate', 'Failed to create component'));\n    }\n    const newComponentId = result.data.createVibecontrolsComponent.id;\n    setShowCreateForm(false);\n    setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n    await flushTags(newComponentId);\n    await refetch();\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && components.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('component.failedLoad', 'Failed to load components')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('component.title', 'Components')}\n        description={tr('component.description', '{{total}} components', {\n          total: components.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('component.createComponent', 'Create Component')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('component.searchPlaceholder', 'Search components...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n        </div>\n        <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n          <FilterDropdown\n            label={tr('component.filterType', 'Type')}\n            value={typeFilter}\n            options={typeOptions}\n            onChange={setTypeFilter}\n          />\n          <FilterDropdown\n            label={tr('component.filterLifecycle', 'Lifecycle')}\n            value={lifecycleFilter}\n            options={lifecycleOptions}\n            onChange={setLifecycleFilter}\n          />\n        </div>\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('component.showingResults', 'Showing {{filtered}} of {{total}} components', {\n          filtered: filteredComponents.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && components.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredComponents.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"component-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredComponents.map((component) => (\n              <MotionItem key={component.id}>\n                <ComponentCard component={component} onOpen={handleComponentSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<Box className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyNoResults', 'No components found')\n              : tr('component.emptyNoComponents', 'No components yet')\n          }\n          description={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'component.emptyCreate',\n                  'Register your first component to start tracking your software catalog'\n                )\n          }\n          action={\n            !searchQuery && typeFilter === 'all' && lifecycleFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('component.createComponent', 'Create Component')}\n                </button>\n                <GetHelpButton prompt=\"What is a Component in VibeControls and how do I add one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredComponents.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore ? tr('common.loading', 'Loading...') : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <ComponentForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateComponent}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('component.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/TemplatesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplatesPage.js","names":[],"sources":["../../src/pages/TemplatesPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { FileCode, RefreshCw } from 'lucide-react';\nimport { TemplateCard } from '@/components/templates';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport type { TemplateCardData } from '@/components/templates';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListTemplatesQuery } from '@/generated/wspace-operations';\n\nexport function TemplatesPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const categoryOptions = [\n    { value: 'all', label: tr('template.allCategories', 'All Categories') },\n    { value: 'STARTER', label: tr('template.categoryStarter', 'Starter') },\n    { value: 'MICROSERVICE', label: tr('template.categoryMicroservice', 'Microservice') },\n    { value: 'FRONTEND', label: tr('template.categoryFrontend', 'Frontend') },\n    { value: 'BACKEND', label: tr('template.categoryBackend', 'Backend') },\n    { value: 'FULLSTACK', label: tr('template.categoryFullstack', 'Fullstack') },\n    { value: 'INFRASTRUCTURE', label: tr('template.categoryInfrastructure', 'Infrastructure') },\n    { value: 'LIBRARY', label: tr('template.categoryLibrary', 'Library') },\n    { value: 'CUSTOM', label: tr('template.categoryCustom', 'Custom') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [categoryFilter, setCategoryFilter] = useState('all');\n  const [accumulated, setAccumulated] = useState<TemplateCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListTemplatesQuery({\n    variables: {\n      filter: {\n        category: categoryFilter !== 'all' ? categoryFilter : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): TemplateCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        category: (item.category as string) || null,\n        cloneCount: (item.cloneCount as number) || 0,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  useEffect(() => {\n    const items = data?.vibecontrolsTemplates?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsTemplates?.items, mapItems]);\n\n  const total = data?.vibecontrolsTemplates?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const templates = accumulated;\n  const filteredTemplates = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsTemplates) return prev;\n          const prevList = prev.vibecontrolsTemplates;\n          const nextList = fetchMoreResult.vibecontrolsTemplates;\n          return {\n            ...prev,\n            vibecontrolsTemplates: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  const handleTemplateSelect = (tmpl: TemplateCardData) => {\n    navigate(`/templates/${tmpl.id}`);\n  };\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  if (error && templates.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('template.failedLoad', 'Failed to load templates')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('template.title', 'Templates')}\n        description={tr('template.description', '{{total}} templates available', {\n          total: templates.length,\n        })}\n        actions={\n          <button\n            onClick={() => refetch()}\n            disabled={loading}\n            className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n            title={tr('common.refresh', 'Refresh')}\n          >\n            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n          </button>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n        <SearchInput\n          value={searchQuery}\n          onChange={setSearchQuery}\n          placeholder={tr('template.searchPlaceholder', 'Search templates...')}\n          className=\"flex-1 sm:w-64 sm:flex-none\"\n        />\n        <FilterDropdown\n          label={tr('template.filterCategory', 'Category')}\n          value={categoryFilter}\n          options={categoryOptions}\n          onChange={setCategoryFilter}\n        />\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('template.showingResults', 'Showing {{filtered}} of {{total}} templates', {\n          filtered: filteredTemplates.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && templates.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredTemplates.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"template-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredTemplates.map((tmpl) => (\n              <MotionItem key={tmpl.id}>\n                <TemplateCard template={tmpl} onOpen={handleTemplateSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<FileCode className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || categoryFilter !== 'all'\n              ? tr('template.emptyNoResults', 'No templates found')\n              : tr('template.emptyNoTemplates', 'No templates yet')\n          }\n          description={\n            searchQuery || categoryFilter !== 'all'\n              ? tr('template.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'template.emptyCreate',\n                  'Templates will appear here when components are published as templates'\n                )\n          }\n          action={\n            !searchQuery && categoryFilter === 'all' ? (\n              <GetHelpButton prompt=\"What is a Template in VibeControls and how do I create one?\" />\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredTemplates.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore\n              ? tr('common.loading', 'Loading...')\n              : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n    </MotionPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,IAAgB;CAC9B,IAAM,IAAW,GAAiB,EAC5B,EAAE,SAAM,GAAS,EACjB,EAAE,kBAAe,WAAW,MAAuB,GAAgB,EAEnE,IAAK,GACR,GAAa,GAAkB,MAAqD;EACnF,IAAM,IAAa,EAAE,GAAK,EAAO,EAC3B,IAAW,MAAe,IAAM,IAAW;AAEjD,SADK,IACE,OAAO,QAAQ,EAAO,CAAC,QAC3B,GAAK,CAAC,GAAU,OAAgB,EAAI,QAAQ,KAAK,EAAS,KAAK,OAAO,EAAW,CAAC,EACnF,EACD,GAJmB;IAMtB,CAAC,EAAE,CACJ,EAEK,IAAkB;EACtB;GAAE,OAAO;GAAO,OAAO,EAAG,0BAA0B,iBAAiB;GAAE;EACvE;GAAE,OAAO;GAAW,OAAO,EAAG,4BAA4B,UAAU;GAAE;EACtE;GAAE,OAAO;GAAgB,OAAO,EAAG,iCAAiC,eAAe;GAAE;EACrF;GAAE,OAAO;GAAY,OAAO,EAAG,6BAA6B,WAAW;GAAE;EACzE;GAAE,OAAO;GAAW,OAAO,EAAG,4BAA4B,UAAU;GAAE;EACtE;GAAE,OAAO;GAAa,OAAO,EAAG,8BAA8B,YAAY;GAAE;EAC5E;GAAE,OAAO;GAAkB,OAAO,EAAG,mCAAmC,iBAAiB;GAAE;EAC3F;GAAE,OAAO;GAAW,OAAO,EAAG,4BAA4B,UAAU;GAAE;EACtE;GAAE,OAAO;GAAU,OAAO,EAAG,2BAA2B,SAAS;GAAE;EACpE,EAGK,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAgB,KAAqB,EAAS,MAAM,EACrD,CAAC,GAAa,KAAkB,EAA6B,EAAE,CAAC,EAChE,CAAC,GAAa,KAAkB,EAAS,GAAM,EAE/C,EAAE,SAAM,YAAS,UAAO,YAAS,iBAAc,EAAsB;EACzE,WAAW;GACT,QAAQ;IACN,UAAU,MAAmB,QAAyB,KAAA,IAAjB;IACrC,QAAQ,KAAe,KAAA;IACxB;GACD,YAAY;IAAE,OAAO;IAAW,QAAQ;IAAG;GAC5C;EACD,aAAa;EACb,6BAA6B;EAC9B,CAAC,EAEI,IAAW,GACd,MACC,EAAM,KAAK,OAAU;EACnB,IAAI,EAAK;EACT,MAAM,EAAK;EACX,aAAc,EAAK,eAA0B;EAC7C,UAAW,EAAK,YAAuB;EACvC,YAAa,EAAK,cAAyB;EAC3C,MAAO,EAAK,QAAqB,EAAE;EACnC,WAAW,EAAK;EAChB,WAAW,EAAK;EACjB,EAAE,EACL,EAAE,CACH;AAED,SAAgB;AAEd,IAAe,EADD,GAAM,uBAAuB,SAAS,EAAE,CACkB,CAAC;IACxE,CAAC,GAAM,uBAAuB,OAAO,EAAS,CAAC;CAElD,IAAM,IAAQ,GAAM,uBAAuB,SAAS,GAC9C,IAAU,EAAY,SAAS,GAC/B,IAAY,GACZ,IAAoB,GAEpB,IAAiB,EAAY,YAAY;AACzC,aAAe,CAAC,IACpB;KAAe,GAAK;AACpB,OAAI;AACF,UAAM,EAAU;KACd,WAAW,EAAE,YAAY;MAAE,OAAO;MAAW,QAAQ,EAAY;MAAQ,EAAE;KAC3E,cAAc,GAAM,EAAE,yBAAsB;AAC1C,UAAI,CAAC,GAAiB,sBAAuB,QAAO;MACpD,IAAM,IAAW,EAAK,uBAChB,IAAW,EAAgB;AACjC,aAAO;OACL,GAAG;OACH,uBAAuB;QACrB,GAAG;QACH,OAAO,CAAC,GAAI,GAAU,SAAS,EAAE,EAAG,GAAG,EAAS,MAAM;QACtD,OAAO,EAAS;QAChB,SAAS,EAAS;QACnB;OACF;;KAEJ,CAAC;aACM;AACR,MAAe,GAAM;;;IAEtB;EAAC;EAAW,EAAY;EAAQ;EAAa;EAAQ,CAAC,EAEnD,KAAwB,MAA2B;AACvD,IAAS,cAAc,EAAK,KAAK;;AAiCnC,QA9BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAAsB;GAA0B,CAAA;EACzD,CAAA,GAEL,EAAc,EAAiB,UAAU,GAY1C,KAAS,EAAU,WAAW,IAE9B,kBAAC,GAAD;EAAY,WAAU;YACpB,kBAAC,GAAD;GACE,OAAO,EAAG,uBAAuB,2BAA2B;GAC5D,SAAS,EAAM;GACf,eAAe,GAAS;GACxB,CAAA;EACS,CAAA,GAKf,kBAAC,GAAD;EAAY,WAAU;YAAtB;GACE,kBAAC,GAAD;IACE,OAAO,EAAG,kBAAkB,YAAY;IACxC,aAAa,EAAG,wBAAwB,iCAAiC,EACvE,OAAO,EAAU,QAClB,CAAC;IACF,SACE,kBAAC,UAAD;KACE,eAAe,GAAS;KACxB,UAAU;KACV,WAAU;KACV,OAAO,EAAG,kBAAkB,UAAU;eAEtC,kBAAC,GAAD,EAAW,WAAW,WAAW,IAAU,iBAAiB,MAAQ,CAAA;KAC7D,CAAA;IAEX,CAAA;GAGF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,OAAO;KACP,UAAU;KACV,aAAa,EAAG,8BAA8B,sBAAsB;KACpE,WAAU;KACV,CAAA,EACF,kBAAC,GAAD;KACE,OAAO,EAAG,2BAA2B,WAAW;KAChD,OAAO;KACP,SAAS;KACT,UAAU;KACV,CAAA,CACE;;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAb,CACG,EAAG,2BAA2B,+CAA+C;KAC5E,UAAU,EAAkB;KAC5B;KACD,CAAC,EACD,KACC,kBAAC,QAAD;KAAM,WAAU;eAAwB,EAAG,qBAAqB,kBAAkB;KAAQ,CAAA,CAE1F;;GAGH,KAAW,EAAU,WAAW,IAC/B,kBAAC,GAAD;IAAc,SAAQ;IAAQ,OAAO;IAAK,CAAA,GACxC,EAAkB,SAAS,IAC7B,kBAAC,GAAD;IAAiB,MAAK;cACpB,kBAAC,GAAD;KAEE,SAAS;KACT,WAAU;eAET,EAAkB,KAAK,MACtB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAc,UAAU;MAAM,QAAQ;MAAwB,CAAA,EACnD,EAFI,EAAK,GAET,CACb;KACS,EATP,gBASO;IACG,CAAA,GAElB,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA;IAC1D,OACE,KAAe,MAAmB,QAC9B,EAAG,2BAA2B,qBAAqB,GACnD,EAAG,6BAA6B,mBAAmB;IAEzD,aACE,KAAe,MAAmB,QAC9B,EAAG,8BAA8B,uCAAuC,GACxE,EACE,wBACA,wEACD;IAEP,QACE,CAAC,KAAe,MAAmB,QACjC,kBAAC,GAAD,EAAe,QAAO,+DAAgE,CAAA,GACpF,KAAA;IAEN,CAAA;GAIH,KAAW,EAAkB,SAAS,KACrC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,SAAS;KACT,UAAU;KACV,WAAU;eAET,IACG,EAAG,kBAAkB,aAAa,GAClC,EAAG,mBAAmB,YAAY;KAC/B,CAAA;IACL,CAAA;GAEG;MA3HX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAAwC;IAAkB,CAAA,EACxE,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA,CACA;;EACF,CAAA"}
+{"version":3,"file":"TemplatesPage.js","names":[],"sources":["../../src/pages/TemplatesPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { FileCode, RefreshCw } from 'lucide-react';\nimport { TemplateCard } from '@/components/templates';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport type { TemplateCardData } from '@/components/templates';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListTemplatesQuery } from '@/generated/wspace-operations';\n\nexport function TemplatesPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const categoryOptions = [\n    { value: 'all', label: tr('template.allCategories', 'All Categories') },\n    { value: 'STARTER', label: tr('template.categoryStarter', 'Starter') },\n    { value: 'MICROSERVICE', label: tr('template.categoryMicroservice', 'Microservice') },\n    { value: 'FRONTEND', label: tr('template.categoryFrontend', 'Frontend') },\n    { value: 'BACKEND', label: tr('template.categoryBackend', 'Backend') },\n    { value: 'FULLSTACK', label: tr('template.categoryFullstack', 'Fullstack') },\n    { value: 'INFRASTRUCTURE', label: tr('template.categoryInfrastructure', 'Infrastructure') },\n    { value: 'LIBRARY', label: tr('template.categoryLibrary', 'Library') },\n    { value: 'CUSTOM', label: tr('template.categoryCustom', 'Custom') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [categoryFilter, setCategoryFilter] = useState('all');\n  const [accumulated, setAccumulated] = useState<TemplateCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListTemplatesQuery({\n    variables: {\n      filter: {\n        category: categoryFilter !== 'all' ? categoryFilter : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): TemplateCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        category: (item.category as string) || null,\n        cloneCount: (item.cloneCount as number) || 0,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  useEffect(() => {\n    const items = data?.vibecontrolsTemplates?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsTemplates?.items, mapItems]);\n\n  const total = data?.vibecontrolsTemplates?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const templates = accumulated;\n  const filteredTemplates = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsTemplates) return prev;\n          const prevList = prev.vibecontrolsTemplates;\n          const nextList = fetchMoreResult.vibecontrolsTemplates;\n          return {\n            ...prev,\n            vibecontrolsTemplates: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  const handleTemplateSelect = (tmpl: TemplateCardData) => {\n    navigate(`/templates/${tmpl.id}`);\n  };\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  if (error && templates.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('template.failedLoad', 'Failed to load templates')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\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('template.title', 'Templates')}\n        description={tr('template.description', '{{total}} templates available', {\n          total: templates.length,\n        })}\n        actions={\n          <button\n            onClick={() => refetch()}\n            disabled={loading}\n            className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n            title={tr('common.refresh', 'Refresh')}\n          >\n            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n          </button>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n        <SearchInput\n          value={searchQuery}\n          onChange={setSearchQuery}\n          placeholder={tr('template.searchPlaceholder', 'Search templates...')}\n          className=\"flex-1 sm:w-64 sm:flex-none\"\n        />\n        <FilterDropdown\n          label={tr('template.filterCategory', 'Category')}\n          value={categoryFilter}\n          options={categoryOptions}\n          onChange={setCategoryFilter}\n        />\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('template.showingResults', 'Showing {{filtered}} of {{total}} templates', {\n          filtered: filteredTemplates.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && templates.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredTemplates.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"template-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredTemplates.map((tmpl) => (\n              <MotionItem key={tmpl.id}>\n                <TemplateCard template={tmpl} onOpen={handleTemplateSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<FileCode className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || categoryFilter !== 'all'\n              ? tr('template.emptyNoResults', 'No templates found')\n              : tr('template.emptyNoTemplates', 'No templates yet')\n          }\n          description={\n            searchQuery || categoryFilter !== 'all'\n              ? tr('template.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'template.emptyCreate',\n                  'Templates will appear here when components are published as templates'\n                )\n          }\n          action={\n            !searchQuery && categoryFilter === 'all' ? (\n              <GetHelpButton prompt=\"What is a Template in VibeControls and how do I create one?\" />\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredTemplates.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore ? tr('common.loading', 'Loading...') : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}