feat(agent): 抽屉与会话页统一成一个对话界面,子会话在父会话里实时可见

- 抽屉和会话页渲染同一套 GoalComposer / AgentRunPanel;抽屉标题即最近会话切换,
  头部只有新对话、在页面打开、关闭;去掉右下角悬浮按钮和最小化小窗
- 会话列表合一:对话与巡检混排带类型小标签,搜索 + 一个状态下拉,只列顶层会话
  (GET /agent/runs?roots=true,新增可选参数)
- 子会话卡片:由镜像的 subagent_* 事件折成,显示任务、状态、当前步骤、用时、调用次数、费用,
  可展开看过程、可打开;顶部「N 个子会话运行中」跳到卡片;subagent_completed 加可选 durationMs
- 回答去内部字段:汇报规则禁止照抄键值与字段表;展示层 stripInternalFields 把字段行 / 字段表移进技术信息
- 开场建议按页面给 2 条完整问法、点了直接发;指令只留 /先给方案,/重跑 改成「重新运行」按钮

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei

apps/web/app/components/agent/agent-drawer.tsx

@@ -1,18 +1,16 @@
-import { Bot, ExternalLink, History, Maximize2, Minus, SquarePen, X } from "lucide-react";
+import { Bot, ChevronDown, Maximize2, SquarePen, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { toast } from "sonner";
-import { agentMockEnabled, isRunActive, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
+import { agentMockEnabled, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
 import { useDownloadTask } from "~/api/downloads.ts";
 import { useLibraryDetail } from "~/api/library.ts";
 import { useRecord } from "~/api/records.ts";
 import { useSite } from "~/api/sites.ts";
-import { StreamingCursor } from "~/components/agentui/streaming-response.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
 import { errorMessage } from "~/lib/api.ts";
-import { capabilityMeta, isDenied, RunStatusBadge } from "./agent-conversation.tsx";
 import { DRAFT_DRAWER_GOAL, writeDraft } from "./agent-nav.ts";
 import { AgentRunPanel, GoalComposer } from "./agent-run-panel.tsx";
 import { AgentSessionList, drawerListMemory } from "./agent-session-list.tsx";
@@ -21,10 +19,8 @@ import {
   agentShortcutLabel,
   clearAgentContext,
   contextPrefix,
-  minimizeAgentDrawer,
   newAgentConversation,
   noteAgentReturnPath,
-  restoreAgentDrawer,
   setAgentDrawerOpen,
   shortGoalTitle,
   showAgentRunInDrawer,
@@ -33,11 +29,10 @@ import {
   toggleAgentDrawer,
   useAgentDrawer,
 } from "./agent-store.ts";
-import { AgentRunOpenContext } from "./agent-subagent-tree.tsx";
+import { AgentRunOpenContext } from "./agent-subagents.tsx";
 import { quickGoalsFor } from "./quick-goals.ts";
-import { useAgentStream } from "./use-agent-stream.ts";
 
-/** 悬浮按钮等"抽屉外但属于抽屉"的控件打这个属性:点它不算点外面(否则先被关掉又被重新打开) */
+/** 侧栏入口、顶栏按钮等"抽屉外但属于抽屉"的控件打这个属性:点它不算点外面(否则先被关掉又被重新打开) */
 export const AGENT_LAUNCHER_ATTR = "data-agent-launcher";
 
 /**
@@ -60,23 +55,31 @@ export function useContextName(ctx: AgentContext | null): string | null {
   return null;
 }
 
-/** 历史弹层:最近 20 条,等你处理置顶,子会话收在父会话下;点一条在抽屉里打开 */
-function HistoryPopover({ activeId }: { activeId: string | null }) {
+/** 抽屉标题 = 最近会话切换:显示当前会话的短标题,点开是和会话页同一份会话列表,点一条在抽屉里打开 */
+function RecentSwitcher({ runId }: { runId: string | null }) {
   const [open, setOpen] = useState(false);
+  const run = useAgentRun(runId ?? undefined);
   const mock = agentMockEnabled();
+  const title = runId ? (run.data ? shortGoalTitle(run.data.run.goal, 28) : "会话") : "新对话";
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="ghost" size="sm" aria-label="历史会话" title="历史会话">
-          <History />
-          历史
-        </Button>
+        <button
+          type="button"
+          aria-label={`最近会话，当前：${title}`}
+          title="切换到最近的会话"
+          className="mr-auto flex h-8 min-w-0 cursor-pointer items-center gap-2 rounded-full px-2 text-left outline-none transition-colors duration-micro hover:bg-foreground/[0.04] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-foreground/[0.06]"
+        >
+          <Bot aria-hidden className="size-4 shrink-0" />
+          <span className="min-w-0 truncate text-lead font-semibold">{title}</span>
+          <ChevronDown aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+        </button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="flex h-[min(32rem,70dvh)] w-[min(22rem,calc(100vw-2rem))] flex-col p-2">
+      <PopoverContent align="start" className="flex h-[min(32rem,70dvh)] w-[min(22rem,calc(100vw-2rem))] flex-col p-2">
         <AgentSessionList
           memory={drawerListMemory}
           limit={20}
-          activeId={activeId ?? undefined}
+          activeId={runId ?? undefined}
           onOpen={(id) => {
             setOpen(false);
             showAgentRunInDrawer(id);
@@ -94,12 +97,13 @@ function HistoryPopover({ activeId }: { activeId: string | null }) {
 }
 
 /**
- * 智能体抽屉(AGUI-3):任意页面可打开,带当前页面上下文(作品 / 站点 / 下载任务等)。
- * 头部只有「历史」弹层和「新对话」;没有 Tab。运行中可最小化到右下角小窗,流式输出继续。
+ * 智能体抽屉:任意页面可打开,带当前页面上下文(作品 / 站点 / 下载任务等)。内容和会话页是同一个组件
+ * (新对话 GoalComposer、会话 AgentRunPanel),这里是紧凑版。
+ * 头部:标题即最近会话切换、新对话、在页面打开、关闭。关上抽屉会话照常在后台跑,再打开接着看。
  * 挂载:在 console layout 里渲染一次 <AgentDrawer />。页面内打开:openAgentDrawer({ entityId, label, ... })。
  */
 export function AgentDrawer() {
-  const { open, minimized, context, runId } = useAgentDrawer();
+  const { open, context, runId } = useAgentDrawer();
   const create = useCreateAgentRun();
   const { pathname, search } = useLocation();
   const content = useRef<HTMLDivElement>(null);
@@ -112,172 +116,99 @@ export function AgentDrawer() {
   const prefix = contextPrefix(context && name ? { ...context, label: name } : context);
 
   return (
-    <>
-      <Sheet open={open} onOpenChange={setAgentDrawerOpen}>
-        <SheetContent
-          ref={content}
-          side="right"
-          showCloseButton={false}
-          className="w-full gap-0 p-0 sm:max-w-xl"
-          // 打开即可输入:焦点直接给输入框,没有输入框时退回抽屉本身
-          onOpenAutoFocus={(e) => {
-            const ta = content.current?.querySelector<HTMLTextAreaElement>("textarea:not([disabled])");
-            if (!ta) return;
-            e.preventDefault();
-            ta.focus();
-            ta.setSelectionRange(ta.value.length, ta.value.length);
-          }}
-          // 关闭后焦点回到打开前的位置(快捷键打开没有触发元素,缺省会落到 body)
-          onCloseAutoFocus={(e) => {
-            const el = takeReturnFocus();
-            if (!el) return;
-            e.preventDefault();
-            el.focus();
-          }}
-          onInteractOutside={(e) => {
-            if ((e.target as Element | null)?.closest?.(`[${AGENT_LAUNCHER_ATTR}]`)) e.preventDefault();
-          }}
-        >
-          <SheetHeader className="flex-row items-center gap-1 border-b border-[var(--shell-border)] py-2.5 pr-3 pl-5">
-            <SheetTitle className="mr-auto flex items-center gap-2 text-lead">
-              <Bot className="h-4 w-4" />
-              智能体
-            </SheetTitle>
-            <SheetDescription className="sr-only">{`${agentShortcutLabel()} 打开或收起`}</SheetDescription>
-            <HistoryPopover activeId={runId} />
-            <Button variant="ghost" size="sm" onClick={newAgentConversation} disabled={!runId}>
-              <SquarePen />
-              新对话
-            </Button>
-            {runId ? (
-              <>
-                <Button asChild variant="ghost" size="icon-sm" aria-label="在页面打开" title="在页面打开">
-                  <Link
-                    to={`/console/agent/${runId}${mock ? "?mock=1" : ""}`}
-                    onClick={() => setAgentDrawerOpen(false)}
-                  >
-                    <ExternalLink />
-                  </Link>
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label="最小化，会话继续运行"
-                  title="最小化，会话继续运行"
-                  onClick={minimizeAgentDrawer}
-                >
-                  <Minus />
-                </Button>
-              </>
-            ) : null}
-            {/* 关闭钮放进标题栏这一行,与其它按钮对齐(Sheet 自带的是绝对定位,偏下 5px) */}
-            <SheetClose asChild>
-              <Button variant="ghost" size="icon-sm" aria-label="关闭" title="关闭（Esc）">
-                <X />
-              </Button>
-            </SheetClose>
-          </SheetHeader>
-          <div className="flex min-h-0 flex-1 flex-col px-4 py-3">
-            {runId ? (
-              <AgentRunOpenContext.Provider value={showAgentRunInDrawer}>
-                <AgentRunPanel key={runId} runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
-              </AgentRunOpenContext.Provider>
-            ) : (
-              <div className="flex min-h-0 flex-1 flex-col justify-end">
-                <GoalComposer
-                  key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
-                  suggestions={context?.goal ? undefined : quickGoalsFor(pathname)}
-                  context={name}
-                  onClearContext={clearAgentContext}
-                  defaultGoal={context?.goal ?? ""}
-                  draftKey={DRAFT_DRAWER_GOAL}
-                  pending={create.isPending}
-                  onSubmit={(goal, opts) =>
-                    create.mutate(
-                      { goal: `${prefix}${goal}`, ...opts },
-                      {
-                        onSuccess: (run) => {
-                          writeDraft(DRAFT_DRAWER_GOAL, "");
-                          showAgentRunInDrawer(run.id);
-                        },
-                        onError: (e) => toast.error(errorMessage(e)),
-                      },
-                    )
-                  }
-                />
-              </div>
-            )}
-          </div>
-        </SheetContent>
-      </Sheet>
-      {minimized && runId ? <AgentMiniDock runId={runId} /> : null}
-    </>
-  );
-}
-
-/** 最小化后的小窗:保持事件流订阅,显示状态与最新一句输出 */
-function AgentMiniDock({ runId }: { runId: string }) {
-  const run = useAgentRun(runId);
-  const active = isRunActive(run.data?.run.status);
-  const live = useAgentStream(runId, active || !run.data);
-  const last = live.items[live.items.length - 1];
-  const streaming = active && !live.finished;
-  const line =
-    last?.kind === "text"
-      ? last.text.trim().split("\n").pop()
-      : last?.kind === "tool"
-        ? `${isDenied(last.call) ? "被拒绝" : last.call.status === "running" ? "调用" : "完成"} · ${capabilityMeta(last.call.capabilityId)?.title ?? last.call.capabilityId}`
-        : last?.kind === "thinking"
-          ? "思考中…"
-          : last?.kind === "end"
-            ? last.ok
-              ? "已完成，展开查看结果"
-              : last.message
-            : "等待输出…";
-  const status = run.data
-    ? live.finished && isRunActive(run.data.run.status)
-      ? "running"
-      : run.data.run.status
-    : null;
-  return (
-    <section
-      aria-label="智能体小窗"
-      className="pg-float fixed right-4 bottom-4 z-40 w-80 max-w-[calc(100vw-2rem)] rounded-2xl p-3 animate-in fade-in-0 slide-in-from-bottom-2 duration-base ease-pop motion-reduce:animate-none"
-    >
-      <div className="flex items-center gap-2">
-        <Bot aria-hidden className="size-4 shrink-0 text-muted-foreground" />
-        {status ? <RunStatusBadge status={status} /> : null}
-        <span className="min-w-0 flex-1 truncate text-meta text-muted-foreground">
-          {run.data ? shortGoalTitle(run.data.run.goal) : ""}
-        </span>
-        <Button variant="ghost" size="icon-xs" aria-label="展开智能体" title="展开" onClick={restoreAgentDrawer}>
-          <Maximize2 />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon-xs"
-          aria-label="关闭小窗，会话在后台继续"
-          title="关闭小窗，会话在后台继续"
-          onClick={() => setAgentDrawerOpen(false)}
-        >
-          <X />
-        </Button>
-      </div>
-      <button
-        type="button"
-        onClick={restoreAgentDrawer}
-        className="mt-2 block w-full cursor-pointer rounded-lg px-1 text-left text-caption leading-5 text-foreground/90 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    <Sheet open={open} onOpenChange={setAgentDrawerOpen}>
+      <SheetContent
+        ref={content}
+        side="right"
+        showCloseButton={false}
+        className="w-full gap-0 p-0 sm:max-w-xl"
+        // 打开即可输入:焦点直接给输入框,没有输入框时退回抽屉本身
+        onOpenAutoFocus={(e) => {
+          const ta = content.current?.querySelector<HTMLTextAreaElement>("textarea:not([disabled])");
+          if (!ta) return;
+          e.preventDefault();
+          ta.focus();
+          ta.setSelectionRange(ta.value.length, ta.value.length);
+        }}
+        // 关闭后焦点回到打开前的位置(快捷键打开没有触发元素,缺省会落到 body)
+        onCloseAutoFocus={(e) => {
+          const el = takeReturnFocus();
+          if (!el) return;
+          e.preventDefault();
+          el.focus();
+        }}
+        onInteractOutside={(e) => {
+          if ((e.target as Element | null)?.closest?.(`[${AGENT_LAUNCHER_ATTR}]`)) e.preventDefault();
+        }}
       >
-        <span className="line-clamp-2 break-words">
-          {line}
-          {streaming && last?.kind === "text" ? <StreamingCursor /> : null}
-        </span>
-      </button>
-    </section>
+        <SheetHeader className="flex-row items-center gap-1 border-b border-[var(--shell-border)] py-2 pr-3 pl-3">
+          <SheetTitle className="sr-only">智能体</SheetTitle>
+          <SheetDescription className="sr-only">{`${agentShortcutLabel()} 打开或收起`}</SheetDescription>
+          <RecentSwitcher runId={runId} />
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label="新对话"
+            title="新对话"
+            onClick={newAgentConversation}
+            disabled={!runId}
+          >
+            <SquarePen />
+          </Button>
+          {runId ? (
+            <Button asChild variant="ghost" size="icon-sm" aria-label="在页面打开" title="在页面打开">
+              <Link to={`/console/agent/${runId}${mock ? "?mock=1" : ""}`} onClick={() => setAgentDrawerOpen(false)}>
+                <Maximize2 />
+              </Link>
+            </Button>
+          ) : null}
+          {/* 关闭钮放进标题栏这一行,与其它按钮对齐(Sheet 自带的是绝对定位,偏下 5px) */}
+          <SheetClose asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="关闭，会话在后台继续"
+              title="关闭（Esc），会话在后台继续"
+            >
+              <X />
+            </Button>
+          </SheetClose>
+        </SheetHeader>
+        <div className="flex min-h-0 flex-1 flex-col px-4 py-3">
+          {runId ? (
+            <AgentRunOpenContext.Provider value={showAgentRunInDrawer}>
+              <AgentRunPanel key={runId} runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
+            </AgentRunOpenContext.Provider>
+          ) : (
+            <GoalComposer
+              key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
+              suggestions={context?.goal ? undefined : quickGoalsFor(pathname)}
+              context={name}
+              onClearContext={clearAgentContext}
+              defaultGoal={context?.goal ?? ""}
+              draftKey={DRAFT_DRAWER_GOAL}
+              pending={create.isPending}
+              onSubmit={(goal, opts) =>
+                create.mutate(
+                  { goal: `${prefix}${goal}`, ...opts },
+                  {
+                    onSuccess: (run) => {
+                      writeDraft(DRAFT_DRAWER_GOAL, "");
+                      showAgentRunInDrawer(run.id);
+                    },
+                    onError: (e) => toast.error(errorMessage(e)),
+                  },
+                )
+              }
+            />
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
   );
 }
 
-/** 顶栏按钮(窄屏):与快捷键、悬浮按钮同一套切换(页面内按钮用 openAgentDrawer 传更完整的上下文) */
+/** 顶栏胶囊里的智能体按钮(没有侧栏的窄屏):与快捷键、侧栏入口同一套切换(页面内按钮用 openAgentDrawer 传更完整的上下文) */
 export function AgentDrawerTrigger({ className }: { className?: string }) {
   const { pathname } = useLocation();
   return (