@underactive/pi-topping-moa-fusion 0.4.4 → 0.5.0

package/src/ui/moaProgressWidget.ts

@@ -31,13 +31,19 @@
 import type { Message } from "@earendil-works/pi-ai";
 import type { ExtensionContext, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { visibleWidth, wrapTextWithAnsi, type Component, type TUI } from "@earendil-works/pi-tui";
-import { ACTIVITY_METER_WIDTH, ActivityMeter, rateToLevel, TokRateTracker } from "../activityMeter.ts";
+import { ACTIVITY_METER_WIDTH, ActivityMeter, rateToLevel, TokRateTracker } from "@underactive/pi-topping-primitives/activity";
+import {
+	type AnsiTheme,
+	highlightActivity,
+	renderIdleMeter,
+	renderMeter,
+	shimmerString,
+	thinkingLevelThemeColor,
+} from "@underactive/pi-topping-primitives/activity-tui";
 import { modelRefLabel, shortModelName, type ModelRef, type ThinkingLevel } from "../shared/modelRefs.ts";
 import { contextPercent, CTX_COL_WIDTH, formatCost, formatElapsed, formatTokens } from "./agentStatus.ts";
 import { formatAgentPreview } from "./agentTranscript.ts";
 import { QUADRANT_SPINNER_FRAMES, UI_TICK_MS, fitVisible, ratioViewport } from "./chrome.ts";
-import { shimmerString, type ShimmerTheme } from "./shimmer.ts";
-import { highlightActivity } from "./toolActivity.ts";
 
 const WIDGET_KEY = "mf-plan-moa-status";
 
@@ -140,28 +146,6 @@ const PREVIEW_GUTTER = "│ ";
 const PREVIEW_MIN_WIDTH = 16;
 const TRANSCRIPT_MESSAGE_LIMIT = 40;
 
-/**
- * MONITOR meter hue per selected thinking level: each row's activity meter is
- * tinted with its level's native theme color (`thinkingOff` … `thinkingMax`),
- * so the table reads the thinking effort at a glance. Rows whose level is
- * unknown fall back to `accent` (see `meterColorFor`). Exhaustive over
- * `ThinkingLevel` so a new level cannot silently render as accent.
- */
-const THINKING_METER_COLORS: Record<ThinkingLevel, ThemeColor> = {
-	off: "thinkingOff",
-	minimal: "thinkingMinimal",
-	low: "thinkingLow",
-	medium: "thinkingMedium",
-	high: "thinkingHigh",
-	xhigh: "thinkingXhigh",
-	max: "thinkingMax",
-};
-
-/** Resolve a row's meter hue, defaulting an unknown level to the neutral accent. */
-function meterColorFor(thinking: ThinkingLevel | undefined): ThemeColor {
-	return thinking ? THINKING_METER_COLORS[thinking] : "accent";
-}
-
 /** Push an activity onto a bounded history buffer (most-recent-last). */
 function pushActivity(history: string[], activity: string): void {
 	history.push(activity);
@@ -747,7 +731,7 @@ export class MoaProgressTableComponent implements Component {
 			const row = rows[i];
 			let entry = this.meters[i];
 			if (!entry) {
-				entry = { meter: new ActivityMeter("rtl"), tracker: new TokRateTracker(), revision: row.outputRevision };
+				entry = { meter: new ActivityMeter({ direction: "rtl" }), tracker: new TokRateTracker(), revision: row.outputRevision };
 				this.meters[i] = entry;
 			}
 			if (entry.revision !== row.outputRevision) {
@@ -762,14 +746,11 @@ export class MoaProgressTableComponent implements Component {
 
 	private renderMeter(index: number, active: boolean, thinking: ThinkingLevel | undefined): string {
 		const meter = this.meters[index]?.meter;
-		if (!meter) return this.theme.fg("dim", "⢀".repeat(ACTIVITY_METER_WIDTH));
+		if (!meter) return renderIdleMeter(this.theme);
 		// Each row's meter carries its selected thinking level's native theme hue;
 		// an unknown level falls back to accent. IDLE cells and settled traces keep
-		// their existing dimming inside colorizeCell regardless of the hue.
-		const color = meterColorFor(thinking);
-		return meter.render((level, char) =>
-			ActivityMeter.colorizeCell(level, char, this.theme, color, !active),
-		);
+		// their existing dimming inside renderMeter regardless of the hue.
+		return renderMeter(meter, this.theme, thinkingLevelThemeColor(thinking), !active);
 	}
 
 	/** How many lines the table may use, so it never crowds out the editor below it. */
@@ -798,7 +779,7 @@ export class MoaProgressTableComponent implements Component {
 		const th = this.theme;
 		if (!lit) return th.fg("dim", text);
 		return th.getFgAnsi
-			? shimmerString(text, now - this.animationStartedAt, th as ShimmerTheme, "ltr", "normal", true)
+			? shimmerString(text, now - this.animationStartedAt, th as AnsiTheme, "ltr", "normal", true)
 			: th.fg("text", text);
 	}
 

package/src/ui/moaSetupOverlay.ts

@@ -21,7 +21,8 @@ import {
 	MAX_VERIFICATION_REPAIRS_LIMIT,
 	MIN_CONCURRENT_AGENTS,
 	MIN_VERIFICATION_REPAIRS,
-	saveMoaConfig,
+	moaSaveFailureMessage,
+	updateMoaConfig,
 	type MoaConfig,
 } from "../config/settings.ts";
 import type { PlanRoster } from "../config/rosters.ts";
@@ -29,8 +30,8 @@ import { modelRefLabel, type ModelRef, type ThinkingLevel } from "../shared/mode
 import { CONFIGURABLE_AGENTS, readAgentDefault, writeAgentDefault } from "../agents/defaults.ts";
 import { getAvailableModelRefs } from "./moaModelPicker.ts";
 import { showRosterManager } from "./rosterEditor.ts";
-import { TwoPaneModelThinking } from "./twoPaneModelThinking.ts";
-import { getModelCatalogue } from "../config/modelCatalogue.ts";
+import { createMoaModelPicker, type TwoPaneModelThinking } from "./twoPaneModelThinking.ts";
+import { getModelCatalogue } from "@underactive/pi-topping-primitives/models";
 import {
 	MenuComponent,
 	PLAN_OVERLAY_OPTIONS,
@@ -108,7 +109,7 @@ class MoaSetupComponent implements Component {
 		title: string,
 		private readonly done: (result: SetupResult) => void,
 	) {
-		this.twoPane = new TwoPaneModelThinking(tui, theme, availableRefs, config, currentThinking, ctx);
+		this.twoPane = createMoaModelPicker(tui, theme, availableRefs, config, currentThinking, ctx);
 		this.autoResolveConflicts = draft.autoResolveConflicts;
 		this.useSummaryName = draft.useSummaryName;
 		this.maxConcurrentAgents = draft.maxConcurrentAgents;
@@ -377,8 +378,8 @@ export async function showMoaSetup(
 			draft.rosters = await showRosterManager(ctx, draft.rosters, {
 				currentThinking,
 				onChange: (rosters) => {
-					const current = loadMoaConfig();
-					saveMoaConfig({ ...current, rosters });
+					const persisted = updateMoaConfig((current) => ({ ...current, rosters }));
+					if (!persisted.ok) ctx.ui.notify(moaSaveFailureMessage(persisted), "warning");
 				},
 			});
 			continue;
@@ -408,8 +409,7 @@ export async function showMoaSetup(
 	// intentionally left untouched: they remain load-bearing for resume,
 	// verifier fallback, and picker seeding, and are only written by a run's
 	// own confirmations.
-	const current = loadMoaConfig();
-	saveMoaConfig({
+	const persisted = updateMoaConfig((current) => ({
 		...current,
 		mode: "moa",
 		agentDefaultsConfigured: true,
@@ -421,6 +421,10 @@ export async function showMoaSetup(
 		cheap: finalDraft.selections[AGENT_SLOT_COUNT],
 		rosters: finalDraft.rosters,
 		thinkingOverrides: { ...current.thinkingOverrides, ...finalDraft.thinkingOverrides },
-	});
+	}));
+	if (!persisted.ok) {
+		ctx.ui.notify(moaSaveFailureMessage(persisted), "warning");
+		return false;
+	}
 	return true;
 }

package/src/ui/opinionModelPicker.ts

@@ -10,8 +10,8 @@ import {
 	ratioViewport,
 } from "./chrome.ts";
 import { getAvailableModelRefs } from "./moaModelPicker.ts";
-import { smartTruncateModelLabel } from "./modelLabel.ts";
-import { TwoPaneModelThinking } from "./twoPaneModelThinking.ts";
+import { smartTruncateModelLabel } from "@underactive/pi-topping-primitives/models";
+import { createMoaModelPicker, type TwoPaneModelThinking } from "./twoPaneModelThinking.ts";
 
 const HINT_BASE = "type filters models • ↑↓ navigate pane • tab panes/buttons • ←→ switch/select • enter select";
 
@@ -54,7 +54,7 @@ export class OpinionModelPickerComponent implements Component {
 		this.theme = theme;
 		this.defaults = defaults;
 		this.done = done;
-		this.twoPane = new TwoPaneModelThinking(tui, theme, availableRefs, config, currentThinking, ctx);
+		this.twoPane = createMoaModelPicker(tui, theme, availableRefs, config, currentThinking, ctx);
 	}
 
 	private assignedCount(): number {

package/src/ui/twoPaneModelThinking.ts

@@ -1,272 +1,35 @@
 import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
-import { getSelectListTheme } from "@earendil-works/pi-coding-agent";
-import { fuzzyFilter, Key, matchesKey, SelectList, truncateToWidth, visibleWidth, type SelectItem, type TUI } from "@earendil-works/pi-tui";
+import type { TUI } from "@earendil-works/pi-tui";
+import { registryLevelOptions, TwoPaneModelThinking } from "@underactive/pi-topping-primitives/models";
+import { defaultThinkingForModel, type MoaConfig } from "../config/settings.ts";
+import { modelRefLabel, type ModelRef, type ThinkingLevel } from "../shared/modelRefs.ts";
 import { SELECTOR_POINTER } from "./chrome.ts";
-import { renderMenuFooterContents } from "./menu.ts";
-import { MODEL_LIST_LAYOUT } from "./modelLabel.ts";
-import { getModelCatalogue } from "../config/modelCatalogue.ts";
-import {
-	defaultThinkingForModel,
-	thinkingOptionsForModel,
-	type MoaConfig,
-} from "../config/settings.ts";
-import {
-	isThinkingLevel,
-	modelRefLabel,
-	parseRef,
-	THINKING_LEVELS,
-	type ModelRef,
-	type ThinkingLevel,
-} from "../shared/modelRefs.ts";
 
-const MAX_VISIBLE_ROWS = 10;
-
-/** SelectList hardcodes "→ "; the extension's pointer is a plain "> " everywhere. */
-const withPointer = (line: string): string => line.replace("→ ", SELECTOR_POINTER);
-
-function modelThinkingPaneWidths(bodyWidth: number): { left: number; right: number } {
-	const divider = 1;
-	const longestLevel = THINKING_LEVELS.reduce((longest, level) => level.length > longest.length ? level : longest);
-	// One composed inset plus SelectList's two safety columns after its selector.
-	const rightMin = Math.max(visibleWidth(" Thinking"), visibleWidth(`→ ${longestLevel}`) + 3);
-	const right = Math.max(1, Math.min(rightMin, Math.max(1, bodyWidth - divider - 1)));
-	return { left: Math.max(1, bodyWidth - divider - right), right };
-}
-
-function toModelItems(refs: ModelRef[]): SelectItem[] {
-	return refs.map((ref) => ({ value: modelRefLabel(ref), label: modelRefLabel(ref) }));
-}
-
-/**
- * Reusable two-pane selector: models on the left and model-specific thinking
- * levels on the right. The model filter always owns text input; Tab or the
- * left/right arrows move the selection focus between panes.
- */
-export class TwoPaneModelThinking {
-	private modelList: SelectList;
-	private levelList: SelectList;
-	private filter = "";
-	private activePane: "model" | "level" | "buttons" = "model";
-	private activeButton = 0;
-	private maxVisibleRows = MAX_VISIBLE_ROWS;
-	private readonly modelItems: SelectItem[];
-
-	constructor(
-		private readonly tui: TUI,
-		private readonly theme: Theme,
-		availableRefs: ModelRef[],
-		private readonly config: MoaConfig,
-		private readonly currentThinking: ThinkingLevel,
-		private readonly ctx: ExtensionContext,
-	) {
-		this.modelItems = toModelItems(availableRefs);
-		this.modelList = new SelectList([], 1, getSelectListTheme());
-		this.levelList = new SelectList([], 1, getSelectListTheme());
-		this.reset();
-	}
-
-	isModelPane(): boolean {
-		return this.activePane === "model";
-	}
-
-	/** Limit the complete two-pane body, including filter/header/scroll rows. */
-	setMaxVisibleRows(limit: number): void {
-		const next = Math.max(1, Math.floor(limit));
-		if (next === this.maxVisibleRows) return;
-		this.maxVisibleRows = next;
-		this.rebuildPreservingSelection();
-	}
-
-	reset(defaultRef?: ModelRef, defaultThinking?: ThinkingLevel): void {
-		this.filter = "";
-		this.activePane = "model";
-		this.activeButton = 0;
-		this.rebuildModelList();
-		if (defaultRef) {
-			const defaultIndex = this.modelItems.findIndex((item) => item.value === modelRefLabel(defaultRef));
-			if (defaultIndex >= 0) this.modelList.setSelectedIndex(defaultIndex);
-		}
-		this.rebuildThinkingList();
-		if (defaultThinking) this.selectThinking(defaultThinking);
-	}
-
-	private selectThinking(thinking: ThinkingLevel): void {
-		const key = this.modelList.getSelectedItem()?.value;
-		if (!key) return;
-		const levels = thinkingOptionsForModel(getModelCatalogue(this.ctx.modelRegistry).thinkingLevelsFor(parseRef(key)));
-		const index = levels.indexOf(thinking);
-		if (index >= 0) this.levelList.setSelectedIndex(index);
-	}
-
-	private listItemRows(itemCount: number): number {
-		const chromeRows = 1 + (this.filter ? 1 : 0);
-		const available = Math.max(1, this.maxVisibleRows - chromeRows);
-		return itemCount > available ? Math.max(1, available - 1) : available;
-	}
-
-	private filteredModelItems(): SelectItem[] {
-		return this.filter.trim()
-			? fuzzyFilter(this.modelItems, this.filter, (item) => item.label)
-			: this.modelItems;
-	}
-
-	private rebuildModelList(): SelectItem[] {
-		const items = this.filteredModelItems();
-		this.modelList = new SelectList(
-			items,
-			Math.min(Math.max(items.length, 1), this.listItemRows(items.length)),
-			getSelectListTheme(),
-			MODEL_LIST_LAYOUT,
-		);
-		this.modelList.onSelectionChange = () => {
-			this.rebuildThinkingList();
-			this.tui.requestRender();
-		};
-		return items;
-	}
-
-	private rebuildPreservingSelection(): void {
-		const selectedModel = this.modelList.getSelectedItem()?.value;
-		const selectedLevel = this.levelList.getSelectedItem()?.value;
-		const items = this.rebuildModelList();
-		if (selectedModel) {
-			const index = items.findIndex((item) => item.value === selectedModel);
-			if (index >= 0) this.modelList.setSelectedIndex(index);
-		}
-		this.rebuildThinkingList();
-		if (selectedLevel && isThinkingLevel(selectedLevel)) this.selectThinking(selectedLevel);
-	}
-
-	private rebuildThinkingList(): void {
-		const key = this.modelList.getSelectedItem()?.value;
-		const registryLevels = key
-			? getModelCatalogue(this.ctx.modelRegistry).thinkingLevelsFor(parseRef(key))
-			: [];
-		const levels = thinkingOptionsForModel(registryLevels);
-		const items = (levels.length > 0 ? levels : ["off"]).map((level) => ({ value: level, label: level }));
-		this.levelList = new SelectList(items, Math.min(Math.max(items.length, 1), this.listItemRows(items.length)), getSelectListTheme());
-		if (!key) return;
-		const preferred = defaultThinkingForModel(key, this.config, this.currentThinking, registryLevels);
-		const preferredIndex = levels.indexOf(preferred);
-		if (preferredIndex >= 0) this.levelList.setSelectedIndex(preferredIndex);
-	}
-
-	handleInput(data: string): "confirm" | "back" | undefined {
-		if (matchesKey(data, Key.escape)) return "back";
-		if (matchesKey(data, Key.tab)) {
-			// Tab cycles Models → Thinking → action buttons → Models;
-			// left/right continue to switch between Models and Thinking (or
-			// between buttons, once the action bar is focused).
-			this.activePane = this.activePane === "model" ? "level" : this.activePane === "level" ? "buttons" : "model";
-			this.tui.requestRender();
-			return undefined;
-		}
-		if (this.activePane === "buttons") {
-			if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
-				this.activeButton = this.activeButton === 0 ? 1 : 0;
-				this.tui.requestRender();
-				return undefined;
-			}
-			if (matchesKey(data, Key.enter)) {
-				return this.activeButton === 0 && this.modelList.getSelectedItem() && this.levelList.getSelectedItem()
-					? "confirm"
-					: "back";
-			}
-			return undefined;
-		}
-		if (matchesKey(data, Key.enter)) {
-			return this.modelList.getSelectedItem() && this.levelList.getSelectedItem() ? "confirm" : undefined;
-		}
-		if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
-			this.activePane = this.activePane === "model" ? "level" : "model";
-			this.tui.requestRender();
-			return undefined;
-		}
-		if (data === "\x7f" || data === "\b") {
-			this.activePane = "model";
-			if (this.filter.length > 0) {
-				this.filter = this.filter.slice(0, -1);
-				this.rebuildPreservingSelection();
-				this.tui.requestRender();
-			}
-			return undefined;
-		}
-		if (data.length === 1 && data >= " " && data !== "\x7f") {
-			this.activePane = "model";
-			this.filter += data;
-			this.rebuildPreservingSelection();
-			this.tui.requestRender();
-			return undefined;
-		}
-		(this.activePane === "model" ? this.modelList : this.levelList).handleInput(data);
-		this.tui.requestRender();
-		return undefined;
-	}
-
-	getSelected(): { ref: ModelRef; thinking: ThinkingLevel } {
-		const model = this.modelList.getSelectedItem();
-		const level = this.levelList.getSelectedItem();
-		if (!model || !level || !isThinkingLevel(level.value)) {
-			throw new Error("Cannot confirm an empty model or thinking-level selection");
-		}
-		return { ref: parseRef(model.value), thinking: level.value };
-	}
-
-	render(bodyWidth: number): string[] {
-		const { left: leftWidth, right: rightWidth } = modelThinkingPaneWidths(bodyWidth);
-		const column = (text: string, width: number) => truncateToWidth(text, width, "", true);
-		const paneDivider = this.theme.fg("border", "│");
-		const headers = column(
-			this.activePane === "model" ? this.theme.bold(this.theme.fg("accent", " Models")) : this.theme.bold(" Models"),
-			leftWidth,
-		) + paneDivider + column(
-			` ${this.activePane === "level" ? this.theme.bold(this.theme.fg("accent", "Thinking")) : this.theme.bold("Thinking")}`,
-			rightWidth,
-		);
-		const modelLines = this.modelList.render(Math.max(1, leftWidth - 1));
-		const levelLines = this.levelList.render(Math.max(1, rightWidth - 1));
-		const rows = Math.max(modelLines.length, levelLines.length);
-		const lines = [
-			...(this.filter ? [column(this.theme.fg("muted", ` filter: ${this.filter}`), bodyWidth)] : []),
-			headers,
-		];
-		for (let index = 0; index < rows; index++) {
-			const modelLine = modelLines[index] ?? "";
-			const levelLine = levelLines[index] ?? "";
-			let leftCell = column(` ${withPointer(modelLine)}`, leftWidth);
-			let rightCell = column(` ${withPointer(levelLine)}`, rightWidth);
-			// SelectList renders "→ " only on the selected row; other rows use "  ".
-			if (this.activePane === "model" && modelLine.includes("→")) {
-				leftCell = this.theme.bg("selectedBg", leftCell);
-			}
-			if (this.activePane === "level" && levelLine.includes("→")) {
-				rightCell = this.theme.bg("selectedBg", rightCell);
-			}
-			lines.push(leftCell + paneDivider + rightCell);
-		}
-		return lines.slice(0, this.maxVisibleRows);
-	}
-
-	renderFooter(bodyWidth: number, hints: string): { actionRow: string; hintRows: string[] } {
-		const buttonText = (label: string, index: number) => {
-			const isActive = this.activeButton === index;
-			const text = isActive ? `[ ${label} ]` : `‹ ${label} ›`;
-			return isActive && this.activePane === "buttons"
-				? this.theme.bold(this.theme.fg("accent", text))
-				: this.theme.fg("muted", text);
-		};
-		const rows = renderMenuFooterContents(
-			this.theme,
-			bodyWidth,
-			`${buttonText("Select", 0)}    ${buttonText("Cancel", 1)}`,
-			hints,
-			{ wrapHints: true },
-		);
-		return { actionRow: rows[1] ?? "", hintRows: rows.slice(3) };
-	}
-
-	invalidate(): void {
-		this.modelList.invalidate();
-		this.levelList.invalidate();
-	}
+export type { TwoPaneModelThinking } from "@underactive/pi-topping-primitives/models";
+
+/** Keep MoA's registry fallback and saved/current thinking policy in the host. */
+export function createMoaModelPicker(
+	tui: TUI,
+	theme: Theme,
+	refs: ModelRef[],
+	config: MoaConfig,
+	currentThinking: ThinkingLevel,
+	ctx: ExtensionContext,
+): TwoPaneModelThinking {
+	// Filter edits rebuild the level list for the same model: keep the user's
+	// level then, and apply the saved/current default only when the model changes.
+	let lastKey: string | undefined;
+	return new TwoPaneModelThinking({
+		theme,
+		refs,
+		levelOptions: registryLevelOptions(ctx.modelRegistry, { fallback: ["off"] }),
+		preferredLevel: (ref, options, previous) => {
+			const key = modelRefLabel(ref);
+			const keep = key === lastKey && previous !== undefined && options.includes(previous);
+			lastKey = key;
+			return keep ? previous : defaultThinkingForModel(key, config, currentThinking, options);
+		},
+		requestRender: () => tui.requestRender(),
+		marker: SELECTOR_POINTER,
+	});
 }

package/src/ui/workingOverlay.ts

@@ -11,9 +11,9 @@
 import type { ExtensionContext, Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { isKeyRelease, Key, matchesKey, visibleWidth, type Component, type TUI } from "@earendil-works/pi-tui";
 import { setTimeout as sleep } from "node:timers/promises";
+import { shimmerString, type AnsiTheme } from "@underactive/pi-topping-primitives/activity-tui";
 import { formatElapsed } from "./agentStatus.ts";
 import { BRAILLE_SPINNER_FRAMES, ROUNDED_SINGLE_BOX, UI_TICK_MS, createFrame } from "./chrome.ts";
-import { shimmerString, type ShimmerTheme } from "./shimmer.ts";
 
 const OVERLAY_MARGIN = 1;
 /** Grace before mounting: work that settles inside this never flashes a card. */
@@ -246,7 +246,7 @@ class WorkingOverlayComponent implements Component {
 
 		const spin = th.fg("accent", BRAILLE_SPINNER_FRAMES[this.spinFrame % BRAILLE_SPINNER_FRAMES.length]!);
 		const detailText = th.getFgAnsi
-			? shimmerString(this.options.detail, Date.now() - this.startedAt, th as ShimmerTheme, "ltr", "normal")
+			? shimmerString(this.options.detail, Date.now() - this.startedAt, th as AnsiTheme, "ltr", "normal")
 			: th.fg("dim", this.options.detail);
 		const detailRow = frame.row(`${spin} ${detailText}`);