@sleep2agi/agent-network-dashboard 0.6.3-preview.1 → 0.6.3-preview.10

package/app/components/CreateNodeWizard.tsx

@@ -2,29 +2,46 @@
 
 import { useEffect, useState } from 'react';
 import { useNetworkId } from '../lib/network-context';
+import { DaemonOption, 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[] }[] = [
-  { 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'] },
+// IDs MUST match the hub validator enums (server/src/create-node-validate.ts).
+// Caught via local /mcp probe during mobile wizard build (#338 plan B):
+// pre-fix RUNTIMES had 'codex' + 'grok' but hub accepts 'codex-sdk' +
+// 'grok-build-acp'; pre-fix PERMISSION_MODES had 'auto' but hub rejects it
+// (flag_value_invalid). The wizard has been silently shipping invalid combos
+// for any non-claude-agent-sdk pick since M2 — only worked end-to-end with
+// the default claude path.
+//
+// `defaultModel` — hub's `create_node.node_spec.model` schema is
+// `z.string().min(1).max(100)`; the wizard's "默认" option leaves the state
+// empty, so pre-fix the POST body dropped `model` entirely and hub rejected
+// with `Invalid input: expected string, received undefined`. `defaultModel`
+// gets substituted before submit (and shown in the dropdown label so the
+// operator knows what "默认" will actually become).
+const RUNTIMES: { id: string; label: string; models: string[]; defaultModel: string }[] = [
+  { id: 'claude-agent-sdk', label: 'Claude Agent SDK', models: ['deepseek-v4-pro', 'MiniMax-M3', 'claude-sonnet-4-6', 'claude-opus-4-x'], defaultModel: 'claude-sonnet-4-6' },
+  { id: 'codex-sdk', label: 'Codex SDK', models: ['gpt-5.5'], defaultModel: 'gpt-5.5' },
+  { id: 'grok-build-acp', label: 'Grok (build-acp)', models: ['grok-build'], defaultModel: 'grok-build' },
 ];
-const PERMISSION_MODES = ['auto', 'default', 'bypassPermissions'];
-const STEPS = ['名字', 'Runtime', '模型', '参数', '确认'];
+const PERMISSION_MODES = ['default', 'acceptEdits', 'plan', 'bypassPermissions'];
+const STEPS = ['服务器', '名字', 'Runtime', '模型', '参数', '确认'];
 
 type Phase = 'form' | 'creating' | 'done' | 'unconfirmed' | 'error';
 
@@ -38,10 +55,15 @@ export function CreateNodeWizard({
   onCreated?: (result: unknown) => void;
 }) {
   const [step, setStep] = useState(0);
+  const [daemonNodeId, setDaemonNodeId] = useState<string | null>(null);
+  // (#338 wizard-runtime-filter) keep the full daemon row so the Runtime
+  // step can disable runtimes the chosen daemon doesn't declare support
+  // for. Hub-side enforcement still wins; this is UX surfacing.
+  const [daemon, setDaemon] = useState<DaemonOption | null>(null);
   const [name, setName] = useState('');
   const [runtimeId, setRuntimeId] = useState(RUNTIMES[0].id);
   const [model, setModel] = useState('');
-  const [permissionMode, setPermissionMode] = useState('auto');
+  const [permissionMode, setPermissionMode] = useState('default');
   const [maxTurns, setMaxTurns] = useState('');
   const [budget, setBudget] = useState('');
   const [timeout, setTimeout] = useState('');
@@ -84,17 +106,26 @@ 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() {
     setPhase('creating');
     setMsg('');
     const numOrUndef = (v: string) => (v.trim() === '' ? undefined : Number(v));
+    // Hub's create_node.node_spec.model schema is z.string().min(1); the
+    // wizard's "默认" option leaves state empty, so pick the runtime's
+    // documented default here. This mirrors what agent-node itself defaults
+    // to at boot (see agent-node cli.ts model resolution), so the "默认"
+    // dropdown label + this fallback both point at the same model.
+    const effectiveModel = model || runtime.defaultModel;
     const node_spec = {
       name: name.trim(),
       runtime: runtimeId,
-      ...(model ? { model } : {}),
+      model: effectiveModel,
       flags: {
         permissionMode,
         maxTurns: numOrUndef(maxTurns),
@@ -106,7 +137,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 +170,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,44 +224,94 @@ 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={(id, d) => {
+                      setDaemonNodeId(id);
+                      setDaemon(d);
+                      // (#338 wizard-runtime-filter) If the current runtime
+                      // pick isn't supported by the new daemon, reset so
+                      // the user is forced to re-pick on step 2. Otherwise
+                      // they could land on step 5 (确认) with an
+                      // already-invalid combo that only hub rejection
+                      // surfaces.
+                      const supported = d?.runtimes_supported;
+                      if (supported && supported.length > 0 && !supported.includes(runtimeId)) {
+                        setRuntimeId(supported[0]);
+                        setModel('');
+                      }
+                    }}
+                  />
+                  {!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 => (
-                    <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>
-                  ))}
+                  <span className="text-xs text-gray-400">
+                    Runtime{daemon ? `（${daemon.alias} 支持）` : ''}
+                  </span>
+                  {RUNTIMES.map(r => {
+                    // (#338 wizard-runtime-filter) Permissive when the
+                    // daemon didn't publish runtimes_supported at all
+                    // (pre-PR3 daemons OR daemons not yet upgraded) — hub
+                    // still validates. Restrictive only when the daemon
+                    // explicitly told us its supported set.
+                    const supported = daemon?.runtimes_supported;
+                    const disabled = Array.isArray(supported) && supported.length > 0 && !supported.includes(r.id);
+                    const selected = runtimeId === r.id;
+                    return (
+                      <button
+                        key={r.id}
+                        type="button"
+                        disabled={disabled}
+                        onClick={() => { if (!disabled) { setRuntimeId(r.id); setModel(''); } }}
+                        title={disabled ? `${daemon?.alias || '该 daemon'} 未声明支持此 runtime` : undefined}
+                        className={`flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm transition-colors ${
+                          disabled
+                            ? 'border-[#1c1c1f] bg-[#0a0a0c] text-gray-600 cursor-not-allowed'
+                            : selected
+                              ? 'border-cyan-600 bg-cyan-900/15 text-cyan-200'
+                              : 'border-[#26262b] bg-[#0e0e10] text-gray-300 hover:border-[#3a3a41]'
+                        }`}
+                      >
+                        <span>
+                          {r.label}
+                          {disabled && <span className="ml-2 text-[10px] text-gray-700">该 daemon 不支持</span>}
+                        </span>
+                        {selected && !disabled && (
+                          <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 && (
+              {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}>
-                    <option value="">默认</option>
+                    <option value="">默认（{runtime.defaultModel}）</option>
                     {runtime.models.map(m => <option key={m} value={m}>{m}</option>)}
                   </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 +326,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 || `默认（${runtime.defaultModel}）`],
+                      ['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,283 @@
+'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;
+  // (#338 wizard-runtime-filter) passes the full daemon row alongside the
+  // id so the wizard can filter the Runtime step by daemon.runtimes_supported
+  // — disabling combos the hub would reject anyway and surfacing why upfront.
+  onChange: (nodeId: string | null, daemon: DaemonOption | 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, list[0]);
+      })
+      .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, d)}
+          />
+        ))}
+      </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>
+  );
+}