@winspan/claude-forge 8.41.0 → 8.50.6

package/web/src/pages/Sessions.tsx

@@ -0,0 +1,205 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState, useMemo } from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { parseUTC } from '../utils/time'
+import { zhCN } from 'date-fns/locale'
+import { MessageSquare, Clock, Activity, Download } from 'lucide-react'
+import Drawer from '../components/Drawer'
+import SessionDetailContent from '../components/SessionDetailContent'
+import SearchInput from '../components/SearchInput'
+import { downloadJSON, downloadCSV, getTimestamp } from '../utils/export'
+import { useToast } from '../components/Toast'
+
+interface Session {
+  session_id: string
+  first_prompt: string
+  event_count: number
+  start_time: string
+  end_time: string
+}
+
+async function fetchSessions(): Promise<Session[]> {
+  const res = await fetch('/api/sessions?limit=200')
+  if (!res.ok) throw new Error('Failed to fetch sessions')
+  return res.json()
+}
+
+export default function Sessions() {
+  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [showExportMenu, setShowExportMenu] = useState(false)
+  const toast = useToast()
+
+  const { data: sessions, isLoading, error } = useQuery({
+    queryKey: ['sessions'],
+    queryFn: fetchSessions,
+    refetchInterval: 10000,
+  })
+
+  const filteredSessions = useMemo(() => {
+    if (!sessions) return []
+    if (!search.trim()) return sessions
+    const q = search.toLowerCase()
+    return sessions.filter(s =>
+      s.first_prompt?.toLowerCase().includes(q) ||
+      s.session_id.toLowerCase().includes(q)
+    )
+  }, [sessions, search])
+
+  const handleExport = (format: 'json' | 'csv') => {
+    const ts = getTimestamp()
+    if (format === 'json') {
+      downloadJSON(`sessions-${ts}.json`, filteredSessions)
+    } else {
+      downloadCSV(`sessions-${ts}.csv`, filteredSessions)
+    }
+    toast.success(`已导出 ${filteredSessions.length} 个会话`)
+    setShowExportMenu(false)
+  }
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">会话</h1>
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-gray-600">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">会话</h1>
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-red-600">加载失败: {(error as Error).message}</p>
+        </div>
+      </div>
+    )
+  }
+
+  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="relative">
+            <button
+              onClick={() => setShowExportMenu(v => !v)}
+              disabled={filteredSessions.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">
+        显示 {filteredSessions.length} 个 {search && `（已过滤）`}
+      </div>
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Session ID
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                首次提示
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                事件数
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                时间
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {filteredSessions.map((session) => (
+              <tr
+                key={session.session_id}
+                className="hover:bg-gray-50 cursor-pointer"
+                onClick={() => setSelectedSessionId(session.session_id)}
+              >
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="flex items-center gap-2 text-sm text-indigo-600 font-mono">
+                    <MessageSquare className="h-4 w-4" />
+                    {session.session_id.slice(0, 12)}...
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <p className="text-sm text-gray-900 max-w-md truncate">
+                    {session.first_prompt || '(无提示)'}
+                  </p>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span className="inline-flex items-center gap-1 text-sm text-gray-600">
+                    <Activity className="h-4 w-4" />
+                    {session.event_count}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  <span className="inline-flex items-center gap-1">
+                    <Clock className="h-4 w-4" />
+                    {session.start_time
+                      ? formatDistanceToNow(parseUTC(session.start_time), {
+                          addSuffix: true,
+                          locale: zhCN,
+                        })
+                      : '-'}
+                  </span>
+                </td>
+              </tr>
+            ))}
+            {filteredSessions.length === 0 && (
+              <tr>
+                <td colSpan={4} className="px-6 py-12 text-center text-gray-500">
+                  {search ? '无匹配结果' : '暂无会话记录'}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <Drawer
+        open={selectedSessionId !== null}
+        onClose={() => setSelectedSessionId(null)}
+        title="会话详情"
+        width="w-[800px]"
+      >
+        {selectedSessionId && <SessionDetailContent sessionId={selectedSessionId} />}
+      </Drawer>
+    </div>
+  )
+}

package/web/src/pages/Skills.tsx

@@ -0,0 +1,180 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useState, useEffect } from 'react'
+import { BookOpen, Edit2, Save, X } from 'lucide-react'
+import Drawer from '../components/Drawer'
+import MarkdownRenderer from '../components/MarkdownRenderer'
+import { useToast } from '../components/Toast'
+import { authFetch } from '../utils/auth'
+
+interface Skill {
+  name: string
+  description: string
+  content?: string
+}
+
+interface SkillsResponse {
+  skills?: Skill[]
+}
+
+async function fetchSkills(): Promise<Skill[]> {
+  const res = await fetch('/api/skills')
+  if (!res.ok) throw new Error('Failed to fetch skills')
+  const data: SkillsResponse | Skill[] = await res.json()
+  if (Array.isArray(data)) return data
+  return data.skills || []
+}
+
+async function fetchSkillDetail(name: string): Promise<Skill> {
+  const res = await fetch(`/api/skills/${name}`)
+  if (!res.ok) throw new Error('Failed to fetch')
+  return res.json()
+}
+
+async function saveSkill(name: string, content: string): Promise<void> {
+  const res = await authFetch(`/api/skills/${name}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content }),
+  })
+  if (!res.ok) throw new Error('Failed to save')
+}
+
+export default function Skills() {
+  const queryClient = useQueryClient()
+  const toast = useToast()
+  const { data: skills, isLoading } = useQuery({
+    queryKey: ['skills'],
+    queryFn: fetchSkills,
+  })
+
+  const [selectedSkill, setSelectedSkill] = useState<string | null>(null)
+  const [editing, setEditing] = useState(false)
+  const [editContent, setEditContent] = useState('')
+
+  const { data: detail } = useQuery({
+    queryKey: ['skill-detail', selectedSkill],
+    queryFn: () => fetchSkillDetail(selectedSkill!),
+    enabled: !!selectedSkill,
+  })
+
+  useEffect(() => {
+    if (detail?.content) setEditContent(detail.content)
+    setEditing(false)
+  }, [detail])
+
+  const mutation = useMutation({
+    mutationFn: (vars: { name: string; content: string }) => saveSkill(vars.name, vars.content),
+    onSuccess: () => {
+      toast.success('Skill 已保存')
+      setEditing(false)
+      queryClient.invalidateQueries({ queryKey: ['skill-detail', selectedSkill] })
+      queryClient.invalidateQueries({ queryKey: ['skills'] })
+    },
+    onError: (e: Error) => toast.error(`保存失败: ${e.message}`),
+  })
+
+  if (isLoading) {
+    return <div className="bg-white rounded-lg shadow p-6">加载中...</div>
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Skill 管理</h1>
+        <div className="text-sm text-gray-500">共 {skills?.length || 0} 个 Skill</div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {skills?.map((skill) => (
+          <div
+            key={skill.name}
+            className="bg-white rounded-lg shadow p-5 hover:shadow-md transition-shadow cursor-pointer"
+            onClick={() => setSelectedSkill(skill.name)}
+          >
+            <div className="flex items-start gap-3">
+              <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
+                <BookOpen className="h-5 w-5 text-purple-600" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-gray-900 truncate">{skill.name}</h3>
+                <p className="text-xs text-gray-500 mt-1 line-clamp-3">
+                  {skill.description || '(无描述)'}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Skill Detail Drawer */}
+      <Drawer
+        open={selectedSkill !== null}
+        onClose={() => { setSelectedSkill(null); setEditing(false) }}
+        title={`Skill: ${selectedSkill}`}
+        width="w-[800px]"
+      >
+        {detail && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 mb-2">
+              <BookOpen className="h-5 w-5 text-purple-600" />
+              <h3 className="text-lg font-semibold text-gray-900">{detail.name}</h3>
+            </div>
+
+            <div>
+              <div className="text-xs text-gray-500 mb-1">描述</div>
+              <div className="text-sm text-gray-800">{detail.description}</div>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <div className="text-xs text-gray-500">完整内容 (Markdown)</div>
+                <div className="flex items-center gap-2">
+                  {!editing ? (
+                    <button
+                      onClick={() => setEditing(true)}
+                      className="inline-flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700"
+                    >
+                      <Edit2 className="h-3 w-3" />编辑
+                    </button>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => { setEditing(false); setEditContent(detail.content || '') }}
+                        className="inline-flex items-center gap-1 text-xs text-gray-600 hover:text-gray-700"
+                      >
+                        <X className="h-3 w-3" />取消
+                      </button>
+                      <button
+                        onClick={() => mutation.mutate({ name: detail.name, content: editContent })}
+                        disabled={mutation.isPending}
+                        className="inline-flex items-center gap-1 text-xs bg-indigo-600 text-white px-2 py-1 rounded hover:bg-indigo-700 disabled:bg-gray-400"
+                      >
+                        <Save className="h-3 w-3" />
+                        {mutation.isPending ? '保存中...' : '保存'}
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+              {editing ? (
+                <textarea
+                  value={editContent}
+                  onChange={(e) => setEditContent(e.target.value)}
+                  className="w-full font-mono text-xs bg-gray-50 rounded p-3 border border-gray-300 focus:border-indigo-500 focus:outline-none"
+                  rows={20}
+                />
+              ) : (
+                <div className="bg-white rounded p-3 border border-gray-200 max-h-[500px] overflow-y-auto">
+                  <MarkdownRenderer content={detail.content || ''} />
+                </div>
+              )}
+              {mutation.isError && (
+                <div className="text-xs text-red-600 mt-1">保存失败：{(mutation.error as Error).message}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </Drawer>
+    </div>
+  )
+}