@flanksource/clicky-ui 0.3.14 → 0.3.16

package/dist/data/chat/ContextMeter.js

@@ -1,15 +1,19 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { compactTokens, formatCost } from "../../lib/tokens.js";
+import { Icon } from "../Icon.js";
 import { HoverCard } from "../../overlay/HoverCard.js";
+import { effortLevelIcon, effortLevelColor, effortLevelLabel } from "./effort-icons.js";
+const GAUGE_RADIUS = 15;
+const GAUGE_CIRCUMFERENCE = 2 * Math.PI * GAUGE_RADIUS;
 function barTone(pct) {
-  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
+  return pct > 80 ? "bg-red-600 [[data-theme=dark]_&]:bg-red-400" : pct > 50 ? "bg-amber-700 [[data-theme=dark]_&]:bg-amber-400" : "bg-emerald-600 [[data-theme=dark]_&]:bg-emerald-400";
 }
 function ringTone(pct) {
-  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
+  return pct > 80 ? "text-red-600 [[data-theme=dark]_&]:text-red-400" : pct > 50 ? "text-amber-700 [[data-theme=dark]_&]:text-amber-400" : "text-emerald-600 [[data-theme=dark]_&]:text-emerald-400";
 }
 function textTone(pct) {
-  return pct > 80 ? "text-red-600 [[data-theme=dark]_&]:text-red-400" : pct > 50 ? "text-amber-600 [[data-theme=dark]_&]:text-amber-400" : "text-emerald-600 [[data-theme=dark]_&]:text-emerald-400";
+  return pct > 80 ? "text-red-700 [[data-theme=dark]_&]:text-red-400" : pct > 50 ? "text-amber-700 [[data-theme=dark]_&]:text-amber-400" : "text-emerald-700 [[data-theme=dark]_&]:text-emerald-400";
 }
 function Row({ label, value }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
@@ -26,7 +30,11 @@ function bucketRows(tokens, cost) {
     { label: "Output", tokens: tokens == null ? void 0 : tokens.output, cost: cost == null ? void 0 : cost.output },
     { label: "Reasoning", tokens: tokens == null ? void 0 : tokens.reasoning, cost: cost == null ? void 0 : cost.reasoning },
     { label: "Cache read", tokens: tokens == null ? void 0 : tokens.cacheRead, cost: cost == null ? void 0 : cost.cacheRead },
-    { label: "Cache write", tokens: tokens == null ? void 0 : tokens.cacheWrite, cost: cost == null ? void 0 : cost.cacheWrite }
+    {
+      label: "Cache write",
+      tokens: tokens == null ? void 0 : tokens.cacheWrite,
+      cost: cost == null ? void 0 : cost.cacheWrite
+    }
   ];
   return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);
 }
@@ -66,6 +74,8 @@ function ContextMeter({
   messageCount,
   model,
   modelIcon: Glyph,
+  modelIconClassName,
+  effort,
   tokens,
   cost,
   budget,
@@ -74,36 +84,74 @@ function ContextMeter({
   const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));
   const totalTokens = (tokens == null ? void 0 : tokens.total) ?? 0;
   const totalCost = (cost == null ? void 0 : cost.total) ?? 0;
-  const trigger = mode === "gauge" ? /* @__PURE__ */ jsxs(
+  const EffortGlyph = effort ? effortLevelIcon(effort) : void 0;
+  const effortColor = effort ? effortLevelColor(effort) : void 0;
+  const trigger = mode === "gauge" ? /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        "inline-flex items-center rounded-md px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
         className
       ),
       "aria-label": `Context ${pct}% used`,
-      children: [
-        Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-3.5 shrink-0" }),
-        /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", className: cn("shrink-0", ringTone(pct)), children: [
-          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "10",
-              cy: "10",
-              r: "8",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2.5",
-              strokeDasharray: 2 * Math.PI * 8,
-              strokeDashoffset: (1 - pct / 100) * 2 * Math.PI * 8,
-              strokeLinecap: "round",
-              transform: "rotate(-90 10 10)"
-            }
-          ),
-          /* @__PURE__ */ jsx("text", { x: "10", y: "10", textAnchor: "middle", dominantBaseline: "central", fontSize: "6", fill: "currentColor", fontWeight: "600", children: pct })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-9 shrink-0 items-center justify-center", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "data-context-gauge-ring": true,
+            "aria-hidden": "true",
+            width: "36",
+            height: "36",
+            viewBox: "0 0 36 36",
+            className: cn("absolute inset-0", ringTone(pct)),
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: GAUGE_RADIUS,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "3",
+                  opacity: "0.15"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: GAUGE_RADIUS,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "3",
+                  strokeDasharray: GAUGE_CIRCUMFERENCE,
+                  strokeDashoffset: (1 - pct / 100) * GAUGE_CIRCUMFERENCE,
+                  strokeLinecap: "round",
+                  transform: "rotate(-90 18 18)"
+                }
+              )
+            ]
+          }
+        ),
+        Glyph ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: Glyph,
+            className: cn("relative size-5", modelIconClassName)
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative text-[9px] font-semibold tabular-nums",
+              textTone(pct)
+            ),
+            children: pct
+          }
+        )
+      ] })
     }
   ) : /* @__PURE__ */ jsxs(
     "span",
@@ -115,11 +163,26 @@ function ContextMeter({
       "aria-label": `Context ${pct}% used`,
       children: [
         /* @__PURE__ */ jsx("span", { className: "shrink-0", children: "ctx" }),
-        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: cn("block h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) }),
-        /* @__PURE__ */ jsxs("span", { className: cn("shrink-0 font-medium tabular-nums", textTone(pct)), children: [
-          pct,
-          "%"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block h-full rounded-full transition-all",
+              barTone(pct)
+            ),
+            style: { width: `${pct}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn("shrink-0 font-medium tabular-nums", textTone(pct)),
+            children: [
+              pct,
+              "%"
+            ]
+          }
+        )
       ]
     }
   );
@@ -131,14 +194,48 @@ function ContextMeter({
         "%"
       ] })
     ] }),
-    model && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border pb-2", children: [
-      Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-4 shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", title: model, children: model })
+    (model || effort) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border pb-2", children: [
+      model ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        Glyph && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: Glyph,
+            className: cn("size-4 shrink-0", modelIconClassName)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", title: model, children: model })
+      ] }) : null,
+      effort ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "inline-flex shrink-0 items-center gap-1 font-medium",
+            effortColor
+          ),
+          children: [
+            EffortGlyph ? /* @__PURE__ */ jsx(EffortGlyph, { className: "size-3.5" }) : null,
+            effortLevelLabel(effort),
+            " effort"
+          ]
+        }
+      ) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full", barTone(pct)), style: { width: `${pct}%` } }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-full rounded-full", barTone(pct)),
+          style: { width: `${pct}%` }
+        }
+      ) }),
       windowTokens ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Row, { label: "Window", value: `${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}` }),
+        /* @__PURE__ */ jsx(
+          Row,
+          {
+            label: "Window",
+            value: `${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`
+          }
+        ),
         /* @__PURE__ */ jsx(Row, { label: "Free", value: `${100 - pct}%` })
       ] }) : /* @__PURE__ */ jsx(Row, { label: "Used", value: `${pct}%` }),
       messageCount != null ? /* @__PURE__ */ jsx(Row, { label: "Messages", value: String(messageCount) }) : null
@@ -154,7 +251,13 @@ function ContextMeter({
           showCost: totalCost > 0
         }
       ),
-      (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: `${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}` }) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsx(Row, { label: "Budget left", value: formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
+      (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: "Budget",
+          value: `${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`
+        }
+      ) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsx(Row, { label: "Budget left", value: formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
     ] })
   ] }) });
 }

package/dist/data/chat/ContextMeter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMeter.js","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport type { StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-600 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = { label: string; tokens?: number | undefined; cost?: number | undefined };\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(tokens?: ContextMeterTokens, cost?: ContextMeterCost): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    { label: \"Cache write\", tokens: tokens?.cacheWrite, cost: cost?.cacheWrite },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>}\n          {showCost && <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">{row.label}</td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? compactTokens(row.tokens) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? formatCost(row.cost) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && <td className={numCell}>{compactTokens(totalTokens)}</td>}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  context-window breakdown, per-bucket token usage and the cost + budget\n *  detail. Domain-agnostic — callers feed plain numbers. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  model,\n  modelIcon: Glyph,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", ringTone(pct))}>\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n          <circle\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeDasharray={2 * Math.PI * 8}\n            strokeDashoffset={(1 - pct / 100) * 2 * Math.PI * 8}\n            strokeLinecap=\"round\"\n            transform=\"rotate(-90 10 10)\"\n          />\n          <text x=\"10\" y=\"10\" textAnchor=\"middle\" dominantBaseline=\"central\" fontSize=\"6\" fill=\"currentColor\" fontWeight=\"600\">\n            {pct}\n          </text>\n        </svg>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span className={cn(\"block h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n        </span>\n        <span className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}>{pct}%</span>\n      </span>\n    );\n\n  return (\n    <HoverCard trigger={trigger} placement=\"bottom\" cardClassName=\"w-72 p-3\">\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>{pct}%</span>\n        </div>\n\n        {model && (\n          <div className=\"flex items-center gap-2 border-b border-border pb-2\">\n            {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n            <span className=\"truncate font-medium\" title={model}>\n              {model}\n            </span>\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div className={cn(\"h-full rounded-full\", barTone(pct))} style={{ width: `${pct}%` }} />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row label=\"Window\" value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`} />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? <Row label=\"Messages\" value={String(messageCount)} /> : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row label=\"Budget\" value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`} />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContextMeter.js","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\nimport {\n  effortLevelColor,\n  effortLevelIcon,\n  effortLevelLabel,\n} from \"./effort-icons\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  modelIconClassName?: string | undefined;\n  /** Reasoning effort shown with its semantic glyph and color in the hover card. */\n  effort?: string | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nconst GAUGE_RADIUS = 15;\nconst GAUGE_CIRCUMFERENCE = 2 * Math.PI * GAUGE_RADIUS;\n\nfunction barTone(pct: number): string {\n  return pct > 80\n    ? \"bg-red-600 [[data-theme=dark]_&]:bg-red-400\"\n    : pct > 50\n      ? \"bg-amber-700 [[data-theme=dark]_&]:bg-amber-400\"\n      : \"bg-emerald-600 [[data-theme=dark]_&]:bg-emerald-400\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-700 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-700 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-700 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = {\n  label: string;\n  tokens?: number | undefined;\n  cost?: number | undefined;\n};\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(\n  tokens?: ContextMeterTokens,\n  cost?: ContextMeterCost,\n): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    {\n      label: \"Cache write\",\n      tokens: tokens?.cacheWrite,\n      cost: cost?.cacheWrite,\n    },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>\n          )}\n          {showCost && (\n            <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>\n          )}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">\n              {row.label}\n            </td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? (\n                  compactTokens(row.tokens)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? (\n                  formatCost(row.cost)\n                ) : (\n                  <span className=\"text-muted-foreground/50\">—</span>\n                )}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && (\n            <td className={numCell}>{compactTokens(totalTokens)}</td>\n          )}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  context-window breakdown, per-bucket token usage and the cost + budget\n *  detail. Domain-agnostic — callers feed plain numbers. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  model,\n  modelIcon: Glyph,\n  modelIconClassName,\n  effort,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n  const EffortGlyph = effort ? effortLevelIcon(effort) : undefined;\n  const effortColor = effort ? effortLevelColor(effort) : undefined;\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center rounded-md px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"relative inline-flex size-9 shrink-0 items-center justify-center\">\n          <svg\n            data-context-gauge-ring\n            aria-hidden=\"true\"\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            className={cn(\"absolute inset-0\", ringTone(pct))}\n          >\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              opacity=\"0.15\"\n            />\n            <circle\n              cx=\"18\"\n              cy=\"18\"\n              r={GAUGE_RADIUS}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeDasharray={GAUGE_CIRCUMFERENCE}\n              strokeDashoffset={(1 - pct / 100) * GAUGE_CIRCUMFERENCE}\n              strokeLinecap=\"round\"\n              transform=\"rotate(-90 18 18)\"\n            />\n          </svg>\n          {Glyph ? (\n            <Icon\n              icon={Glyph}\n              className={cn(\"relative size-5\", modelIconClassName)}\n            />\n          ) : (\n            <span\n              className={cn(\n                \"relative text-[9px] font-semibold tabular-nums\",\n                textTone(pct),\n              )}\n            >\n              {pct}\n            </span>\n          )}\n        </span>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span\n            className={cn(\n              \"block h-full rounded-full transition-all\",\n              barTone(pct),\n            )}\n            style={{ width: `${pct}%` }}\n          />\n        </span>\n        <span\n          className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}\n        >\n          {pct}%\n        </span>\n      </span>\n    );\n\n  return (\n    <HoverCard trigger={trigger} placement=\"bottom\" cardClassName=\"w-72 p-3\">\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>\n            {pct}%\n          </span>\n        </div>\n\n        {(model || effort) && (\n          <div className=\"flex items-center justify-between gap-3 border-b border-border pb-2\">\n            {model ? (\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {Glyph && (\n                  <Icon\n                    icon={Glyph}\n                    className={cn(\"size-4 shrink-0\", modelIconClassName)}\n                  />\n                )}\n                <span className=\"truncate font-medium\" title={model}>\n                  {model}\n                </span>\n              </div>\n            ) : null}\n            {effort ? (\n              <span\n                className={cn(\n                  \"inline-flex shrink-0 items-center gap-1 font-medium\",\n                  effortColor,\n                )}\n              >\n                {EffortGlyph ? <EffortGlyph className=\"size-3.5\" /> : null}\n                {effortLevelLabel(effort)} effort\n              </span>\n            ) : null}\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className={cn(\"h-full rounded-full\", barTone(pct))}\n              style={{ width: `${pct}%` }}\n            />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row\n                label=\"Window\"\n                value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`}\n              />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? (\n            <Row label=\"Messages\" value={String(messageCount)} />\n          ) : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row\n                label=\"Budget\"\n                value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`}\n              />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/chat/Conversation.cjs

@@ -8,11 +8,15 @@ const Message = require("./Message.cjs");
 const UiArrowDown = require("../../icons/components/UiArrowDown.cjs");
 const UiLoader = require("../../icons/components/UiLoader.cjs");
 const UiCircleX = require("../../icons/components/UiCircleX.cjs");
+const UiCheck = require("../../icons/components/UiCheck.cjs");
+const UiCopy = require("../../icons/components/UiCopy.cjs");
 function Conversation({
   messages,
   status,
   error,
   onClearError,
+  sessionId,
+  model,
   emptyState,
   className,
   ...actions
@@ -48,7 +52,16 @@ function Conversation({
         children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 p-4", children: [
           messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Message, { message, ...actions }, message.id)),
           isWaiting && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, {}),
-          errorText && /* @__PURE__ */ jsxRuntime.jsx(ErrorNotice, { message: errorText, onClear: onClearError })
+          errorText && /* @__PURE__ */ jsxRuntime.jsx(
+            ErrorNotice,
+            {
+              message: errorText,
+              error,
+              sessionId,
+              model,
+              onClear: onClearError
+            }
+          )
         ] })
       }
     ),
@@ -79,7 +92,30 @@ function LoadingIndicator() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for response..." })
   ] });
 }
-function ErrorNotice({ message, onClear }) {
+function buildErrorReport({ message, error, sessionId, model }) {
+  const lines = [`Error: ${message}`];
+  if ((error == null ? void 0 : error.name) && error.name !== "Error") lines.push(`Type: ${error.name}`);
+  if (sessionId) lines.push(`Session: ${sessionId}`);
+  if (model) lines.push(`Model: ${model}`);
+  if (typeof window !== "undefined") lines.push(`Page: ${window.location.href}`);
+  if (typeof navigator !== "undefined" && navigator.userAgent) lines.push(`User agent: ${navigator.userAgent}`);
+  lines.push(`Time: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  const cause = error == null ? void 0 : error.cause;
+  const detail = (error == null ? void 0 : error.stack) ?? (cause != null ? String(cause) : "");
+  if (detail.trim() && detail.trim() !== message) lines.push("", detail.trim());
+  return lines.join("\n");
+}
+function ErrorNotice({ message, error, sessionId, model, onClear }) {
+  const [copied, setCopied] = react.useState(false);
+  const copyReport = () => {
+    const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+    if (!clip) return;
+    void clip.writeText(buildErrorReport({ message, error, sessionId, model })).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -88,7 +124,23 @@ function ErrorNotice({ message, onClear }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCircleX.UiCircleX, className: "mt-0.5 size-4 shrink-0" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 whitespace-pre-wrap break-words", children: message }),
-        onClear && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "shrink-0 text-xs underline-offset-2 hover:underline", onClick: onClear, children: "Dismiss" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Copy error details",
+              title: "Copy session id, model, page and full error",
+              className: "inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline",
+              onClick: copyReport,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: copied ? UiCheck.UiCheck : UiCopy.UiCopy, className: "size-3.5" }),
+                copied ? "Copied" : "Copy"
+              ]
+            }
+          ),
+          onClear && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "text-xs underline-offset-2 hover:underline", onClick: onClear, children: "Dismiss" })
+        ] })
       ]
     }
   );

package/dist/data/chat/Conversation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.cjs","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowDown, UiCircleX, UiLoader } from \"../../icons\";\nimport { Message, type MessageActionHandlers } from \"./Message\";\nimport type { ChatStatus, UIMessage } from \"./types\";\n\nexport type ConversationProps = MessageActionHandlers & {\n  messages: UIMessage[];\n  /** Current chat status; used for transient pending/error affordances. */\n  status?: ChatStatus | undefined;\n  /** Last request error from the chat transport, if any. */\n  error?: Error | undefined;\n  /** Clears the visible transport error. */\n  onClearError?: (() => void) | undefined;\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up — in which case a jump-to-bottom button\n *  appears. */\nexport function Conversation({\n  messages,\n  status,\n  error,\n  onClearError,\n  emptyState,\n  className,\n  ...actions\n}: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [pinned, setPinned] = useState(true);\n  const isWaiting = status === \"submitted\" || (status === \"streaming\" && !hasVisibleAssistantResponse(messages));\n  const errorText = error?.message || (status === \"error\" ? \"The assistant request failed.\" : undefined);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    setPinned(distance < 32);\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinned) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  const scrollToBottom = () => {\n    const el = scrollRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      <div\n        ref={scrollRef}\n        onScroll={onScroll}\n        role=\"log\"\n        className={cn(\"flex-1 overflow-y-auto\", className)}\n      >\n        {messages.length === 0 && emptyState ? (\n          <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n            {emptyState}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-8 p-4\">\n            {messages.map((message) => (\n              <Message key={message.id} message={message} {...actions} />\n            ))}\n            {isWaiting && <LoadingIndicator />}\n            {errorText && <ErrorNotice message={errorText} onClear={onClearError} />}\n          </div>\n        )}\n      </div>\n\n      {!pinned && messages.length > 0 && (\n        <button\n          type=\"button\"\n          aria-label=\"Scroll to latest\"\n          onClick={scrollToBottom}\n          className=\"absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground\"\n        >\n          <Icon icon={UiArrowDown} className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction hasVisibleAssistantResponse(messages: UIMessage[]) {\n  const last = messages[messages.length - 1];\n  if (last?.role !== \"assistant\") return false;\n  return last.parts.some((part) => {\n    if (part.type === \"step-start\") return false;\n    if (part.type === \"text\" || part.type === \"reasoning\") return part.text.length > 0;\n    return true;\n  });\n}\n\nfunction LoadingIndicator() {\n  return (\n    <div className=\"flex w-full max-w-[95%] items-center gap-2 text-sm text-muted-foreground\">\n      <Icon icon={UiLoader} className=\"size-4 shrink-0 animate-spin\" />\n      <span>Waiting for response...</span>\n    </div>\n  );\n}\n\nfunction ErrorNotice({ message, onClear }: { message: string; onClear?: (() => void) | undefined }) {\n  return (\n    <div\n      role=\"alert\"\n      className=\"flex w-full max-w-[95%] items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n    >\n      <Icon icon={UiCircleX} className=\"mt-0.5 size-4 shrink-0\" />\n      <div className=\"min-w-0 flex-1 whitespace-pre-wrap break-words\">{message}</div>\n      {onClear && (\n        <button type=\"button\" className=\"shrink-0 text-xs underline-offset-2 hover:underline\" onClick={onClear}>\n          Dismiss\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","jsxs","jsx","cn","Message","Icon","UiArrowDown","UiLoader","UiCircleX"],"mappings":";;;;;;;;;;AAuBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAS,IAAI;AACzC,QAAM,YAAY,WAAW,eAAgB,WAAW,eAAe,CAAC,4BAA4B,QAAQ;AAC5G,QAAM,aAAY,+BAAO,aAAY,WAAW,UAAU,kCAAkC;AAE5F,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,eAAe,GAAG,YAAY,GAAG;AACrD,cAAU,WAAW,EAAE;AAAA,EACzB;AAEAC,QAAAA,UAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,QAAQ;AAChB,SAAG,YAAY,GAAG;AAAA,IACpB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,MAAM;AAC3B,UAAM,KAAK,UAAU;AACrB,QAAI,OAAO,SAAS,EAAE,KAAK,GAAG,cAAc,UAAU,UAAU;AAAA,EAClE;AAEA,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,MAAAA,GAAG,0BAA0B,SAAS;AAAA,QAEhD,UAAA,SAAS,WAAW,KAAK,aACxBD,2BAAAA,IAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,WAAA,CACH,IAEAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,SAAS,IAAI,CAAC,YACbC,2BAAAA,IAACE,QAAAA,SAAA,EAAyB,SAAmB,GAAG,QAAA,GAAlC,QAAQ,EAAmC,CAC1D;AAAA,UACA,4CAAc,kBAAA,EAAiB;AAAA,UAC/B,aAAaF,2BAAAA,IAAC,aAAA,EAAY,SAAS,WAAW,SAAS,aAAA,CAAc;AAAA,QAAA,EAAA,CACxE;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,CAAC,UAAU,SAAS,SAAS,KAC5BA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,UAAAA,2BAAAA,IAACG,WAAA,EAAK,MAAMC,YAAAA,aAAa,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C,GAEJ;AAEJ;AAEA,SAAS,4BAA4B,UAAuB;AAC1D,QAAM,OAAO,SAAS,SAAS,SAAS,CAAC;AACzC,OAAI,6BAAM,UAAS,YAAa,QAAO;AACvC,SAAO,KAAK,MAAM,KAAK,CAAC,SAAS;AAC/B,QAAI,KAAK,SAAS,aAAc,QAAO;AACvC,QAAI,KAAK,SAAS,UAAU,KAAK,SAAS,YAAa,QAAO,KAAK,KAAK,SAAS;AACjF,WAAO;AAAA,EACT,CAAC;AACH;AAEA,SAAS,mBAAmB;AAC1B,SACEL,2BAAAA,KAAC,OAAA,EAAI,WAAU,4EACb,UAAA;AAAA,IAAAC,2BAAAA,IAACG,KAAAA,MAAA,EAAK,MAAME,SAAAA,UAAU,WAAU,gCAA+B;AAAA,IAC/DL,2BAAAA,IAAC,UAAK,UAAA,0BAAA,CAAuB;AAAA,EAAA,GAC/B;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAS,WAAoE;AAClG,SACED,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAC,2BAAAA,IAACG,KAAAA,MAAA,EAAK,MAAMG,UAAAA,WAAW,WAAU,0BAAyB;AAAA,QAC1DN,2BAAAA,IAAC,OAAA,EAAI,WAAU,kDAAkD,UAAA,SAAQ;AAAA,QACxE,0CACE,UAAA,EAAO,MAAK,UAAS,WAAU,uDAAsD,SAAS,SAAS,UAAA,UAAA,CAExG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"Conversation.cjs","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowDown, UiCheck, UiCircleX, UiCopy, UiLoader } from \"../../icons\";\nimport { Message, type MessageActionHandlers } from \"./Message\";\nimport type { ChatStatus, UIMessage } from \"./types\";\n\nexport type ConversationProps = MessageActionHandlers & {\n  messages: UIMessage[];\n  /** Current chat status; used for transient pending/error affordances. */\n  status?: ChatStatus | undefined;\n  /** Last request error from the chat transport, if any. */\n  error?: Error | undefined;\n  /** Clears the visible transport error. */\n  onClearError?: (() => void) | undefined;\n  /** Conversation/thread id, surfaced in the copyable error report. */\n  sessionId?: string | undefined;\n  /** Selected model id, surfaced in the copyable error report. */\n  model?: string | undefined;\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up — in which case a jump-to-bottom button\n *  appears. */\nexport function Conversation({\n  messages,\n  status,\n  error,\n  onClearError,\n  sessionId,\n  model,\n  emptyState,\n  className,\n  ...actions\n}: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [pinned, setPinned] = useState(true);\n  const isWaiting = status === \"submitted\" || (status === \"streaming\" && !hasVisibleAssistantResponse(messages));\n  const errorText = error?.message || (status === \"error\" ? \"The assistant request failed.\" : undefined);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    setPinned(distance < 32);\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinned) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  const scrollToBottom = () => {\n    const el = scrollRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      <div\n        ref={scrollRef}\n        onScroll={onScroll}\n        role=\"log\"\n        className={cn(\"flex-1 overflow-y-auto\", className)}\n      >\n        {messages.length === 0 && emptyState ? (\n          <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n            {emptyState}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-8 p-4\">\n            {messages.map((message) => (\n              <Message key={message.id} message={message} {...actions} />\n            ))}\n            {isWaiting && <LoadingIndicator />}\n            {errorText && (\n              <ErrorNotice\n                message={errorText}\n                error={error}\n                sessionId={sessionId}\n                model={model}\n                onClear={onClearError}\n              />\n            )}\n          </div>\n        )}\n      </div>\n\n      {!pinned && messages.length > 0 && (\n        <button\n          type=\"button\"\n          aria-label=\"Scroll to latest\"\n          onClick={scrollToBottom}\n          className=\"absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground\"\n        >\n          <Icon icon={UiArrowDown} className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction hasVisibleAssistantResponse(messages: UIMessage[]) {\n  const last = messages[messages.length - 1];\n  if (last?.role !== \"assistant\") return false;\n  return last.parts.some((part) => {\n    if (part.type === \"step-start\") return false;\n    if (part.type === \"text\" || part.type === \"reasoning\") return part.text.length > 0;\n    return true;\n  });\n}\n\nfunction LoadingIndicator() {\n  return (\n    <div className=\"flex w-full max-w-[95%] items-center gap-2 text-sm text-muted-foreground\">\n      <Icon icon={UiLoader} className=\"size-4 shrink-0 animate-spin\" />\n      <span>Waiting for response...</span>\n    </div>\n  );\n}\n\ntype ErrorReport = {\n  message: string;\n  error?: Error | undefined;\n  sessionId?: string | undefined;\n  model?: string | undefined;\n};\n\n/** Assembles a support-ready plain-text report: the error, the session/model\n *  that produced it, the page, and the full stack/cause — everything needed to\n *  file or triage the failure without a back-and-forth. */\nfunction buildErrorReport({ message, error, sessionId, model }: ErrorReport): string {\n  const lines = [`Error: ${message}`];\n  if (error?.name && error.name !== \"Error\") lines.push(`Type: ${error.name}`);\n  if (sessionId) lines.push(`Session: ${sessionId}`);\n  if (model) lines.push(`Model: ${model}`);\n  if (typeof window !== \"undefined\") lines.push(`Page: ${window.location.href}`);\n  if (typeof navigator !== \"undefined\" && navigator.userAgent) lines.push(`User agent: ${navigator.userAgent}`);\n  lines.push(`Time: ${new Date().toISOString()}`);\n  const cause = (error as { cause?: unknown } | undefined)?.cause;\n  const detail = error?.stack ?? (cause != null ? String(cause) : \"\");\n  if (detail.trim() && detail.trim() !== message) lines.push(\"\", detail.trim());\n  return lines.join(\"\\n\");\n}\n\nfunction ErrorNotice({ message, error, sessionId, model, onClear }: ErrorReport & { onClear?: (() => void) | undefined }) {\n  const [copied, setCopied] = useState(false);\n  const copyReport = () => {\n    const clip = typeof navigator !== \"undefined\" ? navigator.clipboard : undefined;\n    if (!clip) return;\n    void clip\n      .writeText(buildErrorReport({ message, error, sessionId, model }))\n      .then(() => {\n        setCopied(true);\n        setTimeout(() => setCopied(false), 2000);\n      })\n      .catch(() => {});\n  };\n  return (\n    <div\n      role=\"alert\"\n      className=\"flex w-full max-w-[95%] items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n    >\n      <Icon icon={UiCircleX} className=\"mt-0.5 size-4 shrink-0\" />\n      <div className=\"min-w-0 flex-1 whitespace-pre-wrap break-words\">{message}</div>\n      <div className=\"flex shrink-0 items-center gap-2\">\n        <button\n          type=\"button\"\n          aria-label=\"Copy error details\"\n          title=\"Copy session id, model, page and full error\"\n          className=\"inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline\"\n          onClick={copyReport}\n        >\n          <Icon icon={copied ? UiCheck : UiCopy} className=\"size-3.5\" />\n          {copied ? \"Copied\" : \"Copy\"}\n        </button>\n        {onClear && (\n          <button type=\"button\" className=\"text-xs underline-offset-2 hover:underline\" onClick={onClear}>\n            Dismiss\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","jsxs","jsx","cn","Message","Icon","UiArrowDown","UiLoader","UiCircleX","UiCheck","UiCopy"],"mappings":"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"}

package/dist/data/chat/Conversation.d.ts

@@ -8,6 +8,10 @@ export type ConversationProps = MessageActionHandlers & {
     error?: Error | undefined;
     /** Clears the visible transport error. */
     onClearError?: (() => void) | undefined;
+    /** Conversation/thread id, surfaced in the copyable error report. */
+    sessionId?: string | undefined;
+    /** Selected model id, surfaced in the copyable error report. */
+    model?: string | undefined;
     /** Shown when there are no messages yet. */
     emptyState?: React.ReactNode;
     className?: string;
@@ -15,5 +19,5 @@ export type ConversationProps = MessageActionHandlers & {
 /** A scrollable message log that sticks to the bottom as new content streams
  *  in, unless the user has scrolled up — in which case a jump-to-bottom button
  *  appears. */
-export declare function Conversation({ messages, status, error, onClearError, emptyState, className, ...actions }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ messages, status, error, onClearError, sessionId, model, emptyState, className, ...actions }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Conversation.d.ts.map

package/dist/data/chat/Conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Conversation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;eAEe;AACf,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,GAAG,OAAO,EACX,EAAE,iBAAiB,2CA4DnB"}
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Conversation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;eAEe;AACf,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAY,EACZ,SAAS,EACT,KAAK,EACL,UAAU,EACV,SAAS,EACT,GAAG,OAAO,EACX,EAAE,iBAAiB,2CAoEnB"}

package/dist/data/chat/Conversation.js

@@ -6,11 +6,15 @@ import { Message } from "./Message.js";
 import { UiArrowDown } from "../../icons/components/UiArrowDown.js";
 import { UiLoader } from "../../icons/components/UiLoader.js";
 import { UiCircleX } from "../../icons/components/UiCircleX.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiCopy } from "../../icons/components/UiCopy.js";
 function Conversation({
   messages,
   status,
   error,
   onClearError,
+  sessionId,
+  model,
   emptyState,
   className,
   ...actions
@@ -46,7 +50,16 @@ function Conversation({
         children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 p-4", children: [
           messages.map((message) => /* @__PURE__ */ jsx(Message, { message, ...actions }, message.id)),
           isWaiting && /* @__PURE__ */ jsx(LoadingIndicator, {}),
-          errorText && /* @__PURE__ */ jsx(ErrorNotice, { message: errorText, onClear: onClearError })
+          errorText && /* @__PURE__ */ jsx(
+            ErrorNotice,
+            {
+              message: errorText,
+              error,
+              sessionId,
+              model,
+              onClear: onClearError
+            }
+          )
         ] })
       }
     ),
@@ -77,7 +90,30 @@ function LoadingIndicator() {
     /* @__PURE__ */ jsx("span", { children: "Waiting for response..." })
   ] });
 }
-function ErrorNotice({ message, onClear }) {
+function buildErrorReport({ message, error, sessionId, model }) {
+  const lines = [`Error: ${message}`];
+  if ((error == null ? void 0 : error.name) && error.name !== "Error") lines.push(`Type: ${error.name}`);
+  if (sessionId) lines.push(`Session: ${sessionId}`);
+  if (model) lines.push(`Model: ${model}`);
+  if (typeof window !== "undefined") lines.push(`Page: ${window.location.href}`);
+  if (typeof navigator !== "undefined" && navigator.userAgent) lines.push(`User agent: ${navigator.userAgent}`);
+  lines.push(`Time: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  const cause = error == null ? void 0 : error.cause;
+  const detail = (error == null ? void 0 : error.stack) ?? (cause != null ? String(cause) : "");
+  if (detail.trim() && detail.trim() !== message) lines.push("", detail.trim());
+  return lines.join("\n");
+}
+function ErrorNotice({ message, error, sessionId, model, onClear }) {
+  const [copied, setCopied] = useState(false);
+  const copyReport = () => {
+    const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+    if (!clip) return;
+    void clip.writeText(buildErrorReport({ message, error, sessionId, model })).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -86,7 +122,23 @@ function ErrorNotice({ message, onClear }) {
       children: [
         /* @__PURE__ */ jsx(Icon, { icon: UiCircleX, className: "mt-0.5 size-4 shrink-0" }),
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 whitespace-pre-wrap break-words", children: message }),
-        onClear && /* @__PURE__ */ jsx("button", { type: "button", className: "shrink-0 text-xs underline-offset-2 hover:underline", onClick: onClear, children: "Dismiss" })
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Copy error details",
+              title: "Copy session id, model, page and full error",
+              className: "inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline",
+              onClick: copyReport,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: copied ? UiCheck : UiCopy, className: "size-3.5" }),
+                copied ? "Copied" : "Copy"
+              ]
+            }
+          ),
+          onClear && /* @__PURE__ */ jsx("button", { type: "button", className: "text-xs underline-offset-2 hover:underline", onClick: onClear, children: "Dismiss" })
+        ] })
       ]
     }
   );