@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/modules/workflows/components/WorkflowIconPicker.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+import { Image as ImageIcon, X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { LUCIDE_ICON_REGISTRY, resolveRegisteredLucideIcon } from '@open-mercato/ui/backend/icons/lucideRegistry'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { filterIconNames, normalizeIconName } from '../lib/icon-search'
+
+export interface WorkflowIconPickerProps {
+  id?: string
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+}
+
+/**
+ * Searchable icon grid for a definition's `metadata.icon` (spec section 4.5).
+ *
+ * The grid is backed by the platform's shared lucide registry, which `AppShell`
+ * already loads on every backend page — so a searchable grid over ~250 icons
+ * costs the editor chunk nothing, where importing `lucide-react` wholesale would
+ * have been the classic bundle regression.
+ *
+ * Free text stays the fallback, deliberately: `metadata.icon` has always been an
+ * open string, an author may reference an icon the registry has not picked up
+ * yet, and a picker that silently dropped such a value would be a data-losing
+ * "improvement". Existing values in any casing (`ShoppingCart`,
+ * `lucide:shopping-cart`) load with their icon selected.
+ */
+export function WorkflowIconPicker({ id, value, onChange, disabled }: WorkflowIconPickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+
+  const iconNames = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY), [])
+  const results = React.useMemo(() => filterIconNames(iconNames, query), [iconNames, query])
+
+  const normalizedValue = normalizeIconName(value)
+  const SelectedIcon = resolveRegisteredLucideIcon(value)
+  const isUnknownValue = value.trim().length > 0 && !SelectedIcon
+
+  const select = React.useCallback((name: string) => {
+    onChange(name)
+    setOpen(false)
+  }, [onChange])
+
+  return (
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={(next) => { setOpen(next); if (next) setQuery('') }}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            aria-label={t('workflows.form.iconPicker.trigger', 'Choose an icon')}
+            className="h-8 min-w-0 flex-1 justify-start gap-2 px-2 text-xs font-normal"
+          >
+            {SelectedIcon ? (
+              <SelectedIcon className="h-4 w-4 shrink-0 text-foreground" aria-hidden="true" />
+            ) : (
+              <ImageIcon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            )}
+            <span className="truncate">
+              {value.trim().length > 0 ? value : t('workflows.form.iconPicker.none', 'No icon')}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 p-2">
+          <Input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={t('workflows.form.iconPicker.searchPlaceholder', 'Search icons…')}
+            aria-label={t('workflows.form.iconPicker.searchLabel', 'Search icons')}
+            className="h-8 text-sm"
+            autoFocus
+          />
+          {results.length === 0 ? (
+            <p className="px-1 py-4 text-center text-xs text-muted-foreground">
+              {t('workflows.form.iconPicker.noResults', 'No icon matches "{query}"', { query })}
+            </p>
+          ) : (
+            <div role="listbox" aria-label={t('workflows.form.iconPicker.gridLabel', 'Icons')} className="mt-2 grid max-h-64 grid-cols-8 gap-1 overflow-y-auto">
+              {results.map((name) => {
+                const Icon = LUCIDE_ICON_REGISTRY[name]
+                const isSelected = name === normalizedValue
+                return (
+                  <button
+                    key={name}
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    title={name}
+                    aria-label={name}
+                    onClick={() => select(name)}
+                    className={`flex h-8 w-8 items-center justify-center rounded-md border text-foreground hover:bg-muted ${
+                      isSelected ? 'border-primary bg-muted' : 'border-transparent'
+                    }`}
+                  >
+                    <Icon className="h-4 w-4" aria-hidden="true" />
+                  </button>
+                )
+              })}
+            </div>
+          )}
+          <div className="mt-2 space-y-1 border-t border-border pt-2">
+            <label htmlFor={`${id ?? 'workflow-icon'}-custom`} className="text-overline uppercase tracking-wide text-muted-foreground">
+              {t('workflows.form.iconPicker.customLabel', 'Or enter a name')}
+            </label>
+            <Input
+              id={`${id ?? 'workflow-icon'}-custom`}
+              value={value}
+              onChange={(event) => onChange(event.target.value)}
+              placeholder="shopping-cart"
+              className="h-8 text-sm"
+            />
+            {isUnknownValue && (
+              <p className="text-xs text-status-warning-text">
+                {t('workflows.form.iconPicker.unknown', 'This name is not in the icon set — it is kept as written and no icon renders.')}
+              </p>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      {value.trim().length > 0 && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={disabled}
+          onClick={() => onChange('')}
+          aria-label={t('workflows.form.iconPicker.clear', 'Clear icon')}
+          className="h-8 w-8 shrink-0 p-0"
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </Button>
+      )}
+    </div>
+  )
+}

package/src/modules/workflows/components/WorkflowLegend.tsx

@@ -1,7 +1,33 @@
 'use client'
 
-import { Check, Play, Pause, Circle } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { EDGE_COLORS, STATUS_COLORS, type EdgeState, type WorkflowStatus } from '../lib/status-colors'
+import { STATUS_ICONS } from './WorkflowNodeCard'
+
+/**
+ * Legend rows are DERIVED from the same tables the canvas paints itself with
+ * (`STATUS_COLORS` / `EDGE_COLORS` / `STATUS_ICONS`) rather than restating them.
+ * The previous hand-written swatches used raw Tailwind shades and had drifted
+ * out of sync, so the legend actively mis-described the canvas — it still showed
+ * a dashed wire for the default route state after that route became solid.
+ *
+ * The rows are the RUN presentation vocabulary (spec Part 2), because this
+ * legend renders beside the run canvas. It used to list `in_progress` and
+ * `pending`, neither of which that canvas paints any more.
+ */
+const STATUS_ROWS: { status: WorkflowStatus; labelKey: string }[] = [
+  { status: 'completed', labelKey: 'workflows.legend.status.completed' },
+  { status: 'working', labelKey: 'workflows.legend.status.working' },
+  { status: 'waiting', labelKey: 'workflows.legend.status.waiting' },
+  { status: 'needs_attention', labelKey: 'workflows.legend.status.needsAttention' },
+  { status: 'failed', labelKey: 'workflows.legend.status.failed' },
+  { status: 'not_started', labelKey: 'workflows.legend.status.notStarted' },
+]
+
+const EDGE_ROWS: { state: EdgeState; labelKey: string }[] = [
+  { state: 'completed', labelKey: 'workflows.legend.edgeState.completed' },
+  { state: 'pending', labelKey: 'workflows.legend.edgeState.pending' },
+]
 
 export function WorkflowLegend() {
   const t = useT()
@@ -13,30 +39,20 @@ export function WorkflowLegend() {
           {t('workflows.legend.statusTitle')}
         </h3>
         <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-4 h-4 rounded-full bg-emerald-100 flex items-center justify-center">
-              <Check className="w-3 h-3 text-emerald-600" />
-            </div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.status.completed')}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center">
-              <Play className="w-3 h-3 text-blue-600" />
-            </div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.status.inProgress')}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-4 h-4 rounded-full bg-yellow-100 flex items-center justify-center">
-              <Pause className="w-3 h-3 text-yellow-600" />
-            </div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.status.pending')}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-4 h-4 rounded-full bg-muted flex items-center justify-center">
-              <Circle className="w-3 h-3 text-muted-foreground" />
-            </div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.status.notStarted')}</span>
-          </div>
+          {STATUS_ROWS.map(({ status, labelKey }) => {
+            const colors = STATUS_COLORS[status]
+            const Icon = STATUS_ICONS[status]
+            return (
+              <div key={status} className="flex items-center gap-2">
+                <div
+                  className={`flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center ${colors.bg}`}
+                >
+                  <Icon className={`w-3 h-3 ${colors.icon}`} aria-hidden="true" />
+                </div>
+                <span className="text-xs text-muted-foreground">{t(labelKey)}</span>
+              </div>
+            )
+          })}
         </div>
       </div>
 
@@ -45,14 +61,24 @@ export function WorkflowLegend() {
           {t('workflows.legend.edgeStatesTitle')}
         </h3>
         <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-8 h-0.5 bg-status-success-solid"></div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.edgeState.completed')}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-shrink-0 w-8 h-0.5 bg-muted-foreground" style={{ backgroundImage: 'repeating-linear-gradient(to right, currentColor 0, currentColor 4px, transparent 4px, transparent 8px)' }}></div>
-            <span className="text-xs text-muted-foreground">{t('workflows.legend.edgeState.pending')}</span>
-          </div>
+          {EDGE_ROWS.map(({ state, labelKey }) => {
+            const colors = EDGE_COLORS[state]
+            return (
+              <div key={state} className="flex items-center gap-2">
+                <div
+                  className="flex-shrink-0 w-8"
+                  style={{
+                    height: colors.strokeWidth,
+                    backgroundColor: colors.stroke,
+                    backgroundImage: colors.dashed
+                      ? `repeating-linear-gradient(to right, ${colors.stroke} 0, ${colors.stroke} 8px, transparent 8px, transparent 12px)`
+                      : undefined,
+                  }}
+                />
+                <span className="text-xs text-muted-foreground">{t(labelKey)}</span>
+              </div>
+            )
+          })}
         </div>
       </div>
     </div>

package/src/modules/workflows/components/WorkflowNodeCard.tsx

@@ -1,6 +1,112 @@
-import { Check, Play, Pause, Circle } from 'lucide-react'
+'use client'
+
+import type React from 'react'
+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, WorkflowStatus } from '../lib/status-colors'
-import { NODE_TYPE_ICONS, NODE_TYPE_COLORS, NodeType } from '../lib/node-type-icons'
+import type { StepReason } from '../lib/step-presentation'
+import { formatElapsedSince } from '../lib/run-duration'
+import { NODE_TYPE_ICONS, NODE_TYPE_ACCENTS, NODE_TYPE_COLORS, NODE_TYPE_LABELS, NodeType } from '../lib/node-type-icons'
+import { NODE_MAX_WIDTH, NODE_MIN_WIDTH } from '../lib/node-geometry'
+import {
+  NODE_CONFIG_SUMMARY_SEPARATOR,
+  resolveNodeConfigSummarySegment,
+  type NodeConfigSummarySegment,
+} from '../lib/node-config-summary'
+
+/**
+ * Rendered node sizing. Cards size to their content between these bounds and
+ * the dagre layout reserves the same bounds; both read `lib/node-geometry`, so
+ * there is one place to change them. Re-exported here because third-party code
+ * has always imported them from this module.
+ */
+export { NODE_MIN_WIDTH, NODE_MAX_WIDTH }
+/** @deprecated kept for back-compat; prefer NODE_MIN_WIDTH/NODE_MAX_WIDTH. */
+export const NODE_WIDTH = NODE_MIN_WIDTH
+
+/**
+ * Dispatched when a node's inline trash button is clicked. The visual editor
+ * listens for this on `window` and runs its confirm + edge-cleanup delete flow,
+ * so the card stays decoupled from the page (no callback threaded through every
+ * node component or the graph-utils data transform).
+ */
+export const WORKFLOW_NODE_DELETE_EVENT = 'workflow-node:delete'
+
+/**
+ * `data-slot` marking the element that carries a node's OWN label.
+ *
+ * Every card also renders an unconditional `sr-only` status name (spec §4.6:
+ * status is never colour-only), which in the editor is always "Not started" —
+ * so a text match for a step called "Start" over the whole card matches every
+ * node on the canvas. Addressing the title element makes "which node is called
+ * X" answerable without depending on the status copy or the locale.
+ */
+export const WORKFLOW_NODE_TITLE_SLOT = 'workflow-node-title'
+
+/**
+ * English fallbacks for the per-status label (spec section 4.6: status is never
+ * colour-only, so every state has to have a NAME the card can announce).
+ */
+const STATUS_LABEL_FALLBACKS: Record<WorkflowStatus, string> = {
+  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',
+}
+
+/**
+ * Per-status glyph. Every RUN state gets its OWN shape, because the colour is
+ * never allowed to be the only signal (spec §4.6) — and because `working` and
+ * `waiting` are the pair this whole model exists to tell apart, they get the two
+ * most different marks on the card: a spinner ring and an hourglass.
+ */
+export const STATUS_ICONS: Record<WorkflowStatus, typeof Check> = {
+  completed: Check,
+  in_progress: Play,
+  pending: Pause,
+  failed: XCircle,
+  paused: Pause,
+  not_started: Circle,
+  error: CircleAlert,
+  working: LoaderCircle,
+  waiting: Hourglass,
+  needs_attention: TriangleAlert,
+}
+
+/**
+ * Motion is an ENHANCEMENT, never the distinction. `motion-reduce:animate-none`
+ * honours `prefers-reduced-motion`, and with animation off a working step is
+ * still a blue card carrying a spinner ring, an announced name and its own
+ * reason line — none of which depend on the spin.
+ */
+const STATUS_MOTION: Partial<Record<WorkflowStatus, string>> = {
+  working: 'animate-spin motion-reduce:animate-none',
+}
+
+export function requestWorkflowNodeDeletion(nodeId: string): void {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent(WORKFLOW_NODE_DELETE_EVENT, { detail: { nodeId } }))
+}
+
+export type WorkflowNodeCardVariant = 'card' | 'pill'
 
 interface WorkflowNodeCardProps {
   title: string
@@ -8,6 +114,53 @@ interface WorkflowNodeCardProps {
   status?: WorkflowStatus
   nodeType: NodeType
   selected?: boolean
+  hasError?: boolean
+  errorCount?: number
+  /**
+   * Spec section 4.3: the badge cluster's compensation marker. Set by the canvas
+   * while the compensation toggle is on, for a step whose outgoing routes carry
+   * activities that declare compensation.
+   */
+  hasCompensation?: boolean
+  /** Node id — required to render the inline delete affordance. */
+  nodeId?: string
+  /** When true (and `nodeId` is set), show the hover/selected trash button. */
+  editable?: boolean
+  /**
+   * How the node presents itself. `'card'` is a step: a capped, titled card
+   * with a description. `'pill'` is a terminal (START / END): an auto-width
+   * lozenge carrying only its icon and name, so the two ends of a flow stop
+   * competing for attention with the steps between them.
+   */
+  variant?: WorkflowNodeCardVariant
+  /**
+   * Outcome-row footer (fidelity gap #4). Rendered INSIDE the card, below a
+   * hairline rule, so the rows read as part of the node rather than a second
+   * floating object — which is what lets their dots double as the node's
+   * per-outcome connection handles. Terminals (`variant: 'pill'`) never take
+   * one: a pill has no body to hang rows off.
+   */
+  footer?: React.ReactNode
+  /**
+   * One-line CONFIG summary (fidelity gap #6): `customers.deals.update ·
+   * retries 3×`. Preferred over `description`, which then becomes the card's
+   * tooltip — two clamped lines of prose truncate mid-word and cannot tell you
+   * what the step actually does. An empty list falls back to `description`, so
+   * an unconfigured node never reads emptier than before.
+   */
+  summary?: NodeConfigSummarySegment[]
+  /**
+   * The one-line "what is this doing / waiting for" (spec Part 2), resolved by
+   * `lib/step-presentation.ts`. A translation descriptor rather than a string,
+   * because the resolver is pure and never sees a locale.
+   */
+  runReason?: StepReason | null
+  /**
+   * When the current attempt started, so a working step can also say "running
+   * for 4m" — the second question an operator asks, and free because
+   * `StepInstance.startedAt` already carries it.
+   */
+  runStartedAt?: Date | null
 }
 
 export function WorkflowNodeCard({
@@ -16,54 +169,228 @@ export function WorkflowNodeCard({
   status = 'not_started',
   nodeType,
   selected = false,
+  hasError = false,
+  errorCount,
+  hasCompensation = false,
+  nodeId,
+  editable = false,
+  variant = 'card',
+  footer,
+  summary,
+  runReason = null,
+  runStartedAt = null,
 }: WorkflowNodeCardProps) {
+  const t = useT()
+  const resolvedSummary = summary?.map((segment) => ({
+    segment,
+    text: resolveNodeConfigSummarySegment(segment, t),
+  }))
   // In edit mode (not_started), use white background
   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]
+  // Type gets its own channel (the painted cap) so the card's border and
+  // background are left to speak only for run status. A selected or failing
+  // card wants its whole outline to read as one state, so the accent yields.
+  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 },
+  )
+
+  // Spec section 4.6: status is never colour-only and every card announces what
+  // it is. The status icon shape already differs per state; this names it, so a
+  // screen reader hears "User task · Approve order · Failed" rather than a
+  // shapeless card whose only other cue is a red border.
+  const statusLabel = t(`workflows.nodeStatus.${status}`, STATUS_LABEL_FALLBACKS[status])
+  const cardLabel = t(
+    'workflows.visualEditor.nodeCardLabel',
+    '{type}: {title} — {status}',
+    { type: nodeTypeLabel, title, status: statusLabel },
+  )
+
+  // Gap 8: the status glyph is a RUN affordance. In the editor every node is
+  // `not_started`, so rendering it there put a meaningless hollow ring on every
+  // single card. The `sr-only` name stays unconditional — it is what keeps
+  // status from being colour-only (spec section 4.6).
+  const statusGlyph = isEditMode ? null : (
+    <StatusIcon
+      className={`h-4 w-4 shrink-0 ${colors.icon} ${STATUS_MOTION[status] ?? ''}`.trimEnd()}
+      aria-hidden="true"
+    />
+  )
+
+  // The reason line (spec Part 2). It is the answer to "is anything happening
+  // right now, or is this stuck?", so it sits directly under the title and it
+  // is TEXT — a card whose animation is disabled still says what it is doing.
+  const reasonText = runReason ? t(runReason.key, runReason.fallback, runReason.params) : null
+  const elapsed = runStartedAt ? formatElapsedSince(runStartedAt, null) : null
+  const reasonLine = reasonText ? (
+    <p className={`mt-1 truncate text-xs ${colors.text}`} title={reasonText}>
+      {reasonText}
+      {elapsed ? (
+        <span className="text-muted-foreground">
+          {` · ${t('workflows.runState.elapsed', 'running for {duration}', { duration: elapsed })}`}
+        </span>
+      ) : null}
+    </p>
+  ) : null
+
+  const badges = (
+    <>
+      {hasError && (
+        <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"
+        >
+          {typeof errorCount === 'number' && errorCount > 0 ? (
+            errorCount
+          ) : (
+            <CircleAlert className="h-3 w-3" aria-hidden="true" />
+          )}
+        </span>
+      )}
+
+      {/* Compensation marker (spec section 4.3). Paired with its own icon shape
+          and an announced name, never colour alone (spec section 4.6). */}
+      {hasCompensation && (
+        <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"
+        >
+          <ShieldMinus className="h-3 w-3" aria-hidden="true" />
+        </span>
+      )}
+    </>
+  )
+
+  const deleteButton = showDelete ? (
+    <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!)
+      }}
+    >
+      <Trash2 className="h-3.5 w-3.5" />
+    </button>
+  ) : null
+
+  const elevationClass = selected ? 'ring-2 ring-primary' : 'shadow-sm hover:shadow-md'
+
+  if (variant === 'pill') {
+    return (
+      <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}
+        `}
+      >
+        {badges}
+        <span className="sr-only">{statusLabel}</span>
+        <NodeTypeIcon className={`h-3.5 w-3.5 shrink-0 ${nodeTypeIconColor}`} aria-hidden="true" />
+        {statusGlyph}
+        <span
+          data-slot={WORKFLOW_NODE_TITLE_SLOT}
+          className={`truncate text-sm font-semibold leading-snug ${colors.text}`}
+        >
+          {title}
+        </span>
+        {deleteButton}
+      </div>
+    )
+  }
 
   return (
     <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}
       `}
     >
-      {/* Subtle node type indicator in upper right */}
-      <div className="absolute top-2 right-2">
-        <NodeTypeIcon className={`w-3.5 h-3.5 ${nodeTypeIconColor}`} />
-      </div>
+      {badges}
 
-      <div className="p-4 flex items-start gap-3">
-        <div className={`flex-shrink-0 mt-0.5 ${colors.icon}`}>
-          <StatusIcon className="w-5 h-5" />
+      {/* Type label + (editable) inline delete */}
+      <div className="flex items-center justify-between gap-2 px-2.5 pt-2">
+        <div className="flex min-w-0 items-center gap-1">
+          <NodeTypeIcon className={`h-3 w-3 shrink-0 ${nodeTypeIconColor}`} aria-hidden="true" />
+          <span className="truncate text-overline font-semibold uppercase tracking-wide text-muted-foreground">
+            {nodeTypeLabel}
+          </span>
         </div>
-        <div className="flex-1 min-w-0 pr-4">
-          <h3 className={`font-semibold text-base ${colors.text} truncate`}>
+        {deleteButton}
+      </div>
+
+      <div className="flex items-start gap-2 px-2.5 pb-2.5 pt-1">
+        <span className="sr-only">{statusLabel}</span>
+        {statusGlyph ? <div className="mt-0.5">{statusGlyph}</div> : null}
+        <div className="min-w-0 flex-1">
+          <h3
+            data-slot={WORKFLOW_NODE_TITLE_SLOT}
+            className={`break-words text-sm font-semibold leading-snug ${colors.text}`}
+          >
             {title}
           </h3>
-          {description && (
-            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+          {resolvedSummary && resolvedSummary.length > 0 ? (
+            <p className="mt-0.5 truncate text-xs text-muted-foreground" title={description}>
+              {resolvedSummary.map(({ segment, text }, index) => (
+                <span key={`${segment.translationKey ?? segment.text}-${index}`}>
+                  {index > 0 && NODE_CONFIG_SUMMARY_SEPARATOR}
+                  <span className={segment.mono ? 'font-mono' : undefined}>{text}</span>
+                </span>
+              ))}
+            </p>
+          ) : description ? (
+            <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
               {description}
             </p>
-          )}
+          ) : null}
+          {reasonLine}
         </div>
       </div>
+
+      {footer}
     </div>
   )
 }