@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/data/ai/AdvancedChatConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedChatConfig.js","sources":["../../../src/data/ai/AdvancedChatConfig.tsx"],"sourcesContent":["import { Button } from \"../../components/button\";\nimport { cn } from \"../../lib/utils\";\nimport { ProviderStatusPanel } from \"../runtime/ProviderStatusPanel\";\nimport { RuntimeBar } from \"../runtime/RuntimeBar\";\nimport {\n  SPEC_RUNTIME_FAMILIES,\n  type SpecRuntimeFamily,\n} from \"../runtime/runtime-mode\";\nimport type {\n  ChatBudgetConfig,\n  ChatModel,\n  ChatModelRuntime,\n  ChatUsageSummary,\n  ClaudePermissionMode,\n} from \"../chat/types\";\nimport { CLAUDE_PERMISSION_MODE_OPTIONS } from \"../chat/types\";\n\nexport type AdvancedChatConfigProps = {\n  models: ChatModel[];\n  runtime: ChatModelRuntime;\n  onRuntimeChange?: ((runtime: ChatModelRuntime) => void) | undefined;\n  runtimeFamilies?: SpecRuntimeFamily[] | undefined;\n  reasoningEfforts: string[];\n  permissionMode: ClaudePermissionMode;\n  onPermissionModeChange?: ((mode: ClaudePermissionMode) => void) | undefined;\n  temperature?: number | undefined;\n  onTemperatureChange?: ((temperature: number | undefined) => void) | undefined;\n  budget?: ChatBudgetConfig | undefined;\n  onBudgetChange?: ((budget: ChatBudgetConfig) => void) | undefined;\n  usage?: ChatUsageSummary | null | undefined;\n  catalogLoading?: boolean | undefined;\n  catalogError?: string | null | undefined;\n  onCatalogRetry?: (() => void) | undefined;\n};\n\nexport function AdvancedChatConfig({\n  models,\n  runtime,\n  onRuntimeChange,\n  runtimeFamilies,\n  reasoningEfforts,\n  permissionMode,\n  onPermissionModeChange,\n  temperature,\n  onTemperatureChange,\n  budget,\n  onBudgetChange,\n  usage,\n  catalogLoading = false,\n  catalogError = null,\n  onCatalogRetry,\n}: AdvancedChatConfigProps) {\n  const updateBudget = (key: keyof ChatBudgetConfig, raw: string) => {\n    const next: ChatBudgetConfig = { ...budget };\n    const parsed = parseOptionalNumber(raw, key === \"maxTokens\");\n    if (parsed === undefined) delete next[key];\n    else next[key] = parsed;\n    onBudgetChange?.(next);\n  };\n\n  return (\n    <div className=\"grid min-h-0 flex-1 gap-4 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]\">\n      <div className=\"space-y-4\">\n        <section className=\"space-y-3\">\n          <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n            Runtime\n          </div>\n          {catalogLoading && (\n            <div className=\"text-xs text-muted-foreground\">\n              Checking model and runtime availability…\n            </div>\n          )}\n          {catalogError && (\n            <div\n              role=\"alert\"\n              className=\"flex items-center justify-between gap-3 rounded border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive\"\n            >\n              <span>{catalogError}</span>\n              {onCatalogRetry && (\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  variant=\"outline\"\n                  onClick={onCatalogRetry}\n                >\n                  Retry\n                </Button>\n              )}\n            </div>\n          )}\n          <RuntimeBar\n            variant=\"segmented\"\n            ariaLabel=\"Advanced runtime\"\n            value={runtime}\n            onChange={(next) => onRuntimeChange?.(next)}\n            models={models}\n            reasoningEfforts={reasoningEfforts}\n            {...(runtimeFamilies ? { families: runtimeFamilies } : {})}\n            className=\"max-w-full\"\n          />\n          <label className=\"grid max-w-md grid-cols-[9rem_minmax(0,1fr)] items-center gap-3 text-xs\">\n            <span className=\"text-muted-foreground\">Permission mode</span>\n            <select\n              aria-label=\"Permission mode\"\n              value={permissionMode}\n              onChange={(event) =>\n                onPermissionModeChange?.(\n                  event.target.value as ClaudePermissionMode\n                )\n              }\n              className=\"h-8 rounded border border-border bg-background px-2 text-xs\"\n            >\n              {CLAUDE_PERMISSION_MODE_OPTIONS.map((option) => (\n                <option\n                  key={option.value}\n                  value={option.value}\n                  title={option.description}\n                >\n                  {option.label}\n                </option>\n              ))}\n            </select>\n          </label>\n        </section>\n        <section className=\"space-y-3\">\n          <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n            Generation\n          </div>\n          <label className=\"grid grid-cols-[8rem_minmax(0,1fr)_4rem] items-center gap-3 text-xs\">\n            <span className=\"text-muted-foreground\">Temperature</span>\n            <input\n              type=\"range\"\n              min={0}\n              max={2}\n              step={0.1}\n              value={temperature ?? 0}\n              onChange={(event) =>\n                onTemperatureChange?.(Number(event.target.value))\n              }\n            />\n            <input\n              type=\"number\"\n              min={0}\n              max={2}\n              step={0.1}\n              value={temperature ?? \"\"}\n              onChange={(event) =>\n                onTemperatureChange?.(parseOptionalNumber(event.target.value))\n              }\n              className=\"h-8 rounded border border-border bg-background px-2 text-xs\"\n            />\n          </label>\n        </section>\n        <section className=\"space-y-3\">\n          <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n            Budget\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <label className=\"space-y-1 text-xs\">\n              <span className=\"text-muted-foreground\">Max cost</span>\n              <input\n                type=\"number\"\n                min={0}\n                step={0.01}\n                value={budget?.cost ?? \"\"}\n                onChange={(event) => updateBudget(\"cost\", event.target.value)}\n                className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs\"\n              />\n            </label>\n            <label className=\"space-y-1 text-xs\">\n              <span className=\"text-muted-foreground\">Max tokens</span>\n              <input\n                type=\"number\"\n                min={0}\n                step={1}\n                value={budget?.maxTokens ?? \"\"}\n                onChange={(event) =>\n                  updateBudget(\"maxTokens\", event.target.value)\n                }\n                className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs\"\n              />\n            </label>\n          </div>\n        </section>\n      </div>\n      <UsageCostPanel\n        usage={usage}\n        models={models}\n        families={runtimeFamilies ?? SPEC_RUNTIME_FAMILIES}\n        showProviderStatus={!catalogLoading}\n      />\n    </div>\n  );\n}\n\nfunction UsageCostPanel({\n  usage,\n  models,\n  families,\n  showProviderStatus,\n}: {\n  usage?: ChatUsageSummary | null | undefined;\n  models: ChatModel[];\n  families: SpecRuntimeFamily[];\n  showProviderStatus: boolean;\n}) {\n  const tokens = usage?.usage;\n  const costs = usage?.costBreakdown;\n  return (\n    <aside className=\"space-y-3 border-t border-border pt-4 lg:border-l lg:border-t-0 lg:pl-4 lg:pt-0\">\n      {/* Both tables describe the last completed turn; only the bold total is\n          cumulative. Labelled explicitly because the rows will not sum to it,\n          and the full conversation breakdown lives in the Costs tab. */}\n      <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n        Usage (last turn)\n      </div>\n      <div className=\"overflow-hidden rounded border border-border\">\n        <MetricRow\n          label=\"Context\"\n          value={`${formatNumber(usage?.usedTokens)} / ${formatNumber(\n            usage?.maxTokens\n          )}`}\n        />\n        <MetricRow\n          label=\"Input tokens\"\n          value={formatNumber(tokens?.inputTokens)}\n        />\n        <MetricRow\n          label=\"Output tokens\"\n          value={formatNumber(tokens?.outputTokens)}\n        />\n        <MetricRow\n          label=\"Reasoning tokens\"\n          value={formatNumber(tokens?.reasoningTokens)}\n        />\n        <MetricRow\n          label=\"Cache read tokens\"\n          value={formatNumber(tokens?.cacheReadTokens)}\n        />\n        <MetricRow\n          label=\"Cache write tokens\"\n          value={formatNumber(tokens?.cacheWriteTokens)}\n        />\n        <MetricRow\n          label=\"Total tokens\"\n          value={formatNumber(tokens?.totalTokens)}\n        />\n      </div>\n      <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n        Cost (last turn)\n      </div>\n      <div className=\"overflow-hidden rounded border border-border\">\n        <MetricRow label=\"Input\" value={formatUSD(costs?.inputUsd)} />\n        <MetricRow label=\"Output\" value={formatUSD(costs?.outputUsd)} />\n        <MetricRow label=\"Reasoning\" value={formatUSD(costs?.reasoningUsd)} />\n        <MetricRow label=\"Cache read\" value={formatUSD(costs?.cacheReadUsd)} />\n        <MetricRow\n          label=\"Cache write\"\n          value={formatUSD(costs?.cacheWriteUsd)}\n        />\n        <MetricRow\n          label=\"Conversation total\"\n          value={formatUSD(usage?.cost ?? costs?.totalUsd)}\n          strong\n        />\n      </div>\n      {showProviderStatus && (\n        <ProviderStatusPanel models={models} families={families} />\n      )}\n    </aside>\n  );\n}\n\nfunction MetricRow({\n  label,\n  value,\n  strong = false,\n}: {\n  label: string;\n  value: string;\n  strong?: boolean;\n}) {\n  return (\n    <div className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-border px-2 py-1.5 text-xs last:border-b-0\">\n      <span className=\"truncate text-muted-foreground\">{label}</span>\n      <span\n        className={cn(\"font-mono\", strong && \"font-semibold text-foreground\")}\n      >\n        {value}\n      </span>\n    </div>\n  );\n}\n\nfunction parseOptionalNumber(raw: string, integer = false): number | undefined {\n  if (raw.trim() === \"\") return undefined;\n  const value = Number(raw);\n  if (!Number.isFinite(value)) return undefined;\n  return integer ? Math.max(0, Math.trunc(value)) : value;\n}\n\nfunction formatNumber(value: number | undefined): string {\n  if (value == null || !Number.isFinite(value)) return \"-\";\n  return new Intl.NumberFormat().format(value);\n}\n\nfunction formatUSD(value: number | undefined): string {\n  if (value == null || !Number.isFinite(value)) return \"-\";\n  return `$${value.toFixed(value >= 1 ? 4 : 6)}`;\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/AdvancedCostsPanel.cjs

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const tokens = require("../../lib/tokens.cjs");
+const threadCosts = require("./thread-costs.cjs");
+function AdvancedCostsPanel({
+  costsApi,
+  threadId
+}) {
+  var _a;
+  const [costs, setCosts] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  react.useEffect(() => {
+    if (!costsApi || !threadId) {
+      setCosts(null);
+      return;
+    }
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+    fetch(`${costsApi}/${threadId}/costs`, { signal: controller.signal }).then(async (response) => {
+      if (!response.ok) throw new Error(await costsErrorText(response));
+      return await response.json();
+    }).then((payload) => setCosts(payload)).catch((cause) => {
+      if (controller.signal.aborted) return;
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }).finally(() => {
+      if (!controller.signal.aborted) setLoading(false);
+    });
+    return () => controller.abort();
+  }, [costsApi, threadId]);
+  if (!threadId) return /* @__PURE__ */ jsxRuntime.jsx(CostsMessage, { children: "No conversation yet." });
+  if (loading && !costs) return /* @__PURE__ */ jsxRuntime.jsx(CostsMessage, { children: "Loading costs…" });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(CostsMessage, { tone: "error", children: error });
+  if (!((_a = costs == null ? void 0 : costs.byModel) == null ? void 0 : _a.length))
+    return /* @__PURE__ */ jsxRuntime.jsx(CostsMessage, { children: "No model calls recorded for this conversation." });
+  const groups = threadCosts.groupCostsByAgent(costs);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Conversation total" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm font-semibold", children: tokens.formatCost(costs.totalCostUsd ?? 0) })
+    ] }),
+    groups.map((group) => {
+      var _a2;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CostGroup,
+        {
+          agent: group.agent,
+          rows: group.rows,
+          showHeader: threadCosts.hasAgentBreakdown(costs)
+        },
+        ((_a2 = group.agent) == null ? void 0 : _a2.id) ?? "all"
+      );
+    })
+  ] });
+}
+function CostGroup({
+  agent,
+  rows,
+  showHeader
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+    showHeader && agent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-3 px-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium", children: threadCosts.agentLabel(agent) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-muted-foreground", children: tokens.formatCost(agent.costUsd ?? 0) })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded border border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full min-w-[520px] border-collapse text-left text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted/60 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Model" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Backend" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Calls" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Tokens" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Cache" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Cost" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Td, { children: row.model || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "unknown" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Td, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: row.backend }),
+          row.effort ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+            " · ",
+            row.effort
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Td, { children: row.modelCallCount }),
+        /* @__PURE__ */ jsxRuntime.jsx(Td, { children: tokens.compactTokens(row.totalTokens) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Td, { children: tokens.compactTokens(
+          (row.cacheReadTokens ?? 0) + (row.cacheWriteTokens ?? 0)
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Td, { children: tokens.formatCost(row.totalCost ?? 0) })
+      ] }, row.id)) })
+    ] }) })
+  ] });
+}
+function CostsMessage({
+  children,
+  tone
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tone === "error" ? "rounded border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive" : "p-3 text-xs text-muted-foreground",
+      children
+    }
+  );
+}
+function Th({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1.5 font-medium", children });
+}
+function Td({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-1.5 font-mono", children });
+}
+async function costsErrorText(response) {
+  const body = (await response.text()).trim();
+  return body || `Cost breakdown unavailable (${response.status})`;
+}
+exports.AdvancedCostsPanel = AdvancedCostsPanel;
+//# sourceMappingURL=AdvancedCostsPanel.cjs.map

package/dist/data/ai/AdvancedCostsPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedCostsPanel.cjs","sources":["../../../src/data/ai/AdvancedCostsPanel.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport type { ThreadCostAgent, ThreadCostModel, ThreadCosts } from \"./thread-costs\";\nimport { agentLabel, groupCostsByAgent, hasAgentBreakdown } from \"./thread-costs\";\n\nexport type AdvancedCostsPanelProps = {\n  /** Endpoint serving the thread's cost breakdown, e.g. `/api/chat/sessions`. */\n  costsApi?: string | undefined;\n  /** Thread whose costs to show. No thread means nothing has been spent yet. */\n  threadId?: string | undefined;\n};\n\n/**\n * Thread cost breakdown: what each model/backend actually cost across the whole\n * conversation, grouped by sub-session when the thread has any.\n *\n * This is deliberately server-fed rather than accumulated from stream metadata.\n * A chat thread can switch backends mid-conversation — an API turn and an agent\n * turn bill at very different rates — and only the server sees every turn.\n */\nexport function AdvancedCostsPanel({\n  costsApi,\n  threadId,\n}: AdvancedCostsPanelProps) {\n  const [costs, setCosts] = useState<ThreadCosts | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!costsApi || !threadId) {\n      setCosts(null);\n      return;\n    }\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n    fetch(`${costsApi}/${threadId}/costs`, { signal: controller.signal })\n      .then(async (response) => {\n        if (!response.ok) throw new Error(await costsErrorText(response));\n        return (await response.json()) as ThreadCosts;\n      })\n      .then((payload) => setCosts(payload))\n      .catch((cause: unknown) => {\n        if (controller.signal.aborted) return;\n        setError(cause instanceof Error ? cause.message : String(cause));\n      })\n      .finally(() => {\n        if (!controller.signal.aborted) setLoading(false);\n      });\n    return () => controller.abort();\n  }, [costsApi, threadId]);\n\n  if (!threadId) return <CostsMessage>No conversation yet.</CostsMessage>;\n  if (loading && !costs) return <CostsMessage>Loading costs…</CostsMessage>;\n  if (error) return <CostsMessage tone=\"error\">{error}</CostsMessage>;\n  if (!costs?.byModel?.length)\n    return <CostsMessage>No model calls recorded for this conversation.</CostsMessage>;\n\n  const groups = groupCostsByAgent(costs);\n  return (\n    <div className=\"min-h-0 flex-1 space-y-3 overflow-y-auto\">\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n          Conversation total\n        </div>\n        <div className=\"font-mono text-sm font-semibold\">\n          {formatCost(costs.totalCostUsd ?? 0)}\n        </div>\n      </div>\n      {groups.map((group) => (\n        <CostGroup\n          key={group.agent?.id ?? \"all\"}\n          agent={group.agent}\n          rows={group.rows}\n          showHeader={hasAgentBreakdown(costs)}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction CostGroup({\n  agent,\n  rows,\n  showHeader,\n}: {\n  agent: ThreadCostAgent | undefined;\n  rows: ThreadCostModel[];\n  showHeader: boolean;\n}) {\n  return (\n    <div className=\"space-y-1.5\">\n      {showHeader && agent ? (\n        <div className=\"flex items-baseline justify-between gap-3 px-0.5\">\n          <span className=\"truncate text-xs font-medium\">{agentLabel(agent)}</span>\n          <span className=\"font-mono text-xs text-muted-foreground\">\n            {formatCost(agent.costUsd ?? 0)}\n          </span>\n        </div>\n      ) : null}\n      <div className=\"overflow-x-auto rounded border border-border\">\n        <table className=\"w-full min-w-[520px] border-collapse text-left text-xs\">\n          <thead className=\"bg-muted/60 text-muted-foreground\">\n            <tr>\n              <Th>Model</Th>\n              <Th>Backend</Th>\n              <Th>Calls</Th>\n              <Th>Tokens</Th>\n              <Th>Cache</Th>\n              <Th>Cost</Th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-border\">\n            {rows.map((row) => (\n              <tr key={row.id}>\n                <Td>{row.model || <span className=\"text-muted-foreground\">unknown</span>}</Td>\n                <Td>\n                  <span className=\"text-muted-foreground\">{row.backend}</span>\n                  {row.effort ? (\n                    <span className=\"text-muted-foreground\"> · {row.effort}</span>\n                  ) : null}\n                </Td>\n                <Td>{row.modelCallCount}</Td>\n                <Td>{compactTokens(row.totalTokens)}</Td>\n                <Td>\n                  {compactTokens(\n                    (row.cacheReadTokens ?? 0) + (row.cacheWriteTokens ?? 0),\n                  )}\n                </Td>\n                <Td>{formatCost(row.totalCost ?? 0)}</Td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n\nfunction CostsMessage({\n  children,\n  tone,\n}: {\n  children: React.ReactNode;\n  tone?: \"error\";\n}) {\n  return (\n    <div\n      className={\n        tone === \"error\"\n          ? \"rounded border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive\"\n          : \"p-3 text-xs text-muted-foreground\"\n      }\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Th({ children }: { children: React.ReactNode }) {\n  return <th className=\"px-2 py-1.5 font-medium\">{children}</th>;\n}\n\nfunction Td({ children }: { children: React.ReactNode }) {\n  return <td className=\"px-2 py-1.5 font-mono\">{children}</td>;\n}\n\nasync function costsErrorText(response: Response): Promise<string> {\n  const body = (await response.text()).trim();\n  return body || `Cost breakdown unavailable (${response.status})`;\n}\n"],"names":["useState","useEffect","jsx","groupCostsByAgent","jsxs","hasAgentBreakdown","_a","agentLabel","compactTokens","formatCost"],"mappings":"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"}

package/dist/data/ai/AdvancedCostsPanel.d.ts

@@ -0,0 +1,16 @@
+export type AdvancedCostsPanelProps = {
+    /** Endpoint serving the thread's cost breakdown, e.g. `/api/chat/sessions`. */
+    costsApi?: string | undefined;
+    /** Thread whose costs to show. No thread means nothing has been spent yet. */
+    threadId?: string | undefined;
+};
+/**
+ * Thread cost breakdown: what each model/backend actually cost across the whole
+ * conversation, grouped by sub-session when the thread has any.
+ *
+ * This is deliberately server-fed rather than accumulated from stream metadata.
+ * A chat thread can switch backends mid-conversation — an API turn and an agent
+ * turn bill at very different rates — and only the server sees every turn.
+ */
+export declare function AdvancedCostsPanel({ costsApi, threadId, }: AdvancedCostsPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AdvancedCostsPanel.d.ts.map

package/dist/data/ai/AdvancedCostsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedCostsPanel.d.ts","sourceRoot":"","sources":["../../../src/data/ai/AdvancedCostsPanel.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,uBAAuB,GAAG;IACpC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,2CAwDzB"}

package/dist/data/ai/AdvancedCostsPanel.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { formatCost, compactTokens } from "../../lib/tokens.js";
+import { groupCostsByAgent, hasAgentBreakdown, agentLabel } from "./thread-costs.js";
+function AdvancedCostsPanel({
+  costsApi,
+  threadId
+}) {
+  var _a;
+  const [costs, setCosts] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!costsApi || !threadId) {
+      setCosts(null);
+      return;
+    }
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+    fetch(`${costsApi}/${threadId}/costs`, { signal: controller.signal }).then(async (response) => {
+      if (!response.ok) throw new Error(await costsErrorText(response));
+      return await response.json();
+    }).then((payload) => setCosts(payload)).catch((cause) => {
+      if (controller.signal.aborted) return;
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }).finally(() => {
+      if (!controller.signal.aborted) setLoading(false);
+    });
+    return () => controller.abort();
+  }, [costsApi, threadId]);
+  if (!threadId) return /* @__PURE__ */ jsx(CostsMessage, { children: "No conversation yet." });
+  if (loading && !costs) return /* @__PURE__ */ jsx(CostsMessage, { children: "Loading costs…" });
+  if (error) return /* @__PURE__ */ jsx(CostsMessage, { tone: "error", children: error });
+  if (!((_a = costs == null ? void 0 : costs.byModel) == null ? void 0 : _a.length))
+    return /* @__PURE__ */ jsx(CostsMessage, { children: "No model calls recorded for this conversation." });
+  const groups = groupCostsByAgent(costs);
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Conversation total" }),
+      /* @__PURE__ */ jsx("div", { className: "font-mono text-sm font-semibold", children: formatCost(costs.totalCostUsd ?? 0) })
+    ] }),
+    groups.map((group) => {
+      var _a2;
+      return /* @__PURE__ */ jsx(
+        CostGroup,
+        {
+          agent: group.agent,
+          rows: group.rows,
+          showHeader: hasAgentBreakdown(costs)
+        },
+        ((_a2 = group.agent) == null ? void 0 : _a2.id) ?? "all"
+      );
+    })
+  ] });
+}
+function CostGroup({
+  agent,
+  rows,
+  showHeader
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    showHeader && agent ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3 px-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium", children: agentLabel(agent) }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: formatCost(agent.costUsd ?? 0) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[520px] border-collapse text-left text-xs", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-muted/60 text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Model" }),
+        /* @__PURE__ */ jsx(Th, { children: "Backend" }),
+        /* @__PURE__ */ jsx(Th, { children: "Calls" }),
+        /* @__PURE__ */ jsx(Th, { children: "Tokens" }),
+        /* @__PURE__ */ jsx(Th, { children: "Cache" }),
+        /* @__PURE__ */ jsx(Th, { children: "Cost" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Td, { children: row.model || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "unknown" }) }),
+        /* @__PURE__ */ jsxs(Td, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: row.backend }),
+          row.effort ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            " · ",
+            row.effort
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Td, { children: row.modelCallCount }),
+        /* @__PURE__ */ jsx(Td, { children: compactTokens(row.totalTokens) }),
+        /* @__PURE__ */ jsx(Td, { children: compactTokens(
+          (row.cacheReadTokens ?? 0) + (row.cacheWriteTokens ?? 0)
+        ) }),
+        /* @__PURE__ */ jsx(Td, { children: formatCost(row.totalCost ?? 0) })
+      ] }, row.id)) })
+    ] }) })
+  ] });
+}
+function CostsMessage({
+  children,
+  tone
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tone === "error" ? "rounded border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive" : "p-3 text-xs text-muted-foreground",
+      children
+    }
+  );
+}
+function Th({ children }) {
+  return /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 font-medium", children });
+}
+function Td({ children }) {
+  return /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 font-mono", children });
+}
+async function costsErrorText(response) {
+  const body = (await response.text()).trim();
+  return body || `Cost breakdown unavailable (${response.status})`;
+}
+export {
+  AdvancedCostsPanel
+};
+//# sourceMappingURL=AdvancedCostsPanel.js.map

package/dist/data/ai/AdvancedCostsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedCostsPanel.js","sources":["../../../src/data/ai/AdvancedCostsPanel.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport type { ThreadCostAgent, ThreadCostModel, ThreadCosts } from \"./thread-costs\";\nimport { agentLabel, groupCostsByAgent, hasAgentBreakdown } from \"./thread-costs\";\n\nexport type AdvancedCostsPanelProps = {\n  /** Endpoint serving the thread's cost breakdown, e.g. `/api/chat/sessions`. */\n  costsApi?: string | undefined;\n  /** Thread whose costs to show. No thread means nothing has been spent yet. */\n  threadId?: string | undefined;\n};\n\n/**\n * Thread cost breakdown: what each model/backend actually cost across the whole\n * conversation, grouped by sub-session when the thread has any.\n *\n * This is deliberately server-fed rather than accumulated from stream metadata.\n * A chat thread can switch backends mid-conversation — an API turn and an agent\n * turn bill at very different rates — and only the server sees every turn.\n */\nexport function AdvancedCostsPanel({\n  costsApi,\n  threadId,\n}: AdvancedCostsPanelProps) {\n  const [costs, setCosts] = useState<ThreadCosts | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (!costsApi || !threadId) {\n      setCosts(null);\n      return;\n    }\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n    fetch(`${costsApi}/${threadId}/costs`, { signal: controller.signal })\n      .then(async (response) => {\n        if (!response.ok) throw new Error(await costsErrorText(response));\n        return (await response.json()) as ThreadCosts;\n      })\n      .then((payload) => setCosts(payload))\n      .catch((cause: unknown) => {\n        if (controller.signal.aborted) return;\n        setError(cause instanceof Error ? cause.message : String(cause));\n      })\n      .finally(() => {\n        if (!controller.signal.aborted) setLoading(false);\n      });\n    return () => controller.abort();\n  }, [costsApi, threadId]);\n\n  if (!threadId) return <CostsMessage>No conversation yet.</CostsMessage>;\n  if (loading && !costs) return <CostsMessage>Loading costs…</CostsMessage>;\n  if (error) return <CostsMessage tone=\"error\">{error}</CostsMessage>;\n  if (!costs?.byModel?.length)\n    return <CostsMessage>No model calls recorded for this conversation.</CostsMessage>;\n\n  const groups = groupCostsByAgent(costs);\n  return (\n    <div className=\"min-h-0 flex-1 space-y-3 overflow-y-auto\">\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <div className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n          Conversation total\n        </div>\n        <div className=\"font-mono text-sm font-semibold\">\n          {formatCost(costs.totalCostUsd ?? 0)}\n        </div>\n      </div>\n      {groups.map((group) => (\n        <CostGroup\n          key={group.agent?.id ?? \"all\"}\n          agent={group.agent}\n          rows={group.rows}\n          showHeader={hasAgentBreakdown(costs)}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction CostGroup({\n  agent,\n  rows,\n  showHeader,\n}: {\n  agent: ThreadCostAgent | undefined;\n  rows: ThreadCostModel[];\n  showHeader: boolean;\n}) {\n  return (\n    <div className=\"space-y-1.5\">\n      {showHeader && agent ? (\n        <div className=\"flex items-baseline justify-between gap-3 px-0.5\">\n          <span className=\"truncate text-xs font-medium\">{agentLabel(agent)}</span>\n          <span className=\"font-mono text-xs text-muted-foreground\">\n            {formatCost(agent.costUsd ?? 0)}\n          </span>\n        </div>\n      ) : null}\n      <div className=\"overflow-x-auto rounded border border-border\">\n        <table className=\"w-full min-w-[520px] border-collapse text-left text-xs\">\n          <thead className=\"bg-muted/60 text-muted-foreground\">\n            <tr>\n              <Th>Model</Th>\n              <Th>Backend</Th>\n              <Th>Calls</Th>\n              <Th>Tokens</Th>\n              <Th>Cache</Th>\n              <Th>Cost</Th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-border\">\n            {rows.map((row) => (\n              <tr key={row.id}>\n                <Td>{row.model || <span className=\"text-muted-foreground\">unknown</span>}</Td>\n                <Td>\n                  <span className=\"text-muted-foreground\">{row.backend}</span>\n                  {row.effort ? (\n                    <span className=\"text-muted-foreground\"> · {row.effort}</span>\n                  ) : null}\n                </Td>\n                <Td>{row.modelCallCount}</Td>\n                <Td>{compactTokens(row.totalTokens)}</Td>\n                <Td>\n                  {compactTokens(\n                    (row.cacheReadTokens ?? 0) + (row.cacheWriteTokens ?? 0),\n                  )}\n                </Td>\n                <Td>{formatCost(row.totalCost ?? 0)}</Td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n\nfunction CostsMessage({\n  children,\n  tone,\n}: {\n  children: React.ReactNode;\n  tone?: \"error\";\n}) {\n  return (\n    <div\n      className={\n        tone === \"error\"\n          ? \"rounded border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive\"\n          : \"p-3 text-xs text-muted-foreground\"\n      }\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Th({ children }: { children: React.ReactNode }) {\n  return <th className=\"px-2 py-1.5 font-medium\">{children}</th>;\n}\n\nfunction Td({ children }: { children: React.ReactNode }) {\n  return <td className=\"px-2 py-1.5 font-mono\">{children}</td>;\n}\n\nasync function costsErrorText(response: Response): Promise<string> {\n  const body = (await response.text()).trim();\n  return body || `Cost breakdown unavailable (${response.status})`;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/data/ai/ChatWindow.catalogs.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const runtimeMode = require("../runtime/runtime-mode.cjs");
+function useChatWindowCatalogs({
+  models: providedModels,
+  modelsApi,
+  runtimesApi
+}) {
+  const [models, setModels] = react.useState(providedModels ?? []);
+  const [runtimes, setRuntimes] = react.useState();
+  const [modelsLoading, setModelsLoading] = react.useState(false);
+  const [runtimesLoading, setRuntimesLoading] = react.useState(false);
+  const [modelsError, setModelsError] = react.useState(null);
+  const [runtimesError, setRuntimesError] = react.useState(null);
+  const [attempt, setAttempt] = react.useState(0);
+  react.useEffect(() => {
+    if (providedModels) setModels(providedModels);
+  }, [providedModels]);
+  react.useEffect(() => {
+    if (providedModels || !modelsApi) return;
+    let active = true;
+    setModelsLoading(true);
+    setModelsError(null);
+    void loadCatalog(modelsApi, "models").then((data) => {
+      if (active) setModels(data);
+    }).catch((cause) => {
+      if (active) setModelsError(errorMessage("model", cause));
+    }).finally(() => {
+      if (active) setModelsLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [attempt, modelsApi, providedModels]);
+  react.useEffect(() => {
+    if (!runtimesApi) return;
+    let active = true;
+    setRuntimesLoading(true);
+    setRuntimesError(null);
+    void loadCatalog(runtimesApi, "runtimes").then((data) => {
+      if (active) setRuntimes(data);
+    }).catch((cause) => {
+      if (active) setRuntimesError(errorMessage("runtime", cause));
+    }).finally(() => {
+      if (active) setRuntimesLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [attempt, runtimesApi]);
+  return {
+    models,
+    ...runtimes ? { runtimeFamilies: runtimeMode.familiesFromRuntimeCatalog(runtimes) } : {},
+    loading: modelsLoading || runtimesLoading,
+    error: [modelsError, runtimesError].filter(Boolean).join(" ") || null,
+    retry: () => setAttempt((current) => current + 1)
+  };
+}
+async function loadCatalog(endpoint, label) {
+  const response = await fetch(endpoint);
+  if (!response.ok) throw new Error(`${label} ${response.status}`);
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+    throw new Error(`${label} response must be an array`);
+  }
+  return data;
+}
+function errorMessage(kind, cause) {
+  const detail = cause instanceof Error ? cause.message : String(cause);
+  return `Unable to load ${kind} availability (${detail}). Check Captain and retry.`;
+}
+exports.useChatWindowCatalogs = useChatWindowCatalogs;
+//# sourceMappingURL=ChatWindow.catalogs.cjs.map

package/dist/data/ai/ChatWindow.catalogs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.catalogs.cjs","sources":["../../../src/data/ai/ChatWindow.catalogs.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ChatModel } from \"../chat/types\";\nimport {\n  familiesFromRuntimeCatalog,\n  type RuntimeCatalogFamily,\n  type SpecRuntimeFamily,\n} from \"../runtime/runtime-mode\";\n\nexport type ChatWindowCatalogOptions = {\n  models?: ChatModel[] | undefined;\n  modelsApi?: string | null | undefined;\n  runtimesApi?: string | null | undefined;\n};\n\nexport type ChatWindowCatalogs = {\n  models: ChatModel[];\n  runtimeFamilies?: SpecRuntimeFamily[] | undefined;\n  loading: boolean;\n  error: string | null;\n  retry: () => void;\n};\n\nexport function useChatWindowCatalogs({\n  models: providedModels,\n  modelsApi,\n  runtimesApi,\n}: ChatWindowCatalogOptions): ChatWindowCatalogs {\n  const [models, setModels] = useState<ChatModel[]>(providedModels ?? []);\n  const [runtimes, setRuntimes] = useState<RuntimeCatalogFamily[]>();\n  const [modelsLoading, setModelsLoading] = useState(false);\n  const [runtimesLoading, setRuntimesLoading] = useState(false);\n  const [modelsError, setModelsError] = useState<string | null>(null);\n  const [runtimesError, setRuntimesError] = useState<string | null>(null);\n  const [attempt, setAttempt] = useState(0);\n\n  useEffect(() => {\n    if (providedModels) setModels(providedModels);\n  }, [providedModels]);\n\n  useEffect(() => {\n    if (providedModels || !modelsApi) return;\n    let active = true;\n    setModelsLoading(true);\n    setModelsError(null);\n    void loadCatalog<ChatModel[]>(modelsApi, \"models\")\n      .then((data) => {\n        if (active) setModels(data);\n      })\n      .catch((cause) => {\n        if (active) setModelsError(errorMessage(\"model\", cause));\n      })\n      .finally(() => {\n        if (active) setModelsLoading(false);\n      });\n    return () => {\n      active = false;\n    };\n  }, [attempt, modelsApi, providedModels]);\n\n  useEffect(() => {\n    if (!runtimesApi) return;\n    let active = true;\n    setRuntimesLoading(true);\n    setRuntimesError(null);\n    void loadCatalog<RuntimeCatalogFamily[]>(runtimesApi, \"runtimes\")\n      .then((data) => {\n        if (active) setRuntimes(data);\n      })\n      .catch((cause) => {\n        if (active) setRuntimesError(errorMessage(\"runtime\", cause));\n      })\n      .finally(() => {\n        if (active) setRuntimesLoading(false);\n      });\n    return () => {\n      active = false;\n    };\n  }, [attempt, runtimesApi]);\n\n  return {\n    models,\n    ...(runtimes\n      ? { runtimeFamilies: familiesFromRuntimeCatalog(runtimes) }\n      : {}),\n    loading: modelsLoading || runtimesLoading,\n    error: [modelsError, runtimesError].filter(Boolean).join(\" \") || null,\n    retry: () => setAttempt((current) => current + 1),\n  };\n}\n\nasync function loadCatalog<T>(endpoint: string, label: string): Promise<T> {\n  const response = await fetch(endpoint);\n  if (!response.ok) throw new Error(`${label} ${response.status}`);\n  const data: unknown = await response.json();\n  if (!Array.isArray(data)) {\n    throw new Error(`${label} response must be an array`);\n  }\n  return data as T;\n}\n\nfunction errorMessage(kind: string, cause: unknown): string {\n  const detail = cause instanceof Error ? cause.message : String(cause);\n  return `Unable to load ${kind} availability (${detail}). Check Captain and retry.`;\n}\n"],"names":["useState","useEffect","familiesFromRuntimeCatalog"],"mappings":";;;;AAsBO,SAAS,sBAAsB;AAAA,EACpC,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsB,kBAAkB,CAAA,CAAE;AACtE,QAAM,CAAC,UAAU,WAAW,IAAIA,eAAA;AAChC,QAAM,CAAC,eAAe,gBAAgB,IAAIA,MAAAA,SAAS,KAAK;AACxD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA,SAAS,KAAK;AAC5D,QAAM,CAAC,aAAa,cAAc,IAAIA,MAAAA,SAAwB,IAAI;AAClE,QAAM,CAAC,eAAe,gBAAgB,IAAIA,MAAAA,SAAwB,IAAI;AACtE,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,CAAC;AAExCC,QAAAA,UAAU,MAAM;AACd,QAAI,0BAA0B,cAAc;AAAA,EAC9C,GAAG,CAAC,cAAc,CAAC;AAEnBA,QAAAA,UAAU,MAAM;AACd,QAAI,kBAAkB,CAAC,UAAW;AAClC,QAAI,SAAS;AACb,qBAAiB,IAAI;AACrB,mBAAe,IAAI;AACnB,SAAK,YAAyB,WAAW,QAAQ,EAC9C,KAAK,CAAC,SAAS;AACd,UAAI,kBAAkB,IAAI;AAAA,IAC5B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,UAAI,OAAQ,gBAAe,aAAa,SAAS,KAAK,CAAC;AAAA,IACzD,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,yBAAyB,KAAK;AAAA,IACpC,CAAC;AACH,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,cAAc,CAAC;AAEvCA,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,QAAI,SAAS;AACb,uBAAmB,IAAI;AACvB,qBAAiB,IAAI;AACrB,SAAK,YAAoC,aAAa,UAAU,EAC7D,KAAK,CAAC,SAAS;AACd,UAAI,oBAAoB,IAAI;AAAA,IAC9B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,UAAI,OAAQ,kBAAiB,aAAa,WAAW,KAAK,CAAC;AAAA,IAC7D,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,2BAA2B,KAAK;AAAA,IACtC,CAAC;AACH,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,SAAO;AAAA,IACL;AAAA,IACA,GAAI,WACA,EAAE,iBAAiBC,YAAAA,2BAA2B,QAAQ,EAAA,IACtD,CAAA;AAAA,IACJ,SAAS,iBAAiB;AAAA,IAC1B,OAAO,CAAC,aAAa,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,IACjE,OAAO,MAAM,WAAW,CAAC,YAAY,UAAU,CAAC;AAAA,EAAA;AAEpD;AAEA,eAAe,YAAe,UAAkB,OAA2B;AACzE,QAAM,WAAW,MAAM,MAAM,QAAQ;AACrC,MAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,GAAG,KAAK,IAAI,SAAS,MAAM,EAAE;AAC/D,QAAM,OAAgB,MAAM,SAAS,KAAA;AACrC,MAAI,CAAC,MAAM,QAAQ,IAAI,GAAG;AACxB,UAAM,IAAI,MAAM,GAAG,KAAK,4BAA4B;AAAA,EACtD;AACA,SAAO;AACT;AAEA,SAAS,aAAa,MAAc,OAAwB;AAC1D,QAAM,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AACpE,SAAO,kBAAkB,IAAI,kBAAkB,MAAM;AACvD;;"}

package/dist/data/ai/ChatWindow.catalogs.d.ts

@@ -0,0 +1,16 @@
+import { ChatModel } from '../chat/types';
+import { SpecRuntimeFamily } from '../runtime/runtime-mode';
+export type ChatWindowCatalogOptions = {
+    models?: ChatModel[] | undefined;
+    modelsApi?: string | null | undefined;
+    runtimesApi?: string | null | undefined;
+};
+export type ChatWindowCatalogs = {
+    models: ChatModel[];
+    runtimeFamilies?: SpecRuntimeFamily[] | undefined;
+    loading: boolean;
+    error: string | null;
+    retry: () => void;
+};
+export declare function useChatWindowCatalogs({ models: providedModels, modelsApi, runtimesApi, }: ChatWindowCatalogOptions): ChatWindowCatalogs;
+//# sourceMappingURL=ChatWindow.catalogs.d.ts.map

package/dist/data/ai/ChatWindow.catalogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.catalogs.d.ts","sourceRoot":"","sources":["../../../src/data/ai/ChatWindow.catalogs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EAAE,cAAc,EACtB,SAAS,EACT,WAAW,GACZ,EAAE,wBAAwB,GAAG,kBAAkB,CA8D/C"}

package/dist/data/ai/ChatWindow.catalogs.js

@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+import { familiesFromRuntimeCatalog } from "../runtime/runtime-mode.js";
+function useChatWindowCatalogs({
+  models: providedModels,
+  modelsApi,
+  runtimesApi
+}) {
+  const [models, setModels] = useState(providedModels ?? []);
+  const [runtimes, setRuntimes] = useState();
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [runtimesLoading, setRuntimesLoading] = useState(false);
+  const [modelsError, setModelsError] = useState(null);
+  const [runtimesError, setRuntimesError] = useState(null);
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    if (providedModels) setModels(providedModels);
+  }, [providedModels]);
+  useEffect(() => {
+    if (providedModels || !modelsApi) return;
+    let active = true;
+    setModelsLoading(true);
+    setModelsError(null);
+    void loadCatalog(modelsApi, "models").then((data) => {
+      if (active) setModels(data);
+    }).catch((cause) => {
+      if (active) setModelsError(errorMessage("model", cause));
+    }).finally(() => {
+      if (active) setModelsLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [attempt, modelsApi, providedModels]);
+  useEffect(() => {
+    if (!runtimesApi) return;
+    let active = true;
+    setRuntimesLoading(true);
+    setRuntimesError(null);
+    void loadCatalog(runtimesApi, "runtimes").then((data) => {
+      if (active) setRuntimes(data);
+    }).catch((cause) => {
+      if (active) setRuntimesError(errorMessage("runtime", cause));
+    }).finally(() => {
+      if (active) setRuntimesLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [attempt, runtimesApi]);
+  return {
+    models,
+    ...runtimes ? { runtimeFamilies: familiesFromRuntimeCatalog(runtimes) } : {},
+    loading: modelsLoading || runtimesLoading,
+    error: [modelsError, runtimesError].filter(Boolean).join(" ") || null,
+    retry: () => setAttempt((current) => current + 1)
+  };
+}
+async function loadCatalog(endpoint, label) {
+  const response = await fetch(endpoint);
+  if (!response.ok) throw new Error(`${label} ${response.status}`);
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+    throw new Error(`${label} response must be an array`);
+  }
+  return data;
+}
+function errorMessage(kind, cause) {
+  const detail = cause instanceof Error ? cause.message : String(cause);
+  return `Unable to load ${kind} availability (${detail}). Check Captain and retry.`;
+}
+export {
+  useChatWindowCatalogs
+};
+//# sourceMappingURL=ChatWindow.catalogs.js.map

package/dist/data/ai/ChatWindow.catalogs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.catalogs.js","sources":["../../../src/data/ai/ChatWindow.catalogs.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ChatModel } from \"../chat/types\";\nimport {\n  familiesFromRuntimeCatalog,\n  type RuntimeCatalogFamily,\n  type SpecRuntimeFamily,\n} from \"../runtime/runtime-mode\";\n\nexport type ChatWindowCatalogOptions = {\n  models?: ChatModel[] | undefined;\n  modelsApi?: string | null | undefined;\n  runtimesApi?: string | null | undefined;\n};\n\nexport type ChatWindowCatalogs = {\n  models: ChatModel[];\n  runtimeFamilies?: SpecRuntimeFamily[] | undefined;\n  loading: boolean;\n  error: string | null;\n  retry: () => void;\n};\n\nexport function useChatWindowCatalogs({\n  models: providedModels,\n  modelsApi,\n  runtimesApi,\n}: ChatWindowCatalogOptions): ChatWindowCatalogs {\n  const [models, setModels] = useState<ChatModel[]>(providedModels ?? []);\n  const [runtimes, setRuntimes] = useState<RuntimeCatalogFamily[]>();\n  const [modelsLoading, setModelsLoading] = useState(false);\n  const [runtimesLoading, setRuntimesLoading] = useState(false);\n  const [modelsError, setModelsError] = useState<string | null>(null);\n  const [runtimesError, setRuntimesError] = useState<string | null>(null);\n  const [attempt, setAttempt] = useState(0);\n\n  useEffect(() => {\n    if (providedModels) setModels(providedModels);\n  }, [providedModels]);\n\n  useEffect(() => {\n    if (providedModels || !modelsApi) return;\n    let active = true;\n    setModelsLoading(true);\n    setModelsError(null);\n    void loadCatalog<ChatModel[]>(modelsApi, \"models\")\n      .then((data) => {\n        if (active) setModels(data);\n      })\n      .catch((cause) => {\n        if (active) setModelsError(errorMessage(\"model\", cause));\n      })\n      .finally(() => {\n        if (active) setModelsLoading(false);\n      });\n    return () => {\n      active = false;\n    };\n  }, [attempt, modelsApi, providedModels]);\n\n  useEffect(() => {\n    if (!runtimesApi) return;\n    let active = true;\n    setRuntimesLoading(true);\n    setRuntimesError(null);\n    void loadCatalog<RuntimeCatalogFamily[]>(runtimesApi, \"runtimes\")\n      .then((data) => {\n        if (active) setRuntimes(data);\n      })\n      .catch((cause) => {\n        if (active) setRuntimesError(errorMessage(\"runtime\", cause));\n      })\n      .finally(() => {\n        if (active) setRuntimesLoading(false);\n      });\n    return () => {\n      active = false;\n    };\n  }, [attempt, runtimesApi]);\n\n  return {\n    models,\n    ...(runtimes\n      ? { runtimeFamilies: familiesFromRuntimeCatalog(runtimes) }\n      : {}),\n    loading: modelsLoading || runtimesLoading,\n    error: [modelsError, runtimesError].filter(Boolean).join(\" \") || null,\n    retry: () => setAttempt((current) => current + 1),\n  };\n}\n\nasync function loadCatalog<T>(endpoint: string, label: string): Promise<T> {\n  const response = await fetch(endpoint);\n  if (!response.ok) throw new Error(`${label} ${response.status}`);\n  const data: unknown = await response.json();\n  if (!Array.isArray(data)) {\n    throw new Error(`${label} response must be an array`);\n  }\n  return data as T;\n}\n\nfunction errorMessage(kind: string, cause: unknown): string {\n  const detail = cause instanceof Error ? cause.message : String(cause);\n  return `Unable to load ${kind} availability (${detail}). Check Captain and retry.`;\n}\n"],"names":[],"mappings":";;AAsBO,SAAS,sBAAsB;AAAA,EACpC,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,kBAAkB,CAAA,CAAE;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAA;AAChC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AAExC,YAAU,MAAM;AACd,QAAI,0BAA0B,cAAc;AAAA,EAC9C,GAAG,CAAC,cAAc,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,kBAAkB,CAAC,UAAW;AAClC,QAAI,SAAS;AACb,qBAAiB,IAAI;AACrB,mBAAe,IAAI;AACnB,SAAK,YAAyB,WAAW,QAAQ,EAC9C,KAAK,CAAC,SAAS;AACd,UAAI,kBAAkB,IAAI;AAAA,IAC5B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,UAAI,OAAQ,gBAAe,aAAa,SAAS,KAAK,CAAC;AAAA,IACzD,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,yBAAyB,KAAK;AAAA,IACpC,CAAC;AACH,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,cAAc,CAAC;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,QAAI,SAAS;AACb,uBAAmB,IAAI;AACvB,qBAAiB,IAAI;AACrB,SAAK,YAAoC,aAAa,UAAU,EAC7D,KAAK,CAAC,SAAS;AACd,UAAI,oBAAoB,IAAI;AAAA,IAC9B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,UAAI,OAAQ,kBAAiB,aAAa,WAAW,KAAK,CAAC;AAAA,IAC7D,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,2BAA2B,KAAK;AAAA,IACtC,CAAC;AACH,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,CAAC;AAEzB,SAAO;AAAA,IACL;AAAA,IACA,GAAI,WACA,EAAE,iBAAiB,2BAA2B,QAAQ,EAAA,IACtD,CAAA;AAAA,IACJ,SAAS,iBAAiB;AAAA,IAC1B,OAAO,CAAC,aAAa,aAAa,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,IACjE,OAAO,MAAM,WAAW,CAAC,YAAY,UAAU,CAAC;AAAA,EAAA;AAEpD;AAEA,eAAe,YAAe,UAAkB,OAA2B;AACzE,QAAM,WAAW,MAAM,MAAM,QAAQ;AACrC,MAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,GAAG,KAAK,IAAI,SAAS,MAAM,EAAE;AAC/D,QAAM,OAAgB,MAAM,SAAS,KAAA;AACrC,MAAI,CAAC,MAAM,QAAQ,IAAI,GAAG;AACxB,UAAM,IAAI,MAAM,GAAG,KAAK,4BAA4B;AAAA,EACtD;AACA,SAAO;AACT;AAEA,SAAS,aAAa,MAAc,OAAwB;AAC1D,QAAM,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AACpE,SAAO,kBAAkB,IAAI,kBAAkB,MAAM;AACvD;"}