@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/BlocksArtifactView.svelte

@@ -0,0 +1,1616 @@
+<script lang="ts">
+  /**
+   * BlocksArtifactView (origin mos-0ninw; jatui-vsuzi) — a whole blocks page:
+   * header chrome, the live-data poller, the BlockRenderer and the review
+   * moment (Finish review / Done reviewing).
+   *
+   * Everything host-specific arrives through ONE object, `adapter`
+   * (types.ts HostAdapter): the crumb and desk/next slots, comments, the
+   * composer and its upload leg, the review send + delivery poll, history,
+   * live data, Listen and the block services. A missing piece degrades to
+   * read-only, loudly — never to a control that looks live and is not.
+   *
+   * Key this component by artifact id in the host ({#key artifactId}): the
+   * poller's lifecycle is per ARTIFACT, and a SvelteKit host reuses
+   * same-route components across an in-app navigation.
+   *
+   * Server-rendered data is the initial blob (no poll flash); the poller
+   * replaces it from the first tick onward.
+   */
+  import ContextMenu from "../components/ContextMenu.svelte"
+  import ReviewProgress from "../components/review/ReviewProgress.svelte"
+  import { motionFade } from "../motion/transitions"
+  import { showConfirm } from "../stores/confirmDialog"
+  import { flushSync, tick } from "svelte"
+  import BlockRenderer from "./BlockRenderer.svelte"
+  import FoldedRounds from "./FoldedRounds.svelte"
+  import Glyph, { type GlyphName } from "./Glyph.svelte"
+  import HistoryScrubber from "./HistoryScrubber.svelte"
+  import NoteComposer from "./NoteComposer.svelte"
+  import { provideHostAdapter } from "./adapter.js"
+  import { blockTasksOf } from "./contractBlocks.js"
+  import {
+    createLiveDataPoller,
+    dataAgeLine,
+    dataAgeTitle,
+  } from "./liveDataPoller.js"
+  import { createPageReviewKeys, isPageChromeTarget } from "./pageReviewKeys.js"
+  import { blockDef } from "./registry.js"
+  import { createOpenNav, revealUnit, type JumpUnit } from "./openNav.js"
+  import { AUTO_SEND_DELAY_MS, createAutoSend } from "./autoSend.js"
+  import {
+    changedSinceSend,
+    decisionCardsOf,
+    itemVerdictsOf,
+    countReviewUnits,
+    pageReviewProgress,
+    sentAnswerLine,
+    takesBlockVerdict,
+    verdictsFromBlocks,
+    isItemReviewBlock,
+    openReviewUnits,
+    type OpenReviewUnit,
+  } from "./review.js"
+  import type {
+    BlocksSpec,
+    FoldedRound,
+    HostAdapter,
+    NoteAttachment,
+    SentAnswer,
+    SentItemsMap,
+    VerdictEntry,
+  } from "./types.js"
+
+  interface Props {
+    artifactId: string
+    version: number
+    title: string
+    summary: string | null
+    byline: string
+    spec: BlocksSpec | null
+    /** The host's services (types.ts HostAdapter). {} = read-only. */
+    adapter?: HostAdapter
+    /** The server-rendered live-data blob ({} until a data publish). */
+    data?: Record<string, unknown>
+    /** ISO string or null — when the data last changed. */
+    dataUpdatedAt?: string | null
+    /**
+     * Write <title>, description and robots into <svelte:head>. Default
+     * true (a page of its own); false when the view is embedded in a host
+     * page that owns its head.
+     */
+    head?: boolean
+    /** Robots meta for the head (a share surface adds noarchive). */
+    robotsContent?: string
+    /**
+     * Inline chrome on the title line (mos-3q1o3): the host's Details
+     * control renders right after the page title. Omitted on the share
+     * surface.
+     */
+    titleActions?: import("svelte").Snippet
+    /**
+     * The linked task's chip (mos-t9wr6), leading the byline row. Omitted on
+     * the share surface — a share link never shows the task.
+     */
+    taskLine?: import("svelte").Snippet
+    /**
+     * The host's Listen player (mos-3q1o3, mos-8fvt9): a pill at the right
+     * end of the meta line; opened, its bar takes a full-width row.
+     */
+    player?: import("svelte").Snippet
+    /**
+     * Controls for the frame this page sits in (mos-8fvt9): inside the desk
+     * drawer, "Open in new tab" + Close join the right end of the top row
+     * instead of a drawer bar of their own. Omitted everywhere else.
+     */
+    frameActions?: import("svelte").Snippet
+    /**
+     * Where this page's answers really go (mos-guqgs): /a/<slug>. When the
+     * surface has NO save plumbing but the spec carries answer-taking
+     * content, a read-only notice renders with this link — the "Open to
+     * answer" affordance. Null hides the link.
+     */
+    answerUrl?: string | null
+    /**
+     * The host's own wording for the read-only notice. `kind` is
+     * "read-only" (no save plumbing — a share link) or "unsent" (picks save
+     * but no review leg sends them). Default: jatui's neutral copy.
+     */
+    readOnlyNotice?: import("svelte").Snippet<
+      [{ kind: "read-only" | "unsent"; answerUrl: string | null }]
+    >
+    /**
+     * This page's folded earlier rounds: each with its items and every
+     * viewer's verdicts/notes, locked. Empty when the page superseded
+     * nothing (or the host's read failed).
+     */
+    foldedRounds?: FoldedRound[]
+    /** Start the folded rounds expanded (a host redirected an old slug here). */
+    foldedRoundsOpen?: boolean
+    /** Per-block state plumbing (omitted on the read-only share surface). */
+    savedBlocks?: Record<string, unknown> | null
+    onSaveBlock?: (payload: {
+      kind: "blocks"
+      blocks: Record<string, unknown>
+    }) => Promise<void>
+    /**
+     * Comments + the review moment (mos-kib2f). Omitted on the read-only
+     * share surface: no session → no drawer, no Done-reviewing button.
+     */
+    comments?: {
+      enabled: boolean
+      counts: Record<string, number>
+      /** This viewer already recorded review_completed for this version. */
+      reviewed: boolean
+    }
+    /**
+     * The jat task this page serves (mos-wywa3). When set, decision cards
+     * and reviewable blocks (takesBlockVerdict) collect answers and the
+     * "Send answers" section at the foot of the page sends them as ONE
+     * answer to the task. Null → the plain "Done reviewing" moment.
+     */
+    taskId?: string | null
+    /** Who the answer reaches (the publishing agent), for the send label. */
+    answerTo?: string | null
+    /**
+     * The server-seeded done state (mos-7j6r5): THIS viewer's last Send on
+     * THIS version, read by the page load from the review_completed event.
+     * Null when they never sent — a first visit. This is what makes a
+     * reload remember: without it the page offered "Finish review" again
+     * after every refresh, reading as still open when the task was done.
+     */
+    reviewAnswer?: SentAnswer | null
+    /**
+     * The linked task is closed/done (jat state, read server-side). With
+     * every item decided, the page shows the completed state — "Decided ·
+     * task closed" — even for a viewer who did not send.
+     */
+    taskClosed?: boolean
+  }
+
+  let {
+    artifactId,
+    version,
+    title,
+    summary,
+    byline,
+    spec,
+    adapter = {},
+    data = {},
+    dataUpdatedAt = null,
+    head = true,
+    robotsContent = "noindex, nofollow",
+    titleActions = undefined,
+    taskLine = undefined,
+    player = undefined,
+    frameActions = undefined,
+    answerUrl = null,
+    readOnlyNotice = undefined,
+    foldedRounds = [],
+    foldedRoundsOpen = false,
+    savedBlocks = null,
+    onSaveBlock = undefined,
+    comments = undefined,
+    taskId = null,
+    answerTo = null,
+    reviewAnswer = null,
+    taskClosed = false,
+  }: Props = $props()
+
+  // The adapter is read ONCE, at mount (key the view by artifact to swap
+  // hosts): every component below reads it from the context.
+  // svelte-ignore state_referenced_locally
+  const host: HostAdapter = adapter
+  provideHostAdapter(host)
+  const reviewService = host.review
+
+  // The title's right-click menu (MOS: "Copy reference for an agent", copy
+  // link / slug). Keyboard users need the same actions elsewhere in the host.
+  let titleMenu = $state({ open: false, x: 0, y: 0 })
+  const titleMenuItems = $derived(host.titleMenu?.items ?? [])
+  function openTitleMenu(e: MouseEvent) {
+    if (titleMenuItems.length === 0) return
+    e.preventDefault()
+    titleMenu = { open: true, x: e.clientX, y: e.clientY }
+  }
+
+  /** Finished in THIS tab: the next actions take focus once they render. */
+  let deskFocus = $state(false)
+
+  // svelte-ignore state_referenced_locally
+  const live = createLiveDataPoller({
+    fetch: host.liveData
+      ? () => host.liveData!.fetch({ artifactId })
+      : undefined,
+    intervalMs: host.liveData?.intervalMs,
+    initialData: data,
+    initialUpdatedAt: dataUpdatedAt,
+  })
+  $effect(() => {
+    live.start()
+    return () => live.stop()
+  })
+
+  /** Save-status line for the blocks header. */
+  let blocksStatus: "idle" | "saving" | "saved" | "failed" = $state("idle")
+
+  /**
+   * Does this spec carry anything a viewer ANSWERS (mos-guqgs)? Decision
+   * cards, item-review blocks (media-picker / diff-review / checklist),
+   * actions blocks, and the verdict-taking work-product blocks. A page with
+   * none of these is a pure read everywhere — no read-only notice needed.
+   */
+  const answerContent = $derived.by(() => {
+    if (!spec) return false
+    if (decisionCardsOf(spec).size > 0) return true
+    return spec.blocks.some(
+      (b) =>
+        isItemReviewBlock(b.type) ||
+        b.type === "actions" ||
+        takesBlockVerdict(b.type, b.params),
+    )
+  })
+  /**
+   * The read-only contract (mos-guqgs): a mount with no save plumbing that
+   * still carries answer-taking content must SAY SO — a visible notice with
+   * an "Open to answer" affordance, never interactive-looking controls over
+   * a save that will not happen.
+   */
+  const readOnly = $derived(!onSaveBlock && answerContent)
+
+  /** The host can record "Done reviewing" (HostAdapter.review.markReviewed). */
+  const canMarkReviewed = Boolean(reviewService?.markReviewed)
+
+  /** The "Done reviewing" moment: recorded once per (viewer, version). */
+  let reviewed = $state(false)
+  $effect(() => {
+    reviewed = comments?.reviewed ?? false
+  })
+  let reviewing = $state(false)
+
+  /**
+   * POST review_completed (session-only server-side; keys are refused).
+   *
+   * mos-3fl0h: with cards still open this is never silent. The press read
+   * as "this section is done" and the page answered "Review complete ✓" for
+   * the whole page. Now it asks first, and "Go to next open" walks to the
+   * first open card instead (the same jump the n key does).
+   */
+  /** The last "Done reviewing" failure, shown beside the control. */
+  let reviewError = $state<string | null>(null)
+
+  async function doneReviewing() {
+    // No host leg → nothing to record. Never a silent no-op behind a
+    // control: the button and the auto-send are both gated on this too.
+    if (reviewing || reviewed || !reviewService?.markReviewed) return
+    if (commentsReview && undecided > 0) {
+      const ok = await showConfirm({
+        title: "Finish with items still open?",
+        body:
+          undecided === 1
+            ? "1 card still has no pick. Finish anyway?"
+            : `${undecided} cards still have no pick. Finish anyway?`,
+        confirmLabel: "Finish anyway",
+        cancelLabel: "Go to next open",
+        danger: false,
+        timeoutMs: 0,
+      })
+      if (!ok) {
+        // Let the dialog close and hand focus back before the jump moves it.
+        await tick()
+        openNav.jump(1)
+        return
+      }
+    }
+    reviewing = true
+    reviewError = null
+    try {
+      // The host reads the viewer's saved state: land pending saves first.
+      await renderer?.flush()
+      await reviewService.markReviewed({ artifactId, version, taskId })
+      reviewed = true
+      deskFocus = true
+    } catch (err) {
+      reviewError =
+        err instanceof Error && err.message
+          ? err.message
+          : "Could not record that you finished. Try again."
+    } finally {
+      reviewing = false
+    }
+  }
+
+  // ---- Finish review (mos-wywa3): one answer to the linked jat task.
+  // Needs the host's send: without it the page never offers a Send it
+  // cannot make.
+  const reviewMode = $derived(
+    Boolean(taskId && onSaveBlock && comments?.enabled && reviewService?.send),
+  )
+  let renderer:
+    | {
+        flush: () => Promise<void>
+        failedSaveBlocks?: () => string[]
+        revealBlock?: (blockId: string) => boolean
+      }
+    | undefined = $state()
+  /**
+   * The renderer's live state, reported through onLocalChange. Null until
+   * the renderer mounts and reports; derivations read `effectiveBlocks`,
+   * which falls back to the server's saved map — the SAME map the renderer
+   * seeds itself from — so every count (progress, changed-after-send, the
+   * done state) is correct from the first paint, not only after hydration
+   * (mos-7j6r5: a reload must render its seeded state on the server too).
+   */
+  let localBlocks = $state<Record<string, unknown> | null>(null)
+  const effectiveBlocks = $derived(localBlocks ?? savedBlocks ?? {})
+  let finishText = $state("")
+  /** The Finish note's attachments — descriptors the host's upload leg
+   * already stored. */
+  let finishClips = $state<NoteAttachment[]>([])
+  let finishing = $state(false)
+  let finishError = $state<string | null>(null)
+  /**
+   * This viewer's answer was sent (mos-7j6r5): seeded from the server's
+   * `reviewAnswer` on load, so a reload remembers; updated in place by a
+   * live send so the tab never flips back to the pre-send state.
+   */
+  let answered = $state(reviewAnswer != null)
+  /** Who the server says got the answer (the page owner), once sent. */
+  let sentTo = $state<string | null>(reviewAnswer?.sentTo ?? null)
+  /** When it was sent (ISO), seeded or set by the live send. */
+  let sentAt = $state<string | null>(reviewAnswer?.sentAt ?? null)
+  /**
+   * Delivery (mos-bi8t0): the Send is QUEUED for the owner until the drain
+   * puts it in the owner's mailbox and stamps the event. "Sent to … ✓" waits
+   * for that stamp (or for jat recording the answer on the task); until then
+   * the page says "Sending to …" and polls the event. An answer saved before
+   * this field existed (no eventId) reads as sent, the way it always did.
+   */
+  let sentEventId = $state<string | null>(reviewAnswer?.eventId ?? null)
+  let deliveredAt = $state<string | null>(reviewAnswer?.deliveredAt ?? null)
+  let deliverable = $state<boolean>(reviewAnswer?.deliverable ?? true)
+  let deliveredNow = $state(false)
+  // A host with no deliveryStatus leg cannot report a delivery, so a Send
+  // reads as delivered — never a "Sending…" spinner nothing will ever stop.
+  const delivered = $derived(
+    deliveredNow ||
+      deliveredAt !== null ||
+      sentEventId === null ||
+      !reviewService?.deliveryStatus,
+  )
+  /** After this long without delivery, the page says so plainly. */
+  const DELIVERY_STALL_MS = 90_000
+  const DELIVERY_POLL_MS = 5_000
+  let nowMs = $state(Date.now())
+  const deliveryStalled = $derived(
+    answered &&
+      !delivered &&
+      (!deliverable ||
+        (sentAt !== null &&
+          nowMs - new Date(sentAt).getTime() > DELIVERY_STALL_MS)),
+  )
+  /** The verdicts as sent — the changed-after-send diff reads them. */
+  let sentVerdicts = $state<Record<string, VerdictEntry> | null>(
+    reviewAnswer?.verdicts ?? null,
+  )
+  let sentItems = $state<SentItemsMap | null>(reviewAnswer?.items ?? null)
+  /** The quiet done state's "Send again" reopens the composer. */
+  let composerOpen = $state(false)
+  /** The sent-summary block, focused after a send so keyboard focus lands
+   * on the state that replaced the composer (never dropped to <body>). */
+  let sentSummaryEl = $state<HTMLElement | null>(null)
+  // Re-seed whenever the server's answer changes (invalidateAll): the
+  // server read reflects every send this tab made, so the seed and a live
+  // send can never disagree for long.
+  $effect(() => {
+    const seed = reviewAnswer ?? null
+    answered = seed !== null
+    sentTo = seed?.sentTo ?? null
+    sentAt = seed?.sentAt ?? null
+    sentEventId = seed?.eventId ?? null
+    deliveredAt = seed?.deliveredAt ?? null
+    deliverable = seed?.deliverable ?? true
+    deliveredNow = false
+    sentVerdicts = seed?.verdicts ?? null
+    sentItems = seed?.items ?? null
+    composerOpen = false
+  })
+  const recipient = $derived(sentTo ?? answerTo ?? "the page owner")
+
+  // Poll the Send's delivery stamp while it is queued (mos-bi8t0). Stops
+  // the moment it lands, when the Send has no owner to reach, when the
+  // linked task is closed (mos-m3nfp — the answers were acted on; nobody
+  // is coming to stamp anything), or on unmount.
+  $effect(() => {
+    if (!answered || delivered || !sentEventId || !deliverable) return
+    if (taskClosed) return
+    const poll = reviewService?.deliveryStatus
+    if (!poll) return
+    const eventId = sentEventId
+    let stopped = false
+    const check = async () => {
+      nowMs = Date.now()
+      try {
+        const body = await poll({ artifactId, eventId })
+        if (stopped) return
+        if (body?.delivered && !stopped) {
+          deliveredAt = body.deliveredAt ?? new Date().toISOString()
+        }
+      } catch {
+        // Offline for a beat: the next tick retries.
+      }
+    }
+    const timer = window.setInterval(check, DELIVERY_POLL_MS)
+    void check()
+    return () => {
+      stopped = true
+      window.clearInterval(timer)
+    }
+  })
+
+  /**
+   * A drafted note the host keeps in the viewer's state (MOS: a cast from
+   * the desk under the reserved `desk:note` key — HostAdapter.review
+   * .draftNote). The send panel pre-fills from it and says where it came
+   * from; editing is free (drafts are editable).
+   */
+  const deskDraft = $derived(
+    reviewService?.draftNote?.(effectiveBlocks as Record<string, unknown>) ??
+      null,
+  )
+  /** The desk note this tab already sent (its text rode the answer): the
+   * same draft must not show again as pending in a re-send composer — a
+   * NEW cast after the send reads as different text and shows. */
+  let consumedDeskNote = $state<string | null>(null)
+  const pendingDeskDraft = $derived(
+    deskDraft && deskDraft.note !== consumedDeskNote ? deskDraft : null,
+  )
+  let deskDraftShown = $state(false)
+  $effect(() => {
+    // Pre-fill once, when the draft first arrives and the box is empty —
+    // never fight the reviewer's own typing.
+    if (!deskDraftShown && pendingDeskDraft && !finishText) {
+      finishText = pendingDeskDraft.note
+      deskDraftShown = true
+    }
+  })
+
+  /** The verdicts to send, built from the viewer's local state map — the
+   *  same reading the server runs for a desk Send (mos-yra79). */
+  const verdicts = $derived(verdictsFromBlocks(spec, effectiveBlocks))
+  /** Reviewable units: items inside item-review blocks, not
+   *  the blocks that hold them — the same units the census counts — plus
+   *  every other block's verdict and decision pick. */
+  const units = $derived(countReviewUnits(spec, effectiveBlocks))
+  const progress = $derived(pageReviewProgress(units))
+  const decidedCount = $derived(
+    units.approved + units.needsWork + units.rejected + units.chose,
+  )
+  const undecided = $derived(Math.max(0, units.total - decidedCount))
+  /**
+   * The plain "Done reviewing" moment over a page with things to decide
+   * (mos-3fl0h): no linked task, but decision cards or verdict blocks the
+   * viewer can answer. The header carries the same live progress, the
+   * still-open chip and the n / shift+N walk as Finish review.
+   */
+  const commentsReview = $derived(
+    !reviewMode && Boolean(comments?.enabled && onSaveBlock) && units.total > 0,
+  )
+  /** Either review moment: the open-item walk is live in both. */
+  const walkOpen = $derived(reviewMode || commentsReview)
+
+  /**
+   * Picks save, but nothing sends or records them: the page carries
+   * answerable content and save plumbing, yet the host gave no review leg
+   * this page can use (no `review.send` for a linked task, no
+   * `review.markReviewed` for Done reviewing). The viewer is told, instead
+   * of answering into a page nobody reads.
+   */
+  const answersGoNowhere = $derived(
+    Boolean(onSaveBlock) &&
+      answerContent &&
+      !reviewMode &&
+      !(canMarkReviewed && comments?.enabled),
+  )
+
+  // ---- The seeded done state (mos-7j6r5) --------------------------------
+  // The item verdicts the viewer would send NOW, read by the SAME function
+  // the server ran at send time — so a difference below is a real changed
+  // verdict, never a derivation mismatch. And the diff itself: what changed
+  // since this viewer last sent (the "Send changes (n)" count).
+  const currentItems = $derived.by(() => {
+    if (!spec) return {} as SentItemsMap
+    return itemVerdictsOf(effectiveBlocks, spec)
+  })
+  const changed = $derived(
+    changedSinceSend(sentVerdicts, verdicts, sentItems, currentItems),
+  )
+  /** The quiet done state's one-line "what was sent". */
+  const sentSummaryLine = $derived(sentAnswerLine(sentVerdicts, sentItems))
+
+  /** The chip's date: "Oct 13" (the year joins when it is not this one). */
+  function shortDay(iso: string): string {
+    const d = new Date(iso)
+    if (!Number.isFinite(d.getTime())) return ""
+    const opts: Intl.DateTimeFormatOptions = { month: "short", day: "numeric" }
+    if (d.getFullYear() !== new Date().getFullYear()) opts.year = "numeric"
+    return d.toLocaleDateString(undefined, opts)
+  }
+
+  // ---- Still-open units (mos-cs31v) -------------------------------------
+  // The census counts units; openReviewUnits names them, in page order. The
+  // header chip, the n / shift+N walk and the Finish panel's jump cards all
+  // read this one list, so they can never disagree with the count.
+  const OPEN_CARDS_MAX = 10
+  const openUnits = $derived(openReviewUnits(spec, effectiveBlocks))
+  const openCount = $derived(openUnits.length)
+
+  // ---- Header rows (mos-8fvt9) ------------------------------------------
+  /** Row 1's right side: save status + the review moment's one control. */
+  const showReviewControl = $derived(
+    (onSaveBlock !== undefined && blocksStatus !== "idle") ||
+      reviewMode ||
+      Boolean(comments?.enabled),
+  )
+  /** The still-open chip (Finish review mode) — the meter carries its own. */
+  const showOpenChip = $derived(
+    walkOpen && !answered && openCount > 0 && !commentsReview,
+  )
+  /** Row 2's right side: the progress meter and/or the still-open walk. */
+  const showProgress = $derived(showOpenChip || commentsReview)
+  const firstOpenCards = $derived(openUnits.slice(0, OPEN_CARDS_MAX))
+
+  /** What a card calls a unit: its own label, else the block registry's
+   *  name for the type, else the block id (a plain verdict block may carry
+   *  no params title). */
+  function unitLabel(u: Pick<OpenReviewUnit, "label" | "blockId"> & { type?: string }): string {
+    return u.label || (u.type ? blockDef(u.type)?.title : undefined) || u.blockId
+  }
+
+  /** The placeholder tile's glyph, per block kind. */
+  function openIcon(type: string): GlyphName {
+    switch (type) {
+      case "checklist":
+        return "list-checks"
+      case "media-picker":
+        return "images"
+      case "diff-review":
+        return "file-diff"
+      case "callout":
+        return "circle-help"
+      default:
+        return "badge-check"
+    }
+  }
+
+  /** The screen-reader line announcing a jump ("focus moves to the item,
+   *  announced"): cleared, then set a beat later, so the SAME destination
+   *  twice still announces. */
+  let jumpAnnouncement = $state("")
+  function announceJump(unit: JumpUnit) {
+    const label = unitLabel(unit)
+    const rest =
+      openCount === 1 ? "the last open item" : `${openCount} items still open`
+    jumpAnnouncement = ""
+    window.setTimeout(() => {
+      jumpAnnouncement = label ? `Jumped to ${label}. ${rest}.` : rest + "."
+    }, 60)
+  }
+
+  /** The jump cursor (openNav.ts): next/previous over the open list, and a
+   *  direct jump for a Finish card click. One shared instance — its cursor
+   *  outlives re-renders and inherits forward when the item under it is
+   *  decided. */
+  const openNav = createOpenNav({
+    getUnits: () => openUnits,
+    onJump: (unit) => {
+      // A card in a collapsed group is hidden, not gone: open its group
+      // and let the DOM catch up before the jump looks for it.
+      if (renderer?.revealBlock?.(unit.blockId)) flushSync()
+      revealUnit(unit)
+      announceJump(unit)
+    },
+  })
+
+  /** n / shift+N walk the still-open items (mos-cs31v) — page-level keys
+   *  under the same "not inside a block" rule as j / f / ? : inside a block
+   *  the block's own n (open a note) wins. Dead outside a review moment. */
+  function openNavKeys(e: KeyboardEvent): boolean {
+    if (e.defaultPrevented || e.isComposing) return false
+    if (e.ctrlKey || e.metaKey || e.altKey) return false
+    if (!isPageChromeTarget(e.target)) return false
+    const dir =
+      e.key === "n" && !e.shiftKey ? 1 : e.key === "N" && e.shiftKey ? -1 : 0
+    if (dir === 0 || !walkOpen || answered) return false
+    e.preventDefault()
+    openNav.jump(dir)
+    return true
+  }
+
+  /**
+   * One final action (mos-lfkys): the "Send answers" section sits at the
+   * foot of the page, right under the last card, so answering the last
+   * decision puts the send button in reach. The header button only brings
+   * you there — it is never a second step of its own.
+   */
+  let sendButton: HTMLButtonElement | undefined = $state()
+  function goToSend() {
+    const target = document.getElementById("send-answers")
+    if (!target) return
+    const reduce = window.matchMedia?.(
+      "(prefers-reduced-motion: reduce)",
+    ).matches
+    target.scrollIntoView({
+      behavior: reduce ? "auto" : "smooth",
+      block: "center",
+    })
+    sendButton?.focus({ preventScroll: true })
+  }
+
+  async function finishReview() {
+    if (finishing) return
+    finishing = true
+    finishError = null
+    try {
+      await renderer?.flush()
+      // mos-lwbbt (pe-dusk-sweep): a save that failed (burst cap, offline)
+      // left the answers ONLY in this tab — the server has none of them.
+      // Sending now would answer the task with nothing and overwrite the
+      // viewer's saved state with an empty fold. Refuse until every block's
+      // save lands; the Retry lives on the failed block itself.
+      const failed = renderer?.failedSaveBlocks?.() ?? []
+      if (failed.length > 0) {
+        throw new Error(
+          "Some answers are not saved yet — use Retry on the highlighted block(s), then send again.",
+        )
+      }
+      if (!reviewService) throw new Error("Answers can't be sent from here.")
+      const body = await reviewService.send({
+        artifactId,
+        version,
+        taskId: taskId ?? null,
+        blockTasks: Object.fromEntries(blockTasksOf(spec)),
+        verdicts: $state.snapshot(verdicts) as Record<string, VerdictEntry>,
+        text: finishText.trim() || undefined,
+        ...(finishClips.length > 0
+          ? { attachments: $state.snapshot(finishClips) as NoteAttachment[] }
+          : {}),
+      })
+      if (!body?.answered) {
+        throw new Error(
+          body?.error ?? "Your answers could not be sent. Send again.",
+        )
+      }
+      sentTo = body.sentTo ?? null
+      sentAt = new Date().toISOString()
+      nowMs = Date.now()
+      // A host that tracks no delivery sends no delivery block: delivered.
+      sentEventId = body.delivery?.eventId ?? null
+      deliveredNow = body.delivery ? body.delivery.delivered === true : true
+      deliveredAt = null
+      deliverable = body.delivery?.deliverable ?? true
+      // The tab knows what it just sent — seed the diff from it (deep-copied
+      // out of the renderer's $state map) so the quiet state reads
+      // "unchanged" immediately, without waiting for a reload.
+      sentVerdicts = $state.snapshot(verdicts) as Record<string, VerdictEntry>
+      sentItems = $state.snapshot(currentItems) as SentItemsMap
+      answered = true
+      reviewed = true
+      deskFocus = true
+      composerOpen = false
+      // The answer went out with its note; a "Send again" starts a NEW
+      // answer, not a re-edit of the old one (the context line above the
+      // composer says what went before).
+      finishText = ""
+      finishClips = []
+      consumedDeskNote = deskDraft?.note ?? null
+      // Keyboard focus follows the state change: the composer just
+      // unmounted, so land focus ON the sent summary (announced to screen
+      // readers by its aria-live status line).
+      await tick()
+      sentSummaryEl?.focus()
+    } catch (err) {
+      finishError = err instanceof Error ? err.message : String(err)
+    } finally {
+      finishing = false
+    }
+  }
+
+  // ---- Auto-send when complete (mos-yra79) ------------------------------
+  // Deciding the LAST open item sends the page by itself after a short
+  // grace, through the page's own Send (Finish review) or Done reviewing.
+  // A page that loads already complete, or one partly decided, stays a
+  // draft. Undo (or Esc) keeps it a draft; typing restarts the grace.
+  const autoSend = createAutoSend({
+    onSend: () => (reviewMode ? finishReview() : doneReviewing()),
+  })
+  $effect(() => {
+    const complete = units.total > 0 && undecided === 0
+    const eligible = reviewMode
+      ? !answered && !finishing
+      : commentsReview && canMarkReviewed && !reviewed && !reviewing
+    autoSend.update(complete, eligible)
+  })
+  $effect(() => () => autoSend.stop())
+
+  /**
+   * Review keys from page load (mos-lsmve.13): with focus on <body>, j / f /
+   * ? / gg go to the first review block. Verdict keys are never routed.
+   */
+  const pageKeys = createPageReviewKeys({
+    getBlocks: () =>
+      (spec?.blocks ?? []).filter((b) => isItemReviewBlock(b.type)),
+  })
+
+  /** Measured view width, exposed as --artifact-page-w for wide blocks. */
+  let pageWidth = $state(0)
+</script>
+
+<svelte:head>
+  {#if head}
+    <title>{title}</title>
+    {#if summary}
+      <meta name="description" content={summary} />
+    {/if}
+    <!-- Never let an internal page be indexed or previewed by a link unfurler. -->
+    <meta name="robots" content={robotsContent} />
+  {/if}
+</svelte:head>
+
+<svelte:window
+  oninput={() => autoSend.bump()}
+  onkeydown={(e) => {
+    if (autoSend.pending && e.key === "Escape" && !e.defaultPrevented) {
+      e.preventDefault()
+      autoSend.undo()
+      return
+    }
+    if (pageKeys.handleKeydown(e)) return
+    openNavKeys(e)
+  }}
+/>
+
+<!-- data-artifact-page + --artifact-page-w: wide blocks (a table with many
+     columns) may break out of the max-w-3xl reading column up to this view's
+     own measured width, never the viewport's (mos-8cbma). Measured, not a
+     CSS container: container-type would trap the drawers' position:fixed. -->
+<div
+  class="bg-base-100 flex min-h-screen flex-col"
+  data-artifact-page
+  bind:clientWidth={pageWidth}
+  style:--artifact-page-w={pageWidth ? `${pageWidth}px` : undefined}
+>
+  {#snippet openArrows()}
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm rounded-field px-1.5"
+      aria-label="Previous open item (shift+N)"
+      title="Previous open item (shift+N)"
+      onclick={() => openNav.jump(-1)}
+    >
+      <Glyph name="chevron-up" size={16} />
+    </button>
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm rounded-field px-1.5"
+      aria-label="Next open item (N)"
+      title="Next open item (N)"
+      onclick={() => openNav.jump(1)}
+    >
+      <Glyph name="chevron-down" size={16} />
+    </button>
+  {/snippet}
+
+  <header
+    class="border-base-content/10 bg-base-100 sticky top-[var(--rail-shell-top,0px)] z-10 border-b px-4 py-2.5 sm:px-6"
+  >
+    <!-- mos-8fvt9 (Joe 2026-10-20, "20% of the screen is chrome"): two rows,
+         three with the meta line. Each row is crumb/title/meta on the left
+         and its controls on the right:
+           1. crumb ............ save status · review control · frame actions
+           2. title + Details .................. progress meter / open chip
+           3. task chip · byline · data age .................... Listen pill
+         An expanded Listen player takes a new full-width row under row 3;
+         collapsed it takes none. Every row is flex-wrap with a min left
+         width, so on a phone the right side drops under its left side,
+         still right-aligned. DOM order is the reading order: crumb → review
+         → frame actions → title → details → progress → meta → player. -->
+    <div class="mx-auto max-w-3xl">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <div class="min-w-[min(100%,8rem)] flex-1">
+          {#if host.crumb}
+            {@render host.crumb()}
+          {/if}
+        </div>
+        {#if showReviewControl || frameActions}
+          <div
+            class="ml-auto flex max-w-full min-w-0 items-center justify-end gap-2"
+            data-header-end
+          >
+            {#if showReviewControl}
+              <div
+                class="flex max-w-full min-w-0 flex-wrap items-center justify-end gap-2"
+                data-review-control
+              >
+                {#if onSaveBlock && blocksStatus !== "idle"}
+                  <span
+                    class="shrink-0 text-xs tabular-nums {blocksStatus ===
+                    'failed'
+                      ? 'font-medium text-warning'
+                      : 'text-base-content/40'}"
+                    aria-live="polite"
+                  >
+                    {blocksStatus === "saving"
+                      ? "Saving…"
+                      : blocksStatus === "saved"
+                        ? "Saved ✓"
+                        : "Not saved. Retry on the block"}
+                  </span>
+                {/if}
+                {#if reviewMode}
+                  {#if answered && changed.total > 0}
+                    <!-- Changed after sending (mos-7j6r5): the ONLY state where the
+                 header carries a primary action again — the count is what
+                 changed, and the panel below holds the composer. -->
+                    <button
+                      type="button"
+                      class="btn btn-primary btn-sm rounded-field shrink-0"
+                      aria-controls="send-answers"
+                      onclick={goToSend}
+                    >
+                      Send changes
+                      <span class="tabular-nums opacity-80"
+                        >({changed.total})</span
+                      >
+                    </button>
+                  {:else if answered && taskClosed && !delivered}
+                    <!-- mos-m3nfp: the linked task closed with this viewer's answers
+                 in — they were acted on. Never the delivery warning for a
+                 review that is already over. -->
+                    <span
+                      class="border-success/30 bg-success/10 text-success inline-flex min-w-0 shrink-0 items-center gap-1.5 rounded-field border px-2.5 py-1 text-xs"
+                      role="status"
+                      title="The linked task ({taskId}) is closed. Your answers were received"
+                    >
+                      <span class="max-w-[9rem] truncate sm:max-w-none">
+                        Answers received · task closed
+                      </span>
+                    </span>
+                  {:else if answered && !delivered}
+                    <!-- Queued, not yet with the owner (mos-bi8t0). A page no agent
+                 owns (mos-m3nfp) says so plainly instead of warning about a
+                 delivery that will never happen. -->
+                    <span
+                      class="inline-flex min-w-0 shrink-0 items-center gap-1.5 rounded-field border px-2.5 py-1 text-xs {!deliverable ||
+                      !deliveryStalled
+                        ? 'border-base-content/15 bg-base-200 text-base-content/70'
+                        : 'border-warning/40 bg-warning/10 text-warning-content'}"
+                      role="status"
+                      title={!deliverable
+                        ? "No agent owns this page. Nobody was notified"
+                        : deliveryStalled
+                          ? `Not delivered to ${recipient} yet. Your answers are saved.`
+                          : `Sending to ${recipient}`}
+                    >
+                      {#if deliverable && !deliveryStalled}
+                        <span class="loading loading-spinner loading-xs"></span>
+                      {/if}
+                      <span class="max-w-[9rem] truncate sm:max-w-none">
+                        {!deliverable
+                          ? "No agent owns this page"
+                          : deliveryStalled
+                            ? "Saved, not delivered yet"
+                            : `Sending to ${recipient}…`}
+                      </span>
+                    </span>
+                  {:else if answered}
+                    <!-- Done (mos-7j6r5): a quiet status chip, never a primary
+                 button — the review is over until the viewer changes a
+                 verdict. Seeded from the server, so a reload keeps it. -->
+                    <span
+                      class="border-success/30 bg-success/10 text-success inline-flex min-w-0 shrink-0 items-center gap-1.5 rounded-field border px-2.5 py-1 text-xs"
+                      role="status"
+                      title="Sent to {recipient} ({taskId})"
+                    >
+                      <span class="max-w-[9rem] truncate sm:max-w-none">
+                        Sent to {recipient} ✓
+                      </span>
+                      {#if sentAt}
+                        <span class="text-success-content/70 tabular-nums">
+                          · {shortDay(sentAt)}
+                        </span>
+                      {/if}
+                    </span>
+                  {:else if taskClosed && units.total > 0 && undecided === 0}
+                    <!-- The task closed with every item decided (mos-7j6r5): the
+                 completed state, even for a viewer who never sent. -->
+                    <span
+                      class="border-success/30 bg-success/10 text-success shrink-0 rounded-field border px-2.5 py-1 text-xs"
+                      title="The linked task ({taskId}) is closed — your decisions stay saved on this page"
+                    >
+                      Decided · task closed
+                    </span>
+                  {:else}
+                    <button
+                      type="button"
+                      class="btn btn-primary btn-sm rounded-field shrink-0"
+                      aria-controls="send-answers"
+                      onclick={goToSend}
+                    >
+                      Finish review
+                      {#if units.total > 0}
+                        <span class="tabular-nums opacity-80"
+                          >{decidedCount}/{units.total}</span
+                        >
+                      {/if}
+                    </button>
+                  {/if}
+                {:else if comments?.enabled}
+                  {#if reviewed && commentsReview && undecided > 0}
+                    <!-- Recorded with items still open (an earlier press, or Finish
+               anyway): say so. "Review complete" is for a page with nothing
+               left to decide. -->
+                    <span
+                      class="border-base-content/15 bg-base-200 text-base-content/70 shrink-0 rounded-field border px-2.5 py-1 text-xs"
+                      title="You marked this version done with items still open. Your picks still save"
+                      data-reviewed-open
+                    >
+                      Marked done · {undecided} open
+                    </span>
+                  {:else if reviewed}
+                    <span
+                      class="border-success/30 bg-success/10 text-success shrink-0 rounded-field border px-2.5 py-1 text-xs"
+                      title="Recorded for this version — republishing starts a fresh page"
+                    >
+                      Review complete ✓
+                    </span>
+                  {:else if reviewService?.markReviewed}
+                    <button
+                      type="button"
+                      class="btn btn-outline btn-sm rounded-field shrink-0"
+                      disabled={reviewing}
+                      title={commentsReview && undecided > 0
+                        ? `${undecided} still open. Tell the publisher you are done reviewing this version`
+                        : "Tell the publisher you are done reviewing this version"}
+                      onclick={doneReviewing}
+                    >
+                      {reviewing ? "Recording…" : "Done reviewing"}
+                    </button>
+                  {/if}
+                  {#if reviewError && !reviewed}
+                    <span
+                      role="alert"
+                      class="text-error max-w-[16rem] text-xs"
+                      data-review-error>{reviewError}</span
+                    >
+                  {/if}
+                  {#if reviewed && host.nextActions}
+                    <!-- The cursor is still on the Done reviewing press, so
+                         the next actions land right beside it. -->
+                    {@render host.nextActions({
+                      compact: true,
+                      autofocus: deskFocus,
+                      nextKey: false,
+                    })}
+                  {/if}
+                {/if}
+              </div>
+            {/if}
+            {#if frameActions}
+              <div class="-mr-2 flex shrink-0 items-center" data-frame-actions>
+                {@render frameActions()}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <div class="flex min-w-[min(100%,16rem)] flex-1 items-start gap-2">
+          <h1
+            class="min-w-0 line-clamp-2 text-lg font-semibold break-words sm:text-xl"
+            title={titleMenuItems.length > 0
+              ? "Right-click for more actions"
+              : undefined}
+            oncontextmenu={openTitleMenu}
+          >
+            {title}
+          </h1>
+          {#if titleActions}
+            <div class="flex shrink-0 items-center gap-2" data-title-actions>
+              {@render titleActions()}
+            </div>
+          {/if}
+        </div>
+        {#if showProgress}
+          <!-- mos-8fvt9: the progress meter and the still-open arrows sit
+               on the title row, under the review control (Joe's mockup). -->
+          <div
+            class="ml-auto flex shrink-0 items-center justify-end gap-2"
+            data-review-progress
+          >
+            {#if showOpenChip}
+              <!-- Still-open chip (mos-cs31v): the count is live, and the arrows
+             walk the open items without leaving the header. -->
+              <div
+                class="flex shrink-0 items-center gap-0.5"
+                role="group"
+                aria-label="Still-open items"
+              >
+                <span
+                  class="border-warning/30 bg-warning/10 text-warning rounded-field border px-2 py-1 text-xs font-medium tabular-nums"
+                  aria-live="polite"
+                  aria-atomic="true"
+                >
+                  {openCount} open
+                </span>
+                {@render openArrows()}
+              </div>
+            {/if}
+            {#if commentsReview}
+              <!-- Live progress (mos-3fl0h): one card's pick is one step, and the
+             header says how many are left — never only a page-wide
+             button that reads as done after the first section. -->
+              <div class="flex shrink-0 items-center gap-2" data-review-meter>
+                <progress
+                  class="progress {undecided === 0
+                    ? 'progress-success'
+                    : 'progress-primary'} h-1.5 w-14 sm:w-20"
+                  value={decidedCount}
+                  max={units.total}
+                  aria-label="Review progress"
+                ></progress>
+                {#if !answered && openCount > 0}
+                  <!-- mos-7h9kt: the count itself goes to the next open item —
+                       "2 of 3 decided" over a page whose open item sits far
+                       below the fold read as "nothing left to press". -->
+                  <button
+                    type="button"
+                    class="text-base-content/70 hover:text-base-content rounded-field text-xs tabular-nums underline-offset-2 hover:underline"
+                    title="Go to the next open item (N)"
+                    data-review-count
+                    onclick={() => openNav.jump(1)}
+                  >
+                    <span aria-live="polite" aria-atomic="true"
+                      >{decidedCount} of {units.total} decided</span
+                    >
+                  </button>
+                {:else}
+                  <span
+                    class="text-base-content/70 text-xs tabular-nums"
+                    aria-live="polite"
+                    aria-atomic="true"
+                    data-review-count
+                  >
+                    {decidedCount} of {units.total} decided
+                  </span>
+                {/if}
+                {#if !answered && openCount > 0}
+                  <div
+                    class="flex items-center gap-0.5"
+                    role="group"
+                    aria-label="Still-open items"
+                  >
+                    {@render openArrows()}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      {#if summary}
+        <p class="text-base-content/70 mt-0.5 line-clamp-2 text-sm">
+          {summary}
+        </p>
+      {/if}
+      <div
+        class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1"
+        data-meta-row
+      >
+        <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+          {#if taskLine}
+            {@render taskLine()}
+          {/if}
+          <p class="text-base-content/50 text-xs">{byline}</p>
+          {#if dataAgeLine(live)}
+            <p
+              class="text-base-content/40 text-xs tabular-nums"
+              title={dataAgeTitle(live)}
+            >
+              {dataAgeLine(live)}
+            </p>
+          {/if}
+        </div>
+        {#if player}
+          <!-- Collapsed: a pill at the end of the meta line. Expanded: the
+               bar takes a full-width row of its own (see <style>). -->
+          <div class="meta-player ml-auto min-w-0" data-artifact-player>
+            {@render player()}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </header>
+  {#if titleMenuItems.length > 0}
+    <ContextMenu
+      bind:open={titleMenu.open}
+      x={titleMenu.x}
+      y={titleMenu.y}
+      header={host.titleMenu?.header}
+      items={titleMenuItems}
+    />
+  {/if}
+
+  <main class="mx-auto w-full max-w-3xl flex-1 px-4 py-6 sm:px-6">
+    {#if readOnly || answersGoNowhere}
+      <!-- Never look answerable over an answer that goes nowhere: a mount
+           with no save plumbing (a share link), or one that saves picks but
+           has no host leg to send or record them, says so here. The host
+           may word it itself (readOnlyNotice). -->
+      <aside
+        role="note"
+        class="border-base-content/15 bg-base-200 rounded-box mb-4 border p-3 text-sm"
+        data-read-only-notice={readOnly ? "read-only" : "unsent"}
+      >
+        {#if readOnlyNotice}
+          {@render readOnlyNotice({
+            kind: readOnly ? "read-only" : "unsent",
+            answerUrl,
+          })}
+        {:else if readOnly}
+          <p class="font-medium">Read-only view</p>
+          <p class="text-base-content/70 mt-0.5">
+            Answers aren't saved on this view.
+            {#if answerUrl}
+              <a href={answerUrl} class="link link-primary">Open to answer</a>.
+            {:else}
+              Open the page to answer.
+            {/if}
+          </p>
+        {:else}
+          <p class="font-medium">Your picks save, but go nowhere yet</p>
+          <p class="text-base-content/70 mt-0.5">
+            They stay on this page for you. Nobody is notified from here.
+            {#if answerUrl}
+              <a href={answerUrl} class="link link-primary">Open to answer</a>.
+            {/if}
+          </p>
+        {/if}
+      </aside>
+    {/if}
+    {#if foldedRounds.length > 0}
+      <!-- mos-guqgs scope 3: the rounds this page superseded, locked. -->
+      <FoldedRounds rounds={foldedRounds} initiallyOpen={foldedRoundsOpen} />
+    {/if}
+    {#if spec && comments && host.history}
+      <!-- History scrubber: session surfaces only (the host's service);
+           renders nothing without a trail. -->
+      <HistoryScrubber
+        {artifactId}
+        service={host.history}
+        currentData={live.data}
+        currentVersion={version}
+      />
+    {/if}
+    {#if spec}
+      <BlockRenderer
+        bind:this={renderer}
+        review={reviewMode || commentsReview}
+        onLocalChange={(b) => (localBlocks = b)}
+        {spec}
+        {artifactId}
+        {version}
+        {savedBlocks}
+        data={live.data}
+        {onSaveBlock}
+        readonly={!onSaveBlock}
+        comments={comments?.enabled
+          ? { enabled: true, counts: comments.counts }
+          : undefined}
+        onStatus={(s) => (blocksStatus = s)}
+      />
+    {:else}
+      <!-- Malformed stored spec: a visible card, never a crash. -->
+      <div
+        role="alert"
+        class="border-error/30 bg-error/10 text-error-content rounded-box border p-4 text-sm"
+      >
+        <p class="font-medium">This page's blocks spec could not be read.</p>
+        <p class="text-error-content/80 mt-1">
+          The stored version is malformed. Republishing the page fixes it.
+        </p>
+      </div>
+    {/if}
+    {#if spec && reviewMode}
+      <section
+        id="send-answers"
+        class="border-base-content/10 bg-base-200 rounded-box mt-8 border p-4"
+        aria-label="Send answers"
+      >
+        {#if answered && changed.total === 0 && !composerOpen}
+          <!-- Done (mos-7j6r5): the sent summary — what was sent, when, to
+               whom — never an empty composer waiting under an answer that
+               already went. "Send again" stays a secondary here. -->
+          <div
+            class="flex flex-col gap-1.5"
+            data-sent-summary
+            bind:this={sentSummaryEl}
+            tabindex="-1"
+          >
+            {#if delivered}
+              <p
+                class="text-success font-medium"
+                role="status"
+                aria-live="polite"
+              >
+                Sent to {recipient} ✓
+              </p>
+            {:else if taskClosed}
+              <!-- mos-m3nfp: the linked task closed — the answers were acted
+                   on. Says received, not "not delivered"; no Send again (the
+                   review is over; the changed-verdict path still offers one
+                   when this viewer edits after the fact). -->
+              <p
+                class="text-success font-medium"
+                role="status"
+                aria-live="polite"
+              >
+                Answers received. The linked task is closed.
+              </p>
+              <p class="text-base-content/60 text-xs">
+                Your decisions stay saved on this page.
+              </p>
+            {:else if deliveryStalled}
+              <!-- The fallback (mos-bi8t0): the owner has not picked the
+                   answer up. Say so — never a "Sent ✓" it did not earn. -->
+              <div
+                class="alert alert-warning rounded-box text-sm"
+                role="status"
+                aria-live="polite"
+                data-delivery-stalled
+              >
+                <div class="flex flex-col gap-1">
+                  <p class="font-medium">
+                    {deliverable
+                      ? `Not delivered to ${recipient} yet.`
+                      : "No agent owns this page, so no one was notified."}
+                  </p>
+                  <p>
+                    Your answers are saved on this page.
+                    {deliverable
+                      ? `They go to ${recipient} as soon as delivery runs. This page updates when they arrive.`
+                      : "Tell the person who sent you this page that you finished."}
+                  </p>
+                </div>
+              </div>
+            {:else}
+              <p
+                class="text-base-content/70 inline-flex items-center gap-2 font-medium"
+                role="status"
+                aria-live="polite"
+              >
+                <span class="loading loading-spinner loading-xs"></span>
+                Sending to {recipient}…
+              </p>
+            {/if}
+            {#if sentSummaryLine}
+              <p class="text-base-content/70 text-xs">{sentSummaryLine}</p>
+            {/if}
+            <p class="text-base-content/50 text-xs">
+              {#if sentAt}{shortDay(sentAt)} ·
+              {/if}<span class="font-mono">{taskId}</span>
+            </p>
+            {#if !taskClosed || host.nextActions}
+              <div class="mt-2 flex flex-wrap items-end gap-2">
+                {#if !taskClosed}
+                  <!-- Send again lives on every live review (a real stall
+                       keeps it, mos-bi8t0); a CLOSED task's review is over,
+                       so it steps aside here (mos-m3nfp). -->
+                  <button
+                    type="button"
+                    class="btn btn-outline btn-sm rounded-field"
+                    onclick={() => (composerOpen = true)}
+                  >
+                    Send again
+                  </button>
+                {/if}
+                {#if host.nextActions}
+                  <!-- On the right, where the Send press left the cursor. -->
+                  {@render host.nextActions({
+                    compact: false,
+                    autofocus: deskFocus,
+                    nextKey: true,
+                  })}
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {:else if !answered && taskClosed && units.total > 0 && undecided === 0}
+          <!-- The task closed with every item decided (mos-7j6r5): the
+               review moment is over even though this viewer never sent. -->
+          <div class="flex flex-col gap-1.5" data-task-closed>
+            <p class="text-success font-medium" role="status">
+              Decided · task closed
+            </p>
+            <p class="text-base-content/60 text-xs">
+              The linked task is closed. Your decisions stay saved on this page.
+            </p>
+            <p class="text-base-content/50 font-mono text-xs">{taskId}</p>
+            {#if host.nextActions}
+              <div class="mt-2 flex">
+                {@render host.nextActions({
+                  compact: false,
+                  autofocus: false,
+                  nextKey: true,
+                })}
+              </div>
+            {/if}
+          </div>
+        {:else}
+          {#if answered}
+            <!-- Re-send context (mos-7j6r5): what went before, quietly,
+                 above the composer that will send the changes as a NEW
+                 answer. -->
+            <p class="text-base-content/60 text-xs" data-sent-context>
+              {delivered ? "Sent to" : "Not yet delivered to"}
+              {recipient}{sentAt
+                ? ` on ${shortDay(sentAt)}`
+                : ""}{sentSummaryLine ? ` (${sentSummaryLine})` : ""}. Your
+              changes send as a new answer.
+            </p>
+          {/if}
+          {#if units.total > 0}
+            {#if progress.lines.length === 0}
+              <ReviewProgress
+                {...progress}
+                size="sm"
+                label="Review progress across the page"
+              />
+            {:else}
+              <!-- Mixed vocabularies (mos-lsmve.14): no one set of words is
+                   on the page, so the bar sums by tone and each block keeps
+                   its own sentence — never "approved" for a Pass or an Accept. -->
+              <ReviewProgress
+                {...progress}
+                size="sm"
+                hideSentence
+                label="Review progress across the page: {progress.headline}"
+              />
+              <p
+                class="text-base-content/70 mt-1.5 text-xs tabular-nums"
+                aria-live="polite"
+              >
+                {progress.headline}
+              </p>
+              <ul
+                class="mt-2 flex flex-col gap-2"
+                aria-label="Progress by block"
+              >
+                {#each progress.lines as line (line.key)}
+                  <li class="flex flex-col gap-0.5">
+                    <span
+                      class="text-base-content/80 truncate text-xs font-medium"
+                      >{line.title}</span
+                    >
+                    <ReviewProgress
+                      verdicts={line.verdicts}
+                      counts={line.counts}
+                      total={line.total}
+                      retest={line.retest}
+                      decidedWord={line.decidedWord}
+                      size="xs"
+                      live={false}
+                      label="{line.title} review progress"
+                    />
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          {/if}
+          {#if openUnits.length > 0}
+            <!-- Still-open jump cards (mos-cs31v): nobody scrolls back up
+                 hunting "1 still open" — the open items are HERE, one click
+                 from being in front of you. -->
+            <div class="@container mt-3">
+              <ul
+                class="grid grid-cols-2 gap-2 @xl:grid-cols-3"
+                aria-label="Still-open items"
+              >
+                {#each firstOpenCards as u (u.key)}
+                  <li>
+                    <button
+                      type="button"
+                      class="border-base-content/10 bg-base-100 hover:border-primary focus-visible:border-primary flex w-full items-center gap-2 rounded-box border p-1.5 text-left transition-colors"
+                      onclick={() => openNav.jumpTo(u)}
+                      aria-label="Jump to {unitLabel(u)}"
+                    >
+                      {#if u.thumb}
+                        <img
+                          src={u.thumb}
+                          alt=""
+                          loading="lazy"
+                          class="bg-base-content/5 h-10 w-10 shrink-0 rounded-field object-cover"
+                        />
+                      {:else}
+                        <span
+                          class="bg-base-content/5 text-base-content/40 flex h-10 w-10 shrink-0 items-center justify-center rounded-field"
+                          aria-hidden="true"
+                        >
+                          <Glyph name={openIcon(u.type)} size={16} />
+                        </span>
+                      {/if}
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-xs font-medium">
+                          {unitLabel(u)}
+                        </span>
+                        {#if u.context && u.label}
+                          <span
+                            class="text-base-content/50 text-2xs block truncate"
+                          >
+                            {u.context}
+                          </span>
+                        {/if}
+                        {#if u.retest}
+                          <span class="text-warning text-2xs block font-medium">
+                            to retest
+                          </span>
+                        {/if}
+                      </span>
+                    </button>
+                  </li>
+                {/each}
+                {#if openUnits.length > OPEN_CARDS_MAX}
+                  <li class="col-span-2 flex items-center gap-2 @xl:col-span-3">
+                    <p class="text-base-content/60 text-xs">
+                      and {openUnits.length - OPEN_CARDS_MAX} more…
+                    </p>
+                    <button
+                      type="button"
+                      class="btn btn-outline btn-xs rounded-field ml-auto"
+                      onclick={() => openNav.jump(1)}
+                    >
+                      Next open
+                    </button>
+                  </li>
+                {/if}
+              </ul>
+            </div>
+          {/if}
+          {#if pendingDeskDraft}
+            <!-- The desk's draft (mos-chsj7 D2): what will be sent, said up
+                 front — the note pre-fills below and edits freely. -->
+            <p
+              class="border-info/30 bg-info/10 text-info-content mt-3 rounded-field border px-3 py-2 text-xs"
+              data-desk-draft
+            >
+              {pendingDeskDraft.label}
+            </p>
+          {/if}
+          <!-- The ONE composer (mos-rccb5): the Finish note carries text,
+               voice/video/screen recordings and files (pasted, dropped or
+               picked), stored in the artifact's private asset store and sent
+               with the ONE answer. No submit row of its own — Send answers
+               below is the page's one final action and drives the send. The
+               desk-draft prefill (above) writes `finishText`, which the
+               composer binds as its draft text — D2's semantics unchanged. -->
+          <NoteComposer
+            {artifactId}
+            class="mt-3"
+            bind:text={finishText}
+            bind:clips={finishClips}
+            rows={2}
+            maxLength={4000}
+            placeholder="Anything else to say? (optional)"
+            label="Note with your answers (optional)"
+            autofocus={composerOpen}
+          />
+          {#if finishError}
+            <div
+              role="alert"
+              class="border-error/30 bg-error/10 text-error-content rounded-box mt-2 border p-2 text-sm"
+            >
+              {finishError}
+            </div>
+          {/if}
+          <div
+            class="mt-3 flex flex-wrap items-center justify-end gap-x-3 gap-y-2"
+          >
+            <p class="text-base-content/60 mr-auto min-w-0 text-xs">
+              {#if undecided > 0}
+                {undecided} still open. Send now or keep going.
+              {:else if deliverable}
+                Goes to {recipient}
+              {:else}
+                <!-- mos-m3nfp: never promise a recipient nobody can be. -->
+                No agent owns this page. Answers save here
+              {/if}
+              <span class="text-base-content/40 font-mono">· {taskId}</span>
+            </p>
+            <button
+              type="button"
+              bind:this={sendButton}
+              class="btn btn-sm rounded-field {undecided > 0
+                ? 'btn-outline'
+                : 'btn-primary'}"
+              disabled={finishing}
+              onclick={finishReview}
+            >
+              {finishing
+                ? "Sending…"
+                : changed.total > 0
+                  ? `Send changes (${changed.total})`
+                  : answered
+                    ? "Send again"
+                    : finishError
+                      ? "Send again"
+                      : "Send answers"}
+            </button>
+          </div>
+        {/if}
+      </section>
+    {/if}
+  </main>
+
+  {#if autoSend.pending}
+    <!-- Auto-send (mos-yra79): polite, never steals focus; Undo and Send
+         now are both reachable by Tab, and Esc undoes. The live text is
+         announced once; the ticking seconds are visual only. -->
+    <div
+      class="fixed inset-x-0 bottom-4 z-40 flex justify-center px-4"
+      transition:motionFade={{ duration: "fast" }}
+      data-auto-send
+    >
+      <div
+        class="bg-base-content text-base-100 rounded-box flex max-w-full flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 text-sm shadow-lg"
+      >
+        <p role="status" aria-live="polite">
+          <span class="font-semibold">All decided.</span>
+          <span class="sr-only"
+            >Your answers send in {AUTO_SEND_DELAY_MS / 1000} seconds. Press Undo
+            to keep them as a draft.</span
+          >
+          <span aria-hidden="true"
+            >Sending in <span class="tabular-nums">{autoSend.remaining}s</span
+            ></span
+          >
+        </p>
+        <button
+          type="button"
+          class="btn btn-sm btn-ghost text-base-100 rounded-field"
+          onclick={() => autoSend.undo()}
+          data-auto-send-undo
+        >
+          Undo
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-primary rounded-field"
+          onclick={() => autoSend.sendNow()}
+        >
+          Send now
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Jump announcements (mos-cs31v): the header chip's count is live, and
+       focus lands ON the item, but the jump itself says where it landed —
+       a card whose own label announces nothing still reports the jump. -->
+  <p class="sr-only" role="status" aria-live="polite">
+    {jumpAnnouncement}
+  </p>
+</div>
+
+<style>
+  /* mos-8fvt9: the page's Listen pill rides the meta line; once opened,
+     jatui's bar (.lc-bar) replaces the pill and the cell takes a new
+     full-width row of the header (flex-basis 100% forces the wrap). */
+  .meta-player {
+    margin-block: -0.25rem;
+  }
+  .meta-player:has(:global(.lc-bar)) {
+    flex-basis: 100%;
+    margin-block: 0.25rem 0;
+    margin-left: 0;
+  }
+</style>