prd.json

@@ -675,7 +675,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 38,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {

progress.txt

@@ -552,3 +552,18 @@
   - Validate JSON output with JSON.parse before download to ensure validity
   - Use purple color scheme for Ren'Py-specific button to distinguish from generic export
 ---
+
+## 2026-01-22 - US-038
+- What was implemented: Unsaved changes warning with dirty state tracking, beforeunload, and navigation confirmation modal
+- Files changed:
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - added isDirty tracking via useMemo comparing current state to lastSavedDataRef, beforeunload event handler, navigation warning modal, back button with handleBackClick, moved header from page.tsx into this component
+  - src/app/editor/[projectId]/page.tsx - simplified to only render FlowchartEditor (header moved to client component for dirty state access)
+- **Learnings for future iterations:**
+  - Dirty state tracking uses useMemo comparing JSON.stringify of current flowchart data to a lastSavedDataRef
+  - lastSavedDataRef is a useRef initialized with initialData and updated after successful save
+  - Browser beforeunload requires both event.preventDefault() and setting event.returnValue = '' for modern browsers
+  - Header with back navigation was moved from server component (page.tsx) to client component (FlowchartEditor.tsx) so it can access isDirty state
+  - Back button uses handleBackClick which checks isDirty before navigating or showing confirmation modal
+  - Navigation warning modal shows "Leave Page" (red) and "Stay" buttons for clear user action
+  - "(unsaved changes)" indicator shown next to project name when isDirty is true
+---