@tanstack/ai-devtools-core 0.0.1

package/dist/esm/components/conversation/ChunkItem.js

@@ -0,0 +1,247 @@
+import { template, insert, createComponent, effect, className, memo, setStyleProperty, setAttribute, delegateEvents } from "solid-js/web";
+import { createSignal, Show } from "solid-js";
+import { JsonTree } from "@tanstack/devtools-ui";
+import { useStyles } from "../../styles/use-styles.js";
+import { formatTimestamp, formatDuration, getChunkTypeColor } from "../utils/format.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span style=margin-left:4px;opacity:0.7>(<!> chunks)`), _tmpl$2 = /* @__PURE__ */ template(`<div>🔧 `), _tmpl$3 = /* @__PURE__ */ template(`<div>`), _tmpl$4 = /* @__PURE__ */ template(`<div>❌ `), _tmpl$5 = /* @__PURE__ */ template(`<div>✓ `), _tmpl$6 = /* @__PURE__ */ template(`<div>Input: `), _tmpl$7 = /* @__PURE__ */ template(`<div><div>⚠️ Approval Required`), _tmpl$8 = /* @__PURE__ */ template(`<div><div><span>📤 Tool Arguments</span></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<span>⏱️ `), _tmpl$0 = /* @__PURE__ */ template(`<div><div><span>✓ Tool Result</span></div><div>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div><div>#</div><div><div></div><div></div></div><div></div><button>{}`);
+const ChunkItem = (props) => {
+  const styles = useStyles();
+  const [showRaw, setShowRaw] = createSignal(false);
+  const isLarge = () => props.variant === "large";
+  const chunkCount = () => props.chunk.chunkCount || 1;
+  const parseToolArguments = () => {
+    try {
+      return JSON.parse(props.chunk.arguments || "{}");
+    } catch {
+      return {
+        raw: props.chunk.arguments
+      };
+    }
+  };
+  const parseToolResult = () => {
+    try {
+      if (typeof props.chunk.result === "string") {
+        return JSON.parse(props.chunk.result);
+      }
+      return props.chunk.result;
+    } catch {
+      return {
+        raw: props.chunk.result
+      };
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    _el$3.firstChild;
+    var _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$12 = _el$9.nextSibling, _el$13 = _el$12.nextSibling;
+    insert(_el$3, () => props.index + 1, null);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return chunkCount() > 1;
+      },
+      get children() {
+        var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+        _el$8.nextSibling;
+        insert(_el$5, chunkCount, _el$8);
+        return _el$5;
+      }
+    }), null);
+    insert(_el$1, () => props.chunk.type);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return props.chunk.toolName;
+      },
+      get children() {
+        var _el$10 = _tmpl$2();
+        _el$10.firstChild;
+        insert(_el$10, () => props.chunk.toolName, null);
+        effect(() => className(_el$10, isLarge() ? styles().conversationDetails.chunkToolBadgeLarge : styles().conversationDetails.chunkToolBadge));
+        return _el$10;
+      }
+    }), _el$12);
+    insert(_el$12, () => formatTimestamp(props.chunk.timestamp));
+    _el$13.$$click = () => setShowRaw(!showRaw());
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !showRaw();
+      },
+      get children() {
+        return [createComponent(Show, {
+          get when() {
+            return props.chunk.content || props.chunk.delta;
+          },
+          get children() {
+            var _el$14 = _tmpl$3();
+            insert(_el$14, () => props.chunk.content);
+            effect(() => className(_el$14, isLarge() ? styles().conversationDetails.chunkContentLarge : styles().conversationDetails.chunkContent));
+            return _el$14;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return props.chunk.error;
+          },
+          get children() {
+            var _el$15 = _tmpl$4();
+            _el$15.firstChild;
+            insert(_el$15, () => props.chunk.error, null);
+            effect(() => className(_el$15, isLarge() ? styles().conversationDetails.chunkErrorLarge : styles().conversationDetails.chunkError));
+            return _el$15;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return props.chunk.finishReason;
+          },
+          get children() {
+            var _el$17 = _tmpl$5();
+            _el$17.firstChild;
+            insert(_el$17, (() => {
+              var _c$ = memo(() => !!isLarge());
+              return () => _c$() ? `Finish: ${props.chunk.finishReason}` : props.chunk.finishReason;
+            })(), null);
+            effect(() => className(_el$17, isLarge() ? styles().conversationDetails.chunkFinishLarge : styles().conversationDetails.chunkFinish));
+            return _el$17;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return props.chunk.type === "approval";
+          },
+          get children() {
+            var _el$20 = _tmpl$7(), _el$21 = _el$20.firstChild;
+            insert(_el$20, createComponent(Show, {
+              get when() {
+                return props.chunk.input;
+              },
+              get children() {
+                var _el$22 = _tmpl$6();
+                _el$22.firstChild;
+                insert(_el$22, () => JSON.stringify(props.chunk.input, null, 2), null);
+                effect(() => className(_el$22, isLarge() ? styles().conversationDetails.chunkApprovalInputLarge : styles().conversationDetails.chunkApprovalInput));
+                return _el$22;
+              }
+            }), null);
+            effect((_p$) => {
+              var _v$ = isLarge() ? styles().conversationDetails.chunkApprovalLarge : styles().conversationDetails.chunkApproval, _v$2 = isLarge() ? styles().conversationDetails.chunkApprovalTitleLarge : styles().conversationDetails.chunkApprovalTitle;
+              _v$ !== _p$.e && className(_el$20, _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$21, _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$20;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return memo(() => props.chunk.type === "tool_call")() && props.chunk.arguments;
+          },
+          get children() {
+            var _el$24 = _tmpl$8(), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling;
+            insert(_el$27, createComponent(JsonTree, {
+              get value() {
+                return parseToolArguments();
+              },
+              defaultExpansionDepth: 2,
+              copyable: true
+            }));
+            effect((_p$) => {
+              var _v$3 = styles().conversationDetails.chunkToolCall, _v$4 = styles().conversationDetails.chunkToolCallHeader, _v$5 = styles().conversationDetails.chunkToolCallTitle, _v$6 = styles().conversationDetails.toolJsonContainer;
+              _v$3 !== _p$.e && className(_el$24, _p$.e = _v$3);
+              _v$4 !== _p$.t && className(_el$25, _p$.t = _v$4);
+              _v$5 !== _p$.a && className(_el$26, _p$.a = _v$5);
+              _v$6 !== _p$.o && className(_el$27, _p$.o = _v$6);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0
+            });
+            return _el$24;
+          }
+        }), createComponent(Show, {
+          get when() {
+            return memo(() => props.chunk.type === "tool_result")() && props.chunk.result !== void 0;
+          },
+          get children() {
+            var _el$28 = _tmpl$0(), _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$33 = _el$29.nextSibling;
+            insert(_el$29, createComponent(Show, {
+              get when() {
+                return memo(() => props.chunk.duration !== void 0)() && props.chunk.duration > 0;
+              },
+              get children() {
+                var _el$31 = _tmpl$9();
+                _el$31.firstChild;
+                insert(_el$31, () => formatDuration(props.chunk.duration), null);
+                effect(() => className(_el$31, styles().conversationDetails.durationBadge));
+                return _el$31;
+              }
+            }), null);
+            insert(_el$33, createComponent(JsonTree, {
+              get value() {
+                return parseToolResult();
+              },
+              defaultExpansionDepth: 2,
+              copyable: true
+            }));
+            effect((_p$) => {
+              var _v$7 = styles().conversationDetails.chunkToolResult, _v$8 = styles().conversationDetails.chunkToolResultHeader, _v$9 = styles().conversationDetails.chunkToolResultTitle, _v$0 = styles().conversationDetails.toolJsonContainer;
+              _v$7 !== _p$.e && className(_el$28, _p$.e = _v$7);
+              _v$8 !== _p$.t && className(_el$29, _p$.t = _v$8);
+              _v$9 !== _p$.a && className(_el$30, _p$.a = _v$9);
+              _v$0 !== _p$.o && className(_el$33, _p$.o = _v$0);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0
+            });
+            return _el$28;
+          }
+        })];
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return showRaw();
+      },
+      get children() {
+        var _el$34 = _tmpl$3();
+        insert(_el$34, () => JSON.stringify(props.chunk, null, 2));
+        effect(() => className(_el$34, isLarge() ? styles().conversationDetails.rawJsonLarge : styles().conversationDetails.rawJson));
+        return _el$34;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$1 = isLarge() ? styles().conversationDetails.chunkItemLarge : styles().conversationDetails.chunkItem, _v$10 = isLarge() ? styles().conversationDetails.chunkHeaderLarge : styles().conversationDetails.chunkHeader, _v$11 = isLarge() ? styles().conversationDetails.chunkNumberLarge : styles().conversationDetails.chunkNumber, _v$12 = isLarge() ? styles().conversationDetails.chunkTypeBadgeLarge : styles().conversationDetails.chunkTypeBadge, _v$13 = isLarge() ? styles().conversationDetails.chunkTypeDotLarge : styles().conversationDetails.chunkTypeDot, _v$14 = getChunkTypeColor(props.chunk.type), _v$15 = isLarge() ? styles().conversationDetails.chunkTypeLabelLarge : styles().conversationDetails.chunkTypeLabel, _v$16 = isLarge() ? styles().conversationDetails.chunkTimestampLarge : styles().conversationDetails.chunkTimestamp, _v$17 = `${isLarge() ? styles().conversationDetails.rawJsonButtonLarge : styles().conversationDetails.rawJsonButton} ${showRaw() ? styles().conversationDetails.rawJsonButtonActive : styles().conversationDetails.rawJsonButtonInactive}`, _v$18 = showRaw() ? "Show formatted" : "Show raw JSON";
+      _v$1 !== _p$.e && className(_el$, _p$.e = _v$1);
+      _v$10 !== _p$.t && className(_el$2, _p$.t = _v$10);
+      _v$11 !== _p$.a && className(_el$3, _p$.a = _v$11);
+      _v$12 !== _p$.o && className(_el$9, _p$.o = _v$12);
+      _v$13 !== _p$.i && className(_el$0, _p$.i = _v$13);
+      _v$14 !== _p$.n && setStyleProperty(_el$0, "background", _p$.n = _v$14);
+      _v$15 !== _p$.s && className(_el$1, _p$.s = _v$15);
+      _v$16 !== _p$.h && className(_el$12, _p$.h = _v$16);
+      _v$17 !== _p$.r && className(_el$13, _p$.r = _v$17);
+      _v$18 !== _p$.d && setAttribute(_el$13, "title", _p$.d = _v$18);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  ChunkItem
+};
+//# sourceMappingURL=ChunkItem.js.map

package/dist/esm/components/conversation/ChunkItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChunkItem.js","sources":["../../../../src/components/conversation/ChunkItem.tsx"],"sourcesContent":["import { Show, createSignal } from 'solid-js'\nimport { JsonTree } from '@tanstack/devtools-ui'\nimport { useStyles } from '../../styles/use-styles'\nimport { formatDuration, formatTimestamp, getChunkTypeColor } from '../utils'\nimport type { Component } from 'solid-js'\nimport type { Chunk } from '../../store/ai-store'\n\ninterface ChunkItemProps {\n  chunk: Chunk\n  index: number\n  variant?: 'small' | 'large'\n}\n\nexport const ChunkItem: Component<ChunkItemProps> = (props) => {\n  const styles = useStyles()\n  const [showRaw, setShowRaw] = createSignal(false)\n  const isLarge = () => props.variant === 'large'\n  const chunkCount = () => props.chunk.chunkCount || 1\n\n  const parseToolArguments = (): Record<string, unknown> => {\n    try {\n      return JSON.parse(props.chunk.arguments || '{}') as Record<\n        string,\n        unknown\n      >\n    } catch {\n      return { raw: props.chunk.arguments }\n    }\n  }\n\n  const parseToolResult = (): Record<string, unknown> => {\n    try {\n      if (typeof props.chunk.result === 'string') {\n        return JSON.parse(props.chunk.result) as Record<string, unknown>\n      }\n      return props.chunk.result as Record<string, unknown>\n    } catch {\n      return { raw: props.chunk.result }\n    }\n  }\n\n  return (\n    <div\n      class={\n        isLarge()\n          ? styles().conversationDetails.chunkItemLarge\n          : styles().conversationDetails.chunkItem\n      }\n    >\n      {/* Chunk Header */}\n      <div\n        class={\n          isLarge()\n            ? styles().conversationDetails.chunkHeaderLarge\n            : styles().conversationDetails.chunkHeader\n        }\n      >\n        {/* Chunk Number */}\n        <div\n          class={\n            isLarge()\n              ? styles().conversationDetails.chunkNumberLarge\n              : styles().conversationDetails.chunkNumber\n          }\n        >\n          #{props.index + 1}\n          <Show when={chunkCount() > 1}>\n            <span style={{ 'margin-left': '4px', opacity: 0.7 }}>\n              ({chunkCount()} chunks)\n            </span>\n          </Show>\n        </div>\n\n        {/* Type Badge */}\n        <div\n          class={\n            isLarge()\n              ? styles().conversationDetails.chunkTypeBadgeLarge\n              : styles().conversationDetails.chunkTypeBadge\n          }\n        >\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkTypeDotLarge\n                : styles().conversationDetails.chunkTypeDot\n            }\n            style={{ background: getChunkTypeColor(props.chunk.type) }}\n          />\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkTypeLabelLarge\n                : styles().conversationDetails.chunkTypeLabel\n            }\n          >\n            {props.chunk.type}\n          </div>\n        </div>\n\n        {/* Tool Name Badge */}\n        <Show when={props.chunk.toolName}>\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkToolBadgeLarge\n                : styles().conversationDetails.chunkToolBadge\n            }\n          >\n            🔧 {props.chunk.toolName}\n          </div>\n        </Show>\n\n        {/* Timestamp */}\n        <div\n          class={\n            isLarge()\n              ? styles().conversationDetails.chunkTimestampLarge\n              : styles().conversationDetails.chunkTimestamp\n          }\n        >\n          {formatTimestamp(props.chunk.timestamp)}\n        </div>\n\n        {/* Toggle Raw JSON Button */}\n        <button\n          onClick={() => setShowRaw(!showRaw())}\n          class={`${\n            isLarge()\n              ? styles().conversationDetails.rawJsonButtonLarge\n              : styles().conversationDetails.rawJsonButton\n          } ${\n            showRaw()\n              ? styles().conversationDetails.rawJsonButtonActive\n              : styles().conversationDetails.rawJsonButtonInactive\n          }`}\n          title={showRaw() ? 'Show formatted' : 'Show raw JSON'}\n        >\n          {'{}'}\n        </button>\n      </div>\n\n      {/* Chunk Content */}\n      <Show when={!showRaw()}>\n        <Show when={props.chunk.content || props.chunk.delta}>\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkContentLarge\n                : styles().conversationDetails.chunkContent\n            }\n          >\n            {props.chunk.content}\n          </div>\n        </Show>\n        <Show when={props.chunk.error}>\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkErrorLarge\n                : styles().conversationDetails.chunkError\n            }\n          >\n            ❌ {props.chunk.error}\n          </div>\n        </Show>\n        <Show when={props.chunk.finishReason}>\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkFinishLarge\n                : styles().conversationDetails.chunkFinish\n            }\n          >\n            ✓{' '}\n            {isLarge()\n              ? `Finish: ${props.chunk.finishReason}`\n              : props.chunk.finishReason}\n          </div>\n        </Show>\n        <Show when={props.chunk.type === 'approval'}>\n          <div\n            class={\n              isLarge()\n                ? styles().conversationDetails.chunkApprovalLarge\n                : styles().conversationDetails.chunkApproval\n            }\n          >\n            <div\n              class={\n                isLarge()\n                  ? styles().conversationDetails.chunkApprovalTitleLarge\n                  : styles().conversationDetails.chunkApprovalTitle\n              }\n            >\n              ⚠️ Approval Required\n            </div>\n            <Show when={props.chunk.input}>\n              <div\n                class={\n                  isLarge()\n                    ? styles().conversationDetails.chunkApprovalInputLarge\n                    : styles().conversationDetails.chunkApprovalInput\n                }\n              >\n                Input: {JSON.stringify(props.chunk.input, null, 2)}\n              </div>\n            </Show>\n          </div>\n        </Show>\n        <Show when={props.chunk.type === 'tool_call' && props.chunk.arguments}>\n          <div class={styles().conversationDetails.chunkToolCall}>\n            <div class={styles().conversationDetails.chunkToolCallHeader}>\n              <span class={styles().conversationDetails.chunkToolCallTitle}>\n                📤 Tool Arguments\n              </span>\n            </div>\n            <div class={styles().conversationDetails.toolJsonContainer}>\n              <JsonTree\n                value={parseToolArguments()}\n                defaultExpansionDepth={2}\n                copyable\n              />\n            </div>\n          </div>\n        </Show>\n        <Show\n          when={\n            props.chunk.type === 'tool_result' &&\n            props.chunk.result !== undefined\n          }\n        >\n          <div class={styles().conversationDetails.chunkToolResult}>\n            <div class={styles().conversationDetails.chunkToolResultHeader}>\n              <span class={styles().conversationDetails.chunkToolResultTitle}>\n                ✓ Tool Result\n              </span>\n              <Show\n                when={\n                  props.chunk.duration !== undefined && props.chunk.duration > 0\n                }\n              >\n                <span class={styles().conversationDetails.durationBadge}>\n                  ⏱️ {formatDuration(props.chunk.duration)}\n                </span>\n              </Show>\n            </div>\n            <div class={styles().conversationDetails.toolJsonContainer}>\n              <JsonTree\n                value={parseToolResult()}\n                defaultExpansionDepth={2}\n                copyable\n              />\n            </div>\n          </div>\n        </Show>\n      </Show>\n\n      {/* Raw JSON View */}\n      <Show when={showRaw()}>\n        <div\n          class={\n            isLarge()\n              ? styles().conversationDetails.rawJsonLarge\n              : styles().conversationDetails.rawJson\n          }\n        >\n          {JSON.stringify(props.chunk, null, 2)}\n        </div>\n      </Show>\n    </div>\n  )\n}\n"],"names":["ChunkItem","props","styles","useStyles","showRaw","setShowRaw","createSignal","isLarge","variant","chunkCount","chunk","parseToolArguments","JSON","parse","arguments","raw","parseToolResult","result","_el$","_tmpl$1","_el$2","firstChild","_el$3","_el$9","nextSibling","_el$0","_el$1","_el$12","_el$13","_$insert","index","_$createComponent","Show","when","children","_el$5","_tmpl$","_el$6","_el$8","type","toolName","_el$10","_tmpl$2","_$effect","_$className","conversationDetails","chunkToolBadgeLarge","chunkToolBadge","formatTimestamp","timestamp","$$click","content","delta","_el$14","_tmpl$3","chunkContentLarge","chunkContent","error","_el$15","_tmpl$4","chunkErrorLarge","chunkError","finishReason","_el$17","_tmpl$5","_c$","_$memo","chunkFinishLarge","chunkFinish","_el$20","_tmpl$7","_el$21","input","_el$22","_tmpl$6","stringify","chunkApprovalInputLarge","chunkApprovalInput","_p$","_v$","chunkApprovalLarge","chunkApproval","_v$2","chunkApprovalTitleLarge","chunkApprovalTitle","e","t","undefined","_el$24","_tmpl$8","_el$25","_el$26","_el$27","JsonTree","value","defaultExpansionDepth","copyable","_v$3","chunkToolCall","_v$4","chunkToolCallHeader","_v$5","chunkToolCallTitle","_v$6","toolJsonContainer","a","o","_el$28","_tmpl$0","_el$29","_el$30","_el$33","duration","_el$31","_tmpl$9","formatDuration","durationBadge","_v$7","chunkToolResult","_v$8","chunkToolResultHeader","_v$9","chunkToolResultTitle","_v$0","_el$34","rawJsonLarge","rawJson","_v$1","chunkItemLarge","chunkItem","_v$10","chunkHeaderLarge","chunkHeader","_v$11","chunkNumberLarge","chunkNumber","_v$12","chunkTypeBadgeLarge","chunkTypeBadge","_v$13","chunkTypeDotLarge","chunkTypeDot","_v$14","getChunkTypeColor","_v$15","chunkTypeLabelLarge","chunkTypeLabel","_v$16","chunkTimestampLarge","chunkTimestamp","_v$17","rawJsonButtonLarge","rawJsonButton","rawJsonButtonActive","rawJsonButtonInactive","_v$18","i","n","_$setStyleProperty","s","h","r","d","_$setAttribute","_$delegateEvents"],"mappings":"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"}

package/dist/esm/components/conversation/ChunksCollapsible.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'solid-js';
+import { Chunk } from '../../store/ai-store.js';
+interface ChunksCollapsibleProps {
+    chunks: Array<Chunk>;
+}
+export declare const ChunksCollapsible: Component<ChunksCollapsibleProps>;
+export {};

package/dist/esm/components/conversation/ChunksCollapsible.js

@@ -0,0 +1,77 @@
+import { template, insert, createComponent, effect, className, setAttribute } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+import { ChunkItem } from "./ChunkItem.js";
+import { ChunkBadges } from "./ChunkBadges.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<details><summary><div><span>▶</span><span>📦 <!> chunks</span></div></summary><div><div>`);
+const ChunksCollapsible = (props) => {
+  const styles = useStyles();
+  const accumulatedContent = () => props.chunks.filter((c) => c.type === "content" && (c.content || c.delta)).map((c) => c.delta || c.content).join("");
+  const totalRawChunks = () => props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+    _el$8.nextSibling;
+    var _el$0 = _el$2.nextSibling, _el$1 = _el$0.firstChild;
+    insert(_el$5, totalRawChunks, _el$8);
+    insert(_el$3, createComponent(ChunkBadges, {
+      get chunks() {
+        return props.chunks;
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return accumulatedContent();
+      },
+      get children() {
+        var _el$9 = _tmpl$();
+        insert(_el$9, accumulatedContent);
+        effect((_p$) => {
+          var _v$ = styles().conversationDetails.contentPreview, _v$2 = accumulatedContent();
+          _v$ !== _p$.e && className(_el$9, _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$9, "title", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$9;
+      }
+    }), null);
+    insert(_el$1, createComponent(For, {
+      get each() {
+        return props.chunks;
+      },
+      children: (chunk, index) => createComponent(ChunkItem, {
+        chunk,
+        get index() {
+          return index();
+        },
+        variant: "small"
+      })
+    }));
+    effect((_p$) => {
+      var _v$3 = styles().conversationDetails.chunksDetails, _v$4 = styles().conversationDetails.chunksSummary, _v$5 = styles().conversationDetails.chunksSummaryRow, _v$6 = styles().conversationDetails.chunksSummaryArrow, _v$7 = styles().conversationDetails.chunksSummaryTitle, _v$8 = styles().conversationDetails.chunksContainer, _v$9 = styles().conversationDetails.chunksList;
+      _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$3, _p$.a = _v$5);
+      _v$6 !== _p$.o && className(_el$4, _p$.o = _v$6);
+      _v$7 !== _p$.i && className(_el$5, _p$.i = _v$7);
+      _v$8 !== _p$.n && className(_el$0, _p$.n = _v$8);
+      _v$9 !== _p$.s && className(_el$1, _p$.s = _v$9);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$;
+  })();
+};
+export {
+  ChunksCollapsible
+};
+//# sourceMappingURL=ChunksCollapsible.js.map

package/dist/esm/components/conversation/ChunksCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChunksCollapsible.js","sources":["../../../../src/components/conversation/ChunksCollapsible.tsx"],"sourcesContent":["import { For, Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport { ChunkItem } from './ChunkItem'\nimport { ChunkBadges } from './ChunkBadges'\nimport type { Component } from 'solid-js'\nimport type { Chunk } from '../../store/ai-store'\n\ninterface ChunksCollapsibleProps {\n  chunks: Array<Chunk>\n}\n\nexport const ChunksCollapsible: Component<ChunksCollapsibleProps> = (props) => {\n  const styles = useStyles()\n\n  const accumulatedContent = () =>\n    props.chunks\n      .filter((c) => c.type === 'content' && (c.content || c.delta))\n      .map((c) => c.delta || c.content)\n      .join('')\n\n  // Total raw chunks = sum of all chunkCounts\n  const totalRawChunks = () =>\n    props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)\n\n  return (\n    <details class={styles().conversationDetails.chunksDetails}>\n      <summary class={styles().conversationDetails.chunksSummary}>\n        <div class={styles().conversationDetails.chunksSummaryRow}>\n          <span class={styles().conversationDetails.chunksSummaryArrow}>\n            ▶\n          </span>\n          <span class={styles().conversationDetails.chunksSummaryTitle}>\n            📦 {totalRawChunks()} chunks\n          </span>\n          <ChunkBadges chunks={props.chunks} />\n        </div>\n        {/* Accumulated Content Preview */}\n        <Show when={accumulatedContent()}>\n          <div\n            class={styles().conversationDetails.contentPreview}\n            title={accumulatedContent()}\n          >\n            {accumulatedContent()}\n          </div>\n        </Show>\n      </summary>\n      <div class={styles().conversationDetails.chunksContainer}>\n        <div class={styles().conversationDetails.chunksList}>\n          <For each={props.chunks}>\n            {(chunk, index) => (\n              <ChunkItem chunk={chunk} index={index()} variant=\"small\" />\n            )}\n          </For>\n        </div>\n      </div>\n    </details>\n  )\n}\n"],"names":["ChunksCollapsible","props","styles","useStyles","accumulatedContent","chunks","filter","c","type","content","delta","map","join","totalRawChunks","reduce","sum","chunkCount","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$8","_el$0","_el$1","_$insert","_$createComponent","ChunkBadges","Show","when","children","_el$9","_tmpl$","_$effect","_p$","_v$","conversationDetails","contentPreview","_v$2","e","_$className","t","_$setAttribute","undefined","For","each","chunk","index","ChunkItem","variant","_v$3","chunksDetails","_v$4","chunksSummary","_v$5","chunksSummaryRow","_v$6","chunksSummaryArrow","_v$7","chunksSummaryTitle","_v$8","chunksContainer","_v$9","chunksList","a","o","i","n","s"],"mappings":"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"}

package/dist/esm/components/conversation/ChunksTab.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'solid-js';
+import { Chunk, Message } from '../../store/ai-store.js';
+interface ChunksTabProps {
+    chunks: Array<Chunk>;
+    messages?: Array<Message>;
+}
+export declare const ChunksTab: Component<ChunksTabProps>;
+export {};

package/dist/esm/components/conversation/ChunksTab.js

@@ -0,0 +1,87 @@
+import { createComponent, template, insert, effect, className } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+import { MessageGroup } from "./MessageGroup.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div><div><div>Stream Responses</div><div> chunks · <!> messages</div></div><div>Grouped by message ID</div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>No chunks yet`);
+const ChunksTab = (props) => {
+  const styles = useStyles();
+  const usageByMessageId = () => {
+    const map = /* @__PURE__ */ new Map();
+    props.messages?.forEach((msg) => {
+      if (msg.usage) {
+        map.set(msg.id, msg.usage);
+      }
+    });
+    return map;
+  };
+  const groupedChunks = () => {
+    const groups = /* @__PURE__ */ new Map();
+    props.chunks.forEach((chunk) => {
+      const key = chunk.messageId || "no-message-id";
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key).push(chunk);
+    });
+    return Array.from(groups.entries());
+  };
+  const totalRawChunks = () => props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  return createComponent(Show, {
+    get when() {
+      return props.chunks.length > 0;
+    },
+    get fallback() {
+      return (() => {
+        var _el$1 = _tmpl$2();
+        effect(() => className(_el$1, styles().conversationDetails.noChunks));
+        return _el$1;
+      })();
+    },
+    get children() {
+      var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+      _el$8.nextSibling;
+      var _el$9 = _el$3.nextSibling, _el$0 = _el$2.nextSibling;
+      insert(_el$5, totalRawChunks, _el$6);
+      insert(_el$5, () => groupedChunks().length, _el$8);
+      insert(_el$0, createComponent(For, {
+        get each() {
+          return groupedChunks();
+        },
+        children: ([messageId, chunks], groupIndex) => createComponent(MessageGroup, {
+          messageId,
+          chunks,
+          get groupIndex() {
+            return groupIndex();
+          },
+          get usage() {
+            return usageByMessageId().get(messageId);
+          }
+        })
+      }));
+      effect((_p$) => {
+        var _v$ = styles().conversationDetails.streamContainer, _v$2 = styles().conversationDetails.streamHeader, _v$3 = styles().conversationDetails.streamHeaderRow, _v$4 = styles().conversationDetails.streamTitle, _v$5 = `${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeCount}`, _v$6 = styles().conversationDetails.streamSubtitle, _v$7 = styles().conversationDetails.messageGroups;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+        _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+        _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+        _v$6 !== _p$.n && className(_el$9, _p$.n = _v$6);
+        _v$7 !== _p$.s && className(_el$0, _p$.s = _v$7);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0
+      });
+      return _el$;
+    }
+  });
+};
+export {
+  ChunksTab
+};
+//# sourceMappingURL=ChunksTab.js.map

package/dist/esm/components/conversation/ChunksTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChunksTab.js","sources":["../../../../src/components/conversation/ChunksTab.tsx"],"sourcesContent":["import { For, Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport { MessageGroup } from './MessageGroup'\nimport type { Component } from 'solid-js'\nimport type { Chunk, Message } from '../../store/ai-store'\n\ninterface ChunksTabProps {\n  chunks: Array<Chunk>\n  messages?: Array<Message>\n}\n\nexport const ChunksTab: Component<ChunksTabProps> = (props) => {\n  const styles = useStyles()\n\n  // Create a map of messageId to usage for quick lookup\n  const usageByMessageId = () => {\n    const map = new Map<string, Message['usage']>()\n    props.messages?.forEach((msg) => {\n      if (msg.usage) {\n        map.set(msg.id, msg.usage)\n      }\n    })\n    return map\n  }\n\n  const groupedChunks = () => {\n    const groups = new Map<string, Array<Chunk>>()\n\n    props.chunks.forEach((chunk) => {\n      const key = chunk.messageId || 'no-message-id'\n      if (!groups.has(key)) {\n        groups.set(key, [])\n      }\n      groups.get(key)!.push(chunk)\n    })\n\n    return Array.from(groups.entries())\n  }\n\n  // Calculate total raw chunks (sum of all chunkCounts)\n  const totalRawChunks = () =>\n    props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)\n\n  return (\n    <Show\n      when={props.chunks.length > 0}\n      fallback={\n        <div class={styles().conversationDetails.noChunks}>No chunks yet</div>\n      }\n    >\n      <div class={styles().conversationDetails.streamContainer}>\n        {/* Stream Header */}\n        <div class={styles().conversationDetails.streamHeader}>\n          <div class={styles().conversationDetails.streamHeaderRow}>\n            <div class={styles().conversationDetails.streamTitle}>\n              Stream Responses\n            </div>\n            <div\n              class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeCount}`}\n            >\n              {totalRawChunks()} chunks · {groupedChunks().length} messages\n            </div>\n          </div>\n          <div class={styles().conversationDetails.streamSubtitle}>\n            Grouped by message ID\n          </div>\n        </div>\n\n        {/* Message Groups */}\n        <div class={styles().conversationDetails.messageGroups}>\n          <For each={groupedChunks()}>\n            {([messageId, chunks], groupIndex) => (\n              <MessageGroup\n                messageId={messageId}\n                chunks={chunks}\n                groupIndex={groupIndex()}\n                usage={usageByMessageId().get(messageId)}\n              />\n            )}\n          </For>\n        </div>\n      </div>\n    </Show>\n  )\n}\n"],"names":["ChunksTab","props","styles","useStyles","usageByMessageId","map","Map","messages","forEach","msg","usage","set","id","groupedChunks","groups","chunks","chunk","key","messageId","has","get","push","Array","from","entries","totalRawChunks","reduce","sum","c","chunkCount","_$createComponent","Show","when","length","fallback","_el$1","_tmpl$2","_$effect","_$className","conversationDetails","noChunks","children","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$8","_el$9","_el$0","_$insert","For","each","groupIndex","MessageGroup","_p$","_v$","streamContainer","_v$2","streamHeader","_v$3","streamHeaderRow","_v$4","streamTitle","_v$5","chunkBadge","chunkBadgeCount","_v$6","streamSubtitle","_v$7","messageGroups","e","t","a","o","i","n","s","undefined"],"mappings":"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"}

package/dist/esm/components/conversation/ConversationHeader.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'solid-js';
+import { Conversation } from '../../store/ai-context.js';
+interface ConversationHeaderProps {
+    conversation: Conversation;
+}
+export declare const ConversationHeader: Component<ConversationHeaderProps>;
+export {};