@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/pages/FilesView.tsx

@@ -0,0 +1,406 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { AUDIO_TYPES, IMAGE_EXTENSIONS, type ContentMatch, type DirEntry, type DirListing, type FileContent, type FileMatch } from "@shared/files.ts";
+import { api, ApiError } from "../api.ts";
+import { useProjects } from "../hooks.ts";
+import { formatSize } from "../format.ts";
+import { CodeView, guessLang } from "../components/CodeView.tsx";
+import { FileCopyMenu } from "../components/FileCopyMenu.tsx";
+import { FileEntryActions, FileUploadProvider, UploadButton } from "../components/FileEntryActions.tsx";
+import { rememberProjectFile, setProjectFilesState, useProjectFilesState } from "../project-files-state.ts";
+import { useProjectImageVersion } from "../project-images.ts";
+import { AnnotationSelection } from "../components/AnnotationSelection.tsx";
+import { Markdown } from "../components/Markdown.tsx";
+import { ProjectTabs, encodePath, fileApi } from "../components/ProjectNav.tsx";
+import { Button, cx } from "../ui/Button.tsx";
+import { ResizablePane } from "../ui/ResizablePane.tsx";
+import { EmptyState, Segmented, Skeleton, inputCls } from "../ui/Form.tsx";
+import { ArrowLeftIcon, ChevronDownIcon, ChevronRightIcon, FileIcon, FolderIcon, ImageFileIcon, LinkIcon, SearchIcon, XIcon } from "../ui/icons.tsx";
+
+export function FilesView() {
+  const params = useParams() as { pid: string; "*"?: string };
+  const pid = params.pid;
+  const file = params["*"] ?? "";
+  const [search] = useSearchParams();
+  const line = Number(search.get("line")) || undefined;
+  const saved = useProjectFilesState(pid);
+  const expanded = useMemo(() => new Set(saved.expanded), [saved.expanded]);
+  useEffect(() => { rememberProjectFile(pid, file); }, [pid, file]);
+
+  const toggle = (p: string) =>
+    setProjectFilesState(pid, (s) => {
+      const n = new Set(s.expanded);
+      if (n.has(p)) n.delete(p);
+      else n.add(p);
+      return { expanded: [...n] };
+    });
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <FileUploadProvider key={pid} pid={pid}>
+      <ProjectTabs projectId={pid}>
+        {expanded.size > 0 && (
+          <Button variant="ghost" size="sm" onClick={() => setProjectFilesState(pid, { expanded: [] })} className="hidden md:inline-flex" title="收起所有目录">
+            全部收起
+          </Button>
+        )}
+        <FileEntryActions pid={pid} path="" directory />
+      </ProjectTabs>
+      <div className="flex min-h-0 min-w-0 flex-1">
+        <ResizablePane storageKey="claude-ide:files-width" label="调整文件列表宽度" defaultWidth={320} className={cx(file ? "hidden md:flex" : "flex", "min-h-0 w-full flex-col border-border md:bg-surface-2/30 md:border-r")}>
+          <FilePanel pid={pid} file={file} expanded={expanded} toggle={toggle} />
+        </ResizablePane>
+        <section className={cx(file ? "flex" : "hidden md:flex", "min-h-0 min-w-0 flex-1 flex-col")}>
+          {file ? <FileViewer key={`${pid}:${file}`} pid={pid} path={file} line={line} /> : <NoFile pid={pid} />}
+        </section>
+      </div>
+      </FileUploadProvider>
+    </div>
+  );
+}
+
+/** Desktop root view: open the README in the regular viewer while phones keep the file list. */
+function NoFile({ pid }: { pid: string }) {
+  const root = useQuery({ queryKey: ["files", pid, ""], queryFn: () => api<DirListing>(fileApi(pid, "files", { path: "" })) });
+  const readme = root.data?.entries.find((e) => e.type === "file" && /^readme(\.md|\.markdown)?$/i.test(e.name));
+  const dirs = root.data?.entries.filter((e) => e.type === "dir").length ?? 0;
+  const files = root.data?.entries.filter((e) => e.type === "file").length ?? 0;
+  if (root.data?.entries.length === 0) return <div className="m-auto flex max-w-md flex-col items-center gap-4 p-6 text-center">
+    <EmptyState icon={<FolderIcon size={16} />} title="项目目录还是空的">上传图片、音频、文档或其他文件，开始使用这个工作区。</EmptyState>
+    <UploadButton primary />
+  </div>;
+  if (readme) return <FileViewer key={`${pid}:${readme.path}`} pid={pid} path={readme.path} />;
+  return (
+    <div className="m-auto w-full max-w-md p-6">
+      <EmptyState icon={<FileIcon size={16} />} title="选择左侧的文件查看">
+        {root.data ? `根目录下有 ${dirs} 个目录、${files} 个文件。` : ""}可以按文件名模糊搜索，或切到“内容”在所有文件里查找文字，点结果直接跳到那一行。
+      </EmptyState>
+    </div>
+  );
+}
+
+// ---------- left panel: search + tree ----------
+
+function useDebounced<T>(value: T, ms: number) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), ms);
+    return () => clearTimeout(t);
+  }, [value, ms]);
+  return v;
+}
+
+function FilePanel({ pid, file, expanded, toggle }: { pid: string; file: string; expanded: Set<string>; toggle: (p: string) => void }) {
+  const saved = useProjectFilesState(pid);
+  const q = saved.search, mode = saved.searchMode;
+  const setQ = (search: string) => setProjectFilesState(pid, { search });
+  const setMode = (searchMode: "name" | "content") => setProjectFilesState(pid, { searchMode });
+  const dq = useDebounced(q.trim(), 200);
+
+  return (
+    <>
+      <div className="space-y-2 border-b border-border p-2.5">
+        <span className="relative block">
+          <SearchIcon className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted" />
+          <input
+            type="search"
+            aria-label="搜索文件"
+            placeholder={mode === "name" ? "按文件名搜索" : "按内容搜索"}
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            onKeyDown={(e) => e.key === "Escape" && setQ("")}
+            className={cx(inputCls, "pl-8 pr-9 [&::-webkit-search-cancel-button]:hidden")}
+          />
+          {q && (
+            <button type="button" aria-label="清空搜索" onClick={() => setQ("")} className="absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded text-muted hover:text-text md:size-6">
+              <XIcon size={12} />
+            </button>
+          )}
+        </span>
+        <Segmented
+          label="搜索方式"
+          size="sm"
+          stretch
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: "name", label: "文件名" },
+            { value: "content", label: "内容" },
+          ]}
+        />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto py-1">
+        {dq ? (
+          mode === "name" ? (
+            <NameResults pid={pid} q={dq} />
+          ) : (
+            <ContentResults pid={pid} q={dq} />
+          )
+        ) : (
+          <nav aria-label="文件树">
+            <TreeDir pid={pid} dir="" depth={0} file={file} expanded={expanded} toggle={toggle} />
+          </nav>
+        )}
+      </div>
+    </>
+  );
+}
+
+function TreeDir({ pid, dir, depth, file, expanded, toggle }: { pid: string; dir: string; depth: number; file: string; expanded: Set<string>; toggle: (p: string) => void }) {
+  const listing = useQuery({
+    queryKey: ["files", pid, dir],
+    queryFn: () => api<DirListing>(fileApi(pid, "files", { path: dir })),
+  });
+  const pad = { paddingLeft: `${depth * 14 + 30}px` };
+  if (listing.isPending) return <div className="py-1.5 text-xs text-muted" style={pad}>加载中…</div>;
+  if (listing.isError) return <div className="py-1.5 text-xs text-danger" style={pad}>{(listing.error as Error).message}</div>;
+  return (
+    <ul role={depth === 0 ? "tree" : "group"}>
+      {listing.data.entries.map((e) => (
+        <TreeNode key={e.path} pid={pid} e={e} depth={depth} file={file} expanded={expanded} toggle={toggle} />
+      ))}
+      {listing.data.entries.length === 0 && (dir
+        ? <li className="py-1.5 text-xs text-muted" style={pad}>空目录</li>
+        : <li className="space-y-3 p-4 text-sm text-muted"><p>目录还是空的</p><div className="md:hidden"><UploadButton primary /></div></li>)}
+      {listing.data.truncated && <li className="py-1.5 text-xs text-muted" style={pad}>条目过多，只显示了一部分</li>}
+    </ul>
+  );
+}
+
+const isImage = (p: string) => IMAGE_EXTENSIONS.some((ext) => p.toLowerCase().endsWith(ext));
+const isMarkdown = (p: string) => /\.(md|markdown|mdx)$/i.test(p);
+
+function TreeNode({ pid, e, depth, file, expanded, toggle }: { pid: string; e: DirEntry; depth: number; file: string; expanded: Set<string>; toggle: (p: string) => void }) {
+  const navigate = useNavigate();
+  const isDir = e.type === "dir";
+  const open = isDir && expanded.has(e.path);
+  const disabled = e.outside || e.type === "other";
+  const active = file === e.path;
+  return (
+    <li role="treeitem" aria-expanded={isDir ? open : undefined} aria-selected={active}>
+      <div className={cx("group flex min-w-0 items-center pr-1", active ? "bg-accent/10 font-medium text-text" : "hover:bg-surface-2/80", (e.ignored || disabled) && "opacity-55")}>
+      <button
+        disabled={disabled}
+        onClick={() => (isDir ? toggle(e.path) : navigate(`/p/${pid}/files/${encodePath(e.path)}`))}
+        title={e.outside ? "链接指向项目之外" : e.path}
+        data-path={e.path}
+        className={cx(
+          "flex min-w-0 flex-1 items-center gap-1.5 py-2 pr-2 text-left text-sm md:py-1",
+        )}
+        style={{ paddingLeft: `${depth * 14 + 8}px` }}
+      >
+        <span className="flex w-3.5 shrink-0 justify-center text-muted">{isDir ? <ChevronRightIcon size={12} className={cx("transition-transform", open && "rotate-90")} /> : null}</span>
+        <span className={cx("shrink-0", isDir ? "text-accent/80" : "text-muted")}>{isDir ? <FolderIcon /> : isImage(e.name) ? <ImageFileIcon /> : <FileIcon />}</span>
+        <span className="min-w-0 flex-1 truncate">{e.name}</span>
+        {e.link && <LinkIcon size={12} className="shrink-0 text-muted" aria-label="符号链接" />}
+        {!isDir && e.size !== undefined && <span className="shrink-0 text-[11px] tabular-nums text-muted opacity-0 transition-opacity group-hover:opacity-100">{formatSize(e.size)}</span>}
+      </button>
+      {!disabled && <FileEntryActions pid={pid} path={e.path} directory={isDir} />}
+      </div>
+      {open && <TreeDir pid={pid} dir={e.path} depth={depth + 1} file={file} expanded={expanded} toggle={toggle} />}
+    </li>
+  );
+}
+
+function SplitPath({ path }: { path: string }) {
+  const i = path.lastIndexOf("/");
+  return (
+    <span className="min-w-0 truncate">
+      <span>{path.slice(i + 1)}</span>
+      {i > 0 && <span className="ml-1.5 text-xs text-muted">{path.slice(0, i)}</span>}
+    </span>
+  );
+}
+
+function Hint({ children, danger }: { children: ReactNode; danger?: boolean }) {
+  return <p className={cx("px-3 py-4 text-center text-sm", danger ? "text-danger" : "text-muted")}>{children}</p>;
+}
+
+function NameResults({ pid, q }: { pid: string; q: string }) {
+  const res = useQuery({
+    queryKey: ["search-files", pid, q],
+    queryFn: () => api<{ matches: FileMatch[] }>(fileApi(pid, "search/files", { q })),
+  });
+  if (res.isPending) return <div className="px-2"><Skeleton rows={4} /></div>;
+  if (res.isError) return <Hint danger>{(res.error as Error).message}</Hint>;
+  if (!res.data.matches.length) return <Hint>没有匹配“{q}”的文件。试试切到“内容”搜索。</Hint>;
+  return (
+    <>
+      <p className="px-3 pb-1 pt-1.5 text-[11px] text-muted">{res.data.matches.length} 个文件</p>
+      <ul aria-label="文件名搜索结果">
+        {res.data.matches.map((m) => (
+          <li key={m.path} className="flex items-center pr-1 hover:bg-surface-2">
+            <Link to={`/p/${pid}/files/${encodePath(m.path)}`} className="flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-sm md:py-1.5" data-testid="file-result">
+              <FileIcon className="shrink-0 text-muted" />
+              <SplitPath path={m.path} />
+            </Link>
+            <FileEntryActions pid={pid} path={m.path} />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function ContentResults({ pid, q }: { pid: string; q: string }) {
+  const res = useQuery({
+    queryKey: ["search-content", pid, q],
+    queryFn: () => api<{ matches: ContentMatch[]; truncated: boolean }>(fileApi(pid, "search/content", { q })),
+  });
+  const groups = useMemo(() => {
+    const m = new Map<string, ContentMatch[]>();
+    for (const x of res.data?.matches ?? []) m.set(x.path, [...(m.get(x.path) ?? []), x]);
+    return [...m.entries()];
+  }, [res.data]);
+  if (res.isPending) return <div className="px-2"><Skeleton rows={4} /></div>;
+  if (res.isError) return <Hint danger>{(res.error as Error).message}</Hint>;
+  if (!groups.length) return <Hint>没有文件包含“{q}”。</Hint>;
+  return (
+    <div aria-label="内容搜索结果">
+      <p className="px-3 pb-1 pt-1.5 text-[11px] text-muted">
+        {res.data.matches.length} 处，{groups.length} 个文件
+      </p>
+      {groups.map(([path, ms]) => (
+        <div key={path} className="mb-1">
+          <div className="flex items-center gap-1.5 px-3 pb-0.5 pt-2 text-xs font-medium text-muted" title={path}>
+            <FileIcon size={12} className="shrink-0" />
+            <span className="min-w-0 flex-1 truncate">{path}</span>
+            <span className="shrink-0 tabular-nums">{ms.length}</span>
+            <FileEntryActions pid={pid} path={path} />
+          </div>
+          {ms.map((m) => (
+            <Link
+              key={m.line}
+              to={`/p/${pid}/files/${encodePath(m.path)}?line=${m.line}`}
+              className="flex gap-2 px-3 py-1.5 font-mono text-xs hover:bg-surface-2"
+              data-testid="content-result"
+            >
+              <span className="w-8 shrink-0 text-right text-muted">{m.line}</span>
+              <span className="min-w-0 truncate">
+                {m.start !== undefined && m.end !== undefined ? (
+                  <>
+                    {m.text.slice(Math.max(0, m.start - 40), m.start)}
+                    <mark className="rounded-sm bg-accent/25 text-text">{m.text.slice(m.start, m.end)}</mark>
+                    {m.text.slice(m.end)}
+                  </>
+                ) : (
+                  m.text
+                )}
+              </span>
+            </Link>
+          ))}
+        </div>
+      ))}
+      {res.data.truncated && <p className="p-3 text-xs text-muted">结果过多，只显示了前 {res.data.matches.length} 条</p>}
+    </div>
+  );
+}
+
+// ---------- right panel: viewer ----------
+
+function FileViewer({ pid, path, line }: { pid: string; path: string; line?: number }) {
+  const image = isImage(path);
+  const audio = !!AUDIO_TYPES[`.${path.split(".").at(-1)?.toLowerCase()}`];
+  const imageVersion = useProjectImageVersion(pid);
+  const md = isMarkdown(path);
+  const saved = useProjectFilesState(pid);
+  const source = saved.source;
+  const setSource = (source: boolean) => { setProjectFilesState(pid, { source }); };
+  useEffect(() => { if (line) setSource(true); }, [line, pid]);
+  const project = useProjects().data?.find((project) => project.id === pid);
+  const content = useQuery({
+    queryKey: ["file", pid, path],
+    queryFn: () => api<FileContent>(fileApi(pid, "file", { path })),
+    enabled: !image && !audio,
+  });
+  const lines = content.data?.content ? content.data.content.split("\n").length - (content.data.content.endsWith("\n") ? 1 : 0) : 0;
+  const slash = path.lastIndexOf("/");
+  const lang = guessLang(path);
+
+  return (
+    <>
+      <div className="flex min-w-0 items-center gap-2 border-b border-border px-2 py-1.5 md:px-4">
+        <Link
+          to={`/p/${pid}/files`}
+          className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-sm text-muted hover:bg-surface-2 hover:text-text md:hidden"
+          aria-label="返回文件列表"
+        >
+          <ArrowLeftIcon />
+          返回
+        </Link>
+        <div className="min-w-0 flex-1 truncate font-mono text-sm" title={path} data-testid="file-path">
+          {slash > 0 && <span className="text-muted">{path.slice(0, slash + 1)}</span>}
+          <span className="font-medium">{path.slice(slash + 1)}</span>
+        </div>
+        <div className="flex shrink-0 items-center gap-1" data-testid="file-actions">
+          <FileCopyMenu key={`${pid}:${path}`} pid={pid} path={path} root={project?.path} file={content.data} />
+          {md && <div className="flex items-center border-l border-border pl-1" role="group" aria-label="文件显示方式">
+            <Button variant="ghost" size="sm" aria-pressed={!source} className={!source ? "bg-surface-2 text-text" : undefined} onClick={() => setSource(false)}>预览</Button>
+            <Button variant="ghost" size="sm" aria-pressed={source} className={source ? "bg-surface-2 text-text" : undefined} onClick={() => setSource(true)}>源码</Button>
+          </div>}
+        </div>
+      </div>
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <div className="relative h-12 shrink-0">
+          <FileInfo file={content.data} image={image} lang={lang} lines={lines} />
+        </div>
+        <div className="min-h-0 min-w-0 flex-1 overflow-auto" data-testid="file-content">
+          {audio ? (
+            <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-6" data-testid="audio-preview">
+              <p className="break-words text-sm">{path.split("/").at(-1)}</p>
+              <audio controls preload="metadata" src={fileApi(pid, "file", { path })} className="w-full" aria-label="音频预览" />
+              <a className="text-sm text-accent underline" href={fileApi(pid, "file/download", { path })} download>下载音频</a>
+            </div>
+          ) : image ? (
+            <div className="flex justify-center bg-[repeating-conic-gradient(var(--surface-2)_0_25%,transparent_0_50%)] bg-[length:16px_16px] p-6">
+              <img src={fileApi(pid, "file", { path, ...(imageVersion ? { v: String(imageVersion) } : {}) })} alt={path} className="max-h-[80dvh] max-w-full object-contain shadow-sm" />
+            </div>
+          ) : content.isPending ? (
+            <div className="p-4">
+              <Skeleton rows={6} />
+            </div>
+          ) : content.isError ? (
+            <p className="m-4 rounded-md border border-danger/30 bg-danger/5 px-3 py-2 text-sm text-danger" role="alert">
+              {content.error instanceof ApiError ? content.error.message : "读取失败"}
+            </p>
+          ) : content.data.binary ? (
+            <div className="m-auto max-w-md p-6">
+              <EmptyState icon={<FileIcon size={16} />} title="二进制文件，无法预览">
+                {formatSize(content.data.size)}。可以让 Claude 用命令行工具查看它的内容。
+              </EmptyState>
+            </div>
+          ) : (
+            <>
+              {content.data.truncated && <p className="border-b border-border bg-surface-2 px-4 py-2 text-xs text-muted">文件较大，只显示前 1 MB。</p>}
+              {md && !source ? (
+                <div className="mx-auto max-w-3xl px-4 py-4 md:px-6" data-testid="markdown-view">
+                  <Markdown text={content.data.content ?? ""} assetContext={{ projectId: pid, filePath: path, root: project?.path, version: imageVersion }} />
+                </div>
+              ) : content.data.content ? (
+                <AnnotationSelection projectId={pid} filePath={path} fileContent={content.data.content} enabled>
+                  <CodeView code={content.data.content} path={path} line={line} />
+                </AnnotationSelection>
+              ) : (
+                <p className="p-6 text-center text-sm text-muted">空文件。</p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function FileInfo({ file, image, lang, lines }: { file?: FileContent; image: boolean; lang: string; lines: number }) {
+  return <details open className="group absolute right-3 top-2 z-10 w-44 max-w-[calc(100%_-_1.5rem)] rounded-lg border border-border bg-bg/95 text-xs shadow-sm backdrop-blur-sm" data-testid="file-info">
+    <summary className="flex min-h-8 cursor-pointer list-none select-none items-center justify-between gap-3 px-3 text-muted hover:text-text [&::-webkit-details-marker]:hidden">
+      文件信息<ChevronDownIcon size={12} className="transition-transform group-open:rotate-180" />
+    </summary>
+    <dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-5 gap-y-1 px-3 pb-3 pt-1">
+      <dt className="text-muted">类型</dt><dd className="break-words text-right font-mono">{image ? `图片 · ${lang}` : lang}</dd>
+      {file && !file.binary && <><dt className="text-muted">{file.truncated ? "已显示行数" : "行数"}</dt><dd className="text-right tabular-nums">{lines} 行</dd></>}
+      {file && <><dt className="text-muted">大小</dt><dd className="text-right tabular-nums">{formatSize(file.size)}</dd></>}
+    </dl>
+  </details>;
+}

package/web/src/pages/HomePage.tsx

@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import type { ProjectInfo } from "@shared/protocol.ts";
+import { relativeTime, useOverview, useProjects, useSessions } from "../hooks.ts";
+import { AddProject, StateDot } from "../components/Shell.tsx";
+import { Button } from "../ui/Button.tsx";
+import { FolderIcon } from "../ui/icons.tsx";
+import { PlusIcon } from "../components/icons.tsx";
+import { ActionMenu, MenuItem } from "../ui/Controls.tsx";
+import { useRemoveProject } from "../project-actions.ts";
+
+export function HomePage() {
+  const projects = useProjects();
+  const overview = useOverview();
+  const [adding, setAdding] = useState(false);
+  const busy = overview.data ?? [];
+  const list = projects.data ?? [];
+
+  return (
+    <main className="min-h-0 flex-1 overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-4 py-8 md:px-8 md:py-10">
+        <div className="flex items-center gap-3">
+          <h1 className="flex-1 text-3xl">项目</h1>
+          {!adding && (
+            <Button icon={<PlusIcon />} onClick={() => setAdding(true)}>
+              添加项目
+            </Button>
+          )}
+        </div>
+
+        {busy.length > 0 && (
+          <Link to="/overview" className="mt-6 flex items-center gap-3 rounded-xl border border-accent/30 bg-accent/5 px-4 py-3 text-sm transition-colors hover:border-accent/60">
+            <StateDot state={busy.some((b) => b.waitingFor.length || b.state === "requires_action") ? "requires_action" : "running"} />
+            <span className="flex-1">
+              {busy.filter((b) => b.state === "running").length} 个会话运行中
+              {busy.some((b) => b.waitingFor.length) && `，${busy.filter((b) => b.waitingFor.length).length} 个等你处理`}
+            </span>
+            <span className="text-muted">运行总览 →</span>
+          </Link>
+        )}
+
+        {adding && <AddProject onDone={() => setAdding(false)} onCancel={() => setAdding(false)} />}
+        {projects.isSuccess && list.length === 0 && (
+          <section className="mt-6 rounded-xl border border-border bg-surface p-4 md:max-w-lg">
+            <h2 className="text-base">暂无项目</h2>
+            <p className="mt-1 text-xs text-muted">点击右上角添加项目，选择或创建项目目录。</p>
+          </section>
+        )}
+
+        <ul className="mt-6 grid gap-3 md:grid-cols-2">
+          {list.map((p) => (
+            <li key={p.id} className="min-w-0">
+              <ProjectCard p={p} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </main>
+  );
+}
+
+function ProjectCard({ p }: { p: ProjectInfo }) {
+  const sessions = useSessions(p.id);
+  const remove = useRemoveProject();
+  const all = (sessions.data ?? []).filter((s) => !s.archived);
+  const last = all.reduce((m, s) => Math.max(m, s.lastModified), 0);
+  const running = all.filter((s) => s.state !== "idle").length;
+  return (
+    <div className="relative flex h-full min-w-0 flex-col rounded-xl border border-border bg-surface transition-colors hover:border-muted/40" data-testid="project-card" data-project-id={p.id}>
+      <Link to={`/p/${p.id}`} className="flex min-w-0 flex-1 flex-col rounded-xl px-4 py-3.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40">
+        <div className="flex items-center gap-2">
+          <FolderIcon className="shrink-0 text-muted" />
+          <span className="min-w-0 flex-1 truncate font-medium">{p.name}</span>
+          {!p.exists && <span className="text-xs text-danger">目录不存在</span>}
+        </div>
+        <div className="mt-1 truncate font-mono text-xs text-muted">{p.path}</div>
+        <div className="mt-3 flex min-h-7 flex-wrap items-center gap-x-3 gap-y-1 pr-8 text-xs text-muted md:min-h-6">
+          <span>{sessions.isSuccess ? `${all.length} 个会话` : "…"}</span>
+          {last > 0 && <span>最近 {relativeTime(last)}</span>}
+          {running > 0 && (
+            <span className="flex items-center gap-1 text-accent">
+              <StateDot state="running" />
+              {running} 个运行中
+            </span>
+          )}
+        </div>
+      </Link>
+      {remove.error && <p role="alert" className="break-words px-4 pb-3 pr-12 text-xs text-danger">{remove.error.message}</p>}
+      <div className="absolute bottom-3 right-2">
+        <ActionMenu label={`${p.name} 更多操作`} testId="project-menu">
+          {(close) => <MenuItem danger onClick={() => { close(); if (!remove.isPending) remove.mutate(p); }}>{remove.isPending ? "正在移除…" : "移除项目"}</MenuItem>}
+        </ActionMenu>
+      </div>
+    </div>
+  );
+}

package/web/src/pages/LoginPage.tsx

@@ -0,0 +1,56 @@
+import { useState, type FormEvent } from "react";
+import { api, ApiError } from "../api.ts";
+
+export function LoginPage({ onLoggedIn }: { onLoggedIn: () => void }) {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await api("/api/login", { method: "POST", json: { password } });
+      onLoggedIn();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "无法连接服务器");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main className="flex min-h-full items-center justify-center px-4">
+      <form onSubmit={submit} className="w-full max-w-sm space-y-6">
+        <h1 className="text-center text-3xl">Claude IDE</h1>
+        <div className="space-y-2">
+          <label htmlFor="password" className="block text-sm text-muted">
+            密码
+          </label>
+          <input
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            autoFocus
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded-md border border-border bg-surface px-3 py-2.5 text-base outline-none focus:border-accent"
+          />
+          {error && (
+            <p role="alert" className="text-sm text-danger">
+              {error}
+            </p>
+          )}
+        </div>
+        <button
+          type="submit"
+          disabled={busy || !password}
+          className="w-full rounded-md bg-accent px-3 py-2.5 font-medium text-accent-text transition-colors hover:bg-accent-hover disabled:opacity-50"
+        >
+          登录
+        </button>
+      </form>
+    </main>
+  );
+}