@openspecui/web 0.9.0

package/src/routes/change-view.tsx

@@ -0,0 +1,188 @@
+import { ChangeOverview } from '@/components/change-overview'
+import { FolderEditorViewer } from '@/components/folder-editor-viewer'
+import { Tabs, type Tab } from '@/components/tabs'
+import { TasksView } from '@/components/tasks-view'
+import { useArchiveModal } from '@/lib/archive-modal-context'
+import { isStaticMode } from '@/lib/static-mode'
+import { trpcClient } from '@/lib/trpc'
+import { useChangeSubscription } from '@/lib/use-subscription'
+import { useTabsStatusByQuery } from '@/lib/use-tabs-status-by-query'
+import { useMutation } from '@tanstack/react-query'
+import { Link, useNavigate, useParams } from '@tanstack/react-router'
+import {
+  AlertCircle,
+  Archive,
+  ArrowLeft,
+  FileText,
+  FolderTree,
+  GitBranch,
+  ListChecks,
+} from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+export function ChangeView() {
+  const { changeId } = useParams({ from: '/changes/$changeId' })
+  const navigate = useNavigate()
+  const { openArchiveModal, state: archiveModalState } = useArchiveModal()
+  const { data: change, isLoading } = useChangeSubscription(changeId)
+  const [firstFrameLoading, setFirstFrameLoading] = useState(true)
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setFirstFrameLoading(false))
+    return () => cancelAnimationFrame(id)
+  }, [])
+
+  // 保存最后一次有效的 changeName，用于在 change 被删除后打开 Modal
+  const lastChangeNameRef = useRef(change?.name ?? changeId)
+  if (change?.name) {
+    lastChangeNameRef.current = change.name
+  }
+
+  // 当 change 不存在且不在加载中且 Archive Modal 打开时，自动返回到 /changes
+  useEffect(() => {
+    if (!isLoading && !change && archiveModalState.open) {
+      navigate({ to: '/changes' })
+    }
+  }, [isLoading, change, archiveModalState.open, navigate])
+  // TODO: validation 暂时不支持订阅，后续可以添加
+  const validation = null as {
+    valid: boolean
+    issues: Array<{ severity: string; message: string; path?: string }>
+  } | null
+
+  const toggleTaskMutation = useMutation({
+    mutationFn: (params: { taskIndex: number; completed: boolean }) =>
+      trpcClient.change.toggleTask.mutate({
+        changeId,
+        taskIndex: params.taskIndex,
+        completed: params.completed,
+      }),
+    // 订阅模式下无需手动 invalidate，文件变更会自动触发更新
+  })
+
+  const handleToggleTask = useCallback(
+    (taskIndex: number, completed: boolean) => {
+      toggleTaskMutation.mutate({ taskIndex, completed })
+    },
+    [toggleTaskMutation]
+  )
+
+  const togglingIndex = toggleTaskMutation.isPending
+    ? (toggleTaskMutation.variables?.taskIndex ?? null)
+    : null
+
+  // 点击 Archive 按钮：打开全局 Modal
+  const handleArchiveClick = useCallback(() => {
+    openArchiveModal(changeId, lastChangeNameRef.current)
+  }, [changeId, openArchiveModal])
+
+  const tabs: Tab[] = useMemo(() => {
+    if (!change) return []
+
+    return [
+      {
+        id: 'overview',
+        label: 'Overview',
+        icon: <FileText className="h-4 w-4" />,
+        content: <ChangeOverview change={change} />,
+      },
+      {
+        id: 'tasks',
+        label: `Tasks (${change.progress.completed}/${change.progress.total})`,
+        icon: <ListChecks className="h-4 w-4" />,
+        content: (
+          <TasksView
+            tasks={change.tasks}
+            progress={change.progress}
+            onToggleTask={isStaticMode() ? undefined : handleToggleTask}
+            togglingIndex={togglingIndex}
+          />
+        ),
+      },
+      {
+        id: 'folder',
+        label: 'Folder',
+        icon: <FolderTree className="h-4 w-4" />,
+        content: <FolderEditorViewer changeId={changeId} />,
+      },
+    ]
+  }, [change, changeId, handleToggleTask, togglingIndex])
+
+  const { selectedTab, setSelectedTab } = useTabsStatusByQuery({
+    tabsId: 'changeTab',
+    tabs,
+    initialTab: tabs[0]?.id,
+  })
+
+  if (firstFrameLoading || (isLoading && !change)) {
+    return <div className="route-loading animate-pulse">Loading change...</div>
+  }
+
+  // 当 change 不存在时，显示空白（useEffect 会自动导航到 /changes）
+  // 如果 Archive Modal 打开着，用户看到的是 Modal 覆盖的 /changes 页面
+  if (!change) {
+    return null
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-6">
+      <div className="change-header @container flex items-center justify-between gap-3">
+        <div className="flex items-center gap-4">
+          <Link to="/changes" className="hover:bg-muted rounded-md p-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+          <div className="flex flex-col gap-1">
+            <h1
+              className="font-nav flex items-center gap-2 font-bold"
+              style={{ fontSize: 'clamp(1rem, 3cqi, 1.75rem)' }}
+            >
+              <GitBranch className="h-6 w-6 shrink-0" />
+              {change.name}
+            </h1>
+            <p className="text-muted-foreground" style={{ fontSize: 'clamp(0.7rem, 2cqi, 1rem)' }}>
+              ID: {change.id}
+            </p>
+          </div>
+        </div>
+
+        {/* Hide archive button in static mode */}
+        {!isStaticMode() && (
+          <button
+            onClick={handleArchiveClick}
+            className="change-archive-button @sm:gap-2 @sm:px-4 flex h-10 items-center gap-1.5 rounded-md bg-red-600 px-3 py-2 text-white hover:bg-red-700"
+          >
+            <Archive className="h-4 w-4" />
+            <span
+              className="change-archive-text @sm:inline hidden"
+              style={{ fontSize: 'clamp(0.85rem, 2cqi, 1rem)' }}
+            >
+              Archive
+            </span>
+          </button>
+        )}
+      </div>
+
+      {validation && !validation.valid && (
+        <div className="rounded-lg border border-red-500 bg-red-500/10 p-4">
+          <div className="mb-2 flex items-center gap-2 font-medium text-red-600">
+            <AlertCircle className="h-5 w-5" />
+            Validation Issues
+          </div>
+          <ul className="space-y-1 text-sm">
+            {validation.issues.map((issue, i) => (
+              <li key={i} className="text-red-600">
+                {issue.message}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <Tabs
+        tabs={tabs}
+        selectedTab={selectedTab}
+        onTabChange={setSelectedTab}
+        className="min-h-0 flex-1 gap-6"
+      />
+    </div>
+  )
+}

package/src/routes/dashboard.tsx

@@ -0,0 +1,204 @@
+import { useDashboardSubscription, useInitializedSubscription } from '@/lib/use-subscription'
+import { Link } from '@tanstack/react-router'
+import {
+  AlertCircle,
+  Archive,
+  CheckCircle,
+  FileText,
+  GitBranch,
+  LayoutDashboard,
+} from 'lucide-react'
+import { useMemo } from 'react'
+
+export function Dashboard() {
+  const { data, isLoading, error } = useDashboardSubscription()
+  const { data: initialized } = useInitializedSubscription()
+
+  const sortedSpecs = useMemo(() => {
+    if (!data?.specs) return []
+    return [...data.specs].sort((a, b) => b.requirements.length - a.requirements.length)
+  }, [data?.specs])
+
+  if (isLoading && !data) {
+    return <div className="route-loading animate-pulse">Loading dashboard...</div>
+  }
+
+  if (error) {
+    return (
+      <div className="text-destructive flex items-center gap-2">
+        <AlertCircle className="h-5 w-5" />
+        Error loading dashboard: {error.message}
+      </div>
+    )
+  }
+
+  if (!initialized) {
+    return (
+      <div className="py-12 text-center">
+        <h2 className="font-nav mb-4 flex items-center justify-center gap-2 text-2xl font-bold">
+          <LayoutDashboard className="h-6 w-6 shrink-0" />
+          OpenSpec Not Initialized
+        </h2>
+        <p className="text-muted-foreground mb-6">
+          This project doesn't have an OpenSpec directory yet.
+        </p>
+        <Link
+          to="/settings"
+          className="bg-primary text-primary-foreground inline-flex items-center gap-2 rounded-md px-4 py-2 hover:opacity-90"
+        >
+          Initialize OpenSpec
+        </Link>
+      </div>
+    )
+  }
+
+  if (!data) return null
+
+  const { summary } = data
+
+  return (
+    <div className="space-y-6">
+      <h1 className="font-nav flex items-center gap-2 text-2xl font-bold">
+        <LayoutDashboard className="h-6 w-6 shrink-0" />
+        Dashboard
+      </h1>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          icon={<FileText className="h-5 w-5" />}
+          label="Specifications"
+          value={summary.specCount}
+          sublabel={`${summary.requirementCount} requirements`}
+        />
+        <StatCard
+          icon={<GitBranch className="h-5 w-5" />}
+          label="Active Changes"
+          value={summary.activeChangeCount}
+          sublabel="in progress"
+        />
+        <StatCard
+          icon={<Archive className="h-5 w-5" />}
+          label="Completed"
+          value={summary.archivedChangeCount}
+          sublabel="archived"
+        />
+        <StatCard
+          icon={<CheckCircle className="h-5 w-5" />}
+          label="Task Progress"
+          value={`${summary.completedTasks}/${summary.totalTasks}`}
+          sublabel={`${summary.progressPercent}% complete`}
+        />
+      </div>
+
+      {/* Active Changes with Progress Bars */}
+      <section>
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-semibold">Active Changes</h2>
+          {data.changes.length > 0 && (
+            <Link to="/changes" className="text-primary text-sm hover:underline">
+              View all
+            </Link>
+          )}
+        </div>
+        <div className="border-border divide-border divide-y rounded-lg border">
+          {data.changes.map((change) => {
+            const percent =
+              change.progress.total > 0
+                ? Math.round((change.progress.completed / change.progress.total) * 100)
+                : 0
+            return (
+              <Link
+                key={change.id}
+                to="/changes/$changeId"
+                params={{ changeId: change.id }}
+                className="hover:bg-muted/50 block p-4"
+              >
+                <div className="mb-2 flex items-center justify-between">
+                  <div className="font-medium">{change.name}</div>
+                  <span className="text-muted-foreground text-sm">
+                    {change.progress.completed}/{change.progress.total} tasks
+                  </span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="bg-muted h-2 flex-1 rounded-full">
+                    <div
+                      className="bg-primary h-2 rounded-full transition-all"
+                      style={{ width: `${percent}%` }}
+                    />
+                  </div>
+                  <span className="w-12 text-right text-sm font-medium">{percent}%</span>
+                </div>
+              </Link>
+            )
+          })}
+          {data.changes.length === 0 && (
+            <div className="text-muted-foreground p-4 text-center">
+              No active changes. Create one in{' '}
+              <code className="bg-muted rounded px-1">openspec/changes/</code>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Specifications sorted by requirement count */}
+      <section>
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-semibold">Specifications</h2>
+          {sortedSpecs.length > 0 && (
+            <Link to="/specs" className="text-primary text-sm hover:underline">
+              View all
+            </Link>
+          )}
+        </div>
+        <div className="border-border divide-border divide-y rounded-lg border">
+          {sortedSpecs.map((spec) => (
+            <Link
+              key={spec.id}
+              to="/specs/$specId"
+              params={{ specId: spec.id }}
+              className="hover:bg-muted/50 flex items-center justify-between p-3"
+            >
+              <div className="flex items-center gap-3">
+                <FileText className="text-muted-foreground h-4 w-4" />
+                <span className="font-medium">{spec.name}</span>
+              </div>
+              <span className="text-muted-foreground text-sm">
+                {spec.requirements.length} requirement{spec.requirements.length !== 1 ? 's' : ''}
+              </span>
+            </Link>
+          ))}
+          {sortedSpecs.length === 0 && (
+            <div className="text-muted-foreground p-4 text-center">
+              No specs yet. Create one in{' '}
+              <code className="bg-muted rounded px-1">openspec/specs/</code>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function StatCard({
+  icon,
+  label,
+  value,
+  sublabel,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: number | string
+  sublabel: string
+}) {
+  return (
+    <div className="border-border rounded-lg border p-4">
+      <div className="text-muted-foreground mb-2 flex items-center gap-2">
+        {icon}
+        <span className="text-sm">{label}</span>
+      </div>
+      <div className="text-2xl font-bold">{value}</div>
+      <div className="text-muted-foreground text-sm">{sublabel}</div>
+    </div>
+  )
+}

package/src/routes/project.tsx

@@ -0,0 +1,272 @@
+import { CodeEditor } from '@/components/code-editor'
+import { MarkdownViewer } from '@/components/markdown-viewer'
+import { Tabs, type Tab } from '@/components/tabs'
+import { isStaticMode } from '@/lib/static-mode'
+import { trpcClient } from '@/lib/trpc'
+import { useAgentsMdSubscription, useProjectMdSubscription } from '@/lib/use-subscription'
+import { useMutation } from '@tanstack/react-query'
+import { Bot, Edit2, FileText, Folder, Save, X } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+
+type ActiveTab = 'project' | 'agents'
+
+export function Project() {
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState<ActiveTab>('project')
+  const [editingTab, setEditingTab] = useState<ActiveTab | null>(null)
+  const [editContent, setEditContent] = useState('')
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setLoading(false))
+    return () => cancelAnimationFrame(id)
+  }, [])
+
+  const { data: projectMd, isLoading: projectLoading } = useProjectMdSubscription()
+  const { data: agentsMd, isLoading: agentsLoading } = useAgentsMdSubscription()
+
+  const saveProjectMutation = useMutation({
+    mutationFn: (content: string) => trpcClient.project.saveProjectMd.mutate({ content }),
+    onSuccess: () => {
+      // 订阅模式下无需手动 refetch，文件变更会自动触发更新
+      setEditingTab(null)
+    },
+  })
+
+  const saveAgentsMutation = useMutation({
+    mutationFn: (content: string) => trpcClient.project.saveAgentsMd.mutate({ content }),
+    onSuccess: () => {
+      // 订阅模式下无需手动 refetch，文件变更会自动触发更新
+      setEditingTab(null)
+    },
+  })
+
+  const currentContent = activeTab === 'project' ? projectMd : agentsMd
+  const saveMutation = activeTab === 'project' ? saveProjectMutation : saveAgentsMutation
+  const isEditing = editingTab === activeTab
+
+  const handleEdit = () => {
+    setEditContent(currentContent || '')
+    setEditingTab(activeTab)
+  }
+
+  const handleSave = () => {
+    saveMutation.mutate(editContent)
+  }
+
+  const handleCancel = () => {
+    setEditingTab(null)
+    setEditContent('')
+  }
+
+  const tabs: Tab[] = useMemo(
+    () => [
+      {
+        id: 'project',
+        label: 'project.md',
+        icon: <FileText className="h-4 w-4" />,
+        content: (
+          <div className="border-border h-full min-h-0 flex-1 overflow-hidden rounded-lg border">
+            <TabContent
+              content={projectMd}
+              isLoading={projectLoading}
+              isEditing={editingTab === 'project'}
+              editContent={editContent}
+              setEditContent={setEditContent}
+              onCancel={handleCancel}
+              onSave={handleSave}
+              savePending={saveProjectMutation.isPending}
+              tabName="project.md"
+              defaultContent="# Project Context\n\n## Purpose\n\n## Tech Stack\n\n## Conventions\n"
+              onStartEdit={() => {
+                setEditContent(projectMd || '')
+                setEditingTab('project')
+              }}
+            />
+          </div>
+        ),
+      },
+      {
+        id: 'agents',
+        label: 'AGENTS.md',
+        icon: <Bot className="h-4 w-4" />,
+        content: (
+          <div className="border-border h-full min-h-0 flex-1 overflow-hidden rounded-lg border">
+            <TabContent
+              content={agentsMd}
+              isLoading={agentsLoading}
+              isEditing={editingTab === 'agents'}
+              editContent={editContent}
+              setEditContent={setEditContent}
+              onCancel={handleCancel}
+              onSave={handleSave}
+              savePending={saveAgentsMutation.isPending}
+              tabName="AGENTS.md"
+              defaultContent="# AI Agent Instructions\n\n## Workflow\n\n## Commands\n"
+              onStartEdit={() => {
+                setEditContent(agentsMd || '')
+                setEditingTab('agents')
+              }}
+            />
+          </div>
+        ),
+      },
+    ],
+    [
+      agentsLoading,
+      agentsMd,
+      editContent,
+      editingTab,
+      handleCancel,
+      handleSave,
+      projectLoading,
+      projectMd,
+      saveAgentsMutation.isPending,
+      saveProjectMutation.isPending,
+    ]
+  )
+
+  const descriptions: Record<ActiveTab, React.ReactNode> = useMemo(
+    () => ({
+      project: (
+        <p>
+          <strong>project.md</strong> defines project context, tech stack, and conventions for AI
+          assistants.
+        </p>
+      ),
+      agents: (
+        <p>
+          <strong>AGENTS.md</strong> provides workflow instructions for AI coding assistants using
+          OpenSpec.
+        </p>
+      ),
+    }),
+    []
+  )
+
+  if (projectLoading || agentsLoading) {
+    return <div className="route-loading animate-pulse">Loading...</div>
+  }
+
+  if (loading) {
+    return <div className="route-loading animate-pulse">Loading project...</div>
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <h1 className="font-nav flex items-center gap-2 text-2xl font-bold">
+          <Folder className="h-6 w-6 shrink-0" />
+          Project
+        </h1>
+        {/* Hide edit button in static mode */}
+        {!isStaticMode() && !isEditing && currentContent && (
+          <button
+            onClick={handleEdit}
+            className="border-border hover:bg-muted flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm"
+          >
+            <Edit2 className="h-4 w-4" />
+            Edit
+          </button>
+        )}
+      </div>
+
+      <Tabs
+        tabs={tabs}
+        selectedTab={activeTab}
+        onTabChange={(id) => setActiveTab(id as ActiveTab)}
+        className="min-h-0 flex-1 gap-4"
+      />
+
+      {/* Description */}
+      <div className="text-muted-foreground text-sm">{descriptions[activeTab]}</div>
+    </div>
+  )
+}
+
+interface TabContentProps {
+  content: string | null | undefined
+  isLoading: boolean
+  isEditing: boolean
+  editContent: string
+  setEditContent: (content: string) => void
+  onCancel: () => void
+  onSave: () => void
+  savePending: boolean
+  tabName: string
+  defaultContent: string
+  onStartEdit: () => void
+}
+
+function TabContent({
+  content,
+  isLoading,
+  isEditing,
+  editContent,
+  setEditContent,
+  onCancel,
+  onSave,
+  savePending,
+  tabName,
+  defaultContent,
+  onStartEdit,
+}: TabContentProps) {
+  if (isLoading && !content) {
+    return <div className="route-loading animate-pulse">Loading...</div>
+  }
+
+  if (!content) {
+    return (
+      <div className="text-muted-foreground p-8 text-center">
+        <p className="mb-4">{tabName} not found.</p>
+        {/* Hide create button in static mode */}
+        {!isStaticMode() && (
+          <button
+            onClick={() => {
+              setEditContent(defaultContent)
+              onStartEdit()
+            }}
+            className="bg-primary text-primary-foreground rounded-md px-4 py-2 hover:opacity-90"
+          >
+            Create {tabName}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  if (isEditing) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="border-border bg-muted/30 flex items-center justify-between border-b p-2">
+          <span className="px-2 text-sm font-medium">Editing {tabName}</span>
+          <div className="flex gap-2">
+            <button
+              onClick={onCancel}
+              className="border-border hover:bg-muted flex items-center gap-1 rounded border px-3 py-1 text-sm"
+            >
+              <X className="h-3 w-3" />
+              Cancel
+            </button>
+            <button
+              onClick={onSave}
+              disabled={savePending}
+              className="bg-primary text-primary-foreground flex items-center gap-1 rounded px-3 py-1 text-sm hover:opacity-90 disabled:opacity-50"
+            >
+              <Save className="h-3 w-3" />
+              {savePending ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </div>
+        <CodeEditor
+          value={editContent}
+          onChange={setEditContent}
+          filename={tabName}
+          className="min-h-0 flex-1"
+        />
+      </div>
+    )
+  }
+
+  // 只读模式：使用 CodeEditor 的只读预览
+  return <MarkdownViewer markdown={content} />
+}