@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/OnboardingWizard.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { AgentConnect } from "./AgentConnect";
+import type { AgentInfoT, AgentsResponseT, ClaudeVerifyT, OnboardingT, OnbStep } from "./types";
+
+// The first-run wizard, trimmed to the two irreducible auth steps: connect a
+// coding agent, then verify it responds. "An agent" — not Claude specifically:
+// every registered driver (Claude Code, Codex, …) is offered via the same
+// generic AgentConnect card the Settings surface uses, and connecting ANY of
+// them satisfies the step, so a Codex-only first run completes cleanly (the
+// server adopts the connected agent as the default on finish — lib/onboarding).
+// Claude stays the recommended tab. Everything else — creating a real project —
+// is deferred until after the built-in "Welcome" tutorial. State persists
+// server-side (lib/onboarding) so abandoning mid-way resumes at the right step;
+// it's re-runnable from Settings and skippable for power users.
+
+const STEPS: { id: OnbStep; label: string; icon: () => React.ReactNode }[] = [
+  { id: "connect", label: "连接智能体", icon: Icon.bolt },
+  { id: "verify", label: "验证", icon: Icon.check },
+];
+
+export function OnboardingWizard({
+  initial,
+  onFinish,
+}: {
+  initial: OnboardingT;
+  onFinish: () => void;
+}) {
+  // Older/persisted states may resume on a step that no longer exists ("project"
+  // / "notifications"); collapse anything that isn't "verify" back to "connect".
+  const [step, setStep] = useState<OnbStep>(initial.step === "verify" ? "verify" : "connect");
+  const [bundle, setBundle] = useState<AgentsResponseT | null>(null);
+  // The agent connected during THIS wizard run — the one the Verify step tests.
+  // On resume (nothing connected this run) fall back to any connected agent.
+  const [justConnected, setJustConnected] = useState<string | null>(null);
+  const idx = STEPS.findIndex((s) => s.id === step);
+
+  const load = useCallback(() => {
+    jget<AgentsResponseT>("/api/agents").then(setBundle).catch(() => {});
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const connected = (bundle?.agents ?? []).filter((a) => a.connected);
+
+  // While nothing is connected yet, keep re-checking: a login can settle
+  // server-side after a missed onConnected (e.g. the connect card was remounted
+  // mid-login), and without this the Continue button stays locked until a reload.
+  useEffect(() => {
+    if (step !== "connect" || connected.length > 0) return;
+    const t = setInterval(load, 3_000);
+    return () => clearInterval(t);
+  }, [step, connected.length, load]);
+  const verifyAgent =
+    (justConnected && connected.find((a) => a.id === justConnected)) || connected[0] || null;
+
+  // Persist the resume point whenever the step changes (fire-and-forget).
+  const goto = useCallback((s: OnbStep) => {
+    setStep(s);
+    jsend("/api/onboarding", "PATCH", { step: s }).catch(() => {});
+  }, []);
+
+  const finish = useCallback(() => {
+    jsend("/api/onboarding", "POST").catch(() => {});
+    onFinish();
+  }, [onFinish]);
+
+  return (
+    <div className="wiz-scrim">
+      <div className="wiz">
+        <div className="wiz-rail">
+          <div className="wiz-brand"><span className="glyph">{Icon.bolt()}</span> Operator</div>
+          <div className="wiz-rail-sub">来完成初始设置吧</div>
+          <div className="wiz-steps">
+            {STEPS.map((s, i) => (
+              <div key={s.id} className={`wiz-stepitem${i === idx ? " active" : ""}${i < idx ? " done" : ""}`}>
+                <span className="wiz-stepnum">{i < idx ? Icon.check() : s.icon()}</span>
+                <span className="wiz-steplabel">{s.label}</span>
+              </div>
+            ))}
+          </div>
+          <span style={{ flex: 1 }} />
+          <button className="btn btn-ghost btn-sm wiz-skip" onClick={finish} title="跳过设置 —— 之后可在「设置」中重新运行">
+            跳过设置
+          </button>
+        </div>
+
+        <div className="wiz-main">
+          {step === "connect" && (
+            <ConnectStep
+              bundle={bundle}
+              done={connected.length > 0}
+              onConnected={(id) => { setJustConnected(id); load(); }}
+              onContinue={() => goto("verify")}
+            />
+          )}
+          {step === "verify" && (
+            <VerifyStep agent={verifyAgent} onBack={() => goto("connect")} onFinish={finish} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------- step shell ----------
+
+function StepHead({ n, title, sub }: { n: number; title: string; sub: React.ReactNode }) {
+  return (
+    <div className="wiz-head">
+      <div className="wiz-step-tag">第 {n} 步，共 {STEPS.length} 步</div>
+      <div className="wiz-title">{title}</div>
+      <div className="wiz-sub">{sub}</div>
+    </div>
+  );
+}
+
+// ---------- Step 1: Connect an agent ----------
+
+// One tab per registered driver, each rendering the same generic AgentConnect
+// card (subscription sign-in + API-key path) the Settings surface uses — so
+// agent #3 shows up here with zero wizard edits. Connecting any ONE agent
+// unlocks Continue; the rest can be added later from Settings → Agents.
+function ConnectStep({
+  bundle,
+  done,
+  onConnected,
+  onContinue,
+}: {
+  bundle: AgentsResponseT | null;
+  done: boolean;
+  onConnected: (agentId: string) => void;
+  onContinue: () => void;
+}) {
+  const agents = bundle?.agents ?? [];
+  const recommended = bundle?.default ?? "claude";
+  const [selected, setSelected] = useState<string | null>(null);
+  const current: AgentInfoT | undefined =
+    agents.find((a) => a.id === (selected ?? recommended)) ?? agents[0];
+
+  return (
+    <>
+      <StepHead
+        n={1}
+        title="连接一个编程智能体"
+        sub="Operator 以你的身份运行编程智能体。用你已有的账号登录即可 —— 现在连接一个，其余的随时可以在「设置」里添加。"
+      />
+      <div className="wiz-body">
+        <div className="hlp" style={{ margin: "0 0 18px", maxWidth: 620 }}>
+          Operator 会用已连接的智能体执行一些小型辅助任务，包括自动生成项目回顾，以及你请求的会话摘要。这些都可以随时在「设置 → 后台任务」中控制。
+        </div>
+        {!bundle && <div className="wiz-verify"><span className="wiz-spin" /> <span>正在加载智能体…</span></div>}
+        {agents.length > 1 && (
+          <div className="seg" style={{ maxWidth: 460, marginBottom: 20 }}>
+            {agents.map((a) => (
+              <button key={a.id} className={current?.id === a.id ? "on" : ""} onClick={() => setSelected(a.id)}>
+                {a.connected ? Icon.check() : Icon.bolt()} {a.label}
+                {a.id === recommended ? " · 推荐" : ""}
+              </button>
+            ))}
+          </div>
+        )}
+        {current && (
+          <AgentConnect key={current.id} agent={current} onConnected={() => onConnected(current.id)} />
+        )}
+      </div>
+      <div className="wiz-foot">
+        <span className="spacer" />
+        <button className="btn btn-accent" disabled={!done} onClick={onContinue}>
+          继续 {Icon.chevRight()}
+        </button>
+      </div>
+    </>
+  );
+}
+
+// ---------- Step 2: Verify ----------
+
+function VerifyStep({
+  agent,
+  onBack,
+  onFinish,
+}: {
+  agent: AgentInfoT | null;
+  onBack: () => void;
+  onFinish: () => void;
+}) {
+  const [state, setState] = useState<"running" | "ok" | "fail">("running");
+  const [result, setResult] = useState<ClaudeVerifyT | null>(null);
+  const label = agent?.label ?? "你的智能体";
+
+  const run = useCallback(() => {
+    if (!agent) return;
+    setState("running");
+    setResult(null);
+    jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST")
+      .then((r) => { setResult(r); setState(r.connected ? "ok" : "fail"); })
+      .catch((e) => { setResult({ connected: false, email: null, plan: null, method: null, error: e instanceof Error ? e.message : String(e) }); setState("fail"); });
+  }, [agent]);
+
+  useEffect(() => { run(); }, [run]);
+
+  return (
+    <>
+      <StepHead
+        n={2}
+        title="验证连接"
+        sub={`正在运行一次测试轮次，确认 ${label} 能正常响应。接下来会进入一个 2 分钟的教程，带你走完整个流程。`}
+      />
+      <div className="wiz-body">
+        {(!agent || state === "running") && (
+          <div className="wiz-verify"><span className="wiz-spin" /> <span>正在测试你的 {label} 连接…</span></div>
+        )}
+        {agent && state === "ok" && (
+          <div className="wiz-connected">
+            <span className="wiz-ok">{Icon.check()}</span>
+            <div>
+              <div className="wiz-ok-t">
+                已连接{result?.email ? <>，账号 <strong>{result.email}</strong></> : ""}{result?.plan ? `（${result.plan}）` : ""}
+              </div>
+              <div className="hlp" style={{ margin: "3px 0 0" }}>测试轮次已完成 —— 你的会话可以开始运行了。</div>
+            </div>
+          </div>
+        )}
+        {agent && state === "fail" && (
+          <div className="field" style={{ maxWidth: 600 }}>
+            <div className="wiz-fail">
+              <span className="wiz-failic">{Icon.x()}</span>
+              <div>
+                <div className="wiz-ok-t">无法连接 {label}</div>
+                <div className="hlp" style={{ margin: "4px 0 0" }}>{result?.error ?? "未知错误"}</div>
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
+              <button className="btn btn-accent" onClick={run}>{Icon.restore()} 重试</button>
+              <button className="btn btn-line" onClick={onBack}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })} 返回连接步骤</button>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="wiz-foot">
+        <button className="btn btn-ghost" onClick={onBack}>上一步</button>
+        <span className="spacer" />
+        <button className="btn btn-accent" disabled={state !== "ok"} onClick={onFinish}>开始教程 {Icon.chevRight()}</button>
+      </div>
+    </>
+  );
+}