@fitchmultz/pi-subagents 0.50.0 → 0.52.0

package/dist/agent/observe-reading.js

@@ -0,0 +1,84 @@
+import { ObserverTranscript } from "./observe-transcript.js";
+import { ScrollView } from "./observe-layout.js";
+export class Reading {
+    watch;
+    transcript;
+    scroll;
+    following = true;
+    pending = false;
+    width = 0;
+    destination;
+    changed;
+    constructor(watch, options) {
+        this.watch = watch;
+        this.changed = options.changed;
+        const { sessionFile: file, sessionId, cwd } = watch.launch;
+        this.transcript = new ObserverTranscript({
+            ...options,
+            file,
+            sessionId,
+            cwd,
+            changed: (event) => {
+                this.following = false;
+                if (event.kind === "history") {
+                    this.history(event.direction);
+                    return;
+                }
+                if (event.kind === "content") {
+                    this.destination = { id: event.id, offset: 0, end: event.direction === -1 };
+                }
+                this.changed("content");
+            },
+        });
+        this.transcript.sync();
+        this.scroll = new ScrollView(this.transcript, {
+            follow: "end",
+            primary: false,
+            overscroll: "contain",
+            scrollbar: "always",
+        });
+    }
+    anchor() {
+        return (this.destination ??
+            (this.following ? undefined : this.transcript.anchor(this.scroll.scrollTop)));
+    }
+    resize(width) {
+        const changed = this.width >= 100 !== width >= 100;
+        this.width = width;
+        return changed;
+    }
+    reveal(anchor) {
+        const line = this.transcript.line(anchor);
+        const top = line - (anchor.end === true ? this.scroll.viewportHeight : 0);
+        const row = line <= 1 && anchor.end !== true && this.scroll.scrollTop === 0;
+        this.scroll.scrollTo(row ? 0 : top, { disableFollow: true });
+        this.destination = undefined;
+    }
+    scrollBy(lines) {
+        this.following = false;
+        this.scroll.scrollTo(this.scroll.scrollTop + lines, { disableFollow: true });
+    }
+    page(direction) {
+        this.following = false;
+        const height = Math.max(1, this.scroll.viewportHeight);
+        if (this.transcript.contentPage(this.scroll.scrollTop, height, direction)) {
+            return;
+        }
+        // A history row keeps a full scroll above line zero; use the actual scroll result.
+        const remaining = this.scroll.scrollBy(direction * height);
+        if (remaining === 0) {
+            return;
+        }
+        this.history(direction);
+    }
+    history(direction) {
+        const id = this.transcript.history(direction);
+        if (id !== undefined) {
+            this.destination = {
+                id,
+                offset: direction < 0 ? -Math.max(1, this.scroll.viewportHeight) : 1,
+            };
+            this.changed("history");
+        }
+    }
+}

package/dist/agent/observe-screen.js

@@ -1,132 +1,436 @@
-import { rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { sliceByColumn, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { renderLayoutFrame, dispatchLayoutMouse, TruncatedText, VStack, } from "./observe-layout.js";
+import { errorMessage } from "../shared/unknown.js";
 import { plainText } from "./journal-tail.js";
-export class ObserverScreen {
+import { Reading } from "./observe-reading.js";
+import { ObservationChannel } from "./observe-client.js";
+import { ChildList, Details, activityLabel, appendConversation, appendHeader, appendHints, } from "./observe-chrome.js";
+/** Native layout, cards and scrolling; all controls affect local reading state only. */
+export class ObserverScreen extends VStack {
     selected;
-    watching;
+    list = new ChildList((id) => this.open(id));
+    reading;
+    connection = new ObservationChannel(() => this.schedule());
+    get client() {
+        return this.connection.current;
+    }
+    observed = { revision: -1, status: "", signature: "" };
+    saved = new Map();
+    focus = "list";
+    details;
     failure = "";
-    data;
-    tui;
-    theme;
-    keys;
-    done;
     timer;
+    indexer;
+    lastFlush = -Infinity;
+    closed = false;
+    frame;
+    options;
     constructor(options) {
-        this.data = options.data;
-        this.tui = options.tui;
-        this.theme = options.theme;
-        this.keys = options.keys;
-        this.done = options.done;
+        super();
+        this.options = options;
         this.selected = options.selected;
-        if (this.selected.length > 0) {
+        if (options.selected.length > 0) {
             this.open(this.selected);
         }
-        this.timer = setInterval(() => this.update(), 250);
-        this.timer.unref();
-        this.update();
+        this.structure();
     }
     open(id) {
         try {
-            this.watching = this.data.watch(id);
-            this.selected = this.watching.id;
+            const watch = this.options.data.watch(id);
+            const reading = this.saved.get(watch.launch.id) ??
+                new Reading(watch, {
+                    tui: this.options.tui,
+                    hideThinking: this.options.hideThinking,
+                    changed: (kind) => {
+                        if (this.reading === reading) {
+                            if (kind === "history") {
+                                this.flush(true);
+                            }
+                            else {
+                                this.paint();
+                            }
+                        }
+                    },
+                    loaded: () => {
+                        if (this.visible() === reading) {
+                            this.schedule();
+                        }
+                    },
+                });
+            this.reading?.transcript.pause();
+            this.connection.clear();
+            clearTimeout(this.timer);
+            this.timer = undefined;
+            clearImmediate(this.indexer);
+            this.indexer = undefined;
+            this.saved.delete(watch.launch.id);
+            this.saved.set(watch.launch.id, reading);
+            this.reading = reading;
+            this.details = undefined;
+            reading.transcript.resume();
+            this.selected = watch.launch.id;
+            this.focus = "conversation";
             this.failure = "";
+            this.connect();
+            this.index();
+            this.structure();
+            this.options.tui.requestRender();
+            for (const key of this.saved.keys()) {
+                if (this.saved.size > 4 && key !== this.selected) {
+                    this.saved.delete(key);
+                }
+            }
         }
         catch (error) {
-            this.failure = error instanceof Error ? plainText(error.message) : "Journal unavailable.";
+            this.failure = plainText(errorMessage(error));
+            this.paint();
         }
     }
-    update() {
-        this.watching?.tail.poll();
-        this.tui.requestRender();
+    visible() {
+        return this.focus === "conversation" || (this.reading?.width ?? 0) >= 100
+            ? this.reading
+            : undefined;
     }
-    move(data) {
-        const rows = this.data.inventory();
-        const index = Math.max(0, rows.findIndex((row) => row.id === this.selected));
-        if (this.keys.matches(data, "tui.select.confirm")) {
-            const row = rows.at(index);
-            if (row) {
-                this.open(row.id);
+    connect() {
+        const reading = this.visible();
+        if (!reading) {
+            return;
+        }
+        try {
+            const id = reading.watch.launch.id;
+            const watch = this.options.data.watch(id);
+            if (!watch.identity || this.options.data.row(id)?.live !== true) {
+                return;
             }
+            this.connection.connect(watch.identity);
         }
-        else if (this.keys.matches(data, "tui.select.down")) {
-            this.selected = rows[Math.min(rows.length - 1, index + 1)]?.id ?? "";
+        catch {
+            /* The owner refresh retries; preserve the last confirmed conversation meanwhile. */
+        }
+    }
+    index() {
+        const reading = this.visible();
+        if (!reading ||
+            reading.transcript.journal.native.indexed ||
+            this.indexer !== undefined ||
+            this.failure.length > 0 ||
+            this.closed) {
+            return;
         }
-        else if (this.keys.matches(data, "tui.select.up")) {
-            this.selected = rows[Math.max(0, index - 1)]?.id ?? "";
+        this.indexer = setImmediate(() => {
+            this.indexer = undefined;
+            if (this.visible() !== reading) {
+                return;
+            }
+            try {
+                reading.transcript.journal.native.refresh();
+                this.index();
+            }
+            catch (error) {
+                this.failure = plainText(errorMessage(error));
+            }
+            this.schedule();
+        });
+        this.indexer.unref();
+    }
+    schedule() {
+        if (this.closed || this.timer !== undefined) {
+            return;
         }
+        this.timer = setTimeout(() => {
+            this.timer = undefined;
+            this.flush();
+        }, Math.max(0, this.lastFlush + 250 - performance.now()));
+        this.timer.unref();
     }
-    handleInput(data) {
-        if (this.keys.matches(data, "tui.select.cancel")) {
-            if (this.watching) {
-                this.watching = undefined;
-                this.failure = "";
+    snapshot() {
+        const revision = this.client?.revision ?? -1;
+        const status = this.options.data.row(this.selected)?.status ?? "";
+        const signature = JSON.stringify([
+            this.options.data.status(),
+            this.options.data.inventory().map(({ id, name, status: state }) => [id, name, state]),
+            this.client
+                ? [this.client.activity, this.client.connected, this.client.model, this.client.thinking]
+                : undefined,
+            this.selected,
+            this.failure,
+            this.reading?.transcript.version,
+        ]);
+        return { revision, status, signature };
+    }
+    flush(force = false) {
+        if (this.closed) {
+            return;
+        }
+        const before = this.observed;
+        this.observed = this.snapshot();
+        const changed = before.revision !== this.observed.revision || before.status !== this.observed.status;
+        const pending = this.reading?.pending;
+        const applied = this.apply(force, changed);
+        this.lastFlush = performance.now();
+        if (force ||
+            before.signature !== this.observed.signature ||
+            applied ||
+            pending !== this.reading?.pending) {
+            this.structure();
+            this.options.tui.requestRender();
+        }
+        this.index();
+        this.wait();
+    }
+    apply(force, changed) {
+        try {
+            return this.refreshReading(force, changed);
+        }
+        catch (error) {
+            this.failure = plainText(errorMessage(error));
+            this.saved.delete(this.reading?.watch.launch.id ?? "");
+            this.reading?.transcript.pause();
+            return true;
+        }
+    }
+    wait() {
+        const reading = this.visible();
+        const live = this.options.data.row(this.selected)?.live === true;
+        if (reading && this.failure.length === 0 && reading.transcript.waiting && live) {
+            this.schedule();
+        }
+    }
+    refreshReading(force, changed) {
+        const reading = this.visible();
+        if (!reading) {
+            return false;
+        }
+        reading.following = reading.following && reading.scroll.isFollowingEnd;
+        if (!reading.following && !force) {
+            reading.transcript.observe(this.client);
+            reading.pending ||= changed;
+            return false;
+        }
+        const client = this.options.data.row(reading.watch.launch.id)?.live === true ? this.client : undefined;
+        const applied = reading.transcript.sync(client);
+        if (reading.following) {
+            reading.scroll.scrollToEnd();
+            reading.pending = false;
+        }
+        return applied;
+    }
+    update() {
+        if (!this.visible()) {
+            this.connection.pause();
+            this.reading?.transcript.pause();
+        }
+        this.connect();
+        this.flush();
+    }
+    back() {
+        if (this.details) {
+            this.details = undefined;
+        }
+        else if (this.reading) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+            clearImmediate(this.indexer);
+            this.indexer = undefined;
+            this.connection.clear();
+            this.reading.transcript.pause();
+            this.reading = undefined;
+            this.focus = "list";
+        }
+        else {
+            this.options.done();
+            return;
+        }
+        this.structure();
+        this.options.tui.requestRender();
+    }
+    move(direction) {
+        if (this.focus === "conversation") {
+            if (this.details) {
+                this.details.scrollBy(direction);
             }
             else {
-                this.done();
+                this.visible()?.scrollBy(direction);
             }
+            return;
+        }
+        const rows = this.options.data.inventory();
+        const index = Math.max(0, rows.findIndex((row) => row.id === this.selected));
+        const next = Math.max(0, Math.min(rows.length - 1, index + direction));
+        this.selected = rows[next]?.id ?? "";
+        this.list.reveal(next);
+    }
+    page(direction) {
+        if (this.focus === "list") {
+            this.list.scrollBy(direction * this.list.viewportHeight);
+            return;
         }
-        else if (!this.watching) {
-            this.move(data);
+        if (this.details) {
+            this.details.scrollBy(direction * this.details.viewportHeight);
+            return;
         }
-        this.update();
+        this.reading?.page(direction);
     }
-    listLines(height) {
-        const rows = this.data.inventory();
-        const index = Math.max(0, rows.findIndex((row) => row.id === this.selected));
-        const size = Math.max(1, height - 1);
-        const start = Math.max(0, index - size + 1);
-        const page = rows.slice(start, start + size);
-        return rows.length === 0
-            ? ["No child runs in this native parent session."]
-            : [
-                `Runs ${start + 1}–${start + page.length} of ${rows.length} · active first`,
-                ...page.map((row, i) => `${start + i === index ? ">" : " "} ${row.id.slice(0, 8)} ${row.status} · ${row.name}`),
-            ];
-    }
-    journalPath(width, file) {
-        const text = plainText(file.slice(-2048), 2048);
-        const size = visibleWidth(text);
-        const room = Math.max(0, width - 1);
-        return size > width ? `…${sliceByColumn(text, size - room, room)}` : text;
-    }
-    watchLines(height, watch, width) {
-        const row = this.data.row(this.selected);
+    end() {
+        if (this.details && this.focus === "conversation") {
+            this.details.scrollToEnd();
+            return;
+        }
+        if (!this.reading) {
+            return;
+        }
+        this.focus = "conversation";
+        this.reading.transcript.resume();
+        this.connect();
+        this.reading.following = true;
+        this.reading.scroll.scrollToEnd();
+        this.reading.transcript.latest();
+        this.flush(true);
+    }
+    confirm() {
+        if (this.focus === "list") {
+            this.open(this.selected.length > 0 ? this.selected : (this.options.data.inventory()[0]?.id ?? ""));
+        }
+        else if (this.reading) {
+            this.reading.transcript.toggle();
+        }
+    }
+    switchFocus() {
+        this.focus = this.focus === "list" && this.reading ? "conversation" : "list";
+        if (!this.visible()) {
+            this.connection.pause();
+            this.reading?.transcript.pause();
+        }
+        else {
+            this.reading?.transcript.resume();
+            this.connect();
+            this.index();
+        }
+    }
+    toggleDetails() {
+        this.details =
+            !this.details && this.reading ? new Details(this.reading.watch.launch) : undefined;
+    }
+    actions() {
         return [
-            `${this.selected.slice(0, 8)} ${row?.status ?? "checking"} · ${row?.name ?? this.selected}`,
-            this.journalPath(width, watch.file),
-            ...(watch.inherited ? ["Fork context: includes inherited parent activity."] : []),
-            ...watch.tail.lines.slice(-Math.max(1, height - 3)),
-            watch.tail.notice,
+            ["tui.select.cancel", this.reading ? "back" : "close", () => this.back()],
+            ["tui.select.confirm", this.focus === "list" ? "open" : "expand", () => this.confirm()],
+            ["tui.select.up", "", () => this.move(-1)],
+            ["tui.select.down", "", () => this.move(1)],
+            ["tui.select.pageUp", "read up", () => this.page(-1)],
+            ["tui.select.pageDown", "read down", () => this.page(1)],
+            ["tui.editor.cursorLineEnd", this.details ? "details end" : "live", () => this.end()],
+            ["app.session.togglePath", "details", () => this.toggleDetails()],
+            [
+                "tui.input.tab",
+                this.focus === "list" && this.reading ? "conversation" : "children",
+                () => this.switchFocus(),
+            ],
         ];
     }
+    perform(action) {
+        action();
+        this.paint();
+    }
+    paint() {
+        if (this.closed) {
+            return;
+        }
+        this.structure();
+        this.options.tui.requestRender();
+    }
+    handleInput(data) {
+        const action = this.actions().find(([key]) => this.options.keys.matches(data, key));
+        if (action) {
+            this.perform(action[2]);
+        }
+    }
+    conversation(reading) {
+        const configuration = this.client ?? reading.watch.launch;
+        appendHeader(this, {
+            launch: reading.watch.launch,
+            model: configuration.model,
+            thinking: configuration.thinking,
+            activity: activityLabel({
+                row: this.options.data.row(reading.watch.launch.id),
+                client: this.client,
+                connecting: this.connection.connecting,
+            }),
+            details: this.details,
+            toggle: () => this.perform(() => this.toggleDetails()),
+        });
+        appendConversation(this, {
+            list: this.list,
+            reading,
+            follow: () => this.end(),
+        });
+    }
+    structure() {
+        this.clear();
+        this.addChild(new TruncatedText(this.options.theme.fg("accent", "Agents · read-only"), 0, 0), {
+            basis: 1,
+        });
+        const rows = this.options.data.inventory();
+        if (this.selected.length === 0) {
+            this.selected = rows[0]?.id ?? "";
+        }
+        this.list.update(rows, this.selected, this.options.data.checking());
+        const reading = this.visible();
+        if (reading) {
+            this.conversation(reading);
+        }
+        else {
+            this.addChild(new TruncatedText(this.options.data.status(), 0, 0), { basis: 1 });
+            this.addChild(this.list, {
+                basis: 0,
+                grow: 1,
+                minSize: 1,
+            });
+        }
+        const error = this.failure.length > 0 ? this.failure : this.options.data.error();
+        if (error.length > 0) {
+            this.addChild(new TruncatedText(this.options.theme.fg("warning", error), 0, 0), { basis: 1 });
+        }
+        appendHints(this, {
+            actions: this.actions(),
+            keys: this.options.keys,
+            perform: (action) => this.perform(action),
+        });
+    }
     render(width) {
-        const height = Math.max(1, Math.min(16, this.tui.terminal.rows - 9));
-        const content = this.watching
-            ? this.watchLines(height, this.watching, width)
-            : this.listLines(height);
-        const cancel = this.keys.getKeys("tui.select.cancel").join("/");
-        const hint = this.watching
-            ? `${rawKeyHint(cancel, "back")} · native published entries, not token deltas`
-            : [
-                rawKeyHint([...this.keys.getKeys("tui.select.up"), ...this.keys.getKeys("tui.select.down")].join("/"), "select"),
-                rawKeyHint(this.keys.getKeys("tui.select.confirm").join("/"), "watch"),
-                rawKeyHint(cancel, "close"),
-            ].join(" · ");
-        const error = this.failure.length > 0 ? this.failure : this.data.error();
-        return [
-            this.theme.fg("accent", this.watching?.inherited === true
-                ? "Agents · read-only · fork context"
-                : "Agents · read-only"),
-            this.theme.fg("muted", this.data.status()),
-            ...content,
-            this.theme.fg("error", error),
-            this.theme.fg("dim", hint),
-        ].map((line) => truncateToWidth(line, width));
-    }
-    invalidate() {
-        this.tui.requestRender();
+        const reading = this.reading;
+        const anchor = reading?.anchor();
+        if (reading?.resize(width) === true) {
+            this.structure();
+        }
+        const frame = () => renderLayoutFrame(this, width, Math.max(1, this.options.tui.terminal.rows), () => this.options.tui.requestRender());
+        this.frame = frame();
+        const visible = this.visible();
+        const selected = visible?.transcript.select(visible.scroll.scrollTop, visible.scroll.viewportHeight) === true;
+        if (visible && anchor) {
+            visible.reveal(anchor);
+        }
+        if (selected || (visible && anchor)) {
+            this.frame = frame();
+        }
+        return this.frame.lines;
+    }
+    handleMouse(event) {
+        const result = this.frame ? dispatchLayoutMouse(this, this.frame, event) : undefined;
+        const reading = this.visible();
+        if (reading?.following === true && !reading.scroll.isFollowingEnd) {
+            reading.following = false;
+            this.structure();
+        }
+        return result;
     }
     dispose() {
-        clearInterval(this.timer);
+        this.closed = true;
+        clearTimeout(this.timer);
+        clearImmediate(this.indexer);
+        this.connection.clear();
+        for (const reading of this.saved.values()) {
+            reading.transcript.pause();
+        }
+        this.saved.clear();
     }
 }