@miadi/chronicle-tui 0.7.0 → 0.8.0

package/README.md

@@ -36,6 +36,8 @@ On Termux, install with `--ignore-scripts`. Node 22 or later.
 | `v` | hold a Miadi review in the episode (writer token) |
 | `i` | the episode's inquiries and, when you may write, the shelf: Enter attaches one, a dry run first, `y` confirms |
 | `t` | the episode's companion seat (Mia) through tide: the plan first, `y` runs it only when it would act, `A` asks again archiving the running session |
+| `T` | this machine's tmux sessions, the episode in focus's first. Inside tmux, Enter opens one beside the chronicle; outside, it hands the terminal over until you detach |
+| `F`, `X` | with a session beside: focus it (prefix+arrow comes back); close the split (the session goes on) |
 | `L` | relate episodes: `L` marks the one in focus, move to the other, `L` again, say why (relates to or continues from, one way or both). Esc forgets the mark |
 | `?` | all keys · `q` quits |
 
@@ -97,6 +99,27 @@ 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.
 
+## A session beside the chronicle
+
+Run the browser inside tmux and `T` lists the sessions on this machine, each
+with the episode it works in (the vessel its pane is in, or the number its
+name carries), the sessions of the episode in focus first. Enter on one:
+
+- **inside tmux**, tmux splits the browser's window and shows that session in
+  the split, live, as a client of its own (`env -u TMUX tmux attach`). You type
+  in it directly. The prefix once moves between the panes; the session's own
+  tmux keys take the prefix twice. The browser jumps to the session's episode
+  and keeps it current: its files are read again every 5 s, and a file changed
+  in the last 15 minutes is marked ●, so you see what the agent is touching.
+  The header shows `⇆ <session> · <command> · <idle>`. `F` focuses the split,
+  `X` closes it, and the session goes on, as it does when you detach inside it.
+- **outside tmux**, the browser steps aside and runs `tmux attach` in this
+  terminal; `prefix d` brings you back to the same screen.
+
+While you type in it, the split is that session's most recent client, so its
+window takes the split's size, as with any tmux client. The browser never types
+into a session; only your keys reach it, and tmux never inherits a token.
+
 ## Inquiries and the companion seat
 
 Both show what would happen before anything does, and act only on `y`:

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;AAIrE,OAAO,EAML,KAAK,eAAe,EAIrB,MAAM,cAAc,CAAA;AAqErB,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;AAuHD,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,qBAirDlC"}
+{"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;AAmFrB,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;AAyHD,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,qBA8yDlC"}

package/dist/App.js

@@ -21,6 +21,7 @@ import { BOARD_LABELS, ROOM_LABELS, answeredMessage, checkAnswer, filterBoard, l
 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 { THREAD, attachInquiry, attachedMessage, previewLines, readInquiries } from "./inquiries.js";
 import { companionLines, companionPlan, planActs, ranMessage, runCompanion } from "./tide.js";
+import { attachHere, closePane, focusPane, idleFor, insideTmux, listSessions, openBeside, orderSessions, paneAlive, tmuxEnv, } from "./sessions.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";
@@ -88,7 +89,7 @@ const PLAIN_KEY = {
 };
 export function App(props) {
     const { root, actions: extra = [], url, withheld = [] } = props;
-    const { exit } = useApp();
+    const { exit, suspendTerminal } = useApp();
     const { columns, rows } = useWindowSize();
     const [, render] = useReducer((n) => n + 1, 0);
     const ui = useRef({
@@ -670,6 +671,70 @@ export function App(props) {
             set({ status: cleanLine(`The seat did not open: ${error.message}`) });
         });
     };
+    // ── a tmux session beside the chronicle ───────────────────────────────────
+    const sessionRowsOf = (o) => {
+        const d = derive();
+        return o.sessions && d.s.chronicle ? orderSessions(o.sessions, d.visible, d.s.chronicle.root, o.episode, o.own) : [];
+    };
+    const closeBeside = async (message) => {
+        const beside = ui.current.beside;
+        if (!beside)
+            return;
+        set({ beside: undefined, status: message ?? `Closed the split; ${beside.session} goes on.` });
+        await closePane(beside.paneId, tmuxEnv(process.env, withheld));
+    };
+    const openSession = async (row) => {
+        const name = row.session.name;
+        if (row.own)
+            return set({ status: `${name} is this browser's own session.` });
+        if (!insideTmux()) {
+            // Outside tmux the terminal itself is handed over, and comes back on detach.
+            let outcome = { ok: false };
+            await suspendTerminal(() => {
+                outcome = attachHere(name, tmuxEnv(process.env, withheld));
+            });
+            return set({ status: outcome.ok ? `Back from ${name}.` : cleanLine(outcome.message ?? `Could not attach ${name}.`) });
+        }
+        if (ui.current.beside)
+            await closePane(ui.current.beside.paneId, tmuxEnv(process.env, withheld));
+        try {
+            const paneId = await openBeside(name, { env: tmuxEnv(process.env, withheld) });
+            set({ beside: { session: name, paneId, episode: row.episode, info: row.session }, overlays: [] });
+            // The chronicle side shows the episode the session works in.
+            if (row.episode && derive().rowByName(row.episode))
+                jumpTo(row.episode);
+            set({ status: `${name} is beside you · F focuses it, prefix+arrow comes back · X closes the split, the session goes on.` });
+        }
+        catch (error) {
+            set({ beside: undefined, status: cleanLine(`Could not open ${name}: ${error.message}`) });
+        }
+    };
+    // While a session is beside the chronicle: is the split still there, what does the session run, what changed in its episode.
+    useEffect(() => {
+        const timer = setInterval(async () => {
+            const beside = ui.current.beside;
+            if (!beside)
+                return;
+            const env = tmuxEnv(process.env, withheld);
+            if (!(await paneAlive(beside.paneId, env))) {
+                if (ui.current.beside?.paneId === beside.paneId)
+                    set({ beside: undefined, status: `The split closed; ${beside.session} goes on.` });
+                return;
+            }
+            const info = (await listSessions(env)).find((session) => session.name === beside.session);
+            if (ui.current.beside?.paneId !== beside.paneId)
+                return;
+            if (beside.episode)
+                details.current.delete(`${ui.current.access.mayWrite}:${beside.episode}`);
+            set({ beside: { ...beside, info: info ?? beside.info }, status: ui.current.status });
+        }, 5_000);
+        return () => {
+            clearInterval(timer);
+            const beside = ui.current.beside;
+            if (beside)
+                void closePane(beside.paneId, tmuxEnv(process.env, withheld));
+        };
+    }, []);
     // ── 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";
@@ -797,6 +862,17 @@ export function App(props) {
                 }, (error) => updateById(handle, (o) => (o.type === "confirm" ? { ...o, busy: false, error: cleanLine(error.message) } : o)));
                 return;
             }
+            if (top.type === "sessions") {
+                const rows = sessionRowsOf(top);
+                if (key.downArrow || input === "j")
+                    return updateTop({ ...top, selected: clamp(top.selected + 1, rows.length) });
+                if (key.upArrow || input === "k")
+                    return updateTop({ ...top, selected: clamp(top.selected - 1, rows.length) });
+                const row = rows[clamp(top.selected, rows.length)];
+                if (row && (key.return || input === "l" || key.rightArrow))
+                    return void openSession(row);
+                return;
+            }
             if (top.type === "inquiries") {
                 const handle = topHandle();
                 const items = top.view?.shelf?.items ?? [];
@@ -1018,6 +1094,16 @@ export function App(props) {
             return forward();
         if (key.escape && s.relateFrom)
             return set({ relateFrom: undefined, status: "No longer relating." });
+        if (s.beside && input === "F") {
+            focusPane(s.beside.paneId, tmuxEnv(process.env, withheld)).catch((error) => set({ status: cleanLine(error.message) }));
+            return;
+        }
+        if (s.beside && input === "X")
+            return void closeBeside();
+        if (input === "q" && s.beside) {
+            void closeBeside();
+            return exit();
+        }
         if (key.escape || key.leftArrow || input === "h" || key.backspace)
             return back();
         if (input === "?")
@@ -1088,7 +1174,7 @@ export function App(props) {
     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, 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));
+                        return (_jsxs(Text, { wrap: "truncate-start", inverse: isSelected, color: file.kind === "text" ? "blue" : "gray", children: [Date.now() - Date.parse(file.modifiedAt) < 15 * 60_000 ? _jsx(Text, { color: "green", children: "\u25CF " }) : null, cleanLine(file.relativePath), file.kind === "text" ? "" : ` · ${file.kind}`] }, file.relativePath));
                     })] })) : (_jsx(Text, { color: "gray", children: "Nothing selected." })) }) }));
     const fileBody = s.open ? (_jsxs(Box, { flexDirection: "column", height: bodyHeight, overflow: "hidden", children: [s.open.empty ? _jsx(Text, { color: "gray", children: "(empty file)" }) : null, s.open.view.lines.slice(s.open.scroll, s.open.scroll + bodyHeight).map((line, index) => (_jsx(Segments, { segments: line.segments, selectedRef: s.open.refSel }, s.open.scroll + index)))] })) : null;
     /** How many screen rows these lines take inside an overlay. */
@@ -1149,6 +1235,17 @@ export function App(props) {
             const room = Math.max(1, bodyHeight - 2 - (2 + (top.busy ? 1 : 0) + (top.error ? 1 : 0)));
             return box("red", _jsxs(_Fragment, { children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: cleanLine(top.title) }), _jsx(Box, { flexDirection: "column", height: Math.min(room, rowsOf(top.lines.map((line) => cleanLine(line.text)))), overflow: "hidden", flexShrink: 0, children: _jsx(Box, { flexDirection: "column", flexShrink: 0, children: top.lines.map((line, index) => (_jsx(Text, { wrap: "wrap", color: line.tone === "warn" ? "yellow" : line.tone === "meta" ? "gray" : undefined, children: cleanLine(line.text) }, index))) }) }), top.busy ? _jsx(Text, { color: "gray", children: "Working\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, _jsxs(Text, { wrap: "truncate-end", children: [top.yes && !top.busy ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "red", bold: true, children: "y" }), " ", top.yes, " \u00B7", " "] })) : null, _jsx(Text, { color: "gray", children: top.busy ? "" : "Esc cancels" })] })] }));
         }
+        if (top.type === "sessions") {
+            const rows = sessionRowsOf(top);
+            const listWindow = windowOf(rows, clamp(top.selected, rows.length), Math.max(1, bodyHeight - 5));
+            const focusLabel = top.episode ? episodeLabel(top.episode) : "";
+            const now = Date.now() / 1000;
+            return box("green", _jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Sessions", " ", _jsxs(Text, { color: "gray", children: ["\u00B7 ", insideTmux() ? "Enter opens one beside the chronicle" : "Enter hands this terminal to it; prefix d comes back"] })] }), !top.sessions && !top.error ? _jsx(Text, { color: "gray", children: "Asking tmux\u2026" }) : null, top.error ? _jsx(Text, { color: "red", wrap: "wrap", children: cleanLine(top.error) }) : null, rows.length && focusLabel ? (_jsxs(Text, { color: "gray", wrap: "truncate-end", children: [rows.some((row) => row.here) ? `${focusLabel} first` : `none works in ${focusLabel}`, " \u00B7 \u25CF has a client \u00B7 \u25CB has none"] })) : null, listWindow.items.map((row, index) => {
+                        const isSelected = listWindow.start + index === clamp(top.selected, rows.length);
+                        const where = row.episode ? episodeLabel(row.episode) : "";
+                        return (_jsxs(Text, { wrap: "truncate-end", inverse: isSelected, children: [_jsx(Text, { color: row.session.attached ? "green" : "gray", children: row.session.attached ? "●" : "○" }), " ", _jsx(Text, { bold: row.here, children: cleanLine(row.session.name) }), _jsx(Text, { color: "gray", children: [where, cleanLine(row.session.command), idleFor(row.session.activity, now), row.own ? "this browser" : ""].filter(Boolean).map((part) => ` · ${part}`).join("") })] }, row.session.name));
+                    }), _jsx(Text, { color: "gray", wrap: "truncate-end", children: "\u2191\u2193 \u00B7 \u23CE open \u00B7 Esc" })] }));
+        }
         if (top.type === "inquiries") {
             const view = top.view;
             const items = view?.shelf?.items ?? [];
@@ -1248,6 +1345,10 @@ export function App(props) {
         const view = s.view;
         if (s.overlays.length)
             return "Esc back";
+        if (s.beside && !compact)
+            return "F focus beside  X close split  ? keys  q quit";
+        if (s.beside)
+            return "F X ? q";
         if (view === "file")
             return compact ? "Tab ref · Esc · q" : "Tab next reference  ⇧Tab previous  Esc back  ? keys  q quit";
         if (view === "attention")
@@ -1281,6 +1382,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.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 })] })] }));
+    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 }), s.beside ? (_jsxs(Text, { color: "cyan", children: [` · ⇆ ${cleanLine(s.beside.session)}`, s.beside.info ? ` · ${cleanLine(s.beside.info.command)} · ${idleFor(s.beside.info.activity)}` : ""] })) : null, 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