@adeildo/pi-look 5.4.0 → 5.6.0

package/README.md

@@ -15,7 +15,7 @@
 <!-- docs:look/preview -->
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/felipeadeildo/pi-harness/main/packages/look/assets/preview.png" alt="Pi with the look: the start card, then the strip with the stopwatch and the last call, the framed editor with the branch, the model and the context, and below it the cost, the tokens, the cache and the average speeds." width="860">
+  <img src="https://raw.githubusercontent.com/felipeadeildo/pi-harness/main/packages/look/assets/preview.png" alt="Pi with the look: the start card, then the strip with the stopwatch and the last call, the task under way with how many wait, are queued and are done, the framed editor with the branch, the model and the context, and below it the cost, the tokens, the cache and the average speeds." width="860">
   <br>
   <em>The start card, then a prompt halfway through its answer.</em>
 </p>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-look",
-	"version": "5.4.0",
+	"version": "5.6.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.4.0"
+		"@adeildo/pi-kit": "5.6.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/data/snapshot.ts

@@ -1,6 +1,6 @@
 import { hostname } from "node:os";
 
-import type { AccountState } from "@adeildo/pi-kit";
+import type { AccountState, SessionTasks } from "@adeildo/pi-kit";
 import { VERSION, type ExtensionContext, type SessionEntry } from "@earendil-works/pi-coding-agent";
 
 import type { GitState } from "./git.ts";
@@ -49,6 +49,8 @@ export interface Snapshot {
 	run: RunView | undefined;
 	averages: Averages;
 	statuses: ReadonlyMap<string, string>;
+	/** What the session is doing, when a tasks feature keeps it. */
+	tasks: SessionTasks | undefined;
 }
 
 export function emptySnapshot(): Snapshot {
@@ -74,6 +76,7 @@ export function emptySnapshot(): Snapshot {
 		run: undefined,
 		averages: { decode: undefined, prefill: undefined },
 		statuses: new Map(),
+		tasks: undefined,
 	};
 }
 
@@ -85,6 +88,7 @@ export interface LiveInputs {
 	last: RequestView | undefined;
 	run: RunView | undefined;
 	statuses: ReadonlyMap<string, string>;
+	tasks?: SessionTasks | undefined;
 }
 
 interface Derived {
@@ -134,6 +138,7 @@ export class SnapshotReader {
 					.map(([key, text]): [string, string] => [key, sanitize(text)])
 					.filter(([, text]) => text !== ""),
 			),
+			tasks: live.tasks,
 		};
 	}
 

package/src/data/totals.ts

@@ -1,3 +1,4 @@
+import { tasksUsageOf } from "@adeildo/pi-kit";
 import type { SessionEntry } from "@earendil-works/pi-coding-agent";
 
 export interface Totals {
@@ -61,6 +62,7 @@ export function totalsOf(entries: readonly SessionEntry[]): Totals {
 			add(totals, entry.message.usage);
 		else if ((entry.type === "branch_summary" || entry.type === "compaction") && entry.usage)
 			add(totals, entry.usage);
+		else if (entry.type === "custom") addTasks(totals, tasksUsageOf(entry));
 	}
 
 	return totals;
@@ -126,6 +128,14 @@ function isRecord(
 	);
 }
 
+// The tasks package's model calls are not pi's, so pi does not count them. They count here.
+function addTasks(totals: Totals, usage: ReturnType<typeof tasksUsageOf>): void {
+	if (usage === undefined) return;
+	totals.input += usage.input;
+	totals.output += usage.output;
+	totals.cost += usage.cost;
+}
+
 function add(totals: Totals, usage: UsageLike): void {
 	totals.input += usage.input;
 	totals.output += usage.output;

package/src/index.ts

@@ -1,10 +1,12 @@
 import {
 	accountStateOf,
 	createApp,
+	currentTasks,
 	defineFeature,
 	drawSkillRefs,
 	type FeatureScope,
 	SKILL_REF,
+	type SessionTasks,
 	skillNames,
 } from "@adeildo/pi-kit";
 import type {
@@ -40,6 +42,7 @@ import {
 	SECTIONS,
 	SEPARATORS,
 	strip,
+	stripRight,
 	topLeft,
 	topRight,
 } from "./settings.ts";
@@ -218,6 +221,7 @@ export const look = defineFeature({
 
 const SLOT_TITLES: Record<SlotName, string> = {
 	strip: "Above the editor, this answer",
+	stripRight: "Above the editor, on the right",
 	topLeft: "Frame, top left",
 	topRight: "Frame, top right",
 	bottomLeft: "Frame, bottom left",
@@ -266,6 +270,7 @@ function createScreen(
 ): Screen {
 	const slots: Record<SlotName, typeof strip> = {
 		strip,
+		stripRight,
 		topLeft,
 		topRight,
 		bottomLeft,
@@ -287,6 +292,7 @@ function createScreen(
 				last: telemetry.last(),
 				run: telemetry.run(),
 				statuses: live.footerData?.getExtensionStatuses() ?? new Map(),
+				...tasksOf(scope),
 			});
 			live.frame = snapshot;
 			queueMicrotask(() => {
@@ -317,6 +323,10 @@ function createScreen(
 	};
 }
 
+function tasksOf(scope: FeatureScope): { tasks?: SessionTasks } {
+	return { tasks: currentTasks(scope.events)?.state };
+}
+
 function installEditor(
 	ctx: ExtensionContext,
 	screen: Screen,

package/src/render/fit.ts

@@ -4,6 +4,8 @@ export interface Piece {
 	text: string;
 	compact?: string | undefined;
 	priority: number;
+	/** How the piece fits in less room than its compact form, when it is alone on the line. */
+	shrink?: (width: number) => string;
 }
 
 export interface FitOptions {
@@ -45,6 +47,10 @@ export function fitRegions(
 	const joined = join(regions.length, slots, options.separator);
 	if (measure() <= width) return joined;
 
+	const kept = slots.filter((slot) => !slot.dropped);
+	const alone = regions.length === 1 ? kept[0]?.piece.shrink : undefined;
+	if (kept.length === 1 && alone !== undefined) return [alone(width)];
+
 	const overhead = options.regionOverhead ?? 0;
 	return joined.map((text) =>
 		text === ""

package/src/render/glyphs.ts

@@ -7,6 +7,9 @@ export interface Glyphs {
 	branch: string;
 	host: string;
 	session: string;
+	tasks: string;
+	waiting: string;
+	queued: string;
 	version: string;
 	model: string;
 	effort: string;
@@ -53,6 +56,9 @@ export const NERD: Glyphs = {
 	branch: "\u{e0a0}", // nf-pl-branch
 	host: "\u{f108}", // nf-fa-desktop
 	session: "\u{f02b}", // nf-fa-tag
+	tasks: "\u{f04fe}", // nf-md-target
+	waiting: "\u{f024}", // nf-fa-flag
+	queued: "\u{f051f}", // nf-md-timer_sand
 	version: "π",
 	model: "\u{f06a9}", // nf-md-robot
 	effort: "\u{f09d1}", // nf-md-brain
@@ -80,6 +86,9 @@ export const UNICODE: Glyphs = {
 	branch: "⎇",
 	host: "⌂",
 	session: "#",
+	tasks: "▸",
+	waiting: "⚑",
+	queued: "⧗",
 	version: "π",
 	model: "◆",
 	effort: "✦",
@@ -106,6 +115,9 @@ export const ASCII: Glyphs = {
 	branch: "",
 	host: "@",
 	session: "#",
+	tasks: ">",
+	waiting: "",
+	queued: "",
 	version: "v",
 	model: "",
 	effort: "",

package/src/render/paint.ts

@@ -11,6 +11,9 @@ export type Role =
 	| "conflicted"
 	| "host"
 	| "session"
+	| "tasks"
+	| "waiting"
+	| "queued"
 	| "version"
 	| "provider"
 	| "model"
@@ -36,6 +39,9 @@ export const ROLE_TOKENS: Record<Role, ThemeColor> = {
 	conflicted: "error",
 	host: "syntaxType",
 	session: "mdHeading",
+	tasks: "accent",
+	waiting: "warning",
+	queued: "muted",
 	version: "muted",
 	provider: "syntaxKeyword",
 	model: "text",

package/src/render/segments.ts

@@ -1,4 +1,5 @@
-import type { AccountWindow } from "@adeildo/pi-kit";
+import { type AccountWindow, tasksWith } from "@adeildo/pi-kit";
+import { visibleWidth } from "@earendil-works/pi-tui";
 
 import type { Snapshot } from "../data/snapshot.ts";
 import { promptOf, tokensOf, type Totals } from "../data/totals.ts";
@@ -26,6 +27,7 @@ export const SEGMENT_IDS = [
 	"branch",
 	"host",
 	"session",
+	"tasks",
 	"version",
 	"clock",
 	"provider",
@@ -64,6 +66,7 @@ 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",
+	tasks: "pi-tasks",
 };
 
 export function claimedStatuses(slots: readonly (readonly SegmentId[])[]): Set<string> {
@@ -152,6 +155,35 @@ export const SEGMENTS: Record<BuiltinSegment, Segment> = {
 				? undefined
 				: { text: `${mark(glyphs.host, paint, "host")}${paint.role("host", snapshot.host)}` },
 	},
+	tasks: {
+		priority: 30,
+		describe:
+			"what the agent is doing, then ⚑ how many tasks wait on you or on something outside, ⧗ how many are queued and ✓ how many are done, from the tasks package",
+		// The counts outlive the task's words: a short line cuts the words.
+		render: ({ snapshot, glyphs, paint }) => {
+			const state = snapshot.tasks;
+			if (state === undefined) return undefined;
+			const doing = tasksWith(state, "doing");
+			const step = doing[0]?.text ?? state.title;
+			const more = doing.length > 1 ? paint.dim(` +${doing.length - 1}`) : "";
+			const counts = [
+				tally(tasksWith(state, "waiting").length, glyphs.waiting, "waiting", paint),
+				tally(tasksWith(state, "queued").length, glyphs.queued, "queued", paint),
+				tally(tasksWith(state, "done").length, glyphs.done, "done", paint),
+			].filter((part) => part !== "");
+			if (step === undefined && counts.length === 0) return undefined;
+			// Between tasks the line stays, so what was done and what waits do not vanish with them.
+			const icon = mark(glyphs.tasks, paint, "tasks");
+			const words = (room: number) =>
+				step === undefined ? paint.dim("idle") : paint.text(fitWidth(step, room, glyphs.ellipsis));
+			const tail = `${more}${counts.length === 0 ? "" : `  ${counts.join("  ")}`}`;
+			const fixed = visibleWidth(icon) + visibleWidth(tail);
+			return {
+				text: `${icon}${words(Number.MAX_SAFE_INTEGER)}${tail}`,
+				shrink: (width) => `${icon}${words(Math.max(1, width - fixed))}${tail}`,
+			};
+		},
+	},
 	session: {
 		priority: 45,
 		describe: "the session name, once it has one",
@@ -488,6 +520,17 @@ function mark(glyph: string, paint: Paint, role: Role): string {
 	return glyph === "" ? "" : `${paint.role(role, glyph)} `;
 }
 
+/** `✓2` in the color of what it counts, like the branch's marks. ASCII icons have no glyph, so the word goes. */
+function tally(
+	size: number,
+	glyph: string,
+	role: "done" | "queued" | "waiting",
+	paint: Paint,
+): string {
+	if (size === 0) return "";
+	return paint.role(role, glyph === "" ? `${size} ${role}` : `${glyph} ${size}`);
+}
+
 function counted(value: number, glyph: string, role: Role, paint: Paint): string {
 	return value > 0 ? paint.role(role, `${glyph}${value}`) : "";
 }

package/src/settings.ts

@@ -85,6 +85,12 @@ export const strip = slot(
 	"The line above the editor: how long the agent has worked, and the last call that finished.",
 	["elapsed", "last"],
 );
+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"],
+);
 export const topLeft = slot("frame.topLeft", "Frame, top left", "After the working spinner.", [
 	"branch",
 	"session",
@@ -219,6 +225,7 @@ export const peek = setting({
 
 export const LOOK_SETTINGS = [
 	strip,
+	stripRight,
 	topLeft,
 	topRight,
 	bottomLeft,

package/src/ui/footer.ts

@@ -6,6 +6,8 @@ import type { Paint } from "../render/paint.ts";
 import { type Screen, type SlotName, slotPieces } from "./screen.ts";
 
 const GAP = 3;
+/** Room reserved for the strip, so its changing width never moves the right side between lines. */
+const STRIP_ROOM = 56;
 
 export function indentOf(screen: Screen): number {
 	const style = screen.frameStyle();
@@ -20,10 +22,23 @@ export class StripComponent implements Component {
 	}
 
 	render(width: number): string[] {
-		const indent = indentOf(this.#screen);
-		const line = renderSlot(this.#screen, "strip", width - indent * 2);
-		// Always one line, empty or not: a strip that appears with the first answer moves the editor.
-		return [line === "" ? "" : `${" ".repeat(indent)}${line}`];
+		const screen = this.#screen;
+		const indent = indentOf(screen);
+		const room = width - indent * 2;
+		const pad = (line: string) => (line === "" ? "" : `${" ".repeat(indent)}${line}`);
+		const right = slotPieces(screen, "stripRight", screen.snapshot(), screen.paint());
+		// Always one line, so the editor does not jump when the first answer arrives.
+		if (right.length === 0 || room <= 0) return [pad(renderSlot(screen, "strip", room))];
+
+		const full = fitLine(right, Number.MAX_SAFE_INTEGER, fitOptions(screen, screen.paint()));
+		const beside = room - visibleWidth(full) - GAP;
+		// Beside the strip, the right side stays whole and the strip gives way.
+		if (beside >= STRIP_ROOM) {
+			const left = renderSlot(screen, "strip", beside);
+			const gap = " ".repeat(Math.max(GAP, room - visibleWidth(left) - visibleWidth(full)));
+			return [pad(`${left}${gap}${full}`)];
+		}
+		return [pad(renderSlot(screen, "strip", room)), pad(renderSlot(screen, "stripRight", room))];
 	}
 
 	invalidate(): void {}

package/src/ui/screen.ts

@@ -8,6 +8,7 @@ import type { CursorStyle } from "../settings.ts";
 
 export type SlotName =
 	| "strip"
+	| "stripRight"
 	| "topLeft"
 	| "topRight"
 	| "bottomLeft"