@iowarp/clio-coder 0.3.4 → 0.3.7

package/src/interactive/clio-editor.ts

@@ -1,9 +1,12 @@
 import { Editor, stripTerminalSequences, type TUI, truncateToWidth, visibleWidth } from "../engine/tui.js";
+import { fitHintEntries } from "./overlay-frame.js";
+import { permissionHintEntries } from "./permission-hint.js";
 import type { ClioTheme } from "./theme/index.js";
 import { clioTheme, editorTheme, GLYPH, rule } from "./theme/index.js";
 
 const REVERSE_VIDEO_BLANK = `${String.fromCharCode(27)}[7m ${String.fromCharCode(27)}[0m`;
 const EMPTY_PROMPT = "Ask Clio…  / for commands";
+const CONFIRM_PROMPT = "A parked call is waiting for your decision";
 const MIN_HINT_WIDTH = 60;
 
 function hasScrollIndicator(line: string): boolean {
@@ -18,6 +21,13 @@ export interface EditorChrome {
 	getThinkingLabel: () => string;
 	/** Whether Enter currently targets the active Clio response. */
 	isStreaming?: () => boolean;
+	/**
+	 * Whether a permission prompt owns the keyboard. The dialog once sat at the
+	 * vertical center of a tall viewport, far from the composer. It now anchors
+	 * above that composer, while the rail still says CONFIRM and carries the
+	 * dialog's keys whenever the prompt owns input (issues #186 and #194).
+	 */
+	isAwaitingApproval?: () => boolean;
 	/** Whether the current draft will actually steer Clio or live dispatch work on Enter. */
 	willEnterSteer?: (text: string) => boolean;
 	/** Resolved submit binding, formatted for display. */
@@ -26,7 +36,7 @@ export interface EditorChrome {
 	getNewlineKeyLabel?: () => string;
 }
 
-type ComposerMode = "MESSAGE" | "FOLLOW-UP" | "STEER";
+type ComposerMode = "MESSAGE" | "FOLLOW-UP" | "STEER" | "CONFIRM";
 
 function normalizeThinkingHint(value: string): string {
 	return value
@@ -61,6 +71,7 @@ function styledRailLabel(theme: ClioTheme, chrome: EditorChrome): string {
 }
 
 function composerMode(chrome: EditorChrome, text: string): ComposerMode {
+	if (chrome.isAwaitingApproval?.() ?? false) return "CONFIRM";
 	if (!(chrome.isStreaming?.() ?? false)) return "MESSAGE";
 	const willSteer = chrome.willEnterSteer?.(text) ?? text.trim().length > 0;
 	return willSteer ? "STEER" : "FOLLOW-UP";
@@ -73,12 +84,27 @@ function lowerRailHint(theme: ClioTheme, chrome: EditorChrome): string {
 	);
 }
 
-function renderEmptyPrompt(line: string, width: number, theme: ClioTheme): string {
+/**
+ * The permission keys on the composer rail, fitted like the dialog footer so
+ * both surfaces narrow in the same order and never drop allow or stop first.
+ * The rule spends three columns around a right label, hence the subtraction.
+ */
+function confirmRailHint(theme: ClioTheme, width: number, hasDraft: boolean): string {
+	return theme.fg("warning", fitHintEntries(permissionHintEntries(hasDraft), Math.max(1, width - 3)));
+}
+
+function modeToken(mode: ComposerMode): "action" | "accentDeep" | "warning" {
+	if (mode === "STEER") return "action";
+	if (mode === "CONFIRM") return "warning";
+	return "accentDeep";
+}
+
+function renderEmptyPrompt(line: string, width: number, theme: ClioTheme, text = EMPTY_PROMPT): string {
 	const cursorAt = line.indexOf(REVERSE_VIDEO_BLANK);
 	if (cursorAt < 0) return line;
 	const afterCursorAt = cursorAt + REVERSE_VIDEO_BLANK.length;
 	const available = Math.max(0, width - 1);
-	const prompt = truncateToWidth(theme.fg("dim", EMPTY_PROMPT), available, "…", false);
+	const prompt = truncateToWidth(theme.fg("dim", text), available, "…", false);
 	const consumed = visibleWidth(prompt);
 	return `${line.slice(0, afterCursorAt)}${prompt}${line.slice(afterCursorAt + consumed)}`;
 }
@@ -111,12 +137,12 @@ export class ClioEditor extends Editor {
 			// The base editor has already fitted the scroll indicator to this width.
 			// Prefix the mode and trim only the indicator rail's trailing fill, keeping
 			// its direction/count text and its own narrow-width fallback intact.
-			const modeLabel = theme.style(mode === "STEER" ? "action" : "accentDeep", mode, { bold: true });
+			const modeLabel = theme.style(modeToken(mode), mode, { bold: true });
 			lines[0] = truncateToWidth(`${modeLabel} ${lines[0] ?? ""}`, safeWidth, "", true);
 		} else {
 			lines[0] = rule(theme, safeWidth, {
 				left: mode,
-				leftToken: mode === "STEER" ? "action" : "accentDeep",
+				leftToken: modeToken(mode),
 				right: styledRailLabel(theme, this.chrome),
 				fillToken: "frameStrong",
 				rightRaw: true,
@@ -124,10 +150,21 @@ export class ClioEditor extends Editor {
 			});
 		}
 
-		if (text.length === 0 && lines[1]) lines[1] = renderEmptyPrompt(lines[1], safeWidth, theme);
+		if (text.length === 0 && lines[1]) {
+			lines[1] = renderEmptyPrompt(lines[1], safeWidth, theme, mode === "CONFIRM" ? CONFIRM_PROMPT : EMPTY_PROMPT);
+		}
 
 		const bottomRail = findBottomRail(lines, safeWidth);
-		if (bottomRail >= 0 && safeWidth >= MIN_HINT_WIDTH) {
+		// The confirm keys render at every width: the send hint is a convenience
+		// that a narrow composer can drop, the allow and deny keys are not.
+		if (bottomRail >= 0 && mode === "CONFIRM") {
+			lines[bottomRail] = rule(theme, safeWidth, {
+				right: confirmRailHint(theme, safeWidth, text.length > 0),
+				fillToken: "frameStrong",
+				rightRaw: true,
+				rightTail: theme.style("frameStrong", "─", { bold: true }),
+			});
+		} else if (bottomRail >= 0 && safeWidth >= MIN_HINT_WIDTH) {
 			lines[bottomRail] = rule(theme, safeWidth, {
 				right: lowerRailHint(theme, this.chrome),
 				fillToken: "frameStrong",

package/src/interactive/context-overlay.ts

@@ -3,6 +3,7 @@ import { relative } from "node:path";
 import { BusChannels } from "../core/bus-events.js";
 import type { SafeEventBus } from "../core/event-bus.js";
 import type { WorkingSetView } from "../domains/context/working-set/contract.js";
+import { formatContextWindowSlots } from "../domains/providers/index.js";
 import type { ContextLedger, ContextLedgerGroup } from "../domains/session/context-ledger.js";
 import { type OverlayHandle, Text, type TUI, visibleWidth } from "../engine/tui.js";
 import { contextCategorySwatch, renderContextMeterGrid, renderEvictedTokensLine } from "./context-meter.js";
@@ -112,12 +113,34 @@ function coldReasonLabel(reason: string): string {
 	}
 }
 
+/** The operator's working-set configuration, as `/context` states it. */
+export interface WorkingSetConfigView {
+	enabled: boolean;
+	policy: string;
+}
+
 /**
  * The working-set section: what the projection has taken out of the window
  * and how often the model has asked for it back. Churn is recalls over items
  * evicted; a high number means the policy evicts what is still needed.
  */
-function renderWorkingSetLines(view: WorkingSetView): string[] {
+/**
+ * The policy line names what is configured, not what last ran. `lastPolicyId`
+ * is stamped by the first applied event, and eviction runs only when pressure
+ * crosses `compaction.threshold`, so a whole session at the shipped default
+ * read `policy none` (issue #190). With no configuration in hand (older
+ * callers) the last applied policy is still the best available claim.
+ */
+function workingSetPolicyLabel(view: WorkingSetView, config: WorkingSetConfigView | null | undefined): string {
+	if (config === null || config === undefined) return `policy ${view.lastPolicyId ?? "none"}`;
+	if (!config.enabled) return "disabled";
+	const state = view.evictionEvents === 0 ? " · no events yet" : "";
+	const lastRan =
+		view.lastPolicyId !== null && view.lastPolicyId !== config.policy ? ` (last event by ${view.lastPolicyId})` : "";
+	return `policy ${config.policy}${lastRan}${state}`;
+}
+
+function renderWorkingSetLines(view: WorkingSetView, config: WorkingSetConfigView | null | undefined): string[] {
 	const theme = clioTheme();
 	const items = view.evicted.size;
 	const summary = [
@@ -128,7 +151,7 @@ function renderWorkingSetLines(view: WorkingSetView): string[] {
 		`churn ${formatChurn(view)}`,
 	].join(" · ");
 	return [
-		`${theme.fg("muted", "working set")} ${theme.fg("dim", "·")} ${theme.fg("accent", `policy ${view.lastPolicyId ?? "none"}`)}`,
+		`${theme.fg("muted", "working set")} ${theme.fg("dim", "·")} ${theme.fg("accent", workingSetPolicyLabel(view, config))}`,
 		theme.fg("dim", summary),
 	];
 }
@@ -137,6 +160,7 @@ export function renderContextLedgerLines(
 	ledger: ContextLedger,
 	contentWidth: number,
 	workingSet?: WorkingSetView | null,
+	workingSetConfig?: WorkingSetConfigView | null,
 ): string[] {
 	const theme = clioTheme();
 	const lines: string[] = [];
@@ -154,7 +178,14 @@ export function renderContextLedgerLines(
 
 	if (ledger.contextWindow > 0) {
 		const source = ledger.measured ? "measured" : "≈ estimated";
-		const summary = `${formatTokens(ledger.usedTokens)} / ${formatTokens(ledger.contextWindow)} tokens (${formatContextPercent(ledger.percent)})`;
+		// `196,608 (786,432 / 4 slots)`: a llama.cpp window that is one slot's
+		// share of the server's KV budget names the split, because the bare
+		// number reads as the whole server and the meter is measured against
+		// the share (issue #187).
+		const window = ledger.contextWindowSlots
+			? formatContextWindowSlots(ledger.contextWindow, ledger.contextWindowSlots)
+			: formatTokens(ledger.contextWindow);
+		const summary = `${formatTokens(ledger.usedTokens)} / ${window} tokens (${formatContextPercent(ledger.percent)})`;
 		const provenance = contextWindowProvenanceLabel(ledger.contextWindowSource);
 		const trailer = provenance ? `${provenance} window · ${source}` : source;
 		lines.push(`${theme.fg("title", summary)} ${theme.fg("dim", "·")} ${theme.fg("muted", trailer)}`);
@@ -170,7 +201,7 @@ export function renderContextLedgerLines(
 
 	lines.push("");
 	if (workingSet) {
-		for (const line of renderWorkingSetLines(workingSet)) lines.push(line);
+		for (const line of renderWorkingSetLines(workingSet, workingSetConfig)) lines.push(line);
 		lines.push("");
 	}
 	if (ledger.projectPreload && ledger.groups.some((group) => group.category === "project")) {
@@ -243,6 +274,8 @@ export interface OpenContextOverlayOptions {
 	};
 	/** Working-set fold at the live leaf; null or absent hides the section. */
 	getWorkingSet?: () => WorkingSetView | null;
+	/** The configured `context.workingSet` block, so the policy line states what is set. */
+	getWorkingSetConfig?: () => WorkingSetConfigView | null;
 }
 
 /**
@@ -257,7 +290,12 @@ export function openContextOverlay(
 	options?: OpenContextOverlayOptions,
 ): OverlayHandle {
 	const render = (): string =>
-		renderContextLedgerLines(getLedger(), DEFAULT_CONTENT_WIDTH, options?.getWorkingSet?.() ?? null).join("\n");
+		renderContextLedgerLines(
+			getLedger(),
+			DEFAULT_CONTENT_WIDTH,
+			options?.getWorkingSet?.() ?? null,
+			options?.getWorkingSetConfig?.() ?? null,
+		).join("\n");
 	const text = new Text(render(), 0, 0);
 	const handle = showClioOverlayFrame(tui, text, {
 		anchor: "center",

package/src/interactive/cost-overlay.ts

@@ -1,3 +1,8 @@
+import {
+	addResponseModelIdObservationCounts,
+	type ResponseModelIdObservationCounts,
+	responseModelIdObservationCountsLabel,
+} from "../core/response-model-id.js";
 import {
 	aggregateCostAmounts,
 	type CostAggregate,
@@ -16,7 +21,9 @@ export const COST_OVERLAY_WIDTH = DEFAULT_CONTENT_WIDTH + 4;
 
 export interface CostRow {
 	providerId: string;
-	modelId: string;
+	attributedModelId: string;
+	requestedModelIds: string[];
+	responseModelIdObservationCounts: ResponseModelIdObservationCounts;
 	runs: number;
 	tokens: number;
 	input: number;
@@ -25,6 +32,10 @@ export interface CostRow {
 	cacheWrite: number;
 	reasoningTokens: number;
 	apiCalls: number;
+	/** Calls in this row that were `/btw` side questions rather than turns. */
+	sideQuestions: number;
+	/** Calls in this row that were `/handoff` extraction rounds rather than turns. */
+	handoffs: number;
 	cost: CostAggregate;
 }
 
@@ -33,9 +44,17 @@ function formatTokens(n: number): string {
 }
 
 export function aggregateCostEntries(entries: ReadonlyArray<CostEntry>): CostRow[] {
-	const grouped = new Map<string, { row: Omit<CostRow, "cost">; entries: CostEntry[] }>();
+	const grouped = new Map<
+		string,
+		{
+			row: Omit<CostRow, "cost" | "requestedModelIds" | "responseModelIdObservationCounts">;
+			requestedModelIds: Set<string>;
+			responseModelIdObservationCounts: ResponseModelIdObservationCounts;
+			entries: CostEntry[];
+		}
+	>();
 	for (const entry of entries) {
-		const key = `${entry.providerId}::${entry.modelId}`;
+		const key = `${entry.providerId}::${entry.attributedModelId}`;
 		const existing = grouped.get(key);
 		if (existing) {
 			existing.row.runs += 1;
@@ -46,13 +65,20 @@ export function aggregateCostEntries(entries: ReadonlyArray<CostEntry>): CostRow
 			existing.row.cacheWrite += entry.cacheWrite;
 			existing.row.reasoningTokens += entry.reasoningTokens;
 			existing.row.apiCalls += entry.apiCalls ?? 1;
+			if (entry.label === "side-question") existing.row.sideQuestions += 1;
+			if (entry.label === "handoff") existing.row.handoffs += 1;
+			for (const requestedModelId of entry.requestedModelIds) existing.requestedModelIds.add(requestedModelId);
+			addResponseModelIdObservationCounts(
+				existing.responseModelIdObservationCounts,
+				entry.responseModelIdObservationCounts,
+			);
 			existing.entries.push(entry);
 			continue;
 		}
 		grouped.set(key, {
 			row: {
 				providerId: entry.providerId,
-				modelId: entry.modelId,
+				attributedModelId: entry.attributedModelId,
 				runs: 1,
 				tokens: entry.tokens,
 				input: entry.input,
@@ -61,23 +87,34 @@ export function aggregateCostEntries(entries: ReadonlyArray<CostEntry>): CostRow
 				cacheWrite: entry.cacheWrite,
 				reasoningTokens: entry.reasoningTokens,
 				apiCalls: entry.apiCalls ?? 1,
+				sideQuestions: entry.label === "side-question" ? 1 : 0,
+				handoffs: entry.label === "handoff" ? 1 : 0,
 			},
+			requestedModelIds: new Set(entry.requestedModelIds),
+			responseModelIdObservationCounts: { ...entry.responseModelIdObservationCounts },
 			entries: [entry],
 		});
 	}
-	const rows = Array.from(grouped.values(), ({ row, entries }) => ({
+	const rows = Array.from(grouped.values(), ({ row, entries, requestedModelIds, responseModelIdObservationCounts }) => ({
 		...row,
+		requestedModelIds: [...requestedModelIds].sort(),
+		responseModelIdObservationCounts,
 		cost: aggregateCostAmounts(entries.map((entry) => ({ usd: entry.usd, provenance: entry.provenance }))),
 	}));
 	rows.sort((a, b) => {
 		if (a.providerId !== b.providerId) return a.providerId < b.providerId ? -1 : 1;
-		if (a.modelId !== b.modelId) return a.modelId < b.modelId ? -1 : 1;
+		if (a.attributedModelId !== b.attributedModelId) return a.attributedModelId < b.attributedModelId ? -1 : 1;
 		return 0;
 	});
 	return rows;
 }
 
-function sumRows(rows: ReadonlyArray<CostRow>): Omit<CostRow, "providerId" | "modelId" | "cost"> {
+function sumRows(
+	rows: ReadonlyArray<CostRow>,
+): Omit<
+	CostRow,
+	"providerId" | "attributedModelId" | "requestedModelIds" | "responseModelIdObservationCounts" | "cost"
+> {
 	return rows.reduce(
 		(acc, row) => ({
 			runs: acc.runs + row.runs,
@@ -88,8 +125,21 @@ function sumRows(rows: ReadonlyArray<CostRow>): Omit<CostRow, "providerId" | "mo
 			cacheWrite: acc.cacheWrite + row.cacheWrite,
 			reasoningTokens: acc.reasoningTokens + row.reasoningTokens,
 			apiCalls: acc.apiCalls + row.apiCalls,
+			sideQuestions: acc.sideQuestions + row.sideQuestions,
+			handoffs: acc.handoffs + row.handoffs,
 		}),
-		{ runs: 0, tokens: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoningTokens: 0, apiCalls: 0 },
+		{
+			runs: 0,
+			tokens: 0,
+			input: 0,
+			output: 0,
+			cacheRead: 0,
+			cacheWrite: 0,
+			reasoningTokens: 0,
+			apiCalls: 0,
+			sideQuestions: 0,
+			handoffs: 0,
+		},
 	);
 }
 
@@ -137,9 +187,14 @@ function summaryBlock(totalCost: CostAggregate, totalTokens: number, rows: Reado
 	// unknown` it printed for a target that reports no pricing. The token rows
 	// below are measured and stay either way. See formatCostAggregate.
 	const cost = formatCostAggregate(totalCost);
+	// A side question is billed like anything else and is counted here, but it is
+	// deliberately not a turn: it never entered the session, so `turns` above
+	// excludes it and this row says how much of the spend sat beside the session.
 	return kvBlock([
-		["turns", formatTokens(totals.runs)],
+		["turns", formatTokens(totals.runs - totals.sideQuestions - totals.handoffs)],
 		["model calls", formatTokens(totals.apiCalls)],
+		...(totals.sideQuestions > 0 ? [["side questions", formatTokens(totals.sideQuestions)] as const] : []),
+		...(totals.handoffs > 0 ? [["handoffs", formatTokens(totals.handoffs)] as const] : []),
 		...(cost === null ? [] : [["cost", cost] as const]),
 		["input", formatTokens(totals.input)],
 		["output", formatTokens(totals.output)],
@@ -156,8 +211,12 @@ function modelBlock(row: CostRow): string[] {
 	// block with token rows and no cost row.
 	const cost = formatCostAggregate(row.cost);
 	return kvBlock([
-		["turns", formatTokens(row.runs)],
+		["requested model ids", row.requestedModelIds.join(", ")],
+		["response model id observation", responseModelIdObservationCountsLabel(row.responseModelIdObservationCounts)],
+		["turns", formatTokens(row.runs - row.sideQuestions - row.handoffs)],
 		["model calls", formatTokens(row.apiCalls)],
+		...(row.sideQuestions > 0 ? [["side questions", formatTokens(row.sideQuestions)] as const] : []),
+		...(row.handoffs > 0 ? [["handoffs", formatTokens(row.handoffs)] as const] : []),
 		...(cost === null ? [] : [["cost", cost] as const]),
 		["input", formatTokens(row.input)],
 		["output", formatTokens(row.output)],
@@ -185,7 +244,7 @@ export function formatCostOverlayBodyLines(
 	} else {
 		for (const [index, row] of rows.entries()) {
 			if (index > 0) lines.push("");
-			lines.push(theme.style("accent", `${row.providerId} · ${row.modelId}`, { bold: true }));
+			lines.push(theme.style("accent", `${row.providerId} · attributed model ${row.attributedModelId}`, { bold: true }));
 			for (const line of modelBlock(row)) {
 				lines.push(line);
 			}

package/src/interactive/council-dispatch.ts

@@ -0,0 +1,30 @@
+/**
+ * The one path `/council` takes into execution: the dispatch tool, admitted by
+ * the ordinary tool registry.
+ *
+ * The registry is where classification, safety, autonomy, middleware, and the
+ * operator approval park all live. A council started from the composer is a
+ * plan-scale dispatch exactly as a council the model asks for is, so it is
+ * admitted the same way and parks the same approval overlay. Nothing here
+ * builds a request, resolves a route, or touches the dispatch domain.
+ */
+
+import { ToolNames } from "../core/tool-names.js";
+import type { ToolRegistry } from "../tools/registry.js";
+import type { CouncilDispatchOutcome } from "./slash-commands.js";
+
+/**
+ * Invoke the dispatch tool with prepared council arguments and report the
+ * verdict in the command's own vocabulary. A tool that is not visible in this
+ * posture and a call the operator declined are both reported as what they are,
+ * because a council that never ran must never read as one that did.
+ */
+export async function dispatchCouncilThroughRegistry(
+	registry: Pick<ToolRegistry, "invoke">,
+	args: Readonly<Record<string, unknown>>,
+): Promise<CouncilDispatchOutcome> {
+	const verdict = await registry.invoke({ tool: ToolNames.Dispatch, args: { ...args } });
+	if (verdict.kind === "blocked") return { status: "blocked", reason: verdict.reason };
+	if (verdict.kind === "not_visible") return { status: "error", message: verdict.reason };
+	return verdict.result.kind === "error" ? { status: "error", message: verdict.result.message } : { status: "ok" };
+}

package/src/interactive/council-grid.ts

@@ -0,0 +1,213 @@
+/**
+ * How a council reads on the Fleet Runs board.
+ *
+ * A council is one question asked of several members at once, so its runs are
+ * one thing on the screen rather than three to five unrelated cards. Members
+ * sit side by side while every column keeps enough width to read an answer in,
+ * and stack one under another when they do not. The synthesis run is the whole
+ * council's answer, so it takes the full width under the members rather than a
+ * column of its own.
+ *
+ * Pure presentation: the caller projects board rows into these views, and this
+ * module owns only layout, color, and text. It knows nothing about the board
+ * store, the bus, or run status semantics.
+ */
+
+import { truncateToWidth, wrapTextWithAnsi } from "../engine/tui.js";
+import {
+	type ClioTheme,
+	type ClioToken,
+	dotSep,
+	GLYPH,
+	innerDivider,
+	isClioToken,
+	padAnsi,
+	paintHex,
+} from "./theme/index.js";
+
+/**
+ * The narrowest column an answer is still worth reading in. Below it the grid
+ * becomes a set of one-word columns, so the group stacks instead: a member's
+ * answer is the reason the operator opened the board.
+ */
+export const COUNCIL_COLUMN_MIN_WIDTH = 34;
+
+/** Blank columns between two side-by-side member columns. */
+export const COUNCIL_COLUMN_GUTTER = 2;
+
+/** Rows of a member's bounded answer tail a column shows before it defers to `/view`. */
+export const COUNCIL_ANSWER_ROWS = 4;
+
+/** The label the coordinator gives the synthesis run of every council group. */
+export const COUNCIL_SYNTHESIS_LABEL = "synthesis";
+
+/** One council run as the board draws it: the roster facts plus the run's presentation. */
+export interface CouncilMemberView {
+	runId: string;
+	label: string;
+	/** Roster color: a theme token name or a `#rrggbb` value. Absent members take the accent. */
+	color?: string;
+	round: number;
+	/** Route as the card names it, such as `local/example-model`. */
+	route: string;
+	status: { glyph: string; label: string; token: ClioToken };
+	/** Bounded answer tail the board already keeps for this run. */
+	tailText: string;
+	droppedLines: number;
+}
+
+export interface CouncilGroupView {
+	group: string;
+	/** Final-round member runs, in roster order. */
+	members: ReadonlyArray<CouncilMemberView>;
+	/** The council's own answer, or null while the members are still running. */
+	synthesis: CouncilMemberView | null;
+	/** Aggregate status of the group, used by the compact card. */
+	status: { glyph: string; label: string; token: ClioToken };
+	/** Highest round any member has reached. */
+	round: number;
+	/** Elapsed time of the longest-running member, formatted by the caller. */
+	elapsed: string;
+	/** Run id of the selected row when the selection sits inside this group. */
+	selectedRunId?: string;
+}
+
+export type CouncilLayout = { mode: "grid"; columnWidth: number } | { mode: "stack"; columnWidth: number };
+
+/**
+ * Grid or stack for this many members at this content width. Columns divide the
+ * width evenly after the gutters are taken out, and the whole group stacks the
+ * moment one column would fall under {@link COUNCIL_COLUMN_MIN_WIDTH}: a grid
+ * where only some columns are readable is worse than no grid at all.
+ */
+export function councilGridLayout(memberCount: number, contentWidth: number): CouncilLayout {
+	const count = Math.max(1, memberCount);
+	const usable = contentWidth - COUNCIL_COLUMN_GUTTER * (count - 1);
+	const columnWidth = Math.floor(usable / count);
+	if (count > 1 && columnWidth >= COUNCIL_COLUMN_MIN_WIDTH) return { mode: "grid", columnWidth };
+	return { mode: "stack", columnWidth: Math.max(1, contentWidth) };
+}
+
+/**
+ * A member's label in its roster color. A theme token name is painted as that
+ * token; a `#rrggbb` value is painted literally; anything else, including a
+ * member with no color at all, takes the accent, which is what the board paints
+ * the operator's own work in.
+ */
+function councilLabelText(theme: ClioTheme, label: string, color?: string): string {
+	if (color !== undefined && isClioToken(color)) return theme.style(color, label, { bold: true });
+	if (color !== undefined) {
+		const painted = paintHex(label, color);
+		if (painted !== label) return painted;
+	}
+	return theme.style("accent", label, { bold: true });
+}
+
+/** The answer tail on a rail, wrapped to the column and bounded to {@link COUNCIL_ANSWER_ROWS} rows. */
+function answerRows(theme: ClioTheme, member: CouncilMemberView, width: number, maxRows: number): string[] {
+	if (member.tailText.trim().length === 0) return [];
+	const railWidth = Math.max(1, width - 2);
+	const wrapped: string[] = [];
+	for (const line of member.tailText.split("\n")) {
+		for (const row of wrapTextWithAnsi(line, railWidth)) wrapped.push(row);
+	}
+	const shown = wrapped.slice(Math.max(0, wrapped.length - maxRows));
+	const hidden = wrapped.length - shown.length + member.droppedLines;
+	const rail = theme.fg("dim", `${GLYPH.rail} `);
+	const rows = shown.map((row) => `${rail}${theme.fg("muted", row)}`);
+	if (hidden > 0) {
+		rows.push(`${rail}${theme.fg("dim", truncateToWidth(`${hidden} more`, railWidth, "…", false))}`);
+	}
+	return rows;
+}
+
+/**
+ * One member column: the label, the route, the round and status, then the
+ * answer. Every line is clipped to the column so a long model id or a long
+ * answer line can never push a neighbouring column out of position.
+ */
+export function councilMemberLines(
+	theme: ClioTheme,
+	member: CouncilMemberView,
+	width: number,
+	options: { selected?: boolean; maxAnswerRows?: number } = {},
+): string[] {
+	const dot = dotSep(theme);
+	const cursor = options.selected === true ? `${theme.fg("accent", GLYPH.cursor)} ` : "";
+	const status = theme.fg(member.status.token, `${member.status.glyph} ${member.status.label}`);
+	const head = `${cursor}${councilLabelText(theme, member.label, member.color)}`;
+	const lines = [
+		truncateToWidth(head, width, "…", false),
+		truncateToWidth(theme.fg("muted", member.route), width, "…", false),
+		truncateToWidth(`${status}${dot}${theme.fg("dim", `r${member.round}`)}`, width, "…", false),
+		...answerRows(theme, member, width, options.maxAnswerRows ?? COUNCIL_ANSWER_ROWS),
+	];
+	return lines.map((line) => padAnsi(line, width));
+}
+
+/** Zip member columns into rows, padding short columns so the grid keeps its shape. */
+function zipColumns(columns: ReadonlyArray<ReadonlyArray<string>>, columnWidth: number): string[] {
+	const height = columns.reduce((tallest, column) => Math.max(tallest, column.length), 0);
+	const gutter = " ".repeat(COUNCIL_COLUMN_GUTTER);
+	const rows: string[] = [];
+	for (let index = 0; index < height; index += 1) {
+		rows.push(columns.map((column) => column[index] ?? " ".repeat(columnWidth)).join(gutter));
+	}
+	return rows;
+}
+
+/**
+ * The council group's body: the member grid or stack, then the synthesis run
+ * full width under it. The caller frames the result.
+ */
+export function councilGroupBody(theme: ClioTheme, group: CouncilGroupView, contentWidth: number): string[] {
+	const layout = councilGridLayout(group.members.length, contentWidth);
+	const body: string[] = [];
+	if (layout.mode === "grid") {
+		const columns = group.members.map((member) =>
+			councilMemberLines(theme, member, layout.columnWidth, {
+				selected: member.runId === group.selectedRunId,
+			}),
+		);
+		body.push(...zipColumns(columns, layout.columnWidth));
+	} else {
+		for (const member of group.members) {
+			if (body.length > 0) body.push(innerDivider(theme, contentWidth));
+			body.push(
+				...councilMemberLines(theme, member, layout.columnWidth, {
+					selected: member.runId === group.selectedRunId,
+				}),
+			);
+		}
+	}
+	if (group.synthesis !== null) {
+		body.push(innerDivider(theme, contentWidth));
+		body.push(
+			...councilMemberLines(theme, group.synthesis, contentWidth, {
+				selected: group.synthesis.runId === group.selectedRunId,
+				maxAnswerRows: COUNCIL_ANSWER_ROWS + 2,
+			}),
+		);
+	}
+	return body;
+}
+
+/**
+ * The compact Fleet Runs island card for a council: one row for the whole
+ * group, naming how many members are seated and which round they are on. The
+ * grid belongs to the expanded board, where there is width to read it in.
+ */
+export function councilIslandLines(theme: ClioTheme, group: CouncilGroupView, width: number): string[] {
+	const dot = dotSep(theme);
+	const glyph = theme.fg(group.status.token, group.status.glyph);
+	const status = theme.fg(group.status.token, group.status.label);
+	const title = theme.paint(`council ${group.group}`, { bold: true });
+	const head = `${glyph} ${title}${dot}${status}${dot}${theme.fg("muted", group.elapsed)}`;
+	const seats = `${group.members.length} member${group.members.length === 1 ? "" : "s"}`;
+	const facts = [
+		theme.fg("muted", seats),
+		theme.fg("dim", `r${group.round}`),
+		...(group.synthesis !== null ? [theme.fg("info", COUNCIL_SYNTHESIS_LABEL)] : []),
+	].join(dot);
+	return [padAnsi(truncateToWidth(head, width, "…", false), width), padAnsi(`  ${facts}`, width)];
+}