docs(28): create phase plan for Node Defaults UI

Phase 28: Node Defaults UI - 1 plan created - 3 tasks defined (2 auto, 1 checkpoint) - Ready for execution
6 months ago · 59394f0a9c
1 changed files with 270 additions and 0 deletions
--- a/.planning/phases/28-node-defaults-ui/28-01-PLAN.md
+++ b/.planning/phases/28-node-defaults-ui/28-01-PLAN.md
@ -0,0 +1,270 @@
+---
+phase: 28-node-defaults-ui
+plan: 01
+type: execute
+---
+
+<objective>
+Create a settings panel for configuring default node preferences per node type.
+
+Purpose: Users can set their preferred default models for GenerateImage, GenerateVideo, and LLM nodes, so keyboard shortcuts (Shift+G, Shift+L) and quick-add create nodes with their preferred settings.
+Output: New "Node Defaults" tab in ProjectSetupModal with model selection UI for each node type.
+</objective>
+
+<execution_context>
+~/.claude/get-shit-done/workflows/execute-phase.md
+~/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/27-node-defaults-infrastructure/27-01-SUMMARY.md
+
+**Key files:**
+@src/components/ProjectSetupModal.tsx
+@src/store/utils/localStorage.ts
+@src/types/nodes.ts
+@src/components/modals/ModelSearchDialog.tsx
+@src/components/nodes/LLMGenerateNode.tsx
+
+**Infrastructure from Phase 27:**
+- `NodeDefaultsConfig` type: `{ generateImage?: GenerateImageNodeDefaults, generateVideo?: GenerateVideoNodeDefaults, llm?: LLMNodeDefaults }`
+- `GenerateImageNodeDefaults`: `{ selectedModel?: { provider, modelId, displayName } }`
+- `GenerateVideoNodeDefaults`: `{ selectedModel?: { provider, modelId, displayName } }`
+- `LLMNodeDefaults`: `{ provider?: LLMProvider, model?: LLMModelType, temperature?: number, maxTokens?: number }`
+- `loadNodeDefaults()` / `saveNodeDefaults()` in localStorage.ts
+- `createDefaultNodeData()` already applies these defaults when creating nodes
+
+**Established patterns:**
+- Tab-based UI in ProjectSetupModal (project, providers tabs)
+- Local state pattern: load from store on open, save on "Save" button
+- Model selection: ModelSearchDialog opens in callback mode via `onModelSelected`
+- LLM settings: dropdowns for provider/model, slider for temperature
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add Node Defaults tab to ProjectSetupModal</name>
+  <files>src/components/ProjectSetupModal.tsx</files>
+  <action>
+1. Add "Node Defaults" as a third tab after "Providers":
+   - Tab button: `setActiveTab("nodeDefaults")`
+   - activeTab state now `"project" | "providers" | "nodeDefaults"`
+
+2. Add local state for node defaults:
+   - `const [localNodeDefaults, setLocalNodeDefaults] = useState<NodeDefaultsConfig>({});`
+   - Import `NodeDefaultsConfig, loadNodeDefaults, saveNodeDefaults` from localStorage.ts
+   - On modal open (in useEffect): `setLocalNodeDefaults(loadNodeDefaults());`
+
+3. Add state for model selection dialogs:
+   - `const [showImageModelDialog, setShowImageModelDialog] = useState(false);`
+   - `const [showVideoModelDialog, setShowVideoModelDialog] = useState(false);`
+
+4. Add handler for saving node defaults:
+   ```typescript
+   const handleSaveNodeDefaults = () => {
+     saveNodeDefaults(localNodeDefaults);
+     onClose();
+   };
+   ```
+
+5. Update handleSave to route to handleSaveNodeDefaults when activeTab === "nodeDefaults"
+
+6. Create Node Defaults tab content (render when activeTab === "nodeDefaults"):
+   - Three sections: GenerateImage, GenerateVideo, LLM
+   - Each in a styled container matching provider tab style (p-3 bg-neutral-900 rounded-lg border border-neutral-700)
+
+**GenerateImage section:**
+- Label: "Default Image Model"
+- Display current selection or "System default (Gemini nano-banana-pro)" if not set
+- "Select Model" button that opens ModelSearchDialog with onModelSelected callback
+- "Clear" button (only shown if selection exists) to reset to undefined
+
+**GenerateVideo section:**
+- Label: "Default Video Model"
+- Display current selection or "None set (select model on first use)" if not set
+- "Select Model" button that opens ModelSearchDialog with initialCapabilityFilter="video"
+- "Clear" button to reset
+
+**LLM section:**
+- Label: "Default LLM Settings"
+- Provider dropdown (Google, OpenAI) - use same PROVIDERS array as LLMGenerateNode
+- Model dropdown (filtered by provider) - use same MODELS object as LLMGenerateNode
+- Temperature slider (0-2, step 0.1) with label showing current value
+- Display "Using system defaults" text if no overrides set
+- "Clear" button to reset all LLM defaults
+
+7. Handle model selection callbacks:
+   ```typescript
+   const handleImageModelSelected = (model: ProviderModel) => {
+     setLocalNodeDefaults(prev => ({
+       ...prev,
+       generateImage: {
+         ...prev.generateImage,
+         selectedModel: {
+           provider: model.provider,
+           modelId: model.id,
+           displayName: model.name,
+         }
+       }
+     }));
+     setShowImageModelDialog(false);
+   };
+   ```
+   Similar for video model.
+
+8. Import ProviderModel from @/lib/providers/types
+
+Do NOT add new imports for ModelSearchDialog - it's already used in FloatingActionBar, so check if we need portal or can render inline. Use portal pattern matching existing modal usage.
+  </action>
+  <verify>npm run build passes, modal opens with three tabs, Node Defaults tab shows three sections</verify>
+  <done>ProjectSetupModal has Node Defaults tab with sections for GenerateImage, GenerateVideo, and LLM defaults</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Wire up model selection dialogs and LLM controls</name>
+  <files>src/components/ProjectSetupModal.tsx</files>
+  <action>
+1. Add ModelSearchDialog renders (conditionally when showImageModelDialog/showVideoModelDialog is true):
+   ```tsx
+   {showImageModelDialog && (
+     <ModelSearchDialog
+       isOpen={showImageModelDialog}
+       onClose={() => setShowImageModelDialog(false)}
+       onModelSelected={handleImageModelSelected}
+       initialCapabilityFilter="image"
+     />
+   )}
+   {showVideoModelDialog && (
+     <ModelSearchDialog
+       isOpen={showVideoModelDialog}
+       onClose={() => setShowVideoModelDialog(false)}
+       onModelSelected={handleVideoModelSelected}
+       initialCapabilityFilter="video"
+     />
+   )}
+   ```
+
+2. Implement LLM settings handlers:
+   ```typescript
+   const handleLLMProviderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+     const newProvider = e.target.value as LLMProvider;
+     const firstModelForProvider = MODELS[newProvider][0].value;
+     setLocalNodeDefaults(prev => ({
+       ...prev,
+       llm: {
+         ...prev.llm,
+         provider: newProvider,
+         model: firstModelForProvider,
+       }
+     }));
+   };
+
+   const handleLLMModelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+     setLocalNodeDefaults(prev => ({
+       ...prev,
+       llm: { ...prev.llm, model: e.target.value as LLMModelType }
+     }));
+   };
+
+   const handleLLMTemperatureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+     setLocalNodeDefaults(prev => ({
+       ...prev,
+       llm: { ...prev.llm, temperature: parseFloat(e.target.value) }
+     }));
+   };
+   ```
+
+3. Implement clear handlers:
+   ```typescript
+   const handleClearImageDefaults = () => {
+     setLocalNodeDefaults(prev => {
+       const { generateImage, ...rest } = prev;
+       return rest;
+     });
+   };
+   // Similar for video and LLM
+   ```
+
+4. Import PROVIDERS and MODELS arrays - copy from LLMGenerateNode.tsx (they're not exported). Place at top of file:
+   ```typescript
+   const LLM_PROVIDERS: { value: LLMProvider; label: string }[] = [
+     { value: "google", label: "Google" },
+     { value: "openai", label: "OpenAI" },
+   ];
+
+   const LLM_MODELS: Record<LLMProvider, { value: LLMModelType; label: string }[]> = {
+     google: [
+       { value: "gemini-3-flash-preview", label: "Gemini 3 Flash" },
+       { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+       { value: "gemini-3-pro-preview", label: "Gemini 3.0 Pro" },
+     ],
+     openai: [
+       { value: "gpt-4.1-mini", label: "GPT-4.1 Mini" },
+       { value: "gpt-4.1-nano", label: "GPT-4.1 Nano" },
+     ],
+   };
+   ```
+
+5. Import types: LLMProvider, LLMModelType, NodeDefaultsConfig from @/types
+
+6. Complete the UI for each section with proper styling:
+   - Use flex layout with justify-between for label and controls
+   - Model display shows provider icon + model name
+   - Buttons: "Select Model" (primary), "Clear" (text button, neutral-400)
+  </action>
+  <verify>npm run build passes, can select models from dialogs, LLM dropdowns work, clear buttons reset to defaults</verify>
+  <done>Model selection dialogs open and save selections, LLM controls update local state, clear buttons reset defaults</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Node Defaults tab in Project Settings with:
+  - GenerateImage section: shows selected model or "System default", Select Model and Clear buttons
+  - GenerateVideo section: shows selected model or "None set", Select Model and Clear buttons
+  - LLM section: provider dropdown, model dropdown, temperature slider, Clear button
+  - Changes persist to localStorage and affect new node creation via keyboard shortcuts</what-built>
+  <how-to-verify>
+    1. Run: npm run dev
+    2. Open Project Settings (gear icon in header)
+    3. Click "Node Defaults" tab (third tab)
+    4. Verify three sections appear: Image Model, Video Model, LLM Settings
+    5. Click "Select Model" for Image - verify ModelSearchDialog opens with image filter
+    6. Select a model (e.g., fal.ai flux) - verify it shows in the section
+    7. Click "Save" to close modal
+    8. Press Shift+G to create GenerateImage node - verify it has the selected model
+    9. Re-open settings, go to Node Defaults, click "Clear" on Image defaults
+    10. Click "Save", press Shift+G - verify node uses system default (Gemini)
+    11. Test LLM defaults: change provider to OpenAI, select GPT-4.1 Mini
+    12. Save and press Shift+L - verify LLM node uses OpenAI provider
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<verification>
+Before declaring plan complete:
+- [ ] `npm run build` succeeds without TypeScript errors
+- [ ] ProjectSetupModal has three tabs: Project, Providers, Node Defaults
+- [ ] Can select default image model from ModelSearchDialog
+- [ ] Can select default video model from ModelSearchDialog
+- [ ] Can configure LLM provider, model, and temperature
+- [ ] Clear buttons reset each section to undefined/system defaults
+- [ ] Settings persist across modal close/reopen
+- [ ] New nodes created via keyboard shortcuts use stored defaults
+</verification>
+
+<success_criteria>
+
+- All tasks completed
+- TypeScript builds without errors
+- Node Defaults UI is functional and persists settings
+- User verified functionality via checkpoint
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/28-node-defaults-ui/28-01-SUMMARY.md`
+</output>