Browse Source
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 executionhandoff-20260429-1057
shrimbly
6 months ago
1 changed files with 171 additions and 0 deletions
@ -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> |
||||
Loading…
Reference in new issue