jackherd 0.0.1 → 1.0.0

package/src/plans/layout.ts

@@ -0,0 +1,881 @@
+import { CONTEXT_LEVEL, type ContextLevel, type ContextReading, contextLabel } from '../context'
+import type { ChecklistItem, DeferredItem, LaneProgress, PhaseProgress, PlanStep, StepProgress } from '../plan-format'
+import { activeItem, currentPhase, isTickedUnmerged, PHASE_ID_PREFIX } from '../plan-format'
+import {
+  BADGE_TONE,
+  BAR_SEGMENT,
+  type BadgeTone,
+  badge,
+  bar,
+  fit,
+  INVERSE_ON,
+  packGroups,
+  padVisible,
+  paint,
+  RESET,
+  spread,
+  stripAnsi,
+  visibleLength,
+  wrap,
+} from '../terminal/text'
+import { AGENT_STATUS, type AgentStatus, isAgentStatus } from '../terminal/types'
+import { textWidth } from '../terminal/width'
+import { PLAN_LANGUAGE, type PlanLanguage } from '../vocabulary'
+import {
+  NO_BADGES,
+  type PullRequestBadges,
+  WATCH_HEALTH,
+  type WatchBadges,
+  type WatchHealth,
+} from '../watch/plan-badges'
+import { chipKey, type LinkChip } from './link-chips'
+import { type PlannedPlan, phaseList, plannedPhaseCount } from './planned'
+import { CHECKS, type ChecksState, type PullRequest, pullRequestKey } from './pull-requests'
+import {
+  type ClickTarget,
+  followingKey,
+  isLaneOpen,
+  itemKey,
+  laneKey,
+  notesKey,
+  PLANNED_KEY,
+  phaseKey,
+  type Selection,
+  selectedKey,
+  targetKeys,
+  tickedKey,
+} from './selection'
+import {
+  chevronOf,
+  NO_AGENT_SYMBOL,
+  NO_AGENT_WORD,
+  PHASE_COUNT,
+  PHASE_STATE,
+  type PhaseState,
+  phaseStateOf,
+  statusSymbol,
+  statusWord,
+} from './symbols'
+import { BADGE_TEXTS, type BadgeTexts, laneMarkText, TEXTS } from './texts'
+
+/**
+ * Where a lane stands outside its plan. `agent` is the terminal adapter's status, null when no agent is listed;
+ * `branch` is null when the lane has no worktree, and its plan is then read from the main checkout.
+ */
+export type LaneStatus = { agent: string | null; branch: string | null; ahead: number | null; dirty: number }
+
+/**
+ * A lane as drawn; `pullRequests` are the open pull requests of its branch, `chips` the links of each of its
+ * plans by the plan link as the sprint writes it.
+ */
+export type LaneView = {
+  progress: LaneProgress
+  status: LaneStatus
+  pullRequests: PullRequest[]
+  chips: Record<string, LinkChip[]>
+  /** How full the agent's context is; null when the terminal gave no session or the session has no log. */
+  context?: ContextReading | null
+  /** The open phases of the lane's plans that its steps do not name; drawn as a folded row under the phases. */
+  following?: PlannedPlan[]
+  /** A running lane the sprint table has no row for; drawn with the mark `no row in lanes`. */
+  unlisted?: boolean
+  /** Preview and feedback of the lane's pull requests from the running watcher's state; none without a watcher. */
+  badges?: WatchBadges
+}
+
+/**
+ * `watch` is the health of the watcher the badges come from, absent when it was not read; `language` the project's
+ * response language for the badges' words, English when absent.
+ */
+export type OverviewView = {
+  title: string
+  time: string
+  lanes: LaneView[]
+  planned: PlannedPlan[]
+  watch?: WatchHealth
+  language?: PlanLanguage
+}
+
+/**
+ * The lines of a frame, the line holding the selected row, a phase or a task (-1 when none), so the window can
+ * follow it, and the spans a click expands or closes.
+ */
+export type Frame = { lines: string[]; cursorLine: number; targets: ClickTarget[] }
+
+/** A fixed header and footer around a body that scrolls; body lines and targets count from the body's top. */
+export type Screen = { header: string[]; body: Frame; footer: string[] }
+
+/** What every block of one lane is drawn with. */
+type LaneContext = {
+  progress: LaneProgress
+  state: Selection
+  width: number
+  chips: Record<string, LinkChip[]>
+  badges: WatchBadges
+  badgeTexts: BadgeTexts
+}
+
+/**
+ * Widths shared by every lane line: the name column, the folded pull request badges, and bar with context. They are
+ * measured over every lane on screen, open ones too, so opening or closing a lane moves no other lane's columns.
+ */
+type LaneColumns = { name: number; marks: number; right: number }
+
+type StepContext = LaneContext & { stepIndex: number }
+
+type PhaseEntry = { stepIndex: number; phase: PhaseProgress }
+
+const BRANCH_MARK = '⎇'
+const ACTIVE_MARK = '▶'
+const DEFERRED_MARK = '→'
+const SYMBOL_WIDTH = 2
+const COLUMN_SEPARATOR = '  '
+const NAME_WIDTH_MAX = 24
+const NON_BREAKING_SPACE = '\u00a0'
+const ITEM_SEPARATOR = '·'
+const RULE = '─'
+const CONTENT_INDENT = '   '
+
+/** The tree lines: a branch to a sibling that has more below it, the last branch, and what carries on beside them. */
+const TREE = { branch: '├─ ', last: '└─ ', pipe: '│  ', gap: '   ', trunk: '│' } as const
+const TREE_GUTTER = TREE.branch.length
+
+/** Places on each side of the slash of a count: `  9/9  `, ` 15/15 `, `123/456`. */
+const COUNT_PLACES = 3
+/** The cells before a count: `✅`, `✓`, `?`, `–` or nothing, padded so every slash on screen is in one column. */
+const COUNT_MARK_WIDTH = 2
+const BLANK_COUNT = ' '.repeat(2 * COUNT_PLACES + 1)
+const MIN_TITLE_WIDTH = 8
+const MIN_BESIDE_WIDTH = 24
+const CONTEXT_WIDTH = 5
+const CONTEXT_SYMBOL = '🧠'
+const PROGRESS_SYMBOL = '✅'
+const COLUMN_RULE = '│'
+/** The number badge of a three-digit pull request (`↗ #` and the digits, a cell of padding either side); a longer one widens it. */
+const PULL_REQUEST_BADGE_WIDTH = 8
+/** Under the lane line's status symbol, where the pull request row and its badge line start (D96). */
+const PULL_REQUEST_INDENT = '  '
+const CHECKS_WIDTH = 10
+const MARKDOWN_MARKS = /\*\*|`/g
+
+/** Lower ranks need the coordinator sooner; a status an adapter adds later ranks after `working`. */
+const URGENCY: Record<AgentStatus, number> = {
+  [AGENT_STATUS.blocked]: 0,
+  [AGENT_STATUS.done]: 1,
+  [AGENT_STATUS.idle]: 1,
+  [AGENT_STATUS.working]: 2,
+}
+const UNKNOWN_URGENCY = 3
+const NO_AGENT_URGENCY = 4
+
+const AGENT_PAINT: Record<AgentStatus, (text: string) => string> = {
+  [AGENT_STATUS.working]: paint.yellow,
+  [AGENT_STATUS.blocked]: paint.red,
+  [AGENT_STATUS.done]: paint.green,
+  [AGENT_STATUS.idle]: paint.dim,
+}
+
+const CHECKS_PAINT: Record<ChecksState, (text: string) => string> = {
+  [CHECKS.passed]: paint.green,
+  [CHECKS.failed]: paint.red,
+  [CHECKS.pending]: paint.yellow,
+  [CHECKS.none]: paint.dim,
+}
+
+const urgencyOf = ({ status }: LaneView): number => {
+  if (status.agent === null) return NO_AGENT_URGENCY
+  return isAgentStatus(status.agent) ? URGENCY[status.agent] : UNKNOWN_URGENCY
+}
+
+/** Lanes waiting for input first, then those with a report to read, then working ones; stable inside a group. */
+export const sortByUrgency = (lanes: readonly LaneView[]): LaneView[] =>
+  [...lanes].sort((left, right) => urgencyOf(left) - urgencyOf(right))
+
+const plain = (text: string): string => text.replace(MARKDOWN_MARKS, '')
+
+const isCurrent = (progress: LaneProgress, stepIndex: number, phase: PhaseProgress): boolean =>
+  progress.current?.stepIndex === stepIndex && progress.current.phaseId === phase.id
+
+const PHASE_PAINT: Record<PhaseState, (count: string) => string> = {
+  [PHASE_STATE.missing]: paint.dim,
+  [PHASE_STATE.empty]: paint.dim,
+  [PHASE_STATE.all]: paint.green,
+  [PHASE_STATE.open]: (count) => count,
+}
+
+const countText = (done: number, total: number): string =>
+  `${String(done).padStart(COUNT_PLACES)}/${String(total).padEnd(COUNT_PLACES)}`
+
+/** Mark and count in one fixed-width cell at the right edge, the same for the lane, phase and planned rows. */
+const countCell = (mark: string, count: string): string => `${padVisible(mark, COUNT_MARK_WIDTH)} ${count}`
+
+const PHASE_MARK: Record<PhaseState, string> = {
+  [PHASE_STATE.missing]: PHASE_COUNT.missing,
+  [PHASE_STATE.empty]: PHASE_COUNT.empty,
+  [PHASE_STATE.all]: PHASE_COUNT.allTicked,
+  [PHASE_STATE.open]: '',
+}
+
+/** The count cell of a phase row at the right edge; the current phase is bold yellow. */
+const phaseCountCell = (phase: PhaseProgress, current: boolean): string => {
+  const state = phaseStateOf(phase)
+  const hasCount = state === PHASE_STATE.open || state === PHASE_STATE.all
+  const cell = countCell(PHASE_MARK[state], hasCount ? countText(phase.done, phase.total) : BLANK_COUNT)
+  return current ? paint.bold(paint.yellow(cell)) : PHASE_PAINT[state](cell)
+}
+
+const agentLabel = (agent: string | null): string => {
+  if (agent === null) return paint.dim(statusWord(agent))
+  return isAgentStatus(agent) ? AGENT_PAINT[agent](statusWord(agent)) : statusWord(agent)
+}
+
+/** The symbol of a status padded to `SYMBOL_WIDTH` cells, so the names after it start in one column. */
+const symbolCell = (agent: string | null): string => {
+  const symbol = statusSymbol(agent)
+  return padVisible(agent === null ? paint.dim(symbol) : symbol, SYMBOL_WIDTH)
+}
+
+const aheadLabel = ({ branch, ahead }: LaneStatus): string => {
+  if (ahead === null) return branch ? paint.dim('↑?') : ''
+  return ahead > 0 ? paint.cyan(`↑${ahead}`) : ''
+}
+
+const gitLabel = (status: LaneStatus): string =>
+  [
+    status.branch ? paint.dim(`${BRANCH_MARK} ${status.branch}`) : paint.dim(TEXTS.noWorktree),
+    aheadLabel(status),
+    status.dirty ? paint.magenta(`±${status.dirty}`) : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+const textFrame = (lines: string[]): Frame => ({ lines, cursorLine: -1, targets: [] })
+
+/** Stacks frames, moving each one's cursor line and click targets below the frames before it. */
+const joinFrames = (frames: Frame[]): Frame =>
+  frames.reduce<Frame>((joined, frame) => {
+    const offset = joined.lines.length
+    return {
+      lines: [...joined.lines, ...frame.lines],
+      cursorLine: frame.cursorLine === -1 ? joined.cursorLine : offset + frame.cursorLine,
+      targets: [...joined.targets, ...frame.targets.map((target) => ({ ...target, line: offset + target.line }))],
+    }
+  }, textFrame([]))
+
+/** The context of the children of a node: the pane minus the tree lines in front of them. */
+const deeper = <Context extends Pick<LaneContext, 'width'>>(context: Context): Context => ({
+  ...context,
+  width: Math.max(context.width - TREE_GUTTER, 1),
+})
+
+/**
+ * A frame moved right by a prefix of `TREE_GUTTER` cells: a click target starting at the left edge keeps it and
+ * takes the prefix in.
+ */
+const prefixed = (frame: Frame, first: string, rest: string): Frame => ({
+  lines: frame.lines.map((line, index) => {
+    const lead = index === 0 ? first : rest
+    return line === '' ? paint.dim(lead.trimEnd()) : `${paint.dim(lead)}${line}`
+  }),
+  cursorLine: frame.cursorLine,
+  targets: frame.targets.map((target) => ({
+    ...target,
+    from: target.from === 0 ? 0 : target.from + TREE_GUTTER,
+    to: target.to + TREE_GUTTER,
+  })),
+})
+
+const branches = (children: Frame[]): Frame[] => {
+  const present = children.filter((child) => child.lines.length > 0)
+  return present.map((child, index) => {
+    const last = index === present.length - 1
+    return prefixed(child, last ? TREE.last : TREE.branch, last ? TREE.gap : TREE.pipe)
+  })
+}
+
+/**
+ * The children of a node as a tree: each child's first line behind a branch, the last behind the closing one, the
+ * lines of a child after its first beside the trunk. The caller has drawn the children `TREE_GUTTER` narrower
+ * (`deeper`); a child without lines leaves no branch.
+ */
+const nest = (children: Frame[]): Frame => joinFrames(branches(children))
+
+/** `nest` with a bare trunk line before every child, to set the children of the lane apart. */
+const nestSpaced = (children: Frame[]): Frame =>
+  joinFrames(branches(children).flatMap((child) => [textFrame([paint.dim(TREE.trunk)]), child]))
+
+/**
+ * A row drawn inverse across the pane. A progress bar inside it is switched back to normal video: inverted,
+ * its filled and empty blocks would trade places with the background and the bar would be unreadable.
+ */
+const highlight = (line: string, width: number): string => {
+  const bars = line.match(BAR_SEGMENT) ?? []
+  const texts = line.split(BAR_SEGMENT).map(stripAnsi)
+  const body = texts.map((text, index) => `${text}${bars[index] ? `${bars[index]}${INVERSE_ON}` : ''}`).join('')
+  return `${INVERSE_ON}${body}${' '.repeat(Math.max(width - visibleLength(line), 0))}${RESET}`
+}
+
+/** A selectable row: drawn inverse when selected, clickable across the pane on every line, `below` follows unselectable. */
+const rowFrame = (
+  key: string,
+  rows: string[],
+  below: string[],
+  { state, width }: Pick<LaneContext, 'state' | 'width'>,
+): Frame => {
+  const selected = state.selected === key
+  return {
+    lines: [...(selected ? rows.map((row) => highlight(row, width)) : rows), ...below],
+    cursorLine: selected ? 0 : -1,
+    targets: rows.map((_, line) => ({ line, from: 0, to: width, key })),
+  }
+}
+
+/** `text` wrapped beside a one-cell `mark`, each line in `style`; follow-up lines indent under the text. */
+const markedLines = (text: string, mark: string, style: (line: string) => string, width: number): string[] =>
+  wrap(plain(text), Math.max(width - 2, 1)).map((line, index) => `${index > 0 ? ' ' : mark} ${style(line)}`)
+
+/** The mark and the text style of a task: a ticked one green and dim, the one being worked on yellow and bold. */
+const taskLook = ({ done }: ChecklistItem, active: boolean): { mark: string; style: (line: string) => string } => {
+  if (active) return { mark: paint.yellow(ACTIVE_MARK), style: paint.bold }
+  return done ? { mark: paint.green('☑'), style: paint.dim } : { mark: '☐', style: (line) => line }
+}
+
+/** A closed task as one row, cut at the pane's edge with `…`. */
+const closedTaskRow = (item: ChecklistItem, active: boolean, width: number): string[] => {
+  const { mark, style } = taskLook(item, active)
+  return [fit(`${mark} ${style(plain(item.text))}`, width)]
+}
+
+/** An open task as rows: its whole text wrapped. */
+const openTaskRows = (item: ChecklistItem, active: boolean, width: number): string[] => {
+  const { mark, style } = taskLook(item, active)
+  return markedLines(item.text, mark, style, width)
+}
+
+/** A task as a selectable row under its `key`: clickable across every line it takes, the cursor on its first. */
+const taskFrame = (key: string, rows: string[], context: Pick<LaneContext, 'state' | 'width'>): Frame =>
+  rowFrame(key, rows, [], context)
+
+/** A checkbox moved to another phase, dim: `→ P9 <text>`. */
+const deferredRow = ({ text, target }: DeferredItem, width: number): string =>
+  fit(paint.dim(`${DEFERRED_MARK} ${PHASE_ID_PREFIX}${target} ${plain(text)}`), width)
+
+const tickedSummaryFrame = (count: number, phaseRowKey: string, width: number): Frame => ({
+  lines: [fit(paint.dim(`${chevronOf(false)} ${TEXTS.tickedSummary(count)}`), width)],
+  cursorLine: -1,
+  targets: [{ line: 0, from: 0, to: width, key: tickedKey(phaseRowKey) }],
+})
+
+/**
+ * The children of an open phase, one frame per task: open ones first, `active` marked among them, then the ones
+ * deferred to another phase, then the ticked ones listed or summed up.
+ */
+const phaseChildren = (
+  context: StepContext,
+  phaseRowKey: string,
+  phase: PhaseProgress,
+  active: ChecklistItem | null,
+): Frame[] => {
+  const { state, width } = context
+  if (phase.items.length === 0 && !phase.deferred) return [textFrame([paint.dim(TEXTS.noCheckboxes)])]
+  const frameOf = (item: ChecklistItem, index: number): Frame => {
+    const key = itemKey(phaseRowKey, index)
+    const isActive = item === active
+    const rows = state.expanded.has(key) ? openTaskRows(item, isActive, width) : closedTaskRow(item, isActive, width)
+    return taskFrame(key, rows, context)
+  }
+  const framesWhere = (done: boolean): Frame[] =>
+    phase.items.flatMap((item, index) => (item.done === done ? [frameOf(item, index)] : []))
+  const tickedCount = phase.items.filter((item) => item.done).length
+  const summary = tickedCount > 0 ? [tickedSummaryFrame(tickedCount, phaseRowKey, width)] : []
+  const deferred = (phase.deferred ?? []).map((item) => textFrame([deferredRow(item, width)]))
+  return [...framesWhere(false), ...deferred, ...(state.showDone ? framesWhere(true) : summary)]
+}
+
+/** A head in fixed columns with `text` wrapped beside it; follow-up lines indent to where the text starts. */
+const besideHead = (
+  head: string,
+  text: string,
+  width: number,
+  style: (line: string, index: number) => string = (line) => line,
+): string[] => {
+  const indent = ' '.repeat(visibleLength(head))
+  return wrap(text, Math.max(width - visibleLength(head), MIN_TITLE_WIDTH)).map((line, index) =>
+    fit(`${index === 0 ? head : indent}${style(line, index)}`, width),
+  )
+}
+
+/**
+ * `head`, then `text` wrapped beside it with `right` at the end of the first line; follow-up lines hang under
+ * the text. `style` is applied to the wrapped text lines.
+ */
+export const rowWithCount = (
+  head: string,
+  text: string,
+  right: string,
+  width: number,
+  style: (line: string) => string = (line) => line,
+): string[] => {
+  const headWidth = visibleLength(head)
+  const rightWidth = visibleLength(right)
+  const lines = wrap(text, Math.max(width - headWidth - rightWidth - 1, MIN_TITLE_WIDTH))
+  return lines.map((line, index) =>
+    index === 0
+      ? fit(`${head}${right ? padVisible(style(line), width - headWidth - rightWidth) : style(line)}${right}`, width)
+      : fit(`${' '.repeat(headWidth)}${style(line)}`, width),
+  )
+}
+
+/** ` ticked, not merged` in yellow behind a phase the lane ticked to the end in its worktree only; empty otherwise. Only the current phase carries it, the others fold into the ticked line. */
+const unmergedMark = (phase: PhaseProgress): string =>
+  isTickedUnmerged(phase) ? ` ${paint.yellow(TEXTS.tickedUnmerged)}` : ''
+
+/** The phase title cut before the count, which stays at the right edge, or the note that the plan lacks the phase. */
+const phaseRow = (phase: PhaseProgress, open: boolean, current: boolean, width: number): string => {
+  const title = phase.title === null ? paint.dim(TEXTS.notInPlan) : plain(phase.title)
+  const head = `${paint.dim(chevronOf(open))} P${phase.id} ${title}${current ? unmergedMark(phase) : ''}`
+  return spread(head, phaseCountCell(phase, current), width)
+}
+
+/** A closed phase shows only `active` under it, when given, closed whatever the task's fold. */
+const activeTaskFrame = (
+  context: StepContext,
+  phaseRowKey: string,
+  phase: PhaseProgress,
+  active: ChecklistItem | null,
+): Frame => {
+  if (!active) return textFrame([])
+  const key = itemKey(phaseRowKey, phase.items.indexOf(active))
+  return taskFrame(key, closedTaskRow(active, true, context.width), context)
+}
+
+/** One phase as a node, with its tasks below it when expanded, or its active task when it is the current one. */
+const phaseFrame = (context: StepContext, phase: PhaseProgress): Frame => {
+  const { progress, state, stepIndex, width } = context
+  const key = phaseKey(progress.lane.name, stepIndex, phase.id)
+  const open = state.expanded.has(key)
+  const current = isCurrent(progress, stepIndex, phase)
+  const inner = deeper(context)
+  const active = current ? activeItem(phase) : null
+  const children = open ? phaseChildren(inner, key, phase, active) : [activeTaskFrame(inner, key, phase, active)]
+  return joinFrames([rowFrame(key, [phaseRow(phase, open, current, width)], [], context), nest(children)])
+}
+
+/** True when number, checks and the badges leave room for a title beside them on one line. */
+const fitsBeside = (head: string, cells: BadgeCell[], width: number): boolean =>
+  visibleLength(head) + packedWidth(cells) + COLUMN_SEPARATOR.length + MIN_TITLE_WIDTH <= width
+
+/**
+ * `⟦↗ #<number>⟧  ✓ checks  ⟦🌐 preview⟧ ⟦💬 3 new⟧  title`: the number as a badge and the check state in fixed
+ * columns, the watcher's badges after them and the title last, cut with `…` on its one line. When the badges leave no
+ * room for a title, they go on lines of their own below, starting in the column of the lane's status symbol (D96).
+ */
+const pullRequestFrame = (pullRequest: PullRequest, context: LaneContext): Frame => {
+  const number = padVisible(badge(pullRequest.url, `↗ #${pullRequest.number}`), PULL_REQUEST_BADGE_WIDTH)
+  const checks = padVisible(CHECKS_PAINT[pullRequest.checks](TEXTS.checks[pullRequest.checks]), CHECKS_WIDTH)
+  const head = `${PULL_REQUEST_INDENT}${number}${COLUMN_SEPARATOR}${checks}`
+  const prefix = pullRequest.draft ? TEXTS.draft : ''
+  const dimPrefix = (line: string, index: number) =>
+    index === 0 && prefix ? `${paint.dim(prefix)}${line.slice(prefix.length)}` : line
+  const cells = badgeCells(pullRequest, context.badges[String(pullRequest.number)], context.badgeTexts)
+  const key = pullRequestKey(pullRequest.number)
+  if (cells.length === 0 || !fitsBeside(head, cells, context.width))
+    return joinFrames([
+      rowFrame(key, besideHead(head, `${prefix}${pullRequest.title}`, context.width, dimPrefix), [], context),
+      packedFrame(cells, PULL_REQUEST_INDENT, context.width),
+    ])
+  const beside = `${head}${cells.map(({ cell }) => cell).join(CHIP_GAP)}${COLUMN_SEPARATOR}`
+  const row = rowFrame(
+    key,
+    [fit(`${beside}${dimPrefix(`${prefix}${pullRequest.title}`, 0)}`, context.width)],
+    [],
+    context,
+  )
+  return { ...row, targets: [...cellTargets(cells, 0, visibleLength(head), context.width), ...row.targets] }
+}
+
+const CONTEXT_PAINT: Record<ContextLevel, (text: string) => string> = {
+  [CONTEXT_LEVEL.ok]: paint.dim,
+  [CONTEXT_LEVEL.warn]: paint.yellow,
+  [CONTEXT_LEVEL.alert]: paint.red,
+}
+
+/** `62 %` in the colour of its level, right-aligned in a fixed cell; empty when the lane has no reading. */
+const contextCell = (context: ContextReading | null | undefined): string =>
+  context
+    ? `${CONTEXT_SYMBOL}${CONTEXT_PAINT[context.level](contextLabel(context.share).padStart(CONTEXT_WIDTH))} ${paint.dim(COLUMN_RULE)} `
+    : ''
+
+/** Bar and count in a fixed-width column, so every bar on screen starts in the same column. */
+const progressColumn = (done: number, total: number): string =>
+  `${bar(done, total)} ${countCell(PROGRESS_SYMBOL, countText(done, total))}`
+
+/** Steps on the same plan share one group, wherever they stand in the lane, so a plan is headed once. */
+const groupSteps = (steps: readonly StepProgress[]): number[][] =>
+  steps.reduce<number[][]>((groups, { step }, index) => {
+    const same =
+      step.planHref === null ? undefined : groups.find((group) => steps[group[0]].step.planHref === step.planHref)
+    if (same) same.push(index)
+    else groups.push([index])
+    return groups
+  }, [])
+
+const isTicked = ({ phase }: PhaseEntry): boolean => phase.total > 0 && phase.done === phase.total
+
+/** A ticked phase folds into the ticked line, unless it is the current one: that one stays a row of its own. */
+const foldsAway = (progress: LaneProgress, entry: PhaseEntry): boolean =>
+  isTicked(entry) && !isCurrent(progress, entry.stepIndex, entry.phase)
+
+const tickedLine = (entries: PhaseEntry[]): string[] =>
+  entries.length === 0
+    ? []
+    : [`${paint.green('✓')} ${paint.dim(`${entries.map(({ phase }) => `P${phase.id}`).join(' ')} ${TEXTS.ticked}`)}`]
+
+const CHIP_GAP = ' '
+const CHIP_MARK = '📎 '
+
+/** `✦ label` as a badge linked to the chip's address, `private` faint after it for a link its plan says is private. */
+const chipCell = ({ url, icon, label, private: hidden }: LinkChip): string =>
+  badge(url, `${icon} ${plain(label)}`, hidden ? TEXTS.privateLink : '')
+
+/** A badge and the key a click on it opens. */
+type BadgeCell = { cell: string; key: string }
+
+const packedWidth = (cells: BadgeCell[]): number =>
+  cells.reduce((sum, { cell }, index) => sum + visibleLength(cell) + (index > 0 ? CHIP_GAP.length : 0), 0)
+
+/** One click target per badge of a line, from `column` on, each over exactly the columns it covers up to `edge`. */
+const cellTargets = (cells: BadgeCell[], line: number, column: number, edge: number): ClickTarget[] => {
+  let from = column
+  return cells.map(({ cell, key }) => {
+    const target = { line, from, to: Math.min(from + visibleLength(cell), edge), key }
+    from += visibleLength(cell) + CHIP_GAP.length
+    return target
+  })
+}
+
+/**
+ * Badges packed into lines behind `lead` on the first one and its width of blanks on the others; a badge wider than
+ * the pane is cut, never wrapped. Each badge is a click target over exactly the columns it covers.
+ */
+const packedFrame = (cells: BadgeCell[], lead: string, width: number): Frame => {
+  const indent = visibleLength(lead)
+  const room = Math.max(width - indent, MIN_TITLE_WIDTH)
+  const groups = packGroups(
+    cells.map(({ cell }) => cell),
+    room,
+    CHIP_GAP,
+  )
+  const lineCells = groups.map((group, line) => {
+    const first = groups.slice(0, line).reduce((count, each) => count + each.length, 0)
+    return cells.slice(first, first + group.length)
+  })
+  const lines = groups.map(
+    (group, line) => `${line === 0 ? lead : ' '.repeat(indent)}${fit(group.join(CHIP_GAP), room)}`,
+  )
+  const targets = lineCells.flatMap((group, line) => cellTargets(group, line, indent, indent + room))
+  return { lines, cursorLine: -1, targets }
+}
+
+/** The chips of a plan behind a 📎, then a blank line before the phases. */
+const chipFrame = (chips: LinkChip[], width: number): Frame => {
+  const frame = packedFrame(
+    chips.map((chip) => ({ cell: chipCell(chip), key: chipKey(chip.url) })),
+    CHIP_MARK,
+    width,
+  )
+  return frame.lines.length > 0 ? { ...frame, lines: [...frame.lines, ''] } : frame
+}
+
+/**
+ * `🌐 preview` opening the preview, `💬 <n> new` in amber opening the pull request, and `✋ changes requested` in dark
+ * red opening it too, each only when there is one (D96).
+ */
+const badgeCells = (
+  pullRequest: PullRequest,
+  badges: PullRequestBadges | undefined,
+  texts: BadgeTexts,
+): BadgeCell[] => {
+  if (!badges) return []
+  const onPullRequest = (text: string, tone: BadgeTone) => ({
+    cell: badge(pullRequest.url, text, '', tone),
+    key: chipKey(pullRequest.url),
+  })
+  return [
+    ...(badges.preview ? [{ cell: badge(badges.preview, texts.preview), key: chipKey(badges.preview) }] : []),
+    ...(badges.feedback > 0 ? [onPullRequest(texts.feedback(badges.feedback), BADGE_TONE.amber)] : []),
+    ...(badges.changesRequested ? [onPullRequest(texts.changesRequested, BADGE_TONE.red)] : []),
+  ]
+}
+
+const planHeading = (title: string, width: number): string[] => wrap(plain(title), width).map(paint.bold)
+
+/**
+ * A plan as a node: its title in bold, and below it the links, the open phases, and the ticked ones summed up in
+ * one line unless `showDone` lists them.
+ */
+const planBlock = (context: LaneContext, stepIndexes: number[], entries: PhaseEntry[]): Frame => {
+  const { progress, state, width, chips } = context
+  const { planTitle, planHref } = progress.steps[stepIndexes[0]].step
+  const shown = state.showDone ? entries : entries.filter((entry) => !foldsAway(progress, entry))
+  const ticked = state.showDone ? [] : entries.filter((entry) => foldsAway(progress, entry))
+  const inner = deeper(context)
+  return joinFrames([
+    textFrame(planHeading(planTitle, width)),
+    nest([
+      chipFrame(planHref ? (chips[planHref] ?? []) : [], inner.width),
+      ...shown.map(({ stepIndex, phase }) => phaseFrame({ ...inner, stepIndex }, phase)),
+      textFrame(tickedLine(ticked)),
+    ]),
+  ])
+}
+
+/**
+ * The summary line of a lane's notes is a row of its own, clickable like the key `n`; shown, the notes follow it
+ * unselectable.
+ */
+const noteFrame = (context: LaneContext, steps: PlanStep[]): Frame => {
+  if (steps.length === 0) return textFrame([])
+  const { progress, state, width } = context
+  const lane = progress.lane.name
+  const shown = state.notesShown.has(lane)
+  const summary = paint.dim(
+    `${chevronOf(shown)} ${shown ? TEXTS.notesShown(steps.length) : TEXTS.notesHidden(steps.length)}`,
+  )
+  const notes = shown
+    ? steps.flatMap((step) => [...planHeading(step.planTitle, width), ...wrap(plain(step.label), width).map(paint.dim)])
+    : []
+  return rowFrame(notesKey(lane), [fit(summary, width)], notes, context)
+}
+
+/** The columns lane lines share, so names, statuses and bars of all of them line up. */
+const STATUS_WIDTH = Math.max(...[...Object.values(AGENT_STATUS), NO_AGENT_WORD].map(textWidth))
+
+/** `P9 Freigabe 0.x` for the current phase of a lane, marked when ticked and not merged; empty when there is none. */
+const nextPhaseLabel = ({ progress }: LaneView): string => {
+  const phase = currentPhase(progress)
+  return phase ? `P${phase.id}${phase.title ? ` ${plain(phase.title)}` : ''}${unmergedMark(phase)}` : ''
+}
+
+const markTone = ({ feedback, changesRequested }: PullRequestBadges): BadgeTone => {
+  if (changesRequested) return BADGE_TONE.red
+  return feedback > 0 ? BADGE_TONE.amber : BADGE_TONE.grey
+}
+
+/**
+ * `↗ #<n>` as a badge linked to the pull request, with `💬 <n>` while it has feedback since its last push and `✋`
+ * while changes are requested; dark red then, else amber with feedback, else grey.
+ */
+const pullRequestMark = (pullRequest: PullRequest, badges: WatchBadges): string => {
+  const found = badges[String(pullRequest.number)] ?? NO_BADGES
+  const feedback = found.feedback > 0 ? ` 💬 ${found.feedback}` : ''
+  const text = `↗ #${pullRequest.number}${feedback}${found.changesRequested ? ' ✋' : ''}`
+  return badge(pullRequest.url, text, '', markTone(found))
+}
+
+const pullRequestMarks = ({ pullRequests, badges }: LaneView): string =>
+  pullRequests.map((pullRequest) => pullRequestMark(pullRequest, badges ?? {})).join(' ')
+
+/** What follows the status on a lane line: git state while the lane is open, the next phase when folded. */
+const laneDetail = (view: LaneView, open: boolean): string => {
+  const markText = laneMarkText(view)
+  const marker = markText ? paint.yellow(markText) : ''
+  return [marker, open ? gitLabel(view.status) : nextPhaseLabel(view)].filter(Boolean).join(' ')
+}
+
+/**
+ * The lane line, `head` and `right` (bar and count) at the edges. The detail (next phase, branch, pull
+ * requests) follows `head` when at least `MIN_BESIDE_WIDTH` characters are left for it; in a narrower pane
+ * it moves to a line of its own below, indented under the name and cut to the full width.
+ */
+export const withDetail = (head: string, detail: string, right: string, width: number): string[] => {
+  if (!detail) return [spread(head, right, width)]
+  const room = width - visibleLength(head) - COLUMN_SEPARATOR.length - visibleLength(right) - 1
+  if (room >= MIN_BESIDE_WIDTH) return [spread(`${head}${COLUMN_SEPARATOR}${detail}`, right, width)]
+  return [spread(head, right, width), fit(`${CONTENT_INDENT}${detail}`, width)]
+}
+
+/** Context and bar at the right edge of a lane line, as wide as the lane has them. */
+const laneRight = (view: LaneView): string => {
+  const counts = view.progress.total > 0 ? progressColumn(view.progress.done, view.progress.total) : ''
+  return counts ? `${contextCell(view.context)}${counts}` : contextCell(view.context).trimEnd()
+}
+
+/** A folded lane's pull request badges in the column of `columns.marks`, right before context and bar (D96). */
+const markedRight = (view: LaneView, columns: LaneColumns): string => {
+  const right = laneRight(view)
+  const marks = pullRequestMarks(view)
+  if (!marks) return right
+  if (columns.right === 0) return padVisible(marks, columns.marks)
+  const pad = ' '.repeat(Math.max(columns.right - visibleLength(right), 0))
+  return `${padVisible(marks, columns.marks)}${COLUMN_SEPARATOR}${pad}${right}`
+}
+
+const laneLines = (view: LaneView, open: boolean, width: number, columns: LaneColumns): string[] => {
+  const { progress, status } = view
+  const cells = [
+    padVisible(paint.bold(fit(progress.lane.name, columns.name)), columns.name),
+    padVisible(agentLabel(status.agent), STATUS_WIDTH),
+  ].join(COLUMN_SEPARATOR)
+  const head = `${paint.dim(chevronOf(open))} ${symbolCell(status.agent)} ${cells}`
+  const right = open ? laneRight(view) : markedRight(view, columns)
+  return withDetail(head, laneDetail(view, open), right, width)
+}
+
+/** The lane line is a row of its own; an open lane continues with its pull requests and plans. */
+const laneBlock = (
+  view: LaneView,
+  state: Selection,
+  width: number,
+  columns: LaneColumns,
+  badgeTexts: BadgeTexts,
+): Frame => {
+  const context = { progress: view.progress, state, width, chips: view.chips, badges: view.badges ?? {}, badgeTexts }
+  const open = isLaneOpen(state, view.progress.lane.name, view.status.agent)
+  const row = rowFrame(laneKey(view.progress.lane.name), laneLines(view, open, width, columns), [], context)
+  if (!open) return row
+  const groups = groupSteps(view.progress.steps).map((stepIndexes) => ({
+    stepIndexes,
+    entries: stepIndexes.flatMap((stepIndex) =>
+      view.progress.steps[stepIndex].phases.map((phase) => ({ stepIndex, phase })),
+    ),
+  }))
+  const planned = groups.filter(({ entries }) => entries.length > 0)
+  const notes = groups
+    .filter(({ entries }) => entries.length === 0)
+    .map(({ stepIndexes }) => view.progress.steps[stepIndexes[0]].step)
+  const inner = deeper(context)
+  const content = nestSpaced([
+    ...planned.map(({ stepIndexes, entries }) => planBlock(inner, stepIndexes, entries)),
+    noteFrame(inner, notes),
+    followingFrame(view, state, inner.width),
+  ])
+  return joinFrames([row, ...view.pullRequests.map((pullRequest) => pullRequestFrame(pullRequest, context)), content])
+}
+
+/** A closed lane, or one with no agent and no open pull request, has nothing to act on; it is listed in the closing block. */
+const isParked = ({ progress, status, pullRequests }: LaneView): boolean =>
+  progress.lane.closed || (status.agent === null && pullRequests.length === 0)
+
+const parkedItem = ({ progress }: LaneView): string => {
+  const { name, steps } = progress.lane
+  const hasPlan = steps.some((step) => step.planHref)
+  const label =
+    progress.total > 0 ? `${name} ${progress.done}/${progress.total}` : hasPlan ? name : `${name} (${TEXTS.noPlan})`
+  return label.replaceAll(' ', NON_BREAKING_SPACE)
+}
+
+/** `· no agent (6)  name 3/9 · other 1/4`: one wrapping block for every parked lane, each with its progress. */
+const parkedBlock = (lanes: LaneView[], width: number): string[] => {
+  if (lanes.length === 0) return []
+  const head = `${paint.dim(NO_AGENT_SYMBOL)} ${paint.dim(`${TEXTS.noAgent} (${lanes.length})`)}  `
+  const items = lanes.map((lane, index) => {
+    const item = parkedItem(lane)
+    return index < lanes.length - 1 ? `${item}${NON_BREAKING_SPACE}${ITEM_SEPARATOR}` : item
+  })
+  return besideHead(head, items.join(' '), width, (line) => paint.dim(line.replaceAll(NON_BREAKING_SPACE, ' ')))
+}
+
+/**
+ * The closing row for the phases no lane works on, dimmed and closed unless its key is expanded. Opened, it
+ * lists each plan with its open phases and their checkboxes, and no checkbox itself.
+ */
+const plannedFrame = (planned: PlannedPlan[], state: Selection, width: number): Frame => {
+  if (planned.length === 0) return textFrame([])
+  const phases = plannedPhaseCount(planned)
+  const open = state.expanded.has(PLANNED_KEY)
+  const head = [paint.dim(fit(`${chevronOf(open)} ${TEXTS.planned(phases, planned.length)}`, width))]
+  return rowFrame(PLANNED_KEY, head, open ? plannedRows(planned, width, CONTENT_INDENT).flat() : [], { state, width })
+}
+
+/** A dimmed row per plan, one list of lines each: its title and open phases at the left, its open checkbox count at the right. */
+const plannedRows = (planned: PlannedPlan[], width: number, indent: string): string[][] =>
+  planned.map((plan) =>
+    rowWithCount(
+      indent,
+      `${plain(plan.title)} · ${phaseList(plan)}`,
+      countCell('', countText(plan.done, plan.total)),
+      width,
+      paint.dim,
+    ),
+  )
+
+/** The plan title up to its subtitle: `Agent-Kit: Skills, Agenten und …` is `Agent-Kit`. */
+const planName = (title: string): string => plain(title.split(':')[0]).trim()
+
+/** The node under an open lane for the phases after its own: closed, `▸ also open: P7 P8`; opened, one child per plan. */
+const followingFrame = (view: LaneView, state: Selection, width: number): Frame => {
+  const following = view.following ?? []
+  if (following.length === 0) return textFrame([])
+  const key = followingKey(view.progress.lane.name)
+  const open = state.expanded.has(key)
+  const label = TEXTS.following(following.map((plan) => `${planName(plan.title)}: ${phaseList(plan)}`).join(' · '))
+  const head = [paint.dim(fit(`${chevronOf(open)} ${label}`, width))]
+  const plans = open ? plannedRows(following, deeper({ width }).width, '').map(textFrame) : []
+  return joinFrames([rowFrame(key, head, [], { state, width }), nest(plans)])
+}
+
+const rule = (width: number): string => paint.dim(RULE.repeat(width))
+
+/** A dimmed rule before every lane block but the first, folded or open: it shows where one lane ends. */
+const separate = (blocks: Frame[], width: number): Frame[] =>
+  blocks.flatMap((frame, index) => (index === 0 ? [frame] : [textFrame([rule(width)]), frame]))
+
+/**
+ * Why badges may be missing, said beside the clock: no watcher runs, or its state is stale. Nothing while it is live,
+ * or when no lane on screen has a pull request a badge could belong to.
+ */
+const watchNotice = (lanes: LaneView[], watch: WatchHealth | undefined, texts: BadgeTexts): string => {
+  if (!watch || watch.kind === WATCH_HEALTH.live) return ''
+  if (!lanes.some(({ pullRequests }) => pullRequests.length > 0)) return ''
+  return watch.kind === WATCH_HEALTH.off ? texts.watcherOff : texts.stale(watch.minutes)
+}
+
+const laneColumnsOf = (lanes: LaneView[]): LaneColumns => ({
+  name: Math.min(Math.max(0, ...lanes.map(({ progress }) => textWidth(progress.lane.name))), NAME_WIDTH_MAX),
+  marks: Math.max(0, ...lanes.map((lane) => visibleLength(pullRequestMarks(lane)))),
+  right: Math.max(0, ...lanes.map((lane) => visibleLength(laneRight(lane)))),
+})
+
+/**
+ * Title and clock on top, the key hint at the bottom (with the legend after `?`), and in between one
+ * block per lane: the lane line with its total bar, and for an open lane the phase rows. Folded lanes are
+ * one line each, every lane block after the first is preceded by a dimmed rule, and lanes without an
+ * agent share the closing block.
+ */
+export const renderScreen = (
+  { title, time, lanes, planned, watch, language = PLAN_LANGUAGE.en }: OverviewView,
+  state: Selection,
+  width: number,
+): Screen => {
+  const active = lanes.filter((lane) => !isParked(lane))
+  const parked = parkedBlock(lanes.filter(isParked), width)
+  const columns = laneColumnsOf(active)
+  const badgeTexts = BADGE_TEXTS[language]
+  const blocks = active.map((lane) => laneBlock(lane, state, width, columns, badgeTexts))
+  const notice = watchNotice(active, watch, badgeTexts)
+  const clock = notice ? `${paint.yellow(notice)}${COLUMN_SEPARATOR}${paint.dim(time)}` : paint.dim(time)
+  return {
+    header: [spread(paint.bold(title), clock, width), rule(width)],
+    body: joinFrames([
+      ...separate(blocks, width),
+      ...(parked.length > 0 ? [textFrame([rule(width), ...parked])] : []),
+      ...(planned.length > 0 ? [textFrame([rule(width)]), plannedFrame(planned, state, width)] : []),
+    ]),
+    footer: [
+      rule(width),
+      fit(paint.dim(TEXTS.hint), width),
+      ...(state.showLegend ? TEXTS.legend.flatMap((line) => wrap(line, width)).map(paint.dim) : []),
+    ],
+  }
+}
+
+/**
+ * `renderScreen` with the selection resolved against what is drawn: when the selected row is not on
+ * screen (its phase got ticked and hidden, or left the sprint), the first drawn row is selected.
+ */
+export const renderSelected = (overview: OverviewView, selection: Selection, width: number): Screen => {
+  const first = renderScreen(overview, selection, width)
+  const selected = selectedKey(selection, targetKeys(first.body.targets))
+  return selected === selection.selected ? first : renderScreen(overview, { ...selection, selected }, width)
+}