@winspan/claude-forge 8.53.2 → 8.54.3

package/web/src/pages/TaskDetail.tsx

@@ -1,515 +0,0 @@
-import { useParams, Link, useLocation } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
-import { format } from 'date-fns'
-import { parseUTC } from '../utils/time'
-import { resolveBackTo } from '../utils/navigation'
-import {
-  ArrowLeft,
-  Clock,
-  CheckCircle2,
-  Loader2,
-  ChevronDown,
-  ChevronRight,
-  FileText,
-  Terminal,
-  FileEdit,
-  Bot,
-  BookOpen,
-  Syringe,
-  FolderOpen,
-  Eye,
-  Pencil,
-  Search,
-  Globe,
-  MessageSquare,
-} from 'lucide-react'
-import clsx from 'clsx'
-import { normalizeTaskTitle } from '../utils/task-title'
-
-interface Injection {
-  id: string
-  injection_type: 'systemMessage' | 'additionalContext'
-  source_handler: string
-  content: string
-  timestamp: string
-}
-
-interface TimelineEvent {
-  id: string
-  timestamp: string
-  tool_name: string
-  hook_type: string
-  input: unknown
-  output: unknown
-  is_agent_call: boolean
-  agent_detail?: {
-    subagent_type?: string
-    name?: string
-    prompt?: string
-  }
-}
-
-interface SkillInvocation {
-  id: string
-  skill_id: string
-  reason: string
-  workflow?: string
-  phase?: string
-  timestamp: string
-}
-
-interface UserPrompt {
-  timestamp: string
-  content: string
-}
-
-interface TaskDetailData {
-  id: string
-  title: string
-  status: 'active' | 'completed' | 'abandoned'
-  start_time: string
-  end_time?: string
-  event_count: number
-  session_id: string
-  userPrompts: UserPrompt[]
-  injections: Injection[]
-  timeline: TimelineEvent[]
-  skillInvocations: SkillInvocation[]
-  artifacts: string[]
-}
-
-async function fetchTaskDetail(taskId: string): Promise<TaskDetailData> {
-  const res = await fetch(`/api/tasks/${taskId}`)
-  if (!res.ok) throw new Error('Failed to fetch task detail')
-  const raw = await res.json()
-  // API returns { task: {...}, injections, timeline, skillInvocations, artifacts }
-  // Flatten task fields into top level for component consumption
-  return {
-    ...raw.task,
-    userPrompts: raw.userPrompts ?? [],
-    injections: raw.injections ?? [],
-    timeline: (raw.timeline ?? []).map((e: any, idx: number) => ({
-      id: `${e.timestamp}-${e.tool_name}-${idx}`,
-      timestamp: e.timestamp,
-      tool_name: e.tool_name,
-      hook_type: e.hook_type,
-      input: e.input,
-      output: e.output,
-      is_agent_call: e.is_agent_call,
-      agent_detail: e.agent_detail,
-    })),
-    skillInvocations: raw.skillInvocations ?? [],
-    artifacts: raw.artifacts ?? [],
-  }
-}
-
-function getToolIcon(toolName: string) {
-  switch (toolName) {
-    case 'Read':
-      return <Eye className="h-4 w-4 text-gray-500" />
-    case 'Edit':
-      return <Pencil className="h-4 w-4 text-amber-600" />
-    case 'Write':
-      return <FileEdit className="h-4 w-4 text-green-600" />
-    case 'Bash':
-      return <Terminal className="h-4 w-4 text-orange-600" />
-    case 'Agent':
-    case 'Task':
-      return <Bot className="h-4 w-4 text-blue-600" />
-    case 'Grep':
-    case 'Glob':
-      return <Search className="h-4 w-4 text-purple-500" />
-    case 'WebSearch':
-    case 'WebFetch':
-      return <Globe className="h-4 w-4 text-cyan-600" />
-    default:
-      return <Terminal className="h-4 w-4 text-gray-400" />
-  }
-}
-
-function getRelativeTime(eventTime: string, startTime: string): string {
-  const diff = parseUTC(eventTime).getTime() - parseUTC(startTime).getTime()
-  if (diff < 1000) return '+0s'
-  if (diff < 60000) return `+${Math.floor(diff / 1000)}s`
-  if (diff < 3600000) return `+${Math.floor(diff / 60000)}m${Math.floor((diff % 60000) / 1000)}s`
-  return `+${Math.floor(diff / 3600000)}h${Math.floor((diff % 3600000) / 60000)}m`
-}
-
-export default function TaskDetail() {
-  const { taskId } = useParams<{ taskId: string }>()
-  const location = useLocation()
-  const backTo = resolveBackTo(location.state)
-  const [expandedInjections, setExpandedInjections] = useState<Set<string>>(new Set())
-  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set())
-  const [showInjections, setShowInjections] = useState(true)
-
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['task-detail', taskId],
-    queryFn: () => fetchTaskDetail(taskId!),
-    enabled: !!taskId,
-    refetchInterval: 10000,
-  })
-
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <p className="text-gray-600">加载中...</p>
-      </div>
-    )
-  }
-
-  if (error || !data) {
-    return (
-      <div>
-        <Link to={backTo} className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
-          <ArrowLeft className="h-4 w-4 mr-1" />返回
-        </Link>
-        <div className="bg-white rounded-lg shadow p-6">
-          <p className="text-red-600">加载失败: {(error as Error)?.message || '未知错误'}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const toggleInjection = (id: string) => {
-    setExpandedInjections(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
-  const toggleEvent = (idx: number) => {
-    setExpandedEvents(prev => {
-      const next = new Set(prev)
-      if (next.has(idx)) next.delete(idx)
-      else next.add(idx)
-      return next
-    })
-  }
-
-  const duration = data.end_time
-    ? `${Math.round((parseUTC(data.end_time).getTime() - parseUTC(data.start_time).getTime()) / 1000)}s`
-    : '进行中'
-
-  return (
-    <div>
-      <Link to={backTo} className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
-        <ArrowLeft className="h-4 w-4 mr-1" />返回任务列表
-      </Link>
-
-      {/* 区域 1：任务概览 */}
-      <div className="bg-white rounded-lg shadow p-6 mb-6">
-        <div className="flex items-start justify-between mb-4">
-          <h1 className="text-xl font-bold text-gray-900">{normalizeTaskTitle(data.title, data.userPrompts[0]?.content)}</h1>
-          <span className={clsx(
-            'px-2 py-1 text-xs font-medium rounded-full',
-            data.status === 'completed' && 'bg-green-100 text-green-700',
-            data.status === 'active' && 'bg-blue-100 text-blue-700',
-            data.status === 'abandoned' && 'bg-gray-100 text-gray-600'
-          )}>
-            {data.status === 'completed' && <CheckCircle2 className="h-3 w-3 inline mr-1" />}
-            {data.status === 'active' && <Loader2 className="h-3 w-3 inline mr-1 animate-spin" />}
-            {data.status}
-          </span>
-        </div>
-        <div className="grid grid-cols-4 gap-4 text-sm">
-          <div>
-            <div className="text-xs text-gray-500 mb-1">开始时间</div>
-            <div className="text-gray-900">
-              {format(parseUTC(data.start_time), 'MM-dd HH:mm:ss')}
-            </div>
-          </div>
-          <div>
-            <div className="text-xs text-gray-500 mb-1">结束时间</div>
-            <div className="text-gray-900">
-              {data.end_time ? format(parseUTC(data.end_time), 'MM-dd HH:mm:ss') : '-'}
-            </div>
-          </div>
-          <div>
-            <div className="text-xs text-gray-500 mb-1">持续时间</div>
-            <div className="text-gray-900">{duration}</div>
-          </div>
-          <div>
-            <div className="text-xs text-gray-500 mb-1">事件数</div>
-            <div className="text-gray-900">{data.event_count}</div>
-          </div>
-        </div>
-      </div>
-
-      {/* 区域 1.5：用户消息 */}
-      {data.userPrompts.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <MessageSquare className="h-4 w-4 text-purple-500" />
-            用户消息
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-              {data.userPrompts.length}
-            </span>
-          </h2>
-          <div className="space-y-3">
-            {data.userPrompts.map((up, idx) => (
-              <div key={idx} className="bg-purple-50 border border-purple-100 rounded-lg p-3">
-                <div className="text-xs text-gray-500 mb-1 font-mono">
-                  {format(parseUTC(up.timestamp), 'HH:mm:ss')}
-                </div>
-                <div className="text-sm text-gray-800 whitespace-pre-wrap break-all">{up.content}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* 空状态：所有详情区块都为空时的兜底提示 */}
-      {data.userPrompts.length === 0 &&
-        data.injections.length === 0 &&
-        data.timeline.length === 0 &&
-        data.skillInvocations.length === 0 &&
-        data.artifacts.length === 0 && (
-          <div className="bg-white rounded-lg shadow p-12 text-center">
-            <Clock className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-            <p className="text-sm text-gray-500">该任务暂无可展示的执行内容</p>
-            <p className="text-xs text-gray-400 mt-1">事件可能仍在记录中，稍后刷新查看</p>
-          </div>
-        )}
-
-      {/* 区域 2：注入内容 */}
-      {data.injections.length > 0 && (
-        <div className="bg-white rounded-lg shadow mb-6">
-          <button
-            onClick={() => setShowInjections(!showInjections)}
-            className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 rounded-t-lg"
-          >
-            <div className="flex items-center gap-2">
-              <Syringe className="h-4 w-4 text-gray-500" />
-              <h2 className="text-base font-semibold text-gray-900">注入内容</h2>
-              <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-                {data.injections.length}
-              </span>
-            </div>
-            {showInjections ? <ChevronDown className="h-4 w-4 text-gray-400" /> : <ChevronRight className="h-4 w-4 text-gray-400" />}
-          </button>
-          {showInjections && (
-            <div className="px-4 pb-4 space-y-2">
-              {data.injections.map((inj) => (
-                <div key={inj.id} className="bg-gray-50 rounded-lg border border-gray-100">
-                  <button
-                    onClick={() => toggleInjection(inj.id)}
-                    className="w-full flex items-center justify-between p-3 text-left"
-                  >
-                    <div className="flex items-center gap-2 text-sm">
-                      <span className={clsx(
-                        'px-1.5 py-0.5 text-xs rounded font-mono',
-                        inj.injection_type === 'systemMessage' ? 'bg-blue-50 text-blue-700' : 'bg-amber-50 text-amber-700'
-                      )}>
-                        {inj.injection_type}
-                      </span>
-                      <span className="text-gray-600">{inj.source_handler}</span>
-                    </div>
-                    {expandedInjections.has(inj.id) ? <ChevronDown className="h-3 w-3 text-gray-400" /> : <ChevronRight className="h-3 w-3 text-gray-400" />}
-                  </button>
-                  {expandedInjections.has(inj.id) && (
-                    <div className="px-3 pb-3">
-                      <pre className="text-xs text-gray-700 bg-white border border-gray-200 rounded p-3 overflow-x-auto max-h-64 overflow-y-auto whitespace-pre-wrap">
-                        {inj.content}
-                      </pre>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 区域 3：执行时间线 */}
-      {data.timeline.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <Clock className="h-4 w-4 text-gray-500" />
-            执行时间线
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-              {data.timeline.length}
-            </span>
-          </h2>
-          <div className="relative">
-            {/* 竖线 */}
-            <div className="absolute left-[19px] top-2 bottom-2 w-px bg-gray-200" />
-            <div className="space-y-0">
-              {data.timeline.map((event, idx) => {
-                const isAgent = event.is_agent_call
-                const isFileOp = event.tool_name === 'Edit' || event.tool_name === 'Write'
-                const isExpanded = expandedEvents.has(idx)
-                const input = event.input as Record<string, unknown> | null
-                const filePath = input?.file_path as string | undefined
-                const description = (input?.description || input?.command) as string | undefined
-
-                return (
-                  <div key={event.id || idx} className={clsx(
-                    'relative flex items-start gap-3 py-2 px-2 rounded-md cursor-pointer hover:bg-gray-50 transition-colors',
-                    isAgent && 'bg-blue-50 hover:bg-blue-100',
-                  )}
-                  onClick={() => toggleEvent(idx)}
-                  >
-                    <div className="relative z-10 flex-shrink-0 w-10 flex justify-center">
-                      <div className={clsx(
-                        'w-8 h-8 rounded-full flex items-center justify-center',
-                        isAgent ? 'bg-blue-100' : 'bg-white border border-gray-200'
-                      )}>
-                        {getToolIcon(event.tool_name)}
-                      </div>
-                    </div>
-                    <div className="flex-1 min-w-0 pt-1">
-                      <div className="flex items-center gap-2">
-                        <span className={clsx(
-                          'text-sm font-medium',
-                          isAgent ? 'text-blue-700' : 'text-gray-900'
-                        )}>
-                          {event.tool_name}
-                        </span>
-                        {event.agent_detail?.subagent_type && (
-                          <span className="text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-mono">
-                            {event.agent_detail.subagent_type}
-                          </span>
-                        )}
-                        {event.agent_detail?.name && (
-                          <span className="text-xs text-blue-600">
-                            {event.agent_detail.name}
-                          </span>
-                        )}
-                        <span className="text-xs text-gray-400 font-mono ml-auto flex items-center gap-1">
-                          {getRelativeTime(event.timestamp, data.start_time)}
-                          {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-                        </span>
-                      </div>
-                      {!isExpanded && isFileOp && filePath && (
-                        <p className="text-xs text-green-700 font-mono mt-0.5 truncate" title={filePath}>
-                          {filePath}
-                        </p>
-                      )}
-                      {!isExpanded && !isFileOp && description && (
-                        <p className="text-xs text-gray-500 mt-0.5 truncate">{description}</p>
-                      )}
-                      {/* 展开的详细内容 */}
-                      {isExpanded && (
-                        <div className="mt-2 space-y-2 text-xs" onClick={e => e.stopPropagation()}>
-                          {/* Agent 调用详情 */}
-                          {isAgent && event.agent_detail && (
-                            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 space-y-2">
-                              {event.agent_detail.subagent_type && (
-                                <div>
-                                  <span className="text-blue-600 font-medium">subagent_type: </span>
-                                  <span className="font-mono text-blue-800">{event.agent_detail.subagent_type}</span>
-                                </div>
-                              )}
-                              {event.agent_detail.name && (
-                                <div>
-                                  <span className="text-blue-600 font-medium">name: </span>
-                                  <span className="font-mono text-blue-800">{event.agent_detail.name}</span>
-                                </div>
-                              )}
-                              {event.agent_detail.prompt && (
-                                <div>
-                                  <span className="text-blue-600 font-medium">prompt:</span>
-                                  <pre className="mt-1 p-2 bg-white rounded border border-blue-100 text-gray-800 whitespace-pre-wrap break-words max-h-60 overflow-y-auto">
-                                    {event.agent_detail.prompt}
-                                  </pre>
-                                </div>
-                              )}
-                            </div>
-                          )}
-                          {/* 文件操作详情 */}
-                          {isFileOp && filePath && (
-                            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
-                              <span className="text-green-700 font-medium">file: </span>
-                              <span className="font-mono text-green-800">{filePath}</span>
-                            </div>
-                          )}
-                          {/* 通用工具详情 */}
-                          {!isAgent && description && (
-                            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                              <pre className="text-gray-700 whitespace-pre-wrap break-words max-h-40 overflow-y-auto">
-                                {description}
-                              </pre>
-                            </div>
-                          )}
-                          {/* 文件路径（非文件操作工具，如 Read） */}
-                          {!isAgent && !isFileOp && filePath && (
-                            <div className="text-gray-500">
-                              <span className="font-medium">path: </span>
-                              <span className="font-mono">{filePath}</span>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 区域 4：Skill 调用 */}
-      {data.skillInvocations.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <BookOpen className="h-4 w-4 text-purple-500" />
-            Skill 调用
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-              {data.skillInvocations.length}
-            </span>
-          </h2>
-          <div className="space-y-3">
-            {data.skillInvocations.map((skill) => (
-              <div key={skill.id} className="border border-purple-100 bg-purple-50 rounded-lg p-4">
-                <div className="flex items-center gap-2 mb-2">
-                  <span className="text-sm font-medium text-purple-800 font-mono">
-                    {skill.skill_id}
-                  </span>
-                  {skill.workflow && (
-                    <span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
-                      {skill.workflow}
-                    </span>
-                  )}
-                  {skill.phase && (
-                    <span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded">
-                      phase: {skill.phase}
-                    </span>
-                  )}
-                </div>
-                <p className="text-xs text-purple-700">{skill.reason}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* 区域 5：产物 */}
-      {data.artifacts.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6 mb-6">
-          <h2 className="text-base font-semibold text-gray-900 mb-4 flex items-center gap-2">
-            <FolderOpen className="h-4 w-4 text-green-600" />
-            产物
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
-              {data.artifacts.length} 个文件
-            </span>
-          </h2>
-          <div className="space-y-1">
-            {data.artifacts.map((filePath) => (
-              <div key={filePath} className="flex items-center gap-2 py-1.5 px-3 rounded hover:bg-green-50">
-                <FileText className="h-4 w-4 text-green-600 flex-shrink-0" />
-                <span className="text-sm text-gray-800 font-mono truncate" title={filePath}>
-                  {filePath}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}