pi-studio 0.5.51 → 0.5.53

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");
@@ -104,6 +108,7 @@
       const leftFocusBtn = document.getElementById("leftFocusBtn");
       const rightFocusBtn = document.getElementById("rightFocusBtn");
       const reviewNotesBtn = document.getElementById("reviewNotesBtn");
+      const outlineBtn = document.getElementById("outlineBtn");
       const scratchpadBtn = document.getElementById("scratchpadBtn");
       const scratchpadOverlayEl = document.getElementById("scratchpadOverlay");
       const scratchpadDialogEl = document.getElementById("scratchpadDialog");
@@ -114,6 +119,13 @@
       const scratchpadClearBtn = document.getElementById("scratchpadClearBtn");
       const scratchpadCloseBtn = document.getElementById("scratchpadCloseBtn");
       const scratchpadDoneBtn = document.getElementById("scratchpadDoneBtn");
+      const outlineOverlayEl = document.getElementById("outlineOverlay");
+      const outlineDialogEl = document.getElementById("outlineDialog");
+      const outlineMetaEl = document.getElementById("outlineMeta");
+      const outlineListEl = document.getElementById("outlineList");
+      const outlineEmptyStateEl = document.getElementById("outlineEmptyState");
+      const outlineCloseBtn = document.getElementById("outlineCloseBtn");
+      const outlineDoneBtn = document.getElementById("outlineDoneBtn");
       const reviewNotesOverlayEl = document.getElementById("reviewNotesOverlay");
       const reviewNotesDialogEl = document.getElementById("reviewNotesDialog");
       const reviewNotesMetaEl = document.getElementById("reviewNotesMeta");
@@ -171,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;
@@ -223,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);
@@ -305,6 +577,8 @@
       let reviewNotesReturnFocusEl = null;
       let reviewNotesPersistTimer = null;
       let reviewNotesLoadNonce = 0;
+      let outlineEntries = [];
+      let outlineReturnFocusEl = null;
       let pendingReviewNoteFocusId = null;
       let pendingReviewNoteInlineFocusId = null;
       let activePreviewCommentSelection = null;
@@ -402,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;
       }
@@ -1130,6 +1415,12 @@
           && typeof reviewNotesDialogEl.contains === "function"
           && reviewNotesDialogEl.contains(event.target)
         );
+        const outlineOwnsEvent = Boolean(
+          outlineDialogEl
+          && event.target
+          && typeof outlineDialogEl.contains === "function"
+          && outlineDialogEl.contains(event.target)
+        );
 
         if (isScratchpadOpen() && plainEscape) {
           event.preventDefault();
@@ -1143,7 +1434,13 @@
           return;
         }
 
-        if (scratchpadOwnsEvent || reviewNotesOwnsEvent) {
+        if (isOutlineOpen() && plainEscape) {
+          event.preventDefault();
+          closeOutline();
+          return;
+        }
+
+        if (scratchpadOwnsEvent || reviewNotesOwnsEvent || outlineOwnsEvent) {
           return;
         }
 
@@ -1397,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) {
@@ -1410,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;
@@ -1505,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;
         }
@@ -1520,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");
@@ -2172,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") {
@@ -2185,6 +2511,7 @@
 
         currentEl.parentNode.replaceChild(replacement, currentEl);
         critiqueViewEl = replacement;
+        attachResponsePaneInteractionHandlers();
         return critiqueViewEl;
       }
 
@@ -2680,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()) {
@@ -2699,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);
@@ -2753,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");
+        loadResponseBtn.hidden = isCritiqueResponse;
+        loadCritiqueNotesBtn.hidden = !isCritiqueResponse;
+        loadCritiqueFullBtn.hidden = !isCritiqueResponse;
 
-          copyResponseBtn.disabled = uiBusy || !hasThinking;
-          copyResponseBtn.textContent = "Copy thinking text";
-        } else {
-          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) {
@@ -2991,6 +3422,7 @@
           scheduleEditorMetaUpdate();
         }
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
       }
 
       function setEditorView(nextView) {
@@ -3025,15 +3457,20 @@
         }
         updateReviewNotesUi();
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
       }
 
       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);
@@ -4025,6 +4462,10 @@
         return Boolean(scratchpadOverlayEl && !scratchpadOverlayEl.hidden);
       }
 
+      function isOutlineOpen() {
+        return Boolean(outlineOverlayEl && !outlineOverlayEl.hidden);
+      }
+
       function isReviewNotesOpen() {
         return Boolean(reviewNotesOverlayEl && !reviewNotesOverlayEl.hidden);
       }
@@ -4198,6 +4639,400 @@
         };
       }
 
+      function buildOutlineLineIndex(text) {
+        const source = String(text || "").replace(/\r\n/g, "\n");
+        const lines = source.split("\n");
+        const lineOffsets = [];
+        let runningOffset = 0;
+        for (const line of lines) {
+          lineOffsets.push(runningOffset);
+          runningOffset += line.length + 1;
+        }
+        return { source, lines, lineOffsets };
+      }
+
+      function makeOutlineEntry(options) {
+        const entry = options && typeof options === "object" ? options : {};
+        const label = typeof entry.label === "string" ? entry.label.trim() : "";
+        if (!label) return null;
+        const selectionStart = Math.max(0, Math.floor(Number(entry.selectionStart) || 0));
+        const selectionEnd = Math.max(selectionStart, Math.floor(Number(entry.selectionEnd) || selectionStart));
+        return {
+          id: typeof entry.id === "string" && entry.id ? entry.id : makeRequestId(),
+          kind: typeof entry.kind === "string" && entry.kind ? entry.kind : "section",
+          depth: Math.max(1, Math.floor(Number(entry.depth) || 1)),
+          label,
+          lineStart: Math.max(1, Math.floor(Number(entry.lineStart) || 1)),
+          lineEnd: Math.max(Math.max(1, Math.floor(Number(entry.lineStart) || 1)), Math.floor(Number(entry.lineEnd) || Math.max(1, Math.floor(Number(entry.lineStart) || 1)))),
+          selectionStart,
+          selectionEnd,
+          selectedText: typeof entry.selectedText === "string" ? entry.selectedText : "",
+          selectedDisplayText: typeof entry.selectedDisplayText === "string" && entry.selectedDisplayText ? entry.selectedDisplayText : label,
+        };
+      }
+
+      function getOutlineKindLabel(kind) {
+        switch (String(kind || "")) {
+          case "heading": return "Heading";
+          case "section": return "Section";
+          case "subsection": return "Subsection";
+          case "subsubsection": return "Subsubsection";
+          case "paragraph": return "Paragraph";
+          case "subparagraph": return "Subparagraph";
+          case "class": return "Class";
+          case "function": return "Function";
+          case "interface": return "Interface";
+          case "enum": return "Enum";
+          case "type": return "Type";
+          case "struct": return "Struct";
+          case "module": return "Module";
+          case "macro": return "Macro";
+          case "file": return "File";
+          case "hunk": return "Hunk";
+          default: return "Item";
+        }
+      }
+
+      function getOutlineKindBadge(kind) {
+        switch (String(kind || "")) {
+          case "section": return "§";
+          case "subsection": return "§§";
+          case "subsubsection": return "§3";
+          case "paragraph": return "¶";
+          case "subparagraph": return "¶2";
+          case "class": return "class";
+          case "function": return "def";
+          case "interface": return "iface";
+          case "enum": return "enum";
+          case "type": return "type";
+          case "struct": return "struct";
+          case "module": return "mod";
+          case "macro": return "macro";
+          case "file": return "file";
+          case "hunk": return "@@";
+          default: return "#";
+        }
+      }
+
+      function scanMarkdownOutlineEntries(text) {
+        const { source, lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        let activeFence = null;
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const fenceMatch = line.match(/^ {0,3}(`{3,}|~{3,})/);
+          if (fenceMatch) {
+            if (!activeFence) {
+              activeFence = fenceMatch[1];
+            } else if (fenceMatch[1][0] === activeFence[0] && fenceMatch[1].length >= activeFence.length) {
+              activeFence = null;
+            }
+            continue;
+          }
+          if (activeFence) continue;
+
+          const atxMatch = line.match(/^ {0,3}(#{1,6})[ \t]+(.+?)(?:[ \t]+#+[ \t]*)?$/);
+          if (atxMatch) {
+            const label = normalizeVisiblePreviewText(atxMatch[2] || "");
+            const entry = makeOutlineEntry({
+              kind: atxMatch[1].length === 1 ? "section" : atxMatch[1].length === 2 ? "subsection" : atxMatch[1].length === 3 ? "subsubsection" : "heading",
+              depth: atxMatch[1].length,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: lineIndex + 1,
+              selectionStart: lineOffsets[lineIndex] || 0,
+              selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+              selectedText: line,
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            continue;
+          }
+
+          const nextLine = lineIndex + 1 < lines.length ? String(lines[lineIndex + 1] || "") : "";
+          const setextMatch = nextLine.match(/^ {0,3}(=+|-+)\s*$/);
+          if (setextMatch && normalizeVisiblePreviewText(line)) {
+            const depth = setextMatch[1][0] === "=" ? 1 : 2;
+            const label = normalizeVisiblePreviewText(line);
+            const entry = makeOutlineEntry({
+              kind: depth === 1 ? "section" : "subsection",
+              depth,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: lineIndex + 1,
+              selectionStart: lineOffsets[lineIndex] || 0,
+              selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+              selectedText: line,
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            lineIndex += 1;
+          }
+        }
+
+        return entries;
+      }
+
+      const LATEX_OUTLINE_LEVEL_BY_COMMAND = {
+        part: 1,
+        chapter: 1,
+        section: 1,
+        subsection: 2,
+        subsubsection: 3,
+        paragraph: 4,
+        subparagraph: 5,
+      };
+
+      function scanLatexOutlineEntries(text) {
+        const source = String(text || "").replace(/\r\n/g, "\n");
+        const bodyRange = findLatexDocumentBodyRange(source);
+        const bodyStart = Math.max(0, Math.min(bodyRange.start, source.length));
+        const bodyEnd = Math.max(bodyStart, Math.min(bodyRange.end, source.length));
+        const bodyText = source.slice(bodyStart, bodyEnd);
+        const { lines, lineOffsets } = buildOutlineLineIndex(bodyText);
+        const entries = [];
+
+        function getLine(index) {
+          return index >= 0 && index < lines.length ? String(lines[index] || "") : "";
+        }
+
+        function getStrippedLine(index) {
+          return stripLatexPreviewComments(getLine(index)).trim();
+        }
+
+        function isBibliographyCommandLine(index) {
+          return /^\\(?:bibliographystyle|bibliography|printbibliography)\b/i.test(getStrippedLine(index));
+        }
+
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          let chunk = getLine(lineIndex);
+          let endLineIndex = lineIndex;
+          let heading = readLatexHeadingChunk(chunk);
+          if (/^\s*\\(?:part|chapter|section|subsection|subsubsection|paragraph|subparagraph)\b/.test(chunk)) {
+            while (!heading && endLineIndex + 1 < lines.length && endLineIndex < lineIndex + 5) {
+              endLineIndex += 1;
+              chunk += "\n" + getLine(endLineIndex);
+              heading = readLatexHeadingChunk(chunk);
+            }
+          }
+          if (heading) {
+            const label = extractLatexPreviewVisibleText(heading.titleText || "");
+            const kind = String(heading.commandName || "section").replace(/\*$/, "").toLowerCase();
+            const entry = makeOutlineEntry({
+              kind,
+              depth: LATEX_OUTLINE_LEVEL_BY_COMMAND[kind] || 1,
+              label,
+              lineStart: lineIndex + 1,
+              lineEnd: endLineIndex + 1,
+              selectionStart: bodyStart + (lineOffsets[lineIndex] || 0),
+              selectionEnd: bodyStart + (lineOffsets[endLineIndex] || 0) + getLine(endLineIndex).length,
+              selectedText: source.slice(bodyStart + (lineOffsets[lineIndex] || 0), bodyStart + (lineOffsets[endLineIndex] || 0) + getLine(endLineIndex).length),
+              selectedDisplayText: label,
+            });
+            if (entry) entries.push(entry);
+            lineIndex = endLineIndex;
+            continue;
+          }
+
+          if (isBibliographyCommandLine(lineIndex)) {
+            let endLine = lineIndex;
+            while (endLine + 1 < lines.length && isBibliographyCommandLine(endLine + 1)) {
+              endLine += 1;
+            }
+            const entry = makeOutlineEntry({
+              kind: "section",
+              depth: 1,
+              label: "References",
+              lineStart: lineIndex + 1,
+              lineEnd: endLine + 1,
+              selectionStart: bodyStart + (lineOffsets[lineIndex] || 0),
+              selectionEnd: bodyStart + (lineOffsets[endLine] || 0) + getLine(endLine).length,
+              selectedText: source.slice(bodyStart + (lineOffsets[lineIndex] || 0), bodyStart + (lineOffsets[endLine] || 0) + getLine(endLine).length),
+              selectedDisplayText: "References",
+            });
+            if (entry) entries.push(entry);
+            lineIndex = endLine;
+          }
+        }
+
+        return entries;
+      }
+
+      function scanPythonOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const classMatch = line.match(/^(\s*)class\s+([A-Za-z_][A-Za-z0-9_]*)\b/);
+          const defMatch = line.match(/^(\s*)(?:async\s+def|def)\s+([A-Za-z_][A-Za-z0-9_]*)\s*\(/);
+          const match = classMatch || defMatch;
+          if (!match) continue;
+          const indent = String(match[1] || "").replace(/\t/g, "    ").length;
+          const label = String(match[2] || "");
+          const kind = classMatch ? "class" : "function";
+          const entry = makeOutlineEntry({
+            kind,
+            depth: Math.max(1, Math.floor(indent / 4) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanJsLikeOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const patterns = [
+            { kind: "class", match: line.match(/^(\s*)(?:export\s+)?(?:default\s+)?class\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "function", match: line.match(/^(\s*)(?:export\s+)?(?:default\s+)?(?:async\s+)?function\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*\(/) },
+            { kind: "function", match: line.match(/^(\s*)(?:export\s+)?(?:const|let|var)\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[A-Za-z_$][A-Za-z0-9_$]*)\s*=>/) },
+            { kind: "interface", match: line.match(/^(\s*)(?:export\s+)?interface\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "enum", match: line.match(/^(\s*)(?:export\s+)?enum\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+            { kind: "type", match: line.match(/^(\s*)(?:export\s+)?type\s+([A-Za-z_$][A-Za-z0-9_$]*)\b/) },
+          ];
+          const found = patterns.find((entry) => entry.match);
+          if (!found || !found.match) continue;
+          const indent = String(found.match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(found.match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: found.kind,
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanJuliaOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const patterns = [
+            { kind: "module", match: line.match(/^(\s*)module\s+([A-Za-z_][A-Za-z0-9_]*)\b/) },
+            { kind: "struct", match: line.match(/^(\s*)(?:mutable\s+)?struct\s+([A-Za-z_][A-Za-z0-9_]*)\b/) },
+            { kind: "function", match: line.match(/^(\s*)function\s+([A-Za-z_][A-Za-z0-9_!]*)\s*\(/) },
+            { kind: "macro", match: line.match(/^(\s*)macro\s+([A-Za-z_][A-Za-z0-9_!]*)\b/) },
+          ];
+          const found = patterns.find((entry) => entry.match);
+          if (!found || !found.match) continue;
+          const indent = String(found.match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(found.match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: found.kind,
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanBashOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          const match = line.match(/^(\s*)(?:function\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*\(\)\s*\{/);
+          if (!match) continue;
+          const indent = String(match[1] || "").replace(/\t/g, "  ").length;
+          const label = String(match[2] || "");
+          const entry = makeOutlineEntry({
+            kind: "function",
+            depth: Math.max(1, Math.floor(indent / 2) + 1),
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanDiffOutlineEntries(text) {
+        const { lines, lineOffsets } = buildOutlineLineIndex(text);
+        const entries = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+          const line = String(lines[lineIndex] || "");
+          let kind = "";
+          let label = "";
+          let depth = 1;
+          const fileMatch = line.match(/^diff\s+--git\s+a\/([^\s]+)\s+b\/([^\s]+)/);
+          if (fileMatch) {
+            kind = "file";
+            label = String(fileMatch[2] || fileMatch[1] || "");
+            depth = 1;
+          } else if (/^@@/.test(line)) {
+            kind = "hunk";
+            label = line.replace(/^@@\s*|\s*@@.*$/g, "").trim() || line.trim();
+            depth = 2;
+          }
+          if (!kind || !label) continue;
+          const entry = makeOutlineEntry({
+            kind,
+            depth,
+            label,
+            lineStart: lineIndex + 1,
+            lineEnd: lineIndex + 1,
+            selectionStart: lineOffsets[lineIndex] || 0,
+            selectionEnd: (lineOffsets[lineIndex] || 0) + line.length,
+            selectedText: line,
+            selectedDisplayText: label,
+          });
+          if (entry) entries.push(entry);
+        }
+        return entries;
+      }
+
+      function scanOutlineEntries(text, language) {
+        switch (String(language || "").toLowerCase()) {
+          case "markdown":
+            return scanMarkdownOutlineEntries(text);
+          case "latex":
+            return scanLatexOutlineEntries(text);
+          case "python":
+            return scanPythonOutlineEntries(text);
+          case "javascript":
+          case "typescript":
+            return scanJsLikeOutlineEntries(text);
+          case "julia":
+            return scanJuliaOutlineEntries(text);
+          case "bash":
+            return scanBashOutlineEntries(text);
+          case "diff":
+            return scanDiffOutlineEntries(text);
+          default:
+            return [];
+        }
+      }
+
       function cloneReviewNotes(notes) {
         return Array.isArray(notes)
           ? notes
@@ -7011,6 +7846,138 @@
         updateEditorSelectionCommentUi();
       }
 
+      function getOutlineEntriesForCurrentEditor() {
+        return scanOutlineEntries(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "", editorLanguage || "markdown");
+      }
+
+      function updateOutlineUi() {
+        outlineEntries = getOutlineEntriesForCurrentEditor();
+        const descriptor = getCurrentStudioDocumentDescriptor();
+        const count = outlineEntries.length;
+        const hasEntries = count > 0;
+        const isOpen = isOutlineOpen();
+        if (outlineBtn) {
+          outlineBtn.textContent = "Outline";
+          outlineBtn.classList.remove("has-content");
+          outlineBtn.classList.toggle("is-active", isOpen);
+          outlineBtn.setAttribute("aria-pressed", isOpen ? "true" : "false");
+          outlineBtn.title = isOpen
+            ? "Hide document outline."
+            : (hasEntries
+              ? (count + " outline entr" + (count === 1 ? "y" : "ies") + " for " + descriptor.label + ". Open the outline rail.")
+              : "Open document outline for the current editor text.");
+        }
+        if (outlineMetaEl) {
+          outlineMetaEl.textContent = hasEntries
+            ? (count + " entr" + (count === 1 ? "y" : "ies") + " · " + (editorLanguage || "text") + " · " + descriptor.label)
+            : ("No outline entries · " + (editorLanguage || "text"));
+        }
+        if (outlineDoneBtn) {
+          outlineDoneBtn.disabled = !isOpen;
+        }
+        if (outlineEmptyStateEl) {
+          outlineEmptyStateEl.hidden = hasEntries;
+        }
+        renderOutlineList();
+      }
+
+      function renderOutlineList() {
+        if (!outlineListEl) return;
+        outlineListEl.innerHTML = "";
+        for (const entry of outlineEntries) {
+          const itemBtn = document.createElement("button");
+          itemBtn.type = "button";
+          itemBtn.className = "outline-entry";
+          itemBtn.dataset.outlineId = String(entry.id || "");
+          itemBtn.style.paddingLeft = (10 + Math.max(0, (entry.depth || 1) - 1) * 14) + "px";
+          itemBtn.title = getOutlineKindLabel(entry.kind) + " · line " + String(entry.lineStart || 1) + "\n" + String(entry.label || "");
+
+          const kindEl = document.createElement("span");
+          kindEl.className = "outline-entry-kind";
+          kindEl.textContent = getOutlineKindBadge(entry.kind);
+          itemBtn.appendChild(kindEl);
+
+          const titleEl = document.createElement("span");
+          titleEl.className = "outline-entry-title";
+          titleEl.textContent = String(entry.label || "");
+          itemBtn.appendChild(titleEl);
+
+          const metaEl = document.createElement("span");
+          metaEl.className = "outline-entry-meta";
+          metaEl.textContent = "L" + String(entry.lineStart || 1);
+          itemBtn.appendChild(metaEl);
+
+          outlineListEl.appendChild(itemBtn);
+        }
+      }
+
+      function buildOutlineEntryAnchor(entry) {
+        if (!entry) return null;
+        return normalizeReviewNote({
+          selectionStart: entry.selectionStart,
+          selectionEnd: entry.selectionEnd,
+          lineStart: entry.lineStart,
+          lineEnd: entry.lineEnd,
+          selectedText: entry.selectedText,
+          selectedDisplayText: entry.selectedDisplayText || entry.label,
+        });
+      }
+
+      function jumpToOutlineEntry(entryId) {
+        const entry = outlineEntries.find((candidate) => candidate && String(candidate.id || "") === String(entryId || ""));
+        if (!entry) return false;
+        const anchor = buildOutlineEntryAnchor(entry);
+        if (!anchor) return false;
+        return jumpToReviewAnchor(anchor, {
+          statusMessage: "Jumped to outline entry.",
+          afterJump: () => {
+            revealReviewNoteInPreview(anchor);
+          },
+        });
+      }
+
+      function closeOutline(options) {
+        if (!outlineOverlayEl || outlineOverlayEl.hidden) return;
+        outlineOverlayEl.hidden = true;
+        updateOutlineUi();
+        if (editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
+        const focusTarget = options && Object.prototype.hasOwnProperty.call(options, "focusTarget")
+          ? options.focusTarget
+          : (outlineReturnFocusEl || outlineBtn || sourceTextEl);
+        outlineReturnFocusEl = null;
+        if (focusTarget && typeof focusTarget.focus === "function") {
+          const schedule = typeof window.requestAnimationFrame === "function"
+            ? window.requestAnimationFrame.bind(window)
+            : (cb) => window.setTimeout(cb, 16);
+          schedule(() => focusTarget.focus());
+        }
+      }
+
+      function openOutline() {
+        if (!outlineOverlayEl) return;
+        if (isReviewNotesOpen()) {
+          closeReviewNotes({ focusTarget: null });
+        }
+        outlineReturnFocusEl = document.activeElement && document.activeElement !== document.body
+          ? document.activeElement
+          : sourceTextEl;
+        outlineOverlayEl.hidden = false;
+        updateOutlineUi();
+        if (editorView === "markdown") {
+          scheduleEditorLineNumberRender();
+        }
+      }
+
+      function toggleOutline() {
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: outlineBtn || sourceTextEl });
+        } else {
+          openOutline();
+        }
+      }
+
       function updateReviewNotesUi() {
         const descriptor = getCurrentStudioDocumentDescriptor();
         const count = reviewNotes.length;
@@ -7382,6 +8349,18 @@
                 selection.removeAllRanges();
               }
               clearPreviewCommentSelection();
+              const current = String(sourceTextEl && sourceTextEl.value ? sourceTextEl.value : "");
+              const range = resolveReviewNoteRange(previewNote, current);
+              if (range && sourceTextEl) {
+                try {
+                  sourceTextEl.focus({ preventScroll: true });
+                } catch {
+                  sourceTextEl.focus();
+                }
+                if (typeof sourceTextEl.setSelectionRange === "function") {
+                  sourceTextEl.setSelectionRange(range.start, range.end);
+                }
+              }
             });
           },
         });
@@ -7537,6 +8516,9 @@
         if (isReviewNotesOpen()) {
           closeReviewNotes({ focusTarget: null });
         }
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: null });
+        }
         scratchpadReturnFocusEl = document.activeElement && document.activeElement !== document.body
           ? document.activeElement
           : sourceTextEl;
@@ -7580,6 +8562,9 @@
         if (isScratchpadOpen()) {
           closeScratchpad({ focusTarget: null });
         }
+        if (isOutlineOpen()) {
+          closeOutline({ focusTarget: null });
+        }
         reviewNotesReturnFocusEl = document.activeElement && document.activeElement !== document.body
           ? document.activeElement
           : sourceTextEl;
@@ -7697,6 +8682,7 @@
         if (editorView === "preview") {
           scheduleSourcePreviewRender(0);
         }
+        updateOutlineUi();
       }
 
       function setEditorHighlightMode(mode) {
@@ -8007,6 +8993,10 @@
             }
           }
 
+          if (message.traceState) {
+            replaceTraceState(message.traceState);
+          }
+
           let appliedHistory = false;
           if (Array.isArray(message.responseHistory)) {
             appliedHistory = setResponseHistory(message.responseHistory, {
@@ -8053,6 +9043,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";
@@ -8750,6 +9760,8 @@
         setRightView(rightViewSelect.value);
       });
 
+      attachResponsePaneInteractionHandlers();
+
       followSelect.addEventListener("change", () => {
         followLatest = followSelect.value !== "off";
         if (followLatest && queuedLatestResponse) {
@@ -8896,6 +9908,7 @@
         renderSourcePreview({ previewDelayMs: PREVIEW_INPUT_DEBOUNCE_MS });
         scheduleEditorMetaUpdate();
         updateEditorSelectionCommentUi();
+        updateOutlineUi();
         if (isReviewNotesOpen() && reviewNotes.length > 0) {
           renderReviewNotesList();
           updateReviewNotesUi();
@@ -8991,17 +10004,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;
@@ -9040,15 +10042,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");
         }
@@ -9284,6 +10286,35 @@
         });
       }
 
+      if (outlineBtn) {
+        outlineBtn.addEventListener("click", () => {
+          toggleOutline();
+        });
+      }
+
+      if (outlineCloseBtn) {
+        outlineCloseBtn.addEventListener("click", () => {
+          closeOutline();
+        });
+      }
+
+      if (outlineDoneBtn) {
+        outlineDoneBtn.addEventListener("click", () => {
+          closeOutline();
+        });
+      }
+
+      if (outlineListEl) {
+        outlineListEl.addEventListener("click", (event) => {
+          const target = event.target;
+          const entryBtn = target instanceof Element ? target.closest(".outline-entry") : null;
+          if (!entryBtn) return;
+          const outlineId = entryBtn.getAttribute("data-outline-id") || "";
+          if (!outlineId) return;
+          jumpToOutlineEntry(outlineId);
+        });
+      }
+
       if (reviewNotesCloseBtn) {
         reviewNotesCloseBtn.addEventListener("click", () => {
           closeReviewNotes();