@shipfox/client-workflows 15.0.0 → 17.0.0

package/dist/components/workflow-run-view/run-workspace-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/workflow-run-view/run-workspace-nav.tsx"],"sourcesContent":["import {Collapsible, CollapsibleTrigger} from '@shipfox/react-ui/collapsible';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {cn} from '@shipfox/react-ui/utils';\nimport {Link} from '@tanstack/react-router';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';\nimport {\n  defaultJobExecution,\n  deriveJobDisplayStatus,\n  type Job,\n  type WorkflowRunDetail,\n} from '#core/workflow-run.js';\nimport type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';\nimport {\n  type WorkflowJobSearch,\n  type WorkflowRunTab,\n  workflowJobSearchParams,\n  workflowRunSearchParams,\n} from '#routes/inputs.js';\nimport {JobExecutionTimeText} from '../job-detail/job-execution-time-text.js';\n\ntype RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;\n\nexport interface RunWorkspaceNavProps {\n  workspaceSlug: string;\n  projectSlug: string;\n  run: WorkflowRunDetail;\n  activeSection: RunWorkspaceSection;\n  currentJobId?: string | undefined;\n  jobSearch?: WorkflowJobSearch | undefined;\n  annotationSummary?: RunAnnotationSummary | undefined;\n}\n\n/**\n * The stable navigation model shared by run-level and job-level routes. The graph explains\n * topology; this compact index makes moving between dedicated job pages predictable.\n */\nexport function RunWorkspaceNav({\n  workspaceSlug,\n  projectSlug,\n  run,\n  activeSection,\n  currentJobId,\n  jobSearch = {},\n  annotationSummary,\n}: RunWorkspaceNavProps) {\n  const jobs = useMemo(() => [...run.jobs].sort(compareJobs), [run.jobs]);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const currentJob = jobs.find((job) => job.id === currentJobId);\n  const currentLabel = currentJob?.displayName ?? sectionLabel(activeSection);\n\n  return (\n    <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>\n      <aside className=\"w-full shrink-0 border-b border-border-neutral-base bg-background-neutral-background min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r\">\n        <Collapsible open={mobileOpen} onOpenChange={setMobileOpen}>\n          <CollapsibleTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex min-h-44 w-full items-center justify-between gap-12 px-16 text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden\"\n              aria-label=\"Toggle run navigation\"\n            >\n              <span className=\"min-w-0\">\n                <Text as=\"span\" size=\"xs\" className=\"block text-foreground-neutral-muted\">\n                  Run navigation\n                </Text>\n                <span className=\"block truncate font-code text-xs leading-20 text-foreground-neutral-base\">\n                  {currentLabel}\n                </span>\n              </span>\n              <Icon\n                name=\"chevronDown\"\n                size={14}\n                aria-hidden=\"true\"\n                className={cn(\n                  'shrink-0 text-foreground-neutral-muted transition-transform',\n                  mobileOpen && 'rotate-180',\n                )}\n              />\n            </button>\n          </CollapsibleTrigger>\n          <div\n            className={cn(\n              'max-h-[50vh] overflow-y-auto p-8 min-[768px]:block min-[768px]:max-h-none min-[768px]:p-12',\n              !mobileOpen && 'hidden',\n            )}\n          >\n            <RunWorkspaceNavContent\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              run={run}\n              jobs={jobs}\n              activeSection={activeSection}\n              currentJobId={currentJobId}\n              jobSearch={jobSearch}\n              annotationSummary={annotationSummary}\n              mobileOpen={mobileOpen}\n              onNavigate={() => setMobileOpen(false)}\n            />\n          </div>\n        </Collapsible>\n      </aside>\n    </TimeTickerProvider>\n  );\n}\n\nfunction RunWorkspaceNavContent({\n  workspaceSlug,\n  projectSlug,\n  run,\n  jobs,\n  activeSection,\n  currentJobId,\n  jobSearch,\n  annotationSummary,\n  mobileOpen,\n  onNavigate,\n}: RunWorkspaceNavProps & {\n  jobs: Job[];\n  jobSearch: WorkflowJobSearch;\n  mobileOpen: boolean;\n  onNavigate: () => void;\n}) {\n  const currentRowRef = useRef<HTMLAnchorElement>(null);\n  const runAttempt = jobSearch.runAttempt ?? run.runAttempt.attempt;\n\n  useEffect(() => {\n    if (!currentJobId || mobileOpen) return;\n    currentRowRef.current?.scrollIntoView({block: 'nearest'});\n  }, [currentJobId, mobileOpen]);\n\n  useEffect(() => {\n    if (!currentJobId || !mobileOpen) return;\n    currentRowRef.current?.scrollIntoView({block: 'nearest'});\n  }, [currentJobId, mobileOpen]);\n\n  return (\n    <nav aria-label=\"Run workspace\" className=\"flex min-w-0 flex-col gap-16\">\n      <ul>\n        <li>\n          <RunSectionLink\n            workspaceSlug={workspaceSlug}\n            projectSlug={projectSlug}\n            runId={run.id}\n            runAttempt={runAttempt}\n            section=\"summary\"\n            current={!currentJobId && activeSection === 'summary'}\n            onNavigate={onNavigate}\n          />\n        </li>\n      </ul>\n\n      <section aria-labelledby=\"run-workspace-jobs-heading\" className=\"min-w-0\">\n        <div className=\"flex items-center justify-between gap-8 px-8 pb-6\">\n          <Text\n            as=\"h2\"\n            id=\"run-workspace-jobs-heading\"\n            size=\"xs\"\n            bold\n            className=\"text-foreground-neutral-muted\"\n          >\n            Jobs\n          </Text>\n          <Text as=\"span\" size=\"xs\" className=\"font-code text-foreground-neutral-subtle\">\n            {jobs.length}\n          </Text>\n        </div>\n        <ol className=\"max-h-[320px] overflow-y-auto\">\n          {jobs.map((job) => {\n            const current = job.id === currentJobId;\n            const execution = defaultJobExecution(job);\n            const duration = execution?.displayDuration ?? job.displayDuration;\n\n            return (\n              <li key={job.id}>\n                <Link\n                  ref={current ? currentRowRef : undefined}\n                  to=\"/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId\"\n                  params={{workspaceSlug, projectSlug, workflowRunId: run.id, jobId: job.id}}\n                  search={workflowJobSearchParams({runAttempt}) as never}\n                  onClick={onNavigate}\n                  aria-current={current ? 'page' : undefined}\n                  className={cn(\n                    'flex min-h-32 min-w-0 items-center gap-8 rounded-4 px-8 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',\n                    current && 'bg-background-neutral-hover',\n                  )}\n                >\n                  <WorkflowStatusIcon\n                    status={deriveJobDisplayStatus(job)}\n                    size={12}\n                    tooltip={false}\n                  />\n                  <span className=\"min-w-0 truncate font-code text-xs leading-20 text-foreground-neutral-base\">\n                    {job.displayName}\n                  </span>\n                  <span className=\"ml-auto shrink-0 font-code text-xs leading-20 text-foreground-neutral-muted tabular-nums\">\n                    {duration ? <JobExecutionTimeText time={duration} /> : '—'}\n                  </span>\n                </Link>\n              </li>\n            );\n          })}\n        </ol>\n      </section>\n\n      <section aria-labelledby=\"run-workspace-details-heading\">\n        <Text\n          as=\"h2\"\n          id=\"run-workspace-details-heading\"\n          size=\"xs\"\n          bold\n          className=\"px-8 pb-6 text-foreground-neutral-muted\"\n        >\n          Run details\n        </Text>\n        <ul>\n          <li>\n            <RunSectionLink\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              runId={run.id}\n              runAttempt={runAttempt}\n              section=\"annotations\"\n              current={!currentJobId && activeSection === 'annotations'}\n              count={annotationSummary?.total}\n              onNavigate={onNavigate}\n            />\n          </li>\n          <li>\n            <RunSectionLink\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              runId={run.id}\n              runAttempt={runAttempt}\n              section=\"source\"\n              current={!currentJobId && activeSection === 'source'}\n              onNavigate={onNavigate}\n            />\n          </li>\n        </ul>\n      </section>\n    </nav>\n  );\n}\n\nfunction RunSectionLink({\n  workspaceSlug,\n  projectSlug,\n  runId,\n  runAttempt,\n  section,\n  current,\n  count,\n  onNavigate,\n}: {\n  workspaceSlug: string;\n  projectSlug: string;\n  runId: string;\n  runAttempt: number;\n  section: RunWorkspaceSection;\n  current: boolean;\n  count?: number | undefined;\n  onNavigate?: (() => void) | undefined;\n}) {\n  return (\n    <Link\n      to=\"/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId\"\n      params={{workspaceSlug, projectSlug, workflowRunId: runId}}\n      search={\n        workflowRunSearchParams(\n          {runAttempt, ...(section === 'summary' ? {} : {tab: section})},\n          {runAttempt},\n        ) as never\n      }\n      onClick={onNavigate}\n      aria-current={current ? 'page' : undefined}\n      className={cn(\n        'flex min-h-32 items-center gap-8 rounded-4 px-8 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',\n        current && 'bg-background-neutral-hover',\n      )}\n    >\n      {sectionLabel(section)}\n      {count ? (\n        <span className=\"ml-auto font-code text-xs text-foreground-neutral-muted tabular-nums\">\n          {count}\n        </span>\n      ) : null}\n    </Link>\n  );\n}\n\nfunction sectionLabel(section: RunWorkspaceSection): string {\n  if (section === 'annotations') return 'Annotations';\n  if (section === 'source') return 'Source';\n  return 'Summary';\n}\n\nfunction compareJobs(left: Job, right: Job): number {\n  return left.position - right.position || left.id.localeCompare(right.id);\n}\n"],"names":["Collapsible","CollapsibleTrigger","Icon","TimeTickerProvider","Text","cn","Link","useEffect","useMemo","useRef","useState","WorkflowStatusIcon","defaultJobExecution","deriveJobDisplayStatus","workflowJobSearchParams","workflowRunSearchParams","JobExecutionTimeText","RunWorkspaceNav","workspaceSlug","projectSlug","run","activeSection","currentJobId","jobSearch","annotationSummary","jobs","sort","compareJobs","mobileOpen","setMobileOpen","currentJob","find","job","id","currentLabel","displayName","sectionLabel","intervalMs","reducedMotionIntervalMs","aside","className","open","onOpenChange","asChild","button","type","aria-label","span","as","size","name","aria-hidden","div","RunWorkspaceNavContent","onNavigate","currentRowRef","runAttempt","attempt","current","scrollIntoView","block","nav","ul","li","RunSectionLink","runId","section","aria-labelledby","bold","length","ol","map","execution","duration","displayDuration","ref","undefined","to","params","workflowRunId","jobId","search","onClick","aria-current","status","tooltip","time","count","total","tab","left","right","position","localeCompare"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/workflow-run-view/run-workspace-nav.tsx"],"sourcesContent":["import {Collapsible, CollapsibleTrigger} from '@shipfox/react-ui/collapsible';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {cn} from '@shipfox/react-ui/utils';\nimport {Link} from '@tanstack/react-router';\nimport {useEffect, useMemo, useRef, useState} from 'react';\nimport {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';\nimport type {RunAnnotationSummary} from '#core/run-annotation.js';\nimport {\n  defaultJobExecution,\n  deriveJobDisplayStatus,\n  type Job,\n  type WorkflowRunDetail,\n} from '#core/workflow-run.js';\nimport {\n  type WorkflowJobSearch,\n  type WorkflowRunTab,\n  workflowJobSearchParams,\n  workflowRunSearchParams,\n} from '#routes/inputs.js';\nimport {JobExecutionTimeText} from '../job-detail/job-execution-time-text.js';\n\ntype RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;\n\nexport interface RunWorkspaceNavProps {\n  workspaceSlug: string;\n  projectSlug: string;\n  run: WorkflowRunDetail;\n  activeSection: RunWorkspaceSection;\n  currentJobId?: string | undefined;\n  jobSearch?: WorkflowJobSearch | undefined;\n  annotationSummary?: RunAnnotationSummary | undefined;\n}\n\n/**\n * The stable navigation model shared by run-level and job-level routes. The graph explains\n * topology; this compact index makes moving between dedicated job pages predictable.\n */\nexport function RunWorkspaceNav({\n  workspaceSlug,\n  projectSlug,\n  run,\n  activeSection,\n  currentJobId,\n  jobSearch = {},\n  annotationSummary,\n}: RunWorkspaceNavProps) {\n  const jobs = useMemo(() => [...run.jobs].sort(compareJobs), [run.jobs]);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const currentJob = jobs.find((job) => job.id === currentJobId);\n  const currentLabel = currentJob?.displayName ?? sectionLabel(activeSection);\n\n  return (\n    <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>\n      <aside className=\"w-full shrink-0 border-b border-border-neutral-base bg-background-neutral-background min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r\">\n        <Collapsible open={mobileOpen} onOpenChange={setMobileOpen}>\n          <CollapsibleTrigger asChild>\n            <button\n              type=\"button\"\n              className=\"flex min-h-44 w-full items-center justify-between gap-cluster px-row text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden\"\n              aria-label=\"Toggle run navigation\"\n            >\n              <span className=\"min-w-0\">\n                <Text as=\"span\" size=\"xs\" className=\"block text-foreground-neutral-muted\">\n                  Run navigation\n                </Text>\n                <span className=\"block truncate font-code text-xs leading-20 text-foreground-neutral-base\">\n                  {currentLabel}\n                </span>\n              </span>\n              <Icon\n                name=\"chevronDown\"\n                size={14}\n                aria-hidden=\"true\"\n                className={cn(\n                  'shrink-0 text-foreground-neutral-muted transition-transform',\n                  mobileOpen && 'rotate-180',\n                )}\n              />\n            </button>\n          </CollapsibleTrigger>\n          <div\n            className={cn(\n              'max-h-[50vh] overflow-y-auto p-tight min-[768px]:block min-[768px]:max-h-none min-[768px]:p-[12px]',\n              !mobileOpen && 'hidden',\n            )}\n          >\n            <RunWorkspaceNavContent\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              run={run}\n              jobs={jobs}\n              activeSection={activeSection}\n              currentJobId={currentJobId}\n              jobSearch={jobSearch}\n              annotationSummary={annotationSummary}\n              mobileOpen={mobileOpen}\n              onNavigate={() => setMobileOpen(false)}\n            />\n          </div>\n        </Collapsible>\n      </aside>\n    </TimeTickerProvider>\n  );\n}\n\nfunction RunWorkspaceNavContent({\n  workspaceSlug,\n  projectSlug,\n  run,\n  jobs,\n  activeSection,\n  currentJobId,\n  jobSearch,\n  annotationSummary,\n  mobileOpen,\n  onNavigate,\n}: RunWorkspaceNavProps & {\n  jobs: Job[];\n  jobSearch: WorkflowJobSearch;\n  mobileOpen: boolean;\n  onNavigate: () => void;\n}) {\n  const currentRowRef = useRef<HTMLAnchorElement>(null);\n  const runAttempt = jobSearch.runAttempt ?? run.runAttempt.attempt;\n\n  useEffect(() => {\n    if (!currentJobId || mobileOpen) return;\n    currentRowRef.current?.scrollIntoView({block: 'nearest'});\n  }, [currentJobId, mobileOpen]);\n\n  useEffect(() => {\n    if (!currentJobId || !mobileOpen) return;\n    currentRowRef.current?.scrollIntoView({block: 'nearest'});\n  }, [currentJobId, mobileOpen]);\n\n  return (\n    <nav aria-label=\"Run workspace\" className=\"flex min-w-0 flex-col gap-group\">\n      <ul>\n        <li>\n          <RunSectionLink\n            workspaceSlug={workspaceSlug}\n            projectSlug={projectSlug}\n            runId={run.id}\n            runAttempt={runAttempt}\n            section=\"summary\"\n            current={!currentJobId && activeSection === 'summary'}\n            onNavigate={onNavigate}\n          />\n        </li>\n      </ul>\n\n      <section aria-labelledby=\"run-workspace-jobs-heading\" className=\"min-w-0\">\n        <div className=\"flex items-center justify-between gap-inline px-tight pb-[6px]\">\n          <Text\n            as=\"h2\"\n            id=\"run-workspace-jobs-heading\"\n            size=\"xs\"\n            bold\n            className=\"text-foreground-neutral-muted\"\n          >\n            Jobs\n          </Text>\n          <Text as=\"span\" size=\"xs\" className=\"font-code text-foreground-neutral-subtle\">\n            {jobs.length}\n          </Text>\n        </div>\n        <ol className=\"max-h-[320px] overflow-y-auto\">\n          {jobs.map((job) => {\n            const current = job.id === currentJobId;\n            const execution = defaultJobExecution(job);\n            const duration = execution?.displayDuration ?? job.displayDuration;\n\n            return (\n              <li key={job.id}>\n                <Link\n                  ref={current ? currentRowRef : undefined}\n                  to=\"/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId\"\n                  params={{workspaceSlug, projectSlug, workflowRunId: run.id, jobId: job.id}}\n                  search={workflowJobSearchParams({runAttempt}) as never}\n                  onClick={onNavigate}\n                  aria-current={current ? 'page' : undefined}\n                  className={cn(\n                    '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',\n                    current && 'bg-background-neutral-hover',\n                  )}\n                >\n                  <WorkflowStatusIcon\n                    status={deriveJobDisplayStatus(job)}\n                    size={12}\n                    tooltip={false}\n                  />\n                  <span className=\"min-w-0 truncate font-code text-xs leading-20 text-foreground-neutral-base\">\n                    {job.displayName}\n                  </span>\n                  <span className=\"ml-auto shrink-0 font-code text-xs leading-20 text-foreground-neutral-muted tabular-nums\">\n                    {duration ? <JobExecutionTimeText time={duration} /> : '—'}\n                  </span>\n                </Link>\n              </li>\n            );\n          })}\n        </ol>\n      </section>\n\n      <section aria-labelledby=\"run-workspace-details-heading\">\n        <Text\n          as=\"h2\"\n          id=\"run-workspace-details-heading\"\n          size=\"xs\"\n          bold\n          className=\"px-tight pb-[6px] text-foreground-neutral-muted\"\n        >\n          Run details\n        </Text>\n        <ul>\n          <li>\n            <RunSectionLink\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              runId={run.id}\n              runAttempt={runAttempt}\n              section=\"annotations\"\n              current={!currentJobId && activeSection === 'annotations'}\n              count={annotationSummary?.total}\n              countTruncated={annotationSummary?.truncated}\n              onNavigate={onNavigate}\n            />\n          </li>\n          <li>\n            <RunSectionLink\n              workspaceSlug={workspaceSlug}\n              projectSlug={projectSlug}\n              runId={run.id}\n              runAttempt={runAttempt}\n              section=\"source\"\n              current={!currentJobId && activeSection === 'source'}\n              onNavigate={onNavigate}\n            />\n          </li>\n        </ul>\n      </section>\n    </nav>\n  );\n}\n\nfunction RunSectionLink({\n  workspaceSlug,\n  projectSlug,\n  runId,\n  runAttempt,\n  section,\n  current,\n  count,\n  countTruncated = false,\n  onNavigate,\n}: {\n  workspaceSlug: string;\n  projectSlug: string;\n  runId: string;\n  runAttempt: number;\n  section: RunWorkspaceSection;\n  current: boolean;\n  count?: number | undefined;\n  /** The read hit its page budget, so the count is a lower bound and renders as `N+`. */\n  countTruncated?: boolean | undefined;\n  onNavigate?: (() => void) | undefined;\n}) {\n  return (\n    <Link\n      to=\"/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId\"\n      params={{workspaceSlug, projectSlug, workflowRunId: runId}}\n      search={\n        workflowRunSearchParams(\n          {runAttempt, ...(section === 'summary' ? {} : {tab: section})},\n          {runAttempt},\n        ) as never\n      }\n      onClick={onNavigate}\n      aria-current={current ? 'page' : undefined}\n      aria-label={\n        count\n          ? `${sectionLabel(section)}, ${countTruncated ? `${count} or more` : count}`\n          : undefined\n      }\n      className={cn(\n        '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',\n        current && 'bg-background-neutral-hover',\n      )}\n    >\n      {sectionLabel(section)}\n      {count ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"ml-auto font-code text-xs text-foreground-neutral-muted tabular-nums\"\n        >\n          {count}\n          {countTruncated ? '+' : ''}\n        </span>\n      ) : null}\n    </Link>\n  );\n}\n\nfunction sectionLabel(section: RunWorkspaceSection): string {\n  if (section === 'annotations') return 'Annotations';\n  if (section === 'source') return 'Source';\n  return 'Summary';\n}\n\nfunction compareJobs(left: Job, right: Job): number {\n  return left.position - right.position || left.id.localeCompare(right.id);\n}\n"],"names":["Collapsible","CollapsibleTrigger","Icon","TimeTickerProvider","Text","cn","Link","useEffect","useMemo","useRef","useState","WorkflowStatusIcon","defaultJobExecution","deriveJobDisplayStatus","workflowJobSearchParams","workflowRunSearchParams","JobExecutionTimeText","RunWorkspaceNav","workspaceSlug","projectSlug","run","activeSection","currentJobId","jobSearch","annotationSummary","jobs","sort","compareJobs","mobileOpen","setMobileOpen","currentJob","find","job","id","currentLabel","displayName","sectionLabel","intervalMs","reducedMotionIntervalMs","aside","className","open","onOpenChange","asChild","button","type","aria-label","span","as","size","name","aria-hidden","div","RunWorkspaceNavContent","onNavigate","currentRowRef","runAttempt","attempt","current","scrollIntoView","block","nav","ul","li","RunSectionLink","runId","section","aria-labelledby","bold","length","ol","map","execution","duration","displayDuration","ref","undefined","to","params","workflowRunId","jobId","search","onClick","aria-current","status","tooltip","time","count","total","countTruncated","truncated","tab","left","right","position","localeCompare"],"mappings":";AAAA,SAAQA,WAAW,EAAEC,kBAAkB,QAAO,gCAAgC;AAC9E,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,IAAI,QAAO,+BAA+B;AAClD,SAAQC,EAAE,QAAO,0BAA0B;AAC3C,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAC3D,SAAQC,kBAAkB,QAAO,sDAAsD;AAEvF,SACEC,mBAAmB,EACnBC,sBAAsB,QAGjB,wBAAwB;AAC/B,SAGEC,uBAAuB,EACvBC,uBAAuB,QAClB,oBAAoB;AAC3B,SAAQC,oBAAoB,QAAO,2CAA2C;AAc9E;;;CAGC,GACD,OAAO,SAASC,gBAAgB,EAC9BC,aAAa,EACbC,WAAW,EACXC,GAAG,EACHC,aAAa,EACbC,YAAY,EACZC,YAAY,CAAC,CAAC,EACdC,iBAAiB,EACI;IACrB,MAAMC,OAAOjB,QAAQ,IAAM;eAAIY,IAAIK,IAAI;SAAC,CAACC,IAAI,CAACC,cAAc;QAACP,IAAIK,IAAI;KAAC;IACtE,MAAM,CAACG,YAAYC,cAAc,GAAGnB,SAAS;IAC7C,MAAMoB,aAAaL,KAAKM,IAAI,CAAC,CAACC,MAAQA,IAAIC,EAAE,KAAKX;IACjD,MAAMY,eAAeJ,YAAYK,eAAeC,aAAaf;IAE7D,qBACE,KAAClB;QAAmBkC,YAAY;QAAMC,yBAAyB;kBAC7D,cAAA,KAACC;YAAMC,WAAU;sBACf,cAAA,MAACxC;gBAAYyC,MAAMb;gBAAYc,cAAcb;;kCAC3C,KAAC5B;wBAAmB0C,OAAO;kCACzB,cAAA,MAACC;4BACCC,MAAK;4BACLL,WAAU;4BACVM,cAAW;;8CAEX,MAACC;oCAAKP,WAAU;;sDACd,KAACpC;4CAAK4C,IAAG;4CAAOC,MAAK;4CAAKT,WAAU;sDAAsC;;sDAG1E,KAACO;4CAAKP,WAAU;sDACbN;;;;8CAGL,KAAChC;oCACCgD,MAAK;oCACLD,MAAM;oCACNE,eAAY;oCACZX,WAAWnC,GACT,+DACAuB,cAAc;;;;;kCAKtB,KAACwB;wBACCZ,WAAWnC,GACT,sGACA,CAACuB,cAAc;kCAGjB,cAAA,KAACyB;4BACCnC,eAAeA;4BACfC,aAAaA;4BACbC,KAAKA;4BACLK,MAAMA;4BACNJ,eAAeA;4BACfC,cAAcA;4BACdC,WAAWA;4BACXC,mBAAmBA;4BACnBI,YAAYA;4BACZ0B,YAAY,IAAMzB,cAAc;;;;;;;AAO9C;AAEA,SAASwB,uBAAuB,EAC9BnC,aAAa,EACbC,WAAW,EACXC,GAAG,EACHK,IAAI,EACJJ,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,iBAAiB,EACjBI,UAAU,EACV0B,UAAU,EAMX;IACC,MAAMC,gBAAgB9C,OAA0B;IAChD,MAAM+C,aAAajC,UAAUiC,UAAU,IAAIpC,IAAIoC,UAAU,CAACC,OAAO;IAEjElD,UAAU;QACR,IAAI,CAACe,gBAAgBM,YAAY;QACjC2B,cAAcG,OAAO,EAAEC,eAAe;YAACC,OAAO;QAAS;IACzD,GAAG;QAACtC;QAAcM;KAAW;IAE7BrB,UAAU;QACR,IAAI,CAACe,gBAAgB,CAACM,YAAY;QAClC2B,cAAcG,OAAO,EAAEC,eAAe;YAACC,OAAO;QAAS;IACzD,GAAG;QAACtC;QAAcM;KAAW;IAE7B,qBACE,MAACiC;QAAIf,cAAW;QAAgBN,WAAU;;0BACxC,KAACsB;0BACC,cAAA,KAACC;8BACC,cAAA,KAACC;wBACC9C,eAAeA;wBACfC,aAAaA;wBACb8C,OAAO7C,IAAIa,EAAE;wBACbuB,YAAYA;wBACZU,SAAQ;wBACRR,SAAS,CAACpC,gBAAgBD,kBAAkB;wBAC5CiC,YAAYA;;;;0BAKlB,MAACY;gBAAQC,mBAAgB;gBAA6B3B,WAAU;;kCAC9D,MAACY;wBAAIZ,WAAU;;0CACb,KAACpC;gCACC4C,IAAG;gCACHf,IAAG;gCACHgB,MAAK;gCACLmB,IAAI;gCACJ5B,WAAU;0CACX;;0CAGD,KAACpC;gCAAK4C,IAAG;gCAAOC,MAAK;gCAAKT,WAAU;0CACjCf,KAAK4C,MAAM;;;;kCAGhB,KAACC;wBAAG9B,WAAU;kCACXf,KAAK8C,GAAG,CAAC,CAACvC;4BACT,MAAM0B,UAAU1B,IAAIC,EAAE,KAAKX;4BAC3B,MAAMkD,YAAY5D,oBAAoBoB;4BACtC,MAAMyC,WAAWD,WAAWE,mBAAmB1C,IAAI0C,eAAe;4BAElE,qBACE,KAACX;0CACC,cAAA,MAACzD;oCACCqE,KAAKjB,UAAUH,gBAAgBqB;oCAC/BC,IAAG;oCACHC,QAAQ;wCAAC5D;wCAAeC;wCAAa4D,eAAe3D,IAAIa,EAAE;wCAAE+C,OAAOhD,IAAIC,EAAE;oCAAA;oCACzEgD,QAAQnE,wBAAwB;wCAAC0C;oCAAU;oCAC3C0B,SAAS5B;oCACT6B,gBAAczB,UAAU,SAASkB;oCACjCpC,WAAWnC,GACT,2PACAqD,WAAW;;sDAGb,KAAC/C;4CACCyE,QAAQvE,uBAAuBmB;4CAC/BiB,MAAM;4CACNoC,SAAS;;sDAEX,KAACtC;4CAAKP,WAAU;sDACbR,IAAIG,WAAW;;sDAElB,KAACY;4CAAKP,WAAU;sDACbiC,yBAAW,KAACzD;gDAAqBsE,MAAMb;iDAAe;;;;+BAtBpDzC,IAAIC,EAAE;wBA2BnB;;;;0BAIJ,MAACiC;gBAAQC,mBAAgB;;kCACvB,KAAC/D;wBACC4C,IAAG;wBACHf,IAAG;wBACHgB,MAAK;wBACLmB,IAAI;wBACJ5B,WAAU;kCACX;;kCAGD,MAACsB;;0CACC,KAACC;0CACC,cAAA,KAACC;oCACC9C,eAAeA;oCACfC,aAAaA;oCACb8C,OAAO7C,IAAIa,EAAE;oCACbuB,YAAYA;oCACZU,SAAQ;oCACRR,SAAS,CAACpC,gBAAgBD,kBAAkB;oCAC5CkE,OAAO/D,mBAAmBgE;oCAC1BC,gBAAgBjE,mBAAmBkE;oCACnCpC,YAAYA;;;0CAGhB,KAACS;0CACC,cAAA,KAACC;oCACC9C,eAAeA;oCACfC,aAAaA;oCACb8C,OAAO7C,IAAIa,EAAE;oCACbuB,YAAYA;oCACZU,SAAQ;oCACRR,SAAS,CAACpC,gBAAgBD,kBAAkB;oCAC5CiC,YAAYA;;;;;;;;;AAO1B;AAEA,SAASU,eAAe,EACtB9C,aAAa,EACbC,WAAW,EACX8C,KAAK,EACLT,UAAU,EACVU,OAAO,EACPR,OAAO,EACP6B,KAAK,EACLE,iBAAiB,KAAK,EACtBnC,UAAU,EAYX;IACC,qBACE,MAAChD;QACCuE,IAAG;QACHC,QAAQ;YAAC5D;YAAeC;YAAa4D,eAAed;QAAK;QACzDgB,QACElE,wBACE;YAACyC;YAAY,GAAIU,YAAY,YAAY,CAAC,IAAI;gBAACyB,KAAKzB;YAAO,CAAC;QAAC,GAC7D;YAACV;QAAU;QAGf0B,SAAS5B;QACT6B,gBAAczB,UAAU,SAASkB;QACjC9B,cACEyC,QACI,GAAGnD,aAAa8B,SAAS,EAAE,EAAEuB,iBAAiB,GAAGF,MAAM,QAAQ,CAAC,GAAGA,OAAO,GAC1EX;QAENpC,WAAWnC,GACT,0RACAqD,WAAW;;YAGZtB,aAAa8B;YACbqB,sBACC,MAACxC;gBACCI,eAAY;gBACZX,WAAU;;oBAET+C;oBACAE,iBAAiB,MAAM;;iBAExB;;;AAGV;AAEA,SAASrD,aAAa8B,OAA4B;IAChD,IAAIA,YAAY,eAAe,OAAO;IACtC,IAAIA,YAAY,UAAU,OAAO;IACjC,OAAO;AACT;AAEA,SAASvC,YAAYiE,IAAS,EAAEC,KAAU;IACxC,OAAOD,KAAKE,QAAQ,GAAGD,MAAMC,QAAQ,IAAIF,KAAK3D,EAAE,CAAC8D,aAAa,CAACF,MAAM5D,EAAE;AACzE"}

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

@@ -7,12 +7,12 @@ import { Text } from '@shipfox/react-ui/typography';
 export function WorkflowRunSkeleton() {
     return /*#__PURE__*/ _jsx("section", {
         "aria-label": "Loading workflow run",
-        className: "bg-background-neutral-background px-16 py-12",
+        className: "bg-background-neutral-background px-row py-row",
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex min-w-0 flex-wrap items-center gap-x-12 gap-y-8",
+            className: "flex min-w-0 flex-wrap items-center gap-x-cluster gap-y-inline",
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex min-w-0 items-center gap-8",
+                    className: "flex min-w-0 items-center gap-inline",
                     children: [
                         /*#__PURE__*/ _jsx(Skeleton, {
                             className: "size-8 rounded-full"
@@ -51,7 +51,7 @@ export function WorkflowRunSkeleton() {
 export function WorkflowRunContentSkeleton() {
     return /*#__PURE__*/ _jsx("section", {
         "aria-label": "Loading workflow run content",
-        className: "min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-16",
+        className: "min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-panel-compact",
         children: /*#__PURE__*/ _jsx(Skeleton, {
             className: "h-160 w-full rounded-6"
         })
@@ -70,12 +70,12 @@ export function WorkflowRunNotFound() {
  * screen with an inline retry instead of being wiped by a full error placeholder.
  */ export function WorkflowRunStaleError({ query }) {
     return /*#__PURE__*/ _jsx("div", {
-        className: "border-b border-border-neutral-base p-8",
+        className: "border-b border-border-neutral-base p-tight",
         children: /*#__PURE__*/ _jsx(Callout, {
             role: "alert",
             type: "error",
             children: /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center justify-between gap-8",
+                className: "flex items-center justify-between gap-inline",
                 children: [
                     /*#__PURE__*/ _jsx(Text, {
                         size: "xs",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/workflow-run-view/workflow-run-states.tsx"],"sourcesContent":["import type {QueryLoadErrorQuery} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Text} from '@shipfox/react-ui/typography';\n\nexport function WorkflowRunSkeleton() {\n  return (\n    <section\n      aria-label=\"Loading workflow run\"\n      className=\"bg-background-neutral-background px-16 py-12\"\n    >\n      <div className=\"flex min-w-0 flex-wrap items-center gap-x-12 gap-y-8\">\n        <div className=\"flex min-w-0 items-center gap-8\">\n          <Skeleton className=\"size-8 rounded-full\" />\n          <Skeleton className=\"h-24 w-180 rounded-6\" />\n        </div>\n        <Skeleton className=\"h-24 w-88 rounded-6\" />\n        <span\n          aria-hidden=\"true\"\n          className=\"hidden h-20 w-px shrink-0 bg-border-neutral-base sm:block\"\n        />\n        <Skeleton className=\"h-20 w-64 rounded-4\" />\n        <Skeleton className=\"h-20 w-112 rounded-4\" />\n        <span className=\"min-w-0 flex-1\" />\n        <Skeleton className=\"h-20 w-88 rounded-4\" />\n        <Skeleton className=\"h-20 w-88 rounded-4\" />\n      </div>\n    </section>\n  );\n}\n\nexport function WorkflowRunContentSkeleton() {\n  return (\n    <section\n      aria-label=\"Loading workflow run content\"\n      className=\"min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-16\"\n    >\n      <Skeleton className=\"h-160 w-full rounded-6\" />\n    </section>\n  );\n}\n\nexport function WorkflowRunNotFound() {\n  return (\n    <EmptyState\n      icon=\"pulseLine\"\n      title=\"Run not found\"\n      description=\"This run does not exist or is no longer available.\"\n    />\n  );\n}\n\n/**\n * Slim non-blocking banner shown when a background refetch fails after the run already\n * loaded (active-run polling can hit a transient API error), so the loaded run stays on\n * screen with an inline retry instead of being wiped by a full error placeholder.\n */\nexport function WorkflowRunStaleError({query}: {query: QueryLoadErrorQuery}) {\n  return (\n    <div className=\"border-b border-border-neutral-base p-8\">\n      <Callout role=\"alert\" type=\"error\">\n        <div className=\"flex items-center justify-between gap-8\">\n          <Text size=\"xs\">Could not refresh this run.</Text>\n          <Button\n            type=\"button\"\n            size=\"2xs\"\n            variant=\"secondary\"\n            isLoading={query.isFetching}\n            onClick={() => {\n              void query.refetch();\n            }}\n          >\n            Retry\n          </Button>\n        </div>\n      </Callout>\n    </div>\n  );\n}\n"],"names":["Button","Callout","EmptyState","Skeleton","Text","WorkflowRunSkeleton","section","aria-label","className","div","span","aria-hidden","WorkflowRunContentSkeleton","WorkflowRunNotFound","icon","title","description","WorkflowRunStaleError","query","role","type","size","variant","isLoading","isFetching","onClick","refetch"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,OAAO,QAAO,4BAA4B;AAClD,SAAQC,UAAU,QAAO,gCAAgC;AACzD,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,IAAI,QAAO,+BAA+B;AAElD,OAAO,SAASC;IACd,qBACE,KAACC;QACCC,cAAW;QACXC,WAAU;kBAEV,cAAA,MAACC;YAAID,WAAU;;8BACb,MAACC;oBAAID,WAAU;;sCACb,KAACL;4BAASK,WAAU;;sCACpB,KAACL;4BAASK,WAAU;;;;8BAEtB,KAACL;oBAASK,WAAU;;8BACpB,KAACE;oBACCC,eAAY;oBACZH,WAAU;;8BAEZ,KAACL;oBAASK,WAAU;;8BACpB,KAACL;oBAASK,WAAU;;8BACpB,KAACE;oBAAKF,WAAU;;8BAChB,KAACL;oBAASK,WAAU;;8BACpB,KAACL;oBAASK,WAAU;;;;;AAI5B;AAEA,OAAO,SAASI;IACd,qBACE,KAACN;QACCC,cAAW;QACXC,WAAU;kBAEV,cAAA,KAACL;YAASK,WAAU;;;AAG1B;AAEA,OAAO,SAASK;IACd,qBACE,KAACX;QACCY,MAAK;QACLC,OAAM;QACNC,aAAY;;AAGlB;AAEA;;;;CAIC,GACD,OAAO,SAASC,sBAAsB,EAACC,KAAK,EAA+B;IACzE,qBACE,KAACT;QAAID,WAAU;kBACb,cAAA,KAACP;YAAQkB,MAAK;YAAQC,MAAK;sBACzB,cAAA,MAACX;gBAAID,WAAU;;kCACb,KAACJ;wBAAKiB,MAAK;kCAAK;;kCAChB,KAACrB;wBACCoB,MAAK;wBACLC,MAAK;wBACLC,SAAQ;wBACRC,WAAWL,MAAMM,UAAU;wBAC3BC,SAAS;4BACP,KAAKP,MAAMQ,OAAO;wBACpB;kCACD;;;;;;AAOX"}
+{"version":3,"sources":["../../../src/components/workflow-run-view/workflow-run-states.tsx"],"sourcesContent":["import type {QueryLoadErrorQuery} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Text} from '@shipfox/react-ui/typography';\n\nexport function WorkflowRunSkeleton() {\n  return (\n    <section\n      aria-label=\"Loading workflow run\"\n      className=\"bg-background-neutral-background px-row py-row\"\n    >\n      <div className=\"flex min-w-0 flex-wrap items-center gap-x-cluster gap-y-inline\">\n        <div className=\"flex min-w-0 items-center gap-inline\">\n          <Skeleton className=\"size-8 rounded-full\" />\n          <Skeleton className=\"h-24 w-180 rounded-6\" />\n        </div>\n        <Skeleton className=\"h-24 w-88 rounded-6\" />\n        <span\n          aria-hidden=\"true\"\n          className=\"hidden h-20 w-px shrink-0 bg-border-neutral-base sm:block\"\n        />\n        <Skeleton className=\"h-20 w-64 rounded-4\" />\n        <Skeleton className=\"h-20 w-112 rounded-4\" />\n        <span className=\"min-w-0 flex-1\" />\n        <Skeleton className=\"h-20 w-88 rounded-4\" />\n        <Skeleton className=\"h-20 w-88 rounded-4\" />\n      </div>\n    </section>\n  );\n}\n\nexport function WorkflowRunContentSkeleton() {\n  return (\n    <section\n      aria-label=\"Loading workflow run content\"\n      className=\"min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-panel-compact\"\n    >\n      <Skeleton className=\"h-160 w-full rounded-6\" />\n    </section>\n  );\n}\n\nexport function WorkflowRunNotFound() {\n  return (\n    <EmptyState\n      icon=\"pulseLine\"\n      title=\"Run not found\"\n      description=\"This run does not exist or is no longer available.\"\n    />\n  );\n}\n\n/**\n * Slim non-blocking banner shown when a background refetch fails after the run already\n * loaded (active-run polling can hit a transient API error), so the loaded run stays on\n * screen with an inline retry instead of being wiped by a full error placeholder.\n */\nexport function WorkflowRunStaleError({query}: {query: QueryLoadErrorQuery}) {\n  return (\n    <div className=\"border-b border-border-neutral-base p-tight\">\n      <Callout role=\"alert\" type=\"error\">\n        <div className=\"flex items-center justify-between gap-inline\">\n          <Text size=\"xs\">Could not refresh this run.</Text>\n          <Button\n            type=\"button\"\n            size=\"2xs\"\n            variant=\"secondary\"\n            isLoading={query.isFetching}\n            onClick={() => {\n              void query.refetch();\n            }}\n          >\n            Retry\n          </Button>\n        </div>\n      </Callout>\n    </div>\n  );\n}\n"],"names":["Button","Callout","EmptyState","Skeleton","Text","WorkflowRunSkeleton","section","aria-label","className","div","span","aria-hidden","WorkflowRunContentSkeleton","WorkflowRunNotFound","icon","title","description","WorkflowRunStaleError","query","role","type","size","variant","isLoading","isFetching","onClick","refetch"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,OAAO,QAAO,4BAA4B;AAClD,SAAQC,UAAU,QAAO,gCAAgC;AACzD,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,IAAI,QAAO,+BAA+B;AAElD,OAAO,SAASC;IACd,qBACE,KAACC;QACCC,cAAW;QACXC,WAAU;kBAEV,cAAA,MAACC;YAAID,WAAU;;8BACb,MAACC;oBAAID,WAAU;;sCACb,KAACL;4BAASK,WAAU;;sCACpB,KAACL;4BAASK,WAAU;;;;8BAEtB,KAACL;oBAASK,WAAU;;8BACpB,KAACE;oBACCC,eAAY;oBACZH,WAAU;;8BAEZ,KAACL;oBAASK,WAAU;;8BACpB,KAACL;oBAASK,WAAU;;8BACpB,KAACE;oBAAKF,WAAU;;8BAChB,KAACL;oBAASK,WAAU;;8BACpB,KAACL;oBAASK,WAAU;;;;;AAI5B;AAEA,OAAO,SAASI;IACd,qBACE,KAACN;QACCC,cAAW;QACXC,WAAU;kBAEV,cAAA,KAACL;YAASK,WAAU;;;AAG1B;AAEA,OAAO,SAASK;IACd,qBACE,KAACX;QACCY,MAAK;QACLC,OAAM;QACNC,aAAY;;AAGlB;AAEA;;;;CAIC,GACD,OAAO,SAASC,sBAAsB,EAACC,KAAK,EAA+B;IACzE,qBACE,KAACT;QAAID,WAAU;kBACb,cAAA,KAACP;YAAQkB,MAAK;YAAQC,MAAK;sBACzB,cAAA,MAACX;gBAAID,WAAU;;kCACb,KAACJ;wBAAKiB,MAAK;kCAAK;;kCAChB,KAACrB;wBACCoB,MAAK;wBACLC,MAAK;wBACLC,SAAQ;wBACRC,WAAWL,MAAMM,UAAU;wBAC3BC,SAAS;4BACP,KAAKP,MAAMQ,OAAO;wBACpB;kCACD;;;;;;AAOX"}

package/dist/components/workflow-run-view/workflow-run-view.d.ts

@@ -1,5 +1,4 @@
 import { type ReactNode } from 'react';
-import type { RunAnnotationSummary } from '#core/workflow-run-tabs.js';
 import { type WorkflowJobSearch, type WorkflowRunsSearch, type WorkflowRunTab } from '#routes/inputs.js';
 export interface WorkflowRunViewProps {
     projectId: string;
@@ -9,7 +8,6 @@ export interface WorkflowRunViewProps {
     runAttempt?: number | undefined;
     selection?: WorkflowRunsSearch | undefined;
     tab?: WorkflowRunTab | undefined;
-    annotationSummary?: RunAnnotationSummary | undefined;
     activeJobId?: string | undefined;
     jobSearch?: WorkflowJobSearch | undefined;
     jobContent?: ReactNode | undefined;
@@ -18,5 +16,5 @@ export interface WorkflowRunViewProps {
  * 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 declare function WorkflowRunView({ projectId, workspaceSlug, projectSlug, workflowRunId, runAttempt, selection, tab, annotationSummary, activeJobId, jobSearch, jobContent, }: WorkflowRunViewProps): import("react").JSX.Element;
+export declare function WorkflowRunView({ projectId, workspaceSlug, projectSlug, workflowRunId, runAttempt, selection, tab, activeJobId, jobSearch, jobContent, }: WorkflowRunViewProps): import("react").JSX.Element;
 //# sourceMappingURL=workflow-run-view.d.ts.map

package/dist/components/workflow-run-view/workflow-run-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-run-view.d.ts","sourceRoot":"","sources":["../../../src/components/workflow-run-view/workflow-run-view.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AAOrE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EAGpB,MAAM,mBAAmB,CAAC;AAiB3B,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC3C,GAAG,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACjC,iBAAiB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC1C,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAU,EACV,SAAS,EACT,GAAG,EACH,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,oBAAoB,+BA0BtB"}
+{"version":3,"file":"workflow-run-view.d.ts","sourceRoot":"","sources":["../../../src/components/workflow-run-view/workflow-run-view.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAezD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EAGpB,MAAM,mBAAmB,CAAC;AAqB3B,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC3C,GAAG,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC1C,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAU,EACV,SAAS,EACT,GAAG,EACH,WAAW,EACX,SAAS,EACT,UAAU,GACX,EAAE,oBAAoB,+BA0CtB"}

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

@@ -5,14 +5,18 @@ import { EmptyState } from '@shipfox/react-ui/empty-state';
 import { RelativeTimeProvider } from '@shipfox/react-ui/relative-time';
 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 } from 'react';
+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 { workflowJobSearchParams, workflowRunSearchParams } from '#routes/inputs.js';
 import { JobGraph } from '../job-graph/index.js';
 import { WorkflowRunSummary } from '../workflow-run-summary/index.js';
-import { RunAnnotationSummaryLine, RunAnnotationsEmpty } from '../workflow-run-tabs/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';
@@ -20,12 +24,24 @@ import { WorkflowRunContentSkeleton, WorkflowRunNotFound, WorkflowRunSkeleton, W
 /**
  * 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, annotationSummary, activeJobId, jobSearch, jobContent }) {
+ */ export function WorkflowRunView({ projectId, workspaceSlug, projectSlug, workflowRunId, runAttempt, selection, tab, activeJobId, jobSearch, jobContent }) {
     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 /*#__PURE__*/ _jsx(RelativeTimeProvider, {
         children: /*#__PURE__*/ _jsx("div", {
             className: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
@@ -33,11 +49,11 @@ import { WorkflowRunContentSkeleton, WorkflowRunNotFound, WorkflowRunSkeleton, W
                 workspaceSlug: workspaceSlug,
                 projectSlug: projectSlug,
                 query: runQuery,
+                annotations: annotationsQuery,
                 rerunMutation: rerunMutation,
                 runAttempt: runAttempt,
                 selection: selection,
                 tab: tab,
-                annotationSummary: annotationSummary,
                 activeJobId: activeJobId,
                 jobSearch: jobSearch,
                 jobContent: jobContent
@@ -45,9 +61,10 @@ import { WorkflowRunContentSkeleton, WorkflowRunNotFound, WorkflowRunSkeleton, W
         })
     });
 }
-function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, runAttempt, selection, tab, annotationSummary, activeJobId, jobSearch, jobContent }) {
+function RunViewContent({ workspaceSlug, projectSlug, query, annotations, rerunMutation, runAttempt, selection, tab, activeJobId, jobSearch, jobContent }) {
     const navigate = useNavigate();
     const runData = query.data;
+    const annotationSummary = annotations.summary;
     const activeSection = runWorkspaceSection(tab);
     const cancelMutation = useCancelWorkflowRunMutation(runData);
     const sourceSnapshot = runData?.sourceSnapshot ?? null;
@@ -147,6 +164,29 @@ function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, runA
             search: workflowRunSearchParams(nextSearch, nextSearch)
         });
     }
+    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
+        });
+    }
     function cancelRun() {
         cancelMutation.mutate(undefined, {
             onError: (error)=>toast.error(cancelErrorMessage(error))
@@ -193,6 +233,7 @@ function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, runA
                         children: runData && jobContent ? jobContent : runData ? /*#__PURE__*/ _jsx(RunSectionContent, {
                             section: activeSection,
                             run: runData,
+                            annotations: annotations,
                             annotationSummary: annotationSummary,
                             workspaceSlug: workspaceSlug,
                             projectSlug: projectSlug,
@@ -200,10 +241,11 @@ function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, runA
                             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",
+                            className: "min-h-0 flex-1 overflow-auto p-panel",
                             children: loadingOrError
                         })
                     })
@@ -212,72 +254,188 @@ function RunViewContent({ workspaceSlug, projectSlug, query, rerunMutation, runA
         ]
     });
 }
-function RunSectionContent({ section, run, annotationSummary, workspaceSlug, projectSlug, selection, selectedJobId, onSelectGraphJob, onSelectAnnotationJob, sourceSnapshot, highlightedLineRange }) {
+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__*/ _jsx("div", {
-                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24",
-                children: /*#__PURE__*/ _jsx(JobGraph, {
-                    run: run,
-                    selectedJobId: selectedJobId,
-                    onSelectedJobChange: onSelectGraphJob,
-                    className: "min-h-160 overflow-hidden"
-                })
-            })
-        });
-    }
-    if (section === 'annotations') {
-        const selectedJob = run.jobs.find((job)=>job.id === selectedJobId);
-        return /*#__PURE__*/ _jsx("section", {
-            "aria-label": "Run annotations",
-            className: "min-h-0 flex-1 overflow-auto pb-24 pt-16",
+            className: "min-h-0 flex-1 overflow-auto pb-panel pt-[16px]",
             children: /*#__PURE__*/ _jsxs("div", {
-                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24",
+                className: "mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame",
                 children: [
-                    /*#__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(Text, {
+                        as: "h2",
+                        className: "sr-only",
+                        children: "All jobs summary"
                     }),
-                    /*#__PURE__*/ _jsx(RunAnnotationsEmpty, {
-                        jobName: selectedJob?.displayName
+                    /*#__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__*/ _jsx("div", {
-            className: "mx-auto flex min-h-full w-full max-w-[1120px] px-24",
-            children: 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.'
-            })
+        className: "min-h-0 flex-1 overflow-auto pb-panel pt-[16px]",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-frame",
+            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
+    ]);
+    const derivedAnnotations = useMemo(()=>{
+        if (!records) return undefined;
+        const jobsWithAnnotations = new Set(records.map((annotation)=>annotation.jobId));
+        return run.jobs.filter((job)=>{
+            const style = job.status === 'failed' ? 'error' : 'warning';
+            return (!selectedJob || selectedJob.id === job.id) && !jobsWithAnnotations.has(job.id) && (job.status === 'failed' || job.status === 'skipped') && job.jobExecutions.length === 0 && matchesDerivedAnnotationFilters(style, selection);
+        }).map((job)=>({
+                id: `derived-${job.id}`,
+                style: job.status === 'failed' ? 'error' : 'warning',
+                body: derivedJobAnnotation(job)
+            }));
+    }, [
+        records,
+        run.jobs,
+        selectedJob,
+        selection
+    ]);
+    const hasSynthesizedJobAnnotations = run.jobs.some((job)=>(job.status === 'failed' || job.status === 'skipped') && job.jobExecutions.length === 0);
+    return /*#__PURE__*/ _jsx("section", {
+        "aria-label": "Run annotations",
+        className: "min-h-0 flex-1 overflow-auto pb-panel pt-[16px]",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    as: "h2",
+                    className: "sr-only",
+                    children: "Annotations"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-wrap items-center justify-between gap-inline",
+                    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,
+                    derivedAnnotations: derivedAnnotations,
+                    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 || selection?.annotation) && ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations)),
+                    filteredJobName: selectedJob?.displayName,
+                    filteredSeverity: severity,
+                    onClearFilters: onClearAnnotationFilters,
+                    selectedAnnotationId: selection?.annotation
+                }, `${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`)
+            ]
         })
     });
 }
+function matchesDerivedAnnotationFilters(style, selection) {
+    if (selection?.severity && style !== selection.severity) return false;
+    // A selected annotation is a deep-link to a real annotation record. Synthetic diagnostics
+    // have no id or context, so they must not remain visible behind that selection.
+    return !selection?.annotation;
+}
+function derivedJobAnnotation(job) {
+    const reason = job.statusReason ? `Reason: \`${job.statusReason}\`` : null;
+    const traceSummary = formatConditionEvaluation(job.evaluationTrace);
+    const details = [
+        reason,
+        traceSummary
+    ].filter(Boolean).join('\n');
+    if (job.status === 'skipped') {
+        return [
+            `**${job.displayName}** was skipped before an execution was created.`,
+            '',
+            'Review its dependencies or condition before re-running.',
+            details
+        ].filter(Boolean).join('\n');
+    }
+    return [
+        `**${job.displayName}** failed before an execution was created.`,
+        '',
+        'Check runner availability and workflow configuration before re-running.',
+        details
+    ].filter(Boolean).join('\n');
+}
+function formatConditionEvaluation(trace) {
+    if (!trace?.length) return null;
+    return [
+        'Condition evaluation:',
+        ...trace.map((entry)=>{
+            if ('dropped' in entry) {
+                return `- ${entry.dropped} additional evaluation${entry.dropped === 1 ? '' : 's'} not recorded`;
+            }
+            const value = entry.value === undefined || entry.value === '' ? '(empty)' : `\`${entry.value}\``;
+            return `- \`${entry.field}\` evaluated \`${entry.expression}\` to ${value}${entry.degraded ? ' (degraded)' : ''}`;
+        })
+    ].join('\n');
+}
 const ALL_ANNOTATION_JOBS = 'all-jobs';
 function AnnotationJobFilter({ jobs, selectedJobId, onSelect }) {
     const sortedJobs = [
@@ -312,15 +470,15 @@ function AnnotationJobFilter({ jobs, selectedJobId, onSelect }) {
 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",
+        className: "hidden w-240 shrink-0 border-r border-border-neutral-base bg-background-neutral-background p-panel-compact min-[768px]:block",
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-16",
+            className: "flex flex-col gap-group",
             children: [
                 /*#__PURE__*/ _jsx("div", {
                     className: "h-32 rounded-4 bg-background-components-subtle"
                 }),
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-6",
+                    className: "flex flex-col gap-inline",
                     children: [
                         /*#__PURE__*/ _jsx("div", {
                             className: "h-16 w-64 rounded-4 bg-background-components-subtle"