@steerable/agent-shell-web 0.6.15

package/src/components/chat/TaskOutcomeCards.tsx

@@ -0,0 +1,128 @@
+/**
+ * 后台任务终态通知卡（消息列尾部）。
+ *
+ * 后台任务跑在主对话之外，结果只有在模型自己调 `task_status` / `task_result`
+ * 时才会被提起——模型不调就没人提，失败原因要经「角标 → 任务弹层 → 任务名」
+ * 三层才看得到。本卡片把终态带回用户正在看的地方：说清哪个任务结束了、成败
+ * 与一句摘要，再给一个直达推理过程的入口。
+ *
+ * 只渲染本次挂载期间到达终态的任务（`useChatTasks` 的 `finished`），「忽略」
+ * 不写库。worktree 的合并/丢弃仍归任务弹层——卡片只通知，不重复那套操作。
+ */
+import { LuCheck, LuGitBranch, LuX } from 'react-icons/lu';
+import type { LocalTask } from '@/lib/local-api';
+
+/** 同时挤在消息列尾部的卡片上限；更多的只留一行汇总指回角标。 */
+const MAX_CARDS = 3;
+
+export interface TaskOutcomeCardsProps {
+  /** 刚跑完的任务，新→旧。 */
+  tasks: LocalTask[];
+  /** 在右侧栏打开该任务的推理过程。 */
+  onInspect: (task: LocalTask) => void;
+  /** 隐藏这条通知（本次挂载内）。 */
+  onDismiss: (taskId: string) => void;
+}
+
+export function TaskOutcomeCards({ tasks, onInspect, onDismiss }: TaskOutcomeCardsProps) {
+  if (tasks.length === 0) return null;
+  const shown = tasks.slice(0, MAX_CARDS);
+  const overflow = tasks.length - shown.length;
+
+  return (
+    <div className="mt-1.5 space-y-1.5" data-testid="task-outcome-cards">
+      {shown.map((task) => (
+        <TaskOutcomeCard
+          key={task.id}
+          task={task}
+          onInspect={() => onInspect(task)}
+          onDismiss={() => onDismiss(task.id)}
+        />
+      ))}
+      {overflow > 0 && (
+        <div className="px-1 text-[11px] text-agent-muted-foreground">
+          另有 {overflow} 个后台任务已结束 — 见标题栏的任务按钮。
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TaskOutcomeCard({
+  task,
+  onInspect,
+  onDismiss,
+}: {
+  task: LocalTask;
+  onInspect: () => void;
+  onDismiss: () => void;
+}) {
+  const failed = task.status === 'failed';
+  const detail = failed ? task.error : task.answer;
+  const needsReview = task.worktreeState === 'pending';
+
+  return (
+    <div
+      role="status"
+      data-task-outcome={task.id}
+      data-status={task.status}
+      className={`flex items-start gap-2 rounded-agent-md border px-3 py-2 text-xs ${
+        failed
+          ? 'border-red-400/40 bg-red-400/10'
+          : 'border-emerald-400/40 bg-emerald-400/10'
+      }`}
+    >
+      {failed ? (
+        <LuX className="mt-0.5 h-4 w-4 shrink-0 text-red-600 dark:text-red-400" />
+      ) : (
+        <LuCheck className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
+      )}
+
+      <div className="min-w-0 flex-1">
+        <div
+          className={
+            failed
+              ? 'text-red-700 dark:text-red-300'
+              : 'text-emerald-700 dark:text-emerald-300'
+          }
+        >
+          {failed ? '后台任务失败：' : '后台任务已完成：'}
+          <span className="font-medium">{task.task}</span>
+        </div>
+        {detail && (
+          <div className="mt-1 line-clamp-3 whitespace-pre-wrap text-agent-muted-foreground">
+            {detail}
+          </div>
+        )}
+        {needsReview && (
+          <div className="mt-1 flex items-center gap-1 text-agent-muted-foreground">
+            <LuGitBranch className="h-3 w-3 shrink-0" />
+            <span className="min-w-0 truncate font-mono text-[10px]">
+              {task.worktreeBranch}
+            </span>
+            <span>待合并 — 在标题栏的任务按钮里处理。</span>
+          </div>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="rounded px-1.5 py-0.5 text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+        >
+          忽略
+        </button>
+        <button
+          type="button"
+          onClick={onInspect}
+          className="rounded-full bg-agent-foreground px-3 py-1 font-medium text-agent-canvas transition hover:opacity-90"
+        >
+          查看过程
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default TaskOutcomeCards;

package/src/components/chat/TaskPanelModal.test.tsx

@@ -0,0 +1,198 @@
+/**
+ * TaskPanelModal 的接线契约（4.6a/4.6c）：
+ *   - 打开时经 localBackend 拉 GET /chats/:id/tasks，按状态渲染
+ *     运行中/已完成/失败徽标；
+ *   - 展开行显示 answer / error；
+ *   - worktree 任务（worktreeState=pending 且已完成）显示「合并到主仓」
+ *     /「丢弃」，点击走 POST /tasks/:id/merge|discard 并刷新；
+ *   - 主进程 task-updated 推送触发重拉；
+ *   - Escape 关闭。
+ */
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { LocalTask } from '@/lib/local-api';
+import { TaskPanelModal } from './TaskPanelModal';
+
+afterEach(() => {
+  cleanup();
+  delete (window as { electron?: unknown }).electron;
+});
+
+function makeTask(overrides: Partial<LocalTask> = {}): LocalTask {
+  return {
+    id: 'task-1',
+    chatId: 'chat_1',
+    task: '统计仓库行数',
+    status: 'completed',
+    answer: '共 42 行。',
+    error: null,
+    worktreePath: null,
+    worktreeBranch: null,
+    worktreeState: null,
+    createdAt: '2026-09-08T01:00:00.000Z',
+    updatedAt: '2026-09-08T01:01:00.000Z',
+    ...overrides,
+  };
+}
+
+function installBridge(tasks: LocalTask[]) {
+  const request = vi.fn((input: { method: string; path: string; body?: unknown }) => {
+    if (input.method === 'GET' && input.path.endsWith('/tasks')) {
+      return Promise.resolve({ tasks });
+    }
+    if (input.method === 'POST' && /\/tasks\/[^/]+\/(merge|discard)$/.test(input.path)) {
+      return Promise.resolve({ success: true, task: tasks[0] });
+    }
+    return Promise.reject(new Error(`unexpected request: ${input.method} ${input.path}`));
+  });
+  const taskUpdatedListeners: Array<
+    (payload: { chatId: string; taskId: string; status: string }) => void
+  > = [];
+  (window as { electron?: unknown }).electron = {
+    localBackend: { request },
+    onTaskUpdated: (
+      cb: (payload: { chatId: string; taskId: string; status: string }) => void,
+    ) => {
+      taskUpdatedListeners.push(cb);
+      return () => {
+        const i = taskUpdatedListeners.indexOf(cb);
+        if (i >= 0) taskUpdatedListeners.splice(i, 1);
+      };
+    },
+  };
+  return {
+    request,
+    emitTaskUpdated: (payload: { chatId: string; taskId: string; status: string }) => {
+      for (const cb of taskUpdatedListeners) cb(payload);
+    },
+  };
+}
+
+describe('TaskPanelModal', () => {
+  it('渲染任务列表：状态徽标 + 任务文本', async () => {
+    installBridge([
+      makeTask({ id: 't1', task: '跑测试', status: 'running', answer: null }),
+      makeTask({ id: 't2', task: '写文档', status: 'completed' }),
+      makeTask({ id: 't3', task: '改代码', status: 'failed', error: 'sidecar 断开' }),
+    ]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} />);
+
+    await waitFor(() => expect(screen.queryByText('正在加载任务…')).toBeNull());
+    const rows = screen
+      .getAllByRole('button', { hidden: true })
+      .map((b) => b.closest('[data-task-row]'))
+      .filter((el): el is HTMLElement => el !== null);
+    const uniqueRows = [...new Set(rows)];
+    expect(uniqueRows).toHaveLength(3);
+    expect(uniqueRows.map((r) => r.getAttribute('data-status'))).toEqual([
+      'running',
+      'completed',
+      'failed',
+    ]);
+    expect(screen.getByText('跑测试')).toBeTruthy();
+    expect(screen.getByText(/3 个任务，1 个运行中/)).toBeTruthy();
+  });
+
+  it('空态文案', async () => {
+    installBridge([]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} />);
+    await waitFor(() => screen.getByText(/暂无后台任务/));
+  });
+
+  it('展开行显示答案；worktree pending 任务显示合并/丢弃并走对应路由', async () => {
+    const { request } = installBridge([
+      makeTask({
+        id: 'wt-1',
+        worktreePath: '/repo/.steerable/worktrees/demo',
+        worktreeBranch: 'steerable/demo',
+        worktreeState: 'pending',
+      }),
+    ]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} />);
+    await waitFor(() => screen.getByText('统计仓库行数'));
+
+    // 展开 → 答案 + worktree 操作。
+    fireEvent.click(screen.getByRole('button', { name: '展开' }));
+    await waitFor(() => screen.getByText('共 42 行。'));
+    expect(screen.getByText('steerable/demo')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('合并到主仓'));
+    await waitFor(() =>
+      expect(request).toHaveBeenCalledWith({
+        method: 'POST',
+        path: '/api/v2/tasks/wt-1/merge',
+      }),
+    );
+    // 合并后重拉列表。
+    await waitFor(() =>
+      expect(
+        request.mock.calls.filter(
+          ([input]) =>
+            (input as { method: string }).method === 'GET' &&
+            (input as { path: string }).path.endsWith('/tasks'),
+        ).length,
+      ).toBeGreaterThanOrEqual(2),
+    );
+  });
+
+  it('丢弃走 discard 路由', async () => {
+    const { request } = installBridge([
+      makeTask({
+        id: 'wt-2',
+        worktreePath: '/repo/.steerable/worktrees/x',
+        worktreeBranch: 'steerable/x',
+        worktreeState: 'pending',
+      }),
+    ]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} />);
+    await waitFor(() => screen.getByText('统计仓库行数'));
+
+    fireEvent.click(screen.getByRole('button', { name: '展开' }));
+    fireEvent.click(await screen.findByText('丢弃'));
+    await waitFor(() =>
+      expect(request).toHaveBeenCalledWith({
+        method: 'POST',
+        path: '/api/v2/tasks/wt-2/discard',
+      }),
+    );
+  });
+
+  it('task-updated 推送触发重拉；其他 chat 的推送忽略', async () => {
+    const { request, emitTaskUpdated } = installBridge([makeTask()]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} />);
+    await waitFor(() => screen.getByText('统计仓库行数'));
+    const getsBefore = request.mock.calls.filter(
+      ([input]) => (input as { method: string }).method === 'GET',
+    ).length;
+
+    emitTaskUpdated({ chatId: 'chat_2', taskId: 'x', status: 'completed' });
+    emitTaskUpdated({ chatId: 'chat_1', taskId: 'task-1', status: 'completed' });
+
+    await waitFor(() => {
+      const gets = request.mock.calls.filter(
+        ([input]) => (input as { method: string }).method === 'GET',
+      ).length;
+      expect(gets).toBe(getsBefore + 1);
+    });
+  });
+
+  it('点击任务名调用 onInspect', async () => {
+    const onInspect = vi.fn();
+    installBridge([makeTask({ id: 't1', task: '跑测试', status: 'running', answer: null })]);
+    render(<TaskPanelModal chatId="chat_1" onClose={() => {}} onInspect={onInspect} />);
+    await waitFor(() => screen.getByText('跑测试'));
+    fireEvent.click(screen.getByRole('button', { name: '跑测试' }));
+    expect(onInspect).toHaveBeenCalledTimes(1);
+    expect(onInspect.mock.calls[0][0]).toMatchObject({ id: 't1', task: '跑测试' });
+  });
+
+  it('Escape 关闭模态', async () => {
+    const onClose = vi.fn();
+    installBridge([makeTask()]);
+    render(<TaskPanelModal chatId="chat_1" onClose={onClose} />);
+    await waitFor(() => screen.getByText('统计仓库行数'));
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/chat/TaskPanelModal.tsx

@@ -0,0 +1,310 @@
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  LuCheck,
+  LuChevronDown,
+  LuChevronRight,
+  LuClock,
+  LuGitBranch,
+  LuGitMerge,
+  LuListTodo,
+  LuLoaderCircle,
+  LuTrash2,
+  LuX,
+} from 'react-icons/lu';
+import {
+  discardTaskWorktree,
+  listChatTasks,
+  mergeTaskWorktree,
+  type LocalTask,
+} from '@/lib/local-api';
+import { getElectronBridge } from '@/lib/electron-bridge';
+
+/**
+ * TaskPanelModal — 跨 turn 后台任务面板（4.6a/4.6c）。
+ *
+ * 数据来自 listChatTasks（host SQLite 任务表）。任务在独立 sidecar 流里
+ * 跑，终态经主进程 `task-updated` 广播推到这里刷新——面板打开期间任务
+ * 跑完会实时翻状态，不需要重开。
+ *
+ * worktree 任务（worktreeState=pending）在完成后提供「合并到主仓」/
+ * 「丢弃」操作；两者都是幂等目标态，失败（如合并冲突）以错误条显示，
+ * 任务保持 pending 可重试。
+ */
+
+interface TaskPanelModalProps {
+  chatId: string;
+  onClose: () => void;
+  /** 点击任务行：关闭面板并在右侧展示该任务的推理过程。 */
+  onInspect?: (task: LocalTask) => void;
+  /** 打开时就展开的任务行——header 角标直达唯一待处理的 worktree 任务。 */
+  initialExpandedId?: string;
+}
+
+function formatTime(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString();
+}
+
+export function TaskPanelModal({
+  chatId,
+  onClose,
+  onInspect,
+  initialExpandedId,
+}: TaskPanelModalProps) {
+  const [tasks, setTasks] = useState<LocalTask[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(
+    initialExpandedId ?? null,
+  );
+  /** 正在执行合并/丢弃的任务 id——按钮防重入。 */
+  const [actingId, setActingId] = useState<string | null>(null);
+  /** 合并/丢弃失败（如冲突）的提示，按任务 id 挂。 */
+  const [actionError, setActionError] = useState<Record<string, string>>({});
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await listChatTasks(chatId);
+      setTasks(res.tasks);
+    } catch {
+      setTasks(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [chatId]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // 任务终态推送 → 重拉列表。preload 只透传 chatId/taskId/status，
+  // 记录本体以 SQLite 为准。
+  useEffect(() => {
+    const bridge = getElectronBridge();
+    if (!bridge?.onTaskUpdated) return;
+    return bridge.onTaskUpdated((payload) => {
+      if (payload.chatId === chatId) void refresh();
+    });
+  }, [chatId, refresh]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [onClose]);
+
+  const runAction = async (task: LocalTask, action: 'merge' | 'discard') => {
+    if (actingId) return;
+    setActingId(task.id);
+    setActionError((prev) => {
+      const next = { ...prev };
+      delete next[task.id];
+      return next;
+    });
+    try {
+      if (action === 'merge') {
+        await mergeTaskWorktree(task.id);
+      } else {
+        await discardTaskWorktree(task.id);
+      }
+      await refresh();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setActionError((prev) => ({ ...prev, [task.id]: message }));
+    } finally {
+      setActingId(null);
+    }
+  };
+
+  const runningCount = tasks?.filter((t) => t.status === 'running').length ?? 0;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label="后台任务"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      data-task-panel-modal
+    >
+      <div className="flex max-h-[85vh] w-full max-w-xl flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
+        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-2.5">
+          <LuListTodo className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
+          <span className="min-w-0 flex-1 truncate text-sm font-medium text-agent-foreground">
+            后台任务
+            {tasks && tasks.length > 0 && (
+              <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
+                {tasks.length} 个任务{runningCount > 0 ? `，${runningCount} 个运行中` : ''}
+              </span>
+            )}
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+            aria-label="关闭"
+          >
+            <LuX className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-auto p-2">
+          {loading ? (
+            <div className="flex items-center justify-center gap-2 px-3 py-6 text-xs text-agent-muted-foreground">
+              <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
+              正在加载任务…
+            </div>
+          ) : !tasks || tasks.length === 0 ? (
+            <div className="px-3 py-6 text-center text-xs text-agent-muted-foreground">
+              暂无后台任务 — 让助手用 task_run 启动一个跨轮任务后会出现在这里。
+            </div>
+          ) : (
+            tasks.map((task) => {
+              const expanded = expandedId === task.id;
+              const acting = actingId === task.id;
+              return (
+                <div
+                  key={task.id}
+                  className="mb-1 rounded border border-agent-border/60 px-2.5 py-2"
+                  data-task-row
+                  data-status={task.status}
+                >
+                  <div className="flex items-center gap-2">
+                    {task.status === 'running' ? (
+                      <LuLoaderCircle className="h-3.5 w-3.5 shrink-0 animate-spin text-sky-600 dark:text-sky-400" />
+                    ) : task.status === 'blocked' ? (
+                      <LuClock className="h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+                    ) : task.status === 'completed' ? (
+                      <LuCheck className="h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                    ) : (
+                      <LuX className="h-3.5 w-3.5 shrink-0 text-red-600 dark:text-red-400" />
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => onInspect?.(task)}
+                      className="min-w-0 flex-1 truncate text-left text-xs font-medium text-agent-foreground hover:underline"
+                      title="在右侧查看推理过程"
+                    >
+                      {task.task}
+                    </button>
+                    {task.worktreeBranch && (
+                      <span
+                        className="flex shrink-0 items-center gap-1 rounded bg-agent-foreground/5 px-1.5 py-0.5 font-mono text-[10px] text-agent-muted-foreground"
+                        title={task.worktreePath ?? undefined}
+                      >
+                        <LuGitBranch className="h-3 w-3" />
+                        {task.worktreeBranch}
+                        {task.worktreeState === 'merged'
+                          ? ' · 已合并'
+                          : task.worktreeState === 'discarded'
+                            ? ' · 已丢弃'
+                            : ''}
+                      </span>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => setExpandedId(expanded ? null : task.id)}
+                      className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
+                      aria-label={expanded ? '收起' : '展开'}
+                      aria-expanded={expanded}
+                    >
+                      {expanded ? (
+                        <LuChevronDown className="h-3.5 w-3.5" />
+                      ) : (
+                        <LuChevronRight className="h-3.5 w-3.5" />
+                      )}
+                    </button>
+                  </div>
+
+                  <div className="mt-1 pl-5 text-[10px] text-agent-muted-foreground/80">
+                    {task.status === 'running'
+                      ? '运行中'
+                      : task.status === 'blocked'
+                        ? '等待依赖'
+                        : task.status === 'completed'
+                          ? '已完成'
+                          : '失败'}
+                    {' · '}
+                    {formatTime(task.updatedAt)}
+                  </div>
+
+                  {expanded && (
+                    <div className="mt-2 border-t border-agent-border/60 pt-2 pl-5">
+                      {task.error && (
+                        <div className="mb-2 rounded bg-red-500/10 px-2 py-1.5 text-xs whitespace-pre-wrap text-red-700 dark:text-red-300">
+                          {task.error}
+                        </div>
+                      )}
+                      {task.answer ? (
+                        <div className="max-h-64 overflow-auto text-xs whitespace-pre-wrap text-agent-foreground">
+                          {task.answer}
+                        </div>
+                      ) : (
+                        !task.error && (
+                          <div className="text-xs text-agent-muted-foreground">
+                            {task.status === 'running'
+                              ? '任务还在运行，完成后结果会出现在这里。'
+                              : task.status === 'blocked'
+                                ? '等待依赖任务完成，就绪后会自动开始。'
+                                : '无结果。'}
+                          </div>
+                        )
+                      )}
+                      {task.worktreeState === 'pending' && task.status === 'completed' && (
+                        <div className="mt-2 flex items-center gap-2">
+                          <button
+                            type="button"
+                            disabled={actingId !== null}
+                            onClick={() => void runAction(task, 'merge')}
+                            className="flex items-center gap-1 rounded bg-agent-foreground/10 px-2 py-1 text-[11px] font-medium text-agent-foreground transition-colors hover:bg-agent-foreground/15 disabled:opacity-50"
+                            data-task-merge
+                          >
+                            {acting ? (
+                              <LuLoaderCircle className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <LuGitMerge className="h-3 w-3" />
+                            )}
+                            合并到主仓
+                          </button>
+                          <button
+                            type="button"
+                            disabled={actingId !== null}
+                            onClick={() => void runAction(task, 'discard')}
+                            className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-agent-muted-foreground transition-colors hover:bg-red-500/10 hover:text-red-600 disabled:opacity-50 dark:hover:text-red-400"
+                            data-task-discard
+                          >
+                            <LuTrash2 className="h-3 w-3" />
+                            丢弃
+                          </button>
+                        </div>
+                      )}
+                      {actionError[task.id] && (
+                        <div className="mt-2 rounded bg-red-500/10 px-2 py-1.5 text-xs whitespace-pre-wrap text-red-700 dark:text-red-300">
+                          {actionError[task.id]}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        <div className="border-t border-agent-border px-4 py-2 text-[10px] text-agent-muted-foreground/80">
+          任务由后台智能体独立执行。点任务名可在右侧看推理过程；Esc 关闭。
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default TaskPanelModal;