@flanksource/clicky-ui 0.3.44 → 0.3.45

package/dist/data/ai/SessionViewer.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.tokens.js","sources":["../../../src/data/ai/SessionViewer.tokens.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { UiDotsVertical } from \"../../icons\";\nimport type { SessionEvent } from \"./SessionViewer.model\";\nimport { SessionTokenContext } from \"./use-session-token-sizing\";\nimport { compactTokens, formatCost } from \"./session-cost\";\n\nexport function SessionRowTokens({ event }: { event: SessionEvent }) {\n  const sizing = useContext(SessionTokenContext);\n  if (!sizing || event.pending) return null;\n  const row = sizing.state(event);\n  const size = row?.size;\n  const title = size ? `${size.source} · ${size.model}. Input ${size.usage.inputTokens ?? 0}, output ${size.usage.outputTokens ?? 0}, reasoning ${size.usage.reasoningTokens ?? 0}. ${size.coverage.framingIncluded ? \"Provider framing included. \" : \"\"}Excluded: ${size.coverage.excluded?.join(\"; \") || \"none\"}. Content footprint; not historical billed usage.` : undefined;\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted-foreground\" data-row-tokens={event.id}>\n      {size && <span aria-label=\"Calculated row footprint\" title={title}>Footprint {size.source === \"local-estimate\" || size.source === \"provider-estimate\" ? \"~\" : \"\"}{compactTokens(size.totalTokens)} tokens · {size.costUSD !== undefined ? `~${formatCost(size.costUSD)}` : \"price unavailable\"}{size.coverage.partial ? \" · partial\" : \"\"}</span>}\n      {row?.pending && <span role=\"status\">Calculating tokens/cost…</span>}\n      {row?.error && <span role=\"alert\" className=\"text-destructive\">{row.error}</span>}\n      {!event.estimatedCost && (\n        <DropdownMenu icon={UiDotsVertical} hideChevron variant=\"ghost\" size=\"icon\" title={`Row options ${event.id}`} menuLabel={`Row options ${event.id}`} items={[{\n          label: \"Calculate tokens/cost\", disabled: Boolean(row?.pending),\n          onSelect: () => sizing.calculate([event.id], \"provider\"),\n        }]} />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAOO,SAAS,iBAAiB,EAAE,SAAkC;;AACnE,QAAM,SAAS,WAAW,mBAAmB;AAC7C,MAAI,CAAC,UAAU,MAAM,QAAS,QAAO;AACrC,QAAM,MAAM,OAAO,MAAM,KAAK;AAC9B,QAAM,OAAO,2BAAK;AAClB,QAAM,QAAQ,OAAO,GAAG,KAAK,MAAM,MAAM,KAAK,KAAK,WAAW,KAAK,MAAM,eAAe,CAAC,YAAY,KAAK,MAAM,gBAAgB,CAAC,eAAe,KAAK,MAAM,mBAAmB,CAAC,KAAK,KAAK,SAAS,kBAAkB,gCAAgC,EAAE,eAAa,UAAK,SAAS,aAAd,mBAAwB,KAAK,UAAS,MAAM,sDAAsD;AACrW,8BACG,OAAA,EAAI,WAAU,2EAA0E,mBAAiB,MAAM,IAC7G,UAAA;AAAA,IAAA,QAAQ,qBAAC,QAAA,EAAK,cAAW,4BAA2B,OAAc,UAAA;AAAA,MAAA;AAAA,MAAW,KAAK,WAAW,oBAAoB,KAAK,WAAW,sBAAsB,MAAM;AAAA,MAAI,cAAc,KAAK,WAAW;AAAA,MAAE;AAAA,MAAW,KAAK,YAAY,SAAY,IAAI,WAAW,KAAK,OAAO,CAAC,KAAK;AAAA,MAAqB,KAAK,SAAS,UAAU,eAAe;AAAA,IAAA,GAAG;AAAA,KACzU,2BAAK,YAAW,oBAAC,QAAA,EAAK,MAAK,UAAS,UAAA,4BAAwB;AAAA,KAC5D,2BAAK,UAAS,oBAAC,QAAA,EAAK,MAAK,SAAQ,WAAU,oBAAoB,UAAA,IAAI,MAAA,CAAM;AAAA,IACzE,CAAC,MAAM,iBACN,oBAAC,cAAA,EAAa,MAAM,gBAAgB,aAAW,MAAC,SAAQ,SAAQ,MAAK,QAAO,OAAO,eAAe,MAAM,EAAE,IAAI,WAAW,eAAe,MAAM,EAAE,IAAI,OAAO,CAAC;AAAA,MAC1J,OAAO;AAAA,MAAyB,UAAU,QAAQ,2BAAK,OAAO;AAAA,MAC9D,UAAU,MAAM,OAAO,UAAU,CAAC,MAAM,EAAE,GAAG,UAAU;AAAA,IAAA,CACxD,EAAA,CAAG;AAAA,EAAA,GAER;AAEJ;"}

package/dist/data/ai/SessionViewer.tool-cost.cjs

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const sessionCost = require("./session-cost.cjs");
+const UiCoins = require("../../icons/components/UiCoins.cjs");
+const tokens = require("../../lib/tokens.cjs");
+const UiDatabase = require("../../icons/components/UiDatabase.cjs");
+const UiArrowUp = require("../../icons/components/UiArrowUp.cjs");
+const UiArrowDown = require("../../icons/components/UiArrowDown.cjs");
+const UiBrain = require("../../icons/components/UiBrain.cjs");
+const TOKEN_BUCKETS = [
+  ["inputTokens", "In", "Input", UiArrowUp.UiArrowUp],
+  ["outputTokens", "Out", "Output", UiArrowDown.UiArrowDown],
+  ["reasoningTokens", "Reasoning", "Reasoning", UiBrain.UiBrain],
+  ["cacheReadTokens", "Cache read", "Cache read", UiDatabase.UiDatabaseDown],
+  ["cacheWriteTokens", "Cache write", "Cache write", UiDatabase.UiDatabaseUp]
+];
+function EstimatedToolCost({
+  events,
+  detailed = false
+}) {
+  var _a;
+  const estimates = events.flatMap(
+    (event) => event.estimatedCost ? [event.estimatedCost] : []
+  );
+  if (!estimates.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-label": detailed ? "Estimated tool cost details" : "Estimate unavailable",
+        title: "Estimate unavailable",
+        className: "shrink-0 text-[11px] text-muted-foreground",
+        children: detailed ? "Estimate unavailable" : "—"
+      }
+    );
+  }
+  const costs = estimates.map((estimate) => estimate.cost);
+  const total = costs.reduce((sum, cost) => sum + sessionCost.costTotal(cost), 0);
+  const sharedCalls = (_a = estimates[0]) == null ? void 0 : _a.sharedCalls;
+  const allocation = events.length === 1 ? `Model request shared equally across ${sharedCalls} tool call${sharedCalls === 1 ? "" : "s"}.` : `Combined estimate for ${estimates.length} calls; each model request is shared equally across its tool calls.`;
+  const description = `${allocation} Includes conversation context and generating the calls. Reading tool results is accounted for in subsequent model requests. Estimated cost in USD.`;
+  if (!detailed) {
+    const cacheReadTokens = costs.reduce((sum, cost) => sum + (cost.cacheReadTokens ?? 0), 0);
+    const cacheReadDescription = `Cache read delta: ${cacheReadTokens.toLocaleString("en-US")} tokens`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "group",
+        "aria-label": "Estimated tool cost",
+        title: description,
+        className: "inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap text-[11px] tabular-nums text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UiCoins.UiCoins, { className: "size-3 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: total > 0 ? `~${tokens.formatCost(total)}` : "—" }),
+          cacheReadTokens > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              role: "group",
+              "aria-label": cacheReadDescription,
+              title: cacheReadDescription,
+              className: "ml-1 inline-flex items-center gap-0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(UiDatabase.UiDatabaseDown, { className: "size-3 shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "+",
+                  tokens.compactTokens(cacheReadTokens)
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Estimated tool cost details",
+      title: description,
+      className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-1.5 text-[11px] tabular-nums text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            role: "group",
+            "aria-label": total > 0 ? `Estimated cost: ${tokens.formatCost(total)} USD` : "Cost unavailable",
+            className: "inline-flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(UiCoins.UiCoins, { className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Est." }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: total > 0 ? `~${tokens.formatCost(total)}` : "Cost unavailable" }),
+              total > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-medium", children: "USD" })
+            ]
+          }
+        ),
+        TOKEN_BUCKETS.map(([key, label, name, BucketIcon]) => {
+          const tokens$1 = costs.reduce((sum, cost) => sum + (cost[key] ?? 0), 0);
+          const description2 = `${name}: ${tokens$1.toLocaleString("en-US")} tokens`;
+          return tokens$1 > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              role: "group",
+              "aria-label": description2,
+              title: description2,
+              className: "inline-flex items-center gap-1 whitespace-nowrap",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(BucketIcon, { className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  label,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: tokens.compactTokens(tokens$1) })
+                ] })
+              ]
+            },
+            key
+          ) : null;
+        }),
+        estimates.length < events.length && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          events.length - estimates.length,
+          " unavailable"
+        ] })
+      ]
+    }
+  );
+}
+exports.EstimatedToolCost = EstimatedToolCost;
+//# sourceMappingURL=SessionViewer.tool-cost.cjs.map

package/dist/data/ai/SessionViewer.tool-cost.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.tool-cost.cjs","sources":["../../../src/data/ai/SessionViewer.tool-cost.tsx"],"sourcesContent":["import type { SessionEvent } from \"./SessionViewer.model\";\nimport { compactTokens, costTotal, formatCost } from \"./session-cost\";\nimport type { SessionCost } from \"./SessionViewer.unified\";\nimport {\n  UiArrowDown,\n  UiArrowUp,\n  UiBrain,\n  UiCoins,\n  UiDatabaseDown,\n  UiDatabaseUp,\n} from \"../../icons\";\n\nconst TOKEN_BUCKETS = [\n  [\"inputTokens\", \"In\", \"Input\", UiArrowUp],\n  [\"outputTokens\", \"Out\", \"Output\", UiArrowDown],\n  [\"reasoningTokens\", \"Reasoning\", \"Reasoning\", UiBrain],\n  [\"cacheReadTokens\", \"Cache read\", \"Cache read\", UiDatabaseDown],\n  [\"cacheWriteTokens\", \"Cache write\", \"Cache write\", UiDatabaseUp],\n] as const;\n\nexport function EstimatedToolCost({\n  events,\n  detailed = false,\n}: {\n  events: SessionEvent[];\n  detailed?: boolean;\n}) {\n  const estimates = events.flatMap((event) =>\n    event.estimatedCost ? [event.estimatedCost] : [],\n  );\n  if (!estimates.length) {\n    return (\n      <span\n        aria-label={\n          detailed ? \"Estimated tool cost details\" : \"Estimate unavailable\"\n        }\n        title=\"Estimate unavailable\"\n        className=\"shrink-0 text-[11px] text-muted-foreground\"\n      >\n        {detailed ? \"Estimate unavailable\" : \"—\"}\n      </span>\n    );\n  }\n  const costs: SessionCost[] = estimates.map((estimate) => estimate.cost);\n  const total = costs.reduce((sum, cost) => sum + costTotal(cost), 0);\n  const sharedCalls = estimates[0]?.sharedCalls;\n  const allocation =\n    events.length === 1\n      ? `Model request shared equally across ${sharedCalls} tool call${sharedCalls === 1 ? \"\" : \"s\"}.`\n      : `Combined estimate for ${estimates.length} calls; each model request is shared equally across its tool calls.`;\n  const description = `${allocation} Includes conversation context and generating the calls. Reading tool results is accounted for in subsequent model requests. Estimated cost in USD.`;\n  if (!detailed) {\n    const cacheReadTokens = costs.reduce((sum, cost) => sum + (cost.cacheReadTokens ?? 0), 0);\n    const cacheReadDescription = `Cache read delta: ${cacheReadTokens.toLocaleString(\"en-US\")} tokens`;\n    return (\n      <span\n        role=\"group\"\n        aria-label=\"Estimated tool cost\"\n        title={description}\n        className=\"inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap text-[11px] tabular-nums text-muted-foreground\"\n      >\n        <UiCoins className=\"size-3 shrink-0\" />\n        <span>{total > 0 ? `~${formatCost(total)}` : \"—\"}</span>\n        {cacheReadTokens > 0 && (\n          <span\n            role=\"group\"\n            aria-label={cacheReadDescription}\n            title={cacheReadDescription}\n            className=\"ml-1 inline-flex items-center gap-0.5\"\n          >\n            <UiDatabaseDown className=\"size-3 shrink-0\" />\n            <span>+{compactTokens(cacheReadTokens)}</span>\n          </span>\n        )}\n      </span>\n    );\n  }\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Estimated tool cost details\"\n      title={description}\n      className=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-1.5 text-[11px] tabular-nums text-muted-foreground\"\n    >\n      <span\n        role=\"group\"\n        aria-label={\n          total > 0\n            ? `Estimated cost: ${formatCost(total)} USD`\n            : \"Cost unavailable\"\n        }\n        className=\"inline-flex items-center gap-1\"\n      >\n        <UiCoins className=\"size-3.5 shrink-0\" />\n        <span>Est.</span>\n        <span className=\"font-semibold text-foreground\">\n          {total > 0 ? `~${formatCost(total)}` : \"Cost unavailable\"}\n        </span>\n        {total > 0 && <span className=\"text-[9px] font-medium\">USD</span>}\n      </span>\n      {TOKEN_BUCKETS.map(([key, label, name, BucketIcon]) => {\n        const tokens = costs.reduce((sum, cost) => sum + (cost[key] ?? 0), 0);\n        const description = `${name}: ${tokens.toLocaleString(\"en-US\")} tokens`;\n        return tokens > 0 ? (\n          <span\n            key={key}\n            role=\"group\"\n            aria-label={description}\n            title={description}\n            className=\"inline-flex items-center gap-1 whitespace-nowrap\"\n          >\n            <BucketIcon className=\"size-3.5 shrink-0\" />\n            <span>\n              {label}{\" \"}\n              <span className=\"font-medium text-foreground\">\n                {compactTokens(tokens)}\n              </span>\n            </span>\n          </span>\n        ) : null;\n      })}\n      {estimates.length < events.length && (\n        <span>{events.length - estimates.length} unavailable</span>\n      )}\n    </div>\n  );\n}\n"],"names":["UiArrowUp","UiArrowDown","UiBrain","UiDatabaseDown","UiDatabaseUp","jsx","costTotal","jsxs","UiCoins","formatCost","compactTokens","tokens","description"],"mappings":"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"}

package/dist/data/ai/SessionViewer.tool-cost.d.ts

@@ -0,0 +1,6 @@
+import { SessionEvent } from './SessionViewer.model.js';
+export declare function EstimatedToolCost({ events, detailed, }: {
+    events: SessionEvent[];
+    detailed?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SessionViewer.tool-cost.d.ts.map

package/dist/data/ai/SessionViewer.tool-cost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.tool-cost.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.tool-cost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAoB1D,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAgB,GACjB,EAAE;IACD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAoGA"}

package/dist/data/ai/SessionViewer.tool-cost.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { costTotal } from "./session-cost.js";
+import { UiCoins } from "../../icons/components/UiCoins.js";
+import { formatCost, compactTokens } from "../../lib/tokens.js";
+import { UiDatabaseDown, UiDatabaseUp } from "../../icons/components/UiDatabase.js";
+import { UiArrowUp } from "../../icons/components/UiArrowUp.js";
+import { UiArrowDown } from "../../icons/components/UiArrowDown.js";
+import { UiBrain } from "../../icons/components/UiBrain.js";
+const TOKEN_BUCKETS = [
+  ["inputTokens", "In", "Input", UiArrowUp],
+  ["outputTokens", "Out", "Output", UiArrowDown],
+  ["reasoningTokens", "Reasoning", "Reasoning", UiBrain],
+  ["cacheReadTokens", "Cache read", "Cache read", UiDatabaseDown],
+  ["cacheWriteTokens", "Cache write", "Cache write", UiDatabaseUp]
+];
+function EstimatedToolCost({
+  events,
+  detailed = false
+}) {
+  var _a;
+  const estimates = events.flatMap(
+    (event) => event.estimatedCost ? [event.estimatedCost] : []
+  );
+  if (!estimates.length) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": detailed ? "Estimated tool cost details" : "Estimate unavailable",
+        title: "Estimate unavailable",
+        className: "shrink-0 text-[11px] text-muted-foreground",
+        children: detailed ? "Estimate unavailable" : "—"
+      }
+    );
+  }
+  const costs = estimates.map((estimate) => estimate.cost);
+  const total = costs.reduce((sum, cost) => sum + costTotal(cost), 0);
+  const sharedCalls = (_a = estimates[0]) == null ? void 0 : _a.sharedCalls;
+  const allocation = events.length === 1 ? `Model request shared equally across ${sharedCalls} tool call${sharedCalls === 1 ? "" : "s"}.` : `Combined estimate for ${estimates.length} calls; each model request is shared equally across its tool calls.`;
+  const description = `${allocation} Includes conversation context and generating the calls. Reading tool results is accounted for in subsequent model requests. Estimated cost in USD.`;
+  if (!detailed) {
+    const cacheReadTokens = costs.reduce((sum, cost) => sum + (cost.cacheReadTokens ?? 0), 0);
+    const cacheReadDescription = `Cache read delta: ${cacheReadTokens.toLocaleString("en-US")} tokens`;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "group",
+        "aria-label": "Estimated tool cost",
+        title: description,
+        className: "inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap text-[11px] tabular-nums text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(UiCoins, { className: "size-3 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: total > 0 ? `~${formatCost(total)}` : "—" }),
+          cacheReadTokens > 0 && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              role: "group",
+              "aria-label": cacheReadDescription,
+              title: cacheReadDescription,
+              className: "ml-1 inline-flex items-center gap-0.5",
+              children: [
+                /* @__PURE__ */ jsx(UiDatabaseDown, { className: "size-3 shrink-0" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "+",
+                  compactTokens(cacheReadTokens)
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Estimated tool cost details",
+      title: description,
+      className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-1.5 text-[11px] tabular-nums text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "group",
+            "aria-label": total > 0 ? `Estimated cost: ${formatCost(total)} USD` : "Cost unavailable",
+            className: "inline-flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsx(UiCoins, { className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: "Est." }),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: total > 0 ? `~${formatCost(total)}` : "Cost unavailable" }),
+              total > 0 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium", children: "USD" })
+            ]
+          }
+        ),
+        TOKEN_BUCKETS.map(([key, label, name, BucketIcon]) => {
+          const tokens = costs.reduce((sum, cost) => sum + (cost[key] ?? 0), 0);
+          const description2 = `${name}: ${tokens.toLocaleString("en-US")} tokens`;
+          return tokens > 0 ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              role: "group",
+              "aria-label": description2,
+              title: description2,
+              className: "inline-flex items-center gap-1 whitespace-nowrap",
+              children: [
+                /* @__PURE__ */ jsx(BucketIcon, { className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  label,
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: compactTokens(tokens) })
+                ] })
+              ]
+            },
+            key
+          ) : null;
+        }),
+        estimates.length < events.length && /* @__PURE__ */ jsxs("span", { children: [
+          events.length - estimates.length,
+          " unavailable"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  EstimatedToolCost
+};
+//# sourceMappingURL=SessionViewer.tool-cost.js.map

package/dist/data/ai/SessionViewer.tool-cost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionViewer.tool-cost.js","sources":["../../../src/data/ai/SessionViewer.tool-cost.tsx"],"sourcesContent":["import type { SessionEvent } from \"./SessionViewer.model\";\nimport { compactTokens, costTotal, formatCost } from \"./session-cost\";\nimport type { SessionCost } from \"./SessionViewer.unified\";\nimport {\n  UiArrowDown,\n  UiArrowUp,\n  UiBrain,\n  UiCoins,\n  UiDatabaseDown,\n  UiDatabaseUp,\n} from \"../../icons\";\n\nconst TOKEN_BUCKETS = [\n  [\"inputTokens\", \"In\", \"Input\", UiArrowUp],\n  [\"outputTokens\", \"Out\", \"Output\", UiArrowDown],\n  [\"reasoningTokens\", \"Reasoning\", \"Reasoning\", UiBrain],\n  [\"cacheReadTokens\", \"Cache read\", \"Cache read\", UiDatabaseDown],\n  [\"cacheWriteTokens\", \"Cache write\", \"Cache write\", UiDatabaseUp],\n] as const;\n\nexport function EstimatedToolCost({\n  events,\n  detailed = false,\n}: {\n  events: SessionEvent[];\n  detailed?: boolean;\n}) {\n  const estimates = events.flatMap((event) =>\n    event.estimatedCost ? [event.estimatedCost] : [],\n  );\n  if (!estimates.length) {\n    return (\n      <span\n        aria-label={\n          detailed ? \"Estimated tool cost details\" : \"Estimate unavailable\"\n        }\n        title=\"Estimate unavailable\"\n        className=\"shrink-0 text-[11px] text-muted-foreground\"\n      >\n        {detailed ? \"Estimate unavailable\" : \"—\"}\n      </span>\n    );\n  }\n  const costs: SessionCost[] = estimates.map((estimate) => estimate.cost);\n  const total = costs.reduce((sum, cost) => sum + costTotal(cost), 0);\n  const sharedCalls = estimates[0]?.sharedCalls;\n  const allocation =\n    events.length === 1\n      ? `Model request shared equally across ${sharedCalls} tool call${sharedCalls === 1 ? \"\" : \"s\"}.`\n      : `Combined estimate for ${estimates.length} calls; each model request is shared equally across its tool calls.`;\n  const description = `${allocation} Includes conversation context and generating the calls. Reading tool results is accounted for in subsequent model requests. Estimated cost in USD.`;\n  if (!detailed) {\n    const cacheReadTokens = costs.reduce((sum, cost) => sum + (cost.cacheReadTokens ?? 0), 0);\n    const cacheReadDescription = `Cache read delta: ${cacheReadTokens.toLocaleString(\"en-US\")} tokens`;\n    return (\n      <span\n        role=\"group\"\n        aria-label=\"Estimated tool cost\"\n        title={description}\n        className=\"inline-flex shrink-0 items-center gap-0.5 whitespace-nowrap text-[11px] tabular-nums text-muted-foreground\"\n      >\n        <UiCoins className=\"size-3 shrink-0\" />\n        <span>{total > 0 ? `~${formatCost(total)}` : \"—\"}</span>\n        {cacheReadTokens > 0 && (\n          <span\n            role=\"group\"\n            aria-label={cacheReadDescription}\n            title={cacheReadDescription}\n            className=\"ml-1 inline-flex items-center gap-0.5\"\n          >\n            <UiDatabaseDown className=\"size-3 shrink-0\" />\n            <span>+{compactTokens(cacheReadTokens)}</span>\n          </span>\n        )}\n      </span>\n    );\n  }\n  return (\n    <div\n      role=\"group\"\n      aria-label=\"Estimated tool cost details\"\n      title={description}\n      className=\"mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-1.5 text-[11px] tabular-nums text-muted-foreground\"\n    >\n      <span\n        role=\"group\"\n        aria-label={\n          total > 0\n            ? `Estimated cost: ${formatCost(total)} USD`\n            : \"Cost unavailable\"\n        }\n        className=\"inline-flex items-center gap-1\"\n      >\n        <UiCoins className=\"size-3.5 shrink-0\" />\n        <span>Est.</span>\n        <span className=\"font-semibold text-foreground\">\n          {total > 0 ? `~${formatCost(total)}` : \"Cost unavailable\"}\n        </span>\n        {total > 0 && <span className=\"text-[9px] font-medium\">USD</span>}\n      </span>\n      {TOKEN_BUCKETS.map(([key, label, name, BucketIcon]) => {\n        const tokens = costs.reduce((sum, cost) => sum + (cost[key] ?? 0), 0);\n        const description = `${name}: ${tokens.toLocaleString(\"en-US\")} tokens`;\n        return tokens > 0 ? (\n          <span\n            key={key}\n            role=\"group\"\n            aria-label={description}\n            title={description}\n            className=\"inline-flex items-center gap-1 whitespace-nowrap\"\n          >\n            <BucketIcon className=\"size-3.5 shrink-0\" />\n            <span>\n              {label}{\" \"}\n              <span className=\"font-medium text-foreground\">\n                {compactTokens(tokens)}\n              </span>\n            </span>\n          </span>\n        ) : null;\n      })}\n      {estimates.length < events.length && (\n        <span>{events.length - estimates.length} unavailable</span>\n      )}\n    </div>\n  );\n}\n"],"names":["description"],"mappings":"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"}

package/dist/data/ai/SessionViewer.tool-details.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const useDensity = require("../../hooks/use-density.cjs");
 const CodeBlock = require("../CodeBlock.cjs");
 const CodeDiff = require("../CodeDiff.cjs");
 function QuestionCard({
@@ -55,7 +56,8 @@ function DetailBlock({
   language,
   source
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { bare: true, language, source }) });
+  const density = useDensity.useDensityValue();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { bare: true, language, source, jsonFormat: density === "compact" ? "yaml" : "json" }) });
 }
 exports.DetailBlock = DetailBlock;
 exports.DiffBlock = DiffBlock;

package/dist/data/ai/SessionViewer.tool-details.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.tool-details.cjs","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { CodeDiff } from \"../CodeDiff\";\nimport type {\n  SessionQuestion,\n  ToolDiff,\n  ToolParam,\n} from \"./SessionViewer.input\";\n\nexport function QuestionCard({\n  question,\n  index,\n}: {\n  question: SessionQuestion;\n  index: number;\n}) {\n  const label =\n    question.context ||\n    (question.id ? `Question ${question.id}` : `Question ${index + 1}`);\n  return (\n    <div className=\"rounded-md border border-sky-500/20 bg-sky-500/5 px-density-3 py-density-2\">\n      <div className=\"text-[11px] font-medium uppercase text-muted-foreground\">\n        {label}\n      </div>\n      <div className=\"mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground\">\n        {question.text}\n      </div>\n      {question.options.length > 0 && (\n        <div className=\"mt-1.5 flex flex-wrap gap-1\">\n          {question.options.map((option) => (\n            <span\n              key={option.value}\n              className=\"rounded border border-border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n            >\n              <span className=\"font-medium text-foreground\">\n                {option.label}\n              </span>\n              {option.description && (\n                <span className=\"ml-1\">{option.description}</span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InlineParams({ params }: { params: ToolParam[] }) {\n  return (\n    <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">\n      {params.map((param) => (\n        <span key={param.name} className=\"[&:not(:first-child)]:ml-2\">\n          <span className=\"text-muted-foreground/70\">{param.name}: </span>\n          <span className=\"text-muted-foreground\">{param.value}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport function DiffBlock({ diff }: { diff: ToolDiff }) {\n  return (\n    <div className=\"space-y-1.5\">\n      {diff.segments.map((segment, index) => (\n        <CodeDiff\n          key={index}\n          bare\n          showLineNumbers={false}\n          original={segment.original}\n          modified={segment.modified}\n          {...(diff.language ? { language: diff.language } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function ResponseBlock({ response }: { response: string }) {\n  const trimmed = response.trim();\n  const isJson = trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\");\n  return <DetailBlock language={isJson ? \"json\" : \"text\"} source={response} />;\n}\n\nexport function DetailBlock({\n  language,\n  source,\n}: {\n  language: string;\n  source: string;\n}): ReactNode {\n  return (\n    <div className=\"overflow-x-auto text-xs\">\n      <CodeBlock bare language={language} source={source} />\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","CodeDiff","CodeBlock"],"mappings":";;;;;AASO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,QAAM,QACJ,SAAS,YACR,SAAS,KAAK,YAAY,SAAS,EAAE,KAAK,YAAY,QAAQ,CAAC;AAClE,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DACZ,UAAA,OACH;AAAA,IACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,kEACZ,mBAAS,MACZ;AAAA,IACC,SAAS,QAAQ,SAAS,KACzBA,2BAAAA,IAAC,OAAA,EAAI,WAAU,+BACZ,UAAA,SAAS,QAAQ,IAAI,CAAC,WACrBD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,+BACb,UAAA,OAAO,OACV;AAAA,UACC,OAAO,eACNA,2BAAAA,IAAC,UAAK,WAAU,QAAQ,iBAAO,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAPxC,OAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,aAAa,EAAE,UAAmC;AAChE,SACEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CACb,UAAA,OAAO,IAAI,CAAC,UACXD,2BAAAA,KAAC,QAAA,EAAsB,WAAU,8BAC/B,UAAA;AAAA,IAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA;AAAA,MAAA,MAAM;AAAA,MAAK;AAAA,IAAA,GAAE;AAAA,IACzDC,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,gBAAM,MAAA,CAAM;AAAA,EAAA,EAAA,GAF5C,MAAM,IAGjB,CACD,GACH;AAEJ;AAEO,SAAS,UAAU,EAAE,QAA4B;AACtD,SACEA,+BAAC,SAAI,WAAU,eACZ,eAAK,SAAS,IAAI,CAAC,SAAS,UAC3BA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MAEC,MAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,UAAU,QAAQ;AAAA,MACjB,GAAI,KAAK,WAAW,EAAE,UAAU,KAAK,SAAA,IAAa,CAAA;AAAA,IAAC;AAAA,IAL/C;AAAA,EAAA,CAOR,GACH;AAEJ;AAEO,SAAS,cAAc,EAAE,YAAkC;AAChE,QAAM,UAAU,SAAS,KAAA;AACzB,QAAM,SAAS,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG;AAChE,wCAAQ,aAAA,EAAY,UAAU,SAAS,SAAS,QAAQ,QAAQ,UAAU;AAC5E;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGc;AACZ,SACED,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACb,UAAAA,2BAAAA,IAACE,UAAAA,aAAU,MAAI,MAAC,UAAoB,OAAA,CAAgB,EAAA,CACtD;AAEJ;;;;;;"}
+{"version":3,"file":"SessionViewer.tool-details.cjs","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useDensityValue } from \"../../hooks/use-density\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { CodeDiff } from \"../CodeDiff\";\nimport type {\n  SessionQuestion,\n  ToolDiff,\n  ToolParam,\n} from \"./SessionViewer.input\";\n\nexport function QuestionCard({\n  question,\n  index,\n}: {\n  question: SessionQuestion;\n  index: number;\n}) {\n  const label =\n    question.context ||\n    (question.id ? `Question ${question.id}` : `Question ${index + 1}`);\n  return (\n    <div className=\"rounded-md border border-sky-500/20 bg-sky-500/5 px-density-3 py-density-2\">\n      <div className=\"text-[11px] font-medium uppercase text-muted-foreground\">\n        {label}\n      </div>\n      <div className=\"mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground\">\n        {question.text}\n      </div>\n      {question.options.length > 0 && (\n        <div className=\"mt-1.5 flex flex-wrap gap-1\">\n          {question.options.map((option) => (\n            <span\n              key={option.value}\n              className=\"rounded border border-border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n            >\n              <span className=\"font-medium text-foreground\">\n                {option.label}\n              </span>\n              {option.description && (\n                <span className=\"ml-1\">{option.description}</span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InlineParams({ params }: { params: ToolParam[] }) {\n  return (\n    <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">\n      {params.map((param) => (\n        <span key={param.name} className=\"[&:not(:first-child)]:ml-2\">\n          <span className=\"text-muted-foreground/70\">{param.name}: </span>\n          <span className=\"text-muted-foreground\">{param.value}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport function DiffBlock({ diff }: { diff: ToolDiff }) {\n  return (\n    <div className=\"space-y-1.5\">\n      {diff.segments.map((segment, index) => (\n        <CodeDiff\n          key={index}\n          bare\n          showLineNumbers={false}\n          original={segment.original}\n          modified={segment.modified}\n          {...(diff.language ? { language: diff.language } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function ResponseBlock({ response }: { response: string }) {\n  const trimmed = response.trim();\n  const isJson = trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\");\n  return <DetailBlock language={isJson ? \"json\" : \"text\"} source={response} />;\n}\n\nexport function DetailBlock({\n  language,\n  source,\n}: {\n  language: string;\n  source: string;\n}): ReactNode {\n  const density = useDensityValue();\n  return (\n    <div className=\"overflow-x-auto text-xs\">\n      <CodeBlock bare language={language} source={source} jsonFormat={density === \"compact\" ? \"yaml\" : \"json\"} />\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","CodeDiff","useDensityValue","CodeBlock"],"mappings":";;;;;;AAUO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,QAAM,QACJ,SAAS,YACR,SAAS,KAAK,YAAY,SAAS,EAAE,KAAK,YAAY,QAAQ,CAAC;AAClE,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DACZ,UAAA,OACH;AAAA,IACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,kEACZ,mBAAS,MACZ;AAAA,IACC,SAAS,QAAQ,SAAS,KACzBA,2BAAAA,IAAC,OAAA,EAAI,WAAU,+BACZ,UAAA,SAAS,QAAQ,IAAI,CAAC,WACrBD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,+BACb,UAAA,OAAO,OACV;AAAA,UACC,OAAO,eACNA,2BAAAA,IAAC,UAAK,WAAU,QAAQ,iBAAO,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAPxC,OAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,aAAa,EAAE,UAAmC;AAChE,SACEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CACb,UAAA,OAAO,IAAI,CAAC,UACXD,2BAAAA,KAAC,QAAA,EAAsB,WAAU,8BAC/B,UAAA;AAAA,IAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA;AAAA,MAAA,MAAM;AAAA,MAAK;AAAA,IAAA,GAAE;AAAA,IACzDC,2BAAAA,IAAC,QAAA,EAAK,WAAU,yBAAyB,gBAAM,MAAA,CAAM;AAAA,EAAA,EAAA,GAF5C,MAAM,IAGjB,CACD,GACH;AAEJ;AAEO,SAAS,UAAU,EAAE,QAA4B;AACtD,SACEA,+BAAC,SAAI,WAAU,eACZ,eAAK,SAAS,IAAI,CAAC,SAAS,UAC3BA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MAEC,MAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,UAAU,QAAQ;AAAA,MACjB,GAAI,KAAK,WAAW,EAAE,UAAU,KAAK,SAAA,IAAa,CAAA;AAAA,IAAC;AAAA,IAL/C;AAAA,EAAA,CAOR,GACH;AAEJ;AAEO,SAAS,cAAc,EAAE,YAAkC;AAChE,QAAM,UAAU,SAAS,KAAA;AACzB,QAAM,SAAS,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG;AAChE,wCAAQ,aAAA,EAAY,UAAU,SAAS,SAAS,QAAQ,QAAQ,UAAU;AAC5E;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGc;AACZ,QAAM,UAAUC,WAAAA,gBAAA;AAChB,SACEF,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACb,yCAACG,UAAAA,WAAA,EAAU,MAAI,MAAC,UAAoB,QAAgB,YAAY,YAAY,YAAY,SAAS,QAAQ,GAC3G;AAEJ;;;;;;"}

package/dist/data/ai/SessionViewer.tool-details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.tool-details.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EACV,eAAe,EACf,QAAQ,EACR,SAAS,EACV,MAAM,uBAAuB,CAAC;AAE/B,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,eAAe,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,+BA+BA;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,EAAE,CAAA;CAAE,+BAW/D;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,+BAerD;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAI/D;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAMZ"}
+{"version":3,"file":"SessionViewer.tool-details.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EACV,eAAe,EACf,QAAQ,EACR,SAAS,EACV,MAAM,uBAAuB,CAAC;AAE/B,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,eAAe,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,+BA+BA;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,EAAE,CAAA;CAAE,+BAW/D;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,+BAerD;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAI/D;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAOZ"}

package/dist/data/ai/SessionViewer.tool-details.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useDensityValue } from "../../hooks/use-density.js";
 import { CodeBlock } from "../CodeBlock.js";
 import { CodeDiff } from "../CodeDiff.js";
 function QuestionCard({
@@ -53,7 +54,8 @@ function DetailBlock({
   language,
   source
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto text-xs", children: /* @__PURE__ */ jsx(CodeBlock, { bare: true, language, source }) });
+  const density = useDensityValue();
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto text-xs", children: /* @__PURE__ */ jsx(CodeBlock, { bare: true, language, source, jsonFormat: density === "compact" ? "yaml" : "json" }) });
 }
 export {
   DetailBlock,

package/dist/data/ai/SessionViewer.tool-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionViewer.tool-details.js","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { CodeDiff } from \"../CodeDiff\";\nimport type {\n  SessionQuestion,\n  ToolDiff,\n  ToolParam,\n} from \"./SessionViewer.input\";\n\nexport function QuestionCard({\n  question,\n  index,\n}: {\n  question: SessionQuestion;\n  index: number;\n}) {\n  const label =\n    question.context ||\n    (question.id ? `Question ${question.id}` : `Question ${index + 1}`);\n  return (\n    <div className=\"rounded-md border border-sky-500/20 bg-sky-500/5 px-density-3 py-density-2\">\n      <div className=\"text-[11px] font-medium uppercase text-muted-foreground\">\n        {label}\n      </div>\n      <div className=\"mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground\">\n        {question.text}\n      </div>\n      {question.options.length > 0 && (\n        <div className=\"mt-1.5 flex flex-wrap gap-1\">\n          {question.options.map((option) => (\n            <span\n              key={option.value}\n              className=\"rounded border border-border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n            >\n              <span className=\"font-medium text-foreground\">\n                {option.label}\n              </span>\n              {option.description && (\n                <span className=\"ml-1\">{option.description}</span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InlineParams({ params }: { params: ToolParam[] }) {\n  return (\n    <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">\n      {params.map((param) => (\n        <span key={param.name} className=\"[&:not(:first-child)]:ml-2\">\n          <span className=\"text-muted-foreground/70\">{param.name}: </span>\n          <span className=\"text-muted-foreground\">{param.value}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport function DiffBlock({ diff }: { diff: ToolDiff }) {\n  return (\n    <div className=\"space-y-1.5\">\n      {diff.segments.map((segment, index) => (\n        <CodeDiff\n          key={index}\n          bare\n          showLineNumbers={false}\n          original={segment.original}\n          modified={segment.modified}\n          {...(diff.language ? { language: diff.language } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function ResponseBlock({ response }: { response: string }) {\n  const trimmed = response.trim();\n  const isJson = trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\");\n  return <DetailBlock language={isJson ? \"json\" : \"text\"} source={response} />;\n}\n\nexport function DetailBlock({\n  language,\n  source,\n}: {\n  language: string;\n  source: string;\n}): ReactNode {\n  return (\n    <div className=\"overflow-x-auto text-xs\">\n      <CodeBlock bare language={language} source={source} />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AASO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,QAAM,QACJ,SAAS,YACR,SAAS,KAAK,YAAY,SAAS,EAAE,KAAK,YAAY,QAAQ,CAAC;AAClE,SACE,qBAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,2DACZ,UAAA,OACH;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,kEACZ,mBAAS,MACZ;AAAA,IACC,SAAS,QAAQ,SAAS,KACzB,oBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA,SAAS,QAAQ,IAAI,CAAC,WACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,+BACb,UAAA,OAAO,OACV;AAAA,UACC,OAAO,eACN,oBAAC,UAAK,WAAU,QAAQ,iBAAO,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAPxC,OAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,aAAa,EAAE,UAAmC;AAChE,SACE,oBAAC,QAAA,EAAK,WAAU,6CACb,UAAA,OAAO,IAAI,CAAC,UACX,qBAAC,QAAA,EAAsB,WAAU,8BAC/B,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA;AAAA,MAAA,MAAM;AAAA,MAAK;AAAA,IAAA,GAAE;AAAA,IACzD,oBAAC,QAAA,EAAK,WAAU,yBAAyB,gBAAM,MAAA,CAAM;AAAA,EAAA,EAAA,GAF5C,MAAM,IAGjB,CACD,GACH;AAEJ;AAEO,SAAS,UAAU,EAAE,QAA4B;AACtD,SACE,oBAAC,SAAI,WAAU,eACZ,eAAK,SAAS,IAAI,CAAC,SAAS,UAC3B;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,UAAU,QAAQ;AAAA,MACjB,GAAI,KAAK,WAAW,EAAE,UAAU,KAAK,SAAA,IAAa,CAAA;AAAA,IAAC;AAAA,IAL/C;AAAA,EAAA,CAOR,GACH;AAEJ;AAEO,SAAS,cAAc,EAAE,YAAkC;AAChE,QAAM,UAAU,SAAS,KAAA;AACzB,QAAM,SAAS,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG;AAChE,6BAAQ,aAAA,EAAY,UAAU,SAAS,SAAS,QAAQ,QAAQ,UAAU;AAC5E;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGc;AACZ,SACE,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA,oBAAC,aAAU,MAAI,MAAC,UAAoB,OAAA,CAAgB,EAAA,CACtD;AAEJ;"}
+{"version":3,"file":"SessionViewer.tool-details.js","sources":["../../../src/data/ai/SessionViewer.tool-details.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useDensityValue } from \"../../hooks/use-density\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport { CodeDiff } from \"../CodeDiff\";\nimport type {\n  SessionQuestion,\n  ToolDiff,\n  ToolParam,\n} from \"./SessionViewer.input\";\n\nexport function QuestionCard({\n  question,\n  index,\n}: {\n  question: SessionQuestion;\n  index: number;\n}) {\n  const label =\n    question.context ||\n    (question.id ? `Question ${question.id}` : `Question ${index + 1}`);\n  return (\n    <div className=\"rounded-md border border-sky-500/20 bg-sky-500/5 px-density-3 py-density-2\">\n      <div className=\"text-[11px] font-medium uppercase text-muted-foreground\">\n        {label}\n      </div>\n      <div className=\"mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground\">\n        {question.text}\n      </div>\n      {question.options.length > 0 && (\n        <div className=\"mt-1.5 flex flex-wrap gap-1\">\n          {question.options.map((option) => (\n            <span\n              key={option.value}\n              className=\"rounded border border-border bg-background px-1.5 py-0.5 text-[11px] text-muted-foreground\"\n            >\n              <span className=\"font-medium text-foreground\">\n                {option.label}\n              </span>\n              {option.description && (\n                <span className=\"ml-1\">{option.description}</span>\n              )}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InlineParams({ params }: { params: ToolParam[] }) {\n  return (\n    <span className=\"min-w-0 flex-1 truncate font-mono text-xs\">\n      {params.map((param) => (\n        <span key={param.name} className=\"[&:not(:first-child)]:ml-2\">\n          <span className=\"text-muted-foreground/70\">{param.name}: </span>\n          <span className=\"text-muted-foreground\">{param.value}</span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport function DiffBlock({ diff }: { diff: ToolDiff }) {\n  return (\n    <div className=\"space-y-1.5\">\n      {diff.segments.map((segment, index) => (\n        <CodeDiff\n          key={index}\n          bare\n          showLineNumbers={false}\n          original={segment.original}\n          modified={segment.modified}\n          {...(diff.language ? { language: diff.language } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport function ResponseBlock({ response }: { response: string }) {\n  const trimmed = response.trim();\n  const isJson = trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\");\n  return <DetailBlock language={isJson ? \"json\" : \"text\"} source={response} />;\n}\n\nexport function DetailBlock({\n  language,\n  source,\n}: {\n  language: string;\n  source: string;\n}): ReactNode {\n  const density = useDensityValue();\n  return (\n    <div className=\"overflow-x-auto text-xs\">\n      <CodeBlock bare language={language} source={source} jsonFormat={density === \"compact\" ? \"yaml\" : \"json\"} />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAUO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,QAAM,QACJ,SAAS,YACR,SAAS,KAAK,YAAY,SAAS,EAAE,KAAK,YAAY,QAAQ,CAAC;AAClE,SACE,qBAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,2DACZ,UAAA,OACH;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,kEACZ,mBAAS,MACZ;AAAA,IACC,SAAS,QAAQ,SAAS,KACzB,oBAAC,OAAA,EAAI,WAAU,+BACZ,UAAA,SAAS,QAAQ,IAAI,CAAC,WACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,+BACb,UAAA,OAAO,OACV;AAAA,UACC,OAAO,eACN,oBAAC,UAAK,WAAU,QAAQ,iBAAO,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAPxC,OAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,SAAS,aAAa,EAAE,UAAmC;AAChE,SACE,oBAAC,QAAA,EAAK,WAAU,6CACb,UAAA,OAAO,IAAI,CAAC,UACX,qBAAC,QAAA,EAAsB,WAAU,8BAC/B,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA;AAAA,MAAA,MAAM;AAAA,MAAK;AAAA,IAAA,GAAE;AAAA,IACzD,oBAAC,QAAA,EAAK,WAAU,yBAAyB,gBAAM,MAAA,CAAM;AAAA,EAAA,EAAA,GAF5C,MAAM,IAGjB,CACD,GACH;AAEJ;AAEO,SAAS,UAAU,EAAE,QAA4B;AACtD,SACE,oBAAC,SAAI,WAAU,eACZ,eAAK,SAAS,IAAI,CAAC,SAAS,UAC3B;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,UAAU,QAAQ;AAAA,MAClB,UAAU,QAAQ;AAAA,MACjB,GAAI,KAAK,WAAW,EAAE,UAAU,KAAK,SAAA,IAAa,CAAA;AAAA,IAAC;AAAA,IAL/C;AAAA,EAAA,CAOR,GACH;AAEJ;AAEO,SAAS,cAAc,EAAE,YAAkC;AAChE,QAAM,UAAU,SAAS,KAAA;AACzB,QAAM,SAAS,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG;AAChE,6BAAQ,aAAA,EAAY,UAAU,SAAS,SAAS,QAAQ,QAAQ,UAAU;AAC5E;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGc;AACZ,QAAM,UAAU,gBAAA;AAChB,SACE,oBAAC,OAAA,EAAI,WAAU,2BACb,8BAAC,WAAA,EAAU,MAAI,MAAC,UAAoB,QAAgB,YAAY,YAAY,YAAY,SAAS,QAAQ,GAC3G;AAEJ;"}

package/dist/data/ai/SessionViewer.tool-row.cjs

@@ -11,11 +11,13 @@ const SessionViewer_toolDetails = require("./SessionViewer.tool-details.cjs");
 const approvalRequest = require("./approval-request.cjs");
 const SessionViewer_approvalBody = require("./SessionViewer.approval-body.cjs");
 const SessionViewer_decisionControls = require("./SessionViewer.decision-controls.cjs");
+const SessionViewer_toolCost = require("./SessionViewer.tool-cost.cjs");
 const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
 function ToolBody({
   event,
   visual,
   defaultExpanded,
+  showEstimatedToolCost = false,
   onPendingToolDecision
 }) {
   const summary = SessionViewer_input.summarizeToolInput(
@@ -25,21 +27,27 @@ function ToolBody({
   );
   const command = SessionViewer_input.shellCommand(event.tool ?? "", event.toolInput);
   const [open, setOpen] = react.useState(defaultExpanded);
+  const cost = showEstimatedToolCost ? /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolCost.EstimatedToolCost, { events: [event] }) : null;
+  const costFooter = showEstimatedToolCost ? /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolCost.EstimatedToolCost, { events: [event], detailed: true }) : null;
+  const hasDetail = event.toolResponse !== void 0 || command === void 0 && event.toolInput !== void 0 || showEstimatedToolCost && event.estimatedCost !== void 0;
   if (event.tool === "AskUserQuestion" || event.approvalKind === "question") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       QuestionToolBody,
       {
         event,
         visual,
-        onDecision: onPendingToolDecision
+        onDecision: onPendingToolDecision,
+        cost,
+        costFooter
       }
     );
   }
   if (event.pending && approvalRequest.hasApprovalBody(event.approvalRequest)) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "not-prose", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-tool-header": true, className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium text-foreground", children: visual.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_rowMetadata.ApprovalBadge, { event })
+        /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_rowMetadata.ApprovalBadge, { event }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: cost })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         SessionViewer_approvalBody.TypedApprovalBody,
@@ -48,15 +56,17 @@ function ToolBody({
           request: event.approvalRequest,
           onDecision: onPendingToolDecision
         }
-      )
+      ),
+      costFooter
     ] });
   }
   if (command !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "not-prose", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-tool-header": true, className: "flex items-start gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { bare: true, language: "bash", source: command }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_rowMetadata.ApprovalBadge, { event }),
-        event.toolResponse !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        cost,
+        hasDetail && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -77,7 +87,10 @@ function ToolBody({
           }
         )
       ] }),
-      open && event.toolResponse !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.ResponseBlock, { response: event.toolResponse }) }),
+      open && hasDetail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5", children: [
+        event.toolResponse !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.ResponseBlock, { response: event.toolResponse }),
+        costFooter
+      ] }),
       event.pending && onPendingToolDecision && /* @__PURE__ */ jsxRuntime.jsx(
         SessionViewer_decisionControls.PendingDecisionControls,
         {
@@ -88,7 +101,6 @@ function ToolBody({
       )
     ] });
   }
-  const hasDetail = event.toolInput !== void 0 || event.toolResponse !== void 0;
   const params = SessionViewer_input.toolInputParams(event.tool ?? "", event.toolInput, event.cwd);
   const diff = SessionViewer_input.toolDiff(event.tool ?? "", event.toolInput);
   const header = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -107,28 +119,31 @@ function ToolBody({
     params.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.InlineParams, { params })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "not-prose", children: [
-    hasDetail ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": open,
-        onClick: () => setOpen((value) => !value),
-        className: "flex w-full items-center gap-1.5 text-left hover:text-foreground",
-        children: [
-          header,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Icon.Icon,
-            {
-              icon: UiChevronDown.UiChevronDown,
-              className: utils.cn(
-                "ml-auto size-3 shrink-0 text-muted-foreground transition-transform",
-                open && "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: header }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-tool-header": true, className: "flex items-center gap-1.5", children: [
+      hasDetail ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          onClick: () => setOpen((value) => !value),
+          className: "flex min-w-0 flex-1 items-center gap-1.5 text-left hover:text-foreground",
+          children: [
+            header,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: UiChevronDown.UiChevronDown,
+                className: utils.cn(
+                  "ml-auto size-3 shrink-0 text-muted-foreground transition-transform",
+                  open && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: header }),
+      cost
+    ] }),
     open && hasDetail && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 space-y-1.5", children: [
       diff ? /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.DiffBlock, { diff }) : event.toolInput !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
         SessionViewer_toolDetails.DetailBlock,
@@ -137,7 +152,8 @@ function ToolBody({
           source: JSON.stringify(event.toolInput, null, 2)
         }
       ),
-      event.toolResponse !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.ResponseBlock, { response: event.toolResponse })
+      event.toolResponse !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_toolDetails.ResponseBlock, { response: event.toolResponse }),
+      costFooter
     ] }),
     event.pending && onPendingToolDecision && /* @__PURE__ */ jsxRuntime.jsx(
       SessionViewer_decisionControls.PendingDecisionControls,
@@ -152,7 +168,9 @@ function ToolBody({
 function QuestionToolBody({
   event,
   visual,
-  onDecision
+  onDecision,
+  cost,
+  costFooter
 }) {
   var _a;
   const typedQuestions = (_a = event.approvalRequest) == null ? void 0 : _a.questions;
@@ -163,10 +181,11 @@ function QuestionToolBody({
     event.cwd
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "not-prose", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-tool-header": true, className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium text-foreground", children: visual.label }),
       /* @__PURE__ */ jsxRuntime.jsx(SessionViewer_rowMetadata.ApprovalBadge, { event }),
-      summary && questions.length !== 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: summary })
+      summary && questions.length !== 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-muted-foreground", children: summary }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: cost })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 space-y-1.5", children: [
       questions.length > 0 ? questions.map((question, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -195,7 +214,8 @@ function QuestionToolBody({
           questions,
           onDecision
         }
-      )
+      ),
+      costFooter
     ] })
   ] });
 }