feat(dashboard): redesign workflow nodes as card-style with config summaries

packages/dashboard/app/components/WorkflowNodeEditor.css

@@ -278,51 +278,102 @@
 }
 
 /* Canvas nodes */
+/* ── U1: card-style nodes ──
+ *  Cards have a header row (icon + label + badges + error badge) and an
+ *  independent config-summary row. Sizing mirrors WF_CARD_WIDTH /
+ *  WF_CARD_MAX_WIDTH in workflow-flow-mapping.ts; the max-width ceiling forces
+ *  long labels/summaries to truncate rather than grow the canvas. Per-kind
+ *  accent uses a left border + a faint header tint over a semantic token. */
 .wf-node {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+  width: 200px;
+  max-width: 240px;
   padding: var(--space-xs) var(--space-sm);
   background: var(--bg-secondary);
   border: 1px solid var(--border);
+  border-left: 3px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text);
   font-size: 0.8rem;
 }
 
+.wf-node-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+/* Summary row: single line, truncates independently of the header. */
+.wf-node-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.68rem;
+  color: var(--text-muted);
+}
+
+/* Per-kind accent: left border color + a faint header tint. color-mix over
+ *  semantic tokens keeps both themes legible without raw colors. */
 .wf-node-start {
-  border-color: var(--ws-success);
+  border-left-color: var(--ws-success);
 }
 
 .wf-node-end {
-  border-color: var(--text-muted);
+  border-left-color: var(--text-muted);
+}
+
+.wf-node-prompt {
+  border-left-color: var(--accent, var(--todo));
+  background: color-mix(in srgb, var(--accent, var(--todo)) 5%, var(--bg-secondary));
+}
+
+.wf-node-script {
+  border-left-color: var(--text-muted);
+  font-family: var(--font-mono, monospace);
 }
 
 .wf-node-gate {
-  border-color: var(--ws-warning);
+  border-left-color: var(--ws-warning);
+  background: color-mix(in srgb, var(--ws-warning) 6%, var(--bg-secondary));
+}
+
+.wf-node-hold {
+  border-left-color: var(--ws-warning);
+}
+
+.wf-node-split,
+.wf-node-join {
+  border-left-color: var(--accent, var(--ws-info));
 }
 
 .wf-node-merge {
-  border-color: var(--ws-info);
+  border-left-color: var(--ws-info);
   border-style: dashed;
 }
 
 /* ── Step-inversion nodes (KTD-3/4/12/15, U8) ── */
 
 .wf-node-step-execute {
-  border-color: var(--accent, var(--ws-info));
+  border-left-color: var(--accent, var(--ws-info));
+  background: color-mix(in srgb, var(--accent, var(--ws-info)) 5%, var(--bg-secondary));
 }
 
 .wf-node-step-review {
-  border-color: var(--ws-info);
+  border-left-color: var(--ws-info);
+  background: color-mix(in srgb, var(--ws-info) 6%, var(--bg-secondary));
 }
 
 .wf-node-parse-steps {
-  border-color: var(--ws-info);
+  border-left-color: var(--ws-info);
 }
 
 .wf-node-code {
-  border-color: var(--text-muted);
+  border-left-color: var(--text-muted);
   font-family: var(--font-mono, monospace);
 }
 
@@ -374,12 +425,24 @@
   overflow-x: auto;
 }
 
+/* Header overflow priority (R1): icon fixed-width; label flex-shrinks first
+ *  with ellipsis; badges + error badge hold their width flush right. */
 .wf-node-icon {
   display: inline-flex;
+  flex-shrink: 0;
   color: var(--text-muted);
 }
 
+.wf-node-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .wf-node-badge {
+  flex-shrink: 0;
   font-size: 0.65rem;
   text-transform: uppercase;
   padding: 1px var(--space-xs);
@@ -412,12 +475,14 @@
 
 .wf-node--error {
   border-color: var(--ws-error);
+  border-left-color: var(--ws-error);
 }
 
 .wf-node-error-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
+  flex-shrink: 0;
   font-size: 0.65rem;
   padding: 1px var(--space-xs);
   border-radius: var(--radius-sm);