fix(runner): keep eval navigation and DevTools accessible

This commit is contained in:
Dotta committed 2026-08-20 15:08:35 -05:00
1 parent 5316e6ded6
commit 3676557df9
2 files changed
+20

No files matched your search

@@ -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>
@@ -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;