app/tui/ActivityLog.tsx

zzmq.dev@gmail.com/zz / app / tui / ActivityLog.tsx @ 2fe55cb5 Download

Ladder Summary

file The file defines a single exported React component, **`ActivityLog`**, which renders a scroll‑able view of raw agent tool‑call activity lines inside an Ink‑based TUI tab. It calculates which subset of `lines` to display based on the given `maxRows`, `scrollOffset`, and the total line count, shows a status header (indicating how far back the view is from the live tail), and displays the selected lines (or a placeholder when there are none). No other functions or classes are exported.

// Raw agent tool-call activity (what runAgent would otherwise print via

// console.error), captured into a LogBuffer instead so it renders inside

// a TUI tab rather than scrolling over the rendered screen. Scrolling

// (up/down, Page Up/Down, Home/End) is handled by the parent TabView,

// which passes down the resulting offset -- 0 means "follow the live

// tail".

import React from "react";

import { Box, Text } from "ink";

import { CYAN, MUTED } from "./theme.js";

export function ActivityLog({ lines, status, maxRows, scrollOffset }: { lines: readonly string[]; status: string; maxRows: number; scrollOffset: number }) {

const windowSize = Math.max(1, maxRows - 1);

const maxOffset = Math.max(0, lines.length - windowSize);

const offset = Math.min(scrollOffset, maxOffset);

const end = lines.length - offset;

const shown = lines.slice(Math.max(0, end - windowSize), end);

return (

{offset > 0 ? `${status} (${offset} line(s) back from live -- End to catch up)` : status}

</Text>

{shown.length === 0 ? (

<Text color={MUTED}>(nothing yet)</Text>

) : (

shown.map((line, i) => (

{line}

</Text>

))

)}

</Box>

);

}