@shipfox/client-workflows 21.0.0 → 22.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -29,14 +29,14 @@
     "date-fns": "^4.1.0",
     "@shipfox/annotations-dto": "12.3.0",
     "@shipfox/api-definitions-dto": "12.3.0",
-    "@shipfox/api-workflows-dto": "12.7.0",
+    "@shipfox/api-workflows-dto": "13.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-logs": "21.0.0",
-    "@shipfox/client-projects": "21.0.0",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/client-triggers": "21.0.0",
-    "@shipfox/client-ui": "21.0.0",
-    "@shipfox/react-ui": "2.0.0"
+    "@shipfox/client-logs": "22.0.0",
+    "@shipfox/client-projects": "22.0.1",
+    "@shipfox/client-shell": "22.0.1",
+    "@shipfox/client-triggers": "22.0.1",
+    "@shipfox/react-ui": "2.1.0",
+    "@shipfox/client-ui": "22.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/job-detail/job-detail-view.tsx

@@ -558,11 +558,10 @@ function EmptyStateForMissingExecution({job}: {job: Job}) {
   const emptyState = emptyStateForMissingExecution(job);
   return (
     <EmptyState
-      className="min-h-120 p-panel"
       icon="componentLine"
       title={emptyState.title}
       description={emptyState.description}
-      variant="compact"
+      variant="panel"
     />
   );
 }

package/src/components/job-detail/job-empty-states.tsx

@@ -256,11 +256,11 @@ function humanizeFailureReason(reason: string): string {
 export function CarriedOverStepPanel() {
   return (
     <EmptyState
-      className="min-h-120 rounded-8 border border-border-neutral-base bg-background-components-base p-panel"
+      className="rounded-8 border border-border-neutral-base bg-background-components-base"
       icon="componentLine"
       title="Carried over from a previous attempt"
       description="Not executed in this run."
-      variant="compact"
+      variant="panel"
     />
   );
 }

package/src/components/job-detail/job-execution-time-text.test.ts

@@ -0,0 +1,46 @@
+import {formatJobExecutionTime} from './job-execution-time-text.js';
+
+const FROM_ISO = '2026-08-15T08:51:00.000Z';
+const FROM_MS = Date.parse(FROM_ISO);
+
+describe('formatJobExecutionTime', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test.each([
+    [999, '0s'],
+    [37_999, '37s'],
+    [60_000, '1m 00s'],
+    [124_999, '2m 04s'],
+    [3_780_999, '1h 03m'],
+  ])('formats a live %i ms timer as %s', (elapsedMs, expected) => {
+    vi.useFakeTimers();
+    vi.setSystemTime(FROM_MS + elapsedMs);
+
+    const result = formatJobExecutionTime({
+      state: 'live',
+      fromIso: FROM_ISO,
+    });
+
+    expect(result).toBe(expected);
+  });
+
+  test('falls back to zero seconds for an invalid live timestamp', () => {
+    const result = formatJobExecutionTime({state: 'live', fromIso: 'not-a-date'});
+
+    expect(result).toBe('0s');
+  });
+
+  test.each([
+    [{seconds: 37}, '37s'],
+    [{minutes: 1}, '1m 00s'],
+    [{minutes: 2, seconds: 4}, '2m 04s'],
+    [{hours: 1}, '1h 00m'],
+    [{hours: 1, minutes: 3}, '1h 03m'],
+  ])('formats a fixed timer consistently as %s', (elapsed, expected) => {
+    const result = formatJobExecutionTime({state: 'fixed', elapsed});
+
+    expect(result).toBe(expected);
+  });
+});

package/src/components/job-detail/job-execution-time-text.tsx

@@ -1,6 +1,6 @@
 import {useTimeTick} from '@shipfox/react-ui/time-ticker';
-import {formatDuration} from '@shipfox/react-ui/utils';
 import type {JobExecutionTime} from '#core/workflow-run.js';
+import {formatJobExecutionTimeLabel} from '../job-graph/job-duration-format.js';
 
 export function JobExecutionTimeText({time}: {time: JobExecutionTime}) {
   useTimeTick();
@@ -9,26 +9,5 @@ export function JobExecutionTimeText({time}: {time: JobExecutionTime}) {
 }
 
 export function formatJobExecutionTime(time: JobExecutionTime): string {
-  if (time.state === 'live') {
-    return formatDuration(Date.now() - Date.parse(time.fromIso));
-  }
-
-  return formatElapsedDuration(time.elapsed);
-}
-
-function formatElapsedDuration(duration: {
-  days?: number | undefined;
-  hours?: number | undefined;
-  minutes?: number | undefined;
-  seconds?: number | undefined;
-}): string {
-  const days = duration.days ?? 0;
-  const hours = duration.hours ?? 0;
-  const minutes = duration.minutes ?? 0;
-  const seconds = duration.seconds ?? 0;
-
-  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
-  if (hours > 0) return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
-  if (minutes > 0) return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-  return `${seconds}s`;
+  return formatJobExecutionTimeLabel(time);
 }

package/src/components/job-graph/job-duration-format.ts

@@ -8,7 +8,7 @@ import type {
 export function formatJobExecutionTimeLabel(time: JobExecutionTime): string {
   switch (time.state) {
     case 'live':
-      return humanDuration(time.fromIso);
+      return humanDuration(time.fromIso) || '0s';
     case 'fixed':
       return formatFixedDurationLabel(time.elapsed);
     default: {

package/src/components/job-graph/job-graph-content.tsx

@@ -37,11 +37,11 @@ export function JobGraphContent({
   if (model.nodes.length === 0) {
     return (
       <EmptyState
-        className="min-h-160 p-panel"
+        className="min-h-160"
         icon="componentLine"
         title="No jobs yet"
         description="This run has not materialized jobs."
-        variant="compact"
+        variant="panel"
       />
     );
   }

package/src/components/step-list/step-list.tsx

@@ -326,11 +326,10 @@ function StepListEmptyStateView({
   if (!emptyState.status) {
     return (
       <EmptyState
-        className="min-h-120 p-panel"
         icon="componentLine"
         title={emptyState.title}
         description={emptyState.description}
-        variant="compact"
+        variant="panel"
       />
     );
   }

package/src/components/workflow-run-list/workflow-run-list-content.tsx

@@ -1,4 +1,5 @@
 import {QueryLoadError} from '@shipfox/client-ui';
+import {Panel} from '@shipfox/react-ui/panel';
 import type {WorkflowRunListItem} from '#core/workflow-run.js';
 import type {WorkflowRunListQuery} from './types.js';
 import {
@@ -55,11 +56,15 @@ export function WorkflowRunListContent({
     <div className="min-h-0 flex-1 overflow-y-auto">
       {isPending ? <WorkflowRunListSkeleton /> : null}
       {!isPending ? (
-        <QueryLoadError query={query} subject="workflow runs" icon="pulseLine" />
+        <Panel>
+          <QueryLoadError query={query} subject="workflow runs" icon="pulseLine" variant="panel" />
+        </Panel>
       ) : null}
       {!isPending && refreshFailed ? <WorkflowRunListStaleError query={query} /> : null}
       {showEmptyState ? (
-        <WorkflowRunListEmpty workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+        <Panel>
+          <WorkflowRunListEmpty workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+        </Panel>
       ) : null}
       {showNoMatches ? (
         <WorkflowRunListNoMatches

package/src/components/workflow-run-list/workflow-run-list-states.tsx

@@ -2,6 +2,7 @@ import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
 import {Link} from '@tanstack/react-router';
@@ -15,16 +16,12 @@ const SKELETON_ROW_COUNT = 8;
  */
 export function WorkflowRunListSkeleton() {
   return (
-    <div
-      className="@container divide-y divide-border-neutral-base"
-      role="status"
-      aria-label="Loading runs"
-    >
+    <Panel role="status" aria-label="Loading runs" className="@container divide-y">
       {Array.from({length: SKELETON_ROW_COUNT}).map((_, index) => (
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
           key={index}
-          className="flex items-center gap-inline px-row py-row @min-[976px]:h-44 @min-[976px]:py-0"
+          className="flex min-h-44 items-center gap-inline px-row py-row @min-[976px]:h-44 @min-[976px]:py-0"
         >
           <Skeleton className="size-14 shrink-0 rounded-full" />
           <Skeleton className="h-12 w-[220px] max-w-[40%]" />
@@ -33,7 +30,7 @@ export function WorkflowRunListSkeleton() {
           <Skeleton className="h-12 w-48" />
         </div>
       ))}
-    </div>
+    </Panel>
   );
 }
 
@@ -89,6 +86,7 @@ export function WorkflowRunListEmpty({
           </Button>
         ) : null
       }
+      variant="panel"
     />
   );
 }
@@ -116,40 +114,43 @@ export function WorkflowRunListNoMatches({
   onLoadMore?: () => void;
 }) {
   return (
-    <div className="flex flex-col gap-inline">
-      {isFetchNextPageError ? (
-        <Callout role="alert" type="error">
-          Could not load more workflow runs. Try again to continue searching older runs.
-        </Callout>
-      ) : null}
-      <EmptyState
-        icon="filterOffLine"
-        title={hasNextPage ? 'No matches in loaded history' : 'No matching runs'}
-        description={
-          hasNextPage
-            ? 'No loaded run matches these filters. Load more to search further back.'
-            : 'No run matches these filters.'
-        }
-        action={
-          <div className="flex flex-wrap justify-center gap-inline">
-            {hasNextPage && onLoadMore ? (
-              <Button
-                type="button"
-                size="sm"
-                variant="primary"
-                isLoading={isFetchingNextPage}
-                onClick={onLoadMore}
-              >
-                Load more runs
+    <Panel>
+      <div className="flex flex-col gap-inline">
+        {isFetchNextPageError ? (
+          <Callout role="alert" type="error">
+            Could not load more workflow runs. Try again to continue searching older runs.
+          </Callout>
+        ) : null}
+        <EmptyState
+          icon="filterOffLine"
+          title={hasNextPage ? 'No matches in loaded history' : 'No matching runs'}
+          description={
+            hasNextPage
+              ? 'No loaded run matches these filters. Load more to search further back.'
+              : 'No run matches these filters.'
+          }
+          action={
+            <div className="flex flex-wrap justify-center gap-inline">
+              {hasNextPage && onLoadMore ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="primary"
+                  isLoading={isFetchingNextPage}
+                  onClick={onLoadMore}
+                >
+                  Load more runs
+                </Button>
+              ) : null}
+              <Button type="button" size="sm" variant="secondary" onClick={onClear}>
+                Show all runs
               </Button>
-            ) : null}
-            <Button type="button" size="sm" variant="secondary" onClick={onClear}>
-              Show all runs
-            </Button>
-          </div>
-        }
-      />
-    </div>
+            </div>
+          }
+          variant="panel"
+        />
+      </div>
+    </Panel>
   );
 }
 

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -1,5 +1,6 @@
 import {TriggerSourceIcon} from '@shipfox/client-triggers';
 import {Icon, type IconName} from '@shipfox/react-ui/icon';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
@@ -37,13 +38,15 @@ export function WorkflowRunRowList({
     // A container, not the viewport, drives the row's breakpoints. What a row can afford is its
     // own width; keying off the viewport would keep the job strip hidden on a wide screen or
     // crush it on a narrow one.
-    <ul className="@container divide-y divide-border-neutral-base">
-      {runs.map((run) => (
-        <li key={run.id}>
-          <WorkflowRunRow run={run} workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
-        </li>
-      ))}
-    </ul>
+    <Panel className="@container">
+      <ul className="divide-y divide-border-neutral-base">
+        {runs.map((run) => (
+          <li key={run.id}>
+            <WorkflowRunRow run={run} workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+          </li>
+        ))}
+      </ul>
+    </Panel>
   );
 }
 
@@ -125,7 +128,7 @@ export function WorkflowRunRow({
   // Rows run edge to edge inside the list's scroll container, which would clip the standard
   // outset focus ring, so this one is inset per the design system's focus-ring rule.
   const rowClassName =
-    'flex w-full min-w-0 items-center gap-inline px-row py-row text-left transition-colors hover:bg-background-neutral-hover focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] focus-visible:outline-none @min-[976px]:h-44 @min-[976px]:py-0';
+    'flex w-full min-w-0 items-center gap-inline px-row py-row text-left transition-colors hover:bg-background-neutral-hover focus-visible:shadow-focus-inset focus-visible:outline-none @min-[976px]:h-44 @min-[976px]:py-0';
 
   // Optimistic manual runs (temp-<uuid>) have no detail page until the canonical row
   // replaces them on the next poll, so they render non-interactively instead of as a link

package/src/components/workflow-run-summary/workflow-run-summary.stories.tsx

@@ -57,7 +57,7 @@ const RUN_ATTEMPTS_RESPONSE = runAttemptsResponseDto({
 
 const withFrame: Decorator = (Story) => (
   <div className="min-h-screen bg-background-subtle-base">
-    <div className="mx-auto flex min-h-screen w-full max-w-[1120px] flex-col overflow-hidden border-x border-border-neutral-base bg-background-subtle-base">
+    <div className="flex min-h-screen w-full flex-col px-frame py-frame">
       <Story />
       <div className="min-h-0 flex-1 bg-background-subtle-base p-16" />
     </div>

package/src/components/workflow-run-summary/workflow-run-summary.test.tsx

@@ -299,7 +299,15 @@ describe('WorkflowRunSummary', () => {
     const onCancel = vi.fn();
     renderSummary({}, {onCancel});
 
-    await user.click(await screen.findByRole('button', {name: 'Cancel workflow'}));
+    const button = await screen.findByRole('button', {name: 'Cancel workflow'});
+    expect(button).toHaveClass(
+      'bg-background-button-danger-default',
+      'text-foreground-neutral-on-color',
+      'shadow-button-danger',
+    );
+    expect(button).not.toHaveClass('bg-background-neutral-base');
+
+    await user.click(button);
 
     expect(onCancel).toHaveBeenCalledTimes(1);
   });

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

@@ -29,7 +29,7 @@ import {WorkflowRunAttemptSwitcher} from './workflow-run-attempt-switcher.js';
 const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
   ...WORKFLOW_RUN_STATUSES.map((status) => getWorkflowStatusVisual(status).label.length),
 );
-const RERUN_BUTTON_SURFACE_CLASS_NAME =
+const NEUTRAL_ACTION_SURFACE_CLASS_NAME =
   'bg-background-neutral-base hover:bg-background-neutral-hover active:bg-background-neutral-pressed';
 
 type WorkflowRunAction = 'cancel' | 'rerun-all' | 'rerun-menu' | 'none';
@@ -225,7 +225,7 @@ function WorkflowRunActionSlot({
         type="button"
         variant="secondary"
         size="xs"
-        className={RERUN_BUTTON_SURFACE_CLASS_NAME}
+        className={NEUTRAL_ACTION_SURFACE_CLASS_NAME}
         isLoading={rerunPending}
         disabled={rerunPending}
         onClick={() => onRerun('all')}
@@ -244,7 +244,7 @@ function WorkflowRunActionSlot({
           type="button"
           variant="secondary"
           size="xs"
-          className={RERUN_BUTTON_SURFACE_CLASS_NAME}
+          className={NEUTRAL_ACTION_SURFACE_CLASS_NAME}
           iconRight="arrowDownSLine"
           isLoading={rerunPending}
           disabled={rerunPending}

package/src/components/workflow-run-view/run-workspace-nav.test.tsx

@@ -13,6 +13,7 @@ const RUN_ID = '66666666-6666-4666-8666-666666666666';
 const CURRENT_JOB_ID = '88888888-8888-4888-8888-888888888888';
 const BUILD_LINK_PATTERN = /build/;
 const DEPLOY_LINK_PATTERN = /deploy/;
+const SETUP_LINK_PATTERN = /setup/;
 const NOW = Date.parse('2026-06-26T12:00:00.000Z');
 
 describe('RunWorkspaceNav', () => {
@@ -92,7 +93,8 @@ describe('RunWorkspaceNav', () => {
       />,
     );
 
-    expect(await screen.findByRole('link', {name: 'Summary'})).toBeInTheDocument();
+    const summary = await screen.findByRole('link', {name: 'Summary'});
+    expect(summary).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Annotations'})).toBeInTheDocument();
@@ -112,6 +114,13 @@ describe('RunWorkspaceNav', () => {
 
     const current = within(jobs).getByRole('link', {name: BUILD_LINK_PATTERN});
     expect(current).toHaveAttribute('aria-current', 'page');
+    expect(current.querySelector('[data-run-workspace-active-bar]')).not.toBeNull();
+    expect(
+      within(jobs)
+        .getByRole('link', {name: SETUP_LINK_PATTERN})
+        .querySelector('[data-run-workspace-active-bar]'),
+    ).toBeNull();
+    expect(jobs.querySelectorAll('[data-run-workspace-active-bar]')).toHaveLength(1);
     expect(current).toHaveAttribute(
       'href',
       expect.stringContaining(`/runs/${RUN_ID}/jobs/${CURRENT_JOB_ID}`),
@@ -137,7 +146,36 @@ describe('RunWorkspaceNav', () => {
 
     expect(await screen.findByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('link', {name: BUILD_LINK_PATTERN})).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
+    const summary = screen.getByRole('link', {name: 'Summary'});
+    expect(summary).toHaveAttribute('aria-current', 'page');
+    expect(summary.querySelector('[data-run-workspace-active-bar]')).not.toBeNull();
+  });
+
+  test('falls back to the first job when the current job id is stale', async () => {
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1}),
+        workflowJobDto({id: 'job-setup', name: 'setup', position: 0}),
+      ],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId="stale-job-id"
+      />,
+    );
+
+    const jobs = (await screen.findByRole('heading', {name: 'Jobs'})).closest('section');
+    if (!jobs) throw new Error('Missing jobs section');
+
+    const fallback = within(jobs).getByRole('link', {name: SETUP_LINK_PATTERN});
+    expect(fallback).toHaveAttribute('aria-current', 'page');
+    expect(jobs.querySelectorAll('[data-run-workspace-active-bar]')).toHaveLength(1);
   });
 
   test('scrolls the current job into view when the mobile rail opens', async () => {

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

@@ -23,6 +23,9 @@ import {JobExecutionTimeText} from '../job-detail/job-execution-time-text.js';
 
 type RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;
 
+const RUN_WORKSPACE_LINK_CLASS_NAME =
+  'relative flex min-h-32 items-center gap-inline rounded-4 px-tight outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44';
+
 export interface RunWorkspaceNavProps {
   workspaceSlug: string;
   projectSlug: string;
@@ -48,12 +51,14 @@ export function RunWorkspaceNav({
 }: RunWorkspaceNavProps) {
   const jobs = useMemo(() => [...run.jobs].sort(compareJobs), [run.jobs]);
   const [mobileOpen, setMobileOpen] = useState(false);
-  const currentJob = jobs.find((job) => job.id === currentJobId);
+  const currentJob =
+    jobs.find((job) => job.id === currentJobId) ?? (currentJobId ? jobs[0] : undefined);
+  const resolvedCurrentJobId = currentJob?.id;
   const currentLabel = currentJob?.displayName ?? sectionLabel(activeSection);
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <aside className="flex min-h-0 w-full shrink-0 flex-col border-b border-border-neutral-base min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r">
+      <aside className="flex min-h-0 w-full shrink-0 flex-col border-b border-border-neutral-base min-[768px]:w-240 min-[768px]:border-b-0">
         <Collapsible
           open={mobileOpen}
           onOpenChange={setMobileOpen}
@@ -96,7 +101,7 @@ export function RunWorkspaceNav({
               run={run}
               jobs={jobs}
               activeSection={activeSection}
-              currentJobId={currentJobId}
+              currentJobId={resolvedCurrentJobId}
               jobSearch={jobSearch}
               annotationSummary={annotationSummary}
               mobileOpen={mobileOpen}
@@ -140,8 +145,8 @@ function RunWorkspaceNavContent({
   }, [currentJobId, mobileOpen]);
 
   return (
-    <nav aria-label="Run workspace" className="flex min-h-0 min-w-0 flex-1 flex-col gap-group">
-      <ul>
+    <nav aria-label="Run workspace" className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <ul className="border-b border-border-neutral-base pb-row">
         <li>
           <RunSectionLink
             workspaceSlug={workspaceSlug}
@@ -157,7 +162,7 @@ function RunWorkspaceNavContent({
 
       <section
         aria-labelledby="run-workspace-jobs-heading"
-        className="flex min-h-0 min-w-0 flex-1 flex-col"
+        className="flex min-h-0 min-w-0 flex-1 flex-col border-b border-border-neutral-base py-row"
       >
         <div className="flex items-center justify-between gap-inline px-tight pb-[6px]">
           <Text
@@ -189,10 +194,12 @@ function RunWorkspaceNavContent({
                   onClick={onNavigate}
                   aria-current={current ? 'page' : undefined}
                   className={cn(
-                    'flex min-h-32 min-w-0 items-center gap-inline rounded-4 px-tight text-left outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+                    RUN_WORKSPACE_LINK_CLASS_NAME,
+                    'min-w-0 text-left',
                     current && 'bg-background-neutral-hover',
                   )}
                 >
+                  {current ? <RunWorkspaceActiveBar /> : null}
                   <WorkflowStatusIcon
                     status={deriveJobDisplayStatus(job)}
                     size={12}
@@ -211,7 +218,7 @@ function RunWorkspaceNavContent({
         </ol>
       </section>
 
-      <section aria-labelledby="run-workspace-details-heading">
+      <section aria-labelledby="run-workspace-details-heading" className="pt-row">
         <Text
           as="h2"
           id="run-workspace-details-heading"
@@ -292,10 +299,12 @@ function RunSectionLink({
           : undefined
       }
       className={cn(
-        'flex min-h-32 items-center gap-inline rounded-4 px-tight text-xs font-medium text-foreground-neutral-base outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+        RUN_WORKSPACE_LINK_CLASS_NAME,
+        'text-xs font-medium text-foreground-neutral-base',
         current && 'bg-background-neutral-hover',
       )}
     >
+      {current ? <RunWorkspaceActiveBar /> : null}
       {sectionLabel(section)}
       {count ? (
         <span
@@ -310,6 +319,16 @@ function RunSectionLink({
   );
 }
 
+function RunWorkspaceActiveBar() {
+  return (
+    <span
+      aria-hidden="true"
+      data-run-workspace-active-bar
+      className="absolute inset-y-0 left-0 w-2 rounded-l-4 bg-border-highlights-interactive"
+    />
+  );
+}
+
 function sectionLabel(section: RunWorkspaceSection): string {
   if (section === 'annotations') return 'Annotations';
   if (section === 'source') return 'Source';

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

@@ -133,7 +133,9 @@ function RunWorkspaceStoryProviders({children}: {children: ReactNode}) {
   return (
     <QueryClientProvider client={queryClient}>
       <div className="flex h-[720px] min-w-[1440px] w-[1440px] bg-background-subtle-base">
-        {children}
+        <div className="flex min-h-0 min-w-0 w-full flex-1 flex-col px-frame py-frame">
+          {children}
+        </div>
       </div>
     </QueryClientProvider>
   );

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

@@ -54,16 +54,18 @@ describe('WorkflowRunView', () => {
       .closest('[data-run-workspace-layout]');
     expect(workspaceLayout).toHaveClass('border-t', 'border-border-neutral-base');
     expect(workspaceLayout).not.toHaveClass('max-w-[1360px]');
-    expect(workspaceLayout?.querySelector('[data-run-workspace-frame]')).toHaveClass(
-      'mx-auto',
-      'w-full',
-      'max-w-[calc(240px_+_1120px)]',
-      'min-[768px]:flex-row',
-    );
+    const workspaceFrame = workspaceLayout?.querySelector('[data-run-workspace-frame]');
+    expect(workspaceFrame).toHaveClass('w-full', 'min-[768px]:flex-row');
+    expect(workspaceFrame).not.toHaveClass('mx-auto', 'max-w-[calc(240px_+_1120px)]');
     expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
-    expect(screen.getByRole('region', {name: 'All jobs summary'})).toBeInTheDocument();
+    const allJobsSummary = screen.getByRole('region', {name: 'All jobs summary'});
+    expect(allJobsSummary).toBeInTheDocument();
+    expect(allJobsSummary.querySelector('[data-slot="panel"]')).not.toBeNull();
+    expect(allJobsSummary.querySelector('[data-slot="panel-body"]')).toHaveClass(
+      'bg-background-components-base',
+    );
     expect(screen.getByRole('region', {name: 'Workflow jobs'})).toBeInTheDocument();
     expect(container.querySelector('[data-run-workspace-content]')).toHaveClass('flex-1');
     expect(container.querySelector('[data-run-workspace-content]')).not.toHaveClass(
@@ -82,7 +84,8 @@ describe('WorkflowRunView', () => {
     renderView({tab});
 
     const section = await screen.findByRole('region', {name: region});
-    expect(section.firstElementChild).not.toHaveClass('max-w-[1120px]');
+    expect(section.firstElementChild).not.toHaveClass('mx-auto', 'px-frame', 'max-w-[1120px]');
+    expect(section.querySelector('[data-slot="panel"]')).not.toBeNull();
   });
 
   test('keeps dedicated job content on the full-width data surface', async () => {