@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/data/cache-browser/CacheDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CacheDetailPanel.js","sources":["../../../src/data/cache-browser/CacheDetailPanel.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatDuration, formatShort } from \"../../lib/format\";\nimport { Icon } from \"../Icon\";\nimport { UiFolder, UiRefresh, UiTrash } from \"../../icons\";\nimport { KeyValueList } from \"../KeyValueList\";\nimport { TabButton } from \"../TabButton\";\nimport { Section } from \"../../layout/Section\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheAdapterRegistry } from \"./adapter\";\nimport { CacheValue } from \"./CacheValue\";\nimport { isLeaf, type CacheTreeNode } from \"./types\";\n\nexport type CacheDetailPanelProps = {\n  client: CacheClient;\n  registry: CacheAdapterRegistry;\n  node: CacheTreeNode;\n  /** Called after the node (key or whole prefix) was deleted. */\n  onDeleted?: (node: CacheTreeNode) => void;\n  /** Drill into a child prefix/key from the subtree overview. */\n  onSelect?: (node: CacheTreeNode) => void;\n  className?: string;\n};\n\n/**\n * Right-hand pane of the cache browser: full key detail (metadata + adapter\n * or type-aware value rendering) for leaves, an aggregated subtree overview\n * for prefix groups.\n */\nexport function CacheDetailPanel(props: CacheDetailPanelProps) {\n  return isLeaf(props.node) ? <KeyPanel {...props} /> : <PrefixPanel {...props} />;\n}\n\nfunction KeyPanel({ client, registry, node, onDeleted, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const key = node.key!;\n  const detail = useQuery({\n    queryKey: cacheQueryKeys.key(client.baseUrl, key),\n    queryFn: () => client.key(key),\n  });\n  const [activeTab, setActiveTab] = useState(\"value\");\n\n  const ctx = { node, detail: detail.data ?? null, client };\n  const adapter = registry.resolveDetail(node, detail.data ?? null);\n  const tabs = registry.resolveTabs(ctx);\n\n  const remove = async () => {\n    if (!window.confirm(`Delete key ${key}?`)) return;\n    await client.deleteKey(key);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={key}\n        onRefresh={() => detail.refetch()}\n        onDelete={remove}\n        deleteLabel=\"Delete key\"\n      />\n      {detail.isError && <PanelError error={detail.error} />}\n      {detail.data && (\n        <>\n          <KeyValueList\n            items={[\n              { key: \"type\", label: \"Type\", value: <code>{detail.data.type}</code> },\n              {\n                key: \"ttl\",\n                label: \"TTL\",\n                value:\n                  detail.data.ttlSeconds < 0\n                    ? \"none\"\n                    : formatDuration(detail.data.ttlSeconds, { from: \"s\" }),\n              },\n              {\n                key: \"bytes\",\n                label: \"Memory\",\n                value: formatBytes(detail.data.bytes),\n                hidden: !detail.data.bytes,\n              },\n              { key: \"length\", label: \"Length\", value: formatShort(detail.data.length) },\n            ]}\n          />\n          {tabs.length > 0 && (\n            <div role=\"tablist\" className=\"flex flex-wrap items-center gap-1\">\n              <TabButton\n                active={activeTab === \"value\"}\n                onClick={() => setActiveTab(\"value\")}\n                label=\"Value\"\n              />\n              {tabs.map((tab) => (\n                <TabButton\n                  key={tab.id}\n                  active={activeTab === tab.id}\n                  onClick={() => setActiveTab(tab.id)}\n                  label={tab.label}\n                />\n              ))}\n            </div>\n          )}\n          {activeTab === \"value\"\n            ? (adapter?.renderDetail?.(ctx) ?? <CacheValue detail={detail.data} />)\n            : tabs.find((t) => t.id === activeTab)?.render()}\n        </>\n      )}\n      {detail.isLoading && <div className=\"text-sm text-muted-foreground\">Loading key…</div>}\n    </div>\n  );\n}\n\nfunction PrefixPanel({ client, node, onDeleted, onSelect, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const prefix = node.prefix ?? \"\";\n  const subtree = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, prefix),\n    queryFn: () => client.tree(prefix),\n  });\n\n  const remove = async () => {\n    const count = subtree.data?.keys ?? node.keys;\n    if (!window.confirm(`Delete all ${count} keys under ${prefix}?`)) return;\n    await client.deletePrefix(prefix);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  const children = subtree.data?.nodes ?? [];\n  const maxKeys = Math.max(1, ...children.map((c) => c.keys));\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={\n          <span className=\"inline-flex items-center gap-1.5\">\n            <Icon icon={UiFolder} className=\"text-muted-foreground\" />\n            {prefix}\n          </span>\n        }\n        onRefresh={() => subtree.refetch()}\n        onDelete={remove}\n        deleteLabel=\"Delete prefix\"\n      />\n      {subtree.isError && <PanelError error={subtree.error} />}\n      {subtree.data && (\n        <Section\n          title={`${formatShort(subtree.data.keys)} keys${subtree.data.truncated ? \"+\" : \"\"}`}\n          summary={`${children.length} children`}\n        >\n          <div className=\"flex flex-col\">\n            {children.map((child) => (\n              <button\n                key={child.prefix ?? child.key ?? child.name}\n                type=\"button\"\n                onClick={() => onSelect?.(child)}\n                className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent\"\n              >\n                <span className=\"truncate font-mono text-xs\">{child.name}</span>\n                <span className=\"h-2 overflow-hidden rounded bg-muted\">\n                  <span\n                    className=\"block h-full bg-primary/60\"\n                    style={{ width: `${(child.keys / maxKeys) * 100}%` }}\n                  />\n                </span>\n                <span className=\"text-right text-xs text-muted-foreground\">\n                  {formatShort(child.keys)}\n                </span>\n              </button>\n            ))}\n          </div>\n        </Section>\n      )}\n      {subtree.isLoading && <div className=\"text-sm text-muted-foreground\">Loading prefix…</div>}\n    </div>\n  );\n}\n\nfunction PanelHeader({\n  title,\n  onRefresh,\n  onDelete,\n  deleteLabel,\n}: {\n  title: React.ReactNode;\n  onRefresh: () => void;\n  onDelete: () => void;\n  deleteLabel: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <h3 className=\"min-w-0 flex-1 truncate font-mono text-sm font-semibold\">{title}</h3>\n      <button\n        type=\"button\"\n        onClick={onRefresh}\n        aria-label=\"Refresh\"\n        title=\"Refresh\"\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n      >\n        <Icon icon={UiRefresh} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        onClick={onDelete}\n        aria-label={deleteLabel}\n        title={deleteLabel}\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive\"\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\nfunction PanelError({ error }: { error: unknown }) {\n  return (\n    <div className=\"rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"CacheDetailPanel.js","sources":["../../../src/data/cache-browser/CacheDetailPanel.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { cn } from \"../../lib/utils\";\nimport { formatBytes, formatDuration, formatShort } from \"../../lib/format\";\nimport { Icon } from \"../Icon\";\nimport { UiDownload, UiFolder, UiRefresh, UiTrash } from \"../../icons\";\nimport { KeyValueList } from \"../KeyValueList\";\nimport { TabButton } from \"../TabButton\";\nimport { Section } from \"../../layout/Section\";\nimport { cacheQueryKeys, type CacheClient } from \"./api\";\nimport type { CacheAdapterRegistry } from \"./adapter\";\nimport { CacheValue } from \"./CacheValue\";\nimport { isLeaf, type CacheTreeNode } from \"./types\";\nimport { downloadJson } from \"./download\";\n\nexport type CacheDetailPanelProps = {\n  client: CacheClient;\n  registry: CacheAdapterRegistry;\n  node: CacheTreeNode;\n  /** Called after the node (key or whole prefix) was deleted. */\n  onDeleted?: (node: CacheTreeNode) => void;\n  /** Drill into a child prefix/key from the subtree overview. */\n  onSelect?: (node: CacheTreeNode) => void;\n  className?: string;\n};\n\n/**\n * Right-hand pane of the cache browser: full key detail (metadata + adapter\n * or type-aware value rendering) for leaves, an aggregated subtree overview\n * for prefix groups.\n */\nexport function CacheDetailPanel(props: CacheDetailPanelProps) {\n  return isLeaf(props.node) ? <KeyPanel {...props} /> : <PrefixPanel {...props} />;\n}\n\nfunction KeyPanel({ client, registry, node, onDeleted, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const key = node.key!;\n  const detail = useQuery({\n    queryKey: cacheQueryKeys.key(client.baseUrl, key),\n    queryFn: () => client.key(key),\n  });\n  const [activeTab, setActiveTab] = useState(\"value\");\n\n  const ctx = { node, detail: detail.data ?? null, client };\n  const adapter = registry.resolveDetail(node, detail.data ?? null);\n  const tabs = registry.resolveTabs(ctx);\n\n  const remove = async () => {\n    if (!window.confirm(`Delete key ${key}?`)) return;\n    await client.deleteKey(key);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={key}\n        onRefresh={() => detail.refetch()}\n        onDownload={detail.data ? () => downloadJson(key, detail.data!) : undefined}\n        onDelete={remove}\n        deleteLabel=\"Delete key\"\n      />\n      {detail.isError && <PanelError error={detail.error} />}\n      {detail.data && (\n        <>\n          <KeyValueList\n            items={[\n              { key: \"type\", label: \"Type\", value: <code>{detail.data.type}</code> },\n              {\n                key: \"ttl\",\n                label: \"TTL\",\n                value:\n                  detail.data.ttlSeconds < 0\n                    ? \"none\"\n                    : formatDuration(detail.data.ttlSeconds, { from: \"s\" }),\n              },\n              {\n                key: \"bytes\",\n                label: \"Memory\",\n                value: formatBytes(detail.data.bytes),\n                hidden: !detail.data.bytes,\n              },\n              { key: \"length\", label: \"Length\", value: formatShort(detail.data.length) },\n            ]}\n          />\n          {tabs.length > 0 && (\n            <div role=\"tablist\" className=\"flex flex-wrap items-center gap-1\">\n              <TabButton\n                active={activeTab === \"value\"}\n                onClick={() => setActiveTab(\"value\")}\n                label=\"Value\"\n              />\n              {tabs.map((tab) => (\n                <TabButton\n                  key={tab.id}\n                  active={activeTab === tab.id}\n                  onClick={() => setActiveTab(tab.id)}\n                  label={tab.label}\n                />\n              ))}\n            </div>\n          )}\n          {activeTab === \"value\"\n            ? (adapter?.renderDetail?.(ctx) ?? <CacheValue detail={detail.data} />)\n            : tabs.find((t) => t.id === activeTab)?.render()}\n        </>\n      )}\n      {detail.isLoading && <div className=\"text-sm text-muted-foreground\">Loading key…</div>}\n    </div>\n  );\n}\n\nfunction PrefixPanel({ client, node, onDeleted, onSelect, className }: CacheDetailPanelProps) {\n  const queryClient = useQueryClient();\n  const prefix = node.prefix ?? \"\";\n  const subtree = useQuery({\n    queryKey: cacheQueryKeys.tree(client.baseUrl, prefix),\n    queryFn: () => client.tree(prefix),\n  });\n\n  const remove = async () => {\n    const count = subtree.data?.keys ?? node.keys;\n    if (!window.confirm(`Delete all ${count} keys under ${prefix}?`)) return;\n    await client.deletePrefix(prefix);\n    await queryClient.invalidateQueries({ queryKey: cacheQueryKeys.all(client.baseUrl) });\n    onDeleted?.(node);\n  };\n\n  const children = subtree.data?.nodes ?? [];\n  const maxKeys = Math.max(1, ...children.map((c) => c.keys));\n\n  return (\n    <div className={cn(\"flex min-h-0 flex-col gap-density-3 overflow-y-auto p-density-3\", className)}>\n      <PanelHeader\n        title={\n          <span className=\"inline-flex items-center gap-1.5\">\n            <Icon icon={UiFolder} className=\"text-muted-foreground\" />\n            {prefix}\n          </span>\n        }\n        onRefresh={() => subtree.refetch()}\n        onDelete={remove}\n        deleteLabel=\"Delete prefix\"\n      />\n      {subtree.isError && <PanelError error={subtree.error} />}\n      {subtree.data && (\n        <Section\n          title={`${formatShort(subtree.data.keys)} keys${subtree.data.truncated ? \"+\" : \"\"}`}\n          summary={`${children.length} children`}\n        >\n          <div className=\"flex flex-col\">\n            {children.map((child) => (\n              <button\n                key={child.prefix ?? child.key ?? child.name}\n                type=\"button\"\n                onClick={() => onSelect?.(child)}\n                className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)_4rem] items-center gap-density-3 rounded px-density-2 py-density-1 text-left text-sm hover:bg-accent\"\n              >\n                <span className=\"truncate font-mono text-xs\">{child.name}</span>\n                <span className=\"h-2 overflow-hidden rounded bg-muted\">\n                  <span\n                    className=\"block h-full bg-primary/60\"\n                    style={{ width: `${(child.keys / maxKeys) * 100}%` }}\n                  />\n                </span>\n                <span className=\"text-right text-xs text-muted-foreground\">\n                  {formatShort(child.keys)}\n                </span>\n              </button>\n            ))}\n          </div>\n        </Section>\n      )}\n      {subtree.isLoading && <div className=\"text-sm text-muted-foreground\">Loading prefix…</div>}\n    </div>\n  );\n}\n\nfunction PanelHeader({\n  title,\n  onRefresh,\n  onDownload,\n  onDelete,\n  deleteLabel,\n}: {\n  title: React.ReactNode;\n  onRefresh: () => void;\n  onDownload?: (() => void) | undefined;\n  onDelete: () => void;\n  deleteLabel: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <h3 className=\"min-w-0 flex-1 truncate font-mono text-sm font-semibold\">{title}</h3>\n      <button\n        type=\"button\"\n        onClick={onRefresh}\n        aria-label=\"Refresh\"\n        title=\"Refresh\"\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n      >\n        <Icon icon={UiRefresh} className=\"text-sm\" />\n      </button>\n      {onDownload && (\n        <button\n          type=\"button\"\n          onClick={onDownload}\n          aria-label=\"Download JSON\"\n          title=\"Download JSON\"\n          className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiDownload} className=\"text-sm\" />\n        </button>\n      )}\n      <button\n        type=\"button\"\n        onClick={onDelete}\n        aria-label={deleteLabel}\n        title={deleteLabel}\n        className=\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive\"\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\nfunction PanelError({ error }: { error: unknown }) {\n  return (\n    <div className=\"rounded-md border border-red-300 bg-red-50 px-density-3 py-density-2 text-xs text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200\">\n      {error instanceof Error ? error.message : String(error)}\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/data/cache-browser/cache-browser.fixtures.d.ts

@@ -0,0 +1,10 @@
+import { CacheClient, CacheFetcher } from './api';
+import { CacheKeyDetail, CacheTreeNode } from './types';
+/** Builds a fetcher that serves the synthetic dataset from the URL + query. */
+export declare function makeCacheFetcher(): CacheFetcher;
+export declare function makeCacheClient(baseUrl?: string): CacheClient;
+export declare const sampleKeyDetail: CacheKeyDetail;
+export declare const sampleZsetDetail: CacheKeyDetail;
+export declare const rootGroupNode: CacheTreeNode;
+export declare const leafNode: CacheTreeNode;
+//# sourceMappingURL=cache-browser.fixtures.d.ts.map

package/dist/data/cache-browser/cache-browser.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache-browser.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/cache-browser/cache-browser.fixtures.ts"],"names":[],"mappings":"AAKA,OAAO,EAAqB,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EACV,cAAc,EAGd,aAAa,EAEd,MAAM,SAAS,CAAC;AAsFjB,+EAA+E;AAC/E,wBAAgB,gBAAgB,IAAI,YAAY,CAmB/C;AAED,wBAAgB,eAAe,CAAC,OAAO,SAAY,GAAG,WAAW,CAEhE;AAED,eAAO,MAAM,eAAe,EAA2B,cAAc,CAAC;AACtE,eAAO,MAAM,gBAAgB,EAA8B,cAAc,CAAC;AAC1E,eAAO,MAAM,aAAa,EAAoB,aAAa,CAAC;AAC5D,eAAO,MAAM,QAAQ,EAAoB,aAAa,CAAC"}

package/dist/data/cache-browser/download.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function downloadJson(key, detail) {
+  const blob = new Blob([JSON.stringify(detail, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${key.replace(/[^\w.-]+/g, "_")}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+exports.downloadJson = downloadJson;
+//# sourceMappingURL=download.cjs.map

package/dist/data/cache-browser/download.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"download.cjs","sources":["../../../src/data/cache-browser/download.ts"],"sourcesContent":["/** Serialize a key's detail and trigger a browser download as `<key>.json`. */\nexport function downloadJson(key: string, detail: object) {\n  const blob = new Blob([JSON.stringify(detail, null, 2)], { type: \"application/json\" });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement(\"a\");\n  anchor.href = url;\n  anchor.download = `${key.replace(/[^\\w.-]+/g, \"_\")}.json`;\n  anchor.click();\n  URL.revokeObjectURL(url);\n}\n"],"names":[],"mappings":";;AACO,SAAS,aAAa,KAAa,QAAgB;AACxD,QAAM,OAAO,IAAI,KAAK,CAAC,KAAK,UAAU,QAAQ,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,oBAAoB;AACrF,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,QAAM,SAAS,SAAS,cAAc,GAAG;AACzC,SAAO,OAAO;AACd,SAAO,WAAW,GAAG,IAAI,QAAQ,aAAa,GAAG,CAAC;AAClD,SAAO,MAAA;AACP,MAAI,gBAAgB,GAAG;AACzB;;"}

package/dist/data/cache-browser/download.d.ts

@@ -0,0 +1,3 @@
+/** Serialize a key's detail and trigger a browser download as `<key>.json`. */
+export declare function downloadJson(key: string, detail: object): void;
+//# sourceMappingURL=download.d.ts.map

package/dist/data/cache-browser/download.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"download.d.ts","sourceRoot":"","sources":["../../../src/data/cache-browser/download.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAQvD"}

package/dist/data/cache-browser/download.js

@@ -0,0 +1,13 @@
+function downloadJson(key, detail) {
+  const blob = new Blob([JSON.stringify(detail, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${key.replace(/[^\w.-]+/g, "_")}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+export {
+  downloadJson
+};
+//# sourceMappingURL=download.js.map

package/dist/data/cache-browser/download.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download.js","sources":["../../../src/data/cache-browser/download.ts"],"sourcesContent":["/** Serialize a key's detail and trigger a browser download as `<key>.json`. */\nexport function downloadJson(key: string, detail: object) {\n  const blob = new Blob([JSON.stringify(detail, null, 2)], { type: \"application/json\" });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement(\"a\");\n  anchor.href = url;\n  anchor.download = `${key.replace(/[^\\w.-]+/g, \"_\")}.json`;\n  anchor.click();\n  URL.revokeObjectURL(url);\n}\n"],"names":[],"mappings":"AACO,SAAS,aAAa,KAAa,QAAgB;AACxD,QAAM,OAAO,IAAI,KAAK,CAAC,KAAK,UAAU,QAAQ,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,oBAAoB;AACrF,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,QAAM,SAAS,SAAS,cAAc,GAAG;AACzC,SAAO,OAAO;AACd,SAAO,WAAW,GAAG,IAAI,QAAQ,aAAa,GAAG,CAAC;AAClD,SAAO,MAAA;AACP,MAAI,gBAAgB,GAAG;AACzB;"}

package/dist/data/chat/Chat.cjs

@@ -9,6 +9,8 @@ const Conversation = require("./Conversation.cjs");
 const PromptInput = require("./PromptInput.cjs");
 const Suggestion = require("./Suggestion.cjs");
 const ModelSelector = require("./ModelSelector.cjs");
+const providerIcons = require("./provider-icons.cjs");
+const ContextUsage = require("./ContextUsage.cjs");
 const DEFAULT_EFFORTS = ["low", "medium", "high"];
 function Chat({
   api = "/api/chat",
@@ -18,6 +20,7 @@ function Chat({
   reasoningEfforts = DEFAULT_EFFORTS,
   defaultReasoningEffort = "",
   onModelChange,
+  onUsage,
   suggestions,
   enableAttachments = false,
   toolApproval,
@@ -32,6 +35,7 @@ function Chat({
   const [models, setModels] = react.useState(modelsProp ?? []);
   const [model, setModel] = react.useState(defaultModel);
   const [effort, setEffort] = react.useState(defaultReasoningEffort);
+  const [usage, setUsage] = react.useState(null);
   react.useEffect(() => {
     if (modelsProp || !modelsApi) return;
     let cancelled = false;
@@ -66,13 +70,47 @@ function Chat({
     sendAutomaticallyWhen: ai.lastAssistantMessageIsCompleteWithApprovalResponses,
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  const onUsageRef = react.useRef(onUsage);
+  onUsageRef.current = onUsage;
+  react.useEffect(() => {
+    var _a, _b;
+    if (status !== "ready") return;
+    const last = [...messages].reverse().find((m) => m.role === "assistant");
+    const meta = last == null ? void 0 : last.metadata;
+    if (!meta) return;
+    const cost = meta.threadCostUsd ?? meta.cost;
+    const snapshot = {
+      usedTokens: meta.contextTokens ?? ((_a = meta.usage) == null ? void 0 : _a.totalTokens) ?? 0,
+      maxTokens: (selectedModel == null ? void 0 : selectedModel.contextWindow) ?? 0,
+      messageCount: messages.length,
+      ...cost != null ? { cost } : {},
+      ...(selectedModel == null ? void 0 : selectedModel.label) ? { modelLabel: selectedModel.label } : {}
+    };
+    setUsage(snapshot);
+    (_b = onUsageRef.current) == null ? void 0 : _b.call(onUsageRef, snapshot);
+  }, [messages, status, selectedModel]);
   const onModelSelect = (id) => {
     setModel(id);
     onModelChange == null ? void 0 : onModelChange(id);
   };
-  const toolbar = models.length > 0 || showEffort ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+  const ModelGlyph = providerIcons.providerIcon(selectedModel == null ? void 0 : selectedModel.provider);
+  const toolbar = models.length > 0 || showEffort || usage && usage.maxTokens > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ModelSelector.ModelSelector, { models, value: model, onChange: onModelSelect }),
-    showEffort && /* @__PURE__ */ jsxRuntime.jsx(ModelSelector.EffortSelector, { efforts: reasoningEfforts, value: effort, onChange: setEffort })
+    showEffort && /* @__PURE__ */ jsxRuntime.jsx(ModelSelector.EffortSelector, { efforts: reasoningEfforts, value: effort, onChange: setEffort }),
+    usage && usage.maxTokens > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ContextUsage.ContextUsage,
+        {
+          usedTokens: usage.usedTokens,
+          maxTokens: usage.maxTokens,
+          ...usage.messageCount != null ? { messageCount: usage.messageCount } : {},
+          ...usage.cost != null ? { cost: usage.cost } : {},
+          ...usage.modelLabel ? { modelLabel: usage.modelLabel } : {},
+          ...ModelGlyph ? { modelIcon: ModelGlyph } : {}
+        }
+      )
+    ] })
   ] }) : void 0;
   const empty = messages.length === 0 && (emptyState || (suggestions == null ? void 0 : suggestions.length)) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     emptyState,

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.cjs","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport type { ChatModel, Suggestion } from \"./types\";\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, stop } =\n    useChat<UIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages } : {}),\n    });\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const toolbar = models.length > 0 || showEffort ? (\n    <div className=\"flex items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","useRef","useMemo","DefaultChatTransport","useChat","lastAssistantMessageIsCompleteWithApprovalResponses","jsxs","jsx","ModelSelector","EffortSelector","Suggestions","cn","Conversation","PromptInput"],"mappings":"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"}
+{"version":3,"file":"Chat.cjs","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","useRef","useMemo","DefaultChatTransport","useChat","lastAssistantMessageIsCompleteWithApprovalResponses","providerIcon","jsxs","jsx","ModelSelector","EffortSelector","Fragment","ContextUsage","Suggestions","cn","Conversation","PromptInput"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { ChatTransport, UIMessage } from 'ai';
-import { ChatModel, Suggestion } from './types';
+import { ChatModel, ChatUsageSummary, Suggestion } from './types';
 export type ChatProps = {
     /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.
      *  Ignored when `transport` is supplied. Defaults to "/api/chat". */
@@ -17,6 +17,9 @@ export type ChatProps = {
     defaultReasoningEffort?: string;
     /** Notified when the user changes the model. */
     onModelChange?: (id: string) => void;
+    /** Notified after each assistant turn with a usage snapshot (tokens used out
+     *  of the model's context window + cumulative cost), for a usage gauge. */
+    onUsage?: (usage: ChatUsageSummary) => void;
     /** Suggested prompts shown on the empty state. */
     suggestions?: Suggestion[];
     /** Enables file/image attachments. */
@@ -40,5 +43,5 @@ export type ChatProps = {
  *  per-message copy/regenerate, and human-in-the-loop tool approvals. The
  *  backend owns model selection and tool execution; the selected model,
  *  effort, approval policy and thread id are forwarded in the request body. */
-export declare function Chat({ api, models: modelsProp, modelsApi, defaultModel, reasoningEfforts, defaultReasoningEffort, onModelChange, suggestions, enableAttachments, toolApproval, threadId, body, transport, initialMessages, placeholder, emptyState, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ api, models: modelsProp, modelsApi, defaultModel, reasoningEfforts, defaultReasoningEffort, onModelChange, onUsage, suggestions, enableAttachments, toolApproval, threadId, body, transport, initialMessages, placeholder, emptyState, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chat.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,IAAI,CAAC;AAMZ,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG;IACtB;yEACqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB;+DAC2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kDAAkD;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;+EAI+E;AAC/E,wBAAgB,IAAI,CAAC,EACnB,GAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,SAA8B,EAC9B,YAAY,EACZ,gBAAkC,EAClC,sBAA2B,EAC3B,aAAa,EACb,WAAW,EACX,iBAAyB,EACzB,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CA6FX"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,IAAI,CAAC;AAQZ,OAAO,KAAK,EAAE,SAAS,EAAuB,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAM5F,MAAM,MAAM,SAAS,GAAG;IACtB;yEACqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB;+DAC2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;+EAC2E;IAC3E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,kDAAkD;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;+EAI+E;AAC/E,wBAAgB,IAAI,CAAC,EACnB,GAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,SAA8B,EAC9B,YAAY,EACZ,gBAAkC,EAClC,sBAA2B,EAC3B,aAAa,EACb,OAAO,EACP,WAAW,EACX,iBAAyB,EACzB,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CAkIX"}

package/dist/data/chat/Chat.fixtures.cjs

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MOCK_MODELS = [
+  { id: "anthropic/claude-sonnet-4-5", provider: "anthropic", label: "Claude Sonnet 4.5", reasoning: true, configured: true, contextWindow: 2e5 },
+  { id: "openai/gpt-4o", provider: "openai", label: "GPT-4o", reasoning: false, configured: true, contextWindow: 128e3 },
+  { id: "googleai/gemini-2.5-pro", provider: "googleai", label: "Gemini 2.5 Pro", reasoning: true, configured: false, contextWindow: 1048576 }
+];
+function streamChunks(chunks, delayMs) {
+  let i = 0;
+  return new ReadableStream({
+    pull(controller) {
+      if (i >= chunks.length) {
+        controller.close();
+        return;
+      }
+      const chunk = chunks[i++];
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          controller.enqueue(chunk);
+          resolve();
+        }, delayMs);
+      });
+    }
+  });
+}
+const TEXT_TURN = [
+  { type: "start" },
+  { type: "start-step" },
+  { type: "text-start", id: "t0" },
+  { type: "text-delta", id: "t0", delta: "Here is **markdown** with a list:\n\n" },
+  { type: "text-delta", id: "t0", delta: "- one\n- two\n- three" },
+  { type: "text-end", id: "t0" },
+  { type: "finish-step" },
+  {
+    type: "finish",
+    messageMetadata: {
+      usage: { inputTokens: 920, outputTokens: 280, totalTokens: 1200 },
+      contextTokens: 1200,
+      cost: 4e-3
+    }
+  }
+];
+const TOOL_TURN = [
+  { type: "start" },
+  { type: "start-step" },
+  {
+    type: "tool-input-available",
+    toolCallId: "call_1",
+    toolName: "listPods",
+    input: { namespace: "default", limit: 5 },
+    dynamic: true
+  },
+  {
+    type: "tool-output-available",
+    toolCallId: "call_1",
+    output: { count: 2, pods: ["api-7c9", "worker-1f2"] },
+    dynamic: true
+  },
+  { type: "text-start", id: "t1" },
+  { type: "text-delta", id: "t1", delta: "Found **2 pods** in `default`." },
+  { type: "text-end", id: "t1" },
+  { type: "finish-step" },
+  {
+    type: "finish",
+    messageMetadata: {
+      usage: { inputTokens: 2600, outputTokens: 800, totalTokens: 3400 },
+      contextTokens: 3400,
+      cost: 0.011
+    }
+  }
+];
+function mockChatTransport(delayMs = 120) {
+  let calls = 0;
+  return {
+    sendMessages() {
+      const chunks = calls++ === 0 ? TEXT_TURN : TOOL_TURN;
+      return Promise.resolve(streamChunks(chunks, delayMs));
+    },
+    reconnectToStream() {
+      return Promise.resolve(null);
+    }
+  };
+}
+exports.MOCK_MODELS = MOCK_MODELS;
+exports.mockChatTransport = mockChatTransport;
+//# sourceMappingURL=Chat.fixtures.cjs.map

package/dist/data/chat/Chat.fixtures.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.fixtures.cjs","sources":["../../../src/data/chat/Chat.fixtures.ts"],"sourcesContent":["import type { ChatTransport, UIMessage, UIMessageChunk } from \"ai\";\nimport type { ChatModel } from \"./types\";\n\n/** A sample model menu for stories driving the model selector. */\nexport const MOCK_MODELS: ChatModel[] = [\n  { id: \"anthropic/claude-sonnet-4-5\", provider: \"anthropic\", label: \"Claude Sonnet 4.5\", reasoning: true, configured: true, contextWindow: 200_000 },\n  { id: \"openai/gpt-4o\", provider: \"openai\", label: \"GPT-4o\", reasoning: false, configured: true, contextWindow: 128_000 },\n  { id: \"googleai/gemini-2.5-pro\", provider: \"googleai\", label: \"Gemini 2.5 Pro\", reasoning: true, configured: false, contextWindow: 1_048_576 },\n];\n\n/** A seeded conversation that already contains a completed tool call, so a\n *  story shows the collapsible tool-call panel (args → result) on load, without\n *  the user sending a message. clicky operations surface as dynamic tools. */\nexport const SAMPLE_TOOL_MESSAGES: UIMessage[] = [\n  { id: \"u1\", role: \"user\", parts: [{ type: \"text\", text: \"List the pods in default\" }] },\n  {\n    id: \"a1\",\n    role: \"assistant\",\n    parts: [\n      {\n        type: \"dynamic-tool\",\n        toolCallId: \"call_listPods\",\n        toolName: \"listPods\",\n        state: \"output-available\",\n        input: { namespace: \"default\", limit: 5 },\n        output: { count: 2, pods: [\"api-7c9\", \"worker-1f2\"] },\n      },\n      { type: \"text\", text: \"Found **2 pods** in `default`: `api-7c9` and `worker-1f2`.\" },\n    ],\n  },\n];\n\n/** Emits the given chunks as a ReadableStream, with a small delay between each\n *  so the UI visibly streams in Storybook. */\nfunction streamChunks(chunks: UIMessageChunk[], delayMs: number): ReadableStream<UIMessageChunk> {\n  let i = 0;\n  return new ReadableStream<UIMessageChunk>({\n    pull(controller) {\n      if (i >= chunks.length) {\n        controller.close();\n        return;\n      }\n      const chunk = chunks[i++];\n      return new Promise<void>((resolve) => {\n        setTimeout(() => {\n          controller.enqueue(chunk);\n          resolve();\n        }, delayMs);\n      });\n    },\n  });\n}\n\nconst TEXT_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"text-start\", id: \"t0\" },\n  { type: \"text-delta\", id: \"t0\", delta: \"Here is **markdown** with a list:\\n\\n\" },\n  { type: \"text-delta\", id: \"t0\", delta: \"- one\\n- two\\n- three\" },\n  { type: \"text-end\", id: \"t0\" },\n  { type: \"finish-step\" },\n  {\n    type: \"finish\",\n    messageMetadata: {\n      usage: { inputTokens: 920, outputTokens: 280, totalTokens: 1200 },\n      contextTokens: 1200,\n      cost: 0.004,\n    },\n  },\n];\n\nconst TOOL_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  {\n    type: \"tool-input-available\",\n    toolCallId: \"call_1\",\n    toolName: \"listPods\",\n    input: { namespace: \"default\", limit: 5 },\n    dynamic: true,\n  },\n  {\n    type: \"tool-output-available\",\n    toolCallId: \"call_1\",\n    output: { count: 2, pods: [\"api-7c9\", \"worker-1f2\"] },\n    dynamic: true,\n  },\n  { type: \"text-start\", id: \"t1\" },\n  { type: \"text-delta\", id: \"t1\", delta: \"Found **2 pods** in `default`.\" },\n  { type: \"text-end\", id: \"t1\" },\n  { type: \"finish-step\" },\n  {\n    type: \"finish\",\n    messageMetadata: {\n      usage: { inputTokens: 2600, outputTokens: 800, totalTokens: 3400 },\n      contextTokens: 3400,\n      cost: 0.011,\n    },\n  },\n];\n\nconst REASONING_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"reasoning-start\", id: \"r0\" },\n  { type: \"reasoning-delta\", id: \"r0\", delta: \"The user wants pods. I'll call listPods, then summarize.\" },\n  { type: \"reasoning-end\", id: \"r0\" },\n  { type: \"text-start\", id: \"t2\" },\n  { type: \"text-delta\", id: \"t2\", delta: \"Let me check the pods.\" },\n  { type: \"text-end\", id: \"t2\" },\n  { type: \"finish-step\" },\n  { type: \"finish\" },\n];\n\nconst APPROVAL_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"text-start\", id: \"t3\" },\n  { type: \"text-delta\", id: \"t3\", delta: \"This will restart the service.\" },\n  { type: \"text-end\", id: \"t3\" },\n  {\n    type: \"tool-input-available\",\n    toolCallId: \"call_restart\",\n    toolName: \"restartService\",\n    input: { service: \"api\", confirm: true },\n    dynamic: true,\n  },\n  { type: \"tool-approval-request\", approvalId: \"call_restart\", toolCallId: \"call_restart\" },\n  { type: \"finish-step\" },\n  { type: \"finish\" },\n];\n\n/** A mock ChatTransport that replies with a markdown text turn, then a tool\n *  round-trip turn on the next submission. Use in stories/tests to drive the\n *  Chat UI without a backend. */\nexport function mockChatTransport(delayMs = 120): ChatTransport<UIMessage> {\n  let calls = 0;\n  return {\n    sendMessages() {\n      const chunks = calls++ === 0 ? TEXT_TURN : TOOL_TURN;\n      return Promise.resolve(streamChunks(chunks, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n\n/** A mock transport whose first turn requests tool approval, and whose resume\n *  (after the user approves/denies) completes the tool and replies. */\nexport function mockApprovalTransport(delayMs = 120): ChatTransport<UIMessage> {\n  let calls = 0;\n  return {\n    sendMessages() {\n      const chunks = calls++ === 0 ? APPROVAL_TURN : TOOL_TURN;\n      return Promise.resolve(streamChunks(chunks, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n\n/** A mock transport that streams a reasoning (\"thinking\") block before its\n *  answer. */\nexport function mockReasoningTransport(delayMs = 120): ChatTransport<UIMessage> {\n  return {\n    sendMessages() {\n      return Promise.resolve(streamChunks(REASONING_TURN, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n"],"names":[],"mappings":";;AAIO,MAAM,cAA2B;AAAA,EACtC,EAAE,IAAI,+BAA+B,UAAU,aAAa,OAAO,qBAAqB,WAAW,MAAM,YAAY,MAAM,eAAe,IAAA;AAAA,EAC1I,EAAE,IAAI,iBAAiB,UAAU,UAAU,OAAO,UAAU,WAAW,OAAO,YAAY,MAAM,eAAe,MAAA;AAAA,EAC/G,EAAE,IAAI,2BAA2B,UAAU,YAAY,OAAO,kBAAkB,WAAW,MAAM,YAAY,OAAO,eAAe,QAAA;AACrI;AA0BA,SAAS,aAAa,QAA0B,SAAiD;AAC/F,MAAI,IAAI;AACR,SAAO,IAAI,eAA+B;AAAA,IACxC,KAAK,YAAY;AACf,UAAI,KAAK,OAAO,QAAQ;AACtB,mBAAW,MAAA;AACX;AAAA,MACF;AACA,YAAM,QAAQ,OAAO,GAAG;AACxB,aAAO,IAAI,QAAc,CAAC,YAAY;AACpC,mBAAW,MAAM;AACf,qBAAW,QAAQ,KAAK;AACxB,kBAAA;AAAA,QACF,GAAG,OAAO;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EAAA,CACD;AACH;AAEA,MAAM,YAA8B;AAAA,EAClC,EAAE,MAAM,QAAA;AAAA,EACR,EAAE,MAAM,aAAA;AAAA,EACR,EAAE,MAAM,cAAc,IAAI,KAAA;AAAA,EAC1B,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,wCAAA;AAAA,EACvC,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,wBAAA;AAAA,EACvC,EAAE,MAAM,YAAY,IAAI,KAAA;AAAA,EACxB,EAAE,MAAM,cAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,MACf,OAAO,EAAE,aAAa,KAAK,cAAc,KAAK,aAAa,KAAA;AAAA,MAC3D,eAAe;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,YAA8B;AAAA,EAClC,EAAE,MAAM,QAAA;AAAA,EACR,EAAE,MAAM,aAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO,EAAE,WAAW,WAAW,OAAO,EAAA;AAAA,IACtC,SAAS;AAAA,EAAA;AAAA,EAEX;AAAA,IACE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,WAAW,YAAY,EAAA;AAAA,IAClD,SAAS;AAAA,EAAA;AAAA,EAEX,EAAE,MAAM,cAAc,IAAI,KAAA;AAAA,EAC1B,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,iCAAA;AAAA,EACvC,EAAE,MAAM,YAAY,IAAI,KAAA;AAAA,EACxB,EAAE,MAAM,cAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,MACf,OAAO,EAAE,aAAa,MAAM,cAAc,KAAK,aAAa,KAAA;AAAA,MAC5D,eAAe;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAoCO,SAAS,kBAAkB,UAAU,KAA+B;AACzE,MAAI,QAAQ;AACZ,SAAO;AAAA,IACL,eAAe;AACb,YAAM,SAAS,YAAY,IAAI,YAAY;AAC3C,aAAO,QAAQ,QAAQ,aAAa,QAAQ,OAAO,CAAC;AAAA,IACtD;AAAA,IACA,oBAAoB;AAClB,aAAO,QAAQ,QAAQ,IAAI;AAAA,IAC7B;AAAA,EAAA;AAEJ;;;"}

package/dist/data/chat/Chat.fixtures.d.ts

@@ -2,6 +2,10 @@ import { ChatTransport, UIMessage } from 'ai';
 import { ChatModel } from './types';
 /** A sample model menu for stories driving the model selector. */
 export declare const MOCK_MODELS: ChatModel[];
+/** A seeded conversation that already contains a completed tool call, so a
+ *  story shows the collapsible tool-call panel (args → result) on load, without
+ *  the user sending a message. clicky operations surface as dynamic tools. */
+export declare const SAMPLE_TOOL_MESSAGES: UIMessage[];
 /** A mock ChatTransport that replies with a markdown text turn, then a tool
  *  round-trip turn on the next submission. Use in stories/tests to drive the
  *  Chat UI without a backend. */

package/dist/data/chat/Chat.fixtures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAkB,MAAM,IAAI,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,kEAAkE;AAClE,eAAO,MAAM,WAAW,EAAE,SAAS,EAIlC,CAAC;AAwFF;;iCAEiC;AACjC,wBAAgB,iBAAiB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAWzE;AAED;uEACuE;AACvE,wBAAgB,qBAAqB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAW7E;AAED;cACc;AACd,wBAAgB,sBAAsB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAS9E"}
+{"version":3,"file":"Chat.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAkB,MAAM,IAAI,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,kEAAkE;AAClE,eAAO,MAAM,WAAW,EAAE,SAAS,EAIlC,CAAC;AAEF;;8EAE8E;AAC9E,eAAO,MAAM,oBAAoB,EAAE,SAAS,EAiB3C,CAAC;AAsGF;;iCAEiC;AACjC,wBAAgB,iBAAiB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAWzE;AAED;uEACuE;AACvE,wBAAgB,qBAAqB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAW7E;AAED;cACc;AACd,wBAAgB,sBAAsB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAS9E"}

package/dist/data/chat/Chat.fixtures.js

@@ -0,0 +1,86 @@
+const MOCK_MODELS = [
+  { id: "anthropic/claude-sonnet-4-5", provider: "anthropic", label: "Claude Sonnet 4.5", reasoning: true, configured: true, contextWindow: 2e5 },
+  { id: "openai/gpt-4o", provider: "openai", label: "GPT-4o", reasoning: false, configured: true, contextWindow: 128e3 },
+  { id: "googleai/gemini-2.5-pro", provider: "googleai", label: "Gemini 2.5 Pro", reasoning: true, configured: false, contextWindow: 1048576 }
+];
+function streamChunks(chunks, delayMs) {
+  let i = 0;
+  return new ReadableStream({
+    pull(controller) {
+      if (i >= chunks.length) {
+        controller.close();
+        return;
+      }
+      const chunk = chunks[i++];
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          controller.enqueue(chunk);
+          resolve();
+        }, delayMs);
+      });
+    }
+  });
+}
+const TEXT_TURN = [
+  { type: "start" },
+  { type: "start-step" },
+  { type: "text-start", id: "t0" },
+  { type: "text-delta", id: "t0", delta: "Here is **markdown** with a list:\n\n" },
+  { type: "text-delta", id: "t0", delta: "- one\n- two\n- three" },
+  { type: "text-end", id: "t0" },
+  { type: "finish-step" },
+  {
+    type: "finish",
+    messageMetadata: {
+      usage: { inputTokens: 920, outputTokens: 280, totalTokens: 1200 },
+      contextTokens: 1200,
+      cost: 4e-3
+    }
+  }
+];
+const TOOL_TURN = [
+  { type: "start" },
+  { type: "start-step" },
+  {
+    type: "tool-input-available",
+    toolCallId: "call_1",
+    toolName: "listPods",
+    input: { namespace: "default", limit: 5 },
+    dynamic: true
+  },
+  {
+    type: "tool-output-available",
+    toolCallId: "call_1",
+    output: { count: 2, pods: ["api-7c9", "worker-1f2"] },
+    dynamic: true
+  },
+  { type: "text-start", id: "t1" },
+  { type: "text-delta", id: "t1", delta: "Found **2 pods** in `default`." },
+  { type: "text-end", id: "t1" },
+  { type: "finish-step" },
+  {
+    type: "finish",
+    messageMetadata: {
+      usage: { inputTokens: 2600, outputTokens: 800, totalTokens: 3400 },
+      contextTokens: 3400,
+      cost: 0.011
+    }
+  }
+];
+function mockChatTransport(delayMs = 120) {
+  let calls = 0;
+  return {
+    sendMessages() {
+      const chunks = calls++ === 0 ? TEXT_TURN : TOOL_TURN;
+      return Promise.resolve(streamChunks(chunks, delayMs));
+    },
+    reconnectToStream() {
+      return Promise.resolve(null);
+    }
+  };
+}
+export {
+  MOCK_MODELS,
+  mockChatTransport
+};
+//# sourceMappingURL=Chat.fixtures.js.map

package/dist/data/chat/Chat.fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.fixtures.js","sources":["../../../src/data/chat/Chat.fixtures.ts"],"sourcesContent":["import type { ChatTransport, UIMessage, UIMessageChunk } from \"ai\";\nimport type { ChatModel } from \"./types\";\n\n/** A sample model menu for stories driving the model selector. */\nexport const MOCK_MODELS: ChatModel[] = [\n  { id: \"anthropic/claude-sonnet-4-5\", provider: \"anthropic\", label: \"Claude Sonnet 4.5\", reasoning: true, configured: true, contextWindow: 200_000 },\n  { id: \"openai/gpt-4o\", provider: \"openai\", label: \"GPT-4o\", reasoning: false, configured: true, contextWindow: 128_000 },\n  { id: \"googleai/gemini-2.5-pro\", provider: \"googleai\", label: \"Gemini 2.5 Pro\", reasoning: true, configured: false, contextWindow: 1_048_576 },\n];\n\n/** A seeded conversation that already contains a completed tool call, so a\n *  story shows the collapsible tool-call panel (args → result) on load, without\n *  the user sending a message. clicky operations surface as dynamic tools. */\nexport const SAMPLE_TOOL_MESSAGES: UIMessage[] = [\n  { id: \"u1\", role: \"user\", parts: [{ type: \"text\", text: \"List the pods in default\" }] },\n  {\n    id: \"a1\",\n    role: \"assistant\",\n    parts: [\n      {\n        type: \"dynamic-tool\",\n        toolCallId: \"call_listPods\",\n        toolName: \"listPods\",\n        state: \"output-available\",\n        input: { namespace: \"default\", limit: 5 },\n        output: { count: 2, pods: [\"api-7c9\", \"worker-1f2\"] },\n      },\n      { type: \"text\", text: \"Found **2 pods** in `default`: `api-7c9` and `worker-1f2`.\" },\n    ],\n  },\n];\n\n/** Emits the given chunks as a ReadableStream, with a small delay between each\n *  so the UI visibly streams in Storybook. */\nfunction streamChunks(chunks: UIMessageChunk[], delayMs: number): ReadableStream<UIMessageChunk> {\n  let i = 0;\n  return new ReadableStream<UIMessageChunk>({\n    pull(controller) {\n      if (i >= chunks.length) {\n        controller.close();\n        return;\n      }\n      const chunk = chunks[i++];\n      return new Promise<void>((resolve) => {\n        setTimeout(() => {\n          controller.enqueue(chunk);\n          resolve();\n        }, delayMs);\n      });\n    },\n  });\n}\n\nconst TEXT_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"text-start\", id: \"t0\" },\n  { type: \"text-delta\", id: \"t0\", delta: \"Here is **markdown** with a list:\\n\\n\" },\n  { type: \"text-delta\", id: \"t0\", delta: \"- one\\n- two\\n- three\" },\n  { type: \"text-end\", id: \"t0\" },\n  { type: \"finish-step\" },\n  {\n    type: \"finish\",\n    messageMetadata: {\n      usage: { inputTokens: 920, outputTokens: 280, totalTokens: 1200 },\n      contextTokens: 1200,\n      cost: 0.004,\n    },\n  },\n];\n\nconst TOOL_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  {\n    type: \"tool-input-available\",\n    toolCallId: \"call_1\",\n    toolName: \"listPods\",\n    input: { namespace: \"default\", limit: 5 },\n    dynamic: true,\n  },\n  {\n    type: \"tool-output-available\",\n    toolCallId: \"call_1\",\n    output: { count: 2, pods: [\"api-7c9\", \"worker-1f2\"] },\n    dynamic: true,\n  },\n  { type: \"text-start\", id: \"t1\" },\n  { type: \"text-delta\", id: \"t1\", delta: \"Found **2 pods** in `default`.\" },\n  { type: \"text-end\", id: \"t1\" },\n  { type: \"finish-step\" },\n  {\n    type: \"finish\",\n    messageMetadata: {\n      usage: { inputTokens: 2600, outputTokens: 800, totalTokens: 3400 },\n      contextTokens: 3400,\n      cost: 0.011,\n    },\n  },\n];\n\nconst REASONING_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"reasoning-start\", id: \"r0\" },\n  { type: \"reasoning-delta\", id: \"r0\", delta: \"The user wants pods. I'll call listPods, then summarize.\" },\n  { type: \"reasoning-end\", id: \"r0\" },\n  { type: \"text-start\", id: \"t2\" },\n  { type: \"text-delta\", id: \"t2\", delta: \"Let me check the pods.\" },\n  { type: \"text-end\", id: \"t2\" },\n  { type: \"finish-step\" },\n  { type: \"finish\" },\n];\n\nconst APPROVAL_TURN: UIMessageChunk[] = [\n  { type: \"start\" },\n  { type: \"start-step\" },\n  { type: \"text-start\", id: \"t3\" },\n  { type: \"text-delta\", id: \"t3\", delta: \"This will restart the service.\" },\n  { type: \"text-end\", id: \"t3\" },\n  {\n    type: \"tool-input-available\",\n    toolCallId: \"call_restart\",\n    toolName: \"restartService\",\n    input: { service: \"api\", confirm: true },\n    dynamic: true,\n  },\n  { type: \"tool-approval-request\", approvalId: \"call_restart\", toolCallId: \"call_restart\" },\n  { type: \"finish-step\" },\n  { type: \"finish\" },\n];\n\n/** A mock ChatTransport that replies with a markdown text turn, then a tool\n *  round-trip turn on the next submission. Use in stories/tests to drive the\n *  Chat UI without a backend. */\nexport function mockChatTransport(delayMs = 120): ChatTransport<UIMessage> {\n  let calls = 0;\n  return {\n    sendMessages() {\n      const chunks = calls++ === 0 ? TEXT_TURN : TOOL_TURN;\n      return Promise.resolve(streamChunks(chunks, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n\n/** A mock transport whose first turn requests tool approval, and whose resume\n *  (after the user approves/denies) completes the tool and replies. */\nexport function mockApprovalTransport(delayMs = 120): ChatTransport<UIMessage> {\n  let calls = 0;\n  return {\n    sendMessages() {\n      const chunks = calls++ === 0 ? APPROVAL_TURN : TOOL_TURN;\n      return Promise.resolve(streamChunks(chunks, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n\n/** A mock transport that streams a reasoning (\"thinking\") block before its\n *  answer. */\nexport function mockReasoningTransport(delayMs = 120): ChatTransport<UIMessage> {\n  return {\n    sendMessages() {\n      return Promise.resolve(streamChunks(REASONING_TURN, delayMs));\n    },\n    reconnectToStream() {\n      return Promise.resolve(null);\n    },\n  };\n}\n"],"names":[],"mappings":"AAIO,MAAM,cAA2B;AAAA,EACtC,EAAE,IAAI,+BAA+B,UAAU,aAAa,OAAO,qBAAqB,WAAW,MAAM,YAAY,MAAM,eAAe,IAAA;AAAA,EAC1I,EAAE,IAAI,iBAAiB,UAAU,UAAU,OAAO,UAAU,WAAW,OAAO,YAAY,MAAM,eAAe,MAAA;AAAA,EAC/G,EAAE,IAAI,2BAA2B,UAAU,YAAY,OAAO,kBAAkB,WAAW,MAAM,YAAY,OAAO,eAAe,QAAA;AACrI;AA0BA,SAAS,aAAa,QAA0B,SAAiD;AAC/F,MAAI,IAAI;AACR,SAAO,IAAI,eAA+B;AAAA,IACxC,KAAK,YAAY;AACf,UAAI,KAAK,OAAO,QAAQ;AACtB,mBAAW,MAAA;AACX;AAAA,MACF;AACA,YAAM,QAAQ,OAAO,GAAG;AACxB,aAAO,IAAI,QAAc,CAAC,YAAY;AACpC,mBAAW,MAAM;AACf,qBAAW,QAAQ,KAAK;AACxB,kBAAA;AAAA,QACF,GAAG,OAAO;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EAAA,CACD;AACH;AAEA,MAAM,YAA8B;AAAA,EAClC,EAAE,MAAM,QAAA;AAAA,EACR,EAAE,MAAM,aAAA;AAAA,EACR,EAAE,MAAM,cAAc,IAAI,KAAA;AAAA,EAC1B,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,wCAAA;AAAA,EACvC,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,wBAAA;AAAA,EACvC,EAAE,MAAM,YAAY,IAAI,KAAA;AAAA,EACxB,EAAE,MAAM,cAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,MACf,OAAO,EAAE,aAAa,KAAK,cAAc,KAAK,aAAa,KAAA;AAAA,MAC3D,eAAe;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,YAA8B;AAAA,EAClC,EAAE,MAAM,QAAA;AAAA,EACR,EAAE,MAAM,aAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO,EAAE,WAAW,WAAW,OAAO,EAAA;AAAA,IACtC,SAAS;AAAA,EAAA;AAAA,EAEX;AAAA,IACE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,WAAW,YAAY,EAAA;AAAA,IAClD,SAAS;AAAA,EAAA;AAAA,EAEX,EAAE,MAAM,cAAc,IAAI,KAAA;AAAA,EAC1B,EAAE,MAAM,cAAc,IAAI,MAAM,OAAO,iCAAA;AAAA,EACvC,EAAE,MAAM,YAAY,IAAI,KAAA;AAAA,EACxB,EAAE,MAAM,cAAA;AAAA,EACR;AAAA,IACE,MAAM;AAAA,IACN,iBAAiB;AAAA,MACf,OAAO,EAAE,aAAa,MAAM,cAAc,KAAK,aAAa,KAAA;AAAA,MAC5D,eAAe;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAoCO,SAAS,kBAAkB,UAAU,KAA+B;AACzE,MAAI,QAAQ;AACZ,SAAO;AAAA,IACL,eAAe;AACb,YAAM,SAAS,YAAY,IAAI,YAAY;AAC3C,aAAO,QAAQ,QAAQ,aAAa,QAAQ,OAAO,CAAC;AAAA,IACtD;AAAA,IACA,oBAAoB;AAClB,aAAO,QAAQ,QAAQ,IAAI;AAAA,IAC7B;AAAA,EAAA;AAEJ;"}

package/dist/data/chat/Chat.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from "react";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
@@ -7,6 +7,8 @@ import { Conversation } from "./Conversation.js";
 import { PromptInput } from "./PromptInput.js";
 import { Suggestions } from "./Suggestion.js";
 import { ModelSelector, EffortSelector } from "./ModelSelector.js";
+import { providerIcon } from "./provider-icons.js";
+import { ContextUsage } from "./ContextUsage.js";
 const DEFAULT_EFFORTS = ["low", "medium", "high"];
 function Chat({
   api = "/api/chat",
@@ -16,6 +18,7 @@ function Chat({
   reasoningEfforts = DEFAULT_EFFORTS,
   defaultReasoningEffort = "",
   onModelChange,
+  onUsage,
   suggestions,
   enableAttachments = false,
   toolApproval,
@@ -30,6 +33,7 @@ function Chat({
   const [models, setModels] = useState(modelsProp ?? []);
   const [model, setModel] = useState(defaultModel);
   const [effort, setEffort] = useState(defaultReasoningEffort);
+  const [usage, setUsage] = useState(null);
   useEffect(() => {
     if (modelsProp || !modelsApi) return;
     let cancelled = false;
@@ -64,13 +68,47 @@ function Chat({
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  const onUsageRef = useRef(onUsage);
+  onUsageRef.current = onUsage;
+  useEffect(() => {
+    var _a, _b;
+    if (status !== "ready") return;
+    const last = [...messages].reverse().find((m) => m.role === "assistant");
+    const meta = last == null ? void 0 : last.metadata;
+    if (!meta) return;
+    const cost = meta.threadCostUsd ?? meta.cost;
+    const snapshot = {
+      usedTokens: meta.contextTokens ?? ((_a = meta.usage) == null ? void 0 : _a.totalTokens) ?? 0,
+      maxTokens: (selectedModel == null ? void 0 : selectedModel.contextWindow) ?? 0,
+      messageCount: messages.length,
+      ...cost != null ? { cost } : {},
+      ...(selectedModel == null ? void 0 : selectedModel.label) ? { modelLabel: selectedModel.label } : {}
+    };
+    setUsage(snapshot);
+    (_b = onUsageRef.current) == null ? void 0 : _b.call(onUsageRef, snapshot);
+  }, [messages, status, selectedModel]);
   const onModelSelect = (id) => {
     setModel(id);
     onModelChange == null ? void 0 : onModelChange(id);
   };
-  const toolbar = models.length > 0 || showEffort ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  const ModelGlyph = providerIcon(selectedModel == null ? void 0 : selectedModel.provider);
+  const toolbar = models.length > 0 || showEffort || usage && usage.maxTokens > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
     /* @__PURE__ */ jsx(ModelSelector, { models, value: model, onChange: onModelSelect }),
-    showEffort && /* @__PURE__ */ jsx(EffortSelector, { efforts: reasoningEfforts, value: effort, onChange: setEffort })
+    showEffort && /* @__PURE__ */ jsx(EffortSelector, { efforts: reasoningEfforts, value: effort, onChange: setEffort }),
+    usage && usage.maxTokens > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(
+        ContextUsage,
+        {
+          usedTokens: usage.usedTokens,
+          maxTokens: usage.maxTokens,
+          ...usage.messageCount != null ? { messageCount: usage.messageCount } : {},
+          ...usage.cost != null ? { cost: usage.cost } : {},
+          ...usage.modelLabel ? { modelLabel: usage.modelLabel } : {},
+          ...ModelGlyph ? { modelIcon: ModelGlyph } : {}
+        }
+      )
+    ] })
   ] }) : void 0;
   const empty = messages.length === 0 && (emptyState || (suggestions == null ? void 0 : suggestions.length)) ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     emptyState,