fix: compact list pagination and refine mobile call UX

Show ellipsis page controls when lists grow large, and make mobile call start manual with clearer hangup layout and assistant name.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/ui/data-list.tsx

@@ -51,6 +51,28 @@ export type DataListProps<T> = {
   pagination?: DataListPagination;
 };
 
+/** 页码或省略号。页数少时全部展示;多时固定首尾 + 当前附近,避免按钮撑破布局。 */
+type PageItem = number | "ellipsis";
+
+function buildPageItems(current: number, total: number): PageItem[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, index) => index + 1);
+  }
+
+  // 靠近开头: 1 2 3 4 5 … N
+  if (current <= 3) {
+    return [1, 2, 3, 4, 5, "ellipsis", total];
+  }
+
+  // 靠近结尾: 1 … N-4 N-3 N-2 N-1 N
+  if (current >= total - 2) {
+    return [1, "ellipsis", total - 4, total - 3, total - 2, total - 1, total];
+  }
+
+  // 中间: 1 … c-1 c c+1 … N
+  return [1, "ellipsis", current - 1, current, current + 1, "ellipsis", total];
+}
+
 export function DataList<T>({
   columns,
   rows,
@@ -151,7 +173,7 @@ export function DataList<T>({
         <div className="mt-5 flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
           <div>{pagination.summary}</div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <Button
               variant="outline"
               size="icon-sm"
@@ -163,22 +185,31 @@ export function DataList<T>({
               <ChevronLeft size={15} />
             </Button>
 
-            {Array.from({ length: pagination.totalPages }, (_, index) => index + 1).map(
-              (page) => (
-                <Button
-                  key={page}
-                  variant={page === pagination.page ? "default" : "outline"}
-                  size="sm"
-                  className={cn(
-                    "h-8 min-w-8 px-2",
-                    page !== pagination.page &&
-                      "border-hairline-strong text-muted-foreground hover:text-foreground",
-                  )}
-                  onClick={() => pagination.onPageChange(page)}
-                >
-                  {page}
-                </Button>
-              ),
+            {buildPageItems(pagination.page, pagination.totalPages).map(
+              (item, index) =>
+                item === "ellipsis" ? (
+                  <span
+                    key={`ellipsis-${index}`}
+                    className="px-1 text-muted-soft"
+                    aria-hidden
+                  >
+                    …
+                  </span>
+                ) : (
+                  <Button
+                    key={item}
+                    variant={item === pagination.page ? "default" : "outline"}
+                    size="sm"
+                    className={cn(
+                      "h-8 min-w-8 px-2",
+                      item !== pagination.page &&
+                        "border-hairline-strong text-muted-foreground hover:text-foreground",
+                    )}
+                    onClick={() => pagination.onPageChange(item)}
+                  >
+                    {item}
+                  </Button>
+                ),
             )}
 
             <Button