@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/analytics/AnalyticsEntityTabs.js

@@ -0,0 +1,52 @@
+import { ANALYTICS_TAB_CONFIGS as e } from "./types.js";
+import { useRef as t } from "react";
+import { useI18n as n } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsEntityTabs.tsx
+function i({ activeTab: i, onTabChange: a }) {
+	let { t: o } = n(), s = t([]), c = (e, t) => {
+		let n = o(e);
+		return n === e ? t : n;
+	}, l = (t, n) => {
+		let r = e.length - 1;
+		if (t.key === "ArrowRight") {
+			t.preventDefault();
+			let i = n === r ? 0 : n + 1;
+			a(e[i].id), s.current[i]?.focus();
+		}
+		if (t.key === "ArrowLeft") {
+			t.preventDefault();
+			let i = n === 0 ? r : n - 1;
+			a(e[i].id), s.current[i]?.focus();
+		}
+		t.key === "Home" && (t.preventDefault(), a(e[0].id), s.current[0]?.focus()), t.key === "End" && (t.preventDefault(), a(e[r].id), s.current[r]?.focus());
+	};
+	return /* @__PURE__ */ r("div", {
+		role: "tablist",
+		"aria-label": c("analytics.entityTabs", "Analytics sections"),
+		className: "flex gap-1 overflow-x-auto rounded-lg border border-border-default bg-bg-sunken p-1",
+		style: {
+			scrollbarWidth: "none",
+			WebkitOverflowScrolling: "touch"
+		},
+		children: e.map((e, t) => /* @__PURE__ */ r("button", {
+			ref: (e) => {
+				s.current[t] = e;
+			},
+			id: `analytics-tab-${e.id}`,
+			type: "button",
+			role: "tab",
+			"aria-selected": i === e.id,
+			"aria-controls": `analytics-panel-${e.id}`,
+			tabIndex: i === e.id ? 0 : -1,
+			onClick: () => a(e.id),
+			onKeyDown: (e) => l(e, t),
+			className: `flex-shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${i === e.id ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:bg-bg-surface/50 hover:text-text-primary"}`,
+			children: c(e.labelKey, e.fallback)
+		}, e.id))
+	});
+}
+//#endregion
+export { i as AnalyticsEntityTabs };
+
+//# sourceMappingURL=AnalyticsEntityTabs.js.map

package/dist/components/analytics/AnalyticsEntityTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsEntityTabs.js","names":[],"sources":["../../../src/components/analytics/AnalyticsEntityTabs.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ANALYTICS_TAB_CONFIGS, type EntityTab } from './types';\n\ninterface AnalyticsEntityTabsProps {\n  activeTab: EntityTab;\n  onTabChange: (tab: EntityTab) => void;\n}\n\nexport function AnalyticsEntityTabs({ activeTab, onTabChange }: AnalyticsEntityTabsProps) {\n  const { t } = useI18n();\n  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const tr = (key: string, fallback: string) => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const lastIndex = ANALYTICS_TAB_CONFIGS.length - 1;\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextIndex = index === lastIndex ? 0 : index + 1;\n      onTabChange(ANALYTICS_TAB_CONFIGS[nextIndex].id);\n      tabRefs.current[nextIndex]?.focus();\n    }\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      const previousIndex = index === 0 ? lastIndex : index - 1;\n      onTabChange(ANALYTICS_TAB_CONFIGS[previousIndex].id);\n      tabRefs.current[previousIndex]?.focus();\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      onTabChange(ANALYTICS_TAB_CONFIGS[0].id);\n      tabRefs.current[0]?.focus();\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      onTabChange(ANALYTICS_TAB_CONFIGS[lastIndex].id);\n      tabRefs.current[lastIndex]?.focus();\n    }\n  };\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={tr('analytics.entityTabs', 'Analytics sections')}\n      className=\"flex gap-1 overflow-x-auto rounded-lg border border-border-default bg-bg-sunken p-1\"\n      style={{ scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch' }}\n    >\n      {ANALYTICS_TAB_CONFIGS.map((tab, index) => (\n        <button\n          key={tab.id}\n          ref={(element) => {\n            tabRefs.current[index] = element;\n          }}\n          id={`analytics-tab-${tab.id}`}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={activeTab === tab.id}\n          aria-controls={`analytics-panel-${tab.id}`}\n          tabIndex={activeTab === tab.id ? 0 : -1}\n          onClick={() => onTabChange(tab.id)}\n          onKeyDown={(event) => handleKeyDown(event, index)}\n          className={`flex-shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${\n            activeTab === tab.id\n              ? 'bg-bg-surface text-text-primary shadow-sm'\n              : 'text-text-secondary hover:bg-bg-surface/50 hover:text-text-primary'\n          }`}\n        >\n          {tr(tab.labelKey, tab.fallback)}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,EAAoB,EAAE,cAAW,kBAAyC;CACxF,IAAM,EAAE,SAAM,GAAS,EACjB,IAAU,EAAwC,EAAE,CAAC,EAErD,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAG9B,KAAiB,GAAyC,MAAkB;EAChF,IAAM,IAAY,EAAsB,SAAS;AAEjD,MAAI,EAAM,QAAQ,cAAc;AAC9B,KAAM,gBAAgB;GACtB,IAAM,IAAY,MAAU,IAAY,IAAI,IAAQ;AAEpD,GADA,EAAY,EAAsB,GAAW,GAAG,EAChD,EAAQ,QAAQ,IAAY,OAAO;;AAGrC,MAAI,EAAM,QAAQ,aAAa;AAC7B,KAAM,gBAAgB;GACtB,IAAM,IAAgB,MAAU,IAAI,IAAY,IAAQ;AAExD,GADA,EAAY,EAAsB,GAAe,GAAG,EACpD,EAAQ,QAAQ,IAAgB,OAAO;;AASzC,EANI,EAAM,QAAQ,WAChB,EAAM,gBAAgB,EACtB,EAAY,EAAsB,GAAG,GAAG,EACxC,EAAQ,QAAQ,IAAI,OAAO,GAGzB,EAAM,QAAQ,UAChB,EAAM,gBAAgB,EACtB,EAAY,EAAsB,GAAW,GAAG,EAChD,EAAQ,QAAQ,IAAY,OAAO;;AAIvC,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,EAAG,wBAAwB,qBAAqB;EAC5D,WAAU;EACV,OAAO;GAAE,gBAAgB;GAAQ,yBAAyB;GAAS;YAElE,EAAsB,KAAK,GAAK,MAC/B,kBAAC,UAAD;GAEE,MAAM,MAAY;AAChB,MAAQ,QAAQ,KAAS;;GAE3B,IAAI,iBAAiB,EAAI;GACzB,MAAK;GACL,MAAK;GACL,iBAAe,MAAc,EAAI;GACjC,iBAAe,mBAAmB,EAAI;GACtC,UAAU,MAAc,EAAI,KAAK,IAAI;GACrC,eAAe,EAAY,EAAI,GAAG;GAClC,YAAY,MAAU,EAAc,GAAO,EAAM;GACjD,WAAW,gGACT,MAAc,EAAI,KACd,8CACA;aAGL,EAAG,EAAI,UAAU,EAAI,SAAS;GACxB,EAnBF,EAAI,GAmBF,CACT;EACE,CAAA"}

package/dist/components/analytics/AnalyticsFilterBar.d.ts

@@ -0,0 +1,15 @@
+import { TimeRange, Granularity } from './types';
+
+interface AnalyticsFilterBarProps {
+    timeRange: TimeRange;
+    granularity: Granularity;
+    onTimeRangeChange: (value: TimeRange) => void;
+    onGranularityChange: (value: Granularity) => void;
+    onRefresh: () => void;
+    loading?: boolean;
+    executionTimeMs?: number;
+    cached?: boolean;
+}
+export declare function AnalyticsFilterBar({ timeRange, granularity, onTimeRangeChange, onGranularityChange, onRefresh, loading, executionTimeMs, cached, }: AnalyticsFilterBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsFilterBar.d.ts.map

package/dist/components/analytics/AnalyticsFilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsFilterBar.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsFilterBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItD,UAAU,uBAAuB;IAC/B,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,eAAe,EACf,MAAM,GACP,EAAE,uBAAuB,2CAoDzB"}

package/dist/components/analytics/AnalyticsFilterBar.js

@@ -0,0 +1,51 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { GRANULARITY_OPTIONS as t, TIME_RANGE_OPTIONS as n } from "./types.js";
+import { Calendar as r, Clock as i, Filter as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsFilterBar.tsx
+function c({ timeRange: c, granularity: l, onTimeRangeChange: u, onGranularityChange: d, onRefresh: f, loading: p, executionTimeMs: m, cached: h }) {
+	let g = e();
+	return /* @__PURE__ */ s("div", {
+		className: "flex flex-wrap items-center gap-3 p-3 bg-bg-surface border border-border-default rounded-lg",
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ o(r, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ o("select", {
+					value: c,
+					onChange: (e) => u(e.target.value),
+					className: "text-sm bg-bg-sunken border border-border-default rounded-md px-2 py-1.5 text-text-primary focus:outline-none focus:ring-1 focus:ring-border-strong",
+					children: n.map((e) => /* @__PURE__ */ o("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ o(i, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ o("select", {
+					value: l,
+					onChange: (e) => d(e.target.value),
+					className: "text-sm bg-bg-sunken border border-border-default rounded-md px-2 py-1.5 text-text-primary focus:outline-none focus:ring-1 focus:ring-border-strong",
+					children: t.map((e) => /* @__PURE__ */ o("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				})]
+			}),
+			/* @__PURE__ */ s("button", {
+				onClick: f,
+				disabled: p,
+				className: "flex items-center gap-1.5 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary hover:bg-bg-surface-hover transition-colors disabled:opacity-50",
+				children: [/* @__PURE__ */ o(a, { className: `w-3.5 h-3.5 ${p ? "animate-spin" : ""}` }), p ? g("vibecontrols.analytics.loading", "Loading...") : g("vibecontrols.analytics.refresh", "Refresh")]
+			}),
+			m != null && /* @__PURE__ */ o("span", {
+				className: "ml-auto text-xs text-text-secondary",
+				children: h ? g("vibecontrols.analytics.cached", "Cached") : `${m}ms`
+			})
+		]
+	});
+}
+//#endregion
+export { c as AnalyticsFilterBar };
+
+//# sourceMappingURL=AnalyticsFilterBar.js.map

package/dist/components/analytics/AnalyticsFilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsFilterBar.js","names":[],"sources":["../../../src/components/analytics/AnalyticsFilterBar.tsx"],"sourcesContent":["import { Calendar, Clock, Filter } from 'lucide-react';\nimport type { TimeRange, Granularity } from './types';\nimport { TIME_RANGE_OPTIONS, GRANULARITY_OPTIONS } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AnalyticsFilterBarProps {\n  timeRange: TimeRange;\n  granularity: Granularity;\n  onTimeRangeChange: (value: TimeRange) => void;\n  onGranularityChange: (value: Granularity) => void;\n  onRefresh: () => void;\n  loading?: boolean;\n  executionTimeMs?: number;\n  cached?: boolean;\n}\n\nexport function AnalyticsFilterBar({\n  timeRange,\n  granularity,\n  onTimeRangeChange,\n  onGranularityChange,\n  onRefresh,\n  loading,\n  executionTimeMs,\n  cached,\n}: AnalyticsFilterBarProps) {\n  const tr = useTr();\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 p-3 bg-bg-surface border border-border-default rounded-lg\">\n      <div className=\"flex items-center gap-2\">\n        <Calendar className=\"w-4 h-4 text-text-secondary\" />\n        <select\n          value={timeRange}\n          onChange={(e) => onTimeRangeChange(e.target.value as TimeRange)}\n          className=\"text-sm bg-bg-sunken border border-border-default rounded-md px-2 py-1.5 text-text-primary focus:outline-none focus:ring-1 focus:ring-border-strong\"\n        >\n          {TIME_RANGE_OPTIONS.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <Clock className=\"w-4 h-4 text-text-secondary\" />\n        <select\n          value={granularity}\n          onChange={(e) => onGranularityChange(e.target.value as Granularity)}\n          className=\"text-sm bg-bg-sunken border border-border-default rounded-md px-2 py-1.5 text-text-primary focus:outline-none focus:ring-1 focus:ring-border-strong\"\n        >\n          {GRANULARITY_OPTIONS.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <button\n        onClick={onRefresh}\n        disabled={loading}\n        className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary hover:bg-bg-surface-hover transition-colors disabled:opacity-50\"\n      >\n        <Filter className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />\n        {loading\n          ? tr('vibecontrols.analytics.loading', 'Loading...')\n          : tr('vibecontrols.analytics.refresh', 'Refresh')}\n      </button>\n\n      {executionTimeMs != null && (\n        <span className=\"ml-auto text-xs text-text-secondary\">\n          {cached ? tr('vibecontrols.analytics.cached', 'Cached') : `${executionTimeMs}ms`}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAgB,EAAmB,EACjC,cACA,gBACA,sBACA,wBACA,cACA,YACA,oBACA,aAC0B;CAC1B,IAAM,IAAK,GAAO;AAClB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA,EACpD,kBAAC,UAAD;KACE,OAAO;KACP,WAAW,MAAM,EAAkB,EAAE,OAAO,MAAmB;KAC/D,WAAU;eAET,EAAmB,KAAK,MACvB,kBAAC,UAAD;MAAwB,OAAO,EAAI;gBAChC,EAAI;MACE,EAFI,EAAI,MAER,CACT;KACK,CAAA,CACL;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,EACjD,kBAAC,UAAD;KACE,OAAO;KACP,WAAW,MAAM,EAAoB,EAAE,OAAO,MAAqB;KACnE,WAAU;eAET,EAAoB,KAAK,MACxB,kBAAC,UAAD;MAAwB,OAAO,EAAI;gBAChC,EAAI;MACE,EAFI,EAAI,MAER,CACT;KACK,CAAA,CACL;;GAEN,kBAAC,UAAD;IACE,SAAS;IACT,UAAU;IACV,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAW,eAAe,IAAU,iBAAiB,MAAQ,CAAA,EACpE,IACG,EAAG,kCAAkC,aAAa,GAClD,EAAG,kCAAkC,UAAU,CAC5C;;GAER,KAAmB,QAClB,kBAAC,QAAD;IAAM,WAAU;cACb,IAAS,EAAG,iCAAiC,SAAS,GAAG,GAAG,EAAgB;IACxE,CAAA;GAEL"}

package/dist/components/analytics/AnalyticsKpiGrid.d.ts

@@ -0,0 +1,10 @@
+import { VibecontrolsAnalyticsQuery } from '../../generated/wspace-operations';
+
+interface AnalyticsKpiGridProps {
+    data: VibecontrolsAnalyticsQuery['vibecontrolsAnalytics'] | null | undefined;
+    loading?: boolean;
+    onCardClick?: (href: string) => void;
+}
+export declare function AnalyticsKpiGrid({ data, loading, onCardClick }: AnalyticsKpiGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsKpiGrid.d.ts.map

package/dist/components/analytics/AnalyticsKpiGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsKpiGrid.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsKpiGrid.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAYhF,UAAU,qBAAqB;IAC7B,IAAI,EAAE,0BAA0B,CAAC,uBAAuB,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CAwHrF"}

package/dist/components/analytics/AnalyticsKpiGrid.js

@@ -0,0 +1,112 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { StatCard as t } from "../shared/StatCard.js";
+import "../shared/index.js";
+import { Bot as n, Brain as r, FileText as i, LayoutGrid as a, Play as o, Server as s, Shield as c, StickyNote as l, Terminal as u, Webhook as d, Zap as f } from "lucide-react";
+import { jsx as p } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsKpiGrid.tsx
+function m({ data: m, loading: h, onCardClick: g }) {
+	let _ = e();
+	return h || !m ? /* @__PURE__ */ p("div", {
+		className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+		children: Array.from({ length: 12 }).map((e, t) => /* @__PURE__ */ p("div", { className: "h-24 animate-pulse rounded-lg bg-bg-sunken" }, t))
+	}) : /* @__PURE__ */ p("div", {
+		className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
+		children: [
+			{
+				title: _("vibecontrols.analytics.kpi.agents", "Agents"),
+				value: m.agents?.total ?? 0,
+				subtitle: `${m.agents?.active ?? 0} active`,
+				icon: /* @__PURE__ */ p(n, { className: "h-4 w-4" }),
+				variant: (m.agents?.staleHeartbeatCount ?? 0) > 0 ? "warning" : "default",
+				href: "/agents?tab=agents"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.targets", "Targets"),
+				value: m.targets?.total ?? 0,
+				subtitle: `${m.targets?.connectionCount ?? 0} connections`,
+				icon: /* @__PURE__ */ p(s, { className: "h-4 w-4" }),
+				href: "/agents?tab=targets"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.sessions", "Sessions"),
+				value: m.sessions?.total ?? 0,
+				subtitle: `${m.sessions?.active ?? 0} running`,
+				icon: /* @__PURE__ */ p(u, { className: "h-4 w-4" }),
+				variant: (m.sessions?.active ?? 0) > 0 ? "success" : "default",
+				href: "/sessions"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.vibes", "Vibes"),
+				value: m.vibes?.total ?? 0,
+				subtitle: `${m.vibes?.withAgent ?? 0} with agent`,
+				icon: /* @__PURE__ */ p(f, { className: "h-4 w-4" }),
+				href: "/vibes"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.actions", "Actions"),
+				value: m.actions?.total ?? 0,
+				subtitle: m.actions?.successRate == null ? void 0 : `${m.actions.successRate.toFixed(1)}% success`,
+				icon: /* @__PURE__ */ p(o, { className: "h-4 w-4" }),
+				href: "/actions"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.executions", "Executions"),
+				value: m.actions?.totalExecutions ?? 0,
+				subtitle: m.actions?.avgDurationMs == null ? void 0 : `${Math.round(m.actions.avgDurationMs)}ms avg`,
+				icon: /* @__PURE__ */ p(o, { className: "h-4 w-4" }),
+				href: "/actions"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.webhooks", "Webhooks"),
+				value: m.webhooks?.total ?? 0,
+				subtitle: `${m.webhooks?.active ?? 0} active`,
+				icon: /* @__PURE__ */ p(d, { className: "h-4 w-4" }),
+				variant: (m.webhooks?.totalFailures ?? 0) > 0 ? "warning" : "default",
+				href: "/webhooks"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.aiEvents", "AI Events"),
+				value: m.aiEvents?.total ?? 0,
+				icon: /* @__PURE__ */ p(r, { className: "h-4 w-4" }),
+				href: "/ai"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.vibeDecks", "Vibe Decks"),
+				value: m.vibeDecks?.totalDecks ?? 0,
+				subtitle: `${m.vibeDecks?.totalButtons ?? 0} buttons`,
+				icon: /* @__PURE__ */ p(a, { className: "h-4 w-4" }),
+				href: "/vibedeck"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.auditLogs", "Audit Logs"),
+				value: m.audit?.total ?? 0,
+				icon: /* @__PURE__ */ p(c, { className: "h-4 w-4" }),
+				href: "/audit"
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.docs", "Docs"),
+				value: m.docs?.totalSites ?? 0,
+				subtitle: `${m.docs?.totalPages ?? 0} pages`,
+				icon: /* @__PURE__ */ p(i, { className: "h-4 w-4" })
+			},
+			{
+				title: _("vibecontrols.analytics.kpi.notes", "Notes"),
+				value: m.notes?.total ?? 0,
+				subtitle: `${m.notes?.pinned ?? 0} pinned`,
+				icon: /* @__PURE__ */ p(l, { className: "h-4 w-4" }),
+				href: "/vibes"
+			}
+		].map((e) => /* @__PURE__ */ p(t, {
+			title: e.title,
+			value: e.value,
+			subtitle: e.subtitle,
+			icon: e.icon,
+			variant: e.variant,
+			onClick: g && e.href ? () => g(e.href) : void 0
+		}, e.title))
+	});
+}
+//#endregion
+export { m as AnalyticsKpiGrid };
+
+//# sourceMappingURL=AnalyticsKpiGrid.js.map

package/dist/components/analytics/AnalyticsKpiGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsKpiGrid.js","names":[],"sources":["../../../src/components/analytics/AnalyticsKpiGrid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  Bot,\n  Brain,\n  FileText,\n  LayoutGrid,\n  Play,\n  Server,\n  Shield,\n  StickyNote,\n  Terminal,\n  Webhook,\n  Zap,\n} from 'lucide-react';\nimport { StatCard } from '@/components/shared';\nimport type { VibecontrolsAnalyticsQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface KpiItem {\n  title: string;\n  value: number;\n  subtitle?: string;\n  icon: ReactNode;\n  variant?: 'default' | 'success' | 'warning' | 'error';\n  href?: string;\n}\n\ninterface AnalyticsKpiGridProps {\n  data: VibecontrolsAnalyticsQuery['vibecontrolsAnalytics'] | null | undefined;\n  loading?: boolean;\n  onCardClick?: (href: string) => void;\n}\n\nexport function AnalyticsKpiGrid({ data, loading, onCardClick }: AnalyticsKpiGridProps) {\n  const tr = useTr();\n  if (loading || !data) {\n    return (\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n        {Array.from({ length: 12 }).map((_, index) => (\n          <div key={index} className=\"h-24 animate-pulse rounded-lg bg-bg-sunken\" />\n        ))}\n      </div>\n    );\n  }\n\n  const kpis: KpiItem[] = [\n    {\n      title: tr('vibecontrols.analytics.kpi.agents', 'Agents'),\n      value: data.agents?.total ?? 0,\n      subtitle: `${data.agents?.active ?? 0} active`,\n      icon: <Bot className=\"h-4 w-4\" />,\n      variant: (data.agents?.staleHeartbeatCount ?? 0) > 0 ? 'warning' : 'default',\n      href: '/agents?tab=agents',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.targets', 'Targets'),\n      value: data.targets?.total ?? 0,\n      subtitle: `${data.targets?.connectionCount ?? 0} connections`,\n      icon: <Server className=\"h-4 w-4\" />,\n      href: '/agents?tab=targets',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.sessions', 'Sessions'),\n      value: data.sessions?.total ?? 0,\n      subtitle: `${data.sessions?.active ?? 0} running`,\n      icon: <Terminal className=\"h-4 w-4\" />,\n      variant: (data.sessions?.active ?? 0) > 0 ? 'success' : 'default',\n      href: '/sessions',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.vibes', 'Vibes'),\n      value: data.vibes?.total ?? 0,\n      subtitle: `${data.vibes?.withAgent ?? 0} with agent`,\n      icon: <Zap className=\"h-4 w-4\" />,\n      href: '/vibes',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.actions', 'Actions'),\n      value: data.actions?.total ?? 0,\n      subtitle:\n        data.actions?.successRate != null\n          ? `${data.actions.successRate.toFixed(1)}% success`\n          : undefined,\n      icon: <Play className=\"h-4 w-4\" />,\n      href: '/actions',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.executions', 'Executions'),\n      value: data.actions?.totalExecutions ?? 0,\n      subtitle:\n        data.actions?.avgDurationMs != null\n          ? `${Math.round(data.actions.avgDurationMs)}ms avg`\n          : undefined,\n      icon: <Play className=\"h-4 w-4\" />,\n      href: '/actions',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.webhooks', 'Webhooks'),\n      value: data.webhooks?.total ?? 0,\n      subtitle: `${data.webhooks?.active ?? 0} active`,\n      icon: <Webhook className=\"h-4 w-4\" />,\n      variant: (data.webhooks?.totalFailures ?? 0) > 0 ? 'warning' : 'default',\n      href: '/webhooks',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.aiEvents', 'AI Events'),\n      value: data.aiEvents?.total ?? 0,\n      icon: <Brain className=\"h-4 w-4\" />,\n      href: '/ai',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.vibeDecks', 'Vibe Decks'),\n      value: data.vibeDecks?.totalDecks ?? 0,\n      subtitle: `${data.vibeDecks?.totalButtons ?? 0} buttons`,\n      icon: <LayoutGrid className=\"h-4 w-4\" />,\n      href: '/vibedeck',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.auditLogs', 'Audit Logs'),\n      value: data.audit?.total ?? 0,\n      icon: <Shield className=\"h-4 w-4\" />,\n      href: '/audit',\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.docs', 'Docs'),\n      value: data.docs?.totalSites ?? 0,\n      subtitle: `${data.docs?.totalPages ?? 0} pages`,\n      icon: <FileText className=\"h-4 w-4\" />,\n    },\n    {\n      title: tr('vibecontrols.analytics.kpi.notes', 'Notes'),\n      value: data.notes?.total ?? 0,\n      subtitle: `${data.notes?.pinned ?? 0} pinned`,\n      icon: <StickyNote className=\"h-4 w-4\" />,\n      href: '/vibes',\n    },\n  ];\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\">\n      {kpis.map((kpi) => (\n        <StatCard\n          key={kpi.title}\n          title={kpi.title}\n          value={kpi.value}\n          subtitle={kpi.subtitle}\n          icon={kpi.icon}\n          variant={kpi.variant}\n          onClick={onCardClick && kpi.href ? () => onCardClick(kpi.href!) : undefined}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/analytics/AnalyticsTimeSeriesChart.d.ts

@@ -0,0 +1,16 @@
+interface TimeSeriesDataset {
+    label: string;
+    data: Array<{
+        timestamp: string;
+        value: number;
+    }> | null | undefined;
+    color: string;
+}
+interface AnalyticsTimeSeriesChartProps {
+    datasets: TimeSeriesDataset[];
+    title?: string;
+    height?: number;
+}
+export declare function AnalyticsTimeSeriesChart({ datasets, title, height, }: AnalyticsTimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnalyticsTimeSeriesChart.d.ts.map

package/dist/components/analytics/AnalyticsTimeSeriesChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsTimeSeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/AnalyticsTimeSeriesChart.tsx"],"names":[],"mappings":"AAaA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,6BAA6B;IACrC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAUD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,KAAK,EACL,MAAY,GACb,EAAE,6BAA6B,2CA+F/B"}

package/dist/components/analytics/AnalyticsTimeSeriesChart.js

@@ -0,0 +1,115 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { Legend as t } from "../../node_modules/recharts/es6/component/Legend.js";
+import { Tooltip as n } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as r } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { CartesianGrid as i } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Area as a } from "../../node_modules/recharts/es6/cartesian/Area.js";
+import { XAxis as o } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as s } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { AreaChart as c } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { useMemo as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/analytics/AnalyticsTimeSeriesChart.tsx
+var f = [
+	"var(--color-text-link)",
+	"var(--color-status-success-text)",
+	"var(--color-accent-purple)",
+	"var(--color-status-warning-text)",
+	"var(--color-status-error-text)"
+];
+function p({ datasets: p, title: m, height: h = 300 }) {
+	let g = l(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of p) if (t.data) for (let n of t.data) {
+			let r = new Date(n.timestamp).toISOString();
+			e.has(r) || e.set(r, {}), e.get(r)[t.label] = n.value;
+		}
+		return Array.from(e.entries()).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => ({
+			timestamp: e,
+			...t
+		}));
+	}, [p]), _ = (e) => {
+		let t = new Date(e);
+		return `${t.getMonth() + 1}/${t.getDate()}`;
+	}, v = (e) => new Date(e).toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	}), y = e();
+	return g.length === 0 ? /* @__PURE__ */ d("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [m && /* @__PURE__ */ u("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: m
+		}), /* @__PURE__ */ u("div", {
+			className: "flex items-center justify-center h-[200px] text-text-secondary text-sm",
+			children: y("vibecontrols.analytics.noDataForRange", "No data available for the selected time range")
+		})]
+	}) : /* @__PURE__ */ d("div", {
+		className: "bg-bg-surface border border-border-default rounded-lg p-4",
+		children: [m && /* @__PURE__ */ u("h3", {
+			className: "text-sm font-medium text-text-primary mb-3",
+			children: m
+		}), /* @__PURE__ */ u(r, {
+			width: "100%",
+			height: h,
+			children: /* @__PURE__ */ d(c, {
+				data: g,
+				margin: {
+					top: 5,
+					right: 10,
+					left: 0,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ u(i, {
+						strokeDasharray: "3 3",
+						stroke: "var(--color-border-default)",
+						opacity: .3
+					}),
+					/* @__PURE__ */ u(o, {
+						dataKey: "timestamp",
+						tickFormatter: _,
+						tick: {
+							fill: "var(--color-text-secondary)",
+							fontSize: 11
+						},
+						axisLine: { stroke: "var(--color-border-default)" }
+					}),
+					/* @__PURE__ */ u(s, {
+						tick: {
+							fill: "var(--color-text-secondary)",
+							fontSize: 11
+						},
+						axisLine: { stroke: "var(--color-border-default)" },
+						allowDecimals: !1
+					}),
+					/* @__PURE__ */ u(n, {
+						labelFormatter: v,
+						contentStyle: {
+							background: "var(--color-bg-surface)",
+							border: "1px solid var(--color-border-default)",
+							borderRadius: "6px",
+							fontSize: "12px"
+						}
+					}),
+					/* @__PURE__ */ u(t, { wrapperStyle: { fontSize: "12px" } }),
+					p.map((e, t) => /* @__PURE__ */ u(a, {
+						type: "monotone",
+						dataKey: e.label,
+						stroke: e.color || f[t % f.length],
+						fill: e.color || f[t % f.length],
+						fillOpacity: .1,
+						strokeWidth: 2,
+						dot: !1
+					}, e.label))
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { p as AnalyticsTimeSeriesChart };
+
+//# sourceMappingURL=AnalyticsTimeSeriesChart.js.map

package/dist/components/analytics/AnalyticsTimeSeriesChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsTimeSeriesChart.js","names":[],"sources":["../../../src/components/analytics/AnalyticsTimeSeriesChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  ResponsiveContainer,\n  AreaChart,\n  Area,\n  XAxis,\n  YAxis,\n  Tooltip,\n  Legend,\n  CartesianGrid,\n} from 'recharts';\n\ninterface TimeSeriesDataset {\n  label: string;\n  data: Array<{ timestamp: string; value: number }> | null | undefined;\n  color: string;\n}\n\ninterface AnalyticsTimeSeriesChartProps {\n  datasets: TimeSeriesDataset[];\n  title?: string;\n  height?: number;\n}\n\nconst COLORS = [\n  'var(--color-text-link)',\n  'var(--color-status-success-text)',\n  'var(--color-accent-purple)',\n  'var(--color-status-warning-text)',\n  'var(--color-status-error-text)',\n];\n\nexport function AnalyticsTimeSeriesChart({\n  datasets,\n  title,\n  height = 300,\n}: AnalyticsTimeSeriesChartProps) {\n  const chartData = useMemo(() => {\n    // Merge all datasets into a single array keyed by timestamp\n    const map = new Map<string, Record<string, number>>();\n\n    for (const ds of datasets) {\n      if (!ds.data) continue;\n      for (const point of ds.data) {\n        const ts = new Date(point.timestamp).toISOString();\n        if (!map.has(ts)) map.set(ts, {});\n        map.get(ts)![ds.label] = point.value;\n      }\n    }\n\n    return Array.from(map.entries())\n      .sort(([a], [b]) => a.localeCompare(b))\n      .map(([ts, values]) => ({\n        timestamp: ts,\n        ...values,\n      }));\n  }, [datasets]);\n\n  const formatDate = (ts: string) => {\n    const d = new Date(ts);\n    return `${d.getMonth() + 1}/${d.getDate()}`;\n  };\n\n  const formatTooltipDate = (ts: string) => {\n    return new Date(ts).toLocaleString(undefined, {\n      month: 'short',\n      day: 'numeric',\n      hour: '2-digit',\n      minute: '2-digit',\n    });\n  };\n\n  const tr = useTr();\n\n  if (chartData.length === 0) {\n    return (\n      <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n        {title && <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>}\n        <div className=\"flex items-center justify-center h-[200px] text-text-secondary text-sm\">\n          {tr(\n            'vibecontrols.analytics.noDataForRange',\n            'No data available for the selected time range'\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n      {title && <h3 className=\"text-sm font-medium text-text-primary mb-3\">{title}</h3>}\n      <ResponsiveContainer width=\"100%\" height={height}>\n        <AreaChart data={chartData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.3} />\n          <XAxis\n            dataKey=\"timestamp\"\n            tickFormatter={formatDate}\n            tick={{ fill: 'var(--color-text-secondary)', fontSize: 11 }}\n            axisLine={{ stroke: 'var(--color-border-default)' }}\n          />\n          <YAxis\n            tick={{ fill: 'var(--color-text-secondary)', fontSize: 11 }}\n            axisLine={{ stroke: 'var(--color-border-default)' }}\n            allowDecimals={false}\n          />\n          <Tooltip\n            labelFormatter={formatTooltipDate}\n            contentStyle={{\n              background: 'var(--color-bg-surface)',\n              border: '1px solid var(--color-border-default)',\n              borderRadius: '6px',\n              fontSize: '12px',\n            }}\n          />\n          <Legend wrapperStyle={{ fontSize: '12px' }} />\n          {datasets.map((ds, i) => (\n            <Area\n              key={ds.label}\n              type=\"monotone\"\n              dataKey={ds.label}\n              stroke={ds.color || COLORS[i % COLORS.length]}\n              fill={ds.color || COLORS[i % COLORS.length]}\n              fillOpacity={0.1}\n              strokeWidth={2}\n              dot={false}\n            />\n          ))}\n        </AreaChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAM,IAAS;CACb;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,EAAyB,EACvC,aACA,UACA,YAAS,OACuB;CAChC,IAAM,IAAY,QAAc;EAE9B,IAAM,oBAAM,IAAI,KAAqC;AAErD,OAAK,IAAM,KAAM,EACV,OAAG,KACR,MAAK,IAAM,KAAS,EAAG,MAAM;GAC3B,IAAM,IAAK,IAAI,KAAK,EAAM,UAAU,CAAC,aAAa;AAElD,GADK,EAAI,IAAI,EAAG,IAAE,EAAI,IAAI,GAAI,EAAE,CAAC,EACjC,EAAI,IAAI,EAAG,CAAE,EAAG,SAAS,EAAM;;AAInC,SAAO,MAAM,KAAK,EAAI,SAAS,CAAC,CAC7B,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC,CACtC,KAAK,CAAC,GAAI,QAAa;GACtB,WAAW;GACX,GAAG;GACJ,EAAE;IACJ,CAAC,EAAS,CAAC,EAER,KAAc,MAAe;EACjC,IAAM,IAAI,IAAI,KAAK,EAAG;AACtB,SAAO,GAAG,EAAE,UAAU,GAAG,EAAE,GAAG,EAAE,SAAS;IAGrC,KAAqB,MAClB,IAAI,KAAK,EAAG,CAAC,eAAe,KAAA,GAAW;EAC5C,OAAO;EACP,KAAK;EACL,MAAM;EACN,QAAQ;EACT,CAAC,EAGE,IAAK,GAAO;AAgBlB,QAdI,EAAU,WAAW,IAErB,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACjF,kBAAC,OAAD;GAAK,WAAU;aACZ,EACC,yCACA,gDACD;GACG,CAAA,CACF;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,KAAS,kBAAC,MAAD;GAAI,WAAU;aAA8C;GAAW,CAAA,EACjF,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACxC,kBAAC,GAAD;IAAW,MAAM;IAAW,QAAQ;KAAE,KAAK;KAAG,OAAO;KAAI,MAAM;KAAG,QAAQ;KAAG;cAA7E;KACE,kBAAC,GAAD;MAAe,iBAAgB;MAAM,QAAO;MAA8B,SAAS;MAAO,CAAA;KAC1F,kBAAC,GAAD;MACE,SAAQ;MACR,eAAe;MACf,MAAM;OAAE,MAAM;OAA+B,UAAU;OAAI;MAC3D,UAAU,EAAE,QAAQ,+BAA+B;MACnD,CAAA;KACF,kBAAC,GAAD;MACE,MAAM;OAAE,MAAM;OAA+B,UAAU;OAAI;MAC3D,UAAU,EAAE,QAAQ,+BAA+B;MACnD,eAAe;MACf,CAAA;KACF,kBAAC,GAAD;MACE,gBAAgB;MAChB,cAAc;OACZ,YAAY;OACZ,QAAQ;OACR,cAAc;OACd,UAAU;OACX;MACD,CAAA;KACF,kBAAC,GAAD,EAAQ,cAAc,EAAE,UAAU,QAAQ,EAAI,CAAA;KAC7C,EAAS,KAAK,GAAI,MACjB,kBAAC,GAAD;MAEE,MAAK;MACL,SAAS,EAAG;MACZ,QAAQ,EAAG,SAAS,EAAO,IAAI,EAAO;MACtC,MAAM,EAAG,SAAS,EAAO,IAAI,EAAO;MACpC,aAAa;MACb,aAAa;MACb,KAAK;MACL,EARK,EAAG,MAQR,CACF;KACQ;;GACQ,CAAA,CAClB"}

package/dist/components/analytics/SandboxAnalyticsSection.d.ts

@@ -0,0 +1,9 @@
+/**
+ * SandboxAnalyticsSection
+ *
+ * Sandbox infrastructure metrics rendered inside the VibeControls analytics
+ * page. Mirrors the previous Sandbox > Admin tab (now removed) so all
+ * analytics live under /vibecontrols/analytics.
+ */
+export declare function SandboxAnalyticsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SandboxAnalyticsSection.d.ts.map

package/dist/components/analytics/SandboxAnalyticsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxAnalyticsSection.d.ts","sourceRoot":"","sources":["../../../src/components/analytics/SandboxAnalyticsSection.tsx"],"names":[],"mappings":"AAuDA;;;;;;GAMG;AACH,wBAAgB,uBAAuB,4CA4HtC"}

package/dist/components/analytics/SandboxAnalyticsSection.js

@@ -0,0 +1,185 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useGetRecentSandboxActivityQuery as t, useGetSandboxStatsQuery as n } from "../../generated/wspace-operations.js";
+import { useVibeControls as r } from "../../providers/VibeControlsProvider.js";
+import { Activity as i, Box as a, Cpu as o, MemoryStick as s, TimerOff as c, TrendingUp as l, XCircle as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/analytics/SandboxAnalyticsSection.tsx
+function p({ icon: e, label: t, value: n, subtext: r, accent: i = "text-text-primary" }) {
+	return /* @__PURE__ */ d("div", {
+		className: "rounded-lg border border-border-default bg-bg-surface p-5 transition-shadow hover:shadow-sm",
+		children: /* @__PURE__ */ f("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ f("div", { children: [
+				/* @__PURE__ */ d("p", {
+					className: "text-sm font-medium text-text-secondary",
+					children: t
+				}),
+				/* @__PURE__ */ d("p", {
+					className: `mt-1 text-3xl font-bold ${i}`,
+					children: n
+				}),
+				r ? /* @__PURE__ */ d("p", {
+					className: "mt-1 text-xs text-text-tertiary",
+					children: r
+				}) : null
+			] }), /* @__PURE__ */ d("div", {
+				className: "rounded-lg bg-bg-sunken p-2.5",
+				children: e
+			})]
+		})
+	});
+}
+function m() {
+	let m = e(), { workspaceId: h } = r(), { data: g, loading: _ } = n({
+		variables: { context: { workspaceId: h } },
+		skip: !h,
+		fetchPolicy: "cache-and-network"
+	}), { data: v } = t({
+		variables: {
+			context: { workspaceId: h },
+			limit: 10
+		},
+		skip: !h,
+		fetchPolicy: "cache-and-network"
+	}), y = g?.getSandboxStats, b = v?.getRecentSandboxActivity?.items ?? [];
+	return h ? /* @__PURE__ */ f("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ d(p, {
+						icon: /* @__PURE__ */ d(a, {
+							size: 20,
+							className: "text-status-success-text"
+						}),
+						label: m("vibecontrols.analytics.sandbox.running", "Running"),
+						value: y?.runningNow ?? (_ ? "…" : 0),
+						subtext: `${y?.provisioningNow ?? 0} provisioning`,
+						accent: "text-status-success-text"
+					}),
+					/* @__PURE__ */ d(p, {
+						icon: /* @__PURE__ */ d(l, {
+							size: 20,
+							className: "text-status-info-text"
+						}),
+						label: m("vibecontrols.analytics.sandbox.totalCreated", "Total Created"),
+						value: y?.totalCreated ?? (_ ? "…" : 0),
+						subtext: `${y?.activeSandboxes ?? 0} active`,
+						accent: "text-status-info-text"
+					}),
+					/* @__PURE__ */ d(p, {
+						icon: /* @__PURE__ */ d(c, {
+							size: 20,
+							className: "text-text-tertiary"
+						}),
+						label: m("vibecontrols.analytics.sandbox.expired", "Expired"),
+						value: y?.expiredCount ?? (_ ? "…" : 0),
+						subtext: "TTL reached"
+					}),
+					/* @__PURE__ */ d(p, {
+						icon: /* @__PURE__ */ d(u, {
+							size: 20,
+							className: "text-status-error-text"
+						}),
+						label: m("vibecontrols.analytics.sandbox.failed", "Failed"),
+						value: y?.failedCount ?? (_ ? "…" : 0),
+						subtext: "Requires attention",
+						accent: "text-status-error-text"
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "rounded-lg border border-border-default bg-bg-surface p-6",
+				children: [/* @__PURE__ */ f("h3", {
+					className: "mb-5 flex items-center gap-2 text-lg font-semibold text-text-primary",
+					children: [/* @__PURE__ */ d("span", {
+						className: "rounded-lg bg-bg-sunken p-1.5",
+						children: /* @__PURE__ */ d(o, {
+							size: 16,
+							className: "text-status-info-text"
+						})
+					}), m("vibecontrols.analytics.sandbox.resourceUtilization", "Resource Utilization")]
+				}), /* @__PURE__ */ f("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ f("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-sunken p-4",
+						children: [/* @__PURE__ */ f("div", {
+							className: "mb-1 flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ d(o, {
+								size: 14,
+								className: "text-status-info-text"
+							}), /* @__PURE__ */ d("span", {
+								className: "font-medium",
+								children: m("vibecontrols.analytics.sandbox.totalCpuUsed", "Total CPU Used")
+							})]
+						}), /* @__PURE__ */ d("p", {
+							className: "font-mono text-2xl font-bold text-status-info-text",
+							children: y?.totalCpuUsed ?? "0"
+						})]
+					}), /* @__PURE__ */ f("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-sunken p-4",
+						children: [/* @__PURE__ */ f("div", {
+							className: "mb-1 flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ d(s, {
+								size: 14,
+								className: "text-accent-purple"
+							}), /* @__PURE__ */ d("span", {
+								className: "font-medium",
+								children: m("vibecontrols.analytics.sandbox.totalMemoryUsed", "Total Memory Used")
+							})]
+						}), /* @__PURE__ */ d("p", {
+							className: "font-mono text-2xl font-bold text-accent-purple",
+							children: y?.totalMemoryUsed ?? "0"
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "rounded-lg border border-border-default bg-bg-surface p-6",
+				children: [/* @__PURE__ */ f("h3", {
+					className: "mb-4 flex items-center gap-2 text-lg font-semibold text-text-primary",
+					children: [/* @__PURE__ */ d("span", {
+						className: "rounded-lg bg-bg-sunken p-1.5",
+						children: /* @__PURE__ */ d(i, {
+							size: 16,
+							className: "text-status-info-text"
+						})
+					}), m("vibecontrols.analytics.sandbox.recentActivity", "Recent Sandbox Activity")]
+				}), /* @__PURE__ */ d("div", {
+					className: "space-y-3",
+					children: b.length > 0 ? b.map((e) => /* @__PURE__ */ f("div", {
+						className: "flex items-center justify-between rounded-lg border border-border-subtle p-3 transition-colors hover:bg-bg-sunken",
+						children: [/* @__PURE__ */ f("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ f("p", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: [
+									e.action,
+									": ",
+									e.sandboxName
+								]
+							}), /* @__PURE__ */ d("p", {
+								className: "text-xs text-text-secondary",
+								children: e.actorId
+							})]
+						}), /* @__PURE__ */ d("span", {
+							className: "ml-2 flex-shrink-0 rounded-full border border-border-subtle px-2 py-0.5 text-xs text-text-secondary",
+							children: e.status
+						})]
+					}, e.id)) : /* @__PURE__ */ d("p", {
+						className: "py-4 text-center text-sm text-text-secondary",
+						children: m("vibecontrols.analytics.sandbox.noRecentActivity", "No recent sandbox activity")
+					})
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ d("div", {
+		className: "text-sm text-text-secondary",
+		children: "Waiting for workspace context…"
+	});
+}
+//#endregion
+export { m as SandboxAnalyticsSection };
+
+//# sourceMappingURL=SandboxAnalyticsSection.js.map