@winspan/claude-forge 8.39.0 → 8.50.6

package/web/src/pages/Events.tsx

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