diff --git a/.planning/phases/08-error-display/08-01-PLAN.md b/.planning/phases/08-error-display/08-01-PLAN.md new file mode 100644 index 00000000..850d700b --- /dev/null +++ b/.planning/phases/08-error-display/08-01-PLAN.md @@ -0,0 +1,171 @@ +--- +phase: 08-error-display +plan: 01 +type: execute +--- + + +Improve error visibility with prominent toast notifications and minimal in-node indicators. + +Purpose: When generation fails, users currently can't see the error if a previous output exists. This makes debugging impossible. +Output: Toast notification system in top-right corner (manual dismiss required), expandable to show full error details. Minimal overlay on nodes indicating failure. + + + +~/.claude/get-shit-done/workflows/execute-phase.md +~/.claude/get-shit-done/references/checkpoints.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/07-video-connections/07-01-SUMMARY.md + +**Key files:** +@src/components/Toast.tsx +@src/components/nodes/GenerateImageNode.tsx +@src/components/nodes/GenerateVideoNode.tsx + +**Current state:** +- Toast component exists but: auto-dismisses after 4s, positioned bottom-center, no expandable details +- GenerateImageNode shows error only when no outputImage (lines 632-635) +- GenerateVideoNode same pattern (lines 383-386) +- Error overlay pattern established in loading overlay (GenerateImageNode lines 521-542) +- useToast hook available for triggering toasts from anywhere + +**Established patterns:** +- Overlay uses `absolute inset-0 bg-neutral-900/70 rounded flex items-center justify-center` +- Error colors: red-400 (text), red-500 (borders), red-900 (backgrounds) +- Error icon from Toast.tsx (circle with exclamation mark) + + + + + + Task 1: Update Toast component for error notifications + src/components/Toast.tsx + +Modify Toast.tsx to support the new error notification requirements: + +1. Move position from bottom-center to top-right: + - Change `bottom-6 left-1/2 -translate-x-1/2` to `top-6 right-6` + - Remove translate transform + +2. Add `persistent` option to disable auto-dismiss: + - Add `persistent: boolean` to ToastState interface + - Update show() function to accept `persistent` param (default false) + - Only set auto-dismiss timer when persistent is false + +3. Add `details` for expandable error info: + - Add `details: string | null` to ToastState interface + - Update show() to accept optional details param + - Add `isExpanded: boolean` state + - When details exist, show "Show details" / "Hide details" button + - When expanded, render details in a scrollable pre/code block below message + +4. Visual updates for expanded state: + - Add max-width constraint (max-w-md) + - Details block: bg-black/30 rounded p-2 mt-2 max-h-40 overflow-auto text-xs font-mono + +Keep backward compatibility: existing callers without new params work as before. + + Import useToast in a test, call show("Test error", "error", true, "Full error details here") and verify toast appears top-right, doesn't auto-dismiss, shows expand button + Toast positioned top-right, persistent mode works, details expandable, backward compatible + + + + Task 2: Add error overlay and toast trigger to GenerateImageNode + src/components/nodes/GenerateImageNode.tsx + +Add error overlay when status is "error" AND outputImage exists: + +1. Import useToast at top of file + +2. Add effect to show toast when error occurs: + - useEffect watching nodeData.status and nodeData.error + - When status changes to "error" and error is not null: + - Call useToast.getState().show("Generation failed", "error", true, nodeData.error) + - This triggers toast with full error in details + +3. Add error overlay inside the outputImage conditional (after line 519, before line 520): + - Similar to loading overlay at lines 521-542 + - Condition: `{nodeData.status === "error" && (` + - Semi-transparent red background: `bg-red-900/70` + - Show error icon (X mark or exclamation) + - Show "Generation failed" text (minimal) + - Optional: "Click toast for details" hint in smaller text + +This replaces the hidden error message. Error in empty state (lines 632-635) can remain as fallback. + + Set a node to error state with outputImage present, verify overlay appears on node and toast appears top-right with expandable details + Error overlay visible over previous output, toast triggered with full error details + + + + Task 3: Add error overlay and toast trigger to GenerateVideoNode + src/components/nodes/GenerateVideoNode.tsx + +Apply same pattern as Task 2 to GenerateVideoNode: + +1. Import useToast at top of file + +2. Add effect to show toast when error occurs: + - useEffect watching nodeData.status and nodeData.error + - When status changes to "error" and error is not null: + - Call useToast.getState().show("Video generation failed", "error", true, nodeData.error) + +3. Add error overlay inside the outputVideo conditional (after line 315, similar position to loading overlay): + - Condition: `{nodeData.status === "error" && (` + - Semi-transparent red background: `bg-red-900/70` + - Show error icon + - Show "Generation failed" text + +Keep existing error display in empty state (lines 383-386) as fallback. + + Set a video node to error state with outputVideo present, verify overlay appears and toast triggered + Error overlay visible over previous video, toast triggered with full error details + + + + Error notification system with top-right persistent toast and in-node overlays + + 1. Run: npm run dev + 2. Open http://localhost:3000 + 3. Create a GenerateImage node, run it successfully (so it has an output) + 4. Modify the prompt to something that will fail (or disconnect API key temporarily) + 5. Run again - verify: + - Red overlay appears on the node with "Generation failed" + - Toast appears in top-right corner + - Toast does NOT auto-dismiss + - Toast has "Show details" button + - Clicking "Show details" reveals full error message + - Clicking X on toast dismisses it + 6. Repeat for GenerateVideo node if possible + + Type "approved" to continue, or describe issues to fix + + + + + +Before declaring phase complete: +- [ ] `npm run build` succeeds without errors +- [ ] Toast appears top-right on error +- [ ] Toast requires manual dismiss (no auto-timeout) +- [ ] Toast details are expandable +- [ ] Error overlay visible on nodes with previous output +- [ ] Existing error display in empty nodes still works + + + + +- All tasks completed +- All verification checks pass +- No TypeScript errors +- Error visibility improved: users can see what went wrong even when previous output exists + + + +After completion, create `.planning/phases/08-error-display/08-01-SUMMARY.md` +