Add own-work tracking, Claude hand-off check, and weekly recall

- Long pastes into Observe/Interpret/Apply are tagged as pasted; notes show
  Mine / N pasted and an own-words share. Pastes follow text through merges.
- The "-> Claude" buttons on the Script stage ask first when a chunk lacks
  enough of the user's own (non-pasted) words.
- Weekly recall card on Home: write a passage from memory, compare with notes,
  self-rate; recalls are saved on the chunk and synced.
- Recall history on Home with an eight-week strip and the full list.

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

src/components/WeeklyRecall.jsx

@@ -0,0 +1,77 @@
+// 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 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 });
+    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>
+          <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>
+  );
+}