Files
Claude-Code-Workflow/ccw
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
..

CCW - Claude Code Workflow CLI

Version

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 visualization
  • review-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:

  1. Install CCW CLI (via npm)

    • npm install -g ccw
    • Provides ccw view command for dashboard viewing
    • Templates are bundled - no additional installation required
  2. 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