catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 12:13:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(queue): implement queue scheduler service and API routes

Browse Source 
- Added QueueSchedulerService to manage task queue lifecycle, including state machine, dependency resolution, and session management.
- Implemented HTTP API endpoints for queue scheduling:
  - POST /api/queue/execute: Submit items to the scheduler.
  - GET /api/queue/scheduler/state: Retrieve full scheduler state.
  - POST /api/queue/scheduler/start: Start scheduling loop with items.
  - POST /api/queue/scheduler/pause: Pause scheduling.
  - POST /api/queue/scheduler/stop: Graceful stop of the scheduler.
  - POST /api/queue/scheduler/config: Update scheduler configuration.
- Introduced types for queue items, scheduler state, and WebSocket messages to ensure type safety and compatibility with the backend.
- Added static model lists for LiteLLM as a fallback for available models.
This commit is contained in:
catlog22
2026-02-27 20:53:46 +08:00
parent 5b54f38aa3
commit 75173312c1
47 changed files with 3813 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ccw/frontend/src/components/api-settings/CliSettingsModal.tsx
View File

@@ -164,7 +164,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
setCliProvider(p);
setMode('direct');
setProviderId('');
setModel(p === 'claude' ? 'sonnet' : '');
setModel('');
setSettingsFile('');
setAuthToken('');
setBaseUrl('');
@@ -291,7 +291,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
}
settings = {
env,
model: model || 'sonnet',
model: model || undefined,
settingsFile: settingsFile.trim() || undefined,
availableModels,
tags,
@@ -505,7 +505,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
<div className="space-y-2">
<Label htmlFor="model-pb">{formatMessage({ id: 'apiSettings.cliSettings.model' })}</Label>
<Input id="model-pb" value={model} onChange={(e) => setModel(e.target.value)} placeholder="sonnet" />
<Input id="model-pb" value={model} onChange={(e) => setModel(e.target.value)} placeholder="" />
</div>
</TabsContent>
@@ -545,7 +545,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
<div className="space-y-2">
<Label htmlFor="model-direct">{formatMessage({ id: 'apiSettings.cliSettings.model' })}</Label>
<Input id="model-direct" value={model} onChange={(e) => setModel(e.target.value)} placeholder="sonnet" />
<Input id="model-direct" value={model} onChange={(e) => setModel(e.target.value)} placeholder="" />
</div>
</TabsContent>
</Tabs>
@@ -644,7 +644,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
id="codex-model"
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="gpt-5.2"
placeholder=""
/>
<p className="text-xs text-muted-foreground">
指定使用的模型，将自动更新到 config.toml 中
@@ -711,7 +711,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
id="codex-configtoml"
value={configToml}
onChange={(e) => setConfigToml(e.target.value)}
placeholder={'model = "gpt-5.2"\nmodel_reasoning_effort = "xhigh"'}
placeholder=""
className="font-mono text-sm"
rows={6}
/>
@@ -778,7 +778,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
id="gemini-model"
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="gemini-2.5-flash"
placeholder=""
/>
</div>
@@ -803,7 +803,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
id="gemini-settingsjson"
value={geminiSettingsJson}
onChange={(e) => setGeminiSettingsJson(e.target.value)}
placeholder='{"model": "gemini-2.5-flash", ...}'
placeholder="{}"
className="font-mono text-sm"
rows={8}
readOnly

2
ccw/frontend/src/components/api-settings/EndpointModal.tsx
View File

@@ -295,7 +295,7 @@ export function EndpointModal({ open, onClose, endpoint }: EndpointModalProps) {
id="model"
value={model}
onChange={(e) => setModel(e.target.value)}
placeholder="gpt-4o"
placeholder=""
className="font-mono"
/>
) : (

14
ccw/frontend/src/components/layout/Header.tsx
View File

@@ -16,7 +16,6 @@ import {
LogOut,
Terminal,
Bell,
Clock,
Monitor,
SquareTerminal,
} from 'lucide-react';
@@ -86,19 +85,6 @@ export function Header({
{/* Right side - Actions */}
<div className="flex items-center gap-2">
{/* History entry */}
<Button
variant="ghost"
size="sm"
asChild
className="gap-2"
>
<Link to="/history" className="inline-flex items-center gap-2">
<Clock className="h-4 w-4" />
<span className="hidden sm:inline">{formatMessage({ id: 'navigation.main.history' })}</span>
</Link>
</Button>
{/* CLI Monitor button */}
<Button
variant="ghost"

2
ccw/frontend/src/components/layout/Sidebar.tsx
View File

@@ -27,6 +27,7 @@ import {
Users,
FileSearch,
ScrollText,
Clock,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/Button';
@@ -78,6 +79,7 @@ const navGroupDefinitions: NavGroupDef[] = [
items: [
{ path: '/sessions', labelKey: 'navigation.main.sessions', icon: FolderKanban },
{ path: '/lite-tasks', labelKey: 'navigation.main.liteTasks', icon: Zap },
{ path: '/history', labelKey: 'navigation.main.history', icon: Clock },
{ path: '/issues', labelKey: 'navigation.main.issues', icon: AlertCircle },
{ path: '/analysis', labelKey: 'navigation.main.analysis', icon: FileSearch },
{ path: '/teams', labelKey: 'navigation.main.teams', icon: Users },

98
ccw/frontend/src/components/mcp/CcwToolsMcpCard.test.tsx
View File

@@ -5,11 +5,9 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { render, screen, waitFor } from '@/test/i18n';
import userEvent from '@testing-library/user-event';
import { act } from '@testing-library/react';
import { CcwToolsMcpCard } from './CcwToolsMcpCard';
import { updateCcwConfig, updateCcwConfigForCodex } from '@/lib/api';
vi.mock('@/lib/api', () => ({
const apiMock = vi.hoisted(() => ({
installCcwMcp: vi.fn(),
uninstallCcwMcp: vi.fn(),
updateCcwConfig: vi.fn(),
@@ -18,11 +16,24 @@ vi.mock('@/lib/api', () => ({
updateCcwConfigForCodex: vi.fn(),
}));
vi.mock('@/hooks/useNotifications', () => ({
useNotifications: () => ({
success: vi.fn(),
error: vi.fn(),
}),
vi.mock('@/lib/api', () => apiMock);
const notificationsMock = vi.hoisted(() => ({
success: vi.fn(),
error: vi.fn(),
}));
// Avoid importing the full hooks barrel in this component test (it has heavy deps and
// side effects that aren't relevant here).
vi.mock('@/hooks', () => ({
mcpServersKeys: { all: ['mcpServers'] },
useNotifications: () => notificationsMock,
}));
vi.mock('@/stores/workflowStore', () => ({
useWorkflowStore: (selector: (state: { projectPath: string }) => string) =>
selector({ projectPath: '' }),
selectProjectPath: (state: { projectPath: string }) => state.projectPath,
}));
describe('CcwToolsMcpCard', () => {
@@ -31,7 +42,8 @@ describe('CcwToolsMcpCard', () => {
});
it('preserves enabledTools when saving config (Codex)', async () => {
const updateCodexMock = vi.mocked(updateCcwConfigForCodex);
const { CcwToolsMcpCard } = await import('./CcwToolsMcpCard');
const updateCodexMock = vi.mocked(apiMock.updateCcwConfigForCodex);
updateCodexMock.mockResolvedValue({
isInstalled: true,
enabledTools: [],
@@ -51,22 +63,36 @@ describe('CcwToolsMcpCard', () => {
);
const user = userEvent.setup();
await user.click(screen.getByText(/CCW MCP Server|mcp\.ccw\.title/i));
await user.click(
screen.getByRole('button', { name: /Save Configuration|mcp\.ccw\.actions\.saveConfig/i })
);
await act(async () => {
await user.click(screen.getByText(/CCW MCP Server|mcp\.ccw\.title/i));
});
const saveButton = screen.getByRole('button', {
name: /Save Configuration|mcp\.ccw\.actions\.saveConfig/i,
});
expect(saveButton).toBeEnabled();
await act(async () => {
await user.click(saveButton);
});
await waitFor(() => {
expect(updateCodexMock).toHaveBeenCalledWith(
expect.objectContaining({
enabledTools: ['write_file', 'read_many_files'],
})
);
expect(updateCodexMock).toHaveBeenCalled();
});
await waitFor(() => {
expect(notificationsMock.success).toHaveBeenCalled();
});
const [payload] = updateCodexMock.mock.calls[0] ?? [];
expect(payload).toEqual(
expect.objectContaining({
enabledTools: ['write_file', 'read_many_files'],
})
);
});
it('preserves enabledTools when saving config (Claude)', async () => {
const updateClaudeMock = vi.mocked(updateCcwConfig);
const { CcwToolsMcpCard } = await import('./CcwToolsMcpCard');
const updateClaudeMock = vi.mocked(apiMock.updateCcwConfig);
updateClaudeMock.mockResolvedValue({
isInstalled: true,
enabledTools: [],
@@ -85,18 +111,30 @@ describe('CcwToolsMcpCard', () => {
);
const user = userEvent.setup();
await user.click(screen.getByText(/CCW MCP Server|mcp\.ccw\.title/i));
await user.click(
screen.getByRole('button', { name: /Save Configuration|mcp\.ccw\.actions\.saveConfig/i })
);
await act(async () => {
await user.click(screen.getByText(/CCW MCP Server|mcp\.ccw\.title/i));
});
const saveButton = screen.getByRole('button', {
name: /Save Configuration|mcp\.ccw\.actions\.saveConfig/i,
});
expect(saveButton).toBeEnabled();
await act(async () => {
await user.click(saveButton);
});
await waitFor(() => {
expect(updateClaudeMock).toHaveBeenCalledWith(
expect.objectContaining({
enabledTools: ['write_file', 'smart_search'],
})
);
expect(updateClaudeMock).toHaveBeenCalled();
});
await waitFor(() => {
expect(notificationsMock.success).toHaveBeenCalled();
});
const [payload] = updateClaudeMock.mock.calls[0] ?? [];
expect(payload).toEqual(
expect.objectContaining({
enabledTools: ['write_file', 'smart_search'],
})
);
});
});

2
ccw/frontend/src/components/shared/CliStreamMonitor/CliStreamMonitorNew.tsx
View File

@@ -260,7 +260,7 @@ export function CliStreamMonitorNew({ isOpen, onClose }: CliStreamMonitorNewProp
{/* Main Panel */}
<div
className={cn(
'fixed top-0 right-0 h-full w-[640px] bg-background border-l border-border shadow-2xl z-50 flex flex-col transition-transform duration-300 ease-in-out',
'fixed top-0 right-0 h-full w-[1568px] bg-background border-l border-border shadow-2xl z-50 flex flex-col transition-transform duration-300 ease-in-out',
isOpen ? 'translate-x-0' : 'translate-x-full'
)}
role="dialog"

37
ccw/frontend/src/components/shared/CliStreamMonitor/messages/AssistantMessage.tsx
View File

@@ -2,11 +2,13 @@
// AssistantMessage Component
// ========================================
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Bot, ChevronDown, Copy, Check } from 'lucide-react';
import { Bot, ChevronDown, Copy, Check, FileJson } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/Button';
import { JsonCard } from '../components/JsonCard';
import { detectJsonInLine } from '../utils/jsonDetector';
// Status indicator component
interface StatusIndicatorProps {
@@ -94,6 +96,11 @@ export function AssistantMessage({
const [isExpanded, setIsExpanded] = useState(true);
const [copied, setCopied] = useState(false);
// Detect JSON in content
const jsonDetection = useMemo(() => {
return detectJsonInLine(content);
}, [content]);
useEffect(() => {
if (copied) {
const timer = setTimeout(() => setCopied(false), 2000);
@@ -126,6 +133,14 @@ export function AssistantMessage({
{modelName}
</span>
{/* JSON indicator badge */}
{jsonDetection?.isJson && (
<span className="flex items-center gap-0.5 text-[9px] text-violet-500 dark:text-violet-400 bg-violet-200/50 dark:bg-violet-800/50 px-1 rounded">
<FileJson className="h-2.5 w-2.5" />
JSON
</span>
)}
<div className="flex items-center gap-1.5 ml-auto">
<StatusIndicator status={status} duration={duration} />
<ChevronDown
@@ -141,11 +156,21 @@ export function AssistantMessage({
{isExpanded && (
<>
<div className="px-2.5 py-2 bg-violet-50/40 dark:bg-violet-950/30">
<div className="bg-white/60 dark:bg-black/30 rounded border border-violet-200/40 dark:border-violet-800/30 p-2.5">
<div className="text-xs text-foreground whitespace-pre-wrap break-words leading-relaxed">
{content}
{jsonDetection?.isJson && jsonDetection.parsed ? (
/* JSON detected - use collapsible JsonCard */
<JsonCard
data={jsonDetection.parsed}
type="stdout"
onCopy={handleCopy}
/>
) : (
/* Plain text content */
<div className="bg-white/60 dark:bg-black/30 rounded border border-violet-200/40 dark:border-violet-800/30 p-2.5">
<div className="text-xs text-foreground whitespace-pre-wrap break-words leading-relaxed">
{content}
</div>
</div>
</div>
)}
</div>
{/* Metadata Footer - simplified */}

2
ccw/frontend/src/components/shared/CliStreamMonitor/messages/example.tsx
View File

@@ -17,7 +17,7 @@ export function MessageExample() {
<SystemMessage
title="Session Started"
timestamp={Date.now()}
metadata="gemini-2.5-pro | Context: 28 files"
metadata="Context: 28 files"
content="CLI execution started: gemini (analysis mode)"
/>

25
ccw/frontend/src/components/shared/CliStreamPanel.tsx
View File

@@ -19,6 +19,7 @@ import {
import { useCliExecutionDetail } from '@/hooks/useCliExecution';
import { useNativeSession } from '@/hooks/useNativeSession';
import type { ConversationRecord, ConversationTurn, NativeSessionTurn, NativeTokenInfo, NativeToolCall } from '@/lib/api';
import { getToolVariant } from '@/lib/cli-tool-theme';
type ViewMode = 'per-turn' | 'concatenated' | 'native';
type ConcatFormat = 'plain' | 'yaml' | 'json';
@@ -69,16 +70,12 @@ function getStatusInfo(status: string) {
}
/**
* Get badge variant for tool name
* Ensure prompt is a string (handle legacy object data)
*/
function getToolVariant(tool: string): 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info' {
const variants: Record<string, 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info'> = {
gemini: 'info',
codex: 'success',
qwen: 'warning',
opencode: 'secondary',
};
return variants[tool] || 'secondary';
function ensureString(value: unknown): string {
if (typeof value === 'string') return value;
if (value && typeof value === 'object') return JSON.stringify(value);
return String(value ?? '');
}
/**
@@ -95,7 +92,7 @@ function buildConcatenatedPrompt(execution: ConversationRecord, format: ConcatFo
for (const turn of turns) {
parts.push(`--- Turn ${turn.turn} ---`);
parts.push('USER:');
parts.push(turn.prompt);
parts.push(ensureString(turn.prompt));
parts.push('');
parts.push('ASSISTANT:');
parts.push(turn.output.stdout || formatMessage({ id: 'cli-manager.streamPanel.noOutput' }));
@@ -118,7 +115,7 @@ function buildConcatenatedPrompt(execution: ConversationRecord, format: ConcatFo
yaml.push(` - turn: ${turn.turn}`);
yaml.push(` timestamp: ${turn.timestamp}`);
yaml.push(` prompt: |`);
turn.prompt.split('\n').forEach(line => {
ensureString(turn.prompt).split('\n').forEach(line => {
yaml.push(` ${line}`);
});
yaml.push(` response: |`);
@@ -140,7 +137,7 @@ function buildConcatenatedPrompt(execution: ConversationRecord, format: ConcatFo
turns.map((t) => ({
turn: t.turn,
timestamp: t.timestamp,
prompt: t.prompt,
prompt: ensureString(t.prompt),
response: t.output.stdout || '',
})),
null,
@@ -212,7 +209,7 @@ function TurnSection({ turn, isLatest, isExpanded, onToggle }: TurnSectionProps)
{formatMessage({ id: 'cli-manager.streamPanel.userPrompt' })}
</h4>
<pre className="p-3 bg-muted/50 rounded-lg text-sm whitespace-pre-wrap overflow-x-auto font-mono leading-relaxed">
{turn.prompt}
{ensureString(turn.prompt)}
</pre>
</div>
@@ -462,7 +459,7 @@ function NativeTurnCard({ turn, isLatest, isExpanded, onToggle }: NativeTurnCard
<div className="p-4 space-y-3">
{turn.content && (
<pre className="p-3 bg-background/50 rounded-lg text-sm whitespace-pre-wrap overflow-x-auto font-mono leading-relaxed max-h-80 overflow-y-auto">
{turn.content}
{ensureString(turn.content)}
</pre>
)}

4
ccw/frontend/src/components/shared/ConversationCard.tsx
View File

@@ -198,7 +198,9 @@ export function ConversationCard({
{/* Prompt preview */}
<p className="text-sm text-foreground line-clamp-2 mb-2">
{execution.prompt_preview}
{typeof execution.prompt_preview === 'string'
? execution.prompt_preview
: JSON.stringify(execution.prompt_preview)}
</p>
{/* Meta info */}

14
ccw/frontend/src/components/shared/NativeSessionPanel.tsx
View File

@@ -24,6 +24,7 @@ import {
} from '@/components/ui/Dialog';
import { useNativeSession } from '@/hooks/useNativeSession';
import { SessionTimeline } from './SessionTimeline';
import { getToolVariant } from '@/lib/cli-tool-theme';
// ========== Types ==========
@@ -35,19 +36,6 @@ export interface NativeSessionPanelProps {
// ========== Helpers ==========
/**
* Get badge variant for tool name
*/
function getToolVariant(tool: string): 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info' {
const variants: Record<string, 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info'> = {
gemini: 'info',
codex: 'success',
qwen: 'warning',
opencode: 'secondary',
};
return variants[tool?.toLowerCase()] || 'secondary';
}
/**
* Truncate a string to a max length with ellipsis
*/

11
ccw/frontend/src/components/shared/SessionTimeline.tsx
View File

@@ -54,6 +54,15 @@ interface ToolCallPanelProps {
// ========== Helpers ==========
/**
* Ensure content is a string (handle legacy object data like {text: "..."})
*/
function ensureString(value: unknown): string {
if (typeof value === 'string') return value;
if (value && typeof value === 'object') return JSON.stringify(value);
return String(value ?? '');
}
/**
* Format token number with compact notation
*/
@@ -319,7 +328,7 @@ function TurnNode({ turn, isLatest, isLast }: TurnNodeProps) {
{turn.content && (
<div className="p-4">
<pre className="text-sm whitespace-pre-wrap overflow-x-auto font-mono leading-relaxed max-h-64 overflow-y-auto">
{turn.content}
{ensureString(turn.content)}
</pre>
</div>
)}

127
ccw/frontend/src/components/terminal-dashboard/CliConfigModal.tsx
View File

@@ -5,7 +5,7 @@
import * as React from 'react';
import { useIntl } from 'react-intl';
import { FolderOpen, RefreshCw } from 'lucide-react';
import { ChevronDown, FolderOpen, RefreshCw } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
@@ -52,8 +52,6 @@ export interface CliConfigModalProps {
onCreateSession: (config: CliSessionConfig) => Promise<void>;
}
const AUTO_MODEL_VALUE = '__auto__';
/**
* Generate a tag name: {tool}-{HHmmss}
* Example: gemini-143052
@@ -95,6 +93,12 @@ export function CliConfigModal({
const [isSubmitting, setIsSubmitting] = React.useState(false);
const [error, setError] = React.useState<string | null>(null);
// Model combobox state
const [modelInputValue, setModelInputValue] = React.useState('');
const [isModelDropdownOpen, setIsModelDropdownOpen] = React.useState(false);
const modelContainerRef = React.useRef<HTMLDivElement>(null);
const modelInputRef = React.useRef<HTMLInputElement>(null);
// CLI Settings integration (for all tools)
const { cliSettings } = useCliSettings({ enabled: true });
@@ -162,13 +166,30 @@ export function CliConfigModal({
// eslint-disable-next-line react-hooks/exhaustive-deps -- only re-run when tool changes, reading tag intentionally stale
}, [tool]);
// Sync initial model when tool/modelOptions change
// Sync model input display when model state changes (e.g., tool change)
React.useEffect(() => {
if (modelOptions.length > 0 && (!model || !modelOptions.includes(model))) {
setModel(modelOptions[0]);
setModelInputValue(model ?? '');
}, [model]);
// Filter model suggestions based on typed input
const filteredModelOptions = React.useMemo(() => {
const query = modelInputValue.toLowerCase();
if (!query) return modelOptions;
return modelOptions.filter((m) => m.toLowerCase().includes(query));
}, [modelOptions, modelInputValue]);
// Close model dropdown on outside click
React.useEffect(() => {
function handleClickOutside(e: MouseEvent) {
if (modelContainerRef.current && !modelContainerRef.current.contains(e.target as Node)) {
setIsModelDropdownOpen(false);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- only re-run when modelOptions changes
}, [modelOptions]);
if (isModelDropdownOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}
}, [isModelDropdownOpen]);
const handleToolChange = (nextTool: string) => {
setTool(nextTool as CliTool);
@@ -276,30 +297,80 @@ export function CliConfigModal({
</Select>
</div>
{/* Model */}
{/* Model - Combobox (input + dropdown suggestions) */}
<div className="space-y-2">
<Label htmlFor="cli-config-model">
{formatMessage({ id: 'terminalDashboard.cliConfig.model' })}
</Label>
<Select
value={model ?? AUTO_MODEL_VALUE}
onValueChange={(v) => setModel(v === AUTO_MODEL_VALUE ? undefined : v)}
disabled={isSubmitting}
>
<SelectTrigger id="cli-config-model">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value={AUTO_MODEL_VALUE}>
{formatMessage({ id: 'terminalDashboard.cliConfig.modelAuto' })}
</SelectItem>
{modelOptions.map((m) => (
<SelectItem key={m} value={m}>
{m}
</SelectItem>
))}
</SelectContent>
</Select>
<div ref={modelContainerRef} className="relative">
<div className="flex">
<input
ref={modelInputRef}
id="cli-config-model"
value={modelInputValue}
onChange={(e) => {
const v = e.target.value;
setModelInputValue(v);
setModel(v || undefined);
if (!isModelDropdownOpen) setIsModelDropdownOpen(true);
}}
onFocus={() => setIsModelDropdownOpen(true)}
onKeyDown={(e) => {
if (e.key === 'Escape') setIsModelDropdownOpen(false);
if (e.key === 'Enter') setIsModelDropdownOpen(false);
}}
placeholder={formatMessage({ id: 'terminalDashboard.cliConfig.modelAuto', defaultMessage: 'Auto' })}
disabled={isSubmitting}
className="flex h-10 w-full rounded-l-md border border-r-0 border-input bg-background px-3 py-2 text-sm font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
<button
type="button"
onClick={() => {
setIsModelDropdownOpen(!isModelDropdownOpen);
if (!isModelDropdownOpen) modelInputRef.current?.focus();
}}
disabled={isSubmitting}
className="flex items-center justify-center h-10 w-9 shrink-0 rounded-r-md border border-input bg-background hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
>
<ChevronDown className="h-4 w-4 opacity-50" />
</button>
</div>
{isModelDropdownOpen && (
<div className="absolute z-50 mt-1 w-full rounded-md border border-border bg-card shadow-md max-h-48 overflow-y-auto">
<button
type="button"
onClick={() => {
setModel(undefined);
setModelInputValue('');
setIsModelDropdownOpen(false);
}}
className={cn(
'flex w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground',
!model && 'bg-accent/50'
)}
>
{formatMessage({ id: 'terminalDashboard.cliConfig.modelAuto', defaultMessage: 'Auto' })}
</button>
{filteredModelOptions.map((m) => (
<button
key={m}
type="button"
onClick={() => {
setModel(m);
setModelInputValue(m);
setIsModelDropdownOpen(false);
}}
className={cn(
'flex w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground font-mono',
model === m && 'bg-accent/50'
)}
>
{m}
</button>
))}
</div>
)}
</div>
</div>
</div>

15
ccw/frontend/src/components/terminal-dashboard/DashboardToolbar.tsx
View File

@@ -22,6 +22,7 @@ import {
Minimize2,
Activity,
Plus,
Gauge,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/Badge';
@@ -36,11 +37,12 @@ import { toast } from '@/stores/notificationStore';
import { useExecutionMonitorStore, selectActiveExecutionCount } from '@/stores/executionMonitorStore';
import { useSessionManagerStore } from '@/stores/sessionManagerStore';
import { useConfigStore } from '@/stores/configStore';
import { useQueueSchedulerStore, selectQueueSchedulerStatus } from '@/stores/queueSchedulerStore';
import { CliConfigModal, type CliSessionConfig } from './CliConfigModal';
// ========== Types ==========
export type PanelId = 'issues' | 'queue' | 'inspector' | 'execution';
export type PanelId = 'issues' | 'queue' | 'inspector' | 'execution' | 'scheduler';
interface DashboardToolbarProps {
activePanel: PanelId | null;
@@ -95,6 +97,10 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
// Execution monitor count
const executionCount = useExecutionMonitorStore(selectActiveExecutionCount);
// Scheduler status for badge indicator
const schedulerStatus = useQueueSchedulerStore(selectQueueSchedulerStatus);
const isSchedulerActive = schedulerStatus !== 'idle';
// Feature flags for panel visibility
const featureFlags = useConfigStore((s) => s.featureFlags);
const showQueue = featureFlags.dashboardQueuePanelEnabled;
@@ -244,6 +250,13 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
badge={executionCount > 0 ? executionCount : undefined}
/>
)}
<ToolbarButton
icon={Gauge}
label={formatMessage({ id: 'terminalDashboard.toolbar.scheduler', defaultMessage: 'Scheduler' })}
isActive={activePanel === 'scheduler'}
onClick={() => onTogglePanel('scheduler')}
dot={isSchedulerActive}
/>
<ToolbarButton
icon={FolderOpen}
label={formatMessage({ id: 'terminalDashboard.toolbar.files', defaultMessage: 'Files' })}

121
ccw/frontend/src/components/terminal-dashboard/IssuePanel.tsx
View File

@@ -17,6 +17,7 @@ import {
Check,
Send,
X,
ListPlus,
} from 'lucide-react';
import { Badge } from '@/components/ui/Badge';
import {
@@ -37,6 +38,7 @@ import { executeInCliSession } from '@/lib/api';
import type { Issue } from '@/lib/api';
import { useTerminalGridStore, selectTerminalGridFocusedPaneId, selectTerminalGridPanes } from '@/stores/terminalGridStore';
import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
import { useQueueSchedulerStore } from '@/stores/queueSchedulerStore';
import { toast } from '@/stores/notificationStore';
// ========== Execution Method Type ==========
@@ -51,6 +53,13 @@ const PROMPT_TEMPLATES: Record<ExecutionMethod, (idStr: string) => string> = {
'direct-send': (idStr) => `根据@.workflow/issues/issues.jsonl中的 ${idStr} 需求，进行开发`,
};
// ========== Queue Prompt Builder ==========
function buildQueuePrompt(issues: Issue[]): string {
const ids = issues.map((i) => i.id).join(' ');
return `根据@.workflow/issues/issues.jsonl中的 ${ids} 需求，进行开发`;
}
// ========== Priority Badge ==========
const PRIORITY_STYLES: Record<Issue['priority'], { variant: 'destructive' | 'warning' | 'info' | 'secondary'; label: string }> = {
@@ -203,6 +212,13 @@ export function IssuePanel() {
const [customPrompt, setCustomPrompt] = useState('');
const sentTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// Queue state
const [isAddingToQueue, setIsAddingToQueue] = useState(false);
const [justQueued, setJustQueued] = useState(false);
const [queueMode, setQueueMode] = useState<'write' | 'analysis' | 'auto'>('write');
const queuedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const submitItems = useQueueSchedulerStore((s) => s.submitItems);
// Terminal refs
const focusedPaneId = useTerminalGridStore(selectTerminalGridFocusedPaneId);
const panes = useTerminalGridStore(selectTerminalGridPanes);
@@ -234,10 +250,11 @@ export function IssuePanel() {
}
}, [availableMethods, executionMethod]);
// Cleanup sent feedback timer on unmount
// Cleanup feedback timers on unmount
useEffect(() => {
return () => {
if (sentTimerRef.current) clearTimeout(sentTimerRef.current);
if (queuedTimerRef.current) clearTimeout(queuedTimerRef.current);
};
}, []);
@@ -349,6 +366,43 @@ export function IssuePanel() {
}
}, [sessionKey, selectedIds, projectPath, executionMethod, sessionCliTool, customPrompt]);
const handleAddToQueue = useCallback(async () => {
if (selectedIds.size === 0) return;
setIsAddingToQueue(true);
try {
const selectedIssues = sortedIssues.filter((i) => selectedIds.has(i.id));
const now = new Date().toISOString();
const items = selectedIssues.map((issue, index) => ({
item_id: `Q-${issue.id}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
issue_id: issue.id,
status: 'pending' as const,
tool: sessionCliTool || 'gemini',
prompt: buildQueuePrompt([issue]),
mode: queueMode,
depends_on: [] as string[],
execution_order: index + 1,
execution_group: 'default',
createdAt: now,
metadata: { issueTitle: issue.title, issuePriority: issue.priority },
}));
await submitItems(items);
toast.success(
formatMessage({ id: 'terminalDashboard.issuePanel.addedToQueue', defaultMessage: 'Added to queue' }),
`${items.length} item(s)`
);
setJustQueued(true);
if (queuedTimerRef.current) clearTimeout(queuedTimerRef.current);
queuedTimerRef.current = setTimeout(() => setJustQueued(false), 2000);
} catch (err) {
toast.error(
formatMessage({ id: 'terminalDashboard.issuePanel.addToQueueFailed', defaultMessage: 'Failed to add to queue' }),
err instanceof Error ? err.message : String(err)
);
} finally {
setIsAddingToQueue(false);
}
}, [selectedIds, sortedIssues, sessionCliTool, submitItems, formatMessage]);
// Loading state
if (isLoading) {
return (
@@ -512,22 +566,55 @@ export function IssuePanel() {
Clear
</button>
</div>
<button
type="button"
className={cn(
'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
justSent
? 'bg-green-600 text-white'
: 'bg-primary text-primary-foreground hover:bg-primary/90',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
disabled={!sessionKey || isSending}
onClick={isSendConfigOpen ? handleSendToTerminal : handleOpenSendConfig}
title={!sessionKey ? 'No terminal session focused' : `Send via ${executionMethod}`}
>
{isSending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : justSent ? <Check className="w-3.5 h-3.5" /> : <Terminal className="w-3.5 h-3.5" />}
{justSent ? 'Sent!' : `Send (${selectedIds.size})`}
</button>
<div className="flex items-center gap-1.5">
{/* Queue mode selector */}
<select
className="h-6 text-[10px] rounded border border-border bg-background px-1 text-muted-foreground"
value={queueMode}
onChange={(e) => setQueueMode(e.target.value as 'write' | 'analysis' | 'auto')}
title={formatMessage({ id: 'terminalDashboard.issuePanel.queueModeHint', defaultMessage: 'Execution mode for queued items' })}
>
<option value="write">write</option>
<option value="analysis">analysis</option>
<option value="auto">auto</option>
</select>
{/* Add to Queue button */}
<button
type="button"
className={cn(
'flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors',
justQueued
? 'bg-green-600 text-white'
: 'bg-muted text-foreground hover:bg-muted/80',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
disabled={isAddingToQueue}
onClick={handleAddToQueue}
title={formatMessage({ id: 'terminalDashboard.issuePanel.addToQueueHint', defaultMessage: 'Add selected issues to the execution queue' })}
>
{isAddingToQueue ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : justQueued ? <Check className="w-3.5 h-3.5" /> : <ListPlus className="w-3.5 h-3.5" />}
{justQueued
? formatMessage({ id: 'terminalDashboard.issuePanel.addedToQueue', defaultMessage: 'Queued!' })
: formatMessage({ id: 'terminalDashboard.issuePanel.addToQueue', defaultMessage: 'Queue' })}
</button>
{/* Send to Terminal button */}
<button
type="button"
className={cn(
'flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors',
justSent
? 'bg-green-600 text-white'
: 'bg-primary text-primary-foreground hover:bg-primary/90',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
disabled={!sessionKey || isSending}
onClick={isSendConfigOpen ? handleSendToTerminal : handleOpenSendConfig}
title={!sessionKey ? 'No terminal session focused' : `Send via ${executionMethod}`}
>
{isSending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : justSent ? <Check className="w-3.5 h-3.5" /> : <Terminal className="w-3.5 h-3.5" />}
{justSent ? 'Sent!' : `Send (${selectedIds.size})`}
</button>
</div>
</div>
</div>
)}

330
ccw/frontend/src/components/terminal-dashboard/QueueListColumn.tsx Normal file
View File

@@ -0,0 +1,330 @@
// ========================================
// QueueListColumn Component
// ========================================
// Queue items list for embedding in the Issues dual-column panel.
// Unified data source: queueSchedulerStore only.
// Includes inline scheduler controls at the bottom.
import { useMemo, useCallback, useState } from 'react';
import { useIntl } from 'react-intl';
import {
ListChecks,
Loader2,
CheckCircle,
XCircle,
Zap,
Ban,
Square,
Terminal,
Timer,
Clock,
Play,
Pause,
StopCircle,
} from 'lucide-react';
import { Badge } from '@/components/ui/Badge';
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from '@/components/ui/AlertDialog';
import { cn } from '@/lib/utils';
import {
useIssueQueueIntegrationStore,
selectAssociationChain,
} from '@/stores/issueQueueIntegrationStore';
import {
useQueueExecutionStore,
selectByQueueItem,
} from '@/stores/queueExecutionStore';
import {
useQueueSchedulerStore,
selectQueueSchedulerStatus,
selectQueueItems,
selectSchedulerProgress,
selectCurrentConcurrency,
selectSchedulerConfig,
} from '@/stores/queueSchedulerStore';
import type { QueueItem, QueueItemStatus } from '@/types/queue-frontend-types';
// ========== Status Config ==========
const STATUS_CONFIG: Record<QueueItemStatus, {
variant: 'info' | 'success' | 'destructive' | 'secondary' | 'warning' | 'outline';
icon: typeof Clock;
label: string;
}> = {
pending: { variant: 'secondary', icon: Clock, label: 'Pending' },
queued: { variant: 'info', icon: Timer, label: 'Queued' },
ready: { variant: 'info', icon: Zap, label: 'Ready' },
blocked: { variant: 'outline', icon: Ban, label: 'Blocked' },
executing: { variant: 'warning', icon: Loader2, label: 'Executing' },
completed: { variant: 'success', icon: CheckCircle, label: 'Completed' },
failed: { variant: 'destructive', icon: XCircle, label: 'Failed' },
cancelled: { variant: 'secondary', icon: Square, label: 'Cancelled' },
};
// ========== Scheduler Status Styles ==========
const SCHEDULER_STATUS_STYLE: Record<string, string> = {
idle: 'bg-muted text-muted-foreground',
running: 'bg-blue-500/15 text-blue-600',
paused: 'bg-yellow-500/15 text-yellow-600',
stopping: 'bg-orange-500/15 text-orange-600',
completed: 'bg-green-500/15 text-green-600',
failed: 'bg-red-500/15 text-red-600',
};
// ========== Item Row ==========
function QueueItemRow({
item,
isHighlighted,
onSelect,
}: {
item: QueueItem;
isHighlighted: boolean;
onSelect: () => void;
}) {
const { formatMessage } = useIntl();
const config = STATUS_CONFIG[item.status] ?? STATUS_CONFIG.pending;
const StatusIcon = config.icon;
const executions = useQueueExecutionStore(selectByQueueItem(item.item_id));
const activeExec = executions.find((e) => e.status === 'running') ?? executions[0];
const sessionKey = item.sessionKey ?? activeExec?.sessionKey;
const isExecuting = item.status === 'executing';
const isBlocked = item.status === 'blocked';
// Show issue_id if available (for items added from IssuePanel)
const displayId = item.issue_id ? `${item.issue_id}` : item.item_id;
return (
<button
type="button"
className={cn(
'w-full text-left px-2.5 py-1.5 rounded-md transition-colors',
'hover:bg-muted/60 focus:outline-none focus:ring-1 focus:ring-primary/30',
isHighlighted && 'bg-accent/50 ring-1 ring-accent/30',
isExecuting && 'border-l-2 border-l-blue-500'
)}
onClick={onSelect}
>
<div className="flex items-center justify-between gap-1.5">
<div className="flex items-center gap-1.5 min-w-0">
<StatusIcon
className={cn(
'w-3 h-3 shrink-0',
isExecuting && 'animate-spin'
)}
/>
<span className="text-xs font-medium text-foreground truncate font-mono">
{displayId}
</span>
</div>
<Badge variant={config.variant} className="text-[10px] px-1 py-0 shrink-0">
{formatMessage({ id: `terminalDashboard.queuePanel.status.${item.status}`, defaultMessage: config.label })}
</Badge>
</div>
<div className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground pl-4">
{item.execution_group && <span>{item.execution_group}</span>}
{sessionKey && (
<>
<span className="text-border">|</span>
<span className="flex items-center gap-0.5">
<Terminal className="w-2.5 h-2.5" />
{sessionKey}
</span>
</>
)}
</div>
{isBlocked && item.depends_on.length > 0 && (
<div className="mt-0.5 text-[10px] text-orange-500/80 pl-4 truncate">
{formatMessage(
{ id: 'terminalDashboard.queuePanel.blockedBy', defaultMessage: 'Blocked by: {deps}' },
{ deps: item.depends_on.join(', ') }
)}
</div>
)}
</button>
);
}
// ========== Inline Scheduler Controls ==========
function SchedulerBar() {
const { formatMessage } = useIntl();
const status = useQueueSchedulerStore(selectQueueSchedulerStatus);
const progress = useQueueSchedulerStore(selectSchedulerProgress);
const concurrency = useQueueSchedulerStore(selectCurrentConcurrency);
const config = useQueueSchedulerStore(selectSchedulerConfig);
const startQueue = useQueueSchedulerStore((s) => s.startQueue);
const pauseQueue = useQueueSchedulerStore((s) => s.pauseQueue);
const stopQueue = useQueueSchedulerStore((s) => s.stopQueue);
const items = useQueueSchedulerStore(selectQueueItems);
const canStart = status === 'idle' && items.length > 0;
const canPause = status === 'running';
const canResume = status === 'paused';
const canStop = status === 'running' || status === 'paused';
const isActive = status !== 'idle';
const [isStopConfirmOpen, setIsStopConfirmOpen] = useState(false);
const handleStart = useCallback(() => {
if (canResume) {
startQueue();
} else if (canStart) {
startQueue(items);
}
}, [canResume, canStart, startQueue, items]);
return (
<div className="border-t border-border px-2.5 py-1.5 shrink-0">
<div className="flex items-center justify-between gap-2">
{/* Status badge */}
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', SCHEDULER_STATUS_STYLE[status])}
>
{formatMessage({ id: `terminalDashboard.queuePanel.scheduler.status.${status}`, defaultMessage: status })}
</Badge>
{/* Progress + Concurrency */}
{isActive && (
<span className="text-[10px] text-muted-foreground">
{progress}% | {concurrency}/{config.maxConcurrentSessions}
</span>
)}
{/* Controls */}
<div className="flex items-center gap-0.5">
{(canStart || canResume) && (
<button
type="button"
className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
onClick={handleStart}
title={formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.start', defaultMessage: 'Start' })}
>
<Play className="w-3 h-3" />
</button>
)}
{canPause && (
<button
type="button"
className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
onClick={pauseQueue}
title={formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.pause', defaultMessage: 'Pause' })}
>
<Pause className="w-3 h-3" />
</button>
)}
{canStop && (
<button
type="button"
className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
onClick={() => setIsStopConfirmOpen(true)}
title={formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stop', defaultMessage: 'Stop' })}
>
<StopCircle className="w-3 h-3" />
</button>
)}
</div>
</div>
{/* Progress bar */}
{isActive && (
<div className="mt-1 h-1 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
)}
{/* Stop confirmation dialog */}
<AlertDialog open={isStopConfirmOpen} onOpenChange={setIsStopConfirmOpen}>
<AlertDialogContent className="max-w-sm">
<AlertDialogHeader>
<AlertDialogTitle className="text-base">
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stopConfirmTitle', defaultMessage: 'Stop Queue?' })}
</AlertDialogTitle>
<AlertDialogDescription>
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stopConfirmMessage', defaultMessage: 'Executing tasks will finish, but no new tasks will be started.' })}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="h-8 text-xs">
{formatMessage({ id: 'common.cancel', defaultMessage: 'Cancel' })}
</AlertDialogCancel>
<AlertDialogAction
className="h-8 text-xs bg-destructive text-destructive-foreground hover:bg-destructive/90"
onClick={() => { stopQueue(); setIsStopConfirmOpen(false); }}
>
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stop', defaultMessage: 'Stop' })}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}
// ========== Main Component ==========
export function QueueListColumn() {
const { formatMessage } = useIntl();
const items = useQueueSchedulerStore(selectQueueItems);
const associationChain = useIssueQueueIntegrationStore(selectAssociationChain);
const buildAssociationChain = useIssueQueueIntegrationStore((s) => s.buildAssociationChain);
const sortedItems = useMemo(
() => [...items].sort((a, b) => a.execution_order - b.execution_order),
[items]
);
const handleSelect = useCallback(
(queueItemId: string) => {
buildAssociationChain(queueItemId, 'queue');
},
[buildAssociationChain]
);
return (
<div className="flex flex-col h-full">
{/* Item list */}
{sortedItems.length === 0 ? (
<div className="flex-1 flex items-center justify-center text-muted-foreground p-3">
<div className="text-center">
<ListChecks className="h-5 w-5 mx-auto mb-1 opacity-30" />
<p className="text-xs">{formatMessage({ id: 'terminalDashboard.queuePanel.noItems' })}</p>
<p className="text-[10px] mt-0.5 opacity-70">
{formatMessage({ id: 'terminalDashboard.queuePanel.noItemsDesc', defaultMessage: 'Select issues and click Queue to add items' })}
</p>
</div>
</div>
) : (
<div className="flex-1 min-h-0 overflow-y-auto p-1 space-y-0.5">
{sortedItems.map((item) => (
<QueueItemRow
key={item.item_id}
item={item}
isHighlighted={associationChain?.queueItemId === item.item_id}
onSelect={() => handleSelect(item.item_id)}
/>
))}
</div>
)}
{/* Inline scheduler controls */}
<SchedulerBar />
</div>
);
}

111
ccw/frontend/src/components/terminal-dashboard/QueuePanel.tsx
View File

@@ -2,9 +2,10 @@
// QueuePanel Component
// ========================================
// Queue list panel for the terminal dashboard with tab switching.
// Tab 1 (Queue): Issue queue items from useIssueQueue() hook.
// Tab 1 (Queue): Issue queue items from queueSchedulerStore (with useIssueQueue() fallback).
// Tab 2 (Orchestrator): Active orchestration plans from orchestratorStore.
// Integrates with issueQueueIntegrationStore for association chain.
// Note: Scheduler controls are in the standalone SchedulerPanel.
import { useState, useMemo, useCallback, memo } from 'react';
import { useIntl } from 'react-intl';
@@ -27,6 +28,7 @@ import {
Square,
RotateCcw,
AlertCircle,
Timer,
} from 'lucide-react';
import { Badge } from '@/components/ui/Badge';
import { Button } from '@/components/ui/Button';
@@ -40,6 +42,11 @@ import {
useQueueExecutionStore,
selectByQueueItem,
} from '@/stores/queueExecutionStore';
import {
useQueueSchedulerStore,
selectQueueSchedulerStatus,
selectQueueItems,
} from '@/stores/queueSchedulerStore';
import {
useOrchestratorStore,
selectActivePlans,
@@ -47,54 +54,77 @@ import {
type OrchestrationRunState,
} from '@/stores/orchestratorStore';
import type { StepStatus, OrchestrationStatus } from '@/types/orchestrator';
import type { QueueItem } from '@/lib/api';
import type { QueueItem as ApiQueueItem } from '@/lib/api';
import type { QueueItem as SchedulerQueueItem, QueueItemStatus as SchedulerQueueItemStatus } from '@/types/queue-frontend-types';
// ========== Tab Type ==========
type QueueTab = 'queue' | 'orchestrator';
// ========== Queue Tab: Unified Item Type ==========
/**
* Unified queue item type that works with both the legacy API QueueItem
* and the new scheduler QueueItem. The scheduler type is a superset.
*/
type UnifiedQueueItem = ApiQueueItem | SchedulerQueueItem;
/**
* Combined status type covering both scheduler statuses and legacy API statuses.
*/
type CombinedQueueItemStatus = SchedulerQueueItemStatus | ApiQueueItem['status'];
// ========== Queue Tab: Status Config ==========
type QueueItemStatus = QueueItem['status'];
const STATUS_CONFIG: Record<QueueItemStatus, {
const STATUS_CONFIG: Record<CombinedQueueItemStatus, {
variant: 'info' | 'success' | 'destructive' | 'secondary' | 'warning' | 'outline';
icon: typeof Clock;
label: string;
}> = {
pending: { variant: 'secondary', icon: Clock, label: 'Pending' },
queued: { variant: 'info', icon: Timer, label: 'Queued' },
ready: { variant: 'info', icon: Zap, label: 'Ready' },
blocked: { variant: 'outline', icon: Ban, label: 'Blocked' },
executing: { variant: 'warning', icon: Loader2, label: 'Executing' },
completed: { variant: 'success', icon: CheckCircle, label: 'Completed' },
failed: { variant: 'destructive', icon: XCircle, label: 'Failed' },
blocked: { variant: 'outline', icon: Ban, label: 'Blocked' },
cancelled: { variant: 'secondary', icon: Square, label: 'Cancelled' },
};
// ========== Queue Tab: Item Row ==========
// ========== Queue Tab: Content ==========
function QueueItemRow({
item,
isHighlighted,
onSelect,
}: {
item: QueueItem;
item: UnifiedQueueItem;
isHighlighted: boolean;
onSelect: () => void;
}) {
const { formatMessage } = useIntl();
const config = STATUS_CONFIG[item.status] ?? STATUS_CONFIG.pending;
const statusKey = item.status as CombinedQueueItemStatus;
const config = STATUS_CONFIG[statusKey] ?? STATUS_CONFIG.pending;
const StatusIcon = config.icon;
const executions = useQueueExecutionStore(selectByQueueItem(item.item_id));
const activeExec = executions.find((e) => e.status === 'running') ?? executions[0];
// Session key: prefer scheduler QueueItem.sessionKey, fallback to execution store
const schedulerItem = item as SchedulerQueueItem;
const sessionKey = schedulerItem.sessionKey ?? activeExec?.sessionKey;
const isExecuting = item.status === 'executing';
const isBlocked = item.status === 'blocked';
return (
<button
type="button"
className={cn(
'w-full text-left px-3 py-2 rounded-md transition-colors',
'hover:bg-muted/60 focus:outline-none focus:ring-1 focus:ring-primary/30',
isHighlighted && 'bg-accent/50 ring-1 ring-accent/30'
isHighlighted && 'bg-accent/50 ring-1 ring-accent/30',
isExecuting && 'border-l-2 border-l-blue-500'
)}
onClick={onSelect}
>
@@ -103,7 +133,7 @@ function QueueItemRow({
<StatusIcon
className={cn(
'w-3.5 h-3.5 shrink-0',
item.status === 'executing' && 'animate-spin'
isExecuting && 'animate-spin'
)}
/>
<span className="text-sm font-medium text-foreground truncate font-mono">
@@ -111,7 +141,7 @@ function QueueItemRow({
</span>
</div>
<Badge variant={config.variant} className="text-[10px] px-1.5 py-0 shrink-0">
{formatMessage({ id: `terminalDashboard.queuePanel.status.${item.status}` })}
{formatMessage({ id: `terminalDashboard.queuePanel.status.${item.status}`, defaultMessage: config.label })}
</Badge>
</div>
<div className="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground pl-5">
@@ -125,17 +155,25 @@ function QueueItemRow({
</span>
<span className="text-border">|</span>
<span>{item.execution_group}</span>
{activeExec?.sessionKey && (
{sessionKey && (
<>
<span className="text-border">|</span>
<span className="flex items-center gap-0.5">
<Terminal className="w-3 h-3" />
{activeExec.sessionKey}
{sessionKey}
</span>
</>
)}
</div>
{item.depends_on.length > 0 && (
{isBlocked && item.depends_on.length > 0 && (
<div className="mt-0.5 text-[10px] text-orange-500/80 pl-5 truncate">
{formatMessage(
{ id: 'terminalDashboard.queuePanel.blockedBy', defaultMessage: 'Blocked by: {deps}' },
{ deps: item.depends_on.join(', ') }
)}
</div>
)}
{!isBlocked && item.depends_on.length > 0 && (
<div className="mt-0.5 text-[10px] text-muted-foreground/70 pl-5 truncate">
{formatMessage(
{ id: 'terminalDashboard.queuePanel.dependsOn' },
@@ -151,14 +189,24 @@ function QueueItemRow({
function QueueTabContent(_props: { embedded?: boolean }) {
const { formatMessage } = useIntl();
// Scheduler store data
const schedulerItems = useQueueSchedulerStore(selectQueueItems);
const schedulerStatus = useQueueSchedulerStore(selectQueueSchedulerStatus);
// Legacy API data (fallback)
const queueQuery = useIssueQueue();
const associationChain = useIssueQueueIntegrationStore(selectAssociationChain);
const buildAssociationChain = useIssueQueueIntegrationStore((s) => s.buildAssociationChain);
const allItems = useMemo(() => {
// Use scheduler items when scheduler has data, otherwise fall back to legacy API
const useSchedulerData = schedulerItems.length > 0 || schedulerStatus !== 'idle';
const legacyItems = useMemo(() => {
if (!queueQuery.data) return [];
const grouped = queueQuery.data.grouped_items ?? {};
const items: QueueItem[] = [];
const items: ApiQueueItem[] = [];
for (const group of Object.values(grouped)) {
items.push(...group);
}
@@ -166,6 +214,13 @@ function QueueTabContent(_props: { embedded?: boolean }) {
return items;
}, [queueQuery.data]);
const allItems: UnifiedQueueItem[] = useMemo(() => {
if (useSchedulerData) {
return [...schedulerItems].sort((a, b) => a.execution_order - b.execution_order);
}
return legacyItems;
}, [useSchedulerData, schedulerItems, legacyItems]);
const handleSelect = useCallback(
(queueItemId: string) => {
buildAssociationChain(queueItemId, 'queue');
@@ -173,7 +228,8 @@ function QueueTabContent(_props: { embedded?: boolean }) {
[buildAssociationChain]
);
if (queueQuery.isLoading) {
// Show loading only for legacy mode
if (!useSchedulerData && queueQuery.isLoading) {
return (
<div className="flex-1 flex items-center justify-center">
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
@@ -181,7 +237,7 @@ function QueueTabContent(_props: { embedded?: boolean }) {
);
}
if (queueQuery.error) {
if (!useSchedulerData && queueQuery.error) {
return (
<div className="flex-1 flex items-center justify-center text-destructive p-4">
<div className="text-center">
@@ -446,8 +502,23 @@ export function QueuePanel({ embedded = false }: { embedded?: boolean }) {
const [activeTab, setActiveTab] = useState<QueueTab>('queue');
const orchestratorCount = useOrchestratorStore(selectActivePlanCount);
// Scheduler store data for active count
const schedulerItems = useQueueSchedulerStore(selectQueueItems);
const schedulerStatus = useQueueSchedulerStore(selectQueueSchedulerStatus);
const useSchedulerData = schedulerItems.length > 0 || schedulerStatus !== 'idle';
// Legacy API data for active count fallback
const queueQuery = useIssueQueue();
const queueActiveCount = useMemo(() => {
if (useSchedulerData) {
return schedulerItems.filter(
(item) =>
item.status === 'pending' ||
item.status === 'queued' ||
item.status === 'executing'
).length;
}
if (!queueQuery.data) return 0;
const grouped = queueQuery.data.grouped_items ?? {};
let count = 0;
@@ -457,7 +528,7 @@ export function QueuePanel({ embedded = false }: { embedded?: boolean }) {
).length;
}
return count;
}, [queueQuery.data]);
}, [useSchedulerData, schedulerItems, queueQuery.data]);
return (
<div className="flex flex-col h-full">

262
ccw/frontend/src/components/terminal-dashboard/SchedulerPanel.tsx Normal file
View File

@@ -0,0 +1,262 @@
// ========================================
// SchedulerPanel Component
// ========================================
// Standalone queue scheduler control panel.
// Shows scheduler status, start/pause/stop controls, concurrency config,
// progress bar, and session pool overview.
import { useCallback, useState } from 'react';
import { useIntl } from 'react-intl';
import {
Play,
Pause,
Square,
Loader2,
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Progress } from '@/components/ui/Progress';
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from '@/components/ui/AlertDialog';
import { cn } from '@/lib/utils';
import {
useQueueSchedulerStore,
selectQueueSchedulerStatus,
selectSchedulerProgress,
selectSchedulerConfig,
selectSessionPool,
selectCurrentConcurrency,
selectSchedulerError,
} from '@/stores/queueSchedulerStore';
import type { QueueSchedulerStatus } from '@/types/queue-frontend-types';
// ========== Status Badge Config ==========
const SCHEDULER_STATUS_CLASS: Record<QueueSchedulerStatus, string> = {
idle: 'bg-muted text-muted-foreground border-border',
running: 'bg-primary/10 text-primary border-primary/50',
paused: 'bg-amber-500/10 text-amber-500 border-amber-500/50',
stopping: 'bg-orange-500/10 text-orange-500 border-orange-500/50',
completed: 'bg-green-500/10 text-green-500 border-green-500/50',
failed: 'bg-destructive/10 text-destructive border-destructive/50',
};
// ========== Component ==========
export function SchedulerPanel() {
const { formatMessage } = useIntl();
const schedulerStatus = useQueueSchedulerStore(selectQueueSchedulerStatus);
const progress = useQueueSchedulerStore(selectSchedulerProgress);
const config = useQueueSchedulerStore(selectSchedulerConfig);
const sessionPool = useQueueSchedulerStore(selectSessionPool);
const concurrency = useQueueSchedulerStore(selectCurrentConcurrency);
const error = useQueueSchedulerStore(selectSchedulerError);
const startQueue = useQueueSchedulerStore((s) => s.startQueue);
const pauseQueue = useQueueSchedulerStore((s) => s.pauseQueue);
const stopQueue = useQueueSchedulerStore((s) => s.stopQueue);
const updateConfig = useQueueSchedulerStore((s) => s.updateConfig);
const isIdle = schedulerStatus === 'idle';
const isRunning = schedulerStatus === 'running';
const isPaused = schedulerStatus === 'paused';
const isStopping = schedulerStatus === 'stopping';
const isTerminal = schedulerStatus === 'completed' || schedulerStatus === 'failed';
const [isStopConfirmOpen, setIsStopConfirmOpen] = useState(false);
const handleConcurrencyChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value, 10);
if (!isNaN(value) && value >= 1 && value <= 10) {
updateConfig({ maxConcurrentSessions: value });
}
},
[updateConfig]
);
const sessionEntries = Object.entries(sessionPool);
return (
<div className="flex flex-col h-full">
{/* Status + Controls */}
<div className="px-3 py-3 border-b border-border space-y-3 shrink-0">
{/* Status badge */}
<div className="flex items-center gap-2">
<span
className={cn(
'px-2.5 py-1 rounded text-xs font-medium border',
SCHEDULER_STATUS_CLASS[schedulerStatus]
)}
>
{formatMessage({
id: `terminalDashboard.queuePanel.scheduler.status.${schedulerStatus}`,
defaultMessage: schedulerStatus,
})}
</span>
<span className="text-xs text-muted-foreground ml-auto tabular-nums">
{concurrency}/{config.maxConcurrentSessions}
</span>
</div>
{/* Control buttons */}
<div className="flex items-center gap-2">
{(isIdle || isTerminal) && (
<Button
variant="outline"
size="sm"
className="h-7 text-xs gap-1.5 flex-1"
onClick={() => startQueue()}
>
<Play className="w-3.5 h-3.5" />
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.start', defaultMessage: 'Start' })}
</Button>
)}
{isPaused && (
<Button
variant="outline"
size="sm"
className="h-7 text-xs gap-1.5 flex-1"
onClick={() => startQueue()}
>
<Play className="w-3.5 h-3.5" />
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.start', defaultMessage: 'Resume' })}
</Button>
)}
{isRunning && (
<Button
variant="outline"
size="sm"
className="h-7 text-xs gap-1.5 flex-1"
onClick={pauseQueue}
>
<Pause className="w-3.5 h-3.5" />
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.pause', defaultMessage: 'Pause' })}
</Button>
)}
{(isRunning || isPaused) && (
<Button
variant="destructive"
size="sm"
className="h-7 text-xs gap-1.5"
disabled={isStopping}
onClick={() => setIsStopConfirmOpen(true)}
>
{isStopping ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Square className="w-3.5 h-3.5" />}
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stop', defaultMessage: 'Stop' })}
</Button>
)}
</div>
{/* Progress bar (visible when not idle) */}
{!isIdle && (
<div className="flex items-center gap-2">
<Progress
value={progress}
className="h-1.5 flex-1"
indicatorClassName={cn(
schedulerStatus === 'failed' && 'bg-destructive',
schedulerStatus === 'completed' && 'bg-green-500',
schedulerStatus === 'paused' && 'bg-amber-500',
(schedulerStatus === 'running' || schedulerStatus === 'stopping') && 'bg-primary',
)}
/>
<span className="text-[10px] text-muted-foreground tabular-nums shrink-0">
{formatMessage(
{ id: 'terminalDashboard.queuePanel.scheduler.progress', defaultMessage: '{percent}%' },
{ percent: progress }
)}
</span>
</div>
)}
</div>
{/* Concurrency Config */}
<div className="px-3 py-2.5 border-b border-border shrink-0">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.concurrency', defaultMessage: 'Concurrency' })}
</span>
<input
type="number"
min={1}
max={10}
value={config.maxConcurrentSessions}
onChange={handleConcurrencyChange}
className="w-14 h-6 text-xs text-center rounded border border-border bg-background px-1"
/>
</div>
</div>
{/* Session Pool */}
<div className="flex-1 min-h-0 overflow-y-auto">
<div className="px-3 py-2">
<h4 className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
{formatMessage({ id: 'terminalDashboard.schedulerPanel.sessionPool', defaultMessage: 'Session Pool' })}
</h4>
{sessionEntries.length === 0 ? (
<p className="text-xs text-muted-foreground/60 py-2">
{formatMessage({ id: 'terminalDashboard.schedulerPanel.noSessions', defaultMessage: 'No active sessions' })}
</p>
) : (
<div className="space-y-1">
{sessionEntries.map(([resumeKey, binding]) => (
<div
key={resumeKey}
className="flex items-center justify-between px-2 py-1.5 rounded bg-muted/30 text-xs"
>
<div className="min-w-0">
<span className="font-mono text-foreground truncate block">{binding.sessionKey}</span>
<span className="text-[10px] text-muted-foreground truncate block">{resumeKey}</span>
</div>
<span className="text-[10px] text-muted-foreground shrink-0 ml-2 tabular-nums">
{new Date(binding.lastUsed).toLocaleTimeString()}
</span>
</div>
))}
</div>
)}
</div>
</div>
{/* Error display */}
{error && (
<div className="px-3 py-2 border-t border-destructive/30 bg-destructive/5 shrink-0">
<p className="text-xs text-destructive break-words">{error}</p>
</div>
)}
{/* Stop confirmation dialog */}
<AlertDialog open={isStopConfirmOpen} onOpenChange={setIsStopConfirmOpen}>
<AlertDialogContent className="max-w-sm">
<AlertDialogHeader>
<AlertDialogTitle className="text-base">
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stopConfirmTitle', defaultMessage: 'Stop Queue?' })}
</AlertDialogTitle>
<AlertDialogDescription>
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stopConfirmMessage', defaultMessage: 'Executing tasks will finish, but no new tasks will be started. Pending items will remain in the queue.' })}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="h-8 text-xs">
{formatMessage({ id: 'common.cancel', defaultMessage: 'Cancel' })}
</AlertDialogCancel>
<AlertDialogAction
className="h-8 text-xs bg-destructive text-destructive-foreground hover:bg-destructive/90"
onClick={() => { stopQueue(); setIsStopConfirmOpen(false); }}
>
{formatMessage({ id: 'terminalDashboard.queuePanel.scheduler.stop', defaultMessage: 'Stop' })}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}

11
ccw/frontend/src/hooks/useHistory.ts
View File

@@ -85,9 +85,14 @@ export function useHistory(options: UseHistoryOptions = {}): UseHistoryReturn {
if (filter?.search) {
const searchLower = filter.search.toLowerCase();
executions = executions.filter(
(exec) =>
exec.prompt_preview.toLowerCase().includes(searchLower) ||
exec.tool.toLowerCase().includes(searchLower)
(exec) => {
// Guard against prompt_preview being an object instead of string
const preview = typeof exec.prompt_preview === 'string'
? exec.prompt_preview
: JSON.stringify(exec.prompt_preview);
return preview.toLowerCase().includes(searchLower) ||
exec.tool.toLowerCase().includes(searchLower);
}
);
}

127
ccw/frontend/src/hooks/useNativeSessions.ts Normal file
View File

@@ -0,0 +1,127 @@
// ========================================
// useNativeSessions Hook
// ========================================
// TanStack Query hook for native CLI sessions list
import React from 'react';
import { useQuery } from '@tanstack/react-query';
import {
fetchNativeSessions,
type NativeSessionListItem,
type NativeSessionsListResponse,
} from '../lib/api';
import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
import { workspaceQueryKeys } from '@/lib/queryKeys';
// ========== Constants ==========
const STALE_TIME = 30 * 1000;
const GC_TIME = 5 * 60 * 1000;
// ========== Types ==========
export type NativeTool = 'gemini' | 'qwen' | 'codex' | 'claude' | 'opencode';
export interface UseNativeSessionsOptions {
/** Filter by tool type */
tool?: NativeTool;
/** Override default stale time (ms) */
staleTime?: number;
/** Override default gc time (ms) */
gcTime?: number;
/** Enable/disable the query */
enabled?: boolean;
}
export interface ByToolRecord {
[tool: string]: NativeSessionListItem[];
}
export interface UseNativeSessionsReturn {
/** All sessions data */
sessions: NativeSessionListItem[];
/** Sessions grouped by tool */
byTool: ByToolRecord;
/** Total count from API */
count: number;
/** Loading state for initial fetch */
isLoading: boolean;
/** Fetching state (initial or refetch) */
isFetching: boolean;
/** Error object if query failed */
error: Error | null;
/** Manually refetch data */
refetch: () => Promise<void>;
}
// ========== Helper Functions ==========
/**
* Group sessions by tool type
*/
function groupByTool(sessions: NativeSessionListItem[]): ByToolRecord {
return sessions.reduce<ByToolRecord>((acc, session) => {
const tool = session.tool;
if (!acc[tool]) {
acc[tool] = [];
}
acc[tool].push(session);
return acc;
}, {});
}
// ========== Hook ==========
/**
* Hook for fetching native CLI sessions list
*
* @example
* ```tsx
* const { sessions, byTool, isLoading } = useNativeSessions();
* const geminiSessions = byTool['gemini'] ?? [];
* ```
*
* @example
* ```tsx
* // Filter by tool
* const { sessions } = useNativeSessions({ tool: 'gemini' });
* ```
*/
export function useNativeSessions(
options: UseNativeSessionsOptions = {}
): UseNativeSessionsReturn {
const { tool, staleTime = STALE_TIME, gcTime = GC_TIME, enabled = true } = options;
const projectPath = useWorkflowStore(selectProjectPath);
const query = useQuery<NativeSessionsListResponse>({
queryKey: workspaceQueryKeys.nativeSessionsList(projectPath, tool),
queryFn: () => fetchNativeSessions(tool, projectPath),
staleTime,
gcTime,
enabled,
refetchOnWindowFocus: false,
retry: 2,
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
});
// Memoize sessions and byTool calculations
const { sessions, byTool } = React.useMemo(() => {
const sessions = query.data?.sessions ?? [];
const byTool = groupByTool(sessions);
return { sessions, byTool };
}, [query.data]);
const refetch = async () => {
await query.refetch();
};
return {
sessions,
byTool,
count: query.data?.count ?? 0,
isLoading: query.isLoading,
isFetching: query.isFetching,
error: query.error,
refetch,
};
}

9
ccw/frontend/src/lib/api.ts
View File

@@ -2100,7 +2100,8 @@ export interface CliExecution {
tool: 'gemini' | 'qwen' | 'codex' | string;
mode?: string;
status: 'success' | 'error' | 'timeout';
prompt_preview: string;
// Backend may return string or object {text: string} for legacy data
prompt_preview: string | { text: string } | Record<string, unknown>;
timestamp: string;
duration_ms: number;
sourceDir?: string;
@@ -2233,7 +2234,8 @@ export interface ConversationRecord {
*/
export interface ConversationTurn {
turn: number;
prompt: string;
// Backend may return string or object {text: string} for legacy data
prompt: string | { text: string } | Record<string, unknown>;
output: {
stdout: string;
stderr?: string;
@@ -2270,7 +2272,8 @@ export interface NativeSessionTurn {
turnNumber: number;
timestamp: string;
role: 'user' | 'assistant';
content: string;
// Backend may return string or object {text: string} for legacy data
content: string | { text: string } | Record<string, unknown>;
thoughts?: string[];
toolCalls?: NativeToolCall[];
tokens?: NativeTokenInfo;

171
ccw/frontend/src/lib/cli-tool-theme.ts Normal file
View File

@@ -0,0 +1,171 @@
// ========================================
// CLI Tool Theme Configuration
// ========================================
// Centralized theme configuration for CLI tools (gemini, codex, qwen, opencode)
// Used for Badge variants, icons, and color theming across components
import type { LucideIcon } from 'lucide-react';
import { Sparkles, Code, Brain, Terminal, Cpu } from 'lucide-react';
// ========== Types ==========
export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info' | 'destructive';
export interface CliToolTheme {
/** Badge variant for UI components */
variant: BadgeVariant;
/** Lucide icon name */
icon: LucideIcon;
/** Color theme (used for CSS classes) */
color: 'blue' | 'green' | 'amber' | 'gray' | 'purple';
/** Human-readable display name */
displayName: string;
/** Short label for compact display */
shortLabel: string;
}
// ========== Tool Theme Configuration ==========
/**
* Theme configuration for each supported CLI tool
* Maps tool ID to visual theme properties
*/
export const CLI_TOOL_THEMES: Record<string, CliToolTheme> = {
gemini: {
variant: 'info',
icon: Sparkles,
color: 'blue',
displayName: 'Gemini',
shortLabel: 'GEM',
},
codex: {
variant: 'success',
icon: Code,
color: 'green',
displayName: 'Codex',
shortLabel: 'CDX',
},
qwen: {
variant: 'warning',
icon: Brain,
color: 'amber',
displayName: 'Qwen',
shortLabel: 'QWN',
},
opencode: {
variant: 'secondary',
icon: Terminal,
color: 'gray',
displayName: 'OpenCode',
shortLabel: 'OPC',
},
claude: {
variant: 'default',
icon: Cpu,
color: 'purple',
displayName: 'Claude',
shortLabel: 'CLD',
},
};
/**
* Default theme for unknown tools
*/
export const DEFAULT_TOOL_THEME: CliToolTheme = {
variant: 'secondary',
icon: Terminal,
color: 'gray',
displayName: 'CLI',
shortLabel: 'CLI',
};
// ========== Helper Functions ==========
/**
* Get theme configuration for a CLI tool
* Falls back to default theme for unknown tools
*
* @param tool - Tool identifier (e.g., 'gemini', 'codex', 'qwen')
* @returns Theme configuration for the tool
*/
export function getToolTheme(tool: string): CliToolTheme {
const normalizedTool = tool.toLowerCase().trim();
return CLI_TOOL_THEMES[normalizedTool] || DEFAULT_TOOL_THEME;
}
/**
* Get Badge variant for a CLI tool
* Used for tool badges in UI components
*
* @param tool - Tool identifier
* @returns Badge variant
*/
export function getToolVariant(tool: string): BadgeVariant {
return getToolTheme(tool).variant;
}
/**
* Get icon component for a CLI tool
*
* @param tool - Tool identifier
* @returns Lucide icon component
*/
export function getToolIcon(tool: string): LucideIcon {
return getToolTheme(tool).icon;
}
/**
* Get color class for a CLI tool
* Returns a Tailwind CSS color class prefix
*
* @param tool - Tool identifier
* @returns Color class prefix (e.g., 'text-blue-500')
*/
export function getToolColorClass(tool: string, shade: number = 500): string {
const color = getToolTheme(tool).color;
const colorMap: Record<string, string> = {
blue: 'blue',
green: 'green',
amber: 'amber',
gray: 'gray',
purple: 'purple',
};
return `text-${colorMap[color] || 'gray'}-${shade}`;
}
/**
* Get background color class for a CLI tool
*
* @param tool - Tool identifier
* @returns Background color class (e.g., 'bg-blue-100')
*/
export function getToolBgClass(tool: string, shade: number = 100): string {
const color = getToolTheme(tool).color;
const colorMap: Record<string, string> = {
blue: 'blue',
green: 'green',
amber: 'amber',
gray: 'gray',
purple: 'purple',
};
return `bg-${colorMap[color] || 'gray'}-${shade}`;
}
/**
* Check if a tool is a known CLI tool
*
* @param tool - Tool identifier
* @returns Whether the tool is known
*/
export function isKnownTool(tool: string): boolean {
return tool.toLowerCase().trim() in CLI_TOOL_THEMES;
}
/**
* Get all known tool identifiers
*
* @returns Array of known tool IDs
*/
export function getKnownTools(): string[] {
return Object.keys(CLI_TOOL_THEMES);
}

5
ccw/frontend/src/lib/queryKeys.ts
View File

@@ -118,6 +118,11 @@ export const workspaceQueryKeys = {
cliExecutionDetail: (projectPath: string, executionId: string) =>
[...workspaceQueryKeys.cliHistory(projectPath), 'detail', executionId] as const,
// ========== Native Sessions ==========
nativeSessions: (projectPath: string) => [...workspaceQueryKeys.all(projectPath), 'nativeSessions'] as const,
nativeSessionsList: (projectPath: string, tool?: string) =>
[...workspaceQueryKeys.nativeSessions(projectPath), 'list', tool] as const,
// ========== Audit ==========
audit: (projectPath: string) => [...workspaceQueryKeys.all(projectPath), 'audit'] as const,
cliSessionAudit: (

11
ccw/frontend/src/locales/en/history.json
View File

@@ -3,7 +3,8 @@
"description": "View and manage your CLI execution history",
"tabs": {
"executions": "Executions",
"observability": "Session Audit"
"observability": "Session Audit",
"nativeSessions": "Native Sessions"
},
"searchPlaceholder": "Search executions...",
"filterAllTools": "All Tools",
@@ -33,5 +34,13 @@
"message": "CLI execution history will appear here when you run CLI commands.",
"filtered": "No Matching Results",
"filteredMessage": "No executions match your current filter. Try adjusting your search or filter."
},
"nativeSessions": {
"count": "{count} native sessions",
"sessions": "sessions",
"empty": {
"title": "No Native Sessions",
"message": "Native CLI sessions from Gemini, Codex, Qwen, etc. will appear here."
}
}
}

37
ccw/frontend/src/locales/en/terminal-dashboard.json
View File

@@ -48,6 +48,11 @@
"issuePanel": {
"title": "Issues",
"sendToQueue": "Send to Queue",
"addToQueue": "Queue",
"addToQueueHint": "Add selected issues to the execution queue",
"addedToQueue": "Queued!",
"addToQueueFailed": "Failed to add to queue",
"queueModeHint": "Execution mode for queued items",
"noIssues": "No issues found",
"noIssuesDesc": "Issues will appear here when discovered",
"error": "Failed to load issues"
@@ -59,13 +64,35 @@
"error": "Failed to load queue",
"order": "#{order}",
"dependsOn": "Depends on: {deps}",
"blockedBy": "Blocked by: {deps}",
"status": {
"pending": "Pending",
"queued": "Queued",
"ready": "Ready",
"blocked": "Blocked",
"executing": "Executing",
"completed": "Completed",
"failed": "Failed",
"blocked": "Blocked"
"cancelled": "Cancelled",
"skipped": "Skipped"
},
"scheduler": {
"start": "Start",
"pause": "Pause",
"stop": "Stop",
"status": {
"idle": "Idle",
"running": "Running",
"paused": "Paused",
"stopping": "Stopping",
"completed": "Completed",
"failed": "Failed"
},
"progress": "{percent}%",
"concurrency": "Concurrency",
"concurrencyLabel": "Max",
"stopConfirmTitle": "Stop Queue?",
"stopConfirmMessage": "Executing tasks will finish, but no new tasks will be started. Pending items will remain in the queue."
}
},
"toolbar": {
@@ -81,7 +108,13 @@
"launchCli": "New Session",
"launchCliHint": "Click to configure and create a new CLI session",
"fullscreen": "Fullscreen",
"orchestrator": "Orchestrator"
"orchestrator": "Orchestrator",
"scheduler": "Scheduler",
"executionMonitor": "Execution Monitor"
},
"schedulerPanel": {
"sessionPool": "Session Pool",
"noSessions": "No active sessions"
},
"orchestratorPanel": {
"noPlans": "No active orchestrations",

11
ccw/frontend/src/locales/zh/history.json
View File

@@ -3,7 +3,8 @@
"description": "查看和管理 CLI 执行历史",
"tabs": {
"executions": "执行历史",
"observability": "会话审计"
"observability": "会话审计",
"nativeSessions": "原生会话"
},
"searchPlaceholder": "搜索执行记录...",
"filterAllTools": "全部工具",
@@ -33,5 +34,13 @@
"message": "运行 CLI 命令后，执行历史将显示在这里。",
"filtered": "没有匹配结果",
"filteredMessage": "没有匹配当前筛选条件的执行记录。请尝试调整搜索或筛选条件。"
},
"nativeSessions": {
"count": "{count} 个原生会话",
"sessions": "个会话",
"empty": {
"title": "无原生会话",
"message": "来自 Gemini、Codex、Qwen 等的原生 CLI 会话将显示在这里。"
}
}
}

37
ccw/frontend/src/locales/zh/terminal-dashboard.json
View File

@@ -48,6 +48,11 @@
"issuePanel": {
"title": "问题",
"sendToQueue": "发送到队列",
"addToQueue": "入队",
"addToQueueHint": "将选中的问题添加到执行队列",
"addedToQueue": "已入队!",
"addToQueueFailed": "添加到队列失败",
"queueModeHint": "队列项的执行模式",
"noIssues": "暂无问题",
"noIssuesDesc": "发现问题时将在此显示",
"error": "加载问题失败"
@@ -59,13 +64,35 @@
"error": "加载队列失败",
"order": "#{order}",
"dependsOn": "依赖: {deps}",
"blockedBy": "阻塞于: {deps}",
"status": {
"pending": "等待中",
"queued": "排队中",
"ready": "就绪",
"blocked": "已阻塞",
"executing": "执行中",
"completed": "已完成",
"failed": "已失败",
"blocked": "已阻塞"
"cancelled": "已取消",
"skipped": "已跳过"
},
"scheduler": {
"start": "启动",
"pause": "暂停",
"stop": "停止",
"status": {
"idle": "空闲",
"running": "运行中",
"paused": "已暂停",
"stopping": "停止中",
"completed": "已完成",
"failed": "已失败"
},
"progress": "{percent}%",
"concurrency": "并发数",
"concurrencyLabel": "上限",
"stopConfirmTitle": "停止队列？",
"stopConfirmMessage": "执行中的任务将继续完成，但不会启动新任务。待处理项将保留在队列中。"
}
},
"toolbar": {
@@ -81,7 +108,13 @@
"launchCli": "新建会话",
"launchCliHint": "点击配置并创建新的 CLI 会话",
"fullscreen": "全屏",
"orchestrator": "编排器"
"orchestrator": "编排器",
"scheduler": "调度器",
"executionMonitor": "执行监控"
},
"schedulerPanel": {
"sessionPool": "会话池",
"noSessions": "无活跃会话"
},
"orchestratorPanel": {
"noPlans": "没有活跃的编排任务",

280
ccw/frontend/src/pages/HistoryPage.tsx
View File

@@ -16,10 +16,16 @@ import {
X,
Maximize2,
Minimize2,
ChevronDown,
ChevronRight,
FileJson,
Clock,
Calendar,
} from 'lucide-react';
import { useAppStore, selectIsImmersiveMode } from '@/stores/appStore';
import { cn } from '@/lib/utils';
import { useHistory } from '@/hooks/useHistory';
import { useNativeSessions } from '@/hooks/useNativeSessions';
import { ConversationCard } from '@/components/shared/ConversationCard';
import { CliStreamPanel } from '@/components/shared/CliStreamPanel';
import { NativeSessionPanel } from '@/components/shared/NativeSessionPanel';
@@ -42,9 +48,55 @@ import {
DropdownMenuSeparator,
DropdownMenuLabel,
} from '@/components/ui/Dropdown';
import type { CliExecution } from '@/lib/api';
import { Badge } from '@/components/ui/Badge';
import type { CliExecution, NativeSessionListItem } from '@/lib/api';
import { getToolVariant } from '@/lib/cli-tool-theme';
type HistoryTab = 'executions' | 'observability';
type HistoryTab = 'executions' | 'observability' | 'native-sessions';
// ========== Date Grouping Helpers ==========
type DateGroup = 'today' | 'yesterday' | 'thisWeek' | 'older';
function getDateGroup(date: Date): DateGroup {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
const weekAgo = new Date(today);
weekAgo.setDate(weekAgo.getDate() - 7);
if (date >= today) return 'today';
if (date >= yesterday) return 'yesterday';
if (date >= weekAgo) return 'thisWeek';
return 'older';
}
function groupSessionsByDate(sessions: NativeSessionListItem[]): Map<DateGroup, NativeSessionListItem[]> {
const groups = new Map<DateGroup, NativeSessionListItem[]>([
['today', []],
['yesterday', []],
['thisWeek', []],
['older', []],
]);
sessions.forEach((session) => {
const date = new Date(session.updatedAt);
const group = getDateGroup(date);
groups.get(group)?.push(session);
});
return groups;
}
const dateGroupOrder: DateGroup[] = ['today', 'yesterday', 'thisWeek', 'older'];
const dateGroupLabels: Record<DateGroup, string> = {
today: '今天',
yesterday: '昨天',
thisWeek: '本周',
older: '更早',
};
/**
* HistoryPage component - Display CLI execution history
@@ -78,6 +130,40 @@ export function HistoryPage() {
filter: { search: searchQuery || undefined, tool: toolFilter },
});
// Native sessions hook
const {
sessions: nativeSessions,
byTool: nativeSessionsByTool,
isLoading: isLoadingNativeSessions,
isFetching: isFetchingNativeSessions,
error: nativeSessionsError,
refetch: refetchNativeSessions,
} = useNativeSessions();
// Track expanded tool groups in native sessions tab
const [expandedTools, setExpandedTools] = React.useState<Set<string>>(new Set());
const toggleToolExpand = (tool: string) => {
setExpandedTools((prev) => {
const next = new Set(prev);
if (next.has(tool)) {
next.delete(tool);
} else {
next.add(tool);
}
return next;
});
};
// Native session click handler - opens NativeSessionPanel
const handleNativeSessionClick = (session: NativeSessionListItem) => {
setNativeExecutionId(session.id);
setIsNativePanelOpen(true);
};
// Tool order for display
const toolOrder = ['gemini', 'qwen', 'codex', 'claude', 'opencode'] as const;
const tools = React.useMemo(() => {
const toolSet = new Set(executions.map((e) => e.tool));
return Array.from(toolSet).sort();
@@ -197,6 +283,19 @@ export function HistoryPage() {
>
{formatMessage({ id: 'history.tabs.observability' })}
</Button>
<Button
variant="ghost"
className={cn(
"border-b-2 rounded-none h-11 px-4",
currentTab === 'native-sessions'
? "border-primary text-primary"
: "border-transparent text-muted-foreground hover:text-foreground"
)}
onClick={() => setCurrentTab('native-sessions')}
>
<FileJson className="h-4 w-4 mr-2" />
{formatMessage({ id: 'history.tabs.nativeSessions' })}
</Button>
</div>
{/* Tab Content */}
@@ -354,6 +453,183 @@ export function HistoryPage() {
</div>
)}
{currentTab === 'native-sessions' && (
<div className="space-y-4">
{/* Header with refresh */}
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">
{formatMessage(
{ id: 'history.nativeSessions.count' },
{ count: nativeSessions.length }
)}
</p>
<Button
variant="outline"
size="sm"
onClick={() => refetchNativeSessions()}
disabled={isFetchingNativeSessions}
>
<RefreshCw className={cn('h-4 w-4 mr-2', isFetchingNativeSessions && 'animate-spin')} />
{formatMessage({ id: 'common.actions.refresh' })}
</Button>
</div>
{/* Error alert */}
{nativeSessionsError && (
<div className="flex items-center gap-2 p-4 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive">
<Terminal className="h-5 w-5 flex-shrink-0" />
<div className="flex-1">
<p className="text-sm font-medium">{formatMessage({ id: 'common.errors.loadFailed' })}</p>
<p className="text-xs mt-0.5">{nativeSessionsError.message}</p>
</div>
<Button variant="outline" size="sm" onClick={() => refetchNativeSessions()}>
{formatMessage({ id: 'common.actions.retry' })}
</Button>
</div>
)}
{/* Loading state */}
{isLoadingNativeSessions ? (
<div className="grid gap-3">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-20 rounded-lg bg-muted animate-pulse" />
))}
</div>
) : nativeSessions.length === 0 ? (
/* Empty state */
<div className="flex flex-col items-center justify-center py-16 px-4">
<FileJson className="h-12 w-12 text-muted-foreground mb-4" />
<h3 className="text-lg font-medium text-foreground mb-2">
{formatMessage({ id: 'history.nativeSessions.empty.title' })}
</h3>
<p className="text-sm text-muted-foreground text-center">
{formatMessage({ id: 'history.nativeSessions.empty.message' })}
</p>
</div>
) : (
/* Sessions grouped by tool */
<div className="space-y-2">
{toolOrder
.filter((tool) => nativeSessionsByTool[tool]?.length > 0)
.map((tool) => {
const sessions = nativeSessionsByTool[tool];
const isExpanded = expandedTools.has(tool);
return (
<div key={tool} className="border rounded-lg">
{/* Tool header - clickable to expand/collapse */}
<button
className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/50 transition-colors"
onClick={() => toggleToolExpand(tool)}
>
<div className="flex items-center gap-3">
{isExpanded ? (
<ChevronDown className="h-4 w-4 text-muted-foreground" />
) : (
<ChevronRight className="h-4 w-4 text-muted-foreground" />
)}
<Badge variant={getToolVariant(tool)}>
{tool.toUpperCase()}
</Badge>
<span className="text-sm text-muted-foreground">
{sessions.length} {formatMessage({ id: 'history.nativeSessions.sessions' })}
</span>
</div>
</button>
{/* Sessions list */}
{isExpanded && (
<div className="border-t divide-y">
{sessions.map((session) => (
<button
key={session.id}
className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors text-left"
onClick={() => handleNativeSessionClick(session)}
>
<div className="flex items-center gap-3 min-w-0">
<span className="font-mono text-sm truncate max-w-48" title={session.id}>
{session.id.length > 24 ? session.id.slice(0, 24) + '...' : session.id}
</span>
{session.title && (
<span className="text-sm text-muted-foreground truncate max-w-64">
{session.title}
</span>
)}
</div>
<div className="flex items-center gap-3 text-xs text-muted-foreground shrink-0">
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
{new Date(session.updatedAt).toLocaleString()}
</span>
</div>
</button>
))}
</div>
)}
</div>
);
})}
{/* Other tools not in predefined order */}
{Object.keys(nativeSessionsByTool)
.filter((tool) => !toolOrder.includes(tool as typeof toolOrder[number]))
.sort()
.map((tool) => {
const sessions = nativeSessionsByTool[tool];
const isExpanded = expandedTools.has(tool);
return (
<div key={tool} className="border rounded-lg">
<button
className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/50 transition-colors"
onClick={() => toggleToolExpand(tool)}
>
<div className="flex items-center gap-3">
{isExpanded ? (
<ChevronDown className="h-4 w-4 text-muted-foreground" />
) : (
<ChevronRight className="h-4 w-4 text-muted-foreground" />
)}
<Badge variant="secondary">
{tool.toUpperCase()}
</Badge>
<span className="text-sm text-muted-foreground">
{sessions.length} {formatMessage({ id: 'history.nativeSessions.sessions' })}
</span>
</div>
</button>
{isExpanded && (
<div className="border-t divide-y">
{sessions.map((session) => (
<button
key={session.id}
className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/30 transition-colors text-left"
onClick={() => handleNativeSessionClick(session)}
>
<div className="flex items-center gap-3 min-w-0">
<span className="font-mono text-sm truncate max-w-48" title={session.id}>
{session.id.length > 24 ? session.id.slice(0, 24) + '...' : session.id}
</span>
{session.title && (
<span className="text-sm text-muted-foreground truncate max-w-64">
{session.title}
</span>
)}
</div>
<div className="flex items-center gap-3 text-xs text-muted-foreground shrink-0">
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
{new Date(session.updatedAt).toLocaleString()}
</span>
</div>
</button>
))}
</div>
)}
</div>
);
})}
</div>
)}
</div>
)}
{/* CLI Stream Panel */}
<CliStreamPanel
executionId={selectedExecution || ''}

26
ccw/frontend/src/pages/TerminalDashboardPage.tsx
View File

@@ -20,6 +20,8 @@ import { FloatingPanel } from '@/components/terminal-dashboard/FloatingPanel';
import { SessionGroupTree } from '@/components/terminal-dashboard/SessionGroupTree';
import { IssuePanel } from '@/components/terminal-dashboard/IssuePanel';
import { QueuePanel } from '@/components/terminal-dashboard/QueuePanel';
import { QueueListColumn } from '@/components/terminal-dashboard/QueueListColumn';
import { SchedulerPanel } from '@/components/terminal-dashboard/SchedulerPanel';
import { InspectorContent } from '@/components/terminal-dashboard/BottomInspector';
import { ExecutionMonitorPanel } from '@/components/terminal-dashboard/ExecutionMonitorPanel';
import { FileSidebarPanel } from '@/components/terminal-dashboard/FileSidebarPanel';
@@ -105,9 +107,19 @@ export function TerminalDashboardPage() {
onClose={closePanel}
title={formatMessage({ id: 'terminalDashboard.toolbar.issues' })}
side="left"
width={380}
width={700}
>
<IssuePanel />
<div className="flex h-full">
<div className="flex-1 min-w-0 border-r border-border">
<IssuePanel />
</div>
<div className="flex-1 min-w-0 flex flex-col">
<div className="px-3 py-2 border-b border-border shrink-0">
<h3 className="text-sm font-semibold">{formatMessage({ id: 'terminalDashboard.toolbar.queue' })}</h3>
</div>
<QueueListColumn />
</div>
</div>
</FloatingPanel>
{featureFlags.dashboardQueuePanelEnabled && (
@@ -145,6 +157,16 @@ export function TerminalDashboardPage() {
<ExecutionMonitorPanel />
</FloatingPanel>
)}
<FloatingPanel
isOpen={activePanel === 'scheduler'}
onClose={closePanel}
title={formatMessage({ id: 'terminalDashboard.toolbar.scheduler', defaultMessage: 'Scheduler' })}
side="right"
width={340}
>
<SchedulerPanel />
</FloatingPanel>
</AssociationHighlightProvider>
</div>
);

43
ccw/frontend/src/stores/cliStreamStore.ts
View File

@@ -78,6 +78,7 @@ interface CliStreamState extends BlockCacheState {
executions: Record<string, CliExecutionState>;
currentExecutionId: string | null;
userClosedExecutions: Set<string>; // Track executions closed by user
deduplicationWindows: Record<string, string[]>; // Rolling hash window per execution
// Legacy methods
addOutput: (executionId: string, line: CliOutputLine) => void;
@@ -106,8 +107,26 @@ interface CliStreamState extends BlockCacheState {
*/
const MAX_OUTPUT_LINES = 5000;
/**
* Size of rolling deduplication window per execution
* Lines with identical content within this window will be skipped
*/
const DEDUPLICATION_WINDOW_SIZE = 100;
// ========== Helper Functions ==========
/**
* Simple hash function for content deduplication
* Uses djb2 algorithm - fast and good enough for deduplication
*/
function simpleHash(str: string): string {
let hash = 5381;
for (let i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i);
}
return hash.toString(36);
}
/**
* Parse tool call metadata from content
* Expected format: "[Tool] toolName(args)"
@@ -325,12 +344,25 @@ export const useCliStreamStore = create<CliStreamState>()(
executions: {},
currentExecutionId: null,
userClosedExecutions: new Set<string>(),
deduplicationWindows: {},
// Block cache state
blocks: {},
lastUpdate: {},
addOutput: (executionId: string, line: CliOutputLine) => {
// Content-based deduplication using rolling hash window
const contentHash = simpleHash(line.content);
const currentWindow = get().deduplicationWindows[executionId] || [];
// Skip if duplicate detected (same hash in recent window)
if (currentWindow.includes(contentHash)) {
return; // Skip duplicate content
}
// Update deduplication window
const newWindow = [...currentWindow, contentHash].slice(-DEDUPLICATION_WINDOW_SIZE);
set((state) => {
const current = state.outputs[executionId] || [];
const updated = [...current, line];
@@ -342,6 +374,10 @@ export const useCliStreamStore = create<CliStreamState>()(
...state.outputs,
[executionId]: updated.slice(-MAX_OUTPUT_LINES),
},
deduplicationWindows: {
...state.deduplicationWindows,
[executionId]: newWindow,
},
};
}
@@ -350,6 +386,10 @@ export const useCliStreamStore = create<CliStreamState>()(
...state.outputs,
[executionId]: updated,
},
deduplicationWindows: {
...state.deduplicationWindows,
[executionId]: newWindow,
},
};
}, false, 'cliStream/addOutput');
@@ -425,13 +465,16 @@ export const useCliStreamStore = create<CliStreamState>()(
const newExecutions = { ...state.executions };
const newBlocks = { ...state.blocks };
const newLastUpdate = { ...state.lastUpdate };
const newDeduplicationWindows = { ...state.deduplicationWindows };
delete newExecutions[executionId];
delete newBlocks[executionId];
delete newLastUpdate[executionId];
delete newDeduplicationWindows[executionId];
return {
executions: newExecutions,
blocks: newBlocks,
lastUpdate: newLastUpdate,
deduplicationWindows: newDeduplicationWindows,
currentExecutionId: state.currentExecutionId === executionId ? null : state.currentExecutionId,
};
}, false, 'cliStream/removeExecution');

351
ccw/frontend/src/stores/queueSchedulerStore.ts Normal file
View File

@@ -0,0 +1,351 @@
// ========================================
// Queue Scheduler Store
// ========================================
// Zustand store for queue scheduler state management.
// Handles WebSocket message dispatch, API actions, and provides
// granular selectors for efficient React re-renders.
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import type {
QueueSchedulerStatus,
QueueSchedulerConfig,
QueueItem,
QueueSchedulerState,
QueueWSMessage,
SessionBinding,
} from '../types/queue-frontend-types';
// ========== Default Config ==========
const DEFAULT_CONFIG: QueueSchedulerConfig = {
maxConcurrentSessions: 2,
sessionIdleTimeoutMs: 60_000,
resumeKeySessionBindingTimeoutMs: 300_000,
};
// ========== Store State Interface ==========
/**
* Store state extends the wire format QueueSchedulerState with
* nullable fields for "not yet loaded" state.
*/
interface QueueSchedulerStoreState {
status: QueueSchedulerStatus;
items: QueueItem[];
sessionPool: Record<string, SessionBinding>;
config: QueueSchedulerConfig;
currentConcurrency: number;
lastActivityAt: string | null;
error: string | null;
}
// ========== Actions Interface ==========
interface QueueSchedulerActions {
/** Dispatch a WebSocket message to update store state */
handleSchedulerMessage: (msg: QueueWSMessage) => void;
/** Fetch initial state from GET /api/queue/scheduler/state */
loadInitialState: () => Promise<void>;
/** Submit items to the queue via POST /api/queue/execute (auto-starts if idle) */
submitItems: (items: QueueItem[]) => Promise<void>;
/** Start the queue scheduler via POST /api/queue/scheduler/start */
startQueue: (items?: QueueItem[]) => Promise<void>;
/** Pause the queue scheduler via POST /api/queue/scheduler/pause */
pauseQueue: () => Promise<void>;
/** Stop the queue scheduler via POST /api/queue/scheduler/stop */
stopQueue: () => Promise<void>;
/** Update scheduler config via POST /api/queue/scheduler/config */
updateConfig: (config: Partial<QueueSchedulerConfig>) => Promise<void>;
}
export type QueueSchedulerStore = QueueSchedulerStoreState & QueueSchedulerActions;
// ========== Initial State ==========
const initialState: QueueSchedulerStoreState = {
status: 'idle',
items: [],
sessionPool: {},
config: DEFAULT_CONFIG,
currentConcurrency: 0,
lastActivityAt: null,
error: null,
};
// ========== Store ==========
export const useQueueSchedulerStore = create<QueueSchedulerStore>()(
devtools(
(set) => ({
...initialState,
// ========== WebSocket Message Handler ==========
handleSchedulerMessage: (msg: QueueWSMessage) => {
switch (msg.type) {
case 'QUEUE_SCHEDULER_STATE_UPDATE':
// Backend sends full state snapshot
set(
{
status: msg.state.status,
items: msg.state.items,
sessionPool: msg.state.sessionPool,
config: msg.state.config,
currentConcurrency: msg.state.currentConcurrency,
lastActivityAt: msg.state.lastActivityAt,
error: msg.state.error ?? null,
},
false,
'handleSchedulerMessage/QUEUE_SCHEDULER_STATE_UPDATE'
);
break;
case 'QUEUE_ITEM_ADDED':
set(
(state) => ({
items: [...state.items, msg.item],
}),
false,
'handleSchedulerMessage/QUEUE_ITEM_ADDED'
);
break;
case 'QUEUE_ITEM_UPDATED':
set(
(state) => ({
items: state.items.map((item) =>
item.item_id === msg.item.item_id ? msg.item : item
),
}),
false,
'handleSchedulerMessage/QUEUE_ITEM_UPDATED'
);
break;
case 'QUEUE_ITEM_REMOVED':
set(
(state) => ({
items: state.items.filter((item) => item.item_id !== msg.item_id),
}),
false,
'handleSchedulerMessage/QUEUE_ITEM_REMOVED'
);
break;
case 'QUEUE_SCHEDULER_CONFIG_UPDATED':
set(
{
config: msg.config,
},
false,
'handleSchedulerMessage/QUEUE_SCHEDULER_CONFIG_UPDATED'
);
break;
// No default - all 5 message types are handled exhaustively
}
},
// ========== API Actions ==========
submitItems: async (items: QueueItem[]) => {
try {
const response = await fetch('/api/queue/execute', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items }),
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
throw new Error(body.error || body.message || response.statusText);
}
// State will be updated via WebSocket broadcast from backend
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] submitItems error:', message);
set({ error: message }, false, 'submitItems/error');
throw error;
}
},
loadInitialState: async () => {
try {
const response = await fetch('/api/queue/scheduler/state', {
credentials: 'same-origin',
});
if (!response.ok) {
throw new Error(`Failed to load scheduler state: ${response.statusText}`);
}
const data: QueueSchedulerState = await response.json();
set(
{
status: data.status,
items: data.items,
sessionPool: data.sessionPool,
config: data.config,
currentConcurrency: data.currentConcurrency,
lastActivityAt: data.lastActivityAt,
error: data.error ?? null,
},
false,
'loadInitialState'
);
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] loadInitialState error:', message);
set({ error: message }, false, 'loadInitialState/error');
}
},
startQueue: async (items?: QueueItem[]) => {
try {
const body = items ? { items } : {};
const response = await fetch('/api/queue/scheduler/start', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
throw new Error(body.error || body.message || response.statusText);
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] startQueue error:', message);
set({ error: message }, false, 'startQueue/error');
}
},
pauseQueue: async () => {
try {
const response = await fetch('/api/queue/scheduler/pause', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
throw new Error(body.error || body.message || response.statusText);
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] pauseQueue error:', message);
set({ error: message }, false, 'pauseQueue/error');
}
},
stopQueue: async () => {
try {
const response = await fetch('/api/queue/scheduler/stop', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
throw new Error(body.error || body.message || response.statusText);
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] stopQueue error:', message);
set({ error: message }, false, 'stopQueue/error');
}
},
updateConfig: async (config: Partial<QueueSchedulerConfig>) => {
try {
const response = await fetch('/api/queue/scheduler/config', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config),
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
throw new Error(body.error || body.message || response.statusText);
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('[QueueScheduler] updateConfig error:', message);
set({ error: message }, false, 'updateConfig/error');
}
},
}),
{ name: 'QueueSchedulerStore' }
)
);
// ========== Selectors ==========
/** Stable empty array to avoid new references on each call */
const EMPTY_ITEMS: QueueItem[] = [];
/** Select current scheduler status */
export const selectQueueSchedulerStatus = (state: QueueSchedulerStore): QueueSchedulerStatus =>
state.status;
/** Select all queue items */
export const selectQueueItems = (state: QueueSchedulerStore): QueueItem[] =>
state.items;
/**
* Select items that are ready to execute (status 'queued' or 'pending').
* WARNING: Returns new array each call - use with useMemo in components.
*/
export const selectReadyItems = (state: QueueSchedulerStore): QueueItem[] => {
const ready = state.items.filter(
(item) => item.status === 'queued' || item.status === 'pending'
);
return ready.length === 0 ? EMPTY_ITEMS : ready;
};
/**
* Select items that are blocked (status 'blocked').
* WARNING: Returns new array each call - use with useMemo in components.
*/
export const selectBlockedItems = (state: QueueSchedulerStore): QueueItem[] => {
const blocked = state.items.filter((item) => item.status === 'blocked');
return blocked.length === 0 ? EMPTY_ITEMS : blocked;
};
/**
* Select items currently executing (status 'executing').
* WARNING: Returns new array each call - use with useMemo in components.
*/
export const selectExecutingItems = (state: QueueSchedulerStore): QueueItem[] => {
const executing = state.items.filter((item) => item.status === 'executing');
return executing.length === 0 ? EMPTY_ITEMS : executing;
};
/**
* Calculate overall scheduler progress as a percentage (0-100).
* Progress = (completed + failed) / total * 100.
* Returns 0 when there are no items.
*/
export const selectSchedulerProgress = (state: QueueSchedulerStore): number => {
const total = state.items.length;
if (total === 0) return 0;
const terminal = state.items.filter(
(item) => item.status === 'completed' || item.status === 'failed'
).length;
return Math.round((terminal / total) * 100);
};
/** Select scheduler config */
export const selectSchedulerConfig = (state: QueueSchedulerStore): QueueSchedulerConfig =>
state.config;
/** Select session pool */
export const selectSessionPool = (state: QueueSchedulerStore): Record<string, SessionBinding> =>
state.sessionPool;
/** Select current concurrency */
export const selectCurrentConcurrency = (state: QueueSchedulerStore): number =>
state.currentConcurrency;
/** Select scheduler error */
export const selectSchedulerError = (state: QueueSchedulerStore): string | null =>
state.error;

96
ccw/frontend/src/test/i18n.tsx
View File

@@ -283,6 +283,54 @@ const mockMessages: Record<Locale, Record<string, string>> = {
'codexlens.reranker.selectBackend': 'Select backend...',
'codexlens.reranker.selectModel': 'Select model...',
'codexlens.reranker.selectProvider': 'Select provider...',
// MCP - CCW Tools
'mcp.ccw.title': 'CCW MCP Server',
'mcp.ccw.description': 'Configure CCW MCP tools and paths',
'mcp.ccw.status.installed': 'Installed',
'mcp.ccw.status.notInstalled': 'Not installed',
'mcp.ccw.status.special': 'Special',
'mcp.ccw.actions.enableAll': 'Enable All',
'mcp.ccw.actions.disableAll': 'Disable All',
'mcp.ccw.actions.saveConfig': 'Save Configuration',
'mcp.ccw.actions.saving': 'Saving...',
'mcp.ccw.actions.installing': 'Installing...',
'mcp.ccw.actions.uninstall': 'Uninstall',
'mcp.ccw.actions.uninstalling': 'Uninstalling...',
'mcp.ccw.actions.uninstallConfirm': 'Are you sure you want to uninstall?',
'mcp.ccw.actions.uninstallScopeConfirm': 'Are you sure you want to uninstall from this scope?',
'mcp.ccw.codexNote': 'Codex only supports global installation',
'mcp.ccw.tools.label': 'Tools',
'mcp.ccw.tools.hint': 'Install to edit tools',
'mcp.ccw.tools.core': 'Core',
'mcp.ccw.tools.write_file.name': 'Write File',
'mcp.ccw.tools.write_file.desc': 'Write/create files',
'mcp.ccw.tools.edit_file.name': 'Edit File',
'mcp.ccw.tools.edit_file.desc': 'Edit/replace content',
'mcp.ccw.tools.read_file.name': 'Read File',
'mcp.ccw.tools.read_file.desc': 'Read single file',
'mcp.ccw.tools.read_many_files.name': 'Read Many Files',
'mcp.ccw.tools.read_many_files.desc': 'Read multiple files/dirs',
'mcp.ccw.tools.core_memory.name': 'Core Memory',
'mcp.ccw.tools.core_memory.desc': 'Core memory management',
'mcp.ccw.tools.ask_question.name': 'Ask Question',
'mcp.ccw.tools.ask_question.desc': 'Interactive questions (A2UI)',
'mcp.ccw.tools.smart_search.name': 'Smart Search',
'mcp.ccw.tools.smart_search.desc': 'Intelligent code search',
'mcp.ccw.tools.team_msg.name': 'Team Message',
'mcp.ccw.tools.team_msg.desc': 'Agent team message bus',
'mcp.ccw.paths.label': 'Paths',
'mcp.ccw.paths.projectRoot': 'Project Root',
'mcp.ccw.paths.projectRootPlaceholder': 'e.g. D:\\path\\to\\project',
'mcp.ccw.paths.allowedDirs': 'Allowed Directories',
'mcp.ccw.paths.allowedDirsPlaceholder': 'Comma-separated directories',
'mcp.ccw.paths.allowedDirsHint': 'Separate multiple directories with commas',
'mcp.ccw.paths.enableSandbox': 'Enable Sandbox',
'mcp.ccw.scope.installToGlobal': 'Install to Global',
'mcp.ccw.scope.installToProject': 'Install to Project',
'mcp.ccw.scope.uninstallGlobal': 'Uninstall Global',
'mcp.ccw.scope.uninstallProject': 'Uninstall Project',
'mcp.ccw.feedback.saveSuccess': 'Configuration saved',
'mcp.ccw.feedback.saveError': 'Failed to save configuration',
'navigation.codexlens': 'CodexLens',
},
zh: {
@@ -555,6 +603,54 @@ const mockMessages: Record<Locale, Record<string, string>> = {
'codexlens.reranker.selectBackend': '选择后端...',
'codexlens.reranker.selectModel': '选择模型...',
'codexlens.reranker.selectProvider': '选择提供商...',
// MCP - CCW Tools
'mcp.ccw.title': 'CCW MCP 服务器',
'mcp.ccw.description': '配置 CCW MCP 工具与路径',
'mcp.ccw.status.installed': '已安装',
'mcp.ccw.status.notInstalled': '未安装',
'mcp.ccw.status.special': '特殊',
'mcp.ccw.actions.enableAll': '全选',
'mcp.ccw.actions.disableAll': '全不选',
'mcp.ccw.actions.saveConfig': '保存配置',
'mcp.ccw.actions.saving': '保存中...',
'mcp.ccw.actions.installing': '安装中...',
'mcp.ccw.actions.uninstall': '卸载',
'mcp.ccw.actions.uninstalling': '卸载中...',
'mcp.ccw.actions.uninstallConfirm': '确定要卸载吗？',
'mcp.ccw.actions.uninstallScopeConfirm': '确定要从该作用域卸载吗？',
'mcp.ccw.codexNote': 'Codex 仅支持全局安装',
'mcp.ccw.tools.label': '工具',
'mcp.ccw.tools.hint': '安装后可编辑工具',
'mcp.ccw.tools.core': '核心',
'mcp.ccw.tools.write_file.name': '写入文件',
'mcp.ccw.tools.write_file.desc': '写入/创建文件',
'mcp.ccw.tools.edit_file.name': '编辑文件',
'mcp.ccw.tools.edit_file.desc': '编辑/替换内容',
'mcp.ccw.tools.read_file.name': '读取文件',
'mcp.ccw.tools.read_file.desc': '读取单个文件',
'mcp.ccw.tools.read_many_files.name': '读取多个文件',
'mcp.ccw.tools.read_many_files.desc': '读取多个文件/目录',
'mcp.ccw.tools.core_memory.name': '核心记忆',
'mcp.ccw.tools.core_memory.desc': '核心记忆管理',
'mcp.ccw.tools.ask_question.name': '提问',
'mcp.ccw.tools.ask_question.desc': '交互式问题（A2UI）',
'mcp.ccw.tools.smart_search.name': '智能搜索',
'mcp.ccw.tools.smart_search.desc': '智能代码搜索',
'mcp.ccw.tools.team_msg.name': '团队消息',
'mcp.ccw.tools.team_msg.desc': '代理团队消息总线',
'mcp.ccw.paths.label': '路径',
'mcp.ccw.paths.projectRoot': '项目根目录',
'mcp.ccw.paths.projectRootPlaceholder': '例如：D:\\path\\to\\project',
'mcp.ccw.paths.allowedDirs': '允许目录',
'mcp.ccw.paths.allowedDirsPlaceholder': '用逗号分隔的目录',
'mcp.ccw.paths.allowedDirsHint': '使用逗号分隔多个目录',
'mcp.ccw.paths.enableSandbox': '启用沙箱',
'mcp.ccw.scope.installToGlobal': '安装到全局',
'mcp.ccw.scope.installToProject': '安装到项目',
'mcp.ccw.scope.uninstallGlobal': '卸载全局',
'mcp.ccw.scope.uninstallProject': '卸载项目',
'mcp.ccw.feedback.saveSuccess': '配置已保存',
'mcp.ccw.feedback.saveError': '保存配置失败',
'navigation.codexlens': 'CodexLens',
},
};

201
ccw/frontend/src/types/queue-frontend-types.ts Normal file
View File

@@ -0,0 +1,201 @@
// ========================================
// Queue Scheduler Frontend Types
// ========================================
// Frontend type definitions for the queue scheduling system.
// Mirrors backend queue-types.ts for wire format compatibility.
// ========== Item Status ==========
/**
* Status of a single queue item through its lifecycle.
* Must match backend QueueItemStatus exactly.
*/
export type QueueItemStatus =
| 'pending' // Submitted, awaiting dependency check
| 'queued' // Dependencies met, waiting for session
| 'ready' // Ready for execution
| 'executing' // Running in an allocated CLI session
| 'completed' // Finished successfully
| 'failed' // Finished with error
| 'blocked' // Waiting on depends_on items to complete
| 'cancelled'; // Cancelled by user
// ========== Scheduler Status ==========
/**
* Status of the scheduler service itself.
* Must match backend QueueSchedulerStatus exactly.
*/
export type QueueSchedulerStatus =
| 'idle' // No active queue, waiting for items
| 'running' // Actively processing queue items
| 'paused' // User-paused, no new items dispatched
| 'stopping' // Graceful stop in progress, waiting for executing items
| 'completed' // All items processed successfully
| 'failed'; // Queue terminated due to critical error
// ========== Scheduler Config ==========
/**
* Configuration for the queue scheduler.
* Must match backend QueueSchedulerConfig exactly.
*/
export interface QueueSchedulerConfig {
/** Maximum number of concurrent CLI sessions executing tasks */
maxConcurrentSessions: number;
/** Idle timeout (ms) before releasing a session from the pool */
sessionIdleTimeoutMs: number;
/** Timeout (ms) for resumeKey-to-session binding affinity */
resumeKeySessionBindingTimeoutMs: number;
}
// ========== Queue Item ==========
/**
* A single task item in the execution queue.
* Must match backend QueueItem exactly.
*/
export interface QueueItem {
/** Unique identifier for this queue item */
item_id: string;
/** Reference to the parent issue (if applicable) */
issue_id?: string;
/** Current status of the item */
status: QueueItemStatus;
/** CLI tool to use for execution (e.g., 'gemini', 'claude') */
tool: string;
/** Prompt/instruction to send to the CLI tool */
prompt: string;
/** Execution mode */
mode?: 'analysis' | 'write' | 'auto';
/** Resume key for session affinity and conversation continuity */
resumeKey?: string;
/** Strategy for resuming a previous CLI session */
resumeStrategy?: string;
/** Item IDs that must complete before this item can execute */
depends_on: string[];
/** Numeric order for scheduling priority within a group. Lower = earlier */
execution_order: number;
/** Logical grouping for related items (e.g., same issue) */
execution_group?: string;
/** Session key assigned when executing */
sessionKey?: string;
/** Timestamp when item was added to the queue */
createdAt: string;
/** Timestamp when execution started */
startedAt?: string;
/** Timestamp when execution completed (success or failure) */
completedAt?: string;
/** Error message if status is 'failed' */
error?: string;
/** Output from CLI execution */
output?: string;
/** Arbitrary metadata for extensibility */
metadata?: Record<string, unknown>;
}
// ========== Session Binding ==========
/**
* Tracks a session bound to a resumeKey for affinity-based allocation.
* Must match backend SessionBinding exactly.
*/
export interface SessionBinding {
/** The CLI session key from CliSessionManager */
sessionKey: string;
/** Timestamp of last activity on this binding */
lastUsed: string;
}
// ========== Scheduler State ==========
/**
* Complete snapshot of the scheduler state.
* Must match backend QueueSchedulerState exactly.
*/
export interface QueueSchedulerState {
/** Current scheduler status */
status: QueueSchedulerStatus;
/** All items in the queue */
items: QueueItem[];
/** Session pool: resumeKey -> SessionBinding */
sessionPool: Record<string, SessionBinding>;
/** Active scheduler configuration */
config: QueueSchedulerConfig;
/** Number of currently executing tasks */
currentConcurrency: number;
/** Timestamp of last scheduler activity */
lastActivityAt: string;
/** Error message if scheduler status is 'failed' */
error?: string;
}
// ========== WebSocket Message Types ==========
/**
* Discriminator values for queue-related WebSocket messages.
*/
export type QueueWSMessageType =
| 'QUEUE_SCHEDULER_STATE_UPDATE'
| 'QUEUE_ITEM_ADDED'
| 'QUEUE_ITEM_UPDATED'
| 'QUEUE_ITEM_REMOVED'
| 'QUEUE_SCHEDULER_CONFIG_UPDATED';
// ========== WebSocket Messages (Discriminated Union) ==========
/**
* Full scheduler state broadcast (sent on start/pause/stop/complete).
*/
export interface QueueSchedulerStateUpdateMessage {
type: 'QUEUE_SCHEDULER_STATE_UPDATE';
state: QueueSchedulerState;
timestamp: string;
}
/**
* Broadcast when a new item is added to the queue.
*/
export interface QueueItemAddedMessage {
type: 'QUEUE_ITEM_ADDED';
item: QueueItem;
timestamp: string;
}
/**
* Broadcast when an item's status or data changes.
*/
export interface QueueItemUpdatedMessage {
type: 'QUEUE_ITEM_UPDATED';
item: QueueItem;
timestamp: string;
}
/**
* Broadcast when an item is removed from the queue.
*/
export interface QueueItemRemovedMessage {
type: 'QUEUE_ITEM_REMOVED';
item_id: string;
timestamp: string;
}
/**
* Broadcast when scheduler configuration is updated.
*/
export interface QueueSchedulerConfigUpdatedMessage {
type: 'QUEUE_SCHEDULER_CONFIG_UPDATED';
config: QueueSchedulerConfig;
timestamp: string;
}
/**
* Discriminated union of all queue WebSocket messages.
* Use `msg.type` as the discriminator in switch statements.
*/
export type QueueWSMessage =
| QueueSchedulerStateUpdateMessage
| QueueItemAddedMessage
| QueueItemUpdatedMessage
| QueueItemRemovedMessage
| QueueSchedulerConfigUpdatedMessage;