pi-jar 0.1.2 → 0.1.3

package/src/shells.ts

@@ -1,10 +1,9 @@
 import { spawn, type ChildProcess } from "node:child_process";
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, Text, truncateToWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { Text } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { safeLine } from "./diff-view.ts";
 import { cleanText } from "./status.ts";
-import { contentRows, optionList, sidebarWidth, splitFrame } from "./split-view.ts";
 
 export const SHELL_TOOL = "jar_shell";
 export const SHELL_MESSAGE = "pi-jar.shell";
@@ -188,13 +187,14 @@ export class ShellManager {
 }
 
 type ShellMeta = Omit<ShellJob, "lines">;
-const elapsed = (job: ShellMeta | ShellJob, now = Date.now()) => {
-  const seconds = Math.max(0, Math.round(((job.endedAt ?? now) - job.startedAt) / 1000));
+/** `12s` / `3m 4s` since `startedAt`, up to `endedAt` once finished. */
+export const elapsed = (span: { startedAt: number; endedAt?: number }, now = Date.now()) => {
+  const seconds = Math.max(0, Math.round(((span.endedAt ?? now) - span.startedAt) / 1000));
   return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
 };
 export const shellState = (job: ShellMeta | ShellJob) => job.status === "running" ? "running"
   : job.status === "exited" ? `exited ${job.exitCode ?? "?"}` : job.status === "failed" ? `failed: ${cleanText(job.error ?? "", 60)}` : "killed";
-const describe = (job: ShellMeta | ShellJob) => `${job.id} · ${job.name} · ${shellState(job)} · ${elapsed(job)}${job.watch ? ` · watch /${job.watch}/${job.matched ? " matched" : ""}` : ""}`;
+export const describe = (job: ShellMeta | ShellJob) => `${job.id} · ${job.name} · ${shellState(job)} · ${elapsed(job)}${job.watch ? ` · watch /${job.watch}/${job.matched ? " matched" : ""}` : ""}`;
 const boundedTail = (lines: readonly string[], limit = MAX_TOOL_OUTPUT_CHARS): string => {
   let size = 0;
   const kept: string[] = [];
@@ -295,80 +295,3 @@ export function registerShells(pi: ExtensionAPI, shells: () => ShellManager | un
     }
   });
 }
-
-const SHELL_ACTIONS = [
-  { key: "x", label: "Kill the selected shell" },
-  { key: "f", label: "Follow the latest output" }
-] as const;
-
-/** Overlay: shells on the left, the selected shell's live output on the right; k kills. */
-export async function openShellsView(ctx: ExtensionContext, manager: ShellManager): Promise<void> {
-  if (!ctx.hasUI || ctx.mode !== "tui") return;
-  if (!manager.summaries().length) { ctx.ui.notify("pi-jar: no background shells (the agent starts them with jar_shell)", "info"); return; }
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
-    let selected = 0;
-    let follow = true;
-    let scroll = 0;
-    let rows = 0;
-    let width = 80;
-    let layout = { top: 1, rows: 0, leftWidth: 0, bodyX: 2, footerTop: 0 };
-    const fg = (color: string, text: string) => theme.fg(color as never, text);
-    const previous = manager.onChange;
-    const timer = setInterval(() => tui.requestRender(), 1000);
-    timer.unref?.();
-    manager.onChange = () => { previous?.(); tui.requestRender(); };
-    const close = () => { clearInterval(timer); manager.onChange = previous; done(); };
-    const component = {
-      invalidate() {},
-      handleInput(data: string) {
-        const jobs = manager.summaries();
-        if (matchesKey(data, Key.escape) || data === "q") return close();
-        if (matchesKey(data, Key.up) || data === "k") selected = Math.max(0, selected - 1);
-        else if (matchesKey(data, Key.down) || data === "j") selected = Math.min(jobs.length - 1, selected + 1);
-        else if (data === "x" || data === "K") { const job = jobs[selected]; if (job) { try { manager.kill(job.id); } catch (error) { ctx.ui.notify("pi-jar: " + String(error), "error"); } } }
-        else if (matchesKey(data, Key.pageUp)) { follow = false; scroll = Math.max(0, scroll - Math.max(1, rows - 2)); }
-        else if (matchesKey(data, Key.pageDown)) scroll += Math.max(1, rows - 2);
-        else if (data === "f" || data === "G") follow = true;
-        tui.requestRender();
-      },
-      handleMouse(event: TuiMouseEvent) {
-        const row = event.y - layout.top;
-        if (event.type === "wheel" && event.wheelDelta) { follow = false; scroll = Math.max(0, scroll + Math.sign(event.wheelDelta) * 3); tui.requestRender(); return { handled: true }; }
-        if (event.type !== "click" || event.button !== "left") return;
-        if (event.y === 0 && event.x >= width - 3) { close(); return { handled: true }; }
-        if (row >= 0 && row < layout.rows && layout.leftWidth && event.x < layout.leftWidth + 3 && row < manager.summaries().length) { selected = row; follow = true; tui.requestRender(); return { handled: true, focus: true }; }
-        const action = SHELL_ACTIONS[event.y - layout.footerTop];
-        if (action) { component.handleInput(action.key); return { handled: true }; }
-      },
-      render(available: number): string[] {
-        width = Math.max(24, available);
-        rows = contentRows(6 + SHELL_ACTIONS.length, 6);
-        const jobs = manager.summaries();
-        selected = Math.min(selected, Math.max(0, jobs.length - 1));
-        const job = jobs[selected];
-        const listWidth = sidebarWidth(width, 20, 34);
-        const bodyWidth = listWidth ? width - listWidth - 6 : width - 4;
-        const output = job ? manager.output(job.id, 400) : [];
-        const maxScroll = Math.max(0, output.length - rows);
-        scroll = follow ? maxScroll : Math.min(scroll, maxScroll);
-        if (scroll >= maxScroll) follow = true;
-        const list = jobs.slice(0, rows).map((item, index) => {
-          const color = item.status === "running" ? "accent" : item.status === "exited" && item.exitCode === 0 ? "success" : item.status === "killed" ? "dim" : "error";
-          const glyph = item.status === "running" ? "●" : item.status === "exited" && item.exitCode === 0 ? "✔" : item.status === "killed" ? "■" : "✖";
-          return fg(index === selected ? "accent" : "muted", (index === selected ? "▌" : " ")) + fg(color, glyph + " ") + fg(index === selected ? "accent" : "muted", truncateToWidth(`${item.id} ${item.name}`, Math.max(4, listWidth - 4)));
-        });
-        const body = output.slice(scroll, scroll + rows).map((line) => fg("muted", truncateToWidth(safeLine(line), bodyWidth)));
-        if (job && !output.length) body.push(fg("dim", "(no output yet)"));
-        const title = `⚙ SHELLS · ${manager.running()} running` + (job ? ` · ${describe(job)}` : "");
-        const footer = [
-          ...optionList(theme, SHELL_ACTIONS.map((item) => item.label), -1, SHELL_ACTIONS.map((item) => item.key)),
-          fg("dim", (job ? "$ " + truncateToWidth(cleanText(job.command, 400), Math.max(8, width - 60)) + "   " : "") + "↑↓ shell · PgUp/PgDn scroll · Esc close")
-        ];
-        const split = splitFrame(theme, width, title, list, body, footer, rows, listWidth);
-        layout = split.layout;
-        return split.lines;
-      }
-    };
-    return component;
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
-}

package/src/status.ts

@@ -62,6 +62,8 @@ export function collectStatuses(statuses: ReadonlyMap<string, string>, now: numb
     const key = cleanText(rawKey, 48);
     if (!key || typeof rawValue !== "string") continue;
     if (rawKey.startsWith("pi-jar.quota.")) continue;
+    // SoL-Pi already announces each saving in its own notification; reprinting it here duplicates it.
+    if (rawKey.startsWith("sol-pi")) continue;
     if (!rawKey.startsWith(ROLE_PREFIX)) {
       const value = cleanText(rawValue);
       // pi-jar's own indicators (such as `role:default`) are already self-describing.

package/src/welcome.ts

@@ -1,6 +1,7 @@
 import { sliceByColumn, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { FLAME_RAMP, FLAME_WIDTH, flameFrame, rgb, supportsTruecolor } from "./flame.ts";
 import { cleanText } from "./status.ts";
+import { iconSet, withIcon } from "./icons.ts";
 
 export type WelcomeAction = "settings" | "refresh" | "roles" | "plan" | "goal" | `resume:${number}`;
 
@@ -89,8 +90,11 @@ const center = (line: string, width: number) => {
   const left = Math.floor(room / 2);
   return " ".repeat(left) + line + " ".repeat(room - left);
 };
+// truncateToWidth re-segments every grapheme even when a line already fits; visibleWidth is
+// memoized by Pi, so measure first and only truncate real overflow (same output either way).
+const fitTo = (line: string, width: number) => visibleWidth(line) <= width ? line : truncateToWidth(line, width);
 const fixedCell = (line: string, width: number) => {
-  const value = truncateToWidth(line, width);
+  const value = fitTo(line, width);
   return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
 };
 
@@ -157,12 +161,12 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
   const label = (name: string, value: string, color: WelcomeColor = "muted") =>
     fg("dim", name.padEnd(labelWidth)) + fg(color, cleanText(value, 120));
 
-  const header = [fg("accent", "pi-jar" + (info.version ? " " + info.version : "")),
-    info.model ? fg("muted", cleanText(info.model, 40)) : fg("dim", "no model"),
+  const header = [fg("accent", withIcon("pi", "pi-jar" + (info.version ? " " + info.version : ""))),
+    info.model ? fg("muted", withIcon("model", cleanText(info.model, 40))) : fg("dim", "no model"),
     info.effort && info.effort !== "off" ? fg("muted", info.effort) : "",
     info.activeRole ? fg("warning", "role:" + cleanText(info.activeRole, 16)) : ""].filter(Boolean).join(fg("dim", " · "));
 
-  const git = info.branch ? "git " + cleanText(info.branch, 24) + (info.dirty ? " · dirty" : "") : "git unavailable";
+  const git = info.branch ? withIcon("branch", cleanText(info.branch, 24)) + (info.dirty ? " · dirty" : "") : withIcon("branch", "unavailable");
   const quota = info.quota != null ? `quota ${Math.round(info.quota)}%` : `quota ${info.quotaEnabled ? "unavailable" : "off"}`;
   const plan = info.plan?.enabled ? "◆ planning" + (info.plan.title ? " · " + info.plan.title : "")
     : info.plan?.title ? "last · " + info.plan.title + ` (${info.plan.steps} steps)` : "none · /plan <idea>";
@@ -185,7 +189,7 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
     cell(center(fg("dim", "— welcome to ") + fg("accent", "pi-jar") + fg("dim", " —"), inner)),
     cell(""),
     divider,
-    cell(label("PROJECT", (info.project || "unavailable") + " · " + git, info.dirty ? "warning" : "muted")),
+    cell(label("PROJECT", withIcon("folder", info.project || "unavailable") + " · " + git, info.dirty ? "warning" : "muted")),
     cell(label("SESSION", [info.context ?? "ctx ?", quota, info.cost ?? ""].filter(Boolean).join(" · "))),
     divider,
     cell(label("PLAN", plan, info.plan?.enabled ? "warning" : "muted")),
@@ -203,6 +207,16 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
   ];
 }
 
+const CARD_COLORS: readonly WelcomeColor[] = ["accent", "warning", "error", "muted", "dim"];
+let cardCache: { key: string; lines: string[] } | undefined;
+
+/** The card only changes with its inputs and theme; the flame beside it repaints every tick. */
+function cachedCard(width: number, fg: Paint, info: WelcomeInfo): string[] {
+  const key = `${width}\0${supportsTruecolor()}\0${iconSet()}\0${CARD_COLORS.map((color) => fg(color, "x")).join("")}\0${JSON.stringify(info)}`;
+  if (cardCache?.key !== key) cardCache = { key, lines: card(width, fg, info) };
+  return cardCache.lines;
+}
+
 /** Which welcome action (if any) sits under a zero-based cell in the rendered lines. */
 export function welcomeHit(lines: readonly string[], x: number, y: number): WelcomeAction | undefined {
   const line = lines[y];
@@ -227,7 +241,7 @@ export function welcomeSettingsHit(lines: readonly string[], x: number, y: numbe
 
 export function welcomeLines(width: number, frame: number, fg: Paint, info: WelcomeInfo = {}): string[] {
   if (width <= 0) return [];
-  const fit = (line: string) => truncateToWidth(line, width);
+  const fit = (line: string) => fitTo(line, width);
   const seed = info.flameSeed ?? 1;
   const flame = flameFrame(frame, seed, (color, text) => fg(color, text));
   if (width < 32) {
@@ -242,19 +256,25 @@ export function welcomeLines(width: number, frame: number, fg: Paint, info: Welc
     ];
   }
   const wide = width >= 72;
-  const flameArt = flame.map((line) => center(fixedCell(line, FLAME_WIDTH), ART_WIDTH));
+  // FlameSim rows are exactly FLAME_WIDTH single-cell glyphs, so center them without measuring:
+  // re-measuring freshly colored rows every 150 ms tick was most of the welcome's render time.
+  const flameLeft = " ".repeat(Math.floor((ART_WIDTH - FLAME_WIDTH) / 2));
+  const flameRight = " ".repeat(ART_WIDTH - FLAME_WIDTH - flameLeft.length);
+  const flameArt = flame.map((line) => flameLeft + line + flameRight);
   if (!wide) {
-    const art = [...flame.slice(2).map((line) => center(fixedCell(line, FLAME_WIDTH), Math.min(width, ART_WIDTH))),
-      ...PI_COMPACT.map((line) => fg("accent", center(line, Math.min(width, ART_WIDTH))))];
-    return [...art.map(fit), ...card(width, fg, info).map(fit), ""];
+    // width >= 32 here, so ART_WIDTH-wide art rows always fit.
+    const art = [...flameArt.slice(2), ...PI_COMPACT.map((line) => fg("accent", center(line, ART_WIDTH)))];
+    return [...art, ...cachedCard(width, fg, info).map(fit), ""];
   }
   const art = [...flameArt, ...PI_LARGE.map((line) => fg("accent", center(fixedCell(line, 21), ART_WIDTH)))];
-  const details = card(width - ART_WIDTH - 2, fg, info);
+  const details = cachedCard(width - ART_WIDTH - 2, fg, info);
   const topPad = Math.max(0, Math.floor((details.length - art.length) / 2));
   const artRows = [...Array.from({ length: topPad }, () => " ".repeat(ART_WIDTH)), ...art];
   const merged = Array.from({ length: Math.max(artRows.length, details.length) }, (_, index) => {
     const left = artRows[index] ?? " ".repeat(ART_WIDTH);
-    return fit(left + "  " + (details[index] ?? ""));
+    const right = details[index] ?? "";
+    // Every art row is ART_WIDTH cells; the cached card rows hit Pi's width cache.
+    return ART_WIDTH + 2 + visibleWidth(right) <= width ? left + "  " + right : truncateToWidth(left + "  " + right, width);
   });
   return [...merged, "", ""];
 }

package/src/working.ts

@@ -1,3 +1,4 @@
+import { icon } from "./icons.ts";
 import { cleanText } from "./status.ts";
 
 export type WorkingPhase = "idle" | "generating" | "tool" | "waiting";
@@ -54,7 +55,8 @@ export class WorkingState {
     const symbols = phase === "tool" ? ["◐", "◓", "◑", "◒"] : phase === "generating" ? ["✢", "✣", "✤", "✣"] : ["✢"];
     const frames = animations ? symbols.map((symbol) => fg(color, symbol)) : [fg(color, symbols[0] ?? "✢")];
     const details = phase === "idle" || this.startedAt === undefined ? "" :
-      ` (${duration(elapsed)}${this.outputTokens ? ` · ↓ ${tokenCount(this.outputTokens)} tokens` : ""}${effort && effort !== "off" ? ` · ${effort} effort` : ""})`;
+      ` (${duration(elapsed)}${this.outputTokens ? ` · ↓ ${tokenCount(this.outputTokens)} tokens` : ""}${effort && effort !== "off" ? ` · ${effort} effort` : ""}`
+      + `${phase === "waiting" ? "" : ` · ${icon("esc") === "esc" ? "esc" : icon("esc") + " esc"} to interrupt`})`;
     return { message: word ? fg(color, word) + fg("muted", details) : undefined, frames, color };
   }
 }