feat: Migrate web-ui to shadcn/ui Nova design system

codeframe/persistence/database.py

@@ -669,4 +669,8 @@ def create_audit_log(self, *args, **kwargs):
         """Delegate to audit_logs.create_audit_log()."""
         return self.audit_logs.create_audit_log(*args, **kwargs)
 
+    async def cleanup_expired_sessions(self, *args, **kwargs):
+        """Delegate to projects.cleanup_expired_sessions()."""
+        return await self.projects.cleanup_expired_sessions(*args, **kwargs)
+
     # End of delegated methods

docs/context-management.md

@@ -0,0 +1,216 @@
+# Context Management System
+
+**Feature**: 007-context-management
+**Status**: Complete
+
+## Overview
+
+The Context Management system implements intelligent tiered memory (HOT/WARM/COLD) with importance scoring to enable long-running autonomous agent sessions (4+ hours) by reducing token usage 30-50% through strategic context archival and restoration.
+
+## Core Concepts
+
+### Tiered Memory System
+
+- **HOT Tier** (importance_score ≥ 0.8): Always loaded, critical context items
+- **WARM Tier** (0.4 ≤ importance_score < 0.8): On-demand loading, semi-important items
+- **COLD Tier** (importance_score < 0.4): Archived during flash save, rarely accessed
+
+### Importance Scoring Algorithm
+
+```python
+score = 0.4 × type_weight + 0.4 × age_decay + 0.2 × access_boost
+
+# Type weights: TASK (1.0), CODE (0.9), ERROR (0.8), PRD_SECTION (0.7), etc.
+# Age decay: Exponential decay over time (half-life = 24 hours)
+# Access boost: 0.1 per access, capped at 0.5
+```
+
+### Flash Save Mechanism
+
+When context approaches token limit (80% of 180k = 144k tokens):
+
+1. Create checkpoint with full context state (JSON serialization)
+2. Archive COLD tier items (delete from active context)
+3. Retain HOT and WARM tier items
+4. Achieve 30-50% token reduction
+
+## Usage Patterns
+
+### 1. Creating Context Items
+
+```python
+from codeframe.agents.worker_agent import WorkerAgent
+from codeframe.core.models import ContextItemType
+
+agent = WorkerAgent(agent_id="backend-001", project_id=123, db=db)
+
+# Save a task to context
+await agent.save_context_item(
+    item_type=ContextItemType.TASK,
+    content="Implement user authentication with JWT tokens"
+)
+
+# Save code snippet
+await agent.save_context_item(
+    item_type=ContextItemType.CODE,
+    content="def authenticate_user(token: str) -> User: ..."
+)
+```
+
+### 2. Loading Context
+
+```python
+# Load all HOT tier items (always loaded)
+hot_items = await agent.load_context(tier="hot")
+
+# Load specific tier
+warm_items = await agent.load_context(tier="warm", limit=50)
+
+# Load all active context
+all_items = await agent.load_context()  # Returns HOT + WARM
+```
+
+### 3. Updating Tiers
+
+```python
+from codeframe.lib.context_manager import ContextManager
+
+context_mgr = ContextManager(db=db)
+
+# Recalculate scores and reassign tiers for an agent
+updated_count = context_mgr.update_tiers_for_agent(
+    project_id=123,
+    agent_id="backend-001"
+)
+print(f"Updated {updated_count} items")
+```
+
+### 4. Flash Save Operation
+
+```python
+# Check if flash save should be triggered
+if await agent.should_flash_save():
+    # Trigger flash save
+    result = await agent.flash_save()
+
+    print(f"Checkpoint ID: {result['checkpoint_id']}")
+    print(f"Token reduction: {result['reduction_percentage']}%")
+    print(f"Items archived: {result['items_archived']}")
+```
+
+### 5. Accessing Context Stats (API)
+
+```bash
+# Get context statistics for an agent
+GET /api/agents/{agent_id}/context/stats?project_id=123
+
+# Response:
+{
+  "agent_id": "backend-001",
+  "project_id": 123,
+  "hot_count": 20,
+  "warm_count": 50,
+  "cold_count": 30,
+  "total_tokens": 50000,
+  "token_usage_percentage": 27.8
+}
+
+# List context items with tier filtering
+GET /api/agents/{agent_id}/context/items?project_id=123&tier=hot&limit=20
+
+# Trigger flash save
+POST /api/agents/{agent_id}/flash-save?project_id=123&force=false
+```
+
+## Frontend Components
+
+### ContextPanel (Main Container)
+
+```tsx
+import { ContextPanel } from './components/context/ContextPanel';
+
+// Display context overview with auto-refresh
+<ContextPanel
+  agentId="backend-001"
+  projectId={123}
+  refreshInterval={5000}  // 5 seconds
+/>
+```
+
+### ContextTierChart (Visual Distribution)
+
+```tsx
+import { ContextTierChart } from './components/context/ContextTierChart';
+
+// Show tier distribution chart
+<ContextTierChart stats={contextStats} />
+```
+
+### ContextItemList (Items Table)
+
+```tsx
+import { ContextItemList } from './components/context/ContextItemList';
+
+// Display filterable, paginated items table
+<ContextItemList
+  agentId="backend-001"
+  projectId={123}
+  pageSize={20}
+/>
+```
+
+## Best Practices
+
+1. **Regular Score Updates**: Run `update_tiers_for_agent()` periodically (e.g., every 5 minutes) to keep tier assignments fresh
+2. **Flash Save Monitoring**: Check `should_flash_save()` after major context additions to prevent token overflow
+3. **Tier-Aware Loading**: Load only HOT tier initially, fetch WARM on-demand to minimize latency
+4. **Checkpoint Recovery**: Use checkpoints to restore context after crashes or interruptions
+5. **Multi-Agent Context**: Each agent maintains independent context scoped by `(project_id, agent_id)`
+
+## Performance Characteristics
+
+- Context tier lookup: <50ms
+- Flash save operation: <2 seconds
+- Importance score calculation: <10ms per item
+- Context load (1000 items): <200ms
+- Token reduction: 30-50% after flash save
+
+## File Locations
+
+```
+codeframe/
+├── lib/
+│   ├── context_manager.py        # Core context management logic
+│   ├── importance_scorer.py      # Scoring algorithm
+│   └── token_counter.py          # Token counting with tiktoken
+├── persistence/
+│   └── database.py               # Context storage methods
+└── agents/
+    └── worker_agent.py           # Agent context interface
+
+web-ui/src/
+├── types/context.ts              # TypeScript type definitions
+├── api/context.ts                # API client functions
+└── components/context/
+    ├── ContextPanel.tsx          # Main panel component
+    ├── ContextTierChart.tsx      # Tier distribution chart
+    └── ContextItemList.tsx       # Items table with filtering
+
+tests/
+├── context/                      # Unit tests (21 tests)
+│   ├── test_flash_save.py
+│   ├── test_token_counting.py
+│   ├── test_checkpoint_restore.py
+│   └── test_context_stats.py
+└── integration/                  # Integration tests (2 tests)
+    └── test_flash_save_workflow.py
+
+web-ui/__tests__/components/
+└── ContextPanel.test.tsx         # Frontend tests (6 tests)
+```
+
+## Testing
+
+- **Backend**: 23 unit tests + 2 integration tests = 25 tests (100% passing)
+- **Frontend**: 6 component tests (100% passing)
+- **Total**: 31 tests covering all context management functionality

docs/e2e-testing.md

@@ -0,0 +1,120 @@
+# End-to-End Testing (E2E)
+
+## Overview
+
+CodeFRAME has comprehensive E2E test coverage with 47 tests (10 backend Pytest, 37 frontend Playwright) validating the complete autonomous workflow from discovery through completion.
+
+## Running E2E Tests
+
+### Frontend Tests (Playwright)
+
+```bash
+cd tests/e2e
+npx playwright test  # Backend auto-starts on port 8080
+```
+
+**What happens automatically**:
+1. Backend server starts with health check on port 8080
+2. Frontend dev server starts on port 3000
+3. Database seeding runs (via global-setup.ts)
+4. Tests execute across browsers (Chromium, Firefox, WebKit)
+5. Servers shut down after completion
+
+### Backend Tests (Pytest)
+
+```bash
+uv run pytest tests/e2e/test_*.py -v -m "e2e"
+```
+
+## Key Configuration
+
+### Playwright Auto-Start
+
+`tests/e2e/playwright.config.ts`:
+```typescript
+webServer: [
+  {
+    command: 'cd ../.. && uv run uvicorn codeframe.ui.server:app --port 8080',
+    url: 'http://localhost:8080/health',
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  },
+  // Frontend server config...
+]
+```
+
+### Health Endpoint
+
+`codeframe/ui/server.py`:
+```python
+@app.get("/health")
+async def health_check():
+    return {"status": "ok"}
+```
+
+## Troubleshooting
+
+### Port 8080 already in use
+
+```bash
+# Check what's using port 8080
+lsof -i:8080
+
+# If it's a CodeFrame server you want to stop:
+lsof -ti:8080 -c python | xargs kill
+
+# Only use kill -9 as last resort (kills ALL processes on port)
+# lsof -ti:8080 | xargs kill -9  # ⚠️  Use with caution
+
+# Alternative: Let Playwright reuse the existing server
+# (enabled by default via reuseExistingServer: true in playwright.config.ts)
+```
+
+### Backend health check timeout
+
+```bash
+# Test backend manually (from project root)
+uv run uvicorn codeframe.ui.server:app --port 8080
+curl http://localhost:8080/health  # Should return {"status": "ok"}
+```
+
+### Database seeding errors
+
+```bash
+# Remove test databases if needed (rarely necessary)
+rm -f tests/e2e/fixtures/*/test_state.db
+rm -f .codeframe/test_state.db
+
+# Note: Database seeding uses INSERT OR REPLACE to avoid conflicts
+# UNIQUE constraint warnings should NOT occur (if they do, report as bug)
+```
+
+### Frontend server timeout
+
+```bash
+cd web-ui
+npm install
+npm run dev  # Should start on port 3000
+```
+
+## Best Practices
+
+1. **Use auto-start**: Rely on Playwright's `webServer` config (don't manually start backend)
+2. **Check health endpoint**: Ensure `/health` responds quickly (<100ms)
+3. **Clean databases**: Remove test databases between test runs if needed
+4. **Ignore UNIQUE warnings**: Database seeding warnings are expected and harmless
+5. **CI mode**: In CI (`CI=true`), servers are NOT auto-started (CI starts them separately)
+6. **Port conflicts**: Kill processes on 8080/3000 before running tests locally
+
+## Test Coverage
+
+E2E tests validate:
+- Full workflow: Discovery → Planning → Execution → Completion
+- Quality gates blocking on failures
+- Checkpoint creation and restoration
+- Review agent security detection
+- Cost tracking accuracy
+- Real-time dashboard updates
+- Multi-agent coordination
+
+See [tests/e2e/README.md](../tests/e2e/README.md) for comprehensive testing documentation.