pi-async 0.1.0 → 0.2.0

package/src/tui/rail.ts

@@ -1,6 +1,10 @@
 import type { PiCtx } from "../core/notify.ts";
 import type { TaskRegistry } from "../core/registry.ts";
 import type { TaskSnapshot } from "../core/task.ts";
+import { visibleText } from "../core/output.ts";
+import { formatDuration } from "../core/duration.ts";
+import { envNumber } from "../core/env.ts";
+import { truncateToWidth } from "./width.ts";
 import type { TUI, TuiMouseEvent } from "@earendil-works/pi-tui";
 import { openPanel } from "./panel.ts";
 import { tuiHost } from "./host.ts";
@@ -9,6 +13,7 @@ type Theme = { fg(color: string, text: string): string; getFgAnsi?(color: string
 export interface RailWidget {
   render(width?: number): string[];
   handleMouse(event: TuiMouseEvent): { handled: boolean } | undefined;
+  handleInput?(data: string): { handled?: boolean } | void;
   dispose?(): void;
 }
 
@@ -58,33 +63,31 @@ function typeColor(theme: Theme, mode: string, used: Swatch[]): string {
 }
 
 const statePriority: Record<TaskSnapshot["status"], number> = { running: 0, pending: 1, completed: 2, failed: 3, killed: 4 };
-function stripAnsi(value: string): string {
-  return value.replace(/\u001b(?:\][\s\S]*?(?:\u0007|\u001b\\|\u009c)|\[[0-?]*[ -/]*[@-~]|[PX^_][\s\S]*?\u001b\\|[ -/]*[0-~])|\u009b[0-?]*[ -/]*[@-~]|\u009d[\s\S]*?(?:\u0007|\u001b\\|\u009c)/g, "");
-}
-
-function elapsed(snapshot: TaskSnapshot, now: number): string {
-  const seconds = Math.floor(Math.max(0, now - (snapshot.startedAt ?? snapshot.createdAt)) / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  return minutes < 60 ? `${minutes}m ${seconds % 60}s` : `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+/** Alias for tests / callers still importing elapsed; single source is core/duration. */
+export { formatDuration as elapsed };
+/** Fit a row to at most `width` code points; never exceed the budget (empty when width<=0). */
+/** Truncate a rail row by terminal cell width (CJK/emoji-aware via #7). */
+export function fitRailRow(row: string, width: number): string {
+  return truncateToWidth(row, Math.max(0, Math.floor(width)));
 }
 
 /** Pure, unstyled rail rows; active tasks first and a hard ten-row limit. */
 export function renderRailRows(snapshots: TaskSnapshot[], width: number, now = Date.now()): string[] {
-  const rows = snapshots.filter((task) => task.status !== "pending")
+  const rows = snapshots
     .slice().sort((a, b) => statePriority[a.status] - statePriority[b.status] || (b.startedAt ?? b.createdAt) - (a.startedAt ?? a.createdAt))
     .slice(0, 10)
-    .map((task) => `▶ ${stripAnsi(task.name).replace(/[\r\n]+/g, " ")} · ${task.status} · ${elapsed(task, now)}`);
+    .map((task) => `▶ ${visibleText(task.name)} · ${task.status} · ${formatDuration(task, now)}`);
   const limit = Math.max(0, Math.floor(width));
-  return rows.map((row) => Array.from(row).length > limit ? `${Array.from(row).slice(0, Math.max(0, limit - 1)).join("")}…` : row);
+  return rows.map((row) => truncateToWidth(row, limit));
 }
 
 /** Terminal-task linger window on the rail, overridable for tests. */
 function lingerMsFromEnv(): number {
-  const raw = Number(process.env.PI_ASYNC_RAIL_LINGER_MS ?? 30_000);
-  return Number.isFinite(raw) && raw >= 0 ? raw : 30_000;
+  return envNumber("PI_ASYNC_RAIL_LINGER_MS", 30_000, { integer: true, min: 0 });
 }
 
+const RAIL_PAGE = 5;
+
 export function createRailFactory(pi: PiCtx, registry: TaskRegistry, opts: { onOpenTask?: (taskId: string) => void } = {}): (tui: TUI, theme: Theme) => RailWidget {
   // Factory signature includes the extension context for future host-specific rail integrations.
   void pi;
@@ -98,31 +101,81 @@ export function createRailFactory(pi: PiCtx, registry: TaskRegistry, opts: { onO
     const ordered = (now = Date.now()): TaskSnapshot[] => registry.list({ includeHistory: true })
       .filter((task) => task.status === "running" || task.status === "pending"
         || (now - (task.finishedAt ?? task.startedAt ?? task.createdAt)) < lingerMs)
-      .sort((a, b) => statePriority[a.status] - statePriority[b.status] || (b.startedAt ?? b.createdAt) - (a.startedAt ?? b.createdAt));
+      .sort((a, b) => statePriority[a.status] - statePriority[b.status] || (b.startedAt ?? b.createdAt) - (a.startedAt ?? a.createdAt));
+    const clampScroll = (count: number, taskSlots: number): void => {
+      scroll = Math.max(0, Math.min(scroll, Math.max(0, count - taskSlots)));
+    };
+    const applyScroll = (delta: number): boolean => {
+      const count = ordered().length;
+      if (count <= 10) return false;
+      const taskSlots = 9; // reserve one row for the overflow indicator
+      const next = Math.max(0, Math.min(count - taskSlots, scroll + delta));
+      if (next === scroll) return false;
+      scroll = next;
+      latchedId = undefined;
+      tui.requestRender();
+      return true;
+    };
     const render = (width = 120): string[] => {
       const tasks = ordered();
-      scroll = Math.max(0, Math.min(scroll, Math.max(0, tasks.length - 10)));
-      const visible = tasks.slice(scroll, scroll + 10);
+      const overflow = tasks.length > 10;
+      // Reserve one of the ≤10 rows for the overflow indicator when needed.
+      const taskSlots = overflow ? 9 : 10;
+      clampScroll(tasks.length, taskSlots);
+      const visible = tasks.slice(scroll, scroll + taskSlots);
       hitRows = visible.map((task) => task.taskId);
       const used = [swatch(theme, "error"), swatch(theme, "dim")];
-      return renderRailRows(visible, width).map((row, index) => {
+      const rows = renderRailRows(visible, width).map((row, index) => {
         const task = visible[index];
         if (!task) return row;
         let token = "dim";
         if (task.status === "running") token = typeColor(theme, task.mode, used);
         else if (task.status === "completed") token = "success";
         else if (task.status === "failed") token = "error";
-        return theme.fg(token, row);
+        try {
+          return theme.fg(token, row) ?? row;
+        } catch {
+          return row;
+        }
       });
+      if (overflow) {
+        const hidden = tasks.length - visible.length;
+        const above = scroll;
+        const below = Math.max(0, tasks.length - scroll - visible.length);
+        const label = above > 0 && below > 0
+          ? `… +${hidden} more (↑${above} ↓${below})`
+          : above > 0
+            ? `… +${above} more ↑`
+            : `… +${below} more`;
+        const indicator = fitRailRow(label, width);
+        try {
+          rows.push(theme.fg("dim", indicator) ?? indicator);
+        } catch {
+          rows.push(indicator);
+        }
+        hitRows.push(""); // overflow row is not a task hit target
+      }
+      return rows;
     };
     return {
       render,
+      handleInput(data: string): { handled?: boolean } | void {
+        // PageUp / PageDown, and Ctrl+↑ / Ctrl+↓ when the rail has focus.
+        if (data === "\u001b[5~" || data === "\u001b[1;5A") {
+          return applyScroll(-RAIL_PAGE) ? { handled: true } : undefined;
+        }
+        if (data === "\u001b[6~" || data === "\u001b[1;5B") {
+          return applyScroll(RAIL_PAGE) ? { handled: true } : undefined;
+        }
+        return undefined;
+      },
       handleMouse(event: TuiMouseEvent): { handled: boolean } | undefined {
         const mouse = event as TuiMouseEvent & { type: string; y: number; button?: string; wheelDelta?: number };
         if (mouse.type === "wheel") {
           const count = ordered().length;
           if (count <= 10) return undefined;
-          const next = Math.max(0, Math.min(count - 10, scroll + Math.trunc(mouse.wheelDelta ?? 0)));
+          const taskSlots = 9;
+          const next = Math.max(0, Math.min(count - taskSlots, scroll + Math.trunc(mouse.wheelDelta ?? 0)));
           if (next === scroll) return undefined;
           scroll = next; latchedId = undefined; tui.requestRender(); return { handled: true };
         }

package/src/tui/status.ts

@@ -3,14 +3,35 @@ import type { TaskRegistry } from "../core/registry.ts";
 import { reportActivity } from "../core/bus.ts";
 import { tuiHost } from "./host.ts";
 
+const TERMINAL = new Set(["completed", "failed", "killed"]);
+
+/** Footer: running excludes pending; pending segment only when > 0; done = all terminal. */
 export function formatStatus(active: { running: number; pending: number }, done: number): string {
-  return ` ${active.running + active.pending} running · ${done} done `;
+  const pending = active.pending > 0 ? ` · ${active.pending} pending` : "";
+  return ` ${active.running} running${pending} · ${done} done `;
 }
 
 let clearedAt = 0;
 let refreshCurrent: (() => void) | undefined;
 let refreshInterval: ReturnType<typeof setInterval> | undefined;
 
+/** Shared /async-clear watermark used by footer and panel (#31). */
+export function clearedAtMs(): number {
+  return clearedAt;
+}
+
+/**
+ * Shared clear predicate: running/pending always visible; otherwise compare
+ * finishedAt ?? createdAt against the watermark (footer semantics).
+ */
+export function survivesClearCutoff(
+  task: { status: string; createdAt: number; finishedAt?: number },
+  cutoffMs: number = clearedAt,
+): boolean {
+  if (task.status === "running" || task.status === "pending") return true;
+  return (task.finishedAt ?? task.createdAt) >= cutoffMs;
+}
+
 export function disposeStatus(): void {
   if (refreshInterval) clearInterval(refreshInterval);
   refreshInterval = undefined;
@@ -30,7 +51,7 @@ export function initStatus(pi: PiCtx, registry: TaskRegistry): void {
   const setStatus = bound.ui["setStatus"] as ((key: string, text: string | undefined) => void) | undefined;
   const refresh = (): void => {
     const active = registry.activeCount();
-    const done = registry.list({ includeHistory: true }).filter((task) => task.status === "completed" && (task.finishedAt ?? task.createdAt) >= clearedAt).length;
+    const done = registry.list({ includeHistory: true }).filter((task) => TERMINAL.has(task.status) && survivesClearCutoff(task)).length;
     setStatus?.("pi-async", formatStatus(active, done));
     reportActivity(pi, active);
   };

package/src/tui/width.ts

@@ -0,0 +1,53 @@
+/** East-Asian wide / fullwidth / common emoji ranges → 2 cells; else 1. */
+function charWidth(ch: string): number {
+  const cp = ch.codePointAt(0)!;
+  const wide =
+    (cp >= 0x1100 && cp <= 0x115f) ||
+    (cp >= 0x2e80 && cp <= 0xa4cf) ||
+    (cp >= 0xac00 && cp <= 0xd7a3) ||
+    (cp >= 0xf900 && cp <= 0xfaff) ||
+    (cp >= 0xfe30 && cp <= 0xfe6f) ||
+    (cp >= 0xff00 && cp <= 0xff60) ||
+    (cp >= 0xffe0 && cp <= 0xffe6) ||
+    (cp >= 0x1f300 && cp <= 0x1f9ff);
+  return wide ? 2 : 1;
+}
+
+/** Terminal cell width of a string (CJK/emoji ≈ 2 cells). */
+export function displayWidth(text: string): number {
+  let w = 0;
+  for (const ch of text) w += charWidth(ch);
+  return w;
+}
+
+/** Truncate to a cell budget, never splitting a wide char, appending `…`. */
+export function truncateToWidth(text: string, limit: number): string {
+  const budget = Math.max(0, Math.floor(limit));
+  if (budget <= 0) return "";
+  if (displayWidth(text) <= budget) return text;
+  if (budget === 1) return "…";
+  let out = "";
+  let used = 0;
+  for (const ch of text) {
+    const cw = charWidth(ch);
+    if (used + cw > budget - 1) break;
+    out += ch;
+    used += cw;
+  }
+  return `${out}…`;
+}
+
+/** Hard-truncate by cells (no ellipsis) then pad with spaces to exact cell width. */
+export function fitWidth(text: string, limit: number): string {
+  const budget = Math.max(0, Math.floor(limit));
+  if (budget <= 0) return "";
+  let out = "";
+  let used = 0;
+  for (const ch of text) {
+    const cw = charWidth(ch);
+    if (used + cw > budget) break;
+    out += ch;
+    used += cw;
+  }
+  return out + " ".repeat(budget - used);
+}