@openspecui/web 0.9.0

package/src/components/StaticModeBanner.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { loadSnapshot } from '../lib/static-data-provider'
+import { isStaticMode } from '../lib/static-mode'
+
+export function StaticModeBanner() {
+  const [timestamp, setTimestamp] = useState<string>('Loading...')
+
+  useEffect(() => {
+    if (isStaticMode()) {
+      // Load snapshot to get timestamp
+      loadSnapshot()
+        .then((snapshot) => {
+          console.log('[StaticModeBanner] Snapshot loaded:', snapshot)
+          console.log('[StaticModeBanner] Meta:', snapshot?.meta)
+          console.log('[StaticModeBanner] Timestamp:', snapshot?.meta?.timestamp)
+          if (snapshot?.meta?.timestamp) {
+            setTimestamp(new Date(snapshot.meta.timestamp).toLocaleString())
+          } else {
+            setTimestamp('Unknown')
+          }
+        })
+        .catch((error) => {
+          console.error('[StaticModeBanner] Error loading snapshot:', error)
+          setTimestamp('Unknown')
+        })
+    }
+  }, [])
+
+  if (!isStaticMode()) {
+    return null
+  }
+
+  return (
+    <div className="static-mode-banner border-border bg-primary/5 border-b-2 px-6 py-3 text-sm">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="font-mono font-bold">📸 Static Snapshot</span>
+          <span className="text-muted-foreground">Generated: {timestamp}</span>
+        </div>
+        <div className="text-muted-foreground">
+          Live features disabled (no file watching, task toggling, or AI integration)
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/change-overview.tsx

@@ -0,0 +1,156 @@
+import { MarkdownViewer } from '@/components/markdown-viewer'
+import { Tabs, type Tab } from '@/components/tabs'
+import type { Change } from '@openspecui/core'
+import { FileText } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+
+type DeltaSpec = NonNullable<Change['deltaSpecs']>[number]
+
+function operationBadgeClass(operation: string) {
+  switch (operation) {
+    case 'ADDED':
+      return 'border border-emerald-200 bg-emerald-100 text-emerald-700'
+    case 'MODIFIED':
+      return 'border border-amber-200 bg-amber-100 text-amber-800'
+    case 'REMOVED':
+      return 'border border-rose-200 bg-rose-100 text-rose-700'
+    case 'RENAMED':
+      return 'border border-sky-200 bg-sky-100 text-sky-700'
+    default:
+      return 'border border-muted bg-muted text-foreground'
+  }
+}
+
+export function ChangeOverview({ change }: { change: Change }) {
+  const deltaSpecs = change.deltaSpecs ?? []
+  const [activeDeltaSpecId, setActiveDeltaSpecId] = useState(deltaSpecs[0]?.specId ?? '')
+
+  // 当 deltaSpecs 变化时，确保 activeDeltaSpecId 有效
+  useEffect(() => {
+    if (!deltaSpecs.some((d) => d.specId === activeDeltaSpecId)) {
+      setActiveDeltaSpecId(deltaSpecs[0]?.specId ?? '')
+    }
+  }, [deltaSpecs, activeDeltaSpecId])
+
+  const affectedSpecs = useMemo<{ spec: string; operation: string }[]>(() => {
+    const map = new Map<string, Set<string>>()
+    change.deltas.forEach((delta) => {
+      const set = map.get(delta.spec) ?? new Set<string>()
+      set.add(delta.operation)
+      map.set(delta.spec, set)
+    })
+    return Array.from(map.entries()).map(([spec, ops]) => ({
+      spec,
+      operation: ops.size === 1 ? Array.from(ops)[0] : 'MIXED',
+    }))
+  }, [change.deltas])
+
+  return (
+    <MarkdownViewer
+      className="h-full"
+      markdown={({ H1, Section }) => (
+        <div className="space-y-6">
+          {/* Why */}
+          <Section>
+            <H1 id="why">Why</H1>
+            <div className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
+              <MarkdownViewer markdown={change.why} />
+            </div>
+          </Section>
+
+          {/* What Changes */}
+          <Section>
+            <H1 id="what-changes">What Changes</H1>
+            <div className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
+              <MarkdownViewer markdown={change.whatChanges} />
+            </div>
+          </Section>
+
+          {/* Design */}
+          {change.design && (
+            <>
+              <H1 id="design">Design</H1>
+              <Section className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
+                {/* 嵌套 MarkdownViewer，Section 会自动 +1 层级 */}
+                <MarkdownViewer markdown={change.design} />
+              </Section>
+            </>
+          )}
+
+          {/* Affected Specs */}
+          {affectedSpecs.length > 0 && (
+            <>
+              <H1 id="affected-specs">Affected Specs ({affectedSpecs.length})</H1>
+              <div className="divide-border border-border mt-3 divide-y rounded-lg border">
+                {affectedSpecs.map(({ spec, operation }) => (
+                  <div key={spec} className="flex items-center justify-between px-3 py-2">
+                    <span className="font-medium">{spec}</span>
+                    <span
+                      className={`rounded px-2 py-1 text-xs font-medium ${operationBadgeClass(operation)}`}
+                    >
+                      {operation}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          {/* Delta Specs */}
+          {deltaSpecs.length > 0 && (
+            <>
+              <H1 id="delta-specs">Delta Specs ({deltaSpecs.length})</H1>
+              <Section className="[zoom:0.86]">
+                <DeltaSpecTabs
+                  deltaSpecs={deltaSpecs}
+                  activeId={activeDeltaSpecId}
+                  onActiveChange={setActiveDeltaSpecId}
+                />
+              </Section>
+            </>
+          )}
+        </div>
+      )}
+    />
+  )
+}
+
+function DeltaSpecTabs({
+  deltaSpecs,
+  activeId,
+  onActiveChange,
+}: {
+  deltaSpecs: DeltaSpec[]
+  activeId: string
+  onActiveChange: (id: string) => void
+}) {
+  if (deltaSpecs.length === 1) {
+    const spec = deltaSpecs[0]
+    return (
+      <div className="bg-muted/20 rounded-lg p-4">
+        <MarkdownViewer markdown={spec.content} />
+      </div>
+    )
+  }
+
+  const tabs: Tab[] = deltaSpecs.map((spec) => ({
+    id: spec.specId,
+    label: spec.specId,
+    icon: <FileText className="h-4 w-4" />,
+    content: (
+      <div className="bg-muted/20 h-full rounded-lg p-4">
+        <MarkdownViewer markdown={spec.content} />
+      </div>
+    ),
+    unmountOnHide: true,
+  }))
+
+  return (
+    <Tabs
+      tabs={tabs}
+      selectedTab={activeId}
+      onTabChange={onActiveChange}
+      className="min-h-80"
+    />
+  )
+}

package/src/components/cli-terminal.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, type ReactNode, type RefObject } from 'react'
+
+export type CliTerminalLine =
+  | { id: string; kind: 'ascii'; text: string; tone?: 'success' | 'error' | 'info' }
+  | { id: string; kind: 'html'; node: ReactNode }
+
+export interface CliTerminalProps {
+  lines: CliTerminalLine[]
+  maxHeight?: string
+  scrollRef?: RefObject<HTMLDivElement>
+}
+
+/**
+ * Pure terminal renderer. Accepts ANSI-aware ASCII lines or raw ReactNode lines.
+ * It does not own business logic; upstream decides how to format text (e.g., status icons).
+ */
+export const CliTerminal = forwardRef<HTMLDivElement, CliTerminalProps>(function CliTerminal(
+  { lines, maxHeight = '60vh', scrollRef },
+  ref
+) {
+  const containerRef = (scrollRef ?? ref) as RefObject<HTMLDivElement>
+
+  return (
+    <div
+      ref={containerRef as RefObject<HTMLDivElement>}
+      className="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-700 overflow-auto bg-zinc-900 p-4 font-mono text-sm text-zinc-100"
+      style={{ maxHeight }}
+    >
+      {lines.length === 0 && <span className="text-zinc-500">Waiting to start…</span>}
+
+      {lines.map((line) => {
+        if (line.kind === 'html') {
+          return (
+            <div key={line.id} className="whitespace-pre-wrap break-all">
+              {line.node}
+            </div>
+          )
+        }
+
+        const color =
+          line.tone === 'success'
+            ? 'text-green-400'
+            : line.tone === 'error'
+              ? 'text-red-400'
+              : line.tone === 'info'
+                ? 'text-blue-300'
+                : undefined
+
+        return (
+          <div key={line.id} className="whitespace-pre-wrap break-all">
+            <span className={color}>{renderAnsiLine(line.text)}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+})
+
+/** Simple ANSI color code renderer with a few common colors */
+function renderAnsiLine(line: string): ReactNode {
+  const parts: ReactNode[] = []
+  let currentIndex = 0
+  let currentColor: string | null = null
+
+  const regex = /\x1b\[(\d+)m/g
+  let match
+
+  while ((match = regex.exec(line)) !== null) {
+    if (match.index > currentIndex) {
+      const text = line.slice(currentIndex, match.index)
+      parts.push(currentColor ? <span key={currentIndex} className={currentColor}>{text}</span> : text)
+    }
+
+    const code = parseInt(match[1], 10)
+    if (code === 0) currentColor = null
+    else if (code === 31) currentColor = 'text-red-400'
+    else if (code === 32) currentColor = 'text-green-400'
+    else if (code === 33) currentColor = 'text-yellow-400'
+    else if (code === 34) currentColor = 'text-blue-400'
+    else if (code === 35) currentColor = 'text-fuchsia-300'
+    else if (code === 36) currentColor = 'text-cyan-300'
+    else if (code === 37 || code === 90) currentColor = 'text-zinc-400'
+
+    currentIndex = match.index + match[0].length
+  }
+
+  if (currentIndex < line.length) {
+    const text = line.slice(currentIndex)
+    parts.push(currentColor ? <span key={currentIndex} className={currentColor}>{text}</span> : text)
+  }
+
+  return parts.length > 0 ? parts : line
+}

package/src/components/code-editor.tsx

@@ -0,0 +1,232 @@
+/**
+ * CodeEditor - 基于 CodeMirror 6 的代码/Markdown 编辑器组件
+ *
+ * 特性：
+ * - 支持只读和编辑模式
+ * - 根据文件类型自动选择语言高亮
+ * - Markdown 文件支持实时预览（隐藏语法标记）
+ * - 移动端友好
+ */
+import { markdownPreview } from '@/lib/codemirror-markdown-preview'
+import { selectAll } from '@codemirror/commands'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
+import { yaml } from '@codemirror/lang-yaml'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { languages } from '@codemirror/language-data'
+import type { Extension } from '@codemirror/state'
+import { EditorState } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+import { tags as t } from '@lezer/highlight'
+import CodeMirror from '@uiw/react-codemirror'
+import { useMemo } from 'react'
+
+export type LanguageType = 'markdown' | 'typescript' | 'javascript' | 'json' | 'yaml' | 'plain'
+
+export interface CodeEditorProps {
+  /** 编辑器内容 */
+  value: string
+  /** 内容变化回调（编辑模式下使用） */
+  onChange?: (value: string) => void
+  /** 是否只读 */
+  readOnly?: boolean
+  /** 语言类型，不传则根据 filename 自动检测 */
+  language?: LanguageType
+  /** 文件名，用于自动检测语言 */
+  filename?: string
+  /** 是否显示行号 */
+  lineNumbers?: boolean
+  /** 是否自动换行 */
+  lineWrapping?: boolean
+  /** 字体大小 */
+  fontSize?: number
+  /** 自定义 className */
+  className?: string
+  /** 自定义样式 */
+  style?: React.CSSProperties
+  /** 占位符文本 */
+  placeholder?: string
+  /** 额外的内联样式（可覆盖） */
+}
+
+/** 根据文件名推断语言类型 */
+function detectLanguage(filename?: string): LanguageType {
+  if (!filename) return 'plain'
+  const lower = filename.toLowerCase()
+  if (lower.endsWith('.md')) return 'markdown'
+  if (lower.endsWith('.ts') || lower.endsWith('.tsx')) return 'typescript'
+  if (lower.endsWith('.js') || lower.endsWith('.jsx')) return 'javascript'
+  if (lower.endsWith('.json')) return 'json'
+  if (lower.endsWith('.yml') || lower.endsWith('.yaml')) return 'yaml'
+  return 'plain'
+}
+
+/** 根据语言类型返回 CodeMirror 扩展 */
+function getLanguageExtensions(language: LanguageType, filename?: string): Extension[] {
+  switch (language) {
+    case 'markdown':
+      // Markdown 默认启用实时预览（隐藏语法标记，显示富文本效果）
+      return [markdown({ base: markdownLanguage, codeLanguages: languages }), markdownPreview()]
+    case 'typescript':
+      return [javascript({ typescript: true, jsx: filename?.endsWith('.tsx') })]
+    case 'javascript':
+      return [javascript({ jsx: filename?.endsWith('.jsx') })]
+    case 'json':
+      return [json()]
+    case 'yaml':
+      return [yaml()]
+    default:
+      return []
+  }
+}
+
+// 语法高亮：使用设计令牌，自动随 light/dark 变量切换
+const codeHighlightStyle = HighlightStyle.define([
+  { tag: [t.keyword, t.operatorKeyword, t.modifier], color: 'var(--primary)' },
+  { tag: [t.string, t.special(t.string)], color: 'var(--secondary)' },
+  { tag: [t.number, t.integer, t.float], color: 'var(--chart-4)' },
+  { tag: [t.bool, t.null, t.atom], color: 'var(--accent)' },
+  { tag: [t.typeName, t.className], color: 'var(--chart-3)' },
+  { tag: [t.function(t.variableName), t.propertyName], color: 'var(--chart-5)' },
+  { tag: [t.variableName], color: 'var(--foreground)' },
+  { tag: [t.comment, t.lineComment, t.blockComment], color: 'color-mix(in srgb, var(--muted-foreground) 80%, transparent)' },
+  { tag: t.punctuation, color: 'color-mix(in srgb, var(--foreground) 70%, transparent)' },
+])
+
+/**
+ * CodeEditor 组件
+ *
+ * @example
+ * // 只读 Markdown 预览
+ * <CodeEditor value={content} filename="README.md" readOnly />
+ *
+ * @example
+ * // 可编辑的代码编辑器
+ * <CodeEditor value={code} onChange={setCode} language="typescript" />
+ */
+export function CodeEditor({
+  value,
+  onChange,
+  readOnly = false,
+  language,
+  filename,
+  lineNumbers = true,
+  lineWrapping = true,
+  fontSize = 13,
+  className = '',
+  style,
+  placeholder,
+}: CodeEditorProps) {
+  const resolvedLanguage = language ?? detectLanguage(filename)
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [
+      EditorState.readOnly.of(readOnly),
+      ...getLanguageExtensions(resolvedLanguage, filename),
+      syntaxHighlighting(codeHighlightStyle, { fallback: true }),
+    ]
+    exts.push(
+      EditorView.theme({
+        '.cm-line': {
+          lineHeight: '21px',
+        },
+        '.cm-editor': {
+          backgroundColor: 'var(--card)',
+          color: 'var(--foreground)',
+          borderRadius: '6px',
+          border: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
+          height: '100%',
+          minHeight: '240px',
+        },
+        '.cm-content': {
+          fontFamily: 'var(--font-mono)',
+          backgroundColor: 'transparent',
+        },
+        '.cm-gutters': {
+          fontFamily: 'var(--font-mono)',
+          backgroundColor: 'var(--card)',
+          color: 'color-mix(in srgb, var(--foreground) 60%, transparent)',
+          borderRight: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
+        },
+        '.cm-scroller': {
+          fontFamily: 'var(--font-mono)',
+          overflow: 'auto',
+        },
+        '.cm-activeLine': {
+          backgroundColor: 'color-mix(in srgb, var(--primary) 6%, transparent)',
+        },
+        '.cm-activeLineGutter': {
+          backgroundColor: 'color-mix(in srgb, var(--primary) 6%, transparent)',
+          color: 'var(--foreground)',
+        },
+        '.cm-selectionBackground, .cm-content ::selection': {
+          backgroundColor: 'color-mix(in srgb, var(--primary) 24%, transparent)',
+        },
+        '&.cm-editor .cm-cursor': {
+          borderLeftColor: 'var(--foreground)',
+        },
+        '.cm-matchingBracket, .cm-nonmatchingBracket': {
+          backgroundColor: 'color-mix(in srgb, var(--primary) 10%, transparent)',
+          outline: '1px solid color-mix(in srgb, var(--primary) 30%, transparent)',
+        },
+        '.cm-tooltip': {
+          backgroundColor: 'var(--popover)',
+          color: 'var(--popover-foreground)',
+          border: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
+        },
+        '.cm-tooltip-autocomplete': {
+          '& > ul > li[aria-selected]': {
+            background: 'color-mix(in srgb, var(--primary) 10%, transparent)',
+            color: 'var(--foreground)',
+          },
+        },
+        '.cm-searchMatch': {
+          backgroundColor: 'color-mix(in srgb, var(--primary) 18%, transparent)',
+          outline: '1px solid color-mix(in srgb, var(--primary) 35%, transparent)',
+        },
+        '.cm-md-codeblock': {
+          padding: '0',
+          borderRadius: 0,
+        },
+      })
+    )
+    exts.push(
+      keymap.of([
+        {
+          key: 'Mod-a',
+          run: selectAll,
+        },
+      ])
+    )
+
+    // TODO: 集成 Shiki 高亮（代码文件与 Markdown fenced code）时需采用稳定的装饰实现，避免 CM6 插件范围错误
+
+    if (lineWrapping) {
+      exts.push(EditorView.lineWrapping)
+    }
+    return exts
+  }, [resolvedLanguage, filename, readOnly, lineWrapping])
+
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      theme="none"
+      basicSetup={{
+        lineNumbers,
+        foldGutter: !readOnly,
+        highlightActiveLine: !readOnly,
+        highlightActiveLineGutter: !readOnly,
+        autocompletion: !readOnly,
+        closeBrackets: !readOnly,
+        bracketMatching: !readOnly,
+      }}
+      extensions={extensions}
+      className={`scrollbar-thin scrollbar-track-transparent overflow-auto ${className}`}
+      style={{ fontSize, ...style }}
+    />
+  )
+}
+
+export default CodeEditor

package/src/components/copyable-path.tsx

@@ -0,0 +1,44 @@
+import { Check, Copy } from 'lucide-react'
+import { useCallback, useState } from 'react'
+
+interface CopyablePathProps {
+  /** The path to display */
+  path: string
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * A component for displaying a full path with copy functionality.
+ * - Displays full path with word-break
+ * - Click to copy
+ * - Shows copy confirmation
+ */
+export function CopyablePath({ path, className = '' }: CopyablePathProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(path)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy path:', err)
+    }
+  }, [path])
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={`hover:bg-muted/50 group -m-2 flex cursor-pointer items-start gap-2 rounded p-2 text-left transition-colors ${className}`}
+      title="Click to copy"
+    >
+      <code className="bg-muted h-7 flex-1 break-all rounded px-2 py-1 font-mono text-sm">
+        {path}
+      </code>
+      <span className="text-muted-foreground group-hover:text-foreground mt-1 shrink-0 transition-colors">
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+      </span>
+    </button>
+  )
+}