@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/data/ai/thread-costs.js

@@ -0,0 +1,39 @@
+function hasAgentBreakdown(costs) {
+  var _a;
+  return (((_a = costs.byAgent) == null ? void 0 : _a.length) ?? 0) > 1;
+}
+function groupCostsByAgent(costs) {
+  const rows = costs.byModel ?? [];
+  if (!hasAgentBreakdown(costs)) return [{ agent: void 0, rows }];
+  const bySession = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const bucket = bySession.get(row.sessionId);
+    if (bucket) bucket.push(row);
+    else bySession.set(row.sessionId, [row]);
+  }
+  const groups = [];
+  for (const agent of costs.byAgent) {
+    const sessionRows = bySession.get(agent.sessionId);
+    if (!(sessionRows == null ? void 0 : sessionRows.length)) continue;
+    bySession.delete(agent.sessionId);
+    groups.push({ agent, rows: sessionRows });
+  }
+  for (const [sessionId, sessionRows] of bySession) {
+    groups.push({
+      agent: { id: sessionId, sessionId, isRoot: false },
+      rows: sessionRows
+    });
+  }
+  return groups;
+}
+function agentLabel(agent) {
+  var _a, _b;
+  if (agent.isRoot) return "Main conversation";
+  return ((_a = agent.description) == null ? void 0 : _a.trim()) || ((_b = agent.agentType) == null ? void 0 : _b.trim()) || `Subagent ${agent.sessionId.slice(0, 8)}`;
+}
+export {
+  agentLabel,
+  groupCostsByAgent,
+  hasAgentBreakdown
+};
+//# sourceMappingURL=thread-costs.js.map

package/dist/data/ai/thread-costs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thread-costs.js","sources":["../../../src/data/ai/thread-costs.ts"],"sourcesContent":["// Types and pure grouping for the thread cost breakdown served by\n// GET <costsApi>/{threadId}/costs. Kept free of React so the grouping rules can\n// be unit-tested directly.\n\n/** One (sub-session × model × backend × effort) row of spend. */\nexport interface ThreadCostModel {\n  id: string;\n  sessionId: string;\n  model: string;\n  backend: string;\n  effort?: string;\n  currency: string;\n  modelCallCount: number;\n  inputTokens: number;\n  outputTokens: number;\n  reasoningTokens: number;\n  cacheReadTokens: number;\n  cacheWriteTokens: number;\n  totalTokens: number;\n  inputCost: number;\n  outputCost: number;\n  reasoningCost: number;\n  cacheReadCost: number;\n  cacheWriteCost: number;\n  /** Resolved total: the provider's billed figure when it reported one, else\n   *  the sum of the list-price buckets. */\n  totalCost: number;\n}\n\n/** One session in the thread: the root, plus a row per subagent. */\nexport interface ThreadCostAgent {\n  id: string;\n  sessionId: string;\n  parentSessionId?: string | null;\n  isRoot: boolean;\n  agentType?: string;\n  description?: string;\n  childCount?: number;\n  totalTokens?: number;\n  costUsd?: number;\n}\n\nexport interface ThreadCosts {\n  threadId: string;\n  totalCostUsd: number;\n  byModel: ThreadCostModel[];\n  byAgent: ThreadCostAgent[];\n}\n\nexport interface ThreadCostGroup {\n  agent: ThreadCostAgent | undefined;\n  rows: ThreadCostModel[];\n}\n\n/**\n * True when the thread actually has subagents. Chat threads are flat today, so\n * a single root row is the norm — grouping the table by it would present an\n * empty dimension as though it were data.\n */\nexport function hasAgentBreakdown(costs: ThreadCosts): boolean {\n  return (costs.byAgent?.length ?? 0) > 1;\n}\n\n/**\n * Buckets model rows by their session. Falls back to one unlabelled group when\n * the thread has no subagent breakdown, so the panel renders a flat table.\n * Groups follow byAgent order (root first); any row whose session is missing\n * from byAgent still appears, under its own group, rather than vanishing.\n */\nexport function groupCostsByAgent(costs: ThreadCosts): ThreadCostGroup[] {\n  const rows = costs.byModel ?? [];\n  if (!hasAgentBreakdown(costs)) return [{ agent: undefined, rows }];\n\n  const bySession = new Map<string, ThreadCostModel[]>();\n  for (const row of rows) {\n    const bucket = bySession.get(row.sessionId);\n    if (bucket) bucket.push(row);\n    else bySession.set(row.sessionId, [row]);\n  }\n\n  const groups: ThreadCostGroup[] = [];\n  for (const agent of costs.byAgent) {\n    const sessionRows = bySession.get(agent.sessionId);\n    if (!sessionRows?.length) continue;\n    bySession.delete(agent.sessionId);\n    groups.push({ agent, rows: sessionRows });\n  }\n  for (const [sessionId, sessionRows] of bySession) {\n    groups.push({\n      agent: { id: sessionId, sessionId, isRoot: false },\n      rows: sessionRows,\n    });\n  }\n  return groups;\n}\n\n/** Display name for a session: its task description, then agent type, then id. */\nexport function agentLabel(agent: ThreadCostAgent): string {\n  if (agent.isRoot) return \"Main conversation\";\n  return (\n    agent.description?.trim() ||\n    agent.agentType?.trim() ||\n    `Subagent ${agent.sessionId.slice(0, 8)}`\n  );\n}\n"],"names":[],"mappings":"AA2DO,SAAS,kBAAkB,OAA6B;AAAxD;AACL,YAAQ,WAAM,YAAN,mBAAe,WAAU,KAAK;AACxC;AAQO,SAAS,kBAAkB,OAAuC;AACvE,QAAM,OAAO,MAAM,WAAW,CAAA;AAC9B,MAAI,CAAC,kBAAkB,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,QAAW,MAAM;AAEjE,QAAM,gCAAgB,IAAA;AACtB,aAAW,OAAO,MAAM;AACtB,UAAM,SAAS,UAAU,IAAI,IAAI,SAAS;AAC1C,QAAI,OAAQ,QAAO,KAAK,GAAG;AAAA,mBACZ,IAAI,IAAI,WAAW,CAAC,GAAG,CAAC;AAAA,EACzC;AAEA,QAAM,SAA4B,CAAA;AAClC,aAAW,SAAS,MAAM,SAAS;AACjC,UAAM,cAAc,UAAU,IAAI,MAAM,SAAS;AACjD,QAAI,EAAC,2CAAa,QAAQ;AAC1B,cAAU,OAAO,MAAM,SAAS;AAChC,WAAO,KAAK,EAAE,OAAO,MAAM,aAAa;AAAA,EAC1C;AACA,aAAW,CAAC,WAAW,WAAW,KAAK,WAAW;AAChD,WAAO,KAAK;AAAA,MACV,OAAO,EAAE,IAAI,WAAW,WAAW,QAAQ,MAAA;AAAA,MAC3C,MAAM;AAAA,IAAA,CACP;AAAA,EACH;AACA,SAAO;AACT;AAGO,SAAS,WAAW,OAAgC;AAtCpD;AAuCL,MAAI,MAAM,OAAQ,QAAO;AACzB,WACE,WAAM,gBAAN,mBAAmB,aACnB,WAAM,cAAN,mBAAiB,WACjB,YAAY,MAAM,UAAU,MAAM,GAAG,CAAC,CAAC;AAE3C;"}

package/dist/data/cells/CellFilterActions.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const HoverCard = require("../../overlay/HoverCard.cjs");
+const Icon = require("../Icon.cjs");
+const UiZoomIn = require("../../icons/components/UiZoomIn.cjs");
+const UiZoomOut = require("../../icons/components/UiZoomOut.cjs");
+function CellFilterActions({
+  children,
+  value,
+  displayValue = value,
+  mode,
+  onChange
+}) {
+  const trigger = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex min-w-0", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard, { placement: "top", delay: 120, arrow: false, trigger, cardClassName: "!p-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CellFilterButton,
+      {
+        label: `Include ${displayValue}`,
+        icon: UiZoomIn.UiZoomIn,
+        active: mode === "include",
+        activeClassName: "bg-green-500/20 text-green-700 dark:text-green-400",
+        onClick: () => onChange(mode === "include" ? void 0 : "include")
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CellFilterButton,
+      {
+        label: `Exclude ${displayValue}`,
+        icon: UiZoomOut.UiZoomOut,
+        active: mode === "exclude",
+        activeClassName: "bg-red-500/20 text-red-700 dark:text-red-400",
+        onClick: () => onChange(mode === "exclude" ? void 0 : "exclude")
+      }
+    )
+  ] }) });
+}
+function CellFilterButton({
+  label,
+  icon,
+  active,
+  activeClassName,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": active,
+      title: label,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      className: utils.cn(
+        "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground",
+        "hover:bg-accent hover:text-foreground",
+        active && activeClassName
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-xs" })
+    }
+  );
+}
+exports.CellFilterActions = CellFilterActions;
+//# sourceMappingURL=CellFilterActions.cjs.map

package/dist/data/cells/CellFilterActions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellFilterActions.cjs","sources":["../../../src/data/cells/CellFilterActions.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiZoomIn, UiZoomOut } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\n\nexport type CellFilterMode = \"include\" | \"exclude\";\n\nexport type CellFilterChange = {\n  key: string;\n  value: string;\n  mode: CellFilterMode | undefined;\n};\n\nexport function CellFilterActions({\n  children,\n  value,\n  displayValue = value,\n  mode,\n  onChange,\n}: {\n  children: ReactNode;\n  value: string;\n  displayValue?: string;\n  mode?: CellFilterMode | undefined;\n  onChange: (mode: CellFilterMode | undefined) => void;\n}) {\n  const trigger = <span className=\"relative inline-flex min-w-0\">{children}</span>;\n  return (\n    <HoverCard placement=\"top\" delay={120} arrow={false} trigger={trigger} cardClassName=\"!p-1\">\n      <span className=\"inline-flex items-center gap-0.5\">\n        <CellFilterButton\n          label={`Include ${displayValue}`}\n          icon={UiZoomIn}\n          active={mode === \"include\"}\n          activeClassName=\"bg-green-500/20 text-green-700 dark:text-green-400\"\n          onClick={() => onChange(mode === \"include\" ? undefined : \"include\")}\n        />\n        <CellFilterButton\n          label={`Exclude ${displayValue}`}\n          icon={UiZoomOut}\n          active={mode === \"exclude\"}\n          activeClassName=\"bg-red-500/20 text-red-700 dark:text-red-400\"\n          onClick={() => onChange(mode === \"exclude\" ? undefined : \"exclude\")}\n        />\n      </span>\n    </HoverCard>\n  );\n}\n\nfunction CellFilterButton({\n  label,\n  icon,\n  active,\n  activeClassName,\n  onClick,\n}: {\n  label: string;\n  icon: StaticIconComponent;\n  active: boolean;\n  activeClassName: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      title={label}\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick();\n      }}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        active && activeClassName,\n      )}\n    >\n      <Icon icon={icon} className=\"text-xs\" />\n    </button>\n  );\n}\n"],"names":["jsx","HoverCard","jsxs","UiZoomIn","UiZoomOut","cn","Icon"],"mappings":";;;;;;;;AAcO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,GAMG;AACD,QAAM,UAAUA,2BAAAA,IAAC,QAAA,EAAK,WAAU,gCAAgC,UAAS;AACzE,SACEA,2BAAAA,IAACC,UAAAA,WAAA,EAAU,WAAU,OAAM,OAAO,KAAK,OAAO,OAAO,SAAkB,eAAc,QACnF,UAAAC,2BAAAA,KAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,IAAAF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,WAAW,YAAY;AAAA,QAC9B,MAAMG,SAAAA;AAAAA,QACN,QAAQ,SAAS;AAAA,QACjB,iBAAgB;AAAA,QAChB,SAAS,MAAM,SAAS,SAAS,YAAY,SAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpEH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,WAAW,YAAY;AAAA,QAC9B,MAAMI,UAAAA;AAAAA,QACN,QAAQ,SAAS;AAAA,QACjB,iBAAgB;AAAA,QAChB,SAAS,MAAM,SAAS,SAAS,YAAY,SAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACEJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAClB,cAAM,gBAAA;AACN,gBAAA;AAAA,MACF;AAAA,MACA,WAAWK,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAAL,2BAAAA,IAACM,KAAAA,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;;"}

package/dist/data/cells/CellFilterActions.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type CellFilterMode = "include" | "exclude";
+export type CellFilterChange = {
+    key: string;
+    value: string;
+    mode: CellFilterMode | undefined;
+};
+export declare function CellFilterActions({ children, value, displayValue, mode, onChange, }: {
+    children: ReactNode;
+    value: string;
+    displayValue?: string;
+    mode?: CellFilterMode | undefined;
+    onChange: (mode: CellFilterMode | undefined) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CellFilterActions.d.ts.map

package/dist/data/cells/CellFilterActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellFilterActions.d.ts","sourceRoot":"","sources":["../../../src/data/cells/CellFilterActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;CACtD,2CAsBA"}

package/dist/data/cells/CellFilterActions.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { HoverCard } from "../../overlay/HoverCard.js";
+import { Icon } from "../Icon.js";
+import { UiZoomIn } from "../../icons/components/UiZoomIn.js";
+import { UiZoomOut } from "../../icons/components/UiZoomOut.js";
+function CellFilterActions({
+  children,
+  value,
+  displayValue = value,
+  mode,
+  onChange
+}) {
+  const trigger = /* @__PURE__ */ jsx("span", { className: "relative inline-flex min-w-0", children });
+  return /* @__PURE__ */ jsx(HoverCard, { placement: "top", delay: 120, arrow: false, trigger, cardClassName: "!p-1", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx(
+      CellFilterButton,
+      {
+        label: `Include ${displayValue}`,
+        icon: UiZoomIn,
+        active: mode === "include",
+        activeClassName: "bg-green-500/20 text-green-700 dark:text-green-400",
+        onClick: () => onChange(mode === "include" ? void 0 : "include")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CellFilterButton,
+      {
+        label: `Exclude ${displayValue}`,
+        icon: UiZoomOut,
+        active: mode === "exclude",
+        activeClassName: "bg-red-500/20 text-red-700 dark:text-red-400",
+        onClick: () => onChange(mode === "exclude" ? void 0 : "exclude")
+      }
+    )
+  ] }) });
+}
+function CellFilterButton({
+  label,
+  icon,
+  active,
+  activeClassName,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": active,
+      title: label,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      className: cn(
+        "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground",
+        "hover:bg-accent hover:text-foreground",
+        active && activeClassName
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "text-xs" })
+    }
+  );
+}
+export {
+  CellFilterActions
+};
+//# sourceMappingURL=CellFilterActions.js.map

package/dist/data/cells/CellFilterActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellFilterActions.js","sources":["../../../src/data/cells/CellFilterActions.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiZoomIn, UiZoomOut } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\n\nexport type CellFilterMode = \"include\" | \"exclude\";\n\nexport type CellFilterChange = {\n  key: string;\n  value: string;\n  mode: CellFilterMode | undefined;\n};\n\nexport function CellFilterActions({\n  children,\n  value,\n  displayValue = value,\n  mode,\n  onChange,\n}: {\n  children: ReactNode;\n  value: string;\n  displayValue?: string;\n  mode?: CellFilterMode | undefined;\n  onChange: (mode: CellFilterMode | undefined) => void;\n}) {\n  const trigger = <span className=\"relative inline-flex min-w-0\">{children}</span>;\n  return (\n    <HoverCard placement=\"top\" delay={120} arrow={false} trigger={trigger} cardClassName=\"!p-1\">\n      <span className=\"inline-flex items-center gap-0.5\">\n        <CellFilterButton\n          label={`Include ${displayValue}`}\n          icon={UiZoomIn}\n          active={mode === \"include\"}\n          activeClassName=\"bg-green-500/20 text-green-700 dark:text-green-400\"\n          onClick={() => onChange(mode === \"include\" ? undefined : \"include\")}\n        />\n        <CellFilterButton\n          label={`Exclude ${displayValue}`}\n          icon={UiZoomOut}\n          active={mode === \"exclude\"}\n          activeClassName=\"bg-red-500/20 text-red-700 dark:text-red-400\"\n          onClick={() => onChange(mode === \"exclude\" ? undefined : \"exclude\")}\n        />\n      </span>\n    </HoverCard>\n  );\n}\n\nfunction CellFilterButton({\n  label,\n  icon,\n  active,\n  activeClassName,\n  onClick,\n}: {\n  label: string;\n  icon: StaticIconComponent;\n  active: boolean;\n  activeClassName: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      title={label}\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick();\n      }}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        active && activeClassName,\n      )}\n    >\n      <Icon icon={icon} className=\"text-xs\" />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,GAMG;AACD,QAAM,UAAU,oBAAC,QAAA,EAAK,WAAU,gCAAgC,UAAS;AACzE,SACE,oBAAC,WAAA,EAAU,WAAU,OAAM,OAAO,KAAK,OAAO,OAAO,SAAkB,eAAc,QACnF,UAAA,qBAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,WAAW,YAAY;AAAA,QAC9B,MAAM;AAAA,QACN,QAAQ,SAAS;AAAA,QACjB,iBAAgB;AAAA,QAChB,SAAS,MAAM,SAAS,SAAS,YAAY,SAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,WAAW,YAAY;AAAA,QAC9B,MAAM;AAAA,QACN,QAAQ,SAAS;AAAA,QACjB,iBAAgB;AAAA,QAChB,SAAS,MAAM,SAAS,SAAS,YAAY,SAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,OAAO;AAAA,MACP,SAAS,CAAC,UAAU;AAClB,cAAM,gBAAA;AACN,gBAAA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA,oBAAC,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG5C;"}

package/dist/data/chat/Chat.cjs

@@ -8,26 +8,32 @@ const utils = require("../../lib/utils.cjs");
 const Conversation = require("./Conversation.cjs");
 const PromptInput = require("./PromptInput.cjs");
 const Suggestion = require("./Suggestion.cjs");
-const ModelSelector = require("./ModelSelector.cjs");
-const providerIcons = require("./provider-icons.cjs");
-const ContextMeter = require("./ContextMeter.cjs");
 const effortIcons = require("./effort-icons.cjs");
 const models = require("./models.cjs");
 const approval = require("./approval.cjs");
+const Chat_runtime = require("./Chat.runtime.cjs");
 const attachmentUpload = require("./attachment-upload.cjs");
+const registry = require("./tool-render/registry.cjs");
+const context = require("./tool-render/context.cjs");
+const ChatRuntimeToolbar = require("./ChatRuntimeToolbar.cjs");
+const usageSnapshot = require("./usage-snapshot.cjs");
 function Chat({
   api = "/api/chat",
   models: modelsProp,
   modelsApi = "/api/chat/models",
   defaultModel,
   model: controlledModel,
+  defaultRuntime,
+  runtime: controlledRuntime,
+  runtimeFamilies,
   reasoningEfforts = effortIcons.DEFAULT_REASONING_EFFORTS,
-  defaultReasoningEffort = "",
+  defaultReasoningEffort,
   reasoningEffort: controlledEffort,
   temperature,
   budget,
   permissionMode,
   onModelChange,
+  onRuntimeChange,
   onReasoningEffortChange,
   onUsage,
   suggestions,
@@ -36,8 +42,10 @@ function Chat({
   attachmentUpload: attachmentUpload$1,
   attachmentLimits,
   threadId,
-  approvalApi = null,
+  sessionsApi = null,
   renderToolResult,
+  tools,
+  toolRenderers,
   body,
   transport,
   initialMessages,
@@ -47,23 +55,33 @@ function Chat({
   emptyState,
   className
 }) {
-  var _a;
   const [models$1, setModels] = react.useState(modelsProp ?? []);
-  const [model, setModel] = react.useState(
-    controlledModel ?? defaultModel
-  );
-  const [effort, setEffort] = react.useState(
-    controlledEffort ?? defaultReasoningEffort
+  const [internalRuntime, setInternalRuntime] = react.useState(
+    () => controlledRuntime ?? Chat_runtime.resolveChatRuntime({
+      models: modelsProp ?? [],
+      current: defaultRuntime,
+      preferredModel: controlledModel ?? (defaultRuntime ? void 0 : defaultModel ?? models.defaultChatModelId(modelsProp ?? [])),
+      effort: controlledEffort ?? defaultReasoningEffort,
+      temperature,
+      reasoningEfforts
+    })
   );
   const [usage, setUsage] = react.useState(null);
   const [approvalError, setApprovalError] = react.useState();
+  const [hydratedSessionId, setHydratedSessionId] = react.useState(
+    null
+  );
   const lastDefaultModel = react.useRef(defaultModel);
   const sentInitialPromptId = react.useRef(null);
+  const runtime = controlledRuntime ?? internalRuntime;
+  const toolRegistry = react.useMemo(
+    () => registry.toToolRenderRegistry(toolRenderers, tools ? { tools } : {}),
+    [toolRenderers, tools]
+  );
   react.useEffect(() => {
     if (!modelsProp) return;
     setModels(modelsProp);
-    setModel((m) => m ?? controlledModel ?? models.defaultChatModelId(modelsProp));
-  }, [modelsProp, controlledModel]);
+  }, [modelsProp]);
   react.useEffect(() => {
     if (modelsProp || !modelsApi) return;
     let cancelled = false;
@@ -72,30 +90,41 @@ function Chat({
     ).then((data) => {
       if (cancelled) return;
       setModels(data);
-      setModel((m) => m ?? controlledModel ?? models.defaultChatModelId(data));
     }).catch(
       (err) => console.warn("clicky-ui: failed to load chat models", err)
     );
     return () => {
       cancelled = true;
     };
-  }, [modelsProp, modelsApi, controlledModel]);
-  react.useEffect(() => {
-    if (controlledModel === void 0) return;
-    setModel(controlledModel);
-  }, [controlledModel]);
-  react.useEffect(() => {
-    if (controlledEffort === void 0) return;
-    setEffort(controlledEffort);
-  }, [controlledEffort]);
+  }, [modelsProp, modelsApi]);
   react.useEffect(() => {
-    if (controlledModel !== void 0) return;
-    if (!defaultModel || defaultModel === lastDefaultModel.current) return;
+    if (controlledRuntime !== void 0) return;
+    const defaultChanged = Boolean(defaultModel) && defaultModel !== lastDefaultModel.current;
     lastDefaultModel.current = defaultModel;
-    setModel(defaultModel);
-  }, [controlledModel, defaultModel]);
-  const selectedModel = models$1.find((m) => m.id === model);
-  const showEffort = !selectedModel || selectedModel.reasoning;
+    setInternalRuntime(
+      (current) => {
+        var _a;
+        return Chat_runtime.resolveChatRuntime({
+          models: models$1,
+          current,
+          preferredModel: controlledModel ?? (defaultChanged ? defaultModel : ((_a = Chat_runtime.selectedChatModel(models$1, current)) == null ? void 0 : _a.id) ?? defaultModel ?? models.defaultChatModelId(models$1)),
+          effort: controlledEffort,
+          temperature,
+          reasoningEfforts
+        });
+      }
+    );
+  }, [
+    controlledEffort,
+    controlledModel,
+    controlledRuntime,
+    defaultModel,
+    models$1,
+    reasoningEfforts,
+    temperature
+  ]);
+  const selectedModel = Chat_runtime.selectedChatModel(models$1, runtime);
+  const structuredRuntime = Chat_runtime.hasStructuredRuntime(runtime, selectedModel);
   const resolvedAttachmentUpload = react.useMemo(
     () => attachmentUpload$1 ?? attachmentUpload.createAttachmentUploadAdapter({ endpoint: attachmentsApi }),
     [attachmentUpload$1, attachmentsApi]
@@ -103,10 +132,11 @@ function Chat({
   const bodyRef = react.useRef({});
   bodyRef.current = {
     ...body,
-    ...model ? { model } : {},
-    ...(selectedModel == null ? void 0 : selectedModel.runtime) ? { runtime: selectedModel.runtime } : {},
-    ...effort ? { reasoningEffort: effort } : {},
-    ...temperature !== void 0 ? { temperature } : {},
+    ...structuredRuntime ? { runtime } : {
+      ...runtime.model ? { model: runtime.model } : {},
+      ...runtime.effort ? { reasoningEffort: runtime.effort } : {},
+      ...runtime.temperature !== void 0 ? { temperature: runtime.temperature } : {}
+    },
     ...budget && (budget.cost !== void 0 || budget.maxTokens !== void 0) ? { budget } : {},
     ...permissionMode ? { permissionMode } : {},
     ...threadId ? { threadId } : {}
@@ -117,117 +147,130 @@ function Chat({
   );
   const {
     messages,
+    setMessages,
     sendMessage,
     regenerate,
-    addToolApprovalResponse,
     status,
     error,
     clearError,
     stop
   } = react$1.useChat({
     transport: resolvedTransport,
-    sendAutomaticallyWhen: ai.lastAssistantMessageIsCompleteWithApprovalResponses,
+    ...threadId ? { id: threadId } : {},
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  const setMessagesRef = react.useRef(setMessages);
+  setMessagesRef.current = setMessages;
+  react.useEffect(() => {
+    if (!sessionsApi || !threadId) return;
+    let cancelled = false;
+    setHydratedSessionId(null);
+    setApprovalError(void 0);
+    setMessagesRef.current([]);
+    void approval.getChatSession(sessionsApi, threadId).then((session) => {
+      if (cancelled) return;
+      if (session.id !== threadId) {
+        throw new Error(
+          `Captain chat session response ID "${session.id}" does not match requested session "${threadId}".`
+        );
+      }
+      setMessagesRef.current(session.messages);
+      setHydratedSessionId(session.id);
+    }).catch((cause) => {
+      if (cancelled) return;
+      setApprovalError(
+        cause instanceof Error ? cause : new Error(String(cause))
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionsApi, threadId]);
   react.useEffect(() => {
     if (!initialPrompt || status !== "ready") return;
+    if (sessionsApi && threadId && hydratedSessionId !== threadId) return;
     if (sentInitialPromptId.current === initialPrompt.id) return;
     const text = initialPrompt.text.trim();
     if (!text) return;
     sentInitialPromptId.current = initialPrompt.id;
     void sendMessage({ text });
     onInitialPromptSent == null ? void 0 : onInitialPromptSent();
-  }, [initialPrompt, onInitialPromptSent, sendMessage, status]);
+  }, [
+    hydratedSessionId,
+    initialPrompt,
+    onInitialPromptSent,
+    sendMessage,
+    sessionsApi,
+    status,
+    threadId
+  ]);
   const onUsageRef = react.useRef(onUsage);
   onUsageRef.current = onUsage;
   react.useEffect(() => {
-    var _a2, _b, _c;
+    var _a;
     if (status !== "ready") return;
     const last = [...messages].reverse().find((m) => m.role === "assistant");
     const meta = last == null ? void 0 : last.metadata;
     if (!meta) return;
-    const cost = meta.threadCostUsd ?? ((_a2 = meta.costBreakdown) == null ? void 0 : _a2.totalUsd) ?? meta.cost;
-    const snapshot = {
-      usedTokens: meta.contextTokens ?? ((_b = meta.usage) == null ? void 0 : _b.totalTokens) ?? 0,
-      maxTokens: (selectedModel == null ? void 0 : selectedModel.contextWindow) ?? 0,
-      messageCount: messages.length,
-      ...cost != null ? { cost } : {},
-      ...meta.usage ? { usage: meta.usage } : {},
-      ...meta.costBreakdown ? { costBreakdown: meta.costBreakdown } : {},
-      ...(selectedModel == null ? void 0 : selectedModel.label) ? { modelLabel: selectedModel.label } : {}
-    };
+    const snapshot = usageSnapshot.usageSnapshotFromMetadata(meta, {
+      contextWindow: selectedModel == null ? void 0 : selectedModel.contextWindow,
+      modelLabel: selectedModel == null ? void 0 : selectedModel.label,
+      messageCount: messages.length
+    });
     setUsage(snapshot);
-    (_c = onUsageRef.current) == null ? void 0 : _c.call(onUsageRef, snapshot);
+    (_a = onUsageRef.current) == null ? void 0 : _a.call(onUsageRef, snapshot);
   }, [messages, status, selectedModel]);
-  const onModelSelect = (id) => {
-    setModel(id);
-    onModelChange == null ? void 0 : onModelChange(id);
-  };
-  const onEffortSelect = (next) => {
-    setEffort(next);
-    onReasoningEffortChange == null ? void 0 : onReasoningEffortChange(next);
+  const handleRuntimeChange = (next) => {
+    if (controlledRuntime === void 0) setInternalRuntime(next);
+    onRuntimeChange == null ? void 0 : onRuntimeChange(next);
+    const nextModel = Chat_runtime.selectedChatModel(models$1, next);
+    if ((nextModel == null ? void 0 : nextModel.id) !== (selectedModel == null ? void 0 : selectedModel.id)) {
+      onModelChange == null ? void 0 : onModelChange((nextModel == null ? void 0 : nextModel.id) ?? next.id ?? next.model ?? "");
+    }
+    if ((next.effort ?? "") !== (runtime.effort ?? "")) {
+      onReasoningEffortChange == null ? void 0 : onReasoningEffortChange(next.effort ?? "");
+    }
   };
   const resolveToolApproval = async (id, approved, reason) => {
     setApprovalError(void 0);
-    if (approvalApi) {
-      try {
-        await approval.postToolApproval({
-          approvalApi,
-          threadId: threadId ?? "",
-          approvalId: id,
-          approved,
-          ...reason ? { reason } : {}
-        });
-      } catch (cause) {
-        setApprovalError(
-          cause instanceof Error ? cause : new Error(String(cause))
+    try {
+      if (!sessionsApi) {
+        throw new Error(
+          "A Captain sessions API is required to resolve tool approvals."
         );
-        return;
       }
+      const session = await approval.postToolApproval({
+        sessionsApi,
+        sessionId: threadId ?? "",
+        approvalId: id,
+        approved,
+        ...reason ? { reason } : {}
+      });
+      if (session.id !== threadId) {
+        throw new Error(
+          `Captain chat session response ID "${session.id}" does not match active session "${threadId ?? ""}".`
+        );
+      }
+      setMessages(session.messages);
+    } catch (cause) {
+      setApprovalError(
+        cause instanceof Error ? cause : new Error(String(cause))
+      );
     }
-    await addToolApprovalResponse(
-      reason ? { id, approved, reason } : { id, approved }
-    );
   };
-  const ModelGlyph = providerIcons.providerIcon(selectedModel == null ? void 0 : selectedModel.provider);
-  const contextWindow = (selectedModel == null ? void 0 : selectedModel.contextWindow) ?? (usage == null ? void 0 : usage.maxTokens) ?? 0;
-  const usedTokens = (usage == null ? void 0 : usage.usedTokens) ?? 0;
-  const showContextMeter = Boolean(threadId || selectedModel || usage);
-  const toolbar = models$1.length > 0 || showEffort || showContextMeter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ModelSelector.ModelSelector, { models: models$1, value: model, onChange: onModelSelect }),
-    showEffort && /* @__PURE__ */ jsxRuntime.jsx(
-      ModelSelector.EffortSelector,
-      {
-        efforts: reasoningEfforts,
-        value: effort,
-        onChange: onEffortSelect
-      }
-    ),
-    showContextMeter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMeter.ContextMeter,
-        {
-          mode: "gauge",
-          usedPercent: contextWindow > 0 ? Math.round(usedTokens / contextWindow * 100) : 0,
-          usedTokens,
-          ...contextWindow > 0 ? { windowTokens: contextWindow } : {},
-          ...(usage == null ? void 0 : usage.messageCount) != null ? { messageCount: usage.messageCount } : {},
-          ...(usage == null ? void 0 : usage.cost) != null ? { cost: { total: usage.cost } } : {},
-          ...threadId ? { sessionId: threadId } : {},
-          ...(selectedModel == null ? void 0 : selectedModel.label) ? { model: selectedModel.label } : (usage == null ? void 0 : usage.modelLabel) ? { model: usage.modelLabel } : {},
-          ...effort ? { effort } : {},
-          ...((_a = selectedModel == null ? void 0 : selectedModel.runtime) == null ? void 0 : _a.mode) ? { executionMode: selectedModel.runtime.mode } : {},
-          ...ModelGlyph ? { modelIcon: ModelGlyph } : {},
-          ...(selectedModel == null ? void 0 : selectedModel.provider) ? {
-            modelIconClassName: providerIcons.providerIconColor(
-              selectedModel.provider
-            )
-          } : {}
-        }
-      )
-    ] })
-  ] }) : void 0;
+  const toolbar = /* @__PURE__ */ jsxRuntime.jsx(
+    ChatRuntimeToolbar.ChatRuntimeToolbar,
+    {
+      models: models$1,
+      runtime,
+      runtimeFamilies,
+      reasoningEfforts,
+      selectedModel,
+      usage,
+      threadId,
+      onRuntimeChange: handleRuntimeChange
+    }
+  );
   const empty = messages.length === 0 && (emptyState || (suggestions == null ? void 0 : suggestions.length)) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     emptyState,
     suggestions && suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -238,7 +281,7 @@ function Chat({
       }
     )
   ] }) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full flex-col", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(context.ToolRenderRegistryProvider, { value: toolRegistry, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Conversation.Conversation,
       {
@@ -250,7 +293,7 @@ function Chat({
           clearError();
         },
         ...threadId ? { sessionId: threadId } : {},
-        ...model ? { model } : {},
+        ...(selectedModel == null ? void 0 : selectedModel.id) ? { model: selectedModel.id } : runtime.model ? { model: runtime.model } : {},
         emptyState: empty,
         onRegenerate: (messageId) => void regenerate({ messageId }),
         onApprove: (id, approved, reason) => void resolveToolApproval(id, approved, reason),
@@ -271,7 +314,7 @@ function Chat({
         onSubmit: (text, files) => void sendMessage({ text, files })
       }
     ) })
-  ] });
+  ] }) });
 }
 exports.Chat = Chat;
 //# sourceMappingURL=Chat.cjs.map