@shipfox/client-workflows 14.0.1 → 16.0.0

package/src/components/workflow-run-view/workflow-run-view.tsx

@@ -2,37 +2,39 @@ import {ApiError} from '@shipfox/client-api';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
-import {Tabs, TabsContent, TabsContents} from '@shipfox/react-ui/tabs';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shipfox/react-ui/select';
 import {toast} from '@shipfox/react-ui/toast';
+import {Text} from '@shipfox/react-ui/typography';
 import {useNavigate} from '@tanstack/react-router';
-import {useEffect, useId, useRef, useState} from 'react';
-import {
-  type JobExecution,
-  resolveJobExecution,
-  type StepSourceLocation,
-  type WorkflowRunRerunMode,
-} from '#core/workflow-run.js';
-import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
-import {
-  type WorkflowRunSelectionInput,
-  withoutWorkflowRunSelectionSearch,
-} from '#core/workflow-run-url-state.js';
+import {type ReactNode, useEffect, useMemo} from 'react';
+import {buildRunAnnotationList, type RunAnnotationSummary} from '#core/run-annotation.js';
+import {isWorkflowRunTerminal, type Job, type WorkflowRunRerunMode} from '#core/workflow-run.js';
+import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
+import {useRunAnnotationsQuery} from '#hooks/api/run-annotations.js';
 import {
   useCancelWorkflowRunMutation,
   useRerunWorkflowRunMutation,
   useWorkflowRunAttemptQuery,
 } from '#hooks/api/workflow-runs.js';
-import {WORKFLOW_RUN_TABS, type WorkflowRunTab} from '#routes/inputs.js';
+import {
+  type WorkflowJobSearch,
+  type WorkflowRunsSearch,
+  type WorkflowRunTab,
+  workflowJobSearchParams,
+  workflowRunSearchParams,
+} from '#routes/inputs.js';
 import {JobGraph} from '../job-graph/index.js';
 import type {JobGraphSelectionSource} from '../job-graph/types.js';
 import {WorkflowRunSummary} from '../workflow-run-summary/index.js';
-import {
-  RunAnnotationSummaryLine,
-  RunAnnotationsEmpty,
-  RunJobsList,
-  RunTabStrip,
-} from '../workflow-run-tabs/index.js';
-import {WorkflowSourceContent, WorkflowSourcePanel} from '../workflow-source-panel/index.js';
+import {RunAnnotationList, RunAnnotationSummaryLine} from '../workflow-run-tabs/index.js';
+import {WorkflowSourceContent} from '../workflow-source-panel/index.js';
+import {RunWorkspaceNav} from './run-workspace-nav.js';
 import {resolveWorkflowRunSelection} from './workflow-run-selection.js';
 import {
   WorkflowRunContentSkeleton,
@@ -41,40 +43,58 @@ import {
   WorkflowRunStaleError,
 } from './workflow-run-states.js';
 
-interface WorkflowSourceFocus {
-  stepId: string;
-  location: StepSourceLocation;
-}
+type RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;
 
 export interface WorkflowRunViewProps {
   projectId: string;
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
   workflowRunId?: string | undefined;
-  selection?: WorkflowRunSelectionInput | undefined;
-  onSelectionChange?: ((selection: WorkflowRunSelectionInput) => void) | undefined;
+  runAttempt?: number | undefined;
+  selection?: WorkflowRunsSearch | undefined;
   tab?: WorkflowRunTab | undefined;
-  onTabChange?: ((tab: WorkflowRunTab) => void) | undefined;
-  annotationSummary?: RunAnnotationSummary | undefined;
+  activeJobId?: string | undefined;
+  jobSearch?: WorkflowJobSearch | undefined;
+  jobContent?: ReactNode | undefined;
 }
 
 /**
- * Renders the run for `workflowRunId`, keeping the local tab strip mounted while the run
- * request is pending so polling never inserts navigation under the user's cursor.
+ * The persistent run workspace. Run-level sections and dedicated job routes share the same
+ * header and job index, while the all-jobs Summary always opens on the dependency graph.
  */
 export function WorkflowRunView({
   projectId,
   workspaceSlug,
   projectSlug,
   workflowRunId,
+  runAttempt,
   selection,
-  onSelectionChange,
   tab,
-  onTabChange,
-  annotationSummary,
+  activeJobId,
+  jobSearch,
+  jobContent,
 }: WorkflowRunViewProps) {
-  const runQuery = useWorkflowRunAttemptQuery({workflowRunId, runAttempt: selection?.runAttempt});
+  const runQuery = useWorkflowRunAttemptQuery({
+    workflowRunId,
+    runAttempt: selection?.runAttempt ?? runAttempt,
+  });
   const rerunMutation = useRerunWorkflowRunMutation(projectId);
+  // Annotations are read on their own cadence rather than hydrated into the run, so the two
+  // modules stay decoupled. The key is shared, so the job page's count chip costs no extra fetch.
+  //
+  // Polling is scoped to the surface that renders bodies. The read has no counts-only mode, so
+  // every poll transfers whole Markdown bodies; doing that every four seconds behind Summary,
+  // Source, and the job log spends megabytes to keep one rail number warm. Off that surface the
+  // counts still refresh on navigation and on window focus.
+  const annotationsQuery = useRunAnnotationsQuery({
+    workflowRunId,
+    runAttempt: runQuery.data?.runAttempt.attempt,
+    live:
+      runWorkspaceSection(tab) === 'annotations' &&
+      !activeJobId &&
+      Boolean(runQuery.data) &&
+      !isWorkflowRunTerminal(runQuery.data?.runAttempt.status ?? 'pending'),
+  });
 
   return (
     <RelativeTimeProvider>
@@ -83,12 +103,14 @@ export function WorkflowRunView({
           workspaceSlug={workspaceSlug}
           projectSlug={projectSlug}
           query={runQuery}
+          annotations={annotationsQuery}
           rerunMutation={rerunMutation}
+          runAttempt={runAttempt}
           selection={selection}
-          onSelectionChange={onSelectionChange}
           tab={tab}
-          onTabChange={onTabChange}
-          annotationSummary={annotationSummary}
+          activeJobId={activeJobId}
+          jobSearch={jobSearch}
+          jobContent={jobContent}
         />
       </div>
     </RelativeTimeProvider>
@@ -99,108 +121,82 @@ function RunViewContent({
   workspaceSlug,
   projectSlug,
   query,
+  annotations,
   rerunMutation,
+  runAttempt,
   selection,
-  onSelectionChange,
   tab,
-  onTabChange,
-  annotationSummary,
+  activeJobId,
+  jobSearch,
+  jobContent,
 }: {
   workspaceSlug: string | undefined;
   projectSlug: string | undefined;
   query: ReturnType<typeof useWorkflowRunAttemptQuery>;
+  annotations: ReturnType<typeof useRunAnnotationsQuery>;
   rerunMutation: ReturnType<typeof useRerunWorkflowRunMutation>;
-  selection: WorkflowRunSelectionInput | undefined;
-  onSelectionChange: ((selection: WorkflowRunSelectionInput) => void) | undefined;
+  runAttempt: number | undefined;
+  selection: WorkflowRunsSearch | undefined;
   tab: WorkflowRunTab | undefined;
-  onTabChange: ((tab: WorkflowRunTab) => void) | undefined;
-  annotationSummary: RunAnnotationSummary | undefined;
+  activeJobId: string | undefined;
+  jobSearch: WorkflowJobSearch | undefined;
+  jobContent: ReactNode | undefined;
 }) {
   const navigate = useNavigate();
-  const [selectedJobId, setSelectedJobId] = useState<string | undefined>();
-  const [selectedJobExecutionId, setSelectedJobExecutionId] = useState<string | undefined>();
-  const [localTab, setLocalTab] = useState<WorkflowRunTab>(tab ?? 'summary');
-  const [sourcePanelOpen, setSourcePanelOpen] = useState(false);
-  const [sourceFocus, setSourceFocus] = useState<WorkflowSourceFocus | null>(null);
-  const sourcePanelId = useId();
-  // The step Source button that last opened the panel, so Escape / Close returns focus to it.
-  const lastSourceTriggerRef = useRef<HTMLButtonElement | null>(null);
-  const selectionControlled = selection !== undefined;
-  const tabControlled = onTabChange !== undefined;
-  const activeTab = tabControlled ? (tab ?? 'summary') : localTab;
-  const sourceAvailable =
-    query.data?.sourceSnapshot !== null && query.data?.sourceSnapshot !== undefined;
-  const cancelMutation = useCancelWorkflowRunMutation(query.data);
-
-  useEffect(() => {
-    if (!sourceAvailable) {
-      setSourcePanelOpen(false);
-      setSourceFocus(null);
-    }
-  }, [sourceAvailable]);
-
-  // If a refetch drops the focused step or its location, close the panel so it never points at
-  // an unmounted Source button.
-  useEffect(() => {
-    if (!sourceFocus) return;
-    const stillLocated = query.data?.jobs.some((job) =>
-      job.jobExecutions.some((execution) =>
-        execution.steps.some((step) => step.id === sourceFocus.stepId && step.sourceLocation),
-      ),
-    );
-    if (!stillLocated) {
-      setSourceFocus(null);
-      setSourcePanelOpen(false);
-    }
-  }, [sourceFocus, query.data]);
-
   const runData = query.data;
-  const resolvedSelection =
-    selectionControlled && runData
-      ? resolveWorkflowRunSelection({
-          run: runData,
-          selection: selection as WorkflowRunSelectionInput,
-        })
-      : undefined;
-  const hasExplicitJobSelection = Boolean(
-    selection?.jobId || selection?.jobExecutionId || selection?.stepId || selection?.stepAttemptId,
-  );
-  const selectedJob = selectionControlled
-    ? hasExplicitJobSelection
-      ? resolvedSelection?.job
-      : undefined
-    : (runData?.jobs.find((job) => job.id === selectedJobId) ?? runData?.jobs.at(0));
-  const selectedJobExecution = selectionControlled
-    ? resolvedSelection?.jobExecution
-    : selectedJob
-      ? resolveJobExecution(selectedJob, selectedJobExecutionId)
-      : undefined;
-  const selectedAttemptId = selectionControlled
-    ? (resolvedSelection?.selectedAttemptId ?? null)
-    : undefined;
-  // Explicit per-step focus wins; fall back to the URL-selected step so deep links still
-  // pre-highlight source in the Source tab.
-  const highlightedLineRange =
-    sourceFocus?.location ?? resolvedSelection?.step?.sourceLocation ?? null;
+  const annotationSummary = annotations.summary;
+  const activeSection = runWorkspaceSection(tab);
+  const cancelMutation = useCancelWorkflowRunMutation(runData);
   const sourceSnapshot = runData?.sourceSnapshot ?? null;
+  const resolvedSelection =
+    runData && selection ? resolveWorkflowRunSelection({run: runData, selection}) : undefined;
+  const highlightedLineRange = resolvedSelection?.step?.sourceLocation ?? null;
 
-  function changeTab(nextTab: WorkflowRunTab) {
-    if (!tabControlled) {
-      setLocalTab(nextTab);
-    } else if (activeTab !== nextTab) {
-      onTabChange?.(nextTab);
-    }
-
-    if (nextTab !== 'jobs') {
-      setSourcePanelOpen(false);
-      setSourceFocus(null);
+  useEffect(() => {
+    const hasLegacyJobSelection = Boolean(
+      selection?.jobId ||
+        selection?.jobExecutionId ||
+        selection?.stepId ||
+        selection?.stepAttemptId,
+    );
+    if (
+      activeJobId ||
+      activeSection !== 'summary' ||
+      !hasLegacyJobSelection ||
+      !resolvedSelection?.job ||
+      !runData ||
+      !workspaceSlug ||
+      !projectSlug
+    ) {
+      return;
     }
-  }
 
-  function handleTabChange(nextTab: string) {
-    if (!WORKFLOW_RUN_TABS.some((value) => value === nextTab)) return;
-    changeTab(nextTab as WorkflowRunTab);
-  }
+    void navigate({
+      to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId',
+      params: {
+        workspaceSlug,
+        projectSlug,
+        workflowRunId: runData.id,
+        jobId: resolvedSelection.job.id,
+      },
+      search: workflowJobSearchParams({
+        jobExecutionId: selection?.jobExecutionId,
+        stepId: selection?.stepId,
+        stepAttemptId: selection?.stepAttemptId,
+        runAttempt: selection?.runAttempt,
+      }) as never,
+      replace: true,
+    });
+  }, [
+    activeJobId,
+    activeSection,
+    navigate,
+    projectSlug,
+    resolvedSelection?.job,
+    runData,
+    selection,
+    workspaceSlug,
+  ]);
 
   async function rerun(mode: WorkflowRunRerunMode) {
     if (!runData || !workspaceSlug || !projectSlug) {
@@ -212,11 +208,7 @@ function RunViewContent({
       toast.success('Re-run started');
       await navigate({
         to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
-        params: {
-          workspaceSlug,
-          projectSlug,
-          workflowRunId: run.id,
-        },
+        params: {workspaceSlug, projectSlug, workflowRunId: run.id},
         search: ((previous: Record<string, unknown>) =>
           withoutWorkflowRunSelectionSearch(previous)) as never,
       });
@@ -225,91 +217,60 @@ function RunViewContent({
     }
   }
 
-  function selectJob(jobId: string | undefined, source: JobGraphSelectionSource = 'pointer') {
-    if (source === 'pointer') changeTab('jobs');
-    if (!selectionControlled) {
-      setSelectedJobId(jobId);
-      setSelectedJobExecutionId(undefined);
-      return;
-    }
-    // Keyboard roving focus is an interaction within the Summary graph. Keep that panel mounted
-    // and let JobGraphView own the visual selection so focus is not moved to a different tab.
-    if (source === 'keyboard') return;
-
-    onSelectionChange?.(
-      jobId ? {jobId, runAttempt: selection?.runAttempt} : {runAttempt: selection?.runAttempt},
-    );
-  }
-
-  function selectJobExecution(jobExecutionId: string | undefined) {
-    if (!selectionControlled) {
-      setSelectedJobExecutionId(jobExecutionId);
-      return;
-    }
-    if (!selectedJob) return;
+  function selectGraphJob(jobId: string | undefined, source: JobGraphSelectionSource = 'pointer') {
+    if (source !== 'pointer' || !jobId || !runData || !workspaceSlug || !projectSlug) return;
 
-    onSelectionChange?.({
-      jobId: selectedJob.id,
-      jobExecutionId,
-      runAttempt: selection?.runAttempt,
+    void navigate({
+      to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId',
+      params: {workspaceSlug, projectSlug, workflowRunId: runData.id, jobId},
+      search: workflowJobSearchParams({
+        runAttempt: selection?.runAttempt ?? runAttempt ?? runData.runAttempt.attempt,
+      }) as never,
     });
   }
 
-  function selectAttempt(attemptId: string | undefined) {
-    if (!selectionControlled || !selectedJob || !selectedJobExecution) return;
-
-    if (!attemptId) {
-      onSelectionChange?.({
-        jobId: selectedJob.id,
-        jobExecutionId: selectedJobExecution.id,
-        runAttempt: selection?.runAttempt,
-      });
-      return;
-    }
+  function selectAnnotationJob(jobId: string | undefined) {
+    if (!runData || !workspaceSlug || !projectSlug) return;
+    const nextSearch: WorkflowRunsSearch = {...selection, tab: 'annotations'};
+    if (jobId) nextSearch.jobId = jobId;
+    else delete nextSearch.jobId;
+    delete nextSearch.jobExecutionId;
+    delete nextSearch.stepId;
+    delete nextSearch.stepAttemptId;
 
-    const match = findAttemptSelection(selectedJobExecution, attemptId);
-    if (!match) return;
-
-    onSelectionChange?.({
-      jobId: selectedJob.id,
-      jobExecutionId: selectedJobExecution.id,
-      stepId: match.stepId,
-      stepAttemptId: match.attemptId,
-      runAttempt: selection?.runAttempt,
+    void navigate({
+      to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+      params: {workspaceSlug, projectSlug, workflowRunId: runData.id},
+      search: workflowRunSearchParams(nextSearch, nextSearch) as never,
     });
   }
 
-  function openStepSource(
-    stepId: string,
-    location: StepSourceLocation,
-    trigger: HTMLButtonElement | null,
-  ) {
-    setSourceFocus({stepId, location});
-    lastSourceTriggerRef.current = trigger;
-    setSourcePanelOpen(true);
-  }
+  function clearAnnotationFilters() {
+    if (!runData || !workspaceSlug || !projectSlug) return;
+    const nextSearch: WorkflowRunsSearch = {...selection, tab: 'annotations'};
+    delete nextSearch.jobId;
+    delete nextSearch.jobExecutionId;
+    delete nextSearch.stepId;
+    delete nextSearch.stepAttemptId;
+    delete nextSearch.severity;
+    delete nextSearch.annotation;
 
-  function closeSourcePanel() {
-    const trigger = lastSourceTriggerRef.current;
-    setSourcePanelOpen(false);
-    // Defer so focus lands after the panel unmounts; clear the focus only after focusing so the
-    // opener button is still expanded (force-visible) on return.
-    window.setTimeout(() => {
-      if (trigger?.isConnected) trigger.focus();
-      setSourceFocus(null);
-    }, 0);
+    void navigate({
+      to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+      params: {workspaceSlug, projectSlug, workflowRunId: runData.id},
+      search: workflowRunSearchParams(nextSearch, nextSearch) as never,
+      replace: true,
+    });
   }
 
   function cancelRun() {
     cancelMutation.mutate(undefined, {
-      onError: (error) => {
-        toast.error(cancelErrorMessage(error));
-      },
+      onError: (error) => toast.error(cancelErrorMessage(error)),
     });
   }
 
   const fatalError = query.isError && runData === undefined;
-  const tabState = fatalError ? (
+  const loadingOrError = fatalError ? (
     query.error instanceof ApiError && query.error.status === 404 ? (
       <WorkflowRunNotFound />
     ) : (
@@ -320,146 +281,312 @@ function RunViewContent({
   ) : null;
 
   return (
-    <>
-      <Tabs
-        value={activeTab}
-        onValueChange={handleTabChange}
-        className="flex min-w-0 flex-1 flex-col gap-0"
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      {runData ? (
+        <WorkflowRunSummary
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
+          run={runData}
+          cancelling={cancelMutation.isPending}
+          onCancel={cancelRun}
+          rerunPending={rerunMutation.isPending}
+          onRerun={(mode) => void rerun(mode)}
+          latestAttempt={runData.latestAttempt}
+        />
+      ) : (
+        <WorkflowRunSkeleton />
+      )}
+      {runData && query.isError ? <WorkflowRunStaleError query={query} /> : null}
+
+      <div
+        data-run-workspace-layout
+        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base min-[768px]:flex-row"
       >
-        {runData ? (
-          <WorkflowRunSummary
+        {runData && workspaceSlug && projectSlug ? (
+          <RunWorkspaceNav
             workspaceSlug={workspaceSlug}
             projectSlug={projectSlug}
             run={runData}
-            cancelling={cancelMutation.isPending}
-            onCancel={cancelRun}
-            rerunPending={rerunMutation.isPending}
-            onRerun={(mode) => void rerun(mode)}
-            latestAttempt={runData.latestAttempt}
+            activeSection={activeSection}
+            currentJobId={activeJobId}
+            jobSearch={jobSearch}
+            annotationSummary={annotationSummary}
           />
         ) : (
-          <WorkflowRunSkeleton />
+          <RunWorkspaceNavSkeleton />
         )}
-        {runData && query.isError ? <WorkflowRunStaleError query={query} /> : null}
-        <RunTabStrip
-          jobCount={runData?.jobs.length}
-          jobsFailed={runData?.jobs.filter((job) => job.status === 'failed').length}
-          annotationSummary={annotationSummary}
-        />
-        <TabsContents className="min-h-0 flex-1 overflow-auto bg-background-neutral-background pb-24 pt-16">
-          <TabsContent
-            value="summary"
-            tabIndex={-1}
-            className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24 outline-none"
-          >
-            {runData ? (
-              <JobGraph
-                run={runData}
-                selectedJobId={selectedJob?.id}
-                onSelectedJobChange={selectJob}
-              />
-            ) : (
-              tabState
-            )}
-          </TabsContent>
-          <TabsContent
-            value="jobs"
-            tabIndex={-1}
-            className="mx-auto w-full max-w-[1120px] px-24 outline-none"
-          >
-            {runData ? (
-              <RunJobsList
-                jobs={runData.jobs}
-                selectedJobId={selectedJob?.id}
-                onSelectedJobChange={selectJob}
-                workspaceSlug={workspaceSlug}
-                selectedJobExecution={selectedJobExecution}
-                selectedAttemptId={selectedAttemptId}
-                onSelectedJobExecutionChange={selectJobExecution}
-                onSelectedAttemptChange={selectionControlled ? selectAttempt : undefined}
-                sourcePanelId={sourcePanelId}
-                sourceAvailable={sourceAvailable}
-                focusedSourceStepId={sourceFocus?.stepId ?? null}
-                onOpenStepSource={openStepSource}
-              />
-            ) : (
-              tabState
-            )}
-          </TabsContent>
-          <TabsContent
-            value="annotations"
-            tabIndex={-1}
-            className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24 outline-none"
-          >
-            {runData ? (
-              <>
-                <RunAnnotationSummaryLine
-                  summary={annotationSummary}
-                  workspaceSlug={workspaceSlug}
-                  projectSlug={projectSlug}
-                  workflowRunId={runData.id}
-                  search={selection}
-                />
-                <RunAnnotationsEmpty />
-              </>
-            ) : (
-              tabState
-            )}
-          </TabsContent>
-          <TabsContent
-            value="source"
-            keepMounted={sourceSnapshot !== null}
-            tabIndex={-1}
-            className="mx-auto flex min-h-full w-full max-w-[1120px] px-24 outline-none"
-          >
-            {runData ? (
-              sourceSnapshot ? (
-                <WorkflowSourceContent
-                  source={sourceSnapshot}
-                  highlightedLineRange={highlightedLineRange}
-                  scrollHighlightedIntoView
-                />
-              ) : (
-                <EmptyState
-                  className="min-h-160 w-full"
-                  icon="fileDamageLine"
-                  title="Source snapshot unavailable"
-                  description={
-                    runData.isTemporary
-                      ? 'Temporary runs do not capture workflow source.'
-                      : 'This run was created before workflow source snapshots were captured.'
-                  }
-                />
-              )
-            ) : (
-              tabState
-            )}
-          </TabsContent>
-        </TabsContents>
-      </Tabs>
-      <WorkflowSourcePanel
-        id={sourcePanelId}
-        source={sourceSnapshot}
-        open={sourcePanelOpen && sourceAvailable}
-        onClose={closeSourcePanel}
-        highlightedLineRange={highlightedLineRange}
-        scrollHighlightedIntoView
+
+        <div
+          data-run-workspace-content
+          className="flex min-h-0 min-w-0 flex-1 flex-col bg-background-neutral-base"
+        >
+          {runData && jobContent ? (
+            jobContent
+          ) : runData ? (
+            <RunSectionContent
+              section={activeSection}
+              run={runData}
+              annotations={annotations}
+              annotationSummary={annotationSummary}
+              workspaceSlug={workspaceSlug}
+              projectSlug={projectSlug}
+              selection={selection}
+              selectedJobId={selection?.jobId}
+              onSelectGraphJob={selectGraphJob}
+              onSelectAnnotationJob={selectAnnotationJob}
+              onClearAnnotationFilters={clearAnnotationFilters}
+              sourceSnapshot={sourceSnapshot}
+              highlightedLineRange={highlightedLineRange}
+            />
+          ) : (
+            <div className="min-h-0 flex-1 overflow-auto p-24">{loadingOrError}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function RunSectionContent({
+  section,
+  run,
+  annotations,
+  annotationSummary,
+  workspaceSlug,
+  projectSlug,
+  selection,
+  selectedJobId,
+  onSelectGraphJob,
+  onSelectAnnotationJob,
+  onClearAnnotationFilters,
+  sourceSnapshot,
+  highlightedLineRange,
+}: {
+  section: RunWorkspaceSection;
+  run: NonNullable<ReturnType<typeof useWorkflowRunAttemptQuery>['data']>;
+  annotations: ReturnType<typeof useRunAnnotationsQuery>;
+  annotationSummary: RunAnnotationSummary | undefined;
+  workspaceSlug: string | undefined;
+  projectSlug: string | undefined;
+  selection: WorkflowRunsSearch | undefined;
+  selectedJobId: string | undefined;
+  onSelectGraphJob: (jobId: string | undefined, source?: JobGraphSelectionSource) => void;
+  onSelectAnnotationJob: (jobId: string | undefined) => void;
+  onClearAnnotationFilters: () => void;
+  sourceSnapshot: NonNullable<
+    ReturnType<typeof useWorkflowRunAttemptQuery>['data']
+  >['sourceSnapshot'];
+  highlightedLineRange: NonNullable<
+    ReturnType<typeof useWorkflowRunAttemptQuery>['data']
+  >['jobs'][number]['jobExecutions'][number]['steps'][number]['sourceLocation'];
+}) {
+  if (section === 'summary') {
+    return (
+      <section aria-label="All jobs summary" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
+        <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24">
+          <Text as="h2" className="sr-only">
+            All jobs summary
+          </Text>
+          <JobGraph
+            run={run}
+            selectedJobId={selectedJobId}
+            onSelectedJobChange={onSelectGraphJob}
+            className="min-h-160 overflow-hidden"
+          />
+        </div>
+      </section>
+    );
+  }
+
+  if (section === 'annotations') {
+    return (
+      <RunAnnotationsSection
+        run={run}
+        annotations={annotations}
+        annotationSummary={annotationSummary}
+        workspaceSlug={workspaceSlug}
+        projectSlug={projectSlug}
+        selection={selection}
+        selectedJobId={selectedJobId}
+        onSelectAnnotationJob={onSelectAnnotationJob}
+        onClearAnnotationFilters={onClearAnnotationFilters}
       />
-    </>
+    );
+  }
+
+  return (
+    <section aria-label="Workflow source" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
+      <div className="mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-24">
+        <Text as="h2" className="sr-only">
+          Workflow source
+        </Text>
+        {sourceSnapshot ? (
+          <WorkflowSourceContent
+            source={sourceSnapshot}
+            highlightedLineRange={highlightedLineRange}
+            scrollHighlightedIntoView
+          />
+        ) : (
+          <EmptyState
+            className="min-h-160 w-full"
+            icon="fileDamageLine"
+            title="Source snapshot unavailable"
+            description={
+              run.isTemporary
+                ? 'Temporary runs do not capture workflow source.'
+                : 'This run was created before workflow source snapshots were captured.'
+            }
+          />
+        )}
+      </div>
+    </section>
   );
 }
 
+function RunAnnotationsSection({
+  run,
+  annotations,
+  annotationSummary,
+  workspaceSlug,
+  projectSlug,
+  selection,
+  selectedJobId,
+  onSelectAnnotationJob,
+  onClearAnnotationFilters,
+}: {
+  run: NonNullable<ReturnType<typeof useWorkflowRunAttemptQuery>['data']>;
+  annotations: ReturnType<typeof useRunAnnotationsQuery>;
+  annotationSummary: RunAnnotationSummary | undefined;
+  workspaceSlug: string | undefined;
+  projectSlug: string | undefined;
+  selection: WorkflowRunsSearch | undefined;
+  selectedJobId: string | undefined;
+  onSelectAnnotationJob: (jobId: string | undefined) => void;
+  onClearAnnotationFilters: () => void;
+}) {
+  const selectedJob = run.jobs.find((job) => job.id === selectedJobId);
+  const severity = selection?.severity;
+  const records = annotations.annotations;
+
+  const entries = useMemo(
+    () =>
+      records
+        ? buildRunAnnotationList({
+            annotations: records,
+            jobs: run.jobs,
+            severity,
+            jobId: selectedJob?.id,
+          })
+        : undefined,
+    [records, run.jobs, selectedJob?.id, severity],
+  );
+
+  return (
+    <section aria-label="Run annotations" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
+      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24">
+        <Text as="h2" className="sr-only">
+          Annotations
+        </Text>
+        <div className="flex flex-wrap items-center justify-between gap-8">
+          <RunAnnotationSummaryLine
+            summary={annotationSummary}
+            workspaceSlug={workspaceSlug}
+            projectSlug={projectSlug}
+            workflowRunId={run.id}
+            search={selection}
+          />
+          <AnnotationJobFilter
+            jobs={run.jobs}
+            selectedJobId={selectedJob?.id}
+            onSelect={onSelectAnnotationJob}
+          />
+        </div>
+        <RunAnnotationList
+          // Remounting on a filter or run-attempt change resets the render window, so the next
+          // list never inherits a "show more" position from different data.
+          key={`${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`}
+          query={annotations.query}
+          entries={entries}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
+          workflowRunId={run.id}
+          runAttempt={run.runAttempt.attempt}
+          // A run with no annotations at all offers no filter to clear, whatever the URL says.
+          filtered={Boolean((severity || selectedJob) && (annotationSummary?.total ?? 0) > 0)}
+          filteredJobName={selectedJob?.displayName}
+          filteredSeverity={severity}
+          onClearFilters={onClearAnnotationFilters}
+          selectedAnnotationId={selection?.annotation}
+        />
+      </div>
+    </section>
+  );
+}
+
+const ALL_ANNOTATION_JOBS = 'all-jobs';
+
+function AnnotationJobFilter({
+  jobs,
+  selectedJobId,
+  onSelect,
+}: {
+  jobs: Job[];
+  selectedJobId: string | undefined;
+  onSelect: (jobId: string | undefined) => void;
+}) {
+  const sortedJobs = [...jobs].sort(
+    (left, right) => left.position - right.position || left.id.localeCompare(right.id),
+  );
+
+  return (
+    <Select
+      value={selectedJobId ?? ALL_ANNOTATION_JOBS}
+      onValueChange={(value) => onSelect(value === ALL_ANNOTATION_JOBS ? undefined : value)}
+    >
+      <SelectTrigger
+        size="small"
+        aria-label="Filter annotations by job"
+        className="w-full min-[480px]:w-240"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent align="end">
+        <SelectItem value={ALL_ANNOTATION_JOBS}>All jobs</SelectItem>
+        {sortedJobs.map((job) => (
+          <SelectItem key={job.id} value={job.id}>
+            {job.displayName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function RunWorkspaceNavSkeleton() {
+  return (
+    <aside
+      aria-label="Loading run navigation"
+      className="hidden w-240 shrink-0 border-r border-border-neutral-base bg-background-neutral-background p-12 min-[768px]:block"
+    >
+      <div className="flex flex-col gap-16">
+        <div className="h-32 rounded-4 bg-background-components-subtle" />
+        <div className="flex flex-col gap-6">
+          <div className="h-16 w-64 rounded-4 bg-background-components-subtle" />
+          <div className="h-32 rounded-4 bg-background-components-subtle" />
+          <div className="h-32 rounded-4 bg-background-components-subtle" />
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function runWorkspaceSection(tab: WorkflowRunTab | undefined): RunWorkspaceSection {
+  return tab === 'annotations' || tab === 'source' ? tab : 'summary';
+}
+
 function cancelErrorMessage(error: unknown): string {
   if (error instanceof ApiError && error.code === 'run-already-finished') {
     return 'This workflow run has already finished.';
   }
   return 'Could not cancel workflow run.';
 }
-
-function findAttemptSelection(jobExecution: JobExecution, attemptId: string) {
-  for (const step of jobExecution.steps) {
-    const attempt = step.attempts.find((candidate) => candidate.id === attemptId);
-    if (attempt) return {stepId: step.id, attemptId: attempt.id};
-  }
-  return undefined;
-}