From 62ea6de3a7928052cc5aa40cd7384546e6d2eb84 Mon Sep 17 00:00:00 2001
From: ooodc <549496103@qq.com>
Date: Sun, 7 Jun 2026 18:17:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=88=B3=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=BB=8E=E6=B6=88=E6=81=AF=E4=B8=AD=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=B9=B6=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=97=B6=E9=97=B4=EF=BC=8C?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E4=B8=BA=E8=AF=9D=E9=A2=98=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/gateway/ws.rs                         | 10 +--
 web/src/components/Chat/MessageBubble.tsx |  2 +-
 web/src/components/Sidebar/TopicList.tsx  | 77 +++++++++++++++++++++--
 3 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/src/gateway/ws.rs b/src/gateway/ws.rs
index c0d8e06..6c4c20f 100644
--- a/src/gateway/ws.rs
+++ b/src/gateway/ws.rs
@@ -718,7 +718,7 @@ fn chat_message_to_ws_outbound(msg: &crate::bus::ChatMessage) -> Option<WsOutbou
                         role: msg.role.clone(),
                         subagent_task_id: None,
                         topic_id: None,
-                        timestamp: Some(crate::protocol::now_timestamp()),
+                        timestamp: Some(msg.timestamp / 1000),
                     });
                 }
             }
@@ -730,7 +730,7 @@ fn chat_message_to_ws_outbound(msg: &crate::bus::ChatMessage) -> Option<WsOutbou
                 attachments: Vec::new(),
                 subagent_task_id: None,
                 topic_id: None,
-                timestamp: Some(crate::protocol::now_timestamp()),
+                timestamp: Some(msg.timestamp / 1000),
             })
         }
         "tool" => {
@@ -745,7 +745,7 @@ fn chat_message_to_ws_outbound(msg: &crate::bus::ChatMessage) -> Option<WsOutbou
                     subagent_task_id: None,
                     topic_id: None,
                     duration_ms: msg.tool_duration_ms,
-                    timestamp: Some(crate::protocol::now_timestamp()),
+                    timestamp: Some(msg.timestamp / 1000),
                 }),
                 ToolMessageState::PendingUserAction => Some(WsOutbound::ToolPending {
                     id: msg.id.clone(),
@@ -756,7 +756,7 @@ fn chat_message_to_ws_outbound(msg: &crate::bus::ChatMessage) -> Option<WsOutbou
                     resume_hint: "完成外部操作后，直接发一条继续消息即可。".to_string(),
                     subagent_task_id: None,
                     topic_id: None,
-                    timestamp: Some(crate::protocol::now_timestamp()),
+                    timestamp: Some(msg.timestamp / 1000),
                 }),
             }
         }
@@ -767,7 +767,7 @@ fn chat_message_to_ws_outbound(msg: &crate::bus::ChatMessage) -> Option<WsOutbou
             attachments,
             subagent_task_id: None,
             topic_id: None,
-            timestamp: Some(crate::protocol::now_timestamp()),
+            timestamp: Some(msg.timestamp / 1000),
         }),
         _ => None,
     }
diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index a620488..510f0f0 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -76,7 +76,7 @@ function getFileName(path: string): string {
 }
 
 function formatTime(timestamp: number) {
-  return new Date(timestamp).toLocaleTimeString('zh-CN', {
+  return new Date(timestamp * 1000).toLocaleTimeString('zh-CN', {
     hour: '2-digit',
     minute: '2-digit',
   })
diff --git a/web/src/components/Sidebar/TopicList.tsx b/web/src/components/Sidebar/TopicList.tsx
index 370c0ff..12f805d 100644
--- a/web/src/components/Sidebar/TopicList.tsx
+++ b/web/src/components/Sidebar/TopicList.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { Plus, MessageSquare, Layers, Hash, Clock, RefreshCw, Trash2, Check, X } from 'lucide-react'
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
+import { Plus, MessageSquare, Layers, Hash, Clock, RefreshCw, Trash2, Check, X, ChevronLeft, ChevronRight } from 'lucide-react'
 import type { Topic } from '../../types/protocol'
 
 interface TopicListProps {
@@ -41,6 +41,50 @@ export function TopicList({
 }: TopicListProps) {
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
 
+  // Pagination — dynamically sized to fill one screen without scrolling
+  const ESTIMATED_ITEM_HEIGHT = 64 // py-3(24px) + title(20px) + mt-1.5(6px) + meta(14px)
+  const LIST_PADDING = 24 // p-3 top + bottom
+  const [pageSize, setPageSize] = useState(8) // fallback before measurement
+  const [currentPage, setCurrentPage] = useState(0)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const measurePageSize = useCallback(() => {
+    const el = listRef.current
+    if (!el) return
+    const available = el.clientHeight - LIST_PADDING
+    setPageSize(Math.max(1, Math.floor(available / ESTIMATED_ITEM_HEIGHT) - 1))
+  }, [])
+
+  useEffect(() => {
+    measurePageSize()
+    const el = listRef.current
+    if (!el) return
+    const observer = new ResizeObserver(() => measurePageSize())
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [measurePageSize])
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(topics.length / pageSize)),
+    [topics.length, pageSize]
+  )
+  const pagedTopics = useMemo(
+    () => topics.slice(currentPage * pageSize, (currentPage + 1) * pageSize),
+    [topics, currentPage, pageSize]
+  )
+
+  // Reset page when topics list changes (e.g., new data loaded)
+  useEffect(() => {
+    setCurrentPage(0)
+  }, [topics])
+
+  // Clamp currentPage when it exceeds totalPages (e.g., after deletion on last page)
+  useEffect(() => {
+    if (currentPage >= totalPages) {
+      setCurrentPage(Math.max(0, totalPages - 1))
+    }
+  }, [currentPage, totalPages])
+
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
@@ -83,7 +127,7 @@ export function TopicList({
       </div>
 
       {/* Topics 列表 */}
-      <div className="flex-1 overflow-y-auto p-3">
+      <div ref={listRef} className="flex-1 overflow-y-auto p-3">
         {!sessionId ? (
           <div className="p-4 text-center text-sm text-[var(--text-muted)]">
             <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
@@ -97,7 +141,7 @@ export function TopicList({
           </div>
         ) : (
           <div className="space-y-1">
-            {topics.map((topic, index) => (
+            {pagedTopics.map((topic, index) => (
               <div key={topic.id} className="group relative">
                 <button
                   onClick={() => onSwitchTopic(topic.id)}
@@ -109,7 +153,7 @@ export function TopicList({
                 >
                   <div className="flex items-start gap-3">
                     <span className="mt-0.5 text-xs text-[var(--text-muted)] font-mono w-4">
-                      {index + 1}
+                      {currentPage * pageSize + index + 1}
                     </span>
                     <div className="min-w-0 flex-1">
                       <div className={`truncate font-medium ${
@@ -179,6 +223,29 @@ export function TopicList({
           </div>
         )}
       </div>
+
+      {/* Pagination bar */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 border-t border-[var(--border-color)] px-3 py-2">
+          <button
+            onClick={() => setCurrentPage(p => Math.max(0, p - 1))}
+            disabled={currentPage === 0}
+            className="flex items-center justify-center h-7 w-7 rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-subtle)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed transition-all"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <span className="text-xs text-[var(--text-muted)] min-w-[3rem] text-center select-none">
+            {currentPage + 1} / {totalPages}
+          </span>
+          <button
+            onClick={() => setCurrentPage(p => Math.min(totalPages - 1, p + 1))}
+            disabled={currentPage >= totalPages - 1}
+            className="flex items-center justify-center h-7 w-7 rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--overlay-subtle)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed transition-all"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      )}
     </div>
   )
 }