LogView#

A focusable, scrollable viewport over a stream of log lines. Pairs with a LogStore — a reactive ring buffer that handles partial lines and \r overwrites.

Import#

import { LogView, createLogStore } from '@sigx/terminal';
import type { LogStore } from '@sigx/terminal';

Usage#

import { component, defineApp, onMounted, LogView, createLogStore } from '@sigx/terminal';

const App = component(() => {
    const log = createLogStore();
    onMounted(() => {
        let n = 0;
        const t = setInterval(() => { log.push(`line ${++n}\n`); }, 200);
        return () => clearInterval(t);
    });
    return () => (
        <box border="single" label="Build output">
            <LogView store={log} height={10} width={60} title="output" autofocus />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

A line too wide for the viewport is marked, not silently cut. The truncation carries a …, so a message that ends mid-word reads as clipped rather than as a message that genuinely ended there — which matters most for the stack traces and JSON payloads a log view exists to show. Widen the view, or scroll.

LogView and LogPanel derive their own box chrome via boxChrome rather than hardcoding it, so their viewport arithmetic stays correct if the frame changes shape.

LogStore#

createLogStore(opts?) returns a reactive store:

interface LogStore {
    readonly passthrough: boolean;     // streams completed lines to printStatic
    push(chunk: string): void;
    end(): void;                       // commit a trailing partial line
    clear(): void;
    lines(): readonly string[];        // completed + live partial (reactive)
    tail(n: number): string[];         // last n (reactive)
    count(): number;
}

LogStoreOptions: limit (retained-line ring buffer, default 10 000) and passthrough (stream completed lines straight to printStatic — defaults on for non-TTY so piped/CI logs stay complete and ordered, off when interactive). collapseTask(opts) collapses a finished task's output into a single line.

See also#

• LogPanel — a bounded, non-scrolling tail.
• TaskList — stream a tail under the running task.