app/tui/LaneList.tsx

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

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

 // `zz top`. 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 default screen):

 // 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, YELLOW } from "./theme.js";

 export interface LaneListExtraRow {

  repo: string;

  laneId: string;

  label: string;

  count: number;

 }

 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;

  /** Extra synthetic rows appended after the real lanes (AssistApp's own "unclaimed across all repos" pseudo-lane) -- selecting one calls onSelect with its own repo/laneId pair, exactly like a real lane. */

  extraRows?: LaneListExtraRow[];

 }

 function askCount(snapshot: LaneSnapshot): number {

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

 }

 export function LaneList({ snapshots, maxRows, scrollOffset, onSelect, extraRows = [] }: LaneListProps) {

  const interactive = !!onSelect;

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

  const { isRawModeSupported } = useStdin();

  const total = snapshots.length + extraRows.length;

  useEffect(() => {

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

  }, [total, 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(total - 1, c + 1));

  else if (key.return) {

  if (cursor < snapshots.length) {

  const target = snapshots[cursor];

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

  } else {

  const extra = extraRows[cursor - snapshots.length];

  if (extra) onSelect!(extra.repo, extra.laneId);

  }

  }

  },

  { 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, total - windowSize))) : Math.min(scrollOffset, Math.max(0, total - windowSize));

  const windowEnd = Math.min(total, windowStart + windowSize);

  const rows: React.ReactElement[] = [];

  for (let idx = windowStart; idx < windowEnd; idx++) {

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

  if (idx < snapshots.length) {

  const { repo, lane } = snapshots[idx];

  rows.push(

  <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(snapshots[idx])} ask{askCount(snapshots[idx]) === 1 ? "" : "s"}

  </Text>

  </Box>

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

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

  </Text>

  </Box>,

  );

  } else {

  const extra = extraRows[idx - snapshots.length];

  rows.push(

  <Box key={`extra:${extra.repo}/${extra.laneId}`}>

  <Box flexShrink={0}>

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

  {current ? "> " : " "}

  </Text>

  </Box>

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

  {extra.label}

  </Text>

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

  {" "}

  ({extra.count})

  </Text>

  </Box>,

  );

  }

  }

  return (

  <Box flexDirection="column">

  <Text color={MUTED}>

  {total === 0 ? "no lanes yet" : `showing ${windowStart + 1}-${windowEnd} of ${total}`}

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

  </Text>

  {rows}

  </Box>

  );

 }