fix: include theme and themePolicy collections in backfill (#100)

* fix: include theme and themePolicy collections in backfill

Themes and theme policies were handled by the firehose but omitted from
FORUM_OWNED_COLLECTIONS and COLLECTION_HANDLER_MAP, so a backfill after
restart would never replay them from the PDS — causing 404s when the web
app tried to resolve a theme URI that existed on the PDS but not in the DB.

* fix: address review feedback on theme backfill PR

- Add syncRepoRecords dispatch tests for space.atbb.forum.theme and
space.atbb.forum.themePolicy — proves handleThemeCreate and
handleThemePolicyCreate are actually invoked, catches renames silently
- Add test verifying TypeError propagates when handler method is absent
on Indexer (covers the as-any cast gap)
- Re-throw isProgrammingError in syncRepoRecords outer catch so handler
bugs are not silently logged as pds_error
- Add null guard in themePolicyConfig.toInsertValues / toUpdateValues for
missing defaultLightTheme/defaultDarkTheme refs; returns null to skip
the insert rather than crashing with TypeError on malformed records

* fix: add missing CSS for settings page and theme swatch preview

Swatch spans were invisible because <span> collapses to zero size without
explicit dimensions. Also adds layout styles for settings-page, banners,
and form that were never written.

apps/appview/src/lib/__tests__/backfill-manager.test.ts

···
       mockIndexer = {
         handlePostCreate: vi.fn().mockResolvedValue(true),
         handleForumCreate: vi.fn().mockResolvedValue(true),
+        handleThemeCreate: vi.fn().mockResolvedValue(true),
+        handleThemePolicyCreate: vi.fn().mockResolvedValue(true),
       } as unknown as Indexer;
     });
 
···
       expect(stats.errors).toBe(1);
       consoleSpy.mockRestore();
     });
+
+    it("dispatches handleThemeCreate for space.atbb.forum.theme records", async () => {
+      const mockAgent = new AtpAgent({ service: "https://pds.example.com" });
+      (mockAgent.com.atproto.repo.listRecords as any).mockResolvedValueOnce({
+        data: {
+          records: [{
+            uri: "at://did:web:atbb.space/space.atbb.forum.theme/neobrutal-dark",
+            cid: "bafytheme1",
+            value: {
+              $type: "space.atbb.forum.theme",
+              name: "Neobrutal Dark",
+              colorScheme: "dark",
+              tokens: { "color-bg": "#1a1a1a" },
+              createdAt: "2026-01-01T00:00:00Z",
+            },
+          }],
+          cursor: undefined,
+        },
+      });
+
+      manager.setIndexer(mockIndexer);
+      const stats = await manager.syncRepoRecords(
+        "did:web:atbb.space",
+        "space.atbb.forum.theme",
+        mockAgent
+      );
+
+      expect(stats.recordsFound).toBe(1);
+      expect(stats.recordsIndexed).toBe(1);
+      expect(stats.errors).toBe(0);
+      expect(mockIndexer.handleThemeCreate).toHaveBeenCalledTimes(1);
+      expect(mockIndexer.handleThemeCreate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          did: "did:web:atbb.space",
+          commit: expect.objectContaining({
+            rkey: "neobrutal-dark",
+            cid: "bafytheme1",
+            record: expect.objectContaining({ name: "Neobrutal Dark", colorScheme: "dark" }),
+          }),
+        })
+      );
+    });
+
+    it("dispatches handleThemePolicyCreate for space.atbb.forum.themePolicy records", async () => {
+      const mockAgent = new AtpAgent({ service: "https://pds.example.com" });
+      (mockAgent.com.atproto.repo.listRecords as any).mockResolvedValueOnce({
+        data: {
+          records: [{
+            uri: "at://did:web:atbb.space/space.atbb.forum.themePolicy/self",
+            cid: "bafypolicy1",
+            value: {
+              $type: "space.atbb.forum.themePolicy",
+              availableThemes: [
+                { uri: "at://did:web:atbb.space/space.atbb.forum.theme/neobrutal-dark" },
+              ],
+              defaultLightTheme: { uri: "at://did:web:atbb.space/space.atbb.forum.theme/neobrutal-light" },
+              defaultDarkTheme: { uri: "at://did:web:atbb.space/space.atbb.forum.theme/neobrutal-dark" },
+              allowUserChoice: true,
+            },
+          }],
+          cursor: undefined,
+        },
+      });
+
+      manager.setIndexer(mockIndexer);
+      const stats = await manager.syncRepoRecords(
+        "did:web:atbb.space",
+        "space.atbb.forum.themePolicy",
+        mockAgent
+      );
+
+      expect(stats.recordsFound).toBe(1);
+      expect(stats.recordsIndexed).toBe(1);
+      expect(stats.errors).toBe(0);
+      expect(mockIndexer.handleThemePolicyCreate).toHaveBeenCalledTimes(1);
+      expect(mockIndexer.handleThemePolicyCreate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          did: "did:web:atbb.space",
+          commit: expect.objectContaining({
+            rkey: "self",
+            cid: "bafypolicy1",
+          }),
+        })
+      );
+    });
+
+    it("returns error stats when handler method is missing on Indexer (as-any cast gap)", async () => {
+      // COLLECTION_HANDLER_MAP entry exists but the method is absent on the indexer.
+      // .bind() on undefined throws TypeError which propagates out of syncRepoRecords
+      // and fails performBackfill's outer catch rather than being silently swallowed.
+      const brokenIndexer = {} as unknown as Indexer;
+      manager.setIndexer(brokenIndexer);
+
+      const mockAgent = new AtpAgent({ service: "https://pds.example.com" });
+      // listRecords would never be called — the TypeError fires before the do-while
+      await expect(
+        manager.syncRepoRecords("did:web:atbb.space", "space.atbb.forum.theme", mockAgent)
+      ).rejects.toThrow(TypeError);
+    });
   });
 
   describe("performBackfill", () => {
···
         handleMembershipCreate: vi.fn().mockResolvedValue(true),
         handlePostCreate: vi.fn().mockResolvedValue(true),
         handleModActionCreate: vi.fn().mockResolvedValue(true),
+        handleThemeCreate: vi.fn().mockResolvedValue(true),
+        handleThemePolicyCreate: vi.fn().mockResolvedValue(true),
       } as unknown as Indexer;
     });
 
···
     });
 
     it("CatchUp: syncs user-owned collections and aggregates counts", async () => {
-      // Phase 1 (5 FORUM_OWNED_COLLECTIONS) must return empty so its records don't
+      // Phase 1 (7 FORUM_OWNED_COLLECTIONS) must return empty so its records don't
       // pollute the count. Phase 2: 2 users × 2 USER_OWNED_COLLECTIONS × 1 record = 4.
       const emptyPage = { data: { records: [], cursor: undefined } };
       const recordPage = {
···
       };
 
       const mockListRecords = vi.fn()
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.forum   (Phase 1 call 1)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.category (Phase 1 call 2)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.board    (Phase 1 call 3)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.role     (Phase 1 call 4)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.modAction      (Phase 1 call 5)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.forum        (Phase 1 call 1)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.category      (Phase 1 call 2)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.board         (Phase 1 call 3)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.role          (Phase 1 call 4)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.modAction           (Phase 1 call 5)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.theme         (Phase 1 call 6)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.themePolicy   (Phase 1 call 7)
         .mockResolvedValue(recordPage);    // all Phase 2 user collection calls
 
       mockDb = {
···
       const emptyPage = { data: { records: [], cursor: undefined } };
 
       const mockListRecords = vi.fn()
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.forum   (Phase 1 call 1)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.category (Phase 1 call 2)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.board    (Phase 1 call 3)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.role     (Phase 1 call 4)
-        .mockResolvedValueOnce(emptyPage)  // space.atbb.modAction      (Phase 1 call 5)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.forum        (Phase 1 call 1)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.category      (Phase 1 call 2)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.board         (Phase 1 call 3)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.role          (Phase 1 call 4)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.modAction           (Phase 1 call 5)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.theme         (Phase 1 call 6)
+        .mockResolvedValueOnce(emptyPage)  // space.atbb.forum.themePolicy   (Phase 1 call 7)
         // user1: both collections succeed, 1 record each
         .mockResolvedValueOnce({ data: { records: [{
           uri: "at://did:plc:user1/space.atbb.membership/self",
···
         handleMembershipCreate: vi.fn().mockResolvedValue(true),
         handlePostCreate: vi.fn().mockResolvedValue(true),
         handleModActionCreate: vi.fn().mockResolvedValue(true),
+        handleThemeCreate: vi.fn().mockResolvedValue(true),
+        handleThemePolicyCreate: vi.fn().mockResolvedValue(true),
       } as unknown as Indexer;
     });
 

apps/appview/src/lib/backfill-manager.ts

···
   "space.atbb.forum.board",
   "space.atbb.forum.role",
   "space.atbb.modAction",
+  "space.atbb.forum.theme",
+  "space.atbb.forum.themePolicy",
 ] as const;
 
 export const USER_OWNED_COLLECTIONS = [
···
   "space.atbb.forum.role": "handleRoleCreate",
   "space.atbb.membership": "handleMembershipCreate",
   "space.atbb.modAction": "handleModActionCreate",
+  "space.atbb.forum.theme": "handleThemeCreate",
+  "space.atbb.forum.themePolicy": "handleThemePolicyCreate",
 };
 
 export enum BackfillStatus {
···
         }
       } while (cursor);
     } catch (error) {
+      if (isProgrammingError(error)) throw error;
       stats.errors++;
       this.logger.error("backfill.pds_error", {
         event: "backfill.pds_error",

apps/appview/src/lib/indexer.ts

···
     name: "ThemePolicy",
     table: themePolicies,
     deleteStrategy: "hard",
-    toInsertValues: async (event, record) => ({
-      did: event.did,
-      rkey: event.commit.rkey,
-      cid: event.commit.cid,
-      defaultLightThemeUri: record.defaultLightTheme.uri,
-      defaultDarkThemeUri: record.defaultDarkTheme.uri,
-      allowUserChoice: record.allowUserChoice,
-      indexedAt: new Date(),
-    }),
-    toUpdateValues: async (event, record) => ({
-      cid: event.commit.cid,
-      defaultLightThemeUri: record.defaultLightTheme.uri,
-      defaultDarkThemeUri: record.defaultDarkTheme.uri,
-      allowUserChoice: record.allowUserChoice,
-      indexedAt: new Date(),
-    }),
+    toInsertValues: async (event, record) => {
+      if (!record.defaultLightTheme?.uri || !record.defaultDarkTheme?.uri) {
+        this.logger.warn("ThemePolicy record missing required theme refs — skipping", {
+          did: event.did,
+          rkey: event.commit.rkey,
+        });
+        return null;
+      }
+      return {
+        did: event.did,
+        rkey: event.commit.rkey,
+        cid: event.commit.cid,
+        defaultLightThemeUri: record.defaultLightTheme.uri,
+        defaultDarkThemeUri: record.defaultDarkTheme.uri,
+        allowUserChoice: record.allowUserChoice,
+        indexedAt: new Date(),
+      };
+    },
+    toUpdateValues: async (event, record) => {
+      if (!record.defaultLightTheme?.uri || !record.defaultDarkTheme?.uri) {
+        this.logger.warn("ThemePolicy record missing required theme refs — skipping update", {
+          did: event.did,
+          rkey: event.commit.rkey,
+        });
+        return null;
+      }
+      return {
+        cid: event.commit.cid,
+        defaultLightThemeUri: record.defaultLightTheme.uri,
+        defaultDarkThemeUri: record.defaultDarkTheme.uri,
+        allowUserChoice: record.allowUserChoice,
+        indexedAt: new Date(),
+      };
+    },
     afterUpsert: async (_event, record, policyId, tx) => {
       // Atomically replace all available-theme rows for this policy
       await tx

apps/web/public/static/css/theme.css

···
   font-size: var(--font-size-sm);
   padding: var(--space-xs) var(--space-sm);
 }
+
+/* ─── Settings Page ──────────────────────────────────────────────────────── */
+
+.settings-page {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: var(--space-xl) var(--space-md);
+}
+
+.settings-page h1 {
+  margin-bottom: var(--space-lg);
+}
+
+.settings-page section {
+  margin-bottom: var(--space-xl);
+}
+
+.settings-page h2 {
+  margin-bottom: var(--space-md);
+}
+
+.settings-banner {
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius);
+  border: var(--border-width) solid var(--color-border);
+  margin-bottom: var(--space-md);
+  background: var(--color-surface);
+}
+
+.settings-banner--success {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.settings-banner--error {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.settings-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.settings-form__field label {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+}
+
+.settings-form__submit {
+  align-self: flex-start;
+}
+
+/* ─── Theme Swatch Preview ───────────────────────────────────────────────── */
+
+.theme-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-xs) 0;
+  min-height: 2rem;
+}
+
+.theme-preview__name {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.theme-preview__swatches {
+  display: flex;
+  gap: 4px;
+}
+
+.theme-preview__swatch {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  flex-shrink: 0;
+}