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

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":7094391,"timestamp":3934267072157,"id":14,"parentId":1,"tags":{},"startTime":1782742239318,"traceId":"00b8dc5f8fd79498"},{"name":"turbopack-build-events","duration":97,"timestamp":3934267376163,"id":15,"parentId":1,"tags":{},"startTime":1782742239622,"traceId":"00b8dc5f8fd79498"},{"name":"run-typescript","duration":10474645,"timestamp":3934274190559,"id":16,"parentId":1,"tags":{},"startTime":1782742246437,"traceId":"00b8dc5f8fd79498"},{"name":"static-check","duration":947261,"timestamp":3934284866851,"id":19,"parentId":1,"tags":{},"startTime":1782742257113,"traceId":"00b8dc5f8fd79498"},{"name":"static-generation","duration":694944,"timestamp":3934285837276,"id":119,"parentId":1,"tags":{},"startTime":1782742258084,"traceId":"00b8dc5f8fd79498"},{"name":"telemetry-flush","duration":31047,"timestamp":3934286565848,"id":128,"parentId":1,"tags":{},"startTime":1782742258812,"traceId":"00b8dc5f8fd79498"},{"name":"next-build","duration":19744543,"timestamp":3934266852393,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1782742239099,"traceId":"00b8dc5f8fd79498"}]
+[{"name":"run-turbopack","duration":6637848,"timestamp":3950291370451,"id":14,"parentId":1,"tags":{},"startTime":1782758263617,"traceId":"710ecc9d3caae7fc"},{"name":"turbopack-build-events","duration":77,"timestamp":3950291679669,"id":15,"parentId":1,"tags":{},"startTime":1782758263926,"traceId":"710ecc9d3caae7fc"},{"name":"run-typescript","duration":10562859,"timestamp":3950298030631,"id":16,"parentId":1,"tags":{},"startTime":1782758270277,"traceId":"710ecc9d3caae7fc"},{"name":"static-check","duration":850531,"timestamp":3950308792809,"id":19,"parentId":1,"tags":{},"startTime":1782758281039,"traceId":"710ecc9d3caae7fc"},{"name":"static-generation","duration":751929,"timestamp":3950309658949,"id":121,"parentId":1,"tags":{},"startTime":1782758281905,"traceId":"710ecc9d3caae7fc"},{"name":"telemetry-flush","duration":27566,"timestamp":3950310447697,"id":130,"parentId":1,"tags":{},"startTime":1782758282694,"traceId":"710ecc9d3caae7fc"},{"name":"next-build","duration":19325952,"timestamp":3950291149361,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1782758263396,"traceId":"710ecc9d3caae7fc"}]

package/.next/types/routes.d.ts

@@ -2,7 +2,7 @@
 // Do not edit this file manually
 
 type AppRoutes = "/" | "/admin" | "/login" | "/logs" | "/messages" | "/node" | "/nodes" | "/server-logs" | "/servers" | "/settings" | "/settings/networks" | "/settings/tokens" | "/tasks" | "/tasks/[id]"
-type AppRouteHandlerRoutes = "/api/anet/config" | "/api/anet/node-config" | "/api/anet/node-create" | "/api/anet/node-lifecycle" | "/api/auth/login" | "/api/auth/logout" | "/api/auth/v3" | "/api/hub/audit-log" | "/api/hub/auth" | "/api/hub/broadcast" | "/api/hub/events" | "/api/hub/health" | "/api/hub/inbox" | "/api/hub/messages" | "/api/hub/networks" | "/api/hub/nodes" | "/api/hub/register" | "/api/hub/send" | "/api/hub/server-logs" | "/api/hub/server/[hostname]/agents" | "/api/hub/server/[hostname]/health" | "/api/hub/servers" | "/api/hub/session" | "/api/hub/stats" | "/api/hub/status" | "/api/hub/task-events" | "/api/hub/tasks" | "/api/hub/tmux" | "/api/hub/tokens" | "/api/hub/upload"
+type AppRouteHandlerRoutes = "/api/anet/config" | "/api/anet/host-supervisors" | "/api/anet/node-config" | "/api/anet/node-create" | "/api/anet/node-lifecycle" | "/api/auth/login" | "/api/auth/logout" | "/api/auth/v3" | "/api/hub/audit-log" | "/api/hub/auth" | "/api/hub/broadcast" | "/api/hub/events" | "/api/hub/health" | "/api/hub/inbox" | "/api/hub/messages" | "/api/hub/networks" | "/api/hub/nodes" | "/api/hub/register" | "/api/hub/send" | "/api/hub/server-logs" | "/api/hub/server/[hostname]/agents" | "/api/hub/server/[hostname]/health" | "/api/hub/servers" | "/api/hub/session" | "/api/hub/stats" | "/api/hub/status" | "/api/hub/task-events" | "/api/hub/tasks" | "/api/hub/tmux" | "/api/hub/tokens" | "/api/hub/upload"
 type PageRoutes = never
 type LayoutRoutes = "/"
 type RedirectRoutes = never
@@ -14,6 +14,7 @@ interface ParamMap {
   "/": {}
   "/admin": {}
   "/api/anet/config": {}
+  "/api/anet/host-supervisors": {}
   "/api/anet/node-config": {}
   "/api/anet/node-create": {}
   "/api/anet/node-lifecycle": {}

package/.next/types/validator.ts

@@ -182,6 +182,15 @@ type RouteHandlerConfig<Route extends AppRouteHandlerRoutes = AppRouteHandlerRou
   type __Unused = __Check
 }
 
+// Validate ../../app/api/anet/host-supervisors/route.ts
+{
+  type __IsExpected<Specific extends RouteHandlerConfig<"/api/anet/host-supervisors">> = Specific
+  const handler = {} as typeof import("../../app/api/anet/host-supervisors/route.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
+
 // Validate ../../app/api/anet/node-config/route.ts
 {
   type __IsExpected<Specific extends RouteHandlerConfig<"/api/anet/node-config">> = Specific

package/app/api/anet/host-supervisors/route.ts

@@ -0,0 +1,86 @@
+import { requireDashboardAuth } from '@/app/lib/dashboard-auth';
+import { hubFetch } from '@/app/lib/hub';
+
+/**
+ * PR4 #338 — proxy GET /api/host-supervisors (RFC-026 §9.2 / list_host_supervisors
+ * REST mirror; landed in commhub-server@0.9.0-preview.8).
+ *
+ * Returns the same shape the hub does (count + daemons[]), with `selected` hint
+ * the picker uses for its 3-state UI:
+ *   - count=0 → onboarding (no daemon yet, show install instructions)
+ *   - count=1 → auto-pick (preselect the only daemon)
+ *   - count≥2 → user picker (show all daemons, surface telemetry to help choose)
+ *
+ * Honest degrade: if the hub doesn't have list_host_supervisors yet (preview.7
+ * or older), return ok:false with a flagged status — the client renders an
+ * "upgrade hub" hint rather than a fake empty list.
+ */
+
+interface DaemonRow {
+  // Hub returns daemon_node_id, not node_id (PR2 v2 §9.2 mirror chose
+  // that name to make the foreign-key intent explicit). Locked at the
+  // contract layer; client passes it back to create_node as daemon_node_id.
+  daemon_node_id: string;
+  alias: string;
+  hostname?: string | null;
+  online?: boolean;
+  last_seen_at?: string | null;
+  runtimes_supported?: string[];
+  allowed_secret_keys?: string[];
+  host_telemetry?: {
+    alert_level?: 'green' | 'yellow' | 'red' | 'gray';
+    cpu_cores?: number | null;
+    mem_gb?: number | null;
+    ip_internal?: string | null;
+  };
+}
+
+interface HubResponse {
+  ok?: boolean;
+  error?: string;
+  count?: number;
+  daemons?: DaemonRow[];
+}
+
+export async function GET(req: Request) {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  const { searchParams } = new URL(req.url);
+  const networkId = searchParams.get('network_id');
+  const path = networkId
+    ? `/api/host-supervisors?network_id=${encodeURIComponent(networkId)}`
+    : '/api/host-supervisors';
+
+  try {
+    const res = await hubFetch(path);
+    if (res.status === 404 || res.status === 501) {
+      return Response.json(
+        {
+          ok: false,
+          unconfirmed: true,
+          error: `hub /api/host-supervisors not available (${res.status}) — upgrade commhub-server to >=0.9.0-preview.8`,
+          count: 0,
+          daemons: [],
+        },
+        { status: 501 },
+      );
+    }
+    if (!res.ok) {
+      return Response.json(
+        { ok: false, error: `hub ${res.status}`, count: 0, daemons: [] },
+        { status: 502 },
+      );
+    }
+    const data = (await res.json().catch(() => ({}))) as HubResponse;
+    const daemons = Array.isArray(data?.daemons) ? data.daemons : [];
+    const count = typeof data?.count === 'number' ? data.count : daemons.length;
+    const selected = count === 1 ? daemons[0]?.daemon_node_id || null : null;
+    return Response.json({ ok: true, count, daemons, selected });
+  } catch (e: unknown) {
+    return Response.json(
+      { ok: false, error: e instanceof Error ? e.message : String(e), count: 0, daemons: [] },
+      { status: 502 },
+    );
+  }
+}

package/app/components/CreateNodeWizard.tsx

@@ -2,20 +2,23 @@
 
 import { useEffect, useState } from 'react';
 import { useNetworkId } from '../lib/network-context';
+import { HostSupervisorPicker } from './HostSupervisorPicker';
 
 /**
- * Create-node wizard (node-lifecycle UI M2 — RFC-026 §3.1 P1, 本机创建).
- * 5 steps: ① name ② runtime ③ model ④ flags ⑤ confirm → POST /api/anet/node-create.
+ * Create-node wizard (node-lifecycle UI M2/PR4 — RFC-026 §3.1).
+ * 6 steps now: ⓪ host (PR4 #338) ① name ② runtime ③ model ④ flags ⑤ confirm
+ * → POST /api/anet/node-create with `daemon_node_id` set to the chosen host.
  *
- * ⚠️ 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.
+ * PR4 (#338 main lane PR4) folds RFC-026 §9.4 host_supervisor picker in front
+ * of the existing 5 steps. Three states the picker resolves internally:
+ *   - count=0 → onboarding (no daemon, show install command + block forward)
+ *   - count=1 → auto-pick + forward immediately
+ *   - count≥2 → user picks, then forward
+ * The wizard now ALWAYS passes daemon_node_id to /api/anet/node-create (the
+ * route's `resolveLocalDaemonNodeId` fallback only fires if daemon_node_id is
+ * absent — kept for back-compat with non-wizard callers but no longer used
+ * from this flow). Per [[feedback_doc_capability_claim_verify_code_path]] —
+ * the API contract is exercised locally before any prod hub touches the path.
  */
 
 const RUNTIMES: { id: string; label: string; models: string[] }[] = [
@@ -24,7 +27,7 @@ const RUNTIMES: { id: string; label: string; models: string[] }[] = [
   { id: 'grok', label: 'Grok', models: ['grok-build'] },
 ];
 const PERMISSION_MODES = ['auto', 'default', 'bypassPermissions'];
-const STEPS = ['名字', 'Runtime', '模型', '参数', '确认'];
+const STEPS = ['服务器', '名字', 'Runtime', '模型', '参数', '确认'];
 
 type Phase = 'form' | 'creating' | 'done' | 'unconfirmed' | 'error';
 
@@ -38,6 +41,7 @@ export function CreateNodeWizard({
   onCreated?: (result: unknown) => void;
 }) {
   const [step, setStep] = useState(0);
+  const [daemonNodeId, setDaemonNodeId] = useState<string | null>(null);
   const [name, setName] = useState('');
   const [runtimeId, setRuntimeId] = useState(RUNTIMES[0].id);
   const [model, setModel] = useState('');
@@ -84,7 +88,10 @@ export function CreateNodeWizard({
 
   const runtime = RUNTIMES.find(r => r.id === runtimeId) || RUNTIMES[0];
   const nameValid = name.trim().length > 0;
-  const canNext = step !== 0 || nameValid;
+  const canNext =
+    (step === 0 && Boolean(daemonNodeId)) ||      // step 0: must have chosen a daemon
+    (step === 1 && nameValid) ||                   // step 1: name non-empty
+    (step >= 2 && step < STEPS.length);            // later steps: nothing required to advance
   const busy = phase === 'creating';
 
   async function handleCreate() {
@@ -106,7 +113,11 @@ export function CreateNodeWizard({
       const r = await fetch('/api/anet/node-create', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ node_spec, ...(networkId ? { network_id: networkId } : {}) }),
+        body: JSON.stringify({
+          node_spec,
+          ...(daemonNodeId ? { daemon_node_id: daemonNodeId } : {}),
+          ...(networkId ? { network_id: networkId } : {}),
+        }),
       });
       const data = await r.json().catch(() => ({}));
       if (r.ok && data?.ok) {
@@ -135,7 +146,9 @@ export function CreateNodeWizard({
       <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"
+        // RFC-026 §9.4 responsive: mobile single-screen (full width minus
+        // gutter, taller); desktop ~3-col-friendly width when picker is shown.
+        className="fixed left-1/2 top-1/2 z-50 w-[min(94vw,440px)] md:w-[min(92vw,720px)] -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">
@@ -187,13 +200,28 @@ export function CreateNodeWizard({
           ) : (
             <>
               {step === 0 && (
+                <div className="space-y-2">
+                  <span className="text-xs text-gray-400">在哪台机器上创建</span>
+                  <HostSupervisorPicker
+                    networkId={netId || undefined}
+                    value={daemonNodeId}
+                    onChange={setDaemonNodeId}
+                  />
+                  {!daemonNodeId && (
+                    <p className="text-[11px] text-gray-600">
+                      没选服务器之前无法继续；如果列表是空的，按提示在目标机器上跑 <code className="rounded bg-black/40 px-1 py-0.5">anet daemon up &lt;name&gt;</code>。
+                    </p>
+                  )}
+                </div>
+              )}
+              {step === 1 && (
                 <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 && (
+              {step === 2 && (
                 <div className="space-y-2">
                   <span className="text-xs text-gray-400">Runtime</span>
                   {RUNTIMES.map(r => (
@@ -215,7 +243,7 @@ export function CreateNodeWizard({
                   ))}
                 </div>
               )}
-              {step === 2 && (
+              {step === 3 && (
                 <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}>
@@ -224,7 +252,7 @@ export function CreateNodeWizard({
                   </select>
                 </label>
               )}
-              {step === 3 && (
+              {step === 4 && (
                 <div className="space-y-3">
                   <label className="block space-y-1.5">
                     <span className="text-xs text-gray-400">permissionMode</span>
@@ -239,17 +267,23 @@ export function CreateNodeWizard({
                   </div>
                 </div>
               )}
-              {step === 4 && (
+              {step === 5 && (
                 <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]) => (
+                    {[
+                      ['服务器', daemonNodeId ? `${daemonNodeId.slice(0, 24)}…` : '—'],
+                      ['名字', 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>
               )}
             </>

package/app/components/HostSupervisorPicker.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * PR4 #338 — host_supervisor daemon picker (RFC-026 §9.4 locked mockup).
+ *
+ * Three states (the only branching the wizard ever sees):
+ *
+ *   count=0  → onboarding: explain what a daemon is + give the install command.
+ *              No daemon = nothing to dispatch to; create flow is blocked here
+ *              until the user runs `anet daemon init <name>` somewhere.
+ *
+ *   count=1  → auto-pick: just show "using <alias>" + a quiet `换一个 →` link
+ *              (which switches to the picker view if the user really wants).
+ *
+ *   count≥2  → picker grid: cards for each daemon w/ runtimes + alert chip,
+ *              click selects. Desktop = up to 3 columns; mobile = single column.
+ *
+ * Data shape mirrors `/api/anet/host-supervisors`, which in turn mirrors the
+ * hub's GET /api/host-supervisors (#338 PR2 — needs commhub-server@0.9.0-preview.8+).
+ * On `unconfirmed` (older hub), we degrade honestly to an upgrade hint — never
+ * show a fake empty list. Per [[feedback_doc_capability_claim_verify_code_path]].
+ */
+
+export interface DaemonOption {
+  // Hub canonical key is `daemon_node_id` (PR2 v2 §9.2 contract). We keep the
+  // same name end-to-end so the value the wizard passes back to create_node
+  // as `daemon_node_id` doesn't need a rename layer.
+  daemon_node_id: string;
+  alias: string;
+  hostname?: string | null;
+  online?: boolean;
+  last_seen_at?: string | null;
+  runtimes_supported?: string[];
+  host_telemetry?: {
+    alert_level?: 'green' | 'yellow' | 'red' | 'gray';
+    cpu_cores?: number | null;
+    mem_gb?: number | null;
+    ip_internal?: string | null;
+  };
+}
+
+interface PickResponse {
+  ok: boolean;
+  unconfirmed?: boolean;
+  error?: string;
+  count: number;
+  daemons: DaemonOption[];
+  selected?: string | null;
+}
+
+type LoadState = 'loading' | 'ready' | 'error' | 'unconfirmed';
+
+export function HostSupervisorPicker({
+  networkId,
+  value,
+  onChange,
+}: {
+  networkId?: string | null;
+  value: string | null;
+  onChange: (nodeId: string | null) => void;
+}) {
+  const [state, setState] = useState<LoadState>('loading');
+  const [daemons, setDaemons] = useState<DaemonOption[]>([]);
+  const [errMsg, setErrMsg] = useState('');
+  const [forcePicker, setForcePicker] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setState('loading');
+    setErrMsg('');
+    const url = networkId
+      ? `/api/anet/host-supervisors?network_id=${encodeURIComponent(networkId)}`
+      : '/api/anet/host-supervisors';
+    fetch(url, { cache: 'no-store' })
+      .then(r => r.json().then(d => ({ status: r.status, body: d as PickResponse })))
+      .then(({ status, body }) => {
+        if (!alive) return;
+        if (status === 501 || body?.unconfirmed) {
+          setState('unconfirmed');
+          setErrMsg(body?.error || 'hub /api/host-supervisors unavailable — upgrade to >=0.9.0-preview.8');
+          setDaemons([]);
+          return;
+        }
+        if (!body?.ok) {
+          setState('error');
+          setErrMsg(body?.error || `hub ${status}`);
+          setDaemons([]);
+          return;
+        }
+        const list = Array.isArray(body.daemons) ? body.daemons : [];
+        setDaemons(list);
+        setState('ready');
+        // count=1 auto-pick: preselect the only daemon. count≥2 leaves the
+        // selection to the user (parent value stays null until click).
+        if (list.length === 1 && !value) onChange(list[0].daemon_node_id);
+      })
+      .catch(e => {
+        if (!alive) return;
+        setState('error');
+        setErrMsg(e instanceof Error ? e.message : String(e));
+        setDaemons([]);
+      });
+    return () => { alive = false; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [networkId]);
+
+  // ───── render branches ──────────────────────────────────────────────
+
+  if (state === 'loading') {
+    return (
+      <div className="flex items-center gap-2 rounded-md border border-[#26262b] bg-[#0e0e10] px-3 py-3 text-xs text-gray-500">
+        <svg className="h-3.5 w-3.5 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>
+        正在查询可用的 host_supervisor 节点…
+      </div>
+    );
+  }
+
+  if (state === 'unconfirmed') {
+    return (
+      <div className="rounded-md border border-amber-700/40 bg-amber-900/10 px-3 py-3 text-xs text-amber-200">
+        <div className="font-semibold mb-1">hub 暂未升级</div>
+        <div className="text-amber-200/80">{errMsg}</div>
+        <div className="mt-1 text-[11px] text-amber-200/60">
+          升级到 <code className="rounded bg-black/40 px-1 py-0.5">@sleep2agi/commhub-server@0.9.0-preview.8</code> 后选服务器功能才会出现。
+        </div>
+      </div>
+    );
+  }
+
+  if (state === 'error') {
+    return (
+      <div className="rounded-md border border-red-700/40 bg-red-900/10 px-3 py-3 text-xs text-red-200">
+        查询 host_supervisor 节点失败：{errMsg}
+      </div>
+    );
+  }
+
+  // count=0 — onboarding
+  if (daemons.length === 0) {
+    return (
+      <div className="rounded-md border border-[#26262b] bg-[#0e0e10] px-3 py-4 text-xs text-gray-300">
+        <div className="text-sm font-semibold text-gray-200">还没有可用的 host_supervisor 节点</div>
+        <p className="mt-1 text-gray-500">
+          要在某台机器上创建节点，先在那台机器上跑一次 daemon 初始化命令：
+        </p>
+        <pre className="mt-2 overflow-x-auto rounded bg-black/40 p-2 text-[11px] text-cyan-300">{`# 任选一台目标机器（你的笔记本 / 一台服务器都行）
+anet daemon up my-daemon`}</pre>
+        <p className="mt-2 text-gray-500">
+          注册成功后这里会自动出现，无需刷新。
+        </p>
+      </div>
+    );
+  }
+
+  // count=1 — auto-pick (collapsed). User can opt into picker via "换一个 →".
+  if (daemons.length === 1 && !forcePicker) {
+    const d = daemons[0];
+    return (
+      <div className="rounded-md border border-cyan-700/40 bg-cyan-900/10 px-3 py-3 text-xs text-cyan-100">
+        <div className="flex items-center justify-between gap-2">
+          <div>
+            <span className="text-cyan-400/80">将在</span>{' '}
+            <span className="font-semibold">{d.alias}</span>
+            <span className="text-cyan-300/60"> ({d.hostname || '—'}) </span>
+            <span className="text-cyan-400/80">上创建</span>
+          </div>
+          {/* Single-daemon networks can still let the user enter picker view; */}
+          {/* useful if they want to see telemetry before committing. */}
+          <button
+            type="button"
+            onClick={() => setForcePicker(true)}
+            className="text-[11px] text-cyan-400 hover:text-cyan-200 underline-offset-2 hover:underline"
+          >
+            详情 →
+          </button>
+        </div>
+        <RuntimeList runtimes={d.runtimes_supported} className="mt-1" />
+      </div>
+    );
+  }
+
+  // count≥2 (or forcePicker=true) — grid picker. Desktop up to 3 columns,
+  // mobile = single column. Locked per RFC-026 §9.4 mockup.
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-xs text-gray-400">
+        <span>选择一台 host_supervisor 节点（{daemons.length} 台在线）</span>
+        {forcePicker && daemons.length === 1 && (
+          <button
+            type="button"
+            onClick={() => setForcePicker(false)}
+            className="text-[11px] text-gray-500 hover:text-gray-300"
+          >
+            ← 折叠
+          </button>
+        )}
+      </div>
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
+        {daemons.map(d => (
+          <DaemonCard
+            key={d.daemon_node_id}
+            daemon={d}
+            selected={d.daemon_node_id === value}
+            onClick={() => onChange(d.daemon_node_id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ───── subcomponents ──────────────────────────────────────────────────
+
+function DaemonCard({
+  daemon,
+  selected,
+  onClick,
+}: {
+  daemon: DaemonOption;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  const alert = daemon.host_telemetry?.alert_level || 'gray';
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={selected}
+      className={`flex w-full flex-col gap-1.5 rounded-md border px-3 py-2.5 text-left text-xs transition-colors ${
+        selected
+          ? 'border-cyan-600 bg-cyan-900/15 text-cyan-100'
+          : 'border-[#26262b] bg-[#0e0e10] text-gray-300 hover:border-[#3a3a41]'
+      }`}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate font-semibold">{daemon.alias}</span>
+        <AlertChip level={alert} />
+      </div>
+      <div className="truncate text-[11px] text-gray-500">{daemon.hostname || '—'}</div>
+      <RuntimeList runtimes={daemon.runtimes_supported} />
+      {(daemon.host_telemetry?.cpu_cores != null || daemon.host_telemetry?.mem_gb != null) && (
+        <div className="flex gap-3 text-[10px] text-gray-500">
+          {daemon.host_telemetry?.cpu_cores != null && <span>{daemon.host_telemetry.cpu_cores} 核</span>}
+          {daemon.host_telemetry?.mem_gb != null && <span>{daemon.host_telemetry.mem_gb} GB</span>}
+        </div>
+      )}
+    </button>
+  );
+}
+
+function RuntimeList({ runtimes, className = '' }: { runtimes?: string[]; className?: string }) {
+  if (!runtimes || runtimes.length === 0) {
+    return <div className={`text-[10px] text-gray-600 ${className}`}>runtimes_supported: —</div>;
+  }
+  return (
+    <div className={`flex flex-wrap gap-1 ${className}`}>
+      {runtimes.map(r => (
+        <span key={r} className="rounded bg-[#1c1c1f] px-1.5 py-0.5 text-[10px] text-gray-400">{r}</span>
+      ))}
+    </div>
+  );
+}
+
+function AlertChip({ level }: { level: 'green' | 'yellow' | 'red' | 'gray' }) {
+  const cls = {
+    green: 'bg-green-600/20 text-green-300 border-green-700/40',
+    yellow: 'bg-amber-600/20 text-amber-300 border-amber-700/40',
+    red: 'bg-red-600/20 text-red-300 border-red-700/40',
+    gray: 'bg-gray-600/20 text-gray-400 border-gray-700/40',
+  }[level];
+  const label = { green: '正常', yellow: '注意', red: '警报', gray: '离线' }[level];
+  return (
+    <span className={`rounded border px-1.5 py-0.5 text-[10px] ${cls}`}>{label}</span>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.6.3-preview.2",
+  "version": "0.6.3-preview.3",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "main": "apps/desktop/electron/main.cjs",
   "scripts": {