docs(08): create phase plan for error display

Phase 08: Error Display
- 1 plan created
- 4 tasks defined (3 auto + 1 checkpoint)
- Toast notifications in top-right corner
- Error overlays on generate nodes
- Ready for execution

.planning/phases/08-error-display/08-01-PLAN.md

@@ -0,0 +1,171 @@
+---
+phase: 08-error-display
+plan: 01
+type: execute
+---
+
+<objective>
+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.
+</objective>
+
+<execution_context>
+~/.claude/get-shit-done/workflows/execute-phase.md
+~/.claude/get-shit-done/references/checkpoints.md
+</execution_context>
+
+<context>
+@.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)
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Update Toast component for error notifications</name>
+  <files>src/components/Toast.tsx</files>
+  <action>
+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.
+  </action>
+  <verify>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</verify>
+  <done>Toast positioned top-right, persistent mode works, details expandable, backward compatible</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Add error overlay and toast trigger to GenerateImageNode</name>
+  <files>src/components/nodes/GenerateImageNode.tsx</files>
+  <action>
+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.
+  </action>
+  <verify>Set a node to error state with outputImage present, verify overlay appears on node and toast appears top-right with expandable details</verify>
+  <done>Error overlay visible over previous output, toast triggered with full error details</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Add error overlay and toast trigger to GenerateVideoNode</name>
+  <files>src/components/nodes/GenerateVideoNode.tsx</files>
+  <action>
+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.
+  </action>
+  <verify>Set a video node to error state with outputVideo present, verify overlay appears and toast triggered</verify>
+  <done>Error overlay visible over previous video, toast triggered with full error details</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Error notification system with top-right persistent toast and in-node overlays</what-built>
+  <how-to-verify>
+    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
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<verification>
+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
+</verification>
+
+<success_criteria>
+
+- All tasks completed
+- All verification checks pass
+- No TypeScript errors
+- Error visibility improved: users can see what went wrong even when previous output exists
+  </success_criteria>
+
+<output>
+After completion, create `.planning/phases/08-error-display/08-01-SUMMARY.md`
+</output>