@miadi/chronicle-tui 0.4.2 → 0.6.0

package/dist/App.js

@@ -12,12 +12,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * taken, so tmux (C-b) and herdr (prefix+…) keep all of theirs.
  */
 import { useEffect, useMemo, useReducer, useRef } from "react";
-import { Box, Text, useApp, useInput, useWindowSize } from "ink";
+import stringWidth from "string-width";
+import { Box, Text, useApp, useInput, usePaste, useWindowSize } from "ink";
 import { MAX_FILES } from "@miadi/episode-vessel";
-import { DEFAULT_ACTIONS, actionFor, } from "./actions.js";
+import { DEFAULT_ACTIONS, actionFor, enterCeremony, enterCircle, } from "./actions.js";
 import { TOKEN_ENV, answerAttention, connectApi } from "./api.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 { CEREMONY_TYPES, DIARY_PHASES, DIRECTIONS, ENTRY_TYPES, PHASE_LABELS, ceremonyHeadline, ceremonyLines, circleEntries, closeCeremony, mayWitness, openCeremony, readCeremony, readCircle, scrollTo, speak, splitLearnings, typeLabel, whenOf, witness, writeDiary, } from "./circles.js";
+import { VISITOR, wheelDoors, 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" };
@@ -106,6 +108,7 @@ export function App(props) {
         reader: null,
         access: VISITOR,
         mayAnswer: false,
+        mayMint: false,
         board: null,
         boardSel: 0,
         history: [],
@@ -201,11 +204,21 @@ export function App(props) {
                 return;
             try {
                 const reader = await api.me();
-                const mayAnswer = await api.mayAnswer();
+                const [mayAnswer, mayMint] = await Promise.all([api.mayAnswer(), api.mayMint()]);
                 if (!live)
                     return;
+                // Signing in can show more episodes (community ones), so the selection is kept by name, not by row.
+                const before = derive();
+                const keep = before.s.view === "attention" ? undefined : before.currentRow?.name;
+                const keepItem = before.boardItem;
                 details.current.clear();
-                set({ reader, mayAnswer, access: { signedIn: Boolean(reader), mayWrite: mayAnswer } });
+                set({ reader, mayAnswer, mayMint, access: { signedIn: Boolean(reader), mayWrite: mayAnswer } });
+                const after = derive();
+                const listSel = keep ? after.filtered.findIndex((row) => row.name === keep) : -1;
+                const boardSel = keepItem ? after.board.findIndex((item) => item.episode === keepItem.episode && item.id === keepItem.id) : -1;
+                if (listSel !== -1 || boardSel !== -1) {
+                    set({ ...(listSel !== -1 ? { listSel } : {}), ...(boardSel !== -1 ? { boardSel } : {}), status: ui.current.status });
+                }
                 resolvePending();
             }
             catch (error) {
@@ -317,8 +330,22 @@ export function App(props) {
             api: s.api,
             reader: s.reader,
             mayAnswer: s.mayAnswer,
+            mayMint: s.mayMint,
+            relateFrom: s.relateFrom,
+            setRelateFrom: (name) => set({ relateFrom: name }),
+            reload: reloadChronicle,
         };
     };
+    /** Read the chronicle again after a write landed in it, keeping the episode in focus. */
+    async function reloadChronicle() {
+        const keep = derive().currentRow?.name;
+        const chronicle = await loadChronicle(root);
+        details.current.clear();
+        set({ chronicle, status: ui.current.status });
+        const index = keep ? derive().filtered.findIndex((row) => row.name === keep) : -1;
+        if (index !== -1)
+            set({ listSel: index, status: ui.current.status });
+    }
     const openFile = (name, file, from, line) => {
         const s = ui.current;
         const text = loadText(s.chronicle.root, name, file, s.access);
@@ -419,7 +446,169 @@ export function App(props) {
             set({ overlays: stack });
         },
     });
+    // ── talking circles: the overlays, and the person's acts in them ─────────
+    const host = { open: openOverlay, replace: replaceOverlay };
+    const topHandle = () => ui.current.overlays[ui.current.overlays.length - 1]?.id ?? 0;
+    /** Change overlay `handle` wherever it sits in the stack; a closed one is left alone. */
+    const updateById = (handle, change) => {
+        const stack = ui.current.overlays;
+        if (!stack.some((entry) => entry.id === handle))
+            return;
+        set({ overlays: stack.map((entry) => (entry.id === handle ? { id: handle, overlay: change(entry.overlay) } : entry)) });
+    };
+    const episodeLabel = (path) => {
+        if (!path)
+            return "";
+        const row = derive().rowByName(path);
+        return row?.number !== undefined ? `ep ${row.number}` : path;
+    };
+    /**
+     * How a ceremony fills the overlay: inside the border, a title, its
+     * intention, a line of where it is held, the tabs, the lines, the keys.
+     * Shared by the keys and the screen, so a scroll is measured as drawn.
+     */
+    const ceremonyLayout = (view, tab) => {
+        const inner = Math.max(10, columns - 4);
+        const intention = view.intentions.join(" · ");
+        const intentLines = intention ? Math.min(compact ? 2 : 3, wrapSegments([{ text: intention, style: "text" }], inner).length) : 0;
+        const room = Math.max(1, bodyHeight - 2 - (4 + intentLines));
+        return { inner, intention, intentLines, room, screen: ceremonyLines(view, tab, inner - 1) };
+    };
+    const refreshing = useRef(false);
+    /** Read the ceremony again. A reader on the newest turn stays on the newest, so new turns come into view. */
+    const reloadCeremony = async (handle) => {
+        const entry = ui.current.overlays.find((candidate) => candidate.id === handle);
+        if (!entry || entry.overlay.type !== "ceremony" || !ui.current.api || refreshing.current)
+            return;
+        refreshing.current = true;
+        try {
+            const view = await readCeremony(ui.current.api, entry.overlay.id);
+            updateById(handle, (o) => {
+                if (o.type !== "ceremony")
+                    return o;
+                const count = o.tab === "turns" ? (o.view?.turns.length ?? 0) : (o.view?.diary.length ?? 0);
+                const following = o.selected < 0 || (o.tab === "turns" && o.selected >= count - 1);
+                return { ...o, view, error: undefined, selected: following && o.tab === "turns" ? -1 : o.selected };
+            });
+        }
+        catch (error) {
+            updateById(handle, (o) => (o.type === "ceremony" ? { ...o, error: cleanLine(error.message) } : o));
+        }
+        finally {
+            refreshing.current = false;
+        }
+    };
+    const reloadCircle = async (handle) => {
+        const entry = ui.current.overlays.find((candidate) => candidate.id === handle);
+        if (!entry || entry.overlay.type !== "circle" || !ui.current.api)
+            return;
+        const view = await readCircle(ui.current.api, entry.overlay.id);
+        updateById(handle, (o) => (o.type === "circle" ? { ...o, view, error: undefined } : o));
+    };
+    // A talking circle is live: the ceremony on top is read again every ten seconds.
+    useEffect(() => {
+        const timer = setInterval(() => {
+            const top = ui.current.overlays[ui.current.overlays.length - 1];
+            if (top?.overlay.type === "ceremony" && top.overlay.view)
+                void reloadCeremony(top.id);
+        }, 10_000);
+        return () => clearInterval(timer);
+    }, []);
+    const speakInput = (handle, view) => ({
+        type: "input",
+        title: `Your turn · ${typeLabel(view.type)}${view.circle ? ` · ${view.circle.name}` : ""}`,
+        hint: "Speak. The talking piece is yours. A paste keeps its lines.",
+        value: "",
+        submit: async (value) => {
+            await speak(ui.current.api, view.id, value.trim());
+            return "Spoken in the circle.";
+        },
+        after: () => reloadCeremony(handle),
+    });
+    const diaryInput = (handle, view) => ({
+        type: "input",
+        title: `Diary · ${typeLabel(view.type)}`,
+        hint: "In your own voice. One entry is one voice, in one phase.",
+        value: "",
+        choices: [
+            { label: "phase", values: DIARY_PHASES, shown: DIARY_PHASES.map((phase) => PHASE_LABELS[phase] ?? phase), index: 1 },
+            { label: "kind", values: ENTRY_TYPES, index: ENTRY_TYPES.indexOf("reflection") },
+        ],
+        submit: async (value, [phase, entryType]) => {
+            await writeDiary(ui.current.api, view.id, { phase: phase, entryType: entryType, content: value.trim() });
+            return `Written in the diary (${phase}, ${entryType}).`;
+        },
+        after: () => reloadCeremony(handle),
+    });
+    const closeInput = (handle, view) => ({
+        type: "input",
+        title: `Close the circle · ${typeLabel(view.type)}${view.circle ? ` · ${view.circle.name}` : ""}`,
+        hint: "What the circle learned: one per line (a paste keeps its lines) or separated by ' | '. Nothing is fine. Enter closes it; Esc keeps it open.",
+        value: "",
+        allowEmpty: true,
+        submit: async (value) => {
+            const result = await closeCeremony(ui.current.api, view.id, splitLearnings(value));
+            return result.already ? "It was already closed." : "The circle is closed.";
+        },
+        after: () => reloadCeremony(handle),
+    });
+    const openInput = (handle, circle, focus) => {
+        const episodes = [...new Set([focus, circle.episode].filter((path) => Boolean(path))), ""];
+        const directions = DIRECTIONS;
+        let opened = "";
+        return {
+            type: "input",
+            title: `Open a ceremony · ${circle.name}`,
+            hint: "Its intention, in your words. The circle's members are its participants.",
+            value: "",
+            choices: [
+                { label: "kind", values: CEREMONY_TYPES, shown: CEREMONY_TYPES.map(typeLabel), index: 0 },
+                { label: "direction", values: DIRECTIONS, index: Math.max(0, directions.indexOf(circle.direction ?? "east")) },
+                { label: "episode", values: episodes, shown: episodes.map((path) => (path ? episodeLabel(path) : "none")), index: 0 },
+            ],
+            submit: async (value, [type, direction, episode]) => {
+                const result = await openCeremony(ui.current.api, circle.id, { type: type, direction: direction, intention: value.trim(), ...(episode ? { episode_path: episode } : {}) });
+                opened = result.ceremony.id;
+                return `Opened a ${typeLabel(type)} in ${circle.name}${episode ? `, bound to ${episodeLabel(episode)}` : ""}.`;
+            },
+            after: async () => {
+                await reloadCircle(handle);
+                if (opened)
+                    enterCeremony(host, ui.current.api, opened);
+            },
+        };
+    };
+    const witnessTurn = (handle, view, index) => {
+        const turn = view.turns[index];
+        if (!turn)
+            return;
+        if (!mayWitness(view, turn)) {
+            const why = !view.can.witness
+                ? view.closed
+                    ? "The ceremony is closed."
+                    : "Your seat does not witness here."
+                : turn.speaker === view.me?.id
+                    ? "You spoke this turn; another witnesses it."
+                    : "You witnessed this turn.";
+            return set({ status: why });
+        }
+        set({ status: `Witnessing ${turn.speakerName}'s turn…` });
+        witness(ui.current.api, view.id, turn.id).then(async () => {
+            set({ status: `Witnessed ${turn.speakerName}'s turn.` });
+            await reloadCeremony(handle);
+        }, (error) => set({ status: cleanLine(error.message) }));
+    };
     // ── keys ─────────────────────────────────────────────────────────────────
+    // A paste into an input arrives whole, line breaks kept (bracketed paste).
+    const pasteActive = ui.current.overlays[ui.current.overlays.length - 1]?.overlay.type === "input";
+    usePaste((text) => {
+        const top = ui.current.overlays[ui.current.overlays.length - 1]?.overlay;
+        if (top?.type !== "input" || top.busy)
+            return;
+        const added = text.replace(/\r\n?/g, "\n").replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, "");
+        if (added)
+            updateTop({ ...top, value: top.value + added, error: undefined });
+    }, { isActive: pasteActive });
     useInput((input, key) => {
         if (key.ctrl || key.meta)
             return;
@@ -453,12 +642,29 @@ export function App(props) {
                 return;
             if (key.escape)
                 return closeTop();
+            const choices = top.choices ?? [];
+            const focus = clamp(top.focus ?? 0, choices.length);
+            if (choices.length && (key.upArrow || key.downArrow)) {
+                const choice = choices[focus];
+                const count = choice.values.length;
+                const index = (choice.index + (key.downArrow ? 1 : count - 1)) % count;
+                return updateTop({ ...top, choices: choices.map((c, i) => (i === focus ? { ...c, index } : c)) });
+            }
+            if (key.tab) {
+                if (choices.length > 1)
+                    updateTop({ ...top, focus: (focus + (key.shift ? choices.length - 1 : 1)) % choices.length });
+                return;
+            }
             if (key.return) {
                 const value = top.value;
-                if (!value.trim())
+                if (!value.trim() && !top.allowEmpty)
                     return updateTop({ ...top, error: "Nothing to send yet." });
                 updateTop({ ...top, busy: true, error: undefined });
-                top.submit(value).then(async (message) => {
+                top.submit(value, choices.map((c) => c.values[c.index])).then(async (result) => {
+                    // A two-part form: the next input takes this one's place.
+                    if (typeof result !== "string")
+                        return updateTop(result.next);
+                    const message = result;
                     set({ status: cleanLine(message), overlays: ui.current.overlays.slice(0, -1) });
                     try {
                         await top.after?.();
@@ -498,8 +704,113 @@ export function App(props) {
             }
             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 === "circles" && top.index) {
+                const entries = circleEntries(top.index);
+                const step = (from, by) => {
+                    let at = from;
+                    for (let i = from + by; i >= 0 && i < entries.length; i += by) {
+                        if (entries[i].kind !== "heading") {
+                            at = i;
+                            break;
+                        }
+                    }
+                    return at;
+                };
+                if (key.downArrow || input === "j")
+                    return updateTop({ ...top, selected: step(top.selected, 1) });
+                if (key.upArrow || input === "k")
+                    return updateTop({ ...top, selected: step(top.selected, -1) });
+                const entry = entries[top.selected];
+                if (entry && (key.return || input === "l" || key.rightArrow) && s.api) {
+                    if (entry.kind === "ceremony")
+                        return void enterCeremony(host, s.api, entry.held.ceremony.id);
+                    if (entry.kind === "circle")
+                        return void enterCircle(host, s.api, entry.circle.id, top.episode);
+                }
+                return;
+            }
+            if (top.type === "circle" && top.view) {
+                const handle = topHandle();
+                const held = top.view.held;
+                if (key.downArrow || input === "j")
+                    return updateTop({ ...top, selected: clamp(top.selected + 1, held.length) });
+                if (key.upArrow || input === "k")
+                    return updateTop({ ...top, selected: clamp(top.selected - 1, held.length) });
+                const chosen = held[clamp(top.selected, held.length)];
+                if (chosen && (key.return || input === "l" || key.rightArrow) && s.api)
+                    return void enterCeremony(host, s.api, chosen.ceremony.id);
+                if (input === "n") {
+                    if (!top.view.seat || !top.view.can.open_ceremony)
+                        return set({ status: top.view.circle.active ? "Opening a ceremony here needs a seat that facilitates." : "The circle is inactive." });
+                    return void openOverlay(openInput(handle, top.view.circle, top.episode));
+                }
+                if (input === "o") {
+                    wheelDoors("circle", top.id).then((doors) => openOverlay({ type: "doors", doors, selected: 0 }), () => { });
+                    return;
+                }
+                return;
+            }
+            if (top.type === "ceremony" && top.view) {
+                const handle = topHandle();
+                const view = top.view;
+                const layout = ceremonyLayout(view, top.tab);
+                const count = top.tab === "turns" ? view.turns.length : view.diary.length;
+                const selected = top.selected < 0 ? count - 1 : clamp(top.selected, count);
+                const scroll = top.selected < 0 ? Math.max(0, layout.screen.lines.length - layout.room) : top.scroll;
+                const select = (index) => {
+                    const next = clamp(index, count);
+                    updateTop({ ...top, selected: next, scroll: scrollTo(layout.screen, next, scroll, layout.room) });
+                };
+                if (key.tab) {
+                    const tab = top.tab === "turns" ? "diary" : "turns";
+                    return updateTop({ ...top, tab, selected: tab === "turns" ? -1 : 0, scroll: 0 });
+                }
+                if (key.downArrow || input === "j")
+                    return select(selected + 1);
+                if (key.upArrow || input === "k")
+                    return select(selected - 1);
+                if (input === "g" || key.home)
+                    return select(0);
+                if (input === "G" || key.end)
+                    return select(count - 1);
+                if (key.pageDown || key.pageUp) {
+                    const max = Math.max(0, layout.screen.lines.length - layout.room);
+                    const next = clamp(scroll + (key.pageDown ? layout.room - 1 : 1 - layout.room), max + 1);
+                    const at = layout.screen.ends.findIndex((end) => end > next);
+                    return updateTop({ ...top, scroll: next, selected: at === -1 ? Math.max(0, count - 1) : at });
+                }
+                if (input === "s") {
+                    if (!view.can.speak)
+                        return set({ status: view.closed ? "The ceremony is closed." : "Only those seated in the circle may speak." });
+                    return void openOverlay(speakInput(handle, view));
+                }
+                if (input === "w") {
+                    if (top.tab !== "turns")
+                        return set({ status: "Witnessing is of a turn: Tab to the turns." });
+                    return witnessTurn(handle, view, selected);
+                }
+                if (input === "d") {
+                    if (!view.can.diary)
+                        return set({ status: "Writing in the diary needs a seat in the circle." });
+                    return void openOverlay(diaryInput(handle, view));
+                }
+                if (input === "x") {
+                    if (!view.can.close)
+                        return set({ status: view.closed ? "The ceremony is closed." : "Only the facilitator closes the circle." });
+                    return void openOverlay(closeInput(handle, view));
+                }
+                if (input === "e" && view.episode) {
+                    if (!derive().rowByName(view.episode.path))
+                        return set({ status: `${episodeLabel(view.episode.path)} is not among the episodes you see.` });
+                    set({ overlays: [] });
+                    return jumpTo(view.episode.path);
+                }
+                if (input === "o") {
+                    wheelDoors("ceremony", view.id).then((doors) => openOverlay({ type: "doors", doors, selected: 0 }), () => { });
+                    return;
+                }
+                return;
+            }
             if (top.type === "panel") {
                 const { shown, view } = panelView(top.items, top.view, ROOM_LABELS, top.parseError);
                 if (key.tab)
@@ -585,6 +896,8 @@ export function App(props) {
             return move(1_000_000, PLAIN_KEY);
         if (key.return || key.rightArrow || input === "l")
             return forward();
+        if (key.escape && s.relateFrom)
+            return set({ relateFrom: undefined, status: "No longer relating." });
         if (key.escape || key.leftArrow || input === "h" || key.backspace)
             return back();
         if (input === "?")
@@ -641,9 +954,19 @@ export function App(props) {
     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;
+    // The episodes this one continues from or relates to, by number where it has one.
+    const lineage = d.currentRow?.lineage.length
+        ? ["continues from", "relates to", "branch of"]
+            .map((kind) => {
+            const targets = d.currentRow.lineage.filter((link) => link.kind === kind).map((link) => (link.number !== undefined ? String(link.number) : link.target));
+            return targets.length ? `${kind} ${targets.join(", ")}` : "";
+        })
+            .filter(Boolean)
+            .join(" · ")
+        : "";
+    const fixedLines = titleLines + 2 + (openHere ? 1 : 0) + (lineage ? 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 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, lineage ? _jsxs(Text, { color: "cyan", wrap: "truncate-end", children: ["\u2197 ", lineage] }) : 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." })) }) }));
@@ -673,7 +996,21 @@ export function App(props) {
             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 (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" })] }));
+            const inner = Math.max(10, columns - 4);
+            const choices = top.choices ?? [];
+            const focus = clamp(top.focus ?? 0, choices.length);
+            const hintLines = top.hint ? Math.min(3, wrapSegments([{ text: cleanLine(top.hint), style: "text" }], inner).length) : 0;
+            const choiceText = (choice) => cleanLine(choice.shown?.[choice.index] ?? choice.values[choice.index] ?? "");
+            // Choices share a line when they fit, else take one each (a phone).
+            const stacked = stringWidth(choices.map((choice) => `${choice.label} ${choiceText(choice)}`).join("  ")) > inner;
+            const choiceLines = choices.length ? (stacked ? choices.length : 1) : 0;
+            // The end of what is typed stays in view, however long a turn grows.
+            const room = Math.max(1, bodyHeight - 2 - (1 + hintLines + choiceLines + (top.busy || top.error ? 1 : 0) + 1));
+            const typed = clean(top.value)
+                .split("\n")
+                .flatMap((paragraph) => wrapSegments([{ text: paragraph, style: "text" }], inner - 2).map((line) => line.map((part) => part.text).join("")));
+            const shown = typed.slice(-room);
+            return box("cyan", _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: cleanLine(top.title) }), top.hint ? (_jsx(Box, { height: hintLines, overflow: "hidden", flexShrink: 0, children: _jsx(Text, { color: "gray", wrap: "wrap", children: cleanLine(top.hint) }) })) : null, shown.map((line, index) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "cyan", children: index === 0 && typed.length <= room ? "› " : "  " }), line, index === shown.length - 1 && !top.busy ? _jsx(Text, { inverse: true, children: " " }) : null] }, index))), choices.length ? (_jsx(Box, { flexDirection: stacked ? "column" : "row", flexShrink: 0, children: choices.map((choice, index) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsxs(Text, { color: index === focus ? "yellow" : "gray", children: [choice.label, " "] }), _jsx(Text, { inverse: index === focus, children: choiceText(choice) }), stacked ? "" : "  "] }, choice.label))) })) : null, top.busy ? _jsx(Text, { color: "gray", children: "Sending\u2026" }) : top.error ? _jsx(Text, { color: "red", wrap: "truncate-end", children: cleanLine(top.error) }) : null, _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["Enter sends", choices.length ? ` · ↑↓ ${choices.length > 1 ? "change · Tab next" : "change"}` : "", " \u00B7 Esc cancels"] })] }));
         }
         if (top.type === "panel") {
             const view = panelView(top.items, top.view, ROOM_LABELS, top.parseError);
@@ -686,14 +1023,67 @@ export function App(props) {
         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"] })] }));
         }
-        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" })] }));
+        if (top.type === "circles") {
+            const entries = top.index ? circleEntries(top.index) : [];
+            const listWindow = windowOf(entries, clamp(top.selected, entries.length), Math.max(1, bodyHeight - 4));
+            return box("magenta", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Circles", top.index?.episode ? _jsxs(Text, { color: "gray", children: [" \u00B7 from ", episodeLabel(top.index.episode.path)] }) : null] }), !top.index && !top.error ? _jsx(Text, { color: "gray", children: "Asking the wheel\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, listWindow.items.map((entry, index) => {
+                        const at = listWindow.start + index;
+                        const isSelected = at === top.selected;
+                        if (entry.kind === "heading")
+                            return _jsx(Text, { color: "gray", bold: true, wrap: "truncate-end", children: cleanLine(entry.text) }, `h${at}`);
+                        if (entry.kind === "ceremony") {
+                            const c = entry.held.ceremony;
+                            return (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [_jsxs(Text, { color: entry.held.open ? "green" : "gray", children: ["\u25C6 ", entry.held.open ? "open  " : "closed"] }), " ", ceremonyHeadline(c), _jsxs(Text, { color: "gray", children: [" \u00B7 ", typeLabel(c.type), " \u00B7 ", cleanLine(c.direction ?? ""), " \u00B7 ", whenOf(c.timestamp)] })] }, c.id));
+                        }
+                        const circle = entry.circle;
+                        return (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [_jsx(Text, { color: "magenta", children: "\u25CB" }), " ", circle.name, _jsxs(Text, { color: "gray", children: [" · ", circle.member ? "you sit here" : circle.facilitator ? `facilitated by ${circle.facilitator}` : "a circle", circle.active ? "" : " · inactive", !compact && circle.intention ? ` · ${circle.intention}` : ""] })] }, circle.id));
+                    }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "\u2191\u2193 \u00B7 \u23CE enter \u00B7 Esc" })] }));
+        }
+        if (top.type === "circle") {
+            const view = top.view;
+            const inner = Math.max(10, columns - 4);
+            const intentLines = view?.circle.intention ? Math.min(compact ? 2 : 3, wrapSegments([{ text: view.circle.intention, style: "text" }], inner).length) : 0;
+            const rows = Math.max(1, bodyHeight - 2 - (4 + intentLines));
+            const held = view?.held ?? [];
+            const heldWindow = windowOf(held, clamp(top.selected, held.length), rows);
+            const people = view ? view.members.map((m) => (m.role === "member" ? m.name : `${m.name} (${m.role})`)).join(", ") : "";
+            const canOpen = Boolean(view?.seat && view.can.open_ceremony);
+            return box("magenta", _jsxs(_Fragment, { children: [!view && !top.error ? _jsx(Text, { color: "gray", children: "Entering the circle\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, view ? (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25CB ", view.circle.name, " ", _jsxs(Text, { color: "gray", children: ["\u00B7 ", cleanLine(view.circle.direction ?? "no direction"), " \u00B7 ", view.circle.active ? "active" : "inactive"] })] }), intentLines ? (_jsx(Box, { height: intentLines, overflow: "hidden", flexShrink: 0, children: _jsx(Text, { wrap: "wrap", children: view.circle.intention }) })) : null, _jsx(Text, { color: "gray", wrap: "truncate-end", children: [view.seat ? `you: ${view.seat}` : "you are not in this circle", people ? `with ${people}` : "", view.circle.episode ? `for ${episodeLabel(view.circle.episode)}` : ""].filter(Boolean).join(" · ") }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "\u2500\u2500 ceremonies \u2500\u2500" }), held.length === 0 ? _jsx(Text, { color: "gray", children: "None yet." }) : null, heldWindow.items.map((h, index) => {
+                                const isSelected = heldWindow.start + index === clamp(top.selected, held.length);
+                                const c = h.ceremony;
+                                const where = c.episode_path ? episodeLabel(c.episode_path) : "";
+                                return (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [_jsxs(Text, { color: h.open ? "green" : "gray", children: ["\u25C6 ", h.open ? "open  " : "closed"] }), " ", ceremonyHeadline(c), _jsxs(Text, { color: "gray", children: [" \u00B7 ", [typeLabel(c.type), c.direction, where, whenOf(c.timestamp)].filter(Boolean).map((part) => cleanLine(String(part))).join(" · ")] })] }, c.id));
+                            }), _jsxs(Text, { color: "gray", wrap: "truncate-end", children: ["\u2191\u2193 \u00B7 \u23CE enter", canOpen ? " · n open a ceremony" : "", " \u00B7 o pages \u00B7 Esc"] })] })) : (_jsx(Text, { color: "gray", children: "Esc" }))] }));
+        }
+        if (top.type === "ceremony") {
+            const view = top.view;
+            if (!view) {
+                return box("magenta", _jsxs(_Fragment, { children: [top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : _jsx(Text, { color: "gray", children: "Entering the ceremony\u2026" }), _jsx(Text, { color: "gray", children: "Esc" })] }));
+            }
+            const layout = ceremonyLayout(view, top.tab);
+            const count = top.tab === "turns" ? view.turns.length : view.diary.length;
+            const selected = top.selected < 0 ? count - 1 : clamp(top.selected, count);
+            const scroll = top.selected < 0 ? Math.max(0, layout.screen.lines.length - layout.room) : Math.min(top.scroll, Math.max(0, layout.screen.lines.length - layout.room));
+            const where = [
+                view.episode ? `↗ ${episodeLabel(view.episode.path)}` : "",
+                view.circle ? `○ ${view.circle.name}` : "held in no circle",
+                view.subject ? `about ${view.subject.name}` : "",
+                `opened ${whenOf(view.timestamp)}`,
+            ].filter(Boolean);
+            const keys = [
+                ["Tab", top.tab === "turns" ? "diary" : "turns"],
+                ...(view.can.speak ? [["s", "speak"]] : []),
+                ...(top.tab === "turns" && view.turns[selected] && mayWitness(view, view.turns[selected]) ? [["w", "witness"]] : []),
+                ...(view.can.diary ? [["d", "diary"]] : []),
+                ...(view.can.close ? [["x", "close"]] : []),
+                ...(view.episode ? [["e", "episode"]] : []),
+                ["o", "pages"],
+                ["Esc", ""],
+            ];
+            const toneColor = { mark: "yellow", name: undefined, meta: "gray", text: undefined, title: "cyan", witness: "green" };
+            return box("magenta", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["\u25C6 ", typeLabel(view.type), " ", _jsxs(Text, { color: "gray", children: ["\u00B7 ", cleanLine(view.direction ?? "no direction"), " \u00B7 "] }), _jsx(Text, { color: view.closed ? "gray" : "green", children: view.closed ? "closed" : "open" })] }), layout.intentLines ? (_jsx(Box, { height: layout.intentLines, overflow: "hidden", flexShrink: 0, children: _jsx(Text, { wrap: "wrap", children: layout.intention }) })) : null, _jsx(Text, { color: "gray", wrap: "truncate-end", children: where.map(cleanLine).join(" · ") }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: top.tab === "turns" ? "yellow" : "gray", children: "Turns" }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: top.tab === "diary" ? "yellow" : "gray", children: "Diary" }), _jsxs(Text, { color: "gray", children: [view.me ? ` · you: ${view.me.facilitator ? "facilitator" : view.me.member ? "member" : "reader"}` : "", top.error ? ` · ${cleanLine(top.error)}` : ""] })] }), _jsx(Box, { flexDirection: "column", height: layout.room, overflow: "hidden", flexShrink: 0, children: layout.screen.lines.slice(scroll, scroll + layout.room).map((line, index) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "cyan", children: line.item !== undefined && line.item === selected ? "▌" : " " }), line.parts.map((part, at) => (_jsx(Text, { color: toneColor[part.tone], bold: part.tone === "name", children: part.text }, at)))] }, scroll + index))) }), _jsx(Text, { wrap: "truncate-end", children: keys.map(([k, label]) => (_jsxs(Text, { children: [_jsx(Text, { color: ["s", "w", "d", "x"].includes(k) ? "red" : "yellow", children: k }), label && (!compact || ["Tab", "s", "w", "d", "x"].includes(k)) ? ` ${label}` : "", compact ? " " : "  "] }, k))) })] }));
         }
-        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." })] }));
+        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))), _jsxs(Text, { wrap: "wrap", children: ["In a circle: ", _jsx(Text, { color: "yellow", children: "\u23CE" }), " enters a ceremony \u00B7 ", _jsx(Text, { color: "yellow", children: "n" }), " opens one. In a ceremony:", " ", _jsx(Text, { color: "yellow", children: "Tab" }), " turns or diary \u00B7 ", _jsx(Text, { color: "red", children: "s" }), " speak \u00B7 ", _jsx(Text, { color: "red", children: "w" }), " witness \u00B7", " ", _jsx(Text, { color: "red", children: "d" }), " diary \u00B7 ", _jsx(Text, { color: "red", children: "x" }), " close \u00B7 ", _jsx(Text, { color: "yellow", children: "e" }), " its episode \u00B7", " ", _jsx(Text, { color: "yellow", children: "o" }), " its pages. Turns are read again every 10 s."] }), _jsx(Text, { color: "gray", children: "Any key closes." })] }));
     })();
     const where = (() => {
         if (s.view === "file" && s.open) {
@@ -702,7 +1092,7 @@ export function App(props) {
             // 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 count = `${d.visible.length} episode${d.visible.length === 1 ? "" : "s"}`;
         const waiting = d.openCount ? ` · ! ${d.openCount}` : "";
         return compact ? `${count}${waiting}` : `${cleanLine(s.chronicle.root)} · ${count}${waiting}`;
     })();
@@ -743,6 +1133,6 @@ export function App(props) {
                     ? "…"
                     : "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 })] })] }));
+    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.relateFrom ? _jsxs(Text, { color: "red", children: [" \u00B7 relating ", episodeLabel(s.relateFrom), " \u2192 L"] }) : 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: [(s.overlays.length ? [] : 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