@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/dist/modules/workflows/components/WorkflowNodeCard.js

@@ -1,47 +1,246 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Play, Pause, Circle } from "lucide-react";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Check,
+  Play,
+  Pause,
+  Circle,
+  CircleAlert,
+  Hourglass,
+  LoaderCircle,
+  ShieldMinus,
+  TriangleAlert,
+  XCircle,
+  Trash2
+} from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { STATUS_COLORS } from "../lib/status-colors.js";
-import { NODE_TYPE_ICONS, NODE_TYPE_COLORS } from "../lib/node-type-icons.js";
+import { formatElapsedSince } from "../lib/run-duration.js";
+import { NODE_TYPE_ICONS, NODE_TYPE_ACCENTS, NODE_TYPE_COLORS, NODE_TYPE_LABELS } from "../lib/node-type-icons.js";
+import { NODE_MAX_WIDTH, NODE_MIN_WIDTH } from "../lib/node-geometry.js";
+import {
+  NODE_CONFIG_SUMMARY_SEPARATOR,
+  resolveNodeConfigSummarySegment
+} from "../lib/node-config-summary.js";
+const NODE_WIDTH = NODE_MIN_WIDTH;
+const WORKFLOW_NODE_DELETE_EVENT = "workflow-node:delete";
+const WORKFLOW_NODE_TITLE_SLOT = "workflow-node-title";
+const STATUS_LABEL_FALLBACKS = {
+  completed: "Completed",
+  in_progress: "In progress",
+  pending: "Pending",
+  failed: "Failed",
+  paused: "Paused",
+  not_started: "Not started",
+  error: "Has errors",
+  working: "Working",
+  waiting: "Waiting",
+  needs_attention: "Needs attention"
+};
+const STATUS_ICONS = {
+  completed: Check,
+  in_progress: Play,
+  pending: Pause,
+  failed: XCircle,
+  paused: Pause,
+  not_started: Circle,
+  error: CircleAlert,
+  working: LoaderCircle,
+  waiting: Hourglass,
+  needs_attention: TriangleAlert
+};
+const STATUS_MOTION = {
+  working: "animate-spin motion-reduce:animate-none"
+};
+function requestWorkflowNodeDeletion(nodeId) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(WORKFLOW_NODE_DELETE_EVENT, { detail: { nodeId } }));
+}
 function WorkflowNodeCard({
   title,
   description,
   status = "not_started",
   nodeType,
-  selected = false
+  selected = false,
+  hasError = false,
+  errorCount,
+  hasCompensation = false,
+  nodeId,
+  editable = false,
+  variant = "card",
+  footer,
+  summary,
+  runReason = null,
+  runStartedAt = null
 }) {
+  const t = useT();
+  const resolvedSummary = summary?.map((segment) => ({
+    segment,
+    text: resolveNodeConfigSummarySegment(segment, t)
+  }));
   const isEditMode = status === "not_started";
   const colors = STATUS_COLORS[status];
-  const StatusIcon = {
-    completed: Check,
-    in_progress: Play,
-    pending: Pause,
-    not_started: Circle
-  }[status];
+  const StatusIcon = STATUS_ICONS[status];
   const NodeTypeIcon = NODE_TYPE_ICONS[nodeType];
   const nodeTypeIconColor = NODE_TYPE_COLORS[nodeType];
+  const accentClass = selected || hasError ? "" : NODE_TYPE_ACCENTS[nodeType];
+  const nodeTypeLabel = NODE_TYPE_LABELS[nodeType]?.title ?? nodeType;
+  const showDelete = editable && !!nodeId;
+  const backgroundClass = isEditMode ? "bg-card" : colors.bg;
+  const borderClass = selected ? "border-primary" : hasError ? "border-status-error-border" : isEditMode ? "border-border" : colors.border;
+  const compensationBadgeLabel = t(
+    "workflows.compensation.nodeBadge",
+    "Leaving this step schedules compensation"
+  );
+  const errorBadgeLabel = t(
+    "workflows.visualEditor.problems.nodeErrorBadge",
+    "{count} validation error(s)",
+    { count: typeof errorCount === "number" && errorCount > 0 ? errorCount : 1 }
+  );
+  const statusLabel = t(`workflows.nodeStatus.${status}`, STATUS_LABEL_FALLBACKS[status]);
+  const cardLabel = t(
+    "workflows.visualEditor.nodeCardLabel",
+    "{type}: {title} \u2014 {status}",
+    { type: nodeTypeLabel, title, status: statusLabel }
+  );
+  const statusGlyph = isEditMode ? null : /* @__PURE__ */ jsx(
+    StatusIcon,
+    {
+      className: `h-4 w-4 shrink-0 ${colors.icon} ${STATUS_MOTION[status] ?? ""}`.trimEnd(),
+      "aria-hidden": "true"
+    }
+  );
+  const reasonText = runReason ? t(runReason.key, runReason.fallback, runReason.params) : null;
+  const elapsed = runStartedAt ? formatElapsedSince(runStartedAt, null) : null;
+  const reasonLine = reasonText ? /* @__PURE__ */ jsxs("p", { className: `mt-1 truncate text-xs ${colors.text}`, title: reasonText, children: [
+    reasonText,
+    elapsed ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ` \xB7 ${t("workflows.runState.elapsed", "running for {duration}", { duration: elapsed })}` }) : null
+  ] }) : null;
+  const badges = /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasError && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "status",
+        "aria-label": errorBadgeLabel,
+        title: errorBadgeLabel,
+        className: "absolute -top-2 -right-2 z-10 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-background bg-status-error-icon px-1 text-xs font-bold text-primary-foreground",
+        children: typeof errorCount === "number" && errorCount > 0 ? errorCount : /* @__PURE__ */ jsx(CircleAlert, { className: "h-3 w-3", "aria-hidden": "true" })
+      }
+    ),
+    hasCompensation && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "img",
+        "data-testid": "workflow-node-compensation-badge",
+        "aria-label": compensationBadgeLabel,
+        title: compensationBadgeLabel,
+        className: "absolute -bottom-2 -right-2 z-10 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-background bg-status-warning-bg px-1 text-status-warning-text",
+        children: /* @__PURE__ */ jsx(ShieldMinus, { className: "h-3 w-3", "aria-hidden": "true" })
+      }
+    )
+  ] });
+  const deleteButton = showDelete ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": t("workflows.visualEditor.deleteStep", "Delete step"),
+      className: "nodrag nopan -mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-status-error-icon focus-visible:opacity-100 group-hover:opacity-100",
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        requestWorkflowNodeDeletion(nodeId);
+      },
+      children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+    }
+  ) : null;
+  const elevationClass = selected ? "ring-2 ring-primary" : "shadow-sm hover:shadow-md";
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": cardLabel,
+        "data-node-status": status,
+        "data-node-variant": "pill",
+        title: description,
+        style: { maxWidth: NODE_MAX_WIDTH },
+        className: `
+          group relative inline-flex w-fit items-center gap-2 rounded-full border px-3 py-1.5
+          ${backgroundClass} ${borderClass}
+          transition-all duration-200 ${elevationClass}
+        `,
+        children: [
+          badges,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel }),
+          /* @__PURE__ */ jsx(NodeTypeIcon, { className: `h-3.5 w-3.5 shrink-0 ${nodeTypeIconColor}`, "aria-hidden": "true" }),
+          statusGlyph,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": WORKFLOW_NODE_TITLE_SLOT,
+              className: `truncate text-sm font-semibold leading-snug ${colors.text}`,
+              children: title
+            }
+          ),
+          deleteButton
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      role: "group",
+      "aria-label": cardLabel,
+      "data-node-status": status,
+      "data-node-variant": "card",
+      style: { minWidth: NODE_MIN_WIDTH, maxWidth: NODE_MAX_WIDTH },
       className: `
-        w-[280px] rounded-xl border-2
-        ${isEditMode ? "bg-card border-border" : `${colors.bg} ${colors.border}`}
-        transition-all duration-200 relative
-        ${selected ? "shadow-[0_0_0_3px_rgba(0,128,254,0.15)] border-[#0080FE]" : "shadow-sm hover:shadow-md"}
+        group w-fit rounded-lg border border-t-4 ${accentClass}
+        ${backgroundClass} ${borderClass}
+        transition-all duration-200 relative ${elevationClass}
       `,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsx(NodeTypeIcon, { className: `w-3.5 h-3.5 ${nodeTypeIconColor}` }) }),
-        /* @__PURE__ */ jsxs("div", { className: "p-4 flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 mt-0.5 ${colors.icon}`, children: /* @__PURE__ */ jsx(StatusIcon, { className: "w-5 h-5" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pr-4", children: [
-            /* @__PURE__ */ jsx("h3", { className: `font-semibold text-base ${colors.text} truncate`, children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground line-clamp-2", children: description })
+        badges,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2.5 pt-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(NodeTypeIcon, { className: `h-3 w-3 shrink-0 ${nodeTypeIconColor}`, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-overline font-semibold uppercase tracking-wide text-muted-foreground", children: nodeTypeLabel })
+          ] }),
+          deleteButton
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 px-2.5 pb-2.5 pt-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel }),
+          statusGlyph ? /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: statusGlyph }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                "data-slot": WORKFLOW_NODE_TITLE_SLOT,
+                className: `break-words text-sm font-semibold leading-snug ${colors.text}`,
+                children: title
+              }
+            ),
+            resolvedSummary && resolvedSummary.length > 0 ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", title: description, children: resolvedSummary.map(({ segment, text }, index) => /* @__PURE__ */ jsxs("span", { children: [
+              index > 0 && NODE_CONFIG_SUMMARY_SEPARATOR,
+              /* @__PURE__ */ jsx("span", { className: segment.mono ? "font-mono" : void 0, children: text })
+            ] }, `${segment.translationKey ?? segment.text}-${index}`)) }) : description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: description }) : null,
+            reasonLine
           ] })
-        ] })
+        ] }),
+        footer
       ]
     }
   );
 }
 export {
-  WorkflowNodeCard
+  NODE_MAX_WIDTH,
+  NODE_MIN_WIDTH,
+  NODE_WIDTH,
+  STATUS_ICONS,
+  WORKFLOW_NODE_DELETE_EVENT,
+  WORKFLOW_NODE_TITLE_SLOT,
+  WorkflowNodeCard,
+  requestWorkflowNodeDeletion
 };
 //# sourceMappingURL=WorkflowNodeCard.js.map

package/dist/modules/workflows/components/WorkflowNodeCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/WorkflowNodeCard.tsx"],
-  "sourcesContent": ["import { Check, Play, Pause, Circle } from 'lucide-react'\nimport { STATUS_COLORS, WorkflowStatus } from '../lib/status-colors'\nimport { NODE_TYPE_ICONS, NODE_TYPE_COLORS, NodeType } from '../lib/node-type-icons'\n\ninterface WorkflowNodeCardProps {\n  title: string\n  description?: string\n  status?: WorkflowStatus\n  nodeType: NodeType\n  selected?: boolean\n}\n\nexport function WorkflowNodeCard({\n  title,\n  description,\n  status = 'not_started',\n  nodeType,\n  selected = false,\n}: WorkflowNodeCardProps) {\n  // In edit mode (not_started), use white background\n  const isEditMode = status === 'not_started'\n  const colors = STATUS_COLORS[status]\n\n  const StatusIcon = {\n    completed: Check,\n    in_progress: Play,\n    pending: Pause,\n    not_started: Circle,\n  }[status]\n\n  const NodeTypeIcon = NODE_TYPE_ICONS[nodeType]\n  const nodeTypeIconColor = NODE_TYPE_COLORS[nodeType]\n\n  return (\n    <div\n      className={`\n        w-[280px] rounded-xl border-2\n        ${isEditMode ? 'bg-card border-border' : `${colors.bg} ${colors.border}`}\n        transition-all duration-200 relative\n        ${\n          selected\n            ? 'shadow-[0_0_0_3px_rgba(0,128,254,0.15)] border-[#0080FE]'\n            : 'shadow-sm hover:shadow-md'\n        }\n      `}\n    >\n      {/* Subtle node type indicator in upper right */}\n      <div className=\"absolute top-2 right-2\">\n        <NodeTypeIcon className={`w-3.5 h-3.5 ${nodeTypeIconColor}`} />\n      </div>\n\n      <div className=\"p-4 flex items-start gap-3\">\n        <div className={`flex-shrink-0 mt-0.5 ${colors.icon}`}>\n          <StatusIcon className=\"w-5 h-5\" />\n        </div>\n        <div className=\"flex-1 min-w-0 pr-4\">\n          <h3 className={`font-semibold text-base ${colors.text} truncate`}>\n            {title}\n          </h3>\n          {description && (\n            <p className=\"mt-1 text-sm text-muted-foreground line-clamp-2\">\n              {description}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "AAgDQ,cAOA,YAPA;AAhDR,SAAS,OAAO,MAAM,OAAO,cAAc;AAC3C,SAAS,qBAAqC;AAC9C,SAAS,iBAAiB,wBAAkC;AAUrD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AACb,GAA0B;AAExB,QAAM,aAAa,WAAW;AAC9B,QAAM,SAAS,cAAc,MAAM;AAEnC,QAAM,aAAa;AAAA,IACjB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,EACf,EAAE,MAAM;AAER,QAAM,eAAe,gBAAgB,QAAQ;AAC7C,QAAM,oBAAoB,iBAAiB,QAAQ;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,aAAa,0BAA0B,GAAG,OAAO,EAAE,IAAI,OAAO,MAAM,EAAE;AAAA;AAAA,UAGtE,WACI,6DACA,2BACN;AAAA;AAAA,MAIF;AAAA,4BAAC,SAAI,WAAU,0BACb,8BAAC,gBAAa,WAAW,eAAe,iBAAiB,IAAI,GAC/D;AAAA,QAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,8BAAC,SAAI,WAAW,wBAAwB,OAAO,IAAI,IACjD,8BAAC,cAAW,WAAU,WAAU,GAClC;AAAA,UACA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,QAAG,WAAW,2BAA2B,OAAO,IAAI,aAClD,iBACH;AAAA,YACC,eACC,oBAAC,OAAE,WAAU,mDACV,uBACH;AAAA,aAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport type React from 'react'\nimport {\n  Check,\n  Play,\n  Pause,\n  Circle,\n  CircleAlert,\n  Hourglass,\n  LoaderCircle,\n  ShieldMinus,\n  TriangleAlert,\n  XCircle,\n  Trash2,\n} from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { STATUS_COLORS, WorkflowStatus } from '../lib/status-colors'\nimport type { StepReason } from '../lib/step-presentation'\nimport { formatElapsedSince } from '../lib/run-duration'\nimport { NODE_TYPE_ICONS, NODE_TYPE_ACCENTS, NODE_TYPE_COLORS, NODE_TYPE_LABELS, NodeType } from '../lib/node-type-icons'\nimport { NODE_MAX_WIDTH, NODE_MIN_WIDTH } from '../lib/node-geometry'\nimport {\n  NODE_CONFIG_SUMMARY_SEPARATOR,\n  resolveNodeConfigSummarySegment,\n  type NodeConfigSummarySegment,\n} from '../lib/node-config-summary'\n\n/**\n * Rendered node sizing. Cards size to their content between these bounds and\n * the dagre layout reserves the same bounds; both read `lib/node-geometry`, so\n * there is one place to change them. Re-exported here because third-party code\n * has always imported them from this module.\n */\nexport { NODE_MIN_WIDTH, NODE_MAX_WIDTH }\n/** @deprecated kept for back-compat; prefer NODE_MIN_WIDTH/NODE_MAX_WIDTH. */\nexport const NODE_WIDTH = NODE_MIN_WIDTH\n\n/**\n * Dispatched when a node's inline trash button is clicked. The visual editor\n * listens for this on `window` and runs its confirm + edge-cleanup delete flow,\n * so the card stays decoupled from the page (no callback threaded through every\n * node component or the graph-utils data transform).\n */\nexport const WORKFLOW_NODE_DELETE_EVENT = 'workflow-node:delete'\n\n/**\n * `data-slot` marking the element that carries a node's OWN label.\n *\n * Every card also renders an unconditional `sr-only` status name (spec \u00A74.6:\n * status is never colour-only), which in the editor is always \"Not started\" \u2014\n * so a text match for a step called \"Start\" over the whole card matches every\n * node on the canvas. Addressing the title element makes \"which node is called\n * X\" answerable without depending on the status copy or the locale.\n */\nexport const WORKFLOW_NODE_TITLE_SLOT = 'workflow-node-title'\n\n/**\n * English fallbacks for the per-status label (spec section 4.6: status is never\n * colour-only, so every state has to have a NAME the card can announce).\n */\nconst STATUS_LABEL_FALLBACKS: Record<WorkflowStatus, string> = {\n  completed: 'Completed',\n  in_progress: 'In progress',\n  pending: 'Pending',\n  failed: 'Failed',\n  paused: 'Paused',\n  not_started: 'Not started',\n  error: 'Has errors',\n  working: 'Working',\n  waiting: 'Waiting',\n  needs_attention: 'Needs attention',\n}\n\n/**\n * Per-status glyph. Every RUN state gets its OWN shape, because the colour is\n * never allowed to be the only signal (spec \u00A74.6) \u2014 and because `working` and\n * `waiting` are the pair this whole model exists to tell apart, they get the two\n * most different marks on the card: a spinner ring and an hourglass.\n */\nexport const STATUS_ICONS: Record<WorkflowStatus, typeof Check> = {\n  completed: Check,\n  in_progress: Play,\n  pending: Pause,\n  failed: XCircle,\n  paused: Pause,\n  not_started: Circle,\n  error: CircleAlert,\n  working: LoaderCircle,\n  waiting: Hourglass,\n  needs_attention: TriangleAlert,\n}\n\n/**\n * Motion is an ENHANCEMENT, never the distinction. `motion-reduce:animate-none`\n * honours `prefers-reduced-motion`, and with animation off a working step is\n * still a blue card carrying a spinner ring, an announced name and its own\n * reason line \u2014 none of which depend on the spin.\n */\nconst STATUS_MOTION: Partial<Record<WorkflowStatus, string>> = {\n  working: 'animate-spin motion-reduce:animate-none',\n}\n\nexport function requestWorkflowNodeDeletion(nodeId: string): void {\n  if (typeof window === 'undefined') return\n  window.dispatchEvent(new CustomEvent(WORKFLOW_NODE_DELETE_EVENT, { detail: { nodeId } }))\n}\n\nexport type WorkflowNodeCardVariant = 'card' | 'pill'\n\ninterface WorkflowNodeCardProps {\n  title: string\n  description?: string\n  status?: WorkflowStatus\n  nodeType: NodeType\n  selected?: boolean\n  hasError?: boolean\n  errorCount?: number\n  /**\n   * Spec section 4.3: the badge cluster's compensation marker. Set by the canvas\n   * while the compensation toggle is on, for a step whose outgoing routes carry\n   * activities that declare compensation.\n   */\n  hasCompensation?: boolean\n  /** Node id \u2014 required to render the inline delete affordance. */\n  nodeId?: string\n  /** When true (and `nodeId` is set), show the hover/selected trash button. */\n  editable?: boolean\n  /**\n   * How the node presents itself. `'card'` is a step: a capped, titled card\n   * with a description. `'pill'` is a terminal (START / END): an auto-width\n   * lozenge carrying only its icon and name, so the two ends of a flow stop\n   * competing for attention with the steps between them.\n   */\n  variant?: WorkflowNodeCardVariant\n  /**\n   * Outcome-row footer (fidelity gap #4). Rendered INSIDE the card, below a\n   * hairline rule, so the rows read as part of the node rather than a second\n   * floating object \u2014 which is what lets their dots double as the node's\n   * per-outcome connection handles. Terminals (`variant: 'pill'`) never take\n   * one: a pill has no body to hang rows off.\n   */\n  footer?: React.ReactNode\n  /**\n   * One-line CONFIG summary (fidelity gap #6): `customers.deals.update \u00B7\n   * retries 3\u00D7`. Preferred over `description`, which then becomes the card's\n   * tooltip \u2014 two clamped lines of prose truncate mid-word and cannot tell you\n   * what the step actually does. An empty list falls back to `description`, so\n   * an unconfigured node never reads emptier than before.\n   */\n  summary?: NodeConfigSummarySegment[]\n  /**\n   * The one-line \"what is this doing / waiting for\" (spec Part 2), resolved by\n   * `lib/step-presentation.ts`. A translation descriptor rather than a string,\n   * because the resolver is pure and never sees a locale.\n   */\n  runReason?: StepReason | null\n  /**\n   * When the current attempt started, so a working step can also say \"running\n   * for 4m\" \u2014 the second question an operator asks, and free because\n   * `StepInstance.startedAt` already carries it.\n   */\n  runStartedAt?: Date | null\n}\n\nexport function WorkflowNodeCard({\n  title,\n  description,\n  status = 'not_started',\n  nodeType,\n  selected = false,\n  hasError = false,\n  errorCount,\n  hasCompensation = false,\n  nodeId,\n  editable = false,\n  variant = 'card',\n  footer,\n  summary,\n  runReason = null,\n  runStartedAt = null,\n}: WorkflowNodeCardProps) {\n  const t = useT()\n  const resolvedSummary = summary?.map((segment) => ({\n    segment,\n    text: resolveNodeConfigSummarySegment(segment, t),\n  }))\n  // In edit mode (not_started), use white background\n  const isEditMode = status === 'not_started'\n  const colors = STATUS_COLORS[status]\n\n  const StatusIcon = STATUS_ICONS[status]\n\n  const NodeTypeIcon = NODE_TYPE_ICONS[nodeType]\n  const nodeTypeIconColor = NODE_TYPE_COLORS[nodeType]\n  // Type gets its own channel (the painted cap) so the card's border and\n  // background are left to speak only for run status. A selected or failing\n  // card wants its whole outline to read as one state, so the accent yields.\n  const accentClass = selected || hasError ? '' : NODE_TYPE_ACCENTS[nodeType]\n  const nodeTypeLabel = NODE_TYPE_LABELS[nodeType]?.title ?? nodeType\n  const showDelete = editable && !!nodeId\n\n  const backgroundClass = isEditMode ? 'bg-card' : colors.bg\n  const borderClass = selected\n    ? 'border-primary'\n    : hasError\n      ? 'border-status-error-border'\n      : isEditMode\n        ? 'border-border'\n        : colors.border\n  const compensationBadgeLabel = t(\n    'workflows.compensation.nodeBadge',\n    'Leaving this step schedules compensation',\n  )\n  const errorBadgeLabel = t(\n    'workflows.visualEditor.problems.nodeErrorBadge',\n    '{count} validation error(s)',\n    { count: typeof errorCount === 'number' && errorCount > 0 ? errorCount : 1 },\n  )\n\n  // Spec section 4.6: status is never colour-only and every card announces what\n  // it is. The status icon shape already differs per state; this names it, so a\n  // screen reader hears \"User task \u00B7 Approve order \u00B7 Failed\" rather than a\n  // shapeless card whose only other cue is a red border.\n  const statusLabel = t(`workflows.nodeStatus.${status}`, STATUS_LABEL_FALLBACKS[status])\n  const cardLabel = t(\n    'workflows.visualEditor.nodeCardLabel',\n    '{type}: {title} \u2014 {status}',\n    { type: nodeTypeLabel, title, status: statusLabel },\n  )\n\n  // Gap 8: the status glyph is a RUN affordance. In the editor every node is\n  // `not_started`, so rendering it there put a meaningless hollow ring on every\n  // single card. The `sr-only` name stays unconditional \u2014 it is what keeps\n  // status from being colour-only (spec section 4.6).\n  const statusGlyph = isEditMode ? null : (\n    <StatusIcon\n      className={`h-4 w-4 shrink-0 ${colors.icon} ${STATUS_MOTION[status] ?? ''}`.trimEnd()}\n      aria-hidden=\"true\"\n    />\n  )\n\n  // The reason line (spec Part 2). It is the answer to \"is anything happening\n  // right now, or is this stuck?\", so it sits directly under the title and it\n  // is TEXT \u2014 a card whose animation is disabled still says what it is doing.\n  const reasonText = runReason ? t(runReason.key, runReason.fallback, runReason.params) : null\n  const elapsed = runStartedAt ? formatElapsedSince(runStartedAt, null) : null\n  const reasonLine = reasonText ? (\n    <p className={`mt-1 truncate text-xs ${colors.text}`} title={reasonText}>\n      {reasonText}\n      {elapsed ? (\n        <span className=\"text-muted-foreground\">\n          {` \u00B7 ${t('workflows.runState.elapsed', 'running for {duration}', { duration: elapsed })}`}\n        </span>\n      ) : null}\n    </p>\n  ) : null\n\n  const badges = (\n    <>\n      {hasError && (\n        <span\n          role=\"status\"\n          aria-label={errorBadgeLabel}\n          title={errorBadgeLabel}\n          className=\"absolute -top-2 -right-2 z-10 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-background bg-status-error-icon px-1 text-xs font-bold text-primary-foreground\"\n        >\n          {typeof errorCount === 'number' && errorCount > 0 ? (\n            errorCount\n          ) : (\n            <CircleAlert className=\"h-3 w-3\" aria-hidden=\"true\" />\n          )}\n        </span>\n      )}\n\n      {/* Compensation marker (spec section 4.3). Paired with its own icon shape\n          and an announced name, never colour alone (spec section 4.6). */}\n      {hasCompensation && (\n        <span\n          role=\"img\"\n          data-testid=\"workflow-node-compensation-badge\"\n          aria-label={compensationBadgeLabel}\n          title={compensationBadgeLabel}\n          className=\"absolute -bottom-2 -right-2 z-10 inline-flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-background bg-status-warning-bg px-1 text-status-warning-text\"\n        >\n          <ShieldMinus className=\"h-3 w-3\" aria-hidden=\"true\" />\n        </span>\n      )}\n    </>\n  )\n\n  const deleteButton = showDelete ? (\n    <button\n      type=\"button\"\n      aria-label={t('workflows.visualEditor.deleteStep', 'Delete step')}\n      className=\"nodrag nopan -mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-status-error-icon focus-visible:opacity-100 group-hover:opacity-100\"\n      onClick={(event) => {\n        event.stopPropagation()\n        event.preventDefault()\n        requestWorkflowNodeDeletion(nodeId!)\n      }}\n    >\n      <Trash2 className=\"h-3.5 w-3.5\" />\n    </button>\n  ) : null\n\n  const elevationClass = selected ? 'ring-2 ring-primary' : 'shadow-sm hover:shadow-md'\n\n  if (variant === 'pill') {\n    return (\n      <div\n        role=\"group\"\n        aria-label={cardLabel}\n        data-node-status={status}\n        data-node-variant=\"pill\"\n        title={description}\n        style={{ maxWidth: NODE_MAX_WIDTH }}\n        className={`\n          group relative inline-flex w-fit items-center gap-2 rounded-full border px-3 py-1.5\n          ${backgroundClass} ${borderClass}\n          transition-all duration-200 ${elevationClass}\n        `}\n      >\n        {badges}\n        <span className=\"sr-only\">{statusLabel}</span>\n        <NodeTypeIcon className={`h-3.5 w-3.5 shrink-0 ${nodeTypeIconColor}`} aria-hidden=\"true\" />\n        {statusGlyph}\n        <span\n          data-slot={WORKFLOW_NODE_TITLE_SLOT}\n          className={`truncate text-sm font-semibold leading-snug ${colors.text}`}\n        >\n          {title}\n        </span>\n        {deleteButton}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={cardLabel}\n      data-node-status={status}\n      data-node-variant=\"card\"\n      style={{ minWidth: NODE_MIN_WIDTH, maxWidth: NODE_MAX_WIDTH }}\n      className={`\n        group w-fit rounded-lg border border-t-4 ${accentClass}\n        ${backgroundClass} ${borderClass}\n        transition-all duration-200 relative ${elevationClass}\n      `}\n    >\n      {badges}\n\n      {/* Type label + (editable) inline delete */}\n      <div className=\"flex items-center justify-between gap-2 px-2.5 pt-2\">\n        <div className=\"flex min-w-0 items-center gap-1\">\n          <NodeTypeIcon className={`h-3 w-3 shrink-0 ${nodeTypeIconColor}`} aria-hidden=\"true\" />\n          <span className=\"truncate text-overline font-semibold uppercase tracking-wide text-muted-foreground\">\n            {nodeTypeLabel}\n          </span>\n        </div>\n        {deleteButton}\n      </div>\n\n      <div className=\"flex items-start gap-2 px-2.5 pb-2.5 pt-1\">\n        <span className=\"sr-only\">{statusLabel}</span>\n        {statusGlyph ? <div className=\"mt-0.5\">{statusGlyph}</div> : null}\n        <div className=\"min-w-0 flex-1\">\n          <h3\n            data-slot={WORKFLOW_NODE_TITLE_SLOT}\n            className={`break-words text-sm font-semibold leading-snug ${colors.text}`}\n          >\n            {title}\n          </h3>\n          {resolvedSummary && resolvedSummary.length > 0 ? (\n            <p className=\"mt-0.5 truncate text-xs text-muted-foreground\" title={description}>\n              {resolvedSummary.map(({ segment, text }, index) => (\n                <span key={`${segment.translationKey ?? segment.text}-${index}`}>\n                  {index > 0 && NODE_CONFIG_SUMMARY_SEPARATOR}\n                  <span className={segment.mono ? 'font-mono' : undefined}>{text}</span>\n                </span>\n              ))}\n            </p>\n          ) : description ? (\n            <p className=\"mt-0.5 line-clamp-2 text-xs text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n          {reasonLine}\n        </div>\n      </div>\n\n      {footer}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/WorkflowRouteChips.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bot, Clock, CornerDownLeft, Database, Filter, FunctionSquare, Globe, Mail, Radio, Variable, Webhook, Workflow } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import "../lib/activity-registry-bootstrap.js";
+import { getActivityType } from "../lib/activity-registry.js";
+import { ROUTE_CHIP_CLASS, ROUTE_CHIP_ICON_CLASS, ROUTE_CHIP_LABEL_ICON_CLASS } from "../lib/node-geometry.js";
+const ACTIVITY_ICONS = {
+  Mail,
+  Radio,
+  Database,
+  Webhook,
+  FunctionSquare,
+  Clock,
+  Globe,
+  Variable,
+  Bot
+};
+function resolveActivityIcon(activityType) {
+  const entry = getActivityType(activityType);
+  return entry && ACTIVITY_ICONS[entry.icon] || Workflow;
+}
+function WorkflowRouteChips({ model, collapsed = false, onOpenSection, onOpenActivity }) {
+  const t = useT();
+  if (model.isEmpty) return null;
+  const dotCount = (model.conditionSummary ? 1 : 0) + model.activities.length + model.overflowCount + (model.isOtherwise ? 1 : 0);
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center gap-0.5",
+        role: "img",
+        "aria-label": t("workflows.routeChips.collapsed", { count: dotCount }),
+        "data-testid": "route-chips-collapsed",
+        children: Array.from({ length: Math.min(dotCount, 5) }).map((_, index) => /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground" }, index))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "data-testid": "route-chips", children: [
+    model.conditionSummary ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${ROUTE_CHIP_CLASS} border-border text-foreground hover:border-primary`,
+        "aria-label": t("workflows.routeChips.conditionLabel", { summary: model.conditionSummary }),
+        onClick: (event) => {
+          event.stopPropagation();
+          onOpenSection?.("condition");
+        },
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: `${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: model.conditionSummary })
+        ]
+      }
+    ) : null,
+    model.isOtherwise ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${ROUTE_CHIP_CLASS} border-dashed border-border text-muted-foreground`,
+        "data-testid": "route-chip-otherwise",
+        children: [
+          /* @__PURE__ */ jsx(CornerDownLeft, { className: `${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`, "aria-hidden": "true" }),
+          t("workflows.routeChips.otherwise")
+        ]
+      }
+    ) : null,
+    model.activities.map((activity) => {
+      const Icon = resolveActivityIcon(activity.activityType);
+      const entry = getActivityType(activity.activityType);
+      const label = entry ? t(entry.i18nKey) : activity.activityType;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary hover:text-foreground`,
+          "aria-label": t("workflows.routeChips.activityLabel", { activity: label }),
+          title: label,
+          onClick: (event) => {
+            event.stopPropagation();
+            if (onOpenActivity) onOpenActivity(activity.activityId);
+            else onOpenSection?.("activities");
+          },
+          children: /* @__PURE__ */ jsx(Icon, { className: `${ROUTE_CHIP_ICON_CLASS} shrink-0`, "aria-hidden": "true" })
+        },
+        activity.activityId
+      );
+    }),
+    model.overflowCount > 0 ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary`,
+        "aria-label": t("workflows.routeChips.overflowLabel", { count: model.overflowCount }),
+        onClick: (event) => {
+          event.stopPropagation();
+          onOpenSection?.("activities");
+        },
+        "data-testid": "route-chip-overflow",
+        children: [
+          "+",
+          model.overflowCount
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  WorkflowRouteChips,
+  resolveActivityIcon
+};
+//# sourceMappingURL=WorkflowRouteChips.js.map

package/dist/modules/workflows/components/WorkflowRouteChips.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowRouteChips.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { Bot, Clock, CornerDownLeft, Database, Filter, FunctionSquare, Globe, Mail, Radio, Variable, Webhook, Workflow, type LucideIcon } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport '../lib/activity-registry-bootstrap'\nimport { getActivityType } from '../lib/activity-registry'\nimport type { RouteChipModel, RouteChipSection } from '../lib/route-chips'\nimport { ROUTE_CHIP_CLASS, ROUTE_CHIP_ICON_CLASS, ROUTE_CHIP_LABEL_ICON_CLASS } from '../lib/node-geometry'\n\n/**\n * Icon names the activity registry declares (`ActivityTypeEntry.icon`) mapped to\n * their lucide components. Kept as an explicit map \u2014 a dynamic `lucide[name]`\n * lookup would pull the whole icon set into the editor chunk (#3169).\n */\nconst ACTIVITY_ICONS: Record<string, LucideIcon> = {\n  Mail,\n  Radio,\n  Database,\n  Webhook,\n  FunctionSquare,\n  Clock,\n  Globe,\n  Variable,\n  Bot,\n}\n\nexport function resolveActivityIcon(activityType: string): LucideIcon {\n  const entry = getActivityType(activityType)\n  return (entry && ACTIVITY_ICONS[entry.icon]) || Workflow\n}\n\nexport type WorkflowRouteChipsProps = {\n  model: RouteChipModel\n  /** Canvas zoom; below the semantic-zoom threshold the caller passes `collapsed`. */\n  collapsed?: boolean\n  onOpenSection?: (section: RouteChipSection) => void\n  /**\n   * Open the focused single-activity modal for one activity chip. When omitted,\n   * an activity chip falls back to `onOpenSection('activities')` (the full\n   * transition inspector), preserving the pre-existing behavior.\n   */\n  onOpenActivity?: (activityId: string) => void\n}\n\n/**\n * WorkflowRouteChips \u2014 the condition / activity / otherwise chip row a\n * transition renders along its edge (spec section 4.4, issue #4244).\n *\n * Density management: activity chips cap at `ROUTE_CHIP_LIMIT` with a `+N`\n * overflow badge, and below the semantic-zoom threshold the whole row collapses\n * to dots so a 60-node flow stays navigable. Every chip is a button with an\n * accessible label and an icon, never colour alone.\n */\nexport function WorkflowRouteChips({ model, collapsed = false, onOpenSection, onOpenActivity }: WorkflowRouteChipsProps) {\n  const t = useT()\n\n  if (model.isEmpty) return null\n\n  const dotCount = (model.conditionSummary ? 1 : 0) + model.activities.length + model.overflowCount + (model.isOtherwise ? 1 : 0)\n\n  if (collapsed) {\n    return (\n      <div\n        className=\"flex items-center gap-0.5\"\n        role=\"img\"\n        aria-label={t('workflows.routeChips.collapsed', { count: dotCount })}\n        data-testid=\"route-chips-collapsed\"\n      >\n        {Array.from({ length: Math.min(dotCount, 5) }).map((_, index) => (\n          <span key={index} className=\"size-1.5 rounded-full bg-muted-foreground\" />\n        ))}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\" data-testid=\"route-chips\">\n      {model.conditionSummary ? (\n        <button\n          type=\"button\"\n          className={`${ROUTE_CHIP_CLASS} border-border text-foreground hover:border-primary`}\n          aria-label={t('workflows.routeChips.conditionLabel', { summary: model.conditionSummary })}\n          onClick={(event) => {\n            // The chip lives in ReactFlow's EdgeLabelRenderer portal; a synthetic\n            // click bubbles through the React tree to the edge wrapper and would\n            // also fire onEdgeClick (opening the full transition editor). Stop it\n            // so a chip opens only its own surface.\n            event.stopPropagation()\n            onOpenSection?.('condition')\n          }}\n        >\n          <Filter className={`${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`} aria-hidden=\"true\" />\n          <span className=\"font-mono\">{model.conditionSummary}</span>\n        </button>\n      ) : null}\n\n      {model.isOtherwise ? (\n        <span\n          className={`${ROUTE_CHIP_CLASS} border-dashed border-border text-muted-foreground`}\n          data-testid=\"route-chip-otherwise\"\n        >\n          <CornerDownLeft className={`${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`} aria-hidden=\"true\" />\n          {t('workflows.routeChips.otherwise')}\n        </span>\n      ) : null}\n\n      {model.activities.map((activity) => {\n        const Icon = resolveActivityIcon(activity.activityType)\n        const entry = getActivityType(activity.activityType)\n        const label = entry ? t(entry.i18nKey) : activity.activityType\n        return (\n          <button\n            key={activity.activityId}\n            type=\"button\"\n            className={`${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary hover:text-foreground`}\n            aria-label={t('workflows.routeChips.activityLabel', { activity: label })}\n            title={label}\n            onClick={(event) => {\n              event.stopPropagation()\n              if (onOpenActivity) onOpenActivity(activity.activityId)\n              else onOpenSection?.('activities')\n            }}\n          >\n            <Icon className={`${ROUTE_CHIP_ICON_CLASS} shrink-0`} aria-hidden=\"true\" />\n          </button>\n        )\n      })}\n\n      {model.overflowCount > 0 ? (\n        <button\n          type=\"button\"\n          className={`${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary`}\n          aria-label={t('workflows.routeChips.overflowLabel', { count: model.overflowCount })}\n          onClick={(event) => {\n            event.stopPropagation()\n            onOpenSection?.('activities')\n          }}\n          data-testid=\"route-chip-overflow\"\n        >\n          +{model.overflowCount}\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}