mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-12 02:37:45 +08:00
feat: Implement phases 6 to 9 of the review cycle fix process, including discovery, batching, parallel planning, execution, and completion
- Added Phase 6: Fix Discovery & Batching with intelligent grouping and batching of findings. - Added Phase 7: Fix Parallel Planning to launch planning agents for concurrent analysis and aggregation of partial plans. - Added Phase 8: Fix Execution for stage-based execution of fixes with conservative test verification. - Added Phase 9: Fix Completion to aggregate results, generate summary reports, and handle session completion. - Introduced new frontend components: ResizeHandle for draggable resizing of sidebar panels and useResizablePanel hook for managing panel sizes with localStorage persistence. - Added PowerShell script for checking TypeScript errors in source code, excluding test files.
This commit is contained in:
110
ccw/frontend/src/components/orchestrator/README.md
Normal file
110
ccw/frontend/src/components/orchestrator/README.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# Orchestrator Components
|
||||
|
||||
## Tool Call Timeline Components
|
||||
|
||||
### Components
|
||||
|
||||
#### `ToolCallCard`
|
||||
Expandable card displaying tool call details with status, output, and results.
|
||||
|
||||
**Props:**
|
||||
- `toolCall`: `ToolCallExecution` - Tool call execution data
|
||||
- `isExpanded`: `boolean` - Whether the card is expanded
|
||||
- `onToggle`: `() => void` - Callback when toggle expand/collapse
|
||||
- `className?`: `string` - Optional CSS class name
|
||||
|
||||
**Features:**
|
||||
- Status icon (pending/executing/success/error/canceled)
|
||||
- Kind icon (execute/patch/thinking/web_search/mcp_tool/file_operation)
|
||||
- Duration display
|
||||
- Expand/collapse animation
|
||||
- stdout/stderr output with syntax highlighting
|
||||
- Exit code badge
|
||||
- Error message display
|
||||
- Result display
|
||||
|
||||
#### `ToolCallsTimeline`
|
||||
Vertical timeline displaying tool calls in chronological order.
|
||||
|
||||
**Props:**
|
||||
- `toolCalls`: `ToolCallExecution[]` - Array of tool call executions
|
||||
- `onToggleExpand`: `(callId: string) => void` - Callback when tool call toggled
|
||||
- `className?`: `string` - Optional CSS class name
|
||||
|
||||
**Features:**
|
||||
- Chronological sorting by start time
|
||||
- Timeline dot with status color
|
||||
- Auto-expand executing tool calls
|
||||
- Auto-scroll to executing tool call
|
||||
- Empty state with icon
|
||||
- Summary statistics (total/success/error/running)
|
||||
- Loading indicator when tools are executing
|
||||
|
||||
### Usage Example
|
||||
|
||||
```tsx
|
||||
import { ToolCallsTimeline } from '@/components/orchestrator';
|
||||
import { useExecutionStore } from '@/stores/executionStore';
|
||||
|
||||
function ToolCallsTab({ nodeId }: { nodeId: string }) {
|
||||
const toolCalls = useExecutionStore((state) =>
|
||||
state.getToolCallsForNode(nodeId)
|
||||
);
|
||||
const toggleToolCallExpanded = useExecutionStore(
|
||||
(state) => state.toggleToolCallExpanded
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
<ToolCallsTimeline
|
||||
toolCalls={toolCalls}
|
||||
onToggleExpand={(callId) => toggleToolCallExpanded(nodeId, callId)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Integration with ExecutionStore
|
||||
|
||||
The components integrate with `executionStore` for state management:
|
||||
|
||||
```tsx
|
||||
// Get tool calls for a node
|
||||
const toolCalls = useExecutionStore((state) =>
|
||||
state.getToolCallsForNode(nodeId)
|
||||
);
|
||||
|
||||
// Toggle expand state
|
||||
const handleToggle = (callId: string) => {
|
||||
useExecutionStore.getState().toggleToolCallExpanded(nodeId, callId);
|
||||
};
|
||||
```
|
||||
|
||||
### Data Flow
|
||||
|
||||
```
|
||||
WebSocket Message
|
||||
│
|
||||
▼
|
||||
useWebSocket (parsing)
|
||||
│
|
||||
▼
|
||||
executionStore.startToolCall()
|
||||
│
|
||||
▼
|
||||
ToolCallsTimeline (re-render)
|
||||
│
|
||||
▼
|
||||
ToolCallCard (display)
|
||||
```
|
||||
|
||||
### Styling
|
||||
|
||||
Components use Tailwind CSS with the following conventions:
|
||||
- `border-border` - Border color
|
||||
- `bg-muted` - Muted background
|
||||
- `text-destructive` - Error text color
|
||||
- `text-green-500` - Success text color
|
||||
- `text-primary` - Primary text color
|
||||
- `animate-pulse` - Pulse animation for executing status
|
||||
Reference in New Issue
Block a user