Skip to content

Commit 0a49dc0

Browse files
author
catlog22
committed
feat: add comprehensive CCWMCP guide and installation instructions
1 parent 096fc1c commit 0a49dc0

13 files changed

Lines changed: 2294 additions & 99 deletions

File tree

‎docs/.vitepress/theme/components/ProfessionalHome.vue‎

Lines changed: 97 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
<section class="hero-section">
55
<div class="hero-container">
66
<div class="hero-content">
7-
<div class="hero-badge">
8-
<span class="pulse-dot"></span>
9-
{{ t.badge }}
10-
</div>
117
<h1 class="hero-title" v-html="t.heroTitle"></h1>
128
<p class="hero-subtitle">{{ t.heroSubtitle }}</p>
139

@@ -154,7 +150,7 @@
154150
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
155151
workflow.json
156152
</div>
157-
<pre class="font-mono"><code>{{ workflowJson }}</code></pre>
153+
<pre class="font-mono json-pre"><code v-html="highlightedWorkflowJson"></code></pre>
158154
</div>
159155
</div>
160156
</div>
@@ -446,19 +442,59 @@ const sequence = [
446442
]
447443
const currentStep = computed(() => sequence[currentTick.value])
448444
449-
const workflowJson = `{
450-
"project": "next-gen-api",
451-
"cadence": "strict-sync",
452-
"team": {
453-
"arch": { "cli": "gemini" },
454-
"coder": { "cli": "qwen" },
455-
"audit": { "cli": "codex" }
456-
},
457-
"stages": [
458-
{ "id": "design", "agent": "arch" },
459-
{ "id": "impl", "agent": "coder" }
445+
// JSON with syntax highlighting and tooltips
446+
const jsonTooltips = {
447+
'project': '项目名称，用于标识工作流实例',
448+
'cadence': '节拍模式：strict-sync(严格同步) | async(异步) | hybrid(混合)',
449+
'team': '团队成员配置，每个角色映射到特定 CLI 工具',
450+
'arch': '架构师角色：负责系统设计和文档生成',
451+
'coder': '开发者角色：负责代码实现',
452+
'audit': '审计员角色：负责质量检查和代码审查',
453+
'cli': 'CLI 工具：gemini | qwen | codex | claude',
454+
'stages': '执行阶段定义，按顺序执行',
455+
'id': '阶段唯一标识符',
456+
'agent': '执行该阶段的团队成员角色'
457+
}
458+
459+
const highlightedWorkflowJson = computed(() => {
460+
const lines = [
461+
{ text: '{', type: 'bracket' },
462+
{ text: ' "project": "next-gen-api",', key: 'project', type: 'string' },
463+
{ text: ' "cadence": "strict-sync",', key: 'cadence', type: 'string' },
464+
{ text: ' "team": {', key: 'team', type: 'object' },
465+
{ text: ' "arch": { "cli": "gemini" },', key: 'arch', type: 'object' },
466+
{ text: ' "coder": { "cli": "qwen" },', key: 'coder', type: 'object' },
467+
{ text: ' "audit": { "cli": "codex" }', key: 'audit', type: 'object' },
468+
{ text: ' },', type: 'bracket' },
469+
{ text: ' "stages": [', key: 'stages', type: 'array' },
470+
{ text: ' { "id": "design", "agent": "arch" },', type: 'object' },
471+
{ text: ' { "id": "impl", "agent": "coder" }', type: 'object' },
472+
{ text: ' ]', type: 'bracket' },
473+
{ text: '}', type: 'bracket' }
460474
]
461-
}`
475+
476+
return lines.map(line => {
477+
if (line.key && jsonTooltips[line.key]) {
478+
const tooltip = jsonTooltips[line.key]
479+
const highlighted = line.text
480+
.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
481+
.replace(/: "([^"]+)"/g, ': <span class="json-string">"$1"</span>')
482+
.replace(/: \[/g, ': <span class="json-bracket">[</span>')
483+
.replace(/\]/g, '<span class="json-bracket">]</span>')
484+
.replace(/: \{/g, ': <span class="json-bracket">{</span>')
485+
.replace(/\}/g, '<span class="json-bracket">}</span>')
486+
return `<span class="json-line" title="${tooltip}">${highlighted}</span>`
487+
}
488+
const highlighted = line.text
489+
.replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
490+
.replace(/: "([^"]+)"/g, ': <span class="json-string">"$1"</span>')
491+
.replace(/\[/g, '<span class="json-bracket">[</span>')
492+
.replace(/\]/g, '<span class="json-bracket">]</span>')
493+
.replace(/\{/g, '<span class="json-bracket">{</span>')
494+
.replace(/\}/g, '<span class="json-bracket">}</span>')
495+
return `<span class="json-line">${highlighted}</span>`
496+
}).join('\n')
497+
})
462498
463499
let terminalInterval, pipelineInterval
464500
@@ -885,7 +921,51 @@ onUnmounted(() => {
885921
border-radius: 16px;
886922
padding: 1.5rem;
887923
border: 1px solid rgba(255,255,255,0.08);
924+
overflow: hidden;
925+
}
926+
.json-pre {
927+
margin: 0;
928+
color: #e2e8f0;
929+
font-size: 0.875rem;
930+
line-height: 1.7;
931+
white-space: pre;
932+
overflow-x: auto;
933+
}
934+
.json-line {
935+
display: block;
936+
cursor: default;
937+
transition: background 0.2s ease;
938+
padding: 2px 8px;
939+
margin: 0 -8px;
940+
border-radius: 4px;
941+
}
942+
.json-line[title]:hover {
943+
background: rgba(99, 102, 241, 0.15);
944+
position: relative;
945+
}
946+
.json-line[title]:hover::after {
947+
content: attr(title);
948+
position: absolute;
949+
left: calc(100% + 16px);
950+
top: 50%;
951+
transform: translateY(-50%);
952+
background: #1e293b;
953+
color: #e2e8f0;
954+
padding: 8px 12px;
955+
border-radius: 8px;
956+
font-size: 0.75rem;
957+
white-space: nowrap;
958+
max-width: 280px;
959+
white-space: normal;
960+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
961+
border: 1px solid rgba(255,255,255,0.1);
962+
z-index: 10;
963+
pointer-events: none;
888964
}
965+
.json-key { color: #7dd3fc; font-weight: 500; }
966+
.json-string { color: #a5f3fc; }
967+
.json-bracket { color: #94a3b8; }
968+
.json-number { color: #fbbf24; }
889969
.code-header {
890970
display: flex;
891971
align-items: center;

‎docs/features/dashboard.md‎

Lines changed: 117 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,152 @@
1-
# Dashboard Panel
1+
# Dashboard
22

33
## One-Liner
44

5-
**The Dashboard is a VS Code webview-based management interface** — Provides visual access to project configuration, specs, memory, and settings through an intuitive GUI.
5+
**The Dashboard provides an at-a-glance overview of your project's workflow status, statistics, and recent activity through an intuitive widget-based interface.**
66

77
---
88

99
## Pain Points Solved
1010

1111
| Pain Point | Current State | Dashboard Solution |
1212
|------------|---------------|-------------------|
13-
| **Config complexity** | JSON files hard to edit | Visual form-based editing |
14-
| **No overview** | Can't see project state at a glance | Unified dashboard view |
15-
| **Scattered settings** | Settings in multiple files | Centralized management |
16-
| **No visual feedback** | CLI only, no UI | Interactive webview |
13+
| **No project visibility** | Can't see overall project health | Project info banner with tech stack and development index |
14+
| **Scattered metrics** | Stats across multiple locations | Centralized statistics with sparklines |
15+
| **Unknown workflow status** | Hard to track session progress | Pie chart with status breakdown |
16+
| **Lost in recent work** | No quick access to active sessions | Session carousel with task details |
17+
| **Indexing status unclear** | Don't know if code is indexed | Real-time index status indicator |
18+
19+
---
20+
21+
## Page Overview
22+
23+
**Location**: `ccw/frontend/src/pages/HomePage.tsx`
24+
25+
**Purpose**: Dashboard home page providing project overview, statistics, workflow status, and recent activity monitoring.
26+
27+
**Access**: Navigation → Dashboard (default home page)
28+
29+
### Layout
30+
31+
```
32+
+--------------------------------------------------------------------------+
33+
| Dashboard Header (title + refresh) |
34+
+--------------------------------------------------------------------------+
35+
| WorkflowTaskWidget (Combined Card) |
36+
| +--------------------------------------------------------------------+ |
37+
| | Project Info Banner (expandable) | |
38+
| | - Project name, description, tech stack badges | |
39+
| | - Quick stats (features, bugfixes, enhancements) | |
40+
| | - Index status indicator | |
41+
| +----------------------------------+---------------------------------+ |
42+
| | Stats Section | Workflow Status | Task Details (Carousel) | |
43+
| | - 6 mini cards | - Pie chart | - Session nav | |
44+
| | - Sparklines | - Legend | - Task list (2 columns) | |
45+
| +----------------+-----------------+-------------------------------+ |
46+
+--------------------------------------------------------------------------+
47+
| RecentSessionsWidget |
48+
| +--------------------------------------------------------------------+ |
49+
| | Tabs: All Tasks | Workflow | Lite Tasks | |
50+
| | +---------------+---------------+-------------------------------+ | |
51+
| | | Task cards with status, progress, tags, time | | |
52+
| | +---------------------------------------------------------------+ | |
53+
+--------------------------------------------------------------------------+
54+
```
1755

1856
---
1957

2058
## Core Features
2159

2260
| Feature | Description |
2361
|---------|-------------|
24-
| **Project Overview** | Tech stack, dependencies, status |
25-
| **Spec Manager** | View and edit specification files |
26-
| **Memory Viewer** | Browse persistent memories |
27-
| **API Settings** | Configure AI model endpoints |
28-
| **System Settings** | Global and project settings |
62+
| **Project Info Banner** | Expandable banner showing project name, description, tech stack (languages, frameworks, architecture), development index (features/bugfixes/enhancements), and real-time index status |
63+
| **Statistics Section** | 6 mini stat cards (Active Sessions, Total Tasks, Completed Tasks, Pending Tasks, Failed Tasks, Today Activity) with 7-day sparkline trends |
64+
| **Workflow Status Pie Chart** | Donut chart showing session status breakdown (completed, in progress, planning, paused, archived) with percentages |
65+
| **Session Carousel** | Auto-rotating (5s) session cards with task list, progress bar, and manual navigation arrows |
66+
| **Recent Sessions Widget** | Tabbed view of recent tasks across all task types with filtering, status badges, and progress indicators |
67+
| **Real-time Updates** | Auto-refresh every 60 seconds for stats and 30 seconds for index status |
2968

3069
---
3170

32-
## Access
71+
## Usage Guide
3372

34-
Open via VS Code command palette:
35-
```
36-
CCW: Open Dashboard
37-
```
73+
### Basic Workflow
3874

39-
Or via CLI:
40-
```bash
41-
ccw view
42-
```
75+
1. **View Project Overview**: Check the project info banner for tech stack and development index
76+
2. **Monitor Statistics**: Review mini stat cards for current project metrics and trends
77+
3. **Track Workflow Status**: View pie chart for session status distribution
78+
4. **Browse Active Sessions**: Use session carousel to see task details and progress
79+
5. **Access Recent Work**: Switch between All Tasks/Workflow/Lite Tasks tabs to find specific sessions
80+
81+
### Key Interactions
82+
83+
| Interaction | How to Use |
84+
|-------------|------------|
85+
| **Expand Project Details** | Click the chevron button in the project banner to show architecture, components, patterns |
86+
| **Navigate Sessions** | Click arrow buttons or wait for auto-rotation (5s interval) in the carousel |
87+
| **View Session Details** | Click on any session card to navigate to session detail page |
88+
| **Filter Recent Tasks** | Click tab buttons to filter by task type (All/Workflow/Lite) |
89+
| **Refresh Dashboard** | Click the refresh button in the header to reload all data |
90+
91+
### Index Status Indicator
92+
93+
| Status | Icon | Meaning |
94+
|--------|------|---------|
95+
| **Building** | Pulsing blue dot | Code index is being built/updated |
96+
| **Completed** | Green dot | Index is up-to-date |
97+
| **Idle** | Gray dot | Index status is unknown/idle |
98+
| **Failed** | Red dot | Index build failed |
4399

44100
---
45101

46-
## Dashboard Sections
102+
## Components Reference
103+
104+
### Main Components
47105

48-
### 1. Project Overview
49-
- Technology stack detection
50-
- Dependency status
51-
- Workflow session status
106+
| Component | Location | Purpose |
107+
|-----------|----------|---------|
108+
| `DashboardHeader` | `@/components/dashboard/DashboardHeader.tsx` | Page header with title and refresh action |
109+
| `WorkflowTaskWidget` | `@/components/dashboard/widgets/WorkflowTaskWidget.tsx` | Combined widget with project info, stats, workflow status, and session carousel |
110+
| `RecentSessionsWidget` | `@/components/dashboard/widgets/RecentSessionsWidget.tsx` | Recent sessions across workflow and lite tasks |
111+
| `MiniStatCard` | (internal to WorkflowTaskWidget) | Individual stat card with optional sparkline |
112+
| `HomeEmptyState` | (internal to WorkflowTaskWidget) | Empty state display when no sessions exist |
113+
114+
### State Management
115+
116+
- **Local state**:
117+
- `hasError` - Error tracking for critical failures
118+
- `projectExpanded` - Project info banner expansion state
119+
- `currentSessionIndex` - Active session in carousel
120+
- `activeTab` - Recent sessions widget filter tab
121+
122+
- **Custom hooks**:
123+
- `useWorkflowStatusCounts` - Session status distribution data
124+
- `useDashboardStats` - Statistics with auto-refresh (60s)
125+
- `useProjectOverview` - Project information and tech stack
126+
- `useIndexStatus` - Real-time index status (30s refresh)
127+
- `useSessions` - Active sessions data
128+
- `useLiteTasks` - Lite tasks data for recent widget
129+
130+
---
52131

53-
### 2. Spec Manager
54-
- List all specs
55-
- Edit spec content
56-
- Enable/disable specs
132+
## Configuration
57133

58-
### 3. Memory Viewer
59-
- Browse memory entries
60-
- Search memories
61-
- Export/import
134+
No configuration required. The dashboard automatically fetches data from the backend.
62135

63-
### 4. API Settings
64-
- Configure API keys
65-
- Set model endpoints
66-
- Manage rate limits
136+
### Auto-Refresh Intervals
67137

68-
### 5. System Settings
69-
- Global configuration
70-
- Project overrides
71-
- Hook management
138+
| Data Type | Interval |
139+
|-----------|----------|
140+
| Dashboard stats | 60 seconds |
141+
| Index status | 30 seconds |
142+
| Discovery sessions | 3 seconds (on discovery page) |
72143

73144
---
74145

75146
## Related Links
76147

77-
- [API Settings](/features/api-settings) - API configuration
78-
- [System Settings](/features/system-settings) - System configuration
79-
- [Spec System](/features/spec) - Specification management
148+
- [Sessions](/features/sessions) - View and manage all sessions
149+
- [Queue](/features/queue) - Issue execution queue management
150+
- [Discovery](/features/discovery) - Discovery session tracking
151+
- [Memory](/features/memory) - Persistent memory management
152+
- [System Settings](/features/system-settings) - Global application settings

0 commit comments

Comments
 (0)