feat(desktop): count-free progress indicator + infinite-scroll stream list

Follow-up to windowed particle pagination: adapt the stream UI now that the
loaded set is a window rather than the whole stream.

Progress indicator: drop the absolute "{n} / {total}" counter (the true count
is unknown when paginated) in favour of a streaming, count-free scrubber. It
renders a sliding window of segments around the current position (newest on
the right); the edge stubs page through the loaded window and pull in older
history via onLoadOlder when scrubbing past the oldest loaded segment.

Stream list sidebar: auto-fetch older particles via an IntersectionObserver
sentinel as the user scrolls toward the top, with viewport scroll-anchoring so
prepended history doesn't jolt the view. Auto-scroll-to-current is now gated on
genuine selection changes (not index shifts from prepends). Header count gains
a "+" while more history exists, and a spinner shows while paging.

ScrollArea gains an optional `viewportRef` to expose the scroll viewport for
anchoring and observers.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01V8gsmdVd7R8PJtn4UFnC4J

js/desktop/src/components/ui/scroll-area.tsx

@@ -6,8 +6,12 @@ import { cn } from '@/lib/utils';
 function ScrollArea({
   className,
   children,
+  viewportRef,
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  /** Ref to the scrollable viewport, e.g. for scroll anchoring or observers. */
+  viewportRef?: React.Ref<HTMLDivElement>;
+}) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -15,6 +19,7 @@ function ScrollArea({
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         data-slot="scroll-area-viewport"
         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"
       >

js/desktop/src/features/particles/playback-page-indicator.tsx

@@ -7,58 +7,87 @@ import {
 import type { HumanPresence } from '@/hooks/use-presence-positions';
 
 const MAX_VISIBLE_AVATARS = 3;
-const PAGE_SIZE = 10;
+const VISIBLE_SEGMENTS = 10;
 
 interface PlaybackPageIndicatorProps {
-  total: number;
+  /** Number of particles currently loaded in the window. */
+  loadedCount: number;
   current: number;
   progress: number;
   onGoTo: (index: number) => void;
   presenceBySegment?: Map<number, HumanPresence[]>;
   /** Set of humanIds currently online in the stream channel. */
   onlineHumanIds?: Set<string>;
+  /** More (older) particles exist before the loaded window. */
+  hasMoreOlder?: boolean;
+  /** Pull in older history when scrubbing past the oldest loaded segment. */
+  onLoadOlder?: () => void;
   /** Render only avatars or only tracks. Omit to render both. */
   layer?: 'avatars' | 'tracks';
 }
 
+/**
+ * A streaming, count-free progress scrubber. The stream is paginated, so the
+ * true particle count is unknown — instead this shows a sliding window of
+ * segments around the current position. Segments map to the loaded particles
+ * (newest on the right); the edge stubs scrub within the window and pull in
+ * older history when you reach the oldest loaded segment.
+ */
 export function PlaybackPageIndicator({
-  total,
+  loadedCount,
   current,
   progress,
   onGoTo,
   presenceBySegment,
   onlineHumanIds,
+  hasMoreOlder,
+  onLoadOlder,
   layer,
 }: PlaybackPageIndicatorProps) {
-  if (total === 0) return null;
+  if (loadedCount === 0) return null;
 
   const showAvatars = layer !== 'tracks';
   const showTracks = layer !== 'avatars';
 
-  const paginated = total > PAGE_SIZE;
   const safeCurrent = current < 0 ? 0 : current;
-  const pageStart = paginated
+  // Slide the visible window so the current segment stays in view with a bit of
-    ? Math.floor(safeCurrent / PAGE_SIZE) * PAGE_SIZE
+  // context on either side, clamped to the loaded range.
-    : 0;
+  const sliceStart = Math.min(
-  const visibleCount = paginated
+    Math.max(0, safeCurrent - Math.floor(VISIBLE_SEGMENTS / 2)),
-    ? Math.min(PAGE_SIZE, total - pageStart)
+    Math.max(0, loadedCount - VISIBLE_SEGMENTS),
-    : total;
+  );
-  const hasPrevPage = paginated && pageStart > 0;
+  const sliceEnd = Math.min(loadedCount, sliceStart + VISIBLE_SEGMENTS);
-  const hasNextPage = paginated && pageStart + PAGE_SIZE < total;
+  const visibleCount = sliceEnd - sliceStart;
+
+  const paginated = loadedCount > VISIBLE_SEGMENTS || !!hasMoreOlder;
+  // Older = lower indices (left); newer = higher indices (right).
+  const hasOlder = sliceStart > 0 || !!hasMoreOlder;
+  const hasNewer = sliceEnd < loadedCount;
+
+  // Stubs jump a page at a time; reaching the oldest loaded pulls in history.
+  const goOlder = () => {
+    const target = safeCurrent - VISIBLE_SEGMENTS;
+    if (target >= 0) onGoTo(target);
+    else if (sliceStart > 0) onGoTo(0);
+    else if (hasMoreOlder) onLoadOlder?.();
+  };
+  const goNewer = () => {
+    onGoTo(Math.min(loadedCount - 1, safeCurrent + VISIBLE_SEGMENTS));
+  };
 
   return (
     <div className="flex w-full flex-col items-stretch leading-none">
       <div className="flex w-full items-end gap-px">
         {paginated && (
           <GhostStub
-            visible={hasPrevPage}
+            visible={hasOlder}
             interactive={showTracks}
-            onClick={() => onGoTo(pageStart - 1)}
+            onClick={goOlder}
           />
         )}
         <div className="flex flex-1 items-end gap-px">
           {Array.from({ length: visibleCount }, (_, j) => {
-            const i = pageStart + j;
+            const i = sliceStart + j;
             const presence = presenceBySegment?.get(i);
             return (
               <div key={i} className="flex flex-1 flex-col items-stretch">
@@ -100,17 +129,12 @@ export function PlaybackPageIndicator({
         </div>
         {paginated && (
           <GhostStub
-            visible={hasNextPage}
+            visible={hasNewer}
             interactive={showTracks}
-            onClick={() => onGoTo(pageStart + PAGE_SIZE)}
+            onClick={goNewer}
           />
         )}
       </div>
-      {paginated && showTracks && current >= 0 && (
-        <div className="pointer-events-none pt-1 text-center text-[10px] font-medium tabular-nums tracking-wide text-white/40">
-          {current + 1} / {total}
-        </div>
-      )}
     </div>
   );
 }

js/desktop/src/features/particles/stream-bottom-bar.tsx

@@ -7,24 +7,28 @@ import type { HumanPresence } from '@/hooks/use-presence-positions';
 
 export function BottomBar({
   visible,
-  total,
+  loadedCount,
   current,
   progress,
   onGoTo,
   presenceBySegment,
   onlineHumanIds,
+  hasMoreOlder,
+  onLoadOlder,
   exitRemainingMs,
   onOpenKeybindings,
   onOpenHuddle,
   onExit,
 }: {
   visible: boolean;
-  total: number;
+  loadedCount: number;
   current: number;
   progress: number;
   onGoTo: (index: number) => void;
   presenceBySegment: Map<number, HumanPresence[]>;
   onlineHumanIds: Set<string>;
+  hasMoreOlder: boolean;
+  onLoadOlder: () => void;
   exitRemainingMs: number | null;
   onOpenKeybindings: () => void;
   onOpenHuddle: () => void;
@@ -41,21 +45,25 @@ export function BottomBar({
     >
       {/* Presence avatars — above the blurred background */}
       <PlaybackPageIndicator
-        total={total}
+        loadedCount={loadedCount}
         current={current}
         progress={progress}
         onGoTo={onGoTo}
         presenceBySegment={presenceBySegment}
         onlineHumanIds={onlineHumanIds}
+        hasMoreOlder={hasMoreOlder}
+        onLoadOlder={onLoadOlder}
         layer="avatars"
       />
       {/* Blurred background container — tracks + controls */}
       <div className="pb-3">
         <PlaybackPageIndicator
-          total={total}
+          loadedCount={loadedCount}
           current={current}
           progress={progress}
           onGoTo={onGoTo}
+          hasMoreOlder={hasMoreOlder}
+          onLoadOlder={onLoadOlder}
           layer="tracks"
         />
         <div className="flex items-center justify-center px-3 pt-2 gap-2">

js/desktop/src/features/particles/stream-list-sidebar.tsx

@@ -1,5 +1,13 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { CircleCheck, FileText, Image, List, Mic, Video } from 'lucide-react';
+import {
+  CircleCheck,
+  FileText,
+  Image,
+  List,
+  Loader2,
+  Mic,
+  Video,
+} from 'lucide-react';
 import { isParticleDeleted, type Human, type Particle } from '@/api/types';
 import { cn } from '@/lib/utils';
 import { useNetwork } from '@/hooks/use-networks';
@@ -15,12 +23,18 @@ interface StreamListSidebarProps {
   currentIndex: number;
   onSelect: (index: number) => void;
   onToggle: () => void;
+  /** More (older) particles exist before the loaded window. */
+  hasMoreOlder: boolean;
+  /** Load the next page of older particles. */
+  onLoadOlder: () => void;
+  isLoadingOlder: boolean;
 }
 
 /**
- * Browse-mode panel beside the stream: a chat-like timeline of every
+ * Browse-mode panel beside the stream: a chat-like timeline of the loaded
- * particle. Selecting a message plays it in the immersive stream view;
+ * particles. Selecting a message plays it in the immersive stream view;
- * nothing auto-advances.
+ * nothing auto-advances. Older history is fetched automatically as the user
+ * scrolls toward the top.
  */
 export function StreamListSidebar({
   items,
@@ -28,22 +42,67 @@ export function StreamListSidebar({
   currentIndex,
   onSelect,
   onToggle,
+  hasMoreOlder,
+  onLoadOlder,
+  isLoadingOlder,
 }: StreamListSidebarProps) {
   const network = useNetwork(networkId);
   const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
 
+  // Scroll into view only when the selection genuinely changes — not when the
+  // current index shifts because older particles were prepended.
+  const selectedId = currentIndex >= 0 ? items[currentIndex]?.id : undefined;
+  const prevSelectedIdRef = useRef<string | undefined>(undefined);
   useEffect(() => {
-    if (currentIndex >= 0) {
+    if (selectedId && selectedId !== prevSelectedIdRef.current) {
       rowRefs.current[currentIndex]?.scrollIntoView({ block: 'nearest' });
     }
-  }, [currentIndex]);
+    prevSelectedIdRef.current = selectedId;
+  }, [selectedId, currentIndex]);
+
+  // Anchor the viewport when older particles are prepended so the content the
+  // user is looking at stays put instead of jumping.
+  const pendingAnchorRef = useRef<{ height: number; top: number } | null>(null);
+  const requestOlder = useCallback(() => {
+    const vp = viewportRef.current;
+    if (!vp) return;
+    pendingAnchorRef.current = { height: vp.scrollHeight, top: vp.scrollTop };
+    onLoadOlder();
+  }, [onLoadOlder]);
+
+  useLayoutEffect(() => {
+    const vp = viewportRef.current;
+    const anchor = pendingAnchorRef.current;
+    if (!vp || !anchor) return;
+    const delta = vp.scrollHeight - anchor.height;
+    if (delta > 0) vp.scrollTop = anchor.top + delta;
+    pendingAnchorRef.current = null;
+  }, [items]);
+
+  // Auto-fetch older history when the top sentinel scrolls into view.
+  useEffect(() => {
+    const vp = viewportRef.current;
+    const sentinel = sentinelRef.current;
+    if (!vp || !sentinel || !hasMoreOlder) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !isLoadingOlder) requestOlder();
+      },
+      { root: vp, rootMargin: '120px 0px 0px 0px' },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMoreOlder, isLoadingOlder, requestOlder]);
 
   return (
     <aside className="dark flex w-60 shrink-0 flex-col overflow-hidden border-l border-white/10 bg-zinc-950">
       <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
         <List className="size-3.5 text-white/40" />
         <span className="truncate text-sm font-medium text-white/90 mr-auto">
-          {items.length} messages
+          {items.length}
+          {hasMoreOlder ? '+' : ''} messages
         </span>
         <KeyHint
           keys="L"
@@ -54,8 +113,14 @@ export function StreamListSidebar({
           to close
         </KeyHint>
       </div>
-      <ScrollArea className="min-h-0 flex-1">
+      <ScrollArea viewportRef={viewportRef} className="min-h-0 flex-1">
         <div className="flex flex-col gap-0.5 px-2 py-2">
+          <div ref={sentinelRef} aria-hidden />
+          {hasMoreOlder && (
+            <div className="flex items-center justify-center py-2 text-white/40">
+              <Loader2 className="size-3.5 animate-spin" />
+            </div>
+          )}
           {items.map((item, index) => (
             <div
               key={item.id}

js/desktop/src/features/particles/stream-view.tsx

@@ -219,6 +219,9 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     currentParticle,
     currentIndex,
     status,
+    hasMoreOlder,
+    loadOlder,
+    isLoadingOlder,
     next,
     prev,
     goTo,
@@ -545,12 +548,14 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
         {/* BottomBar — pinned visible while browsing, mouse-activity in player */}
         <BottomBar
           visible={mode === 'list' || controlsVisible}
-          total={children.length}
+          loadedCount={children.length}
           current={currentIndex}
           progress={progress}
           onGoTo={goTo}
           presenceBySegment={presenceBySegment}
           onlineHumanIds={onlineHumanIds}
+          hasMoreOlder={hasMoreOlder}
+          onLoadOlder={loadOlder}
           exitRemainingMs={exitRemainingMs}
           onOpenKeybindings={() => setShowKeybindings(true)}
           onOpenHuddle={handleOpenHuddle}
@@ -573,6 +578,9 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
           currentIndex={currentIndex}
           onSelect={goTo}
           onToggle={toggleViewMode}
+          hasMoreOlder={hasMoreOlder}
+          onLoadOlder={loadOlder}
+          isLoadingOlder={isLoadingOlder}
         />
       )}
     </div>