wip

.opencode/agent/pair.md

···
 - We've talked it through and we've confirmed I'd like you to implement something
 - A snippet clarifies better than words
 
+## Subagents
+
+You should prefer to spawn subagents for performing large tasks, to save our context for conversation.
+
 ## Codebase access
 
 You have full read/write. Explore freely to understand context—just tell me what you're thinking, don't silently absorb and produce.

.opencode/opencode.json

···
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "playwright": {
+      "type": "local",
+      "command": [
+        "pnpx",
+        "@playwright/mcp@latest",
+        "--browser",
+        "firefox",
+        "--user-data-dir",
+        "/home/jonathan/.cache/playwright-mcp"
+      ],
+      "environment": {
+        "PLAYWRIGHT_BROWSERS_PATH": "/home/jonathan/.cache/playwright-browsers",
+        "PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS": "true"
+      },
+      "enabled": true
+    }
+  }
+}

AGENTS.md

···
+# Tips
+
+Always make sure you check to see if the dev server is running before starting a new one

debug-demo.ts

···
+import {chromium} from 'playwright'
+
+async function debugDemo() {
+  const browsersPath = process.env.PLAYWRIGHT_BROWSERS_PATH
+  const executablePath = browsersPath ? `${browsersPath}/chromium-1194/chrome-linux/chrome` : undefined
+
+  const browser = await chromium.launch({
+    headless: true,
+    executablePath,
+  })
+  const page = await browser.newPage()
+
+  // Capture console logs
+  page.on('console', (msg) => {
+    const type = msg.type()
+    const text = msg.text()
+    if (type === 'error') {
+      console.error('[BROWSER ERROR]', text)
+    } else if (type === 'warning') {
+      console.warn('[BROWSER WARN]', text)
+    } else {
+      console.log('[BROWSER]', text)
+    }
+  })
+
+  // Capture page errors
+  page.on('pageerror', (err) => {
+    console.error('[PAGE ERROR]', err.message)
+  })
+
+  console.log('Navigating to http://localhost:5173...')
+  await page.goto('http://localhost:5173', {waitUntil: 'networkidle'})
+
+  // Wait for the demo to initialize
+  await page.waitForSelector('.demo', {timeout: 10000})
+
+  console.log('\n=== Demo Page Loaded ===\n')
+
+  // Get entry count
+  const entryCount = await page.textContent('#entry-count')
+  console.log('Entry count:', entryCount)
+
+  // Get all query sections
+  const queries = await page.$$('.query')
+  console.log(`\nFound ${queries.length} queries\n`)
+
+  // Run each query and capture results
+  for (let i = 0; i < queries.length; i++) {
+    const query = queries[i]
+    const title = await query.$eval('h3', (el) => el.textContent)
+    console.log(`\n--- Query ${i + 1}: ${title} ---`)
+
+    // Get the query spec
+    const spec = await query.$eval('.query-spec', (el) => el.textContent)
+    console.log('Spec:', spec?.replace(/\n/g, ' '))
+
+    // Get the plan details
+    const plan = await query.$('.plan')
+    if (plan) {
+      const planDetails = await plan.evaluate((el) => {
+        const divs = el.querySelectorAll(':scope > div')
+        return Array.from(divs).map((d) => d.textContent?.trim())
+      })
+      console.log('Plan:', planDetails.join(' | '))
+    }
+
+    // Click the Run Query button
+    const runBtn = await query.$('.run-query-btn')
+    if (runBtn) {
+      await runBtn.click()
+      // Wait for results to appear
+      await page.waitForSelector(`#results-${i} pre, #results-${i} .loading`, {timeout: 5000}).catch(() => {})
+      // Give time for async query to complete
+      await page.waitForTimeout(500)
+
+      const results = await page.$eval(`#results-${i}`, (el) => el.textContent).catch(() => 'No results')
+      console.log('Results:', results?.slice(0, 500))
+    }
+  }
+
+  // Check cardinality estimates
+  console.log('\n=== Cardinality Estimates ===')
+  const cardTable = await page.$('#cardinality-table')
+  if (cardTable) {
+    const rows = await cardTable.$$eval('tr', (trs) =>
+      trs.slice(1).map((tr) => {
+        const cells = tr.querySelectorAll('td')
+        return `${cells[0]?.textContent}: ${cells[1]?.textContent}`
+      }),
+    )
+    rows.forEach((r) => console.log(r))
+  }
+
+  // Check index store sizes
+  console.log('\n=== Index Store Sizes ===')
+  const sizesTable = await page.$('#index-sizes-table')
+  if (sizesTable) {
+    const rows = await sizesTable.$$eval('tr', (trs) =>
+      trs.slice(1).map((tr) => {
+        const cells = tr.querySelectorAll('td')
+        return `${cells[0]?.textContent}: ${cells[1]?.textContent}`
+      }),
+    )
+    rows.forEach((r) => console.log(r))
+  }
+
+  await browser.close()
+  console.log('\n=== Done ===')
+}
+
+debugDemo().catch((err) => {
+  console.error('Error:', err)
+  process.exit(1)
+})

flake.nix

···
           buildInputs = [
 	    pkgs.pnpm
 	    pkgs.nodejs
+	    pkgs.playwright-driver.browsers
           ];
+          
+          shellHook = ''
+            export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
+            export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
+          '';
         };
       }
     );

package.json

···
     "@eslint/js": "^9.39.2",
     "@eslint/json": "^0.14.0",
     "@eslint/markdown": "^7.5.1",
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^25.0.3",
     "confusing-browser-globals": "^1.0.11",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
···
     "eslint-plugin-prettier": "^5.5.4",
     "fake-indexeddb": "^6.2.5",
     "globals": "^16.5.0",
+    "playwright": "^1.57.0",
     "prettier": "^3.7.4",
+    "tsx": "^4.21.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.51.0",
     "typescript-eslint-language-service": "^5.0.5",
···
   },
   "dependencies": {
     "core-js": "^3.47.0",
+    "feedsmith": "^2.8.0",
     "idb": "^8.0.3",
     "zod": "^4.3.4"
   }

pnpm-lock.yaml

···
       core-js:
         specifier: ^3.47.0
         version: 3.47.0
+      feedsmith:
+        specifier: ^2.8.0
+        version: 2.8.0
       idb:
         specifier: ^8.0.3
         version: 8.0.3
···
       '@eslint/markdown':
         specifier: ^7.5.1
         version: 7.5.1
+      '@playwright/test':
+        specifier: ^1.57.0
+        version: 1.57.0
+      '@types/node':
+        specifier: ^25.0.3
+        version: 25.0.3
       confusing-browser-globals:
         specifier: ^1.0.11
         version: 1.0.11
···
       globals:
         specifier: ^16.5.0
         version: 16.5.0
+      playwright:
+        specifier: ^1.57.0
+        version: 1.57.0
       prettier:
         specifier: ^3.7.4
         version: 3.7.4
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
···
         version: 5.1.3
       vite:
         specifier: ^7.2.4
-        version: 7.3.0
+        version: 7.3.0(@types/node@25.0.3)(tsx@4.21.0)
       vitest:
         specifier: ^4.0.16
-        version: 4.0.16
+        version: 4.0.16(@types/node@25.0.3)(tsx@4.21.0)
 
 packages:
 
···
   '@pkgr/core@0.2.9':
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@playwright/test@1.57.0':
+    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
+    engines: {node: '>=18'}
+    hasBin: true
 
   '@rollup/rollup-android-arm-eabi@4.54.0':
     resolution: {integrity: sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==}
···
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
+  '@types/node@25.0.3':
+    resolution: {integrity: sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
···
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  entities@7.0.0:
+    resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
+    engines: {node: '>=0.12'}
 
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
···
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-xml-parser@5.3.3:
+    resolution: {integrity: sha512-2O3dkPAAC6JavuMm8+4+pgTk+5hoAs+CjZ+sWcQLkX9+/tHRuTkQh/Oaifr8qDmZ8iEHb771Ea6G8CdwkrgvYA==}
+    hasBin: true
+
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
 
···
       picomatch:
         optional: true
 
+  feedsmith@2.8.0:
+    resolution: {integrity: sha512-LloQgc/Kc82PGwAsNV0AjkDGS91NRdbP1jTwJMfRHkhLu7NgGPWyi/TWz06r4PXh0ixhf+5NAgt8bL/Wg/u7/A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
···
   format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
+
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
 
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
···
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  playwright-core@1.57.0:
+    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.57.0:
+    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
···
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strnum@2.1.2:
+    resolution: {integrity: sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
···
 
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
 
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
···
     engines: {node: '>=14.17'}
     hasBin: true
 
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
   unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
···
 
   '@pkgr/core@0.2.9': {}
 
+  '@playwright/test@1.57.0':
+    dependencies:
+      playwright: 1.57.0
+
   '@rollup/rollup-android-arm-eabi@4.54.0':
     optional: true
 
···
       '@types/unist': 3.0.3
 
   '@types/ms@2.1.0': {}
+
+  '@types/node@25.0.3':
+    dependencies:
+      undici-types: 7.16.0
 
   '@types/unist@3.0.3': {}
 
···
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.16(vite@7.3.0)':
+  '@vitest/mocker@4.0.16(vite@7.3.0(@types/node@25.0.3)(tsx@4.21.0))':
     dependencies:
       '@vitest/spy': 4.0.16
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.0
+      vite: 7.3.0(@types/node@25.0.3)(tsx@4.21.0)
 
   '@vitest/pretty-format@4.0.16':
     dependencies:
···
     dependencies:
       dequal: 2.0.3
 
+  entities@7.0.0: {}
+
   es-module-lexer@1.7.0: {}
 
   esbuild@0.27.2:
···
 
   fast-levenshtein@2.0.6: {}
 
+  fast-xml-parser@5.3.3:
+    dependencies:
+      strnum: 2.1.2
+
   fault@2.0.1:
     dependencies:
       format: 0.2.2
···
     optionalDependencies:
       picomatch: 4.0.3
 
+  feedsmith@2.8.0:
+    dependencies:
+      entities: 7.0.0
+      fast-xml-parser: 5.3.3
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
···
   flatted@3.3.3: {}
 
   format@0.2.2: {}
+
+  fsevents@2.3.2:
+    optional: true
 
   fsevents@2.3.3:
     optional: true
···
 
   picomatch@4.0.3: {}
 
+  playwright-core@1.57.0: {}
+
+  playwright@1.57.0:
+    dependencies:
+      playwright-core: 1.57.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
···
 
   strip-json-comments@3.1.1: {}
 
+  strnum@2.1.2: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
···
   tslib@2.8.1:
     optional: true
 
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.2
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
···
       vscode-languageserver-protocol: 3.17.5
 
   typescript@5.9.3: {}
+
+  undici-types@7.16.0: {}
 
   unist-util-is@6.0.1:
     dependencies:
···
     dependencies:
       punycode: 2.3.1
 
-  vite@7.3.0:
+  vite@7.3.0(@types/node@25.0.3)(tsx@4.21.0):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
···
       rollup: 4.54.0
       tinyglobby: 0.2.15
     optionalDependencies:
+      '@types/node': 25.0.3
       fsevents: 2.3.3
+      tsx: 4.21.0
 
-  vitest@4.0.16:
+  vitest@4.0.16(@types/node@25.0.3)(tsx@4.21.0):
     dependencies:
       '@vitest/expect': 4.0.16
-      '@vitest/mocker': 4.0.16(vite@7.3.0)
+      '@vitest/mocker': 4.0.16(vite@7.3.0(@types/node@25.0.3)(tsx@4.21.0))
       '@vitest/pretty-format': 4.0.16
       '@vitest/runner': 4.0.16
       '@vitest/snapshot': 4.0.16
···
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.0
+      vite: 7.3.0(@types/node@25.0.3)(tsx@4.21.0)
       why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.0.3
     transitivePeerDependencies:
       - jiti
       - less

src/lib/docstore.ts

···
   }
 
   /**
+   * Record multiple writes in a batch (more efficient for bulk inserts).
+   * Updates HLLs for all records, persists once at the end.
+   */
+  async recordWriteBatch(
+    storeId: string,
+    records: Record<string, unknown>[],
+    tx?: IDBPTransaction<unknown, string[], 'readwrite'>,
+  ): Promise<void> {
+    const store = tx
+      ? tx.objectStore('_stats')
+      : this.#db.transaction('_stats', 'readwrite').objectStore('_stats')
+
+    let stats = (await store.get(storeId)) as IndexStatsRecord | undefined
+    if (!stats) {
+      stats = this.#createEmpty(storeId)
+    }
+
+    for (const keys of records) {
+      stats.rowCount++
+
+      for (const [key, value] of Object.entries(keys)) {
+        if (value === undefined || value === null) continue
+
+        // Update HLL
+        if (!stats.cardinalitySketch[key]) {
+          stats.cardinalitySketch[key] = new Uint8Array(HLL_REGISTER_COUNT)
+        }
+        const hll = new HyperLogLog(stats.cardinalitySketch[key])
+        hll.add(String(value))
+
+        // Update bounds (only for comparable types)
+        if (this.#isComparable(value)) {
+          if (!stats.bounds[key]) {
+            stats.bounds[key] = {min: value, max: value}
+          } else {
+            this.#updateBounds(stats.bounds[key], value)
+          }
+        }
+      }
+    }
+
+    await store.put(stats)
+  }
+
+  /**
    * Update stats after a delete operation.
    */
   async recordDelete(storeId: string, tx?: IDBPTransaction<unknown, string[], 'readwrite'>): Promise<void> {
···
 // Query planner
 // =============================================================================
 
-export type CompareOp = '=' | '<' | '>' | '<=' | '>=' | '!='
+export type CompareOp = '=' | '<' | '>' | '<=' | '>=' | '!=' | 'in'
 
+/**
+ * A field-level comparison clause.
+ * For spread fields, use the full path like '...tags.tag'.
+ */
 export interface WhereClause {
   key: string
   op: CompareOp
+  /** For 'in' operator, this should be an array of values */
   value: unknown
 }
 
+/**
+ * Match a single row within a spread array.
+ * All conditions in `match` must be satisfied by the SAME row.
+ * Multiple SpreadMatch clauses on the same spread create an intersection
+ * (document must have rows matching EACH SpreadMatch).
+ *
+ * Example: Find documents with tag=(media-type, audio) AND tag=(explicit, true)
+ * ```typescript
+ * matches: [
+ *   {spread: 'tags', where: {tag: 'media-type', value: 'audio'}},
+ *   {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
+ * ]
+ * ```
+ */
+export interface SpreadMatch {
+  /** The spread field name (without '...' prefix), e.g., 'tags' */
+  spread: string
+  /** Field values that must all match on ONE row (equality only) */
+  where: Record<string, unknown>
+}
+
 export interface QuerySpec {
   store: string
+  /** Field-level WHERE clauses (legacy, for simple queries) */
   where: WhereClause[]
+  /** Spread row matches - each match must be satisfied by one row in the spread */
+  matches?: SpreadMatch[]
   orderBy?: {key: string; direction: 'asc' | 'desc'}
   limit?: number
 }
···
    * and this describes the "build" side (used for lookups).
    */
   intersection?: IntersectionPlan
+
+  /**
+   * For 'in' queries: sorted list of values to scan via cursor hopping.
+   * The executor will scan each value in sequence using cursor.continue(nextValue).
+   */
+  inValues?: unknown[]
+
+  /**
+   * Prefix values for compound index 'in' queries.
+   * If set, each inValue is combined with this prefix to form the full key.
+   */
+  inPrefix?: unknown[]
 }
 
 /**
···
    * For primary store this is 'id', for index stores it's '_docId'.
    */
   docIdField: string
+
+  /**
+   * For self-joins with 3+ values, chain additional intersections here.
+   * Each additional scan further filters the result set.
+   */
+  next?: IntersectionPlan
 }
 
 /**
···
   handledClauses: Set<number>
   // Estimated selectivity based on cardinality
   selectivity: number
+  // If an 'in' clause is handled, the clause index and values
+  inClause?: {clauseIdx: number; key: string; values: unknown[]}
 }
 
 export class QueryPlanner<S extends ShapeWithStorageRef> {
···
    * Generate a query plan for the given query specification.
    */
   async plan(query: QuerySpec): Promise<QueryPlan> {
+    // Handle SpreadMatch queries (new explicit syntax for spread row matching)
+    if (query.matches && query.matches.length > 0) {
+      const spreadMatchPlan = await this.#evaluateSpreadMatches(query)
+      if (spreadMatchPlan) {
+        return spreadMatchPlan
+      }
+    }
+
+    // Check for self-join requirement: multiple equality conditions on the same spread key
+    // e.g., ...tags.tag = 'javascript' AND ...tags.tag = 'ai'
+    // This requires scanning the index multiple times and intersecting by _docId
+    const selfJoinPlan = await this.#evaluateSelfJoin(query)
+    if (selfJoinPlan) {
+      return selfJoinPlan
+    }
+
     const candidates = await this.#generateCandidates(query)
 
     if (candidates.length === 0) {
···
     const bestSingle = scored[0]
 
     // Evaluate index intersection opportunity
-    const intersectionPlan = this.#evaluateIntersection(candidates, query)
+    const intersectionPlan = await this.#evaluateIntersection(candidates, query)
     if (intersectionPlan) {
       // Compare based on estimated efficiency:
       // - Single index: scans selectivity% of rows, then post-filters unhandled clauses
···
     let eqPrefixLength = 0
     const handledClauses = new Set<number>()
 
-    // Count leading equality matches
+    // Count leading equality matches (including 'in' which we handle via cursor hopping)
+    let inClauseIdx: number | null = null
+    let inClauseKey: string | null = null
+
     for (const key of indexKeys) {
-      const clauseIdx = query.where.findIndex((w) => w.key === key && w.op === '=')
-      if (clauseIdx >= 0) {
+      const eqClauseIdx = query.where.findIndex((w) => w.key === key && w.op === '=')
+      if (eqClauseIdx >= 0) {
         eqPrefixLength++
-        handledClauses.add(clauseIdx)
+        handledClauses.add(eqClauseIdx)
       } else {
-        break // Equality prefix broken
+        // Check for 'in' clause on this key - can handle via cursor hopping
+        const inIdx = query.where.findIndex((w) => w.key === key && w.op === 'in')
+        if (inIdx >= 0) {
+          inClauseIdx = inIdx
+          inClauseKey = key
+          handledClauses.add(inIdx)
+        }
+        break // Equality prefix broken (but 'in' is still handled)
       }
     }
 
     // Check for range condition on next key after eq prefix
-    if (eqPrefixLength < indexKeys.length) {
+    if (eqPrefixLength < indexKeys.length && inClauseIdx === null) {
       const nextKey = indexKeys[eqPrefixLength]
-      const rangeClauseIdx = query.where.findIndex((w) => w.key === nextKey && w.op !== '=' && w.op !== '!=')
+      const rangeClauseIdx = query.where.findIndex(
+        (w) => w.key === nextKey && w.op !== '=' && w.op !== '!=' && w.op !== 'in',
+      )
       if (rangeClauseIdx >= 0) {
         handledClauses.add(rangeClauseIdx)
       }
···
     let selectivity = 1.0
     for (const clauseIdx of handledClauses) {
       const clause = query.where[clauseIdx]
-      const cardinality = await this.#statsManager.getCardinality(
-        source === 'primary' ? this.#storeDef.name : source,
-        clause.key,
-      )
+      // Use the appropriate store for cardinality lookup:
+      // - Spread fields (starting with ...) use the index store
+      // - Regular fields use the primary store
+      const storeForCardinality =
+        clause.key.startsWith('...') && source !== 'primary' ? source : this.#storeDef.name
+      const cardinality = await this.#statsManager.getCardinality(storeForCardinality, clause.key)
       if (cardinality > 0 && clause.op === '=') {
         selectivity *= 1 / cardinality
+      } else if (cardinality > 0 && clause.op === 'in') {
+        // 'in' with N values: selectivity is N / cardinality
+        const values = clause.value as unknown[]
+        selectivity *= values.length / cardinality
       } else if (cardinality > 0) {
         // Range query - rough estimate of 1/3 selectivity
         selectivity *= 0.33
       }
     }
 
+    // Build inClause info if present
+    const inClause =
+      inClauseIdx !== null && inClauseKey !== null
+        ? {
+            clauseIdx: inClauseIdx,
+            key: inClauseKey,
+            values: query.where[inClauseIdx].value as unknown[],
+          }
+        : undefined
+
     return {
       source,
       indexName,
···
       coversOrderBy,
       handledClauses,
       selectivity,
+      inClause,
     }
   }
 
···
 
   /**
    * Build final query plan from chosen candidate.
+   * Fetches stats for the candidate's source to get accurate row counts.
    */
-  #buildPlan(candidate: IndexCandidate, query: QuerySpec): QueryPlan {
-    // Build key range from handled clauses
-    const keyRange = this.#buildKeyRange(candidate, query)
+  async #buildPlan(candidate: IndexCandidate, query: QuerySpec): Promise<QueryPlan> {
+    // Build key range from handled clauses (null if using 'in' with cursor hopping)
+    const keyRange = candidate.inClause ? null : this.#buildKeyRange(candidate, query)
 
     // Filter = clauses not handled by index
     const filter = query.where.filter((_, i) => !candidate.handledClauses.has(i))
···
     // Determine available fields
     const availableFields = this.#getAvailableFields(candidate.source)
 
+    // Build 'in' values if present
+    let inValues: unknown[] | undefined
+    let inPrefix: unknown[] | undefined
+
+    if (candidate.inClause) {
+      // Sort values for efficient cursor hopping
+      inValues = [...candidate.inClause.values].sort()
+
+      // Build prefix from equality conditions before the 'in' key
+      if (candidate.eqPrefixLength > 0) {
+        inPrefix = []
+        for (let i = 0; i < candidate.eqPrefixLength; i++) {
+          const key = candidate.indexKeys[i]
+          const clause = query.where.find((w) => w.key === key && w.op === '=')
+          if (clause) inPrefix.push(clause.value)
+        }
+      }
+    }
+
+    // Fetch stats for the candidate's source (primary or index store)
+    const storeId = candidate.source === 'primary' ? this.#storeDef.name : candidate.source
+    const stats = await this.#statsManager.getStats(storeId)
+    const totalRows = stats?.rowCount ?? 1000
+
     return {
       source: candidate.source,
       indexName: candidate.indexName,
···
       filter,
       needsSort: query.orderBy != null && !candidate.coversOrderBy,
       availableFields,
-      estimatedRows: Math.ceil(candidate.selectivity * 1000), // TODO: use actual row count from stats
+      estimatedRows: Math.min(Math.ceil(candidate.selectivity * totalRows), totalRows),
       selectivity: candidate.selectivity,
+      inValues,
+      inPrefix,
     }
   }
 
···
    * The [] serves as a max sentinel since arrays sort after all other IDB types.
    */
   #buildCompoundKeyRange(eqValues: unknown[], rangeClauses: WhereClause[]): KeyRangeSpec {
-    let lower: unknown[] | undefined
-    let upper: unknown[] | undefined
+    // For single-key indexes with no equality prefix (just a range on the key),
+    // we need to return scalar values, not arrays.
+    const isSimpleRange = eqValues.length === 0
+
+    let lower: unknown | undefined
+    let upper: unknown | undefined
     let lowerOpen = false
     let upperOpen = false
 
     for (const clause of rangeClauses) {
       switch (clause.op) {
         case '>':
-          lower = [...eqValues, clause.value]
+          lower = isSimpleRange ? clause.value : [...eqValues, clause.value]
           lowerOpen = true
           break
         case '>=':
-          lower = [...eqValues, clause.value]
+          lower = isSimpleRange ? clause.value : [...eqValues, clause.value]
           lowerOpen = false
           break
         case '<':
-          upper = [...eqValues, clause.value]
+          upper = isSimpleRange ? clause.value : [...eqValues, clause.value]
           upperOpen = true
           break
         case '<=':
-          upper = [...eqValues, clause.value]
+          upper = isSimpleRange ? clause.value : [...eqValues, clause.value]
           upperOpen = false
           break
       }
     }
 
+    // For simple range queries (no equality prefix), return simple bounds
+    if (isSimpleRange) {
+      if (lower !== undefined && upper !== undefined) {
+        return {type: 'bound', lower, upper, lowerOpen, upperOpen}
+      } else if (lower !== undefined) {
+        return {type: 'lowerBound', lower, lowerOpen}
+      } else if (upper !== undefined) {
+        return {type: 'upperBound', upper, upperOpen}
+      }
+      // Shouldn't happen
+      return {type: 'only', lower: null}
+    }
+
     // For compound indexes, we must bound both ends to stay within the equality prefix.
     // If only lower bound specified, add upper bound with max sentinel to stay in prefix.
     // If only upper bound specified, add lower bound with min value to stay in prefix.
···
 
   /**
    * Fallback plan when no index is useful.
+   * Fetches stats for the primary store to get accurate row counts.
    */
-  #fullScanPlan(query: QuerySpec): QueryPlan {
+  async #fullScanPlan(query: QuerySpec): Promise<QueryPlan> {
+    const stats = await this.#statsManager.getStats(this.#storeDef.name)
+    const totalRows = stats?.rowCount ?? 1000
     return {
       source: 'primary',
       indexName: null,
···
       filter: query.where,
       needsSort: query.orderBy != null,
       availableFields: Object.keys(this.#storeDef.schema),
-      estimatedRows: 10000, // TODO: use actual row count from stats
+      estimatedRows: totalRows,
       selectivity: 1.0,
     }
   }
 
   /**
-   * Evaluate whether index intersection would be beneficial.
-   * Returns an intersection plan if two indexes can be combined effectively,
-   * or null if intersection isn't worthwhile.
+   * Evaluate self-join requirement: multiple equality conditions on the same spread key.
+   * e.g., ...tags.tag = 'javascript' AND ...tags.tag = 'ai'
    *
-   * Intersection is beneficial when:
-   * 1. We have at least 2 candidates covering different clauses
-   * 2. Each candidate has good selectivity (< 50%)
-   * 3. Combined selectivity is significantly better than single best
-   * 4. Both sides can identify documents by ID
+   * This requires scanning the index multiple times with different values and
+   * intersecting by _docId to find documents that have ALL the specified values.
+   * Fetches stats for the index store to get accurate row counts.
    */
-  #evaluateIntersection(candidates: IndexCandidate[], query: QuerySpec): QueryPlan | null {
-    // Need at least 2 candidates with handled clauses
-    const usableCandidates = candidates.filter((c) => c.handledClauses.size > 0 && c.selectivity < 0.5)
-    if (usableCandidates.length < 2) {
+  async #evaluateSelfJoin(query: QuerySpec): Promise<QueryPlan | null> {
+    // Group equality clauses by key to find duplicates
+    const eqClausesByKey = new Map<string, {clauseIdx: number; clause: WhereClause}[]>()
+
+    for (let i = 0; i < query.where.length; i++) {
+      const clause = query.where[i]
+      if (clause.op === '=' && clause.key.startsWith('...')) {
+        // This is an equality on a spread key
+        const existing = eqClausesByKey.get(clause.key) ?? []
+        existing.push({clauseIdx: i, clause})
+        eqClausesByKey.set(clause.key, existing)
+      }
+    }
+
+    // Find keys with multiple equality conditions
+    let selfJoinKey: string | null = null
+    let selfJoinClauses: {clauseIdx: number; clause: WhereClause}[] = []
+
+    for (const [key, clauses] of eqClausesByKey) {
+      if (clauses.length >= 2) {
+        selfJoinKey = key
+        selfJoinClauses = clauses
+        break // Handle one self-join at a time
+      }
+    }
+
+    if (!selfJoinKey || selfJoinClauses.length < 2) {
       return null
     }
 
-    // Find pairs of candidates that handle different clauses
-    let bestPair: {probe: IndexCandidate; build: IndexCandidate; combinedSelectivity: number} | null = null
+    // Find the best index that can handle this spread key
+    // Prefer indexes that can also handle other equality conditions (e.g., feedId = 'tech')
+    let bestIndex: {
+      store: string
+      name: string
+      keys: string[]
+      eqPrefixLength: number
+      eqValues: unknown[]
+      handledClauseIndices: Set<number>
+    } | null = null
+
+    for (const group of this.#storeDef.indexStoreGroups) {
+      for (const idx of group.indexes) {
+        const idxKeys = idx.keys as string[]
+        if (!idxKeys.includes(selfJoinKey)) continue
+
+        // Calculate how many prefix equality clauses this index can handle
+        let eqPrefixLength = 0
+        const eqValues: unknown[] = []
+        const handledIndices = new Set<number>(selfJoinClauses.map((c) => c.clauseIdx))
 
-    for (let i = 0; i < usableCandidates.length; i++) {
-      for (let j = i + 1; j < usableCandidates.length; j++) {
-        const a = usableCandidates[i]
-        const b = usableCandidates[j]
+        for (const key of idxKeys) {
+          if (key === selfJoinKey) break
+          const clauseIdx = query.where.findIndex((w) => w.key === key && w.op === '=')
+          if (clauseIdx >= 0) {
+            eqPrefixLength++
+            eqValues.push(query.where[clauseIdx].value)
+            handledIndices.add(clauseIdx)
+          } else {
+            break
+          }
+        }
 
-        // Check if they handle different clauses (no overlap = more benefit)
-        const overlap = this.#clauseOverlap(a.handledClauses, b.handledClauses)
-        if (overlap === a.handledClauses.size || overlap === b.handledClauses.size) {
-          // One fully contains the other, no benefit from intersection
-          continue
+        // Prefer index with longer equality prefix
+        if (!bestIndex || eqPrefixLength > bestIndex.eqPrefixLength) {
+          bestIndex = {
+            store: group.storeName,
+            name: idx.name,
+            keys: idxKeys,
+            eqPrefixLength,
+            eqValues,
+            handledClauseIndices: handledIndices,
+          }
         }
+      }
+    }
 
-        // Combined selectivity is multiplicative for independent conditions
-        const combinedSelectivity = a.selectivity * b.selectivity
+    if (!bestIndex) {
+      return null // No index covers this spread key
+    }
+
+    const indexStore = bestIndex.store
+    const indexName = bestIndex.name
+    const eqValues = bestIndex.eqValues
+    const handledClauseIndices = bestIndex.handledClauseIndices
+
+    // Build key ranges for each self-join value
+    const buildKeyRangeForValue = (value: unknown): KeyRangeSpec => {
+      if (eqValues.length === 0) {
+        return {type: 'only', lower: value}
+      } else {
+        return {type: 'only', lower: [...eqValues, value]}
+      }
+    }
 
-        // The probe side should be the smaller result set
-        const [probe, build] = a.selectivity <= b.selectivity ? [a, b] : [b, a]
+    // Build the probe side (first value)
+    const probeClause = selfJoinClauses[0]
+    const probeKeyRange = buildKeyRangeForValue(probeClause.clause.value)
 
-        // Check if this pair is better than previous best
-        if (!bestPair || combinedSelectivity < bestPair.combinedSelectivity) {
-          bestPair = {probe, build, combinedSelectivity}
+    // Get selectivity estimate
+    const cardinality = await this.#statsManager.getCardinality(indexStore, selfJoinKey)
+    const perValueSelectivity = cardinality > 0 ? 1 / cardinality : 0.1
+
+    // Build the chain of intersections for remaining values
+    let intersection: IntersectionPlan | undefined
+    let prevIntersection: IntersectionPlan | undefined
+
+    for (let i = 1; i < selfJoinClauses.length; i++) {
+      const clause = selfJoinClauses[i]
+      const keyRange = buildKeyRangeForValue(clause.clause.value)
+
+      const newIntersection: IntersectionPlan = {
+        source: indexStore,
+        indexName,
+        keyRange,
+        handledClauses: [clause.clause],
+        selectivity: perValueSelectivity,
+        docIdField: '_docId',
+      }
+
+      if (i === 1) {
+        intersection = newIntersection
+      } else if (prevIntersection) {
+        prevIntersection.next = newIntersection
+      }
+      prevIntersection = newIntersection
+    }
+
+    // Remaining clauses that aren't handled
+    const filter = query.where.filter((_, i) => !handledClauseIndices.has(i))
+
+    // Combined selectivity (assuming independence)
+    const combinedSelectivity = Math.pow(perValueSelectivity, selfJoinClauses.length)
+
+    // Available fields from the index store
+    const group = this.#storeDef.indexStoreGroups.find((g) => g.storeName === indexStore)
+    const availableFields = group ? [...group.allKeys] : []
+
+    // Fetch stats for the index store
+    const stats = await this.#statsManager.getStats(indexStore)
+    const totalRows = stats?.rowCount ?? 1000
+
+    return {
+      source: indexStore,
+      indexName,
+      keyRange: probeKeyRange,
+      direction: 'next',
+      filter,
+      needsSort: query.orderBy != null,
+      availableFields,
+      estimatedRows: Math.min(Math.ceil(combinedSelectivity * totalRows), totalRows),
+      selectivity: combinedSelectivity,
+      docIdField: '_docId',
+      intersection,
+    }
+  }
+
+  /**
+   * Evaluate SpreadMatch conditions and build an intersection plan.
+   *
+   * Each SpreadMatch represents a compound equality condition that must be satisfied
+   * by ONE row in the spread array. Multiple SpreadMatch on the same spread create
+   * a self-join (intersection by document ID).
+   *
+   * Example: Find docs with BOTH (tag='media-type', value='audio') AND (tag='explicit', value='true')
+   * ```typescript
+   * matches: [
+   *   {spread: 'tags', where: {tag: 'media-type', value: 'audio'}},
+   *   {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
+   * ]
+   * ```
+   */
+  async #evaluateSpreadMatches(query: QuerySpec): Promise<QueryPlan | null> {
+    const matches = query.matches!
+
+    // Group matches by spread field
+    const matchesBySpread = new Map<string, SpreadMatch[]>()
+    for (const match of matches) {
+      const existing = matchesBySpread.get(match.spread) ?? []
+      existing.push(match)
+      matchesBySpread.set(match.spread, existing)
+    }
+
+    // For now, handle the simple case: all matches on the same spread
+    // TODO: Handle cross-spread intersections
+    if (matchesBySpread.size !== 1) {
+      console.warn('Cross-spread intersections not yet supported, falling back to regular planning')
+      return null
+    }
+
+    const [spreadName, spreadMatches] = [...matchesBySpread.entries()][0]
+
+    // Find the best index that covers the spread fields
+    // We need an index on the index store (e.g., entries_idx:tags) that has
+    // keys matching the fields in the SpreadMatch.where object
+    let bestIndex: {
+      group: IndexStoreGroup<S>
+      index: {name: string; keys: readonly string[]}
+      matchedKeys: string[]
+    } | null = null
+
+    for (const group of this.#storeDef.indexStoreGroups) {
+      // Check if this group handles the spread field
+      // The group's allKeys should include spread keys like '...tags.tag', '...tags.value'
+      const spreadPrefix = `...${spreadName}.`
+      const groupHandlesSpread = [...group.allKeys].some((k: string) => k.startsWith(spreadPrefix))
+      if (!groupHandlesSpread) continue
+
+      for (const idx of group.indexes) {
+        const idxKeys = idx.keys as string[]
+
+        // Check how many of the SpreadMatch fields this index covers as a prefix
+        // Convert SpreadMatch.where keys to spread key format: tag -> ...tags.tag
+        const matchKeys = Object.keys(spreadMatches[0].where)
+        const spreadKeys = matchKeys.map((k) => `${spreadPrefix.slice(0, -1)}.${k}`)
+
+        // Check if index keys start with these spread keys (in some order)
+        let matchedCount = 0
+        const matchedKeys: string[] = []
+        for (const spreadKey of spreadKeys) {
+          if (idxKeys.includes(spreadKey)) {
+            matchedCount++
+            matchedKeys.push(spreadKey)
+          }
+        }
+
+        // Prefer index that matches more keys
+        if (matchedCount > 0 && (!bestIndex || matchedCount > bestIndex.matchedKeys.length)) {
+          bestIndex = {group, index: idx, matchedKeys}
         }
       }
     }
 
-    if (!bestPair) {
+    if (!bestIndex) {
+      console.warn(`No index found for spread '${spreadName}' with required fields`)
       return null
     }
 
-    // Build the intersection plan
-    return this.#buildIntersectionPlan(bestPair.probe, bestPair.build, query)
+    const indexStore = bestIndex.group.storeName
+    const indexName = bestIndex.index.name
+    const indexKeys = bestIndex.index.keys as string[]
+
+    // Build key ranges for each SpreadMatch
+    // For each match, we need to build a compound key from the where clause
+    const buildKeyRangeForMatch = (match: SpreadMatch): KeyRangeSpec => {
+      // Build compound key value in index key order
+      const keyValues: unknown[] = []
+      for (const indexKey of indexKeys) {
+        // Convert index key (e.g., '...tags.tag') to match key (e.g., 'tag')
+        const spreadPrefix = `...${match.spread}.`
+        if (indexKey.startsWith(spreadPrefix)) {
+          const matchKey = indexKey.slice(spreadPrefix.length)
+          if (matchKey in match.where) {
+            keyValues.push(match.where[matchKey])
+          } else {
+            break // Can't continue prefix if key is missing
+          }
+        } else {
+          break // Non-spread key in index, stop
+        }
+      }
+
+      if (keyValues.length === 0) {
+        throw new Error(`SpreadMatch has no matchable keys for index ${indexName}`)
+      }
+
+      return {
+        type: 'only',
+        lower: keyValues.length === 1 ? keyValues[0] : keyValues,
+      }
+    }
+
+    // Build the probe side (first match)
+    const probeKeyRange = buildKeyRangeForMatch(spreadMatches[0])
+
+    // Get selectivity estimate
+    // For compound matches, selectivity is product of per-field selectivities
+    let perMatchSelectivity = 1.0
+    for (const key of bestIndex.matchedKeys) {
+      const cardinality = await this.#statsManager.getCardinality(indexStore, key)
+      if (cardinality > 0) {
+        perMatchSelectivity *= 1 / cardinality
+      }
+    }
+
+    // Build intersection chain for remaining matches
+    let intersection: IntersectionPlan | undefined
+    let prevIntersection: IntersectionPlan | undefined
+
+    for (let i = 1; i < spreadMatches.length; i++) {
+      const match = spreadMatches[i]
+      const keyRange = buildKeyRangeForMatch(match)
+
+      // Convert SpreadMatch.where to WhereClause array for handledClauses
+      const handledClauses: WhereClause[] = Object.entries(match.where).map(([key, value]) => ({
+        key: `...${match.spread}.${key}`,
+        op: '=' as const,
+        value,
+      }))
+
+      const newIntersection: IntersectionPlan = {
+        source: indexStore,
+        indexName,
+        keyRange,
+        handledClauses,
+        selectivity: perMatchSelectivity,
+        docIdField: '_docId',
+      }
+
+      if (i === 1) {
+        intersection = newIntersection
+      } else if (prevIntersection) {
+        prevIntersection.next = newIntersection
+      }
+      prevIntersection = newIntersection
+    }
+
+    // Regular where clauses become post-filters
+    const filter = [...query.where]
+
+    // Combined selectivity (assuming independence between matches)
+    const combinedSelectivity = Math.pow(perMatchSelectivity, spreadMatches.length)
+
+    // Available fields from the index store
+    const availableFields = [...bestIndex.group.allKeys]
+
+    // Fetch stats for row count estimate
+    const stats = await this.#statsManager.getStats(indexStore)
+    const totalRows = stats?.rowCount ?? 1000
+
+    return {
+      source: indexStore,
+      indexName,
+      keyRange: probeKeyRange,
+      direction: 'next' as const,
+      filter,
+      needsSort: query.orderBy != null,
+      availableFields,
+      estimatedRows: Math.min(Math.ceil(combinedSelectivity * totalRows), totalRows),
+      selectivity: combinedSelectivity,
+      docIdField: '_docId',
+      intersection,
+    }
   }
 
   /**
-   * Count how many clause indices overlap between two sets.
+   * Evaluate whether index intersection would be beneficial.
+   * Returns an intersection plan if multiple indexes can be combined effectively,
+   * or null if intersection isn't worthwhile.
+   *
+   * Supports N-way intersections by chaining via intersection.next.
+   *
+   * Intersection is beneficial when:
+   * 1. We have at least 2 candidates covering different clauses
+   * 2. Each candidate has good selectivity (< 50%)
+   * 3. Combined selectivity is significantly better than single best
+   * 4. All sides can identify documents by ID
    */
-  #clauseOverlap(a: Set<number>, b: Set<number>): number {
-    let count = 0
-    for (const idx of a) {
-      if (b.has(idx)) count++
+  async #evaluateIntersection(candidates: IndexCandidate[], query: QuerySpec): Promise<QueryPlan | null> {
+    // Need at least 2 candidates with handled clauses
+    const usableCandidates = candidates.filter((c) => c.handledClauses.size > 0 && c.selectivity < 0.5)
+    if (usableCandidates.length < 2) {
+      return null
+    }
+
+    // Sort by selectivity (best/lowest first) for greedy selection
+    const sorted = [...usableCandidates].sort((a, b) => a.selectivity - b.selectivity)
+
+    // Greedily select candidates that handle new clauses
+    const chosen: IndexCandidate[] = []
+    const handledClauses = new Set<number>()
+
+    for (const candidate of sorted) {
+      // Check if this candidate handles any new clauses
+      const newClauses = [...candidate.handledClauses].filter((i) => !handledClauses.has(i))
+      if (newClauses.length > 0) {
+        chosen.push(candidate)
+        for (const i of candidate.handledClauses) {
+          handledClauses.add(i)
+        }
+      }
+    }
+
+    if (chosen.length < 2) {
+      return null
     }
-    return count
+
+    // Build the N-way intersection plan
+    return this.#buildNWayIntersectionPlan(chosen, query)
   }
 
   /**
-   * Build a query plan that uses index intersection.
+   * Build a query plan that uses N-way index intersection.
+   * chosen[0] is the probe, chosen[1..N] are chained via intersection.next
+   * Fetches stats for the probe source to get accurate row counts.
    */
-  #buildIntersectionPlan(probe: IndexCandidate, build: IndexCandidate, query: QuerySpec): QueryPlan {
-    // Build key ranges for both sides
+  async #buildNWayIntersectionPlan(chosen: IndexCandidate[], query: QuerySpec): Promise<QueryPlan> {
+    const probe = chosen[0]
     const probeKeyRange = this.#buildKeyRange(probe, query)
-    const buildKeyRange = this.#buildKeyRange(build, query)
+    const probeDocIdField = probe.source === 'primary' ? 'id' : '_docId'
 
-    // Collect all handled clauses from both sides
-    const allHandled = new Set<number>([...probe.handledClauses, ...build.handledClauses])
+    // Collect all handled clauses from all chosen candidates
+    const allHandled = new Set<number>()
+    for (const c of chosen) {
+      for (const i of c.handledClauses) {
+        allHandled.add(i)
+      }
+    }
     const filter = query.where.filter((_, i) => !allHandled.has(i))
 
-    // Determine doc ID field for each side
-    const probeDocIdField = probe.source === 'primary' ? 'id' : '_docId'
-    const buildDocIdField = build.source === 'primary' ? 'id' : '_docId'
-
     // Direction based on orderBy (probe side determines this)
     let direction: IDBCursorDirection = 'next'
     if (query.orderBy) {
···
       }
     }
 
-    // Combined selectivity
-    const combinedSelectivity = probe.selectivity * build.selectivity
+    // Combined selectivity is multiplicative
+    let combinedSelectivity = 1
+    for (const c of chosen) {
+      combinedSelectivity *= c.selectivity
+    }
 
-    // Available fields come from final fetch (will need primary lookup if either is index store)
-    const availableFields =
-      probe.source === 'primary' && build.source === 'primary'
-        ? Object.keys(this.#storeDef.schema)
-        : Object.keys(this.#storeDef.schema) // Always fetch from primary after intersection
+    // Available fields - always fetch from primary after intersection
+    const availableFields = Object.keys(this.#storeDef.schema)
+
+    // Build the intersection chain for chosen[1..N]
+    let intersection: IntersectionPlan | undefined
+    let prevIntersection: IntersectionPlan | undefined
+
+    for (let i = 1; i < chosen.length; i++) {
+      const candidate = chosen[i]
+      const keyRange = this.#buildKeyRange(candidate, query)
+      const docIdField = candidate.source === 'primary' ? 'id' : '_docId'
+      const handledClauses = query.where.filter((_, idx) => candidate.handledClauses.has(idx))
+
+      const newIntersection: IntersectionPlan = {
+        source: candidate.source,
+        indexName: candidate.indexName,
+        keyRange,
+        handledClauses,
+        selectivity: candidate.selectivity,
+        docIdField,
+      }
+
+      if (i === 1) {
+        intersection = newIntersection
+      } else if (prevIntersection) {
+        prevIntersection.next = newIntersection
+      }
+      prevIntersection = newIntersection
+    }
 
-    // Get the clauses handled by build side for the intersection plan
-    const buildHandledClauses = query.where.filter((_, i) => build.handledClauses.has(i))
+    // Fetch stats for the probe's source (primary or index store)
+    const storeId = probe.source === 'primary' ? this.#storeDef.name : probe.source
+    const stats = await this.#statsManager.getStats(storeId)
+    const totalRows = stats?.rowCount ?? 1000
 
     return {
       source: probe.source,
···
       filter,
       needsSort: query.orderBy != null && !probe.coversOrderBy,
       availableFields,
-      estimatedRows: Math.ceil(combinedSelectivity * 1000),
+      estimatedRows: Math.min(Math.ceil(combinedSelectivity * totalRows), totalRows),
       selectivity: combinedSelectivity,
       docIdField: probeDocIdField,
-      intersection: {
-        source: build.source,
-        indexName: build.indexName,
-        keyRange: buildKeyRange,
-        handledClauses: buildHandledClauses,
-        selectivity: build.selectivity,
-        docIdField: buildDocIdField,
-      },
+      intersection,
     }
   }
 }
 
 // =============================================================================
+// Batched cursor iteration (reduces IDB round-trips by ~1000x)
+// =============================================================================
+
+/**
+ * Default page size for batched iteration.
+ * Can be overridden per-query via ExecutionOptions.
+ */
+const DEFAULT_PAGE_SIZE = 1000
+
+/**
+ * Batched row iteration using getAll().
+ *
+ * NOTE: For IDBIndex sources, we fetch all rows in one call because pagination
+ * doesn't work correctly - getAll() uses index key ranges but we only have the
+ * primary key to continue from, creating a key space mismatch.
+ *
+ * Single getAll() is still much faster than cursor.continue() iteration
+ * (~5-6x based on benchmarks).
+ *
+ * @param source - IDBObjectStore or IDBIndex to iterate
+ * @param keyRange - Optional key range filter
+ * @param direction - 'next' or 'prev'
+ */
+async function* iterateRows<T = Record<string, unknown>>(
+  source: {getAll: (query?: IDBKeyRange | null, count?: number) => Promise<T[]>},
+  keyRange: IDBKeyRange | null,
+  direction: 'next' | 'prev' = 'next',
+  _pageSize: number = DEFAULT_PAGE_SIZE,
+  _getKey: (row: T) => IDBValidKey = (row) => (row as Record<string, unknown>)['id'] as IDBValidKey,
+): AsyncGenerator<T> {
+  // Fetch all rows in one call - pagination doesn't work for indexes (key space mismatch)
+  const allRows = await source.getAll(keyRange ?? undefined)
+
+  if (direction === 'prev') {
+    // Reverse iteration
+    for (let i = allRows.length - 1; i >= 0; i--) {
+      yield allRows[i]
+    }
+  } else {
+    // Forward iteration
+    for (const row of allRows) {
+      yield row
+    }
+  }
+}
+
+/**
+ * Collect all keys from a source into a Set, extracting docId from compound keys.
+ *
+ * NOTE: For IDBIndex sources, we fetch all keys in one call because pagination
+ * doesn't work correctly - getAllKeys() returns primary keys but keyRange filters
+ * on index keys, so we can't build pagination ranges from returned keys.
+ *
+ * For IDBObjectStore sources, we could paginate (primary keys match), but for
+ * simplicity we use single fetch here too since counts are usually reasonable.
+ */
+async function collectDocIds(
+  source: {getAllKeys: (query?: IDBKeyRange | null, count?: number) => Promise<IDBValidKey[]>},
+  keyRange: IDBKeyRange | null,
+  isCompoundKey: boolean,
+  _pageSize: number = DEFAULT_PAGE_SIZE,
+): Promise<Set<IDBValidKey>> {
+  const docIds = new Set<IDBValidKey>()
+
+  // Single fetch - pagination doesn't work for indexes (key space mismatch)
+  const allKeys = await source.getAllKeys(keyRange ?? undefined)
+
+  for (const pk of allKeys) {
+    const docId = isCompoundKey ? (pk as IDBValidKey[])[0] : pk
+    docIds.add(docId)
+  }
+
+  return docIds
+}
+
+// =============================================================================
 // Query execution operators
 // =============================================================================
 
···
    * When true, logs timing and row count information to console.debug.
    */
   analyze?: boolean
+
+  /**
+   * Page size for batched iteration. Larger values = fewer IDB round-trips
+   * but more memory usage per batch. Default: 1000.
+   *
+   * For stores with large row sizes, consider reducing this.
+   */
+  pageSize?: number
 }
 
 const ANALYZE_PREFIX = '[docstore:analyze]'
···
 /**
  * Execute a query plan and yield index rows.
  * Rows contain only the fields available in the index (keys + replicated).
+ *
+ * Supports cursor hopping for 'in' queries: efficiently scans multiple
+ * discrete values by jumping between them rather than scanning the full range.
+ *
+ * Uses batched iteration (getAll with pagination) to reduce IDB round-trips
+ * by ~1000x compared to cursor.continue() loops.
+ *
+ * This is the low-level implementation. Use rows() for the smart dispatcher
+ * that handles intersections and sorting automatically.
  */
-export async function* rows(
+async function* rowsDirect(
   ctx: ExecutionContext,
   plan: QueryPlan,
   options: ExecutionOptions = {},
 ): AsyncGenerator<Record<string, unknown>> {
-  const {analyze = false} = options
+  const {analyze = false, pageSize = DEFAULT_PAGE_SIZE} = options
   const startTime = analyze ? performance.now() : 0
   let scanned = 0
   let matched = 0
 
   if (analyze) {
+    const inInfo = plan.inValues ? ` (IN ${plan.inValues.length} values)` : ''
     console.debug(
-      `${ANALYZE_PREFIX} rows() started - index: ${plan.indexName ?? '<full scan>'}`,
-      plan
+      `${ANALYZE_PREFIX} rows() started - index: ${plan.indexName ?? '<full scan>'}${inInfo}, pageSize: ${pageSize}`,
+      plan,
     )
   }
 
···
   const tx = ctx.db.transaction(storeName, 'readonly')
   const store = tx.objectStore(storeName)
 
-  // Open cursor with key range and direction
-  const keyRange = plan.keyRange ? toIDBKeyRange(plan.keyRange) : null
+  // Fast path: direct get() for primary key lookup (no index, 'only' key range)
+  if (!plan.indexName && plan.keyRange?.type === 'only' && !plan.inValues) {
+    const row = (await store.get(plan.keyRange.lower as IDBValidKey)) as Record<string, unknown> | undefined
+    if (row && (plan.filter.length === 0 || matchesFilters(row, plan.filter, analyze))) {
+      if (analyze) {
+        const totalTime = performance.now() - startTime
+        console.debug(`${ANALYZE_PREFIX} rows() complete (direct get) - time: ${totalTime.toFixed(2)}ms`)
+      }
+      yield row
+    }
+    return
+  }
+
+  // Handle 'in' queries with batched iteration per value
+  if (plan.inValues && plan.inValues.length > 0) {
+    const indexOrStore = plan.indexName ? store.index(plan.indexName) : store
+
+    for (const value of plan.inValues) {
+      const fullKey = plan.inPrefix ? [...plan.inPrefix, value] : value
+      const keyRange = IDBKeyRange.only(fullKey)
 
-  const cursorOpenStart = analyze ? performance.now() : 0
+      // Use batched row iteration instead of cursor
+      for await (const row of iterateRows(
+        indexOrStore,
+        keyRange,
+        plan.direction,
+        pageSize,
+        (r) => (r as Record<string, unknown>)[ctx.storeDef.primaryKey] as IDBValidKey,
+      )) {
+        scanned++
+        const rowObj = row as Record<string, unknown>
 
-  // Get cursor - use index if specified, otherwise scan store
-  let cursor = plan.indexName
-    ? await store.index(plan.indexName).openCursor(keyRange, plan.direction)
-    : await store.openCursor(keyRange, plan.direction)
+        if (plan.filter.length === 0 || matchesFilters(rowObj, plan.filter, analyze)) {
+          matched++
+          yield rowObj
+        }
+      }
+    }
 
-  if (analyze) {
-    const cursorOpenTime = performance.now() - cursorOpenStart
-    console.debug(`${ANALYZE_PREFIX} cursor opened in ${cursorOpenTime.toFixed(2)}ms`)
+    if (analyze) {
+      const totalTime = performance.now() - startTime
+      console.debug(
+        `${ANALYZE_PREFIX} rows() complete (batched in) - values: ${plan.inValues.length}, scanned: ${scanned}, matched: ${matched}, time: ${totalTime.toFixed(2)}ms`,
+      )
+    }
+    return
   }
 
-  // Iterate cursor using idb's promise-based API
-  while (cursor) {
+  // Standard batched iteration
+  const keyRange = plan.keyRange ? toIDBKeyRange(plan.keyRange) : null
+  const indexOrStore = plan.indexName ? store.index(plan.indexName) : store
+
+  // Use batched row iteration instead of cursor
+  for await (const row of iterateRows(
+    indexOrStore,
+    keyRange,
+    plan.direction,
+    pageSize,
+    (r) => (r as Record<string, unknown>)[ctx.storeDef.primaryKey] as IDBValidKey,
+  )) {
     scanned++
-    const row = cursor.value as Record<string, unknown>
+    const rowObj = row as Record<string, unknown>
 
     // Apply post-fetch filters
-    if (plan.filter.length === 0 || matchesFilters(row, plan.filter, analyze)) {
+    if (plan.filter.length === 0 || matchesFilters(rowObj, plan.filter, analyze)) {
       matched++
-      yield row
+      yield rowObj
     }
+  }
 
-    cursor = await cursor.continue()
+  if (analyze) {
+    const totalTime = performance.now() - startTime
+    console.debug(
+      `${ANALYZE_PREFIX} rows() complete (batched) - scanned: ${scanned}, matched: ${matched}, time: ${totalTime.toFixed(2)}ms`,
+    )
+  }
+}
+
+/**
+ * Count rows matching a query plan.
+ *
+ * Fast path: Uses IDB's native count() when possible (no post-filters, no intersection).
+ * This is a pure key scan with no value deserialization.
+ *
+ * Slow path: Falls back to cursor iteration when post-filters or intersection required.
+ */
+export async function count(
+  ctx: ExecutionContext,
+  plan: QueryPlan,
+  options: ExecutionOptions = {},
+): Promise<number> {
+  const {analyze = false} = options
+  const startTime = analyze ? performance.now() : 0
+
+  // Fast path: use native count() when no post-filters and no intersection
+  if (plan.filter.length === 0 && !plan.intersection && !plan.inValues) {
+    const storeName = plan.source === 'primary' ? ctx.storeDef.name : plan.source
+    const tx = ctx.db.transaction(storeName, 'readonly')
+    const store = tx.objectStore(storeName)
+    const keyRange = plan.keyRange ? toIDBKeyRange(plan.keyRange) : undefined
+
+    const result = plan.indexName
+      ? await store.index(plan.indexName).count(keyRange)
+      : await store.count(keyRange)
+
+    if (analyze) {
+      const totalTime = performance.now() - startTime
+      console.debug(
+        `${ANALYZE_PREFIX} count() complete (native) - count: ${result}, time: ${totalTime.toFixed(2)}ms`,
+      )
+    }
+
+    return result
+  }
+
+  // Slow path: iterate and count
+  // For intersection queries with no post-filters, use optimized key-only counting
+  if (plan.intersection && plan.filter.length === 0) {
+    if (analyze) {
+      console.debug(`${ANALYZE_PREFIX} count() using key-only intersection`)
+    }
+    const result = await countIntersectDirect(ctx, plan, options)
+    if (analyze) {
+      const totalTime = performance.now() - startTime
+      console.debug(
+        `${ANALYZE_PREFIX} count() complete (key intersection) - count: ${result}, time: ${totalTime.toFixed(2)}ms`,
+      )
+    }
+    return result
+  }
+
+  // Fallback: iterate rows and count (needed when post-filters exist)
+  if (analyze) {
+    console.debug(`${ANALYZE_PREFIX} count() using cursor iteration (has filters)`)
+  }
+
+  let result = 0
+  const rowGenerator = plan.intersection
+    ? rowsIntersectDirect(ctx, plan, options)
+    : rowsDirect(ctx, plan, options)
+
+  for await (const _ of rowGenerator) {
+    result++
   }
 
   if (analyze) {
     const totalTime = performance.now() - startTime
     console.debug(
-      `${ANALYZE_PREFIX} rows() complete - scanned: ${scanned}, matched: ${matched}, time: ${totalTime.toFixed(2)}ms`,
+      `${ANALYZE_PREFIX} count() complete (cursor) - count: ${result}, time: ${totalTime.toFixed(2)}ms`,
+    )
+  }
+
+  return result
+}
+
+/**
+ * Count documents matching an intersection query using key-only iteration.
+ * This is faster than rowsIntersectDirect when we only need a count.
+ *
+ * Uses batched key iteration (getAllKeys with pagination) for efficiency.
+ */
+async function countIntersectDirect(
+  ctx: ExecutionContext,
+  plan: QueryPlan,
+  options: ExecutionOptions = {},
+): Promise<number> {
+  const {analyze = false, pageSize = DEFAULT_PAGE_SIZE} = options
+
+  if (!plan.intersection) {
+    throw new Error('countIntersectDirect requires an intersection plan')
+  }
+
+  const intersection = plan.intersection
+  const probeStoreName = plan.source === 'primary' ? ctx.storeDef.name : plan.source
+  const buildStoreName = intersection.source === 'primary' ? ctx.storeDef.name : intersection.source
+
+  // Collect all store names needed
+  const storeNamesSet = new Set([probeStoreName, buildStoreName])
+  let nextIntersection = intersection.next
+  while (nextIntersection) {
+    const storeName = nextIntersection.source === 'primary' ? ctx.storeDef.name : nextIntersection.source
+    storeNamesSet.add(storeName)
+    nextIntersection = nextIntersection.next
+  }
+
+  const tx = ctx.db.transaction(Array.from(storeNamesSet), 'readonly')
+
+  // Phase 1: Collect doc IDs from probe side using batched key iteration
+  const probeScanStart = analyze ? performance.now() : 0
+  const probeStore = tx.objectStore(probeStoreName)
+  const probeKeyRange = plan.keyRange ? toIDBKeyRange(plan.keyRange) : null
+  const isProbeIndexStore = plan.source !== 'primary'
+
+  const probeSource = plan.indexName ? probeStore.index(plan.indexName) : probeStore
+  const probeDocIds = await collectDocIds(probeSource, probeKeyRange, isProbeIndexStore, pageSize)
+
+  if (analyze) {
+    const probeScanTime = performance.now() - probeScanStart
+    console.debug(
+      `${ANALYZE_PREFIX} count intersection probe (batched keys) - count: ${probeDocIds.size}, time: ${probeScanTime.toFixed(2)}ms`,
+    )
+  }
+
+  // Phase 2: Filter through each intersection side
+  let currentIntersection: IntersectionPlan | undefined = intersection
+  let intersectionIndex = 1
+  let candidateDocIds = probeDocIds
+
+  const filterCtx: IntersectionFilterContext = {
+    tx,
+    primaryStoreName: ctx.storeDef.name,
+    analyze,
+    pageSize,
+  }
+
+  while (currentIntersection) {
+    candidateDocIds = await filterByIntersection(
+      filterCtx,
+      currentIntersection,
+      candidateDocIds,
+      intersectionIndex,
+    )
+    currentIntersection = currentIntersection.next
+    intersectionIndex++
+  }
+
+  // Result is just the size of the final candidate set
+  return candidateDocIds.size
+}
+
+// Threshold for switching from scan to point lookups in intersections
+// Point lookup cost varies but is typically 0.5-2ms, cursor step is ~0.04ms
+// Switch to point lookups when candidates < buildRows/10
+const POINT_LOOKUP_THRESHOLD = 10
+
+interface IntersectionFilterContext {
+  tx: IDBPTransaction<unknown, string[], 'readonly'>
+  primaryStoreName: string
+  analyze: boolean
+  pageSize: number
+}
+
+/**
+ * Filter candidate doc IDs through an intersection plan.
+ * Chooses between scan and point-lookup strategies based on estimated costs.
+ *
+ * Uses batched key iteration (getAllKeys with pagination) for scan strategy.
+ *
+ * @returns Set of doc IDs that exist in the intersection
+ */
+async function filterByIntersection(
+  ctx: IntersectionFilterContext,
+  intersection: IntersectionPlan,
+  candidateDocIds: Set<IDBValidKey>,
+  intersectionIndex: number,
+): Promise<Set<IDBValidKey>> {
+  const {tx, primaryStoreName, analyze} = ctx
+  const buildScanStart = analyze ? performance.now() : 0
+
+  const curBuildStoreName = intersection.source === 'primary' ? primaryStoreName : intersection.source
+  const buildStore = tx.objectStore(curBuildStoreName)
+  const buildKeyRange = intersection.keyRange ? toIDBKeyRange(intersection.keyRange) : null
+  const isIndexStore = intersection.source !== 'primary'
+
+  // Estimate build side size to decide strategy
+  const totalRows = await buildStore.count()
+  const estimatedBuildRows = Math.max(1, Math.floor(totalRows * intersection.selectivity))
+
+  // Choose strategy: point lookups vs full scan
+  // Point lookups only work for primary store (we can fetch doc by ID and check fields)
+  const usePointLookups =
+    intersection.source === 'primary' && candidateDocIds.size < estimatedBuildRows / POINT_LOOKUP_THRESHOLD
+
+  if (analyze) {
+    console.debug(
+      `${ANALYZE_PREFIX} intersection ${intersectionIndex} strategy: ${usePointLookups ? 'point-lookups' : 'scan'} (candidates: ${candidateDocIds.size}, est. build rows: ${estimatedBuildRows})`,
     )
   }
 
-  // Handle sorting if needed (requires buffering all results)
-  // Note: for needsSort=true, caller should use rowsSorted() instead
+  const buildDocIds = new Set<IDBValidKey>()
+
+  if (usePointLookups) {
+    // Point lookup strategy: fetch each candidate doc and check the filter
+    // This is faster when candidates << build side rows
+    const primaryStore = tx.objectStore(primaryStoreName)
+    const handledClauses = intersection.handledClauses
+
+    for (const docId of candidateDocIds) {
+      const doc = (await primaryStore.get(docId)) as Record<string, unknown> | undefined
+      if (doc) {
+        // Check if doc matches all the clauses this intersection handles
+        const matches = handledClauses.every((clause) => matchesOp(doc[clause.key], clause.op, clause.value))
+        if (matches) {
+          buildDocIds.add(docId)
+        }
+      }
+    }
+  } else {
+    // Scan strategy: fetch all keys in one call
+    // NOTE: We can't use pagination with indexes because getAllKeys() returns
+    // primary keys but keyRange filters on index keys - key space mismatch.
+    // Single fetch is still much faster than cursor.continue() loop.
+    const buildSource = intersection.indexName ? buildStore.index(intersection.indexName) : buildStore
+    const allPrimaryKeys = await buildSource.getAllKeys(buildKeyRange ?? undefined)
+
+    for (const pk of allPrimaryKeys) {
+      // Extract docId from primaryKey
+      // - Index stores: primaryKey is [_docId, _rowId], so primaryKey[0] = docId
+      // - Primary store: primaryKey IS the docId directly
+      const docId = isIndexStore ? (pk as IDBValidKey[])[0] : pk
+      // Only add if it's still a candidate (optimization for chained intersections)
+      if (candidateDocIds.has(docId)) {
+        buildDocIds.add(docId)
+      }
+    }
+  }
+
+  if (analyze) {
+    const buildScanTime = performance.now() - buildScanStart
+    console.debug(
+      `${ANALYZE_PREFIX} intersection ${intersectionIndex} complete - source: ${intersection.source}/${intersection.indexName}, strategy: ${usePointLookups ? 'point-lookups' : 'scan'}, count: ${buildDocIds.size}, time: ${buildScanTime.toFixed(2)}ms`,
+    )
+  }
+
+  return buildDocIds
 }
 
 /**
···
  * This is efficient when:
  * - Both indexes have good selectivity
  * - The intersection of results is much smaller than either side alone
+ *
+ * This is the low-level implementation. Use rows() for the smart dispatcher
+ * that handles intersections and sorting automatically.
  */
-export async function* rowsIntersect(
+async function* rowsIntersectDirect(
   ctx: ExecutionContext,
   plan: QueryPlan,
   options: ExecutionOptions = {},
 ): AsyncGenerator<Record<string, unknown>> {
-  const {analyze = false} = options
+  const {analyze = false, pageSize = DEFAULT_PAGE_SIZE} = options
 
   if (!plan.intersection) {
     // No intersection, fall back to regular rows
-    yield* rows(ctx, plan, options)
+    yield* rowsDirect(ctx, plan, options)
     return
   }
 
···
 
   const intersection = plan.intersection
   const probeDocIdField = plan.docIdField ?? (plan.source === 'primary' ? 'id' : '_docId')
-  const buildDocIdField = intersection.docIdField
-
-  // Strategy: scan probe side, collect doc IDs, look up in build side
-  // For efficiency, we batch the lookups
 
   const probeStoreName = plan.source === 'primary' ? ctx.storeDef.name : plan.source
   const buildStoreName = intersection.source === 'primary' ? ctx.storeDef.name : intersection.source
 
-  // If both are on the same store, we can use a single transaction
-  const storeNames = probeStoreName === buildStoreName ? [probeStoreName] : [probeStoreName, buildStoreName]
+  // Collect all store names needed for the transaction (probe + all intersection sides)
+  const storeNamesSet = new Set([probeStoreName, buildStoreName])
+  let nextIntersection = intersection.next
+  while (nextIntersection) {
+    const storeName = nextIntersection.source === 'primary' ? ctx.storeDef.name : nextIntersection.source
+    storeNamesSet.add(storeName)
+    nextIntersection = nextIntersection.next
+  }
+  const storeNames = Array.from(storeNamesSet)
 
   const tx = ctx.db.transaction(storeNames, 'readonly')
 
-  // Phase 1: Collect doc IDs from probe side (smaller set)
+  // Phase 1: Collect doc IDs from probe side using batched key iteration
   const probeScanStart = analyze ? performance.now() : 0
   const probeStore = tx.objectStore(probeStoreName)
   const probeKeyRange = plan.keyRange ? toIDBKeyRange(plan.keyRange) : null
+  const isProbeIndexStore = plan.source !== 'primary'
 
-  let probeCursor = plan.indexName
-    ? await probeStore.index(plan.indexName).openCursor(probeKeyRange, plan.direction)
-    : await probeStore.openCursor(probeKeyRange, plan.direction)
-
-  // Collect probe doc IDs and their rows
-  const probeResults: Map<IDBValidKey, Record<string, unknown>> = new Map()
-
-  while (probeCursor) {
-    const row = probeCursor.value as Record<string, unknown>
-    const docId = row[probeDocIdField] as IDBValidKey
-
-    // Only include if it passes probe-side filters (not covered by index)
-    // Note: plan.filter contains clauses not handled by either side,
-    // but intersection.handledClauses are checked via the build side lookup
-    probeResults.set(docId, row)
-
-    probeCursor = await probeCursor.continue()
-  }
-
-  const probeScanTime = analyze ? performance.now() - probeScanStart : 0
+  const probeSource = plan.indexName ? probeStore.index(plan.indexName) : probeStore
+  const probeDocIds = await collectDocIds(probeSource, probeKeyRange, isProbeIndexStore, pageSize)
 
   if (analyze) {
+    const probeScanTime = performance.now() - probeScanStart
     console.debug(
-      `${ANALYZE_PREFIX} probe side scanned - count: ${probeResults.size}, time: ${probeScanTime.toFixed(2)}ms`,
+      `${ANALYZE_PREFIX} probe side scanned (batched keys) - count: ${probeDocIds.size}, time: ${probeScanTime.toFixed(2)}ms`,
     )
   }
 
-  // Phase 2: Build a set of doc IDs from build side for intersection
-  const buildScanStart = analyze ? performance.now() : 0
-  const buildStore = tx.objectStore(buildStoreName)
-  const buildKeyRange = intersection.keyRange ? toIDBKeyRange(intersection.keyRange) : null
+  // Phase 2: Filter candidates through each intersection side
+  let currentIntersection: IntersectionPlan | undefined = intersection
+  let intersectionIndex = 1
+  let candidateDocIds = probeDocIds
 
-  let buildCursor = intersection.indexName
-    ? await buildStore.index(intersection.indexName).openCursor(buildKeyRange, 'next')
-    : await buildStore.openCursor(buildKeyRange, 'next')
+  const filterCtx: IntersectionFilterContext = {
+    tx,
+    primaryStoreName: ctx.storeDef.name,
+    analyze,
+    pageSize,
+  }
 
-  const buildDocIds = new Set<IDBValidKey>()
+  while (currentIntersection) {
+    candidateDocIds = await filterByIntersection(
+      filterCtx,
+      currentIntersection,
+      candidateDocIds,
+      intersectionIndex,
+    )
+    currentIntersection = currentIntersection.next
+    intersectionIndex++
+  }
 
-  while (buildCursor) {
-    const row = buildCursor.value as Record<string, unknown>
-    const docId = row[buildDocIdField] as IDBValidKey
-    buildDocIds.add(docId)
-    buildCursor = await buildCursor.continue()
-  }
+  // Phase 3: Fetch and yield rows for the final intersection result
+  // Strategy depends on result size vs probe size:
+  // - Small result set: point lookups from primary store
+  // - Large result set: re-scan probe with value cursor
+  const fetchStart = analyze ? performance.now() : 0
+  let intersectionCount = 0
 
-  const buildScanTime = analyze ? performance.now() - buildScanStart : 0
+  const resultSize = candidateDocIds.size
+  const probeSize = probeDocIds.size
+  const usePointLookups = resultSize < probeSize / 4 // Point lookups when < 25% match
 
   if (analyze) {
     console.debug(
-      `${ANALYZE_PREFIX} build side scanned - count: ${buildDocIds.size}, time: ${buildScanTime.toFixed(2)}ms`,
+      `${ANALYZE_PREFIX} fetch strategy: ${usePointLookups ? 'point-lookups' : 're-scan'} (result: ${resultSize}, probe: ${probeSize})`,
     )
   }
 
-  // Phase 3: Yield rows that exist in both sets
-  let intersectionCount = 0
-  for (const [docId, row] of probeResults) {
-    if (buildDocIds.has(docId)) {
-      // Apply remaining filters (those not handled by either index)
-      if (plan.filter.length === 0 || matchesFilters(row, plan.filter, analyze)) {
-        intersectionCount++
-        yield row
+  if (usePointLookups && plan.source !== 'primary') {
+    // Fetch matching docs from primary store by docId
+    // This is efficient when intersection filters out most probe rows
+    const primaryStore = tx.objectStore(ctx.storeDef.name)
+
+    for (const docId of candidateDocIds) {
+      const doc = (await primaryStore.get(docId)) as Record<string, unknown> | undefined
+      if (doc) {
+        if (plan.filter.length === 0 || matchesFilters(doc, plan.filter, analyze)) {
+          intersectionCount++
+          yield doc
+        }
+      }
+    }
+  } else {
+    // Re-scan probe side with batched row iteration
+    // Much faster than cursor.continue() loop - ~1000x fewer IDB round-trips
+    const probeSource = plan.indexName ? probeStore.index(plan.indexName) : probeStore
+
+    for await (const row of iterateRows(
+      probeSource,
+      probeKeyRange,
+      plan.direction,
+      pageSize,
+      (r) => (r as Record<string, unknown>)[ctx.storeDef.primaryKey] as IDBValidKey,
+    )) {
+      const rowObj = row as Record<string, unknown>
+      const docId = rowObj[probeDocIdField] as IDBValidKey
+
+      if (candidateDocIds.has(docId)) {
+        if (plan.filter.length === 0 || matchesFilters(rowObj, plan.filter, analyze)) {
+          intersectionCount++
+          yield rowObj
+        }
+        // Remove from set to avoid yielding duplicates (same docId can have multiple index rows)
+        candidateDocIds.delete(docId)
       }
     }
   }
 
   if (analyze) {
+    const fetchTime = performance.now() - fetchStart
     const totalTime = performance.now() - startTime
     console.debug(
-      `${ANALYZE_PREFIX} rowsIntersect() complete - intersection: ${intersectionCount}, total time: ${totalTime.toFixed(2)}ms`,
+      `${ANALYZE_PREFIX} rowsIntersect() complete - intersection: ${intersectionCount}, fetch time: ${fetchTime.toFixed(2)}ms, total time: ${totalTime.toFixed(2)}ms`,
     )
   }
 }
 
 /**
  * Execute a query plan and yield index rows, sorted in memory.
- * Use when plan.needsSort is true.
- * Automatically uses intersection if the plan has one.
+ *
+ * This is the low-level implementation. Use rows() for the smart dispatcher
+ * that handles intersections and sorting automatically.
  */
-export async function* rowsSorted(
+async function* rowsSortedDirect(
   ctx: ExecutionContext,
   plan: QueryPlan,
   orderBy: {key: string; direction: 'asc' | 'desc'},
···
   // Collect all matching rows - use intersection if available
   const collectStart = analyze ? performance.now() : 0
   const allRows: Record<string, unknown>[] = []
-  const rowGenerator = plan.intersection ? rowsIntersect(ctx, plan, options) : rows(ctx, plan, options)
+  const rowGenerator = plan.intersection
+    ? rowsIntersectDirect(ctx, plan, options)
+    : rowsDirect(ctx, plan, options)
   for await (const row of rowGenerator) {
     allRows.push(row)
   }
···
 }
 
 /**
+ * Execute a query plan and yield index rows.
+ *
+ * This is the main entry point for query execution. It automatically:
+ * - Uses intersection when the plan has one
+ * - Sorts results in memory when plan.needsSort is true
+ * - Falls back to direct cursor iteration for simple queries
+ */
+export async function* rows(
+  ctx: ExecutionContext,
+  plan: QueryPlan,
+  options: RowsOptions = {},
+): AsyncGenerator<Record<string, unknown>> {
+  const {orderBy} = options
+
+  // If sorting is needed, use the sorted implementation
+  if (plan.needsSort && orderBy) {
+    yield* rowsSortedDirect(ctx, plan, orderBy, options)
+    return
+  }
+
+  // If intersection is needed, use the intersection implementation
+  if (plan.intersection) {
+    yield* rowsIntersectDirect(ctx, plan, options)
+    return
+  }
+
+  // Simple case: direct cursor iteration
+  yield* rowsDirect(ctx, plan, options)
+}
+
+/**
+ * Options for the rows() function.
+ */
+export interface RowsOptions extends ExecutionOptions {
+  /** Required when plan.needsSort is true */
+  orderBy?: {key: string; direction: 'asc' | 'desc'}
+}
+
+/**
  * Options for the docs() function.
  */
 export interface DocsOptions extends ExecutionOptions {
···
     console.debug(`${ANALYZE_PREFIX} docs() started - source: ${plan.source}, batchSize: ${batchSize}`)
   }
 
-  // Choose the appropriate row generator
-  const rowGenerator = plan.intersection ? rowsIntersect(ctx, plan, options) : rows(ctx, plan, options)
+  // Use the smart rows() dispatcher which handles intersections and sorting
+  const rowGenerator = rows(ctx, plan, options)
 
   // If already reading from primary and no intersection, just yield rows as docs
   if (plan.source === 'primary' && !plan.intersection) {
···
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyStoreDef = StoreDef<any>
+
 /**
- * Install a docstore schema into IndexedDB.
- * Creates the primary object store and all denormalized index stores.
+ * Install docstore schemas into IndexedDB.
+ * Creates the primary object stores and all denormalized index stores.
  *
  * @param dbName - Name for the IDB database
- * @param storeDef - Store definition from docstore.define()
- * @param version - Optional version number (defaults to 1)
+ * @param storeDefs - Store definition(s) from docstore.define() - can be single or array
+ * @param options - version number (defaults to 1)
  * @returns Promise resolving to the opened database
  */
-export async function install<S extends ShapeWithStorageRef>(
+export async function install(
   dbName: string,
-  storeDef: StoreDef<S>,
-  options: {version?: number; primaryKey?: string} = {},
+  storeDefs: AnyStoreDef | AnyStoreDef[],
+  options: {version?: number} = {},
 ): Promise<IDBPDatabase> {
-  const {version = 1, primaryKey = 'id'} = options
+  const {version = 1} = options
+
+  // Normalize to array
+  const stores = Array.isArray(storeDefs) ? storeDefs : [storeDefs]
+
+  // Collect all store names needed by all storeDefs
+  const allStoreNames = new Set<string>()
+  for (const storeDef of stores) {
+    allStoreNames.add(storeDef.name)
+    for (const group of storeDef.indexStoreGroups) {
+      allStoreNames.add(group.storeName)
+    }
+  }
 
   const db = await openDB(dbName, version, {
     upgrade(db, oldVersion, _newVersion, _tx) {
-      // On version upgrade, delete and recreate all stores to handle schema changes
-      // In production, you'd want proper migrations, but for dev this is simpler
+      // On version upgrade, delete stores that we manage
       if (oldVersion > 0) {
-        // Delete all existing stores
         for (const name of db.objectStoreNames) {
-          db.deleteObjectStore(name)
+          if (allStoreNames.has(name)) {
+            db.deleteObjectStore(name)
+          }
         }
       }
 
-      // Create primary store
-      const primaryStore = db.createObjectStore(storeDef.name, {keyPath: primaryKey})
+      // Create all stores for all storeDefs
+      for (const storeDef of stores) {
+        const primaryKey = storeDef.primaryKey
+
+        // Create primary store if it doesn't exist
+        if (!db.objectStoreNames.contains(storeDef.name)) {
+          const primaryStore = db.createObjectStore(storeDef.name, {keyPath: primaryKey})
 
-      // Create native indexes on primary store
-      for (const idx of storeDef.nativeIndexes) {
-        const keyPath = idx.keys.length === 1 ? idx.keys[0] : idx.keys
-        primaryStore.createIndex(idx.name, keyPath as string | string[], {
-          unique: false,
-          multiEntry: false,
-        })
-      }
+          // Create native indexes on primary store
+          for (const idx of storeDef.nativeIndexes) {
+            const keyPath = idx.keys.length === 1 ? idx.keys[0] : idx.keys
+            primaryStore.createIndex(idx.name, keyPath as string | string[], {
+              unique: false,
+              multiEntry: false,
+            })
+          }
+        }
 
-      // Create denormalized index stores
-      for (const group of storeDef.indexStoreGroups) {
-        // Index stores use auto-increment key since rows are denormalized
-        // We also store _docId to join back to primary
-        const indexStore = db.createObjectStore(group.storeName, {
-          keyPath: null,
-          autoIncrement: true,
-        })
+        // Create denormalized index stores
+        for (const group of storeDef.indexStoreGroups) {
+          if (!db.objectStoreNames.contains(group.storeName)) {
+            // Index stores use compound key [_docId, _rowId] for:
+            // 1. Efficient key-only cursor scans (cursor.primaryKey[0] = docId)
+            // 2. Unique row identification within denormalized data
+            const indexStore = db.createObjectStore(group.storeName, {
+              keyPath: ['_docId', '_rowId'],
+            })
 
-        // Create an index on _docId for efficient deletion on update
-        indexStore.createIndex('_docId', '_docId', {unique: false})
+            // Create an index on _docId for efficient deletion on update
+            indexStore.createIndex('_docId', '_docId', {unique: false})
 
-        // Create indexes for each index definition in this group
-        for (const idx of group.indexes) {
-          // Convert logical keys to storage-safe keys for IDB keyPath
-          const storageKeys = idx.keys.map((k) => toStorageKey(k as string))
-          const keyPath = storageKeys.length === 1 ? storageKeys[0] : storageKeys
-          indexStore.createIndex(idx.name, keyPath, {
-            unique: false,
-            multiEntry: false, // We handle multi-entry via denormalization
-          })
+            // Create indexes for each index definition in this group
+            for (const idx of group.indexes) {
+              // Convert logical keys to storage-safe keys for IDB keyPath
+              const storageKeys = idx.keys.map((k) => toStorageKey(k as string))
+              const keyPath = storageKeys.length === 1 ? storageKeys[0] : storageKeys
+              indexStore.createIndex(idx.name, keyPath, {
+                unique: false,
+                multiEntry: false, // We handle multi-entry via denormalization
+              })
+            }
+          }
         }
       }
 
-      // Create _stats store for query planning statistics
-      db.createObjectStore('_stats', {keyPath: 'id'})
+      // Create _stats store for query planning statistics (shared across all stores)
+      if (!db.objectStoreNames.contains('_stats')) {
+        db.createObjectStore('_stats', {keyPath: 'id'})
+      }
     },
   })
 
···
   db: IDBPDatabase,
   storeDef: StoreDef<S>,
   doc: InferShapeWithStorageRef<S>,
+  statsManager?: StatsManager,
   options: {primaryKey?: string} = {},
 ): Promise<void> {
   const {primaryKey = 'id'} = options
   const docId = (doc as Record<string, unknown>)[primaryKey] as IDBValidKey
 
   // Get all store names we need to write to
-  const storeNames = [storeDef.name, ...storeDef.indexStoreGroups.map((g) => g.storeName)]
+  const storeNames = [
+    storeDef.name,
+    ...storeDef.indexStoreGroups.map((g) => g.storeName),
+    ...(statsManager ? ['_stats'] : []),
+  ]
 
   const tx = db.transaction(storeNames, 'readwrite')
 
···
   const primaryStore = tx.objectStore(storeDef.name)
   await primaryStore.put(doc as Record<string, unknown>)
 
+  // Collect stats data per store
+  const statsByStore = new Map<string, Record<string, unknown>[]>()
+
+  if (statsManager) {
+    // Collect primary store stats - extract non-array keys from schema
+    const docRecord = doc as Record<string, unknown>
+    const primaryStats: Record<string, unknown> = {}
+    for (const key of Object.keys(storeDef.schema)) {
+      if (key in docRecord && !Array.isArray(docRecord[key])) {
+        primaryStats[key] = docRecord[key]
+      }
+    }
+    statsByStore.set(storeDef.name, [primaryStats])
+  }
+
   // Delete old index rows and write new ones for each index store group
   for (const group of storeDef.indexStoreGroups) {
     const indexStore = tx.objectStore(group.storeName)
     const docIdIndex = indexStore.index('_docId')
 
-    // Delete existing rows for this document
-    let cursor = await docIdIndex.openCursor(IDBKeyRange.only(docId))
+    // Delete existing rows for this document using key cursor (no value deserialization)
+    let cursor = await docIdIndex.openKeyCursor(IDBKeyRange.only(docId))
     while (cursor) {
-      await cursor.delete()
+      await indexStore.delete(cursor.primaryKey)
       cursor = await cursor.continue()
     }
 
···
     const result = ingest(storeDef, doc)
     const rows = result.byStore.get(group.storeName) ?? []
 
-    // Write new index rows
+    // Collect index store stats
+    const indexStatsRecords: Record<string, unknown>[] = []
+
+    // Write new index rows with unique _rowId for compound primary key
     for (const row of rows) {
-      await indexStore.add({...row, _docId: docId})
+      await indexStore.add({...row, _docId: docId, _rowId: crypto.randomUUID()})
+      if (statsManager) {
+        // Convert storage keys back to logical keys for stats
+        indexStatsRecords.push(rowFromStorage(row, group.allKeys))
+      }
+    }
+
+    if (statsManager && indexStatsRecords.length > 0) {
+      statsByStore.set(group.storeName, indexStatsRecords)
+    }
+  }
+
+  // Update stats per store in the same transaction
+  if (statsManager && statsByStore.size > 0) {
+    for (const [storeId, records] of statsByStore) {
+      await statsManager.recordWriteBatch(
+        storeId,
+        records,
+        tx as IDBPTransaction<unknown, string[], 'readwrite'>,
+      )
+    }
+  }
+
+  await tx.done
+}
+
+/**
+ * Put multiple documents into the store in a single transaction.
+ * More efficient than multiple put() calls - one transaction, one stats update.
+ *
+ * @param db - Database instance from install()
+ * @param storeDef - Store definition
+ * @param docs - Documents to store
+ * @param statsManager - Stats manager to update (optional)
+ * @param options - Optional settings
+ */
+export async function putMany<S extends ShapeWithStorageRef>(
+  db: IDBPDatabase,
+  storeDef: StoreDef<S>,
+  docs: InferShapeWithStorageRef<S>[],
+  statsManager?: StatsManager,
+  options: {primaryKey?: string} = {},
+): Promise<void> {
+  if (docs.length === 0) return
+
+  const {primaryKey = 'id'} = options
+
+  // Get all store names we need to write to
+  const storeNames = [
+    storeDef.name,
+    ...storeDef.indexStoreGroups.map((g) => g.storeName),
+    ...(statsManager ? ['_stats'] : []),
+  ]
+
+  const tx = db.transaction(storeNames, 'readwrite')
+  const primaryStore = tx.objectStore(storeDef.name)
+
+  // Collect stats data per store
+  const statsByStore = new Map<string, Record<string, unknown>[]>()
+
+  for (const doc of docs) {
+    const docId = (doc as Record<string, unknown>)[primaryKey] as IDBValidKey
+
+    // Write to primary store
+    await primaryStore.put(doc as Record<string, unknown>)
+
+    // Collect primary store stats - extract keys that exist in schema
+    if (statsManager) {
+      const docRecord = doc as Record<string, unknown>
+      const primaryStats: Record<string, unknown> = {}
+      for (const key of Object.keys(storeDef.schema)) {
+        if (key in docRecord && !Array.isArray(docRecord[key])) {
+          primaryStats[key] = docRecord[key]
+        }
+      }
+      const existing = statsByStore.get(storeDef.name) ?? []
+      existing.push(primaryStats)
+      statsByStore.set(storeDef.name, existing)
+    }
+
+    // Delete old index rows and write new ones for each index store group
+    for (const group of storeDef.indexStoreGroups) {
+      const indexStore = tx.objectStore(group.storeName)
+      const docIdIndex = indexStore.index('_docId')
+
+      // Delete existing rows for this document using key cursor (no value deserialization)
+      let cursor = await docIdIndex.openKeyCursor(IDBKeyRange.only(docId))
+      while (cursor) {
+        await indexStore.delete(cursor.primaryKey)
+        cursor = await cursor.continue()
+      }
+
+      // Ingest document to get new index rows
+      const result = ingest(storeDef, doc)
+      const rows = result.byStore.get(group.storeName) ?? []
+
+      // Write new index rows with unique _rowId for compound primary key
+      for (const row of rows) {
+        await indexStore.add({...row, _docId: docId, _rowId: crypto.randomUUID()})
+        if (statsManager) {
+          // Convert storage keys back to logical keys for stats, collect per index store
+          const existing = statsByStore.get(group.storeName) ?? []
+          existing.push(rowFromStorage(row, group.allKeys))
+          statsByStore.set(group.storeName, existing)
+        }
+      }
+    }
+  }
+
+  // Update stats per store once at the end
+  if (statsManager && statsByStore.size > 0) {
+    for (const [storeId, records] of statsByStore) {
+      await statsManager.recordWriteBatch(
+        storeId,
+        records,
+        tx as IDBPTransaction<unknown, string[], 'readwrite'>,
+      )
     }
   }
 
···
   // Delete from primary store
   await tx.objectStore(storeDef.name).delete(key)
 
-  // Delete from index stores
+  // Delete from index stores using key cursor (no value deserialization)
   for (const group of storeDef.indexStoreGroups) {
     const indexStore = tx.objectStore(group.storeName)
     const docIdIndex = indexStore.index('_docId')
 
-    let cursor = await docIdIndex.openCursor(IDBKeyRange.only(key))
+    let cursor = await docIdIndex.openKeyCursor(IDBKeyRange.only(key))
     while (cursor) {
-      await cursor.delete()
+      await indexStore.delete(cursor.primaryKey)
       cursor = await cursor.continue()
     }
   }
···
   await tx.done
 }
 
+// =============================================================================
+// Index value aggregation (tag clouds, facets)
+// =============================================================================
+
 /**
- * Check if a row matches all filter clauses.
- * Handles both logical keys and storage keys, including spread keys for primary store rows.
+ * Result from collecting index values - a value and its count.
+ */
+export interface ValueCount<T = unknown> {
+  value: T
+  count: number
+}
+
+/**
+ * Options for collectIndexValues.
+ */
+export interface CollectValuesOptions extends ExecutionOptions {
+  /**
+   * If true, count unique documents rather than index rows.
+   * For spread indexes, the same document may appear multiple times with different values.
+   * Default: false (count all rows)
+   */
+  countDocuments?: boolean
+
+  /**
+   * Maximum number of distinct values to return.
+   * Results are sorted by count descending, so this returns the top N.
+   * Default: no limit
+   */
+  limit?: number
+
+  /**
+   * Minimum count to include in results.
+   * Useful for filtering out rare values.
+   * Default: 1 (include all)
+   */
+  minCount?: number
+
+  /**
+   * Key range to filter the scan (optional).
+   * Applied to the first key of the index.
+   */
+  keyRange?: KeyRangeSpec
+}
+
+/**
+ * Collect distinct values from an index with their counts.
+ * Useful for building tag clouds, faceted search, or analyzing value distributions.
+ *
+ * Uses key-only cursors when possible (countDocuments=false) for ~10x faster iteration.
+ * The value is extracted directly from the index key, avoiding row deserialization.
+ *
+ * @param ctx - Execution context with db and storeDef
+ * @param indexName - Name of the index to scan (must be defined on the store)
+ * @param keyToCollect - The logical key to collect values for (e.g., '...tags.tag')
+ * @param options - Collection options
+ * @returns Array of {value, count} sorted by count descending
+ *
+ * @example
+ * // Get all tag names with counts (tag cloud)
+ * const tagCounts = await collectIndexValues(ctx, 'by_tag_only', '...tags.tag')
+ * // => [{value: 'category', count: 150}, {value: 'author', count: 45}, ...]
+ *
+ * @example
+ * // Get top 10 categories with at least 5 occurrences
+ * const topCategories = await collectIndexValues(ctx, 'by_tag', '...tags.value', {
+ *   keyRange: {type: 'only', lower: 'category'},  // filter to tag='category'
+ *   limit: 10,
+ *   minCount: 5
+ * })
  */
-function matchesFilters(row: Record<string, unknown>, filters: WhereClause[], analyze: boolean): boolean {
-  const filterOpenTime = performance.now()
-  try {
-  for (const filter of filters) {
-    // Try storage key first (for index store rows), then logical key (for primary store)
-    const storageKey = toStorageKey(filter.key)
-    let value = row[storageKey] ?? row[filter.key]
+export async function collectIndexValues<S extends ShapeWithStorageRef>(
+  ctx: ExecutionContext & {storeDef: StoreDef<S>},
+  indexName: string,
+  keyToCollect: string,
+  options: CollectValuesOptions = {},
+): Promise<ValueCount[]> {
+  const {countDocuments = false, limit, minCount = 1, keyRange, analyze = false} = options
+  const startTime = analyze ? performance.now() : 0
 
-    // If value is still undefined and this is a spread key, we need to check inside arrays
-    // e.g., for '...tags.tag' on a primary store row, check if any tag.tag matches
-    if (value === undefined && filter.key.startsWith('...')) {
-      const path = filter.key.slice(3).split('.')
-      // path[0] is the array field, rest is the path within each element
-      const arrayField = path[0]
-      const remainderPath = path.slice(1)
-      const array = row[arrayField]
+  // Find the index definition
+  const indexDef = ctx.storeDef.indexes.find((idx) => idx.name === indexName)
+  if (!indexDef) {
+    throw new Error(`Index '${indexName}' not found on store '${ctx.storeDef.name}'`)
+  }
 
-      if (Array.isArray(array)) {
-        // Check if ANY element in the array matches the filter
-        const anyMatch = array.some((element) => {
-          const elementValue = remainderPath.length > 0 ? getPath(element, remainderPath) : element
-          return matchesOp(elementValue, filter.op, filter.value)
-        })
-        if (!anyMatch) {
-          return false
+  // Find which position in the index key corresponds to our target key
+  const keyIndex = indexDef.keys.findIndex((k) => k === keyToCollect)
+  if (keyIndex === -1) {
+    throw new Error(
+      `Key '${keyToCollect}' not found in index '${indexName}' keys: [${indexDef.keys.join(', ')}]`,
+    )
+  }
+
+  // Determine which store to scan
+  let storeName: string
+  if (indexDef.spreadRoots.size === 0) {
+    // Native index on primary store
+    storeName = ctx.storeDef.name
+  } else {
+    // Find the index store group
+    const group = ctx.storeDef.indexStoreGroups.find((g) => g.indexes.some((idx) => idx.name === indexName))
+    if (!group) {
+      throw new Error(`Index store group not found for index '${indexName}'`)
+    }
+    storeName = group.storeName
+  }
+
+  const isCompoundKey = indexDef.keys.length > 1
+
+  if (analyze) {
+    console.debug(
+      `${ANALYZE_PREFIX} collectIndexValues() started - index: ${indexName}, key: ${keyToCollect}[${keyIndex}], store: ${storeName}, compound: ${isCompoundKey}, countDocs: ${countDocuments}`,
+    )
+  }
+
+  const tx = ctx.db.transaction(storeName, 'readonly')
+  const store = tx.objectStore(storeName)
+  const index = store.index(indexName)
+
+  // Build IDB key range if specified
+  const idbKeyRange = keyRange ? toIDBKeyRange(keyRange) : null
+
+  // Aggregate counts
+  const valueCounts = new Map<unknown, number>()
+  const valueDocIds = countDocuments ? new Map<unknown, Set<IDBValidKey>>() : null
+
+  let scanned = 0
+
+  // Use getAll() for batch retrieval - single IDB call is much faster than cursor iteration.
+  // Benchmarks show getAll() is ~5-6x faster than openKeyCursor iteration (120ms vs 670ms for 15k rows).
+  // NOTE: IDBIndex.getAllKeys() returns PRIMARY keys, not index keys!
+  // So we use getAll() to get the row values, then extract the indexed field.
+  // The indexed field is stored in the row with a storage-safe key name.
+  const storageKey = toStorageKey(keyToCollect)
+
+  if (!countDocuments) {
+    const fetchStart = analyze ? performance.now() : 0
+    const allRows = await index.getAll(idbKeyRange ?? undefined)
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} getAll() fetched ${allRows.length} rows in ${(performance.now() - fetchStart).toFixed(2)}ms`,
+      )
+    }
+
+    scanned = allRows.length
+    const aggStart = analyze ? performance.now() : 0
+
+    // Aggregate in JS - extract the indexed field value from each row
+    for (const row of allRows) {
+      const value = (row as Record<string, unknown>)[storageKey]
+      if (value !== undefined && value !== null) {
+        valueCounts.set(value, (valueCounts.get(value) ?? 0) + 1)
+      }
+    }
+
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} JS aggregation of ${scanned} rows took ${(performance.now() - aggStart).toFixed(2)}ms`,
+      )
+    }
+  } else {
+    // For countDocuments, we need both value and docId from each row
+    // Use getAll() which is much faster than cursor iteration
+    const fetchStart = analyze ? performance.now() : 0
+    const allRows = await index.getAll(idbKeyRange ?? undefined)
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} getAll() fetched ${allRows.length} rows in ${(performance.now() - fetchStart).toFixed(2)}ms`,
+      )
+    }
+
+    scanned = allRows.length
+    const aggStart = analyze ? performance.now() : 0
+
+    // Aggregate by value, tracking unique docIds
+    for (const row of allRows) {
+      const rowObj = row as Record<string, unknown>
+      const value = rowObj[storageKey]
+      const docId = rowObj['_docId'] as IDBValidKey
+
+      if (value !== undefined && value !== null && valueDocIds) {
+        if (!valueDocIds.has(value)) {
+          valueDocIds.set(value, new Set())
         }
-        continue // This filter passed, check next
+        valueDocIds.get(value)!.add(docId)
       }
     }
 
-    if (!matchesOp(value, filter.op, filter.value)) {
-      return false
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} JS aggregation of ${scanned} rows took ${(performance.now() - aggStart).toFixed(2)}ms`,
+      )
+    }
+
+    // Convert docId sets to counts
+    for (const [value, docIds] of valueDocIds!) {
+      valueCounts.set(value, docIds.size)
+    }
+  }
+
+  // Convert to array and filter by minCount
+  let results: ValueCount[] = []
+  for (const [value, count] of valueCounts) {
+    if (count >= minCount) {
+      results.push({value, count})
     }
   }
-  return true
+
+  // Sort by count descending
+  results.sort((a, b) => b.count - a.count)
+
+  // Apply limit
+  if (limit !== undefined && results.length > limit) {
+    results = results.slice(0, limit)
+  }
+
+  if (analyze) {
+    const totalTime = performance.now() - startTime
+    console.debug(
+      `${ANALYZE_PREFIX} collectIndexValues() complete - scanned: ${scanned}, distinct: ${results.length}, time: ${totalTime.toFixed(2)}ms`,
+    )
+  }
+
+  return results
 }
-  finally {
+
+/**
+ * Result from collecting key pairs (for compound indexes).
+ */
+export interface KeyPairCount<K1 = unknown, K2 = unknown> {
+  key1: K1
+  key2: K2
+  count: number
+}
+
+/**
+ * Options for collectKeyPairs.
+ */
+export interface CollectKeyPairsOptions extends ExecutionOptions {
+  /**
+   * If true, count unique documents rather than index rows.
+   * Default: false
+   */
+  countDocuments?: boolean
+
+  /**
+   * Maximum number of pairs to return.
+   * Results are sorted by count descending.
+   */
+  limit?: number
+
+  /**
+   * Minimum count to include.
+   */
+  minCount?: number
+
+  /**
+   * Filter to a specific value for key1.
+   */
+  key1Value?: unknown
+}
+
+/**
+ * Collect key pairs from a compound index with counts.
+ * Useful for tag:value pairs, or any two-dimensional aggregation.
+ *
+ * Uses key-only cursors when possible (countDocuments=false) for ~10x faster iteration.
+ * Values are extracted directly from the compound index key.
+ *
+ * @param ctx - Execution context
+ * @param indexName - Name of a compound index with at least 2 keys
+ * @param options - Collection options
+ * @returns Array of {key1, key2, count} sorted by count descending
+ *
+ * @example
+ * // Get all tag:value pairs with counts
+ * const pairs = await collectKeyPairs(ctx, 'by_tag')
+ * // => [{key1: 'category', key2: 'Technology', count: 50}, ...]
+ *
+ * @example
+ * // Get values for a specific tag
+ * const categoryValues = await collectKeyPairs(ctx, 'by_tag', {
+ *   key1Value: 'category',
+ *   limit: 20
+ * })
+ */
+export async function collectKeyPairs<S extends ShapeWithStorageRef>(
+  ctx: ExecutionContext & {storeDef: StoreDef<S>},
+  indexName: string,
+  options: CollectKeyPairsOptions = {},
+): Promise<KeyPairCount[]> {
+  const {countDocuments = false, limit, minCount = 1, key1Value, analyze = false} = options
+  const startTime = analyze ? performance.now() : 0
+
+  // Find the index definition
+  const indexDef = ctx.storeDef.indexes.find((idx) => idx.name === indexName)
+  if (!indexDef) {
+    throw new Error(`Index '${indexName}' not found on store '${ctx.storeDef.name}'`)
+  }
+  if (indexDef.keys.length < 2) {
+    throw new Error(`Index '${indexName}' must have at least 2 keys for collectKeyPairs`)
+  }
+
+  // Determine store
+  let storeName: string
+  if (indexDef.spreadRoots.size === 0) {
+    storeName = ctx.storeDef.name
+  } else {
+    const group = ctx.storeDef.indexStoreGroups.find((g) => g.indexes.some((idx) => idx.name === indexName))
+    if (!group) {
+      throw new Error(`Index store group not found for index '${indexName}'`)
+    }
+    storeName = group.storeName
+  }
+
+  const key1Logical = indexDef.keys[0] as string
+  const key2Logical = indexDef.keys[1] as string
+
+  if (analyze) {
+    console.debug(
+      `${ANALYZE_PREFIX} collectKeyPairs() started - index: ${indexName}, keys: [${key1Logical}, ${key2Logical}], countDocs: ${countDocuments}`,
+    )
+  }
+
+  const tx = ctx.db.transaction(storeName, 'readonly')
+  const store = tx.objectStore(storeName)
+  const index = store.index(indexName)
+
+  // Build key range if filtering by key1
+  const idbKeyRange = key1Value !== undefined ? IDBKeyRange.bound([key1Value], [key1Value, []]) : null
+
+  // Aggregate counts - use composite key for the map
+  const pairCounts = new Map<string, {key1: unknown; key2: unknown; count: number}>()
+  const pairDocIds = countDocuments
+    ? new Map<string, {key1: unknown; key2: unknown; docIds: Set<IDBValidKey>}>()
+    : null
+
+  let scanned = 0
+
+  // Use getAll() for batch retrieval - single IDB call is much faster than cursor iteration.
+  // NOTE: IDBIndex.getAllKeys() returns PRIMARY keys, not index keys!
+  // So we use getAll() to get the row values, then extract the indexed fields.
+  const storageKey1 = toStorageKey(key1Logical)
+  const storageKey2 = toStorageKey(key2Logical)
+
+  if (!countDocuments) {
+    const fetchStart = analyze ? performance.now() : 0
+    const allRows = await index.getAll(idbKeyRange ?? undefined)
     if (analyze) {
-      const filterMatchTime = performance.now() - filterOpenTime
-      console.debug(`${ANALYZE_PREFIX} filter matched in ${filterMatchTime.toFixed(2)}ms`)
+      console.debug(
+        `${ANALYZE_PREFIX} getAll() fetched ${allRows.length} rows in ${(performance.now() - fetchStart).toFixed(2)}ms`,
+      )
+    }
+
+    scanned = allRows.length
+    const aggStart = analyze ? performance.now() : 0
+
+    // Aggregate in JS - extract the indexed field values from each row
+    for (const row of allRows) {
+      const rowObj = row as Record<string, unknown>
+      const k1 = rowObj[storageKey1]
+      const k2 = rowObj[storageKey2]
+
+      if (k1 !== undefined && k1 !== null && k2 !== undefined && k2 !== null) {
+        const pairKey = JSON.stringify([k1, k2])
+        if (!pairCounts.has(pairKey)) {
+          pairCounts.set(pairKey, {key1: k1, key2: k2, count: 0})
+        }
+        pairCounts.get(pairKey)!.count++
+      }
+    }
+
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} JS aggregation of ${scanned} rows took ${(performance.now() - aggStart).toFixed(2)}ms`,
+      )
+    }
+  } else {
+    // For countDocuments, we need both values and docId from each row
+    // Use getAll() which is much faster than cursor iteration
+    const fetchStart = analyze ? performance.now() : 0
+    const allRows = await index.getAll(idbKeyRange ?? undefined)
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} getAll() fetched ${allRows.length} rows in ${(performance.now() - fetchStart).toFixed(2)}ms`,
+      )
+    }
+
+    scanned = allRows.length
+    const aggStart = analyze ? performance.now() : 0
+
+    // Aggregate by key pair, tracking unique docIds
+    for (const row of allRows) {
+      const rowObj = row as Record<string, unknown>
+      const k1 = rowObj[storageKey1]
+      const k2 = rowObj[storageKey2]
+      const docId = rowObj['_docId'] as IDBValidKey
+
+      if (k1 !== undefined && k1 !== null && k2 !== undefined && k2 !== null && pairDocIds) {
+        const pairKey = JSON.stringify([k1, k2])
+
+        if (!pairDocIds.has(pairKey)) {
+          pairDocIds.set(pairKey, {key1: k1, key2: k2, docIds: new Set()})
+        }
+        pairDocIds.get(pairKey)!.docIds.add(docId)
+      }
+    }
+
+    if (analyze) {
+      console.debug(
+        `${ANALYZE_PREFIX} JS aggregation of ${scanned} rows took ${(performance.now() - aggStart).toFixed(2)}ms`,
+      )
+    }
+
+    // Convert docId sets to counts
+    for (const [pairKey, {key1, key2, docIds}] of pairDocIds!) {
+      pairCounts.set(pairKey, {key1, key2, count: docIds.size})
     }
   }
+
+  // Convert to array and filter
+  let results: KeyPairCount[] = []
+  for (const {key1, key2, count} of pairCounts.values()) {
+    if (count >= minCount) {
+      results.push({key1, key2, count})
+    }
+  }
+
+  // Sort by count descending
+  results.sort((a, b) => b.count - a.count)
+
+  // Apply limit
+  if (limit !== undefined && results.length > limit) {
+    results = results.slice(0, limit)
+  }
+
+  if (analyze) {
+    const totalTime = performance.now() - startTime
+    console.debug(
+      `${ANALYZE_PREFIX} collectKeyPairs() complete - scanned: ${scanned}, pairs: ${results.length}, time: ${totalTime.toFixed(2)}ms`,
+    )
+  }
+
+  return results
+}
+
+/**
+ * Check if a row matches all filter clauses.
+ * Handles both logical keys and storage keys, including spread keys for primary store rows.
+ */
+function matchesFilters(row: Record<string, unknown>, filters: WhereClause[], analyze: boolean): boolean {
+    for (const filter of filters) {
+      // Try storage key first (for index store rows), then logical key (for primary store)
+      const storageKey = toStorageKey(filter.key)
+      let value = row[storageKey] ?? row[filter.key]
+
+      // If value is still undefined and this is a spread key, we need to check inside arrays
+      // e.g., for '...tags.tag' on a primary store row, check if any tag.tag matches
+      if (value === undefined && filter.key.startsWith('...')) {
+        const path = filter.key.slice(3).split('.')
+        // path[0] is the array field, rest is the path within each element
+        const arrayField = path[0]
+        const remainderPath = path.slice(1)
+        const array = row[arrayField]
+
+        if (Array.isArray(array)) {
+          // Check if ANY element in the array matches the filter
+          const anyMatch = array.some((element) => {
+            const elementValue = remainderPath.length > 0 ? getPath(element, remainderPath) : element
+            return matchesOp(elementValue, filter.op, filter.value)
+          })
+          if (!anyMatch) {
+            return false
+          }
+          continue // This filter passed, check next
+        }
+      }
+
+      if (!matchesOp(value, filter.op, filter.value)) {
+        return false
+      }
+    }
+    return true
 }
 
 /**
···
       return (value as number) > (target as number)
     case '>=':
       return (value as number) >= (target as number)
+    case 'in':
+      return Array.isArray(target) && target.includes(value)
     default:
       return false
   }
···
   // IDB operations
   install,
   put,
+  putMany,
   get,
   del,
+  // Aggregation
+  collectIndexValues,
+  collectKeyPairs,
 }
 
 export type {

src/main-old.ts

···
+import './style.css'
+import {z} from 'zod/mini'
+import {
+  docstore,
+  ingest,
+  QueryPlanner,
+  StatsManager,
+  rows,
+  count,
+  docs,
+  collect,
+  putMany,
+  type IDBPDatabase,
+  type Infer,
+  type QuerySpec,
+  type QueryPlan,
+} from './lib/docstore'
+
+// =============================================================================
+// Define our store schema
+// =============================================================================
+
+const entriesStore = docstore.define('entries', {
+  schema: {
+    id: z.string(),
+    feedId: z.string(),
+    title: z.string(),
+    publishedAt: z.date(),
+    status: z.enum(['draft', 'published', 'archived']),
+    tags: z.array(z.object({tag: z.string(), score: z.number()})),
+    // Second spread array for stress testing cross-spread queries
+    categories: z.array(z.object({name: z.string(), priority: z.number()})),
+    authorId: z.string(),
+  },
+  indexes: (idx) => [
+    // Native indexes on primary store
+    idx('by_feed_date').on('feedId', 'publishedAt'),
+    idx('by_status').on('status'),
+    idx('by_author_date').on('authorId', 'publishedAt'),
+    // Denormalized indexes (spread over tags)
+    idx('by_tag').on('...tags.tag').replicate('title', 'publishedAt'),
+    idx('by_tag_score').on('...tags.tag', '...tags.score'),
+    idx('by_feed_tag').on('feedId', '...tags.tag').replicate('title'),
+    // Denormalized indexes (spread over categories) - second spread root
+    idx('by_category').on('...categories.name').replicate('title', 'publishedAt'),
+    idx('by_category_priority').on('...categories.name', '...categories.priority'),
+    // Combined spread index (cartesian product of tags × categories)
+    idx('by_tag_category').on('...tags.tag', '...categories.name'),
+  ],
+})
+
+type Entry = Infer<typeof entriesStore.schema>
+
+// =============================================================================
+// Global state
+// =============================================================================
+
+let db: IDBPDatabase
+let statsManager: StatsManager
+let planner: QueryPlanner<typeof entriesStore.schema>
+let nextEntryId = 0
+let entryCount = 0
+
+// =============================================================================
+// Generate sample data
+// =============================================================================
+
+const feeds = ['tech', 'science', 'politics', 'sports', 'entertainment']
+const authors = ['alice', 'bob', 'carol', 'dave', 'eve', 'frank']
+const tagPool = [
+  'javascript',
+  'typescript',
+  'rust',
+  'go',
+  'python',
+  'react',
+  'vue',
+  'svelte',
+  'node',
+  'deno',
+  'ai',
+  'ml',
+  'web',
+  'mobile',
+  'cloud',
+]
+const categoryPool = [
+  'programming',
+  'tutorial',
+  'news',
+  'opinion',
+  'review',
+  'announcement',
+  'deep-dive',
+  'beginner',
+]
+const statuses: ('draft' | 'published' | 'archived')[] = ['draft', 'published', 'archived']
+
+function randomTags(): {tag: string; score: number}[] {
+  const count = Math.floor(Math.random() * 4) + 1
+  const shuffled = [...tagPool].sort(() => Math.random() - 0.5)
+  return shuffled.slice(0, count).map((tag) => ({
+    tag,
+    score: Math.floor(Math.random() * 100),
+  }))
+}
+
+function randomCategories(): {name: string; priority: number}[] {
+  // Sometimes return empty array to test edge case
+  if (Math.random() < 0.1) return []
+  const count = Math.floor(Math.random() * 3) + 1
+  const shuffled = [...categoryPool].sort(() => Math.random() - 0.5)
+  return shuffled.slice(0, count).map((name) => ({
+    name,
+    priority: Math.floor(Math.random() * 10) + 1,
+  }))
+}
+
+function generateEntry(): Entry {
+  const now = Date.now()
+  const id = nextEntryId++
+  return {
+    id: `entry-${id}`,
+    feedId: feeds[Math.floor(Math.random() * feeds.length)],
+    title: `Article ${id}: ${tagPool[Math.floor(Math.random() * tagPool.length)]} news`,
+    publishedAt: new Date(now - Math.random() * 30 * 24 * 60 * 60 * 1000),
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+    tags: randomTags(),
+    categories: randomCategories(),
+    authorId: authors[Math.floor(Math.random() * authors.length)],
+  }
+}
+
+async function addEntries(count: number) {
+  const entries: Entry[] = []
+  for (let i = 0; i < count; i++) {
+    entries.push(generateEntry())
+  }
+
+  // Batch insert with stats update
+  await putMany(db, entriesStore, entries, statsManager)
+  entryCount += count
+}
+
+// =============================================================================
+// Query execution using real IDB
+// =============================================================================
+
+async function executeQuery(plan: QueryPlan, spec: QuerySpec): Promise<Record<string, unknown>[]> {
+  const ctx = {
+    db,
+    storeDef: entriesStore as any, // ExecutionContext expects generic StoreDef
+  }
+
+  // rows() now handles intersections and sorting automatically
+  const options = {
+    analyze: true,
+    orderBy: spec.orderBy,
+  }
+  const rowGenerator = rows(ctx, plan, options)
+  const results = await collect(rowGenerator, 5)
+  return results as Record<string, unknown>[]
+}
+
+async function executeDocsQuery(plan: QueryPlan): Promise<Entry[]> {
+  const ctx = {
+    db,
+    storeDef: entriesStore as any,
+  }
+
+  const options = {analyze: true}
+  const docGenerator = docs(ctx, plan, options)
+  const results = await collect(docGenerator, 5)
+  return results as Entry[]
+}
+
+async function executeCountQuery(plan: QueryPlan): Promise<number> {
+  const ctx = {
+    db,
+    storeDef: entriesStore as any,
+  }
+
+  const options = {analyze: true}
+  return count(ctx, plan, options)
+}
+
+// =============================================================================
+// Get counts from IDB
+// =============================================================================
+
+async function getStoreCounts(): Promise<Map<string, number>> {
+  const counts = new Map<string, number>()
+
+  // Count primary store
+  const tx = db.transaction(entriesStore.name, 'readonly')
+  const primaryCount = await tx.objectStore(entriesStore.name).count()
+  counts.set(entriesStore.name, primaryCount)
+  await tx.done
+
+  // Count index stores
+  for (const group of entriesStore.indexStoreGroups) {
+    const indexTx = db.transaction(group.storeName, 'readonly')
+    const indexCount = await indexTx.objectStore(group.storeName).count()
+    counts.set(group.storeName, indexCount)
+    await indexTx.done
+  }
+
+  return counts
+}
+
+// =============================================================================
+// Sample queries
+// =============================================================================
+
+const sampleQueries: {name: string; spec: QuerySpec}[] = [
+  {
+    name: 'All entries from tech feed, newest first',
+    spec: {
+      store: 'entries',
+      where: [{key: 'feedId', op: '=', value: 'tech'}],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
+    },
+  },
+  {
+    name: 'Published entries only',
+    spec: {
+      store: 'entries',
+      where: [{key: 'status', op: '=', value: 'published'}],
+    },
+  },
+  {
+    name: 'Entries tagged with "javascript"',
+    spec: {
+      store: 'entries',
+      where: [{key: '...tags.tag', op: '=', value: 'javascript'}],
+    },
+  },
+  {
+    name: 'Tech feed + javascript tag',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'feedId', op: '=', value: 'tech'},
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+      ],
+    },
+  },
+  {
+    name: 'javascript tag AND ai tag (self-join)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'feedId', op: '=', value: 'tech'},
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+        {key: '...tags.tag', op: '=', value: 'ai'},
+      ],
+    },
+  },
+  {
+    name: 'javascript tag OR ai tag (IN query)',
+    spec: {
+      store: 'entries',
+      where: [{key: '...tags.tag', op: 'in', value: ['javascript', 'ai']}],
+    },
+  },
+  {
+    name: 'Entries by alice, recent',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'authorId', op: '=', value: 'alice'},
+        {key: 'publishedAt', op: '>', value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)},
+      ],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
+    },
+  },
+  {
+    name: 'Primary key lookup (by id)',
+    spec: {
+      store: 'entries',
+      where: [{key: 'id', op: '=', value: 'entry-42'}],
+    },
+  },
+  {
+    name: 'Full table scan (filter by title - no index)',
+    spec: {
+      store: 'entries',
+      where: [{key: 'title', op: '=', value: 'Article 1: ai news'}],
+    },
+  },
+  // --- Queries that would benefit from index joins ---
+  {
+    name: 'Published + javascript tag (status index + tag index)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'status', op: '=', value: 'published'},
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+      ],
+    },
+  },
+  {
+    name: 'Alice + typescript tag (author index + tag index)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'authorId', op: '=', value: 'alice'},
+        {key: '...tags.tag', op: '=', value: 'typescript'},
+      ],
+    },
+  },
+  {
+    name: 'Science feed + published status (feed index + status index)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'feedId', op: '=', value: 'science'},
+        {key: 'status', op: '=', value: 'published'},
+      ],
+    },
+  },
+  {
+    name: 'Bob + draft + react tag (3-way join potential)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'authorId', op: '=', value: 'bob'},
+        {key: 'status', op: '=', value: 'draft'},
+        {key: '...tags.tag', op: '=', value: 'react'},
+      ],
+    },
+  },
+  {
+    name: 'High score tags in tech feed (feed+tag index + score filter)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'feedId', op: '=', value: 'tech'},
+        {key: '...tags.tag', op: '=', value: 'ai'},
+        {key: '...tags.score', op: '>=', value: 50},
+      ],
+    },
+  },
+  // ==========================================================================
+  // STRESS TEST: Multiple spread arrays (cross-spread queries)
+  // ==========================================================================
+  {
+    name: 'Category lookup (second spread array)',
+    spec: {
+      store: 'entries',
+      where: [{key: '...categories.name', op: '=', value: 'tutorial'}],
+    },
+  },
+  {
+    name: 'Tag + Category (cross-spread intersection)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+        {key: '...categories.name', op: '=', value: 'tutorial'},
+      ],
+    },
+  },
+  {
+    name: 'Tag + Category via combined index (cartesian)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: '...tags.tag', op: '=', value: 'rust'},
+        {key: '...categories.name', op: '=', value: 'deep-dive'},
+      ],
+    },
+  },
+  // ==========================================================================
+  // STRESS TEST: Same-row vs cross-row semantics on spread fields
+  // ==========================================================================
+  {
+    name: 'Same-row: javascript tag with score > 50 (compound index)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+        {key: '...tags.score', op: '>', value: 50},
+      ],
+    },
+  },
+  {
+    name: 'Same-row: high priority tutorial (compound index)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: '...categories.name', op: '=', value: 'tutorial'},
+        {key: '...categories.priority', op: '>=', value: 8},
+      ],
+    },
+  },
+  // ==========================================================================
+  // STRESS TEST: ORDER BY with intersection (needs in-memory sort)
+  // ==========================================================================
+  {
+    name: 'Published + javascript ORDER BY publishedAt (needs sort)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: 'status', op: '=', value: 'published'},
+        {key: '...tags.tag', op: '=', value: 'javascript'},
+      ],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
+    },
+  },
+  {
+    name: 'Tutorial category ORDER BY publishedAt (index covers order)',
+    spec: {
+      store: 'entries',
+      where: [{key: '...categories.name', op: '=', value: 'tutorial'}],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
+    },
+  },
+  // ==========================================================================
+  // STRESS TEST: Range queries on spread fields
+  // ==========================================================================
+  {
+    name: 'Tags with score between 25-75 (range on spread)',
+    spec: {
+      store: 'entries',
+      where: [
+        {key: '...tags.tag', op: '=', value: 'ai'},
+        {key: '...tags.score', op: '>=', value: 25},
+        {key: '...tags.score', op: '<=', value: 75},
+      ],
+    },
+  },
+  {
+    name: 'High priority categories (range without equality prefix)',
+    spec: {
+      store: 'entries',
+      where: [{key: '...categories.priority', op: '>=', value: 8}],
+    },
+  },
+]
+
+// =============================================================================
+// UI rendering
+// =============================================================================
+
+function formatIntersectionChain(intersection: QueryPlan['intersection']): string {
+  if (!intersection) return ''
+
+  let html = ''
+  let current: QueryPlan['intersection'] = intersection
+  let index = 1
+
+  while (current) {
+    html += `
+      <div class="intersection-step">
+        <strong>${index === 1 ? 'INTERSECT' : 'AND'} with:</strong>
+        <span>Source: ${current.source}</span>
+        <span>Index: ${current.indexName}</span>
+        <span>KeyRange: ${current.keyRange ? JSON.stringify(current.keyRange.lower ?? current.keyRange) : 'none'}</span>
+      </div>
+    `
+    current = current.next
+    index++
+  }
+
+  return html
+}
+
+function formatPlan(plan: QueryPlan, queryId: number): string {
+  const intersectionInfo = plan.intersection
+    ? `
+      <div class="intersection-info">
+        ${formatIntersectionChain(plan.intersection)}
+      </div>
+    `
+    : ''
+
+  return `
+    <div class="plan ${plan.intersection ? 'plan-intersection' : ''}" data-query-id="${queryId}">
+      <div><strong>Source:</strong> ${plan.source}</div>
+      <div><strong>Index:</strong> ${plan.indexName ?? '<full scan>'}</div>
+      <div><strong>Key Range:</strong> ${plan.keyRange ? JSON.stringify(plan.keyRange) : 'none'}</div>
+      <div><strong>Direction:</strong> ${plan.direction}</div>
+      <div><strong>Post-filters:</strong> ${plan.filter.length > 0 ? plan.filter.map((f) => `${f.key} ${f.op} ${f.value}`).join(', ') : 'none'}</div>
+      <div><strong>Needs Sort:</strong> ${plan.needsSort}</div>
+      <div><strong>Available Fields:</strong> ${plan.availableFields.join(', ')}</div>
+      <div><strong>Selectivity:</strong> ${(plan.selectivity * 100).toFixed(2)}%</div>
+      <div><strong>Est. Rows:</strong> ${plan.estimatedRows}</div>
+      ${intersectionInfo}
+    </div>
+    <button class="run-query-btn" data-query-id="${queryId}">Run rows()</button>
+    <button class="run-docs-btn" data-query-id="${queryId}">Run docs()</button>
+    <button class="run-count-btn" data-query-id="${queryId}">Run count()</button>
+    <div class="query-results" id="results-${queryId}"></div>
+  `
+}
+
+async function formatIngestResult(entry: Entry) {
+  const result = ingest(entriesStore, entry)
+  let html = '<div class="ingest-result">'
+
+  for (const [storeName, rows] of result.byStore) {
+    html += `<div class="store-group"><strong>${storeName}</strong> (${rows.length} rows)</div>`
+    html += '<pre>' + JSON.stringify(rows, null, 2) + '</pre>'
+  }
+
+  html += '</div>'
+  return html
+}
+
+async function renderDemo() {
+  // Get a sample entry for display
+  const sampleEntry = await docstore.get(db, entriesStore, 'entry-0')
+
+  const storeCounts = await getStoreCounts()
+
+  let html = `
+    <div class="demo">
+      <h1>DocStore Query Planner Demo</h1>
+      <p class="idb-badge">Using real IndexedDB</p>
+
+      <section class="controls">
+        <button id="add-entries-btn">Add 1000 Entries</button>
+        <button id="clear-db-btn">Clear Database</button>
+        <span id="entry-count">Entries: ${entryCount}</span>
+      </section>
+
+      <section>
+        <h2>Store Definition</h2>
+        <pre>${JSON.stringify(
+          {
+            name: entriesStore.name,
+            nativeIndexes: entriesStore.nativeIndexes.map((i) => ({name: i.name, keys: i.keys})),
+            indexStoreGroups: entriesStore.indexStoreGroups.map((g) => ({
+              storeName: g.storeName,
+              spreadRoots: [...g.spreadRoots],
+              indexes: g.indexes.map((i) => ({name: i.name, keys: i.keys})),
+              allKeys: [...g.allKeys],
+            })),
+          },
+          null,
+          2,
+        )}</pre>
+      </section>
+
+      <section>
+        <h2>Sample Entry Ingestion</h2>
+        <p>Here's how a sample entry gets denormalized into index rows:</p>
+        <pre>${JSON.stringify(
+          sampleEntry,
+          (key, value) => {
+            if (value instanceof Date) return value.toISOString()
+            return value
+          },
+          2,
+        )}</pre>
+        ${sampleEntry ? await formatIngestResult(sampleEntry) : '<p>No entries yet</p>'}
+      </section>
+
+      <section>
+        <h2>Query Plans</h2>
+        <p>Given <strong id="query-entry-count">${entryCount}</strong> entries, here's how queries get planned. Click "Run Query" to see results:</p>
+        <div id="queries-container">
+  `
+
+  for (let i = 0; i < sampleQueries.length; i++) {
+    const {name, spec} = sampleQueries[i]
+    const plan = await planner.plan(spec)
+    html += `
+      <div class="query">
+        <h3>${name}</h3>
+        <pre class="query-spec">${JSON.stringify(spec.where, null, 2)}${spec.orderBy ? '\nORDER BY ' + spec.orderBy.key + ' ' + spec.orderBy.direction.toUpperCase() : ''}</pre>
+        ${formatPlan(plan, i)}
+      </div>
+    `
+  }
+
+  html += `
+        </div>
+      </section>
+
+      <section>
+        <h2>Cardinality Estimates (via HyperLogLog)</h2>
+        <table id="cardinality-table">
+          <tr><th>Field</th><th>Estimated Cardinality</th></tr>
+  `
+
+  // Map fields to their store names (spread fields live in index stores)
+  const fieldToStore: Record<string, string> = {
+    feedId: entriesStore.name,
+    status: entriesStore.name,
+    authorId: entriesStore.name,
+    '...tags.tag': `${entriesStore.name}_idx:tags`,
+    '...tags.score': `${entriesStore.name}_idx:tags`,
+    '...categories.name': `${entriesStore.name}_idx:categories`,
+    '...categories.priority': `${entriesStore.name}_idx:categories`,
+  }
+  for (const [field, storeName] of Object.entries(fieldToStore)) {
+    const card = await statsManager.getCardinality(storeName, field)
+    html += `<tr><td>${field}</td><td>${card}</td></tr>`
+  }
+
+  html += `
+        </table>
+      </section>
+
+      <section>
+        <h2>Index Store Sizes (from IDB)</h2>
+        <table id="index-sizes-table">
+          <tr><th>Store</th><th>Row Count</th></tr>
+  `
+
+  for (const [storeName, count] of storeCounts) {
+    const label = storeName === entriesStore.name ? `primary (${storeName})` : storeName
+    html += `<tr><td>${label}</td><td>${count}</td></tr>`
+  }
+
+  html += `
+        </table>
+      </section>
+    </div>
+  `
+
+  document.querySelector<HTMLDivElement>('#app')!.innerHTML = html
+
+  // Attach event handlers
+  document.getElementById('add-entries-btn')!.onclick = async () => {
+    const btn = document.getElementById('add-entries-btn') as HTMLButtonElement
+    btn.disabled = true
+    btn.textContent = 'Adding...'
+
+    await addEntries(1000)
+    document.getElementById('entry-count')!.textContent = `Entries: ${entryCount}`
+
+    btn.disabled = false
+    btn.textContent = 'Add 1000 Entries'
+
+    await refreshPlans()
+  }
+
+  document.getElementById('clear-db-btn')!.onclick = async () => {
+    // Delete the database and reload
+    db.close()
+    indexedDB.deleteDatabase('docstore-demo')
+    window.location.reload()
+  }
+
+  // Attach run query buttons
+  attachQueryButtons()
+}
+
+function attachQueryButtons() {
+  document.querySelectorAll('.run-query-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const queryId = parseInt((e.target as HTMLElement).dataset.queryId!)
+      const spec = sampleQueries[queryId].spec
+      const plan = await planner.plan(spec)
+
+      const resultsEl = document.getElementById(`results-${queryId}`)!
+      resultsEl.innerHTML = '<div class="loading">Querying IDB (rows)...</div>'
+
+      const results = await executeQuery(plan, spec)
+
+      resultsEl.innerHTML = `
+        <div class="results-header">First 5 rows from IDB (rows):</div>
+        <pre>${JSON.stringify(
+          results,
+          (key, value) => {
+            if (value instanceof Date) return value.toISOString()
+            return value
+          },
+          2,
+        )}</pre>
+      `
+    })
+  })
+
+  document.querySelectorAll('.run-docs-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const queryId = parseInt((e.target as HTMLElement).dataset.queryId!)
+      const spec = sampleQueries[queryId].spec
+      const plan = await planner.plan(spec)
+
+      const resultsEl = document.getElementById(`results-${queryId}`)!
+      resultsEl.innerHTML = '<div class="loading">Querying IDB (docs)...</div>'
+
+      const results = await executeDocsQuery(plan)
+
+      resultsEl.innerHTML = `
+        <div class="results-header">First 5 docs from IDB (full documents):</div>
+        <pre>${JSON.stringify(
+          results,
+          (key, value) => {
+            if (value instanceof Date) return value.toISOString()
+            return value
+          },
+          2,
+        )}</pre>
+      `
+    })
+  })
+
+  document.querySelectorAll('.run-count-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const queryId = parseInt((e.target as HTMLElement).dataset.queryId!)
+      const spec = sampleQueries[queryId].spec
+      const plan = await planner.plan(spec)
+
+      const resultsEl = document.getElementById(`results-${queryId}`)!
+      resultsEl.innerHTML = '<div class="loading">Counting (IDB)...</div>'
+
+      const startTime = performance.now()
+      const result = await executeCountQuery(plan)
+      const elapsed = performance.now() - startTime
+
+      resultsEl.innerHTML = `
+        <div class="results-header">Count result:</div>
+        <pre>Count: ${result}\nTime: ${elapsed.toFixed(2)}ms</pre>
+      `
+    })
+  })
+}
+
+async function refreshPlans() {
+  document.getElementById('query-entry-count')!.textContent = String(entryCount)
+
+  const container = document.getElementById('queries-container')!
+  let html = ''
+
+  for (let i = 0; i < sampleQueries.length; i++) {
+    const {name, spec} = sampleQueries[i]
+    const plan = await planner.plan(spec)
+    html += `
+      <div class="query">
+        <h3>${name}</h3>
+        <pre class="query-spec">${JSON.stringify(spec.where, null, 2)}${spec.orderBy ? '\nORDER BY ' + spec.orderBy.key + ' ' + spec.orderBy.direction.toUpperCase() : ''}</pre>
+        ${formatPlan(plan, i)}
+      </div>
+    `
+  }
+
+  container.innerHTML = html
+  attachQueryButtons()
+
+  // Update cardinality table
+  const cardTable = document.getElementById('cardinality-table')!
+  let cardHtml = '<tr><th>Field</th><th>Estimated Cardinality</th></tr>'
+  const fields = [
+    'feedId',
+    'status',
+    'authorId',
+    '...tags.tag',
+    '...tags.score',
+    '...categories.name',
+    '...categories.priority',
+  ]
+  for (const field of fields) {
+    const card = await statsManager.getCardinality(entriesStore.name, field)
+    cardHtml += `<tr><td>${field}</td><td>${card}</td></tr>`
+  }
+  cardTable.innerHTML = cardHtml
+
+  // Update index sizes table from IDB
+  const storeCounts = await getStoreCounts()
+  const sizesTable = document.getElementById('index-sizes-table')!
+  let sizesHtml = '<tr><th>Store</th><th>Row Count</th></tr>'
+  for (const [storeName, count] of storeCounts) {
+    const label = storeName === entriesStore.name ? `primary (${storeName})` : storeName
+    sizesHtml += `<tr><td>${label}</td><td>${count}</td></tr>`
+  }
+  sizesTable.innerHTML = sizesHtml
+}
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const style = document.createElement('style')
+style.textContent = `
+  :root {
+    color-scheme: dark;
+  }
+
+  body {
+    background: #1a1a1a;
+    color: #e0e0e0;
+    margin: 0;
+  }
+
+  .demo {
+    max-width: 1000px;
+    padding: 20px;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  h1 {
+    border-bottom: 2px solid #555;
+    padding-bottom: 10px;
+  }
+
+  h2 {
+    margin-top: 30px;
+    color: #aaa;
+  }
+
+  h3 {
+    margin-top: 20px;
+    color: #999;
+  }
+
+  pre {
+    background: #2a2a2a;
+    padding: 15px;
+    border-radius: 5px;
+    overflow-x: auto;
+    font-size: 13px;
+    color: #d0d0d0;
+    border: 1px solid #3a3a3a;
+  }
+
+  .idb-badge {
+    display: inline-block;
+    background: #2a5a2a;
+    color: #8f8;
+    padding: 5px 15px;
+    border-radius: 15px;
+    font-size: 14px;
+    margin-bottom: 15px;
+  }
+
+  .controls {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    padding: 15px;
+    background: #252525;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  }
+
+  button {
+    background: #3a5a8a;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  button:hover {
+    background: #4a6a9a;
+  }
+
+  button:disabled {
+    background: #444;
+    cursor: not-allowed;
+  }
+
+  .run-query-btn, .run-docs-btn, .run-count-btn {
+    margin-top: 10px;
+  }
+
+  .run-query-btn {
+    background: #4a7a4a;
+  }
+
+  .run-query-btn:hover {
+    background: #5a8a5a;
+  }
+
+  .run-count-btn {
+    background: #7a4a7a;
+  }
+
+  .run-count-btn:hover {
+    background: #8a5a8a;
+  }
+
+  #clear-db-btn {
+    background: #8a4a4a;
+  }
+
+  #clear-db-btn:hover {
+    background: #9a5a5a;
+  }
+
+  #entry-count {
+    color: #8a8;
+    font-weight: bold;
+  }
+
+  .query {
+    border: 1px solid #444;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 15px 0;
+    background: #222;
+  }
+
+  .query-spec {
+    background: #1e3a4a;
+    border-color: #2a5a6a;
+  }
+
+  .plan {
+    background: #1e2e1e;
+    padding: 15px;
+    border-radius: 5px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    border: 1px solid #2a4a2a;
+  }
+
+  .plan-intersection {
+    background: #2a2e3e;
+    border-color: #3a4a6a;
+  }
+
+  .plan div {
+    font-size: 14px;
+  }
+
+  .intersection-info {
+    grid-column: 1 / -1;
+    background: #3a4a3a;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 8px;
+    border: 1px dashed #5a7a5a;
+  }
+
+  .intersection-step {
+    display: flex;
+    gap: 15px;
+    padding: 5px 0;
+    font-size: 13px;
+    color: #8fa;
+    border-bottom: 1px dotted #4a5a4a;
+  }
+
+  .intersection-step:last-child {
+    border-bottom: none;
+  }
+
+  .intersection-step strong {
+    color: #afa;
+    min-width: 100px;
+  }
+
+  .intersection-details {
+    display: flex;
+    gap: 20px;
+    margin-top: 5px;
+    font-size: 13px;
+    color: #8fa;
+  }
+
+  .query-results {
+    margin-top: 10px;
+  }
+
+  .results-header {
+    color: #8a8;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  .loading {
+    color: #aa8;
+    font-style: italic;
+  }
+
+  .ingest-result {
+    margin-top: 10px;
+  }
+
+  .store-group {
+    margin-top: 10px;
+    padding: 5px;
+    background: #333;
+    border-radius: 3px;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  th, td {
+    border: 1px solid #444;
+    padding: 10px;
+    text-align: left;
+  }
+
+  th {
+    background: #2a2a2a;
+  }
+
+  strong {
+    color: #b0b0b0;
+  }
+`
+document.head.appendChild(style)
+
+// =============================================================================
+// Initialize
+// =============================================================================
+
+async function init() {
+  // Install the schema into IndexedDB
+  // Version 5: added categories array and cross-spread indexes
+  db = await docstore.install('docstore-demo', entriesStore, {version: 5})
+
+  // Create stats manager with idb database
+  statsManager = new StatsManager({db})
+
+  // Create query planner
+  planner = new QueryPlanner(entriesStore, statsManager)
+
+  // Check if we already have data
+  const tx = db.transaction(entriesStore.name, 'readonly')
+  entryCount = await tx.objectStore(entriesStore.name).count()
+  await tx.done
+
+  // If empty, seed with initial entries
+  if (entryCount === 0) {
+    await addEntries(100)
+  } else {
+    // Update nextEntryId to avoid collisions
+    nextEntryId = entryCount
+  }
+
+  // Render the demo
+  await renderDemo()
+}
+
+init().catch(console.error)

src/main.ts

···
 import './style.css'
 import {z} from 'zod/mini'
+import {parseFeed, parseOpml} from 'feedsmith'
 import {
   docstore,
-  ingest,
   QueryPlanner,
   StatsManager,
   rows,
-  rowsIntersect,
+  count,
+  docs,
   collect,
+  putMany,
+  collectIndexValues,
+  collectKeyPairs,
   type IDBPDatabase,
   type Infer,
   type QuerySpec,
   type QueryPlan,
+  type KeyPairCount,
 } from './lib/docstore'
 
 // =============================================================================
-// Define our store schema
+// CORS Proxy configuration
+// =============================================================================
+
+const CORS_PROXY = 'https://corsproxy.io/?'
+
+async function fetchWithCors(url: string): Promise<string> {
+  const proxiedUrl = CORS_PROXY + encodeURIComponent(url)
+  const response = await fetch(proxiedUrl)
+  if (!response.ok) {
+    throw new Error(`Fetch failed for ${url}: ${response.status} ${response.statusText}`)
+  }
+  return response.text()
+}
+
+// =============================================================================
+// Store definitions
 // =============================================================================
 
+const feedsStore = docstore.define('feeds', {
+  schema: {
+    id: z.string(),
+    url: z.string(),
+    title: z.string(),
+    description: z.string(),
+    siteUrl: z.optional(z.string()),
+    imageUrl: z.optional(z.string()),
+    language: z.optional(z.string()),
+    author: z.optional(z.string()),
+    lastFetched: z.date(),
+    lastBuildDate: z.optional(z.date()),
+    ttl: z.optional(z.number()),
+    feedType: z.optional(z.string()),
+    explicit: z.optional(z.boolean()),
+    podcastType: z.optional(z.string()),
+    tags: z.array(
+      z.object({
+        tag: z.string(),
+        value: z.string(),
+      }),
+    ),
+  },
+  indexes: (idx) => [
+    idx('by_url').on('url'),
+    idx('by_last_fetched').on('lastFetched'),
+    idx('by_tag').on('...tags.tag', '...tags.value'),
+    idx('by_tag_only').on('...tags.tag').replicate('title', 'url'),
+  ],
+})
+
 const entriesStore = docstore.define('entries', {
   schema: {
     id: z.string(),
     feedId: z.string(),
+    guid: z.optional(z.string()),
     title: z.string(),
+    link: z.optional(z.string()),
+    content: z.string(),
+    summary: z.optional(z.string()),
     publishedAt: z.date(),
-    status: z.enum(['draft', 'published', 'archived']),
-    tags: z.array(z.object({tag: z.string(), score: z.number()})),
-    authorId: z.string(),
+    updatedAt: z.optional(z.date()),
+    author: z.optional(z.string()),
+    duration: z.optional(z.number()),
+    episodeNumber: z.optional(z.number()),
+    seasonNumber: z.optional(z.number()),
+    episodeType: z.optional(z.string()),
+    explicit: z.optional(z.boolean()),
+    enclosureUrl: z.optional(z.string()),
+    enclosureType: z.optional(z.string()),
+    enclosureLength: z.optional(z.number()),
+    tags: z.array(
+      z.object({
+        tag: z.string(),
+        value: z.string(),
+      }),
+    ),
   },
   indexes: (idx) => [
-    // Native indexes on primary store
     idx('by_feed_date').on('feedId', 'publishedAt'),
-    idx('by_status').on('status'),
-    idx('by_author_date').on('authorId', 'publishedAt'),
-    // Denormalized indexes (spread over tags)
-    idx('by_tag').on('...tags.tag').replicate('title', 'publishedAt'),
-    idx('by_tag_score').on('...tags.tag', '...tags.score'),
-    idx('by_feed_tag').on('feedId', '...tags.tag').replicate('title'),
+    idx('by_published').on('publishedAt'),
+    idx('by_feed').on('feedId').replicate('title', 'publishedAt'),
+    idx('by_tag').on('...tags.tag', '...tags.value').replicate('title', 'publishedAt', 'feedId'),
+    idx('by_feed_tag').on('feedId', '...tags.tag').replicate('title', 'publishedAt'),
+    idx('by_tag_value').on('...tags.tag', '...tags.value'),
+    idx('by_episode').on('feedId', 'seasonNumber', 'episodeNumber'),
+    idx('by_duration').on('duration'),
+    idx('by_enclosure_type').on('enclosureType').replicate('title', 'feedId'),
   ],
 })
 
+type Feed = Infer<typeof feedsStore.schema>
 type Entry = Infer<typeof entriesStore.schema>
 
 // =============================================================================
···
 // =============================================================================
 
 let db: IDBPDatabase
-let statsManager: StatsManager
-let planner: QueryPlanner<typeof entriesStore.schema>
-let nextEntryId = 0
-let entryCount = 0
+let feedsStatsManager: StatsManager
+let entriesStatsManager: StatsManager
+let feedsPlanner: QueryPlanner<typeof feedsStore.schema>
+let entriesPlanner: QueryPlanner<typeof entriesStore.schema>
 
 // =============================================================================
-// Generate sample data
+// Feed parsing helpers
 // =============================================================================
 
-const feeds = ['tech', 'science', 'politics', 'sports', 'entertainment']
-const authors = ['alice', 'bob', 'carol', 'dave', 'eve', 'frank']
-const tagPool = [
-  'javascript',
-  'typescript',
-  'rust',
-  'go',
-  'python',
-  'react',
-  'vue',
-  'svelte',
-  'node',
-  'deno',
-  'ai',
-  'ml',
-  'web',
-  'mobile',
-  'cloud',
-]
-const statuses: ('draft' | 'published' | 'archived')[] = ['draft', 'published', 'archived']
+function generateId(input: string): string {
+  // Simple hash function for generating IDs
+  let hash = 0
+  for (let i = 0; i < input.length; i++) {
+    const char = input.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash
+  }
+  return Math.abs(hash).toString(36)
+}
 
-function randomTags(): {tag: string; score: number}[] {
-  const count = Math.floor(Math.random() * 4) + 1
-  const shuffled = [...tagPool].sort(() => Math.random() - 0.5)
-  return shuffled.slice(0, count).map((tag) => ({
-    tag,
-    score: Math.floor(Math.random() * 100),
-  }))
+/**
+ * Parse iTunes duration to seconds.
+ * Handles formats: "3600", "23:45", "01:23:45", or already a number
+ */
+function parseDuration(duration: unknown): number | undefined {
+  if (duration === undefined || duration === null) return undefined
+
+  // If already a number, return it
+  if (typeof duration === 'number') return duration
+
+  // If not a string, can't parse
+  if (typeof duration !== 'string') return undefined
+
+  // Try parsing as plain number first (seconds as string)
+  const asNumber = parseInt(duration, 10)
+  if (!isNaN(asNumber) && String(asNumber) === duration) {
+    return asNumber
+  }
+
+  // Parse HH:MM:SS or MM:SS format
+  const parts = duration.split(':').map((p) => parseInt(p, 10))
+  if (parts.some(isNaN)) return undefined
+
+  if (parts.length === 3) {
+    // HH:MM:SS
+    return parts[0] * 3600 + parts[1] * 60 + parts[2]
+  } else if (parts.length === 2) {
+    // MM:SS
+    return parts[0] * 60 + parts[1]
+  }
+
+  return undefined
 }
 
-function generateEntry(): Entry {
-  const now = Date.now()
-  const id = nextEntryId++
-  return {
-    id: `entry-${id}`,
-    feedId: feeds[Math.floor(Math.random() * feeds.length)],
-    title: `Article ${id}: ${tagPool[Math.floor(Math.random() * tagPool.length)]} news`,
-    publishedAt: new Date(now - Math.random() * 30 * 24 * 60 * 60 * 1000),
-    status: statuses[Math.floor(Math.random() * statuses.length)],
-    tags: randomTags(),
-    authorId: authors[Math.floor(Math.random() * authors.length)],
+function parseDate(dateStr: string | undefined): Date {
+  if (!dateStr) return new Date()
+  const parsed = new Date(dateStr)
+  return isNaN(parsed.getTime()) ? new Date() : parsed
+}
+
+function extractFeedTags(parsed: ReturnType<typeof parseFeed>['feed'], opmlFolder?: string): Feed['tags'] {
+  const tags: Feed['tags'] = []
+
+  // Handle based on feed format
+  if ('itunes' in parsed && parsed.itunes) {
+    const itunes = parsed.itunes as {
+      categories?: Array<{text: string; categories?: Array<{text: string}>}>
+      explicit?: boolean
+      type?: string
+    }
+
+    // iTunes categories (flatten nested)
+    if (itunes.categories) {
+      for (const cat of itunes.categories) {
+        tags.push({tag: 'category', value: cat.text})
+        if (cat.categories) {
+          for (const subcat of cat.categories) {
+            tags.push({tag: 'category', value: subcat.text})
+            tags.push({tag: 'subcategory', value: `${cat.text}/${subcat.text}`})
+          }
+        }
+      }
+    }
+
+    // Explicit
+    if (itunes.explicit !== undefined) {
+      tags.push({tag: 'explicit', value: String(itunes.explicit)})
+    }
+
+    // Podcast type
+    if (itunes.type) {
+      tags.push({tag: 'podcast-type', value: itunes.type})
+    }
+  }
+
+  // RSS categories
+  if ('categories' in parsed && Array.isArray(parsed.categories)) {
+    for (const cat of parsed.categories as Array<{name: string; domain?: string}>) {
+      tags.push({tag: 'category', value: cat.name})
+      if (cat.domain) {
+        tags.push({tag: 'category-domain', value: cat.domain})
+      }
+    }
+  }
+
+  // Language
+  if ('language' in parsed && parsed.language) {
+    tags.push({tag: 'language', value: parsed.language as string})
+  }
+
+  // OPML folder
+  if (opmlFolder) {
+    tags.push({tag: 'opml-folder', value: opmlFolder})
+  }
+
+  // Generator (interesting for analysis)
+  if ('generator' in parsed && parsed.generator) {
+    const gen = parsed.generator
+    const genValue = typeof gen === 'string' ? gen : (gen as {name?: string})?.name || String(gen)
+    if (genValue && genValue !== '[object Object]') {
+      tags.push({tag: 'generator', value: genValue})
+    }
   }
+
+  return tags
 }
 
-async function addEntries(count: number) {
-  for (let i = 0; i < count; i++) {
-    const entry = generateEntry()
-    await docstore.put(db, entriesStore, entry)
+function extractEntryTags(item: Record<string, unknown>, feedId: string): Entry['tags'] {
+  const tags: Entry['tags'] = []
 
-    // Record stats for the primary store fields (using logical key names)
-    await statsManager.recordWrite(entriesStore.name, {
-      id: entry.id,
-      feedId: entry.feedId,
-      status: entry.status,
-      authorId: entry.authorId,
-      publishedAt: entry.publishedAt.toISOString(),
-    })
+  // Categories
+  if ('categories' in item && Array.isArray(item.categories)) {
+    for (const cat of item.categories as Array<{name: string}>) {
+      tags.push({tag: 'category', value: cat.name})
+    }
+  }
 
-    // Record stats for spread fields (tags) - use logical key names
-    // The query planner looks up stats using logical keys like '...tags.tag'
-    for (const tag of entry.tags) {
-      await statsManager.recordWrite(entriesStore.name, {
-        '...tags.tag': tag.tag,
-        '...tags.score': tag.score,
-      })
+  // iTunes metadata
+  if ('itunes' in item && item.itunes) {
+    const itunes = item.itunes as {
+      explicit?: boolean
+      episodeType?: string
+      keywords?: string[]
     }
 
-    entryCount++
+    if (itunes.explicit !== undefined) {
+      tags.push({tag: 'explicit', value: String(itunes.explicit)})
+    }
+    if (itunes.episodeType) {
+      tags.push({tag: 'episode-type', value: itunes.episodeType})
+    }
+    if (itunes.keywords) {
+      for (const kw of itunes.keywords) {
+        tags.push({tag: 'keyword', value: kw})
+      }
+    }
   }
+
+  // Enclosure detection
+  const enclosures = ('enclosures' in item ? item.enclosures : null) as Array<{type?: string}> | null
+  if (enclosures && enclosures.length > 0) {
+    tags.push({tag: 'has-enclosure', value: 'true'})
+    const encType = enclosures[0]?.type || ''
+    if (encType.startsWith('audio/')) {
+      tags.push({tag: 'media-type', value: 'audio'})
+    } else if (encType.startsWith('video/')) {
+      tags.push({tag: 'media-type', value: 'video'})
+    }
+  } else {
+    tags.push({tag: 'has-enclosure', value: 'false'})
+  }
+
+  // Author
+  if ('authors' in item && Array.isArray(item.authors) && item.authors.length > 0) {
+    const author = item.authors[0]
+    const authorName = typeof author === 'string' ? author : (author as {name?: string})?.name
+    if (authorName) {
+      tags.push({tag: 'author', value: authorName})
+    }
+  }
+
+  return tags
+}
+
+interface ParsedFeedResult {
+  feed: Feed
+  entries: Entry[]
+}
+
+function parseFeedContent(url: string, content: string, opmlFolder?: string): ParsedFeedResult {
+  const result = parseFeed(content)
+  const parsed = result.feed as Record<string, unknown>
+  const feedId = generateId(url)
+
+  // Extract feed metadata
+  const feed: Feed = {
+    id: feedId,
+    url,
+    title: (parsed.title as string) || url,
+    description: (parsed.description as string) || '',
+    siteUrl: (parsed.link as string) || undefined,
+    imageUrl: undefined,
+    language: (parsed.language as string) || undefined,
+    author: undefined,
+    lastFetched: new Date(),
+    lastBuildDate: parsed.lastBuildDate ? parseDate(parsed.lastBuildDate as string) : undefined,
+    ttl: (parsed.ttl as number) || undefined,
+    feedType: result.format,
+    explicit: undefined,
+    podcastType: undefined,
+    tags: extractFeedTags(result.feed, opmlFolder),
+  }
+
+  // Extract image
+  if ('image' in parsed && parsed.image) {
+    const img = parsed.image as {url?: string}
+    feed.imageUrl = img.url
+  }
+  if ('itunes' in parsed && parsed.itunes) {
+    const itunes = parsed.itunes as {image?: string; author?: string; explicit?: boolean; type?: string}
+    if (itunes.image) feed.imageUrl = itunes.image
+    if (itunes.author) feed.author = itunes.author
+    if (itunes.explicit !== undefined) feed.explicit = itunes.explicit
+    if (itunes.type) feed.podcastType = itunes.type
+  }
+
+  // Extract entries (RSS uses 'items', Atom uses 'entries')
+  const items =
+    (parsed.items as Array<Record<string, unknown>>) ||
+    (parsed.entries as Array<Record<string, unknown>>) ||
+    []
+  const entries: Entry[] = items.map((item) => {
+    const guid = item.guid as {value?: string} | string | undefined
+    const guidValue = typeof guid === 'string' ? guid : guid?.value
+    const itemAtomId = item.id as string | undefined
+    const entryId = guidValue
+      ? generateId(guidValue)
+      : itemAtomId
+        ? generateId(itemAtomId)
+        : generateId(`${feedId}-${item.title || Date.now()}`)
+
+    // Get enclosure info
+    const enclosures = item.enclosures as Array<{url: string; type: string; length: number}> | undefined
+    const enclosure = enclosures?.[0]
+
+    // Get iTunes episode info
+    const itunes = item.itunes as
+      | {
+          duration?: number
+          episode?: number
+          season?: number
+          episodeType?: string
+          explicit?: boolean
+          author?: string
+        }
+      | undefined
+
+    // Get content - prefer content:encoded, then description, then Atom content
+    const contentNs = item.content as {encoded?: string; value?: string} | string | undefined
+    let fullContent = ''
+    if (typeof contentNs === 'string') {
+      fullContent = contentNs
+    } else if (contentNs?.encoded) {
+      fullContent = contentNs.encoded
+    } else if (contentNs?.value) {
+      fullContent = contentNs.value
+    } else if (item.description) {
+      fullContent = item.description as string
+    }
+
+    // Get summary (RSS description or Atom summary)
+    const summaryField = item.summary as {value?: string} | string | undefined
+    const summaryText =
+      typeof summaryField === 'string'
+        ? summaryField
+        : summaryField?.value || (item.description as string) || undefined
+
+    // Get author
+    let author: string | undefined
+    if (itunes?.author) {
+      author = itunes.author
+    } else if (item.authors && Array.isArray(item.authors) && item.authors.length > 0) {
+      const firstAuthor = item.authors[0]
+      author = typeof firstAuthor === 'string' ? firstAuthor : (firstAuthor as {name?: string})?.name
+    }
+
+    // Get link (RSS uses 'link' string, Atom uses 'links' array)
+    let link: string | undefined = item.link as string | undefined
+    if (!link && item.links && Array.isArray(item.links)) {
+      const altLink = (item.links as Array<{href?: string; rel?: string}>).find(
+        (l) => l.rel === 'alternate' || !l.rel,
+      )
+      link = altLink?.href
+    }
+
+    // Get guid/id (RSS uses 'guid', Atom uses 'id')
+    const finalGuid = guidValue || itemAtomId
+
+    // Get published date (RSS uses 'pubDate', Atom uses 'published')
+    const pubDateStr = (item.pubDate as string) || (item.published as string)
+    const updatedStr = item.updated as string | undefined
+
+    return {
+      id: entryId,
+      feedId,
+      guid: finalGuid,
+      title: (item.title as string) || 'Untitled',
+      link,
+      content: fullContent || summaryText || '',
+      summary: summaryText !== fullContent ? summaryText : undefined,
+      publishedAt: parseDate(pubDateStr),
+      updatedAt: updatedStr ? parseDate(updatedStr) : undefined,
+      author,
+      duration: parseDuration(itunes?.duration),
+      episodeNumber: itunes?.episode,
+      seasonNumber: itunes?.season,
+      episodeType: itunes?.episodeType,
+      explicit: itunes?.explicit,
+      enclosureUrl: enclosure?.url,
+      enclosureType: enclosure?.type,
+      enclosureLength: enclosure?.length,
+      tags: extractEntryTags(item, feedId),
+    }
+  })
+
+  return {feed, entries}
 }
 
 // =============================================================================
-// Query execution using real IDB
+// Database operations
 // =============================================================================
 
-async function executeQuery(plan: QueryPlan): Promise<Record<string, unknown>[]> {
-  const ctx = {
-    db,
-    storeDef: entriesStore as any, // ExecutionContext expects generic StoreDef
+async function saveFeed(feed: Feed): Promise<void> {
+  await putMany(db, feedsStore, [feed], feedsStatsManager)
+}
+
+async function saveEntries(entries: Entry[]): Promise<void> {
+  if (entries.length === 0) return
+  await putMany(db, entriesStore, entries, entriesStatsManager)
+}
+
+async function fetchAndParseFeed(url: string, opmlFolder?: string): Promise<ParsedFeedResult> {
+  const content = await fetchWithCors(url)
+  return parseFeedContent(url, content, opmlFolder)
+}
+
+async function addFeed(url: string, opmlFolder?: string): Promise<{feed: Feed; entriesCount: number}> {
+  const {feed, entries} = await fetchAndParseFeed(url, opmlFolder)
+  await saveFeed(feed)
+  await saveEntries(entries)
+  return {feed, entriesCount: entries.length}
+}
+
+async function refreshFeed(feedId: string): Promise<{entriesCount: number}> {
+  // Get existing feed
+  const existingFeed = await docstore.get(db, feedsStore, feedId)
+  if (!existingFeed) throw new Error(`Feed not found: ${feedId}`)
+
+  // Preserve OPML folder tag if present
+  const opmlFolder = existingFeed.tags.find((t) => t.tag === 'opml-folder')?.value
+
+  const {feed, entries} = await fetchAndParseFeed(existingFeed.url, opmlFolder)
+  await saveFeed(feed)
+  await saveEntries(entries)
+  return {entriesCount: entries.length}
+}
+
+async function refreshAllFeeds(): Promise<{feedsRefreshed: number; totalEntries: number}> {
+  const allFeeds = await collectAll(
+    docs(
+      {db, storeDef: feedsStore as any},
+      {
+        source: 'primary',
+        indexName: null,
+        keyRange: null,
+        direction: 'next',
+        filter: [],
+        needsSort: false,
+        availableFields: Object.keys(feedsStore.schema),
+        estimatedRows: 1000,
+        selectivity: 1,
+      },
+    ),
+  )
+
+  let feedsRefreshed = 0
+  let totalEntries = 0
+
+  for (const feed of allFeeds as Feed[]) {
+    try {
+      const result = await refreshFeed(feed.id)
+      feedsRefreshed++
+      totalEntries += result.entriesCount
+    } catch (err) {
+      console.error(`Failed to refresh feed ${feed.url}:`, err)
+    }
   }
 
-  // Use rowsIntersect when the plan has an intersection, otherwise use regular rows
-  // Enable analyze mode to show timing info in the console
-  const options = {analyze: true}
-  const rowGenerator = plan.intersection ? rowsIntersect(ctx, plan, options) : rows(ctx, plan, options)
-  const results = await collect(rowGenerator, 5)
+  return {feedsRefreshed, totalEntries}
+}
+
+async function collectAll<T>(gen: AsyncGenerator<T>): Promise<T[]> {
+  const results: T[] = []
+  for await (const item of gen) {
+    results.push(item)
+  }
   return results
 }
 
 // =============================================================================
-// Get counts from IDB
+// OPML Import
 // =============================================================================
 
-async function getStoreCounts(): Promise<Map<string, number>> {
-  const counts = new Map<string, number>()
+interface OpmlOutline {
+  text?: string
+  title?: string
+  xmlUrl?: string
+  outlines?: OpmlOutline[]
+}
+
+function flattenOpmlOutlines(
+  outlines: OpmlOutline[],
+  folder?: string,
+): Array<{url: string; folder?: string}> {
+  const results: Array<{url: string; folder?: string}> = []
+
+  for (const outline of outlines) {
+    if (outline.xmlUrl) {
+      results.push({url: outline.xmlUrl, folder})
+    }
+    if (outline.outlines && outline.outlines.length > 0) {
+      const subFolder = outline.text || outline.title || folder
+      results.push(...flattenOpmlOutlines(outline.outlines, subFolder))
+    }
+  }
+
+  return results
+}
 
-  // Count primary store
-  const tx = db.transaction(entriesStore.name, 'readonly')
-  const primaryCount = await tx.objectStore(entriesStore.name).count()
-  counts.set(entriesStore.name, primaryCount)
-  await tx.done
+async function importOpml(
+  content: string,
+): Promise<{feedsAdded: number; totalEntries: number; errors: string[]}> {
+  const opml = parseOpml(content)
+  const outlines = opml.body?.outlines || []
+  const feedUrls = flattenOpmlOutlines(outlines as OpmlOutline[])
+
+  let feedsAdded = 0
+  let totalEntries = 0
+  const errors: string[] = []
 
-  // Count index stores
-  for (const group of entriesStore.indexStoreGroups) {
-    const indexTx = db.transaction(group.storeName, 'readonly')
-    const indexCount = await indexTx.objectStore(group.storeName).count()
-    counts.set(group.storeName, indexCount)
-    await indexTx.done
+  for (const {url, folder} of feedUrls) {
+    try {
+      const result = await addFeed(url, folder)
+      feedsAdded++
+      totalEntries += result.entriesCount
+      updateStatus(`Imported ${feedsAdded}/${feedUrls.length} feeds...`)
+    } catch (err) {
+      errors.push(`${url}: ${err instanceof Error ? err.message : String(err)}`)
+    }
   }
 
-  return counts
+  return {feedsAdded, totalEntries, errors}
+}
+
+// =============================================================================
+// Query execution
+// =============================================================================
+
+async function executeQuery(
+  planner: QueryPlanner<any>,
+  storeDef: any,
+  spec: QuerySpec,
+): Promise<{rows: Record<string, unknown>[]; plan: QueryPlan}> {
+  const plan = await planner.plan(spec)
+  const ctx = {db, storeDef}
+  const options = {analyze: true, orderBy: spec.orderBy}
+  const rowGenerator = rows(ctx, plan, options)
+  const results = await collect(rowGenerator, 20)
+  return {rows: results as Record<string, unknown>[], plan}
+}
+
+async function executeDocsQuery(
+  planner: QueryPlanner<any>,
+  storeDef: any,
+  spec: QuerySpec,
+): Promise<{docs: Record<string, unknown>[]; plan: QueryPlan}> {
+  const plan = await planner.plan(spec)
+  const ctx = {db, storeDef}
+  const options = {analyze: true}
+  const docGenerator = docs(ctx, plan, options)
+  const results = await collect(docGenerator, 10)
+  return {docs: results as Record<string, unknown>[], plan}
+}
+
+async function executeCountQuery(
+  planner: QueryPlanner<any>,
+  storeDef: any,
+  spec: QuerySpec,
+): Promise<{count: number; plan: QueryPlan}> {
+  const plan = await planner.plan(spec)
+  const ctx = {db, storeDef}
+  const options = {analyze: true}
+  const result = await count(ctx, plan, options)
+  return {count: result, plan}
 }
 
 // =============================================================================
-// Sample queries
+// Sample queries for testing
 // =============================================================================
 
-const sampleQueries: {name: string; spec: QuerySpec}[] = [
+const sampleQueries: Array<{name: string; store: 'feeds' | 'entries'; spec: QuerySpec}> = [
   {
-    name: 'All entries from tech feed, newest first',
+    name: 'All entries (newest first)',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [{key: 'feedId', op: '=', value: 'tech'}],
+      where: [],
       orderBy: {key: 'publishedAt', direction: 'desc'},
     },
   },
   {
-    name: 'Published entries only',
+    name: 'Entries from specific feed',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [{key: 'status', op: '=', value: 'published'}],
+      where: [{key: 'feedId', op: '=', value: '__FEED_ID__'}],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
     },
   },
   {
-    name: 'Entries tagged with "javascript"',
+    name: 'Audio episodes only',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [{key: '...tags.tag', op: '=', value: 'javascript'}],
+      where: [
+        {key: '...tags.tag', op: '=', value: 'media-type'},
+        {key: '...tags.value', op: '=', value: 'audio'},
+      ],
     },
   },
   {
-    name: 'Tech feed + javascript tag',
+    name: 'Entries with category tag',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: '...tags.tag', op: '=', value: 'category'}],
+    },
+  },
+  {
+    name: 'Long episodes (>30 min)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'duration', op: '>', value: 1800}],
+    },
+  },
+  {
+    name: 'Short episodes (<10 min)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'duration', op: '<', value: 600}],
+    },
+  },
+  {
+    name: 'Explicit content',
+    store: 'entries',
     spec: {
       store: 'entries',
       where: [
-        {key: 'feedId', op: '=', value: 'tech'},
-        {key: '...tags.tag', op: '=', value: 'javascript'},
+        {key: '...tags.tag', op: '=', value: 'explicit'},
+        {key: '...tags.value', op: '=', value: 'true'},
       ],
     },
   },
   {
-    name: 'Entries by alice, recent',
+    name: 'Video content',
+    store: 'entries',
     spec: {
       store: 'entries',
       where: [
-        {key: 'authorId', op: '=', value: 'alice'},
-        {key: 'publishedAt', op: '>', value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)},
+        {key: '...tags.tag', op: '=', value: 'media-type'},
+        {key: '...tags.value', op: '=', value: 'video'},
       ],
-      orderBy: {key: 'publishedAt', direction: 'desc'},
     },
   },
   {
-    name: 'Primary key lookup (by id)',
+    name: 'Feeds by category',
+    store: 'feeds',
+    spec: {
+      store: 'feeds',
+      where: [{key: '...tags.tag', op: '=', value: 'category'}],
+    },
+  },
+  {
+    name: 'Feeds with language tag',
+    store: 'feeds',
+    spec: {
+      store: 'feeds',
+      where: [{key: '...tags.tag', op: '=', value: 'language'}],
+    },
+  },
+  {
+    name: 'Recently fetched feeds',
+    store: 'feeds',
+    spec: {
+      store: 'feeds',
+      where: [],
+      orderBy: {key: 'lastFetched', direction: 'desc'},
+    },
+  },
+  {
+    name: 'Entries by enclosure type',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [{key: 'id', op: '=', value: 'entry-42'}],
+      where: [{key: 'enclosureType', op: '=', value: 'audio/mpeg'}],
+    },
+  },
+  // === INTERSECTION QUERIES using new SpreadMatch syntax ===
+  // Each {spread, where} block must be satisfied by ONE row in the spread array.
+  // Multiple blocks create an intersection (doc must have rows matching ALL blocks).
+  {
+    name: '🔀 Audio AND Explicit (intersection)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'media-type', value: 'audio'}},
+        {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
+      ],
     },
   },
   {
-    name: 'Full table scan (filter by title - no index)',
+    name: '🔀 Full episodes AND Explicit (intersection)',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [{key: 'title', op: '=', value: 'Article 1: ai news'}],
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'episode-type', value: 'full'}},
+        {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
+      ],
     },
   },
-  // --- Queries that would benefit from index joins ---
   {
-    name: 'Published + javascript tag (status index + tag index)',
+    name: '🔀 Audio + Full + Explicit (3-way intersection)',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [
-        {key: 'status', op: '=', value: 'published'},
-        {key: '...tags.tag', op: '=', value: 'javascript'},
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'media-type', value: 'audio'}},
+        {spread: 'tags', where: {tag: 'episode-type', value: 'full'}},
+        {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
       ],
     },
   },
   {
-    name: 'Alice + typescript tag (author index + tag index)',
+    name: '🔀 Specific feed + Audio (cross-index)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'feedId', op: '=', value: '__FEED_ID__'}],
+      matches: [{spread: 'tags', where: {tag: 'media-type', value: 'audio'}}],
+    },
+  },
+  {
+    name: '🔀 Specific feed + Explicit content',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'feedId', op: '=', value: '__FEED_ID__'}],
+      matches: [{spread: 'tags', where: {tag: 'explicit', value: 'true'}}],
+    },
+  },
+  {
+    name: '🔀 Category AND has-enclosure (self-join on tag)',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [
-        {key: 'authorId', op: '=', value: 'alice'},
-        {key: '...tags.tag', op: '=', value: 'typescript'},
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'category'}}, // Just tag, no value
+        {spread: 'tags', where: {tag: 'has-enclosure'}},
       ],
     },
   },
   {
-    name: 'Science feed + published status (feed index + status index)',
+    name: '🔀 Video + Has enclosure',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [
-        {key: 'feedId', op: '=', value: 'science'},
-        {key: 'status', op: '=', value: 'published'},
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'media-type', value: 'video'}},
+        {spread: 'tags', where: {tag: 'has-enclosure', value: 'true'}},
       ],
     },
   },
   {
-    name: 'Bob + draft + react tag (3-way join potential)',
+    name: '🔀 Bonus episodes + Explicit',
+    store: 'entries',
     spec: {
       store: 'entries',
-      where: [
-        {key: 'authorId', op: '=', value: 'bob'},
-        {key: 'status', op: '=', value: 'draft'},
-        {key: '...tags.tag', op: '=', value: 'react'},
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'episode-type', value: 'bonus'}},
+        {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
       ],
     },
   },
   {
-    name: 'High score tags in tech feed (feed+tag index + score filter)',
+    name: '🔀 Feed tags: Fiction + Serial (intersection)',
+    store: 'feeds',
+    spec: {
+      store: 'feeds',
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'category', value: 'Fiction'}},
+        {spread: 'tags', where: {tag: 'podcast-type', value: 'serial'}},
+      ],
+    },
+  },
+  {
+    name: '🔀 Feed tags: Comedy + Explicit',
+    store: 'feeds',
+    spec: {
+      store: 'feeds',
+      where: [],
+      matches: [
+        {spread: 'tags', where: {tag: 'category', value: 'Comedy'}},
+        {spread: 'tags', where: {tag: 'explicit', value: 'true'}},
+      ],
+    },
+  },
+  // === Single SpreadMatch queries (should work like regular tag queries) ===
+  {
+    name: '🏷️ Audio episodes (single match)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [],
+      matches: [{spread: 'tags', where: {tag: 'media-type', value: 'audio'}}],
+    },
+  },
+  {
+    name: '🏷️ Explicit content (single match)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [],
+      matches: [{spread: 'tags', where: {tag: 'explicit', value: 'true'}}],
+    },
+  },
+  // === SORTING QUERIES (Needs Sort: true) ===
+  // These queries use an index for filtering but need post-query sorting
+  // because the ORDER BY field is not covered by the index.
+  {
+    name: '🔃 Audio entries by duration (sort required)',
+    store: 'entries',
     spec: {
       store: 'entries',
       where: [
-        {key: 'feedId', op: '=', value: 'tech'},
-        {key: '...tags.tag', op: '=', value: 'ai'},
-        {key: '...tags.score', op: '>=', value: 50},
+        {key: '...tags.tag', op: '=', value: 'media-type'},
+        {key: '...tags.value', op: '=', value: 'audio'},
       ],
+      orderBy: {key: 'duration', direction: 'desc'},
+    },
+  },
+  {
+    name: '🔃 Feed entries by title (sort required)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'feedId', op: '=', value: '__FEED_ID__'}],
+      orderBy: {key: 'title', direction: 'asc'},
+    },
+  },
+  {
+    name: '🔃 MP3 entries by date (sort required)',
+    store: 'entries',
+    spec: {
+      store: 'entries',
+      where: [{key: 'enclosureType', op: '=', value: 'audio/mpeg'}],
+      orderBy: {key: 'publishedAt', direction: 'desc'},
     },
   },
 ]
 
 // =============================================================================
-// UI rendering
+// UI State
 // =============================================================================
 
-function formatPlan(plan: QueryPlan, queryId: number): string {
-  const intersectionInfo = plan.intersection
-    ? `
-      <div class="intersection-info">
-        <strong>INTERSECTION with:</strong>
-        <div class="intersection-details">
-          <span>Source: ${plan.intersection.source}</span>
-          <span>Index: ${plan.intersection.indexName}</span>
-          <span>Selectivity: ${(plan.intersection.selectivity * 100).toFixed(2)}%</span>
-        </div>
-      </div>
-    `
-    : ''
+let currentView: 'feeds' | 'entries' | 'queries' | 'tagcloud' = 'feeds'
+
+function updateStatus(message: string) {
+  const statusEl = document.getElementById('status-message')
+  if (statusEl) statusEl.textContent = message
+}
+
+// =============================================================================
+// UI Rendering
+// =============================================================================
+
+async function getStoreCounts(): Promise<{feeds: number; entries: number}> {
+  const feedsTx = db.transaction(feedsStore.name, 'readonly')
+  const feedsCount = await feedsTx.objectStore(feedsStore.name).count()
+  await feedsTx.done
+
+  const entriesTx = db.transaction(entriesStore.name, 'readonly')
+  const entriesCount = await entriesTx.objectStore(entriesStore.name).count()
+  await entriesTx.done
+
+  return {feeds: feedsCount, entries: entriesCount}
+}
 
-  return `
-    <div class="plan ${plan.intersection ? 'plan-intersection' : ''}" data-query-id="${queryId}">
+function formatPlan(plan: QueryPlan): string {
+  let html = `
+    <div class="plan ${plan.intersection ? 'plan-intersection' : ''}">
       <div><strong>Source:</strong> ${plan.source}</div>
       <div><strong>Index:</strong> ${plan.indexName ?? '<full scan>'}</div>
       <div><strong>Key Range:</strong> ${plan.keyRange ? JSON.stringify(plan.keyRange) : 'none'}</div>
       <div><strong>Direction:</strong> ${plan.direction}</div>
       <div><strong>Post-filters:</strong> ${plan.filter.length > 0 ? plan.filter.map((f) => `${f.key} ${f.op} ${f.value}`).join(', ') : 'none'}</div>
       <div><strong>Needs Sort:</strong> ${plan.needsSort}</div>
-      <div><strong>Available Fields:</strong> ${plan.availableFields.join(', ')}</div>
       <div><strong>Selectivity:</strong> ${(plan.selectivity * 100).toFixed(2)}%</div>
       <div><strong>Est. Rows:</strong> ${plan.estimatedRows}</div>
-      ${intersectionInfo}
     </div>
-    <button class="run-query-btn" data-query-id="${queryId}">Run Query (show 5 rows)</button>
-    <div class="query-results" id="results-${queryId}"></div>
   `
-}
 
-async function formatIngestResult(entry: Entry) {
-  const result = ingest(entriesStore, entry)
-  let html = '<div class="ingest-result">'
-
-  for (const [storeName, rows] of result.byStore) {
-    html += `<div class="store-group"><strong>${storeName}</strong> (${rows.length} rows)</div>`
-    html += '<pre>' + JSON.stringify(rows, null, 2) + '</pre>'
+  if (plan.intersection) {
+    html += `
+      <div class="intersection-info">
+        <strong>INTERSECTION:</strong>
+        <div>Source: ${plan.intersection.source}</div>
+        <div>Index: ${plan.intersection.indexName}</div>
+        <div>Selectivity: ${(plan.intersection.selectivity * 100).toFixed(2)}%</div>
+      </div>
+    `
   }
 
-  html += '</div>'
   return html
 }
 
-async function renderDemo() {
-  // Get a sample entry for display
-  const sampleEntry = await docstore.get(db, entriesStore, 'entry-0')
+async function renderControls(): Promise<string> {
+  const counts = await getStoreCounts()
 
-  const storeCounts = await getStoreCounts()
+  return `
+    <section class="controls">
+      <div class="control-row">
+        <input type="file" id="opml-file" accept=".opml,.xml" style="display:none">
+        <button id="import-opml-btn">Import OPML</button>
+        <input type="text" id="feed-url-input" placeholder="Feed URL..." style="flex:1">
+        <button id="add-feed-btn">Add Feed</button>
+        <button id="refresh-all-btn">Refresh All</button>
+        <button id="clear-db-btn" class="danger">Clear Database</button>
+      </div>
+      <div class="stats-row">
+        <span id="feed-count">Feeds: ${counts.feeds}</span>
+        <span id="entry-count">Entries: ${counts.entries}</span>
+        <span id="status-message"></span>
+      </div>
+      <div class="nav-row">
+        <button class="nav-btn ${currentView === 'feeds' ? 'active' : ''}" data-view="feeds">Feeds</button>
+        <button class="nav-btn ${currentView === 'entries' ? 'active' : ''}" data-view="entries">Entries</button>
+        <button class="nav-btn ${currentView === 'tagcloud' ? 'active' : ''}" data-view="tagcloud">Tag Cloud</button>
+        <button class="nav-btn ${currentView === 'queries' ? 'active' : ''}" data-view="queries">Query Playground</button>
+      </div>
+    </section>
+  `
+}
 
-  let html = `
-    <div class="demo">
-      <h1>DocStore Query Planner Demo</h1>
-      <p class="idb-badge">Using real IndexedDB</p>
+async function renderFeedsList(): Promise<string> {
+  const allFeeds = (await collectAll(
+    docs(
+      {db, storeDef: feedsStore as any},
+      {
+        source: 'primary',
+        indexName: null,
+        keyRange: null,
+        direction: 'next',
+        filter: [],
+        needsSort: false,
+        availableFields: Object.keys(feedsStore.schema),
+        estimatedRows: 1000,
+        selectivity: 1,
+      },
+    ),
+  )) as Feed[]
 
-      <section class="controls">
-        <button id="add-entries-btn">Add 1000 Entries</button>
-        <button id="clear-db-btn">Clear Database</button>
-        <span id="entry-count">Entries: ${entryCount}</span>
+  if (allFeeds.length === 0) {
+    return `
+      <section class="content-section">
+        <h2>Feeds</h2>
+        <p class="empty-state">No feeds yet. Import an OPML file or add a feed URL above.</p>
       </section>
+    `
+  }
 
-      <section>
-        <h2>Store Definition</h2>
-        <pre>${JSON.stringify(
-          {
-            name: entriesStore.name,
-            nativeIndexes: entriesStore.nativeIndexes.map((i) => ({name: i.name, keys: i.keys})),
-            indexStoreGroups: entriesStore.indexStoreGroups.map((g) => ({
-              storeName: g.storeName,
-              spreadRoots: [...g.spreadRoots],
-              indexes: g.indexes.map((i) => ({name: i.name, keys: i.keys})),
-              allKeys: [...g.allKeys],
-            })),
-          },
-          null,
-          2,
-        )}</pre>
-      </section>
+  const feedItems = allFeeds
+    .map(
+      (feed) => `
+    <div class="feed-item" data-feed-id="${feed.id}">
+      <div class="feed-header">
+        ${feed.imageUrl ? `<img src="${feed.imageUrl}" class="feed-image" alt="">` : '<div class="feed-image-placeholder"></div>'}
+        <div class="feed-info">
+          <h3 class="feed-title">${escapeHtml(feed.title)}</h3>
+          <a href="${feed.url}" target="_blank" class="feed-url">${escapeHtml(feed.url)}</a>
+          <div class="feed-meta">
+            <span>Type: ${feed.feedType || 'unknown'}</span>
+            <span>Fetched: ${feed.lastFetched.toLocaleString()}</span>
+            ${feed.language ? `<span>Lang: ${feed.language}</span>` : ''}
+          </div>
+          <div class="feed-tags">
+            ${feed.tags
+              .slice(0, 5)
+              .map((t) => `<span class="tag">${escapeHtml(t.tag)}:${escapeHtml(t.value)}</span>`)
+              .join('')}
+            ${feed.tags.length > 5 ? `<span class="tag-more">+${feed.tags.length - 5} more</span>` : ''}
+          </div>
+        </div>
+        <button class="refresh-feed-btn" data-feed-id="${feed.id}">Refresh</button>
+      </div>
+    </div>
+  `,
+    )
+    .join('')
 
-      <section>
-        <h2>Sample Entry Ingestion</h2>
-        <p>Here's how a sample entry gets denormalized into index rows:</p>
-        <pre>${JSON.stringify(
-          sampleEntry,
-          (key, value) => {
-            if (value instanceof Date) return value.toISOString()
-            return value
-          },
-          2,
-        )}</pre>
-        ${sampleEntry ? await formatIngestResult(sampleEntry) : '<p>No entries yet</p>'}
+  return `
+    <section class="content-section">
+      <h2>Feeds (${allFeeds.length})</h2>
+      <div class="feeds-list">
+        ${feedItems}
+      </div>
+    </section>
+  `
+}
+
+async function renderEntriesList(): Promise<string> {
+  const plan: QueryPlan = {
+    source: 'primary',
+    indexName: 'by_published',
+    keyRange: null,
+    direction: 'prev',
+    filter: [],
+    needsSort: false,
+    availableFields: Object.keys(entriesStore.schema),
+    estimatedRows: 1000,
+    selectivity: 1,
+  }
+
+  const allEntries = (await collect(docs({db, storeDef: entriesStore as any}, plan), 100)) as Entry[]
+
+  if (allEntries.length === 0) {
+    return `
+      <section class="content-section">
+        <h2>Entries</h2>
+        <p class="empty-state">No entries yet. Add some feeds first!</p>
       </section>
+    `
+  }
 
-      <section>
-        <h2>Query Plans</h2>
-        <p>Given <strong id="query-entry-count">${entryCount}</strong> entries, here's how queries get planned. Click "Run Query" to see results:</p>
-        <div id="queries-container">
+  const entryItems = allEntries
+    .map(
+      (entry) => `
+    <div class="entry-item">
+      <div class="entry-header">
+        <h3 class="entry-title">${escapeHtml(entry.title)}</h3>
+        ${entry.link ? `<a href="${entry.link}" target="_blank" class="entry-link">Open</a>` : ''}
+      </div>
+      <div class="entry-meta">
+        <span class="entry-date">${entry.publishedAt.toLocaleString()}</span>
+        ${entry.author ? `<span class="entry-author">by ${escapeHtml(entry.author)}</span>` : ''}
+        ${entry.duration ? `<span class="entry-duration">${formatDuration(entry.duration)}</span>` : ''}
+        ${entry.episodeNumber ? `<span class="entry-episode">Ep. ${entry.episodeNumber}</span>` : ''}
+      </div>
+      <div class="entry-tags">
+        ${entry.tags
+          .slice(0, 4)
+          .map((t) => `<span class="tag">${escapeHtml(t.tag)}:${escapeHtml(t.value)}</span>`)
+          .join('')}
+      </div>
+      <div class="entry-content-preview">${escapeHtml(stripHtml(entry.content).slice(0, 200))}...</div>
+    </div>
+  `,
+    )
+    .join('')
+
+  return `
+    <section class="content-section">
+      <h2>Recent Entries (${allEntries.length})</h2>
+      <div class="entries-list">
+        ${entryItems}
+      </div>
+    </section>
   `
+}
 
-  for (let i = 0; i < sampleQueries.length; i++) {
-    const {name, spec} = sampleQueries[i]
-    const plan = await planner.plan(spec)
-    html += `
-      <div class="query">
-        <h3>${name}</h3>
+async function renderQueryPlayground(): Promise<string> {
+  // Get a feed ID for the "specific feed" query
+  const allFeeds = (await collectAll(
+    docs(
+      {db, storeDef: feedsStore as any},
+      {
+        source: 'primary',
+        indexName: null,
+        keyRange: null,
+        direction: 'next',
+        filter: [],
+        needsSort: false,
+        availableFields: Object.keys(feedsStore.schema),
+        estimatedRows: 10,
+        selectivity: 1,
+      },
+    ),
+  )) as Feed[]
+  const firstFeedId = allFeeds[0]?.id || 'no-feeds'
+
+  const queryItems = sampleQueries
+    .map((q, i) => {
+      // Replace placeholder with actual feed ID
+      const spec = JSON.parse(JSON.stringify(q.spec))
+      for (const clause of spec.where) {
+        if (clause.value === '__FEED_ID__') {
+          clause.value = firstFeedId
+        }
+      }
+
+      return `
+      <div class="query-item" data-query-idx="${i}">
+        <h3>${escapeHtml(q.name)}</h3>
         <pre class="query-spec">${JSON.stringify(spec.where, null, 2)}${spec.orderBy ? '\nORDER BY ' + spec.orderBy.key + ' ' + spec.orderBy.direction.toUpperCase() : ''}</pre>
-        ${formatPlan(plan, i)}
+        <div class="query-buttons">
+          <button class="run-rows-btn" data-query-idx="${i}" data-store="${q.store}">Run rows()</button>
+          <button class="run-docs-btn" data-query-idx="${i}" data-store="${q.store}">Run docs()</button>
+          <button class="run-count-btn" data-query-idx="${i}" data-store="${q.store}">Run count()</button>
+        </div>
+        <div class="query-results" id="results-${i}"></div>
       </div>
     `
-  }
+    })
+    .join('')
+
+  return `
+    <section class="content-section">
+      <h2>Query Playground</h2>
+      <p>Test the query planner against your podcast data. Click buttons to see query plans and results.</p>
+      <div class="queries-list">
+        ${queryItems}
+      </div>
+    </section>
+  `
+}
+
+async function renderTagCloud(): Promise<string> {
+  const ctx = {db, storeDef: entriesStore as any}
+  const feedCtx = {db, storeDef: feedsStore as any}
+
+  // Run all 4 collection queries in parallel for better performance
+  // Note: Using row counts (countDocuments: false) is ~10x faster than document counts.
+  // For tag clouds, row counts are generally fine since we're showing relative frequencies.
+  const startTime = performance.now()
+  const [tagTypes, tagPairs, feedTagTypes, feedTagPairs] = await Promise.all([
+    // Get tag types (category, author, media-type, etc.) from entries
+    collectIndexValues(ctx, 'by_tag', '...tags.tag', {
+      analyze: true,
+      countDocuments: false, // Row counts - much faster
+    }),
+    // Get tag:value pairs for entries
+    collectKeyPairs(ctx, 'by_tag', {
+      analyze: true,
+      countDocuments: false, // Row counts - much faster
+      limit: 100,
+    }),
+    // Get feed tag types - feeds have fewer rows, doc counts are fine
+    collectIndexValues(feedCtx, 'by_tag', '...tags.tag', {
+      countDocuments: true,
+    }),
+    // Get feed tag pairs
+    collectKeyPairs(feedCtx, 'by_tag', {
+      countDocuments: true,
+      limit: 50,
+    }),
+  ])
+  console.debug(`[tagcloud] All queries completed in ${(performance.now() - startTime).toFixed(2)}ms`)
 
-  html += `
-        </div>
+  if (tagTypes.length === 0 && feedTagTypes.length === 0) {
+    return `
+      <section class="content-section">
+        <h2>Tag Cloud</h2>
+        <p class="empty-state">No tags yet. Add some feeds first!</p>
       </section>
+    `
+  }
 
-      <section>
-        <h2>Cardinality Estimates (via HyperLogLog)</h2>
-        <table id="cardinality-table">
-          <tr><th>Field</th><th>Estimated Cardinality</th></tr>
-  `
+  // Calculate font sizes based on count (logarithmic scale)
+  const maxCount = Math.max(...tagPairs.map((p) => p.count), 1)
+  const minCount = Math.min(...tagPairs.map((p) => p.count), 1)
+  const calcFontSize = (count: number) => {
+    if (maxCount === minCount) return 1
+    const normalized = (Math.log(count) - Math.log(minCount)) / (Math.log(maxCount) - Math.log(minCount))
+    return 0.75 + normalized * 1.5 // 0.75rem to 2.25rem
+  }
 
-  const fields = ['feedId', 'status', 'authorId', '...tags.tag', '...tags.score']
-  for (const field of fields) {
-    const card = await statsManager.getCardinality(entriesStore.name, field)
-    html += `<tr><td>${field}</td><td>${card}</td></tr>`
+  // Group tag pairs by tag type for organized display
+  const pairsByType = new Map<string, KeyPairCount[]>()
+  for (const pair of tagPairs) {
+    const type = pair.key1 as string
+    if (!pairsByType.has(type)) {
+      pairsByType.set(type, [])
+    }
+    pairsByType.get(type)!.push(pair)
   }
 
-  html += `
-        </table>
-      </section>
+  // Render tag type summary
+  const tagTypeSummary = tagTypes
+    .map(
+      (t) => `
+    <div class="tag-type-chip" data-tag-type="${escapeHtml(String(t.value))}">
+      <span class="tag-type-name">${escapeHtml(String(t.value))}</span>
+      <span class="tag-type-count">${t.count}</span>
+    </div>
+  `,
+    )
+    .join('')
 
-      <section>
-        <h2>Index Store Sizes (from IDB)</h2>
-        <table id="index-sizes-table">
-          <tr><th>Store</th><th>Row Count</th></tr>
+  // Render the main tag cloud (all values, sized by count)
+  const cloudTags = tagPairs
+    .slice(0, 80) // Limit for performance
+    .map((pair) => {
+      const fontSize = calcFontSize(pair.count)
+      const tagType = pair.key1 as string
+      const tagValue = pair.key2 as string
+      return `
+      <span class="cloud-tag" 
+            style="font-size: ${fontSize}rem" 
+            data-tag-type="${escapeHtml(tagType)}"
+            data-tag-value="${escapeHtml(tagValue)}"
+            title="${escapeHtml(tagType)}: ${escapeHtml(tagValue)} (${pair.count} entries)">
+        ${escapeHtml(tagValue)}
+      </span>
+    `
+    })
+    .join('')
+
+  // Render category breakdown (grouped by tag type)
+  const categoryBreakdown = [...pairsByType.entries()]
+    .sort((a, b) => b[1].length - a[1].length)
+    .slice(0, 5) // Top 5 tag types
+    .map(
+      ([type, pairs]) => `
+    <div class="tag-category">
+      <h4 class="tag-category-title">${escapeHtml(type)} <span class="tag-category-count">(${pairs.length} values)</span></h4>
+      <div class="tag-category-values">
+        ${pairs
+          .slice(0, 15)
+          .map(
+            (p) => `
+          <span class="category-value" data-tag-type="${escapeHtml(type)}" data-tag-value="${escapeHtml(String(p.key2))}">
+            ${escapeHtml(String(p.key2))} <span class="value-count">${p.count}</span>
+          </span>
+        `,
+          )
+          .join('')}
+        ${pairs.length > 15 ? `<span class="more-values">+${pairs.length - 15} more</span>` : ''}
+      </div>
+    </div>
+  `,
+    )
+    .join('')
+
+  // Feed tags section
+  const feedTagsHtml =
+    feedTagPairs.length > 0
+      ? `
+    <div class="feed-tags-section">
+      <h3>Feed Tags</h3>
+      <div class="feed-tag-cloud">
+        ${feedTagPairs
+          .slice(0, 30)
+          .map(
+            (pair) => `
+          <span class="feed-cloud-tag" title="${escapeHtml(String(pair.key1))}: ${escapeHtml(String(pair.key2))} (${pair.count} feeds)">
+            ${escapeHtml(String(pair.key2))}
+            <span class="feed-tag-count">${pair.count}</span>
+          </span>
+        `,
+          )
+          .join('')}
+      </div>
+    </div>
   `
+      : ''
 
-  for (const [storeName, count] of storeCounts) {
-    const label = storeName === entriesStore.name ? `primary (${storeName})` : storeName
-    html += `<tr><td>${label}</td><td>${count}</td></tr>`
+  return `
+    <section class="content-section tag-cloud-section">
+      <h2>Tag Cloud</h2>
+      <p class="tag-cloud-intro">Aggregated tags from your podcast entries using <code>collectIndexValues</code> and <code>collectKeyPairs</code>.</p>
+      
+      <div class="tag-type-summary">
+        <h3>Tag Types (${tagTypes.length})</h3>
+        <div class="tag-type-chips">
+          ${tagTypeSummary}
+        </div>
+      </div>
+
+      <div class="main-cloud">
+        <h3>All Tags</h3>
+        <div class="cloud-container">
+          ${cloudTags}
+        </div>
+      </div>
+
+      <div class="category-breakdown">
+        <h3>By Category</h3>
+        ${categoryBreakdown}
+      </div>
+
+      ${feedTagsHtml}
+    </section>
+  `
+}
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+function stripHtml(html: string): string {
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return div.textContent || ''
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
   }
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
 
-  html += `
-        </table>
-      </section>
+async function render() {
+  let contentHtml = ''
+
+  switch (currentView) {
+    case 'feeds':
+      contentHtml = await renderFeedsList()
+      break
+    case 'entries':
+      contentHtml = await renderEntriesList()
+      break
+    case 'tagcloud':
+      contentHtml = await renderTagCloud()
+      break
+    case 'queries':
+      contentHtml = await renderQueryPlayground()
+      break
+  }
+
+  const controlsHtml = await renderControls()
+
+  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+    <div class="app-container">
+      <h1>Podcast Feed Reader</h1>
+      <p class="subtitle">DocStore Query Planner Test Harness</p>
+      ${controlsHtml}
+      ${contentHtml}
     </div>
   `
 
-  document.querySelector<HTMLDivElement>('#app')!.innerHTML = html
+  attachEventHandlers()
+}
+
+// =============================================================================
+// Event handlers
+// =============================================================================
+
+function attachEventHandlers() {
+  // Import OPML
+  document.getElementById('import-opml-btn')?.addEventListener('click', () => {
+    document.getElementById('opml-file')?.click()
+  })
+
+  document.getElementById('opml-file')?.addEventListener('change', async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (!file) return
+
+    updateStatus('Reading OPML file...')
+    const content = await file.text()
 
-  // Attach event handlers
-  document.getElementById('add-entries-btn')!.onclick = async () => {
-    const btn = document.getElementById('add-entries-btn') as HTMLButtonElement
-    btn.disabled = true
-    btn.textContent = 'Adding...'
+    updateStatus('Importing feeds...')
+    try {
+      const result = await importOpml(content)
+      updateStatus(
+        `Imported ${result.feedsAdded} feeds with ${result.totalEntries} entries. ${result.errors.length} errors.`,
+      )
+      if (result.errors.length > 0) {
+        console.error('Import errors:', result.errors)
+      }
+      await render()
+    } catch (err) {
+      updateStatus(`Import failed: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  })
 
-    await addEntries(1000)
-    document.getElementById('entry-count')!.textContent = `Entries: ${entryCount}`
+  // Add single feed
+  document.getElementById('add-feed-btn')?.addEventListener('click', async () => {
+    const input = document.getElementById('feed-url-input') as HTMLInputElement
+    const url = input.value.trim()
+    if (!url) return
 
-    btn.disabled = false
-    btn.textContent = 'Add 1000 Entries'
+    updateStatus(`Fetching ${url}...`)
+    try {
+      const result = await addFeed(url)
+      updateStatus(`Added "${result.feed.title}" with ${result.entriesCount} entries`)
+      input.value = ''
+      await render()
+    } catch (err) {
+      updateStatus(`Failed: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  })
 
-    await refreshPlans()
-  }
+  // Refresh all
+  document.getElementById('refresh-all-btn')?.addEventListener('click', async () => {
+    updateStatus('Refreshing all feeds...')
+    try {
+      const result = await refreshAllFeeds()
+      updateStatus(`Refreshed ${result.feedsRefreshed} feeds, ${result.totalEntries} entries updated`)
+      await render()
+    } catch (err) {
+      updateStatus(`Refresh failed: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  })
 
-  document.getElementById('clear-db-btn')!.onclick = async () => {
-    // Delete the database and reload
+  // Clear database
+  document.getElementById('clear-db-btn')?.addEventListener('click', async () => {
+    if (!confirm('Clear all feeds and entries?')) return
     db.close()
-    indexedDB.deleteDatabase('docstore-demo')
+    indexedDB.deleteDatabase('podcast-reader')
     window.location.reload()
-  }
+  })
 
-  // Attach run query buttons
-  attachQueryButtons()
+  // Navigation
+  document.querySelectorAll('.nav-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      currentView = (e.target as HTMLElement).dataset.view as typeof currentView
+      await render()
+    })
+  })
+
+  // Refresh individual feed
+  document.querySelectorAll('.refresh-feed-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const feedId = (e.target as HTMLElement).dataset.feedId!
+      updateStatus('Refreshing feed...')
+      try {
+        const result = await refreshFeed(feedId)
+        updateStatus(`Refreshed with ${result.entriesCount} entries`)
+        await render()
+      } catch (err) {
+        updateStatus(`Refresh failed: ${err instanceof Error ? err.message : String(err)}`)
+      }
+    })
+  })
+
+  // Query buttons
+  attachQueryHandlers()
 }
 
-function attachQueryButtons() {
-  document.querySelectorAll('.run-query-btn').forEach((btn) => {
+async function attachQueryHandlers() {
+  // Get first feed ID for queries
+  const allFeeds = (await collectAll(
+    docs(
+      {db, storeDef: feedsStore as any},
+      {
+        source: 'primary',
+        indexName: null,
+        keyRange: null,
+        direction: 'next',
+        filter: [],
+        needsSort: false,
+        availableFields: Object.keys(feedsStore.schema),
+        estimatedRows: 10,
+        selectivity: 1,
+      },
+    ),
+  )) as Feed[]
+  const firstFeedId = allFeeds[0]?.id || 'no-feeds'
+
+  document.querySelectorAll('.run-rows-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const idx = parseInt((e.target as HTMLElement).dataset.queryIdx!)
+      const storeName = (e.target as HTMLElement).dataset.store as 'feeds' | 'entries'
+      const query = sampleQueries[idx]
+      const resultsEl = document.getElementById(`results-${idx}`)!
+
+      // Replace placeholder
+      const spec = JSON.parse(JSON.stringify(query.spec))
+      for (const clause of spec.where) {
+        if (clause.value === '__FEED_ID__') clause.value = firstFeedId
+      }
+
+      resultsEl.innerHTML = '<div class="loading">Running...</div>'
+
+      const planner = storeName === 'feeds' ? feedsPlanner : entriesPlanner
+      const storeDef = storeName === 'feeds' ? feedsStore : entriesStore
+
+      const result = await executeQuery(planner, storeDef, spec)
+
+      resultsEl.innerHTML = `
+        ${formatPlan(result.plan)}
+        <div class="results-header">First 20 rows:</div>
+        <pre>${JSON.stringify(result.rows, dateReplacer, 2)}</pre>
+      `
+    })
+  })
+
+  document.querySelectorAll('.run-docs-btn').forEach((btn) => {
     btn.addEventListener('click', async (e) => {
-      const queryId = parseInt((e.target as HTMLElement).dataset.queryId!)
-      const spec = sampleQueries[queryId].spec
-      const plan = await planner.plan(spec)
+      const idx = parseInt((e.target as HTMLElement).dataset.queryIdx!)
+      const storeName = (e.target as HTMLElement).dataset.store as 'feeds' | 'entries'
+      const query = sampleQueries[idx]
+      const resultsEl = document.getElementById(`results-${idx}`)!
 
-      const resultsEl = document.getElementById(`results-${queryId}`)!
-      resultsEl.innerHTML = '<div class="loading">Querying IDB...</div>'
+      const spec = JSON.parse(JSON.stringify(query.spec))
+      for (const clause of spec.where) {
+        if (clause.value === '__FEED_ID__') clause.value = firstFeedId
+      }
 
-      const results = await executeQuery(plan)
+      resultsEl.innerHTML = '<div class="loading">Running...</div>'
+
+      const planner = storeName === 'feeds' ? feedsPlanner : entriesPlanner
+      const storeDef = storeName === 'feeds' ? feedsStore : entriesStore
+
+      const result = await executeDocsQuery(planner, storeDef, spec)
+
+      // Truncate content field for display
+      const truncatedDocs = result.docs.map((d) => ({
+        ...d,
+        content: d.content ? (d.content as string).slice(0, 100) + '...' : undefined,
+      }))
 
       resultsEl.innerHTML = `
-        <div class="results-header">First 5 rows from IDB:</div>
-        <pre>${JSON.stringify(
-          results,
-          (key, value) => {
-            if (value instanceof Date) return value.toISOString()
-            return value
-          },
-          2,
-        )}</pre>
+        ${formatPlan(result.plan)}
+        <div class="results-header">First 10 docs (content truncated):</div>
+        <pre>${JSON.stringify(truncatedDocs, dateReplacer, 2)}</pre>
       `
     })
   })
-}
 
-async function refreshPlans() {
-  document.getElementById('query-entry-count')!.textContent = String(entryCount)
+  document.querySelectorAll('.run-count-btn').forEach((btn) => {
+    btn.addEventListener('click', async (e) => {
+      const idx = parseInt((e.target as HTMLElement).dataset.queryIdx!)
+      const storeName = (e.target as HTMLElement).dataset.store as 'feeds' | 'entries'
+      const query = sampleQueries[idx]
+      const resultsEl = document.getElementById(`results-${idx}`)!
 
-  const container = document.getElementById('queries-container')!
-  let html = ''
+      const spec = JSON.parse(JSON.stringify(query.spec))
+      for (const clause of spec.where) {
+        if (clause.value === '__FEED_ID__') clause.value = firstFeedId
+      }
 
-  for (let i = 0; i < sampleQueries.length; i++) {
-    const {name, spec} = sampleQueries[i]
-    const plan = await planner.plan(spec)
-    html += `
-      <div class="query">
-        <h3>${name}</h3>
-        <pre class="query-spec">${JSON.stringify(spec.where, null, 2)}${spec.orderBy ? '\nORDER BY ' + spec.orderBy.key + ' ' + spec.orderBy.direction.toUpperCase() : ''}</pre>
-        ${formatPlan(plan, i)}
-      </div>
-    `
-  }
+      resultsEl.innerHTML = '<div class="loading">Counting...</div>'
 
-  container.innerHTML = html
-  attachQueryButtons()
+      const planner = storeName === 'feeds' ? feedsPlanner : entriesPlanner
+      const storeDef = storeName === 'feeds' ? feedsStore : entriesStore
 
-  // Update cardinality table
-  const cardTable = document.getElementById('cardinality-table')!
-  let cardHtml = '<tr><th>Field</th><th>Estimated Cardinality</th></tr>'
-  const fields = ['feedId', 'status', 'authorId', '...tags.tag', '...tags.score']
-  for (const field of fields) {
-    const card = await statsManager.getCardinality(entriesStore.name, field)
-    cardHtml += `<tr><td>${field}</td><td>${card}</td></tr>`
-  }
-  cardTable.innerHTML = cardHtml
+      const startTime = performance.now()
+      const result = await executeCountQuery(planner, storeDef, spec)
+      const elapsed = performance.now() - startTime
 
-  // Update index sizes table from IDB
-  const storeCounts = await getStoreCounts()
-  const sizesTable = document.getElementById('index-sizes-table')!
-  let sizesHtml = '<tr><th>Store</th><th>Row Count</th></tr>'
-  for (const [storeName, count] of storeCounts) {
-    const label = storeName === entriesStore.name ? `primary (${storeName})` : storeName
-    sizesHtml += `<tr><td>${label}</td><td>${count}</td></tr>`
+      resultsEl.innerHTML = `
+        ${formatPlan(result.plan)}
+        <div class="results-header">Count: ${result.count}</div>
+        <div>Time: ${elapsed.toFixed(2)}ms</div>
+      `
+    })
+  })
+}
+
+function dateReplacer(_key: string, value: unknown) {
+  if (value instanceof Date) {
+    return value.toISOString()
   }
-  sizesTable.innerHTML = sizesHtml
+  return value
 }
 
 // =============================================================================
···
     background: #1a1a1a;
     color: #e0e0e0;
     margin: 0;
+    font-family: system-ui, -apple-system, sans-serif;
   }
 
-  .demo {
-    max-width: 1000px;
+  .app-container {
+    max-width: 1200px;
+    margin: 0 auto;
     padding: 20px;
-    font-family: system-ui, -apple-system, sans-serif;
   }
 
   h1 {
-    border-bottom: 2px solid #555;
-    padding-bottom: 10px;
+    margin-bottom: 5px;
   }
 
-  h2 {
-    margin-top: 30px;
-    color: #aaa;
+  .subtitle {
+    color: #888;
+    margin-top: 0;
+    margin-bottom: 20px;
   }
 
-  h3 {
-    margin-top: 20px;
-    color: #999;
+  .controls {
+    background: #252525;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
   }
 
-  pre {
-    background: #2a2a2a;
-    padding: 15px;
-    border-radius: 5px;
-    overflow-x: auto;
-    font-size: 13px;
-    color: #d0d0d0;
-    border: 1px solid #3a3a3a;
+  .control-row {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-wrap: wrap;
   }
 
-  .idb-badge {
-    display: inline-block;
-    background: #2a5a2a;
-    color: #8f8;
-    padding: 5px 15px;
-    border-radius: 15px;
+  .stats-row {
+    display: flex;
+    gap: 20px;
+    margin-top: 10px;
     font-size: 14px;
-    margin-bottom: 15px;
+    color: #888;
   }
 
-  .controls {
+  .stats-row span {
+    padding: 4px 8px;
+    background: #333;
+    border-radius: 4px;
+  }
+
+  #status-message {
+    color: #8a8;
+    flex: 1;
+  }
+
+  .nav-row {
     display: flex;
-    gap: 15px;
-    align-items: center;
-    padding: 15px;
-    background: #252525;
-    border-radius: 8px;
-    margin-bottom: 20px;
+    gap: 10px;
+    margin-top: 15px;
+    border-top: 1px solid #333;
+    padding-top: 15px;
+  }
+
+  .nav-btn {
+    background: #333;
+    border: 1px solid #444;
+  }
+
+  .nav-btn.active {
+    background: #4a7a4a;
+    border-color: #5a8a5a;
+  }
+
+  input[type="text"] {
+    background: #333;
+    border: 1px solid #444;
+    color: #e0e0e0;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+
+  input[type="text"]:focus {
+    outline: none;
+    border-color: #5a8a5a;
   }
 
   button {
     background: #3a5a8a;
     color: #fff;
     border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
+    padding: 8px 16px;
+    border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
   }
···
     background: #4a6a9a;
   }
 
-  button:disabled {
-    background: #444;
-    cursor: not-allowed;
+  button.danger {
+    background: #8a4a4a;
   }
 
-  .run-query-btn {
-    margin-top: 10px;
+  button.danger:hover {
+    background: #9a5a5a;
+  }
+
+  .content-section {
+    background: #222;
+    padding: 20px;
+    border-radius: 8px;
+  }
+
+  .content-section h2 {
+    margin-top: 0;
+    color: #aaa;
+    border-bottom: 1px solid #333;
+    padding-bottom: 10px;
+  }
+
+  .empty-state {
+    color: #666;
+    font-style: italic;
+    text-align: center;
+    padding: 40px;
+  }
+
+  /* Feeds list */
+  .feeds-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .feed-item {
+    background: #2a2a2a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 15px;
+  }
+
+  .feed-header {
+    display: flex;
+    gap: 15px;
+    align-items: flex-start;
+  }
+
+  .feed-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+
+  .feed-image-placeholder {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    background: #333;
+  }
+
+  .feed-info {
+    flex: 1;
+  }
+
+  .feed-title {
+    margin: 0 0 5px 0;
+    font-size: 16px;
+  }
+
+  .feed-url {
+    color: #6a9aca;
+    font-size: 12px;
+    text-decoration: none;
+    word-break: break-all;
+  }
+
+  .feed-url:hover {
+    text-decoration: underline;
+  }
+
+  .feed-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 12px;
+    color: #888;
+    margin-top: 8px;
+  }
+
+  .feed-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 8px;
+  }
+
+  .tag {
+    background: #3a4a3a;
+    color: #8a8;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+  }
+
+  .tag-more {
+    color: #666;
+    font-size: 11px;
+  }
+
+  .refresh-feed-btn {
     background: #4a7a4a;
+    padding: 6px 12px;
+    font-size: 12px;
   }
 
-  .run-query-btn:hover {
-    background: #5a8a5a;
+  /* Entries list */
+  .entries-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
-  #clear-db-btn {
-    background: #8a4a4a;
+  .entry-item {
+    background: #2a2a2a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 12px;
+  }
+
+  .entry-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .entry-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .entry-link {
+    color: #6a9aca;
+    font-size: 12px;
+    text-decoration: none;
+    white-space: nowrap;
   }
 
-  #clear-db-btn:hover {
-    background: #9a5a5a;
+  .entry-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 12px;
+    color: #888;
+    margin-top: 6px;
   }
 
-  #entry-count {
+  .entry-duration {
     color: #8a8;
-    font-weight: bold;
   }
 
-  .query {
-    border: 1px solid #444;
+  .entry-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 6px;
+  }
+
+  .entry-content-preview {
+    font-size: 12px;
+    color: #666;
+    margin-top: 8px;
+    line-height: 1.4;
+  }
+
+  /* Query playground */
+  .queries-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .query-item {
+    background: #2a2a2a;
+    border: 1px solid #333;
     border-radius: 8px;
     padding: 15px;
-    margin: 15px 0;
-    background: #222;
+  }
+
+  .query-item h3 {
+    margin: 0 0 10px 0;
+    font-size: 14px;
+    color: #aaa;
   }
 
   .query-spec {
     background: #1e3a4a;
-    border-color: #2a5a6a;
+    border: 1px solid #2a5a6a;
+    padding: 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    overflow-x: auto;
+    margin: 0 0 10px 0;
+  }
+
+  .query-buttons {
+    display: flex;
+    gap: 10px;
+  }
+
+  .query-buttons button {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  .run-rows-btn {
+    background: #4a7a4a;
+  }
+
+  .run-docs-btn {
+    background: #3a5a8a;
+  }
+
+  .run-count-btn {
+    background: #7a4a7a;
+  }
+
+  .query-results {
+    margin-top: 10px;
+  }
+
+  .query-results pre {
+    background: #1a1a1a;
+    padding: 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    overflow-x: auto;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .results-header {
+    color: #8a8;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  .loading {
+    color: #aa8;
+    font-style: italic;
   }
 
   .plan {
     background: #1e2e1e;
-    padding: 15px;
-    border-radius: 5px;
+    padding: 10px;
+    border-radius: 4px;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    gap: 5px;
+    font-size: 11px;
+    margin-bottom: 10px;
     border: 1px solid #2a4a2a;
   }
 
···
     border-color: #3a4a6a;
   }
 
-  .plan div {
-    font-size: 14px;
+  .plan strong {
+    color: #8a8;
   }
 
   .intersection-info {
-    grid-column: 1 / -1;
     background: #3a4a3a;
-    padding: 10px;
+    padding: 8px;
     border-radius: 4px;
-    margin-top: 8px;
+    font-size: 11px;
+    margin-top: 5px;
     border: 1px dashed #5a7a5a;
   }
 
-  .intersection-details {
+  .intersection-info strong {
+    color: #afa;
+  }
+
+  /* Tag Cloud */
+  .tag-cloud-section h3 {
+    color: #aaa;
+    margin: 20px 0 10px 0;
+    font-size: 14px;
+    border-bottom: 1px solid #333;
+    padding-bottom: 8px;
+  }
+
+  .tag-cloud-intro {
+    color: #888;
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+
+  .tag-cloud-intro code {
+    background: #333;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #8cf;
+  }
+
+  .tag-type-chips {
     display: flex;
-    gap: 20px;
-    margin-top: 5px;
-    font-size: 13px;
-    color: #8fa;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
-  .query-results {
-    margin-top: 10px;
+  .tag-type-chip {
+    background: #2a3a4a;
+    border: 1px solid #3a5a6a;
+    border-radius: 20px;
+    padding: 6px 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
   }
 
-  .results-header {
+  .tag-type-chip:hover {
+    background: #3a4a5a;
+    border-color: #5a7a8a;
+  }
+
+  .tag-type-name {
+    color: #8cf;
+    font-weight: 500;
+  }
+
+  .tag-type-count {
+    background: #1a2a3a;
+    color: #6a8a9a;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+  }
+
+  .main-cloud {
+    margin: 20px 0;
+  }
+
+  .cloud-container {
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 20px;
+    line-height: 2.2;
+    text-align: center;
+  }
+
+  .cloud-tag {
+    display: inline-block;
+    margin: 4px 8px;
     color: #8a8;
-    margin-bottom: 5px;
-    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.15s;
+    padding: 2px 4px;
+    border-radius: 3px;
   }
 
-  .loading {
-    color: #aa8;
-    font-style: italic;
+  .cloud-tag:hover {
+    color: #afa;
+    background: #2a3a2a;
+  }
+
+  .cloud-tag[data-tag-type="category"] { color: #8cf; }
+  .cloud-tag[data-tag-type="category"]:hover { color: #aef; background: #2a3a4a; }
+
+  .cloud-tag[data-tag-type="author"] { color: #f8a; }
+  .cloud-tag[data-tag-type="author"]:hover { color: #fac; background: #3a2a3a; }
+
+  .cloud-tag[data-tag-type="media-type"] { color: #8fa; }
+  .cloud-tag[data-tag-type="media-type"]:hover { color: #afc; background: #2a3a2a; }
+
+  .cloud-tag[data-tag-type="keyword"] { color: #fa8; }
+  .cloud-tag[data-tag-type="keyword"]:hover { color: #fca; background: #3a3a2a; }
+
+  .category-breakdown {
+    margin: 20px 0;
   }
 
-  .ingest-result {
-    margin-top: 10px;
+  .tag-category {
+    background: #252525;
+    border: 1px solid #333;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 12px;
   }
 
-  .store-group {
-    margin-top: 10px;
-    padding: 5px;
-    background: #333;
-    border-radius: 3px;
+  .tag-category-title {
+    margin: 0 0 10px 0;
+    color: #8cf;
+    font-size: 13px;
   }
 
-  table {
-    border-collapse: collapse;
-    width: 100%;
+  .tag-category-count {
+    color: #666;
+    font-weight: normal;
   }
 
-  th, td {
-    border: 1px solid #444;
-    padding: 10px;
-    text-align: left;
+  .tag-category-values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
   }
 
-  th {
+  .category-value {
     background: #2a2a2a;
+    border: 1px solid #3a3a3a;
+    border-radius: 4px;
+    padding: 4px 10px;
+    font-size: 12px;
+    color: #aaa;
+    cursor: pointer;
+    transition: all 0.15s;
   }
 
-  strong {
-    color: #b0b0b0;
+  .category-value:hover {
+    background: #3a3a3a;
+    border-color: #4a4a4a;
+    color: #ddd;
+  }
+
+  .value-count {
+    color: #666;
+    font-size: 10px;
+    margin-left: 4px;
+  }
+
+  .more-values {
+    color: #666;
+    font-size: 12px;
+    font-style: italic;
+    padding: 4px 10px;
+  }
+
+  .feed-tags-section {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #333;
+  }
+
+  .feed-tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .feed-cloud-tag {
+    background: #2a3a2a;
+    border: 1px solid #3a5a3a;
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: #8a8;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .feed-cloud-tag:hover {
+    background: #3a4a3a;
+    border-color: #5a7a5a;
+    color: #afa;
+  }
+
+  .feed-tag-count {
+    background: #1a2a1a;
+    color: #5a7a5a;
+    padding: 1px 6px;
+    border-radius: 8px;
+    font-size: 10px;
+    margin-left: 6px;
   }
 `
 document.head.appendChild(style)
···
 // =============================================================================
 
 async function init() {
-  // Install the schema into IndexedDB
-  // Version 3: using real StatsManager with idb
-  db = await docstore.install('docstore-demo', entriesStore, {version: 3})
-
-  // Create stats manager with idb database
-  statsManager = new StatsManager({db})
+  // Install both stores in a single call to avoid version mismatch issues
+  db = await docstore.install('podcast-reader', [feedsStore, entriesStore], {version: 1})
 
-  // Create query planner
-  planner = new QueryPlanner(entriesStore, statsManager)
-
-  // Check if we already have data
-  const tx = db.transaction(entriesStore.name, 'readonly')
-  entryCount = await tx.objectStore(entriesStore.name).count()
-  await tx.done
+  // Create stats managers
+  feedsStatsManager = new StatsManager({db})
+  entriesStatsManager = new StatsManager({db})
 
-  // If empty, seed with initial entries
-  if (entryCount === 0) {
-    await addEntries(100)
-  } else {
-    // Update nextEntryId to avoid collisions
-    nextEntryId = entryCount
-  }
+  // Create query planners
+  feedsPlanner = new QueryPlanner(feedsStore, feedsStatsManager)
+  entriesPlanner = new QueryPlanner(entriesStore, entriesStatsManager)
 
-  // Render the demo
-  await renderDemo()
+  // Render the UI
+  await render()
 }
 
 init().catch(console.error)