feat: show reels in the profile grid, as Instagram does

The Posts tab filtered reels out, so the grid was not the archive — it
was the archive minus its videos. For `for.heejin` that hid 533 of 1225
posts; for `loonatheworld`, 1100 of 3813. On Instagram the grid holds
everything and the Reels tab is a filtered view of that same set.

Extract the tab logic to src/lib/post-tabs.ts so the reel heuristic is
testable outside the component, and add dedupePostCopies: the jd2 flow
crawls the profile URL and the /reels URL separately because the profile
page misses some reels, so the two overlap and a reel can land on disk
twice. Those are two posts with distinct directory-scoped ids, which the
grid would now render side by side; the reels-source copy wins so the
survivor is still recognised as a reel.

Deciding what *is* a reel stays a guess for most archives. Instagram
marks it with product_type ("clips" vs "feed" vs "igtv" — all three are
GraphVideo, and aspect ratio does not separate them), but only newer
Instaloader captures carry it: 1101 of gibiofficial's 5919 sidecars, and
only 2 marked clips. JDownloader archives carry none, so those still
fall back to treating a lone video as a reel.

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

CLAUDE.md

@@ -15,6 +15,9 @@ InstaArchive Viewer is a React 19 + Vite 6 PWA for browsing archived Instagram d
 - `npm run lint` — type-check only (`tsc --noEmit`)
 - `npm test` / `npm run test:watch` — vitest
 - `npx vitest run src/lib/archive-patterns.test.ts` — a single test file
+- `npm run jd2 -- --archives <dir> --dry-run` — generate JDownloader `.crawljob`
+  files for every profile on disk (see `scripts/jd2-sync.ts` and
+  `docs/jdownloader.md`)
 
 Local development usually needs both `npm run dev` and `npm run server`. Local-folder mode works without the backend; server-mode archives do not.
 
@@ -71,25 +74,74 @@ Restoring an archive **rehydrates URLs from `path`**: server archives rebuild HT
 
 Images over 1MiB are downscaled in a Web Worker via `OffscreenCanvas`. The queue is **serial on purpose** — decoding several 50MP+ images at once OOMs the tab. `requestThumbnail` must keep a stable identity (it reads cache state through a ref), or every completed thumbnail re-runs the effect in all mounted thumbnails.
 
-### URL state (`src/App.tsx`)
+### Profile tabs (`src/lib/post-tabs.ts`)
 
-App state syncs to `?a=` / `?t=` / `?p=`. Two rules, both learned from real bugs:
+The grid holds **everything**, reels included, and the Reels tab is a *filtered view* of that same set — as on Instagram. Only the Reels tab filters. The tabs were mutually exclusive until v1.7.0, which hid a lot: 1100 of `groupfandom`'s 3813 posts and 533 of `for.member`'s 1225 never appeared in the grid at all.
 
-- The initial query string is captured into a ref on first render; the URL is rewritten from state as soon as anything loads, so reading `window.location` later sees the rewrite, not the user's link.
+Deciding *what is a reel* has no good answer for most archives. Instagram's own marker is `product_type` on the post's GraphQL node (`clips` = reel, `feed` = ordinary feed video, `igtv`, `story`) — `__typename` is `GraphVideo` for all three, and aspect ratio does not separate them either. But:
+
+- Only Instaloader archives carry that metadata, and only newer captures. A survey of `hazelofficial` found `product_type` on 1101 of 5919 sidecars, and just **2** posts marked `clips`.
+- JDownloader archives carry none at all — media plus a `.txt` holding the bare caption.
+
+So the viewer believes a `- reels` sidecar directory when one exists, and otherwise falls back to treating a lone video as a reel. **The fallback is a guess**: it cannot tell a reel from a feed video or an old IGTV upload, and it misses videos inside carousels.
+
+`dedupePostCopies` exists because the JDownloader flow crawls the profile URL and the `/reels/` URL separately (the profile page misses some reels), so the two overlap and a reel can land on disk twice. Those become two posts with distinct directory-scoped ids, which the grid would otherwise render side by side. It dedupes by shortcode, preferring the reels-source copy. It is only safe over `allPosts` — stories and highlights are excluded there, and a shortcode may legitimately appear in both a profile and a highlight.
+
+### URL state (`src/App.tsx`, `src/lib/routing.ts`)
+
+Paths mirror Instagram: `/<archive>/`, `/<archive>/reels/`, `/<archive>/p/<shortcode>/`. The old `?a=&t=&p=` form is still parsed for existing links but never written. Reserved prefixes (`api`, `archives`, `assets`…) can't be mistaken for a profile name.
+
+A post URL carries no tab, as on Instagram — the tab is re-derived from the post's `source`, so a reel link lands on the Reels tab and pages through reels. Sidecar posts keep directory-scoped ids internally but expose only the shortcode.
+
+Three rules, all learned from real bugs:
+
+- The initial route is captured into a ref on first render; the URL is rewritten from state as soon as anything loads, so reading `window.location` later sees the rewrite, not the user's link.
 - URL writing is gated on `hasInitialLoaded`, otherwise it erases the deep link before the loader consumes it.
+- Deep-link resolution waits on the archive fetch having *settled* (`archivesFetched`), not on `isServerMode`, which is still false while the request is in flight.
 
-Deep-link resolution waits on the archive fetch having *settled*, not on `isServerMode` (which is still false while in flight).
+### Mobile feed (`src/components/PostFeed.tsx`)
+
+Below `md`, opening a post renders a scrolling feed page rather than the modal (`useIsMobile` decides). Only a window of posts is mounted; it grows both ways, and prepending corrects `scrollTop` in a `useLayoutEffect` so content doesn't jump. Only the post crossing the viewport centre plays its video and drives the URL. Desktop keeps `PostModal`; both share `MediaCarousel`.
 
 ### Backend (`server.ts`)
 
 Serves `/api/archives`, `/api/archives/:name/files`, static `/archives`, and the built SPA. Notes:
 
 - Express decodes route params **after** segment matching, so `..%2f` reaches the handler as `../`. All user-supplied archive names go through `resolveArchivePath`.
-- Sets CSP and related security headers. The CSP allows `blob:`/`data:` for media and `unsafe-inline` styles (the animation library sets inline styles); scripts stay same-origin only.
 - `os.userInfo()` throws for a UID with no `/etc/passwd` entry, which is what `--user 1234:1234` produces — use `describeUser()`.
 
+### CSP: do not tighten `script-src` or `connect-src` without testing xz
+
+The xz decompressor for Instaloader `.json.xz` sidecars is **WebAssembly**, embedded as a `data:` URL the library fetches at startup. The policy must keep:
+
+```
+script-src  'self' 'wasm-unsafe-eval'     // compile wasm, without allowing eval() of JS
+connect-src 'self' data:                  // fetch the embedded module
+```
+
+Removing either breaks decoding with a bare `TypeError: Failed to fetch` **and no stack** — it surfaces through `new Response(stream).json()`, so it reads like a network fault rather than a policy block. The visible symptom is not an error page: archives silently lose captions, story flags and all profile metadata (follower counts, bio, name). This shipped broken for several releases.
+
+To check quickly, run in the page console:
+
+```js
+await fetch('data:application/wasm;base64,AGFzbQEAAAA=')            // connect-src
+await WebAssembly.instantiate(Uint8Array.of(0,97,115,109,1,0,0,0))  // script-src
+```
+
+**The Vite dev server does not send these headers**, so anything CSP-related is invisible in `npm run dev`. Verify security-header and PWA behaviour by building and serving `dist/` through `server.js`, not against the dev server.
+
+### PWA: server-only changes do not reach installed clients
+
+The service worker precaches `index.html` **together with its response headers**. A change that touches only the server (a CSP fix, a new header) leaves the client build byte-identical, so the precache manifest and `sw.js` are unchanged, the worker never updates, and installed clients keep replaying the old shell with the old headers — indefinitely.
+
+`vite.config.ts` therefore compiles the package version into the client via `define: { __APP_VERSION__ }`, and `App.tsx` renders it in the footer. That is **load-bearing**: it makes every release change the bundle hash → `index.html` → its precache revision → `sw.js`, which is what browsers byte-compare to decide whether to update. Don't remove it as dead weight.
+
+To recover a client stuck on an old shell: unregister the service worker, delete its caches, reload.
+
 ### Deployment
 
+Live archives live in `<share>/Instagram-archive/archives/` — one directory per profile plus sidecars. Directories that are not Instagram profiles (tool output, exports from other services) sit *outside* that folder so they never reach the viewer.
+
 Container runs as non-root. The image defaults to `node`, but the archive share must be *listable* by that UID — a mode-711 share owned by another account needs `user: "<uid>:<gid>"` in compose. Mount a volume at `/cache` so the index survives restarts.
 
 ### PWA / build quirks

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "instaarchive-viewer",
-  "version": "1.4.0",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "instaarchive-viewer",
-      "version": "1.4.0",
+      "version": "1.7.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.14",
         "@vitejs/plugin-react": "^5.0.4",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "instaarchive-viewer",
   "private": true,
-  "version": "1.4.0",
+  "version": "1.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port=3000 --host=0.0.0.0",
@@ -12,7 +12,8 @@
     "clean": "rm -rf dist",
     "lint": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "jd2": "tsx scripts/jd2-sync.ts"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",

server.ts

@@ -80,10 +80,16 @@ app.use((req, res, next) => {
     "default-src 'self'",
     "img-src 'self' blob: data:",
     "media-src 'self' blob: data:",
-    "script-src 'self'",
+    // 'wasm-unsafe-eval' permits WebAssembly compilation without allowing
+    // eval() of JavaScript. The xz decompressor used for Instaloader's
+    // .json.xz sidecars is WebAssembly, embedded as a data: URL it fetches at
+    // startup — so connect-src must allow data: too. Without both, decoding
+    // fails with a bare "TypeError: Failed to fetch" and every archive silently
+    // loses its captions, story flags and profile metadata.
+    "script-src 'self' 'wasm-unsafe-eval'",
     "style-src 'self' 'unsafe-inline'",
     "font-src 'self'",
-    "connect-src 'self'",
+    "connect-src 'self' data:",
     "worker-src 'self' blob:",
     "frame-ancestors 'self'",
     "object-src 'none'",

src/App.tsx

@@ -17,8 +17,9 @@ import {
 import { motion, AnimatePresence } from 'motion/react';
 
 import { cn } from './lib/utils';
-import { PRESS } from './lib/motion';
+import { PRESS, prefersReducedMotion } from './lib/motion';
 import { buildPath, findPostBySlug, parseRoute, postSlug, tabForSource } from './lib/routing';
+import { postsForTab } from './lib/post-tabs';
 import { LocalArchiveFile, RemoteArchiveFile } from './lib/archive-files';
 import {
   deleteCachedArchive,
@@ -38,6 +39,8 @@ import { CacheData, Post, ServerArchive, ServerArchiveFile } from './types';
 import { ArchiveDashboard } from './components/ArchiveDashboard';
 import { StoryViewer } from './components/StoryViewer';
 import { PostModal } from './components/PostModal';
+import { PostFeed } from './components/PostFeed';
+import { useIsMobile } from './hooks/useIsMobile';
 import { PostThumbnail } from './components/PostThumbnail';
 import { useArchiveScanner } from './hooks/useArchiveScanner';
 import { useThumbnailQueue } from './hooks/useThumbnailQueue';
@@ -70,6 +73,7 @@ export default function App() {
    */
   const initialRouteRef = useRef(parseRoute(window.location.pathname, window.location.search));
 
+  const isMobile = useIsMobile();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const profilePicInputRef = useRef<HTMLInputElement>(null);
 
@@ -108,6 +112,30 @@ export default function App() {
 
   const [lastLoadedScanningImage, setLastLoadedScanningImage] = useState<string | null>(null);
 
+  /**
+   * Blurred backdrops behind the scanning UI, newest last.
+   *
+   * Each new image is stacked *over* the previous one and fades in; the one
+   * underneath stays fully opaque until it's covered. Cross-fading by swapping
+   * a single element left the pale backdrop showing through mid-transition,
+   * which read as a white flash between every image.
+   */
+  const [scanBackdrops, setScanBackdrops] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!lastLoadedScanningImage) return;
+    setScanBackdrops(prev =>
+      prev[prev.length - 1] === lastLoadedScanningImage
+        ? prev
+        : [...prev, lastLoadedScanningImage].slice(-3),
+    );
+  }, [lastLoadedScanningImage]);
+
+  // Don't carry one archive's backdrops into the next scan.
+  useEffect(() => {
+    if (!isScanning) { setScanBackdrops([]); setLastLoadedScanningImage(null); }
+  }, [isScanning]);
+
   const {
     username,
     fullName,
@@ -145,20 +173,11 @@ export default function App() {
   const clearCache = async (name: string) => { await deleteCachedArchive(name); await refreshCachedArchives(); };
 
   /**
-   * Archives with a `- reels` sidecar directory say outright which posts are
+   * The grid shows everything, reels included, and the Reels tab is a filtered
-   * reels; only fall back to the "lone video" heuristic for archives that have
+   * view of the same set — see src/lib/post-tabs.ts for the reel test and for
-   * no such directory.
+   * why a reel can arrive on disk twice.
    */
-  const hasReelSource = useMemo(() => allPosts.some(p => p.source === 'reels'), [allPosts]);
+  const filteredPosts = useMemo(() => postsForTab(allPosts, activeTab), [allPosts, activeTab]);
-  const isReel = useCallback((p: Post) => (
-    hasReelSource ? p.source === 'reels' : p.media.length === 1 && p.media[0].type === 'video'
-  ), [hasReelSource]);
-
-  const filteredPosts = useMemo(() => {
-    if (activeTab === 'reels') return allPosts.filter(isReel);
-    if (activeTab === 'posts') return allPosts.filter(p => !isReel(p));
-    return [];
-  }, [allPosts, activeTab, isReel]);
 
   /** Story highlights, grouped into the circles shown under the bio. */
   const highlightGroups = useMemo(() => {
@@ -457,17 +476,28 @@ export default function App() {
                 onLoad={() => setLastLoadedScanningImage(currentScanningImage)} 
               />
             )}
-            <div className="absolute inset-0 z-0">
+            {/*
-              <AnimatePresence initial={false}>
+              The 0.4 lives on the group, not the images: two layers overlap
-                <motion.img 
+              during a cross-fade, and fading them individually would darken the
-                  key={lastLoadedScanningImage}
+              backdrop as they cross. Inside the group each layer goes to full
-                  src={lastLoadedScanningImage || undefined}
+              opacity, so the stack is always completely covered.
+            */}
+            <div className="absolute inset-0 z-0 opacity-40">
+              {scanBackdrops.map(src => (
+                <motion.img
+                  key={src}
+                  src={src}
                   initial={{ opacity: 0 }}
-                  animate={{ opacity: 0.4 }}
+                  animate={{ opacity: 1 }}
-                  transition={{ duration: 1.5 }}
+                  transition={prefersReducedMotion() ? { duration: 0 } : { duration: 0.9, ease: 'easeInOut' }}
+                  onAnimationComplete={() => setScanBackdrops(prev => {
+                    // Once this layer is opaque it hides everything below it.
+                    const i = prev.indexOf(src);
+                    return i > 0 ? prev.slice(i) : prev;
+                  })}
                   className="absolute inset-0 w-full h-full object-cover blur-[60px] scale-110"
                 />
-              </AnimatePresence>
+              ))}
             </div>
             <div className="absolute inset-0 bg-white/40 z-1" />
             <div className="relative z-10 w-full max-w-4xl px-4 flex flex-col items-center gap-8 text-black">
@@ -549,21 +579,36 @@ export default function App() {
         )}
       </main>
 
-      <AnimatePresence>
+      {/*
-        {selectedPost && (
+        Mobile opens a real scrolling feed page, the way Instagram does; desktop
-          <PostModal 
+        keeps the modal, where a centred sheet with side arrows fits the pointer.
-            post={selectedPost} 
+      */}
-            nextPost={postIndex < filteredPosts.length - 1 ? filteredPosts[postIndex + 1] : undefined}
+      {selectedPost && isMobile ? (
-            prevPost={postIndex > 0 ? filteredPosts[postIndex - 1] : undefined}
+        <PostFeed
-            onClose={() => setSelectedPost(null)} 
+          posts={filteredPosts}
-            onNextPost={onNextPost} 
+          initialPostId={selectedPost.id}
-            onPrevPost={onPrevPost} 
+          profilePic={profilePic}
-            hasNextPost={postIndex < filteredPosts.length - 1} 
+          title={activeTab === 'reels' ? 'Reels' : 'Posts'}
-            hasPrevPost={postIndex > 0} 
+          onClose={() => setSelectedPost(null)}
-            profilePic={profilePic} 
+          onActivePostChange={setSelectedPost}
-          />
+        />
-        )}
+      ) : (
-      </AnimatePresence>
+        <AnimatePresence>
+          {selectedPost && (
+            <PostModal
+              post={selectedPost}
+              nextPost={postIndex < filteredPosts.length - 1 ? filteredPosts[postIndex + 1] : undefined}
+              prevPost={postIndex > 0 ? filteredPosts[postIndex - 1] : undefined}
+              onClose={() => setSelectedPost(null)}
+              onNextPost={onNextPost}
+              onPrevPost={onPrevPost}
+              hasNextPost={postIndex < filteredPosts.length - 1}
+              hasPrevPost={postIndex > 0}
+              profilePic={profilePic}
+            />
+          )}
+        </AnimatePresence>
+      )}
       <AnimatePresence>{showStoryViewer && allStories.length > 0 && <StoryViewer stories={allStories} onClose={() => setShowStoryViewer(false)} profilePic={profilePic} />}</AnimatePresence>
       <AnimatePresence>
         {activeHighlight && (
@@ -579,7 +624,7 @@ export default function App() {
       {!isScanning && (
         <footer className="max-w-5xl mx-auto px-4 py-12 text-center text-xs text-gray-400 space-y-4 text-black">
           <div className="flex flex-wrap justify-center gap-x-4 gap-y-2 uppercase tracking-tight text-black"><span>Meta</span><span>About</span><span>Blog</span><span>Jobs</span><span>Help</span><span>API</span><span>Privacy</span><span>Terms</span><span>Locations</span><span>Instagram Lite</span><span>Threads</span><span>Contact Uploading & Non-Users</span><span>Meta Verified</span></div>
-          <div className="text-black/40 text-black">© 2026 InstaArchive Viewer</div>
+          <div className="text-black/40 text-black">© 2026 InstaArchive Viewer · v{__APP_VERSION__}</div>
         </footer>
       )}
     </div>

src/components/FeedPost.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Bookmark, Heart, MessageCircle, MoreHorizontal, Send } from 'lucide-react';
+import { Post } from '../types';
+import { formatDateSafe } from '../lib/utils';
+import { MediaCarousel } from './MediaCarousel';
+
+interface FeedPostProps {
+  post: Post;
+  profilePic: string | null;
+  /** Off-screen posts keep their video paused. */
+  paused: boolean;
+}
+
+/**
+ * One post in the mobile feed, laid out like Instagram's: header, media,
+ * action row, then caption.
+ *
+ * Media is capped below full viewport height so the next post always peeks in
+ * at the bottom — that overlap is what tells you the page scrolls rather than
+ * pages.
+ */
+export const FeedPost: React.FC<FeedPostProps> = ({ post, profilePic, paused }) => (
+  <article className="bg-white border-b border-gray-200">
+    <header className="flex items-center justify-between px-3 py-2.5">
+      <div className="flex items-center gap-2.5 min-w-0">
+        <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-yellow-400 to-purple-600 p-0.5 shrink-0">
+          <div className="w-full h-full rounded-full bg-white p-0.5">
+            <div className="w-full h-full rounded-full bg-gray-200 overflow-hidden flex items-center justify-center text-[10px] font-bold uppercase">
+              {profilePic
+                ? <img src={profilePic} alt="" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
+                : <span>{post.username[0]}</span>}
+            </div>
+          </div>
+        </div>
+        <span className="font-semibold text-sm truncate">{post.username}</span>
+      </div>
+      <MoreHorizontal size={20} className="text-gray-500 shrink-0" />
+    </header>
+
+    {/*
+      Taller ceiling than the modal so ordinary portrait media (9:16 reels,
+      4:5 photos) fills the feed width instead of sitting in side bars, while
+      still stopping anything extreme from swallowing the screen.
+    */}
+    <MediaCarousel post={post} paused={paused} heightCap="max-h-[85vh]" fillWidth className="bg-black" />
+
+    <div className="px-3 pt-3 pb-1 flex items-center justify-between">
+      <div className="flex items-center gap-4">
+        <Heart size={24} className="cursor-pointer" />
+        <MessageCircle size={24} className="cursor-pointer" />
+        <Send size={24} className="cursor-pointer" />
+      </div>
+      <Bookmark size={24} className="cursor-pointer" />
+    </div>
+
+    {post.caption && (
+      <div className="px-3 pb-1 text-sm">
+        <span className="font-semibold mr-2">{post.username}</span>
+        <span className="whitespace-pre-wrap">{post.caption}</span>
+      </div>
+    )}
+
+    <div className="px-3 pb-3 pt-1 text-[10px] uppercase tracking-wide text-gray-400">
+      {formatDateSafe(post.date, 'MMMM d, yyyy')}
+    </div>
+  </article>
+);

src/components/MediaCarousel.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Post } from '../types';
+import { cn } from '../lib/utils';
+import { NAVIGATE, prefersReducedMotion, withVelocity } from '../lib/motion';
+import { MediaRenderer } from './MediaRenderer';
+
+interface MediaCarouselProps {
+  post: Post;
+  /** Pause video even when this slide is on screen (feed: only one plays). */
+  paused?: boolean;
+  /** Override the media height ceiling (the feed allows taller media). */
+  heightCap?: string;
+  /** Size video to the container width (see MediaRenderer). */
+  fillWidth?: boolean;
+  className?: string;
+}
+
+/**
+ * The horizontal slide strip for one post.
+ *
+ * Shared by the desktop modal and the mobile feed so a carousel behaves the
+ * same in both. Horizontal drag belongs to the carousel and never navigates
+ * between posts — vertical movement is the page's to handle.
+ */
+export const MediaCarousel: React.FC<MediaCarouselProps> = ({ post, paused, heightCap, fillWidth, className }) => {
+  const [index, setIndex] = useState(0);
+  const [slide, setSlide] = useState<{ dir: number; velocity: number }>({ dir: 0, velocity: 0 });
+  const reduceMotion = prefersReducedMotion();
+
+  useEffect(() => setIndex(0), [post.id]);
+
+  const paginate = (dir: number, velocity = 0) => {
+    const next = index + dir;
+    if (next < 0 || next >= post.media.length) return;
+    setSlide({ dir, velocity });
+    setIndex(next);
+  };
+
+  const variants = {
+    enter: (d: number) => ({ x: d > 0 ? '100%' : '-100%', opacity: 1, zIndex: 0 }),
+    center: { x: 0, opacity: 1, zIndex: 1 },
+    exit: (d: number) => ({ x: d < 0 ? '100%' : '-100%', opacity: 1, zIndex: 0 }),
+  };
+  const swipePower = (offset: number, velocity: number) => Math.abs(offset) * velocity;
+  const current = post.media[index];
+
+  return (
+    <div className={cn('relative bg-black flex items-center justify-center group overflow-hidden w-full', className)}>
+      <div className="w-full grid grid-cols-1 grid-rows-1">
+        <AnimatePresence initial={false} custom={slide.dir}>
+          <motion.div
+            key={`${post.id}-${index}`}
+            custom={slide.dir}
+            variants={variants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={reduceMotion ? { duration: 0 } : withVelocity(slide.velocity, NAVIGATE)}
+            drag={post.media.length > 1 ? 'x' : false}
+            dragDirectionLock
+            dragConstraints={{ left: 0, right: 0 }}
+            dragElastic={0.5}
+            onDragEnd={(e, { offset, velocity }) => {
+              const power = swipePower(offset.x, velocity.x);
+              if (power < -15000) paginate(1, velocity.x);
+              else if (power > 15000) paginate(-1, velocity.x);
+            }}
+            className="col-start-1 row-start-1 w-full flex items-center justify-center relative touch-pan-y"
+          >
+            {current && <MediaRenderer file={current} isFullView paused={paused} heightCap={heightCap} fillWidth={fillWidth} />}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {post.media.length > 1 && (
+        <>
+          {index > 0 && (
+            <button
+              aria-label="Previous photo"
+              onClick={(e) => { e.stopPropagation(); paginate(-1); }}
+              className="hidden md:block absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white p-2 rounded-full backdrop-blur-md transition-all opacity-0 group-hover:opacity-100 z-30"
+            >
+              <ChevronLeft size={24} />
+            </button>
+          )}
+          {index < post.media.length - 1 && (
+            <button
+              aria-label="Next photo"
+              onClick={(e) => { e.stopPropagation(); paginate(1); }}
+              className="hidden md:block absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white p-2 rounded-full backdrop-blur-md transition-all opacity-0 group-hover:opacity-100 z-30"
+            >
+              <ChevronRight size={24} />
+            </button>
+          )}
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 z-30">
+            {post.media.map((_, i) => (
+              <div
+                key={i}
+                className={cn(
+                  'w-1.5 h-1.5 rounded-full transition-all',
+                  i === index ? 'bg-blue-500 scale-125' : 'bg-white/40 shadow-sm',
+                )}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

src/components/MediaRenderer.tsx

@@ -3,7 +3,25 @@ import { Play, Volume2, VolumeX } from 'lucide-react';
 import { MediaFile } from '../types';
 import { cn } from '../lib/utils';
 
-export const MediaRenderer = ({ file, className, isFullView }: { file: MediaFile; className?: string; isFullView?: boolean }) => {
+interface MediaRendererProps {
+  file: MediaFile;
+  className?: string;
+  isFullView?: boolean;
+  /** Hold playback: the feed keeps every off-screen video paused. */
+  paused?: boolean;
+  /** Cap media height to this instead of the default full-view ceiling. */
+  heightCap?: string;
+  /**
+   * Size video to the container width rather than its own intrinsic size.
+   *
+   * A <video> reports 300x150 until metadata loads, so `w-auto` makes it render
+   * narrow and then jump to full width. The feed needs a stable width more than
+   * it needs a snug fit.
+   */
+  fillWidth?: boolean;
+}
+
+export const MediaRenderer = ({ file, className, isFullView, paused, heightCap, fillWidth }: MediaRendererProps) => {
   // Try to play with sound: opening the modal is a user gesture, so browsers
   // generally allow it. If this particular browser still refuses, the effect
   // below falls back to muted playback rather than leaving a stalled video.
@@ -14,6 +32,11 @@ export const MediaRenderer = ({ file, className, isFullView }: { file: MediaFile
     const video = videoRef.current;
     if (!video || file.type !== 'video') return;
 
+    if (paused) {
+      video.pause();
+      return;
+    }
+
     let cancelled = false;
     video.muted = false;
     video.play().catch(() => {
@@ -24,7 +47,7 @@ export const MediaRenderer = ({ file, className, isFullView }: { file: MediaFile
     });
 
     return () => { cancelled = true; };
-  }, [file.url, file.type]);
+  }, [file.url, file.type, paused]);
   /**
    * In full view the media must never outgrow the viewport.
    *
@@ -36,8 +59,11 @@ export const MediaRenderer = ({ file, className, isFullView }: { file: MediaFile
    * The desktop cap subtracts the modal's own padding (md:p-10 = 2.5rem each
    * side); mobile leaves room for the caption panel stacked underneath.
    */
-  const fullViewCap = "max-h-[70vh] md:max-h-[calc(100vh-5rem)] object-contain";
+  const fullViewCap = `${heightCap ?? 'max-h-[70vh] md:max-h-[calc(100vh-5rem)]'} object-contain`;
-  const videoSizing = isFullView ? `block w-auto max-w-full ${fullViewCap}` : "w-full h-full object-cover";
+  const videoFullView = fillWidth
+    ? `block w-full h-auto ${fullViewCap}`
+    : `block w-auto max-w-full ${fullViewCap}`;
+  const videoSizing = isFullView ? videoFullView : "w-full h-full object-cover";
   const imageSizing = isFullView ? `block w-full h-auto ${fullViewCap}` : "w-full h-full object-cover";
   const sizingClass = file.type === 'video' ? videoSizing : imageSizing;
   const mediaStyle = { transform: 'translateZ(0)' };

src/components/PostFeed.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { Post } from '../types';
+import { FeedPost } from './FeedPost';
+
+interface PostFeedProps {
+  posts: Post[];
+  /** Post the feed should open at. */
+  initialPostId: string;
+  profilePic: string | null;
+  onClose: () => void;
+  /** Fires as the post crossing the viewport centre changes. */
+  onActivePostChange: (post: Post) => void;
+  title?: string;
+}
+
+/** Posts added each time the feed grows in either direction. */
+const BATCH = 6;
+/** Render this many ahead of the entry point so the first scroll is smooth. */
+const LOOKAHEAD = 3;
+
+/**
+ * The mobile post view: a real scrolling feed, not a modal.
+ *
+ * Only a window of posts around the entry point is mounted — a profile can hold
+ * thousands, and mounting them all would mean thousands of full-size images.
+ * The window grows in both directions as you scroll; growing *upwards* shifts
+ * everything below it, so the scroll position is corrected in the same frame to
+ * keep the content under your thumb still.
+ */
+export const PostFeed: React.FC<PostFeedProps> = ({
+  posts, initialPostId, profilePic, onClose, onActivePostChange, title,
+}) => {
+  const initialIndex = useMemo(() => {
+    const found = posts.findIndex(p => p.id === initialPostId);
+    return found === -1 ? 0 : found;
+  }, [posts, initialPostId]);
+
+  const [range, setRange] = useState(() => ({
+    start: initialIndex,
+    end: Math.min(posts.length, initialIndex + LOOKAHEAD + 1),
+  }));
+  const [activeId, setActiveId] = useState(initialPostId);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement>(null);
+  /** Distance from the bottom of the content, captured before a prepend. */
+  const anchorRef = useRef<number | null>(null);
+
+  const visible = posts.slice(range.start, range.end);
+
+  const extendDown = useCallback(() => {
+    setRange(r => (r.end >= posts.length ? r : { ...r, end: Math.min(posts.length, r.end + BATCH) }));
+  }, [posts.length]);
+
+  const extendUp = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setRange(r => {
+      if (r.start === 0) return r;
+      // Measure from the bottom: prepending changes scrollHeight, but the
+      // distance between our position and the end of the content does not.
+      anchorRef.current = el.scrollHeight - el.scrollTop;
+      return { ...r, start: Math.max(0, r.start - BATCH) };
+    });
+  }, []);
+
+  // Restore the scroll position in the same frame the prepended posts appear,
+  // before the browser paints, so nothing visibly jumps.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el && anchorRef.current !== null) {
+      el.scrollTop = el.scrollHeight - anchorRef.current;
+      anchorRef.current = null;
+    }
+  }, [range.start]);
+
+  // Grow the window when either end comes into view.
+  useEffect(() => {
+    const root = scrollRef.current;
+    if (!root) return;
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        if (entry.target === bottomSentinelRef.current) extendDown();
+        if (entry.target === topSentinelRef.current) extendUp();
+      }
+    }, { root, rootMargin: '600px 0px' });
+
+    if (topSentinelRef.current) observer.observe(topSentinelRef.current);
+    if (bottomSentinelRef.current) observer.observe(bottomSentinelRef.current);
+    return () => observer.disconnect();
+  }, [extendDown, extendUp]);
+
+  // Track the post crossing the viewport centre. The negative margins collapse
+  // the root to a thin band, so exactly one post qualifies at a time.
+  useEffect(() => {
+    const root = scrollRef.current;
+    if (!root) return;
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const id = (entry.target as HTMLElement).dataset.postId;
+        if (id) setActiveId(id);
+      }
+    }, { root, rootMargin: '-45% 0px -45% 0px', threshold: 0 });
+
+    root.querySelectorAll('[data-post-id]').forEach(el => observer.observe(el));
+    return () => observer.disconnect();
+  }, [visible.length, range.start]);
+
+  useEffect(() => {
+    const post = posts.find(p => p.id === activeId);
+    if (post) onActivePostChange(post);
+  }, [activeId, posts, onActivePostChange]);
+
+  // Escape closes, matching the modal it replaces.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-50 bg-white flex flex-col">
+      <header className="flex items-center gap-3 px-2 h-12 border-b border-gray-200 bg-white/95 backdrop-blur-md shrink-0">
+        <button onClick={onClose} aria-label="Back" className="p-2 -ml-1 active:opacity-60">
+          <ChevronLeft size={24} />
+        </button>
+        <span className="font-semibold text-base">{title ?? 'Posts'}</span>
+      </header>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto overscroll-contain">
+        <div ref={topSentinelRef} aria-hidden />
+        {visible.map(post => (
+          <div key={post.id} data-post-id={post.id}>
+            <FeedPost post={post} profilePic={profilePic} paused={post.id !== activeId} />
+          </div>
+        ))}
+        <div ref={bottomSentinelRef} aria-hidden />
+        {range.end >= posts.length && (
+          <div className="py-10 text-center text-xs uppercase tracking-widest text-gray-400">
+            End of {title?.toLowerCase() ?? 'posts'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/PostModal.tsx

@@ -82,11 +82,14 @@ export const PostModal: React.FC<PostModalProps> = ({
 
   useEffect(() => setCurrentIndex(0), [post.id]);
   useEffect(() => {
+    // Arrows page within the carousel — the thing the arrows visually point at.
+    // Moving between posts stays on the side buttons, with , and . as keyboard
+    // equivalents.
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowRight') goToPost(1, 'x');
+      if (e.key === 'ArrowRight') paginate(1);
-      else if (e.key === 'ArrowLeft') goToPost(-1, 'x');
+      else if (e.key === 'ArrowLeft') paginate(-1);
-      else if (e.key === '.') paginate(1);
+      else if (e.key === '.') goToPost(1, 'x');
-      else if (e.key === ',') paginate(-1);
+      else if (e.key === ',') goToPost(-1, 'x');
       else if (e.key === 'Escape') onClose();
     };
     window.addEventListener('keydown', handleKeyDown);
@@ -126,44 +129,12 @@ export const PostModal: React.FC<PostModalProps> = ({
   };
   const swipePower = (offset: number, velocity: number) => Math.abs(offset) * velocity;
 
-  /** Gesture navigation is touch-shaped below md; above it the arrows do the job. */
-  const [isMobile, setIsMobile] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
-  );
-  useEffect(() => {
-    const query = window.matchMedia('(max-width: 767px)');
-    const onChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-    query.addEventListener('change', onChange);
-    return () => query.removeEventListener('change', onChange);
-  }, []);
-
   /**
-   * Vertical swipe moves between posts on touch, matching Instagram: horizontal
+   * Desktop-only surface: mobile opens PostFeed instead, so the only vertical
-   * belongs to the carousel and only the carousel, so reaching the last slide
+   * gesture left here is drag-to-dismiss.
-   * no longer flings you into the next post.
-   *
-   * Swiping down on the first post falls back to dismissing, which keeps the
-   * familiar drag-to-close gesture available where it can't mean "previous".
    */
-  const SWIPE_DISTANCE = 90;
-  const SWIPE_POWER = 8000;
-
   const handleVerticalDragEnd = (offset: { y: number }, velocity: { y: number }) => {
-    const power = swipePower(offset.y, velocity.y);
+    if (offset.y > 200 || velocity.y > 800) onClose();
-
-    if (!isMobile) {
-      if (offset.y > 200 || velocity.y > 800) onClose();
-      return;
-    }
-
-    const swipedUp = offset.y < -SWIPE_DISTANCE || power < -SWIPE_POWER;
-    const swipedDown = offset.y > SWIPE_DISTANCE || power > SWIPE_POWER;
-
-    if (swipedUp && hasNextPost) goToPost(1, 'y', velocity.y);
-    else if (swipedDown) {
-      if (hasPrevPost) goToPost(-1, 'y', velocity.y);
-      else onClose();
-    }
   };
 
   /*

src/hooks/useArchiveScanner.ts

@@ -107,11 +107,23 @@ export const useArchiveScanner = (
     /** Stable identity for a media file, used to rehydrate URLs after a reload. */
     const mediaPath = (file: ArchiveFile) => file.webkitRelativePath || file.name;
 
+    /**
+     * Decompress an `.xz` metadata sidecar.
+     *
+     * Read fully into memory first rather than handing the live HTTP body to
+     * the decompressor. These sidecars are a few KB, so buffering costs
+     * nothing, and streaming was actively harmful: the decompressor stops
+     * reading at the end of the xz member, leaving the response body neither
+     * drained nor cancelled. Across a couple of hundred sidecars that exhausts
+     * the connection pool and every later fetch fails with "Failed to fetch" —
+     * which silently cost Instaloader archives their captions, story flags and
+     * profile metadata, since all of it lives in these files.
+     */
     const parseXZFile = async (file: ArchiveFile) => {
       try {
-        const stream = new XzReadableStream(file.stream());
+        const compressed = await file.arrayBuffer();
-        const response = new Response(stream);
+        const stream = new XzReadableStream(new Blob([compressed]).stream());
-        return await response.json();
+        return await new Response(stream).json();
       } catch (e) { console.error(`[Scanner] XZ Parse Error:`, file.name, e); return null; }
     };
 

src/hooks/useIsMobile.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+/** Matches Tailwind's `md` breakpoint, the point where the layout splits. */
+const MOBILE_QUERY = '(max-width: 767px)';
+
+/**
+ * True on phone-sized viewports.
+ *
+ * Drives more than styling: mobile opens posts as a scrollable feed page while
+ * desktop uses the modal, so this needs to be real state rather than a CSS
+ * media query.
+ */
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(MOBILE_QUERY).matches,
+  );
+
+  useEffect(() => {
+    const query = window.matchMedia(MOBILE_QUERY);
+    const onChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    query.addEventListener('change', onChange);
+    setIsMobile(query.matches);
+    return () => query.removeEventListener('change', onChange);
+  }, []);
+
+  return isMobile;
+};

src/lib/archive-files.ts

@@ -14,7 +14,6 @@ export class LocalArchiveFile implements ArchiveFile {
   get size() { return this.file.size; }
   text() { return this.file.text(); }
   arrayBuffer() { return this.file.arrayBuffer(); }
-  stream() { return this.file.stream(); }
 
   /**
    * A blob: URL backed directly by the on-disk File.
@@ -55,15 +54,6 @@ export class RemoteArchiveFile implements ArchiveFile {
     const res = await fetch(this.url);
     return res.arrayBuffer();
   }
-  stream() {
-    const transform = new TransformStream();
-    fetch(this.url).then(res => {
-      if (res.body) res.body.pipeTo(transform.writable);
-      else transform.writable.getWriter().close();
-    });
-    return transform.readable;
-  }
-
   createObjectUrl() {
     return this.url;
   }

src/lib/archive-index.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { isSystemDirectory } from './archive-index';
+
+describe('isSystemDirectory', () => {
+  it.each([
+    ['@eaDir', 'Synology thumbnail/index metadata, written inside every folder'],
+    ['@tmp', 'Synology scratch'],
+    ['.sync', 'Resilio state'],
+    ['.DS_Store', 'macOS'],
+    ['#recycle', 'Synology deletions'],
+    ['#snapshot', 'Synology snapshots'],
+  ])('skips %s (%s)', name => {
+    expect(isSystemDirectory(name)).toBe(true);
+  });
+
+  it.each([
+    '4utumn07',
+    '4utumn07 - reels',
+    'story - dawn_petal',
+    'story highlights - official_band - A.B.C',
+    'story highlights - theoldlyricmuseinsta - 💙1999-2005 era',
+    'Heejin_Bubble heejinmedia',
+    'gallery-dl',
+    'posts',
+  ])('keeps %s', name => {
+    expect(isSystemDirectory(name)).toBe(false);
+  });
+
+  it('does not treat a leading underscore as a system directory', () => {
+    // `_gemini-plans` is filtered separately at the archive root only; nothing
+    // below the root should be excluded just for starting with an underscore.
+    expect(isSystemDirectory('_gemini-plans')).toBe(false);
+  });
+});

src/lib/archive-index.ts

@@ -33,6 +33,21 @@ interface DirIndex {
 const MEDIA_RE = /\.(jpg|jpeg|png|webp|gif|bmp|tiff|mp4|webm|ogv|mov)$/i;
 const STAT_CONCURRENCY = 16;
 
+/**
+ * Directories the walk must never descend into.
+ *
+ * NAS filesystems scatter sidecar metadata *inside* every folder, not just at
+ * the share root: Synology writes `@eaDir` (thumbnails and indexing data),
+ * `#recycle` holds deletions, and `.sync` is Resilio's state. Indexing those
+ * would count NAS thumbnails as archive media and spend a stat on each one —
+ * measured on a real share, `@eaDir` accounted for 12,516 of 123,023 files.
+ *
+ * The archive root is already filtered by prefix; this is the same rule applied
+ * at every level below it.
+ */
+export const isSystemDirectory = (name: string): boolean =>
+  name.startsWith('@') || name.startsWith('.') || name === '#recycle' || name === '#snapshot';
+
 export class ArchiveIndex {
   private dirs = new Map<string, DirIndex>();
   private inFlight = new Map<string, Promise<DirIndex>>();
@@ -43,7 +58,7 @@ export class ArchiveIndex {
   /** Visible (non-system) directories at the archive root. */
   private listRootDirs(): string[] {
     return fs.readdirSync(this.archivesDir, { withFileTypes: true })
-      .filter(e => e.isDirectory() && !/^[.@_]/.test(e.name))
+      .filter(e => e.isDirectory() && !isSystemDirectory(e.name) && !e.name.startsWith('_'))
       .map(e => e.name);
   }
 
@@ -69,6 +84,7 @@ export class ArchiveIndex {
       return out;
     }
     for (const entry of entries) {
+      if (isSystemDirectory(entry.name)) continue;
       const rel = base ? `${base}/${entry.name}` : entry.name;
       if (entry.isDirectory()) out = out.concat(this.walk(path.join(absDir, entry.name), rel));
       else if (entry.isFile()) out.push(rel);

src/lib/post-tabs.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { dedupePostCopies, hasReelSource, makeIsReel, postsForTab } from './post-tabs';
+import { MediaFile, Post } from '../types';
+
+const media = (type: MediaFile['type'], index = 1): MediaFile => ({
+  name: `f${index}.${type === 'video' ? 'mp4' : 'jpg'}`,
+  path: `d/f${index}`, url: '', type, index,
+});
+
+const post = (id: string, opts: Partial<Post> = {}): Post => ({
+  id, date: '2024-01-01', username: 'u', caption: '', media: [media('image')], thumbnail: '', ...opts,
+});
+
+const video = (id: string, opts: Partial<Post> = {}) => post(id, { media: [media('video')], ...opts });
+const carousel = (id: string, opts: Partial<Post> = {}) =>
+  post(id, { media: [media('image', 1), media('video', 2)], ...opts });
+
+describe('hasReelSource', () => {
+  it('is false for an archive with no reels directory', () => {
+    expect(hasReelSource([post('A'), video('B')])).toBe(false);
+  });
+
+  it('is true once any post came from a reels directory', () => {
+    expect(hasReelSource([post('A'), video('u - reels/B', { source: 'reels' })])).toBe(true);
+  });
+});
+
+describe('makeIsReel', () => {
+  it('believes the reels directory when there is one', () => {
+    const posts = [video('A'), video('u - reels/B', { source: 'reels' })];
+    const isReel = makeIsReel(posts);
+    // A is a lone video too, but the archive states which posts are reels.
+    expect(isReel(posts[0])).toBe(false);
+    expect(isReel(posts[1])).toBe(true);
+  });
+
+  it('falls back to the lone-video heuristic without one', () => {
+    const posts = [post('A'), video('B'), carousel('C')];
+    const isReel = makeIsReel(posts);
+    expect(posts.map(isReel)).toEqual([false, true, false]);
+  });
+});
+
+describe('dedupePostCopies', () => {
+  it('leaves distinct posts alone', () => {
+    const posts = [post('A'), video('B')];
+    expect(dedupePostCopies(posts).map(p => p.id)).toEqual(['A', 'B']);
+  });
+
+  it('collapses a reel fetched into both the profile and the reels directory', () => {
+    const posts = [video('B'), video('u - reels/B', { source: 'reels' })];
+    const deduped = dedupePostCopies(posts);
+    expect(deduped).toHaveLength(1);
+    // The reels copy wins, so the survivor is still recognised as a reel.
+    expect(deduped[0].source).toBe('reels');
+  });
+
+  it('picks the reels copy regardless of scan order', () => {
+    const profileCopy = video('B');
+    const reelCopy = video('u - reels/B', { source: 'reels' });
+    expect(dedupePostCopies([profileCopy, reelCopy])[0].source).toBe('reels');
+    expect(dedupePostCopies([reelCopy, profileCopy])[0].source).toBe('reels');
+  });
+
+  it('keeps the position of the first copy seen', () => {
+    const posts = [post('A'), video('B'), post('C'), video('u - reels/B', { source: 'reels' })];
+    expect(dedupePostCopies(posts).map(p => p.id.split('/').pop())).toEqual(['A', 'B', 'C']);
+  });
+});
+
+describe('postsForTab', () => {
+  it('shows reels in the profile grid, as Instagram does', () => {
+    const posts = [post('A'), video('u - reels/B', { source: 'reels' })];
+    expect(postsForTab(posts, 'posts').map(p => p.id)).toEqual(['A', 'u - reels/B']);
+  });
+
+  it('shows the same reel in both tabs', () => {
+    const posts = [post('A'), video('u - reels/B', { source: 'reels' })];
+    const inGrid = postsForTab(posts, 'posts').map(p => p.id);
+    const inReels = postsForTab(posts, 'reels').map(p => p.id);
+    expect(inReels).toEqual(['u - reels/B']);
+    expect(inGrid).toContain('u - reels/B');
+  });
+
+  it('shows a duplicated reel once in the grid, not twice', () => {
+    const posts = [post('A'), video('B'), video('u - reels/B', { source: 'reels' })];
+    expect(postsForTab(posts, 'posts')).toHaveLength(2);
+    expect(postsForTab(posts, 'reels')).toHaveLength(1);
+  });
+
+  it('treats lone videos as reels for archives with no reels directory', () => {
+    const posts = [post('A'), video('B'), carousel('C')];
+    expect(postsForTab(posts, 'posts').map(p => p.id)).toEqual(['A', 'B', 'C']);
+    expect(postsForTab(posts, 'reels').map(p => p.id)).toEqual(['B']);
+  });
+
+  it('has nothing saved', () => {
+    expect(postsForTab([post('A')], 'saved')).toEqual([]);
+  });
+});

src/lib/post-tabs.ts

@@ -0,0 +1,103 @@
+import { Post, SourceKind } from '../types';
+import { Tab } from './routing';
+
+/**
+ * Which posts each profile tab shows.
+ *
+ * Instagram's profile grid holds everything the account posted — photos,
+ * carousels and reels alike — and the Reels tab is a *filtered view* of that
+ * same set rather than a separate one. So a reel belongs in both tabs, and
+ * only the Reels tab does any filtering.
+ *
+ * Kept pure and separate from App.tsx so the reel heuristic and the
+ * duplicate-copy rules can be tested directly.
+ */
+
+/**
+ * The shortcode shared by every copy of a post, regardless of which source
+ * directory it came from. Sidecar ids are directory-scoped
+ * (`4utumn07 - reels/Cq8LrxSJAJE`); the trailing segment is the shortcode.
+ */
+const shortcode = (post: Post): string => post.id.split('/').pop() ?? post.id;
+
+/**
+ * True when the archive has a `- reels` sidecar directory, i.e. it states
+ * outright which posts are reels.
+ */
+export const hasReelSource = (posts: Post[]): boolean => posts.some(p => p.source === 'reels');
+
+/**
+ * Build the reel test for an archive.
+ *
+ * Instagram's own marker is `product_type: "clips"` on the post's GraphQL
+ * node, but only Instaloader archives carry that metadata, and only on newer
+ * captures — JDownloader grabs are media plus a caption `.txt` and nothing
+ * else (see docs/jdownloader.md). So:
+ *
+ *   - archives with a `- reels` directory are believed outright;
+ *   - everything else falls back to treating a lone video as a reel.
+ *
+ * The fallback is a guess: it cannot tell a reel from an ordinary feed video
+ * or an old IGTV upload, all three of which are plain `GraphVideo` nodes
+ * distinguished only by `product_type`.
+ */
+export const makeIsReel = (posts: Post[]): ((post: Post) => boolean) => (
+  hasReelSource(posts)
+    ? (post: Post) => post.source === 'reels'
+    : (post: Post) => post.media.length === 1 && post.media[0]?.type === 'video'
+);
+
+/** Preference order when the same post was fetched into more than one directory. */
+const SOURCE_RANK: Record<SourceKind, number> = { reels: 0, posts: 1, stories: 2, highlight: 3 };
+
+const rankOf = (post: Post): number => SOURCE_RANK[post.source ?? 'posts'];
+
+/**
+ * Collapse copies of one post that were fetched into more than one directory.
+ *
+ * The JDownloader flow crawls a profile URL and its `/reels/` URL separately
+ * because the profile page misses some reels — so the two overlap, and a reel
+ * present in both lands on disk twice. Those become two posts with distinct
+ * directory-scoped ids, which the grid would happily render side by side.
+ *
+ * The reels-source copy wins, so the surviving post still reports
+ * `source: 'reels'` and both the Reels tab and `tabForSource` recognise it.
+ *
+ * Only safe because callers pass the grid's posts, which exclude stories and
+ * highlights — a shortcode may legitimately appear in both the profile and a
+ * highlight, and those must stay distinct.
+ */
+export const dedupePostCopies = (posts: Post[]): Post[] => {
+  const winners = new Map<string, Post>();
+
+  for (const post of posts) {
+    const code = shortcode(post);
+    const existing = winners.get(code);
+    if (!existing || rankOf(post) < rankOf(existing)) winners.set(code, post);
+  }
+
+  // Preserve input order, keyed on the winner so ordering does not depend on
+  // which copy happened to be scanned first.
+  const emitted = new Set<string>();
+  const result: Post[] = [];
+  for (const post of posts) {
+    const code = shortcode(post);
+    if (emitted.has(code)) continue;
+    emitted.add(code);
+    result.push(winners.get(code)!);
+  }
+  return result;
+};
+
+/**
+ * The posts a tab displays.
+ *
+ * `posts` must already exclude stories and highlights (App passes `allPosts`).
+ */
+export const postsForTab = (posts: Post[], tab: Tab): Post[] => {
+  if (tab === 'saved') return [];
+
+  const unique = dedupePostCopies(posts);
+  if (tab === 'posts') return unique;
+  return unique.filter(makeIsReel(posts));
+};

src/main.tsx

@@ -14,7 +14,7 @@ const updateSW = registerSW({
       setInterval(() => {
         r.update();
       }, 60 * 60 * 1000);
-      console.log('[PWA] Service Worker registered and update interval set.');
+      console.log(`[PWA] v${__APP_VERSION__} registered; hourly update checks enabled.`);
     }
   },
   onNeedRefresh() {

src/types/globals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Build-time constants.
+ *
+ * This file deliberately has no imports or exports: that keeps it an ambient
+ * script rather than a module, so the declarations below are global.
+ */
+
+/** Release version, injected by `define` in vite.config.ts. */
+declare const __APP_VERSION__: string;

src/types/index.ts

@@ -50,7 +50,6 @@ export interface ArchiveFile {
   size: number;
   text(): Promise<string>;
   arrayBuffer(): Promise<ArrayBuffer>;
-  stream(): ReadableStream<Uint8Array>;
   url?: string;
   /**
    * A URL pointing at this file's contents. Local files mint a disk-backed

vite.config.ts

@@ -3,9 +3,24 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import {defineConfig} from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
+import { createRequire } from 'module';
+
+const { version } = createRequire(import.meta.url)('./package.json');
 
 export default defineConfig(() => {
   return {
+    /**
+     * The release version, compiled into the client.
+     *
+     * This is load-bearing, not cosmetic. The service worker precaches
+     * index.html *including its response headers*, so a server-side header
+     * change (a CSP fix, say) never reaches an installed PWA: nothing in the
+     * client build changed, the precache manifest is byte-identical, and the
+     * worker has no reason to update. Baking the version in means every release
+     * changes the bundle hash, which changes index.html, which invalidates the
+     * precache and re-fetches the shell with current headers.
+     */
+    define: { __APP_VERSION__: JSON.stringify(version) },
     plugins: [
       react(), 
       tailwindcss(),