@sleep2agi/agent-network-dashboard 0.6.3-preview.56 → 0.6.3-preview.57

package/app/requirements/page.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState, Suspense } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { EmptyState } from '../components/EmptyState';
+
+/**
+ * Requirements board — #1633 (read-only first slice).
+ *
+ * Why this page exists: the dashboard only ever showed dispatch tasks
+ * (/tasks = who asked whom). The requirement board — 需求池 / 进行中 /
+ * 完成, tags, owner vs agent owner, checklist progress — is what people
+ * actually work from in the client. This is the read half; the write half
+ * is #1634.
+ */
+
+interface RequirementPerson { kind: 'user' | 'node'; id: string; alias?: string }
+interface Requirement {
+  id: string;
+  seq: number;
+  name: string;
+  column: 'pool' | 'doing' | 'done' | 'abandoned';
+  priority: 'high' | 'normal' | 'low' | 'lowest';
+  due?: string;
+  tags?: string[];
+  owner?: RequirementPerson | null;
+  agent_owner?: RequirementPerson | null;
+  project_id?: string | null;
+  checklist_count?: { total: number; done: number };
+  children?: { total: number; done: number };
+  updatedAt?: string;
+  has_description?: boolean;
+}
+
+const COLUMNS: { key: Requirement['column'] | ''; label: string }[] = [
+  { key: '', label: 'All' },
+  { key: 'pool', label: '需求池' },
+  { key: 'doing', label: '进行中' },
+  { key: 'done', label: '完成' },
+  { key: 'abandoned', label: '已放弃' },
+];
+
+const COLUMN_CHIP: Record<string, string> = {
+  pool: 'bg-amber-500/10 text-amber-300 border-amber-500/20',
+  doing: 'bg-blue-500/10 text-blue-300 border-blue-500/20',
+  done: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20',
+  abandoned: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
+};
+
+function priorityClass(priority: string) {
+  if (priority === 'high') return 'text-red-400';
+  if (priority === 'low' || priority === 'lowest') return 'text-gray-600';
+  return 'text-gray-400';
+}
+
+function personLabel(p?: RequirementPerson | null) {
+  if (!p) return '—';
+  return p.alias || p.id;
+}
+
+function dueLabel(due?: string) {
+  if (!due) return '—';
+  const day = due.slice(0, 10);
+  const overdue = day < new Date().toISOString().slice(0, 10);
+  return overdue ? <span className="text-red-400">{day}</span> : <span className="text-gray-400">{day}</span>;
+}
+
+function RequirementsContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [rows, setRows] = useState<Requirement[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [needsLogin, setNeedsLogin] = useState(false);
+
+  const status = searchParams.get('status') || '';
+  const tag = searchParams.get('tag') || '';
+  const q = searchParams.get('q') || '';
+  const [tagInput, setTagInput] = useState(tag);
+  const [qInput, setQInput] = useState(q);
+
+  const setParam = useCallback((patch: Record<string, string>) => {
+    const next = new URLSearchParams(searchParams.toString());
+    for (const [key, value] of Object.entries(patch)) {
+      if (value) next.set(key, value);
+      else next.delete(key);
+    }
+    const qs = next.toString();
+    router.replace(qs ? `/requirements?${qs}` : '/requirements', { scroll: false });
+  }, [router, searchParams]);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const params = new URLSearchParams();
+      if (status) params.set('status', status);
+      if (tag) params.set('tag', tag);
+      if (q) params.set('q', q);
+      params.set('limit', '200');
+      const res = await fetch(`/api/hub/requirements?${params.toString()}`, { cache: 'no-store' });
+      if (res.status === 401) { setNeedsLogin(true); setRows([]); return; }
+      const data = await res.json();
+      if (!res.ok || !data.ok) {
+        setError(data?.error || `hub_${res.status}`);
+        setRows([]);
+        return;
+      }
+      setNeedsLogin(false);
+      setRows(data.requirements || []);
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'fetch failed');
+      setRows([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [status, tag, q]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const counts = useMemo(() => {
+    const out: Record<string, number> = {};
+    for (const r of rows) out[r.column] = (out[r.column] || 0) + 1;
+    return out;
+  }, [rows]);
+
+  return (
+    <div className="min-h-screen bg-[var(--bg)] text-gray-200">
+      <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
+        <div className="mb-5 flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <h1 className="text-lg font-semibold text-white">Requirements</h1>
+            <p className="mt-1 text-xs text-gray-500">
+              需求池 / 进行中 / 完成 —— 只读视图（写面见 #1634）。任务派单在 <Link href="/tasks" className="text-blue-400 hover:underline">Tasks</Link>。
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => load()}
+            className="rounded-lg border border-[var(--border)] px-3 py-1.5 text-xs text-gray-400 hover:text-gray-200"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {/* Status tabs */}
+        <div className="mb-4 flex flex-wrap items-center gap-1.5">
+          {COLUMNS.map(col => {
+            const count = col.key ? counts[col.key] || 0 : rows.length;
+            const active = status === col.key;
+            return (
+              <button
+                key={col.key || 'all'}
+                type="button"
+                onClick={() => setParam({ status: col.key })}
+                className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
+                  active
+                    ? 'border-blue-500/30 bg-blue-500/10 text-blue-300'
+                    : 'border-transparent text-gray-500 hover:bg-[var(--border)]/60 hover:text-gray-300'
+                }`}
+              >
+                {col.label}
+                <span className="ml-1.5 text-[10px] tabular-nums opacity-70">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Text filters */}
+        <div className="mb-4 flex flex-wrap items-center gap-2">
+          <div className="flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] px-2.5 py-1.5 focus-within:border-blue-500/40">
+            <span className="text-[10px] uppercase tracking-wide text-gray-600">Search</span>
+            <input
+              value={qInput}
+              onChange={e => setQInput(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') setParam({ q: qInput }); }}
+              onBlur={() => { if (qInput !== q) setParam({ q: qInput }); }}
+              placeholder="标题 / 人 / 标签"
+              className="w-40 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none sm:w-56"
+            />
+          </div>
+          <div className="flex items-center gap-1.5 rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] px-2.5 py-1.5 focus-within:border-blue-500/40">
+            <span className="text-[10px] uppercase tracking-wide text-gray-600">Tag</span>
+            <input
+              value={tagInput}
+              onChange={e => setTagInput(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') setParam({ tag: tagInput }); }}
+              onBlur={() => { if (tagInput !== tag) setParam({ tag: tagInput }); }}
+              placeholder="exact tag"
+              className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+            />
+          </div>
+          {(status || tag || q) && (
+            <button
+              type="button"
+              onClick={() => { setTagInput(''); setQInput(''); setParam({ status: '', tag: '', q: '' }); }}
+              className="rounded-lg border border-gray-700 px-2.5 py-1.5 text-[11px] text-gray-500 hover:border-gray-600 hover:text-gray-200"
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+
+        {needsLogin && (
+          <div className="mb-4 rounded-lg border border-amber-500/20 bg-amber-500/5 px-4 py-3 text-sm text-amber-300">
+            会话已过期，<Link href="/login" className="underline">重新登录</Link> 后再看需求。
+          </div>
+        )}
+        {error && !needsLogin && (
+          <div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/5 px-4 py-3 text-sm text-red-300">
+            读取失败：{error}
+            <button type="button" onClick={() => load()} className="ml-3 underline">重试</button>
+          </div>
+        )}
+
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="h-12 animate-pulse rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)]" />
+            ))}
+          </div>
+        ) : rows.length === 0 ? (
+          <EmptyState
+            variant="generic"
+            title={status || tag || q ? '没有符合筛选的需求' : '需求池是空的'}
+            sub={status || tag || q ? '清掉筛选再试，或换一个标签。' : '客户端建一条需求后，这里就会出现。'}
+            cta={status || tag || q ? { label: '清空筛选', onClick: () => setParam({ status: '', tag: '', q: '' }) } : undefined}
+          />
+        ) : (
+          <ul className="divide-y divide-[var(--border)] overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg-secondary)]">
+            {rows.map(row => {
+              const chk = row.checklist_count;
+              const kids = row.children;
+              return (
+                <li key={row.id} className="hover:bg-[var(--bg-secondary)]/60">
+                  <Link href={`/requirements/${row.id}`} className="flex flex-wrap items-center gap-x-3 gap-y-1.5 px-3 py-2.5 sm:px-4">
+                    <span className="w-12 shrink-0 text-[11px] tabular-nums text-gray-600">#{row.seq}</span>
+                    <span className={`shrink-0 rounded border px-1.5 py-0.5 text-[10px] ${COLUMN_CHIP[row.column] || COLUMN_CHIP.abandoned}`}>
+                      {row.column}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate text-sm text-gray-100">{row.name}</span>
+                    {(row.tags || []).slice(0, 3).map(t => (
+                      <span key={t} className="hidden shrink-0 rounded bg-[var(--bg-elevated)] px-1.5 py-0.5 text-[10px] text-gray-400 sm:inline">
+                        {t}
+                      </span>
+                    ))}
+                    <span className={`shrink-0 text-[11px] ${priorityClass(row.priority)}`}>{row.priority}</span>
+                    <span className="hidden w-24 shrink-0 truncate text-[11px] text-gray-500 sm:inline">{personLabel(row.agent_owner)}</span>
+                    <span className="w-20 shrink-0 text-right text-[11px]">{dueLabel(row.due)}</span>
+                    {chk && chk.total > 0 && (
+                      <span className="hidden shrink-0 text-[10px] tabular-nums text-gray-500 sm:inline">
+                        ✓ {chk.done}/{chk.total}
+                      </span>
+                    )}
+                    {kids && kids.total > 0 && (
+                      <span className="hidden shrink-0 text-[10px] tabular-nums text-gray-500 md:inline">
+                        ↳ {kids.done}/{kids.total}
+                      </span>
+                    )}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function RequirementsPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-[var(--bg)]" />}>
+      <RequirementsContent />
+    </Suspense>
+  );
+}

package/app/scheduled-tasks/page.tsx

@@ -3,8 +3,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNetworkId } from '../lib/network-context';
 import { pinyinMatch, usePinyinReady } from '../lib/pinyin-match';
+import { isHubTimeStale, relativeAgo } from '../lib/time';
 
-type NodeRow = { node_id: string; alias?: string | null; node_name?: string | null; lifecycle_state?: string | null };
+type NodeRow = { node_id: string; alias?: string | null; node_name?: string | null; lifecycle_state?: string | null; updated_at?: string | null };
 
 const nodeLabel = (n: NodeRow) => `${n.alias} · ${n.node_id.slice(0, 12)}`;
 
@@ -49,6 +50,15 @@ function NodePicker({ nodes, value, onChange }: {
     };
   }, [open]);
 
+  // 陈旧的排到后面。原因见 app/lib/time.ts 的 NODE_STALE_MS 注释:
+  // 生产上约三分之二的条目是几个月前的死会话,而 lifecycle_state 全是 "active",
+  // 所以不排序的话,一屏里最先看到的往往都是幽灵。
+  // 只降权不隐藏 —— 给一个临时掉线的节点排任务是合法操作,藏起来会让人以为节点没了。
+  const ordered = useMemo(() => {
+    const stale = (n: NodeRow) => (isHubTimeStale(n.updated_at) ? 1 : 0);
+    return [...matches].sort((a, b) => stale(a) - stale(b));
+  }, [matches]);
+
   return (
     <div className="relative mt-1" ref={boxRef}>
       <input
@@ -67,7 +77,7 @@ function NodePicker({ nodes, value, onChange }: {
         >
           {matches.length === 0 ? (
             <div className="px-3 py-2 text-sm text-[var(--fg-dim)]">无匹配节点</div>
-          ) : matches.map(n => (
+          ) : ordered.map(n => (
             <button
               key={n.node_id}
               type="button"
@@ -79,7 +89,23 @@ function NodePicker({ nodes, value, onChange }: {
                 n.node_id === value ? 'text-[var(--hl)]' : 'text-[var(--fg)]'
               } hover:bg-[var(--hover-tint)]`}
             >
-              {nodeLabel(n)}
+              <span className="flex items-baseline justify-between gap-3">
+                <span className={isHubTimeStale(n.updated_at) ? 'text-[var(--fg-dim)]' : ''}>
+                  {nodeLabel(n)}
+                </span>
+                {/* 最后活动时间。这是 /api/nodes 里唯一能分辨死活的字段 ——
+                    lifecycle_state 对三个月没动的节点同样返回 "active"(#751)。 */}
+                {relativeAgo(n.updated_at) && (
+                  <span
+                    data-testid="schedule-node-option-lastseen"
+                    className={`shrink-0 text-xs tabular-nums ${
+                      isHubTimeStale(n.updated_at) ? 'text-[var(--fg-dim)]' : 'text-[var(--fg)]'
+                    }`}
+                  >
+                    {relativeAgo(n.updated_at)}
+                  </span>
+                )}
+              </span>
             </button>
           ))}
         </div>
@@ -268,6 +294,11 @@ export default function ScheduledTasksPage() {
   };
 
   const mutate = async (row: ScheduleRow, action: 'toggle' | 'run' | 'cancel') => {
+    // Cancel goes through POST /cancel, not DELETE. Some reverse proxies
+    // strip or 405 DELETE, which surfaces as HTML from the proxy layer — and
+    // that HTML then blew up `await res.json()` with "Unexpected token <",
+    // hiding the actual failure from the user. See dispatch task 08342434.
+    if (action === 'cancel' && typeof window !== 'undefined' && !window.confirm('确定取消这个定时计划？取消后不能恢复。')) return;
     setBusy(true); setError('');
     try {
       let path = `/api/hub/scheduled-tasks/${encodeURIComponent(row.schedule_id)}${query}`;
@@ -275,10 +306,55 @@ export default function ScheduledTasksPage() {
       if (action === 'run') {
         path = `/api/hub/scheduled-tasks/${encodeURIComponent(row.schedule_id)}/run-now${query}`;
         init = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' };
-      } else if (action === 'cancel') init = { method: 'DELETE' };
-      else init = { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ revision: row.revision, status: row.status === 'active' ? 'paused' : 'active' }) };
-      const res = await fetch(path, init);
-      const data = await res.json();
+      } else if (action === 'cancel') {
+        path = `/api/hub/scheduled-tasks/${encodeURIComponent(row.schedule_id)}/cancel${query}`;
+        init = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' };
+      } else init = { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ revision: row.revision, status: row.status === 'active' ? 'paused' : 'active' }) };
+      // Parse as text first so an empty body or an HTML error page (from a
+      // misbehaving proxy) doesn't throw "Unexpected token <" before we ever
+      // look at the status code. Empty body ⇒ {}; JSON parse errors surface
+      // with the status + first chunk of the body so we know which layer
+      // returned the non-JSON.
+      type MutateResponse = { error?: string; message?: string; ok?: boolean };
+      // 🔴 变量名保持 `res` / `raw`。tests/scheduled-tasks-module.test.mjs:30 那条
+      //    契约检查断言的是源码里出现 `await res.text()` 和 `JSON.parse(raw)` ——
+      //    我第一版把它们改名成 r / body，行为完全一样，但那条检查当场转红。
+      //    正确的处理是改回名字，不是去放宽那条检查:它断言的东西是对的，
+      //    我改的只是无关的命名。
+      const send = async (p: string, i: RequestInit) => {
+        const res = await fetch(p, i);
+        const raw = await res.text();
+        let parsed: MutateResponse = {};
+        if (raw.trim().length > 0) {
+          try { parsed = JSON.parse(raw) as MutateResponse; }
+          catch {
+            if (!res.ok) throw new Error(`HTTP ${res.status}: ${raw.slice(0, 120)}`);
+          }
+        }
+        return { res, data: parsed };
+      };
+
+      let { res, data } = await send(path, init);
+
+      // 🔴 老 hub 上没有 POST /cancel，回落到 DELETE。
+      //
+      //   服务端那条 POST 路由是 2026-08-18 才进 main 的（commit 40872732
+      //   "accept POST /cancel alongside DELETE, both idempotent"）。而当天
+      //   已发布的两个通道都早于它：
+      //     commhub-server@latest  = 0.8.8            发布 2026-06-24
+      //     commhub-server@preview = 0.9.0-preview.29 发布 2026-08-12
+      //   （核过已发布产物：里面的 `/cancel` 全是注释和标识符里的子串，没有路由。）
+      //
+      //   所以只发 POST 不留兜底，会让"取消"在**今天所有已部署的 hub 上**直接坏掉。
+      //   回落只认 404/405（路由不存在 / 方法不允许），不认 5xx —— 5xx 说明路由在、
+      //   但服务端出错了，那时重试 DELETE 只会掩盖真正的失败。
+      //
+      //   两条路径都是幂等的（见上面那个 commit 的标题），所以即使 POST 其实已经
+      //   生效、只是因为别的原因返回了 404，再发一次 DELETE 也不会造成二次伤害。
+      if (action === 'cancel' && (res.status === 404 || res.status === 405)) {
+        const legacyPath = `/api/hub/scheduled-tasks/${encodeURIComponent(row.schedule_id)}${query}`;
+        ({ res, data } = await send(legacyPath, { method: 'DELETE' }));
+      }
       if (res.status === 409 && data.error === 'revision_conflict') {
         await load(); setError('计划已在其他设备更新，已刷新最新内容，请重试。'); return;
       }
@@ -308,7 +384,7 @@ export default function ScheduledTasksPage() {
           <h1 className="text-2xl font-bold text-[var(--fg)] lg:ml-0 ml-10">定时任务</h1>
           <p className="mt-1 text-sm text-[var(--fg-dim)]">由 Hub 统一调度；节点只接收普通任务，离线时自动排队。</p>
         </div>
-        <button onClick={openCreate} className="rounded-lg bg-[var(--hl)] px-4 py-2 text-sm font-semibold text-[var(--bg)] hover:opacity-90">
+        <button type="button" onClick={openCreate} className="rounded-lg bg-[var(--hl)] px-4 py-2 text-sm font-semibold text-[var(--bg)] hover:opacity-90">
           {showForm && !editing ? '收起' : '新建计划'}
         </button>
       </div>
@@ -335,17 +411,26 @@ export default function ScheduledTasksPage() {
         </section>
       )}
 
-      {loading ? <div className="py-20 text-center text-[var(--fg-dim)]">加载中…</div> : schedules.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-[var(--border)] py-20 text-center text-[var(--fg-dim)]">还没有 Hub 定时任务</div>
-      ) : <div className="space-y-3">{schedules.map(row => (
+      {loading ? <div className="py-20 text-center text-[var(--fg-dim)]">加载中…</div> : (() => {
+        // Cancelled schedules are terminal — hide them from the default view.
+        // Server still stores history for the audit trail, but the list is
+        // meant for "what's on the calendar going forward", not "what ever
+        // existed". Users who need the paper trail can consult run history
+        // per schedule (record button); a dedicated show-cancelled toggle
+        // was out of scope for this fix.
+        const visible = schedules.filter(row => row.status !== 'cancelled');
+        return visible.length === 0 ? (
+          <div className="rounded-xl border border-dashed border-[var(--border)] py-20 text-center text-[var(--fg-dim)]">还没有 Hub 定时任务</div>
+        ) : <div className="space-y-3">{visible.map(row => (
         <section key={row.schedule_id} className="rounded-xl border border-[var(--border)] bg-[var(--bg-secondary)] p-5">
           <div className="flex flex-wrap items-start justify-between gap-4">
             <div className="min-w-0 flex-1"><div className="flex items-center gap-2"><h2 className="font-semibold text-[var(--fg)]">{row.name}</h2><span className={`rounded-full bg-[var(--hover-tint)] px-2 py-0.5 text-xs ${row.status === 'active' ? 'text-[var(--success)]' : row.status === 'paused' ? 'text-[var(--warning)]' : 'text-[var(--fg-dim)]'}`}>{row.status}</span></div><p className="mt-1 text-sm text-[var(--hl)]">{row.target_alias}</p><p className="mt-2 line-clamp-2 text-sm text-[var(--fg-muted)]">{row.task_content}</p><p className="mt-3 text-xs text-[var(--fg-dim)]">{describeSchedule(row.schedule, row.timezone)} · {describeMisfire(row.misfire_policy)} · 下次 {formatTime(row.next_run_at)} · 上次 {formatTime(row.last_run_at)}</p></div>
-            <div className="flex flex-wrap gap-2"><button disabled={busy || !['active','paused'].includes(row.status)} onClick={() => openEdit(row)} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">编辑</button><button disabled={busy || !['active','paused'].includes(row.status)} onClick={() => mutate(row, 'toggle')} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">{row.status === 'active' ? '暂停' : '恢复'}</button><button disabled={busy || row.status === 'cancelled'} onClick={() => mutate(row, 'run')} className="rounded-md border border-[var(--hl)] px-3 py-1.5 text-xs text-[var(--hl)]">立即执行</button><button onClick={() => openHistory(row)} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">记录</button><button disabled={busy || row.status === 'cancelled'} onClick={() => mutate(row, 'cancel')} className="rounded-md border border-[var(--danger)] px-3 py-1.5 text-xs text-[var(--danger)]">取消</button></div>
+            <div className="flex flex-wrap gap-2"><button type="button" disabled={busy || !['active','paused'].includes(row.status)} onClick={() => openEdit(row)} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">编辑</button><button type="button" disabled={busy || !['active','paused'].includes(row.status)} onClick={() => mutate(row, 'toggle')} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">{row.status === 'active' ? '暂停' : '恢复'}</button><button type="button" disabled={busy || row.status === 'cancelled'} onClick={() => mutate(row, 'run')} className="rounded-md border border-[var(--hl)] px-3 py-1.5 text-xs text-[var(--hl)]">立即执行</button><button type="button" onClick={() => openHistory(row)} className="rounded-md border border-[var(--border)] px-3 py-1.5 text-xs text-[var(--fg-muted)]">记录</button><button type="button" disabled={busy || row.status === 'cancelled'} onClick={() => mutate(row, 'cancel')} className="rounded-md border border-[var(--danger)] px-3 py-1.5 text-xs text-[var(--danger)]">取消</button></div>
           </div>
           {historyFor === row.schedule_id && <div className="mt-4 overflow-x-auto border-t border-[var(--border)] pt-4"><table className="w-full text-left text-xs"><thead className="text-[var(--fg-dim)]"><tr><th className="pb-2">计划时间</th><th>状态</th><th>Task ID</th><th>错误</th></tr></thead><tbody>{runs.map(run => <tr key={run.run_id} className="border-t border-[var(--col-hairline)] text-[var(--fg-muted)]"><td className="py-2">{formatTime(run.scheduled_for)}</td><td>{run.status}</td><td className="font-mono">{run.task_id?.slice(0, 12) || '—'}</td><td className="text-[var(--danger)]">{run.error_code || '—'}</td></tr>)}</tbody></table>{runs.length === 0 && <p className="text-[var(--fg-dim)]">暂无执行记录</p>}</div>}
         </section>
-      ))}</div>}
+      ))}</div>;
+      })()}
     </main>
   );
 }