fix: use correct initialCapabilityFilter prop on ModelSearchDialog

The capabilities prop doesn't exist on ModelSearchDialogProps. Use the
correct initialCapabilityFilter="image" prop instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/globals.css

@@ -55,6 +55,10 @@ body {
   transition: opacity 250ms ease-in-out;
 }
 
+.react-flow__node:not(.switch-dimmed) {
+  transition: opacity 250ms ease-in-out;
+}
+
 /* Base handle styles */
 .react-flow__handle {
   width: 14px;

src/components/GroupsOverlay.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useState, useRef, useEffect } from "react";
-import { useStore, ViewportPortal } from "@xyflow/react";
+import { useViewport, ViewportPortal } from "@xyflow/react";
 import { useWorkflowStore, GROUP_COLORS } from "@/store/workflowStore";
 import { GroupColor } from "@/types";
 
@@ -492,7 +492,7 @@ export function GroupBackgroundsPortal() {
 // Renders group controls (headers, resize handles) using ViewportPortal above nodes
 export function GroupControlsOverlay() {
   const { groups } = useWorkflowStore();
-  const zoom = useStore((s) => s.transform[2]);
+  const { zoom } = useViewport();
 
   const groupIds = Object.keys(groups);
 

src/components/WorkflowCanvas.tsx

@@ -331,11 +331,6 @@ export function WorkflowCanvas() {
 
   // Apply dimming className to nodes downstream of disabled Switch outputs
   const allNodes = useMemo(() => {
-    // Fast path: no dimming active and no stale dimmed classes to clean up
-    if (dimmedNodeIds.size === 0 && !nodes.some((n) => n.className?.includes("switch-dimmed"))) {
-      return nodes;
-    }
-
     return nodes.map((node) => {
       // Never dim Switch or ConditionalSwitch nodes themselves
       if (node.type === "switch" || node.type === "conditionalSwitch") return node;

src/components/nodes/BaseNode.tsx

@@ -100,36 +100,27 @@ export function BaseNode({
     const panelEl = settingsPanelRef.current;
     if (!panelEl) return;
 
-    let rafId: number | null = null;
-
     const observer = new ResizeObserver((entries) => {
-      if (rafId !== null) cancelAnimationFrame(rafId);
+      for (const entry of entries) {
-      rafId = requestAnimationFrame(() => {
+        const newPanelHeight = entry.contentRect.height;
-        rafId = null;
+        if (newPanelHeight === 0) continue;
-        for (const entry of entries) {
+        const delta = newPanelHeight - trackedSettingsHeightRef.current;
-          const newPanelHeight = entry.contentRect.height;
+        if (Math.abs(delta) < 2) continue; // Ignore sub-pixel changes
-          if (newPanelHeight === 0) continue;
+
-          const delta = newPanelHeight - trackedSettingsHeightRef.current;
+        trackedSettingsHeightRef.current = newPanelHeight;
-          if (Math.abs(delta) < 2) continue; // Ignore sub-pixel changes
+        setNodes((nodes) =>
-
+          nodes.map((node) => {
-          trackedSettingsHeightRef.current = newPanelHeight;
+            if (node.id !== id) return node;
-          setNodes((nodes) =>
+            const currentHeight = getNodeDimension(node, "height");
-            nodes.map((node) => {
+            const newHeight = Math.max(minHeight, currentHeight + delta);
-              if (node.id !== id) return node;
+            return applyNodeDimensions(node, getNodeDimension(node, "width"), newHeight);
-              const currentHeight = getNodeDimension(node, "height");
+          })
-              const newHeight = Math.max(minHeight, currentHeight + delta);
+        );
-              return applyNodeDimensions(node, getNodeDimension(node, "width"), newHeight);
+      }
-            })
-          );
-        }
-      });
     });
 
     observer.observe(panelEl);
-    return () => {
+    return () => observer.disconnect();
-      if (rafId !== null) cancelAnimationFrame(rafId);
-      observer.disconnect();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsExpanded, settingsPanel]);
 

src/components/nodes/GenerateImageNode.tsx

@@ -825,7 +825,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         isOpen={isBrowseDialogOpen}
         onClose={() => setIsBrowseDialogOpen(false)}
         onModelSelected={handleBrowseModelSelect}
-        capabilities={IMAGE_CAPABILITIES}
+        initialCapabilityFilter="image"
       />
     )}
     </>

src/store/workflowStore.ts

@@ -526,7 +526,7 @@ const workflowStoreImpl: StateCreator<WorkflowStore> = (set, get) => ({
   },
 
   setHoveredNodeId: (id: string | null) => {
-    if (get().hoveredNodeId !== id) set({ hoveredNodeId: id });
+    set({ hoveredNodeId: id });
   },
 
   addNode: (type: NodeType, position: XYPosition, initialData?: Partial<WorkflowNodeData>) => {