@symerian/symi 3.4.30 → 3.4.32

package/dist/control-ui/js/render.js

@@ -1,882 +0,0 @@
-// ── Symi UI — Message Renderer ────────────────────────────────────────
-// Handles all content types: text (markdown), thinking, tool_use,
-// tool_result, image. Mirrors the Standard UI feature set.
-
-// ── Configure marked ──────────────────────────────────────────────────
-if (typeof marked !== "undefined") {
-  marked.setOptions({
-    breaks: true,
-    gfm: true,
-    pedantic: false,
-  });
-
-  // GFM task list extension (- [ ] and - [x])
-  const _taskListExt = {
-    name: "taskList",
-    level: "inline",
-    start(src) {
-      return src.indexOf("[ ]") !== -1 || src.indexOf("[x]") !== -1 ? 0 : -1;
-    },
-  };
-  marked.use({
-    hooks: {
-      postprocess(html) {
-        return html
-          .replace(
-            /<li>\s*\[ \]/g,
-            '<li class="task-item"><input type="checkbox" disabled class="task-cb"> ',
-          )
-          .replace(
-            /<li>\s*\[x\]/gi,
-            '<li class="task-item task-done"><input type="checkbox" disabled checked class="task-cb"> ',
-          );
-      },
-    },
-  });
-
-  // Custom renderer — open links in new tab, add copy buttons to code blocks
-  const renderer = new marked.Renderer();
-
-  // marked v15+: renderer methods receive a token object
-  renderer.link = (token) => {
-    const href = typeof token === "string" ? token : (token.href ?? "");
-    const title = typeof token === "object" ? (token.title ?? "") : "";
-    const text = typeof token === "object" ? (token.text ?? "") : "";
-    const t = title ? ` title="${escAttr(title)}"` : "";
-    return `<a href="${escAttr(href)}"${t} target="_blank" rel="noopener">${text}</a>`;
-  };
-
-  renderer.code = (token) => {
-    const raw = typeof token === "string" ? token : (token.text ?? "");
-    const meta = typeof token === "object" ? (token.lang ?? "") : "";
-
-    // Split "python filename.py" -> lang + optional filename
-    const parts = meta.trim().split(/\s+/);
-    const lang = parts[0] || "";
-    const filename = parts.slice(1).join(" ");
-    const language = lang && hljs && hljs.getLanguage(lang) ? lang : "plaintext";
-
-    let highlighted = escHtml(raw);
-    try {
-      if (typeof hljs !== "undefined") {
-        highlighted = hljs.highlight(raw, { language }).value;
-      }
-    } catch {
-      /* ignore */
-    }
-
-    // Build line-numbered HTML
-    const lines = highlighted.split("\n");
-    if (lines[lines.length - 1] === "") {
-      lines.pop();
-    }
-    const numbered = lines
-      .map((line, i) => {
-        return (
-          '<span class="code-line"><span class="line-num">' +
-          (i + 1) +
-          '</span><span class="line-content">' +
-          (line || "\u200b") +
-          "</span></span>"
-        );
-      })
-      .join("\n");
-
-    const langIcon = codeIcon(lang);
-    const langColor = codeLangColor(lang);
-    const id = "code-" + Math.random().toString(36).slice(2);
-    const collapsible = lines.length > 30;
-    const linesLabel = lines.length + " line" + (lines.length !== 1 ? "s" : "");
-
-    let html =
-      '<div class="code-block code-block-full' +
-      (collapsible ? " code-collapsible" : "") +
-      '" id="' +
-      id +
-      '">';
-    html += '<div class="code-header">';
-    html += '<div class="code-header-left">';
-    html +=
-      '<span class="code-lang-badge" style="--lang-color:' +
-      langColor +
-      '">' +
-      langIcon +
-      escHtml(lang || "code") +
-      "</span>";
-    if (filename) {
-      html += '<span class="code-filename">' + escHtml(filename) + "</span>";
-    }
-    html += '<span class="code-lines-count">' + linesLabel + "</span>";
-    html += "</div>";
-    html += '<div class="code-header-right">';
-    if (collapsible) {
-      html +=
-        '<button class="code-expand-btn" onclick="toggleCodeExpand(\'' +
-        id +
-        '\')" title="Expand">⤢</button>';
-    }
-    html += '<button class="code-copy" onclick="copyCode(this)" title="Copy code">';
-    html +=
-      '<svg width="13" height="13" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/></svg> Copy';
-    html += "</button></div></div>";
-    html += '<div class="code-body' + (collapsible ? " code-body-collapsed" : "") + '">';
-    html +=
-      '<pre class="code-pre"><code class="hljs language-' +
-      escHtml(language) +
-      ' code-numbered">' +
-      numbered +
-      "</code></pre>";
-    html += "</div>";
-    if (collapsible) {
-      html +=
-        '<button class="code-show-more" onclick="toggleCodeExpand(\'' +
-        id +
-        "')\">Show all " +
-        lines.length +
-        " lines ▾</button>";
-    }
-    html += "</div>";
-    return html;
-  };
-
-  renderer.codespan = (token) => {
-    const text = typeof token === "string" ? token : (token.text ?? "");
-    return `<code class="inline-code">${text}</code>`;
-  };
-
-  marked.use({ renderer });
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────
-function escHtml(t) {
-  return String(t ?? "")
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-function escAttr(t) {
-  return escHtml(t);
-}
-
-// ── Language icon + color ─────────────────────────────────────────────
-function codeIcon(lang = "") {
-  const l = lang.toLowerCase();
-  if (["js", "javascript", "ts", "typescript", "jsx", "tsx"].includes(l)) {
-    return "⬡ ";
-  }
-  if (["py", "python"].includes(l)) {
-    return "🐍 ";
-  }
-  if (["bash", "sh", "zsh", "shell"].includes(l)) {
-    return "$ ";
-  }
-  if (["json"].includes(l)) {
-    return "{ ";
-  }
-  if (["css", "scss", "sass"].includes(l)) {
-    return "🎨 ";
-  }
-  if (["html", "xml", "svg"].includes(l)) {
-    return "⟨⟩ ";
-  }
-  if (["sql"].includes(l)) {
-    return "⛁ ";
-  }
-  if (["go"].includes(l)) {
-    return "◉ ";
-  }
-  if (["rust"].includes(l)) {
-    return "⚙ ";
-  }
-  if (["java", "kotlin"].includes(l)) {
-    return "☕ ";
-  }
-  if (["c", "cpp", "c++"].includes(l)) {
-    return "⚡ ";
-  }
-  if (["yaml", "yml", "toml"].includes(l)) {
-    return "⚙ ";
-  }
-  if (["dockerfile", "docker"].includes(l)) {
-    return "🐳 ";
-  }
-  return "◇ ";
-}
-
-function codeLangColor(lang = "") {
-  const l = lang.toLowerCase();
-  if (["js", "javascript", "jsx"].includes(l)) {
-    return "#f7df1e";
-  }
-  if (["ts", "typescript", "tsx"].includes(l)) {
-    return "#3178c6";
-  }
-  if (["py", "python"].includes(l)) {
-    return "#3572a5";
-  }
-  if (["bash", "sh", "zsh", "shell"].includes(l)) {
-    return "#89e051";
-  }
-  if (["json"].includes(l)) {
-    return "#cbcb41";
-  }
-  if (["css", "scss"].includes(l)) {
-    return "#563d7c";
-  }
-  if (["html", "xml"].includes(l)) {
-    return "#e34c26";
-  }
-  if (["sql"].includes(l)) {
-    return "#e38c00";
-  }
-  if (["go"].includes(l)) {
-    return "#00add8";
-  }
-  if (["rust"].includes(l)) {
-    return "#dea584";
-  }
-  if (["java"].includes(l)) {
-    return "#b07219";
-  }
-  if (["c", "cpp"].includes(l)) {
-    return "#555555";
-  }
-  if (["yaml", "yml"].includes(l)) {
-    return "#cb171e";
-  }
-  if (["dockerfile", "docker"].includes(l)) {
-    return "#0db7ed";
-  }
-  return "#aaaaaa";
-}
-
-// ── Toggle code block expand ──────────────────────────────────────────
-window.toggleCodeExpand = (id) => {
-  const block = document.getElementById(id);
-  if (!block) {
-    return;
-  }
-  const body = block.querySelector(".code-body");
-  const showBtn = block.querySelector(".code-show-more");
-  const expBtn = block.querySelector(".code-expand-btn");
-  const isOpen = block.classList.toggle("code-expanded");
-  if (body) {
-    body.classList.toggle("code-body-collapsed", !isOpen);
-  }
-  if (showBtn) {
-    showBtn.textContent = isOpen
-      ? "Collapse ▴"
-      : `Show all ${body?.querySelectorAll(".code-line").length || "?"} lines ▾`;
-  }
-  if (expBtn) {
-    expBtn.textContent = isOpen ? "⤡" : "⤢";
-  }
-};
-
-window.copyCode = async (btn) => {
-  const code = btn.closest(".code-block")?.querySelector("code")?.innerText ?? "";
-  try {
-    await navigator.clipboard.writeText(code);
-    btn.classList.add("copied");
-    btn.textContent = "Copied!";
-    setTimeout(() => {
-      btn.classList.remove("copied");
-      btn.innerHTML = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/></svg> Copy`;
-    }, 2000);
-  } catch {}
-};
-
-// ── Model token stripping (profile-driven) ───────────────────────────
-// Strips whatever patterns the active profile declares in
-// profile.filters.stripPatterns.  There are no hardcoded Gemma patterns
-// here — relying on the profile means Qwen/Nemotron/Claude (which declare
-// empty stripPatterns) pass through untouched, and the Ollama/Gemma
-// profiles apply their own patterns.  Server-side stripping in
-// output-normalizer.ts remains the primary defense; this is best-effort
-// for history messages that predate the active profile.
-function stripModelTokensClient(text) {
-  const profile = window.activeModelProfile;
-  const patterns = profile?.filters?.stripPatterns;
-  if (!patterns?.length) {
-    return text;
-  }
-  let cleaned = text;
-  for (const pat of patterns) {
-    try {
-      cleaned = cleaned.replace(new RegExp(pat, "gi"), "");
-    } catch {
-      /* skip invalid patterns */
-    }
-  }
-  return cleaned;
-}
-
-// NOTE: Monologue suppression has moved to the OutputNormalizer (server-side).
-// The model stream is cleaned before events reach the Glass UI, so client-side
-// monologue detection is no longer needed.
-
-// ── Markdown renderer ─────────────────────────────────────────────────
-function renderMarkdown(text) {
-  if (!text) {
-    return "";
-  }
-  try {
-    return typeof marked !== "undefined"
-      ? marked.parse(text)
-      : escHtml(text).replace(/\n/g, "<br>");
-  } catch {
-    return escHtml(text).replace(/\n/g, "<br>");
-  }
-}
-
-// ── Extract plain text from content blocks ────────────────────────────
-window.extractText = function (content) {
-  if (!content) {
-    return "";
-  }
-  if (typeof content === "string") {
-    return content;
-  }
-  if (Array.isArray(content)) {
-    return content
-      .filter((b) => b?.type === "text")
-      .map((b) => b.text ?? "")
-      .join("");
-  }
-  if (content?.content) {
-    return window.extractText(content.content);
-  }
-  return "";
-};
-
-// ── Tool name formatter ───────────────────────────────────────────────
-function formatToolName(name) {
-  if (!name) {
-    return "Tool";
-  }
-  return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-function toolIcon(name = "") {
-  if (name.includes("read") || name.includes("file")) {
-    return "📄";
-  }
-  if (name.includes("write") || name.includes("edit")) {
-    return "✏️";
-  }
-  if (name.includes("exec") || name.includes("run")) {
-    return "⚡";
-  }
-  if (name.includes("search") || name.includes("web")) {
-    return "🔍";
-  }
-  if (name.includes("browser")) {
-    return "🌐";
-  }
-  if (name.includes("memory")) {
-    return "🧠";
-  }
-  if (name.includes("spawn") || name.includes("agent")) {
-    return "🤖";
-  }
-  return "🔧";
-}
-
-// ── Render a single content block ─────────────────────────────────────
-function renderBlock(block) {
-  const el = document.createElement("div");
-
-  switch (block.type) {
-    // ── Plain text with markdown ──────────────────────────────────────
-    case "text": {
-      el.className = "msg-text";
-      const rawText = block.text ?? "";
-      const stripped = stripModelTokensClient(rawText);
-      // If stripping ate everything but we started with real text, render
-      // the raw text rather than silently dropping the message.  Prevents
-      // the "response appeared then disappeared" regression.
-      const safeText = stripped.trim() ? stripped : rawText;
-      if (!safeText) {
-        break;
-      }
-      el.innerHTML = renderMarkdown(safeText);
-      break;
-    }
-
-    // ── Thinking block (collapsible) ──────────────────────────────────
-    case "thinking": {
-      el.className = "msg-thinking";
-      const id = "think-" + Math.random().toString(36).slice(2);
-      el.innerHTML = `
-        <button class="thinking-toggle" onclick="toggleThinking('${id}')">
-          <span class="thinking-icon">◈</span>
-          <span class="thinking-label">Reasoning</span>
-          <span class="thinking-chevron">▾</span>
-        </button>
-        <div class="thinking-body" id="${id}">
-          <div class="thinking-text">${escHtml(block.thinking ?? "")}</div>
-        </div>
-      `;
-      break;
-    }
-
-    // ── Tool use (what was called) ────────────────────────────────────
-    case "tool_use": {
-      el.className = "msg-tool-card";
-      const name = block.name ?? "tool";
-      const input = block.input ? JSON.stringify(block.input, null, 2) : "";
-      const id = "tool-" + Math.random().toString(36).slice(2);
-      el.innerHTML = `
-        <button class="tool-header" onclick="toggleTool('${id}')">
-          <span class="tool-icon">${toolIcon(name)}</span>
-          <span class="tool-name">${escHtml(formatToolName(name))}</span>
-          <span class="tool-chevron">▾</span>
-        </button>
-        <div class="tool-body" id="${id}">
-          <pre class="tool-input">${escHtml(input)}</pre>
-        </div>
-      `;
-      break;
-    }
-
-    // ── Tool result ───────────────────────────────────────────────────
-    case "tool_result": {
-      el.className = "msg-tool-result";
-      const content = Array.isArray(block.content)
-        ? block.content.map((b) => b.text ?? "").join("\n")
-        : String(block.content ?? "");
-      const _preview = content.slice(0, 120);
-      const more = content.length > 120;
-      const id = "result-" + Math.random().toString(36).slice(2);
-      el.innerHTML = `
-        <div class="result-header">
-          <span class="result-icon">↩</span>
-          <span class="result-label">Result</span>
-          ${more ? `<button class="result-expand" onclick="toggleTool('${id}')">Expand</button>` : ""}
-        </div>
-        <div class="result-preview" id="${id}">
-          <pre class="result-text">${escHtml(content)}</pre>
-        </div>
-      `;
-      if (!more) {
-        el.querySelector(".result-preview")?.classList.add("result-open");
-      }
-      break;
-    }
-
-    // ── Image ─────────────────────────────────────────────────────────
-    case "image": {
-      el.className = "msg-image";
-      const src =
-        block.source?.url ??
-        (block.source?.type === "base64"
-          ? `data:${block.source.media_type};base64,${block.source.data}`
-          : "");
-      if (src) {
-        el.innerHTML = `<img src="${escAttr(src)}" alt="image" />`;
-      }
-      break;
-    }
-
-    default:
-      break;
-  }
-
-  return el;
-}
-
-// ── Toggle helpers ────────────────────────────────────────────────────
-window.toggleThinking = (id) => {
-  const body = document.getElementById(id);
-  const btn = body?.previousElementSibling;
-  if (!body) {
-    return;
-  }
-  const open = body.classList.toggle("thinking-open");
-  if (btn) {
-    btn.querySelector(".thinking-chevron").textContent = open ? "▴" : "▾";
-  }
-};
-
-window.toggleTool = (id) => {
-  const body = document.getElementById(id);
-  if (!body) {
-    return;
-  }
-  body.classList.toggle("tool-open");
-  const btn = body?.previousElementSibling?.querySelector?.(".tool-chevron");
-  if (btn) {
-    btn.textContent = body.classList.contains("tool-open") ? "▴" : "▾";
-  }
-};
-
-// ── Copy message text ─────────────────────────────────────────────────
-window.copyMessage = async (btn) => {
-  const bubble = btn.closest(".stream-bubble, .bubble");
-  const text = bubble?.querySelector(".msg-text")?.innerText ?? bubble?.innerText ?? "";
-  try {
-    await navigator.clipboard.writeText(text.trim());
-    btn.classList.add("copied");
-    setTimeout(() => btn.classList.remove("copied"), 2000);
-  } catch {}
-};
-
-// ── Timestamp formatter ───────────────────────────────────────────────
-function formatTime(ts) {
-  if (!ts) {
-    return "";
-  }
-  const d = new Date(typeof ts === "number" && ts < 1e12 ? ts * 1000 : ts);
-  return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
-}
-
-// Expose renderBlock for use in app.js streaming finalization
-window.renderBlock = renderBlock;
-
-// ── Reasoning Panel — append a block ─────────────────────────────────
-window.appendToReasoningPanel = function (block) {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-
-  // Remove empty-state placeholder on first real entry
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-
-  const entry = document.createElement("div");
-  entry.className = "reasoning-entry";
-
-  switch (block.type) {
-    // ── Narration text (agent step descriptions routed here) ────────
-    case "text": {
-      const text = (block.text ?? "").trim();
-      if (!text) {
-        return;
-      }
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-narration">✦ NOTE</span>
-          <span class="reasoning-entry-name">${escHtml(String(text).split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
-        </div>
-      `;
-      break;
-    }
-
-    // ── Thinking block ──────────────────────────────────────────────
-    case "thinking": {
-      const text = (block.thinking ?? "").trim();
-      if (!text) {
-        return;
-      }
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-think">◈ THINK</span>
-          <span class="reasoning-entry-name">${escHtml(String(text).split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
-        </div>
-        <div class="reasoning-think-body">${escHtml(text)}</div>
-      `;
-      break;
-    }
-
-    // ── Tool call (Anthropic: tool_use, Ollama/OpenAI: toolCall) ────
-    case "tool_use":
-    case "toolCall": {
-      const name = block.name ?? "tool";
-      const inputData = block.input ?? block.arguments ?? {};
-      const inputJson = inputData ? JSON.stringify(inputData, null, 2) : "{}";
-      // One-line preview: first key=value pair
-      let preview = "";
-      try {
-        const obj = typeof inputData === "string" ? JSON.parse(inputData) : inputData;
-        const keys = Object.keys(obj ?? {});
-        if (keys.length) {
-          const val = String(obj[keys[0]]).slice(0, 50);
-          preview = `${keys[0]}: ${val}${val.length >= 50 ? "…" : ""}`;
-        }
-      } catch {
-        /* ignore */
-      }
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-tool">${escHtml(toolIcon(name))} TOOL</span>
-          <span class="reasoning-entry-name">${escHtml(formatToolName(name))}</span>
-        </div>
-        ${preview ? `<div class="reasoning-tool-preview">${escHtml(preview)}</div>` : ""}
-        <div class="reasoning-tool-detail">${escHtml(inputJson)}</div>
-      `;
-      // Toggle expand on click
-      entry.style.cursor = "pointer";
-      entry.addEventListener("click", () => entry.classList.toggle("expanded"));
-      break;
-    }
-
-    // ── Tool result ─────────────────────────────────────────────────
-    case "tool_result": {
-      const content = Array.isArray(block.content)
-        ? block.content.map((b) => b.text ?? "").join("\n")
-        : String(block.content ?? "");
-      const chars = content.length;
-      const isError = block.is_error === true;
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-result">${isError ? "⚠ ERROR" : "↩ RESULT"}</span>
-          <span class="reasoning-entry-name">${chars} chars</span>
-        </div>
-        <div class="reasoning-result-meta">${escHtml(content.slice(0, 80))}${chars > 80 ? "…" : ""}</div>
-      `;
-      break;
-    }
-
-    default:
-      return; // unknown block — skip
-  }
-
-  feed.appendChild(entry);
-  feed.scrollTop = feed.scrollHeight;
-};
-
-// ── Reasoning Panel — run separator ──────────────────────────────────
-window.injectReasoningRunSeparator = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-  const now = new Date();
-  const hhmm = now.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  });
-  const sep = document.createElement("div");
-  sep.className = "reasoning-run-sep";
-  sep.innerHTML = `<span class="reasoning-run-sep-label">RUN · ${hhmm}</span>`;
-  feed.appendChild(sep);
-  feed.scrollTop = feed.scrollHeight;
-};
-
-// ── Reasoning Panel — clear ───────────────────────────────────────────
-window.clearReasoningPanel = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  feed.innerHTML = `
-    <div class="reasoning-empty" id="reasoning-empty">
-      <div class="reasoning-empty-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <circle cx="12" cy="12" r="3"/>
-          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
-        </svg>
-      </div>
-      <div class="reasoning-empty-text">No reasoning yet</div>
-    </div>`;
-};
-
-// ── Reasoning Panel — live thinking update (streaming) ───────────────
-// Called repeatedly during a run to accumulate thinking text in real-time.
-// Creates a single "live" entry and updates it in-place until finalized.
-let _liveThinkEntry = null;
-let _liveThinkBody = null;
-let _liveThinkBuffer = "";
-
-window.openLiveThinking = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-  _liveThinkBuffer = "";
-  const entry = document.createElement("div");
-  entry.className = "reasoning-entry";
-  entry.id = "reasoning-live-think";
-  entry.innerHTML = `
-    <div class="reasoning-entry-header">
-      <span class="reasoning-entry-badge badge-think">◈ THINK</span>
-      <span class="reasoning-entry-name" id="reasoning-live-name">…</span>
-    </div>
-    <div class="reasoning-think-body" id="reasoning-live-body"></div>
-  `;
-  feed.appendChild(entry);
-  _liveThinkEntry = entry;
-  _liveThinkBody = entry.querySelector("#reasoning-live-body");
-  feed.scrollTop = feed.scrollHeight;
-};
-
-window.updateLiveThinking = function (text) {
-  if (!_liveThinkBody) {
-    window.openLiveThinking();
-  }
-  _liveThinkBuffer += text;
-  if (_liveThinkBody) {
-    _liveThinkBody.textContent = _liveThinkBuffer;
-    const feed = document.getElementById("reasoning-feed");
-    if (feed) {
-      feed.scrollTop = feed.scrollHeight;
-    }
-  }
-  // Update name preview
-  const nameEl = _liveThinkEntry?.querySelector("#reasoning-live-name");
-  if (nameEl) {
-    const firstLine = _liveThinkBuffer.split("\n")[0].slice(0, 60);
-    nameEl.textContent = firstLine + (_liveThinkBuffer.length > 60 ? "…" : "");
-  }
-};
-
-window.closeLiveThinking = function () {
-  if (_liveThinkEntry) {
-    _liveThinkEntry.removeAttribute("id");
-    _liveThinkEntry = null;
-    _liveThinkBody = null;
-    _liveThinkBuffer = "";
-  }
-};
-
-// ── Extract thinking text from a content array (for streaming deltas) ─
-window.extractThinkingText = function (content) {
-  if (!content) {
-    return "";
-  }
-  if (typeof content === "string") {
-    return "";
-  }
-  if (Array.isArray(content)) {
-    return content
-      .filter((b) => b?.type === "thinking")
-      .map((b) => b.thinking ?? "")
-      .join("");
-  }
-  if (content?.content) {
-    return window.extractThinkingText(content.content);
-  }
-  return "";
-};
-
-// ── Main render function — builds a full message element ──────────────
-window.renderMessage = function (message) {
-  const { role, content, timestamp } = message;
-  const isUser = role === "user";
-
-  // ── Filter noisy/internal messages ────────────────────────────────
-  const _msgText = Array.isArray(content)
-    ? content
-        .filter((b) => b.type === "text")
-        .map((b) => b.text ?? "")
-        .join("")
-        .trim()
-    : extractText(content).trim();
-
-  // NOTE: Monologue suppression moved server-side to OutputNormalizer.
-
-  // Plugin context messages (e.g. "[Outlook 365] Not connected...")
-  if (role === "user" && /^\[.+\]\s+(Not connected|Connected as)\b/i.test(_msgText)) {
-    if (typeof window.appendToReasoningPanel === "function") {
-      window.appendToReasoningPanel({ type: "text", text: "[Plugin context]" });
-    }
-    return null;
-  }
-
-  // Post-generation verification user messages
-  if (
-    role === "user" &&
-    /^Review your response against the original user request/i.test(_msgText)
-  ) {
-    if (typeof window.appendToReasoningPanel === "function") {
-      window.appendToReasoningPanel({ type: "text", text: "[Post-generation verification]" });
-    }
-    return null;
-  }
-
-  const wrapper = document.createElement("div");
-  wrapper.className = `message ${isUser ? "user-msg" : "symi-msg"}`;
-
-  const bubble = document.createElement("div");
-  bubble.className = isUser ? "bubble" : "bubble stream-bubble done";
-
-  // Add copy button for assistant messages
-  if (!isUser) {
-    const copyBtn = document.createElement("button");
-    copyBtn.className = "msg-copy-btn";
-    copyBtn.title = "Copy";
-    copyBtn.addEventListener("click", function () {
-      window.copyMessage(this);
-    });
-    copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-      <rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/>
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
-    </svg>`;
-    bubble.appendChild(copyBtn);
-  }
-
-  // Render each content block — route reasoning/tool blocks to the side panel
-  const REASONING_TYPES = new Set(["thinking", "tool_use", "tool_result", "toolCall"]);
-  const isNarration = !isUser && message.stopReason === "toolUse";
-  const blocks = Array.isArray(content) ? content : [{ type: "text", text: extractText(content) }];
-  for (const block of blocks) {
-    if (!isUser && REASONING_TYPES.has(block.type)) {
-      // Route to Reasoning Panel — keep response bubble clean
-      window.appendToReasoningPanel(block);
-      continue;
-    }
-    // Text blocks in tool-use messages are narration — route to Reasoning Panel
-    if (isNarration && block.type === "text") {
-      window.appendToReasoningPanel(block);
-      continue;
-    }
-    const el = renderBlock(block);
-    if (el.childNodes.length || el.innerHTML) {
-      bubble.appendChild(el);
-    }
-  }
-
-  // If the bubble has no visible content (only copy button), skip it entirely
-  const visibleChildren = bubble.querySelectorAll(
-    ".msg-text, .msg-image, .msg-thinking, .msg-tool-card, .msg-tool-result",
-  );
-  if (!isUser && visibleChildren.length === 0) {
-    return null;
-  }
-
-  // Timestamp
-  if (timestamp) {
-    const ts = document.createElement("div");
-    ts.className = "msg-timestamp";
-    ts.textContent = formatTime(timestamp);
-    bubble.appendChild(ts);
-  }
-
-  wrapper.appendChild(bubble);
-  wrapper.appendChild(
-    Object.assign(document.createElement("div"), { className: "message-clearfix" }),
-  );
-  return wrapper;
-};
-
-// ── Re-render for streaming (plain text, no markdown until final) ──────
-window.renderStreamText = function (el, text) {
-  if (!el) {
-    return;
-  }
-  el.textContent = text;
-};
-
-// ── Apply highlight.js to any unhighlighted code blocks ──────────────
-window.applyHighlighting = function (container) {
-  if (typeof hljs === "undefined") {
-    return;
-  }
-  container.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
-    hljs.highlightElement(block);
-  });
-};