perf(frontend): load only the selected trial on drawer open (#1283)

Author: kyle-compute

frontend/e2e/critical-react-subtree.spec.ts

@@ -460,31 +460,31 @@ test.describe("critical task and trial subtree", () => {
     const taskOpenResponse = page.waitForResponse(taskOpenPattern);
     taskOpenGate.release();
     await taskOpenResponse;
-    const taskDetailRequest = page.waitForRequest(taskDetailPattern);
-    await page.getByRole("button", { name: "View task files" }).click();
-    await taskDetailRequest;
-    expect(requestCount(requests, taskDetailPattern)).toBe(1);
-    await expect(
-      page.getByRole("button", { name: "Rerun trials" })
-    ).toBeDisabled();
-    await expect(
-      page.getByRole("button", { name: "Rerun QA", exact: true })
-    ).toBeDisabled();
-    await page.keyboard.press("Escape");
-    await expect(
-      page.getByRole("button", { name: "Rerun QA", exact: true })
-    ).toBeHidden();
-
     const trialButton = page.getByRole("button", { name: "trial-p1 Fail" });
     await expect(trialButton).toBeVisible();
 
     const trialDetailPattern = new RegExp(`/api/trials/${TRIAL_ID}(?:\\?|$)`);
+    const taskTrialsPattern = new RegExp(
+      `/api/tasks/${TASK_ID}/trials(?:\\?|$)`
+    );
+    const taskFilesPattern = new RegExp(
+      `/api/tasks/${TASK_ID}/files(?:/|\\?|$)`
+    );
+    const analysisLogPattern = new RegExp(
+      `/api/trials/${TRIAL_ID}/analysis-log(?:\\?|$)`
+    );
+    const trialFilesPattern = new RegExp(
+      `/api/trials/${TRIAL_ID}/files(?:/|\\?|$)`
+    );
+    const trajectoryPattern = new RegExp(
+      `/api/trials/${TRIAL_ID}/trajectory(?:/|\\?|$)`
+    );
     const trialDetailRequest = page.waitForRequest(trialDetailPattern);
     await trialButton.click();
     await trialDetailRequest;
     expect(requestCount(requests, trialDetailPattern)).toBe(1);
-    // Both canonical requests are blocked. The snapshot still paints Summary,
-    // but every mutation waits for the full trial resource.
+    // The lightweight /open row paints Summary, but mutations wait for the
+    // selected trial resource. The hidden task pane owns no network work.
     await expect(page.getByRole("tab", { name: "Summary" })).toBeVisible();
     await expect(
       page.getByRole("button", { name: "Retry Trial" })
@@ -494,34 +494,30 @@ test.describe("critical task and trial subtree", () => {
     ).toBeDisabled();
     await expect(page.getByText("Loading latest trial state.")).toBeVisible();
 
+    await page.waitForTimeout(300);
+    expect(requestCount(requests, taskDetailPattern)).toBe(0);
+    expect(requestCount(requests, taskTrialsPattern)).toBe(0);
+    expect(requestCount(requests, taskFilesPattern)).toBe(0);
+    expect(requestCount(requests, analysisLogPattern)).toBe(0);
+    expect(requestCount(requests, trialFilesPattern)).toBe(0);
+    expect(requestCount(requests, trajectoryPattern)).toBe(0);
+
+    const taskDetailRequest = page.waitForRequest(taskDetailPattern);
+    await page.getByRole("button", { name: "Show task" }).click();
+    await taskDetailRequest;
+    expect(requestCount(requests, taskDetailPattern)).toBe(1);
+    await expect.poll(() => requestCount(requests, taskTrialsPattern)).toBe(1);
+    expect(requestCount(requests, taskFilesPattern)).toBe(0);
     taskDetailGate.release();
-    // The open drawer adopts the canonical task list instead of retaining its
-    // snapshot copy. That list also contributes the selected trial's report.
+
+    trialDetailGate.release();
     await expect(
       page.getByRole("heading", { name: "GOOD FAILURE", exact: true })
     ).toBeVisible();
-    const nextTrialButton = page.getByRole("button", { name: "Next trial" });
-    await expect(nextTrialButton).toBeEnabled();
     const analysisLogDisclosure = page
       .locator("summary")
       .filter({ hasText: "Analysis log" });
     await expect(analysisLogDisclosure).toBeVisible();
-
-    await page.waitForTimeout(300);
-    const analysisLogPattern = new RegExp(
-      `/api/trials/${TRIAL_ID}/analysis-log(?:\\?|$)`
-    );
-    const trialFilesPattern = new RegExp(
-      `/api/trials/${TRIAL_ID}/files(?:/|\\?|$)`
-    );
-    const trajectoryPattern = new RegExp(
-      `/api/trials/${TRIAL_ID}/trajectory(?:/|\\?|$)`
-    );
-    expect(requestCount(requests, analysisLogPattern)).toBe(0);
-    expect(requestCount(requests, trialFilesPattern)).toBe(0);
-    expect(requestCount(requests, trajectoryPattern)).toBe(0);
-
-    trialDetailGate.release();
     await expect(
       page.getByRole("button", { name: "Re-run analysis" })
     ).toBeEnabled();
@@ -559,14 +555,6 @@ test.describe("critical task and trial subtree", () => {
       page.getByRole("button", { name: "Retry Trial" })
     ).toBeEnabled();
 
-    const probeDetailPattern = new RegExp(
-      `/api/trials/${PROBE_TRIAL_ID}(?:\\?|$)`
-    );
-    const probeDetailRequest = page.waitForRequest(probeDetailPattern);
-    await nextTrialButton.click();
-    await probeDetailRequest;
-    await expect(page.getByText("probe-p1", { exact: true })).toBeVisible();
-
     await page.goto("/tasks");
     const failedTaskLink = page.getByRole("link", {
       name: "P1 failed detail task",

frontend/e2e/tasks-view.spec.ts

@@ -311,6 +311,7 @@ test.describe("authenticated task view", () => {
       return url.pathname === `/api/tasks/${TASK_ID}/files`;
     });
     await page.goto(`/tasks/${TASK_ID}?drawer=task`);
+    await page.getByRole("button", { name: "Files", exact: true }).click();
 
     const response = await listingResponse;
     const url = new URL(response.url());
@@ -469,6 +470,7 @@ test.describe("authenticated task view", () => {
     });
 
     await page.goto(`/tasks/${TASK_ID}?drawer=task`);
+    await page.getByRole("button", { name: "Files", exact: true }).click();
     await page.getByRole("button", { name: "readme.txt" }).click();
     await expect(page.getByText("text preview loaded")).toBeVisible();
     await expect(page.getByText(/Showing first 100\.0 KB/)).toBeVisible();

frontend/src/app/(app)/tasks/[task_id]/task-detail-client.tsx

@@ -3,7 +3,6 @@
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import useSWR from "swr";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -25,7 +24,6 @@ import { TaskVerdictBadge } from "@/components/task-verdict-badge";
 import { UnifiedDrawerWrapper } from "@/components/unified-drawer-wrapper";
 import { ExperimentsList } from "@/components/experiments-list";
 import { QaCostSuffix } from "@/components/qa-cost-suffix";
-import { fetcher } from "@/lib/api";
 import { getExperimentAgentKey } from "@/lib/experiment-agent-grouping";
 import {
   formatCostUsd,
@@ -42,11 +40,6 @@ import {
   STATUS_CONFIG,
 } from "@/lib/status-config";
 import { summarizeTrials, type TrialAggregate } from "@/lib/trial-aggregation";
-import {
-  isBrowseTaskDetail,
-  taskDetailValue,
-  type TaskDetailResource,
-} from "@/lib/task-detail-resource";
 import type {
   Task,
   TaskOpenAgentModelSummary,
@@ -662,7 +655,6 @@ export function TaskDetailClient({
     agentCards,
     defaultVersionError,
     defaultVersionId,
-    detailKey,
     error,
     explicitVersionMissing,
     handleSelectVersion,
@@ -693,42 +685,22 @@ export function TaskDetailClient({
     [selectedVersion, trialsForVersion]
   );
   const [drawer, setDrawer] = useState<DrawerState | null>(null);
-  const [drawerShowTask, setDrawerShowTask] = useState(true);
+  const [drawerShowTask, setDrawerShowTask] = useState(false);
   const [drawerShowTrial, setDrawerShowTrial] = useState(true);
-  const { data: drawerDetailResource, isLoading: isDrawerDetailLoading } =
-    useSWR<TaskDetailResource>(drawer ? detailKey : null, fetcher, {
-      revalidateOnFocus: false,
-      revalidateOnMount: true,
-    });
-  const canonicalDrawerDetailResource =
-    drawerDetailResource && !isBrowseTaskDetail(drawerDetailResource)
-      ? drawerDetailResource
-      : undefined;
-  const canonicalDrawerDetail = taskDetailValue(canonicalDrawerDetailResource);
-  const drawerTask = canonicalDrawerDetail?.task ?? task;
-  const drawerTrialsForVersion = useMemo(() => {
-    const canonicalTrials = canonicalDrawerDetail?.task.trials;
-    if (!canonicalTrials || selectedVersionId === null) {
-      return trialsForVersion;
-    }
-    return canonicalTrials.filter(
-      (trial) => trial.task_version_id === selectedVersionId
-    );
-  }, [canonicalDrawerDetail?.task.trials, selectedVersionId, trialsForVersion]);
   const drawerTrialGroups = useMemo(
     () =>
       agentCards.map((card) => ({
         agent: card.key,
         model: card.summary.model,
-        trials: drawerTrialsForVersion.filter(
+        trials: trialsForVersion.filter(
           (trial) =>
             getExperimentAgentKey(
               normalizedAgentModel(trial),
               modelScopedAgents
             ) === card.key
         ),
       })),
-    [agentCards, drawerTrialsForVersion, modelScopedAgents]
+    [agentCards, modelScopedAgents, trialsForVersion]
   );
   const drawerOrderedTrials = useMemo(
     () => drawerTrialGroups.flatMap((group) => group.trials),
@@ -774,6 +746,7 @@ export function TaskDetailClient({
     // The user (or hydration) is driving the drawer now; any unresolved
     // deep-link trial param no longer needs preserving.
     unresolvedTrialParamRef.current = false;
+    setDrawerShowTask(false);
     setDrawer({ mode: "trial", fallbackTrial: trial });
   }, []);
 
@@ -892,6 +865,7 @@ export function TaskDetailClient({
         drawerHydratedRef.current = true;
         hydrationOpeningRef.current = true;
         handleSelectTrial(previewTrial);
+        if (urlTaskFile || urlTaskPane) setDrawerShowTask(true);
         return;
       }
       if (isDeepLinkTrialLoading) return;
@@ -911,6 +885,7 @@ export function TaskDetailClient({
       }
       hydrationOpeningRef.current = true;
       handleSelectTrial(fetchedDeepLinkTrial);
+      if (urlTaskFile || urlTaskPane) setDrawerShowTask(true);
       return;
     }
 
@@ -1394,15 +1369,11 @@ export function TaskDetailClient({
                 taskId={null}
                 // Scopes the overview's trial aggregation; this pane renders
                 // no header, so none of the task-driven header UI appears.
-                task={drawerTask ?? task}
+                task={task}
                 staticChecksTaskId={task.id}
-                taskDetail={canonicalDrawerDetailResource}
                 onOpenTrial={handleOpenTrialFromOverview}
                 filesUrl={`/api/tasks/${task.id}/files`}
                 loadFilesLazily
-                overviewTrialsLoading={
-                  isDrawerDetailLoading || canonicalDrawerDetail == null
-                }
                 taskVersion={selectedVersion?.version}
                 initialFilePath={taskPaneFile}
                 selectedLines={taskPaneLines}
@@ -1419,12 +1390,8 @@ export function TaskDetailClient({
                 activePane={activeTaskPane}
                 onActivePaneChange={selectTaskPane}
                 taskId={task.id}
-                task={drawerTask ?? task}
-                taskDetail={canonicalDrawerDetailResource}
+                task={task}
                 loadFilesLazily
-                overviewTrialsLoading={
-                  isDrawerDetailLoading || canonicalDrawerDetail == null
-                }
                 taskVersion={selectedVersion?.version}
                 onOpenTrial={handleOpenTrialFromOverview}
                 initialFilePath={taskPaneFile}
@@ -1452,7 +1419,7 @@ export function TaskDetailClient({
                   isOpen={true}
                   onClose={() => setDrawer(null)}
                   trial={drawerTrial}
-                  task={drawerTask ?? task}
+                  task={task}
                   orderedTrials={drawerOrderedTrials}
                   trialIndex={drawerTrialIndex >= 0 ? drawerTrialIndex : null}
                   trialGroups={drawerTrialGroups}

frontend/src/components/task-files-panel.tsx

@@ -416,7 +416,7 @@ export function TaskFilesPanel({
   isOpen,
   onClose,
   taskId,
-  task,
+  task: taskSnapshot,
   orderedTasks,
   taskIndex,
   onNavigate,
@@ -450,8 +450,8 @@ export function TaskFilesPanel({
   // panes (which pass taskId={null}); staticChecksTaskId supplies the id there.
   const effectiveChecksTaskId = taskId ?? staticChecksTaskId ?? null;
   // The pre_trial_* fields live on the version summaries of /detail, not on
-  // the plain task endpoint. The task page uses the same key, so SWR shares
-  // the cache there.
+  // the plain task endpoint. Task cards seed this key from their browse rows;
+  // SWR replaces that snapshot with the full response when this pane mounts.
   const checksKey =
     effectiveChecksTaskId && showAnalysis !== false
       ? taskDetailKey(effectiveChecksTaskId, baseUrl)
@@ -481,6 +481,9 @@ export function TaskFilesPanel({
     },
   });
   const checksDetail = taskDetailValue(checksResource);
+  const task = cancelExperimentId
+    ? taskSnapshot
+    : (checksDetail?.task ?? taskSnapshot);
   const actionsReady =
     checksResource !== undefined && !isBrowseTaskDetail(checksResource);
   // Scoped panes (the experiment drawer) pin the version whose files are on
@@ -933,7 +936,7 @@ export function TaskFilesPanel({
 
   // Fetch root file list when panel opens
   useEffect(() => {
-    if (!isOpen || (!taskId && !filesUrl)) {
+    if (!isOpen || activePane !== "file" || (!taskId && !filesUrl)) {
       return;
     }
 
@@ -1023,6 +1026,7 @@ export function TaskFilesPanel({
     };
   }, [
     isOpen,
+    activePane,
     taskId,
     filesUrl,
     resolvedFilesUrl,
@@ -1530,11 +1534,30 @@ export function TaskFilesPanel({
                       <span className="truncate">Capabilities</span>
                     </button>
                   ) : null}
+                  <button
+                    type="button"
+                    onClick={() => onActivePaneChange?.("file")}
+                    aria-current={activePane === "file" ? "page" : undefined}
+                    className={`flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm ${
+                      activePane === "file"
+                        ? "bg-primary/20 text-primary"
+                        : "hover:bg-muted/50 cursor-pointer"
+                    }`}
+                    title="Browse task files"
+                  >
+                    <FolderOpen
+                      className="h-3.5 w-3.5 shrink-0"
+                      aria-hidden="true"
+                    />
+                    <span className="truncate">Files</span>
+                  </button>
                 </div>
               )}
-              <div className="text-muted-foreground px-2 py-2 font-mono text-[10px] font-semibold tracking-wide uppercase sm:text-xs">
-                Files
-              </div>
+              {!taskPaneExists ? (
+                <div className="text-muted-foreground px-2 py-2 font-mono text-[10px] font-semibold tracking-wide uppercase sm:text-xs">
+                  Files
+                </div>
+              ) : null}
               {listingError ? (
                 <p className="text-muted-foreground px-2 py-2 text-xs">
                   Unable to load files: {listingError}

frontend/src/lib/use-task-open-reader.ts

@@ -319,7 +319,6 @@ export function useTaskOpenReader(
     agentCards,
     defaultVersionError,
     defaultVersionId,
-    detailKey,
     error,
     exactAgentModels,
     explicitVersionMissing,