npm - shraga - Versions diffs - 0.1.89 → 0.1.91 - Mend

shraga 0.1.89 → 0.1.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/defaults/scripts/backfill-slack-usernames.ts +5 -0
package/dist/client/assets/index-B--gTLyT.css +10 -0
package/dist/client/assets/{index-B-8NBGtJ.js → index-C3l1Wz_q.js} +234 -234
package/dist/client/index.html +2 -2
package/package.json +2 -1
package/src/client/App.tsx +0 -2
package/src/client/components/ChatView.tsx +78 -18
package/src/client/components/ConversationHeader.tsx +7 -4
package/src/client/components/Sidebar.tsx +91 -100
package/src/client/hooks/useSessionList.ts +169 -0
package/src/server/boot.ts +37 -2
package/src/server/claude.ts +14 -2
package/src/server/data-sync.ts +43 -3
package/src/server/directives.ts +28 -7
package/src/server/engine/index.ts +17 -0
package/src/server/sessions.ts +167 -10
package/dist/client/assets/index-J2NH6FvE.css +0 -10

package/dist/client/index.html CHANGED Viewed

@@ -13,8 +13,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-B-8NBGtJ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-J2NH6FvE.css">
+    <script type="module" crossorigin src="/assets/index-C3l1Wz_q.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B--gTLyT.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.89",
+  "version": "0.1.91",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",
@@ -82,6 +82,7 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.0",
     "@types/bun": "latest",
     "@types/express": "^5.0.0",
     "@types/react": "^19.0.0",

package/src/client/App.tsx CHANGED Viewed

@@ -358,8 +358,6 @@ function AppInner() {
               refreshKey={sidebarRefresh}
               workspaceRefreshKey={workspaceRefreshKey}
               onRefreshWorkspace={refreshWorkspace}
-              userUid={user.uid}
-              userEmail={user.email || ''}
               unreads={unreads}
               busySessions={busySessions}
               socket={socket}

package/src/client/components/ChatView.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
@@ -84,6 +84,9 @@ interface Props {
 const SHOW_DETAILS_KEY = 'shraga:showDetails';
+/** Messages mounted by default; older ones stay out of the DOM behind a "show earlier" button. */
+const VISIBLE_MESSAGES = 150;
 export function ChatView({ messages, busy, connectionStatus, onPermissionRespond, onQuestionRespond, onReplay, onEdit, onFork, multiParticipant, statusItems }: Props) {
   const slots = useSlots();
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -92,17 +95,46 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
   const [showDetails, setShowDetails] = useState(() => localStorage.getItem(SHOW_DETAILS_KEY) === 'true');
   const [lightbox, setLightbox] = useState<string | null>(null);
+  // Callers pass fresh closures every render (`onFork={(i) => …}`, handlers bound to a new `conv`
+  // object). Route them through a ref so MessageRow's props stay reference-stable.
+  const cbs = useRef({ onPermissionRespond, onQuestionRespond, onReplay, onEdit, onFork });
+  cbs.current = { onPermissionRespond, onQuestionRespond, onReplay, onEdit, onFork };
+  const permissionRespond = useCallback((id: string, allow: boolean, allowAll?: boolean) => cbs.current.onPermissionRespond?.(id, allow, allowAll), []);
+  const questionRespond = useCallback((id: string, answers: QuestionAnswers) => cbs.current.onQuestionRespond?.(id, answers), []);
+  const replay = useCallback((id: string, text: string, att?: Attachment[]) => cbs.current.onReplay?.(id, text, att), []);
+  const edit = useCallback((id: string, text: string, att?: Attachment[]) => cbs.current.onEdit?.(id, text, att), []);
+  const fork = useCallback((idx: number) => cbs.current.onFork?.(idx), []);
   const handleScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
     isNearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
   };
-  const screenMap = useMemo(() => buildScreenMap(messages), [messages]);
+  // Built INCREMENTALLY into a stable Map: a full rebuild JSON.parsed every tool_result in the
+  // thread on every streamed token. Identity never changes, so it can't break MessageRow's memo —
+  // but that cuts both ways: a row whose tool_use renders a screen filled in by a LATER tool_result
+  // would stay memo-blocked on stale content forever. `screenVersion` bumps only when the map
+  // actually changes, and is passed down purely so memo sees a changed prop then (and only then).
+  const screenMapRef = useRef<Map<string, string[]>>(new Map());
+  const scannedBlocks = useRef<WeakSet<object>>(new WeakSet());
+  const screenVersionRef = useRef(0);
+  const screenVersion = useMemo(() => {
+    if (updateScreenMap(screenMapRef.current, scannedBlocks.current, messages)) screenVersionRef.current++;
+    return screenVersionRef.current;
+  }, [messages]);
+  const screenMap = screenMapRef.current;
+  // Only the last slice is mounted — an agent thread runs to thousands of blocks and the DOM
+  // (not React) is what goes sluggish. `showAll` mounts the rest on demand.
+  const [showAll, setShowAll] = useState(false);
+  const hiddenCount = showAll ? 0 : Math.max(0, messages.length - VISIBLE_MESSAGES);
+  const visibleMessages = hiddenCount > 0 ? messages.slice(hiddenCount) : messages;
   useEffect(() => {
     if (isNearBottom.current) {
-      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+      // Smooth scrolling on every streamed token is a per-frame layout cost; snap while busy.
+      bottomRef.current?.scrollIntoView({ behavior: busy ? 'auto' : 'smooth' });
     }
   }, [messages, busy]);
@@ -138,9 +170,19 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
             Details
           </button>
         </div>
-        {messages.map((msg, idx) => (
-          <MessageRow key={msg.id} message={msg} messageIndex={idx} isLast={idx === messages.length - 1} showDetails={showDetails} onPermissionRespond={onPermissionRespond} onQuestionRespond={onQuestionRespond} onReplay={onReplay} onEdit={onEdit} onFork={onFork} onImageClick={setLightbox} busy={busy && idx === messages.length - 1} screenMap={screenMap} multiParticipant={multiParticipant} />
-        ))}
+        {hiddenCount > 0 && (
+          <div className="flex justify-center pb-2">
+            <button onClick={() => setShowAll(true)} className="text-xs px-3 py-1 rounded-full border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+              Show {hiddenCount} earlier message{hiddenCount === 1 ? '' : 's'}
+            </button>
+          </div>
+        )}
+        {visibleMessages.map((msg, i) => {
+          const idx = hiddenCount + i;
+          return (
+            <MessageRow key={msg.id} message={msg} messageIndex={idx} isLast={idx === messages.length - 1} showDetails={showDetails} onPermissionRespond={permissionRespond} onQuestionRespond={questionRespond} onReplay={replay} onEdit={edit} onFork={fork} onImageClick={setLightbox} busy={busy && idx === messages.length - 1} screenMap={screenMap} screenVersion={screenVersion} multiParticipant={multiParticipant} />
+          );
+        })}
         {busy && messages[messages.length - 1]?.role !== 'assistant' && (
           <div className="flex gap-3 py-4">
@@ -188,7 +230,7 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
   );
 }
-function MessageRow({
+const MessageRow = memo(function MessageRow({
   message,
   messageIndex,
   isLast,
@@ -215,6 +257,8 @@ function MessageRow({
   onImageClick?: (src: string) => void;
   busy?: boolean;
   screenMap?: Map<string, string[]>;
+  /** Not read here — declared so memo() re-renders the row when screenMap's CONTENTS change. */
+  screenVersion?: number;
   multiParticipant?: boolean;
 }) {
   const compactBlock = message.blocks.find((b) => b.type === 'compact_marker');
@@ -359,7 +403,7 @@ function MessageRow({
       </div>
     </div>
   );
-}
+});
 function CompactMarkerDivider({ summary, compactedCount }: { summary: string; compactedCount: number }) {
   const [expanded, setExpanded] = useState(false);
@@ -507,20 +551,30 @@ function ThinkingBlock({ text }: { text: string }) {
   );
 }
-function buildScreenMap(messages: ChatMessage[]): Map<string, string[]> {
-  const map = new Map<string, string[]>();
+/**
+ * Fold any new pty-screen tool_results into `map` in place; returns true if anything was written.
+ * Each block is parsed at most once
+ * (tracked by object identity) and only when its text can plausibly hold a screen — a blind
+ * JSON.parse of every result in the thread, on every token, was the streaming hot spot.
+ */
+function updateScreenMap(map: Map<string, string[]>, scanned: WeakSet<object>, messages: ChatMessage[]): boolean {
+  let changed = false;
   for (const msg of messages) {
     for (const block of msg.blocks) {
       if (block.type !== 'tool_result' || !block.output) continue;
+      if (scanned.has(block)) continue;
+      scanned.add(block);
+      if (!block.output.includes('"screen"')) continue;
       try {
         const parsed = JSON.parse(block.output);
         if (typeof parsed?.sessionId === 'string' && Array.isArray(parsed?.screen)) {
           map.set(parsed.sessionId, parsed.screen);
+          changed = true;
         }
       } catch {}
     }
   }
-  return map;
+  return changed;
 }
 function parseAnswersFromResult(result: string): Record<string, string> {
@@ -625,16 +679,22 @@ function stripLineNumbers(text: string): string {
 function ToolResultBlock({ output }: { output: string }) {
   const [expanded, setExpanded] = useState(false);
-  const cleaned = output.trim().replace(/\[Image #\d+\]\s*/g, '').trim();
-  const trimmed = stripLineNumbers(cleaned);
+  // Regex + split + JSON.parse over the FULL output; keyed to the text so a re-render is free.
+  const { trimmed, isError, chartData, isLong, preview } = useMemo(() => {
+    const cleaned = output.trim().replace(/\[Image #\d+\]\s*/g, '').trim();
+    const t = stripLineNumbers(cleaned);
+    const err = /^(Error|ERROR)|"status"\s*:\s*[45]\d\d|ENOENT|EACCES|Permission denied|command not found|No such file/i.test(t);
+    return {
+      trimmed: t,
+      isError: err,
+      chartData: err ? null : tryParseChartData(t),
+      isLong: t.length > 200,
+      preview: t.slice(0, 120).replace(/\n/g, ' '),
+    };
+  }, [output]);
   if (!trimmed) return null;
-  const isError = /^(Error|ERROR)|"status"\s*:\s*[45]\d\d|ENOENT|EACCES|Permission denied|command not found|No such file/i.test(trimmed);
-  const chartData = !isError ? tryParseChartData(trimmed) : null;
-  const isLong = trimmed.length > 200;
-  const preview = trimmed.slice(0, 120).replace(/\n/g, ' ');
   const Icon = isError ? XCircle : Check;
   const borderCls = isError ? 'border-red-200 dark:border-red-900' : 'border-green-200 dark:border-green-900';
   const bgCls = isError

package/src/client/components/ConversationHeader.tsx CHANGED Viewed

@@ -33,11 +33,14 @@ export function deriveRuntimeBadges(input: {
   // other than where this session currently asks to run.
   const engineMismatch = input.actualEngine && input.actualEngine !== requestedEngine ? requestedEngine : undefined;
   const engineIsNative = engine === 'claude-code' || engine === 'cursor';
-  // Only trust the recorded model when we also know which engine recorded it — the pair, or neither.
+  // "The pair, or neither" is right for the ENGINE, not for the provider: a `provider/` prefix on the
+  // recorded model is direct evidence of what actually ran and was billed, and needs no engine to read.
+  // Only a BARE recorded id is unreadable alone (it belongs to whichever engine recorded it), so only
+  // that one is dropped. Sessions written before lastEngine existed carry a prefixed model and nothing
+  // else — dropping it made the UI report the requested provider, the very claim this must never make.
+  const recordedModel = input.actualEngine || input.actualModel?.includes('/') ? input.actualModel : undefined;
   const rawModel =
-    (input.actualEngine ? input.actualModel : undefined) ||
-    input.requestedModel ||
-    (engine === 'cursor' ? 'cursor/composer-2.5' : 'sonnet-4-6');
+    recordedModel || input.requestedModel || (engine === 'cursor' ? 'cursor/composer-2.5' : 'sonnet-4-6');
   // Provider = the model's prefix; a bare id belongs to the engine that ran it (claude-code ⇒ anthropic,
   // an add-on engine ⇒ that engine's own provider) — never assume anthropic just because a prefix is absent.
   const billingProvider = rawModel.includes('/') ? rawModel.split('/')[0] : engine === 'claude-code' ? 'anthropic' : engine;

package/src/client/components/Sidebar.tsx CHANGED Viewed

@@ -8,30 +8,7 @@ import { useSlots } from '@/lib/slots';
 import { MachineStats } from './MachineStats';
 import type { UnreadSession } from '@/hooks/useUnread';
 import type { AgentSocket } from '@/lib/ws';
-interface Session {
-  sessionId: string;
-  title: string;
-  userEmail: string;
-  userName: string;
-  uid: string;
-  createdAt: number;
-  lastModified: number;
-  scope?: 'system' | 'user';
-  visibleTo?: string[];
-  slackContext?: { type: 'dm' | 'channel' | 'mention'; channelName?: string; userName?: string };
-  runStatus?: 'running' | 'idle';
-  lastStopReason?: 'max_turns_reached' | 'error' | 'aborted';
-  scheduleRunStatus?: 'running' | 'ok' | 'error' | 'aborted';
-}
-type ChatsFilter = 'mine' | 'all';
-function isMine(s: Session, uid: string, email: string): boolean {
-  if (s.uid === uid) return true;
-  if (s.visibleTo?.includes(email.toLowerCase())) return true;
-  return false;
-}
+import { useSessionList, type SessionRow as Session, type ChatsFilter } from '@/hooks/useSessionList';
 interface Props {
   getToken: () => Promise<string | null>;
@@ -41,8 +18,6 @@ interface Props {
   refreshKey?: number;
   workspaceRefreshKey?: number;
   onRefreshWorkspace: () => void;
-  userUid: string;
-  userEmail: string;
   unreads?: Record<string, UnreadSession>;
   busySessions?: Set<string>;
   socket?: AgentSocket | null;
@@ -80,16 +55,25 @@ function slackLabel(s: Session): string | null {
   return null;
 }
+/**
+ * Unread rows the current scope should show. Exported so the scoping is testable on its own: it is
+ * what the old client-side `scopeFiltered`/`visibleUnreadCount` did, moved onto the server-stamped
+ * `mine` flag because the trimmed list row no longer carries uid/visibleTo.
+ */
+export function scopeUnread(unreads: Record<string, unknown>, byId: Map<string, Session>, filter: ChatsFilter): Session[] {
+  return Object.keys(unreads)
+    .map((id) => byId.get(id))
+    .filter((s): s is Session => !!s && (filter === 'all' || s.mine !== false));
+}
 const FILTER_KEY = 'chats-filter';
 const UNREAD_FILTER_KEY = 'chats-unread-filter';
-export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey, workspaceRefreshKey, onRefreshWorkspace, userUid, userEmail, unreads = {}, busySessions = new Set(), socket }: Props) {
+export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey, workspaceRefreshKey, onRefreshWorkspace, unreads = {}, busySessions = new Set(), socket }: Props) {
   const slots = useSlots();
-  const [sessions, setSessions] = useState<Session[]>([]);
   const [filter, setFilter] = useState<ChatsFilter>(() => (localStorage.getItem(FILTER_KEY) as ChatsFilter) || 'mine');
   const [unreadOnly, setUnreadOnly] = useState(() => localStorage.getItem(UNREAD_FILTER_KEY) === 'true');
   const [version, setVersion] = useState<string>('');
-  const acRef = useRef<AbortController | null>(null);
   const activeRef = useRef<HTMLButtonElement | null>(null);
   function changeFilter(f: ChatsFilter) {
@@ -103,46 +87,77 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
     localStorage.setItem(UNREAD_FILTER_KEY, String(next));
   }
-  const scopeFiltered = useMemo(() =>
-    sessions.filter((s) => filter === 'all' || isMine(s, userUid, userEmail)),
-    [sessions, filter, userUid, userEmail],
+  // ── Data ───────────────────────────────────────────────────────────────────
+  const hydrateIds = useMemo(
+    () => [activeSessionId, ...Object.keys(unreads)].filter((id): id is string => !!id),
+    [activeSessionId, unreads],
   );
+  const { sessions, cursor, loading, byId, loadMore } = useSessionList({ getToken, filter, refreshKey, hydrateIds });
+  // Both the unread VIEW and the unread DOT are scoped by `mine`, which the server stamps on every
+  // row (the trimmed list item no longer carries uid/visibleTo, so the client cannot re-derive it).
+  // Without this an owner replying in someone else's session lights the dot and lists that row
+  // under "mine" — the old client-side scopeFiltered/visibleUnreadCount did scope it.
+  // `?ids=` hydration stays UNSCOPED on purpose: the active row must render whatever the filter is.
+  const unreadRows = useMemo(() => scopeUnread(unreads, byId, filter), [unreads, byId, filter]);
+  const unreadCount = unreadRows.length;
+  const filtered = useMemo(() => {
+    if (!unreadOnly) return sessions;
+    return [...unreadRows].sort((a, b) => b.lastModified - a.lastModified);
+  }, [unreadOnly, unreadRows, sessions]);
+  // The open conversation is ALWAYS rendered: a deep link, an unread toast or any older thread lands
+  // outside the window, and a list without the active row highlights nothing and never scrolls to it.
+  const activeRow = activeSessionId && !filtered.some((s) => s.sessionId === activeSessionId)
+    ? byId.get(activeSessionId)
+    : undefined;
-  const visibleUnreadCount = useMemo(() =>
-    scopeFiltered.filter((s) => unreads[s.sessionId]).length,
-    [scopeFiltered, unreads],
-  );
-  const filtered = useMemo(() =>
-    unreadOnly ? scopeFiltered.filter((s) => unreads[s.sessionId]) : scopeFiltered,
-    [scopeFiltered, unreadOnly, unreads],
-  );
+  useEffect(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeSessionId, filtered, activeRow]);
   useEffect(() => {
     getToken().then(t => t ? fetch('/api/version', { headers: { Authorization: `Bearer ${t}` } }) : null).then(r => r?.json()).then(d => d && setVersion(d.version)).catch(() => {});
   }, []);
-  useEffect(() => {
-    acRef.current?.abort();
-    const ac = new AbortController();
-    acRef.current = ac;
-    getToken().then((token) => {
-      if (!token || ac.signal.aborted) return;
-      fetch('/api/sessions', { signal: ac.signal, headers: { Authorization: `Bearer ${token}` } })
-        .then((r) => (r.ok ? r.json() : []))
-        .then((data) => { if (Array.isArray(data)) setSessions(data); })
-        .catch(() => {});
-    });
-    return () => ac.abort();
-  }, [getToken, refreshKey]);
-  useEffect(() => {
-    if (activeRef.current) {
-      activeRef.current.scrollIntoView({ block: 'nearest' });
-    }
-  }, [activeSessionId]);
+  function renderRow(s: Session) {
+    const unread = unreads[s.sessionId];
+    const isBusy = busySessions.has(s.sessionId) || s.runStatus === 'running' || s.scheduleRunStatus === 'running';
+    const isError = !isBusy && (!!s.lastStopReason || s.scheduleRunStatus === 'error' || s.scheduleRunStatus === 'aborted');
+    const borderColor = isBusy ? 'border-amber-500' : isError ? 'border-red-500' : unread ? 'border-blue-500' : '';
+    const hasBorder = !!(isBusy || isError || unread);
+    return (
+      <button
+        key={s.sessionId}
+        ref={s.sessionId === activeSessionId ? activeRef : undefined}
+        onClick={() => onSelect(s.sessionId, s.title)}
+        className={cn(
+          'w-full text-left px-3 py-2.5 text-sm transition-colors hover:bg-accent/50 group',
+          hasBorder ? `rounded-r-lg border-l-[3px] ${borderColor}` : 'rounded-lg',
+          activeSessionId === s.sessionId && 'bg-accent',
+        )}
+      >
+        <div className="flex items-start gap-2">
+          {slackIcon(s)}
+          <div className="min-w-0 flex-1">
+            <span className={cn('block truncate text-sm leading-snug', unread && 'font-semibold')}>
+              {s.title || 'New session'}
+            </span>
+            <div className="flex items-center gap-1.5 mt-0.5">
+              <span className="text-[10px] text-muted-foreground font-medium">
+                {slackLabel(s) || s.userName}
+              </span>
+              <span className="text-[10px] text-muted-foreground/50">·</span>
+              <span className="text-[10px] text-muted-foreground">{formatTime(s.lastModified)}</span>
+            </div>
+          </div>
+        </div>
+      </button>
+    );
+  }
   return (
     <div className="flex flex-col h-full bg-muted/30">
@@ -173,53 +188,29 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
               unreadOnly ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-muted-foreground/60 hover:text-muted-foreground',
             )}
           >
-            unread{visibleUnreadCount > 0 && <span className="inline-block w-1.5 h-1.5 ml-1 rounded-full bg-blue-500 align-middle" />}
+            unread{unreadCount > 0 && <span className="inline-block w-1.5 h-1.5 ml-1 rounded-full bg-blue-500 align-middle" />}
           </button>
         </div>
       </div>
       <ScrollArea className="flex-1">
         <div className="px-2 pb-2 space-y-0.5">
-          {filtered.length === 0 && (
+          {filtered.length === 0 && !activeRow && (
             <p className="text-xs text-muted-foreground px-3 py-6 text-center">
-              {unreadOnly ? 'No unread conversations' : sessions.length === 0 ? 'No conversations yet' : 'No conversations match this filter'}
+              {loading ? 'Loading…' : unreadOnly ? 'No unread conversations' : 'No conversations yet'}
             </p>
           )}
-          {filtered.map((s) => {
-            const unread = unreads[s.sessionId];
-            const isBusy = busySessions.has(s.sessionId) || s.runStatus === 'running' || s.scheduleRunStatus === 'running';
-            const isError = !isBusy && (!!s.lastStopReason || s.scheduleRunStatus === 'error' || s.scheduleRunStatus === 'aborted');
-            const borderColor = isBusy ? 'border-amber-500' : isError ? 'border-red-500' : unread ? 'border-blue-500' : '';
-            const hasBorder = !!(isBusy || isError || unread);
-            return (
-              <button
-                key={s.sessionId}
-                ref={s.sessionId === activeSessionId ? activeRef : undefined}
-                onClick={() => onSelect(s.sessionId, s.title)}
-                className={cn(
-                  'w-full text-left px-3 py-2.5 text-sm transition-colors hover:bg-accent/50 group',
-                  hasBorder ? `rounded-r-lg border-l-[3px] ${borderColor}` : 'rounded-lg',
-                  activeSessionId === s.sessionId && 'bg-accent',
-                )}
-              >
-                <div className="flex items-start gap-2">
-                  {slackIcon(s)}
-                  <div className="min-w-0 flex-1">
-                    <span className={cn('block truncate text-sm leading-snug', unread && 'font-semibold')}>
-                      {s.title || 'New session'}
-                    </span>
-                    <div className="flex items-center gap-1.5 mt-0.5">
-                      <span className="text-[10px] text-muted-foreground font-medium">
-                        {slackLabel(s) || s.userName}
-                      </span>
-                      <span className="text-[10px] text-muted-foreground/50">·</span>
-                      <span className="text-[10px] text-muted-foreground">{formatTime(s.lastModified)}</span>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            );
-          })}
+          {activeRow && renderRow(activeRow)}
+          {filtered.map(renderRow)}
+          {!unreadOnly && cursor && (
+            <button
+              onClick={loadMore}
+              disabled={loading}
+              className="w-full text-[11px] text-muted-foreground hover:text-foreground py-2 rounded-lg hover:bg-accent/50 transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Loading…' : 'Show older'}
+            </button>
+          )}
         </div>
       </ScrollArea>

package/src/client/hooks/useSessionList.ts ADDED Viewed

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/** Mirrors the server's SessionListItem — the trimmed row shape /api/sessions returns. */
+export interface SessionRow {
+  sessionId: string;
+  title: string;
+  userName: string;
+  lastModified: number;
+  slackContext?: { type: 'dm' | 'channel' | 'mention'; channelName?: string; userName?: string };
+  runStatus?: 'running' | 'idle';
+  lastStopReason?: 'max_turns_reached' | 'error' | 'aborted';
+  scheduleRunStatus?: 'running' | 'ok' | 'error' | 'aborted';
+  /** Server-stamped: owned by (or explicitly shared with) the caller. */
+  mine?: boolean;
+}
+export interface SessionPage {
+  sessions: SessionRow[];
+  nextCursor: string | null;
+}
+export type ChatsFilter = 'mine' | 'all';
+/** Chat rows fetched per request — the list is unbounded and every row is real DOM. */
+export const PAGE_SIZE = 50;
+interface Options {
+  getToken: () => Promise<string | null>;
+  filter: ChatsFilter;
+  refreshKey?: number;
+  /** Ids that must have a row even when they sit outside the loaded window (active + unread). */
+  hydrateIds: string[];
+}
+/**
+ * The conversation list's paging/refresh state machine, kept out of the component so it can be
+ * driven directly by a test. /api/sessions is paged and trimmed (it used to ship the whole 6.76 MB
+ * index); `sessions` is the loaded window, newest first, scoped to `filter` by the SERVER — `mine`
+ * is a predicate over the whole 12k index and cannot be honestly evaluated inside one page.
+ */
+export function useSessionList({ getToken, filter, refreshKey, hydrateIds }: Options) {
+  const [sessions, setSessions] = useState<SessionRow[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  // Rows fetched by id because they sit OUTSIDE the loaded window: the active conversation, and any
+  // unread one. The unread map arrives complete over the socket (`unread_sync`), so hydrating by id
+  // is what keeps the unread filter from silently searching only the first page.
+  const [extras, setExtras] = useState<Record<string, SessionRow>>({});
+  const requestedRef = useRef<Set<string>>(new Set());
+  const acRef = useRef<AbortController | null>(null);
+  const moreAcRef = useRef<AbortController | null>(null);
+  // Read inside async resolves, where the captured `filter` may already be stale.
+  const filterRef = useRef(filter);
+  filterRef.current = filter;
+  // How many rows the user has actually paged into view. A refresh must reload THIS much, not just
+  // page 1: `session_messages_changed` is broadcast to EVERY socket (any Slack message, any
+  // scheduler run, anyone's turn ending), so on a busy box a page-1 reset fires near-continuously
+  // and collapses a user who clicked "Show older" five times back to 50 rows.
+  const depthRef = useRef(PAGE_SIZE);
+  // Reset by the consumer when the scope changes — a different scope is a different list.
+  const prevFilter = useRef(filter);
+  if (prevFilter.current !== filter) { prevFilter.current = filter; depthRef.current = PAGE_SIZE; }
+  const fetchSessions = useCallback(async (query: Record<string, string>, signal?: AbortSignal): Promise<SessionPage | null> => {
+    const token = await getToken();
+    if (!token || signal?.aborted) return null;
+    const r = await fetch(`/api/sessions?${new URLSearchParams(query)}`, { signal, headers: { Authorization: `Bearer ${token}` } });
+    if (!r.ok) return null;
+    const page = (await r.json()) as SessionPage;
+    return Array.isArray(page?.sessions) ? page : null;
+  }, [getToken]);
+  /**
+   * Re-read the first `depth` rows of the current scope, walking as many server pages as that takes
+   * (the server caps `limit`, so a depth beyond one page is a short sequential walk — bounded by
+   * what the user actually paged in, never by the 12k index).
+   */
+  const fetchWindow = useCallback(async (depth: number, f: ChatsFilter, signal: AbortSignal): Promise<SessionPage | null> => {
+    const acc: SessionRow[] = [];
+    let before: string | undefined;
+    let nextCursor: string | null = null;
+    while (acc.length < depth) {
+      const q: Record<string, string> = { filter: f, limit: String(Math.min(PAGE_SIZE, depth - acc.length)) };
+      if (before) q.before = before;
+      const page = await fetchSessions(q, signal);
+      if (!page) return null;
+      acc.push(...page.sessions);
+      nextCursor = page.nextCursor;
+      if (!nextCursor || !page.sessions.length) break;
+      before = nextCursor;
+    }
+    return { sessions: acc, nextCursor };
+  }, [fetchSessions]);
+  useEffect(() => {
+    acRef.current?.abort();
+    moreAcRef.current?.abort(); // a "Show older" in flight belongs to the list we are replacing
+    const ac = new AbortController();
+    acRef.current = ac;
+    setLoading(true);
+    // Hydrated rows are re-read too: `extras` is fetch-time data (title, lastModified, runStatus)
+    // and without this a by-id row keeps its first snapshot for the life of the page. Cleared HERE,
+    // synchronously at commit, not in the fetch's .then() — doing it on resolve lost the mount race
+    // against the by-id hydration and left the deep-linked active session with no row at all.
+    requestedRef.current.clear();
+    setExtras({});
+    fetchWindow(depthRef.current, filter, ac.signal)
+      .then((page) => {
+        if (!page || ac.signal.aborted) return;
+        setSessions(page.sessions);
+        setCursor(page.nextCursor);
+      })
+      .catch(() => {})
+      .finally(() => { if (!ac.signal.aborted) setLoading(false); });
+    return () => ac.abort();
+  }, [fetchWindow, filter, refreshKey]);
+  const loadMore = useCallback(() => {
+    if (!cursor || loading) return;
+    moreAcRef.current?.abort();
+    const ac = new AbortController();
+    moreAcRef.current = ac;
+    const forFilter = filterRef.current; // resolving under a different scope must not append
+    setLoading(true);
+    fetchSessions({ filter: forFilter, limit: String(PAGE_SIZE), before: cursor }, ac.signal)
+      .then((page) => {
+        if (!page || ac.signal.aborted || forFilter !== filterRef.current) return;
+        setSessions((prev) => {
+          const have = new Set(prev.map((s) => s.sessionId));
+          const next = [...prev, ...page.sessions.filter((s) => !have.has(s.sessionId))];
+          depthRef.current = Math.max(PAGE_SIZE, next.length);
+          return next;
+        });
+        setCursor(page.nextCursor);
+      })
+      .catch(() => {})
+      .finally(() => { if (!ac.signal.aborted) setLoading(false); });
+  }, [cursor, loading, fetchSessions]);
+  const byId = useMemo(() => {
+    const m = new Map<string, SessionRow>();
+    for (const s of Object.values(extras)) m.set(s.sessionId, s);
+    for (const s of sessions) m.set(s.sessionId, s); // a paged row wins over a hydrated one
+    return m;
+  }, [sessions, extras]);
+  // Hydrate the ids the loaded window doesn't cover. `requestedRef` stops this looping on an id the
+  // server never returns (e.g. a deleted session still in the unread map).
+  const hydrateKey = hydrateIds.join(',');
+  useEffect(() => {
+    const want = hydrateIds.filter((id) => !!id && !byId.has(id) && !requestedRef.current.has(id)).slice(0, 200);
+    if (!want.length) return;
+    for (const id of want) requestedRef.current.add(id);
+    let cancelled = false;
+    fetchSessions({ ids: want.join(',') })
+      .then((page) => {
+        if (!page || cancelled) return;
+        setExtras((prev) => {
+          const next = { ...prev };
+          for (const s of page.sessions) next[s.sessionId] = s;
+          return next;
+        });
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [hydrateKey, byId, fetchSessions]);
+  return { sessions, cursor, loading, byId, loadMore };
+}