@winspan/claude-forge 8.53.2 → 8.54.4

package/web/package.json

@@ -1,35 +0,0 @@
-{
-  "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

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

package/web/src/App.tsx

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

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

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

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

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

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

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