@miadi/chronicle-tui 0.3.0 → 0.4.1

package/dist/App.js

@@ -1,18 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * The terminal browser's screen. It draws the panes and routes keys; every
- * read goes through `data.ts`, every operation through the action registry.
+ * read goes through `data.ts` and `attention.ts`, every operation through the
+ * action registry, every printed string through `text.ts`.
  *
- * Keys are plain letters, arrows, Tab, Enter and Esc. No Ctrl chord is taken,
- * so tmux (C-b) and herdr (prefix+…) keep all of theirs.
+ * State lives in one ref and is read from there, so keys that arrive together
+ * (fast typing, a paste, ssh) each act on the state the previous one left, not
+ * on the last render (jgwill/Miadi#706 UI review, F5 and F13).
+ *
+ * Keys are plain letters, arrows, Tab, Enter and Esc. No Ctrl or Meta chord is
+ * taken, so tmux (C-b) and herdr (prefix+…) keep all of theirs.
  */
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Text, useApp, useInput, useStdout } from "ink";
-import { osc8 } from "@miadi/inquiry-weave";
-import { DEFAULT_ACTIONS, actionFor, attentionOverlay } from "./actions.js";
+import { useEffect, useMemo, useReducer, useRef } from "react";
+import { Box, Text, useApp, useInput, useWindowSize } from "ink";
+import { MAX_FILES } from "@miadi/episode-vessel";
+import { DEFAULT_ACTIONS, actionFor, } from "./actions.js";
 import { TOKEN_ENV, answerAttention, connectApi } from "./api.js";
-import { loadChronicle, loadDetail, loadText, openUrl, qrLines, search } from "./data.js";
-import { ageOf, clamp, fileView, formatDate, filterRows, screenLineOf, windowOf, } from "./model.js";
+import { BOARD_LABELS, ROOM_LABELS, answeredMessage, checkAnswer, filterBoard, loadBoard, loadEpisodePanel, panelView, readOnlyLabel, } from "./attention.js";
+import { VISITOR, loadChronicle, loadDetail, loadText, openUrl, qrLines, search, visibleRows, } from "./data.js";
+import { ageOf, clamp, fileView, filterRows, formatDate, screenLineOf, windowOf, wrapSegments, } from "./model.js";
+import { clean, cleanLine, link } from "./text.js";
 const DIRECTION_MARK = { east: "E", south: "S", west: "W", north: "N" };
 const DIRECTION_COLOR = { east: "yellow", south: "red", west: "blue", north: "white" };
 function Segments({ segments, selectedRef }) {
@@ -30,341 +37,542 @@ function Segments({ segments, selectedRef }) {
             return _jsx(Text, { children: segment.text }, index);
         }) }));
 }
-function matchRow(rows, ref) {
-    const text = ref.trim().toLowerCase().replace(/^ep/, "");
-    const exact = rows.findIndex((row) => row.name.toLowerCase() === ref.trim().toLowerCase());
+/** Rows an episode argument names: the folder name, a number (all folders with it), or a slug fragment. */
+function matchRows(rows, ref) {
+    const wanted = ref.trim().toLowerCase();
+    const exact = rows.findIndex((row) => row.name.toLowerCase() === wanted);
     if (exact !== -1)
-        return exact;
-    const number = Number(text);
+        return [exact];
+    const number = Number(wanted.replace(/^ep/, ""));
     if (Number.isInteger(number)) {
-        const byNumber = rows.findIndex((row) => row.number === number);
-        if (byNumber !== -1)
+        const byNumber = rows.flatMap((row, index) => (row.number === number ? [index] : []));
+        if (byNumber.length)
             return byNumber;
     }
-    return rows.findIndex((row) => row.name.toLowerCase().includes(text));
+    const bySlug = rows.findIndex((row) => row.name.toLowerCase().includes(wanted));
+    return bySlug === -1 ? [] : [bySlug];
+}
+/** A path cut in the middle, keeping its file name. */
+function middle(text, width) {
+    if (text.length <= width)
+        return text;
+    const keep = Math.max(4, width - 1);
+    const tail = Math.ceil(keep * 0.6);
+    return `${text.slice(0, keep - tail)}…${text.slice(text.length - tail)}`;
 }
-export function App({ root, query: initialQuery = "", search: initialSearch, episode, actions: extra = [], url }) {
+const PLAIN_KEY = {
+    upArrow: false,
+    downArrow: false,
+    leftArrow: false,
+    rightArrow: false,
+    pageDown: false,
+    pageUp: false,
+    home: false,
+    end: false,
+    return: false,
+    escape: false,
+    ctrl: false,
+    shift: false,
+    tab: false,
+    backspace: false,
+    delete: false,
+    meta: false,
+    super: false,
+    hyper: false,
+    capsLock: false,
+    numLock: false,
+};
+export function App(props) {
+    const { root, actions: extra = [], url, withheld = [] } = props;
     const { exit } = useApp();
-    const { stdout } = useStdout();
-    const columns = stdout?.columns ?? 100;
-    const rows = stdout?.rows ?? 30;
-    const [chronicle, setChronicle] = useState(null);
-    const [loadError, setLoadError] = useState(null);
-    const [query, setQuery] = useState(initialSearch ?? initialQuery);
-    const [inputMode, setInputMode] = useState(false);
-    const [searchMode, setSearchMode] = useState(initialSearch ? "full" : "title");
-    const [view, setView] = useState(initialSearch ? "hits" : "list");
-    const [listSel, setListSel] = useState(0);
-    const [fileSel, setFileSel] = useState(0);
-    const [hits, setHits] = useState(null);
-    const [hitSel, setHitSel] = useState(0);
-    const [searching, setSearching] = useState(false);
-    const [open, setOpen] = useState(null);
-    const [overlay, setOverlay] = useState(null);
-    const [status, setStatus] = useState("");
-    const [api, setApi] = useState(null);
-    const [reader, setReader] = useState(null);
+    const { columns, rows } = useWindowSize();
+    const [, render] = useReducer((n) => n + 1, 0);
+    const ui = useRef({
+        chronicle: null,
+        loadError: null,
+        query: props.search ?? props.query ?? "",
+        inputMode: false,
+        searchMode: props.search ? "full" : "title",
+        view: props.attention ? "attention" : props.search ? "hits" : "list",
+        listSel: 0,
+        fileSel: 0,
+        hits: null,
+        hitSel: 0,
+        searching: false,
+        open: null,
+        overlays: [],
+        status: "",
+        api: null,
+        reader: null,
+        access: VISITOR,
+        mayAnswer: false,
+        board: null,
+        boardSel: 0,
+        history: [],
+        pendingEpisode: props.episode,
+    });
     const details = useRef(new Map());
+    const overlaySeq = useRef(0);
     const searchTurn = useRef(0);
+    const searchTimer = useRef(null);
+    const searchAbort = useRef(null);
     const actions = useMemo(() => [...DEFAULT_ACTIONS, ...extra], [extra]);
-    useEffect(() => {
-        loadChronicle(root).then((loaded) => {
-            setChronicle(loaded);
-            if (episode) {
-                const index = matchRow(loaded.rows, episode);
-                if (index === -1)
-                    setStatus(`No episode matches ${episode}.`);
-                else {
-                    setListSel(index);
-                    setView("files");
-                }
+    /** Change state; a new view or episode clears a stale status line (UI review, F22). */
+    const set = (patch) => {
+        const before = ui.current;
+        const next = { ...before, ...patch };
+        if (patch.status === undefined && (next.view !== before.view || next.listSel !== before.listSel || next.open !== before.open))
+            next.status = "";
+        ui.current = next;
+        render();
+    };
+    // ── derived state, always from the ref ───────────────────────────────────
+    const derive = () => {
+        const s = ui.current;
+        const visible = s.chronicle ? visibleRows(s.chronicle.rows, s.access) : [];
+        const visibleNames = new Set(visible.map((row) => row.name));
+        const filtered = s.searchMode === "title" ? filterRows(visible, s.query) : visible;
+        const board = filterBoard((s.board ?? []).filter((item) => visibleNames.has(item.episode)), s.view === "attention" ? s.query : "");
+        const boardItem = board[clamp(s.boardSel, board.length)];
+        const rowByName = (name) => visible.find((row) => row.name === name);
+        const hit = s.view === "hits" || s.open?.from === "hits" ? s.hits?.hits[s.hitSel] : undefined;
+        const currentRow = s.view === "file" && s.open
+            ? rowByName(s.open.name)
+            : s.view === "hits"
+                ? hit && rowByName(hit.episodePath)
+                : s.view === "attention"
+                    ? boardItem && rowByName(boardItem.episode)
+                    : filtered[clamp(s.listSel, filtered.length)];
+        let detail = null;
+        if (s.chronicle && currentRow && s.view !== "attention") {
+            const key = `${s.access.mayWrite}:${currentRow.name}`;
+            detail = details.current.get(key) ?? null;
+            if (!detail) {
+                detail = loadDetail(s.chronicle.root, currentRow.name, s.access);
+                details.current.set(key, detail);
+            }
+        }
+        const files = detail?.files ?? [];
+        const openCount = (s.board ?? []).filter((item) => visibleNames.has(item.episode)).length;
+        return { s, visible, filtered, board, boardItem, rowByName, hit, currentRow, detail, files, openCount };
+    };
+    const compact = columns < 90;
+    const bodyHeight = Math.max(3, rows - 4);
+    // ── loading: the chronicle, the board, the app ───────────────────────────
+    const resolvePending = () => {
+        const { s, filtered } = derive();
+        if (!s.pendingEpisode || !s.chronicle)
+            return;
+        const matches = matchRows(filtered, s.pendingEpisode);
+        if (matches.length === 0) {
+            // Not under the filter: look without it (UI review, F12).
+            const all = visibleRows(s.chronicle.rows, s.access);
+            const unfiltered = matchRows(all, s.pendingEpisode);
+            if (unfiltered.length === 0) {
+                if (s.api === null || s.access.signedIn)
+                    set({ status: `No episode you can see matches ${cleanLine(s.pendingEpisode)}.`, pendingEpisode: undefined });
+                return;
             }
-        }, (error) => setLoadError(error.message));
-    }, [root, episode]);
-    // The app is found once. Reading the chronicle never waits for it.
+            set({ query: "", searchMode: "title" });
+            return resolvePending();
+        }
+        const names = matches.map((index) => filtered[index].number ?? filtered[index].name);
+        set({
+            listSel: matches[0],
+            fileSel: 0,
+            view: "files",
+            pendingEpisode: undefined,
+            status: matches.length > 1 ? `${cleanLine(s.pendingEpisode)} names ${matches.length} folders; showing the first of ${names.join(", ")}.` : "",
+        });
+    };
     useEffect(() => {
+        loadChronicle(root).then((chronicle) => {
+            set({ chronicle });
+            resolvePending();
+            loadBoard(chronicle.root).then((board) => set({ board }), () => set({ board: [] }));
+        }, (error) => set({ loadError: error.message }));
         let live = true;
         connectApi(url)
-            .then(async (found) => {
+            .then(async ({ api, warning }) => {
             if (!live)
                 return;
-            setApi(found);
-            if (!found?.signed)
+            set({ api, status: warning ? cleanLine(warning) : ui.current.status });
+            if (!api?.signed)
                 return;
             try {
-                const me = await found.me();
-                if (live)
-                    setReader(me);
+                const reader = await api.me();
+                const mayAnswer = await api.mayAnswer();
+                if (!live)
+                    return;
+                details.current.clear();
+                set({ reader, mayAnswer, access: { signedIn: Boolean(reader), mayWrite: mayAnswer } });
+                resolvePending();
             }
             catch (error) {
                 if (live)
-                    setStatus(`${TOKEN_ENV} was refused by ${found.base}: ${error.message}`);
+                    set({ status: cleanLine(`The token was refused by ${api.base}: ${error.message}`) });
             }
         })
             .catch(() => { });
         return () => {
             live = false;
         };
-    }, [url]);
-    const filtered = useMemo(() => (chronicle ? (searchMode === "title" ? filterRows(chronicle.rows, query) : chronicle.rows) : []), [chronicle, query, searchMode]);
-    // Full-text search runs a moment after typing stops, and only the latest answer is kept.
-    useEffect(() => {
-        if (!chronicle || searchMode !== "full")
-            return;
-        const text = query.trim();
-        if (text.length < 2)
-            return;
+    }, [root, url]);
+    // ── full-text search: debounced, cancelled when superseded ───────────────
+    const scheduleSearch = () => {
         const turn = ++searchTurn.current;
-        const timer = setTimeout(() => {
-            setSearching(true);
-            search(chronicle.root, text, chronicle.rows).then((result) => {
-                if (turn !== searchTurn.current)
+        if (searchTimer.current)
+            clearTimeout(searchTimer.current);
+        searchAbort.current?.abort();
+        const s = ui.current;
+        if (!s.chronicle || s.searchMode !== "full" || s.query.trim().length < 2) {
+            if (s.searching)
+                set({ searching: false });
+            return;
+        }
+        searchTimer.current = setTimeout(() => {
+            const controller = new AbortController();
+            searchAbort.current = controller;
+            set({ searching: true });
+            const now = ui.current;
+            search(now.chronicle.root, now.query.trim(), now.chronicle.rows, now.access, controller.signal).then((result) => {
+                if (turn !== searchTurn.current || ui.current.searchMode !== "full")
                     return;
-                setHits(result);
-                setHitSel(0);
-                setSearching(false);
-                setView((current) => (current === "file" ? current : "hits"));
+                const view = ui.current.view === "file" || ui.current.view === "attention" ? ui.current.view : "hits";
+                set({ hits: result, hitSel: 0, searching: false, view });
             }, (error) => {
-                if (turn !== searchTurn.current)
+                if (turn !== searchTurn.current || error.name === "AbortError")
                     return;
-                setSearching(false);
-                setStatus(error.message);
+                set({ searching: false, status: cleanLine(error.message) });
             });
         }, 250);
-        return () => clearTimeout(timer);
-    }, [chronicle, query, searchMode]);
-    const rowByName = (name) => chronicle?.rows.find((row) => row.name === name);
-    const hit = view === "hits" || open?.from === "hits" ? hits?.hits[hitSel] : undefined;
-    const currentRow = view === "file" && open
-        ? rowByName(open.name)
-        : view === "hits"
-            ? hit && rowByName(hit.episodePath)
-            : filtered[clamp(listSel, filtered.length)];
-    const detailOf = (name) => {
-        const cached = details.current.get(name);
-        if (cached)
-            return cached;
-        const loaded = loadDetail(chronicle.root, name);
-        details.current.set(name, loaded);
-        return loaded;
     };
-    const detail = chronicle && currentRow ? detailOf(currentRow.name) : null;
-    const files = detail?.files ?? [];
-    const openFile = (name, path, from, line) => {
-        const text = loadText(chronicle.root, name, path);
+    useEffect(() => {
+        if (props.search)
+            scheduleSearch();
+    }, [ui.current.chronicle]);
+    // ── overlays: a stack, with ids so a late result never lands on the wrong one
+    const topId = () => ui.current.overlays[ui.current.overlays.length - 1]?.id ?? 0;
+    const openOverlay = (overlay) => {
+        const id = ++overlaySeq.current;
+        set({ overlays: [...ui.current.overlays, { id, overlay }] });
+        return id;
+    };
+    const replaceOverlay = (id, overlay) => {
+        const stack = ui.current.overlays;
+        if (stack[stack.length - 1]?.id !== id)
+            return false;
+        set({ overlays: [...stack.slice(0, -1), { id, overlay }] });
+        return true;
+    };
+    const updateTop = (overlay) => {
+        const stack = ui.current.overlays;
+        const top = stack[stack.length - 1];
+        if (top)
+            set({ overlays: [...stack.slice(0, -1), { id: top.id, overlay }] });
+    };
+    const closeTop = () => set({ overlays: ui.current.overlays.slice(0, -1) });
+    const refreshBoard = async () => {
+        const chronicle = ui.current.chronicle;
+        if (!chronicle)
+            return;
+        set({ board: await loadBoard(chronicle.root) });
+    };
+    const place = () => {
+        const s = ui.current;
+        return { view: s.view, open: s.open, listSel: s.listSel, fileSel: s.fileSel, query: s.query, searchMode: s.searchMode };
+    };
+    const jumpTo = (name) => {
+        const s = ui.current;
+        const history = [...s.history, place()];
+        let { filtered } = derive();
+        let index = filtered.findIndex((row) => row.name === name);
+        if (index === -1) {
+            ui.current = { ...ui.current, query: "", searchMode: "title" };
+            filtered = derive().filtered;
+            index = filtered.findIndex((row) => row.name === name);
+        }
+        details.current.delete(`${s.access.mayWrite}:${name}`);
+        set({ history, listSel: Math.max(0, index), fileSel: 0, open: null, view: "files", overlays: [] });
+    };
+    const contextFor = () => {
+        const d = derive();
+        const s = d.s;
+        if (!s.chronicle)
+            return null;
+        return {
+            view: s.view,
+            chronicle: s.chronicle,
+            rows: d.visible,
+            access: s.access,
+            episode: d.currentRow,
+            file: s.view === "file" ? s.open?.path : s.view === "files" ? d.files[clamp(s.fileSel, d.files.length)]?.relativePath : d.hit?.file,
+            reference: s.view === "file" && s.open && s.open.refSel >= 0 ? s.open.view.refs[s.open.refSel] : undefined,
+            hit: d.hit,
+            open: openOverlay,
+            replace: replaceOverlay,
+            topId,
+            status: (message) => set({ status: cleanLine(message) }),
+            jumpTo,
+            api: s.api,
+            reader: s.reader,
+            mayAnswer: s.mayAnswer,
+        };
+    };
+    const openFile = (name, file, from, line) => {
+        const s = ui.current;
+        const text = loadText(s.chronicle.root, name, file, s.access);
         if ("error" in text)
-            return setStatus(text.error);
+            return set({ status: cleanLine(text.error) });
         const shaped = fileView(text.content, columns - 2);
-        setOpen({ name, path, view: shaped, scroll: line ? Math.max(0, screenLineOf(shaped, line) - 2) : 0, refSel: -1, from });
-        setView("file");
-        setStatus(shaped.refs.length ? `${shaped.refs.length} reference(s): Tab moves between them, Enter follows.` : "");
+        set({
+            open: { name, path: file, view: shaped, scroll: line ? Math.max(0, screenLineOf(shaped, line) - 2) : 0, refSel: -1, from, empty: text.content.length === 0 },
+            view: "file",
+            status: shaped.refs.length ? `${shaped.refs.length} reference(s): Tab moves between them, Enter follows.` : "",
+        });
     };
-    const context = chronicle
-        ? {
-            view,
-            chronicle,
-            episode: currentRow,
-            file: view === "file" ? open?.path : view === "files" ? files[clamp(fileSel, files.length)]?.relativePath : hit?.file,
-            reference: view === "file" && open && open.refSel >= 0 ? open.view.refs[open.refSel] : undefined,
-            hit,
-            show: setOverlay,
-            status: setStatus,
-            jumpTo: (name) => {
-                let index = filtered.findIndex((row) => row.name === name);
-                if (index === -1) {
-                    setQuery("");
-                    setSearchMode("title");
-                    index = chronicle.rows.findIndex((row) => row.name === name);
-                }
-                setListSel(Math.max(0, index));
-                setFileSel(0);
-                setOpen(null);
-                setView("files");
-            },
-            api,
-            reader,
-        }
-        : null;
-    const bodyHeight = Math.max(5, rows - 4);
     const move = (delta, key) => {
-        const step = key.pageDown || key.pageUp ? bodyHeight - 1 : 1;
+        const d = derive();
+        const s = d.s;
+        const step = key.pageDown || key.pageUp ? Math.max(1, bodyHeight - 1) : 1;
         const by = delta * step;
-        if (view === "list")
-            setListSel((i) => clamp(i + by, filtered.length));
-        else if (view === "files")
-            setFileSel((i) => clamp(i + by, files.length));
-        else if (view === "hits")
-            setHitSel((i) => clamp(i + by, hits?.hits.length ?? 0));
-        else if (view === "file")
-            setOpen((file) => file ? { ...file, scroll: clamp(file.scroll + by, Math.max(1, file.view.lines.length - bodyHeight + 1)) } : file);
+        if (s.view === "list")
+            set({ listSel: clamp(s.listSel + by, d.filtered.length) });
+        else if (s.view === "files")
+            set({ fileSel: clamp(s.fileSel + by, d.files.length) });
+        else if (s.view === "hits")
+            set({ hitSel: clamp(s.hitSel + by, s.hits?.hits.length ?? 0) });
+        else if (s.view === "attention")
+            set({ boardSel: clamp(s.boardSel + by, d.board.length) });
+        else if (s.view === "file" && s.open)
+            set({ open: { ...s.open, scroll: clamp(s.open.scroll + by, Math.max(1, s.open.view.lines.length - bodyHeight + 1)) } });
     };
     const back = () => {
-        if (view === "file" && open) {
-            setView(open.from);
-            setOpen(null);
+        const s = ui.current;
+        const last = s.history[s.history.length - 1];
+        if (last && s.view === "files") {
+            set({ ...last, history: s.history.slice(0, -1) });
+            return;
         }
-        else if (view === "files" || view === "hits")
-            setView("list");
+        if (s.view === "file" && s.open)
+            set({ view: s.open.from, open: null });
+        else if (s.view === "files" || s.view === "hits" || s.view === "attention")
+            set({ view: "list" });
+    };
+    const showItem = (item) => {
+        // The board lists open items without context; the item shows what it cites.
+        const chronicle = ui.current.chronicle;
+        const id = openOverlay({ type: "item", item });
+        loadEpisodePanel(chronicle.root, item.episode).then((panel) => {
+            const full = panel.items.find((candidate) => candidate.id === item.id);
+            if (full)
+                replaceOverlay(id, { type: "item", item: full });
+        }, () => { });
     };
     const forward = () => {
-        if (view === "list" && currentRow) {
-            setFileSel(0);
-            setView("files");
+        const d = derive();
+        const s = d.s;
+        if (s.view === "list" && d.currentRow) {
+            details.current.delete(`${s.access.mayWrite}:${d.currentRow.name}`);
+            set({ fileSel: 0, view: "files" });
         }
-        else if (view === "files" && currentRow && files[fileSel]) {
-            const file = files[fileSel];
+        else if (s.view === "files" && d.currentRow) {
+            const file = d.files[clamp(s.fileSel, d.files.length)];
+            if (!file)
+                return;
             if (file.kind !== "text")
-                return setStatus(`${file.relativePath} is ${file.kind}: press o for its doors.`);
-            openFile(currentRow.name, file.relativePath, "files");
+                return set({ status: `${cleanLine(file.relativePath)} is ${file.kind}: press o for its doors.` });
+            openFile(d.currentRow.name, file.relativePath, "files");
         }
-        else if (view === "hits" && hit)
-            openFile(hit.episodePath, hit.file, "hits", hit.line);
+        else if (s.view === "hits" && d.hit)
+            openFile(d.hit.episodePath, d.hit.file, "hits", d.hit.line);
+        else if (s.view === "attention" && d.boardItem)
+            showItem(d.boardItem);
     };
+    const answerInput = (item) => ({
+        type: "input",
+        title: `Answer · ${cleanLine(item.id)}`,
+        hint: cleanLine(item.question),
+        value: "",
+        submit: async (value) => {
+            const checked = checkAnswer(value);
+            if (!checked.ok)
+                throw new Error(checked.message);
+            const result = await answerAttention(ui.current.api, item.episode, item.id, checked.answer);
+            return answeredMessage(result.result).message;
+        },
+        after: async () => {
+            await refreshBoard();
+            // The item and the panel under it show the recorded answer.
+            const chronicle = ui.current.chronicle;
+            const panel = await loadEpisodePanel(chronicle.root, item.episode);
+            const stack = ui.current.overlays.map((entry) => {
+                const o = entry.overlay;
+                if (o.type === "item" && o.item.episode === item.episode && o.item.id === item.id) {
+                    const fresh = panel.items.find((candidate) => candidate.id === item.id);
+                    return fresh ? { id: entry.id, overlay: { type: "item", item: fresh } } : entry;
+                }
+                if (o.type === "panel" && o.episode === item.episode)
+                    return { id: entry.id, overlay: { ...o, items: panel.items } };
+                return entry;
+            });
+            set({ overlays: stack });
+        },
+    });
+    // ── keys ─────────────────────────────────────────────────────────────────
     useInput((input, key) => {
-        // A held or fast-typed key arrives as one chunk ("jjj"): outside the
-        // filter, each character is its own key press.
-        if (!inputMode && !key.ctrl && !key.meta && input.length > 1 && /^([jkgG])\1+$/.test(input)) {
-            for (const char of input)
-                handleKey(char, key);
+        if (key.ctrl || key.meta)
+            return;
+        // Several keys in one read: each character is its own press (UI review, F13).
+        const special = key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.pageUp || key.pageDown || key.return || key.escape || key.tab || key.backspace || key.delete || key.home || key.end;
+        if (!special && input.length > 1) {
+            for (const char of input) {
+                if (char === "\t")
+                    handleKey("", { ...PLAIN_KEY, tab: true });
+                else if (char === "\r" || char === "\n")
+                    handleKey("", { ...PLAIN_KEY, return: true });
+                else if (char === "\u007f" || char === "\b")
+                    handleKey("", { ...PLAIN_KEY, backspace: true });
+                else
+                    handleKey(char, PLAIN_KEY);
+            }
             return;
         }
         handleKey(input, key);
     });
     function handleKey(input, key) {
-        if (!chronicle || !context) {
+        const s = ui.current;
+        if (!s.chronicle) {
             if (input === "q" || key.escape)
                 exit();
             return;
         }
-        if (overlay?.type === "input") {
-            if (overlay.busy)
+        const top = s.overlays[s.overlays.length - 1]?.overlay;
+        if (top?.type === "input") {
+            if (top.busy)
                 return;
             if (key.escape)
-                return setOverlay(overlay.back ?? null);
+                return closeTop();
             if (key.return) {
-                const value = overlay.value;
+                const value = top.value;
                 if (!value.trim())
-                    return setOverlay({ ...overlay, error: "Nothing to send yet." });
-                setOverlay({ ...overlay, busy: true, error: undefined });
-                overlay.submit(value).then(async (message) => {
-                    setStatus(message);
-                    setOverlay(null);
-                    await overlay.after?.();
-                }, (error) => setOverlay({ ...overlay, busy: false, error: error.message }));
+                    return updateTop({ ...top, error: "Nothing to send yet." });
+                updateTop({ ...top, busy: true, error: undefined });
+                top.submit(value).then(async (message) => {
+                    set({ status: cleanLine(message), overlays: ui.current.overlays.slice(0, -1) });
+                    try {
+                        await top.after?.();
+                    }
+                    catch (error) {
+                        set({ status: cleanLine(`Sent, but the refresh failed: ${error.message}`) });
+                    }
+                }, (error) => updateTop({ ...top, busy: false, error: cleanLine(error.message) }));
                 return;
             }
             if (key.backspace || key.delete)
-                return setOverlay({ ...overlay, value: overlay.value.slice(0, -1), error: undefined });
-            const text = input.replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, "").replace(/\r?\n/g, " ");
-            if (text && !key.ctrl && !key.meta)
-                setOverlay({ ...overlay, value: overlay.value + text, error: undefined });
+                return updateTop({ ...top, value: top.value.slice(0, -1), error: undefined });
+            const text = input.replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, "");
+            if (text)
+                updateTop({ ...top, value: top.value + text, error: undefined });
             return;
         }
-        if (overlay) {
-            if (key.escape || input === "q" || input === "h" || key.backspace)
-                return setOverlay(null);
-            if (overlay.type === "attention") {
-                const count = overlay.items.length;
+        if (top) {
+            if (top.type === "help")
+                return closeTop();
+            if (key.escape || input === "q" || input === "h" || key.backspace || key.leftArrow)
+                return closeTop();
+            if (top.type === "doors") {
+                const count = top.doors.doors.length;
                 if (key.downArrow || input === "j")
-                    return setOverlay({ ...overlay, selected: clamp(overlay.selected + 1, count) });
+                    return updateTop({ ...top, selected: clamp(top.selected + 1, count) });
                 if (key.upArrow || input === "k")
-                    return setOverlay({ ...overlay, selected: clamp(overlay.selected - 1, count) });
-                const item = overlay.items[overlay.selected];
-                if (item && key.return) {
-                    if (item.state !== "open")
-                        return setStatus(`Already answered${item.answered_at ? ` on ${item.answered_at.slice(0, 10)}` : ""}.`);
-                    if (!overlay.canAnswer || !api)
-                        return setStatus(`Answering needs the Miadi app and ${TOKEN_ENV} (or --env <file>).`);
-                    const back = overlay;
-                    return setOverlay({
-                        type: "input",
-                        title: `Answer · ${item.id}`,
-                        back,
-                        hint: item.question,
-                        value: "",
-                        submit: async (value) => {
-                            await answerAttention(api, back.episode, item.id, value.trim());
-                            return `Answered ${item.id} in ${rowByName(back.episode)?.number ?? back.episode}.`;
-                        },
-                        after: async () => {
-                            const fresh = await attentionOverlay(context, back.episode);
-                            setOverlay(fresh.type === "attention" ? { ...fresh, selected: back.selected } : fresh);
-                        },
-                    });
+                    return updateTop({ ...top, selected: clamp(top.selected - 1, count) });
+                const door = top.doors.doors[top.selected];
+                if (door && key.return) {
+                    const result = openUrl(door.url, s.chronicle.root, withheld);
+                    return set({ status: "opened" in result ? `Opened ${cleanLine(door.label)} with ${result.opened}.` : `Not opened: ${result.refused}. The address: ${cleanLine(door.url)}` });
                 }
+                if (door && input === "r")
+                    return void openOverlay({ type: "qr", title: top.doors.title, door, invert: false });
                 return;
             }
-            if (overlay.type === "card" && input === "o")
-                return setOverlay({ type: "doors", doors: overlay.doors, selected: 0 });
-            if (overlay.type === "doors") {
-                const count = overlay.doors.doors.length;
+            if (top.type === "qr" && input === "i")
+                return updateTop({ ...top, invert: !top.invert });
+            if (top.type === "card" && input === "o")
+                return void openOverlay({ type: "doors", doors: top.doors, selected: 0 });
+            if (top.type === "panel") {
+                const { shown, view } = panelView(top.items, top.view, ROOM_LABELS, top.parseError);
+                if (key.tab)
+                    return updateTop({ ...top, view: view === "history" ? "open" : "history", selected: 0 });
                 if (key.downArrow || input === "j")
-                    return setOverlay({ ...overlay, selected: clamp(overlay.selected + 1, count) });
+                    return updateTop({ ...top, selected: clamp(top.selected + 1, shown.length) });
                 if (key.upArrow || input === "k")
-                    return setOverlay({ ...overlay, selected: clamp(overlay.selected - 1, count) });
-                const door = overlay.doors.doors[overlay.selected];
-                if (door && key.return) {
-                    const used = openUrl(door.url);
-                    return setStatus(used ? `Opened ${door.label} with ${used}.` : `No opener here. The address is ${door.url}`);
+                    return updateTop({ ...top, selected: clamp(top.selected - 1, shown.length) });
+                const item = shown[clamp(top.selected, shown.length)];
+                if (item && (key.return || input === "l"))
+                    return void openOverlay({ type: "item", item });
+                return;
+            }
+            if (top.type === "item") {
+                if (key.return && top.item.state === "open") {
+                    if (!s.mayAnswer || !s.api)
+                        return set({ status: readOnlyLabel(TOKEN_ENV) });
+                    return void openOverlay(answerInput(top.item));
+                }
+                if (input === "e") {
+                    set({ overlays: [] });
+                    return jumpTo(top.item.episode);
                 }
-                if (door && input === "r")
-                    return setOverlay({ type: "qr", title: overlay.doors.title, door, invert: false });
             }
-            if (overlay.type === "qr" && input === "i")
-                return setOverlay({ ...overlay, invert: !overlay.invert });
-            if (overlay.type === "help")
-                return setOverlay(null);
             return;
         }
-        if (inputMode) {
+        if (s.inputMode) {
             if (key.escape || key.return)
-                return setInputMode(false);
-            // A Tab typed fast or pasted can arrive inside the text chunk.
-            if (key.tab || input.includes("\t"))
-                setSearchMode((mode) => (mode === "title" ? "full" : "title"));
-            input = input.replace(/[\u0000-\u001f\u007f]/g, "");
-            if (key.tab && !input)
-                return;
+                return set({ inputMode: false });
+            if (key.tab) {
+                // The view follows the mode (UI review, F7).
+                const searchMode = s.searchMode === "title" ? "full" : "title";
+                const view = s.view === "attention" ? "attention" : searchMode === "title" ? "list" : s.hits ? "hits" : "list";
+                set({ searchMode, view });
+                return scheduleSearch();
+            }
             if (key.upArrow || key.downArrow)
                 return move(key.downArrow ? 1 : -1, key);
             if (key.backspace || key.delete) {
-                setListSel(0);
-                return setQuery((text) => text.slice(0, -1));
+                set({ query: s.query.slice(0, -1), listSel: 0, boardSel: 0 });
+                return scheduleSearch();
             }
-            if (input && !key.ctrl && !key.meta) {
-                setListSel(0);
-                setQuery((text) => text + input);
+            const text = input.replace(/[\u0000-\u001f\u007f]/g, "");
+            if (text) {
+                set({ query: s.query + text, listSel: 0, boardSel: 0 });
+                scheduleSearch();
             }
             return;
         }
-        if (input === "/" && view !== "file") {
-            if (view === "files")
-                setView("list");
-            return setInputMode(true);
+        if (input === "/" && s.view !== "file") {
+            return set({ inputMode: true, view: s.view === "files" ? "list" : s.view });
         }
-        if (key.tab && view === "file" && open) {
-            const count = open.view.refs.length;
+        if (input === "!")
+            return set({ view: s.view === "attention" ? "list" : "attention", boardSel: 0 });
+        if (key.tab && s.view === "file" && s.open) {
+            const count = s.open.view.refs.length;
             if (count === 0)
                 return;
-            const refSel = key.shift ? (open.refSel <= 0 ? count - 1 : open.refSel - 1) : (open.refSel + 1) % count;
-            const ref = open.view.refs[refSel];
-            const line = open.view.lines.findIndex((screen) => screen.segments.some((s) => s.ref === refSel));
-            const scroll = line < open.scroll || line >= open.scroll + bodyHeight ? Math.max(0, line - 2) : open.scroll;
-            setStatus(`${ref.kind} · ${ref.uri}`);
-            return setOpen({ ...open, refSel, scroll });
+            const refSel = key.shift ? (s.open.refSel <= 0 ? count - 1 : s.open.refSel - 1) : (s.open.refSel + 1) % count;
+            const ref = s.open.view.refs[refSel];
+            const line = s.open.view.lines.findIndex((screen) => screen.segments.some((segment) => segment.ref === refSel));
+            const scroll = line < s.open.scroll || line >= s.open.scroll + bodyHeight ? Math.max(0, line - 2) : s.open.scroll;
+            return set({ open: { ...s.open, refSel, scroll }, status: cleanLine(`${ref.kind} · ${ref.uri}`) });
         }
-        if (key.tab && (view === "list" || view === "hits")) {
-            const next = searchMode === "title" ? "full" : "title";
-            setSearchMode(next);
-            if (next === "title")
-                setView("list");
-            else if (hits && query.trim().length >= 2)
-                setView("hits");
-            return;
+        if (key.tab && (s.view === "list" || s.view === "hits")) {
+            const searchMode = s.searchMode === "title" ? "full" : "title";
+            set({ searchMode, view: searchMode === "title" ? "list" : s.hits ? "hits" : "list" });
+            return scheduleSearch();
         }
-        const action = actionFor(actions, input, key, context);
-        if (action) {
-            Promise.resolve(action.run(context)).catch((error) => setStatus(error.message));
+        const context = contextFor();
+        const action = context ? actionFor(actions, input, key, context) : undefined;
+        if (action && context) {
+            Promise.resolve(action.run(context)).catch((error) => set({ status: cleanLine(error.message) }));
             return;
         }
         if (key.downArrow || input === "j" || key.pageDown)
@@ -372,103 +580,169 @@ export function App({ root, query: initialQuery = "", search: initialSearch, epi
         if (key.upArrow || input === "k" || key.pageUp)
             return move(-1, key);
         if (key.home || input === "g")
-            return move(-100000, { ...key, pageUp: false });
+            return move(-1_000_000, PLAIN_KEY);
         if (key.end || input === "G")
-            return move(100000, { ...key, pageDown: false });
+            return move(1_000_000, PLAIN_KEY);
         if (key.return || key.rightArrow || input === "l")
             return forward();
         if (key.escape || key.leftArrow || input === "h" || key.backspace)
             return back();
         if (input === "?")
-            return setOverlay({ type: "help" });
+            return void openOverlay({ type: "help" });
         if (input === "q")
             exit();
     }
-    if (loadError)
-        return _jsxs(Text, { color: "red", children: ["miadi-chronicle: ", loadError] });
-    if (!chronicle)
-        return _jsxs(Text, { children: ["Reading the chronicle at ", root, "\u2026"] });
-    const withManifest = chronicle.rows.filter((row) => row.structured).length;
-    // Under 90 columns (a phone, a split pane) one pane shows at a time and the
-    // list gives its whole width to titles. Wider, the list and the episode sit
-    // side by side.
-    const compact = columns < 90;
+    // ── render ───────────────────────────────────────────────────────────────
+    const d = derive();
+    const s = d.s;
+    if (s.loadError)
+        return _jsxs(Text, { color: "red", children: ["miadi-chronicle: ", cleanLine(s.loadError)] });
+    if (!s.chronicle)
+        return _jsxs(Text, { children: ["Reading the chronicle at ", cleanLine(root), "\u2026"] });
+    const context = contextFor();
     const leftWidth = compact ? columns : Math.min(64, Math.max(36, Math.floor(columns * 0.4)));
     const rightWidth = compact ? columns : Math.max(20, columns - leftWidth - 1);
     const available = actions.filter((action) => action.available(context));
-    const numberWidth = String(Math.max(0, ...chronicle.rows.map((row) => row.number ?? 0))).length;
+    const numberWidth = String(Math.max(0, ...s.chronicle.rows.map((row) => row.number ?? 0))).length;
     const showAge = columns >= 44;
-    const ageWidth = Math.max(2, ...chronicle.rows.map((row) => ageOf(row.date).length));
-    const rowLine = (row, selected, marked) => (_jsxs(Text, { wrap: "truncate-end", inverse: selected, bold: marked, children: [_jsx(Text, { color: "yellow", children: String(row.number ?? "·").padStart(numberWidth) }), " ", _jsx(Text, { color: DIRECTION_COLOR[row.readings.direction], children: DIRECTION_MARK[row.readings.direction] }), " ", showAge ? _jsxs(Text, { color: "gray", children: [ageOf(row.date).padStart(ageWidth), " "] }) : null, row.structured ? row.title : _jsx(Text, { italic: true, color: "gray", children: row.slug ?? row.name })] }, row.name));
-    const selectedRow = clamp(listSel, filtered.length);
-    const selected = filtered[selectedRow];
-    // A compact list ends with the selected episode's whole title, which the
-    // rows above can only show cut.
+    const ageWidth = Math.max(2, ...s.chronicle.rows.map((row) => ageOf(row.date).length));
+    const rowLine = (row, selected, marked) => (_jsxs(Text, { wrap: "truncate-end", inverse: selected, bold: marked, children: [_jsx(Text, { color: "yellow", children: String(row.number ?? "·").padStart(numberWidth) }), " ", _jsx(Text, { color: DIRECTION_COLOR[row.readings.direction], children: DIRECTION_MARK[row.readings.direction] }), " ", showAge ? _jsxs(Text, { color: "gray", children: [ageOf(row.date).padStart(ageWidth), " "] }) : null, row.structured ? row.title : _jsx(Text, { italic: true, color: "gray", children: row.slug ?? row.name }), row.audience === "community" ? _jsx(Text, { color: "magenta", children: " \u25C7" }) : null] }, row.name));
+    const selectedRow = clamp(s.listSel, d.filtered.length);
+    const selected = d.filtered[selectedRow];
+    // A compact list ends with the selected episode's whole title.
     const peekLines = compact && selected ? 3 : 0;
-    const listWindow = windowOf(filtered, selectedRow, bodyHeight - peekLines);
-    const listPane = (_jsxs(Box, { flexDirection: "column", width: leftWidth, children: [listWindow.items.map((row, index) => {
+    const listWindow = windowOf(d.filtered, selectedRow, Math.max(1, bodyHeight - peekLines));
+    const listPane = (_jsxs(Box, { flexDirection: "column", width: leftWidth, height: bodyHeight, overflow: "hidden", flexShrink: 0, children: [listWindow.items.map((row, index) => {
                 const isSelected = listWindow.start + index === selectedRow;
-                return rowLine(row, isSelected && view === "list", isSelected && view === "files");
-            }), filtered.length === 0 ? _jsxs(Text, { color: "gray", children: ["No episode matches \u201C", query, "\u201D."] }) : null, peekLines && selected ? (_jsxs(Box, { flexDirection: "column", marginTop: Math.max(0, bodyHeight - peekLines - listWindow.items.length), children: [_jsx(Box, { height: 2, overflow: "hidden", children: _jsx(Text, { bold: true, wrap: "wrap", children: selected.title }) }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [_jsxs(Text, { color: "green", children: [selected.readings.direction, " \u00B7 ", selected.readings.theme] }), " \u00B7 ", formatDate(selected.date), selected.status ? ` · ${selected.status}` : ""] })] })) : null] }));
+                return rowLine(row, isSelected && s.view === "list", isSelected && s.view === "files");
+            }), d.filtered.length === 0 ? _jsxs(Text, { color: "gray", children: ["No episode matches \u201C", cleanLine(s.query), "\u201D."] }) : null, peekLines && selected ? (_jsxs(Box, { flexDirection: "column", marginTop: Math.max(0, bodyHeight - peekLines - listWindow.items.length), children: [_jsx(Box, { height: 2, overflow: "hidden", children: _jsx(Text, { bold: true, wrap: "wrap", children: selected.title }) }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [_jsxs(Text, { color: "green", children: [selected.readings.direction, " \u00B7 ", selected.readings.theme] }), " \u00B7 ", formatDate(selected.date), selected.status ? ` · ${selected.status}` : ""] })] })) : null] }));
     const hitRows = compact ? 2 : 1;
-    const hitWindow = hits ? windowOf(hits.hits, hitSel, Math.max(1, Math.floor((bodyHeight - 1) / hitRows))) : null;
-    const hitsPane = (_jsxs(Box, { flexDirection: "column", width: leftWidth, children: [searching ? _jsx(Text, { color: "gray", children: "Searching\u2026" }) : null, hits ? (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u201C", hits.query, "\u201D ", hits.hits.length, hits.truncated ? "+" : "", " hits \u00B7 ", new Set(hits.hits.map((h) => h.episodePath)).size, " episodes \u00B7 ", hits.engine] })) : null, hitWindow?.items.map((item, index) => {
-                const number = rowByName(item.episodePath)?.number;
-                const isSelected = hitWindow.start + index === hitSel;
-                const where = (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: String(number ?? "·").padStart(numberWidth) }), " ", _jsxs(Text, { color: "blue", children: [item.file, ":", item.line] })] }));
-                return compact ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { wrap: "truncate-middle", inverse: isSelected, children: where }), _jsxs(Text, { wrap: "truncate-end", color: isSelected ? undefined : "gray", children: ["  ", item.text.trim()] })] }, `${item.episodePath}/${item.file}:${item.line}`)) : (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [where, " ", item.text.trim()] }, `${item.episodePath}/${item.file}:${item.line}`));
+    const hitsTop = (s.searching ? 1 : 0) + (s.hits ? 1 : 0);
+    const hitWindow = s.hits ? windowOf(s.hits.hits, s.hitSel, Math.max(1, Math.floor((bodyHeight - hitsTop) / hitRows))) : null;
+    const hitsPane = (_jsxs(Box, { flexDirection: "column", width: leftWidth, height: bodyHeight, overflow: "hidden", flexShrink: 0, children: [s.searching ? _jsx(Text, { color: "gray", children: "Searching\u2026" }) : null, s.hits ? (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u201C", cleanLine(s.hits.query), "\u201D ", s.hits.hits.length, s.hits.truncated ? "+" : "", " hits \u00B7 ", new Set(s.hits.hits.map((h) => h.episodePath)).size, " episodes \u00B7 newest first \u00B7 ", s.hits.engine, s.hits.partial ? " · some files unreadable" : ""] })) : null, hitWindow?.items.map((item, index) => {
+                const number = d.rowByName(item.episodePath)?.number;
+                const isSelected = hitWindow.start + index === s.hitSel;
+                const where = (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: String(number ?? "·").padStart(numberWidth) }), " ", _jsxs(Text, { color: "blue", children: [cleanLine(item.file), ":", item.line] })] }));
+                return compact ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { wrap: "truncate-middle", inverse: isSelected, children: where }), _jsxs(Text, { wrap: "truncate-end", color: isSelected ? undefined : "gray", children: ["  ", cleanLine(item.text).trim()] })] }, `${item.episodePath}/${item.file}:${item.line}`)) : (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [where, " ", cleanLine(item.text).trim()] }, `${item.episodePath}/${item.file}:${item.line}`));
             })] }));
-    const goal = detail?.summary?.goal?.replace(/^\s*(["'])([\s\S]*)\1\s*$/, "$2").replace(/\s+/g, " ").trim();
-    // The goal gets the lines the file list does not need, and never all of them.
-    const goalLines = goal ? Math.min(Math.ceil(goal.length / Math.max(20, rightWidth - 2)), compact ? 6 : 8) : 0;
-    const fileWindow = windowOf(files, clamp(fileSel, files.length), Math.max(3, bodyHeight - 5 - goalLines));
-    const detailPane = (_jsx(Box, { flexDirection: "column", width: rightWidth, paddingLeft: compact ? 0 : 1, children: currentRow ? (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: currentRow.number ?? "·" }), " ", currentRow.title] }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [[formatDate(currentRow.date), currentRow.status, currentRow.type].filter(Boolean).join(" · "), currentRow.structured ? "" : " · no episode.yaml"] }), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["reading: ", currentRow.readings.direction, " \u00B7 ", currentRow.readings.theme, " \u00B7 ", currentRow.readings.arc] }), goal ? (_jsx(Box, { height: goalLines, overflow: "hidden", children: _jsx(Text, { wrap: "wrap", children: goal }) })) : null, detail?.error ? _jsx(Text, { color: "red", children: detail.error }) : null, _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["── ", files.length, " file", files.length === 1 ? "" : "s", view === "files" ? "" : " · Enter", " ──"] }), fileWindow.items.map((file, index) => {
-                    const isSelected = view === "files" && fileWindow.start + index === clamp(fileSel, files.length);
-                    return (_jsxs(Text, { wrap: "truncate-start", inverse: isSelected, color: file.kind === "text" ? "blue" : "gray", children: [file.relativePath, file.kind === "text" ? "" : ` · ${file.kind}`] }, file.relativePath));
-                })] })) : (_jsx(Text, { color: "gray", children: "Nothing selected." })) }));
-    const fileBody = open ? (_jsx(Box, { flexDirection: "column", children: open.view.lines.slice(open.scroll, open.scroll + bodyHeight).map((line, index) => (_jsx(Segments, { segments: line.segments, selectedRef: open.refSel }, open.scroll + index))) })) : null;
+    const boardRows = compact ? 2 : 1;
+    const boardWindow = windowOf(d.board, clamp(s.boardSel, d.board.length), Math.max(1, Math.floor((bodyHeight - 1) / boardRows)));
+    const boardHeading = panelView(d.board, "open", BOARD_LABELS);
+    const boardPane = (_jsxs(Box, { flexDirection: "column", width: leftWidth, height: bodyHeight, overflow: "hidden", flexShrink: 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: "yellow", children: boardHeading.heading }), " ", _jsx(Text, { color: "gray", children: boardHeading.meta })] }), s.board === null ? _jsx(Text, { color: "gray", children: "Reading attention\u2026" }) : null, s.board !== null && d.board.length === 0 && d.openCount > 0 ? (_jsxs(Text, { color: "gray", children: ["No open item matches this search \u2014 ", d.openCount, " still wait across the chronicle."] })) : null, boardWindow.items.map((item, index) => {
+                const isSelected = boardWindow.start + index === clamp(s.boardSel, d.board.length);
+                const number = d.rowByName(item.episode)?.number;
+                const head = (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: "?" }), " ", _jsx(Text, { color: "yellow", children: String(number ?? "·").padStart(numberWidth) }), " ", cleanLine(item.id), _jsxs(Text, { color: "gray", children: [" \u00B7 ", item.asked ?? ""] })] }));
+                return compact ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { wrap: "truncate-end", inverse: isSelected, children: head }), _jsxs(Text, { wrap: "truncate-end", color: isSelected ? undefined : "gray", children: ["  ", cleanLine(item.question)] })] }, `${item.episode}:${item.id}`)) : (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [head, " ", _jsx(Text, { children: cleanLine(item.question) })] }, `${item.episode}:${item.id}`));
+            })] }));
+    const itemBody = (item, width) => (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, wrap: "wrap", children: clean(item.question) }), item.unlocks ? _jsxs(Text, { wrap: "wrap", color: "green", children: ["unlocks: ", clean(item.unlocks)] }) : null, _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [cleanLine(item.id), " \u00B7 ", d.rowByName(item.episode)?.number ?? "", " ", cleanLine(d.rowByName(item.episode)?.title ?? item.episode), item.asked ? ` · asked ${item.asked}` : ""] }), item.state === "answered" ? (_jsxs(Text, { wrap: "wrap", color: "cyan", children: ["answered", item.answered_at ? ` ${item.answered_at.slice(0, 10)}` : "", ": ", clean(item.answer ?? "")] })) : null, (item.context ?? []).length ? _jsx(Text, { color: "gray", children: ROOM_LABELS.context }) : null, (item.context ?? []).map((cited) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "blue", wrap: "truncate-middle", children: ["\u203A ", cleanLine(cited.ref), cited.exists ? "" : " (missing)"] }), cited.excerpt ? (_jsx(Box, { height: Math.min(6, clean(cited.excerpt).split("\n").length), overflow: "hidden", width: width, children: _jsx(Text, { wrap: "wrap", color: "gray", children: clean(cited.excerpt) }) })) : null] }, cited.ref)))] }));
+    const goal = d.detail?.summary?.goal ? cleanLine(d.detail.summary.goal.replace(/^\s*(["'])([\s\S]*)\1\s*$/, "$2")).replace(/\s+/g, " ").trim() : "";
+    const openHere = d.currentRow ? (s.board ?? []).filter((item) => item.episode === d.currentRow.name).length : 0;
+    const textWidth = Math.max(10, rightWidth - (compact ? 0 : 1));
+    const linesOf = (text, cap) => Math.min(cap, Math.max(1, wrapSegments([{ text, style: "text" }], textWidth).length));
+    const titleLines = d.currentRow ? linesOf(`${d.currentRow.number ?? "·"} ${d.currentRow.title}`, 3) : 0;
+    const goalLines = goal ? linesOf(goal, compact ? 6 : 8) : 0;
+    const fixedLines = titleLines + 2 + (openHere ? 1 : 0) + goalLines + (d.detail?.error ? 1 : 0) + 1;
+    const fileWindow = windowOf(d.files, clamp(s.fileSel, d.files.length), Math.max(1, bodyHeight - fixedLines));
+    const detailPane = (_jsx(Box, { flexDirection: "column", width: rightWidth, height: bodyHeight, overflow: "hidden", paddingLeft: compact ? 0 : 1, children: _jsx(Box, { flexDirection: "column", flexShrink: 0, children: s.view === "attention" ? (d.boardItem ? itemBody(d.boardItem, rightWidth - 1) : _jsx(Text, { color: "gray", children: "Nothing selected." })) : d.currentRow ? (_jsxs(_Fragment, { children: [_jsx(Box, { height: titleLines, overflow: "hidden", flexShrink: 0, children: _jsxs(Text, { bold: true, wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: d.currentRow.number ?? "·" }), " ", d.currentRow.title] }) }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: [[formatDate(d.currentRow.date), d.currentRow.status, d.currentRow.type].filter(Boolean).join(" · "), d.currentRow.structured ? "" : " · no episode.yaml", d.currentRow.audience === "community" ? " · community" : ""] }), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["reading: ", d.currentRow.readings.direction, " \u00B7 ", d.currentRow.readings.theme, " \u00B7 ", d.currentRow.readings.arc] }), openHere ? _jsxs(Text, { color: "yellow", children: ["? ", openHere, " open question", openHere === 1 ? "" : "s", " \u00B7 a"] }) : null, goal ? (_jsx(Box, { height: goalLines, overflow: "hidden", flexShrink: 0, children: _jsx(Text, { wrap: "wrap", children: goal }) })) : null, d.detail?.error ? _jsx(Text, { color: "red", children: cleanLine(d.detail.error) }) : null, _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["── ", d.files.length, d.files.length >= MAX_FILES ? "+" : "", " file", d.files.length === 1 ? "" : "s", s.view === "files" ? "" : " · Enter", " ──"] }), fileWindow.items.map((file, index) => {
+                        const isSelected = s.view === "files" && fileWindow.start + index === clamp(s.fileSel, d.files.length);
+                        return (_jsxs(Text, { wrap: "truncate-start", inverse: isSelected, color: file.kind === "text" ? "blue" : "gray", children: [cleanLine(file.relativePath), file.kind === "text" ? "" : ` · ${file.kind}`] }, file.relativePath));
+                    })] })) : (_jsx(Text, { color: "gray", children: "Nothing selected." })) }) }));
+    const fileBody = s.open ? (_jsxs(Box, { flexDirection: "column", height: bodyHeight, overflow: "hidden", children: [s.open.empty ? _jsx(Text, { color: "gray", children: "(empty file)" }) : null, s.open.view.lines.slice(s.open.scroll, s.open.scroll + bodyHeight).map((line, index) => (_jsx(Segments, { segments: line.segments, selectedRef: s.open.refSel }, s.open.scroll + index)))] })) : null;
+    // Children never shrink: a fixed-height box clips what does not fit instead
+    // of squeezing rows to zero height, where Ink draws them over each other.
+    const box = (color, children) => (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: color, paddingLeft: 1, paddingRight: 1, flexGrow: 1, height: bodyHeight, overflow: "hidden", children: _jsx(Box, { flexDirection: "column", flexShrink: 0, children: children }) }));
     const overlayBody = (() => {
-        if (!overlay)
+        const top = s.overlays[s.overlays.length - 1]?.overlay;
+        if (!top)
             return null;
-        if (overlay.type === "doors") {
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Doors \u00B7 ", overlay.doors.title] }), overlay.doors.note ? _jsx(Text, { color: "gray", wrap: "wrap", children: overlay.doors.note }) : null, overlay.doors.doors.map((door, index) => compact ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { inverse: index === overlay.selected, color: "yellow", children: door.label }), _jsxs(Text, { wrap: "truncate-end", children: ["  ", osc8(door.url, door.url)] })] }, `${door.label}-${index}`)) : (_jsxs(Text, { wrap: "truncate-end", inverse: index === overlay.selected, children: [_jsx(Text, { color: "yellow", children: door.label.padEnd(16) }), " ", osc8(door.url, door.url)] }, `${door.label}-${index}`))), _jsx(Text, { color: "gray", children: "\u2191\u2193 \u00B7 Enter opens \u00B7 r QR \u00B7 Esc" })] }));
+        if (top.type === "doors") {
+            return box("yellow", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Doors \u00B7 ", cleanLine(top.doors.title)] }), top.doors.note ? _jsx(Text, { color: "gray", wrap: "wrap", children: cleanLine(top.doors.note) }) : null, top.doors.doors.map((door, index) => compact ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { inverse: index === top.selected, color: "yellow", children: cleanLine(door.label) }), _jsxs(Text, { wrap: "truncate-end", children: ["  ", link(door.url)] })] }, `${door.label}-${index}`)) : (_jsxs(Text, { wrap: "truncate-end", inverse: index === top.selected, children: [_jsx(Text, { color: "yellow", children: cleanLine(door.label).padEnd(16) }), " ", link(door.url)] }, `${door.label}-${index}`))), _jsx(Text, { color: "gray", children: "\u2191\u2193 \u00B7 Enter opens \u00B7 r QR \u00B7 Esc" })] }));
         }
-        if (overlay.type === "qr") {
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingLeft: 1, paddingRight: 1, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["QR \u00B7 ", overlay.door.label] }), qrLines(overlay.door.url, overlay.invert).map((line, index) => (_jsx(Text, { children: line }, index))), _jsx(Text, { wrap: "truncate-end", children: osc8(overlay.door.url, overlay.door.url) }), /^https?:\/\/(127\.0\.0\.1|localhost)[:/]/.test(overlay.door.url) || overlay.door.url.startsWith("file:") ? (_jsx(Text, { color: "yellow", wrap: "wrap", children: "This address opens only on this machine. Set MIADI_URL_BASE_INTERNAL (tailnet) or MIADI_URL_BASE (public) for a room a phone can open." })) : null, _jsx(Text, { color: "gray", children: "i inverts \u00B7 Esc" })] }));
+        if (top.type === "qr") {
+            const lines = qrLines(top.door.url, top.invert);
+            const local = /^https?:\/\/(127\.0\.0\.1|localhost)[:/]/.test(top.door.url) || top.door.url.startsWith("file:");
+            // A QR cut by the screen does not scan: say so instead (UI review, F9).
+            const room = bodyHeight - 2;
+            if (lines.length > room) {
+                return box("yellow", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, children: ["QR \u00B7 ", cleanLine(top.door.label)] }), _jsxs(Text, { wrap: "wrap", color: "yellow", children: ["This code needs ", lines.length + 2, " rows and the screen has ", bodyHeight, ". Enlarge the terminal, or open the address:"] }), _jsx(Text, { wrap: "wrap", children: link(top.door.url) }), _jsx(Text, { color: "gray", children: "Esc" })] }));
+            }
+            const spare = room - lines.length;
+            return box("yellow", _jsxs(_Fragment, { children: [spare >= 1 ? _jsxs(Text, { bold: true, wrap: "truncate-end", children: ["QR \u00B7 ", cleanLine(top.door.label)] }) : null, lines.map((line, index) => (_jsx(Text, { children: line }, index))), spare >= 2 ? _jsx(Text, { wrap: "truncate-end", children: link(top.door.url) }) : null, local && spare >= 4 ? (_jsx(Text, { color: "yellow", wrap: "wrap", children: "This address opens only on this machine. Set MIADI_URL_BASE_INTERNAL for a room a phone can open." })) : null, spare >= 3 ? _jsx(Text, { color: "gray", children: "i inverts \u00B7 Esc" }) : null] }));
         }
-        if (overlay.type === "input") {
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: overlay.title }), overlay.hint ? _jsx(Text, { color: "gray", wrap: "wrap", children: overlay.hint }) : null, _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "cyan", children: "\u203A " }), overlay.value, overlay.busy ? null : _jsx(Text, { inverse: true, children: " " })] }), overlay.busy ? _jsx(Text, { color: "gray", children: "Sending\u2026" }) : null, overlay.error ? _jsx(Text, { color: "red", wrap: "wrap", children: overlay.error }) : null, _jsx(Text, { color: "gray", children: "Enter sends \u00B7 Esc cancels" })] }));
+        if (top.type === "proof") {
+            return box("yellow", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Proof \u00B7 ", d.rowByName(top.episode)?.number ?? cleanLine(top.episode)] }), !top.status && !top.error ? _jsx(Text, { color: "gray", children: "Asking git and the wheel\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, top.status?.closing.map((stage) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: stage.state === "proven" ? "green" : stage.state === "owed" ? "yellow" : "red", children: [stage.state === "proven" ? "✓" : stage.state === "owed" ? "…" : "✗", " ", stage.stage] }), compact ? null : _jsxs(Text, { color: "gray", children: ["  ", cleanLine(stage.observed)] })] }), compact ? _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["  ", cleanLine(stage.observed)] }) : null] }, stage.stage))), top.status?.drift.map((line) => (_jsxs(Text, { color: "yellow", wrap: "wrap", children: ["drift: ", cleanLine(line)] }, line))), _jsx(Text, { color: "gray", children: "Esc" })] }));
         }
-        if (overlay.type === "attention") {
-            const itemWindow = windowOf(overlay.items, overlay.selected, Math.max(2, Math.floor((bodyHeight - 4) / 3)));
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Attention \u00B7 ", rowByName(overlay.episode)?.number ?? overlay.episode, " ", _jsxs(Text, { color: "gray", children: [overlay.items.filter((item) => item.state === "open").length, " open \u00B7 ", overlay.source === "app" ? "from the app" : "from disk"] })] }), itemWindow.items.map((item, index) => {
-                        const selected = itemWindow.start + index === overlay.selected;
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", inverse: selected, children: [_jsx(Text, { color: item.state === "open" ? "yellow" : "green", children: item.state === "open" ? "?" : "✓" }), " ", item.id] }), _jsx(Box, { height: compact ? 2 : 1, overflow: "hidden", children: _jsxs(Text, { wrap: "wrap", color: selected ? undefined : "gray", children: ["  ", item.state === "open" ? item.question : item.answer ?? item.question] }) })] }, item.id));
-                    }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u2191\u2193 \u00B7 ", overlay.canAnswer ? "Enter answers an open item" : `answering needs ${TOKEN_ENV}`, " \u00B7 Esc"] })] }));
+        if (top.type === "input") {
+            return box("cyan", _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: cleanLine(top.title) }), top.hint ? _jsx(Text, { color: "gray", wrap: "wrap", children: cleanLine(top.hint) }) : null, _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "cyan", children: "\u203A " }), cleanLine(top.value), top.busy ? null : _jsx(Text, { inverse: true, children: " " })] }), top.busy ? _jsx(Text, { color: "gray", children: "Sending\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, _jsx(Text, { color: "gray", children: "Enter sends \u00B7 Esc cancels" })] }));
         }
-        if (overlay.type === "card") {
-            const card = overlay.card;
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [card.kind === "ceremony" ? (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25C6 ", card.type ?? "ceremony", " \u00B7 ", card.direction ?? "no direction", " \u00B7 ", card.closed ? "closed" : "open"] }), card.intentions.map((line, index) => (_jsx(Text, { wrap: "wrap", children: line }, index))), card.episode ? _jsxs(Text, { color: "cyan", wrap: "truncate-end", children: ["\u2197 ", rowByName(card.episode)?.number ?? "", " ", rowByName(card.episode)?.title ?? card.episode] }) : null, card.circle ? _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u25CB held in ", card.circle] }) : _jsx(Text, { color: "gray", children: "held in no circle" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25CB ", card.name, " \u00B7 ", card.direction ?? "no direction", " \u00B7 ", card.active ? "active" : "inactive"] }), card.intention ? _jsx(Text, { wrap: "wrap", children: card.intention }) : null, _jsx(Text, { color: "gray", wrap: "truncate-end", children: [card.type, card.facilitator ? `facilitated by ${card.facilitator}` : "", `${card.ceremonies} ceremon${card.ceremonies === 1 ? "y" : "ies"}`].filter(Boolean).join(" · ") })] })), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["your seat: ", card.can.length ? card.can.join(", ") : "read"] }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "o doors \u00B7 Esc" })] }));
+        if (top.type === "panel") {
+            const view = panelView(top.items, top.view, ROOM_LABELS, top.parseError);
+            const panelWindow = windowOf(view.shown, clamp(top.selected, view.shown.length), Math.max(1, Math.floor((bodyHeight - 5) / 2)));
+            return box("yellow", _jsxs(_Fragment, { children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, children: view.heading }), " ", _jsxs(Text, { color: "gray", children: ["\u00B7 ", d.rowByName(top.episode)?.number ?? cleanLine(top.episode), " \u00B7 ", view.meta] })] }), _jsxs(Text, { children: [_jsx(Text, { color: view.view === "open" ? "yellow" : "gray", children: ROOM_LABELS.openTab }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: view.view === "history" ? "yellow" : "gray", children: ROOM_LABELS.historyTab })] }), panelWindow.items.map((item, index) => {
+                        const isSelected = panelWindow.start + index === clamp(top.selected, view.shown.length);
+                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [_jsx(Text, { color: item.state === "open" ? "yellow" : "green", children: item.state === "open" ? "?" : "✓" }), " ", cleanLine(item.id)] }), _jsxs(Text, { wrap: "truncate-end", color: isSelected ? undefined : "gray", children: ["  ", cleanLine(item.state === "open" ? item.question : item.answer ?? item.question)] })] }, item.id));
+                    }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "Tab open | history \u00B7 Enter reads \u00B7 Esc" })] }));
         }
-        if (overlay.type === "proof") {
-            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Proof \u00B7 ", rowByName(overlay.episode)?.number ?? overlay.episode] }), !overlay.status && !overlay.error ? _jsx(Text, { color: "gray", children: "Asking git and the wheel\u2026" }) : null, overlay.error ? _jsx(Text, { color: "red", wrap: "wrap", children: overlay.error }) : null, overlay.status?.closing.map((stage) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: stage.state === "proven" ? "green" : stage.state === "owed" ? "yellow" : "red", children: [stage.state === "proven" ? "✓" : stage.state === "owed" ? "…" : "✗", " ", stage.stage] }), compact ? null : _jsxs(Text, { color: "gray", children: ["  ", stage.observed] })] }), compact ? _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["  ", stage.observed] }) : null] }, stage.stage))), overlay.status?.drift.map((line) => (_jsxs(Text, { color: "yellow", wrap: "wrap", children: ["drift: ", line] }, line))), _jsx(Text, { color: "gray", children: "Esc" })] }));
+        if (top.type === "item") {
+            return box("yellow", _jsxs(_Fragment, { children: [itemBody(top.item, columns - 4), _jsxs(Text, { color: "gray", wrap: "wrap", children: [top.item.state === "open" ? (s.mayAnswer ? "Enter answers · " : `${readOnlyLabel(TOKEN_ENV)} · `) : "", "e opens its episode \u00B7 Esc"] })] }));
         }
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingLeft: 1, paddingRight: 1, flexGrow: 1, children: [_jsx(Text, { bold: true, children: "Keys" }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "/" }), " filter \u00B7 ", _jsx(Text, { color: "yellow", children: "Tab" }), " title or full text (in a file: next reference)"] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "\u2191\u2193 j k" }), " move \u00B7 ", _jsx(Text, { color: "yellow", children: "PgUp PgDn g G" }), " jump"] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "Enter l \u2192" }), " open \u00B7 ", _jsx(Text, { color: "yellow", children: "Esc h \u2190" }), " back \u00B7 ", _jsx(Text, { color: "yellow", children: "q" }), " quit"] }), actions.map((action) => (_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: action.key }), " ", action.description ?? action.label, action.effect === "write" ? _jsx(Text, { color: "red", children: " (writes)" }) : null] }, action.id))), _jsx(Text, { color: "gray", children: "Any key closes." })] }));
+        if (top.type === "card") {
+            const card = top.card;
+            return box("magenta", _jsxs(_Fragment, { children: [card.kind === "ceremony" ? (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25C6 ", cleanLine(card.type ?? "ceremony"), " \u00B7 ", cleanLine(card.direction ?? "no direction"), " \u00B7 ", card.closed ? "closed" : "open"] }), card.intentions.map((line, index) => (_jsx(Text, { wrap: "wrap", children: cleanLine(line) }, index))), card.episode ? _jsxs(Text, { color: "cyan", wrap: "truncate-end", children: ["\u2197 ", d.rowByName(card.episode)?.number ?? "", " ", cleanLine(d.rowByName(card.episode)?.title ?? card.episode)] }) : null, card.circle ? _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u25CB held in ", cleanLine(card.circle)] }) : _jsx(Text, { color: "gray", children: "held in no circle" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25CB ", cleanLine(card.name), " \u00B7 ", cleanLine(card.direction ?? "no direction"), " \u00B7 ", card.active ? "active" : "inactive"] }), card.intention ? _jsx(Text, { wrap: "wrap", children: cleanLine(card.intention) }) : null, _jsx(Text, { color: "gray", wrap: "truncate-end", children: [card.type, card.facilitator ? `facilitated by ${card.facilitator}` : "", `${card.ceremonies} ceremon${card.ceremonies === 1 ? "y" : "ies"}`]
+                                    .filter(Boolean)
+                                    .map((part) => cleanLine(String(part)))
+                                    .join(" · ") })] })), _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["your seat: ", card.can.length ? card.can.map(cleanLine).join(", ") : "read"] }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "o doors \u00B7 Esc" })] }));
+        }
+        return box("yellow", _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Keys" }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "/" }), " filter \u00B7 ", _jsx(Text, { color: "yellow", children: "Tab" }), " title or full text (in a file: next reference)"] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "!" }), " the chronicle's attention board"] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "\u2191\u2193 j k" }), " move \u00B7 ", _jsx(Text, { color: "yellow", children: "PgUp PgDn g G" }), " jump"] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: "Enter l \u2192" }), " open \u00B7 ", _jsx(Text, { color: "yellow", children: "Esc h \u2190" }), " back \u00B7 ", _jsx(Text, { color: "yellow", children: "q" }), " quit"] }), actions.map((action) => (_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: "yellow", children: action.key }), " ", action.description ?? action.label, action.effect === "write" ? _jsx(Text, { color: "red", children: " (writes)" }) : null] }, action.id))), _jsx(Text, { color: "gray", children: "Any key closes." })] }));
+    })();
+    const where = (() => {
+        if (s.view === "file" && s.open) {
+            const number = d.rowByName(s.open.name)?.number ?? "";
+            const line = `l.${s.open.view.lines[s.open.scroll]?.source ?? 1}`;
+            // The line number before the path, so a narrow screen keeps it (UI review, F24).
+            return `${number} · ${line} · ${middle(cleanLine(s.open.path), Math.max(12, columns - 30))}`;
+        }
+        const count = `${d.visible.length} episodes`;
+        const waiting = d.openCount ? ` · ! ${d.openCount}` : "";
+        return compact ? `${count}${waiting}` : `${cleanLine(s.chronicle.root)} · ${count}${waiting}`;
+    })();
+    const hints = (() => {
+        const view = s.view;
+        if (s.overlays.length)
+            return "Esc back";
+        if (view === "file")
+            return compact ? "Tab ref · Esc · q" : "Tab next reference  ⇧Tab previous  Esc back  ? keys  q quit";
+        if (view === "attention")
+            return compact ? "/ ⏎ ! Esc q" : "/ filter  ⏎ read  ! episodes  Esc back  ? keys  q quit";
+        if (view === "files")
+            return compact ? "⏎ ! ? q" : "⏎ open  ! attention  Esc back  ? keys  q quit";
+        return compact ? "/ Tab ! ? q" : "/ filter  Tab mode  ⏎ open  ! attention  ? keys  q quit";
     })();
-    const where = view === "file" && open
-        ? `${rowByName(open.name)?.number ?? ""} · ${open.path} · l.${open.view.lines[open.scroll]?.source ?? 1}`
-        : compact
-            ? `${chronicle.rows.length} episodes`
-            : `${chronicle.root} · ${chronicle.rows.length} episodes · ${withManifest} with episode.yaml`;
     const body = (() => {
         if (overlayBody)
             return overlayBody;
-        if (view === "file")
+        if (s.view === "file")
             return fileBody;
-        if (compact)
-            return view === "hits" ? hitsPane : view === "files" ? detailPane : listPane;
-        return (_jsxs(_Fragment, { children: [view === "hits" ? hitsPane : listPane, detailPane] }));
+        if (compact) {
+            if (s.view === "hits")
+                return hitsPane;
+            if (s.view === "attention")
+                return boardPane;
+            if (s.view === "files")
+                return detailPane;
+            return listPane;
+        }
+        return (_jsxs(_Fragment, { children: [s.view === "hits" ? hitsPane : s.view === "attention" ? boardPane : listPane, detailPane] }));
     })();
-    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: "yellow", children: "miadi-chronicle" }), " ", _jsx(Text, { color: "gray", children: where }), api ? (_jsxs(Text, { color: reader ? "green" : "gray", children: [" · ", reader ? `as ${reader.name}` : "read-only"] })) : null] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: inputMode ? "yellow" : "gray", children: "/ " }), query, inputMode ? _jsx(Text, { inverse: true, children: " " }) : null, " ", _jsx(Text, { color: searchMode === "title" ? "yellow" : "gray", children: "title" }), _jsx(Text, { color: "gray", children: compact ? "|" : " | " }), _jsx(Text, { color: searchMode === "full" ? "yellow" : "gray", children: compact ? "full" : "full text" }), view === "list" ? _jsxs(Text, { color: "gray", children: [" \u00B7 ", filtered.length] }) : null] }), _jsx(Box, { flexGrow: 1, flexDirection: "row", height: bodyHeight, children: body }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: status }), _jsxs(Text, { wrap: "truncate-end", children: [available.map((action) => (_jsxs(Text, { children: [_jsx(Text, { color: "yellow", children: action.key === "Enter" ? "⏎" : action.key }), " ", action.label, "  "] }, action.id))), _jsx(Text, { color: "gray", children: compact ? "/ Tab ? q" : "/ filter  Tab mode  ⏎ open  Esc back  ? keys  q quit" })] })] }));
+    const readerLabel = s.api
+        ? s.reader
+            ? `as ${cleanLine(s.reader.name)}`
+            : s.api.accepted === false
+                ? "token refused"
+                : s.api.signed
+                    ? "…"
+                    : "read-only"
+        : "";
+    return (_jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: "yellow", children: "miadi-chronicle" }), " ", _jsx(Text, { color: "gray", children: where }), readerLabel ? _jsx(Text, { color: s.reader ? "green" : "gray", children: ` · ${readerLabel}` }) : null] }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: s.inputMode ? "yellow" : "gray", children: "/ " }), cleanLine(s.query), s.inputMode ? _jsx(Text, { inverse: true, children: " " }) : null, " ", s.view === "attention" ? (_jsx(Text, { color: "gray", children: "attention" })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: s.searchMode === "title" ? "yellow" : "gray", children: "title" }), _jsx(Text, { color: "gray", children: compact ? "|" : " | " }), _jsx(Text, { color: s.searchMode === "full" ? "yellow" : "gray", children: compact ? "full" : "full text" })] })), s.view === "list" ? _jsxs(Text, { color: "gray", children: [" \u00B7 ", d.filtered.length] }) : null, s.view === "attention" ? _jsxs(Text, { color: "gray", children: [" \u00B7 ", d.board.length] }) : null] }), _jsx(Box, { flexDirection: "row", height: bodyHeight, overflow: "hidden", children: body }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: s.status }), _jsxs(Text, { wrap: "truncate-end", children: [available.map((action) => (_jsxs(Text, { children: [_jsx(Text, { color: action.effect === "write" ? "red" : "yellow", children: action.key === "Enter" ? "⏎" : action.key }), " ", action.label, "  "] }, action.id))), _jsx(Text, { color: "gray", children: hints })] })] }));
 }
 //# sourceMappingURL=App.js.map