@winspan/claude-forge 8.53.2 → 8.54.4

package/web/src/components/SessionDetailContent.tsx

@@ -1,157 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { format } from 'date-fns'
-import { parseUTC } from '../utils/time'
-import { MessageSquare, FileEdit, Terminal, GitCommit } from 'lucide-react'
-import clsx from 'clsx'
-
-interface TaskDetail {
-  id: string
-  title: string
-  start_time: string
-  end_time?: string
-  status: string
-  event_count: number
-  prompts: Array<{ timestamp: string; content: string }>
-  events: Array<any>
-  injections: Array<any>
-  summary: {
-    toolUsage: Record<string, number>
-    filesChanged: string[]
-    commits: Array<{ timestamp: string; message: string }>
-  }
-}
-
-interface SessionDetailData {
-  session: {
-    session_id: string
-    first_prompt: string
-    event_count: number
-    start_time: string
-    end_time: string
-  }
-  tasks: TaskDetail[]
-}
-
-async function fetchSessionDetail(id: string): Promise<SessionDetailData> {
-  const res = await fetch(`/api/sessions/${id}/detail`)
-  if (!res.ok) throw new Error('Failed to fetch session detail')
-  return res.json()
-}
-
-interface Props {
-  sessionId: string
-}
-
-export default function SessionDetailContent({ sessionId }: Props) {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['session-detail', sessionId],
-    queryFn: () => fetchSessionDetail(sessionId),
-    enabled: !!sessionId,
-  })
-
-  if (isLoading) {
-    return <div className="p-6 text-gray-500">加载中...</div>
-  }
-
-  if (error || !data) {
-    return <div className="p-6 text-red-600">加载失败</div>
-  }
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <div className="text-xs text-gray-500 mb-1">Session ID</div>
-        <div className="text-sm font-mono text-gray-900 break-all">{data.session.session_id}</div>
-      </div>
-
-      <div className="grid grid-cols-3 gap-4 pb-4 border-b border-gray-200">
-        <div>
-          <div className="text-xs text-gray-500">事件数</div>
-          <div className="text-lg font-semibold">{data.session.event_count}</div>
-        </div>
-        <div>
-          <div className="text-xs text-gray-500">任务数</div>
-          <div className="text-lg font-semibold">{data.tasks.length}</div>
-        </div>
-        <div>
-          <div className="text-xs text-gray-500">开始时间</div>
-          <div className="text-sm">
-            {data.session.start_time ? format(parseUTC(data.session.start_time), 'MM-dd HH:mm:ss') : '-'}
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-semibold text-gray-700 mb-3">任务列表</h3>
-        <div className="space-y-3">
-          {data.tasks.map((task) => (
-            <div key={task.id} className="border border-gray-200 rounded-lg p-4">
-              <div className="flex items-center justify-between mb-3">
-                <h4 className="text-sm font-semibold text-gray-900 flex-1 mr-2">{task.title}</h4>
-                <span className={clsx(
-                  'px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap',
-                  task.status === 'completed' && 'bg-green-100 text-green-700',
-                  task.status === 'active' && 'bg-blue-100 text-blue-700',
-                  task.status === 'abandoned' && 'bg-gray-100 text-gray-600'
-                )}>
-                  {task.status}
-                </span>
-              </div>
-
-              <div className="grid grid-cols-3 gap-3 mb-3 text-xs">
-                <div>
-                  <div className="text-gray-500 mb-1 flex items-center gap-1">
-                    <Terminal className="h-3 w-3" />工具使用
-                  </div>
-                  <div className="space-y-0.5">
-                    {Object.entries(task.summary.toolUsage).slice(0, 4).map(([tool, count]) => (
-                      <div key={tool} className="flex justify-between">
-                        <span className="text-gray-600">{tool}</span>
-                        <span className="font-mono text-gray-900">{count}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-                <div>
-                  <div className="text-gray-500 mb-1 flex items-center gap-1">
-                    <FileEdit className="h-3 w-3" />文件变更
-                  </div>
-                  <div className="text-gray-700">{task.summary.filesChanged.length} 个</div>
-                  {task.summary.filesChanged.slice(0, 3).map(f => (
-                    <div key={f} className="text-gray-500 truncate text-[10px]" title={f}>
-                      {f.split('/').pop()}
-                    </div>
-                  ))}
-                </div>
-                <div>
-                  <div className="text-gray-500 mb-1 flex items-center gap-1">
-                    <GitCommit className="h-3 w-3" />提交
-                  </div>
-                  <div className="text-gray-700">{task.summary.commits.length} 次</div>
-                </div>
-              </div>
-
-              {task.prompts.length > 0 && (
-                <div className="border-t border-gray-100 pt-3">
-                  <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
-                    <MessageSquare className="h-3 w-3" />用户提示 ({task.prompts.length})
-                  </div>
-                  <div className="space-y-1.5">
-                    {task.prompts.slice(0, 3).map((p, i) => (
-                      <div key={i} className="text-xs bg-gray-50 rounded p-2">
-                        <p className="text-gray-700 line-clamp-2">{p.content}</p>
-                      </div>
-                    ))}
-                    {task.prompts.length > 3 && (
-                      <div className="text-xs text-gray-400">还有 {task.prompts.length - 3} 条...</div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/web/src/components/Toast.tsx

@@ -1,92 +0,0 @@
-import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
-import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-react'
-import clsx from 'clsx'
-
-type ToastType = 'success' | 'error' | 'warning' | 'info'
-
-interface Toast {
-  id: number
-  type: ToastType
-  message: string
-}
-
-interface ToastContextValue {
-  show: (type: ToastType, message: string) => void
-  success: (message: string) => void
-  error: (message: string) => void
-  warning: (message: string) => void
-  info: (message: string) => void
-}
-
-const ToastContext = createContext<ToastContextValue | null>(null)
-
-export function useToast() {
-  const ctx = useContext(ToastContext)
-  if (!ctx) throw new Error('useToast must be used within ToastProvider')
-  return ctx
-}
-
-let nextId = 1
-
-export function ToastProvider({ children }: { children: ReactNode }) {
-  const [toasts, setToasts] = useState<Toast[]>([])
-
-  const remove = useCallback((id: number) => {
-    setToasts(prev => prev.filter(t => t.id !== id))
-  }, [])
-
-  const show = useCallback((type: ToastType, message: string) => {
-    const id = nextId++
-    setToasts(prev => [...prev, { id, type, message }])
-    setTimeout(() => remove(id), 4000)
-  }, [remove])
-
-  const value: ToastContextValue = {
-    show,
-    success: (msg) => show('success', msg),
-    error: (msg) => show('error', msg),
-    warning: (msg) => show('warning', msg),
-    info: (msg) => show('info', msg),
-  }
-
-  return (
-    <ToastContext.Provider value={value}>
-      {children}
-      <div className="fixed top-4 right-4 z-[9999] space-y-2 max-w-md">
-        {toasts.map(t => (
-          <ToastItem key={t.id} toast={t} onClose={() => remove(t.id)} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  )
-}
-
-function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
-  const icons = {
-    success: <CheckCircle className="h-5 w-5 text-green-500" />,
-    error: <XCircle className="h-5 w-5 text-red-500" />,
-    warning: <AlertCircle className="h-5 w-5 text-yellow-500" />,
-    info: <Info className="h-5 w-5 text-blue-500" />,
-  }
-  const borderColors = {
-    success: 'border-green-200',
-    error: 'border-red-200',
-    warning: 'border-yellow-200',
-    info: 'border-blue-200',
-  }
-
-  return (
-    <div
-      className={clsx(
-        'bg-white shadow-lg rounded-lg border px-4 py-3 flex items-start gap-3 animate-in slide-in-from-right',
-        borderColors[toast.type]
-      )}
-    >
-      {icons[toast.type]}
-      <div className="flex-1 text-sm text-gray-800">{toast.message}</div>
-      <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
-        <X className="h-4 w-4" />
-      </button>
-    </div>
-  )
-}

package/web/src/index.css

@@ -1,19 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: light;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-}

package/web/src/main.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import App from './App'
-import { ToastProvider } from './components/Toast'
-import { ConfirmProvider } from './components/Confirm'
-import './index.css'
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
-})
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ToastProvider>
-        <ConfirmProvider>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </ConfirmProvider>
-      </ToastProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
-)

package/web/src/pages/AIConfig.tsx

@@ -1,233 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { useState, useEffect } from 'react'
-import { Save, Eye, EyeOff, Cpu, Zap, CheckCircle, XCircle, Loader2 } from 'lucide-react'
-import { useToast } from '../components/Toast'
-import { authFetch } from '../utils/auth'
-
-interface AIConfig {
-  api_key: string
-  base_url: string
-  model: string
-  provider?: string
-}
-
-interface ModelOption {
-  id: string
-  owned_by?: string
-}
-
-async function fetchConfig(): Promise<AIConfig> {
-  const res = await fetch('/api/config/ai')
-  if (!res.ok) throw new Error('Failed to fetch config')
-  return res.json()
-}
-
-async function fetchModels(api_key?: string, base_url?: string): Promise<ModelOption[]> {
-  const params = new URLSearchParams()
-  if (api_key) params.set('api_key', api_key)
-  if (base_url) params.set('base_url', base_url)
-  const res = await fetch(`/api/ai/models?${params.toString()}`)
-  if (!res.ok) return []
-  const data = await res.json()
-  return data.data || []
-}
-
-async function saveConfig(config: AIConfig): Promise<void> {
-  const res = await authFetch('/api/config/ai', {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(config),
-  })
-  if (!res.ok) throw new Error('Failed to save config')
-}
-
-async function testConnection(config: { api_key: string; base_url: string; model: string }): Promise<any> {
-  const res = await authFetch('/api/ai/test', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(config),
-  })
-  const data = await res.json().catch(() => ({}))
-  if (!res.ok) throw new Error(data.error || 'Test failed')
-  return data
-}
-
-export default function AIConfig() {
-  const queryClient = useQueryClient()
-  const toast = useToast()
-  const { data: config, isLoading } = useQuery({
-    queryKey: ['ai-config'],
-    queryFn: fetchConfig,
-  })
-
-  const [form, setForm] = useState<AIConfig>({
-    api_key: '',
-    base_url: '',
-    model: '',
-  })
-  const [showKey, setShowKey] = useState(false)
-  const [testResult, setTestResult] = useState<{ ok: boolean; message: string } | null>(null)
-
-  useEffect(() => {
-    if (config) setForm(config)
-  }, [config])
-
-  const { data: models, refetch: refetchModels, isFetching: loadingModels } = useQuery({
-    queryKey: ['ai-models', form.api_key, form.base_url],
-    queryFn: () => fetchModels(form.api_key, form.base_url),
-    enabled: !!form.api_key && !!form.base_url,
-  })
-
-  const saveMutation = useMutation({
-    mutationFn: saveConfig,
-    onSuccess: () => {
-      toast.success('AI 配置已保存')
-      queryClient.invalidateQueries({ queryKey: ['ai-config'] })
-    },
-    onError: (e: Error) => toast.error(`保存失败: ${e.message}`),
-  })
-
-  const testMutation = useMutation({
-    mutationFn: testConnection,
-    onSuccess: (data) => {
-      const modelName = data?.model || form.model
-      setTestResult({ ok: true, message: `连接成功！模型: ${modelName}` })
-      toast.success('API 连接测试通过')
-    },
-    onError: (err: Error) => {
-      setTestResult({ ok: false, message: err.message })
-      toast.error('API 连接测试失败')
-    },
-  })
-
-  if (isLoading) {
-    return <div className="bg-white rounded-lg shadow p-6">加载中...</div>
-  }
-
-  return (
-    <div>
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">AI 配置</h1>
-
-      <div className="bg-white rounded-lg shadow p-6 max-w-2xl">
-        <div className="flex items-center gap-2 mb-2">
-          <Cpu className="h-5 w-5 text-indigo-600" />
-          <h3 className="text-lg font-semibold text-gray-900">AI 服务配置</h3>
-        </div>
-        <p className="text-xs text-gray-500 mb-6">用于 CLAUDE.md 生成、Skill 语义匹配、AI 辅助 Patch</p>
-
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
-            <div className="relative">
-              <input
-                type={showKey ? 'text' : 'password'}
-                value={form.api_key || ''}
-                onChange={(e) => setForm({ ...form, api_key: e.target.value })}
-                placeholder="sk-..."
-                className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-md text-sm font-mono"
-              />
-              <button
-                type="button"
-                onClick={() => setShowKey(!showKey)}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-              >
-                {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
-            <input
-              type="text"
-              value={form.base_url || ''}
-              onChange={(e) => setForm({ ...form, base_url: e.target.value })}
-              placeholder="https://api.anthropic.com"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
-            />
-          </div>
-
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label className="block text-sm font-medium text-gray-700">模型</label>
-              <button
-                type="button"
-                onClick={() => refetchModels()}
-                disabled={!form.api_key || !form.base_url || loadingModels}
-                className="text-xs text-indigo-600 hover:text-indigo-700 disabled:text-gray-400"
-              >
-                {loadingModels ? '加载中...' : '刷新模型列表'}
-              </button>
-            </div>
-            {models && models.length > 0 ? (
-              <select
-                value={form.model || ''}
-                onChange={(e) => setForm({ ...form, model: e.target.value })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm bg-white"
-              >
-                <option value="">-- 选择模型 --</option>
-                {models.map((m) => (
-                  <option key={m.id} value={m.id}>
-                    {m.id} {m.owned_by && `(${m.owned_by})`}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <input
-                type="text"
-                value={form.model || ''}
-                onChange={(e) => setForm({ ...form, model: e.target.value })}
-                placeholder="claude-sonnet-4-6"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
-              />
-            )}
-            <p className="text-xs text-gray-500 mt-1">
-              {models && models.length > 0
-                ? `发现 ${models.length} 个可用模型`
-                : '填入 API Key 和 Base URL 后可自动发现模型'}
-            </p>
-          </div>
-
-          {/* Test result */}
-          {testResult && (
-            <div className={`flex items-start gap-2 p-3 rounded text-sm ${
-              testResult.ok ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'
-            }`}>
-              {testResult.ok ? (
-                <CheckCircle className="h-4 w-4 flex-shrink-0 mt-0.5" />
-              ) : (
-                <XCircle className="h-4 w-4 flex-shrink-0 mt-0.5" />
-              )}
-              <div className="flex-1 break-all">{testResult.message}</div>
-            </div>
-          )}
-
-          <div className="flex items-center justify-end pt-4 border-t">
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => testMutation.mutate({ api_key: form.api_key, base_url: form.base_url, model: form.model })}
-                disabled={testMutation.isPending || !form.api_key || !form.model}
-                className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200 disabled:bg-gray-50 disabled:text-gray-400"
-              >
-                {testMutation.isPending ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <Zap className="h-4 w-4" />
-                )}
-                {testMutation.isPending ? '测试中...' : '测试连接'}
-              </button>
-              <button
-                onClick={() => saveMutation.mutate(form)}
-                disabled={saveMutation.isPending}
-                className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 disabled:bg-gray-400"
-              >
-                <Save className="h-4 w-4" />
-                {saveMutation.isPending ? '保存中...' : '保存配置'}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}