cleaned up atproto service and working grain galleries

scripts/discover-collections.ts

···
 }
 
 // Run if called directly
-if (require.main === module) {
-  main();
-} 
+// Run the main function
+main(); 

src/components/content/BlueskyFeed.astro

···
 ---
-import { AtprotoClient } from '../../lib/atproto/client';
+import { AtprotoBrowser } from '../../lib/atproto/atproto-browser';
 import { loadConfig } from '../../lib/config/site';
 import BlueskyPost from './BlueskyPost.astro';
 
···
 const { feedUri, limit = 10, showAuthor = true, showTimestamp = true } = Astro.props;
 
 const config = loadConfig();
-const client = new AtprotoClient(config.atproto.pdsUrl);
+const browser = new AtprotoBrowser();
 
 // Fetch feed data with error handling
 let blueskyPosts: any[] = [];
 try {
-  const records = await client.getFeed(feedUri, limit);
-  const filteredRecords = client.filterSupportedRecords(records);
+  const records = await browser.getFeed(feedUri, limit);
+  const filteredRecords = records.filter(r => r.value?.$type === 'app.bsky.feed.post');
   
   // Only render Bluesky posts
-  blueskyPosts = filteredRecords.filter(record => 
-    record.value && record.value.$type === 'app.bsky.feed.post'
-  );
+  blueskyPosts = filteredRecords;
 } catch (error) {
   console.error('Error fetching feed:', error);
   blueskyPosts = [];

src/components/content/BlueskyPost.astro

···
 ---
 import type { BlueskyPost } from '../../lib/types/atproto';
+import { extractCidFromBlobRef, blobCdnUrl } from '../../lib/atproto/blob-url';
+import { loadConfig } from '../../lib/config/site';
 
 interface Props {
   post: BlueskyPost;
···
   });
 };
 
-// Helper function to get image URL from blob reference
-const getImageUrl = (imageRef: string) => {
-  return `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=did:plc:6ayddqghxhciedbaofoxkcbs&cid=${imageRef}`;
+const getImageUrl = (ref: unknown) => {
+  const cid = extractCidFromBlobRef(ref);
+  if (!cid) return '';
+  const did = loadConfig().atproto.did;
+  if (!did) return '';
+  return blobCdnUrl(did, cid);
 };
 
 // Helper function to render images
···
   return (
     <div class={`grid gap-2 ${images.length === 1 ? 'grid-cols-1' : images.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
       {images.map((image: any) => {
-        const imageUrl = getImageUrl(image.image.ref.$link);
+        const imageUrl = getImageUrl(image.image?.ref);
         return (
           <div class="relative">
             <img 

src/components/content/ContentFeed.astro

···
 ---
-import { AtprotoClient } from '../../lib/atproto/client';
+import { AtprotoBrowser } from '../../lib/atproto/atproto-browser';
 import { loadConfig } from '../../lib/config/site';
 import type { AtprotoRecord } from '../../lib/types/atproto';
+import { extractCidFromBlobRef, blobCdnUrl } from '../../lib/atproto/blob';
 
 interface Props {
   handle: string;
···
 } = Astro.props;
 
 const config = loadConfig();
-const client = new AtprotoClient(config.atproto.pdsUrl);
+const browser = new AtprotoBrowser();
 
 // Helper function to get image URL from blob reference
-const getImageUrl = (imageRef: string) => {
-  return `https://bsky.social/xrpc/com.atproto.sync.getBlob?did=did:plc:6ayddqghxhciedbaofoxkcbs&cid=${imageRef}`;
+const getImageUrl = (imageRef: unknown) => {
+  const cid = extractCidFromBlobRef(imageRef);
+  if (!cid) return '';
+  const did = config.atproto.did;
+  if (!did) return '';
+  return blobCdnUrl(did, cid);
 };
 
 // Helper function to format date
···
 let records: AtprotoRecord[] = [];
 try {
   if (feedUri) {
-    records = await client.getFeed(feedUri, limit);
+    records = await browser.getFeed(feedUri, limit);
   } else {
-    records = await client.getRecords(handle, collection, limit);
+    const res = await browser.getCollectionRecords(handle, collection, limit);
+    records = res?.records ?? [];
   }
 
 } catch (error) {
···
                 {post.embed.$type === 'app.bsky.embed.images' && post.embed.images && (
                   <div class={`grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : post.embed.images.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
                     {post.embed.images.map((image: any) => {
-                      // Handle both string and BlobRef object formats
-                      let imageRef;
-                      if (typeof image.image?.ref === 'string') {
-                        imageRef = image.image.ref;
-                      } else if (image.image?.ref?.$link) {
-                        imageRef = image.image.ref.$link;
-                      } else if (image.image?.ref?.toString) {
-                        // Handle BlobRef object
-                        imageRef = image.image.ref.toString();
-                      }
-                      
-                      const imageUrl = imageRef ? getImageUrl(imageRef) : '';
+                      const imageUrl = getImageUrl(image.image?.ref);
                       return (
                         <div class="relative">
                           <img 

src/components/content/GrainGalleryDisplay.astro

···
             class="w-full h-48 object-cover rounded-lg transition-transform duration-200 group-hover:scale-105"
             loading="lazy"
           />
-          {(image.alt || image.caption) && (
-            <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-sm p-2 rounded-b-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-              {image.alt || image.caption}
+          {(image.alt || image.caption || image.exif) && (
+            <div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs p-2 rounded-b-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 space-y-1">
+              {image.alt || image.caption ? (
+                <div class="font-medium">{image.alt || image.caption}</div>
+              ) : null}
+              {image.exif && (
+                <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
+                  {image.exif.make && image.exif.model && (
+                    <div class="col-span-2">{image.exif.make} {image.exif.model}</div>
+                  )}
+                  {image.exif.lensMake && image.exif.lensModel && (
+                    <div class="col-span-2">{image.exif.lensMake} {image.exif.lensModel}</div>
+                  )}
+                  {image.exif.fNumber && (
+                    <div>ƒ/{image.exif.fNumber}</div>
+                  )}
+                  {image.exif.exposureTime && (
+                    <div>{image.exif.exposureTime}s</div>
+                  )}
+                  {image.exif.iSO && (
+                    <div>ISO {image.exif.iSO}</div>
+                  )}
+                  {image.exif.focalLengthIn35mmFormat && (
+                    <div>{image.exif.focalLengthIn35mmFormat}mm</div>
+                  )}
+                  {image.exif.dateTimeOriginal && (
+                    <div class="col-span-2">{new Date(image.exif.dateTimeOriginal).toLocaleDateString()}</div>
+                  )}
+                </div>
+              )}
             </div>
           )}
         </div>

src/lib/atproto/atproto-browser.ts

···
       return [];
     }
   }
+
+  // Get posts from an appview feed URI
+  async getFeed(feedUri: string, limit: number = 20): Promise<AtprotoRecord[]> {
+    try {
+      const response = await this.agent.api.app.bsky.feed.getFeed({
+        feed: feedUri,
+        limit,
+      });
+
+      const records: AtprotoRecord[] = response.data.feed.map((item: any) => ({
+        uri: item.post.uri,
+        cid: item.post.cid,
+        value: item.post.record,
+        indexedAt: item.post.indexedAt,
+        collection: item.post.uri.split('/')[2] || 'unknown',
+        $type: (item.post.record?.$type as string) || 'unknown',
+      }));
+
+      return records;
+    } catch (error) {
+      console.error('Error fetching feed:', error);
+      return [];
+    }
+  }
 } 

src/lib/atproto/client.ts

···
-import { AtpAgent } from '@atproto/api';
-import type { AtprotoRecord } from '../types/atproto';
-
-// Simple in-memory cache with TTL
-class AtprotoCache {
-  private cache = new Map<string, { data: any; timestamp: number }>();
-  private ttl = 5 * 60 * 1000; // 5 minutes
-
-  set(key: string, data: any): void {
-    this.cache.set(key, { data, timestamp: Date.now() });
-  }
-
-  get(key: string): any | null {
-    const item = this.cache.get(key);
-    if (!item) return null;
-    
-    if (Date.now() - item.timestamp > this.ttl) {
-      this.cache.delete(key);
-      return null;
-    }
-    
-    return item.data;
-  }
-
-  clear(): void {
-    this.cache.clear();
-  }
-}
-
-export class AtprotoClient {
-  private agent: AtpAgent;
-  private cache: AtprotoCache;
-
-  constructor(pdsUrl: string = 'https://bsky.social') {
-    this.agent = new AtpAgent({ service: pdsUrl });
-    this.cache = new AtprotoCache();
-  }
-
-  async resolveHandle(handle: string): Promise<string | null> {
-    const cacheKey = `handle:${handle}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-
-    try {
-      const response = await this.agent.api.com.atproto.identity.resolveHandle({
-        handle: handle,
-      });
-
-      const did = response.data.did;
-      this.cache.set(cacheKey, did);
-      return did;
-    } catch (error) {
-      console.error('Error resolving handle:', error);
-      return null;
-    }
-  }
-
-  async getRecords(identifier: string, collection: string, limit: number = 50): Promise<AtprotoRecord[]> {
-    // Check if identifier is a handle (contains @) or DID
-    let did = identifier;
-    if (identifier.includes('@')) {
-      console.log('AtprotoClient: Resolving handle to DID:', identifier);
-      const resolvedDid = await this.resolveHandle(identifier);
-      if (!resolvedDid) {
-        console.error('AtprotoClient: Failed to resolve handle:', identifier);
-        return [];
-      }
-      did = resolvedDid;
-      console.log('AtprotoClient: Resolved handle to DID:', did);
-    }
-
-    const cacheKey = `records:${did}:${collection}:${limit}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-
-    console.log('AtprotoClient: Fetching records for DID:', did);
-    console.log('AtprotoClient: Collection:', collection);
-    console.log('AtprotoClient: Limit:', limit);
-
-    try {
-      const response = await this.agent.api.com.atproto.repo.listRecords({
-        repo: did,
-        collection,
-        limit,
-      });
-
-      console.log('AtprotoClient: API response received');
-      console.log('AtprotoClient: Records count:', response.data.records.length);
-
-      const records = response.data.records.map((record: any) => ({
-        uri: record.uri,
-        cid: record.cid,
-        value: record.value,
-        indexedAt: record.indexedAt,
-      }));
-
-      this.cache.set(cacheKey, records);
-      return records;
-    } catch (error) {
-      console.error('AtprotoClient: Error fetching records:', error);
-      console.error('AtprotoClient: Error details:', {
-        did,
-        collection,
-        limit,
-        error: error instanceof Error ? error.message : String(error)
-      });
-      return [];
-    }
-  }
-
-  async getFeed(feedUri: string, limit: number = 20): Promise<AtprotoRecord[]> {
-    const cacheKey = `feed:${feedUri}:${limit}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-
-    try {
-      const response = await this.agent.api.app.bsky.feed.getFeed({
-        feed: feedUri,
-        limit,
-      });
-
-      const records = response.data.feed.map((item: any) => ({
-        uri: item.post.uri,
-        cid: item.post.cid,
-        value: item.post.record,
-        indexedAt: item.post.indexedAt,
-      }));
-
-      this.cache.set(cacheKey, records);
-      return records;
-    } catch (error) {
-      console.error('Error fetching feed:', error);
-      return [];
-    }
-  }
-
-  async getProfile(did: string): Promise<any> {
-    const cacheKey = `profile:${did}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-
-    try {
-      const response = await this.agent.api.app.bsky.actor.getProfile({
-        actor: did,
-      });
-
-      this.cache.set(cacheKey, response.data);
-      return response.data;
-    } catch (error) {
-      console.error('Error fetching profile:', error);
-      return null;
-    }
-  }
-
-  // Filter records by supported content types
-  filterSupportedRecords(records: AtprotoRecord[]): AtprotoRecord[] {
-    return records.filter(record => {
-      const type = record.value?.$type;
-      return type && (
-        type === 'app.bsky.feed.post' ||
-        type === 'app.bsky.actor.profile#whitewindBlogPost' ||
-        type === 'app.bsky.actor.profile#leafletPublication' ||
-        type === 'app.bsky.actor.profile#grainImageGallery'
-      );
-    });
-  }
-
-  // Get all records from a repository (using existing API)
-  async getAllRecords(handle: string, limit: number = 100): Promise<AtprotoRecord[]> {
-    const cacheKey = `all-records:${handle}:${limit}`;
-    const cached = this.cache.get(cacheKey);
-    if (cached) return cached;
-
-    try {
-      console.log('getAllRecords: Starting with handle:', handle);
-      
-      // Resolve handle to DID
-      const did = await this.resolveHandle(handle);
-      console.log('getAllRecords: Resolved DID:', did);
-      
-      if (!did) {
-        console.error('getAllRecords: Failed to resolve handle to DID');
-        return [];
-      }
-
-      // Try to get records from common collections
-      console.log('getAllRecords: Trying common collections...');
-      const collections = ['app.bsky.feed.post', 'app.bsky.actor.profile'];
-      let allRecords: AtprotoRecord[] = [];
-
-      for (const collection of collections) {
-        try {
-          console.log(`getAllRecords: Trying collection: ${collection}`);
-          const response = await this.agent.api.com.atproto.repo.listRecords({
-            repo: did,
-            collection,
-            limit: Math.floor(limit / collections.length),
-          });
-          
-          console.log(`getAllRecords: Got ${response.data.records.length} records from ${collection}`);
-          
-          const records = response.data.records.map((record: any) => ({
-            uri: record.uri,
-            cid: record.cid,
-            value: record.value,
-            indexedAt: record.indexedAt,
-          }));
-          
-          allRecords = allRecords.concat(records);
-        } catch (error) {
-          console.log(`getAllRecords: No records in collection ${collection}:`, error);
-        }
-      }
-
-      console.log('getAllRecords: Total records found:', allRecords.length);
-      this.cache.set(cacheKey, allRecords);
-      return allRecords;
-    } catch (error) {
-      console.error('getAllRecords: Error fetching all records:', error);
-      console.error('getAllRecords: Error details:', {
-        handle,
-        limit,
-        error: error instanceof Error ? error.message : String(error)
-      });
-      return [];
-    }
-  }
-
-  // Clear cache (useful for development)
-  clearCache(): void {
-    this.cache.clear();
-  }
-} 

src/lib/components/discovered-registry.ts

···
 import type { DiscoveredTypes } from '../generated/discovered-types';
+import type { AnyRecordByType } from '../atproto/record-types';
 
-export interface DiscoveredComponent {
-  $type: DiscoveredTypes;
+export type DiscoveredComponent<T extends string = DiscoveredTypes> = {
+  $type: T;
   component: string;
-  props: Record<string, any>;
+  props: Record<string, unknown>;
 }
 
-export interface ComponentRegistry {
-  [key: string]: {
-    component: string;
-    props?: Record<string, any>;
-  };
-}
+export type ComponentRegistry = Record<string, { component: string; props?: Record<string, unknown> }>
 
 export class DiscoveredComponentRegistry {
   private registry: ComponentRegistry = {};
···
   }
 
   // Register a component for a specific $type
-  registerComponent($type: DiscoveredTypes, component: string, props?: Record<string, any>): void {
+  registerComponent($type: DiscoveredTypes, component: string, props?: Record<string, unknown>): void {
     this.registry[$type] = {
       component,
       props
···
   }
 
   // Get component info for a $type
-  getComponent($type: DiscoveredTypes): { component: string; props?: Record<string, any> } | null {
+  getComponent($type: DiscoveredTypes): { component: string; props?: Record<string, unknown> } | null {
     return this.registry[$type] || null;
   }
 
···
   }
 
   // Get component info for rendering
-  getComponentInfo($type: DiscoveredTypes): DiscoveredComponent | null {
+  getComponentInfo<T extends DiscoveredTypes>($type: T): DiscoveredComponent<T> | null {
     const componentInfo = this.getComponent($type);
     if (!componentInfo) return null;
 

src/lib/services/grain-gallery-service.ts

···
 import { AtprotoBrowser } from '../atproto/atproto-browser';
 import { loadConfig } from '../config/site';
 import type { AtprotoRecord } from '../types/atproto';
+import { extractCidFromBlobRef, blobCdnUrl } from '../atproto/blob-url';
 
 export interface GrainGalleryItem {
   uri: string;
···
     alt?: string;
     url: string;
     caption?: string;
+    exif?: {
+      make?: string;
+      model?: string;
+      lensMake?: string;
+      lensModel?: string;
+      iSO?: number;
+      fNumber?: number;
+      exposureTime?: number;
+      focalLengthIn35mmFormat?: number;
+      dateTimeOriginal?: string;
+    };
   }>;
   itemCount: number;
   collections: string[];
···
     this.browser = new AtprotoBrowser();
   }
 
-  // Extract gallery ID from various possible fields
-  private extractGalleryId(item: GrainGalleryItem): string | null {
-    const value = item.value;
-    
-    // Direct gallery ID fields
-    if (value.galleryId) return value.galleryId;
-    if (value.gallery_id) return value.gallery_id;
-    if (value.id) return value.id;
-    
-    // Extract from URI if it contains gallery ID
-    const uriMatch = item.uri.match(/gallery\/([^\/]+)/);
-    if (uriMatch) return uriMatch[1];
-    
-    // Extract from title if it contains gallery ID
-    if (value.title) {
-      const titleMatch = value.title.match(/gallery[:\-\s]+([^\s]+)/i);
-      if (titleMatch) return titleMatch[1];
-    }
-    
-    // Use a hash of the collection and first part of URI as fallback
-    return `${item.collection}-${item.uri.split('/').pop()?.split('?')[0]}`;
+  // Resolve gallery URI directly from the item record if present
+  private extractGalleryUriFromItem(item: any): string | null {
+    const value = item?.value ?? item;
+    if (typeof value?.gallery === 'string') return value.gallery;
+    // Some variants might use a nested key
+    if (typeof value?.galleryUri === 'string') return value.galleryUri;
+    return null;
   }
 
   // Extract image from gallery item
···
     return null;
   }
 
-  // Group gallery items into galleries
-  private groupGalleryItems(items: GrainGalleryItem[]): GrainGallery[] {
-    const galleryGroups = new Map<string, GrainGallery>();
-    
+  // Build processed galleries using the authoritative gallery records and item mappings
+  private buildProcessedGalleries(
+    galleries: AtprotoRecord[],
+    items: AtprotoRecord[],
+    photosByUri: Map<string, AtprotoRecord>,
+    exifByPhotoUri: Map<string, any>
+  ): ProcessedGrainGallery[] {
+    // Index items by gallery URI
+    const itemsByGallery = new Map<string, AtprotoRecord[]>();
     for (const item of items) {
-      const galleryId = this.extractGalleryId(item);
-      if (!galleryId) continue;
-      
-      if (!galleryGroups.has(galleryId)) {
-        // Create new gallery
-        galleryGroups.set(galleryId, {
-          id: galleryId,
-          title: item.value.title || `Gallery ${galleryId}`,
-          description: item.value.description || item.value.caption,
-          createdAt: item.value.createdAt || item.indexedAt,
-          items: [],
-          imageCount: 0,
-          collections: new Set()
+      const galleryUri = this.extractGalleryUriFromItem(item);
+      if (!galleryUri) continue;
+      const arr = itemsByGallery.get(galleryUri) ?? [];
+      arr.push(item);
+      itemsByGallery.set(galleryUri, arr);
+    }
+
+    const processed: ProcessedGrainGallery[] = [];
+    const did = this.config.atproto.did;
+
+    for (const gallery of galleries) {
+      const galleryUri = gallery.uri;
+      const galleryItems = itemsByGallery.get(galleryUri) ?? [];
+      // Sort by position if available
+      galleryItems.sort((a, b) => {
+        const pa = Number(a.value?.position ?? 0);
+        const pb = Number(b.value?.position ?? 0);
+        return pa - pb;
+      });
+
+      const images: Array<{ alt?: string; url: string; caption?: string; exif?: any }> = [];
+      for (const item of galleryItems) {
+        const photoUri = typeof item.value?.item === 'string' ? item.value.item : null;
+        if (!photoUri) continue;
+        const photo = photosByUri.get(photoUri);
+        if (!photo) continue;
+
+        // Extract blob CID
+        const cid = extractCidFromBlobRef(photo.value?.photo?.ref ?? photo.value?.photo);
+        if (!cid || !did) continue;
+        const url = blobCdnUrl(did, cid);
+
+        const exif = exifByPhotoUri.get(photoUri);
+        images.push({
+          url,
+          alt: photo.value?.alt,
+          caption: photo.value?.caption,
+          exif: exif ? {
+            make: exif.make,
+            model: exif.model,
+            lensMake: exif.lensMake,
+            lensModel: exif.lensModel,
+            iSO: exif.iSO,
+            fNumber: exif.fNumber,
+            exposureTime: exif.exposureTime,
+            focalLengthIn35mmFormat: exif.focalLengthIn35mmFormat,
+            dateTimeOriginal: exif.dateTimeOriginal,
+          } : undefined,
         });
       }
-      
-      const gallery = galleryGroups.get(galleryId)!;
-      gallery.items.push(item);
-      gallery.collections.add(item.collection);
-      
-      // Update earliest creation date
-      const itemDate = new Date(item.value.createdAt || item.indexedAt);
-      const galleryDate = new Date(gallery.createdAt);
-      if (itemDate < galleryDate) {
-        gallery.createdAt = item.value.createdAt || item.indexedAt;
-      }
+
+      processed.push({
+        id: galleryUri,
+        title: gallery.value?.title || 'Untitled Gallery',
+        description: gallery.value?.description,
+        createdAt: gallery.value?.createdAt || gallery.indexedAt,
+        images,
+        itemCount: galleryItems.length,
+        collections: [gallery.collection],
+      });
     }
-    
-    // Calculate image counts and convert collections to arrays
-    for (const gallery of galleryGroups.values()) {
-      gallery.imageCount = gallery.items.filter(item => this.extractImageFromItem(item)).length;
-      gallery.collections = Array.from(gallery.collections);
-    }
-    
-    return Array.from(galleryGroups.values());
+
+    // Sort galleries by createdAt desc
+    processed.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    return processed;
   }
 
   // Process gallery into display format
···
     };
   }
 
-  // Fetch all gallery items from Grain.social collections
-  async getGalleryItems(identifier: string): Promise<GrainGalleryItem[]> {
+  // Fetch galleries with items, photos, and exif metadata
+  async getGalleries(identifier: string): Promise<ProcessedGrainGallery[]> {
     try {
       const repoInfo = await this.browser.getRepoInfo(identifier);
       if (!repoInfo) {
         throw new Error(`Could not get repository info for: ${identifier}`);
       }
 
-      const items: GrainGalleryItem[] = [];
-      
-      // Get all grain-related collections
-      const grainCollections = repoInfo.collections.filter(col => 
-        col.includes('grain') || col.includes('social.grain')
-      );
-      
-      console.log('🔍 Found grain collections:', grainCollections);
-      
-      for (const collection of grainCollections) {
-        const records = await this.browser.getCollectionRecords(identifier, collection, 200);
-        if (records && records.records) {
-          console.log(`📦 Collection ${collection}: ${records.records.length} records`);
-          
-          for (const record of records.records) {
-            // Convert to GrainGalleryItem format
-            const item: GrainGalleryItem = {
-              uri: record.uri,
-              cid: record.cid,
-              value: record.value,
-              indexedAt: record.indexedAt,
-              collection: record.collection
-            };
-            
-            items.push(item);
-          }
-        }
-      }
-      
-      console.log(`🎯 Total gallery items found: ${items.length}`);
-      return items;
-    } catch (error) {
-      console.error('Error fetching gallery items:', error);
-      return [];
-    }
-  }
+      // Fetch the four relevant collections
+      const [galleries, items, photos, exifs] = await Promise.all([
+        this.browser.getCollectionRecords(identifier, 'social.grain.gallery', 100),
+        this.browser.getCollectionRecords(identifier, 'social.grain.gallery.item', 100),
+        this.browser.getCollectionRecords(identifier, 'social.grain.photo', 100),
+        this.browser.getCollectionRecords(identifier, 'social.grain.photo.exif', 100),
+      ]);
+
+      const galleryRecords = galleries?.records ?? [];
+      const itemRecords = items?.records ?? [];
+      const photoRecords = photos?.records ?? [];
+      const exifRecords = exifs?.records ?? [];
 
-  // Get grouped galleries
-  async getGalleries(identifier: string): Promise<ProcessedGrainGallery[]> {
-    try {
-      const items = await this.getGalleryItems(identifier);
-      
-      if (items.length === 0) {
-        console.log('No gallery items found');
-        return [];
+      // Build maps for fast lookup
+      const photosByUri = new Map<string, AtprotoRecord>();
+      for (const p of photoRecords) {
+        photosByUri.set(p.uri, p);
+      }
+      const exifByPhotoUri = new Map<string, any>();
+      for (const e of exifRecords) {
+        const photoUri = typeof e.value?.photo === 'string' ? e.value.photo : undefined;
+        if (photoUri) exifByPhotoUri.set(photoUri, e.value);
       }
-      
-      // Group items into galleries
-      const groupedGalleries = this.groupGalleryItems(items);
-      
-      console.log(`🏛️ Grouped into ${groupedGalleries.length} galleries`);
-      
-      // Process for display
-      const processedGalleries = groupedGalleries.map(gallery => this.processGalleryForDisplay(gallery));
-      
-      // Sort by creation date (newest first)
-      processedGalleries.sort((a, b) => {
-        const dateA = new Date(a.createdAt);
-        const dateB = new Date(b.createdAt);
-        return dateB.getTime() - dateA.getTime();
-      });
-      
-      return processedGalleries;
+
+      const processed = this.buildProcessedGalleries(
+        galleryRecords,
+        itemRecords,
+        photosByUri,
+        exifByPhotoUri,
+      );
+
+      return processed;
     } catch (error) {
       console.error('Error getting galleries:', error);
       return [];
     }
   }
+
+  // Deprecated older flow kept for compatibility; prefer getGalleries()
 
   // Get a specific gallery by ID
   async getGallery(identifier: string, galleryId: string): Promise<ProcessedGrainGallery | null> {

src/pages/api-debug.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { AtprotoBrowser } from '../lib/atproto/atproto-browser';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const browser = new AtprotoBrowser();
-
-let debugInfo = {
-  config: null,
-  repoInfo: null,
-  collections: [],
-  testResults: [],
-  error: null
-};
-
-try {
-  debugInfo.config = {
-    handle: config.atproto.handle,
-    did: config.atproto.did,
-    pdsUrl: config.atproto.pdsUrl
-  };
-
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Test 1: Resolve handle
-    console.log('🔍 Testing handle resolution...');
-    const resolvedDid = await browser.resolveHandle(config.atproto.handle);
-    debugInfo.testResults.push({
-      test: 'Handle Resolution',
-      success: !!resolvedDid,
-      result: resolvedDid,
-      error: null
-    });
-
-    // Test 2: Get repo info
-    console.log('📊 Testing repo info...');
-    const repoInfo = await browser.getRepoInfo(config.atproto.handle);
-    debugInfo.repoInfo = repoInfo;
-    debugInfo.testResults.push({
-      test: 'Repository Info',
-      success: !!repoInfo,
-      result: repoInfo ? {
-        did: repoInfo.did,
-        handle: repoInfo.handle,
-        collections: repoInfo.collections.length,
-        recordCount: repoInfo.recordCount
-      } : null,
-      error: null
-    });
-
-    if (repoInfo) {
-      debugInfo.collections = repoInfo.collections;
-
-      // Test 3: Get records from first collection
-      if (repoInfo.collections.length > 0) {
-        const firstCollection = repoInfo.collections[0];
-        console.log(`📦 Testing collection: ${firstCollection}`);
-        const records = await browser.getCollectionRecords(config.atproto.handle, firstCollection, 5);
-        debugInfo.testResults.push({
-          test: `Collection Records (${firstCollection})`,
-          success: !!records,
-          result: records ? {
-            collection: records.collection,
-            recordCount: records.recordCount,
-            sampleRecords: records.records.slice(0, 2).map(r => ({
-              uri: r.uri,
-              $type: r.$type,
-              collection: r.collection
-            }))
-          } : null,
-          error: null
-        });
-      }
-    }
-  }
-} catch (error) {
-  debugInfo.error = error;
-  console.error('API Debug Error:', error);
-}
----
-
-<Layout title="API Debug">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        API Debug
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Testing ATProto API calls and configuration
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto space-y-8">
-      {debugInfo.error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {debugInfo.error instanceof Error ? debugInfo.error.message : String(debugInfo.error)}
-          </p>
-          <pre class="bg-red-100 dark:bg-red-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(debugInfo.error, null, 2)}
-          </pre>
-        </div>
-      ) : (
-        <>
-          <!-- Configuration -->
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Configuration
-            </h3>
-            <div class="text-sm text-blue-700 dark:text-blue-300">
-              <pre class="bg-blue-100 dark:bg-blue-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(debugInfo.config, null, 2)}
-              </pre>
-            </div>
-          </div>
-
-          <!-- Test Results -->
-          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-              API Test Results
-            </h3>
-            <div class="space-y-4">
-              {debugInfo.testResults.map((test, index) => (
-                <div class="bg-green-100 dark:bg-green-800 p-4 rounded">
-                  <div class="flex items-center justify-between mb-2">
-                    <h4 class="font-semibold text-green-800 dark:text-green-200">
-                      {test.test}
-                    </h4>
-                    <span class={`px-2 py-1 rounded text-xs ${
-                      test.success 
-                        ? 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-200' 
-                        : 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200'
-                    }`}>
-                      {test.success ? '✅ Success' : '❌ Failed'}
-                    </span>
-                  </div>
-                  {test.result && (
-                    <pre class="text-xs bg-green-200 dark:bg-green-700 p-2 rounded overflow-x-auto">
-{JSON.stringify(test.result, null, 2)}
-                    </pre>
-                  )}
-                  {test.error && (
-                    <p class="text-red-600 dark:text-red-400 text-xs mt-2">
-                      Error: {test.error}
-                    </p>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <!-- Repository Info -->
-          {debugInfo.repoInfo && (
-            <div class="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-6">
-              <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
-                Repository Information
-              </h3>
-              <div class="text-sm text-purple-700 dark:text-purple-300">
-                <p><strong>DID:</strong> {debugInfo.repoInfo.did}</p>
-                <p><strong>Handle:</strong> {debugInfo.repoInfo.handle}</p>
-                <p><strong>Record Count:</strong> {debugInfo.repoInfo.recordCount}</p>
-                <p><strong>Collections:</strong> {debugInfo.repoInfo.collections.length}</p>
-                <div class="mt-2">
-                  <p class="font-semibold">Collections:</p>
-                  <ul class="list-disc list-inside space-y-1">
-                    {debugInfo.repoInfo.collections.map((collection) => (
-                      <li class="bg-purple-100 dark:bg-purple-800 px-2 py-1 rounded text-xs">
-                        {collection}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          )}
-
-          <!-- Raw Debug Info -->
-          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-              Raw Debug Information
-            </h3>
-            <div class="text-sm text-gray-600 dark:text-gray-400">
-              <pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(debugInfo, null, 2)}
-              </pre>
-            </div>
-          </div>
-        </>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/atproto-browser-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
----
-
-<Layout title="ATProto Browser Test">
-  <div class="container mx-auto px-4 py-8">
-    <h1 class="text-4xl font-bold mb-8">ATProto Browser Test</h1>
-    
-    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
-      <h2 class="text-2xl font-semibold mb-4">Configuration</h2>
-      <p><strong>Handle:</strong> {config.atproto.handle}</p>
-      <p><strong>DID:</strong> {config.atproto.did}</p>
-      <p class="text-sm text-gray-600 mt-2">Browse ATProto accounts and records like atptools.</p>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Browse Account</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">Account (handle or DID)</label>
-            <input id="account-input" type="text" value={config.atproto.handle} class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-          </div>
-          <button id="browse-btn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-            Browse Account
-          </button>
-        </div>
-      </div>
-
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Account Info</h2>
-        <div id="account-info" class="space-y-2">
-          <p class="text-gray-500">Enter an account to browse...</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-8">
-      <h2 class="text-2xl font-semibold mb-4">Collections</h2>
-      <div id="collections-container" class="space-y-4">
-        <p class="text-gray-500 text-center py-8">No collections loaded...</p>
-      </div>
-    </div>
-
-    <div class="mt-8">
-      <h2 class="text-2xl font-semibold mb-4">Records</h2>
-      <div id="records-container" class="space-y-4">
-        <p class="text-gray-500 text-center py-8">No records loaded...</p>
-      </div>
-    </div>
-  </div>
-</Layout>
-
-<script>
-  import { AtprotoBrowser } from '../lib/atproto/atproto-browser';
-
-  const browser = new AtprotoBrowser();
-  let currentAccount: string | null = null;
-
-  // DOM elements
-  const accountInput = document.getElementById('account-input') as HTMLInputElement;
-  const browseBtn = document.getElementById('browse-btn') as HTMLButtonElement;
-  const accountInfo = document.getElementById('account-info') as HTMLDivElement;
-  const collectionsContainer = document.getElementById('collections-container') as HTMLDivElement;
-  const recordsContainer = document.getElementById('records-container') as HTMLDivElement;
-
-  function displayAccountInfo(repoInfo: any) {
-    accountInfo.innerHTML = `
-      <div class="space-y-2">
-        <div><strong>DID:</strong> <span class="font-mono text-sm">${repoInfo.did}</span></div>
-        <div><strong>Handle:</strong> ${repoInfo.handle}</div>
-        <div><strong>Collections:</strong> ${repoInfo.collections.length}</div>
-        <div><strong>Total Records:</strong> ${repoInfo.recordCount}</div>
-        ${repoInfo.profile ? `<div><strong>Display Name:</strong> ${repoInfo.profile.displayName || 'N/A'}</div>` : ''}
-      </div>
-    `;
-  }
-
-  function displayCollections(collections: string[]) {
-    if (collections.length === 0) {
-      collectionsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">No collections found</p>';
-      return;
-    }
-
-    collectionsContainer.innerHTML = `
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        ${collections.map(collection => `
-          <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-100 transition-colors" onclick="loadCollection('${collection}')">
-            <h3 class="font-semibold text-gray-900">${collection}</h3>
-            <p class="text-sm text-gray-600">Click to view records</p>
-          </div>
-        `).join('')}
-      </div>
-    `;
-  }
-
-  async function loadCollection(collection: string) {
-    if (!currentAccount) return;
-
-    try {
-      const collectionInfo = await browser.getCollectionRecords(currentAccount, collection, 50);
-      if (collectionInfo) {
-        displayRecords(collectionInfo.records, collection);
-      }
-    } catch (error) {
-      console.error('Error loading collection:', error);
-      recordsContainer.innerHTML = '<p class="text-red-500 text-center py-8">Error loading collection</p>';
-    }
-  }
-
-  function displayRecords(records: any[], collection: string) {
-    if (records.length === 0) {
-      recordsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">No records found in this collection</p>';
-      return;
-    }
-
-    recordsContainer.innerHTML = `
-      <div class="mb-4">
-        <h3 class="text-lg font-semibold">${collection} (${records.length} records)</h3>
-      </div>
-      <div class="space-y-4">
-        ${records.map(record => `
-          <div class="bg-white border border-gray-200 rounded-lg p-4">
-            <div class="flex items-center space-x-2 mb-2">
-              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">${record.collection}</span>
-              <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">${record.$type}</span>
-            </div>
-            ${record.value?.text ? `<p class="text-sm text-gray-600 mb-2">${record.value.text}</p>` : ''}
-            <p class="text-xs text-gray-500">${new Date(record.indexedAt).toLocaleString()}</p>
-            <p class="text-xs font-mono text-gray-400 mt-1 break-all">${record.uri}</p>
-          </div>
-        `).join('')}
-      </div>
-    `;
-  }
-
-  browseBtn.addEventListener('click', async () => {
-    const account = accountInput.value.trim();
-    if (!account) {
-      alert('Please enter an account handle or DID');
-      return;
-    }
-
-    try {
-      browseBtn.disabled = true;
-      browseBtn.textContent = 'Loading...';
-
-      // Get account info
-      const repoInfo = await browser.getRepoInfo(account);
-      if (!repoInfo) {
-        alert('Could not load account information');
-        return;
-      }
-
-      currentAccount = account;
-      displayAccountInfo(repoInfo);
-      displayCollections(repoInfo.collections);
-
-      // Clear previous records
-      recordsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Select a collection to view records</p>';
-
-    } catch (error) {
-      console.error('Error browsing account:', error);
-      alert('Error browsing account. Check the console for details.');
-    } finally {
-      browseBtn.disabled = false;
-      browseBtn.textContent = 'Browse Account';
-    }
-  });
-
-  // Make loadCollection available globally
-  (window as any).loadCollection = loadCollection;
-</script> 

src/pages/content-feed.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { ContentSystem } from '../lib/services/content-system';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const contentSystem = new ContentSystem();
-
-let contentFeed = null;
-let error = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Initialize content system (build-time gathering + runtime streaming)
-    contentFeed = await contentSystem.initialize(config.atproto.handle, {
-      enableStreaming: true,
-      maxItems: 200
-    });
-  }
-} catch (err) {
-  error = err;
-  console.error('Content feed: Error:', err);
-}
-
-// Helper function to format date
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-};
-
-// Helper function to get service icon
-const getServiceIcon = (service: string) => {
-  const icons = {
-    'grain.social': '🌾',
-    'bsky.app': '🔵',
-    'sh.tangled': '🪢',
-    'unknown': '❓'
-  };
-  return icons[service] || icons.unknown;
-};
-
-// Helper function to truncate text
-const truncateText = (text: string, maxLength: number = 100) => {
-  if (text.length <= maxLength) return text;
-  return text.substring(0, maxLength) + '...';
-};
----
-
-<Layout title="Content Feed">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Content Feed
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        All your ATProto content with real-time updates
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error Loading Content
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-        </div>
-      ) : contentFeed ? (
-        <div class="space-y-8">
-          <!-- Content Feed Stats -->
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Content Feed Stats
-            </h3>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-blue-700 dark:text-blue-300">
-              <div>
-                <p class="font-semibold">Total Items</p>
-                <p class="text-2xl">{contentFeed.totalItems}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Collections</p>
-                <p class="text-2xl">{contentFeed.collections.length}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Last Updated</p>
-                <p class="text-sm">{formatDate(contentFeed.lastUpdated)}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Status</p>
-                <p class="text-sm" id="streaming-status">Loading...</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Content Items -->
-          <div class="space-y-4">
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
-              All Content ({contentFeed.items.length} items)
-            </h2>
-            
-            {contentFeed.items.length > 0 ? (
-              <div class="space-y-4" id="content-feed">
-                {contentFeed.items.map((item, index) => (
-                  <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-                    <header class="flex items-start justify-between mb-4">
-                      <div class="flex items-center gap-3">
-                        <span class="text-2xl">{getServiceIcon(item.service)}</span>
-                        <div>
-                          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-                            {item.$type}
-                          </h3>
-                          <p class="text-sm text-gray-500 dark:text-gray-400">
-                            Collection: {item.collection}
-                          </p>
-                        </div>
-                      </div>
-                      <div class="text-right text-sm text-gray-500 dark:text-gray-400">
-                        <p>{formatDate(item.createdAt)}</p>
-                        <p class="text-xs">{item.operation || 'existing'}</p>
-                      </div>
-                    </header>
-                    
-                    <div class="mb-4">
-                      <div class="flex items-center gap-2 mb-2">
-                        <span class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded text-xs">
-                          {item.service}
-                        </span>
-                        <span class="bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-300 px-2 py-1 rounded text-xs">
-                          {item.$type}
-                        </span>
-                      </div>
-                      
-                      {item.value?.text && (
-                        <p class="text-gray-900 dark:text-white mb-3">
-                          {truncateText(item.value.text, 200)}
-                        </p>
-                      )}
-                      
-                      {item.value?.title && (
-                        <p class="font-semibold text-gray-900 dark:text-white mb-2">
-                          {item.value.title}
-                        </p>
-                      )}
-                      
-                      {item.value?.description && (
-                        <p class="text-gray-600 dark:text-gray-400 mb-3">
-                          {truncateText(item.value.description, 150)}
-                        </p>
-                      )}
-                    </div>
-                    
-                    <footer class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-                      <span>URI: {item.uri.substring(0, 50)}...</span>
-                      <span>CID: {item.cid.substring(0, 10)}...</span>
-                    </footer>
-                  </article>
-                ))}
-              </div>
-            ) : (
-              <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-                <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-                  No Content Found
-                </h3>
-                <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-                  No content was found for your account. This could mean:
-                </p>
-                <ul class="text-yellow-600 dark:text-yellow-400 text-sm list-disc list-inside space-y-1">
-                  <li>You haven't posted any content yet</li>
-                  <li>The content is in a different collection</li>
-                  <li>There's an issue with the API connection</li>
-                  <li>The content format isn't recognized</li>
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To view your content feed, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-600 dark:text-yellow-400">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout>
-
-<script>
-  // Real-time updates (client-side)
-  if (typeof window !== 'undefined') {
-    // This would be implemented with WebSocket or Server-Sent Events
-    // For now, we'll just update the streaming status
-    const streamingStatus = document.getElementById('streaming-status');
-    if (streamingStatus) {
-      streamingStatus.textContent = 'Streaming';
-      streamingStatus.className = 'text-sm text-green-600 dark:text-green-400';
-    }
-  }
-</script> 

src/pages/content-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { ContentRenderer, type RenderedContent } from '../lib/services/content-renderer';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const contentRenderer = new ContentRenderer();
-
-let content: RenderedContent[] = [];
-let contentTypes: string[] = [];
-let error: unknown = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Get available content types
-    contentTypes = await contentRenderer.getContentTypes(config.atproto.handle);
-    
-    // Render content with gallery filter
-    content = await contentRenderer.renderContent(config.atproto.handle, {
-      limit: 20,
-      filter: (record) => {
-        const $type = record.value?.$type;
-        return $type?.includes('gallery') || 
-               $type?.includes('grain') || 
-               $type?.includes('image');
-      }
-    });
-  }
-} catch (err) {
-  error = err;
-  console.error('Content test: Error rendering content:', err);
-}
----
-
-<Layout title="Content Rendering Test">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Content Rendering Test
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Testing the content rendering system with type-safe components
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error Loading Content
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-          <pre class="bg-red-100 dark:bg-red-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(error, null, 2)}
-          </pre>
-        </div>
-      ) : config.atproto.handle && config.atproto.handle !== 'your-handle-here' ? (
-        <div class="space-y-8">
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Configuration
-            </h3>
-            <div class="text-sm text-blue-700 dark:text-blue-300">
-              <p><strong>Handle:</strong> {config.atproto.handle}</p>
-              <p><strong>DID:</strong> {config.atproto.did}</p>
-              <p><strong>PDS URL:</strong> {config.atproto.pdsUrl}</p>
-            </div>
-          </div>
-
-          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-              Content Types Found
-            </h3>
-            <div class="text-sm text-green-700 dark:text-green-300">
-              <p><strong>Total Types:</strong> {contentTypes.length}</p>
-              {contentTypes.length > 0 && (
-                <div class="mt-2">
-                  <p class="font-semibold">Types:</p>
-                  <ul class="list-disc list-inside space-y-1">
-                    {contentTypes.map((type) => (
-                      <li class="bg-green-100 dark:bg-green-800 px-2 py-1 rounded text-xs">
-                        {type}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div class="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
-              Rendered Content
-            </h3>
-            <div class="text-sm text-purple-700 dark:text-purple-300">
-              <p><strong>Content Items:</strong> {content.length}</p>
-              {content.length > 0 && (
-                <div class="mt-2">
-                  <p class="font-semibold">Items:</p>
-                  <ul class="space-y-2">
-                    {content.map((item, index) => (
-                      <li class="bg-purple-100 dark:bg-purple-800 p-3 rounded">
-                        <div class="flex justify-between items-start">
-                          <div>
-                            <p class="font-semibold">Item {index + 1}</p>
-                            <p class="text-xs">Type: {item.type}</p>
-                            <p class="text-xs">Component: {item.component}</p>
-                            <p class="text-xs">$type: {item.metadata.$type}</p>
-                          </div>
-                          <div class="text-right text-xs">
-                            <p>Collection: {item.metadata.collection}</p>
-                            <p>Created: {new Date(item.metadata.createdAt).toLocaleDateString()}</p>
-                          </div>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {content.length === 0 && (
-            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-              <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-                No Gallery Content Found
-              </h3>
-              <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-                No gallery-related content was found for your account. This could mean:
-              </p>
-              <ul class="text-yellow-600 dark:text-yellow-400 text-sm list-disc list-inside space-y-1">
-                <li>You haven't created any galleries yet</li>
-                <li>The galleries are in a different collection</li>
-                <li>There's an issue with the API connection</li>
-                <li>The gallery format isn't recognized</li>
-              </ul>
-            </div>
-          )}
-        </div>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To test the content rendering system, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-600 dark:text-yellow-400">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/discovery-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { CollectionDiscovery } from '../lib/build/collection-discovery';
-import { DiscoveredComponentRegistry } from '../lib/components/discovered-registry';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const discovery = new CollectionDiscovery();
-const registry = new DiscoveredComponentRegistry();
-
-let discoveryResults = null;
-let error = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Run collection discovery
-    discoveryResults = await discovery.discoverCollections(config.atproto.handle);
-    
-    // Update component registry with discovered types
-    const allTypes = discoveryResults.collections.flatMap(c => c.$types);
-    registry.updateDiscoveredTypes(allTypes);
-  }
-} catch (err) {
-  error = err;
-  console.error('Discovery test error:', err);
-}
-
-// Helper function to format date
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-};
----
-
-<Layout title="Discovery Test">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Build-Time Discovery Test
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Testing collection discovery and type generation
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Discovery Error
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-          <pre class="bg-red-100 dark:bg-red-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(error, null, 2)}
-          </pre>
-        </div>
-      ) : discoveryResults ? (
-        <div class="space-y-8">
-          <!-- Discovery Summary -->
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Discovery Summary
-            </h3>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-blue-700 dark:text-blue-300">
-              <div>
-                <p class="font-semibold">Collections</p>
-                <p class="text-2xl">{discoveryResults.totalCollections}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Records</p>
-                <p class="text-2xl">{discoveryResults.totalRecords}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Repository</p>
-                <p class="text-sm">{discoveryResults.repository.handle}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Generated</p>
-                <p class="text-sm">{formatDate(discoveryResults.generatedAt)}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Discovered Collections -->
-          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-              Discovered Collections
-            </h3>
-            <div class="space-y-4">
-              {discoveryResults.collections.map((collection, index) => (
-                <div class="bg-green-100 dark:bg-green-800 p-4 rounded">
-                  <div class="flex items-start justify-between mb-2">
-                    <div>
-                      <h4 class="font-semibold text-green-800 dark:text-green-200">
-                        {collection.name}
-                      </h4>
-                      <p class="text-sm text-green-600 dark:text-green-400">
-                        {collection.description}
-                      </p>
-                    </div>
-                    <span class="bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-2 py-1 rounded text-xs">
-                      {collection.service}
-                    </span>
-                  </div>
-                  
-                  <div class="mb-3">
-                    <p class="text-sm text-green-600 dark:text-green-400 mb-1">
-                      Types: {collection.$types.length}
-                    </p>
-                    <div class="flex flex-wrap gap-1">
-                      {collection.$types.map($type => (
-                        <span class="bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-2 py-1 rounded text-xs">
-                          {$type}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                  
-                  <details class="text-sm">
-                    <summary class="cursor-pointer text-green-600 dark:text-green-400">
-                      View Generated Types
-                    </summary>
-                    <pre class="bg-green-200 dark:bg-green-700 p-3 rounded text-xs overflow-x-auto mt-2">
-{collection.generatedTypes}
-                    </pre>
-                  </details>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <!-- Component Registry -->
-          <div class="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
-              Component Registry
-            </h3>
-            <div class="text-sm text-purple-700 dark:text-purple-300">
-              <p><strong>Registered Types:</strong> {registry.getRegisteredTypes().length}</p>
-              <div class="mt-2">
-                <p class="font-semibold">Component Mappings:</p>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
-                  {registry.getRegisteredTypes().map($type => {
-                    const component = registry.getComponent($type);
-                    return (
-                      <div class="bg-purple-100 dark:bg-purple-800 p-2 rounded text-xs">
-                        <span class="font-semibold">{$type}</span>
-                        <br />
-                        <span class="text-purple-600 dark:text-purple-400">
-                          → {component?.component || 'No component'}
-                        </span>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Raw Discovery Data -->
-          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-              Raw Discovery Data
-            </h3>
-            <div class="text-sm text-gray-600 dark:text-gray-400">
-              <details>
-                <summary class="cursor-pointer">View Raw Data</summary>
-                <pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded text-xs overflow-x-auto mt-2">
-{JSON.stringify(discoveryResults, null, 2)}
-                </pre>
-              </details>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To test collection discovery, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-600 dark:text-yellow-400">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/galleries-unified.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import GrainGalleryDisplay from '../components/content/GrainGalleryDisplay.astro';
-import { ContentSystem } from '../lib/services/content-system';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const contentSystem = new ContentSystem();
-
-let galleries = [];
-let contentFeed = null;
-let error = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Initialize content system
-    contentFeed = await contentSystem.initialize(config.atproto.handle, {
-      enableStreaming: true,
-      maxItems: 500
-    });
-    
-    // Get galleries using the specialized service
-    galleries = await contentSystem.getGalleries(config.atproto.handle);
-  }
-} catch (err) {
-  error = err;
-  console.error('Unified galleries: Error:', err);
-}
-
-// Helper function to format date
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
-};
----
-
-<Layout title="Unified Galleries">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Unified Galleries
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Your Grain.social galleries with real-time updates
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error Loading Galleries
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-        </div>
-      ) : contentFeed ? (
-        <div class="space-y-8">
-          <!-- Content System Stats -->
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Content System Stats
-            </h3>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-blue-700 dark:text-blue-300">
-              <div>
-                <p class="font-semibold">Total Content Items</p>
-                <p class="text-2xl">{contentFeed.totalItems}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Collections</p>
-                <p class="text-2xl">{contentFeed.collections.length}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Galleries Found</p>
-                <p class="text-2xl">{galleries.length}</p>
-              </div>
-              <div>
-                <p class="font-semibold">Last Updated</p>
-                <p class="text-sm">{formatDate(contentFeed.lastUpdated)}</p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Gallery Content -->
-          <div class="space-y-4">
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
-              Your Galleries ({galleries.length} galleries)
-            </h2>
-            
-            {galleries.length > 0 ? (
-              <div class="space-y-8">
-                {galleries.map((gallery) => (
-                  <GrainGalleryDisplay 
-                    gallery={gallery}
-                    showDescription={true}
-                    showTimestamp={true}
-                    showCollections={true}
-                    columns={3}
-                  />
-                ))}
-              </div>
-            ) : (
-              <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-                <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-                  No Galleries Found
-                </h3>
-                <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-                  No Grain.social galleries were found for your account. This could mean:
-                </p>
-                <ul class="text-yellow-600 dark:text-yellow-400 text-sm list-disc list-inside space-y-1">
-                  <li>You haven't created any galleries yet</li>
-                  <li>The galleries are in a different collection</li>
-                  <li>There's an issue with the API connection</li>
-                  <li>The gallery format isn't recognized</li>
-                  <li>The gallery grouping logic needs adjustment</li>
-                </ul>
-              </div>
-            )}
-          </div>
-
-          <!-- Raw Content Debug -->
-          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-              Raw Content Debug
-            </h3>
-            <div class="text-sm text-gray-600 dark:text-gray-400">
-              <p><strong>Total Content Items:</strong> {contentFeed.items.length}</p>
-              <p><strong>Collections:</strong> {contentFeed.collections.join(', ')}</p>
-              <p><strong>Content Types Found:</strong></p>
-              <ul class="list-disc list-inside mt-2">
-                {Array.from(new Set(contentFeed.items.map(item => item.$type))).map($type => (
-                  <li class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs">
-                    {$type}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To view your galleries, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-600 dark:text-yellow-400">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/gallery-debug.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { AtprotoBrowser } from '../lib/atproto/atproto-browser';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const browser = new AtprotoBrowser();
-
-let repoInfo = null;
-let collections = [];
-let grainRecords = [];
-let error = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Get repository info
-    repoInfo = await browser.getRepoInfo(config.atproto.handle);
-    
-    if (repoInfo) {
-      // Get all collections
-      collections = repoInfo.collections;
-      
-      // Get records from grain-related collections
-      const grainCollections = collections.filter(col => 
-        col.includes('grain') || col.includes('social.grain')
-      );
-      
-      for (const collection of grainCollections) {
-        const records = await browser.getCollectionRecords(config.atproto.handle, collection, 50);
-        if (records && records.records) {
-          grainRecords.push({
-            collection,
-            records: records.records
-          });
-        }
-      }
-    }
-  }
-} catch (err) {
-  error = err;
-  console.error('Gallery debug: Error:', err);
-}
----
-
-<Layout title="Gallery Debug">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Gallery Structure Debug
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Examining Grain.social collection structure and relationships
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto space-y-8">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-        </div>
-      ) : repoInfo ? (
-        <>
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Repository Info
-            </h3>
-            <div class="text-sm text-blue-700 dark:text-blue-300">
-              <p><strong>Handle:</strong> {repoInfo.handle}</p>
-              <p><strong>DID:</strong> {repoInfo.did}</p>
-              <p><strong>Total Collections:</strong> {collections.length}</p>
-              <p><strong>Total Records:</strong> {repoInfo.recordCount}</p>
-            </div>
-          </div>
-
-          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-              All Collections
-            </h3>
-            <div class="text-sm text-green-700 dark:text-green-300">
-              <ul class="list-disc list-inside space-y-1">
-                {collections.map((collection) => (
-                  <li class="bg-green-100 dark:bg-green-800 px-2 py-1 rounded">
-                    {collection}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          <div class="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">
-              Grain.social Records
-            </h3>
-            <div class="text-sm text-purple-700 dark:text-purple-300">
-              {grainRecords.map(({ collection, records }) => (
-                <div class="mb-6">
-                  <h4 class="font-semibold mb-2">{collection} ({records.length} records)</h4>
-                  <div class="space-y-2">
-                    {records.slice(0, 5).map((record, index) => (
-                      <div class="bg-purple-100 dark:bg-purple-800 p-3 rounded">
-                        <div class="flex justify-between items-start">
-                          <div>
-                            <p class="font-semibold">Record {index + 1}</p>
-                            <p class="text-xs">URI: {record.uri}</p>
-                            <p class="text-xs">$type: {record.value?.$type || 'unknown'}</p>
-                            <p class="text-xs">Created: {record.value?.createdAt || record.indexedAt}</p>
-                          </div>
-                          <div class="text-right text-xs">
-                            <p>CID: {record.cid.substring(0, 10)}...</p>
-                          </div>
-                        </div>
-                        <details class="mt-2">
-                          <summary class="cursor-pointer text-xs">View Record Data</summary>
-                          <pre class="text-xs bg-purple-200 dark:bg-purple-700 p-2 rounded mt-1 overflow-x-auto">
-{JSON.stringify(record.value, null, 2)}
-                          </pre>
-                        </details>
-                      </div>
-                    ))}
-                    {records.length > 5 && (
-                      <p class="text-xs italic">... and {records.length - 5} more records</p>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To debug the gallery structure, please configure your Bluesky handle in the environment variables.
-            </p>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/grain-gallery-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import GrainGalleryDisplay from '../components/content/GrainGalleryDisplay.astro';
-import { GrainGalleryService, type ProcessedGrainGallery, type GrainGalleryItem } from '../lib/services/grain-gallery-service';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-const grainGalleryService = new GrainGalleryService();
-
-let galleries: ProcessedGrainGallery[] = [];
-let galleryItems: GrainGalleryItem[] = [];
-let error: unknown = null;
-
-try {
-  if (config.atproto.handle && config.atproto.handle !== 'your-handle-here') {
-    // Get both galleries and raw items for debugging
-    galleries = await grainGalleryService.getGalleries(config.atproto.handle);
-    galleryItems = await grainGalleryService.getGalleryItems(config.atproto.handle);
-  }
-} catch (err) {
-  error = err;
-  console.error('Grain gallery test: Error:', err);
-}
----
-
-<Layout title="Grain Gallery Test">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Grain.social Gallery Test
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Testing the Grain.social gallery grouping and display system
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto">
-      {error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error Loading Galleries
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-          <pre class="bg-red-100 dark:bg-red-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(error, null, 2)}
-          </pre>
-        </div>
-      ) : config.atproto.handle && config.atproto.handle !== 'your-handle-here' ? (
-        <div class="space-y-8">
-          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-              Configuration
-            </h3>
-            <div class="text-sm text-blue-700 dark:text-blue-300">
-              <p><strong>Handle:</strong> {config.atproto.handle}</p>
-              <p><strong>DID:</strong> {config.atproto.did}</p>
-              <p><strong>PDS URL:</strong> {config.atproto.pdsUrl}</p>
-            </div>
-          </div>
-
-          <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-              Results
-            </h3>
-            <div class="text-sm text-green-700 dark:text-green-300">
-              <p><strong>Raw Gallery Items:</strong> {galleryItems.length}</p>
-              <p><strong>Grouped Galleries:</strong> {galleries.length}</p>
-            </div>
-          </div>
-
-          {galleryItems.length > 0 && (
-            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
-              <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
-                Raw Gallery Items (First 10)
-              </h3>
-              <div class="text-sm text-yellow-700 dark:text-yellow-300 space-y-2">
-                {galleryItems.slice(0, 10).map((item, index) => (
-                  <div class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded">
-                    <div class="flex justify-between items-start">
-                      <div>
-                        <p class="font-semibold">Item {index + 1}</p>
-                        <p class="text-xs">Collection: {item.collection}</p>
-                        <p class="text-xs">$type: {item.value?.$type || 'unknown'}</p>
-                        <p class="text-xs">Title: {item.value?.title || 'No title'}</p>
-                        <p class="text-xs">Gallery ID: {item.value?.galleryId || item.value?.gallery_id || item.value?.id || 'None'}</p>
-                      </div>
-                      <div class="text-right text-xs">
-                        <p>Created: {item.value?.createdAt || item.indexedAt}</p>
-                      </div>
-                    </div>
-                    <details class="mt-2">
-                      <summary class="cursor-pointer text-xs">View Item Data</summary>
-                      <pre class="text-xs bg-yellow-200 dark:bg-yellow-700 p-2 rounded mt-1 overflow-x-auto">
-{JSON.stringify(item.value, null, 2)}
-                      </pre>
-                    </details>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {galleries.length > 0 ? (
-            <div class="space-y-8">
-              <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
-                Grouped Galleries
-              </h2>
-              {galleries.map((gallery) => (
-                <GrainGalleryDisplay 
-                  gallery={gallery}
-                  showDescription={true}
-                  showTimestamp={true}
-                  showCollections={true}
-                  columns={3}
-                />
-              ))}
-            </div>
-          ) : (
-            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-              <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-                No Galleries Found
-              </h3>
-              <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-                No Grain.social galleries were found for your account. This could mean:
-              </p>
-              <ul class="text-yellow-600 dark:text-yellow-400 text-sm list-disc list-inside space-y-1">
-                <li>You haven't created any galleries yet</li>
-                <li>The galleries are in a different collection</li>
-                <li>There's an issue with the API connection</li>
-                <li>The gallery format isn't recognized</li>
-                <li>The gallery grouping logic needs adjustment</li>
-              </ul>
-            </div>
-          )}
-        </div>
-      ) : (
-        <div class="text-center py-12">
-          <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-            <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-              Configuration Required
-            </h3>
-            <p class="text-yellow-700 dark:text-yellow-300 mb-4">
-              To test the Grain.social gallery system, please configure your Bluesky handle in the environment variables.
-            </p>
-            <div class="text-sm text-yellow-600 dark:text-yellow-400">
-              <p class="mb-2">Create a <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">.env</code> file with:</p>
-              <pre class="bg-yellow-100 dark:bg-yellow-800 p-3 rounded text-xs overflow-x-auto">
-ATPROTO_HANDLE=your-handle.bsky.social
-SITE_TITLE=Your Site Title
-SITE_AUTHOR=Your Name</pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout> 

src/pages/index.astro

···
                   Build-time collection discovery and type generation.
                 </p>
               </a>
+              <a href="/simplified-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
+                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+                  Simplified Content Test
+                </h3>
+                <p class="text-gray-600 dark:text-gray-400">
+                  Test the simplified content service approach based on reference repository patterns.
+                </p>
+              </a>
               <a href="/jetstream-test" class="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow">
                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                   Jetstream Test

src/pages/jetstream-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
----
-
-<Layout title="Jetstream Test">
-  <div class="container mx-auto px-4 py-8">
-    <h1 class="text-4xl font-bold mb-8">Jetstream Repository Test</h1>
-    
-    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
-      <h2 class="text-2xl font-semibold mb-4">Configuration</h2>
-      <p><strong>Handle:</strong> {config.atproto.handle}</p>
-      <p><strong>DID:</strong> {config.atproto.did}</p>
-      <p class="text-sm text-gray-600 mt-2">This uses ATProto sync API to stream all repository activity with DID filtering, similar to atptools.</p>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Connection</h2>
-        <button id="start-btn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-          Start Jetstream
-        </button>
-        <button id="stop-btn" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 ml-2" disabled>
-          Stop Stream
-        </button>
-        <div id="status" class="mt-4 p-2 rounded bg-gray-100">
-          Status: <span id="status-text">Stopped</span>
-        </div>
-      </div>
-
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Statistics</h2>
-        <div class="space-y-2">
-          <div>Records received: <span id="records-count" class="font-bold">0</span></div>
-          <div>Streaming status: <span id="streaming-status" class="font-bold">Stopped</span></div>
-          <div>Last sync: <span id="last-sync" class="font-bold">Never</span></div>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-8">
-      <h2 class="text-2xl font-semibold mb-4">Live Records</h2>
-      <div id="records-container" class="space-y-4 max-h-96 overflow-y-auto">
-        <p class="text-gray-500 text-center py-8">No records received yet...</p>
-      </div>
-    </div>
-  </div>
-</Layout>
-
-<script>
-  import { JetstreamClient } from '../lib/atproto/jetstream-client';
-
-  let client: JetstreamClient | null = null;
-  let recordsCount = 0;
-
-  // DOM elements
-  const startBtn = document.getElementById('start-btn') as HTMLButtonElement;
-  const stopBtn = document.getElementById('stop-btn') as HTMLButtonElement;
-  const statusText = document.getElementById('status-text') as HTMLSpanElement;
-  const recordsCountEl = document.getElementById('records-count') as HTMLSpanElement;
-  const streamingStatusEl = document.getElementById('streaming-status') as HTMLSpanElement;
-  const lastSyncEl = document.getElementById('last-sync') as HTMLSpanElement;
-  const recordsContainer = document.getElementById('records-container') as HTMLDivElement;
-
-  function updateStatus(status: string) {
-    statusText.textContent = status;
-    streamingStatusEl.textContent = status;
-    
-    if (status === 'Streaming') {
-      startBtn.disabled = true;
-      stopBtn.disabled = false;
-    } else {
-      startBtn.disabled = false;
-      stopBtn.disabled = true;
-    }
-  }
-
-  function updateLastSync() {
-    lastSyncEl.textContent = new Date().toLocaleTimeString();
-  }
-
-  function addRecord(record: any) {
-    recordsCount++;
-    recordsCountEl.textContent = recordsCount.toString();
-
-    const recordEl = document.createElement('div');
-    recordEl.className = 'bg-gray-50 border border-gray-200 rounded-lg p-4';
-    
-    const time = new Date(record.time_us / 1000).toLocaleString();
-    const collection = record.collection;
-    const $type = record.$type;
-    const service = record.service;
-    const text = record.value?.text || 'No text content';
-    
-    recordEl.innerHTML = `
-      <div class="flex items-start space-x-3">
-        <div class="flex-1 min-w-0">
-          <div class="flex items-center space-x-2 mb-2">
-            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">${service}</span>
-            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">${collection}</span>
-            <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">${$type}</span>
-            <span class="bg-${record.operation === 'create' ? 'green' : record.operation === 'update' ? 'yellow' : 'red'}-100 text-${record.operation === 'create' ? 'green' : record.operation === 'update' ? 'yellow' : 'red'}-800 px-2 py-1 rounded text-xs font-medium">${record.operation}</span>
-          </div>
-          ${text ? `<p class="text-sm text-gray-600 mb-2">${text}</p>` : ''}
-          <p class="text-xs text-gray-500">${time}</p>
-          <p class="text-xs font-mono text-gray-400 mt-1 break-all">${record.uri}</p>
-        </div>
-      </div>
-    `;
-
-    recordsContainer.insertBefore(recordEl, recordsContainer.firstChild);
-    
-    // Keep only the last 20 records
-    const records = recordsContainer.querySelectorAll('div');
-    if (records.length > 20) {
-      records[records.length - 1].remove();
-    }
-  }
-
-  startBtn.addEventListener('click', async () => {
-    try {
-      updateStatus('Starting...');
-      
-      client = new JetstreamClient();
-      
-      client.onConnect(() => {
-        updateStatus('Streaming');
-        console.log('Jetstream connected');
-      });
-
-      client.onDisconnect(() => {
-        updateStatus('Stopped');
-        console.log('Jetstream disconnected');
-      });
-
-      client.onError((error) => {
-        console.error('Jetstream error:', error);
-        updateStatus('Error');
-      });
-
-      client.onRecord((record) => {
-        console.log('Record received:', record);
-        addRecord(record);
-        updateLastSync();
-      });
-
-      await client.startStreaming();
-      
-    } catch (error) {
-      console.error('Failed to start jetstream:', error);
-      updateStatus('Error');
-      alert('Failed to start jetstream. Check the console for details.');
-    }
-  });
-
-  stopBtn.addEventListener('click', () => {
-    if (client) {
-      client.stopStreaming();
-      client = null;
-    }
-  });
-</script> 

src/pages/lexicon-generator-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
----
-
-<Layout title="Lexicon Generator Test">
-  <div class="container mx-auto px-4 py-8">
-    <h1 class="text-4xl font-bold mb-8">Lexicon Generator Test</h1>
-    
-    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
-      <h2 class="text-2xl font-semibold mb-4">Configuration</h2>
-      <p><strong>Handle:</strong> {config.atproto.handle}</p>
-      <p><strong>DID:</strong> {config.atproto.did}</p>
-      <p class="text-sm text-gray-600 mt-2">Generate TypeScript types for all lexicons discovered in your configured repository.</p>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Generate Types</h2>
-        <div class="space-y-4">
-          <p class="text-sm text-gray-600">Generating types for: <strong>{config.atproto.handle}</strong></p>
-          <button id="generate-btn" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
-            Generate Types for My Repository
-          </button>
-        </div>
-      </div>
-
-      <div class="bg-white border border-gray-200 rounded-lg p-6">
-        <h2 class="text-2xl font-semibold mb-4">Generation Status</h2>
-        <div id="status" class="space-y-2">
-          <p class="text-gray-500">Click generate to analyze your repository...</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-8">
-      <h2 class="text-2xl font-semibold mb-4">Discovered Lexicons</h2>
-      <div id="lexicons-container" class="space-y-4">
-        <p class="text-gray-500 text-center py-8">No lexicons discovered yet...</p>
-      </div>
-    </div>
-
-    <div class="mt-8">
-      <h2 class="text-2xl font-semibold mb-4">Generated TypeScript Types</h2>
-      <div class="bg-gray-900 text-green-400 p-4 rounded-lg">
-        <pre id="types-output" class="text-sm overflow-x-auto">// Generated types will appear here...</pre>
-      </div>
-      <div class="mt-4">
-        <button id="copy-btn" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700" disabled>
-          Copy to Clipboard
-        </button>
-        <button id="download-btn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 ml-2" disabled>
-          Download Types File
-        </button>
-      </div>
-    </div>
-  </div>
-</Layout>
-
-<script>
-  // Simple lexicon generator for your configured account
-  class SimpleLexiconGenerator {
-    constructor() {
-      this.config = {
-        handle: 'tynanpurdy.com',
-        did: 'did:plc:6ayddqghxhciedbaofoxkcbs',
-        pdsUrl: 'https://bsky.social'
-      };
-    }
-
-    async generateTypesForRepository() {
-      console.log('🔍 Generating types for repository:', this.config.handle);
-      
-      const lexicons = [];
-      const collectionTypes = {};
-
-      try {
-        // Get all collections in the repository
-        const collections = await this.getAllCollections();
-        console.log(`📊 Found ${collections.length} collections:`, collections);
-
-        // Analyze each collection
-        for (const collection of collections) {
-          console.log(`🔍 Analyzing collection: ${collection}`);
-          
-          try {
-            const collectionInfo = await this.getCollectionRecords(collection, 100);
-            if (collectionInfo && collectionInfo.records.length > 0) {
-              // Group records by type
-              const typeGroups = new Map();
-              
-              collectionInfo.records.forEach(record => {
-                const $type = record.$type;
-                if (!typeGroups.has($type)) {
-                  typeGroups.set($type, []);
-                }
-                typeGroups.get($type).push(record);
-              });
-
-              // Create lexicon definitions for each type
-              typeGroups.forEach((records, $type) => {
-                const sampleRecord = records[0];
-                const properties = this.extractProperties(sampleRecord.value);
-                
-                const lexicon = {
-                  $type,
-                  collection,
-                  properties,
-                  sampleRecord,
-                  description: `Discovered in collection ${collection}`
-                };
-                
-                lexicons.push(lexicon);
-                
-                // Track collection types
-                if (!collectionTypes[collection]) {
-                  collectionTypes[collection] = [];
-                }
-                collectionTypes[collection].push($type);
-                
-                console.log(`✅ Generated lexicon for ${$type} in ${collection}`);
-              });
-            }
-          } catch (error) {
-            console.error(`❌ Error analyzing collection ${collection}:`, error);
-          }
-        }
-
-        // Generate TypeScript type definitions
-        const typeDefinitions = this.generateTypeScriptTypes(lexicons, collectionTypes);
-        
-        console.log(`🎉 Generated ${lexicons.length} lexicon definitions`);
-        
-        return {
-          lexicons,
-          typeDefinitions,
-          collectionTypes
-        };
-
-      } catch (error) {
-        console.error('Error generating types:', error);
-        throw error;
-      }
-    }
-
-    async getAllCollections() {
-      try {
-        const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.describeRepo?repo=${this.config.did}`);
-        const data = await response.json();
-        return data.collections || [];
-      } catch (error) {
-        console.error('Error getting collections:', error);
-        return [];
-      }
-    }
-
-    async getCollectionRecords(collection, limit = 100) {
-      try {
-        const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${this.config.did}&collection=${collection}&limit=${limit}`);
-        const data = await response.json();
-        
-        const records = data.records.map(record => ({
-          uri: record.uri,
-          cid: record.cid,
-          value: record.value,
-          indexedAt: record.indexedAt,
-          collection: collection,
-          $type: record.value?.$type || 'unknown',
-        }));
-
-        return {
-          collection: collection,
-          recordCount: records.length,
-          records: records,
-          cursor: data.cursor,
-        };
-      } catch (error) {
-        console.error('Error getting collection records:', error);
-        return null;
-      }
-    }
-
-    extractProperties(value) {
-      const properties = {};
-      
-      if (value && typeof value === 'object') {
-        Object.keys(value).forEach(key => {
-          if (key !== '$type') {
-            properties[key] = {
-              type: typeof value[key],
-              value: value[key]
-            };
-          }
-        });
-      }
-      
-      return properties;
-    }
-
-    generateTypeScriptTypes(lexicons, collectionTypes) {
-      let types = '// Auto-generated TypeScript types for discovered lexicons\n';
-      types += '// Generated from ATProto repository analysis\n\n';
-
-      // Generate interfaces for each lexicon
-      lexicons.forEach(lexicon => {
-        const interfaceName = this.generateInterfaceName(lexicon.$type);
-        types += `export interface ${interfaceName} {\n`;
-        types += `  $type: '${lexicon.$type}';\n`;
-        
-        Object.entries(lexicon.properties).forEach(([key, prop]) => {
-          const type = this.getTypeScriptType(prop.type, prop.value);
-          types += `  ${key}: ${type};\n`;
-        });
-        
-        types += '}\n\n';
-      });
-
-      // Generate collection type mappings
-      types += '// Collection type mappings\n';
-      types += 'export interface CollectionTypes {\n';
-      Object.entries(collectionTypes).forEach(([collection, types]) => {
-        types += `  '${collection}': ${types.map(t => `'${t}'`).join(' | ')};\n`;
-      });
-      types += '}\n\n';
-
-      // Generate union types for all lexicons
-      const allTypes = lexicons.map(l => this.generateInterfaceName(l.$type));
-      types += `export type AllLexicons = ${allTypes.join(' | ')};\n\n`;
-
-      // Generate helper functions
-      types += '// Helper functions\n';
-      types += 'export function isLexiconType(record: any, type: string): boolean {\n';
-      types += '  return record?.$type === type;\n';
-      types += '}\n\n';
-
-      types += 'export function getCollectionTypes(collection: string): string[] {\n';
-      types += '  const collectionTypes: Record<string, string[]> = {\n';
-      Object.entries(collectionTypes).forEach(([collection, types]) => {
-        types += `    '${collection}': [${types.map(t => `'${t}'`).join(', ')}],\n`;
-      });
-      types += '  };\n';
-      types += '  return collectionTypes[collection] || [];\n';
-      types += '}\n';
-
-      return types;
-    }
-
-    generateInterfaceName($type) {
-      return $type
-        .split('.')
-        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-        .join('');
-    }
-
-    getTypeScriptType(jsType, value) {
-      switch (jsType) {
-        case 'string':
-          return 'string';
-        case 'number':
-          return typeof value === 'number' && Number.isInteger(value) ? 'number' : 'number';
-        case 'boolean':
-          return 'boolean';
-        case 'object':
-          if (Array.isArray(value)) {
-            return 'any[]';
-          }
-          return 'Record<string, any>';
-        default:
-          return 'any';
-      }
-    }
-  }
-
-  const generator = new SimpleLexiconGenerator();
-  let generatedTypes = '';
-
-  // DOM elements
-  const generateBtn = document.getElementById('generate-btn') as HTMLButtonElement;
-  const status = document.getElementById('status') as HTMLDivElement;
-  const lexiconsContainer = document.getElementById('lexicons-container') as HTMLDivElement;
-  const typesOutput = document.getElementById('types-output') as HTMLPreElement;
-  const copyBtn = document.getElementById('copy-btn') as HTMLButtonElement;
-  const downloadBtn = document.getElementById('download-btn') as HTMLButtonElement;
-
-  function updateStatus(message: string, isError = false) {
-    status.innerHTML = `
-      <p class="${isError ? 'text-red-600' : 'text-green-600'}">${message}</p>
-    `;
-  }
-
-  function displayLexicons(lexicons: any[]) {
-    if (lexicons.length === 0) {
-      lexiconsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">No lexicons discovered</p>';
-      return;
-    }
-
-    lexiconsContainer.innerHTML = `
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        ${lexicons.map(lexicon => `
-          <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
-            <h3 class="font-semibold text-gray-900 mb-2">${lexicon.$type}</h3>
-            <p class="text-sm text-gray-600 mb-2">Collection: ${lexicon.collection}</p>
-            <p class="text-sm text-gray-600 mb-2">Properties: ${Object.keys(lexicon.properties).length}</p>
-            <p class="text-xs text-gray-500">${lexicon.description}</p>
-          </div>
-        `).join('')}
-      </div>
-    `;
-  }
-
-  function displayTypes(types: string) {
-    generatedTypes = types;
-    typesOutput.textContent = types;
-    copyBtn.disabled = false;
-    downloadBtn.disabled = false;
-  }
-
-  generateBtn.addEventListener('click', async () => {
-    try {
-      generateBtn.disabled = true;
-      generateBtn.textContent = 'Generating...';
-      updateStatus('Starting type generation...');
-
-      // Generate types
-      const result = await generator.generateTypesForRepository();
-      
-      updateStatus(`Generated ${result.lexicons.length} lexicon types successfully!`);
-      displayLexicons(result.lexicons);
-      displayTypes(result.typeDefinitions);
-
-    } catch (error) {
-      console.error('Error generating types:', error);
-      updateStatus('Error generating types. Check the console for details.', true);
-    } finally {
-      generateBtn.disabled = false;
-      generateBtn.textContent = 'Generate Types for My Repository';
-    }
-  });
-
-  copyBtn.addEventListener('click', async () => {
-    try {
-      await navigator.clipboard.writeText(generatedTypes);
-      copyBtn.textContent = 'Copied!';
-      setTimeout(() => {
-        copyBtn.textContent = 'Copy to Clipboard';
-      }, 2000);
-    } catch (error) {
-      console.error('Error copying to clipboard:', error);
-      alert('Error copying to clipboard');
-    }
-  });
-
-  downloadBtn.addEventListener('click', () => {
-    try {
-      const blob = new Blob([generatedTypes], { type: 'text/typescript' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'generated-lexicons.ts';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error('Error downloading file:', error);
-      alert('Error downloading file');
-    }
-  });
-</script> 

src/pages/simple-test.astro

···
----
-import Layout from '../layouts/Layout.astro';
-import { loadConfig } from '../lib/config/site';
-
-const config = loadConfig();
-
-// Simple test - just check if we can make a basic HTTP request
-let testResults = {
-  config: config,
-  basicTest: null,
-  error: null
-};
-
-try {
-  // Test 1: Basic HTTP request to Bluesky API
-  const response = await fetch('https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=tynanpurdy.com');
-  const data = await response.json();
-  
-  testResults.basicTest = {
-    success: response.ok,
-    status: response.status,
-    data: data
-  };
-} catch (error) {
-  testResults.error = error;
-  console.error('Simple test error:', error);
-}
----
-
-<Layout title="Simple API Test">
-  <div class="container mx-auto px-4 py-8">
-    <header class="text-center mb-12">
-      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Simple API Test
-      </h1>
-      <p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-        Testing basic HTTP requests to ATProto APIs
-      </p>
-    </header>
-
-    <main class="max-w-6xl mx-auto space-y-8">
-      <!-- Configuration -->
-      <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-2">
-          Configuration
-        </h3>
-        <div class="text-sm text-blue-700 dark:text-blue-300">
-          <pre class="bg-blue-100 dark:bg-blue-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(testResults.config, null, 2)}
-          </pre>
-        </div>
-      </div>
-
-      {testResults.error ? (
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-red-800 dark:text-red-200 mb-4">
-            Error
-          </h3>
-          <p class="text-red-700 dark:text-red-300 mb-4">
-            {testResults.error instanceof Error ? testResults.error.message : String(testResults.error)}
-          </p>
-          <pre class="bg-red-100 dark:bg-red-800 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(testResults.error, null, 2)}
-          </pre>
-        </div>
-      ) : testResults.basicTest ? (
-        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
-          <h3 class="text-lg font-semibold text-green-800 dark:text-green-200 mb-2">
-            Basic API Test
-          </h3>
-          <div class="text-sm text-green-700 dark:text-green-300">
-            <div class="flex items-center gap-2 mb-2">
-              <span class={`px-2 py-1 rounded text-xs ${
-                testResults.basicTest.success 
-                  ? 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-200' 
-                  : 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200'
-              }`}>
-                {testResults.basicTest.success ? '✅ Success' : '❌ Failed'}
-              </span>
-              <span class="text-xs">Status: {testResults.basicTest.status}</span>
-            </div>
-            <pre class="bg-green-100 dark:bg-green-700 p-3 rounded text-xs overflow-x-auto">
-{JSON.stringify(testResults.basicTest.data, null, 2)}
-            </pre>
-          </div>
-        </div>
-      ) : (
-        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-8">
-          <h3 class="text-xl font-semibold text-yellow-800 dark:text-yellow-200 mb-4">
-            No Test Results
-          </h3>
-          <p class="text-yellow-700 dark:text-yellow-300">
-            No test results available. Check the console for errors.
-          </p>
-        </div>
-      )}
-    </main>
-  </div>
-</Layout>