@joshuafolkken/kit 1.1514.0 → 1.2114.0

package/scripts/run/board/run-board-render-legend.ts

@@ -1,49 +1,87 @@
 import { styleText } from 'node:util'
 import type { FiledKind } from '#scripts/run/event/run-event-filed'
+import { run_board_earlier } from './run-board-earlier'
 import { run_board_kind } from './run-board-kind'
 import { run_board_labels, type Words } from './run-board-labels'
 import type { BoardRow } from './run-board-layout'
-import type { BoardNote } from './run-board-notes'
+import { run_board_notes, type BoardNote } from './run-board-notes'
 import { run_board_phase } from './run-board-phase'
 import { run_board_render_notes } from './run-board-render-notes'
 import type { ItemState } from './run-board-status'
 
-// The legend at the foot of `run:board`: the symbols named once, so a row carries only what differs
-// between rows. Drawn apart from the rows, which tell it the icons they lead with.
+// The legend at the foot of `run:board`: the symbols the frame draws, named once, so a row carries
+// only what differs between rows. Drawn apart from the rows, which tell it the icons they draw.
+// joshuafolkken/kit#4047: each naming only what the frame draws, on one line. An icon the frame draws
+// beside its own word is not named — ⏳ under `⏳ queued`, 🙋 under `🙋 decision`, ✅ under `✅ done`
+// and 📌 on `📌 findings` — so the legend names only an icon drawn with no word beside it, what a
+// waiting row leads with among them.
 
-const { FILED_KIND_ICONS, KIND_WORDS, PHASE_ICONS, PHASE_WORDS, STATE_ICONS, WAITS_ICON, WORDS } =
-	run_board_labels
+const {
+	FILED_KIND_ICONS,
+	FILED_RUN_MARK,
+	KIND_WORDS,
+	OVERRUN_MARK,
+	PHASE_ICONS,
+	PHASE_WORDS,
+	STATE_ICONS,
+	WAITS_ICON,
+	WAIT_ICONS,
+	WAIT_WORDS,
+	WORDS,
+} = run_board_labels
 const GAP = '  '
 
-// Every phase a run passes through, in the order a run passes them and whatever is on screen: a row's phase
-// moves between redraws, so fixed lines keep each icon where the eye last found it — six to a line, so
-// the twelve fit a narrow pane.
-const PHASES_PER_LINE = 6
-const PHASE_ENTRIES = run_board_phase.PHASES.map(
-	(phase) => `${PHASE_ICONS[phase]} ${WORDS[PHASE_WORDS[phase]]}`,
-)
-const PHASE_LEGEND = Array.from(
-	{ length: Math.ceil(PHASE_ENTRIES.length / PHASES_PER_LINE) },
-	(_, line) => PHASE_ENTRIES.slice(line * PHASES_PER_LINE, (line + 1) * PHASES_PER_LINE).join(GAP),
-)
-
-// The row states the legend can name, in its order, each with its word.
-const STATE_LEGEND: ReadonlyArray<readonly [ItemState, keyof Words]> = [
-	['merged', 'merged'],
-	['parked', 'parked'],
-	['done', 'done'],
-	['withdrawn', 'withdrawn'],
-	['running', 'in_progress'],
-	['stopped', 'stopped'],
-	['waiting', 'waiting'],
-	['human', 'decision'],
+// What the frame draws, as the legend reads it.
+interface LegendDrawn {
+	// The icons the rows lead with — a running row leads with its phase, so 🔄 is named only while a
+	// row draws it.
+	leads: ReadonlySet<string>
+	// Every icon a phase may be drawn with: the rows' leads, the header's third line and the rows' ends.
+	icons: ReadonlySet<string>
+	// The activity kinds the header's third line and the rows' ends draw, where their own words do not
+	// name them (joshuafolkken/kit#3767, joshuafolkken/kit#3769).
+	named: ReadonlyArray<string>
+	// What a followup row's checks draw (joshuafolkken/kit#3770).
+	checks: ReadonlyArray<string>
+	// 🚧 and the reasons a held check is drawn with (joshuafolkken/kit#4052).
+	held: ReadonlyArray<string>
+	// A lane row leads with 🧍, its `run:solo` mark (joshuafolkken/kit#4625).
+	solo: boolean
+	// A merged row ends on 🔍, its overrun investigation running where no spinner turns
+	// (joshuafolkken/kit#4772) or its result once it ended (joshuafolkken/kit#4818).
+	overrun?: boolean | undefined
+}
+
+type LeadWords = ReadonlyArray<readonly [string, keyof Words]>
+
+function states_of(states: ReadonlyArray<readonly [ItemState, keyof Words]>): LeadWords {
+	return states.map(([state, word]) => [STATE_ICONS[state], word] as const)
+}
+
+// The row leads the legend can name, each with its word: in progress first, then the settled ones.
+const PROGRESS_STATES: LeadWords = states_of([['running', 'in_progress']])
+const SETTLED_STATES: LeadWords = [
+	...states_of([
+		['parked', 'parked'],
+		['paused', 'paused'],
+		['stopped', 'stopped'],
+	]),
+	[run_board_earlier.EARLIER_ICON, 'earlier'],
+	...states_of([
+		['unknown', 'unknown'],
+		['done', 'done'],
+		['withdrawn', 'withdrawn'],
+	]),
 ]
 
-// The states some row on screen leads with (`drawn`) — a running row leads with its phase, so 🔄 is
-// named only while a row draws it.
-function state_legend(drawn: ReadonlySet<string>): Array<string> {
-	return STATE_LEGEND.filter(([state]) => drawn.has(STATE_ICONS[state])).map(
-		([state, word]) => `${STATE_ICONS[state]} ${WORDS[word]}`,
+function state_legend(states: LeadWords, leads: ReadonlySet<string>): Array<string> {
+	return states.filter(([icon]) => leads.has(icon)).map(([icon, word]) => `${icon} ${WORDS[word]}`)
+}
+
+// The phases the frame draws, in the order a run passes them.
+function phase_legend(icons: ReadonlySet<string>): Array<string> {
+	return run_board_phase.PHASES.filter((phase) => icons.has(PHASE_ICONS[phase])).map(
+		(phase) => `${PHASE_ICONS[phase]} ${WORDS[PHASE_WORDS[phase]]}`,
 	)
 }
 
@@ -54,35 +92,84 @@ function kinds_of(rows: ReadonlyArray<BoardRow>): Array<FiledKind> {
 	return run_board_kind.KIND_ORDER.filter((kind) => drawn.has(kind))
 }
 
+// The wait icon a row draws: the one a waiting row leads with, which names its blockers itself, else
+// 🔗 where blockers follow the title of a row that waits on no condition of its own.
+function wait_icon(row: BoardRow): string | undefined {
+	return row.reason?.icon ?? (row.waits.length > 0 ? WAITS_ICON : undefined)
+}
+
+// What the waiting rows the frame draws lead with (joshuafolkken/kit#4288), in one fixed order.
 function waits_legend(rows: ReadonlyArray<BoardRow>): Array<string> {
-	return rows.some((row) => row.waits.length > 0) ? [`${WAITS_ICON} ${WORDS.waits}`] : []
+	const drawn = new Set(rows.map((row) => wait_icon(row)))
+
+	return WAIT_WORDS.filter(([icon]) => drawn.has(icon)).map(
+		([icon, word]) => `${icon} ${WORDS[word]}`,
+	)
 }
 
-// The phases on their lines and what the screen draws on one more, drawn only when it names something.
-// The header's gauges and marks read by their place, so the legend leaves them.
-// `drawn` is the icons the rows lead with; `named` the activity kinds the header's third line and the
-// rows' tails draw, each named once, where their own words do not name them (joshuafolkken/kit#3767,
-// joshuafolkken/kit#3769).
-function legend_of(
+// 🧍 is named only while a lane row draws it, and once where a waiting row leads with it too
+// (joshuafolkken/kit#4625).
+function solo_legend(rows: ReadonlyArray<BoardRow>, drawn: LegendDrawn): Array<string> {
+	if (!drawn.solo) return []
+
+	const is_named = rows.some((row) => wait_icon(row) === WAIT_ICONS.solo)
+
+	return is_named ? [] : [`${WAIT_ICONS.solo} ${WORDS.solo}`]
+}
+
+// ✚ is named only while a row the run filed draws it (joshuafolkken/kit#4099).
+function filed_legend(
 	rows: ReadonlyArray<BoardRow>,
-	drawn: ReadonlySet<string>,
 	notes: ReadonlyArray<BoardNote>,
-	named: ReadonlyArray<string> = [],
+): Array<string> {
+	const filed = run_board_notes.filed_numbers(notes)
+
+	return rows.some((row) => filed.has(row.number)) ? [`${FILED_RUN_MARK} ${WORDS.filed_run}`] : []
+}
+
+// What is in progress, then what has settled.
+function states_line(drawn: LegendDrawn): Array<string> {
+	return [
+		...state_legend(PROGRESS_STATES, drawn.leads),
+		...phase_legend(drawn.icons),
+		...new Set(drawn.named),
+		...state_legend(SETTLED_STATES, drawn.leads),
+	]
+}
+
+// The kinds, then the rest. The header's gauges and marks read by their place, so the legend leaves
+// them.
+function others_line(
+	rows: ReadonlyArray<BoardRow>,
+	drawn: LegendDrawn,
+	notes: ReadonlyArray<BoardNote>,
 ): Array<string> {
 	const kinds = kinds_of(rows)
 	const kind_icons = kinds.map((kind) => FILED_KIND_ICONS[kind])
-	const notes_named = run_board_render_notes.notes_legend(notes, new Set([...drawn, ...kind_icons]))
+	const named = new Set([...drawn.leads, ...kind_icons])
 	const kind_named = kinds.map((kind) => `${FILED_KIND_ICONS[kind]} ${WORDS[KIND_WORDS[kind]]}`)
-	const shown = [
-		...new Set(named),
-		...state_legend(drawn),
+
+	return [
 		...kind_named,
 		...waits_legend(rows),
-		...notes_named,
+		...solo_legend(rows, drawn),
+		...filed_legend(rows, notes),
+		...(drawn.overrun === true ? [`${OVERRUN_MARK} ${WORDS.overrun}`] : []),
+		...drawn.held,
+		...drawn.checks,
+		...run_board_render_notes.notes_legend(notes, named, rows),
 	]
-	const lines = shown.length === 0 ? PHASE_LEGEND : [...PHASE_LEGEND, shown.join(GAP)]
+}
+
+// One line, drawn only when it names something.
+function legend_of(
+	rows: ReadonlyArray<BoardRow>,
+	drawn: LegendDrawn,
+	notes: ReadonlyArray<BoardNote>,
+): Array<string> {
+	const entries = [...states_line(drawn), ...others_line(rows, drawn, notes)]
 
-	return lines.map((line) => styleText('dim', line))
+	return entries.length === 0 ? [] : [styleText('dim', entries.join(GAP))]
 }
 
 const run_board_render_legend = {
@@ -90,3 +177,4 @@ const run_board_render_legend = {
 }
 
 export { run_board_render_legend }
+export type { LegendDrawn }

package/scripts/run/board/run-board-render-notes.ts

@@ -1,19 +1,62 @@
+import { issue_cite } from '#scripts/issue/issue-cite'
+import { run_board_fit, type NotesPart } from './run-board-fit'
 import { run_board_kind } from './run-board-kind'
 import { run_board_labels, type Words } from './run-board-labels'
+import { run_board_layout, type BoardLayout, type BoardRow } from './run-board-layout'
 import type { BoardNote } from './run-board-notes'
+import { run_board_render_section } from './run-board-render-section'
+import { run_board_render_title } from './run-board-render-title'
 
-// The findings section at the foot of `run:board` and the part of the legend that names its symbols.
-// A finding is read to the minute, and the legend names only the kinds the section draws — the rows'
-// legend's rule — so a section of filed Issues alone is not explained with 💬 and 💤.
+// The findings section of `run:board`, under the 🙋 decision rows, and the part of the legend that
+// names its symbols. A finding is read to the minute, and the legend names only the kinds the section
+// draws — the rows' legend's rule — so a section of filed Issues alone is not explained with 💬 and 💤.
 
-const { FILED_KIND_ICONS, KIND_WORDS, NOTES_ICON, NOTE_ICONS, STATE_ICONS, WORDS, minute_of } =
-	run_board_labels
+const { FILED_KIND_ICONS, KIND_WORDS, NOTES_ICON, NOTE_ICONS, WORDS, minute_of } = run_board_labels
 const NOTE_LIMIT = 6
+const { ROW_INDENT } = run_board_render_section
+const { columns_cut } = run_board_render_title
+const { width_of } = run_board_fit
 const GAP = '  '
-const INDENT = '  '
 const NUMBER_PLACEHOLDER = '{n}'
+// An `owner/repo#N` reference written out in a text.
+const QUALIFIED_REFERENCE = /(?<![\w./-])(?<repo>[\w.-]+\/[\w.-]+)#(?<number>\d+)/gu
+// The order a full section keeps its lines in, the line a person has to act on first
+// (joshuafolkken/kit#4097).
+const RANK_ORDER = ['park', 'filed', 'note'] as const
 
 type Link = (reference: string) => string
+type Rank = (typeof RANK_ORDER)[number]
+
+// The plan the section is drawn under — none before it is read, where no legend is drawn either —, the
+// link its numbers go through, the repository the plan was read for and the pane's width where the
+// frame is kept within one.
+interface NotesView {
+	layout: BoardLayout | undefined
+	link: Link
+	repo?: string | undefined
+	columns?: number | undefined
+}
+
+interface NotesBody {
+	lines: Array<string>
+	hidden: number
+}
+
+// One line the section can draw, with what it is kept by and the icon it leads with.
+interface NoteItem {
+	rank: number
+	at_ms: number
+	line: string
+	icon: string
+}
+
+interface ItemsView {
+	listed: ReadonlySet<number>
+	has_legend: boolean
+	link: Link
+	repo: string | undefined
+	columns?: number | undefined
+}
 
 // The icons the legend can name, in its order, each with its word — a filed kind's the rows' own
 // (joshuafolkken/kit#3577), so one icon is never named with two words.
@@ -25,8 +68,6 @@ const NOTE_LEGEND: ReadonlyArray<readonly [string, keyof Words]> = [
 ]
 
 function note_icon(note: BoardNote): string {
-	if (note.is_decision) return STATE_ICONS.human
-
 	return note.filed_kind === undefined ? NOTE_ICONS[note.kind] : FILED_KIND_ICONS[note.filed_kind]
 }
 
@@ -36,42 +77,128 @@ function found_of(note: BoardNote, link: Link): string {
 	return WORDS.found_during.split(NUMBER_PLACEHOLDER).join(link(note.found_during))
 }
 
+// A reference to the board's own repository is drawn as `#N`; another repository's keeps its name.
+function unqualified(text: string, repo: string | undefined): string {
+	if (repo === undefined) return text
+
+	return text.replaceAll(QUALIFIED_REFERENCE, (whole, named: string, number: string) =>
+		named === repo ? issue_cite.plain(number) : whole,
+	)
+}
+
+function body_of(note: BoardNote, view: ItemsView): string {
+	return unqualified(note.text, view.repo)
+}
+
+function same(reference: string): string {
+	return reference
+}
+
+// A line wider than the pane keeps its head whole and ends its text on an ellipsis at the pane's edge
+// (joshuafolkken/kit#4384); the cut text's reference is left unlinked, so no hyperlink escape is cut
+// in two.
+function fitted_line(head: string, note: BoardNote, view: ItemsView): string {
+	const { columns } = view
+	const line = `${head}${body_of(note, view)}${found_of(note, view.link)}`
+
+	if (columns === undefined || width_of(line) <= columns) return line
+
+	const text = `${body_of(note, view)}${found_of(note, same)}`
+
+	return `${head}${columns_cut(text, Math.max(1, columns - width_of(head)))}`
+}
+
 // Where the legend names the symbols a note leads with its icon alone; where no legend is drawn it
-// keeps the kind's word.
-function note_text(note: BoardNote, has_legend: boolean, link: Link): string {
+// keeps the kind's word. Its icon stands in the plan rows' icon column.
+function note_text(note: BoardNote, view: ItemsView): string {
+	const { has_legend, link } = view
 	const kind = has_legend ? undefined : WORDS[note.kind]
 	const issue = note.issue === undefined ? undefined : link(note.issue)
 	const lead = [note_icon(note), minute_of(note.at_ms), issue, kind]
 		.filter((part) => part !== undefined)
 		.join(' ')
 
-	return `${INDENT}${lead}${GAP}${note.text}${found_of(note, link)}`
+	return fitted_line(`${ROW_INDENT}${lead}${GAP}`, note, view)
 }
 
-// The newest few, so the section never pushes the plan off the screen; the frame counts the rest
-// together with any it cuts to fit. Their numbers go through the board's `header.link`, so they open
-// their GitHub issue as the plan's rows do.
-function note_lines(
+function rank_index(rank: Rank): number {
+	return RANK_ORDER.indexOf(rank)
+}
+
+function note_item(note: BoardNote, view: ItemsView): NoteItem {
+	return {
+		rank: rank_index(note.kind),
+		at_ms: note.at_ms,
+		line: note_text(note, view),
+		icon: note_icon(note),
+	}
+}
+
+// A filed Issue the plan draws a row for (`listed`, the rows' numbers) would name its title twice, so
+// its row leads the title with ✚ instead (joshuafolkken/kit#4099).
+function is_listed(note: BoardNote, listed: ReadonlySet<number>): boolean {
+	return note.kind === 'filed' && listed.has(Number(note.issue))
+}
+
+function listed_of(rows: ReadonlyArray<BoardRow>): Set<number> {
+	return new Set(rows.map((row) => row.number))
+}
+
+function rest_of(notes: ReadonlyArray<BoardNote>, listed: ReadonlySet<number>): Array<BoardNote> {
+	return notes.filter((note) => !is_listed(note, listed))
+}
+
+function by_rank(left: NoteItem, right: NoteItem): number {
+	return left.rank - right.rank || right.at_ms - left.at_ms
+}
+
+// Every line the section can draw, in the order it keeps them: by rank, then newest first.
+function items_of(notes: ReadonlyArray<BoardNote>, view: ItemsView): Array<NoteItem> {
+	return rest_of(notes, view.listed)
+		.map((note) => note_item(note, view))
+		.toSorted(by_rank)
+}
+
+// The first few by rank, so the section never pushes the plan off the screen, and how many more there
+// are; the frame counts the rest together with any it cuts to fit, from the bottom, so the lowest rank
+// gives way first. Their numbers go through the board's
+// `header.link`, so they open their GitHub issue as the plan's rows do.
+function note_lines(notes: ReadonlyArray<BoardNote>, view: NotesView): NotesBody {
+	const { layout, link, repo, columns } = view
+	const has_legend = layout !== undefined
+	const listed = listed_of(has_legend ? run_board_layout.rows_of(layout) : [])
+	const items = items_of(notes, { listed, has_legend, link, repo, columns })
+	const lines = items.slice(0, NOTE_LIMIT).map((item) => item.line)
+
+	return { lines, hidden: items.length - lines.length }
+}
+
+// The findings under a rule, led by 📌 where a legend names it and by its word where none does, and how
+// many more there are, so the section never pushes the plan off the screen.
+function notes_part(notes: ReadonlyArray<BoardNote>, view: NotesView): NotesPart {
+	const body = note_lines(notes, view)
+	const label = view.layout === undefined ? WORDS.notes : `${NOTES_ICON} ${WORDS.notes}`
+
+	return { head: run_board_render_section.heading_lines(label), label, ...body }
+}
+
+// Each kind a drawn line leads with — one the rows' legend already names (`named`) is not named twice.
+// 📌 is left to the section's own `📌 findings` heading.
+function notes_legend(
 	notes: ReadonlyArray<BoardNote>,
-	has_legend: boolean,
-	link: Link,
+	named: ReadonlySet<string>,
+	rows: ReadonlyArray<BoardRow>,
 ): Array<string> {
-	return notes.slice(0, NOTE_LIMIT).map((note) => note_text(note, has_legend, link))
-}
+	const view = { listed: listed_of(rows), has_legend: true, link: same, repo: undefined }
+	const shown = items_of(notes, view).slice(0, NOTE_LIMIT)
 
-// 📌 while the section is on screen, then each kind a drawn line leads with —
-// one the rows' legend already names (`named`) is not named twice.
-function notes_legend(notes: ReadonlyArray<BoardNote>, named: ReadonlySet<string>): Array<string> {
-	if (notes.length === 0) return []
+	const drawn = new Set(shown.map((item) => item.icon))
 
-	const drawn = new Set(notes.slice(0, NOTE_LIMIT).map((note) => note_icon(note)))
-	const kinds = NOTE_LEGEND.filter(([icon]) => drawn.has(icon) && !named.has(icon)).map(
+	return NOTE_LEGEND.filter(([icon]) => drawn.has(icon) && !named.has(icon)).map(
 		([icon, word]) => `${icon} ${WORDS[word]}`,
 	)
-
-	return [`${NOTES_ICON} ${WORDS.notes}`, ...kinds]
 }
 
-const run_board_render_notes = { NOTE_LIMIT, note_lines, notes_legend }
+const run_board_render_notes = { NOTE_LIMIT, notes_legend, notes_part }
 
-export { run_board_render_notes }
+export { run_board_render_notes, type NotesView }

package/scripts/run/board/run-board-render-processes.ts

@@ -0,0 +1,196 @@
+import { run_board_fit, type DetailPart } from './run-board-fit'
+import type { BoardHeader, BoardUsage } from './run-board-header'
+import type { NamedFigure, ProcessGroups } from './run-board-process-groups'
+import { run_board_render_lanes } from './run-board-render-lanes'
+import { run_board_render_lead } from './run-board-render-lead'
+import { run_board_render_section } from './run-board-render-section'
+import { run_board_render_title } from './run-board-render-title'
+import type { UsageFigure, UsageScale } from './run-board-usage'
+import { run_board_usage_text } from './run-board-usage-text'
+
+// What is loading the machine, by who started it: the backlogrun's own processes — its supervisor, the
+// parent session and the lanes — the apps outside it, and whatever a run left behind. On a terminal
+// one row each with gauges under a rule whose labels stand over them, the parts of each group indented
+// under it so a short pane can drop them first; anywhere else one line of figures. The cells start
+// at `USAGE_START`, as the lane rows' do, whatever the names (joshuafolkken/kit#4292): a part's name is
+// cut to fit before them.
+
+const { LANES_LABEL, column_cells, label_columns } = run_board_render_lanes
+const { USAGE_START } = run_board_render_lead
+const { columns_rule, heading_lines } = run_board_render_section
+const { title_of } = run_board_render_title
+const { plain_of } = run_board_usage_text
+const GAUGE = 5
+const CELL_GAP = ' '
+const DETAIL = '  '
+const PLAIN_INDENT = '  '
+// Two levels under the section's rule, whose icon stands in the second column.
+const INDENT = `${PLAIN_INDENT}${DETAIL}`
+// The columns a row's label is padded to, so its cells start at `USAGE_START`.
+const LABEL_WIDTH = USAGE_START - INDENT.length - CELL_GAP.length
+// A part's name with its count, in the label's columns after the part's own indent.
+const DETAIL_ROOM = LABEL_WIDTH - DETAIL.length
+// A part's name on the one-line form, which has no column to fit.
+const PLAIN_LIMIT = 24
+// Icons Unicode draws as emoji by default, which `string-width` counts two columns wide as a terminal
+// draws them: 🖥 and 🎛, text symbols drawn as emoji, overlapped the blank after them.
+const LABEL = '💻 processes'
+const PART_GAP = ' · '
+const SUMMARY_GAP = ' ── '
+const ICONS = { backlogrun: '▶', apps: '🌐', leftover: '👻' }
+const LABELS = {
+	backlogrun: `${ICONS.backlogrun} backlogrun`,
+	supervisor: '🧭 supervisor',
+	parent: '🎬 parent',
+	lanes: LANES_LABEL,
+	apps: `${ICONS.apps} apps`,
+	leftover: `${ICONS.leftover} leftover`,
+}
+
+interface Labeled {
+	label: string
+	figure: UsageFigure
+	is_detail: boolean
+}
+
+function count_of(instances: number): string {
+	return instances > 1 ? ` ×${String(instances)}` : ''
+}
+
+// A part's name, cut so it and its count fit `room` columns.
+function named(entry: NamedFigure, room = DETAIL_ROOM): Labeled {
+	const count = count_of(entry.instances)
+	const label = `${title_of(entry.name, room - count.length)}${count}`
+
+	return { label, figure: entry.figure, is_detail: true }
+}
+
+// A group's line and its parts' lines, the parts only where it has any.
+function group_of(
+	label: string,
+	figure: UsageFigure,
+	parts: ReadonlyArray<Labeled>,
+): Array<Labeled> {
+	return [{ label, figure, is_detail: false }, ...parts]
+}
+
+function named_group(
+	label: string,
+	figure: UsageFigure,
+	entries: ReadonlyArray<NamedFigure>,
+): Array<Labeled> {
+	return group_of(
+		label,
+		figure,
+		entries.map((entry) => named(entry)),
+	)
+}
+
+function backlogrun_group(backlogrun: ProcessGroups['backlogrun']): Array<Labeled> {
+	const lanes = `${LABELS.lanes}${count_of(backlogrun.lanes.count)}`
+	const own = [
+		{ label: LABELS.supervisor, figure: backlogrun.supervisor, is_detail: true },
+		{ label: LABELS.parent, figure: backlogrun.parent, is_detail: true },
+		{ label: lanes, figure: backlogrun.lanes.figure, is_detail: true },
+	]
+
+	return group_of(LABELS.backlogrun, backlogrun.total, own)
+}
+
+// The leftover group is drawn only where a run left something behind.
+function labeled_of(usage: BoardUsage): Array<Labeled> {
+	const { backlogrun, apps, leftover } = usage.processes
+	const left =
+		leftover.entries.length === 0
+			? []
+			: named_group(LABELS.leftover, leftover.total, leftover.entries)
+
+	return [
+		...backlogrun_group(backlogrun),
+		...named_group(LABELS.apps, apps.total, apps.top),
+		...left,
+	]
+}
+
+function label_text(entry: Labeled): string {
+	return entry.is_detail ? `${DETAIL}${entry.label}` : entry.label
+}
+
+function padded(text: string, width: number): string {
+	return `${text}${' '.repeat(Math.max(0, width - run_board_fit.width_of(text)))}`
+}
+
+function screen_part(usage: BoardUsage): DetailPart {
+	const lines = labeled_of(usage).map((entry) => {
+		const cells = column_cells(entry.figure, usage.scale, GAUGE)
+
+		return {
+			text: `${INDENT}${padded(label_text(entry), LABEL_WIDTH)}${CELL_GAP}${cells}`,
+			is_detail: entry.is_detail,
+		}
+	})
+
+	return { head: ['', columns_rule(LABEL, label_columns(USAGE_START, GAUGE))], lines }
+}
+
+function plain_group(
+	scale: UsageScale,
+	label: string,
+	figure: UsageFigure,
+	parts: ReadonlyArray<NamedFigure>,
+): string {
+	const group = `${label} ${plain_of(figure, scale)}`
+	const named_parts = parts.map(
+		(part) => `${named(part, PLAIN_LIMIT).label} ${plain_of(part.figure, scale)}`,
+	)
+
+	return named_parts.length === 0 ? group : `${group}: ${named_parts.join(', ')}`
+}
+
+// The groups on one line: `▶ backlogrun 44.5%/4.0G/3.3G · 🌐 apps 28.2%/18.8G/12.4G: Chrome …`.
+function plain_part(usage: BoardUsage): DetailPart {
+	const { processes, scale } = usage
+	const { backlogrun, apps, leftover } = processes
+	const groups = [
+		plain_group(scale, LABELS.backlogrun, backlogrun.total, []),
+		plain_group(scale, LABELS.apps, apps.total, apps.top),
+	]
+	const left =
+		leftover.entries.length === 0
+			? []
+			: [plain_group(scale, LABELS.leftover, leftover.total, leftover.entries)]
+	const text = `${PLAIN_INDENT}${[...groups, ...left].join(PART_GAP)}`
+
+	return { head: heading_lines(LABEL), lines: [{ text, is_detail: false }] }
+}
+
+// What the folded section says: each group's totals behind its icon,
+// `▶ 44.5%/4.0G/3.3G ── 🌐 28.2%/18.8G/12.4G`, the leftover only where a run left any.
+function summary_of(usage: BoardUsage): string {
+	const { processes, scale } = usage
+	const { backlogrun, apps, leftover } = processes
+	const left =
+		leftover.entries.length === 0 ? [] : [`${ICONS.leftover} ${plain_of(leftover.total, scale)}`]
+	const groups = [
+		`${ICONS.backlogrun} ${plain_of(backlogrun.total, scale)}`,
+		`${ICONS.apps} ${plain_of(apps.total, scale)}`,
+		...left,
+	]
+
+	return groups.join(SUMMARY_GAP)
+}
+
+// `undefined` where the frame read no usage.
+function processes_part(header: BoardHeader): DetailPart | undefined {
+	const { usages } = header
+
+	if (usages === undefined) return undefined
+
+	const part = header.spinner === undefined ? plain_part(usages) : screen_part(usages)
+
+	return { ...part, label: LABEL, summary: summary_of(usages) }
+}
+
+const run_board_render_processes = { processes_part }
+
+export { run_board_render_processes }