From 65afd2344b94b5a805076899185680643588e3b3 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 27 Feb 2026 07:42:08 +1300
Subject: [PATCH] fix: use model-specific resolution lists and normalize on
 model switch

Nano Banana Pro supports 1K/2K/4K, while Nano Banana 2 also supports 512.
Split the shared RESOLUTIONS constant into RESOLUTIONS_PRO and RESOLUTIONS_NB2,
and use the correct list based on the selected model in both GenerateImageNode
and SplitGridSettingsModal. Also normalize aspect ratio and resolution to valid
defaults when switching models in the SplitGrid modal.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/SplitGridSettingsModal.tsx  | 21 ++++++++++++++++++---
 src/components/nodes/GenerateImageNode.tsx |  8 +++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/SplitGridSettingsModal.tsx b/src/components/SplitGridSettingsModal.tsx
index c06f31fe..51230ac5 100644
--- a/src/components/SplitGridSettingsModal.tsx
+++ b/src/components/SplitGridSettingsModal.tsx
@@ -22,7 +22,8 @@ const LAYOUT_OPTIONS = [
 
 const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9"];
 const EXTENDED_ASPECT_RATIOS: AspectRatio[] = ["1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1", "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9"];
-const RESOLUTIONS: Resolution[] = ["1K", "2K", "4K"];
+const RESOLUTIONS_PRO: Resolution[] = ["1K", "2K", "4K"];
+const RESOLUTIONS_NB2: Resolution[] = ["512", "1K", "2K", "4K"];
 const MODELS: { value: ModelType; label: string }[] = [
   { value: "nano-banana", label: "Nano Banana" },
   { value: "nano-banana-2", label: "Nano Banana 2" },
@@ -55,6 +56,7 @@ export function SplitGridSettingsModal({
   const targetCount = rows * cols;
   const isNanoBananaPro = model === "nano-banana-pro" || model === "nano-banana-2";
   const aspectRatios = model === "nano-banana-2" ? EXTENDED_ASPECT_RATIOS : BASE_ASPECT_RATIOS;
+  const resolutions = model === "nano-banana-2" ? RESOLUTIONS_NB2 : RESOLUTIONS_PRO;
 
   const handleCreate = useCallback(() => {
     const splitNode = getNodeById(nodeId);
@@ -267,7 +269,20 @@ export function SplitGridSettingsModal({
                 </label>
                 <select
                   value={model}
-                  onChange={(e) => setModel(e.target.value as ModelType)}
+                  onChange={(e) => {
+                    const newModel = e.target.value as ModelType;
+                    setModel(newModel);
+                    // Normalize aspect ratio for the new model's allowed set
+                    const newAspectRatios = newModel === "nano-banana-2" ? EXTENDED_ASPECT_RATIOS : BASE_ASPECT_RATIOS;
+                    if (!newAspectRatios.includes(aspectRatio)) {
+                      setAspectRatio(newAspectRatios[0]);
+                    }
+                    // Normalize resolution for the new model's allowed set
+                    const newResolutions = newModel === "nano-banana-2" ? RESOLUTIONS_NB2 : RESOLUTIONS_PRO;
+                    if (!newResolutions.includes(resolution)) {
+                      setResolution(newResolutions[0]);
+                    }
+                  }}
                   className="w-full px-3 py-2 bg-neutral-900 border border-neutral-600 rounded text-neutral-100 text-sm focus:outline-none focus:border-neutral-500"
                 >
                   {MODELS.map((m) => (
@@ -302,7 +317,7 @@ export function SplitGridSettingsModal({
                       onChange={(e) => setResolution(e.target.value as Resolution)}
                       className="w-full px-3 py-2 bg-neutral-900 border border-neutral-600 rounded text-neutral-100 text-sm focus:outline-none focus:border-neutral-500"
                     >
-                      {RESOLUTIONS.map((res) => (
+                      {resolutions.map((res) => (
                         <option key={res} value={res}>{res}</option>
                       ))}
                     </select>
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index b767e764..57838d49 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -20,8 +20,9 @@ const BASE_ASPECT_RATIOS: AspectRatio[] = ["1:1", "2:3", "3:2", "3:4", "4:3", "4
 // Extended 14 aspect ratios (Nano Banana 2 adds extreme ratios)
 const EXTENDED_ASPECT_RATIOS: AspectRatio[] = ["1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1", "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9"];
 
-// Resolutions for Nano Banana Pro and Nano Banana 2
-const RESOLUTIONS: Resolution[] = ["512", "1K", "2K", "4K"];
+// Resolutions per model (nano-banana-pro: 1K-4K, nano-banana-2: 512-4K)
+const RESOLUTIONS_PRO: Resolution[] = ["1K", "2K", "4K"];
+const RESOLUTIONS_NB2: Resolution[] = ["512", "1K", "2K", "4K"];
 
 // Hardcoded Gemini image models (always available)
 const GEMINI_IMAGE_MODELS: { value: ModelType; label: string }[] = [
@@ -407,6 +408,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
   const currentModelId = isGeminiProvider ? (nodeData.selectedModel?.modelId || nodeData.model) : null;
   const supportsResolution = currentModelId === "nano-banana-pro" || currentModelId === "nano-banana-2";
   const aspectRatios = currentModelId === "nano-banana-2" ? EXTENDED_ASPECT_RATIOS : BASE_ASPECT_RATIOS;
+  const resolutions = currentModelId === "nano-banana-2" ? RESOLUTIONS_NB2 : RESOLUTIONS_PRO;
   const hasCarouselImages = (nodeData.imageHistory || []).length > 1;
 
   // Track previous status to detect error transitions
@@ -714,7 +716,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                 onChange={handleResolutionChange}
                 className="w-12 text-[10px] py-1 px-1.5 border border-neutral-700 rounded bg-neutral-900/50 focus:outline-none focus:ring-1 focus:ring-neutral-600 text-neutral-300"
               >
-                {RESOLUTIONS.map((res) => (
+                {resolutions.map((res) => (
                   <option key={res} value={res}>
                     {res}
                   </option>