feat(ui): use theme-aware colors for Maestro status card

Replace hardcoded violet/purple colors in OrchestratorStatusCard with
standard primary color CSS variables to ensure proper theming across
all theme variants (light/dark mode, Twitter, Claude, Neo Brutalism,
Aurora, Retro Arcade).

Changes:
- Card background: bg-primary/10 with border-primary/30
- Maestro title and state text: text-primary
- Activity button: text-primary hover:bg-primary/10
- Events border and timestamps: use primary color variants

Also includes:
- Enhanced review-pr command with vision alignment checks
- CLAUDE.md improvements: prerequisites, testing section, React 19 update
- Simplified parallel mode documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.claude/commands/review-pr.md

@@ -8,8 +8,22 @@ Pull request(s): $ARGUMENTS
 - At least 1 PR is required.
 
 ## TASKS
-- Use the GH CLI tool to retrieve the details (descriptions, divs, comments, feedback, reviews, etc)
-- Use 3 deepdive subagents to analyze the impact of the codebase
+
+1. **Retrieve PR Details**
+   - Use the GH CLI tool to retrieve the details (descriptions, diffs, comments, feedback, reviews, etc)
+
+2. **Analyze Codebase Impact**
+   - Use 3 deepdive subagents to analyze the impact on the codebase
+
+3. **Vision Alignment Check**
+   - Read the project's README.md and CLAUDE.md to understand the application's core purpose
+   - Assess whether this PR aligns with the application's intended functionality
+   - If the changes deviate significantly from the core vision or add functionality that doesn't serve the application's purpose, note this in the review
+   - This is not a blocker, but should be flagged for the reviewer's consideration
+
+4. **Safety Assessment**
    - Provide a review on whether the PR is safe to merge as-is
    - Provide any feedback in terms of risk level
-- Propose any improments in terms of importance and complexity 
+
+5. **Improvements**
+   - Propose any improvements in terms of importance and complexity

CLAUDE.md

@@ -2,6 +2,12 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+## Prerequisites
+
+- Python 3.11+
+- Node.js 20+ (for UI development)
+- Claude Code CLI
+
 ## Project Overview
 
 This is an autonomous coding agent system with a React-based UI. It uses the Claude Agent SDK to build complete applications over multiple sessions using a two-agent pattern:
@@ -86,6 +92,33 @@ npm run lint     # Run ESLint
 
 **Note:** The `start_ui.bat` script serves the pre-built UI from `ui/dist/`. After making UI changes, run `npm run build` in the `ui/` directory.
 
+## Testing
+
+### Python
+
+```bash
+ruff check .                      # Lint
+mypy .                            # Type check
+python test_security.py           # Security unit tests (136 tests)
+python test_security_integration.py  # Integration tests (9 tests)
+```
+
+### React UI
+
+```bash
+cd ui
+npm run lint          # ESLint
+npm run build         # Type check + build
+npm run test:e2e      # Playwright end-to-end tests
+npm run test:e2e:ui   # Playwright tests with UI
+```
+
+### Code Quality
+
+Configuration in `pyproject.toml`:
+- ruff: Line length 120, Python 3.11 target
+- mypy: Strict return type checking, ignores missing imports
+
 ## Architecture
 
 ### Core Python Modules
@@ -141,7 +174,7 @@ MCP tools available to the agent:
 
 ### React UI (ui/)
 
-- Tech stack: React 18, TypeScript, TanStack Query, Tailwind CSS v4, Radix UI, dagre (graph layout)
+- Tech stack: React 19, TypeScript, TanStack Query, Tailwind CSS v4, Radix UI, dagre (graph layout)
 - `src/App.tsx` - Main app with project selection, kanban board, agent controls
 - `src/hooks/useWebSocket.ts` - Real-time updates via WebSocket (progress, agent status, logs, agent updates)
 - `src/hooks/useProjects.ts` - React Query hooks for API calls
@@ -237,15 +270,6 @@ blocked_commands:
 - Blocklisted commands (sudo, dd, shutdown, etc.) can NEVER be allowed
 - Org-level blocked commands cannot be overridden by project configs
 
-**Testing:**
-```bash
-# Unit tests (136 tests - fast)
-python test_security.py
-
-# Integration tests (9 tests - uses real hooks)
-python test_security_integration.py
-```
-
 **Files:**
 - `security.py` - Command validation logic and hardcoded blocklist
 - `test_security.py` - Unit tests for security system (136 tests)
@@ -334,55 +358,7 @@ The orchestrator enforces strict bounds on concurrent processes:
 - `MAX_PARALLEL_AGENTS = 5` - Maximum concurrent coding agents
 - `MAX_TOTAL_AGENTS = 10` - Hard limit on total agents (coding + testing)
 - Testing agents are capped at `max_concurrency` (same as coding agents)
-
-**Expected process count during normal operation:**
-- 1 orchestrator process
-- Up to 5 coding agents
-- Up to 5 testing agents
-- Total: never exceeds 11 Python processes
-
-**Stress Test Verification:**
-
-```bash
-# Windows - verify process bounds
-# 1. Note baseline count
-tasklist | findstr python | find /c /v ""
-
-# 2. Start parallel agent (max concurrency)
-python autonomous_agent_demo.py --project-dir test --parallel --max-concurrency 5
-
-# 3. During run - should NEVER exceed baseline + 11
-tasklist | findstr python | find /c /v ""
-
-# 4. After stop via UI - should return to baseline
-tasklist | findstr python | find /c /v ""
-```
-
-```bash
-# macOS/Linux - verify process bounds
-# 1. Note baseline count
-pgrep -c python
-
-# 2. Start parallel agent
-python autonomous_agent_demo.py --project-dir test --parallel --max-concurrency 5
-
-# 3. During run - should NEVER exceed baseline + 11
-pgrep -c python
-
-# 4. After stop - should return to baseline
-pgrep -c python
-```
-
-**Log Verification:**
-
-```bash
-# Check spawn vs completion balance
-grep "Started testing agent" orchestrator_debug.log | wc -l
-grep "Testing agent.*completed\|failed" orchestrator_debug.log | wc -l
-
-# Watch for cap enforcement messages
-grep "at max testing agents\|At max total agents" orchestrator_debug.log
-```
+- Total process count never exceeds 11 Python processes (1 orchestrator + 5 coding + 5 testing)
 
 ### Design System
 

ui/src/components/OrchestratorStatusCard.tsx

@@ -36,7 +36,7 @@ function getStateColor(state: OrchestratorState): string {
     case 'complete':
       return 'text-primary'
     case 'spawning':
-      return 'text-violet-600 dark:text-violet-400'
+      return 'text-primary'
     case 'scheduling':
     case 'monitoring':
       return 'text-primary'
@@ -65,7 +65,7 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
   const [showEvents, setShowEvents] = useState(false)
 
   return (
-    <Card className="mb-4 bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border-violet-200 dark:border-violet-800/50 py-4">
+    <Card className="mb-4 bg-primary/10 border-primary/30 py-4">
       <CardContent className="p-4">
         <div className="flex items-start gap-4">
           {/* Avatar */}
@@ -75,7 +75,7 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
           <div className="flex-1 min-w-0">
             {/* Header row */}
             <div className="flex items-center gap-2 mb-1">
-              <span className="font-semibold text-lg text-violet-700 dark:text-violet-300">
+              <span className="font-semibold text-lg text-primary">
                 Maestro
               </span>
               <span className={`text-sm font-medium ${getStateColor(status.state)}`}>
@@ -124,7 +124,7 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
               variant="ghost"
               size="sm"
               onClick={() => setShowEvents(!showEvents)}
-              className="text-violet-600 dark:text-violet-400 hover:bg-violet-100 dark:hover:bg-violet-900/30"
+              className="text-primary hover:bg-primary/10"
             >
               <Sparkles size={12} />
               Activity
@@ -135,14 +135,14 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
 
         {/* Collapsible recent events */}
         {showEvents && status.recentEvents.length > 0 && (
-          <div className="mt-3 pt-3 border-t border-violet-200 dark:border-violet-800/50">
+          <div className="mt-3 pt-3 border-t border-primary/20">
             <div className="space-y-1.5">
               {status.recentEvents.map((event, idx) => (
                 <div
                   key={`${event.timestamp}-${idx}`}
                   className="flex items-start gap-2 text-xs"
                 >
-                  <span className="text-violet-500 dark:text-violet-400 shrink-0 font-mono">
+                  <span className="text-primary shrink-0 font-mono">
                     {formatRelativeTime(event.timestamp)}
                   </span>
                   <span className="text-foreground">