@sleep2agi/agent-network-dashboard 0.6.3-preview.0 → 0.6.3-preview.2

package/app/api/anet/node-create/route.ts

@@ -0,0 +1,174 @@
+import { requireDashboardAuth } from '@/app/lib/dashboard-auth';
+import { hubFetch } from '@/app/lib/hub';
+import { callMcp, parseMcpEnvelope, resolveDefaultNetworkId } from '@/app/lib/hub-mcp';
+
+/**
+ * P1 "本机创建": resolve the local host-supervisor daemon's node_id from the
+ * hub node list (a node whose config_snapshot.role === 'host_supervisor'), so
+ * the wizard doesn't need a server-picker UI. Returns null if none found.
+ */
+async function resolveLocalDaemonNodeId(): Promise<string | null> {
+  try {
+    const res = await hubFetch('/api/nodes');
+    if (!res.ok) return null;
+    const data = (await res.json()) as { nodes?: unknown; sessions?: unknown };
+    const raw = data.nodes ?? data.sessions ?? data;
+    const list = Array.isArray(raw) ? raw : raw && typeof raw === 'object' ? Object.values(raw) : [];
+    const arr = list as Array<Record<string, unknown>>;
+    // PRIMARY — server-extracted `role` field (sleep2agi/agent-network PR
+    // fix/api-nodes-role-field). Hub reads role from config_snapshot JSON
+    // and exposes it as a top-level row field. Works for ANY daemon node_id
+    // (user-created or otherwise), not just the `node_daemon_` prefix.
+    for (const n of arr) {
+      if (!n || typeof n !== 'object') continue;
+      if (n.role === 'host_supervisor') return String(n.node_id || '');
+    }
+    // LEGACY config_snapshot path — for any older hub that still passes
+    // through the raw snapshot blob (no longer the case post-#312, but
+    // defensive). Cheap, no extra round-trip.
+    for (const n of arr) {
+      if (!n || typeof n !== 'object') continue;
+      const snapRaw = n.config_snapshot;
+      if (typeof snapRaw === 'string') {
+        try { if (JSON.parse(snapRaw)?.role === 'host_supervisor') return String(n.node_id || ''); } catch { /* skip */ }
+      }
+    }
+    // LAST-RESORT heuristic — pre-role-field hubs (preview2.4 and older):
+    // host_supervisor daemons started via the RFC-026 docker e2e get a
+    // `node_daemon_` id prefix. User-created daemons (any node_id) won't
+    // match here; they need the `role` field (hub post fix/api-nodes-role-field).
+    const daemon = arr.find(n => n && typeof n === 'object' && String(n.node_id || '').startsWith('node_daemon_'));
+    if (daemon) return String(daemon.node_id || '');
+  } catch { /* fall through */ }
+  return null;
+}
+
+/**
+ * Create-node proxy (node-lifecycle UI M2 — RFC-026 §3.1 P1, 本机创建).
+ * Backend `create_node` MCP tool landed in #299 (merged to main).
+ *
+ *   POST { node_spec:{name,runtime,model,flags,env_refs}, daemon_node_id?, network_id }
+ *        → create_node MCP. Returns the hub result (expected to include a
+ *          create-request id so the client can poll progress to ✓).
+ *
+ * RFC-026 §2.5 contract: create_node args = daemon_node_id + node_spec + network_id.
+ * P1 pins the daemon to "本机" — the wizard resolves the local daemon_node_id and
+ * passes it in; the route does not invent one.
+ *
+ * Progress polling (pending→succeeded over node_create_requests.status):
+ *   ⚠️ OPEN CONTRACT Q2 (asked 通信龙/工程马): get_create_request is daemon-only,
+ *   so how does the dashboard poll node_create_requests.status? (REST GET w/ V3
+ *   token / a frontend-callable MCP status tool / create_node returns request_id
+ *   for a specific endpoint). Until answered, GET below returns a flagged
+ *   `unconfirmed` response — NOT a fake "succeeded" (per 通信龙: 别 mock 假成功).
+ */
+
+const MCP_TOOL_CREATE = 'create_node';
+const EDITABLE_FLAGS = ['model', 'maxTurns', 'budget', 'timeout', 'permissionMode'] as const;
+const RUNTIMES = ['claude-agent-sdk', 'codex', 'grok'] as const;
+
+interface NodeSpec {
+  name: string;
+  runtime: string;
+  model?: unknown;
+  flags?: Record<string, unknown>;
+  env_refs?: unknown;
+}
+
+export async function POST(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  let body: { node_spec?: Partial<NodeSpec>; daemon_node_id?: string; network_id?: string };
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: 'invalid JSON body' }, { status: 400 });
+  }
+
+  const spec = body.node_spec || {};
+  const name = (spec.name || '').toString().trim();
+  if (!name) return Response.json({ error: 'node_spec.name required' }, { status: 400 });
+
+  const runtime = (spec.runtime || 'claude-agent-sdk').toString();
+  if (!RUNTIMES.includes(runtime as (typeof RUNTIMES)[number])) {
+    return Response.json({ error: `runtime must be one of: ${RUNTIMES.join(', ')}` }, { status: 400 });
+  }
+
+  // Whitelist flags — drop anything outside the editable contract (matches PR C).
+  const flags: Record<string, unknown> = {};
+  if (spec.flags && typeof spec.flags === 'object') {
+    for (const k of EDITABLE_FLAGS) {
+      if (k in spec.flags && spec.flags[k] !== undefined) flags[k] = spec.flags[k];
+    }
+  }
+
+  const node_spec: NodeSpec = {
+    name,
+    runtime,
+    ...(spec.model !== undefined ? { model: spec.model } : {}),
+    flags,
+    ...(spec.env_refs !== undefined ? { env_refs: spec.env_refs } : {}),
+  };
+
+  const networkId = body.network_id || (await resolveDefaultNetworkId());
+  // P1: pin to the local host-supervisor daemon if the caller didn't specify one.
+  const daemonNodeId = body.daemon_node_id || (await resolveLocalDaemonNodeId());
+  if (!daemonNodeId) {
+    return Response.json({ ok: false, error: 'no_host_supervisor_daemon', detail: '未找到本机 host_supervisor daemon（需先有一个在线的守护节点）' }, { status: 409 });
+  }
+  const args: Record<string, unknown> = {
+    node_spec,
+    daemon_node_id: daemonNodeId,
+    ...(networkId ? { network_id: networkId } : {}),
+  };
+
+  try {
+    const res = await callMcp(MCP_TOOL_CREATE, args);
+    if (res.ok) {
+      const result = (await parseMcpEnvelope(res)) as { ok?: boolean; error?: string; request_id?: string };
+      // The MCP call can be HTTP-200 while create_node itself failed
+      // (node_name_conflict, daemon_not_found, daemon_max_children, …). Propagate
+      // that as a real failure — never report a fake success (per 通信龙).
+      if (result && result.ok === false) {
+        return Response.json({ ok: false, error: result.error || 'create_failed', result }, { status: 502 });
+      }
+      return Response.json({ ok: true, node_spec, result });
+    }
+    if (res.status === 404 || res.status === 501) {
+      return Response.json(
+        { ok: false, unconfirmed: true, error: `hub tool '${MCP_TOOL_CREATE}' not available (${res.status}) — is :hub on #299?` },
+        { status: 501 },
+      );
+    }
+    return Response.json({ ok: false, error: `hub ${res.status}`, status: res.status }, { status: 502 });
+  } catch (e: unknown) {
+    return Response.json({ ok: false, error: e instanceof Error ? e.message : String(e) }, { status: 502 });
+  }
+}
+
+/**
+ * Create-request progress poll. ⚠️ BLOCKED on contract Q2 — the polling
+ * mechanism for node_create_requests.status is not yet confirmed for the
+ * dashboard (get_create_request is daemon-only). Returns a flagged placeholder
+ * so the client can wire its progress loop without being told a fake success.
+ */
+export async function GET(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  const { searchParams } = new URL(req.url);
+  const requestId = searchParams.get('request_id');
+  if (!requestId) return Response.json({ error: 'request_id required' }, { status: 400 });
+
+  return Response.json(
+    {
+      ok: false,
+      unconfirmed: true,
+      request_id: requestId,
+      status: 'unknown',
+      error: 'create-request status poll not wired — pending contract Q2 (dashboard poll path for node_create_requests.status)',
+    },
+    { status: 501 },
+  );
+}

package/app/api/anet/node-lifecycle/route.ts

@@ -0,0 +1,108 @@
+import { requireDashboardAuth } from '@/app/lib/dashboard-auth';
+import { callMcp, parseMcpEnvelope, resolveDefaultNetworkId } from '@/app/lib/hub-mcp';
+
+/**
+ * Per-node lifecycle actions proxy (node-lifecycle UI M1 — restart / rename;
+ * delete is a disabled placeholder until RFC-027). Thin MCP proxy to the hub
+ * using the browser session's V3 user token (hubFetch), mirroring the shape
+ * the node-config route (#260/#262 PR C) established:
+ *
+ *   POST { node_id, action: 'restart' }                  → restart_node  (RFC-024, shipped)
+ *   POST { node_id, action: 'rename', new_name: string } → rename_node   (⚠️ contract Q1)
+ *
+ * Contract is the hub MCP endpoint at HUB_MCP_PATH (JSON-RPC tools/call),
+ * which returns either application/json or text/event-stream; in both cases
+ * the tool payload is JSON in result.content[0].text.
+ *
+ * OPEN CONTRACT QUESTIONS (asked 通信龙/工程马, gate the final wiring):
+ *   Q1 rename: does a hub MCP tool exist (assumed `rename_node`)? If not,
+ *      工程马 adds it RFC-024-style; until confirmed, rename returns a flagged
+ *      `unconfirmed` response (NOT fake success) so the UI can show "pending backend".
+ *   Q3 restart completion: how is restart take-effect confirmed — reuse the
+ *      RFC-024 config_revision poll, or a dedicated status? For now we return
+ *      the raw restart_node result and let the client poll node status back to
+ *      online (same pattern as PR C's apply-lifecycle). Adjust once answered.
+ *
+ * ⚠️ Per 通信龙: never mock fake success. On hub error / unconfirmed tool we
+ * surface the real failure so the UI never lies about a node having restarted.
+ */
+
+const MCP_TOOL_RESTART = 'restart_node';
+const MCP_TOOL_RENAME = 'rename_node'; // ⚠️ Q1 — confirm hub-side tool name before relying on this
+
+const ACTIONS = ['restart', 'rename'] as const;
+type Action = (typeof ACTIONS)[number];
+
+export async function POST(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  let body: { node_id?: string; action?: string; new_name?: string; network_id?: string };
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: 'invalid JSON body' }, { status: 400 });
+  }
+
+  const nodeId = body.node_id;
+  if (!nodeId) return Response.json({ error: 'node_id required' }, { status: 400 });
+
+  const action = body.action as Action | undefined;
+  if (!action || !ACTIONS.includes(action)) {
+    return Response.json({ error: `action must be one of: ${ACTIONS.join(', ')}` }, { status: 400 });
+  }
+
+  // node MCP tools require an explicit network_id (V3 token current_network may
+  // be null). Prefer the caller's, else resolve the user's default from /api/auth/me.
+  const networkId = body.network_id || (await resolveDefaultNetworkId());
+
+  // Build the MCP tool + arguments per action.
+  let tool: string;
+  const args: Record<string, unknown> = {
+    node_id: nodeId,
+    ...(networkId ? { network_id: networkId } : {}),
+  };
+
+  if (action === 'restart') {
+    tool = MCP_TOOL_RESTART;
+  } else {
+    // rename
+    const newName = (body.new_name || '').trim();
+    if (!newName) return Response.json({ error: 'new_name required for rename' }, { status: 400 });
+    tool = MCP_TOOL_RENAME;
+    args.new_name = newName;
+  }
+
+  try {
+    const res = await callMcp(tool, args);
+    if (res.ok) {
+      const result = await parseMcpEnvelope(res);
+      return Response.json({ ok: true, action, node_id: nodeId, result });
+    }
+    // Hub reached but tool not available (e.g. rename_node not deployed yet → Q1).
+    if (res.status === 404 || res.status === 501) {
+      return Response.json(
+        {
+          ok: false,
+          unconfirmed: true,
+          action,
+          node_id: nodeId,
+          error: `hub tool '${tool}' not available (${res.status})`,
+        },
+        { status: 501 },
+      );
+    }
+    return Response.json({ ok: false, action, error: `hub ${res.status}`, status: res.status }, { status: 502 });
+  } catch (e: unknown) {
+    // Honest failure — never report a fake success.
+    return Response.json(
+      {
+        ok: false,
+        action,
+        node_id: nodeId,
+        error: e instanceof Error ? e.message : String(e),
+      },
+      { status: 502 },
+    );
+  }
+}

package/app/components/AgentCard.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
 import { Session } from './types';
 import { timeAgo } from './utils';
 import { AliasAvatar } from './AliasAvatar';
+import { NodeSettingsPanel } from './NodeSettingsPanel';
 
 interface AgentCardProps {
   session: Session;
@@ -23,8 +25,13 @@ const DEFAULT_STATUS = { bg: 'bg-gray-800/50 border-gray-700/30', text: 'text-gr
 
 export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardProps) {
   const cfg = hasSse ? (STATUS_CONFIG[s.status] || DEFAULT_STATUS) : DEFAULT_STATUS;
+  // #260: per-node settings panel (UI-only stub). Local open state — the
+  // panel itself is presentational and issues no backend calls.
+  const [settingsOpen, setSettingsOpen] = useState(false);
 
   return (
+    <>
+    {settingsOpen && <NodeSettingsPanel session={s} onClose={() => setSettingsOpen(false)} />}
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
@@ -56,9 +63,31 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
           <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
         </div>
-        <span className={`text-[11px] px-2 py-0.5 rounded-md border shrink-0 ${cfg.bg} ${cfg.text}`}>
-          {hasSse ? s.status : 'offline'}
-        </span>
+        <div className="flex items-center gap-1 shrink-0">
+          <span className={`text-[11px] px-2 py-0.5 rounded-md border ${cfg.bg} ${cfg.text}`}>
+            {hasSse ? s.status : 'offline'}
+          </span>
+          {/* #260: per-node ⋮ menu → settings panel. The card is a <Link>,
+              so stop the click from navigating / opening chat. Opens a
+              UI-only stub panel (channels / model / mode / restart) — no
+              backend wired yet. 44px tap target for mobile. */}
+          <button
+            type="button"
+            aria-label={`${s.alias} 节点设置`}
+            onClick={e => {
+              e.preventDefault();
+              e.stopPropagation();
+              setSettingsOpen(true);
+            }}
+            className="inline-flex h-7 w-7 items-center justify-center -mr-1 rounded-md text-gray-500 hover:text-white hover:bg-white/5 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden>
+              <circle cx="12" cy="5" r="1.6" />
+              <circle cx="12" cy="12" r="1.6" />
+              <circle cx="12" cy="19" r="1.6" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       {/* Agent type badge — hidden below sm because the runtime
@@ -135,5 +164,6 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
         </div>
       </div>
     </Link>
+    </>
   );
 }

package/app/components/CreateNodeWizard.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useNetworkId } from '../lib/network-context';
+
+/**
+ * Create-node wizard (node-lifecycle UI M2 — RFC-026 §3.1 P1, 本机创建).
+ * 5 steps: ① name ② runtime ③ model ④ flags ⑤ confirm → POST /api/anet/node-create.
+ *
+ * ⚠️ Two contract gaps the submit path depends on (asked 通信龙/工程马):
+ *   - node_spec.runtime enum: these ids (claude-agent-sdk / codex / grok) follow
+ *     通信龙's spec, but the panel's RUNTIME_MODELS keys differ; confirm the exact
+ *     values the backend expects, then adjust RUNTIMES below.
+ *   - daemon_node_id: P1 is "本机". Until there's a way to resolve the local
+ *     daemon's node_id, we omit it (the route omits when absent) and surface
+ *     whatever the hub returns — never a fake success.
+ * The route already returns a flagged `unconfirmed` when create_node isn't
+ * available (e.g. test hub not on #299), so this UI degrades honestly.
+ */
+
+const RUNTIMES: { id: string; label: string; models: string[] }[] = [
+  { id: 'claude-agent-sdk', label: 'Claude Agent SDK', models: ['deepseek-v4-pro', 'MiniMax-M3', 'claude-sonnet-4-6', 'claude-opus-4-x'] },
+  { id: 'codex', label: 'Codex', models: ['gpt-5.5'] },
+  { id: 'grok', label: 'Grok', models: ['grok-build'] },
+];
+const PERMISSION_MODES = ['auto', 'default', 'bypassPermissions'];
+const STEPS = ['名字', 'Runtime', '模型', '参数', '确认'];
+
+type Phase = 'form' | 'creating' | 'done' | 'unconfirmed' | 'error';
+
+export function CreateNodeWizard({
+  networkId,
+  onClose,
+  onCreated,
+}: {
+  networkId?: string;
+  onClose: () => void;
+  onCreated?: (result: unknown) => void;
+}) {
+  const [step, setStep] = useState(0);
+  const [name, setName] = useState('');
+  const [runtimeId, setRuntimeId] = useState(RUNTIMES[0].id);
+  const [model, setModel] = useState('');
+  const [permissionMode, setPermissionMode] = useState('auto');
+  const [maxTurns, setMaxTurns] = useState('');
+  const [budget, setBudget] = useState('');
+  const [timeout, setTimeout] = useState('');
+  const [phase, setPhase] = useState<Phase>('form');
+  const [msg, setMsg] = useState('');
+  const [childUp, setChildUp] = useState(false);
+  const { networkId: ctxNetworkId } = useNetworkId();
+  const netId = networkId || ctxNetworkId;
+
+  // Escape closes the wizard (unless a create is mid-flight, so a stray key
+  // can't drop the dialog while the request is settling).
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && phase !== 'creating') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose, phase]);
+
+  // After dispatch, confirm the child actually came up by watching the node
+  // list for it to register (RFC-026 progress signal — get_create_request is
+  // daemon-only, so the dashboard confirms via /api/hub/status). Polls ~24s.
+  useEffect(() => {
+    if (phase !== 'done' || childUp) return;
+    let alive = true;
+    let tries = 0;
+    const want = name.trim();
+    const tick = async () => {
+      tries += 1;
+      try {
+        const url = netId ? `/api/hub/status?network_id=${encodeURIComponent(netId)}` : '/api/hub/status';
+        const r = await fetch(url, { cache: 'no-store' });
+        const d = await r.json().catch(() => ({}));
+        const list = Array.isArray(d?.sessions) ? d.sessions : Array.isArray(d) ? d : [];
+        if (alive && list.some((s: { alias?: string }) => s?.alias === want)) { setChildUp(true); return; }
+      } catch { /* transient — keep polling */ }
+      if (alive && tries < 16) window.setTimeout(tick, 1500);
+    };
+    const t = window.setTimeout(tick, 1200);
+    return () => { alive = false; window.clearTimeout(t); };
+  }, [phase, childUp, netId, name]);
+
+  const runtime = RUNTIMES.find(r => r.id === runtimeId) || RUNTIMES[0];
+  const nameValid = name.trim().length > 0;
+  const canNext = step !== 0 || nameValid;
+  const busy = phase === 'creating';
+
+  async function handleCreate() {
+    setPhase('creating');
+    setMsg('');
+    const numOrUndef = (v: string) => (v.trim() === '' ? undefined : Number(v));
+    const node_spec = {
+      name: name.trim(),
+      runtime: runtimeId,
+      ...(model ? { model } : {}),
+      flags: {
+        permissionMode,
+        maxTurns: numOrUndef(maxTurns),
+        budget: numOrUndef(budget),
+        timeout: numOrUndef(timeout),
+      },
+    };
+    try {
+      const r = await fetch('/api/anet/node-create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ node_spec, ...(networkId ? { network_id: networkId } : {}) }),
+      });
+      const data = await r.json().catch(() => ({}));
+      if (r.ok && data?.ok) {
+        setPhase('done');
+        setMsg('创建请求已下发，节点正在拉起…');
+        onCreated?.(data.result);
+      } else if (data?.unconfirmed) {
+        setPhase('unconfirmed');
+        setMsg(`后端 create_node 未就绪：${data?.error || '不可用'}（测试 hub 可能未含 #299）`);
+      } else {
+        setPhase('error');
+        setMsg(data?.error ? `创建失败：${data.error}` : '创建失败');
+      }
+    } catch (e) {
+      setPhase('error');
+      setMsg(`创建失败：${e instanceof Error ? e.message : '网络错误'}`);
+    }
+  }
+
+  const inputCls =
+    'w-full rounded-md border border-[#26262b] bg-[#0e0e10] px-3 py-2 text-sm text-gray-200 focus:border-cyan-600 focus:outline-none';
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/50 z-40" onClick={onClose} aria-hidden />
+      <div
+        role="dialog"
+        aria-label="新建节点"
+        className="fixed left-1/2 top-1/2 z-50 w-[min(92vw,440px)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-[#26262b] bg-[#161618] shadow-2xl"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-[#26262b] px-4 py-3">
+          <div className="text-sm font-semibold text-white">新建节点</div>
+          <button onClick={onClose} aria-label="关闭" className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:bg-white/5 hover:text-white">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Step indicator */}
+        <div className="flex items-center gap-1.5 px-4 pt-3">
+          {STEPS.map((label, i) => (
+            <div key={label} className="flex flex-1 flex-col items-center gap-1">
+              <div className={`h-1 w-full rounded-full ${i <= step ? 'bg-cyan-500' : 'bg-[#26262b]'}`} />
+              <span className={`text-[10px] ${i === step ? 'text-cyan-300' : 'text-gray-600'}`}>{label}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Body */}
+        <div className="min-h-[180px] px-4 py-4">
+          {phase !== 'form' ? (
+            <div className="flex h-[180px] flex-col items-center justify-center gap-3 text-center">
+              {busy && (
+                <svg className="h-7 w-7 animate-spin text-cyan-400" viewBox="0 0 24 24" fill="none" aria-hidden>
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                </svg>
+              )}
+              <div className={`text-sm ${phase === 'done' ? 'text-green-300' : phase === 'error' ? 'text-red-300' : phase === 'unconfirmed' ? 'text-amber-300' : 'text-gray-300'}`}>
+                {busy ? '正在创建…' : phase === 'done' && childUp ? `✓ ${name.trim()} 已上线` : msg}
+              </div>
+              {/* Real progress: poll the node list for the child to register
+                  (派单→fork→注册→✓). */}
+              {phase === 'done' && (childUp ? (
+                <p className="text-[11px] text-green-500/80">节点已注册，已出现在节点列表。</p>
+              ) : (
+                <p className="inline-flex items-center gap-1.5 text-[11px] text-gray-500">
+                  <svg className="h-3 w-3 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden>
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                  正在监测 {name.trim()} 注册…（最长 ~24s）
+                </p>
+              ))}
+            </div>
+          ) : (
+            <>
+              {step === 0 && (
+                <label className="block space-y-1.5">
+                  <span className="text-xs text-gray-400">节点名字</span>
+                  <input autoFocus value={name} onChange={e => setName(e.target.value)} placeholder="例如 my-agent-1" className={inputCls} />
+                  {!nameValid && <span className="text-[11px] text-gray-600">名字不能为空</span>}
+                </label>
+              )}
+              {step === 1 && (
+                <div className="space-y-2">
+                  <span className="text-xs text-gray-400">Runtime</span>
+                  {RUNTIMES.map(r => (
+                    <button
+                      key={r.id}
+                      type="button"
+                      onClick={() => { setRuntimeId(r.id); setModel(''); }}
+                      className={`flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm transition-colors ${
+                        runtimeId === r.id ? 'border-cyan-600 bg-cyan-900/15 text-cyan-200' : 'border-[#26262b] bg-[#0e0e10] text-gray-300 hover:border-[#3a3a41]'
+                      }`}
+                    >
+                      {r.label}
+                      {runtimeId === r.id && (
+                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                          <path d="M20 6 9 17l-5-5" />
+                        </svg>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+              {step === 2 && (
+                <label className="block space-y-1.5">
+                  <span className="text-xs text-gray-400">模型（{runtime.label}）</span>
+                  <select value={model} onChange={e => setModel(e.target.value)} className={inputCls}>
+                    <option value="">默认</option>
+                    {runtime.models.map(m => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </label>
+              )}
+              {step === 3 && (
+                <div className="space-y-3">
+                  <label className="block space-y-1.5">
+                    <span className="text-xs text-gray-400">permissionMode</span>
+                    <select value={permissionMode} onChange={e => setPermissionMode(e.target.value)} className={inputCls}>
+                      {PERMISSION_MODES.map(m => <option key={m} value={m}>{m}</option>)}
+                    </select>
+                  </label>
+                  <div className="grid grid-cols-3 gap-2">
+                    <label className="space-y-1"><span className="text-[11px] text-gray-500">maxTurns</span><input inputMode="numeric" value={maxTurns} onChange={e => setMaxTurns(e.target.value)} className={inputCls} /></label>
+                    <label className="space-y-1"><span className="text-[11px] text-gray-500">budget</span><input inputMode="numeric" value={budget} onChange={e => setBudget(e.target.value)} className={inputCls} /></label>
+                    <label className="space-y-1"><span className="text-[11px] text-gray-500">timeout</span><input inputMode="numeric" value={timeout} onChange={e => setTimeout(e.target.value)} className={inputCls} /></label>
+                  </div>
+                </div>
+              )}
+              {step === 4 && (
+                <div className="space-y-2 text-sm">
+                  <div className="rounded-md border border-[#26262b] bg-[#0e0e10] divide-y divide-[#1c1c1f]">
+                    {[['名字', name.trim() || '—'], ['Runtime', runtime.label], ['模型', model || '默认'], ['permissionMode', permissionMode], ['maxTurns / budget / timeout', `${maxTurns || '—'} / ${budget || '—'} / ${timeout || '—'}`]].map(([k, v]) => (
+                      <div key={k} className="flex items-start justify-between gap-3 px-3 py-2">
+                        <span className="shrink-0 text-gray-500 text-xs">{k}</span>
+                        <span className="text-right text-gray-200 text-xs break-all">{v}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <p className="text-[11px] text-gray-600">P1：创建在本机 daemon（绕过选服务器）。</p>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Footer nav */}
+        {phase === 'form' ? (
+          <div className="flex items-center justify-between border-t border-[#26262b] px-4 py-3">
+            <button type="button" onClick={() => (step === 0 ? onClose() : setStep(step - 1))} className="rounded-md px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200">
+              {step === 0 ? '取消' : '上一步'}
+            </button>
+            {step < STEPS.length - 1 ? (
+              <button type="button" disabled={!canNext} onClick={() => setStep(step + 1)} className={`rounded-md px-4 py-1.5 text-sm font-medium ${canNext ? 'bg-cyan-600 text-white hover:bg-cyan-500' : 'bg-[#1c1c1f] text-gray-600 cursor-not-allowed'}`}>
+                下一步
+              </button>
+            ) : (
+              <button type="button" onClick={handleCreate} className="rounded-md bg-green-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-green-500">
+                创建节点
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="flex items-center justify-end border-t border-[#26262b] px-4 py-3">
+            <button type="button" onClick={onClose} className="rounded-md bg-[#1c1c1f] px-4 py-1.5 text-sm text-gray-200 hover:bg-[#26262b]">
+              {phase === 'done' ? '完成' : '关闭'}
+            </button>
+            {(phase === 'error' || phase === 'unconfirmed') && (
+              <button type="button" onClick={() => setPhase('form')} className="ml-2 rounded-md bg-cyan-600 px-4 py-1.5 text-sm text-white hover:bg-cyan-500">返回修改</button>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}