@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/composerDraft.ts

@@ -0,0 +1,52 @@
+export type Quote = { id: string; author: string; text: string };
+export type Attachment = {
+  key: string; kind: "image" | "file"; name: string; preview: string; path: string;
+  status: "uploading" | "ready" | "error"; error?: string;
+};
+export type ForkSource = { id: string; title: string };
+export type ComposerDraft = { sources?: ForkSource[]; forkRequest?: { id: string; signature: string; payload?: string }; text: string; attachments: Attachment[]; quote: Quote | null };
+const memory=new Map<string,{stamp:string;draft:ComposerDraft}>();
+const stamp=(id:string)=>{try{return JSON.stringify([localStorage.getItem(key(id)),localStorage.getItem(`orch:draft:${id}`)]);}catch{return "blocked";}};
+const key = (id: string) => `orch:composer:${id}`;
+export const emptyDraft = (): ComposerDraft => ({ text: "", attachments: [], quote: null });
+export function readDraft(id: string): ComposerDraft {
+  const cached=memory.get(id);if(cached?.stamp===stamp(id)) return cached.draft;
+  try {
+    const raw = localStorage.getItem(key(id));
+    if (raw) {
+      const d = JSON.parse(raw) as ComposerDraft;
+      if (typeof d.text === "string" && Array.isArray(d.attachments)) return { ...d, attachments: d.attachments.map((a) => a.status === "uploading" ? { ...a, preview: "", status: "error", error: "上传已中断，请移除后重新添加。" } : a) };
+    }
+    return { ...emptyDraft(), text: localStorage.getItem(`orch:draft:${id}`) ?? "" };
+  } catch { return emptyDraft(); }
+}
+export const DRAFT_EVENT = "orch:composer-change";
+const sendingTasks = new Set<string>();
+export const isTaskSending = (id: string) => sendingTasks.has(id);
+export function setTaskSending(id: string, sending: boolean) {
+  if (sending) sendingTasks.add(id); else sendingTasks.delete(id);
+  window.dispatchEvent(new CustomEvent(DRAFT_EVENT, { detail: { id, sending } }));
+}
+export function writeDraft(id: string, draft: ComposerDraft) {
+  try {
+    if (draft.text || draft.attachments.length || draft.quote || draft.sources?.length) localStorage.setItem(key(id), JSON.stringify(draft));
+    else localStorage.removeItem(key(id));
+    localStorage.removeItem(`orch:draft:${id}`);
+  } catch { /* Storage may be unavailable; the in-memory draft remains usable. */ }
+  memory.set(id,{stamp:stamp(id),draft});
+  window.dispatchEvent(new CustomEvent(DRAFT_EVENT, { detail: { id, draft } }));
+}
+export function quoteText(quote: Quote): string {
+  return `引用 ${quote.author}：\n${quote.text.split("\n").map((line) => `> ${line}`).join("\n")}`;
+}
+
+/** Remove only the content acknowledged by the server; preserve edits/quotes added during the request. */
+export function acknowledgeDraft(current: ComposerDraft, sent: ComposerDraft): ComposerDraft {
+  const attachments=new Set(sent.attachments.map(a=>a.key));
+  const sources=new Set(sent.sources?.map(s=>s.id));
+  return {...current,text:current.text===sent.text?"":current.text,
+    attachments:current.attachments.filter(a=>!attachments.has(a.key)),
+    sources:current.sources?.filter(s=>!sources.has(s.id)),
+    quote:JSON.stringify(current.quote)===JSON.stringify(sent.quote)?null:current.quote,
+    forkRequest:undefined};
+}

package/src/operator/node/fileLinks.ts

@@ -0,0 +1,81 @@
+// 把智能体消息里指向本地文件的链接改写成能打开的地址。
+//
+// 智能体给的是它工作目录下的路径：[报告](report.md)、[报告](/Users/…/worktree/report.md)、
+// file:///…、带行号的 src/a.ts:12。原样渲染时浏览器把它当成网站根目录下的地址，
+// 打不开。这里改写到 /api/tasks/<id>/files/…（服务端见 lib/taskFiles.ts），
+// Markdown 则改到 /view 预览页渲染。
+import { createContext } from "react";
+
+/** 当前渲染的 Markdown 属于哪个任务、相对哪个目录（预览页里是 md 文件所在目录）。 */
+export type FileLinkScope = { taskId: string; baseDir?: string } | null;
+export const FileLinkContext = createContext<FileLinkScope>(null);
+
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+const WIN_ABS = /^[a-z]:[\\/]/i;
+
+function normalize(p: string): string {
+  const abs = p.startsWith("/");
+  const out: string[] = [];
+  for (const seg of p.split("/")) {
+    if (!seg || seg === ".") continue;
+    if (seg === ".." && out.length && out[out.length - 1] !== "..") out.pop();
+    else if (seg === ".." && abs) continue;
+    else out.push(seg);
+  }
+  return (abs ? "/" : "") + out.join("/");
+}
+
+export function isMarkdownPath(p: string): boolean {
+  return /\.(md|markdown)$/i.test(p);
+}
+
+/** 文件在服务端的地址：相对路径用路径式（HTML 的相对资源能解析），绝对路径走 ?path=。 */
+export function taskFileApiUrl(taskId: string, p: string): string {
+  const id = encodeURIComponent(taskId);
+  if (p.startsWith("/") || p.startsWith("~") || WIN_ABS.test(p)) return `/api/tasks/${id}/files?path=${encodeURIComponent(p)}`;
+  return `/api/tasks/${id}/files/${p.split("/").filter(Boolean).map(encodeURIComponent).join("/")}`;
+}
+
+export function markdownViewUrl(taskId: string, p: string): string {
+  return `/view?task=${encodeURIComponent(taskId)}&path=${encodeURIComponent(p)}`;
+}
+
+/**
+ * 链接指向本地文件时，返回它的路径（相对任务工作目录，或绝对路径）；
+ * 网址、锚点、应用自己的地址等返回 null（保持原样）。
+ */
+export function localFilePath(href: string | undefined | null, baseDir = ""): string | null {
+  let h = String(href ?? "").trim();
+  if (!h || h.startsWith("#") || h.startsWith("//") || h.startsWith("/api/") || h.startsWith("/view?")) return null;
+  if (/^file:/i.test(h)) h = h.replace(/^file:(\/\/localhost)?(\/\/)?/i, "");
+  else if (SCHEME.test(h) && !WIN_ABS.test(h)) return null;
+  // 去掉查询和锚点（#L12 之类），再解码（Markdown 解析器会把中文转成 %XX）。
+  h = h.replace(/[?#].*$/, "");
+  try {
+    h = decodeURI(h);
+  } catch {
+    // 保持原样
+  }
+  h = h.replace(/\\/g, "/");
+  // 编辑器风格的行号：src/a.ts:12 或 :12:5
+  h = h.replace(/:(\d+)(:\d+)?$/, "");
+  if (!h) return null;
+  if (h === "~" || h.startsWith("~/")) return h;
+  if (h.startsWith("/") || WIN_ABS.test(h)) return WIN_ABS.test(h) ? h : normalize(h);
+  return normalize(baseDir ? `${baseDir.replace(/\/+$/, "")}/${h}` : h);
+}
+
+/** 链接改写的最终结果：Markdown → 预览页；其他文件 → 文件接口；不是本地文件 → null。 */
+export function rewriteFileHref(scope: FileLinkScope, href: string | undefined | null): string | null {
+  if (!scope) return null;
+  const p = localFilePath(href, scope.baseDir);
+  if (!p) return null;
+  return isMarkdownPath(p) ? markdownViewUrl(scope.taskId, p) : taskFileApiUrl(scope.taskId, p);
+}
+
+/** 图片等内嵌资源：总是直接取文件。 */
+export function rewriteFileSrc(scope: FileLinkScope, src: string | undefined | null): string | null {
+  if (!scope) return null;
+  const p = localFilePath(src, scope.baseDir);
+  return p ? taskFileApiUrl(scope.taskId, p) : null;
+}

package/src/operator/node/format.ts

@@ -0,0 +1,290 @@
+// Pure formatting + derivation helpers shared across the orchestrator modules.
+import type { AskQuestion, AskAnswers } from "./protocol/types";
+import type { Msg, TaskRow, AgentCapabilities, AgentInfo } from "./types";
+import type { InternalUsageEstimate } from "./types";
+
+// Compact token count: 1234 → "1.2k", 1_200_000 → "1.2M".
+export function fmtTokens(n: number): string {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(n >= 1e7 ? 0 : 1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(n >= 1e4 ? 0 : 1)}k`;
+  return String(n);
+}
+// Human byte size: 1536 → "1.5 KB", 5_242_880 → "5.0 MB". Base-1024.
+export function fmtBytes(n: number): string {
+  if (n <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)));
+  const v = n / 1024 ** i;
+  return `${i === 0 ? v : v.toFixed(v >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+// Dollar cost: sub-cent shows "<$0.01"; otherwise 2–3 sig digits after the point.
+export function fmtCost(n: number): string {
+  if (n <= 0) return "$0.00";
+  if (n < 0.01) return "<$0.01";
+  return `$${n < 1 ? n.toFixed(3) : n.toFixed(2)}`;
+}
+
+export function fmtJobCost(e: InternalUsageEstimate): string {
+  const cost = e.cost_usd <= 0 ? "$0.00" : e.cost_usd < 0.01 ? "<$0.01" : `$${e.cost_usd.toFixed(2)}`;
+  return `约 ${fmtTokens(e.tokens)} tokens（约 ${cost}）`;
+}
+
+// ---------- the usage chip (tokens + cost, honestly) ----------
+
+// A task's cumulative tokens split by what they actually represent. The raw
+// `total_tokens` sums all four buckets, and in real sessions ~90%+ of it is
+// prompt-cache READS — the same context re-sent on every turn and billed at ~10%
+// of the input rate. Leading with that reads as "this task burned 3.8M tokens"
+// when the model only ever processed ~250k of new material, which is what scares
+// people off. So the chip leads with `fresh` (tokens seen for the first time:
+// in/out plus cache WRITES, which are billed above input rate) and carries cache
+// reads as secondary detail. Defensive ?? 0s: a task row can predate the fields.
+export interface UsageSplit {
+  total: number;      // every bucket summed — what task.total_tokens holds
+  fresh: number;      // in/out + cache writes: material the model processed anew
+  inOut: number;      // prompt + completion tokens, uncached
+  cacheWrite: number; // context written into the cache (billed ~1.25× input)
+  cacheRead: number;  // context re-read from the cache (billed ~0.1× input)
+}
+export function usageSplit(t: Pick<TaskRow, "total_tokens" | "cache_read_tokens" | "cache_creation_tokens">): UsageSplit {
+  const total = t.total_tokens ?? 0;
+  const cacheRead = t.cache_read_tokens ?? 0;
+  const cacheWrite = t.cache_creation_tokens ?? 0;
+  return { total, cacheRead, cacheWrite, inOut: Math.max(0, total - cacheRead - cacheWrite), fresh: Math.max(0, total - cacheRead) };
+}
+
+/**
+ * How to present an agent's dollar figure. Two independent questions:
+ *
+ * - Is the number a MEASUREMENT or an estimate? `costIsEstimated` answers that
+ *   (Codex reports tokens only, so its figure is tokens × published prices).
+ * - Is the number MONEY THE USER SPENDS? Only under api-key auth. On a Max/Pro
+ *   (or ChatGPT) subscription the marginal cost of a turn is $0 — the SDK's
+ *   `total_cost_usd` is what the same tokens would have cost through the API,
+ *   and what's actually consumed is plan quota. Showing a bare "$4.20" there
+ *   reads as a bill for something that was included.
+ *
+ * Either one makes the figure approximate-in-meaning, so both get an `~` plus a
+ * tooltip clause saying which it is. An unknown account (bundle still loading,
+ * agent not connected) keeps the plain billed presentation — we won't claim a
+ * turn was covered by a plan we can't see.
+ */
+export interface CostDisplay {
+  show: boolean;   // render a dollar figure at all
+  approx: boolean; // prefix it with ~
+  note: string;    // tooltip clause explaining what the figure means ("" = a plain billed charge)
+}
+export function costDisplay(agent: AgentInfo | undefined): CostDisplay {
+  const caps = agent?.capabilities;
+  const estimated = caps?.costIsEstimated === true;
+  const show = caps?.reportsCostUsd !== false || estimated;
+  const subscription = agent?.account?.method === "subscription";
+  const bedrock = agent?.account?.method === "bedrock";
+  const plan = agent?.account?.plan;
+  // "Max"/"Pro"/"ChatGPT Plus" → "your Max plan"; unknown/"API" → "your plan".
+  const planName = plan && !/^api$/i.test(plan) ? `你的 ${plan} 订阅` : "你的订阅";
+  const source = estimated ? "按 token 数 × 官方 API 价格估算" : "等同 API 价格的折算值";
+  const note = bedrock
+    ? "由 Claude Code 根据 token 用量与公开价格估算；请以你的 AWS 账单为准"
+    : subscription
+    ? `${source}：本次使用 ${planName} 登录运行，消耗的是套餐额度，并非实际账单`
+    : estimated
+      ? source
+      : "";
+  return { show, approx: subscription || bedrock || estimated, note };
+}
+
+// The usage chip's tooltip: the full breakdown the compact chip can't fit, one
+// fact per line. Exact counts here (the chip rounds) — this is the view someone
+// opens precisely because the rounded number surprised them.
+export function usageTooltip(split: UsageSplit, costUsd: number, cost: CostDisplay): string {
+  const n = (v: number) => v.toLocaleString();
+  const lines = [
+    `本任务新增 ${n(split.fresh)} tokens：输入/输出 ${n(split.inOut)} · 写入缓存 ${n(split.cacheWrite)}`,
+  ];
+  if (split.cacheRead > 0) {
+    lines.push(`缓存读取 ${n(split.cacheRead)}（每轮重复读取的上下文，按输入价格的约 10% 计费）`);
+    lines.push(`合计 ${n(split.total)} tokens`);
+  }
+  if (cost.show && costUsd > 0) {
+    lines.push(`${cost.approx ? "约 " : ""}${fmtCost(costUsd)}${cost.note ? `（${cost.note}）` : "（实际计费）"}`);
+  }
+  return lines.join("\n");
+}
+
+// Context window: the input-side tokens of the latest turn ≈ how full that
+// window currently is. The size comes from the agent's capability descriptor
+// (capabilities.models[].contextWindow) — Codex windows differ from Claude's, so
+// it can't be a static Claude-only table. `caps.models` is looked up by the
+// task's configured model value; unknown/Default falls back to the widest model
+// the agent offers, then a conservative constant.
+export const DEFAULT_CONTEXT_WINDOW = 200_000;
+export function contextWindowOf(model: string | null | undefined, caps?: AgentCapabilities): number {
+  const models = caps?.models ?? [];
+  if (model) {
+    const hit = models.find((m) => m.value === model);
+    if (hit) return hit.contextWindow;
+    const id = model.toLowerCase();
+    if (id.includes("[1m]") || id.includes("claude-sonnet-5") || id.includes("claude-fable-5")) return 1_000_000;
+    return DEFAULT_CONTEXT_WINDOW;
+  }
+  // Default (null) model → the driver picks its own; approximate with the widest
+  // window it offers so the gauge doesn't over-report fullness.
+  const widest = models.reduce((mx, m) => Math.max(mx, m.contextWindow), 0);
+  return widest || DEFAULT_CONTEXT_WINDOW;
+}
+export function contextPct(tokens: number, model: string | null | undefined, caps?: AgentCapabilities): number {
+  return Math.round((tokens / contextWindowOf(model, caps)) * 1000) / 10;
+}
+
+// Friendly name for a resolved model id — the badge that answers "which model
+// did this turn actually run on?". The VERSION is the point: family aliases move
+// (today "opus" resolves to claude-opus-5, last month claude-opus-4-8), so a bare
+// "Opus" badge tells you nothing. Parse family + version out of the id first
+// ("claude-opus-5" -> "Opus 5", "claude-opus-4-8-20251101" -> "Opus 4.8") and
+// keep the `[1m]` marker, since the 1M variant is a distinct run mode.
+// Non-Claude ids (Codex's "gpt-5.1-codex-max") carry no such version shape —
+// those fall through to the agent's capability labels, matched longest-first so
+// a shorter value can't shadow a more specific one. Raw id is the last resort.
+export function modelLabel(id: string | null, caps?: AgentCapabilities): string {
+  if (!id) return "";
+  const s = id.toLowerCase();
+  const long = s.includes("[1m]") ? " (1M)" : "";
+  const fam = ["fable", "opus", "sonnet", "haiku"].find((f) => s.includes(f));
+  if (fam) {
+    const cap = fam[0].toUpperCase() + fam.slice(1);
+    const v = s.match(new RegExp(`${fam}-(\\d+)(?:-(\\d+))?`));
+    // Deliberately NOT the capability label here: an id we can't read a version
+    // out of shouldn't be badged with a version we're only guessing at.
+    return v ? `${cap} ${v[1]}${v[2] ? `.${v[2]}` : ""}${long}` : `${cap}${long}`;
+  }
+  const hit = (caps?.models ?? [])
+    .filter((o) => s.includes(o.value.toLowerCase()))
+    .sort((a, b) => b.value.length - a.value.length)[0];
+  return hit ? hit.label : id;
+}
+
+// Phrase AskUserQuestion answers as a reply, for the reload fallback where the
+// turn is no longer parked and we resume the session with a normal message.
+export function formatAnswersText(questions: AskQuestion[], answers: AskAnswers): string {
+  const lines = questions.map((q, i) => {
+    const picked = (answers[i] ?? []).filter((s) => s && s.trim());
+    return `- ${q.header || q.question}：${picked.length ? picked.join("、") : "（未选择）"}`;
+  });
+  return `回答你的问题：\n${lines.join("\n")}`;
+}
+// Absolute wall-clock stamp for a transcript message ("3:42 PM", locale-aware).
+// Messages from an earlier day prefix the date, so a task resumed days later
+// still reads right. Absolute on purpose: MessageView is memoized, so a
+// relative "2m ago" would freeze at whatever it said when the row rendered.
+export function clockTime(ts: number): string {
+  const d = new Date(ts);
+  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  if (d.toDateString() === new Date().toDateString()) return time;
+  return `${d.toLocaleDateString([], { month: "short", day: "numeric" })}, ${time}`;
+}
+export function relTime(ts: number): string {
+  const d = Date.now() - ts;
+  const m = Math.floor(d / 60000);
+  if (m < 1) return "刚刚";
+  if (m < 60) return `${m} 分钟前`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} 小时前`;
+  return `${Math.floor(h / 24)} 天前`;
+}
+// How long a task has been waiting on the user, spelled out for the "need you"
+// dropdown ("waiting for 3 hours"). Coarser and more verbose than relTime — this
+// is the only subline a row gets, so it reads as prose rather than a chip.
+export function waitedFor(since: number): string {
+  const s = Math.max(0, Math.round((Date.now() - since) / 1000));
+  if (s < 45) return "几秒";
+  const m = Math.round(s / 60);
+  if (m < 1) return "1 分钟";
+  if (m < 60) return `${m} 分钟`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h} 小时`;
+  const d = Math.round(h / 24);
+  return `${d} 天`;
+}
+export function duration(start: number, end: number | null): string {
+  if (!end) return "进行中";
+  const s = Math.max(0, Math.round((end - start) / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+// A task is "waiting on you" when its awaiting_input flag is set — Claude either
+// ended its turn mid-task or is parked on an AskUserQuestion. The flag is the
+// single source of truth (cleared the instant the next turn starts / a question
+// is answered), so this holds even while the turn is technically still live and
+// parked on the question — that's exactly the case the task list must surface.
+export const isAwaiting = (t: TaskRow) =>
+  t.status === "in_progress" && !!t.awaiting_input;
+
+// The titles of a task's unfinished blockers (dependencies not yet 'done'). A
+// task with any of these is "blocked" and can't be started until they complete.
+// A cancelled dependency doesn't block — it's terminal and will never finish,
+// so waiting on it would deadlock the dependent task forever.
+export const blockerTitles = (t: TaskRow, byId: Map<string, TaskRow>): string[] =>
+  (t.depends_on ?? [])
+    .map((id) => byId.get(id))
+    .filter((b): b is TaskRow => !!b && b.status !== "done" && b.status !== "cancelled")
+    .map((b) => b.title);
+
+// add/del/ctx class for a diff line's sign — shared by the peek and full views.
+export const diffCls = (sign: "+" | "-" | " ") => (sign === "+" ? "add" : sign === "-" ? "del" : "ctx");
+
+// group flat messages into per-generation sessions, pulling out the /clear summaries
+export function buildSessions(messages: Msg[]) {
+  const summaryByGen: Record<number, string> = {};
+  for (const m of messages) if (m.role === "session_break") summaryByGen[m.generation] = m.content;
+  // Queued follow-ups are excluded here — they haven't run yet, so SessionView
+  // renders them in a pinned block below the live "thinking" indicator instead
+  // of interleaved with the committed transcript.
+  const committed = messages.filter((m) => m.role !== "queued");
+  const gens = Array.from(new Set(committed.filter((m) => m.role !== "session_break").map((m) => m.generation))).sort((a, b) => a - b);
+  return gens.map((n) => ({
+    n,
+    summaryBefore: summaryByGen[n - 1] ?? null,
+    messages: committed.filter((m) => m.generation === n && m.role !== "session_break"),
+  }));
+}
+
+// ---------- chat attachments (images + large text pastes) ----------
+// An upload travels inside the message text as one marker line per file:
+// "[Attached image: /abs/path.png]" for images, "[Attached file: /abs/path.txt]"
+// for a big text paste diverted to a file (see PASTE_ATTACH_THRESHOLD). The
+// same string serves both sides — Claude Code opens the absolute path with its
+// Read tool (rendering images natively, reading text files as text), and the
+// transcript strips the marker back out to render an inline thumbnail (image)
+// or a file chip (text). The serving URL is derived from the path's
+// uploads/<task>/<file> tail, so no extra columns or event fields are needed.
+export const attachmentMarker = (absPath: string) => `[Attached image: ${absPath}]`;
+export const fileAttachmentMarker = (absPath: string) => `[Attached file: ${absPath}]`;
+const ATTACHMENT_RE = /^\[Attached (image|file): (.+)\]$/;
+
+export interface MsgAttachment { path: string; url: string; kind: "image" | "file"; name: string }
+
+// Split a user message into displayable text + attachment chips. Marker lines
+// whose path doesn't end in uploads/<task>/<file> (hand-typed lookalikes) stay
+// in the text untouched.
+export function splitAttachments(content: string): { text: string; attachments: MsgAttachment[] } {
+  if (!content.includes("[Attached image: ") && !content.includes("[Attached file: ")) {
+    return { text: content, attachments: [] };
+  }
+  const attachments: MsgAttachment[] = [];
+  const kept: string[] = [];
+  for (const line of content.split("\n")) {
+    const m = ATTACHMENT_RE.exec(line.trim());
+    const parts = m ? m[2].split(/[\\/]/).filter(Boolean) : [];
+    if (m && parts.length >= 3 && parts[parts.length - 3] === "uploads") {
+      const [taskId, file] = parts.slice(-2);
+      attachments.push({ path: m[2], url: `/api/tasks/${taskId}/uploads/${file}`, kind: m[1] === "image" ? "image" : "file", name: file });
+    } else {
+      kept.push(line);
+    }
+  }
+  return { text: kept.join("\n").trim(), attachments };
+}

package/src/operator/node/github.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { LoadNote, Skel, ErrNote } from "./shared";
+import type { GhStatusT, GhLoginT, GhRepoT } from "./types";
+
+// The "Clone from GitHub" pane of the new-project modal: shows the guided
+// connect step when the workspace isn't logged in, the user's repo list when
+// it is, and always accepts a pasted URL as the escape hatch.
+export function GitHubClonePicker({ value, onChange }: { value: string; onChange: (spec: string, shortName?: string) => void }) {
+  const [status, setStatus] = useState<GhStatusT | null>(null);
+  const refresh = useCallback(() => {
+    jget<GhStatusT>("/api/github/status")
+      .then(setStatus)
+      .catch(() => setStatus({ installed: false, authenticated: false, login: null }));
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+
+  if (!status) return <LoadNote style={{ padding: 0, marginBottom: 14 }}>正在检查 GitHub 连接…</LoadNote>;
+  return (
+    <>
+      {status.authenticated ? (
+        <GhRepoList selected={value} onPick={(r) => onChange(r, r.split("/").pop())} />
+      ) : status.installed ? (
+        <GitHubConnect onConnected={refresh} />
+      ) : (
+        <div className="hlp" style={{ marginBottom: 14 }}>
+          此工作区没有可用的 GitHub CLI（<code>gh</code>），因此只能克隆公开仓库 —— 请在下方粘贴地址。
+        </div>
+      )}
+      <div className="field">
+        <div className="lab">仓库 {status.authenticated && <span className="opt">— 也可直接粘贴地址</span>}</div>
+        <input type="text" className="ctx-mono" value={value} placeholder="owner/repo 或 https://github.com/owner/repo"
+          onChange={(e) => onChange(e.target.value)} />
+      </div>
+    </>
+  );
+}
+
+// Guided `gh auth login` device flow: one click starts it, the one-time code +
+// verification URL appear right here (no terminal scrollback), and we poll
+// until GitHub confirms. The session lives server-side, so closing the modal
+// mid-login and reopening resumes the same code.
+export function GitHubConnect({ onConnected }: { onConnected: () => void }) {
+  const [login, setLogin] = useState<GhLoginT | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const done = useRef(false);
+
+  // Rejoin a login that's already underway (e.g. the modal was closed mid-flow).
+  useEffect(() => {
+    jget<GhLoginT>("/api/github/login").then((l) => { if (l.status !== "idle") setLogin(l); }).catch(() => {});
+  }, []);
+
+  const start = async () => {
+    setBusy(true);
+    try {
+      setLogin(await jsend<GhLoginT>("/api/github/login", "POST"));
+    } catch (e) {
+      setLogin({ status: "error", code: null, url: null, user: null, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+  const cancel = async () => {
+    await jsend("/api/github/login", "DELETE").catch(() => {});
+    setLogin(null);
+  };
+
+  // Poll while gh waits for the user to authorize on github.com.
+  useEffect(() => {
+    if (!login || (login.status !== "starting" && login.status !== "awaiting")) return;
+    const t = setInterval(() => {
+      jget<GhLoginT>("/api/github/login").then((l) => {
+        setLogin(l);
+        if (l.status === "success" && !done.current) { done.current = true; onConnected(); }
+      }).catch(() => {});
+    }, 2000);
+    return () => clearInterval(t);
+  }, [login, onConnected]);
+
+  const copyCode = () => {
+    if (!login?.code) return;
+    navigator.clipboard?.writeText(login.code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {});
+  };
+
+  if (!login || login.status === "idle") {
+    return (
+      <div className="field">
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 8 }}>
+          连接一次 GitHub，就能从你的仓库列表中挑选 —— 包括私有仓库。登录状态保存在此工作区中，重启后依然有效。
+        </div>
+        <button className="btn btn-line" disabled={busy} onClick={start} style={{ alignSelf: "flex-start" }}>
+          {Icon.github()} {busy ? "启动中…" : "连接 GitHub"}
+        </button>
+      </div>
+    );
+  }
+  if (login.status === "starting") return <LoadNote style={{ padding: 0, marginBottom: 14 }}>正在启动 GitHub 登录…</LoadNote>;
+  if (login.status === "awaiting") {
+    return (
+      <div className="field" style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", padding: "14px 16px" }}>
+        <div className="hlp" style={{ marginTop: 0 }}>在 GitHub 上输入这个一次性验证码以完成连接：</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "10px 0" }}>
+          <button onClick={copyCode} title="点击复制"
+            style={{ fontFamily: "var(--mono)", fontSize: 24, fontWeight: 700, letterSpacing: ".12em", color: "var(--ink)", background: "none", border: "1px dashed var(--line-strong)", borderRadius: 8, padding: "6px 14px", cursor: "pointer" }}>
+            {login.code}
+          </button>
+          <span className="hlp" style={{ margin: 0 }}>{copied ? "已复制！" : "点击复制"}</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <a className="btn btn-accent" href={login.url ?? "https://github.com/login/device"} target="_blank" rel="noreferrer">
+            {Icon.github()} 打开 github.com/login/device
+          </a>
+          <button className="btn btn-ghost" onClick={cancel}>取消</button>
+        </div>
+        <div className="hlp" style={{ marginBottom: 0 }}>等待你在 github.com 上完成授权…</div>
+      </div>
+    );
+  }
+  if (login.status === "error") {
+    return (
+      <div className="field">
+        <div className="hlp" style={{ marginTop: 0, color: "var(--red)" }}>⚠ GitHub 登录失败：{login.error ?? "未知错误"}</div>
+        <button className="btn btn-line" onClick={start} style={{ alignSelf: "flex-start" }}>{Icon.restore()} 重试</button>
+      </div>
+    );
+  }
+  // success
+  return <div className="hlp" style={{ marginBottom: 14 }}>{Icon.check()} 已连接，账号 <strong>{login.user}</strong> —— 正在加载你的仓库…</div>;
+}
+
+// Searchable list of the user's repos (most recently pushed first).
+export function GhRepoList({ selected, onPick }: { selected: string; onPick: (nameWithOwner: string) => void }) {
+  const [repos, setRepos] = useState<GhRepoT[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [q, setQ] = useState("");
+  const load = useCallback(() => {
+    setError(null);
+    setRepos(null);
+    jget<GhRepoT[]>("/api/github/repos").then(setRepos).catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  if (error) return <ErrNote style={{ marginBottom: 14 }} onRetry={load}>无法加载你的仓库：{error}</ErrNote>;
+  if (!repos) {
+    return (
+      <div className="field">
+        <div className="lab">{Icon.github()} 你的仓库</div>
+        <div style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)" }} aria-hidden>
+          {[46, 60, 38, 52].map((w, i) => (
+            <div key={i} className="skel-lrow">
+              <Skel w={14} h={14} r={4} />
+              <Skel w={`${w}%`} h={11} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  const filtered = repos.filter((r) => r.nameWithOwner.toLowerCase().includes(q.trim().toLowerCase()));
+  return (
+    <div className="field">
+      <div className="lab">{Icon.github()} 你的仓库</div>
+      <input type="text" value={q} placeholder="搜索仓库…" onChange={(e) => setQ(e.target.value)} style={{ marginBottom: 8 }} />
+      <div style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", maxHeight: 220, overflowY: "auto" }}>
+        {filtered.length === 0 && <div className="hlp" style={{ padding: "12px 14px", margin: 0 }}>没有匹配的仓库。</div>}
+        {filtered.map((r) => (
+          <button key={r.nameWithOwner} onClick={() => onPick(r.nameWithOwner)} title={r.nameWithOwner}
+            style={{ display: "flex", alignItems: "center", gap: 9, width: "100%", textAlign: "left", padding: "8px 13px", borderBottom: "1px solid var(--line)", color: "var(--ink)", fontSize: 13, background: selected === r.nameWithOwner ? "var(--accent-soft, rgba(194,96,60,.12))" : "none" }}>
+            <span style={{ color: selected === r.nameWithOwner ? "var(--accent)" : "var(--ink-4)", display: "inline-flex" }}>
+              {selected === r.nameWithOwner ? Icon.check() : Icon.git()}
+            </span>
+            <span style={{ fontFamily: "var(--mono)", fontSize: 12.5, whiteSpace: "nowrap" }}>{r.nameWithOwner}</span>
+            {r.isPrivate && <span style={{ color: "var(--ink-4)", display: "inline-flex" }} title="私有">{Icon.lock()}</span>}
+            <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--ink-3)", fontSize: 12 }}>{r.description}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Settings → GitHub: connection status, the same guided connect flow, and
+// disconnect. Useful for checking the login survived a workspace restart.
+export function GitHubSettings() {
+  const [status, setStatus] = useState<GhStatusT | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const refresh = useCallback(() => {
+    jget<GhStatusT>("/api/github/status")
+      .then(setStatus)
+      .catch(() => setStatus({ installed: false, authenticated: false, login: null }));
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const disconnect = async () => {
+    setErr(null);
+    try {
+      await jsend("/api/github/logout", "POST");
+      refresh();
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  if (!status) return <LoadNote style={{ padding: 0 }}>正在检查 GitHub 连接…</LoadNote>;
+  if (!status.installed) {
+    return <div className="hlp">此工作区没有可用的 GitHub CLI（<code>gh</code>），因此这里无需连接。创建项目时仍可通过地址克隆公开仓库。</div>;
+  }
+  return (
+    <div className="field">
+      <div className="lab">{Icon.github()} GitHub 账号</div>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 12 }}>
+        用于在创建项目时列出并克隆你的仓库（包括私有仓库），以及在任务和终端中执行 <code>git push/pull</code>。登录状态保存在此工作区中，重启后依然有效。
+      </div>
+      {status.authenticated ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--ink)" }}>
+            {Icon.check()} 已连接，账号 <strong>{status.login ?? "未知"}</strong>
+          </span>
+          <button className="btn btn-line btn-sm" onClick={disconnect}>{Icon.x()} 断开连接</button>
+        </div>
+      ) : (
+        <GitHubConnect onConnected={refresh} />
+      )}
+      {err && <ErrNote style={{ marginTop: 10 }}>{err}</ErrNote>}
+    </div>
+  );
+}