catlog22 e11c4ba8ed feat: Loop Monitor UI optimization - Phases 1-6 complete
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.
2026-01-22 11:01:05 +08:00
2026-01-15 15:38:15 +08:00
2026-01-21 19:50:51 +08:00
2026-01-17 11:36:03 +08:00


Quick Start Guide CLI Tools Architecture


Key Features

🎯 4-Level Workflows

From lite-lite-lite (instant) to brainstorm (multi-role analysis)

🔄 Multi-CLI Orchestration

Gemini, Qwen, Codex, Claude - auto-select or manual

Dependency-Aware Parallelism

Agent parallel execution without worktree complexity

🔧 Issue Workflow

Post-development maintenance with optional worktree isolation

📦 JSON-First State

.task/IMPL-*.json as single source of truth

🖥️ Dashboard

Visual 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

LevelCommandUse Case
1/workflow:lite-lite-liteQuick fixes, config changes
2/workflow:lite-planClear single-module features
2/workflow:lite-fixBug diagnosis and fix
2/workflow:multi-cli-planMulti-perspective analysis
3/workflow:planMulti-module development
3/workflow:tdd-planTest-driven development
4/workflow:brainstorm:auto-parallelNew 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

CLIDescriptionOfficial Docs
GeminiGoogle AI analysisgoogle-gemini/gemini-cli
CodexOpenAI autonomous codingopenai/codex
OpenCodeOpen-source multi-modelopencode-ai/opencode
QwenAlibaba Qwen-CodeQwenLM/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)

⚠️ In Development: CodexLens is under iterative optimization. Some features may be unstable.

Search ModeDescription
FTSFull-text search, based on SQLite FTS5
SemanticSemantic search, using local embedding models
HybridHybrid 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

FeatureDescription
Session OverviewTrack workflow sessions and progress
CodexLensFTS + Semantic + Hybrid code search
Graph ExplorerInteractive code relationship visualization
CLI ManagerExecution 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

🤝 Contributing

GitHub Issues Contributing

📄 License

MIT License - see LICENSE


Description
JSON-driven multi-agent development framework with intelligent CLI orchestration (Gemini/Qwen/Codex), context-first architecture, and automated workflow execution
Readme MIT 33 MiB
Languages
TypeScript 38.2%
Python 24.2%
HTML 16.3%
JavaScript 15.2%
CSS 4.5%
Other 1.6%