@tanstack/ai-devtools-core 0.0.1

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

@@ -0,0 +1,187 @@
+import { template, insert, createComponent, effect, className, memo } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+import { formatDuration } from "../utils/format.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>🔄 <!> iterations`), _tmpl$2 = /* @__PURE__ */ template(`<div><span>🎯 Tokens:</span><span>Prompt: </span><span>•</span><span>Completion: </span><span>•</span><span>Total: `), _tmpl$3 = /* @__PURE__ */ template(`<div><span>🔧</span><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div><span>⚙️ Options:</span><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><span>🏷️ Provider:</span><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><div><div><div></div><div></div></div><div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>`), _tmpl$8 = /* @__PURE__ */ template(`<span>: `);
+const ConversationHeader = (props) => {
+  const styles = useStyles();
+  const conv = () => props.conversation;
+  const toolNames = () => conv().toolNames ?? [];
+  const options = () => conv().options;
+  const providerOptions = () => conv().providerOptions;
+  const iterationCount = () => conv().iterationCount;
+  return (() => {
+    var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$0 = _el$3.nextSibling;
+    insert(_el$4, () => conv().label);
+    insert(_el$5, () => conv().status);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return memo(() => iterationCount() !== void 0)() && iterationCount() > 1;
+      },
+      get children() {
+        var _el$6 = _tmpl$(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
+        _el$9.nextSibling;
+        insert(_el$6, iterationCount, _el$9);
+        effect(() => className(_el$6, styles().conversationDetails.iterationBadge));
+        return _el$6;
+      }
+    }), null);
+    insert(_el$0, (() => {
+      var _c$ = memo(() => !!conv().model);
+      return () => _c$() && `Model: ${conv().model}`;
+    })(), null);
+    insert(_el$0, (() => {
+      var _c$2 = memo(() => !!conv().provider);
+      return () => _c$2() && ` • Provider: ${conv().provider}`;
+    })(), null);
+    insert(_el$0, (() => {
+      var _c$3 = memo(() => !!conv().completedAt);
+      return () => _c$3() && ` • Duration: ${formatDuration(conv().completedAt - conv().startedAt)}`;
+    })(), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return conv().usage;
+      },
+      get children() {
+        var _el$1 = _tmpl$2(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+        _el$11.firstChild;
+        var _el$13 = _el$11.nextSibling, _el$14 = _el$13.nextSibling;
+        _el$14.firstChild;
+        var _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling;
+        _el$17.firstChild;
+        insert(_el$11, () => conv().usage?.promptTokens.toLocaleString() || 0, null);
+        insert(_el$14, () => conv().usage?.completionTokens.toLocaleString() || 0, null);
+        insert(_el$17, () => conv().usage?.totalTokens.toLocaleString() || 0, null);
+        effect((_p$) => {
+          var _v$ = styles().conversationDetails.usageInfo, _v$2 = styles().conversationDetails.usageLabel, _v$3 = styles().conversationDetails.usageBold;
+          _v$ !== _p$.e && className(_el$1, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$10, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$17, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$1;
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return toolNames().length > 0;
+      },
+      get children() {
+        var _el$19 = _tmpl$3(), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling;
+        insert(_el$21, createComponent(For, {
+          get each() {
+            return toolNames();
+          },
+          children: (toolName) => (() => {
+            var _el$28 = _tmpl$7();
+            insert(_el$28, toolName);
+            effect(() => className(_el$28, styles().conversationDetails.toolBadge));
+            return _el$28;
+          })()
+        }));
+        effect((_p$) => {
+          var _v$4 = styles().conversationDetails.toolsRow, _v$5 = styles().conversationDetails.toolsLabel, _v$6 = styles().conversationDetails.toolsList;
+          _v$4 !== _p$.e && className(_el$19, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$20, _p$.t = _v$5);
+          _v$6 !== _p$.a && className(_el$21, _p$.a = _v$6);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$19;
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return memo(() => !!options())() && Object.keys(options()).length > 0;
+      },
+      get children() {
+        var _el$22 = _tmpl$4(), _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling;
+        insert(_el$24, createComponent(For, {
+          get each() {
+            return Object.entries(options());
+          },
+          children: ([key, value]) => (() => {
+            var _el$29 = _tmpl$8(), _el$30 = _el$29.firstChild;
+            insert(_el$29, key, _el$30);
+            insert(_el$29, () => typeof value === "object" ? JSON.stringify(value) : String(value), null);
+            effect(() => className(_el$29, styles().conversationDetails.optionBadge));
+            return _el$29;
+          })()
+        }));
+        effect((_p$) => {
+          var _v$7 = styles().conversationDetails.optionsRow, _v$8 = styles().conversationDetails.optionsLabel, _v$9 = styles().conversationDetails.optionsCompact;
+          _v$7 !== _p$.e && className(_el$22, _p$.e = _v$7);
+          _v$8 !== _p$.t && className(_el$23, _p$.t = _v$8);
+          _v$9 !== _p$.a && className(_el$24, _p$.a = _v$9);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$22;
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return memo(() => !!providerOptions())() && Object.keys(providerOptions()).length > 0;
+      },
+      get children() {
+        var _el$25 = _tmpl$5(), _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
+        insert(_el$27, createComponent(For, {
+          get each() {
+            return Object.entries(providerOptions());
+          },
+          children: ([key, value]) => (() => {
+            var _el$32 = _tmpl$8(), _el$33 = _el$32.firstChild;
+            insert(_el$32, key, _el$33);
+            insert(_el$32, () => typeof value === "object" ? JSON.stringify(value) : String(value), null);
+            effect(() => className(_el$32, styles().conversationDetails.optionBadge));
+            return _el$32;
+          })()
+        }));
+        effect((_p$) => {
+          var _v$0 = styles().conversationDetails.optionsRow, _v$1 = styles().conversationDetails.optionsLabel, _v$10 = styles().conversationDetails.optionsCompact;
+          _v$0 !== _p$.e && className(_el$25, _p$.e = _v$0);
+          _v$1 !== _p$.t && className(_el$26, _p$.t = _v$1);
+          _v$10 !== _p$.a && className(_el$27, _p$.a = _v$10);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$25;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$11 = styles().panelHeader, _v$12 = styles().conversationDetails.headerContent, _v$13 = styles().conversationDetails.headerRow, _v$14 = styles().conversationDetails.headerLabel, _v$15 = `${styles().conversationDetails.statusBadge} ${conv().status === "active" ? styles().conversationDetails.statusActive : conv().status === "completed" ? styles().conversationDetails.statusCompleted : styles().conversationDetails.statusError}`, _v$16 = styles().conversationDetails.metaInfo;
+      _v$11 !== _p$.e && className(_el$, _p$.e = _v$11);
+      _v$12 !== _p$.t && className(_el$2, _p$.t = _v$12);
+      _v$13 !== _p$.a && className(_el$3, _p$.a = _v$13);
+      _v$14 !== _p$.o && className(_el$4, _p$.o = _v$14);
+      _v$15 !== _p$.i && className(_el$5, _p$.i = _v$15);
+      _v$16 !== _p$.n && className(_el$0, _p$.n = _v$16);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$;
+  })();
+};
+export {
+  ConversationHeader
+};
+//# sourceMappingURL=ConversationHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationHeader.js","sources":["../../../../src/components/conversation/ConversationHeader.tsx"],"sourcesContent":["import { For, Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport { formatDuration } from '../utils'\nimport type { Component } from 'solid-js'\nimport type { Conversation } from '../../store/ai-context'\n\ninterface ConversationHeaderProps {\n  conversation: Conversation\n}\n\nexport const ConversationHeader: Component<ConversationHeaderProps> = (\n  props,\n) => {\n  const styles = useStyles()\n  const conv = () => props.conversation\n\n  const toolNames = () => conv().toolNames ?? []\n  const options = () => conv().options\n  const providerOptions = () => conv().providerOptions\n  const iterationCount = () => conv().iterationCount\n\n  return (\n    <div class={styles().panelHeader}>\n      <div class={styles().conversationDetails.headerContent}>\n        <div class={styles().conversationDetails.headerRow}>\n          <div class={styles().conversationDetails.headerLabel}>\n            {conv().label}\n          </div>\n          <div\n            class={`${styles().conversationDetails.statusBadge} ${\n              conv().status === 'active'\n                ? styles().conversationDetails.statusActive\n                : conv().status === 'completed'\n                  ? styles().conversationDetails.statusCompleted\n                  : styles().conversationDetails.statusError\n            }`}\n          >\n            {conv().status}\n          </div>\n          <Show when={iterationCount() !== undefined && iterationCount()! > 1}>\n            <div class={styles().conversationDetails.iterationBadge}>\n              🔄 {iterationCount()} iterations\n            </div>\n          </Show>\n        </div>\n        <div class={styles().conversationDetails.metaInfo}>\n          {conv().model && `Model: ${conv().model}`}\n          {conv().provider && ` • Provider: ${conv().provider}`}\n          {conv().completedAt &&\n            ` • Duration: ${formatDuration(conv().completedAt! - conv().startedAt)}`}\n        </div>\n        <Show when={conv().usage}>\n          <div class={styles().conversationDetails.usageInfo}>\n            <span class={styles().conversationDetails.usageLabel}>\n              🎯 Tokens:\n            </span>\n            <span>\n              Prompt: {conv().usage?.promptTokens.toLocaleString() || 0}\n            </span>\n            <span>•</span>\n            <span>\n              Completion: {conv().usage?.completionTokens.toLocaleString() || 0}\n            </span>\n            <span>•</span>\n            <span class={styles().conversationDetails.usageBold}>\n              Total: {conv().usage?.totalTokens.toLocaleString() || 0}\n            </span>\n          </div>\n        </Show>\n        {/* Tools list - always visible */}\n        <Show when={toolNames().length > 0}>\n          <div class={styles().conversationDetails.toolsRow}>\n            <span class={styles().conversationDetails.toolsLabel}>🔧</span>\n            <div class={styles().conversationDetails.toolsList}>\n              <For each={toolNames()}>\n                {(toolName) => (\n                  <span class={styles().conversationDetails.toolBadge}>\n                    {toolName}\n                  </span>\n                )}\n              </For>\n            </div>\n          </div>\n        </Show>\n        {/* Options - always visible in compact form */}\n        <Show when={options() && Object.keys(options()!).length > 0}>\n          <div class={styles().conversationDetails.optionsRow}>\n            <span class={styles().conversationDetails.optionsLabel}>\n              ⚙️ Options:\n            </span>\n            <div class={styles().conversationDetails.optionsCompact}>\n              <For each={Object.entries(options()!)}>\n                {([key, value]) => (\n                  <span class={styles().conversationDetails.optionBadge}>\n                    {key}:{' '}\n                    {typeof value === 'object'\n                      ? JSON.stringify(value)\n                      : String(value)}\n                  </span>\n                )}\n              </For>\n            </div>\n          </div>\n        </Show>\n        {/* Provider Options - always visible in compact form */}\n        <Show\n          when={providerOptions() && Object.keys(providerOptions()!).length > 0}\n        >\n          <div class={styles().conversationDetails.optionsRow}>\n            <span class={styles().conversationDetails.optionsLabel}>\n              🏷️ Provider:\n            </span>\n            <div class={styles().conversationDetails.optionsCompact}>\n              <For each={Object.entries(providerOptions()!)}>\n                {([key, value]) => (\n                  <span class={styles().conversationDetails.optionBadge}>\n                    {key}:{' '}\n                    {typeof value === 'object'\n                      ? JSON.stringify(value)\n                      : String(value)}\n                  </span>\n                )}\n              </For>\n            </div>\n          </div>\n        </Show>\n      </div>\n    </div>\n  )\n}\n"],"names":["ConversationHeader","props","styles","useStyles","conv","conversation","toolNames","options","providerOptions","iterationCount","_el$","_tmpl$6","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$0","_$insert","label","status","_$createComponent","Show","when","_$memo","undefined","children","_el$6","_tmpl$","_el$7","_el$9","_$effect","_$className","conversationDetails","iterationBadge","_c$","model","_c$2","provider","_c$3","completedAt","formatDuration","startedAt","usage","_el$1","_tmpl$2","_el$10","_el$11","_el$13","_el$14","_el$16","_el$17","promptTokens","toLocaleString","completionTokens","totalTokens","_p$","_v$","usageInfo","_v$2","usageLabel","_v$3","usageBold","e","t","a","length","_el$19","_tmpl$3","_el$20","_el$21","For","each","toolName","_el$28","_tmpl$7","toolBadge","_v$4","toolsRow","_v$5","toolsLabel","_v$6","toolsList","Object","keys","_el$22","_tmpl$4","_el$23","_el$24","entries","key","value","_el$29","_tmpl$8","_el$30","JSON","stringify","String","optionBadge","_v$7","optionsRow","_v$8","optionsLabel","_v$9","optionsCompact","_el$25","_tmpl$5","_el$26","_el$27","_el$32","_el$33","_v$0","_v$1","_v$10","_v$11","panelHeader","_v$12","headerContent","_v$13","headerRow","_v$14","headerLabel","_v$15","statusBadge","statusActive","statusCompleted","statusError","_v$16","metaInfo","o","i","n"],"mappings":";;;;;AAUO,MAAMA,qBACXC,CAAAA,UACG;AACH,QAAMC,SAASC,UAAAA;AACf,QAAMC,OAAOA,MAAMH,MAAMI;AAEzB,QAAMC,YAAYA,MAAMF,KAAAA,EAAOE,aAAa,CAAA;AAC5C,QAAMC,UAAUA,MAAMH,KAAAA,EAAOG;AAC7B,QAAMC,kBAAkBA,MAAMJ,KAAAA,EAAOI;AACrC,QAAMC,iBAAiBA,MAAML,KAAAA,EAAOK;AAEpC,UAAA,MAAA;AAAA,QAAAC,OAAAC,WAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAD,YAAAG,QAAAD,MAAAE,aAAAC,QAAAJ,MAAAG;AAAAE,WAAAJ,OAAA,MAKWX,KAAAA,EAAOgB,KAAK;AAAAD,WAAAH,OAAA,MAWZZ,KAAAA,EAAOiB,MAAM;AAAAF,WAAAL,OAAAQ,gBAEfC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,KAAA,MAAAhB,eAAAA,MAAqBiB,MAAS,EAAA,KAAIjB,mBAAoB;AAAA,MAAC;AAAA,MAAA,IAAAkB,WAAA;AAAA,YAAAC,QAAAC,UAAAC,QAAAF,MAAAf,YAAAkB,QAAAD,MAAAb;AAAAc,cAAAd;AAAAE,eAAAS,OAE3DnB,gBAAcsB,KAAA;AAAAC,eAAA,MAAAC,UAAAL,OADR1B,SAASgC,oBAAoBC,cAAc,CAAA;AAAA,eAAAP;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAT,WAAAD,QAAA,MAAA;AAAA,UAAAkB,MAAAX,KAAA,MAAA,CAAA,CAMxDrB,KAAAA,EAAOiC,KAAK;AAAA,aAAA,MAAZD,IAAAA,KAAgB,UAAUhC,KAAAA,EAAOiC,KAAK;AAAA,IAAE,GAAA,GAAA,IAAA;AAAAlB,WAAAD,QAAA,MAAA;AAAA,UAAAoB,OAAAb,KAAA,MAAA,CAAA,CACxCrB,KAAAA,EAAOmC,QAAQ;AAAA,aAAA,MAAfD,KAAAA,KAAmB,gBAAgBlC,KAAAA,EAAOmC,QAAQ;AAAA,IAAE,GAAA,GAAA,IAAA;AAAApB,WAAAD,QAAA,MAAA;AAAA,UAAAsB,OAAAf,KAAA,MAAA,CAAA,CACpDrB,KAAAA,EAAOqC,WAAW;AAAA,aAAA,MAAlBD,KAAAA,KACC,gBAAgBE,eAAetC,KAAAA,EAAOqC,cAAerC,OAAOuC,SAAS,CAAC;AAAA,IAAE,GAAA,GAAA,IAAA;AAAAxB,WAAAP,OAAAU,gBAE3EC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEpB,OAAOwC;AAAAA,MAAK;AAAA,MAAA,IAAAjB,WAAA;AAAA,YAAAkB,QAAAC,QAAAA,GAAAC,SAAAF,MAAAhC,YAAAmC,SAAAD,OAAA9B;AAAA+B,eAAAnC;AAAAA,YAAAoC,SAAAD,OAAA/B,aAAAiC,SAAAD,OAAAhC;AAAAiC,eAAArC;AAAAA,YAAAsC,SAAAD,OAAAjC,aAAAmC,SAAAD,OAAAlC;AAAAmC,eAAAvC;AAAAM,eAAA6B,QAAA,MAMT5C,OAAOwC,OAAOS,aAAaC,eAAAA,KAAoB,GAAC,IAAA;AAAAnC,eAAA+B,QAAA,MAI5C9C,OAAOwC,OAAOW,iBAAiBD,eAAAA,KAAoB,GAAC,IAAA;AAAAnC,eAAAiC,QAAA,MAIzDhD,OAAOwC,OAAOY,YAAYF,eAAAA,KAAoB,GAAC,IAAA;AAAAtB,eAAAyB,CAAAA,QAAA;AAAA,cAAAC,MAb/CxD,OAAAA,EAASgC,oBAAoByB,WAASC,OACnC1D,SAASgC,oBAAoB2B,YAAUC,OAWvC5D,OAAAA,EAASgC,oBAAoB6B;AAASL,kBAAAD,IAAAO,KAAA/B,UAAAY,OAAAY,IAAAO,IAAAN,GAAA;AAAAE,mBAAAH,IAAAQ,KAAAhC,UAAAc,QAAAU,IAAAQ,IAAAL,IAAA;AAAAE,mBAAAL,IAAAS,KAAAjC,UAAAmB,QAAAK,IAAAS,IAAAJ,IAAA;AAAA,iBAAAL;AAAAA,QAAA,GAAA;AAAA,UAAAO,GAAAtC;AAAAA,UAAAuC,GAAAvC;AAAAA,UAAAwC,GAAAxC;AAAAA,QAAAA,CAAA;AAAA,eAAAmB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAA1B,WAAAP,OAAAU,gBAMtDC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAElB,UAAAA,EAAY6D,SAAS;AAAA,MAAC;AAAA,MAAA,IAAAxC,WAAA;AAAA,YAAAyC,SAAAC,QAAAA,GAAAC,SAAAF,OAAAvD,YAAA0D,SAAAD,OAAArD;AAAAE,eAAAoD,QAAAjD,gBAI3BkD,KAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEnE,UAAAA;AAAAA,UAAW;AAAA,UAAAqB,UAClB+C,eAAQ,MAAA;AAAA,gBAAAC,SAAAC,QAAAA;AAAAzD,mBAAAwD,QAELD,QAAQ;AAAA1C,mBAAA,MAAAC,UAAA0C,QADEzE,SAASgC,oBAAoB2C,SAAS,CAAA;AAAA,mBAAAF;AAAAA,UAAA,GAAA;AAAA,QAAA,CAGpD,CAAA;AAAA3C,eAAAyB,CAAAA,QAAA;AAAA,cAAAqB,OARK5E,OAAAA,EAASgC,oBAAoB6C,UAAQC,OAClC9E,SAASgC,oBAAoB+C,YAAUC,OACxChF,OAAAA,EAASgC,oBAAoBiD;AAASL,mBAAArB,IAAAO,KAAA/B,UAAAmC,QAAAX,IAAAO,IAAAc,IAAA;AAAAE,mBAAAvB,IAAAQ,KAAAhC,UAAAqC,QAAAb,IAAAQ,IAAAe,IAAA;AAAAE,mBAAAzB,IAAAS,KAAAjC,UAAAsC,QAAAd,IAAAS,IAAAgB,IAAA;AAAA,iBAAAzB;AAAAA,QAAA,GAAA;AAAA,UAAAO,GAAAtC;AAAAA,UAAAuC,GAAAvC;AAAAA,UAAAwC,GAAAxC;AAAAA,QAAAA,CAAA;AAAA,eAAA0C;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAjD,WAAAP,OAAAU,gBAYrDC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,KAAA,MAAA,CAAA,CAAAlB,SAAS,EAAA,KAAI6E,OAAOC,KAAK9E,SAAU,EAAE4D,SAAS;AAAA,MAAC;AAAA,MAAA,IAAAxC,WAAA;AAAA,YAAA2D,SAAAC,QAAAA,GAAAC,SAAAF,OAAAzE,YAAA4E,SAAAD,OAAAvE;AAAAE,eAAAsE,QAAAnE,gBAMpDkD,KAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEW,OAAOM,QAAQnF,SAAU;AAAA,UAAC;AAAA,UAAAoB,UAClCA,CAAC,CAACgE,KAAKC,KAAK,OAAC,MAAA;AAAA,gBAAAC,SAAAC,QAAAA,GAAAC,SAAAF,OAAAhF;AAAAM,mBAAA0E,QAETF,KAAGI,MAAA;AAAA5E,mBAAA0E,QAAA,MACH,OAAOD,UAAU,WACdI,KAAKC,UAAUL,KAAK,IACpBM,OAAON,KAAK,GAAC,IAAA;AAAA5D,mBAAA,MAAAC,UAAA4D,QAJN3F,SAASgC,oBAAoBiE,WAAW,CAAA;AAAA,mBAAAN;AAAAA,UAAA,GAAA;AAAA,QAAA,CAMtD,CAAA;AAAA7D,eAAAyB,CAAAA,QAAA;AAAA,cAAA2C,OAbKlG,OAAAA,EAASgC,oBAAoBmE,YAAUC,OACpCpG,SAASgC,oBAAoBqE,cAAYC,OAG1CtG,OAAAA,EAASgC,oBAAoBuE;AAAcL,mBAAA3C,IAAAO,KAAA/B,UAAAqD,QAAA7B,IAAAO,IAAAoC,IAAA;AAAAE,mBAAA7C,IAAAQ,KAAAhC,UAAAuD,QAAA/B,IAAAQ,IAAAqC,IAAA;AAAAE,mBAAA/C,IAAAS,KAAAjC,UAAAwD,QAAAhC,IAAAS,IAAAsC,IAAA;AAAA,iBAAA/C;AAAAA,QAAA,GAAA;AAAA,UAAAO,GAAAtC;AAAAA,UAAAuC,GAAAvC;AAAAA,UAAAwC,GAAAxC;AAAAA,QAAAA,CAAA;AAAA,eAAA4D;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAnE,WAAAP,OAAAU,gBAe1DC,MAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAEC,KAAA,MAAA,CAAA,CAAAjB,iBAAiB,EAAA,KAAI4E,OAAOC,KAAK7E,iBAAkB,EAAE2D,SAAS;AAAA,MAAC;AAAA,MAAA,IAAAxC,WAAA;AAAA,YAAA+E,SAAAC,QAAAA,GAAAC,SAAAF,OAAA7F,YAAAgG,SAAAD,OAAA3F;AAAAE,eAAA0F,QAAAvF,gBAOhEkD,KAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEW,OAAOM,QAAQlF,iBAAkB;AAAA,UAAC;AAAA,UAAAmB,UAC1CA,CAAC,CAACgE,KAAKC,KAAK,OAAC,MAAA;AAAA,gBAAAkB,SAAAhB,QAAAA,GAAAiB,SAAAD,OAAAjG;AAAAM,mBAAA2F,QAETnB,KAAGoB,MAAA;AAAA5F,mBAAA2F,QAAA,MACH,OAAOlB,UAAU,WACdI,KAAKC,UAAUL,KAAK,IACpBM,OAAON,KAAK,GAAC,IAAA;AAAA5D,mBAAA,MAAAC,UAAA6E,QAJN5G,SAASgC,oBAAoBiE,WAAW,CAAA;AAAA,mBAAAW;AAAAA,UAAA,GAAA;AAAA,QAAA,CAMtD,CAAA;AAAA9E,eAAAyB,CAAAA,QAAA;AAAA,cAAAuD,OAbK9G,OAAAA,EAASgC,oBAAoBmE,YAAUY,OACpC/G,SAASgC,oBAAoBqE,cAAYW,QAG1ChH,OAAAA,EAASgC,oBAAoBuE;AAAcO,mBAAAvD,IAAAO,KAAA/B,UAAAyE,QAAAjD,IAAAO,IAAAgD,IAAA;AAAAC,mBAAAxD,IAAAQ,KAAAhC,UAAA2E,QAAAnD,IAAAQ,IAAAgD,IAAA;AAAAC,oBAAAzD,IAAAS,KAAAjC,UAAA4E,QAAApD,IAAAS,IAAAgD,KAAA;AAAA,iBAAAzD;AAAAA,QAAA,GAAA;AAAA,UAAAO,GAAAtC;AAAAA,UAAAuC,GAAAvC;AAAAA,UAAAwC,GAAAxC;AAAAA,QAAAA,CAAA;AAAA,eAAAgF;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAA1E,WAAAyB,CAAAA,QAAA;AAAA,UAAA0D,QA1FnDjH,SAASkH,aAAWC,QAClBnH,OAAAA,EAASgC,oBAAoBoF,eAAaC,QACxCrH,OAAAA,EAASgC,oBAAoBsF,WAASC,QACpCvH,OAAAA,EAASgC,oBAAoBwF,aAAWC,QAI3C,GAAGzH,SAASgC,oBAAoB0F,WAAW,IAChDxH,OAAOiB,WAAW,WACdnB,OAAAA,EAASgC,oBAAoB2F,eAC7BzH,KAAAA,EAAOiB,WAAW,cAChBnB,SAASgC,oBAAoB4F,kBAC7B5H,OAAAA,EAASgC,oBAAoB6F,WAAW,IAC9CC,QAUM9H,SAASgC,oBAAoB+F;AAAQd,gBAAA1D,IAAAO,KAAA/B,UAAAvB,MAAA+C,IAAAO,IAAAmD,KAAA;AAAAE,gBAAA5D,IAAAQ,KAAAhC,UAAArB,OAAA6C,IAAAQ,IAAAoD,KAAA;AAAAE,gBAAA9D,IAAAS,KAAAjC,UAAAnB,OAAA2C,IAAAS,IAAAqD,KAAA;AAAAE,gBAAAhE,IAAAyE,KAAAjG,UAAAlB,OAAA0C,IAAAyE,IAAAT,KAAA;AAAAE,gBAAAlE,IAAA0E,KAAAlG,UAAAjB,OAAAyC,IAAA0E,IAAAR,KAAA;AAAAK,gBAAAvE,IAAA2E,KAAAnG,UAAAf,OAAAuC,IAAA2E,IAAAJ,KAAA;AAAA,aAAAvE;AAAAA,IAAA,GAAA;AAAA,MAAAO,GAAAtC;AAAAA,MAAAuC,GAAAvC;AAAAA,MAAAwC,GAAAxC;AAAAA,MAAAwG,GAAAxG;AAAAA,MAAAyG,GAAAzG;AAAAA,MAAA0G,GAAA1G;AAAAA,IAAAA,CAAA;AAAA,WAAAhB;AAAAA,EAAA,GAAA;AAoFzD;"}

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

@@ -0,0 +1,10 @@
+import { Component } from 'solid-js';
+import { Conversation } from '../../store/ai-context.js';
+export type TabType = 'messages' | 'chunks' | 'embeddings' | 'summaries';
+interface ConversationTabsProps {
+    conversation: Conversation;
+    activeTab: TabType;
+    onTabChange: (tab: TabType) => void;
+}
+export declare const ConversationTabs: Component<ConversationTabsProps>;
+export {};

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

@@ -0,0 +1,88 @@
+import { template, insert, createComponent, effect, className, memo, delegateEvents } from "solid-js/web";
+import { Show } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button>💬 Messages (<!>)`), _tmpl$2 = /* @__PURE__ */ template(`<button>📦 Chunks (<!>)`), _tmpl$3 = /* @__PURE__ */ template(`<button>🔢 Embeddings (<!>)`), _tmpl$4 = /* @__PURE__ */ template(`<button>📝 Summaries (<!>)`), _tmpl$5 = /* @__PURE__ */ template(`<div>`);
+const ConversationTabs = (props) => {
+  const styles = useStyles();
+  const conv = () => props.conversation;
+  const totalRawChunks = () => conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0);
+  const embeddingsCount = () => conv().embeddings?.length ?? 0;
+  const summariesCount = () => conv().summaries?.length ?? 0;
+  const hasMessages = () => conv().type === "client" && conv().messages.length > 0;
+  const hasChunks = () => conv().chunks.length > 0 || conv().type === "server";
+  const hasEmbeddings = () => conv().hasEmbedding || embeddingsCount() > 0;
+  const hasSummaries = () => conv().hasSummarize || summariesCount() > 0;
+  const visibleTabCount = () => {
+    let count = 0;
+    if (hasMessages()) count++;
+    if (hasChunks() && conv().type === "server") count++;
+    if (hasEmbeddings()) count++;
+    if (hasSummaries()) count++;
+    return count;
+  };
+  if (visibleTabCount() <= 1) {
+    return null;
+  }
+  return (() => {
+    var _el$ = _tmpl$5();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasMessages();
+      },
+      get children() {
+        var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
+        _el$5.nextSibling;
+        _el$2.$$click = () => props.onTabChange("messages");
+        insert(_el$2, () => conv().messages.length, _el$5);
+        effect(() => className(_el$2, `${styles().actionButton} ${props.activeTab === "messages" ? styles().conversationDetails.tabButtonActive : ""}`));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!hasChunks())() && conv().type === "server";
+      },
+      get children() {
+        var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
+        _el$9.nextSibling;
+        _el$6.$$click = () => props.onTabChange("chunks");
+        insert(_el$6, totalRawChunks, _el$9);
+        effect(() => className(_el$6, `${styles().actionButton} ${props.activeTab === "chunks" ? styles().conversationDetails.tabButtonActive : ""}`));
+        return _el$6;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasEmbeddings();
+      },
+      get children() {
+        var _el$0 = _tmpl$3(), _el$1 = _el$0.firstChild, _el$11 = _el$1.nextSibling;
+        _el$11.nextSibling;
+        _el$0.$$click = () => props.onTabChange("embeddings");
+        insert(_el$0, embeddingsCount, _el$11);
+        effect(() => className(_el$0, `${styles().actionButton} ${props.activeTab === "embeddings" ? styles().conversationDetails.tabButtonActive : ""}`));
+        return _el$0;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasSummaries();
+      },
+      get children() {
+        var _el$12 = _tmpl$4(), _el$13 = _el$12.firstChild, _el$15 = _el$13.nextSibling;
+        _el$15.nextSibling;
+        _el$12.$$click = () => props.onTabChange("summaries");
+        insert(_el$12, summariesCount, _el$15);
+        effect(() => className(_el$12, `${styles().actionButton} ${props.activeTab === "summaries" ? styles().conversationDetails.tabButtonActive : ""}`));
+        return _el$12;
+      }
+    }), null);
+    effect(() => className(_el$, styles().conversationDetails.tabsContainer));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+export {
+  ConversationTabs
+};
+//# sourceMappingURL=ConversationTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationTabs.js","sources":["../../../../src/components/conversation/ConversationTabs.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport type { Component } from 'solid-js'\nimport type { Conversation } from '../../store/ai-context'\n\nexport type TabType = 'messages' | 'chunks' | 'embeddings' | 'summaries'\n\ninterface ConversationTabsProps {\n  conversation: Conversation\n  activeTab: TabType\n  onTabChange: (tab: TabType) => void\n}\n\nexport const ConversationTabs: Component<ConversationTabsProps> = (props) => {\n  const styles = useStyles()\n  const conv = () => props.conversation\n\n  // Total raw chunks = sum of all chunkCounts\n  const totalRawChunks = () =>\n    conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)\n\n  const embeddingsCount = () => conv().embeddings?.length ?? 0\n  const summariesCount = () => conv().summaries?.length ?? 0\n\n  // Determine if we should show any chat-related tabs\n  // For server conversations, don't show messages tab - only chunks\n  const hasMessages = () =>\n    conv().type === 'client' && conv().messages.length > 0\n  const hasChunks = () => conv().chunks.length > 0 || conv().type === 'server'\n  const hasEmbeddings = () => conv().hasEmbedding || embeddingsCount() > 0\n  const hasSummaries = () => conv().hasSummarize || summariesCount() > 0\n\n  // Count how many tabs would be visible\n  const visibleTabCount = () => {\n    let count = 0\n    if (hasMessages()) count++\n    if (hasChunks() && conv().type === 'server') count++\n    if (hasEmbeddings()) count++\n    if (hasSummaries()) count++\n    return count\n  }\n\n  // Don't render tabs if only one tab would be visible\n  if (visibleTabCount() <= 1) {\n    return null\n  }\n\n  return (\n    <div class={styles().conversationDetails.tabsContainer}>\n      {/* Show messages tab for client conversations or when there are messages */}\n      <Show when={hasMessages()}>\n        <button\n          class={`${styles().actionButton} ${\n            props.activeTab === 'messages'\n              ? styles().conversationDetails.tabButtonActive\n              : ''\n          }`}\n          onClick={() => props.onTabChange('messages')}\n        >\n          💬 Messages ({conv().messages.length})\n        </button>\n      </Show>\n      {/* Show chunks tab for server conversations or when there are chunks */}\n      <Show when={hasChunks() && conv().type === 'server'}>\n        <button\n          class={`${styles().actionButton} ${\n            props.activeTab === 'chunks'\n              ? styles().conversationDetails.tabButtonActive\n              : ''\n          }`}\n          onClick={() => props.onTabChange('chunks')}\n        >\n          📦 Chunks ({totalRawChunks()})\n        </button>\n      </Show>\n      {/* Show embeddings tab if there are embedding operations */}\n      <Show when={hasEmbeddings()}>\n        <button\n          class={`${styles().actionButton} ${\n            props.activeTab === 'embeddings'\n              ? styles().conversationDetails.tabButtonActive\n              : ''\n          }`}\n          onClick={() => props.onTabChange('embeddings')}\n        >\n          🔢 Embeddings ({embeddingsCount()})\n        </button>\n      </Show>\n      {/* Show summaries tab if there are summarize operations */}\n      <Show when={hasSummaries()}>\n        <button\n          class={`${styles().actionButton} ${\n            props.activeTab === 'summaries'\n              ? styles().conversationDetails.tabButtonActive\n              : ''\n          }`}\n          onClick={() => props.onTabChange('summaries')}\n        >\n          📝 Summaries ({summariesCount()})\n        </button>\n      </Show>\n    </div>\n  )\n}\n"],"names":["ConversationTabs","props","styles","useStyles","conv","conversation","totalRawChunks","chunks","reduce","sum","c","chunkCount","embeddingsCount","embeddings","length","summariesCount","summaries","hasMessages","type","messages","hasChunks","hasEmbeddings","hasEmbedding","hasSummaries","hasSummarize","visibleTabCount","count","_el$","_tmpl$5","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$","_el$3","firstChild","_el$5","nextSibling","$$click","onTabChange","_$effect","_$className","actionButton","activeTab","conversationDetails","tabButtonActive","_$memo","_el$6","_tmpl$2","_el$7","_el$9","_el$0","_tmpl$3","_el$1","_el$11","_el$12","_tmpl$4","_el$13","_el$15","tabsContainer","_$delegateEvents"],"mappings":";;;;AAaO,MAAMA,mBAAsDC,CAAAA,UAAU;AAC3E,QAAMC,SAASC,UAAAA;AACf,QAAMC,OAAOA,MAAMH,MAAMI;AAGzB,QAAMC,iBAAiBA,MACrBF,KAAAA,EAAOG,OAAOC,OAAO,CAACC,KAAKC,MAAMD,OAAOC,EAAEC,cAAc,IAAI,CAAC;AAE/D,QAAMC,kBAAkBA,MAAMR,KAAAA,EAAOS,YAAYC,UAAU;AAC3D,QAAMC,iBAAiBA,MAAMX,KAAAA,EAAOY,WAAWF,UAAU;AAIzD,QAAMG,cAAcA,MAClBb,KAAAA,EAAOc,SAAS,YAAYd,KAAAA,EAAOe,SAASL,SAAS;AACvD,QAAMM,YAAYA,MAAMhB,KAAAA,EAAOG,OAAOO,SAAS,KAAKV,OAAOc,SAAS;AACpE,QAAMG,gBAAgBA,MAAMjB,KAAAA,EAAOkB,gBAAgBV,oBAAoB;AACvE,QAAMW,eAAeA,MAAMnB,KAAAA,EAAOoB,gBAAgBT,mBAAmB;AAGrE,QAAMU,kBAAkBA,MAAM;AAC5B,QAAIC,QAAQ;AACZ,QAAIT,cAAeS;AACnB,QAAIN,UAAAA,KAAehB,KAAAA,EAAOc,SAAS,SAAUQ;AAC7C,QAAIL,gBAAiBK;AACrB,QAAIH,eAAgBG;AACpB,WAAOA;AAAAA,EACT;AAGA,MAAID,gBAAAA,KAAqB,GAAG;AAC1B,WAAO;AAAA,EACT;AAEA,UAAA,MAAA;AAAA,QAAAE,OAAAC,QAAAA;AAAAC,WAAAF,MAAAG,gBAGKC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEf,YAAAA;AAAAA,MAAa;AAAA,MAAA,IAAAgB,WAAA;AAAA,YAAAC,QAAAC,UAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAD,cAAAC;AAAAL,cAAAM,UAOZ,MAAMvC,MAAMwC,YAAY,UAAU;AAACZ,eAAAK,OAAA,MAE9B9B,KAAAA,EAAOe,SAASL,QAAMwB,KAAA;AAAAI,eAAA,MAAAC,UAAAT,OAP7B,GAAGhC,OAAAA,EAAS0C,YAAY,IAC7B3C,MAAM4C,cAAc,aAChB3C,OAAAA,EAAS4C,oBAAoBC,kBAC7B,EAAE,EACN,CAAA;AAAA,eAAAb;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAL,WAAAF,MAAAG,gBAOLC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEgB,KAAA,MAAA,CAAA,CAAA5B,UAAAA,CAAW,EAAA,KAAIhB,KAAAA,EAAOc,SAAS;AAAA,MAAQ;AAAA,MAAA,IAAAe,WAAA;AAAA,YAAAgB,QAAAC,WAAAC,QAAAF,MAAAZ,YAAAe,QAAAD,MAAAZ;AAAAa,cAAAb;AAAAU,cAAAT,UAOtC,MAAMvC,MAAMwC,YAAY,QAAQ;AAACZ,eAAAoB,OAE9B3C,gBAAc8C,KAAA;AAAAV,eAAA,MAAAC,UAAAM,OAPnB,GAAG/C,OAAAA,EAAS0C,YAAY,IAC7B3C,MAAM4C,cAAc,WAChB3C,OAAAA,EAAS4C,oBAAoBC,kBAC7B,EAAE,EACN,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAApB,WAAAF,MAAAG,gBAOLC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEX,cAAAA;AAAAA,MAAe;AAAA,MAAA,IAAAY,WAAA;AAAA,YAAAoB,QAAAC,WAAAC,QAAAF,MAAAhB,YAAAmB,SAAAD,MAAAhB;AAAAiB,eAAAjB;AAAAc,cAAAb,UAOd,MAAMvC,MAAMwC,YAAY,YAAY;AAACZ,eAAAwB,OAE9BzC,iBAAe4C,MAAA;AAAAd,eAAA,MAAAC,UAAAU,OAPxB,GAAGnD,OAAAA,EAAS0C,YAAY,IAC7B3C,MAAM4C,cAAc,eAChB3C,OAAAA,EAAS4C,oBAAoBC,kBAC7B,EAAE,EACN,CAAA;AAAA,eAAAM;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAxB,WAAAF,MAAAG,gBAOLC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAET,aAAAA;AAAAA,MAAc;AAAA,MAAA,IAAAU,WAAA;AAAA,YAAAwB,SAAAC,WAAAC,SAAAF,OAAApB,YAAAuB,SAAAD,OAAApB;AAAAqB,eAAArB;AAAAkB,eAAAjB,UAOb,MAAMvC,MAAMwC,YAAY,WAAW;AAACZ,eAAA4B,QAE9B1C,gBAAc6C,MAAA;AAAAlB,eAAA,MAAAC,UAAAc,QAPtB,GAAGvD,OAAAA,EAAS0C,YAAY,IAC7B3C,MAAM4C,cAAc,cAChB3C,OAAAA,EAAS4C,oBAAoBC,kBAC7B,EAAE,EACN,CAAA;AAAA,eAAAU;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAf,WAAA,MAAAC,UAAAhB,MA/CIzB,SAAS4C,oBAAoBe,aAAa,CAAA;AAAA,WAAAlC;AAAAA,EAAA,GAAA;AAuD1D;AAACmC,eAAA,CAAA,OAAA,CAAA;"}

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

@@ -0,0 +1,7 @@
+import { Component } from 'solid-js';
+import { EmbeddingOperation } from '../../store/ai-context.js';
+interface EmbeddingsTabProps {
+    embeddings: Array<EmbeddingOperation>;
+}
+export declare const EmbeddingsTab: Component<EmbeddingsTabProps>;
+export {};

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

@@ -0,0 +1,90 @@
+import { createComponent, template, insert, effect, className } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+import { formatDuration } from "../utils/format.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>No embedding operations yet`), _tmpl$3 = /* @__PURE__ */ template(`<div>⏱️ `), _tmpl$4 = /* @__PURE__ */ template(`<div><div><div>🔢</div><div>Embedding</div><div></div></div><div><div><span>Model:</span><span></span></div><div><span>Inputs:</span><span> item</span></div><div><span>Started:</span><span>`);
+const EmbeddingsTab = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.embeddings.length > 0;
+    },
+    get fallback() {
+      return (() => {
+        var _el$2 = _tmpl$2();
+        effect(() => className(_el$2, styles().conversationDetails.emptyMessages));
+        return _el$2;
+      })();
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      insert(_el$, createComponent(For, {
+        get each() {
+          return props.embeddings;
+        },
+        children: (embedding) => (() => {
+          var _el$3 = _tmpl$4(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$0 = _el$4.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$1.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$12.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling;
+          insert(_el$7, () => embedding.status);
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return embedding.duration > 0;
+            },
+            get children() {
+              var _el$8 = _tmpl$3();
+              _el$8.firstChild;
+              insert(_el$8, () => formatDuration(embedding.duration), null);
+              effect(() => className(_el$8, styles().conversationDetails.durationBadge));
+              return _el$8;
+            }
+          }), null);
+          insert(_el$11, () => embedding.model);
+          insert(_el$14, () => embedding.inputCount, _el$15);
+          insert(_el$14, () => embedding.inputCount !== 1 ? "s" : "", null);
+          insert(_el$18, () => new Date(embedding.timestamp).toLocaleTimeString());
+          effect((_p$) => {
+            var _v$ = styles().conversationDetails.operationCard, _v$2 = styles().conversationDetails.operationHeader, _v$3 = styles().conversationDetails.operationIcon, _v$4 = styles().conversationDetails.operationTitle, _v$5 = `${styles().conversationDetails.operationStatus} ${embedding.status === "completed" ? styles().conversationDetails.operationStatusCompleted : styles().conversationDetails.operationStatusPending}`, _v$6 = styles().conversationDetails.operationDetails, _v$7 = styles().conversationDetails.operationDetail, _v$8 = styles().conversationDetails.operationLabel, _v$9 = styles().conversationDetails.operationValue, _v$0 = styles().conversationDetails.operationDetail, _v$1 = styles().conversationDetails.operationLabel, _v$10 = styles().conversationDetails.operationValue, _v$11 = styles().conversationDetails.operationDetail, _v$12 = styles().conversationDetails.operationLabel, _v$13 = styles().conversationDetails.operationValue;
+            _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+            _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+            _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
+            _v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
+            _v$6 !== _p$.n && className(_el$0, _p$.n = _v$6);
+            _v$7 !== _p$.s && className(_el$1, _p$.s = _v$7);
+            _v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
+            _v$9 !== _p$.r && className(_el$11, _p$.r = _v$9);
+            _v$0 !== _p$.d && className(_el$12, _p$.d = _v$0);
+            _v$1 !== _p$.l && className(_el$13, _p$.l = _v$1);
+            _v$10 !== _p$.u && className(_el$14, _p$.u = _v$10);
+            _v$11 !== _p$.c && className(_el$16, _p$.c = _v$11);
+            _v$12 !== _p$.w && className(_el$17, _p$.w = _v$12);
+            _v$13 !== _p$.m && className(_el$18, _p$.m = _v$13);
+            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,
+            l: void 0,
+            u: void 0,
+            c: void 0,
+            w: void 0,
+            m: void 0
+          });
+          return _el$3;
+        })()
+      }));
+      effect(() => className(_el$, styles().conversationDetails.messagesList));
+      return _el$;
+    }
+  });
+};
+export {
+  EmbeddingsTab
+};
+//# sourceMappingURL=EmbeddingsTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddingsTab.js","sources":["../../../../src/components/conversation/EmbeddingsTab.tsx"],"sourcesContent":["import { For, Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport { formatDuration } from '../utils'\nimport type { Component } from 'solid-js'\nimport type { EmbeddingOperation } from '../../store/ai-context'\n\ninterface EmbeddingsTabProps {\n  embeddings: Array<EmbeddingOperation>\n}\n\nexport const EmbeddingsTab: Component<EmbeddingsTabProps> = (props) => {\n  const styles = useStyles()\n\n  return (\n    <Show\n      when={props.embeddings.length > 0}\n      fallback={\n        <div class={styles().conversationDetails.emptyMessages}>\n          No embedding operations yet\n        </div>\n      }\n    >\n      <div class={styles().conversationDetails.messagesList}>\n        <For each={props.embeddings}>\n          {(embedding) => (\n            <div class={styles().conversationDetails.operationCard}>\n              <div class={styles().conversationDetails.operationHeader}>\n                <div class={styles().conversationDetails.operationIcon}>🔢</div>\n                <div class={styles().conversationDetails.operationTitle}>\n                  Embedding\n                </div>\n                <div\n                  class={`${styles().conversationDetails.operationStatus} ${\n                    embedding.status === 'completed'\n                      ? styles().conversationDetails.operationStatusCompleted\n                      : styles().conversationDetails.operationStatusPending\n                  }`}\n                >\n                  {embedding.status}\n                </div>\n                <Show when={embedding.duration > 0}>\n                  <div class={styles().conversationDetails.durationBadge}>\n                    ⏱️ {formatDuration(embedding.duration)}\n                  </div>\n                </Show>\n              </div>\n              <div class={styles().conversationDetails.operationDetails}>\n                <div class={styles().conversationDetails.operationDetail}>\n                  <span class={styles().conversationDetails.operationLabel}>\n                    Model:\n                  </span>\n                  <span class={styles().conversationDetails.operationValue}>\n                    {embedding.model}\n                  </span>\n                </div>\n                <div class={styles().conversationDetails.operationDetail}>\n                  <span class={styles().conversationDetails.operationLabel}>\n                    Inputs:\n                  </span>\n                  <span class={styles().conversationDetails.operationValue}>\n                    {embedding.inputCount} item\n                    {embedding.inputCount !== 1 ? 's' : ''}\n                  </span>\n                </div>\n                <div class={styles().conversationDetails.operationDetail}>\n                  <span class={styles().conversationDetails.operationLabel}>\n                    Started:\n                  </span>\n                  <span class={styles().conversationDetails.operationValue}>\n                    {new Date(embedding.timestamp).toLocaleTimeString()}\n                  </span>\n                </div>\n              </div>\n            </div>\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n"],"names":["EmbeddingsTab","props","styles","useStyles","_$createComponent","Show","when","embeddings","length","fallback","_el$2","_tmpl$2","_$effect","_$className","conversationDetails","emptyMessages","children","_el$","_tmpl$","_$insert","For","each","embedding","_el$3","_tmpl$4","_el$4","firstChild","_el$5","_el$6","nextSibling","_el$7","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","status","duration","_el$8","_tmpl$3","formatDuration","durationBadge","model","inputCount","Date","timestamp","toLocaleTimeString","_p$","_v$","operationCard","_v$2","operationHeader","_v$3","operationIcon","_v$4","operationTitle","_v$5","operationStatus","operationStatusCompleted","operationStatusPending","_v$6","operationDetails","_v$7","operationDetail","_v$8","operationLabel","_v$9","operationValue","_v$0","_v$1","_v$10","_v$11","_v$12","_v$13","e","t","a","o","i","n","s","h","r","d","l","u","c","w","m","undefined","messagesList"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { Message } from '../../store/ai-store.js';
+import { Component } from 'solid-js';
+interface MessageCardProps {
+    message: Message;
+}
+export declare const MessageCard: Component<MessageCardProps>;
+export {};

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

@@ -0,0 +1,152 @@
+import { template, insert, createComponent, effect, className, memo } from "solid-js/web";
+import { Show, For } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+import { formatTimestamp } from "../utils/format.js";
+import { ToolCallDisplay } from "./ToolCallDisplay.js";
+import { ChunksCollapsible } from "./ChunksCollapsible.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><span></span><span>`), _tmpl$2 = /* @__PURE__ */ template(`<div><span>🎯</span><span> in</span><span>•</span><span> out`), _tmpl$3 = /* @__PURE__ */ template(`<details><summary>💭 Thinking...</summary><div>`), _tmpl$4 = /* @__PURE__ */ template(`<div>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div><div><div></div><div><div></div></div><div></div></div><div>`);
+const MessageCard = (props) => {
+  const styles = useStyles();
+  const msg = () => props.message;
+  const isClientMessage = () => msg().source === "client";
+  const getCardClass = () => {
+    const base = styles().conversationDetails.messageCard;
+    if (msg().role === "user") {
+      return `${base} ${styles().conversationDetails.messageCardUser}`;
+    }
+    if (isClientMessage()) {
+      return `${base} ${styles().conversationDetails.messageCardClient}`;
+    }
+    return `${base} ${styles().conversationDetails.messageCardServer}`;
+  };
+  const isSourcedMessage = () => msg().role !== "user";
+  return (() => {
+    var _el$ = _tmpl$5(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$8.nextSibling, _el$19 = _el$6.nextSibling;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isSourcedMessage();
+      },
+      get children() {
+        var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        insert(_el$3, () => isClientMessage() ? "📱" : "☁️");
+        insert(_el$4, () => isClientMessage() ? "Client Message" : "Server Message");
+        effect((_p$) => {
+          var _v$ = `${styles().conversationDetails.sourceBanner} ${isClientMessage() ? styles().conversationDetails.sourceBannerClient : styles().conversationDetails.sourceBannerServer}`, _v$2 = styles().conversationDetails.sourceBannerIcon, _v$3 = styles().conversationDetails.sourceBannerText;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$2;
+      }
+    }), _el$5);
+    insert(_el$7, (() => {
+      var _c$ = memo(() => msg().role === "user");
+      return () => _c$() ? "U" : msg().role === "tool" ? "🔧" : "🤖";
+    })());
+    insert(_el$9, () => msg().role);
+    insert(_el$0, () => formatTimestamp(msg().timestamp));
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return msg().usage;
+      },
+      get children() {
+        var _el$1 = _tmpl$2(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$11.nextSibling, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild;
+        insert(_el$11, () => msg().usage?.promptTokens.toLocaleString(), _el$12);
+        insert(_el$14, () => msg().usage?.completionTokens.toLocaleString(), _el$15);
+        effect((_p$) => {
+          var _v$4 = styles().conversationDetails.messageUsage, _v$5 = styles().conversationDetails.messageUsageIcon;
+          _v$4 !== _p$.e && className(_el$1, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$10, _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$1;
+      }
+    }), null);
+    insert(_el$5, createComponent(Show, {
+      get when() {
+        return msg().thinkingContent;
+      },
+      get children() {
+        var _el$16 = _tmpl$3(), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling;
+        insert(_el$18, () => msg().thinkingContent);
+        effect((_p$) => {
+          var _v$6 = styles().conversationDetails.thinkingDetails, _v$7 = styles().conversationDetails.thinkingSummary, _v$8 = styles().conversationDetails.thinkingContent;
+          _v$6 !== _p$.e && className(_el$16, _p$.e = _v$6);
+          _v$7 !== _p$.t && className(_el$17, _p$.t = _v$7);
+          _v$8 !== _p$.a && className(_el$18, _p$.a = _v$8);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$16;
+      }
+    }), _el$19);
+    insert(_el$19, () => msg().content);
+    insert(_el$5, createComponent(Show, {
+      get when() {
+        return memo(() => !!msg().toolCalls)() && msg().toolCalls.length > 0;
+      },
+      get children() {
+        var _el$20 = _tmpl$4();
+        insert(_el$20, createComponent(For, {
+          get each() {
+            return msg().toolCalls;
+          },
+          children: (tool) => createComponent(ToolCallDisplay, {
+            tool
+          })
+        }));
+        effect(() => className(_el$20, styles().conversationDetails.toolCallsContainer));
+        return _el$20;
+      }
+    }), null);
+    insert(_el$5, createComponent(Show, {
+      get when() {
+        return memo(() => !!msg().chunks)() && msg().chunks.length > 0;
+      },
+      get children() {
+        return createComponent(ChunksCollapsible, {
+          get chunks() {
+            return msg().chunks;
+          }
+        });
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$9 = getCardClass(), _v$0 = isSourcedMessage() ? styles().conversationDetails.messageCardContent : "", _v$1 = styles().conversationDetails.messageHeader, _v$10 = msg().role === "user" ? styles().conversationDetails.avatarUser : isClientMessage() ? styles().conversationDetails.avatarClient : styles().conversationDetails.avatarServer, _v$11 = styles().conversationDetails.roleLabel, _v$12 = msg().role === "user" ? styles().conversationDetails.roleLabelUser : isClientMessage() ? styles().conversationDetails.roleLabelClient : styles().conversationDetails.roleLabelServer, _v$13 = styles().conversationDetails.timestamp, _v$14 = styles().conversationDetails.messageContent;
+      _v$9 !== _p$.e && className(_el$, _p$.e = _v$9);
+      _v$0 !== _p$.t && className(_el$5, _p$.t = _v$0);
+      _v$1 !== _p$.a && className(_el$6, _p$.a = _v$1);
+      _v$10 !== _p$.o && className(_el$7, _p$.o = _v$10);
+      _v$11 !== _p$.i && className(_el$8, _p$.i = _v$11);
+      _v$12 !== _p$.n && className(_el$9, _p$.n = _v$12);
+      _v$13 !== _p$.s && className(_el$0, _p$.s = _v$13);
+      _v$14 !== _p$.h && className(_el$19, _p$.h = _v$14);
+      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
+    });
+    return _el$;
+  })();
+};
+export {
+  MessageCard
+};
+//# sourceMappingURL=MessageCard.js.map