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

package/app/components/NodeLifecycleMenu.tsx

@@ -0,0 +1,436 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// RFC-027 PR2 — per-node ⋮ lifecycle menu + stop/delete modals.
+//
+// State-aware menu items (RFC-027 §3.1 table):
+//   active            → 重启 / 停止 / 删除
+//   stopping/deleting → loading (all disabled,菜单 surfaces "请稍候")
+//   stopped           → 启动 / 删除 (停止 灰掉 — already stopped)
+//   stop_failed       → 启动 / 删除 (warn — operator should investigate)
+//
+// Stop modal: low-friction confirm (RFC-027 §3.3)
+// Delete modal: alias-input confirm + force-on-in-flight checkbox
+//   (RFC-027 §3.2; mirrors hub's confirm_alias gate + force semantics).
+//
+// Error propagation per 通信龙 PR2 requirement: structured payloads
+// from hub (node_not_active / cannot_delete_daemon_via_delete_node /
+// node_busy_in_flight / confirm_alias_mismatch / forbidden_cross_tenant)
+// land in `lastError` with their real fields surfaced in the UI — no
+// generic "操作失败".
+//
+// React rules-of-hooks: all hooks declared BEFORE early returns.
+
+export type LifecycleState =
+  | 'active'
+  | 'stopping'
+  | 'stopped'
+  | 'stop_failed'
+  | 'deleting'
+  | string;   // forward-compat for unknown server values
+
+export interface NodeLifecycleMenuProps {
+  nodeId: string;
+  alias: string;
+  lifecycleState: LifecycleState | null | undefined;
+  networkId?: string | null;
+  /** Called when a lifecycle op completes successfully (caller refreshes nodes list). */
+  onCompleted?: () => void;
+}
+
+type LifecycleAction = 'restart' | 'stop' | 'delete';
+
+type ApiReply = {
+  ok?: boolean;
+  error?: string;
+  message?: string;
+  in_flight_count?: number;
+  hint?: string;
+  lifecycle_state?: string;
+  unconfirmed?: boolean;
+  [k: string]: unknown;
+};
+
+const normalizeState = (s: LifecycleState | null | undefined): LifecycleState =>
+  (typeof s === 'string' && s.length > 0 ? s : 'active');
+
+async function callLifecycle(
+  action: LifecycleAction,
+  body: Record<string, unknown>,
+): Promise<ApiReply & { httpStatus: number }> {
+  try {
+    const r = await fetch('/api/anet/node-lifecycle', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action, ...body }),
+    });
+    const data = (await r.json().catch(() => ({}))) as ApiReply;
+    return { ...data, httpStatus: r.status };
+  } catch (e: unknown) {
+    return {
+      ok: false,
+      error: 'network_error',
+      message: e instanceof Error ? e.message : String(e),
+      httpStatus: 0,
+    };
+  }
+}
+
+export function NodeLifecycleMenu({
+  nodeId,
+  alias,
+  lifecycleState,
+  networkId,
+  onCompleted,
+}: NodeLifecycleMenuProps) {
+  // All hooks above any early return (avoid hooks-order regression that
+  // bit the mobile app at v0.1.29; 通信龙 explicit call-out for PR2).
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [stopModal, setStopModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [restartBusy, setRestartBusy] = useState(false);
+  const [lastError, setLastError] = useState<ApiReply | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  // Outside-click + Escape close the menu (focus management).
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDoc = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setMenuOpen(false); };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  const onRestart = useCallback(async () => {
+    setMenuOpen(false);
+    setLastError(null);
+    setRestartBusy(true);
+    const r = await callLifecycle('restart', {
+      node_id: nodeId,
+      ...(networkId ? { network_id: networkId } : {}),
+    });
+    setRestartBusy(false);
+    if (r.ok) {
+      onCompleted?.();
+      return;
+    }
+    setLastError(r);
+  }, [nodeId, networkId, onCompleted]);
+
+  const state = normalizeState(lifecycleState);
+  const isLoading = state === 'stopping' || state === 'deleting';
+  const isActive = state === 'active';
+  const isStopped = state === 'stopped' || state === 'stop_failed';
+
+  // Menu items per RFC-027 §3.1 table.
+  const items: Array<{ label: string; key: string; danger?: boolean; onClick: () => void; disabled?: boolean }> = [];
+  if (isLoading) {
+    items.push({
+      label: state === 'stopping' ? '停止中…' : '删除中…',
+      key: 'loading', disabled: true, onClick: () => {},
+    });
+  } else if (isActive) {
+    items.push({ label: restartBusy ? '重启中…' : '重启节点', key: 'restart', disabled: restartBusy, onClick: onRestart });
+    items.push({ label: '停止节点', key: 'stop', onClick: () => { setMenuOpen(false); setStopModal(true); } });
+    items.push({ label: '删除节点', key: 'delete', danger: true, onClick: () => { setMenuOpen(false); setDeleteModal(true); } });
+  } else if (isStopped) {
+    // stopped + stop_failed: "启动" = restart_node (hub resets lifecycle_state→active on success per PR1.2a)
+    items.push({ label: restartBusy ? '启动中…' : '启动节点', key: 'restart', disabled: restartBusy, onClick: onRestart });
+    items.push({ label: '删除节点', key: 'delete', danger: true, onClick: () => { setMenuOpen(false); setDeleteModal(true); } });
+  } else {
+    // Unknown state — surface read-only badge, no destructive action.
+    items.push({
+      label: `状态 ${state} (不识别)`,
+      key: 'unknown', disabled: true, onClick: () => {},
+    });
+  }
+
+  return (
+    <div ref={menuRef} className="relative inline-block" onClick={e => e.stopPropagation()}>
+      <button
+        type="button"
+        aria-label={`节点 ${alias} 生命周期操作`}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        onClick={() => setMenuOpen(v => !v)}
+        className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-400 hover:bg-white/5 hover:text-white focus:outline-none focus:ring-1 focus:ring-cyan-500/50"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" 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>
+      {menuOpen && (
+        <div role="menu" className="absolute right-0 z-40 mt-1 w-44 overflow-hidden rounded-md border border-[#26262b] bg-[#161618] shadow-xl">
+          {items.map(item => (
+            <button
+              key={item.key}
+              type="button"
+              role="menuitem"
+              disabled={item.disabled}
+              onClick={item.onClick}
+              className={`block w-full px-3 py-2 text-left text-sm transition-colors ${
+                item.disabled
+                  ? 'text-gray-600 cursor-not-allowed'
+                  : item.danger
+                    ? 'text-red-300 hover:bg-red-900/20'
+                    : 'text-gray-200 hover:bg-white/5'
+              }`}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Last error inline (under the button) — pass-through hub's structured fields */}
+      {lastError && lastError.ok === false && !stopModal && !deleteModal && (
+        <div className="absolute right-0 z-40 mt-1 w-72 rounded-md border border-red-700/40 bg-red-900/20 px-3 py-2 text-xs text-red-200">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              <div className="font-semibold">{lastError.error || 'error'}</div>
+              {lastError.message ? <div className="mt-0.5 text-red-300/80">{lastError.message}</div> : null}
+              {typeof lastError.in_flight_count === 'number' && (
+                <div className="mt-0.5 text-red-300/80">in-flight: {lastError.in_flight_count}</div>
+              )}
+              {lastError.hint ? <div className="mt-1 text-red-300/60">{lastError.hint}</div> : null}
+            </div>
+            <button type="button" onClick={() => setLastError(null)} className="shrink-0 text-red-400 hover:text-red-200" aria-label="关闭">×</button>
+          </div>
+        </div>
+      )}
+
+      {stopModal && (
+        <StopNodeModal
+          alias={alias}
+          nodeId={nodeId}
+          networkId={networkId}
+          onClose={() => setStopModal(false)}
+          onCompleted={() => { setStopModal(false); onCompleted?.(); }}
+        />
+      )}
+      {deleteModal && (
+        <DeleteNodeModal
+          alias={alias}
+          nodeId={nodeId}
+          networkId={networkId}
+          onClose={() => setDeleteModal(false)}
+          onCompleted={() => { setDeleteModal(false); onCompleted?.(); }}
+        />
+      )}
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────────
+
+interface ModalProps {
+  alias: string;
+  nodeId: string;
+  networkId?: string | null;
+  onClose: () => void;
+  onCompleted: () => void;
+}
+
+function StopNodeModal({ alias, nodeId, networkId, onClose, onCompleted }: ModalProps) {
+  const [busy, setBusy] = useState(false);
+  const [force, setForce] = useState(false);
+  const [reply, setReply] = useState<ApiReply | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !busy) onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose, busy]);
+
+  const inFlight = reply && typeof reply.in_flight_count === 'number' ? reply.in_flight_count : 0;
+
+  const onConfirm = async () => {
+    setBusy(true);
+    setReply(null);
+    const r = await callLifecycle('stop', {
+      node_id: nodeId,
+      ...(networkId ? { network_id: networkId } : {}),
+      ...(force ? { force: true } : {}),
+    });
+    setBusy(false);
+    if (r.ok) { onCompleted(); return; }
+    setReply(r);
+  };
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/50" onClick={busy ? undefined : onClose} aria-hidden />
+      <div role="dialog" aria-label={`停止节点 ${alias}`} className="fixed left-1/2 top-1/2 z-50 w-[min(92vw,420px)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-[#26262b] bg-[#161618] shadow-2xl">
+        <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={busy ? undefined : onClose} aria-label="关闭" className="text-gray-500 hover:text-white">×</button>
+        </div>
+        <div className="space-y-3 px-4 py-4">
+          <div className="text-sm text-gray-300">
+            将停止 <span className="font-mono text-cyan-300">{alias}</span> 子进程（SIGTERM，~10s 内）。配置目录保留，可通过「启动」恢复。
+          </div>
+          {/* Surface hub's structured payload field-by-field; never collapse to generic */}
+          {reply && reply.ok === false && (
+            <div className="rounded-md border border-red-700/40 bg-red-900/20 px-3 py-2 text-xs text-red-200">
+              <div className="font-semibold">{reply.error}</div>
+              {reply.message ? <div className="mt-0.5 text-red-300/80">{reply.message}</div> : null}
+              {typeof reply.in_flight_count === 'number' && (
+                <div className="mt-0.5 text-red-300/80">
+                  当前 in-flight 任务: {reply.in_flight_count}
+                </div>
+              )}
+              {reply.hint ? <div className="mt-1 text-red-300/60">{reply.hint}</div> : null}
+            </div>
+          )}
+          {(inFlight > 0 || force) && (
+            <label className="flex items-start gap-2 rounded-md border border-amber-700/40 bg-amber-900/10 px-3 py-2 text-xs text-amber-200">
+              <input
+                type="checkbox"
+                checked={force}
+                onChange={e => setForce(e.target.checked)}
+                className="mt-0.5"
+              />
+              <span>
+                <span className="font-semibold text-amber-300">强制停止</span>{inFlight > 0 ? `（会丢弃 ${inFlight} 条待处理任务）` : '（覆盖 in-flight 拒绝；hub 会写 audit 行）'}
+              </span>
+            </label>
+          )}
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t border-[#26262b] px-4 py-3">
+          <button type="button" disabled={busy} onClick={onClose} className="rounded-md px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200 disabled:opacity-50">取消</button>
+          <button
+            type="button"
+            disabled={busy || (inFlight > 0 && !force)}
+            onClick={onConfirm}
+            className="rounded-md bg-cyan-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busy ? '停止中…' : '确认停止'}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function DeleteNodeModal({ alias, nodeId, networkId, onClose, onCompleted }: ModalProps) {
+  const [busy, setBusy] = useState(false);
+  const [confirmInput, setConfirmInput] = useState('');
+  const [force, setForce] = useState(false);
+  const [keepConfig, setKeepConfig] = useState(false);
+  const [reply, setReply] = useState<ApiReply | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !busy) onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose, busy]);
+
+  const inFlight = reply && typeof reply.in_flight_count === 'number' ? reply.in_flight_count : 0;
+  const confirmValid = confirmInput === alias;
+
+  const onConfirm = async () => {
+    if (!confirmValid) return;
+    setBusy(true);
+    setReply(null);
+    const r = await callLifecycle('delete', {
+      node_id: nodeId,
+      confirm_alias: confirmInput,
+      ...(networkId ? { network_id: networkId } : {}),
+      ...(force ? { force: true } : {}),
+      ...(keepConfig ? { delete_config: false } : {}),
+    });
+    setBusy(false);
+    if (r.ok) { onCompleted(); return; }
+    setReply(r);
+  };
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/50" onClick={busy ? undefined : onClose} aria-hidden />
+      <div role="dialog" aria-label={`删除节点 ${alias}`} className="fixed left-1/2 top-1/2 z-50 w-[min(94vw,480px)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-red-700/40 bg-[#161618] shadow-2xl">
+        <div className="flex items-center justify-between border-b border-[#26262b] px-4 py-3">
+          <div className="text-sm font-semibold text-red-300">删除节点</div>
+          <button onClick={busy ? undefined : onClose} aria-label="关闭" className="text-gray-500 hover:text-white">×</button>
+        </div>
+        <div className="space-y-3 px-4 py-4 text-sm text-gray-300">
+          <div>这将：</div>
+          <ul className="list-inside list-disc space-y-1 pl-2 text-xs text-gray-400">
+            <li>停止 <span className="font-mono text-cyan-300">{alias}</span> 子进程（SIGTERM ~10s）</li>
+            <li>从 hub 注销该节点</li>
+            <li>撤销该节点的 ntok</li>
+            {!keepConfig && <li>配置文件备份到 <code className="text-amber-300">~/.anet/deleted/&lt;ts&gt;-{alias}/</code>（30 天后自动清除）</li>}
+            {keepConfig && <li className="text-amber-300">配置文件保留原地（不备份不清理 — 你勾选了「保留配置」）</li>}
+          </ul>
+
+          {/* Surface hub's structured payload field-by-field */}
+          {reply && reply.ok === false && (
+            <div className="rounded-md border border-red-700/40 bg-red-900/20 px-3 py-2 text-xs text-red-200">
+              <div className="font-semibold">{reply.error}</div>
+              {reply.message ? <div className="mt-0.5 text-red-300/80">{reply.message}</div> : null}
+              {typeof reply.in_flight_count === 'number' && (
+                <div className="mt-0.5 text-red-300/80">当前 in-flight 任务: {reply.in_flight_count}</div>
+              )}
+              {reply.hint ? <div className="mt-1 text-red-300/60">{reply.hint}</div> : null}
+            </div>
+          )}
+
+          {(inFlight > 0 || force) && (
+            <label className="flex items-start gap-2 rounded-md border border-amber-700/40 bg-amber-900/10 px-3 py-2 text-xs text-amber-200">
+              <input
+                type="checkbox"
+                checked={force}
+                onChange={e => setForce(e.target.checked)}
+                className="mt-0.5"
+              />
+              <span>
+                <span className="font-semibold text-amber-300">强制删除</span>{inFlight > 0 ? `（会丢弃 ${inFlight} 条待处理任务）` : '（覆盖 in-flight 拒绝）'}
+              </span>
+            </label>
+          )}
+
+          <label className="flex items-center gap-2 text-xs text-gray-400">
+            <input type="checkbox" checked={keepConfig} onChange={e => setKeepConfig(e.target.checked)} />
+            保留配置目录（不备份；高级用法）
+          </label>
+
+          <label className="block space-y-1">
+            <span className="text-xs text-gray-400">输入节点名字 <span className="font-mono text-cyan-300">{alias}</span> 确认</span>
+            <input
+              autoFocus
+              value={confirmInput}
+              onChange={e => setConfirmInput(e.target.value)}
+              placeholder={alias}
+              className="w-full rounded-md border border-[#26262b] bg-[#0e0e10] px-3 py-2 text-sm text-gray-200 focus:border-red-500 focus:outline-none"
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+            {confirmInput && !confirmValid && (
+              <span className="text-[11px] text-red-400">名字不匹配（区分大小写）</span>
+            )}
+          </label>
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t border-[#26262b] px-4 py-3">
+          <button type="button" disabled={busy} onClick={onClose} className="rounded-md px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200 disabled:opacity-50">取消</button>
+          <button
+            type="button"
+            disabled={busy || !confirmValid || (inFlight > 0 && !force)}
+            onClick={onConfirm}
+            className="rounded-md bg-red-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busy ? '删除中…' : `删除 ${alias}`}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

package/app/components/NodeSettingsPanel.tsx

@@ -8,18 +8,22 @@ import { AliasAvatar } from './AliasAvatar';
  * Per-node settings panel (issue #260 → v0.11 flagship #262, Vincent tg
  * 2026-06-24, "must actually work").
  *
- * STATUS (F1/F2/F3, 通信龙 review round 2):
- *  - **Wired (real)**: B Runtime·模型 model select + C 运行模式 flags
- *    (permissionMode / dangerouslySkipPermissions / teammateMode / maxTurns /
- *    budget / timeout). Controlled form state, loaded on mount from
- *    `GET /api/anet/node-config` and persisted via `POST`. The six flags +
- *    model are the editable contract 通信龙 specified.
+ * STATUS (F1/F2/F3 + A channel edit, 通信龙 review round 3):
+ *  - **Wired (real)**: A 接入 Channel enable/disable + B Runtime·模型 model
+ *    select + C 运行模式 flags (permissionMode / dangerouslySkipPermissions /
+ *    teammateMode / maxTurns / budget / timeout). Controlled form state,
+ *    loaded on mount from `GET /api/anet/node-config` and persisted via
+ *    `POST`. The seven editable knobs are the contract 通信龙 specified.
  *  - **F3 apply lifecycle**: after Save the panel runs a take-effect state
  *    machine — saving → applying (node restarting) → applied | rejected |
  *    timeout — polling `GET ?apply_id` for real backends and showing a colored
  *    status strip ("toast") for the outcome.
- *  - **Still P2 stub (disabled)**: A 接入 Channel (display-only) and D 运维
- *    ops buttons (no-op), each with its own local "暂未接后端" note.
+ *  - **Channel red-line**: only the on/off flip is on the wire. Per-channel
+ *    bot token / app secret / allowFrom stay in the node's local config.json
+ *    and are shown here as masked read-only (StubField). Editing a secret
+ *    from the dashboard is a separate vault-backed feature (#393-adjacent).
+ *  - **Still P2 stub**: D 运维 ops buttons other than restart (rename/stop/
+ *    delete) — gated on RFC-024 rename + RFC-027 stop/delete backends.
  *
  * ⚠️ The hub-side tool is not deployed yet (工程马 WIP): the route mock-falls
  * back with `mock: true` + `status: pending`, so the lifecycle is *simulated*
@@ -41,7 +45,10 @@ const RUNTIME_MODELS: Record<string, string[]> = {
 // booleans; three numeric bounds. These six are the entire editable flag set.
 const PERMISSION_MODES = ['auto', 'default', 'bypassPermissions'];
 
-// A. Channel display (P2 — read-only this round). `roadmap` = greyed "即将支持".
+// A. Channel bindings — enable/disable is editable; the per-channel secret
+// fields below stay read-only (`StubField`, masked). `roadmap` = greyed "即将
+// 支持". Keep this list in sync with EDITABLE_CHANNELS in
+// app/api/anet/node-config/route.ts (server-side whitelist).
 const CHANNELS: { key: string; label: string; roadmap?: boolean; fields: { label: string; value?: string }[] }[] = [
   {
     key: 'telegram', label: 'Telegram',
@@ -61,13 +68,6 @@ const CHANNELS: { key: string; label: string; roadmap?: boolean; fields: { label
       { label: '群触发策略', value: 'mention' },
     ],
   },
-  {
-    key: 'commhub', label: 'CommHub',
-    fields: [
-      { label: 'Hub 地址', value: '<hub-address>' },
-      { label: '节点 token（自动）', value: '••••••••' },
-    ],
-  },
   { key: 'wechat', label: 'WeChat', roadmap: true, fields: [] },
 ];
 
@@ -223,7 +223,6 @@ function NumberField({ label, value, onChange, placeholder }: { label: string; v
 }
 
 export function NodeSettingsPanel({ session: s, onClose }: { session: Session; onClose: () => void }) {
-  const active = channelSet(s.channels);
   const runtime = s.runtime || '—';
   const initialModel = s.model || s.agent || '';
   // imageCapable: read-only, auto from model (MiniMax-M3 / Claude = yes).
@@ -235,9 +234,13 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
 
   const nodeKey = s.node_id || s.alias;
 
-  // ---- Editable form state (B model + C flags) ----
+  // ---- Editable form state (A channels + B model + C flags) ----
   const [model, setModel] = useState(initialModel);
   const [flags, setFlags] = useState<FlagsForm>(DEFAULT_FLAGS);
+  // Enabled channel keys — Set for O(1) toggle, serialized to array at save.
+  // Seeded from the session prop so the panel renders coherent state before
+  // the load effect resolves; hub snapshot overrides once available.
+  const [channels, setChannels] = useState<Set<string>>(() => channelSet(s.channels));
   const [dirty, setDirty] = useState(false);
   const [loading, setLoading] = useState(true);
   // ---- F3 apply lifecycle ----
@@ -260,9 +263,16 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
   const after = useCallback((ms: number, fn: () => void) => {
     timersRef.current.push(setTimeout(fn, ms));
   }, []);
-  // Avoid setState after unmount (panel closes mid-request).
+  // Avoid setState after unmount (panel closes mid-request). Set the flag on
+  // each mount as well as clear on unmount — React strict-mode double-invokes
+  // effects in dev, which without the mount reset would leave mounted=false
+  // after the second attach and starve every subsequent state update (the
+  // loading spinner would never resolve, blocking the whole panel).
   const mounted = useRef(true);
-  useEffect(() => () => { mounted.current = false; clearTimers(); }, [clearTimers]);
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; clearTimers(); };
+  }, [clearTimers]);
 
   // Monotonic run id, bumped on every save. Each async lifecycle callback
   // captures the run id it belongs to and bails if a newer save superseded it —
@@ -286,6 +296,16 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
     setDirty(true);
   }, []);
 
+  const toggleChannel = useCallback((key: string) => {
+    setChannels(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+    setDirty(true);
+  }, []);
+
   // Load current config on mount. Falls back to session-derived defaults when
   // the hub tool isn't deployed (route returns mock with empty flags).
   useEffect(() => {
@@ -305,6 +325,13 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
           budget: numStr(f.budget),
           timeout: numStr(f.timeout),
         });
+        // Channels: prefer hub snapshot when present (authoritative). If the
+        // field is absent (older hub or contract not deployed), keep the
+        // session-derived seed so users aren't shown an empty list on nodes
+        // that clearly have channels wired.
+        if (Array.isArray(data?.channels)) {
+          setChannels(new Set(data.channels.filter((c: unknown): c is string => typeof c === 'string').map((c: string) => c.trim().toLowerCase())));
+        }
       } catch {
         // keep defaults — Save still works (mock path) so the UI is reviewable
       } finally {
@@ -382,6 +409,7 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
         budget: numOrUndef(flags.budget),
         timeout: numOrUndef(flags.timeout),
       },
+      channels: Array.from(channels).sort(),
     };
     let data: { ok?: boolean; error?: string; mock?: boolean; applied?: boolean; status?: string; applyId?: string } = {};
     try {
@@ -560,7 +588,7 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
               const btnLabel = phase === 'saving' ? '保存中…'
                 : phase === 'applying' ? '应用中…'
                 : loading ? '加载中…'
-                : dirty ? '保存模型 / flags'
+                : dirty ? '保存设置'
                 : '无改动';
               return (
                 <button
@@ -605,28 +633,41 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
             )}
           </section>
 
-          {/* A. 接入 Channel (P2 — display only) */}
+          {/* A. 接入 Channel — enable/disable editable; per-channel secrets
+              stay masked read-only (bot token / app secret / allowFrom live in
+              the node's local config.json, not on the wire from this UI). */}
           <section>
             <SectionTitle>接入 Channel</SectionTitle>
             <div className="space-y-2">
-              {CHANNELS.map(ch => (
-                <div key={ch.key} className={`rounded-lg border border-[#26262b] bg-[#161618] ${ch.roadmap ? 'opacity-50' : ''}`}>
-                  <label className="flex items-center justify-between px-3 py-2 text-sm text-gray-300 cursor-not-allowed">
-                    <span className="flex items-center gap-2">
-                      {ch.label}
-                      {ch.roadmap && <span className="text-[10px] px-1.5 py-0.5 rounded bg-[#2a2a30] text-gray-400">即将支持</span>}
-                    </span>
-                    <input type="checkbox" checked={!ch.roadmap && active.has(ch.key)} disabled readOnly className="h-4 w-4 accent-cyan-500 cursor-not-allowed" />
-                  </label>
-                  {!ch.roadmap && active.has(ch.key) && ch.fields.length > 0 && (
-                    <div className="px-3 pb-3 pt-1 space-y-2 border-t border-[#1c1c1f]">
-                      {ch.fields.map(f => <StubField key={f.label} label={f.label} value={f.value} />)}
-                    </div>
-                  )}
-                </div>
-              ))}
+              {CHANNELS.map(ch => {
+                const enabled = channels.has(ch.key);
+                const editable = !ch.roadmap && !loading;
+                return (
+                  <div key={ch.key} className={`rounded-lg border border-[#26262b] bg-[#161618] ${ch.roadmap ? 'opacity-50' : ''}`}>
+                    <label className={`flex items-center justify-between px-3 py-2 text-sm text-gray-300 ${editable ? 'cursor-pointer hover:bg-[#1a1a1d]' : 'cursor-not-allowed'}`}>
+                      <span className="flex items-center gap-2">
+                        {ch.label}
+                        {ch.roadmap && <span className="text-[10px] px-1.5 py-0.5 rounded bg-[#2a2a30] text-gray-400">即将支持</span>}
+                      </span>
+                      <input
+                        type="checkbox"
+                        checked={!ch.roadmap && enabled}
+                        onChange={editable ? () => toggleChannel(ch.key) : undefined}
+                        disabled={!editable}
+                        aria-label={`${editable ? '启用/关闭' : '（暂不可切换）'} ${ch.label}`}
+                        className={`h-4 w-4 accent-cyan-500 ${editable ? '' : 'cursor-not-allowed'}`}
+                      />
+                    </label>
+                    {!ch.roadmap && enabled && ch.fields.length > 0 && (
+                      <div className="px-3 pb-3 pt-1 space-y-2 border-t border-[#1c1c1f]">
+                        {ch.fields.map(f => <StubField key={f.label} label={f.label} value={f.value} />)}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
             </div>
-            <p className="mt-2 text-[11px] text-gray-600">Channel 绑定为下一阶段（P2）· 当前仅展示，暂未接后端</p>
+            <p className="mt-2 text-[11px] text-gray-600">勾选启用/关闭该 Channel；per-channel 的 token / secret / allowFrom 仍保存在节点本地 config.json，不在此处编辑。</p>
           </section>
 
           {/* D. 节点操作 (M1 lifecycle — restart wired to RFC-024 restart_node;