@adeildo/pi-look 5.2.0 → 5.4.0

package/README.md

@@ -24,7 +24,7 @@
 
 ## The screen
 
-A finished answer takes a box of its own, so you can see what the model wants to run before it runs. The mark of the tool and its name sit on the top line, the command under them, and the reason it was allowed under that, when another model answered it. A line cuts the command off from what it printed, and the bottom line says how it went: a check, a cross, and how long it took. A command still running says `running` with the time so far. A tool from an MCP server shows its server and tool instead of `mcp__server__tool`.
+A finished answer takes a box of its own, so you can see what the model wants to run before it runs. The mark of the tool and its name sit on the top line, the command under them, and the reason it was allowed under that, when another model answered it. A line cuts the command off from what it printed, and the bottom line says how it went: a check, a cross, and how long it took. A command still running says `running` with the time so far. A tool from an MCP server shows its server and tool instead of `mcp__server__tool`. A tool with no drawing of its own, like the memory calls, gets the same box with its name and arguments on top and its text under the cut.
 
 <!-- docs:look/call -->
 
@@ -65,8 +65,6 @@ Pi records usage without a duration, so every finished answer leaves one small e
 
 The look never names a colour. Every piece names a theme token, so it follows whatever theme pi runs, and it moves with it when you change themes. The [reference](docs/reference.md#colours) maps each piece to its token.
 
-If you run [DankMaterialShell](https://github.com/AvengeMedia/DankMaterialShell), matugen already made a palette from your wallpaper. The look turns it into the pi theme `desktop` and rewrites that file when the palette changes, so a new wallpaper recolours a running pi. `Switch to it now`, in the settings, does that at once.
-
 ## Settings
 
 `Alt+S` opens them on the Look tab. You can reorder every piece of the strip, the frame and the footer, pick the frame style, the icons and the separator, and switch off what you do not want. The [reference](docs/reference.md#settings) lists every key and every segment.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.2.0",
+	"version": "5.4.0",
 	"description": "Pi's start screen, a framed editor and the footer, redrawn around the data that matters and painted only with the theme's colours.",
 	"keywords": [
 		"pi",
@@ -38,7 +38,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@adeildo/pi-kit": "5.2.0"
+		"@adeildo/pi-kit": "5.4.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/data/snapshot.ts

@@ -1,5 +1,6 @@
 import { hostname } from "node:os";
 
+import type { AccountState } from "@adeildo/pi-kit";
 import { VERSION, type ExtensionContext, type SessionEntry } from "@earendil-works/pi-coding-agent";
 
 import type { GitState } from "./git.ts";
@@ -36,6 +37,7 @@ export interface Snapshot {
 	sessionName: string | undefined;
 	version: string;
 	model: ModelInfo | undefined;
+	account: AccountState | undefined;
 	thinking: string | undefined;
 	context: ContextInfo | undefined;
 	totals: Totals;
@@ -60,6 +62,7 @@ export function emptySnapshot(): Snapshot {
 		sessionName: undefined,
 		version: VERSION,
 		model: undefined,
+		account: undefined,
 		thinking: undefined,
 		context: undefined,
 		totals: emptyTotals(),
@@ -77,6 +80,7 @@ export function emptySnapshot(): Snapshot {
 export interface LiveInputs {
 	branch: string | null;
 	git: GitState | undefined;
+	account?: AccountState | undefined;
 	request: RequestView | undefined;
 	last: RequestView | undefined;
 	run: RunView | undefined;
@@ -117,6 +121,7 @@ export class SnapshotReader {
 							reasoning: model.reasoning,
 						},
 			thinking: ctx.thinkingLevel,
+			account: live.account,
 			context: contextOf(ctx),
 			...derived,
 			subscription: model === undefined ? false : ctx.modelRegistry.isUsingOAuth(model),

package/src/index.ts

@@ -1,4 +1,12 @@
-import { createApp, defineFeature, type FeatureScope } from "@adeildo/pi-kit";
+import {
+	accountStateOf,
+	createApp,
+	defineFeature,
+	drawSkillRefs,
+	type FeatureScope,
+	SKILL_REF,
+	skillNames,
+} from "@adeildo/pi-kit";
 import type {
 	ExtensionAPI,
 	ExtensionContext,
@@ -11,18 +19,15 @@ import { emptySnapshot, type Snapshot, SnapshotReader } from "./data/snapshot.ts
 import { Telemetry } from "./data/telemetry.ts";
 import type { DeltaKind } from "./data/telemetry.ts";
 import { REQUEST_ENTRY, type RequestRecord } from "./data/totals.ts";
-import { DESKTOP_THEME } from "./desktop/palette.ts";
-import { syncDesktopTheme, watchDesktopPalette } from "./desktop/sync.ts";
 import { resolveIcons } from "./render/glyphs.ts";
 import { PLAIN, themePaint } from "./render/paint.ts";
 import { claimedStatuses, renderSegments, SEGMENTS } from "./render/segments.ts";
 import {
 	below,
+	belowRight,
 	bottomLeft,
 	bottomRight,
 	cursor,
-	desktop,
-	desktopSource,
 	frame,
 	gaugeCells,
 	header,
@@ -47,7 +52,6 @@ import { type Activity, describe, draftedTool } from "./ui/working.ts";
 
 export { SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
 export { ROLE_TOKENS } from "./render/paint.ts";
-export { desktopTheme, parseDesktopColors } from "./desktop/palette.ts";
 
 const STRIP_WIDGET = "pi-look:strip";
 const TICK_MS = 500;
@@ -60,7 +64,6 @@ interface Live {
 	git: GitState | undefined;
 	probing: boolean;
 	ticker: ReturnType<typeof setInterval> | undefined;
-	stopWatching: (() => void) | undefined;
 	frame: Snapshot | undefined;
 	activity: string | undefined;
 }
@@ -82,7 +85,6 @@ export const look = defineFeature({
 			git: undefined,
 			probing: false,
 			ticker: undefined,
-			stopWatching: undefined,
 			frame: undefined,
 			activity: undefined,
 		};
@@ -97,7 +99,7 @@ export const look = defineFeature({
 		cursor.listen(scope, (style) => live.tui && applyCursor(live.tui, style));
 		peek.listen(scope, (on) => !on && live.ctx?.ui.setWorkingMessage());
 
-		scope.onSessionStart(async (ctx) => {
+		scope.onSessionStart((ctx) => {
 			live.ctx = ctx;
 			telemetry.reset();
 			void probeGit(live);
@@ -121,13 +123,10 @@ export const look = defineFeature({
 			});
 			installEditor(ctx, screen, live, scope);
 			installHeader(ctx, screen, scope);
-			if (desktop.get(scope)) await startDesktopSync(ctx, scope, live);
 		});
 
 		scope.onShutdown(() => {
 			stopTicking(live);
-			live.stopWatching?.();
-			live.stopWatching = undefined;
 			const ctx = live.ctx;
 			if (ctx?.mode === "tui") {
 				ctx.ui.setFooter(undefined);
@@ -214,28 +213,9 @@ export const look = defineFeature({
 			description: "Every piece the slots show right now, and what it means.",
 			run: () => explain(screen),
 		});
-
-		scope.screen.action({
-			id: "desktop.apply",
-			section: "Desktop theme",
-			label: "Switch to it now",
-			description: "Builds the desktop theme from the palette file and makes it pi's theme.",
-			run: (ctx) => switchToDesktopTheme(ctx, scope),
-		});
 	},
 });
 
-async function switchToDesktopTheme(ctx: ExtensionContext, scope: FeatureScope): Promise<string> {
-	const source = desktopSource.get(scope);
-	const result = await syncDesktopTheme(source);
-	if (result.kind === "missing") throw new Error(`no palette at ${source}`);
-	if (result.kind === "invalid") throw new Error(`cannot build the theme: ${result.reason}`);
-	const switched = ctx.ui.setTheme(DESKTOP_THEME);
-	if (!switched.success)
-		throw new Error(`wrote ${result.path}, but pi did not load it: ${switched.error ?? "unknown"}`);
-	return `Now on the ${DESKTOP_THEME} theme, built from ${source}.`;
-}
-
 const SLOT_TITLES: Record<SlotName, string> = {
 	strip: "Above the editor, this answer",
 	topLeft: "Frame, top left",
@@ -243,6 +223,7 @@ const SLOT_TITLES: Record<SlotName, string> = {
 	bottomLeft: "Frame, bottom left",
 	bottomRight: "Frame, bottom right",
 	below: "Below the editor, the session",
+	belowRight: "Below the editor, on the right",
 };
 
 function explain(screen: Screen): string {
@@ -290,6 +271,7 @@ function createScreen(
 		bottomLeft,
 		bottomRight,
 		below,
+		belowRight,
 	};
 
 	return {
@@ -300,6 +282,7 @@ function createScreen(
 			const snapshot = reader.read(ctx, {
 				branch: live.footerData?.getGitBranch() ?? null,
 				git: live.git,
+				account: accountStateOf(scope.events, ctx.model?.provider),
 				request: telemetry.request(),
 				last: telemetry.last(),
 				run: telemetry.run(),
@@ -323,6 +306,14 @@ function createScreen(
 		slot: (name) => slots[name].get(scope),
 		frameStyle: () => frame.get(scope),
 		cursor: () => cursor.get(scope),
+		decorate: (line) => {
+			const theme = live.ctx?.ui.theme;
+			if (theme === undefined) return line;
+			return drawSkillRefs(line, skillNames(scope.events), (name) =>
+				theme.fg("customMessageLabel", `${SKILL_REF}${name}`),
+			);
+		},
+		skills: () => skillNames(scope.events).length > 0,
 	};
 }
 
@@ -377,23 +368,6 @@ function loadedCounts(pi: ExtensionAPI): LoadedCounts {
 	};
 }
 
-async function startDesktopSync(ctx: ExtensionContext, scope: FeatureScope, live: Live) {
-	const source = desktopSource.get(scope);
-	const sync = async () => {
-		const result = await syncDesktopTheme(source);
-		if (result.kind === "invalid") scope.warn(`desktop theme: ${result.reason}`);
-		return result;
-	};
-
-	const first = await sync();
-	if (first.kind === "missing") return;
-	if (first.kind === "written" && ctx.ui.theme.name !== DESKTOP_THEME) {
-		ctx.ui.notify(`look: wrote the ${DESKTOP_THEME} theme. /look theme switches to it.`, "info");
-	}
-	live.stopWatching?.();
-	live.stopWatching = watchDesktopPalette(source, () => void sync());
-}
-
 function setActivity(live: Live, scope: FeatureScope, activity: Activity): void {
 	if (!peek.get(scope)) return;
 	const message = describe(activity);

package/src/render/format.ts

@@ -56,6 +56,7 @@ export function latency(milliseconds: number): string {
 }
 
 export function money(amount: number): string {
+	if (amount === 0) return "$0.00";
 	return amount >= 10 ? `$${amount.toFixed(2)}` : `$${amount.toFixed(3)}`;
 }
 

package/src/render/segments.ts

@@ -1,3 +1,5 @@
+import type { AccountWindow } from "@adeildo/pi-kit";
+
 import type { Snapshot } from "../data/snapshot.ts";
 import { promptOf, tokensOf, type Totals } from "../data/totals.ts";
 import type { Piece } from "./fit.ts";
@@ -38,6 +40,7 @@ export const SEGMENT_IDS = [
 	"request",
 	"costRate",
 	"cost",
+	"quota",
 	"tokens",
 	"cache",
 	"average",
@@ -58,11 +61,19 @@ export function isSegmentId(value: string): value is SegmentId {
 	);
 }
 
+/** Status keys a builtin segment already draws, so the statuses segment skips them. */
+const CLAIMED_BY_SEGMENT: Partial<Record<BuiltinSegment, string>> = {
+	model: "pi-providers:account",
+};
+
 export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<string> {
 	const claimed = new Set<string>();
 	for (const ids of slots) {
-		for (const id of ids)
+		for (const id of ids) {
 			if (id.startsWith(STATUS_PREFIX)) claimed.add(id.slice(STATUS_PREFIX.length));
+			const bySegment = CLAIMED_BY_SEGMENT[id as BuiltinSegment];
+			if (bySegment !== undefined) claimed.add(bySegment);
+		}
 	}
 	return claimed;
 }
@@ -180,13 +191,32 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 	},
 	model: {
 		priority: 100,
-		describe: "the model doing the work, after its provider",
+		describe: "the model doing the work, after its provider and the account it runs on",
 		render: ({ snapshot, glyphs, paint }) => {
 			const icon = mark(glyphs.model, paint, "provider");
 			if (snapshot.model === undefined) return { text: `${icon}${paint.dim("no model")}` };
 			const name = paint.bold(paint.role("model", snapshot.model.name));
-			const provider = `${paint.role("provider", snapshot.model.provider)}${paint.dim("/")}`;
-			return { text: `${icon}${provider}${name}`, compact: `${icon}${name}` };
+			const account =
+				snapshot.account === undefined
+					? ""
+					: `${paint.dim("(")}${paint.role("provider", snapshot.account.label)}${paint.dim(")")}`;
+			const provider = `${paint.role("provider", snapshot.model.provider)}${account}${paint.dim("/")}`;
+			return {
+				text: `${icon}${provider}${name}`,
+				compact: account === "" ? `${icon}${name}` : `${icon}${name} ${account}`,
+			};
+		},
+	},
+	quota: {
+		priority: 58,
+		describe: "what each window of the plan spent, and when it resets",
+		render: ({ snapshot, paint }) => {
+			const account = snapshot.account;
+			if (account === undefined) return undefined;
+			if (account.needsLogin === true) return { text: paint.stress(100, "sign in again") };
+			if (account.windows.length === 0) return undefined;
+			const text = account.windows.map((window) => quotaWindow(paint, window)).join("  ");
+			return { text };
 		},
 	},
 	effort: {
@@ -350,6 +380,7 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 			"what the session cost; `sub` means a subscription, so it is what the tokens would have cost",
 		render: ({ snapshot, glyphs, paint }) => {
 			const amount = snapshot.totals.cost;
+			// A session that spent nothing has nothing to say yet.
 			if (amount === 0) return undefined;
 			const value = paint.money(amount, money(amount));
 			const sub = snapshot.subscription ? paint.dim(" sub") : "";
@@ -445,6 +476,14 @@ export function renderSegments(ids: readonly SegmentId[], input: SegmentInput):
 	});
 }
 
+/** One plan window, like `5h 62% resets in 2h`. The percent carries the color. */
+function quotaWindow(paint: Paint, window: AccountWindow): string {
+	const used = paint.stress(window.used, `${window.used}%`);
+	const reset =
+		window.resetsIn === undefined ? "" : ` ${paint.muted(`resets in ${window.resetsIn}`)}`;
+	return `${paint.dim(window.name)} ${used}${reset}`;
+}
+
 function mark(glyph: string, paint: Paint, role: Role): string {
 	return glyph === "" ? "" : `${paint.role(role, glyph)} `;
 }

package/src/settings.ts

@@ -7,7 +7,6 @@ import {
 	pass,
 	problem,
 	setting,
-	string,
 } from "@adeildo/pi-kit";
 
 import type { FrameStyle } from "./render/frame.ts";
@@ -15,21 +14,12 @@ import type { IconMode } from "./render/glyphs.ts";
 import { isSegmentId, SEGMENT_IDS, SEGMENTS, type SegmentId } from "./render/segments.ts";
 
 const PERMISSION_STATUS: SegmentId = "status:pi-ask-permission:mode";
-const ACCOUNT_STATUS: SegmentId = "status:pi-providers:account";
 
 const STATUS_LABELS: Partial<Record<SegmentId, string>> = {
 	[PERMISSION_STATUS]: "permission mode",
-	[ACCOUNT_STATUS]: "account",
 };
 
-export const SECTIONS = [
-	"Editor",
-	"Slots",
-	"Footer",
-	"Start screen",
-	"Working line",
-	"Desktop theme",
-];
+export const SECTIONS = ["Editor", "Slots", "Footer", "Start screen", "Working line"];
 
 export type HeaderStyle = "card" | "compact" | "off";
 export type SeparatorStyle = "dot" | "bar" | "slash" | "space";
@@ -65,11 +55,7 @@ function segments(fallback: readonly SegmentId[]): Decoder<SegmentId[]> {
 
 // Any other package's status can have a slot of its own, so the ones already placed are offered too.
 function slotControl(fallback: readonly SegmentId[]): Control {
-	const statuses = [
-		PERMISSION_STATUS,
-		ACCOUNT_STATUS,
-		...fallback.filter((id) => id.startsWith("status:")),
-	];
+	const statuses = [PERMISSION_STATUS, ...fallback.filter((id) => id.startsWith("status:"))];
 	return {
 		type: "list",
 		options: [
@@ -113,7 +99,7 @@ export const bottomLeft = slot(
 	"frame.bottomLeft",
 	"Frame, bottom left",
 	"How what you type is handled, and who does the work.",
-	[PERMISSION_MODE, "model", ACCOUNT_STATUS, "effort"],
+	[PERMISSION_MODE, "model", "effort"],
 );
 export const bottomRight = slot("frame.bottomRight", "Frame, bottom right", "How full it is.", [
 	"context",
@@ -124,6 +110,12 @@ export const below = slot(
 	"The session: cost, tokens, cache, average speeds, and what other packages report, last because it changes the most.",
 	["cost", "tokens", "cache", "average", "statuses"],
 );
+export const belowRight = slot(
+	"belowRight",
+	"Below the editor, on the right",
+	"The plan's quota: what each window spent, and when it resets.",
+	["quota"],
+);
 
 export const frame = setting<FrameStyle | "off">({
 	id: "look.frame.style",
@@ -225,29 +217,6 @@ export const peek = setting({
 	},
 });
 
-export const desktop = setting({
-	id: "look.desktop.theme",
-	default: true,
-	decoder: boolean,
-	ui: {
-		section: "Desktop theme",
-		label: "Desktop theme",
-		description:
-			"Write the matugen palette from DankMaterialShell as the pi theme `desktop`, and keep it in sync.",
-	},
-});
-
-export const desktopSource = setting({
-	id: "look.desktop.source",
-	default: "~/.cache/DankMaterialShell/dms-colors.json",
-	decoder: string,
-	ui: {
-		section: "Desktop theme",
-		label: "Desktop palette",
-		description: "The DankMaterialShell colour file the desktop theme is made from.",
-	},
-});
-
 export const LOOK_SETTINGS = [
 	strip,
 	topLeft,
@@ -255,6 +224,7 @@ export const LOOK_SETTINGS = [
 	bottomLeft,
 	bottomRight,
 	below,
+	belowRight,
 	frame,
 	cursor,
 	header,
@@ -264,6 +234,4 @@ export const LOOK_SETTINGS = [
 	gaugeCells,
 	labels,
 	peek,
-	desktop,
-	desktopSource,
 ];

package/src/ui/editor.ts

@@ -1,3 +1,4 @@
+import { skillQueryAt } from "@adeildo/pi-kit";
 import { CustomEditor, type KeybindingsManager } from "@earendil-works/pi-coding-agent";
 import {
 	type EditorTheme,
@@ -59,6 +60,14 @@ export class LookEditor extends CustomEditor {
 		this.tui.requestRender();
 	}
 
+	/** Pi opens its palette on `/` only at the start of a message. Further in, `/` lists the skills. */
+	override handleInput(data: string): void {
+		super.handleInput(data);
+		if (data !== "/" || this.isShowingAutocomplete() || !this.#screen.skills()) return;
+		const { line, col } = this.getCursor();
+		if (skillQueryAt(this.getLines(), line, col) !== undefined) openAutocomplete(this);
+	}
+
 	override handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
 		if (this.#inset === 0) return super.handleMouse(event);
 		return super.handleMouse({
@@ -146,7 +155,7 @@ export class LookEditor extends CustomEditor {
 				);
 				inside = false;
 			} else if (inside) {
-				const text = cursor === "block" ? line : withoutSoftwareCursor(line);
+				const text = this.#screen.decorate(cursor === "block" ? line : withoutSoftwareCursor(line));
 				result.push(`${left}${fill(text, inner)}${right}`);
 			} else {
 				result.push(`${" ".repeat(this.#inset)}${line}`);
@@ -165,6 +174,12 @@ export class LookEditor extends CustomEditor {
 	}
 }
 
+// The editor keeps the method that opens its list private. Nothing opens if a pi release renames it.
+function openAutocomplete(editor: CustomEditor): void {
+	const open: unknown = Reflect.get(editor, "tryTriggerAutocomplete");
+	if (typeof open === "function") open.call(editor);
+}
+
 /** With the terminal's cursor showing, pi's inverted cell would be a second cursor. */
 function withoutSoftwareCursor(line: string): string {
 	return line.replace(INVERTED_CELL, "$1");

package/src/ui/footer.ts

@@ -57,7 +57,7 @@ export class FooterComponent implements Component {
 			lines.push(spread(screen, "topLeft", "topRight", room));
 			lines.push(spread(screen, "bottomLeft", "bottomRight", room));
 		}
-		lines.push(renderSlot(screen, "below", room));
+		lines.push(spread(screen, "below", "belowRight", room));
 
 		const kept = lines.filter((line) => line !== "").map((line) => `${pad}${line}`);
 		return kept.length === 0 ? [""] : kept;

package/src/ui/screen.ts

@@ -6,7 +6,14 @@ import type { Paint } from "../render/paint.ts";
 import { renderSegments, type SegmentId, type SegmentOptions } from "../render/segments.ts";
 import type { CursorStyle } from "../settings.ts";
 
-export type SlotName = "strip" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "below";
+export type SlotName =
+	| "strip"
+	| "topLeft"
+	| "topRight"
+	| "bottomLeft"
+	| "bottomRight"
+	| "below"
+	| "belowRight";
 
 export interface Screen {
 	snapshot(): Snapshot;
@@ -17,6 +24,10 @@ export interface Screen {
 	slot(name: SlotName): readonly SegmentId[];
 	frameStyle(): FrameStyle | "off";
 	cursor(): CursorStyle;
+	/** A line of what you type, with the skills it names colored. */
+	decorate(line: string): string;
+	/** True when a skills feature expands `/skill:` references. */
+	skills(): boolean;
 }
 
 export function slotPieces(

package/src/ui/tool-frame.ts

@@ -12,7 +12,9 @@ import {
 import type { Theme, ToolRenderers } from "@earendil-works/pi-coding-agent";
 import {
 	type Component,
+	getKeybindings,
 	stripTerminalSequences,
+	Text,
 	truncateToWidth,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
@@ -32,6 +34,9 @@ const PHASE_COLORS = {
 	failed: "error",
 } as const;
 const BODY_PAD = 4;
+const COLLAPSED_ARGS_CHARS = 100;
+/** How many lines of a result the frame prints before telling you the rest is there. */
+const RESULT_PREVIEW_LINES = 10;
 
 export function registerToolFrames(scope: FeatureScope): void {
 	const redraws = new Map<string, () => void>();
@@ -61,12 +66,11 @@ function framed(
 	scope: FeatureScope,
 	base: ToolRenderers | undefined,
 	frame: FrameContext,
-): ToolRenderers | undefined {
-	// Pi drops the whole chain when a resolver answers nothing, so a tool it cannot frame keeps
-	// whatever the next resolver drew.
-	const call = base?.renderCall;
-	const result = base?.renderResult;
-	if (base === undefined || call === undefined || result === undefined) return base;
+): ToolRenderers {
+	// A tool may bring renderers of its own, one of them, or none: the frame wraps whichever half
+	// exists, and the arguments or the text of the result stand in for the rest.
+	const call = base?.renderCall ?? genericCall;
+	const result = base?.renderResult ?? genericResult;
 
 	// A renderer of pi's own mutates the component it returned last time, which sits inside the
 	// frame, so it gets that one back instead of the frame.
@@ -94,7 +98,7 @@ function framed(
 				body,
 				ruling: rulingOf(scope.events, context.toolCallId),
 				expanded: context.expanded,
-				phase: context.executionStarted ? undefined : context.argsComplete ? "waiting" : "writing",
+				phase: phaseOf(context),
 				mark: stateMark,
 				set: frame.set,
 				elapsed: elapsedOf(clock, context),
@@ -130,6 +134,84 @@ function framed(
 	};
 }
 
+/*
+ * The stand-in for a tool that brings no renderer of its own: the arguments, under the top rule
+ * that already names the tool, and the text of the result.
+ */
+const genericCall: NonNullable<ToolRenderers["renderCall"]> = (args, theme, context) =>
+	new Text(callText(args, theme, context.expanded), 0, 0);
+
+const genericResult: NonNullable<ToolRenderers["renderResult"]> = (result, options, theme) =>
+	new Text(resultText(result, options.expanded, theme), 0, 0);
+
+/**
+ * The phase the call closes with while it still has no result: writing the arguments, then waiting
+ * to run. A call with a result, live or replayed, stays open for the result half to close.
+ */
+function phaseOf(context: {
+	isPartial: boolean;
+	executionStarted: boolean;
+	argsComplete: boolean;
+}): Phase | undefined {
+	if (!context.isPartial || context.executionStarted) return undefined;
+	return context.argsComplete ? "waiting" : "writing";
+}
+
+function callText(args: unknown, theme: Theme, expanded: boolean): string {
+	if (args === null || args === undefined) return "";
+
+	const entries: [string, unknown][] =
+		typeof args === "object" && !Array.isArray(args) ? Object.entries(args) : [["args", args]];
+	if (entries.length === 0) return "";
+
+	if (expanded) {
+		const lines = entries.map(([key, value]) => {
+			const text =
+				typeof value === "string" ? value : (JSON.stringify(value, null, 2) ?? String(value));
+			return `  ${key}: ${replaceTabs(text).split("\n").join("\n    ")}`;
+		});
+		return theme.fg("muted", lines.join("\n"));
+	}
+
+	const pairs = entries
+		.map(([key, value]) => `${key}=${JSON.stringify(value) ?? String(value)}`)
+		.join(" ");
+	const preview =
+		pairs.length > COLLAPSED_ARGS_CHARS ? `${pairs.slice(0, COLLAPSED_ARGS_CHARS - 3)}...` : pairs;
+	return theme.fg("muted", preview);
+}
+
+function resultText(
+	result: { content: readonly { type: string; text?: string }[] },
+	expanded: boolean,
+	theme: Theme,
+): string {
+	const text = result.content
+		.filter((block) => block.type === "text")
+		.map((block) => stripTerminalSequences(block.text ?? "").replace(/\r/g, ""))
+		.join("\n");
+	if (text === "") return "";
+
+	const lines = text.split("\n");
+	const shown = expanded ? lines : lines.slice(0, RESULT_PREVIEW_LINES);
+	const printed = shown.map((line) => theme.fg("toolOutput", line));
+	if (shown.length < lines.length)
+		printed.push(
+			theme.fg("muted", `... (${lines.length - shown.length} more lines, ${expandHint(theme)})`),
+		);
+	return printed.join("\n");
+}
+
+function expandHint(theme: Theme): string {
+	const keys = getKeybindings().getKeys("app.tools.expand");
+	if (keys.length === 0) return theme.fg("muted", "expand");
+	return `${theme.fg("dim", keys.join("/"))}${theme.fg("muted", " to expand")}`;
+}
+
+function replaceTabs(text: string): string {
+	return text.replace(/\t/g, "   ");
+}
+
 interface FrameParts {
 	theme: Theme;
 	body: Component;

package/src/desktop/palette.ts

@@ -1,193 +0,0 @@
-import type { ThemeColor } from "@earendil-works/pi-coding-agent";
-
-export const DESKTOP_THEME = "desktop";
-
-export type Mode = "dark" | "light";
-
-export interface DesktopColors {
-	mode: Mode;
-	roles: Readonly<Record<string, string>>;
-	terminal: Readonly<Record<string, string>>;
-}
-
-export interface ThemeJson {
-	$schema: string;
-	name: string;
-	vars: Record<string, string>;
-	colors: Record<string, string>;
-	export: { pageBg: string; cardBg: string; infoBg: string };
-}
-
-const HEX = /^#[0-9a-f]{6}$/i;
-
-export function parseDesktopColors(json: unknown, mode?: Mode): DesktopColors | undefined {
-	if (!isRecord(json) || !isRecord(json.colors) || !isRecord(json.dank16)) return undefined;
-	const chosen: Mode = mode ?? (json.mode === "light" ? "light" : "dark");
-	const roles = json.colors[chosen];
-	if (!isRecord(roles)) return undefined;
-
-	const terminal: Record<string, string> = {};
-	for (const [name, value] of Object.entries(json.dank16)) {
-		const hex = isRecord(value) ? (value[chosen] ?? value.default) : value;
-		if (typeof hex === "string" && HEX.test(hex)) terminal[name] = hex;
-	}
-
-	const material: Record<string, string> = {};
-	for (const [name, value] of Object.entries(roles)) {
-		if (typeof value === "string" && HEX.test(value)) material[name] = value;
-	}
-	return { mode: chosen, roles: material, terminal };
-}
-
-const REQUIRED_ROLES = [
-	"primary",
-	"secondary",
-	"tertiary",
-	"error",
-	"error_container",
-	"outline",
-	"outline_variant",
-	"on_surface",
-	"on_surface_variant",
-	"surface",
-	"surface_container_low",
-	"surface_container",
-	"surface_container_high",
-	"surface_container_highest",
-];
-const REQUIRED_TERMINAL = ["color1", "color2", "color3", "color6", "color9"];
-
-export function missingColors(colors: DesktopColors): string[] {
-	return [
-		...REQUIRED_ROLES.filter((role) => colors.roles[role] === undefined),
-		...REQUIRED_TERMINAL.filter((name) => colors.terminal[name] === undefined),
-	];
-}
-
-export function desktopTheme(colors: DesktopColors): ThemeJson {
-	const role = (name: string): string => colors.roles[name] ?? "#808080";
-	const term = (name: string): string => colors.terminal[name] ?? "#808080";
-
-	const vars: Record<string, string> = {
-		primary: role("primary"),
-		secondary: role("secondary"),
-		tertiary: role("tertiary"),
-		error: role("error"),
-		outline: role("outline"),
-		outlineVariant: role("outline_variant"),
-		text: role("on_surface"),
-		subtext: role("on_surface_variant"),
-		surface: role("surface"),
-		containerLow: role("surface_container_low"),
-		container: role("surface_container"),
-		containerHigh: role("surface_container_high"),
-		containerHighest: role("surface_container_highest"),
-		red: term("color1"),
-		green: term("color2"),
-		yellow: term("color3"),
-		cyan: term("color6"),
-		brightRed: term("color9"),
-		successBg: mix(role("surface_container_low"), term("color2"), 0.12),
-		errorBg: mix(role("surface_container_low"), role("error"), 0.14),
-		infoBg: mix(role("surface_container"), term("color3"), 0.1),
-	};
-
-	const colorsByToken: Record<ThemeColor | BackgroundToken, string> = {
-		accent: "primary",
-		border: "outline",
-		borderAccent: "primary",
-		borderMuted: "outlineVariant",
-		success: "green",
-		error: "error",
-		warning: "yellow",
-		muted: "subtext",
-		dim: "outline",
-		text: "text",
-		thinkingText: "subtext",
-
-		selectedBg: "containerHigh",
-		scrollbarTrack: "outlineVariant",
-		scrollbarThumb: "subtext",
-		searchMatchBg: "containerHighest",
-		searchMatchText: "text",
-		userMessageBg: "container",
-		userMessageText: "text",
-		customMessageBg: "containerLow",
-		customMessageText: "text",
-		customMessageLabel: "tertiary",
-		toolPendingBg: "containerLow",
-		toolSuccessBg: "successBg",
-		toolErrorBg: "errorBg",
-		toolTitle: "text",
-		toolOutput: "subtext",
-
-		mdHeading: "tertiary",
-		mdLink: "primary",
-		mdLinkUrl: "outline",
-		mdCode: "secondary",
-		mdCodeBlock: "text",
-		mdCodeBlockBorder: "outlineVariant",
-		mdQuote: "subtext",
-		mdQuoteBorder: "outlineVariant",
-		mdHr: "outlineVariant",
-		mdListBullet: "primary",
-
-		toolDiffAdded: "green",
-		toolDiffRemoved: "red",
-		toolDiffContext: "subtext",
-
-		syntaxComment: "outline",
-		syntaxKeyword: "primary",
-		syntaxFunction: "tertiary",
-		syntaxVariable: "text",
-		syntaxString: "green",
-		syntaxNumber: "yellow",
-		syntaxType: "cyan",
-		syntaxOperator: "subtext",
-		syntaxPunctuation: "subtext",
-
-		thinkingOff: "outlineVariant",
-		thinkingMinimal: "outline",
-		thinkingLow: "secondary",
-		thinkingMedium: "primary",
-		thinkingHigh: "tertiary",
-		thinkingXhigh: "brightRed",
-		thinkingMax: "red",
-
-		bashMode: "green",
-	};
-
-	return {
-		$schema:
-			"https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
-		name: DESKTOP_THEME,
-		vars,
-		colors: colorsByToken,
-		export: { pageBg: vars.surface ?? "", cardBg: vars.container ?? "", infoBg: vars.infoBg ?? "" },
-	};
-}
-
-type BackgroundToken =
-	| "selectedBg"
-	| "searchMatchBg"
-	| "userMessageBg"
-	| "customMessageBg"
-	| "toolPendingBg"
-	| "toolSuccessBg"
-	| "toolErrorBg";
-
-export function mix(base: string, tint: string, amount: number): string {
-	const a = channels(base);
-	const b = channels(tint);
-	const mixed = a.map((value, index) => Math.round(value + ((b[index] ?? value) - value) * amount));
-	return `#${mixed.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
-}
-
-function channels(hex: string): number[] {
-	const value = HEX.test(hex) ? hex.slice(1) : "808080";
-	return [0, 2, 4].map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16));
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}

package/src/desktop/sync.ts

@@ -1,79 +0,0 @@
-import { type FSWatcher, watch } from "node:fs";
-import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { homedir } from "node:os";
-import { basename, dirname, join } from "node:path";
-
-import { getAgentDir } from "@earendil-works/pi-coding-agent";
-
-import { DESKTOP_THEME, desktopTheme, missingColors, parseDesktopColors } from "./palette.ts";
-
-const SETTLE_MS = 250;
-
-export type SyncResult =
-	| { kind: "written"; path: string }
-	| { kind: "unchanged"; path: string }
-	| { kind: "missing" }
-	| { kind: "invalid"; reason: string };
-
-export function themePath(): string {
-	return join(getAgentDir(), "themes", `${DESKTOP_THEME}.json`);
-}
-
-export function expandHome(path: string): string {
-	return path === "~" || path.startsWith("~/") ? join(homedir(), path.slice(1)) : path;
-}
-
-export async function syncDesktopTheme(source: string): Promise<SyncResult> {
-	let raw: string;
-	try {
-		raw = await readFile(expandHome(source), "utf8");
-	} catch {
-		return { kind: "missing" };
-	}
-
-	let json: unknown;
-	try {
-		json = JSON.parse(raw);
-	} catch {
-		return { kind: "invalid", reason: "the palette file is not JSON" };
-	}
-
-	const colors = parseDesktopColors(json);
-	if (colors === undefined) return { kind: "invalid", reason: "not a DankMaterialShell palette" };
-	const missing = missingColors(colors);
-	if (missing.length > 0) return { kind: "invalid", reason: `missing ${missing.join(", ")}` };
-
-	const path = themePath();
-	const next = `${JSON.stringify(desktopTheme(colors), null, "\t")}\n`;
-	const current = await readFile(path, "utf8").catch(() => undefined);
-	if (current === next) return { kind: "unchanged", path };
-
-	await mkdir(dirname(path), { recursive: true });
-	await writeFile(path, next);
-	return { kind: "written", path };
-}
-
-/** Watches the folder: an atomic write replaces the file, and a watch on the old one goes quiet. */
-export function watchDesktopPalette(source: string, changed: () => void): () => void {
-	const path = expandHome(source);
-	let timer: ReturnType<typeof setTimeout> | undefined;
-	let watcher: FSWatcher | undefined;
-
-	try {
-		watcher = watch(dirname(path), (_event, file) => {
-			if (file !== null && file !== basename(path)) return;
-			if (timer !== undefined) clearTimeout(timer);
-			timer = setTimeout(changed, SETTLE_MS);
-			timer.unref?.();
-		});
-		watcher.unref?.();
-		watcher.on("error", () => watcher?.close());
-	} catch {
-		return () => {};
-	}
-
-	return () => {
-		if (timer !== undefined) clearTimeout(timer);
-		watcher?.close();
-	};
-}