@openspecui/web 0.9.0 → 0.9.3

package/src/routes/change-view.tsx

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

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

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