app/tui/WorkApp.tsx

 // `zz work`'s default (non --stdio) view: activity / lanes / ladder /

 // protocol, built from the same TabView/LaneList/LiveLog/LadderView used

 // by `zz top`, plus an activity tab fed by the running work loop's

 // LogBuffer.

 import React, { useEffect, useState, useSyncExternalStore } from "react";

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

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

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

 import { ActivityLog } from "./ActivityLog.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";

 import type { LogBuffer } from "./LogBuffer.js";

 // Loose structural shape, not an import of cli/lib/watchedRepos.js's

 // RepoWatchStore -- tui/ has never depended on cli/ (the dependency

 // runs the other way, cli/commands/work.ts imports WorkApp), and a

 // real ResolvedRepo[] (the store's actual get() type) is a structural

 // superset of this, so it's assignable here with no import needed.

 interface RepoWatch {

  get(): { slug: string; repoDir: string; stateDir: string }[];

  subscribe(listener: () => void): () => void;

 }

 export function WorkApp({

  agent,

  watch,

  remote,

  logBuffer,

  statusRef,

  onExit,

 }: {

  agent: string;

  /** The session's live watched-repo set -- grows as `zz work` creates/discovers task shards mid-run (agent/scriptedWork.ts), not just the fixed set `zz work` started with. */

  watch: RepoWatch;

  /** Mirrors work.ts's own useRemote: in remote mode, Lane/Ladder state lives on the deployed Worker, not in a local clone's flat files/git notes, so the two view hooks need to read it over the API instead -- see useLaneSnapshots.ts/useLadderTrees.ts's own `remote` param. */

  remote: boolean;

  logBuffer: LogBuffer;

  statusRef: { current: string };

  /** Awaited before the TUI actually exits (q/Ctrl+C) -- the hook `zz work --as <name>` uses to revoke its session's token (see TabView's own comment for why this can't just be a process.on("SIGINT") handler). */

  onExit?: () => Promise<void> | void;

 }) {

  const watchedRepos = useSyncExternalStore(watch.subscribe, watch.get);

  const repos = watchedRepos.map((r) => ({ repo: r.slug, repoDir: r.repoDir, stateDir: r.stateDir }));

  const snapshots = useLaneSnapshots(repos, 500, remote);

  const ladders = useLadderTrees(repos, 2000, remote);

  const [, forceTick] = useState(0);

  useEffect(() => {

  const id = setInterval(() => forceTick((t) => t + 1), 500);

  return () => clearInterval(id);

  }, []);

  return (

  <TabView

  title={`zz work -- ${agent}`}

  onExit={onExit}

  tabs={[

  {

  label: "activity",

  content: (maxRows, scrollOffset) => <ActivityLog lines={logBuffer.all} status={statusRef.current} maxRows={maxRows} scrollOffset={scrollOffset} />,

  getFullText: () => logBuffer.all.join("\n"),

  },

  { 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)} watchedRepos={watchedRepos.map((r) => r.slug)} maxRows={maxRows} scrollOffset={scrollOffset} />,

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

  },

  ]}

  />

  );

 }