@openspecui/web 0.9.0 → 0.9.3

package/src/components/global-archive-modal.tsx

@@ -1,205 +0,0 @@
-import { useArchiveModal } from '@/lib/archive-modal-context'
-import { useCliRunner } from '@/lib/use-cli-runner'
-import { useNavigate } from '@tanstack/react-router'
-import { Archive, CheckCircle, Loader2 } from 'lucide-react'
-import { useCallback, useEffect, useState } from 'react'
-import { Dialog } from './dialog'
-import { CliTerminal } from './cli-terminal'
-
-/**
- * 全局 Archive Modal（单一对话框，点击 Archive 后直接串行 validate -> archive）
- */
-export function GlobalArchiveModal() {
-  const navigate = useNavigate()
-  const { state, closeArchiveModal } = useArchiveModal()
-  const { open, changeId, changeName } = state
-
-  const [skipSpecs, setSkipSpecs] = useState(false)
-  const [noValidate, setNoValidate] = useState(false)
-  const [detectedArchiveId, setDetectedArchiveId] = useState<string | null>(null)
-
-  const runner = useCliRunner({
-    onCreateProcess: (process) => {
-      process.on('data', (data) => {
-        const match = /Change ['"](.+?)['"] archived as ['"](.+?)['"]/.exec(String(data))
-        if (match?.[2]) {
-          setDetectedArchiveId(match[2])
-        }
-      })
-    },
-  })
-  const { lines, status, hasStarted, commands, reset, cancel } = runner
-
-  // 当 Modal 打开时重置状态
-  useEffect(() => {
-    if (open) {
-      setSkipSpecs(false)
-      setNoValidate(false)
-      setDetectedArchiveId(null)
-    }
-  }, [open])
-
-  // 关闭并重置 - 使用 useCallback 稳定引用
-  const handleClose = () => {
-    cancel()
-    reset()
-    setSkipSpecs(false)
-    setNoValidate(false)
-    setDetectedArchiveId(null)
-    closeArchiveModal()
-  }
-
-  const buildQueue = useCallback(() => {
-    if (!changeId) return []
-    const queue: Array<{ command: string; args?: string[] }> = []
-    if (!noValidate) {
-      queue.push({ command: 'openspec', args: ['validate', changeId] })
-    }
-    const archiveArgs = ['archive', '-y', changeId]
-    if (skipSpecs) archiveArgs.push('--skip-specs')
-    archiveArgs.push('--no-validate')
-    queue.push({ command: 'openspec', args: archiveArgs })
-    return queue
-  }, [changeId, noValidate, skipSpecs])
-
-  const isRunning = status === 'running'
-  const isArchiveSuccess = status === 'success' && !!detectedArchiveId
-  const isArchiveOutputMissingId = status === 'success' && !detectedArchiveId
-  const archiveStatus = isArchiveSuccess ? 'success' : isArchiveOutputMissingId ? 'error' : status
-  const successArchiveId = detectedArchiveId ?? ''
-
-  // 开始执行 archive（若之前失败则自动重置并重跑）
-  const handleStartArchive = () => {
-    if (!changeId) return
-    commands.runAll()
-  }
-
-  const handleReset = () => {
-    reset()
-    setSkipSpecs(false)
-    setNoValidate(false)
-    setDetectedArchiveId(null)
-  }
-
-  useEffect(() => {
-    if (!open || !changeId || hasStarted) return
-    const queue = buildQueue()
-    commands.replaceAll(queue)
-  }, [buildQueue, changeId, commands, hasStarted, open])
-
-  if (!open || !changeId) return null
-
-  const borderVariant = archiveStatus === 'error' ? 'error' : archiveStatus === 'success' ? 'success' : 'default'
-
-  const footer = archiveStatus === 'success' && successArchiveId ? (
-    <div className="flex w-full items-center justify-between gap-3">
-      <div className="text-sm text-green-600">Archived as {successArchiveId}</div>
-      <div className="flex items-center gap-2">
-        <button onClick={handleClose} className="bg-muted hover:bg-muted/80 rounded-md px-4 py-2">
-          Close
-        </button>
-        <button
-          onClick={() => {
-            handleClose()
-            navigate({ to: '/archive/$changeId', params: { changeId: successArchiveId } })
-          }}
-          className="bg-primary text-primary-foreground rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
-          disabled={!successArchiveId}
-        >
-          View Archive
-        </button>
-      </div>
-    </div>
-  ) : (
-    <>
-      <button onClick={handleReset} className="bg-muted hover:bg-muted/80 rounded-md px-4 py-2">
-        {archiveStatus === 'error' ? 'Reset & Retry' : 'Reset'}
-      </button>
-      <button
-        onClick={handleClose}
-        className="bg-muted hover:bg-muted/80 rounded-md px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
-        disabled={isRunning}
-      >
-        Close
-      </button>
-      <button
-        onClick={archiveStatus === 'error' ? handleReset : handleStartArchive}
-        disabled={isRunning}
-        className="flex items-center gap-2 rounded-md bg-red-600 px-4 py-2 text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {isRunning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Archive className="h-4 w-4" />}
-        {archiveStatus === 'error' ? 'Reset before Archive' : 'Archive'}
-      </button>
-    </>
-  )
-
-  return (
-    <Dialog
-      open={open}
-      onClose={handleClose}
-      title={
-        <div className="flex items-center gap-2">
-          {archiveStatus === 'success' ? (
-            <CheckCircle className="h-5 w-5 text-green-500" />
-          ) : (
-            <Archive className="h-5 w-5 text-red-500" />
-          )}
-          <span className="font-semibold">Archive: {changeName}</span>
-        </div>
-      }
-      footer={footer}
-      borderVariant={borderVariant}
-    >
-      <div className="space-y-4">
-        <div className="bg-muted/50 rounded-lg p-3">
-          <p className="text-muted-foreground text-sm">Change to archive:</p>
-          <p className="font-medium">{changeName}</p>
-          <p className="text-muted-foreground mt-1 text-xs">ID: {changeId}</p>
-        </div>
-
-        <CliTerminal
-          lines={lines}
-          maxHeight="50vh"
-        />
-
-        {isArchiveOutputMissingId && (
-          <div className="border-amber-200 bg-amber-100 text-amber-900 rounded-md border px-3 py-2 text-sm">
-            Archive output did not include the archived change name. Treating archive as failed.
-          </div>
-        )}
-
-        <div className="space-y-3">
-          <p className="text-sm font-medium">Options</p>
-
-          <label className="flex cursor-pointer items-start gap-3">
-            <input
-              type="checkbox"
-              checked={skipSpecs}
-              onChange={(e) => setSkipSpecs(e.target.checked)}
-              className="border-border mt-1 h-4 w-4 rounded"
-              disabled={hasStarted}
-            />
-            <div>
-              <p className="text-sm font-medium">Skip specs update</p>
-              <p className="text-muted-foreground text-xs">Don't update spec files with delta changes (--skip-specs)</p>
-            </div>
-          </label>
-
-          <label className="flex cursor-pointer items-start gap-3">
-            <input
-              type="checkbox"
-              checked={noValidate}
-              onChange={(e) => setNoValidate(e.target.checked)}
-              className="border-border mt-1 h-4 w-4 rounded"
-              disabled={hasStarted}
-            />
-            <div>
-              <p className="text-sm font-medium">Skip validation</p>
-              <p className="text-muted-foreground text-xs">Don't validate the change before archiving (--no-validate)</p>
-            </div>
-          </label>
-        </div>
-      </div>
-    </Dialog>
-  )
-}

package/src/components/layout/desktop-sidebar.tsx

@@ -1,48 +0,0 @@
-import { getBasePath } from '@/lib/static-mode'
-import { useDarkMode } from '@/lib/use-dark-mode'
-import { Link } from '@tanstack/react-router'
-import { navItems, settingsItem } from './nav-items'
-
-/** Desktop sidebar navigation */
-export function DesktopSidebar() {
-  const isDark = useDarkMode()
-
-  // Get base path from runtime configuration
-  const basePath = getBasePath()
-
-  return (
-    <nav className="desktop-sidebar border-border bg-muted/30 flex w-64 shrink-0 flex-col border-r p-4">
-      <div className="mb-6">
-        <img
-          src={
-            isDark ? `${basePath}openspec_pixel_dark.svg` : `${basePath}openspec_pixel_light.svg`
-          }
-          alt="OpenSpec"
-          className="h-6"
-        />
-      </div>
-      <ul className="flex-1 space-y-1">
-        {navItems.map((item) => (
-          <li key={item.to}>
-            <Link
-              to={item.to}
-              className="hover:bg-muted [&.active]:bg-primary [&.active]:text-primary-foreground flex items-center gap-2 rounded-md px-3 py-2"
-            >
-              <item.icon className="h-4 w-4 shrink-0" />
-              <span className="font-nav text-base tracking-[0.04em]">{item.label}</span>
-            </Link>
-          </li>
-        ))}
-      </ul>
-      <div className="border-border border-t pt-4">
-        <Link
-          to={settingsItem.to}
-          className="hover:bg-muted [&.active]:bg-primary [&.active]:text-primary-foreground flex items-center gap-2 rounded-md px-3 py-2"
-        >
-          <settingsItem.icon className="h-4 w-4 shrink-0" />
-          <span className="font-nav text-base tracking-[0.04em]">{settingsItem.label}</span>
-        </Link>
-      </div>
-    </nav>
-  )
-}

package/src/components/layout/index.ts

@@ -1,6 +0,0 @@
-export { RootLayout } from './root-layout'
-export { DesktopSidebar } from './desktop-sidebar'
-export { MobileHeader } from './mobile-header'
-export { MobileTabBar } from './mobile-tabbar'
-export { StatusIndicator, DesktopStatusBar } from './status-bar'
-export { navItems, settingsItem, type NavItem } from './nav-items'

package/src/components/layout/mobile-header.tsx

@@ -1,91 +0,0 @@
-import { getBasePath } from '@/lib/static-mode'
-import { useDarkMode } from '@/lib/use-dark-mode'
-import { useServerStatus } from '@/lib/use-server-status'
-import { Link } from '@tanstack/react-router'
-import { Menu, X } from 'lucide-react'
-import { useState } from 'react'
-import { navItems, settingsItem } from './nav-items'
-import { StatusIndicator } from './status-bar'
-
-/** Mobile header with hamburger menu */
-export function MobileHeader() {
-  const [menuOpen, setMenuOpen] = useState(false)
-  const isDark = useDarkMode()
-  const serverStatus = useServerStatus()
-  const pageTitle = serverStatus.dirName ?? 'OpenSpec'
-
-  // Get base path from runtime configuration
-  const basePath = getBasePath()
-
-  return (
-    <>
-      <header className="mobile-header border-border bg-background flex h-12 items-center justify-between border-b px-4">
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => setMenuOpen(true)}
-            className="hover:bg-muted -ml-1.5 rounded-md p-1.5"
-            aria-label="Open menu"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
-          <span className="font-nav text-[12px] tracking-[0.04em]">{pageTitle}</span>
-        </div>
-        <StatusIndicator />
-      </header>
-
-      {/* Mobile menu overlay */}
-      {menuOpen && (
-        <div className="fixed inset-0 z-50 flex">
-          <div
-            className="animate-in fade-in absolute inset-0 bg-black/50 duration-200"
-            onClick={() => setMenuOpen(false)}
-          />
-          <nav className="bg-background border-border animate-in slide-in-from-left relative flex w-64 max-w-[80vw] flex-col border-r p-4 duration-200">
-            <div className="mb-6 flex items-center justify-between">
-              <img
-                src={
-                  isDark
-                    ? `${basePath}openspec_pixel_dark.svg`
-                    : `${basePath}openspec_pixel_light.svg`
-                }
-                alt="OpenSpec"
-                className="h-5"
-              />
-              <button
-                onClick={() => setMenuOpen(false)}
-                className="hover:bg-muted rounded-md p-1.5"
-                aria-label="Close menu"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            <ul className="flex-1 space-y-1">
-              {navItems.map((item) => (
-                <li key={item.to}>
-                  <Link
-                    to={item.to}
-                    onClick={() => setMenuOpen(false)}
-                    className="hover:bg-muted [&.active]:bg-primary [&.active]:text-primary-foreground flex items-center gap-2 rounded-md px-3 py-2"
-                  >
-                    <item.icon className="h-4 w-4 shrink-0" />
-                    <span className="font-nav text-[12px] tracking-[0.04em]">{item.label}</span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <div className="border-border border-t pt-4">
-              <Link
-                to={settingsItem.to}
-                onClick={() => setMenuOpen(false)}
-                className="hover:bg-muted [&.active]:bg-primary [&.active]:text-primary-foreground flex items-center gap-2 rounded-md px-3 py-2"
-              >
-                <settingsItem.icon className="h-4 w-4 shrink-0" />
-                <span className="font-nav text-[12px] tracking-[0.04em]">{settingsItem.label}</span>
-              </Link>
-            </div>
-          </nav>
-        </div>
-      )}
-    </>
-  )
-}

package/src/components/layout/mobile-tabbar.tsx

@@ -1,20 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { navItems } from './nav-items'
-
-/** Mobile bottom tab bar - quick access to main sections */
-export function MobileTabBar() {
-  return (
-    <nav className="mobile-tabbar h-14 border-t border-border bg-background flex items-stretch">
-      {navItems.slice(0, 5).map((item) => (
-        <Link
-          key={item.to}
-          to={item.to}
-          className="flex-1 flex flex-col items-center justify-center gap-0.5 text-muted-foreground hover:text-foreground [&.active]:text-primary"
-        >
-          <item.icon className="w-5 h-5 shrink-0" />
-          <span className="text-[10px] font-nav tracking-[0.03em]">{item.label}</span>
-        </Link>
-      ))}
-    </nav>
-  )
-}

package/src/components/layout/nav-items.ts

@@ -1,33 +0,0 @@
-import {
-  FileText,
-  GitBranch,
-  LayoutDashboard,
-  Archive,
-  Folder,
-  Settings,
-  type LucideIcon,
-} from 'lucide-react'
-
-/** Valid top-level routes in the application */
-type AppRoute = '/' | '/project' | '/specs' | '/changes' | '/archive' | '/settings'
-
-export interface NavItem {
-  to: AppRoute
-  icon: LucideIcon
-  label: string
-}
-
-/** Navigation items configuration */
-export const navItems: NavItem[] = [
-  { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
-  { to: '/project', icon: Folder, label: 'Project' },
-  { to: '/specs', icon: FileText, label: 'Specs' },
-  { to: '/changes', icon: GitBranch, label: 'Changes' },
-  { to: '/archive', icon: Archive, label: 'Archive' },
-]
-
-export const settingsItem: NavItem = {
-  to: '/settings',
-  icon: Settings,
-  label: 'Settings',
-}

package/src/components/layout/root-layout.tsx

@@ -1,67 +0,0 @@
-import { Outlet, useRouterState } from '@tanstack/react-router'
-import { DesktopSidebar } from './desktop-sidebar'
-import { MobileHeader } from './mobile-header'
-import { MobileTabBar } from './mobile-tabbar'
-import { DesktopStatusBar } from './status-bar'
-import { GlobalArchiveModal } from '@/components/global-archive-modal'
-import { StaticModeBanner } from '@/components/StaticModeBanner'
-import { flushSync } from 'react-dom'
-import { useLayoutEffect, useState } from 'react'
-
-type ViewTransitionCapableDocument = Document & {
-  startViewTransition?: (updateCallback: () => void) => { finished: Promise<unknown> }
-}
-
-function ViewTransitionOutlet() {
-  // Ignore hash-only changes to avoid triggering view transitions on in-page anchor jumps
-  const locationKey = useRouterState({
-    select: (state) => `${state.location.pathname}${state.location.search}`,
-  })
-  const [renderKey, setRenderKey] = useState(locationKey)
-
-  useLayoutEffect(() => {
-    if (locationKey === renderKey) return
-    const doc = document as ViewTransitionCapableDocument
-    const performUpdate = () => setRenderKey(locationKey)
-
-    if (typeof doc.startViewTransition === 'function') {
-      document.documentElement.dataset.vtRunning = '1'
-      const transition = doc.startViewTransition(() => {
-        flushSync(performUpdate)
-      })
-      transition.finished
-        .catch(() => {
-          /* swallow errors; fallback already applied */
-        })
-        .finally(() => {
-          delete document.documentElement.dataset.vtRunning
-        })
-    } else {
-      performUpdate()
-    }
-  }, [locationKey, renderKey])
-
-  return <Outlet key={renderKey} />
-}
-
-/** Root layout with responsive navigation */
-export function RootLayout() {
-  return (
-    <div className="fixed inset-0 @container/app" style={{ containerName: 'app' }}>
-      <div className="app-layout h-full">
-        <DesktopSidebar />
-        <div className="app-body flex flex-col flex-1 min-h-0">
-          <StaticModeBanner />
-          <MobileHeader />
-          <main className="main-content flex flex-col view-transition-route">
-            <ViewTransitionOutlet />
-          </main>
-          <MobileTabBar />
-          <DesktopStatusBar />
-        </div>
-      </div>
-      {/* 全局 Archive Modal - 在 Router 内部渲染 */}
-      <GlobalArchiveModal />
-    </div>
-  )
-}

package/src/components/layout/status-bar.tsx

@@ -1,69 +0,0 @@
-import { PathMarquee } from '@/components/path-marquee'
-import { useManualReconnect, useServerStatus } from '@/lib/use-server-status'
-import { FolderOpen, RefreshCw, Wifi, WifiOff } from 'lucide-react'
-
-/** Status indicator - simplified for mobile, full for desktop */
-export function StatusIndicator() {
-  const status = useServerStatus()
-  const reconnect = useManualReconnect()
-
-  if (status.connected) {
-    return (
-      <div className="status-indicator flex items-center gap-1.5 text-xs">
-        <Wifi className="h-3.5 w-3.5 text-green-500" />
-        <span className="status-text text-green-600">Live</span>
-      </div>
-    )
-  }
-
-  // 断开连接时显示重连提示
-  return (
-    <div className="status-indicator flex items-center gap-1.5 text-xs">
-      <WifiOff className="h-3.5 w-3.5 text-red-500" />
-      <span className="status-text text-red-600">Offline</span>
-      {status.reconnectCountdown !== null && (
-        <button
-          onClick={reconnect}
-          className="text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 transition-colors"
-          title="Click to reconnect now"
-        >
-          <span className="text-xs">({status.reconnectCountdown}s)</span>
-          <RefreshCw className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  )
-}
-
-/** Desktop status bar - full information */
-export function DesktopStatusBar() {
-  const status = useServerStatus()
-
-  return (
-    <div className="desktop-status border-border bg-muted/30 text-muted-foreground flex h-8 items-center justify-between gap-4 border-t px-4 text-xs">
-      <div className="flex items-center gap-4">
-        <StatusIndicator />
-        {status.projectDir && (
-          <div className="flex items-center gap-1.5">
-            <FolderOpen className="h-3.5 w-3.5 shrink-0" />
-            <PathMarquee
-              children={status.projectDir}
-              maxWidth={300}
-              duration={12}
-              className="text-xs"
-            />
-          </div>
-        )}
-      </div>
-      {status.connected && (
-        <div className="flex items-center gap-1.5">
-          {status.watcherEnabled ? (
-            <span className="text-green-600">Watching for changes</span>
-          ) : (
-            <span className="text-yellow-600">File watcher disabled</span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/markdown-content.tsx

@@ -1,104 +0,0 @@
-import { useEffect, useState } from 'react'
-import Markdown, { type Components } from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import { codeToHtml } from 'shiki'
-
-interface MarkdownContentProps {
-  children: string
-  className?: string
-  /** Additional component overrides for react-markdown */
-  components?: Components
-}
-
-/**
- * Simple markdown renderer with GFM support and shiki code highlighting.
- * For full markdown viewing with ToC, use MarkdownViewer instead.
- */
-export function MarkdownContent({ children, className = '', components }: MarkdownContentProps) {
-  return (
-    <div className={`markdown-content ${className}`}>
-      <Markdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          code: CodeBlock,
-          pre: ({ children }) => <>{children}</>,
-          ...components,
-        }}
-      >
-        {children}
-      </Markdown>
-    </div>
-  )
-}
-
-interface CodeBlockProps {
-  children?: React.ReactNode
-  className?: string
-  node?: unknown
-}
-
-/** Shared code block component with shiki syntax highlighting */
-export function CodeBlock({ children, className }: CodeBlockProps) {
-  const [html, setHtml] = useState<string | null>(null)
-  const code = String(children).replace(/\n$/, '')
-  const match = /language-(\w+)/.exec(className || '')
-  const lang = match ? match[1] : undefined
-
-  // Check if this is inline code (no language, short content)
-  const isInline = !lang && !code.includes('\n')
-
-  useEffect(() => {
-    if (isInline) return
-
-    let mounted = true
-    const highlight = async () => {
-      try {
-        const result = await codeToHtml(code, {
-          lang: lang || 'text',
-          themes: {
-            light: 'github-light',
-            dark: 'github-dark',
-          },
-        })
-        if (mounted) setHtml(result)
-      } catch {
-        // Fallback for unknown languages
-        const result = await codeToHtml(code, {
-          lang: 'text',
-          themes: {
-            light: 'github-light',
-            dark: 'github-dark',
-          },
-        })
-        if (mounted) setHtml(result)
-      }
-    }
-    highlight()
-    return () => {
-      mounted = false
-    }
-  }, [code, lang, isInline])
-
-  if (isInline) {
-    return (
-      <code className="bg-muted text-foreground rounded px-1.5 py-0.5 font-mono text-sm">
-        {code}
-      </code>
-    )
-  }
-
-  if (!html) {
-    return (
-      <pre className="bg-muted/50 border-border overflow-x-auto rounded-md border p-4">
-        <code className="text-foreground font-mono text-sm">{code}</code>
-      </pre>
-    )
-  }
-
-  return (
-    <div
-      className="shiki-wrapper overflow-x-auto rounded-md text-sm [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:p-4"
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-}