machinaos 0.0.76 → 0.0.78

package/client/package.json

@@ -1,13 +1,15 @@
 {
   "name": "react-flow-client",
   "private": true,
-  "version": "0.0.76",
+  "version": "0.0.78",
   "type": "module",
   "scripts": {
     "start": "vite --host 0.0.0.0",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
+    "typecheck": "tsgo --noEmit",
+    "typecheck:tsc": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -15,59 +17,60 @@
     "test:nodepanels": "vitest run src/hooks/__tests__/useDragVariable.test.ts src/hooks/__tests__/useParameterPanel.test.ts src/components/parameterPanel/__tests__ src/components/__tests__/OutputPanel.test.tsx"
   },
   "dependencies": {
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.39.4",
     "@fontsource-variable/geist": "^5.2.8",
     "@hookform/resolvers": "^5.2.2",
-    "@lobehub/icons": "^2.45.0",
+    "@lobehub/icons": "^2.48.0",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/query-sync-storage-persister": "^5.100.2",
-    "@tanstack/react-query": "^5.100.2",
-    "@tanstack/react-query-persist-client": "^5.100.2",
-    "@types/google.maps": "^3.58.1",
-    "@types/node": "^24.3.1",
-    "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@tanstack/query-sync-storage-persister": "^5.100.10",
+    "@tanstack/react-query": "^5.100.10",
+    "@tanstack/react-query-persist-client": "^5.100.10",
+    "@types/google.maps": "^3.64.0",
+    "@types/node": "^24.12.3",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@uiw/react-json-view": "2.0.0-alpha.41",
-    "@vitejs/plugin-react": "^5.0.0",
-    "autoprefixer": "^10.4.21",
+    "@vitejs/plugin-react": "^5.2.0",
+    "autoprefixer": "^10.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "fuzzysort": "^3",
-    "globals": "^16.3.0",
-    "idb-keyval": "^6",
-    "lucide-react": "^1.8.0",
+    "cmdk": "^1.1.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "fuzzysort": "^3.1.0",
+    "globals": "^16.5.0",
+    "idb-keyval": "^6.2.2",
+    "lucide-react": "^1.14.0",
     "next-themes": "^0.4.6",
-    "postcss": "^8.5.6",
+    "partysocket": "1.1.18",
+    "postcss": "^8.5.14",
     "prismjs": "^1.30.0",
     "qrcode.react": "^4.2.0",
     "radix-ui": "^1.4.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.72.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
     "react-markdown": "^10.1.0",
     "react-simple-code-editor": "^0.14.1",
-    "react-virtuoso": "^4",
+    "react-virtuoso": "^4.18.7",
     "reactflow": "^11.11.4",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "shadcn": "^4.2.0",
+    "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.1.13",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.2",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.8"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.3",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.13"
   },
   "overrides": {
     "@emoji-mart/react": {
@@ -79,17 +82,18 @@
     }
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/react-query-devtools": "^5.100.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query-devtools": "^5.100.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/parser": "^8.54.0",
-    "@vitest/coverage-v8": "^2.1.9",
+    "@testing-library/user-event": "^14.6.1",
+    "@typescript-eslint/parser": "^8.59.2",
+    "@typescript/native-preview": "7.0.0-dev.20260504.1",
+    "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "jsdom": "^25.0.1",
     "rollup-plugin-visualizer": "^7.0.1",
-    "typescript-eslint": "^8.54.0",
-    "vitest": "^2.1.9"
+    "typescript-eslint": "^8.59.2",
+    "vitest": "^3.0.0"
   }
 }

package/client/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import Dashboard from './Dashboard';
 import ProtectedRoute from './components/auth/ProtectedRoute';
+import SvgFilterDefs from './components/SvgFilterDefs';
 import { useTheme } from './contexts/ThemeContext';
 import { Toaster } from '@/components/ui/sonner';
 
@@ -18,6 +19,7 @@ const App: React.FC = () => {
 
   return (
     <>
+      <SvgFilterDefs />
       <ProtectedRoute>
         <div className="flex h-screen w-screen">
           <Dashboard />

package/client/src/Dashboard.tsx

@@ -35,6 +35,9 @@ import CredentialsModal from './components/CredentialsModal';
 import OnboardingWizard from './components/onboarding/OnboardingWizard';
 import ErrorBoundary from './components/ui/ErrorBoundary';
 import ConsolePanel from './components/ui/ConsolePanel';
+import StatusBar from './components/ui/StatusBar';
+import CommandPaletteHost from './components/ui/CommandPaletteHost';
+import { useSoundSync, withSound } from './hooks/useSound';
 import { useAppTheme } from './hooks/useAppTheme';
 import { useWorkflowManagement } from './hooks/useWorkflowManagement';
 import { useWorkflowsQuery, WORKFLOWS_QUERY_KEY } from './hooks/useWorkflowsQuery';
@@ -44,10 +47,10 @@ import { useDragAndDrop } from './hooks/useDragAndDrop';
 import { useComponentPalette } from './hooks/useComponentPalette';
 import { useReactFlowNodes } from './hooks/useReactFlowNodes';
 import { useAutoSkillEdges } from './hooks/useAutoSkillEdges';
+import { useWorkflowOpsListener } from './hooks/useWorkflowOpsListener';
 import { useCopyPaste } from './hooks/useCopyPaste';
 import { useWebSocket } from './contexts/WebSocketContext';
 import { useNodeStatusStore } from './stores/nodeStatusStore';
-import { useTheme } from './contexts/ThemeContext';
 import {
   sanitizeNodesForComparison,
   sanitizeEdgesForComparison,
@@ -95,7 +98,7 @@ const createNodeTypes = (): Record<string, React.ComponentType<any>> => {
       types[spec.type] = COMPONENT_BY_KIND[kind];
     } else if (spec.type === 'teamMonitor') {
       types[spec.type] = TeamMonitorNode;
-    } else if (spec.type === 'masterSkill') {
+    } else if ((spec.uiHints as any)?.isMasterSkillEditor === true) {
       types[spec.type] = ToolkitNode;
     } else {
       types[spec.type] = SquareNode;
@@ -120,35 +123,36 @@ const initialEdges: Edge[] = [];
 // Inner component that uses useReactFlow() - must be inside ReactFlowProvider
 const DashboardContent: React.FC = () => {
   const theme = useAppTheme();
-  const { isDarkMode } = useTheme();
-  const {
-    currentWorkflow,
-    hasUnsavedChanges,
-    sidebarVisible,
-    componentPaletteVisible,
-    updateWorkflow,
-    loadWorkflow,
-    createNewWorkflow,
-    saveWorkflow,
-    deleteWorkflow,
-    migrateCurrentWorkflow,
-    toggleSidebar,
-    toggleComponentPalette,
-    proMode,
-    toggleProMode,
-    exportWorkflowToJSON,
-    exportWorkflowToFile,
-    setCurrentWorkflow,
-    selectedNode,
-    setSelectedNode,
-    renamingNodeId,
-    setRenamingNodeId,
-    // Per-workflow UI state (n8n pattern)
-    setWorkflowExecuting,
-    setWorkflowExecutionOrder,
-    setWorkflowViewport,
-    clearWorkflowExecutionState,
-  } = useAppStore();
+  // Slice selectors so a sidebar/palette toggle (or any other store
+  // mutation) does NOT re-render every node, edge, and toolbar in the
+  // Dashboard subtree. Action setters are stable refs from Zustand —
+  // single-field selectors are the cheapest way to read them.
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
+  const hasUnsavedChanges = useAppStore((s) => s.hasUnsavedChanges);
+  const sidebarVisible = useAppStore((s) => s.sidebarVisible);
+  const componentPaletteVisible = useAppStore((s) => s.componentPaletteVisible);
+  const updateWorkflow = useAppStore((s) => s.updateWorkflow);
+  const loadWorkflow = useAppStore((s) => s.loadWorkflow);
+  const createNewWorkflow = useAppStore((s) => s.createNewWorkflow);
+  const saveWorkflow = useAppStore((s) => s.saveWorkflow);
+  const deleteWorkflow = useAppStore((s) => s.deleteWorkflow);
+  const migrateCurrentWorkflow = useAppStore((s) => s.migrateCurrentWorkflow);
+  const toggleSidebar = useAppStore((s) => s.toggleSidebar);
+  const toggleComponentPalette = useAppStore((s) => s.toggleComponentPalette);
+  const proMode = useAppStore((s) => s.proMode);
+  const toggleProMode = useAppStore((s) => s.toggleProMode);
+  const exportWorkflowToJSON = useAppStore((s) => s.exportWorkflowToJSON);
+  const exportWorkflowToFile = useAppStore((s) => s.exportWorkflowToFile);
+  const setCurrentWorkflow = useAppStore((s) => s.setCurrentWorkflow);
+  const selectedNode = useAppStore((s) => s.selectedNode);
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
+  const renamingNodeId = useAppStore((s) => s.renamingNodeId);
+  const setRenamingNodeId = useAppStore((s) => s.setRenamingNodeId);
+  // Per-workflow UI state (n8n pattern)
+  const setWorkflowExecuting = useAppStore((s) => s.setWorkflowExecuting);
+  const setWorkflowExecutionOrder = useAppStore((s) => s.setWorkflowExecutionOrder);
+  const setWorkflowViewport = useAppStore((s) => s.setWorkflowViewport);
+  const clearWorkflowExecutionState = useAppStore((s) => s.clearWorkflowExecutionState);
   
   // Single source-to-store sync: push currentWorkflow.id into the
   // node-status Zustand store from the canonical app store. Previously
@@ -220,6 +224,9 @@ const DashboardContent: React.FC = () => {
     setNodes,
     setEdges,
   });
+  // Apply runtime canvas mutations pushed from the backend (e.g.,
+  // Agent Builder tools called by the LLM mid-execution).
+  useWorkflowOpsListener({ nodes, edges, setNodes, setEdges });
   const { copySelectedNodes, pasteNodes } = useCopyPaste({ nodes, edges, setNodes, setEdges, saveNodeParameters });
 
   // Override all agent nodes to use the global model. Agent membership is
@@ -273,11 +280,53 @@ const DashboardContent: React.FC = () => {
   const [settingsOpen, setSettingsOpen] = React.useState(false);
   const [credentialsOpen, setCredentialsOpen] = React.useState(false);
   const [onboardingReopenTrigger, setOnboardingReopenTrigger] = React.useState(0);
+  const [commandPaletteOpen, setCommandPaletteOpen] = React.useState(false);
 
   // Console panel visibility from store (database-backed)
   const consolePanelVisible = useAppStore((state) => state.consolePanelVisible);
   const toggleConsolePanelVisible = useAppStore((state) => state.toggleConsolePanelVisible);
 
+  // Sound effects: mirror the soundEnabled slice into the WebAudio
+  // engine and re-read --sound-pack from :root on every theme change.
+  // Mounting once here keeps every event handler that calls useSound()
+  // in lockstep with the active theme + user preference.
+  useSoundSync();
+
+  // Wave 33: pause CSS animations while the tab is in the background.
+  //
+  // Without this, browsers continue advancing CSS animation timing on
+  // hidden tabs (RAF is throttled to ~1Hz but `animation` keyframes
+  // accumulate paused frames in the compositor's queue). When the user
+  // returns, all 50+ executing nodes' three-layer box-shadow `node-pulse`
+  // animations resume simultaneously and the GPU compositor stalls for
+  // 100-200ms blending the paused frames + Cyber theme's full-viewport
+  // `cyber-flicker` / `cyber-roll` decorations. During the stall, input
+  // events queue but don't dispatch — first click on tab return appears
+  // unresponsive until the composite pass finishes (then the second
+  // click works, hence the "wakes up on interaction" pattern).
+  //
+  // Setting `animation-play-state: paused` on every element via a CSS
+  // rule keyed off `<html data-page-hidden>` flushes the queue. The
+  // requestAnimationFrame on resume defers the unpause until after the
+  // first input is ready to dispatch (one frame's delay, imperceptible).
+  useEffect(() => {
+    const handleVisibility = () => {
+      const root = document.documentElement;
+      if (document.hidden) {
+        root.setAttribute('data-page-hidden', '');
+      } else {
+        // Defer unpause to the next frame so the browser has a chance
+        // to clear the input queue before animations resume their
+        // composite work.
+        requestAnimationFrame(() => {
+          root.removeAttribute('data-page-hidden');
+        });
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+    return () => document.removeEventListener('visibilitychange', handleVisibility);
+  }, []);
+
   // Context menu state for node right-click
   const [contextMenu, setContextMenu] = React.useState<{
     nodeId: string;
@@ -500,11 +549,17 @@ const DashboardContent: React.FC = () => {
     strokeWidth: 2
   }), [theme.dracula.cyan]);
 
+  // `.react-flow` is intentionally transparent so the parent
+  // `.canvas-host` / `.canvas` background-image (per-theme
+  // `--canvas-grid` + multi-layer gradient stack from
+  // client/src/themes/<theme>.css) paints through. Painting a
+  // backgroundColor here would hide every theme decoration —
+  // Cyber perspective grid, Renaissance fleur-de-lis, Surveillance
+  // CCTV reticle, Steampunk brass bolts, etc.
   const reactFlowStyle = React.useMemo(() => ({
     width: '100%',
     height: '100%',
-    backgroundColor: theme.colors.background,
-  }), [theme.colors.background]);
+  }), []);
 
   const snapGrid: [number, number] = React.useMemo(() => [20, 20], []);
 
@@ -632,8 +687,8 @@ const DashboardContent: React.FC = () => {
     if (!currentWorkflow) return;
 
     // Check if there's at least one trigger node (workflow entry points)
-    // Trigger types: start, cronScheduler, webhookTrigger, whatsappReceive, telegramReceive, twitterReceive, gmailReceive, workflowTrigger, chatTrigger, taskTrigger
-    const triggerTypes = ['start', 'cronScheduler', 'webhookTrigger', 'whatsappReceive', 'telegramReceive', 'twitterReceive', 'gmailReceive', 'emailReceive', 'workflowTrigger', 'chatTrigger', 'taskTrigger'];
+    // Trigger types: start, cronScheduler, webhookTrigger, whatsappReceive, telegramReceive, twitterReceive, googleGmailReceive, workflowTrigger, chatTrigger, taskTrigger
+    const triggerTypes = ['start', 'cronScheduler', 'webhookTrigger', 'whatsappReceive', 'telegramReceive', 'twitterReceive', 'googleGmailReceive', 'emailReceive', 'workflowTrigger', 'chatTrigger', 'taskTrigger'];
     const hasTriggerNode = nodes.some(node => triggerTypes.includes(node.type || ''));
     if (!hasTriggerNode) {
       alert('No trigger node found in workflow.\n\nAdd a trigger node (Cron Scheduler, WhatsApp Receive, Webhook, Chat Trigger, etc.) to begin deployment.');
@@ -1057,7 +1112,8 @@ const DashboardContent: React.FC = () => {
         switch (event.key.toLowerCase()) {
           case 's':
             event.preventDefault();
-            handleSave();
+            // Match the toolbar Save button — fire the per-theme save sound.
+            withSound('save', handleSave)();
             break;
           case 'c':
             event.preventDefault();
@@ -1089,8 +1145,14 @@ const DashboardContent: React.FC = () => {
 
   return (
     <>
-      <style>{buildCanvasStyles(theme.colors, isDarkMode)}</style>
-      <div style={{
+      <style>{buildCanvasStyles(theme.colors)}</style>
+      {/* `app-frame` is the decorative-layer hook from the design handoff —
+          per-theme CSS files target this class for outer ornaments
+          (gilded corners under Renaissance, scanline overlay + corner
+          brackets under Cyber, riveted ridged frame under Steampunk,
+          REC dot under Surveillance, etc.). Decorations declare
+          pointer-events: none so they don't intercept clicks. */}
+      <div className="app-frame" style={{
         width: '100%',
         height: '100vh',
         display: 'flex',
@@ -1102,12 +1164,16 @@ const DashboardContent: React.FC = () => {
         <TopToolbar
           workflowName={currentWorkflow?.name || 'Untitled Workflow'}
           onWorkflowNameChange={handleWorkflowNameChange}
-          onSave={handleSave}
+          // `withSound('save'|'run', ...)` fires the per-theme audio
+          // cue BEFORE the async dispatch so feedback is instant
+          // regardless of save/deploy latency. No-op when sound is
+          // disabled or the active pack is `none`.
+          onSave={withSound('save', handleSave)}
           onNew={handleNew}
           onOpen={handleOpen}
-          onRun={handleRun}
+          onRun={withSound('run', handleRun)}
           isRunning={isExecuting}
-          onDeploy={handleDeploy}
+          onDeploy={withSound('run', handleDeploy)}
           onCancelDeployment={handleCancelDeployment}
           isDeploying={isCurrentWorkflowActive}
           hasUnsavedChanges={hasUnsavedChanges}
@@ -1158,10 +1224,27 @@ const DashboardContent: React.FC = () => {
             display: 'flex',
             position: 'relative',
           }}>
-            <div style={{
-              flex: 1,
-              backgroundColor: theme.colors.backgroundAlt,
-            }}>
+            {/* `canvas-host` + `canvas` activate per-theme canvas
+                decorations (cyber grid backplane, atomic starburst, rot
+                candlelight pools, surveillance crosshair brackets,
+                renaissance fleur-de-lis + marginalia, greek temple key
+                pattern). The `canvas` co-class is the handoff selector
+                used by every per-theme CSS file. Decorative pseudo-
+                elements declare pointer-events: none. */}
+            <div
+              className="canvas-host canvas"
+              style={{
+                flex: 1,
+                // `backgroundColor` intentionally omitted — the per-theme
+                // CSS in client/src/themes/<theme>.css owns the canvas
+                // surface paint via the `:root[data-theme="..."] .canvas`
+                // multi-layer `background` declaration (radial-gradient
+                // vignette + grid pattern + noise texture + var(--bg-canvas)).
+                // base.css `.canvas-host { background-image: var(--canvas-grid); }`
+                // provides the fallback grid layer.
+                position: 'relative',
+              }}
+            >
               <ErrorBoundary>
                 <ReactFlow
                   nodes={styledNodes}
@@ -1236,6 +1319,35 @@ const DashboardContent: React.FC = () => {
           nodes={nodes}
         />
 
+        {/* Status bar — fixed-bottom system console line; surfaces
+            connection state, workflow context, theme, clock. Always
+            present below ConsolePanel. */}
+        <StatusBar workflowName={currentWorkflow?.name} nodeCount={nodes.length} />
+
+        {/* Global command palette — ⌘K (Ctrl+K). Surface common shell
+            actions; the registered list is local to this component
+            because every handler is already in scope here. */}
+        <CommandPaletteHost
+          open={commandPaletteOpen}
+          onOpenChange={setCommandPaletteOpen}
+          handlers={{
+            save: withSound('save', handleSave),
+            newWorkflow: handleNew,
+            open: handleOpen,
+            run: withSound('run', handleDeploy),
+            stop: handleCancelDeployment,
+            isDeploying: isCurrentWorkflowActive,
+            exportFile: handleExportFile,
+            importJSON: handleImportJSON,
+            openSettings: () => setSettingsOpen(true),
+            openCredentials: () => setCredentialsOpen(true),
+            toggleSidebar,
+            toggleComponentPalette,
+            toggleConsolePanel: toggleConsolePanelVisible,
+          }}
+        />
+
+
         {/* Parameter Panels */}
         <ErrorBoundary>
           <ParameterPanel />

package/client/src/ParameterPanel.tsx

@@ -5,12 +5,10 @@ import { useParameterPanel } from './hooks/useParameterPanel';
 import { useAppStore } from './store/useAppStore';
 import { useWebSocket } from './contexts/WebSocketContext';
 import { ExecutionService, ExecutionResult } from './services/executionService';
-import { useAppTheme } from './hooks/useAppTheme';
 import { ActionButton } from './components/ui/action-button';
 import { NodeIcon } from './assets/icons';
 
 const ParameterPanel: React.FC = () => {
-  const theme = useAppTheme();
   const {
     selectedNode,
     nodeDefinition,
@@ -22,7 +20,7 @@ const ParameterPanel: React.FC = () => {
     isLoading,
   } = useParameterPanel();
 
-  const { currentWorkflow } = useAppStore();
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
   const { executeNode, getNodeParameters, clearNodeStatus, cancelEventWait, getNodeStatus } = useWebSocket();
 
   // Get current node status to check if waiting
@@ -136,13 +134,13 @@ const ParameterPanel: React.FC = () => {
   // Header actions with node name and buttons in middle area
   const headerActions = (
     <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2 text-[15px] font-semibold text-foreground">
+      <div className="flex items-center gap-2 font-display text-[15px] font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
         <NodeIcon
           icon={nodeDefinition.icon}
           className="h-5 w-5 text-xl"
         />
         <span>{nodeDefinition.displayName}</span>
-        {hasUnsavedChanges && <span style={{ color: theme.accent.orange }}>*</span>}
+        {hasUnsavedChanges && <span className="text-warning">*</span>}
       </div>
       <div className="flex items-center gap-2">
         {canExecute && !hideRunButton && (

package/client/src/adapters/nodeSpecToDescription.ts

@@ -51,6 +51,7 @@ export interface NodeSpec {
   componentKind?: 'square' | 'circle' | 'trigger' | 'start' | 'agent' | 'chat' | 'tool' | 'model' | 'generic';
   handles?: NodeSpecHandle[];
   hideOutputHandle?: boolean;
+  hideInputHandle?: boolean;
   visibility?: 'all' | 'normal' | 'dev';
 }
 

package/client/src/assets/icons/NodeIcon.tsx

@@ -27,6 +27,8 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 import { resolveIcon, resolveLibraryIcon, isImageIcon } from '.';
+import { useTheme } from '../../contexts/ThemeContext';
+import { THEMED_GLYPHS, ICON_KEYS, type IconKey } from './themedGlyphs';
 
 export interface NodeIconProps {
   /** Backend-declared icon string. May be undefined while the spec
@@ -44,7 +46,37 @@ export const NodeIcon: React.FC<NodeIconProps> = ({
   className,
   fallback = null,
 }) => {
+  const { theme } = useTheme();
   let inner: React.ReactNode;
+
+  // 1. Per-theme glyph override. Activates only when the icon prop is one
+  //    of the conceptual `IconKey`s (`agent`, `trigger`, `tool`, …) AND
+  //    the active theme declares an entry for it. Anything else (URLs,
+  //    `asset:foo`, `lobehub:Brand`, `lucide:Bot`, emoji) skips this
+  //    branch and falls through to the existing dispatch chain below.
+  //    The SVG strings come from `themedGlyphs.ts` — author-trusted
+  //    markup committed to the repo, never user input — so injecting
+  //    via `dangerouslySetInnerHTML` is safe here. Do not extend this
+  //    branch with values built from runtime input.
+  if (icon && ICON_KEYS.has(icon as IconKey)) {
+    const themedSvg = THEMED_GLYPHS[theme]?.[icon as IconKey];
+    if (themedSvg) {
+      // SAFE: `themedSvg` is an author-trusted constant from
+      // `themedGlyphs.ts` — committed-to-repo markup, never user input.
+      // The repo's ESLint config does not enable `react/no-danger`, so
+      // no eslint-disable is needed; this comment documents the trust
+      // boundary so future reviewers don't second-guess it.
+      return (
+        <span
+          className={cn('inline-flex items-center justify-center', className)}
+          dangerouslySetInnerHTML={{ __html: themedSvg }}
+        />
+      );
+    }
+    // No entry for this theme/key — fall through to the default chain so
+    // the consumer's existing icon (lucide / asset / emoji) still renders.
+  }
+
   const LibIcon = resolveLibraryIcon(icon);
   if (LibIcon) {
     // LibIcon is a runtime-resolved component reference; using it as a JSX

package/client/src/assets/icons/index.ts

@@ -44,6 +44,8 @@ import OpenRouter from '@lobehub/icons/es/OpenRouter';
 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';
 
 type RawSvg = string;
 
@@ -135,6 +137,8 @@ const LOBEHUB_BRANDS: Readonly<Record<string, any>> = {
   deepseek: DeepSeek,
   kimi: Kimi,
   mistral: Mistral,
+  ollama: Ollama,
+  lmstudio: LmStudio,
 };
 
 const ICON_LIBRARIES: Readonly<Record<string, LibraryResolver>> = {

package/client/src/assets/icons/stripe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#635BFF"/><path d="M14.4 13.2c0-.9.7-1.3 1.9-1.3 1.7 0 3.9.5 5.6 1.4V8.1c-1.9-.7-3.7-1-5.6-1-4.6 0-7.6 2.4-7.6 6.4 0 6.2 8.6 5.2 8.6 7.9 0 1.1-.9 1.4-2.2 1.4-1.9 0-4.3-.8-6.2-1.8v5.4c2.1.9 4.3 1.3 6.2 1.3 4.7 0 7.9-2.3 7.9-6.4 0-6.7-8.6-5.5-8.6-8.1z" fill="#fff"/></svg>