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

package/app/components/ProviderFormModal.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+/**
+ * Create/edit a model provider (RFC-028 P1 + #393 preset catalog). Single-step
+ * modal mirroring the CreateNodeWizard shell (escape-to-close, SVG ✕, cyan
+ * primary). The API key field is WRITE-ONLY: on edit of a provider that already
+ * has a key it shows a "•••• configured" placeholder and an empty value means
+ * "keep existing key"; the stored value is never fetched or displayed.
+ *
+ * #393 (Vincent UX): official providers (DeepSeek / MiniMax / GLM / Claude) are
+ * offered as PRESETS — picking one auto-fills the Anthropic-compatible base_url
+ * and turns the model field into a checkbox list of that provider's known
+ * models, so the operator only supplies an API key. "自定义" falls back to the
+ * manual base_url + comma-separated model entry for any other endpoint.
+ */
+
+export interface ProviderDraft {
+  provider_id?: string;
+  name: string;
+  type: string;
+  base_url: string;
+  models: string[];
+  enabled: boolean;
+  hasKey?: boolean;
+}
+
+// Backend (#308) currently supports only the `anthropic` vendor — which means
+// any Anthropic-COMPATIBLE endpoint (Claude api.anthropic.com, DeepSeek
+// api.deepseek.com/anthropic, MiniMax api.minimax.chat/anthropic, …) via a
+// custom base_url, not just Anthropic the company. Native OpenAI/Grok vendors
+// aren't wired yet → shown disabled so users can't pick an erroring option.
+const TYPES: { id: string; label: string; disabled?: boolean }[] = [
+  { id: 'anthropic', label: 'Anthropic 兼容端点（Claude / DeepSeek / MiniMax 等）' },
+  { id: 'openai-compatible', label: 'OpenAI-compatible（native，即将支持）', disabled: true },
+  { id: 'grok', label: 'Grok（native，即将支持）', disabled: true },
+];
+
+// #393 preset catalog. Each base_url is an Anthropic-compatible endpoint
+// (verified 401-reachable). `models` are sensible defaults the operator can
+// tick on/off; extras can still be typed. Keep `custom` last as the escape
+// hatch to the manual URL/model flow.
+interface ProviderPreset {
+  id: string;
+  label: string;
+  type: string;
+  base_url: string;
+  models: string[];
+  keyPlaceholder?: string;
+}
+const PRESETS: ProviderPreset[] = [
+  { id: 'deepseek', label: 'DeepSeek', type: 'anthropic', base_url: 'https://api.deepseek.com/anthropic', models: ['deepseek-v4-pro', 'deepseek-v4-flash'], keyPlaceholder: 'sk-…' },
+  { id: 'minimax', label: 'MiniMax', type: 'anthropic', base_url: 'https://api.minimaxi.com/anthropic', models: ['MiniMax-M2.7'], keyPlaceholder: 'MiniMax API key' },
+  { id: 'glm', label: '智谱 GLM', type: 'anthropic', base_url: 'https://open.bigmodel.cn/api/anthropic', models: ['glm-4.7', 'glm-5.2', 'glm-4.6'], keyPlaceholder: '{id}.{secret}' },
+  { id: 'claude', label: 'Claude（Anthropic 官方）', type: 'anthropic', base_url: 'https://api.anthropic.com', models: ['claude-opus-4-8', 'claude-sonnet-5', 'claude-haiku-4-5'], keyPlaceholder: 'sk-ant-…' },
+  { id: 'custom', label: '自定义（手动填 URL / 模型）', type: 'anthropic', base_url: '', models: [] },
+];
+
+function detectPreset(baseUrl?: string): string {
+  if (!baseUrl) return 'custom';
+  const hit = PRESETS.find(p => p.id !== 'custom' && p.base_url === baseUrl.trim());
+  return hit ? hit.id : 'custom';
+}
+
+type Phase = 'form' | 'saving' | 'done' | 'unconfirmed' | 'error';
+
+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';
+
+function parseModels(text: string): string[] {
+  return text.split(',').map(m => m.trim()).filter(Boolean);
+}
+
+export function ProviderFormModal({
+  initial,
+  onClose,
+  onSaved,
+}: {
+  initial?: ProviderDraft | null;
+  onClose: () => void;
+  onSaved?: () => void;
+}) {
+  const editing = !!initial?.provider_id;
+  const [presetId, setPresetId] = useState(() => detectPreset(initial?.base_url));
+  const [name, setName] = useState(initial?.name ?? '');
+  const [type, setType] = useState(initial?.type ?? TYPES[0].id);
+  const [baseUrl, setBaseUrl] = useState(initial?.base_url ?? '');
+  // Checked preset models (only used while a non-custom preset is selected).
+  const [checkedModels, setCheckedModels] = useState<string[]>(initial?.models ?? []);
+  // Free-text models — for `custom` it's the whole list, for a preset it's extras.
+  const [modelsText, setModelsText] = useState(() => {
+    const p = detectPreset(initial?.base_url);
+    if (p === 'custom') return (initial?.models ?? []).join(', ');
+    // extras = initial models not in the preset's default list
+    const preset = PRESETS.find(x => x.id === p);
+    const extras = (initial?.models ?? []).filter(m => !preset?.models.includes(m));
+    return extras.join(', ');
+  });
+  const [apiKey, setApiKey] = useState('');
+  const [enabled, setEnabled] = useState(initial?.enabled ?? true);
+  const [phase, setPhase] = useState<Phase>('form');
+  const [msg, setMsg] = useState('');
+
+  const preset = useMemo(() => PRESETS.find(p => p.id === presetId) ?? PRESETS[PRESETS.length - 1], [presetId]);
+  const isCustom = presetId === 'custom';
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && phase !== 'saving') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose, phase]);
+
+  function selectPreset(id: string) {
+    setPresetId(id);
+    const p = PRESETS.find(x => x.id === id);
+    if (!p) return;
+    if (id !== 'custom') {
+      setType(p.type);
+      setBaseUrl(p.base_url);
+      // default-check all preset models; keep any prior extras in the text box
+      setCheckedModels(p.models);
+      if (!name.trim() || PRESETS.some(x => x.label === name.trim())) setName(p.label);
+    } else {
+      setBaseUrl('');
+      setCheckedModels([]);
+    }
+  }
+
+  function toggleModel(m: string) {
+    setCheckedModels(prev => (prev.includes(m) ? prev.filter(x => x !== m) : [...prev, m]));
+  }
+
+  const finalModels = useMemo(() => {
+    const extras = parseModels(modelsText);
+    if (isCustom) return extras;
+    return Array.from(new Set([...checkedModels, ...extras]));
+  }, [isCustom, checkedModels, modelsText]);
+
+  const nameValid = name.trim().length > 0;
+  const urlValid = baseUrl.trim().length > 0;
+  // Secret-first (RFC-028): a provider can't be created without a vault key,
+  // so the API key is required on CREATE. On edit the key + vendor are
+  // immutable (update_provider patches name/base_url/models only).
+  const keyValid = editing || apiKey.trim().length > 0;
+  const modelsValid = finalModels.length > 0;
+  const canSave = nameValid && urlValid && keyValid && modelsValid && phase !== 'saving';
+
+  async function handleSave() {
+    setPhase('saving'); setMsg('');
+    const payload = {
+      ...(initial?.provider_id ? { provider_id: initial.provider_id } : {}),
+      name: name.trim(), type, base_url: baseUrl.trim(), models: finalModels, enabled,
+      ...(apiKey ? { apiKey } : {}),
+    };
+    try {
+      const r = await fetch('/api/anet/providers', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const data = await r.json().catch(() => ({}));
+      if (r.ok && data?.ok) {
+        setPhase('done'); onSaved?.();
+        // close shortly after success so the list refresh is visible
+        setTimeout(onClose, 350);
+      } else if (data?.unconfirmed) {
+        setPhase('unconfirmed');
+        setMsg(`后端 RFC-028 未就绪：${data?.error || '不可用'}（hub 需 #308 + 升级）`);
+      } else {
+        setPhase('error');
+        setMsg(data?.error ? `保存失败：${data.error}` : '保存失败');
+      }
+    } catch (e) {
+      setPhase('error');
+      setMsg(`保存失败：${e instanceof Error ? e.message : '网络错误'}`);
+    }
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/50 z-40" onClick={() => phase !== 'saving' && onClose()} aria-hidden />
+      <div
+        role="dialog"
+        aria-label={editing ? '编辑供应商' : '新增供应商'}
+        className="fixed left-1/2 top-1/2 z-50 max-h-[92vh] w-[min(94vw,480px)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border border-[#26262b] bg-[#161618] shadow-2xl"
+      >
+        <div className="sticky top-0 flex items-center justify-between border-b border-[#26262b] bg-[#161618] px-4 py-3">
+          <div className="text-sm font-semibold text-white">{editing ? '编辑供应商' : '新增供应商'}</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>
+
+        <div className="space-y-3 px-4 py-4">
+          {phase === 'unconfirmed' || phase === 'error' ? (
+            <div className={`rounded-md border px-3 py-2 text-xs ${phase === 'unconfirmed' ? 'border-amber-500/30 bg-amber-500/5 text-amber-300' : 'border-red-500/30 bg-red-500/5 text-red-300'}`}>
+              {msg}
+            </div>
+          ) : null}
+
+          {/* #393 preset provider picker (hidden while editing — base_url/vendor are immutable) */}
+          {!editing && (
+            <label className="block space-y-1">
+              <span className="text-xs text-gray-400">供应商 <span className="text-red-400/70">*</span></span>
+              <select value={presetId} onChange={e => selectPreset(e.target.value)} className={inputCls}>
+                {PRESETS.map(p => <option key={p.id} value={p.id}>{p.label}</option>)}
+              </select>
+              {!isCustom && <span className="text-[11px] text-gray-600">已选官方供应商：Base URL 自动填好，勾选模型 + 填 API Key 即可。</span>}
+            </label>
+          )}
+
+          <label className="block space-y-1">
+            <span className="text-xs text-gray-400">名称 <span className="text-red-400/70">*</span></span>
+            <input autoFocus value={name} onChange={e => setName(e.target.value)} placeholder="例如 DeepSeek-V4-Pro" className={inputCls} />
+          </label>
+
+          {/* 类型 only surfaces in custom / edit — presets imply anthropic. */}
+          {(isCustom || editing) && (
+            <label className="block space-y-1">
+              <span className="text-xs text-gray-400">类型{editing ? '（不可修改）' : ''}</span>
+              <select value={type} onChange={e => setType(e.target.value)} disabled={editing} className={`${inputCls} ${editing ? 'opacity-60 cursor-not-allowed' : ''}`}>
+                {TYPES.map(t => <option key={t.id} value={t.id} disabled={t.disabled}>{t.label}</option>)}
+              </select>
+            </label>
+          )}
+
+          <label className="block space-y-1">
+            <span className="text-xs text-gray-400">Base URL <span className="text-red-400/70">*</span>{!isCustom && !editing && <span className="text-gray-600">（已自动填充）</span>}</span>
+            <input
+              value={baseUrl}
+              onChange={e => setBaseUrl(e.target.value)}
+              placeholder="https://api.anthropic.com"
+              disabled={!isCustom && !editing}
+              className={`${inputCls} ${(!isCustom && !editing) ? 'opacity-60 cursor-not-allowed' : ''}`}
+            />
+            {isCustom && !editing && <span className="text-[11px] text-gray-600">Anthropic 兼容端点：Claude <span className="font-mono">api.anthropic.com</span> · DeepSeek <span className="font-mono">api.deepseek.com/anthropic</span> · MiniMax <span className="font-mono">api.minimax.chat/anthropic</span>。</span>}
+          </label>
+
+          {/* Models: preset → checkbox list + extras; custom → comma text. */}
+          {!isCustom && !editing ? (
+            <div className="block space-y-1">
+              <span className="text-xs text-gray-400">模型 <span className="text-red-400/70">*</span><span className="text-gray-600">（勾选，可多选）</span></span>
+              <div className="flex flex-wrap gap-2">
+                {preset.models.map(m => {
+                  const on = checkedModels.includes(m);
+                  return (
+                    <button
+                      type="button"
+                      key={m}
+                      onClick={() => toggleModel(m)}
+                      className={`rounded-md border px-2.5 py-1 text-xs font-mono transition-colors ${on ? 'border-cyan-600 bg-cyan-600/15 text-cyan-300' : 'border-[#26262b] bg-[#0e0e10] text-gray-400 hover:border-gray-600'}`}
+                    >
+                      {on ? '✓ ' : ''}{m}
+                    </button>
+                  );
+                })}
+              </div>
+              <input value={modelsText} onChange={e => setModelsText(e.target.value)} placeholder="其他模型（逗号分隔，可留空）" className={`${inputCls} mt-1`} />
+            </div>
+          ) : (
+            <label className="block space-y-1">
+              <span className="text-xs text-gray-400">模型（逗号分隔）{editing ? '' : <span className="text-red-400/70"> *</span>}</span>
+              <input value={modelsText} onChange={e => setModelsText(e.target.value)} placeholder="claude-sonnet-4-6, deepseek-chat" className={inputCls} />
+            </label>
+          )}
+
+          <label className="block space-y-1">
+            <span className="text-xs text-gray-400">API Key {editing ? <span className="text-gray-600">（不可在此修改）</span> : <span className="text-red-400/70">*</span>}</span>
+            <input
+              type="password"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder={editing ? '•••• configured（密钥库已存）' : (preset.keyPlaceholder ?? 'sk-…')}
+              className={`${inputCls} ${editing ? 'opacity-60 cursor-not-allowed' : ''}`}
+              autoComplete="off"
+              disabled={editing}
+            />
+            <span className="text-[11px] text-gray-600">{editing ? '密钥不可在此改；如需轮换 key 走单独的密钥库流程。' : '写入即存入密钥库，UI 不回显 key 值。'}</span>
+          </label>
+
+          <label className="flex items-center gap-2 pt-1">
+            <input type="checkbox" checked={enabled} onChange={e => setEnabled(e.target.checked)} className="accent-cyan-500" />
+            <span className="text-xs text-gray-300">启用</span>
+          </label>
+        </div>
+
+        <div className="sticky bottom-0 flex items-center justify-end gap-2 border-t border-[#26262b] bg-[#161618] px-4 py-3">
+          <button type="button" onClick={onClose} className="rounded-md px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200">取消</button>
+          <button
+            type="button"
+            disabled={!canSave}
+            onClick={handleSave}
+            className={`rounded-md px-4 py-1.5 text-sm font-medium ${canSave ? 'bg-cyan-600 text-white hover:bg-cyan-500' : 'bg-[#1c1c1f] text-gray-600 cursor-not-allowed'}`}
+          >
+            {phase === 'saving' ? '保存中…' : phase === 'done' ? '✓ 已保存' : editing ? '保存' : '新增'}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

package/app/components/ReachabilityMatrix.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Model × server reachability matrix (RFC-028 P2, aligned to real #308 schema).
+ * probe_provider_model is ASYNC: we DISPATCH a probe per (model × server) with
+ * bounded concurrency (~6), then POLL get_probe_results until every cell
+ * resolves (or times out). Cells: ok (green ✓ + latency) · auth_fail (amber) ·
+ * unreachable (red ✕) · incompatible (gray —) · pending (spinner).
+ * Rendered as a real <table> for screen-reader columns.
+ */
+
+interface Server { daemon_node_id: string; hostname: string }
+type CellStatus = 'pending' | 'ok' | 'auth_fail' | 'unreachable' | 'incompatible' | 'error';
+interface Cell { status: CellStatus; latency_ms?: number; reason?: string }
+
+// `tag` is the short inline label shown in the cell (visible without hover, so
+// a screenshot/glance reads cleanly); `label` is the longer a11y/tooltip term.
+const CELL_UI: Record<Exclude<CellStatus, 'pending'>, { glyph: string; cls: string; label: string; tag: string }> = {
+  ok:           { glyph: '✓', cls: 'text-green-400 border-green-500/30 bg-green-500/5', label: 'ok', tag: 'ok' },
+  auth_fail:    { glyph: '⚷', cls: 'text-amber-400 border-amber-500/30 bg-amber-500/5', label: 'auth', tag: '401' },
+  unreachable:  { glyph: '✕', cls: 'text-red-400 border-red-500/30 bg-red-500/5', label: 'unreachable', tag: 'down' },
+  incompatible: { glyph: '—', cls: 'text-gray-500 border-gray-600/20', label: 'incompatible', tag: 'n/a' },
+  error:        { glyph: '!', cls: 'text-red-400 border-red-500/30 bg-red-500/5', label: 'error', tag: 'err' },
+};
+
+// Legend entries shown under the matrix so cell glyphs are self-explanatory.
+const LEGEND: Array<Exclude<CellStatus, 'pending'>> = ['ok', 'auth_fail', 'unreachable', 'incompatible'];
+
+const CONCURRENCY = 6;
+const POLL_MS = 1500;
+const POLL_TIMEOUT_MS = 24000;
+
+async function pool<T>(items: T[], worker: (t: T) => Promise<void>) {
+  let i = 0;
+  await Promise.all(Array.from({ length: Math.min(CONCURRENCY, items.length) }, async () => {
+    while (i < items.length) { const idx = i++; await worker(items[idx]); }
+  }));
+}
+
+const norm = (s: string): CellStatus => {
+  if (s === 'ok' || s === 'auth_fail' || s === 'unreachable' || s === 'incompatible' || s === 'pending') return s;
+  if (s === 'timeout' || s === 'dns_fail' || s === 'conn_fail') return 'unreachable';
+  return 'error';
+};
+
+export function ReachabilityMatrix({ providerId, models }: { providerId?: string; models: string[] }) {
+  const [servers, setServers] = useState<Server[]>([]);
+  const [cells, setCells] = useState<Record<string, Cell>>({});
+  const [loading, setLoading] = useState(true);
+  const [running, setRunning] = useState(false);
+  const [unconfirmed, setUnconfirmed] = useState<string | null>(null);
+  const aliveRef = useRef(true);
+  useEffect(() => () => { aliveRef.current = false; }, []);
+
+  const key = (m: string, s: string) => `${m}@@${s}`;
+
+  const run = useCallback(async (srv: Server[]) => {
+    if (!models.length || !srv.length || !providerId) return;
+    setRunning(true); setUnconfirmed(null);
+    const pairs = models.flatMap(m => srv.map(s => ({ m, s })));
+    setCells(Object.fromEntries(pairs.map(({ m, s }) => [key(m, s.daemon_node_id), { status: 'pending' as CellStatus }])));
+
+    // 1) dispatch all probes (async — backend mints pending rows + doorbells daemons)
+    await pool(pairs, async ({ m, s }) => {
+      try {
+        const r = await fetch('/api/anet/providers/probe', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ provider_id: providerId, model_name: m, daemon_node_id: s.daemon_node_id }),
+        });
+        const d = await r.json().catch(() => ({}));
+        if (d?.unconfirmed && aliveRef.current) setUnconfirmed(d?.error || 'backend not available');
+      } catch { /* dispatch best-effort; poll surfaces the outcome */ }
+    });
+
+    // 2) poll get_probe_results until every cell resolves or we time out
+    const deadline = Date.now() + POLL_TIMEOUT_MS;
+    const want = new Set(pairs.map(({ m, s }) => key(m, s.daemon_node_id)));
+    while (aliveRef.current && Date.now() < deadline) {
+      await new Promise(res => setTimeout(res, POLL_MS));
+      if (!aliveRef.current) break;
+      try {
+        const r = await fetch(`/api/anet/providers/probe-results?provider_id=${encodeURIComponent(providerId)}`, { cache: 'no-store' });
+        const d = await r.json().catch(() => ({}));
+        if (d?.unconfirmed) { if (aliveRef.current) setUnconfirmed(d?.error || 'backend not available'); break; }
+        const rows = Array.isArray(d?.results) ? d.results : [];
+        // latest row per (model,daemon)
+        const latest = new Map<string, { status: string; latency_ms?: number; error_label?: string; probed_at?: number }>();
+        for (const row of rows) {
+          const k = key(String(row.model_name), String(row.daemon_node_id));
+          if (!want.has(k)) continue;
+          const prev = latest.get(k);
+          if (!prev || (row.probed_at || 0) >= (prev.probed_at || 0)) latest.set(k, row);
+        }
+        if (aliveRef.current) {
+          setCells(prev => {
+            const next = { ...prev };
+            for (const [k, row] of latest) next[k] = { status: norm(String(row.status)), latency_ms: row.latency_ms, reason: row.error_label };
+            return next;
+          });
+        }
+        // done when no cell is still pending
+        const allResolved = [...want].every(k => latest.get(k) && latest.get(k)!.status !== 'pending');
+        if (allResolved) break;
+      } catch { /* transient — keep polling */ }
+    }
+    if (aliveRef.current) setRunning(false);
+  }, [models, providerId]);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const r = await fetch('/api/anet/providers/probe', { cache: 'no-store' });
+        const d = await r.json().catch(() => ({}));
+        const srv: Server[] = Array.isArray(d?.servers) ? d.servers : [];
+        if (!alive) return;
+        setServers(srv); setLoading(false);
+        if (srv.length) run(srv);
+      } catch { if (alive) setLoading(false); }
+    })();
+    return () => { alive = false; };
+  }, [run]);
+
+  const total = models.length * servers.length;
+  const okCount = Object.values(cells).filter(c => c.status === 'ok').length;
+
+  if (loading) return <div className="px-3 py-3 text-[11px] text-gray-500">解析服务器集合…</div>;
+  if (unconfirmed) {
+    return <div className="mx-3 my-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-[11px] text-amber-300">
+      连通性 probe 后端尚未就绪：{unconfirmed}。矩阵 UI 已就位，待 hub 升级到含 RFC-028 接真 probe。
+    </div>;
+  }
+  if (!servers.length) return <div className="px-3 py-3 text-[11px] text-gray-500">未发现可达的 host_supervisor 服务器（probe 目标集为空）。</div>;
+
+  return (
+    <div className="border-t border-[#1c1c1f] px-3 py-3" data-reachability-matrix>
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[11px] text-gray-400">
+          可达矩阵 · <span className="tabular-nums text-gray-300">{okCount}/{total}</span> reachable
+          {running && <span className="ml-2 text-gray-600">probing…</span>}
+        </span>
+        <button type="button" onClick={() => run(servers)} disabled={running}
+          className="rounded border border-[#26262b] px-2 py-0.5 text-[11px] text-gray-400 hover:text-gray-200 disabled:opacity-50">重新测试</button>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="border-collapse text-[11px]">
+          <thead>
+            <tr>
+              <th className="px-2 py-1 text-left font-medium text-gray-500">model \\ server</th>
+              {servers.map(s => <th key={s.daemon_node_id} className="px-2 py-1 text-center font-mono font-normal text-gray-400" title={s.daemon_node_id}>{s.hostname}</th>)}
+            </tr>
+          </thead>
+          <tbody>
+            {models.map(m => (
+              <tr key={m}>
+                <td className="px-2 py-1 font-mono text-gray-300 whitespace-nowrap">{m}</td>
+                {servers.map(s => {
+                  const c = cells[key(m, s.daemon_node_id)];
+                  if (!c || c.status === 'pending') return <td key={s.daemon_node_id} className="px-2 py-1 text-center">
+                    <span className="inline-block h-3 w-3 animate-spin rounded-full border border-gray-600 border-t-transparent" aria-label="probing" />
+                  </td>;
+                  const ui = CELL_UI[c.status as Exclude<CellStatus, 'pending'>] || CELL_UI.error;
+                  return (
+                    <td key={s.daemon_node_id} className="px-2 py-1 text-center">
+                      <span className={`inline-flex min-w-[2.75rem] items-center justify-center gap-1 rounded border px-1.5 py-0.5 ${ui.cls}`}
+                        title={c.reason ? `${ui.label}: ${c.reason}` : ui.label} data-cell-status={c.status}>
+                        <span aria-hidden>{ui.glyph}</span>
+                        {c.status === 'ok'
+                          ? (c.latency_ms != null && <span className="tabular-nums text-[10px] opacity-80">{c.latency_ms}ms</span>)
+                          : <span className="text-[10px] opacity-80">{ui.tag}</span>}
+                      </span>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-2.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-gray-500">
+        {LEGEND.map(s => {
+          const ui = CELL_UI[s];
+          return (
+            <span key={s} className="inline-flex items-center gap-1">
+              <span className={`inline-flex h-3.5 w-3.5 items-center justify-center rounded border ${ui.cls}`} aria-hidden>{ui.glyph}</span>
+              {ui.label}
+            </span>
+          );
+        })}
+        <span className="text-gray-600">· 实时探测（模型→服务器真实请求往返）</span>
+      </div>
+    </div>
+  );
+}

package/app/components/Sidebar.tsx

@@ -18,6 +18,7 @@ const NAV_ITEMS = [
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
   { href: '/nodes', label: 'Nodes', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
   { href: '/servers', label: 'Servers', icon: 'M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v1A2.5 2.5 0 0117.5 10h-11A2.5 2.5 0 014 7.5v-1zM4 16.5A2.5 2.5 0 016.5 14h11a2.5 2.5 0 012.5 2.5v1a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-1zM7 7h.01M7 17h.01' },
+  { href: '/providers', label: 'Providers', icon: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z' },
   { href: '/admin', label: 'Admin', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
   { href: '/settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ];

package/app/components/TaskDrawer.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { timeAgo } from './utils';
+import Link from 'next/link';
 import { AliasAvatar } from './AliasAvatar';
 
 interface TaskDetail {

package/app/components/TopoGraph.tsx

@@ -149,14 +149,6 @@ const offlineRadius = 325;
  *  offline ring gets a half-step rotation so its nodes sit in the gaps
  *  between online ones). */
 function polarPoint(index: number, total: number, radius: number, rotateBy = 0) {
-  // Place node `index` of `total` evenly along an arc centred on 12 o'clock.
-  // `spread` = arc width: a half-circle (π) for ≤2 nodes so a pair sits left
-  // & right, otherwise ~320° (1.78π) which leaves a ~40° gap at the bottom
-  // so the ring reads as an open horseshoe rather than a closed loop.
-  // `start` backs off half the spread from straight-up (-π/2) so the arc is
-  // symmetric about the top. A lone node (total ≤ 1) just sits at the top;
-  // `rotateBy` is the caller's half-step offset (e.g. the offline ring nudges
-  // its nodes into the gaps between the online ones).
   const spread = total <= 2 ? Math.PI : Math.PI * 1.78;
   const start = -Math.PI / 2 - spread / 2;
   const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1) + rotateBy;
@@ -1453,6 +1445,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // rather than confirmed. This state drives a subtle hint ring on
   // hover so users see the affordance before committing the click.
   const [hoveredHub, setHoveredHub] = useState(false);
+  // R133: hover state for the recent-signal panel's "+N more flows"
+  // navigation footer. Drives the on-hover opacity boost + underline
+  // that signals interactivity, mirroring the hoveredHub idiom above.
+  const [hoveredRecentMore, setHoveredRecentMore] = useState(false);
   // Round 346 / Loop: minimap-container hover affordance. The minimap
   // is a click-target (role=button at line ~7810, recenter-on-click +
   // Enter→resetView) but pre-R346 nothing visually changed on hover —

package/app/components/UserBar.tsx

@@ -26,6 +26,11 @@ interface AuthState {
 export function UserBar() {
   const { setNetworkId } = useNetworkId();
   const [auth, setAuth] = useState<AuthState>({ user: null, networks: [], currentNetwork: '', token: '' });
+  const [showLogin, setShowLogin] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [loginPending, setLoginPending] = useState(false);
 
   // Try to restore from sessionStorage
   useEffect(() => {
@@ -35,6 +40,38 @@ export function UserBar() {
     }
   }, []);
 
+  const doAuth = async (action: 'login' | 'register') => {
+    if (!username.trim() || !password.trim()) return;
+    setLoginPending(true);
+    setLoginError('');
+    try {
+      const res = await fetch('/api/hub/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action, username, password }),
+      });
+      const data = await res.json();
+      if (!data.ok) { setLoginError(data.error || 'Failed'); setLoginPending(false); return; }
+
+      // Fetch user details
+      const meRes = await fetch(`/api/hub/auth?token=${data.token}&endpoint=/api/auth/me`);
+      const meData = await meRes.json();
+
+      const newAuth: AuthState = {
+        user: data.user,
+        networks: meData.networks || [],
+        currentNetwork: meData.current_network?.network_id || meData.networks?.[0]?.network_id || '',
+        token: data.token,
+      };
+      setAuth(newAuth);
+      sessionStorage.setItem('anet_v3_auth', JSON.stringify(newAuth));
+      setShowLogin(false);
+      setUsername('');
+      setPassword('');
+    } catch { setLoginError('Connection failed'); }
+    setLoginPending(false);
+  };
+
   const logout = () => {
     setAuth({ user: null, networks: [], currentNetwork: '', token: '' });
     sessionStorage.removeItem('anet_v3_auth');

package/app/components/types.ts

@@ -19,6 +19,10 @@ export interface Session {
   // commhub-server 0.8.1-preview.0; null on older nodes / older hubs.
   model?: string | null;
   runtime?: string | null;
+  // RFC-027 PR2 — lifecycle_state. Sourced from /api/nodes (preview.12+);
+  // merged into Session client-side via useNodeLifecycle hook. Absent →
+  // treated as 'active' so older sessions/hubs don't break the menu.
+  lifecycle_state?: string | null;
 }
 
 export interface Health {
@@ -31,6 +35,13 @@ export interface Health {
   auth?: string;
 }
 
+export interface InboxMessage {
+  id: string;
+  content: string;
+  from_session: string;
+  created_at: string;
+}
+
 export interface AnetConfig {
   path: string;
   exists: boolean;

package/app/lib/chat-unread.ts

@@ -95,12 +95,6 @@ export function useChatUnread() {
   );
   const [readVersion, setReadVersion] = useState(0);
 
-  // Bump readVersion whenever the read-map changes so the readMap useMemo
-  // below recomputes. Two listeners, by design — not redundant:
-  //  • UNREAD_EVENT (dispatched by writeStoredMap in THIS tab): the native
-  //    'storage' event never fires in the tab that made the write, so this
-  //    is what refreshes the current tab's badges right after markChatRead.
-  //  • 'storage': covers the cross-tab case (another tab marked a chat read).
   useEffect(() => {
     const onStorage = (event: StorageEvent) => {
       if (event.key && event.key !== storageKey(networkId)) return;