@plannotator/ui 0.53.1 → 0.54.0

package/components/InboxAnnouncementDialog.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ArrowUpRight, Play } from 'lucide-react';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog';
+
+/**
+ * One-time announcement for the Plannotator Inbox, on plan review, annotate
+ * and code review. Nearly full screen: the Inbox film from plannotator.ai/inbox
+ * fills the top, under it one title, one sentence, "Close" and one link to the
+ * Inbox page.
+ *
+ * Built on the shared dialog (`./ui/dialog`, Base UI): modal, focus trapped,
+ * focus restored on close, the backdrop and Escape close it. Like the other
+ * announcements it swallows Mod+Enter on the capture phase, so a keystroke
+ * aimed at it cannot approve a plan or post a review behind it.
+ *
+ * The film is the marketing page's own file (`apps/marketing/public/assets/
+ * inbox-film.mp4`, 1920x1080, ~14 MB, voice-led), served from
+ * plannotator.ai/assets like the other announcements' footage. It never
+ * autoplays and is `preload="none"`: opening the dialog fetches only the poster
+ * (~120 KB), and the film downloads when the reader presses play. Until then
+ * the frame is the poster with one play button, as on the Inbox page; after
+ * that the native controls take over (sound, seeking, full screen). If the
+ * film cannot load, the frame says so and the rest of the dialog is unchanged.
+ */
+
+/** The Inbox page on plannotator.ai. */
+export const INBOX_PAGE_URL = 'https://plannotator.ai/inbox';
+
+/** Where the marketing deploy publishes `apps/marketing/public/assets/`. */
+const MEDIA_BASE_URL = 'https://plannotator.ai/assets';
+
+export const INBOX_FILM = {
+  mp4: `${MEDIA_BASE_URL}/inbox-film.mp4`,
+  poster: `${MEDIA_BASE_URL}/inbox-film-poster.jpg`,
+} as const;
+
+/** The film is 1920x1080. */
+const FILM_ASPECT = 16 / 9;
+
+/**
+ * The panel's width also follows the viewport height, so on a short window the
+ * film shrinks until film and footer fit instead of scrolling the film away.
+ * 2rem is the overlay's padding, 10rem the footer on a wide panel.
+ */
+const PANEL_WIDTH =
+  `min(1200px, 100%, calc((var(--pn-viewport-height, 100dvh) - 2rem - 10rem) * ${FILM_ASPECT}))`;
+
+interface InboxAnnouncementDialogProps {
+  readonly isOpen: boolean;
+  /**
+   * Marks the announcement seen and closes it. Wired to Close, Escape, the
+   * backdrop and the link to the Inbox page.
+   */
+  readonly onDismiss: () => void;
+}
+
+function Film() {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [started, setStarted] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  const play = () => {
+    setStarted(true);
+    // A rejected play() (autoplay policy, no media) leaves the native
+    // controls up, which offer play again.
+    void videoRef.current?.play()?.catch(() => {});
+  };
+
+  return (
+    <div className="relative w-full shrink-0 overflow-hidden border-b border-border bg-muted" style={{ aspectRatio: String(FILM_ASPECT) }}>
+      <video
+        ref={videoRef}
+        data-inbox-film
+        poster={INBOX_FILM.poster}
+        controls={started}
+        playsInline
+        preload="none"
+        aria-label="The Plannotator Inbox film"
+        // A source that cannot be fetched errors on <source>; a file that was
+        // fetched but cannot be decoded errors on the element itself.
+        onError={() => setFailed(true)}
+        className="absolute inset-0 h-full w-full bg-muted object-contain"
+      >
+        <source src={INBOX_FILM.mp4} type="video/mp4" onError={() => setFailed(true)} />
+      </video>
+
+      {failed ? (
+        <p
+          data-inbox-film-unavailable
+          className="absolute inset-0 grid place-items-center bg-background/75 px-6 text-center text-sm text-muted-foreground backdrop-blur-sm"
+        >
+          The film could not load. It is also on the Inbox page.
+        </p>
+      ) : !started ? (
+        <button
+          type="button"
+          onClick={play}
+          aria-label="Play the Inbox film"
+          data-inbox-film-play
+          className="group absolute inset-0 grid place-items-center outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+        >
+          <span className="grid size-16 place-items-center rounded-full border border-border/60 bg-background/80 text-foreground shadow-lg backdrop-blur-sm transition-transform motion-reduce:transition-none group-hover:scale-105 sm:size-20">
+            <Play className="ml-1 size-6 fill-current sm:size-7" aria-hidden="true" />
+          </span>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function InboxAnnouncementDialog({ isOpen, onDismiss }: InboxAnnouncementDialogProps) {
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const onDismissRef = useRef(onDismiss);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Escape is handled here rather than by the dialog so that no window
+      // handler of the App behind it (close a panel, leave a mode) sees it.
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onDismissRef.current();
+        return;
+      }
+      // Both apps submit their decision on Mod+Enter from a window-level
+      // handler; swallow it on the capture phase.
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onDismissRef.current();
+      }}
+    >
+      <DialogContent
+        hideClose
+        initialFocus={closeRef}
+        data-inbox-announcement-dialog
+        backdropClassName="bg-background/90 backdrop-blur-sm"
+        style={{ width: PANEL_WIDTH }}
+        className="max-h-full max-w-none rounded-xl bg-card text-card-foreground shadow-2xl motion-reduce:transition-none"
+      >
+        <Film />
+
+        <div className="flex min-h-0 flex-col gap-5 overflow-y-auto px-5 py-5 sm:flex-row sm:items-end sm:justify-between sm:gap-8 sm:px-7 sm:py-6">
+          <div className="min-w-0">
+            <DialogTitle className="text-balance text-xl font-semibold tracking-tight sm:text-2xl">
+              The Plannotator Inbox
+            </DialogTitle>
+            <DialogDescription className="mt-1.5 max-w-xl text-pretty leading-relaxed">
+              Questions, blockers and reviews from your agents arrive in one inbox while they work,
+              and your answers go back to them.
+            </DialogDescription>
+          </div>
+
+          <div className="flex shrink-0 flex-col-reverse gap-2 sm:flex-row sm:items-center">
+            <button
+              ref={closeRef}
+              type="button"
+              data-inbox-announcement-close
+              onClick={() => onDismissRef.current()}
+              className="min-h-10 rounded-lg border border-border px-4 text-sm font-medium text-foreground outline-none transition-colors motion-reduce:transition-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+            >
+              Close
+            </button>
+            <a
+              href={INBOX_PAGE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-inbox-announcement-learn-more
+              // Following the link counts as seeing the announcement. Closed on
+              // the next task: a link removed from the page during its own click
+              // is not followed.
+              onClick={() => {
+                setTimeout(() => onDismissRef.current(), 0);
+              }}
+              className="inline-flex min-h-10 items-center justify-center gap-1.5 rounded-lg bg-primary px-5 text-sm font-medium text-primary-foreground outline-none transition-opacity motion-reduce:transition-none hover:opacity-90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+            >
+              Learn about the Inbox
+              <ArrowUpRight className="size-4" aria-hidden="true" />
+            </a>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/InlineMarkdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { isCodeFilePath, isCodeFilePathStrict, CODE_PATH_BARE_REGEX, parseCodePath } from "@plannotator/core/code-file";
-import { forgeRefLinks } from "@plannotator/core/forge-refs";
+import { findCrossRepoRef, forgeRefLinks, matchCrossRepoRef, type CrossRepoRef } from "@plannotator/core/forge-refs";
 import { ensureHighlight, highlightToHtml } from "../utils/codeHighlight";
 import { useFenceTheme } from "../hooks/useFenceTheme";
 import { transformPlainText } from "../utils/inlineTransforms";
@@ -380,6 +380,34 @@ export function trimUrlTail(url: string): string {
   return url;
 }
 
+// Index of the first bare `http(s)://` URL that starts after index 0 and
+// before `end` at a word boundary AND runs past `end`, or -1. Only such a
+// URL needs the chunk split: one that ends inside the chunk is linked by
+// emitPlainTextWithBareUrls in the same pass, exactly as before, so a
+// paragraph of many URLs stays one pass instead of a loop turn (and a
+// rescan of the rest of the text) per URL. Index 0 is left to the caller's
+// own bare-URL check, which already ran for it.
+const BARE_URL_SCHEME = /https?:\/\//g;
+const BARE_URL_AT = /https?:\/\/[^\s<>"']+/y;
+function bareUrlRunningPast(text: string, end: number): number {
+  // Only a scheme that starts before `end` counts, so read no further than
+  // `end` plus the longest scheme ("https://" less its first character).
+  const window = text.slice(0, end + 7);
+  BARE_URL_SCHEME.lastIndex = 1;
+  let m: RegExpExecArray | null;
+  while ((m = BARE_URL_SCHEME.exec(window)) !== null && m.index < end) {
+    if (/\w/.test(window[m.index - 1])) continue;
+    BARE_URL_AT.lastIndex = m.index;
+    const url = BARE_URL_AT.exec(text);
+    if (!url) continue;
+    const urlEnd = m.index + trimUrlTail(url[0]).length;
+    if (urlEnd > end) return m.index;
+    // The URL ends inside the chunk; look for the next one after it.
+    BARE_URL_SCHEME.lastIndex = Math.max(urlEnd, m.index + 1);
+  }
+  return -1;
+}
+
 // Scan a plain-text chunk for bare https?:// URLs and bare code file paths
 // at word boundaries, emitting them as interactive nodes. Surrounding text
 // passes through transformPlainText for emoji shortcodes + smart punctuation.
@@ -474,35 +502,73 @@ function emitPlainTextWithBareUrls(
   }
 }
 
-/** An image a host resolver chose; a load failure shows the placeholder. */
+/**
+ * An image a host resolver chose; a load failure shows the placeholder.
+ *
+ * The `<img>` element itself never leaves the document: on failure the
+ * placeholder is inserted BEFORE it (React's reference node is then the
+ * `<img>`, which it owns) and the `<img>` is hidden. Replacing the `<img>`
+ * would make React insert before the node that follows it, and when that is
+ * a text node the annotation highlighter already moved into a `<mark>` (a
+ * restored comment starting right after the image), `insertBefore` throws
+ * and the whole document unmounts. A loaded image's DOM is unchanged.
+ */
 const HostResolvedImage: React.FC<{
   src: string;
   alt: string;
+  /** The src as written in the markdown (`data-image-src`, read by the image viewer's region comments). */
+  writtenSrc?: string;
   onImageClick?: (src: string, alt: string) => void;
-}> = ({ src, alt, onImageClick }) => {
+}> = ({ src, alt, writtenSrc, onImageClick }) => {
   const [failedSrc, setFailedSrc] = useState<string | null>(null);
-  if (failedSrc === src) {
-    return (
-      <span className={UNAVAILABLE_IMAGE_CLASS} title="Image could not be loaded" data-image-unavailable="">
-        {alt || 'Image'}
-      </span>
-    );
-  }
+  const failed = failedSrc === src;
   return (
-    <img
-      src={src}
-      alt={alt}
-      className="max-w-full rounded my-2 cursor-zoom-in"
-      loading="lazy"
-      onError={() => setFailedSrc(src)}
-      onClick={(e) => {
-        e.stopPropagation();
-        onImageClick?.(src, alt);
-      }}
-    />
+    <>
+      {failed && (
+        <span key="unavailable" className={`${UNAVAILABLE_IMAGE_CLASS} annotation-exclude`} title="Image could not be loaded" data-image-unavailable="">
+          {alt || 'Image'}
+        </span>
+      )}
+      <img
+        key="image"
+        src={src}
+        alt={failed ? '' : alt}
+        data-image-src={writtenSrc}
+        data-image-failed={failed ? '' : undefined}
+        hidden={failed || undefined}
+        aria-hidden={failed || undefined}
+        className={failed ? undefined : 'max-w-full rounded my-2 cursor-zoom-in'}
+        loading="lazy"
+        onError={() => setFailedSrc(src)}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!failed) onImageClick?.(src, alt);
+        }}
+      />
+    </>
   );
 };
 
+/**
+ * Whether a digit-only 6/8-digit `#123456` is an issue ref (when a ref link can
+ * be built) rather than a hex swatch. Off by default: every host renders such
+ * values as colours. The Plannotator Inbox turns it on through
+ * `configurePlannotatorUI({ digitHexIssueRefs: true })` (#1932).
+ */
+let digitHexIssueRefs = false;
+
+export function setDigitHexIssueRefs(on: boolean): void {
+  digitHexIssueRefs = on;
+}
+
+export function resetDigitHexIssueRefs(): void {
+  digitHexIssueRefs = false;
+}
+
+export function getDigitHexIssueRefs(): boolean {
+  return digitHexIssueRefs;
+}
+
 /**
  * Scanner that walks a text string and emits React nodes for inline markdown:
  * emphasis (**bold**, *italic*, _italic_, ***both***), `code`, ~~strikethrough~~,
@@ -543,6 +609,13 @@ export const InlineMarkdown: React.FC<{
   const resolveLocalLink = useLocalLinkResolver();
   const resolveImage = useImageResolver();
   const refLinks = forgeRefLinks({ display: githubRepo, host: repoHost });
+  // Cross-repo `owner/repo#123` refs: only for a caller that names its
+  // project's repo (it knows the forge); otherwise they stay plain text, never
+  // a guessed github.com link. With a code-file handler, an `owner/repo` that
+  // is a code path not known to be missing stays the file (`src/app.js#12`).
+  const crossRepoProject = githubRepo ? { host: repoHost } : null;
+  const crossRepoAccept = (ref: CrossRepoRef): boolean =>
+    !(onOpenCodeFile && isCodeFilePathStrict(ref.path) && gateCodePath(ref.path, validation ?? null).render !== 'plain');
   const parts: React.ReactNode[] = [];
   let remaining = text;
   let key = 0;
@@ -650,6 +723,32 @@ export const InlineMarkdown: React.FC<{
       }
     }
 
+    // Cross-repo ref: owner/repo#123, shown as written, linked on the
+    // project's forge host. Read before file-path detection, so
+    // `vercel/next.js#1` is a ref, not a path (unless the viewer knows that
+    // file, see crossRepoAccept); `docs/guide.md#2` stays a path.
+    const crossRepoRef = crossRepoProject ? matchCrossRepoRef(remaining, previousChar, crossRepoProject) : null;
+    if (crossRepoRef && crossRepoAccept(crossRepoRef)) {
+      parts.push(
+        crossRepoRef.href ? (
+          <a
+            key={key++}
+            href={crossRepoRef.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary font-medium hover:underline"
+          >
+            {crossRepoRef.label}
+          </a>
+        ) : (
+          crossRepoRef.label
+        ),
+      );
+      remaining = remaining.slice(crossRepoRef.label.length);
+      previousChar = crossRepoRef.label[crossRepoRef.label.length - 1];
+      continue;
+    }
+
     // Autolinks: <https://url> or <email@domain.com>
     match = remaining.match(/^<(https?:\/\/[^>]+)>/);
     if (match) {
@@ -846,9 +945,19 @@ export const InlineMarkdown: React.FC<{
     }
 
     // Hex color swatch — 3/4-digit forms need an a-f letter to avoid matching issue refs like #123.
+    // 6/8-digit forms with no letter (#186379) are ambiguous. By default they
+    // stay swatches (greys like #333333 are common in docs; six-digit issues are
+    // rare). A host that opts in with `configurePlannotatorUI({ digitHexIssueRefs:
+    // true })` (the Plannotator Inbox, #1932) gets an issue ref instead, but only
+    // when a ref link can actually be built (`refLinks`: a repo path on a known
+    // forge) and the ref branch below would take it: a word boundary and no
+    // leading zero (issue numbers never start with 0, so #000000 stays a colour).
     match = remaining.match(
       /^(#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|(?=[0-9a-fA-F]*[a-fA-F])[0-9a-fA-F]{4}|(?=[0-9a-fA-F]*[a-fA-F])[0-9a-fA-F]{3}))(?![0-9a-fA-F\w])/,
     );
+    if (match && digitHexIssueRefs && refLinks && /^#[1-9]\d*$/.test(match[1]) && !/\w/.test(previousChar)) {
+      match = null;
+    }
     if (match) {
       const hex = match[1];
       parts.push(
@@ -872,8 +981,8 @@ export const InlineMarkdown: React.FC<{
     }
 
     // Issue / PR reference: #123 — only at word boundary, digits only.
-    // Hex-swatch branch above already consumed #fff / #123abc etc., so a bare
-    // #\d+ here is safe to treat as an issue ref.
+    // Hex-swatch branch above already consumed #fff / #123abc etc. (and digit-only
+    // #123456 / #12345678 unless the host opted in), so a bare #\d+ here is an issue ref.
     if (!/\w/.test(previousChar)) {
       match = remaining.match(/^#(\d+)(?!\w)/);
       if (match) {
@@ -1027,12 +1136,13 @@ export const InlineMarkdown: React.FC<{
         resolveImage ? (
           // With a host resolver, an image that fails to load becomes the
           // same placeholder instead of a broken-image icon.
-          <HostResolvedImage key={key++} src={imgSrc} alt={alt} onImageClick={onImageClick} />
+          <HostResolvedImage key={key++} src={imgSrc} alt={alt} writtenSrc={src} onImageClick={onImageClick} />
         ) : (
           <img
             key={key++}
             src={imgSrc}
             alt={alt}
+            data-image-src={src}
             className="max-w-full rounded my-2 cursor-zoom-in"
             loading="lazy"
             onClick={(e) => {
@@ -1272,6 +1382,24 @@ export const InlineMarkdown: React.FC<{
     // multi-char patterns like emoji shortcodes. Bare URLs are instead
     // detected inline via emitPlainTextWithBareUrls() below.
     const nextSpecial = remaining.slice(1).search(/[\*_`\[!~\\<#@$]/);
+    // A bare URL that starts inside this plain-text chunk and runs past its
+    // end would be cut there, and `_`, `~`, `#`, `@`, `$` and `!` all end a
+    // chunk (`…/w/ws_01…` rendered a link to `…/w/ws`). Stop the chunk where
+    // that URL starts instead, so the bare-URL branch above takes it whole.
+    const chunkEnd = nextSpecial === -1 ? remaining.length : nextSpecial + 1;
+    // Same for an owner/repo#123 ref: `#` (and `_` in a name) ends a chunk, so
+    // stop before the ref and let the cross-repo branch above take it whole.
+    // A ref inside a URL never splits it: the URL starts first and wins.
+    const urlAt = bareUrlRunningPast(remaining, chunkEnd);
+    const refAt = crossRepoProject ? findCrossRepoRef(remaining, urlAt === -1 ? chunkEnd : urlAt, crossRepoProject, crossRepoAccept) : -1;
+    const splitAt = refAt !== -1 ? refAt : urlAt;
+    if (splitAt !== -1) {
+      const before = remaining.slice(0, splitAt);
+      emitPlainTextWithBareUrls(before, previousChar, parts, () => key++, onOpenCodeFile, validation, imageBaseDir);
+      previousChar = before[before.length - 1] || previousChar;
+      remaining = remaining.slice(splitAt);
+      continue;
+    }
     const plainText = nextSpecial === -1 ? remaining : remaining.slice(0, nextSpecial + 1);
     emitPlainTextWithBareUrls(plainText, previousChar, parts, () => key++, onOpenCodeFile, validation, imageBaseDir);
     previousChar = plainText[plainText.length - 1] || previousChar;

package/components/KeyboardShortcuts.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import {
   formatShortcutBindingTokens,
   listScopeShortcuts,
+  resolveShortcutBindings,
+  reviewExplorerShortcuts,
+  reviewMarkdownPreviewShortcuts,
   vimSelectionShortcuts,
+  type ShortcutScopeDefinition,
 } from '../shortcuts';
 import { isMac, modKey, altKey } from '../utils/platform';
 
@@ -141,6 +145,23 @@ const vimShortcuts: ShortcutSection[] = (() => {
   return Array.from(sections, ([title, shortcuts]) => ({ title, shortcuts }));
 })();
 
+/** Sections read from registry scopes (this system's keys), so they cannot drift. */
+function scopeSections(scope: ShortcutScopeDefinition<any>): ShortcutSection[] {
+  const sections = new Map<string, Shortcut[]>();
+  const entries = listScopeShortcuts(scope)
+    .sort((left, right) => (left.displayOrder ?? 0) - (right.displayOrder ?? 0));
+  for (const entry of entries) {
+    const shortcuts = sections.get(entry.section) ?? [];
+    shortcuts.push({
+      keys: formatShortcutBindingTokens(resolveShortcutBindings(entry)[0] ?? ''),
+      desc: entry.description,
+      hint: entry.hint,
+    });
+    sections.set(entry.section, shortcuts);
+  }
+  return Array.from(sections, ([title, shortcuts]) => ({ title, shortcuts }));
+}
+
 const planActionShortcuts: ShortcutSection = {
   title: 'Actions',
   shortcuts: [
@@ -213,6 +234,8 @@ const reviewShortcuts: ShortcutSection[] = [
       { keys: ['Z'], desc: 'Undo collapse', hint: 'Reopens the last collapsed file and scrolls to it' },
     ],
   },
+  ...scopeSections(reviewExplorerShortcuts),
+  ...scopeSections(reviewMarkdownPreviewShortcuts),
   {
     title: 'Annotations',
     shortcuts: [

package/components/LazyBlockBoundary.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+
+/**
+ * A part of the page that a code-split build loads as its own chunk (a
+ * diagram, an HTML or SVG embed, the diagram popout, the Markdown preview)
+ * can fail to arrive: a flaky link, a server that has stopped, or a tab older
+ * than the server's build, whose chunk names no longer exist. React.lazy then
+ * throws, and without a boundary React unmounts the whole app, taking the
+ * user's unsent comments and edits off the screen with it.
+ *
+ * This boundary keeps the failure in place of that one part. The caller's
+ * `fallback` gets a small notice with a Reload action (`LazyLoadNotice`) and
+ * draws it beside whatever it can still show, usually the block's source.
+ * The rest of the page stays mounted. Nothing reloads by itself.
+ *
+ * With no error it renders its children and nothing else.
+ */
+export class LazyBlockBoundary extends React.Component<
+  { fallback: (notice: React.ReactNode) => React.ReactNode; children: React.ReactNode },
+  { failed: boolean; error: unknown }
+> {
+  state = { failed: false, error: null as unknown };
+
+  static getDerivedStateFromError(error: unknown) {
+    return { failed: true, error };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error('[plannotator] A part of the page could not load:', error);
+  }
+
+  render() {
+    if (this.state.failed) return this.props.fallback(<LazyLoadNotice error={this.state.error} />);
+    return this.props.children;
+  }
+}
+
+/**
+ * The URL of the chunk a failed dynamic import asked for, when the error names
+ * one on this page's origin. Chromium and Firefox put it in the message
+ * ("Failed to fetch dynamically imported module: http://…/assets/x.js");
+ * Safari does not, and then the notice says the general thing.
+ */
+export function failedChunkUrl(error: unknown): string | null {
+  if (typeof window === 'undefined') return null;
+  const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+  const match = /(https?:\/\/[^\s'"]+|\/assets\/[^\s'"]+)/.exec(message);
+  if (!match) return null;
+  try {
+    const url = new URL(match[1], window.location.href);
+    return url.origin === window.location.origin ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * One quiet line: why the part is missing, and Reload. A chunk the server
+ * answers with 404 is a tab older than the server's build (the server was
+ * updated on the same port), so the line says that instead. Finding out costs
+ * one HEAD request, made only after a failure.
+ */
+export const LazyLoadNotice: React.FC<{ error: unknown }> = ({ error }) => {
+  const [updated, setUpdated] = useState(false);
+  useEffect(() => {
+    const url = failedChunkUrl(error);
+    if (url === null || typeof fetch !== 'function') return;
+    let live = true;
+    fetch(url, { method: 'HEAD', cache: 'no-store' }).then(
+      (response) => {
+        if (live && response.status === 404) setUpdated(true);
+      },
+      () => {},
+    );
+    return () => {
+      live = false;
+    };
+  }, [error]);
+
+  return (
+    <div
+      role="status"
+      data-lazy-load-failed={updated ? 'updated' : ''}
+      className="mb-1.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground"
+    >
+      <span>{updated ? 'This page was updated.' : "Couldn't load this view."}</span>
+      {/* The hit area is padding cancelled by a negative margin, so the line
+          looks the same: 24px tall everywhere, 44px on a touch screen. On
+          touch it grows upward into the block's top margin, never down over
+          the source under it. */}
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        className="relative -mx-1 -my-1 px-1 py-1 font-medium text-foreground underline-offset-2 hover:underline [@media(pointer:coarse)]:-mb-1.5 [@media(pointer:coarse)]:-mt-[22px] [@media(pointer:coarse)]:pb-1.5 [@media(pointer:coarse)]:pt-[22px]"
+      >
+        {updated ? 'Reload to see this' : 'Reload'}
+      </button>
+    </div>
+  );
+};

package/components/ListMarker.tsx

@@ -60,17 +60,17 @@ export const ListMarker: React.FC<ListMarkerProps> = ({
       aria-checked={interactive ? checked : undefined}
     >
       {showNumeral && (
-        <span className="text-primary/60 tabular-nums text-right" style={{ minWidth: '1.5rem' }}>
+        <span className="text-primary/60 tabular-nums text-right" style={{ minWidth: '1.5rem' }} data-list-numeral="">
           {orderedIndex}.
         </span>
       )}
       {isCheckbox ? (
         checked ? (
-          <svg className="w-4 h-4 text-success mt-[3px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+          <svg data-list-check="" className="w-4 h-4 text-success mt-[3px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
         ) : (
-          <svg className={`w-4 h-4 text-muted-foreground/50 mt-[3px]${interactive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          <svg data-list-check="" className={`w-4 h-4 text-muted-foreground/50 mt-[3px]${interactive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
             <circle cx="12" cy="12" r="9" />
           </svg>
         )

package/components/LookAndFeelAnnouncementDialog.tsx

@@ -12,6 +12,12 @@ interface LookAndFeelAnnouncementDialogProps {
   onToggleGrid: (value: boolean) => void;
   /** Persists the current choice and closes the dialog. */
   onDismiss: () => void;
+  /**
+   * `first-run` (default): the first-use choice. `moved`: the one-time notice
+   * for someone moved from Grid to Clean when Clean became the default; the
+   * same chooser, with a line saying what changed.
+   */
+  variant?: 'first-run' | 'moved';
 }
 
 const LOOK_OPTIONS: {
@@ -48,6 +54,7 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
   gridEnabled,
   onToggleGrid,
   onDismiss,
+  variant = 'first-run',
 }) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const continueRef = useRef<HTMLButtonElement>(null);
@@ -115,6 +122,7 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
       <div
         ref={dialogRef}
         role="dialog"
+        data-plan-look-prompt={variant}
         aria-modal="true"
         aria-labelledby="plan-look-choice-title"
         aria-describedby="plan-look-choice-description"
@@ -129,13 +137,15 @@ export const LookAndFeelAnnouncementDialog: React.FC<LookAndFeelAnnouncementDial
             id="plan-look-choice-title"
             className="text-balance text-xl font-semibold tracking-tight sm:text-2xl"
           >
-            Choose how plans look
+            {variant === 'moved' ? 'Plans now open in Clean' : 'Choose how plans look'}
           </h2>
           <p
             id="plan-look-choice-description"
             className="mt-1 text-sm leading-relaxed text-muted-foreground"
           >
-            Pick a starting view. You can change it anytime in Settings.
+            {variant === 'moved'
+              ? "Grid is one switch away in Settings, or pick it here."
+              : "Pick a starting view. You can change it anytime in Settings."}
           </p>
         </header>