@winspan/claude-forge 8.41.0 → 8.51.0

package/web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@winspan/claude-forge-web",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "lucide-react": "^0.379.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^19.2.6",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.23.1",
+    "react-syntax-highlighter": "^16.1.1",
+    "recharts": "^3.8.1",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12"
+  }
+}

package/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/web/src/App.tsx

@@ -0,0 +1,110 @@
+import { lazy, Suspense } from 'react'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import Layout from './components/Layout'
+
+// 路由级代码分割：按需加载 page 组件，缩小主 bundle
+const Dashboard = lazy(() => import('./pages/Dashboard'))
+const Sessions = lazy(() => import('./pages/Sessions'))
+const SessionDetail = lazy(() => import('./pages/SessionDetail'))
+const Events = lazy(() => import('./pages/Events'))
+const Skills = lazy(() => import('./pages/Skills'))
+const AIConfig = lazy(() => import('./pages/AIConfig'))
+const Tasks = lazy(() => import('./pages/Tasks'))
+const TaskDetail = lazy(() => import('./pages/TaskDetail'))
+const Reports = lazy(() => import('./pages/Reports'))
+
+function PageFallback() {
+  return (
+    <div className="flex items-center justify-center h-full py-16">
+      <div className="flex items-center gap-3 text-sm text-gray-500">
+        <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
+        加载中...
+      </div>
+    </div>
+  )
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route
+          index
+          element={<Navigate to="/dashboard" replace />}
+        />
+        <Route
+          path="dashboard"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Dashboard />
+            </Suspense>
+          }
+        />
+        <Route
+          path="sessions"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Sessions />
+            </Suspense>
+          }
+        />
+        <Route
+          path="sessions/:id"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <SessionDetail />
+            </Suspense>
+          }
+        />
+        <Route
+          path="events"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Events />
+            </Suspense>
+          }
+        />
+        <Route
+          path="skills"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Skills />
+            </Suspense>
+          }
+        />
+        <Route
+          path="ai-config"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <AIConfig />
+            </Suspense>
+          }
+        />
+        <Route
+          path="tasks"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Tasks />
+            </Suspense>
+          }
+        />
+        <Route
+          path="tasks/:taskId"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <TaskDetail />
+            </Suspense>
+          }
+        />
+        <Route
+          path="reports"
+          element={
+            <Suspense fallback={<PageFallback />}>
+              <Reports />
+            </Suspense>
+          }
+        />
+      </Route>
+    </Routes>
+  )
+}

package/web/src/components/CodeBlock.tsx

@@ -0,0 +1,31 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface Props {
+  data: any
+  language?: string
+  maxHeight?: string
+}
+
+export default function CodeBlock({ data, language = 'json', maxHeight = '400px' }: Props) {
+  const content = typeof data === 'string'
+    ? data
+    : JSON.stringify(data, null, 2)
+
+  return (
+    <div className="rounded overflow-hidden" style={{ maxHeight, overflowY: 'auto' }}>
+      <SyntaxHighlighter
+        language={language}
+        style={oneLight}
+        customStyle={{
+          margin: 0,
+          fontSize: '12px',
+          padding: '12px',
+          background: '#f9fafb',
+        }}
+      >
+        {content}
+      </SyntaxHighlighter>
+    </div>
+  )
+}

package/web/src/components/Confirm.tsx

@@ -0,0 +1,96 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+import { AlertTriangle } from 'lucide-react'
+
+interface ConfirmOptions {
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  variant?: 'danger' | 'warning' | 'info'
+}
+
+interface ConfirmContextValue {
+  confirm: (options: ConfirmOptions) => Promise<boolean>
+}
+
+const ConfirmContext = createContext<ConfirmContextValue | null>(null)
+
+export function useConfirm() {
+  const ctx = useContext(ConfirmContext)
+  if (!ctx) throw new Error('useConfirm must be used within ConfirmProvider')
+  return ctx.confirm
+}
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<{
+    open: boolean
+    options: ConfirmOptions | null
+    resolve: ((value: boolean) => void) | null
+  }>({ open: false, options: null, resolve: null })
+
+  const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => {
+    return new Promise((resolve) => {
+      setState({ open: true, options, resolve })
+    })
+  }, [])
+
+  const handleClose = (result: boolean) => {
+    if (state.resolve) state.resolve(result)
+    setState({ open: false, options: null, resolve: null })
+  }
+
+  const variant = state.options?.variant || 'danger'
+  const iconColor = {
+    danger: 'text-red-600',
+    warning: 'text-yellow-600',
+    info: 'text-blue-600',
+  }[variant]
+  const btnColor = {
+    danger: 'bg-red-600 hover:bg-red-700',
+    warning: 'bg-yellow-600 hover:bg-yellow-700',
+    info: 'bg-indigo-600 hover:bg-indigo-700',
+  }[variant]
+
+  return (
+    <ConfirmContext.Provider value={{ confirm }}>
+      {children}
+      {state.open && state.options && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+          <div
+            className="absolute inset-0 bg-black bg-opacity-50"
+            onClick={() => handleClose(false)}
+          />
+          <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
+            <div className="flex items-start gap-4">
+              <div className={`flex-shrink-0 ${iconColor}`}>
+                <AlertTriangle className="h-6 w-6" />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  {state.options.title}
+                </h3>
+                <p className="text-sm text-gray-600 whitespace-pre-wrap">
+                  {state.options.message}
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                onClick={() => handleClose(false)}
+                className="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50"
+              >
+                {state.options.cancelText || '取消'}
+              </button>
+              <button
+                onClick={() => handleClose(true)}
+                className={`px-4 py-2 text-sm text-white rounded ${btnColor}`}
+              >
+                {state.options.confirmText || '确定'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ConfirmContext.Provider>
+  )
+}

package/web/src/components/Drawer.tsx

@@ -0,0 +1,60 @@
+import { ReactNode, useEffect } from 'react'
+import { X } from 'lucide-react'
+import clsx from 'clsx'
+
+interface DrawerProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  width?: string
+}
+
+export default function Drawer({ open, onClose, title, children, width = 'w-[600px]' }: DrawerProps) {
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    if (open) {
+      document.addEventListener('keydown', handleEsc)
+      document.body.style.overflow = 'hidden'
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEsc)
+      document.body.style.overflow = ''
+    }
+  }, [open, onClose])
+
+  return (
+    <>
+      <div
+        className={clsx(
+          'fixed inset-0 bg-gray-600 transition-opacity z-40',
+          open ? 'bg-opacity-50 visible' : 'bg-opacity-0 invisible pointer-events-none'
+        )}
+        onClick={onClose}
+      />
+      <div
+        className={clsx(
+          'fixed inset-y-0 right-0 bg-white shadow-xl z-50 transform transition-transform flex flex-col',
+          width,
+          'max-w-full',
+          open ? 'translate-x-0' : 'translate-x-full'
+        )}
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 flex-shrink-0">
+          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-6">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

package/web/src/components/Layout.tsx

@@ -0,0 +1,145 @@
+import { Outlet, Link, useLocation } from 'react-router-dom'
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Activity,
+  Menu,
+  X,
+  BookOpen,
+  Cpu,
+  ListTodo,
+  FileText,
+} from 'lucide-react'
+import { useState } from 'react'
+import clsx from 'clsx'
+
+interface NavItem {
+  name: string
+  href: string
+  icon: any
+}
+
+interface NavSection {
+  title: string
+  items: NavItem[]
+}
+
+const sections: NavSection[] = [
+  {
+    title: '总览',
+    items: [
+      { name: '仪表盘', href: '/dashboard', icon: LayoutDashboard },
+    ],
+  },
+  {
+    title: '活动',
+    items: [
+      { name: '会话', href: '/sessions', icon: MessageSquare },
+      { name: '任务', href: '/tasks', icon: ListTodo },
+      { name: '周报', href: '/reports', icon: FileText },
+      { name: '事件', href: '/events', icon: Activity },
+    ],
+  },
+  {
+    title: '配置',
+    items: [
+      { name: 'Skill 管理', href: '/skills', icon: BookOpen },
+      { name: 'AI 配置', href: '/ai-config', icon: Cpu },
+    ],
+  },
+]
+
+export default function Layout() {
+  const location = useLocation()
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  const renderNav = (onClick?: () => void) => (
+    <>
+      {sections.map((section) => (
+        <div key={section.title} className="mb-4">
+          <div className="px-3 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
+            {section.title}
+          </div>
+          {section.items.map((item) => {
+            const Icon = item.icon
+            const isActive = location.pathname === item.href || location.pathname.startsWith(item.href + '/')
+            return (
+              <Link
+                key={item.name}
+                to={item.href}
+                onClick={onClick}
+                className={clsx(
+                  'group flex items-center px-3 py-2 text-sm font-medium rounded-md mb-0.5',
+                  isActive
+                    ? 'bg-indigo-50 text-indigo-600'
+                    : 'text-gray-700 hover:bg-gray-50'
+                )}
+              >
+                <Icon className={clsx('mr-3 h-4 w-4', isActive ? 'text-indigo-600' : 'text-gray-400')} />
+                {item.name}
+              </Link>
+            )
+          })}
+        </div>
+      ))}
+    </>
+  )
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Mobile sidebar */}
+      <div className={clsx('fixed inset-0 z-40 lg:hidden', sidebarOpen ? 'block' : 'hidden')}>
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
+        <div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white">
+          <div className="flex items-center justify-between px-4 py-4 border-b">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
+                CF
+              </div>
+              <h1 className="text-base font-bold text-gray-900">Claude Forge</h1>
+            </div>
+            <button onClick={() => setSidebarOpen(false)} className="text-gray-500">
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+          <nav className="flex-1 overflow-y-auto px-2 py-4">
+            {renderNav(() => setSidebarOpen(false))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Desktop sidebar */}
+      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+        <div className="flex flex-col flex-grow border-r border-gray-200 bg-white">
+          <div className="flex items-center gap-2 px-4 py-4 border-b">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
+              CF
+            </div>
+            <h1 className="text-base font-bold text-gray-900">Claude Forge</h1>
+          </div>
+          <nav className="flex-1 overflow-y-auto px-2 py-4">{renderNav()}</nav>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="lg:pl-64">
+        <div className="sticky top-0 z-10 flex h-14 flex-shrink-0 bg-white border-b border-gray-200 lg:hidden">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="px-4 text-gray-500 focus:outline-none"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <div className="flex flex-1 items-center px-4">
+            <h1 className="text-base font-semibold text-gray-900">Claude Forge</h1>
+          </div>
+        </div>
+        <main className="py-6">
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/web/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,77 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface Props {
+  content: string
+  className?: string
+}
+
+export default function MarkdownRenderer({ content, className = '' }: Props) {
+  return (
+    <div className={`prose prose-sm max-w-none ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ inline, className, children, ...props }: any) {
+            const match = /language-(\w+)/.exec(className || '')
+            const lang = match?.[1]
+            if (!inline && lang) {
+              return (
+                <SyntaxHighlighter
+                  style={oneLight}
+                  language={lang}
+                  PreTag="div"
+                  customStyle={{
+                    margin: 0,
+                    borderRadius: '6px',
+                    fontSize: '12px',
+                    padding: '12px',
+                  }}
+                  {...props}
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              )
+            }
+            return (
+              <code
+                className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-xs font-mono"
+                {...props}
+              >
+                {children}
+              </code>
+            )
+          },
+          h1: ({ children }) => <h1 className="text-lg font-bold text-gray-900 mt-4 mb-2">{children}</h1>,
+          h2: ({ children }) => <h2 className="text-base font-bold text-gray-900 mt-3 mb-2">{children}</h2>,
+          h3: ({ children }) => <h3 className="text-sm font-semibold text-gray-900 mt-2 mb-1">{children}</h3>,
+          p: ({ children }) => <p className="text-sm text-gray-700 my-2">{children}</p>,
+          ul: ({ children }) => <ul className="list-disc list-inside text-sm text-gray-700 my-2 space-y-0.5">{children}</ul>,
+          ol: ({ children }) => <ol className="list-decimal list-inside text-sm text-gray-700 my-2 space-y-0.5">{children}</ol>,
+          li: ({ children }) => <li className="text-sm">{children}</li>,
+          a: ({ children, href }) => (
+            <a href={href} target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-700 underline">
+              {children}
+            </a>
+          ),
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-gray-300 pl-3 italic text-gray-600 my-2">
+              {children}
+            </blockquote>
+          ),
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-2">
+              <table className="min-w-full border border-gray-200 text-sm">{children}</table>
+            </div>
+          ),
+          th: ({ children }) => <th className="border border-gray-200 px-2 py-1 bg-gray-50 font-semibold text-left">{children}</th>,
+          td: ({ children }) => <td className="border border-gray-200 px-2 py-1">{children}</td>,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/web/src/components/SearchInput.tsx

@@ -0,0 +1,31 @@
+import { Search, X } from 'lucide-react'
+
+interface Props {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export default function SearchInput({ value, onChange, placeholder, className = '' }: Props) {
+  return (
+    <div className={`relative ${className}`}>
+      <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder || '搜索...'}
+        className="w-full pl-8 pr-8 py-1.5 text-sm border border-gray-300 rounded-md bg-white focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  )
+}