262 lines
9.8 KiB
TypeScript
262 lines
9.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import React, { useMemo, useState } from 'react';
|
|
import { AlertCircle, ArrowLeft, Loader2, Trash2 } from 'lucide-react';
|
|
|
|
import {
|
|
TaskAcceptanceCard,
|
|
TaskLiveHeader,
|
|
TaskSideRail,
|
|
TaskTimeline,
|
|
type TaskFeedbackItem,
|
|
type TaskFeedbackType,
|
|
} from '@/components/task-detail';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { deleteBackendTask, getBackendTask, submitChatFeedback } from '@/lib/api';
|
|
import { pickAppText } from '@/lib/i18n/core';
|
|
import { useAppI18n } from '@/lib/i18n/provider';
|
|
import { useChatStore } from '@/lib/store';
|
|
import { buildTaskTimelineCards } from '@/lib/task-timeline';
|
|
import type { BackendTask } from '@/types';
|
|
|
|
const TERMINAL_TASK_STATUSES = new Set(['closed', 'abandoned', 'cancelled', 'error']);
|
|
|
|
export default function TaskDetailPage() {
|
|
const { locale } = useAppI18n();
|
|
const router = useRouter();
|
|
const params = useParams<{ taskId: string }>();
|
|
const taskId = decodeURIComponent(Array.isArray(params?.taskId) ? params.taskId[0] : params?.taskId ?? '');
|
|
const processRuns = useChatStore((state) => state.processRuns);
|
|
const processEvents = useChatStore((state) => state.processEvents);
|
|
const processArtifacts = useChatStore((state) => state.processArtifacts);
|
|
const setSessionProcess = useChatStore((state) => state.setSessionProcess);
|
|
const updateMessageFeedback = useChatStore((state) => state.updateMessageFeedback);
|
|
const wsStatus = useChatStore((state) => state.wsStatus);
|
|
|
|
const [backendTask, setBackendTask] = useState<BackendTask | null>(null);
|
|
const [backendTaskLoading, setBackendTaskLoading] = useState(true);
|
|
const [revision, setRevision] = useState('');
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
const [actionBusy, setActionBusy] = useState<string | null>(null);
|
|
const mountedRef = React.useRef(true);
|
|
|
|
React.useEffect(() => {
|
|
return () => {
|
|
mountedRef.current = false;
|
|
};
|
|
}, []);
|
|
|
|
const loadBackendTask = React.useCallback(async () => {
|
|
if (!taskId) return null;
|
|
setBackendTaskLoading(true);
|
|
try {
|
|
const item = await getBackendTask(taskId);
|
|
if (!mountedRef.current) return item;
|
|
setBackendTask(item);
|
|
setSessionProcess(item.session_id, {
|
|
runs: item.process_runs ?? [],
|
|
events: item.process_events ?? [],
|
|
artifacts: item.process_artifacts ?? [],
|
|
});
|
|
return item;
|
|
} catch {
|
|
if (mountedRef.current) {
|
|
setBackendTask(null);
|
|
}
|
|
return null;
|
|
} finally {
|
|
if (mountedRef.current) {
|
|
setBackendTaskLoading(false);
|
|
}
|
|
}
|
|
}, [setSessionProcess, taskId]);
|
|
|
|
React.useEffect(() => {
|
|
void loadBackendTask();
|
|
}, [loadBackendTask]);
|
|
|
|
const isTaskLive = backendTask ? !TERMINAL_TASK_STATUSES.has(backendTask.status) : false;
|
|
|
|
React.useEffect(() => {
|
|
if (!isTaskLive || wsStatus === 'connected') return;
|
|
const id = window.setInterval(() => {
|
|
void loadBackendTask();
|
|
}, 4000);
|
|
return () => window.clearInterval(id);
|
|
}, [isTaskLive, loadBackendTask, wsStatus]);
|
|
|
|
const taskRunIds = useMemo(() => {
|
|
const ids = new Set<string>();
|
|
for (const run of backendTask?.process_runs ?? []) ids.add(run.run_id);
|
|
for (const runId of backendTask?.run_ids ?? []) ids.add(runId);
|
|
return ids;
|
|
}, [backendTask]);
|
|
|
|
const liveRuns = useMemo(
|
|
() => processRuns.filter((run) => taskRunIds.has(run.run_id) || run.metadata?.task_id === taskId),
|
|
[processRuns, taskId, taskRunIds]
|
|
);
|
|
|
|
const liveEvents = useMemo(
|
|
() => processEvents.filter((event) => taskRunIds.has(event.run_id) || event.metadata?.task_id === taskId),
|
|
[processEvents, taskId, taskRunIds]
|
|
);
|
|
|
|
const liveArtifacts = useMemo(
|
|
() => processArtifacts.filter((artifact) => taskRunIds.has(artifact.run_id) || artifact.metadata?.task_id === taskId),
|
|
[processArtifacts, taskId, taskRunIds]
|
|
);
|
|
|
|
const renderedRuns = liveRuns.length > 0 ? liveRuns : backendTask?.process_runs ?? [];
|
|
const renderedEvents = liveEvents.length > 0 ? liveEvents : backendTask?.process_events ?? [];
|
|
const renderedArtifacts = liveArtifacts.length > 0 ? liveArtifacts : backendTask?.process_artifacts ?? [];
|
|
|
|
const timelineCards = useMemo(
|
|
() =>
|
|
backendTask
|
|
? buildTaskTimelineCards({
|
|
task: backendTask,
|
|
processRuns: renderedRuns,
|
|
processEvents: renderedEvents,
|
|
processArtifacts: renderedArtifacts,
|
|
})
|
|
: [],
|
|
[backendTask, renderedArtifacts, renderedEvents, renderedRuns]
|
|
);
|
|
|
|
const activeLabel =
|
|
[...timelineCards].reverse().find((card) => !['acceptance', 'task_created'].includes(card.type))?.title ?? '-';
|
|
const durationMs = backendTask ? taskDurationMs(backendTask) : null;
|
|
const feedbackRunId = backendTask ? pickFeedbackRunId(backendTask) : null;
|
|
|
|
const runAction = async (key: string, action: () => Promise<unknown>) => {
|
|
setActionBusy(key);
|
|
setActionError(null);
|
|
try {
|
|
await action();
|
|
} catch (err: any) {
|
|
setActionError(err.message || pickAppText(locale, '操作失败', 'Action failed'));
|
|
} finally {
|
|
setActionBusy(null);
|
|
}
|
|
};
|
|
|
|
const deleteCurrentBackendTask = async () => {
|
|
if (!backendTask) return;
|
|
const title = backendTask.short_title || backendTask.description || backendTask.goal || backendTask.task_id;
|
|
if (!window.confirm(pickAppText(locale, `删除任务“${title}”？`, `Delete task "${title}"?`))) {
|
|
return;
|
|
}
|
|
await runAction('delete-backend-task', async () => {
|
|
await deleteBackendTask(backendTask.task_id);
|
|
router.push('/tasks');
|
|
});
|
|
};
|
|
|
|
if (backendTask) {
|
|
const feedbackItems = backendTask.feedback || [];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<TaskLiveHeader task={backendTask} activeLabel={activeLabel} durationMs={durationMs} />
|
|
|
|
<main className="mx-auto grid max-w-7xl gap-6 p-6 xl:grid-cols-[minmax(0,1fr)_360px]">
|
|
<div className="space-y-4">
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive hover:text-destructive"
|
|
disabled={Boolean(actionBusy)}
|
|
onClick={() => void deleteCurrentBackendTask()}
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
{pickAppText(locale, '删除任务', 'Delete task')}
|
|
</Button>
|
|
</div>
|
|
|
|
{actionError ? (
|
|
<Card className="border-destructive">
|
|
<CardContent className="flex items-center gap-2 p-4 text-sm text-destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
{actionError}
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
|
|
<TaskTimeline cards={timelineCards} isLive={isTaskLive && wsStatus === 'connected'} />
|
|
|
|
<TaskAcceptanceCard
|
|
sessionId={backendTask.session_id}
|
|
runId={feedbackRunId}
|
|
taskStatus={backendTask.status}
|
|
feedbackItems={feedbackItems as TaskFeedbackItem[]}
|
|
actionBusy={actionBusy}
|
|
revision={revision}
|
|
onRevisionChange={setRevision}
|
|
onSubmit={(feedbackType: TaskFeedbackType, comment?: string) =>
|
|
runAction(`backend-feedback-${feedbackType}`, async () => {
|
|
if (!feedbackRunId) throw new Error(pickAppText(locale, '暂无可验收的运行记录。', 'No run is available for acceptance yet.'));
|
|
await submitChatFeedback({
|
|
sessionId: backendTask.session_id,
|
|
runId: feedbackRunId,
|
|
feedbackType,
|
|
comment,
|
|
});
|
|
updateMessageFeedback(feedbackRunId, feedbackType);
|
|
setRevision('');
|
|
await loadBackendTask();
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<TaskSideRail task={backendTask} runs={renderedRuns} artifacts={renderedArtifacts} cards={timelineCards} />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto flex max-w-4xl flex-col gap-4 p-6">
|
|
<Button asChild variant="outline" className="w-fit">
|
|
<Link href="/tasks">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
{pickAppText(locale, '返回任务列表', 'Back to tasks')}
|
|
</Link>
|
|
</Button>
|
|
<Card className="border-dashed">
|
|
<CardContent className="py-16 text-center">
|
|
<div className="flex justify-center">
|
|
{backendTaskLoading ? <Loader2 className="mb-4 h-5 w-5 animate-spin text-muted-foreground" /> : null}
|
|
</div>
|
|
<h1 className="text-2xl font-semibold">{pickAppText(locale, '任务不存在', 'Task not found')}</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{backendTaskLoading
|
|
? pickAppText(locale, '正在从后端任务库加载任务。', 'Loading the task from the backend task store.')
|
|
: pickAppText(locale, '后端任务库里没有这个任务。', 'The backend task store does not contain this task.')}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function pickFeedbackRunId(task: BackendTask): string | null {
|
|
const runIds = task.run_ids.filter(Boolean);
|
|
if (runIds.length > 0) return runIds[runIds.length - 1];
|
|
const runs = task.runs ?? [];
|
|
if (runs.length > 0) return runs[runs.length - 1].run_id;
|
|
return null;
|
|
}
|
|
|
|
function taskDurationMs(task: BackendTask): number | null {
|
|
const start = new Date(task.created_at).getTime();
|
|
const end = new Date(task.closed_at || task.updated_at).getTime();
|
|
if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
|
|
return Math.max(0, end - start);
|
|
}
|