From f0cbea73fdba12154b7cf2d7759189068feebc3a Mon Sep 17 00:00:00 2001
From: jovanadinic <jovana.dinic@campus.lmu.de>
Date: Mon, 29 Jun 2026 03:54:33 +0200
Subject: [PATCH 1/3] Polish Quill layout panels

---
 app/(tabs)/quill/page.tsx           | 1369 ++++++++++++---------------
 app/globals.css                     |   17 +
 components/quill/editor.tsx         |   99 +-
 components/quill/hue-explainer.tsx  |    2 +-
 components/quill/rewrite-panel.tsx  |  309 +++---
 components/quill/target-widgets.tsx |    9 +-
 6 files changed, 878 insertions(+), 927 deletions(-)

diff --git a/app/(tabs)/quill/page.tsx b/app/(tabs)/quill/page.tsx
index 8c1ff18..789c741 100644
--- a/app/(tabs)/quill/page.tsx
+++ b/app/(tabs)/quill/page.tsx
@@ -1,19 +1,18 @@
 "use client";
 
 import {
-  Check,
+  BarChart3,
+  BookOpen,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   ClipboardCopy,
-  Cloud,
-  CloudOff,
   Download,
   History,
   Lightbulb,
 } from "lucide-react";
-import { Popover } from "radix-ui";
 import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { toast } from "sonner";
-import { ArcChart } from "@/components/quill/arc-chart";
 import {
   type CapturedHue,
   ColourSplash,
@@ -38,22 +37,16 @@ import { useDiff } from "@/components/quill/use-diff";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { hueFromHSL } from "@/lib/colour/placeholder";
-import { driftToTarget } from "@/lib/quill/colour-distance";
 import { type FingerprintMetric, toFingerprint } from "@/lib/quill/fingerprint";
 import { type DraftVersion, pushVersion } from "@/lib/quill/history";
 import { htmlToMarkdown } from "@/lib/quill/markdown";
-import { nameToHsl } from "@/lib/quill/named-colours";
 import { splitParagraphs } from "@/lib/quill/paragraphs";
 import { computeWritingStats, type WritingStats } from "@/lib/quill/stats";
 import { type WidgetSelection, widgetsToTarget } from "@/lib/quill/widgets";
 import { cn } from "@/lib/utils";
 import {
-  type DraftArc,
-  deleteCloudDraft,
-  deriveDraftArc,
   deriveDraftStylometry,
   deriveParagraphHues,
-  deriveTargetColour,
   deriveTextColour,
   explainHue,
   type HueSegment,
@@ -68,47 +61,22 @@ import {
 } from "./actions";
 
 type BandSegment = { id: string; text: string; colour: TextColour | null };
+type LeftPanel = "hue" | "fingerprint" | "neighbours" | null;
+type RightPanel = "versions" | "colour" | "words" | null;
 
 const LOCAL_DRAFT_KEY = "inklings-quill-draft";
 const CLOUD_PREF_KEY = "inklings-quill-cloud-save";
 const CLOUD_SAVE_DEBOUNCE_MS = 2000;
-const PANEL_PRESET_KEY = "inklings-quill-panel-preset";
-const PANEL_CUSTOM_KEY = "inklings-quill-panel-custom";
 const BRUSH_SIZE_KEY = "inklings-quill-brush-size";
 const ANIMATE_KEY = "inklings-quill-animate-rewrite";
 
 // Splash blot size multiplier per brush size — a bigger brush throws more ink.
 const BRUSH_SPLASH_SCALE: Record<number, number> = { 1: 0.7, 3: 1, 7: 1.4 };
 
-type PanelPreset = "essentials" | "analyse" | "rewrite" | "custom";
-
-// Which optional panels each preset activates.
-const PANEL_PRESETS: Record<Exclude<PanelPreset, "custom">, readonly string[]> = {
-  essentials: ["hue", "save"],
-  analyse: ["hue", "fingerprint", "band", "arc", "neighbours"],
-  rewrite: ["target", "version"],
-};
-
-const CUSTOM_PANEL_OPTIONS = [
-  { key: "hue", label: "Hue readout" },
-  { key: "fingerprint", label: "Style fingerprint" },
-  { key: "band", label: "Hue band" },
-  { key: "arc", label: "Story shape" },
-  { key: "neighbours", label: "Nearest authors" },
-  { key: "version", label: "Versions" },
-  { key: "target", label: "Rewrite" },
-  { key: "save", label: "Save to scribe" },
-] as const;
-
-// Default custom panels — on for new users; existing saved sets load from localStorage.
-const DEFAULT_CUSTOM_PANELS = ["hue", "save"];
-
 export default function QuillPage() {
-  const [panelPreset, setPanelPreset] = useState<PanelPreset>("essentials");
-  const [customPanels, setCustomPanels] = useState<Set<string>>(new Set());
   // Local-first per the #45 privacy decision — the draft lives in
   // localStorage by default and only round-trips to the server when the
-  // writer opts in via the SaveSettings toggle below.
+  // writer opts in via the saved cloud preference.
   const [draft, setDraft] = useState("");
   const [readout, setReadout] = useState<TextColour | null>(null);
   const [isPending, startReadout] = useTransition();
@@ -122,7 +90,7 @@ export default function QuillPage() {
   // Cloud-save opt-in (#71). Both pieces of state are mirrored to
   // localStorage so the preference + the draft survive refreshes.
   const [cloudSave, setCloudSave] = useState(false);
-  const [cloudSavedAt, setCloudSavedAt] = useState<Date | null>(null);
+  const [_cloudSavedAt, setCloudSavedAt] = useState<Date | null>(null);
   // Block the autosave effects until the localStorage hydration pass
   // runs — otherwise the first render would wipe a saved draft with
   // the empty default and immediately delete the cloud row.
@@ -132,8 +100,6 @@ export default function QuillPage() {
   // into one target string (PromptCanvas, idea #3) — backend unchanged.
   const [target, setTarget] = useState("");
   const [widgetSelection, setWidgetSelection] = useState<WidgetSelection>({});
-  // The target descriptor resolved to a colour, for the drift meter (#5).
-  const [targetColour, setTargetColour] = useState<TextColour | null>(null);
   // Intensity slider (1–5) replaces the 3-variant fan.
   const [intensity, setIntensity] = useState(3);
   // Single rewrite result — inline diff replaces the modal RewritePanel.
@@ -159,6 +125,8 @@ export default function QuillPage() {
   // Pre-rewrite snapshots. Accepting a rewrite remounts the editor and wipes
   // TipTap's undo stack — this is the way back.
   const [versions, setVersions] = useState<DraftVersion[]>([]);
+  const [leftPanel, setLeftPanel] = useState<LeftPanel>("hue");
+  const [rightPanel, setRightPanel] = useState<RightPanel>("words");
   // Live selection drives the sidebar indicator + persistent editor mark;
   // committed selection is
   // frozen at request-time and used to splice the rewrite back in on accept.
@@ -188,20 +156,22 @@ export default function QuillPage() {
   // or we restore a draft from storage.
   const [editorKey, setEditorKey] = useState(0);
 
-  // Panel visibility — resolved from preset each render.
-  const panelVisible = (key: string): boolean => {
-    if (panelPreset === "custom") return customPanels.has(key);
-    return PANEL_PRESETS[panelPreset].includes(key);
-  };
-  const bandActive = panelVisible("band");
-  const targetActive = panelVisible("target");
+  const targetActive = true;
 
-  // EmoArc hue band (B5). Cache hues by paragraph text so a typing burst only
-  // re-derives the block that actually changed; the band shows the arc across
+  // Paragraph hue strip. Cache hues by paragraph text so a typing burst only
+  // re-derives the block that actually changed; the strip shows the hue trail across
   // the whole draft in Readout mode.
   const hueCacheRef = useRef<Record<string, TextColour | null>>({});
   const [band, setBand] = useState<BandSegment[]>([]);
-  // EmoArc band → editor link (#1). Hovering a band segment highlights its
+  const [showRail, setShowRail] = useState(false);
+  const blockHues = useMemo(
+    () =>
+      band.map((s) =>
+        s.colour ? hueFromHSL(s.colour.hue, s.colour.saturation, s.colour.lightness).css : null,
+      ),
+    [band],
+  );
+  // Paragraph hue strip → editor link. Hovering a band segment highlights its
   // paragraph in the editor (tinted in that segment's own hue); clicking one
   // jumps to it. The editor handle lets the click select the block imperatively.
   const editorRef = useRef<EditorHandle>(null);
@@ -210,9 +180,6 @@ export default function QuillPage() {
   // Live stylometric fingerprint of the draft (style-level). Cheap CPU-only
   // derivation, so we can recompute on the same cadence as the hue readout.
   const [fingerprint, setFingerprint] = useState<FingerprintMetric[] | null>(null);
-  // Emotional arc of the draft (research idea C) — lexicon valence per
-  // sentence, matched to Reagan et al.'s six Gutenberg story shapes.
-  const [arc, setArc] = useState<DraftArc | null>(null);
   // Corpus authors closest to the draft's fingerprint (style-level, S4).
   const [neighbours, setNeighbours] = useState<StyleNeighbour[]>([]);
 
@@ -255,15 +222,8 @@ export default function QuillPage() {
     try {
       const localDraft = window.localStorage.getItem(LOCAL_DRAFT_KEY) ?? "";
       const cloudPref = window.localStorage.getItem(CLOUD_PREF_KEY) === "true";
-      const savedPreset = (window.localStorage.getItem(PANEL_PRESET_KEY) ??
-        "essentials") as PanelPreset;
-      const savedCustom = JSON.parse(
-        window.localStorage.getItem(PANEL_CUSTOM_KEY) ?? JSON.stringify(DEFAULT_CUSTOM_PANELS),
-      ) as string[];
       setDraft(localDraft);
       setCloudSave(cloudPref);
-      setPanelPreset(savedPreset);
-      setCustomPanels(new Set(savedCustom));
       const savedBrush = Number(window.localStorage.getItem(BRUSH_SIZE_KEY));
       if ([1, 3, 7].includes(savedBrush)) setBrushSize(savedBrush);
       const savedAnimate = window.localStorage.getItem(ANIMATE_KEY);
@@ -321,43 +281,6 @@ export default function QuillPage() {
     };
   }, [draft, cloudSave, hydrated]);
 
-  const toggleCloudSave = async (next: boolean) => {
-    setCloudSave(next);
-    try {
-      window.localStorage.setItem(CLOUD_PREF_KEY, String(next));
-    } catch {
-      // Storage can throw in private mode / quota-full; we tolerate it.
-    }
-    if (!next) {
-      // Privacy: when the toggle goes off, the cloud row goes too.
-      await deleteCloudDraft();
-      setCloudSavedAt(null);
-    }
-  };
-
-  const changePanelPreset = (preset: PanelPreset) => {
-    setPanelPreset(preset);
-    try {
-      window.localStorage.setItem(PANEL_PRESET_KEY, preset);
-    } catch {
-      // Storage can throw in private mode / quota-full; we tolerate it.
-    }
-  };
-
-  const toggleCustomPanel = (key: string) => {
-    setCustomPanels((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      try {
-        window.localStorage.setItem(PANEL_CUSTOM_KEY, JSON.stringify([...next]));
-      } catch {
-        // Storage can throw in private mode / quota-full; we tolerate it.
-      }
-      return next;
-    });
-  };
-
   const changeBrushSize = (size: number) => {
     setBrushSize(size);
     try {
@@ -367,15 +290,6 @@ export default function QuillPage() {
     }
   };
 
-  const changeAnimate = (next: boolean) => {
-    setAnimateOnRewrite(next);
-    try {
-      window.localStorage.setItem(ANIMATE_KEY, String(next));
-    } catch {
-      // Storage can throw in private mode / quota-full; we tolerate it.
-    }
-  };
-
   // Tap a swatch to fold its mood into the target (toggle on/off).
   const toggleColour = (key: string) => setSelectedColour((prev) => (prev === key ? null : key));
 
@@ -478,24 +392,6 @@ export default function QuillPage() {
     };
   }, [draft]);
 
-  // Debounced emotional arc — same cadence as the fingerprint; CPU-only
-  // lexicon work, no model call. Null (draft too short / no shape) hides it.
-  useEffect(() => {
-    let cancelled = false;
-    const handle = setTimeout(async () => {
-      try {
-        const result = await deriveDraftArc(draft);
-        if (!cancelled) setArc(result);
-      } catch {
-        // Tolerate a failed derivation — keep the previous arc.
-      }
-    }, 700);
-    return () => {
-      cancelled = true;
-      clearTimeout(handle);
-    };
-  }, [draft]);
-
   // Debounced nearest-author match — longer 1500 ms window since it reads the
   // corpus. Empty (too short, or no corpus loaded) hides the card.
   useEffect(() => {
@@ -514,12 +410,9 @@ export default function QuillPage() {
     };
   }, [draft]);
 
-  // Debounced EmoArc band — 800 ms after the last keystroke, derive a hue per
-  // paragraph (only the uncached ones) and lay them out as an arc. Single-
-  // paragraph drafts fall back to the global swatch, so we only build a band
-  // once there are at least two blocks to compare.
+  // Debounced paragraph hue strip — 800 ms after the last keystroke, derive a hue per
+  // paragraph (only the uncached ones) and lay them out in the Hue card.
   useEffect(() => {
-    if (!bandActive) return;
     let cancelled = false;
     const handle = setTimeout(async () => {
       const paras = splitParagraphs(draft);
@@ -555,46 +448,16 @@ export default function QuillPage() {
       cancelled = true;
       clearTimeout(handle);
     };
-  }, [draft, bandActive]);
+  }, [draft]);
 
-  // Clear the EmoArc highlight whenever the band isn't on screen (mode switch,
+  // Clear the paragraph-strip highlight whenever the band isn't on screen,
   // or the draft dropped below two paragraphs) — the band's own mouse-leave
   // can't fire once it has unmounted, so a stale highlight would otherwise stick.
-  const bandVisible = bandActive && band.length >= 2;
+  const bandVisible = band.length >= 2;
   useEffect(() => {
     if (!bandVisible) setHighlight(null);
   }, [bandVisible]);
 
-  // Resolve the target descriptor to a colour for the drift meter (#5). Common
-  // colour/mood words map locally and for free; anything else the model derives
-  // once, debounced so a burst of typing in the target field is a single call.
-  useEffect(() => {
-    if (!targetActive) return;
-    const aim = composedTarget.trim();
-    if (!aim) {
-      setTargetColour(null);
-      return;
-    }
-    const named = nameToHsl(aim);
-    if (named) {
-      setTargetColour({ ...named, justification: aim });
-      return;
-    }
-    let cancelled = false;
-    const handle = setTimeout(async () => {
-      try {
-        const colour = await deriveTargetColour(aim);
-        if (!cancelled) setTargetColour(colour);
-      } catch {
-        // Keep the last resolved target colour on a transient failure.
-      }
-    }, 600);
-    return () => {
-      cancelled = true;
-      clearTimeout(handle);
-    };
-  }, [composedTarget, targetActive]);
-
   // The single rewrite flow behind every entry point — a colour drag, the
   // Rewrite button, a selection. `span` null means "the whole draft". When
   // `coords` is set the splash plays over them and the diff is revealed only
@@ -738,297 +601,194 @@ export default function QuillPage() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-5xl px-4 py-6 sm:px-6 sm:py-8">
-      <header className="flex flex-wrap items-start justify-between gap-3 sm:items-end sm:gap-4">
-        <div className="min-w-0">
-          <h1 className="font-display text-2xl tracking-tight text-ink-deep sm:text-3xl">
-            The Quill
-          </h1>
-          <p className="mt-1 text-xs leading-snug text-muted-foreground sm:text-sm">
-            Write, and watch the hue of your prose surface. Target a colour to receive nudges.
-          </p>
-        </div>
-        {stats.words > 0 && <ExportControls markdown={markdown} />}
-      </header>
-
-      <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_280px]">
-        <div className="flex flex-col gap-4">
-          {bandVisible && (
-            <HueBand
-              segments={band}
-              onHover={(index, tint) => setHighlight(index == null ? null : { index, tint })}
-              onActivate={(index) => editorRef.current?.focusBlock(index)}
-            />
+    <div className="mx-auto w-full max-w-[118rem] px-4 py-6 sm:px-6 sm:py-8">
+      <div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)_320px] xl:items-start">
+        <aside className="order-2 flex flex-col gap-3 xl:order-1 xl:pt-[4.75rem]">
+          <HueReadout
+            open={leftPanel === "hue"}
+            onToggleOpen={() => setLeftPanel((panel) => (panel === "hue" ? null : "hue"))}
+            targetActive={targetActive}
+            hasText={hasDraftText}
+            wordCount={countWords(draft)}
+            readout={hasDraftText ? readout : null}
+            isPending={isPending}
+            explain={explain}
+            onToggleExplain={() => setExplain((v) => !v)}
+            band={band}
+            showBand={bandVisible}
+            onBandHover={(index, tint) => setHighlight(index == null ? null : { index, tint })}
+            onBandActivate={(index) => editorRef.current?.focusBlock(index)}
+            showRail={showRail}
+            onToggleRail={() => setShowRail((v) => !v)}
+          />
+          {leftPanel === "hue" && explain && (
+            <HueExplainer segments={explanation} tint={readout} isPending={explainPending} />
           )}
-          <Card className="relative overflow-hidden bg-card/60">
-            <div
-              aria-hidden="true"
-              className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-ink-bleed to-transparent opacity-60"
-            />
-            {splash && <ColourSplash splash={splash} />}
-            {(isRewriting || showNudgeReady) && (
-              <div className="pointer-events-none absolute inset-x-0 bottom-5 z-20 flex justify-center">
-                <p className="text-xs italic text-muted-foreground/70">
-                  {isRewriting ? (
-                    <>
-                      <span className="mr-1 inline-block animate-pulse">✦</span>
-                      Rewriting toward target…
-                    </>
-                  ) : (
-                    <>
-                      <span className="mr-1 text-ink-bleed">✓</span>
-                      Nudge ready
-                    </>
-                  )}
-                </p>
-              </div>
-            )}
-            <CardContent className="p-6 sm:p-8">
-              {rewrite && (
-                <div>
-                  <DiffActions
-                    resolvedCount={diff.resolvedCount}
-                    totalChanges={diff.totalChanges}
-                    onApply={() => acceptRewrite(diff.resolvedText())}
-                    onAcceptAll={() => acceptRewrite(rewrite.rewrite)}
-                    onReject={rejectRewrite}
-                    onHighlightEnter={() => setHighlightPending(true)}
-                    onHighlightLeave={() => setHighlightPending(false)}
-                  />
-                  {/* One block-flow prose container mirroring the editor exactly,
-                      so before/diff/after paragraphs collapse margins uniformly. */}
-                  <div className="mt-4 max-h-[min(430px,calc(100vh-31rem))] min-h-[260px] w-full overflow-y-auto overscroll-contain px-3 pt-8 pb-8 font-serif text-lg leading-relaxed text-ink-deep">
-                    {blockBefore.map((para) => (
-                      <p key={para} className="my-3 first:mt-0 text-ink-deep/40 select-none">
-                        {para}
-                      </p>
-                    ))}
-                    <DiffText
-                      segments={diff.segments}
-                      states={diff.states}
-                      setHunkState={diff.setHunkState}
-                      highlightPending={highlightPending}
-                      leadIn={leadIn}
-                      tailOut={tailOut}
-                    />
-                    {blockAfter.map((para) => (
-                      <p key={para} className="my-3 first:mt-0 text-ink-deep/40 select-none">
-                        {para}
-                      </p>
-                    ))}
-                  </div>
+          <StyleFingerprint
+            open={leftPanel === "fingerprint"}
+            onToggleOpen={() =>
+              setLeftPanel((panel) => (panel === "fingerprint" ? null : "fingerprint"))
+            }
+            metrics={fingerprint}
+          />
+          <NeighbourAuthors
+            open={leftPanel === "neighbours"}
+            onToggleOpen={() =>
+              setLeftPanel((panel) => (panel === "neighbours" ? null : "neighbours"))
+            }
+            neighbours={neighbours}
+          />
+        </aside>
+
+        <main className="order-1 flex min-w-0 flex-col gap-4 xl:order-2">
+          <header className="flex flex-wrap items-start justify-between gap-3 sm:items-end sm:gap-4">
+            <div className="min-w-0">
+              <h1 className="font-display text-2xl tracking-tight text-ink-deep sm:text-3xl">
+                The Quill
+              </h1>
+              <p className="mt-1 text-xs leading-snug text-muted-foreground sm:text-sm">
+                Write, and watch the hue of your prose surface. Target a colour to receive nudges.
+              </p>
+            </div>
+            {stats.words > 0 && <ExportControls markdown={markdown} />}
+          </header>
+
+          <div className="flex items-stretch gap-3">
+            <Card className="relative min-w-0 flex-1 overflow-hidden bg-card/60">
+              <div
+                aria-hidden="true"
+                className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-ink-bleed to-transparent opacity-60"
+              />
+              {splash && <ColourSplash splash={splash} />}
+              {(isRewriting || showNudgeReady) && (
+                <div className="pointer-events-none absolute inset-x-0 bottom-5 z-20 flex justify-center">
+                  <p className="text-xs italic text-muted-foreground/70">
+                    {isRewriting ? (
+                      <>
+                        <span className="mr-1 inline-block animate-pulse">✦</span>
+                        Rewriting toward target…
+                      </>
+                    ) : (
+                      <>
+                        <span className="mr-1 text-ink-bleed">✓</span>
+                        Nudge ready
+                      </>
+                    )}
+                  </p>
                 </div>
               )}
-              {/* Editor stays mounted under the diff (hidden) so editorRef stays
+              <CardContent className="p-6 sm:p-8">
+                {rewrite && (
+                  <div>
+                    <DiffActions
+                      resolvedCount={diff.resolvedCount}
+                      totalChanges={diff.totalChanges}
+                      onApply={() => acceptRewrite(diff.resolvedText())}
+                      onAcceptAll={() => acceptRewrite(rewrite.rewrite)}
+                      onReject={rejectRewrite}
+                      onHighlightEnter={() => setHighlightPending(true)}
+                      onHighlightLeave={() => setHighlightPending(false)}
+                    />
+                    {/* One block-flow prose container mirroring the editor exactly,
+                      so before/diff/after paragraphs collapse margins uniformly. */}
+                    <div className="mt-4 max-h-[min(430px,calc(100vh-31rem))] min-h-[260px] w-full overflow-y-auto overscroll-contain px-3 pt-8 pb-8 font-serif text-lg leading-relaxed text-ink-deep">
+                      {blockBefore.map((para) => (
+                        <p key={para} className="my-3 first:mt-0 text-ink-deep/40 select-none">
+                          {para}
+                        </p>
+                      ))}
+                      <DiffText
+                        segments={diff.segments}
+                        states={diff.states}
+                        setHunkState={diff.setHunkState}
+                        highlightPending={highlightPending}
+                        leadIn={leadIn}
+                        tailOut={tailOut}
+                      />
+                      {blockAfter.map((para) => (
+                        <p key={para} className="my-3 first:mt-0 text-ink-deep/40 select-none">
+                          {para}
+                        </p>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {/* Editor stays mounted under the diff (hidden) so editorRef stays
                   live — acceptRewrite's replaceRange splices into the real doc. */}
-              <div className={cn(rewrite && "hidden")}>
-                <Editor
-                  key={editorKey}
-                  ref={editorRef}
-                  initialContent={draft}
-                  placeholder="Write a paragraph and watch the ink reveal itself…"
-                  onChange={setDraft}
-                  onDeriveHue={deriveTextColour}
-                  onCaptureHue={(c) =>
-                    addSwatch({
-                      hsl: { hue: c.hue, saturation: c.saturation, lightness: c.lightness },
-                      phrase: c.justification,
-                    })
-                  }
-                  onRewriteSelection={rewriteSelection}
-                  onSelectionChange={setLiveSelection}
-                  highlightBlock={highlight}
-                  pendingRewriteRange={isRewriting ? committedSelection : liveSelection}
-                  pendingRewriteLoading={isRewriting && !!committedSelection}
-                  onColourDrop={handleColourDrop}
-                  brushRadius={brushRadius}
-                />
-              </div>
-            </CardContent>
-          </Card>
+                <div className={cn(rewrite && "hidden")}>
+                  <Editor
+                    key={editorKey}
+                    ref={editorRef}
+                    initialContent={draft}
+                    placeholder="Write a paragraph and watch the ink reveal itself…"
+                    onChange={setDraft}
+                    onDeriveHue={deriveTextColour}
+                    onCaptureHue={(c) =>
+                      addSwatch({
+                        hsl: { hue: c.hue, saturation: c.saturation, lightness: c.lightness },
+                        phrase: c.justification,
+                      })
+                    }
+                    onRewriteSelection={rewriteSelection}
+                    onSelectionChange={setLiveSelection}
+                    blockHues={showRail && bandVisible ? blockHues : undefined}
+                    highlightBlock={highlight}
+                    pendingRewriteRange={isRewriting ? committedSelection : liveSelection}
+                    pendingRewriteLoading={isRewriting && !!committedSelection}
+                    onColourDrop={handleColourDrop}
+                    brushRadius={brushRadius}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
           {stats.words > 0 && <WritingStatsBar stats={stats} />}
-          {explain && (
-            <HueExplainer segments={explanation} tint={readout} isPending={explainPending} />
-          )}
-        </div>
-
-        <aside className="flex flex-col gap-4">
-          <PanelSelector
-            preset={panelPreset}
-            customPanels={customPanels}
-            onPresetChange={changePanelPreset}
-            onCustomToggle={toggleCustomPanel}
+        </main>
+
+        <aside className="order-3 flex flex-col gap-3 xl:pt-[4.75rem]">
+          <VersionHistory
+            open={rightPanel === "versions"}
+            onToggleOpen={() =>
+              setRightPanel((panel) => (panel === "versions" ? null : "versions"))
+            }
+            versions={versions}
+            onRestore={restoreVersion}
+          />
+          <RewritePanel
+            openPanel={rightPanel === "colour" || rightPanel === "words" ? rightPanel : null}
+            onOpenPanelChange={(panel) => setRightPanel(panel)}
+            selectedColour={selectedColour}
+            onToggleColour={toggleColour}
+            customSwatches={customSwatches}
+            onAddHue={addSwatch}
+            onReplaceHue={replaceSwatch}
+            onRemoveSwatch={removeSwatch}
+            onCaptureText={captureHueFromText}
+            brushSize={brushSize}
+            onBrushChange={changeBrushSize}
+            selection={widgetSelection}
+            onWidgetChange={(key, value) =>
+              setWidgetSelection((prev) => ({ ...prev, [key]: value }))
+            }
+            target={target}
+            onTargetChange={setTarget}
+            composedTarget={composedTarget}
+            intensity={intensity}
+            onIntensityChange={setIntensity}
+            wordCount={countWords(draft)}
+            onRequest={requestRewrite}
+            isPending={isRewriting}
+            hasRewrite={rewrite !== null}
+            selectionText={liveSelection?.text ?? null}
+            onClearSelection={() => setLiveSelection(null)}
+            error={rewriteError}
           />
-          {panelVisible("hue") && (
-            <HueReadout
-              targetActive={targetActive}
-              hasText={hasDraftText}
-              wordCount={countWords(draft)}
-              readout={hasDraftText ? readout : null}
-              isPending={isPending}
-              explain={explain}
-              onToggleExplain={() => setExplain((v) => !v)}
-            />
-          )}
-          {panelVisible("fingerprint") && fingerprint && <StyleFingerprint metrics={fingerprint} />}
-          {panelVisible("arc") && arc && (
-            <ArcChart
-              arc={arc}
-              onHover={(paragraphIndex) =>
-                setHighlight(paragraphIndex == null ? null : { index: paragraphIndex, tint: null })
-              }
-            />
-          )}
-          {panelVisible("neighbours") && neighbours.length > 0 && (
-            <NeighbourAuthors neighbours={neighbours} />
-          )}
-          {panelVisible("version") && (
-            <VersionHistory versions={versions} onRestore={restoreVersion} />
-          )}
-          {panelVisible("target") && (
-            <RewritePanel
-              selectedColour={selectedColour}
-              onToggleColour={toggleColour}
-              customSwatches={customSwatches}
-              onAddHue={addSwatch}
-              onReplaceHue={replaceSwatch}
-              onRemoveSwatch={removeSwatch}
-              onCaptureText={captureHueFromText}
-              brushSize={brushSize}
-              onBrushChange={changeBrushSize}
-              selection={widgetSelection}
-              onWidgetChange={(key, value) =>
-                setWidgetSelection((prev) => ({ ...prev, [key]: value }))
-              }
-              target={target}
-              onTargetChange={setTarget}
-              composedTarget={composedTarget}
-              intensity={intensity}
-              onIntensityChange={setIntensity}
-              animate={animateOnRewrite}
-              onAnimateChange={changeAnimate}
-              wordCount={countWords(draft)}
-              onRequest={requestRewrite}
-              isPending={isRewriting}
-              hasRewrite={rewrite !== null}
-              selectionText={liveSelection?.text ?? null}
-              onClearSelection={() => setLiveSelection(null)}
-              error={rewriteError}
-            />
-          )}
-          {panelVisible("target") && <DriftMeter readout={readout} target={targetColour} />}
-          {panelVisible("save") && (
-            <SaveSettings
-              cloudSave={cloudSave}
-              cloudSavedAt={cloudSavedAt}
-              onToggle={toggleCloudSave}
-            />
-          )}
         </aside>
       </div>
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Panel selector — preset tabs + custom toggles at the top of the sidebar
-// ---------------------------------------------------------------------------
-
-const PRESET_LABELS: Record<PanelPreset, string> = {
-  essentials: "Essentials",
-  analyse: "Analyse",
-  rewrite: "Rewrite",
-  custom: "Custom",
-};
-
-function PanelSelector({
-  preset,
-  customPanels,
-  onPresetChange,
-  onCustomToggle,
-}: {
-  preset: PanelPreset;
-  customPanels: Set<string>;
-  onPresetChange: (p: PanelPreset) => void;
-  onCustomToggle: (key: string) => void;
-}) {
-  const presets = Object.keys(PRESET_LABELS) as PanelPreset[];
-  return (
-    <div className="flex flex-col gap-2">
-      <div
-        role="tablist"
-        aria-label="Panel preset"
-        className="flex gap-0.5 rounded-lg border border-border bg-muted/40 p-0.5"
-      >
-        {presets.map((p) => (
-          <button
-            key={p}
-            type="button"
-            role="tab"
-            aria-selected={preset === p}
-            onClick={() => onPresetChange(p)}
-            className={cn(
-              "flex-1 rounded-md py-1 text-xs transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-              preset === p
-                ? "bg-card text-ink-deep shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {PRESET_LABELS[p]}
-          </button>
-        ))}
-      </div>
-      {preset === "custom" && (
-        <Popover.Root>
-          <Popover.Trigger
-            className={cn(
-              "flex items-center justify-between rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground transition-colors",
-              "hover:bg-muted hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-            )}
-          >
-            <span className="flex items-center gap-1.5">
-              Panels
-              <ChevronDown className="size-3" />
-            </span>
-            <span className="tabular-nums">{customPanels.size} active</span>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content
-              align="start"
-              sideOffset={4}
-              className="z-50 flex w-[var(--radix-popover-trigger-width)] flex-col rounded-md border border-border bg-card p-1 shadow-md"
-            >
-              {CUSTOM_PANEL_OPTIONS.map((opt) => {
-                const on = customPanels.has(opt.key);
-                return (
-                  <button
-                    key={opt.key}
-                    type="button"
-                    aria-pressed={on}
-                    onClick={() => onCustomToggle(opt.key)}
-                    className={cn(
-                      "flex items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-                      on
-                        ? "text-ink-bleed"
-                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
-                    )}
-                  >
-                    <Check className={cn("size-3.5 shrink-0", !on && "opacity-0")} />
-                    {opt.label}
-                  </button>
-                );
-              })}
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
-    </div>
-  );
-}
-
 function countWords(html: string): number {
   // Strip tags, collapse whitespace, count non-empty words. Good enough as a
   // running indicator until #37 wires the real hue readout.
@@ -1050,6 +810,8 @@ function plainText(html: string): string {
 }
 
 function HueReadout({
+  open,
+  onToggleOpen,
   targetActive,
   hasText,
   wordCount,
@@ -1057,7 +819,15 @@ function HueReadout({
   isPending,
   explain,
   onToggleExplain,
+  band,
+  showBand,
+  onBandHover,
+  onBandActivate,
+  showRail,
+  onToggleRail,
 }: {
+  open: boolean;
+  onToggleOpen: () => void;
   targetActive: boolean;
   hasText: boolean;
   wordCount: number;
@@ -1065,6 +835,12 @@ function HueReadout({
   isPending: boolean;
   explain: boolean;
   onToggleExplain: () => void;
+  band: BandSegment[];
+  showBand: boolean;
+  onBandHover?: (index: number | null, tint: string | null) => void;
+  onBandActivate?: (index: number) => void;
+  showRail: boolean;
+  onToggleRail: () => void;
 }) {
   const swatchCss = readout
     ? hueFromHSL(readout.hue, readout.saturation, readout.lightness).css
@@ -1073,66 +849,109 @@ function HueReadout({
 
   return (
     <Card>
-      <CardContent className="flex flex-col gap-3 p-5">
-        <div className="flex items-center gap-3">
-          <HueSwatch swatchCss={swatchCss} showWave={hasText} />
-
-          <div className="flex min-w-0 flex-col">
-            <span className="text-xs uppercase tracking-wider text-muted-foreground">
-              your current hue
-            </span>
-            <span className="font-serif text-base leading-tight text-ink-deep">{label}</span>
+      <CardContent className="flex flex-col gap-2.5 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-3">
+            <HueSwatch swatchCss={swatchCss} showWave={hasText} />
+
+            <div className="flex min-w-0 flex-col">
+              <span className="text-xs uppercase tracking-wider text-muted-foreground">
+                your current hue
+              </span>
+              <span className="font-serif text-base leading-tight text-ink-deep">{label}</span>
+            </div>
           </div>
+          <CollapseButton open={open} label="current hue" onToggle={onToggleOpen} />
         </div>
-        <p className="text-xs italic leading-snug text-muted-foreground">
-          {readout
-            ? !targetActive
-              ? "Keep writing — the hue updates as the ink dries."
-              : "Aim for the target. Suggestions will appear inline."
-            : wordCount < 8
-              ? "Write a few words and the hue will surface."
-              : isPending
-                ? "Reading the ink…"
-                : "Keep writing."}
-        </p>
-        {wordCount > 0 && (
-          <p className="text-[11px] tabular-nums text-muted-foreground">
-            {wordCount} {wordCount === 1 ? "word" : "words"}
-          </p>
-        )}
-        {readout && (
-          <button
-            type="button"
-            aria-pressed={explain}
-            onClick={onToggleExplain}
-            className={cn(
-              "inline-flex h-7 items-center gap-1.5 self-start rounded-md border px-2 text-[11px] transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-              explain
-                ? "border-ink-deep bg-ink-deep text-ink-paper"
-                : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
+
+        {open && (
+          <>
+            <p className="text-xs italic leading-snug text-muted-foreground">
+              {readout
+                ? !targetActive
+                  ? "Keep writing — the hue updates as the ink dries."
+                  : "Aim for the target. Suggestions will appear inline."
+                : wordCount < 8
+                  ? "Write a few words and the hue will surface."
+                  : isPending
+                    ? "Reading the ink…"
+                    : "Keep writing."}
+            </p>
+            <div className="flex min-h-7 items-center justify-between gap-3">
+              {wordCount > 0 ? (
+                <p className="text-[11px] tabular-nums text-muted-foreground">
+                  {wordCount} {wordCount === 1 ? "word" : "words"}
+                </p>
+              ) : (
+                <span aria-hidden="true" />
+              )}
+              {readout && (
+                <button
+                  type="button"
+                  aria-pressed={explain}
+                  onClick={onToggleExplain}
+                  className={cn(
+                    "inline-flex h-7 items-center gap-1.5 rounded-md border px-2 text-[11px] transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                    explain
+                      ? "border-ink-deep bg-ink-deep text-ink-paper"
+                      : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  <Lightbulb className="size-3.5" />
+                  {explain ? "Hide why" : "Why this colour?"}
+                </button>
+              )}
+            </div>
+            {showBand && (
+              <div className="flex flex-col gap-2 border-t border-border/60 pt-3">
+                <HueArcStrip
+                  segments={band}
+                  onHover={onBandHover}
+                  onActivate={onBandActivate}
+                  showRail={showRail}
+                  onToggleRail={onToggleRail}
+                />
+              </div>
             )}
-          >
-            <Lightbulb className="size-3.5" />
-            {explain ? "Hide why" : "Why this colour?"}
-          </button>
+          </>
         )}
       </CardContent>
     </Card>
   );
 }
 
-/**
- * The EmoArc hue band — a horizontal arc of one hue per paragraph, so the
- * writer sees how the stylistic temperature rises and falls across the whole
- * draft, not just its average (Amin's "Interactive Emotion Graph"). Hovering a
- * segment dims the rest and surfaces that paragraph's reading below — the band
- * is an index into the text, not just decoration.
- */
-function HueBand({
+function CollapseButton({
+  open,
+  label,
+  onToggle,
+}: {
+  open: boolean;
+  label: string;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-expanded={open}
+      aria-label={`${open ? "Collapse" : "Expand"} ${label}`}
+      onClick={onToggle}
+      className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground transition-all hover:bg-muted/60 hover:text-foreground active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+    >
+      <ChevronDown
+        aria-hidden="true"
+        className={cn("size-3.5 transition-transform", open && "rotate-180")}
+      />
+    </button>
+  );
+}
+
+function HueArcStrip({
   segments,
   onHover,
   onActivate,
+  showRail,
+  onToggleRail,
 }: {
   segments: BandSegment[];
   /** Hovered/focused segment index + its hue (null on leave) — drives the
@@ -1140,9 +959,24 @@ function HueBand({
   onHover?: (index: number | null, tint: string | null) => void;
   /** Clicked/activated segment index — jumps the editor to that paragraph. */
   onActivate?: (index: number) => void;
+  showRail: boolean;
+  onToggleRail: () => void;
 }) {
+  const pageSize = 10;
+  const [page, setPage] = useState(0);
+  const pageCount = Math.max(1, Math.ceil(segments.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const start = currentPage * pageSize;
+  const visibleSegments = segments.slice(start, start + pageSize);
+  const end = start + visibleSegments.length;
   const [hovered, setHovered] = useState<number | null>(null);
   const active = hovered != null ? segments[hovered] : null;
+  const hasPrevious = currentPage > 0;
+  const hasNext = currentPage < pageCount - 1;
+
+  useEffect(() => {
+    if (page !== currentPage) setPage(currentPage);
+  }, [currentPage, page]);
 
   const enter = (index: number, tint: string | null) => {
     setHovered(index);
@@ -1154,68 +988,109 @@ function HueBand({
   };
 
   return (
-    <Card className="bg-card/60">
-      <CardContent className="flex flex-col gap-2 p-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">Hue band</h2>
-          <span className="text-[11px] tabular-nums text-muted-foreground">
-            {segments.length} paragraphs
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
+          across paragraphs
+        </h2>
+        <div className="flex items-center gap-1.5 text-[11px] tabular-nums text-muted-foreground">
+          {pageCount > 1 && (
+            <button
+              type="button"
+              aria-label="Show previous paragraphs"
+              disabled={!hasPrevious}
+              onClick={() => setPage((value) => Math.max(0, value - 1))}
+              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+            >
+              <ChevronLeft aria-hidden="true" className="size-3.5" />
+            </button>
+          )}
+          <span>
+            {start + 1}-{end}
           </span>
+          {pageCount > 1 && (
+            <button
+              type="button"
+              aria-label="Show next paragraphs"
+              disabled={!hasNext}
+              onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}
+              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+            >
+              <ChevronRight aria-hidden="true" className="size-3.5" />
+            </button>
+          )}
         </div>
-        <div className="flex h-9 gap-0.5">
-          {segments.map((seg, i) => {
-            const css = seg.colour
-              ? hueFromHSL(seg.colour.hue, seg.colour.saturation, seg.colour.lightness).css
-              : undefined;
-            return (
-              <button
-                type="button"
-                key={seg.id}
-                draggable={!!seg.colour}
-                onDragStart={(e) => {
-                  if (!seg.colour) return;
-                  const hue: CapturedHue = {
-                    hsl: {
-                      hue: seg.colour.hue,
-                      saturation: seg.colour.saturation,
-                      lightness: seg.colour.lightness,
-                    },
-                    phrase: seg.colour.justification,
-                  };
-                  e.dataTransfer.setData(HUE_CAPTURE_MIME, JSON.stringify(hue));
-                  e.dataTransfer.effectAllowed = "copy";
-                }}
-                onMouseEnter={() => enter(i, css ?? null)}
-                onMouseLeave={leave}
-                onFocus={() => enter(i, css ?? null)}
-                onBlur={leave}
-                onClick={() => onActivate?.(i)}
-                title="Jump to this paragraph — or drag its hue onto a Rewrite swatch"
-                aria-label={
-                  seg.colour
-                    ? `Paragraph ${i + 1}: ${seg.colour.justification}. Jump to it.`
-                    : `Paragraph ${i + 1}: too short to read. Jump to it.`
-                }
-                className={cn(
-                  "h-full flex-1 rounded-[2px] transition-all duration-200 ease-out",
-                  "first:rounded-l-md last:rounded-r-md focus-visible:outline-none",
-                  hovered === i && "z-10 ring-2 ring-ink-deep/25",
-                  hovered != null && hovered !== i && "opacity-40",
-                )}
-                style={{ backgroundColor: css ?? "var(--muted)" }}
-              />
-            );
-          })}
-        </div>
-        <p className="min-h-4 text-[11px] italic leading-snug text-muted-foreground transition-opacity duration-200">
+      </div>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: pointer-only cleanup; keyboard clears via each button's onBlur. Leave lives on the row, not per-segment, so crossing the gap between buttons keeps the last highlight instead of flickering to null. */}
+      <div className="flex h-9 gap-0.5" onMouseLeave={leave}>
+        {visibleSegments.map((seg, visibleIndex) => {
+          const absoluteIndex = start + visibleIndex;
+          const css = seg.colour
+            ? hueFromHSL(seg.colour.hue, seg.colour.saturation, seg.colour.lightness).css
+            : undefined;
+          return (
+            <button
+              type="button"
+              key={seg.id}
+              draggable={!!seg.colour}
+              onDragStart={(e) => {
+                if (!seg.colour) return;
+                const hue: CapturedHue = {
+                  hsl: {
+                    hue: seg.colour.hue,
+                    saturation: seg.colour.saturation,
+                    lightness: seg.colour.lightness,
+                  },
+                  phrase: seg.colour.justification,
+                };
+                e.dataTransfer.setData(HUE_CAPTURE_MIME, JSON.stringify(hue));
+                e.dataTransfer.effectAllowed = "copy";
+              }}
+              onMouseEnter={() => enter(absoluteIndex, css ?? null)}
+              onFocus={() => enter(absoluteIndex, css ?? null)}
+              onBlur={leave}
+              onClick={() => onActivate?.(absoluteIndex)}
+              title="Jump to this paragraph — or drag its hue onto a Rewrite swatch"
+              aria-label={
+                seg.colour
+                  ? `Paragraph ${absoluteIndex + 1}: ${seg.colour.justification}. Jump to it.`
+                  : `Paragraph ${absoluteIndex + 1}: too short to read. Jump to it.`
+              }
+              className={cn(
+                "h-full flex-1 rounded-[2px] transition-all duration-200 ease-out",
+                "first:rounded-l-md last:rounded-r-md focus-visible:outline-none",
+                hovered === absoluteIndex && "z-10 ring-2 ring-ink-deep/25",
+                hovered != null && hovered !== absoluteIndex && "opacity-40",
+              )}
+              style={{ backgroundColor: css ?? "var(--muted)" }}
+            />
+          );
+        })}
+      </div>
+      <div className="flex items-start justify-between gap-5">
+        <p className="min-h-4 min-w-0 flex-1 text-[11px] italic leading-snug text-muted-foreground transition-opacity duration-200">
           {active
             ? active.colour
               ? `"${truncate(active.text)}" — ${active.colour.justification}`
               : `"${truncate(active.text)}" — too short to read`
-            : "Hover the arc to read each paragraph’s hue."}
+            : "Hover the strip to read each paragraph’s hue."}
         </p>
-      </CardContent>
-    </Card>
+        <button
+          type="button"
+          aria-pressed={showRail}
+          onClick={onToggleRail}
+          className={cn(
+            "inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border px-2 text-[11px] transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+            showRail
+              ? "border-ink-deep bg-ink-deep text-ink-paper"
+              : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
+          )}
+        >
+          {showRail ? "Hide from text" : "Show beside text"}
+        </button>
+      </div>
+    </div>
   );
 }
 
@@ -1294,47 +1169,79 @@ function WritingStatsBar({ stats }: { stats: WritingStats }) {
 // unless it's an exact match.
 const closeness = (d: number) => Math.max(0, 1 - d);
 
-function NeighbourAuthors({ neighbours }: { neighbours: StyleNeighbour[] }) {
+function NeighbourAuthors({
+  open,
+  onToggleOpen,
+  neighbours,
+}: {
+  open: boolean;
+  onToggleOpen: () => void;
+  neighbours: StyleNeighbour[];
+}) {
   return (
     <Card>
-      <CardContent className="flex flex-col gap-2.5 p-5">
-        <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
-          Closest in the Inkwell
-        </h2>
-        <ul className="flex flex-col gap-2">
-          {neighbours.map((n) => {
-            const css = n.hue
-              ? hueFromHSL(n.hue.hue, n.hue.saturation, n.hue.lightness).css
-              : "var(--ink-faded)";
-            return (
-              <li key={n.bookId} className="flex flex-col gap-1">
-                <div className="flex items-center gap-2">
-                  <span
-                    aria-hidden="true"
-                    className="size-2.5 shrink-0 rounded-full"
-                    style={{ backgroundColor: css }}
-                  />
-                  <span className="min-w-0 flex-1 truncate text-xs text-ink-deep" title={n.title}>
-                    {n.title}
-                  </span>
-                  <span className="shrink-0 text-[11px] text-muted-foreground">{n.authorName}</span>
-                </div>
-                <div className="h-1 overflow-hidden rounded-full bg-muted">
-                  <div
-                    className="h-full rounded-full transition-[width] duration-500 ease-out"
-                    style={{
-                      width: `${Math.max(4, closeness(n.distance) * 100)}%`,
-                      backgroundColor: css,
-                    }}
-                  />
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-        <p className="text-[11px] italic leading-snug text-muted-foreground">
-          By classical stylometry — the same distance the Inkwell is laid out on.
-        </p>
+      <CardContent className="flex flex-col gap-2.5 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 className="flex items-center gap-1.5 text-[10px] tracking-widest text-muted-foreground uppercase">
+              <BookOpen aria-hidden="true" className="size-3.5" />
+              Closest in the Inkwell
+            </h2>
+            <p className="mt-1 text-[11px] italic leading-snug text-muted-foreground">
+              Nearby voices by classical stylometry.
+            </p>
+          </div>
+          <CollapseButton open={open} label="closest in the Inkwell" onToggle={onToggleOpen} />
+        </div>
+        {open && (
+          <>
+            {neighbours.length > 0 ? (
+              <ul className="flex flex-col gap-2">
+                {neighbours.map((n) => {
+                  const css = n.hue
+                    ? hueFromHSL(n.hue.hue, n.hue.saturation, n.hue.lightness).css
+                    : "var(--ink-faded)";
+                  return (
+                    <li key={n.bookId} className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
+                        <span
+                          aria-hidden="true"
+                          className="size-2.5 shrink-0 rounded-full"
+                          style={{ backgroundColor: css }}
+                        />
+                        <span
+                          className="min-w-0 flex-1 truncate text-xs text-ink-deep"
+                          title={n.title}
+                        >
+                          {n.title}
+                        </span>
+                        <span className="shrink-0 text-[11px] text-muted-foreground">
+                          {n.authorName}
+                        </span>
+                      </div>
+                      <div className="h-1 overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full transition-[width] duration-500 ease-out"
+                          style={{
+                            width: `${Math.max(4, closeness(n.distance) * 100)}%`,
+                            backgroundColor: css,
+                          }}
+                        />
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <p className="text-xs italic leading-snug text-muted-foreground">
+                Write a little more and the nearest voices will surface here.
+              </p>
+            )}
+            <p className="text-[11px] italic leading-snug text-muted-foreground">
+              By classical stylometry — the same distance the Inkwell is laid out on.
+            </p>
+          </>
+        )}
       </CardContent>
     </Card>
   );
@@ -1346,103 +1253,55 @@ function NeighbourAuthors({ neighbours }: { neighbours: StyleNeighbour[] }) {
  * ease toward their value so each keystroke nudges the shape rather than
  * snapping it, making the numbers feel like a live reading of the ink.
  */
-function StyleFingerprint({ metrics }: { metrics: FingerprintMetric[] }) {
-  return (
-    <Card>
-      <CardContent className="flex flex-col gap-2.5 p-5">
-        <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
-          Style fingerprint
-        </h2>
-        <ul className="flex flex-col gap-2">
-          {metrics.map((m) => (
-            <li key={m.key} className="flex flex-col gap-1" title={m.detail}>
-              <div className="flex items-baseline justify-between gap-2">
-                <span className="text-xs text-ink-deep">{m.label}</span>
-                <span className="text-[11px] tabular-nums text-muted-foreground">
-                  {m.value.toFixed(2)}
-                </span>
-              </div>
-              <div className="h-1.5 overflow-hidden rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full bg-ink-bleed/70 transition-[width] duration-500 ease-out"
-                  style={{ width: `${Math.max(2, m.value * 100)}%` }}
-                />
-              </div>
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-    </Card>
-  );
-}
-
-/**
- * Drift-to-target meter (#5) — a live bar showing how close the draft's hue has
- * drifted toward the target's. Both sit on the same HSL scale, so the gap is
- * meaningful; the bar fills as the writer edits toward the target, turning the
- * abstract "style space" into direct, playful feedback. Shown only in target
- * mode, once a target colour has resolved.
- */
-function DriftMeter({
-  readout,
-  target,
+function StyleFingerprint({
+  open,
+  onToggleOpen,
+  metrics,
 }: {
-  readout: TextColour | null;
-  target: TextColour | null;
+  open: boolean;
+  onToggleOpen: () => void;
+  metrics: FingerprintMetric[] | null;
 }) {
-  if (!target) return null;
-  const proximity = readout ? driftToTarget(readout, target) : 0;
-  const pct = Math.round(proximity * 100);
-  const targetCss = hueFromHSL(target.hue, target.saturation, target.lightness).css;
-  const draftCss = readout
-    ? hueFromHSL(readout.hue, readout.saturation, readout.lightness).css
-    : "var(--muted)";
-
   return (
     <Card>
-      <CardContent className="flex flex-col gap-2.5 p-5">
-        <div className="flex items-center justify-between">
-          <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
-            Drift to target
-          </h2>
-          <span className="text-[11px] tabular-nums text-muted-foreground">
-            {readout ? `${pct}%` : "—"}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          <span
-            aria-hidden="true"
-            className="size-3 shrink-0 rounded-full border border-border"
-            style={{ backgroundColor: draftCss }}
-            title="your current hue"
-          />
-          <div
-            className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted"
-            role="progressbar"
-            aria-valuenow={readout ? pct : 0}
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-label={`Drift toward ${target.justification}`}
-          >
-            <div
-              className="h-full rounded-full transition-[width] duration-500 ease-out"
-              style={{ width: `${Math.max(2, proximity * 100)}%`, backgroundColor: targetCss }}
-            />
+      <CardContent className="flex flex-col gap-2.5 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 className="flex items-center gap-1.5 text-[10px] tracking-widest text-muted-foreground uppercase">
+              <BarChart3 aria-hidden="true" className="size-3.5" />
+              Style fingerprint
+            </h2>
+            <p className="mt-1 text-[11px] italic leading-snug text-muted-foreground">
+              A live shape of your prose rhythm and voice.
+            </p>
           </div>
-          <span
-            aria-hidden="true"
-            className="size-3 shrink-0 rounded-full border border-border"
-            style={{ backgroundColor: targetCss }}
-            title="target hue"
-          />
+          <CollapseButton open={open} label="style fingerprint" onToggle={onToggleOpen} />
         </div>
-        <p className="text-[11px] italic leading-snug text-muted-foreground">
-          {readout
-            ? pct >= 90
-              ? "You're there — the ink matches your target."
-              : `${pct}% to "${target.justification}". Keep nudging.`
-            : "Write a few words and the meter will find your target."}
-        </p>
+        {open &&
+          (metrics ? (
+            <ul className="flex flex-col gap-2">
+              {metrics.map((m) => (
+                <li key={m.key} className="flex flex-col gap-1" title={m.detail}>
+                  <div className="flex items-baseline justify-between gap-2">
+                    <span className="text-xs text-ink-deep">{m.label}</span>
+                    <span className="text-[11px] tabular-nums text-muted-foreground">
+                      {m.value.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                    <div
+                      className="h-full rounded-full bg-ink-bleed/70 transition-[width] duration-500 ease-out"
+                      style={{ width: `${Math.max(2, m.value * 100)}%` }}
+                    />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-xs italic leading-snug text-muted-foreground">
+              Write a little more and the fingerprint will draw itself.
+            </p>
+          ))}
       </CardContent>
     </Card>
   );
@@ -1454,123 +1313,79 @@ function DriftMeter({
  * draft first, so going back is itself reversible.
  */
 function VersionHistory({
+  open,
+  onToggleOpen,
   versions,
   onRestore,
 }: {
+  open: boolean;
+  onToggleOpen: () => void;
   versions: DraftVersion[];
   onRestore: (version: DraftVersion) => void;
 }) {
   return (
     <Card>
-      <CardContent className="flex flex-col gap-2.5 p-5">
-        <h2 className="flex items-center gap-1.5 text-[10px] tracking-widest text-muted-foreground uppercase">
-          <History aria-hidden="true" className="size-3.5" /> Versions
-        </h2>
-        <ul className="flex flex-col gap-1.5">
-          {versions.map((version) => (
-            <li key={`${version.takenAt}:${version.html.length}`}>
-              <button
-                type="button"
-                onClick={() => onRestore(version)}
-                title="Restore this draft (the current draft is kept as a version)"
-                className={cn(
-                  "flex w-full items-baseline justify-between gap-2 rounded-sm px-1 py-0.5 text-left text-xs",
-                  "transition-colors hover:bg-muted/60 hover:text-ink-deep",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-                )}
-              >
-                <span className="truncate text-ink-deep">
-                  {version.sourceTarget ? `toward "${version.sourceTarget}"` : "snapshot"}
-                </span>
-                <span className="shrink-0 tabular-nums text-muted-foreground">
-                  {new Date(version.takenAt).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                  })}
-                </span>
-              </button>
-            </li>
-          ))}
-        </ul>
-        <p className="text-[11px] italic leading-snug text-muted-foreground">
-          Drafts replaced by a rewrite land here — click one to bring it back.
-        </p>
-      </CardContent>
-    </Card>
-  );
-}
-
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-/**
- * The cloud-save toggle + status line. Off by default (privacy decision
- * from #45) — local persistence is implicit and unsignalled. When the
- * writer opts in, a status line ticks "saved · Xs ago" so it feels alive.
- */
-function SaveSettings({
-  cloudSave,
-  cloudSavedAt,
-  onToggle,
-}: {
-  cloudSave: boolean;
-  cloudSavedAt: Date | null;
-  onToggle: (next: boolean) => void;
-}) {
-  // Re-render every 10 s while a cloud save exists so "Xs ago" stays
-  // honest without bursting renders during typing bursts.
-  const [, setTick] = useState(0);
-  useEffect(() => {
-    if (!cloudSavedAt) return;
-    const id = window.setInterval(() => setTick((t) => t + 1), 10_000);
-    return () => window.clearInterval(id);
-  }, [cloudSavedAt]);
-
-  return (
-    <Card>
-      <CardContent className="flex flex-col gap-2.5 p-5">
-        <div className="flex items-start gap-3">
-          {cloudSave ? (
-            <Cloud aria-hidden="true" className="size-5 shrink-0 text-ink-bleed" />
-          ) : (
-            <CloudOff aria-hidden="true" className="size-5 shrink-0 text-muted-foreground" />
-          )}
-          <label className="flex min-w-0 flex-1 cursor-pointer items-start justify-between gap-3">
-            <span className="flex min-w-0 flex-col">
-              <span className="text-sm font-medium text-ink-deep">Save to my scribe</span>
-              <span className="text-xs leading-snug text-muted-foreground">
-                {cloudSave
-                  ? "Drafts sync across devices on this scribe."
-                  : "Drafts stay on this device only."}
-              </span>
-            </span>
-            <input
-              type="checkbox"
-              checked={cloudSave}
-              onChange={(e) => onToggle(e.target.checked)}
-              className="mt-1 size-4 cursor-pointer accent-ink-bleed"
-              aria-label="Save drafts to my scribe (sync across devices)"
+      <CardContent className="flex flex-col gap-2.5 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 gap-2">
+            <History aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+            <div className="min-w-0">
+              <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
+                Versions
+              </h2>
+              <p className="mt-1 text-[11px] italic leading-snug text-muted-foreground">
+                Drafts replaced by a rewrite land here — click one to bring it back.
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            aria-expanded={open}
+            aria-label={`${open ? "Collapse" : "Expand"} versions`}
+            onClick={onToggleOpen}
+            className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground transition-all hover:bg-muted/60 hover:text-foreground active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+          >
+            <ChevronDown
+              aria-hidden="true"
+              className={cn("size-3.5 transition-transform", open && "rotate-180")}
             />
-          </label>
+          </button>
         </div>
-        {cloudSave && (
-          <p className="text-[11px] tabular-nums text-muted-foreground">
-            {cloudSavedAt ? `saved · ${relativeTime(cloudSavedAt)}` : "waiting for first save…"}
-          </p>
+        {open && versions.length > 0 && (
+          <ul className="flex flex-col gap-1.5">
+            {versions.map((version) => (
+              <li key={`${version.takenAt}:${version.html.length}`}>
+                <button
+                  type="button"
+                  onClick={() => onRestore(version)}
+                  title="Restore this draft (the current draft is kept as a version)"
+                  className={cn(
+                    "flex w-full items-baseline justify-between gap-2 rounded-sm px-1 py-0.5 text-left text-xs",
+                    "transition-colors hover:bg-muted/60 hover:text-ink-deep",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                  )}
+                >
+                  <span className="truncate text-ink-deep">
+                    {version.sourceTarget ? `toward "${version.sourceTarget}"` : "snapshot"}
+                  </span>
+                  <span className="shrink-0 tabular-nums text-muted-foreground">
+                    {new Date(version.takenAt).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
         )}
       </CardContent>
     </Card>
   );
 }
 
-function relativeTime(d: Date): string {
-  const seconds = Math.max(0, Math.round((Date.now() - d.getTime()) / 1000));
-  if (seconds < 5) return "just now";
-  if (seconds < 60) return `${seconds}s ago`;
-  const minutes = Math.round(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
 /**
diff --git a/app/globals.css b/app/globals.css
index 340a85f..e6db56f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -383,6 +383,20 @@
     box-shadow: inset 0 0 0 1px
       color-mix(in oklch, var(--emoarc-tint, var(--ink-bleed)) 24%, transparent);
   }
+  .quill-hue-rail {
+    position: relative;
+    padding-left: 0.9rem;
+  }
+  .quill-hue-rail::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.18em;
+    bottom: 0.18em;
+    width: 3px;
+    border-radius: 2px;
+    background: var(--hue-rail, transparent);
+  }
   .quill-pending-rewrite {
     border-radius: 0.18rem;
     background: color-mix(in oklch, var(--ink-bleed) 18%, transparent);
@@ -421,5 +435,8 @@
         background-color 200ms ease-out,
         box-shadow 200ms ease-out;
     }
+    .quill-hue-rail::before {
+      transition: background-color 200ms ease-out;
+    }
   }
 }
diff --git a/components/quill/editor.tsx b/components/quill/editor.tsx
index fbd4aba..917040c 100644
--- a/components/quill/editor.tsx
+++ b/components/quill/editor.tsx
@@ -91,6 +91,8 @@ type EditorProps = {
   onChange?: (html: string) => void;
   /** Called whenever the selection changes — null when cursor only. */
   onSelectionChange?: (sel: SelectionRange | null) => void;
+  /** Called with the top-level text blocks currently visible in the editor scrollport. */
+  onVisibleBlocksChange?: (indices: number[]) => void;
   /** Visible placeholder when the editor is empty. */
   placeholder?: string;
   className?: string;
@@ -108,6 +110,10 @@ type EditorProps = {
    * the ink accent. Pass null to clear the highlight.
    */
   highlightBlock?: { index: number; tint?: string | null } | null;
+  /** Per-paragraph hue rail: one CSS colour per text block (index-aligned to the
+   *  hue band; null = too short to read), painting a left-accent on each block.
+   *  Omit or pass [] to hide the rail. */
+  blockHues?: (string | null)[];
   /** Selection being rewritten by the parent; stays painted while focus moves away. */
   pendingRewriteRange?: SelectionRange | null;
   /** Show local loading feedback beside the pending range. */
@@ -236,6 +242,41 @@ const EmoArcHighlight = Extension.create({
   },
 });
 
+// Per-paragraph hue rail — a coloured left-accent on each text block, in that
+// block's own hue. The CSS colours are pushed in from React via a meta-only
+// transaction, so the decoration reflows with the document without measuring.
+const hueRailKey = new PluginKey<(string | null)[]>("hueRail");
+const HueRail = Extension.create({
+  name: "hueRail",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<(string | null)[]>({
+        key: hueRailKey,
+        state: {
+          init: () => [],
+          apply(tr, value) {
+            const meta = tr.getMeta(hueRailKey) as (string | null)[] | undefined;
+            return meta === undefined ? value : meta;
+          },
+        },
+        props: {
+          decorations(state) {
+            const hues = hueRailKey.getState(state);
+            if (!hues || hues.length === 0) return null;
+            const decos = textblockRanges(state.doc).map((r, i) =>
+              Decoration.node(r.from - 1, r.to + 1, {
+                class: "quill-hue-rail",
+                style: `--hue-rail:${hues[i] ?? "transparent"}`,
+              }),
+            );
+            return DecorationSet.create(state.doc, decos);
+          },
+        },
+      }),
+    ];
+  },
+});
+
 // Keeps a selected passage visually connected to the loading rewrite after
 // focus leaves the editor and the browser's native selection paint disappears.
 const PendingRewriteHighlight = Extension.create({
@@ -295,12 +336,14 @@ export function Editor({
   initialContent = "",
   onChange,
   onSelectionChange,
+  onVisibleBlocksChange,
   placeholder,
   className,
   onDeriveHue,
   onCaptureHue,
   onRewriteSelection,
   highlightBlock,
+  blockHues,
   pendingRewriteRange,
   pendingRewriteLoading = false,
   onColourDrop,
@@ -311,11 +354,12 @@ export function Editor({
   const [hasSelection, setHasSelection] = useState(false);
   // Focus mode dims every block but the one holding the caret.
   const [focusMode, setFocusMode] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
   // Holds the latest "read the hue" handler so the editor's keymap (captured
   // once on mount) can call the current closure.
   const readHueRef = useRef<() => void>(() => undefined);
   const editor = useEditor({
-    extensions: [StarterKit, FocusActiveBlock, EmoArcHighlight, PendingRewriteHighlight],
+    extensions: [StarterKit, FocusActiveBlock, EmoArcHighlight, HueRail, PendingRewriteHighlight],
     content: initialContent,
     onSelectionUpdate: ({ editor: ed }) => {
       const { from, to, empty } = ed.state.selection;
@@ -525,6 +569,17 @@ export function Editor({
     el?.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "nearest" });
   }, [editor, highlightIndex, highlightTint]);
 
+  // Push the per-paragraph hue rail into the plugin (meta-only, no doc change).
+  const railRef = useRef<string>("");
+  useEffect(() => {
+    if (!editor) return;
+    const hues = blockHues ?? [];
+    const key = hues.join("|");
+    if (key === railRef.current) return;
+    railRef.current = key;
+    editor.view.dispatch(editor.state.tr.setMeta(hueRailKey, hues));
+  }, [editor, blockHues]);
+
   // ProseMirror keeps its range when the editor loses DOM focus, so the highlight
   // vanishes but the selection (and the Rewrite button's target) silently lives
   // on. Collapse it on any pointer-down outside the editor, except on interactive
@@ -562,6 +617,47 @@ export function Editor({
     el?.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "nearest" });
   }, [editor, pendingRewriteRange, pendingRewriteLoading]);
 
+  useEffect(() => {
+    if (!editor || !onVisibleBlocksChange) return;
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    let frame = 0;
+    let last = "";
+
+    const publishVisibleBlocks = () => {
+      frame = 0;
+      const viewport = scrollEl.getBoundingClientRect();
+      const visible = textblockRanges(editor.state.doc)
+        .map((range, index) => {
+          const at = editor.view.domAtPos(range.from).node;
+          const el = at instanceof HTMLElement ? at : at.parentElement;
+          if (!el) return null;
+          const rect = el.getBoundingClientRect();
+          return rect.bottom > viewport.top && rect.top < viewport.bottom ? index : null;
+        })
+        .filter((index): index is number => index !== null);
+      const key = visible.join(",");
+      if (key !== last) {
+        last = key;
+        onVisibleBlocksChange(visible);
+      }
+    };
+
+    const schedule = () => {
+      if (frame) return;
+      frame = window.requestAnimationFrame(publishVisibleBlocks);
+    };
+
+    schedule();
+    scrollEl.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      scrollEl.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [editor, onVisibleBlocksChange]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -630,6 +726,7 @@ export function Editor({
         <ContextMenuTrigger asChild>
           {/* biome-ignore lint/a11y/noStaticElementInteractions: pointer-only colour-drop zone over the editable area; the same rewrite is keyboard-reachable via the Rewrite panel */}
           <div
+            ref={scrollRef}
             onDragOver={handleColourDragOver}
             onDrop={handleColourDrop}
             className={cn(
diff --git a/components/quill/hue-explainer.tsx b/components/quill/hue-explainer.tsx
index bba619d..f100bef 100644
--- a/components/quill/hue-explainer.tsx
+++ b/components/quill/hue-explainer.tsx
@@ -39,7 +39,7 @@ export function HueExplainer({
 
   return (
     <Card className="bg-card/60">
-      <CardContent className="flex flex-col gap-3 p-5 sm:p-6">
+      <CardContent className="flex flex-col gap-2.5 p-4">
         <div className="flex flex-wrap items-center justify-between gap-2">
           <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
             Why this colour
diff --git a/components/quill/rewrite-panel.tsx b/components/quill/rewrite-panel.tsx
index 051455a..1145053 100644
--- a/components/quill/rewrite-panel.tsx
+++ b/components/quill/rewrite-panel.tsx
@@ -1,7 +1,17 @@
 "use client";
 
-import { Brush, Check, ChevronDown, Loader2, Plus, Sparkles, X } from "lucide-react";
-import { useMemo, useState } from "react";
+import {
+  BookOpen,
+  Brush,
+  Check,
+  ChevronDown,
+  Loader2,
+  Palette,
+  Plus,
+  Sparkles,
+  X,
+} from "lucide-react";
+import { type ReactNode, useMemo, useState } from "react";
 import {
   ALL_PIGMENTS,
   blendHues,
@@ -31,9 +41,9 @@ const INTENSITY_LABELS: Record<number, string> = {
 // Brush = how many sentences the colour drop covers. Selection always wins over
 // this; it only governs a drop point. The brush icon grows with the size.
 const BRUSH_SIZES = [
-  { size: 1, iconClass: "size-3", title: "Fine — just the sentence" },
-  { size: 3, iconClass: "size-4", title: "Medium — sentence ± 1" },
-  { size: 7, iconClass: "size-5", title: "Broad — sentence ± 3" },
+  { size: 1, iconClass: "size-3", title: "Sentence — only the sentence you drop on" },
+  { size: 3, iconClass: "size-4", title: "Nearby passage — sentence plus nearby context" },
+  { size: 7, iconClass: "size-5", title: "Wider passage — a broader section around the drop" },
 ] as const;
 
 function countWords(s: string): number {
@@ -41,14 +51,14 @@ function countWords(s: string): number {
 }
 
 /**
- * The fused rewrite widget. Three stacked parts: a collapsible colour area (one
- * pigment grid + the beaker that mixes new hues), a collapsible words area (style
- * facets + free-text brief), and a fixed footer (intensity, the animate toggle
- * and the rewrite button). Colour and words compose into one target — colour is
- * optional. Dragging a swatch onto the prose is the quick gesture; clicking one
- * toggles it into the composed target instead.
+ * The fused rewrite widget. Colour and Words are separate accordion sections
+ * controlled by the page's right rail state. Colour is optional; dragging a
+ * swatch onto the prose is the quick gesture, while tapping one folds it into
+ * the composed target.
  */
 export function RewritePanel({
+  openPanel,
+  onOpenPanelChange,
   selectedColour,
   onToggleColour,
   customSwatches,
@@ -65,8 +75,6 @@ export function RewritePanel({
   composedTarget,
   intensity,
   onIntensityChange,
-  animate,
-  onAnimateChange,
   wordCount,
   onRequest,
   isPending,
@@ -75,6 +83,8 @@ export function RewritePanel({
   onClearSelection,
   error,
 }: {
+  openPanel: "colour" | "words" | null;
+  onOpenPanelChange: (panel: "colour" | "words" | null) => void;
   selectedColour: string | null;
   onToggleColour: (key: string) => void;
   customSwatches: CustomSwatch[];
@@ -91,8 +101,6 @@ export function RewritePanel({
   composedTarget: string;
   intensity: number;
   onIntensityChange: (n: number) => void;
-  animate: boolean;
-  onAnimateChange: (b: boolean) => void;
   wordCount: number;
   onRequest: () => void;
   isPending: boolean;
@@ -101,8 +109,8 @@ export function RewritePanel({
   onClearSelection: () => void;
   error: string | null;
 }) {
-  const [colourOpen, setColourOpen] = useState(true);
-  const [wordsOpen, setWordsOpen] = useState(true);
+  const colourOpen = openPanel === "colour";
+  const wordsOpen = openPanel === "words";
 
   // Mix mode: the beaker is open and grid taps add parts instead of toggling the
   // target. `recipe` is parts keyed by pigment key / custom-swatch id; `pour`
@@ -174,45 +182,45 @@ export function RewritePanel({
       : "Suggest a nudge";
 
   return (
-    <Card>
-      <CardContent className="flex flex-col gap-3 p-5">
-        {/* §1 — colour: one grid of pigments + your own swatches, and the beaker
-            that mixes new ones. Collapsing hides the brush row + helper only. */}
-        <section className="flex flex-col gap-2">
+    <>
+      <Card>
+        <CardContent className="flex flex-col gap-2.5 p-4">
           <SectionHeader
             label="Colour"
+            description="Drag a colour onto text, or tap one to aim the nudge."
+            icon={<Palette className="size-4" />}
             open={colourOpen}
-            onToggle={() => setColourOpen((v) => !v)}
-          />
-          <SwatchGrid
-            customSwatches={customSwatches}
-            selectedColour={selectedColour}
-            mixOpen={mixOpen}
-            recipe={recipe}
-            onTap={onTap}
-            onRemovePart={removePart}
-            onStartMix={startMix}
-            onRemoveSwatch={onRemoveSwatch}
-            onReplaceHue={onReplaceHue}
-            onAddHue={onAddHue}
-            onCaptureText={onCaptureText}
+            onToggle={() => onOpenPanelChange(colourOpen ? null : "colour")}
           />
-          {mixOpen && (
-            <Beaker
-              fillCss={blendCss}
-              totalParts={totalParts}
-              phrase={mixWords}
-              pour={pour}
-              canPour={!!blend}
-              onAccept={acceptMix}
-              onCancel={closeMix}
-            />
-          )}
           {colourOpen && (
             <>
-              <div className="flex items-center justify-between gap-2">
+              <SwatchGrid
+                customSwatches={customSwatches}
+                selectedColour={selectedColour}
+                mixOpen={mixOpen}
+                recipe={recipe}
+                onTap={onTap}
+                onRemovePart={removePart}
+                onStartMix={startMix}
+                onRemoveSwatch={onRemoveSwatch}
+                onReplaceHue={onReplaceHue}
+                onAddHue={onAddHue}
+                onCaptureText={onCaptureText}
+              />
+              {mixOpen && (
+                <Beaker
+                  fillCss={blendCss}
+                  totalParts={totalParts}
+                  phrase={mixWords}
+                  pour={pour}
+                  canPour={!!blend}
+                  onAccept={acceptMix}
+                  onCancel={closeMix}
+                />
+              )}
+              <div className="flex items-center justify-between gap-2 pt-1">
                 <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-                  Brush
+                  Brush range
                 </span>
                 <div className="flex items-center gap-0.5 rounded-md border border-border bg-muted/40 p-0.5">
                   {BRUSH_SIZES.map((b) => (
@@ -237,17 +245,23 @@ export function RewritePanel({
                 </div>
               </div>
               <p className="text-[11px] italic leading-snug text-muted-foreground">
-                Drag a colour onto a word for an instant nudge, or tap one to fold its mood into the
-                target. Press <Plus className="inline size-3" /> to mix a new hue — or drop a
-                selection (or a Hue-band segment) onto a swatch to capture one from your prose.
+                Tap a colour to add its mood, or drag it onto prose for a local nudge. Use{" "}
+                <Plus className="inline size-3" /> to mix or capture a hue.
               </p>
             </>
           )}
-        </section>
+        </CardContent>
+      </Card>
 
-        {/* §2 — words: style facets + a free-text brief. */}
-        <section className="flex flex-col gap-2 border-t border-border/60 pt-3">
-          <SectionHeader label="Words" open={wordsOpen} onToggle={() => setWordsOpen((v) => !v)} />
+      <Card>
+        <CardContent className="flex flex-col gap-2.5 p-4">
+          <SectionHeader
+            label="Words"
+            description="Build a target in words, then nudge when ready."
+            icon={<BookOpen className="size-4" />}
+            open={wordsOpen}
+            onToggle={() => onOpenPanelChange(wordsOpen ? null : "words")}
+          />
           {wordsOpen && (
             <>
               <TargetWidgets selection={selection} onChange={onWidgetChange} />
@@ -259,113 +273,118 @@ export function RewritePanel({
                   type="text"
                   value={target}
                   onChange={(e) => onTargetChange(e.target.value)}
-                  placeholder="warm, melancholy · Hemingway-like · lush, baroque"
+                  placeholder="warm, melancholy · Hemingway-like · lush"
                   className="h-9 rounded-md border border-border bg-card px-3 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-ring/40 focus:outline-none"
                 />
               </label>
-            </>
-          )}
-        </section>
-
-        {/* §3 — fixed footer. */}
-        <div className="flex flex-col gap-3 border-t border-border/60 pt-3">
-          {composedTarget ? (
-            <p className="text-[11px] leading-snug text-muted-foreground">
-              Aiming for: <span className="italic">{composedTarget}</span>
-            </p>
-          ) : (
-            <p className="text-[11px] italic leading-snug text-muted-foreground">
-              Pick a colour, facets, a brief — or any mix. Claude rewrites toward the combination.
-            </p>
-          )}
-          <div className="flex flex-col gap-1.5">
-            <div className="flex items-baseline justify-between">
-              <span className="text-xs uppercase tracking-wider text-muted-foreground">
-                intensity
-              </span>
-              <span className="text-xs text-ink-bleed">{INTENSITY_LABELS[intensity]}</span>
-            </div>
-            <input
-              type="range"
-              min={1}
-              max={5}
-              step={1}
-              value={intensity}
-              onChange={(e) => onIntensityChange(Number(e.target.value))}
-              className="w-full accent-ink-bleed"
-              aria-label="Rewrite intensity"
-            />
-            <div className="flex justify-between text-[10px] text-muted-foreground">
-              <span>Whisper</span>
-              <span>Full</span>
-            </div>
-          </div>
-          <label className="flex cursor-pointer items-center gap-2 text-[11px] text-muted-foreground">
-            <input
-              type="checkbox"
-              checked={animate}
-              onChange={(e) => onAnimateChange(e.target.checked)}
-              className="size-3.5 cursor-pointer accent-ink-bleed"
-            />
-            Splash animation on rewrite
-          </label>
-          {selectionText && (
-            <div className="flex items-center gap-1 rounded-md bg-ink-bleed/10 px-2 py-1 text-[11px] text-ink-bleed">
-              <span className="min-w-0 flex-1 truncate italic">
-                &ldquo;
-                {selectionText.length > 48 ? `${selectionText.slice(0, 48)}…` : selectionText}
-                &rdquo;
-              </span>
-              <button
-                type="button"
-                aria-label="Clear selection"
-                onClick={onClearSelection}
-                className="shrink-0 rounded p-0.5 hover:bg-ink-bleed/20 transition-colors"
+              <div className="border-t border-border/60" />
+              <div className="flex flex-col gap-1.5">
+                <div className="flex items-baseline justify-between">
+                  <span className="text-xs uppercase tracking-wider text-muted-foreground">
+                    intensity
+                  </span>
+                  <span className="text-xs text-ink-bleed">{INTENSITY_LABELS[intensity]}</span>
+                </div>
+                <input
+                  type="range"
+                  min={1}
+                  max={5}
+                  step={1}
+                  value={intensity}
+                  onChange={(e) => onIntensityChange(Number(e.target.value))}
+                  className="w-full accent-ink-bleed"
+                  aria-label="Rewrite intensity"
+                />
+                <div className="flex justify-between text-[10px] text-muted-foreground">
+                  <span>Whisper</span>
+                  <span>Full</span>
+                </div>
+              </div>
+              {selectionText && (
+                <div className="flex items-center gap-1 rounded-md bg-ink-bleed/10 px-2 py-1 text-[11px] text-ink-bleed">
+                  <span className="min-w-0 flex-1 truncate italic">
+                    &ldquo;
+                    {selectionText.length > 48 ? `${selectionText.slice(0, 48)}…` : selectionText}
+                    &rdquo;
+                  </span>
+                  <button
+                    type="button"
+                    aria-label="Clear selection"
+                    onClick={onClearSelection}
+                    className="shrink-0 rounded p-0.5 hover:bg-ink-bleed/20 transition-colors"
+                  >
+                    <X className="size-3" />
+                  </button>
+                </div>
+              )}
+              <Button
+                size="sm"
+                variant={canAsk ? "default" : "outline"}
+                onClick={onRequest}
+                disabled={!canAsk}
+                className={cn(
+                  "w-full",
+                  canAsk && "bg-ink-bleed text-ink-paper hover:bg-ink-bleed/90",
+                )}
               >
-                <X className="size-3" />
-              </button>
-            </div>
-          )}
-          <Button size="sm" variant="outline" onClick={onRequest} disabled={!canAsk}>
-            {isPending ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Sparkles className="size-4" />
-            )}
-            {buttonLabel}
-          </Button>
-          {isPending && (
-            <p className="text-[11px] italic text-muted-foreground">Claude is rewriting…</p>
+                {isPending ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Sparkles className="size-4" />
+                )}
+                {buttonLabel}
+              </Button>
+              {isPending && (
+                <p className="text-[11px] italic text-muted-foreground">Claude is rewriting…</p>
+              )}
+              {error && <p className="text-[11px] italic text-destructive">{error}</p>}
+            </>
           )}
-          {error && <p className="text-[11px] italic text-destructive">{error}</p>}
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </>
   );
 }
 
 function SectionHeader({
   label,
+  description,
+  icon,
   open,
   onToggle,
 }: {
   label: string;
+  description: string;
+  icon: ReactNode;
   open: boolean;
   onToggle: () => void;
 }) {
   return (
-    <button
-      type="button"
-      aria-expanded={open}
-      onClick={onToggle}
-      className="flex items-center justify-between text-[10px] tracking-widest text-muted-foreground uppercase transition-colors hover:text-foreground focus-visible:outline-none"
-    >
-      {label}
-      <ChevronDown
-        aria-hidden="true"
-        className={cn("size-3.5 transition-transform", open && "rotate-180")}
-      />
-    </button>
+    <div className="flex items-start justify-between gap-3">
+      <div className="flex min-w-0 gap-2">
+        <span className="mt-0.5 shrink-0 text-muted-foreground" aria-hidden="true">
+          {icon}
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">{label}</h2>
+          <p className="mt-1 text-[11px] italic leading-snug text-muted-foreground">
+            {description}
+          </p>
+        </div>
+      </div>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-label={`${open ? "Collapse" : "Expand"} ${label}`}
+        onClick={onToggle}
+        className="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground transition-all hover:bg-muted/60 hover:text-foreground active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+      >
+        <ChevronDown
+          aria-hidden="true"
+          className={cn("size-3.5 transition-transform", open && "rotate-180")}
+        />
+      </button>
+    </div>
   );
 }
 
diff --git a/components/quill/target-widgets.tsx b/components/quill/target-widgets.tsx
index ff51ad4..068f31b 100644
--- a/components/quill/target-widgets.tsx
+++ b/components/quill/target-widgets.tsx
@@ -19,7 +19,10 @@ export function TargetWidgets({
   return (
     <div className="flex flex-col gap-2.5">
       {STYLE_WIDGETS.map((widget) => (
-        <div key={widget.key} className="flex flex-col gap-1">
+        <div
+          key={widget.key}
+          className="grid grid-cols-[3.65rem_minmax(0,1fr)] items-center gap-1.5"
+        >
           <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
             {widget.label}
           </span>
@@ -29,7 +32,7 @@ export function TargetWidgets({
             onValueChange={(value) => onChange(widget.key, value || null)}
             variant="outline"
             size="sm"
-            className="flex-wrap justify-start"
+            className="w-full flex-nowrap justify-start"
             aria-label={`${widget.label} facet`}
           >
             {widget.options.map((option) => (
@@ -37,7 +40,7 @@ export function TargetWidgets({
                 key={option.value}
                 value={option.value}
                 title={option.phrase}
-                className="h-7 px-2 text-xs"
+                className="h-7 min-w-0 flex-1 px-1 text-xs"
               >
                 {option.label}
               </ToggleGroupItem>

From 57e622fa5e3ee83ee40c7bc696faea35a52866cf Mon Sep 17 00:00:00 2001
From: jovanadinic <jovana.dinic@campus.lmu.de>
Date: Thu, 2 Jul 2026 03:35:22 +0200
Subject: [PATCH 2/3] Polish Quill layout and colour controls

---
 app/(tabs)/quill/page.tsx           | 532 +++++++++++++++++++++-------
 app/globals.css                     |  70 +++-
 components/quill/editor.tsx         |  58 ++-
 components/quill/rewrite-panel.tsx  | 268 +++++++++-----
 components/quill/target-widgets.tsx |   2 +-
 lib/quill/blocks.ts                 |  40 +++
 6 files changed, 736 insertions(+), 234 deletions(-)

diff --git a/app/(tabs)/quill/page.tsx b/app/(tabs)/quill/page.tsx
index 789c741..1ba9e11 100644
--- a/app/(tabs)/quill/page.tsx
+++ b/app/(tabs)/quill/page.tsx
@@ -6,10 +6,14 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
-  ClipboardCopy,
+  Clipboard,
   Download,
+  Eye,
+  EyeOff,
   History,
   Lightbulb,
+  Pencil,
+  Trash2,
 } from "lucide-react";
 import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { toast } from "sonner";
@@ -113,8 +117,8 @@ export default function QuillPage() {
   // timing; the overlay just paints whatever phase it's handed.
   const [splash, setSplash] = useState<SplashState | null>(null);
   // Fused rewrite controls: an optionally-selected mood colour folded into the
-  // target, the brush size (sentences a colour drop covers), and whether a
-  // button-triggered rewrite plays the splash. Brush + animate persist.
+  // target, the brush size (sentence / passage / whole) for colour drops, and
+  // whether a button-triggered rewrite plays the splash. Brush + animate persist.
   const [selectedColour, setSelectedColour] = useState<string | null>(null);
   const [brushSize, setBrushSize] = useState(3);
   const [animateOnRewrite, setAnimateOnRewrite] = useState(true);
@@ -125,8 +129,10 @@ export default function QuillPage() {
   // Pre-rewrite snapshots. Accepting a rewrite remounts the editor and wipes
   // TipTap's undo stack — this is the way back.
   const [versions, setVersions] = useState<DraftVersion[]>([]);
+  const [versionLabels, setVersionLabels] = useState<Record<string, string>>({});
+  const [currentVersionKey, setCurrentVersionKey] = useState<string | null>(null);
   const [leftPanel, setLeftPanel] = useState<LeftPanel>("hue");
-  const [rightPanel, setRightPanel] = useState<RightPanel>("words");
+  const [rightPanel, setRightPanel] = useState<RightPanel>("colour");
   // Live selection drives the sidebar indicator + persistent editor mark;
   // committed selection is
   // frozen at request-time and used to splice the rewrite back in on accept.
@@ -163,6 +169,7 @@ export default function QuillPage() {
   // the whole draft in Readout mode.
   const hueCacheRef = useRef<Record<string, TextColour | null>>({});
   const [band, setBand] = useState<BandSegment[]>([]);
+  const [bandPending, setBandPending] = useState(false);
   const [showRail, setShowRail] = useState(false);
   const blockHues = useMemo(
     () =>
@@ -204,9 +211,6 @@ export default function QuillPage() {
     const w = customSwatches.find((w) => w.id === key);
     return w ? capturedHueCss(w) : NEUTRAL_INK_CSS;
   };
-  // Brush size (sentences) → window radius each side: 1→0, 3→1, 7→3.
-  const brushRadius = Math.floor((brushSize - 1) / 2);
-
   // Live writing stats (F1) — cheap, derived from the draft's plain text.
   const stats = useMemo(
     () => computeWritingStats(draft.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ")),
@@ -265,6 +269,10 @@ export default function QuillPage() {
     }
   }, [draft, hydrated]);
 
+  useEffect(() => {
+    if (versions.length === 0 && rightPanel === "versions") setRightPanel("colour");
+  }, [versions.length, rightPanel]);
+
   // Debounced cloud autosave when the toggle is on. The 2 s wait keeps a
   // burst of typing from firing dozens of writes.
   useEffect(() => {
@@ -293,6 +301,55 @@ export default function QuillPage() {
   // Tap a swatch to fold its mood into the target (toggle on/off).
   const toggleColour = (key: string) => setSelectedColour((prev) => (prev === key ? null : key));
 
+  const renameVersionLabel = (key: string, label: string) => {
+    const next = label.trim();
+    setVersionLabels((labels) => {
+      const copy = { ...labels };
+      if (next) copy[key] = next;
+      else delete copy[key];
+      return copy;
+    });
+  };
+
+  const deleteVersion = (version: DraftVersion) => {
+    const key = versionKey(version);
+    const index = versions.findIndex((entry) => versionKey(entry) === key);
+    if (index === -1) return;
+
+    const isOriginal = index === versions.length - 1;
+    const isCurrent = currentVersionKey === key || draft === version.html;
+    const nextVersions = versions.filter((entry) => versionKey(entry) !== key);
+
+    if (isOriginal) {
+      setDraft("");
+      setEditorKey((k) => k + 1);
+      setCurrentVersionKey(null);
+    } else if (isCurrent) {
+      const previousVersion = versions[index + 1] ?? nextVersions[nextVersions.length - 1] ?? null;
+      if (previousVersion) {
+        setDraft(previousVersion.html);
+        setCurrentVersionKey(versionKey(previousVersion));
+        setEditorKey((k) => k + 1);
+      } else {
+        setDraft("");
+        setCurrentVersionKey(null);
+        setEditorKey((k) => k + 1);
+      }
+    }
+
+    setVersions(nextVersions);
+    setVersionLabels((labels) => {
+      const copy = { ...labels };
+      delete copy[key];
+      return copy;
+    });
+    setRewrite(null);
+    setRewriteError(null);
+    setShowNudgeReady(false);
+    setCommittedSelection(null);
+    setLiveSelection(null);
+  };
+
   // Add a new custom swatch from a capture (right-click / Hue-band drag) or a mix.
   const addSwatch = (hue: CapturedHue) =>
     setCustomSwatches((s) => [...s, { ...hue, id: crypto.randomUUID() }]);
@@ -414,10 +471,15 @@ export default function QuillPage() {
   // paragraph (only the uncached ones) and lay them out in the Hue card.
   useEffect(() => {
     let cancelled = false;
+    const parasBeforeDebounce = splitParagraphs(draft);
+    setBandPending(parasBeforeDebounce.length >= 2);
     const handle = setTimeout(async () => {
       const paras = splitParagraphs(draft);
       if (paras.length < 2) {
-        if (!cancelled) setBand([]);
+        if (!cancelled) {
+          setBand([]);
+          setBandPending(false);
+        }
         return;
       }
       const cache = hueCacheRef.current;
@@ -443,6 +505,7 @@ export default function QuillPage() {
           colour: hueCacheRef.current[p] ?? null,
         })),
       );
+      setBandPending(false);
     }, 800);
     return () => {
       cancelled = true;
@@ -551,19 +614,21 @@ export default function QuillPage() {
       coords: { origin: detail.origin, ripples: detail.ripples },
       colourCss: resolved.css,
       scale: BRUSH_SPLASH_SCALE[brushSize] ?? 1,
-      tooShort: "Drop on a fuller passage — the rewrite needs at least 8 words around the word.",
+      tooShort: "Write a little more before dropping a colour — rewrites need at least 8 words.",
     });
   };
 
   const acceptRewrite = (text: string) => {
     // Snapshot the draft being replaced — the remount below wipes TipTap undo.
-    setVersions((stack) =>
-      pushVersion(stack, { html: draft, sourceTarget: composedTarget, takenAt: Date.now() }),
-    );
+    const takenAt = Date.now();
+    const previousVersion: DraftVersion = { html: draft, sourceTarget: "", takenAt };
+    let acceptedHtml: string | null = null;
     if (committedSelection) {
       // The editor splices as an open ProseMirror slice, so the rewrite merges
       // at the cut points (no host-paragraph splitting), whatever the span.
-      editorRef.current?.replaceRange(committedSelection.from, committedSelection.to, text);
+      acceptedHtml =
+        editorRef.current?.replaceRange(committedSelection.from, committedSelection.to, text) ??
+        null;
     } else {
       const asBlocks = text
         .split(/\n\s*\n+/)
@@ -571,9 +636,19 @@ export default function QuillPage() {
         .filter(Boolean)
         .map((p) => `<p>${escapeHtml(p)}</p>`)
         .join("");
+      acceptedHtml = asBlocks;
       setDraft(asBlocks);
       setEditorKey((k) => k + 1);
     }
+    const acceptedVersion = acceptedHtml
+      ? { html: acceptedHtml, sourceTarget: composedTarget, takenAt: takenAt + 1 }
+      : null;
+    setVersions((stack) => {
+      let next = pushVersionOnce(stack, previousVersion);
+      if (acceptedVersion) next = pushVersionOnce(next, acceptedVersion);
+      return next;
+    });
+    if (acceptedVersion) setCurrentVersionKey(versionKey(acceptedVersion));
     setRewrite(null);
     setShowNudgeReady(false);
     setCommittedSelection(null);
@@ -581,11 +656,19 @@ export default function QuillPage() {
   };
 
   const restoreVersion = (version: DraftVersion) => {
+    const key = versionKey(version);
+    if (currentVersionKey === key || draft === version.html) {
+      setCurrentVersionKey(key);
+      return;
+    }
     // The current draft becomes a version too, so a restore is reversible.
     setVersions((stack) =>
-      pushVersion(stack, { html: draft, sourceTarget: "", takenAt: Date.now() }),
+      stack.some((entry) => entry.html === draft)
+        ? [...stack]
+        : pushVersion(stack, { html: draft, sourceTarget: "", takenAt: Date.now() }),
     );
     setDraft(version.html);
+    setCurrentVersionKey(key);
     setRewrite(null);
     setRewriteError(null);
     setShowNudgeReady(false);
@@ -616,6 +699,7 @@ export default function QuillPage() {
             onToggleExplain={() => setExplain((v) => !v)}
             band={band}
             showBand={bandVisible}
+            bandPending={bandPending}
             onBandHover={(index, tint) => setHighlight(index == null ? null : { index, tint })}
             onBandActivate={(index) => editorRef.current?.focusBlock(index)}
             showRail={showRail}
@@ -736,7 +820,7 @@ export default function QuillPage() {
                     pendingRewriteRange={isRewriting ? committedSelection : liveSelection}
                     pendingRewriteLoading={isRewriting && !!committedSelection}
                     onColourDrop={handleColourDrop}
-                    brushRadius={brushRadius}
+                    brushSize={brushSize}
                   />
                 </div>
               </CardContent>
@@ -746,14 +830,21 @@ export default function QuillPage() {
         </main>
 
         <aside className="order-3 flex flex-col gap-3 xl:pt-[4.75rem]">
-          <VersionHistory
-            open={rightPanel === "versions"}
-            onToggleOpen={() =>
-              setRightPanel((panel) => (panel === "versions" ? null : "versions"))
-            }
-            versions={versions}
-            onRestore={restoreVersion}
-          />
+          {versions.length > 0 && (
+            <VersionHistory
+              open={rightPanel === "versions"}
+              onToggleOpen={() =>
+                setRightPanel((panel) => (panel === "versions" ? null : "versions"))
+              }
+              versions={versions}
+              currentHtml={draft}
+              labels={versionLabels}
+              currentKey={currentVersionKey}
+              onRestore={restoreVersion}
+              onRename={renameVersionLabel}
+              onDelete={deleteVersion}
+            />
+          )}
           <RewritePanel
             openPanel={rightPanel === "colour" || rightPanel === "words" ? rightPanel : null}
             onOpenPanelChange={(panel) => setRightPanel(panel)}
@@ -821,6 +912,7 @@ function HueReadout({
   onToggleExplain,
   band,
   showBand,
+  bandPending,
   onBandHover,
   onBandActivate,
   showRail,
@@ -837,6 +929,7 @@ function HueReadout({
   onToggleExplain: () => void;
   band: BandSegment[];
   showBand: boolean;
+  bandPending: boolean;
   onBandHover?: (index: number | null, tint: string | null) => void;
   onBandActivate?: (index: number) => void;
   showRail: boolean;
@@ -877,41 +970,36 @@ function HueReadout({
                     ? "Reading the ink…"
                     : "Keep writing."}
             </p>
-            <div className="flex min-h-7 items-center justify-between gap-3">
-              {wordCount > 0 ? (
-                <p className="text-[11px] tabular-nums text-muted-foreground">
-                  {wordCount} {wordCount === 1 ? "word" : "words"}
-                </p>
-              ) : (
-                <span aria-hidden="true" />
-              )}
-              {readout && (
-                <button
-                  type="button"
-                  aria-pressed={explain}
-                  onClick={onToggleExplain}
-                  className={cn(
-                    "inline-flex h-7 items-center gap-1.5 rounded-md border px-2 text-[11px] transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-                    explain
-                      ? "border-ink-deep bg-ink-deep text-ink-paper"
-                      : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
-                  )}
-                >
-                  <Lightbulb className="size-3.5" />
-                  {explain ? "Hide why" : "Why this colour?"}
-                </button>
-              )}
-            </div>
-            {showBand && (
+            {readout && (
+              <button
+                type="button"
+                aria-pressed={explain}
+                onClick={onToggleExplain}
+                className={cn(
+                  "inline-flex h-7 items-center gap-1.5 self-start rounded-md border px-2 text-[11px] transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                  explain
+                    ? "border-ink-deep bg-ink-deep text-ink-paper"
+                    : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
+                )}
+              >
+                <Lightbulb className="size-3.5" />
+                {explain ? "Hide why" : "Why this colour?"}
+              </button>
+            )}
+            {(showBand || bandPending) && (
               <div className="flex flex-col gap-2 border-t border-border/60 pt-3">
-                <HueArcStrip
-                  segments={band}
-                  onHover={onBandHover}
-                  onActivate={onBandActivate}
-                  showRail={showRail}
-                  onToggleRail={onToggleRail}
-                />
+                {showBand ? (
+                  <HueArcStrip
+                    segments={band}
+                    onHover={onBandHover}
+                    onActivate={onBandActivate}
+                    showRail={showRail}
+                    onToggleRail={onToggleRail}
+                  />
+                ) : (
+                  <HueArcStripShimmer showRail={showRail} onToggleRail={onToggleRail} />
+                )}
               </div>
             )}
           </>
@@ -946,6 +1034,67 @@ function CollapseButton({
   );
 }
 
+function HueArcStripShimmer({
+  showRail,
+  onToggleRail,
+}: {
+  showRail: boolean;
+  onToggleRail: () => void;
+}) {
+  const pieces = [
+    { id: "opening", width: "flex-[1.2]" },
+    { id: "turn", width: "flex-[0.9]" },
+    { id: "middle", width: "flex-[1.4]" },
+    { id: "lift", width: "flex-[1]" },
+    { id: "tail", width: "flex-[0.8]" },
+  ];
+  return (
+    <div className="flex flex-col gap-2" aria-busy="true" aria-live="polite">
+      <div className="flex items-center justify-between">
+        <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
+          across paragraphs
+        </h2>
+        <button
+          type="button"
+          aria-pressed={showRail}
+          aria-label={
+            showRail ? "Hide paragraph hues beside text" : "Show paragraph hues beside text"
+          }
+          title={showRail ? "Hide beside text" : "Show beside text"}
+          onClick={onToggleRail}
+          className={cn(
+            "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border transition-all",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 active:scale-95",
+            showRail
+              ? "border-ink-deep bg-ink-deep text-ink-paper hover:bg-ink-deep/90"
+              : "border-border text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+          )}
+        >
+          {showRail ? <Eye className="size-3.5" /> : <EyeOff className="size-3.5" />}
+        </button>
+      </div>
+      <div className="flex h-9 gap-0.5 overflow-hidden rounded-md">
+        {pieces.map((piece, index) => (
+          <div
+            key={piece.id}
+            className={cn(
+              "relative h-full overflow-hidden bg-muted/60",
+              piece.width,
+              index === 0 && "rounded-l-md",
+              index === pieces.length - 1 && "rounded-r-md",
+            )}
+          >
+            <div className="absolute inset-0 -translate-x-full animate-[inklings-shimmer_1.4s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-ink-bleed/18 to-transparent" />
+          </div>
+        ))}
+      </div>
+      <p className="text-[11px] italic leading-snug text-muted-foreground">
+        Reading paragraph hues…
+      </p>
+    </div>
+  );
+}
+
 function HueArcStrip({
   segments,
   onHover,
@@ -993,33 +1142,24 @@ function HueArcStrip({
         <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
           across paragraphs
         </h2>
-        <div className="flex items-center gap-1.5 text-[11px] tabular-nums text-muted-foreground">
-          {pageCount > 1 && (
-            <button
-              type="button"
-              aria-label="Show previous paragraphs"
-              disabled={!hasPrevious}
-              onClick={() => setPage((value) => Math.max(0, value - 1))}
-              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
-            >
-              <ChevronLeft aria-hidden="true" className="size-3.5" />
-            </button>
-          )}
-          <span>
-            {start + 1}-{end}
-          </span>
-          {pageCount > 1 && (
-            <button
-              type="button"
-              aria-label="Show next paragraphs"
-              disabled={!hasNext}
-              onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}
-              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
-            >
-              <ChevronRight aria-hidden="true" className="size-3.5" />
-            </button>
+        <button
+          type="button"
+          aria-pressed={showRail}
+          aria-label={
+            showRail ? "Hide paragraph hues beside text" : "Show paragraph hues beside text"
+          }
+          title={showRail ? "Hide beside text" : "Show beside text"}
+          onClick={onToggleRail}
+          className={cn(
+            "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border transition-all",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 active:scale-95",
+            showRail
+              ? "border-ink-deep bg-ink-deep text-ink-paper hover:bg-ink-deep/90"
+              : "border-border text-muted-foreground hover:bg-muted/60 hover:text-foreground",
           )}
-        </div>
+        >
+          {showRail ? <Eye className="size-3.5" /> : <EyeOff className="size-3.5" />}
+        </button>
       </div>
       {/* biome-ignore lint/a11y/noStaticElementInteractions: pointer-only cleanup; keyboard clears via each button's onBlur. Leave lives on the row, not per-segment, so crossing the gap between buttons keeps the last highlight instead of flickering to null. */}
       <div className="flex h-9 gap-0.5" onMouseLeave={leave}>
@@ -1067,7 +1207,37 @@ function HueArcStrip({
           );
         })}
       </div>
-      <div className="flex items-start justify-between gap-5">
+      <div className="flex items-center justify-between gap-3 text-[11px] text-muted-foreground">
+        <div className="flex items-center gap-1.5 tabular-nums">
+          <span>
+            {start + 1}-{end}
+          </span>
+          <span className="opacity-60">of {segments.length}</span>
+        </div>
+        {pageCount > 1 && (
+          <div className="flex items-center gap-0.5">
+            <button
+              type="button"
+              aria-label="Show previous paragraphs"
+              disabled={!hasPrevious}
+              onClick={() => setPage((value) => Math.max(0, value - 1))}
+              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+            >
+              <ChevronLeft aria-hidden="true" className="size-3.5" />
+            </button>
+            <button
+              type="button"
+              aria-label="Show next paragraphs"
+              disabled={!hasNext}
+              onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}
+              className="rounded p-0.5 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+            >
+              <ChevronRight aria-hidden="true" className="size-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="flex items-start">
         <p className="min-h-4 min-w-0 flex-1 text-[11px] italic leading-snug text-muted-foreground transition-opacity duration-200">
           {active
             ? active.colour
@@ -1075,20 +1245,6 @@ function HueArcStrip({
               : `"${truncate(active.text)}" — too short to read`
             : "Hover the strip to read each paragraph’s hue."}
         </p>
-        <button
-          type="button"
-          aria-pressed={showRail}
-          onClick={onToggleRail}
-          className={cn(
-            "inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border px-2 text-[11px] transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-            showRail
-              ? "border-ink-deep bg-ink-deep text-ink-paper"
-              : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
-          )}
-        >
-          {showRail ? "Hide from text" : "Show beside text"}
-        </button>
       </div>
     </div>
   );
@@ -1118,9 +1274,9 @@ function ExportControls({ markdown }: { markdown: string }) {
     toast.success("Downloaded inkling-draft.md");
   };
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-2">
       <Button size="sm" variant="outline" onClick={copy} title="Copy the draft as Markdown">
-        <ClipboardCopy className="size-3.5" /> Copy .md
+        <Clipboard className="size-3.5" /> Copy
       </Button>
       <Button
         size="sm"
@@ -1128,7 +1284,7 @@ function ExportControls({ markdown }: { markdown: string }) {
         onClick={download}
         title="Download the draft as a .md file"
       >
-        <Download className="size-3.5" />
+        <Download className="size-3.5" /> Download
       </Button>
     </div>
   );
@@ -1316,13 +1472,54 @@ function VersionHistory({
   open,
   onToggleOpen,
   versions,
+  currentHtml,
+  labels,
+  currentKey,
   onRestore,
+  onRename,
+  onDelete,
 }: {
   open: boolean;
   onToggleOpen: () => void;
   versions: DraftVersion[];
+  currentHtml: string;
+  labels: Record<string, string>;
+  currentKey: string | null;
   onRestore: (version: DraftVersion) => void;
+  onRename: (key: string, label: string) => void;
+  onDelete: (version: DraftVersion) => void;
 }) {
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+  const [editingLabel, setEditingLabel] = useState("");
+  const editingInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (editingKey) editingInputRef.current?.focus();
+  }, [editingKey]);
+
+  const startEditing = (key: string, label: string) => {
+    setEditingKey(key);
+    setEditingLabel(label);
+  };
+
+  const saveEditing = () => {
+    if (editingKey) onRename(editingKey, editingLabel);
+    setEditingKey(null);
+    setEditingLabel("");
+  };
+
+  const rows = versions.map((version, index) => {
+    const chronologicalIndex = versions.length - 1 - index;
+    const key = versionKey(version);
+    return {
+      key,
+      fallback: chronologicalIndex === 0 ? "Original" : `Version ${chronologicalIndex}`,
+      time: formatVersionTime(version.takenAt),
+      current: currentKey === key || (!currentKey && version.html === currentHtml),
+      restore: version,
+    };
+  });
+
   return (
     <Card>
       <CardContent className="flex flex-col gap-2.5 p-4">
@@ -1333,9 +1530,6 @@ function VersionHistory({
               <h2 className="text-[10px] tracking-widest text-muted-foreground uppercase">
                 Versions
               </h2>
-              <p className="mt-1 text-[11px] italic leading-snug text-muted-foreground">
-                Drafts replaced by a rewrite land here — click one to bring it back.
-              </p>
             </div>
           </div>
           <button
@@ -1351,32 +1545,98 @@ function VersionHistory({
             />
           </button>
         </div>
-        {open && versions.length > 0 && (
-          <ul className="flex flex-col gap-1.5">
-            {versions.map((version) => (
-              <li key={`${version.takenAt}:${version.html.length}`}>
-                <button
-                  type="button"
-                  onClick={() => onRestore(version)}
-                  title="Restore this draft (the current draft is kept as a version)"
+        {open && rows.length > 0 && (
+          <ul className="flex flex-col gap-1">
+            {rows.map((row) => {
+              const label = labels[row.key] ?? row.fallback;
+              const editing = editingKey === row.key;
+              const restore = row.restore;
+              return (
+                <li
+                  key={row.key}
                   className={cn(
-                    "flex w-full items-baseline justify-between gap-2 rounded-sm px-1 py-0.5 text-left text-xs",
-                    "transition-colors hover:bg-muted/60 hover:text-ink-deep",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                    "group relative grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 rounded-md px-1.5 py-1 transition-colors",
+                    row.current ? "bg-ink-bleed/12 ring-1 ring-ink-bleed/20" : "hover:bg-muted/50",
+                    restore && !editing && "cursor-pointer",
                   )}
                 >
-                  <span className="truncate text-ink-deep">
-                    {version.sourceTarget ? `toward "${version.sourceTarget}"` : "snapshot"}
-                  </span>
-                  <span className="shrink-0 tabular-nums text-muted-foreground">
-                    {new Date(version.takenAt).toLocaleTimeString([], {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                    })}
-                  </span>
-                </button>
-              </li>
-            ))}
+                  {restore && !editing && (
+                    <button
+                      type="button"
+                      onClick={() => onRestore(restore)}
+                      title="Restore this draft (the current draft is kept as a version)"
+                      aria-label={`Restore ${label}`}
+                      className="absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+                    />
+                  )}
+                  <div className={cn("min-w-0", restore && !editing && "pointer-events-none")}>
+                    {editing ? (
+                      <input
+                        type="text"
+                        value={editingLabel}
+                        onChange={(e) => setEditingLabel(e.target.value)}
+                        onBlur={saveEditing}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            saveEditing();
+                          }
+                          if (e.key === "Escape") {
+                            e.preventDefault();
+                            setEditingKey(null);
+                            setEditingLabel("");
+                          }
+                        }}
+                        aria-label="Version name"
+                        className="h-6 w-full rounded-none border-0 border-b border-ink-bleed/70 bg-transparent px-0 text-xs text-ink-deep focus:outline-none focus:ring-0"
+                        ref={editingInputRef}
+                      />
+                    ) : (
+                      <span
+                        className={cn(
+                          "block truncate text-xs",
+                          row.current ? "text-ink-bleed" : "text-ink-deep",
+                        )}
+                      >
+                        {label}
+                      </span>
+                    )}
+                  </div>
+                  <div className="pointer-events-none flex items-center gap-0.5">
+                    <span className="shrink-0 tabular-nums text-[11px] text-muted-foreground">
+                      {row.time}
+                    </span>
+                    {!editing && (
+                      <>
+                        <button
+                          type="button"
+                          aria-label={`Rename ${label}`}
+                          title="Rename version"
+                          onClick={() => startEditing(row.key, label)}
+                          className="pointer-events-auto relative z-10 rounded p-1 text-muted-foreground opacity-70 transition-all hover:bg-muted hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+                        >
+                          <Pencil aria-hidden="true" className="size-3" />
+                        </button>
+                        {restore && row.current && (
+                          <button
+                            type="button"
+                            aria-label={`Delete ${label}`}
+                            title="Delete version"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onDelete(restore);
+                            }}
+                            className="pointer-events-auto relative z-10 rounded p-1 text-muted-foreground opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+                          >
+                            <Trash2 aria-hidden="true" className="size-3" />
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </li>
+              );
+            })}
           </ul>
         )}
       </CardContent>
@@ -1384,6 +1644,24 @@ function VersionHistory({
   );
 }
 
+function versionKey(version: DraftVersion): string {
+  return `${version.takenAt}:${version.html.length}`;
+}
+
+function formatVersionTime(takenAt: number): string {
+  return new Date(takenAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+}
+
+function pushVersionOnce(stack: readonly DraftVersion[], version: DraftVersion): DraftVersion[] {
+  if (stack.some((entry) => entry.html === version.html)) return [...stack];
+  return pushVersion(stack, version);
+}
+
 function escapeHtml(s: string): string {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
diff --git a/app/globals.css b/app/globals.css
index e6db56f..a5fe617 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -165,6 +165,11 @@
       width: var(--bar-w, 50%);
     }
   }
+  @keyframes inklings-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
   @keyframes inklings-spin-slow {
     to {
       transform: rotate(360deg);
@@ -219,7 +224,23 @@
   .inklings-hue-empty-drop {
     transform-box: fill-box;
     transform-origin: center;
-    animation: inklings-hue-drop-settle 1.1s cubic-bezier(0.2, 0.8, 0.24, 1) both;
+    animation:
+      inklings-hue-drop-settle 1.1s cubic-bezier(0.2, 0.8, 0.24, 1) both,
+      inklings-resting-drop 5.5s ease-in-out 1.1s infinite;
+  }
+  @keyframes inklings-resting-drop {
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(0.8px) scale(0.985, 1.01);
+    }
+  }
+  .inklings-resting-drop {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: inklings-resting-drop 5.5s ease-in-out infinite;
   }
   @keyframes inklings-hue-drop-dissolve {
     0% {
@@ -362,12 +383,57 @@
   .inklings-ink-pour {
     animation: inklings-ink-pour 0.6s cubic-bezier(0.45, 0, 0.7, 1) both;
   }
+  @keyframes inklings-mix-drop-pour {
+    0% {
+      transform: translateY(-20px) scale(0.72, 1.12);
+      opacity: 0;
+    }
+    24% {
+      opacity: 1;
+    }
+    72% {
+      transform: translateY(12px) scale(1, 1);
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(15px) scale(0.82, 0.72);
+      opacity: 0;
+    }
+  }
+  .inklings-mix-drop-pour {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: inklings-mix-drop-pour 0.65s cubic-bezier(0.45, 0, 0.7, 1) both;
+  }
+  @keyframes inklings-mix-first-drop {
+    0% {
+      transform: translateY(0) scale(1);
+      opacity: 0.95;
+    }
+    68% {
+      transform: translateY(13px) scale(0.9);
+      opacity: 0.9;
+    }
+    100% {
+      transform: translateY(17px) scale(0.52);
+      opacity: 0;
+    }
+  }
+  .inklings-mix-first-drop {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: inklings-mix-first-drop 0.72s cubic-bezier(0.24, 0.7, 0.2, 1) both;
+  }
   @media (prefers-reduced-motion: reduce) {
     .inklings-ink-bloom,
     .inklings-ink-spatter,
     .inklings-ink-land,
     .inklings-ink-ring,
-    .inklings-ink-pour {
+    .inklings-ink-pour,
+    .inklings-mix-drop-pour,
+    .inklings-mix-first-drop,
+    .inklings-hue-empty-drop,
+    .inklings-resting-drop {
       animation-duration: 0.3s;
       animation-iteration-count: 1;
     }
diff --git a/components/quill/editor.tsx b/components/quill/editor.tsx
index 917040c..90b18fb 100644
--- a/components/quill/editor.tsx
+++ b/components/quill/editor.tsx
@@ -42,7 +42,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import { hueFromHSL } from "@/lib/colour/placeholder";
-import { sentenceWindowAt, textblockRanges } from "@/lib/quill/blocks";
+import { sentenceWindowAtMinWords, textblockRanges } from "@/lib/quill/blocks";
 import { NUDGE_PRESETS } from "@/lib/quill/nudge-presets";
 import { cn } from "@/lib/utils";
 
@@ -120,9 +120,8 @@ type EditorProps = {
   pendingRewriteLoading?: boolean;
   /** A colour swatch was dropped on the prose — resolved span + splash coords. */
   onColourDrop?: (detail: ColourDropDetail) => void;
-  /** Sentences each side of the drop point to include in the rewrite window
-   *  (0 = just the dropped-on sentence). Drives the colour-drop brush size. */
-  brushRadius?: number;
+  /** Colour-drop brush size: 1 = sentence, 3 = current passage, 7 = whole draft. */
+  brushSize?: number;
 };
 
 /** Splash geometry for a range: the centre point and sampled points across it. */
@@ -139,7 +138,7 @@ export type EditorHandle = {
   getSelection: () => SelectionRange | null;
   /** Replace the range [from, to] with rewritten prose (paragraphs split on
    *  blank lines), merging at the cut points instead of splitting host blocks. */
-  replaceRange: (from: number, to: number, text: string) => void;
+  replaceRange: (from: number, to: number, text: string) => string | null;
   /** Splash coords (viewport px) for an arbitrary range — used to animate a
    *  rewrite triggered from the panel rather than a drop. */
   splashPointsFor: (from: number, to: number) => SplashPoints | null;
@@ -148,6 +147,7 @@ export type EditorHandle = {
 // Sample points (viewport px) evenly across a range, so the secondary splashes
 // trace the words about to change. Shared by the drop handler and splashPointsFor.
 const RIPPLE_STEPS = 5;
+const MIN_COLOUR_DROP_WORDS = 8;
 function sampleRipples(view: EditorView, from: number, to: number): { x: number; y: number }[] {
   return Array.from({ length: RIPPLE_STEPS + 1 }, (_, i) => {
     const p = Math.min(to, Math.max(from, Math.round(from + ((to - from) * i) / RIPPLE_STEPS)));
@@ -172,6 +172,19 @@ function openness(
   };
 }
 
+function passageAt(doc: ProseMirrorNode, pos: number): { from: number; to: number } | null {
+  const blocks = textblockRanges(doc);
+  return blocks.find((block) => pos >= block.from && pos <= block.to) ?? null;
+}
+
+function wholeDraftRange(doc: ProseMirrorNode): { from: number; to: number } | null {
+  const blocks = textblockRanges(doc);
+  const first = blocks[0];
+  const last = blocks[blocks.length - 1];
+  if (!first || !last) return null;
+  return { from: first.from, to: last.to };
+}
+
 // Marks the top-level block holding the caret with `quill-focus-active`, so
 // focus mode can dim everything else via CSS. Always installed — it's inert
 // until the wrapper opts into the dimming classes.
@@ -347,11 +360,12 @@ export function Editor({
   pendingRewriteRange,
   pendingRewriteLoading = false,
   onColourDrop,
-  brushRadius = 1,
+  brushSize = 3,
 }: EditorProps & { ref?: Ref<EditorHandle> }) {
   // Track selection emptiness so the right-click menu can disable
   // selection-only actions; updated on every selection change.
   const [hasSelection, setHasSelection] = useState(false);
+  const [hasText, setHasText] = useState(initialContent.trim().length > 0);
   // Focus mode dims every block but the one holding the caret.
   const [focusMode, setFocusMode] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -408,6 +422,9 @@ export function Editor({
       },
     },
     onUpdate: ({ editor: ed }) => {
+      const nextHasText = !ed.isEmpty;
+      setHasText(nextHasText);
+      if (!nextHasText) setFocusMode(false);
       onChange?.(ed.getHTML());
     },
   });
@@ -509,8 +526,8 @@ export function Editor({
 
   // Resolve a dropped swatch to the span to rewrite + the splash coordinates. An
   // active text selection wins over the brush — the drop rewrites exactly the
-  // selected text; otherwise it's the brush-sized sentence window at the drop
-  // point. We preventDefault so ProseMirror's own drop handling never sees it.
+  // selected text. Without a selection the brush maps to sentence / current
+  // passage / whole draft. We preventDefault so ProseMirror never sees the drop.
   const handleColourDrop = (e: React.DragEvent) => {
     if (!editor) return;
     const colourKey = e.dataTransfer.getData(COLOUR_DROP_MIME);
@@ -529,9 +546,14 @@ export function Editor({
     } else {
       const at = view.posAtCoords({ left: e.clientX, top: e.clientY });
       if (!at) return;
-      const window = sentenceWindowAt(doc, at.pos, brushRadius);
-      if (!window) return;
-      ({ from, to } = window);
+      const brushRange =
+        brushSize <= 1
+          ? sentenceWindowAtMinWords(doc, at.pos, MIN_COLOUR_DROP_WORDS)
+          : brushSize <= 3
+            ? passageAt(doc, at.pos)
+            : wholeDraftRange(doc);
+      if (!brushRange) return;
+      ({ from, to } = brushRange);
       origin = { x: e.clientX, y: e.clientY };
     }
     const span: SelectionRange = {
@@ -687,14 +709,14 @@ export function Editor({
         };
       },
       replaceRange(from: number, to: number, text: string) {
-        if (!editor) return;
+        if (!editor) return null;
         const { schema } = editor.state;
         const paras = text
           .split(/\n\s*\n+/)
           .map((p) => p.trim())
           .filter(Boolean);
         const paragraph = schema.nodes.paragraph;
-        if (paras.length === 0 || !paragraph) return;
+        if (paras.length === 0 || !paragraph) return null;
         // A slice open at both ends (textblock depth 1) fits like a paste: the
         // first paragraph merges into the block at `from`, internal breaks split,
         // the last merges into the block at `to`. Handles in-paragraph, whole-
@@ -702,6 +724,7 @@ export function Editor({
         const nodes = paras.map((t) => paragraph.create(null, schema.text(t)));
         const slice = new Slice(Fragment.fromArray(nodes), 1, 1);
         editor.view.dispatch(editor.state.tr.replaceRange(from, to, slice));
+        return editor.getHTML();
       },
       splashPointsFor(from: number, to: number) {
         if (!editor) return null;
@@ -716,11 +739,18 @@ export function Editor({
   // Keep the keymap pointed at the current readHue closure.
   readHueRef.current = readHue;
 
+  useEffect(() => {
+    if (!editor) return;
+    setHasText(!editor.isEmpty);
+  }, [editor]);
+
   return (
     <div className={cn("flex flex-col gap-3", className)}>
       <div className="flex flex-wrap items-start justify-between gap-2">
         {editor && <EditorToolbar editor={editor} />}
-        <FocusToggle active={focusMode} onToggle={() => setFocusMode((v) => !v)} />
+        {editor && hasText && (
+          <FocusToggle active={focusMode} onToggle={() => setFocusMode((v) => !v)} />
+        )}
       </div>
       <ContextMenu>
         <ContextMenuTrigger asChild>
diff --git a/components/quill/rewrite-panel.tsx b/components/quill/rewrite-panel.tsx
index 1145053..6f50836 100644
--- a/components/quill/rewrite-panel.tsx
+++ b/components/quill/rewrite-panel.tsx
@@ -38,13 +38,15 @@ const INTENSITY_LABELS: Record<number, string> = {
   5: "Full",
 };
 
-// Brush = how many sentences the colour drop covers. Selection always wins over
-// this; it only governs a drop point. The brush icon grows with the size.
-const BRUSH_SIZES = [
-  { size: 1, iconClass: "size-3", title: "Sentence — only the sentence you drop on" },
-  { size: 3, iconClass: "size-4", title: "Nearby passage — sentence plus nearby context" },
-  { size: 7, iconClass: "size-5", title: "Wider passage — a broader section around the drop" },
-] as const;
+const BRUSH_LABELS: Record<number, string> = {
+  1: "Sentence",
+  3: "Passage",
+  7: "Whole draft",
+};
+
+// Brush = how much prose a colour drop covers when there is no selected text.
+// Selection always wins over this; it only governs a drop point.
+const BRUSH_SIZES = [1, 3, 7] as const;
 
 function countWords(s: string): number {
   return s.split(/\s+/).filter(Boolean).length;
@@ -151,6 +153,7 @@ export function RewritePanel({
       const next = { ...r };
       if (n <= 0) delete next[key];
       else next[key] = n;
+      setPour({ token: 0, css: "" });
       return next;
     });
 
@@ -180,6 +183,7 @@ export function RewritePanel({
     : hasRewrite
       ? "Try another nudge"
       : "Suggest a nudge";
+  const brushIndex = brushSize <= 1 ? 0 : brushSize <= 3 ? 1 : 2;
 
   return (
     <>
@@ -187,7 +191,7 @@ export function RewritePanel({
         <CardContent className="flex flex-col gap-2.5 p-4">
           <SectionHeader
             label="Colour"
-            description="Drag a colour onto text, or tap one to aim the nudge."
+            description="Tap a colour to set the target. Drag it onto a sentence, passage, or selection."
             icon={<Palette className="size-4" />}
             open={colourOpen}
             onToggle={() => onOpenPanelChange(colourOpen ? null : "colour")}
@@ -218,34 +222,31 @@ export function RewritePanel({
                   onCancel={closeMix}
                 />
               )}
-              <div className="flex items-center justify-between gap-2 pt-1">
-                <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
-                  Brush range
-                </span>
-                <div className="flex items-center gap-0.5 rounded-md border border-border bg-muted/40 p-0.5">
-                  {BRUSH_SIZES.map((b) => (
-                    <button
-                      key={b.size}
-                      type="button"
-                      aria-pressed={brushSize === b.size}
-                      aria-label={b.title}
-                      title={b.title}
-                      onClick={() => onBrushChange(b.size)}
-                      className={cn(
-                        "inline-flex size-7 items-center justify-center rounded transition-colors",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-                        brushSize === b.size
-                          ? "bg-card text-ink-deep shadow-sm"
-                          : "text-muted-foreground hover:text-foreground",
-                      )}
-                    >
-                      <Brush className={b.iconClass} />
-                    </button>
-                  ))}
+              <div className="flex flex-col gap-1.5 pt-1">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="inline-flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-muted-foreground">
+                    <Brush className="size-3.5" />
+                    Brush range
+                  </span>
+                  <span className="text-xs text-ink-bleed">{BRUSH_LABELS[brushSize]}</span>
+                </div>
+                <input
+                  type="range"
+                  min={0}
+                  max={BRUSH_SIZES.length - 1}
+                  step={1}
+                  value={brushIndex}
+                  onChange={(e) => onBrushChange(BRUSH_SIZES[Number(e.target.value)] ?? 3)}
+                  className="w-full accent-ink-bleed"
+                  aria-label="Brush range"
+                />
+                <div className="flex justify-between text-[10px] text-muted-foreground">
+                  <span>Small</span>
+                  <span>Big</span>
                 </div>
               </div>
               <p className="text-[11px] italic leading-snug text-muted-foreground">
-                Tap a colour to add its mood, or drag it onto prose for a local nudge. Use{" "}
+                Brush range controls how much prose is affected when no text is selected. Use{" "}
                 <Plus className="inline size-3" /> to mix or capture a hue.
               </p>
             </>
@@ -325,6 +326,7 @@ export function RewritePanel({
                 className={cn(
                   "w-full",
                   canAsk && "bg-ink-bleed text-ink-paper hover:bg-ink-bleed/90",
+                  canAsk && "cursor-pointer",
                 )}
               >
                 {isPending ? (
@@ -574,11 +576,12 @@ function PlusCell({
         onClick={onStartMix}
         title="Mix a new hue — or drop a selection / Hue-band segment to capture one"
         className={cn(
-          "flex size-9 items-center justify-center rounded-full border border-dashed transition-colors",
+          "flex size-9 cursor-pointer items-center justify-center rounded-full border border-dashed transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-          over || mixOpen
-            ? "border-ink-deep bg-ink-deep/10 text-ink-deep"
-            : "border-border text-muted-foreground hover:text-foreground",
+          mixOpen
+            ? "border-border/60 text-muted-foreground/70 hover:text-muted-foreground"
+            : "border-foreground/80 text-foreground hover:border-foreground hover:bg-muted/30",
+          over && "border-ink-deep bg-ink-deep/10 text-ink-deep",
         )}
       >
         <Plus className="size-4" />
@@ -588,8 +591,8 @@ function PlusCell({
 }
 
 /** A mood swatch: draggable (the quick gesture) and clickable (toggle into the
- *  composed target, or pour a part in mix mode). In mix mode a count badge shows
- *  its parts and right-click removes one. */
+ *  composed target, or pour a part in mix mode). In mix mode the count chip
+ *  removes one part, with right-click kept as a backup. */
 function Swatch({
   css,
   dragKey,
@@ -610,39 +613,50 @@ function Swatch({
   onRemovePart?: () => void;
 }) {
   return (
-    <button
-      type="button"
-      draggable
-      aria-pressed={active}
-      onDragStart={(e) => {
-        e.dataTransfer.setData(COLOUR_DROP_MIME, dragKey);
-        e.dataTransfer.effectAllowed = "copy";
-      }}
-      onClick={onToggle}
-      onContextMenu={
-        onRemovePart
-          ? (e) => {
-              e.preventDefault();
-              onRemovePart();
-            }
-          : undefined
-      }
-      title={title}
-      aria-label={ariaLabel}
-      className={cn(
-        "relative size-9 shrink-0 cursor-grab rounded-full border shadow-inner transition-transform",
-        "hover:scale-110 active:cursor-grabbing",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
-        active ? "border-ink-deep ring-2 ring-ink-deep/50" : "border-border",
-      )}
-      style={{ backgroundColor: css }}
-    >
+    <span className="relative flex size-9 shrink-0 items-center justify-center">
+      <button
+        type="button"
+        draggable
+        aria-pressed={active}
+        onDragStart={(e) => {
+          e.dataTransfer.setData(COLOUR_DROP_MIME, dragKey);
+          e.dataTransfer.effectAllowed = "copy";
+        }}
+        onClick={onToggle}
+        onContextMenu={
+          onRemovePart
+            ? (e) => {
+                e.preventDefault();
+                onRemovePart();
+              }
+            : undefined
+        }
+        title={title}
+        aria-label={ariaLabel}
+        className={cn(
+          "size-9 cursor-grab rounded-full border shadow-inner transition-transform",
+          "hover:scale-110 active:cursor-grabbing",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+          active ? "border-ink-deep ring-2 ring-ink-deep/50" : "border-border",
+        )}
+        style={{ backgroundColor: css }}
+      />
       {badge && badge > 0 ? (
-        <span className="absolute -right-1 -top-1 flex min-w-4 items-center justify-center rounded-full bg-ink-deep px-0.5 text-[9px] tabular-nums text-ink-paper">
+        <button
+          type="button"
+          aria-label={`Remove one part from ${ariaLabel}`}
+          title="Remove one part from this mix"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemovePart?.();
+          }}
+          className="absolute -right-2 -top-2 flex h-5 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-full border border-border/70 bg-background/90 px-1.5 text-[10px] font-semibold tabular-nums text-foreground shadow-md shadow-black/30 backdrop-blur transition-transform hover:scale-105 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+        >
           {badge}
-        </span>
+          <X className="size-3 stroke-[3]" />
+        </button>
       ) : null}
-    </button>
+    </span>
   );
 }
 
@@ -666,39 +680,113 @@ function Beaker({
   onAccept: () => void;
   onCancel: () => void;
 }) {
-  // Level rises ~16% a part, capped — a full beaker reads as a strong mix.
-  const level = Math.min(totalParts * 16, 100);
+  const liquidCss = fillCss ?? "var(--muted)";
+  const dropCss = pour.css || "hsl(252, 55%, 68%)";
+  const isMixed = totalParts > 0;
+  const liquidLevel = isMixed ? 53 - Math.min(totalParts - 1, 4) * 2.25 : 53;
+  const wavePath = (y: number) =>
+    `M-50,${y} Q-40,${y + 6.5} -30,${y} Q-20,${y - 6.5} -10,${y} Q0,${y + 6.5} 10,${y} Q20,${y - 6.5} 30,${y} Q40,${y + 6.5} 50,${y} Q60,${y - 6.5} 70,${y} Q80,${y + 6.5} 90,${y} Q100,${y - 6.5} 110,${y} Q120,${y + 6.5} 130,${y} L130,80 L-50,80 Z`;
+  const dropPath =
+    "M40 32 C37.8 35.2 36.4 37.5 36.4 39.7 C36.4 42 38 43.8 40 43.8 C42 43.8 43.6 42 43.6 39.7 C43.6 37.5 42.2 35.2 40 32 Z";
   return (
     <div className="flex flex-col gap-2 rounded-md border border-border/60 p-3">
-      <div className="relative mx-auto h-20 w-16 overflow-hidden rounded-b-2xl rounded-t-sm border border-border bg-muted/30">
-        <div
-          className="absolute inset-x-0 bottom-0 transition-[height,background-color] duration-500 ease-out"
-          style={{ height: `${level}%`, backgroundColor: fillCss }}
-        />
-        {pour.token > 0 && (
-          <span
-            key={pour.token}
-            aria-hidden="true"
-            className="inklings-ink-pour absolute left-1/2 top-1 size-3 -translate-x-1/2 rounded-full"
-            style={{ backgroundColor: pour.css }}
+      <div className="relative mx-auto size-20">
+        <svg viewBox="0 0 80 80" role="img" aria-label="Colour mix pool" className="size-20">
+          <defs>
+            <clipPath id="mix-pool-clip">
+              <circle cx="40" cy="40" r="30" />
+            </clipPath>
+            <linearGradient id="mix-empty-liquid" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--muted)" stopOpacity="0.4" />
+              <stop offset="100%" stopColor="var(--muted)" stopOpacity="0.26" />
+            </linearGradient>
+            <linearGradient id="mix-empty-drop" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="hsl(252, 60%, 76%)" />
+              <stop offset="100%" stopColor="hsl(252, 48%, 48%)" />
+            </linearGradient>
+            <linearGradient id="mix-empty-stroke" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="hsl(252, 55%, 68%)" />
+              <stop offset="100%" stopColor="hsl(252, 48%, 46%)" />
+            </linearGradient>
+          </defs>
+          <circle
+            cx="40"
+            cy="40"
+            r="30"
+            fill="var(--card)"
+            stroke="var(--border)"
+            strokeWidth="2"
           />
-        )}
+          <g clipPath="url(#mix-pool-clip)">
+            <rect x="0" y="0" width="80" height="80" fill="var(--card)" />
+            <g>
+              <path
+                d={wavePath(liquidLevel)}
+                fill={isMixed ? liquidCss : "url(#mix-empty-liquid)"}
+                className="transition-all duration-500"
+              />
+            </g>
+          </g>
+          <circle
+            cx="40"
+            cy="40"
+            r="30"
+            fill="none"
+            stroke="var(--border)"
+            strokeOpacity="1"
+            strokeWidth="2"
+            className="transition-colors duration-500"
+          />
+          {!isMixed && (
+            <path
+              d={wavePath(liquidLevel)}
+              fill="none"
+              stroke="url(#mix-empty-stroke)"
+              strokeOpacity="0.7"
+              strokeWidth="1.5"
+              clipPath="url(#mix-pool-clip)"
+            />
+          )}
+          {!isMixed && (
+            <path className="inklings-hue-empty-drop" d={dropPath} fill="url(#mix-empty-drop)" />
+          )}
+          {pour.token > 0 && (
+            <path
+              key={pour.token}
+              className={cn(
+                totalParts === 1 ? "inklings-mix-first-drop" : "inklings-mix-drop-pour",
+              )}
+              d={dropPath}
+              fill={dropCss}
+            />
+          )}
+        </svg>
       </div>
       {totalParts > 0 ? (
         <p className="text-[11px] italic leading-snug text-muted-foreground">{phrase}</p>
       ) : (
         <p className="text-[11px] italic leading-snug text-muted-foreground">
-          Tap colours above — each one falls a part into the beaker. Right-click a colour to take a
-          part back.
+          Tap the colours above to mix the hue — each one falls a part into the beaker.
         </p>
       )}
-      <div className="flex gap-1.5">
-        <Button size="sm" variant="outline" onClick={onAccept} disabled={!canPour}>
-          <Check className="size-4" /> Pour into a swatch
-        </Button>
-        <Button size="sm" variant="ghost" onClick={onCancel}>
+      <div className="flex justify-end gap-1.5">
+        <Button
+          size="sm"
+          variant={totalParts > 0 ? "secondary" : "outline"}
+          onClick={onCancel}
+          className="cursor-pointer"
+        >
           Cancel
         </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={onAccept}
+          disabled={!canPour}
+          className={cn(canPour ? "cursor-pointer" : "cursor-not-allowed")}
+        >
+          <Check className="size-4" /> Add to palette
+        </Button>
       </div>
     </div>
   );
diff --git a/components/quill/target-widgets.tsx b/components/quill/target-widgets.tsx
index 068f31b..f60cc96 100644
--- a/components/quill/target-widgets.tsx
+++ b/components/quill/target-widgets.tsx
@@ -40,7 +40,7 @@ export function TargetWidgets({
                 key={option.value}
                 value={option.value}
                 title={option.phrase}
-                className="h-7 min-w-0 flex-1 px-1 text-xs"
+                className="h-7 min-w-0 flex-1 cursor-pointer px-1 text-xs"
               >
                 {option.label}
               </ToggleGroupItem>
diff --git a/lib/quill/blocks.ts b/lib/quill/blocks.ts
index 268d3c4..1158b52 100644
--- a/lib/quill/blocks.ts
+++ b/lib/quill/blocks.ts
@@ -128,3 +128,43 @@ export function sentenceWindowAt(
   if (i === -1) i = sentences.length - 1;
   return windowAround(sentences, i, radius);
 }
+
+function wordCount(text: string): number {
+  return text.split(/\s+/).filter(Boolean).length;
+}
+
+/**
+ * Sentence brush with a minimum useful span. Starts at the dropped-on sentence,
+ * then expands forward, then backward, until it has enough words or no prose is
+ * left to include.
+ */
+export function sentenceWindowAtMinWords(
+  doc: ProseMirrorNode,
+  pos: number,
+  minWords: number,
+): { from: number; to: number } | null {
+  const sentences = documentSentences(doc);
+  if (sentences.length === 0) return null;
+  const clamped = Math.min(Math.max(pos, 0), doc.content.size);
+  let sentenceIndex = sentences.findIndex((s) => clamped < s.to);
+  if (sentenceIndex === -1) sentenceIndex = sentences.length - 1;
+
+  let start = sentenceIndex;
+  let end = sentenceIndex;
+  const rangeText = () => {
+    const first = sentences[start];
+    const last = sentences[end];
+    if (!first || !last) return "";
+    return doc.textBetween(first.from, last.to, " ");
+  };
+
+  while (wordCount(rangeText()) < minWords && (end < sentences.length - 1 || start > 0)) {
+    if (end < sentences.length - 1) end += 1;
+    else if (start > 0) start -= 1;
+  }
+
+  const first = sentences[start];
+  const last = sentences[end];
+  if (!first || !last) return null;
+  return { from: first.from, to: last.to };
+}

From a90224b6f20b624715462d5ef49bb430bc089948 Mon Sep 17 00:00:00 2001
From: jovanadinic <jovana.dinic@campus.lmu.de>
Date: Thu, 2 Jul 2026 05:16:03 +0200
Subject: [PATCH 3/3] Refine Quill nudge and mixer interactions

---
 app/(tabs)/quill/page.tsx          | 58 ++++++++++++++++++++++++------
 components/quill/diff-view.tsx     | 23 ++++++------
 components/quill/editor.tsx        | 12 ++++++-
 components/quill/rewrite-panel.tsx | 37 +++++++++++--------
 4 files changed, 94 insertions(+), 36 deletions(-)

diff --git a/app/(tabs)/quill/page.tsx b/app/(tabs)/quill/page.tsx
index 1ba9e11..2db03b8 100644
--- a/app/(tabs)/quill/page.tsx
+++ b/app/(tabs)/quill/page.tsx
@@ -133,9 +133,8 @@ export default function QuillPage() {
   const [currentVersionKey, setCurrentVersionKey] = useState<string | null>(null);
   const [leftPanel, setLeftPanel] = useState<LeftPanel>("hue");
   const [rightPanel, setRightPanel] = useState<RightPanel>("colour");
-  // Live selection drives the sidebar indicator + persistent editor mark;
-  // committed selection is
-  // frozen at request-time and used to splice the rewrite back in on accept.
+  // Live selection drives the sidebar indicator; committed selection is frozen
+  // at request-time and used to keep the loading mark connected to the rewrite.
   const [liveSelection, setLiveSelection] = useState<SelectionRange | null>(null);
   const [committedSelection, setCommittedSelection] = useState<SelectionRange | null>(null);
   // Diff state — computed from the active rewrite vs the committed text.
@@ -164,6 +163,16 @@ export default function QuillPage() {
 
   const targetActive = true;
 
+  const updateDraft = (nextDraft: string) => {
+    setDraft(nextDraft);
+    if (!currentVersionKey) return;
+    setVersions((stack) =>
+      stack.map((entry) =>
+        versionMatchesKey(entry, currentVersionKey) ? { ...entry, html: nextDraft } : entry,
+      ),
+    );
+  };
+
   // Paragraph hue strip. Cache hues by paragraph text so a typing burst only
   // re-derives the block that actually changed; the strip shows the hue trail across
   // the whole draft in Readout mode.
@@ -182,6 +191,7 @@ export default function QuillPage() {
   // paragraph in the editor (tinted in that segment's own hue); clicking one
   // jumps to it. The editor handle lets the click select the block imperatively.
   const editorRef = useRef<EditorHandle>(null);
+  const diffScrollRef = useRef<HTMLDivElement>(null);
   const [highlight, setHighlight] = useState<{ index: number; tint: string | null } | null>(null);
 
   // Live stylometric fingerprint of the draft (style-level). Cheap CPU-only
@@ -258,6 +268,24 @@ export default function QuillPage() {
     wasRewritingRef.current = isRewriting;
   }, [isRewriting, rewrite]);
 
+  useEffect(() => {
+    if (!rewrite) return;
+    const frame = window.requestAnimationFrame(() => {
+      const scroller = diffScrollRef.current;
+      const firstHunk = scroller?.querySelector<HTMLElement>("[data-diff-hunk='true']");
+      if (!scroller || !firstHunk) return;
+
+      const scrollerTop = scroller.getBoundingClientRect().top;
+      const hunkTop = firstHunk.getBoundingClientRect().top;
+      scroller.scrollTo({
+        top: Math.max(0, scroller.scrollTop + hunkTop - scrollerTop - 28),
+        behavior: "smooth",
+      });
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [rewrite]);
+
   // Mirror every draft change to localStorage — implicit, no UI signal
   // needed since this is the privacy default.
   useEffect(() => {
@@ -317,7 +345,7 @@ export default function QuillPage() {
     if (index === -1) return;
 
     const isOriginal = index === versions.length - 1;
-    const isCurrent = currentVersionKey === key || draft === version.html;
+    const isCurrent = versionMatchesKey(version, currentVersionKey) || draft === version.html;
     const nextVersions = versions.filter((entry) => versionKey(entry) !== key);
 
     if (isOriginal) {
@@ -657,7 +685,7 @@ export default function QuillPage() {
 
   const restoreVersion = (version: DraftVersion) => {
     const key = versionKey(version);
-    if (currentVersionKey === key || draft === version.html) {
+    if (versionMatchesKey(version, currentVersionKey) || draft === version.html) {
       setCurrentVersionKey(key);
       return;
     }
@@ -775,7 +803,10 @@ export default function QuillPage() {
                     />
                     {/* One block-flow prose container mirroring the editor exactly,
                       so before/diff/after paragraphs collapse margins uniformly. */}
-                    <div className="mt-4 max-h-[min(430px,calc(100vh-31rem))] min-h-[260px] w-full overflow-y-auto overscroll-contain px-3 pt-8 pb-8 font-serif text-lg leading-relaxed text-ink-deep">
+                    <div
+                      ref={diffScrollRef}
+                      className="mt-4 max-h-[min(430px,calc(100vh-31rem))] min-h-[260px] w-full overflow-y-auto overscroll-contain px-3 pt-8 pb-8 font-serif text-lg leading-relaxed text-ink-deep"
+                    >
                       {blockBefore.map((para) => (
                         <p key={para} className="my-3 first:mt-0 text-ink-deep/40 select-none">
                           {para}
@@ -805,7 +836,7 @@ export default function QuillPage() {
                     ref={editorRef}
                     initialContent={draft}
                     placeholder="Write a paragraph and watch the ink reveal itself…"
-                    onChange={setDraft}
+                    onChange={updateDraft}
                     onDeriveHue={deriveTextColour}
                     onCaptureHue={(c) =>
                       addSwatch({
@@ -817,7 +848,7 @@ export default function QuillPage() {
                     onSelectionChange={setLiveSelection}
                     blockHues={showRail && bandVisible ? blockHues : undefined}
                     highlightBlock={highlight}
-                    pendingRewriteRange={isRewriting ? committedSelection : liveSelection}
+                    pendingRewriteRange={isRewriting ? committedSelection : null}
                     pendingRewriteLoading={isRewriting && !!committedSelection}
                     onColourDrop={handleColourDrop}
                     brushSize={brushSize}
@@ -848,7 +879,6 @@ export default function QuillPage() {
           <RewritePanel
             openPanel={rightPanel === "colour" || rightPanel === "words" ? rightPanel : null}
             onOpenPanelChange={(panel) => setRightPanel(panel)}
-            selectedColour={selectedColour}
             onToggleColour={toggleColour}
             customSwatches={customSwatches}
             onAddHue={addSwatch}
@@ -1515,7 +1545,8 @@ function VersionHistory({
       key,
       fallback: chronologicalIndex === 0 ? "Original" : `Version ${chronologicalIndex}`,
       time: formatVersionTime(version.takenAt),
-      current: currentKey === key || (!currentKey && version.html === currentHtml),
+      current:
+        versionMatchesKey(version, currentKey) || (!currentKey && version.html === currentHtml),
       restore: version,
     };
   });
@@ -1645,7 +1676,12 @@ function VersionHistory({
 }
 
 function versionKey(version: DraftVersion): string {
-  return `${version.takenAt}:${version.html.length}`;
+  return String(version.takenAt);
+}
+
+function versionMatchesKey(version: DraftVersion, key: string | null): boolean {
+  if (!key) return false;
+  return key === versionKey(version) || key.startsWith(`${version.takenAt}:`);
 }
 
 function formatVersionTime(takenAt: number): string {
diff --git a/components/quill/diff-view.tsx b/components/quill/diff-view.tsx
index 762e1d8..6bb9cd4 100644
--- a/components/quill/diff-view.tsx
+++ b/components/quill/diff-view.tsx
@@ -169,17 +169,19 @@ export function DiffActions({
         <Button variant="outline" size="sm" onClick={onReject}>
           <X className="size-4" /> Keep original
         </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onApply}
-          disabled={resolvedCount === 0}
-          title={resolvedCount === 0 ? "Resolve at least one change first" : undefined}
-        >
-          Apply ({resolvedCount})
-        </Button>
+        {totalChanges > 1 && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onApply}
+            disabled={resolvedCount === 0}
+            title={resolvedCount === 0 ? "Resolve at least one change first" : undefined}
+          >
+            Apply ({resolvedCount})
+          </Button>
+        )}
         <Button size="sm" onClick={onAcceptAll}>
-          <Check className="size-4" /> Accept all
+          <Check className="size-4" /> {totalChanges === 1 ? "Accept change" : "Accept all"}
         </Button>
       </div>
     </div>
@@ -237,6 +239,7 @@ function HunkSpan({
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: mouse-only tooltip reveal; keyboard users interact via the buttons inside
     <span
+      data-diff-hunk="true"
       className={cn(
         "relative inline-block align-baseline transition-all duration-150",
         state !== "pending" && !isOpen && "opacity-60",
diff --git a/components/quill/editor.tsx b/components/quill/editor.tsx
index 90b18fb..d3a2f98 100644
--- a/components/quill/editor.tsx
+++ b/components/quill/editor.tsx
@@ -28,7 +28,7 @@ import {
   Undo2,
   WandSparkles,
 } from "lucide-react";
-import { type Ref, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { type Ref, useEffect, useImperativeHandle, useRef, useState, type WheelEvent } from "react";
 import { toast } from "sonner";
 import {
   ContextMenu,
@@ -744,6 +744,15 @@ export function Editor({
     setHasText(!editor.isEmpty);
   }, [editor]);
 
+  const passEmptyEditorWheelToPage = (e: WheelEvent<HTMLDivElement>) => {
+    if (hasText) return;
+    const pageCanScroll = document.documentElement.scrollHeight > window.innerHeight;
+    if (!pageCanScroll) return;
+
+    e.preventDefault();
+    window.scrollBy({ top: e.deltaY, left: e.deltaX, behavior: "auto" });
+  };
+
   return (
     <div className={cn("flex flex-col gap-3", className)}>
       <div className="flex flex-wrap items-start justify-between gap-2">
@@ -759,6 +768,7 @@ export function Editor({
             ref={scrollRef}
             onDragOver={handleColourDragOver}
             onDrop={handleColourDrop}
+            onWheel={passEmptyEditorWheelToPage}
             className={cn(
               "relative max-h-[min(540px,calc(100vh-24rem))] overflow-y-auto overscroll-contain pr-2 pb-8",
               focusMode && [
diff --git a/components/quill/rewrite-panel.tsx b/components/quill/rewrite-panel.tsx
index 6f50836..c3122f7 100644
--- a/components/quill/rewrite-panel.tsx
+++ b/components/quill/rewrite-panel.tsx
@@ -61,7 +61,6 @@ function countWords(s: string): number {
 export function RewritePanel({
   openPanel,
   onOpenPanelChange,
-  selectedColour,
   onToggleColour,
   customSwatches,
   onAddHue,
@@ -87,7 +86,6 @@ export function RewritePanel({
 }: {
   openPanel: "colour" | "words" | null;
   onOpenPanelChange: (panel: "colour" | "words" | null) => void;
-  selectedColour: string | null;
   onToggleColour: (key: string) => void;
   customSwatches: CustomSwatch[];
   onAddHue: (hue: CapturedHue) => void;
@@ -200,7 +198,6 @@ export function RewritePanel({
             <>
               <SwatchGrid
                 customSwatches={customSwatches}
-                selectedColour={selectedColour}
                 mixOpen={mixOpen}
                 recipe={recipe}
                 onTap={onTap}
@@ -215,7 +212,7 @@ export function RewritePanel({
                 <Beaker
                   fillCss={blendCss}
                   totalParts={totalParts}
-                  phrase={mixWords}
+                  parts={mixEntries.map((s) => ({ phrase: s.phrase, count: recipe[s.key] ?? 0 }))}
                   pour={pour}
                   canPour={!!blend}
                   onAccept={acceptMix}
@@ -395,7 +392,6 @@ function SectionHeader({
  *  tap folds the colour into the target; in mix mode a tap pours a part. */
 function SwatchGrid({
   customSwatches,
-  selectedColour,
   mixOpen,
   recipe,
   onTap,
@@ -407,7 +403,6 @@ function SwatchGrid({
   onCaptureText,
 }: {
   customSwatches: CustomSwatch[];
-  selectedColour: string | null;
   mixOpen: boolean;
   recipe: Record<string, number>;
   onTap: (key: string) => void;
@@ -429,7 +424,7 @@ function SwatchGrid({
               mixOpen ? ", or tap to add a part" : ", or tap to add to the target"
             }.`}
             ariaLabel={`${c.label}: ${c.target}`}
-            active={!mixOpen && selectedColour === c.key}
+            active={false}
             badge={mixOpen ? recipe[c.key] : undefined}
             onToggle={() => onTap(c.key)}
             onRemovePart={mixOpen ? () => onRemovePart(c.key) : undefined}
@@ -440,7 +435,6 @@ function SwatchGrid({
         <CustomCell
           key={w.id}
           swatch={w}
-          selectedColour={selectedColour}
           mixOpen={mixOpen}
           recipe={recipe}
           onTap={onTap}
@@ -497,7 +491,6 @@ function useHueDrop(onHue: (h: CapturedHue) => void, onText: (t: string) => void
  *  or text drop to replace its hue (the same capture gesture, per swatch). */
 function CustomCell({
   swatch,
-  selectedColour,
   mixOpen,
   recipe,
   onTap,
@@ -507,7 +500,6 @@ function CustomCell({
   onCaptureText,
 }: {
   swatch: CustomSwatch;
-  selectedColour: string | null;
   mixOpen: boolean;
   recipe: Record<string, number>;
   onTap: (key: string) => void;
@@ -535,7 +527,7 @@ function CustomCell({
           mixOpen ? ", or tap to add a part" : ", or tap to add to the target"
         }. Drop a selection here to replace it.`}
         ariaLabel={`Custom hue: ${swatch.phrase}`}
-        active={!mixOpen && selectedColour === swatch.id}
+        active={false}
         badge={mixOpen ? recipe[swatch.id] : undefined}
         onToggle={() => onTap(swatch.id)}
         onRemovePart={mixOpen ? () => onRemovePart(swatch.id) : undefined}
@@ -666,7 +658,7 @@ function Swatch({
 function Beaker({
   fillCss,
   totalParts,
-  phrase,
+  parts,
   pour,
   canPour,
   onAccept,
@@ -674,7 +666,7 @@ function Beaker({
 }: {
   fillCss: string | undefined;
   totalParts: number;
-  phrase: string;
+  parts: { phrase: string; count: number }[];
   pour: { token: number; css: string };
   canPour: boolean;
   onAccept: () => void;
@@ -763,7 +755,24 @@ function Beaker({
         </svg>
       </div>
       {totalParts > 0 ? (
-        <p className="text-[11px] italic leading-snug text-muted-foreground">{phrase}</p>
+        <div className="space-y-1">
+          <div className="text-[10px] font-medium tracking-wider text-muted-foreground uppercase">
+            Mix recipe
+          </div>
+          <p className="max-h-16 overflow-y-auto text-[11px] leading-relaxed text-muted-foreground">
+            {parts.map((part) => (
+              <span
+                key={part.phrase}
+                title={`${part.count} ${part.count === 1 ? "part" : "parts"} ${part.phrase}`}
+                className="mr-1.5 inline-block whitespace-nowrap"
+              >
+                <span className="font-semibold tabular-nums text-ink-deep">{part.count}x</span>{" "}
+                {part.phrase}
+                {part !== parts[parts.length - 1] ? "," : ""}
+              </span>
+            ))}
+          </p>
+        </div>
       ) : (
         <p className="text-[11px] italic leading-snug text-muted-foreground">
           Tap the colours above to mix the hue — each one falls a part into the beaker.