Complete comprehensive optimization of Loop Monitor interface with 6 phases: Phase 1: Internationalization (i18n) - Added 28 new translation keys (English + Chinese) - Complete dual-language support for all new features - Coverage: kanban board, task status, navigation, priority Phase 2: CSS Styling Optimization - 688 lines of kanban board styling system - Task cards, status badges, priority badges - Drag-and-drop visual feedback - Base responsive design Phase 3: UI Layout Design - Left navigation panel optimization - Kanban board layout (4 columns: Pending, In Progress, Blocked, Done) - Task card information architecture - Status update flow design Phase 4: Backend API Extensions - New PATCH /api/loops/v2/:loopId/status endpoint for quick status updates - Extended PUT /api/loops/v2/:loopId with metadata support (tags, priority, notes) - Enhanced V2LoopStorage interface - Improved validation and error handling - WebSocket broadcasting for real-time updates Phase 5: Frontend JavaScript Implementation - 967 lines of interactive functionality - View switching system (Loops ↔ Kanban) - Kanban board rendering with 4-column layout - Drag-and-drop functionality (HTML5 API) - Status update functions (updateLoopStatus, updateTaskStatus, updateLoopMetadata) - Task context menu (right-click) - Navigation grouping by status Phase 6: Final Optimization - Smooth animations (@keyframes slideInUp, fadeIn, modalFadeIn, pulse) - Enhanced responsive design (desktop, tablet, mobile) - Full ARIA accessibility support - Complete keyboard navigation (arrow keys, Enter/Space, Ctrl+K, ?) - Performance optimizations (debounce, throttle, will-change) - Screen reader support Key Features: ✅ Kanban board with drag-and-drop task management ✅ Task status management (pending, in_progress, blocked, done) ✅ Loop status quick update via PATCH API ✅ Navigation grouping with status-based filtering ✅ Full keyboard navigation support ✅ ARIA accessibility attributes ✅ Responsive design (mobile, tablet, desktop) ✅ Smooth animations and transitions ✅ Internationalization (English & Chinese) ✅ Performance optimizations Code Statistics: - Total: ~1798 lines - loop-monitor.js: +967 lines (frontend logic) - 36-loop-monitor.css: +688 lines (styling) - loop-v2-routes.ts: +86/-3 lines (API backend) - i18n.js: +60 lines (translations) Technical Stack: - JavaScript ES6+ (frontend) - CSS3 with animations - TypeScript (backend) - HTML5 Drag & Drop API - ARIA accessibility - Responsive design Browser Compatibility: - Chrome/Edge 90+ - Firefox 88+ - Safari 14+ All TypeScript compilation tests pass. Ready for production deployment.
✨ Key Features
🎯 4-Level WorkflowsFrom 🔄 Multi-CLI OrchestrationGemini, Qwen, Codex, Claude - auto-select or manual ⚡ Dependency-Aware ParallelismAgent parallel execution without worktree complexity |
🔧 Issue WorkflowPost-development maintenance with optional worktree isolation 📦 JSON-First State
🖥️ DashboardVisual session management, CodexLens search, graph explorer |
📖 New? See Workflow Guide for the complete 4-level workflow system.
🚀 Quick Start
Install CCW
npm install -g claude-code-workflow
ccw install -m Global
Choose Your Workflow Level
| Level | Command | Use Case |
|---|---|---|
| 1 | /workflow:lite-lite-lite | Quick fixes, config changes |
| 2 | /workflow:lite-plan | Clear single-module features |
| 2 | /workflow:lite-fix | Bug diagnosis and fix |
| 2 | /workflow:multi-cli-plan | Multi-perspective analysis |
| 3 | /workflow:plan | Multi-module development |
| 3 | /workflow:tdd-plan | Test-driven development |
| 4 | /workflow:brainstorm:auto-parallel | New features, architecture design |
Workflow Examples
# Level 1: Instant execution
/workflow:lite-lite-lite "Fix typo in README"
# Level 2: Lightweight planning
/workflow:lite-plan "Add JWT authentication"
/workflow:lite-fix "User upload fails with 413 error"
# Level 3: Standard planning with session
/workflow:plan "Implement payment gateway integration"
/workflow:execute
# Level 4: Multi-role brainstorming
/workflow:brainstorm:auto-parallel "Design real-time collaboration system" --count 5
/workflow:plan --session WFS-xxx
/workflow:execute
🛠️ CLI Tool Installation
| CLI | Description | Official Docs |
|---|---|---|
| Gemini | Google AI analysis | google-gemini/gemini-cli |
| Codex | OpenAI autonomous coding | openai/codex |
| OpenCode | Open-source multi-model | opencode-ai/opencode |
| Qwen | Alibaba Qwen-Code | QwenLM/Qwen |
🎭 Semantic CLI Invocation
Users can semantically specify CLI tools in prompts - the system automatically invokes the corresponding CLI.
Basic Invocation
| User Prompt | System Action |
|---|---|
| "Use Gemini to analyze the auth module" | Auto-invoke gemini CLI for analysis |
| "Let Codex review this code" | Auto-invoke codex CLI for review |
| "Ask Qwen about performance optimization" | Auto-invoke qwen CLI for consultation |
Multi-CLI Orchestration
| Pattern | User Prompt Example |
|---|---|
| Collaborative | "Use Gemini and Codex to collaboratively analyze security vulnerabilities" |
| Parallel | "Have Gemini, Codex, and Qwen analyze the architecture in parallel" |
| Iterative | "Use Gemini to diagnose, then Codex to fix, iterate until resolved" |
| Pipeline | "Gemini designs the solution, Codex implements, Claude reviews" |
📝 More Examples
# Single CLI invocation
User: "Use Gemini to analyze the database query performance"
→ System auto-calls: gemini CLI with analysis task
# Collaborative analysis
User: "Use Gemini and Codex to collaboratively review the authentication flow"
→ System auto-calls: gemini + codex CLIs, synthesizes results
# Parallel multi-perspective
User: "Have all available CLIs analyze this architecture design in parallel"
→ System auto-calls: gemini, codex, qwen in parallel → merged report
# Sequential pipeline
User: "Use Gemini to plan the refactoring, then Codex to implement it"
→ System auto-calls: gemini (plan) → codex (implement) sequentially
Custom CLI Registration
Register any API as a custom CLI via Dashboard interface:
ccw view # Open Dashboard → Status → API Settings → Add Custom CLI
| Field | Example |
|---|---|
| Name | deepseek |
| Endpoint | https://api.deepseek.com/v1/chat |
| API Key | your-api-key |
⚙️ Register once, invoke semantically forever - no code changes needed.
🔍 ACE Tool Configuration
ACE (Augment Context Engine) provides powerful semantic code search.
| Method | Link |
|---|---|
| Official | Augment MCP Documentation |
| Proxy | ace-tool (GitHub) |
📚 CodexLens Local Search
⚠️ In Development: CodexLens is under iterative optimization. Some features may be unstable.
| Search Mode | Description |
|---|---|
| FTS | Full-text search, based on SQLite FTS5 |
| Semantic | Semantic search, using local embedding models |
| Hybrid | Hybrid search, combining FTS + Semantic + Reranking |
📦 Installation
# Enter codex-lens directory
cd codex-lens
# Install dependencies
pip install -e .
# Initialize index
codexlens index /path/to/project
Open Dashboard via ccw view, manage indexes and execute searches in CodexLens Manager.
💻 CCW CLI Commands
ccw install # Install workflow files
ccw view # Open dashboard
ccw cli -p "..." # Execute CLI tools (Gemini/Qwen/Codex)
ccw upgrade -a # Upgrade all installations
Dashboard Features
| Feature | Description |
|---|---|
| Session Overview | Track workflow sessions and progress |
| CodexLens | FTS + Semantic + Hybrid code search |
| Graph Explorer | Interactive code relationship visualization |
| CLI Manager | Execution history with session resume |
📖 Documentation
| Document | Description |
|---|---|
| Workflow Guide | 4-level workflow system (recommended) |
| Getting Started | 5-minute quick start |
| Dashboard Guide | Dashboard user guide |
| FAQ | Common questions |
| Changelog | Version history |
🏗️ Architecture
┌─────────────────────────────────────────────────────────────────┐
│ Main Workflow (4 Levels) │
│ ⚡ Level 1: lite-lite-lite (instant, no artifacts) │
│ 📝 Level 2: lite-plan / lite-fix / multi-cli-plan (→ execute) │
│ 📊 Level 3: plan / tdd-plan / test-fix-gen (session persist) │
│ 🧠 Level 4: brainstorm:auto-parallel → plan → execute │
└─────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────┐
│ Issue Workflow (Supplement) │
│ 🔍 discover → 📋 plan → 📦 queue → ▶️ execute (worktree) │
└─────────────────────────────────────────────────────────────────┘
Core Principles:
- ⚡ Dependency Analysis solves parallelism - no worktree needed for main workflow
- 🔧 Issue Workflow supplements main workflow for post-development maintenance
- 🎯 Select workflow level based on complexity - avoid over-engineering