app/tui/LaneList.tsx

 // Every Lane across the repos being watched, its status, its own ask

 // count, and its coordinators -- the "overview" building block shared

 // by `zz work` and `zz top`. Sorted descending by ask count (the

 // busiest lanes first) rather than whatever order listLanes happened

 // to return. Read-only by default: scrolling (up/down, Page Up/Down,

 // Home/End) is handled by the parent TabView, which passes down the

 // resulting offset, scrolling from the top of the list rather than

 // following a live tail.

 //

 // Passing onSelect switches this into an interactive picker instead

 // (zz top's own lanes tab, zz work --assist's own lane picker): arrow

 // keys move a selection cursor (not just scroll -- the cursor

 // following its own window, same convention AssistApp's ask picker

 // uses, rather than TabView's parent-driven scrollOffset, which this

 // mode ignores entirely, same as Explore.tsx already does for its own

 // repo list), and enter calls onSelect so the caller can push a detail

 // view (LaneDetail.tsx) showing that lane's own asks -- posting a new

 // ask happens there, not here, so you can see what's already queued

 // before adding to it.

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

 import { Box, Text, useInput, useStdin } from "ink";

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

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

 export interface LaneListProps {

  snapshots: LaneSnapshot[];

  maxRows: number;

  scrollOffset: number;

  /** Provide to make the list interactive; omit for a purely read-only view (zz work's own tab, unchanged). */

  onSelect?: (repo: string, laneId: string) => void;

 }

 function askCount(snapshot: LaneSnapshot): number {

  return snapshot.lane.history.filter((e) => e.type === "ASK").length;

 }

 export function LaneList({ snapshots, maxRows, scrollOffset, onSelect }: LaneListProps) {

  const interactive = !!onSelect;

  const [cursor, setCursor] = useState(0);

  const { isRawModeSupported } = useStdin();

  const sorted = [...snapshots].sort((a, b) => askCount(b) - askCount(a));

  useEffect(() => {

  if (cursor >= sorted.length) setCursor(Math.max(0, sorted.length - 1));

  }, [sorted.length, cursor]);

  useInput(

  (input, key) => {

  if (!interactive) return;

  if (key.upArrow) setCursor((c) => Math.max(0, c - 1));

  else if (key.downArrow) setCursor((c) => Math.min(sorted.length - 1, c + 1));

  else if (key.return) {

  const target = sorted[cursor];

  if (target) onSelect!(target.repo, target.lane.id);

  }

  },

  { isActive: isRawModeSupported },

  );

  // Interactive mode manages its own scroll window (centered on the

  // cursor), same reasoning as AssistApp's own picker: the parent's

  // scrollOffset has no way to know about a cursor it doesn't control.

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

  const windowStart = interactive ? Math.max(0, Math.min(cursor - Math.floor(windowSize / 2), Math.max(0, sorted.length - windowSize))) : Math.min(scrollOffset, Math.max(0, sorted.length - windowSize));

  const shown = sorted.slice(windowStart, windowStart + windowSize);

  return (

  <Box flexDirection="column">

  <Text color={MUTED}>

  {sorted.length === 0 ? "no lanes yet" : `showing ${windowStart + 1}-${windowStart + shown.length} of ${sorted.length}`}

  {interactive ? " enter: view asks in this lane" : ""}

  </Text>

  {shown.map((snapshot, i) => {

  const { repo, lane } = snapshot;

  const idx = windowStart + i;

  const current = interactive && idx === cursor;

  return (

  <Box key={`${repo}/${lane.id}`}>

  <Box flexShrink={0}>

  <Text color={current ? CYAN : undefined} bold={current}>

  {current ? "> " : " "}

  </Text>

  </Box>

  <Box width={26} marginRight={1} flexShrink={0}>

  <Text color={current ? CYAN : MUTED} bold={current} wrap="truncate-end">

  {repo}

  </Text>

  </Box>

  <Box width={22} marginRight={1} flexShrink={0}>

  <Text bold color={current ? CYAN : PINK} wrap="truncate-end">

  {lane.id}

  </Text>

  </Box>

  <Box width={12} marginRight={1} flexShrink={0}>

  <Text bold color={STATUS_COLOR[lane.status] ?? MUTED} wrap="truncate-end">

  {lane.status}

  </Text>

  </Box>

  <Box width={10} marginRight={1} flexShrink={0}>

  <Text color={MUTED} wrap="truncate-end">

  {askCount(snapshot)} ask{askCount(snapshot) === 1 ? "" : "s"}

  </Text>

  </Box>

  <Text color={MUTED} wrap="truncate-end">

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

  </Text>

  </Box>

  );

  })}

  </Box>

  );

 }