load chat transcripts as a tail window and lazy-load older on scroll-up

extremely long transcripts made bottom-anchoring the virtualized list unreliable
(thousands of unmeasured variable-height items = a huge estimate the scroll never
lands on). now GET /chat/sessions/:id takes limit+before and returns a windowed
slice plus total+offset. the chat opens on the last 20 messages, anchors to the
bottom instantly, and scrolling near the top pages in the next older window,
prepending it and pinning the previously-top message so the view stays put.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -12,6 +12,9 @@ import { defaultLayout } from './defaultLayout';
 // Allowed panel app types for the /chat screen
 const ALLOWED_APP_TYPES = new Set<string | null>(['chat-session-list', 'chat-detail', null]);
 
+// How many messages to render on first open (anchored to the bottom); scroll-up pages older ones in.
+const CHAT_TAIL = 20;
+
 /** Recursively fix any panel that uses a wrong app type (e.g. officerdev/chat) */
 function normalizeLayout(node: LayoutNode): LayoutNode {
   if (node.type === 'panel') {
@@ -61,6 +64,8 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
   // Fresh /chat/<id> (deep-link or refresh): all we have is the id. Resolve the session by id — the
   // backend scans project groups — so the cwd picker lands on its real dir AND the chat resumes, exactly
   // as clicking it from the list would. Guarded so it never clobbers an already-loaded selection.
+  // Transcripts get extremely long, so we load only the tail window (?limit) and anchor to the bottom;
+  // scrolling up lazy-loads older messages. `total`/`offset` tell the chat where the window sits.
   useEffect(() => {
     if (isNew) {
       setSelected({ id: `new:${Date.now()}` });
@@ -71,7 +76,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
     let cancelled = false;
     (async () => {
       try {
-        const detail = await client.get<ClaudeSessionDetail>(`/chat/sessions/${sessionId}`);
+        const detail = await client.get<ClaudeSessionDetail>(`/chat/sessions/${sessionId}?limit=${CHAT_TAIL}`);
         if (cancelled) return;
         setActiveCwd(detail.cwd || null);
         setSelected({
@@ -79,6 +84,8 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
           model: detail.model,
           resumeSessionId: sessionId,
           initialMessages: detail.messages as unknown as NonNullable<SelectedSession>['initialMessages'],
+          total: detail.total,
+          initialOffset: detail.offset,
         });
       } catch {
         if (!cancelled) setSelected({ id: sessionId });