@symerian/symi 2.0.10 → 2.0.12

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

@@ -497,6 +497,216 @@ function formatTime(ts) {
 // 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) {
+    // ── 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 ───────────────────────────────────────────────────
+    case "tool_use": {
+      const name = block.name ?? "tool";
+      const inputJson = block.input ? JSON.stringify(block.input, null, 2) : "{}";
+      // One-line preview: first key=value pair
+      let preview = "";
+      try {
+        const keys = Object.keys(block.input ?? {});
+        if (keys.length) {
+          const val = String(block.input[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;
@@ -523,9 +733,15 @@ window.renderMessage = function (message) {
     bubble.appendChild(copyBtn);
   }
 
-  // Render each content block
+  // Render each content block — route reasoning/tool blocks to the side panel
+  const REASONING_TYPES = new Set(["thinking", "tool_use", "tool_result"]);
   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;
+    }
     const el = renderBlock(block);
     if (el.childNodes.length || el.innerHTML) {
       bubble.appendChild(el);