@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/domains/workflows/workflow/workflow-timeline-row.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-timeline-row.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-row.tsx"],"sourcesContent":["import {\n  ArrowDownToLine,\n  ArrowUpFromLine,\n  Check,\n  CircleSlash,\n  CircleX,\n  CornerDownRight,\n  CircleHelp,\n  Loader2,\n  Pause,\n  SkipForward,\n  Timer,\n} from 'lucide-react';\nimport type { Step } from '../context/use-current-run';\nimport type { TimelineRow } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\nimport { formatDuration } from '@/utils/duration';\n\nconst statusPresentation = {\n  success: { label: 'Completed', icon: Check, color: 'text-positive1', bar: 'bg-muted-foreground/60' },\n  failed: { label: 'Failed', icon: CircleX, color: 'text-negative1', bar: 'bg-negative1/60' },\n  suspended: { label: 'Needs input', icon: Pause, color: 'text-accent3', bar: 'bg-accent3/60' },\n  waiting: { label: 'Waiting', icon: Timer, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n  paused: { label: 'Paused', icon: Pause, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n  skipped: { label: 'Skipped', icon: SkipForward, color: 'text-muted-foreground', bar: 'bg-muted-foreground/25' },\n  running: { label: 'Running', icon: Loader2, color: 'text-accent6', bar: 'bg-accent6/60' },\n  canceled: { label: 'Canceled', icon: CircleSlash, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n} satisfies Record<Step['status'], { label: string; icon: typeof Check; color: string; bar: string }>;\n\nconst unknownStatus = {\n  label: 'Status unavailable',\n  icon: CircleHelp,\n  color: 'text-muted-foreground',\n  bar: 'bg-muted-foreground/25',\n};\n\nexport interface WorkflowTimelineRowProps {\n  row: TimelineRow;\n  isSelected: boolean;\n  isHovered: boolean;\n  onSelectStep: (stepId: string) => void;\n  onHoverStep: (stepId: string | null) => void;\n  onOpenInput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n  onOpenOutput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n}\n\nexport function WorkflowTimelineRow({\n  row,\n  isSelected,\n  isHovered,\n  onSelectStep,\n  onHoverStep,\n  onOpenInput,\n  onOpenOutput,\n}: WorkflowTimelineRowProps) {\n  const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;\n  const StatusIcon = status.icon;\n  const parentPath = row.stepId.slice(0, row.stepId.lastIndexOf('.'));\n  const label = row.isNestedEntry ? row.stepId.slice(row.stepId.lastIndexOf('.') + 1) : row.stepId;\n\n  return (\n    <div\n      data-testid=\"workflow-timeline-row\"\n      data-workflow-step-key={row.stepId}\n      onMouseEnter={() => !row.isNestedEntry && onHoverStep(row.stepId)}\n      onMouseLeave={() => !row.isNestedEntry && onHoverStep(null)}\n      className={cn(\n        'grid grid-cols-[minmax(130px,1fr)_minmax(64px,1fr)_56px_64px] items-center gap-3 rounded-md px-2 py-1',\n        '@max-[540px]/workflow-timeline:grid-cols-[minmax(0,1fr)_48px_64px] @max-[540px]/workflow-timeline:gap-x-1.5 @max-[540px]/workflow-timeline:gap-y-1 @max-[540px]/workflow-timeline:py-2',\n        (isSelected || isHovered) && 'bg-fill-subtle',\n      )}\n    >\n      <button\n        type=\"button\"\n        className=\"flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus aria-disabled:cursor-default\"\n        aria-disabled={row.isNestedEntry}\n        aria-pressed={isSelected}\n        onClick={() => {\n          if (row.isNestedEntry) return;\n          onSelectStep(row.stepId);\n        }}\n        title={row.stepId}\n      >\n        <span\n          aria-label={status.label}\n          className={cn(\n            'grid size-6 flex-none place-items-center rounded-md border border-border bg-background',\n            status.color,\n          )}\n        >\n          <StatusIcon aria-hidden className={cn('size-3.5', row.status === 'running' && 'motion-safe:animate-spin')} />\n        </span>\n        <span className=\"min-w-0\">\n          <span className=\"block truncate\">{label}</span>\n          {row.isNestedEntry && (\n            <span className=\"flex min-w-0 items-center gap-1 text-meta text-muted-foreground\">\n              <CornerDownRight aria-hidden className=\"size-3 shrink-0\" />\n              <span className=\"truncate\">{parentPath}</span>\n            </span>\n          )}\n        </span>\n      </button>\n      <div\n        className=\"relative h-5 min-w-0 overflow-hidden rounded-sm bg-muted @max-[540px]/workflow-timeline:col-span-full @max-[540px]/workflow-timeline:row-start-2 @max-[540px]/workflow-timeline:ml-[34px]\"\n        aria-hidden\n      >\n        {row.timing && (\n          <div\n            data-testid=\"workflow-timeline-bar\"\n            data-offset={row.timing.offsetPct}\n            data-width={row.timing.widthPct}\n            className={cn('absolute top-0 h-full min-w-0.5 rounded-sm', status.bar)}\n            style={{ left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }}\n          />\n        )}\n      </div>\n      <span\n        className=\"text-right text-meta whitespace-nowrap text-muted-foreground\"\n        title={row.timing && row.spansSuspension ? 'Includes time spent suspended waiting for input' : undefined}\n      >\n        {row.timing ? (\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDuration(row.timing.durationMs)}\n          </Txt>\n        ) : (\n          <span aria-label=\"Timing unavailable\">—</span>\n        )}\n      </span>\n      <div className=\"flex items-center\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step input\"\n          disabled={row.step.input === undefined}\n          onClick={event => onOpenInput(row, event.currentTarget)}\n        >\n          <ArrowDownToLine />\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step output\"\n          disabled={row.step.output === undefined}\n          onClick={event => onOpenOutput(row, event.currentTarget)}\n        >\n          <ArrowUpFromLine />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["Check","CircleX","Pause","Timer","SkipForward","Loader2","CircleSlash","CircleHelp","jsxs","cn","jsx","CornerDownRight","Txt","Button","ArrowDownToLine","ArrowUpFromLine"],"mappings":"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"}
+{"version":3,"file":"workflow-timeline-row.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-row.tsx"],"sourcesContent":["import {\n  ArrowDownToLine,\n  ArrowUpFromLine,\n  Check,\n  CircleSlash,\n  CircleX,\n  CornerDownRight,\n  CircleHelp,\n  Loader2,\n  Pause,\n  SkipForward,\n  Timer,\n} from 'lucide-react';\nimport type { Step } from '../context/use-current-run';\nimport { workflowStatusTone, workflowStatusToneBar, workflowStatusToneText } from '../workflow-status-tone';\nimport type { TimelineRow } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/utils/cn';\nimport { formatDuration } from '@/utils/duration';\n\nconst statusPresentation = {\n  success: { label: 'Completed', icon: Check },\n  failed: { label: 'Failed', icon: CircleX },\n  suspended: { label: 'Needs input', icon: Pause },\n  waiting: { label: 'Waiting', icon: Timer },\n  paused: { label: 'Paused', icon: Pause },\n  skipped: { label: 'Skipped', icon: SkipForward },\n  running: { label: 'Running', icon: Loader2 },\n  canceled: { label: 'Canceled', icon: CircleSlash },\n} satisfies Record<Step['status'], { label: string; icon: typeof Check }>;\n\nconst unknownStatus = { label: 'Status unavailable', icon: CircleHelp };\n\nexport interface WorkflowTimelineRowProps {\n  row: TimelineRow;\n  isSelected: boolean;\n  isHovered: boolean;\n  onSelectStep: (stepId: string) => void;\n  onHoverStep: (stepId: string | null) => void;\n  onOpenInput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n  onOpenOutput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n}\n\nexport function WorkflowTimelineRow({\n  row,\n  isSelected,\n  isHovered,\n  onSelectStep,\n  onHoverStep,\n  onOpenInput,\n  onOpenOutput,\n}: WorkflowTimelineRowProps) {\n  const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;\n  const StatusIcon = status.icon;\n  const tone = workflowStatusTone(row.status);\n  const parentPath = row.stepId.slice(0, row.stepId.lastIndexOf('.'));\n  const label = row.isNestedEntry ? row.stepId.slice(row.stepId.lastIndexOf('.') + 1) : row.stepId;\n\n  return (\n    <div\n      data-testid=\"workflow-timeline-row\"\n      data-workflow-step-key={row.stepId}\n      onMouseEnter={() => !row.isNestedEntry && onHoverStep(row.stepId)}\n      onMouseLeave={() => !row.isNestedEntry && onHoverStep(null)}\n      className={cn(\n        'grid grid-cols-[minmax(130px,1fr)_minmax(64px,1fr)_56px_64px] items-center gap-3 rounded-md px-2 py-1',\n        '@max-[540px]/workflow-timeline:grid-cols-[minmax(0,1fr)_48px_64px] @max-[540px]/workflow-timeline:gap-x-1.5 @max-[540px]/workflow-timeline:gap-y-1 @max-[540px]/workflow-timeline:py-2',\n        (isSelected || isHovered) && 'bg-fill-subtle',\n      )}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm aria-disabled:cursor-default',\n          focusRing,\n        )}\n        aria-disabled={row.isNestedEntry}\n        aria-pressed={isSelected}\n        onClick={() => {\n          if (row.isNestedEntry) return;\n          onSelectStep(row.stepId);\n        }}\n        title={row.stepId}\n      >\n        <span\n          aria-label={status.label}\n          className={cn(\n            'grid size-6 flex-none place-items-center rounded-md border border-border bg-background',\n            workflowStatusToneText[tone],\n          )}\n        >\n          <StatusIcon aria-hidden className={cn('size-3.5', row.status === 'running' && 'motion-safe:animate-spin')} />\n        </span>\n        <span className=\"min-w-0\">\n          <span className=\"block truncate\">{label}</span>\n          {row.isNestedEntry && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"flex min-w-0 items-center gap-1\">\n              <CornerDownRight aria-hidden className=\"size-3 shrink-0\" />\n              <span className=\"truncate\">{parentPath}</span>\n            </Txt>\n          )}\n        </span>\n      </button>\n      <div\n        className=\"relative h-5 min-w-0 overflow-hidden rounded-sm bg-muted @max-[540px]/workflow-timeline:col-span-full @max-[540px]/workflow-timeline:row-start-2 @max-[540px]/workflow-timeline:ml-[34px]\"\n        aria-hidden\n      >\n        {row.timing && (\n          <div\n            data-testid=\"workflow-timeline-bar\"\n            data-offset={row.timing.offsetPct}\n            data-width={row.timing.widthPct}\n            className={cn('absolute top-0 h-full min-w-0.5 rounded-sm', workflowStatusToneBar[tone])}\n            style={{ left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }}\n          />\n        )}\n      </div>\n      <Txt\n        as=\"span\"\n        variant=\"meta\"\n        tone=\"muted\"\n        className=\"text-right whitespace-nowrap\"\n        title={row.timing && row.spansSuspension ? 'Includes time spent suspended waiting for input' : undefined}\n      >\n        {row.timing ? (\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDuration(row.timing.durationMs)}\n          </Txt>\n        ) : (\n          <span aria-label=\"Timing unavailable\">—</span>\n        )}\n      </Txt>\n      <div className=\"flex items-center\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step input\"\n          disabled={row.step.input === undefined}\n          onClick={event => onOpenInput(row, event.currentTarget)}\n        >\n          <ArrowDownToLine />\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step output\"\n          disabled={row.step.output === undefined}\n          onClick={event => onOpenOutput(row, event.currentTarget)}\n        >\n          <ArrowUpFromLine />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":["Check","CircleX","Pause","Timer","SkipForward","Loader2","CircleSlash","CircleHelp","workflowStatusTone","jsxs","cn","focusRing","jsx","workflowStatusToneText","Txt","CornerDownRight","workflowStatusToneBar","Button","ArrowDownToLine","ArrowUpFromLine"],"mappings":"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"}

package/dist/domains/workflows/workflow/workflow-timeline-row.es.js

@@ -1,26 +1,23 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CircleSlash, Loader2, SkipForward, Pause, Timer, CircleX, Check, CircleHelp, CornerDownRight, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { workflowStatusTone, workflowStatusToneText, workflowStatusToneBar } from '../workflow-status-tone.es.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDuration } from '../../../utils/duration.es.js';
 
 const statusPresentation = {
-  success: { label: "Completed", icon: Check, color: "text-positive1", bar: "bg-muted-foreground/60" },
-  failed: { label: "Failed", icon: CircleX, color: "text-negative1", bar: "bg-negative1/60" },
-  suspended: { label: "Needs input", icon: Pause, color: "text-accent3", bar: "bg-accent3/60" },
-  waiting: { label: "Waiting", icon: Timer, color: "text-muted-foreground", bar: "bg-muted-foreground/40" },
-  paused: { label: "Paused", icon: Pause, color: "text-muted-foreground", bar: "bg-muted-foreground/40" },
-  skipped: { label: "Skipped", icon: SkipForward, color: "text-muted-foreground", bar: "bg-muted-foreground/25" },
-  running: { label: "Running", icon: Loader2, color: "text-accent6", bar: "bg-accent6/60" },
-  canceled: { label: "Canceled", icon: CircleSlash, color: "text-muted-foreground", bar: "bg-muted-foreground/40" }
-};
-const unknownStatus = {
-  label: "Status unavailable",
-  icon: CircleHelp,
-  color: "text-muted-foreground",
-  bar: "bg-muted-foreground/25"
+  success: { label: "Completed", icon: Check },
+  failed: { label: "Failed", icon: CircleX },
+  suspended: { label: "Needs input", icon: Pause },
+  waiting: { label: "Waiting", icon: Timer },
+  paused: { label: "Paused", icon: Pause },
+  skipped: { label: "Skipped", icon: SkipForward },
+  running: { label: "Running", icon: Loader2 },
+  canceled: { label: "Canceled", icon: CircleSlash }
 };
+const unknownStatus = { label: "Status unavailable", icon: CircleHelp };
 function WorkflowTimelineRow({
   row,
   isSelected,
@@ -32,6 +29,7 @@ function WorkflowTimelineRow({
 }) {
   const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;
   const StatusIcon = status.icon;
+  const tone = workflowStatusTone(row.status);
   const parentPath = row.stepId.slice(0, row.stepId.lastIndexOf("."));
   const label = row.isNestedEntry ? row.stepId.slice(row.stepId.lastIndexOf(".") + 1) : row.stepId;
   return /* @__PURE__ */ jsxs(
@@ -51,7 +49,10 @@ function WorkflowTimelineRow({
           "button",
           {
             type: "button",
-            className: "flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus aria-disabled:cursor-default",
+            className: cn(
+              "flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm aria-disabled:cursor-default",
+              focusRing
+            ),
             "aria-disabled": row.isNestedEntry,
             "aria-pressed": isSelected,
             onClick: () => {
@@ -66,14 +67,14 @@ function WorkflowTimelineRow({
                   "aria-label": status.label,
                   className: cn(
                     "grid size-6 flex-none place-items-center rounded-md border border-border bg-background",
-                    status.color
+                    workflowStatusToneText[tone]
                   ),
                   children: /* @__PURE__ */ jsx(StatusIcon, { "aria-hidden": true, className: cn("size-3.5", row.status === "running" && "motion-safe:animate-spin") })
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("span", { className: "block truncate", children: label }),
-                row.isNestedEntry && /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1 text-meta text-muted-foreground", children: [
+                row.isNestedEntry && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "meta", tone: "muted", className: "flex min-w-0 items-center gap-1", children: [
                   /* @__PURE__ */ jsx(CornerDownRight, { "aria-hidden": true, className: "size-3 shrink-0" }),
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: parentPath })
                 ] })
@@ -92,16 +93,19 @@ function WorkflowTimelineRow({
                 "data-testid": "workflow-timeline-bar",
                 "data-offset": row.timing.offsetPct,
                 "data-width": row.timing.widthPct,
-                className: cn("absolute top-0 h-full min-w-0.5 rounded-sm", status.bar),
+                className: cn("absolute top-0 h-full min-w-0.5 rounded-sm", workflowStatusToneBar[tone]),
                 style: { left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }
               }
             )
           }
         ),
         /* @__PURE__ */ jsx(
-          "span",
+          Txt,
           {
-            className: "text-right text-meta whitespace-nowrap text-muted-foreground",
+            as: "span",
+            variant: "meta",
+            tone: "muted",
+            className: "text-right whitespace-nowrap",
             title: row.timing && row.spansSuspension ? "Includes time spent suspended waiting for input" : void 0,
             children: row.timing ? /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", font: "mono", children: formatDuration(row.timing.durationMs) }) : /* @__PURE__ */ jsx("span", { "aria-label": "Timing unavailable", children: "—" })
           }

package/dist/domains/workflows/workflow/workflow-timeline-row.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-timeline-row.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-row.tsx"],"sourcesContent":["import {\n  ArrowDownToLine,\n  ArrowUpFromLine,\n  Check,\n  CircleSlash,\n  CircleX,\n  CornerDownRight,\n  CircleHelp,\n  Loader2,\n  Pause,\n  SkipForward,\n  Timer,\n} from 'lucide-react';\nimport type { Step } from '../context/use-current-run';\nimport type { TimelineRow } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\nimport { formatDuration } from '@/utils/duration';\n\nconst statusPresentation = {\n  success: { label: 'Completed', icon: Check, color: 'text-positive1', bar: 'bg-muted-foreground/60' },\n  failed: { label: 'Failed', icon: CircleX, color: 'text-negative1', bar: 'bg-negative1/60' },\n  suspended: { label: 'Needs input', icon: Pause, color: 'text-accent3', bar: 'bg-accent3/60' },\n  waiting: { label: 'Waiting', icon: Timer, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n  paused: { label: 'Paused', icon: Pause, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n  skipped: { label: 'Skipped', icon: SkipForward, color: 'text-muted-foreground', bar: 'bg-muted-foreground/25' },\n  running: { label: 'Running', icon: Loader2, color: 'text-accent6', bar: 'bg-accent6/60' },\n  canceled: { label: 'Canceled', icon: CircleSlash, color: 'text-muted-foreground', bar: 'bg-muted-foreground/40' },\n} satisfies Record<Step['status'], { label: string; icon: typeof Check; color: string; bar: string }>;\n\nconst unknownStatus = {\n  label: 'Status unavailable',\n  icon: CircleHelp,\n  color: 'text-muted-foreground',\n  bar: 'bg-muted-foreground/25',\n};\n\nexport interface WorkflowTimelineRowProps {\n  row: TimelineRow;\n  isSelected: boolean;\n  isHovered: boolean;\n  onSelectStep: (stepId: string) => void;\n  onHoverStep: (stepId: string | null) => void;\n  onOpenInput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n  onOpenOutput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n}\n\nexport function WorkflowTimelineRow({\n  row,\n  isSelected,\n  isHovered,\n  onSelectStep,\n  onHoverStep,\n  onOpenInput,\n  onOpenOutput,\n}: WorkflowTimelineRowProps) {\n  const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;\n  const StatusIcon = status.icon;\n  const parentPath = row.stepId.slice(0, row.stepId.lastIndexOf('.'));\n  const label = row.isNestedEntry ? row.stepId.slice(row.stepId.lastIndexOf('.') + 1) : row.stepId;\n\n  return (\n    <div\n      data-testid=\"workflow-timeline-row\"\n      data-workflow-step-key={row.stepId}\n      onMouseEnter={() => !row.isNestedEntry && onHoverStep(row.stepId)}\n      onMouseLeave={() => !row.isNestedEntry && onHoverStep(null)}\n      className={cn(\n        'grid grid-cols-[minmax(130px,1fr)_minmax(64px,1fr)_56px_64px] items-center gap-3 rounded-md px-2 py-1',\n        '@max-[540px]/workflow-timeline:grid-cols-[minmax(0,1fr)_48px_64px] @max-[540px]/workflow-timeline:gap-x-1.5 @max-[540px]/workflow-timeline:gap-y-1 @max-[540px]/workflow-timeline:py-2',\n        (isSelected || isHovered) && 'bg-fill-subtle',\n      )}\n    >\n      <button\n        type=\"button\"\n        className=\"flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus aria-disabled:cursor-default\"\n        aria-disabled={row.isNestedEntry}\n        aria-pressed={isSelected}\n        onClick={() => {\n          if (row.isNestedEntry) return;\n          onSelectStep(row.stepId);\n        }}\n        title={row.stepId}\n      >\n        <span\n          aria-label={status.label}\n          className={cn(\n            'grid size-6 flex-none place-items-center rounded-md border border-border bg-background',\n            status.color,\n          )}\n        >\n          <StatusIcon aria-hidden className={cn('size-3.5', row.status === 'running' && 'motion-safe:animate-spin')} />\n        </span>\n        <span className=\"min-w-0\">\n          <span className=\"block truncate\">{label}</span>\n          {row.isNestedEntry && (\n            <span className=\"flex min-w-0 items-center gap-1 text-meta text-muted-foreground\">\n              <CornerDownRight aria-hidden className=\"size-3 shrink-0\" />\n              <span className=\"truncate\">{parentPath}</span>\n            </span>\n          )}\n        </span>\n      </button>\n      <div\n        className=\"relative h-5 min-w-0 overflow-hidden rounded-sm bg-muted @max-[540px]/workflow-timeline:col-span-full @max-[540px]/workflow-timeline:row-start-2 @max-[540px]/workflow-timeline:ml-[34px]\"\n        aria-hidden\n      >\n        {row.timing && (\n          <div\n            data-testid=\"workflow-timeline-bar\"\n            data-offset={row.timing.offsetPct}\n            data-width={row.timing.widthPct}\n            className={cn('absolute top-0 h-full min-w-0.5 rounded-sm', status.bar)}\n            style={{ left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }}\n          />\n        )}\n      </div>\n      <span\n        className=\"text-right text-meta whitespace-nowrap text-muted-foreground\"\n        title={row.timing && row.spansSuspension ? 'Includes time spent suspended waiting for input' : undefined}\n      >\n        {row.timing ? (\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDuration(row.timing.durationMs)}\n          </Txt>\n        ) : (\n          <span aria-label=\"Timing unavailable\">—</span>\n        )}\n      </span>\n      <div className=\"flex items-center\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step input\"\n          disabled={row.step.input === undefined}\n          onClick={event => onOpenInput(row, event.currentTarget)}\n        >\n          <ArrowDownToLine />\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step output\"\n          disabled={row.step.output === undefined}\n          onClick={event => onOpenOutput(row, event.currentTarget)}\n        >\n          <ArrowUpFromLine />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"workflow-timeline-row.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-row.tsx"],"sourcesContent":["import {\n  ArrowDownToLine,\n  ArrowUpFromLine,\n  Check,\n  CircleSlash,\n  CircleX,\n  CornerDownRight,\n  CircleHelp,\n  Loader2,\n  Pause,\n  SkipForward,\n  Timer,\n} from 'lucide-react';\nimport type { Step } from '../context/use-current-run';\nimport { workflowStatusTone, workflowStatusToneBar, workflowStatusToneText } from '../workflow-status-tone';\nimport type { TimelineRow } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/utils/cn';\nimport { formatDuration } from '@/utils/duration';\n\nconst statusPresentation = {\n  success: { label: 'Completed', icon: Check },\n  failed: { label: 'Failed', icon: CircleX },\n  suspended: { label: 'Needs input', icon: Pause },\n  waiting: { label: 'Waiting', icon: Timer },\n  paused: { label: 'Paused', icon: Pause },\n  skipped: { label: 'Skipped', icon: SkipForward },\n  running: { label: 'Running', icon: Loader2 },\n  canceled: { label: 'Canceled', icon: CircleSlash },\n} satisfies Record<Step['status'], { label: string; icon: typeof Check }>;\n\nconst unknownStatus = { label: 'Status unavailable', icon: CircleHelp };\n\nexport interface WorkflowTimelineRowProps {\n  row: TimelineRow;\n  isSelected: boolean;\n  isHovered: boolean;\n  onSelectStep: (stepId: string) => void;\n  onHoverStep: (stepId: string | null) => void;\n  onOpenInput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n  onOpenOutput: (row: TimelineRow, trigger: HTMLButtonElement) => void;\n}\n\nexport function WorkflowTimelineRow({\n  row,\n  isSelected,\n  isHovered,\n  onSelectStep,\n  onHoverStep,\n  onOpenInput,\n  onOpenOutput,\n}: WorkflowTimelineRowProps) {\n  const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;\n  const StatusIcon = status.icon;\n  const tone = workflowStatusTone(row.status);\n  const parentPath = row.stepId.slice(0, row.stepId.lastIndexOf('.'));\n  const label = row.isNestedEntry ? row.stepId.slice(row.stepId.lastIndexOf('.') + 1) : row.stepId;\n\n  return (\n    <div\n      data-testid=\"workflow-timeline-row\"\n      data-workflow-step-key={row.stepId}\n      onMouseEnter={() => !row.isNestedEntry && onHoverStep(row.stepId)}\n      onMouseLeave={() => !row.isNestedEntry && onHoverStep(null)}\n      className={cn(\n        'grid grid-cols-[minmax(130px,1fr)_minmax(64px,1fr)_56px_64px] items-center gap-3 rounded-md px-2 py-1',\n        '@max-[540px]/workflow-timeline:grid-cols-[minmax(0,1fr)_48px_64px] @max-[540px]/workflow-timeline:gap-x-1.5 @max-[540px]/workflow-timeline:gap-y-1 @max-[540px]/workflow-timeline:py-2',\n        (isSelected || isHovered) && 'bg-fill-subtle',\n      )}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 text-left text-meta text-foreground focus-visible:rounded-sm aria-disabled:cursor-default',\n          focusRing,\n        )}\n        aria-disabled={row.isNestedEntry}\n        aria-pressed={isSelected}\n        onClick={() => {\n          if (row.isNestedEntry) return;\n          onSelectStep(row.stepId);\n        }}\n        title={row.stepId}\n      >\n        <span\n          aria-label={status.label}\n          className={cn(\n            'grid size-6 flex-none place-items-center rounded-md border border-border bg-background',\n            workflowStatusToneText[tone],\n          )}\n        >\n          <StatusIcon aria-hidden className={cn('size-3.5', row.status === 'running' && 'motion-safe:animate-spin')} />\n        </span>\n        <span className=\"min-w-0\">\n          <span className=\"block truncate\">{label}</span>\n          {row.isNestedEntry && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"flex min-w-0 items-center gap-1\">\n              <CornerDownRight aria-hidden className=\"size-3 shrink-0\" />\n              <span className=\"truncate\">{parentPath}</span>\n            </Txt>\n          )}\n        </span>\n      </button>\n      <div\n        className=\"relative h-5 min-w-0 overflow-hidden rounded-sm bg-muted @max-[540px]/workflow-timeline:col-span-full @max-[540px]/workflow-timeline:row-start-2 @max-[540px]/workflow-timeline:ml-[34px]\"\n        aria-hidden\n      >\n        {row.timing && (\n          <div\n            data-testid=\"workflow-timeline-bar\"\n            data-offset={row.timing.offsetPct}\n            data-width={row.timing.widthPct}\n            className={cn('absolute top-0 h-full min-w-0.5 rounded-sm', workflowStatusToneBar[tone])}\n            style={{ left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }}\n          />\n        )}\n      </div>\n      <Txt\n        as=\"span\"\n        variant=\"meta\"\n        tone=\"muted\"\n        className=\"text-right whitespace-nowrap\"\n        title={row.timing && row.spansSuspension ? 'Includes time spent suspended waiting for input' : undefined}\n      >\n        {row.timing ? (\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDuration(row.timing.durationMs)}\n          </Txt>\n        ) : (\n          <span aria-label=\"Timing unavailable\">—</span>\n        )}\n      </Txt>\n      <div className=\"flex items-center\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step input\"\n          disabled={row.step.input === undefined}\n          onClick={event => onOpenInput(row, event.currentTarget)}\n        >\n          <ArrowDownToLine />\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          tooltip=\"View step output\"\n          disabled={row.step.output === undefined}\n          onClick={event => onOpenOutput(row, event.currentTarget)}\n        >\n          <ArrowUpFromLine />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/workflows/workflow/workflow-timeline.cjs.js

@@ -10,8 +10,9 @@ const domains_workflows_context_useWorkflowSelectedStep = require('../context/us
 const domains_workflows_context_workflowStepDetailContext = require('../context/workflow-step-detail-context.cjs.js');
 const domains_workflows_workflow_workflowTimelineRow = require('./workflow-timeline-row.cjs.js');
 const domains_workflows_workflow_workflowTimelineUtils = require('./workflow-timeline-utils.cjs.js');
-const Button = require('../../../Button-CIwF6NHM.cjs');
-const collapsible = require('../../../collapsible-BFSJouuI.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
+const collapsible = require('../../../collapsible-jfzzU7Gp.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const primitives_raisedSurface = require('../../../primitives/raised-surface.cjs.js');
 const hooks_useAutoscroll = require('../../../hooks/use-autoscroll.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
@@ -56,7 +57,7 @@ function WorkflowTimeline() {
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChartNoAxesGantt, { "aria-hidden": true, className: "size-4 text-muted-foreground" }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Timeline" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-meta text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "meta", tone: "muted", children: [
                   rows.length,
                   " events"
                 ] }),

package/dist/domains/workflows/workflow/workflow-timeline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-timeline.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline.tsx"],"sourcesContent":["import { ChartNoAxesGantt, ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useCurrentRun } from '../context/use-current-run';\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { useWorkflowStepDetail } from '../context/workflow-step-detail-context';\nimport { WorkflowTimelineRow } from './workflow-timeline-row';\nimport { buildTimeline } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/utils/cn';\n\nexport function WorkflowTimeline() {\n  const { steps } = useCurrentRun();\n  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = useWorkflowSelectedStep();\n  const [now, setNow] = useState(() => Date.now());\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const [isEnlarged, setIsEnlarged] = useState(false);\n  const { showData } = useWorkflowStepDetail();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const rows = buildTimeline(steps, now);\n  const hasRunning = rows.some(row => row.isRunning);\n  useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });\n\n  useEffect(() => {\n    if (!hasRunning || isCollapsed) {\n      return;\n    }\n\n    const interval = setInterval(() => setNow(Date.now()), 100);\n    return () => clearInterval(interval);\n  }, [hasRunning, isCollapsed]);\n\n  if (rows.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"workflow-timeline\" className=\"relative z-20 shrink-0 px-2 pb-2\">\n      <Collapsible\n        open={!isCollapsed}\n        onOpenChange={open => setIsCollapsed(!open)}\n        className={cn(\n          raisedSurfaceStyle,\n          '@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl',\n        )}\n      >\n        <div className=\"flex items-center\">\n          <CollapsibleTrigger\n            className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3.5 py-2.5 text-caption text-foreground hover:bg-fill-subtle\"\n            aria-label={isCollapsed ? 'Expand timeline' : 'Collapse timeline'}\n          >\n            <span>\n              <ChartNoAxesGantt aria-hidden className=\"size-4 text-muted-foreground\" />\n            </span>\n            <span>Timeline</span>\n            <span className=\"text-meta text-muted-foreground\">{rows.length} events</span>\n            <span className=\"ml-auto\">\n              <ChevronDown\n                aria-hidden\n                className={cn('size-4 transition-transform motion-reduce:transition-none', isCollapsed && '-rotate-90')}\n              />\n            </span>\n          </CollapsibleTrigger>\n          {!isCollapsed && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tooltip={isEnlarged ? 'Restore timeline height' : 'Enlarge timeline'}\n              aria-pressed={isEnlarged}\n              onClick={() => setIsEnlarged(!isEnlarged)}\n              className=\"mr-2 shrink-0\"\n            >\n              {isEnlarged ? <ChevronsDownUp /> : <ChevronsUpDown />}\n            </Button>\n          )}\n        </div>\n        <CollapsibleContent>\n          <div\n            ref={scrollRef}\n            data-testid=\"workflow-timeline-list\"\n            className={cn(\n              'overflow-auto overscroll-contain px-1.5 pb-1.5',\n              isEnlarged ? 'max-h-[min(720px,calc(100dvh-112px))]' : 'max-h-[min(320px,40dvh)]',\n            )}\n          >\n            {rows.map(row => (\n              <WorkflowTimelineRow\n                key={row.stepId}\n                row={row}\n                isSelected={selectedStepId === row.stepId}\n                isHovered={hoverStepId === row.stepId}\n                onSelectStep={setSelectedStepId}\n                onHoverStep={setHoverStepId}\n                onOpenInput={(timelineRow, trigger) =>\n                  showData({ type: 'step-input', stepId: timelineRow.stepId }, trigger)\n                }\n                onOpenOutput={(timelineRow, trigger) =>\n                  showData({ type: 'step-output', stepId: timelineRow.stepId }, trigger)\n                }\n              />\n            ))}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n"],"names":["useCurrentRun","useWorkflowSelectedStep","useState","useWorkflowStepDetail","useRef","buildTimeline","useAutoscroll","useEffect","jsx","jsxs","Collapsible","cn","raisedSurfaceStyle","CollapsibleTrigger","ChartNoAxesGantt","ChevronDown","Button","ChevronsDownUp","ChevronsUpDown","CollapsibleContent","WorkflowTimelineRow"],"mappings":"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"}
+{"version":3,"file":"workflow-timeline.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline.tsx"],"sourcesContent":["import { ChartNoAxesGantt, ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useCurrentRun } from '../context/use-current-run';\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { useWorkflowStepDetail } from '../context/workflow-step-detail-context';\nimport { WorkflowTimelineRow } from './workflow-timeline-row';\nimport { buildTimeline } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/utils/cn';\n\nexport function WorkflowTimeline() {\n  const { steps } = useCurrentRun();\n  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = useWorkflowSelectedStep();\n  const [now, setNow] = useState(() => Date.now());\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const [isEnlarged, setIsEnlarged] = useState(false);\n  const { showData } = useWorkflowStepDetail();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const rows = buildTimeline(steps, now);\n  const hasRunning = rows.some(row => row.isRunning);\n  useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });\n\n  useEffect(() => {\n    if (!hasRunning || isCollapsed) {\n      return;\n    }\n\n    const interval = setInterval(() => setNow(Date.now()), 100);\n    return () => clearInterval(interval);\n  }, [hasRunning, isCollapsed]);\n\n  if (rows.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"workflow-timeline\" className=\"relative z-20 shrink-0 px-2 pb-2\">\n      <Collapsible\n        open={!isCollapsed}\n        onOpenChange={open => setIsCollapsed(!open)}\n        className={cn(\n          raisedSurfaceStyle,\n          '@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl',\n        )}\n      >\n        <div className=\"flex items-center\">\n          <CollapsibleTrigger\n            className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3.5 py-2.5 text-caption text-foreground hover:bg-fill-subtle\"\n            aria-label={isCollapsed ? 'Expand timeline' : 'Collapse timeline'}\n          >\n            <span>\n              <ChartNoAxesGantt aria-hidden className=\"size-4 text-muted-foreground\" />\n            </span>\n            <span>Timeline</span>\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\">\n              {rows.length} events\n            </Txt>\n            <span className=\"ml-auto\">\n              <ChevronDown\n                aria-hidden\n                className={cn('size-4 transition-transform motion-reduce:transition-none', isCollapsed && '-rotate-90')}\n              />\n            </span>\n          </CollapsibleTrigger>\n          {!isCollapsed && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tooltip={isEnlarged ? 'Restore timeline height' : 'Enlarge timeline'}\n              aria-pressed={isEnlarged}\n              onClick={() => setIsEnlarged(!isEnlarged)}\n              className=\"mr-2 shrink-0\"\n            >\n              {isEnlarged ? <ChevronsDownUp /> : <ChevronsUpDown />}\n            </Button>\n          )}\n        </div>\n        <CollapsibleContent>\n          <div\n            ref={scrollRef}\n            data-testid=\"workflow-timeline-list\"\n            className={cn(\n              'overflow-auto overscroll-contain px-1.5 pb-1.5',\n              isEnlarged ? 'max-h-[min(720px,calc(100dvh-112px))]' : 'max-h-[min(320px,40dvh)]',\n            )}\n          >\n            {rows.map(row => (\n              <WorkflowTimelineRow\n                key={row.stepId}\n                row={row}\n                isSelected={selectedStepId === row.stepId}\n                isHovered={hoverStepId === row.stepId}\n                onSelectStep={setSelectedStepId}\n                onHoverStep={setHoverStepId}\n                onOpenInput={(timelineRow, trigger) =>\n                  showData({ type: 'step-input', stepId: timelineRow.stepId }, trigger)\n                }\n                onOpenOutput={(timelineRow, trigger) =>\n                  showData({ type: 'step-output', stepId: timelineRow.stepId }, trigger)\n                }\n              />\n            ))}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n"],"names":["useCurrentRun","useWorkflowSelectedStep","useState","useWorkflowStepDetail","useRef","buildTimeline","useAutoscroll","useEffect","jsx","jsxs","Collapsible","cn","raisedSurfaceStyle","CollapsibleTrigger","ChartNoAxesGantt","Txt","ChevronDown","Button","ChevronsDownUp","ChevronsUpDown","CollapsibleContent","WorkflowTimelineRow"],"mappings":"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"}

package/dist/domains/workflows/workflow/workflow-timeline.es.js

@@ -6,8 +6,9 @@ import { useWorkflowSelectedStep } from '../context/use-workflow-selected-step.e
 import { useWorkflowStepDetail } from '../context/workflow-step-detail-context.es.js';
 import { WorkflowTimelineRow } from './workflow-timeline-row.es.js';
 import { buildTimeline } from './workflow-timeline-utils.es.js';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-DhhP5p1j.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-BNUn4644.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { raisedSurfaceStyle } from '../../../primitives/raised-surface.es.js';
 import { useAutoscroll } from '../../../hooks/use-autoscroll.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
@@ -52,7 +53,7 @@ function WorkflowTimeline() {
               children: [
                 /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChartNoAxesGantt, { "aria-hidden": true, className: "size-4 text-muted-foreground" }) }),
                 /* @__PURE__ */ jsx("span", { children: "Timeline" }),
-                /* @__PURE__ */ jsxs("span", { className: "text-meta text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "meta", tone: "muted", children: [
                   rows.length,
                   " events"
                 ] }),

package/dist/domains/workflows/workflow/workflow-timeline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-timeline.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline.tsx"],"sourcesContent":["import { ChartNoAxesGantt, ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useCurrentRun } from '../context/use-current-run';\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { useWorkflowStepDetail } from '../context/workflow-step-detail-context';\nimport { WorkflowTimelineRow } from './workflow-timeline-row';\nimport { buildTimeline } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/utils/cn';\n\nexport function WorkflowTimeline() {\n  const { steps } = useCurrentRun();\n  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = useWorkflowSelectedStep();\n  const [now, setNow] = useState(() => Date.now());\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const [isEnlarged, setIsEnlarged] = useState(false);\n  const { showData } = useWorkflowStepDetail();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const rows = buildTimeline(steps, now);\n  const hasRunning = rows.some(row => row.isRunning);\n  useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });\n\n  useEffect(() => {\n    if (!hasRunning || isCollapsed) {\n      return;\n    }\n\n    const interval = setInterval(() => setNow(Date.now()), 100);\n    return () => clearInterval(interval);\n  }, [hasRunning, isCollapsed]);\n\n  if (rows.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"workflow-timeline\" className=\"relative z-20 shrink-0 px-2 pb-2\">\n      <Collapsible\n        open={!isCollapsed}\n        onOpenChange={open => setIsCollapsed(!open)}\n        className={cn(\n          raisedSurfaceStyle,\n          '@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl',\n        )}\n      >\n        <div className=\"flex items-center\">\n          <CollapsibleTrigger\n            className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3.5 py-2.5 text-caption text-foreground hover:bg-fill-subtle\"\n            aria-label={isCollapsed ? 'Expand timeline' : 'Collapse timeline'}\n          >\n            <span>\n              <ChartNoAxesGantt aria-hidden className=\"size-4 text-muted-foreground\" />\n            </span>\n            <span>Timeline</span>\n            <span className=\"text-meta text-muted-foreground\">{rows.length} events</span>\n            <span className=\"ml-auto\">\n              <ChevronDown\n                aria-hidden\n                className={cn('size-4 transition-transform motion-reduce:transition-none', isCollapsed && '-rotate-90')}\n              />\n            </span>\n          </CollapsibleTrigger>\n          {!isCollapsed && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tooltip={isEnlarged ? 'Restore timeline height' : 'Enlarge timeline'}\n              aria-pressed={isEnlarged}\n              onClick={() => setIsEnlarged(!isEnlarged)}\n              className=\"mr-2 shrink-0\"\n            >\n              {isEnlarged ? <ChevronsDownUp /> : <ChevronsUpDown />}\n            </Button>\n          )}\n        </div>\n        <CollapsibleContent>\n          <div\n            ref={scrollRef}\n            data-testid=\"workflow-timeline-list\"\n            className={cn(\n              'overflow-auto overscroll-contain px-1.5 pb-1.5',\n              isEnlarged ? 'max-h-[min(720px,calc(100dvh-112px))]' : 'max-h-[min(320px,40dvh)]',\n            )}\n          >\n            {rows.map(row => (\n              <WorkflowTimelineRow\n                key={row.stepId}\n                row={row}\n                isSelected={selectedStepId === row.stepId}\n                isHovered={hoverStepId === row.stepId}\n                onSelectStep={setSelectedStepId}\n                onHoverStep={setHoverStepId}\n                onOpenInput={(timelineRow, trigger) =>\n                  showData({ type: 'step-input', stepId: timelineRow.stepId }, trigger)\n                }\n                onOpenOutput={(timelineRow, trigger) =>\n                  showData({ type: 'step-output', stepId: timelineRow.stepId }, trigger)\n                }\n              />\n            ))}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"workflow-timeline.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline.tsx"],"sourcesContent":["import { ChartNoAxesGantt, ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport { useCurrentRun } from '../context/use-current-run';\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { useWorkflowStepDetail } from '../context/workflow-step-detail-context';\nimport { WorkflowTimelineRow } from './workflow-timeline-row';\nimport { buildTimeline } from './workflow-timeline-utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { cn } from '@/utils/cn';\n\nexport function WorkflowTimeline() {\n  const { steps } = useCurrentRun();\n  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = useWorkflowSelectedStep();\n  const [now, setNow] = useState(() => Date.now());\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const [isEnlarged, setIsEnlarged] = useState(false);\n  const { showData } = useWorkflowStepDetail();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const rows = buildTimeline(steps, now);\n  const hasRunning = rows.some(row => row.isRunning);\n  useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });\n\n  useEffect(() => {\n    if (!hasRunning || isCollapsed) {\n      return;\n    }\n\n    const interval = setInterval(() => setNow(Date.now()), 100);\n    return () => clearInterval(interval);\n  }, [hasRunning, isCollapsed]);\n\n  if (rows.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"workflow-timeline\" className=\"relative z-20 shrink-0 px-2 pb-2\">\n      <Collapsible\n        open={!isCollapsed}\n        onOpenChange={open => setIsCollapsed(!open)}\n        className={cn(\n          raisedSurfaceStyle,\n          '@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl',\n        )}\n      >\n        <div className=\"flex items-center\">\n          <CollapsibleTrigger\n            className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3.5 py-2.5 text-caption text-foreground hover:bg-fill-subtle\"\n            aria-label={isCollapsed ? 'Expand timeline' : 'Collapse timeline'}\n          >\n            <span>\n              <ChartNoAxesGantt aria-hidden className=\"size-4 text-muted-foreground\" />\n            </span>\n            <span>Timeline</span>\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\">\n              {rows.length} events\n            </Txt>\n            <span className=\"ml-auto\">\n              <ChevronDown\n                aria-hidden\n                className={cn('size-4 transition-transform motion-reduce:transition-none', isCollapsed && '-rotate-90')}\n              />\n            </span>\n          </CollapsibleTrigger>\n          {!isCollapsed && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tooltip={isEnlarged ? 'Restore timeline height' : 'Enlarge timeline'}\n              aria-pressed={isEnlarged}\n              onClick={() => setIsEnlarged(!isEnlarged)}\n              className=\"mr-2 shrink-0\"\n            >\n              {isEnlarged ? <ChevronsDownUp /> : <ChevronsUpDown />}\n            </Button>\n          )}\n        </div>\n        <CollapsibleContent>\n          <div\n            ref={scrollRef}\n            data-testid=\"workflow-timeline-list\"\n            className={cn(\n              'overflow-auto overscroll-contain px-1.5 pb-1.5',\n              isEnlarged ? 'max-h-[min(720px,calc(100dvh-112px))]' : 'max-h-[min(320px,40dvh)]',\n            )}\n          >\n            {rows.map(row => (\n              <WorkflowTimelineRow\n                key={row.stepId}\n                row={row}\n                isSelected={selectedStepId === row.stepId}\n                isHovered={hoverStepId === row.stepId}\n                onSelectStep={setSelectedStepId}\n                onHoverStep={setHoverStepId}\n                onOpenInput={(timelineRow, trigger) =>\n                  showData({ type: 'step-input', stepId: timelineRow.stepId }, trigger)\n                }\n                onOpenOutput={(timelineRow, trigger) =>\n                  showData({ type: 'step-output', stepId: timelineRow.stepId }, trigger)\n                }\n              />\n            ))}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/workflows/workflow/workflow-trigger-form.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_workflows_workflow_workflowInputData = require('./workflow-input-data.cjs.js');
-const Button = require('../../../Button-CIwF6NHM.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 
 function WorkflowTriggerForm({

package/dist/domains/workflows/workflow/workflow-trigger-form.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Play, Loader2 } from 'lucide-react';
 import { WorkflowInputData } from './workflow-input-data.es.js';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { Icon } from '../../../icons/Icon.es.js';
 
 function WorkflowTriggerForm({

package/dist/domains/workflows/workflow/workflow-trigger-header.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Badge = require('../../../Badge-DFNxcz-r.cjs');
-const copyButton = require('../../../copy-button-1PyYnSGS.cjs');
+const Badge = require('../../../Badge-H8K5WrXg.cjs');
+const copyButton = require('../../../copy-button-C6nXDjBz.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');

package/dist/domains/workflows/workflow/workflow-trigger-header.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { B as Badge } from '../../../Badge-Bzn8Z-_I.js';
-import { C as CopyButton } from '../../../copy-button-u3gk4RoJ.js';
+import { B as Badge } from '../../../Badge-Q_pCeeGW.js';
+import { C as CopyButton } from '../../../copy-button-DbmsTUum.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';

package/dist/domains/workflows/workflow/workflow-trigger.cjs.js

@@ -17,7 +17,7 @@ const domains_workflows_workflow_workflowRunError = require('./workflow-run-erro
 const domains_workflows_workflow_workflowRunHeader = require('./workflow-run-header.cjs.js');
 const domains_workflows_workflow_workflowTriggerForm = require('./workflow-trigger-form.cjs.js');
 const domains_workflows_workflow_workflowTriggerHeader = require('./workflow-trigger-header.cjs.js');
-const scrollArea = require('../../../scroll-area-BzOyuS8Y.cjs');
+const scrollArea = require('../../../scroll-area-CEuf7Omb.cjs');
 const skeleton = require('../../../skeleton-cXUjPrq9.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');

package/dist/domains/workflows/workflow/workflow-trigger.es.js

@@ -13,7 +13,7 @@ import { WorkflowRunError } from './workflow-run-error.es.js';
 import { RunWorkflowHeader } from './workflow-run-header.es.js';
 import { WorkflowTriggerForm } from './workflow-trigger-form.es.js';
 import { InitialWorkflowHeader } from './workflow-trigger-header.es.js';
-import { S as ScrollArea } from '../../../scroll-area-DyTZoISq.js';
+import { S as ScrollArea } from '../../../scroll-area-Ds-fJn5M.js';
 import { S as Skeleton } from '../../../skeleton-BsRAXyh5.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { Icon } from '../../../icons/Icon.es.js';

package/dist/domains/workflows/workflow-status-tone.cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toneByStatus = {
+  success: "success",
+  failed: "destructive",
+  running: "info",
+  suspended: "warning",
+  waiting: "warning",
+  paused: "warning"
+};
+function workflowStatusTone(status) {
+  const tone = status && Object.hasOwn(toneByStatus, status) ? toneByStatus[status] : void 0;
+  return tone ?? "neutral";
+}
+const workflowStatusToneText = {
+  success: "text-success-indicator",
+  destructive: "text-destructive-indicator",
+  info: "text-info-indicator",
+  warning: "text-warning-indicator",
+  neutral: "text-muted-foreground"
+};
+const workflowStatusToneBar = {
+  success: "bg-success-indicator",
+  destructive: "bg-destructive-indicator",
+  info: "bg-info-indicator",
+  warning: "bg-warning-indicator",
+  neutral: "bg-muted-foreground/40"
+};
+
+exports.workflowStatusTone = workflowStatusTone;
+exports.workflowStatusToneBar = workflowStatusToneBar;
+exports.workflowStatusToneText = workflowStatusToneText;
+//# sourceMappingURL=workflow-status-tone.cjs.js.map

package/dist/domains/workflows/workflow-status-tone.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-status-tone.cjs.js","sources":["../../../src/domains/workflows/workflow-status-tone.ts"],"sourcesContent":["export type WorkflowStatusTone = 'success' | 'destructive' | 'info' | 'warning' | 'neutral';\n\nconst toneByStatus: Record<string, WorkflowStatusTone> = {\n  success: 'success',\n  failed: 'destructive',\n  running: 'info',\n  suspended: 'warning',\n  waiting: 'warning',\n  paused: 'warning',\n};\n\nexport function workflowStatusTone(status: string | undefined): WorkflowStatusTone {\n  const tone = status && Object.hasOwn(toneByStatus, status) ? toneByStatus[status] : undefined;\n  return tone ?? 'neutral';\n}\n\nexport const workflowStatusToneText = {\n  success: 'text-success-indicator',\n  destructive: 'text-destructive-indicator',\n  info: 'text-info-indicator',\n  warning: 'text-warning-indicator',\n  neutral: 'text-muted-foreground',\n} satisfies Record<WorkflowStatusTone, string>;\n\nexport const workflowStatusToneBar = {\n  success: 'bg-success-indicator',\n  destructive: 'bg-destructive-indicator',\n  info: 'bg-info-indicator',\n  warning: 'bg-warning-indicator',\n  neutral: 'bg-muted-foreground/40',\n} satisfies Record<WorkflowStatusTone, string>;\n"],"names":[],"mappings":";;;;AAEA,MAAM,YAAA,GAAmD;AAAA,EACvD,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,aAAA;AAAA,EACR,OAAA,EAAS,MAAA;AAAA,EACT,SAAA,EAAW,SAAA;AAAA,EACX,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAEO,SAAS,mBAAmB,MAAA,EAAgD;AACjF,EAAA,MAAM,IAAA,GAAO,UAAU,MAAA,CAAO,MAAA,CAAO,cAAc,MAAM,CAAA,GAAI,YAAA,CAAa,MAAM,CAAA,GAAI,MAAA;AACpF,EAAA,OAAO,IAAA,IAAQ,SAAA;AACjB;AAEO,MAAM,sBAAA,GAAyB;AAAA,EACpC,OAAA,EAAS,wBAAA;AAAA,EACT,WAAA,EAAa,4BAAA;AAAA,EACb,IAAA,EAAM,qBAAA;AAAA,EACN,OAAA,EAAS,wBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,qBAAA,GAAwB;AAAA,EACnC,OAAA,EAAS,sBAAA;AAAA,EACT,WAAA,EAAa,0BAAA;AAAA,EACb,IAAA,EAAM,mBAAA;AAAA,EACN,OAAA,EAAS,sBAAA;AAAA,EACT,OAAA,EAAS;AACX;;;;;;"}

package/dist/domains/workflows/workflow-status-tone.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/domains/workflows/workflow-status-tone'
+export {}

package/dist/domains/workflows/workflow-status-tone.es.js

@@ -0,0 +1,29 @@
+const toneByStatus = {
+  success: "success",
+  failed: "destructive",
+  running: "info",
+  suspended: "warning",
+  waiting: "warning",
+  paused: "warning"
+};
+function workflowStatusTone(status) {
+  const tone = status && Object.hasOwn(toneByStatus, status) ? toneByStatus[status] : void 0;
+  return tone ?? "neutral";
+}
+const workflowStatusToneText = {
+  success: "text-success-indicator",
+  destructive: "text-destructive-indicator",
+  info: "text-info-indicator",
+  warning: "text-warning-indicator",
+  neutral: "text-muted-foreground"
+};
+const workflowStatusToneBar = {
+  success: "bg-success-indicator",
+  destructive: "bg-destructive-indicator",
+  info: "bg-info-indicator",
+  warning: "bg-warning-indicator",
+  neutral: "bg-muted-foreground/40"
+};
+
+export { workflowStatusTone, workflowStatusToneBar, workflowStatusToneText };
+//# sourceMappingURL=workflow-status-tone.es.js.map

package/dist/domains/workflows/workflow-status-tone.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-status-tone.es.js","sources":["../../../src/domains/workflows/workflow-status-tone.ts"],"sourcesContent":["export type WorkflowStatusTone = 'success' | 'destructive' | 'info' | 'warning' | 'neutral';\n\nconst toneByStatus: Record<string, WorkflowStatusTone> = {\n  success: 'success',\n  failed: 'destructive',\n  running: 'info',\n  suspended: 'warning',\n  waiting: 'warning',\n  paused: 'warning',\n};\n\nexport function workflowStatusTone(status: string | undefined): WorkflowStatusTone {\n  const tone = status && Object.hasOwn(toneByStatus, status) ? toneByStatus[status] : undefined;\n  return tone ?? 'neutral';\n}\n\nexport const workflowStatusToneText = {\n  success: 'text-success-indicator',\n  destructive: 'text-destructive-indicator',\n  info: 'text-info-indicator',\n  warning: 'text-warning-indicator',\n  neutral: 'text-muted-foreground',\n} satisfies Record<WorkflowStatusTone, string>;\n\nexport const workflowStatusToneBar = {\n  success: 'bg-success-indicator',\n  destructive: 'bg-destructive-indicator',\n  info: 'bg-info-indicator',\n  warning: 'bg-warning-indicator',\n  neutral: 'bg-muted-foreground/40',\n} satisfies Record<WorkflowStatusTone, string>;\n"],"names":[],"mappings":"AAEA,MAAM,YAAA,GAAmD;AAAA,EACvD,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,aAAA;AAAA,EACR,OAAA,EAAS,MAAA;AAAA,EACT,SAAA,EAAW,SAAA;AAAA,EACX,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAEO,SAAS,mBAAmB,MAAA,EAAgD;AACjF,EAAA,MAAM,IAAA,GAAO,UAAU,MAAA,CAAO,MAAA,CAAO,cAAc,MAAM,CAAA,GAAI,YAAA,CAAa,MAAM,CAAA,GAAI,MAAA;AACpF,EAAA,OAAO,IAAA,IAAQ,SAAA;AACjB;AAEO,MAAM,sBAAA,GAAyB;AAAA,EACpC,OAAA,EAAS,wBAAA;AAAA,EACT,WAAA,EAAa,4BAAA;AAAA,EACb,IAAA,EAAM,qBAAA;AAAA,EACN,OAAA,EAAS,wBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,qBAAA,GAAwB;AAAA,EACnC,OAAA,EAAS,sBAAA;AAAA,EACT,WAAA,EAAa,0BAAA;AAAA,EACb,IAAA,EAAM,mBAAA;AAAA,EACN,OAAA,EAAS,sBAAA;AAAA,EACT,OAAA,EAAS;AACX;;;;"}