mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
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.
CCW - Claude Code Workflow CLI
A powerful command-line tool for managing Claude Code Workflow with native CodexLens code intelligence, multi-model CLI orchestration, and interactive dashboard.
Installation
# Install globally
npm install -g ccw
# Or install from local source
cd path/to/ccw
npm install
npm link
Usage
View Dashboard
# Open workflow dashboard in browser
ccw view
# Specify project path
ccw view -p /path/to/project
# Generate dashboard without opening browser
ccw view --no-browser
# Custom output path
ccw view -o report.html
Features
🔍 Native CodexLens (v6.3)
- Full-Text Search (FTS): SQLite-based fast keyword search with symbol extraction
- Semantic Search: Dense embedding-based similarity search with vector store
- Hybrid Search: RRF (Reciprocal Rank Fusion) combining FTS and semantic results
- Cross-Encoder Reranking: Second-stage reranker for improved result relevance
- HNSW Index: Approximate Nearest Neighbor index for significantly faster vector search
- Dynamic Batch Processing: Intelligent batch size calculation for embedding generation
- Workspace Index Status: Real-time index status monitoring and management
💻 CLI Tools Integration
- Multi-Model Support: Execute prompts with Gemini, Qwen, Codex, Claude, or OpenCode
- CLI Wrapper Endpoints: Custom API endpoints with tool calling support
- Smart Content Formatter: Intelligent output formatting with structured IR
- Session Resume: Resume from last session or merge multiple sessions
- SQLite History: Persistent execution history with conversation tracking
- Custom IDs: Support for custom execution IDs and multi-turn conversations
- Preload Service: Optimized data fetching with caching for faster responses
🧠 Core Memory & Clustering
- Session Clustering: Intelligent grouping of related sessions
- Cluster Visualization: Interactive display with Cytoscape.js
- Cluster Management: Delete, merge, and deduplicate operations
🖥️ Dashboard Views
- Workflow Dashboard: Active/archived sessions with task progress
- CodexLens Manager: Index management with real-time progress bar
- Core Memory: Session clustering visualization
- CLAUDE.md Manager: File tree viewer for configuration
- Skills Manager: View and manage Claude Code skills
- Graph Explorer: Interactive code relationship visualization
- MCP Manager: Configure and monitor MCP servers
- Hook Manager: Manage Claude Code hooks
- Help View: Internationalized help documentation
Review Integration
- Code Review Findings: View results from
review-module-cycle - Severity Distribution: Critical/High/Medium/Low finding counts
- Dimension Analysis: Findings by review dimension (Security, Architecture, Quality, etc.)
- Tabbed Interface: Switch between Workflow and Reviews tabs
Dashboard Data Sources
The CLI reads data from the .workflow/ directory structure:
.workflow/
├── active/
│ └── WFS-{session-id}/
│ ├── workflow-session.json # Session metadata
│ ├── .task/
│ │ └── IMPL-*.json # Task definitions
│ └── .review/
│ ├── review-progress.json # Review progress
│ └── dimensions/
│ └── *.json # Dimension findings
└── archives/
└── WFS-{session-id}/ # Archived sessions
Bundled Templates
The CLI includes bundled dashboard templates:
workflow-dashboard.html- Workflow session and task visualizationreview-cycle-dashboard.html- Code review findings display
No external template installation required - templates are included in the npm package.
Requirements
- Node.js >= 16.0.0
- npm or yarn
Integration with Claude Code Workflow
This CLI is a standalone tool that works with the Claude Code Workflow system:
-
Install CCW CLI (via npm)
npm install -g ccw- Provides
ccw viewcommand for dashboard viewing - Templates are bundled - no additional installation required
-
Optional: Install Claude Code Workflow (via
Install-Claude.ps1)- Provides workflow commands, agents, and automation
- CCW will automatically detect and display workflow sessions
Options
| Option | Description |
|---|---|
-p, --path <path> |
Path to project directory (default: current directory) |
--no-browser |
Generate dashboard without opening browser |
-o, --output <file> |
Custom output path for HTML file |
-V, --version |
Display version number |
-h, --help |
Display help information |
Development
# Clone and install dependencies
git clone <repo-url>
cd ccw
npm install
# Link for local testing
npm link
# Test the CLI
ccw view -p /path/to/test/project
License
MIT