@winspan/claude-forge 8.53.2 → 8.54.3

package/web/src/pages/Events.tsx

@@ -1,271 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useState, useMemo } from 'react'
-import { format } from 'date-fns'
-import { parseUTC } from '../utils/time'
-import { Activity, Filter, Download } from 'lucide-react'
-import clsx from 'clsx'
-import Drawer from '../components/Drawer'
-import CodeBlock from '../components/CodeBlock'
-import SearchInput from '../components/SearchInput'
-import { downloadJSON, downloadCSV, getTimestamp } from '../utils/export'
-import { useToast } from '../components/Toast'
-
-interface Event {
-  event_id: string
-  session_id: string
-  project_path: string
-  timestamp: string
-  hook_type: string
-  tool_name?: string
-  tool_input?: any
-  tool_output?: any
-  user_prompt?: string
-  ai_response?: string
-}
-
-async function fetchEvents(hookType?: string): Promise<Event[]> {
-  const url = `/api/events?limit=500${hookType ? `&hook_type=${hookType}` : ''}`
-  const res = await fetch(url)
-  if (!res.ok) throw new Error('Failed to fetch events')
-  return res.json()
-}
-
-const hookTypes = ['', 'UserPromptSubmit', 'PreToolUse', 'PostToolUse', 'Stop', 'Notification']
-
-export default function Events() {
-  const [filter, setFilter] = useState('')
-  const [search, setSearch] = useState('')
-  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null)
-  const [showExportMenu, setShowExportMenu] = useState(false)
-  const toast = useToast()
-
-  const { data: events, isLoading } = useQuery({
-    queryKey: ['events', filter],
-    queryFn: () => fetchEvents(filter),
-    refetchInterval: 5000,
-  })
-
-  // 客户端搜索过滤
-  const filteredEvents = useMemo(() => {
-    if (!events) return []
-    if (!search.trim()) return events
-    const q = search.toLowerCase()
-    return events.filter(e =>
-      e.tool_name?.toLowerCase().includes(q) ||
-      e.user_prompt?.toLowerCase().includes(q) ||
-      e.session_id.toLowerCase().includes(q) ||
-      JSON.stringify(e.tool_input || '').toLowerCase().includes(q)
-    )
-  }, [events, search])
-
-  const handleExport = (exportFormat: 'json' | 'csv') => {
-    const ts = getTimestamp()
-    if (exportFormat === 'json') {
-      downloadJSON(`events-${ts}.json`, filteredEvents)
-    } else {
-      // CSV 导出扁平化
-      const flat = filteredEvents.map(e => ({
-        event_id: e.event_id,
-        session_id: e.session_id,
-        timestamp: e.timestamp,
-        hook_type: e.hook_type,
-        tool_name: e.tool_name || '',
-        user_prompt: e.user_prompt || '',
-        tool_input: e.tool_input ? JSON.stringify(e.tool_input).slice(0, 500) : '',
-      }))
-      downloadCSV(`events-${ts}.csv`, flat)
-    }
-    toast.success(`已导出 ${filteredEvents.length} 条事件`)
-    setShowExportMenu(false)
-  }
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
-        <h1 className="text-2xl font-bold text-gray-900">事件</h1>
-        <div className="flex items-center gap-2 flex-wrap">
-          <SearchInput
-            value={search}
-            onChange={setSearch}
-            placeholder="搜索提示/工具/session..."
-            className="w-64"
-          />
-          <div className="flex items-center gap-1">
-            <Filter className="h-4 w-4 text-gray-500" />
-            <select
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-              className="text-sm border border-gray-300 rounded-md px-2 py-1.5 bg-white"
-            >
-              {hookTypes.map((t) => (
-                <option key={t} value={t}>{t || '全部类型'}</option>
-              ))}
-            </select>
-          </div>
-          <div className="relative">
-            <button
-              onClick={() => setShowExportMenu(v => !v)}
-              disabled={filteredEvents.length === 0}
-              className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
-            >
-              <Download className="h-4 w-4" />
-              导出
-            </button>
-            {showExportMenu && (
-              <>
-                <div className="fixed inset-0 z-10" onClick={() => setShowExportMenu(false)} />
-                <div className="absolute right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-20">
-                  <button
-                    onClick={() => handleExport('json')}
-                    className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-50"
-                  >
-                    导出为 JSON
-                  </button>
-                  <button
-                    onClick={() => handleExport('csv')}
-                    className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-50"
-                  >
-                    导出为 CSV
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="text-sm text-gray-500 mb-3">
-        显示 {filteredEvents.length} 条 {search && `（已过滤）`}
-      </div>
-
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        {isLoading ? (
-          <div className="p-6 text-gray-600">加载中...</div>
-        ) : (
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">时间</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">类型</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">工具</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">详情</th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
-              {filteredEvents.map((e) => (
-                <tr
-                  key={e.event_id}
-                  className="hover:bg-gray-50 cursor-pointer"
-                  onClick={() => setSelectedEvent(e)}
-                >
-                  <td className="px-4 py-2 whitespace-nowrap text-xs font-mono text-gray-500">
-                    {e.timestamp ? format(parseUTC(e.timestamp), 'HH:mm:ss') : '-'}
-                  </td>
-                  <td className="px-4 py-2 whitespace-nowrap">
-                    <span className={clsx(
-                      'px-2 py-0.5 text-xs font-medium rounded',
-                      e.hook_type === 'UserPromptSubmit' && 'bg-purple-100 text-purple-700',
-                      e.hook_type === 'PreToolUse' && 'bg-blue-100 text-blue-700',
-                      e.hook_type === 'PostToolUse' && 'bg-green-100 text-green-700',
-                      e.hook_type === 'Stop' && 'bg-gray-100 text-gray-700',
-                      e.hook_type === 'Notification' && 'bg-yellow-100 text-yellow-700'
-                    )}>
-                      {e.hook_type}
-                    </span>
-                  </td>
-                  <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-700">
-                    {e.tool_name || '-'}
-                  </td>
-                  <td className="px-4 py-2 max-w-xl">
-                    <p className="text-xs text-gray-600 truncate">
-                      {e.user_prompt || (e.tool_input ? JSON.stringify(e.tool_input).slice(0, 100) : '-')}
-                    </p>
-                  </td>
-                </tr>
-              ))}
-              {filteredEvents.length === 0 && (
-                <tr>
-                  <td colSpan={4} className="px-4 py-12 text-center text-gray-500">
-                    <Activity className="h-12 w-12 text-gray-300 mx-auto mb-2" />
-                    {search ? '无匹配结果' : '暂无事件'}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        )}
-      </div>
-
-      {/* Event Detail Drawer */}
-      <Drawer
-        open={selectedEvent !== null}
-        onClose={() => setSelectedEvent(null)}
-        title="事件详情"
-      >
-        {selectedEvent && (
-          <div className="space-y-4">
-            <div>
-              <div className="text-xs text-gray-500 mb-1">事件 ID</div>
-              <div className="text-sm font-mono text-gray-900">{selectedEvent.event_id}</div>
-            </div>
-            <div>
-              <div className="text-xs text-gray-500 mb-1">类型</div>
-              <span className={clsx(
-                'px-2 py-1 text-xs font-medium rounded',
-                selectedEvent.hook_type === 'UserPromptSubmit' && 'bg-purple-100 text-purple-700',
-                selectedEvent.hook_type === 'PreToolUse' && 'bg-blue-100 text-blue-700',
-                selectedEvent.hook_type === 'PostToolUse' && 'bg-green-100 text-green-700',
-              )}>
-                {selectedEvent.hook_type}
-              </span>
-            </div>
-            <div>
-              <div className="text-xs text-gray-500 mb-1">时间</div>
-              <div className="text-sm text-gray-900">
-                {selectedEvent.timestamp ? format(parseUTC(selectedEvent.timestamp), 'yyyy-MM-dd HH:mm:ss') : '-'}
-              </div>
-            </div>
-            <div>
-              <div className="text-xs text-gray-500 mb-1">Session</div>
-              <div className="text-sm font-mono text-gray-700">{selectedEvent.session_id}</div>
-            </div>
-            <div>
-              <div className="text-xs text-gray-500 mb-1">项目路径</div>
-              <div className="text-sm font-mono text-gray-700 break-all">{selectedEvent.project_path}</div>
-            </div>
-            {selectedEvent.tool_name && (
-              <div>
-                <div className="text-xs text-gray-500 mb-1">工具</div>
-                <div className="text-sm text-gray-900">{selectedEvent.tool_name}</div>
-              </div>
-            )}
-            {selectedEvent.user_prompt && (
-              <div>
-                <div className="text-xs text-gray-500 mb-1">用户提示</div>
-                <div className="bg-purple-50 rounded p-3 text-sm text-gray-800 whitespace-pre-wrap">
-                  {selectedEvent.user_prompt}
-                </div>
-              </div>
-            )}
-            {selectedEvent.tool_input && (
-              <div>
-                <div className="text-xs text-gray-500 mb-1">工具输入</div>
-                <CodeBlock data={selectedEvent.tool_input} language="json" maxHeight="300px" />
-              </div>
-            )}
-            {selectedEvent.tool_output && (
-              <div>
-                <div className="text-xs text-gray-500 mb-1">工具输出</div>
-                <CodeBlock
-                  data={selectedEvent.tool_output}
-                  language={typeof selectedEvent.tool_output === 'string' ? 'text' : 'json'}
-                  maxHeight="400px"
-                />
-              </div>
-            )}
-          </div>
-        )}
-      </Drawer>
-    </div>
-  )
-}