@mastra/playground-ui 59.0.0 → 60.0.0-alpha.1

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

@@ -0,0 +1,141 @@
+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-B8nF87ai.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.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"
+};
+function WorkflowTimelineRow({
+  row,
+  isSelected,
+  isHovered,
+  onSelectStep,
+  onHoverStep,
+  onOpenInput,
+  onOpenOutput
+}) {
+  const status = Object.hasOwn(statusPresentation, row.status) ? statusPresentation[row.status] : unknownStatus;
+  const StatusIcon = status.icon;
+  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(
+    "div",
+    {
+      "data-testid": "workflow-timeline-row",
+      "data-workflow-step-key": row.stepId,
+      onMouseEnter: () => !row.isNestedEntry && onHoverStep(row.stepId),
+      onMouseLeave: () => !row.isNestedEntry && onHoverStep(null),
+      className: cn(
+        "grid grid-cols-[minmax(130px,1fr)_minmax(64px,1fr)_56px_64px] items-center gap-3 rounded-md px-2 py-1",
+        "@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",
+        (isSelected || isHovered) && "bg-fill-subtle"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "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",
+            "aria-disabled": row.isNestedEntry,
+            "aria-pressed": isSelected,
+            onClick: () => {
+              if (row.isNestedEntry) return;
+              onSelectStep(row.stepId);
+            },
+            title: row.stepId,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-label": status.label,
+                  className: cn(
+                    "grid size-6 flex-none place-items-center rounded-md border border-border bg-background",
+                    status.color
+                  ),
+                  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: [
+                  /* @__PURE__ */ jsx(CornerDownRight, { "aria-hidden": true, className: "size-3 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: parentPath })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            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]",
+            "aria-hidden": true,
+            children: row.timing && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "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),
+                style: { left: `${row.timing.offsetPct}%`, width: `${row.timing.widthPct}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-right text-meta whitespace-nowrap text-muted-foreground",
+            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: "—" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              tooltip: "View step input",
+              disabled: row.step.input === void 0,
+              onClick: (event) => onOpenInput(row, event.currentTarget),
+              children: /* @__PURE__ */ jsx(ArrowDownToLine, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              tooltip: "View step output",
+              disabled: row.step.output === void 0,
+              onClick: (event) => onOpenOutput(row, event.currentTarget),
+              children: /* @__PURE__ */ jsx(ArrowUpFromLine, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { WorkflowTimelineRow };
+//# sourceMappingURL=workflow-timeline-row.es.js.map

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

@@ -0,0 +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":";;;;;;;AAoBA,MAAM,kBAAA,GAAqB;AAAA,EACzB,OAAA,EAAS,EAAE,KAAA,EAAO,WAAA,EAAa,MAAM,KAAA,EAAO,KAAA,EAAO,gBAAA,EAAkB,GAAA,EAAK,wBAAA,EAAyB;AAAA,EACnG,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,EAAU,MAAM,OAAA,EAAS,KAAA,EAAO,gBAAA,EAAkB,GAAA,EAAK,iBAAA,EAAkB;AAAA,EAC1F,SAAA,EAAW,EAAE,KAAA,EAAO,aAAA,EAAe,MAAM,KAAA,EAAO,KAAA,EAAO,cAAA,EAAgB,GAAA,EAAK,eAAA,EAAgB;AAAA,EAC5F,OAAA,EAAS,EAAE,KAAA,EAAO,SAAA,EAAW,MAAM,KAAA,EAAO,KAAA,EAAO,uBAAA,EAAyB,GAAA,EAAK,wBAAA,EAAyB;AAAA,EACxG,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,EAAU,MAAM,KAAA,EAAO,KAAA,EAAO,uBAAA,EAAyB,GAAA,EAAK,wBAAA,EAAyB;AAAA,EACtG,OAAA,EAAS,EAAE,KAAA,EAAO,SAAA,EAAW,MAAM,WAAA,EAAa,KAAA,EAAO,uBAAA,EAAyB,GAAA,EAAK,wBAAA,EAAyB;AAAA,EAC9G,OAAA,EAAS,EAAE,KAAA,EAAO,SAAA,EAAW,MAAM,OAAA,EAAS,KAAA,EAAO,cAAA,EAAgB,GAAA,EAAK,eAAA,EAAgB;AAAA,EACxF,QAAA,EAAU,EAAE,KAAA,EAAO,UAAA,EAAY,MAAM,WAAA,EAAa,KAAA,EAAO,uBAAA,EAAyB,GAAA,EAAK,wBAAA;AACzF,CAAA;AAEA,MAAM,aAAA,GAAgB;AAAA,EACpB,KAAA,EAAO,oBAAA;AAAA,EACP,IAAA,EAAM,UAAA;AAAA,EACN,KAAA,EAAO,uBAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAYO,SAAS,mBAAA,CAAoB;AAAA,EAClC,GAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,kBAAA,EAAoB,GAAA,CAAI,MAAM,CAAA,GAAI,kBAAA,CAAmB,GAAA,CAAI,MAAM,CAAA,GAAI,aAAA;AAChG,EAAA,MAAM,aAAa,MAAA,CAAO,IAAA;AAC1B,EAAA,MAAM,UAAA,GAAa,IAAI,MAAA,CAAO,KAAA,CAAM,GAAG,GAAA,CAAI,MAAA,CAAO,WAAA,CAAY,GAAG,CAAC,CAAA;AAClE,EAAA,MAAM,KAAA,GAAQ,GAAA,CAAI,aAAA,GAAgB,GAAA,CAAI,MAAA,CAAO,KAAA,CAAM,GAAA,CAAI,MAAA,CAAO,WAAA,CAAY,GAAG,CAAA,GAAI,CAAC,IAAI,GAAA,CAAI,MAAA;AAE1F,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,uBAAA;AAAA,MACZ,0BAAwB,GAAA,CAAI,MAAA;AAAA,MAC5B,cAAc,MAAM,CAAC,IAAI,aAAA,IAAiB,WAAA,CAAY,IAAI,MAAM,CAAA;AAAA,MAChE,cAAc,MAAM,CAAC,GAAA,CAAI,aAAA,IAAiB,YAAY,IAAI,CAAA;AAAA,MAC1D,SAAA,EAAW,EAAA;AAAA,QACT,uGAAA;AAAA,QACA,wLAAA;AAAA,QAAA,CACC,cAAc,SAAA,KAAc;AAAA,OAC/B;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAU,8OAAA;AAAA,YACV,iBAAe,GAAA,CAAI,aAAA;AAAA,YACnB,cAAA,EAAc,UAAA;AAAA,YACd,SAAS,MAAM;AACb,cAAA,IAAI,IAAI,aAAA,EAAe;AACvB,cAAA,YAAA,CAAa,IAAI,MAAM,CAAA;AAAA,YACzB,CAAA;AAAA,YACA,OAAO,GAAA,CAAI,MAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,cAAY,MAAA,CAAO,KAAA;AAAA,kBACnB,SAAA,EAAW,EAAA;AAAA,oBACT,wFAAA;AAAA,oBACA,MAAA,CAAO;AAAA,mBACT;AAAA,kBAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,GAAA,CAAI,MAAA,KAAW,SAAA,IAAa,0BAA0B,CAAA,EAAG;AAAA;AAAA,eAC7G;AAAA,8BACA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,gBACvC,GAAA,CAAI,aAAA,oBACH,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,iEAAA,EACd,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,iBAAA,EAAkB,CAAA;AAAA,kCACzD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,UAAA,EAAW;AAAA,iBAAA,EACzC;AAAA,eAAA,EAEJ;AAAA;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,2LAAA;AAAA,YACV,aAAA,EAAW,IAAA;AAAA,YAEV,cAAI,MAAA,oBACH,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,uBAAA;AAAA,gBACZ,aAAA,EAAa,IAAI,MAAA,CAAO,SAAA;AAAA,gBACxB,YAAA,EAAY,IAAI,MAAA,CAAO,QAAA;AAAA,gBACvB,SAAA,EAAW,EAAA,CAAG,4CAAA,EAA8C,MAAA,CAAO,GAAG,CAAA;AAAA,gBACtE,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,GAAA,CAAI,MAAA,CAAO,SAAS,CAAA,CAAA,CAAA,EAAK,KAAA,EAAO,CAAA,EAAG,GAAA,CAAI,MAAA,CAAO,QAAQ,CAAA,CAAA,CAAA;AAAI;AAAA;AAC9E;AAAA,SAEJ;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8DAAA;AAAA,YACV,KAAA,EAAO,GAAA,CAAI,MAAA,IAAU,GAAA,CAAI,kBAAkB,iDAAA,GAAoD,MAAA;AAAA,YAE9F,QAAA,EAAA,GAAA,CAAI,yBACH,GAAA,CAAC,GAAA,EAAA,EAAI,IAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,MAAA,EAChC,yBAAe,GAAA,CAAI,MAAA,CAAO,UAAU,CAAA,EACvC,CAAA,uBAEC,MAAA,EAAA,EAAK,YAAA,EAAW,sBAAqB,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA,SAE3C;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,IAAA,EAAK,SAAA;AAAA,cACL,OAAA,EAAQ,iBAAA;AAAA,cACR,QAAA,EAAU,GAAA,CAAI,IAAA,CAAK,KAAA,KAAU,MAAA;AAAA,cAC7B,OAAA,EAAS,CAAA,KAAA,KAAS,WAAA,CAAY,GAAA,EAAK,MAAM,aAAa,CAAA;AAAA,cAEtD,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,WACnB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,IAAA,EAAK,SAAA;AAAA,cACL,OAAA,EAAQ,kBAAA;AAAA,cACR,QAAA,EAAU,GAAA,CAAI,IAAA,CAAK,MAAA,KAAW,MAAA;AAAA,cAC9B,OAAA,EAAS,CAAA,KAAA,KAAS,YAAA,CAAa,GAAA,EAAK,MAAM,aAAa,CAAA;AAAA,cAEvD,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA;AACnB,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domains_workflows_context_workflowStepTiming = require('../context/workflow-step-timing.cjs.js');
+
+const isNestedTimelineEntry = (stepId) => stepId.includes(".");
+const isInputKey = (key) => key === "input" || key.endsWith(".input");
+const MIN_WIDTH_PCT = 1;
+function measureStep(step, now) {
+  const span = domains_workflows_context_workflowStepTiming.resolveStepSpan(step);
+  const end = span?.isLive ? Math.max(now, span.start) : span?.end;
+  const measured = span && end !== void 0 ? { start: span.start, end } : void 0;
+  return { span: measured, isLive: span?.isLive ?? false, spansSuspension: span?.spansSuspension ?? false };
+}
+function buildTimeline(steps, now) {
+  const entries = Object.entries(steps).filter(([key]) => !isInputKey(key)).map(([stepId, step]) => ({ stepId, step, ...measureStep(step, now) })).sort((a, b) => (a.span?.start ?? Infinity) - (b.span?.start ?? Infinity) || a.stepId.localeCompare(b.stepId));
+  const spans = entries.flatMap((entry) => entry.span ? [entry.span] : []);
+  const runStart = Math.min(...spans.map((span) => span.start));
+  const runEnd = Math.max(runStart, ...spans.map((span) => span.end));
+  const totalMs = Math.max(runEnd - runStart, 1);
+  return entries.map(({ stepId, step, span, isLive, spansSuspension }) => {
+    let timing;
+    if (span) {
+      const durationMs = span.end - span.start;
+      const offsetPct = Math.min((span.start - runStart) / totalMs * 100, 100 - MIN_WIDTH_PCT);
+      const widthPct = Math.min(Math.max(durationMs / totalMs * 100, MIN_WIDTH_PCT), 100 - offsetPct);
+      timing = { durationMs, offsetPct, widthPct };
+    }
+    return {
+      stepId,
+      step,
+      status: domains_workflows_context_workflowStepTiming.isAwaitingInput(step) ? "suspended" : step.status,
+      timing,
+      spansSuspension,
+      isRunning: isLive,
+      isNestedEntry: isNestedTimelineEntry(stepId)
+    };
+  });
+}
+
+exports.buildTimeline = buildTimeline;
+//# sourceMappingURL=workflow-timeline-utils.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-timeline-utils.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-utils.ts"],"sourcesContent":["import type { Step } from '../context/use-current-run';\nimport { isAwaitingInput, resolveStepSpan } from '../context/workflow-step-timing';\n\nexport interface TimelineRow {\n  stepId: string;\n  step: Step;\n  status: Step['status'];\n  timing?: { offsetPct: number; widthPct: number; durationMs: number };\n  spansSuspension: boolean;\n  isRunning: boolean;\n  isNestedEntry: boolean;\n}\n\nconst isNestedTimelineEntry = (stepId: string) => stepId.includes('.');\n\nconst isInputKey = (key: string) => key === 'input' || key.endsWith('.input');\nconst MIN_WIDTH_PCT = 1;\n\ntype StepSpan = { start: number; end: number };\n\nfunction measureStep(step: Step, now: number) {\n  const span = resolveStepSpan(step);\n  const end = span?.isLive ? Math.max(now, span.start) : span?.end;\n  const measured: StepSpan | undefined = span && end !== undefined ? { start: span.start, end } : undefined;\n  return { span: measured, isLive: span?.isLive ?? false, spansSuspension: span?.spansSuspension ?? false };\n}\n\nexport function buildTimeline(steps: Record<string, Step>, now: number): TimelineRow[] {\n  const entries = Object.entries(steps)\n    .filter(([key]) => !isInputKey(key))\n    .map(([stepId, step]) => ({ stepId, step, ...measureStep(step, now) }))\n    .sort((a, b) => (a.span?.start ?? Infinity) - (b.span?.start ?? Infinity) || a.stepId.localeCompare(b.stepId));\n  const spans = entries.flatMap(entry => (entry.span ? [entry.span] : []));\n  const runStart = Math.min(...spans.map(span => span.start));\n  const runEnd = Math.max(runStart, ...spans.map(span => span.end));\n  const totalMs = Math.max(runEnd - runStart, 1);\n\n  return entries.map(({ stepId, step, span, isLive, spansSuspension }) => {\n    let timing: TimelineRow['timing'];\n    if (span) {\n      const durationMs = span.end - span.start;\n      const offsetPct = Math.min(((span.start - runStart) / totalMs) * 100, 100 - MIN_WIDTH_PCT);\n      const widthPct = Math.min(Math.max((durationMs / totalMs) * 100, MIN_WIDTH_PCT), 100 - offsetPct);\n      timing = { durationMs, offsetPct, widthPct };\n    }\n    return {\n      stepId,\n      step,\n      status: isAwaitingInput(step) ? 'suspended' : step.status,\n      timing,\n      spansSuspension,\n      isRunning: isLive,\n      isNestedEntry: isNestedTimelineEntry(stepId),\n    };\n  });\n}\n"],"names":["resolveStepSpan","isAwaitingInput"],"mappings":";;;;;;AAaA,MAAM,qBAAA,GAAwB,CAAC,MAAA,KAAmB,MAAA,CAAO,SAAS,GAAG,CAAA;AAErE,MAAM,aAAa,CAAC,GAAA,KAAgB,QAAQ,OAAA,IAAW,GAAA,CAAI,SAAS,QAAQ,CAAA;AAC5E,MAAM,aAAA,GAAgB,CAAA;AAItB,SAAS,WAAA,CAAY,MAAY,GAAA,EAAa;AAC5C,EAAA,MAAM,IAAA,GAAOA,6DAAgB,IAAI,CAAA;AACjC,EAAA,MAAM,GAAA,GAAM,MAAM,MAAA,GAAS,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,CAAK,KAAK,CAAA,GAAI,IAAA,EAAM,GAAA;AAC7D,EAAA,MAAM,QAAA,GAAiC,QAAQ,GAAA,KAAQ,MAAA,GAAY,EAAE,KAAA,EAAO,IAAA,CAAK,KAAA,EAAO,GAAA,EAAI,GAAI,MAAA;AAChG,EAAA,OAAO,EAAE,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,IAAA,EAAM,UAAU,KAAA,EAAO,eAAA,EAAiB,IAAA,EAAM,eAAA,IAAmB,KAAA,EAAM;AAC1G;AAEO,SAAS,aAAA,CAAc,OAA6B,GAAA,EAA4B;AACrF,EAAA,MAAM,OAAA,GAAU,OAAO,OAAA,CAAQ,KAAK,EACjC,MAAA,CAAO,CAAC,CAAC,GAAG,CAAA,KAAM,CAAC,WAAW,GAAG,CAAC,EAClC,GAAA,CAAI,CAAC,CAAC,MAAA,EAAQ,IAAI,CAAA,MAAO,EAAE,MAAA,EAAQ,IAAA,EAAM,GAAG,WAAA,CAAY,IAAA,EAAM,GAAG,CAAA,EAAE,CAAE,EACrE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAA,CAAO,CAAA,CAAE,IAAA,EAAM,SAAS,QAAA,KAAa,CAAA,CAAE,MAAM,KAAA,IAAS,QAAA,CAAA,IAAa,EAAE,MAAA,CAAO,aAAA,CAAc,CAAA,CAAE,MAAM,CAAC,CAAA;AAC/G,EAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,OAAA,CAAQ,CAAA,KAAA,KAAU,KAAA,CAAM,IAAA,GAAO,CAAC,KAAA,CAAM,IAAI,CAAA,GAAI,EAAG,CAAA;AACvE,EAAA,MAAM,QAAA,GAAW,KAAK,GAAA,CAAI,GAAG,MAAM,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,KAAK,CAAC,CAAA;AAC1D,EAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,GAAG,MAAM,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,GAAG,CAAC,CAAA;AAChE,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,MAAA,GAAS,UAAU,CAAC,CAAA;AAE7C,EAAA,OAAO,OAAA,CAAQ,IAAI,CAAC,EAAE,QAAQ,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,eAAA,EAAgB,KAAM;AACtE,IAAA,IAAI,MAAA;AACJ,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,GAAM,IAAA,CAAK,KAAA;AACnC,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,CAAA,CAAM,IAAA,CAAK,QAAQ,QAAA,IAAY,OAAA,GAAW,GAAA,EAAK,GAAA,GAAM,aAAa,CAAA;AACzF,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAK,UAAA,GAAa,OAAA,GAAW,GAAA,EAAK,aAAa,CAAA,EAAG,GAAA,GAAM,SAAS,CAAA;AAChG,MAAA,MAAA,GAAS,EAAE,UAAA,EAAY,SAAA,EAAW,QAAA,EAAS;AAAA,IAC7C;AACA,IAAA,OAAO;AAAA,MACL,MAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA,EAAQC,4DAAA,CAAgB,IAAI,CAAA,GAAI,cAAc,IAAA,CAAK,MAAA;AAAA,MACnD,MAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA,EAAW,MAAA;AAAA,MACX,aAAA,EAAe,sBAAsB,MAAM;AAAA,KAC7C;AAAA,EACF,CAAC,CAAA;AACH;;;;"}

package/dist/domains/workflows/workflow/workflow-timeline-utils.d.ts

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

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

@@ -0,0 +1,39 @@
+import { isAwaitingInput, resolveStepSpan } from '../context/workflow-step-timing.es.js';
+
+const isNestedTimelineEntry = (stepId) => stepId.includes(".");
+const isInputKey = (key) => key === "input" || key.endsWith(".input");
+const MIN_WIDTH_PCT = 1;
+function measureStep(step, now) {
+  const span = resolveStepSpan(step);
+  const end = span?.isLive ? Math.max(now, span.start) : span?.end;
+  const measured = span && end !== void 0 ? { start: span.start, end } : void 0;
+  return { span: measured, isLive: span?.isLive ?? false, spansSuspension: span?.spansSuspension ?? false };
+}
+function buildTimeline(steps, now) {
+  const entries = Object.entries(steps).filter(([key]) => !isInputKey(key)).map(([stepId, step]) => ({ stepId, step, ...measureStep(step, now) })).sort((a, b) => (a.span?.start ?? Infinity) - (b.span?.start ?? Infinity) || a.stepId.localeCompare(b.stepId));
+  const spans = entries.flatMap((entry) => entry.span ? [entry.span] : []);
+  const runStart = Math.min(...spans.map((span) => span.start));
+  const runEnd = Math.max(runStart, ...spans.map((span) => span.end));
+  const totalMs = Math.max(runEnd - runStart, 1);
+  return entries.map(({ stepId, step, span, isLive, spansSuspension }) => {
+    let timing;
+    if (span) {
+      const durationMs = span.end - span.start;
+      const offsetPct = Math.min((span.start - runStart) / totalMs * 100, 100 - MIN_WIDTH_PCT);
+      const widthPct = Math.min(Math.max(durationMs / totalMs * 100, MIN_WIDTH_PCT), 100 - offsetPct);
+      timing = { durationMs, offsetPct, widthPct };
+    }
+    return {
+      stepId,
+      step,
+      status: isAwaitingInput(step) ? "suspended" : step.status,
+      timing,
+      spansSuspension,
+      isRunning: isLive,
+      isNestedEntry: isNestedTimelineEntry(stepId)
+    };
+  });
+}
+
+export { buildTimeline };
+//# sourceMappingURL=workflow-timeline-utils.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-timeline-utils.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-timeline-utils.ts"],"sourcesContent":["import type { Step } from '../context/use-current-run';\nimport { isAwaitingInput, resolveStepSpan } from '../context/workflow-step-timing';\n\nexport interface TimelineRow {\n  stepId: string;\n  step: Step;\n  status: Step['status'];\n  timing?: { offsetPct: number; widthPct: number; durationMs: number };\n  spansSuspension: boolean;\n  isRunning: boolean;\n  isNestedEntry: boolean;\n}\n\nconst isNestedTimelineEntry = (stepId: string) => stepId.includes('.');\n\nconst isInputKey = (key: string) => key === 'input' || key.endsWith('.input');\nconst MIN_WIDTH_PCT = 1;\n\ntype StepSpan = { start: number; end: number };\n\nfunction measureStep(step: Step, now: number) {\n  const span = resolveStepSpan(step);\n  const end = span?.isLive ? Math.max(now, span.start) : span?.end;\n  const measured: StepSpan | undefined = span && end !== undefined ? { start: span.start, end } : undefined;\n  return { span: measured, isLive: span?.isLive ?? false, spansSuspension: span?.spansSuspension ?? false };\n}\n\nexport function buildTimeline(steps: Record<string, Step>, now: number): TimelineRow[] {\n  const entries = Object.entries(steps)\n    .filter(([key]) => !isInputKey(key))\n    .map(([stepId, step]) => ({ stepId, step, ...measureStep(step, now) }))\n    .sort((a, b) => (a.span?.start ?? Infinity) - (b.span?.start ?? Infinity) || a.stepId.localeCompare(b.stepId));\n  const spans = entries.flatMap(entry => (entry.span ? [entry.span] : []));\n  const runStart = Math.min(...spans.map(span => span.start));\n  const runEnd = Math.max(runStart, ...spans.map(span => span.end));\n  const totalMs = Math.max(runEnd - runStart, 1);\n\n  return entries.map(({ stepId, step, span, isLive, spansSuspension }) => {\n    let timing: TimelineRow['timing'];\n    if (span) {\n      const durationMs = span.end - span.start;\n      const offsetPct = Math.min(((span.start - runStart) / totalMs) * 100, 100 - MIN_WIDTH_PCT);\n      const widthPct = Math.min(Math.max((durationMs / totalMs) * 100, MIN_WIDTH_PCT), 100 - offsetPct);\n      timing = { durationMs, offsetPct, widthPct };\n    }\n    return {\n      stepId,\n      step,\n      status: isAwaitingInput(step) ? 'suspended' : step.status,\n      timing,\n      spansSuspension,\n      isRunning: isLive,\n      isNestedEntry: isNestedTimelineEntry(stepId),\n    };\n  });\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_workflows_context_useCurrentRun = require('../context/use-current-run.cjs.js');
+const domains_workflows_context_useWorkflowSelectedStep = require('../context/use-workflow-selected-step.cjs.js');
+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-BAMnPqos.cjs');
+const collapsible = require('../../../collapsible-BFSJouuI.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');
+
+function WorkflowTimeline() {
+  const { steps } = domains_workflows_context_useCurrentRun.useCurrentRun();
+  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = domains_workflows_context_useWorkflowSelectedStep.useWorkflowSelectedStep();
+  const [now, setNow] = React.useState(() => Date.now());
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [isEnlarged, setIsEnlarged] = React.useState(false);
+  const { showData } = domains_workflows_context_workflowStepDetailContext.useWorkflowStepDetail();
+  const scrollRef = React.useRef(null);
+  const rows = domains_workflows_workflow_workflowTimelineUtils.buildTimeline(steps, now);
+  const hasRunning = rows.some((row) => row.isRunning);
+  hooks_useAutoscroll.useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });
+  React.useEffect(() => {
+    if (!hasRunning || isCollapsed) {
+      return;
+    }
+    const interval = setInterval(() => setNow(Date.now()), 100);
+    return () => clearInterval(interval);
+  }, [hasRunning, isCollapsed]);
+  if (rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "workflow-timeline", className: "relative z-20 shrink-0 px-2 pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    collapsible.Collapsible,
+    {
+      open: !isCollapsed,
+      onOpenChange: (open) => setIsCollapsed(!open),
+      className: utils_cn.cn(
+        primitives_raisedSurface.raisedSurfaceStyle,
+        "@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            collapsible.CollapsibleTrigger,
+            {
+              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",
+              "aria-label": isCollapsed ? "Expand timeline" : "Collapse timeline",
+              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: [
+                  rows.length,
+                  " events"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDown,
+                  {
+                    "aria-hidden": true,
+                    className: utils_cn.cn("size-4 transition-transform motion-reduce:transition-none", isCollapsed && "-rotate-90")
+                  }
+                ) })
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              tooltip: isEnlarged ? "Restore timeline height" : "Enlarge timeline",
+              "aria-pressed": isEnlarged,
+              onClick: () => setIsEnlarged(!isEnlarged),
+              className: "mr-2 shrink-0",
+              children: isEnlarged ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: scrollRef,
+            "data-testid": "workflow-timeline-list",
+            className: utils_cn.cn(
+              "overflow-auto overscroll-contain px-1.5 pb-1.5",
+              isEnlarged ? "max-h-[min(720px,calc(100dvh-112px))]" : "max-h-[min(320px,40dvh)]"
+            ),
+            children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+              domains_workflows_workflow_workflowTimelineRow.WorkflowTimelineRow,
+              {
+                row,
+                isSelected: selectedStepId === row.stepId,
+                isHovered: hoverStepId === row.stepId,
+                onSelectStep: setSelectedStepId,
+                onHoverStep: setHoverStepId,
+                onOpenInput: (timelineRow, trigger) => showData({ type: "step-input", stepId: timelineRow.stepId }, trigger),
+                onOpenOutput: (timelineRow, trigger) => showData({ type: "step-output", stepId: timelineRow.stepId }, trigger)
+              },
+              row.stepId
+            ))
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+
+exports.WorkflowTimeline = WorkflowTimeline;
+//# sourceMappingURL=workflow-timeline.cjs.js.map

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

@@ -0,0 +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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"}

package/dist/domains/workflows/workflow/workflow-timeline.d.ts

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

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

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChartNoAxesGantt, ChevronDown, ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { useCurrentRun } from '../context/use-current-run.es.js';
+import { useWorkflowSelectedStep } from '../context/use-workflow-selected-step.es.js';
+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-B8nF87ai.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-DhhP5p1j.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';
+
+function WorkflowTimeline() {
+  const { steps } = useCurrentRun();
+  const { selectedStepId, hoverStepId, setSelectedStepId, setHoverStepId } = useWorkflowSelectedStep();
+  const [now, setNow] = useState(() => Date.now());
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isEnlarged, setIsEnlarged] = useState(false);
+  const { showData } = useWorkflowStepDetail();
+  const scrollRef = useRef(null);
+  const rows = buildTimeline(steps, now);
+  const hasRunning = rows.some((row) => row.isRunning);
+  useAutoscroll(scrollRef, { enabled: hasRunning && !isCollapsed });
+  useEffect(() => {
+    if (!hasRunning || isCollapsed) {
+      return;
+    }
+    const interval = setInterval(() => setNow(Date.now()), 100);
+    return () => clearInterval(interval);
+  }, [hasRunning, isCollapsed]);
+  if (rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { "data-testid": "workflow-timeline", className: "relative z-20 shrink-0 px-2 pb-2", children: /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: !isCollapsed,
+      onOpenChange: (open) => setIsCollapsed(!open),
+      className: cn(
+        raisedSurfaceStyle,
+        "@container/workflow-timeline pointer-events-auto overflow-hidden rounded-xl"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxs(
+            CollapsibleTrigger,
+            {
+              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",
+              "aria-label": isCollapsed ? "Expand timeline" : "Collapse timeline",
+              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: [
+                  rows.length,
+                  " events"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    "aria-hidden": true,
+                    className: cn("size-4 transition-transform motion-reduce:transition-none", isCollapsed && "-rotate-90")
+                  }
+                ) })
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              tooltip: isEnlarged ? "Restore timeline height" : "Enlarge timeline",
+              "aria-pressed": isEnlarged,
+              onClick: () => setIsEnlarged(!isEnlarged),
+              className: "mr-2 shrink-0",
+              children: isEnlarged ? /* @__PURE__ */ jsx(ChevronsDownUp, {}) : /* @__PURE__ */ jsx(ChevronsUpDown, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            "data-testid": "workflow-timeline-list",
+            className: cn(
+              "overflow-auto overscroll-contain px-1.5 pb-1.5",
+              isEnlarged ? "max-h-[min(720px,calc(100dvh-112px))]" : "max-h-[min(320px,40dvh)]"
+            ),
+            children: rows.map((row) => /* @__PURE__ */ jsx(
+              WorkflowTimelineRow,
+              {
+                row,
+                isSelected: selectedStepId === row.stepId,
+                isHovered: hoverStepId === row.stepId,
+                onSelectStep: setSelectedStepId,
+                onHoverStep: setHoverStepId,
+                onOpenInput: (timelineRow, trigger) => showData({ type: "step-input", stepId: timelineRow.stepId }, trigger),
+                onOpenOutput: (timelineRow, trigger) => showData({ type: "step-output", stepId: timelineRow.stepId }, trigger)
+              },
+              row.stepId
+            ))
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+
+export { WorkflowTimeline };
+//# sourceMappingURL=workflow-timeline.es.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,63 @@
+'use strict';
+
+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-BAMnPqos.cjs');
+const icons_Icon = require('../../../icons/Icon.cjs.js');
+
+function WorkflowTriggerForm({
+  zodSchema,
+  isStreaming,
+  onExecute,
+  defaultValues,
+  isViewingRun,
+  isProcessorWorkflow,
+  submitActions,
+  leftActions,
+  headingSlot,
+  collapsible,
+  submitButtonLabel = "Run"
+}) {
+  if (isViewingRun) {
+    return headingSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children: headingSlot });
+  }
+  if (zodSchema) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      domains_workflows_workflow_workflowInputData.WorkflowInputData,
+      {
+        schema: zodSchema,
+        defaultValues,
+        isSubmitLoading: isStreaming,
+        submitButtonLabel,
+        inputTypeLabel: "Next run input",
+        submitButtonVariant: "primary",
+        submitButtonIcon: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, {}) }),
+        onSubmit: onExecute,
+        isProcessorWorkflow,
+        submitActions,
+        leftActions,
+        headingSlot,
+        collapsible
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    headingSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border/50 pb-3", children: headingSlot }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-1 pt-3", children: [
+      leftActions ?? /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        submitActions,
+        /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "primary", disabled: isStreaming, onClick: () => onExecute(null), children: [
+          isStreaming ? /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, {}) }),
+          submitButtonLabel
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+exports.WorkflowTriggerForm = WorkflowTriggerForm;
+//# sourceMappingURL=workflow-trigger-form.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-trigger-form.cjs.js","sources":["../../../../src/domains/workflows/workflow/workflow-trigger-form.tsx"],"sourcesContent":["import { Loader2, Play } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { ZodSchema } from 'zod';\n\nimport { WorkflowInputData } from './workflow-input-data';\nimport { Button } from '@/ds/components/Button';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport interface WorkflowTriggerFormProps {\n  zodSchema: ZodSchema | null;\n  isStreaming: boolean;\n  onExecute: (data: any) => void;\n  defaultValues?: any;\n  isViewingRun?: boolean;\n  isProcessorWorkflow?: boolean;\n  submitActions?: ReactNode;\n  leftActions?: ReactNode;\n  headingSlot?: ReactNode;\n  collapsible?: boolean;\n  submitButtonLabel?: string;\n}\n\nexport function WorkflowTriggerForm({\n  zodSchema,\n  isStreaming,\n  onExecute,\n  defaultValues,\n  isViewingRun,\n  isProcessorWorkflow,\n  submitActions,\n  leftActions,\n  headingSlot,\n  collapsible,\n  submitButtonLabel = 'Run',\n}: WorkflowTriggerFormProps) {\n  if (isViewingRun) {\n    return headingSlot && <div className=\"pb-3\">{headingSlot}</div>;\n  }\n\n  if (zodSchema) {\n    return (\n      <WorkflowInputData\n        schema={zodSchema}\n        defaultValues={defaultValues}\n        isSubmitLoading={isStreaming}\n        submitButtonLabel={submitButtonLabel}\n        inputTypeLabel=\"Next run input\"\n        submitButtonVariant=\"primary\"\n        submitButtonIcon={\n          <Icon>\n            <Play />\n          </Icon>\n        }\n        onSubmit={onExecute}\n        isProcessorWorkflow={isProcessorWorkflow}\n        submitActions={submitActions}\n        leftActions={leftActions}\n        headingSlot={headingSlot}\n        collapsible={collapsible}\n      />\n    );\n  }\n\n  return (\n    <>\n      {headingSlot && <div className=\"border-b border-border/50 pb-3\">{headingSlot}</div>}\n      <div className=\"flex items-center justify-between gap-1 pt-3\">\n        {leftActions ?? <div />}\n        <div className=\"flex items-center gap-1\">\n          {submitActions}\n          <Button variant=\"primary\" disabled={isStreaming} onClick={() => onExecute(null)}>\n            {isStreaming ? (\n              <Icon>\n                <Loader2 className=\"animate-spin\" />\n              </Icon>\n            ) : (\n              <Icon>\n                <Play />\n              </Icon>\n            )}\n            {submitButtonLabel}\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["jsx","WorkflowInputData","Icon","Play","jsxs","Fragment","Button","Loader2"],"mappings":";;;;;;;;;;AAsBO,SAAS,mBAAA,CAAoB;AAAA,EAClC,SAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA,GAAoB;AACtB,CAAA,EAA6B;AAC3B,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,OAAO,WAAA,oBAAeA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAQ,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EAC3D;AAEA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACEA,cAAA;AAAA,MAACC,8DAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,SAAA;AAAA,QACR,aAAA;AAAA,QACA,eAAA,EAAiB,WAAA;AAAA,QACjB,iBAAA;AAAA,QACA,cAAA,EAAe,gBAAA;AAAA,QACf,mBAAA,EAAoB,SAAA;AAAA,QACpB,gBAAA,kBACED,cAAA,CAACE,eAAA,EAAA,EACC,QAAA,kBAAAF,cAAA,CAACG,oBAAK,CAAA,EACR,CAAA;AAAA,QAEF,QAAA,EAAU,SAAA;AAAA,QACV,mBAAA;AAAA,QACA,aAAA;AAAA,QACA,WAAA;AAAA,QACA,WAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeL,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC7EI,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8CAAA,EACZ,QAAA,EAAA;AAAA,MAAA,WAAA,mCAAgB,KAAA,EAAA,EAAI,CAAA;AAAA,sBACrBA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,wBACDA,eAAA,CAACE,aAAA,EAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,QAAA,EAAU,aAAa,OAAA,EAAS,MAAM,SAAA,CAAU,IAAI,CAAA,EAC3E,QAAA,EAAA;AAAA,UAAA,WAAA,mBACCN,cAAA,CAACE,eAAA,EAAA,EACC,QAAA,kBAAAF,cAAA,CAACO,mBAAA,EAAA,EAAQ,SAAA,EAAU,cAAA,EAAe,CAAA,EACpC,CAAA,mBAEAP,cAAA,CAACE,eAAA,EAAA,EACC,QAAA,kBAAAF,cAAA,CAACG,gBAAA,EAAA,EAAK,CAAA,EACR,CAAA;AAAA,UAED;AAAA,SAAA,EACH;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}