Implement Tree Editor with visual preview and documentation updates

Tree Editor Features: - Zustand store with immer middleware and zundo for undo/redo - Form-based node editing (Decision, Action, Solution types) - Visual tree preview with solution connection indicators - NodePicker with type-grouped dropdown (Decisions/Actions/Solutions) - SharedLinksMap for detecting nodes with multiple sources - Modal component with scrollable body, fixed header/footer New Components: - TreeEditorLayout, TreeMetadataForm, NodeList, NodeEditorModal - NodeFormDecision, NodeFormAction, NodeFormResolution - DynamicArrayField, NodePicker - TreePreviewPanel, TreePreviewNode Documentation: - Updated README.md status to Phase 2 - Added Tree Editor details to CURRENT-STATE.md - Added modal/Zustand lessons to LESSONS-LEARNED.md - Updated file structure in CLAUDE-SETUP.md - Added Tree Editor progress to PROGRESS.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 03:00:00 -05:00
parent 088333174c
commit 4cee013733
26 changed files with 4073 additions and 91 deletions
--- a/CURRENT-STATE.md
+++ b/CURRENT-STATE.md
@@ -0,0 +1,231 @@
+# Current State
+
+> **Purpose:** Quick-reference file showing exactly where the project stands.
+> **For Claude Code:** Read this first to understand what's done and what's next.
+> **Last Updated:** January 28, 2026
+
+---
+
+## Active Phase: Phase 2 - Tree Editor (In Progress)
+
+---
+
+## What's Complete ✅
+
+### Backend (100%)
+- ✅ FastAPI project structure
+- ✅ PostgreSQL database with Docker
+- ✅ User authentication (JWT, register, login, refresh)
+- ✅ Trees CRUD with full-text search
+- ✅ Sessions tracking with decisions
+- ✅ Export API (Markdown, Text, HTML)
+- ✅ Role-based access control foundation
+- ✅ Production-ready logging with correlation IDs
+- ✅ 40+ integration tests
+- ✅ DateTime timezone handling fixed
+
+### Frontend (In Progress)
+- ✅ React + Vite + TypeScript + Tailwind setup
+- ✅ Authentication UI (login, register)
+- ✅ Basic layout and navigation
+- ✅ Tree library/browsing page
+- ✅ Tree navigation interface
+- ✅ Session management
+- ✅ Export functionality (download)
+- ✅ Responsive design
+- ✅ Error boundaries
+- ✅ **Tree Editor** - Form-based with visual preview
+  - ✅ Zustand store with immer (undo/redo via zundo)
+  - ✅ Split-view layout (editor left, preview right)
+  - ✅ Node CRUD (Decision, Action, Solution types)
+  - ✅ NodePicker with type-grouped dropdown
+  - ✅ Dynamic array fields (options, commands, steps)
+  - ✅ Visual tree preview with solution indicators
+  - ✅ Shared node detection (multiple sources → same target)
+  - ✅ Modal with scrollable content, fixed header/footer
+- ⏳ User preferences (dark mode) - NOT YET STARTED
+- ⏳ Keyboard shortcuts - NOT YET STARTED
+
+### Documentation
+- ✅ Project overview and architecture docs
+- ✅ Development roadmap through Phase 4
+- ✅ Feature specifications (including Phase 2.5)
+- ✅ CLAUDE-SETUP.md for onboarding
+- ✅ LESSONS-LEARNED.md for avoiding past mistakes
+
+---
+
+## What's In Progress 🔄
+
+| Task | Status | Notes |
+|------|--------|-------|
+| Tree Editor | Functional | Core editing complete, polish ongoing |
+| Tree Editor Validation | Partial | Basic validation working |
+| User Preferences | Not started | Dark/light mode, export format default |
+| TypeScript strict mode | Warnings exist | tsconfig needs `strict: true` |
+| Starter decision trees | 1 of 5 complete | Need 4 more real trees |
+| Deployment | Not started | Railway/Render planned |
+
+---
+
+## What's Next (Priority Order)
+
+### Immediate (This Week)
+1. Complete Tree Editor validation (required fields, orphan detection)
+2. Add User Preferences (theme toggle, export format default)
+3. Fix TypeScript strict mode warnings
+4. Create remaining 4 starter decision trees
+
+### Soon (Phase 2 Completion)
+- Team management
+- Mobile responsive improvements
+- Tree versioning UI
+
+### Later (Phase 2.5)
+- Personal tree branching
+- Step library with ratings
+- Tree forking and sharing
+
+---
+
+## Key Files Reference
+
+### Backend
+```
+backend/
+├── app/
+│   ├── main.py              # FastAPI entry point
+│   ├── api/v1/endpoints/    # API route handlers
+│   │   ├── auth.py
+│   │   ├── trees.py
+│   │   └── sessions.py
+│   ├── models/              # SQLAlchemy models
+│   ├── schemas/             # Pydantic schemas
+│   └── core/
+│       ├── config.py        # Settings
+│       ├── security.py      # JWT handling
+│       └── logging_config.py
+├── alembic/                 # Database migrations
+├── tests/                   # pytest tests
+└── requirements.txt
+```
+
+### Frontend
+```
+frontend/
+├── src/
+│   ├── main.tsx            # Entry point
+│   ├── App.tsx             # Router setup
+│   ├── pages/              # Page components
+│   │   └── TreeEditorPage.tsx
+│   ├── components/
+│   │   ├── common/         # Modal, etc.
+│   │   ├── tree-editor/    # Tree Editor components
+│   │   │   ├── TreeEditorLayout.tsx
+│   │   │   ├── TreeMetadataForm.tsx
+│   │   │   ├── NodeList.tsx
+│   │   │   ├── NodeEditorModal.tsx
+│   │   │   ├── NodeFormDecision.tsx
+│   │   │   ├── NodeFormAction.tsx
+│   │   │   ├── NodeFormResolution.tsx
+│   │   │   ├── DynamicArrayField.tsx
+│   │   │   └── NodePicker.tsx
+│   │   └── tree-preview/   # Visual preview
+│   │       ├── TreePreviewPanel.tsx
+│   │       └── TreePreviewNode.tsx
+│   ├── store/
+│   │   ├── authStore.ts
+│   │   └── treeEditorStore.ts  # Zustand + immer + zundo
+│   ├── contexts/           # React contexts (auth)
+│   ├── hooks/              # Custom hooks
+│   └── api/                # API client
+├── tailwind.config.js
+└── tsconfig.json
+```
+
+### Documentation
+```
+Apoklisis/
+├── CLAUDE-SETUP.md         # Full context for Claude Code
+├── CURRENT-STATE.md        # This file - quick status
+├── LESSONS-LEARNED.md      # Bugs and fixes reference
+├── 01-PROJECT-OVERVIEW.md
+├── 02-TECHNICAL-ARCHITECTURE.md
+├── 03-DEVELOPMENT-ROADMAP.md
+├── 04-FEATURE-SPECIFICATIONS.md
+└── PHASE-2.5-PERSONAL-BRANCHING.md  # Detailed Phase 2.5 spec
+```
+
+---
+
+## Environment Quick Reference
+
+### Start Development
+```powershell
+# Terminal 1: Database
+docker start apoklisis_postgres
+
+# Terminal 2: Backend
+cd C:\Dev\Projects\Apoklisis\backend
+.\venv\Scripts\activate
+uvicorn app.main:app --reload
+
+# Terminal 3: Frontend
+cd C:\Dev\Projects\Apoklisis\frontend
+npm run dev
+```
+
+### URLs
+- Frontend: http://localhost:5173
+- Backend API: http://localhost:8000
+- API Docs: http://localhost:8000/docs
+
+### Run Tests
+```powershell
+cd C:\Dev\Projects\Apoklisis\backend
+.\venv\Scripts\activate
+pytest
+```
+
+---
+
+## Recent Changes (Jan 28, 2026)
+
+1. Fixed DateTime timezone bugs in all models
+2. Added production logging system
+3. Created 40+ integration tests
+4. Added Phase 2.5 specifications (Personal Branching, Step Library)
+5. Added User Preferences to MVP scope
+6. Created LESSONS-LEARNED.md
+7. Created CURRENT-STATE.md (this file)
+8. **Tree Editor Implementation**:
+   - Zustand store with immer middleware and zundo for undo/redo
+   - Form-based node editing with type-specific forms
+   - NodePicker dropdown grouped by node type (Decision/Action/Solution)
+   - Visual tree preview with recursive rendering
+   - Solution connection indicators (green checkmark badges)
+   - Shared node detection showing when multiple nodes link to same target
+   - Modal component with scrollable body, fixed header/footer
+
+---
+
+## Blockers / Known Issues
+
+| Issue | Workaround | Status |
+|-------|------------|--------|
+| pytest-asyncio version conflict | Use 0.24.0 | Documented |
+| No local psql on Windows | Use `docker exec` | Documented |
+
+---
+
+## Session Handoff Notes
+
+*Update this section at the end of each coding session:*
+
+**Last Session (Jan 28, 2026):**
+- Completed Tree Editor core implementation
+- Fixed modal scroll/overflow issue (content scrolls, header/footer fixed)
+- Added SharedLinksMap for tracking nodes that link to same target
+- Improved NodePicker with type-grouped dropdown
+- Added solution connection indicators in preview
+- Next: Tree Editor validation polish, user preferences UI