From 56f260cb79594a58e2eeba3e9a28cf1656387e3c Mon Sep 17 00:00:00 2001 From: Auto Date: Thu, 29 Jan 2026 07:51:42 +0200 Subject: [PATCH] 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 --- .claude/commands/review-pr.md | 24 +++-- CLAUDE.md | 94 ++++++++------------ ui/src/components/OrchestratorStatusCard.tsx | 12 +-- 3 files changed, 60 insertions(+), 70 deletions(-) diff --git a/.claude/commands/review-pr.md b/.claude/commands/review-pr.md index 62e8bf9..02a4a66 100644 --- 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 \ No newline at end of file + +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 \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index c7a1b93..e01cc93 100644 --- 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 diff --git a/ui/src/components/OrchestratorStatusCard.tsx b/ui/src/components/OrchestratorStatusCard.tsx index 7ad8b24..dedeaa9 100644 --- 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 ( - +
{/* Avatar */} @@ -75,7 +75,7 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps)
{/* Header row */}
- + Maestro @@ -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" > Activity @@ -135,14 +135,14 @@ export function OrchestratorStatusCard({ status }: OrchestratorStatusCardProps) {/* Collapsible recent events */} {showEvents && status.recentEvents.length > 0 && ( -
+
{status.recentEvents.map((event, idx) => (
- + {formatRelativeTime(event.timestamp)}