@openspecui/web 0.9.0

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

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

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

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

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

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

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

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

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

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