Let the Forge trace be read, copied and saved, and keep the viewport square

Developer: Seif Hashish
Project: HashCortX

Summary:
The trace drawer records the only account of what a run did — which model
answered, which one rate-limited, where the seconds went — and none of it could
leave the drawer. Selection is switched off application-wide and granted back
to a named list of surfaces; the trace was not on it, so the text was inert,
not merely awkward to select. It now opts in, and Copy and Export sit beside
Clear, both reading the entries through one function so the clipboard and the
file can never disagree. Copy falls back to selecting the text when the
clipboard is refused.

Opening that drawer also distorted the model. The viewport recomputes its
camera on a window resize and nothing else, while the drawer animates the
canvas mount from thirty-two pixels to two hundred without the window changing
at all — so the camera kept an aspect ratio for a box it no longer occupied.
Measured with the drawer open: the canvas held 1.451 against a container of
1.827, a quarter of the height squashed out of the picture. A ResizeObserver on
the mount now catches that, and every other panel or split that moves it.

Verification:
- Drove Forge in a headless browser before and after. Before: computed
  user-select none and an empty selection; one button. After: selectable text,
  three buttons.
- Neutralised the observer and measured again — canvas aspect 1.451 in a 1.827
  container. Restored: 1.829 against 1.827.
- npm run check — 1,384 passed, 0 failed
- cargo test --manifest-path src-tauri/Cargo.toml — 93 passed, 0 failed (no Rust changed)
- Not yet exercised in a packaged build

Author: Hash-7777

scripts/checks/app-size.mjs

@@ -81,7 +81,12 @@ const LINE_BUDGET = {
   // thrown away.
   'modes/systems/mode.js': 4246,
   'modes/virtual-os/mode.js': 3808,
-  'modes/forge/mode.js': 3756,
+  // 3820, up from 3756. The trace drawer could be read and never taken: no
+  // selection, no copy, no file. Most of these lines are the two handlers and
+  // the single reader that turns the entries into text for both. The rest is
+  // the observer that keeps the viewport's aspect when the drawer changes the
+  // canvas's height without the window resizing.
+  'modes/forge/mode.js': 3820,
   'modes/agent-maker/mode.js': 2980,
   'modes/finance/mode.js': 2705,
   'modes/code/mode.js': 2715,

src/modes/forge/mode.css

@@ -897,6 +897,17 @@ body.forge-studio-mode #app { display: none; }
 
 .frg-trace-btn:hover { background: rgba(75,210,190,0.09); }
 
+/* styles.css switches selection off for the whole application and grants it
+   back to a named list — inputs, chat bubbles, pre and code. The trace was on
+   neither side of that, so a run could be read and never taken: no selection,
+   no copy, and a rate-limit chain that could only be photographed. */
+.frg-trace-entries,
+.frg-trace-entries * {
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
+}
+
 .frg-trace-entries {
   flex: 1 1 0;
   min-height: 0;

src/modes/forge/mode.js

@@ -28,6 +28,7 @@
   let renderer = null;
   let scene = null;
   let camera = null;
+  let mountResizeObserver = null;
   let controls = null;
   let modelGroup = null;
   let particleGroup = null;
@@ -283,6 +284,22 @@
     if (dot) dot.className = "frg-trace-dot " + traceKind(statusCls);
   }
 
+  // The trace as plain text, in the order it happened. One reader for both the
+  // clipboard and the file, so the two can never drift apart.
+  function traceAsText() {
+    const host = $("frgTraceEntries");
+    if (!host) return "";
+    const lines = Array.from(host.querySelectorAll(".frg-trace-entry")).map((row) => {
+      const cell = (sel) => (row.querySelector(sel)?.textContent || "").trim();
+      const tokens = cell(".trace-tokens");
+      return [cell(".trace-time"), cell(".trace-agent"), cell(".trace-msg"), tokens]
+        .filter(Boolean).join("  ");
+    });
+    if (!lines.length) return "";
+    const header = `3D Forge trace  ·  ${new Date().toLocaleString()}`;
+    return [header, "=".repeat(header.length), "", ...lines, ""].join("\n");
+  }
+
   function setAgentState(id, state) {
     const el = document.querySelector(`[data-frg-agent="${id}"] .frg-agent-state`);
     if (el) el.textContent = state;
@@ -669,6 +686,22 @@
     scene.add(starField);
 
     window.addEventListener("resize", resize);
+
+    // The window is not the only thing that changes this canvas's size. The
+    // trace drawer animates from 32px to 200px, panels collapse, the inspector
+    // opens — none of those raise a window resize, so the camera kept an aspect
+    // ratio for a box it no longer occupied and the model came out stretched.
+    // Watching the mount catches every one of them, including the frames of a
+    // CSS transition, which is what keeps the picture honest while the drawer
+    // slides rather than only once it lands.
+    try {
+      const mount = $("frgCanvasMount");
+      if (mount && window.ResizeObserver) {
+        mountResizeObserver?.disconnect();
+        mountResizeObserver = new ResizeObserver(() => resize());
+        mountResizeObserver.observe(mount);
+      }
+    } catch {}
     wireContextLoss();
     resize();
     initialized = true;
@@ -3596,6 +3629,37 @@ Do not add floating decorations or abstract markers. Structure must add load-bea
       tc.classList.toggle("expanded", open);
       tc.classList.toggle("collapsed", !open);
     });
+    $("frgTraceCopyBtn")?.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const text = traceAsText();
+      const btn = e.currentTarget;
+      if (!text) { btn.textContent = "Empty"; setTimeout(() => { btn.textContent = "Copy"; }, 1200); return; }
+      try {
+        await navigator.clipboard.writeText(text);
+        btn.textContent = "Copied";
+      } catch {
+        // No clipboard permission: select it instead, so the keyboard still works.
+        const host = $("frgTraceEntries");
+        if (host) {
+          const range = document.createRange();
+          range.selectNodeContents(host);
+          const sel = window.getSelection();
+          sel.removeAllRanges(); sel.addRange(range);
+        }
+        btn.textContent = "Selected";
+      }
+      setTimeout(() => { btn.textContent = "Copy"; }, 1400);
+    });
+    $("frgTraceExportBtn")?.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const text = traceAsText();
+      const btn = e.currentTarget;
+      if (!text) { btn.textContent = "Empty"; setTimeout(() => { btn.textContent = "Export"; }, 1200); return; }
+      const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+      const ok = await downloadBlob(`forge-trace-${stamp}.txt`, new Blob([text], { type: "text/plain" }));
+      btn.textContent = ok ? "Saved" : "Export";
+      setTimeout(() => { btn.textContent = "Export"; }, 1400);
+    });
     $("frgTraceClearBtn")?.addEventListener("click", (e) => {
       e.stopPropagation();
       const entries = $("frgTraceEntries");

src/modes/forge/panel.html

@@ -190,6 +190,8 @@
       <span class="frg-trace-label">Trace</span>
       <span class="frg-trace-summary" id="frgTraceSummary">No run yet</span>
       <div class="frg-trace-actions">
+        <button class="frg-trace-btn" id="frgTraceCopyBtn" title="Copy the whole trace to the clipboard">Copy</button>
+        <button class="frg-trace-btn" id="frgTraceExportBtn" title="Save the whole trace as a text file">Export</button>
         <button class="frg-trace-btn" id="frgTraceClearBtn">Clear</button>
       </div>
       <svg class="frg-trace-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>