Study page: chunk list as a slide-over card, notes and resources as tabs in one column

- Chunks: a tab on the left edge opens a card over the passage; choosing a
  chunk, Esc, or clicking the passage closes it (state remembered)
- Right column: Notes is the first tab, followed by the resource tabs;
  the separate notes and resources boxes and their fold state are gone
- Column can be dragged wider (up to 960px)
- Pop-out icon opens the whole column in a large window (PopOut)
- Tests updated for the tabbed layout; new tests for the chunk card and pop-out

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

.gitignore

@@ -13,3 +13,11 @@ coverage/
 .env
 .session-secret
 server/data/backups/
+
+# Playwright
+e2e/.auth.json
+test-results/
+playwright-report/
+
+# a local demo video, not part of the app
+demo/

README.md

@@ -151,10 +151,17 @@ Private / personal use.
 ## Development
 
 ```bash
-npm run test:run   # all tests
+npm run test:run   # all unit and component tests
+npm run test:e2e   # real-browser tests (Playwright, in your installed Chrome)
 npm run lint       # ESLint (errors fail; warnings are advice)
 ```
 
+The browser tests (`e2e/`) build the app, run it on port 3101 with an empty throwaway database (your real studies are never
+touched), make an account, and click through the main flows: writing notes and the paste check, the daily five minutes and weekly
+recall, comparing translations (Bible text is faked, so no internet is needed), and presenting on two screens. They use the
+Chrome already on the computer, so there is no browser to download; install Chrome, or change `channel` in `playwright.config.js`
+and run `npx playwright install` to use Playwright's own browser.
+
 Who can sign up: the administrator (the `ADMIN_EMAIL` account) chooses Open, Invite only or Closed under Admin → Sign-ups, and makes single-use invite links there. The very first account can always be created.
 
 Verse of the day push: with `IQBIBLE_API_KEY` set, each person can turn on a daily verse notification in Settings → Reading reminders (it goes to the same ntfy topic).

TODO.md

@@ -9,12 +9,14 @@ Ideas for the app that haven't been built yet, roughly in the order I'd do them.
       "sign out other devices"; optionally a login alert through ntfy.
 - [x] **Server health page for the admin.** Last backup, disk use, failed notifications, recent sign-in failures, and a
       "restore a snapshot" button (snapshots already exist under `DATA_DIR/backups`).
-- [ ] **Checks on every push.** Run tests and lint on the Gitea server, plus a few real-browser tests (Playwright) for sign-in,
-      creating a study and syncing; so far everything is tested in simulation.
+- [ ] **Checks on every push.** Run `npm run test:run`, `npm run lint` and `npm run test:e2e` on the Gitea server for every push.
+      The real-browser tests now exist (`e2e/`, run by hand); what's left is running them automatically, and adding sign-in
+      and cross-device sync to them.
 - [x] **Split `server/index.js`** into one file per area (`server/routes/`: auth, account, projects, reader, sharing, admin).
 
 ## Teaching together
-- [ ] **Comments between co-teachers.** Notes on a chunk addressed to the other person, instead of editing each other's text.
+- [x] **Comments between co-teachers.** Comments on a chunk (under "More"), merged between copies and ticked off when dealt with.
+      Still to do: address a comment to one person, and notify them.
 - [ ] **Live updates and "who's here".** A co-teacher's changes appear within seconds, with a marker like "Sam is on chunk 3"
       (server-sent events or short polling). Today changes arrive when the tab regains focus or every couple of minutes.
 - [ ] **Ask Claude inside the app.** Draft discussion questions, tighten an outline point, summarise notes, using the owner's own
@@ -22,7 +24,7 @@ Ideas for the app that haven't been built yet, roughly in the order I'd do them.
 
 ## Reading
 - [ ] **Read-aloud with highlighting.** The device's voice reads the chapter and the verse being read is highlighted; useful for
-      the BSB and NET, which have no audio.
+      the NET and other translations that have no matching audio (the BSB and ESV already have narration).
 - [x] **Cross-reference map.** A picture of the links between chapters, from IQ Bible's reference graph (needs the IQ Bible key).
 
 ## Decided against, for now

e2e/auth.setup.js

@@ -0,0 +1,12 @@
+// Makes one account in the throwaway database and keeps its sign-in for the other tests.
+import { test as setup, expect } from '@playwright/test';
+
+setup('create an account and sign in', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: /need an account\? sign up/i }).click();
+  await page.locator('input[type="email"]').fill('e2e@example.test');
+  await page.locator('input[type="password"]').fill('E2e-Test-Password-7391');
+  await page.getByRole('button', { name: 'Create account' }).click();
+  await expect(page.getByRole('heading', { name: 'My Studies' })).toBeVisible();
+  await page.context().storageState({ path: 'e2e/.auth.json' });
+});

e2e/compare.spec.js

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { resumeButton, seedStudy } from './helpers.js';
+
+// Fake the free Bible text so the test needs no internet: every translation answers with its own wording.
+const WORDING = {
+  BSB: { 16: 'For God so loved the world that He gave His one and only Son', 17: 'For God did not send His Son into the world to condemn the world', 18: 'Whoever believes in Him is not condemned' },
+  NET: { 16: 'For this is the way God loved the world: He gave his one and only Son', 17: 'For God did not send his Son into the world to condemn the world', 18: 'The one who believes in him is not condemned' },
+};
+
+test('compare translations with differences highlighted, a verse note, and the notes boxes', async ({ page }) => {
+  await page.route('https://bible.helloao.org/api/**', async (route) => {
+    const id = route.request().url().match(/api\/([^/]+)\//)[1].replace('eng_', '').toUpperCase();
+    const words = WORDING[id] ?? WORDING.BSB;
+    await route.fulfill({ json: { verses: Object.entries(words).map(([number, text]) => ({ number: Number(number), text })) } });
+  });
+  const { title } = await seedStudy(page);
+  await resumeButton(page, title).click();
+  await page.getByRole('button', { name: /compare…/i }).click();
+  await page.getByRole('tab', { name: 'Translations' }).click();
+
+  const dialog = page.getByRole('dialog', { name: /compare/i });
+  await expect(dialog.getByText('Berean Standard Bible')).toBeVisible();
+  await expect(dialog.getByText('NET Bible', { exact: true })).toBeVisible();
+  await expect(dialog.locator('mark').first()).toBeVisible(); // words that differ are marked
+  await dialog.getByLabel(/highlight the words that differ/i).uncheck();
+  await expect(dialog.locator('mark')).toHaveCount(0);
+
+  // a note on one verse, and the Observe / Interpret / Apply boxes edit the same notes as the Study page
+  await dialog.getByRole('textbox', { name: 'Note on verse 16' }).fill('NET says "the way" where BSB says "so"');
+  await expect(dialog.getByRole('textbox', { name: 'Interpret' })).toHaveValue(/not a slogan/);
+  await dialog.getByRole('textbox', { name: 'Apply' }).fill('Decide one thing to trust him with.');
+  await dialog.getByRole('button', { name: 'Close' }).click();
+  await page.getByRole('button', { name: 'Your notes' }).first().click(); // keep both halves tidy
+  await page.keyboard.press('3');
+  await expect(page.getByRole('textbox', { name: 'Apply' })).toHaveValue('Decide one thing to trust him with.');
+  await expect(page.getByRole('textbox', { name: 'Verse 16 note' })).toHaveValue(/the way/);
+});

e2e/helpers.js

@@ -0,0 +1,51 @@
+// Shared test helpers: a ready-made study so tests don't depend on downloading Bible text.
+const DAY = 86400000;
+const verses = [
+  { number: 16, text: 'For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.' },
+  { number: 17, text: 'For God sent not his Son into the world to condemn the world; but that the world through him might be saved.' },
+  { number: 18, text: 'He that believeth on him is not condemned: but he that believeth not is condemned already.' },
+  { number: 19, text: 'And this is the condemnation, that light is come into the world, and men loved darkness rather than light, because their deeds were evil.' },
+];
+export const NOTE_TEXT = {
+  observation: 'Jesus is speaking to Nicodemus at night. The verse starts with "for", so it explains the previous verses about the serpent lifted up. God is the one who acts: he loved, he gave.',
+  interpretation: 'In its setting this is not a slogan but the reason the cross happens. The world is the object of love, not just the good in it. Giving the Son points back to Moses lifting the serpent.',
+  application: 'I do not have to earn being loved before I trust him. This week I want to stop treating belief as a feeling and decide one concrete thing to trust him with.',
+};
+export const SPEAKER_NOTE = 'PRIVATE: open with the story about Nicodemus at night, then pause after perish.';
+
+// Writes a two-chunk John 3 study (edited two weeks ago, so a weekly recall is due) into this browser's storage
+// for the signed-in account, then reloads.
+export async function seedStudy(page, { id = `e2e-${Date.now()}-${Math.floor(Math.random() * 1e6)}`, withOutline = false } = {}) {
+  await page.goto('/');
+  await page.waitForFunction(() => Object.keys(localStorage).some((k) => /^bible-study-index:.+:known$/.test(k)));
+  await page.evaluate(({ id, verses, notes, speakerNote, withOutline, DAY }) => {
+    const uid = Object.keys(localStorage).find((k) => /^bible-study-index:.+:known$/.test(k)).split(':')[1];
+    const now = Date.now();
+    const chunk = (cid, s, e, extra) => ({ id: cid, startVerse: s, endVerse: e, spilloverEndVerse: null, observation: '', interpretation: '', application: '', crossReferences: [], greekWords: [], generalNotes: '', episodeNumber: '', episodeTitle: '', finalScript: '', tags: [], editedAt: now - 14 * DAY, ...extra });
+    const node = (nid, text, extra = {}) => ({ id: nid, text, ref: '', chunkId: null, note: '', kind: '', minutes: null, scripture: null, attachments: [], children: [], ...extra });
+    const a = chunk(`${id}-a`, 16, 18, { ...notes });
+    const b = chunk(`${id}-b`, 19, 19, {});
+    // a title of its own: studies from earlier tests sync back through the account, so titles must not repeat
+    const title = `John 3 (${id.slice(-6)})`;
+    const outline = withOutline ? [node('n1', 'God so loved', { minutes: 5, note: speakerNote, ref: 'John 3:16', scripture: { text: verses[0].text, ref: 'John 3:16' } }), node('n2', 'Light and darkness', { minutes: 5 })] : [];
+    const project = { id, title, translation: 'BSB', lastEdited: now - 2 * DAY, selectedChunkId: a.id, outline, chapters: [{ book: 'John', bookAbbrev: 'JHN', chapter: '3', verses, chunks: [a, b] }] };
+    localStorage.setItem(`bible-study-project:${uid}:${id}`, JSON.stringify(project));
+    const index = JSON.parse(localStorage.getItem(`bible-study-index:${uid}`) || '[]').filter((e) => e.id !== id);
+    index.push({ id, title: project.title, lastEdited: project.lastEdited, chapterSummary: 'John 3', series: '', tags: [] });
+    localStorage.setItem(`bible-study-index:${uid}`, JSON.stringify(index));
+  }, { id, verses, notes: NOTE_TEXT, speakerNote: SPEAKER_NOTE, withOutline, DAY });
+  await page.reload();
+  return { id, title: `John 3 (${id.slice(-6)})` };
+}
+
+// The Resume button on one study's card on Home
+export const resumeButton = (page, title) => page.getByRole('heading', { name: title }).locator('xpath=ancestor::div[contains(@class,"rounded-2xl")][1]').getByRole('button', { name: 'Resume' });
+
+// Fakes a long paste into a note box (Playwright can't use the real clipboard in every setup)
+export async function pasteInto(locator, text) {
+  await locator.evaluate((el, value) => {
+    const dt = new DataTransfer();
+    dt.setData('text', value);
+    el.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));
+  }, text);
+}

e2e/practice.spec.js

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+import { pasteInto, seedStudy } from './helpers.js';
+
+test('the daily five minutes blocks pasting and saves to the note; the weekly recall rates and records', async ({ page }) => {
+  await seedStudy(page);
+
+  // daily five minutes
+  await expect(page.getByText(/your five minutes:/i)).toBeVisible();
+  await page.getByRole('button', { name: 'Start' }).first().click();
+  const box = page.getByRole('textbox', { name: /your five minutes/i });
+  await expect(page.getByRole('timer')).toContainText('4:');
+  await pasteInto(box, 'text from somewhere else');
+  await expect(page.getByText(/pasting is off here/i)).toBeVisible();
+  await expect(box).toHaveValue('');
+  await box.fill('Three things I notice in the passage.');
+  await page.getByRole('button', { name: /save to my notes/i }).click();
+  await expect(page.getByText(/saved to your notes/i)).toBeVisible();
+
+  // weekly recall: write from memory, compare with the notes, rate it
+  await page.getByRole('button', { name: 'Start' }).click();
+  await page.getByRole('textbox', { name: 'What you remember' }).fill('God loved the world and gave his Son so that believers would not perish.');
+  await page.getByRole('button', { name: 'Show my notes' }).click();
+  await expect(page.getByText('Your notes', { exact: true })).toBeVisible();
+  await page.getByRole('textbox', { name: 'What slipped' }).fill('who Jesus was talking to');
+  await page.getByRole('button', { name: 'Partly' }).click();
+  await expect(page.getByText(/recall saved/i)).toBeVisible();
+
+  // it shows in the history and in Insights
+  await page.getByRole('button', { name: /recall history/i }).click();
+  await expect(page.getByText('Partly', { exact: true }).first()).toBeVisible();
+  await page.getByRole('button', { name: 'Insights' }).click();
+  await expect(page.getByRole('heading', { name: 'Insights' })).toBeVisible();
+  await expect(page.getByText('who Jesus was talking to')).toBeVisible();
+});

e2e/present.spec.js

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { SPEAKER_NOTE, resumeButton, seedStudy } from './helpers.js';
+
+test('presenting on two screens: the audience window never shows the speaker notes', async ({ page, context }) => {
+  const { title } = await seedStudy(page, { withOutline: true });
+  await resumeButton(page, title).click();
+  await page.getByRole('navigation', { name: 'Study stages' }).getByRole('button', { name: 'Outline' }).click();
+  await page.getByRole('button', { name: 'Present' }).click();
+  const presenter = page.getByRole('dialog', { name: /presenting/i });
+
+  // one screen: notes stay hidden until turned on
+  await expect(presenter.getByRole('heading', { name: /God so loved/ })).toBeVisible();
+  await expect(presenter.getByText(SPEAKER_NOTE)).toHaveCount(0);
+
+  // a second window (the projector) connects and follows along
+  const audience = await context.newPage();
+  await audience.goto('/?audience=1');
+  await expect(audience.getByRole('heading', { name: /God so loved/ })).toBeVisible();
+  await expect(presenter.getByText('Only you see this')).toBeVisible();
+  await expect(presenter.getByText(SPEAKER_NOTE)).toBeVisible(); // on the presenter's screen only
+  await expect(audience.getByText(SPEAKER_NOTE)).toHaveCount(0);
+  expect(await audience.locator('body').innerText()).not.toMatch(/PRIVATE|On pace|Start/);
+
+  await page.keyboard.press('ArrowRight');
+  await expect(audience.getByRole('heading', { name: /Light and darkness/ })).toBeVisible();
+
+  // B blacks the audience screen out, and again brings it back
+  await page.keyboard.press('b');
+  await expect(audience.getByRole('heading', { name: /Light and darkness/ })).toHaveCount(0);
+  await page.keyboard.press('b');
+  await expect(audience.getByRole('heading', { name: /Light and darkness/ })).toBeVisible();
+
+  // closing the presentation tells the audience window
+  await presenter.getByRole('button', { name: 'Close' }).click();
+  await expect(audience.getByText(/presentation has ended/i)).toBeVisible();
+});

e2e/start-server.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+# Builds the app and runs the server on port 3101 with a fresh, empty data folder (so tests never touch real studies).
+set -euo pipefail
+cd "$(dirname "$0")/.."
+export DATA_DIR="$(mktemp -d)"
+export PORT=3101
+export NODE_ENV=production
+npx vite build --logLevel error
+exec node server/index.js

e2e/study.spec.js

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { NOTE_TEXT, pasteInto, resumeButton, seedStudy } from './helpers.js';
+
+test('open a study, write notes, answer the paste check, and use the keyboard', async ({ page }) => {
+  const { title } = await seedStudy(page);
+  await expect(page.getByRole('heading', { name: title })).toBeVisible();
+  await expect(page.getByText(/needs a connection for john/i).first()).toBeVisible(); // the offline badge
+  await resumeButton(page, title).click();
+  await expect(page.getByRole('heading', { name: 'John 3:16–18' })).toBeVisible();
+
+  // keyboard: 2 jumps into Interpret, Escape leaves it
+  await page.keyboard.press('2');
+  await expect(page.getByRole('textbox', { name: 'Interpret' })).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('textbox', { name: 'Interpret' })).not.toBeFocused();
+
+  // a long paste asks whether it is from AI; "No, I wrote it" counts the words as yours
+  await page.keyboard.press('1');
+  const observe = page.getByRole('textbox', { name: 'Observe' });
+  const pasted = Array.from({ length: 24 }, (_, i) => `pasted${i}`).join(' ');
+  await pasteInto(observe, pasted);
+  await observe.fill(`${NOTE_TEXT.observation} ${pasted}`);
+  await expect(page.getByText(/is this from ai\?/i)).toBeVisible();
+  await expect(page.getByText(/24 words here were pasted/i)).toBeVisible();
+  await page.getByRole('button', { name: 'No, I wrote it' }).click();
+  await expect(page.getByText(/is this from ai\?/i)).toHaveCount(0);
+  await expect(page.getByText(/were pasted/i)).toHaveCount(0);
+
+  // either half of the right column can be folded
+  const resources = page.getByRole('button', { name: /commentary & resources/i });
+  await resources.click();
+  await expect(resources).toHaveAttribute('aria-expanded', 'false');
+  await page.getByRole('button', { name: 'Your notes' }).click(); // folding the last open half opens the other
+  await expect(resources).toHaveAttribute('aria-expanded', 'true');
+
+  // the reading list belongs to the study
+  await page.getByRole('button', { name: 'Your notes' }).click(); // make room: fold notes, resources stay open
+  await page.getByRole('tab', { name: /reading list/i }).click();
+  await page.getByRole('textbox', { name: /add to the reading list/i }).fill('Carson on John');
+  await page.keyboard.press('Enter');
+  await page.getByRole('checkbox', { name: /read: carson on john/i }).check();
+  await expect(page.getByRole('checkbox', { name: /read: carson on john/i })).toBeChecked();
+});

eslint.config.js

@@ -22,10 +22,16 @@ export default [
     },
   },
   {
-    files: ['server/**/*.js', 'scripts/**/*.mjs', 'vite.config.js', 'eslint.config.js', 'postcss.config.js', 'tailwind.config.js'],
+    files: ['server/**/*.js', 'scripts/**/*.mjs', 'vite.config.js', 'playwright.config.js', 'eslint.config.js', 'postcss.config.js', 'tailwind.config.js'],
     languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: { ...globals.node } },
     rules: { 'no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrors: 'none' }], 'no-empty': ['error', { allowEmptyCatch: true }] },
   },
+  {
+    // Playwright tests run in Node but hand functions to the browser page, which use browser globals
+    files: ['e2e/**/*.js'],
+    languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: { ...globals.node, ...globals.browser } },
+    rules: { 'no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrors: 'none' }] },
+  },
   {
     files: ['**/*.test.{js,jsx}', 'src/setupTests.js', 'src/test/**'],
     languageOptions: { globals: { ...globals.browser, ...globals.node, vi: 'readonly' } },

package-lock.json

@@ -27,6 +27,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.64.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
@@ -1635,6 +1636,22 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.64.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.64.1.tgz",
+      "integrity": "sha512-IaYGml/nSOiZWROfPtuIL7neuu9qDOZ3TNvNljUIrhDMxiGTgPjzj/g9p9RxpS2tSepPDRY+UwAaEeiKtUvIAg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.64.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.2.tgz",
@@ -6190,6 +6207,35 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.64.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.64.1.tgz",
+      "integrity": "sha512-HCrVhHr5QQuwYoswEUGTb7gGp522yflbv/ST8nF4sFWGuLjQCt17Q/EubpGGSNKYn1tsTCPZxqHhHCfVURu7UA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.64.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.64.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.64.1.tgz",
+      "integrity": "sha512-BC4s8y6SEVA6Q1rSxZTto8hI1KUI3xXlHGZgvGqP4IqPdI/a6FX9H29IDNz7vKo9l21b6LfYosScPL6M3xxyDQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",

package.json

@@ -15,7 +15,8 @@
     "coverage": "vitest run --coverage",
     "backup": "bash scripts/backup-data.sh",
     "restore": "bash scripts/restore-data.sh",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@simplewebauthn/browser": "^13.3.0",
@@ -37,6 +38,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.64.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

playwright.config.js

@@ -0,0 +1,18 @@
+// Real-browser tests: a production build of the app on its own port with a throwaway database, driven in Chrome.
+// Run with `npm run test:e2e`. It uses the Chrome already on this computer (no browser download).
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  workers: 1,
+  reporter: [['list']],
+  use: { baseURL: 'http://localhost:3101', channel: 'chrome', trace: 'retain-on-failure' },
+  webServer: { command: 'bash e2e/start-server.sh', url: 'http://localhost:3101/', timeout: 120_000, reuseExistingServer: false },
+  projects: [
+    { name: 'setup', testMatch: /auth\.setup\.js/ },
+    { name: 'chrome', testMatch: /.*\.spec\.js/, dependencies: ['setup'], use: { storageState: 'e2e/.auth.json' } },
+  ],
+});

server/db.js

@@ -140,7 +140,7 @@ export function initDb() {
     db.exec('ALTER TABLE projects ADD COLUMN outline_share_token TEXT');
   }
   // Share links can expire and be protected by a passcode.
-  for (const col of ['share_expires INTEGER', 'share_pass TEXT', 'outline_share_expires INTEGER', 'outline_share_pass TEXT']) {
+  for (const col of ['share_expires INTEGER', 'share_pass TEXT', 'share_reveal INTEGER', 'outline_share_expires INTEGER', 'outline_share_pass TEXT']) {
     if (!projectCols.some((c) => c.name === col.split(' ')[0])) db.exec(`ALTER TABLE projects ADD COLUMN ${col}`);
   }
   db.exec('CREATE UNIQUE INDEX IF NOT EXISTS idx_projects_outline_share_token ON projects(outline_share_token) WHERE outline_share_token IS NOT NULL');
@@ -780,7 +780,7 @@ export function setShareToken(id, userId, token) {
 
 /** Revokes a project's share link, scoped to userId. */
 export function clearShareToken(id, userId) {
-  db.prepare('UPDATE projects SET share_token = NULL, share_expires = NULL, share_pass = NULL WHERE id = ? AND user_id = ?').run(id, userId);
+  db.prepare('UPDATE projects SET share_token = NULL, share_expires = NULL, share_pass = NULL, share_reveal = NULL WHERE id = ? AND user_id = ?').run(id, userId);
 }
 
 // ---- read-only outline links: a separate token, so sharing an outline never shares the whole study ----
@@ -800,14 +800,14 @@ export function clearOutlineShareToken(id, userId) {
 
 // ---- expiry and passcode for either kind of read-only link (outline = the outline-only link) ----
 const shareCols = (outline) => (outline
-  ? { token: 'outline_share_token', expires: 'outline_share_expires', pass: 'outline_share_pass' }
-  : { token: 'share_token', expires: 'share_expires', pass: 'share_pass' });
+  ? { token: 'outline_share_token', expires: 'outline_share_expires', pass: 'outline_share_pass', reveal: 'NULL' }
+  : { token: 'share_token', expires: 'share_expires', pass: 'share_pass', reveal: 'share_reveal' });
 
-/** { token, expiresAt, hasPasscode } for the owner's link settings. */
+/** { token, expiresAt, hasPasscode, revealAt } for the owner's link settings (revealAt: notes stay hidden until then). */
 export function getShareSettings(id, userId, outline = false) {
   const c = shareCols(outline);
-  const row = db.prepare(`SELECT ${c.token} AS token, ${c.expires} AS expiresAt, ${c.pass} AS pass FROM projects WHERE id = ? AND user_id = ?`).get(id, userId);
-  return row ? { token: row.token ?? null, expiresAt: row.expiresAt ?? null, hasPasscode: !!row.pass } : null;
+  const row = db.prepare(`SELECT ${c.token} AS token, ${c.expires} AS expiresAt, ${c.pass} AS pass, ${c.reveal} AS revealAt FROM projects WHERE id = ? AND user_id = ?`).get(id, userId);
+  return row ? { token: row.token ?? null, expiresAt: row.expiresAt ?? null, hasPasscode: !!row.pass, revealAt: row.revealAt ?? null } : null;
 }
 
 /** The stored passcode hash of a link (kept when only the expiry is changed). */
@@ -816,18 +816,20 @@ export function getSharePassHash(id, userId, outline = false) {
   return db.prepare(`SELECT ${c.pass} AS pass FROM projects WHERE id = ? AND user_id = ?`).get(id, userId)?.pass ?? null;
 }
 
-/** Sets expiry (ms timestamp or null) and passcode hash (or null) on an existing link. */
-export function setShareSettings(id, userId, { expiresAt, passHash }, outline = false) {
+/** Sets expiry (ms timestamp or null), passcode hash (or null) and, for a study link, when its notes appear (or null). */
+export function setShareSettings(id, userId, { expiresAt, passHash, revealAt }, outline = false) {
   const c = shareCols(outline);
-  return db.prepare(`UPDATE projects SET ${c.expires} = ?, ${c.pass} = ? WHERE id = ? AND user_id = ?`).run(expiresAt ?? null, passHash ?? null, id, userId).changes > 0;
+  const changed = db.prepare(`UPDATE projects SET ${c.expires} = ?, ${c.pass} = ? WHERE id = ? AND user_id = ?`).run(expiresAt ?? null, passHash ?? null, id, userId).changes > 0;
+  if (changed && !outline && revealAt !== undefined) db.prepare('UPDATE projects SET share_reveal = ? WHERE id = ? AND user_id = ?').run(revealAt ?? null, id, userId);
+  return changed;
 }
 
 /** Public lookup for a link: the project plus the link's rules, or null for an unknown token. */
 export function getSharedByToken(token, outline = false) {
   const c = shareCols(outline);
-  const row = db.prepare(`SELECT data, ${c.expires} AS expiresAt, ${c.pass} AS passHash FROM projects WHERE ${c.token} = ?`).get(token);
+  const row = db.prepare(`SELECT data, ${c.expires} AS expiresAt, ${c.pass} AS passHash, ${c.reveal} AS revealAt FROM projects WHERE ${c.token} = ?`).get(token);
   if (!row) return null;
-  try { return { project: JSON.parse(row.data), expiresAt: row.expiresAt ?? null, passHash: row.passHash ?? null }; } catch { return null; }
+  try { return { project: JSON.parse(row.data), expiresAt: row.expiresAt ?? null, passHash: row.passHash ?? null, revealAt: row.revealAt ?? null }; } catch { return null; }
 }
 
 /** Public lookup: the project data behind an outline link (callers must only ever send the outlines on). */

server/index.js

@@ -11,6 +11,7 @@ import { startReminderScheduler } from './reminders.js';
 import { startBackupScheduler } from './backups.js';
 import { registerBibleRoutes } from './bibleApi.js';
 import { registerIqBibleRoutes } from './iqbible.js';
+import { registerStrongsRoutes } from './strongs.js';
 import { registerDeviceRoutes } from './devices.js';
 import { requireAuth } from './auth.js';
 import { userPayload } from './userPayload.js';
@@ -85,6 +86,7 @@ registerProjectRoutes(app);
 registerReaderRoutes(app);
 registerBibleRoutes(app, requireAuth);
 registerIqBibleRoutes(app, requireAuth);
+registerStrongsRoutes(app, requireAuth);
 registerDeviceRoutes(app, { requireAuth, userPayload, isLimited, recordFailure, clearFailures, tooMany: TOO_MANY });
 registerSharingRoutes(app);
 registerAdminRoutes(app);

server/prayers.js

@@ -28,6 +28,9 @@ export function cleanPrayer(raw, now = Date.now()) {
     createdAt: time(raw.createdAt, updatedAt), updatedAt,
     answeredAt: Number.isFinite(raw.answeredAt) && raw.answeredAt > 0 ? raw.answeredAt : null,
     answerNote: text(raw.answerNote, 1000).trim(),
+    status: raw.status === 'waiting' || raw.status === 'partial' ? raw.status : '',
+    pinned: raw.pinned === true,
+    rank: int(raw.rank, 0, 100_000) ? raw.rank : null,
   };
 }
 

server/prayers.test.js

@@ -37,3 +37,8 @@ test('a deleted prayer is not brought back by an older copy, and old markers are
 test('open prayers are the ones not answered or deleted', () => {
   expect(openPrayers([p('a'), p('b', { answeredAt: NOW }), { id: 'c', deleted: true, updatedAt: 1 }]).map((x) => x.id)).toEqual(['a']);
 });
+
+test('pin, rank and status are kept when valid and dropped when not', () => {
+  expect(cleanPrayer(p('a', { pinned: true, rank: 2, status: 'partial' }), NOW)).toMatchObject({ pinned: true, rank: 2, status: 'partial' });
+  expect(cleanPrayer(p('a', { pinned: 'yes', rank: -4, status: 'bogus' }), NOW)).toMatchObject({ pinned: false, rank: null, status: '' });
+});

server/routes/sharing.js

@@ -2,7 +2,7 @@
 import { randomUUID } from 'crypto';
 import { acceptEditInvite, clearOutlineShareToken, clearShareToken, countOpenEditInvites, createEditInvite, getSharePassHash, getShareSettings, getSharedByToken, isProjectOwner, listCollaborators, removeCollaborator, setOutlineShareToken, setShareSettings, setShareToken } from '../db.js';
 import { requireAuth } from '../auth.js';
-import { checkShareAccess, expiryFromDays, hashPasscode } from '../shareLinks.js';
+import { checkShareAccess, expiryFromDays, hashPasscode, hideUntilReveal, revealFromInput } from '../shareLinks.js';
 import { buildOutlinePayload } from '../outlineShare.js';
 import { TOO_MANY, isLimited, recordFailure } from '../limiter.js';
 
@@ -16,7 +16,7 @@ export function registerSharingRoutes(app) {
     try {
       const settings = getShareSettings(req.params.id, req.session.userId);
       if (!settings) return res.status(404).json({ error: 'Project not found.' });
-      res.json({ shareToken: settings.token, expiresAt: settings.expiresAt, hasPasscode: settings.hasPasscode });
+      res.json({ shareToken: settings.token, expiresAt: settings.expiresAt, hasPasscode: settings.hasPasscode, revealAt: settings.revealAt });
     } catch (err) {
       console.error('GET /api/projects/:id/share error:', err);
       res.status(500).json({ error: 'Failed to load share status.' });
@@ -37,8 +37,10 @@ export function registerSharingRoutes(app) {
       // a blank passcode field means "keep it"; null clears; a string sets
       const current = getSharePassHash(req.params.id, userId, outline);
       const passHash = 'passcode' in body ? (body.passcode === null ? null : await hashPasscode(body.passcode) ?? current) : current;
-      setShareSettings(req.params.id, userId, { expiresAt, passHash }, outline);
-      res.json({ shareToken: token, expiresAt, hasPasscode: !!passHash });
+      // only a study link can hide its notes until a time; a past or empty time turns hiding off
+      const revealAt = outline ? null : ('revealAt' in body ? revealFromInput(body.revealAt) : settings.revealAt);
+      setShareSettings(req.params.id, userId, { expiresAt, passHash, revealAt }, outline);
+      res.json({ shareToken: token, expiresAt, hasPasscode: !!passHash, revealAt });
     } catch (err) {
       console.error(`POST share (${outline ? 'outline' : 'study'}) error:`, err);
       res.status(500).json({ error: 'Failed to enable sharing.' });
@@ -123,14 +125,14 @@ export function registerSharingRoutes(app) {
       res.status(access.status).json({ error: access.error, needsPasscode: !!access.needsPasscode, expired: access.status === 410 });
       return null;
     }
-    return found.project;
+    return found;
   }
 
   // GET /api/share-outline/:token — PUBLIC, no login required (a passcode may be needed)
   app.get('/api/share-outline/:token', async (req, res) => {
     try {
-      const project = await openSharedLink(req, res, true);
-      if (project) res.json(buildOutlinePayload(project));
+      const found = await openSharedLink(req, res, true);
+      if (found) res.json(buildOutlinePayload(found.project));
     } catch (err) {
       console.error('GET /api/share-outline/:token error:', err);
       res.status(500).json({ error: 'Failed to load the shared outline.' });
@@ -140,8 +142,8 @@ export function registerSharingRoutes(app) {
   // GET /api/share/:token — PUBLIC, no login required: fetch a shared project read-only (a passcode may be needed)
   app.get('/api/share/:token', async (req, res) => {
     try {
-      const project = await openSharedLink(req, res, false);
-      if (project) res.json(project);
+      const found = await openSharedLink(req, res, false);
+      if (found) res.json(hideUntilReveal(found.project, found.revealAt));
     } catch (err) {
       console.error('GET /api/share/:token error:', err);
       res.status(500).json({ error: 'Failed to load shared project.' });

server/shareLinks.js

@@ -25,3 +25,27 @@ export async function checkShareAccess({ expiresAt, passHash, supplied }, now =
   if (!(await bcrypt.compare(given, passHash))) return { ok: false, status: 401, needsPasscode: true, error: 'That passcode is not right.' };
   return { ok: true };
 }
+
+// "Hide my notes until…": before the reveal time a shared study shows only the passages and the discussion questions
+// (no notes, outline, script, words or group notes), and says when the rest appears. The strip is done here, on the
+// server, so the hidden text never reaches the browser. After the time (or with none set) the study is sent whole.
+const OPEN_CHUNK_FIELDS = ['id', 'startVerse', 'endVerse', 'spilloverEndVerse', 'episodeNumber', 'episodeTitle', 'discussionQuestions'];
+
+export function hideUntilReveal(project, revealAt, now = Date.now()) {
+  if (!revealAt || revealAt <= now || !project || typeof project !== 'object') return project;
+  return {
+    id: project.id, title: project.title, translation: project.translation, series: project.series, outline: [],
+    hiddenUntil: revealAt,
+    chapters: (Array.isArray(project.chapters) ? project.chapters : []).map((ch) => ({
+      book: ch.book, bookAbbrev: ch.bookAbbrev, chapter: ch.chapter, verses: ch.verses,
+      chunks: (Array.isArray(ch.chunks) ? ch.chunks : []).map((chunk) => Object.fromEntries(OPEN_CHUNK_FIELDS.filter((f) => f in chunk).map((f) => [f, chunk[f]]))),
+    })),
+  };
+}
+
+// A reveal time from the browser -> ms in the future (up to a year), or null for "no hiding"
+export function revealFromInput(value, now = Date.now()) {
+  const n = Number(value);
+  if (!value || !Number.isFinite(n) || n <= now) return null;
+  return Math.min(n, now + 365 * 86_400_000);
+}

server/shareLinks.test.js

@@ -31,3 +31,36 @@ test('an expired link is reported as expired even before the passcode is checked
   const passHash = await hashPasscode('x');
   expect(await checkShareAccess({ passHash, expiresAt: NOW - 5, supplied: 'x' }, NOW)).toMatchObject({ status: 410 });
 });
+
+import { hideUntilReveal, revealFromInput } from './shareLinks.js';
+
+const study = () => ({
+  id: 's1', title: 'John', translation: 'BSB', outline: [{ id: 'n', text: 'Point' }],
+  chapters: [{ book: 'John', bookAbbrev: 'JHN', chapter: '3', verses: [{ number: 16, text: 'For God so loved.' }],
+    chunks: [{ id: 'c', startVerse: 16, endVerse: 18, discussionQuestions: 'Why?', observation: 'secret', interpretation: 'secret', application: 'secret', finalScript: 'secret', generalNotes: 'secret', greekWords: [{ id: 'w' }], teachBack: 'secret', recalls: [{ text: 'secret' }] }] }],
+});
+
+test('before the reveal time a shared study keeps the passages and questions and drops every note', () => {
+  const now = 1_000;
+  const out = hideUntilReveal(study(), now + 5_000, now);
+  expect(out.hiddenUntil).toBe(now + 5_000);
+  expect(out.outline).toEqual([]);
+  expect(out.chapters[0].verses).toHaveLength(1);
+  expect(out.chapters[0].chunks[0]).toEqual({ id: 'c', startVerse: 16, endVerse: 18, discussionQuestions: 'Why?' });
+  expect(JSON.stringify(out)).not.toContain('secret');
+});
+
+test('after the reveal time, or with none set, the whole study is sent', () => {
+  const full = study();
+  expect(hideUntilReveal(full, 500, 1_000)).toBe(full);
+  expect(hideUntilReveal(full, null, 1_000)).toBe(full);
+});
+
+test('a reveal time must be in the future, and no more than a year away', () => {
+  const now = 1_000_000;
+  expect(revealFromInput(null, now)).toBeNull();
+  expect(revealFromInput(now - 1, now)).toBeNull();
+  expect(revealFromInput('nope', now)).toBeNull();
+  expect(revealFromInput(now + 60_000, now)).toBe(now + 60_000);
+  expect(revealFromInput(now + 10 * 365 * 86_400_000, now)).toBe(now + 365 * 86_400_000);
+});

server/strongs.js

@@ -0,0 +1,89 @@
+// "Where else does this word appear?": every verse that uses a Strong's number, grouped by book. Built once, in
+// memory, from the interlinear files the Reader already ships (public/interlinear, or dist/interlinear in a build),
+// the first time anyone asks. Greek (G…) and Hebrew (H…) numbers both work.
+import { existsSync } from 'fs';
+import { readdir, readFile } from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { bookNameFor } from './bibleApi.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Strong's numbers come as "G4102", "g4102", "H7225" or sometimes with a letter suffix ("H1234a").
+export function normalizeStrongs(input) {
+  const m = String(input ?? '').trim().match(/^([GH])0*(\d{1,5})[a-z]?$/i);
+  return m ? `${m[1].toUpperCase()}${Number(m[2])}` : null;
+}
+
+// One book's interlinear file -> adds each verse it uses a number in to the index (once per verse).
+export function indexBook(index, book, data) {
+  for (const [chapter, verses] of Object.entries(data ?? {})) {
+    for (const [verse, words] of Object.entries(verses ?? {})) {
+      const seen = new Set();
+      for (const w of Array.isArray(words) ? words : []) {
+        const s = normalizeStrongs(w?.s);
+        if (!s || seen.has(s)) continue;
+        seen.add(s);
+        let entry = index.get(s);
+        if (!entry) { entry = { count: 0, books: new Map() }; index.set(s, entry); }
+        let refs = entry.books.get(book);
+        if (!refs) { refs = []; entry.books.set(book, refs); }
+        refs.push([Number(chapter), Number(verse)]);
+        entry.count += 1;
+      }
+    }
+  }
+}
+
+// The answer for one number: { strongs, total, books: [{ book, name, count, refs: [[chapter, verse], ...] }] },
+// books in the order the index was built (Bible order when files are indexed in canon order).
+export function occurrences(index, strongs) {
+  const key = normalizeStrongs(strongs);
+  const entry = key && index.get(key);
+  if (!entry) return { strongs: key, total: 0, books: [] };
+  const books = [...entry.books].map(([book, refs]) => ({
+    book, name: bookNameFor(book) ?? book, count: refs.length,
+    refs: refs.slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]),
+  }));
+  return { strongs: key, total: entry.count, books };
+}
+
+// Canon order so the books come back Genesis → Revelation, whatever order the directory lists them.
+const CANON = ['GEN','EXO','LEV','NUM','DEU','JOS','JDG','RUT','1SA','2SA','1KI','2KI','1CH','2CH','EZR','NEH','EST','JOB','PSA','PRO','ECC','SNG','ISA','JER','LAM','EZK','DAN','HOS','JOL','AMO','OBA','JON','MIC','NAM','HAB','ZEP','HAG','ZEC','MAL','MAT','MRK','LUK','JHN','ACT','ROM','1CO','2CO','GAL','EPH','PHP','COL','1TH','2TH','1TI','2TI','TIT','PHM','HEB','JAS','1PE','2PE','1JN','2JN','3JN','JUD','REV'];
+
+export async function buildIndex(dir) {
+  const index = new Map();
+  const files = new Set(await readdir(dir));
+  for (const book of CANON) {
+    if (!files.has(`${book}.json`)) continue;
+    try { indexBook(index, book, JSON.parse(await readFile(join(dir, `${book}.json`), 'utf8'))); } catch { /* a damaged file just leaves that book out */ }
+  }
+  return index;
+}
+
+function interlinearDir() {
+  return [join(__dirname, '..', 'dist', 'interlinear'), join(__dirname, '..', 'public', 'interlinear')].find(existsSync) ?? null;
+}
+
+let pending = null;
+const getIndex = () => {
+  if (!pending) {
+    const dir = interlinearDir();
+    pending = (dir ? buildIndex(dir) : Promise.resolve(new Map())).catch((err) => { pending = null; throw err; });
+  }
+  return pending;
+};
+
+export function registerStrongsRoutes(app, requireAuth) {
+  // GET /api/strongs/:number/occurrences
+  app.get('/api/strongs/:number/occurrences', requireAuth, async (req, res) => {
+    const key = normalizeStrongs(req.params.number);
+    if (!key) return res.status(400).json({ error: 'Use a Strong’s number like G4102 or H7225.' });
+    try {
+      res.json(occurrences(await getIndex(), key));
+    } catch (err) {
+      console.error('GET /api/strongs occurrences error:', err);
+      res.status(500).json({ error: 'Could not look up that word.' });
+    }
+  });
+}

server/strongs.test.js

@@ -0,0 +1,40 @@
+import { test, expect } from 'vitest';
+import { indexBook, normalizeStrongs, occurrences } from './strongs.js';
+
+test('normalizeStrongs accepts the usual spellings and rejects the rest', () => {
+  expect(normalizeStrongs('g4102')).toBe('G4102');
+  expect(normalizeStrongs(' H07225 ')).toBe('H7225');
+  expect(normalizeStrongs('H1234a')).toBe('H1234');
+  expect(normalizeStrongs('4102')).toBeNull();
+  expect(normalizeStrongs('')).toBeNull();
+  expect(normalizeStrongs(undefined)).toBeNull();
+});
+
+test('occurrences groups verses by book and counts a verse once however often the word repeats', () => {
+  const index = new Map();
+  indexBook(index, 'JHN', {
+    3: { 16: [{ s: 'G25' }, { s: 'G25' }, { s: 'G2316' }], 17: [{ s: 'G2316' }] },
+    1: { 1: [{ s: 'G3056' }, { s: 'G2316' }] },
+  });
+  indexBook(index, 'ROM', { 5: { 8: [{ s: 'G25' }, { s: 'G2316' }] } });
+
+  const love = occurrences(index, 'g25');
+  expect(love.total).toBe(2);
+  expect(love.books.map((b) => [b.book, b.name, b.count])).toEqual([['JHN', 'John', 1], ['ROM', 'Romans', 1]]);
+
+  const god = occurrences(index, 'G2316');
+  expect(god.total).toBe(4);
+  expect(god.books[0].refs).toEqual([[1, 1], [3, 16], [3, 17]]); // sorted by chapter then verse
+});
+
+test('an unknown or invalid number comes back empty', () => {
+  const index = new Map();
+  expect(occurrences(index, 'G99999')).toEqual({ strongs: 'G99999', total: 0, books: [] });
+  expect(occurrences(index, 'nonsense')).toEqual({ strongs: null, total: 0, books: [] });
+});
+
+test('malformed interlinear data is skipped, not thrown', () => {
+  const index = new Map();
+  expect(() => indexBook(index, 'GEN', { 1: { 1: null, 2: 'x', 3: [null, { s: 5 }, { s: 'H430' }] } })).not.toThrow();
+  expect(occurrences(index, 'H430').total).toBe(1);
+});

src/App.flow.test.jsx

@@ -115,7 +115,7 @@ describe('Search palette (⌘K)', () => {
     await user.type(await paletteBox(), 'abounds');
     const hit = await screen.findByRole('option', { name: /Titus 1:1/ });
     await user.click(hit);
-    expect(await screen.findByText(/Your notes/i)).toBeInTheDocument();
+    expect(await screen.findByRole('textbox', { name: 'Observe' })).toBeInTheDocument();
   });
 
   test('Escape closes it', async () => {

src/App.jsx

@@ -11,6 +11,8 @@ import Tooltips from './components/Tooltips.jsx';
 import { useAudio } from './hooks/useAudio.js';
 import { useAuth } from './hooks/useAuth.js';
 import { useBibleReader } from './hooks/useBibleReader.js';
+import { lastTemplateId, planStudyProject } from './utils/planStudy.js';
+import { isAudienceWindow } from './utils/presentSync.js';
 import { useProjectLibrary } from './hooks/useProjectLibrary.js';
 import { useHistoryNav } from './hooks/useHistoryNav.js';
 import { usePrayers } from './hooks/usePrayers.js';
@@ -37,6 +39,8 @@ const ImportPage = lazy(() => import('./pages/ImportPage.jsx'));
 const ReaderPage = lazy(() => import('./pages/ReaderPage.jsx'));
 const SettingsPage = lazy(() => import('./pages/SettingsPage.jsx'));
 const SetupPage = lazy(() => import('./pages/SetupPage.jsx'));
+const AudienceView = lazy(() => import('./components/AudienceView.jsx'));
+const InsightsPage = lazy(() => import('./pages/InsightsPage.jsx'));
 const StudyPage = lazy(() => import('./pages/StudyPage.jsx'));
 const OutlinePage = lazy(() => import('./pages/OutlinePage.jsx'));
 const ScriptPage = lazy(() => import('./pages/ScriptPage.jsx'));
@@ -166,8 +170,8 @@ const AppInner = () => {
   // The browser tab and history show where you are ("Romans 8 · Bible Study", "Luke — Outline · Bible Study")
   useEffect(() => {
     const names = {
-      home: 'My Studies', setup: 'Chunks', study: 'Study', outline: 'Outline', script: 'Script', export: 'Export',
-      import: 'Import', pronunciation: 'Pronunciation Guide', settings: 'Settings', admin: 'Admin', 'reading-plans': 'Reading Plans', prayer: 'Prayer journal',
+      home: 'My Studies', setup: 'Chunks', study: 'Study', outline: 'Outline', script: 'Script', export: 'Finish',
+      import: 'Import', pronunciation: 'Pronunciation Guide', settings: 'Settings', admin: 'Admin', 'reading-plans': 'Reading Plans', prayer: 'Prayer journal', insights: 'Insights',
     };
     let page = names[currentPage] ?? '';
     if (currentPage === 'reader') {
@@ -355,12 +359,13 @@ const AppInner = () => {
     setProject((current) => (current ? updater(current) : current));
   };
 
-  const updateChunk = (chunkId, patch) => {
+  // `touch: false` saves a change without counting it as an edit (so it doesn't reset "last edited" for recalls and summaries).
+  const updateChunk = (chunkId, patch, { touch = true } = {}) => {
     updateProject((current) => ({
       ...current,
       chapters: current.chapters.map((ch) => ({
         ...ch,
-        chunks: ch.chunks.map((c) => (c.id === chunkId ? { ...c, ...patch, editedAt: Date.now() } : c)),
+        chunks: ch.chunks.map((c) => (c.id === chunkId ? { ...c, ...patch, ...(touch ? { editedAt: Date.now() } : {}) } : c)),
       })),
     }));
   };
@@ -421,29 +426,13 @@ const AppInner = () => {
   const studyReadingPlanDay = async (dayRefs, title) => {
     setStudyBuildBusy(true);
     try {
+      const lastTemplate = lastTemplateId(); // the notes template you picked last time you started a study by hand
+      const templateDef = reader.userTemplates?.find((t) => t.id === lastTemplate);
       const chapters = await Promise.all(dayRefs.map(async ({ book, chapter }) => {
         const data = await fetchStudyChapter('BSB', book, chapter);
-        const verses = parseBibleChapter(data);
-        const bookName = bookOptions.find((b) => b.abbrev === book)?.name ?? book;
-        const chunk = {
-          id: makeId(),
-          startVerse: verses[0]?.number ?? 1,
-          endVerse: verses.at(-1)?.number ?? 1,
-          spilloverEndVerse: null,
-          observation: '', interpretation: '', application: '',
-          crossReferences: [], greekWords: [], generalNotes: '',
-          episodeNumber: '', episodeTitle: '', finalScript: '', tags: [],
-        };
-        return { book: bookName, bookAbbrev: book, chapter: String(chapter), verses, chunks: [chunk] };
+        return { bookAbbrev: book, bookName: bookOptions.find((b) => b.abbrev === book)?.name ?? book, chapter, verses: parseBibleChapter(data) };
       }));
-      const newProject = {
-        id: makeId(),
-        title: title || 'Reading Plan Study',
-        translation: 'BSB',
-        lastEdited: Date.now(),
-        selectedChunkId: chapters[0]?.chunks[0]?.id ?? null,
-        chapters,
-      };
+      const newProject = planStudyProject({ chapters, title, templateId: lastTemplate, templateDef, makeId });
       setProject(newProject);
       setCurrentPage('study');
     } catch (err) {
@@ -584,6 +573,9 @@ function AppRouter() {
   // A read-only outline link: no sign-in, nothing editable
   if (sharedOutlineToken) return <SharedOutlineView token={sharedOutlineToken} />;
 
+  // The second window for presenting on a projector: no sign-in, it only shows what the presenter window sends.
+  if (isAudienceWindow()) return <Suspense fallback={null}><AudienceView /></Suspense>;
+
   if (sharedViewToken) {
     if (needsPasscode) return <SharedPasscodeForm dark error={passcodeError} busy={checking} onSubmit={submitPasscode} />;
     if (sharedError) {
@@ -606,6 +598,7 @@ function AppRouter() {
     return (
       <div className="min-h-dvh bg-slate-100">
         <div className="border-b border-slate-200 bg-slate-900 px-4 py-3 text-center text-xs text-slate-300">
+          {sharedProject.hiddenUntil ? `Notes appear ${new Date(sharedProject.hiddenUntil).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}. For now: the passages and questions. ` : ''}
           🔗 Read-only shared view —{' '}
           <a href="/" className="underline hover:text-white">go to Bible Study Project</a>
         </div>
@@ -629,6 +622,7 @@ function AppRouter() {
   if (currentPage === 'prayer') return <PrayerPage />;
   if (currentPage === 'reader') return <ReaderPage />;
   if (currentPage === 'import') return <ImportPage />;
+  if (currentPage === 'insights') return <InsightsPage />;
   if (currentPage === 'study') return <StudyPage />;
   if (currentPage === 'outline') return <OutlinePage />;
   if (currentPage === 'script') return <ScriptPage />;

src/components/AudienceView.jsx

@@ -0,0 +1,56 @@
+// The audience window for two-screen presenting: drag it to the projector or second display and press F (or click)
+// for full screen. It only draws what the presenter window sends, which never includes private notes.
+import { useEffect, useState } from 'react';
+import StepFace from './StepFace.jsx';
+import { openChannel } from '../utils/presentSync.js';
+
+export default function AudienceView() {
+  const [state, setState] = useState(null);
+  const [ended, setEnded] = useState(false);
+  const [hint, setHint] = useState(true);
+
+  useEffect(() => {
+    document.title = 'Audience display';
+    const channel = openChannel();
+    if (!channel) return undefined;
+    channel.onmessage = (e) => {
+      if (e.data?.type === 'state') { setState(e.data); setEnded(false); }
+      else if (e.data?.type === 'end') setEnded(true);
+    };
+    channel.postMessage({ type: 'hello' }); // ask a presenter already running to send what it is showing
+    return () => channel.close();
+  }, []);
+
+  useEffect(() => {
+    const fullscreen = () => { if (document.fullscreenElement) document.exitFullscreen?.(); else document.documentElement.requestFullscreen?.().catch(() => {}); };
+    const onKey = (e) => { if (e.key === 'f' || e.key === 'F') fullscreen(); };
+    window.addEventListener('keydown', onKey);
+    const timer = window.setTimeout(() => setHint(false), 8000);
+    return () => { window.removeEventListener('keydown', onKey); window.clearTimeout(timer); };
+  }, []);
+
+  const dark = state?.dark ?? true;
+  const colors = dark ? 'bg-[#111] text-[#f2efe8]' : 'bg-[#faf7f0] text-[#2b2620]';
+  const fontSize = `${state?.fontPx ?? 40}px`;
+  let body;
+  if (!state || ended) {
+    body = <p className="text-center text-lg opacity-60">{ended ? 'The presentation has ended.' : 'Waiting for the presenter…'}</p>;
+  } else if (state.blank) {
+    body = null;
+  } else if (state.mode === 'outline' && state.step) {
+    body = <StepFace step={state.step} index={state.index} total={state.total} fontSize={fontSize} />;
+  } else {
+    body = (
+      <div className="text-center font-serif" style={{ fontSize }}>
+        <h1 className="font-semibold">{state.title}</h1>
+        {state.subtitle && <p className="mt-3 text-[0.55em] opacity-70">{state.subtitle}</p>}
+      </div>
+    );
+  }
+  return (
+    <div className={`fixed inset-0 flex cursor-none items-center justify-center overflow-hidden px-[6vw] py-[6dvh] ${state?.blank ? 'bg-black' : colors}`} onClick={() => document.documentElement.requestFullscreen?.().catch(() => {})}>
+      {body}
+      {hint && !state?.blank && <p className="fixed bottom-3 left-0 right-0 text-center font-sans text-xs opacity-40">Press F or click for full screen</p>}
+    </div>
+  );
+}

src/components/CoTeachers.jsx

@@ -1,4 +1,4 @@
-// Export → Co-teachers: let other accounts edit this study with you. You make a single-use invite link;
+// Finish → Co-teachers: let other accounts edit this study with you. You make a single-use invite link;
 // whoever opens it (signed in) can edit the study, and you can remove them any time. Edits from both of you
 // sync through the account; if you both change the same study, "Combine both" keeps everything.
 import { useCallback, useEffect, useState } from 'react';

src/components/DailyFive.jsx

@@ -0,0 +1,66 @@
+// Home card: your five minutes for today. A short prompt on a passage from your studies, a five-minute clock, and a
+// box to write in. What you write is added to that passage's notes. Pasting is turned off here on purpose.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { loadProjectById } from '../utils/projectStorage.js';
+import { FIELD_NAMES, MINUTES, dailyPatch, pickDaily } from '../utils/dailyFive.js';
+import { formatClock } from '../utils/present.js';
+
+const box = 'mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm';
+
+export default function DailyFive() {
+  const { projectIndex, saveChunkPatch } = useApp();
+  const [step, setStep] = useState('card'); // card -> write -> done
+  const [text, setText] = useState('');
+  const [left, setLeft] = useState(MINUTES * 60);
+  const [pasteTried, setPasteTried] = useState(false);
+  const pick = useMemo(() => pickDaily(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)), [projectIndex]);
+  const started = useRef(null);
+
+  useEffect(() => {
+    if (step !== 'write') return undefined;
+    started.current = Date.now();
+    const t = window.setInterval(() => setLeft(Math.max(0, MINUTES * 60 - Math.round((Date.now() - started.current) / 1000))), 1000);
+    return () => window.clearInterval(t);
+  }, [step]);
+
+  if (step === 'done') return <div role="status" className={box}>Saved to your notes. Same time tomorrow.</div>;
+  if (!pick) return null;
+  const { prompt } = pick;
+
+  const save = () => {
+    saveChunkPatch(pick.projectId, pick.chunk.id, dailyPatch(pick.chunk, prompt.field, text));
+    setStep('done');
+  };
+
+  if (step === 'card') {
+    return (
+      <div className={`${box} flex flex-wrap items-center justify-between gap-3`}>
+        <span><span className="font-medium">Your five minutes:</span> {pick.reference} <span className="text-[var(--r-sub)]">· {FIELD_NAMES[prompt.field]} · {pick.projectTitle}</span></span>
+        <button type="button" onClick={() => { setText(''); setLeft(MINUTES * 60); setPasteTried(false); setStep('write'); }} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)]">Start</button>
+      </div>
+    );
+  }
+  return (
+    <section aria-label="Your five minutes" className={box}>
+      <div className="flex items-baseline justify-between gap-3">
+        <p className="font-medium">{pick.reference} <span className="font-normal text-[var(--r-sub)]">· {FIELD_NAMES[prompt.field]}</span></p>
+        <span role="timer" aria-label="Time left" className={`font-mono text-sm tabular-nums ${left === 0 ? 'text-[var(--r-accent)]' : 'text-[var(--r-sub)]'}`}>{left === 0 ? 'Time’s up, finish your thought' : formatClock(left)}</span>
+      </div>
+      {pick.verses.length > 0 && (
+        <div className="mt-2 max-h-40 overflow-y-auto rounded-lg bg-[var(--r-bg)] p-3 font-serif text-[13px] leading-relaxed">
+          {pick.verses.map((v) => <p key={v.number}><sup className="mr-1 font-sans text-[var(--r-accent)]">{v.number}</sup>{v.text}</p>)}
+        </div>
+      )}
+      <p className="mt-2 text-xs text-[var(--r-sub)]">{prompt.text}</p>
+      <textarea aria-label="Your five minutes" value={text} onChange={(e) => setText(e.target.value)} rows={6} autoFocus
+        onPaste={(e) => { e.preventDefault(); setPasteTried(true); }}
+        className="mt-2 w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 font-serif text-[15px] leading-7 focus:outline-none" />
+      {pasteTried && <p role="note" className="mt-1 text-xs text-[var(--r-accent)]">Pasting is off here. Type it in your own words; that’s what the five minutes are for.</p>}
+      <div className="mt-2 flex gap-2">
+        <button type="button" disabled={!text.trim()} onClick={save} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)] disabled:opacity-40">Save to my notes</button>
+        <button type="button" onClick={() => setStep('card')} className="text-xs text-[var(--r-sub)] hover:underline">Not now</button>
+      </div>
+    </section>
+  );
+}

src/components/DailyFive.test.jsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { AppContext } from '../context/AppContext.js';
+import { saveProjectToStorage } from '../utils/projectStorage.js';
+import DailyFive from './DailyFive.jsx';
+import { promptFor } from '../utils/dailyFive.js';
+
+const project = () => ({
+  id: 'p1', title: 'John', translation: 'BSB', lastEdited: 1,
+  chapters: [{ book: 'John', bookAbbrev: 'JHN', chapter: '3', verses: [{ number: 16, text: 'For God so loved the world.' }],
+    chunks: [{ id: 'c1', startVerse: 16, endVerse: 16, observation: '', interpretation: '', application: '', editedAt: 1 }] }],
+});
+
+function setup() {
+  localStorage.clear();
+  saveProjectToStorage(project());
+  const saveChunkPatch = vi.fn();
+  const value = { projectIndex: [{ id: 'p1' }], saveChunkPatch };
+  render(<AppContext.Provider value={value}><DailyFive /></AppContext.Provider>);
+  return { saveChunkPatch, user: userEvent.setup() };
+}
+beforeEach(() => localStorage.clear());
+
+test('the card names a passage and what kind of note the five minutes are for', () => {
+  setup();
+  expect(screen.getByText(/your five minutes/i)).toBeInTheDocument();
+  expect(screen.getByText(/John 3:16/)).toBeInTheDocument();
+});
+
+test('pasting is blocked, and what you type is saved to the matching note', async () => {
+  const { saveChunkPatch, user } = setup();
+  await user.click(screen.getByRole('button', { name: 'Start' }));
+  expect(screen.getByText('For God so loved the world.')).toBeInTheDocument();
+  expect(screen.getByRole('timer')).toHaveTextContent('5:00');
+  const box = screen.getByRole('textbox', { name: /your five minutes/i });
+  fireEvent.paste(box, { clipboardData: { getData: () => 'text from somewhere else' } });
+  expect(screen.getByText(/pasting is off here/i)).toBeInTheDocument();
+  expect(box).toHaveValue('');
+  expect(screen.getByRole('button', { name: /save to my notes/i })).toBeDisabled();
+  await user.type(box, 'God gave.');
+  await user.click(screen.getByRole('button', { name: /save to my notes/i }));
+  const field = promptFor().field;
+  expect(saveChunkPatch).toHaveBeenCalledWith('p1', 'c1', expect.objectContaining({ [field]: 'God gave.', fiveMinutes: [expect.objectContaining({ field })] }));
+  expect(screen.getByRole('status')).toHaveTextContent(/saved to your notes/i);
+});

src/components/FamilyTree.jsx

@@ -0,0 +1,61 @@
+// A person's family: the relatives named in their record (click one to read about them), and a tree of ancestors and
+// descendants a few generations out. From Theographic Bible Metadata.
+import { useEffect, useState } from 'react';
+import { loadPerson } from '../hooks/useVerseStudy.js';
+import { relatives, walk } from '../utils/family.js';
+
+function Branch({ node, onOpen }) {
+  return (
+    <li>
+      <button type="button" onClick={() => onOpen(node.id)} className="text-[var(--r-accent)] hover:underline">{node.name || node.id}</button>
+      {node.more && <span className="ml-1 text-[var(--r-sub)]" title="More people beyond this point">…</span>}
+      {node.kids.length > 0 && <ul className="ml-4 border-l border-[var(--r-line)] pl-3">{node.kids.map((k) => <Branch key={k.id} node={k} onOpen={onOpen} />)}</ul>}
+    </li>
+  );
+}
+
+function Tree({ id, onOpen }) {
+  const [state, setState] = useState({ loading: true });
+  useEffect(() => {
+    let live = true;
+    Promise.all([walk(loadPerson, id, { direction: 'up', depth: 3, max: 30 }), walk(loadPerson, id, { direction: 'down', depth: 2, max: 40 })])
+      .then(([up, down]) => { if (live) setState({ up, down }); })
+      .catch(() => { if (live) setState({ error: true }); });
+    return () => { live = false; };
+  }, [id]);
+  if (state.loading) return <p className="mt-1 text-[var(--r-sub)]">Loading the family…</p>;
+  if (state.error) return <p className="mt-1 text-[var(--r-sub)]">The family tree couldn’t be loaded right now.</p>;
+  const block = (title, node, empty) => (
+    <div>
+      <p className="font-medium text-[var(--r-text)]">{title}</p>
+      {node.kids.length ? <ul className="mt-1 space-y-0.5">{node.kids.map((k) => <Branch key={k.id} node={k} onOpen={onOpen} />)}</ul> : <p className="text-[var(--r-sub)]">{empty}</p>}
+    </div>
+  );
+  return <div className="mt-2 grid gap-3 sm:grid-cols-2">{block('Ancestors', state.up, 'None recorded.')}{block('Descendants', state.down, 'None recorded.')}</div>;
+}
+
+// `person` is the record; `renderPerson(id)` shows another person's details inside this one when a name is clicked.
+export default function Family({ person, renderPerson }) {
+  const groups = relatives(person);
+  const [shown, setShown] = useState(null); // a relative opened from a name or the tree
+  const [treeOpen, setTreeOpen] = useState(false); // the tree's records are only fetched once it is opened
+  if (groups.length === 0) return null;
+  return (
+    <div className="mt-2 space-y-1.5 border-t border-[var(--r-line)] pt-2" aria-label="Family">
+      {groups.map((g) => (
+        <p key={g.label} className="flex flex-wrap items-baseline gap-x-1.5">
+          <span className="w-16 shrink-0 text-[11px] uppercase tracking-wide">{g.label}</span>
+          {g.people.map((p) => (
+            <button key={p.id} type="button" onClick={() => setShown(shown === p.id ? null : p.id)} aria-pressed={shown === p.id}
+              className={`rounded-full border px-2 py-0.5 ${shown === p.id ? 'border-[var(--r-accent)] text-[var(--r-text)]' : 'border-[var(--r-line)] text-[var(--r-accent)] hover:bg-black/5'}`}>{p.name}</button>
+          ))}
+        </p>
+      ))}
+      <details onToggle={(e) => setTreeOpen(e.currentTarget.open)}>
+        <summary className="cursor-pointer text-[var(--r-accent)]">Family tree</summary>
+        {treeOpen && <Tree id={person.id} onOpen={(id) => setShown(id)} />}
+      </details>
+      {shown && <div className="rounded-lg bg-[var(--r-bar)] p-2">{renderPerson(shown)}</div>}
+    </div>
+  );
+}

src/components/FamilyTree.test.jsx

@@ -0,0 +1,46 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+import Family from './FamilyTree.jsx';
+
+const ref = (id, name) => ({ id, name, type: 'people' });
+const RECORDS = {
+  fam_seth: { id: 'fam_seth', name: 'Seth', father: [ref('fam_adam', 'Adam')], mother: [ref('fam_eve', 'Eve')], children: [ref('fam_enos', 'Enos')], siblings: [ref('fam_abel', 'Abel')] },
+  fam_adam: { id: 'fam_adam', name: 'Adam', children: [ref('fam_seth', 'Seth')] },
+  fam_eve: { id: 'fam_eve', name: 'Eve', children: [ref('fam_seth', 'Seth')] },
+  fam_enos: { id: 'fam_enos', name: 'Enos', father: [ref('fam_seth', 'Seth')] },
+  fam_abel: { id: 'fam_abel', name: 'Abel' },
+};
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', vi.fn(async (url) => {
+    const id = String(url).match(/people\/(.+)\.json/)?.[1];
+    return RECORDS[id] ? { ok: true, json: async () => ({ person: RECORDS[id] }) } : { ok: false, json: async () => ({}) };
+  }));
+});
+
+test('the relatives named in the record are listed, and clicking one opens them', async () => {
+  const user = userEvent.setup();
+  render(<Family person={RECORDS.fam_seth} renderPerson={(id) => <div>details for {id}</div>} />);
+  const family = screen.getByLabelText('Family');
+  for (const name of ['Adam', 'Eve', 'Abel', 'Enos']) expect(within(family).getByRole('button', { name })).toBeInTheDocument();
+  await user.click(within(family).getByRole('button', { name: 'Adam' }));
+  expect(screen.getByText('details for fam_adam')).toBeInTheDocument();
+  await user.click(within(family).getByRole('button', { name: 'Adam' }));
+  expect(screen.queryByText('details for fam_adam')).not.toBeInTheDocument();
+});
+
+test('the family tree shows ancestors and descendants', async () => {
+  const user = userEvent.setup();
+  render(<Family person={RECORDS.fam_seth} renderPerson={(id) => <div>details for {id}</div>} />);
+  await user.click(screen.getByText('Family tree'));
+  expect(await screen.findByText('Ancestors')).toBeInTheDocument();
+  const tree = screen.getByText('Ancestors').closest('div').parentElement;
+  expect(within(tree).getAllByRole('button', { name: 'Adam' }).length).toBeGreaterThan(0);
+  expect(within(tree).getAllByRole('button', { name: 'Enos' }).length).toBeGreaterThan(0);
+});
+
+test('a person with no recorded family shows nothing', () => {
+  const { container } = render(<Family person={{ id: 'x', name: 'X' }} renderPerson={() => null} />);
+  expect(container).toBeEmptyDOMElement();
+});

src/components/GrammarPanel.jsx

@@ -0,0 +1,19 @@
+// What an original-language word's grammar label means, in plain English.
+import { grammarNotes } from '../utils/grammar.js';
+
+export default function GrammarPanel({ label, className = '' }) {
+  const notes = grammarNotes(label);
+  if (!label) return null;
+  return (
+    <div className={`rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-2.5 font-sans text-xs ${className}`} aria-label="Grammar">
+      <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Grammar · {label}</p>
+      {notes.length > 0 && (
+        <ul className="mt-1.5 space-y-1.5">
+          {notes.map((n) => (
+            <li key={n.term}><span className="font-medium">{n.term}.</span> <span className="text-[var(--r-sub)]">{n.meaning}</span></li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

src/components/HandoutExport.jsx

@@ -1,14 +1,15 @@
-// Export → Lesson handout: a printable page for each session (or one session), for a group to follow along.
+// Finish → Lesson handout: a printable page for each session (or one session), for a group to follow along.
 import { useState } from 'react';
-import { printHandout, sessionsFor } from '../utils/handout.js';
+import { HANDOUT_LAYOUTS, printHandout, sessionsFor } from '../utils/handout.js';
 
 export default function HandoutExport({ project }) {
   const sessions = sessionsFor(project);
   const [which, setWhich] = useState('all');
   const [lines, setLines] = useState(true);
+  const [layout, setLayout] = useState('standard');
   const [blocked, setBlocked] = useState(false);
   if (sessions.length === 0) return null;
-  const go = () => setBlocked(!printHandout(project, which === 'all' ? null : [which], { answerLines: lines }));
+  const go = () => setBlocked(!printHandout(project, which === 'all' ? null : [which], { answerLines: lines, layout }));
   return (
     <section className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Lesson handout">
       <h2 className="text-sm font-medium">Lesson handout</h2>
@@ -20,6 +21,11 @@ export default function HandoutExport({ project }) {
             {sessions.map((s) => <option key={s.chunk.id} value={s.chunk.id}>{s.number}. {s.reference}</option>)}
           </select>
         </label>
+        <label className="text-xs text-[var(--r-sub)]">Layout
+          <select value={layout} onChange={(e) => setLayout(e.target.value)} className="mt-1 block rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)]">
+            {HANDOUT_LAYOUTS.map((l) => <option key={l.id} value={l.id}>{l.label}</option>)}
+          </select>
+        </label>
         <label className="flex items-center gap-2 pb-2 text-xs text-[var(--r-sub)]"><input type="checkbox" checked={lines} onChange={(e) => setLines(e.target.checked)} className="accent-[var(--r-accent)]" /> Lines to write on</label>
         <button type="button" onClick={go} className="rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5">Print / Save PDF</button>
       </div>

src/components/ImportNotes.jsx

@@ -0,0 +1,61 @@
+// Finish → Import notes: bring notes from a Word or Markdown file into this study, matched to its chunks by passage.
+import { useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { useToast } from './Toasts.jsx';
+import { applyImportedNotes, parseNotesText } from '../utils/importNotes.js';
+
+export default function ImportNotes() {
+  const { project, updateProject } = useApp();
+  const { toast } = useToast();
+  const [file, setFile] = useState('');
+  const [sections, setSections] = useState(null); // null until a file is read
+  const [own, setOwn] = useState(true);
+  const [error, setError] = useState('');
+
+  const choose = async (e) => {
+    const f = e.target.files?.[0];
+    e.target.value = '';
+    setError(''); setSections(null);
+    if (!f) return;
+    try {
+      let text;
+      if (/\.docx$/i.test(f.name)) {
+        const { default: mammoth } = await import('mammoth');
+        text = (await mammoth.extractRawText({ arrayBuffer: await f.arrayBuffer() })).value;
+      } else text = await f.text();
+      const found = parseNotesText(text);
+      setFile(f.name);
+      setSections(found);
+      if (found.length === 0) setError('No passage headings with Observe / Interpret / Apply notes were found in that file. Start each section with a heading like “John 3:16–18”.');
+    } catch { setError('That file couldn’t be read.'); }
+  };
+
+  const preview = sections ? applyImportedNotes(project, sections, { own }) : null;
+  const add = () => {
+    updateProject((current) => applyImportedNotes(current, sections, { own }).project);
+    toast(`Added notes to ${preview.matched.length} chunk${preview.matched.length === 1 ? '' : 's'}`);
+    setSections(null);
+  };
+
+  return (
+    <section className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Import notes">
+      <h2 className="text-sm font-medium">Import notes</h2>
+      <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">Bring in notes from a Word (.docx), Markdown or text file. Start each section with a passage heading (“John 3:16–18”), then label the notes “Observe:”, “Interpret:”, “Apply:”, “Background:” or “Questions:”. Notes you’ve already written are kept; imported text is added below them.</p>
+      <label className="inline-block cursor-pointer rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5">Choose a file
+        <input type="file" accept=".docx,.md,.markdown,.txt,text/markdown,text/plain" className="hidden" onChange={choose} />
+      </label>
+      {error && <p role="alert" className="mt-2 text-xs text-[var(--r-danger,#b42318)]">{error}</p>}
+      {preview && sections.length > 0 && (
+        <div className="mt-3 space-y-2 text-sm">
+          <p className="text-xs text-[var(--r-sub)]">{file}: {sections.length} section{sections.length === 1 ? '' : 's'} found.</p>
+          <ul className="space-y-1 text-xs">
+            {preview.matched.map((m) => <li key={m.heading}>✓ {m.heading}: {m.fields.join(', ')}</li>)}
+            {preview.unmatched.map((h) => <li key={h} className="text-[var(--r-sub)]">No chunk for {h}, skipped</li>)}
+          </ul>
+          <label className="flex items-center gap-2 text-xs text-[var(--r-sub)]"><input type="checkbox" checked={own} onChange={(e) => setOwn(e.target.checked)} className="accent-[var(--r-accent)]" /> These notes are my own writing (untick if they came from AI or another source)</label>
+          <button type="button" onClick={add} disabled={preview.matched.length === 0} className="rounded-xl bg-[var(--r-text)] px-4 py-2 text-sm font-medium text-[var(--r-bg)] disabled:opacity-40">Add to this study</button>
+        </div>
+      )}
+    </section>
+  );
+}

src/components/LinkRules.jsx

@@ -11,21 +11,27 @@ export const expiryText = (expiresAt, now = Date.now()) => {
   return `Expires ${new Date(expiresAt).toLocaleDateString()} (${days} day${days === 1 ? '' : 's'} left)`;
 };
 
-export default function LinkRules({ expiresAt, hasPasscode, busy, onSave }) {
+// "2026-10-18T09:00" in the person's own time zone <-> ms
+const toLocalInput = (ms) => { if (!ms) return ''; const d = new Date(ms); const pad = (n) => String(n).padStart(2, '0'); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; };
+
+// `showReveal` adds "Hide my notes until…" (study links only; an outline link never shows notes).
+export default function LinkRules({ expiresAt, hasPasscode, busy, onSave, showReveal = false, revealAt = null }) {
   const [days, setDays] = useState('keep'); // 'keep' | '' | '1' | '7' | '30'
   const [passcode, setPasscode] = useState('');
-  const dirty = days !== 'keep' || passcode.trim() !== '';
+  const [reveal, setReveal] = useState(null); // null = leave as is; '' = show everything now; else a local date-time
+  const dirty = days !== 'keep' || passcode.trim() !== '' || reveal !== null;
 
   const save = async () => {
     const options = {};
     if (days !== 'keep') options.expiresInDays = days === '' ? null : Number(days);
     if (passcode.trim()) options.passcode = passcode.trim();
-    if (await onSave(options)) { setDays('keep'); setPasscode(''); }
+    if (reveal !== null) options.revealAt = reveal === '' ? null : new Date(reveal).getTime();
+    if (await onSave(options)) { setDays('keep'); setPasscode(''); setReveal(null); }
   };
 
   return (
     <div className="mt-3 rounded-xl border border-[var(--r-line)] p-3" role="group" aria-label="Link settings">
-      <p className="text-xs text-[var(--r-sub)]">{expiryText(expiresAt)} · {hasPasscode ? 'Needs a passcode' : 'No passcode'}</p>
+      <p className="text-xs text-[var(--r-sub)]">{expiryText(expiresAt)} · {hasPasscode ? 'Needs a passcode' : 'No passcode'}{showReveal && revealAt && revealAt > Date.now() ? ` · Your notes appear ${new Date(revealAt).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}` : ''}</p>
       <div className="mt-2 flex flex-wrap items-end gap-3">
         <label className="text-xs text-[var(--r-sub)]">Stop working
           <select value={days} onChange={(e) => setDays(e.target.value)} className={`${field} mt-1 block`}>
@@ -36,10 +42,18 @@ export default function LinkRules({ expiresAt, hasPasscode, busy, onSave }) {
         <label className="text-xs text-[var(--r-sub)]">{hasPasscode ? 'New passcode' : 'Passcode (optional)'}
           <input type="text" value={passcode} onChange={(e) => setPasscode(e.target.value)} maxLength={100} autoComplete="off" placeholder={hasPasscode ? 'Type to change' : 'None'} className={`${field} mt-1 block w-44`} />
         </label>
+        {showReveal && (
+          <label className="text-xs text-[var(--r-sub)]">Hide my notes until
+            <input type="datetime-local" value={reveal ?? toLocalInput(revealAt > Date.now() ? revealAt : null)} onChange={(e) => setReveal(e.target.value)} className={`${field} mt-1 block`} />
+          </label>
+        )}
+        {showReveal && (reveal ?? toLocalInput(revealAt > Date.now() ? revealAt : null)) && (
+          <button type="button" onClick={() => setReveal('')} className="text-xs text-[var(--r-sub)] hover:underline">Show everything now</button>
+        )}
         <button type="button" onClick={save} disabled={!dirty || busy} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-sm hover:bg-black/5 disabled:opacity-50">Save settings</button>
         {hasPasscode && <button type="button" onClick={() => onSave({ passcode: null })} disabled={busy} className="text-xs text-[var(--r-danger,#b42318)] hover:underline">Remove passcode</button>}
       </div>
-      <p className="mt-2 text-[11px] text-[var(--r-sub)]">Send the passcode separately from the link. Anyone with both can read it until it expires or you turn it off.</p>
+      <p className="mt-2 text-[11px] text-[var(--r-sub)]">Send the passcode separately from the link. Anyone with both can read it until it expires or you turn it off.{showReveal ? ' Until the time you set, the group sees only the passages and discussion questions; your notes, outline and scripts stay on the server.' : ''}</p>
     </div>
   );
 }

src/components/OfflineBadge.jsx

@@ -0,0 +1,21 @@
+// On a study card: whether its Bible text works without a connection, and a button to fix that.
+import { DownloadProgress } from './OfflineSave.jsx';
+import { offlineStatus } from '../utils/offline.js';
+
+export default function OfflineBadge({ project, offline }) {
+  if (!project) return null;
+  const status = offlineStatus(project, offline.saved);
+  const label = 'mt-1 text-xs';
+  if (offline.job) return <div className="mt-2"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
+  if (status.state === 'ready') return <p className={`${label} text-[var(--r-accent)]`} title="Your notes and the Bible text for this study open without a connection">✓ Works offline</p>;
+  if (status.state === 'licensed') {
+    return <p className={`${label} text-[var(--r-sub)]`} title={`The ${status.translation} licence doesn’t allow saving its text for offline use`}>Notes work offline; {status.translation} text needs a connection</p>;
+  }
+  const next = status.missing[0];
+  return (
+    <p className={`${label} flex flex-wrap items-center gap-x-2 text-[var(--r-sub)]`}>
+      <span>Needs a connection for {status.missing.map((b) => b.name).join(', ')}</span>
+      <button type="button" onClick={() => offline.saveBook(status.translation, next.abbrev, next.name)} className="text-[var(--r-accent)] hover:underline">Save {next.name} for offline</button>
+    </p>
+  );
+}

src/components/PinnedPrayers.jsx

@@ -0,0 +1,45 @@
+// Home card: the prayers you pinned, in the order you set, with a one-tap "I prayed". Hidden when nothing is pinned.
+import { useApp } from '../context/AppContext.js';
+import { STATUSES, pinned } from '../utils/prayers.js';
+import { localDateString } from '../utils/readingPlans.js';
+
+export default function PinnedPrayers() {
+  const { prayers, togglePrayed, openPrayer } = useApp();
+  const all = pinned(prayers);
+  const list = all.slice(0, 5);
+  const total = all.length;
+  if (!list.length) return null;
+  const today = localDateString();
+  return (
+    <section aria-label="Pinned prayers" className="rounded-xl border border-[var(--r-accent)] border-l-4 bg-[var(--r-bar)] px-4 py-3 text-sm shadow-sm">
+      <div className="mb-1 flex items-baseline justify-between gap-3">
+        <h2 className="flex items-center gap-1.5 font-semibold text-[var(--r-accent)]"><svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z" /></svg>Praying for <span className="text-xs font-normal text-[var(--r-sub)]">{total > list.length ? `${list.length} of ${total}` : total}</span></h2>
+        <button type="button" onClick={openPrayer} className="text-xs text-[var(--r-accent)] hover:underline">Open journal →</button>
+      </div>
+      <ul className="divide-y divide-[var(--r-line)]">
+        {list.map((p) => {
+          const done = p.prayedOn.includes(today);
+          const days = p.prayedOn.length;
+          return (
+            <li key={p.id} className="flex items-start gap-3 py-2.5 first:pt-1.5 last:pb-0.5">
+              <button type="button" onClick={() => togglePrayed(p.id)} aria-pressed={done} aria-label={`${done ? 'Prayed today' : 'I prayed'}: ${p.text.slice(0, 40)}`}
+                title={done ? 'Prayed today (tap to undo)' : 'Mark as prayed today'}
+                className={`mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs ${done ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] text-transparent hover:border-[var(--r-accent)] hover:text-[var(--r-accent)]'}`}>✓</button>
+              <div className="min-w-0 flex-1">
+                {(p.forWhom || p.status) && (
+                  <p className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] font-medium uppercase tracking-wide text-[var(--r-sub)]">
+                    {p.forWhom && <span>{p.forWhom}</span>}
+                    {p.status && <span className="rounded-full border border-[var(--r-accent)] px-1.5 py-px text-[10px] normal-case tracking-normal text-[var(--r-accent)]">{STATUSES[p.status]}</span>}
+                  </p>
+                )}
+                <p className="line-clamp-3 leading-snug">{p.text}</p>
+                {p.status === 'partial' && p.answerNote && <p className="mt-1 line-clamp-2 text-xs italic text-[var(--r-sub)]">{p.answerNote}</p>}
+                {days > 0 && <p className="mt-1 text-[11px] text-[var(--r-sub)]">Prayed {days} day{days === 1 ? '' : 's'}</p>}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

src/components/PinnedPrayers.test.jsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect } from 'vitest';
+import { AppContext } from '../context/AppContext.js';
+import PinnedPrayers from './PinnedPrayers.jsx';
+import { markAnswered, newPrayer, setPinned } from '../utils/prayers.js';
+
+const T0 = Date.UTC(2026, 9, 1);
+const show = (prayers) => {
+  const ctx = { prayers, togglePrayed: vi.fn(), openPrayer: vi.fn() };
+  const view = render(<AppContext.Provider value={ctx}><PinnedPrayers /></AppContext.Provider>);
+  return { ctx, view };
+};
+
+test('shows nothing when no prayer is pinned', () => {
+  const { view } = show([newPrayer({ text: 'Unpinned' }, T0)]);
+  expect(view.container).toBeEmptyDOMElement();
+});
+
+test('lists open pinned prayers in order, lets you mark one prayed, and opens the journal', async () => {
+  const a = newPrayer({ text: 'For Sam', forWhom: 'Sam' }, T0);
+  const b = newPrayer({ text: 'Wisdom' }, T0 + 1);
+  const c = newPrayer({ text: 'Done already' }, T0 + 2);
+  let list = [a, b, c];
+  list = setPinned(setPinned(setPinned(list, b.id, true, T0 + 5), a.id, true, T0 + 6), c.id, true, T0 + 7);
+  list = list.map((p) => (p.id === c.id ? markAnswered(p, '', T0 + 9) : p));
+  const user = userEvent.setup();
+  const { ctx } = show(list);
+  const rows = screen.getAllByRole('listitem');
+  expect(rows).toHaveLength(2);
+  expect(rows[0]).toHaveTextContent('Wisdom');
+  expect(rows[1]).toHaveTextContent('Sam');
+  await user.click(screen.getAllByRole('button', { name: /I prayed/ })[0]);
+  expect(ctx.togglePrayed).toHaveBeenCalledWith(b.id);
+  await user.click(screen.getByRole('button', { name: /Open journal/ }));
+  expect(ctx.openPrayer).toHaveBeenCalled();
+});

src/components/PresentMode.jsx

@@ -1,8 +1,15 @@
 // Present mode: the script or the outline full-screen in large type, with a timer. The script scrolls by
 // itself at a speed you set (a teleprompter), and the outline moves one point at a time with the minutes you
 // planned beside the clock. The screen is kept awake while it is open. Esc, or Close, leaves.
+//
+// With a projector or second screen: "Audience window" opens a second window to drag over. It shows only the point,
+// its passage and quoted verse; your speaker notes, the script, the timer and the plan stay on this screen. This
+// screen then becomes a presenter view (what the audience sees, your notes, the next point). On one screen, notes are
+// hidden unless you turn them on, so a mirrored display never shows them by accident. B blacks out the audience screen.
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { formatClock, outlineSteps, paceText, pacing } from '../utils/present.js';
+import { audienceState, audienceUrl, openChannel } from '../utils/presentSync.js';
+import StepFace from './StepFace.jsx';
 
 const SIZES = [20, 24, 28, 34, 40, 48, 60, 72];
 const btn = 'rounded-lg border border-current/30 px-3 py-1.5 text-sm hover:bg-white/10 disabled:opacity-40';
@@ -16,10 +23,43 @@ export default function PresentMode({ title, subtitle = '', mode, script = '', t
   const [speed, setSpeed] = useState(30); // pixels per second
   const [index, setIndex] = useState(0);
   const scroller = useRef(null);
+  const [showNotes, setShowNotes] = useState(() => { try { return localStorage.getItem('present-notes-here') === 'on'; } catch { return false; } });
+  const [audienceOpen, setAudienceOpen] = useState(false); // an audience window is connected: this screen is the presenter's
+  const [blank, setBlank] = useState(false); // the audience screen is blacked out
+  const [audSize, setAudSize] = useState(() => { try { return Math.max(0, SIZES.indexOf(Number(localStorage.getItem('present-aud-size')) || 48)); } catch { return 5; } });
+  const [popupBlocked, setPopupBlocked] = useState(false);
+  const audienceWin = useRef(null);
+  const channel = useRef(null);
+  const latest = useRef(null);
   const steps = mode === 'outline' ? outlineSteps(tree) : [];
   const step = steps[index];
   const pace = mode === 'outline' ? pacing(steps, index, elapsed) : null;
 
+  // Two screens: keep the audience window in step with this one, answering a window that has just opened.
+  const audience = audienceState({ title, subtitle, mode, step, index, total: steps.length, dark, fontPx: SIZES[audSize], blank });
+  latest.current = audience;
+  useEffect(() => {
+    const ch = openChannel();
+    channel.current = ch;
+    if (!ch) return undefined;
+    ch.onmessage = (e) => { if (e.data?.type === 'hello') { setAudienceOpen(true); ch.postMessage(latest.current); } };
+    return () => { ch.postMessage({ type: 'end' }); ch.close(); channel.current = null; };
+  }, []);
+  useEffect(() => { channel.current?.postMessage(audience); }); // every change: the point, the colours, blank
+  useEffect(() => {
+    if (!audienceOpen) return undefined;
+    const t = window.setInterval(() => { if (audienceWin.current?.closed) { audienceWin.current = null; setAudienceOpen(false); setBlank(false); } }, 1000);
+    return () => window.clearInterval(t);
+  }, [audienceOpen]);
+  const openAudience = () => {
+    if (!channel.current) return;
+    const win = window.open(audienceUrl(), 'bible-study-audience', 'popup,width=1280,height=720');
+    setPopupBlocked(!win);
+    if (win) { audienceWin.current = win; setAudienceOpen(true); }
+  };
+  const toggleNotes = () => setShowNotes((on) => { const next = !on; try { localStorage.setItem('present-notes-here', next ? 'on' : 'off'); } catch { /* storage unavailable */ } return next; });
+  const audBigger = (d) => setAudSize((i) => { const next = Math.min(SIZES.length - 1, Math.max(0, i + d)); try { localStorage.setItem('present-aud-size', String(SIZES[next])); } catch { /* storage unavailable */ } return next; });
+
   // the clock
   useEffect(() => {
     if (!running) return undefined;
@@ -68,13 +108,20 @@ export default function PresentMode({ title, subtitle = '', mode, script = '', t
         if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(1); }
         else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') { e.preventDefault(); go(-1); }
       } else if (e.key === ' ') { e.preventDefault(); setScrolling((s) => !s); }
+      if ((e.key === 'b' || e.key === 'B') && audienceOpen) setBlank((b) => !b);
+      if ((e.key === 'n' || e.key === 'N') && !audienceOpen && mode === 'outline') toggleNotes();
       if (e.key === '+' || e.key === '=') bigger(1);
       if (e.key === '-') bigger(-1);
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [mode, go, onClose]);
+  }, [mode, go, onClose, audienceOpen]);
 
+  const banner = audienceOpen && (
+    <p role="status" className={`shrink-0 px-4 py-1.5 text-center text-xs ${blank ? 'bg-red-500/25' : 'bg-emerald-500/15'}`}>
+      {blank ? 'The audience screen is blank. Press B to bring it back.' : mode === 'script' ? 'The audience window is connected. It shows only the title; your script stays on this screen.' : 'The audience window is connected. It shows the points and verses, never your notes.'}
+    </p>
+  );
   const colors = dark ? 'bg-[#111] text-[#f2efe8]' : 'bg-[#faf7f0] text-[#2b2620]';
   const fontSize = `${SIZES[size]}px`;
   const total = steps.length ? steps[steps.length - 1].plannedEnd : 0;
@@ -102,29 +149,73 @@ export default function PresentMode({ title, subtitle = '', mode, script = '', t
             </label>
           </div>
         )}
+        {typeof BroadcastChannel !== 'undefined' ? (
+          <div className="flex items-center gap-2" role="group" aria-label="Second screen">
+            {audienceOpen ? (
+              <>
+                <button type="button" onClick={() => setBlank((b) => !b)} aria-pressed={blank} className={btn} title="Black out the audience screen (B)">{blank ? 'Show audience' : 'Blank audience'}</button>
+                {mode === 'outline' && (
+                  <span className="flex items-center gap-1" role="group" aria-label="Audience text size">
+                    <button type="button" onClick={() => audBigger(-1)} disabled={audSize === 0} aria-label="Smaller audience text" className={btn}>Screen A−</button>
+                    <button type="button" onClick={() => audBigger(1)} disabled={audSize === SIZES.length - 1} aria-label="Larger audience text" className={btn}>A+</button>
+                  </span>
+                )}
+              </>
+            ) : (
+              <>
+                <button type="button" onClick={openAudience} className={btn} title="Opens a second window for a projector or other screen. It shows the points, never your notes.">Audience window</button>
+                {mode === 'outline' && <button type="button" onClick={toggleNotes} aria-pressed={showNotes} className={btn} title="Speaker notes stay hidden on this screen unless you turn them on (N)">{showNotes ? 'Hide notes' : 'Show notes'}</button>}
+              </>
+            )}
+          </div>
+        ) : null}
         <button type="button" onClick={onClose} className={`${btn} font-medium`}>Close</button>
       </div>
 
       {mode === 'script' ? (
+        <>
+        {banner}
         <div ref={scroller} className="min-h-0 flex-1 overflow-y-auto px-[6vw] py-[8dvh]" style={{ scrollBehavior: 'auto' }}>
           {script.trim()
             ? <div className="mx-auto max-w-[46em] whitespace-pre-wrap font-serif" style={{ fontSize, lineHeight: 1.5 }}>{script}<div style={{ height: '50dvh' }} aria-hidden="true" /></div>
             : <p className="mt-20 text-center text-lg opacity-70">There’s no script to present yet. Write one on the Script page.</p>}
         </div>
+        </>
       ) : (
         <div className="flex min-h-0 flex-1 flex-col">
+          {popupBlocked && <p role="alert" className="shrink-0 bg-amber-500/20 px-4 py-1.5 text-center text-xs">Your browser blocked the audience window. Allow pop-ups for this site, then try again.</p>}
+          {banner}
+          {audienceOpen && step ? (
+            // Presenter view: what the audience sees, your private notes, and what comes next
+            <div className="grid min-h-0 flex-1 gap-0 md:grid-cols-[3fr_2fr]">
+              <div className="min-h-0 overflow-y-auto border-current/15 px-[3vw] py-[4dvh] md:border-r">
+                <p className="mb-3 font-sans text-[11px] uppercase tracking-[0.16em] opacity-50">The audience sees</p>
+                <StepFace step={step} index={index} total={steps.length} fontSize={`${SIZES[Math.max(0, size - 3)]}px`} minutes={step.minutes} />
+              </div>
+              <div className="min-h-0 overflow-y-auto px-[3vw] py-[4dvh]">
+                <p className="mb-3 font-sans text-[11px] uppercase tracking-[0.16em] text-amber-500">Only you see this</p>
+                {step.note.trim()
+                  ? <p className="whitespace-pre-wrap font-serif" style={{ fontSize, lineHeight: 1.45 }}>{step.note}</p>
+                  : <p className="font-sans text-sm opacity-50">No speaker notes for this point. Add them under the point’s “⋯” details on the Outline page.</p>}
+                {steps[index + 1] && (
+                  <div className="mt-8 border-t border-current/15 pt-4">
+                    <p className="font-sans text-[11px] uppercase tracking-[0.16em] opacity-50">Next</p>
+                    <p className="mt-1 font-serif text-xl"><span className="mr-2 opacity-60">{steps[index + 1].label}</span>{steps[index + 1].text || '(untitled)'}</p>
+                    {steps[index + 1].minutes > 0 && <p className="font-sans text-xs opacity-60">{steps[index + 1].minutes} min</p>}
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
             <div className="min-h-0 flex-1 overflow-y-auto px-[6vw] py-[6dvh]">
               {step ? (
-              <div className="mx-auto max-w-[46em] font-serif" style={{ fontSize, lineHeight: 1.4 }}>
-                <p className="font-sans text-[0.4em] uppercase tracking-[0.16em] opacity-60">{step.kind ? `${step.kind} · ` : ''}Point {index + 1} of {steps.length}{step.minutes ? ` · ${step.minutes} min` : ''}</p>
-                <h1 className="mt-2 font-semibold"><span className="mr-3 opacity-60">{step.label}</span>{step.text || '(untitled)'}</h1>
-                {step.ref && <p className="mt-2 text-[0.6em] opacity-70">{step.ref}</p>}
-                {step.scripture?.text && <blockquote className="mt-5 border-l-4 border-current/30 pl-5 text-[0.8em] italic opacity-90">“{step.scripture.text}” <span className="not-italic opacity-60">— {step.scripture.ref}</span></blockquote>}
-                {step.note && <p className="mt-5 whitespace-pre-wrap text-[0.7em] opacity-85">{step.note}</p>}
-                {step.attachments.length > 0 && <p className="mt-5 text-[0.55em] opacity-60">{step.attachments.map((a) => `${a.type === 'word' ? 'Word' : 'See'}: ${a.label}`).join('   ·   ')}</p>}
-              </div>
+                <>
+                  <StepFace step={step} index={index} total={steps.length} fontSize={fontSize} minutes={step.minutes} note={showNotes ? step.note : ''} />
+                  {showNotes && step.note && <p className="mx-auto mt-2 max-w-[46em] font-sans text-[11px] uppercase tracking-[0.16em] text-amber-500">Speaker notes are showing on this screen (N to hide)</p>}
+                </>
               ) : <p className="mt-20 text-center text-lg opacity-70">There’s no outline to present yet. Build one on the Outline page.</p>}
             </div>
+          )}
           <div className="flex shrink-0 items-center justify-between gap-3 border-t border-current/15 px-4 py-3">
             <button type="button" onClick={() => go(-1)} disabled={index === 0} className={btn}>← Back</button>
             <span className="text-xs opacity-60">{total ? `${total} min planned` : 'Set minutes on points to see your pace'} · arrows or space to move</span>

src/components/PresentMode.test.jsx

@@ -1,9 +1,10 @@
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { vi, test, expect, afterEach } from 'vitest';
+import { vi, test, expect, afterEach, beforeEach } from 'vitest';
 import PresentMode from './PresentMode.jsx';
 
-afterEach(() => vi.useRealTimers());
+beforeEach(() => localStorage.clear());
+afterEach(() => { vi.useRealTimers(); vi.unstubAllGlobals(); });
 const n = (id, text, minutes, extra = {}) => ({ id, text, ref: '', chunkId: null, minutes, note: '', kind: '', scripture: null, attachments: [], children: [], ...extra });
 const tree = [n('a', 'Welcome', 2, { note: 'Say hello' }), n('b', 'The gospel', 10, { ref: 'Rom 1:16' })];
 
@@ -11,7 +12,7 @@ test('the outline is stepped through a point at a time, with the keyboard or the
   const user = userEvent.setup();
   render(<PresentMode mode="outline" title="Romans" tree={tree} onClose={() => {}} />);
   expect(screen.getByText('Welcome')).toBeInTheDocument();
-  expect(screen.getByText('Say hello')).toBeInTheDocument();
+  expect(screen.queryByText('Say hello')).not.toBeInTheDocument(); // speaker notes are private by default
   expect(screen.getByText(/Point 1 of 2/)).toBeInTheDocument();
   expect(screen.getByRole('button', { name: /back/i })).toBeDisabled();
   await user.keyboard('{ArrowRight}');
@@ -58,3 +59,77 @@ test('Escape and Close both leave, and an empty script says what to do', async (
   await user.click(screen.getByRole('button', { name: 'Close' }));
   expect(onClose).toHaveBeenCalledTimes(2);
 });
+
+// A stand-in for the browser's BroadcastChannel that records what the presenter window sends
+class FakeChannel {
+  static instances = [];
+  constructor() { this.sent = []; FakeChannel.instances.push(this); }
+  postMessage(m) { this.sent.push(m); }
+  close() {}
+}
+const withChannel = () => { FakeChannel.instances = []; vi.stubGlobal('BroadcastChannel', FakeChannel); };
+const last = () => FakeChannel.instances[0].sent.filter((m) => m.type === 'state').at(-1);
+
+test('on one screen the speaker notes stay hidden until you turn them on', async () => {
+  const user = userEvent.setup();
+  render(<PresentMode mode="outline" title="Romans" tree={tree} onClose={() => {}} />);
+  expect(screen.queryByText('Say hello')).not.toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Show notes' }));
+  expect(screen.getByText('Say hello')).toBeInTheDocument();
+  expect(localStorage.getItem('present-notes-here')).toBe('on');
+  await user.click(screen.getByRole('button', { name: 'Hide notes' }));
+  expect(screen.queryByText('Say hello')).not.toBeInTheDocument();
+});
+
+test('with an audience window the notes appear only on the presenter screen, never in what is sent', async () => {
+  withChannel();
+  vi.stubGlobal('open', vi.fn(() => ({ closed: false })));
+  const user = userEvent.setup();
+  render(<PresentMode mode="outline" title="Romans" tree={tree} onClose={() => {}} />);
+  await user.click(screen.getByRole('button', { name: 'Audience window' }));
+  expect(window.open).toHaveBeenCalledWith(expect.stringContaining('?audience=1'), 'bible-study-audience', expect.any(String));
+  expect(screen.getByText('Only you see this')).toBeInTheDocument();
+  expect(screen.getByText('Say hello')).toBeInTheDocument(); // the presenter's own screen
+  expect(screen.getByText(/never your notes/i)).toBeInTheDocument();
+  expect(last()).toMatchObject({ mode: 'outline', index: 0, total: 2, blank: false });
+  expect(last().step.text).toBe('Welcome');
+  const everything = JSON.stringify(FakeChannel.instances[0].sent);
+  expect(everything).not.toContain('Say hello');
+  expect(screen.getByText('Next')).toBeInTheDocument(); // the preview of the next point
+  await user.keyboard('{ArrowRight}');
+  expect(last().step.text).toBe('The gospel');
+});
+
+test('a window that opens later is brought up to date, and B blacks the audience screen out', async () => {
+  withChannel();
+  const user = userEvent.setup();
+  render(<PresentMode mode="outline" title="Romans" tree={tree} onClose={() => {}} />);
+  const channel = FakeChannel.instances[0];
+  act(() => channel.onmessage({ data: { type: 'hello' } })); // someone opened the audience address by hand
+  expect(await screen.findByText('Only you see this')).toBeInTheDocument();
+  expect(channel.sent.at(-1).step.text).toBe('Welcome');
+  await user.keyboard('b');
+  expect(last().blank).toBe(true);
+  expect(screen.getByText(/audience screen is blank/i)).toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Show audience' }));
+  expect(last().blank).toBe(false);
+});
+
+test('in script mode the audience is only ever sent the title', async () => {
+  withChannel();
+  vi.stubGlobal('open', vi.fn(() => ({ closed: false })));
+  const user = userEvent.setup();
+  render(<PresentMode mode="script" title="Romans 8" script="My private script text" onClose={() => {}} />);
+  await user.click(screen.getByRole('button', { name: 'Audience window' }));
+  expect(last()).toMatchObject({ mode: 'script', title: 'Romans 8', step: null });
+  expect(JSON.stringify(FakeChannel.instances[0].sent)).not.toContain('private script');
+  expect(screen.getByText(/only the title/i)).toBeInTheDocument();
+});
+
+test('the presentation ending tells the audience window', () => {
+  withChannel();
+  const { unmount } = render(<PresentMode mode="outline" title="Romans" tree={tree} onClose={() => {}} />);
+  const channel = FakeChannel.instances[0];
+  unmount();
+  expect(channel.sent.at(-1)).toEqual({ type: 'end' });
+});

src/components/RecallHistory.jsx

@@ -0,0 +1,47 @@
+// Home: how your weekly recalls have gone — the last eight weeks at a glance, then every recall you've written.
+import { useMemo, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { loadProjectById } from '../utils/projectStorage.js';
+import { recallHistory, recallSummary } from '../utils/recall.js';
+
+const LABEL = { solid: 'Had it', partly: 'Partly', forgot: 'Slipped' };
+const DOT = { solid: 'bg-[var(--r-accent)] border-[var(--r-accent)]', partly: 'bg-[var(--r-hl)] border-[var(--r-accent)]', forgot: 'border-[var(--r-sub)]' };
+
+export default function RecallHistory() {
+  const { projectIndex, openStudyChunk } = useApp();
+  const [open, setOpen] = useState(false);
+  const history = useMemo(() => recallHistory(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)), [projectIndex]);
+  if (history.length === 0) return null;
+  const { counts, total, recent } = recallSummary(history);
+
+  return (
+    <section aria-label="Recall history" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm">
+      <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} className="flex w-full flex-wrap items-center justify-between gap-3 text-left">
+        <span><span className="font-medium">Recall history</span> <span className="text-xs text-[var(--r-sub)]">{total} recall{total === 1 ? '' : 's'} · {counts.solid} had it · {counts.partly} partly · {counts.forgot} slipped</span></span>
+        <span className="flex items-center gap-1" aria-label="Last eight weeks">
+          {recent.map((w) => (
+            <span key={w.start} title={w.rating ? LABEL[w.rating] : 'No recall that week'}
+              className={`h-3 w-3 rounded-full border ${w.rating ? DOT[w.rating] : 'border-[var(--r-line)]'}`} />
+          ))}
+          <span className="ml-1 text-xs text-[var(--r-sub)]">{open ? '▾' : '▸'}</span>
+        </span>
+      </button>
+      {open && (
+        <ul className="mt-3 space-y-2.5">
+          {history.map((h) => (
+            <li key={`${h.chunkId}-${h.at}`} className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] p-3">
+              <div className="flex flex-wrap items-center justify-between gap-2 text-xs">
+                <span><span className="font-medium text-sm">{h.reference}</span> <span className="text-[var(--r-sub)]">· {h.projectTitle} · {new Date(h.at).toLocaleDateString()}</span></span>
+                <span className="flex items-center gap-2">
+                  <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5">{LABEL[h.rating] ?? '—'}</span>
+                  <button type="button" onClick={() => openStudyChunk(h.projectId, h.chunkId)} className="text-[var(--r-accent)] hover:underline">Open</button>
+                </span>
+              </div>
+              {h.text && <p className="mt-1.5 line-clamp-3 whitespace-pre-line font-serif text-[13px] leading-relaxed text-[var(--r-sub)]">{h.text}</p>}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

src/components/ScriptureRefs.jsx

@@ -0,0 +1,63 @@
+// Under a note: each Scripture reference written in it (Rom 8:28, Psalm 23…) as a chip. Click one to read the verse
+// (BSB) right there, or open it in the Bible reader. The text itself is never changed.
+import { useEffect, useMemo, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { fetchChapter } from '../utils/bibleText.js';
+import { labelFor, uniqueReferences } from '../utils/scriptureRefs.js';
+
+const MAX_VERSES = 12;
+const CHAPTER_PREVIEW = 6;
+
+function Preview({ r }) {
+  const { jumpToReaderVerse, openBibleReader } = useApp();
+  const [state, setState] = useState({ loading: true });
+  useEffect(() => {
+    let live = true;
+    setState({ loading: true });
+    fetchChapter('BSB', r.book, r.chapter)
+      .then(({ verses }) => {
+        const from = r.verse ?? 1;
+        const to = r.verse ? (r.endVerse ?? r.verse) : from + CHAPTER_PREVIEW - 1;
+        const picked = verses.filter((v) => v.number >= from && v.number <= to).slice(0, MAX_VERSES);
+        if (live) setState({ verses: picked, more: !r.verse && verses.length > picked.length });
+      })
+      .catch((err) => { if (live) setState({ error: err.message || 'Could not load the verse.' }); });
+    return () => { live = false; };
+  }, [r.book, r.chapter, r.verse, r.endVerse]);
+
+  return (
+    <div role="region" aria-label={`${labelFor(r)} preview`} className="mt-1.5 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-3 text-[13px]">
+      {state.loading && <p className="text-xs text-[var(--r-sub)]">Loading…</p>}
+      {state.error && <p className="text-xs text-[var(--r-sub)]">{state.error} You can still open it in the Bible.</p>}
+      {state.verses && (state.verses.length === 0
+        ? <p className="text-xs text-[var(--r-sub)]">That verse isn’t in the BSB.</p>
+        : <div className="space-y-1 font-serif leading-relaxed">{state.verses.map((v) => <p key={v.number}><sup className="mr-1 font-sans text-[var(--r-accent)]">{v.number}</sup>{v.text}</p>)}{state.more && <p className="text-xs text-[var(--r-sub)]">…</p>}</div>)}
+      <div className="mt-2 flex items-center gap-3 font-sans text-xs">
+        <button type="button" onClick={() => { jumpToReaderVerse(r.book, r.chapter, r.verse ?? 1); openBibleReader(); }} className="text-[var(--r-accent)] hover:underline">Read in the Bible</button>
+        <span className="text-[var(--r-sub)]">Berean Standard Bible</span>
+      </div>
+    </div>
+  );
+}
+
+export default function ScriptureRefs({ text }) {
+  const refs = useMemo(() => uniqueReferences(text), [text]);
+  const [open, setOpen] = useState(null);
+  if (refs.length === 0) return null;
+  const openRef = refs.find((r) => labelFor(r) === open);
+  return (
+    <div className="mt-1.5" aria-label="References in this note">
+      <p className="flex flex-wrap items-center gap-1.5 text-xs">
+        <span className="text-[var(--r-sub)]">Verses mentioned:</span>
+        {refs.map((r) => {
+          const label = labelFor(r);
+          return (
+            <button key={label} type="button" aria-pressed={open === label} onClick={() => setOpen(open === label ? null : label)}
+              className={`rounded-full border px-2 py-0.5 ${open === label ? 'border-[var(--r-accent)] text-[var(--r-text)]' : 'border-[var(--r-line)] text-[var(--r-accent)] hover:bg-black/5'}`}>{label}</button>
+          );
+        })}
+      </p>
+      {openRef && <Preview r={openRef} />}
+    </div>
+  );
+}

src/components/ScriptureRefs.test.jsx

@@ -0,0 +1,47 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { AppContext } from '../context/AppContext.js';
+import ScriptureRefs from './ScriptureRefs.jsx';
+
+const jump = vi.fn();
+const open = vi.fn();
+beforeEach(() => {
+  jump.mockClear(); open.mockClear();
+  vi.stubGlobal('fetch', vi.fn(async () => ({
+    ok: true, status: 200,
+    json: async () => ({ book: { numberOfChapters: 16 }, verses: [28, 29, 30].map((n) => ({ number: n, text: `Verse ${n} text.` })) }),
+  })));
+});
+const setup = (text) => render(<AppContext.Provider value={{ jumpToReaderVerse: jump, openBibleReader: open }}><ScriptureRefs text={text} /></AppContext.Provider>);
+
+test('references in a note become chips, and a note with none shows nothing', () => {
+  const { container } = setup('Nothing to see here.');
+  expect(container).toBeEmptyDOMElement();
+});
+
+test('clicking a reference shows the verse, and "Read in the Bible" opens the reader there', async () => {
+  const user = userEvent.setup();
+  setup('God works all things together, Rom 8:28-29. See also Romans 8:28.');
+  expect(screen.getAllByRole('button', { name: /Romans 8/ })).toHaveLength(2); // 8:28–29 and 8:28 are different references
+  await user.click(screen.getByRole('button', { name: 'Romans 8:28–29' }));
+  const preview = await screen.findByRole('region', { name: /Romans 8:28–29 preview/ });
+  expect(await within(preview).findByText('Verse 28 text.')).toBeInTheDocument();
+  expect(within(preview).getByText('Verse 29 text.')).toBeInTheDocument();
+  expect(within(preview).queryByText('Verse 30 text.')).not.toBeInTheDocument();
+  await user.click(within(preview).getByRole('button', { name: 'Read in the Bible' }));
+  expect(jump).toHaveBeenCalledWith('ROM', 8, 28);
+  expect(open).toHaveBeenCalled();
+  await user.click(screen.getByRole('button', { name: 'Romans 8:28–29' }));
+  expect(screen.queryByRole('region')).not.toBeInTheDocument();
+});
+
+test('a failure to load the verse still leaves the link to the Bible', async () => {
+  vi.stubGlobal('fetch', vi.fn(async () => { throw new Error('offline'); }));
+  const user = userEvent.setup();
+  setup('Psalm 23:1');
+  await user.click(screen.getByRole('button', { name: 'Psalms 23:1' }));
+  const preview = await screen.findByRole('region');
+  expect(await within(preview).findByText(/You can still open it in the Bible/)).toBeInTheDocument();
+  expect(within(preview).getByRole('button', { name: 'Read in the Bible' })).toBeInTheDocument();
+});

src/components/SeriesProgress.jsx

@@ -0,0 +1,41 @@
+// Finish → Series progress: every session of the study with where it stands (studied, ready to teach, taught) and
+// what is still open on it, so a long study doesn't lose track of itself.
+import { seriesProgress, STAGES } from '../utils/seriesProgress.js';
+
+const PILL = ['border border-[var(--r-line)] text-[var(--r-sub)]', 'bg-[var(--r-bar)] border border-[var(--r-line)]', 'border border-[var(--r-accent)] text-[var(--r-accent)]', 'bg-[var(--r-accent)] text-[var(--r-on)]'];
+
+export default function SeriesProgress({ project, onOpen }) {
+  const { rows, counts, taught, total, next } = seriesProgress(project);
+  if (total < 2) return null; // a series needs more than one session
+  return (
+    <section className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Series progress">
+      <h2 className="text-sm font-medium">Series progress</h2>
+      <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">
+        {taught} of {total} session{total === 1 ? '' : 's'} taught
+        {next ? `. Next up: session ${next.number}, ${next.reference}${next.title ? ` (${next.title})` : ''}.` : '. The series is finished.'}
+        {' '}Worked out from what you’ve written: notes make a session “Studied”, an outline, script or questions make it “Ready to teach”, and session notes make it “Taught”.
+      </p>
+      <div className="mb-3 flex h-2 overflow-hidden rounded-full bg-[var(--r-line)]" role="img" aria-label={STAGES.map((s, i) => `${counts[i]} ${s.toLowerCase()}`).join(', ')}>
+        {counts.map((n, i) => n > 0 && <span key={STAGES[i]} style={{ width: `${(n / total) * 100}%`, opacity: [0, 0.35, 0.65, 1][i] }} className={i === 0 ? '' : 'bg-[var(--r-accent)]'} />)}
+      </div>
+      <ul className="divide-y divide-[var(--r-line)]">
+        {rows.map((r) => (
+          <li key={r.id} className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2 text-sm">
+            <span className="w-6 shrink-0 text-xs text-[var(--r-sub)]">{r.number}</span>
+            <span className="min-w-0 flex-1">
+              {onOpen
+                ? <button type="button" onClick={() => onOpen(r.id)} className="text-left hover:underline">{r.reference}{r.title ? ` · ${r.title}` : ''}</button>
+                : <span>{r.reference}{r.title ? ` · ${r.title}` : ''}</span>}
+            </span>
+            {(r.openFollowUps > 0 || r.openComments > 0) && (
+              <span className="text-xs text-[var(--r-sub)]">
+                {[r.openFollowUps > 0 && `${r.openFollowUps} follow-up${r.openFollowUps === 1 ? '' : 's'}`, r.openComments > 0 && `${r.openComments} comment${r.openComments === 1 ? '' : 's'}`].filter(Boolean).join(' · ')}
+              </span>
+            )}
+            <span className={`shrink-0 rounded-full px-2.5 py-0.5 text-xs ${PILL[r.stage]}`}>{STAGES[r.stage]}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

src/components/SessionSchedule.jsx

@@ -1,4 +1,4 @@
-// Export → Schedule: the study's sessions (one per chunk) as a calendar file, starting on a date you pick.
+// Finish → Schedule: the study's sessions (one per chunk) as a calendar file, starting on a date you pick.
 import { useState } from 'react';
 import { formatChunkReference } from '../utils/bibleUtils.jsx';
 import { buildIcs, downloadIcs, sessionDates } from '../utils/icsFile.js';

src/components/ShortcutsHelp.jsx

@@ -22,6 +22,10 @@ const BY_PAGE = {
   ],
   study: [
     ['← →', 'Previous / next chunk'],
+    ['1  2  3', 'Write in Observe / Interpret / Apply'],
+    ['Esc', 'Leave a note box (then keys work again)'],
+    ['C  W  X  P  R', 'Commentary / Word study / Cross-refs / People & places / Reading list'],
+    ['V', 'Compare passages or translations'],
   ],
 };
 

src/components/SlidesExport.jsx

@@ -0,0 +1,30 @@
+// Finish → Slides: a printable slide deck for a session or the whole study (Save as PDF in the print dialog).
+import { useState } from 'react';
+import { sessionsFor } from '../utils/handout.js';
+import { printSlides } from '../utils/slides.js';
+
+export default function SlidesExport({ project }) {
+  const sessions = sessionsFor(project);
+  const [which, setWhich] = useState('all');
+  const [dark, setDark] = useState(false);
+  const [blocked, setBlocked] = useState(false);
+  if (sessions.length === 0) return null;
+  const go = () => setBlocked(!printSlides(project, which === 'all' ? null : [which], { dark }));
+  return (
+    <section className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Slides">
+      <h2 className="text-sm font-medium">Slides</h2>
+      <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">A 16:9 slide for each session’s passage, each outline point (with the verse it quotes) and the discussion questions. Choose “Save as PDF” in the print dialog, then open it in any slide viewer or project it from the PDF. It isn’t a PowerPoint file.</p>
+      <div className="flex flex-wrap items-end gap-3">
+        <label className="text-xs text-[var(--r-sub)]">Sessions
+          <select value={which} onChange={(e) => setWhich(e.target.value)} className="mt-1 block rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)]">
+            <option value="all">All {sessions.length}</option>
+            {sessions.map((s) => <option key={s.chunk.id} value={s.chunk.id}>{s.number}. {s.reference}</option>)}
+          </select>
+        </label>
+        <label className="flex items-center gap-2 pb-2 text-xs text-[var(--r-sub)]"><input type="checkbox" checked={dark} onChange={(e) => setDark(e.target.checked)} className="accent-[var(--r-accent)]" /> Dark slides</label>
+        <button type="button" onClick={go} className="rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5">Print / Save PDF</button>
+      </div>
+      {blocked && <p role="alert" className="mt-2 text-xs text-[var(--r-danger,#b42318)]">Allow pop-ups for this site to print the slides.</p>}
+    </section>
+  );
+}

src/components/StepFace.jsx

@@ -0,0 +1,15 @@
+// One outline point as it appears on screen: the point, its passage and quoted verse, and what it carries.
+// Used for the whole screen in present mode, for the presenter's preview, and on the audience window. `note` and
+// `minutes` are only passed where the speaker is the one looking.
+export default function StepFace({ step, index, total, fontSize, minutes = null, note = '' }) {
+  return (
+    <div className="mx-auto max-w-[46em] font-serif" style={{ fontSize, lineHeight: 1.4 }}>
+      <p className="font-sans text-[0.4em] uppercase tracking-[0.16em] opacity-60">{step.kind ? `${step.kind} · ` : ''}Point {index + 1} of {total}{minutes ? ` · ${minutes} min` : ''}</p>
+      <h1 className="mt-2 font-semibold"><span className="mr-3 opacity-60">{step.label}</span>{step.text || '(untitled)'}</h1>
+      {step.ref && <p className="mt-2 text-[0.6em] opacity-70">{step.ref}</p>}
+      {step.scripture?.text && <blockquote className="mt-5 border-l-4 border-current/30 pl-5 text-[0.8em] italic opacity-90">“{step.scripture.text}” <span className="not-italic opacity-60">— {step.scripture.ref}</span></blockquote>}
+      {note && <p className="mt-5 whitespace-pre-wrap text-[0.7em] opacity-85">{note}</p>}
+      {step.attachments?.length > 0 && <p className="mt-5 text-[0.55em] opacity-60">{step.attachments.map((a) => `${a.type === 'word' ? 'Word' : 'See'}: ${a.label}`).join('   ·   ')}</p>}
+    </div>
+  );
+}

src/components/StudyPanel.jsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { useIqAvailable } from '../hooks/useIq.js';
 import IqCommentary from './iq/IqCommentary.jsx';
+import Family from './FamilyTree.jsx';
 import {
   COMMENTARIES, loadCommentary, loadTheographic, loadPerson, pickCommentaryEntry, useAsync,
 } from '../hooks/useVerseStudy.js';
@@ -71,6 +72,7 @@ function PersonDetails({ id }) {
     <div className="mt-1 space-y-1 text-xs leading-relaxed text-[var(--r-sub,#64748b)]">
       {(data.description ?? []).map((d, i) => <p key={i}>{d}</p>)}
       {!data.description?.length && <p>No description available.</p>}
+      <Family person={data} renderPerson={(pid) => <PersonDetails key={pid} id={pid} />} />
       {data.minYear != null && (
         <p className="text-[var(--r-sub,#64748b)]">
           Lived approx. {era(data.minYear)}{data.maxYear != null && data.maxYear !== data.minYear ? ` – ${era(data.maxYear)}` : ''}

src/components/Toasts.jsx

@@ -43,7 +43,7 @@ export function ToastProvider({ children }) {
   return (
     <ToastContext.Provider value={value}>
       {children}
-      <div style={themeVars(theme)} className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex flex-col items-center gap-2 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] font-sans">
+      <div style={themeVars(theme)} className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex flex-col items-center gap-2 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px)+var(--bottom-nav,0px))] font-sans">
         {toasts.map((t) => (
           <div key={t.id} role={t.tone === 'error' ? 'alert' : 'status'}
             className={`pointer-events-auto flex max-w-md items-center gap-3 rounded-full px-4 py-2.5 text-sm shadow-lg ${t.tone === 'error' ? 'bg-[var(--r-danger)] text-[var(--r-bg)]' : 'bg-[var(--r-text)] text-[var(--r-bg)]'}`}>

src/components/VersionHistory.jsx

@@ -1,4 +1,4 @@
-// Export → Earlier versions: the copies the server kept of this study as you worked. Look at what is different
+// Finish → Earlier versions: the copies the server kept of this study as you worked. Look at what is different
 // from now, and put one back. The version you replace is kept, so putting one back can be undone too.
 import { useCallback, useEffect, useState } from 'react';
 import { getStudyVersion, listStudyVersions } from '../syncService.js';

src/components/WeeklyRecall.jsx

@@ -0,0 +1,82 @@
+// Home card: once a week, write what you remember of a passage you studied, then compare it with your notes.
+import { useMemo, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { loadProjectById } from '../utils/projectStorage.js';
+import { pickRecall } from '../utils/recall.js';
+
+const RATE = [
+  { id: 'solid', label: 'I had it' },
+  { id: 'partly', label: 'Partly' },
+  { id: 'forgot', label: 'Most of it slipped' },
+];
+const box = 'mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm';
+const noteLabels = [['observation', 'Observe'], ['interpretation', 'Interpret'], ['application', 'Apply']];
+
+export default function WeeklyRecall() {
+  const { projectIndex, saveChunkRecall, openStudyChunk } = useApp();
+  const [step, setStep] = useState('card'); // card -> write -> compare -> done
+  const [text, setText] = useState('');
+  const [gaps, setGaps] = useState('');
+  const pick = useMemo(
+    () => pickRecall(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)),
+    [projectIndex],
+  );
+  if (step === 'done') return <div role="status" className={box}>Recall saved. See you next week.</div>;
+  if (!pick) return null;
+
+  const finish = (rating) => {
+    saveChunkRecall(pick.projectId, pick.chunk.id, { at: Date.now(), text: text.trim(), rating, gaps: gaps.trim() });
+    setStep('done');
+  };
+
+  if (step === 'card') {
+    return (
+      <div className={`${box} flex flex-wrap items-center justify-between gap-3`}>
+        <span><span className="font-medium">Weekly recall:</span> {pick.reference} <span className="text-[var(--r-sub)]">· {pick.projectTitle}</span></span>
+        <button type="button" onClick={() => setStep('write')} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)]">Start</button>
+      </div>
+    );
+  }
+  return (
+    <section aria-label="Weekly recall" className={box}>
+      <p className="font-medium">{pick.reference} <span className="font-normal text-[var(--r-sub)]">· {pick.projectTitle}</span></p>
+      {step === 'write' ? (
+        <>
+          <p className="mt-0.5 text-xs text-[var(--r-sub)]">From memory, no peeking: what did this passage say, what did it mean, and what did it ask of you?</p>
+          <textarea aria-label="What you remember" value={text} onChange={(e) => setText(e.target.value)} rows={6}
+            className="mt-2 w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 font-serif text-[15px] leading-7 focus:outline-none" />
+          <div className="mt-2 flex gap-2">
+            <button type="button" disabled={!text.trim()} onClick={() => setStep('compare')} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)] disabled:opacity-40">Show my notes</button>
+            <button type="button" onClick={() => { setText(''); setStep('card'); }} className="text-xs text-[var(--r-sub)] hover:underline">Not now</button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="mt-2 grid gap-3 sm:grid-cols-2">
+            <div>
+              <p className="mb-1 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">What you remembered</p>
+              <p className="whitespace-pre-line font-serif text-[13px] leading-relaxed">{text}</p>
+            </div>
+            <div>
+              <p className="mb-1 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Your notes</p>
+              {noteLabels.map(([f, label]) => pick.chunk[f]?.trim() && (
+                <p key={f} className="mb-1.5 whitespace-pre-line font-serif text-[13px] leading-relaxed"><span className="font-sans text-xs font-medium">{label}: </span>{pick.chunk[f]}</p>
+              ))}
+            </div>
+          </div>
+          <label className="mt-3 block text-xs text-[var(--r-sub)]">What did you miss or get wrong? <span className="opacity-70">(one per line; collected in Insights)</span>
+            <textarea aria-label="What slipped" value={gaps} onChange={(e) => setGaps(e.target.value)} rows={2}
+              className="mt-1 w-full resize-y rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+          </label>
+          <p className="mt-3 text-xs text-[var(--r-sub)]">How did you do?</p>
+          <div className="mt-1 flex flex-wrap gap-2">
+            {RATE.map((r) => (
+              <button key={r.id} type="button" onClick={() => finish(r.id)} className="rounded-full border border-[var(--r-text)] px-3 py-1 text-xs hover:bg-black/5">{r.label}</button>
+            ))}
+            <button type="button" onClick={() => openStudyChunk(pick.projectId, pick.chunk.id)} className="text-xs text-[var(--r-accent)] hover:underline">Open this chunk to review</button>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}

src/components/iq/IqDailyCard.jsx

@@ -1,26 +1,30 @@
 // Home card: today's verse and Spurgeon's Morning & Evening reading, both from IQ Bible.
 import { useEffect, useState } from 'react';
 import { useApp } from '../../context/AppContext.js';
-import { useIq, useIqAvailable } from '../../hooks/useIq.js';
+import { useIq, useIqStatus } from '../../hooks/useIq.js';
 import VerseShareImage, { BACKGROUND_KEY } from '../VerseShareImage.jsx';
 import { SCENES, loadPhotoList, resolveBackground, sceneDataUrl } from '../../utils/verseBackgrounds.js';
 import { bookOptions } from '../../utils/bibleUtils.jsx';
 import { READER_TRANSLATIONS, fetchChapter } from '../../utils/bibleText.js';
+import { fallbackVerseFor } from '../../utils/fallbackVerses.js';
 
 export default function IqDailyCard() {
-  const on = useIqAvailable();
-  if (!on) return null;
-  return <Card />;
+  const status = useIqStatus();
+  if (status === null) return null;
+  return <Card iq={status} />;
 }
 
-function Card() {
+function Card({ iq }) {
   const { jumpToReaderVerse, openBibleReader, readerTranslation, readerTheme } = useApp();
   // Today's verse is chosen by IQ Bible (the same for everyone); its words come from the Bible you pick.
-  const votd = useIq('bibles/eng_kjv/verse-of-the-day');
+  const votd = useIq(iq ? 'bibles/eng_kjv/verse-of-the-day' : null);
+  // When IQ Bible can't give us a verse (down, no key, allowance used up) the card shows a built-in one in the
+  // reader's own translation instead of disappearing.
+  const fallback = !votd.data?.data && votd.status !== 'loading';
   const [chosen, setChosen] = useState(() => { try { return localStorage.getItem('votd-translation') || ''; } catch { return ''; } });
-  const translation = READER_TRANSLATIONS.some((t) => t.id === chosen) ? chosen : (readerTranslation || 'BSB');
+  const translation = !fallback && READER_TRANSLATIONS.some((t) => t.id === chosen) ? chosen : (readerTranslation || 'BSB');
   const pick = (id) => { setChosen(id); try { localStorage.setItem('votd-translation', id); } catch { /* storage unavailable */ } };
-  const ref = votd.data?.data;
+  const ref = votd.data?.data ?? (fallback ? fallbackVerseFor() : undefined);
   const [text, setText] = useState({ key: '', value: '', error: false });
   const [sharing, setSharing] = useState(false);
   // The picture behind the verse: a different one each day by default, or the one you chose.
@@ -42,21 +46,22 @@ function Card() {
       .catch(() => { if (!controller.signal.aborted) setText({ key, value: '', error: true }); });
     return () => controller.abort();
   }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
-  const dev = useIq('devotionals/today');
+  const dev = useIq(iq ? 'devotionals/today' : null);
   const [part, setPart] = useState(() => (new Date().getHours() < 15 ? 'morning' : 'evening'));
-  const verse = votd.data?.data;
+  const verse = ref;
   const reading = dev.data?.data?.[part];
   const loaded = text.key === key;
   const shown = loaded && text.value ? text.value : loaded && text.error ? ref?.text ?? '' : '…';
   const shownTranslation = loaded && text.error ? 'KJV' : translation;
   const name = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev;
   if (!verse && !reading) return null;
+  if (fallback && !reading && loaded && text.error) return null; // nothing to show, not even the built-in verse
   return (
     <section className="mb-4 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Daily verse and devotional">
       {verse && (
         <div>
-          <div className="flex items-center justify-between gap-2">
-            <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Verse of the day</p>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <p className="whitespace-nowrap text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Verse of the day</p>
             <span className="flex items-center gap-1.5">
             <select aria-label="Verse of the day background" value={bgChoice} onChange={(e) => pickBackground(e.target.value)}
               className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 text-xs">
@@ -65,10 +70,10 @@ function Card() {
               <optgroup label="Scenes">{SCENES.map((sc) => <option key={sc.id} value={sc.id}>{sc.name}</option>)}</optgroup>
               {photos.length > 0 && <optgroup label="Your photos">{photos.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</optgroup>}
             </select>
-            <select aria-label="Verse of the day translation" value={translation} onChange={(e) => pick(e.target.value)}
+            {!fallback && <select aria-label="Verse of the day translation" value={translation} onChange={(e) => pick(e.target.value)}
               className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 text-xs">
               {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id}</option>)}
-            </select>
+            </select>}
             </span>
           </div>
           {/* the translation's text; the KJV from IQ Bible is the fallback if that Bible can't be loaded right now */}

src/components/iq/IqDictionary.jsx

@@ -0,0 +1,75 @@
+// A Bible dictionary lookup (Easton, Hastings, Hitchcock, Schaff, Smith: all public domain, from IQ Bible).
+// Type a word, pick a dictionary; the entry named for the word comes first and the entries that only mention it
+// are folded below. Scripture references in an entry open in the Reader.
+import { useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { useIq } from '../../hooks/useIq.js';
+import { pickEntries, preview, refTarget } from '../../utils/dictionary.js';
+
+const field = 'rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+
+function Entry({ entry, credit, open: startOpen }) {
+  const { jumpToReaderVerse, openBibleReader } = useApp();
+  const [open, setOpen] = useState(startOpen);
+  const p = preview(entry.definition);
+  const refs = [...new Set(entry.scripture_refs ?? [])].map(refTarget).filter(Boolean).slice(0, 14);
+  return (
+    <article className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-3">
+      <h4 className="font-medium">{entry.term}</h4>
+      <p className="mt-1 whitespace-pre-line text-[13px] leading-relaxed">{open || !p.cut ? entry.definition : p.text}</p>
+      {p.cut && <button type="button" onClick={() => setOpen((o) => !o)} className="mt-1 text-xs text-[var(--r-accent)] hover:underline">{open ? 'Show less' : 'Read the whole entry'}</button>}
+      {refs.length > 0 && (
+        <p className="mt-2 flex flex-wrap gap-1.5">
+          {refs.map((r) => (
+            <button key={r.label} type="button" onClick={() => { jumpToReaderVerse(r.book, r.chapter, r.verse); openBibleReader(); }} title="Read it in the Bible"
+              className="rounded-full border border-[var(--r-line)] px-2 py-0.5 text-[11px] text-[var(--r-accent)] hover:bg-black/5">{r.label}</button>
+          ))}
+        </p>
+      )}
+      <p className="mt-1.5 text-[10px] text-[var(--r-sub)]">{credit}</p>
+    </article>
+  );
+}
+
+export default function IqDictionary() {
+  const [dictId, setDictId] = useState(() => { try { return localStorage.getItem('dictionary') || 'easton'; } catch { return 'easton'; } });
+  const [typed, setTyped] = useState('');
+  const [asked, setAsked] = useState('');
+  const list = useIq('dictionaries');
+  const dictionaries = list.data?.data ?? [];
+  const current = dictionaries.find((d) => d.id === dictId) ?? dictionaries[0];
+  const result = useIq(asked && current ? `dictionaries/${current.id}` : null, { q: asked });
+  const { exact, others } = pickEntries(result.data?.data, asked);
+  const credit = current ? `${current.name}, ${current.author}, ${current.year}. ${current.license}.` : '';
+  const choose = (id) => { setDictId(id); try { localStorage.setItem('dictionary', id); } catch { /* storage unavailable */ } };
+  const ask = () => setAsked(typed.trim().slice(0, 100));
+
+  return (
+    <details className="mb-3 rounded-xl border border-[var(--r-line)] p-3" aria-label="Bible dictionary">
+      <summary className="cursor-pointer text-sm font-medium">Bible dictionary</summary>
+      <div className="mt-3 space-y-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <input type="text" aria-label="Look up a word" value={typed} onChange={(e) => setTyped(e.target.value)} placeholder="A name, place or word, e.g. cubit"
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); ask(); } }} className={`${field} min-w-0 flex-1`} />
+          <select aria-label="Dictionary" value={current?.id ?? dictId} onChange={(e) => choose(e.target.value)} className={field}>
+            {dictionaries.length === 0 && <option value={dictId}>{dictId}</option>}
+            {dictionaries.map((d) => <option key={d.id} value={d.id}>{d.name.replace(/ Bible Dictionary| Dictionary of the Bible| Bible Names Dictionary/, '')} ({d.entry_count})</option>)}
+          </select>
+          <button type="button" onClick={ask} disabled={!typed.trim()} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50">Look up</button>
+        </div>
+        {result.status === 'loading' && <p className="text-xs text-[var(--r-sub)]">Looking up…</p>}
+        {result.status === 'error' && <p role="alert" className="text-xs text-[var(--r-danger,#b42318)]">{result.error || 'The dictionary could not be reached.'}</p>}
+        {asked && (result.status === 'ready' || result.status === 'empty') && !exact && others.length === 0 && (
+          <p className="text-xs text-[var(--r-sub)]">Nothing for “{asked}” in this dictionary. Try another dictionary or the singular of the word.</p>
+        )}
+        {exact && <Entry entry={exact} credit={credit} open={false} />}
+        {others.length > 0 && (
+          <details className="text-xs">
+            <summary className="cursor-pointer text-[var(--r-sub)]">{exact ? 'Other entries that mention' : 'Entries that mention'} “{asked}” ({others.length})</summary>
+            <div className="mt-2 space-y-2">{others.slice(0, 8).map((e) => <Entry key={e.slug ?? e.term} entry={e} credit={credit} open={false} />)}</div>
+          </details>
+        )}
+      </div>
+    </details>
+  );
+}

src/components/iq/IqDictionary.test.jsx

@@ -0,0 +1,52 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { AppContext } from '../../context/AppContext.js';
+import IqDictionary from './IqDictionary.jsx';
+
+const LIST = { count: 2, data: [
+  { id: 'easton', name: "Easton's Bible Dictionary", author: 'Matthew George Easton', year: '1897', license: 'Public domain', entry_count: 3962 },
+  { id: 'smith', name: "Smith's Bible Dictionary", author: 'William Smith', year: '1863', license: 'Public domain', entry_count: 4488 },
+] };
+const ANSWER = { count: 2, data: [
+  { term: 'Alabaster', slug: 'alabaster', definition: 'A stone box. It mentions a talent.', scripture_refs: ['Matthew 26:7'] },
+  { term: 'Talent', slug: 'talent', definition: 'The largest Hebrew weight, about 75 pounds.', scripture_refs: ['Exodus 38:25', 'Matthew 25:15'] },
+] };
+
+const jump = vi.fn();
+const open = vi.fn();
+const asked = [];
+beforeEach(() => {
+  asked.length = 0; jump.mockClear(); open.mockClear(); localStorage.clear();
+  vi.stubGlobal('fetch', vi.fn(async (url) => {
+    asked.push(String(url));
+    const body = String(url).includes('/api/iq/dictionaries/') ? ANSWER : LIST;
+    return { ok: true, status: 200, json: async () => body, text: async () => JSON.stringify(body) };
+  }));
+});
+
+test('look up a word: the entry named for it comes first, its Scripture references open in the Reader', async () => {
+  const user = userEvent.setup();
+  render(<AppContext.Provider value={{ jumpToReaderVerse: jump, openBibleReader: open }}><IqDictionary /></AppContext.Provider>);
+  await user.click(screen.getByText('Bible dictionary'));
+  await user.type(await screen.findByRole('textbox', { name: 'Look up a word' }), 'talent{Enter}');
+  const entry = (await screen.findByRole('heading', { name: 'Talent' })).closest('article');
+  expect(within(entry).getByText(/about 75 pounds/)).toBeInTheDocument();
+  expect(asked.some((u) => /dictionaries\/easton\?q=talent/.test(u))).toBe(true);
+  await user.click(within(entry).getByRole('button', { name: 'Matthew 25:15' }));
+  expect(jump).toHaveBeenCalledWith('MAT', 25, 15);
+  expect(open).toHaveBeenCalled();
+  expect(within(entry).getByText(/Easton's Bible Dictionary, Matthew George Easton, 1897\. Public domain\./)).toBeInTheDocument();
+  expect(screen.getByText(/Entries that mention|Other entries that mention/)).toBeInTheDocument(); // Alabaster only mentions it
+});
+
+test('the chosen dictionary is remembered and used for the next lookup', async () => {
+  const user = userEvent.setup();
+  render(<AppContext.Provider value={{ jumpToReaderVerse: jump, openBibleReader: open }}><IqDictionary /></AppContext.Provider>);
+  await user.click(screen.getByText('Bible dictionary'));
+  await user.selectOptions(await screen.findByRole('combobox', { name: 'Dictionary' }), 'smith');
+  expect(localStorage.getItem('dictionary')).toBe('smith');
+  await user.type(screen.getByRole('textbox', { name: 'Look up a word' }), 'cubit{Enter}');
+  await screen.findByRole('heading', { name: 'Talent' });
+  expect(asked.some((u) => /dictionaries\/smith\?q=cubit/.test(u))).toBe(true);
+});

src/components/iq/iq.test.jsx

@@ -160,6 +160,20 @@ describe('IqDailyCard', () => {
   });
 });
 
+describe('IqDailyCard fallback', () => {
+  test('when IQ Bible is down, shows the built-in verse of the day in the reader translation, with no picker', async () => {
+    const { default: IqDailyCard } = await import('./IqDailyCard.jsx');
+    const { fallbackVerseFor } = await import('../../utils/fallbackVerses.js');
+    const v = fallbackVerseFor();
+    routes['/api/iq/bibles/eng_kjv/verse-of-the-day'] = { status: 502, body: { error: 'down' } };
+    routes[`https://bible.helloao.org/api/BSB/${v.book_usfm}/${v.chapter_number}.json`] = { chapter: { content: [{ type: 'verse', number: v.verse_number, content: ['Built-in verse text'] }] } };
+    const { AppContext } = await import('../../context/AppContext.js');
+    render(<AppContext.Provider value={{ jumpToReaderVerse: vi.fn(), openBibleReader: vi.fn(), readerTranslation: 'BSB' }}><IqDailyCard /></AppContext.Provider>);
+    expect(await screen.findByText('Built-in verse text')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Verse of the day translation')).toBeNull();
+  });
+});
+
 describe('Study side', () => {
   const chunk = { id: 'c1', startVerse: 14, endVerse: 16, tags: ['love'], generalNotes: '' };
   const chapter = { book: 'John', bookAbbrev: 'JHN', chapter: '3' };

src/components/reader/HomeButton.jsx

@@ -0,0 +1,11 @@
+import { HomeIcon } from './icons.jsx';
+
+// The way back to the dashboard from the Reader and from a study. Always labelled, and big enough to hit with a thumb.
+export default function HomeButton({ onClick }) {
+  return (
+    <button type="button" onClick={onClick} aria-label="Back to home" data-tip="Back to home"
+      className="flex h-10 shrink-0 items-center gap-1.5 rounded-full border border-[var(--r-line)] px-3 text-sm text-[var(--r-text)] transition hover:bg-black/5">
+      <HomeIcon /><span>Home</span>
+    </button>
+  );
+}

src/components/reader/ReaderBars.jsx

@@ -1,15 +1,16 @@
 // Top and bottom chrome for the reader. Everything stays one tap away; focus
 // mode hides both.
 import { ChevronLeft, ChevronRight, ChevronDown, SearchIcon, LinkIcon, PenIcon, HeadphonesIcon, FocusIcon, CheckIcon, CompareIcon, HighlighterIcon } from './icons.jsx';
+import HomeButton from './HomeButton.jsx';
 import { BookmarkIcon } from '../../utils/bibleUtils.jsx';
 
 const iconBtn = 'flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] transition hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent';
 
 export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onHighlights, highlightCount, onCompare, compareActive, onSettings, onDoneDrawing }) {
   return (
-    <div className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
+    <div className="fixed-bar safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
       <div className="mx-auto flex h-12 max-w-4xl items-center gap-1 px-2">
-        <button type="button" onClick={onBack} className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] transition hover:bg-black/5" aria-label="Back to home" data-tip="Back to home"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
+        <HomeButton onClick={onBack} />
         <button type="button" onClick={onOpenNavigator}
           className="mx-auto flex min-w-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--r-text)] hover:bg-black/5" data-tip="Go to a book and chapter (G)">
           <span className="truncate">{title}</span><ChevronDown />
@@ -43,7 +44,7 @@ export function BottomBar({
 }) {
   const active = 'text-[var(--r-accent)]';
   return (
-    <div className="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)] font-sans">
+    <div className="fixed-bar fixed inset-x-0 bottom-0 z-30 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)] font-sans">
       <div className="mx-auto flex h-14 max-w-4xl items-center gap-0.5 px-2">
         <button type="button" onClick={onPrev} disabled={prevDisabled} className={iconBtn} aria-label="Previous chapter" data-tip="Previous chapter (←)"><ChevronLeft /></button>
         <button type="button" onClick={onAudio} className={`${iconBtn} ${audioActive ? active : ''}`} aria-label="Listen" data-tip="Listen to this chapter"><HeadphonesIcon /></button>

src/components/reader/VerseSheet.jsx

@@ -36,7 +36,7 @@ function OriginalTab({ words }) {
             {w.p && <div className="mt-0.5 text-[10px] leading-tight text-[var(--r-sub)]">{w.p}</div>}
             {w.s && <div className="mt-0.5 text-[10px] text-[var(--r-sub)]">{w.s}</div>}
             {canSpeak && (
-              <button type="button" onClick={() => speakOriginalWord(w.o, w.s)}
+              <button type="button" onClick={() => speakOriginalWord(w.o, w.s, w.t)}
                 className="mt-1.5 rounded-lg bg-[var(--r-bar)] px-2 py-0.5 text-[11px] hover:bg-black/5"
                 title={`Pronounce in ${isHebrew ? 'Hebrew' : 'Greek'}`}>Speak</button>
             )}

src/components/reader/icons.jsx

@@ -2,6 +2,7 @@
 const base = { viewBox: '0 0 20 20', width: 20, height: 20, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
 
 export const ChevronLeft = () => <svg {...base}><path d="M12 4l-6 6 6 6" /></svg>;
+export const HomeIcon = () => <svg {...base}><path d="M3.5 9.5L10 4l6.5 5.5M5 8.5V16h3.5v-4h3v4H15V8.5" /></svg>;
 export const ChevronRight = () => <svg {...base}><path d="M8 4l6 6-6 6" /></svg>;
 export const ChevronDown = ({ size = 14 }) => <svg {...base} width={size} height={size}><path d="M5 8l5 5 5-5" /></svg>;
 export const SearchIcon = () => <svg {...base}><circle cx="9" cy="9" r="5.5" /><path d="M13.5 13.5L17 17" /></svg>;

src/components/settings/DataSection.jsx

@@ -4,7 +4,7 @@ import { useApp } from '../../context/AppContext.js';
 import { useToast } from '../Toasts.jsx';
 import { DownloadProgress } from '../OfflineSave.jsx';
 import { useOfflineSave } from '../../hooks/useOfflineSave.js';
-import { backupFileName, buildBackup, restoreProjects, validateBackup } from '../../utils/backup.js';
+import { backupFileName, buildBackup, markBackedUp, restoreProjects, validateBackup } from '../../utils/backup.js';
 import { saveRemoteProject } from '../../syncService.js';
 
 const btn = 'rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5 disabled:opacity-50';
@@ -38,6 +38,7 @@ export default function DataSection() {
     link.click();
     link.remove();
     URL.revokeObjectURL(url);
+    markBackedUp();
     toast(`Backup downloaded: ${plural(backup.projects.length, 'study', 'studies')} and your reading marks`);
   };
 
@@ -80,7 +81,7 @@ export default function DataSection() {
       <div className="flex flex-wrap items-center gap-3">
         <button type="button" onClick={download} className={btn}>Download backup</button>
         {authUser && (
-          <a href="/api/account/export" download className={`${btn} inline-block`} title="Everything saved to your account on the server, including studies from other devices">Download from my account</a>
+          <a href="/api/account/export" download onClick={() => markBackedUp()} className={`${btn} inline-block`} title="Everything saved to your account on the server, including studies from other devices">Download from my account</a>
         )}
         <button type="button" onClick={() => fileRef.current?.click()} className={btn}>Restore from a backup…</button>
         <input ref={fileRef} type="file" accept="application/json,.json" onChange={choose} className="hidden" aria-label="Backup file" />
@@ -105,7 +106,7 @@ export default function DataSection() {
         <p className="mb-3 mt-1 text-sm text-[var(--r-sub)]">Chapters you read are kept automatically. To read anywhere, save a whole Bible while you’re connected (about 4 MB). The ESV, NLT, CSB and NASB can’t be saved: their licences don’t allow it.</p>
         {offline.job ? <DownloadProgress job={offline.job} onCancel={offline.cancel} /> : (
           <div className="flex flex-wrap gap-3">
-            {['BSB', 'NET'].map((t) => (
+            {['BSB', 'NET', 'KJV', 'ASV', 'LSV'].map((t) => (
               <button key={t} type="button" onClick={() => offline.saveBible(t)} className={btn}>
                 {(offline.saved[t] ?? []).length >= 66 ? `✓ The whole ${t} is saved` : `Save the whole ${t}`}
               </button>

src/components/settings/DataSection.test.jsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+import { AppContext } from '../../context/AppContext.js';
+import { ToastProvider } from '../Toasts.jsx';
+import { lastBackupAt } from '../../utils/backup.js';
+import DataSection from './DataSection.jsx';
+
+const value = {
+  authUser: { email: 'a@b.test' }, readerBookmarks: {}, readerBookmarkNotes: {}, readerTextHighlights: [], readerColorLabels: {}, readerInkByPage: {},
+  readingPlansState: { progress: [], customPlans: [], activity: [] }, importReaderMarks: vi.fn(), importReadingPlans: vi.fn(), refreshProjectIndex: vi.fn(), prayers: [], importPrayers: vi.fn(),
+};
+const setup = () => {
+  render(<AppContext.Provider value={value}><ToastProvider><DataSection /></ToastProvider></AppContext.Provider>);
+  return userEvent.setup();
+};
+
+beforeEach(() => {
+  localStorage.clear();
+  URL.createObjectURL = vi.fn(() => 'blob:x');
+  URL.revokeObjectURL = vi.fn();
+  document.addEventListener('click', (e) => { if (e.target.closest?.('a[download]')) e.preventDefault(); }); // no real navigation in the test
+});
+
+test('downloading the backup file is remembered, so Home stops asking', async () => {
+  const user = setup();
+  expect(lastBackupAt()).toBeNull();
+  await user.click(screen.getByRole('button', { name: 'Download backup' }));
+  expect(lastBackupAt()).toBeGreaterThan(Date.now() - 5000);
+});
+
+test('downloading from the account is remembered too', async () => {
+  const user = setup();
+  expect(lastBackupAt()).toBeNull();
+  await user.click(screen.getByRole('link', { name: 'Download from my account' }));
+  expect(lastBackupAt()).toBeGreaterThan(Date.now() - 5000);
+});

src/components/settings/MoreSettings.jsx

@@ -0,0 +1,121 @@
+// Settings → Preferences: the choices that used to be reachable only from the screen they affect
+// (highlight colour names, the dashboard's layout, the verse of the day, saved study templates).
+import { useEffect, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { useLocalSetting } from '../../hooks/useLocalSetting.js';
+import { useIqAvailable } from '../../hooks/useIq.js';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS } from '../../utils/highlightColors.js';
+import { SCENES, loadPhotoList } from '../../utils/verseBackgrounds.js';
+import { BACKGROUND_KEY } from '../VerseShareImage.jsx';
+
+const card = 'rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-6';
+const field = 'rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+
+function Row({ label, hint, children }) {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1.5 border-t border-[var(--r-line)] py-3 first:border-t-0">
+      <div className="min-w-0 flex-1 basis-48">
+        <p className="text-sm">{label}</p>
+        {hint && <p className="text-xs text-[var(--r-sub)]">{hint}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function HighlightColours() {
+  const { readerColorLabels = {}, setReaderColorLabel } = useApp();
+  return (
+    <section aria-label="Highlight colours" className={card}>
+      <h2 className="text-base font-medium">Highlight colours</h2>
+      <p className="mb-3 mt-1 text-sm text-[var(--r-sub)]">Give each colour a meaning, such as “Promise” or “Command”. The names show in your Highlights list and exports, and sync to your other devices.</p>
+      {HIGHLIGHT_COLORS.map((c) => (
+        <div key={c} className="flex items-center gap-3 border-t border-[var(--r-line)] py-2 first:border-t-0">
+          <span aria-hidden="true" className="h-5 w-5 shrink-0 rounded-full border border-black/10" style={{ background: c }} />
+          <input aria-label={`Name for ${COLOR_NAMES[c].toLowerCase()} highlights`} value={readerColorLabels[c] ?? ''} maxLength={30}
+            onChange={(e) => setReaderColorLabel(c, e.target.value)} placeholder={COLOR_SUGGESTIONS[c] ?? COLOR_NAMES[c]} className={`${field} min-w-0 flex-1`} />
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export function DashboardSettings() {
+  const [view, setView] = useLocalSetting('homeView', 'grid');
+  const [sort, setSort] = useLocalSetting('homeSort', 'recent');
+  return (
+    <section aria-label="My Studies page" className={card}>
+      <h2 className="text-base font-medium">My Studies page</h2>
+      <Row label="Show studies as" hint="You can still switch on the page itself.">
+        <div role="group" aria-label="Show studies as" className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+          {[['grid', 'Grid'], ['list', 'List']].map(([id, text]) => (
+            <button key={id} type="button" aria-pressed={view === id} onClick={() => setView(id)}
+              className={`px-3 py-2 text-sm ${view === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{text}</button>
+          ))}
+        </div>
+      </Row>
+      <Row label="Sort by">
+        <select aria-label="Sort studies by" value={sort} onChange={(e) => setSort(e.target.value)} className={field}>
+          <option value="recent">Last edited</option>
+          <option value="title">Title</option>
+          <option value="passage">Passage</option>
+        </select>
+      </Row>
+    </section>
+  );
+}
+
+export function VerseOfDaySettings() {
+  const on = useIqAvailable();
+  const { readerTranslation } = useApp();
+  const [translation, setTranslation] = useLocalSetting('votd-translation', '');
+  const [background, setBackground] = useLocalSetting(BACKGROUND_KEY, 'auto');
+  const [photos, setPhotos] = useState([]);
+  useEffect(() => { let live = true; loadPhotoList().then((list) => { if (live) setPhotos(list); }); return () => { live = false; }; }, []);
+  if (!on) return null;
+  const shown = READER_TRANSLATIONS.some((t) => t.id === translation) ? translation : '';
+  return (
+    <section aria-label="Verse of the day" className={card}>
+      <h2 className="text-base font-medium">Verse of the day</h2>
+      <p className="mb-1 mt-1 text-sm text-[var(--r-sub)]">The card on your My Studies page. Turn on the daily reminder under Notifications.</p>
+      <Row label="Bible" hint="Today’s verse is chosen for everyone; its words come from the Bible you pick.">
+        <select aria-label="Verse of the day Bible" value={shown} onChange={(e) => setTranslation(e.target.value)} className={field}>
+          <option value="">Same as my default Bible ({readerTranslation})</option>
+          {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+        </select>
+      </Row>
+      <Row label="Picture behind the verse">
+        <select aria-label="Verse of the day picture" value={background} onChange={(e) => setBackground(e.target.value)} className={field}>
+          <option value="auto">A different picture each day</option>
+          <option value="plain">Plain</option>
+          <optgroup label="Scenes">{SCENES.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}</optgroup>
+          {photos.length > 0 && <optgroup label="Your photos">{photos.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</optgroup>}
+        </select>
+      </Row>
+    </section>
+  );
+}
+
+export function StudyTemplates() {
+  const { userTemplates = [], deleteUserTemplate } = useApp();
+  return (
+    <section aria-label="Study templates" className={card}>
+      <h2 className="text-base font-medium">Study templates</h2>
+      <p className="mb-2 mt-1 text-sm text-[var(--r-sub)]">Templates you saved from a study’s Setup stage. They sync to your other devices.</p>
+      {userTemplates.length === 0 ? (
+        <p className="text-sm text-[var(--r-sub)]">None saved yet.</p>
+      ) : (
+        <ul className="divide-y divide-[var(--r-line)]">
+          {userTemplates.map((t) => (
+            <li key={t.id} className="flex items-center justify-between gap-3 py-2">
+              <span className="min-w-0"><span className="text-sm">{t.name}</span>{t.description && <span className="block truncate text-xs text-[var(--r-sub)]">{t.description}</span>}</span>
+              <button type="button" onClick={() => { if (window.confirm(`Delete the template “${t.name}”? Studies already made from it keep their notes.`)) deleteUserTemplate(t.id); }}
+                className="shrink-0 rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5">Delete</button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

src/components/study/ChunkComments.jsx

@@ -0,0 +1,40 @@
+// Comments for the people teaching this study together, shown in the notes' "More" area. Open ones can be marked done.
+import { useState } from 'react';
+import { addComment, removeComment, toggleComment } from '../../utils/chunkComments.js';
+
+const when = (at) => new Date(at).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+export default function ChunkComments({ chunk, updateChunk, author }) {
+  const comments = chunk.comments ?? [];
+  const [text, setText] = useState('');
+  const set = (next) => updateChunk(chunk.id, { comments: next });
+  const post = () => {
+    const next = addComment(comments, { by: author, text });
+    if (next !== comments) { set(next); setText(''); }
+  };
+  return (
+    <div>
+      <p className="text-xs text-[var(--r-sub)]">Comments <span className="opacity-70">(notes between the people teaching this study; tick one off when it’s dealt with)</span></p>
+      {comments.length > 0 && (
+        <ul className="mt-1.5 space-y-1.5" aria-label="Comments">
+          {comments.map((c) => (
+            <li key={c.id} className="flex items-start gap-2 rounded-xl border border-[var(--r-line)] px-2.5 py-2 text-sm">
+              <input type="checkbox" aria-label={`Done: ${c.text}`} checked={!!c.done} onChange={() => set(toggleComment(comments, c.id))} className="mt-1 accent-[var(--r-accent)]" />
+              <span className="min-w-0 flex-1">
+                <span className={`block whitespace-pre-wrap ${c.done ? 'text-[var(--r-sub)] line-through' : ''}`}>{c.text}</span>
+                <span className="text-[11px] text-[var(--r-sub)]">{c.by} · {when(c.at)}</span>
+              </span>
+              <button type="button" aria-label={`Delete comment: ${c.text}`} onClick={() => set(removeComment(comments, c.id))} className="text-xs text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="mt-1.5 flex gap-2">
+        <input aria-label="Add a comment" value={text} onChange={(e) => setText(e.target.value)} maxLength={1000} placeholder="Write a comment, then Enter"
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); post(); } }}
+          className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+        <button type="button" onClick={post} disabled={!text.trim()} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50">Post</button>
+      </div>
+    </div>
+  );
+}

src/components/study/CompareSheet.jsx

@@ -0,0 +1,214 @@
+// Compare two passages side by side — your notes and the verses — for parallels (the Gospels), repeated themes,
+// or the same chapter studied twice. Pick any chunk from any of your studies to set beside the one you're on.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { loadProjectById } from '../../utils/projectStorage.js';
+import { formatChunkReference, getChunkVerseEntries } from '../../utils/bibleUtils.jsx';
+import { READER_TRANSLATIONS, fetchChapter, translationName } from '../../utils/bibleText.js';
+import { alignVerses, differencesFor, markRanges, translationSpans } from '../../utils/compareTranslations.js';
+import { ownShare, pastedWords } from '../../utils/ownWork.js';
+import { usePasteCheck } from './PastePrompt.jsx';
+
+const FIELDS = [['observation', 'Observe'], ['interpretation', 'Interpret'], ['application', 'Apply']];
+
+// Every chunk in your studies, as a pick-list entry that remembers where it sits.
+function choices(projectIndex, currentProject) {
+  const projects = projectIndex.map((e) => (e.id === currentProject?.id ? currentProject : loadProjectById(e.id))).filter(Boolean);
+  return projects.flatMap((project) => project.chapters.flatMap((chapter, chapterIndex) => chapter.chunks.map((chunk) => ({
+    key: `${project.id}:${chunk.id}`, project, chapterIndex, chunk,
+    label: `${formatChunkReference(project, chapterIndex, chunk, '–')} · ${project.title}`,
+  }))));
+}
+
+function Column({ entry }) {
+  if (!entry) return <p className="p-4 text-sm text-[var(--r-sub)]">Pick a passage to compare.</p>;
+  const verses = getChunkVerseEntries(entry.project, entry.chapterIndex, entry.chunk);
+  return (
+    <div className="min-w-0 space-y-3 p-4">
+      <h3 className="font-medium">{entry.label}</h3>
+      <div className="max-h-48 space-y-1 overflow-y-auto rounded-xl bg-[var(--r-bar)] p-3 font-serif text-[13px] leading-relaxed">
+        {verses.map((v) => <p key={v.number}><sup className="mr-1 text-[var(--r-accent)]">{v.number}</sup>{v.text}</p>)}
+      </div>
+      {FIELDS.map(([f, label]) => (
+        <div key={f}>
+          <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{label}</p>
+          <p className="whitespace-pre-line font-serif text-[14px] leading-relaxed">{entry.chunk[f]?.trim() || <span className="text-[var(--r-sub)]">Nothing written.</span>}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const OIA = [
+  ['observation', 'Observe', 'What does the text say?'],
+  ['interpretation', 'Interpret', 'What does it mean?'],
+  ['application', 'Apply', 'What do I do with it?'],
+];
+
+// The chunk's own Observe / Interpret / Apply notes, editable right here while the translations are side by side.
+// They are the same notes as on the Study page, and long pastes are tagged the same way.
+function OiaBoxes({ chunk, updateChunk }) {
+  const share = ownShare(chunk);
+  const pasteCheck = usePasteCheck(chunk, updateChunk);
+  return (
+    <section aria-label="Your notes" className="border-t border-[var(--r-line)] px-4 pb-6 pt-4">
+      <p className="mb-3 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Your notes{share !== null ? ` · ${share}% your own words` : ''}</p>
+      <div className="grid gap-4 md:grid-cols-3">
+        {OIA.map(([field, label, hint]) => {
+          const pasted = pastedWords(chunk, field);
+          return (
+            <label key={field} className="flex flex-col text-xs text-[var(--r-sub)]">
+              <span className="mb-1 flex items-baseline justify-between"><span><span className="text-sm font-medium text-[var(--r-text)]">{label}</span> {hint}</span>{pasted > 0 && <span className="rounded-full bg-[var(--r-hl)] px-2 py-0.5 text-[var(--r-text)]">{pasted} pasted</span>}</span>
+              <textarea aria-label={label} value={chunk[field] ?? ''} rows={9}
+                onPaste={pasteCheck.onPaste(field)}
+                onChange={(e) => updateChunk(chunk.id, { [field]: e.target.value })}
+                className="min-h-[10rem] w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2.5 font-serif text-[15px] leading-7 text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" />
+              {pasteCheck.prompt(field)}
+            </label>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+// One chunk's verses in several translations, a row per verse. Free translations load straight away; licensed ones
+// come through the server and may be unavailable (no key set), which shows as a note instead of text.
+function TranslationsView({ project, chunkEntry, updateChunk }) {
+  const [highlight, setHighlight] = useState(() => { try { return localStorage.getItem('compare-highlight') !== 'off'; } catch { return true; } });
+  const setHl = (on) => { setHighlight(on); try { localStorage.setItem('compare-highlight', on ? 'on' : 'off'); } catch { /* storage unavailable */ } };
+  const spans = useMemo(() => (chunkEntry ? translationSpans(project, chunkEntry.chapterIndex, chunkEntry.chunk) : []), [project, chunkEntry]);
+  const spanKey = spans.map((s) => `${s.book}${s.chapter}:${s.from}-${s.to}`).join(',');
+  const [picked, setPicked] = useState(() => {
+    try { const saved = JSON.parse(localStorage.getItem('compare-translations')); if (Array.isArray(saved) && saved.length) return saved; } catch { /* storage unavailable */ }
+    return [project?.translation ?? 'BSB', 'NET'];
+  });
+  const [loaded, setLoaded] = useState({}); // id -> { status: 'loading'|'ok'|'error', chapters, copyright, error }
+  const toggle = (id) => setPicked((cur) => {
+    const next = cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id];
+    try { localStorage.setItem('compare-translations', JSON.stringify(next)); } catch { /* storage unavailable */ }
+    return next;
+  });
+
+  // The sheet is modal, so the passage can't change while it's open; results are only dropped after it closes.
+  const alive = useRef(true);
+  useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
+  useEffect(() => {
+    picked.filter((id) => !loaded[id]).forEach((id) => {
+      setLoaded((cur) => ({ ...cur, [id]: { status: 'loading' } }));
+      Promise.all(spans.map((span) => fetchChapter(id, span.bookAbbrev, Number(span.chapter))
+        .then((res) => [`${span.book}|${span.chapter}`, res])))
+        .then((results) => alive.current && setLoaded((cur) => ({
+          ...cur,
+          [id]: { status: 'ok', chapters: Object.fromEntries(results.map(([k, r]) => [k, r.verses])), copyright: results.map(([, r]) => r.copyright).find(Boolean) ?? '' },
+        })))
+        .catch((err) => { if (alive.current) setLoaded((cur) => ({ ...cur, [id]: { status: 'error', error: err.message || 'Unable to load.' } })); });
+    });
+  }, [picked, spanKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const shown = picked.filter((id) => loaded[id]?.status === 'ok');
+  const rows = alignVerses(spans, Object.fromEntries(shown.map((id) => [id, loaded[id].chapters])));
+  const cols = { gridTemplateColumns: `repeat(${Math.max(1, shown.length)}, minmax(0, 1fr))` };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Translations to compare">
+        {READER_TRANSLATIONS.map((t) => {
+          const on = picked.includes(t.id);
+          return (
+            <button key={t.id} type="button" aria-pressed={on} onClick={() => toggle(t.id)} title={t.name}
+              className={`rounded-full border px-3 py-1 text-xs ${on ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>{t.id}</button>
+          );
+        })}
+      </div>
+      {shown.length > 1 && (
+        <label className="flex items-center gap-2 text-xs text-[var(--r-sub)]"><input type="checkbox" checked={highlight} onChange={(e) => setHl(e.target.checked)} className="accent-[var(--r-accent)]" /> Highlight the words that differ from {shown[0]}</label>
+      )}
+      {picked.map((id) => loaded[id]?.status === 'error' && (
+        <p key={id} role="status" className="text-xs text-[var(--r-sub)]">{id} isn’t available right now: {loaded[id].error}</p>
+      ))}
+      {picked.some((id) => loaded[id]?.status === 'loading') && <p className="text-xs text-[var(--r-sub)]">Loading…</p>}
+      {shown.length === 0 && !picked.some((id) => !loaded[id] || loaded[id].status === 'loading') && <p className="text-sm text-[var(--r-sub)]">Pick two or more translations above.</p>}
+      {shown.length > 0 && (
+        <div className="space-y-3">
+          <div className="hidden gap-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)] md:grid" style={cols}>
+            {shown.map((id) => <span key={id}>{translationName(id)}</span>)}
+          </div>
+          {rows.map((row) => {
+            const diffs = highlight && shown.length > 1 ? differencesFor(row.texts, shown) : {};
+            const note = chunkEntry.chunk.verseNotes?.[row.noteKey] ?? '';
+            return (
+              <div key={row.key} className="border-t border-[var(--r-line)] pt-3">
+                <div className="grid gap-x-4 gap-y-1 md:[grid-template-columns:var(--cols)]" style={{ '--cols': cols.gridTemplateColumns }}>
+                  {shown.map((id) => (
+                    <p key={id} className="font-serif text-[14px] leading-relaxed">
+                      <sup className="mr-1 font-sans text-[var(--r-accent)]">{row.label}</sup>
+                      <span className="mr-1 font-sans text-[10px] uppercase tracking-wide text-[var(--r-sub)] md:hidden">{id}</span>
+                      {row.texts[id] == null ? <span className="text-[var(--r-sub)]">—</span>
+                        : markRanges(row.texts[id], diffs[id]).map((part, i) => (part.mark ? <mark key={i} className="rounded bg-[var(--r-hl)] px-0.5 text-inherit">{part.text}</mark> : <span key={i}>{part.text}</span>))}
+                    </p>
+                  ))}
+                </div>
+                <input aria-label={`Note on verse ${row.label}`} value={note} placeholder={`Note on verse ${row.label}`}
+                  onChange={(e) => updateChunk(chunkEntry.chunk.id, { verseNotes: { ...(chunkEntry.chunk.verseNotes ?? {}), [row.noteKey]: e.target.value } })}
+                  className="mt-1.5 w-full rounded-lg border border-transparent bg-transparent px-2 py-1 text-xs text-[var(--r-text)] placeholder:text-[var(--r-sub)] placeholder:opacity-60 hover:border-[var(--r-line)] focus:border-[var(--r-line)] focus:bg-[var(--r-bg)] focus:outline-none" />
+              </div>
+            );
+          })}
+          <div className="space-y-1 border-t border-[var(--r-line)] pt-3 text-[11px] leading-snug text-[var(--r-sub)]">
+            {shown.map((id) => {
+              const t = READER_TRANSLATIONS.find((x) => x.id === id);
+              return t?.notice || loaded[id].copyright ? <p key={id}>{loaded[id].copyright || t.notice}</p> : null;
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function CompareSheet({ currentChunkId, onClose }) {
+  const { projectIndex, project, updateChunk } = useApp();
+  // Other studies are read from storage once per list change; the open study comes straight from state so typing stays quick.
+  const others = useMemo(() => choices(projectIndex.filter((e) => e.id !== project?.id), null), [projectIndex, project?.id]);
+  const here = useMemo(() => (project?.chapters ?? []).flatMap((chapter, chapterIndex) => chapter.chunks.map((chunk) => ({
+    key: `${project.id}:${chunk.id}`, project, chapterIndex, chunk, label: `${formatChunkReference(project, chapterIndex, chunk, '–')} · ${project.title}`,
+  }))), [project]);
+  const mine = here.find((c) => c.chunk.id === currentChunkId);
+  const all = useMemo(() => [...here, ...others], [here, others]);
+  const [mode, setMode] = useState('passage'); // 'passage' | 'translations'
+  const [otherKey, setOtherKey] = useState('');
+  const other = all.find((c) => c.key === otherKey);
+  const tab = (id) => `rounded-full border px-3 py-1 text-xs ${mode === id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
+  return (
+    <div role="dialog" aria-modal="true" aria-label="Compare passages" className="fixed inset-0 z-[70] flex flex-col bg-[var(--r-bg)] text-[var(--r-text)]">
+      <div className="flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-2.5">
+        <h2 className="mr-auto text-sm font-medium sm:mr-0">Compare</h2>
+        <div role="tablist" aria-label="What to compare" className="flex gap-1.5">
+          <button type="button" role="tab" aria-selected={mode === 'passage'} onClick={() => setMode('passage')} className={tab('passage')}>Another passage</button>
+          <button type="button" role="tab" aria-selected={mode === 'translations'} onClick={() => setMode('translations')} className={tab('translations')}>Translations</button>
+        </div>
+        {mode === 'passage' && (
+          <select aria-label="Compare with" value={otherKey} onChange={(e) => setOtherKey(e.target.value)}
+            className="order-last min-w-0 basis-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm sm:order-none sm:basis-0 sm:flex-1">
+            <option value="">Choose a passage to set beside this one…</option>
+            {all.filter((c) => c.key !== mine?.key).map((c) => <option key={c.key} value={c.key}>{c.label}</option>)}
+          </select>
+        )}
+        <button type="button" onClick={onClose} className="ml-auto rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-sm hover:bg-black/5">Close</button>
+      </div>
+      {mode === 'passage' ? (
+        <div className="grid min-h-0 flex-1 overflow-y-auto md:grid-cols-2 md:divide-x md:divide-[var(--r-line)]">
+          <Column entry={mine} />
+          <Column entry={other} />
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          <h3 className="px-4 pt-4 font-medium">{mine?.label}</h3>
+          <TranslationsView project={project} chunkEntry={mine} updateChunk={updateChunk} />
+          {mine && <OiaBoxes chunk={mine.chunk} updateChunk={updateChunk} />}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/study/FirstDraft.jsx

@@ -0,0 +1,36 @@
+// "What changed since my first draft": your Observe / Interpret / Apply notes now, with the words added or
+// reworded since the copy kept when you first opened commentary. It shows whether commentary changed your thinking.
+import { diffVerses } from '../../utils/textDiff.js';
+import { markRanges } from '../../utils/compareTranslations.js';
+
+const FIELDS = [['observation', 'Observe'], ['interpretation', 'Interpret'], ['application', 'Apply']];
+const count = (s) => (s ?? '').trim().split(/\s+/).filter(Boolean).length;
+
+export default function FirstDraft({ chunk }) {
+  const draft = chunk.firstDraft;
+  if (!draft) return null;
+  const rows = FIELDS.map(([f, label]) => {
+    const then = draft[f] ?? '';
+    const now = chunk[f] ?? '';
+    return { f, label, then, now, same: then.trim() === now.trim(), parts: markRanges(now, diffVerses(then, now).b) };
+  }).filter((r) => r.then.trim() || r.now.trim());
+  const changed = rows.filter((r) => !r.same).length;
+  return (
+    <details className="rounded-xl border border-[var(--r-line)] p-3 text-xs text-[var(--r-sub)]">
+      <summary className="cursor-pointer">First draft, before commentary <span className="opacity-70">· {new Date(draft.at).toLocaleDateString()} · {changed === 0 ? 'nothing changed since' : `${changed} of ${rows.length} notes changed since`}</span></summary>
+      <div className="mt-3 space-y-3">
+        {rows.length === 0 && <p>You opened commentary before writing anything.</p>}
+        {rows.map((r) => (
+          <div key={r.f}>
+            <p className="font-medium text-[var(--r-text)]">{r.label} <span className="font-normal text-[var(--r-sub)]">· {count(r.then)} words then, {count(r.now)} now</span></p>
+            {r.same
+              ? <p className="mt-0.5">Unchanged.</p>
+              : <p className="mt-0.5 whitespace-pre-line font-serif text-[13px] leading-relaxed text-[var(--r-text)]">{r.parts.map((p, i) => (p.mark ? <mark key={i} className="rounded bg-[var(--r-hl)] px-0.5 text-inherit">{p.text}</mark> : <span key={i}>{p.text}</span>))}</p>}
+            {!r.same && r.then.trim() && <details className="mt-1"><summary className="cursor-pointer">Show the first draft</summary><p className="mt-1 whitespace-pre-line font-serif text-[13px] leading-relaxed">{r.then}</p></details>}
+          </div>
+        ))}
+        <p className="opacity-70">Highlighted words are new or reworded since the draft.</p>
+      </div>
+    </details>
+  );
+}

src/components/study/NotesPane.jsx

@@ -1,7 +1,16 @@
 // Observe / Interpret / Apply as an accordion (one open at a time), plus a "More"
 // area for background notes and tags so the page stays quiet.
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import SessionNotes from './SessionNotes.jsx';
+import FirstDraft from './FirstDraft.jsx';
+import ChunkComments from './ChunkComments.jsx';
+import { openCommentCount } from '../../utils/chunkComments.js';
+import { bookBackground, hasBookInfo } from '../../utils/bookInfo.js';
+import ScriptureRefs from '../ScriptureRefs.jsx';
+import { usePasteCheck } from './PastePrompt.jsx';
+import { listNoteVersions, recordNoteVersion } from '../../utils/noteHistory.js';
 import DictateButton, { appendSpoken } from '../DictateButton.jsx';
+import { ownShare, ownWords, pastedWords, clearPastes } from '../../utils/ownWork.js';
 import { templateFromChunk, templatePrompt } from '../../utils/studyTemplates.js';
 
 const SECTIONS = [
@@ -16,11 +25,25 @@ const SECTIONS = [
 const areaCls = 'w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3.5 py-3 font-serif text-[15px] leading-7 text-[var(--r-text)] placeholder:font-sans placeholder:text-[13px] placeholder:leading-5 placeholder:text-[var(--r-sub)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
 const words = (s) => (s ?? '').trim().split(/\s+/).filter(Boolean).length;
 
-export default function NotesPane({ chunk, updateChunk, allTags, templateId, saveTemplate, notify }) {
+export default function NotesPane({ chunk, updateChunk, allTags, templateId, saveTemplate, notify, onPray, focusRequest, author, bookAbbrev, bookName }) {
   const [open, setOpen] = useState(() => {
     try { return localStorage.getItem('studyNotesOpen') || 'observation'; } catch { return 'observation'; }
   });
   const [more, setMore] = useState(false);
+  // A keyboard jump (1 / 2 / 3 on the Study page): open that note and put the cursor in it.
+  const areas = useRef({});
+  const wanted = useRef(null);
+  useEffect(() => {
+    if (!focusRequest) return;
+    wanted.current = focusRequest.field;
+    setOpen(focusRequest.field);
+  }, [focusRequest]);
+  useEffect(() => {
+    if (wanted.current && wanted.current === open) {
+      const el = areas.current[open];
+      if (el) { el.focus(); const end = el.value.length; el.setSelectionRange(end, end); wanted.current = null; }
+    }
+  });
   const [tplName, setTplName] = useState('');
   const [tplOpen, setTplOpen] = useState(false);
   const [tagInput, setTagInput] = useState('');
@@ -36,11 +59,39 @@ export default function NotesPane({ chunk, updateChunk, allTags, templateId, sav
   };
   const suggestions = allTags.filter((t) => !tags.some((x) => x.toLowerCase() === t.toLowerCase()));
 
+  const share = ownShare(chunk);
+  const pasteCheck = usePasteCheck(chunk, updateChunk);
+  // Earlier versions of one note: kept when you start and stop editing it; "History" lists them with Restore.
+  const [historyField, setHistoryField] = useState(null);
+  const [versions, setVersions] = useState([]);
+  useEffect(() => { setHistoryField(null); }, [chunk.id]);
+  const keepVersion = (field) => {
+    const list = recordNoteVersion(chunk.id, field, chunk[field]);
+    if (historyField === field) setVersions(list);
+  };
+  const openHistory = (field) => {
+    if (historyField === field) { setHistoryField(null); return; }
+    recordNoteVersion(chunk.id, field, chunk[field]);
+    setVersions(listNoteVersions(chunk.id, field));
+    setHistoryField(field);
+  };
+  const restore = (field, text) => {
+    recordNoteVersion(chunk.id, field, chunk[field]); // so restoring can itself be undone
+    updateChunk(chunk.id, { [field]: text });
+    setVersions(listNoteVersions(chunk.id, field));
+  };
+
   return (
     <section aria-label="Study notes" className="space-y-2">
+      {share !== null && (
+        <p className="px-1 text-xs text-[var(--r-sub)]" title="Long pastes into a note box count as pasted, not your own">
+          {share === 100 ? 'All of these notes are your own words.' : `${share}% of these notes are your own words.`}
+        </p>
+      )}
       {SECTIONS.map(({ field, label, hint, placeholder }) => {
         const isOpen = open === field;
         const n = words(chunk[field]);
+        const pasted = pastedWords(chunk, field);
         return (
           <div key={field} className={`overflow-hidden rounded-2xl border ${isOpen ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)]'}`}>
             <button type="button" onClick={() => setOpen(isOpen ? null : field)} aria-expanded={isOpen}
@@ -50,13 +101,41 @@ export default function NotesPane({ chunk, updateChunk, allTags, templateId, sav
                 <span className="text-sm font-medium">{label}</span>
                 <span className="text-xs text-[var(--r-sub)]">{hint}</span>
               </span>
-              <span className="text-xs text-[var(--r-sub)]">{n ? `${n} word${n === 1 ? '' : 's'}` : ''}</span>
+              <span className="flex items-center gap-2 text-xs text-[var(--r-sub)]">
+                {n > 0 && (pasted > 0
+                  ? <span className="rounded-full bg-[var(--r-hl)] px-2 py-0.5 text-[var(--r-text)]">{ownWords(chunk, field) === 0 ? 'Pasted' : `${pasted} pasted`}</span>
+                  : <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5">Mine</span>)}
+                {n ? `${n} word${n === 1 ? '' : 's'}` : ''}
+              </span>
             </button>
             {isOpen && (
               <div className="px-4 pb-4">
-                <textarea aria-label={label} value={chunk[field] ?? ''} rows={7} placeholder={templatePrompt(templateId, field) ?? placeholder}
-                  onChange={(e) => updateChunk(chunk.id, { [field]: e.target.value })} className={areaCls} />
-                <div className="mt-1.5"><DictateButton label={`Dictate ${label.toLowerCase()}`} onText={(said) => updateChunk(chunk.id, { [field]: appendSpoken(chunk[field], said) })} /></div>
+                <textarea ref={(el) => { areas.current[field] = el; }} aria-label={label} value={chunk[field] ?? ''} rows={7} placeholder={templatePrompt(templateId, field) ?? placeholder}
+                  onFocus={() => keepVersion(field)} onBlur={() => keepVersion(field)} onPaste={pasteCheck.onPaste(field)} onChange={(e) => updateChunk(chunk.id, { [field]: e.target.value })} className={areaCls} />
+                <ScriptureRefs text={chunk[field]} />
+                {pasteCheck.prompt(field)}
+                <button type="button" onClick={() => openHistory(field)} aria-expanded={historyField === field} className="mt-1.5 mr-3 text-xs text-[var(--r-sub)] hover:text-[var(--r-text)]">History</button>
+                {historyField === field && (
+                  <ul aria-label={`${label} history`} className="mt-1.5 space-y-1.5 rounded-xl border border-[var(--r-line)] p-2 text-xs">
+                    {versions.length === 0 && <li className="text-[var(--r-sub)]">No earlier versions yet. They are saved as you edit.</li>}
+                    {versions.map((v) => (
+                      <li key={v.at} className="flex items-baseline justify-between gap-3">
+                        <span className="min-w-0"><span className="text-[var(--r-sub)]">{new Date(v.at).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })} · {words(v.text)} words · </span><span className="font-serif">{v.text.length > 70 ? `${v.text.slice(0, 70)}…` : v.text}</span></span>
+                        <button type="button" onClick={() => restore(field, v.text)} disabled={v.text === chunk[field]} className="shrink-0 text-[var(--r-accent)] hover:underline disabled:opacity-40 disabled:no-underline">Restore</button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {pasted > 0 && (
+                  <p className="mt-1.5 text-xs text-[var(--r-sub)]">
+                    {pasted} word{pasted === 1 ? '' : 's'} here were pasted, so they don't count as your own work.{' '}
+                    <button type="button" onClick={() => updateChunk(chunk.id, { aiPastes: clearPastes(chunk, field) })} className="text-[var(--r-accent)] hover:underline">That’s mine</button>
+                  </p>
+                )}
+                {field === 'application' && onPray && (
+                  <button type="button" onClick={onPray} className="mt-1.5 mr-3 text-xs text-[var(--r-accent)] hover:underline">Pray about this →</button>
+                )}
+                <div className="mt-1.5 inline-block"><DictateButton label={`Dictate ${label.toLowerCase()}`} onText={(said) => updateChunk(chunk.id, { [field]: appendSpoken(chunk[field], said) })} /></div>
               </div>
             )}
           </div>
@@ -66,7 +145,7 @@ export default function NotesPane({ chunk, updateChunk, allTags, templateId, sav
       <div className="rounded-2xl border border-[var(--r-line)]">
         <button type="button" onClick={() => setMore((m) => !m)} aria-expanded={more}
           className="flex w-full items-center justify-between px-4 py-3 text-left text-sm">
-          <span><span className="font-medium">More</span> <span className="text-xs text-[var(--r-sub)]">background{tags.length ? ` · ${tags.length} tag${tags.length === 1 ? '' : 's'}` : ' and tags'}</span></span>
+          <span><span className="font-medium">More</span> <span className="text-xs text-[var(--r-sub)]">background{tags.length ? ` · ${tags.length} tag${tags.length === 1 ? '' : 's'}` : ' and tags'}{openCommentCount(chunk.comments) ? ` · ${openCommentCount(chunk.comments)} open comment${openCommentCount(chunk.comments) === 1 ? '' : 's'}` : ''}</span></span>
           <span className="text-xs text-[var(--r-sub)]">{more ? '▾' : '▸'}</span>
         </button>
         {more && (
@@ -76,12 +155,20 @@ export default function NotesPane({ chunk, updateChunk, allTags, templateId, sav
               <textarea value={chunk.generalNotes ?? ''} rows={5} onChange={(e) => updateChunk(chunk.id, { generalNotes: e.target.value })}
                 placeholder="e.g. author, date, audience, historical context, key themes…" className={`mt-1 ${areaCls}`} />
               <span className="mt-1 block"><DictateButton label="Dictate background" onText={(said) => updateChunk(chunk.id, { generalNotes: appendSpoken(chunk.generalNotes, said) })} /></span>
+              <ScriptureRefs text={chunk.generalNotes} />
+              {hasBookInfo(bookAbbrev) && !(chunk.generalNotes ?? '').includes('at a glance') && (
+                <button type="button" onClick={() => updateChunk(chunk.id, { generalNotes: `${(chunk.generalNotes ?? '').trimEnd()}${chunk.generalNotes?.trim() ? '\n\n' : ''}${bookBackground(bookAbbrev, bookName)}` })}
+                  className="mt-1 block text-xs text-[var(--r-accent)] hover:underline">Add {bookName ?? 'book'} at a glance (author, date, theme)</button>
+              )}
             </label>
             <label className="block text-xs text-[var(--r-sub)]">
               Discussion questions <span className="opacity-70">(one per line; printed on the lesson handout)</span>
               <textarea value={chunk.discussionQuestions ?? ''} rows={4} onChange={(e) => updateChunk(chunk.id, { discussionQuestions: e.target.value })}
                 placeholder={'What does this passage say about God?\nWhere do you see this in your own life?'} className={`mt-1 ${areaCls}`} />
             </label>
+            <ChunkComments chunk={chunk} updateChunk={updateChunk} author={author} />
+            <FirstDraft chunk={chunk} />
+            <SessionNotes chunk={chunk} updateChunk={updateChunk} />
             {saveTemplate && (
               <div className="rounded-xl border border-dashed border-[var(--r-line)] p-3">
                 {!tplOpen ? (

src/components/study/PageShell.jsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useApp } from '../../context/AppContext.js';
 import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
 import { ChevronLeft, SearchIcon } from '../reader/icons.jsx';
+import { useIsPhone } from '../../hooks/useIsPhone.js';
 
 // `short` is what a phone shows; the full label is still the button's accessible name.
 const NAV = [
@@ -13,8 +14,18 @@ const NAV = [
   { id: 'prayer', label: 'Prayer', short: 'Prayer' },
 ];
 
+const ICONS = {
+  studies: 'M4 5.5A1.5 1.5 0 0 1 5.5 4H18a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V5.5ZM8 4v15M11 8h5M11 11.5h5',
+  reader: 'M12 6.5C10.5 5 8 4.5 4.5 4.5V18c3.5 0 6 .5 7.5 2 1.5-1.5 4-2 7.5-2V4.5c-3.5 0-6 .5-7.5 2ZM12 6.5V20',
+  plans: 'M5 6.5h14M5 6.5v12A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-12M5 6.5A1.5 1.5 0 0 1 6.5 5H8m11 1.5A1.5 1.5 0 0 0 17.5 5H16M8 3.5v3m8-3v3M9 12.5l2 2 4-4',
+  prayer: 'M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z',
+};
+const TabIcon = ({ id }) => (
+  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={ICONS[id]} /></svg>
+);
+
 // Avatar button with a dropdown: who you are, the theme, Settings, Admin, Log out.
-function AccountMenu() {
+function AccountMenu({ tab = false, active = false }) {
   const { authUser, readerTheme, setReaderTheme, setCurrentPage, logout } = useApp();
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
@@ -33,12 +44,20 @@ function AccountMenu() {
 
   return (
     <div ref={ref} className="relative">
+      {tab ? (
+        <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Account menu" aria-expanded={open}
+          className={`flex min-h-[52px] w-full flex-col items-center justify-center gap-0.5 text-[11px] ${open || active ? 'text-[var(--r-text)]' : 'text-[var(--r-sub)]'}`}>
+          <span className="flex h-[22px] w-[22px] items-center justify-center rounded-full border border-current text-[11px] font-medium uppercase">{authUser?.email?.[0] ?? '·'}</span>
+          <span aria-hidden="true">Account</span>
+        </button>
+      ) : (
         <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Account menu" aria-expanded={open}
           className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-xs font-medium uppercase hover:bg-black/5">
           {authUser?.email?.[0] ?? '·'}
         </button>
+      )}
       {open && (
-        <div role="menu" className="absolute right-0 top-full z-40 mt-2 w-60 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-2 shadow-xl">
+        <div role="menu" className={`absolute z-40 w-60 ${tab ? 'bottom-full right-2 mb-2' : 'right-0 top-full mt-2'} rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-2 shadow-xl`}>
           {authUser && <p className="truncate px-3 pb-1 pt-2 text-xs text-[var(--r-sub)]">{authUser.email}</p>}
           <div className="px-3 pb-2 pt-1">
             <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Theme</p>
@@ -65,23 +84,30 @@ function AccountMenu() {
 export default function PageShell({ title, onBack, actions, active = null, maxWidth = 'max-w-6xl', children }) {
   const { readerTheme, goHome, goStudies, openBibleReader, openReadingPlans, openPrayer, openPalette } = useApp();
   const go = { studies: goStudies, reader: openBibleReader, plans: openReadingPlans, prayer: openPrayer };
+  const phone = useIsPhone();
+  // On a phone the destinations sit in a bar at the bottom, where a thumb reaches; toasts lift above it.
+  useEffect(() => {
+    if (!phone) return undefined;
+    document.documentElement.style.setProperty('--bottom-nav', '56px');
+    return () => document.documentElement.style.removeProperty('--bottom-nav');
+  }, [phone]);
   return (
     <div className="min-h-dvh bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
       <a href="#content" className="skip-link">Skip to content</a>
       <header className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
-        <div className={`mx-auto flex h-12 ${maxWidth} items-center gap-2 px-3 sm:gap-4 sm:px-4`}>
+        <div className="mx-auto flex h-12 max-w-6xl items-center gap-2 px-3 sm:gap-4 sm:px-4">
           <button type="button" onClick={goHome} className="-m-2 flex shrink-0 items-center gap-2 p-2" aria-label="Bible Study home">
             <img src="/logo.svg" alt="" className="h-6 w-6" />
             <span className="hidden text-sm font-medium sm:inline">Bible Study</span>
           </button>
-          <nav aria-label="Main" className="flex items-center gap-0.5">
+          {!phone && <nav aria-label="Main" className="flex items-center gap-0.5">
             {NAV.map((n) => (
               <button key={n.id} type="button" onClick={go[n.id]} aria-current={active === n.id ? 'page' : undefined} aria-label={n.label}
                 className={`whitespace-nowrap rounded-full px-2.5 py-1.5 text-sm sm:px-3 ${active === n.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
                 <span className="sm:hidden" aria-hidden="true">{n.short}</span><span className="hidden sm:inline" aria-hidden="true">{n.label}</span>
               </button>
             ))}
-          </nav>
+          </nav>}
           <div className="ml-auto flex items-center gap-2">
             {openPalette && (
               <button type="button" onClick={openPalette} aria-label="Search and go to" data-tip="Search studies, notes and passages (⌘K)"
@@ -89,7 +115,7 @@ export default function PageShell({ title, onBack, actions, active = null, maxWi
                 <SearchIcon /><span className="hidden sm:inline">Search</span><kbd className="hidden rounded border border-[var(--r-line)] px-1 text-[10px] md:inline">⌘K</kbd>
               </button>
             )}
-            <AccountMenu />
+            {!phone && <AccountMenu />}
           </div>
         </div>
       </header>
@@ -103,6 +129,21 @@ export default function PageShell({ title, onBack, actions, active = null, maxWi
       </div>
       {children}
       </div>
+      {phone && (
+        <>
+          <div aria-hidden="true" className="h-[calc(5rem+env(safe-area-inset-bottom,0px))]" />
+          <nav aria-label="Main" className="fixed-bar fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)]">
+            {NAV.map((n) => (
+              <button key={n.id} type="button" onClick={go[n.id]} aria-current={active === n.id ? 'page' : undefined} aria-label={n.label}
+                className={`flex min-h-[52px] flex-col items-center justify-center gap-0.5 text-[11px] ${active === n.id ? 'text-[var(--r-text)]' : 'text-[var(--r-sub)]'}`}>
+                <TabIcon id={n.id} />
+                <span aria-hidden="true" className={active === n.id ? 'font-medium' : ''}>{n.short}</span>
+              </button>
+            ))}
+            <AccountMenu tab active={['settings', 'admin'].includes(active)} />
+          </nav>
+        </>
+      )}
     </div>
   );
 }

src/components/study/PageShell.phone.test.jsx

@@ -0,0 +1,46 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const app = {
+  readerTheme: 'paper', authUser: { email: 'sam@x.test' }, setReaderTheme: vi.fn(), setCurrentPage: vi.fn(), logout: vi.fn(),
+  goHome: vi.fn(), goStudies: vi.fn(), openBibleReader: vi.fn(), openReadingPlans: vi.fn(), openPrayer: vi.fn(), openPalette: vi.fn(),
+};
+vi.mock('../../context/AppContext.js', () => ({ useApp: () => app }));
+import PageShell from './PageShell.jsx';
+
+const phone = (on) => vi.stubGlobal('matchMedia', (q) => ({ matches: on && q.includes('639'), media: q, addEventListener() {}, removeEventListener() {} }));
+beforeEach(() => Object.values(app).forEach((f) => f.mockClear?.()));
+afterEach(() => vi.unstubAllGlobals());
+
+test('on a phone the destinations are a bar at the bottom, with Account in it', async () => {
+  phone(true);
+  const user = userEvent.setup();
+  render(<PageShell title="Prayer journal" active="prayer"><p>content</p></PageShell>);
+  const nav = screen.getByRole('navigation', { name: 'Main' });
+  expect(within(nav).getAllByRole('button').map((b) => b.getAttribute('aria-label'))).toEqual(['Studies', 'Read Bible', 'Reading Plans', 'Prayer', 'Account menu']);
+  expect(within(nav).getByRole('button', { name: 'Prayer' })).toHaveAttribute('aria-current', 'page');
+  expect(screen.getAllByRole('button', { name: 'Account menu' })).toHaveLength(1); // not also in the header
+  await user.click(within(nav).getByRole('button', { name: 'Reading Plans' }));
+  expect(app.openReadingPlans).toHaveBeenCalled();
+  await user.click(within(nav).getByRole('button', { name: 'Account menu' }));
+  await user.click(screen.getByRole('menuitem', { name: 'Settings' }));
+  expect(app.setCurrentPage).toHaveBeenCalledWith('settings');
+});
+
+test('on a wide screen the destinations stay in the header', () => {
+  phone(false);
+  render(<PageShell title="Prayer journal" active="prayer"><p>content</p></PageShell>);
+  const nav = screen.getByRole('navigation', { name: 'Main' });
+  expect(nav.closest('header')).not.toBeNull();
+  expect(screen.getAllByRole('button', { name: 'Account menu' })).toHaveLength(1);
+});
+
+test('the header is the same width on every page, whatever width the page content is', () => {
+  phone(false);
+  const { container, rerender } = render(<PageShell title="A" maxWidth="max-w-3xl"><p>x</p></PageShell>);
+  const inner = () => container.querySelector('header > div');
+  expect(inner().className).toContain('max-w-6xl');
+  rerender(<PageShell title="B" maxWidth="max-w-2xl"><p>x</p></PageShell>);
+  expect(inner().className).toContain('max-w-6xl');
+});

src/components/study/PastePrompt.jsx

@@ -0,0 +1,42 @@
+// When a long block of text is pasted into a note, ask where it came from. Pastes are remembered as "not typed by
+// me" straight away (so forgetting to answer never counts as your own work); saying you wrote it takes that back.
+import { useEffect, useState } from 'react';
+import { withPaste, withoutPaste, PASTE_MIN_WORDS } from '../../utils/ownWork.js';
+
+const LABELS = { observation: 'Observe', interpretation: 'Interpret', application: 'Apply' };
+const wordsIn = (s) => s.trim().split(/\s+/).filter(Boolean).length;
+
+export function usePasteCheck(chunk, updateChunk) {
+  const [pending, setPending] = useState(null); // { field, text }
+  useEffect(() => { setPending(null); }, [chunk.id]);
+
+  const onPaste = (field) => (e) => {
+    const text = e.clipboardData?.getData('text') ?? '';
+    const next = withPaste(chunk, field, text);
+    if (!next) return;
+    updateChunk(chunk.id, { aiPastes: next });
+    setPending({ field, text: text.trim() });
+  };
+  const wroteIt = () => {
+    if (pending) updateChunk(chunk.id, { aiPastes: withoutPaste(chunk, pending.field, pending.text) });
+    setPending(null);
+  };
+  const prompt = (field) => (pending && pending.field === field ? <PastePrompt field={field} words={wordsIn(pending.text)} onKeep={() => setPending(null)} onWroteIt={wroteIt} /> : null);
+  return { onPaste, prompt };
+}
+
+function PastePrompt({ field, words, onKeep, onWroteIt }) {
+  const btn = 'rounded-full border border-[var(--r-text)] px-3 py-1 text-xs hover:bg-black/5';
+  return (
+    <div role="group" aria-label="Where did this paste come from?" className="mt-1.5 rounded-xl border border-[var(--r-accent)] bg-[var(--r-hl)] p-3 text-xs">
+      <p className="font-medium text-[var(--r-text)]">You pasted {words} words into {LABELS[field] ?? 'this note'}. Is this from AI?</p>
+      <p className="mt-0.5 text-[var(--r-sub)]">Pasted text isn’t counted as your own work. Choose “I wrote it” if it came from you.</p>
+      <div className="mt-2 flex flex-wrap gap-2">
+        <button type="button" onClick={onKeep} className={`${btn} bg-[var(--r-text)] text-[var(--r-bg)]`}>Yes, from AI</button>
+        <button type="button" onClick={onKeep} className={btn}>No, a book or website</button>
+        <button type="button" onClick={onWroteIt} className={btn}>No, I wrote it</button>
+      </div>
+      <p className="mt-1.5 text-[11px] text-[var(--r-sub)]">Pastes under {PASTE_MIN_WORDS} words aren’t asked about.</p>
+    </div>
+  );
+}

src/components/study/PopOut.jsx

@@ -0,0 +1,21 @@
+// A section of the Study page lifted into a large window over the page, so there's room to read commentary or
+// write notes without the column's cramped width. Esc, the backdrop or Close puts it back.
+import { useEffect, useRef } from 'react';
+
+export default function PopOut({ title, onClose, children }) {
+  const panel = useRef(null);
+  useEffect(() => { panel.current?.focus(); }, []);
+  return (
+    <div className="fixed inset-0 z-[70]">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden="true" />
+      <div ref={panel} role="dialog" aria-modal="true" aria-label={title} tabIndex={-1}
+        className="absolute inset-2 flex flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] shadow-2xl focus:outline-none sm:inset-4 lg:inset-x-[7vw] lg:inset-y-5 xl:inset-x-[12vw]">
+        <div className="flex shrink-0 items-center justify-between border-b border-[var(--r-line)] px-4 py-2.5">
+          <h2 className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{title}</h2>
+          <button type="button" onClick={onClose} className="rounded-lg border border-[var(--r-line)] px-3 py-1 text-xs hover:bg-black/5">Close (Esc)</button>
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      </div>
+    </div>
+  );
+}

src/components/study/ReadingListTab.jsx

@@ -0,0 +1,32 @@
+// A reading list for the whole study: the books, commentaries and articles you plan to consult, with a note on
+// each and a tick when done. It belongs to the study, not one chunk.
+import { makeId } from '../../utils/bibleUtils.jsx';
+
+export default function ReadingListTab({ project, updateProject }) {
+  const items = project?.readingList ?? [];
+  const set = (next) => updateProject((current) => ({ ...current, readingList: next(current.readingList ?? []) }));
+  const add = (title) => { const t = title.trim(); if (t) set((list) => [...list, { id: makeId(), title: t, note: '', done: false }]); };
+  const patch = (id, change) => set((list) => list.map((i) => (i.id === id ? { ...i, ...change } : i)));
+  const open = items.filter((i) => !i.done).length;
+  return (
+    <div className="space-y-3 text-sm">
+      <p className="text-xs text-[var(--r-sub)]">Books and articles to consult for this study{items.length ? ` · ${open} to read, ${items.length - open} done` : ''}. Read the passage and write your own notes first; this list is for afterwards.</p>
+      <ul className="space-y-2">
+        {items.map((i) => (
+          <li key={i.id} className="rounded-xl border border-[var(--r-line)] p-2.5">
+            <div className="flex items-center gap-2">
+              <input type="checkbox" aria-label={`Read: ${i.title}`} checked={!!i.done} onChange={() => patch(i.id, { done: !i.done })} className="accent-[var(--r-accent)]" />
+              <span className={`min-w-0 flex-1 ${i.done ? 'text-[var(--r-sub)] line-through' : 'font-medium'}`}>{i.title}</span>
+              <button type="button" aria-label={`Remove ${i.title}`} onClick={() => set((list) => list.filter((x) => x.id !== i.id))} className="text-xs text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+            </div>
+            <input aria-label={`Note on ${i.title}`} value={i.note ?? ''} onChange={(e) => patch(i.id, { note: e.target.value })} placeholder="Where in it, or what to look for"
+              className="mt-1.5 w-full rounded-lg border border-transparent bg-transparent px-2 py-1 text-xs text-[var(--r-text)] placeholder:text-[var(--r-sub)] placeholder:opacity-60 hover:border-[var(--r-line)] focus:border-[var(--r-line)] focus:bg-[var(--r-bg)] focus:outline-none" />
+          </li>
+        ))}
+      </ul>
+      <input aria-label="Add to the reading list" placeholder="Add a book or article, then Enter"
+        onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); add(e.target.value); e.target.value = ''; } }}
+        className="w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+    </div>
+  );
+}

src/components/study/ResourcePane.jsx

@@ -1,29 +1,45 @@
 // Right-hand pane of the Study stage: commentary, word study, cross-references and
 // people & places, all driven by the selected chunk.
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import CommentaryChunkTab from './CommentaryChunkTab.jsx';
 import WordStudyTab from './WordStudyTab.jsx';
 import CrossRefsTab from './CrossRefsTab.jsx';
 import PeopleChunkTab from './PeopleChunkTab.jsx';
+import ReadingListTab from './ReadingListTab.jsx';
 import IqChunkAids from '../iq/IqChunkAids.jsx';
 import { useIqAvailable } from '../../hooks/useIq.js';
+import { OBSERVE_FIRST_MIN, observeFirstDone, ownWords } from '../../utils/ownWork.js';
 
 export const RESOURCE_TABS = [
   { id: 'commentary', label: 'Commentary' },
   { id: 'words', label: 'Word study' },
   { id: 'refs', label: 'Cross-refs' },
   { id: 'people', label: 'People & places' },
+  { id: 'readings', label: 'Reading list' },
   { id: 'aids', label: 'Study aids', needsIq: true }, // shown only when the server has an IQ Bible key
 ];
 
-export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex, project, updateChunk, notify, resources, wordStudy, crossRefs, openWordId, setOpenWordId }) {
+// leadTab: { id, label, node } shown as the first tab, in place of the resources, when it is the selected one (the Study page
+// puts the notes there, so notes and resources share one column).
+export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex, project, updateChunk, updateProject, notify, resources, wordStudy, crossRefs, openWordId, setOpenWordId, leadTab }) {
   const iq = useIqAvailable();
-  const tabs = RESOURCE_TABS.filter((t) => !t.needsIq || iq);
+  const tabs = [...(leadTab ? [leadTab] : []), ...RESOURCE_TABS.filter((t) => !t.needsIq || iq)];
   if (tab === 'aids' && !iq) tab = 'commentary';
-  const counts = { words: chunk.greekWords.length, refs: (chunk.crossReferences ?? []).length };
+  // Commentary-type tabs wait for your own Observe notes (per chunk, until you choose to look anyway).
+  const [unlocked, setUnlocked] = useState(() => new Set());
+  useEffect(() => { setUnlocked(new Set()); }, [chunk.id]);
+  const held = (tab === 'commentary' || tab === 'aids') && !observeFirstDone(chunk) && !unlocked.has(chunk.id);
+  // The first time commentary or study aids are on screen for a chunk, keep a copy of your notes as they were,
+  // so you can later see what changed after reading others (shown under "More" in the notes).
+  const seeing = (tab === 'commentary' || tab === 'aids') && !held;
+  useEffect(() => {
+    if (!seeing || chunk.firstDraft) return;
+    updateChunk(chunk.id, { firstDraft: { at: Date.now(), observation: chunk.observation ?? '', interpretation: chunk.interpretation ?? '', application: chunk.application ?? '' } }, { touch: false });
+  }, [seeing, chunk.id, chunk.firstDraft]); // eslint-disable-line react-hooks/exhaustive-deps
+  const counts = { words: chunk.greekWords.length, refs: (chunk.crossReferences ?? []).length, readings: (project?.readingList ?? []).filter((i) => !i.done).length };
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div role="tablist" aria-label="Study resources" className="flex shrink-0 flex-wrap gap-1.5 border-b border-[var(--r-line)] px-3 py-2.5">
+      <div role="tablist" aria-label="Study resources" className={`flex shrink-0 flex-wrap gap-1.5 border-b border-[var(--r-line)] px-3 py-2.5 ${leadTab ? 'sm:pr-11' : ''}`}>
         {tabs.map((t) => (
           <button key={t.id} type="button" role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id)}
             className={`rounded-full border px-3 py-1 text-xs ${tab === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
@@ -32,11 +48,20 @@ export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex
         ))}
       </div>
       <div role="tabpanel" className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
-        {tab === 'commentary' && <CommentaryChunkTab resources={resources} chunk={chunk} project={project} chapterIndex={chapterIndex} updateChunk={updateChunk} notify={notify} />}
+        {leadTab && tab === leadTab.id && leadTab.node}
+        {held && (
+          <div role="note" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4 text-sm">
+            <p className="font-medium">Observe first</p>
+            <p className="mt-1 text-xs text-[var(--r-sub)]">Write what you notice in the text before reading what others say. Commentary opens after {OBSERVE_FIRST_MIN} words of your own Observe notes ({ownWords(chunk, 'observation')} so far).</p>
+            <button type="button" onClick={() => setUnlocked((u) => new Set(u).add(chunk.id))} className="mt-2 text-xs text-[var(--r-accent)] hover:underline">Show it anyway</button>
+          </div>
+        )}
+        {!held && tab === 'commentary' && <CommentaryChunkTab resources={resources} chunk={chunk} project={project} chapterIndex={chapterIndex} updateChunk={updateChunk} notify={notify} />}
         {tab === 'words' && <WordStudyTab wordStudy={wordStudy} chunk={chunk} openWordId={openWordId} setOpenWordId={setOpenWordId} />}
         {tab === 'refs' && <CrossRefsTab crossRefs={crossRefs} chunk={chunk} />}
         {tab === 'people' && <PeopleChunkTab book={chapter.bookAbbrev} chapter={chapter.chapter} chunk={chunk} />}
-        {tab === 'aids' && <IqChunkAids chunk={chunk} chapter={chapter} updateChunk={updateChunk} notify={notify} />}
+        {tab === 'readings' && updateProject && <ReadingListTab project={project} updateProject={updateProject} />}
+        {!held && tab === 'aids' && <IqChunkAids chunk={chunk} chapter={chapter} updateChunk={updateChunk} notify={notify} />}
       </div>
     </div>
   );
@@ -46,8 +71,8 @@ export function useResourceTab() {
   const [tab, setTabState] = useState(() => {
     try {
       const saved = localStorage.getItem('studyResourceTab');
-      return RESOURCE_TABS.some((t) => t.id === saved) ? saved : 'commentary';
-    } catch { return 'commentary'; }
+      return saved === 'notes' || RESOURCE_TABS.some((t) => t.id === saved) ? saved : 'notes';
+    } catch { return 'notes'; }
   });
   const setTab = (id) => {
     setTabState(id);

src/components/study/ScripturePane.jsx

@@ -2,9 +2,13 @@
 // interlinear words; click an original word to add it to the chunk's word study.
 import { useState } from 'react';
 import { NT_BOOK_NUMBER } from '../../utils/bibleUtils.jsx';
+import GrammarPanel from '../GrammarPanel.jsx';
+import { markUnits } from '../../utils/biblicalUnits.js';
 
-export default function ScripturePane({ verses, chapter, interlinear, interlinearLoading, addedStrongs, onPickWord }) {
+export default function ScripturePane({ verses, chapter, interlinear, interlinearLoading, addedStrongs, onPickWord, verseNotes = {}, onVerseNote }) {
   const [openVerse, setOpenVerse] = useState(null);
+  const [editingNote, setEditingNote] = useState(null);
+  const [inspect, setInspect] = useState(null); // the original word whose grammar is showing: { key, index }
   const isHebrew = chapter && !NT_BOOK_NUMBER[chapter.bookAbbrev];
   return (
     <section aria-label="Scripture" className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] px-5 py-4">
@@ -19,13 +23,27 @@ export default function ScripturePane({ verses, chapter, interlinear, interlinea
                 className={`mr-1.5 align-super font-sans text-[0.6em] ${words ? 'text-[var(--r-accent)] hover:underline' : 'cursor-default text-[var(--r-sub)]'} ${open ? 'font-bold' : ''}`}>
                 {v.chapter !== chapter?.chapter ? `${v.chapter}:` : ''}{v.number}
               </button>
-              <span>{v.text}</span>
+              <span>{markUnits(v.text).map((part, i) => (part.note
+                ? <abbr key={i} title={part.note} tabIndex={0} className="cursor-help underline decoration-dotted decoration-[var(--r-accent)] underline-offset-4">{part.text}</abbr>
+                : <span key={i}>{part.text}</span>))}</span>
+              {onVerseNote && (
+                <button type="button" onClick={() => setEditingNote(editingNote === `${v.chapter}:${v.number}` ? null : `${v.chapter}:${v.number}`)}
+                  aria-label={`Note on verse ${v.number}`} title="Note on this verse"
+                  className={`ml-1.5 align-baseline font-sans text-[0.7em] ${verseNotes[`${v.chapter}:${v.number}`] ? 'text-[var(--r-accent)]' : 'text-[var(--r-sub)] opacity-40 hover:opacity-100'}`}>✎</button>
+              )}
+              {(verseNotes[`${v.chapter}:${v.number}`] || editingNote === `${v.chapter}:${v.number}`) && (
+                <textarea aria-label={`Verse ${v.number} note`} value={verseNotes[`${v.chapter}:${v.number}`] ?? ''} rows={2} autoFocus={editingNote === `${v.chapter}:${v.number}`}
+                  onChange={(e) => onVerseNote?.(`${v.chapter}:${v.number}`, e.target.value)}
+                  placeholder="Your note on this verse"
+                  className="mt-1 block w-full resize-y rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 font-sans text-[13px] leading-snug text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" />
+              )}
               {open && words && (
                 <div dir={isHebrew ? 'rtl' : 'ltr'} className="mt-2 flex flex-wrap gap-2 rounded-xl bg-[var(--r-bg)] p-2.5 font-sans">
                   {words.map((w, i) => {
                     const added = w.s && addedStrongs.has(w.s.toUpperCase());
                     return (
                       <button key={i} type="button" disabled={!w.s} onClick={() => onPickWord(w)}
+                        onMouseEnter={() => setInspect({ key: `${v.chapter}:${v.number}`, index: i })} onFocus={() => setInspect({ key: `${v.chapter}:${v.number}`, index: i })}
                         title={[w.t, w.s, w.p].filter(Boolean).join(' · ') + (w.s ? (added ? ' — already in word study' : ' — click to add') : '')}
                         className={`flex flex-col items-center rounded-lg border px-2 py-1 text-center ${added ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'} disabled:cursor-default`}>
                         <span className={`text-base ${isHebrew ? 'font-serif' : ''}`}>{w.o}</span>
@@ -33,6 +51,9 @@ export default function ScripturePane({ verses, chapter, interlinear, interlinea
                       </button>
                     );
                   })}
+                  {inspect?.key === `${v.chapter}:${v.number}` && words[inspect.index]?.p && (
+                    <GrammarPanel label={words[inspect.index].p} className="basis-full" />
+                  )}
                 </div>
               )}
             </div>

src/components/study/SessionNotes.jsx

@@ -0,0 +1,42 @@
+// The "More" area's session-facing notes: a teach-it-back summary, who came, what the group said, and follow-ups.
+import { makeId } from '../../utils/bibleUtils.jsx';
+
+const areaCls = 'mt-1 w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+
+export default function SessionNotes({ chunk, updateChunk }) {
+  const followUps = chunk.followUps ?? [];
+  const setFollowUps = (next) => updateChunk(chunk.id, { followUps: next });
+  const add = (text) => { const t = text.trim(); if (t) setFollowUps([...followUps, { id: makeId(), text: t, done: false }]); };
+  return (
+    <div className="space-y-4">
+      <label className="block text-xs text-[var(--r-sub)]">
+        Teach it back <span className="opacity-70">(explain the passage in three sentences, as you would to someone else)</span>
+        <textarea value={chunk.teachBack ?? ''} rows={3} onChange={(e) => updateChunk(chunk.id, { teachBack: e.target.value })} className={areaCls} />
+      </label>
+      <label className="block text-xs text-[var(--r-sub)]">
+        Who came
+        <input value={chunk.attendees ?? ''} onChange={(e) => updateChunk(chunk.id, { attendees: e.target.value })} placeholder="Names, separated by commas"
+          className="mt-1 w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+      </label>
+      <label className="block text-xs text-[var(--r-sub)]">
+        What the group said
+        <textarea value={chunk.groupNotes ?? ''} rows={3} onChange={(e) => updateChunk(chunk.id, { groupNotes: e.target.value })} className={areaCls} />
+      </label>
+      <div>
+        <p className="text-xs text-[var(--r-sub)]">Follow-ups</p>
+        <ul className="mt-1 space-y-1">
+          {followUps.map((f) => (
+            <li key={f.id} className="flex items-center gap-2 text-sm">
+              <input type="checkbox" aria-label={`Done: ${f.text}`} checked={!!f.done} onChange={() => setFollowUps(followUps.map((x) => (x.id === f.id ? { ...x, done: !x.done } : x)))} className="accent-[var(--r-accent)]" />
+              <span className={f.done ? 'text-[var(--r-sub)] line-through' : ''}>{f.text}</span>
+              <button type="button" aria-label={`Remove follow-up: ${f.text}`} onClick={() => setFollowUps(followUps.filter((x) => x.id !== f.id))} className="ml-auto text-xs text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+            </li>
+          ))}
+        </ul>
+        <input aria-label="Add a follow-up" placeholder="Something to follow up on, then Enter"
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); add(e.target.value); e.target.value = ''; } }}
+          className="mt-1.5 w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+      </div>
+    </div>
+  );
+}

src/components/study/StudioShell.jsx

@@ -3,14 +3,14 @@
 // the stage switcher, and save/sync status.
 import { useApp } from '../../context/AppContext.js';
 import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
-import { ChevronLeft } from '../reader/icons.jsx';
+import HomeButton from '../reader/HomeButton.jsx';
 
 export const STAGES = [
   { id: 'setup', label: 'Chunks' },
   { id: 'study', label: 'Study' },
   { id: 'outline', label: 'Outline' },
   { id: 'script', label: 'Script' },
-  { id: 'export', label: 'Export' },
+  { id: 'export', label: 'Finish' },
 ];
 const THEME_ORDER = ['paper', 'sepia', 'dark'];
 
@@ -27,23 +27,22 @@ export default function StudioShell({ stage, loading = false, fixedHeight = fals
     <div className={`bg-[var(--r-bg)] font-sans text-[var(--r-text)] ${fixedHeight ? 'fixed inset-0 flex flex-col overflow-hidden' : 'min-h-dvh'}`} style={themeVars(readerTheme)}>
       <div className="safe-top z-30 shrink-0 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
         <div className="mx-auto flex h-12 max-w-[1600px] items-center gap-3 px-3">
-          <button type="button" onClick={goHome} aria-label="Back to home"
-            className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
-          <div className="min-w-0 max-w-[16rem] truncate text-sm font-medium">{project?.title ?? ''}</div>
-          <nav aria-label="Study stages" className="mx-auto flex gap-0.5">
+          <HomeButton onClick={goHome} />
+          <div className="hidden min-w-0 max-w-[16rem] truncate text-sm font-medium sm:block">{project?.title ?? ''}</div>
+          <nav aria-label="Study stages" className="flex min-w-0 flex-1 gap-0.5 overflow-x-auto sm:justify-center [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {STAGES.map((s) => {
               const disabled = s.id !== 'setup' && (!project || noChunks);
               return (
                 <button key={s.id} type="button" disabled={disabled} aria-current={stage === s.id ? 'step' : undefined}
                   title={disabled ? 'Add a chunk in Chunks first' : undefined}
                   onClick={() => setCurrentPage(s.id)}
-                  className={`rounded-full px-3.5 py-1.5 text-xs ${stage === s.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'} disabled:opacity-40 disabled:hover:bg-transparent`}>
+                  className={`shrink-0 rounded-full px-3.5 py-1.5 text-xs ${stage === s.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'} disabled:opacity-40 disabled:hover:bg-transparent`}>
                   {s.label}
                 </button>
               );
             })}
           </nav>
-          <div className="flex min-w-[7rem] items-center justify-end gap-2 text-xs text-[var(--r-sub)]" aria-live="polite">
+          <div className="flex shrink-0 items-center justify-end sm:min-w-[7rem] gap-2 text-xs text-[var(--r-sub)]" aria-live="polite">
             {loading ? <span>Loading…</span>
               : saveStatus ? <span className="text-[var(--r-accent)]">{saveStatus}</span>
                 : syncStatus === 'syncing' ? <span>Syncing…</span>

src/components/study/WordOccurrences.jsx

@@ -0,0 +1,71 @@
+// "Where else is this word used?": the verses that share a Strong's number, by book, so a word study can show
+// how an author (or the whole Bible) uses it. Books open to their verse list; Copy puts the whole list on the clipboard.
+import { useEffect, useState } from 'react';
+import { getStrongsOccurrences } from '../../syncService.js';
+
+const btn = 'rounded-lg border border-[var(--r-line)] px-2.5 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50';
+
+// "John 3:16, 17; 4:1" style list for one book.
+export function refsText(book) {
+  const chapters = [];
+  for (const [chapter, verse] of book.refs) {
+    const last = chapters[chapters.length - 1];
+    if (last && last.chapter === chapter) last.verses.push(verse); else chapters.push({ chapter, verses: [verse] });
+  }
+  return `${book.name} ${chapters.map((c) => `${c.chapter}:${c.verses.join(', ')}`).join('; ')}`;
+}
+
+export function occurrencesText(strongs, data) {
+  const lines = data.books.map((b) => `${refsText(b)} (${b.count})`);
+  return `${strongs} appears in ${data.total} verse${data.total === 1 ? '' : 's'}:\n${lines.join('\n')}`;
+}
+
+export default function WordOccurrences({ strongs, onClose }) {
+  const [state, setState] = useState({ status: 'loading' });
+  const [open, setOpen] = useState(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: 'loading' });
+    getStrongsOccurrences(strongs).then((r) => {
+      if (cancelled) return;
+      setState(r.ok ? { status: 'ready', data: r.data } : { status: 'error', error: r.error });
+    });
+    return () => { cancelled = true; };
+  }, [strongs]);
+
+  const copy = async () => {
+    try { await navigator.clipboard.writeText(occurrencesText(strongs, state.data)); setCopied(true); window.setTimeout(() => setCopied(false), 2000); } catch { /* clipboard unavailable */ }
+  };
+
+  return (
+    <div className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] p-3" aria-label={`Where ${strongs} is used`}>
+      <div className="mb-2 flex items-center gap-2">
+        <p className="text-sm font-medium">Where {strongs} is used</p>
+        <button type="button" onClick={onClose} className="ml-auto text-xs text-[var(--r-sub)] hover:underline">Close</button>
+      </div>
+      {state.status === 'loading' && <p className="text-xs text-[var(--r-sub)]">Counting… (the first look-up takes a few seconds)</p>}
+      {state.status === 'error' && <p role="alert" className="text-xs text-[var(--r-danger,#b42318)]">{state.error}</p>}
+      {state.status === 'ready' && (state.data.total === 0
+        ? <p className="text-xs text-[var(--r-sub)]">No verses found for {strongs}.</p>
+        : (
+          <>
+            <p className="mb-2 text-xs text-[var(--r-sub)]">{state.data.total} verse{state.data.total === 1 ? '' : 's'} in {state.data.books.length} book{state.data.books.length === 1 ? '' : 's'}.</p>
+            <ul className="space-y-1">
+              {state.data.books.map((b) => (
+                <li key={b.book} className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)]">
+                  <button type="button" onClick={() => setOpen(open === b.book ? null : b.book)} aria-expanded={open === b.book}
+                    className="flex w-full items-center justify-between px-2.5 py-1.5 text-left text-sm">
+                    <span>{b.name}</span><span className="text-xs text-[var(--r-sub)]">{b.count}</span>
+                  </button>
+                  {open === b.book && <p className="border-t border-[var(--r-line)] px-2.5 py-2 text-xs leading-relaxed">{refsText(b).slice(b.name.length + 1)}</p>}
+                </li>
+              ))}
+            </ul>
+            <button type="button" onClick={copy} className={`${btn} mt-2`}>{copied ? 'Copied!' : 'Copy the list'}</button>
+          </>
+        ))}
+    </div>
+  );
+}

src/components/study/WordOccurrences.test.jsx

@@ -0,0 +1,38 @@
+import { test, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import WordOccurrences, { occurrencesText, refsText } from './WordOccurrences.jsx';
+import { getStrongsOccurrences } from '../../syncService.js';
+
+vi.mock('../../syncService.js', () => ({ getStrongsOccurrences: vi.fn() }));
+
+const data = { strongs: 'G25', total: 4, books: [
+  { book: 'JHN', name: 'John', count: 3, refs: [[3, 16], [3, 35], [14, 15]] },
+  { book: 'ROM', name: 'Romans', count: 1, refs: [[5, 8]] },
+] };
+
+beforeEach(() => vi.clearAllMocks());
+
+test('refs are grouped by chapter and the copied list names every book', () => {
+  expect(refsText(data.books[0])).toBe('John 3:16, 35; 14:15');
+  expect(occurrencesText('G25', data)).toBe('G25 appears in 4 verses:\nJohn 3:16, 35; 14:15 (3)\nRomans 5:8 (1)');
+});
+
+test('shows the books with counts and opens one to list its verses', async () => {
+  getStrongsOccurrences.mockResolvedValue({ ok: true, data });
+  render(<WordOccurrences strongs="G25" onClose={() => {}} />);
+  expect(await screen.findByText('4 verses in 2 books.')).toBeInTheDocument();
+  await userEvent.click(screen.getByRole('button', { name: /John/ }));
+  expect(screen.getByText('3:16, 35; 14:15')).toBeInTheDocument();
+  expect(getStrongsOccurrences).toHaveBeenCalledWith('G25');
+});
+
+test('says so when the word is not found, and when the look-up fails', async () => {
+  getStrongsOccurrences.mockResolvedValueOnce({ ok: true, data: { strongs: 'G1', total: 0, books: [] } });
+  const { unmount } = render(<WordOccurrences strongs="G1" onClose={() => {}} />);
+  await waitFor(() => expect(screen.getByText('No verses found for G1.')).toBeInTheDocument());
+  unmount();
+  getStrongsOccurrences.mockResolvedValueOnce({ ok: false, error: 'Could not look up that word.' });
+  render(<WordOccurrences strongs="G2" onClose={() => {}} />);
+  expect(await screen.findByRole('alert')).toHaveTextContent('Could not look up that word.');
+});

src/components/study/WordStudyTab.jsx

@@ -6,6 +6,9 @@ import { externalLookupLinks, speakOriginalWord } from '../../utils/wordStudy.js
 import { useIqAvailable } from '../../hooks/useIq.js';
 import { normalizeStrongs } from '../../utils/iqbible.js';
 import IqLexicon from '../iq/IqLexicon.jsx';
+import GrammarPanel from '../GrammarPanel.jsx';
+import IqDictionary from '../iq/IqDictionary.jsx';
+import WordOccurrences from './WordOccurrences.jsx';
 
 const inputCls = 'mt-1 block w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
 const btn = 'rounded-lg border border-[var(--r-line)] px-2.5 py-1.5 text-xs hover:bg-black/5 disabled:opacity-50';
@@ -14,6 +17,7 @@ function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
   const { updateChunkWord, lookupWord, removeGreekWord } = wordStudy;
   const iq = useIqAvailable();
   const [lexicon, setLexicon] = useState(false);
+  const [where, setWhere] = useState(false);
   const strongs = normalizeStrongs(word.strongNumber || word.query);
   const set = (patch) => updateChunkWord(chunkId, word.id, patch);
   const field = (label, key, placeholder) => (
@@ -32,6 +36,7 @@ function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
       {open && (
         <div className="space-y-3 border-t border-[var(--r-line)] px-3 py-3">
           {lexicon && iq && strongs && <IqLexicon strongs={strongs} onClose={() => setLexicon(false)} />}
+          {where && strongs && <WordOccurrences strongs={strongs} onClose={() => setWhere(false)} />}
           <label className="block text-xs text-[var(--r-sub)]">Strong’s number or English gloss
             <input type="text" value={word.query} onChange={(e) => set({ query: e.target.value })}
               onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); lookupWord(chunkId, word.id, 'greek'); } }}
@@ -41,7 +46,8 @@ function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
             <button type="button" onClick={() => lookupWord(chunkId, word.id, 'greek')} className={`${btn} bg-[var(--r-text)] text-[var(--r-bg)] hover:opacity-90`}>{word.loading ? 'Looking up...' : 'Look up Greek'}</button>
             <button type="button" onClick={() => lookupWord(chunkId, word.id, 'hebrew')} className={btn}>{word.loading ? 'Looking up...' : 'Look up Hebrew'}</button>
             {iq && strongs && <button type="button" onClick={() => setLexicon((o) => !o)} aria-pressed={lexicon} className={btn} title="Strong's, BDB, LSJ and Abbott-Smith entries">Lexicons</button>}
-            {word.lexeme && <button type="button" onClick={() => speakOriginalWord(word.lexeme, word.strongNumber)} className={btn} title="Hear pronunciation">Speak</button>}
+            {strongs && <button type="button" onClick={() => setWhere((o) => !o)} aria-pressed={where} className={btn} title="Every verse that uses this word, by book">Where else</button>}
+            {word.lexeme && <button type="button" onClick={() => speakOriginalWord(word.lexeme, word.strongNumber, word.transliteration)} className={btn} title="Hear pronunciation">Speak</button>}
             <button type="button" onClick={() => removeGreekWord(chunkId, word.id)} className={`${btn} ml-auto text-[var(--r-danger,#b42318)]`}>Delete</button>
           </div>
           <div className="grid grid-cols-2 gap-2">
@@ -50,6 +56,7 @@ function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
             {field('Part of speech', 'partOfSpeech', 'e.g. Noun')}
             {field('English word', 'englishGloss', 'e.g. grace')}
           </div>
+          {word.parsing && <GrammarPanel label={word.parsing} />}
           {field('Short definition', 'shortDefinition')}
           {word.definitionHtml && (
             <details className="rounded-lg border border-[var(--r-line)] p-2.5">
@@ -76,8 +83,10 @@ function WordCard({ word, open, onToggle, chunkId, wordStudy }) {
 
 export default function WordStudyTab({ wordStudy, chunk, openWordId, setOpenWordId }) {
   const { suggestingGreekForChunkId, suggestingHebrewForChunkId, suggestGreekWordsForChunk, suggestHebrewWordsForChunk, addGreekWord } = wordStudy;
+  const iq = useIqAvailable(); // the dictionaries come from IQ Bible, so they appear only when the server has a key
   return (
     <div>
+      {iq && <IqDictionary />}
       <div className="mb-3 flex flex-wrap gap-2">
         <button type="button" onClick={() => suggestGreekWordsForChunk(chunk.id)} disabled={suggestingGreekForChunkId === chunk.id} className={btn}
           title="Auto-populate Greek words that actually appear in this passage">{suggestingGreekForChunkId === chunk.id ? 'Suggesting…' : 'Suggest Greek'}</button>

src/hooks/useChunkBuilder.js

@@ -6,6 +6,7 @@ import { useToast } from '../components/Toasts.jsx';
 import { bookOptions, CHAPTER_COUNTS, makeId, parseBibleChapter } from '../utils/bibleUtils.jsx';
 import { fetchStudyChapter } from '../utils/studyText.js';
 import { templateStarter } from '../utils/studyTemplates.js';
+import { rememberTemplate } from '../utils/planStudy.js';
 
 // Every chunk starts blank; all note fields exist from the start.
 export function blankChunk(start, end, spilloverEndVerse = null, templateId = 'blank') {
@@ -192,7 +193,8 @@ export function useChunkBuilder({ project, setProject, updateProject, allChunks,
         setShowAddChapterForm(false);
         setErrorMessage('');
       } else {
-        // Creating a brand-new project
+        // Creating a brand-new project; remember the template so studies started from a reading plan can use it too
+        rememberTemplate(setup.template);
         const newProject = {
           id: makeId(),
           title: setup.title,

src/hooks/useIq.js

@@ -3,7 +3,12 @@ import { iqAvailable, iqGet } from '../utils/iqbible.js';
 
 // Whether the server has an IQ Bible key. false until known, so IQ-only UI never flashes up.
 export function useIqAvailable() {
-  const [on, setOn] = useState(false);
+  return useIqStatus() === true;
+}
+
+// Same, but null until the server has answered.
+export function useIqStatus() {
+  const [on, setOn] = useState(null);
   useEffect(() => {
     let live = true;
     iqAvailable().then((v) => { if (live) setOn(v); });

src/hooks/useIsPhone.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(max-width: 639px)';
+const read = () => (typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia(QUERY).matches : false);
+
+// True on a phone-width screen (under Tailwind's `sm`). False where matchMedia is missing (tests), so the full
+// layout is what renders there.
+export function useIsPhone() {
+  const [phone, setPhone] = useState(read);
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return undefined;
+    const mq = window.matchMedia(QUERY);
+    const update = () => setPhone(mq.matches);
+    update();
+    mq.addEventListener?.('change', update);
+    return () => mq.removeEventListener?.('change', update);
+  }, []);
+  return phone;
+}

src/hooks/useLocalSetting.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const EVENT = 'local-setting';
+
+// A preference kept in this browser's localStorage, for settings that live in more than one place (the Settings
+// page and the screen they affect). Changing it in one place updates every component that reads it.
+export function useLocalSetting(key, fallback) {
+  const read = () => { try { return localStorage.getItem(key) ?? fallback; } catch { return fallback; } };
+  const [value, setValue] = useState(read);
+  useEffect(() => {
+    const on = (e) => { if (!e.detail || e.detail.key === key) setValue(read()); };
+    window.addEventListener(EVENT, on);
+    window.addEventListener('storage', on);
+    return () => { window.removeEventListener(EVENT, on); window.removeEventListener('storage', on); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+  const set = (next) => {
+    try { localStorage.setItem(key, next); } catch { /* storage unavailable: still applies until reload */ }
+    setValue(next);
+    window.dispatchEvent(new CustomEvent(EVENT, { detail: { key } }));
+  };
+  return [value, set];
+}

src/hooks/usePrayers.js

@@ -3,7 +3,7 @@
 // added on your phone appears on your computer. Signing out clears this device's copy.
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { getRemotePrayers, saveRemotePrayers } from '../syncService.js';
-import { markAnswered, markDeleted, mergePrayers, newPrayer, prayersEqual, reopen, touch, togglePrayedToday } from '../utils/prayers.js';
+import { markAnswered, markDeleted, mergePrayers, movePinned, newPrayer, prayersEqual, reopen, setPinned, setStatus, touch, togglePrayedToday } from '../utils/prayers.js';
 import { localDateString } from '../utils/readingPlans.js';
 
 const KEY = 'prayers';
@@ -42,6 +42,9 @@ export function usePrayers() {
   const togglePrayed = (id) => replace(id, (p) => togglePrayedToday(p, localDateString()));
   const answerPrayer = (id, note) => replace(id, (p) => markAnswered(p, note));
   const reopenPrayer = (id) => replace(id, (p) => reopen(p));
+  const pinPrayer = (id, on) => set(setPinned(ref.current, id, on));
+  const movePrayer = (id, dir) => set(movePinned(ref.current, id, dir));
+  const setPrayerStatus = (id, status, note) => replace(id, (p) => setStatus(p, status, note));
   // Deleting leaves a marker so the other devices drop it too; the returned function puts it back
   const deletePrayer = (id) => {
     const before = ref.current.find((p) => p.id === id);
@@ -70,5 +73,5 @@ export function usePrayers() {
   }, []);
 
   useEffect(() => () => window.clearTimeout(timerRef.current), []);
-  return { prayers, addPrayer, editPrayer, togglePrayed, answerPrayer, reopenPrayer, deletePrayer, importPrayers, pullPrayers: pull, stopPrayers: stop };
+  return { prayers, addPrayer, editPrayer, togglePrayed, answerPrayer, reopenPrayer, pinPrayer, movePrayer, setPrayerStatus, deletePrayer, importPrayers, pullPrayers: pull, stopPrayers: stop };
 }

src/hooks/useProjectLibrary.js

@@ -200,17 +200,16 @@ export function useProjectLibrary({
     }
   };
 
-  // Puts a study in a series ("Romans", "Advent 2026"), or takes it out (an empty name).
-  const setProjectSeries = (id, series) => {
+  // Changes one top-level field of a stored study (from Home, without opening it) and syncs it.
+  const patchStoredStudy = (id, patch) => {
     const loaded = loadProjectById(id);
     if (!loaded) return;
-    const name = String(series ?? '').trim().slice(0, 80);
-    if ((loaded.series ?? '') === name) return;
-    const updated = { ...loaded, series: name, lastEdited: Date.now() };
+    if (Object.entries(patch).every(([k, v]) => (loaded[k] ?? (typeof v === 'boolean' ? false : '')) === v)) return;
+    const updated = { ...loaded, ...patch, lastEdited: Date.now() };
     saveProjectToStorage(updated);
     unsyncedStudies.add(id);
     setProjectIndex(loadProjectIndex());
-    if (project?.id === id) setProject((current) => (current ? { ...current, series: name } : current));
+    if (project?.id === id) setProject((current) => (current ? { ...current, ...patch } : current));
     saveRemoteProject(updated, { baseEdited: getSyncBase(id) }).then((result) => {
       if (result.ok) {
         const serverEdited = result.data?.lastEdited ?? updated.lastEdited;
@@ -221,6 +220,43 @@ export function useProjectLibrary({
     });
   };
 
+  // Puts a study in a series ("Romans", "Advent 2026"), or takes it out (an empty name).
+  const setProjectSeries = (id, series) => patchStoredStudy(id, { series: String(series ?? '').trim().slice(0, 80) });
+
+  // Moves a study to (or back from) the "Finished & archived" section on Home.
+  const setProjectArchived = (id, archived) => patchStoredStudy(id, { archived: !!archived });
+
+  // Changes one chunk of a stored study (from Home, without opening it) and syncs it. `change` takes the chunk, returns the new one.
+  const updateStoredChunk = (id, chunkId, change) => {
+    const loaded = loadProjectById(id);
+    if (!loaded) return;
+    const updated = {
+      ...loaded,
+      lastEdited: Date.now(),
+      chapters: loaded.chapters.map((ch) => ({
+        ...ch,
+        chunks: ch.chunks.map((c) => (c.id === chunkId ? change(c) : c)),
+      })),
+    };
+    saveProjectToStorage(updated);
+    unsyncedStudies.add(id);
+    setProjectIndex(loadProjectIndex());
+    if (project?.id === id) setProject(updated);
+    saveRemoteProject(updated, { baseEdited: getSyncBase(id) }).then((result) => {
+      if (result.ok) {
+        const serverEdited = result.data?.lastEdited ?? updated.lastEdited;
+        setSyncBase(id, serverEdited);
+        unsyncedStudies.remove(id);
+        try { saveProjectToStorage({ ...updated, lastEdited: serverEdited }); setProjectIndex(loadProjectIndex()); } catch { /* already saved */ }
+      } else if (result.status === 409) toast('That study changed on another device. Open it to choose which version to keep.', { tone: 'error' });
+    });
+  };
+
+  // A weekly recall (what you remembered, and how it went) on one chunk.
+  const saveChunkRecall = (id, chunkId, recall) => updateStoredChunk(id, chunkId, (c) => ({ ...c, recalls: [...(c.recalls ?? []), recall] }));
+  // Notes written from Home (the daily five minutes): counts as editing the chunk.
+  const saveChunkPatch = (id, chunkId, patch) => updateStoredChunk(id, chunkId, (c) => ({ ...c, ...patch, editedAt: Date.now() }));
+
   // Deleting is immediate here, with an Undo for a few seconds; only after that is the server copy
   // removed (and straight away if the tab is closed first, so a deleted project never comes back).
   const finishDelete = (id) => {
@@ -287,6 +323,9 @@ export function useProjectLibrary({
     openStudyChunk,
     renameProjectInStorage,
     setProjectSeries,
+    setProjectArchived,
+    saveChunkRecall,
+    saveChunkPatch,
     deleteProject,
     pullLatestFromServer,
   };

src/hooks/useProjectLibrary.test.js

@@ -105,3 +105,17 @@ test('studies only on the server are pulled down', async () => {
   setup();
   await waitFor(() => expect(loadProjectById('far')?.title).toBe('From elsewhere'));
 });
+
+test('archiving a study keeps it, flags it in the index, syncs it, and restoring clears the flag', async () => {
+  saveProjectToStorage(study('s1'));
+  const hook = setup();
+  act(() => hook.result.current.setProjectArchived('s1', true));
+  expect(loadProjectById('s1').archived).toBe(true);
+  expect(loadProjectIndex().find((e) => e.id === 's1').archived).toBe(true);
+  await waitFor(() => expect(sync.saveRemoteProject).toHaveBeenCalledWith(expect.objectContaining({ id: 's1', archived: true }), expect.anything()));
+  sync.saveRemoteProject.mockClear();
+  act(() => hook.result.current.setProjectArchived('s1', true)); // already archived: nothing to do
+  expect(sync.saveRemoteProject).not.toHaveBeenCalled();
+  act(() => hook.result.current.setProjectArchived('s1', false));
+  expect(loadProjectIndex().find((e) => e.id === 's1').archived).toBe(false);
+});

src/hooks/useShareLink.js

@@ -6,14 +6,15 @@ export function useShareLink(projectId) {
   const [shareToken, setShareToken] = useState(null);
   const [expiresAt, setExpiresAt] = useState(null);
   const [hasPasscode, setHasPasscode] = useState(false);
+  const [revealAt, setRevealAt] = useState(null);
   const [shareBusy, setShareBusy] = useState(false);
   const [shareCopied, setShareCopied] = useState(false);
   const [shareError, setShareError] = useState('');
 
-  const apply = (data) => { setShareToken(data.shareToken ?? null); setExpiresAt(data.expiresAt ?? null); setHasPasscode(!!data.hasPasscode); };
+  const apply = (data) => { setShareToken(data.shareToken ?? null); setExpiresAt(data.expiresAt ?? null); setHasPasscode(!!data.hasPasscode); setRevealAt(data.revealAt ?? null); };
 
   useEffect(() => {
-    setShareToken(null); setExpiresAt(null); setHasPasscode(false); setShareError('');
+    setShareToken(null); setExpiresAt(null); setHasPasscode(false); setRevealAt(null); setShareError('');
     if (!projectId) return undefined;
     let active = true;
     getShareStatus(projectId).then((result) => {
@@ -26,7 +27,7 @@ export function useShareLink(projectId) {
     ? `${window.location.origin}${window.location.pathname}?share=${shareToken}`
     : '';
 
-  // Turns the link on, or changes its rules: { expiresInDays?: number | null, passcode?: string | null }
+  // Turns the link on, or changes its rules: { expiresInDays?: number | null, passcode?: string | null, revealAt?: number | null }
   const enable = async (options = {}) => {
     setShareBusy(true);
     setShareError('');
@@ -52,5 +53,5 @@ export function useShareLink(projectId) {
     });
   };
 
-  return { shareToken, shareUrl, expiresAt, hasPasscode, shareBusy, shareCopied, shareError, enable, revoke, copy };
+  return { shareToken, shareUrl, expiresAt, hasPasscode, revealAt, shareBusy, shareCopied, shareError, enable, revoke, copy };
 }

src/hooks/useWordStudy.js

@@ -94,6 +94,7 @@ export function useWordStudy({ project, allChunks, updateProject, notify }) {
       lexeme: w.o || entry?.lemma || '',
       transliteration: w.t || entry?.translit || entry?.xlit || '',
       partOfSpeech: '',
+      parsing: w.p || '', // the grammar label from the interlinear, explained in the word's card
       shortDefinition: entry?.kjv_def || w.g || '',
       definitionHtml: entry ? buildGreekDefinitionHtml(key, entry) : '',
       loading: false,

src/index.css

@@ -34,6 +34,7 @@ select {
 /* iPhone and iPad: don't inflate text when the phone is turned sideways, no grey flash on tap, and no
    double-tap-to-zoom delay on controls. */
 html {
+  scrollbar-gutter: stable; /* pages with and without a scrollbar line up the same */
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
@@ -78,6 +79,14 @@ input,
 
 /* Top bars leave room for the status bar / notch when the app is installed or full-screen
    (env() is 0 in an ordinary browser tab). */
+/* iOS Safari/PWA can leave fixed and sticky bars stranded mid-screen after the toolbar collapses or the page
+   rubber-bands. Giving them their own compositing layer keeps them pinned to the viewport edge. */
+.fixed-bar {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  will-change: transform;
+}
+
 .safe-top {
   padding-top: env(safe-area-inset-top, 0px);
 }

src/pages/AdminPage.jsx

@@ -70,7 +70,7 @@ export default function AdminPage() {
   };
 
   return (
-    <PageShell title="Admin" onBack={goHome} maxWidth="max-w-5xl">
+    <PageShell title="Admin" active="admin" onBack={goHome} maxWidth="max-w-5xl">
       <main className="mx-auto max-w-5xl space-y-5 px-4 py-6">
         <div className="flex gap-2">
           <button type="button" onClick={() => setAdminTab('users')}

src/pages/ExportPage.jsx

@@ -1,8 +1,11 @@
-// The Export stage: take the finished study out as a file, or share it read-only.
+// The Finish stage: everything for when a study is ready to use: files, sharing, handouts, slides, importing notes, schedule, co-teachers and earlier versions.
 import { useApp } from '../context/AppContext.js';
 import { useShareLink } from '../hooks/useShareLink.js';
+import SlidesExport from '../components/SlidesExport.jsx';
+import ImportNotes from '../components/ImportNotes.jsx';
 import HandoutExport from '../components/HandoutExport.jsx';
 import SessionSchedule from '../components/SessionSchedule.jsx';
+import SeriesProgress from '../components/SeriesProgress.jsx';
 import VersionHistory from '../components/VersionHistory.jsx';
 import CoTeachers from '../components/CoTeachers.jsx';
 import LinkRules from '../components/LinkRules.jsx';
@@ -30,7 +33,7 @@ export default function ExportPage() {
     <StudioShell stage="export">
       <main className="mx-auto max-w-2xl space-y-5 px-4 py-8">
         <div>
-          <h1 className="text-xl font-medium">Export</h1>
+          <h1 className="text-xl font-medium">Finish</h1>
           <p className="mt-1 text-sm text-[var(--r-sub)]">{allChunks.length} chunk{allChunks.length === 1 ? '' : 's'} · {filled} script{filled === 1 ? '' : 's'} written</p>
         </div>
 
@@ -52,7 +55,7 @@ export default function ExportPage() {
                   className="min-w-0 flex-1 truncate rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-xs text-[var(--r-sub)]" />
                 <button type="button" onClick={share.copy} className="shrink-0 rounded-lg bg-[var(--r-accent)] px-4 py-2 text-xs font-medium text-[var(--r-on)]">{share.shareCopied ? 'Copied!' : 'Copy'}</button>
               </div>
-              <LinkRules expiresAt={share.expiresAt} hasPasscode={share.hasPasscode} busy={share.shareBusy} onSave={share.enable} />
+              <LinkRules expiresAt={share.expiresAt} hasPasscode={share.hasPasscode} busy={share.shareBusy} onSave={share.enable} showReveal revealAt={share.revealAt} />
               {share.shareError && <p role="alert" className="text-xs text-[var(--r-danger,#b42318)]">{share.shareError}</p>}
               <button type="button" onClick={share.revoke} disabled={share.shareBusy} className="text-xs text-[var(--r-danger,#b42318)] hover:underline">{share.shareBusy ? 'Revoking…' : 'Revoke link'}</button>
             </div>
@@ -61,8 +64,14 @@ export default function ExportPage() {
           )}
         </section>
 
+        <SeriesProgress project={project} />
+
         <HandoutExport project={project} />
 
+        <SlidesExport project={project} />
+
+        <ImportNotes />
+
         <SessionSchedule project={project} />
 
         <CoTeachers projectId={project?.id} sharedBy={project && sharedStudies?.[project.id]} onLeave={() => { deleteProject(project.id); setCurrentPage('home'); }} />

src/pages/HomePage.jsx

@@ -1,7 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import { filterStudies, groupBySeries, isTagQuery, seriesList, tagCounts } from '../utils/studyFilter.js';
 import BookCover from '../components/BookCover.jsx';
+import DailyFive from '../components/DailyFive.jsx';
+import PinnedPrayers from '../components/PinnedPrayers.jsx';
+import WeeklyRecall from '../components/WeeklyRecall.jsx';
+import OfflineBadge from '../components/OfflineBadge.jsx';
+import { useOfflineSave } from '../hooks/useOfflineSave.js';
+import RecallHistory from '../components/RecallHistory.jsx';
 import IqDailyCard from '../components/iq/IqDailyCard.jsx';
 import IqNarratorOptions, { useLazyNarrators } from '../components/iq/IqNarratorOptions.jsx';
 import PageShell from '../components/study/PageShell.jsx';
@@ -12,6 +18,7 @@ import {
   formatRelativeDate,
   loadProjectIndex,
 } from '../utils/bibleUtils.jsx';
+import { backupAge, lastBackupAt } from '../utils/backup.js';
 import { loadProjectById } from '../utils/projectStorage.js';
 import { compactPassages } from '../utils/passageSummary.js';
 import { getPlan, getPlanSchedule, formatDayReadings, nextUnreadDayIndex, computeStreak } from '../utils/readingPlans.js';
@@ -36,11 +43,14 @@ export default function HomePage() {
     audioState,
     audioProgress,
     openImportProject,
+    setCurrentPage,
+    openBackup,
     openNewProject,
     pullLatestFromServer,
     resumeProject,
     renameProjectInStorage,
     setProjectSeries,
+    setProjectArchived,
     deleteProject,
     handlePlayBookAudio,
     handleStopBookAudio,
@@ -50,12 +60,16 @@ export default function HomePage() {
     handleSeekAudioTo,
   } = useApp();
   const narrators = useLazyNarrators(audioNarrator);
+  const offline = useOfflineSave();
+  // Each study's books and translation, read once per list change (the badge itself follows what's saved).
+  const studyBooks = useMemo(() => Object.fromEntries(projectIndex.map((e) => [e.id, loadProjectById(e.id)])), [projectIndex]);
   const [homeSearch, setHomeSearch] = useState('');
   const [homeSort, setHomeSort] = useState(() => {
     try { return localStorage.getItem('homeSort') || 'recent'; } catch { return 'recent'; }
   }); // 'recent' | 'title' | 'passage'
   const [homeTags, setHomeTags] = useState([]); // tag chips switched on: a study must have all of them
   const [showAllTags, setShowAllTags] = useState(false);
+  const [showArchived, setShowArchived] = useState(false); // the "Finished & archived" section is folded away until opened
   const [seriesFilter, setSeriesFilter] = useState(''); // '' = all, '__none' = not in a series, or a series name
   const [seriesEditingId, setSeriesEditingId] = useState(null);
   const [seriesValue, setSeriesValue] = useState('');
@@ -107,35 +121,112 @@ export default function HomePage() {
     }, 300);
   }, [homeSearch]);
 
-  const tagList = tagCounts(projectIndex);
+  // Finished studies are set aside in their own section; the tag and series filters follow the active ones
+  const activeIndex = projectIndex.filter((e) => !e.archived);
+  const tagList = tagCounts(activeIndex);
   const shownTags = showAllTags ? tagList : tagList.slice(0, 12);
-  const seriesNames = seriesList(projectIndex);
-  const visible = filterStudies(projectIndex, { query: homeSearch, tags: homeTags, series: seriesFilter })
-    .sort((a, b) => {
+  const seriesNames = seriesList(activeIndex);
+  const byHomeSort = (a, b) => {
     if (homeSort === 'title') return (a.title ?? '').localeCompare(b.title ?? '');
     if (homeSort === 'passage') return (a.chapterSummary ?? '').localeCompare(b.chapterSummary ?? '');
     return (b.lastEdited ?? 0) - (a.lastEdited ?? 0);
-    });
+  };
+  const visible = filterStudies(projectIndex, { query: homeSearch, tags: homeTags, series: seriesFilter }).sort(byHomeSort);
+  const archivedStudies = filterStudies(projectIndex, { query: homeSearch, tags: homeTags, archived: true }).sort(byHomeSort);
+  const archivedCount = projectIndex.length - activeIndex.length;
+  const filtering = !!homeSearch.trim() || homeTags.length > 0 || seriesFilter !== '';
+  const archivedOpen = showArchived || ((!!homeSearch.trim() || homeTags.length > 0) && archivedStudies.length > 0);
   // With series in use (and no single series chosen) the studies are grouped under their series name
   const sections = seriesFilter === '' && seriesNames.length > 0 ? groupBySeries(visible) : [{ name: '', items: visible, flat: true }];
   const fieldCls = 'rounded-lg border border-[var(--r-line)] bg-[var(--r-bar)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
   const linkBtn = 'rounded-lg px-3 py-1.5 text-sm text-[var(--r-sub)] hover:bg-black/5';
   const notice = 'mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 text-sm';
 
+  const renderEntry = (entry) => (
+                  <div key={entry.id} className={homeView === 'list'
+                    ? 'flex flex-col gap-3 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-3 sm:flex-row sm:items-center sm:gap-4'
+                    : 'flex flex-col gap-3 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5'}>
+                    {homeView === 'list'
+                      ? <BookCover summary={entry.chapterSummary} compact className="h-14 w-full sm:w-28 sm:shrink-0" />
+                      : <BookCover summary={entry.chapterSummary} className="h-24" />}
+                    <div className="min-w-0 flex-1">
+                      {renamingId === entry.id ? (
+                        <div className="flex items-center gap-2">
+                          <input type="text" autoFocus value={renameValue} onChange={(e) => setRenameValue(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') { e.preventDefault(); const t = renameValue.trim(); if (t) renameProjectInStorage(entry.id, t); setRenamingId(null); }
+                              else if (e.key === 'Escape') setRenamingId(null);
+                            }}
+                            className={`${fieldCls} flex-1`} />
+                          <button type="button" onClick={() => { const t = renameValue.trim(); if (t) renameProjectInStorage(entry.id, t); setRenamingId(null); }} className="text-sm text-[var(--r-accent)] hover:underline">Save</button>
+                          <button type="button" onClick={() => setRenamingId(null)} className="text-sm text-[var(--r-sub)]">×</button>
+                        </div>
+                      ) : (
+                        <div className={`flex items-start gap-2 ${homeView === 'list' ? 'flex-wrap items-baseline' : 'justify-between'}`}>
+                          <h2 className="text-base font-medium">{entry.title}</h2>
+                          {sharedStudies?.[entry.id] !== undefined && (
+                            <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5 text-[11px] text-[var(--r-sub)]" title="Another account invited you to edit this study">Shared{sharedStudies[entry.id] ? ` by ${sharedStudies[entry.id]}` : ''}</span>
+                          )}
+                          <button type="button" onClick={() => { setRenamingId(entry.id); setRenameValue(entry.title ?? ''); }} className="shrink-0 text-xs text-[var(--r-sub)] hover:text-[var(--r-text)]" title="Rename project">✎ Rename</button>
+                          <button type="button" onClick={() => { setSeriesEditingId(entry.id); setSeriesValue(entry.series ?? ''); }} className="shrink-0 text-xs text-[var(--r-sub)] hover:text-[var(--r-text)]" title="Put this study in a series">{entry.series ? '⧉ Series' : '⧉ Add to series'}</button>
+                        </div>
+                      )}
+                      {seriesEditingId === entry.id && (
+                        <div className="mt-2 flex items-center gap-2">
+                          <input type="text" autoFocus list="series-names" aria-label="Series name" placeholder="Series name (blank to remove)" value={seriesValue} onChange={(e) => setSeriesValue(e.target.value)}
+                            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); setProjectSeries(entry.id, seriesValue); setSeriesEditingId(null); } else if (e.key === 'Escape') setSeriesEditingId(null); }}
+                            className={`${fieldCls} flex-1`} />
+                          <button type="button" onClick={() => { setProjectSeries(entry.id, seriesValue); setSeriesEditingId(null); }} className="text-sm text-[var(--r-accent)] hover:underline">Save</button>
+                          <button type="button" onClick={() => setSeriesEditingId(null)} aria-label="Cancel" className="text-sm text-[var(--r-sub)]">×</button>
+                        </div>
+                      )}
+                      {entry.chapterSummary && <p className="mt-1 text-sm text-[var(--r-sub)]" title={entry.chapterSummary}>{compactPassages(entry.chapterSummary)}</p>}
+                      {entry.tags?.length > 0 && (
+                        // A few tags and a "+N" for the rest (hover for all; the Tag filter above finds any of them)
+                        <div className="mt-2 flex flex-wrap gap-1" title={entry.tags.length > 3 ? entry.tags.join(', ') : undefined}>
+                          {entry.tags.slice(0, 3).map((tag) => (
+                            <button key={tag} type="button" onClick={() => toggleTag(tag)} aria-pressed={homeTags.includes(tag)} title={`Show studies tagged “${tag}”`}
+                              className={`rounded-full border px-2 py-0.5 text-[11px] ${homeTags.includes(tag) ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>{tag}</button>
+                          ))}
+                          {entry.tags.length > 3 && <span className="rounded-full px-1.5 py-0.5 text-[11px] text-[var(--r-sub)]">+{entry.tags.length - 3} more</span>}
+                        </div>
+                      )}
+                      <p className="mt-1 text-xs text-[var(--r-sub)]">{formatRelativeDate(entry.lastEdited)}</p>
+                      <OfflineBadge project={studyBooks[entry.id]} offline={offline} />
+                    </div>
+                    <div className={`flex items-center gap-2 ${homeView === 'list' ? 'sm:w-56 sm:shrink-0' : ''}`}>
+                      <button type="button" onClick={() => resumeProject(entry.id)} className="flex-1 rounded-xl bg-[var(--r-text)] px-4 py-2 text-sm font-medium text-[var(--r-bg)] hover:opacity-90">Resume</button>
+                      {sharedStudies?.[entry.id] === undefined && (
+                        <button type="button" onClick={() => setProjectArchived(entry.id, !entry.archived)} title={entry.archived ? 'Move back to your studies' : 'Set this study aside as finished'}
+                          className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm text-[var(--r-sub)] hover:bg-black/5">{entry.archived ? 'Restore' : 'Archive'}</button>
+                      )}
+                      <button type="button" onClick={() => deleteProject(entry.id)} className="rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm text-[var(--r-danger,#b42318)] hover:bg-black/5">{sharedStudies?.[entry.id] !== undefined ? 'Leave' : 'Delete'}</button>
+                    </div>
+                  </div>
+  );
+
   return (
     <PageShell
       title="My Studies"
       active="studies"
+      maxWidth="max-w-6xl xl:max-w-[88rem]"
       actions={(
         <>
+          <button type="button" onClick={() => setCurrentPage('insights')} className={linkBtn} title="This week, themes, words, what slipped, follow-ups">Insights</button>
           <button type="button" onClick={openImportProject} className={linkBtn} title="Set up a whole series from a session list (.docx)">Import Session List</button>
           <button type="button" onClick={openNewProject} className="rounded-full bg-[var(--r-accent)] px-4 py-1.5 text-sm font-medium text-[var(--r-on)] hover:opacity-90">+ New Project</button>
         </>
       )}
     >
-      <main className="mx-auto grid max-w-6xl gap-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem]">
-        <section className="min-w-0">
+      <main className="mx-auto grid max-w-6xl gap-y-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_21rem] xl:max-w-[88rem] xl:grid-cols-[auto_minmax(0,1fr)_21rem]">
+        {/* Left column: the recall and daily-verse cards (collapses when neither has anything to show) */}
+        <aside className="empty:hidden lg:col-span-2 xl:sticky xl:top-16 xl:col-span-1 xl:max-h-[calc(100vh-5rem)] xl:w-80 xl:self-start xl:overflow-y-auto xl:pr-6">
+          <WeeklyRecall />
           <IqDailyCard />
+        </aside>
+
+        <section className="min-w-0 lg:pr-6">
+          <DailyFive />
           {autoRestoredCount !== null && (
             <div className={notice}>Synced {autoRestoredCount} project{autoRestoredCount > 1 ? 's' : ''} from another device.</div>
           )}
@@ -212,7 +303,7 @@ export default function HomePage() {
                 </div>
               )}
 
-              {visible.length === 0 && (
+              {visible.length === 0 && archivedStudies.length === 0 && (
                 <p role="status" className="mb-4 rounded-xl border border-dashed border-[var(--r-line)] px-4 py-6 text-center text-sm text-[var(--r-sub)]">
                   No studies match{homeTags.length ? ` ${homeTags.map((t) => `“${t}”`).join(' + ')}` : ''}{homeSearch.trim() ? ` “${homeSearch.trim()}”` : ''}.{' '}
                   <button type="button" onClick={() => { setHomeTags([]); setHomeSearch(''); }} className="text-[var(--r-accent)] hover:underline">Clear filters</button>
@@ -253,74 +344,42 @@ export default function HomePage() {
                   </h3>
                 )}
               <div className={homeView === 'list' ? 'flex flex-col gap-2' : 'grid gap-3 sm:grid-cols-2'}>
-                {section.items.map((entry) => (
-                  <div key={entry.id} className={homeView === 'list'
-                    ? 'flex flex-col gap-3 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-3 sm:flex-row sm:items-center sm:gap-4'
-                    : 'flex flex-col gap-3 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5'}>
-                    {homeView === 'list'
-                      ? <BookCover summary={entry.chapterSummary} compact className="h-14 w-full sm:w-28 sm:shrink-0" />
-                      : <BookCover summary={entry.chapterSummary} className="h-24" />}
-                    <div className="min-w-0 flex-1">
-                      {renamingId === entry.id ? (
-                        <div className="flex items-center gap-2">
-                          <input type="text" autoFocus value={renameValue} onChange={(e) => setRenameValue(e.target.value)}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') { e.preventDefault(); const t = renameValue.trim(); if (t) renameProjectInStorage(entry.id, t); setRenamingId(null); }
-                              else if (e.key === 'Escape') setRenamingId(null);
-                            }}
-                            className={`${fieldCls} flex-1`} />
-                          <button type="button" onClick={() => { const t = renameValue.trim(); if (t) renameProjectInStorage(entry.id, t); setRenamingId(null); }} className="text-sm text-[var(--r-accent)] hover:underline">Save</button>
-                          <button type="button" onClick={() => setRenamingId(null)} className="text-sm text-[var(--r-sub)]">×</button>
-                        </div>
-                      ) : (
-                        <div className={`flex items-start gap-2 ${homeView === 'list' ? 'flex-wrap items-baseline' : 'justify-between'}`}>
-                          <h2 className="text-base font-medium">{entry.title}</h2>
-                          {sharedStudies?.[entry.id] !== undefined && (
-                            <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5 text-[11px] text-[var(--r-sub)]" title="Another account invited you to edit this study">Shared{sharedStudies[entry.id] ? ` by ${sharedStudies[entry.id]}` : ''}</span>
-                          )}
-                          <button type="button" onClick={() => { setRenamingId(entry.id); setRenameValue(entry.title ?? ''); }} className="shrink-0 text-xs text-[var(--r-sub)] hover:text-[var(--r-text)]" title="Rename project">✎ Rename</button>
-                          <button type="button" onClick={() => { setSeriesEditingId(entry.id); setSeriesValue(entry.series ?? ''); }} className="shrink-0 text-xs text-[var(--r-sub)] hover:text-[var(--r-text)]" title="Put this study in a series">{entry.series ? '⧉ Series' : '⧉ Add to series'}</button>
-                        </div>
-                      )}
-                      {seriesEditingId === entry.id && (
-                        <div className="mt-2 flex items-center gap-2">
-                          <input type="text" autoFocus list="series-names" aria-label="Series name" placeholder="Series name (blank to remove)" value={seriesValue} onChange={(e) => setSeriesValue(e.target.value)}
-                            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); setProjectSeries(entry.id, seriesValue); setSeriesEditingId(null); } else if (e.key === 'Escape') setSeriesEditingId(null); }}
-                            className={`${fieldCls} flex-1`} />
-                          <button type="button" onClick={() => { setProjectSeries(entry.id, seriesValue); setSeriesEditingId(null); }} className="text-sm text-[var(--r-accent)] hover:underline">Save</button>
-                          <button type="button" onClick={() => setSeriesEditingId(null)} aria-label="Cancel" className="text-sm text-[var(--r-sub)]">×</button>
-                        </div>
-                      )}
-                      {entry.chapterSummary && <p className="mt-1 text-sm text-[var(--r-sub)]" title={entry.chapterSummary}>{compactPassages(entry.chapterSummary)}</p>}
-                      {entry.tags?.length > 0 && (
-                        // A few tags and a "+N" for the rest (hover for all; the Tag filter above finds any of them)
-                        <div className="mt-2 flex flex-wrap gap-1" title={entry.tags.length > 3 ? entry.tags.join(', ') : undefined}>
-                          {entry.tags.slice(0, 3).map((tag) => (
-                            <button key={tag} type="button" onClick={() => toggleTag(tag)} aria-pressed={homeTags.includes(tag)} title={`Show studies tagged “${tag}”`}
-                              className={`rounded-full border px-2 py-0.5 text-[11px] ${homeTags.includes(tag) ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>{tag}</button>
-                          ))}
-                          {entry.tags.length > 3 && <span className="rounded-full px-1.5 py-0.5 text-[11px] text-[var(--r-sub)]">+{entry.tags.length - 3} more</span>}
-                        </div>
-                      )}
-                      <p className="mt-1 text-xs text-[var(--r-sub)]">{formatRelativeDate(entry.lastEdited)}</p>
-                    </div>
-                    <div className={`flex items-center gap-2 ${homeView === 'list' ? 'sm:w-56 sm:shrink-0' : ''}`}>
-                      <button type="button" onClick={() => resumeProject(entry.id)} className="flex-1 rounded-xl bg-[var(--r-text)] px-4 py-2 text-sm font-medium text-[var(--r-bg)] hover:opacity-90">Resume</button>
-                      <button type="button" onClick={() => deleteProject(entry.id)} className="rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm text-[var(--r-danger,#b42318)] hover:bg-black/5">{sharedStudies?.[entry.id] !== undefined ? 'Leave' : 'Delete'}</button>
+                {section.items.map(renderEntry)}
               </div>
               </div>
               ))}
+
+              {visible.length === 0 && archivedStudies.length > 0 && !filtering && (
+                <p role="status" className="mb-4 rounded-xl border border-dashed border-[var(--r-line)] px-4 py-6 text-center text-sm text-[var(--r-sub)]">Everything is finished or archived. Open the section below to bring a study back.</p>
+              )}
+
+              {archivedCount > 0 && (
+                <div className="mt-6 border-t border-[var(--r-line)] pt-4">
+                  <button type="button" onClick={() => setShowArchived((o) => !o)} aria-expanded={archivedOpen} aria-controls="archived-studies"
+                    className="flex w-full items-center gap-2 text-left text-sm font-medium">
+                    <span aria-hidden="true" className="text-xs text-[var(--r-sub)]">{archivedOpen ? '▾' : '▸'}</span>
+                    Finished &amp; archived <span className="text-xs font-normal text-[var(--r-sub)]">{filtering && archivedStudies.length !== archivedCount ? `${archivedStudies.length} of ${archivedCount}` : archivedCount}</span>
+                  </button>
+                  {archivedOpen && (
+                    <div id="archived-studies" className={`mt-3 ${homeView === 'list' ? 'flex flex-col gap-2' : 'grid gap-3 sm:grid-cols-2'}`}>
+                      {archivedStudies.length === 0
+                        ? <p className="text-sm text-[var(--r-sub)]">No archived studies match.</p>
+                        : archivedStudies.map(renderEntry)}
                     </div>
+                  )}
                 </div>
-              ))}
+              )}
             </>
           )}
         </section>
 
-        <aside className="space-y-4">
+        <aside className="space-y-4 lg:sticky lg:top-16 lg:max-h-[calc(100vh-5rem)] lg:self-start lg:overflow-y-auto">
           <TodayCard planProgress={planProgress} readingActivity={readingActivity} openReadingPlans={openReadingPlans}
             openPlanReading={openPlanReading} studyReadingPlanDay={studyReadingPlanDay} studyBuildBusy={studyBuildBusy} />
 
+          <PinnedPrayers />
+          <RecallHistory />
+
           {/* BSB audio player — always shown, so it's easy to find */}
           <AudioPlayer
             title="Listen to BSB Audio"
@@ -353,6 +412,16 @@ export default function HomePage() {
               </>
             )}
           />
+
+          {projectIndex.length > 0 && (() => {
+            const age = backupAge(lastBackupAt());
+            return (
+              <p className={`flex flex-wrap items-center gap-2 px-1 text-xs ${age.stale ? 'text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>
+                {age.text}.
+                <button type="button" onClick={openBackup} className="text-[var(--r-accent)] hover:underline">Back up now</button>
+              </p>
+            );
+          })()}
         </aside>
       </main>
     </PageShell>

src/pages/InsightsPage.jsx

@@ -0,0 +1,107 @@
+// Insights: your studies seen together — this week's own work, themes (tags), words you keep studying,
+// what slipped in recalls, and follow-ups still open.
+import { useMemo } from 'react';
+import { useApp } from '../context/AppContext.js';
+import PageShell from '../components/study/PageShell.jsx';
+import { loadProjectById } from '../utils/projectStorage.js';
+import { followUpList, slippedList, themeIndex, weeklySummary, wordIndex } from '../utils/insights.js';
+
+const card = 'rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5';
+const open = 'text-xs text-[var(--r-accent)] hover:underline';
+
+function Stat({ label, value }) {
+  return (
+    <div className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-4 py-3">
+      <p className="text-2xl font-medium tabular-nums">{value}</p>
+      <p className="text-xs text-[var(--r-sub)]">{label}</p>
+    </div>
+  );
+}
+
+export default function InsightsPage() {
+  const { projectIndex, openStudyChunk, goHome } = useApp();
+  const data = useMemo(() => {
+    const projects = projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean);
+    return { week: weeklySummary(projects), themes: themeIndex(projects), words: wordIndex(projects), slipped: slippedList(projects), followUps: followUpList(projects) };
+  }, [projectIndex]);
+  const { week, themes, words, slipped, followUps } = data;
+  const link = (item) => <button type="button" onClick={() => openStudyChunk(item.projectId, item.chunkId)} className={open}>{item.reference} · {item.projectTitle}</button>;
+
+  return (
+    <PageShell title="Insights" active="studies" onBack={goHome} maxWidth="max-w-4xl">
+      <main className="mx-auto max-w-4xl space-y-5 px-4 pb-10">
+        <section aria-label="This week" className={card}>
+          <h2 className="text-sm font-medium">This week</h2>
+          <p className="mb-3 mt-0.5 text-xs text-[var(--r-sub)]">Counted over the chunks you edited in the last 7 days. Pasted text isn’t counted as yours.</p>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <Stat label="Chunks worked on" value={week.chunksTouched} />
+            <Stat label="Words of your own" value={week.ownWords} />
+            <Stat label="Your own words" value={week.ownShare === null ? '–' : `${week.ownShare}%`} />
+            <Stat label="Recalls done" value={week.recalls} />
+          </div>
+          {(week.teachBacks > 0 || week.fiveMinutes > 0) && <p className="mt-2 text-xs text-[var(--r-sub)]">{[week.fiveMinutes > 0 && `${week.fiveMinutes} five-minute session${week.fiveMinutes === 1 ? '' : 's'}`, week.teachBacks > 0 && `${week.teachBacks} teach-it-back summar${week.teachBacks === 1 ? 'y' : 'ies'}`].filter(Boolean).join(' · ')} this week.</p>}
+        </section>
+
+        <section aria-label="Open follow-ups" className={card}>
+          <h2 className="text-sm font-medium">Follow-ups</h2>
+          {followUps.length === 0 ? <p className="mt-1 text-xs text-[var(--r-sub)]">None yet. Add them under “More” in the Study stage.</p> : (
+            <ul className="mt-2 space-y-1.5 text-sm">
+              {followUps.map((f) => (
+                <li key={f.id} className="flex flex-wrap items-baseline gap-x-3">
+                  <span className={f.done ? 'text-[var(--r-sub)] line-through' : ''}>{f.text}</span>
+                  {link(f)}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section aria-label="What slipped" className={card}>
+          <h2 className="text-sm font-medium">What slipped in recalls</h2>
+          {slipped.length === 0 ? <p className="mt-1 text-xs text-[var(--r-sub)]">Nothing yet. After a weekly recall, note what you missed.</p> : (
+            <ul className="mt-2 space-y-3 text-sm">
+              {slipped.map((r) => (
+                <li key={`${r.chunkId}-${r.at}`}>
+                  <p className="text-xs text-[var(--r-sub)]">{new Date(r.at).toLocaleDateString()} · {link(r)}</p>
+                  <ul className="ml-4 list-disc">{r.items.map((i) => <li key={i}>{i}</li>)}</ul>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section aria-label="Themes" className={card}>
+          <h2 className="text-sm font-medium">Themes</h2>
+          {themes.length === 0 ? <p className="mt-1 text-xs text-[var(--r-sub)]">Tag a chunk (under “More”) and it appears here with every other chunk on the same theme.</p> : (
+            <div className="mt-2 space-y-3">
+              {themes.map((t) => (
+                <details key={t.tag} className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2">
+                  <summary className="cursor-pointer text-sm"><span className="font-medium">{t.tag}</span> <span className="text-xs text-[var(--r-sub)]">· {t.count} chunk{t.count === 1 ? '' : 's'}</span></summary>
+                  <ul className="mt-2 space-y-2">
+                    {t.items.map((i) => (
+                      <li key={`${i.chunkId}`} className="text-sm">{link(i)}{i.snippet && <p className="font-serif text-[13px] text-[var(--r-sub)]">{i.snippet}</p>}</li>
+                    ))}
+                  </ul>
+                </details>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section aria-label="Words you keep studying" className={card}>
+          <h2 className="text-sm font-medium">Words you keep studying</h2>
+          {words.length === 0 ? <p className="mt-1 text-xs text-[var(--r-sub)]">Words you study in two or more places show up here.</p> : (
+            <ul className="mt-2 space-y-2 text-sm">
+              {words.map((w) => (
+                <li key={w.key}>
+                  <span className="font-serif text-base">{w.lexeme}</span> <span className="text-xs text-[var(--r-sub)]">{[w.transliteration, w.strong, w.gloss].filter(Boolean).join(' · ')} · {w.count} places</span>
+                  <span className="mt-0.5 flex flex-wrap gap-x-3">{w.places.map((p) => <span key={p.chunkId}>{link(p)}</span>)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </main>
+    </PageShell>
+  );
+}

src/pages/OutlinePage.jsx

@@ -11,12 +11,13 @@ import { buildChapterSummary } from '../utils/projectStorage.js';
 import { compactPassages } from '../utils/passageSummary.js';
 import { attachableFromChunk, fetchPassageText } from '../utils/passageText.js';
 import PresentMode from '../components/PresentMode.jsx';
+import { firstOverPoint, outlineSteps, planStatus } from '../utils/present.js';
 import IqOutlineAttach from '../components/iq/IqOutlineAttach.jsx';
 import ShareOutlineSheet from '../components/ShareOutlineSheet.jsx';
 import { downloadOutlineDocx, downloadOutlineMarkdown, printOutline } from '../utils/outlineExport.js';
 import {
   KINDS, STUDY, buildChunkFromNotes, buildFromNotes, notesBuildCount, addAfter, addChild, addRoot, chunkOf, countNodes, flatten, getNode, indent, insertAt, kindLabel, locate,
-  moveNode, newNode, outdent, outlineFor, outlineToText, removeNode, seedFromChunks, seedFromVerses, timeSummary, updateNode, withOutline,
+  moveNode, newNode, outdent, outlineFor, outlineToText, removeNode, seedFromChunks, seedFromVerses, timeSummary, totalMinutes, updateNode, withOutline,
 } from '../utils/outline.js';
 
 const iconBtn = 'flex h-7 w-7 items-center justify-center rounded-md text-sm text-[var(--r-sub)] hover:bg-black/5 hover:text-[var(--r-text)] disabled:opacity-30 disabled:hover:bg-transparent';
@@ -45,6 +46,11 @@ export default function OutlinePage() {
   const scopeChunk = scope === STUDY ? null : chunkOf(project, scope);
   const tree = outlineFor(project, scope);
   const rows = flatten(tree);
+  // The time you have for a session, and how the planned minutes measure up to it
+  const sessionMinutes = Number(project?.sessionMinutes) || 0;
+  const plan = planStatus(totalMinutes(tree), sessionMinutes);
+  const overPoint = firstOverPoint(outlineSteps(tree), sessionMinutes);
+  const setSessionMinutes = (value) => updateProject((current) => ({ ...current, sessionMinutes: value === '' ? null : Math.max(0, Math.min(600, Math.round(Number(value)))) }));
   const [pendingFocus, setPendingFocus] = useState(null);
   const [metaOpen, setMetaOpen] = useState(() => new Set()); // points whose detail fields are showing
   const [shareOpen, setShareOpen] = useState(false);
@@ -160,6 +166,11 @@ export default function OutlinePage() {
             </select>
           </label>
           {timeSummary(tree) && <span className="text-sm text-[var(--r-sub)]">{timeSummary(tree)}</span>}
+          <label className="flex items-center gap-1.5 text-sm text-[var(--r-sub)]">Session length
+            <input type="number" min="0" max="600" inputMode="numeric" aria-label="Session length in minutes" value={project?.sessionMinutes ?? ''} onChange={(e) => setSessionMinutes(e.target.value)}
+              className="w-16 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)] focus:outline-none" /> min
+          </label>
+          {plan.state !== 'unset' && <span role="status" className={`text-sm ${plan.state === 'over' ? 'font-medium text-[var(--r-danger,#b42318)]' : 'text-[var(--r-sub)]'}`}>{plan.text}</span>}
           {scopeChunk && <button type="button" onClick={() => openChunk(scope)} className="text-sm text-[var(--r-accent)] hover:underline">Open this chunk in Study</button>}
         </div>
 
@@ -229,10 +240,11 @@ export default function OutlinePage() {
                       />
 
                       {/* What the point carries, at a glance */}
-                      {(node.kind || mins || node.ref || linked) && (
+                      {(node.kind || mins || node.ref || linked || overPoint?.id === node.id) && (
                         <p className="flex flex-wrap items-center gap-x-2 gap-y-1 px-2 text-xs text-[var(--r-sub)]">
                           {node.kind && <span className={`${chip} border-[var(--r-accent)] text-[var(--r-accent)]`}>{kindLabel(node.kind)}</span>}
                           {mins && <span>{node.minutes} min</span>}
+                          {overPoint?.id === node.id && <span className="font-medium text-[var(--r-danger,#b42318)]">Runs past {sessionMinutes} min here</span>}
                           {node.ref && <span>{node.ref}</span>}
                           {linked && node.chunkId !== scope && <button type="button" onClick={() => openChunk(node.chunkId)} className="text-[var(--r-accent)] hover:underline">Open chunk in Study</button>}
                         </p>

src/pages/PrayerPage.jsx

@@ -1,10 +1,10 @@
 // The prayer journal: what you are praying about (and for whom), the verses tied to each request, the days you
 // prayed, and the answers when they come.
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import PageShell from '../components/study/PageShell.jsx';
 import { useToast } from '../components/Toasts.jsx';
-import { filterPrayers, daysToAnswer, labelFor, live, parseVerses, prayersToMarkdown } from '../utils/prayers.js';
+import { STATUSES, filterPrayers, daysToAnswer, labelFor, live, parsePrayerImport, parseVerses, pinned as pinnedList, prayersToJson, prayersToMarkdown } from '../utils/prayers.js';
 import { localDateString } from '../utils/readingPlans.js';
 
 const field = 'rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
@@ -23,11 +23,12 @@ function VerseChips({ verses, onOpen }) {
   );
 }
 
-function PrayerCard({ prayer, today, actions, onOpenVerse }) {
-  const [mode, setMode] = useState(null); // null | 'edit' | 'answer'
+function PrayerCard({ prayer, today, actions, onOpenVerse, pinPos }) {
+  const [mode, setMode] = useState(null); // null | 'edit' | 'answer' | 'partial'
   const [text, setText] = useState('');
   const [note, setNote] = useState('');
   const prayedToday = prayer.prayedOn.includes(today);
+  const isPinned = !!pinPos;
   const days = daysToAnswer(prayer);
   return (
     <li className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4">
@@ -41,11 +42,23 @@ function PrayerCard({ prayer, today, actions, onOpenVerse }) {
         </div>
       ) : (
         <div>
-          {prayer.forWhom && <p className="text-xs font-medium uppercase tracking-wide text-[var(--r-sub)]">For {prayer.forWhom}</p>}
+          {(prayer.forWhom || isPinned || prayer.status) && (
+            <p className="flex flex-wrap items-center gap-2 text-xs font-medium uppercase tracking-wide text-[var(--r-sub)]">
+              {isPinned && <span className="text-[var(--r-accent)]">Pinned</span>}
+              {prayer.status && <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5 normal-case tracking-normal">{STATUSES[prayer.status]}</span>}
+              {prayer.forWhom && <span>For {prayer.forWhom}</span>}
+            </p>
+          )}
           <p className="whitespace-pre-wrap text-[15px] leading-relaxed">{prayer.text}</p>
           <VerseChips verses={prayer.verses} onOpen={onOpenVerse} />
         </div>
       )}
+      {prayer.status === 'partial' && prayer.answerNote && mode !== 'partial' && (
+        <div className="mt-3 rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm" role="note">
+          <p className="text-xs font-medium text-[var(--r-accent)]">Partly answered</p>
+          <p className="mt-0.5 whitespace-pre-wrap">{prayer.answerNote}</p>
+        </div>
+      )}
       {prayer.answeredAt && (
         <div className="mt-3 rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm" role="note">
           <p className="text-xs font-medium text-[var(--r-accent)]">Answered {new Date(prayer.answeredAt).toLocaleDateString()}{days != null ? ` · after ${days} day${days === 1 ? '' : 's'}` : ''}</p>
@@ -61,6 +74,15 @@ function PrayerCard({ prayer, today, actions, onOpenVerse }) {
           </div>
         </div>
       )}
+      {mode === 'partial' && (
+        <div className="mt-3">
+          <textarea aria-label="What has been answered so far?" autoFocus value={note} onChange={(e) => setNote(e.target.value)} rows={2} maxLength={1000} placeholder="What has been answered so far? (optional)" className={`${field} w-full`} />
+          <div className="mt-2 flex gap-3 text-xs">
+            <button type="button" onClick={() => { actions.status(prayer.id, 'partial', note); setMode(null); }} className="font-medium text-[var(--r-accent)] hover:underline">Save</button>
+            <button type="button" onClick={() => setMode(null)} className="text-[var(--r-sub)] hover:underline">Cancel</button>
+          </div>
+        </div>
+      )}
       <div className="mt-3 flex flex-wrap items-center gap-2">
         {!prayer.answeredAt && (
           <button type="button" onClick={() => actions.toggle(prayer.id)} aria-pressed={prayedToday} className={`${small} ${prayedToday ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : ''}`}>
@@ -68,7 +90,20 @@ function PrayerCard({ prayer, today, actions, onOpenVerse }) {
           </button>
         )}
         {prayer.prayedOn.length > 0 && <span className="text-xs text-[var(--r-sub)]">Prayed on {prayer.prayedOn.length} day{prayer.prayedOn.length === 1 ? '' : 's'}</span>}
-        <span className="ml-auto flex gap-2">
+        <span className="ml-auto flex flex-wrap gap-2">
+          {!prayer.answeredAt && isPinned && (
+            <>
+              <button type="button" onClick={() => actions.move(prayer.id, -1)} disabled={pinPos.index === 0} aria-label="Move up" title="Move up" className={`${small} disabled:opacity-40`}>↑</button>
+              <button type="button" onClick={() => actions.move(prayer.id, 1)} disabled={pinPos.index === pinPos.count - 1} aria-label="Move down" title="Move down" className={`${small} disabled:opacity-40`}>↓</button>
+            </>
+          )}
+          {!prayer.answeredAt && <button type="button" onClick={() => actions.pin(prayer.id, !isPinned)} aria-pressed={isPinned} className={`${small} ${isPinned ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : ''}`}>{isPinned ? 'Unpin' : 'Pin'}</button>}
+          {!prayer.answeredAt && (
+            <>
+              <button type="button" onClick={() => actions.status(prayer.id, prayer.status === 'waiting' ? '' : 'waiting')} aria-pressed={prayer.status === 'waiting'} className={`${small} ${prayer.status === 'waiting' ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : ''}`}>Waiting</button>
+              <button type="button" onClick={() => { setNote(prayer.status === 'partial' ? prayer.answerNote : ''); setMode('partial'); }} aria-pressed={prayer.status === 'partial'} className={`${small} ${prayer.status === 'partial' ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : ''}`}>Partly answered</button>
+            </>
+          )}
           {prayer.answeredAt
             ? <button type="button" onClick={() => actions.reopen(prayer.id)} className={small}>Pray again</button>
             : <button type="button" onClick={() => { setNote(''); setMode('answer'); }} className={small}>Answered</button>}
@@ -81,12 +116,13 @@ function PrayerCard({ prayer, today, actions, onOpenVerse }) {
 }
 
 export default function PrayerPage() {
-  const { prayers, addPrayer, editPrayer, togglePrayed, answerPrayer, reopenPrayer, deletePrayer, prayerDraft, clearPrayerDraft, jumpToReaderVerse, openBibleReader } = useApp();
+  const { prayers, addPrayer, editPrayer, togglePrayed, answerPrayer, reopenPrayer, deletePrayer, pinPrayer, movePrayer, setPrayerStatus, importPrayers, prayerDraft, clearPrayerDraft, jumpToReaderVerse, openBibleReader } = useApp();
   const { toast } = useToast();
   const [tab, setTab] = useState('open');
   const [query, setQuery] = useState('');
   const [form, setForm] = useState({ text: '', forWhom: '', verses: '' });
   const today = localDateString();
+  const fileRef = useRef(null);
 
   // "Pray about this verse" from the Reader arrives with the verse filled in
   useEffect(() => {
@@ -105,19 +141,31 @@ export default function PrayerPage() {
     setTab('open');
   };
   const actions = {
-    edit: editPrayer, toggle: togglePrayed, reopen: reopenPrayer,
+    edit: editPrayer, toggle: togglePrayed, reopen: reopenPrayer, pin: pinPrayer, move: movePrayer, status: setPrayerStatus,
     answer: (id, note) => { answerPrayer(id, note); toast('Marked answered. Thank God for it.'); },
     remove: (id) => { const undo = deletePrayer(id); toast('Prayer deleted', { action: { label: 'Undo', onClick: undo } }); },
   };
   const openVerse = (book, chapter, verse) => { jumpToReaderVerse(book, chapter, verse); openBibleReader(); };
-  const download = () => {
-    const url = URL.createObjectURL(new Blob([prayersToMarkdown(prayers)], { type: 'text/markdown;charset=utf-8' }));
+  const pinOrder = useMemo(() => pinnedList(prayers).map((p) => p.id), [prayers]);
+  const download = (json = false) => {
+    const url = URL.createObjectURL(new Blob([json ? prayersToJson(prayers) : prayersToMarkdown(prayers)], { type: json ? 'application/json' : 'text/markdown;charset=utf-8' }));
     const a = document.createElement('a');
-    a.href = url; a.download = 'prayer-journal.md';
+    a.href = url; a.download = json ? 'prayer-journal.json' : 'prayer-journal.md';
     document.body.appendChild(a); a.click(); a.remove();
     setTimeout(() => URL.revokeObjectURL(url), 1000);
   };
 
+  const onImportFile = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    let result;
+    try { result = parsePrayerImport(await file.text(), prayers); } catch { result = { prayers: [], skipped: 0, error: 'Couldn’t read that file.' }; }
+    if (result.error) { toast(result.error); return; }
+    if (result.prayers.length) importPrayers(result.prayers);
+    toast(`Imported ${result.prayers.length} prayer${result.prayers.length === 1 ? '' : 's'}${result.skipped ? ` (${result.skipped} already here or skipped)` : ''}`);
+  };
+
   return (
     <PageShell title="Prayer journal" active="prayer" maxWidth="max-w-3xl">
       <main className="mx-auto max-w-3xl space-y-5 px-4 py-6">
@@ -149,7 +197,14 @@ export default function PrayerPage() {
             <button type="button" role="tab" aria-selected={tab === 'all'} onClick={() => setTab('all')} className={tabBtn(tab === 'all')}>All</button>
           </div>
           <input type="search" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search prayers…" aria-label="Search prayers" className={`${field} ml-auto w-48 py-1.5`} />
-          {live(prayers).length > 0 && <button type="button" onClick={download} className={small}>Download</button>}
+          <button type="button" onClick={() => fileRef.current?.click()} className={small}>Import</button>
+          <input ref={fileRef} type="file" accept=".json,.md,.txt,text/markdown,application/json,text/plain" onChange={onImportFile} className="hidden" aria-label="Import prayers file" />
+          {live(prayers).length > 0 && (
+            <>
+              <button type="button" onClick={() => download(false)} className={small}>Download</button>
+              <button type="button" onClick={() => download(true)} className={small} title="Keeps every detail, including the days you prayed">Download JSON</button>
+            </>
+          )}
         </div>
 
         {shown.length === 0 ? (
@@ -159,7 +214,7 @@ export default function PrayerPage() {
           </p>
         ) : (
           <ul className="space-y-3" aria-label="Prayers">
-            {shown.map((p) => <PrayerCard key={p.id} prayer={p} today={today} actions={actions} onOpenVerse={openVerse} />)}
+            {shown.map((p) => <PrayerCard key={p.id} prayer={p} today={today} actions={actions} onOpenVerse={openVerse} pinPos={pinOrder.includes(p.id) ? { index: pinOrder.indexOf(p.id), count: pinOrder.length } : null} />)}
           </ul>
         )}
       </main>

src/pages/PrayerPage.test.jsx

@@ -4,14 +4,14 @@ import { vi, test, expect } from 'vitest';
 import { AppContext } from '../context/AppContext.js';
 import { ToastProvider } from '../components/Toasts.jsx';
 import PrayerPage from './PrayerPage.jsx';
-import { markAnswered, newPrayer } from '../utils/prayers.js';
+import { markAnswered, newPrayer, setPinned } from '../utils/prayers.js';
 
 vi.mock('../components/study/PageShell.jsx', () => ({ default: ({ children }) => <div>{children}</div> }));
 
 const T0 = Date.UTC(2026, 9, 1);
 function setup(initial = [], extra = {}) {
   const ctx = {
-    prayers: initial, addPrayer: vi.fn(), editPrayer: vi.fn(), togglePrayed: vi.fn(), answerPrayer: vi.fn(), reopenPrayer: vi.fn(), deletePrayer: vi.fn(() => vi.fn()),
+    prayers: initial, addPrayer: vi.fn(), editPrayer: vi.fn(), togglePrayed: vi.fn(), answerPrayer: vi.fn(), reopenPrayer: vi.fn(), pinPrayer: vi.fn(), movePrayer: vi.fn(), setPrayerStatus: vi.fn(), importPrayers: vi.fn(), deletePrayer: vi.fn(() => vi.fn()),
     prayerDraft: null, clearPrayerDraft: vi.fn(), jumpToReaderVerse: vi.fn(), openBibleReader: vi.fn(), ...extra,
   };
   render(<AppContext.Provider value={ctx}><ToastProvider><PrayerPage /></ToastProvider></AppContext.Provider>);
@@ -78,3 +78,33 @@ test('search narrows the list', async () => {
   expect(screen.getByText('Rain for the farm')).toBeInTheDocument();
   expect(screen.queryByText('Peace at home')).toBeNull();
 });
+
+test('prayers can be pinned, reordered, and marked waiting or partly answered', async () => {
+  const a = newPrayer({ text: 'First request' }, T0);
+  const b = newPrayer({ text: 'Second request' }, T0 + 1);
+  const list = setPinned(setPinned([a, b], a.id, true, T0 + 5), b.id, true, T0 + 6);
+  const user = userEvent.setup();
+  const ctx = setup(list);
+  const items = screen.getAllByRole('listitem');
+  expect(items[0]).toHaveTextContent('First request');
+  expect(within(items[0]).getByRole('button', { name: 'Move up' })).toBeDisabled();
+  await user.click(within(items[0]).getByRole('button', { name: 'Move down' }));
+  expect(ctx.movePrayer).toHaveBeenCalledWith(a.id, 1);
+  await user.click(within(items[1]).getByRole('button', { name: 'Unpin' }));
+  expect(ctx.pinPrayer).toHaveBeenCalledWith(b.id, false);
+  await user.click(within(items[0]).getByRole('button', { name: 'Waiting' }));
+  expect(ctx.setPrayerStatus).toHaveBeenCalledWith(a.id, 'waiting');
+  await user.click(within(items[0]).getByRole('button', { name: 'Partly answered' }));
+  await user.type(screen.getByLabelText('What has been answered so far?'), 'Job interview came');
+  await user.click(screen.getByRole('button', { name: 'Save' }));
+  expect(ctx.setPrayerStatus).toHaveBeenCalledWith(a.id, 'partial', 'Job interview came');
+});
+
+test('importing a file adds only new prayers', async () => {
+  const have = newPrayer({ text: 'Already here' }, T0);
+  const file = new File([JSON.stringify([{ text: 'Already here' }, { text: 'Brand new' }])], 'p.json', { type: 'application/json' });
+  const ctx = setup([have]);
+  await userEvent.setup().upload(screen.getByLabelText('Import prayers file'), file);
+  expect(ctx.importPrayers).toHaveBeenCalledWith([expect.objectContaining({ text: 'Brand new' })]);
+  expect(await screen.findByText(/Imported 1 prayer/)).toBeInTheDocument();
+});

src/pages/PronunciationPage.jsx

@@ -1,5 +1,5 @@
 // Every Greek and Hebrew word in the study with its transliteration, so a
-// speaker can rehearse them. Reached from the Script and Export stages.
+// speaker can rehearse them. Reached from the Script and Finish stages.
 import { useState } from 'react';
 import { useApp } from '../context/AppContext.js';
 import StudioShell from '../components/study/StudioShell.jsx';
@@ -100,7 +100,7 @@ function WordCard({ word, chapterRef, onSpeak }) {
           {word.transliteration && <p className="mt-1 text-base italic text-[var(--r-sub)]">{word.transliteration}</p>}
         </div>
         <div className="flex shrink-0 flex-col items-end gap-2">
-          {word.lexeme && <button type="button" onClick={() => onSpeak(word.lexeme, word.strongNumber)} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5" title="Hear pronunciation">Speak</button>}
+          {word.lexeme && <button type="button" onClick={() => onSpeak(word.lexeme, word.strongNumber, word.transliteration)} className="rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-xs hover:bg-black/5" title="Hear pronunciation">Speak</button>}
           {word.strongNumber && <span className="rounded-full border border-[var(--r-line)] px-2.5 py-0.5 text-xs text-[var(--r-sub)]">{word.strongNumber}</span>}
         </div>
       </div>

src/pages/ScriptPage.jsx

@@ -2,6 +2,7 @@
 // write the final script beside your study notes. Claude prompts and the
 // pronunciation guide live here because this is where they're needed.
 import { useState } from 'react';
+import ScriptureRefs from '../components/ScriptureRefs.jsx';
 import PresentMode from '../components/PresentMode.jsx';
 import DictateButton, { appendSpoken } from '../components/DictateButton.jsx';
 import { useIqAvailable } from '../hooks/useIq.js';
@@ -11,6 +12,7 @@ import { useToast } from '../components/Toasts.jsx';
 import StudioShell from '../components/study/StudioShell.jsx';
 import { formatChunkReference } from '../utils/bibleUtils.jsx';
 import { buildClaudePrompt, buildPodcastPrompt } from '../utils/exportBuilders.js';
+import { chunksNeedingWork } from '../utils/ownWork.js';
 import { buildScriptDraft, spokenMinutes, wordCount } from '../utils/scriptDraft.js';
 
 const has = (s) => (s ?? '').trim().length > 0;
@@ -23,6 +25,7 @@ export default function ScriptPage() {
   const iq = useIqAvailable();
   const [gathering, setGathering] = useState(false);
   const [presenting, setPresenting] = useState(false);
+  const [heldAction, setHeldAction] = useState(null); // an AI hand-off waiting on the own-work check
   const { toast } = useToast();
 
   const chunk = allChunks.find((c) => c.id === project?.selectedChunkId) ?? allChunks[0] ?? null;
@@ -54,6 +57,11 @@ export default function ScriptPage() {
     }
   };
 
+  // AI hand-offs only go straight through once every chunk has your own notes; otherwise ask first.
+  const needingWork = chunksNeedingWork(allChunks);
+  const guarded = (action) => () => { if (needingWork.length === 0) action(); else setHeldAction(() => action); };
+  const goStudy = (id) => { select(id); setHeldAction(null); setCurrentPage('study'); };
+
   // Copies a prompt, then opens claude.ai so it can be pasted straight in.
   const copyPrompt = (prompt) => {
     navigator.clipboard.writeText(prompt).then(() => {
@@ -130,12 +138,12 @@ export default function ScriptPage() {
                   <input type="file" accept=".docx" className="hidden" onChange={(e) => { importDocx(e.target.files?.[0]); e.target.value = ''; }} />
                 </label>
                 <span className="mx-1 h-4 w-px bg-[var(--r-line)]" />
-                <button type="button" onClick={() => copyPrompt(buildClaudePrompt(project))} className={btn}
+                <button type="button" onClick={guarded(() => copyPrompt(buildClaudePrompt(project)))} className={btn}
                   title="Copies your study notes as a Claude prompt, then opens claude.ai">Study guide → Claude ↗</button>
-                <button type="button" onClick={() => copyPrompt(buildPodcastPrompt(project, authUser?.podcastName))} className={btn}
+                <button type="button" onClick={guarded(() => copyPrompt(buildPodcastPrompt(project, authUser?.podcastName)))} className={btn}
                   title="Copies a podcast script prompt for Claude — set your show name in Account Settings first">Podcast → Claude ↗</button>
                 {iq && (
-                  <button type="button" disabled={gathering} onClick={copyPodcastWithContext} className={btn}
+                  <button type="button" disabled={gathering} onClick={guarded(copyPodcastWithContext)} className={btn}
                     title={`Adds IQ Bible commentary, cross-references and word glosses for up to ${chunkRefs(project).refs.length} passages (each uses a few API requests)`}>
                     {gathering ? 'Gathering…' : 'Podcast + background → Claude ↗'}
                   </button>
@@ -145,9 +153,29 @@ export default function ScriptPage() {
                 <DictateButton label="Dictate script" onText={(said) => set({ finalScript: appendSpoken(script, said) })} />
                 {notice && <span role="status" className="text-xs text-[var(--r-accent)]">{notice}</span>}
               </div>
+              {heldAction && (
+                <div role="alert" className="rounded-xl border border-[var(--r-accent)] bg-[var(--r-hl)] p-3 text-sm">
+                  <p className="font-medium">Is this your study, or Claude's?</p>
+                  <p className="mt-0.5 text-xs text-[var(--r-sub)]">These chunks don't have much of your own thinking yet. Write it first, then let Claude polish it.</p>
+                  <ul className="mt-2 space-y-1 text-xs">
+                    {needingWork.map(({ chunk: c, missing }) => (
+                      <li key={c.id} className="flex items-center justify-between gap-3">
+                        <span>{formatChunkReference(project, project.chapters.findIndex((ch) => ch.chunks.some((x) => x.id === c.id)), c, '–')}: {missing.map((m) => `${m.label} ${m.have}/${m.need}`).join(', ')}</span>
+                        <button type="button" onClick={() => goStudy(c.id)} className="text-[var(--r-accent)] hover:underline">Write it →</button>
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="mt-2.5 flex gap-2">
+                    <button type="button" onClick={() => goStudy(needingWork[0].chunk.id)} className="rounded-full bg-[var(--r-text)] px-3 py-1 text-xs font-medium text-[var(--r-bg)]">Go write my notes</button>
+                    <button type="button" onClick={() => { const run = heldAction; setHeldAction(null); run(); }} className="rounded-full border border-[var(--r-text)] px-3 py-1 text-xs hover:bg-black/5">Send to Claude anyway</button>
+                    <button type="button" onClick={() => setHeldAction(null)} className="text-xs text-[var(--r-sub)] hover:underline">Cancel</button>
+                  </div>
+                </div>
+              )}
               <textarea aria-label="Final script" value={script} onChange={(e) => set({ finalScript: e.target.value })}
                 placeholder="Write or paste the final script here. “Build outline from notes” starts you from your study notes."
                 className="min-h-[24rem] flex-1 resize-y rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] px-5 py-4 font-serif text-[16px] leading-8 text-[var(--r-text)] placeholder:font-sans placeholder:text-sm placeholder:text-[var(--r-sub)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" />
+              <ScriptureRefs text={script} />
             </div>
           )}
         </main>