@npv12/opencode-mini-session 0.0.1

package/dist/components/AnswerDialog.js

@@ -0,0 +1,841 @@
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { use as _$use } 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";
+/** @jsxImportSource @opentui/solid */
+import { SyntaxStyle } from "@opentui/core";
+import { createMemo, Show } from "solid-js";
+import { THINKING_TEXT } from "../constants.js";
+import { extractAssistantText } from "../session.js";
+import { ActionButton } from "./ActionButton.js";
+import { buildMiniTheme } from "../theme.js";
+function buildSyntaxStyle(theme) {
+  return SyntaxStyle.fromStyles({
+    "markup.heading": {
+      fg: theme.markdownHeading,
+      bold: true
+    },
+    "markup.strong": {
+      fg: theme.markdownStrong,
+      bold: true
+    },
+    "markup.italic": {
+      fg: theme.markdownEmph,
+      italic: true
+    },
+    "markup.link": {
+      fg: theme.markdownLink
+    },
+    "markup.link.label": {
+      fg: theme.markdownLinkText
+    },
+    "markup.link.url": {
+      fg: theme.markdownLink
+    },
+    "markup.raw": {
+      fg: theme.markdownCode
+    },
+    "markup.raw.block": {
+      fg: theme.markdownCodeBlock
+    },
+    "markup.strikethrough": {
+      fg: theme.markdownText
+    },
+    blockquote: {
+      fg: theme.markdownBlockQuote
+    },
+    conceal: {
+      fg: theme.border,
+      dim: true
+    },
+    comment: {
+      fg: theme.syntaxComment
+    },
+    keyword: {
+      fg: theme.syntaxKeyword
+    },
+    function: {
+      fg: theme.syntaxFunction
+    },
+    variable: {
+      fg: theme.syntaxVariable
+    },
+    string: {
+      fg: theme.syntaxString
+    },
+    number: {
+      fg: theme.syntaxNumber
+    },
+    type: {
+      fg: theme.syntaxType
+    },
+    operator: {
+      fg: theme.syntaxOperator
+    },
+    punctuation: {
+      fg: theme.syntaxPunctuation
+    }
+  });
+}
+const THINKING_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+function resolveAssistantModelName(models, agent, model) {
+  if (!model) return undefined;
+  const found = models?.find(m => m.providerID === model.providerID && m.id === model.id);
+  return found?.name || `${model.providerID}/${model.id}`;
+}
+export function AnswerDialog(props) {
+  const theme = () => buildMiniTheme(props.context.theme);
+  const mdSyntaxStyle = buildSyntaxStyle(theme());
+  let scroller;
+  let input;
+  let inputValue = "";
+  const screenWidth = props.context.renderer.width;
+  const screenHeight = props.context.renderer.height;
+  const panelWidth = Math.min(100, Math.floor(screenWidth * 0.85));
+  const panelHeight = Math.max(14, Math.min(screenHeight - 6, Math.floor(screenHeight * 0.68)));
+  const transcriptWidth = Math.max(20, panelWidth - 6);
+  const promptContentWidth = Math.max(10, transcriptWidth - 6);
+  const transcriptHeight = Math.max(1, panelHeight - 13);
+  const transcriptContentWidth = Math.max(20, transcriptWidth - 5);
+  const shiftLeft = Math.floor(screenWidth * 0.3);
+  const messages = createMemo(() => buildMiniMessages(props.state, props.context));
+  const estimatedContentHeight = createMemo(() => estimateMiniMessagesHeight(messages(), props.state, transcriptContentWidth) + 4);
+  const contentOverflows = createMemo(() => estimatedContentHeight() > transcriptHeight - 2);
+  const showScrollbar = createMemo(() => props.state.scrollbarVisible || contentOverflows());
+  const canContinue = createMemo(() => !props.state.loading && !props.state.error && Boolean(extractAssistantText(props.state.entries) || props.state.streamingAnswer.trim()));
+  const createUserMessageHint = createMemo(() => getCreateUserMessageHint(props.state));
+  const footerCounter = createMemo(() => props.state.footerCounter);
+  const hasFooterCounter = createMemo(() => Boolean(footerCounter().miniSession || footerCounter().copiedContext));
+  const footerModelName = createMemo(() => truncateWithEllipsis(props.modelName, Math.max(0, promptContentWidth - getFooterCounterWidth(footerCounter()) - (hasFooterCounter() ? 3 : 0))));
+  return (() => {
+    var _el$ = _$createElement("box"),
+      _el$2 = _$createElement("box"),
+      _el$3 = _$createElement("box"),
+      _el$4 = _$createElement("box"),
+      _el$5 = _$createElement("text"),
+      _el$6 = _$createElement("b"),
+      _el$7 = _$createElement("box"),
+      _el$8 = _$createElement("scrollbox"),
+      _el$9 = _$createElement("box"),
+      _el$0 = _$createElement("box"),
+      _el$1 = _$createElement("box"),
+      _el$10 = _$createElement("input"),
+      _el$11 = _$createElement("box"),
+      _el$12 = _$createElement("text"),
+      _el$13 = _$createElement("box");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$3);
+    _$setProp(_el$, "position", "absolute");
+    _$setProp(_el$, "top", 0);
+    _$setProp(_el$, "left", 0);
+    _$setProp(_el$, "width", screenWidth);
+    _$setProp(_el$, "height", screenHeight);
+    _$setProp(_el$, "justifyContent", "center");
+    _$setProp(_el$, "alignItems", "center");
+    _$setProp(_el$2, "position", "absolute");
+    _$setProp(_el$2, "top", 0);
+    _$setProp(_el$2, "left", 0);
+    _$setProp(_el$2, "width", screenWidth);
+    _$setProp(_el$2, "height", screenHeight);
+    _$setProp(_el$2, "backgroundColor", "#000000");
+    _$setProp(_el$2, "opacity", 0.65);
+    _$insertNode(_el$3, _el$4);
+    _$insertNode(_el$3, _el$7);
+    _$insertNode(_el$3, _el$0);
+    _$setProp(_el$3, "marginLeft", -shiftLeft);
+    _$setProp(_el$3, "width", panelWidth);
+    _$setProp(_el$3, "height", panelHeight);
+    _$setProp(_el$3, "flexDirection", "column");
+    _$insertNode(_el$4, _el$5);
+    _$setProp(_el$4, "paddingTop", 1);
+    _$setProp(_el$4, "paddingLeft", 3);
+    _$setProp(_el$4, "paddingRight", 3);
+    _$setProp(_el$4, "flexDirection", "row");
+    _$setProp(_el$4, "justifyContent", "flex-start");
+    _$setProp(_el$4, "alignItems", "center");
+    _$setProp(_el$4, "marginBottom", 1);
+    _$insertNode(_el$5, _el$6);
+    _$insert(_el$6, () => props.title);
+    _$insertNode(_el$7, _el$8);
+    _$setProp(_el$7, "paddingLeft", 3);
+    _$setProp(_el$7, "paddingRight", 3);
+    _$insertNode(_el$8, _el$9);
+    _$use(node => {
+      scroller = node;
+      props.onScroller?.(node);
+    }, _el$8);
+    _$setProp(_el$8, "height", transcriptHeight);
+    _$setProp(_el$8, "width", transcriptWidth);
+    _$setProp(_el$8, "scrollY", true);
+    _$setProp(_el$8, "stickyScroll", true);
+    _$setProp(_el$8, "stickyStart", "bottom");
+    _$setProp(_el$9, "flexDirection", "column");
+    _$setProp(_el$9, "gap", 1);
+    _$setProp(_el$9, "width", transcriptContentWidth);
+    _$insert(_el$9, (() => {
+      var _c$ = _$memo(() => !!props.state.notice);
+      return () => _c$() ? (() => {
+        var _el$14 = _$createElement("text"),
+          _el$15 = _$createTextNode(`Warning: `);
+        _$insertNode(_el$14, _el$15);
+        _$insert(_el$14, () => props.state.notice, null);
+        _$effect(_$p => _$setProp(_el$14, "fg", theme().warning, _$p));
+        return _el$14;
+      })() : null;
+    })(), null);
+    _$insert(_el$9, (() => {
+      var _c$2 = _$memo(() => messages().length > 0);
+      return () => _c$2() ? messages().map(message => (() => {
+        var _el$16 = _$createElement("box"),
+          _el$17 = _$createElement("text"),
+          _el$18 = _$createElement("b");
+        _$insertNode(_el$16, _el$17);
+        _$setProp(_el$16, "flexDirection", "column");
+        _$setProp(_el$16, "gap", 0);
+        _$insertNode(_el$17, _el$18);
+        _$insert(_el$18, (() => {
+          var _c$7 = _$memo(() => message.role === "assistant");
+          return () => _c$7() ? `assistant [${message.modelName ?? props.modelName}]` : message.role;
+        })());
+        _$insert(_el$16, () => message.parts.map((part, index) => (() => {
+          var _el$19 = _$createElement("box");
+          _$insert(_el$19, (() => {
+            var _c$8 = _$memo(() => part.type === "reasoning");
+            return () => _c$8() ? _$createComponent(ThinkingPart, {
+              get theme() {
+                return theme();
+              },
+              part: part,
+              get expanded() {
+                return isThinkingPartExpanded(props.state, part);
+              },
+              get spinnerFrame() {
+                return props.state.spinnerFrame;
+              },
+              onToggle: () => props.onToggleThinkingPart(part.id)
+            }) : _$memo(() => !!(message.role === "assistant" && part.type === "text" && !props.state.loading))() ? (() => {
+              var _el$20 = _$createElement("markdown");
+              _$setProp(_el$20, "syntaxStyle", mdSyntaxStyle);
+              _$setProp(_el$20, "width", transcriptContentWidth);
+              _$effect(_p$ => {
+                var _v$11 = part.text,
+                  _v$12 = theme().markdownText,
+                  _v$13 = props.state.loading;
+                _v$11 !== _p$.e && (_p$.e = _$setProp(_el$20, "content", _v$11, _p$.e));
+                _v$12 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$12, _p$.t));
+                _v$13 !== _p$.a && (_p$.a = _$setProp(_el$20, "streaming", _v$13, _p$.a));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$20;
+            })() : (() => {
+              var _el$21 = _$createElement("text");
+              _$insert(_el$21, () => formatMiniPart(part));
+              _$effect(_$p => _$setProp(_el$21, "fg", getMiniPartColor(theme(), part), _$p));
+              return _el$21;
+            })();
+          })());
+          _$effect(_$p => _$setProp(_el$19, "marginTop", getMiniPartTopMargin(message.parts, index, message.role), _$p));
+          return _el$19;
+        })()), null);
+        _$effect(_$p => _$setProp(_el$17, "fg", message.role === "assistant" ? theme().primary : theme().secondary, _$p));
+        return _el$16;
+      })()) : _$memo(() => !!props.state.loading)() ? (() => {
+        var _el$22 = _$createElement("text");
+        _$insert(_el$22, THINKING_TEXT);
+        _$effect(_$p => _$setProp(_el$22, "fg", theme().textMuted, _$p));
+        return _el$22;
+      })() : (() => {
+        var _el$23 = _$createElement("text");
+        _$insertNode(_el$23, _$createTextNode(`Ask a side question below.`));
+        _$effect(_$p => _$setProp(_el$23, "fg", theme().textMuted, _$p));
+        return _el$23;
+      })();
+    })(), null);
+    _$insert(_el$9, (() => {
+      var _c$3 = _$memo(() => !!props.state.error);
+      return () => _c$3() ? (() => {
+        var _el$25 = _$createElement("text"),
+          _el$26 = _$createTextNode(`Error: `);
+        _$insertNode(_el$25, _el$26);
+        _$insert(_el$25, () => props.state.error, null);
+        _$effect(_$p => _$setProp(_el$25, "fg", theme().error, _$p));
+        return _el$25;
+      })() : null;
+    })(), null);
+    _$insert(_el$9, (() => {
+      var _c$4 = _$memo(() => !!props.state.errorDetail);
+      return () => _c$4() ? (() => {
+        var _el$27 = _$createElement("text");
+        _$insert(_el$27, () => props.state.errorDetail);
+        _$effect(_$p => _$setProp(_el$27, "fg", theme().textMuted, _$p));
+        return _el$27;
+      })() : null;
+    })(), null);
+    _$insert(_el$9, (() => {
+      var _c$5 = _$memo(() => !!createUserMessageHint());
+      return () => _c$5() ? (() => {
+        var _el$28 = _$createElement("text");
+        _$insert(_el$28, createUserMessageHint);
+        _$effect(_$p => _$setProp(_el$28, "fg", theme().warning, _$p));
+        return _el$28;
+      })() : null;
+    })(), null);
+    _$insert(_el$9, (() => {
+      var _c$6 = _$memo(() => !!(props.state.loading && messages().length > 0));
+      return () => _c$6() ? (() => {
+        var _el$29 = _$createElement("text");
+        _$insert(_el$29, THINKING_TEXT);
+        _$effect(_$p => _$setProp(_el$29, "fg", theme().textMuted, _$p));
+        return _el$29;
+      })() : null;
+    })(), null);
+    _$insertNode(_el$0, _el$1);
+    _$insertNode(_el$0, _el$13);
+    _$setProp(_el$0, "paddingLeft", 3);
+    _$setProp(_el$0, "paddingRight", 3);
+    _$setProp(_el$0, "paddingBottom", 1);
+    _$setProp(_el$0, "flexDirection", "column");
+    _$setProp(_el$0, "gap", 1);
+    _$setProp(_el$0, "marginTop", 1);
+    _$insertNode(_el$1, _el$10);
+    _$insertNode(_el$1, _el$11);
+    _$setProp(_el$1, "width", transcriptWidth);
+    _$setProp(_el$1, "height", 6);
+    _$setProp(_el$1, "flexDirection", "column");
+    _$setProp(_el$1, "paddingTop", 1);
+    _$setProp(_el$1, "paddingLeft", 2);
+    _$setProp(_el$1, "paddingRight", 2);
+    _$setProp(_el$1, "paddingBottom", 1);
+    _$setProp(_el$1, "justifyContent", "space-between");
+    _$use(node => {
+      input = node;
+      props.onInput?.(node);
+    }, _el$10);
+    _$setProp(_el$10, "width", promptContentWidth);
+    _$setProp(_el$10, "onInput", value => {
+      inputValue = value;
+    });
+    _$setProp(_el$10, "onSubmit", () => {
+      const submitted = (input?.value || inputValue).trim();
+      if (!submitted || props.state.loading) return;
+      if (!props.onSubmit(submitted)) return;
+      inputValue = "";
+      if (input) input.value = "";
+    });
+    _$insertNode(_el$11, _el$12);
+    _$setProp(_el$11, "flexDirection", "row");
+    _$setProp(_el$11, "justifyContent", "space-between");
+    _$setProp(_el$11, "alignItems", "center");
+    _$setProp(_el$11, "width", promptContentWidth);
+    _$setProp(_el$11, "gap", 3);
+    _$insert(_el$12, footerModelName);
+    _$insert(_el$11, _$createComponent(Show, {
+      get when() {
+        return hasFooterCounter();
+      },
+      get children() {
+        return _$createComponent(FooterCounter, {
+          get theme() {
+            return theme();
+          },
+          get state() {
+            return footerCounter();
+          }
+        });
+      }
+    }), null);
+    _$setProp(_el$13, "flexDirection", "row");
+    _$setProp(_el$13, "justifyContent", "flex-end");
+    _$setProp(_el$13, "alignItems", "center");
+    _$setProp(_el$13, "width", transcriptWidth);
+    _$setProp(_el$13, "gap", 2);
+    _$insert(_el$13, _$createComponent(Show, {
+      get when() {
+        return canContinue();
+      },
+      get children() {
+        return _$createComponent(ActionButton, {
+          get context() {
+            return props.context;
+          },
+          label: "Continue",
+          keybind: "shift+enter",
+          get onPress() {
+            return props.onContinue;
+          }
+        });
+      }
+    }), null);
+    _$insert(_el$13, _$createComponent(ActionButton, {
+      get context() {
+        return props.context;
+      },
+      label: "Toggle",
+      get keybind() {
+        return props.hideKey || undefined;
+      },
+      get onPress() {
+        return props.onHide;
+      }
+    }), null);
+    _$insert(_el$13, _$createComponent(ActionButton, {
+      get context() {
+        return props.context;
+      },
+      label: "Thinking",
+      get keybind() {
+        return props.toggleThinkingKeybind || undefined;
+      },
+      get onPress() {
+        return props.onToggleThinking;
+      }
+    }), null);
+    _$insert(_el$13, _$createComponent(ActionButton, {
+      get context() {
+        return props.context;
+      },
+      label: "Model",
+      keybind: "tab",
+      get onPress() {
+        return props.onChangeModel;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$ = theme().backgroundPanel,
+        _v$2 = theme().text,
+        _v$3 = {
+          visible: showScrollbar()
+        },
+        _v$4 = theme().borderSubtle,
+        _v$5 = props.state.inputPlaceholder ?? (props.state.loading ? "Waiting for response..." : "Ask a question..."),
+        _v$6 = theme().text,
+        _v$7 = theme().textMuted,
+        _v$8 = theme().borderSubtle,
+        _v$9 = theme().text,
+        _v$0 = theme().primary,
+        _v$1 = theme().borderSubtle,
+        _v$10 = theme().text;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$3, "backgroundColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$5, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$8, "verticalScrollbarOptions", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$1, "backgroundColor", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp(_el$10, "placeholder", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$10, "textColor", _v$6, _p$.n));
+      _v$7 !== _p$.s && (_p$.s = _$setProp(_el$10, "placeholderColor", _v$7, _p$.s));
+      _v$8 !== _p$.h && (_p$.h = _$setProp(_el$10, "backgroundColor", _v$8, _p$.h));
+      _v$9 !== _p$.r && (_p$.r = _$setProp(_el$10, "focusedTextColor", _v$9, _p$.r));
+      _v$0 !== _p$.d && (_p$.d = _$setProp(_el$10, "cursorColor", _v$0, _p$.d));
+      _v$1 !== _p$.l && (_p$.l = _$setProp(_el$10, "focusedBackgroundColor", _v$1, _p$.l));
+      _v$10 !== _p$.u && (_p$.u = _$setProp(_el$12, "fg", _v$10, _p$.u));
+      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
+    });
+    return _el$;
+  })();
+}
+function buildMiniMessages(state, context) {
+  const models = context.data.location.model.list();
+  const messages = [];
+  for (const entry of state.entries) {
+    const miniParts = [];
+    if (entry.type === "user" && entry.text.trim()) miniParts.push({
+      type: "text",
+      text: entry.text.trim()
+    });
+    if (entry.type === "assistant") {
+      for (const part of entry.content) {
+        miniParts.push(...toMiniParts(part));
+      }
+    }
+    if (miniParts.length === 0) continue;
+    const modelName = entry.type === "assistant" ? resolveAssistantModelName(models, entry.agent, entry.model) : undefined;
+    const message = {
+      id: entry.id,
+      role: entry.type === "assistant" ? "assistant" : "user",
+      parts: miniParts,
+      modelName
+    };
+    const previous = messages[messages.length - 1];
+    if (shouldMergeMiniMessages(previous, message)) {
+      previous.parts.push(...message.parts);
+      previous.modelName ??= message.modelName;
+      continue;
+    }
+    messages.push(message);
+  }
+  if (!state.streamingAnswer) return messages;
+  const lastAssistant = [...messages].reverse().find(m => m.role === "assistant");
+  if (!lastAssistant) {
+    messages.push({
+      id: "streaming-assistant",
+      role: "assistant",
+      parts: [{
+        type: "text",
+        text: state.streamingAnswer
+      }],
+      modelName: undefined
+    });
+    return messages;
+  }
+  const lastText = [...lastAssistant.parts].reverse().find(p => p.type === "text");
+  if (lastText) {
+    const s = state.streamingAnswer.trim();
+    const t = lastText.text.trim();
+    if (s === t) {/* identical */} else if (s.startsWith(t) && s.length > t.length) lastText.text = state.streamingAnswer;else if (!t.endsWith(s)) lastText.text += state.streamingAnswer;
+  } else {
+    const lastReasoning = [...lastAssistant.parts].reverse().find(p => p.type === "reasoning");
+    if (!lastReasoning || lastReasoning.text.trim() !== state.streamingAnswer.trim()) {
+      lastAssistant.parts.push({
+        type: "text",
+        text: state.streamingAnswer
+      });
+    }
+  }
+  return messages;
+}
+function shouldMergeMiniMessages(previous, current) {
+  return Boolean(previous && previous.role === "assistant" && current.role === "assistant");
+}
+function ThinkingPart(props) {
+  const header = () => formatThinkingHeader(props.part, props.expanded, props);
+  const body = () => getThinkingBodyText(props.part);
+  return (() => {
+    var _el$30 = _$createElement("box"),
+      _el$31 = _$createElement("box"),
+      _el$32 = _$createElement("text");
+    _$insertNode(_el$30, _el$31);
+    _$setProp(_el$30, "flexDirection", "column");
+    _$setProp(_el$30, "gap", 0);
+    _$insertNode(_el$31, _el$32);
+    _$insert(_el$32, _$createComponent(Show, {
+      get when() {
+        return !props.expanded;
+      },
+      get fallback() {
+        return header();
+      },
+      get children() {
+        var _el$33 = _$createElement("b");
+        _$insert(_el$33, header);
+        return _el$33;
+      }
+    }));
+    _$insert(_el$30, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.expanded)() && body();
+      },
+      get children() {
+        var _el$34 = _$createElement("box"),
+          _el$35 = _$createElement("text");
+        _$insertNode(_el$34, _el$35);
+        _$setProp(_el$34, "marginLeft", 2);
+        _$setProp(_el$34, "marginTop", 1);
+        _$insert(_el$35, body);
+        _$effect(_$p => _$setProp(_el$35, "fg", props.theme.markdownBlockQuote, _$p));
+        return _el$34;
+      }
+    }), null);
+    _$effect(_p$ => {
+      var _v$14 = props.expanded ? 0.65 : 1,
+        _v$15 = props.onToggle,
+        _v$16 = props.theme.warning;
+      _v$14 !== _p$.e && (_p$.e = _$setProp(_el$30, "opacity", _v$14, _p$.e));
+      _v$15 !== _p$.t && (_p$.t = _$setProp(_el$31, "onMouseUp", _v$15, _p$.t));
+      _v$16 !== _p$.a && (_p$.a = _$setProp(_el$32, "fg", _v$16, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$30;
+  })();
+}
+function estimateMiniMessagesHeight(messages, state, width) {
+  let lines = 0;
+  for (const message of messages) {
+    lines += 1;
+    for (let i = 0; i < message.parts.length; i++) {
+      lines += getMiniPartTopMargin(message.parts, i, message.role);
+      const part = message.parts[i];
+      if (part.type === "reasoning") {
+        lines += estimateWrappedLines(formatThinkingHeader(part, isThinkingPartExpanded(state, part), state), width);
+        if (isThinkingPartExpanded(state, part)) {
+          const body = getThinkingBodyText(part);
+          if (body) lines += 1 + estimateWrappedLines(body, Math.max(1, width - 2));
+        }
+      } else lines += estimateWrappedLines(formatMiniPart(part), width);
+    }
+    lines += 1;
+  }
+  if (state.error) lines += estimateWrappedLines(`Error: ${state.error}`, width);
+  if (state.errorDetail) lines += estimateWrappedLines(state.errorDetail, width);
+  const hint = getCreateUserMessageHint(state);
+  if (hint) lines += estimateWrappedLines(hint, width);
+  if (state.notice) lines += estimateWrappedLines(`Warning: ${state.notice}`, width);
+  if (state.loading && messages.length > 0) lines += 1;
+  if (messages.length === 0) lines += 1;
+  return lines;
+}
+function estimateWrappedLines(text, width) {
+  return text.split("\n").reduce((count, line) => count + Math.max(1, Math.ceil(line.length / Math.max(1, width))), 0);
+}
+function getMiniPartTopMargin(parts, index, role) {
+  if (index === 0) return parts[0]?.type === "reasoning" && role === "assistant" ? 1 : 0;
+  const previous = parts[index - 1];
+  const current = parts[index];
+  if (current.type === "reasoning") return previous.type === "tool" || previous.type === "reasoning" ? 1 : 0;
+  if (current.type === "tool") return previous.type === "tool" || previous.type === "reasoning" ? 1 : 0;
+  return current.type === "text" && previous.type !== "text" ? 1 : 0;
+}
+function toMiniParts(part) {
+  if (part.type === "reasoning" && part.text.trim()) return toReasoningMiniParts(part);
+  if (part.type === "text" && part.text.trim()) return [{
+    type: "text",
+    text: part.text.trim()
+  }];
+  if (part.type === "tool") {
+    const inputSummary = typeof part.state.input === "string" ? part.state.input : summarizeToolInput(part.state.input);
+    return [{
+      type: "tool",
+      status: part.state.status,
+      text: inputSummary ? `→ ${part.name} ${inputSummary}` : `→ ${part.name}`
+    }];
+  }
+  return [];
+}
+function toReasoningMiniParts(part) {
+  const baseID = part.text;
+  const time = part.time;
+  const segments = splitReasoningText(part.text.trim());
+  return segments.map((text, i) => ({
+    type: "reasoning",
+    id: segments.length === 1 ? baseID : `${baseID}:${i}`,
+    text,
+    time: i === 0 ? time ? {
+      start: time.created,
+      end: time.completed
+    } : undefined : undefined
+  }));
+}
+function splitReasoningText(text) {
+  const titlePattern = /\*\*([^*\n]+)\*\*/g;
+  const matches = [...text.matchAll(titlePattern)].filter(m => isReasoningTitleMatch(text, m.index ?? -1));
+  if (matches.length <= 1) return [text];
+  const segments = [];
+  if ((matches[0].index ?? 0) > 0) {
+    const intro = text.slice(0, matches[0].index).trim();
+    if (intro) segments.push(intro);
+  }
+  for (let i = 0; i < matches.length; i++) {
+    const start = matches[i].index ?? 0;
+    const end = matches[i + 1]?.index ?? text.length;
+    const seg = text.slice(start, end).trim();
+    if (seg) segments.push(seg);
+  }
+  return segments.length > 0 ? segments : [text];
+}
+function isReasoningTitleMatch(text, index) {
+  if (index < 0) return false;
+  if (index === 0) return true;
+  const before = text.slice(0, index).trimEnd();
+  if (!before) return true;
+  return /[.!?)]$/.test(before) || before.endsWith("...");
+}
+function summarizeToolInput(input) {
+  if (!input) return "";
+  const entries = Object.entries(input).slice(0, 2);
+  if (entries.length === 0) return "";
+  return entries.map(([, v]) => {
+    const s = typeof v === "string" ? v : String(v);
+    return s.length > 60 ? `${s.slice(0, 57)}...` : s;
+  }).join(" ");
+}
+function formatMiniPart(part) {
+  return part.text;
+}
+function FooterCounter(props) {
+  if (!props.state.miniSession && !props.state.copiedContext) return _$createElement("text");
+  return (() => {
+    var _el$37 = _$createElement("box");
+    _$setProp(_el$37, "flexDirection", "row");
+    _$setProp(_el$37, "gap", 1);
+    _$insert(_el$37, _$createComponent(Show, {
+      get when() {
+        return props.state.miniSession;
+      },
+      children: miniSession => (() => {
+        var _el$40 = _$createElement("text");
+        _$insert(_el$40, () => miniSession().text);
+        _$effect(_$p => _$setProp(_el$40, "fg", miniSession().warning ? props.theme.warning : props.theme.textMuted, _$p));
+        return _el$40;
+      })()
+    }), null);
+    _$insert(_el$37, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.state.miniSession)() && props.state.copiedContext;
+      },
+      get children() {
+        var _el$38 = _$createElement("text");
+        _$insertNode(_el$38, _$createTextNode(`·`));
+        _$effect(_$p => _$setProp(_el$38, "fg", props.theme.textMuted, _$p));
+        return _el$38;
+      }
+    }), null);
+    _$insert(_el$37, _$createComponent(Show, {
+      get when() {
+        return props.state.copiedContext;
+      },
+      children: copiedContext => (() => {
+        var _el$41 = _$createElement("text");
+        _$insert(_el$41, () => copiedContext().text);
+        _$effect(_$p => _$setProp(_el$41, "fg", copiedContext().truncated ? props.theme.warning : props.theme.textMuted, _$p));
+        return _el$41;
+      })()
+    }), null);
+    return _el$37;
+  })();
+}
+function truncateWithEllipsis(text, maxWidth) {
+  if (maxWidth <= 0) return "";
+  if (text.length <= maxWidth) return text;
+  if (maxWidth <= 3) return ".".repeat(maxWidth);
+  return `${text.slice(0, maxWidth - 3)}...`;
+}
+function getFooterCounterWidth(state) {
+  return (state.miniSession?.text.length ?? 0) + (state.copiedContext?.text.length ?? 0);
+}
+function isThinkingPartExpanded(state, part) {
+  const toggled = Boolean(state.expandedThinkingPartIDs[part.id]);
+  return state.thinkingEnabled ? !toggled : toggled;
+}
+function formatThinkingHeader(part, expanded, spinnerSource) {
+  const title = getThinkingTitle(part);
+  const duration = formatThinkingDuration(part.time);
+  const prefix = isThinkingPartLoading(part) ? `${THINKING_SPINNER_FRAMES[spinnerSource.spinnerFrame]} ` : expanded ? "- " : "+ ";
+  if (title) return `${prefix}Thought: ${title}${duration ? ` · ${duration}` : ""}`;
+  return `${prefix}Thought${duration ? `: ${duration}` : ""}`;
+}
+function isThinkingPartLoading(part) {
+  if (!part.time) return false;
+  return Number.isFinite(part.time.start ?? NaN) && !Number.isFinite(part.time.end ?? NaN);
+}
+function getThinkingTitle(part) {
+  const line = part.text.split("\n").find(l => l.trim().length > 0)?.trim();
+  const match = line?.match(/^\*\*(.+?)\*\*/);
+  const title = match?.[1]?.trim();
+  return title ? truncateThinkingTitle(title) : "";
+}
+function truncateThinkingTitle(title) {
+  return title.length > 80 ? `${title.slice(0, 77).trim()}...` : title;
+}
+function getThinkingBodyText(part) {
+  const lines = part.text.split("\n");
+  const titleIndex = lines.findIndex(l => l.trim().length > 0);
+  if (titleIndex === -1) return "";
+  const title = getThinkingTitle(part);
+  if (!title) return part.text;
+  lines[titleIndex] = lines[titleIndex].replace(/^\s*\*\*(.+?)\*\*/, "");
+  return lines.slice(titleIndex).join("\n").replace(/^\s+/, "").trimEnd();
+}
+function formatThinkingDuration(time) {
+  if (!time) return "";
+  const start = Number(time.start);
+  const end = Number(time.end);
+  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return "";
+  const diff = end - start;
+  const milliseconds = start > 10_000_000_000 || end > 10_000_000_000 ? diff : diff * 1000;
+  if (milliseconds < 1000) return `${Math.round(milliseconds)}ms`;
+  const seconds = milliseconds / 1000;
+  return seconds < 10 ? `${seconds.toFixed(1)}s` : `${Math.round(seconds)}s`;
+}
+function getMiniPartColor(theme, part) {
+  if (part.type === "reasoning") return theme.textMuted;
+  if (part.type === "meta") return theme.textMuted;
+  if (part.type === "tool" && part.status === "error") return theme.error;
+  if (part.type === "tool" && part.status === "running") return theme.info;
+  if (part.type === "tool") return theme.textMuted;
+  return theme.text;
+}
+function getCreateUserMessageHint(state) {
+  const text = [state.error, state.errorDetail].filter(Boolean).join("\n");
+  if (!/SessionPrompt\.createUserMessage|createUserMessage|chat\.message/i.test(text)) return undefined;
+  return "Hint: OpenCode failed while creating the user message. A server plugin chat.message hook may be throwing.";
+}
+export function createOverlaySlot(getOverlay) {
+  return () => {
+    return _$createComponent(Show, {
+      get when() {
+        return getOverlay();
+      },
+      children: current => _$createComponent(AnswerDialog, {
+        get context() {
+          return current().context;
+        },
+        get title() {
+          return current().title;
+        },
+        get modelName() {
+          return current().modelName;
+        },
+        get hideKey() {
+          return current().hideKey;
+        },
+        get toggleThinkingKeybind() {
+          return current().toggleThinkingKeybind;
+        },
+        get state() {
+          return current().state;
+        },
+        get onScroller() {
+          return current().onScroller;
+        },
+        get onInput() {
+          return current().onInput;
+        },
+        get onHide() {
+          return current().onHide;
+        },
+        get onClose() {
+          return current().onClose;
+        },
+        get onContinue() {
+          return current().onContinue;
+        },
+        get onChangeModel() {
+          return current().onChangeModel;
+        },
+        get onToggleThinking() {
+          return current().onToggleThinking;
+        },
+        get onToggleThinkingPart() {
+          return current().onToggleThinkingPart;
+        },
+        get onSubmit() {
+          return current().onSubmit;
+        }
+      })
+    });
+  };
+}