@yancyyu/openhermit 1.6.41 → 1.6.43

package/src/renderer/components/system-manager/SystemManagerView.tsx

@@ -1,26 +1,36 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import '@xterm/xterm/css/xterm.css';
-
-import { FitAddon } from '@xterm/addon-fit';
-import { WebLinksAddon } from '@xterm/addon-web-links';
-import { Terminal } from '@xterm/xterm';
 import { api } from '@renderer/api';
 import { useStore } from '@renderer/store';
 import { Button } from '@renderer/components/ui/button';
-import { Input } from '@renderer/components/ui/input';
-import { SYSTEM_MANAGER_DISPLAY_NAME } from '@shared/types/team';
+import {
+  buildCapabilityPackCommandSuggestions,
+  collectSlashSuggestionAliases,
+} from '@renderer/utils/slashCommandRegistry';
+import { buildWorkflowCommandSuggestion } from '@renderer/utils/workflowCommandSuggestions';
+import { SYSTEM_MANAGER_DISPLAY_NAME, SYSTEM_MANAGER_TEAM_NAME } from '@shared/types/team';
 import type {
   SystemManagerConfig,
   SystemManagerStatus,
   WorkflowPromptSummary,
 } from '@shared/types/systemManager';
-import { Loader2, RefreshCw, TerminalSquare } from 'lucide-react';
+import { Settings2, TerminalSquare } from 'lucide-react';
+
+import type { MentionSuggestion } from '@renderer/types/mention';
 
-import { FolderBrowser } from './FolderBrowser';
+import { LoopConsolePanel } from '../team/loop-console/LoopConsolePanel';
+import { RuntimeConfigDialog } from '../team/dialogs/RuntimeConfigDialog';
+
+import type {
+  CcSession,
+  ResolvedTeamMember,
+  TeamTaskWithKanban,
+  TeamViewSnapshot,
+} from '@shared/types';
 
 interface SystemManagerViewProps {
   isPaneFocused?: boolean;
+  isActive?: boolean;
 }
 
 function formatPathForTitle(pathValue: string): string {
@@ -34,110 +44,52 @@ function joinPath(basePath: string, childPath: string): string {
   return `${trimmedBase}/${childPath}`;
 }
 
+const EMPTY_ADMIN_TASKS: TeamTaskWithKanban[] = [];
+const EMPTY_CAPABILITY_PACKS = [] as const;
+const NOOP_FETCH_CAPABILITY_PACKS = () => Promise.resolve();
+
+function buildAdminLoopMember(teamData: TeamViewSnapshot | null): ResolvedTeamMember[] {
+  const lead = teamData?.members[0];
+  return [
+    {
+      name: lead?.name ?? SYSTEM_MANAGER_DISPLAY_NAME,
+      agentId: lead?.agentId,
+      status: teamData?.isAlive ? 'active' : 'idle',
+      currentTaskId: null,
+      taskCount: teamData?.tasks.length ?? 0,
+      lastActiveAt: null,
+      messageCount: 0,
+      color: 'slate',
+      agentType: 'admin-loop',
+      role: 'Workspace loop manager',
+      workflow: lead?.workflow,
+      providerId: lead?.providerId,
+      model: lead?.model,
+      effort: lead?.effort,
+      cwd: teamData?.config.projectPath,
+      gitBranch: lead?.gitBranch,
+      runtimeAdvisory: lead?.runtimeAdvisory,
+    },
+  ];
+}
+
 export const SystemManagerView = ({
   isPaneFocused: _isPaneFocused = false,
+  isActive: _isActive = true,
 }: SystemManagerViewProps): React.JSX.Element => {
-  const terminalHostRef = useRef<HTMLDivElement | null>(null);
-  const terminalRef = useRef<Terminal | null>(null);
-  const fitAddonRef = useRef<FitAddon | null>(null);
-  const ptyIdRef = useRef<string | null>(null);
-  const autoStartedRef = useRef(false);
-  const startClaudeRef = useRef<((workDirOverride?: string) => Promise<void>) | null>(null);
-
   const [status, setStatus] = useState<SystemManagerStatus | null>(null);
-  const [config, setConfig] = useState<SystemManagerConfig | null>(null);
-  const [workDirInput, setWorkDirInput] = useState('');
   const [workflowPrompts, setWorkflowPrompts] = useState<WorkflowPromptSummary[]>([]);
   const [warnings, setWarnings] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
-  const [starting, setStarting] = useState(false);
-  const [running, setRunning] = useState(false);
+  const [adminTeamData, setAdminTeamData] = useState<TeamViewSnapshot | null>(null);
+  const [adminSessions, setAdminSessions] = useState<CcSession[]>([]);
+  const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>({});
+  const [bindingDialogOpen, setBindingDialogOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const fetchTeams = useStore((state) => state.fetchTeams);
-
-  const writeTerminalLine = useCallback((line: string) => {
-    terminalRef.current?.writeln(`\x1b[90m${line}\x1b[0m`);
-  }, []);
-
-  const fitTerminal = useCallback(() => {
-    try {
-      fitAddonRef.current?.fit();
-      if (ptyIdRef.current && terminalRef.current) {
-        api.terminal.resize(ptyIdRef.current, terminalRef.current.cols, terminalRef.current.rows);
-      }
-    } catch {
-      // xterm fit can throw when the element is not measurable yet.
-    }
-  }, []);
-
-  useEffect(() => {
-    const host = terminalHostRef.current;
-    if (!host) return;
-
-    const term = new Terminal({
-      cursorBlink: true,
-      convertEol: true,
-      fontFamily: 'JetBrains Mono, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-      fontSize: 13,
-      lineHeight: 1.28,
-      theme: {
-        background: 'var(--color-surface)',
-        foreground: 'var(--color-text)',
-        cursor: 'var(--color-text)',
-        selectionBackground: 'var(--color-border-emphasis)',
-        black: 'var(--color-surface-sidebar)',
-        red: '#f87171',
-        green: '#86efac',
-        yellow: '#fde68a',
-        blue: 'var(--color-accent)',
-        magenta: '#d8b4fe',
-        cyan: '#818cf8',
-        white: 'var(--color-text)',
-      },
-    });
-    const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
-    term.loadAddon(new WebLinksAddon());
-    term.open(host);
-    terminalRef.current = term;
-    fitAddonRef.current = fitAddon;
-    fitTerminal();
-    term.writeln('\x1b[90m# Hermit 控制台 · 本地 Claude Code PTY\x1b[0m');
-    term.writeln('\x1b[90m# 点击 Start Claude 等价于在当前目录运行 claude\x1b[0m');
-    term.writeln('');
-
-    const dataDispose = api.terminal.onData((_event, ptyId, data) => {
-      if (ptyId === ptyIdRef.current) term.write(data);
-    });
-    const exitDispose = api.terminal.onExit((_event, ptyId, exitCode) => {
-      if (ptyId === ptyIdRef.current) {
-        setRunning(false);
-        ptyIdRef.current = null;
-        term.writeln(`\r\n\x1b[90m[claude exited with code ${exitCode}]\x1b[0m`);
-      }
-    });
-    const inputDispose = term.onData((data) => {
-      if (ptyIdRef.current) api.terminal.write(ptyIdRef.current, data);
-    });
-    const resizeObserver = new ResizeObserver(() => fitTerminal());
-    resizeObserver.observe(host);
-
-    return () => {
-      dataDispose();
-      exitDispose();
-      inputDispose.dispose();
-      resizeObserver.disconnect();
-      if (ptyIdRef.current) {
-        void api.terminal.kill(ptyIdRef.current).catch(() => {
-          // Component is unmounting; there is no safe UI surface for this lifecycle error.
-        });
-      }
-      term.dispose();
-      terminalRef.current = null;
-      fitAddonRef.current = null;
-      ptyIdRef.current = null;
-    };
-  }, [fitTerminal]);
+  const capabilityPacks = useStore((state) => state.capabilityPacks ?? EMPTY_CAPABILITY_PACKS);
+  const fetchCapabilityPacks = useStore(
+    (state) => state.fetchCapabilityPacks ?? NOOP_FETCH_CAPABILITY_PACKS
+  );
 
   const load = useCallback(async (): Promise<SystemManagerConfig | null> => {
     setLoading(true);
@@ -146,33 +98,46 @@ export const SystemManagerView = ({
       const [nextStatus, nextConfig] = await Promise.all([
         api.systemManager.getStatus(),
         api.systemManager.getConfig(),
+        fetchCapabilityPacks().then(() => undefined),
+      ]);
+      await api.teams.ensureSystemManager();
+      const [nextTeamData, nextSessions] = await Promise.all([
+        api.teams.getData(SYSTEM_MANAGER_TEAM_NAME),
+        api.teams.getTeamSessions(SYSTEM_MANAGER_TEAM_NAME),
       ]);
       setStatus(nextStatus);
-      setConfig(nextConfig);
-      setWorkDirInput(nextConfig.selectedWorkDir);
+      setAdminTeamData(nextTeamData);
+      setAdminSessions(nextSessions);
       const candidateFolders = [
+        nextStatus.globalHermitWorkflowFolder,
+        joinPath(nextStatus.adminWorkDir, '.claude/commands'),
         nextConfig.workflowFolder,
-        joinPath(nextConfig.selectedWorkDir, 'workflows'),
+        joinPath(nextStatus.adminWorkDir, 'workflows'),
       ].filter((folder): folder is string => Boolean(folder));
-      let loadedWorkflow = false;
+      const seenFolders = new Set<string>();
+      const seenPrompts = new Set<string>();
+      const nextPrompts: WorkflowPromptSummary[] = [];
+      const nextWarnings: string[] = [];
       for (const folder of candidateFolders) {
+        if (seenFolders.has(folder)) continue;
+        seenFolders.add(folder);
         try {
           const workflowResult = await api.systemManager.listWorkflowPrompts(folder);
-          setConfig((current) =>
-            current ? { ...current, workflowFolder: workflowResult.folder } : current
-          );
-          setWorkflowPrompts(workflowResult.prompts);
-          setWarnings(workflowResult.warnings);
-          loadedWorkflow = true;
-          break;
+          for (const prompt of workflowResult.prompts) {
+            const basename = prompt.filename.replace(/\.[^.]+$/, '');
+            const key = prompt.commandName ?? basename;
+            if (seenPrompts.has(key) || seenPrompts.has(basename)) continue;
+            seenPrompts.add(key);
+            seenPrompts.add(basename);
+            nextPrompts.push(prompt);
+          }
+          nextWarnings.push(...workflowResult.warnings);
         } catch {
           // Common commands are optional; missing folders should not interrupt opening the console.
         }
       }
-      if (!loadedWorkflow) {
-        setWorkflowPrompts([]);
-        setWarnings([]);
-      }
+      setWorkflowPrompts(nextPrompts);
+      setWarnings(nextWarnings);
       return nextConfig;
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -180,101 +145,23 @@ export const SystemManagerView = ({
     } finally {
       setLoading(false);
     }
-  }, []);
-
-  const stopClaude = useCallback(async (): Promise<boolean> => {
-    const ptyId = ptyIdRef.current;
-    if (!ptyId) {
-      setRunning(false);
-      return true;
-    }
-
-    try {
-      await api.terminal.kill(ptyId);
-      if (ptyIdRef.current === ptyId) {
-        ptyIdRef.current = null;
-        setRunning(false);
-        writeTerminalLine('[stopped]');
-      }
-      return true;
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      setError(message);
-      writeTerminalLine(`[failed to stop claude] ${message}`);
-      return false;
-    }
-  }, [writeTerminalLine]);
-
-  const startClaude = useCallback(async (workDirOverride?: string) => {
-    if (starting) return;
-    setStarting(true);
-    setError(null);
-    try {
-      const stopped = await stopClaude();
-      if (!stopped) return;
-      const nextConfig = await api.systemManager.updateConfig({
-        selectedWorkDir: workDirOverride ?? workDirInput,
-      });
-      setConfig(nextConfig);
-      void fetchTeams();
-      terminalRef.current?.clear();
-      writeTerminalLine(`# cd ${nextConfig.selectedWorkDir}`);
-      writeTerminalLine('$ claude');
-      const ptyId = await api.terminal.spawn({
-        cwd: nextConfig.selectedWorkDir,
-        cols: terminalRef.current?.cols ?? 120,
-        rows: terminalRef.current?.rows ?? 34,
-      });
-      ptyIdRef.current = ptyId;
-      setRunning(true);
-      terminalRef.current?.focus();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      setError(message);
-      writeTerminalLine(`[failed to start claude] ${message}`);
-    } finally {
-      setStarting(false);
-    }
-  }, [fetchTeams, starting, stopClaude, workDirInput, writeTerminalLine]);
-
-  useEffect(() => {
-    startClaudeRef.current = startClaude;
-  }, [startClaude]);
+  }, [fetchCapabilityPacks]);
 
   useEffect(() => {
-    void load().then((nextConfig) => {
-      if (nextConfig && !autoStartedRef.current) {
-        autoStartedRef.current = true;
-        void startClaudeRef.current?.(nextConfig.selectedWorkDir);
-      }
-    });
+    void load();
   }, [load]);
 
-  const refreshConsole = useCallback(async () => {
-    await load();
-    await startClaude(workDirInput || undefined);
-  }, [load, startClaude, workDirInput]);
-
-  const runWorkflowPrompt = useCallback(
-    async (prompt: WorkflowPromptSummary) => {
-      if (!config?.workflowFolder) return;
-      if (!ptyIdRef.current) {
-        await startClaude();
-      }
-      const ptyId = ptyIdRef.current;
-      if (!ptyId) return;
-      const result = await api.systemManager.readWorkflowPrompt(config.workflowFolder, prompt.id);
-      writeTerminalLine(`$ # workflow: ${prompt.label}`);
-      api.terminal.write(ptyId, `${result.content}\r`);
-    },
-    [config?.workflowFolder, startClaude, writeTerminalLine]
-  );
-
-  const titlePath = useMemo(
-    () =>
-      formatPathForTitle(config?.selectedWorkDir ?? (workDirInput || status?.defaultWorkDir || '')),
-    [config?.selectedWorkDir, status?.defaultWorkDir, workDirInput]
-  );
+  const adminWorkflowCommandSuggestions = useMemo(() => {
+    const workflowSuggestions = [...workflowPrompts]
+      .sort((a, b) => (a.order ?? 999) - (b.order ?? 999))
+      .map((prompt) => buildWorkflowCommandSuggestion(prompt, 'admin-workflow'));
+    const packSuggestions = buildCapabilityPackCommandSuggestions(capabilityPacks, 'admin-loop', {
+      forceNamespacedAliases: collectSlashSuggestionAliases(workflowSuggestions),
+    });
+    return [...workflowSuggestions, ...packSuggestions];
+  }, [capabilityPacks, workflowPrompts]);
+  const adminMembers = useMemo(() => buildAdminLoopMember(adminTeamData), [adminTeamData]);
+  const adminTasks = adminTeamData?.tasks ?? EMPTY_ADMIN_TASKS;
 
   return (
     <div className="flex size-full flex-col bg-[var(--color-surface)] p-4 text-[var(--color-text)]">
@@ -289,63 +176,90 @@ export const SystemManagerView = ({
             <TerminalSquare size={14} className="text-[var(--color-text-muted)]" />
             {SYSTEM_MANAGER_DISPLAY_NAME}
           </div>
-          <Input
-            value={workDirInput}
-            onChange={(event) => setWorkDirInput(event.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') void refreshConsole(); }}
-            className="h-8 min-w-[220px] flex-1 border-[var(--color-border)] bg-[var(--color-surface)] font-mono text-xs text-[var(--color-text)]"
-            placeholder={titlePath || '工作目录'}
-          />
-          <FolderBrowser value={workDirInput} onChange={setWorkDirInput} />
-          <div className="shrink-0 text-[11px] text-[var(--color-text-muted)]">
-            {running ? 'claude running' : (status?.localStatus ?? 'starting')}
+          <div className="ml-auto shrink-0 text-[11px] text-[var(--color-text-muted)]">
+            {status?.localStatus ?? 'ready'}
           </div>
           <Button
             size="sm"
             variant="outline"
             className="h-8 shrink-0 border-[var(--color-border)]"
-            disabled={starting}
-            onClick={() => void refreshConsole()}
+            onClick={() => setBindingDialogOpen(true)}
           >
-            {starting ? <Loader2 size={13} className="animate-spin" /> : <RefreshCw size={13} />}
-            刷新
+            <Settings2 size={13} />
+            运行时
           </Button>
         </div>
 
-        <div className="min-h-0 flex-1 bg-[var(--color-surface)] p-2">
-          <div
-            ref={terminalHostRef}
-            className="size-full overflow-hidden rounded-lg bg-[var(--color-surface)]"
-          />
-        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface)] p-4">
+          <div className="mx-auto flex w-full max-w-5xl flex-col gap-4">
+            <div className="rounded-xl border border-indigo-500/20 bg-[var(--color-surface-raised)] p-4 shadow-sm">
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="font-mono text-sm text-[var(--color-text)]">helm 指令台</div>
+                  <p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--color-text-secondary)]">
+                    全局巡检、诊断、复盘、治理和改进提案。团队消息、runtime 注入和派单在 Team Loop
+                    指令台。
+                  </p>
+                </div>
+                <span className="rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 text-[10px] text-[var(--color-text-muted)]">
+                  {workflowPrompts.length} workflows
+                </span>
+              </div>
+              <div className="mt-3 grid gap-2 text-[11px] text-[var(--color-text-muted)] sm:grid-cols-3">
+                <div className="rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-3 py-2">
+                  作用域：{formatPathForTitle(status?.adminWorkDir ?? '—')}
+                </div>
+                <div className="rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-3 py-2">
+                  命令源：全局 Hermit / 团队 `.claude/commands` / workflows
+                </div>
+                <div className="rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-3 py-2">
+                  默认边界：只读/报告/提案优先
+                </div>
+              </div>
+            </div>
 
-        {(workflowPrompts.length || warnings.length || error || loading) && (
-          <div className="border-t border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3">
-            {workflowPrompts.length ? (
-              <div className="flex flex-wrap gap-2">
-                {workflowPrompts.map((prompt) => (
-                  <button
-                    key={prompt.id}
-                    type="button"
-                    className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-3 py-1 font-mono text-[11px] text-[var(--color-text-secondary)] hover:border-[var(--color-border-emphasis)] hover:text-[var(--color-text)]"
-                    disabled={starting}
-                    onClick={() => void runWorkflowPrompt(prompt)}
-                  >
-                    {prompt.label}
-                  </button>
-                ))}
+            {(warnings.length || error || loading) && (
+              <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-3 py-2 text-xs">
+                {warnings.length ? (
+                  <div className="text-amber-300">{warnings.join('；')}</div>
+                ) : null}
+                {error ? <div className="text-red-300">{error}</div> : null}
+                {loading ? (
+                  <div className="text-[var(--color-text-muted)]">加载 Helm Loop 配置中...</div>
+                ) : null}
+              </div>
+            )}
+
+            <LoopConsolePanel
+              teamName={SYSTEM_MANAGER_TEAM_NAME}
+              members={adminMembers}
+              tasks={adminTasks}
+              isTeamAlive={adminTeamData?.isAlive}
+              isProvisioning={loading}
+              currentLeadSessionId={adminTeamData?.config.leadSessionId}
+              leadProjectPath={adminTeamData?.config.projectPath}
+              sessions={adminSessions}
+              commandSuggestions={adminWorkflowCommandSuggestions}
+              slashCommandMode="session"
+              pendingRepliesByMember={pendingRepliesByMember}
+              onPendingReplyChange={setPendingRepliesByMember}
+            />
+
+            {!workflowPrompts.length && !loading ? (
+              <div className="rounded-xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-5 text-center text-sm text-[var(--color-text-muted)]">
+                当前没有可用 Helm Loop workflow。Hermit 默认命令会预装到
+                `~/.claude/commands/hermit`；团队自定义命令可添加到 `.claude/commands` 或
+                workflows。
               </div>
-            ) : null}
-            {warnings.length ? (
-              <div className="mt-2 text-xs text-amber-300">{warnings.join('；')}</div>
-            ) : null}
-            {error ? <div className="mt-2 text-xs text-red-300">{error}</div> : null}
-            {loading ? (
-              <div className="mt-2 text-xs text-[var(--color-text-muted)]">加载控制台配置中...</div>
             ) : null}
           </div>
-        )}
+        </div>
       </div>
+      <RuntimeConfigDialog
+        open={bindingDialogOpen}
+        teamName={SYSTEM_MANAGER_TEAM_NAME}
+        onClose={() => setBindingDialogOpen(false)}
+      />
     </div>
   );
 };

package/src/renderer/components/tasks/TasksView.tsx

@@ -3,7 +3,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cn } from '@renderer/lib/utils';
 import { useStore } from '@renderer/store';
 import { deriveTaskDisplayId } from '@shared/utils/taskIdentity';
-import { CheckCircle2, ClipboardList, PlayCircle, Calendar, Columns3, RefreshCw } from 'lucide-react';
+import {
+  CheckCircle2,
+  ClipboardList,
+  PlayCircle,
+  Calendar,
+  Columns3,
+  RefreshCw,
+} from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { KanbanColumn } from '../team/kanban/KanbanColumn';
@@ -15,7 +22,7 @@ type TasksSubTab = 'overview' | 'schedules';
 type OverviewStatus = Extract<TeamTaskStatus, 'pending' | 'in_progress' | 'completed'>;
 
 const SUB_TABS: { id: TasksSubTab; label: string; icon: React.ReactNode }[] = [
-  { id: 'overview', label: '任务总览', icon: <Columns3 size={13} /> },
+  { id: 'overview', label: 'Loop 任务总览', icon: <Columns3 size={13} /> },
   { id: 'schedules', label: '定时任务', icon: <Calendar size={13} /> },
 ];
 
@@ -174,7 +181,7 @@ const TaskOverviewPool = (): React.JSX.Element => {
   if (globalTasksLoading && !globalTasksInitialized) {
     return (
       <div className="flex h-full items-center justify-center text-sm text-[var(--color-text-muted)]">
-        加载团队任务…
+        加载 Loop 任务…
       </div>
     );
   }
@@ -191,7 +198,7 @@ const TaskOverviewPool = (): React.JSX.Element => {
           onChange={(e) => setTeamFilter(e.target.value)}
           className={selectCls}
         >
-          <option value="all">全部团队</option>
+          <option value="all">全部 Loop workspace</option>
           {teamOptions.map(([teamName, displayName]) => (
             <option key={teamName} value={teamName}>
               {displayName}
@@ -242,38 +249,51 @@ const TaskOverviewPool = (): React.JSX.Element => {
         </button>
       </div>
 
-      {/* Kanban columns — reuse team kanban styling */}
-      <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden pb-6">
-        <div className="grid min-w-[900px] grid-cols-3 items-start gap-3">
-          {COLUMNS.map((column) => {
-            const tasks = grouped.get(column.id) ?? [];
-            return (
-              <KanbanColumn
-                key={column.id}
-                title={column.title}
-                count={tasks.length}
-                icon={column.icon}
-                headerBg={column.headerBg}
-                bodyBg={column.bodyBg}
-              >
-                {tasks.length === 0 ? (
-                  <div className="py-6 text-center text-[11px] text-[var(--color-text-muted)] opacity-40">
-                    No tasks
-                  </div>
-                ) : (
-                  tasks.map((task) => (
-                    <GlobalOverviewTaskCard
-                      key={`${task.teamName}:${task.id}`}
-                      task={task}
-                      onOpen={() => openGlobalTaskDetail(task.teamName, task.id)}
-                    />
-                  ))
-                )}
-              </KanbanColumn>
-            );
-          })}
+      {overviewTasks.length === 0 ? (
+        // Genuinely empty task bus (not just hidden by filters) — show an
+        // explanatory empty state so a fresh user / QA reader doesn't mistake
+        // the light content for a rendering bug (QA F-3).
+        <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
+          <ClipboardList size={28} className="text-[var(--color-text-muted)] opacity-30" />
+          <p className="text-sm text-[var(--color-text-muted)]">暂无 Loop 任务</p>
+          <p className="max-w-sm text-[11px] leading-5 text-[var(--color-text-muted)] opacity-60">
+            各团队看板上 pending / in_progress / completed 的任务会自动汇总到这里。
+          </p>
         </div>
-      </div>
+      ) : (
+        /* Kanban columns — reuse team kanban styling */
+        <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden pb-6">
+          <div className="grid min-w-[900px] grid-cols-3 items-start gap-3">
+            {COLUMNS.map((column) => {
+              const tasks = grouped.get(column.id) ?? [];
+              return (
+                <KanbanColumn
+                  key={column.id}
+                  title={column.title}
+                  count={tasks.length}
+                  icon={column.icon}
+                  headerBg={column.headerBg}
+                  bodyBg={column.bodyBg}
+                >
+                  {tasks.length === 0 ? (
+                    <div className="py-6 text-center text-[11px] text-[var(--color-text-muted)] opacity-40">
+                      No tasks
+                    </div>
+                  ) : (
+                    tasks.map((task) => (
+                      <GlobalOverviewTaskCard
+                        key={`${task.teamName}:${task.id}`}
+                        task={task}
+                        onOpen={() => openGlobalTaskDetail(task.teamName, task.id)}
+                      />
+                    ))
+                  )}
+                </KanbanColumn>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -302,7 +322,10 @@ const GlobalOverviewTaskCard = ({
         <span className="mt-0.5 shrink-0 text-[9px] tabular-nums text-[var(--color-text-muted)] opacity-50">
           #{task.displayId ?? deriveTaskDisplayId(task.id)}
         </span>
-        <h5 className="min-w-0 flex-1 line-clamp-2 text-[11px] font-medium" style={{ color: 'var(--color-text)' }}>
+        <h5
+          className="line-clamp-2 min-w-0 flex-1 text-[11px] font-medium"
+          style={{ color: 'var(--color-text)' }}
+        >
           {task.subject}
         </h5>
       </div>
@@ -311,7 +334,10 @@ const GlobalOverviewTaskCard = ({
           {dispatchFrom} → {dispatchTo}
         </span>
       ) : null}
-      <div className="mt-1.5 flex items-center gap-1.5 text-[10px]" style={{ color: 'var(--color-text-muted)' }}>
+      <div
+        className="mt-1.5 flex items-center gap-1.5 text-[10px]"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
         <span>{task.teamDisplayName}</span>
         <span style={{ opacity: 0.3 }}>·</span>
         <span>{ownerLabel}</span>