machinaos 0.0.76 → 0.0.78

package/client/src/themes/surveillance.css

@@ -0,0 +1,289 @@
+/* ============================================================================
+ * themes/surveillance.css — institutional grey, CCTV crosshair overlays.
+ *
+ * Bureaucratic, cold, all corners and IDs. Reads like a 1970s panopticon
+ * control room. Ported from
+ * design_handoff_machinaos_themes/themes/surveillance.css.
+ * ============================================================================ */
+
+:root[data-theme="surveillance"] {
+  --bg-app: #1a1c1e;
+  --bg-panel: #232628;
+  --bg-canvas: #0a0c0e;
+  --bg-elevated: #2c3034;
+  --bg-input: #0a0c0e;
+  --bg-hover: rgba(232, 38, 38, 0.08);
+  --bg-active: rgba(232, 38, 38, 0.18);
+  --bg-overlay: rgba(0, 0, 0, 0.85);
+
+  --border-default: #3a3e42;
+  --border-strong: #5a5e62;
+  --border-focus: #e82626;
+  --ornament-frame: none;
+
+  --fg-default: #c8ccd0;
+  --fg-muted: #888c90;
+  --fg-faint: #585c60;
+  --fg-on-accent: #ffffff;
+  --fg-on-success: #0a0c0e;
+  --fg-on-danger: #ffffff;
+  --fg-on-warning: #0a0c0e;
+
+  --phosphor: #6acc6a;
+  --amber: #d8a020;
+  --concrete: #888c90;
+  --rec-red: #e82626;
+
+  --font-display: 'Anonymous Pro', 'IBM Plex Mono', monospace;
+  --font-body: 'IBM Plex Mono', 'Anonymous Pro', monospace;
+  --font-mono: 'IBM Plex Mono', monospace;
+  --type-scale-base: 13px;
+  --type-tracking-display: 0.10em;
+  --type-uppercase: uppercase;
+
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-pill: 0px;
+
+  --dur-fast: 60ms;
+  --dur-default: 140ms;
+  --dur-slow: 240ms;
+  --ease-default: linear;
+  --ease-emphasis: linear;
+  --motion-style: scanline;
+  --sound-pack: telex;
+
+  /* Wave 30: REC-red executing pulse — matches the surv-blink LED
+   * rhythm and reads against the grey CCTV canvas. */
+  --node-pulse-color: hsl(var(--destructive));
+
+  /* Cursor — CCTV snooper reticle (REC-red crosshair with center dot) */
+  --cursor-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g stroke='%23e82626' stroke-width='1' fill='none'><circle cx='12' cy='12' r='8'/><path d='M12 1 L12 6 M12 18 L12 23 M1 12 L6 12 M18 12 L23 12'/><circle cx='12' cy='12' r='1.5' fill='%23e82626'/></g></svg>") 12 12, crosshair;
+  --cursor-pointer: pointer;
+
+  /* Canvas backplane — CCTV crosshair + corner brackets + 40px grain grid */
+  --canvas-grid:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g stroke='%23e82626' stroke-width='1' fill='none' opacity='0.18'><path d='M40 40 H120 M40 40 V120 M1880 40 H1800 M1880 40 V120 M40 1040 H120 M40 1040 V960 M1880 1040 H1800 M1880 1040 V960'/><circle cx='960' cy='540' r='40' opacity='0.2'/><path d='M960 480 V600 M900 540 H1020' opacity='0.25'/></g></svg>"),
+    repeating-linear-gradient(0deg, transparent 0 3px, rgba(106,204,106,0.04) 3px 4px),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g stroke='%23888c90' stroke-width='0.4' fill='none' opacity='0.12'><path d='M0 20 H40 M20 0 V40'/></g></svg>");
+  --canvas-grid-opacity: 1;
+
+  --scrollbar-track: #1a1c1e;
+  --scrollbar-thumb: #5a5e62;
+
+  /* Shadcn HSL bridge */
+  --background: 210 6% 11%;
+  --foreground: 210 8% 80%;
+  --card: 210 7% 19%;
+  --card-foreground: 210 8% 80%;
+  --popover: 210 7% 19%;
+  --popover-foreground: 210 8% 80%;
+
+  --primary: 0 81% 53%;            /* REC red */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 6% 16%;
+  --secondary-foreground: 210 8% 80%;
+  --muted: 210 6% 16%;
+  --muted-foreground: 210 3% 56%;
+  --accent: 120 49% 61%;           /* phosphor green */
+  --accent-foreground: 210 8% 5%;
+
+  --destructive: 0 81% 53%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 120 49% 61%;
+  --warning: 41 74% 49%;
+  --info: 213 51% 56%;
+
+  --border: 213 5% 36%;
+  --input: 213 5% 36%;
+  --ring: 0 81% 53%;
+
+  /* Action role bridge */
+  --action-run: 120 49% 61%;
+  --action-run-soft: 120 49% 61% / 0.16;
+  --action-run-hover: 120 49% 61% / 0.30;
+  --action-run-border: 120 49% 61% / 0.7;
+
+  --action-stop: 0 81% 53%;
+  --action-stop-soft: 0 81% 53% / 0.18;
+  --action-stop-hover: 0 81% 53% / 0.32;
+  --action-stop-border: 0 81% 53% / 0.7;
+
+  --action-save: 120 49% 61%;
+  --action-save-soft: 120 49% 61% / 0.18;
+  --action-save-hover: 120 49% 61% / 0.32;
+  --action-save-border: 120 49% 61% / 0.7;
+
+  --action-config: 41 74% 49%;
+  --action-config-soft: 41 74% 49% / 0.16;
+  --action-config-hover: 41 74% 49% / 0.30;
+  --action-config-border: 41 74% 49% / 0.6;
+
+  --action-secret: 0 81% 53%;
+  --action-secret-soft: 0 81% 53% / 0.16;
+  --action-secret-hover: 0 81% 53% / 0.30;
+  --action-secret-border: 0 81% 53% / 0.6;
+
+  --action-tools: 213 51% 56%;
+  --action-tools-soft: 213 51% 56% / 0.16;
+  --action-tools-hover: 213 51% 56% / 0.30;
+  --action-tools-border: 213 51% 56% / 0.6;
+
+  --tint-soft: 16%;
+  --tint-border: 45%;
+}
+
+/* Body — monitor scanlines */
+:root[data-theme="surveillance"] body {
+  background:
+    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px),
+    var(--bg-app);
+}
+
+:root[data-theme="surveillance"] ::selection {
+  background: rgba(232, 38, 38, 0.5);
+  color: #ffffff;
+}
+
+/* Phosphor scrollbars */
+:root[data-theme="surveillance"] ::-webkit-scrollbar-thumb {
+  background: #5a5e62;
+}
+
+/* ── Per-component decorations (Wave 16 port from handoff) ─── */
+
+:root[data-theme="surveillance"] .toolbar,
+:root[data-theme="surveillance"] .sidebar,
+:root[data-theme="surveillance"] .palette,
+:root[data-theme="surveillance"] .chat { background: var(--bg-panel); }
+:root[data-theme="surveillance"] .toolbar { border-bottom: 1px solid var(--border-strong); }
+:root[data-theme="surveillance"] .sidebar { border-right: 1px solid var(--border-strong); }
+:root[data-theme="surveillance"] .palette { border-left: 1px solid var(--border-strong); }
+:root[data-theme="surveillance"] .chat    { border-top: 1px solid var(--border-strong); }
+
+/* CANVAS — CCTV grid + crosshair.
+ *
+ * NOTE: the corner-bracket / centre-reticle / REC-text SVG is declared at a
+ * fixed 1920x1080 viewport (matches the upstream handoff). On viewports
+ * larger than 1920x1080 it tiles; on smaller viewports it's clipped to
+ * canvas bounds. The CCTV-monitor framing reads as intentional at typical
+ * desktop sizes. Replacing it with a `preserveAspectRatio="xMidYMid slice"`
+ * SVG that scales would lose the pixel-pitch authenticity the design calls
+ * for, so this is a known limitation, not a bug. The 40px crosshair grid
+ * (third layer) is correctly tiled across the full canvas at any size. */
+:root[data-theme="surveillance"] .canvas {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'><g stroke='%23e82626' stroke-width='1' fill='none' opacity='0.18'><path d='M40 40 H120 M40 40 V120 M1880 40 H1800 M1880 40 V120 M40 1040 H120 M40 1040 V960 M1880 1040 H1800 M1880 1040 V960'/><circle cx='960' cy='540' r='40' opacity='0.2'/><path d='M960 480 V600 M900 540 H1020' opacity='0.25'/></g><text x='80' y='80' fill='%23e82626' font-family='monospace' font-size='14' opacity='0.5'>● REC</text><text x='80' y='1020' fill='%23e82626' font-family='monospace' font-size='12' opacity='0.4'>CAM-04 / 19:42:08</text></svg>"),
+    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(106,204,106,0.04) 3px, rgba(106,204,106,0.04) 4px),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g stroke='%23888c90' stroke-width='0.4' fill='none' opacity='0.12'><path d='M0 20 H40 M20 0 V40'/></g></svg>"),
+    var(--bg-canvas);
+}
+
+/* TYPOGRAPHY */
+:root[data-theme="surveillance"] body { font-family: var(--font-body); color: var(--fg-default); font-size: 13px; }
+:root[data-theme="surveillance"] h1, :root[data-theme="surveillance"] h2, :root[data-theme="surveillance"] h3,
+:root[data-theme="surveillance"] .v-display {
+  font-family: var(--font-display); letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-default);
+}
+
+/* SQUARE NODE — case file dossier */
+:root[data-theme="surveillance"] .sq-node-box {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-strong); border-radius: 0;
+  box-shadow: none;
+  color: var(--fg-default);
+  position: relative;
+}
+:root[data-theme="surveillance"] .sq-node-box::before {
+  content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
+  background: hsl(var(--primary)); border-radius: 50%; box-shadow: 0 0 4px hsl(var(--primary));
+  animation: surv-blink 1.4s steps(2) infinite;
+}
+@keyframes surv-blink { 50% { opacity: 0.2; } }
+:root[data-theme="surveillance"] .sq-node.selected .sq-node-box {
+  border: 1px solid hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)), 0 0 8px rgba(232,38,38,0.4);
+}
+
+/* Wave 29: Surveillance executing nodes blink the REC red glow, matching
+ * the corner LED's surv-blink rhythm. Mirrors the analog-camera "live"
+ * indicator language. Higher specificity than base.css's generic rule. */
+/* Wave 30.1: dedicated executing-pulse keyframe that animates
+ * BOX-SHADOW only. The original `surv-blink` keyframe (LED corner
+ * dot) animates opacity to 0.2, which when applied to whole nodes
+ * faded the entire node body. This pulses the REC-red glow
+ * intensity while the node stays solid. */
+@keyframes surv-pulse-exec {
+  0%, 49% {
+    box-shadow:
+      0 0 0 2px hsl(var(--destructive)),
+      0 0 28px 4px rgba(232, 38, 38, 0.7),
+      0 0 56px 14px rgba(232, 38, 38, 0.3);
+  }
+  50%, 100% {
+    box-shadow:
+      0 0 0 2px hsl(var(--destructive)),
+      0 0 12px 2px rgba(232, 38, 38, 0.45),
+      0 0 24px 6px rgba(232, 38, 38, 0.12);
+  }
+}
+
+:root[data-theme="surveillance"] .sq-node[data-executing] .sq-node-box,
+:root[data-theme="surveillance"] .react-flow__node.executing .sq-node-box,
+:root[data-theme="surveillance"] .react-flow__node.executing .node {
+  animation: surv-pulse-exec 1.0s steps(2) infinite;
+  border: 1px solid hsl(var(--destructive));
+}
+:root[data-theme="surveillance"] .sq-node-pip { border-radius: 0; }
+:root[data-theme="surveillance"] .sq-node-gear { background: hsl(var(--primary)); color: white; border-radius: 0; border: none; }
+:root[data-theme="surveillance"] .sq-node-handle { border-radius: 0; background: var(--phosphor); }
+:root[data-theme="surveillance"] .sq-node-handle.out { background: hsl(var(--primary)); }
+:root[data-theme="surveillance"] .sq-node-label { font-family: var(--font-display); letter-spacing: 0.10em; font-size: 10px; text-transform: uppercase; }
+
+/* ACTIONS — terminal command */
+:root[data-theme="surveillance"] .action-btn {
+  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
+  border-radius: 0; border-width: 1px;
+}
+:root[data-theme="surveillance"] .action-run    { background: transparent; color: var(--phosphor); border-color: var(--phosphor); }
+:root[data-theme="surveillance"] .action-deploy { background: hsl(var(--primary)); color: white; border-color: hsl(var(--primary)); }
+:root[data-theme="surveillance"] .action-save   { background: transparent; color: var(--amber); border-color: var(--amber); }
+:root[data-theme="surveillance"] .action-stop   { background: hsl(var(--primary)); color: white; border-color: hsl(var(--primary)); }
+
+/* CARDS */
+:root[data-theme="surveillance"] .wf-card,
+:root[data-theme="surveillance"] .cat,
+:root[data-theme="surveillance"] .comp,
+:root[data-theme="surveillance"] .settings-section,
+:root[data-theme="surveillance"] .cred-card {
+  background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 0;
+}
+:root[data-theme="surveillance"] .wf-card.selected { border: 1px solid hsl(var(--primary)); background: hsl(var(--danger-soft)); }
+:root[data-theme="surveillance"] .cat-tile { background: hsl(var(--primary)); color: white; border-radius: 0; }
+:root[data-theme="surveillance"] .cat-name { font-family: var(--font-display); }
+:root[data-theme="surveillance"] .comp-ico { background: var(--bg-panel); color: var(--phosphor); border: 1px solid var(--border-strong); border-radius: 0; }
+
+/* CHAT */
+:root[data-theme="surveillance"] .chat-msg { border-radius: 0; }
+:root[data-theme="surveillance"] .chat-msg-user { background: var(--bg-panel); border: 1px solid hsl(var(--primary)); }
+:root[data-theme="surveillance"] .chat-msg-bot { background: var(--bg-elevated); border-left: 3px solid var(--phosphor); border-top: 1px solid var(--border-default); border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
+
+/* STATUS BAR */
+:root[data-theme="surveillance"] .statusbar {
+  background: hsl(var(--primary)); color: white; border-top: none;
+  font-family: var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
+}
+:root[data-theme="surveillance"] .statusbar .pip { background: white; box-shadow: 0 0 4px white; border-radius: 0; }
+
+/* MODAL */
+:root[data-theme="surveillance"] .modal {
+  background: var(--bg-elevated); border: 1px solid hsl(var(--primary)); border-radius: 0;
+  box-shadow: 0 0 0 4px rgba(232,38,38,0.08), 0 30px 80px rgba(0,0,0,0.8);
+}
+:root[data-theme="surveillance"] .modal-head { border-bottom: 1px solid hsl(var(--primary)); background: var(--bg-panel); }
+:root[data-theme="surveillance"] .modal-title { font-family: var(--font-display); color: hsl(var(--primary)); letter-spacing: 0.14em; }
+
+/* CMDK */
+:root[data-theme="surveillance"] .cmdk { background: var(--bg-elevated); border: 1px solid hsl(var(--primary)); border-radius: 0; }
+:root[data-theme="surveillance"] .cmdk-item.active { background: hsl(var(--primary)); color: white; }
+:root[data-theme="surveillance"] .cmdk-item.active::before { content: '> '; }

package/client/src/themes/wasteland.css

@@ -0,0 +1,250 @@
+/* ============================================================================
+ * themes/wasteland.css — irradiated dust, rust, hand-painted warnings on
+ * scrap metal. Reads like a Mad Max settlement.
+ * Ported from design_handoff_machinaos_themes/themes/wasteland.css.
+ * ============================================================================ */
+
+:root[data-theme="wasteland"] {
+  --bg-app: #2a2018;
+  --bg-panel: #3a2c1c;
+  --bg-canvas: #1a1410;
+  --bg-elevated: #4a3826;
+  --bg-input: #1a1410;
+  --bg-hover: rgba(232, 140, 40, 0.10);
+  --bg-active: rgba(232, 140, 40, 0.22);
+  --bg-overlay: rgba(20, 12, 6, 0.78);
+
+  --border-default: #6a4a28;
+  --border-strong: #8a3a18;
+  --border-focus: #e88a28;
+  --ornament-frame: none;
+
+  --fg-default: #e8d8a8;
+  --fg-muted: #b89868;
+  --fg-faint: #786040;
+  --fg-on-accent: #1a1410;
+  --fg-on-success: #1a1410;
+  --fg-on-danger: #e8d8a8;
+  --fg-on-warning: #1a1410;
+
+  --rust: #8a3a18;
+  --bone: #d8c8a0;
+  --rad: #c8d038;
+  --ochre: #e88a28;
+
+  --font-display: 'Special Elite', 'Black Ops One', monospace;
+  --font-body: 'Special Elite', 'Courier Prime', monospace;
+  --font-mono: 'VT323', 'Courier New', monospace;
+  --type-scale-base: 14px;
+  --type-tracking-display: 0.10em;
+  --type-uppercase: uppercase;
+
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-pill: 0px;
+
+  --dur-fast: 60ms;
+  --dur-default: 180ms;
+  --dur-slow: 320ms;
+  --ease-default: cubic-bezier(0.6, 0, 0.4, 1);
+  --ease-emphasis: cubic-bezier(0.6, 0, 0.4, 1);
+  --motion-style: jittery;
+  --sound-pack: scrap;
+
+  /* Wave 30: radioactive-yellow pulse — high-contrast against ochre
+   * dust + matches the rust-belt accent palette. */
+  --node-pulse-color: hsl(var(--accent));
+
+  --cursor-default: auto;
+  --cursor-pointer: pointer;
+  --scrollbar-track: #2a2018;
+  --scrollbar-thumb: #8a3a18;
+
+  /* Shadcn HSL bridge */
+  --background: 30 28% 13%;
+  --foreground: 41 53% 78%;
+  --card: 28 32% 22%;
+  --card-foreground: 41 53% 78%;
+  --popover: 28 32% 22%;
+  --popover-foreground: 41 53% 78%;
+
+  --primary: 28 80% 53%;           /* ochre */
+  --primary-foreground: 24 28% 8%;
+  --secondary: 28 36% 17%;
+  --secondary-foreground: 41 53% 78%;
+  --muted: 28 36% 17%;
+  --muted-foreground: 35 36% 56%;
+  --accent: 64 56% 51%;            /* radioactive */
+  --accent-foreground: 24 28% 8%;
+
+  --destructive: 6 75% 41%;
+  --destructive-foreground: 41 53% 78%;
+  --success: 64 56% 41%;
+  --warning: 64 56% 51%;
+  --info: 28 80% 53%;
+
+  --border: 32 47% 28%;
+  --input: 32 47% 28%;
+  --ring: 28 80% 53%;
+
+  /* Action role bridge */
+  --action-run: 64 56% 41%;
+  --action-run-soft: 64 56% 41% / 0.20;
+  --action-run-hover: 64 56% 41% / 0.34;
+  --action-run-border: 64 56% 41% / 0.7;
+
+  --action-stop: 6 75% 41%;
+  --action-stop-soft: 6 75% 41% / 0.22;
+  --action-stop-hover: 6 75% 41% / 0.36;
+  --action-stop-border: 6 75% 41% / 0.7;
+
+  --action-save: 28 80% 53%;
+  --action-save-soft: 28 80% 53% / 0.20;
+  --action-save-hover: 28 80% 53% / 0.34;
+  --action-save-border: 28 80% 53% / 0.7;
+
+  --action-config: 64 56% 51%;
+  --action-config-soft: 64 56% 51% / 0.18;
+  --action-config-hover: 64 56% 51% / 0.32;
+  --action-config-border: 64 56% 51% / 0.6;
+
+  --action-secret: 28 80% 53%;
+  --action-secret-soft: 28 80% 53% / 0.16;
+  --action-secret-hover: 28 80% 53% / 0.30;
+  --action-secret-border: 28 80% 53% / 0.6;
+
+  --action-tools: 64 56% 51%;
+  --action-tools-soft: 64 56% 51% / 0.18;
+  --action-tools-hover: 64 56% 51% / 0.32;
+  --action-tools-border: 64 56% 51% / 0.6;
+
+  --tint-soft: 18%;
+  --tint-border: 45%;
+
+  /* Canvas backplane — cracked-earth fissures on 200x200 tile */
+  --canvas-grid:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g stroke='%23e88a28' stroke-width='0.4' fill='none' opacity='0.10'><path d='M40 10 Q60 60 30 100 Q10 140 50 180 M120 0 Q140 80 100 140 M180 30 Q160 80 190 130'/></g></svg>");
+  --canvas-grid-opacity: 1;
+}
+
+/* Body — dust + grit texture */
+:root[data-theme="wasteland"] body {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='d'><feTurbulence baseFrequency='0.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.40 0 0 0 0 0.18 0 0 0 0.16 0'/></filter><rect width='300' height='300' filter='url(%23d)'/></svg>"),
+    var(--bg-app);
+}
+
+:root[data-theme="wasteland"] ::selection {
+  background: rgba(232, 138, 40, 0.5);
+  color: #1a1410;
+}
+
+/* Wasteland scrollbars — rust thumb on dust track */
+:root[data-theme="wasteland"] ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+:root[data-theme="wasteland"] ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+:root[data-theme="wasteland"] ::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: var(--radius-sm, 0);
+}
+:root[data-theme="wasteland"] ::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--scrollbar-thumb) 80%, white);
+}
+
+/* ── Per-component decorations (Wave 16 port from handoff) ─── */
+
+:root[data-theme="wasteland"] .toolbar,
+:root[data-theme="wasteland"] .sidebar,
+:root[data-theme="wasteland"] .palette,
+:root[data-theme="wasteland"] .chat {
+  background:
+    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3)),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='r'><feTurbulence baseFrequency='0.5' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.54 0 0 0 0 0.22 0 0 0 0 0.10 0 0 0 0.18 0'/></filter><rect width='300' height='300' filter='url(%23r)'/></svg>"),
+    var(--bg-panel);
+}
+:root[data-theme="wasteland"] .toolbar { border-bottom: 2px solid var(--rust); box-shadow: inset 0 -1px 0 hsl(var(--accent)); }
+:root[data-theme="wasteland"] .sidebar { border-right: 2px solid var(--rust); }
+:root[data-theme="wasteland"] .palette { border-left: 2px solid var(--rust); }
+:root[data-theme="wasteland"] .chat    { border-top: 2px solid var(--rust); }
+
+/* CANVAS — cracked earth */
+:root[data-theme="wasteland"] .canvas {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g stroke='%23e88a28' stroke-width='0.4' fill='none' opacity='0.10'><path d='M40 10 Q60 60 30 100 Q10 140 50 180 M120 0 Q140 80 100 140 M180 30 Q160 80 190 130'/></g></svg>"),
+    var(--bg-canvas);
+}
+
+/* TYPOGRAPHY — typewritten */
+:root[data-theme="wasteland"] body { font-family: var(--font-body); color: var(--fg-default); }
+:root[data-theme="wasteland"] h1, :root[data-theme="wasteland"] h2, :root[data-theme="wasteland"] h3,
+:root[data-theme="wasteland"] .v-display {
+  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--accent));
+}
+
+/* SQUARE NODE — scrap metal plate, hand-stenciled */
+:root[data-theme="wasteland"] .sq-node-box {
+  background:
+    linear-gradient(180deg, rgba(232,140,40,0.06), transparent),
+    var(--bg-elevated);
+  border: 2px solid var(--rust); border-radius: 0;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 2px 2px 0 var(--rust);
+  color: hsl(var(--accent));
+  position: relative;
+}
+:root[data-theme="wasteland"] .sq-node-box::before {
+  content: ''; position: absolute; inset: 2px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='s'><feTurbulence baseFrequency='2' numOctaves='1'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100' height='100' filter='url(%23s)'/></svg>");
+  pointer-events: none;
+}
+:root[data-theme="wasteland"] .sq-node.selected .sq-node-box { border-color: hsl(var(--accent)); box-shadow: 0 0 0 2px hsl(var(--info) / 0.25), 2px 2px 0 var(--rust); }
+:root[data-theme="wasteland"] .sq-node-gear { background: var(--rust); color: hsl(var(--accent)); border: 1px solid hsl(var(--accent)); border-radius: 0; }
+:root[data-theme="wasteland"] .sq-node-handle.out { background: hsl(var(--accent)); }
+:root[data-theme="wasteland"] .sq-node-label { font-family: var(--font-display); letter-spacing: 0.10em; }
+
+/* ACTIONS — stenciled */
+:root[data-theme="wasteland"] .action-btn {
+  font-family: var(--font-display); letter-spacing: 0.10em; text-transform: uppercase;
+  border-radius: 0; border-width: 2px; border-style: dashed;
+}
+:root[data-theme="wasteland"] .action-run { background: hsl(var(--success-soft)); color: hsl(var(--success)); border-color: hsl(var(--success)); border-style: solid; }
+:root[data-theme="wasteland"] .action-deploy { background: hsl(var(--info-soft)); color: hsl(var(--accent)); border-color: hsl(var(--accent)); border-style: solid; }
+:root[data-theme="wasteland"] .action-save { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); border-color: hsl(var(--warning)); border-style: solid; }
+:root[data-theme="wasteland"] .action-stop { background: hsl(var(--danger-soft)); color: hsl(var(--danger)); border-color: hsl(var(--danger)); border-style: solid; }
+
+/* CARDS */
+:root[data-theme="wasteland"] .wf-card,
+:root[data-theme="wasteland"] .cat,
+:root[data-theme="wasteland"] .comp,
+:root[data-theme="wasteland"] .settings-section,
+:root[data-theme="wasteland"] .cred-card {
+  background: var(--bg-elevated); border: 1px solid var(--rust); border-radius: 0;
+}
+:root[data-theme="wasteland"] .wf-card.selected { border-color: hsl(var(--accent)); box-shadow: inset 3px 0 0 hsl(var(--accent)); }
+:root[data-theme="wasteland"] .cat-tile { background: var(--rust); color: hsl(var(--accent)); border-radius: 0; }
+:root[data-theme="wasteland"] .comp-ico { background: var(--bg-input); color: hsl(var(--accent)); border: 1px solid var(--rust); border-radius: 0; }
+
+/* CHAT */
+:root[data-theme="wasteland"] .chat-msg { border-radius: 0; }
+:root[data-theme="wasteland"] .chat-msg-user { background: hsl(var(--info-soft)); border: 1px solid hsl(var(--accent)); }
+:root[data-theme="wasteland"] .chat-msg-bot { background: var(--bg-elevated); border: 1px solid var(--rust); }
+
+/* STATUS BAR */
+:root[data-theme="wasteland"] .statusbar {
+  background: var(--bg-input); color: hsl(var(--accent)); border-top: 2px dashed var(--rust);
+  font-family: var(--font-mono); letter-spacing: 0.10em;
+}
+:root[data-theme="wasteland"] .statusbar .pip { background: var(--rad); box-shadow: 0 0 6px var(--rad); border-radius: 0; }
+
+/* MODAL */
+:root[data-theme="wasteland"] .modal { background: var(--bg-elevated); border: 3px solid hsl(var(--accent)); border-radius: 0; box-shadow: 6px 6px 0 var(--rust); }
+:root[data-theme="wasteland"] .modal-head { border-bottom: 2px dashed var(--rust); background: var(--bg-panel); }
+:root[data-theme="wasteland"] .modal-title { font-family: var(--font-display); color: hsl(var(--accent)); letter-spacing: 0.12em; }
+
+/* CMDK */
+:root[data-theme="wasteland"] .cmdk { background: var(--bg-elevated); border: 3px solid hsl(var(--accent)); border-radius: 0; }
+:root[data-theme="wasteland"] .cmdk-item.active { background: var(--bg-active); color: hsl(var(--accent)); border-left: 3px solid var(--rust); }

package/client/src/types/INodeProperties.ts

@@ -213,6 +213,11 @@ export interface INodeUIHints {
   isConsoleSink?: boolean;
   /** Agent panels show the connected-skills section. */
   hasSkills?: boolean;
+  /** InputSection / OutputPanel: this node is auxiliary configuration
+   * (memory, tool). Its panel inherits the parent's main inputs
+   * instead of showing direct upstream connections. Auto-derived on
+   * the backend from group membership; plugins can override. */
+  isConfigNode?: boolean;
 }
 
 export interface INodeTypeDescription {

package/client/src/types/NodeTypes.ts

@@ -25,4 +25,14 @@ export interface NodeData {
   disabled?: boolean; // Skip execution when true (n8n-style disable)
   customIcon?: string; // Custom icon: emoji, text, or image URL (http://, https://, data:, or /)
   [key: string]: any;
-}
+}
+
+/**
+ * CSSProperties extended to accept arbitrary CSS custom properties (e.g.
+ * `--node-color`). React's CSSProperties type rejects custom-property keys
+ * by default; this NodeStyle alias lets canvas-node components pass the
+ * per-definition node accent through to per-theme decorative CSS via a
+ * `--node-color` variable.
+ */
+import type { CSSProperties } from 'react';
+export type NodeStyle = CSSProperties & Record<`--${string}`, string | number>;

package/client/src/types/__tests__/cloudEvents.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Parity tests for the FE `WorkflowEvent` interface + `matchesType` helper
+ * vs the backend `WorkflowEvent.matches_type` Pydantic method.
+ *
+ * Mirrors the cases in `server/tests/services/test_events.py::test_matches_type_glob`
+ * exactly so a future divergence (in the server-side regex or the FE
+ * regex) fails one or both suites.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { matchesType, type WorkflowEvent } from '../cloudEvents';
+
+const sample: WorkflowEvent = {
+  specversion: '1.0',
+  id: 'abc123',
+  source: 'stripe://x',
+  type: 'stripe.charge.succeeded',
+  time: '2026-05-06T12:00:00Z',
+  data: {},
+};
+
+describe('matchesType', () => {
+  it('matches the wildcard "all"', () => {
+    expect(matchesType(sample, 'all')).toBe(true);
+  });
+
+  it('matches the empty string as wildcard', () => {
+    expect(matchesType(sample, '')).toBe(true);
+  });
+
+  it('matches an exact type', () => {
+    expect(matchesType(sample, 'stripe.charge.succeeded')).toBe(true);
+  });
+
+  it('matches a leaf-prefix glob', () => {
+    expect(matchesType(sample, 'stripe.charge.*')).toBe(true);
+  });
+
+  it('matches a root-prefix glob', () => {
+    expect(matchesType(sample, 'stripe.*')).toBe(true);
+  });
+
+  it('returns false for a non-matching prefix glob', () => {
+    expect(matchesType(sample, 'payment_intent.*')).toBe(false);
+  });
+
+  it('returns false for a non-matching exact type', () => {
+    expect(matchesType(sample, 'stripe.charge.failed')).toBe(false);
+  });
+
+  it('treats the prefix-only form as exact (no trailing dot)', () => {
+    // Server-side parity: matches_type('stripe') only matches type='stripe',
+    // NOT 'stripe.charge.succeeded' — the glob form requires '.*' to span.
+    expect(matchesType(sample, 'stripe')).toBe(false);
+    const root: WorkflowEvent = { ...sample, type: 'stripe' };
+    expect(matchesType(root, 'stripe')).toBe(true);
+    expect(matchesType(root, 'stripe.*')).toBe(true);
+  });
+});
+
+describe('WorkflowEvent shape', () => {
+  it('parses a backend-emitted credential_catalogue_updated payload', () => {
+    // Sample shape from server/services/status_broadcaster.py's
+    // broadcast_credential_event — copy of what hits the WS today.
+    const payload = {
+      type: 'credential_catalogue_updated',
+      data: {
+        specversion: '1.0',
+        id: 'a1b2c3d4',
+        source: 'machinaos://services/credentials',
+        type: 'credential.api_key.saved',
+        time: '2026-05-06T12:34:56.789Z',
+        subject: 'openai',
+        datacontenttype: 'application/json',
+        data: { provider: 'openai' },
+      },
+    };
+    const envelope = payload.data as WorkflowEvent<{ provider: string }>;
+    expect(envelope.specversion).toBe('1.0');
+    expect(envelope.type).toBe('credential.api_key.saved');
+    expect(envelope.subject).toBe('openai');
+    expect(envelope.data.provider).toBe('openai');
+    expect(matchesType(envelope, 'credential.api_key.*')).toBe(true);
+    expect(matchesType(envelope, 'credential.*')).toBe(true);
+    expect(matchesType(envelope, 'stripe.*')).toBe(false);
+  });
+
+  it('preserves CloudEvents extension attributes when present', () => {
+    const event: WorkflowEvent = {
+      ...sample,
+      workflow_id: 'wf_42',
+      trigger_node_id: 'trigger_abc',
+      correlation_id: 'corr_xyz',
+    };
+    expect(event.workflow_id).toBe('wf_42');
+    expect(event.trigger_node_id).toBe('trigger_abc');
+    expect(event.correlation_id).toBe('corr_xyz');
+  });
+});