pi-studio 0.5.52 → 0.5.54

package/client/studio-client.js

@@ -61,6 +61,10 @@
       const sourceBadgeEl = document.getElementById("sourceBadge");
       const syncBadgeEl = document.getElementById("syncBadge");
       let critiqueViewEl = document.getElementById("critiqueView");
+      const responseActionsEl = document.getElementById("responseActions");
+      const responseWrapEl = responseActionsEl && typeof responseActionsEl.closest === "function"
+        ? responseActionsEl.closest(".response-wrap")
+        : null;
       const referenceBadgeEl = document.getElementById("referenceBadge");
       const editorViewSelect = document.getElementById("editorViewSelect");
       const rightViewSelect = document.getElementById("rightViewSelect");
@@ -179,6 +183,10 @@
       let latestCritiqueNotesNormalized = "";
       let responseHistory = [];
       let responseHistoryIndex = -1;
+      let traceState = null;
+      let traceFilter = "all";
+      let traceAutoScroll = true;
+      let traceRenderRaf = null;
       let studioRunChainActive = false;
       let queuedSteeringCount = 0;
       let agentBusyFromServer = false;
@@ -231,6 +239,262 @@
         return changed;
       }
 
+      function createEmptyTraceState() {
+        return {
+          runId: null,
+          requestId: null,
+          requestKind: null,
+          status: "idle",
+          startedAt: null,
+          updatedAt: null,
+          entries: [],
+        };
+      }
+
+      function normalizeTraceStatus(status) {
+        return status === "running" || status === "complete" ? status : "idle";
+      }
+
+      function normalizeTraceEntryStatus(status) {
+        return status === "streaming" || status === "pending" || status === "complete" || status === "error"
+          ? status
+          : "pending";
+      }
+
+      function normalizeTraceEntry(entry, fallbackIndex) {
+        if (!entry || typeof entry !== "object") return null;
+        if (entry.type === "assistant") {
+          return {
+            id: typeof entry.id === "string" && entry.id.trim() ? entry.id.trim() : ("trace-assistant-" + fallbackIndex),
+            type: "assistant",
+            startedAt: parseFiniteNumber(entry.startedAt) || Date.now(),
+            updatedAt: parseFiniteNumber(entry.updatedAt) || Date.now(),
+            thinking: typeof entry.thinking === "string" ? entry.thinking : "",
+            text: typeof entry.text === "string" ? entry.text : "",
+            status: normalizeTraceEntryStatus(entry.status),
+            stopReason: typeof entry.stopReason === "string" && entry.stopReason.trim() ? entry.stopReason.trim() : null,
+          };
+        }
+        if (entry.type === "tool") {
+          return {
+            id: typeof entry.id === "string" && entry.id.trim() ? entry.id.trim() : ("trace-tool-" + fallbackIndex),
+            type: "tool",
+            toolCallId: typeof entry.toolCallId === "string" ? entry.toolCallId : ("tool-" + fallbackIndex),
+            toolName: typeof entry.toolName === "string" ? entry.toolName : "tool",
+            label: parseNonEmptyString(entry.label),
+            argsSummary: parseNonEmptyString(entry.argsSummary),
+            output: typeof entry.output === "string" ? entry.output : "",
+            startedAt: parseFiniteNumber(entry.startedAt) || Date.now(),
+            updatedAt: parseFiniteNumber(entry.updatedAt) || Date.now(),
+            status: normalizeTraceEntryStatus(entry.status),
+            isError: Boolean(entry.isError),
+          };
+        }
+        return null;
+      }
+
+      function normalizeTraceState(raw) {
+        const fallback = createEmptyTraceState();
+        if (!raw || typeof raw !== "object") return fallback;
+        const entries = Array.isArray(raw.entries)
+          ? raw.entries.map((entry, index) => normalizeTraceEntry(entry, index)).filter(Boolean)
+          : [];
+        return {
+          runId: parseNonEmptyString(raw.runId),
+          requestId: parseNonEmptyString(raw.requestId),
+          requestKind: parseNonEmptyString(raw.requestKind),
+          status: normalizeTraceStatus(raw.status),
+          startedAt: parseFiniteNumber(raw.startedAt),
+          updatedAt: parseFiniteNumber(raw.updatedAt),
+          entries,
+        };
+      }
+
+      function ensureTraceState() {
+        if (!traceState) traceState = createEmptyTraceState();
+        return traceState;
+      }
+
+      function replaceTraceState(nextState) {
+        traceState = normalizeTraceState(nextState);
+        renderTraceViewIfActive();
+      }
+
+      function upsertTraceEntry(entry) {
+        const normalized = normalizeTraceEntry(entry, ensureTraceState().entries.length);
+        if (!normalized) return;
+        const state = ensureTraceState();
+        const index = state.entries.findIndex((candidate) => candidate.id === normalized.id);
+        if (index >= 0) {
+          state.entries[index] = normalized;
+        } else {
+          state.entries.push(normalized);
+        }
+        state.updatedAt = normalized.updatedAt;
+        renderTraceViewIfActive();
+      }
+
+      function appendTraceAssistantDelta(entryId, deltaKind, delta, updatedAt) {
+        if (typeof delta !== "string" || !delta) return;
+        const state = ensureTraceState();
+        const targetId = typeof entryId === "string" && entryId.trim() ? entryId.trim() : null;
+        let entry = targetId ? state.entries.find((candidate) => candidate.id === targetId) : null;
+        if (!entry || entry.type !== "assistant") {
+          entry = normalizeTraceEntry({
+            id: targetId || ("trace-assistant-live-" + Date.now()),
+            type: "assistant",
+            startedAt: updatedAt,
+            updatedAt,
+            thinking: "",
+            text: "",
+            status: "streaming",
+            stopReason: null,
+          }, state.entries.length);
+          if (!entry) return;
+          state.entries.push(entry);
+        }
+        if (deltaKind === "thinking") {
+          entry.thinking += delta;
+        } else {
+          entry.text += delta;
+        }
+        entry.status = "streaming";
+        entry.updatedAt = parseFiniteNumber(updatedAt) || Date.now();
+        state.updatedAt = entry.updatedAt;
+        renderTraceViewIfActive();
+      }
+
+      function updateTraceStatusFromMessage(message) {
+        if (!message || typeof message !== "object") return;
+        const state = ensureTraceState();
+        state.runId = parseNonEmptyString(message.runId) || state.runId;
+        if (Object.prototype.hasOwnProperty.call(message, "requestId")) {
+          state.requestId = parseNonEmptyString(message.requestId);
+        }
+        if (Object.prototype.hasOwnProperty.call(message, "requestKind")) {
+          state.requestKind = parseNonEmptyString(message.requestKind);
+        }
+        if (Object.prototype.hasOwnProperty.call(message, "startedAt")) {
+          state.startedAt = parseFiniteNumber(message.startedAt);
+        }
+        if (Object.prototype.hasOwnProperty.call(message, "updatedAt")) {
+          state.updatedAt = parseFiniteNumber(message.updatedAt);
+        }
+        if (Object.prototype.hasOwnProperty.call(message, "status")) {
+          state.status = normalizeTraceStatus(message.status);
+        }
+        renderTraceViewIfActive();
+      }
+
+      function normalizeTraceFilter(filter) {
+        return filter === "thinking" || filter === "tools" ? filter : "all";
+      }
+
+      function setTraceFilter(nextFilter) {
+        const normalized = normalizeTraceFilter(nextFilter);
+        if (traceFilter === normalized) return;
+        traceFilter = normalized;
+        traceAutoScroll = true;
+        renderTraceViewIfActive();
+      }
+
+      function getTraceEntriesForFilter(filterOverride) {
+        const state = traceState || createEmptyTraceState();
+        const filter = normalizeTraceFilter(filterOverride || traceFilter);
+        const entries = Array.isArray(state.entries) ? state.entries : [];
+        if (filter === "tools") {
+          return entries.filter((entry) => entry.type === "tool");
+        }
+        if (filter === "thinking") {
+          return entries.filter((entry) => entry.type === "assistant" && String(entry.thinking || "").trim());
+        }
+        return entries.filter((entry) => {
+          if (entry.type === "assistant") {
+            return Boolean(String(entry.thinking || "").trim() || String(entry.text || "").trim());
+          }
+          return true;
+        });
+      }
+
+      function buildVisibleWorkingText(filterOverride) {
+        const filter = normalizeTraceFilter(filterOverride || traceFilter);
+        const entries = getTraceEntriesForFilter(filter);
+        if (!entries.length) return "";
+
+        if (filter === "thinking") {
+          return entries
+            .map((entry) => entry && entry.type === "assistant" ? String(entry.thinking || "").trim() : "")
+            .filter(Boolean)
+            .join("\n\n");
+        }
+
+        return entries.map((entry) => {
+          if (entry.type === "assistant") {
+            const parts = [];
+            if (String(entry.thinking || "").trim()) {
+              parts.push("[Thinking]\n" + String(entry.thinking || "").trim());
+            }
+            if (filter === "all" && String(entry.text || "").trim()) {
+              parts.push("[Response]\n" + String(entry.text || "").trim());
+            }
+            return ["Assistant", ...parts].join("\n\n").trim();
+          }
+
+          const header = entry.label && entry.label !== entry.toolName
+            ? ("Tool: " + String(entry.toolName || "tool") + " — " + entry.label)
+            : ("Tool: " + String(entry.toolName || "tool"));
+          const parts = [header];
+          if (String(entry.argsSummary || "").trim()) {
+            parts.push("Input:\n" + String(entry.argsSummary || "").trim());
+          }
+          if (String(entry.output || "").trim()) {
+            parts.push("Output:\n" + String(entry.output || "").trim());
+          }
+          return parts.join("\n\n").trim();
+        }).filter(Boolean).join("\n\n---\n\n");
+      }
+
+      function getWorkingDocumentLabel(filterOverride) {
+        const filter = normalizeTraceFilter(filterOverride || traceFilter);
+        if (filter === "thinking") return "working (thinking)";
+        if (filter === "tools") return "working (tools)";
+        return "working";
+      }
+
+      async function copyVisibleWorkingToClipboard() {
+        const content = buildVisibleWorkingText();
+        if (!content.trim()) {
+          setStatus("No visible working details to copy yet.", "warning");
+          return;
+        }
+        try {
+          await navigator.clipboard.writeText(content);
+          setStatus("Copied visible working text.", "success");
+        } catch {
+          setStatus("Clipboard write failed.", "warning");
+        }
+      }
+
+      function loadVisibleWorkingIntoEditor() {
+        const content = buildVisibleWorkingText();
+        if (!content.trim()) {
+          setStatus("No visible working details to load yet.", "warning");
+          return;
+        }
+        setEditorText(content, { preserveScroll: false, preserveSelection: false });
+        setSourceState({ source: "blank", label: getWorkingDocumentLabel(), path: null });
+        setStatus("Loaded visible working into editor.", "success");
+      }
+
+      function renderTraceViewIfActive() {
+        if (rightView !== "trace") return;
+        if (traceRenderRaf !== null) return;
+        traceRenderRaf = window.requestAnimationFrame(() => {
+          traceRenderRaf = null;
+          refreshResponseUi();
+        });
+      }
+
       contextTokens = parseFiniteNumber(document.body && document.body.dataset ? document.body.dataset.contextTokens : null);
       contextWindow = parseFiniteNumber(document.body && document.body.dataset ? document.body.dataset.contextWindow : null);
       contextPercent = parseFiniteNumber(document.body && document.body.dataset ? document.body.dataset.contextPercent : null);
@@ -412,6 +676,17 @@
         if (typeof message.label === "string") summary.label = message.label;
         if (Array.isArray(message.responseHistory)) summary.responseHistoryCount = message.responseHistory.length;
         if (Array.isArray(message.items)) summary.itemsCount = message.items.length;
+        if (message.traceState && typeof message.traceState === "object" && Array.isArray(message.traceState.entries)) {
+          summary.traceEntries = message.traceState.entries.length;
+          summary.traceStatus = message.traceState.status;
+        }
+        if (message.trace && typeof message.trace === "object" && Array.isArray(message.trace.entries)) {
+          summary.traceEntries = message.trace.entries.length;
+          summary.traceStatus = message.trace.status;
+        }
+        if (typeof message.entryId === "string") summary.entryId = message.entryId;
+        if (typeof message.deltaKind === "string") summary.deltaKind = message.deltaKind;
+        if (typeof message.delta === "string") summary.deltaLength = message.delta.length;
         if (typeof message.details === "object" && message.details !== null) summary.details = message.details;
         return summary;
       }
@@ -1419,6 +1694,21 @@
       function updateReferenceBadge() {
         if (!referenceBadgeEl) return;
 
+        if (rightView === "trace") {
+          const state = traceState || createEmptyTraceState();
+          const entryCount = getTraceEntriesForFilter(traceFilter).length;
+          const time = formatReferenceTime(state.startedAt || state.updatedAt);
+          if (state.status === "idle") {
+            referenceBadgeEl.textContent = "Working: no active run yet";
+            return;
+          }
+          const statusLabel = state.status === "running" ? "live" : "complete";
+          referenceBadgeEl.textContent = "Working: " + statusLabel
+            + (entryCount ? (" · " + entryCount + " entr" + (entryCount === 1 ? "y" : "ies")) : "")
+            + (time ? (" · " + time) : "");
+          return;
+        }
+
         if (rightView === "editor-preview") {
           const hasResponse = Boolean(latestResponseMarkdown && latestResponseMarkdown.trim());
           if (hasResponse) {
@@ -1432,26 +1722,6 @@
         }
 
         const hasResponse = Boolean(latestResponseMarkdown && latestResponseMarkdown.trim());
-        const hasThinking = Boolean(latestResponseThinking && latestResponseThinking.trim());
-        if (rightView === "thinking") {
-          if (!hasResponse && !hasThinking) {
-            referenceBadgeEl.textContent = "Thinking: none";
-            return;
-          }
-
-          const time = formatReferenceTime(latestResponseTimestamp);
-          const total = Array.isArray(responseHistory) ? responseHistory.length : 0;
-          const selected = total > 0 && responseHistoryIndex >= 0 && responseHistoryIndex < total
-            ? responseHistoryIndex + 1
-            : 0;
-          const historyPrefix = total > 0 ? "Response history " + selected + "/" + total + " · " : "";
-          const thinkingLabel = hasThinking ? "assistant thinking" : "assistant thinking unavailable";
-          referenceBadgeEl.textContent = time
-            ? historyPrefix + thinkingLabel + " · " + time
-            : historyPrefix + thinkingLabel;
-          return;
-        }
-
         if (!hasResponse) {
           referenceBadgeEl.textContent = "Latest response: none";
           return;
@@ -1527,14 +1797,15 @@
       function updateSyncBadge(normalizedEditorText) {
         if (!syncBadgeEl) return;
 
-        const showingThinking = rightView === "thinking";
-        const hasComparableContent = showingThinking
-          ? Boolean(latestResponseThinking && latestResponseThinking.trim())
-          : latestResponseHasContent;
+        if (rightView === "trace") {
+          syncBadgeEl.hidden = true;
+          syncBadgeEl.classList.remove("sync");
+          return;
+        }
 
-        if (!hasComparableContent) {
+        if (!latestResponseHasContent) {
           syncBadgeEl.hidden = true;
-          syncBadgeEl.textContent = showingThinking ? "In sync with thinking" : "In sync with response";
+          syncBadgeEl.textContent = "In sync with response";
           syncBadgeEl.classList.remove("sync");
           return;
         }
@@ -1542,10 +1813,9 @@
         const normalizedEditor = typeof normalizedEditorText === "string"
           ? normalizedEditorText
           : normalizeForCompare(sourceTextEl.value);
-        const targetNormalized = showingThinking ? latestResponseThinkingNormalized : latestResponseNormalized;
-        const inSync = normalizedEditor === targetNormalized;
+        const inSync = normalizedEditor === latestResponseNormalized;
         syncBadgeEl.hidden = !inSync;
-        syncBadgeEl.textContent = showingThinking ? "In sync with thinking" : "In sync with response";
+        syncBadgeEl.textContent = "In sync with response";
 
         if (inSync) {
           syncBadgeEl.classList.add("sync");
@@ -2194,6 +2464,40 @@
         });
       }
 
+      function handleTracePaneScroll() {
+        if (rightView !== "trace") return;
+        traceAutoScroll = shouldStickTraceToBottom();
+      }
+
+      async function handleTracePaneClick(event) {
+        if (rightView !== "trace") return;
+        const target = event.target;
+        const filterBtn = target instanceof Element ? target.closest("[data-trace-filter]") : null;
+        if (filterBtn) {
+          event.preventDefault();
+          const nextFilter = filterBtn.getAttribute("data-trace-filter") || "all";
+          setTraceFilter(nextFilter);
+          return;
+        }
+        const actionBtn = target instanceof Element ? target.closest("[data-trace-action]") : null;
+        if (!actionBtn) return;
+        event.preventDefault();
+        const action = actionBtn.getAttribute("data-trace-action") || "";
+        if (action === "copy") {
+          await copyVisibleWorkingToClipboard();
+          return;
+        }
+        if (action === "load") {
+          loadVisibleWorkingIntoEditor();
+        }
+      }
+
+      function attachResponsePaneInteractionHandlers() {
+        if (!critiqueViewEl) return;
+        critiqueViewEl.addEventListener("scroll", handleTracePaneScroll);
+        critiqueViewEl.addEventListener("click", handleTracePaneClick);
+      }
+
       function replaceResponsePaneWithClone() {
         const currentEl = critiqueViewEl;
         if (!currentEl || !currentEl.parentNode || typeof currentEl.cloneNode !== "function") {
@@ -2207,6 +2511,7 @@
 
         currentEl.parentNode.replaceChild(replacement, currentEl);
         critiqueViewEl = replacement;
+        attachResponsePaneInteractionHandlers();
         return critiqueViewEl;
       }
 
@@ -2702,7 +3007,134 @@
         }, delay);
       }
 
+      function shouldStickTraceToBottom() {
+        if (!critiqueViewEl) return true;
+        const remaining = critiqueViewEl.scrollHeight - critiqueViewEl.scrollTop - critiqueViewEl.clientHeight;
+        return remaining < 56;
+      }
+
+      function buildTracePanelHtml() {
+        const state = traceState || createEmptyTraceState();
+        const filter = normalizeTraceFilter(traceFilter);
+        const entries = getTraceEntriesForFilter(filter);
+        const visibleWorking = buildVisibleWorkingText(filter);
+        const hasVisibleContent = Boolean(visibleWorking.trim());
+        const started = formatReferenceTime(state.startedAt || state.updatedAt);
+        const statusLabel = state.status === "running"
+          ? "Live"
+          : (state.status === "complete" ? "Complete" : "Idle");
+        const filterMeta = filter === "thinking"
+          ? "Thinking only"
+          : (filter === "tools" ? "Tools only" : null);
+        const toolbar = "<div class='trace-toolbar'>"
+          + "<div class='trace-summary'>"
+          + "<span class='trace-summary-badge'>Working</span>"
+          + "<span class='trace-summary-status trace-status-" + escapeHtml(String(state.status || "idle")) + "'>" + escapeHtml(statusLabel) + "</span>"
+          + (started ? ("<span class='trace-summary-meta'>Started " + escapeHtml(started) + "</span>") : "")
+          + (filterMeta ? ("<span class='trace-summary-meta'>" + escapeHtml(filterMeta) + "</span>") : "")
+          + "</div>"
+          + "<div class='trace-controls'>"
+          + "<div class='trace-filter-group' role='tablist' aria-label='Working components'>"
+          + "<button type='button' class='trace-filter-btn" + (filter === "all" ? " is-active" : "") + "' data-trace-filter='all' aria-pressed='" + (filter === "all" ? "true" : "false") + "'>All</button>"
+          + "<button type='button' class='trace-filter-btn" + (filter === "thinking" ? " is-active" : "") + "' data-trace-filter='thinking' aria-pressed='" + (filter === "thinking" ? "true" : "false") + "'>Thinking</button>"
+          + "<button type='button' class='trace-filter-btn" + (filter === "tools" ? " is-active" : "") + "' data-trace-filter='tools' aria-pressed='" + (filter === "tools" ? "true" : "false") + "'>Tools</button>"
+          + "</div>"
+          + "<button type='button' class='trace-action-btn' data-trace-action='load'" + (hasVisibleContent ? "" : " disabled") + ">Load visible into editor</button>"
+          + "<button type='button' class='trace-action-btn' data-trace-action='copy'" + (hasVisibleContent ? "" : " disabled") + ">Copy visible</button>"
+          + "</div>"
+          + "</div>";
+
+        if (!entries.length) {
+          const emptyMessage = filter === "thinking"
+            ? "No thinking steps in this working view yet."
+            : (filter === "tools"
+              ? "No tool steps in this working view yet."
+              : (state.status === "running"
+                ? "Waiting for the first model or tool update…"
+                : "No live working view yet. Start a run or critique to watch working details here."));
+          return "<div class='trace-panel'>" + toolbar + "<div class='trace-empty'>" + escapeHtml(emptyMessage) + "</div></div>";
+        }
+
+        const cards = entries.map((entry) => {
+          if (entry.type === "assistant") {
+            const sections = [];
+            if (String(entry.thinking || "").trim()) {
+              sections.push(
+                "<div class='trace-section'>"
+                + "<div class='trace-section-label'>Thinking</div>"
+                + "<pre class='plain-markdown trace-output'>" + escapeHtml(entry.thinking) + "</pre>"
+                + "</div>"
+              );
+            }
+            if (filter === "all" && String(entry.text || "").trim()) {
+              sections.push(
+                "<div class='trace-section'>"
+                + "<div class='trace-section-label'>Response</div>"
+                + "<pre class='plain-markdown trace-output'>" + escapeHtml(entry.text) + "</pre>"
+                + "</div>"
+              );
+            }
+            if (!sections.length) {
+              sections.push("<div class='trace-empty-inline'>Waiting for streamed content…</div>");
+            }
+            return "<article class='trace-card trace-card-assistant'>"
+              + "<div class='trace-card-header'>"
+              + "<span class='trace-kind-badge'>" + escapeHtml(filter === "thinking" ? "Thinking" : "Assistant") + "</span>"
+              + "<span class='trace-card-meta'>" + escapeHtml(formatReferenceTime(entry.updatedAt) || "live") + "</span>"
+              + "<span class='trace-entry-status trace-entry-status-" + escapeHtml(entry.status) + "'>" + escapeHtml(entry.status === "streaming" ? "Live" : "Complete") + "</span>"
+              + (entry.stopReason ? ("<span class='trace-card-meta'>stop: " + escapeHtml(entry.stopReason) + "</span>") : "")
+              + "</div>"
+              + sections.join("")
+              + "</article>";
+          }
+
+          const title = entry.label || entry.toolName || "tool";
+          const argsSummary = entry.argsSummary
+            ? "<div class='trace-section'><div class='trace-section-label'>Input</div><pre class='plain-markdown trace-output'>" + escapeHtml(entry.argsSummary) + "</pre></div>"
+            : "";
+          const output = entry.output
+            ? "<div class='trace-section'><div class='trace-section-label'>Output</div><pre class='plain-markdown trace-output'>" + escapeHtml(entry.output) + "</pre></div>"
+            : "<div class='trace-empty-inline'>No output yet.</div>";
+          const toolStatusLabel = entry.isError
+            ? "Error"
+            : (entry.status === "streaming" || entry.status === "pending" ? "Live" : "Complete");
+          return "<article class='trace-card trace-card-tool'>"
+            + "<div class='trace-card-header'>"
+            + "<span class='trace-kind-badge'>" + escapeHtml(entry.toolName || "tool") + "</span>"
+            + "<span class='trace-card-title'>" + escapeHtml(title) + "</span>"
+            + "<span class='trace-card-meta'>" + escapeHtml(formatReferenceTime(entry.updatedAt) || "live") + "</span>"
+            + "<span class='trace-entry-status trace-entry-status-" + escapeHtml(entry.status) + "'>" + escapeHtml(toolStatusLabel) + "</span>"
+            + "</div>"
+            + argsSummary
+            + output
+            + "</article>";
+        }).join("");
+
+        return "<div class='trace-panel'>" + toolbar + "<div class='trace-list'>" + cards + "</div></div>";
+      }
+
+      function renderTraceView() {
+        if (!critiqueViewEl) return;
+        const shouldStick = traceAutoScroll || shouldStickTraceToBottom();
+        const previousScrollTop = critiqueViewEl.scrollTop;
+        finishPreviewRender(critiqueViewEl);
+        critiqueViewEl.innerHTML = buildTracePanelHtml();
+        critiqueViewEl.classList.remove("response-scroll-resetting");
+        if (shouldStick) {
+          critiqueViewEl.scrollTop = critiqueViewEl.scrollHeight;
+          traceAutoScroll = true;
+        } else {
+          critiqueViewEl.scrollTop = previousScrollTop;
+        }
+        scheduleResponsePaneRepaintNudge();
+      }
+
       function renderActiveResult() {
+        if (rightView === "trace") {
+          renderTraceView();
+          return;
+        }
+
         if (rightView === "editor-preview") {
           const editorText = prepareEditorTextForPreview(sourceTextEl.value || "");
           if (!editorText.trim()) {
@@ -2721,17 +3153,6 @@
           return;
         }
 
-        if (rightView === "thinking") {
-          const thinking = latestResponseThinking;
-          finishPreviewRender(critiqueViewEl);
-          critiqueViewEl.innerHTML = thinking && thinking.trim()
-            ? buildPlainMarkdownHtml(thinking)
-            : "<pre class='plain-markdown'>No thinking available for this response.</pre>";
-          applyPendingResponseScrollReset();
-          scheduleResponsePaneRepaintNudge();
-          return;
-        }
-
         const markdown = latestResponseMarkdown;
         if (!markdown || !markdown.trim()) {
           finishPreviewRender(critiqueViewEl);
@@ -2775,55 +3196,43 @@
 
       function updateResultActionButtons(normalizedEditorText) {
         const hasResponse = latestResponseHasContent;
-        const hasThinking = Boolean(latestResponseThinking && latestResponseThinking.trim());
         const normalizedEditor = typeof normalizedEditorText === "string"
           ? normalizedEditorText
           : normalizeForCompare(sourceTextEl.value);
         const responseLoaded = hasResponse && normalizedEditor === latestResponseNormalized;
-        const thinkingLoaded = hasThinking && normalizedEditor === latestResponseThinkingNormalized;
         const isCritiqueResponse = hasResponse && latestResponseIsStructuredCritique;
-        const showingThinking = rightView === "thinking";
+        const showingTrace = rightView === "trace";
+
+        if (responseWrapEl) {
+          responseWrapEl.hidden = showingTrace;
+        }
 
         const critiqueNotes = isCritiqueResponse ? latestCritiqueNotes : "";
         const critiqueNotesLoaded = Boolean(critiqueNotes) && normalizedEditor === latestCritiqueNotesNormalized;
 
-        if (showingThinking) {
-          loadResponseBtn.hidden = false;
-          loadCritiqueNotesBtn.hidden = true;
-          loadCritiqueFullBtn.hidden = true;
-
-          loadResponseBtn.disabled = uiBusy || !hasThinking || thinkingLoaded;
-          loadResponseBtn.textContent = !hasThinking
-            ? "Thinking unavailable"
-            : (thinkingLoaded ? "Thinking already in editor" : "Load thinking into editor");
-
-          copyResponseBtn.disabled = uiBusy || !hasThinking;
-          copyResponseBtn.textContent = "Copy thinking text";
-        } else {
-          loadResponseBtn.hidden = isCritiqueResponse;
-          loadCritiqueNotesBtn.hidden = !isCritiqueResponse;
-          loadCritiqueFullBtn.hidden = !isCritiqueResponse;
+        loadResponseBtn.hidden = isCritiqueResponse;
+        loadCritiqueNotesBtn.hidden = !isCritiqueResponse;
+        loadCritiqueFullBtn.hidden = !isCritiqueResponse;
 
-          loadResponseBtn.disabled = uiBusy || !hasResponse || responseLoaded || isCritiqueResponse;
-          loadResponseBtn.textContent = responseLoaded ? "Response already in editor" : "Load response into editor";
+        loadResponseBtn.disabled = uiBusy || !hasResponse || responseLoaded || isCritiqueResponse;
+        loadResponseBtn.textContent = responseLoaded ? "Response already in editor" : "Load response into editor";
 
-          loadCritiqueNotesBtn.disabled = uiBusy || !isCritiqueResponse || !critiqueNotes || critiqueNotesLoaded;
-          loadCritiqueNotesBtn.textContent = critiqueNotesLoaded ? "Critique notes already in editor" : "Load critique notes into editor";
+        loadCritiqueNotesBtn.disabled = uiBusy || !isCritiqueResponse || !critiqueNotes || critiqueNotesLoaded;
+        loadCritiqueNotesBtn.textContent = critiqueNotesLoaded ? "Critique notes already in editor" : "Load critique notes into editor";
 
-          loadCritiqueFullBtn.disabled = uiBusy || !isCritiqueResponse || responseLoaded;
-          loadCritiqueFullBtn.textContent = responseLoaded ? "Full critique already in editor" : "Load full critique into editor";
+        loadCritiqueFullBtn.disabled = uiBusy || !isCritiqueResponse || responseLoaded;
+        loadCritiqueFullBtn.textContent = responseLoaded ? "Full critique already in editor" : "Load full critique into editor";
 
-          copyResponseBtn.disabled = uiBusy || !hasResponse;
-          copyResponseBtn.textContent = "Copy response text";
-        }
+        copyResponseBtn.disabled = uiBusy || !hasResponse;
+        copyResponseBtn.textContent = "Copy response text";
 
         const rightPaneShowsPreview = rightView === "preview" || rightView === "editor-preview";
         const exportText = rightView === "editor-preview" ? prepareEditorTextForPreview(sourceTextEl.value) : latestResponseMarkdown;
         const canExportPdf = rightPaneShowsPreview && Boolean(String(exportText || "").trim());
         if (exportPdfBtn) {
           exportPdfBtn.disabled = uiBusy || pdfExportInProgress || !canExportPdf;
-          if (rightView === "thinking") {
-            exportPdfBtn.title = "Thinking view does not support PDF export yet.";
+          if (rightView === "trace") {
+            exportPdfBtn.title = "Working view does not support PDF export.";
           } else if (rightView === "markdown") {
             exportPdfBtn.title = "Switch right pane to Response (Preview) or Editor (Preview) to export PDF.";
           } else if (!canExportPdf) {
@@ -3052,12 +3461,16 @@
       }
 
       function setRightView(nextView) {
+        const previousView = rightView;
         rightView = nextView === "preview"
           ? "preview"
           : (nextView === "editor-preview"
             ? "editor-preview"
-            : (nextView === "thinking" ? "thinking" : "markdown"));
+            : ((nextView === "trace" || nextView === "thinking") ? "trace" : "markdown"));
         rightViewSelect.value = rightView;
+        if (rightView === "trace" && previousView !== "trace") {
+          traceAutoScroll = true;
+        }
 
         if (rightView !== "editor-preview" && responseEditorPreviewTimer) {
           window.clearTimeout(responseEditorPreviewTimer);
@@ -4896,6 +5309,7 @@
           || kind === "blockquote"
           || kind === "list"
           || kind === "math"
+          || kind === "code"
           || kind === "code-line"
           || kind === "diff-line"
           || kind === "text-line";
@@ -6009,7 +6423,7 @@
 
       function buildPreviewSelectionDisplayMap(blockText, kind) {
         const body = buildPreviewSelectionSourceBody(blockText, kind);
-        if (kind === "code-line" || kind === "diff-line" || kind === "text-line") {
+        if (kind === "code" || kind === "code-line" || kind === "diff-line" || kind === "text-line") {
           return buildLiteralPreviewDisplayMap(body.text, body.rawOffsets);
         }
         const inlineMap = buildPreviewInlineDisplayMap(body.text, body.rawOffsets);
@@ -6281,6 +6695,15 @@
           };
         }
 
+        function getChunkText(startLineIndex, endLineIndex) {
+          const safeStartLine = Math.max(0, Math.min(startLineIndex, Math.max(0, lines.length - 1)));
+          const safeEndLine = Math.max(safeStartLine, Math.min(endLineIndex, Math.max(0, lines.length - 1)));
+          return source.slice(
+            lineOffsets[safeStartLine] || 0,
+            (lineOffsets[safeEndLine] || 0) + getLine(safeEndLine).length,
+          );
+        }
+
         const blocks = [];
         let index = 0;
 
@@ -6413,7 +6836,11 @@
             }
             endParagraph = i;
           }
-          blocks.push(makeBlock("paragraph", index, endParagraph));
+          const paragraphText = getChunkText(index, endParagraph);
+          const markdownFigureCaption = annotationHelpers && typeof annotationHelpers.extractStandaloneMarkdownImageCaptionText === "function"
+            ? annotationHelpers.extractStandaloneMarkdownImageCaptionText(paragraphText)
+            : null;
+          blocks.push(makeBlock(markdownFigureCaption != null ? "figure" : "paragraph", index, endParagraph));
           index = endParagraph + 1;
         }
 
@@ -6732,6 +7159,42 @@
         });
       }
 
+      function isPreviewMediaOnlyParagraphElement(element) {
+        if (!element || !(element instanceof Element)) return false;
+        if ((element.tagName ? element.tagName.toUpperCase() : "") !== "P") return false;
+
+        let hasMedia = false;
+        for (const childNode of Array.from(element.childNodes || [])) {
+          if (!childNode) continue;
+          if (childNode.nodeType === Node.TEXT_NODE) {
+            if (normalizeVisiblePreviewText(childNode.nodeValue || "")) {
+              return false;
+            }
+            continue;
+          }
+          if (!(childNode instanceof Element)) continue;
+
+          const childTag = childNode.tagName ? childNode.tagName.toUpperCase() : "";
+          if (childTag === "BR") continue;
+          if (childTag === "IMG" || childTag === "EMBED" || childTag === "OBJECT" || childTag === "IFRAME" || childTag === "CANVAS") {
+            hasMedia = true;
+            continue;
+          }
+
+          const nestedMedia = typeof childNode.querySelector === "function"
+            ? childNode.querySelector("img, embed, object, iframe, canvas")
+            : null;
+          if (nestedMedia && !buildNormalizedPreviewSearchText(childNode)) {
+            hasMedia = true;
+            continue;
+          }
+
+          return false;
+        }
+
+        return hasMedia;
+      }
+
       function getPreviewCommentTargetKind(element) {
         if (!element || !(element instanceof Element)) return "";
         if (element.classList && element.classList.contains("studio-mathjax-fallback-display")) {
@@ -6742,12 +7205,12 @@
         }
         const tag = element.tagName ? element.tagName.toUpperCase() : "";
         if (/^H[1-6]$/.test(tag)) return "heading";
-        if (tag === "P") return "paragraph";
+        if (tag === "P") return isPreviewMediaOnlyParagraphElement(element) ? "figure" : "paragraph";
         if (tag === "FIGURE") {
           if (element.classList && element.classList.contains("studio-algorithm-block")) {
             return "algorithm";
           }
-          return editorLanguage === "latex" ? "figure" : "";
+          return "figure";
         }
         if (tag === "DIV" && element.classList) {
           if (element.classList.contains("studio-display-equation")) {
@@ -6854,6 +7317,14 @@
           const match = blockText.trim().match(/^\\(newpage|pagebreak|clearpage)/i);
           return match ? String(match[1] || "").toLowerCase() : "page-break";
         }
+        if (sourceBlock.kind === "figure") {
+          const figureCaption = annotationHelpers && typeof annotationHelpers.extractStandaloneMarkdownImageCaptionText === "function"
+            ? annotationHelpers.extractStandaloneMarkdownImageCaptionText(blockText)
+            : null;
+          if (figureCaption != null) {
+            return normalizeVisiblePreviewText(figureCaption);
+          }
+        }
         if (supportsPreviewSelectionCommentsForBlockKind(sourceBlock.kind)) {
           return normalizeVisiblePreviewText(buildPreviewSelectionDisplayMap(blockText, sourceBlock.kind).text);
         }
@@ -6874,6 +7345,23 @@
         return normalizeVisiblePreviewText(blockText);
       }
 
+      function getPreviewFigureSearchText(element) {
+        if (!element || !(element instanceof Element)) return "";
+        const visibleText = buildNormalizedPreviewSearchText(element);
+        if (visibleText) return visibleText;
+
+        const imageNodes = (element.tagName ? element.tagName.toUpperCase() : "") === "IMG"
+          ? [element]
+          : (typeof element.querySelectorAll === "function" ? Array.from(element.querySelectorAll("img[alt], img[title]")) : []);
+        const altText = imageNodes
+          .filter((imageEl) => imageEl instanceof Element)
+          .map((imageEl) => imageEl.getAttribute("alt") || imageEl.getAttribute("title") || "")
+          .map((text) => normalizeVisiblePreviewText(text))
+          .filter(Boolean)
+          .join(" ");
+        return altText;
+      }
+
       function getNormalizedPreviewCommentTargetText(targetEntry) {
         if (!targetEntry) return "";
         if (typeof targetEntry.normalizedText === "string") return targetEntry.normalizedText;
@@ -6882,6 +7370,10 @@
           targetEntry.normalizedText = String(element && element.getAttribute ? (element.getAttribute("data-page-break-kind") || "page-break") : "page-break").toLowerCase();
           return targetEntry.normalizedText;
         }
+        if (targetEntry.kind === "figure") {
+          targetEntry.normalizedText = getPreviewFigureSearchText(targetEntry.element);
+          return targetEntry.normalizedText;
+        }
         targetEntry.normalizedText = buildNormalizedPreviewSearchText(targetEntry.element);
         return targetEntry.normalizedText;
       }
@@ -8580,6 +9072,10 @@
             }
           }
 
+          if (message.traceState) {
+            replaceTraceState(message.traceState);
+          }
+
           let appliedHistory = false;
           if (Array.isArray(message.responseHistory)) {
             appliedHistory = setResponseHistory(message.responseHistory, {
@@ -8626,6 +9122,26 @@
           return;
         }
 
+        if (message.type === "trace_reset") {
+          replaceTraceState(message.trace);
+          return;
+        }
+
+        if (message.type === "trace_status") {
+          updateTraceStatusFromMessage(message);
+          return;
+        }
+
+        if (message.type === "trace_entry_upsert") {
+          upsertTraceEntry(message.entry);
+          return;
+        }
+
+        if (message.type === "trace_assistant_delta") {
+          appendTraceAssistantDelta(message.entryId, message.deltaKind, message.delta, message.updatedAt);
+          return;
+        }
+
         if (message.type === "request_started") {
           pendingRequestId = typeof message.requestId === "string" ? message.requestId : pendingRequestId;
           pendingKind = typeof message.kind === "string" ? message.kind : "unknown";
@@ -9323,6 +9839,8 @@
         setRightView(rightViewSelect.value);
       });
 
+      attachResponsePaneInteractionHandlers();
+
       followSelect.addEventListener("change", () => {
         followLatest = followSelect.value !== "off";
         if (followLatest && queuedLatestResponse) {
@@ -9565,17 +10083,6 @@
       });
 
       loadResponseBtn.addEventListener("click", () => {
-        if (rightView === "thinking") {
-          if (!latestResponseThinking.trim()) {
-            setStatus("No thinking available for the selected response.", "warning");
-            return;
-          }
-          setEditorText(latestResponseThinking, { preserveScroll: false, preserveSelection: false });
-          setSourceState({ source: "blank", label: "assistant thinking", path: null });
-          setStatus("Loaded thinking into editor.", "success");
-          return;
-        }
-
         if (!latestResponseMarkdown.trim()) {
           setStatus("No response available yet.", "warning");
           return;
@@ -9614,15 +10121,15 @@
       });
 
       copyResponseBtn.addEventListener("click", async () => {
-        const content = rightView === "thinking" ? latestResponseThinking : latestResponseMarkdown;
+        const content = latestResponseMarkdown;
         if (!content.trim()) {
-          setStatus(rightView === "thinking" ? "No thinking available yet." : "No response available yet.", "warning");
+          setStatus("No response available yet.", "warning");
           return;
         }
 
         try {
           await navigator.clipboard.writeText(content);
-          setStatus(rightView === "thinking" ? "Copied thinking text." : "Copied response text.", "success");
+          setStatus("Copied response text.", "success");
         } catch (error) {
           setStatus("Clipboard write failed.", "warning");
         }