reviewzy 0.1.0 → 0.2.0

package/src/dashboard/views.tsx

@@ -1,8 +1,9 @@
 /** @jsxImportSource hono/jsx */
 import type { JSX } from "hono/jsx/jsx-runtime";
-import { listRevisions, parseConstraints } from "../db/human-save.ts";
+import { listRevisions, parseConstraints, parseEntryImages } from "../db/human-save.ts";
 import type { Constraints, HumanSaveRefusal, RevisionRow, TransitionRefusal } from "../db/human-save.ts";
 import {
+  adjacentEntryIds,
   countEntries,
   listEntries,
   listProjects,
@@ -12,6 +13,8 @@ import type { EntryRow, EntryStatus } from "../db/queries.ts";
 import { readStyleGuideSection } from "../db/style-guide.ts";
 import type { StyleGuideForm, StyleGuideFormRefusal, StyleGuideInput } from "../db/style-guide.ts";
 import type { Store } from "../db/store.ts";
+import { parseRepoLink, REPO_ICON } from "./repo-link.ts";
+import { diffWords } from "./word-diff.ts";
 import { NAME, VERSION } from "../version.ts";
 
 /**
@@ -30,6 +33,9 @@ const PAGE_SIZE = 200;
 
 const STATUSES: readonly EntryStatus[] = ["draft", "approved", "applied", "rejected"];
 
+/** The default Active view: the two statuses that still need a human. */
+const ACTIVE_STATUSES: readonly EntryStatus[] = ["draft", "approved"];
+
 function isEntryStatus(value: string): value is EntryStatus {
   return (STATUSES as readonly string[]).includes(value);
 }
@@ -48,7 +54,8 @@ const STATUS_LABEL: Record<EntryStatus, string> = {
   rejected: "Rejected",
 };
 
-type ProjectGroup = { slug: string; batches: { id: string; entries: EntryRow[] }[] };
+type ProjectBatch = { id: string; entries: EntryRow[] };
+type ProjectGroup = { slug: string; batches: ProjectBatch[] };
 
 export type ListViewModel = {
   readonly total: number;
@@ -60,6 +67,8 @@ export type ListViewModel = {
   readonly status: string;
   readonly project: string;
   readonly filtersActive: boolean;
+  /** Whether the default Active view is what hides every match: a filter found rows, but all of them are applied or rejected. */
+  readonly hiddenByActiveView: boolean;
 };
 
 /** Runs the keyset walk to exhaustion: the mcp tool's own list query, page size 200, no pagination UI. */
@@ -85,9 +94,11 @@ function allEntries(
 }
 
 /**
- * Groups the filtered rows by project (slug order) then batch (batch_id order); within a batch the
- * rows keep the list query's ascending id order. The group order is deliberate: slugs and ulids
- * sort deterministically, so the same filter always renders the same page.
+ * Groups the filtered rows by project (slug order) then batch; within a batch the rows keep the
+ * list query's ascending id order. Within a project, batches split into two partitions: any batch
+ * holding a draft or approved entry is actionable and leads, terminal-only batches (applied and
+ * rejected) follow. Each partition sorts newest batch first, with a deterministic order for
+ * batches minted in the same millisecond, so the same filter always renders the same page.
  */
 function groupRows(rows: readonly EntryRow[], slugOf: Map<string, string>): ProjectGroup[] {
   const byProject = new Map<string, EntryRow[]>();
@@ -101,24 +112,65 @@ function groupRows(rows: readonly EntryRow[], slugOf: Map<string, string>): Proj
     for (const row of projectRows) {
       byBatch.set(row.batch_id, [...(byBatch.get(row.batch_id) ?? []), row]);
     }
-    const batches = [...byBatch.keys()].sort().map((batchId) => ({ id: batchId, entries: byBatch.get(batchId)! }));
-    return { slug: slugOf.get(projectId) ?? projectId, batches };
+    const batches = [...byBatch.keys()].map((batchId) => ({ id: batchId, entries: byBatch.get(batchId)! }));
+    const actionable = batches.filter(isActionableBatch).sort(newestBatchFirst);
+    const terminal = batches.filter((batch) => !isActionableBatch(batch)).sort(newestBatchFirst);
+    return { slug: slugOf.get(projectId) ?? projectId, batches: [...actionable, ...terminal] };
   });
 }
 
+/** A batch is actionable when any of its entries still needs a human: draft or approved. */
+function isActionableBatch(batch: ProjectBatch): boolean {
+  return batch.entries.some((entry) => entry.status === "draft" || entry.status === "approved");
+}
+
+/** Code-unit descending comparison: ulids are fixed-length Crockford base32, so this equals time order. */
+function compareDesc(a: string, b: string): number {
+  return a < b ? 1 : a > b ? -1 : 0;
+}
+
+/** The newest `created_at` in a batch, walked: a batch can hold thousands of entries, and a spread would overflow the call stack. */
+function maxCreatedAt(batch: ProjectBatch): number {
+  let max = 0;
+  for (const entry of batch.entries) {
+    if (entry.created_at > max) max = entry.created_at;
+  }
+  return max;
+}
+
+/**
+ * Newest batch first. Batch ulids share a millisecond timestamp prefix, so a descending id is
+ * newest-first; batches minted in the same millisecond tie on that prefix, and the batch's
+ * newest `created_at` breaks the tie before the id itself, so a same-ms burst still renders in
+ * one fixed order.
+ */
+function newestBatchFirst(a: ProjectBatch, b: ProjectBatch): number {
+  const timeCmp = compareDesc(a.id.slice(0, 10), b.id.slice(0, 10));
+  if (timeCmp !== 0) return timeCmp;
+  const aCreated = maxCreatedAt(a);
+  const bCreated = maxCreatedAt(b);
+  if (aCreated !== bCreated) return bCreated - aCreated;
+  return compareDesc(a.id, b.id);
+}
+
 function loadList(store: Store, params: ListParams): ListViewModel {
   const q = params.q;
   const qActive = q !== undefined && q.trim() !== "";
   const statusRaw = params.status;
   const statusActive = statusRaw !== undefined && statusRaw !== "";
-  const status = statusActive && isEntryStatus(statusRaw) ? statusRaw : undefined;
+  // `all` is the explicit "every status" filter value; the default (no status param, or an empty
+  // one) is the Active view of draft + approved only, which is not a filter and never renders the
+  // partial header. Both query every status; the Active view narrows the walked rows afterward.
+  const allStatuses = statusActive && statusRaw === "all";
+  const status = statusActive && !allStatuses && isEntryStatus(statusRaw) ? statusRaw : undefined;
   const projectRaw = params.project;
   const projectActive = projectRaw !== undefined && projectRaw !== "";
   const projectId = projectActive ? (projectIdBySlug(store, projectRaw) ?? undefined) : undefined;
 
   // A status or project value no filter can match is a settled no-match, not a page error.
-  const impossible = (statusActive && status === undefined) || (projectActive && projectId === undefined);
-  const rows = impossible ? [] : allEntries(store, { q: qActive ? q : undefined, status, projectId });
+  const impossible = (statusActive && !allStatuses && status === undefined) || (projectActive && projectId === undefined);
+  const walked = impossible ? [] : allEntries(store, { q: qActive ? q : undefined, status, projectId });
+  const rows = statusActive ? walked : walked.filter((row) => ACTIVE_STATUSES.includes(row.status));
 
   const projects = listProjects(store);
   const slugOf = new Map(projects.map((project) => [project.id, project.slug]));
@@ -131,27 +183,31 @@ function loadList(store: Store, params: ListParams): ListViewModel {
     status: statusRaw ?? "",
     project: projectRaw ?? "",
     filtersActive: qActive || statusActive || projectActive,
+    hiddenByActiveView: !statusActive && walked.length > 0 && rows.length === 0,
   };
 }
 
-/** The constraint summary cell: max_len and placeholders from the stored constraints JSON, mono, middot-joined. */
-function constraintSummary(constraintsJson: string): string[] {
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(constraintsJson);
-  } catch {
-    return [];
-  }
-  if (typeof parsed !== "object" || parsed === null) return [];
-  const constraints = parsed as Record<string, unknown>;
-  const parts: string[] = [];
-  if (typeof constraints.max_len === "number") parts.push(`max ${constraints.max_len}`);
-  if (Array.isArray(constraints.placeholders)) {
-    for (const placeholder of constraints.placeholders) {
-      if (typeof placeholder === "string" && placeholder !== "") parts.push(`{${placeholder}}`);
-    }
-  }
-  return parts;
+/** The basename of a repo file path (the segment after the last slash), the dim per-row prefix. */
+function fileBasename(path: string): string {
+  return path.split(/[/\\]/).pop() ?? path;
+}
+
+/**
+ * The entry's display title: the agent-supplied `title` when it is non-empty, else the anchor text
+ * (the string being changed), else the file basename for a foreign row carrying neither. The title
+ * is what the list and the editor lead with in place of the file path.
+ */
+function entryTitle(entry: EntryRow): string {
+  const title = entry.title?.trim();
+  if (title !== undefined && title !== "") return title;
+  const anchor = entry.anchor_text.trim();
+  if (anchor !== "") return anchor;
+  return fileBasename(entry.file);
+}
+
+/** The batch ulid shortened to head+tail, enough to name each batch's select-all checkbox distinctly for a screen reader. */
+function shortUlid(id: string): string {
+  return `${id.slice(0, 6)}…${id.slice(-6)}`;
 }
 
 /** The section the current page belongs to, marking the matching navbar link. */
@@ -178,12 +234,11 @@ function Navbar({ signedIn, active }: { signedIn: boolean; active: NavSection })
   );
 }
 
-function PageHeader() {
+function PageHeader({ total }: { total: number }) {
   return (
     <header class="page-header">
-      <div class="label page-eyebrow">Review queue</div>
       <h1 class="page-title">Entries</h1>
-      <p class="page-lede">Agent drafts waiting for your approval.</p>
+      <span class="page-count">{total} {total === 1 ? "entry" : "entries"}</span>
     </header>
   );
 }
@@ -214,7 +269,8 @@ function FilterForm({ vm }: { vm: ListViewModel }) {
       <div class="field">
         <label class="field-label" for="status">Status</label>
         <select class="input" id="status" name="status">
-          <option value="">All statuses</option>
+          <option value="" selected={vm.status === ""}>Active</option>
+          <option value="all" selected={vm.status === "all"}>All statuses</option>
           <option value="draft" selected={vm.status === "draft"}>Draft</option>
           <option value="approved" selected={vm.status === "approved"}>Approved</option>
           <option value="applied" selected={vm.status === "applied"}>Applied</option>
@@ -232,7 +288,9 @@ function FilterForm({ vm }: { vm: ListViewModel }) {
           ))}
         </select>
       </div>
-      <button class="btn btn-primary" type="submit">Apply filters</button>
+      <noscript>
+        <button class="btn btn-primary" type="submit">Apply filters</button>
+      </noscript>
     </form>
   );
 }
@@ -294,11 +352,24 @@ function NoticeCallout({ notice }: { notice: ListNotice }) {
 function ListRegion({ vm, notice }: { vm: ListViewModel; notice: ListNotice | undefined }) {
   if (vm.shown === 0) {
     // Zero entries at all is "no entries yet" even under a filter: nothing exists to filter, and
-    // the empty state explains how entries get here. Only a store with entries can have matches.
+    // the empty state explains how entries get here. A store with entries but no matches is either
+    // a filter miss or the default Active view over a store full of applied and rejected entries.
     return (
       <>
         {notice !== undefined ? <NoticeCallout notice={notice} /> : null}
-        {vm.total === 0 ? <EmptyAll /> : <EmptyMatch />}
+        {vm.total === 0 ? (
+          <EmptyAll />
+        ) : vm.filtersActive ? (
+          <EmptyMatch
+            revealAllHref={
+              vm.hiddenByActiveView
+                ? `/?q=${encodeURIComponent(vm.q)}&project=${encodeURIComponent(vm.project)}&status=all`
+                : undefined
+            }
+          />
+        ) : (
+          <EmptyActive />
+        )}
       </>
     );
   }
@@ -337,7 +408,13 @@ function EmptyAll() {
   );
 }
 
-function EmptyMatch() {
+/**
+ * The filter-miss state, with a way onward. When the default Active view is what hides the
+ * matches (a search that only hits applied or rejected rows), the way onward is the all-statuses
+ * view under the same filters — clearing the filters alone would land back on the Active view
+ * and still show nothing.
+ */
+function EmptyMatch({ revealAllHref }: { revealAllHref: string | undefined }) {
   return (
     <div class="card empty-state">
       <div class="empty-icon" aria-hidden="true">
@@ -348,7 +425,29 @@ function EmptyMatch() {
       </div>
       <h3>No entries match</h3>
       <p>Try different search terms, or clear the filters.</p>
-      <a href="/" class="btn btn-secondary btn-sm">Clear filters</a>
+      {revealAllHref !== undefined ? <p>Applied and rejected entries are hidden from this view.</p> : null}
+      <div class="empty-actions">
+        <a href="/" class="btn btn-secondary btn-sm">Clear filters</a>
+        {revealAllHref !== undefined ? (
+          <a href={revealAllHref} class="btn btn-secondary btn-sm">Show all statuses</a>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** The default Active view over a store whose entries are all applied or rejected: nothing to do, no filters to clear. */
+function EmptyActive() {
+  return (
+    <div class="card empty-state">
+      <div class="empty-icon" aria-hidden="true">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="8" cy="8" r="6.5" />
+          <path d="M5 8l2 2 4-4" />
+        </svg>
+      </div>
+      <h3>Nothing to review</h3>
+      <p>Every filed entry is applied or rejected. New drafts appear here as agents file them.</p>
     </div>
   );
 }
@@ -395,51 +494,104 @@ function ProjectGroupView({ group }: { group: ProjectGroup }) {
         <span class="tag tag-data">
           {count} {count === 1 ? "entry" : "entries"}
         </span>
+        {/* Every section and batch ships open; dashboard.js collapses the ones this viewer
+            collapsed before (localStorage) and keeps the buttons inert without JS. */}
+        <button
+          type="button"
+          class="btn btn-icon collapse-toggle"
+          aria-expanded="true"
+          aria-controls={`project-batches-${group.slug}`}
+          aria-label={`Toggle ${group.slug} section`}
+          data-collapse-toggle
+          data-collapse-target={`project-batches-${group.slug}`}
+          data-collapse-key={`project:${group.slug}`}
+        >
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M3 6l5 5 5-5" />
+          </svg>
+        </button>
       </header>
-      {group.batches.map((batch) => (
-        <div class="batch" key={batch.id}>
-          <div class="batch-header">
-            <span class="label">Batch</span>
-            <span class="batch-id">{batch.id}</span>
-          </div>
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th class="cell-select">Select</th>
-                  <th>File</th>
-                  <th>Anchor</th>
-                  <th>Text</th>
-                  <th>Status</th>
-                  <th>Filed by</th>
-                  <th>Constraints</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {batch.entries.map((entry) => (
-                  <EntryRowView key={entry.id} entry={entry} />
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ))}
+      <div id={`project-batches-${group.slug}`} class="project-batches">
+        {group.batches.map((batch) => (
+          <BatchView key={batch.id} batch={batch} />
+        ))}
+      </div>
     </section>
   );
 }
 
+function BatchView({ batch }: { batch: ProjectBatch }) {
+  // A batch names its filer in the header only when every entry agrees on one non-null
+  // value; a disagreement leaves the header filer-less and each row names its own inline.
+  const filedBy = batch.entries.map((entry) => entry.filed_by);
+  const allAgree = filedBy.every((filer) => filer === filedBy[0]);
+  const singleFiler = allAgree && filedBy[0] !== null ? filedBy[0] : null;
+  const mixedFilers = !allAgree && filedBy.some((filer) => filer !== null);
+  return (
+    <div class="batch">
+      <div class="batch-header">
+        {/* Select-all toggles only this batch's draft rows. No `name`, so it never submits as
+            an entry id; dashboard.js derives checked/indeterminate from the draft checkboxes. */}
+        <input type="checkbox" class="select-all" aria-label={`Select all drafts in batch ${shortUlid(batch.id)}`} />
+        {singleFiler !== null ? <span class="batch-meta">{singleFiler}</span> : null}
+        <button
+          type="button"
+          class="btn btn-icon collapse-toggle"
+          aria-expanded="true"
+          aria-controls={`batch-table-${batch.id}`}
+          aria-label={`Toggle batch ${shortUlid(batch.id)}`}
+          data-collapse-toggle
+          data-collapse-target={`batch-table-${batch.id}`}
+          data-collapse-key={`batch:${batch.id}`}
+        >
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M3 6l5 5 5-5" />
+          </svg>
+        </button>
+      </div>
+      <div class="table-wrap" id={`batch-table-${batch.id}`}>
+        <table>
+          <colgroup>
+            <col class="col-select" />
+            <col />
+            <col class="col-status" />
+            <col class="col-file" />
+            <col class="col-actions" />
+          </colgroup>
+          <thead>
+            <tr>
+              {/* The column header stays in the accessibility tree via the sr-only span; the
+                  checkbox column itself is too narrow for a visible label. */}
+              <th><span class="visually-hidden">Select</span></th>
+              <th>Title</th>
+              <th>Status</th>
+              <th>File</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {batch.entries.map((entry) => (
+              <EntryRowView key={entry.id} entry={entry} filerInline={mixedFilers} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
 /**
  * One row. The checkbox names the entry for the batch form; it exists only on drafts, because an
  * approve on any other status always refuses and a checkbox that can only refuse is noise (races
- * are still reported per entry). The action buttons carry the row's own approve and reject,
- * targeting the list region; their requests include the batch form's hidden filters, so an action
- * round re-renders the region under the same filter. Applied and rejected rows are terminal from
- * the dashboard side and offer only the editor.
+ * are still reported per entry). The status chip sits beside the title; the three icon action slots
+ * always render, inapplicable ones disabled, so a double-click's second click lands on the disabled
+ * slot rather than a shifted action. Approve and reject target the list region and include the
+ * batch form's hidden filters, so an action round re-renders the region under the same filter; the
+ * editor link is always present. When the batch holds mixed filers, the row also names its own
+ * filer beside the title.
  */
-function EntryRowView({ entry }: { entry: EntryRow }) {
-  const text = entry.human_text ?? entry.agent_draft;
-  const constraints = constraintSummary(entry.constraints);
+function EntryRowView({ entry, filerInline }: { entry: EntryRow; filerInline: boolean }) {
+  const title = entryTitle(entry);
   const approve = entry.status === "draft";
   const reject = entry.status === "draft" || entry.status === "approved";
   return (
@@ -449,60 +601,77 @@ function EntryRowView({ entry }: { entry: EntryRow }) {
           <input type="checkbox" name="id" value={entry.id} aria-label={`Select ${entry.file}`} />
         ) : null}
       </td>
-      <td class="cell-file">
-        <span class="file-path" title={entry.file}>{entry.file}</span>
-      </td>
-      <td class="cell-anchor">
-        <span class="anchor-text" title={entry.anchor_text}>{entry.anchor_text}</span>
-      </td>
-      <td class="cell-text">
-        <span class="entry-text" title={text ?? ""}>{text}</span>
-      </td>
-      <td>
-        <span class={`tag ${STATUS_TAG[entry.status]}`}>
-          <span class="tag-dot"></span>
-          {STATUS_LABEL[entry.status]}
-        </span>
+      <td class="cell-title" title={`${entry.file} — ${entry.anchor_text}`}>
+        <div class="entry-head">
+          <span class="entry-title">{title}</span>
+          {filerInline && entry.filed_by !== null ? <span class="entry-filer"> · {entry.filed_by}</span> : null}
+        </div>
       </td>
-      <td class="cell-filedby">{entry.filed_by ?? ""}</td>
-      <td class="cell-constraints">
-        {constraints.length > 0 ? <span class="constraint-summary">{constraints.join(" · ")}</span> : null}
+      <td class="cell-status">
+        <span class={`tag ${STATUS_TAG[entry.status]}`}>{STATUS_LABEL[entry.status]}</span>
       </td>
+      <td class="cell-file" title={entry.file}>{entry.file}</td>
       <td class="cell-actions">
         {approve ? (
           <button
             type="button"
-            class="btn btn-primary btn-sm"
+            class="btn btn-icon"
+            style="color: var(--success)"
+            aria-label={`Approve ${entry.file}`}
+            title="Approve"
             hx-post={`/entries/${entry.id}/approve`}
             hx-target="#entries-list"
             hx-swap="innerHTML"
             hx-indicator="#entries-loading"
             hx-disabled-elt="this"
           >
-            Approve
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="8" cy="8" r="6.5" />
+              <path d="M5 8l2 2 4-4" />
+            </svg>
           </button>
-        ) : entry.status === "approved" ? (
-          // The approve slot stays occupied for approved rows: a double-click's second click lands
-          // where Approve was, and the disabled button (pointer-events none) swallows it before it
-          // can hit the Reject button that shifted into the slot.
-          <button type="button" class="btn btn-primary btn-sm" disabled>
-            Approve
+        ) : (
+          // The approve slot stays occupied on every non-draft row: a double-click's second click
+          // lands on the disabled button (pointer-events none) rather than the next slot.
+          <button type="button" class="btn btn-icon" style="color: var(--success)" aria-label={`Approve ${entry.file}`} title="Approve" disabled>
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="8" cy="8" r="6.5" />
+              <path d="M5 8l2 2 4-4" />
+            </svg>
           </button>
-        ) : null}
+        )}
         {reject ? (
           <button
             type="button"
-            class="btn btn-danger btn-sm"
+            class="btn btn-icon"
+            style="color: var(--danger)"
+            aria-label={`Reject ${entry.file}`}
+            title="Reject"
             hx-post={`/entries/${entry.id}/reject`}
             hx-target="#entries-list"
             hx-swap="innerHTML"
             hx-indicator="#entries-loading"
             hx-disabled-elt="this"
           >
-            Reject
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="8" cy="8" r="6.5" />
+              <path d="M10 6L6 10M6 6l4 4" />
+            </svg>
           </button>
-        ) : null}
-        <a class="btn btn-secondary btn-sm" href={`/entries/${entry.id}`}>Edit</a>
+        ) : (
+          // The reject slot stays occupied on applied and rejected rows for the same guard.
+          <button type="button" class="btn btn-icon" style="color: var(--danger)" aria-label={`Reject ${entry.file}`} title="Reject" disabled>
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="8" cy="8" r="6.5" />
+              <path d="M10 6L6 10M6 6l4 4" />
+            </svg>
+          </button>
+        )}
+        <a class="btn btn-icon" href={`/entries/${entry.id}`} aria-label={`Edit ${entry.file}`} title="Edit">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11.5 2.5l2 2L5 13H3v-2z" />
+          </svg>
+        </a>
       </td>
     </tr>
   );
@@ -557,7 +726,7 @@ export function dashboardPage(
         <div class="app-shell">
           <Navbar signedIn={signedIn} active="entries" />
           <main class="main">
-            <PageHeader />
+            <PageHeader total={vm.total} />
             <FilterForm vm={vm} />
             <div id="entries">
               <div id="entries-loading" class="htmx-indicator" role="status">
@@ -643,6 +812,9 @@ export type EditorViewModel = {
   readonly entry: EntryRow;
   readonly revisions: readonly RevisionRow[];
   readonly constraints: Constraints;
+  /** The entry immediately before/after in the list's ascending-id walk, or null at the boundary. */
+  readonly prevId: string | null;
+  readonly nextId: string | null;
 };
 
 /**
@@ -665,7 +837,8 @@ export function getEntry(store: Store, id: string): EntryRow | undefined {
 export function loadEditor(store: Store, id: string): EditorViewModel | null {
   const entry = getEntry(store, id);
   if (entry === undefined) return null;
-  return { entry, revisions: listRevisions(store, id), constraints: parseConstraints(entry.constraints) };
+  const { prevId, nextId } = adjacentEntryIds(store, id);
+  return { entry, revisions: listRevisions(store, id), constraints: parseConstraints(entry.constraints), prevId, nextId };
 }
 
 /** The tolerant parse for `entries.context`, mirroring `parseConstraints`: foreign rows may hold malformed JSON, and unparseable means no context rows, never a 500. */
@@ -695,7 +868,7 @@ export function formatSaveRefusal(refusal: Exclude<HumanSaveRefusal, { kind: "un
     case "status":
       return refusal.status === "applied"
         ? "This entry is already applied, so its text can't be changed here. If the anchor goes stale, the entry returns to approved and can be edited."
-        : "This entry was rejected, so its text can't be changed. A rejected entry stays rejected; file a new entry if the line still needs changing.";
+        : "This entry was rejected, so its text can't be changed. A rejected entry stays rejected; file a new entry if the passage still needs changing.";
   }
 }
 
@@ -721,7 +894,7 @@ export function formatTransitionRefusal(
             ? `Entry ${entryFile} is already applied, so it can't be approved. If the anchor goes stale, the entry returns to approved.`
             : `Entry ${entryFile} is already applied, so it can't be rejected. If the anchor goes stale, it returns to approved and can be rejected then.`;
         case "rejected":
-          return `Entry ${entryFile} was rejected, and a rejected entry stays rejected. File a new entry if the line still needs changing.`;
+          return `Entry ${entryFile} was rejected, and a rejected entry stays rejected. File a new entry if the passage still needs changing.`;
       }
   }
 }
@@ -770,9 +943,8 @@ function EditorRegion({ vm, state }: { vm: EditorViewModel; state: EditorState |
       >
         <input type="hidden" name="view" value="editor" />
         <div class="card-header">
-          <div class="card-title">Text</div>
+          <div class="card-title editor-title">{entryTitle(vm.entry)}</div>
           <span class={`tag ${STATUS_TAG[vm.entry.status]}`}>
-            <span class="tag-dot"></span>
             {STATUS_LABEL[vm.entry.status]}
           </span>
         </div>
@@ -859,13 +1031,12 @@ function RevisionHistory({ revisions }: { revisions: readonly RevisionRow[] }) {
   );
 }
 
-/** The constraint panel: what the entry's save enforces, plus the display-only tone and notes. */
+/** The constraint panel: what the entry's save enforces (length, placeholders), plus the display-only tone. The notes moved to their own card, so the enforced fields stay the card's lead. */
 function ConstraintsCard({ constraints, text }: { constraints: Constraints; text: string }) {
   const maxLen = constraints.maxLen;
   const placeholders = constraints.placeholders;
   const tone = constraints.tone;
-  const notes = constraints.notes;
-  const hasAny = maxLen !== undefined || placeholders.length > 0 || tone !== undefined || notes !== undefined;
+  const hasAny = maxLen !== undefined || placeholders.length > 0 || tone !== undefined;
   if (!hasAny) return null;
   return (
     <div class="card">
@@ -907,18 +1078,146 @@ function ConstraintsCard({ constraints, text }: { constraints: Constraints; text
             <div class="constraint-value">{tone}</div>
           </div>
         ) : null}
-        {notes !== undefined ? (
-          <div class="constraint-row">
-            <div class="constraint-label">Notes</div>
-            <div class="constraint-value">{notes}</div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The notes card: the agent's notes (from `constraints.notes`, read-only) above the human's own
+ * notes as an editable textarea with its own save. The textarea carries `hx-preserve`, so any swap
+ * (a text save, an image add) keeps the human's in-progress note; the save targets the whole
+ * editor view like the save form, so the saved value re-renders in place. The card always renders:
+ * the human's notes need a home even before the agent sent any.
+ */
+function NotesCard({ vm }: { vm: EditorViewModel }) {
+  return (
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title">Notes</div>
+      </div>
+      <div class="card-content">
+        <div class="constraint-row">
+          <div class="constraint-label">Agent's notes</div>
+          <div class="constraint-value">{vm.constraints.notes ?? "None."}</div>
+        </div>
+        <form
+          id="notes-form"
+          method="post"
+          action={`/entries/${vm.entry.id}/notes`}
+          hx-post={`/entries/${vm.entry.id}/notes`}
+          hx-target="#editor-view"
+          hx-swap="outerHTML"
+        >
+          <div class="field notes-field">
+            <label class="field-label" for="editor-notes">Your notes</label>
+            <textarea
+              id="editor-notes"
+              class="input"
+              name="notes"
+              rows={4}
+              aria-label="Your notes"
+              hx-preserve="true"
+            >
+              {vm.entry.human_notes ?? ""}
+            </textarea>
           </div>
-        ) : null}
+          <div class="notes-actions">
+            <button class="btn btn-secondary btn-sm" type="submit">Save notes</button>
+          </div>
+        </form>
       </div>
     </div>
   );
 }
 
-/** The entry's context JSON plus its anchor metadata, as an info-table readout. */
+/** An image item renders only when it still matches the prefixes the wire validated; a foreign row can hold anything, so a non-matching item shows a note instead, never raw. */
+function isRenderableImage(item: string): boolean {
+  return item.startsWith("data:image/") || /^https?:\/\//.test(item);
+}
+
+/**
+ * The images attached to an entry, one card in the rail: each valid item as a real `img` (sized by
+ * css), an invalid one as a "not shown" note, a remove form per image, and the one-file upload
+ * form. A card of its own, not a strip in the context card: upload and remove need a stable home,
+ * and the context card stays lean for what the human authors against. Both forms target the whole
+ * editor view like the save form, so a change re-renders the card in place.
+ */
+function ImagesCard({ entry }: { entry: EntryRow }) {
+  const images = parseEntryImages(entry.images);
+  return (
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title">Images</div>
+      </div>
+      <div class="card-content">
+        {images.length === 0 ? (
+          <p class="field-hint">No images yet.</p>
+        ) : (
+          <ul class="image-list">
+            {images.map((item, index) =>
+              isRenderableImage(item) ? (
+                <li class="image-item" key={index}>
+                  <img class="entry-image" src={item} alt={`Image ${index + 1}`} loading="lazy" />
+                  <form
+                    class="image-remove"
+                    method="post"
+                    action={`/entries/${entry.id}/images/${index}/remove`}
+                    hx-post={`/entries/${entry.id}/images/${index}/remove`}
+                    hx-target="#editor-view"
+                    hx-swap="outerHTML"
+                  >
+                    <button class="btn btn-ghost btn-sm" type="submit">Remove</button>
+                  </form>
+                </li>
+              ) : (
+                <li class="image-item" key={index}>
+                  <p class="image-skip">Image {index + 1} not shown: unsupported source.</p>
+                </li>
+              ),
+            )}
+          </ul>
+        )}
+        <form
+          class="image-upload"
+          method="post"
+          action={`/entries/${entry.id}/images`}
+          enctype="multipart/form-data"
+          hx-post={`/entries/${entry.id}/images`}
+          hx-encoding="multipart/form-data"
+          hx-target="#editor-view"
+          hx-swap="outerHTML"
+        >
+          <input class="input" type="file" name="file" accept="image/*" aria-label="Image file" />
+          <button class="btn btn-secondary btn-sm" type="submit" hx-disabled-elt="this">Add image</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The repo row's value: a recognized remote renders as its brand icon beside the bare owner/repo
+ * path, both linking out to the host; an unrecognized one renders as the raw string as filed.
+ */
+function RepoValue({ repo }: { repo: string }) {
+  const link = parseRepoLink(repo);
+  if (link === null) return <>{repo}</>;
+  return (
+    <a class="repo-link" href={link.href} target="_blank" rel="noopener noreferrer" title={repo}>
+      <svg class="repo-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d={REPO_ICON[link.provider]} />
+      </svg>
+      <span>{link.path}</span>
+    </a>
+  );
+}
+
+/**
+ * The entry's context JSON plus its anchor metadata, as an info-table readout. The anchor and the
+ * agent-supplied context rows lead — they are what the human authors against — then repo and file;
+ * the provenance rows (hash, filer, stale note) are secondary and sit collapsed behind a summary.
+ */
 function ContextCard({ entry }: { entry: EntryRow }) {
   const context = parseContext(entry.context);
   return (
@@ -928,6 +1227,10 @@ function ContextCard({ entry }: { entry: EntryRow }) {
       </div>
       <div class="card-content">
         <table class="info-table">
+          <tr>
+            <td>Anchor</td>
+            <td>{entry.anchor_text}</td>
+          </tr>
           {Object.entries(context).map(([key, value]) => (
             <tr key={key}>
               <td>{key}</td>
@@ -936,33 +1239,34 @@ function ContextCard({ entry }: { entry: EntryRow }) {
           ))}
           <tr>
             <td>Repo</td>
-            <td>{entry.repo}</td>
+            <td><RepoValue repo={entry.repo} /></td>
           </tr>
           <tr>
             <td>File</td>
             <td>{entry.file}</td>
           </tr>
-          <tr>
-            <td>Anchor</td>
-            <td>{entry.anchor_text}</td>
-          </tr>
-          <tr>
-            <td>File hash</td>
-            <td>{entry.file_hash}</td>
-          </tr>
-          {entry.filed_by !== null ? (
-            <tr>
-              <td>Filed by</td>
-              <td>{entry.filed_by}</td>
-            </tr>
-          ) : null}
-          {entry.stale_note !== null ? (
+        </table>
+        <details class="context-secondary">
+          <summary>More</summary>
+          <table class="info-table">
             <tr>
-              <td>Stale note</td>
-              <td>{entry.stale_note}</td>
+              <td>File hash</td>
+              <td>{entry.file_hash}</td>
             </tr>
-          ) : null}
-        </table>
+            {entry.filed_by !== null ? (
+              <tr>
+                <td>Filed by</td>
+                <td>{entry.filed_by}</td>
+              </tr>
+            ) : null}
+            {entry.stale_note !== null ? (
+              <tr>
+                <td>Stale note</td>
+                <td>{entry.stale_note}</td>
+              </tr>
+            ) : null}
+          </table>
+        </details>
       </div>
     </div>
   );
@@ -970,14 +1274,18 @@ function ContextCard({ entry }: { entry: EntryRow }) {
 
 /**
  * The before-and-after of the entry's text, above the editor: what the anchored region reads now
- * (the anchor line visually distinct) and what the entry's text will replace it with. Both sides
- * escape through JSX; the text is the stored bytes, shown as-is.
+ * (the anchor visually distinct) and what the entry's text will replace it with. Both sides
+ * escape through JSX; the text is the stored bytes, shown as-is. The word-level marks come from
+ * the server-side walk: words only the anchor has render red in the before card, words only the proposal
+ * has render green in the after card, everything shared stays plain, so an identical pair renders
+ * no marks at all.
  */
 function DiffView({ entry }: { entry: EntryRow }) {
   const after = entry.human_text ?? entry.agent_draft;
   // No text at all means nothing to compare: a filed entry whose agent never drafted, or an
   // approved entry whose text was never set.
   if (after === null) return null;
+  const diff = diffWords(entry.anchor_text, after);
   return (
     <div class="diff-grid">
       <div class="card">
@@ -986,7 +1294,15 @@ function DiffView({ entry }: { entry: EntryRow }) {
         </div>
         <pre class="diff-code">
           <span class="diff-line">{entry.anchor_before}</span>
-          <span class="diff-line diff-anchor">{entry.anchor_text}</span>
+          <span class="diff-line diff-anchor">
+            {diff.before.map((token, index) =>
+              token.kind === "removed" ? (
+                <span class="diff-removed" key={index}>{token.text}</span>
+              ) : (
+                token.text
+              ),
+            )}
+          </span>
           <span class="diff-line">{entry.anchor_after}</span>
         </pre>
       </div>
@@ -994,7 +1310,15 @@ function DiffView({ entry }: { entry: EntryRow }) {
         <div class="card-header">
           <div class="card-title">After</div>
         </div>
-        <pre class="diff-code">{after}</pre>
+        <pre class="diff-code">
+          {diff.after.map((token, index) =>
+            token.kind === "added" ? (
+              <span class="diff-added" key={index}>{token.text}</span>
+            ) : (
+              token.text
+            ),
+          )}
+        </pre>
       </div>
     </div>
   );
@@ -1017,12 +1341,48 @@ function EditorView({ vm, state }: { vm: EditorViewModel; state: EditorState | u
         <aside class="editor-rail">
           <ContextCard entry={vm.entry} />
           <ConstraintsCard constraints={vm.constraints} text={text} />
+          <NotesCard vm={vm} />
+          <ImagesCard entry={vm.entry} />
         </aside>
       </div>
     </div>
   );
 }
 
+/** The editor's full-height prev/next rails: one fixed strip per side, a link when a neighbour exists. */
+function EditorNav({ prevId, nextId }: { prevId: string | null; nextId: string | null }) {
+  return (
+    <nav class="editor-nav" aria-label="Entry navigation">
+      <EditorNavButton side="prev" targetId={prevId} />
+      <EditorNavButton side="next" targetId={nextId} />
+    </nav>
+  );
+}
+
+/** One rail: a chevron on a full-height strip, or an inert placeholder at the boundary. */
+function EditorNavButton({ side, targetId }: { side: "prev" | "next"; targetId: string | null }) {
+  const label = side === "prev" ? "Previous entry" : "Next entry";
+  const chevron = side === "prev" ? "M10 3L5 8l5 5" : "M6 3l5 5-5 5";
+  const cls = `editor-nav-btn editor-nav-${side}`;
+  const icon = (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d={chevron} />
+    </svg>
+  );
+  if (targetId === null) {
+    return (
+      <span class={`${cls} is-disabled`} aria-hidden="true">
+        {icon}
+      </span>
+    );
+  }
+  return (
+    <a class={cls} href={`/entries/${targetId}`} aria-label={label} title={label}>
+      {icon}
+    </a>
+  );
+}
+
 /** The full editor page; the mount wraps it in the doctype. `signedIn` is whether the navbar offers sign-out. */
 export function editorPage(vm: EditorViewModel, state: EditorState | undefined = undefined, signedIn = false): JSX.Element {
   return (
@@ -1049,6 +1409,7 @@ export function editorPage(vm: EditorViewModel, state: EditorState | undefined =
               <p class="page-lede">Saving the text approves the entry and releases it to agents.</p>
             </header>
             <EditorView vm={vm} state={state} />
+            <EditorNav prevId={vm.prevId} nextId={vm.nextId} />
             {/* The one live region: announcements on constraint-state flips only, so a screen reader
                 is not flooded with a per-keystroke value. Lives outside the swap region. */}
             <span id="editor-live" class="visually-hidden" aria-live="polite"></span>