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>
2026-01-29 22:02:05 +00:00 · 2026-01-29 07:51:42 +02:00
parent f286c93ca3
commit 56f260cb79
3 changed files with 60 additions and 70 deletions
--- a/.claude/commands/review-pr.md
+++ b/.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
- 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 
+
+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
+
+5. **Improvements**
+   - Propose any improvements in terms of importance and complexity
--- a/CLAUDE.md
+++ b/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

--- a/ui/src/components/OrchestratorStatusCard.tsx
+++ b/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">