feat: keep-alive routing with view transitions and performance optimizations

Major features:
- Keep-alive router caches timeline and profile pages in DOM
- View Transitions API for smooth page navigation
- Pull-to-refresh for timeline and profile pages
- Record and query caching for instant page renders

Performance:
- Use thumbnail presets instead of fullsize (~80% memory reduction)
- Lazy load carousel images (current + adjacent only)
- Scroll position preserved on back navigation

View transitions:
- Shared element transitions for gallery thumbnails
- Header stays above content during transitions
- Image fade-in effect for smooth loading

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

docs/plans/2025-12-27-view-transitions-and-cache.md

···
+# View Transitions & Record Cache Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add smooth view transitions between profile grid and gallery detail, powered by a URI-keyed record cache for instant rendering.
+
+**Architecture:** A reactive record cache stores gallery/profile data keyed by AT URI. A query cache stores ordered lists of URIs for timeline/profile views. The router wraps navigation in the View Transitions API, and components render instantly from cache before fetching missing data.
+
+**Tech Stack:** Lit 3.x, View Transitions API, vanilla JS Map-based caching.
+
+---
+
+## Phase 1: Record Cache Service
+
+### Task 1: Create Record Cache Service
+
+**Files:**
+- Create: `src/services/record-cache.js`
+
+**Step 1: Create the record cache module**
+
+```javascript
+// src/services/record-cache.js
+
+const cache = new Map();
+const listeners = new Map();
+
+export const recordCache = {
+  /**
+   * Get a cached record by URI
+   * @param {string} uri - AT Protocol URI
+   * @returns {object|undefined} Cached record or undefined
+   */
+  get(uri) {
+    return cache.get(uri);
+  },
+
+  /**
+   * Set/merge record data. Dispatches update event.
+   * @param {string} uri - AT Protocol URI
+   * @param {object} data - Partial or full record data
+   */
+  set(uri, data) {
+    const existing = cache.get(uri) || {};
+    const merged = { ...existing, ...data };
+    cache.set(uri, merged);
+    this.#notify(uri, merged);
+  },
+
+  /**
+   * Check if a URI is cached
+   * @param {string} uri - AT Protocol URI
+   * @returns {boolean}
+   */
+  has(uri) {
+    return cache.has(uri);
+  },
+
+  /**
+   * Subscribe to changes for a specific URI
+   * @param {string} uri - AT Protocol URI
+   * @param {function} callback - Called with updated data
+   */
+  subscribe(uri, callback) {
+    if (!listeners.has(uri)) {
+      listeners.set(uri, new Set());
+    }
+    listeners.get(uri).add(callback);
+  },
+
+  /**
+   * Unsubscribe from changes
+   * @param {string} uri - AT Protocol URI
+   * @param {function} callback - The callback to remove
+   */
+  unsubscribe(uri, callback) {
+    const uriListeners = listeners.get(uri);
+    if (uriListeners) {
+      uriListeners.delete(callback);
+      if (uriListeners.size === 0) {
+        listeners.delete(uri);
+      }
+    }
+  },
+
+  /**
+   * Notify all subscribers of a URI change
+   * @private
+   */
+  #notify(uri, data) {
+    const uriListeners = listeners.get(uri);
+    if (uriListeners) {
+      for (const callback of uriListeners) {
+        callback(data);
+      }
+    }
+  },
+
+  /**
+   * Clear all cached data (useful for logout)
+   */
+  clear() {
+    cache.clear();
+  }
+};
+```
+
+**Step 2: Verify module loads**
+
+Run: `npm run dev`
+Open browser console, run: `import('/src/services/record-cache.js').then(m => console.log(m.recordCache))`
+Expected: Object with get, set, has, subscribe, unsubscribe, clear methods
+
+**Step 3: Commit**
+
+```bash
+git add src/services/record-cache.js
+git commit -m "feat: add record cache service with reactive subscriptions"
+```
+
+---
+
+### Task 2: Create Query Cache Service
+
+**Files:**
+- Create: `src/services/query-cache.js`
+
+**Step 1: Create the query cache module**
+
+```javascript
+// src/services/query-cache.js
+
+const queries = new Map();
+
+export const queryCache = {
+  /**
+   * Get cached query result
+   * @param {string} queryId - Query identifier (e.g., "timeline", "profile:handle")
+   * @returns {{ uris: string[], cursor: string|null, hasMore: boolean }|undefined}
+   */
+  get(queryId) {
+    return queries.get(queryId);
+  },
+
+  /**
+   * Set query result (replaces existing)
+   * @param {string} queryId - Query identifier
+   * @param {{ uris: string[], cursor: string|null, hasMore: boolean }} result
+   */
+  set(queryId, result) {
+    queries.set(queryId, {
+      uris: result.uris || [],
+      cursor: result.cursor || null,
+      hasMore: result.hasMore ?? true
+    });
+  },
+
+  /**
+   * Append to existing query result (for pagination)
+   * @param {string} queryId - Query identifier
+   * @param {{ uris: string[], cursor: string|null, hasMore: boolean }} result
+   */
+  append(queryId, result) {
+    const existing = queries.get(queryId);
+    if (existing) {
+      queries.set(queryId, {
+        uris: [...existing.uris, ...(result.uris || [])],
+        cursor: result.cursor || null,
+        hasMore: result.hasMore ?? true
+      });
+    } else {
+      this.set(queryId, result);
+    }
+  },
+
+  /**
+   * Check if query is cached
+   * @param {string} queryId - Query identifier
+   * @returns {boolean}
+   */
+  has(queryId) {
+    return queries.has(queryId);
+  },
+
+  /**
+   * Clear all query cache (useful for logout or refresh)
+   */
+  clear() {
+    queries.clear();
+  }
+};
+```
+
+**Step 2: Verify module loads**
+
+Run: `npm run dev`
+Open browser console, run: `import('/src/services/query-cache.js').then(m => console.log(m.queryCache))`
+Expected: Object with get, set, append, has, clear methods
+
+**Step 3: Commit**
+
+```bash
+git add src/services/query-cache.js
+git commit -m "feat: add query cache service for timeline/list pagination"
+```
+
+---
+
+## Phase 2: Integrate Cache with API
+
+### Task 3: Update Timeline Query to Populate Cache
+
+**Files:**
+- Modify: `src/services/grain-api.js`
+
+**Step 1: Read current grain-api.js to understand structure**
+
+Identify the timeline/feed method and its response shape.
+
+**Step 2: Import caches and update timeline method**
+
+Add at top of file:
+```javascript
+import { recordCache } from './record-cache.js';
+import { queryCache } from './query-cache.js';
+```
+
+In the timeline/feed method, after receiving data, add cache population:
+
+```javascript
+// After mapping gallery data, cache each gallery
+galleries.forEach(gallery => {
+  recordCache.set(gallery.uri, gallery);
+});
+
+// Cache the query result
+queryCache.set('timeline', {
+  uris: galleries.map(g => g.uri),
+  cursor: data.pageInfo?.endCursor || null,
+  hasMore: data.pageInfo?.hasNextPage ?? false
+});
+```
+
+Note: Exact implementation depends on current method structure. The key is:
+1. Each gallery record gets cached by its URI
+2. The timeline query gets cached with the list of URIs
+
+**Step 3: Verify cache population**
+
+Run: `npm run dev`
+Load the timeline in browser.
+Open console, run:
+```javascript
+import('/src/services/record-cache.js').then(m => {
+  console.log('Cached records:', [...m.recordCache.cache?.entries?.() || []].length || 'check internal');
+});
+```
+Expected: Records are cached after timeline loads
+
+**Step 4: Commit**
+
+```bash
+git add src/services/grain-api.js
+git commit -m "feat: populate record cache from timeline query"
+```
+
+---
+
+### Task 4: Update Profile Query to Populate Cache
+
+**Files:**
+- Modify: `src/services/grain-api.js`
+
+**Step 1: Update getProfile method to cache galleries**
+
+In the `getProfile` method, after mapping gallery data:
+
+```javascript
+// Cache each gallery with partial data (first image only from profile view)
+galleries.forEach(gallery => {
+  // Only set if not already cached with more complete data
+  if (!recordCache.has(gallery.uri)) {
+    recordCache.set(gallery.uri, gallery);
+  }
+});
+
+// Cache the profile's gallery list
+queryCache.set(`profile:${handle}`, {
+  uris: galleries.map(g => g.uri),
+  cursor: null,
+  hasMore: false
+});
+```
+
+**Step 2: Verify cache population**
+
+Run: `npm run dev`
+Navigate to a profile page.
+Open console and verify galleries are cached.
+
+**Step 3: Commit**
+
+```bash
+git add src/services/grain-api.js
+git commit -m "feat: populate record cache from profile query"
+```
+
+---
+
+### Task 5: Update Gallery Detail to Use Cache
+
+**Files:**
+- Modify: `src/components/pages/grain-gallery-detail.js`
+
+**Step 1: Import record cache**
+
+Add at top:
+```javascript
+import { recordCache } from '../../services/record-cache.js';
+```
+
+**Step 2: Add helper to build gallery URI**
+
+```javascript
+#buildUri() {
+  // Construct AT URI from handle and rkey
+  // Format: at://did/social.grain.gallery/rkey
+  // We may need the DID, or use handle-based resolution
+  // For now, use a placeholder pattern that matches what's cached
+  return this._gallery?.uri || null;
+}
+```
+
+**Step 3: Update loading logic to check cache first**
+
+Modify the `#loadGallery` method:
+
+```javascript
+async #loadGallery() {
+  if (!this.handle || !this.rkey) return;
+
+  // Check cache first - timeline/profile may have already loaded this
+  // We need to find by rkey since we don't have full URI yet
+  const cachedUri = this.#findCachedUri();
+  if (cachedUri) {
+    const cached = recordCache.get(cachedUri);
+    if (cached) {
+      this._gallery = cached;
+      // If we have full data (photos array), skip fetch
+      if (cached.photos && cached.photos.length > 0) {
+        this._loading = false;
+        return;
+      }
+      // Otherwise render partial and continue to fetch
+      this._loading = false;
+    }
+  }
+
+  try {
+    if (!this._gallery) {
+      this._loading = true;
+    }
+    this._error = null;
+    const gallery = await grainApi.getGalleryDetail(this.handle, this.rkey);
+
+    // Cache the full result
+    recordCache.set(gallery.uri, gallery);
+    this._gallery = gallery;
+  } catch (err) {
+    this._error = err.message;
+  } finally {
+    this._loading = false;
+  }
+}
+
+#findCachedUri() {
+  // Look through timeline cache for matching rkey
+  const timelineQuery = queryCache.get('timeline');
+  if (timelineQuery) {
+    for (const uri of timelineQuery.uris) {
+      if (uri.endsWith(`/${this.rkey}`)) {
+        return uri;
+      }
+    }
+  }
+
+  // Check profile cache
+  const profileQuery = queryCache.get(`profile:${this.handle}`);
+  if (profileQuery) {
+    for (const uri of profileQuery.uris) {
+      if (uri.endsWith(`/${this.rkey}`)) {
+        return uri;
+      }
+    }
+  }
+
+  return null;
+}
+```
+
+Also add import for queryCache:
+```javascript
+import { queryCache } from '../../services/query-cache.js';
+```
+
+**Step 4: Subscribe to cache updates for optimistic UI**
+
+Add subscription in connectedCallback:
+
+```javascript
+connectedCallback() {
+  super.connectedCallback();
+  // Subscribe will be set up after we know the URI
+}
+
+updated(changedProperties) {
+  const handleChanged = changedProperties.has('handle') && this.handle !== changedProperties.get('handle');
+  const rkeyChanged = changedProperties.has('rkey') && this.rkey !== changedProperties.get('rkey');
+  if ((handleChanged || rkeyChanged) && this.handle && this.rkey) {
+    this.#loadGallery();
+    this.#setupSubscription();
+  }
+}
+
+#currentUri = null;
+
+#setupSubscription() {
+  // Clean up old subscription
+  if (this.#currentUri) {
+    recordCache.unsubscribe(this.#currentUri, this.#onCacheUpdate);
+  }
+
+  // Set up new subscription
+  const uri = this.#findCachedUri() || this._gallery?.uri;
+  if (uri) {
+    this.#currentUri = uri;
+    recordCache.subscribe(uri, this.#onCacheUpdate);
+  }
+}
+
+#onCacheUpdate = (data) => {
+  this._gallery = data;
+};
+
+disconnectedCallback() {
+  if (this.#currentUri) {
+    recordCache.unsubscribe(this.#currentUri, this.#onCacheUpdate);
+  }
+  super.disconnectedCallback();
+}
+```
+
+**Step 5: Verify instant loading from cache**
+
+Run: `npm run dev`
+1. Load timeline
+2. Click a gallery
+Expected: Gallery detail renders instantly (no spinner flash)
+
+**Step 6: Commit**
+
+```bash
+git add src/components/pages/grain-gallery-detail.js
+git commit -m "feat: use record cache for instant gallery detail rendering"
+```
+
+---
+
+## Phase 3: View Transitions
+
+### Task 6: Add View Transitions to Router
+
+**Files:**
+- Modify: `src/router.js`
+
+**Step 1: Wrap navigation in startViewTransition**
+
+Update the `push` method:
+
+```javascript
+push(path) {
+  if (location.pathname === path) return;
+
+  const navigate = () => {
+    history.pushState(null, '', path);
+    this.#navigate();
+    window.dispatchEvent(new CustomEvent('grain:navigate'));
+  };
+
+  // Use View Transitions API if available
+  if (document.startViewTransition) {
+    document.startViewTransition(navigate);
+  } else {
+    navigate();
+  }
+}
+```
+
+**Step 2: Also update replace method**
+
+```javascript
+replace(path) {
+  if (location.pathname === path) return;
+
+  const navigate = () => {
+    history.replaceState(null, '', path);
+    this.#navigate();
+    window.dispatchEvent(new CustomEvent('grain:navigate'));
+  };
+
+  if (document.startViewTransition) {
+    document.startViewTransition(navigate);
+  } else {
+    navigate();
+  }
+}
+```
+
+**Step 3: Verify basic transition works**
+
+Run: `npm run dev`
+Navigate between pages.
+Expected: Subtle cross-fade between pages (default view transition behavior)
+
+**Step 4: Commit**
+
+```bash
+git add src/router.js
+git commit -m "feat: wrap router navigation in View Transitions API"
+```
+
+---
+
+### Task 7: Add Transition Name to Gallery Thumbnail
+
+**Files:**
+- Modify: `src/components/molecules/grain-gallery-thumbnail.js`
+
+**Step 1: Add view-transition-name to the image**
+
+Update styles to include transition name via CSS custom property:
+
+```javascript
+static styles = css`
+  :host {
+    display: block;
+  }
+  a {
+    display: block;
+  }
+  img {
+    display: block;
+    width: 100%;
+    aspect-ratio: 3 / 4;
+    object-fit: cover;
+    background: var(--color-bg-elevated);
+    view-transition-name: var(--transition-name, none);
+  }
+`;
+```
+
+**Step 2: Set transition name dynamically before navigation**
+
+```javascript
+#handleClick(e) {
+  e.preventDefault();
+
+  // Set view transition name just before navigating
+  const img = this.shadowRoot.querySelector('img');
+  if (img) {
+    img.style.viewTransitionName = 'gallery-hero';
+  }
+
+  router.push(`/profile/${this.handle}/gallery/${this.rkey}`);
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/molecules/grain-gallery-thumbnail.js
+git commit -m "feat: add view-transition-name to gallery thumbnail"
+```
+
+---
+
+### Task 8: Add Transition Name to Gallery Detail Carousel
+
+**Files:**
+- Modify: `src/components/organisms/grain-image-carousel.js`
+
+**Step 1: Add view-transition-name to first slide image**
+
+Update the render method to add transition name to first image:
+
+```javascript
+render() {
+  const hasPortrait = this.#hasPortrait;
+  const minAspectRatio = this.#minAspectRatio;
+
+  const carouselStyle = hasPortrait
+    ? `aspect-ratio: ${minAspectRatio};`
+    : '';
+
+  return html`
+    <div class="carousel" style=${carouselStyle} @scroll=${this.#handleScroll}>
+      ${this.photos.map((photo, index) => html`
+        <div class="slide ${hasPortrait ? 'centered' : ''}">
+          <grain-image
+            src=${photo.url}
+            alt=${photo.alt || ''}
+            aspectRatio=${photo.aspectRatio || 1}
+            style=${index === 0 ? 'view-transition-name: gallery-hero;' : ''}
+          ></grain-image>
+        </div>
+      `)}
+    </div>
+    ${this.photos.length > 1 ? html`
+      <div class="dots">
+        <grain-carousel-dots
+          total=${this.photos.length}
+          current=${this._currentIndex}
+        ></grain-carousel-dots>
+      </div>
+    ` : ''}
+  `;
+}
+```
+
+**Step 2: Verify shared element transition**
+
+Run: `npm run dev`
+1. Go to a profile page with galleries
+2. Click a gallery thumbnail
+Expected: The thumbnail image smoothly animates/expands into the carousel position
+
+**Step 3: Commit**
+
+```bash
+git add src/components/organisms/grain-image-carousel.js
+git commit -m "feat: add view-transition-name to carousel for shared element transition"
+```
+
+---
+
+### Task 9: Handle Back Navigation Transition
+
+**Files:**
+- Modify: `src/components/pages/grain-gallery-detail.js`
+
+**Step 1: Set transition name on first image before navigating back**
+
+The back button currently just calls `router.push()`. We need to ensure the carousel image has the transition name set before the transition starts.
+
+Since we're using inline styles in the carousel, this should already work. But we should verify the transition works in both directions.
+
+**Step 2: Verify bidirectional transition**
+
+Run: `npm run dev`
+1. Profile → Gallery detail (forward): thumbnail expands to carousel
+2. Gallery detail → Profile (back button): carousel shrinks back to thumbnail position
+
+If back transition doesn't work, it may be because the thumbnail doesn't have its transition name set when rendering. In that case, we need to coordinate transition names more carefully.
+
+**Step 3: Optional - Add transition name to thumbnails on render**
+
+If back transitions don't work smoothly, update thumbnail to always have a transition name that activates during navigation:
+
+```javascript
+// In grain-gallery-thumbnail.js
+render() {
+  return html`
+    <a
+      href="/profile/${this.handle}/gallery/${this.rkey}"
+      @click=${this.#handleClick}
+    >
+      <img
+        src=${this.imageUrl || ''}
+        alt=${this.alt || ''}
+        loading="lazy"
+        style="view-transition-name: gallery-hero-${this.rkey};"
+      >
+    </a>
+  `;
+}
+```
+
+And update carousel to match:
+```javascript
+style=${index === 0 ? `view-transition-name: gallery-hero-${this.rkey};` : ''}
+```
+
+Note: This requires passing `rkey` to the carousel. Only implement if simple approach doesn't work.
+
+**Step 4: Commit if changes made**
+
+```bash
+git add src/components/molecules/grain-gallery-thumbnail.js src/components/organisms/grain-image-carousel.js
+git commit -m "feat: coordinate transition names for bidirectional navigation"
+```
+
+---
+
+## Phase 4: Timeline Integration (if not already cached)
+
+### Task 10: Verify Timeline Card Navigation Uses Cache
+
+**Files:**
+- Modify: `src/components/organisms/grain-gallery-card.js` (if exists and links to detail)
+
+**Step 1: Check if timeline cards link to gallery detail**
+
+Read the grain-gallery-card.js to see if it navigates to detail view.
+
+**Step 2: Add transition name if timeline cards navigate**
+
+If cards navigate to detail, add view-transition-name to the card's primary image, similar to thumbnail approach.
+
+**Step 3: Commit if changes made**
+
+```bash
+git add src/components/organisms/grain-gallery-card.js
+git commit -m "feat: add view transition to timeline gallery cards"
+```
+
+---
+
+## Summary
+
+**Files created:**
+- `src/services/record-cache.js` - URI-keyed reactive record cache
+- `src/services/query-cache.js` - Query/list cache for pagination
+
+**Files modified:**
+- `src/services/grain-api.js` - Populate caches from API responses
+- `src/components/pages/grain-gallery-detail.js` - Use cache for instant render
+- `src/router.js` - Wrap navigation in View Transitions API
+- `src/components/molecules/grain-gallery-thumbnail.js` - Add transition name
+- `src/components/organisms/grain-image-carousel.js` - Add matching transition name
+
+**User experience:**
+- Timeline → Gallery: Instant render, smooth image expansion
+- Profile → Gallery: Instant partial render, image expansion, data loads in
+- Direct URL: Spinner, then full render
+- Back navigation: Smooth transition back to grid

public/sw.js

···
   // Skip non-GET requests
   if (event.request.method !== 'GET') return;
 
-  // Skip API requests (network-first)
-  if (event.request.url.includes('/graphql')) return;
+  const url = new URL(event.request.url);
 
-  event.respondWith(
-    caches.match(event.request)
-      .then((cached) => cached || fetch(event.request))
-  );
+  // Only serve shell assets from cache, let everything else go to network
+  // This prevents unbounded image caching that crashes PWA
+  if (url.origin === self.location.origin && SHELL_ASSETS.includes(url.pathname)) {
+    event.respondWith(
+      caches.match(event.request)
+        .then((cached) => cached || fetch(event.request))
+    );
+  }
 });

src/components/atoms/grain-avatar.js

···
     src: { type: String },
     alt: { type: String },
     size: { type: String },
-    _hasError: { type: Boolean, state: true }
+    _hasError: { state: true }
   };
 
   static styles = css`
···
     }
   }
 
-  _onError() {
+  #onError() {
     this._hasError = true;
-  }
-
-  _renderFallback() {
-    return html`
-      <div class="fallback ${this.size}" role="img" aria-label=${this.alt || 'Avatar'}>
-        <svg viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-        </svg>
-      </div>
-    `;
   }
 
   render() {
     if (!this.src || this._hasError) {
-      return this._renderFallback();
+      return html`
+        <div class="fallback ${this.size}" role="img" aria-label=${this.alt || 'Avatar'}>
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+          </svg>
+        </div>
+      `;
     }
 
     return html`
···
         class=${this.size}
         src=${this.src}
         alt=${this.alt}
-        loading="lazy"
-        @error=${this._onError}
+        decoding="async"
+        @error=${this.#onError}
       >
     `;
   }

src/components/atoms/grain-image.js

···
       height: 100%;
       object-fit: cover;
       opacity: 0;
-      transition: opacity 0.3s ease;
+      transition: opacity 0.2s ease;
     }
     img.loaded {
       opacity: 1;
     }
-    .placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(
-        135deg,
-        var(--color-bg-elevated) 0%,
-        var(--color-bg-secondary) 100%
-      );
-    }
   `;
 
   constructor() {
···
     return html`
       <div class="container">
         <svg class="spacer" viewBox="0 0 1 ${1 / this.aspectRatio}"></svg>
-        <div class="placeholder"></div>
         <img
           src=${this.src || ''}
           alt=${this.alt || ''}
           class=${this._loaded ? 'loaded' : ''}
+          decoding="async"
           loading="lazy"
           @load=${this.#handleLoad}
         >

src/components/molecules/grain-gallery-thumbnail.js

···
     }
     a {
       display: block;
+      aspect-ratio: 3 / 4;
+      background: var(--color-bg-elevated);
     }
     img {
       display: block;
       width: 100%;
-      aspect-ratio: 3 / 4;
+      height: 100%;
       object-fit: cover;
-      background: var(--color-bg-elevated);
     }
   `;
 
···
         <img
           src=${this.imageUrl || ''}
           alt=${this.alt || ''}
-          loading="lazy"
+          decoding="async"
+          style="view-transition-name: gallery-hero-${this.rkey};"
         >
       </a>
     `;

src/components/molecules/grain-pull-to-refresh.js

···
+import { LitElement, html, css } from 'lit';
+import '../atoms/grain-spinner.js';
+
+const THRESHOLD = 60;
+const MAX_PULL = 100;
+
+export class GrainPullToRefresh extends LitElement {
+  static properties = {
+    refreshing: { type: Boolean },
+    _pulling: { state: true },
+    _pullDistance: { state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      overflow: hidden;
+    }
+    .container {
+      position: relative;
+    }
+    .indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 0;
+      overflow: visible;
+      pointer-events: none;
+    }
+    .content {
+      transition: transform 0.2s;
+    }
+    .content.pulling {
+      transition: none;
+    }
+  `;
+
+  #startY = 0;
+  #currentY = 0;
+
+  constructor() {
+    super();
+    this.refreshing = false;
+    this._pulling = false;
+    this._pullDistance = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('touchstart', this.#onTouchStart, { passive: true });
+    this.addEventListener('touchmove', this.#onTouchMove, { passive: false });
+    this.addEventListener('touchend', this.#onTouchEnd, { passive: true });
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('touchstart', this.#onTouchStart);
+    this.removeEventListener('touchmove', this.#onTouchMove);
+    this.removeEventListener('touchend', this.#onTouchEnd);
+    // Reset state to avoid stale values on reconnect
+    this._pulling = false;
+    this._pullDistance = 0;
+    super.disconnectedCallback();
+  }
+
+  #onTouchStart = (e) => {
+    if (this.refreshing) return;
+    if (window.scrollY > 0) return;
+
+    this.#startY = e.touches[0].clientY;
+    this._pulling = true;
+  };
+
+  #onTouchMove = (e) => {
+    if (!this._pulling || this.refreshing) return;
+
+    this.#currentY = e.touches[0].clientY;
+    const diff = this.#currentY - this.#startY;
+
+    if (diff > 0 && window.scrollY === 0) {
+      e.preventDefault();
+      // Apply resistance
+      this._pullDistance = Math.min(diff * 0.5, MAX_PULL);
+    } else {
+      this._pullDistance = 0;
+    }
+  };
+
+  #onTouchEnd = () => {
+    if (!this._pulling) return;
+
+    if (this._pullDistance >= THRESHOLD) {
+      this.dispatchEvent(new CustomEvent('refresh', { bubbles: true, composed: true }));
+    }
+
+    this._pulling = false;
+    this._pullDistance = 0;
+  };
+
+  render() {
+    const indicatorY = this._pullDistance - 30;
+    const showSpinner = this._pullDistance > 10 || this.refreshing;
+    const opacity = this.refreshing ? 1 : Math.min(this._pullDistance / THRESHOLD, 1);
+
+    return html`
+      <div class="container">
+        <div
+          class="indicator"
+          style="transform: translateY(${this.refreshing ? 25 : indicatorY}px); opacity: ${opacity}"
+        >
+          ${showSpinner ? html`<grain-spinner size="small"></grain-spinner>` : ''}
+        </div>
+        <div
+          class="content ${this._pulling ? 'pulling' : ''}"
+          style="transform: translateY(${this.refreshing ? 50 : this._pullDistance}px)"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-pull-to-refresh', GrainPullToRefresh);

src/components/organisms/grain-gallery-card.js

···
     });
   }
 
+  get #rkey() {
+    return this.gallery?.uri?.split('/').pop() || '';
+  }
+
   #handleClick() {
     const { gallery } = this;
     if (!gallery?.uri || !gallery?.handle) return;
-
-    // Extract rkey from uri (at://did:plc:xxx/social.grain.gallery/rkey)
-    const rkey = gallery.uri.split('/').pop();
-    router.push(`/profile/${gallery.handle}/gallery/${rkey}`);
+    router.push(`/profile/${gallery.handle}/gallery/${this.#rkey}`);
   }
 
   render() {
···
       <div class="clickable" @click=${this.#handleClick}>
         <grain-image-carousel
           .photos=${gallery.photos || []}
+          rkey=${this.#rkey}
         ></grain-image-carousel>
       </div>
 

src/components/organisms/grain-header.js

···
       background: var(--color-bg-primary);
       border-bottom: 1px solid var(--color-border);
       z-index: 100;
+      overflow: hidden;
+      view-transition-name: header;
     }
     header {
       display: flex;

src/components/organisms/grain-image-carousel.js

···
 export class GrainImageCarousel extends LitElement {
   static properties = {
     photos: { type: Array },
+    rkey: { type: String },
     _currentIndex: { state: true }
   };
 
···
     }
   }
 
+  #shouldLoad(index) {
+    // Load current slide and 1 slide ahead/behind for smooth swiping
+    return Math.abs(index - this._currentIndex) <= 1;
+  }
+
   render() {
     const hasPortrait = this.#hasPortrait;
     const minAspectRatio = this.#minAspectRatio;
···
 
     return html`
       <div class="carousel" style=${carouselStyle} @scroll=${this.#handleScroll}>
-        ${this.photos.map(photo => html`
+        ${this.photos.map((photo, index) => html`
           <div class="slide ${hasPortrait ? 'centered' : ''}">
             <grain-image
-              src=${photo.url}
+              src=${this.#shouldLoad(index) ? photo.url : ''}
               alt=${photo.alt || ''}
               aspectRatio=${photo.aspectRatio || 1}
+              style=${index === 0 && this.rkey ? `view-transition-name: gallery-hero-${this.rkey};` : ''}
             ></grain-image>
           </div>
         `)}

src/components/pages/grain-app.js

···
       min-height: 100dvh;
     }
     #outlet {
-      display: contents;
+      display: block;
     }
   `;
 

src/components/pages/grain-gallery-detail.js

···
 import { router } from '../../router.js';
 import { grainApi } from '../../services/grain-api.js';
 import { auth } from '../../services/auth.js';
+import { recordCache } from '../../services/record-cache.js';
+import { queryCache } from '../../services/query-cache.js';
 import '../templates/grain-feed-layout.js';
 import '../molecules/grain-author-chip.js';
 import '../organisms/grain-image-carousel.js';
···
     }
   `;
 
+  #currentUri = null;
+
   constructor() {
     super();
     this._gallery = null;
···
 
   connectedCallback() {
     super.connectedCallback();
+    this.#loadGallery();
   }
 
-  updated(changedProperties) {
-    const handleChanged = changedProperties.has('handle') && this.handle !== changedProperties.get('handle');
-    const rkeyChanged = changedProperties.has('rkey') && this.rkey !== changedProperties.get('rkey');
-    if ((handleChanged || rkeyChanged) && this.handle && this.rkey) {
-      this.#loadGallery();
+  disconnectedCallback() {
+    if (this.#currentUri) {
+      recordCache.unsubscribe(this.#currentUri, this.#onCacheUpdate);
     }
+    super.disconnectedCallback();
   }
 
   async #loadGallery() {
     if (!this.handle || !this.rkey) return;
 
+    // Check cache first - render immediately if we have photo data
+    const cachedUri = this.#findCachedUri();
+    let needsFetch = true;
+
+    if (cachedUri) {
+      const cached = recordCache.get(cachedUri);
+      if (cached?.photos?.length > 0 && cached.photos[0].url) {
+        this._gallery = cached;
+        this.#setupSubscription(cachedUri);
+        this._loading = false;
+
+        // Only fetch if we don't have all photos
+        const hasAllPhotos = cached.photoCount && cached.photos.length >= cached.photoCount;
+        if (hasAllPhotos) {
+          needsFetch = false;
+        }
+      }
+    }
+
+    if (!needsFetch) return;
+
     try {
-      this._loading = true;
+      if (!this._gallery) {
+        this._loading = true;
+      }
       this._error = null;
-      this._gallery = await grainApi.getGalleryDetail(this.handle, this.rkey);
+      const gallery = await grainApi.getGalleryDetail(this.handle, this.rkey);
+
+      // Cache the full result - subscription will update the view
+      recordCache.set(gallery.uri, gallery);
+      this._gallery = gallery;
+      this.#setupSubscription(gallery.uri);
     } catch (err) {
-      this._error = err.message;
+      // Only show error if we don't have cached data to display
+      if (!this._gallery) {
+        this._error = err.message;
+      }
     } finally {
       this._loading = false;
     }
   }
 
+  #findCachedUri() {
+    // Look through timeline cache for matching rkey
+    const timelineQuery = queryCache.get('timeline');
+    if (timelineQuery) {
+      for (const uri of timelineQuery.uris) {
+        if (uri.endsWith(`/${this.rkey}`)) {
+          return uri;
+        }
+      }
+    }
+
+    // Check profile cache
+    const profileQuery = queryCache.get(`profile:${this.handle}`);
+    if (profileQuery) {
+      for (const uri of profileQuery.uris) {
+        if (uri.endsWith(`/${this.rkey}`)) {
+          return uri;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  #setupSubscription(uri) {
+    // Clean up old subscription
+    if (this.#currentUri && this.#currentUri !== uri) {
+      recordCache.unsubscribe(this.#currentUri, this.#onCacheUpdate);
+    }
+
+    // Set up new subscription
+    if (uri && this.#currentUri !== uri) {
+      this.#currentUri = uri;
+      recordCache.subscribe(uri, this.#onCacheUpdate);
+    }
+  }
+
+  #onCacheUpdate = (data) => {
+    this._gallery = data;
+  };
+
   #handleBack() {
-    router.push(`/profile/${this.handle}`);
+    // Use browser history to go back to where user came from (timeline or profile)
+    // Note: history.length is always >= 1 and doesn't indicate if there's a previous page
+    // We use navigation.canGoBack when available, otherwise fall back to history.back()
+    if (navigation?.canGoBack) {
+      history.back();
+    } else if (history.length > 1) {
+      // Fallback for browsers without Navigation API
+      history.back();
+    } else {
+      // Fallback if direct URL access
+      router.push(`/profile/${this.handle}`);
+    }
   }
 
   #formatDate(iso) {
···
 
           <grain-image-carousel
             .photos=${this._gallery.photos}
+            rkey=${this.rkey}
           ></grain-image-carousel>
 
           <grain-engagement-bar

src/components/pages/grain-profile.js

···
 import { LitElement, html, css } from 'lit';
 import { grainApi } from '../../services/grain-api.js';
+import { recordCache } from '../../services/record-cache.js';
 import '../templates/grain-feed-layout.js';
 import '../organisms/grain-profile-header.js';
 import '../organisms/grain-gallery-grid.js';
+import '../molecules/grain-pull-to-refresh.js';
 import '../atoms/grain-spinner.js';
 
 export class GrainProfile extends LitElement {
···
     handle: { type: String },
     _profile: { state: true },
     _loading: { state: true },
+    _refreshing: { state: true },
     _error: { state: true }
   };
 
···
     super();
     this._profile = null;
     this._loading = true;
+    this._refreshing = false;
     this._error = null;
   }
 
   connectedCallback() {
     super.connectedCallback();
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('handle') && this.handle && this.handle !== changedProperties.get('handle')) {
-      this.#loadProfile();
+    // Check cache first to avoid flash
+    const cached = recordCache.get(`profile:${this.handle}`);
+    if (cached) {
+      this._profile = cached;
+      this._loading = false;
+    } else {
+      this.#fetchProfile();
     }
   }
 
-  async #loadProfile() {
-    if (!this.handle) return;
-
+  async #fetchProfile() {
     try {
-      this._loading = true;
       this._error = null;
       this._profile = await grainApi.getProfile(this.handle);
     } catch (err) {
···
     }
   }
 
+  async #handleRefresh() {
+    this._refreshing = true;
+    try {
+      this._profile = await grainApi.getProfile(this.handle);
+      this._error = null;
+    } catch (err) {
+      this._error = err.message;
+    } finally {
+      this._refreshing = false;
+    }
+  }
+
   render() {
     return html`
       <grain-feed-layout>
-        ${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
+        <grain-pull-to-refresh
+          ?refreshing=${this._refreshing}
+          @refresh=${this.#handleRefresh}
+        >
+          ${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
 
-        ${this._error ? html`
-          <p class="error">${this._error}</p>
-        ` : ''}
+          ${this._error ? html`
+            <p class="error">${this._error}</p>
+          ` : ''}
 
-        ${!this._loading && this._profile ? html`
-          <grain-profile-header .profile=${this._profile}></grain-profile-header>
+          ${!this._loading && this._profile ? html`
+            <grain-profile-header .profile=${this._profile}></grain-profile-header>
 
-          ${this._profile.galleries.length > 0 ? html`
-            <grain-gallery-grid
-              handle=${this.handle}
-              .galleries=${this._profile.galleries}
-            ></grain-gallery-grid>
-          ` : html`
-            <p class="empty">No galleries yet</p>
-          `}
-        ` : ''}
+            ${this._profile.galleries.length > 0 ? html`
+              <grain-gallery-grid
+                handle=${this.handle}
+                .galleries=${this._profile.galleries}
+              ></grain-gallery-grid>
+            ` : html`
+              <p class="empty">No galleries yet</p>
+            `}
+          ` : ''}
+        </grain-pull-to-refresh>
       </grain-feed-layout>
     `;
   }

src/components/pages/grain-timeline.js

···
 import { LitElement, html, css } from 'lit';
 import { grainApi } from '../../services/grain-api.js';
+import { recordCache } from '../../services/record-cache.js';
+import { queryCache } from '../../services/query-cache.js';
 import '../templates/grain-feed-layout.js';
 import '../organisms/grain-gallery-card.js';
+import '../molecules/grain-pull-to-refresh.js';
 import '../atoms/grain-spinner.js';
 
 export class GrainTimeline extends LitElement {
   static properties = {
     _galleries: { state: true },
     _loading: { state: true },
+    _refreshing: { state: true },
     _hasMore: { state: true },
     _cursor: { state: true },
     _error: { state: true }
···
   `;
 
   #observer = null;
+  #initialized = false;
 
   constructor() {
     super();
     this._galleries = [];
-    this._loading = true;
+    this._loading = false;
+    this._refreshing = false;
     this._hasMore = true;
     this._cursor = null;
     this._error = null;
+
+    // Check cache synchronously to avoid flash
+    this.#initFromCache();
+  }
+
+  #initFromCache() {
+    const cached = queryCache.get('timeline');
+    if (cached?.uris?.length > 0) {
+      const galleries = cached.uris
+        .map(uri => recordCache.get(uri))
+        .filter(Boolean);
+
+      if (galleries.length > 0) {
+        this._galleries = galleries;
+        this._hasMore = cached.hasMore;
+        this._cursor = cached.cursor;
+        this.#initialized = true;
+        return;
+      }
+    }
+    // No cache - will need to fetch
+    this._loading = true;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.#loadInitial();
+    if (!this.#initialized) {
+      this.#fetchTimeline();
+    }
   }
 
   disconnectedCallback() {
···
     this.#setupInfiniteScroll();
   }
 
-  async #loadInitial() {
+  async #fetchTimeline() {
     try {
-      this._loading = true;
       this._error = null;
       const result = await grainApi.getTimeline({ first: 10 });
 
···
     }
   }
 
+  async #handleRefresh() {
+    this._refreshing = true;
+    try {
+      const result = await grainApi.getTimeline({ first: 10 });
+      this._galleries = result.galleries;
+      this._hasMore = result.pageInfo.hasNextPage;
+      this._cursor = result.pageInfo.endCursor;
+      this._error = null;
+    } catch (err) {
+      this._error = err.message;
+    } finally {
+      this._refreshing = false;
+    }
+  }
+
   #setupInfiniteScroll() {
     const sentinel = this.shadowRoot.getElementById('sentinel');
     if (!sentinel) return;
···
   render() {
     return html`
       <grain-feed-layout>
-        ${this._error ? html`
-          <p class="error">${this._error}</p>
-        ` : ''}
+        <grain-pull-to-refresh
+          ?refreshing=${this._refreshing}
+          @refresh=${this.#handleRefresh}
+        >
+          ${this._error ? html`
+            <p class="error">${this._error}</p>
+          ` : ''}
 
-        ${this._galleries.map(gallery => html`
-          <grain-gallery-card .gallery=${gallery}></grain-gallery-card>
-        `)}
+          ${this._galleries.map(gallery => html`
+            <grain-gallery-card .gallery=${gallery}></grain-gallery-card>
+          `)}
 
-        ${!this._loading && !this._galleries.length && !this._error ? html`
-          <p class="empty">No galleries yet</p>
-        ` : ''}
+          ${!this._loading && !this._galleries.length && !this._error ? html`
+            <p class="empty">No galleries yet</p>
+          ` : ''}
 
-        <div id="sentinel"></div>
+          <div id="sentinel"></div>
 
-        ${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
+          ${this._loading ? html`<grain-spinner></grain-spinner>` : ''}
+        </grain-pull-to-refresh>
       </grain-feed-layout>
     `;
   }

src/router.js

···
   #routes = [];
   #outlet = null;
   #currentPath = null;
+  #pageCache = new Map(); // path -> { element }
+  #scrollCache = new Map(); // path -> scrollY (persists after element eviction)
+
+  // Only cache these route patterns (timeline and profiles)
+  #cacheablePatterns = [
+    /^\/$/,                    // timeline
+    /^\/profile\/[^/]+$/       // profile (not followers/following/gallery)
+  ];
 
   register(path, componentTag) {
     this.#routes.push({ path, componentTag });
···
 
   connect(outlet) {
     this.#outlet = outlet;
-    window.addEventListener('popstate', () => this.#navigate());
+    window.addEventListener('popstate', () => {
+      if (document.startViewTransition) {
+        document.startViewTransition(() => this.#navigate());
+      } else {
+        this.#navigate();
+      }
+    });
     this.#navigate();
     return this;
   }
 
   push(path) {
-    if (location.pathname !== path) {
+    if (location.pathname === path) return;
+
+    const navigate = () => {
       history.pushState(null, '', path);
       this.#navigate();
       window.dispatchEvent(new CustomEvent('grain:navigate'));
+    };
+
+    if (document.startViewTransition) {
+      document.startViewTransition(navigate);
+    } else {
+      navigate();
     }
   }
 
   replace(path) {
-    if (location.pathname !== path) {
+    if (location.pathname === path) return;
+
+    const navigate = () => {
       history.replaceState(null, '', path);
       this.#navigate();
       window.dispatchEvent(new CustomEvent('grain:navigate'));
+    };
+
+    if (document.startViewTransition) {
+      document.startViewTransition(navigate);
+    } else {
+      navigate();
     }
   }
 
···
   }
 
   #extractParams(pattern, pathname) {
-    // Wildcard matches everything
     if (pattern === '*') return {};
 
     const patternParts = pattern.split('/');
···
     return params;
   }
 
+  #isCacheable(pathname) {
+    return this.#cacheablePatterns.some(pattern => pattern.test(pathname));
+  }
+
   #navigate() {
     const pathname = location.pathname;
 
-    // Skip if same path (optimization)
+    // Save scroll position of current page before switching
+    if (this.#currentPath) {
+      this.#scrollCache.set(this.#currentPath, window.scrollY);
+    }
+
+    // Skip if same path
     if (this.#currentPath === pathname) return;
+
+    // Deactivate/remove current page
+    if (this.#currentPath) {
+      const current = this.#pageCache.get(this.#currentPath);
+      if (current) {
+        if (this.#isCacheable(this.#currentPath)) {
+          // Hide cacheable pages
+          current.element.style.display = 'none';
+          current.element.dispatchEvent(new CustomEvent('grain:deactivated'));
+        } else {
+          // Remove non-cacheable pages from DOM
+          current.element.remove();
+          this.#pageCache.delete(this.#currentPath);
+        }
+      }
+    }
+
     this.#currentPath = pathname;
 
+    // Check if we have a cached page element
+    if (this.#pageCache.has(pathname)) {
+      const cached = this.#pageCache.get(pathname);
+      cached.element.style.display = '';
+      cached.element.dispatchEvent(new CustomEvent('grain:activated'));
+      // Restore scroll position after paint
+      requestAnimationFrame(() => {
+        window.scrollTo(0, this.#scrollCache.get(pathname) || 0);
+      });
+      return;
+    }
+
+    // Create new page
     const match = this.#matchRoute(pathname);
     if (!match || !this.#outlet) return;
 
     const el = document.createElement(match.componentTag);
-
-    // Pass route params as properties
     Object.assign(el, match.params);
 
-    this.#outlet.innerHTML = '';
+    // Cache if cacheable, otherwise just track for deactivation
+    this.#pageCache.set(pathname, { element: el });
     this.#outlet.appendChild(el);
 
-    // Scroll to top on navigation
-    window.scrollTo(0, 0);
+    // Restore saved scroll position, or start at top for new pages
+    requestAnimationFrame(() => {
+      window.scrollTo(0, this.#scrollCache.get(pathname) || 0);
+    });
   }
 }
 

src/services/grain-api.js

···
 import { config } from '../config.js';
+import { recordCache } from './record-cache.js';
+import { queryCache } from './query-cache.js';
 
 class GrainApiService {
   #endpoint = config.apiEndpoint;
···
               createdAt
               actorHandle
               socialGrainActorProfileByDid {
-                avatar { url }
+                avatar { url(preset: "avatar") }
                 displayName
               }
               socialGrainGalleryItemViaGallery(first: 10, sortBy: [{ field: position, direction: ASC }]) {
···
                         uri
                         alt
                         aspectRatio { width height }
-                        photo { url }
+                        photo { url(preset: "feed_thumbnail") }
                       }
                     }
                   }
···
     `;
 
     const response = await this.#execute(query, { first, after });
-    return this.#transformTimelineResponse(response);
+    return this.#transformTimelineResponse(response, { isPagination: !!after });
   }
 
-  #transformTimelineResponse(response) {
+  #transformTimelineResponse(response, { isPagination = false } = {}) {
     const connection = response.data?.socialGrainGallery;
     if (!connection) return { galleries: [], pageInfo: { hasNextPage: false } };
 
···
       };
     }).filter(gallery => gallery.photos.length > 0);
 
+    // Cache each gallery record by URI
+    galleries.forEach(gallery => {
+      recordCache.set(gallery.uri, gallery);
+    });
+
+    // Cache the timeline query result (URIs only for list navigation)
+    const cacheData = {
+      uris: galleries.map(g => g.uri),
+      cursor: connection.pageInfo?.endCursor || null,
+      hasMore: connection.pageInfo?.hasNextPage ?? false
+    };
+
+    if (isPagination) {
+      queryCache.append('timeline', cacheData);
+    } else {
+      queryCache.set('timeline', cacheData);
+    }
+
     return {
       galleries,
       pageInfo: connection.pageInfo
···
               createdAt
               actorHandle
               socialGrainActorProfileByDid {
-                avatar { url }
+                avatar { url(preset: "avatar") }
                 displayName
               }
               socialGrainGalleryItemViaGallery(first: 10, sortBy: [{ field: position, direction: ASC }]) {
···
                         uri
                         alt
                         aspectRatio { width height }
-                        photo { url }
+                        photo { url(preset: "feed_thumbnail") }
                       }
                     }
                   }
···
               actorHandle
               displayName
               description
-              avatar { url }
+              avatar { url(preset: "avatar") }
             }
           }
           pageInfo {
···
                   node {
                     uri
                     title
+                    description
                     createdAt
-                    socialGrainGalleryItemViaGallery(first: 1, sortBy: [{ field: position, direction: ASC }]) {
+                    socialGrainGalleryItemViaGallery(first: 10, sortBy: [{ field: position, direction: ASC }]) {
+                      totalCount
                       edges {
                         node {
                           itemResolved {
                             ... on SocialGrainPhoto {
+                              uri
+                              alt
+                              aspectRatio { width height }
                               photo { url(preset: "feed_thumbnail") }
                             }
                           }
                         }
                       }
+                    }
+                    socialGrainFavoriteViaSubject {
+                      totalCount
+                    }
+                    socialGrainCommentViaSubject {
+                      totalCount
                     }
                   }
                 }
···
 
     const galleries = galleriesConnection?.edges?.map(edge => {
       const node = edge.node;
-      const firstPhoto = node.socialGrainGalleryItemViaGallery?.edges?.[0]?.node?.itemResolved;
+      const itemsConnection = node.socialGrainGalleryItemViaGallery;
+      const items = itemsConnection?.edges || [];
+
+      const photos = items
+        .map(i => {
+          const photo = i.node.itemResolved;
+          if (!photo) return null;
+          return {
+            uri: photo.uri,
+            url: photo.photo?.url || '',
+            alt: photo.alt || '',
+            aspectRatio: photo.aspectRatio
+              ? photo.aspectRatio.width / photo.aspectRatio.height
+              : 1
+          };
+        })
+        .filter(Boolean);
+
       return {
         uri: node.uri,
         title: node.title,
+        description: node.description || '',
         createdAt: node.createdAt,
-        thumbnailUrl: firstPhoto?.photo?.url || ''
+        handle: profile?.actorHandle || handle,
+        displayName: profile?.displayName || '',
+        avatarUrl: profile?.avatar?.url || '',
+        photos,
+        photoCount: itemsConnection?.totalCount || photos.length,
+        thumbnailUrl: photos[0]?.url || '',
+        favoriteCount: node.socialGrainFavoriteViaSubject?.totalCount || 0,
+        commentCount: node.socialGrainCommentViaSubject?.totalCount || 0
       };
     }) || [];
 
+    // Cache each gallery with full photo data
+    galleries.forEach(gallery => {
+      recordCache.set(gallery.uri, gallery);
+    });
+
+    // Cache the profile's gallery list
+    queryCache.set(`profile:${handle}`, {
+      uris: galleries.map(g => g.uri),
+      cursor: null,
+      hasMore: false
+    });
+
     // Get follower count in a separate query (people who follow this user)
     const followerCount = await this.#getFollowerCount(profile?.did);
 
-    return {
+    const profileData = {
       handle: profile?.actorHandle || handle,
       displayName: profile?.displayName || '',
       description: profile?.description || '',
···
       followingCount: profile?.socialGrainGraphFollowByDid?.totalCount || 0,
       galleries
     };
+
+    // Cache the profile data
+    recordCache.set(`profile:${handle}`, profileData);
+
+    return profileData;
   }
 
   async #getFollowerCount(did) {
···
                 actorHandle
                 displayName
                 description
-                avatar { url }
+                avatar { url(preset: "avatar") }
               }
             }
           }
···
               actorHandle
               displayName
               description
-              avatar { url }
+              avatar { url(preset: "avatar") }
             }
           }
         }
···
                         uri
                         alt
                         aspectRatio { width height }
-                        photo { url(preset: "feed_fullsize") }
+                        photo { url(preset: "feed_thumbnail") }
                       }
                     }
                   }

src/services/query-cache.js

···
+// src/services/query-cache.js
+
+const queries = new Map();
+
+export const queryCache = {
+  /**
+   * Get cached query result
+   * @param {string} queryId - Query identifier (e.g., "timeline", "profile:handle")
+   * @returns {{ uris: string[], cursor: string|null, hasMore: boolean }|undefined}
+   */
+  get(queryId) {
+    return queries.get(queryId);
+  },
+
+  /**
+   * Set query result (replaces existing)
+   * @param {string} queryId - Query identifier
+   * @param {{ uris: string[], cursor: string|null, hasMore: boolean }} result
+   */
+  set(queryId, result) {
+    queries.set(queryId, {
+      uris: result.uris || [],
+      cursor: result.cursor || null,
+      hasMore: result.hasMore ?? true,
+      fetchedAt: Date.now()
+    });
+  },
+
+  /**
+   * Append to existing query result (for pagination)
+   * @param {string} queryId - Query identifier
+   * @param {{ uris: string[], cursor: string|null, hasMore: boolean }} result
+   */
+  append(queryId, result) {
+    const existing = queries.get(queryId);
+    if (existing) {
+      queries.set(queryId, {
+        uris: [...existing.uris, ...(result.uris || [])],
+        cursor: result.cursor || null,
+        hasMore: result.hasMore ?? true,
+        fetchedAt: existing.fetchedAt // preserve original fetch time
+      });
+    } else {
+      this.set(queryId, result);
+    }
+  },
+
+  /**
+   * Check if query is cached
+   * @param {string} queryId - Query identifier
+   * @returns {boolean}
+   */
+  has(queryId) {
+    return queries.has(queryId);
+  },
+
+  /**
+   * Clear all query cache (useful for logout or refresh)
+   */
+  clear() {
+    queries.clear();
+  }
+};

src/services/record-cache.js

···
+// src/services/record-cache.js
+
+const cache = new Map();
+const listeners = new Map();
+
+function notify(key, data) {
+  const keyListeners = listeners.get(key);
+  if (keyListeners) {
+    for (const callback of keyListeners) {
+      callback(data);
+    }
+  }
+}
+
+export const recordCache = {
+  /**
+   * Get a cached record by key
+   * @param {string} key - Cache key (typically AT Protocol URI, or "profile:{handle}" for profiles)
+   * @returns {object|undefined} Cached record or undefined
+   */
+  get(key) {
+    return cache.get(key);
+  },
+
+  /**
+   * Set/merge record data. Dispatches update event.
+   * @param {string} key - Cache key (typically AT Protocol URI, or "profile:{handle}" for profiles)
+   * @param {object} data - Partial or full record data
+   */
+  set(key, data) {
+    const existing = cache.get(key) || {};
+    const merged = { ...existing, ...data };
+    cache.set(key, merged);
+    notify(key, merged);
+  },
+
+  /**
+   * Check if a key is cached
+   * @param {string} key - Cache key (typically AT Protocol URI, or "profile:{handle}" for profiles)
+   * @returns {boolean}
+   */
+  has(key) {
+    return cache.has(key);
+  },
+
+  /**
+   * Subscribe to changes for a specific key
+   * @param {string} key - Cache key (typically AT Protocol URI, or "profile:{handle}" for profiles)
+   * @param {function} callback - Called with updated data
+   */
+  subscribe(key, callback) {
+    if (!listeners.has(key)) {
+      listeners.set(key, new Set());
+    }
+    listeners.get(key).add(callback);
+  },
+
+  /**
+   * Unsubscribe from changes
+   * @param {string} key - Cache key (typically AT Protocol URI, or "profile:{handle}" for profiles)
+   * @param {function} callback - The callback to remove
+   */
+  unsubscribe(key, callback) {
+    const keyListeners = listeners.get(key);
+    if (keyListeners) {
+      keyListeners.delete(callback);
+      if (keyListeners.size === 0) {
+        listeners.delete(key);
+      }
+    }
+  },
+
+  /**
+   * Clear all cached data and subscriptions (useful for logout)
+   */
+  clear() {
+    cache.clear();
+    listeners.clear();
+  }
+};

src/styles/variables.css

···
   color: var(--color-text-primary);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+}
+
+/* View Transitions - keep sticky header above transitioning content */
+::view-transition-group(header) {
+  z-index: 100;
 }