feat(agent): in-drawer history tab and denser session layout (AGUI-2)

- Drawer tabs 当前/历史: searchable run list (status/source/time filters,
  cursor auto-load), opens runs inside the drawer, keeps scroll and filters,
  remembers the last tab; 在页面打开 is secondary
- Ended runs: append to resume, or 用同目标新建 with 先看方案再执行 toggle
- Session page: 88ch conversation column, turns grouped with one timestamp,
  tool cards collapse to one line, 3+ activities fold; steps/subagents/budget
  moved to a right rail (collapsible overview bar on narrow screens and in
  the drawer), long model reports fold behind 展开全文
- Smoke covers the drawer history flow

Co-Authored-By: Claude Opus 5.5 <[email protected]>

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

@@ -1,27 +1,35 @@
-import { Bot, ExternalLink, Maximize2, Minus, Plus, X } from "lucide-react";
+import { ArrowLeft, Bot, ExternalLink, History, Maximize2, Minus, Plus, X } from "lucide-react";
 import { useRef } from "react";
 import { Link, useLocation } from "react-router";
 import { toast } from "sonner";
-import { isRunActive, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
+import { agentMockEnabled, isRunActive, useAgentRun, useCreateAgentRun } from "~/api/agent.ts";
 import { StreamingCursor } from "~/components/agentui/streaming-response.tsx";
 import { Button } from "~/components/ui/button.tsx";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet.tsx";
 import { errorMessage } from "~/lib/api.ts";
+import { cn } from "~/lib/utils.ts";
 import { capabilityMeta, isDenied, RunStatusBadge } from "./agent-conversation.tsx";
 import { AgentRunPanel, GoalComposer } from "./agent-run-panel.tsx";
+import { AgentSessionList } from "./agent-session-list.tsx";
 import {
   type AgentContext,
+  type AgentDrawerTab,
   agentShortcutLabel,
   contextFromPath,
   contextPrefix,
+  lastAgentDrawerTab,
   minimizeAgentDrawer,
   openAgentDrawer,
+  openAgentHistoryRun,
   restoreAgentDrawer,
   setAgentDrawerOpen,
   setAgentDrawerRun,
+  setAgentDrawerTab,
+  showAgentRunInDrawer,
   splitContextGoal,
   useAgentDrawer,
 } from "./agent-store.ts";
+import { AgentRunOpenContext } from "./agent-subagent-tree.tsx";
 import { quickGoalsFor } from "./quick-goals.ts";
 import { useAgentStream } from "./use-agent-stream.ts";
 
@@ -55,18 +63,81 @@ function ContextChips({ context }: { context: AgentContext }) {
   );
 }
 
+const TABS: { value: AgentDrawerTab; label: string }[] = [
+  { value: "current", label: "当前" },
+  { value: "history", label: "历史" },
+];
+
+function DrawerTabs({ tab }: { tab: AgentDrawerTab }) {
+  return (
+    <div
+      role="tablist"
+      aria-label="Agent 视图"
+      className="mt-2 inline-flex w-fit gap-1 rounded-full border border-border/70 p-0.5"
+    >
+      {TABS.map((t) => (
+        <button
+          key={t.value}
+          type="button"
+          role="tab"
+          id={`agent-tab-${t.value}`}
+          aria-selected={tab === t.value}
+          aria-controls="agent-tabpanel"
+          onClick={() => setAgentDrawerTab(t.value)}
+          className={cn(
+            "h-7 cursor-pointer rounded-full border border-transparent px-3 text-meta text-muted-foreground outline-none transition-colors duration-micro hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            tab === t.value && "pill-selected text-foreground",
+          )}
+        >
+          {t.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** 历史 Tab 里打开的一条会话:返回列表 + 目标 + 在页面打开(次要);正文复用会话组件,进行中可继续输入 */
+function HistoryRunView({ runId }: { runId: string }) {
+  const run = useAgentRun(runId);
+  const mock = agentMockEnabled();
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-2">
+      <div className="flex min-w-0 items-center gap-1">
+        <Button variant="ghost" size="sm" className="-ml-2 shrink-0" onClick={() => openAgentHistoryRun(null)}>
+          <ArrowLeft />
+          返回列表
+        </Button>
+        <p className="min-w-0 flex-1 truncate text-caption text-muted-foreground" title={run.data?.run.goal}>
+          {run.data ? splitContextGoal(run.data.run.goal).text : ""}
+        </p>
+        <Button asChild variant="ghost" size="xs" className="shrink-0 text-muted-foreground">
+          <Link to={`/console/agent/${runId}${mock ? "?mock=1" : ""}`} onClick={() => setAgentDrawerOpen(false)}>
+            <ExternalLink />
+            在页面打开
+          </Link>
+        </Button>
+      </div>
+      <AgentRunOpenContext.Provider value={openAgentHistoryRun}>
+        <AgentRunPanel key={runId} runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
+      </AgentRunOpenContext.Provider>
+    </div>
+  );
+}
+
 /**
  * Agent 侧栏抽屉:任意页面可打开,带当前页面上下文(entityId / siteId / taskId 等)作为 goal 前缀;
+ * 顶部 Tab「当前 / 历史」:历史里点一条在抽屉内打开(不跳页),返回列表保留筛选与滚动位置;抽屉记住上次 Tab。
  * 运行中可最小化到右下角小窗,流式输出继续。
  * 挂载:在 console layout 里渲染一次 <AgentDrawer />;顶栏放 <AgentDrawerTrigger />。
  * 页面内打开:import { openAgentDrawer } from "~/components/agent/agent-store.ts"。
  */
 export function AgentDrawer() {
-  const { open, minimized, context, runId } = useAgentDrawer();
+  const { open, minimized, context, runId, tab, historyRunId } = useAgentDrawer();
   const create = useCreateAgentRun();
   const prefix = contextPrefix(context);
   const { pathname } = useLocation();
   const content = useRef<HTMLDivElement>(null);
+  const history = tab === "history";
 
   return (
     <>
@@ -87,20 +158,21 @@ export function AgentDrawer() {
             if ((e.target as Element | null)?.closest?.(`[${AGENT_LAUNCHER_ATTR}]`)) e.preventDefault();
           }}
         >
-          <SheetHeader className="border-b border-[var(--shell-border)] px-5 py-4 pr-24">
+          <SheetHeader className="gap-1 border-b border-[var(--shell-border)] px-5 pt-4 pb-3 pr-24">
             <SheetTitle className="flex items-center gap-2 text-lead">
               <Bot className="h-4 w-4" />
               Agent
             </SheetTitle>
-            <SheetDescription className="break-words">
+            <SheetDescription className={cn("break-words", history && "sr-only")}>
               {context?.label ? `当前对象：${context.label}` : "交代目标，Agent 在授权范围内执行并汇报。"}
               <span className="ml-1 hidden text-muted-foreground/75 sm:inline">
                 （{agentShortcutLabel()} 开关，Esc 关闭）
               </span>
             </SheetDescription>
-            {context ? <ContextChips context={context} /> : null}
+            {context && !history ? <ContextChips context={context} /> : null}
+            <DrawerTabs tab={tab} />
           </SheetHeader>
-          {runId ? (
+          {runId && !history ? (
             <Button
               variant="ghost"
               size="icon-sm"
@@ -112,9 +184,27 @@ export function AgentDrawer() {
               <Minus />
             </Button>
           ) : null}
-          <div className="flex min-h-0 flex-1 flex-col px-4 py-3">
-            {runId ? (
-              <AgentRunPanel runId={runId} compact className="flex-1" />
+          <div
+            id="agent-tabpanel"
+            role="tabpanel"
+            aria-labelledby={`agent-tab-${tab}`}
+            className="flex min-h-0 flex-1 flex-col px-4 py-3"
+          >
+            {history ? (
+              historyRunId ? (
+                <HistoryRunView runId={historyRunId} />
+              ) : (
+                <AgentSessionList
+                  remember
+                  activeId={runId ?? undefined}
+                  onOpen={openAgentHistoryRun}
+                  className="flex-1"
+                />
+              )
+            ) : runId ? (
+              <AgentRunOpenContext.Provider value={openAgentHistoryRun}>
+                <AgentRunPanel runId={runId} compact className="flex-1" onCreated={showAgentRunInDrawer} />
+              </AgentRunOpenContext.Provider>
             ) : (
               <GoalComposer
                 key={`${context?.entityId ?? ""}${context?.releaseId ?? ""}${context?.goal ?? ""}`}
@@ -135,28 +225,29 @@ export function AgentDrawer() {
               />
             )}
           </div>
-          <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-3">
-            {runId ? (
-              <>
-                <Button variant="ghost" size="sm" onClick={() => openAgentDrawer(context)}>
-                  <Plus />
-                  新目标
+          {history ? null : (
+            <div className="flex flex-wrap items-center justify-end gap-2 border-t border-[var(--shell-border)] px-5 py-2.5">
+              {runId ? (
+                <>
+                  <Button variant="ghost" size="sm" onClick={() => openAgentDrawer(context)}>
+                    <Plus />
+                    新目标
+                  </Button>
+                  <Button asChild variant="ghost" size="sm" className="text-muted-foreground">
+                    <Link to={`/console/agent/${runId}`} onClick={() => setAgentDrawerOpen(false)}>
+                      <ExternalLink />
+                      在页面打开
+                    </Link>
+                  </Button>
+                </>
+              ) : (
+                <Button variant="ghost" size="sm" onClick={() => setAgentDrawerTab("history")}>
+                  <History />
+                  历史会话
                 </Button>
-                <Button asChild variant="outline" size="sm">
-                  <Link to={`/console/agent/${runId}`} onClick={() => setAgentDrawerOpen(false)}>
-                    <ExternalLink />
-                    在会话页打开
-                  </Link>
-                </Button>
-              </>
-            ) : (
-              <Button asChild variant="ghost" size="sm">
-                <Link to="/console/agent" onClick={() => setAgentDrawerOpen(false)}>
-                  全部会话
-                </Link>
-              </Button>
-            )}
-          </div>
+              )}
+            </div>
+          )}
         </SheetContent>
       </Sheet>
       {minimized && runId ? <AgentMiniDock runId={runId} /> : null}
@@ -237,7 +328,9 @@ export function AgentDrawerTrigger({ className }: { className?: string }) {
       aria-label="打开 Agent"
       title={`Agent(${agentShortcutLabel()})`}
       className={className}
-      onClick={() => (minimized && runId ? restoreAgentDrawer() : openAgentDrawer(contextFromPath(pathname)))}
+      onClick={() =>
+        minimized && runId ? restoreAgentDrawer() : openAgentDrawer(contextFromPath(pathname), lastAgentDrawerTab())
+      }
     >
       <Bot />
     </Button>