machinaos 0.0.76 → 0.0.78

package/client/src/components/credentials/primitives/ActionBar.tsx

@@ -5,13 +5,14 @@
 
 import React from 'react';
 import { Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { ActionButton } from '@/components/ui/action-button';
+import type { ActionButtonIntent } from '@/components/ui/action-button';
 
 export interface ActionDef {
   key: string;
   label: string;
-  /** Dracula color string from theme (e.g., theme.dracula.green). */
-  color: string;
+  /** Semantic role consumed by `<ActionButton intent="...">`. */
+  intent: ActionButtonIntent;
   onClick: () => void;
   disabled?: boolean;
   icon?: React.ReactNode;
@@ -31,20 +32,15 @@ const ActionBar: React.FC<Props> = ({ actions, loading }) => {
         .map((a) => {
           const isLoading = loading === a.key;
           return (
-            <Button
+            <ActionButton
               key={a.key}
-              variant="outline"
+              intent={a.intent}
               onClick={a.onClick}
               disabled={a.disabled || isLoading}
-              style={{
-                backgroundColor: `${a.color}25`,
-                borderColor: `${a.color}60`,
-                color: a.color,
-              }}
             >
               {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : a.icon}
               {a.label}
-            </Button>
+            </ActionButton>
           );
         })}
     </div>

package/client/src/components/credentials/primitives/OAuthConnect.tsx

@@ -6,9 +6,8 @@
 
 import React from 'react';
 import { Loader2, RotateCcw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { useAppTheme } from '../../../hooks/useAppTheme';
+import { ActionButton } from '@/components/ui/action-button';
 import FieldRenderer from './FieldRenderer';
 import ActionBar, { type ActionDef } from './ActionBar';
 import StatusCard from './StatusCard';
@@ -39,17 +38,22 @@ const OAuthConnect: React.FC<Props> = ({
   config, form, connected, stored, loading, error, icon,
   onSaveCredentials, onLogin, onLogout, onRefresh, extraSection,
 }) => {
-  const theme = useAppTheme();
+  // Some providers (e.g. Stripe) delegate auth entirely to an external
+  // CLI tool — they have no MachinaOs-side credentials to paste, so
+  // there's nothing to "store" before Login is meaningful.
+  const hasFields = !!config.fields?.length;
 
   const statusRows: StatusRowDef[] = [
     { label: 'Status', ok: () => connected, trueText: 'Connected', falseText: 'Not Connected' },
-    { label: 'Credentials', ok: () => stored, trueText: 'Configured', falseText: 'Not configured' },
+    ...(hasFields
+      ? [{ label: 'Credentials', ok: () => stored, trueText: 'Configured', falseText: 'Not configured' } as StatusRowDef]
+      : []),
   ];
 
   const actions: ActionDef[] = [
-    { key: 'login', label: `Login with ${config.name}`, color: theme.dracula.green, onClick: onLogin, disabled: !stored, hidden: connected },
-    { key: 'logout', label: 'Disconnect', color: theme.dracula.pink, onClick: onLogout, hidden: !connected },
-    { key: 'refresh', label: 'Refresh', color: theme.dracula.cyan, onClick: onRefresh, icon: <RotateCcw className="h-4 w-4" /> },
+    { key: 'login', label: `Login with ${config.name}`, intent: 'save', onClick: onLogin, disabled: hasFields && !stored, hidden: connected },
+    { key: 'logout', label: 'Disconnect', intent: 'stop', onClick: onLogout, hidden: !connected },
+    { key: 'refresh', label: 'Refresh', intent: 'save', onClick: onRefresh, icon: <RotateCcw className="h-4 w-4" /> },
   ];
 
   const isSaving = loading === 'save';
@@ -61,19 +65,10 @@ const OAuthConnect: React.FC<Props> = ({
       {!connected && config.fields && (
         <div className="flex w-full flex-col gap-3">
           <FieldRenderer fields={config.fields} form={form} />
-          <Button
-            variant="outline"
-            onClick={onSaveCredentials}
-            disabled={isSaving}
-            style={{
-              backgroundColor: `${theme.dracula.purple}25`,
-              borderColor: `${theme.dracula.purple}60`,
-              color: theme.dracula.purple,
-            }}
-          >
+          <ActionButton intent="secret" onClick={onSaveCredentials} disabled={isSaving}>
             {isSaving && <Loader2 className="h-4 w-4 animate-spin" />}
             Save Credentials
-          </Button>
+          </ActionButton>
           {config.instructions && (
             <div className="text-xs leading-relaxed text-muted-foreground">
               {config.instructions}
@@ -81,7 +76,7 @@ const OAuthConnect: React.FC<Props> = ({
                 <>
                   <br />
                   Callback URL:{' '}
-                  <code className="text-dracula-cyan">{config.callbackUrl}</code>
+                  <code className="text-accent">{config.callbackUrl}</code>
                 </>
               )}
             </div>
@@ -95,17 +90,13 @@ const OAuthConnect: React.FC<Props> = ({
         </Alert>
       )}
 
-      <div
-        className="rounded-md border p-3"
-        style={{
-          backgroundColor: `${theme.dracula.cyan}10`,
-          borderColor: `${theme.dracula.cyan}30`,
-        }}
-      >
+      <div className="rounded-md border border-accent/30 bg-accent/10 p-3">
         <div className="text-sm leading-relaxed text-muted-foreground">
           {connected
-            ? `Your ${config.name} account is connected.`
-            : stored
+            ? config.account_label
+              ? `Connected as ${config.account_label}.`
+              : `Your ${config.name} account is connected.`
+            : (stored || !hasFields)
               ? 'Click Login to authorize.'
               : 'Enter your credentials above to get started.'}
         </div>

package/client/src/components/credentials/sections/ProviderDefaultsSection.tsx

@@ -39,6 +39,7 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { useApiKeys, type ProviderDefaults, type ModelConstraints } from '../../../hooks/useApiKeys';
+import { useWebSocket } from '../../../contexts/WebSocketContext';
 
 const formSchema = z.object({
   default_model: z.string().optional().default(''),
@@ -58,6 +59,14 @@ interface Props {
 
 const ProviderDefaultsSection: React.FC<Props> = ({ providerId }) => {
   const { getProviderDefaults, saveProviderDefaults, getStoredModels, getModelConstraints, isConnected } = useApiKeys();
+  // Subscribe to apiKeyStatuses[providerId]: WebSocketContext updates
+  // this reactively after a successful validate (handler at line 2175-
+  // 2180) AND on the backend's api_key_status broadcast (line 686-696
+  // -- fired after the validator stores fresh models). Adding it as a
+  // dep to the fetch effect below makes the model dropdown refresh
+  // immediately after Fetch instead of requiring a page reload.
+  const { apiKeyStatuses } = useWebSocket();
+  const apiKeyStatus = apiKeyStatuses[providerId];
 
   const [models, setModels] = useState<string[]>([]);
   const [constraints, setConstraints] = useState<ModelConstraints | null>(null);
@@ -71,9 +80,18 @@ const ProviderDefaultsSection: React.FC<Props> = ({ providerId }) => {
   const thinkingEnabled = form.watch('thinking_enabled');
   const { isDirty } = form.formState;
 
-  // Load defaults + models on mount.
+  // Load defaults + models on mount AND on providerId change.
+  // Reset models / constraints synchronously when the provider switches
+  // so a stale list from the previous panel can't bleed through. Without
+  // this, opening "OpenAI" then "LM Studio" left the OpenAI model list
+  // visible in the LM Studio dropdown — the dropdown only saw an
+  // explicit `setModels(m)` when the new fetch returned a non-empty
+  // list, so an empty `lmstudio` response (no Fetch clicked yet) was a
+  // no-op and the previous panel's state survived.
   useEffect(() => {
     if (!isConnected) return;
+    setModels([]);
+    setConstraints(null);
     let cancelled = false;
     (async () => {
       setLoading(true);
@@ -84,14 +102,17 @@ const ProviderDefaultsSection: React.FC<Props> = ({ providerId }) => {
         ]);
         if (!cancelled) {
           form.reset((d as Partial<ProviderDefaults>) ?? {});
-          if (m?.length) setModels(m);
+          // Unconditional set: clears the dropdown when the fetch comes
+          // back empty (e.g. local-LLM panel before "Fetch" was clicked,
+          // or a freshly-removed key).
+          setModels(m ?? []);
         }
       } finally {
         if (!cancelled) setLoading(false);
       }
     })();
     return () => { cancelled = true; };
-  }, [providerId, isConnected]);
+  }, [providerId, isConnected, apiKeyStatus]);
 
   // Refetch constraints when selected model changes.
   useEffect(() => {

package/client/src/components/credentials/types.ts

@@ -4,6 +4,9 @@
  * ALL conditional logic lives in config — panel components are pure renderers.
  */
 
+import type { ActionButtonIntent } from '@/components/ui/action-button';
+export type { ActionButtonIntent };
+
 // ============================================================================
 // Panel kinds — one renderer branch per kind
 // ============================================================================
@@ -19,7 +22,11 @@ export interface FieldDef {
   label: string;
   secret?: boolean;
   placeholder?: string;
+  /** Pre-fill value when nothing stored. See ServerFieldDef.default. */
+  default?: string;
   required?: boolean;
+  /** Help text shown beneath the input (always visible). */
+  help?: string;
 }
 
 // ============================================================================
@@ -43,8 +50,9 @@ export interface StatusRowDef {
 export interface ActionDef {
   key: string;
   label: string;
-  /** Theme color key (e.g., 'green', 'pink', 'cyan', 'orange'). Resolved at render. */
-  themeColor: string;
+  /** Semantic role consumed by `<ActionButton intent="...">`. Themes
+   * remap the underlying --action-X tokens without touching call sites. */
+  intent: ActionButtonIntent;
   /** Return true to hide this action. */
   hidden?: (status: any, stored: boolean) => boolean;
   /** Return true to disable this action. */
@@ -115,6 +123,8 @@ export interface ProviderConfig {
   usageService?: string;
   /** Server-resolved: whether a key/token exists in the credentials DB. */
   stored?: boolean;
+  /** Connected account identifier (email or display name) for OAuth providers. */
+  account_label?: string | null;
 }
 
 // ============================================================================

package/client/src/components/credentials/useCredentialPanel.ts

@@ -45,40 +45,48 @@ export function useCredentialPanel(config: ProviderConfig, visible: boolean) {
   }, [config.id]);
 
   const {
-    validateApiKey, saveApiKey, getStoredApiKey, hasStoredKey, removeApiKey,
+    validateApiKey, saveApiKey, removeApiKey,
     getProviderDefaults, saveProviderDefaults,
     getProviderUsageSummary, getAPIUsageSummary, getStoredModels, getModelConstraints,
     isConnected,
   } = useApiKeys();
   const { sendRequest } = useWebSocket();
 
-  // Server-cached credential values. Fields load in parallel via
-  // Promise.all so a 3-field provider takes one WS round-trip instead
-  // of six sequential ones.
-  const credentialValuesQuery = useQuery<CredentialFormValues, Error>({
+  // Server-cached credential values. Single RPC per field consolidates
+  // the previous hasStoredKey + getStoredApiKey pair (both went to
+  // ``get_stored_api_key`` anyway). The handler returns
+  // ``{hasKey, apiKey?}``; ``apiKey`` may carry the catalogue's
+  // ``default`` (e.g. local-LLM canonical Base URL) even when
+  // ``hasKey: false``, so the form renders a sensible value on a fresh
+  // install. ``hadStored`` tracks the real server state separately so
+  // the validated/connected badge stays honest — pre-filled defaults
+  // do NOT flip it to true.
+  const credentialValuesQuery = useQuery<{ values: CredentialFormValues; hadStored: boolean }, Error>({
     queryKey: queryKeys.credentialValues.byProvider(config.id).queryKey,
     queryFn: async () => {
-      if (!config.fields) return EMPTY_VALUES;
-      const entries = await Promise.all(
+      if (!config.fields) return { values: EMPTY_VALUES, hadStored: false };
+      const results = await Promise.all(
         config.fields.map(async (field) => {
           const storeKey = field.key === 'apiKey' ? config.id : field.key;
-          const has = await hasStoredKey(storeKey);
-          if (!has) return null;
-          const val = await getStoredApiKey(storeKey);
-          return val ? ([field.key, val] as const) : null;
+          const r = await sendRequest<{ hasKey: boolean; apiKey?: string }>(
+            'get_stored_api_key', { provider: storeKey },
+          );
+          return { key: field.key, hasKey: r.hasKey, apiKey: r.apiKey };
         }),
       );
       const next: CredentialFormValues = {};
-      for (const entry of entries) {
-        if (entry) next[entry[0]] = entry[1];
+      let hadStored = false;
+      for (const r of results) {
+        if (r.apiKey) next[r.key] = r.apiKey;
+        if (r.hasKey) hadStored = true;
       }
-      return next;
+      return { values: next, hadStored };
     },
     enabled: visible && isConnected && !!config.fields,
     staleTime: STALE_TIME.FOREVER,
   });
 
-  const values = credentialValuesQuery.data ?? EMPTY_VALUES;
+  const values = credentialValuesQuery.data?.values ?? EMPTY_VALUES;
 
   // Imperative form-like API kept for compat with existing panel code.
   // Writes go through setQueryData on the provider's query so the cache
@@ -87,11 +95,23 @@ export function useCredentialPanel(config: ProviderConfig, visible: boolean) {
   valuesRef.current = values;
 
   const providerKey = config.id;
+  // The query stores `{values, hadStored}` (see queryFn above), NOT a flat
+  // CredentialFormValues. Earlier this called
+  // `setQueryData<CredentialFormValues>(...)` and the updater spread `prev`
+  // as if it were the inner `values` dict — at runtime `prev` was the whole
+  // envelope, so typed characters were merged at the envelope level next to
+  // `values` / `hadStored` and the input selector (which reads `.values[k]`)
+  // never saw them. Net effect: input felt unresponsive even though the
+  // setter was firing. Fix: update only the envelope's inner `values` and
+  // preserve `hadStored` verbatim.
   const writeValues = useCallback(
     (updater: (prev: CredentialFormValues) => CredentialFormValues) => {
-      qc.setQueryData<CredentialFormValues>(
+      qc.setQueryData<{ values: CredentialFormValues; hadStored: boolean }>(
         queryKeys.credentialValues.byProvider(providerKey).queryKey,
-        (prev) => updater(prev ?? EMPTY_VALUES),
+        (prev) => ({
+          values: updater(prev?.values ?? EMPTY_VALUES),
+          hadStored: prev?.hadStored ?? false,
+        }),
       );
     },
     [qc, providerKey],
@@ -118,8 +138,12 @@ export function useCredentialPanel(config: ProviderConfig, visible: boolean) {
   );
 
   // Sync stored from query on first load — if the backend already has
-  // a key, mark stored=true so the badge renders without a validate click.
-  const queriedStored = Object.keys(values).length > 0;
+  // mark stored=true based on the real server state (`hadStored`),
+  // NOT on whether the form happens to be populated. Pre-filled
+  // catalogue defaults (e.g. local-LLM Base URL) populate the form
+  // without being saved, so deriving from `Object.keys(values).length`
+  // would prematurely show the connected badge.
+  const queriedStored = credentialValuesQuery.data?.hadStored ?? false;
   if (queriedStored && !stored) setStored(true);
 
   // Generic action executor — replaces 19 duplicate handler functions.

package/client/src/components/icons/AIProviderIcons.tsx

@@ -12,6 +12,8 @@ import Cerebras from '@lobehub/icons/es/Cerebras';
 import DeepSeek from '@lobehub/icons/es/DeepSeek';
 import Kimi from '@lobehub/icons/es/Kimi';
 import Mistral from '@lobehub/icons/es/Mistral';
+import Ollama from '@lobehub/icons/es/Ollama';
+import LmStudio from '@lobehub/icons/es/LmStudio';
 import { dracula, solarized } from '../../styles/theme';
 
 // Icon size constant for consistency
@@ -58,6 +60,16 @@ export const MistralIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) =
   <Mistral.Color size={size} />
 );
 
+// Local LLM servers — Ollama exposes a Color variant; LmStudio's lobehub
+// entry only ships an Avatar so we use that for parity.
+export const OllamaIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <Ollama.Avatar size={size} />
+);
+
+export const LmStudioIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <LmStudio.Avatar size={size} />
+);
+
 // Map provider IDs to their icon components
 export const AI_PROVIDER_ICONS: Record<string, React.FC<{ size?: number }>> = {
   openai: OpenAIIcon,
@@ -69,6 +81,8 @@ export const AI_PROVIDER_ICONS: Record<string, React.FC<{ size?: number }>> = {
   deepseek: DeepSeekIcon,
   kimi: KimiIcon,
   mistral: MistralIcon,
+  ollama: OllamaIcon,
+  lmstudio: LmStudioIcon,
 };
 
 // Centralized provider metadata (icon ref, theme color, display label).
@@ -86,6 +100,8 @@ export const AI_PROVIDER_META: Record<string, { iconRef: string; Icon: React.FC<
   deepseek:   { iconRef: 'lobehub:DeepSeek',   Icon: DeepSeekIcon,   color: dracula.cyan,     label: 'DeepSeek' },
   kimi:       { iconRef: 'lobehub:Kimi',       Icon: KimiIcon,       color: dracula.purple,   label: 'Kimi' },
   mistral:    { iconRef: 'lobehub:Mistral',    Icon: MistralIcon,    color: dracula.pink,     label: 'Mistral' },
+  ollama:     { iconRef: 'lobehub:Ollama',     Icon: OllamaIcon,     color: dracula.foreground, label: 'Ollama' },
+  lmstudio:   { iconRef: 'lobehub:LmStudio',   Icon: LmStudioIcon,   color: solarized.cyan,   label: 'LM Studio' },
 };
 
 // Get icon component by provider ID

package/client/src/components/onboarding/OnboardingWizard.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { ArrowLeft, ArrowRight, Check } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import { ActionButton } from '@/components/ui/action-button';
 import { cn } from '@/lib/utils';
 import Modal from '../ui/Modal';
 import { useOnboarding } from '../../hooks/useOnboarding';
-import { useAppTheme } from '../../hooks/useAppTheme';
 import WelcomeStep from './steps/WelcomeStep';
 import ConceptsStep from './steps/ConceptsStep';
 import ApiKeyStep from './steps/ApiKeyStep';
@@ -17,42 +17,33 @@ interface OnboardingWizardProps {
   reopenTrigger?: number;
 }
 
-const stepItems = [
-  { title: 'Welcome' },
-  { title: 'Concepts' },
-  { title: 'API Keys' },
-  { title: 'Canvas' },
-  { title: 'Get Started' },
+// Single source of truth for the wizard's step list. Length feeds the
+// hook's totalSteps and the progress indicator; renderer is dispatched
+// by index. Adding a step is a one-line edit here.
+const STEPS: { title: string; render: (props: { onOpenCredentials: () => void }) => React.ReactNode }[] = [
+  { title: 'Welcome',     render: () => <WelcomeStep /> },
+  { title: 'Concepts',    render: () => <ConceptsStep /> },
+  { title: 'API Keys',    render: ({ onOpenCredentials }) => <ApiKeyStep onOpenCredentials={onOpenCredentials} /> },
+  { title: 'Canvas',      render: () => <CanvasStep /> },
+  { title: 'Get Started', render: () => <GetStartedStep /> },
 ];
 
 const OnboardingWizard: React.FC<OnboardingWizardProps> = ({ onOpenCredentials, reopenTrigger }) => {
-  const theme = useAppTheme();
   const {
     isVisible,
     currentStep,
     isLoading,
     hasChecked,
-    totalSteps,
     nextStep,
     prevStep,
     skip,
     complete,
-  } = useOnboarding(reopenTrigger);
+  } = useOnboarding(reopenTrigger, STEPS.length);
 
   if (!isVisible || !hasChecked || isLoading) return null;
 
-  const isLastStep = currentStep >= totalSteps - 1;
-
-  const renderStep = () => {
-    switch (currentStep) {
-      case 0: return <WelcomeStep />;
-      case 1: return <ConceptsStep />;
-      case 2: return <ApiKeyStep onOpenCredentials={onOpenCredentials} />;
-      case 3: return <CanvasStep />;
-      case 4: return <GetStartedStep />;
-      default: return <WelcomeStep />;
-    }
-  };
+  const isLastStep = currentStep >= STEPS.length - 1;
+  const safeIndex = Math.min(Math.max(currentStep, 0), STEPS.length - 1);
 
   return (
     <Modal
@@ -61,19 +52,14 @@ const OnboardingWizard: React.FC<OnboardingWizardProps> = ({ onOpenCredentials,
       title="Welcome Guide"
       maxWidth="95vw"
       maxHeight="95vh"
-      autoHeight
     >
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '16px 20px 12px',
-      }}>
+      <div className="flex flex-col px-5 pt-4 pb-3">
         {/* Progress steps */}
         <ol className="mb-4 flex w-full items-center">
-          {stepItems.map((item, idx) => {
+          {STEPS.map((item, idx) => {
             const status: 'completed' | 'active' | 'upcoming' =
               idx < currentStep ? 'completed' : idx === currentStep ? 'active' : 'upcoming';
-            const isLast = idx === stepItems.length - 1;
+            const isLast = idx === STEPS.length - 1;
             return (
               <li key={item.title} className="flex flex-1 items-center gap-2">
                 <div
@@ -108,30 +94,16 @@ const OnboardingWizard: React.FC<OnboardingWizardProps> = ({ onOpenCredentials,
         </ol>
 
         {/* Step content */}
-        <div style={{
-          overflowY: 'auto',
-          minHeight: 500,
-          maxHeight: 'calc(95vh - 200px)',
-          paddingRight: 4,
-        }}>
-          {renderStep()}
+        <div className="overflow-y-auto pr-1 max-h-[calc(95vh-200px)]">
+          {STEPS[safeIndex].render({ onOpenCredentials })}
         </div>
 
         {/* Footer navigation */}
-        <div style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingTop: 12,
-          marginTop: 12,
-          borderTop: `1px solid ${theme.colors.border}`,
-        }}>
-          {/* Left: Skip */}
+        <div className="flex items-center justify-between border-t border-border pt-3 mt-3">
           <Button variant="ghost" size="sm" onClick={skip} className="text-muted-foreground">
             Skip for now
           </Button>
 
-          {/* Right: Back + Next/Finish */}
           <div className="flex items-center gap-2">
             {currentStep > 0 && (
               <Button variant="outline" onClick={prevStep}>
@@ -140,27 +112,15 @@ const OnboardingWizard: React.FC<OnboardingWizardProps> = ({ onOpenCredentials,
               </Button>
             )}
             {isLastStep ? (
-              <Button
-                onClick={complete}
-                style={{
-                  backgroundColor: theme.dracula.green,
-                  borderColor: theme.dracula.green,
-                }}
-              >
+              <ActionButton intent="run" onClick={complete}>
                 <Check className="h-4 w-4" />
                 Start Building
-              </Button>
+              </ActionButton>
             ) : (
-              <Button
-                onClick={nextStep}
-                style={{
-                  backgroundColor: theme.dracula.purple,
-                  borderColor: theme.dracula.purple,
-                }}
-              >
+              <ActionButton intent="tools" onClick={nextStep}>
                 Next
                 <ArrowRight className="h-4 w-4" />
-              </Button>
+              </ActionButton>
             )}
           </div>
         </div>

package/client/src/components/onboarding/nodeRoleClasses.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared role-to-Tailwind-classes map for the onboarding step cards.
+ * Each role keys into the existing `--node-X` triplet (soft bg + border
+ * + accent text). Co-located with the onboarding folder because both
+ * consumers (ConceptsStep, GetStartedStep) live here.
+ */
+
+export type NodeRole = 'model' | 'skill' | 'agent' | 'workflow' | 'trigger';
+
+export interface NodeRoleClasses {
+  /** Tinted background + border for the card surface. */
+  card: string;
+  /** Accent text colour matching the card's role. */
+  text: string;
+}
+
+export const NODE_ROLE_CLASSES: Record<NodeRole, NodeRoleClasses> = {
+  model:    { card: 'bg-node-model-soft border-node-model-border',       text: 'text-node-model' },
+  skill:    { card: 'bg-node-skill-soft border-node-skill-border',       text: 'text-node-skill' },
+  agent:    { card: 'bg-node-agent-soft border-node-agent-border',       text: 'text-node-agent' },
+  workflow: { card: 'bg-node-workflow-soft border-node-workflow-border', text: 'text-node-workflow' },
+  trigger:  { card: 'bg-node-trigger-soft border-node-trigger-border',   text: 'text-node-trigger' },
+};

package/client/src/components/onboarding/steps/CanvasStep.tsx

@@ -19,13 +19,19 @@ const CanvasStep: React.FC = () => {
         </p>
       </div>
 
-      {/* Visual layout diagram */}
+      {/*
+       * Visual layout diagram. Region tints mirror the live UI's
+       * accent colours via the predefined --node-X-soft tokens — no
+       * opacity arithmetic at the call site. Each region maps to a
+       * node-group colour: toolbar→workflow (orange), sidebar→model
+       * (cyan), canvas→agent (purple), palette→skill (green),
+       * console→trigger (pink). Decorative use of the dracula text
+       * colours is permitted (tutorial diagram intentionally mirrors
+       * the live UI palette).
+       */}
       <div className="mb-4 overflow-hidden rounded-lg border border-border">
         {/* Toolbar */}
-        <div
-          className="flex items-center gap-1.5 border-b border-border px-2.5 py-1.5"
-          style={{ backgroundColor: 'hsl(var(--dracula-orange) / 0.12)' }}
-        >
+        <div className="flex items-center gap-1.5 border-b border-border bg-node-workflow-soft px-2.5 py-1.5">
           <Wrench className="h-3 w-3 text-dracula-orange" />
           <span className="text-xs font-semibold text-dracula-orange">Toolbar</span>
           <div className="flex-1" />
@@ -37,10 +43,7 @@ const CanvasStep: React.FC = () => {
         {/* Main area */}
         <div className="flex h-[120px]">
           {/* Sidebar */}
-          <div
-            className="flex w-20 flex-col gap-1 border-r border-border p-1.5"
-            style={{ backgroundColor: 'hsl(var(--dracula-cyan) / 0.08)' }}
-          >
+          <div className="flex w-20 flex-col gap-1 border-r border-border bg-node-model-soft p-1.5">
             <span className="text-[9px] font-semibold text-dracula-cyan">Sidebar</span>
             {['Workflow 1', 'Workflow 2'].map((w) => (
               <div key={w} className="rounded-sm bg-muted px-1 py-0.5 text-[8px] text-muted-foreground">
@@ -50,10 +53,7 @@ const CanvasStep: React.FC = () => {
           </div>
 
           {/* Canvas */}
-          <div
-            className="relative flex flex-1 items-center justify-center"
-            style={{ backgroundColor: 'hsl(var(--dracula-purple) / 0.06)' }}
-          >
+          <div className="relative flex flex-1 items-center justify-center bg-node-agent-soft">
             <div className="text-center">
               <Layout className="mx-auto h-5 w-5 text-dracula-purple opacity-50" />
               <div className="mt-0.5 text-[9px] text-dracula-purple">Canvas</div>
@@ -61,10 +61,7 @@ const CanvasStep: React.FC = () => {
           </div>
 
           {/* Palette */}
-          <div
-            className="flex w-20 flex-col gap-1 border-l border-border p-1.5"
-            style={{ backgroundColor: 'hsl(var(--dracula-green) / 0.08)' }}
-          >
+          <div className="flex w-20 flex-col gap-1 border-l border-border bg-node-skill-soft p-1.5">
             <span className="text-[9px] font-semibold text-dracula-green">Palette</span>
             {['AI Agents', 'AI Models', 'Skills'].map((c) => (
               <div key={c} className="rounded-sm bg-muted px-1 py-0.5 text-[8px] text-muted-foreground">
@@ -75,10 +72,7 @@ const CanvasStep: React.FC = () => {
         </div>
 
         {/* Console */}
-        <div
-          className="flex items-center gap-1.5 border-t border-border px-2.5 py-1.5"
-          style={{ backgroundColor: 'hsl(var(--dracula-pink) / 0.08)' }}
-        >
+        <div className="flex items-center gap-1.5 border-t border-border bg-node-trigger-soft px-2.5 py-1.5">
           <Terminal className="h-3 w-3 text-dracula-pink" />
           <span className="text-xs font-semibold text-dracula-pink">Console</span>
           <div className="flex-1" />