@miadi/chronicle-tui 0.4.2 → 0.5.0

package/README.md

@@ -1,8 +1,11 @@
 # @miadi/chronicle-tui
 
-Browse the Miadi Chronicle from a terminal. `miadi-chronicle` lists every
-episode, filters them as you type, searches their text, reads a vessel's
-files, and opens the room, the wheel or the vessel.
+Browse the Miadi Chronicle from a terminal, and take part in its talking
+circles. `miadi-chronicle` lists every episode, filters them as you type,
+searches their text, reads a vessel's files, and opens the room, the wheel or
+the vessel. With your person token it enters the circles you sit in: you read
+the turns and the diary, speak, witness, write in the diary and close a
+ceremony, as yourself.
 
 ```bash
 npm i -g @miadi/chronicle-tui
@@ -22,13 +25,14 @@ On Termux, install with `--ignore-scripts`. Node 22 or later.
 | Tab | title filter or full-text search. In an open file: the next reference (Shift+Tab: the previous one) |
 | ↑ ↓ `j` `k`, PgUp PgDn, `g` `G` | move |
 | Enter, `l`, → | open: an episode's files, a file, a search hit |
-| Enter on a reference | a chronicle reference opens that episode. A ceremony or circle shows its doors |
+| Enter on a reference | a chronicle reference opens that episode. A ceremony or circle opens as your seat allows (else its pages) |
 | Esc, `h`, ← | back |
 | `o` | the doors of the reference, file or episode in focus: room (local, tailnet, public), wheel, vessel. Enter opens one |
 | `r` | the phone door as a QR code (`i` inverts it for a light terminal) |
 | `p` | the five-stage proof (git and the wheel, on demand) |
 | `a` | the episode's attention items, Open and History (Tab), each with what it cites. Enter reads one; Enter again answers an open one |
 | `!` | the chronicle's attention board: every open item, newest asked first, filtered by `/`. `e` on an item opens its episode |
+| `c` | talking circles: the ceremonies held in the episode in focus, the circles gathered for it, yours, the others |
 | `v` | hold a Miadi review in the episode (writer token) |
 | `?` | all keys · `q` quits |
 
@@ -71,10 +75,9 @@ miadi-chronicle --url https://miadi.tail3b11eb.ts.net
   visitor sees no `community` episode and nothing under `captures/` or
   `ceremonies/`. A reader the app names sees community episodes (◇); a reader
   the app lets write sees the room's private folders too.
-- **A ceremony or circle reference** opens as a card for a person the app
-  seats (`GET /api/ceremony/{id}`, `GET /api/circles/{id}`): its kind,
-  direction, intention, episode or facilitator, and what your seat may do.
-  Never its turns. Otherwise it shows its pages, and never the wheel's record.
+- **A ceremony or circle reference** opens as the ceremony or circle itself
+  for a person the app seats, as its page would. Otherwise it shows its pages,
+  and never the wheel's record.
 - **Attention** works as in the web room, through `@miadi/attention-core`: the
   board (`!`) and each episode's panel (`a`) read the vessels exactly as the
   room does; an answer is checked the same way and posted to
@@ -85,6 +88,39 @@ miadi-chronicle --url https://miadi.tail3b11eb.ts.net
 Write actions declare `effect: "write"` and are offered only when the app said
 it would record them.
 
+## Talking circles
+
+`c` opens the circles, from the episode in focus: the ceremonies held in it
+that you may read, the circles gathered for it, the circles you sit in, then
+the others. It is the web's `/circles` and `/ceremony/{id}` pages, through
+their routes:
+
+| where | key | does | route |
+|---|---|---|---|
+| circles | Enter | enter a ceremony, or a circle | `GET /api/circles`, `GET /api/chronicle/episodes/{ref}/wheel` |
+| a circle | Enter, `n` | enter a ceremony; open one (kind, direction, and the episode it binds to) | `GET /api/circles/{id}`, `POST /api/circles/{id}/ceremonies` |
+| a ceremony | Tab | its turns, or its diary | `GET /api/ceremony/{id}`, read again every 10 s |
+| a ceremony | `s` | speak a turn | `POST /api/ceremony/{id}/turns` |
+| a ceremony | `w` | witness the selected turn (not your own, once) | `POST …/turns/{turn}/witness` |
+| a ceremony | `d` | write in the diary, in a phase and a kind | `POST /api/ceremony/{id}/diary` |
+| a ceremony | `x` | close it, with what the circle learned | `POST /api/ceremony/{id}/close` |
+| a ceremony | `e`, `o` | its episode; its pages | |
+
+- **Each act is yours.** A turn, a witness, a diary entry, a close and a new
+  ceremony go with `MIADI_PERSON_TOKEN` as the only bearer: those routes take
+  the act from whoever the bearer is and refuse the writer token. Without a
+  person token, `c` says what to set and sends nothing.
+- **Offered as the page offers it.** Each key appears only when the app's
+  `can` says the route would accept it from you now: a seat in the circle and
+  the role's permission, an open ceremony, a facilitator to close.
+- **A turn is a person's words.** It shows inside its ceremony to a reader the
+  app lets read that ceremony, never in a list (jgwill/Miadi#680, D3). Its
+  text passes the same sanitizer as every file.
+- **Typing a turn.** Enter sends, Esc cancels. A paste arrives whole, line
+  breaks kept. ↑↓ change a choice (a diary phase, a direction) and Tab moves
+  between choices. Learnings for a close go one per line, or separated by
+  ` | `.
+
 ## Safe to point at any chronicle
 
 Chronicle files are written by many agents and people. Every string the
@@ -106,10 +142,11 @@ The browser holds no chronicle rules of its own:
 | references in a file: `miadi-chronicle:`, `miadi-ceremony:`, `miadi-circle:`, `{{ … }}` | `@miadi/inquiry-weave` (`findTextReferences`) |
 | the doors, as OSC 8 links | `@miadi/inquiry-weave` (`resolveForTerminal`, `resolveWheelRefForTerminal`) |
 | the five-stage proof | `@miadi/inquiry-weave` (`episodeDoorStatus`) |
+| circles, ceremonies, turns and the diary | the Miadi app's circle routes, as the person; closings folded into what they close as the web folds them (`lib/ceremony-view.ts`) |
 
-A ceremony or circle shows its addresses only. Ceremonies are private until
-their page sees the reader's seat, so nothing the wheel holds about one is
-read here (jgwill/Miadi#680).
+A ceremony or circle is read only through the app, as the person whose seat
+it is. Ceremonies are private until their page sees the reader's seat, so
+nothing is read from the wheel directly (jgwill/Miadi#680).
 
 Readings are guesses from keywords in an episode's name and title, and an
 episode with no keyword reads by its number's turn of the wheel. The detail
@@ -140,6 +177,8 @@ render(<App root={process.env.MIADI_CHRONICLE_ROOT!} actions={[mine]} />)
 
 An action that changes anything declares `effect: "write"` and calls the
 existing door for it (the episode API, inquiry-weave, the ceremony routes),
-never the files directly. Version 0.1 registers reading actions only.
+never the files directly. A person's acts inside a ceremony (speak, witness,
+the diary, close) are keys of its overlay, offered where the app's `can`
+allows them.
 
 Ref: jgwill/Miadi#706

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAiD,MAAM,OAAO,CAAA;AAGrE,OAAO,EAIL,KAAK,eAAe,EAGrB,MAAM,cAAc,CAAA;AA0CrB,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IACpC,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC7B;AAoHD,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,qBA+9BlC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAiD,MAAM,OAAO,CAAA;AAIrE,OAAO,EAML,KAAK,eAAe,EAIrB,MAAM,cAAc,CAAA;AAmErB,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IACpC,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC7B;AAoHD,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,qBAi6ClC"}

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" };
@@ -204,8 +206,18 @@ export function App(props) {
                 const mayAnswer = await api.mayAnswer();
                 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 } });
+                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) {
@@ -419,7 +431,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 +627,25 @@ 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 (message) => {
                     set({ status: cleanLine(message), overlays: ui.current.overlays.slice(0, -1) });
                     try {
                         await top.after?.();
@@ -498,8 +685,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)
@@ -673,7 +965,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 +992,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 +1061,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 +1102,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.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