@khorsheed/dsh-reader 0.2.1 → 0.3.1

package/lib/types/client/ReaderPane.js

@@ -11,8 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   round trip.
  * - **the detail view** — clicking a card opens it. This is the whole point:
  *   the body renders as DOM text, which is what makes passage quoting work
- *   (the QUOTE plugin's own selection menu sees it), and it is why the pane
- *   never hosts a sandboxed iframe.
+ *   (the QUOTE plugin's own selection menu sees it). The one non-text island:
+ *   an article's content embeds survive as sandboxed iframes (opaque origin,
+ *   no `allow-same-origin`) or controls-only media elements — neither can see
+ *   this page, and neither carries quotable text.
  * - **the add dialog** — an overlay in the members-tab idiom, because adding is
  *   a momentary act and the wall should stay where it was behind it. The host
  *   decides whether a pasted URL is a feed or an article from what comes back
@@ -30,14 +32,44 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IconChevronDownOutlineMedium, IconChevronLeftOutlineMedium, IconClockOutlineMedium, IconCopyOutlineMedium, IconGlobeOutlineMedium, IconPlusOutlineMedium, IconRefreshOutlineMedium, IconRightUpOutlineMedium, IconSettingsOutlineMedium, IconTrashOutlineMedium } from "./icons.js";
-import { kindQuery, linkEntryId, READER_SOURCE_KINDS, } from "../types.js";
+import { ChipRow, PanelHeader, PanelRoot, UnderlineTabs, usePanelCompactContext } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { NoteSheet, NotesView } from "./NotesView.js";
+import { MediaPlayer } from "./MediaPlayer.js";
+import { useMedia } from "./useMedia.js";
+import { useLocalTranscript } from "./useLocalTranscript.js";
+import { useMediaStates } from "./useMediaStates.js";
+import { SpeakerLegend } from "./SpeakerLegend.js";
+import { usePolish } from "./usePolish.js";
+import { blockElements } from "./notes.js";
+import { readMediaMeta } from "../media.js";
+import { formatClock } from "../captions.js";
+import { MEDIA_QUERIES } from "./selectors.js";
+import { useNotes } from "./useNotes.js";
+import { kindQuery, linkEntryId, READER_SOURCE_KINDS, isCookieHandshake, } from "../types.js";
 import { extractArticle } from "./extract-article.js";
 import { parseFeed } from "./parse-rss.js";
-import { absoluteDate, clockOf, formatReaderRef, mergedDraft, provenanceOf, relativeWhen } from "./quote.js";
-import { TARGET_CANDIDATES, buildArticle, createSession, detectSourceLanguage, detectTranslator, isTargetLanguage, primeMemory, restoreArticle, runTranslation, segmentAt, segmentsOf, setPairHover, setView, toggleSegment, translateTexts, translationHash, } from "./translate.js";
+import { absoluteDate, clockOf, relativeWhen } from "./quote.js";
+import { TARGET_CANDIDATES, applyRemembered, buildArticle, createSession, detectSourceLanguage, detectTranslator, isTargetLanguage, primeMemory, restoreArticle, runTranslation, segmentAt, segmentsOf, setPairHover, setView, toggleSegment, remembered, translateTexts, translationHash, } from "./translate.js";
 import { countUnread, dedupeRows, flattenEntries, fetchStateOf, LIST_RENDER_LIMIT, hueForSource, rowFor, selectRows, sourceQuery, tagQuery, tileForSource, } from "./selectors.js";
-import { cachedTranslator, forgetTranslation, patchSession, readSession, rememberReadingPosition, rememberTranslation, rememberWallScroll, rememberTranslator, } from "./session.js";
+import { cachedTranslator, forgetTranslation, patchSession, readSession, rememberReadingPosition, rememberTranslation, rememberWallScroll, rememberTranslator, readWallCache, sourceStamp, writeWallCache, } from "./session.js";
 import css from './ReaderPane.module.css';
+/**
+ * An in-flight line that says WHAT is running and, once it has taken a moment,
+ * how long it has been — the difference between "working" and "dead" on a slow
+ * page. The elapsed figure only appears after a few seconds: a fast fetch never
+ * shows a number at all.
+ */
+function BusyLine({ t, label, since }) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const timer = setInterval(() => { setNow(Date.now()); }, 1000);
+        return () => { clearInterval(timer); };
+    }, []);
+    const elapsed = since === undefined ? 0 : Math.max(0, Math.round((now - since) / 1000));
+    return (_jsx("p", { className: css.incomplete, children: _jsxs("span", { className: css.renderingLine, children: [_jsx("span", { className: css.renderingRing, "aria-hidden": "true" }), label, elapsed >= 3 ? ` · ${t('detail.fetchElapsed', { seconds: elapsed })}` : ''] }) }));
+}
+/** The global 「转完自动翻译」 preference (a per-browser convenience). */
+const AUTO_TRANSLATE_KEY = 'dsh-reader.autoTranslateTranscripts';
 /** A tiny stroke glyph set for the chrome the host has no icon for. */
 const STROKE = {
     search: 'M7 2.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Zm3.4 8.2 3 3',
@@ -72,6 +104,9 @@ function isCjk(html) {
 /** The wall's tag panel box: the width it is clamped with, and the height
  *  placement estimates from the vocabulary (its real height is bounded by CSS). */
 const TAG_PANEL_WIDTH = 236;
+/** The card menu's footprint, for keeping a menu opened at the screen's edge on screen. */
+const CARD_MENU_WIDTH = 168;
+const CARD_MENU_HEIGHT = 120;
 const TAG_PANEL_MAX_HEIGHT = 296;
 /**
  * How many sources it takes before the picker's own search box appears. Below
@@ -113,7 +148,7 @@ function TagSuggestions({ t, tags, applied, draft, onToggle, onCreate }) {
     const exact = tags.some(tag => tag.name.toLowerCase() === needle);
     return (_jsxs(_Fragment, { children: [suggested.map(tag => {
                 const on = applied.includes(tag.id);
-                return (_jsxs("button", { type: "button", className: css.tagRow, "data-on": on || undefined, 
+                return (_jsxs("button", { type: "button", className: css.tagOption, "data-on": on || undefined, 
                     // Keep the field focused: the detail editor closes on blur, and a
                     // mousedown that moves focus would dismiss the list mid-click.
                     onMouseDown: event => { event.preventDefault(); }, onClick: () => { onToggle(tag); }, children: [_jsx("span", { className: css.tagRowCheck, children: on ? '✓' : '' }), _jsx("span", { className: css.tagRowName, children: tag.name })] }, tag.id));
@@ -203,7 +238,7 @@ function whenLabel(t, iso) {
  * @returns the reader-facing sentence.
  */
 function describeFetchFailure(reason, t) {
-    if (/^HTTP (401|403)/.test(reason))
+    if (/^HTTP (401|403)/.test(reason) || /bot challenge/i.test(reason) || isCookieHandshake(reason))
         return t('sources.blocked');
     if (/^HTTP \d{3}/.test(reason))
         return t('sources.httpError');
@@ -212,6 +247,19 @@ function describeFetchFailure(reason, t) {
     }
     return t('detail.fetchFailed', { reason: reason.slice(0, 160) });
 }
+/**
+ * Whether a fetch failure is one a real browser gets past: a bot challenge,
+ * a 401/403 that refuses non-browser requests, or a cookie handshake
+ * (Springer Nature's idp bounce). These are the reasons the
+ * rendered fetch (the capture package's headless Chrome) exists to answer; a
+ * login wall is not among them — a cookie-less browser meets it too.
+ *
+ * @param reason - the host's recorded message.
+ * @returns true when escalating to the rendered fetch is worth a try.
+ */
+export function browserSolvable(reason) {
+    return /bot challenge|^HTTP 40[13]\b/i.test(reason) || isCookieHandshake(reason);
+}
 /** How many entries the automatic backfill fetches at once. */
 const BACKFILL_CONCURRENCY = 2;
 /**
@@ -438,9 +486,17 @@ function linkMetaOf(row) {
         return undefined;
     return { title: row.entry.title, ...(row.entry.summary === undefined ? {} : { excerpt: row.entry.summary }) };
 }
-/** The reader tab body. */
+/**
+ * The reader tab body, inside the shared panel root: the `dsh-panel` size
+ * container its compact rules query, and the compact flag the wall's and the
+ * detail's headers read (panel-responsive-spec P2).
+ */
 export function ReaderPane(props) {
-    const { sessionId, useStore, actions, t } = props;
+    return _jsx(PanelRoot, { className: css.panelRoot, children: _jsx(ReaderPaneBody, { ...props }) });
+}
+/** The reader's pages: wall, detail, recent, manage. */
+function ReaderPaneBody(props) {
+    const { useStore, actions, t } = props;
     const sources = useStore(s => s.sources);
     const parsed = useStore(s => s.parsed);
     const articleHtml = useStore(s => s.articleHtml);
@@ -469,6 +525,8 @@ export function ReaderPane(props) {
     const refreshing = useStore(s => s.refreshing);
     const tags = useStore(s => s.tags);
     const tagCounts = useStore(s => s.tagCounts);
+    /** A panel at or below the compact width (a phone, a narrow sidebar). */
+    const compact = usePanelCompactContext() === true;
     const entryTagIds = useStore(s => s.entryTagIds);
     const cacheTtlHours = useStore(s => s.cacheTtlHours);
     const backfill = useStore(s => s.backfill);
@@ -567,12 +625,29 @@ export function ReaderPane(props) {
      * (cached or fresh), so reopening an entry shows the same note.
      */
     const [scriptFigures, setScriptFigures] = useState(0);
-    /** True while a capture-rendered refetch of the open entry is in flight. */
-    const [captureBusy, setCaptureBusy] = useState(false);
+    /**
+     * The entry whose capture-rendered refetch is in flight. Per entry, not a
+     * pane-wide flag: opening another article mid-render must not show it the
+     * first one's progress line (or disable its 「重新抓取」).
+     */
+    const [captureBusyId, setCaptureBusyId] = useState(null);
+    const captureBusy = captureBusyId !== null && captureBusyId === openEntryId;
+    /**
+     * Why the last rendered fetch of an entry came back without a body. The
+     * recorded refusal (「拒绝自动抓取」) stays the line's lead, so without this
+     * a failed render would be indistinguishable from one never attempted.
+     */
+    const [captureFailure, setCaptureFailure] = useState(null);
     /** Entries whose stored body came from a rendered fetch (the「重新抓取」route reads it). */
     const renderedBodiesRef = useRef(new Set());
     /** Auto-render fires once per entry per pane session; failures leave the manual retry. */
     const autoRenderTriedRef = useRef(new Set());
+    /**
+     * Which leg of a fetch is running, keyed to its entry: the detail view's
+     * 「抓取中」 line renders the phase (download → extract → store) and the
+     * elapsed time, so a slow page reads as progress instead of a dead click.
+     */
+    const [bodyFetch, setBodyFetch] = useState(null);
     /** What the plugin holds per entry, as the host reports it (the 抓取 pills). */
     const fetchStates = useStore(s => s.fetchStates);
     /** What the reader opened, as the host stores it (the 「最近阅读」 page). */
@@ -580,11 +655,15 @@ export function ReaderPane(props) {
     const [addOpen, setAddOpen] = useState(false);
     const [sortOpen, setSortOpen] = useState(false);
     const [draftUrl, setDraftUrl] = useState('');
+    /** When the in-flight add began — the dialog's busy line, and the double-submit guard. */
+    const [addBusySince, setAddBusySince] = useState(null);
     const [verdict, setVerdict] = useState(null);
-    const [draft, setDraft] = useState('');
-    const [sideChatAvailable, setSideChatAvailable] = useState(false);
     const [timeOfDay, setTimeOfDay] = useState('10:00');
     const [filterOpen, setFilterOpen] = useState(false);
+    /** Compact only: the search row is folded behind the header's search icon until asked for. */
+    const [searchOpen, setSearchOpen] = useState(false);
+    /** Several incomplete sources fold into one line until the reader asks for the list. */
+    const [noticeOpen, setNoticeOpen] = useState(false);
     /** The filter panel's page: its root, or the drilled-in source list. */
     const [filterPage, setFilterPage] = useState('root');
     /** The source page's own search box (the list grows without bound). */
@@ -617,6 +696,13 @@ export function ReaderPane(props) {
     /** The page's Translator API, read once: no API means no button at all. */
     const translator = useMemo(() => detectTranslator(), []);
     const [translateAvailability, setTranslateAvailability] = useState(null);
+    /**
+     * Without a Translator API (iOS, every non-Chromium browser): the pair of the
+     * host's stored translation of THIS body, when there is one — the globe then
+     * shows that translation and can make no new one. Null on a page that has the
+     * API, and on a body nothing was stored for.
+     */
+    const [storedPair, setStoredPair] = useState(null);
     const [translatePhase, setTranslatePhase] = useState('idle');
     const [translateView, setTranslateView] = useState('trans');
     const [packProgress, setPackProgress] = useState(null);
@@ -626,8 +712,18 @@ export function ReaderPane(props) {
     const [tipDismissed, setTipDismissed] = useState(false);
     /** The rendered article, so the segmentation can be applied to it. */
     const articleRef = useRef(null);
+    /** Images already rescued through the host, original URL → data URI (this mount's). */
+    const rescuedImagesRef = useRef(new Map());
     /** The detail view's scroller, which is where a reading position lives. */
     const detailRef = useRef(null);
+    /** The article's own heading, which the compact bar watches scroll away. */
+    const detailTitleRef = useRef(null);
+    /**
+     * Whether the article's heading has scrolled up out of the body. The compact
+     * bar starts empty (the heading sits right below it) and takes the title only
+     * then, so a reader deep in the text still sees what they are reading.
+     */
+    const [titleScrolledAway, setTitleScrolledAway] = useState(false);
     /** The live segmentation, or null while the article is untouched. */
     const builtRef = useRef(null);
     /** The running translation's cancel flag. */
@@ -650,6 +746,9 @@ export function ReaderPane(props) {
     const [wallAvailability, setWallAvailability] = useState(null);
     /** Translated card fields, by entry id. */
     const [cardTranslations, setCardTranslations] = useState(() => ({ ...snapshot.cardTranslations }));
+    /** The card texts as the wall pass sees them (it runs outside render). */
+    const cardTranslationsRef = useRef(cardTranslations);
+    cardTranslationsRef.current = cardTranslations;
     const [wallProgress, setWallProgress] = useState(null);
     /**
      * The translated FIELD under the pointer, in the translation-only view.
@@ -719,23 +818,52 @@ export function ReaderPane(props) {
         reveal: css.reveal ?? 'dsh-reader-reveal',
         line: css.revealLine ?? 'dsh-reader-reveal-line',
     }), []);
+    /** This mount has not loaded yet (the cached wall is shown once, on the first load). */
+    const firstLoadRef = useRef(true);
     /** Load the source list and parse whatever payloads the host is holding. */
     const load = useCallback(async () => {
-        actions.setLoading(true);
+        // A remount (the reader came back from another sidebar tab) shows the wall
+        // it already parsed at once, and only re-reads what changed meanwhile.
+        const cached = readWallCache();
+        const restored = cached !== undefined && firstLoadRef.current;
+        firstLoadRef.current = false;
+        if (restored) {
+            actions.setSources([...cached.sources]);
+            for (const { parsed: entry, label } of cached.parsed.values()) {
+                actions.setParsed(entry);
+                if (label !== undefined)
+                    actions.setSourceLabel(entry.id, label);
+            }
+        }
+        if (cached === undefined)
+            actions.setLoading(true);
+        const fresh = new Map(cached?.parsed ?? []);
+        const labels = new Map();
+        let stampOf = new Map();
+        const put = (parsed) => {
+            actions.setParsed(parsed);
+            const stamp = stampOf.get(parsed.id);
+            if (stamp !== undefined)
+                fresh.set(parsed.id, { stamp, parsed, ...(labels.has(parsed.id) ? { label: labels.get(parsed.id) } : {}) });
+        };
+        let known = [];
         try {
             const listed = await props.listSources();
             if (!listed.ok) {
                 actions.setError(listed.error.message);
                 return;
             }
-            const known = listed.value.sources;
+            known = [...listed.value.sources];
             actions.setSources(known);
+            stampOf = new Map(known.map(source => [source.id, sourceStamp(source)]));
             // Sources whose payload is wanted: the ones that have a body, PLUS every
             // saved link — a link with no body is still a card the reader must see,
             // and the host answers that request with the reason instead of a payload.
             // (Asking only for sources with bodies made an unreadable link vanish from
             // the wall entirely, which is a worse answer than "link only".)
-            const wanted = known.filter(source => source.hasBody || source.kind === 'link');
+            // Unchanged since the cached parse: nothing to fetch (the wall already shows it).
+            // (Only on that restore: a refresh or an add re-reads everything, as before.)
+            const wanted = known.filter(source => (source.hasBody || source.kind === 'link') && (!restored || fresh.get(source.id)?.stamp !== stampOf.get(source.id)));
             if (wanted.length === 0)
                 return;
             const bodies = await props.getBodies(wanted.map(source => source.id));
@@ -756,10 +884,10 @@ export function ReaderPane(props) {
                 const cut = body.truncated === true;
                 if (body.raw === undefined) {
                     if (source.kind === 'rss') {
-                        actions.setParsed({ id: source.id, entries: [], error: body.error ?? t('detail.extractFailed') });
+                        put({ id: source.id, entries: [], error: body.error ?? t('detail.extractFailed') });
                     }
                     else {
-                        actions.setParsed({
+                        put({
                             id: source.id,
                             entries: [{
                                     id: linkEntryId(source.id),
@@ -789,8 +917,9 @@ export function ReaderPane(props) {
                     // parse a feed — it has no XML parser), so the parsed title wins.
                     if (result.ok && result.feed.title !== undefined) {
                         actions.setSourceLabel(source.id, result.feed.title);
+                        labels.set(source.id, result.feed.title);
                     }
-                    actions.setParsed(result.ok
+                    put(result.ok
                         ? {
                             id: source.id,
                             entries: result.feed.entries.map(entry => cut ? { ...entry, truncated: true } : entry),
@@ -801,13 +930,15 @@ export function ReaderPane(props) {
                 }
                 else {
                     const extracted = extractArticle(body.raw, source.url);
+                    // A video / episode link's synthetic page carries its media (media-host.ts).
+                    const linkMedia = readMediaMeta(body.raw);
                     // The card's title/excerpt: the article's own when THIS extraction
                     // read one, else the captured ones from an earlier extraction, else
                     // the URL-derived label — a saved link's card names the paper.
                     const extractedTitle = extracted.ok ? extracted.title : undefined;
                     const extractedExcerpt = extracted.ok ? extracted.excerpt : undefined;
                     const excerpt = extractedExcerpt ?? body.excerpt;
-                    actions.setParsed({
+                    put({
                         id: source.id,
                         entries: [{
                                 id: linkEntryId(source.id),
@@ -825,6 +956,7 @@ export function ReaderPane(props) {
                                 // Incompleteness comes from the FETCH, not from extraction: the
                                 // seam truncated the page, so whatever we extracted is partial.
                                 ...(cut ? { truncated: true } : {}),
+                                ...(linkMedia === undefined ? {} : { media: linkMedia }),
                             }],
                     });
                 }
@@ -832,6 +964,10 @@ export function ReaderPane(props) {
         }
         finally {
             actions.setLoading(false);
+            if (known.length > 0) {
+                const ids = new Set(known.map(source => source.id));
+                writeWallCache({ sources: known, parsed: new Map([...fresh].filter(([id]) => ids.has(id))) });
+            }
         }
     }, [actions, props, t]);
     const backfillRunning = useRef(false);
@@ -886,7 +1022,6 @@ export function ReaderPane(props) {
         void props.capabilities().then(result => {
             if (!result.ok)
                 return;
-            setSideChatAvailable(result.value.hasSideChat);
             actions.setSchedule(result.value.lastRefreshAt, result.value.nextRefreshAt);
             if (result.value.nextRefreshAt !== undefined)
                 setTimeOfDay(clockOf(result.value.nextRefreshAt));
@@ -938,6 +1073,17 @@ export function ReaderPane(props) {
         }
         return counts;
     }, [allEntries, presentation]);
+    /** How many video / audio entries the wall holds, for the type filter. */
+    const mediaCounts = useMemo(() => {
+        const counts = { video: 0, audio: 0 };
+        for (const entry of allEntries)
+            if (entry.media !== undefined)
+                counts[entry.media.kind] += 1;
+        return counts;
+    }, [allEntries]);
+    /** The wall's video / audio cards, for their transcript pills. */
+    const mediaEntryIds = useMemo(() => allEntries.filter(entry => entry.media !== undefined).slice(0, LIST_RENDER_LIMIT).map(entry => entry.id), [allEntries]);
+    const mediaCards = useMediaStates(mediaEntryIds, view === 'list', props);
     /** One sweep at a time: the wall can re-render while an extraction runs. */
     const sweepRunning = useRef(false);
     /** The entry ids currently on the wall, for the fetch-state round trip. */
@@ -1109,6 +1255,126 @@ export function ReaderPane(props) {
         return item === undefined ? undefined : entryFromRecent(item);
     }, [allEntries, recent]);
     const openEntry = openEntryId === null ? undefined : entryById(openEntryId);
+    /** The open article's notes (see useNotes — they read the article, never drive it). */
+    // A transcript's speakers: the reader's names for them (host-kept), else 说话人 A, B, ….
+    const hasSpeakers = articleHtml?.includes('data-spk=') === true;
+    const [speakerNamesOf, setSpeakerNamesOf] = useState(undefined);
+    const speakerNames = useMemo(() => (speakerNamesOf !== undefined && speakerNamesOf.entryId === openEntry?.id ? speakerNamesOf.names : {}), [speakerNamesOf, openEntry?.id]);
+    useEffect(() => {
+        const id = openEntry?.id;
+        if (id === undefined || !hasSpeakers)
+            return;
+        void props.speakerNames({ entryId: id }).then(answer => { if (answer.ok)
+            setSpeakerNamesOf({ entryId: id, names: answer.value }); });
+    }, [openEntry?.id, hasSpeakers, props]);
+    const speakerLabel = useCallback((speaker) => speakerNames[String(speaker)] ?? t('media.speakerDefault', { letter: String.fromCharCode(65 + speaker) }), [speakerNames, t]);
+    /** How many voices the open transcript has (its highest speaker index + 1). */
+    const speakerCount = useMemo(() => {
+        if (!hasSpeakers || articleHtml === null)
+            return 0;
+        let top = -1;
+        for (const match of articleHtml.matchAll(/data-spk="(\d+)"/g))
+            top = Math.max(top, Number(match[1]));
+        return top + 1;
+    }, [hasSpeakers, articleHtml]);
+    const renameSpeaker = useCallback((speaker, name) => {
+        const id = openEntry?.id;
+        if (id === undefined)
+            return;
+        void props.nameSpeaker({ entryId: id, speaker, name }).then(answer => { if (answer.ok)
+            setSpeakerNamesOf({ entryId: id, names: answer.value }); });
+    }, [openEntry?.id, props]);
+    const notesFace = useNotes({
+        props,
+        entry: openEntry,
+        sourceLabel: openEntry === undefined ? '' : presentation.get(openEntry.sourceId)?.label ?? '',
+        articleHtml,
+        articleRef,
+        builtRef,
+        detailRef,
+        paintKey: `${translatePhase}:${String(translateProgress?.done ?? 0)}`,
+        translateView,
+        ...(hasSpeakers ? { speakerLabel } : {}),
+    });
+    /** The open entry's video / audio (see useMedia — it decorates the transcript, never rewrites it). */
+    const openProvider = openEntry?.media?.provider;
+    const chipTitle = useCallback((clock) => t(openProvider === 'bilibili' ? 'media.chipTitleReload' : 'media.chipTitle', { time: clock }), [t, openProvider]);
+    const mediaFace = useMedia({ entryId: openEntry?.id, media: openEntry?.media, articleHtml, articleRef, detailRef, chipTitle, speakerLabel });
+    // 转完自动翻译: one global preference, off until the reader ticks it once.
+    const [autoTranslate, setAutoTranslate] = useState(() => {
+        try {
+            return globalThis.localStorage?.getItem(AUTO_TRANSLATE_KEY) === '1';
+        }
+        catch {
+            return false;
+        }
+    });
+    const setAutoTranslatePref = useCallback((on) => {
+        setAutoTranslate(on);
+        try {
+            if (on)
+                globalThis.localStorage?.setItem(AUTO_TRANSLATE_KEY, '1');
+            else
+                globalThis.localStorage?.removeItem(AUTO_TRANSLATE_KEY);
+        }
+        catch {
+            // Remembered for this page only.
+        }
+    }, []);
+    const setTranscriptState = mediaFace.setTranscript;
+    // No captions and nothing stored: the open entry transcribes on this machine.
+    const localFace = useLocalTranscript({
+        entry: openEntry,
+        wanted: openEntry?.media !== undefined && mediaFace.transcript === 'none',
+        hidden: mediaFace.hidden,
+        rejoin: openEntry?.media !== undefined && mediaFace.transcript === 'ready' && articleHtml?.includes('data-src="local"') === true,
+        remote: props,
+        onHtml: (entryId, html, partial) => {
+            if (openRequestRef.current !== entryId)
+                return;
+            actions.setArticle(html, false, null);
+            if (!partial)
+                setTranscriptState(entryId, 'ready');
+        },
+    });
+    const localActive = localFace.status !== undefined && ['fetching', 'queued', 'transcribing'].includes(localFace.status.state);
+    // 润色: the agent's translation layer over the body.
+    const polishFace = usePolish({
+        entryId: openEntry?.id,
+        articleHtml,
+        articleRef,
+        translating: translatePhase === 'ready' || translatePhase === 'working',
+        translateView,
+        remote: props,
+        tagLabel: t('polish.tag'),
+        tagTitle: t('polish.tagTitle'),
+    });
+    /** Ask the agent to polish the whole article (or continue at a paragraph). */
+    const requestPolish = useCallback((from) => {
+        const article = articleRef.current;
+        const total = polishFace.view?.total ?? (article === null ? 0 : blockElements(article).length);
+        notesFace.polish(total, from);
+        polishFace.requested();
+    }, [polishFace, notesFace]);
+    // The compact bar's title (see `titleScrolledAway`): watch the article's
+    // heading leave the body through its top.
+    useEffect(() => {
+        setTitleScrolledAway(false);
+        const root = detailRef.current;
+        const heading = detailTitleRef.current;
+        // No observer (jsdom, an old engine) degrades to the bar staying empty.
+        if (!compact || view !== 'detail' || root === null || heading === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry === undefined)
+                return;
+            // Away only when it left through the TOP: a heading below the fold (a
+            // restored reading position mid-render) is not "scrolled past".
+            setTitleScrolledAway(!entry.isIntersecting && entry.boundingClientRect.bottom <= (entry.rootBounds?.top ?? 0));
+        }, { root, threshold: 0 });
+        observer.observe(heading);
+        return () => { observer.disconnect(); };
+    }, [compact, view, openEntryId, openEntry !== undefined]);
     /** The source the strip is currently narrowing to, if any. */
     const activeSource = sources.find(source => query.trim() === sourceQuery(source.id))?.id ?? null;
     /** The source KIND the search box is narrowing to, if any (`#rss` / `#link`). */
@@ -1177,14 +1443,14 @@ export function ReaderPane(props) {
     }, [view, articleHtml, guessSource]);
     /**
      * Whether the globe belongs on this article at all. Three ways it does not:
-     * the browser has no Translator API, the pair is unavailable on this device,
-     * or the body is already the target language. All three hide the control
-     * rather than offering one that cannot work — the pass's own degradation rule.
+     * the browser has no Translator API (and the host stored no translation of
+     * this body), the pair is unavailable on this device, or the body is already
+     * the target language. All three hide the control rather than offering one
+     * that cannot work — the pass's own degradation rule.
      */
-    const translationOffered = translator !== null
-        && translateAvailability !== null
-        && translateAvailability !== 'unavailable'
-        && translationSource !== TRANSLATION_TARGET;
+    const translationOffered = translationSource !== TRANSLATION_TARGET && (translator === null
+        ? storedPair !== null
+        : translateAvailability !== null && translateAvailability !== 'unavailable');
     // Ask the browser about this pair once per opened article, in every target
     // spelling: the probe is async, and the control appears only once one of them
     // is not `unavailable`.
@@ -1245,7 +1511,34 @@ export function ReaderPane(props) {
         setTranslateError(null);
         setTranslateMenu(false);
         setTranslateAvailability(null);
+        setStoredPair(null);
     }, [openEntryId, articleHtml]);
+    // No Translator API: ask the host whether a translation of exactly this body
+    // is stored (made earlier in a browser that had one). Only the entry's own
+    // map counts — its bodyHash proves the pairing; the global sentence memory
+    // alone could cover a few stray sentences of an untranslated article.
+    useEffect(() => {
+        if (view !== 'detail' || translator !== null || openEntryId === null)
+            return undefined;
+        if (articleHtml === null || articleHtml.length === 0)
+            return undefined;
+        let cancelled = false;
+        void (async () => {
+            try {
+                const answer = await props.getEntryTranslation(openEntryId);
+                const record = answer.ok ? answer.value.translation : undefined;
+                if (cancelled || record === undefined)
+                    return;
+                if (record.bodyHash !== translationHash(articleHtml) || Object.keys(record.segments).length === 0)
+                    return;
+                setStoredPair(record.pair);
+            }
+            catch {
+                // Unreadable is the same as absent: no globe.
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [view, translator, openEntryId, articleHtml, props]);
     // Leaving the pane must not leave spans behind in a DOM React will reuse.
     useEffect(() => () => {
         if (cancelRef.current !== null)
@@ -1343,6 +1636,106 @@ export function ReaderPane(props) {
             ...(entry === undefined ? {} : { entryId: entry.entryId, bodyHash: entry.bodyHash }),
         });
     }, [props]);
+    /**
+     * The open article's title in the reader's language, once the globe has
+     * translated the body. Keyed by entry so a stale answer never titles the
+     * next article.
+     */
+    const [titleTranslation, setTitleTranslation] = useState(null);
+    /**
+     * Translate the open article's title alongside its body: the page memory,
+     * then the host's sentence memory, then (with a live session) the model.
+     * Without a session — the stored-translation path — a miss leaves the
+     * title in its original, the same rule the body follows.
+     *
+     * @returns what a model call learned, for the caller to fold into its own
+     * persist batch (one write per run, never a second one for the title).
+     */
+    const translateTitle = useCallback(async (pair, session, cancelled) => {
+        const entry = openEntryId === null ? undefined : entryById(openEntryId);
+        const title = entry?.title.trim() ?? '';
+        if (entry === undefined || title === '' || isTargetLanguage(title))
+            return [];
+        const settle = (text) => {
+            if (text !== undefined && text.trim() !== '' && !cancelled())
+                setTitleTranslation({ id: entry.id, text: text.trim() });
+        };
+        const known = remembered(pair, title) ?? cardTranslationsRef.current[entry.id]?.title;
+        if (known !== undefined) {
+            settle(known);
+            return [];
+        }
+        try {
+            const slice = await props.getSentenceTranslations({ pair, hashes: [translationHash(title)] });
+            const stored = slice.ok ? slice.value.translations[translationHash(title)] : undefined;
+            if (stored !== undefined) {
+                primeMemory(pair, [{ text: title, translation: stored }]);
+                settle(stored);
+                return [];
+            }
+        }
+        catch {
+            // A miss: the model's job, when there is one.
+        }
+        if (session === null || cancelled())
+            return [];
+        const outcome = await translateTexts([title], pair, session, cancelled);
+        settle(outcome.translated.get(title));
+        return outcome.learned;
+    }, [openEntryId, entryById, props]);
+    /**
+     * The globe on a page with no Translator API: paint the host's stored
+     * translation of this body and stop. Nothing is sent to a model; a sentence
+     * the store does not cover stays in its original.
+     *
+     * @param initialView - the view to show.
+     * @param pair - the stored record's own pair label.
+     */
+    const showStoredTranslation = useCallback(async (initialView, pair) => {
+        const container = articleRef.current;
+        if (container === null || openEntryId === null || articleHtml === null)
+            return;
+        if (cancelRef.current !== null)
+            cancelRef.current.cancelled = true;
+        const previous = builtRef.current;
+        if (previous !== null)
+            restoreArticle(previous.root);
+        builtRef.current = null;
+        const cancel = { cancelled: false };
+        cancelRef.current = cancel;
+        setTranslateError(null);
+        setTranslateProgress(null);
+        const built = buildArticle(container, translateClasses);
+        if (built === null) {
+            cancelRef.current = null;
+            setStoredPair(null);
+            return;
+        }
+        setTranslatePhase('working');
+        void translateTitle(pair, null, () => cancel.cancelled);
+        await warmMemory(pair, openEntryId, articleHtml, built);
+        if (cancel.cancelled)
+            return;
+        cancelRef.current = null;
+        const result = applyRemembered(built, pair);
+        if (result.done === 0) {
+            // The record named this body but none of its sentences matched the
+            // segmentation here: nothing to show, so no globe either.
+            restoreArticle(built.root);
+            setTranslatePhase('idle');
+            setStoredPair(null);
+            return;
+        }
+        builtRef.current = built;
+        if (initialView !== 'orig')
+            lastViewRef.current = initialView;
+        setTranslateView(initialView);
+        setView(built, initialView, translateClasses);
+        setTranslatePhase('ready');
+        rememberTranslation(openEntryId, initialView, pair.split('→')[0] ?? translationSource);
+        // Only the LRU stamps move: a stored translation being read is a use.
+        persistTranslations(pair, [], result.recalled, { entryId: openEntryId, bodyHash: translationHash(articleHtml) });
+    }, [openEntryId, articleHtml, translateClasses, warmMemory, persistTranslations, translationSource, translateTitle]);
     /**
      * Get the article translated, reusing a session this page already built.
      *
@@ -1359,8 +1752,13 @@ export function ReaderPane(props) {
     const startTranslation = useCallback(async (initialView, sourceOverride) => {
         const api = translator;
         const container = articleRef.current;
-        if (api === null || container === null)
+        if (container === null)
+            return;
+        if (api === null) {
+            if (storedPair !== null)
+                await showStoredTranslation(initialView, storedPair);
             return;
+        }
         // One run at a time. A second start (the reader's retry, or the restore
         // re-applying a translation to a body that was just replaced) must not build
         // its own segmentation over the first one's: two overlapping runs would
@@ -1442,6 +1840,9 @@ export function ReaderPane(props) {
         // The host's tiers answer first: the entry's exact-fit map, then the global
         // sentence memory. Only what neither knows is spent on the model.
         const pair = `${sourceLanguage}→${TRANSLATION_TARGET}`;
+        // The title rides the same session, beside the body rather than after it:
+        // one short string, and the header should not wait for a long article.
+        const titleRun = translateTitle(pair, session, () => cancel.cancelled);
         if (openEntryId !== null && articleHtml !== null) {
             await warmMemory(pair, openEntryId, articleHtml, built);
             if (cancel.cancelled) {
@@ -1458,8 +1859,9 @@ export function ReaderPane(props) {
         });
         // What the run learned (and what it was served) persists in one batch: a
         // reload loses the page's memory, and the next visit pays the model again
-        // without this.
-        persistTranslations(pair, result.learned, result.recalled, openEntryId !== null && articleHtml !== null
+        // without this. The title's lesson rides in the same batch.
+        const titleLearned = await titleRun;
+        persistTranslations(pair, [...result.learned, ...titleLearned], result.recalled, openEntryId !== null && articleHtml !== null
             ? { entryId: openEntryId, bodyHash: translationHash(articleHtml) }
             : undefined);
         if (cancel.cancelled)
@@ -1476,7 +1878,7 @@ export function ReaderPane(props) {
         setTranslateProgress(null);
         // Re-paint once the first units exist, so the translated typography applies.
         setView(built, initialView, translateClasses);
-    }, [translator, translationSource, translateClasses, t, openEntryId, articleHtml, warmMemory, persistTranslations]);
+    }, [translator, storedPair, showStoredTranslation, translationSource, translateClasses, t, openEntryId, articleHtml, warmMemory, persistTranslations, translateTitle]);
     /** Apply one view to a finished translation. */
     const applyView = useCallback((next) => {
         setTranslateView(next);
@@ -1550,6 +1952,46 @@ export function ReaderPane(props) {
             return;
         toggleSegment(built, segment, translateClasses);
     }, [translateClasses, translatePhase]);
+    /**
+     * The CORP rescue. The extractor already emits absolute URLs with
+     * `referrerpolicy="no-referrer"`, which covers referer-gated CDNs — but a
+     * response headed `Cross-Origin-Resource-Policy: same-origin` (claude.dev's
+     * `/media/*` figures, measured 2026-09-29) is withheld from this page no
+     * matter what the tag asks for: the request answers 200 and the browser
+     * still refuses to hand the pixels over, leaving the broken-image icon over
+     * the alt text. A no-cors browser fetch cannot read those bytes either; the
+     * host process can, so the failed image is re-pointed at what the host
+     * fetched. Only images that ALREADY failed come here — a healthy image never
+     * pays the proxy — and each `<img>` tries once: the marker doubles as the
+     * loop guard should the data URI itself fail.
+     */
+    const onArticleImageError = useCallback((event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLImageElement))
+            return;
+        if (target.dataset['readerRescued'] !== undefined)
+            return;
+        const url = target.getAttribute('src') ?? '';
+        // Only a remote URL can be rescued; a data: failure is a broken payload.
+        if (!/^https?:\/\//i.test(url))
+            return;
+        target.dataset['readerRescued'] = '1';
+        const known = rescuedImagesRef.current.get(url);
+        if (known !== undefined) {
+            target.src = known;
+            return;
+        }
+        void props.fetchImage(url).then(result => {
+            if (!result.ok)
+                return;
+            const { mime, base64 } = result.value;
+            if (mime === undefined || base64 === undefined)
+                return;
+            const dataUri = `data:${mime};base64,${base64}`;
+            rescuedImagesRef.current.set(url, dataUri);
+            target.src = dataUri;
+        }, () => undefined);
+    }, [props]);
     /* ---------------------------------------------------- the wall's own pass */
     // The wall has no article to segment: a card's unit is a FIELD (title,
     // summary), and the wall must translate lazily — a wall of forty cards is
@@ -1628,10 +2070,12 @@ export function ReaderPane(props) {
                         continue;
                     // Chinese cards (and Chinese fields inside a mixed card) are left
                     // exactly as they are: translating them to Chinese is not a feature.
-                    if (!isTargetLanguage(row.entry.title))
+                    // Already translated (this visit, or before a remount): nothing to do.
+                    const done = cardTranslationsRef.current[id];
+                    if (!isTargetLanguage(row.entry.title) && done?.title === undefined)
                         fields.push({ id, field: 'title', text: row.entry.title });
                     const summary = row.entry.summary;
-                    if (summary !== undefined && summary.length > 0 && !isTargetLanguage(summary)) {
+                    if (summary !== undefined && summary.length > 0 && !isTargetLanguage(summary) && done?.summary === undefined) {
                         fields.push({ id, field: 'summary', text: summary });
                     }
                 }
@@ -1758,11 +2202,16 @@ export function ReaderPane(props) {
      *
      * @param entryId - the entry whose body is wanted.
      * @param url - the article URL to fetch.
+     * @returns whether the answer wants the rendered fetch next: a body that
+     *   still counts script figures, or a refusal a real browser gets past.
      */
     const fetchBody = useCallback(async (entryId, url) => {
         actions.setFetching(entryId, true);
+        setBodyFetch({ entryId, phase: 'downloading', since: Date.now() });
         try {
-            const result = await props.fetchEntryBody(entryId, url);
+            const result = await props.fetchEntryBody(entryId, url, phase => {
+                setBodyFetch(current => (current?.entryId === entryId ? { entryId, phase, since: current.since } : current));
+            });
             // A late answer belongs to the entry that ASKED for it: if the detail
             // view has moved on (another entry, or the wall), the article area is no
             // longer this entry's to write. The per-entry records are unaffected —
@@ -1784,7 +2233,7 @@ export function ReaderPane(props) {
                 }
                 // The caller escalates on a shell: a body that still counts script
                 // figures wants the rendered fetch next.
-                return result.scriptFigures ?? 0;
+                return (result.scriptFigures ?? 0) > 0;
             }
             else if (result.error !== undefined && onScreen) {
                 // Keep whatever is already rendered (a feed summary, say) and add the
@@ -1792,10 +2241,12 @@ export function ReaderPane(props) {
                 // It also leaves the host's copy — and its stale marker — untouched.
                 actions.setArticle(articleHtml ?? '', false, result.error);
             }
-            return undefined;
+            // …and so does a bot wall: the plain fetch is what it refused.
+            return result.error !== undefined && browserSolvable(result.error);
         }
         finally {
             actions.setFetching(entryId, false);
+            setBodyFetch(current => (current?.entryId === entryId ? null : current));
             // The card reads the host's annotation through the mirror: re-read the
             // one entry this fetch settled, so the pill flips on this gesture and
             // not at the next mount.
@@ -1817,19 +2268,20 @@ export function ReaderPane(props) {
         const capture = props.captureRemote();
         if (capture === undefined)
             return;
-        setCaptureBusy(true);
+        setCaptureBusyId(entryId);
+        setCaptureFailure(null);
         try {
             const rendered = await capture.render({ url: link });
             if (!rendered.ok) {
-                if (openRequestRef.current === entryId)
-                    actions.setArticle(articleHtml ?? '', false, rendered.error.message);
+                // The reason the plain fetch failed stays the line's lead; the render's
+                // own failure is said after it (captureFailure).
+                setCaptureFailure({ entryId, message: rendered.error.message });
                 return;
             }
             const finalUrl = rendered.value.finalUrl ?? link;
             const extracted = extractArticle(rendered.value.html, finalUrl);
             if (!extracted.ok) {
-                if (openRequestRef.current === entryId)
-                    actions.setArticle(articleHtml ?? '', false, extracted.error);
+                setCaptureFailure({ entryId, message: extracted.error });
                 return;
             }
             const stored = await props.storeEntryBody({
@@ -1837,6 +2289,10 @@ export function ReaderPane(props) {
                 url: finalUrl,
                 html: extracted.html,
                 bodyHash: translationHash(extracted.html),
+                // The article's own title/excerpt: a link saved behind a wall has only
+                // its URL-derived label until the render reads the page.
+                ...(extracted.title === undefined ? {} : { title: extracted.title }),
+                ...(extracted.excerpt === undefined ? {} : { excerpt: extracted.excerpt }),
                 ...(rendered.value.truncated === true ? { truncated: true } : {}),
                 // A capture render ALWAYS carries its count, zero included: the entry's
                 // own load-time count (84 script figures, say) is what the remount
@@ -1849,6 +2305,10 @@ export function ReaderPane(props) {
                 rendered: true,
             });
             renderedBodiesRef.current.add(entryId);
+            actions.noteExtractedMeta(entryId, {
+                ...(extracted.title === undefined ? {} : { title: extracted.title }),
+                ...(extracted.excerpt === undefined ? {} : { excerpt: extracted.excerpt }),
+            });
             if (openRequestRef.current !== entryId)
                 return;
             if (stored.ok && stored.value.html !== undefined) {
@@ -1859,19 +2319,21 @@ export function ReaderPane(props) {
             }
         }
         finally {
-            setCaptureBusy(false);
+            setCaptureBusyId(current => (current === entryId ? null : current));
         }
-    }, [actions, props, articleHtml, syncFetchState]);
+    }, [actions, props, syncFetchState]);
     /**
      * One gesture, the whole pipeline: an explicit per-entry ask (add a link,
      * the card's 「抓取」, opening an entry, the detail's 「重新抓取」) that lands
-     * on a script-figure shell continues into the rendered fetch on its own —
-     * the gesture already authorized capturing that URL. Fires once per entry
+     * on a script-figure shell — or on a bot wall that refuses the plain fetch
+     * (mp.weixin.qq.com answers 「环境异常」 to anything but a browser) —
+     * continues into the rendered fetch on its own: the gesture already
+     * authorized capturing that URL. Fires once per entry
      * per pane session (a failure leaves the manual「渲染抓取」retry); background
      * paths (scheduled feed refresh, backfill) never reach here.
      */
-    const maybeAutoRender = useCallback((entryId, link, count) => {
-        if (link === undefined || count <= 0)
+    const maybeAutoRender = useCallback((entryId, link, wanted) => {
+        if (link === undefined || !wanted)
             return;
         if (props.captureRemote() === undefined)
             return;
@@ -1882,7 +2344,7 @@ export function ReaderPane(props) {
     }, [props, captureBody]);
     /** A plain fetch that escalates on a shell — the explicit-gesture fetch path. */
     const fetchThenMaybeRender = useCallback((entryId, link) => {
-        void fetchBody(entryId, link).then(count => maybeAutoRender(entryId, link, count ?? 0));
+        void fetchBody(entryId, link).then(wanted => maybeAutoRender(entryId, link, wanted));
     }, [fetchBody, maybeAutoRender]);
     /** Open one entry: mark it read and make sure a body is available. */
     const open = useCallback(async (row) => {
@@ -1916,6 +2378,43 @@ export function ReaderPane(props) {
         // A cached fetch outlives the feed's own payload, so the host is the one
         // that knows whether there is full text: it returns the fresh cache, else
         // the feed's body, else nothing plus the reason a previous fetch failed.
+        if (row.entry.link !== undefined && row.entry.media !== undefined) {
+            // A video or audio entry: its text is a TRANSCRIPT, never the page behind
+            // the link — none of the article paths below (fetch, backfill, persist)
+            // may run for it, or they would crawl YouTube's watch page.
+            const shownotes = row.entry.contentHtml ?? '';
+            setScriptFigures(0);
+            // A stored transcript (platform captions, or a finished local one) is the body.
+            const cached = await props.getEntryBody({ entryId: row.entry.id, url: row.entry.link });
+            if (openRequestRef.current !== row.entry.id)
+                return;
+            if (cached.ok && cached.value.cached === true && cached.value.html !== undefined) {
+                actions.setArticle(cached.value.html, false, null);
+                setTranscriptState(row.entry.id, 'ready');
+                return;
+            }
+            if (row.entry.media.kind !== 'video' || (row.entry.media.provider !== 'youtube' && row.entry.media.provider !== 'bilibili')) {
+                // Audio has no platform captions: the shownotes show until the local
+                // transcript (`useLocalTranscript`) replaces them.
+                actions.setArticle(shownotes, false, null);
+                setTranscriptState(row.entry.id, 'none');
+                return;
+            }
+            actions.setArticle(shownotes, false, null);
+            setTranscriptState(row.entry.id, 'loading');
+            const fetched = await props.mediaTranscript({ entryId: row.entry.id, url: row.entry.link });
+            if (openRequestRef.current !== row.entry.id)
+                return;
+            if (fetched.ok && fetched.value.html !== undefined) {
+                actions.setArticle(fetched.value.html, false, null);
+                setTranscriptState(row.entry.id, 'ready');
+                void syncFetchState(row.entry.id);
+            }
+            else {
+                setTranscriptState(row.entry.id, fetched.ok && fetched.value.captions === 'none' ? 'none' : 'failed');
+            }
+            return;
+        }
         if (row.entry.link !== undefined) {
             // A feed that published only a summary still owes the reader an article,
             // whichever branch below supplies the text on screen (the host answers
@@ -1956,7 +2455,7 @@ export function ReaderPane(props) {
                 // load-time extraction, whose count rides the entry instead.
                 const knownCount = view.value.scriptFigures ?? row.entry.scriptFigures ?? 0;
                 setScriptFigures(knownCount);
-                maybeAutoRender(row.entry.id, row.entry.link, knownCount);
+                maybeAutoRender(row.entry.id, row.entry.link, knownCount > 0);
                 actions.setStaleBody(row.entry.id, view.value.fresh === false);
                 // `html` here is either the FEED's own payload or a body this plugin
                 // already fetched and cached — a cached one is paid for already.
@@ -2007,6 +2506,10 @@ export function ReaderPane(props) {
                 if (row.sourceKind === 'rss' && view.value.error === undefined) {
                     fetchThenMaybeRender(row.entry.id, row.entry.link);
                 }
+                // A recorded bot wall (the add-time preview, or an earlier fetch) is
+                // the one recorded reason a gesture CAN change: opening the entry
+                // asks for its text, and a headless browser is what the wall admits.
+                maybeAutoRender(row.entry.id, row.entry.link, view.value.error !== undefined && browserSolvable(view.value.error));
             }
             return;
         }
@@ -2036,11 +2539,11 @@ export function ReaderPane(props) {
             // fetch paths set it from the host's answer, this one computes it locally.
             const count = extracted.scriptFigures ?? 0;
             setScriptFigures(count);
-            maybeAutoRender(row.entry.id, row.entry.link, count);
+            maybeAutoRender(row.entry.id, row.entry.link, count > 0);
         }
         else
             actions.setArticle('', truncated, extracted.error);
-    }, [actions, props, t, fetchThenMaybeRender, persistFeedBody, recent, fetchStates, syncFetchState, maybeAutoRender]);
+    }, [actions, props, t, fetchThenMaybeRender, persistFeedBody, recent, fetchStates, syncFetchState, maybeAutoRender, setTranscriptState]);
     /* ------------------------------ coming back to where the reader already was */
     /**
      * Re-open the article the pane had on screen when the sidebar went away.
@@ -2388,6 +2891,11 @@ export function ReaderPane(props) {
             return;
         if (translatePhase !== 'idle')
             return;
+        // A transcript still arriving replaces the body every poll: restoring on
+        // each would re-translate (and re-raise its bar) over and over. The
+        // record stays; the finished transcript gets it once.
+        if (localActive)
+            return;
         if (restoredTranslationRef.current === openEntryId)
             return;
         const wanted = readSession().translationView?.[openEntryId];
@@ -2395,62 +2903,92 @@ export function ReaderPane(props) {
             return;
         const source = readSession().translationSource?.[openEntryId] ?? translationSource;
         const sources = source === 'en' ? ['en'] : [source, 'en'];
-        if (cachedTranslator(sources, TARGET_CANDIDATES) === undefined)
+        // A stored translation needs no session (and no activation) to be shown.
+        if (translator === null ? storedPair === null : cachedTranslator(sources, TARGET_CANDIDATES) === undefined)
             return;
         restoredTranslationRef.current = openEntryId;
         void startTranslation(wanted, source);
-    }, [view, openEntryId, articleHtml, translatePhase, translationSource, startTranslation]);
+    }, [view, openEntryId, articleHtml, translatePhase, translationSource, translator, storedPair, startTranslation, localActive]);
+    /**
+     * 转完自动翻译: a whole transcript (platform captions, or a finished local
+     * one) in another language opens translated, side by side, when the reader
+     * ticked the preference. Only when the pair is already on the device:
+     * building a session that must download needs a click (user activation),
+     * and an automatic start must never fail at the reader.
+     */
+    const autoTranslatedRef = useRef(null);
+    useEffect(() => {
+        if (!autoTranslate || view !== 'detail' || openEntry?.media === undefined || openEntryId === null)
+            return;
+        if (mediaFace.transcript !== 'ready' || localActive || !translationOffered || translatePhase !== 'idle')
+            return;
+        if (translator !== null && translateAvailability !== 'available')
+            return;
+        if (autoTranslatedRef.current === openEntryId)
+            return;
+        autoTranslatedRef.current = openEntryId;
+        void startTranslation('both');
+    }, [autoTranslate, view, openEntry, openEntryId, mediaFace.transcript, localActive, translationOffered, translatePhase, translator, translateAvailability, startTranslation]);
     /** Submit the add form and report the host's verdict. */
     const submit = useCallback(async () => {
         const url = draftUrl.trim();
-        if (url.length === 0)
+        // The await below chains the resolver APIs, the fetch, and its fallback —
+        // seconds to half a minute. Without the busy line (and this re-entry guard)
+        // the dialog read as a dead click the whole time.
+        if (url.length === 0 || addBusySince !== null)
             return;
         setVerdict(null);
-        const result = await props.addSource(url);
-        if (!result.ok) {
-            // A transport-level failure: the host never answered, so the reason is
-            // whatever the wire layer said.
-            setVerdict({ kind: 'fetchFailed', reason: result.error.message });
-            return;
-        }
-        const value = result.value;
-        if (typeof value === 'string') {
-            setVerdict({ kind: verdictForRefusal(value) });
-            return;
-        }
-        if (value.outcome === 'fetch-failed') {
-            // The fetch failed with a reason of its own ("connect ECONNREFUSED …",
-            // "body over the seam's byte cap"). Showing it is the difference between
-            // a retry and a report nobody can act on.
-            setVerdict({ kind: 'fetchFailed', reason: value.reason });
-            return;
-        }
-        if (value.failure !== undefined) {
-            // Saved, but there is no body to preview. This is NOT a failure verdict:
-            // the link is in the wall, and the sentence names the reason so the
-            // reader knows whether it is worth opening in a browser. The URL rides
-            // along: for the causes a real browser solves, the verdict itself offers
-            // the way out (the moment "why" lands is the moment to act on it).
+        setAddBusySince(Date.now());
+        try {
+            const result = await props.addSource(url);
+            if (!result.ok) {
+                // A transport-level failure: the host never answered, so the reason is
+                // whatever the wire layer said.
+                setVerdict({ kind: 'fetchFailed', reason: result.error.message });
+                return;
+            }
+            const value = result.value;
+            if (typeof value === 'string') {
+                setVerdict({ kind: verdictForRefusal(value) });
+                return;
+            }
+            if (value.outcome === 'fetch-failed') {
+                // The fetch failed with a reason of its own ("connect ECONNREFUSED …",
+                // "body over the seam's byte cap"). Showing it is the difference between
+                // a retry and a report nobody can act on.
+                setVerdict({ kind: 'fetchFailed', reason: value.reason });
+                return;
+            }
+            if (value.failure !== undefined) {
+                // Saved, but there is no body to preview. This is NOT a failure verdict:
+                // the link is in the wall, and the sentence names the reason so the
+                // reader knows whether it is worth opening in a browser. The URL rides
+                // along: for the causes a real browser solves, the verdict itself offers
+                // the way out (the moment "why" lands is the moment to act on it).
+                setVerdict({
+                    kind: 'savedLinkNoPreview',
+                    label: value.label,
+                    reason: value.failure.message,
+                    code: value.failure.code,
+                    url,
+                });
+                setDraftUrl('');
+                actions.refresh();
+                return;
+            }
             setVerdict({
-                kind: 'savedLinkNoPreview',
+                kind: value.outcome === 'subscribed' ? 'subscribed' : 'savedLink',
                 label: value.label,
-                reason: value.failure.message,
-                code: value.failure.code,
-                url,
             });
             setDraftUrl('');
+            // Reload so the new entry is on the wall behind the dialog, not only in
+            // the host's state.
             actions.refresh();
-            return;
         }
-        setVerdict({
-            kind: value.outcome === 'subscribed' ? 'subscribed' : 'savedLink',
-            label: value.label,
-        });
-        setDraftUrl('');
-        // Reload so the new entry is on the wall behind the dialog, not only in
-        // the host's state.
-        actions.refresh();
-    }, [actions, draftUrl, props]);
+        finally {
+            setAddBusySince(null);
+        }
+    }, [actions, addBusySince, draftUrl, props]);
     /** Re-fetch one source from the subscription page. */
     const refreshOne = useCallback(async (id) => {
         actions.setRefreshing(true);
@@ -2624,10 +3162,10 @@ export function ReaderPane(props) {
         // stores the payload first, so leaving the page does not cancel it. It also
         // re-reads this entry's state from the host when the fetch settles, so the
         // pill flips without a full-wall poll here.
-        const count = await fetchBody(entry.id, entry.link);
+        const wanted = await fetchBody(entry.id, entry.link);
         // One gesture, the whole pipeline: a shell answer continues into the
         // rendered fetch on its own (see maybeAutoRender).
-        maybeAutoRender(entry.id, entry.link, count ?? 0);
+        maybeAutoRender(entry.id, entry.link, wanted);
     }, [actions, fetchBody, maybeAutoRender]);
     /** Reload the tags on one entry. */
     const loadEntryTags = useCallback(async (entryId) => {
@@ -2721,19 +3259,6 @@ export function ReaderPane(props) {
         setTagInputOpen(false);
         await toggleTag(entryId, created.value.id, true);
     }, [props, toggleTag]);
-    /** Quote the open entry (or a selection) into the conversation draft. */
-    const quote = useCallback((explicit) => {
-        if (openEntry === undefined)
-            return;
-        const selection = explicit ?? window.getSelection()?.toString() ?? '';
-        const source = presentation.get(openEntry.sourceId);
-        const block = formatReaderRef(selection, provenanceOf(openEntry, {
-            label: source?.label ?? openEntry.title,
-        }));
-        const next = mergedDraft(props.readDraft(), block);
-        props.setDraft(next);
-        setDraft(next);
-    }, [openEntry, presentation, props]);
     const copyLink = useCallback(async () => {
         if (openEntry?.link === undefined)
             return;
@@ -2755,6 +3280,115 @@ export function ReaderPane(props) {
         props.openExternal(url);
     }, [props]);
     /* ------------------------------------------------------------------ render */
+    /** The wall's translation switch (the globe in the wide header, a ⋯ row in the compact one). */
+    const toggleWall = () => {
+        setSortOpen(false);
+        setFilterOpen(false);
+        if (wallOn) {
+            setWallOn(false);
+            return;
+        }
+        wallCancelRef.current = { cancelled: false };
+        setWallOn(true);
+        // Cards already on screen are queued by the observer effect; a
+        // wall that never scrolls still gets translated in one pass.
+        void runWallPass();
+    };
+    /**
+     * The wall's filter panel and sort menu. Built once and placed by whichever
+     * header is showing: the wide header hangs each under its own button; the
+     * compact header has no such buttons (sort lives in ⋯, the filter behind the
+     * chip row's 「筛选」), so both hang under the compact header's right edge.
+     */
+    const filterPanel = filterOpen && (_jsx("div", { className: css.filterPanel, onKeyDown: event => { if (event.key === 'Escape')
+            setFilterOpen(false); }, children: filterPage === 'source' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.filterPanelHead, children: [_jsx("button", { type: "button", className: css.filterBack, title: t('action.back'), onClick: () => { setFilterPage('root'); setSourceFilter(''); }, children: _jsx(IconChevronLeftOutlineMedium, { size: 12 }) }), _jsx("span", { className: css.filterPanelTitle, children: t('filter.bySource') }), _jsx("span", { className: css.filterCount, children: sources.length })] }), sources.length >= SOURCE_SEARCH_MIN && (_jsxs("div", { className: css.filterSearch, children: [glyph('search', 11), _jsx("input", { autoFocus: true, value: sourceFilter, placeholder: t('filter.searchSource'), onChange: event => setSourceFilter(event.target.value) }), sourceFilter.length > 0 && (_jsx("button", { type: "button", className: css.searchClear, title: t('action.clearSearch'), "aria-label": t('action.clearSearch'), onClick: () => { setSourceFilter(''); }, children: glyph('close', 13) }))] })), _jsxs("div", { className: css.filterList, children: [_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(''); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeSource === null ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.all') }), _jsx("span", { className: css.filterCount, children: allEntries.length })] }), matchingSources.map(source => {
+                            const group = parsed[source.id];
+                            const broken = group?.error !== undefined || group?.incomplete === true;
+                            return (_jsxs("button", { type: "button", className: css.filterRow, title: source.url, onClick: () => { actions.setQuery(sourceQuery(source.id)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeSource === source.id ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: source.label }), broken
+                                        ? _jsx("span", { className: css.chipBroken, title: t('state.incomplete'), children: "!" })
+                                        : _jsx("span", { className: css.filterCount, children: group?.entries.length ?? 0 })] }, source.id));
+                        }), matchingSources.length === 0 && (_jsx("div", { className: css.filterEmpty, children: t('filter.noSourceMatch') }))] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: css.filterSection, children: t('filter.readState') }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => actions.toggleUnreadOnly(), children: [_jsx("span", { className: css.filterCheck, children: unreadOnly ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.unreadOnly') })] }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => actions.toggleHideDupes(), children: [_jsx("span", { className: css.filterCheck, children: hideDupes ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.hideDupes') })] }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => { setSourceFilter(''); setFilterPage('source'); }, children: [_jsx("span", { className: css.filterLabel, children: t('filter.bySource') }), _jsx("span", { className: css.filterValue, children: activeSourceLabel ?? t('filter.all') }), _jsx("span", { className: css.filterChevron, children: glyph('chevron', 12) })] }), _jsx("div", { className: css.filterSection, children: t('filter.byKind') }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(''); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: query.trim() === '' ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.all') }), _jsx("span", { className: css.filterCount, children: allEntries.length })] }), READER_SOURCE_KINDS.map(kind => (_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(kindQuery(kind)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeKind === kind ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t(kind === 'link' ? 'sources.kindLink' : 'sources.kindRss') }), _jsx("span", { className: css.filterCount, children: kindCounts[kind] })] }, kind))), ['video', 'audio'].filter(kind => mediaCounts[kind] > 0).map(kind => (_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(MEDIA_QUERIES[kind]); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: query.trim() === MEDIA_QUERIES[kind] ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t(kind === 'video' ? 'media.kindVideo' : 'media.kindAudio') }), _jsx("span", { className: css.filterCount, children: mediaCounts[kind] })] }, kind))), tags.length > 0 && _jsx("div", { className: css.filterSection, children: t('filter.byTag') }), tags.map(tag => (_jsxs("div", { className: css.filterTagRow, children: [_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(tagQuery(tag.id)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: query.trim() === tagQuery(tag.id) ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: tag.name }), _jsx("span", { className: css.filterCount, children: tagCounts[tag.id] ?? 0 })] }), _jsx("button", { type: "button", className: css.filterTagDelete, title: t('filter.deleteTag'), "aria-label": `${t('filter.deleteTag')}: ${tag.name}`, onClick: () => { void removeTag(tag.id); }, children: "\u00D7" })] }, tag.id)))] })) }));
+    const sortMenu = sortOpen && (_jsx("div", { className: css.menu, children: ['newest', 'oldest', 'source'].map(option => (_jsxs("button", { type: "button", onClick: () => { actions.setSort(option); setSortOpen(false); }, children: [_jsx("span", { children: t(`sort.${option}`) }), sort === option && _jsx("span", { className: css.check, children: "\u2713" })] }, option))) }));
+    /**
+     * The compact wall header (panel-responsive-spec P2): the pane's name with
+     * its unread count, search and add always visible, and everything else —
+     * refresh, sort, the wall's translation switch, history, subscriptions — in
+     * one ⋯ menu. Sort and filter have no buttons of their own here, so their
+     * popovers hang under the header's right edge.
+     */
+    const searchVisible = searchOpen || query !== '';
+    const compactActions = [
+        {
+            id: 'search', label: t('search.placeholder'), icon: glyph('search', 16), pinned: true, pressed: searchVisible,
+            onSelect: () => { if (searchVisible) {
+                setSearchOpen(false);
+                actions.setQuery('');
+            }
+            else
+                setSearchOpen(true); },
+        },
+        { id: 'add', label: t('action.add'), icon: _jsx(IconPlusOutlineMedium, { size: 16 }), pinned: true, onSelect: () => { setAddOpen(true); setVerdict(null); } },
+        { id: 'refresh', label: t('action.refresh'), icon: _jsx(IconRefreshOutlineMedium, { size: 16 }), disabled: refreshing, onSelect: () => { void refreshAll(); } },
+        {
+            id: 'sort', label: `${t('sort.title')} · ${t(`sort.${sort}`)}`, icon: glyph('sort', 16),
+            onSelect: () => { setFilterOpen(false); setSortOpen(open => !open); },
+        },
+        ...(wallTranslateOffered
+            ? [{ id: 'translate', label: t(wallOn ? 'translate.wallOff' : 'action.translate'), icon: _jsx(IconGlobeOutlineMedium, { size: 16 }), onSelect: toggleWall }]
+            : []),
+        { id: 'recent', label: t('action.recent'), icon: _jsx(IconClockOutlineMedium, { size: 16 }), onSelect: () => { actions.closeEntry(); actions.setView('recent'); } },
+        { id: 'manage', label: t('action.manage'), icon: _jsx(IconSettingsOutlineMedium, { size: 16 }), onSelect: () => { actions.closeEntry(); actions.setView('manage'); } },
+    ];
+    const compactWallHeader = (_jsxs("div", { className: css.compactHead, children: [_jsx(PanelHeader, { title: t('tab.label'), meta: `${countUnread(displayRows)} ${t('foot.unread')}`, actions: compactActions, moreLabel: t('action.more') }), _jsxs("span", { className: css.compactPop, children: [filterPanel, sortMenu] })] }));
+    /**
+     * The compact wall's filter chips: the narrowings a reader reaches for most
+     * — everything, unread, the two source kinds, the reader's own tags — one tap
+     * each, and 「筛选」 for the rest (one source, hiding duplicates) in the same
+     * panel the wide header opens. Every chip but 未读 sets the search query (the
+     * wall's one narrowing channel, `#source` / `@tag` included), so tapping a
+     * pressed chip clears it and 全部 clears everything.
+     */
+    const wallChips = [
+        { id: 'all', label: t('filter.all'), count: allEntries.length },
+        { id: 'unread', label: t('chip.unread') },
+        ...READER_SOURCE_KINDS.map(kind => ({ id: `kind:${kind}`, label: t(kind === 'link' ? 'sources.kindLink' : 'sources.kindRss'), count: kindCounts[kind] })),
+        ...['video', 'audio'].filter(kind => mediaCounts[kind] > 0)
+            .map(kind => ({ id: `media:${kind}`, label: t(kind === 'video' ? 'media.kindVideo' : 'media.kindAudio'), count: mediaCounts[kind] })),
+        ...tags.map(tag => ({ id: `tag:${tag.id}`, label: tag.name, count: tagCounts[tag.id] ?? 0 })),
+        { id: 'more', label: activeSource === null ? t('chip.more') : `${t('chip.more')} · ${activeSourceLabel ?? ''}` },
+    ];
+    const wallChipValue = [
+        ...(query.trim() === '' && !unreadOnly ? ['all'] : []),
+        ...(unreadOnly ? ['unread'] : []),
+        ...(activeKind === null ? [] : [`kind:${activeKind}`]),
+        ...['video', 'audio'].filter(kind => query.trim() === MEDIA_QUERIES[kind]).map(kind => `media:${kind}`),
+        ...tags.filter(tag => query.trim() === tagQuery(tag.id)).map(tag => `tag:${tag.id}`),
+        ...(activeSource === null ? [] : ['more']),
+    ];
+    const pickChip = (id) => {
+        if (id === 'all') {
+            actions.setQuery('');
+            if (unreadOnly)
+                actions.toggleUnreadOnly();
+            return;
+        }
+        if (id === 'unread') {
+            actions.toggleUnreadOnly();
+            return;
+        }
+        if (id === 'more') {
+            setSortOpen(false);
+            if (!filterOpen) {
+                setFilterPage('root');
+                setSourceFilter('');
+            }
+            setFilterOpen(!filterOpen);
+            return;
+        }
+        const next = id.startsWith('media:') ? MEDIA_QUERIES[id.slice('media:'.length)]
+            : id.startsWith('kind:') ? kindQuery(id.slice('kind:'.length)) : tagQuery(id.slice('tag:'.length));
+        actions.setQuery(query.trim() === next ? '' : next);
+    };
     /**
      * The pane's header.
      *
@@ -2772,26 +3406,7 @@ export function ReaderPane(props) {
                                 setSourceFilter('');
                             }
                             setFilterOpen(!filterOpen);
-                        }, children: glyph('funnel', 15) }), filterOpen && (_jsx("div", { className: css.filterPanel, onKeyDown: event => { if (event.key === 'Escape')
-                            setFilterOpen(false); }, children: filterPage === 'source' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.filterPanelHead, children: [_jsx("button", { type: "button", className: css.filterBack, title: t('action.back'), onClick: () => { setFilterPage('root'); setSourceFilter(''); }, children: _jsx(IconChevronLeftOutlineMedium, { size: 12 }) }), _jsx("span", { className: css.filterPanelTitle, children: t('filter.bySource') }), _jsx("span", { className: css.filterCount, children: sources.length })] }), sources.length >= SOURCE_SEARCH_MIN && (_jsxs("div", { className: css.filterSearch, children: [glyph('search', 11), _jsx("input", { autoFocus: true, value: sourceFilter, placeholder: t('filter.searchSource'), onChange: event => setSourceFilter(event.target.value) }), sourceFilter.length > 0 && (_jsx("button", { type: "button", className: css.searchClear, title: t('action.clearSearch'), "aria-label": t('action.clearSearch'), onClick: () => { setSourceFilter(''); }, children: glyph('close', 13) }))] })), _jsxs("div", { className: css.filterList, children: [_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(''); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeSource === null ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.all') }), _jsx("span", { className: css.filterCount, children: allEntries.length })] }), matchingSources.map(source => {
-                                            const group = parsed[source.id];
-                                            const broken = group?.error !== undefined || group?.incomplete === true;
-                                            return (_jsxs("button", { type: "button", className: css.filterRow, title: source.url, onClick: () => { actions.setQuery(sourceQuery(source.id)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeSource === source.id ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: source.label }), broken
-                                                        ? _jsx("span", { className: css.chipBroken, title: t('state.incomplete'), children: "!" })
-                                                        : _jsx("span", { className: css.filterCount, children: group?.entries.length ?? 0 })] }, source.id));
-                                        }), matchingSources.length === 0 && (_jsx("div", { className: css.filterEmpty, children: t('filter.noSourceMatch') }))] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: css.filterSection, children: t('filter.readState') }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => actions.toggleUnreadOnly(), children: [_jsx("span", { className: css.filterCheck, children: unreadOnly ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.unreadOnly') })] }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => actions.toggleHideDupes(), children: [_jsx("span", { className: css.filterCheck, children: hideDupes ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.hideDupes') })] }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => { setSourceFilter(''); setFilterPage('source'); }, children: [_jsx("span", { className: css.filterLabel, children: t('filter.bySource') }), _jsx("span", { className: css.filterValue, children: activeSourceLabel ?? t('filter.all') }), _jsx("span", { className: css.filterChevron, children: glyph('chevron', 12) })] }), _jsx("div", { className: css.filterSection, children: t('filter.byKind') }), _jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(''); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: query.trim() === '' ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t('filter.all') }), _jsx("span", { className: css.filterCount, children: allEntries.length })] }), READER_SOURCE_KINDS.map(kind => (_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(kindQuery(kind)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: activeKind === kind ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: t(kind === 'link' ? 'sources.kindLink' : 'sources.kindRss') }), _jsx("span", { className: css.filterCount, children: kindCounts[kind] })] }, kind))), tags.length > 0 && _jsx("div", { className: css.filterSection, children: t('filter.byTag') }), tags.map(tag => (_jsxs("div", { className: css.filterTagRow, children: [_jsxs("button", { type: "button", className: css.filterRow, onClick: () => { actions.setQuery(tagQuery(tag.id)); setFilterOpen(false); }, children: [_jsx("span", { className: css.filterCheck, children: query.trim() === tagQuery(tag.id) ? '✓' : '' }), _jsx("span", { className: css.filterLabel, children: tag.name }), _jsx("span", { className: css.filterCount, children: tagCounts[tag.id] ?? 0 })] }), _jsx("button", { type: "button", className: css.filterTagDelete, title: t('filter.deleteTag'), "aria-label": `${t('filter.deleteTag')}: ${tag.name}`, onClick: () => { void removeTag(tag.id); }, children: "\u00D7" })] }, tag.id)))] })) }))] }), _jsxs("span", { className: css.toolWrap, children: [_jsx("button", { type: "button", className: `${css.tool} ${sort === 'newest' ? '' : css.toolOn}`, title: t('sort.title'), onClick: () => { setFilterOpen(false); setSortOpen(open => !open); }, children: glyph('sort', 15) }), sortOpen && (_jsx("div", { className: css.menu, children: ['newest', 'oldest', 'source'].map(option => (_jsxs("button", { type: "button", onClick: () => { actions.setSort(option); setSortOpen(false); }, children: [_jsx("span", { children: t(`sort.${option}`) }), sort === option && _jsx("span", { className: css.check, children: "\u2713" })] }, option))) }))] }), wallTranslateOffered && (_jsxs("span", { className: css.translateWrap, children: [_jsx("button", { type: "button", className: `${css.tool}${wallOn ? ` ${css.toolOn}` : ''}`, title: t('action.translate'), "aria-pressed": wallOn, onClick: () => {
-                            setSortOpen(false);
-                            setFilterOpen(false);
-                            if (wallOn) {
-                                setWallOn(false);
-                                return;
-                            }
-                            wallCancelRef.current = { cancelled: false };
-                            setWallOn(true);
-                            // Cards already on screen are queued by the observer effect; a
-                            // wall that never scrolls still gets translated in one pass.
-                            void runWallPass();
-                        }, children: _jsx(IconGlobeOutlineMedium, { size: 15 }) }), wallOn && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.translateCaret, "aria-expanded": wallMenu, title: t('translate.view'), onClick: () => { setWallMenu(open => !open); }, children: _jsx(IconChevronDownOutlineMedium, { size: 10 }) }), wallMenu && (_jsxs("div", { className: css.translateMenu, role: "menu", children: [_jsx("div", { className: css.translateMenuHead, children: t('translate.local') }), _jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": !wallBoth, className: css.translateMenuItem, onClick: () => { setWallMenu(false); setWallBoth(false); }, children: [_jsx("span", { className: css.translateCheck, children: !wallBoth ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.onlyTranslation') })] }), _jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": wallBoth, className: css.translateMenuItem, onClick: () => { setWallMenu(false); setWallBoth(true); }, children: [_jsx("span", { className: css.translateCheck, children: wallBoth ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.bilingual') })] })] }))] }))] })), _jsx("button", { type: "button", className: css.tool, title: t('action.recent'), onClick: () => { actions.closeEntry(); actions.setView('recent'); }, children: _jsx(IconClockOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.manage'), onClick: () => { actions.closeEntry(); actions.setView('manage'); }, children: _jsx(IconSettingsOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.add'), onClick: () => { setAddOpen(true); setVerdict(null); }, children: _jsx(IconPlusOutlineMedium, { size: 15 }) })] }));
+                        }, children: glyph('funnel', 15) }), filterPanel] }), _jsxs("span", { className: css.toolWrap, children: [_jsx("button", { type: "button", className: `${css.tool} ${sort === 'newest' ? '' : css.toolOn}`, title: t('sort.title'), onClick: () => { setFilterOpen(false); setSortOpen(open => !open); }, children: glyph('sort', 15) }), sortMenu] }), wallTranslateOffered && (_jsxs("span", { className: css.translateWrap, children: [_jsx("button", { type: "button", className: `${css.tool}${wallOn ? ` ${css.toolOn}` : ''}`, title: t('action.translate'), "aria-pressed": wallOn, onClick: toggleWall, children: _jsx(IconGlobeOutlineMedium, { size: 15 }) }), wallOn && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.translateCaret, "aria-expanded": wallMenu, title: t('translate.view'), onClick: () => { setWallMenu(open => !open); }, children: _jsx(IconChevronDownOutlineMedium, { size: 10 }) }), wallMenu && (_jsxs("div", { className: css.translateMenu, role: "menu", children: [_jsx("div", { className: css.translateMenuHead, children: t('translate.local') }), _jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": !wallBoth, className: css.translateMenuItem, onClick: () => { setWallMenu(false); setWallBoth(false); }, children: [_jsx("span", { className: css.translateCheck, children: !wallBoth ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.onlyTranslation') })] }), _jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": wallBoth, className: css.translateMenuItem, onClick: () => { setWallMenu(false); setWallBoth(true); }, children: [_jsx("span", { className: css.translateCheck, children: wallBoth ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.bilingual') })] })] }))] }))] })), _jsx("button", { type: "button", className: css.tool, title: t('action.recent'), onClick: () => { actions.closeEntry(); actions.setView('recent'); }, children: _jsx(IconClockOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.manage'), onClick: () => { actions.closeEntry(); actions.setView('manage'); }, children: _jsx(IconSettingsOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.add'), onClick: () => { setAddOpen(true); setVerdict(null); }, children: _jsx(IconPlusOutlineMedium, { size: 15 }) })] }));
     /** Load the states once the wall knows which entries it is showing. */
     useEffect(() => { void refreshFetchStates(); }, [refreshFetchStates, rev]);
     /**
@@ -2819,12 +3434,12 @@ export function ReaderPane(props) {
     /** The add dialog: overlay + centered card, Esc and overlay-click close. */
     const dialog = addOpen && (_jsx("div", { className: css.overlay, role: "presentation", onClick: event => { if (event.target === event.currentTarget)
             setAddOpen(false); }, children: _jsxs("div", { className: css.dialog, role: "dialog", "aria-modal": "true", "aria-label": t('add.title'), onKeyDown: event => { if (event.key === 'Escape')
-                setAddOpen(false); }, children: [_jsx("h2", { children: t('add.title') }), _jsx("p", { children: t('add.help') }), _jsx("input", { autoFocus: true, value: draftUrl, placeholder: t('add.placeholder'), onChange: event => setDraftUrl(event.target.value), onKeyDown: event => { if (event.key === 'Enter')
-                        void submit(); } }), verdict !== null && (_jsxs("div", { className: css.verdict, children: [_jsx("b", { children: t(VERDICT_KEY[verdict.kind], verdict.kind === 'savedLinkNoPreview'
+                setAddOpen(false); }, children: [_jsx("h2", { children: t('add.title') }), _jsx("p", { children: t('add.help') }), _jsx("input", { autoFocus: true, value: draftUrl, placeholder: t('add.placeholder'), disabled: addBusySince !== null, onChange: event => setDraftUrl(event.target.value), onKeyDown: event => { if (event.key === 'Enter')
+                        void submit(); } }), addBusySince !== null && _jsx(BusyLine, { t: t, label: t('add.busy'), since: addBusySince }), verdict !== null && (_jsxs("div", { className: css.verdict, children: [_jsx("b", { children: t(VERDICT_KEY[verdict.kind], verdict.kind === 'savedLinkNoPreview'
                                 ? { label: verdict.label ?? '', reason: previewReason(t, verdict.code, verdict.reason ?? '') }
-                                : verdict.label === undefined ? {} : { label: verdict.label }) }), verdict.reason !== undefined && verdict.kind === 'fetchFailed' && (_jsx("span", { className: css.verdictReason, children: verdict.reason })), verdict.url !== undefined && verdict.code !== undefined && OPEN_IN_BROWSER_CODES.has(verdict.code) && (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(verdict.url); }, children: t('action.openExternal') })] }))] })), _jsxs("div", { className: css.dialogActions, children: [_jsx("button", { type: "button", className: css.ghost, onClick: () => setAddOpen(false), children: verdict !== null && (verdict.kind === 'subscribed' || verdict.kind === 'savedLink' || verdict.kind === 'savedLinkNoPreview')
+                                : verdict.label === undefined ? {} : { label: verdict.label }) }), verdict.reason !== undefined && verdict.kind === 'fetchFailed' && (_jsx("span", { className: css.verdictReason, children: verdict.reason })), verdict.code === 'blocked' && captureRemote !== undefined && (_jsx("span", { className: css.verdictReason, children: t('verdict.willRender') })), verdict.url !== undefined && verdict.code !== undefined && OPEN_IN_BROWSER_CODES.has(verdict.code) && (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(verdict.url); }, children: t('action.openExternal') })] }))] })), _jsxs("div", { className: css.dialogActions, children: [_jsx("button", { type: "button", className: css.ghost, onClick: () => setAddOpen(false), children: verdict !== null && (verdict.kind === 'subscribed' || verdict.kind === 'savedLink' || verdict.kind === 'savedLinkNoPreview')
                                 ? t('action.done')
-                                : t('action.cancel') }), _jsx("button", { type: "button", className: css.submit, onClick: () => { void submit(); }, children: t('action.submit') })] })] }) }));
+                                : t('action.cancel') }), _jsx("button", { type: "button", className: css.submit, disabled: addBusySince !== null || draftUrl.trim() === '', onClick: () => { void submit(); }, children: addBusySince !== null ? t('add.fetching') : t('action.submit') })] })] }) }));
     /* ------------------------------------------------------------- detail view */
     if (view === 'detail' && (openEntry !== undefined || openEntryId !== null)) {
         /**
@@ -2839,9 +3454,25 @@ export function ReaderPane(props) {
         if (openEntry === undefined) {
             return (_jsxs("div", { className: css.root, children: [_jsxs("div", { className: css.bar, children: [_jsx("button", { type: "button", className: css.tool, title: t('action.back'), onClick: () => { actions.setView('list'); actions.closeEntry(); }, children: _jsx(IconChevronLeftOutlineMedium, { size: 14 }) }), _jsx("span", { className: css.barLabel, children: t('tab.label') }), _jsx("span", { className: css.spacer })] }), _jsx("div", { className: css.detailBody, children: _jsx("p", { className: css.incomplete, children: t('state.loading') }) })] }));
         }
+        /**
+         * The title follows the body's translation: 译文 shows it translated,
+         * 对照 translated with the original beneath, 原文 (or no translation) as
+         * the source wrote it. The header bar carries the shown one.
+         */
+        const translatedTitle = titleTranslation?.id === openEntry.id && translateView !== 'orig'
+            && (translatePhase === 'ready' || translatePhase === 'working')
+            ? titleTranslation.text
+            : undefined;
+        const shownTitle = translatedTitle ?? openEntry.title;
         const source = presentation.get(openEntry.sourceId);
         /** The host's own row for this entry's source: the failure code lives here. */
         const sourceSummary = sources.find(item => item.id === openEntry.sourceId);
+        /**
+         * The plain fetch met a wall a headless browser gets past, and the
+         * rendered fetch is mounted: the error line is that render's slot.
+         */
+        const wallRenderable = captureRemote !== undefined && openEntry.link !== undefined && articleError !== null
+            && (browserSolvable(articleError) || sourceSummary?.failure?.code === 'blocked' || captureFailure?.entryId === openEntry.id);
         const when = relativeWhen(openEntry.publishedAt, new Date());
         const date = absoluteDate(openEntry.publishedAt);
         const alsoFrom = allEntries
@@ -2853,33 +3484,126 @@ export function ReaderPane(props) {
             : translateProgress !== null && translateProgress.total > 0
                 ? Math.round((translateProgress.done / translateProgress.total) * 100)
                 : 0;
-        return (_jsxs("div", { className: css.root, children: [_jsxs("div", { className: css.bar, children: [_jsx("button", { type: "button", className: css.tool, title: t('action.back'), onClick: () => { actions.setView('list'); actions.closeEntry(); }, children: _jsx(IconChevronLeftOutlineMedium, { size: 14 }) }), _jsx("span", { className: css.barLabel, children: openEntry.title }), _jsx("span", { className: css.spacer }), translationOffered && (_jsxs("span", { className: css.translateWrap, children: [_jsx("button", { type: "button", className: `${css.tool}${translatePhase === 'pack' || translatePhase === 'working' ? ` ${css.toolSpinning}` : ''}${translatePhase === 'ready' && translateView !== 'orig' ? ` ${css.toolOn}` : ''}`, title: t('action.translate'), "aria-pressed": translatePhase === 'ready' && translateView !== 'orig', onClick: toggleGlobe, children: _jsx(IconGlobeOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.translateCaret, "aria-expanded": translateMenu, title: t('translate.view'), onClick: () => { setTranslateMenu(open => !open); }, children: _jsx(IconChevronDownOutlineMedium, { size: 10 }) }), translateMenu && (_jsxs("div", { className: css.translateMenu, role: "menu", children: [_jsx("div", { className: css.translateMenuHead, children: t('translate.local') }), TRANSLATION_VIEWS.map(item => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": translateView === item.view, className: css.translateMenuItem, onClick: () => { pickView(item.view); }, children: [_jsx("span", { className: css.translateCheck, children: translateView === item.view ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t(item.key) })] }, item.view))), (translatePhase === 'ready' || translatePhase === 'failed') && (_jsxs("button", { type: "button", role: "menuitem", className: css.translateMenuItem, onClick: () => {
-                                                setTranslateMenu(false);
-                                                if (builtRef.current !== null)
-                                                    restoreArticle(builtRef.current.root);
-                                                builtRef.current = null;
-                                                void startTranslation(lastViewRef.current);
-                                            }, children: [_jsx("span", { className: css.translateCheck }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.retry') })] }))] }))] })), _jsx("button", { type: "button", className: css.tool, title: t('action.copyLink'), onClick: () => { void copyLink(); }, children: _jsx(IconCopyOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.openExternal'), onClick: () => { if (openEntry.link !== undefined)
-                                props.openExternal(openEntry.link); }, children: _jsx(IconRightUpOutlineMedium, { size: 15 }) }), sourceSummary?.kind === 'link' && (_jsx("button", { type: "button", className: `${css.tool} ${css.toolDanger}`, title: t('detail.removeLink'), onClick: () => { void removeLink(openEntry.sourceId); }, children: _jsx(IconTrashOutlineMedium, { size: 15 }) }))] }), _jsxs("div", { className: css.detailBody, ref: detailRef, onScroll: onDetailScroll, children: [_jsxs("div", { className: css.kicker, children: [_jsx("span", { className: css.tile, style: { background: source?.hue }, children: source?.tile }), _jsx("span", { children: source?.label }), _jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { children: date ?? t(when.key, when.count === undefined ? {} : { count: when.count }) }), openEntry.author !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { children: openEntry.author })] })), sourceSummary?.resolvedFrom !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("button", { type: "button", className: css.incompleteLink, title: t('detail.resolvedFrom', { url: sourceSummary.resolvedFrom }), onClick: () => { props.openExternal(sourceSummary.resolvedFrom); }, children: sourceSummary.resolvedFrom.replace(/^https?:\/\//, '') })] }))] }), _jsx("h1", { className: css.detailTitle, children: openEntry.title }), ((openEntry.tags ?? []).length > 0 || openEntry.link !== undefined) && (_jsxs("div", { className: css.tagRow, children: [(openEntry.tags ?? []).map(tag => _jsx("span", { className: css.tag, children: tag }, tag)), openEntry.link !== undefined && (_jsxs("button", { type: "button", className: css.refetch, 
+        /*
+         * The globe is a switch, not a verb: lit means this body is showing a
+         * translation, dark means it is showing the original — and the caret holds
+         * the view (translation only / side by side / original). Everything is
+         * hidden when the browser has no Translator API (and no stored translation
+         * of this body), the pair is unavailable, or the body is already Chinese:
+         * an offer that cannot work is worse than no offer.
+         */
+        const detailTranslate = translationOffered && localActive ? (
+        // A transcript still arriving is rewritten every poll: a translation
+        // would be wiped, so the globe waits for the whole transcript.
+        _jsx("span", { className: css.translateWrap, children: _jsx("button", { type: "button", className: css.tool, disabled: true, "aria-disabled": "true", title: t('media.translateAfter'), children: _jsx(IconGlobeOutlineMedium, { size: 15 }) }) })) : translationOffered && (_jsxs("span", { className: css.translateWrap, children: [_jsx("button", { type: "button", className: `${css.tool}${translatePhase === 'pack' || translatePhase === 'working' ? ` ${css.toolSpinning}` : ''}${translatePhase === 'ready' && translateView !== 'orig' ? ` ${css.toolOn}` : ''}`, title: t('action.translate'), "aria-pressed": translatePhase === 'ready' && translateView !== 'orig', onClick: toggleGlobe, children: _jsx(IconGlobeOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.translateCaret, "aria-expanded": translateMenu, title: t('translate.view'), onClick: () => { setTranslateMenu(open => !open); }, children: _jsx(IconChevronDownOutlineMedium, { size: 10 }) }), translateMenu && (_jsxs("div", { className: css.translateMenu, role: "menu", children: [_jsx("div", { className: css.translateMenuHead, children: t(translator === null ? 'translate.stored' : 'translate.local') }), TRANSLATION_VIEWS.map(item => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": translateView === item.view, className: css.translateMenuItem, onClick: () => { pickView(item.view); }, children: [_jsx("span", { className: css.translateCheck, children: translateView === item.view ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t(item.key) })] }, item.view))), _jsxs("button", { type: "button", role: "menuitem", className: css.translateMenuItem, onClick: () => { setTranslateMenu(false); requestPolish(); }, children: [_jsx("span", { className: css.translateCheck }), _jsx("span", { className: css.translateMenuLabel, children: t('polish.action') })] }), openEntry.media !== undefined && (_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": autoTranslate, className: css.translateMenuItem, onClick: () => { setAutoTranslatePref(!autoTranslate); }, children: [_jsx("span", { className: css.translateCheck, children: autoTranslate ? '✓' : '' }), _jsx("span", { className: css.translateMenuLabel, children: t('media.autoTranslate') })] })), translator !== null && (translatePhase === 'ready' || translatePhase === 'failed') && (_jsxs("button", { type: "button", role: "menuitem", className: css.translateMenuItem, onClick: () => {
+                                setTranslateMenu(false);
+                                if (builtRef.current !== null)
+                                    restoreArticle(builtRef.current.root);
+                                builtRef.current = null;
+                                void startTranslation(lastViewRef.current);
+                            }, children: [_jsx("span", { className: css.translateCheck }), _jsx("span", { className: css.translateMenuLabel, children: t('translate.retry') })] }))] }))] }));
+        /** The detail's ordinary actions: inline in the wide bar, in ⋯ on a compact one. */
+        /** A foreign body the globe does not offer (no on-device translator): the agent needs none. */
+        const polishOutsideGlobe = !translationOffered && articleHtml !== null && articleHtml.length > 0 && !isTargetLanguage(articleHtml.slice(0, 2000));
+        const detailActions = [
+            // Also here, for a body the globe does not offer (no on-device translator): the agent needs none.
+            ...(polishOutsideGlobe
+                ? [{ id: 'polish', label: t('polish.action'), icon: _jsx(IconGlobeOutlineMedium, { size: 16 }), menuOnly: true, onSelect: () => { requestPolish(); } }]
+                : []),
+            { id: 'copy', label: t('action.copyLink'), icon: _jsx(IconCopyOutlineMedium, { size: 16 }), menuOnly: true, onSelect: () => { void copyLink(); } },
+            {
+                id: 'open', label: t('action.openExternal'), icon: _jsx(IconRightUpOutlineMedium, { size: 16 }), menuOnly: true,
+                onSelect: () => { if (openEntry.link !== undefined)
+                    props.openExternal(openEntry.link); },
+            },
+            ...(sourceSummary?.kind === 'link'
+                ? [{ id: 'remove', label: t('detail.removeLink'), icon: _jsx(IconTrashOutlineMedium, { size: 16 }), menuOnly: true, danger: true, onSelect: () => { void removeLink(openEntry.sourceId); } }]
+                : []),
+        ];
+        return (
+        // data-quote-source: a passage quoted from here names this article, not
+        // the conversation the pane happens to sit beside (the quote plugin
+        // reads it; without that plugin it is inert).
+        _jsxs("div", { className: css.root, "data-quote-source": shownTitle, children: [compact ? (
+                // No title at first: the article's own heading sits right below with
+                // its source and date in the kicker, so a title here would say it
+                // twice. Once that heading scrolls away, the bar takes the title.
+                _jsx(PanelHeader, { className: css.compactBar, title: titleScrolledAway ? _jsx("span", { className: css.compactBarTitle, children: shownTitle }) : '', onBack: () => { actions.setView('list'); actions.closeEntry(); }, backLabel: t('action.back'), extra: detailTranslate, actions: detailActions, moreLabel: t('action.more') })) : _jsxs("div", { className: css.bar, children: [_jsx("button", { type: "button", className: css.tool, title: t('action.back'), onClick: () => { actions.setView('list'); actions.closeEntry(); }, children: _jsx(IconChevronLeftOutlineMedium, { size: 14 }) }), _jsx("span", { className: css.barLabel, title: translatedTitle === undefined ? undefined : openEntry.title, children: shownTitle }), _jsx("span", { className: css.spacer }), detailTranslate, polishOutsideGlobe && (_jsx("button", { type: "button", className: css.tool, title: t('polish.action'), onClick: () => { requestPolish(); }, children: _jsx(IconGlobeOutlineMedium, { size: 15 }) })), _jsx("button", { type: "button", className: css.tool, title: t('action.copyLink'), onClick: () => { void copyLink(); }, children: _jsx(IconCopyOutlineMedium, { size: 15 }) }), _jsx("button", { type: "button", className: css.tool, title: t('action.openExternal'), onClick: () => { if (openEntry.link !== undefined)
+                                props.openExternal(openEntry.link); }, children: _jsx(IconRightUpOutlineMedium, { size: 15 }) }), sourceSummary?.kind === 'link' && (_jsx("button", { type: "button", className: `${css.tool} ${css.toolDanger}`, title: t('detail.removeLink'), onClick: () => { void removeLink(openEntry.sourceId); }, children: _jsx(IconTrashOutlineMedium, { size: 15 }) }))] }), mediaFace.media !== undefined && (_jsx(MediaPlayer, { ref: mediaFace.playerRef, media: mediaFace.media, title: openEntry.title, startAt: mediaFace.startAt, onTime: mediaFace.onTime, mini: mediaFace.mini, onMini: mediaFace.setMini, labels: {
+                        collapse: t('media.collapse'), expand: t('media.expand'), noFollow: t('media.noFollow'),
+                        play: t('media.play'), pause: t('media.pause'), startedAt: t('media.startedAt'),
+                    }, leading: (mediaFace.transcript === 'ready' || mediaFace.transcript === 'loading' || localActive || (mediaFace.transcript === 'none' && mediaFace.hidden)) && (_jsxs("label", { className: css.mediaSwitch, children: [_jsx("input", { type: "checkbox", checked: !mediaFace.hidden, onChange: event => {
+                                    mediaFace.setHidden(!event.target.checked);
+                                    // Back on with nothing to read: transcribe again.
+                                    if (event.target.checked && mediaFace.transcript === 'none' && !localActive)
+                                        localFace.retry();
+                                } }), t('media.captions')] })), trailing: localFace.status !== undefined && localActive
+                        ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: css.mediaSource, children: [localFace.status.state === 'fetching' ? t('media.localFetching')
+                                            : localFace.status.state === 'queued' ? (localFace.status.ahead !== undefined && localFace.status.ahead > 0 ? t('media.localQueuedAhead', { count: localFace.status.ahead }) : t('media.localQueued'))
+                                                : t('media.localRunning', { percent: Math.round((localFace.status.progress ?? 0) * 100) }), localFace.etaSeconds !== undefined && ` · ${t('media.localEta', { minutes: Math.max(1, Math.round(localFace.etaSeconds / 60)) })}`, ' ', _jsx("button", { type: "button", className: css.mediaLink, onClick: localFace.stop, children: t('media.localStop') })] }), _jsxs("label", { className: css.mediaSwitch, children: [_jsx("input", { type: "checkbox", checked: autoTranslate, onChange: event => { setAutoTranslatePref(event.target.checked); } }), t('media.autoTranslate')] })] }))
+                        : (_jsx("span", { className: css.mediaSource, children: mediaFace.transcript === 'ready' ? (articleHtml?.includes('data-src="local"') === true
+                                ? localFace.status?.state === 'speakers'
+                                    ? _jsxs(_Fragment, { children: [t('media.sourceLocal'), " \u00B7 ", t('media.speakersRunning')] })
+                                    : _jsxs(_Fragment, { children: [t('media.sourceLocal'), " \u00B7 ", _jsx("button", { type: "button", className: css.mediaLink, onClick: localFace.retry, children: t('media.localRetry') })] })
+                                : t('media.sourcePlatform'))
+                                : mediaFace.transcript === 'loading' ? t('media.loading')
+                                    : mediaFace.transcript === 'failed' ? t('media.failed')
+                                        : mediaFace.transcript === 'none' && !mediaFace.hidden ? (localFace.status?.state === 'unavailable' ? (mediaFace.media.kind === 'audio' ? t('media.noCaptionsAudio') : t('media.noCaptions'))
+                                            : localFace.status?.state === 'failed' ? (_jsxs(_Fragment, { children: [t('media.localFailed', { error: localFace.status.error ?? '' }), " ", _jsx("button", { type: "button", className: css.mediaLink, onClick: localFace.retry, children: t('media.localRetry') })] }))
+                                                : localFace.status?.state === 'idle' ? (_jsxs(_Fragment, { children: [t('media.localStopped'), " ", _jsx("button", { type: "button", className: css.mediaLink, onClick: localFace.retry, children: t('media.localRetry') })] })) : '') : '' })) }, openEntry.id)), mediaFace.media !== undefined && hasSpeakers && !mediaFace.hidden && !mediaFace.mini && (_jsx(SpeakerLegend, { count: speakerCount, label: speakerLabel, onRename: renameSpeaker, hint: t('media.speakerHint'), renameTitle: t('media.speakerRename') })), mediaFace.media !== undefined && localFace.status?.state === 'needs-models' && !mediaFace.hidden && (_jsxs("div", { className: css.mediaConfirm, children: [_jsx("span", { children: t('media.localModels', { size: Math.max(1, Math.round((localFace.status.bytes ?? 0) / 1e6)) }) }), _jsx("button", { type: "button", className: css.mediaConfirmButton, onClick: localFace.confirm, children: t('media.localModelsGo') })] })), !(mediaFace.media !== undefined && mediaFace.hidden && mediaFace.transcript === 'ready') && _jsx(UnderlineTabs, { className: css.detailTabs, label: t('notes.tabsLabel'), value: notesFace.tab, onChange: notesFace.setTab, 
+                    // 考考我 is always in reach, not only at the end of a long body.
+                    trailing: articleHtml !== null && articleHtml.length > 0 && !localActive && (_jsx("button", { type: "button", className: css.checkChip, onClick: notesFace.check, title: t('notes.check'), children: t('notes.checkShort') })), tabs: [
+                        { id: 'article', label: mediaFace.media === undefined ? t('notes.tabArticle') : t('media.tabTranscript') },
+                        { id: 'notes', label: t('notes.tabNotes'), ...(notesFace.count > 0 ? { badge: notesFace.count } : {}) },
+                    ] }), mediaFace.media !== undefined && mediaFace.hidden && mediaFace.transcript === 'ready' && _jsx("div", { className: css.mediaFill }), notesFace.tab === 'notes' && !(mediaFace.media !== undefined && mediaFace.hidden && mediaFace.transcript === 'ready') && (_jsx(NotesView, { t: t, entry: notesFace.entry, missing: notesFace.missing, sessionTitle: notesFace.sessionTitle, canOpenSession: notesFace.canOpenSession, onJump: notesFace.jump, onEdit: notesFace.edit, onDelete: notesFace.remove, onDiscuss: notesFace.discuss, onOpenSession: notesFace.openSession, onAddReply: notesFace.addReply, onEditReply: notesFace.editReply, onDeleteDiscussion: notesFace.deleteDiscussion, onJumpPara: notesFace.jumpPara, onCheck: notesFace.check, sync: notesFace.sync, ...(mediaFace.media === undefined ? {} : {
+                        onPlay: (note) => {
+                            notesFace.jump(note);
+                            if (note.anchor.time !== undefined)
+                                mediaFace.seek(note.anchor.time);
+                        },
+                    }) })), _jsxs("div", { className: css.detailBody, ref: detailRef, onScroll: onDetailScroll, 
+                    // Hidden, not unmounted: the article's segmentation, its translation
+                    // and the reading position all live on this subtree. The 「字幕」
+                    // switch hides it the same way (just the video, no transcript).
+                    hidden: notesFace.tab === 'notes' || (mediaFace.media !== undefined && mediaFace.hidden && mediaFace.transcript === 'ready'), children: [_jsxs("div", { className: css.kicker, children: [_jsx("span", { className: css.tile, style: { background: source?.hue }, children: source?.tile }), _jsx("span", { children: source?.label }), _jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { children: date ?? t(when.key, when.count === undefined ? {} : { count: when.count }) }), openEntry.author !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { children: openEntry.author })] })), sourceSummary?.resolvedFrom !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("button", { type: "button", className: css.incompleteLink, title: t('detail.resolvedFrom', { url: sourceSummary.resolvedFrom }), onClick: () => { props.openExternal(sourceSummary.resolvedFrom); }, children: sourceSummary.resolvedFrom.replace(/^https?:\/\//, '') })] }))] }), _jsxs("h1", { ref: detailTitleRef, className: css.detailTitle, children: [shownTitle, translatedTitle !== undefined && translateView === 'both' && (_jsx("span", { className: css.detailTitleOrig, children: openEntry.title }))] }), ((openEntry.tags ?? []).length > 0 || openEntry.link !== undefined) && (_jsxs("div", { className: css.tagRow, children: [(openEntry.tags ?? []).map(tag => _jsx("span", { className: css.tag, children: tag }, tag)), openEntry.link !== undefined && openEntry.media === undefined && (_jsxs("button", { type: "button", className: css.refetch, 
                                     // A rendered entry's「重新抓取」re-renders through capture —
                                     // captureBusy is that in-flight state, or the button looks
                                     // dead for minutes.
-                                    disabled: bodyFetching || captureBusy, title: t('detail.refetchTitle'), onClick: () => { void refetchEntry(openEntry); }, children: [glyph('fetch', 11), _jsx("span", { children: bodyFetching || captureBusy ? t('detail.refetching') : t('detail.refetch') })] }))] })), _jsx("div", { className: css.rule }), (translatePhase === 'pack' || translatePhase === 'working') && (_jsxs("div", { className: css.translateStatus, children: [_jsx("span", { children: translatePhase === 'pack'
+                                    disabled: bodyFetching || captureBusy, title: t('detail.refetchTitle'), onClick: () => { void refetchEntry(openEntry); }, children: [glyph('fetch', 11), _jsx("span", { children: bodyFetching || captureBusy ? t('detail.refetching') : t('detail.refetch') })] }))] })), _jsx("div", { className: css.rule }), mediaFace.media !== undefined && mediaFace.hintOwed && articleHtml?.includes('data-t=') === true && (_jsxs("div", { className: css.timeHint, children: [_jsx("span", { children: t(mediaFace.media.kind === 'video' ? 'media.timeHint' : 'media.timeHintAudio') }), _jsx("button", { type: "button", className: css.mediaLink, onClick: mediaFace.dismissHint, children: t('media.timeHintOk') })] })), polishFace.view !== undefined ? (_jsxs("div", { className: `${css.polishStatus} ${polishFace.view.complete ? css.polishDone : ''}`, children: [_jsx("span", { className: css.polishText, children: polishFace.view.complete ? t('polish.done', { done: polishFace.view.done })
+                                        : polishFace.stalled ? t('polish.stalled', { done: polishFace.view.done, total: polishFace.view.total })
+                                            : t('polish.running', { done: polishFace.view.done, total: polishFace.view.total }) }), !polishFace.view.complete && !polishFace.stalled && (_jsx("span", { className: css.translateBar, children: _jsx("i", { style: { width: `${String(Math.round((polishFace.view.done / Math.max(1, polishFace.view.total)) * 100))}%` } }) })), polishFace.stalled && (() => {
+                                    const view = polishFace.view;
+                                    let from = 1;
+                                    while (from <= view.total && view.paragraphs[String(from)] !== undefined)
+                                        from += 1;
+                                    return (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { requestPolish(from); }, children: t('polish.continue', { count: view.total - view.done }) }));
+                                })(), _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { polishFace.setHidden(!polishFace.hidden); }, children: polishFace.hidden ? t('polish.showPolish') : t('polish.showMachine') })] })) : polishFace.awaiting && (_jsx("div", { className: css.polishStatus, children: _jsx("span", { className: css.polishText, children: t('polish.awaiting') }) })), (translatePhase === 'pack' || translatePhase === 'working') && (_jsxs("div", { className: css.translateStatus, children: [_jsx("span", { children: translatePhase === 'pack'
                                         ? t('translate.preparing')
-                                        : _jsxs(_Fragment, { children: [_jsx("b", { children: t('translate.working') }), translateProgress !== null ? ` ${translateProgress.done}/${translateProgress.total}` : ''] }) }), _jsx("span", { className: css.translateBar, children: _jsx("i", { style: { width: `${String(statusPercent)}%` } }) }), _jsx("button", { type: "button", className: css.incompleteLink, onClick: cancelTranslation, children: t('action.cancel') })] })), translatePhase === 'failed' && translateError !== null && (_jsxs("div", { className: css.translateStatus, "data-failed": "true", children: [translateError, _jsx("button", { type: "button", className: css.incompleteLink, onClick: cancelTranslation, children: t('action.done') })] })), translatePhase === 'ready' && !tipDismissed && (_jsxs("div", { className: css.translateTip, children: [t('translate.tip'), _jsx("button", { type: "button", title: t('translate.dismiss'), "aria-label": t('translate.dismiss'), onClick: () => { setTipDismissed(true); }, children: "\u00D7" })] })), bodyFetching && (_jsx("p", { className: css.incomplete, children: t('detail.fetchingBody') })), scriptFigures > 0 && (_jsxs("p", { className: css.incomplete, children: [t('detail.scriptFigures', { count: scriptFigures }), ' ', captureRemote !== undefined && openEntry.link !== undefined && (captureBusy
-                                    ? _jsx("span", { children: t('detail.rendering') })
-                                    : (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { void captureBody(openEntry.id, openEntry.link); }, children: t('detail.renderFetch') }))), ' ', openEntry.link !== undefined && (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(openEntry.link); }, children: browserTab ? t('action.openExternal') : t('detail.readOriginal') }))] })), articleError !== null && (_jsxs("p", { className: css.incomplete, children: [previewReason(t, sourceSummary?.failure?.code, articleError), openEntry.link !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(openEntry.link); }, children: t('detail.readOriginal') })] }))] })), openEntry.summaryOnly === true && articleHtml !== null && articleHtml === openEntry.contentHtml && (_jsx("p", { className: css.incomplete, children: t('detail.summaryOnly') })), articleHtml !== null && articleHtml.length > 0 && (_jsx("div", { 
+                                        : _jsxs(_Fragment, { children: [_jsx("b", { children: t('translate.working') }), translateProgress !== null ? ` ${translateProgress.done}/${translateProgress.total}` : ''] }) }), _jsx("span", { className: css.translateBar, children: _jsx("i", { style: { width: `${String(statusPercent)}%` } }) }), _jsx("button", { type: "button", className: css.incompleteLink, onClick: cancelTranslation, children: t('action.cancel') })] })), translatePhase === 'failed' && translateError !== null && (_jsxs("div", { className: css.translateStatus, "data-failed": "true", children: [translateError, _jsx("button", { type: "button", className: css.incompleteLink, onClick: cancelTranslation, children: t('action.done') })] })), translatePhase === 'ready' && !tipDismissed && (_jsxs("div", { className: css.translateTip, children: [t('translate.tip'), _jsx("button", { type: "button", title: t('translate.dismiss'), "aria-label": t('translate.dismiss'), onClick: () => { setTipDismissed(true); }, children: "\u00D7" })] })), bodyFetching && (_jsx(BusyLine, { t: t, label: bodyFetch?.entryId === openEntryId ? t(`detail.phase.${bodyFetch.phase}`) : t('detail.fetchingBody'), ...(bodyFetch?.entryId === openEntryId ? { since: bodyFetch.since } : {}) })), scriptFigures > 0 && (_jsxs("p", { className: css.incomplete, children: [t('detail.scriptFigures', { count: scriptFigures }), ' ', captureRemote !== undefined && openEntry.link !== undefined && (captureBusy
+                                    ? _jsxs("span", { className: css.renderingLine, children: [_jsx("span", { className: css.renderingRing, "aria-hidden": "true" }), t('detail.rendering')] })
+                                    : (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { void captureBody(openEntry.id, openEntry.link); }, children: t('detail.renderFetch') }))), ' ', !captureBusy && captureFailure?.entryId === openEntry.id && (_jsxs("span", { children: [t('detail.renderFailed', { reason: captureFailure.message }), ' '] })), openEntry.link !== undefined && (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(openEntry.link); }, children: browserTab ? t('action.openExternal') : t('detail.readOriginal') }))] })), articleError !== null && (wallRenderable && captureBusy
+                            ? (
+                            // The open gesture already escalated: while the headless render
+                            // runs, the line says THAT (and how long it takes) instead of
+                            // leading with a refusal the reader cannot tell is being handled.
+                            _jsx("p", { className: css.incomplete, children: _jsxs("span", { className: css.renderingLine, children: [_jsx("span", { className: css.renderingRing, "aria-hidden": "true" }), t('detail.renderingWall')] }) }))
+                            : (_jsxs("p", { className: css.incomplete, children: [previewReason(t, sourceSummary?.failure?.code, articleError), captureFailure?.entryId === openEntry.id && (_jsxs(_Fragment, { children: [' ', t('detail.renderFailed', { reason: captureFailure.message })] })), wallRenderable && (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { void captureBody(openEntry.id, openEntry.link); }, children: t('detail.renderFetch') })] })), openEntry.link !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { openElsewhere(openEntry.link); }, children: t('detail.readOriginal') })] }))] }))), openEntry.summaryOnly === true && openEntry.media === undefined && articleHtml !== null && articleHtml === openEntry.contentHtml && (_jsx("p", { className: css.incomplete, children: t('detail.summaryOnly') })), articleHtml !== null && articleHtml.length > 0 && (_jsx("div", { 
                             // The markup is the output of this package's own whitelist
-                            // normalizer (`extract-article`): scripts, styles, forms, iframes
-                            // and event attributes are already gone, and every URL that
-                            // survives has been scheme-checked. Re-sanitizing here would mean
-                            // a second implementation of the same policy.
+                            // normalizer (`extract-article`): scripts, styles, forms and
+                            // event attributes are already gone, every URL that survives has
+                            // been scheme-checked, and a kept embed is a sandboxed
+                            // opaque-origin iframe or a controls-only media element.
+                            // Re-sanitizing here would mean a second implementation of the
+                            // same policy.
                             //
                             // `translate.ts` decorates THIS subtree in place when the reader
                             // asks for a translation (text nodes only), so the click handler
                             // is delegation: the sentences it creates are not React's.
-                            ref: articleRef, onClick: onArticleClick, onMouseOver: onArticleHover, onMouseOut: onArticleHover, className: `${css.article} ${isCjk(articleHtml) ? css.articleZh : css.articleEn}`, dangerouslySetInnerHTML: { __html: articleHtml } })), (articleTruncated || openEntry.truncated === true) && (_jsxs("p", { className: css.incomplete, children: [t('detail.incomplete'), " \u2014", ' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { if (openEntry.link !== undefined)
-                                        props.openExternal(openEntry.link); }, children: t('detail.readOriginal') })] })), _jsxs("div", { className: css.tagEdit, children: [_jsx("span", { className: css.tagEditLabel, children: t('tag.title') }), tags.filter(tag => (entryTagIds[openEntry.id] ?? []).includes(tag.id)).map(tag => (_jsxs("span", { className: css.tagChip, children: [tag.name, _jsx("button", { type: "button", className: css.tagChipRemove, title: t('action.remove'), onClick: () => { void toggleTag(openEntry.id, tag.id, false); }, children: "\u00D7" })] }, tag.id))), tagInputOpen
+                            ref: articleRef, onClick: onArticleClick, onMouseOver: onArticleHover, onMouseOut: onArticleHover, 
+                            // Image error events do not bubble; the capture phase is the
+                            // only way one handler sees every failed figure in the body.
+                            onErrorCapture: onArticleImageError, className: `${css.article} ${isCjk(articleHtml) ? css.articleZh : css.articleEn}`, dangerouslySetInnerHTML: { __html: articleHtml } })), articleHtml !== null && articleHtml.length > 0 && (articleTruncated || openEntry.truncated === true) && (_jsxs("p", { className: css.incomplete, children: [t('detail.incomplete'), " \u2014", ' ', _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => { if (openEntry.link !== undefined)
+                                        props.openExternal(openEntry.link); }, children: t('detail.readOriginal') })] })), articleHtml !== null && articleHtml.length > 0 && (_jsxs("div", { className: css.checkEnd, children: [_jsx("span", { className: css.checkLead, children: t('notes.checkLead') }), _jsxs("button", { type: "button", className: css.checkLink, onClick: notesFace.check, children: [t('notes.check'), " \u2192"] })] })), _jsxs("div", { className: css.tagEdit, children: [_jsx("span", { className: css.tagEditLabel, children: t('tag.title') }), tags.filter(tag => (entryTagIds[openEntry.id] ?? []).includes(tag.id)).map(tag => (_jsxs("span", { className: css.tagChip, children: [tag.name, _jsx("button", { type: "button", className: css.tagChipRemove, title: t('action.remove'), onClick: () => { void toggleTag(openEntry.id, tag.id, false); }, children: "\u00D7" })] }, tag.id))), tagInputOpen
                                     ? (_jsxs("div", { className: css.tagEditField, children: [_jsx("input", { autoFocus: true, className: css.tagInput, value: tagDraft, placeholder: t('tag.placeholder'), onChange: event => setTagDraft(event.target.value), 
                                                 // A suggestion's mousedown is suppressed, so this fires only
                                                 // when focus really left the editor.
@@ -2913,13 +3637,7 @@ export function ReaderPane(props) {
                                             sourceKind: source?.kind ?? 'rss',
                                             unread: read[entry.id] !== true,
                                         });
-                                    }, children: [_jsx("span", { className: css.alsoFromTitle, children: entry.title }), _jsx("span", { className: css.when, children: whenLabel(t, entry.publishedAt) })] }, entry.id)))] }))] }), _jsxs("div", { className: css.composer, children: [_jsx("div", { className: css.composerLabel, children: t('detail.composerLabel') }), _jsx("div", { className: `${css.composerText} ${draft.length === 0 ? css.composerEmpty : ''}`, children: draft.length === 0 ? t('detail.composerEmpty') : draft })] }), _jsxs("div", { className: css.foot, children: [_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => quote(), children: t('action.quote') }), sideChatAvailable && openEntry.link !== undefined && (_jsx("button", { type: "button", className: css.incompleteLink, onClick: () => {
-                                void props.quoteToSideChat({
-                                    contextKey: sessionId,
-                                    label: openEntry.title,
-                                    text: formatReaderRef('', provenanceOf(openEntry, { label: source?.label ?? '' })),
-                                });
-                            }, children: t('quote.toSideChat') }))] })] }));
+                                    }, children: [_jsx("span", { className: css.alsoFromTitle, children: entry.title }), _jsx("span", { className: css.when, children: whenLabel(t, entry.publishedAt) })] }, entry.id)))] })), mediaFace.followPaused && (_jsx("div", { className: css.followDock, children: _jsxs("button", { type: "button", className: css.followButton, onClick: mediaFace.resumeFollow, children: ["\u2193 ", t('media.backToNow')] }) }))] }), notesFace.sheet !== null && (_jsx(NoteSheet, { t: t, selection: notesFace.sheet, saving: notesFace.saving, failed: notesFace.failed, onSave: notesFace.saveNote, onCancel: notesFace.cancelSheet }))] }));
     }
     /* ------------------------------------------------------ subscriptions page */
     if (view === 'recent') {
@@ -2980,7 +3698,7 @@ export function ReaderPane(props) {
                                     }) }))] }), dialog] }));
     }
     /* ------------------------------------------------------------------- wall */
-    return (_jsxs("div", { className: css.root, children: [header(false), _jsx("div", { className: css.tools, children: _jsxs("div", { className: css.search, children: [glyph('search', 12), _jsx("input", { value: query, placeholder: t('search.placeholder'), onChange: event => actions.setQuery(event.target.value) }), query.length > 0 && (_jsx("button", { type: "button", className: css.searchClear, title: t('action.clearSearch'), "aria-label": t('action.clearSearch'), onClick: () => { actions.setQuery(''); }, children: glyph('close', 15) }))] }) }), wallProgress !== null && (_jsxs("div", { className: css.translateStatus, children: [_jsxs("span", { children: [_jsx("b", { children: t('translate.working') }), ` ${wallProgress.done}/${wallProgress.total}`] }), _jsx("span", { className: css.translateBar, children: _jsx("i", { style: { width: `${wallProgress.total > 0 ? Math.round((wallProgress.done / wallProgress.total) * 100) : 0}%` } }) }), _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => {
+    return (_jsxs("div", { className: css.root, children: [compact ? compactWallHeader : header(false), (!compact || searchVisible) && _jsx("div", { className: css.tools, children: _jsxs("div", { className: css.search, children: [glyph('search', 12), _jsx("input", { autoFocus: compact && searchOpen, value: query, placeholder: t('search.placeholder'), onChange: event => actions.setQuery(event.target.value) }), query.length > 0 && (_jsx("button", { type: "button", className: css.searchClear, title: t('action.clearSearch'), "aria-label": t('action.clearSearch'), onClick: () => { actions.setQuery(''); }, children: glyph('close', 15) }))] }) }), compact && sources.length > 0 && (_jsx(ChipRow, { className: css.chips, label: t('action.filter'), chips: wallChips, value: wallChipValue, onSelect: pickChip })), wallProgress !== null && (_jsxs("div", { className: css.translateStatus, children: [_jsxs("span", { children: [_jsx("b", { children: t('translate.working') }), ` ${wallProgress.done}/${wallProgress.total}`] }), _jsx("span", { className: css.translateBar, children: _jsx("i", { style: { width: `${wallProgress.total > 0 ? Math.round((wallProgress.done / wallProgress.total) * 100) : 0}%` } }) }), _jsx("button", { type: "button", className: css.incompleteLink, onClick: () => {
                             if (wallCancelRef.current !== null)
                                 wallCancelRef.current.cancelled = true;
                             wallPendingRef.current.clear();
@@ -2991,7 +3709,7 @@ export function ReaderPane(props) {
                     _jsxs("button", { type: "button", className: css.emptyCard, onClick: () => { setAddOpen(true); setVerdict(null); }, children: [_jsx("span", { className: css.emptyTitle, children: t('state.emptyTitle') }), _jsx("span", { className: css.emptyBody, children: t('state.emptyBody') })] })), !loading && sources.length > 0 && brokenSources.length > 0 && (
                     // "Why is this list short?" answered where the reader is looking,
                     // once per affected source, with the way to the full text.
-                    _jsx("div", { className: css.notice, children: brokenSources.map(source => (_jsxs("div", { className: css.noticeRow, children: [_jsxs("span", { className: css.noticeText, children: [t('state.incomplete'), " \u00B7 ", source.label, parsed[source.id]?.incomplete === true && _jsxs(_Fragment, { children: [" \u2014 ", t('state.incompleteReason')] })] }), _jsx("button", { type: "button", className: css.noticeLink, onClick: () => props.openExternal(source.url), children: t('detail.readOriginal') })] }, source.id))) })), !loading && sources.length > 0 && displayRows.length === 0 && (_jsx("div", { className: css.state, children: query.trim().length === 0 ? t('state.emptyWall') : t('state.noMatch', { query }) })), !loading && displayRows.length > 0 && (_jsx("div", { className: css.list, children: displayRows.map(row => {
+                    _jsxs("div", { className: css.notice, children: [brokenSources.length > 1 && !noticeOpen ? (_jsxs("div", { className: css.noticeRow, children: [_jsx("span", { className: css.noticeText, children: t('state.incompleteCount', { count: String(brokenSources.length) }) }), _jsx("button", { type: "button", className: css.noticeLink, onClick: () => { setNoticeOpen(true); }, children: t('action.showList') })] })) : brokenSources.map(source => (_jsxs("div", { className: css.noticeRow, children: [_jsxs("span", { className: css.noticeText, children: [t('state.incomplete'), " \u00B7 ", source.label, parsed[source.id]?.incomplete === true && _jsxs(_Fragment, { children: [" \u2014 ", t('state.incompleteReason')] })] }), _jsx("button", { type: "button", className: css.noticeLink, onClick: () => props.openExternal(source.url), children: t('detail.readOriginal') })] }, source.id))), brokenSources.length > 1 && noticeOpen && (_jsx("button", { type: "button", className: `${css.noticeLink} ${css.noticeFold}`, onClick: () => { setNoticeOpen(false); }, children: t('action.foldList') }))] })), !loading && sources.length > 0 && displayRows.length === 0 && (_jsx("div", { className: css.state, children: query.trim().length === 0 ? t('state.emptyWall') : t('state.noMatch', { query }) })), !loading && displayRows.length > 0 && (_jsx("div", { className: css.list, children: displayRows.map(row => {
                             // The card's text box is FIXED (two clamped lines per field, see
                             // the CSS), because Chinese and English wrap differently: swapping
                             // languages must not resize the card or shift the grid.
@@ -3015,6 +3733,12 @@ export function ReaderPane(props) {
                             // The duplicates this card stands for, when the wall's dedupe
                             // folded them behind it (a badge, never a deletion).
                             const dupes = dupesBy.get(row.entry.id) ?? [];
+                            // A video / audio card with a cover: the cover takes the summary's
+                            // place beside the title, so the card stays as tall as an article's.
+                            const media = row.entry.media;
+                            // YouTube's 16:9 still (mqdefault) beats a feed's 4:3 one with bars.
+                            const thumb = media?.provider === 'youtube' ? `https://i.ytimg.com/vi/${media.ref}/mqdefault.jpg`
+                                : media?.thumbnail === undefined ? undefined : media.thumbnail.replace(/^http:\/\//, 'https://');
                             // Only a field that actually has a translation can be peeked: an
                             // untranslated (or Chinese) card keeps its ordinary hover.
                             const peekable = (field) => wallOn && !wallBoth && card?.[field] !== undefined;
@@ -3024,7 +3748,7 @@ export function ReaderPane(props) {
                                     onMouseLeave: () => { setHoverField(current => (current?.id === row.entry.id && current.field === field ? null : current)); },
                                 }
                                 : {};
-                            return (_jsxs("div", { className: css.card, "data-reader-entry": row.entry.id, "data-translated": wallOn && card !== undefined ? '1' : undefined, "data-unread": row.unread || undefined, role: "button", tabIndex: 0, onClick: () => { if (cardMenu !== null || cardTag !== null) {
+                            return (_jsxs("div", { className: css.card, "data-reader-entry": row.entry.id, "data-translated": wallOn && card !== undefined ? '1' : undefined, "data-unread": row.unread || undefined, "data-thumb": thumb === undefined ? undefined : media?.kind, role: "button", tabIndex: 0, onClick: () => { if (cardMenu !== null || cardTag !== null) {
                                     setCardMenu(null);
                                     setCardTag(null);
                                     return;
@@ -3035,8 +3759,25 @@ export function ReaderPane(props) {
                                     if (row.entry.link === undefined)
                                         return;
                                     event.preventDefault();
-                                    setCardMenu({ entryId: row.entry.id, top: event.clientY, left: event.clientX });
-                                }, children: [_jsxs("span", { className: css.tileWrap, children: [_jsx("span", { className: css.tile, style: { background: row.sourceHue }, children: row.sourceTile }), row.unread && _jsx("span", { className: css.unread })] }), _jsxs("span", { className: css.meta, children: [_jsx("span", { className: css.source, children: row.sourceLabel }), _jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { className: css.when, children: whenLabel(t, row.entry.publishedAt) })] }), _jsx("span", { className: css.title, ...hoverProps('title'), children: titleText }), originalTitle !== null && _jsx("span", { className: css.cardOrigTitle, children: originalTitle }), summary !== undefined && _jsx("span", { className: css.summary, ...hoverProps('summary'), children: summaryText }), originalSummary !== null && _jsx("span", { className: css.cardOrigSummary, children: originalSummary }), _jsxs("span", { className: css.tags, children: [(row.entry.tags ?? []).slice(0, 2).map(tag => _jsx("span", { className: css.tag, children: tag }, tag)), row.entry.author !== undefined && _jsx("span", { className: css.author, children: row.entry.author }), backfilled[row.entry.id] === true && (_jsx("span", { className: css.tagOwned, title: t('detail.filledIn'), children: t('detail.filledInBadge') })), linkOnly && (_jsx("span", { className: css.tagLinkOnly, title: linkOnlyReason, children: t('detail.linkOnlyBadge') })), dupes.length > 0 && (_jsx("span", { className: css.tagOwned, title: t('dedupe.title', { sources: dupes.map(dupe => dupe.sourceLabel).join('、') }), children: t('dedupe.badge', { count: dupes.length }) })), (entryTagIds[row.entry.id] ?? []).map(tagId => (_jsx("span", { className: css.tagOwned, children: tags.find(tag => tag.id === tagId)?.name ?? tagId }, tagId))), row.entry.link !== undefined && (() => {
+                                    setCardMenu({ entryId: row.entry.id, top: Math.max(8, Math.min(event.clientY, window.innerHeight - CARD_MENU_HEIGHT - 8)), left: Math.max(8, Math.min(event.clientX, window.innerWidth - CARD_MENU_WIDTH - 8)) });
+                                }, children: [_jsxs("span", { className: css.tileWrap, children: [_jsx("span", { className: css.tile, style: { background: row.sourceHue }, children: row.sourceTile }), row.unread && _jsx("span", { className: css.unread })] }), _jsxs("span", { className: css.meta, children: [row.unread && _jsx("span", { className: css.metaDot }), _jsx("span", { className: css.source, children: row.sourceLabel }), _jsx("span", { className: css.sep, children: "\u00B7" }), _jsx("span", { className: css.when, children: whenLabel(t, row.entry.publishedAt) })] }), _jsx("span", { className: css.title, ...hoverProps('title'), children: titleText }), originalTitle !== null && _jsx("span", { className: css.cardOrigTitle, children: originalTitle }), thumb !== undefined && media !== undefined && (_jsxs("span", { className: css.cardThumb, "data-kind": media.kind, children: [_jsx("img", { src: thumb, alt: "", loading: "lazy", referrerPolicy: "no-referrer", onError: event => { event.currentTarget.style.visibility = 'hidden'; } }), media.kind === 'video' ? _jsx("span", { className: css.cardThumbPlay }) : _jsx("span", { className: css.cardThumbGlyph, children: "\u266A" }), media.durationSec !== undefined && _jsx("span", { className: css.cardThumbTime, children: formatClock(media.durationSec) })] })), thumb !== undefined
+                                        ? _jsx("span", { className: css.cardThumbSpacer })
+                                        : summary !== undefined && _jsx("span", { className: css.summary, ...hoverProps('summary'), children: summaryText }), originalSummary !== null && _jsx("span", { className: css.cardOrigSummary, children: originalSummary }), _jsxs("span", { className: css.tags, children: [(row.entry.tags ?? []).slice(0, 2).map(tag => _jsx("span", { className: css.tag, children: tag }, tag)), row.entry.author !== undefined && _jsx("span", { className: css.author, children: row.entry.author }), backfilled[row.entry.id] === true && (_jsx("span", { className: css.tagOwned, title: t('detail.filledIn'), children: t('detail.filledInBadge') })), media !== undefined && thumb === undefined && (_jsxs("span", { className: css.tagMedia, children: [media.kind === 'video' ? '▶ ' : '♪ ', t(media.kind === 'video' ? 'media.kindVideo' : 'media.kindAudio'), media.durationSec === undefined ? '' : ` · ${formatClock(media.durationSec)}`] })), media !== undefined && (() => {
+                                                // The transcript pill: where this card's transcript stands.
+                                                const status = mediaCards?.states[row.entry.id];
+                                                const engine = mediaCards?.engine === true;
+                                                const state = status?.state ?? (media.kind === 'audio' ? 'none' : undefined);
+                                                if (state === undefined)
+                                                    return null;
+                                                const label = state === 'platform' ? t('media.cardPlatform')
+                                                    : state === 'local' ? t('media.cardLocal')
+                                                        : state === 'queued' ? (status?.ahead !== undefined && status.ahead > 0 ? t('media.cardQueuedAhead', { count: status.ahead + 1 }) : t('media.cardQueued'))
+                                                            : state === 'fetching' || state === 'transcribing' ? t('media.cardRunning', { percent: Math.round((status?.progress ?? 0) * 100) })
+                                                                : state === 'failed' ? t('media.cardFailed')
+                                                                    : engine ? t('media.cardNoneAuto') : t('media.cardNone');
+                                                const tone = state === 'platform' || state === 'local' ? 'ready' : state === 'failed' ? 'failed' : state === 'none' ? 'none' : 'fetching';
+                                                return _jsx("span", { className: `${css.mediaPill} ${css[`fetchPill_${tone}`] ?? ''}`, children: label });
+                                            })(), linkOnly && (_jsx("span", { className: css.tagLinkOnly, title: linkOnlyReason, children: t('detail.linkOnlyBadge') })), dupes.length > 0 && (_jsx("span", { className: css.tagOwned, title: t('dedupe.title', { sources: dupes.map(dupe => dupe.sourceLabel).join('、') }), children: t('dedupe.badge', { count: dupes.length }) })), (entryTagIds[row.entry.id] ?? []).map(tagId => (_jsx("span", { className: css.tagOwned, children: tags.find(tag => tag.id === tagId)?.name ?? tagId }, tagId))), row.entry.link !== undefined && row.entry.media === undefined && (() => {
                                                 const fetchState = fetchStateOf(fetchStates, row.entry.id);
                                                 const state = fetchState.state;
                                                 const labelKey = state === 'none' ? 'fetch.none'