@shipfox/client-workflows 14.0.1 → 16.0.0

package/dist/components/workflow-run-view/workflow-run-view.js

@@ -1,31 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { resolveJobExecution } from '#core/workflow-run.js';
+import { useEffect, useMemo } from 'react';
+import { buildRunAnnotationList } from '#core/run-annotation.js';
+import { isWorkflowRunTerminal } 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 } from '#routes/inputs.js';
+import { workflowJobSearchParams, workflowRunSearchParams } from '#routes/inputs.js';
 import { JobGraph } from '../job-graph/index.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, WorkflowRunNotFound, WorkflowRunSkeleton, WorkflowRunStaleError } from './workflow-run-states.js';
 /**
- * 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.
- */ export function WorkflowRunView({ projectId, workspaceSlug, projectSlug, workflowRunId, selection, onSelectionChange, tab, onTabChange, annotationSummary }) {
+ * 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, tab, activeJobId, jobSearch, jobContent }) {
     const runQuery = useWorkflowRunAttemptQuery({
         workflowRunId,
-        runAttempt: selection?.runAttempt
+        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 /*#__PURE__*/ _jsx(RelativeTimeProvider, {
         children: /*#__PURE__*/ _jsx("div", {
             className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
@@ -33,80 +49,61 @@ import { WorkflowRunContentSkeleton, WorkflowRunNotFound, WorkflowRunSkeleton, W
                 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
             })
         })
     });
 }
-function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, selection, onSelectionChange, tab, onTabChange, annotationSummary }) {
+function RunViewContent({ workspaceSlug, projectSlug, query, annotations, rerunMutation, runAttempt, selection, tab, activeJobId, jobSearch, jobContent }) {
     const navigate = useNavigate();
-    const [selectedJobId, setSelectedJobId] = useState();
-    const [selectedJobExecutionId, setSelectedJobExecutionId] = useState();
-    const [localTab, setLocalTab] = useState(tab ?? 'summary');
-    const [sourcePanelOpen, setSourcePanelOpen] = useState(false);
-    const [sourceFocus, setSourceFocus] = useState(null);
-    const sourcePanelId = useId();
-    // The step Source button that last opened the panel, so Escape / Close returns focus to it.
-    const lastSourceTriggerRef = useRef(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({
+    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: selection
+        selection
     }) : 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 sourceSnapshot = runData?.sourceSnapshot ?? null;
-    function changeTab(nextTab) {
-        if (!tabControlled) {
-            setLocalTab(nextTab);
-        } else if (activeTab !== nextTab) {
-            onTabChange?.(nextTab);
-        }
-        if (nextTab !== 'jobs') {
-            setSourcePanelOpen(false);
-            setSourceFocus(null);
+    const highlightedLineRange = resolvedSelection?.step?.sourceLocation ?? 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) {
-        if (!WORKFLOW_RUN_TABS.some((value)=>value === nextTab)) return;
-        changeTab(nextTab);
-    }
+        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
+            }),
+            replace: true
+        });
+    }, [
+        activeJobId,
+        activeSection,
+        navigate,
+        projectSlug,
+        resolvedSelection?.job,
+        runData,
+        selection,
+        workspaceSlug
+    ]);
     async function rerun(mode) {
         if (!runData || !workspaceSlug || !projectSlug) {
             toast.error('Could not start re-run from this route.');
@@ -131,206 +128,321 @@ function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, sele
             toast.error(error instanceof ApiError ? error.message : 'Could not start re-run');
         }
     }
-    function selectJob(jobId, source = '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) {
-        if (!selectionControlled) {
-            setSelectedJobExecutionId(jobExecutionId);
-            return;
-        }
-        if (!selectedJob) return;
-        onSelectionChange?.({
-            jobId: selectedJob.id,
-            jobExecutionId,
-            runAttempt: selection?.runAttempt
+    function selectGraphJob(jobId, source = 'pointer') {
+        if (source !== 'pointer' || !jobId || !runData || !workspaceSlug || !projectSlug) return;
+        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
+            })
         });
     }
-    function selectAttempt(attemptId) {
-        if (!selectionControlled || !selectedJob || !selectedJobExecution) return;
-        if (!attemptId) {
-            onSelectionChange?.({
-                jobId: selectedJob.id,
-                jobExecutionId: selectedJobExecution.id,
-                runAttempt: selection?.runAttempt
-            });
-            return;
-        }
-        const match = findAttemptSelection(selectedJobExecution, attemptId);
-        if (!match) return;
-        onSelectionChange?.({
-            jobId: selectedJob.id,
-            jobExecutionId: selectedJobExecution.id,
-            stepId: match.stepId,
-            stepAttemptId: match.attemptId,
-            runAttempt: selection?.runAttempt
+    function selectAnnotationJob(jobId) {
+        if (!runData || !workspaceSlug || !projectSlug) return;
+        const nextSearch = {
+            ...selection,
+            tab: 'annotations'
+        };
+        if (jobId) nextSearch.jobId = jobId;
+        else delete nextSearch.jobId;
+        delete nextSearch.jobExecutionId;
+        delete nextSearch.stepId;
+        delete nextSearch.stepAttemptId;
+        void navigate({
+            to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+            params: {
+                workspaceSlug,
+                projectSlug,
+                workflowRunId: runData.id
+            },
+            search: workflowRunSearchParams(nextSearch, nextSearch)
         });
     }
-    function openStepSource(stepId, location, trigger) {
-        setSourceFocus({
-            stepId,
-            location
+    function clearAnnotationFilters() {
+        if (!runData || !workspaceSlug || !projectSlug) return;
+        const nextSearch = {
+            ...selection,
+            tab: 'annotations'
+        };
+        delete nextSearch.jobId;
+        delete nextSearch.jobExecutionId;
+        delete nextSearch.stepId;
+        delete nextSearch.stepAttemptId;
+        delete nextSearch.severity;
+        delete nextSearch.annotation;
+        void navigate({
+            to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+            params: {
+                workspaceSlug,
+                projectSlug,
+                workflowRunId: runData.id
+            },
+            search: workflowRunSearchParams(nextSearch, nextSearch),
+            replace: true
         });
-        lastSourceTriggerRef.current = trigger;
-        setSourcePanelOpen(true);
-    }
-    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);
     }
     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 ? query.error instanceof ApiError && query.error.status === 404 ? /*#__PURE__*/ _jsx(WorkflowRunNotFound, {}) : /*#__PURE__*/ _jsx(QueryLoadError, {
+    const loadingOrError = fatalError ? query.error instanceof ApiError && query.error.status === 404 ? /*#__PURE__*/ _jsx(WorkflowRunNotFound, {}) : /*#__PURE__*/ _jsx(QueryLoadError, {
         query: query,
         subject: "workflow run",
         icon: "pulseLine"
     }) : query.isPending || runData === undefined ? /*#__PURE__*/ _jsx(WorkflowRunContentSkeleton, {}) : null;
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex min-h-0 min-w-0 flex-1 flex-col",
         children: [
-            /*#__PURE__*/ _jsxs(Tabs, {
-                value: activeTab,
-                onValueChange: handleTabChange,
-                className: "flex min-w-0 flex-1 flex-col gap-0",
+            runData ? /*#__PURE__*/ _jsx(WorkflowRunSummary, {
+                workspaceSlug: workspaceSlug,
+                projectSlug: projectSlug,
+                run: runData,
+                cancelling: cancelMutation.isPending,
+                onCancel: cancelRun,
+                rerunPending: rerunMutation.isPending,
+                onRerun: (mode)=>void rerun(mode),
+                latestAttempt: runData.latestAttempt
+            }) : /*#__PURE__*/ _jsx(WorkflowRunSkeleton, {}),
+            runData && query.isError ? /*#__PURE__*/ _jsx(WorkflowRunStaleError, {
+                query: query
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
+                "data-run-workspace-layout": true,
+                className: "flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base min-[768px]:flex-row",
                 children: [
-                    runData ? /*#__PURE__*/ _jsx(WorkflowRunSummary, {
+                    runData && workspaceSlug && projectSlug ? /*#__PURE__*/ _jsx(RunWorkspaceNav, {
                         workspaceSlug: workspaceSlug,
                         projectSlug: projectSlug,
                         run: runData,
-                        cancelling: cancelMutation.isPending,
-                        onCancel: cancelRun,
-                        rerunPending: rerunMutation.isPending,
-                        onRerun: (mode)=>void rerun(mode),
-                        latestAttempt: runData.latestAttempt
-                    }) : /*#__PURE__*/ _jsx(WorkflowRunSkeleton, {}),
-                    runData && query.isError ? /*#__PURE__*/ _jsx(WorkflowRunStaleError, {
-                        query: query
-                    }) : null,
-                    /*#__PURE__*/ _jsx(RunTabStrip, {
-                        jobCount: runData?.jobs.length,
-                        jobsFailed: runData?.jobs.filter((job)=>job.status === 'failed').length,
+                        activeSection: activeSection,
+                        currentJobId: activeJobId,
+                        jobSearch: jobSearch,
                         annotationSummary: annotationSummary
+                    }) : /*#__PURE__*/ _jsx(RunWorkspaceNavSkeleton, {}),
+                    /*#__PURE__*/ _jsx("div", {
+                        "data-run-workspace-content": true,
+                        className: "flex min-h-0 min-w-0 flex-1 flex-col bg-background-neutral-base",
+                        children: runData && jobContent ? jobContent : runData ? /*#__PURE__*/ _jsx(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
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            className: "min-h-0 flex-1 overflow-auto p-24",
+                            children: loadingOrError
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RunSectionContent({ section, run, annotations, annotationSummary, workspaceSlug, projectSlug, selection, selectedJobId, onSelectGraphJob, onSelectAnnotationJob, onClearAnnotationFilters, sourceSnapshot, highlightedLineRange }) {
+    if (section === 'summary') {
+        return /*#__PURE__*/ _jsx("section", {
+            "aria-label": "All jobs summary",
+            className: "min-h-0 flex-1 overflow-auto pb-24 pt-16",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        as: "h2",
+                        className: "sr-only",
+                        children: "All jobs summary"
                     }),
-                    /*#__PURE__*/ _jsxs(TabsContents, {
-                        className: "min-h-0 flex-1 overflow-auto bg-background-neutral-background pb-24 pt-16",
-                        children: [
-                            /*#__PURE__*/ _jsx(TabsContent, {
-                                value: "summary",
-                                tabIndex: -1,
-                                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24 outline-none",
-                                children: runData ? /*#__PURE__*/ _jsx(JobGraph, {
-                                    run: runData,
-                                    selectedJobId: selectedJob?.id,
-                                    onSelectedJobChange: selectJob
-                                }) : tabState
-                            }),
-                            /*#__PURE__*/ _jsx(TabsContent, {
-                                value: "jobs",
-                                tabIndex: -1,
-                                className: "mx-auto w-full max-w-[1120px] px-24 outline-none",
-                                children: runData ? /*#__PURE__*/ _jsx(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
-                            }),
-                            /*#__PURE__*/ _jsx(TabsContent, {
-                                value: "annotations",
-                                tabIndex: -1,
-                                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24 outline-none",
-                                children: runData ? /*#__PURE__*/ _jsxs(_Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(RunAnnotationSummaryLine, {
-                                            summary: annotationSummary,
-                                            workspaceSlug: workspaceSlug,
-                                            projectSlug: projectSlug,
-                                            workflowRunId: runData.id,
-                                            search: selection
-                                        }),
-                                        /*#__PURE__*/ _jsx(RunAnnotationsEmpty, {})
-                                    ]
-                                }) : tabState
-                            }),
-                            /*#__PURE__*/ _jsx(TabsContent, {
-                                value: "source",
-                                keepMounted: sourceSnapshot !== null,
-                                tabIndex: -1,
-                                className: "mx-auto flex min-h-full w-full max-w-[1120px] px-24 outline-none",
-                                children: runData ? sourceSnapshot ? /*#__PURE__*/ _jsx(WorkflowSourceContent, {
-                                    source: sourceSnapshot,
-                                    highlightedLineRange: highlightedLineRange,
-                                    scrollHighlightedIntoView: true
-                                }) : /*#__PURE__*/ _jsx(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
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(JobGraph, {
+                        run: run,
+                        selectedJobId: selectedJobId,
+                        onSelectedJobChange: onSelectGraphJob,
+                        className: "min-h-160 overflow-hidden"
                     })
                 ]
+            })
+        });
+    }
+    if (section === 'annotations') {
+        return /*#__PURE__*/ _jsx(RunAnnotationsSection, {
+            run: run,
+            annotations: annotations,
+            annotationSummary: annotationSummary,
+            workspaceSlug: workspaceSlug,
+            projectSlug: projectSlug,
+            selection: selection,
+            selectedJobId: selectedJobId,
+            onSelectAnnotationJob: onSelectAnnotationJob,
+            onClearAnnotationFilters: onClearAnnotationFilters
+        });
+    }
+    return /*#__PURE__*/ _jsx("section", {
+        "aria-label": "Workflow source",
+        className: "min-h-0 flex-1 overflow-auto pb-24 pt-16",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-24",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    as: "h2",
+                    className: "sr-only",
+                    children: "Workflow source"
+                }),
+                sourceSnapshot ? /*#__PURE__*/ _jsx(WorkflowSourceContent, {
+                    source: sourceSnapshot,
+                    highlightedLineRange: highlightedLineRange,
+                    scrollHighlightedIntoView: true
+                }) : /*#__PURE__*/ _jsx(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.'
+                })
+            ]
+        })
+    });
+}
+function RunAnnotationsSection({ run, annotations, annotationSummary, workspaceSlug, projectSlug, selection, selectedJobId, onSelectAnnotationJob, onClearAnnotationFilters }) {
+    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 /*#__PURE__*/ _jsx("section", {
+        "aria-label": "Run annotations",
+        className: "min-h-0 flex-1 overflow-auto pb-24 pt-16",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    as: "h2",
+                    className: "sr-only",
+                    children: "Annotations"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-wrap items-center justify-between gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(RunAnnotationSummaryLine, {
+                            summary: annotationSummary,
+                            workspaceSlug: workspaceSlug,
+                            projectSlug: projectSlug,
+                            workflowRunId: run.id,
+                            search: selection
+                        }),
+                        /*#__PURE__*/ _jsx(AnnotationJobFilter, {
+                            jobs: run.jobs,
+                            selectedJobId: selectedJob?.id,
+                            onSelect: onSelectAnnotationJob
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(RunAnnotationList, {
+                    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
+                }, `${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`)
+            ]
+        })
+    });
+}
+const ALL_ANNOTATION_JOBS = 'all-jobs';
+function AnnotationJobFilter({ jobs, selectedJobId, onSelect }) {
+    const sortedJobs = [
+        ...jobs
+    ].sort((left, right)=>left.position - right.position || left.id.localeCompare(right.id));
+    return /*#__PURE__*/ _jsxs(Select, {
+        value: selectedJobId ?? ALL_ANNOTATION_JOBS,
+        onValueChange: (value)=>onSelect(value === ALL_ANNOTATION_JOBS ? undefined : value),
+        children: [
+            /*#__PURE__*/ _jsx(SelectTrigger, {
+                size: "small",
+                "aria-label": "Filter annotations by job",
+                className: "w-full min-[480px]:w-240",
+                children: /*#__PURE__*/ _jsx(SelectValue, {})
             }),
-            /*#__PURE__*/ _jsx(WorkflowSourcePanel, {
-                id: sourcePanelId,
-                source: sourceSnapshot,
-                open: sourcePanelOpen && sourceAvailable,
-                onClose: closeSourcePanel,
-                highlightedLineRange: highlightedLineRange,
-                scrollHighlightedIntoView: true
+            /*#__PURE__*/ _jsxs(SelectContent, {
+                align: "end",
+                children: [
+                    /*#__PURE__*/ _jsx(SelectItem, {
+                        value: ALL_ANNOTATION_JOBS,
+                        children: "All jobs"
+                    }),
+                    sortedJobs.map((job)=>/*#__PURE__*/ _jsx(SelectItem, {
+                            value: job.id,
+                            children: job.displayName
+                        }, job.id))
+                ]
             })
         ]
     });
 }
+function RunWorkspaceNavSkeleton() {
+    return /*#__PURE__*/ _jsx("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",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "h-32 rounded-4 bg-background-components-subtle"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-16 w-64 rounded-4 bg-background-components-subtle"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-32 rounded-4 bg-background-components-subtle"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "h-32 rounded-4 bg-background-components-subtle"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function runWorkspaceSection(tab) {
+    return tab === 'annotations' || tab === 'source' ? tab : 'summary';
+}
 function cancelErrorMessage(error) {
     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, attemptId) {
-    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;
-}
 
 //# sourceMappingURL=workflow-run-view.js.map