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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V8gsmdVd7R8PJtn4UFnC4J

.gitignore

@@ -5,3 +5,4 @@ build/
 compile_commands.json
 CMakeLists.txt.user
 tags
+project.el

js/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Flowy.llink",
   "productName": "Flowy.llink",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Flowy.llink is a video messaging app for teams",
   "main": ".vite/build/main.js",
   "private": true,

js/desktop/src/components/human-avatar.tsx

@@ -29,7 +29,7 @@ export function HumanAvatar({
   const url = useAvatarUrl(avatarObjectId);
   return (
     <Avatar {...props}>
-      {url && <AvatarImage src={url} alt={initials} />}
+      <AvatarImage src={url} alt={initials} />
       <AvatarFallback className={fallbackClassName}>{initials}</AvatarFallback>
     </Avatar>
   );

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/compose/recording-overlay.tsx

@@ -7,6 +7,10 @@ import { useObjectUrl } from '@/hooks/use-object-url';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
 import type { PendingAttachment } from '@/features/compose/attachment-strip';
 import { cn } from '@/lib/utils';
+import {
+  RECORDING_MAX_DURATION_SECONDS,
+  RECORDING_WARNING_SECONDS,
+} from '@/lib/constants';
 import { Button } from '@/components/ui/button';
 import { KeyHint } from '@/components/key-hint';
 import { useComposeIntentStore } from '@/stores/compose-intent-store';
@@ -34,16 +38,50 @@ interface RecordingOverlayProps {
   objectFit?: 'cover' | 'contain';
 }
 
-function RecordingTimer() {
+const WARNING_AT_SECONDS =
+  RECORDING_MAX_DURATION_SECONDS - RECORDING_WARNING_SECONDS;
+
+/**
+ * Tracks elapsed recording time and drives the time-limit UI. Keeps the
+ * recorder itself unaware of limits: when the cap is reached it dispatches the
+ * standard `stop` intent (the same path as releasing the ` key), which finishes
+ * the recording into the review step.
+ */
+function useRecordingCountdown(active: boolean) {
   const [elapsed, setElapsed] = useState(0);
+  const requestIntent = useComposeIntentStore((s) => s.request);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setElapsed((prev) => prev + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
+    if (!active) return;
 
+    const start = Date.now();
+    let stopped = false;
+    // Tick faster than 1s so the auto-stop lands within ~250ms of the cap, but
+    // only re-render when the whole-second value actually changes.
+    const interval = setInterval(() => {
+      const seconds = Math.floor((Date.now() - start) / 1000);
+      setElapsed((prev) => (prev === seconds ? prev : seconds));
+      if (seconds >= RECORDING_MAX_DURATION_SECONDS && !stopped) {
+        stopped = true;
+        requestIntent('stop');
+      }
+    }, 250);
+    return () => {
+      clearInterval(interval);
+      setElapsed(0);
+    };
+  }, [active, requestIntent]);
+
+  return { elapsed, isWarning: elapsed >= WARNING_AT_SECONDS };
+}
+
+function RecordingTimer({
+  elapsed,
+  isWarning,
+}: {
+  elapsed: number;
+  isWarning: boolean;
+}) {
   const minutes = Math.floor(elapsed / 60);
   const seconds = elapsed % 60;
   const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
@@ -51,7 +89,14 @@ function RecordingTimer() {
   return (
     <div className="flex items-center gap-2">
       <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
-      <span className="font-mono text-sm text-white/80">{display}</span>
+      <span
+        className={cn(
+          'font-mono text-sm text-white/80',
+          isWarning && 'text-red-400',
+        )}
+      >
+        {display}
+      </span>
     </div>
   );
 }
@@ -137,14 +182,31 @@ export function RecordingOverlay({
   const isLoading = isRecording && !mediaStream;
   const requestIntent = useComposeIntentStore((s) => s.request);
 
+  const { elapsed, isWarning } = useRecordingCountdown(
+    isRecording && !isLoading,
+  );
+
   return (
     <div
       className={cn(
         'absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90',
         isReviewing && isDragging && 'ring-2 ring-inset ring-white/30',
+        isRecording && isWarning && 'record-warning-glow',
       )}
       {...(isReviewing ? dropZoneProps : {})}
     >
+      {/* Top progress bar: fills over the recording duration, red in warning */}
+      {isRecording && !isLoading && (
+        <div className="absolute inset-x-0 top-0 z-20 h-1 bg-white/10">
+          <div
+            className={cn(
+              'h-full w-full origin-left record-progress',
+              isWarning ? 'bg-red-500' : 'bg-white/80',
+            )}
+            style={{ animationDuration: `${RECORDING_MAX_DURATION_SECONDS}s` }}
+          />
+        </div>
+      )}
       {/* Loading state */}
       {isLoading && (
         <div className="z-10 flex flex-col items-center gap-2">
@@ -185,7 +247,7 @@ export function RecordingOverlay({
       {/* Top center: recording indicator */}
       <div className="absolute top-8 z-10">
         {isRecording && !isLoading ? (
-          <RecordingTimer />
+          <RecordingTimer elapsed={elapsed} isWarning={isWarning} />
         ) : isReviewing ? (
           <div className="flex items-center gap-2">
             <span className="text-sm text-white/80">Review recording</span>

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
-    ? Math.floor(safeCurrent / PAGE_SIZE) * PAGE_SIZE
-    : 0;
-  const visibleCount = paginated
-    ? Math.min(PAGE_SIZE, total - pageStart)
-    : total;
-  const hasPrevPage = paginated && pageStart > 0;
-  const hasNextPage = paginated && pageStart + PAGE_SIZE < total;
+  // Slide the visible window so the current segment stays in view with a bit of
+  // context on either side, clamped to the loaded range.
+  const sliceStart = Math.min(
+    Math.max(0, safeCurrent - Math.floor(VISIBLE_SEGMENTS / 2)),
+    Math.max(0, loadedCount - VISIBLE_SEGMENTS),
+  );
+  const sliceEnd = Math.min(loadedCount, sliceStart + VISIBLE_SEGMENTS);
+  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 { CircleCheck, FileText, Image, List, Mic, Video } from 'lucide-react';
+import { useCallback, useEffect, useLayoutEffect, useRef } from '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
- * particle. Selecting a message plays it in the immersive stream view;
- * nothing auto-advances.
+ * Browse-mode panel beside the stream: a chat-like timeline of the loaded
+ * particles. Selecting a message plays it in the immersive stream view;
+ * 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 max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
+    <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}
@@ -105,7 +170,7 @@ function ChatRow({
         if (e.key === 'Enter') onClick();
       }}
       className={cn(
-        'flex w-full cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors',
+        'flex cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors',
         isSelected ? 'bg-white/10' : 'hover:bg-white/5',
       )}
     >
@@ -116,7 +181,7 @@ function ChatRow({
         avatarObjectId={sender.avatarObjectId}
         fallbackClassName="bg-white/10 text-white/80 text-[10px] font-medium"
       />
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 overflow-hidden">
         <div className="flex items-baseline justify-between gap-2">
           <span className="truncate text-xs font-semibold text-white/90">
             {sender.displayName}
@@ -141,7 +206,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
   switch (particle.type) {
     case 'text':
       return (
-        <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
+        <p className="line-clamp-2 text-xs leading-relaxed [overflow-wrap:anywhere] whitespace-pre-line text-white/70">
           {particle.properties.content}
         </p>
       );

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>

js/desktop/src/hooks/use-stream-playback.ts

@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { useAuthStore } from '@/stores/auth-store';
 import type { Particle } from '@/api/types';
-import { useLiveParticleChildren } from '@/hooks/use-particle';
+import { useWindowedStreamParticles } from '@/hooks/use-windowed-stream-particles';
 import { toFirestoreDocPath, type ParticlePath } from '@/lib/particle-path';
 import { updateStreamPlaybackMarker } from '@/lib/firestore-particles';
 
@@ -92,6 +92,11 @@ interface UseStreamPlaybackResult {
   currentIndex: number;
   status: PlaybackStatus;
   initialized: boolean;
+  /** Whether older particles exist before the loaded window (list scroll-up). */
+  hasMoreOlder: boolean;
+  /** Extend the loaded window backward. */
+  loadOlder: () => void;
+  isLoadingOlder: boolean;
   next: () => void;
   prev: () => void;
   goTo: (index: number) => void;
@@ -113,50 +118,26 @@ export function useStreamPlayback(
 ): UseStreamPlaybackResult {
   const userId = useAuthStore((s) => s.user?.id);
   const [state, dispatch] = useReducer(playbackReducer, initialState);
-  // Read via ref so the onAdded subscription callback stays stable.
+
+  const marker = userId
+    ? (streamParticle.playback_markers?.[userId] ?? null)
+    : null;
+
+  // Windowed source: only the tail (plus enough history to cover the marker)
+  // is loaded, instead of every particle in the stream.
+  const { children, hasMoreOlder, loadOlder, isLoadingOlder } =
+    useWindowedStreamParticles(path, { marker });
+
+  // Read via ref so the new-particle effect stays cheap to reason about.
   const autoAdvanceOnNewRef = useRef(autoAdvanceOnNew);
   useEffect(() => {
     autoAdvanceOnNewRef.current = autoAdvanceOnNew;
   }, [autoAdvanceOnNew]);
-  // Track the stream ID we've initialized for, to reset when navigating between streams
+
+  // Track the stream ID we've initialized for, to reset when navigating streams.
   const initializedForRef = useRef<string | null>(null);
-  // Latest currentIndex for onParticleRemoved, which is passed into
-  // useLiveParticleChildren. Reading it through a ref keeps the callback stable
-  // (no re-subscription) and breaks the declaration cycle
-  // children -> currentIndex -> callback -> children. useEffectEvent can't be
-  // used here — Effect Events may not be passed to another hook.
-  const currentIndexRef = useRef(0);
 
-  // --- Firestore change callbacks ---
-  const onParticleAdded = useCallback((particle: Particle) => {
-    if (!autoAdvanceOnNewRef.current) return;
-    dispatch({ type: 'PARTICLE_ADDED', particleId: particle.id });
-  }, []);
-
-  const onParticleRemoved = useCallback(
-    (removed: Particle, updatedChildren: Particle[]) => {
-      const fallbackIndex = Math.min(
-        currentIndexRef.current,
-        updatedChildren.length - 1,
-      );
-      const fallback = updatedChildren[Math.max(0, fallbackIndex)];
-      dispatch({
-        type: 'PARTICLE_REMOVED',
-        removedParticleId: removed.id,
-        fallbackParticleId: fallback?.id ?? null,
-      });
-    },
-    [],
-  );
-
-  const { children } = useLiveParticleChildren(path, {
-    orderByField: 'created_at',
-    orderDirection: 'asc',
-    onAdded: onParticleAdded,
-    onRemoved: onParticleRemoved,
-  });
-
-  // Derive current index and particle from ID
+  // Derive current index and particle from ID.
   const currentIndex = useMemo(() => {
     if (!state.currentParticleId) return -1;
     return children.findIndex((c) => c.id === state.currentParticleId);
@@ -164,12 +145,64 @@ export function useStreamPlayback(
 
   const currentParticle = currentIndex !== -1 ? children[currentIndex] : null;
 
-  // Keep the ref read by onParticleRemoved in sync with the derived index.
+  // Remember the last index the current particle was actually found at, so a
+  // removal can fall back to a sensible neighbour even though `currentIndex`
+  // has already gone to -1 by the time we notice.
+  const lastValidIndexRef = useRef(0);
   useEffect(() => {
-    currentIndexRef.current = currentIndex;
+    if (currentIndex >= 0) lastValidIndexRef.current = currentIndex;
   }, [currentIndex]);
 
-  // Fallback init — always sees latest children/state via useEffectEvent
+  // --- New tail particle → resume from end ---
+  // Derive arrivals from the children tail rather than Firestore change events,
+  // which can't distinguish a genuine new particle from pagination backfill.
+  const prevNewestIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (children.length === 0) {
+      prevNewestIdRef.current = null;
+      return;
+    }
+    const newestId = children[children.length - 1].id;
+    const prevNewestId = prevNewestIdRef.current;
+    prevNewestIdRef.current = newestId;
+    if (prevNewestId === null || newestId === prevNewestId) return;
+    if (!autoAdvanceOnNewRef.current) return;
+    // Resume at the first particle added after where playback ended.
+    const prevIndex = children.findIndex((c) => c.id === prevNewestId);
+    const firstNew =
+      prevIndex >= 0
+        ? (children[prevIndex + 1] ?? children[children.length - 1])
+        : children[children.length - 1];
+    dispatch({ type: 'PARTICLE_ADDED', particleId: firstNew.id });
+  }, [children]);
+
+  // --- Current particle removed (deletion) → fall back to a neighbour ---
+  const prevIdsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    const id = state.currentParticleId;
+    const prevIds = prevIdsRef.current;
+    const currIds = new Set(children.map((c) => c.id));
+    prevIdsRef.current = currIds;
+
+    if (!id || children.length === 0) return;
+    if (currIds.has(id)) return;
+    // Only treat as a removal if it was present before — a not-yet-arrived id
+    // (e.g. optimistic goToParticle) should wait, not fall back.
+    if (!prevIds.has(id)) return;
+
+    const fallbackIndex = Math.min(
+      lastValidIndexRef.current,
+      children.length - 1,
+    );
+    const fallback = children[Math.max(0, fallbackIndex)];
+    dispatch({
+      type: 'PARTICLE_REMOVED',
+      removedParticleId: id,
+      fallbackParticleId: fallback?.id ?? null,
+    });
+  }, [children, state.currentParticleId]);
+
+  // Fallback init — always sees latest children/state via useEffectEvent.
   const initFallback = useEffectEvent(() => {
     if (state.initialized || children.length === 0) return;
     initializedForRef.current = streamParticle.id;
@@ -178,7 +211,7 @@ export function useStreamPlayback(
 
   // --- Init logic: runs on every children change until initialized ---
   useEffect(() => {
-    // Reset if we navigated to a different stream
+    // Reset if we navigated to a different stream.
     if (
       initializedForRef.current !== null &&
       initializedForRef.current !== streamParticle.id
@@ -186,7 +219,7 @@ export function useStreamPlayback(
       initializedForRef.current = null;
     }
 
-    // Already initialized for this stream
+    // Already initialized for this stream.
     if (state.initialized && initializedForRef.current === streamParticle.id)
       return;
 
@@ -195,35 +228,39 @@ export function useStreamPlayback(
     const playbackPosition = streamParticle.playback_markers?.[userId ?? ''];
 
     if (!playbackPosition) {
-      // No marker — start from the beginning
+      // No marker — start from the start of the loaded window.
       initializedForRef.current = streamParticle.id;
       dispatch({ type: 'INIT', particleId: children[0].id });
       return;
     }
 
-    // Try to find the marker's target particle
+    // Resume at the first particle after the marker.
     const found = children.find(
       (c) => c.created_at.getTime() > playbackPosition.getTime(),
     );
-
     if (found) {
       initializedForRef.current = streamParticle.id;
       dispatch({ type: 'INIT', particleId: found.id });
       return;
-    } else {
-      initializedForRef.current = streamParticle.id;
-      dispatch({ type: 'INIT', particleId: children[children.length - 1].id });
     }
 
-    // Marker target not found yet — fall back after timeout
-    const timeout = setTimeout(initFallback, INIT_FALLBACK_TIMEOUT_MS);
-    return () => clearTimeout(timeout);
+    // Marker is older than everything loaded so far. If the window is still
+    // growing backward to reach it, wait for more particles to arrive.
+    if (hasMoreOlder) {
+      const timeout = setTimeout(initFallback, INIT_FALLBACK_TIMEOUT_MS);
+      return () => clearTimeout(timeout);
+    }
+
+    // Reached the start with no particle after the marker → caught up.
+    initializedForRef.current = streamParticle.id;
+    dispatch({ type: 'INIT', particleId: children[children.length - 1].id });
   }, [
     children,
     streamParticle.id,
     streamParticle.playback_markers,
     userId,
     state.initialized,
+    hasMoreOlder,
   ]);
 
   // --- Persist playback marker (only advance forward, never backwards) ---
@@ -237,7 +274,7 @@ export function useStreamPlayback(
       lastPersistedMarkerRef.current ??
       streamParticle.playback_markers?.[userId];
 
-    // Only update if advancing beyond the current marker
+    // Only update if advancing beyond the current marker.
     if (existingMarker && currentTime.getTime() <= existingMarker.getTime())
       return;
 
@@ -266,12 +303,18 @@ export function useStreamPlayback(
   }, [children, currentIndex]);
 
   const prev = useCallback(() => {
-    if (currentIndex <= 0) return;
+    if (currentIndex < 0) return;
+    if (currentIndex === 0) {
+      // At the start of the loaded window — pull in older history so the user
+      // can keep going back.
+      if (hasMoreOlder) loadOlder();
+      return;
+    }
     dispatch({
       type: 'SET_PARTICLE',
       particleId: children[currentIndex - 1].id,
     });
-  }, [children, currentIndex]);
+  }, [children, currentIndex, hasMoreOlder, loadOlder]);
 
   const goTo = useCallback(
     (index: number) => {
@@ -295,6 +338,9 @@ export function useStreamPlayback(
     currentIndex,
     status: state.status,
     initialized: state.initialized,
+    hasMoreOlder,
+    loadOlder,
+    isLoadingOlder,
     next,
     prev,
     goTo,

js/desktop/src/hooks/use-windowed-stream-particles.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { subscribeToParticleChildren } from '@/lib/firestore-particles';
+import type { Particle } from '@/api/types';
+import {
+  toFirestoreChildrenPath,
+  type ParticlePath,
+} from '@/lib/particle-path';
+
+const DEFAULT_PAGE_SIZE = 30;
+
+interface UseWindowedStreamParticlesParams {
+  /**
+   * Resume anchor (the viewer's playback marker). The window grows backward
+   * until it covers this timestamp so the resume particle is always loaded.
+   * Captured once per stream — advancing the marker during playback does not
+   * re-window.
+   */
+  marker?: Date | null;
+  /** How many particles to add per backward growth step. */
+  pageSize?: number;
+}
+
+export interface UseWindowedStreamParticlesResult {
+  /**
+   * Loaded window, ascending (oldest → newest). The newest particle in the
+   * stream is always present — the window only ever grows backward.
+   */
+  children: Particle[];
+  isLoading: boolean;
+  error: Error | null;
+  /** Whether older particles likely exist before the loaded window. */
+  hasMoreOlder: boolean;
+  /** Extend the window backward (older history). No-op when nothing remains. */
+  loadOlder: () => void;
+  isLoadingOlder: boolean;
+}
+
+/** Per-stream mutable tracking that must survive limit-driven re-subscriptions. */
+interface WindowTracking {
+  path: string | null;
+  /** Newest created_at (ms) seen — tells new tail particles from backfill. */
+  newestMs: number | null;
+  /** Oldest created_at (ms) currently loaded. */
+  oldestMs: number | null;
+  /** Backward growth target (the marker, ms), frozen on first capture. */
+  coverageMs: number | null;
+}
+
+/**
+ * Live, windowed view of a stream's particles.
+ *
+ * Instead of subscribing to every child (the old behaviour), this keeps a
+ * `orderBy(created_at desc) limit(N)` window anchored at the newest particle
+ * and grows it backward on demand. Because the window is anchored at the tail
+ * it always contains the most recent particles, so new arrivals stream in and
+ * forward playback never needs a fetch. The window grows backward to:
+ *   1. cover the resume marker, so playback can start where the user left off;
+ *   2. service `loadOlder()` when the list view scrolls up.
+ *
+ * Output is reversed to ascending order to match the rest of the playback code.
+ */
+export function useWindowedStreamParticles(
+  path: ParticlePath | undefined,
+  {
+    marker = null,
+    pageSize = DEFAULT_PAGE_SIZE,
+  }: UseWindowedStreamParticlesParams = {},
+): UseWindowedStreamParticlesResult {
+  const [children, setChildren] = useState<Particle[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [hasMoreOlder, setHasMoreOlder] = useState(false);
+  const [isLoadingOlder, setIsLoadingOlder] = useState(false);
+  const [limit, setLimit] = useState(pageSize);
+
+  const collectionPath = path ? toFirestoreChildrenPath(path) : null;
+
+  const trackingRef = useRef<WindowTracking>({
+    path: null,
+    newestMs: null,
+    oldestMs: null,
+    coverageMs: null,
+  });
+
+  // Latest marker, read lazily inside the snapshot callback so a late-resolving
+  // marker (e.g. auth after first paint) still seeds backward coverage.
+  const markerRef = useRef(marker);
+  useEffect(() => {
+    markerRef.current = marker;
+  }, [marker]);
+
+  // Reset window state when the stream changes (render-phase adjustment — the
+  // blessed alternative to a reset effect, avoids cascading effect renders).
+  const [trackedPath, setTrackedPath] = useState(collectionPath);
+  if (trackedPath !== collectionPath) {
+    setTrackedPath(collectionPath);
+    setLimit(pageSize);
+    setChildren([]);
+    setIsLoading(true);
+    setError(null);
+    setHasMoreOlder(false);
+    setIsLoadingOlder(false);
+  }
+
+  useEffect(() => {
+    if (!collectionPath) return;
+
+    // Reset per-stream tracking on a genuine stream change, but keep it across
+    // limit-driven re-subscriptions (newest/coverage must persist).
+    const tracking = trackingRef.current;
+    if (tracking.path !== collectionPath) {
+      tracking.path = collectionPath;
+      tracking.newestMs = null;
+      tracking.oldestMs = null;
+      tracking.coverageMs = null;
+    }
+
+    const unsubscribe = subscribeToParticleChildren(collectionPath, {
+      orderByField: 'created_at',
+      orderDirection: 'desc',
+      limit,
+      onData: (descData) => {
+        const t = trackingRef.current;
+
+        // Lazily freeze the backward-coverage target from the marker.
+        if (t.coverageMs === null && markerRef.current) {
+          t.coverageMs = markerRef.current.getTime();
+        }
+
+        // Firestore caps results at `limit`; a full window means more older
+        // particles may exist beyond it.
+        const saturated = descData.length === limit;
+        const newest = descData[0];
+        const newestMs = newest ? newest.created_at.getTime() : null;
+
+        // Anti-eviction: if the window is full and genuinely newer particles
+        // arrived at the tail, grow the limit so the oldest loaded particles
+        // aren't pushed out. Skip rendering the evicted snapshot — the regrown
+        // query delivers the complete window a beat later.
+        const prevNewest = t.newestMs;
+        if (
+          saturated &&
+          newestMs !== null &&
+          prevNewest !== null &&
+          newestMs > prevNewest
+        ) {
+          const newerCount = descData.filter(
+            (d) => d.created_at.getTime() > prevNewest,
+          ).length;
+          if (newerCount > 0) {
+            t.newestMs = newestMs;
+            setLimit((l) => l + newerCount);
+            return;
+          }
+        }
+        if (newestMs !== null) t.newestMs = newestMs;
+
+        const ascData = descData.slice().reverse();
+        t.oldestMs =
+          ascData.length > 0 ? ascData[0].created_at.getTime() : null;
+
+        // Marker coverage: keep growing backward until the resume marker falls
+        // within the window (or we reach the start of the stream).
+        if (
+          saturated &&
+          t.coverageMs !== null &&
+          t.oldestMs !== null &&
+          t.oldestMs > t.coverageMs
+        ) {
+          setLimit((l) => l + pageSize);
+        }
+
+        setChildren(ascData);
+        setHasMoreOlder(saturated);
+        setIsLoading(false);
+        setIsLoadingOlder(false);
+      },
+      onError: (err) => {
+        console.warn(err);
+        setError(err);
+        setIsLoading(false);
+        setIsLoadingOlder(false);
+      },
+    });
+
+    return () => unsubscribe();
+  }, [collectionPath, limit, pageSize]);
+
+  const loadOlder = useCallback(() => {
+    if (!hasMoreOlder || isLoadingOlder) return;
+    setIsLoadingOlder(true);
+    setLimit((l) => l + pageSize);
+  }, [hasMoreOlder, isLoadingOlder, pageSize]);
+
+  if (!path) {
+    return {
+      children: [],
+      isLoading: false,
+      error: null,
+      hasMoreOlder: false,
+      loadOlder: () => {},
+      isLoadingOlder: false,
+    };
+  }
+
+  return {
+    children,
+    isLoading,
+    error,
+    hasMoreOlder,
+    loadOlder,
+    isLoadingOlder,
+  };
+}

js/desktop/src/lib/constants.ts

@@ -4,6 +4,12 @@ export const MAX_ATTACHMENT_SIZE_BYTES = 25 * 1024 * 1024;
 /** Maximum number of file attachments per particle. */
 export const MAX_ATTACHMENTS = 10;
 
+/** Maximum duration for a media (audio/video) recording, in seconds. */
+export const RECORDING_MAX_DURATION_SECONDS = 60;
+
+/** When this many seconds or fewer remain, show the red warning state. */
+export const RECORDING_WARNING_SECONDS = 10;
+
 export const SUPPORT_EMAIL = 'team@flowylabs.ai';
 
 export const PRIVACY_URL = 'https://flowylabs.ai/llink/privacy';

js/desktop/src/styles/globals.css

@@ -186,3 +186,39 @@
 .no-drag {
   -webkit-app-region: no-drag;
 }
+
+/* Recording time-limit progress bar: a single CSS animation fills the bar
+   left→right over the recording duration (duration set inline), avoiding
+   per-frame React renders. */
+@keyframes record-progress {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+.record-progress {
+  transform: scaleX(0);
+  animation-name: record-progress;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+/* Pulsing red glow around the recording overlay during the final warning window. */
+@keyframes record-warning-glow {
+  0%,
+  100% {
+    box-shadow:
+      inset 0 0 0 2px var(--destructive),
+      inset 0 0 24px 0 oklch(0.6 0.24 27 / 0.25);
+  }
+  50% {
+    box-shadow:
+      inset 0 0 0 3px var(--destructive),
+      inset 0 0 60px 0 oklch(0.6 0.24 27 / 0.5);
+  }
+}
+.record-warning-glow {
+  animation: record-warning-glow 1s ease-in-out infinite;
+}