wepscli 0.1.0

package/dist/WEPSCLI-shell/chat-components.js

@@ -0,0 +1,760 @@
+import { use as _$use } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { useKeyboard } from "@opentui/solid";
+import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
+import { getSlashCommands } from "./slash-commands.js";
+import { wepscliShellTheme as theme } from "./theme.js";
+export function ChatTopBar(props) {
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("box"),
+      _el$4 = _$createElement("text"),
+      _el$5 = _$createElement("text"),
+      _el$6 = _$createElement("text"),
+      _el$7 = _$createElement("box");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$7);
+    _$setProp(_el$, "flexShrink", 0);
+    _$setProp(_el$, "paddingLeft", 2);
+    _$setProp(_el$, "paddingRight", 2);
+    _$setProp(_el$, "paddingTop", 1);
+    _$setProp(_el$, "paddingBottom", 1);
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "gap", 1);
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$6);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "justifyContent", "space-between");
+    _$setProp(_el$2, "gap", 1);
+    _$insertNode(_el$3, _el$4);
+    _$insertNode(_el$3, _el$5);
+    _$setProp(_el$3, "flexDirection", "row");
+    _$setProp(_el$3, "gap", 1);
+    _$setProp(_el$3, "minWidth", 0);
+    _$setProp(_el$3, "flexGrow", 1);
+    _$insert(_el$4, () => props.logo);
+    _$insert(_el$5, () => truncateText(props.sessionTitle, 40));
+    _$insert(_el$6, () => truncateText(props.statusLabel, 40));
+    _$setProp(_el$7, "flexDirection", "row");
+    _$setProp(_el$7, "gap", 1);
+    _$insert(_el$7, _$createComponent(Chip, {
+      get label() {
+        return `Provider ${truncateText(props.providerLabel, 14)}`;
+      },
+      tone: "accent",
+      onClick: () => props.onAction("overlay:provider")
+    }), null);
+    _$insert(_el$7, _$createComponent(Chip, {
+      get label() {
+        return `Model ${truncateText(props.modelLabel, 14)}`;
+      },
+      tone: "muted",
+      onClick: () => props.onAction("overlay:model")
+    }), null);
+    _$insert(_el$7, _$createComponent(Chip, {
+      label: "New",
+      tone: "accent",
+      onClick: () => props.onAction("session:new")
+    }), null);
+    _$insert(_el$7, _$createComponent(Chip, {
+      label: "Sessions",
+      tone: "muted",
+      onClick: () => props.onAction("overlay:session")
+    }), null);
+    _$effect(_p$ => {
+      var _v$ = theme.header,
+        _v$2 = theme.accentStrong,
+        _v$3 = theme.text,
+        _v$4 = theme.muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "backgroundColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$5, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$6, "fg", _v$4, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}
+export function ChatTranscript(props) {
+  return (() => {
+    var _el$8 = _$createElement("box"),
+      _el$9 = _$createElement("box"),
+      _el$0 = _$createElement("text"),
+      _el$10 = _$createElement("text"),
+      _el$11 = _$createElement("scrollbox"),
+      _el$12 = _$createElement("box");
+    _$insertNode(_el$8, _el$9);
+    _$insertNode(_el$8, _el$11);
+    _$setProp(_el$8, "flexGrow", 1);
+    _$setProp(_el$8, "minHeight", 0);
+    _$setProp(_el$8, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$8, "padding", 1);
+    _$setProp(_el$8, "flexDirection", "column");
+    _$setProp(_el$8, "gap", 1);
+    _$insertNode(_el$9, _el$0);
+    _$insertNode(_el$9, _el$10);
+    _$setProp(_el$9, "flexDirection", "row");
+    _$setProp(_el$9, "justifyContent", "space-between");
+    _$setProp(_el$9, "gap", 1);
+    _$insertNode(_el$0, _$createTextNode(`Conversation`));
+    _$insert(_el$10, () => truncateText(props.activeModelLabel, 32));
+    _$insertNode(_el$11, _el$12);
+    _$setProp(_el$11, "flexGrow", 1);
+    _$setProp(_el$11, "minHeight", 0);
+    _$setProp(_el$12, "flexDirection", "column");
+    _$setProp(_el$12, "gap", 1);
+    _$insert(_el$12, _$createComponent(Show, {
+      get when() {
+        return props.messages.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$13 = _$createElement("box"),
+            _el$14 = _$createElement("text"),
+            _el$16 = _$createElement("text"),
+            _el$17 = _$createElement("text");
+          _$insertNode(_el$13, _el$14);
+          _$insertNode(_el$13, _el$16);
+          _$insertNode(_el$13, _el$17);
+          _$setProp(_el$13, "border", ["top", "right", "bottom", "left"]);
+          _$setProp(_el$13, "padding", 1);
+          _$setProp(_el$13, "flexDirection", "column");
+          _$setProp(_el$13, "gap", 1);
+          _$insertNode(_el$14, _$createTextNode(`Ready for a task`));
+          _$setProp(_el$16, "wrapMode", "word");
+          _$insert(_el$16, () => props.emptyHint);
+          _$insertNode(_el$17, _$createTextNode(`Enter a prompt below, or type / for commands.`));
+          _$setProp(_el$17, "wrapMode", "word");
+          _$effect(_p$ => {
+            var _v$9 = theme.panelAlt,
+              _v$0 = theme.border,
+              _v$1 = theme.accentStrong,
+              _v$10 = theme.text,
+              _v$11 = theme.muted;
+            _v$9 !== _p$.e && (_p$.e = _$setProp(_el$13, "backgroundColor", _v$9, _p$.e));
+            _v$0 !== _p$.t && (_p$.t = _$setProp(_el$13, "borderColor", _v$0, _p$.t));
+            _v$1 !== _p$.a && (_p$.a = _$setProp(_el$14, "fg", _v$1, _p$.a));
+            _v$10 !== _p$.o && (_p$.o = _$setProp(_el$16, "fg", _v$10, _p$.o));
+            _v$11 !== _p$.i && (_p$.i = _$setProp(_el$17, "fg", _v$11, _p$.i));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined
+          });
+          return _el$13;
+        })();
+      },
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.messages;
+          },
+          children: message => _$createComponent(MessageBubble, {
+            message: message
+          })
+        });
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$5 = theme.panel,
+        _v$6 = theme.border,
+        _v$7 = theme.accent,
+        _v$8 = theme.muted;
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$8, "backgroundColor", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$8, "borderColor", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp(_el$0, "fg", _v$7, _p$.a));
+      _v$8 !== _p$.o && (_p$.o = _$setProp(_el$10, "fg", _v$8, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$8;
+  })();
+}
+export function ChatComposer(props) {
+  let inputRef;
+  const [draftValue, setDraftValue] = createSignal(props.value);
+  const [slashIndex, setSlashIndex] = createSignal(0);
+  const slashOptions = createMemo(() => getSlashCommands(draftValue()));
+  const visibleSlashOptions = createMemo(() => slashOptions().slice(0, 6));
+  createEffect(() => {
+    const nextValue = props.value;
+    setDraftValue(nextValue);
+    if (!nextValue.trim().startsWith("/")) setSlashIndex(0);
+  });
+  useKeyboard(evt => {
+    if (!props.focused || visibleSlashOptions().length === 0 || !draftValue().trim().startsWith("/")) {
+      return;
+    }
+    if (evt.name === "up") {
+      evt.preventDefault();
+      setSlashIndex(current => current <= 0 ? visibleSlashOptions().length - 1 : current - 1);
+      return;
+    }
+    if (evt.name === "down") {
+      evt.preventDefault();
+      setSlashIndex(current => (current + 1) % visibleSlashOptions().length);
+      return;
+    }
+    if (evt.name === "return") {
+      const command = visibleSlashOptions()[slashIndex()] ?? visibleSlashOptions()[0];
+      if (!command) {
+        return;
+      }
+      evt.preventDefault();
+      props.onSelectSlashCommand(command.id);
+    }
+  });
+  function updateValue(nextValue) {
+    setDraftValue(nextValue);
+    if (!nextValue.trim().startsWith("/")) setSlashIndex(0);
+    props.onInput(nextValue);
+  }
+  function submitCurrentValue(value) {
+    const matchingCommands = getSlashCommands(value).slice(0, 6);
+    if (value.trim().startsWith("/") && matchingCommands.length > 0) {
+      const command = matchingCommands[slashIndex()] ?? matchingCommands[0];
+      if (command) {
+        props.onSelectSlashCommand(command.id);
+        return;
+      }
+    }
+    props.onSubmit(value);
+  }
+  return (() => {
+    var _el$19 = _$createElement("box"),
+      _el$20 = _$createElement("box"),
+      _el$21 = _$createElement("box"),
+      _el$22 = _$createElement("input"),
+      _el$23 = _$createElement("box"),
+      _el$24 = _$createElement("text");
+    _$insertNode(_el$19, _el$20);
+    _$setProp(_el$19, "flexShrink", 0);
+    _$setProp(_el$19, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$19, "paddingLeft", 1);
+    _$setProp(_el$19, "paddingRight", 1);
+    _$setProp(_el$19, "paddingTop", 0);
+    _$setProp(_el$19, "paddingBottom", 0);
+    _$setProp(_el$19, "flexDirection", "column");
+    _$setProp(_el$19, "gap", 0);
+    _$insert(_el$19, (() => {
+      var _c$ = _$memo(() => visibleSlashOptions().length > 0);
+      return () => _c$() ? (() => {
+        var _el$25 = _$createElement("box");
+        _$setProp(_el$25, "border", ["bottom"]);
+        _$setProp(_el$25, "paddingLeft", 1);
+        _$setProp(_el$25, "paddingRight", 1);
+        _$setProp(_el$25, "paddingTop", 0);
+        _$setProp(_el$25, "paddingBottom", 0);
+        _$setProp(_el$25, "flexDirection", "column");
+        _$setProp(_el$25, "gap", 0);
+        _$insert(_el$25, _$createComponent(For, {
+          get each() {
+            return visibleSlashOptions();
+          },
+          children: (option, index) => (() => {
+            var _el$26 = _$createElement("box"),
+              _el$27 = _$createElement("text");
+            _$insertNode(_el$26, _el$27);
+            _$setProp(_el$26, "paddingLeft", 1);
+            _$setProp(_el$26, "paddingRight", 1);
+            _$setProp(_el$26, "flexDirection", "row");
+            _$setProp(_el$26, "onMouseUp", () => props.onSelectSlashCommand(option.id));
+            _$insert(_el$27, () => truncateText(option.label, 24));
+            _$effect(_p$ => {
+              var _v$30 = slashIndex() === index() ? theme.accent : theme.panelAlt,
+                _v$31 = slashIndex() === index() ? theme.background : theme.text;
+              _v$30 !== _p$.e && (_p$.e = _$setProp(_el$26, "backgroundColor", _v$30, _p$.e));
+              _v$31 !== _p$.t && (_p$.t = _$setProp(_el$27, "fg", _v$31, _p$.t));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$26;
+          })()
+        }));
+        _$effect(_p$ => {
+          var _v$28 = theme.panel,
+            _v$29 = theme.border;
+          _v$28 !== _p$.e && (_p$.e = _$setProp(_el$25, "backgroundColor", _v$28, _p$.e));
+          _v$29 !== _p$.t && (_p$.t = _$setProp(_el$25, "borderColor", _v$29, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$25;
+      })() : null;
+    })(), _el$20);
+    _$insertNode(_el$20, _el$21);
+    _$insertNode(_el$20, _el$23);
+    _$setProp(_el$20, "paddingLeft", 0);
+    _$setProp(_el$20, "paddingRight", 0);
+    _$setProp(_el$20, "paddingTop", 0);
+    _$setProp(_el$20, "paddingBottom", 0);
+    _$setProp(_el$20, "flexDirection", "row");
+    _$setProp(_el$20, "gap", 0);
+    _$insertNode(_el$21, _el$22);
+    _$setProp(_el$21, "flexGrow", 1);
+    _$setProp(_el$21, "minWidth", 0);
+    _$use(ref => {
+      inputRef = ref;
+      props.inputRef(ref);
+    }, _el$22);
+    _$setProp(_el$22, "placeholder", "Type / or ask");
+    _$setProp(_el$22, "onInput", value => updateValue(value));
+    _$setProp(_el$22, "onSubmit", value => submitCurrentValue(value));
+    _$insertNode(_el$23, _el$24);
+    _$setProp(_el$23, "flexShrink", 0);
+    _$setProp(_el$23, "width", 14);
+    _$setProp(_el$23, "border", ["left"]);
+    _$setProp(_el$23, "paddingLeft", 1);
+    _$setProp(_el$23, "paddingRight", 1);
+    _$setProp(_el$23, "alignItems", "center");
+    _$setProp(_el$23, "justifyContent", "center");
+    _$insert(_el$24, () => truncateText(props.modeLabel, 12));
+    _$effect(_p$ => {
+      var _v$12 = theme.panelAlt,
+        _v$13 = props.focused ? theme.accent : theme.border,
+        _v$14 = theme.panelAlt,
+        _v$15 = props.onFocus,
+        _v$16 = props.focused,
+        _v$17 = draftValue(),
+        _v$18 = theme.panelAlt,
+        _v$19 = theme.text,
+        _v$20 = theme.panelAlt,
+        _v$21 = theme.text,
+        _v$22 = theme.accent,
+        _v$23 = props.onFocus,
+        _v$24 = modeBackgroundColor(props.modeTone),
+        _v$25 = props.focused ? theme.accent : theme.border,
+        _v$26 = props.onModeClick,
+        _v$27 = modeForegroundColor(props.modeTone);
+      _v$12 !== _p$.e && (_p$.e = _$setProp(_el$19, "backgroundColor", _v$12, _p$.e));
+      _v$13 !== _p$.t && (_p$.t = _$setProp(_el$19, "borderColor", _v$13, _p$.t));
+      _v$14 !== _p$.a && (_p$.a = _$setProp(_el$20, "backgroundColor", _v$14, _p$.a));
+      _v$15 !== _p$.o && (_p$.o = _$setProp(_el$20, "onMouseUp", _v$15, _p$.o));
+      _v$16 !== _p$.i && (_p$.i = _$setProp(_el$22, "focused", _v$16, _p$.i));
+      _v$17 !== _p$.n && (_p$.n = _$setProp(_el$22, "value", _v$17, _p$.n));
+      _v$18 !== _p$.s && (_p$.s = _$setProp(_el$22, "backgroundColor", _v$18, _p$.s));
+      _v$19 !== _p$.h && (_p$.h = _$setProp(_el$22, "textColor", _v$19, _p$.h));
+      _v$20 !== _p$.r && (_p$.r = _$setProp(_el$22, "focusedBackgroundColor", _v$20, _p$.r));
+      _v$21 !== _p$.d && (_p$.d = _$setProp(_el$22, "focusedTextColor", _v$21, _p$.d));
+      _v$22 !== _p$.l && (_p$.l = _$setProp(_el$22, "cursorColor", _v$22, _p$.l));
+      _v$23 !== _p$.u && (_p$.u = _$setProp(_el$22, "onMouseUp", _v$23, _p$.u));
+      _v$24 !== _p$.c && (_p$.c = _$setProp(_el$23, "backgroundColor", _v$24, _p$.c));
+      _v$25 !== _p$.w && (_p$.w = _$setProp(_el$23, "borderColor", _v$25, _p$.w));
+      _v$26 !== _p$.m && (_p$.m = _$setProp(_el$23, "onMouseUp", _v$26, _p$.m));
+      _v$27 !== _p$.f && (_p$.f = _$setProp(_el$24, "fg", _v$27, _p$.f));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined,
+      w: undefined,
+      m: undefined,
+      f: undefined
+    });
+    return _el$19;
+  })();
+}
+export function ChatSidebar(props) {
+  return (() => {
+    var _el$28 = _$createElement("box"),
+      _el$29 = _$createElement("text"),
+      _el$31 = _$createElement("text"),
+      _el$33 = _$createElement("text"),
+      _el$35 = _$createElement("text");
+    _$insertNode(_el$28, _el$29);
+    _$insertNode(_el$28, _el$31);
+    _$insertNode(_el$28, _el$33);
+    _$insertNode(_el$28, _el$35);
+    _$setProp(_el$28, "width", 34);
+    _$setProp(_el$28, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$28, "padding", 1);
+    _$setProp(_el$28, "flexDirection", "column");
+    _$setProp(_el$28, "gap", 1);
+    _$insertNode(_el$29, _$createTextNode(`Context`));
+    _$insert(_el$28, _$createComponent(MetaRow, {
+      label: "Session",
+      get value() {
+        return truncateText(props.sessionTitle, 18);
+      }
+    }), _el$31);
+    _$insert(_el$28, _$createComponent(MetaRow, {
+      label: "Summary",
+      get value() {
+        return truncateText(props.sessionSummary, 18);
+      }
+    }), _el$31);
+    _$insert(_el$28, _$createComponent(MetaRow, {
+      label: "Provider",
+      get value() {
+        return truncateText(props.providerLabel, 18);
+      }
+    }), _el$31);
+    _$insert(_el$28, _$createComponent(MetaRow, {
+      label: "Model",
+      get value() {
+        return truncateText(props.modelLabel, 18);
+      }
+    }), _el$31);
+    _$insertNode(_el$31, _$createTextNode(`Recent chats`));
+    _$insert(_el$28, _$createComponent(For, {
+      get each() {
+        return props.recentSessions.slice(0, 4);
+      },
+      children: session => (() => {
+        var _el$37 = _$createElement("box"),
+          _el$38 = _$createElement("box"),
+          _el$39 = _$createElement("text"),
+          _el$40 = _$createElement("text"),
+          _el$41 = _$createElement("text");
+        _$insertNode(_el$37, _el$38);
+        _$insertNode(_el$37, _el$41);
+        _$setProp(_el$37, "border", ["top", "right", "bottom", "left"]);
+        _$setProp(_el$37, "padding", 1);
+        _$setProp(_el$37, "flexDirection", "column");
+        _$setProp(_el$37, "gap", 1);
+        _$setProp(_el$37, "onMouseUp", () => props.onOpenSession(session.id));
+        _$insertNode(_el$38, _el$39);
+        _$insertNode(_el$38, _el$40);
+        _$setProp(_el$38, "flexDirection", "row");
+        _$setProp(_el$38, "justifyContent", "space-between");
+        _$setProp(_el$38, "gap", 1);
+        _$insert(_el$39, () => truncateText(session.title, 20));
+        _$insert(_el$40, () => truncateText(session.state.toUpperCase(), 8));
+        _$setProp(_el$41, "wrapMode", "word");
+        _$insert(_el$41, () => truncateText(session.summary, 28));
+        _$effect(_p$ => {
+          var _v$38 = theme.panel,
+            _v$39 = theme.border,
+            _v$40 = theme.text,
+            _v$41 = session.state === "active" ? theme.success : theme.muted,
+            _v$42 = theme.muted;
+          _v$38 !== _p$.e && (_p$.e = _$setProp(_el$37, "backgroundColor", _v$38, _p$.e));
+          _v$39 !== _p$.t && (_p$.t = _$setProp(_el$37, "borderColor", _v$39, _p$.t));
+          _v$40 !== _p$.a && (_p$.a = _$setProp(_el$39, "fg", _v$40, _p$.a));
+          _v$41 !== _p$.o && (_p$.o = _$setProp(_el$40, "fg", _v$41, _p$.o));
+          _v$42 !== _p$.i && (_p$.i = _$setProp(_el$41, "fg", _v$42, _p$.i));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$37;
+      })()
+    }), _el$33);
+    _$insertNode(_el$33, _$createTextNode(`Shortcuts`));
+    _$insertNode(_el$35, _$createTextNode(`Tab focus | h home | p provider | m model | s sessions`));
+    _$setProp(_el$35, "wrapMode", "word");
+    _$insert(_el$28, _$createComponent(MiniChip, {
+      label: "Provider",
+      tone: "accent",
+      onClick: () => props.onAction("overlay:provider")
+    }), null);
+    _$insert(_el$28, _$createComponent(MiniChip, {
+      label: "Model",
+      tone: "muted",
+      onClick: () => props.onAction("overlay:model")
+    }), null);
+    _$insert(_el$28, _$createComponent(MiniChip, {
+      label: "New chat",
+      tone: "accent",
+      onClick: () => props.onAction("session:new")
+    }), null);
+    _$effect(_p$ => {
+      var _v$32 = theme.panelMuted,
+        _v$33 = theme.border,
+        _v$34 = theme.accent,
+        _v$35 = theme.accent,
+        _v$36 = theme.accent,
+        _v$37 = theme.muted;
+      _v$32 !== _p$.e && (_p$.e = _$setProp(_el$28, "backgroundColor", _v$32, _p$.e));
+      _v$33 !== _p$.t && (_p$.t = _$setProp(_el$28, "borderColor", _v$33, _p$.t));
+      _v$34 !== _p$.a && (_p$.a = _$setProp(_el$29, "fg", _v$34, _p$.a));
+      _v$35 !== _p$.o && (_p$.o = _$setProp(_el$31, "fg", _v$35, _p$.o));
+      _v$36 !== _p$.i && (_p$.i = _$setProp(_el$33, "fg", _v$36, _p$.i));
+      _v$37 !== _p$.n && (_p$.n = _$setProp(_el$35, "fg", _v$37, _p$.n));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$28;
+  })();
+}
+export function OverlayPicker(props) {
+  return (() => {
+    var _el$42 = _$createElement("box"),
+      _el$43 = _$createElement("box"),
+      _el$44 = _$createElement("box"),
+      _el$45 = _$createElement("text"),
+      _el$46 = _$createElement("text"),
+      _el$48 = _$createElement("text");
+    _$insertNode(_el$42, _el$43);
+    _$setProp(_el$42, "position", "absolute");
+    _$setProp(_el$42, "width", "100%");
+    _$setProp(_el$42, "height", "100%");
+    _$setProp(_el$42, "alignItems", "center");
+    _$setProp(_el$42, "justifyContent", "center");
+    _$insertNode(_el$43, _el$44);
+    _$insertNode(_el$43, _el$48);
+    _$setProp(_el$43, "width", "70%");
+    _$setProp(_el$43, "maxWidth", 80);
+    _$setProp(_el$43, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$43, "padding", 1);
+    _$setProp(_el$43, "flexDirection", "column");
+    _$setProp(_el$43, "gap", 1);
+    _$insertNode(_el$44, _el$45);
+    _$insertNode(_el$44, _el$46);
+    _$setProp(_el$44, "flexDirection", "row");
+    _$setProp(_el$44, "justifyContent", "space-between");
+    _$setProp(_el$44, "gap", 1);
+    _$insert(_el$45, () => truncateText(props.title, 32));
+    _$insertNode(_el$46, _$createTextNode(`esc`));
+    _$setProp(_el$48, "wrapMode", "word");
+    _$insert(_el$48, () => truncateText(props.description, 96));
+    _$insert(_el$43, _$createComponent(Show, {
+      get when() {
+        return props.options.length > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$51 = _$createElement("text");
+          _$insertNode(_el$51, _$createTextNode(`No options are available yet.`));
+          _$effect(_$p => _$setProp(_el$51, "fg", theme.warning, _$p));
+          return _el$51;
+        })();
+      },
+      get children() {
+        var _el$49 = _$createElement("scrollbox"),
+          _el$50 = _$createElement("box");
+        _$insertNode(_el$49, _el$50);
+        _$setProp(_el$49, "maxHeight", 12);
+        _$setProp(_el$50, "flexDirection", "column");
+        _$setProp(_el$50, "gap", 1);
+        _$insert(_el$50, _$createComponent(For, {
+          get each() {
+            return props.options;
+          },
+          children: (option, index) => (() => {
+            var _el$53 = _$createElement("box"),
+              _el$54 = _$createElement("box"),
+              _el$55 = _$createElement("text"),
+              _el$56 = _$createElement("text");
+            _$insertNode(_el$53, _el$54);
+            _$insertNode(_el$53, _el$56);
+            _$setProp(_el$53, "paddingLeft", 1);
+            _$setProp(_el$53, "paddingRight", 1);
+            _$setProp(_el$53, "paddingTop", 1);
+            _$setProp(_el$53, "paddingBottom", 1);
+            _$setProp(_el$53, "flexDirection", "column");
+            _$setProp(_el$53, "onMouseUp", () => props.onSelect(option.id, index()));
+            _$insertNode(_el$54, _el$55);
+            _$setProp(_el$54, "flexDirection", "row");
+            _$setProp(_el$54, "justifyContent", "space-between");
+            _$setProp(_el$54, "gap", 1);
+            _$insert(_el$55, () => truncateText(option.label, 28));
+            _$insert(_el$54, (() => {
+              var _c$2 = _$memo(() => !!option.badge);
+              return () => _c$2() ? (() => {
+                var _el$57 = _$createElement("text");
+                _$insert(_el$57, () => truncateText(option.badge, 10));
+                _$effect(_$p => _$setProp(_el$57, "fg", props.selectedIndex === index() ? theme.background : theme.success, _$p));
+                return _el$57;
+              })() : null;
+            })(), null);
+            _$setProp(_el$56, "wrapMode", "word");
+            _$insert(_el$56, () => option.description);
+            _$effect(_p$ => {
+              var _v$49 = props.selectedIndex === index() ? theme.accent : theme.panel,
+                _v$50 = props.selectedIndex === index() ? theme.background : theme.text,
+                _v$51 = props.selectedIndex === index() ? theme.background : theme.muted;
+              _v$49 !== _p$.e && (_p$.e = _$setProp(_el$53, "backgroundColor", _v$49, _p$.e));
+              _v$50 !== _p$.t && (_p$.t = _$setProp(_el$55, "fg", _v$50, _p$.t));
+              _v$51 !== _p$.a && (_p$.a = _$setProp(_el$56, "fg", _v$51, _p$.a));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$53;
+          })()
+        }));
+        return _el$49;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$43 = theme.panelAlt,
+        _v$44 = theme.accent,
+        _v$45 = theme.accentStrong,
+        _v$46 = theme.muted,
+        _v$47 = props.onClose,
+        _v$48 = theme.muted;
+      _v$43 !== _p$.e && (_p$.e = _$setProp(_el$43, "backgroundColor", _v$43, _p$.e));
+      _v$44 !== _p$.t && (_p$.t = _$setProp(_el$43, "borderColor", _v$44, _p$.t));
+      _v$45 !== _p$.a && (_p$.a = _$setProp(_el$45, "fg", _v$45, _p$.a));
+      _v$46 !== _p$.o && (_p$.o = _$setProp(_el$46, "fg", _v$46, _p$.o));
+      _v$47 !== _p$.i && (_p$.i = _$setProp(_el$46, "onMouseUp", _v$47, _p$.i));
+      _v$48 !== _p$.n && (_p$.n = _$setProp(_el$48, "fg", _v$48, _p$.n));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$42;
+  })();
+}
+function MessageBubble(props) {
+  const tone = props.message.role === "user" ? theme.accent : props.message.role === "assistant" ? theme.success : theme.muted;
+  return (() => {
+    var _el$58 = _$createElement("box"),
+      _el$59 = _$createElement("box"),
+      _el$60 = _$createElement("text"),
+      _el$61 = _$createElement("text"),
+      _el$62 = _$createElement("text");
+    _$insertNode(_el$58, _el$59);
+    _$insertNode(_el$58, _el$62);
+    _$setProp(_el$58, "border", ["top", "right", "bottom", "left"]);
+    _$setProp(_el$58, "borderColor", tone);
+    _$setProp(_el$58, "padding", 1);
+    _$setProp(_el$58, "flexDirection", "column");
+    _$setProp(_el$58, "gap", 1);
+    _$insertNode(_el$59, _el$60);
+    _$insertNode(_el$59, _el$61);
+    _$setProp(_el$59, "flexDirection", "row");
+    _$setProp(_el$59, "justifyContent", "space-between");
+    _$setProp(_el$59, "gap", 1);
+    _$setProp(_el$60, "fg", tone);
+    _$insert(_el$60, () => props.message.role.toUpperCase());
+    _$insert(_el$61, () => truncateText(props.message.time, 12));
+    _$setProp(_el$62, "wrapMode", "word");
+    _$insert(_el$62, () => props.message.content);
+    _$effect(_p$ => {
+      var _v$52 = theme.panelAlt,
+        _v$53 = theme.muted,
+        _v$54 = theme.text;
+      _v$52 !== _p$.e && (_p$.e = _$setProp(_el$58, "backgroundColor", _v$52, _p$.e));
+      _v$53 !== _p$.t && (_p$.t = _$setProp(_el$61, "fg", _v$53, _p$.t));
+      _v$54 !== _p$.a && (_p$.a = _$setProp(_el$62, "fg", _v$54, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$58;
+  })();
+}
+function MetaRow(props) {
+  return (() => {
+    var _el$63 = _$createElement("box"),
+      _el$64 = _$createElement("text"),
+      _el$65 = _$createElement("text");
+    _$insertNode(_el$63, _el$64);
+    _$insertNode(_el$63, _el$65);
+    _$setProp(_el$63, "flexDirection", "row");
+    _$setProp(_el$63, "justifyContent", "space-between");
+    _$setProp(_el$63, "gap", 1);
+    _$insert(_el$64, () => props.label);
+    _$insert(_el$65, () => truncateText(props.value, 18));
+    _$effect(_p$ => {
+      var _v$55 = theme.muted,
+        _v$56 = theme.text;
+      _v$55 !== _p$.e && (_p$.e = _$setProp(_el$64, "fg", _v$55, _p$.e));
+      _v$56 !== _p$.t && (_p$.t = _$setProp(_el$65, "fg", _v$56, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$63;
+  })();
+}
+function Chip(props) {
+  const backgroundColor = props.tone === "accent" ? theme.accent : theme.panel;
+  const foregroundColor = props.tone === "accent" ? theme.background : theme.text;
+  return (() => {
+    var _el$66 = _$createElement("box"),
+      _el$67 = _$createElement("text");
+    _$insertNode(_el$66, _el$67);
+    _$setProp(_el$66, "backgroundColor", backgroundColor);
+    _$setProp(_el$66, "paddingLeft", 1);
+    _$setProp(_el$66, "paddingRight", 1);
+    _$setProp(_el$67, "fg", foregroundColor);
+    _$insert(_el$67, () => truncateText(props.label, 24));
+    _$effect(_$p => _$setProp(_el$66, "onMouseUp", props.onClick, _$p));
+    return _el$66;
+  })();
+}
+function MiniChip(props) {
+  return _$createComponent(Chip, props);
+}
+function truncateText(value, maxLength) {
+  return value.length <= maxLength ? value : `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}
+function modeBackgroundColor(tone) {
+  switch (tone) {
+    case "accent":
+      return theme.accent;
+    case "warning":
+      return theme.warning;
+    case "muted":
+      return theme.panelMuted;
+    case "danger":
+      return theme.danger;
+  }
+}
+function modeForegroundColor(tone) {
+  switch (tone) {
+    case "accent":
+    case "warning":
+    case "danger":
+      return theme.background;
+    case "muted":
+      return theme.text;
+  }
+}