@adeildo/pi-look 5.7.2 → 5.9.0

package/README.md

@@ -72,3 +72,12 @@ The look never names a colour. Every piece names a theme token, so it follows wh
 The framed editor, and the idea of writing into its borders, come from [pi-open-tui](https://github.com/OldSuns/pi-open-tui), which this replaces. The segments with priorities come from [oh-my-pi](https://github.com/can1357/oh-my-pi).
 
 Part of [pi-harness](https://github.com/felipeadeildo/pi-harness), which brings every piece in one install.
+
+## License
+
+MIT
+
+<p align="center">
+  <a href="https://adeildo.dev"><img src="https://adeildo.dev/assets/images/cat.svg" width="42" height="42" alt="adeildo.dev"></a><br>
+  Brought to you by <a href="https://adeildo.dev">adeildo.dev</a>
+</p>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.7.2",
+	"version": "5.9.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.7.2"
+		"@adeildo/pi-kit": "5.9.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/data/snapshot.ts

@@ -1,6 +1,6 @@
 import { hostname } from "node:os";
 
-import type { AccountState, SessionTasks } from "@adeildo/pi-kit";
+import type { AccountState, PeerMark, SessionTasks } from "@adeildo/pi-kit";
 import { VERSION, type ExtensionContext, type SessionEntry } from "@earendil-works/pi-coding-agent";
 
 import type { GitState } from "./git.ts";
@@ -51,6 +51,10 @@ export interface Snapshot {
 	statuses: ReadonlyMap<string, string>;
 	/** What the session is doing, when a tasks feature keeps it. */
 	tasks: SessionTasks | undefined;
+	/** The other sessions in this folder, when a peers feature keeps them. */
+	peers: PeerMark[];
+	/** Messages a peer sent this session that its agent has not read yet. */
+	peersUnread: number;
 }
 
 export function emptySnapshot(): Snapshot {
@@ -77,6 +81,8 @@ export function emptySnapshot(): Snapshot {
 		averages: { decode: undefined, prefill: undefined },
 		statuses: new Map(),
 		tasks: undefined,
+		peers: [],
+		peersUnread: 0,
 	};
 }
 
@@ -89,6 +95,8 @@ export interface LiveInputs {
 	run: RunView | undefined;
 	statuses: ReadonlyMap<string, string>;
 	tasks?: SessionTasks | undefined;
+	peers?: PeerMark[] | undefined;
+	peersUnread?: number | undefined;
 }
 
 interface Derived {
@@ -139,6 +147,8 @@ export class SnapshotReader {
 					.filter(([, text]) => text !== ""),
 			),
 			tasks: live.tasks,
+			peers: live.peers ?? [],
+			peersUnread: live.peersUnread ?? 0,
 		};
 	}
 

package/src/index.ts

@@ -1,12 +1,12 @@
 import {
 	accountStateOf,
 	createApp,
+	currentPeers,
 	currentTasks,
 	defineFeature,
 	drawSkillRefs,
 	type FeatureScope,
 	SKILL_REF,
-	type SessionTasks,
 	skillNames,
 } from "@adeildo/pi-kit";
 import type {
@@ -17,7 +17,7 @@ import type {
 import type { TUI } from "@earendil-works/pi-tui";
 
 import { type GitState, readGit } from "./data/git.ts";
-import { emptySnapshot, type Snapshot, SnapshotReader } from "./data/snapshot.ts";
+import { emptySnapshot, type LiveInputs, 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";
@@ -323,8 +323,13 @@ function createScreen(
 	};
 }
 
-function tasksOf(scope: FeatureScope): { tasks?: SessionTasks } {
-	return { tasks: currentTasks(scope.events)?.state };
+function tasksOf(scope: FeatureScope): Pick<LiveInputs, "tasks" | "peers" | "peersUnread"> {
+	const peers = currentPeers(scope.events);
+	return {
+		tasks: currentTasks(scope.events)?.state,
+		peers: peers?.peers,
+		peersUnread: peers?.unread,
+	};
 }
 
 function installEditor(

package/src/render/fit.ts

@@ -55,7 +55,7 @@ export function fitRegions(
 	return joined.map((text) =>
 		text === ""
 			? ""
-			: truncateToWidth(text, Math.max(0, width - overhead), options.ellipsis ?? "…"),
+			: truncateToWidth(text, Math.max(0, width - overhead), options.ellipsis ?? "..."),
 	);
 }
 

package/src/render/format.ts

@@ -72,11 +72,11 @@ export function shortenPath(cwd: string, home: string | undefined, maxWidth: num
 	let kept = "";
 	for (let index = parts.length - 1; index > 0; index--) {
 		const candidate = `${sep}${parts[index] ?? ""}${kept}`;
-		if (visibleWidth(`…${candidate}`) > maxWidth) break;
+		if (visibleWidth(`...${candidate}`) > maxWidth) break;
 		kept = candidate;
 	}
 	if (kept === "") return truncateTail(parts.at(-1) ?? full, maxWidth);
-	return `…${kept}`;
+	return `...${kept}`;
 }
 
 export function basename(cwd: string): string {
@@ -92,7 +92,7 @@ export function truncateTail(text: string, maxWidth: number): string {
 	if (maxWidth <= 0) return "";
 	if (visibleWidth(text) <= maxWidth) return text;
 	const chars = [...text];
-	let width = 1;
+	let width = 3;
 	let start = chars.length;
 	while (start > 0) {
 		const next = visibleWidth(chars[start - 1] ?? "");
@@ -100,10 +100,10 @@ export function truncateTail(text: string, maxWidth: number): string {
 		width += next;
 		start--;
 	}
-	return `…${chars.slice(start).join("")}`;
+	return `...${chars.slice(start).join("")}`;
 }
 
-export function fitWidth(text: string, width: number, ellipsis = "…"): string {
+export function fitWidth(text: string, width: number, ellipsis = "..."): string {
 	return truncateToWidth(text, Math.max(0, width), ellipsis);
 }
 

package/src/render/glyphs.ts

@@ -8,6 +8,7 @@ export interface Glyphs {
 	host: string;
 	session: string;
 	tasks: string;
+	peers: string;
 	waiting: string;
 	queued: string;
 	version: string;
@@ -57,6 +58,7 @@ export const NERD: Glyphs = {
 	host: "\u{f108}", // nf-fa-desktop
 	session: "\u{f02b}", // nf-fa-tag
 	tasks: "\u{f04fe}", // nf-md-target
+	peers: "\u{f0c0}", // nf-fa-users
 	waiting: "\u{f024}", // nf-fa-flag
 	queued: "\u{f051f}", // nf-md-timer_sand
 	version: "π",
@@ -76,7 +78,7 @@ export const NERD: Glyphs = {
 	fill: "█",
 	empty: "░",
 	levels: ["▂", "▃", "▄", "▅", "▆", "▇"],
-	ellipsis: "…",
+	ellipsis: "...",
 };
 
 export const UNICODE: Glyphs = {
@@ -87,6 +89,7 @@ export const UNICODE: Glyphs = {
 	host: "⌂",
 	session: "#",
 	tasks: "▸",
+	peers: "◆",
 	waiting: "⚑",
 	queued: "⧗",
 	version: "π",
@@ -106,7 +109,7 @@ export const UNICODE: Glyphs = {
 	fill: "█",
 	empty: "░",
 	levels: ["▂", "▃", "▄", "▅", "▆", "▇"],
-	ellipsis: "…",
+	ellipsis: "...",
 };
 
 export const ASCII: Glyphs = {
@@ -116,6 +119,7 @@ export const ASCII: Glyphs = {
 	host: "@",
 	session: "#",
 	tasks: ">",
+	peers: "@",
 	waiting: "",
 	queued: "",
 	version: "v",

package/src/render/paint.ts

@@ -80,6 +80,8 @@ export interface Paint {
 	stress(percent: number, text: string): string;
 	money(amount: number, text: string): string;
 	frame(text: string): string;
+	/** A theme colour a package named in a contract, like a peer's own colour. */
+	raw(color: string, text: string): string;
 }
 
 export function themePaint(theme: Theme, frame?: (text: string) => string): Paint {
@@ -94,6 +96,11 @@ export function themePaint(theme: Theme, frame?: (text: string) => string): Pain
 		stress: (percent, text) => theme.fg(stressToken(percent), text),
 		money: (amount, text) => theme.fg(moneyToken(amount), text),
 		frame: frame ?? ((text) => theme.fg("border", text)),
+		raw: (color, text) =>
+			theme.fg(
+				theme.colors[color as ThemeColor] === undefined ? "muted" : (color as ThemeColor),
+				text,
+			),
 	};
 }
 
@@ -120,6 +127,7 @@ export const PLAIN: Paint = {
 	stress: (_percent, text) => text,
 	money: (_amount, text) => text,
 	frame: identity,
+	raw: (_color, text) => text,
 };
 
 function identity(text: string): string {

package/src/render/segments.ts

@@ -1,4 +1,4 @@
-import { type AccountWindow, tasksWith } from "@adeildo/pi-kit";
+import { type AccountWindow, type PeerMark, tasksWith } from "@adeildo/pi-kit";
 import { visibleWidth } from "@earendil-works/pi-tui";
 
 import type { Snapshot } from "../data/snapshot.ts";
@@ -28,6 +28,7 @@ export const SEGMENT_IDS = [
 	"host",
 	"session",
 	"tasks",
+	"peers",
 	"version",
 	"clock",
 	"provider",
@@ -67,6 +68,7 @@ export function isSegmentId(value: string): value is SegmentId {
 const CLAIMED_BY_SEGMENT: Partial<Record<BuiltinSegment, string>> = {
 	model: "pi-providers:account",
 	tasks: "pi-tasks",
+	peers: "pi-peers",
 };
 
 export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<string> {
@@ -155,6 +157,29 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 				? undefined
 				: { text: `${mark(glyphs.host, paint, "host")}${paint.role("host", snapshot.host)}` },
 	},
+	peers: {
+		priority: 25,
+		describe:
+			"the other agents in this folder, each by the name it chose and in its colour, then @ how many messages wait for an answer",
+		// The whole folder, then one name, then the bare mark, as the line runs out of room.
+		render: ({ snapshot, glyphs, paint }) => {
+			const peers = snapshot.peers;
+			const mentions =
+				snapshot.peersUnread > 0 ? paint.role("waiting", `@${snapshot.peersUnread}`) : "";
+			const first = peers[0];
+			if (first === undefined) return mentions === "" ? undefined : { text: mentions };
+			const named = (peer: PeerMark) => paint.raw(peer.color, `${glyphs.peers} ${peer.handle}`);
+			const rest = peers.length > 1 ? paint.dim(` +${peers.length - 1}`) : "";
+			const full = joined([...peers].map(named).join("  "), mentions);
+			const short = joined(named(first) + rest, mentions);
+			const least = joined(paint.raw(first.color, glyphs.peers), mentions);
+			return {
+				text: full,
+				shrink: (width) =>
+					visibleWidth(full) <= width ? full : visibleWidth(short) <= width ? short : least,
+			};
+		},
+	},
 	tasks: {
 		priority: 30,
 		describe:
@@ -516,6 +541,11 @@ function quotaWindow(paint: Paint, window: AccountWindow): string {
 	return `${paint.dim(window.name)} ${used}${reset}`;
 }
 
+/** The parts that have something to say, with the gap the footer uses between things. */
+function joined(...parts: string[]): string {
+	return parts.filter((part) => part !== "").join("  ");
+}
+
 function mark(glyph: string, paint: Paint, role: Role): string {
 	return glyph === "" ? "" : `${paint.role(role, glyph)} `;
 }

package/src/settings.ts

@@ -89,7 +89,7 @@ export const stripRight = slot(
 	"stripRight",
 	"Answer strip, on the right",
 	"The other side of that line. When it does not fit beside the strip, it gets a line of its own under it.",
-	["tasks"],
+	["tasks", "peers"],
 );
 export const topLeft = slot("frame.topLeft", "Frame, top left", "After the working spinner.", [
 	"branch",

package/src/ui/header.ts

@@ -110,7 +110,7 @@ export class HeaderComponent implements Component {
 		const hints = HINTS()
 			.map((hint) => `${paint.role("brand", hint.key)} ${paint.dim(hint.does)}`)
 			.join(separator);
-		return [first, hints, ""].map((line) => truncateToWidth(` ${line}`, width, "…"));
+		return [first, hints, ""].map((line) => truncateToWidth(` ${line}`, width, "..."));
 	}
 
 	#title(paint: Paint): string {
@@ -192,7 +192,7 @@ export function halfBlocks(pixels: readonly string[]): string[] {
 }
 
 function pad(text: string, width: number): string {
-	const clipped = truncateToWidth(text, Math.max(0, width), "…");
+	const clipped = truncateToWidth(text, Math.max(0, width), "...");
 	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
 }
 

package/src/ui/tool-frame.ts

@@ -358,7 +358,7 @@ function inside(lines: readonly string[], width: number, theme: Theme): string[]
 	const inner = room(width);
 	return trim(lines).map((line) => {
 		// Measuring is cheap, and cutting a line that already fits is not.
-		const text = visibleWidth(line) > inner ? truncateToWidth(line, inner, "\u2026", true) : line;
+		const text = visibleWidth(line) > inner ? truncateToWidth(line, inner, "...", true) : line;
 		const pad = " ".repeat(Math.max(0, inner - visibleWidth(text)));
 		return `${paint("\u2502")} ${text}${pad} ${paint("\u2502")}`;
 	});