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>
This commit is contained in:
Michael Chihlas
102
CLAUDE-SETUP.md
102
CLAUDE-SETUP.md
@@ -381,11 +381,14 @@ curl -X GET "http://localhost:8000/api/v1/trees" -H "Authorization: Bearer <toke
|
||||
- **Containerization**: Docker (apoklisis_postgres container)
|
||||
- **Migrations**: Alembic
|
||||
|
||||
**Frontend (Not Started)**:
|
||||
**Frontend (Complete + Tree Editor)**:
|
||||
|
||||
- **Framework**: React (planned)
|
||||
- **Styling**: Tailwind CSS (planned)
|
||||
- **Status**: Awaiting development
|
||||
- **Framework**: React 18 + Vite + TypeScript
|
||||
- **Styling**: Tailwind CSS + shadcn/ui CSS variables
|
||||
- **State Management**: Zustand with immer + zundo (undo/redo)
|
||||
- **Routing**: React Router v6
|
||||
- **API Client**: Axios with token interceptors
|
||||
- **Status**: Core features complete, Tree Editor implemented
|
||||
|
||||
**Infrastructure**:
|
||||
|
||||
@@ -412,26 +415,30 @@ curl -X GET "http://localhost:8000/api/v1/trees" -H "Authorization: Bearer <toke
|
||||
|
||||
### Current Development Phase
|
||||
|
||||
**Phase 1a: Backend API** - ✅ **COMPLETE & TESTED**
|
||||
**Phase 1: Backend + Frontend MVP** - ✅ **COMPLETE**
|
||||
|
||||
- All 18 API endpoints implemented and verified
|
||||
- Database schema finalized with timezone-aware timestamps
|
||||
- Authentication system working (JWT with bcrypt, role-based access)
|
||||
- 29 integration tests (all passing) with comprehensive coverage
|
||||
- 40+ integration tests (all passing) with comprehensive coverage
|
||||
- Production logging with correlation IDs
|
||||
- DateTime bug fixes applied across all models
|
||||
- Ready for deployment
|
||||
- React frontend with tree navigation, session management, export
|
||||
|
||||
**Phase 1b: Pre-built Trees** - 🔄 **Next Up**
|
||||
**Phase 2: Tree Editor** - 🔄 **IN PROGRESS**
|
||||
|
||||
- Create seed data script
|
||||
- Implement 5 example troubleshooting trees from `TS-EXAMPLES.md`
|
||||
- ✅ Zustand store with immer middleware + zundo (undo/redo)
|
||||
- ✅ Form-based node editing (Decision, Action, Solution types)
|
||||
- ✅ Visual tree preview with solution connection indicators
|
||||
- ✅ NodePicker with type-grouped dropdown
|
||||
- ✅ SharedLinksMap for detecting nodes with multiple sources
|
||||
- ✅ Modal with scrollable content, fixed header/footer
|
||||
- ⏳ Validation polish (required fields, orphan detection)
|
||||
|
||||
**Phase 2: React Frontend** - ⏳ **Planned**
|
||||
**Phase 2 Remaining** - ⏳ **Planned**
|
||||
|
||||
- Tree navigation interface
|
||||
- Session management UI
|
||||
- Admin panel for tree CRUD operations
|
||||
- Team management features
|
||||
- Mobile responsive improvements
|
||||
- User preferences (dark mode)
|
||||
|
||||
### Backend File Structure
|
||||
|
||||
@@ -456,29 +463,56 @@ backend/
|
||||
│ │ ├── logging_config.py # Structured logging configuration
|
||||
│ │ └── middleware.py # Request logging middleware
|
||||
│ ├── models/ # SQLAlchemy models (timezone-aware)
|
||||
│ │ ├── user.py
|
||||
│ │ ├── team.py
|
||||
│ │ ├── tree.py
|
||||
│ │ ├── session.py
|
||||
│ │ └── attachment.py
|
||||
│ ├── schemas/ # Pydantic schemas
|
||||
│ │ ├── user.py
|
||||
│ │ ├── token.py
|
||||
│ │ ├── tree.py
|
||||
│ │ └── session.py
|
||||
│ └── main.py # FastAPI app entry point
|
||||
├── tests/ # Integration tests
|
||||
│ ├── conftest.py # Test fixtures and configuration
|
||||
│ ├── test_auth.py # Authentication tests (7 tests)
|
||||
│ ├── test_trees.py # Tree CRUD tests (10 tests)
|
||||
│ └── test_sessions.py # Session workflow tests (12 tests)
|
||||
├── tests/ # Integration tests (40+ tests)
|
||||
├── logs/ # Log files (created at runtime)
|
||||
├── docker-compose.yml # PostgreSQL container definition
|
||||
├── pytest.ini # Pytest configuration
|
||||
├── requirements.txt # Production dependencies
|
||||
├── requirements-dev.txt # Development dependencies (pytest, etc.)
|
||||
├── .env.example
|
||||
└── README.md
|
||||
└── requirements.txt # Production dependencies
|
||||
```
|
||||
|
||||
### Frontend File Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── api/ # API client layer
|
||||
│ │ ├── client.ts # Axios instance with auth interceptors
|
||||
│ │ ├── auth.ts # Auth endpoints
|
||||
│ │ ├── trees.ts # Tree endpoints
|
||||
│ │ └── sessions.ts # Session endpoints
|
||||
│ ├── components/
|
||||
│ │ ├── common/
|
||||
│ │ │ └── Modal.tsx # Reusable modal (scrollable body, fixed header/footer)
|
||||
│ │ ├── layout/ # AppLayout, ProtectedRoute
|
||||
│ │ ├── tree-editor/ # Tree Editor components
|
||||
│ │ │ ├── TreeEditorLayout.tsx # Split-view container
|
||||
│ │ │ ├── TreeMetadataForm.tsx # Name, description, category
|
||||
│ │ │ ├── NodeList.tsx # Node list with CRUD actions
|
||||
│ │ │ ├── NodeEditorModal.tsx # Modal wrapper for node editing
|
||||
│ │ │ ├── NodeFormDecision.tsx # Decision node fields
|
||||
│ │ │ ├── NodeFormAction.tsx # Action node fields
|
||||
│ │ │ ├── NodeFormResolution.tsx # Solution node fields
|
||||
│ │ │ ├── DynamicArrayField.tsx # Reusable array input
|
||||
│ │ │ └── NodePicker.tsx # Type-grouped node selector
|
||||
│ │ └── tree-preview/ # Visual preview components
|
||||
│ │ ├── TreePreviewPanel.tsx # Preview container + SharedLinksMap
|
||||
│ │ └── TreePreviewNode.tsx # Node cards with solution indicators
|
||||
│ ├── pages/
|
||||
│ │ ├── TreeEditorPage.tsx # /trees/new and /trees/:id/edit
|
||||
│ │ ├── TreeLibraryPage.tsx # Tree browsing
|
||||
│ │ ├── TreeNavigationPage.tsx # Tree traversal
|
||||
│ │ └── ... # Other pages
|
||||
│ ├── store/
|
||||
│ │ ├── authStore.ts # Auth state (Zustand + persist)
|
||||
│ │ └── treeEditorStore.ts # Tree editor state (Zustand + immer + zundo)
|
||||
│ ├── types/ # TypeScript types
|
||||
│ │ ├── tree.ts # TreeStructure, TreeNode, etc.
|
||||
│ │ └── index.ts # Barrel exports
|
||||
│ ├── router.tsx # React Router configuration
|
||||
│ └── main.tsx # Entry point
|
||||
├── tailwind.config.js
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
### Development Workflow
|
||||
|
||||
Reference in New Issue
Block a user