@flanksource/clicky-ui 0.3.16 → 0.3.18

package/dist/data/ai/AdvancedChatConfig.js

@@ -0,0 +1,289 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../components/button.js";
+import { cn } from "../../lib/utils.js";
+import { ProviderStatusPanel } from "../runtime/ProviderStatusPanel.js";
+import { RuntimeBar } from "../runtime/RuntimeBar.js";
+import { SPEC_RUNTIME_FAMILIES } from "../runtime/runtime-mode.js";
+import { CLAUDE_PERMISSION_MODE_OPTIONS } from "../chat/types.js";
+function AdvancedChatConfig({
+  models,
+  runtime,
+  onRuntimeChange,
+  runtimeFamilies,
+  reasoningEfforts,
+  permissionMode,
+  onPermissionModeChange,
+  temperature,
+  onTemperatureChange,
+  budget,
+  onBudgetChange,
+  usage,
+  catalogLoading = false,
+  catalogError = null,
+  onCatalogRetry
+}) {
+  const updateBudget = (key, raw) => {
+    const next = { ...budget };
+    const parsed = parseOptionalNumber(raw, key === "maxTokens");
+    if (parsed === void 0) delete next[key];
+    else next[key] = parsed;
+    onBudgetChange == null ? void 0 : onBudgetChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 gap-4 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Runtime" }),
+        catalogLoading && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Checking model and runtime availability…" }),
+        catalogError && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: "flex items-center justify-between gap-3 rounded border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: catalogError }),
+              onCatalogRetry && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "outline",
+                  onClick: onCatalogRetry,
+                  children: "Retry"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RuntimeBar,
+          {
+            variant: "segmented",
+            ariaLabel: "Advanced runtime",
+            value: runtime,
+            onChange: (next) => onRuntimeChange == null ? void 0 : onRuntimeChange(next),
+            models,
+            reasoningEfforts,
+            ...runtimeFamilies ? { families: runtimeFamilies } : {},
+            className: "max-w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { className: "grid max-w-md grid-cols-[9rem_minmax(0,1fr)] items-center gap-3 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Permission mode" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              "aria-label": "Permission mode",
+              value: permissionMode,
+              onChange: (event) => onPermissionModeChange == null ? void 0 : onPermissionModeChange(
+                event.target.value
+              ),
+              className: "h-8 rounded border border-border bg-background px-2 text-xs",
+              children: CLAUDE_PERMISSION_MODE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: option.value,
+                  title: option.description,
+                  children: option.label
+                },
+                option.value
+              ))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Generation" }),
+        /* @__PURE__ */ jsxs("label", { className: "grid grid-cols-[8rem_minmax(0,1fr)_4rem] items-center gap-3 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Temperature" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 2,
+              step: 0.1,
+              value: temperature ?? 0,
+              onChange: (event) => onTemperatureChange == null ? void 0 : onTemperatureChange(Number(event.target.value))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 2,
+              step: 0.1,
+              value: temperature ?? "",
+              onChange: (event) => onTemperatureChange == null ? void 0 : onTemperatureChange(parseOptionalNumber(event.target.value)),
+              className: "h-8 rounded border border-border bg-background px-2 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Budget" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Max cost" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                step: 0.01,
+                value: (budget == null ? void 0 : budget.cost) ?? "",
+                onChange: (event) => updateBudget("cost", event.target.value),
+                className: "h-8 w-full rounded border border-border bg-background px-2 text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Max tokens" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                step: 1,
+                value: (budget == null ? void 0 : budget.maxTokens) ?? "",
+                onChange: (event) => updateBudget("maxTokens", event.target.value),
+                className: "h-8 w-full rounded border border-border bg-background px-2 text-xs"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      UsageCostPanel,
+      {
+        usage,
+        models,
+        families: runtimeFamilies ?? SPEC_RUNTIME_FAMILIES,
+        showProviderStatus: !catalogLoading
+      }
+    )
+  ] });
+}
+function UsageCostPanel({
+  usage,
+  models,
+  families,
+  showProviderStatus
+}) {
+  const tokens = usage == null ? void 0 : usage.usage;
+  const costs = usage == null ? void 0 : usage.costBreakdown;
+  return /* @__PURE__ */ jsxs("aside", { className: "space-y-3 border-t border-border pt-4 lg:border-l lg:border-t-0 lg:pl-4 lg:pt-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Usage (last turn)" }),
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded border border-border", children: [
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Context",
+          value: `${formatNumber(usage == null ? void 0 : usage.usedTokens)} / ${formatNumber(
+            usage == null ? void 0 : usage.maxTokens
+          )}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Input tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.inputTokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Output tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.outputTokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Reasoning tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.reasoningTokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Cache read tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.cacheReadTokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Cache write tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.cacheWriteTokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Total tokens",
+          value: formatNumber(tokens == null ? void 0 : tokens.totalTokens)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Cost (last turn)" }),
+    /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded border border-border", children: [
+      /* @__PURE__ */ jsx(MetricRow, { label: "Input", value: formatUSD(costs == null ? void 0 : costs.inputUsd) }),
+      /* @__PURE__ */ jsx(MetricRow, { label: "Output", value: formatUSD(costs == null ? void 0 : costs.outputUsd) }),
+      /* @__PURE__ */ jsx(MetricRow, { label: "Reasoning", value: formatUSD(costs == null ? void 0 : costs.reasoningUsd) }),
+      /* @__PURE__ */ jsx(MetricRow, { label: "Cache read", value: formatUSD(costs == null ? void 0 : costs.cacheReadUsd) }),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Cache write",
+          value: formatUSD(costs == null ? void 0 : costs.cacheWriteUsd)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricRow,
+        {
+          label: "Conversation total",
+          value: formatUSD((usage == null ? void 0 : usage.cost) ?? (costs == null ? void 0 : costs.totalUsd)),
+          strong: true
+        }
+      )
+    ] }),
+    showProviderStatus && /* @__PURE__ */ jsx(ProviderStatusPanel, { models, families })
+  ] });
+}
+function MetricRow({
+  label,
+  value,
+  strong = false
+}) {
+  return /* @__PURE__ */ jsxs("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", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("font-mono", strong && "font-semibold text-foreground"),
+        children: value
+      }
+    )
+  ] });
+}
+function parseOptionalNumber(raw, integer = false) {
+  if (raw.trim() === "") return void 0;
+  const value = Number(raw);
+  if (!Number.isFinite(value)) return void 0;
+  return integer ? Math.max(0, Math.trunc(value)) : value;
+}
+function formatNumber(value) {
+  if (value == null || !Number.isFinite(value)) return "-";
+  return new Intl.NumberFormat().format(value);
+}
+function formatUSD(value) {
+  if (value == null || !Number.isFinite(value)) return "-";
+  return `$${value.toFixed(value >= 1 ? 4 : 6)}`;
+}
+export {
+  AdvancedChatConfig
+};
+//# sourceMappingURL=AdvancedChatConfig.js.map

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":";;;;;;AAoBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAA4B;;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAA6B,IAAI;AAC3D,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAwB,IAAI;AACtD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,UAAU;AAC1B,eAAS,IAAI;AACb;AAAA,IACF;AACA,UAAM,aAAa,IAAI,gBAAA;AACvB,eAAW,IAAI;AACf,aAAS,IAAI;AACb,UAAM,GAAG,QAAQ,IAAI,QAAQ,UAAU,EAAE,QAAQ,WAAW,OAAA,CAAQ,EACjE,KAAK,OAAO,aAAa;AACxB,UAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,MAAM,eAAe,QAAQ,CAAC;AAChE,aAAQ,MAAM,SAAS,KAAA;AAAA,IACzB,CAAC,EACA,KAAK,CAAC,YAAY,SAAS,OAAO,CAAC,EACnC,MAAM,CAAC,UAAmB;AACzB,UAAI,WAAW,OAAO,QAAS;AAC/B,eAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CAAC;AAAA,IACjE,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,WAAW,OAAO,oBAAoB,KAAK;AAAA,IAClD,CAAC;AACH,WAAO,MAAM,WAAW,MAAA;AAAA,EAC1B,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,MAAI,CAAC,SAAU,QAAOC,2BAAAA,IAAC,gBAAa,UAAA,wBAAoB;AACxD,MAAI,WAAW,CAAC,MAAO,QAAOA,2BAAAA,IAAC,gBAAa,UAAA,kBAAc;AAC1D,MAAI,MAAO,QAAOA,2BAAAA,IAAC,cAAA,EAAa,MAAK,SAAS,UAAA,OAAM;AACpD,MAAI,GAAC,oCAAO,YAAP,mBAAgB;AACnB,WAAOA,2BAAAA,IAAC,gBAAa,UAAA,iDAAA,CAA8C;AAErE,QAAM,SAASC,YAAAA,kBAAkB,KAAK;AACtC,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,IAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,MAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,wEAAuE,UAAA,sBAEtF;AAAA,MACAA,+BAAC,SAAI,WAAU,mCACZ,4BAAW,MAAM,gBAAgB,CAAC,EAAA,CACrC;AAAA,IAAA,GACF;AAAA,IACC,OAAO,IAAI,CAAC;;AACXA,wCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,MAAM;AAAA,UACb,MAAM,MAAM;AAAA,UACZ,YAAYG,YAAAA,kBAAkB,KAAK;AAAA,QAAA;AAAA,UAH9BC,MAAA,MAAM,UAAN,gBAAAA,IAAa,OAAM;AAAA,MAAA;AAAA,KAK3B;AAAA,EAAA,GACH;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACEF,2BAAAA,KAAC,OAAA,EAAI,WAAU,eACZ,UAAA;AAAA,IAAA,cAAc,QACbA,gCAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,MAAAF,+BAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAK,YAAAA,WAAW,KAAK,GAAE;AAAA,MAClEL,+BAAC,UAAK,WAAU,2CACb,4BAAW,MAAM,WAAW,CAAC,EAAA,CAChC;AAAA,IAAA,EAAA,CACF,IACE;AAAA,mCACH,OAAA,EAAI,WAAU,gDACb,UAAAE,2BAAAA,KAAC,SAAA,EAAM,WAAU,0DACf,UAAA;AAAA,MAAAF,+BAAC,SAAA,EAAM,WAAU,qCACf,UAAAE,2BAAAA,KAAC,MAAA,EACC,UAAA;AAAA,QAAAF,2BAAAA,IAAC,MAAG,UAAA,QAAA,CAAK;AAAA,QACTA,2BAAAA,IAAC,MAAG,UAAA,UAAA,CAAO;AAAA,QACXA,2BAAAA,IAAC,MAAG,UAAA,QAAA,CAAK;AAAA,QACTA,2BAAAA,IAAC,MAAG,UAAA,SAAA,CAAM;AAAA,QACVA,2BAAAA,IAAC,MAAG,UAAA,QAAA,CAAK;AAAA,QACTA,2BAAAA,IAAC,MAAG,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CACV,EAAA,CACF;AAAA,MACAA,2BAAAA,IAAC,WAAM,WAAU,0BACd,eAAK,IAAI,CAAC,QACTE,2BAAAA,KAAC,MAAA,EACC,UAAA;AAAA,QAAAF,2BAAAA,IAAC,IAAA,EAAI,cAAI,SAASA,2BAAAA,IAAC,UAAK,WAAU,yBAAwB,qBAAO,EAAA,CAAQ;AAAA,wCACxE,IAAA,EACC,UAAA;AAAA,UAAAA,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,IAAI,SAAQ;AAAA,UACpD,IAAI,SACHE,gCAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,YAAA;AAAA,YAAI,IAAI;AAAA,UAAA,EAAA,CAAO,IACrD;AAAA,QAAA,GACN;AAAA,QACAF,2BAAAA,IAAC,IAAA,EAAI,UAAA,IAAI,eAAA,CAAe;AAAA,QACxBA,2BAAAA,IAAC,IAAA,EAAI,UAAAM,OAAAA,cAAc,IAAI,WAAW,GAAE;AAAA,uCACnC,IAAA,EACE,UAAAA,OAAAA;AAAAA,WACE,IAAI,mBAAmB,MAAM,IAAI,oBAAoB;AAAA,QAAA,GAE1D;AAAA,uCACC,IAAA,EAAI,UAAAC,OAAAA,WAAW,IAAI,aAAa,CAAC,EAAA,CAAE;AAAA,MAAA,KAf7B,IAAI,EAgBb,CACD,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AACF,GAGG;AACD,SACEP,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,SAAS,UACL,wFACA;AAAA,MAGL;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,GAAG,EAAE,YAA2C;AACvD,SAAOA,2BAAAA,IAAC,MAAA,EAAG,WAAU,2BAA2B,SAAA,CAAS;AAC3D;AAEA,SAAS,GAAG,EAAE,YAA2C;AACvD,SAAOA,2BAAAA,IAAC,MAAA,EAAG,WAAU,yBAAyB,SAAA,CAAS;AACzD;AAEA,eAAe,eAAe,UAAqC;AACjE,QAAM,QAAQ,MAAM,SAAS,KAAA,GAAQ,KAAA;AACrC,SAAO,QAAQ,+BAA+B,SAAS,MAAM;AAC/D;;"}

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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"}