popiart-node-canvas/.planning/phases/08-error-display/08-01-PLAN.md

phase	plan	type
08-error-display	1	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.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/references/checkpoints.md </execution_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)

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

<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>

After completion, create `.planning/phases/08-error-display/08-01-SUMMARY.md`