From 3676557df920c6f34ef21f912e8a5f1c6224ea82 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Thu, 20 Aug 2026 15:08:35 -0500
Subject: [PATCH] fix(runner): keep eval navigation and DevTools accessible

---
 .../devtools/issue-thread/src/App.tsx             | 15 +++++++++++++++
 .../devtools/issue-thread/src/issue-thread.css    |  5 +++++
 2 files changed, 20 insertions(+)

diff --git a/packages/paperclip-runner/devtools/issue-thread/src/App.tsx b/packages/paperclip-runner/devtools/issue-thread/src/App.tsx
index 67470df8473..8bc4b3f7352 100644
--- a/packages/paperclip-runner/devtools/issue-thread/src/App.tsx
+++ b/packages/paperclip-runner/devtools/issue-thread/src/App.tsx
@@ -80,6 +80,7 @@ interface EmbeddedEvalReport {
   };
   view: CapabilityIssueThreadSnapshot;
   devtools: CapabilityDevtoolsSnapshot;
+  navigation: { suiteHref: string; previous: { label: string; href: string } | null; next: { label: string; href: string } | null };
 }
 
 declare global {
@@ -269,6 +270,10 @@ export function App() {
   const turnGenerationRef = useRef(0);
   const turnAbortRef = useRef<AbortController | null>(null);
 
+  useEffect(() => {
+    if (embeddedEval !== null) setPanelOpen(true);
+  }, [embeddedEval]);
+
   /** Abandons any open turn stream: the server sees the disconnect and stops. */
   const abandonTurn = useCallback(() => {
     turnGenerationRef.current += 1;
@@ -875,6 +880,16 @@ export function App() {
         onSelectSegment={setSegment}
       />
 
+      {embeddedEval !== null ? (
+        <nav className="pit-eval-nav" aria-label="Eval result navigation">
+          <a href={embeddedEval.navigation.suiteHref}>← All results</a>
+          {embeddedEval.navigation.previous ? <a href={embeddedEval.navigation.previous.href}>← {embeddedEval.navigation.previous.label}</a> : <span />}
+          <strong>{embeddedEval.passed ? "PASS" : "FAIL"} · {embeddedEval.attemptId}</strong>
+          {embeddedEval.navigation.next ? <a href={embeddedEval.navigation.next.href}>{embeddedEval.navigation.next.label} →</a> : <span />}
+          <button type="button" className="pit-button" aria-expanded={panelOpen} onClick={() => setPanelOpen((open) => !open)}><Icon name="evidence" /> {panelOpen ? "Close DevTools" : "Open DevTools"}</button>
+        </nav>
+      ) : null}
+
       {actionError !== null ? (
         <p className="pit-banner" data-tone="danger" role="alert" data-testid="action-error">
           <span aria-hidden="true">⚠</span>
diff --git a/packages/paperclip-runner/devtools/issue-thread/src/issue-thread.css b/packages/paperclip-runner/devtools/issue-thread/src/issue-thread.css
index 201544e428c..ef916b657bb 100644
--- a/packages/paperclip-runner/devtools/issue-thread/src/issue-thread.css
+++ b/packages/paperclip-runner/devtools/issue-thread/src/issue-thread.css
@@ -177,6 +177,11 @@ textarea {
 
 .pit-app[data-eval-view="true"] { padding-left: 0; }
 
+.pit-eval-nav { display: grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:var(--pit-touch-target); padding:0 var(--pit-space-4); border-bottom:1px solid var(--pit-border-strong); background:var(--pit-surface-sunken); font-size:var(--pit-text-xs); }
+.pit-eval-nav strong { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pit-eval-nav a { color:var(--pit-live); white-space:nowrap; }
+@media(max-width:800px){.pit-eval-nav{grid-template-columns:auto 1fr auto}.pit-eval-nav>a:not(:first-child),.pit-eval-nav>span{display:none}.pit-eval-nav strong{text-align:left}}
+
 .pit-visually-hidden {
   position: absolute;
   width: 1px;