app/tui/LaneList.tsx

zzmq.dev@gmail.com/zz / app / tui / LaneList.tsx @ 31943d52 Download

Ladder Summary

file The file defines **`LaneList`**, a React/Ink component that renders a vertically‑stacked overview of all watched lanes (repo, lane ID, status, ask count and coordinators), sorting them descending by the number of “ASK” events. It works in two modes: a read‑only view that respects the parent‑provided `scrollOffset`, and an interactive picker (when an `onSelect` callback is supplied) that manages its own cursor‑based scrolling and lets the user move with arrow keys and select a lane with **Enter**. The helper **`askCount`** computes the number of asks per lane, and the component’s props are typed by the exported **`LaneListProps`** interface.

// Every Lane across the repos being watched, its status, and its

// coordinators -- the "overview" building block shared by `zz work` and

// `zz top`. Scrolling (up/down, Page Up/Down, Home/End) is handled by

// the parent TabView, which passes down the resulting offset -- here it

// scrolls from the top of the list, rather than following a live tail.

import React from "react";

import { Box, Text } from "ink";

import type { LaneSnapshot } from "./types.js";

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

export function LaneList({ snapshots, maxRows, scrollOffset }: { snapshots: LaneSnapshot[]; maxRows: number; scrollOffset: number }) {

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

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

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

const shown = snapshots.slice(offset, offset + windowSize);

return (

<Text color={MUTED}>{snapshots.length === 0 ? "no lanes yet" : `showing ${offset + 1}-${offset + shown.length} of ${snapshots.length}`}</Text>

{shown.map(({ repo, lane }) => (

</Box>

</Box>

<Text bold color={STATUS_COLOR[lane.status] ?? MUTED}>{lane.status}</Text>

</Box>

coord: {lane.coordinators.join(", ")}

</Text>

</Box>

))}

</Box>

);

}