mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-14 02:42:04 +08:00
Compare commits
2 Commits
claude/add
...
claude/wor
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
842ed624e8 | ||
|
|
4693527a8e |
@@ -1,15 +1,16 @@
|
|||||||
---
|
---
|
||||||
name: workflow:status
|
name: workflow:status
|
||||||
description: Generate on-demand views for project overview and workflow tasks with optional task-id filtering for detailed view
|
description: Generate on-demand views for project overview and workflow tasks with optional task-id filtering for detailed view
|
||||||
argument-hint: "[optional: --project|task-id|--validate]"
|
argument-hint: "[optional: --project|task-id|--validate|--dashboard]"
|
||||||
---
|
---
|
||||||
|
|
||||||
# Workflow Status Command (/workflow:status)
|
# Workflow Status Command (/workflow:status)
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
Generates on-demand views from project and session data. Supports two modes:
|
Generates on-demand views from project and session data. Supports multiple modes:
|
||||||
1. **Project Overview** (`--project`): Shows completed features and project statistics
|
1. **Project Overview** (`--project`): Shows completed features and project statistics
|
||||||
2. **Workflow Tasks** (default): Shows current session task progress
|
2. **Workflow Tasks** (default): Shows current session task progress
|
||||||
|
3. **HTML Dashboard** (`--dashboard`): Generates interactive HTML task board with active and archived sessions
|
||||||
|
|
||||||
No synchronization needed - all views are calculated from current JSON state.
|
No synchronization needed - all views are calculated from current JSON state.
|
||||||
|
|
||||||
@@ -19,6 +20,7 @@ No synchronization needed - all views are calculated from current JSON state.
|
|||||||
/workflow:status --project # Show project-level feature registry
|
/workflow:status --project # Show project-level feature registry
|
||||||
/workflow:status impl-1 # Show specific task details
|
/workflow:status impl-1 # Show specific task details
|
||||||
/workflow:status --validate # Validate workflow integrity
|
/workflow:status --validate # Validate workflow integrity
|
||||||
|
/workflow:status --dashboard # Generate HTML dashboard board
|
||||||
```
|
```
|
||||||
|
|
||||||
## Implementation Flow
|
## Implementation Flow
|
||||||
@@ -192,4 +194,135 @@ find .workflow/active/WFS-session/.summaries/ -name "*.md" -type f 2>/dev/null |
|
|||||||
|
|
||||||
## Completed Tasks
|
## Completed Tasks
|
||||||
- [COMPLETED] impl-0: Setup completed
|
- [COMPLETED] impl-0: Setup completed
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dashboard Mode (HTML Board)
|
||||||
|
|
||||||
|
### Step 1: Check for --dashboard flag
|
||||||
|
```bash
|
||||||
|
# If --dashboard flag present → Execute Dashboard Mode
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Collect Workflow Data
|
||||||
|
|
||||||
|
**Collect Active Sessions**:
|
||||||
|
```bash
|
||||||
|
# Find all active sessions
|
||||||
|
find .workflow/active/ -name "WFS-*" -type d 2>/dev/null
|
||||||
|
|
||||||
|
# For each active session, read metadata and tasks
|
||||||
|
for session in $(find .workflow/active/ -name "WFS-*" -type d 2>/dev/null); do
|
||||||
|
cat "$session/workflow-session.json"
|
||||||
|
find "$session/.task/" -name "*.json" -type f 2>/dev/null
|
||||||
|
done
|
||||||
|
```
|
||||||
|
|
||||||
|
**Collect Archived Sessions**:
|
||||||
|
```bash
|
||||||
|
# Find all archived sessions
|
||||||
|
find .workflow/archives/ -name "WFS-*" -type d 2>/dev/null
|
||||||
|
|
||||||
|
# Read manifest if exists
|
||||||
|
cat .workflow/archives/manifest.json 2>/dev/null
|
||||||
|
|
||||||
|
# For each archived session, read metadata
|
||||||
|
for archive in $(find .workflow/archives/ -name "WFS-*" -type d 2>/dev/null); do
|
||||||
|
cat "$archive/workflow-session.json" 2>/dev/null
|
||||||
|
# Count completed tasks
|
||||||
|
find "$archive/.task/" -name "*.json" -type f 2>/dev/null | wc -l
|
||||||
|
done
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Process and Structure Data
|
||||||
|
|
||||||
|
**Build data structure for dashboard**:
|
||||||
|
```javascript
|
||||||
|
const dashboardData = {
|
||||||
|
activeSessions: [],
|
||||||
|
archivedSessions: [],
|
||||||
|
generatedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
// Process active sessions
|
||||||
|
for each active_session in active_sessions:
|
||||||
|
const sessionData = JSON.parse(Read(active_session/workflow-session.json));
|
||||||
|
const tasks = [];
|
||||||
|
|
||||||
|
// Load all tasks for this session
|
||||||
|
for each task_file in find(active_session/.task/*.json):
|
||||||
|
const taskData = JSON.parse(Read(task_file));
|
||||||
|
tasks.push({
|
||||||
|
task_id: taskData.task_id,
|
||||||
|
title: taskData.title,
|
||||||
|
status: taskData.status,
|
||||||
|
type: taskData.type
|
||||||
|
});
|
||||||
|
|
||||||
|
dashboardData.activeSessions.push({
|
||||||
|
session_id: sessionData.session_id,
|
||||||
|
project: sessionData.project,
|
||||||
|
status: sessionData.status,
|
||||||
|
created_at: sessionData.created_at || sessionData.initialized_at,
|
||||||
|
tasks: tasks
|
||||||
|
});
|
||||||
|
|
||||||
|
// Process archived sessions
|
||||||
|
for each archived_session in archived_sessions:
|
||||||
|
const sessionData = JSON.parse(Read(archived_session/workflow-session.json));
|
||||||
|
const taskCount = bash(find archived_session/.task/*.json | wc -l);
|
||||||
|
|
||||||
|
dashboardData.archivedSessions.push({
|
||||||
|
session_id: sessionData.session_id,
|
||||||
|
project: sessionData.project,
|
||||||
|
archived_at: sessionData.completed_at || sessionData.archived_at,
|
||||||
|
taskCount: parseInt(taskCount),
|
||||||
|
archive_path: archived_session
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4: Generate HTML from Template
|
||||||
|
|
||||||
|
**Load template and inject data**:
|
||||||
|
```javascript
|
||||||
|
// Read the HTML template
|
||||||
|
const template = Read("~/.claude/templates/workflow-dashboard.html");
|
||||||
|
|
||||||
|
// Prepare data for injection
|
||||||
|
const dataJson = JSON.stringify(dashboardData, null, 2);
|
||||||
|
|
||||||
|
// Replace placeholder with actual data
|
||||||
|
const htmlContent = template.replace('{{WORKFLOW_DATA}}', dataJson);
|
||||||
|
|
||||||
|
// Ensure .workflow directory exists
|
||||||
|
bash(mkdir -p .workflow);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 5: Write HTML File
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Write the generated HTML to .workflow/dashboard.html
|
||||||
|
Write({
|
||||||
|
file_path: ".workflow/dashboard.html",
|
||||||
|
content: htmlContent
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 6: Display Success Message
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
Dashboard generated successfully!
|
||||||
|
|
||||||
|
Location: .workflow/dashboard.html
|
||||||
|
|
||||||
|
Open in browser:
|
||||||
|
file://$(pwd)/.workflow/dashboard.html
|
||||||
|
|
||||||
|
Features:
|
||||||
|
- 📊 Active sessions overview
|
||||||
|
- 📦 Archived sessions history
|
||||||
|
- 🔍 Search and filter
|
||||||
|
- 📈 Progress tracking
|
||||||
|
- 🎨 Dark/light theme
|
||||||
|
|
||||||
|
Refresh data: Re-run /workflow:status --dashboard
|
||||||
```
|
```
|
||||||
664
.claude/templates/workflow-dashboard.html
Normal file
664
.claude/templates/workflow-dashboard.html
Normal file
@@ -0,0 +1,664 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Workflow Dashboard - Task Board</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-primary: #f5f7fa;
|
||||||
|
--bg-secondary: #ffffff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--text-primary: #1a202c;
|
||||||
|
--text-secondary: #718096;
|
||||||
|
--border-color: #e2e8f0;
|
||||||
|
--accent-color: #4299e1;
|
||||||
|
--success-color: #48bb78;
|
||||||
|
--warning-color: #ed8936;
|
||||||
|
--danger-color: #f56565;
|
||||||
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-primary: #1a202c;
|
||||||
|
--bg-secondary: #2d3748;
|
||||||
|
--bg-card: #2d3748;
|
||||||
|
--text-primary: #f7fafc;
|
||||||
|
--text-secondary: #a0aec0;
|
||||||
|
--border-color: #4a5568;
|
||||||
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 250px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.active {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessions-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-status {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-active {
|
||||||
|
background-color: #c6f6d5;
|
||||||
|
color: #22543d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-archived {
|
||||||
|
background-color: #e2e8f0;
|
||||||
|
color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .status-active {
|
||||||
|
background-color: #22543d;
|
||||||
|
color: #c6f6d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .status-archived {
|
||||||
|
background-color: #4a5568;
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, var(--accent-color), var(--success-color));
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-list {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border-radius: 6px;
|
||||||
|
border-left: 3px solid var(--border-color);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.completed {
|
||||||
|
border-left-color: var(--success-color);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.in_progress {
|
||||||
|
border-left-color: var(--warning-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.pending {
|
||||||
|
border-left-color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-checkbox {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
margin-right: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.completed .task-checkbox {
|
||||||
|
background-color: var(--success-color);
|
||||||
|
border-color: var(--success-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.completed .task-checkbox::after {
|
||||||
|
content: '✓';
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.in_progress .task-checkbox {
|
||||||
|
border-color: var(--warning-color);
|
||||||
|
background-color: var(--warning-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item.in_progress .task-checkbox::after {
|
||||||
|
content: '⟳';
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-id {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: monospace;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px 20px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-icon {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
right: 30px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transition: all 0.3s;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sessions-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-controls {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-count {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session-footer {
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>🚀 Workflow Dashboard</h1>
|
||||||
|
<p style="color: var(--text-secondary);">Task Board - Active and Archived Sessions</p>
|
||||||
|
|
||||||
|
<div class="header-controls">
|
||||||
|
<div class="search-box">
|
||||||
|
<input type="text" id="searchInput" placeholder="🔍 Search tasks or sessions..." />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<button class="btn active" data-filter="all">All</button>
|
||||||
|
<button class="btn" data-filter="active">Active</button>
|
||||||
|
<button class="btn" data-filter="archived">Archived</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value" id="totalSessions">0</div>
|
||||||
|
<div class="stat-label">Total Sessions</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value" id="activeSessions">0</div>
|
||||||
|
<div class="stat-label">Active Sessions</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value" id="totalTasks">0</div>
|
||||||
|
<div class="stat-label">Total Tasks</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value" id="completedTasks">0</div>
|
||||||
|
<div class="stat-label">Completed Tasks</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section" id="activeSectionContainer">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">📋 Active Sessions</h2>
|
||||||
|
</div>
|
||||||
|
<div class="sessions-grid" id="activeSessions"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section" id="archivedSectionContainer">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">📦 Archived Sessions</h2>
|
||||||
|
</div>
|
||||||
|
<div class="sessions-grid" id="archivedSessions"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="theme-toggle" id="themeToggle">🌙</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Workflow data will be injected here
|
||||||
|
const workflowData = {{WORKFLOW_DATA}};
|
||||||
|
|
||||||
|
// Theme management
|
||||||
|
function initTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||||
|
updateThemeIcon(savedTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||||
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
updateThemeIcon(newTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeIcon(theme) {
|
||||||
|
document.getElementById('themeToggle').textContent = theme === 'dark' ? '☀️' : '🌙';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Statistics calculation
|
||||||
|
function updateStatistics() {
|
||||||
|
const stats = {
|
||||||
|
totalSessions: workflowData.activeSessions.length + workflowData.archivedSessions.length,
|
||||||
|
activeSessions: workflowData.activeSessions.length,
|
||||||
|
totalTasks: 0,
|
||||||
|
completedTasks: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
workflowData.activeSessions.forEach(session => {
|
||||||
|
stats.totalTasks += session.tasks.length;
|
||||||
|
stats.completedTasks += session.tasks.filter(t => t.status === 'completed').length;
|
||||||
|
});
|
||||||
|
|
||||||
|
workflowData.archivedSessions.forEach(session => {
|
||||||
|
stats.totalTasks += session.taskCount || 0;
|
||||||
|
stats.completedTasks += session.taskCount || 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('totalSessions').textContent = stats.totalSessions;
|
||||||
|
document.getElementById('activeSessions').textContent = stats.activeSessions;
|
||||||
|
document.getElementById('totalTasks').textContent = stats.totalTasks;
|
||||||
|
document.getElementById('completedTasks').textContent = stats.completedTasks;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render session card
|
||||||
|
function createSessionCard(session, isActive) {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'session-card';
|
||||||
|
card.dataset.sessionType = isActive ? 'active' : 'archived';
|
||||||
|
|
||||||
|
const completedTasks = isActive
|
||||||
|
? session.tasks.filter(t => t.status === 'completed').length
|
||||||
|
: (session.taskCount || 0);
|
||||||
|
const totalTasks = isActive ? session.tasks.length : (session.taskCount || 0);
|
||||||
|
const progress = totalTasks > 0 ? (completedTasks / totalTasks * 100) : 0;
|
||||||
|
|
||||||
|
let tasksHtml = '';
|
||||||
|
if (isActive && session.tasks.length > 0) {
|
||||||
|
tasksHtml = `
|
||||||
|
<div class="tasks-list">
|
||||||
|
${session.tasks.map(task => `
|
||||||
|
<div class="task-item ${task.status}">
|
||||||
|
<div class="task-checkbox"></div>
|
||||||
|
<div class="task-title">${task.title || 'Untitled Task'}</div>
|
||||||
|
<span class="task-id">${task.task_id || ''}</span>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="session-header">
|
||||||
|
<div>
|
||||||
|
<h3 class="session-title">${session.session_id || 'Unknown Session'}</h3>
|
||||||
|
<div style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px;">
|
||||||
|
${session.project || ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="session-status ${isActive ? 'status-active' : 'status-archived'}">
|
||||||
|
${isActive ? 'Active' : 'Archived'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="session-meta">
|
||||||
|
<span>📅 ${session.created_at || session.archived_at || 'N/A'}</span>
|
||||||
|
<span>📊 ${completedTasks}/${totalTasks} tasks</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${totalTasks > 0 ? `
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" style="width: ${progress}%"></div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center; font-size: 0.85rem; color: var(--text-secondary);">
|
||||||
|
${Math.round(progress)}% Complete
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
|
||||||
|
${tasksHtml}
|
||||||
|
|
||||||
|
${!isActive && session.archive_path ? `
|
||||||
|
<div class="session-footer">
|
||||||
|
📁 Archive: ${session.archive_path}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
`;
|
||||||
|
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render all sessions
|
||||||
|
function renderSessions(filter = 'all') {
|
||||||
|
const activeContainer = document.getElementById('activeSessions');
|
||||||
|
const archivedContainer = document.getElementById('archivedSessions');
|
||||||
|
|
||||||
|
activeContainer.innerHTML = '';
|
||||||
|
archivedContainer.innerHTML = '';
|
||||||
|
|
||||||
|
if (filter === 'all' || filter === 'active') {
|
||||||
|
if (workflowData.activeSessions.length === 0) {
|
||||||
|
activeContainer.innerHTML = `
|
||||||
|
<div class="empty-state">
|
||||||
|
<div class="empty-state-icon">📭</div>
|
||||||
|
<p>No active sessions</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
workflowData.activeSessions.forEach(session => {
|
||||||
|
activeContainer.appendChild(createSessionCard(session, true));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filter === 'all' || filter === 'archived') {
|
||||||
|
if (workflowData.archivedSessions.length === 0) {
|
||||||
|
archivedContainer.innerHTML = `
|
||||||
|
<div class="empty-state">
|
||||||
|
<div class="empty-state-icon">📦</div>
|
||||||
|
<p>No archived sessions</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
workflowData.archivedSessions.forEach(session => {
|
||||||
|
archivedContainer.appendChild(createSessionCard(session, false));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show/hide sections
|
||||||
|
document.getElementById('activeSectionContainer').style.display =
|
||||||
|
(filter === 'all' || filter === 'active') ? 'block' : 'none';
|
||||||
|
document.getElementById('archivedSectionContainer').style.display =
|
||||||
|
(filter === 'all' || filter === 'archived') ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search functionality
|
||||||
|
function setupSearch() {
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const query = e.target.value.toLowerCase();
|
||||||
|
const cards = document.querySelectorAll('.session-card');
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
const text = card.textContent.toLowerCase();
|
||||||
|
card.style.display = text.includes(query) ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter functionality
|
||||||
|
function setupFilters() {
|
||||||
|
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||||
|
filterButtons.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
filterButtons.forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
renderSessions(btn.dataset.filter);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initTheme();
|
||||||
|
updateStatistics();
|
||||||
|
renderSessions();
|
||||||
|
setupSearch();
|
||||||
|
setupFilters();
|
||||||
|
|
||||||
|
document.getElementById('themeToggle').addEventListener('click', toggleTheme);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -253,300 +253,6 @@ flowchart TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 7️⃣ **CLI 工具协作模式 - 多模型智能协同**
|
|
||||||
|
|
||||||
本项目集成了三种 CLI 工具,支持灵活的串联、并行和混合执行方式:
|
|
||||||
|
|
||||||
| 工具 | 核心能力 | 上下文长度 | 适用场景 |
|
|
||||||
|------|---------|-----------|---------|
|
|
||||||
| **Gemini** | 深度分析、架构设计、规划 | 超长上下文 | 代码理解、执行流追踪、技术方案评估 |
|
|
||||||
| **Qwen** | 代码审查、模式识别 | 超长上下文 | Gemini 备选、多维度分析 |
|
|
||||||
| **Codex** | 精确代码撰写、Bug定位 | 标准上下文 | 功能实现、测试生成、代码重构 |
|
|
||||||
|
|
||||||
#### 📋 三种执行模式
|
|
||||||
|
|
||||||
**1. 串联执行(Serial Execution)** - 顺序依赖
|
|
||||||
|
|
||||||
适用场景:后续任务依赖前一任务的结果
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 示例:分析后实现
|
|
||||||
# Step 1: Gemini 分析架构
|
|
||||||
使用 gemini 分析认证模块的架构设计,识别关键组件和数据流
|
|
||||||
|
|
||||||
# Step 2: Codex 基于分析结果实现
|
|
||||||
让 codex 根据上述架构分析,实现 JWT 认证中间件
|
|
||||||
```
|
|
||||||
|
|
||||||
**执行流程**:
|
|
||||||
```
|
|
||||||
Gemini 分析 → 输出架构报告 → Codex 读取报告 → 实现代码
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**2. 并行执行(Parallel Execution)** - 同时进行
|
|
||||||
|
|
||||||
适用场景:多个独立任务,无依赖关系
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 示例:多维度分析
|
|
||||||
用 gemini 分析认证模块的安全性,关注 JWT、密码存储、会话管理
|
|
||||||
用 qwen 分析认证模块的性能瓶颈,识别慢查询和优化点
|
|
||||||
让 codex 为认证模块生成单元测试,覆盖所有核心功能
|
|
||||||
```
|
|
||||||
|
|
||||||
**执行流程**:
|
|
||||||
```
|
|
||||||
┌─ Gemini: 安全分析 ─┐
|
|
||||||
并行 ───┼─ Qwen: 性能分析 ──┼─→ 汇总结果
|
|
||||||
└─ Codex: 测试生成 ─┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**3. 混合执行(Hybrid Execution)** - 串并结合
|
|
||||||
|
|
||||||
适用场景:复杂任务,部分并行、部分串联
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 示例:完整功能开发
|
|
||||||
# Phase 1: 并行分析(独立任务)
|
|
||||||
使用 gemini 分析现有认证系统的架构模式
|
|
||||||
用 qwen 评估 OAuth2 集成的技术方案
|
|
||||||
|
|
||||||
# Phase 2: 串联实现(依赖 Phase 1)
|
|
||||||
让 codex 基于上述分析,实现 OAuth2 认证流程
|
|
||||||
|
|
||||||
# Phase 3: 并行优化(独立任务)
|
|
||||||
用 gemini 审查代码质量和安全性
|
|
||||||
让 codex 生成集成测试
|
|
||||||
```
|
|
||||||
|
|
||||||
**执行流程**:
|
|
||||||
```
|
|
||||||
Phase 1: Gemini 分析 ──┐
|
|
||||||
Qwen 评估 ────┼─→ Phase 2: Codex 实现 ──→ Phase 3: Gemini 审查 ──┐
|
|
||||||
│ Codex 测试 ──┼─→ 完成
|
|
||||||
└────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🎯 语义调用 vs 命令调用
|
|
||||||
|
|
||||||
**方式一:自然语言语义调用**(推荐)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 用户只需自然描述,Claude Code 自动调用工具
|
|
||||||
"使用 gemini 分析这个模块的依赖关系"
|
|
||||||
→ Claude Code 自动生成:cd src && gemini -p "分析依赖关系"
|
|
||||||
|
|
||||||
"让 codex 实现用户注册功能"
|
|
||||||
→ Claude Code 自动生成:codex -C src/auth --full-auto exec "实现注册"
|
|
||||||
```
|
|
||||||
|
|
||||||
**方式二:直接命令调用**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 通过 Slash 命令精准调用
|
|
||||||
/cli:chat --tool gemini "解释这个算法"
|
|
||||||
/cli:analyze --tool qwen "分析性能瓶颈"
|
|
||||||
/cli:execute --tool codex "优化查询性能"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🔗 CLI 结果作为上下文(Memory)
|
|
||||||
|
|
||||||
CLI 工具的分析结果可以被保存并作为后续操作的上下文(memory),实现智能化的工作流程:
|
|
||||||
|
|
||||||
**1. 结果持久化**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# CLI 执行结果自动保存到会话目录
|
|
||||||
/cli:chat --tool gemini "分析认证模块架构"
|
|
||||||
→ 保存到:.workflow/active/WFS-xxx/.chat/chat-[timestamp].md
|
|
||||||
|
|
||||||
/cli:analyze --tool qwen "评估性能瓶颈"
|
|
||||||
→ 保存到:.workflow/active/WFS-xxx/.chat/analyze-[timestamp].md
|
|
||||||
|
|
||||||
/cli:execute --tool codex "实现功能"
|
|
||||||
→ 保存到:.workflow/active/WFS-xxx/.chat/execute-[timestamp].md
|
|
||||||
```
|
|
||||||
|
|
||||||
**2. 结果作为规划依据**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Step 1: 分析现状(生成 memory)
|
|
||||||
使用 gemini 深度分析认证系统的架构、安全性和性能问题
|
|
||||||
→ 输出:详细分析报告(自动保存)
|
|
||||||
|
|
||||||
# Step 2: 基于分析结果规划
|
|
||||||
/workflow:plan "根据上述 Gemini 分析报告重构认证系统"
|
|
||||||
→ 系统自动读取 .chat/ 中的分析报告作为上下文
|
|
||||||
→ 生成精准的实施计划
|
|
||||||
```
|
|
||||||
|
|
||||||
**3. 结果作为实现依据**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Step 1: 并行分析(生成多个 memory)
|
|
||||||
使用 gemini 分析现有代码结构
|
|
||||||
用 qwen 评估技术方案可行性
|
|
||||||
→ 输出:多份分析报告
|
|
||||||
|
|
||||||
# Step 2: 基于所有分析结果实现
|
|
||||||
让 codex 综合上述 Gemini 和 Qwen 的分析,实现最优方案
|
|
||||||
→ Codex 自动读取前序分析结果
|
|
||||||
→ 生成符合架构设计的代码
|
|
||||||
```
|
|
||||||
|
|
||||||
**4. 跨会话引用**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 引用历史会话的分析结果
|
|
||||||
/cli:execute --tool codex "参考 WFS-2024-001 中的架构分析,实现新的支付模块"
|
|
||||||
→ 系统自动加载指定会话的上下文
|
|
||||||
→ 基于历史分析进行实现
|
|
||||||
```
|
|
||||||
|
|
||||||
**5. Memory 更新循环**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 迭代优化流程
|
|
||||||
使用 gemini 分析当前实现的问题
|
|
||||||
→ 生成问题报告(memory)
|
|
||||||
|
|
||||||
让 codex 根据问题报告优化代码
|
|
||||||
→ 实现改进(更新 memory)
|
|
||||||
|
|
||||||
用 qwen 验证优化效果
|
|
||||||
→ 验证报告(追加 memory)
|
|
||||||
|
|
||||||
# 所有结果累积为完整的项目 memory
|
|
||||||
→ 支持后续决策和实现
|
|
||||||
```
|
|
||||||
|
|
||||||
**Memory 流转示例**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 1: 分析阶段(生成 Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Gemini 分析 → 架构分析报告 (.chat/analyze-001.md) │
|
|
||||||
│ Qwen 评估 → 方案评估报告 (.chat/analyze-002.md) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ 作为 Memory 输入
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 2: 规划阶段(使用 Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ /workflow:plan → 读取分析报告 → 生成实施计划 │
|
|
||||||
│ (.task/IMPL-*.json) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ 作为 Memory 输入
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 3: 实现阶段(使用 Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Codex 实现 → 读取计划+分析 → 生成代码 │
|
|
||||||
│ (.chat/execute-001.md) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ 作为 Memory 输入
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 4: 验证阶段(使用 Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Gemini 审查 → 读取实现代码 → 质量报告 │
|
|
||||||
│ (.chat/review-001.md) │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
│
|
|
||||||
↓
|
|
||||||
完整的项目 Memory 库
|
|
||||||
支持未来所有决策和实现
|
|
||||||
```
|
|
||||||
|
|
||||||
**最佳实践**:
|
|
||||||
|
|
||||||
1. **保持连续性**:在同一会话中执行相关任务,自动共享 memory
|
|
||||||
2. **显式引用**:跨会话时明确引用历史分析(如"参考 WFS-xxx 的分析")
|
|
||||||
3. **增量更新**:每次分析和实现都追加到 memory,形成完整的决策链
|
|
||||||
4. **定期整理**:使用 `/memory:update-related` 将 CLI 结果整合到 CLAUDE.md
|
|
||||||
5. **质量优先**:高质量的分析 memory 能显著提升后续实现质量
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🔄 工作流集成示例
|
|
||||||
|
|
||||||
**集成到 Lite 工作流**:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 1. 规划阶段:Gemini 分析
|
|
||||||
/workflow:lite-plan -e "重构支付模块"
|
|
||||||
→ 三维确认选择 "CLI 工具执行"
|
|
||||||
|
|
||||||
# 2. 执行阶段:选择执行方式
|
|
||||||
# 选项 A: 串联执行
|
|
||||||
→ "使用 gemini 分析支付流程" → "让 codex 重构代码"
|
|
||||||
|
|
||||||
# 选项 B: 并行分析 + 串联实现
|
|
||||||
→ "用 gemini 分析架构" + "用 qwen 评估方案"
|
|
||||||
→ "让 codex 基于分析结果重构"
|
|
||||||
```
|
|
||||||
|
|
||||||
**集成到 Full 工作流**:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 1. 规划阶段
|
|
||||||
/workflow:plan "实现分布式缓存"
|
|
||||||
/workflow:action-plan-verify
|
|
||||||
|
|
||||||
# 2. 分析阶段(并行)
|
|
||||||
使用 gemini 分析现有缓存架构
|
|
||||||
用 qwen 评估 Redis 集群方案
|
|
||||||
|
|
||||||
# 3. 实现阶段(串联)
|
|
||||||
/workflow:execute # 或使用 CLI
|
|
||||||
让 codex 实现 Redis 集群集成
|
|
||||||
|
|
||||||
# 4. 测试阶段(并行)
|
|
||||||
/workflow:test-gen WFS-cache
|
|
||||||
→ 内部使用 gemini 分析 + codex 生成测试
|
|
||||||
|
|
||||||
# 5. 审查阶段(串联)
|
|
||||||
用 gemini 审查代码质量
|
|
||||||
/workflow:review --type architecture
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 💡 最佳实践
|
|
||||||
|
|
||||||
**何时使用串联**:
|
|
||||||
- 实现依赖设计方案
|
|
||||||
- 测试依赖代码实现
|
|
||||||
- 优化依赖性能分析
|
|
||||||
|
|
||||||
**何时使用并行**:
|
|
||||||
- 多维度分析(安全+性能+架构)
|
|
||||||
- 多模块独立开发
|
|
||||||
- 同时生成代码和测试
|
|
||||||
|
|
||||||
**何时使用混合**:
|
|
||||||
- 复杂功能开发(分析→设计→实现→测试)
|
|
||||||
- 大规模重构(评估→规划→执行→验证)
|
|
||||||
- 技术栈迁移(调研→方案→实施→优化)
|
|
||||||
|
|
||||||
**工具选择建议**:
|
|
||||||
1. **需要理解代码** → Gemini(首选)或 Qwen
|
|
||||||
2. **需要编写代码** → Codex
|
|
||||||
3. **复杂分析** → Gemini + Qwen 并行(互补验证)
|
|
||||||
4. **精确实现** → Codex(基于 Gemini 分析)
|
|
||||||
5. **快速原型** → 直接使用 Codex
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔄 典型场景完整流程
|
## 🔄 典型场景完整流程
|
||||||
|
|
||||||
### 场景A:新功能开发(知道怎么做)
|
### 场景A:新功能开发(知道怎么做)
|
||||||
|
|||||||
@@ -253,300 +253,6 @@ flowchart TD
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 7️⃣ **CLI Tools Collaboration Mode - Multi-Model Intelligent Coordination**
|
|
||||||
|
|
||||||
This project integrates three CLI tools supporting flexible serial, parallel, and hybrid execution:
|
|
||||||
|
|
||||||
| Tool | Core Capabilities | Context Length | Use Cases |
|
|
||||||
|------|------------------|----------------|-----------|
|
|
||||||
| **Gemini** | Deep analysis, architecture design, planning | Ultra-long context | Code understanding, execution flow tracing, technical solution evaluation |
|
|
||||||
| **Qwen** | Code review, pattern recognition | Ultra-long context | Gemini alternative, multi-dimensional analysis |
|
|
||||||
| **Codex** | Precise code writing, bug location | Standard context | Feature implementation, test generation, code refactoring |
|
|
||||||
|
|
||||||
#### 📋 Three Execution Modes
|
|
||||||
|
|
||||||
**1. Serial Execution** - Sequential dependency
|
|
||||||
|
|
||||||
Use case: Subsequent tasks depend on previous results
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Example: Analyze then implement
|
|
||||||
# Step 1: Gemini analyzes architecture
|
|
||||||
Use gemini to analyze the authentication module's architecture design, identify key components and data flow
|
|
||||||
|
|
||||||
# Step 2: Codex implements based on analysis
|
|
||||||
Have codex implement JWT authentication middleware based on the above architecture analysis
|
|
||||||
```
|
|
||||||
|
|
||||||
**Execution flow**:
|
|
||||||
```
|
|
||||||
Gemini analysis → Output architecture report → Codex reads report → Implement code
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**2. Parallel Execution** - Concurrent processing
|
|
||||||
|
|
||||||
Use case: Multiple independent tasks with no dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Example: Multi-dimensional analysis
|
|
||||||
Use gemini to analyze authentication module security, focus on JWT, password storage, session management
|
|
||||||
Use qwen to analyze authentication module performance bottlenecks, identify slow queries and optimization points
|
|
||||||
Have codex generate unit tests for authentication module, covering all core features
|
|
||||||
```
|
|
||||||
|
|
||||||
**Execution flow**:
|
|
||||||
```
|
|
||||||
┌─ Gemini: Security analysis ─┐
|
|
||||||
Parallel ┼─ Qwen: Performance analysis ┼─→ Aggregate results
|
|
||||||
└─ Codex: Test generation ────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**3. Hybrid Execution** - Combined serial and parallel
|
|
||||||
|
|
||||||
Use case: Complex tasks with both parallel and serial phases
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Example: Complete feature development
|
|
||||||
# Phase 1: Parallel analysis (independent tasks)
|
|
||||||
Use gemini to analyze existing authentication system architecture patterns
|
|
||||||
Use qwen to evaluate OAuth2 integration technical solutions
|
|
||||||
|
|
||||||
# Phase 2: Serial implementation (depends on Phase 1)
|
|
||||||
Have codex implement OAuth2 authentication flow based on above analysis
|
|
||||||
|
|
||||||
# Phase 3: Parallel optimization (independent tasks)
|
|
||||||
Use gemini to review code quality and security
|
|
||||||
Have codex generate integration tests
|
|
||||||
```
|
|
||||||
|
|
||||||
**Execution flow**:
|
|
||||||
```
|
|
||||||
Phase 1: Gemini analysis ──┐
|
|
||||||
Qwen evaluation ──┼─→ Phase 2: Codex implementation ──→ Phase 3: Gemini review ──┐
|
|
||||||
│ Codex tests ───┼─→ Complete
|
|
||||||
└──────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🎯 Semantic Invocation vs Command Invocation
|
|
||||||
|
|
||||||
**Method 1: Natural Language Semantic Invocation** (Recommended)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Users simply describe naturally, Claude Code auto-invokes tools
|
|
||||||
"Use gemini to analyze this module's dependencies"
|
|
||||||
→ Claude Code auto-generates: cd src && gemini -p "Analyze dependencies"
|
|
||||||
|
|
||||||
"Have codex implement user registration feature"
|
|
||||||
→ Claude Code auto-generates: codex -C src/auth --full-auto exec "Implement registration"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Method 2: Direct Command Invocation**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Precise invocation via Slash commands
|
|
||||||
/cli:chat --tool gemini "Explain this algorithm"
|
|
||||||
/cli:analyze --tool qwen "Analyze performance bottlenecks"
|
|
||||||
/cli:execute --tool codex "Optimize query performance"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🔗 CLI Results as Context (Memory)
|
|
||||||
|
|
||||||
CLI tool analysis results can be saved and used as context (memory) for subsequent operations, enabling intelligent workflows:
|
|
||||||
|
|
||||||
**1. Result Persistence**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# CLI execution results automatically saved to session directory
|
|
||||||
/cli:chat --tool gemini "Analyze authentication module architecture"
|
|
||||||
→ Saved to: .workflow/active/WFS-xxx/.chat/chat-[timestamp].md
|
|
||||||
|
|
||||||
/cli:analyze --tool qwen "Evaluate performance bottlenecks"
|
|
||||||
→ Saved to: .workflow/active/WFS-xxx/.chat/analyze-[timestamp].md
|
|
||||||
|
|
||||||
/cli:execute --tool codex "Implement feature"
|
|
||||||
→ Saved to: .workflow/active/WFS-xxx/.chat/execute-[timestamp].md
|
|
||||||
```
|
|
||||||
|
|
||||||
**2. Results as Planning Basis**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Step 1: Analyze current state (generate memory)
|
|
||||||
Use gemini to deeply analyze authentication system architecture, security, and performance issues
|
|
||||||
→ Output: Detailed analysis report (auto-saved)
|
|
||||||
|
|
||||||
# Step 2: Plan based on analysis results
|
|
||||||
/workflow:plan "Refactor authentication system based on above Gemini analysis report"
|
|
||||||
→ System automatically reads analysis reports from .chat/ as context
|
|
||||||
→ Generate precise implementation plan
|
|
||||||
```
|
|
||||||
|
|
||||||
**3. Results as Implementation Basis**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Step 1: Parallel analysis (generate multiple memories)
|
|
||||||
Use gemini to analyze existing code structure
|
|
||||||
Use qwen to evaluate technical solution feasibility
|
|
||||||
→ Output: Multiple analysis reports
|
|
||||||
|
|
||||||
# Step 2: Implement based on all analysis results
|
|
||||||
Have codex synthesize above Gemini and Qwen analyses to implement optimal solution
|
|
||||||
→ Codex automatically reads prior analysis results
|
|
||||||
→ Generate code conforming to architecture design
|
|
||||||
```
|
|
||||||
|
|
||||||
**4. Cross-Session References**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Reference historical session analysis results
|
|
||||||
/cli:execute --tool codex "Refer to architecture analysis in WFS-2024-001, implement new payment module"
|
|
||||||
→ System automatically loads specified session context
|
|
||||||
→ Implement based on historical analysis
|
|
||||||
```
|
|
||||||
|
|
||||||
**5. Memory Update Loop**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Iterative optimization flow
|
|
||||||
Use gemini to analyze problems in current implementation
|
|
||||||
→ Generate problem report (memory)
|
|
||||||
|
|
||||||
Have codex optimize code based on problem report
|
|
||||||
→ Implement improvements (update memory)
|
|
||||||
|
|
||||||
Use qwen to verify optimization effectiveness
|
|
||||||
→ Verification report (append to memory)
|
|
||||||
|
|
||||||
# All results accumulate as complete project memory
|
|
||||||
→ Support subsequent decisions and implementation
|
|
||||||
```
|
|
||||||
|
|
||||||
**Memory Flow Example**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 1: Analysis Phase (Generate Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Gemini analysis → Architecture report (.chat/analyze-001.md)│
|
|
||||||
│ Qwen evaluation → Solution report (.chat/analyze-002.md) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ As Memory Input
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 2: Planning Phase (Use Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ /workflow:plan → Read analysis reports → Generate plan │
|
|
||||||
│ (.task/IMPL-*.json) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ As Memory Input
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 3: Implementation Phase (Use Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Codex implement → Read plan+analysis → Generate code │
|
|
||||||
│ (.chat/execute-001.md) │
|
|
||||||
└─────────────────────┬───────────────────────────────────────┘
|
|
||||||
│ As Memory Input
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ Phase 4: Verification Phase (Use Memory) │
|
|
||||||
├─────────────────────────────────────────────────────────────┤
|
|
||||||
│ Gemini review → Read implementation code → Quality report│
|
|
||||||
│ (.chat/review-001.md) │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
│
|
|
||||||
↓
|
|
||||||
Complete Project Memory Library
|
|
||||||
Supporting All Future Decisions and Implementation
|
|
||||||
```
|
|
||||||
|
|
||||||
**Best Practices**:
|
|
||||||
|
|
||||||
1. **Maintain Continuity**: Execute related tasks in the same session to automatically share memory
|
|
||||||
2. **Explicit References**: Explicitly reference historical analyses when crossing sessions (e.g., "Refer to WFS-xxx analysis")
|
|
||||||
3. **Incremental Updates**: Each analysis and implementation appends to memory, forming complete decision chain
|
|
||||||
4. **Regular Organization**: Use `/memory:update-related` to consolidate CLI results into CLAUDE.md
|
|
||||||
5. **Quality First**: High-quality analysis memory significantly improves subsequent implementation quality
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 🔄 Workflow Integration Examples
|
|
||||||
|
|
||||||
**Integration with Lite Workflow**:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 1. Planning phase: Gemini analysis
|
|
||||||
/workflow:lite-plan -e "Refactor payment module"
|
|
||||||
→ Three-dimensional confirmation selects "CLI Tools execution"
|
|
||||||
|
|
||||||
# 2. Execution phase: Choose execution method
|
|
||||||
# Option A: Serial execution
|
|
||||||
→ "Use gemini to analyze payment flow" → "Have codex refactor code"
|
|
||||||
|
|
||||||
# Option B: Parallel analysis + Serial implementation
|
|
||||||
→ "Use gemini to analyze architecture" + "Use qwen to evaluate solution"
|
|
||||||
→ "Have codex refactor based on analysis results"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Integration with Full Workflow**:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 1. Planning phase
|
|
||||||
/workflow:plan "Implement distributed cache"
|
|
||||||
/workflow:action-plan-verify
|
|
||||||
|
|
||||||
# 2. Analysis phase (parallel)
|
|
||||||
Use gemini to analyze existing cache architecture
|
|
||||||
Use qwen to evaluate Redis cluster solution
|
|
||||||
|
|
||||||
# 3. Implementation phase (serial)
|
|
||||||
/workflow:execute # Or use CLI
|
|
||||||
Have codex implement Redis cluster integration
|
|
||||||
|
|
||||||
# 4. Testing phase (parallel)
|
|
||||||
/workflow:test-gen WFS-cache
|
|
||||||
→ Internally uses gemini analysis + codex test generation
|
|
||||||
|
|
||||||
# 5. Review phase (serial)
|
|
||||||
Use gemini to review code quality
|
|
||||||
/workflow:review --type architecture
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
#### 💡 Best Practices
|
|
||||||
|
|
||||||
**When to use serial**:
|
|
||||||
- Implementation depends on design solution
|
|
||||||
- Testing depends on code implementation
|
|
||||||
- Optimization depends on performance analysis
|
|
||||||
|
|
||||||
**When to use parallel**:
|
|
||||||
- Multi-dimensional analysis (security + performance + architecture)
|
|
||||||
- Multi-module independent development
|
|
||||||
- Simultaneous code and test generation
|
|
||||||
|
|
||||||
**When to use hybrid**:
|
|
||||||
- Complex feature development (analysis → design → implementation → testing)
|
|
||||||
- Large-scale refactoring (evaluation → planning → execution → verification)
|
|
||||||
- Tech stack migration (research → solution → implementation → optimization)
|
|
||||||
|
|
||||||
**Tool selection guidelines**:
|
|
||||||
1. **Need to understand code** → Gemini (preferred) or Qwen
|
|
||||||
2. **Need to write code** → Codex
|
|
||||||
3. **Complex analysis** → Gemini + Qwen parallel (complementary verification)
|
|
||||||
4. **Precise implementation** → Codex (based on Gemini analysis)
|
|
||||||
5. **Quick prototype** → Direct Codex usage
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔄 Complete Flow for Typical Scenarios
|
## 🔄 Complete Flow for Typical Scenarios
|
||||||
|
|
||||||
### Scenario A: New Feature Development (Know How to Build)
|
### Scenario A: New Feature Development (Know How to Build)
|
||||||
|
|||||||
Reference in New Issue
Block a user