From 164a27fd80ec1749e58b9f44dd475d7b46f2e982 Mon Sep 17 00:00:00 2001
From: root <root@localhost>
Date: Tue, 6 Oct 2026 18:01:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(agent):=20=E4=BC=9A=E8=AF=9D=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=8D=A2=E6=88=90=E4=B8=80=E8=A1=8C=E7=9A=84=E7=B4=A7?=
 =?UTF-8?q?=E5=87=91=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

整页表格的分页放进 17rem 左栏和抽屉历史弹层会折成三行,弹层只露出 3 条会话。
改成「共 N 条 · ‹ 1/3 ›」一行,每页条数沿用全站设置,翻页时列表回到顶部。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
---
 .../app/components/agent/agent-nav.test.ts    | 24 ++++++++
 .../components/agent/agent-session-list.tsx   | 58 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/components/agent/agent-nav.test.ts b/apps/web/app/components/agent/agent-nav.test.ts
index d5995dde..55ec1d59 100644
--- a/apps/web/app/components/agent/agent-nav.test.ts
+++ b/apps/web/app/components/agent/agent-nav.test.ts
@@ -1,6 +1,9 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 import { runGroup } from "~/api/agent.ts";
 import { agentListHref, agentRunHref, groupFromSearch, resolveGroup, revealScrollTop } from "./agent-nav.ts";
+import { CompactPager } from "./agent-session-list.tsx";
 import { isAgentPage, outletKey } from "./agent-store.ts";
 
 // 智能体页面切换的状态逻辑:整页重挂载 key、分栏与 URL、草稿、滚动策略、快捷键在智能体页面的行为。
@@ -60,3 +63,24 @@ describe("当前会话滚进可见区", () => {
     expect(revealScrollTop({ top: 600, height: 40 }, vp)).toBe(340);
   });
 });
+
+describe("会话列表分页(窄列表一行)", () => {
+  const pager = (p: Partial<Parameters<typeof CompactPager>[0]>) =>
+    renderToStaticMarkup(
+      createElement(CompactPager, { page: 1, pageSize: 20, total: 0, onPageChange: () => {}, ...p }),
+    );
+  it("只有一页不显示", () => {
+    expect(pager({ total: 12 })).toBe("");
+  });
+  it("多页:总数 + 当前页 / 页数,没有每页条数选择", () => {
+    const html = pager({ total: 48, page: 2 });
+    expect(html).toContain("共 48 条");
+    expect(html).toContain("2 / 3");
+    expect(html).not.toContain("每页");
+  });
+  it("还能往后加载时标出已加载条数和「+」", () => {
+    const html = pager({ total: 20, hasMore: true });
+    expect(html).toContain("已加载 20 条");
+    expect(html).toContain("1 / 1+");
+  });
+});
diff --git a/apps/web/app/components/agent/agent-session-list.tsx b/apps/web/app/components/agent/agent-session-list.tsx
index 126517c3..ea4e37ca 100644
--- a/apps/web/app/components/agent/agent-session-list.tsx
+++ b/apps/web/app/components/agent/agent-session-list.tsx
@@ -1,12 +1,13 @@
-import { Bot, ChevronRight } from "lucide-react";
+import { Bot, ChevronLeft, ChevronRight } from "lucide-react";
 import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Link } from "react-router";
 import { type AgentRunGroup, type AgentRunView, TRIGGER_LABEL, useAgentRuns } from "~/api/agent.ts";
 import { CHEVRON_CLASS } from "~/components/agentui/disclosure.tsx";
 import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
 import { useListPagination } from "~/components/console/use-list-pagination.ts";
+import { Button } from "~/components/ui/button.tsx";
 import { Input } from "~/components/ui/input.tsx";
-import { Pagination } from "~/components/ui/pagination.tsx";
+import type { PaginationProps } from "~/components/ui/pagination.tsx";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
 import { relTime } from "~/components/workbench/release-fields.ts";
 import { cn } from "~/lib/utils.ts";
@@ -189,6 +190,51 @@ function Row({
   );
 }
 
+/**
+ * 窄列表用的分页:一行「共 N 条 · ‹ 1/3 ›」。整页表格的分页(每页条数 + 完整页码)放进 17rem 的左栏
+ * 或历史弹层会折成三行,占掉半个列表。每页条数沿用全站设置。只有一页时不显示。
+ */
+export function CompactPager({ page, pageSize, total, hasMore = false, busy = false, onPageChange }: PaginationProps) {
+  const pages = Math.max(1, Math.ceil(total / pageSize)) + (hasMore ? 1 : 0);
+  if (pages <= 1) return null;
+  const known = Math.max(1, Math.ceil(total / pageSize));
+  return (
+    <nav
+      aria-label="会话列表分页"
+      aria-busy={busy}
+      className="flex shrink-0 items-center gap-1 border-t border-border/60 pt-1.5 text-meta text-muted-foreground"
+    >
+      <span aria-live="polite" className="min-w-0 flex-1 truncate px-1 tabular-nums">
+        {hasMore ? `已加载 ${total} 条` : `共 ${total} 条`}
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="上一页"
+        disabled={busy || page <= 1}
+        onClick={() => onPageChange(page - 1)}
+      >
+        <ChevronLeft />
+      </Button>
+      <span className="tabular-nums">
+        {page} / {known}
+        {hasMore ? "+" : ""}
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="下一页"
+        disabled={busy || page >= pages}
+        onClick={() => onPageChange(page + 1)}
+      >
+        <ChevronRight />
+      </Button>
+    </nav>
+  );
+}
+
 /**
  * 会话列表:分栏 + 搜索 + 全部 / 等你处理 / 失败 + 按需加载的分页。
  * - hrefFor:列表页 / 会话页左栏,点一条跳到该会话页。
@@ -358,7 +404,13 @@ export function AgentSessionList({
           </>
         )}
       </div>
-      {visible.length > 0 || canLoadMore ? <Pagination {...paged.pagination} /> : null}
+      <CompactPager
+        {...paged.pagination}
+        onPageChange={(n) => {
+          paged.pagination.onPageChange(n);
+          if (scroller.current) scroller.current.scrollTop = 0;
+        }}
+      />
     </nav>
   );
 }