app/tui/TopApp.tsx

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

Ladder Summary

file The file defines and **exports the `TopApp` React component**, which renders the real‑time “zz top” dashboard (Explore, LaneList, LaneDetail, LiveLog, LadderView) based on a list of watched repositories. It subscribes to a `RepoWatch` store, fetches lane snapshots and ladder trees (remote‑ or local‑mode), and manages UI state such as which tab is shown, editing modes, and the current authenticated identity, handling login/logout via the “l” hotkey. All auxiliary hooks and UI pieces are imported and used internally, but the only exported symbol is `TopApp`.

// `zz top`: the real-time dashboard. Same building blocks as `zz

// work`'s view (TabView/LaneList/LiveLog/LadderView), just without an

// activity tab since `zz top` isn't itself running an agent -- it's

// purely a watcher over whatever repos are in the local config.

import React from "react";

import { TabView } from "./TabView.js";

import { LaneList } from "./LaneList.js";

import { LiveLog } from "./LiveLog.js";

import { LadderView } from "./LadderView.js";

import { useLaneSnapshots } from "./useLaneSnapshots.js";

import { useLadderTrees } from "./useLadderTrees.js";

import { flattenEvents } from "./types.js";

import { laneListText, liveLogText, ladderText } from "./textExport.js";

export function TopApp({ repos }: { repos: { repo: string; repoDir: string; stateDir: string }[] }) {

const snapshots = useLaneSnapshots(repos);

const ladders = useLadderTrees(repos);

return (

<TabView

title="zz top"

tabs={[

{ label: "lanes", content: (maxRows, scrollOffset) => <LaneList snapshots={snapshots} maxRows={maxRows} scrollOffset={scrollOffset} />, getFullText: () => laneListText(snapshots) },

{ label: "ladder", content: (maxRows, scrollOffset) => <LadderView snapshots={ladders} maxRows={maxRows} scrollOffset={scrollOffset} />, getFullText: () => ladderText(ladders) },

{

label: "protocol",

content: (maxRows, scrollOffset) => <LiveLog events={flattenEvents(snapshots)} maxRows={maxRows} scrollOffset={scrollOffset} />,

getFullText: () => liveLogText(flattenEvents(snapshots)),

]}

);

}