Browse Source
Phase 14 complete - Milestone v1.1 finished Tasks completed: - Normalize dynamic handle IDs to standard values - Update connection validation for normalized handles - Map normalized handles to schema names in execution - Add placeholder handles for unused input types SUMMARY: .planning/phases/14-fix-drag-connect-bugs/14-01-SUMMARY.md Co-Authored-By: Claude <noreply@anthropic.com>handoff-20260429-1057
shrimbly
6 months ago
4 changed files with 334 additions and 17 deletions
@ -0,0 +1,204 @@ |
|||
--- |
|||
phase: 14-fix-drag-connect-bugs |
|||
plan: 01 |
|||
type: execute |
|||
--- |
|||
|
|||
<objective> |
|||
Fix two bugs with nodes created via drag-connect: |
|||
1. Connection vanishes after selecting model from browser |
|||
2. Node defaults to Gemini with correct Browse button but connection to default handles breaks when model schema loads |
|||
|
|||
**Root Cause Analysis:** |
|||
|
|||
Bug 1 (Connection Vanishes): |
|||
- Node created via drag-connect gets default Gemini model (no `inputSchema`) |
|||
- Connection made to default handle IDs: `"image"` and `"text"` |
|||
- User clicks Browse → selects external model (Replicate/fal.ai) |
|||
- `handleBrowseModelSelect` updates `selectedModel` |
|||
- `ModelParameters` component loads schema → calls `handleInputsLoaded` → sets `inputSchema` |
|||
- Node re-renders with dynamic handles that have **different IDs** from schema (e.g., `"image_url"` instead of `"image"`) |
|||
- React Flow invalidates edges connected to non-existent handles → **connection vanishes** |
|||
|
|||
Bug 2 is a symptom of Bug 1 - the node works fine with Gemini defaults, but switching to an external provider with dynamic schema causes the connection loss. |
|||
|
|||
**Solution:** |
|||
When a user selects an external model on a node created via drag-connect, we need to either: |
|||
A) Remap existing connections to the new dynamic handle IDs, OR |
|||
B) Keep standard `"image"` and `"text"` handles for external models too (normalize schema handle IDs) |
|||
|
|||
Option B is simpler and more robust - normalize all dynamic schema handles to use standard IDs. The schema already provides semantic type info ("image" vs "text"), so we don't need the provider-specific names as handle IDs. |
|||
|
|||
Output: Connections persist when switching from default Gemini to external provider on drag-connect-created nodes. |
|||
</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 |
|||
|
|||
**Key source files:** |
|||
@src/components/nodes/GenerateImageNode.tsx - Dynamic handle rendering (lines 464-550) |
|||
@src/components/WorkflowCanvas.tsx - Connection handling, handleMenuSelect (lines 529-646) |
|||
@src/components/nodes/ModelParameters.tsx - Schema fetching and input loading |
|||
|
|||
**Current behavior:** |
|||
1. `handleMenuSelect` creates node with `addNode(nodeType, flowPosition)` - no initial data |
|||
2. Node gets default Gemini with handles `id="image"` and `id="text"` |
|||
3. Connection made to default handle IDs |
|||
4. User selects external model → `handleInputsLoaded` sets `inputSchema` |
|||
5. Node renders dynamic handles with schema-specific IDs (e.g., `"image_url"`, `"prompt"`) |
|||
6. Connection to `"image"` or `"text"` becomes invalid → edge removed |
|||
|
|||
**Target behavior:** |
|||
- Dynamic handles use standard IDs (`"image"`, `"text"`) regardless of schema |
|||
- Schema still provides semantic info but doesn't change handle IDs |
|||
- Connections persist through model changes |
|||
</context> |
|||
|
|||
<tasks> |
|||
|
|||
<task type="auto"> |
|||
<name>Task 1: Normalize dynamic handle IDs to standard values</name> |
|||
<files>src/components/nodes/GenerateImageNode.tsx</files> |
|||
<action> |
|||
Modify the dynamic handle rendering logic (lines 464-510) to use standard handle IDs instead of schema-specific names: |
|||
|
|||
1. In the dynamic handle rendering section, change `id={input.name}` to use standard IDs: |
|||
- For image inputs: use `"image"` (or `"image-{index}"` if multiple) |
|||
- For text inputs: use `"text"` (or `"text-{index}"` if multiple) |
|||
|
|||
2. Update the handle key to use a combination of type and index for uniqueness |
|||
|
|||
3. The schema `input.name` is still used for: |
|||
- `title` attribute (tooltip) |
|||
- Label display |
|||
- Parameter mapping during execution (stored in nodeData, not handle ID) |
|||
|
|||
This ensures connections made to `"image"` or `"text"` remain valid when schema loads. |
|||
|
|||
Example change: |
|||
```typescript |
|||
// Before: |
|||
<Handle |
|||
type="target" |
|||
position={Position.Left} |
|||
id={input.name} // e.g., "image_url" |
|||
... |
|||
/> |
|||
|
|||
// After: |
|||
<Handle |
|||
type="target" |
|||
position={Position.Left} |
|||
id={imageInputs.length > 1 ? `image-${imageIndex}` : "image"} // Standard ID |
|||
... |
|||
/> |
|||
``` |
|||
</action> |
|||
<verify> |
|||
1. Create node via drag-connect from image output |
|||
2. Connection appears with default Gemini handles |
|||
3. Click Browse → select Replicate model |
|||
4. Connection persists after schema loads |
|||
</verify> |
|||
<done> |
|||
- Dynamic handles use standard IDs: "image", "text" (or indexed if multiple) |
|||
- Schema input names preserved for labels and tooltips |
|||
- Connections persist through model changes |
|||
</done> |
|||
</task> |
|||
|
|||
<task type="auto"> |
|||
<name>Task 2: Update connection validation for normalized handles</name> |
|||
<files>src/components/WorkflowCanvas.tsx</files> |
|||
<action> |
|||
Verify and update `getHandleType` and `findCompatibleHandle` functions to work with normalized handle IDs: |
|||
|
|||
1. `getHandleType` (lines 63-73): May need updates if we use indexed handles like `"image-0"` |
|||
- Add pattern matching for indexed handles: `if (handleId.startsWith("image")) return "image"` |
|||
|
|||
2. `findCompatibleHandle` (lines 327-341): Update to return standard handle IDs |
|||
- When finding compatible input handle, return `"image"` or `"text"` instead of schema name |
|||
|
|||
3. `handleMenuSelect` (lines 544-646): Already uses `"image"` and `"text"` for targetHandleId, so should work as-is |
|||
|
|||
The key insight: by normalizing handle IDs in the node, all existing connection logic that expects `"image"` and `"text"` will continue to work. |
|||
</action> |
|||
<verify> |
|||
1. Drag connection from prompt node's text output |
|||
2. Drop on empty space → select "Generate Image" |
|||
3. Connection creates to text handle |
|||
4. Browse → select fal.ai model with text input |
|||
5. Connection persists (text handle still valid) |
|||
</verify> |
|||
<done> |
|||
- getHandleType handles indexed handle IDs |
|||
- findCompatibleHandle returns normalized IDs |
|||
- Multi-input models (multiple images) work correctly |
|||
</done> |
|||
</task> |
|||
|
|||
<task type="auto"> |
|||
<name>Task 3: Update execution to map normalized handles to schema names</name> |
|||
<files>src/store/workflowStore.ts, src/app/api/generate/route.ts</files> |
|||
<action> |
|||
Ensure the execution pipeline correctly maps normalized handle IDs back to schema parameter names: |
|||
|
|||
1. In `getConnectedInputs` (workflowStore.ts): Check if it needs to map handle IDs to schema names |
|||
- Currently uses handle IDs directly for dynamicInputs |
|||
- May need to look up schema to get the actual parameter name |
|||
|
|||
2. In `/api/generate/route.ts`: Verify parameter mapping |
|||
- Check how dynamicInputs are passed to provider APIs |
|||
- Ensure the provider receives the correct parameter names (e.g., "image_url" not "image") |
|||
|
|||
3. Store the schema input name mapping in nodeData for execution: |
|||
- `inputSchema` already has `{ name, type, label }` |
|||
- Execution can look up: "image" handle → first image input from schema → use schema name for API |
|||
|
|||
If execution already uses nodeData.inputSchema for parameter names (not handle IDs), this task may be minimal. |
|||
</action> |
|||
<verify> |
|||
1. Create node via drag-connect |
|||
2. Connect image and text inputs |
|||
3. Select external model (Replicate/fal.ai) |
|||
4. Run workflow |
|||
5. Verify API call uses correct parameter names from schema |
|||
</verify> |
|||
<done> |
|||
- Execution maps normalized handle IDs to schema parameter names |
|||
- Provider APIs receive correct parameter names |
|||
- No regression in existing workflows |
|||
</done> |
|||
</task> |
|||
|
|||
</tasks> |
|||
|
|||
<verification> |
|||
Before declaring phase complete: |
|||
- [ ] `npm run build` succeeds without errors |
|||
- [ ] Drag-connect from image output → Generate Image → connection persists |
|||
- [ ] Browse → select external model → connection still persists |
|||
- [ ] Drag-connect from text output → Generate Image → connection persists after model change |
|||
- [ ] Execute workflow with drag-connect-created node → works correctly |
|||
- [ ] Existing workflows (created via action bar) still work |
|||
- [ ] Multiple input models (if any) handle correctly |
|||
</verification> |
|||
|
|||
<success_criteria> |
|||
- All tasks completed |
|||
- All verification checks pass |
|||
- Connections persist when switching models on drag-connect nodes |
|||
- No regression in existing functionality |
|||
- External providers work correctly with normalized handles |
|||
</success_criteria> |
|||
|
|||
<output> |
|||
After completion, create `.planning/phases/14-fix-drag-connect-bugs/14-01-SUMMARY.md` |
|||
</output> |
|||
@ -0,0 +1,109 @@ |
|||
--- |
|||
phase: 14-fix-drag-connect-bugs |
|||
plan: 01 |
|||
subsystem: ui |
|||
tags: [react-flow, handles, connections, node-editor] |
|||
|
|||
requires: |
|||
- phase: 03-generate-node-refactor |
|||
provides: Dynamic handle rendering from model schema |
|||
- phase: 04-model-search-dialog |
|||
provides: Model selection and schema loading |
|||
provides: |
|||
- Stable drag-connect node creation that persists through model selection |
|||
- Normalized handle ID system for multi-provider compatibility |
|||
- Handle-to-schema mapping for API parameter passing |
|||
affects: [future-node-types, connection-system-improvements] |
|||
|
|||
tech-stack: |
|||
added: [] |
|||
patterns: |
|||
- "Normalized handle IDs (image, text, image-0, text-0) for connection stability" |
|||
- "data-schema-name attribute for preserving API parameter names" |
|||
- "handleToSchemaName mapping in execution for API compatibility" |
|||
|
|||
key-files: |
|||
created: [] |
|||
modified: |
|||
- src/components/nodes/GenerateImageNode.tsx |
|||
- src/components/nodes/GenerateVideoNode.tsx |
|||
- src/components/WorkflowCanvas.tsx |
|||
- src/store/workflowStore.ts |
|||
|
|||
key-decisions: |
|||
- "Use normalized handle IDs instead of schema names for React Flow handles" |
|||
- "Store schema name in data-schema-name attribute for reference" |
|||
- "Build handleToSchemaName mapping at execution time from inputSchema" |
|||
|
|||
patterns-established: |
|||
- "Handle normalization: single input uses type name (image), multiple use indexed (image-0)" |
|||
- "Schema mapping: inputSchema drives normalized ID to schema name conversion" |
|||
|
|||
issues-created: [] |
|||
|
|||
duration: 7min |
|||
completed: 2026-01-12 |
|||
--- |
|||
|
|||
# Phase 14 Plan 01: Fix Drag-Connect Node Creation Bugs Summary |
|||
|
|||
**Placeholder handles ensure connections persist when selecting models that don't use all input types** |
|||
|
|||
## Performance |
|||
|
|||
- **Duration:** 12 min |
|||
- **Started:** 2026-01-12T10:11:43Z |
|||
- **Completed:** 2026-01-12T10:23:00Z |
|||
- **Tasks:** 3 |
|||
- **Files modified:** 4 |
|||
|
|||
## Accomplishments |
|||
- Always render "image" and "text" handles even when model schema doesn't include them |
|||
- Placeholder handles (dimmed at 30% opacity) preserve connections for models that don't use that input type |
|||
- Normalized dynamic handle IDs to use standard values ("image", "text") instead of schema-specific names |
|||
- Updated connection validation to return normalized handle IDs when finding compatible targets |
|||
- Added handle-to-schema mapping in execution to preserve API parameter compatibility |
|||
|
|||
## Task Commits |
|||
|
|||
Each task was committed atomically: |
|||
|
|||
1. **Task 1: Normalize handle IDs + placeholder handles** - `7548e5a` (fix) |
|||
2. **Task 2: Update connection validation** - `714b60b` (fix) |
|||
3. **Task 3: Map handles to schema names in execution** - `5643cb8` (feat) |
|||
|
|||
## Files Created/Modified |
|||
- `src/components/nodes/GenerateImageNode.tsx` - Placeholder handles for missing inputs, normalized IDs |
|||
- `src/components/nodes/GenerateVideoNode.tsx` - Same fix for video nodes |
|||
- `src/components/WorkflowCanvas.tsx` - findCompatibleHandle returns normalized IDs |
|||
- `src/store/workflowStore.ts` - getConnectedInputs builds handleToSchemaName mapping |
|||
|
|||
## Decisions Made |
|||
- **Placeholder handles**: Always render "image" and "text" handles, dimmed when model doesn't use them |
|||
- **Normalized handle naming**: Single input of type uses base name ("image"), multiple use indexed ("image-0", "image-1") |
|||
- **Schema name preservation**: Stored in data-schema-name attribute for debugging/reference |
|||
- **Execution mapping**: Build mapping at runtime from inputSchema rather than storing in edge data |
|||
|
|||
## Deviations from Plan |
|||
|
|||
### Auto-fixed Issues |
|||
|
|||
**1. [Rule 1 - Bug] Handle disappearance with text-to-image models** |
|||
- **Found during:** Testing after initial fix |
|||
- **Issue:** Text-to-image models (FLUX, etc.) have no image input in schema, causing image handle to disappear |
|||
- **Fix:** Always render placeholder handles for missing input types (dimmed at 30% opacity) |
|||
- **Files modified:** GenerateImageNode.tsx, GenerateVideoNode.tsx |
|||
- **Verification:** Build passes, handles persist through model selection |
|||
|
|||
## Issues Encountered |
|||
|
|||
None |
|||
|
|||
## Next Phase Readiness |
|||
- Phase 14 complete (single plan phase) |
|||
- Milestone v1.1 complete - all 8 phases finished |
|||
- Ready for `/gsd:complete-milestone` |
|||
|
|||
--- |
|||
*Phase: 14-fix-drag-connect-bugs* |
|||
*Completed: 2026-01-12* |
|||
Loading…
Reference in new issue