Frontend Features: - React 18 + Vite + TypeScript + Tailwind CSS + Zustand - JWT authentication with automatic token refresh - Tree library with search and category filtering - Full tree navigation (decision/action/solution nodes) - Session management with notes and completion - Session history with export (Markdown/Text/HTML) - ErrorBoundary for graceful error handling Backend Fixes: - CORS: Added port 5174 to allowed origins - Sessions: Fixed JSONB datetime serialization (mode='json') Documentation: - Updated PROGRESS.md with Phase 2 completion - Updated 03-DEVELOPMENT-ROADMAP.md with checked items - Added PHASE-2.5-PERSONAL-BRANCHING.md spec Seed Data: - Added backend/scripts/seed_data.py with Password Reset tree Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
15 KiB
Project Apoklisis - Development Progress
Last Updated: January 28, 2026 Current Phase: Phase 2 Frontend - COMPLETE & TESTED
Project Overview
Building a troubleshooting decision tree web application for MSP engineers. The app allows creating, managing, and navigating through decision trees for common IT support scenarios.
Tech Stack:
- Backend: Python FastAPI + SQLAlchemy 2.0 (async) + PostgreSQL
- Frontend: React 18 + Vite + TypeScript + Tailwind CSS + Zustand
- Hosting: Render (dev) / Railway Pro (production)
Apoklisis Development Progress
📚 Reference: See CLAUDE-SETUP.md for available development tools and usage guidelines
Completed Work
Phase 1a: Backend API (COMPLETE)
All backend components have been created following 02-TECHNICAL-ARCHITECTURE.md exactly.
Project Structure Created
backend/
├── alembic/ # Database migrations
│ ├── versions/
│ │ └── 001_initial_schema.py
│ ├── env.py
│ └── script.py.mako
├── app/
│ ├── api/
│ │ ├── endpoints/
│ │ │ ├── auth.py # Authentication (register, login, refresh, logout)
│ │ │ ├── trees.py # Trees CRUD + search
│ │ │ └── sessions.py # Sessions + export (md, txt, html)
│ │ ├── deps.py # Auth dependencies (get_current_user, role checks)
│ │ └── router.py # Main API router
│ ├── core/
│ │ ├── config.py # Settings via pydantic-settings
│ │ ├── database.py # Async SQLAlchemy engine + session
│ │ └── security.py # JWT creation/validation + bcrypt
│ ├── models/
│ │ ├── user.py # User model (UUID, email, role, team_id)
│ │ ├── team.py # Team model
│ │ ├── tree.py # Tree model (JSONB tree_structure)
│ │ ├── session.py # Session model (path tracking)
│ │ └── attachment.py # Attachment model (file uploads)
│ ├── schemas/
│ │ ├── user.py # User Pydantic schemas
│ │ ├── token.py # JWT token schemas
│ │ ├── tree.py # Tree request/response schemas
│ │ └── session.py # Session schemas + export
│ └── main.py # FastAPI application entry point
├── alembic.ini
├── docker-compose.yml # PostgreSQL 16 container
├── requirements.txt
├── .env.example
└── README.md
Database Schema (5 tables)
users- User accounts with roles (admin, engineer, viewer)teams- Team groupings for userstrees- Decision trees with JSONB structure, versioning, categoriessessions- Troubleshooting sessions with path trackingattachments- File attachments for sessions
API Endpoints Implemented
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/v1/auth/register |
User registration |
| POST | /api/v1/auth/login |
Login (form data) |
| POST | /api/v1/auth/login/json |
Login (JSON body) |
| POST | /api/v1/auth/refresh |
Refresh access token |
| GET | /api/v1/auth/me |
Get current user |
| POST | /api/v1/auth/logout |
Logout (client-side) |
| GET | /api/v1/trees |
List trees (paginated) |
| POST | /api/v1/trees |
Create tree |
| GET | /api/v1/trees/categories |
Get unique categories |
| GET | /api/v1/trees/search |
Full-text search |
| GET | /api/v1/trees/{id} |
Get tree by ID |
| PUT | /api/v1/trees/{id} |
Update tree |
| DELETE | /api/v1/trees/{id} |
Soft delete tree |
| GET | /api/v1/sessions |
List user's sessions |
| POST | /api/v1/sessions |
Start new session |
| GET | /api/v1/sessions/{id} |
Get session |
| PUT | /api/v1/sessions/{id} |
Update session (add decisions) |
| POST | /api/v1/sessions/{id}/complete |
Mark session complete |
| POST | /api/v1/sessions/{id}/export |
Export session (md/txt/html) |
Key Technical Decisions
- UUIDs: All primary keys use PostgreSQL
gen_random_uuid() - JSONB: Tree structures and session paths stored as JSONB
- JWT Auth: 15-minute access tokens, 7-day refresh tokens
- Password Hashing: bcrypt with cost factor 12
- Full-text Search: PostgreSQL
to_tsvectoron tree name/description - Soft Deletes: Trees use
is_activeflag (set to false on delete) - Async: All database operations use async SQLAlchemy
- Timezone-Aware DateTime: All timestamps use
DateTime(timezone=True)and UTC storage
Recent Bug Fixes & Improvements (January 28, 2026)
DateTime Handling Fix ✅
Issue: Mixing timezone-aware and timezone-naive datetime objects caused Internal Server Errors in session completion and updates.
Resolution (Following FastAPI/SQLAlchemy 2026 best practices):
- Updated all SQLAlchemy models to use
DateTime(timezone=True) - Changed all default datetime factories to
lambda: datetime.now(timezone.utc) - Ensures all timestamps are timezone-aware and stored in UTC
- Affected models: User, Team, Tree, Session, Attachment
Production Logging System ✅
Added (Following 2026 FastAPI logging standards):
- Structured logging configuration with development/production modes
- Request correlation IDs for distributed tracing
- Log rotation (10MB files, 10 backups) for long-running applications
- Separate loggers for application, error, and access logs
- Request/response middleware with timing metrics
New files:
backend/app/core/logging_config.py- Main logging configurationbackend/app/core/middleware.py- Request logging and error capture middleware
Comprehensive Integration Tests ✅
Created full test suite with 29 integration tests (all passing):
- Test Framework: pytest 7.4.3 with pytest-asyncio 0.23.0
- Test Database: Separate PostgreSQL test database (
apoklisis_test) - Coverage: Auth, Trees, and Sessions endpoints
- Fixtures: Reusable test user, admin user, auth headers, and test tree fixtures
New test files:
backend/tests/conftest.py- Test configuration and fixturesbackend/tests/test_auth.py- Authentication endpoint tests (7 tests)backend/tests/test_trees.py- Tree CRUD and search tests (10 tests)backend/tests/test_sessions.py- Session workflow tests (12 tests)backend/pytest.ini- Pytest configuration with coveragebackend/requirements-dev.txt- Development dependencies
Test Coverage:
- ✅ User registration and login flows (including role-based registration)
- ✅ JWT token generation and validation
- ✅ Tree CRUD operations (create, read, update, delete)
- ✅ Full-text tree search and category filtering
- ✅ Session lifecycle (create, update, complete)
- ✅ Session export in multiple formats (markdown, text, HTML)
- ✅ Authorization and permission checking (engineer and admin roles)
User Role Management Fix ✅
Issue: Registration endpoint was hardcoding all users as "engineer", preventing admin user creation in tests.
Resolution:
- Added
rolefield toUserCreateschema with default="engineer" - Updated registration endpoint to use
user_data.roleinstead of hardcoding - Enables proper role-based testing while maintaining secure defaults
- All 29 tests now pass successfully
API Testing Results
Automated testing confirmed:
- 18/18 endpoints fully functional
- All authentication flows working correctly
- Tree management complete (CRUD + search)
- Session workflows operational (with datetime fix)
- Export functionality validated (all 3 formats)
Updated Project Structure
backend/
├── alembic/ # Database migrations
├── app/
│ ├── api/ # API endpoints
│ ├── core/
│ │ ├── config.py
│ │ ├── database.py
│ │ ├── security.py
│ │ ├── logging_config.py # NEW: Logging setup
│ │ └── middleware.py # NEW: Request logging
│ ├── models/ # UPDATED: All datetime fields fixed
│ ├── schemas/
│ └── main.py # UPDATED: Logging integration
├── tests/ # NEW: Integration tests
│ ├── conftest.py
│ ├── test_auth.py
│ ├── test_trees.py
│ └── test_sessions.py
├── logs/ # NEW: Log files (created at runtime)
├── pytest.ini # NEW: Test configuration
└── requirements-dev.txt # NEW: Development dependencies
How to Run the Backend
-
Start PostgreSQL:
cd backend docker-compose up -d -
Set up Python environment:
python -m venv venv venv\Scripts\activate # Windows # source venv/bin/activate # Linux/Mac pip install -r requirements.txt -
Configure environment:
cp .env.example .env # Edit .env if needed (defaults work for local dev) -
Run database migrations:
alembic upgrade head -
Start the development server:
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000 -
Access API docs:
http://localhost:8000/api/docs
How to Run Tests
-
Install development dependencies:
pip install -r requirements-dev.txt -
Create test database (one-time setup):
# Connect to PostgreSQL psql -U postgres -h localhost # Create test database CREATE DATABASE apoklisis_test; \q -
Run all tests with coverage:
cd backend pytest -
Run specific test file:
pytest tests/test_auth.py -
Run tests with verbose output:
pytest -v -
View coverage report:
# HTML report will be in htmlcov/index.html open htmlcov/index.html # Mac/Linux start htmlcov/index.html # Windows
Phase 2: Frontend Implementation (COMPLETE)
Tech Stack
- Framework: Vite + React 18 + TypeScript
- Styling: Tailwind CSS v3 + shadcn/ui CSS variables
- State Management: Zustand with persistence
- Routing: React Router v6
- API Client: Axios with token interceptors
Frontend 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/
│ │ └── layout/ # AppLayout, ProtectedRoute
│ ├── hooks/ # Custom hooks (future)
│ ├── lib/utils.ts # cn utility for class names
│ ├── pages/
│ │ ├── LoginPage.tsx
│ │ ├── RegisterPage.tsx
│ │ ├── TreeLibraryPage.tsx
│ │ ├── TreeNavigationPage.tsx # Core feature
│ │ ├── SessionHistoryPage.tsx
│ │ └── SessionDetailPage.tsx
│ ├── store/
│ │ └── authStore.ts # Zustand auth store
│ ├── types/ # TypeScript types
│ ├── App.tsx
│ ├── router.tsx
│ └── main.tsx
├── .env.example
├── tailwind.config.js
└── vite.config.ts
Routes Implemented
| Path | Page | Auth Required |
|---|---|---|
/login |
LoginPage | No |
/register |
RegisterPage | No |
/trees |
TreeLibraryPage | Yes |
/trees/:id/navigate |
TreeNavigationPage | Yes |
/sessions |
SessionHistoryPage | Yes |
/sessions/:id |
SessionDetailPage | Yes |
Key Features
- JWT Auth: Automatic token refresh on 401, persistent login state
- Tree Library: List/search/filter trees by category
- Tree Navigation: Full decision tree traversal with:
- Decision/Action/Solution node rendering
- Path breadcrumb navigation
- Back button support
- Notes per step
- Session completion
- Session History: View/resume sessions, filter by status
- Export: Download session transcript (Markdown/Text/HTML)
- Error Handling: Route-level ErrorBoundary for graceful error recovery
Frontend Bug Fixes (January 28, 2026)
- CORS Configuration - Added port 5174 to allowed origins in backend
.envandconfig.py - API Response Format - Fixed
treesApi.list()andsessionsApi.list()to expect arrays (not paginated objects) - Session JSONB Serialization - Fixed
model_dump(mode='json')to properly serialize datetime fields for PostgreSQL JSONB storage - ErrorBoundary Component - Added
RouteError.tsxfor route-level error handling with "Go Back" / "Go Home" buttons
How to Run the Frontend
-
Start the backend (in one terminal):
cd backend venv\Scripts\activate uvicorn app.main:app --reload -
Start the frontend (in another terminal):
cd frontend npm install npm run dev -
Access the app: http://localhost:5173
What's Next
Phase 1b: Pre-built Trees (COMPLETE - Hybrid Approach)
Seed Data Script: backend/scripts/seed_data.py
Trees Implemented:
- ✅ Password Reset/Account Lockout - Full implementation (~15 decision nodes)
- 🔲 File Share Access Problems - Stub created (placeholder nodes)
- 🔲 FSLogix Profile Issues - Not started
- 🔲 Citrix VDA Registration - Not started
- 🔲 AD Replication Issues - Not started
Run Seed Script:
cd backend
python -m scripts.seed_data
Remaining Work
- Testing: End-to-end testing of full workflow
- Polish: UI refinements, error handling improvements
- More Trees: Add remaining 4 trees from
TS-EXAMPLES.md - Deployment: Set up CI/CD pipeline and deploy to Render/Railway
Important Files to Reference
| File | Purpose |
|---|---|
02-TECHNICAL-ARCHITECTURE.md |
Full technical spec (database schema, API endpoints) |
05-QUESTIONS-AND-ACTION-ITEMS.md |
Design decisions and priorities |
TS-EXAMPLES.md |
5 example troubleshooting trees to implement |
backend/README.md |
Backend setup instructions |
frontend/.env.example |
Frontend environment template |
Notes for Next Session
- ✅ Backend fully tested - all 18 endpoints working correctly
- ✅ Integration tests - 29 tests with full coverage (all passing)
- ✅ Seed script created with Password Reset tree (full implementation)
- ✅ Frontend COMPLETE - Full React app with all core pages
- ✅ Full workflow tested - Register → Login → Browse → Navigate → Complete → Export all working
- 📝 Single-user focus for MVP (team features are in schema but low priority)
Recommended Next Steps
- Polish UI: Add loading states, better error messages, keyboard shortcuts
- Add more trees: Implement remaining 4 trees from
TS-EXAMPLES.md - Deploy: Set up CI/CD pipeline and deploy to Render/Railway
- Mobile responsiveness: Optimize for tablet/mobile use