@winspan/claude-forge 8.41.0 → 8.50.6

package/web/src/components/SessionDetailContent.tsx

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,19 @@
+@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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,233 @@
+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>
+  )
+}