@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/operator/node/modals.tsx

@@ -0,0 +1,720 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Priority } from "./protocol/types";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { relTime, duration, fmtJobCost } from "./format";
+import { type ProjectRow, type ProjectSession, type TaskRow, type AgentsBundle, type InternalUsageEstimate } from "./types";
+import { agentLabel, agentStateHint, defaultAgentFor, findAgent } from "./agents";
+import { StatusDot, Skel, ErrNote } from "./shared";
+import { Modal, BrowseDirButton, PrioritySeg, DepPicker } from "./Modal";
+import { GitHubClonePicker } from "./github";
+import { Markdown } from "./Markdown";
+import { clientFeatures } from "./protocol/features";
+
+// One-click copy, with the button itself confirming. Used for the project id and
+// for the ready-to-run curl snippets below it.
+function useCopy(): [string, (key: string, text: string) => void] {
+  const [copied, setCopied] = useState("");
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  const copy = (key: string, text: string) => {
+    navigator.clipboard?.writeText(text).then(() => {
+      setCopied(key);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(""), 1500);
+    }).catch(() => { /* clipboard blocked */ });
+  };
+  return [copied, copy];
+}
+
+// The project id, copyable, sitting next to the modal's heading. The id is what
+// every /api/projects/{id} call needs, and it is otherwise only visible in the
+// URL — so surfacing it here saves a trip to the address bar.
+function CopyIdChip({ id }: { id: string }) {
+  const [copied, copy] = useCopy();
+  return (
+    <button
+      className="copy-id"
+      onClick={() => copy("id", id)}
+      title={copied ? "已复制" : `复制项目 ID：${id}`}
+      aria-label={`复制项目 ID ${id}`}
+    >
+      <span className="copy-id-v">{id}</span>
+      {copied ? Icon.check() : Icon.copy()}
+    </button>
+  );
+}
+
+// Ready-to-run API calls for THIS project, with its id already filled in. The
+// four cover the whole loop the REST API exists for — create a task, start its
+// turn, watch the stream, read the diff — so the modal doubles as the place you
+// grab a working command instead of assembling one from the docs.
+function ProjectApiSnippets({ projectId }: { projectId: string }) {
+  const [copied, copy] = useCopy();
+  // Three-state: null until /whoami answers. Rendering "token off" while the
+  // fetch is still in flight would flash a claim we haven't verified.
+  const [tokenOn, setTokenOn] = useState<boolean | null>(null);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    jget<{ apiToken?: boolean }>("/api/auth/whoami")
+      .then((d) => { if (alive) setTokenOn(!!d.apiToken); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  const base = typeof window !== "undefined" ? window.location.origin : "";
+  // Only shown when the instance actually gates on a token, so the copied
+  // command matches what this box will accept.
+  const auth = tokenOn ? ` \\\n  -H 'Authorization: Bearer <你的令牌>'` : "";
+  const snippets: { key: string; label: string; cmd: string }[] = [
+    {
+      key: "create",
+      label: "创建任务",
+      cmd: `curl -s -X POST ${base}/api/tasks \\\n  -H 'content-type: application/json'${auth} \\\n  -d '{"project_id":"${projectId}","title":"任务标题","description":"要做什么"}'`,
+    },
+    {
+      key: "start",
+      label: "启动首轮",
+      cmd: `curl -s -X POST ${base}/api/tasks/<任务ID>/messages \\\n  -H 'content-type: application/json'${auth} \\\n  -d '{"text":""}'`,
+    },
+    {
+      key: "watch",
+      label: "监听输出（SSE）",
+      cmd: `curl -N ${base}/api/tasks/<任务ID>/messages${auth}`,
+    },
+    {
+      key: "diff",
+      label: "查看改动",
+      cmd: `curl -s ${base}/api/tasks/<任务ID>/diff${auth}`,
+    },
+    {
+      key: "list",
+      label: "列出本项目的任务",
+      cmd: `curl -s ${base}/api/projects/${projectId}${auth}`,
+    },
+  ];
+
+  return (
+    <div className="field" style={{ marginBottom: 0 }}>
+      <button className="api-snip-head" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
+        <span className={`api-snip-chev ${open ? "open" : ""}`}>{Icon.chevRight()}</span>
+        {Icon.terminal()}
+        <span className="api-snip-t">用接口调用这个项目</span>
+        <span className="opt">— curl，项目 ID 已填好</span>
+      </button>
+      {open && (
+        <div className="api-snips">
+          {/* Why the Authorization line is (or isn't) in the commands above. Without
+              this, an absent header reads as an omission rather than a setting. */}
+          {tokenOn === true && (
+            <div className="api-snip-auth on">
+              {Icon.lock()}
+              {/* One span, not loose nodes: the row is a flex container, so any
+                  bare text or <code> beside the icon would become its own flex
+                  item and the sentence would render as separate columns. */}
+              <span>
+                本实例已启用接口令牌 —— 命令中已加上认证头，把 <code>&lt;你的令牌&gt;</code> 换成实际的值。
+              </span>
+            </div>
+          )}
+          {tokenOn === false && (
+            <div className="api-snip-auth">
+              {Icon.lock()}
+              <span>
+                本实例未启用接口令牌 —— 只有本机能调用，无需认证头。
+                在「设置 → 接口访问」启用后，这里会自动带上 <code>Authorization</code> 头。
+              </span>
+            </div>
+          )}
+          {snippets.map((s) => (
+            <div className="api-snip" key={s.key}>
+              <div className="api-snip-l">
+                <span>{s.label}</span>
+                <button className="btn btn-ghost btn-sm" onClick={() => copy(s.key, s.cmd)}>
+                  {copied === s.key ? Icon.check() : Icon.copy()} {copied === s.key ? "已复制" : "复制"}
+                </button>
+              </div>
+              <pre className="api-snip-pre ctx-mono">{s.cmd}</pre>
+            </div>
+          ))}
+          <div className="hlp" style={{ marginTop: 2 }}>
+            把 <code>&lt;任务ID&gt;</code> 换成「创建任务」返回的 <code>id</code>。首轮的 <code>text</code> 会被忽略
+            —— 智能体收到的是任务的标题和描述。
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Segmented agent picker (Claude Code / Codex …). Hidden when only one agent is
+// registered — nothing to choose. An agent that can't run yet is still
+// selectable (you can create a not-started task and connect later) but flagged
+// with WHY: "未连接" gets a Connect CTA into the setup wizard, "未安装" says the
+// CLI is missing on the server, where connecting again would fix nothing.
+export function AgentPicker({ agents, value, onChange, onConnect, help, label = "智能体" }: {
+  agents: AgentsBundle; value: string; onChange: (id: string) => void; onConnect?: () => void; help?: string; label?: string;
+}) {
+  if (agents.agents.length <= 1) return null;
+  const sel = findAgent(agents, value);
+  const selHint = agentStateHint(sel);
+  return (
+    <div className="field">
+      <div className="lab">{label}</div>
+      <div className="seg" style={{ flexWrap: "wrap" }}>
+        {agents.agents.map((a) => {
+          const hint = agentStateHint(a);
+          return (
+            <button key={a.id} className={a.id === value ? "on" : ""} onClick={() => onChange(a.id)}
+              title={hint ? `${a.label} ${hint === "未安装" ? "的命令行工具未安装在服务器上" : "尚未连接"}` : `使用 ${a.label} 运行`}>
+              {a.label}{hint && <span className="opt"> · {hint}</span>}
+            </button>
+          );
+        })}
+      </div>
+      {selHint ? (
+        <div className="hlp" style={{ color: "var(--amber)", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+          <span>
+            {selHint === "未安装"
+              ? `${sel!.label} 的命令行工具不在服务器上 —— 请先安装（或设置 CLAUDE_CLI_PATH/CODEX_CLI_PATH）再启动会话。`
+              : `${sel!.label} 尚未连接 —— 请先连接再启动会话。`}
+          </span>
+          {selHint === "未连接" && onConnect && <button className="btn btn-line btn-sm" onClick={onConnect}>连接 {sel!.label}</button>}
+        </div>
+      ) : (
+        <div className="hlp">{help ?? "任务开始后也可以随时切换（在对话框底部或这里）。"}</div>
+      )}
+    </div>
+  );
+}
+
+export function NewTaskModal({ project, agents, tasks, onClose, onCreate, onOpenSetup }: { project: ProjectRow; agents: AgentsBundle; tasks: TaskRow[]; onClose: () => void; onCreate: (i: { title: string; desc: string; priority: Priority; agent: string; startNow: boolean; sendContext: boolean; depends_on: string[]; auto_start: boolean; browser: boolean }) => void; onOpenSetup?: () => void }) {
+  const [title, setTitle] = useState("");
+  const [desc, setDesc] = useState("");
+  const [priority, setPriority] = useState<Priority>("med");
+  const [agent, setAgent] = useState(() => defaultAgentFor(agents, project.default_agent));
+  const [startNow, setStartNow] = useState(false);
+  const [sendContext, setSendContext] = useState(project.send_context !== 0);
+  const [deps, setDeps] = useState<string[]>([]);
+  const [autoStart, setAutoStart] = useState(false);
+  // The task's real browser (docs/BROWSER.md): offered only while the feature is on.
+  const showBrowser = clientFeatures().browser;
+  const [browser, setBrowser] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => { ref.current?.focus(); }, []);
+  // The bundle can arrive after mount; adopt the resolved default until the user picks.
+  const touched = useRef(false);
+  useEffect(() => { if (!touched.current) setAgent(defaultAgentFor(agents, project.default_agent)); }, [agents, project.default_agent]);
+  const pickAgent = (id: string) => { touched.current = true; setAgent(id); };
+  const can = title.trim().length > 0;
+  // A task with unfinished blockers can't start now, so the two options are exclusive.
+  const blocked = deps.some((id) => tasks.find((t) => t.id === id)?.status !== "done");
+  // Can't launch a session on an agent that isn't signed in — but the task can
+  // still be created (not started) and started once the agent is connected.
+  const selAgent = findAgent(agents, agent);
+  // Ready = connected AND installed on the server (POST /messages refuses the
+  // launch otherwise, so offering "start now" here would just produce a 400).
+  const agentReady = selAgent ? !agentStateHint(selAgent) : true;
+  const canStart = !blocked && agentReady;
+  const create = () => can && onCreate({ title: title.trim(), desc: desc.trim(), priority, agent, startNow: startNow && canStart, sendContext, depends_on: deps, auto_start: autoStart && deps.length > 0, browser: showBrowser && browser });
+  return (
+    <Modal title="新建任务" sub={`${project.name} · 标题与描述构成 ${agentLabel(agents, agent)} 的任务上下文`} onClose={onClose}
+      footer={<>
+        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: !canStart ? "var(--ink-4)" : "var(--ink-2)", cursor: !canStart ? "not-allowed" : "pointer" }}
+          title={blocked ? "暂时无法开始 —— 该任务被尚未完成的任务阻塞" : !agentReady ? `${selAgent?.label} ${agentStateHint(selAgent) === "未安装" ? "的命令行工具未安装在服务器上" : "尚未连接"}，无法启动会话` : undefined}>
+          <input type="checkbox" checked={startNow && canStart} disabled={!canStart} onChange={(e) => setStartNow(e.target.checked)} /> 立即开始会话
+        </label>
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={onClose}>取消</button>
+        <button className="btn btn-accent" disabled={!can} onClick={create}>{Icon.plus()} 创建任务</button>
+      </>}>
+      <div className="field">
+        <div className="lab">标题</div>
+        <input ref={ref} type="text" value={title} placeholder="例如：为认证接口加上限流"
+          onChange={(e) => setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && can) create(); }} />
+      </div>
+      <div className="field">
+        <div className="lab">描述 <span className="opt">— 要做什么</span></div>
+        <textarea value={desc} placeholder="描述这个功能或任务。智能体会在注入的任务上下文中收到这段内容。" onChange={(e) => setDesc(e.target.value)} />
+        {sendContext && <div className="hlp">项目上下文会自动前置 —— 无需重复说明技术栈或规范。</div>}
+        <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, fontSize: 12.5, color: "var(--ink-2)", cursor: "pointer" }}
+          title="取消勾选后，该任务的会话不会携带已保存的项目上下文。任务详情与编排工具始终包含在内。">
+          <input type="checkbox" checked={sendContext} onChange={(e) => setSendContext(e.target.checked)} />
+          向智能体发送已保存的项目上下文
+        </label>
+        {showBrowser && (
+          <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6, fontSize: 12.5, color: "var(--ink-2)", cursor: "pointer" }}
+            title="智能体可以用这台节点上的真实浏览器（ego lite）打开网页、填写表单、抓取数据；你可以在任务右侧「浏览器」面板实时查看和接管。">
+            <input type="checkbox" checked={browser} onChange={(e) => setBrowser(e.target.checked)} />
+            使用浏览器（ego lite）
+          </label>
+        )}
+      </div>
+      <AgentPicker agents={agents} value={agent} onChange={pickAgent} onConnect={onOpenSetup} />
+      <div className="field">
+        <div className="lab">优先级</div>
+        <PrioritySeg value={priority} onChange={setPriority} />
+      </div>
+      <DepPicker candidates={tasks} value={deps} onChange={setDeps} autoStart={autoStart} onAutoStart={setAutoStart} />
+    </Modal>
+  );
+}
+
+export function EditTaskModal({ task, tasks, agents, onClose, onSave, onDelete, onOpenSetup }: { task: TaskRow; tasks: TaskRow[]; agents: AgentsBundle; onClose: () => void; onSave: (id: string, patch: { title: string; description: string; priority: Priority; agent?: string; depends_on: string[]; auto_start: boolean }) => void; onDelete: (id: string) => void; onOpenSetup?: () => void }) {
+  const [title, setTitle] = useState(task.title);
+  const [desc, setDesc] = useState(task.description);
+  const [priority, setPriority] = useState<Priority>(task.priority);
+  const [agent, setAgent] = useState(task.agent);
+  const [deps, setDeps] = useState<string[]>(task.depends_on ?? []);
+  const [autoStart, setAutoStart] = useState(!!task.auto_start);
+  const [confirmDel, setConfirmDel] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => { ref.current?.focus(); }, []);
+  const can = title.trim().length > 0;
+  const candidates = useMemo(() => tasks.filter((t) => t.id !== task.id), [tasks, task.id]);
+  const save = () => can && onSave(task.id, { title: title.trim(), description: desc.trim(), priority, agent: agent !== task.agent ? agent : undefined, depends_on: deps, auto_start: autoStart && deps.length > 0 });
+  return (
+    <Modal title="编辑任务" sub="标题与描述构成智能体的任务上下文" onClose={onClose}
+      footer={<>
+        {confirmDel ? (
+          <button className="btn-danger on" onClick={() => onDelete(task.id)} title="永久删除该任务及其会话与 worktree">{Icon.x()} 永久删除任务</button>
+        ) : (
+          <button className="btn-danger" onClick={() => setConfirmDel(true)}>{Icon.x()} 删除任务</button>
+        )}
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={onClose}>取消</button>
+        <button className="btn btn-accent" disabled={!can} onClick={save}>{Icon.check()} 保存修改</button>
+      </>}>
+      <div className="field">
+        <div className="lab">标题</div>
+        <input ref={ref} type="text" value={title} placeholder="例如：为认证接口加上限流"
+          onChange={(e) => setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && can) save(); }} />
+      </div>
+      <div className="field">
+        <div className="lab">描述 <span className="opt">— 要做什么</span></div>
+        <textarea value={desc} placeholder="描述这个功能或任务。这会成为智能体启动提示的正文。" onChange={(e) => setDesc(e.target.value)} />
+        {task.started === 1 ? (
+          <div className="hlp">已发送给智能体 —— 这里的修改会更新任务记录和之后的会话，但不影响正在运行的会话。</div>
+        ) : (
+          <div className="hlp">项目上下文会自动前置 —— 无需重复说明技术栈或规范。</div>
+        )}
+      </div>
+      <AgentPicker agents={agents} value={agent} onChange={setAgent} onConnect={onOpenSetup}
+        help={task.started === 1 ? "任务进行中也可以切换 —— 从下一条消息起由新智能体接手，并会带上此前的对话记录。" : undefined} />
+      <div className="field">
+        <div className="lab">优先级</div>
+        <PrioritySeg value={priority} onChange={setPriority} />
+      </div>
+      <DepPicker candidates={candidates} value={deps} onChange={setDeps} autoStart={autoStart} onAutoStart={setAutoStart} />
+      {confirmDel && (
+        <div className="hlp" style={{ color: "var(--red)", marginTop: 16 }}>
+          这会从编排器中永久删除“{task.title}”及其智能体会话和 git worktree。worktree 中未合并的改动都会被丢弃。
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+// Mirror of the server's RefreshState (lib/contextRefresh.ts) — the detached
+// "Refresh with AI" job state the modal polls.
+type RefreshState = { status: "idle" | "running" | "done" | "error"; draft: string; error: string; started_at: number; estimate?: InternalUsageEstimate | null };
+
+export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSave, onDelete, onDeprecate }: { project: ProjectRow; agents: AgentsBundle; onSetDefaultAgent: (agent: string) => void; onClose: () => void; onSave: (p: { name: string; context: string; send_context: number; repo_path: string; branch: string; dev_command: string; setup_command: string; test_command: string }) => void; onDelete: () => void; onDeprecate: () => void }) {
+  const [name, setName] = useState(project.name);
+  const [context, setContext] = useState(project.context);
+  const [sendContext, setSendContext] = useState(project.send_context !== 0);
+  const [repo, setRepo] = useState(project.repo_path);
+  const [branch, setBranch] = useState(project.branch);
+  const [devCmd, setDevCmd] = useState(project.dev_command);
+  const [setupCmd, setSetupCmd] = useState(project.setup_command);
+  const [testCmd, setTestCmd] = useState(project.test_command);
+  const [confirmDel, setConfirmDel] = useState(false);
+  const showServices = clientFeatures().services;
+  // AI context refresh: let Claude read the repo and draft fresh context. The
+  // draft now runs as a DETACHED server-side job (it can take minutes and must
+  // survive sleep/reload), so the client starts it and polls for the result
+  // rather than holding one long request open. The drafted text replaces the
+  // textarea but isn't saved until Save — we stash the prior text for Undo.
+  const [refreshing, setRefreshing] = useState(false);
+  const [refreshErr, setRefreshErr] = useState<string | null>(null);
+  const [prevContext, setPrevContext] = useState<string | null>(null);
+  const [refreshEstimate, setRefreshEstimate] = useState<InternalUsageEstimate | null>(null);
+  // Edit vs. rendered-markdown preview of the context. Refreshing forces edit
+  // (the textarea shows the disabled/loading state).
+  const [preview, setPreview] = useState(false);
+  const showPreview = preview && !refreshing;
+
+  // Latest edited context, read inside async handlers without making them
+  // depend on `context` (which would churn the polling effect / stale-close it).
+  const contextRef = useRef(context);
+  contextRef.current = context;
+  // started_at of the job whose result we've already applied — so a draft is
+  // consumed exactly once even if a POST reply and a poll tick race.
+  const appliedRef = useRef(0);
+
+  const ackRefresh = useCallback(() => {
+    jsend(`/api/projects/${project.id}/refresh-context`, "DELETE").catch(() => {});
+  }, [project.id]);
+
+  // Fold a polled job state into the UI. Idempotent: applies a finished draft at
+  // most once, then acks it so it doesn't resurface on the next modal open.
+  const handleState = useCallback((s: RefreshState) => {
+    setRefreshEstimate(s.estimate ?? null);
+    if (s.status === "running") { setRefreshing(true); return; }
+    if (s.started_at && appliedRef.current !== s.started_at) {
+      if (s.status === "done" && s.draft) {
+        appliedRef.current = s.started_at;
+        setPrevContext(contextRef.current);
+        setContext(s.draft);
+        setRefreshErr(null);
+        ackRefresh();
+      } else if (s.status === "error") {
+        appliedRef.current = s.started_at;
+        setRefreshErr(s.error || "刷新失败");
+        ackRefresh();
+      }
+    }
+    setRefreshing(false);
+  }, [ackRefresh]);
+
+  // On open, reconnect to whatever the server has: a still-running job, or a
+  // draft/error left from a job that finished while the modal was closed.
+  useEffect(() => {
+    let alive = true;
+    jget<RefreshState>(`/api/projects/${project.id}/refresh-context`)
+      .then((s) => { if (alive) handleState(s); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, [project.id, handleState]);
+
+  // While a job runs, poll for its result. Stops when refreshing flips false
+  // (terminal state) or the modal unmounts — the job keeps running server-side.
+  useEffect(() => {
+    if (!refreshing) return;
+    const t = setInterval(() => {
+      jget<RefreshState>(`/api/projects/${project.id}/refresh-context`).then(handleState).catch(() => {});
+    }, 2500);
+    return () => clearInterval(t);
+  }, [refreshing, project.id, handleState]);
+
+  const refreshContext = async () => {
+    if (refreshing) return;
+    setRefreshErr(null);
+    setRefreshing(true);
+    try {
+      handleState(await jsend<RefreshState>(`/api/projects/${project.id}/refresh-context`, "POST"));
+    } catch (e) {
+      let msg = e instanceof Error ? e.message : String(e);
+      try { const j = JSON.parse(msg); if (j?.error) msg = j.error; } catch { /* not JSON — show raw */ }
+      setRefreshErr(msg);
+      setRefreshing(false);
+    }
+  };
+
+  return (
+    <Modal title={<>项目上下文 <CopyIdChip id={project.id} /></>} sub={`会前置到 ${project.name} 的每个任务`} onClose={onClose} width={620}
+      footer={<>
+        {confirmDel ? (
+          <button className="btn-danger on" onClick={onDelete} title="永久删除该项目及其任务和对话历史">{Icon.x()} 永久删除 {project.name}</button>
+        ) : (
+          <>
+            <button className="btn-danger" onClick={() => setConfirmDel(true)}>{Icon.x()} 删除项目</button>
+            <button className="btn btn-line" onClick={onDeprecate} title="把该项目收进侧栏的已归档区域。不会删除任何内容 —— 随时可以恢复。">{Icon.archive()} 归档</button>
+          </>
+        )}
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={onClose}>取消</button>
+        <button className="btn btn-accent" onClick={() => onSave({ name, context, send_context: sendContext ? 1 : 0, repo_path: repo, branch, dev_command: devCmd, setup_command: setupCmd, test_command: testCmd })}>{Icon.check()} 保存</button>
+      </>}>
+      <div className="field">
+        <div className="lab">项目名称</div>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+      </div>
+      <div className="field">
+        <div className="lab ctx-lab">
+          <span>我们在做什么</span>
+          <div className="ctx-actions">
+            {prevContext != null && !refreshing && (
+              <button
+                className="btn btn-ghost btn-sm"
+                onClick={() => { setContext(prevContext); setPrevContext(null); }}
+                title="恢复 AI 刷新前的上下文"
+              >撤销</button>
+            )}
+            <button
+              className={`btn btn-line btn-sm${showPreview ? " on" : ""}`}
+              onClick={() => setPreview((p) => !p)}
+              disabled={refreshing}
+              title="切换 Markdown 渲染预览"
+            >{Icon.doc()} {showPreview ? "编辑" : "预览"}</button>
+            <button
+              className="btn btn-line btn-sm"
+              onClick={refreshContext}
+              disabled={refreshing || !repo}
+              title={repo ? "让智能体阅读仓库并起草新的上下文。保存前请先审阅和修改。" : "请先设置工作目录"}
+            >{Icon.spark()} {refreshing ? "正在阅读仓库…" : "用 AI 刷新"}</button>
+            {refreshEstimate && !refreshing && (
+              <span className="job-cost-hint">
+                {refreshEstimate.source === "project_latest" ? "上次运行消耗" : "通常运行消耗"} {fmtJobCost(refreshEstimate)}
+              </span>
+            )}
+          </div>
+        </div>
+        {showPreview ? (
+          <div className={`md-preview${context.trim() ? "" : " empty"}`} style={{ minHeight: 150, maxHeight: 320 }}>
+            {context.trim() ? <Markdown>{context}</Markdown> : "暂无可预览的内容。"}
+          </div>
+        ) : (
+          <textarea style={{ minHeight: 150 }} value={context} disabled={refreshing} onChange={(e) => setContext(e.target.value)} />
+        )}
+        {refreshErr ? (
+          <ErrNote style={{ marginTop: 7 }} onRetry={refreshContext} retryLabel="重试">{refreshErr}</ErrNote>
+        ) : refreshing ? (
+          <div className="hlp" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span className="typing"><i /><i /><i /></span>
+            正在浏览 {repo.split("/").pop() || "仓库"} 以起草新的上下文 —— 可能需要一分钟。
+          </div>
+        ) : prevContext != null ? (
+          <div className="hlp">已根据仓库起草。请审阅并修改后保存 —— 或点击「撤销」还原。</div>
+        ) : (
+          <div className="hlp">尽量写清技术栈、规范与约束。该项目下的每个任务都会继承这段内容。</div>
+        )}
+        <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, fontSize: 12.5, color: "var(--ink-2)", cursor: "pointer" }}>
+          <input type="checkbox" checked={sendContext} onChange={(e) => setSendContext(e.target.checked)} />
+          在新的智能体会话中包含这段上下文
+        </label>
+        {!sendContext && (
+          <div className="hlp">新任务将不携带已保存的上下文启动（任务详情与编排工具仍然包含）。每个任务在启动时都可以单独覆盖此设置。</div>
+        )}
+      </div>
+      <div style={{ display: "flex", gap: 14 }}>
+        <div className="field" style={{ flex: 1, marginBottom: 0 }}>
+          <div className="lab">{Icon.folder()} 工作目录 <span className="opt">— 运行任务必需</span></div>
+          <div style={{ display: "flex", gap: 8 }}>
+            <input type="text" className="ctx-mono" style={{ flex: 1, minWidth: 0 }} value={repo} placeholder="/Users/you/code/project" onChange={(e) => setRepo(e.target.value)} />
+            <BrowseDirButton initial={repo} onPick={setRepo} />
+          </div>
+        </div>
+        <div className="field" style={{ flex: "0 0 170px", marginBottom: 0 }}>
+          <div className="lab">{Icon.git()} 分支</div>
+          <input type="text" className="ctx-mono" value={branch} onChange={(e) => setBranch(e.target.value)} />
+        </div>
+      </div>
+      <div style={{ marginTop: 14 }}>
+        <AgentPicker
+          agents={agents} value={project.default_agent} onChange={onSetDefaultAgent}
+          label="新任务的默认智能体"
+          help="该项目的新任务默认使用此智能体。已有任务仍保留创建时选定的智能体。"
+        />
+      </div>
+      {showServices && (
+        <div className="field" style={{ marginTop: 14 }}>
+          <div className="lab ctx-lab">
+            <span>{Icon.sliders()} 服务</span>
+            <span className="opt" style={{ fontWeight: 400 }}>端口 <code className="ctx-mono">{project.port || "—"}</code> 会以 <code className="ctx-mono">PORT</code> 注入</span>
+          </div>
+          <div className="hlp" style={{ marginTop: 0, marginBottom: 8 }}>
+            编排器会在 {repo ? repo.split("/").pop() : "工作目录"} 中托管这些进程 —— 可在「服务」面板启停，它们的生命周期独立于浏览器标签页。
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <label className="svc-cfg-row">
+              <span className="svc-cfg-lab">开发服务器</span>
+              <input type="text" className="ctx-mono" value={devCmd} placeholder="npm run dev" onChange={(e) => setDevCmd(e.target.value)} />
+            </label>
+            <label className="svc-cfg-row">
+              <span className="svc-cfg-lab">初始化 <span className="opt">— 可选</span></span>
+              <input type="text" className="ctx-mono" value={setupCmd} placeholder="npm install" onChange={(e) => setSetupCmd(e.target.value)} />
+            </label>
+            <label className="svc-cfg-row">
+              <span className="svc-cfg-lab">测试 <span className="opt">— 可选</span></span>
+              <input type="text" className="ctx-mono" value={testCmd} placeholder="npm test" onChange={(e) => setTestCmd(e.target.value)} />
+            </label>
+          </div>
+        </div>
+      )}
+      <ProjectApiSnippets projectId={project.id} />
+      {confirmDel && (
+        <div className="hlp" style={{ color: "var(--red)", marginTop: 16 }}>
+          这会从编排器中永久删除“{project.name}”及其任务和对话历史。磁盘上{repo ? ` ${repo} 中` : ""}的代码不会被改动。
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+export function SessionsModal({ project, onClose, onJump }: { project: ProjectRow; onClose: () => void; onJump: (taskId: string) => void }) {
+  const [sessions, setSessions] = useState<ProjectSession[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const load = useCallback(() => {
+    setError(null);
+    setSessions(null);
+    jget<ProjectSession[]>(`/api/projects/${project.id}/sessions`)
+      .then(setSessions)
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, [project.id]);
+  useEffect(() => { load(); }, [load]);
+
+  const total = sessions?.length ?? 0;
+  return (
+    <Modal
+      title="会话"
+      sub={`${project.name} 下运行过的所有智能体会话${sessions ? ` · 共 ${total} 个` : ""}`}
+      onClose={onClose}
+      width={640}
+    >
+      {error && <ErrNote onRetry={load}>无法加载会话：{error}</ErrNote>}
+      {!sessions && !error && (
+        // Skeleton mirroring the session rows below, so the modal doesn't reflow
+        // when the real list lands.
+        <div className="skel-list" aria-hidden>
+          {[52, 38, 46].map((w, i) => (
+            <div key={i} className="task" style={{ cursor: "default", marginBottom: 0 }}>
+              <div className="task-top">
+                <Skel w={9} h={9} r="50%" />
+                <Skel w={`${w}%`} h={12} />
+                <span style={{ flex: 1 }} />
+                <Skel w={70} h={10} />
+              </div>
+              <div className="task-foot">
+                <Skel w={150} h={9} />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {sessions && total === 0 && (
+        <div className="empty" style={{ padding: "24px 8px" }}>
+          <div className="e-t">还没有会话</div>
+          <div className="e-s">启动一个任务，开启该项目的第一个智能体会话。</div>
+        </div>
+      )}
+      {sessions && total > 0 && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {sessions.map((s) => (
+            <button
+              key={s.id}
+              className="task"
+              style={{ textAlign: "left", width: "100%" }}
+              onClick={() => onJump(s.task_id)}
+              title="打开该任务"
+            >
+              <div className="task-top">
+                <StatusDot status={s.task_status} running={!s.ended_at} />
+                <span className="ttitle">{s.task_title}</span>
+                <span className="slabel">第 {s.generation} 次会话</span>
+              </div>
+              <div className="task-foot">
+                <span className="activity">{relTime(s.started_at)} · {duration(s.started_at, s.ended_at)} · {s.message_count} 条消息</span>
+                <span className="spacer" />
+                {s.claude_session_id ? (
+                  <span className="activity ctx-mono" title={s.claude_session_id} style={{ fontSize: 11, opacity: 0.7 }}>
+                    {s.claude_session_id.slice(0, 8)}
+                  </span>
+                ) : (
+                  <span className="activity" style={{ opacity: 0.5 }}>无会话 ID</span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+export function NewProjectModal({ onClose, onCreate }: { onClose: () => void; onCreate: (i: { name: string; sub: string; color: string; context: string; repo_path: string; branch?: string }) => void | Promise<void> }) {
+  const [name, setName] = useState("");
+  const [sub, setSub] = useState("");
+  const [context, setContext] = useState("");
+  const [repo, setRepo] = useState("");
+  const colors = ["#C2603C", "#3E7CA8", "#6B6F8C", "#5C8C5A", "#9A6E14", "#9E5BA0"];
+  const [color, setColor] = useState(colors[0]);
+  // Where the code comes from: a local folder — existing repo or greenfield —
+  // or a clone of one of the user's GitHub repos (the onboarding path).
+  const [mode, setMode] = useState<"fresh" | "clone">("fresh");
+  const [cloneSpec, setCloneSpec] = useState(""); // owner/repo or pasted URL
+  const [cloning, setCloning] = useState(false);
+  const [cloneErr, setCloneErr] = useState<string | null>(null);
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => { ref.current?.focus(); }, []);
+  const ok = name.trim().length > 0 && !cloning && (mode === "fresh" || cloneSpec.trim().length > 0);
+
+  const submit = async () => {
+    if (!ok) return;
+    const base = { name: name.trim(), sub: sub.trim() || "应用", color, context: context.trim() };
+    if (mode === "fresh") { await onCreate({ ...base, repo_path: repo.trim() }); return; }
+    // Clone first; only create the project once the repo actually landed.
+    setCloning(true);
+    setCloneErr(null);
+    try {
+      const r = await jsend<{ path: string; branch: string }>("/api/github/clone", "POST", { repo: cloneSpec.trim() });
+      await onCreate({ ...base, repo_path: r.path, branch: r.branch });
+    } catch (e) {
+      setCloneErr(e instanceof Error ? e.message : String(e));
+      setCloning(false);
+    }
+  };
+
+  return (
+    <Modal title="新建项目" sub="每个项目都是你正在构建的一个独立应用" onClose={onClose}
+      footer={<>
+        {cloneErr && <span className="hlp" style={{ color: "var(--red)", margin: 0 }}>⚠ {cloneErr}</span>}
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={onClose}>取消</button>
+        <button className="btn btn-accent" disabled={!ok} onClick={submit}>
+          {Icon.plus()} {mode === "clone" ? (cloning ? "克隆中…" : "克隆并创建") : "创建项目"}
+        </button>
+      </>}>
+      <div style={{ display: "flex", gap: 14 }}>
+        <div className="field" style={{ flex: 1 }}>
+          <div className="lab">项目名称</div>
+          <input ref={ref} type="text" value={name} placeholder="例如：Northwind" onChange={(e) => setName(e.target.value)} />
+        </div>
+        <div className="field" style={{ flex: "0 0 150px" }}>
+          <div className="lab">一句话简介</div>
+          <input type="text" value={sub} placeholder="邮件客户端" onChange={(e) => setSub(e.target.value)} />
+        </div>
+      </div>
+      <div className="field">
+        <div className="lab">主题色</div>
+        <div style={{ display: "flex", gap: 9 }}>
+          {colors.map((c) => (
+            <button key={c} onClick={() => setColor(c)} style={{ width: 34, height: 34, borderRadius: 9, background: c, outline: color === c ? "2px solid var(--ink)" : "none", outlineOffset: 2, border: "none", cursor: "pointer" }} />
+          ))}
+        </div>
+      </div>
+      <div className="field">
+        <div className="lab">{Icon.folder()} 代码</div>
+        <div className="seg">
+          <button className={mode === "fresh" ? "on" : ""} onClick={() => setMode("fresh")}>本地文件夹</button>
+          <button className={mode === "clone" ? "on" : ""} onClick={() => setMode("clone")}>{Icon.github()} 从 GitHub 克隆</button>
+        </div>
+      </div>
+      {mode === "fresh" ? (
+        <div className="field">
+          <div className="lab">工作目录 <span className="opt">— 选择已有仓库或文件夹；留空则先创建项目，之后再补上</span></div>
+          <div style={{ display: "flex", gap: 8 }}>
+            <input type="text" className="ctx-mono" style={{ flex: 1, minWidth: 0 }} value={repo} placeholder="/Users/you/code/project" onChange={(e) => setRepo(e.target.value)} />
+            <BrowseDirButton initial={repo} onPick={setRepo} />
+          </div>
+        </div>
+      ) : (
+        <GitHubClonePicker
+          value={cloneSpec}
+          onChange={(spec, shortName) => {
+            setCloneSpec(spec);
+            // Picking a repo names the project after it (only if still unnamed).
+            if (shortName && !name.trim()) setName(shortName);
+          }}
+        />
+      )}
+      <div className="field">
+        <div className="lab">我们在做什么 <span className="opt">— 可选，稍后也能补充</span></div>
+        <textarea value={context} placeholder="项目简介、技术栈、规范…" onChange={(e) => setContext(e.target.value)} />
+      </div>
+    </Modal>
+  );
+}