fix: styles

frontend/src/components/graph/BaseNode.tsx

@@ -206,7 +206,7 @@ export function BaseNodeFooter({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="base-node-footer"
       className={cn(
-        "shrink-0 flex flex-col items-center gap-y-2 border-t p-1",
+        "shrink-0 flex flex-col items-center gap-y-2 border-t border-border/70 pt-2 px-1 pb-1",
         className,
       )}
       {...props}

frontend/src/components/nodes/render/RenderingNode.tsx

@@ -28,7 +28,7 @@ import { NodeHeaderTitle } from '@/components/graph/NodeHeaderTitle'
 import { NodeMenubar } from '@/components/graph/NodeMenubar'
 import { NodeStatusIndicator } from '@/components/graph/NodeStatusIndicator'
 import { MenubarCheckboxItem, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar'
-import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown } from 'lucide-react'
+import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown, Loader2 } from 'lucide-react'
 import { InputHandle } from '@/components/graph/NodeHandles'
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 import { Input } from '@/components/ui/input'
@@ -41,6 +41,7 @@ import {
     DropdownMenuLabel,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
 import { useTheme } from '@/lib/themeContext'
 import { toast } from 'sonner'
 
@@ -488,13 +489,22 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
                                         type="button"
                                         size="sm"
                                         variant="outline"
-                                        className="h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs"
+                                        disabled={loading}
+                                        className={cn(
+                                            'h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs',
+                                            effectiveUpdateMode === 'manual' && hasPendingInputs && 'border-l-2 border-l-amber-500 bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20'
+                                        )}
                                         onClick={(e) => {
                                             e.stopPropagation()
                                             updateData({ runTrigger: (data?.runTrigger ?? 0) + 1 })
                                         }}
+                                        title={effectiveUpdateMode === 'manual' && hasPendingInputs ? 'Inputs changed — click to render' : undefined}
                                     >
-                                        <Play className="size-3.5" />
+                                        {loading ? (
+                                            <Loader2 className="size-3.5 animate-spin shrink-0" aria-hidden />
+                                        ) : (
+                                            <Play className="size-3.5 shrink-0" />
+                                        )}
                                         Run
                                     </Button>
                                     <DropdownMenu>
@@ -503,7 +513,10 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
                                                 type="button"
                                                 size="sm"
                                                 variant="outline"
-                                                className="h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal"
+                                                className={cn(
+                                                    'h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal',
+                                                    effectiveUpdateMode === 'manual' && hasPendingInputs && 'bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20'
+                                                )}
                                                 aria-label="Update mode"
                                                 onClick={(e) => e.stopPropagation()}
                                             >

frontend/src/styles.css

@@ -178,8 +178,13 @@ body {
 }
 
 /* Connection path roles: pushing (trigger) — classes on BaseNode root. Updating nodes have no extra border so rendering doesn’t flash. */
+/* Connection path trigger: amber cue to match manual/dirty state (e.g. Run button). */
 .connection-path-trigger {
-    box-shadow: inset 3px 0 0 hsl(var(--primary));
+    box-shadow: inset 3px 0 0 hsl(38 92% 50%);
+}
+
+.dark .connection-path-trigger {
+    box-shadow: inset 3px 0 0 hsl(45 93% 58%);
 }
 
 /* NodeResizer: snappy drag; no border/background on handles; keep resize cursors. */