feat(ai-studio): node types show their prototype accent colors

apps/ai-studio/src/components/human-decision/node-template/human-decision-template.test.tsx

@@ -155,6 +155,21 @@ describe('HumanDecisionNodeTemplate', () => {
     expect(handles(container, 'target').map((handle) => handle.dataset['handleid'])).toEqual(['target']);
   });
 
+  it("tints its icon with the node type's accent", () => {
+    render(
+      <HumanDecisionNodeTemplate
+        id="human-1"
+        icon="UserCheck"
+        accent="violet"
+        label="Human decision"
+        description=""
+        data={data}
+      />,
+    );
+
+    expect(container.querySelector('[style*="--wb-public-node-icon-color-violet"]')).not.toBeNull();
+  });
+
   it('renders the actions inside the OptionalNodeContent slot, where the execution markers mount', () => {
     render(
       <HumanDecisionNodeTemplate id="human-1" icon="UserCheck" label="Human decision" description="" data={data} />,

apps/ai-studio/src/data/node-types.test.ts

@@ -0,0 +1,24 @@
+import type { PaletteItem, PaletteItemOrGroup } from '@workflowbuilder/sdk';
+import { describe, expect, it } from 'vitest';
+
+import { aiStudioNodeTypes } from './node-types';
+
+function paletteItems(entries: PaletteItemOrGroup[]): PaletteItem[] {
+  return entries.flatMap((entry) => ('groupItems' in entry ? paletteItems(entry.groupItems) : [entry]));
+}
+
+describe('aiStudioNodeTypes', () => {
+  it('gives every node type its prototype accent', () => {
+    const accents = paletteItems(aiStudioNodeTypes)
+      .map((item) => [item.type, item.accent])
+      .sort(([a], [b]) => String(a).localeCompare(String(b)));
+
+    expect(accents).toStrictEqual([
+      ['ai-studio/ai-agent', 'violet-gradient'],
+      ['ai-studio/decision', 'green'],
+      ['ai-studio/human-decision', 'violet'],
+      ['ai-studio/trigger', 'orange'],
+      ['ai-studio/visualize', 'green'],
+    ]);
+  });
+});

apps/ai-studio/src/nodes/ai-agent/index.ts

@@ -9,6 +9,8 @@ export const aiAgentPaletteItem: PaletteItem<AiAgentSchema> = {
   description: 'Run an LLM prompt',
   type: 'ai-studio/ai-agent',
   icon: 'AiAgent',
+  // Renders the generic node template, which has no gradient default.
+  accent: 'violet-gradient',
   templateType: NodeType.Node,
   defaultPropertiesData,
   schema,

apps/ai-studio/src/nodes/decision/index.ts

@@ -9,6 +9,7 @@ export const decisionPaletteItem: PaletteItem<DecisionSchema> = {
   description: 'Route by condition',
   type: 'ai-studio/decision',
   icon: 'ArrowsSplit',
+  accent: 'green',
   templateType: NodeType.DecisionNode,
   defaultPropertiesData,
   schema,

apps/ai-studio/src/nodes/human-decision/index.ts

@@ -19,6 +19,7 @@ export const humanDecisionPaletteItem: PaletteItem<HumanDecisionSchema> = {
   description: 'A person decides before the run continues',
   type: humanDecisionNodeType,
   icon: 'UserCheck',
+  accent: 'violet',
   defaultPropertiesData,
   schema,
   uischema,

apps/ai-studio/src/nodes/trigger/index.ts

@@ -9,6 +9,7 @@ export const triggerPaletteItem: PaletteItem<TriggerSchema> = {
   description: 'Start the workflow',
   type: 'ai-studio/trigger',
   icon: 'Lightning',
+  accent: 'orange',
   templateType: NodeType.StartNode,
   isStartNode: true,
   defaultPropertiesData,

apps/ai-studio/src/nodes/visualize/index.ts

@@ -9,6 +9,7 @@ export const visualizePaletteItem: PaletteItem<VisualizeSchema> = {
   description: 'Render the result visually',
   type: 'ai-studio/visualize',
   icon: 'Eye',
+  accent: 'green',
   templateType: NodeType.Node,
   defaultPropertiesData,
   schema,