@openspecui/web 0.9.0 → 0.9.3

package/src/lib/use-cli-runner.tsx

@@ -1,433 +0,0 @@
-import { Check, Loader2, Sparkles, XCircle } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { isStaticMode } from './static-mode'
-import { trpcClient } from './trpc'
-
-export type CommandRunStatus = 'idle' | 'loading' | 'running' | 'success' | 'error'
-export type OverallStatus = 'idle' | 'running' | 'success' | 'error'
-export type CliRunnerLine =
-  | { id: string; kind: 'ascii'; text: string; tone?: 'success' | 'error' | 'info' }
-  | { id: string; kind: 'html'; node: ReactNode }
-
-export interface CommandDescriptor {
-  id: string
-  command: string
-  args: string[]
-  status: CommandRunStatus
-  exitCode: number | null
-}
-
-export type ProcessEvent = 'data' | 'error' | 'close' | 'exit'
-
-export interface CommandProcess {
-  id: string
-  command: string
-  args: string[]
-  status: CommandRunStatus
-  exitCode: number | null
-  done: Promise<number | null>
-  on: (event: ProcessEvent, handler: (payload: string | number | null) => void) => () => void
-  cancel: () => void
-}
-
-interface CommandInput {
-  command: string
-  args?: string[]
-}
-
-interface UseCliRunnerOptions {
-  onCreateProcess?: (process: CommandProcess) => void
-}
-
-interface LogLine {
-  id: string
-  commandId: string
-  text: string
-  tone?: 'success' | 'error' | 'info'
-  kind?: 'stdout' | 'stderr' | 'meta'
-}
-
-function createId() {
-  return typeof crypto !== 'undefined' && crypto.randomUUID
-    ? crypto.randomUUID()
-    : Math.random().toString(36).slice(2)
-}
-
-function asCommandText(command: string, args: string[]) {
-  const argText = args.length > 0 ? ` ${args.join(' ')}` : ''
-  return `${command}${argText}`
-}
-
-function deriveOverallStatus(commands: CommandDescriptor[]): OverallStatus {
-  if (commands.some((c) => c.status === 'loading' || c.status === 'running')) return 'running'
-  if (commands.some((c) => c.status === 'error')) return 'error'
-  if (commands.length > 0 && commands.every((c) => c.status === 'success')) return 'success'
-  return 'idle'
-}
-
-export function useCliRunner(options: UseCliRunnerOptions = {}) {
-  const [commands, setCommands] = useState<CommandDescriptor[]>([])
-  const [logs, setLogs] = useState<LogLine[]>([])
-  const [lastExitCode, setLastExitCode] = useState<number | null>(null)
-
-  const activeSubscriptionRef = useRef<{ unsubscribe: () => void } | null>(null)
-  const activeCommandIdRef = useRef<string | null>(null)
-  const commandStateRef = useRef<CommandDescriptor[]>([])
-  const optionsRef = useRef<UseCliRunnerOptions>(options)
-
-  useEffect(() => {
-    optionsRef.current = options
-  }, [options])
-
-  const updateCommands = useCallback(
-    (updater: (prev: CommandDescriptor[]) => CommandDescriptor[]) => {
-      setCommands((prev) => {
-        const next = updater(prev)
-        commandStateRef.current = next
-        return next
-      })
-    },
-    []
-  )
-
-  // keep ref in sync for runAll loop
-  useEffect(() => {
-    commandStateRef.current = commands
-  }, [commands])
-
-  const reset = useCallback(() => {
-    activeSubscriptionRef.current?.unsubscribe?.()
-    activeSubscriptionRef.current = null
-    activeCommandIdRef.current = null
-    commandStateRef.current = []
-    setCommands([])
-    setLogs([])
-    setLastExitCode(null)
-  }, [])
-
-  const cancel = useCallback(() => {
-    activeSubscriptionRef.current?.unsubscribe?.()
-    activeSubscriptionRef.current = null
-    const activeId = activeCommandIdRef.current
-    if (activeId) {
-      updateCommands((prev) =>
-        prev.map((c) => (c.id === activeId ? { ...c, status: 'error', exitCode: null } : c))
-      )
-      setLogs((prev) => [
-        ...prev,
-        {
-          id: createId(),
-          commandId: activeId,
-          kind: 'meta',
-          text: 'Process cancelled by user',
-          tone: 'error',
-        },
-      ])
-    }
-    activeCommandIdRef.current = null
-  }, [updateCommands])
-
-  const add = useCallback((command: string, args: string[] = [], at = -1) => {
-    const id = createId()
-    updateCommands((prev) => {
-      const next = [...prev]
-      const descriptor: CommandDescriptor = {
-        id,
-        command,
-        args,
-        status: 'idle',
-        exitCode: null,
-      }
-      if (at >= 0 && at < next.length) {
-        next.splice(at, 0, descriptor)
-      } else {
-        next.push(descriptor)
-      }
-      return next
-    })
-    return id
-  }, [])
-
-  const remove = useCallback(
-    (id: string) => {
-      updateCommands((prev) => prev.filter((c) => c.id !== id))
-      setLogs((prev) => prev.filter((log) => log.commandId !== id))
-      if (activeCommandIdRef.current === id) {
-        cancel()
-      }
-    },
-    [cancel, updateCommands]
-  )
-
-  const replaceAll = useCallback(
-    (items: CommandInput[]) => {
-      activeSubscriptionRef.current?.unsubscribe?.()
-      activeSubscriptionRef.current = null
-      activeCommandIdRef.current = null
-      setLogs([])
-      setLastExitCode(null)
-      updateCommands(() =>
-        items.map((item) => ({
-          id: createId(),
-          command: item.command,
-          args: item.args ?? [],
-          status: 'idle',
-          exitCode: null,
-        }))
-      )
-    },
-    [updateCommands]
-  )
-
-  const list = useCallback(() => [...commandStateRef.current], [])
-
-  const appendLog = useCallback((log: LogLine) => {
-    setLogs((prev) => [...prev, log])
-  }, [])
-
-  const run = useCallback(
-    async (id?: string): Promise<CommandProcess | null> => {
-      // Don't run CLI commands in static mode
-      if (isStaticMode()) {
-        console.warn('CLI runner is disabled in static mode')
-        return null
-      }
-
-      const targetId = id ?? commandStateRef.current.find((c) => c.status === 'idle')?.id
-      const target = commandStateRef.current.find((c) => c.id === targetId)
-      if (!target) return null
-
-      activeSubscriptionRef.current?.unsubscribe?.()
-      activeCommandIdRef.current = target.id
-
-      updateCommands((prev) =>
-        prev.map((c) => (c.id === target.id ? { ...c, status: 'loading', exitCode: null } : c))
-      )
-
-      let resolveDone: (code: number | null) => void = () => {}
-      const done = new Promise<number | null>((resolve) => {
-        resolveDone = resolve
-      })
-
-      const listeners: Record<ProcessEvent, Set<(payload: string | number | null) => void>> = {
-        data: new Set(),
-        error: new Set(),
-        close: new Set(),
-        exit: new Set(),
-      }
-
-      const emit = (event: ProcessEvent, payload: string | number | null) => {
-        listeners[event].forEach((handler) => handler(payload))
-      }
-
-      const process: CommandProcess = {
-        id: target.id,
-        command: target.command,
-        args: target.args,
-        status: 'loading',
-        exitCode: null,
-        done,
-        on: (event, handler) => {
-          listeners[event].add(handler)
-          return () => listeners[event].delete(handler)
-        },
-        cancel: () => {
-          cancel()
-        },
-      }
-
-      optionsRef.current.onCreateProcess?.(process)
-
-      const subscription = trpcClient.cli.runCommandStream.subscribe(
-        { command: target.command, args: target.args },
-        {
-          onData: (event) => {
-            if (event.type === 'command') {
-              updateCommands((prev) =>
-                prev.map((c) => (c.id === target.id ? { ...c, status: 'running' } : c))
-              )
-              process.status = 'running'
-              emit('data', event.data ?? '')
-              return
-            }
-
-            if (event.type === 'stdout' && event.data) {
-              appendLog({
-                id: createId(),
-                commandId: target.id,
-                kind: 'stdout',
-                text: event.data,
-              })
-              emit('data', event.data)
-              return
-            }
-
-            if (event.type === 'stderr' && event.data) {
-              appendLog({
-                id: createId(),
-                commandId: target.id,
-                kind: 'stderr',
-                text: event.data,
-                tone: 'error',
-              })
-              emit('error', event.data)
-              return
-            }
-
-            if (event.type === 'exit') {
-              const exitCode = event.exitCode ?? null
-              setLastExitCode(exitCode)
-              const status: CommandRunStatus = exitCode === 0 ? 'success' : 'error'
-              updateCommands((prev) =>
-                prev.map((c) => (c.id === target.id ? { ...c, status, exitCode } : c))
-              )
-              process.status = status
-              process.exitCode = exitCode
-              appendLog({
-                id: createId(),
-                commandId: target.id,
-                kind: 'meta',
-                text: `Process exited with code ${exitCode ?? 'unknown'}`,
-                tone: exitCode === 0 ? 'success' : 'error',
-              })
-              emit('close', exitCode)
-              emit('exit', exitCode)
-              resolveDone(exitCode)
-              activeSubscriptionRef.current?.unsubscribe?.()
-              activeSubscriptionRef.current = null
-              activeCommandIdRef.current = null
-            }
-          },
-          onError: (err) => {
-            const message = err instanceof Error ? err.message : String(err)
-            updateCommands((prev) =>
-              prev.map((c) => (c.id === target.id ? { ...c, status: 'error', exitCode: null } : c))
-            )
-            process.status = 'error'
-            appendLog({
-              id: createId(),
-              commandId: target.id,
-              kind: 'meta',
-              text: `Error: ${message}`,
-              tone: 'error',
-            })
-            emit('error', message)
-            resolveDone(null)
-            activeSubscriptionRef.current?.unsubscribe?.()
-            activeSubscriptionRef.current = null
-            activeCommandIdRef.current = null
-          },
-        }
-      )
-
-      process.status = 'running'
-      activeSubscriptionRef.current = subscription
-
-      return process
-    },
-    [appendLog, cancel, updateCommands]
-  )
-
-  const runAll = useCallback(async () => {
-    let next = commandStateRef.current.find((c) => c.status === 'idle')
-    while (next) {
-      const process = await run(next.id)
-      if (!process) break
-      const exitCode = await process.done
-      if (exitCode !== 0) break
-      next = commandStateRef.current.find((c) => c.status === 'idle')
-    }
-  }, [run])
-
-  useEffect(() => {
-    return () => {
-      cancel()
-    }
-  }, [cancel])
-
-  const lines: CliRunnerLine[] = useMemo(
-    () =>
-      commands.flatMap((cmd) => {
-        const statusIcon =
-          cmd.status === 'loading' ? (
-            <Loader2 className="h-3 w-3 animate-spin text-sky-300" />
-          ) : cmd.status === 'running' ? (
-            <div className="flex items-center gap-1 text-amber-200">
-              <Sparkles className="h-3 w-3 animate-pulse" />
-              <Loader2 className="h-3 w-3 animate-spin" />
-            </div>
-          ) : cmd.status === 'success' ? (
-            <Check className="h-3 w-3 text-green-400" />
-          ) : cmd.status === 'error' ? (
-            <XCircle className="h-3 w-3 text-red-400" />
-          ) : null
-
-        const headerText =
-          cmd.status === 'idle'
-            ? `# ${asCommandText(cmd.command, cmd.args)}`
-            : `$ ${asCommandText(cmd.command, cmd.args)}`
-
-        const header: CliRunnerLine[] = [
-          {
-            id: `cmd-${cmd.id}`,
-            kind: 'html',
-            node: (
-              <div className="flex items-center gap-2">
-                <span
-                  className={
-                    cmd.status === 'running'
-                      ? 'terminal-shimmer'
-                      : cmd.status === 'loading'
-                        ? 'animate-pulse text-blue-200'
-                        : cmd.status === 'success'
-                          ? 'text-green-300'
-                          : cmd.status === 'error'
-                            ? 'text-red-300'
-                            : 'text-zinc-200'
-                  }
-                >
-                  {headerText}
-                </span>
-                {statusIcon}
-              </div>
-            ),
-          },
-        ]
-
-        const body: CliRunnerLine[] = logs
-          .filter((log) => log.commandId === cmd.id)
-          .map((log) => ({
-            id: log.id,
-            kind: 'ascii' as const,
-            text: log.text,
-            tone: log.tone,
-          }))
-
-        return [...header, ...body]
-      }),
-    [commands, logs]
-  )
-
-  const overallStatus = useMemo(() => deriveOverallStatus(commands), [commands])
-  const hasStarted = useMemo(() => commands.some((c) => c.status !== 'idle'), [commands])
-
-  return {
-    lines,
-    status: overallStatus,
-    exitCode: lastExitCode,
-    hasStarted,
-    commands: useMemo(
-      () => ({
-        add,
-        remove,
-        list,
-        replaceAll,
-        run,
-        runAll,
-      }),
-      [add, list, remove, replaceAll, run, runAll]
-    ),
-    reset,
-    cancel,
-  }
-}

package/src/lib/use-dark-mode.ts

@@ -1,28 +0,0 @@
-import { useSyncExternalStore } from 'react'
-
-function subscribe(callback: () => void) {
-  const observer = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      if (mutation.attributeName === 'class') {
-        callback()
-      }
-    }
-  })
-
-  observer.observe(document.documentElement, { attributes: true })
-
-  return () => observer.disconnect()
-}
-
-function getSnapshot() {
-  return document.documentElement.classList.contains('dark')
-}
-
-function getServerSnapshot() {
-  return false
-}
-
-/** Hook to detect dark mode from document.documentElement.classList */
-export function useDarkMode() {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}

package/src/lib/use-server-status.ts

@@ -1,208 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { getHealthUrl } from './api-config'
-import { isStaticMode } from './static-mode'
-import { getWsClientInstance, WS_RETRY_DELAY_MS } from './trpc'
-
-export interface ServerStatus {
-  connected: boolean
-  projectDir: string | null
-  dirName: string | null
-  watcherEnabled: boolean
-  error: string | null
-  /** WebSocket 连接状态 */
-  wsState: 'idle' | 'connecting' | 'pending'
-  /** 重连倒计时（秒），仅在 disconnected 时有值 */
-  reconnectCountdown: number | null
-}
-
-/**
- * Hook to monitor server connection status and get project info
- */
-export function useServerStatus(): ServerStatus {
-  const [status, setStatus] = useState<ServerStatus>({
-    connected: false,
-    projectDir: null,
-    dirName: null,
-    watcherEnabled: false,
-    error: null,
-    wsState: 'idle',
-    reconnectCountdown: null,
-  })
-
-  // 用于追踪重连倒计时
-  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const disconnectTimeRef = useRef<number | null>(null)
-
-  // 开始重连倒计时
-  const startReconnectCountdown = useCallback(() => {
-    disconnectTimeRef.current = Date.now()
-
-    // 清除之前的倒计时
-    if (countdownRef.current) {
-      clearInterval(countdownRef.current)
-    }
-
-    // 立即设置初始倒计时
-    setStatus((prev) => ({
-      ...prev,
-      reconnectCountdown: Math.ceil(WS_RETRY_DELAY_MS / 1000),
-    }))
-
-    // 每秒更新倒计时
-    countdownRef.current = setInterval(() => {
-      if (disconnectTimeRef.current === null) return
-
-      const elapsed = Date.now() - disconnectTimeRef.current
-      const remaining = Math.max(0, Math.ceil((WS_RETRY_DELAY_MS - elapsed) / 1000))
-
-      setStatus((prev) => ({
-        ...prev,
-        reconnectCountdown: remaining > 0 ? remaining : null,
-      }))
-
-      // 倒计时结束时清除 interval
-      if (remaining <= 0 && countdownRef.current) {
-        clearInterval(countdownRef.current)
-        countdownRef.current = null
-        disconnectTimeRef.current = null
-      }
-    }, 200)
-  }, [])
-
-  // 停止重连倒计时
-  const stopReconnectCountdown = useCallback(() => {
-    if (countdownRef.current) {
-      clearInterval(countdownRef.current)
-      countdownRef.current = null
-    }
-    disconnectTimeRef.current = null
-    setStatus((prev) => ({ ...prev, reconnectCountdown: null }))
-  }, [])
-
-  // 监听 WebSocket 连接状态
-  useEffect(() => {
-    // Skip WebSocket monitoring in static mode
-    if (isStaticMode()) {
-      return
-    }
-
-    const wsClient = getWsClientInstance()
-    if (!wsClient) {
-      return
-    }
-
-    // 订阅 wsClient 的连接状态
-    const subscription = wsClient.connectionState.subscribe({
-      next: (state) => {
-        setStatus((prev) => ({
-          ...prev,
-          wsState: state.state,
-        }))
-
-        // 当进入 connecting 状态且有 error 时，说明正在重连
-        if (state.state === 'connecting' && state.error) {
-          startReconnectCountdown()
-        } else {
-          stopReconnectCountdown()
-        }
-      },
-    })
-
-    return () => {
-      subscription.unsubscribe()
-      stopReconnectCountdown()
-    }
-  }, [startReconnectCountdown, stopReconnectCountdown])
-
-  // HTTP 健康检查逻辑
-  useEffect(() => {
-    // Skip health checks in static mode
-    if (isStaticMode()) {
-      setStatus((prev) => ({
-        ...prev,
-        connected: true,
-        projectDir: 'Static Export',
-        dirName: 'Static Export',
-        watcherEnabled: false,
-        error: null,
-      }))
-      document.title = 'OpenSpec UI (Static)'
-      return
-    }
-
-    let mounted = true
-    let retryTimeout: ReturnType<typeof setTimeout>
-
-    async function checkHealth() {
-      try {
-        const response = await fetch(getHealthUrl())
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`)
-        }
-        const data = await response.json()
-
-        if (mounted) {
-          const projectDir = data.projectDir as string
-          const dirName = projectDir.split('/').pop() || projectDir
-
-          setStatus((prev) => ({
-            ...prev,
-            connected: true,
-            projectDir,
-            dirName,
-            watcherEnabled: data.watcherEnabled,
-            error: null,
-          }))
-
-          // Update document title
-          document.title = `${dirName} - OpenSpec UI`
-        }
-      } catch (err) {
-        if (mounted) {
-          setStatus((prev) => ({
-            ...prev,
-            connected: false,
-            error: err instanceof Error ? err.message : 'Connection failed',
-          }))
-
-          // Reset title on disconnect
-          document.title = 'OpenSpec UI (Disconnected)'
-
-          // Retry after 3 seconds
-          retryTimeout = setTimeout(checkHealth, 3000)
-        }
-      }
-    }
-
-    checkHealth()
-
-    // Periodic health check every 30 seconds when connected
-    const interval = setInterval(() => {
-      if (mounted) {
-        checkHealth()
-      }
-    }, 30000)
-
-    return () => {
-      mounted = false
-      clearInterval(interval)
-      clearTimeout(retryTimeout)
-    }
-  }, [])
-
-  return status
-}
-
-/**
- * 手动触发重连（通过重新创建 subscription 来间接触发）
- * 注意：由于 trpc wsClient 的 API 限制，无法直接调用重连
- * 这是一个 best-effort 的实现
- */
-export function useManualReconnect() {
-  // trpc wsClient 不暴露直接的重连 API
-  // 但可以通过 queryClient.invalidateQueries 触发重新订阅
-  return useCallback(() => {
-    // 刷新页面是最可靠的重连方式
-    window.location.reload()
-  }, [])
-}