@aliou/pi-processes 0.10.0 → 0.10.2

package/extensions/process-tabs.ts

@@ -1,7 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 
 import type { ProcessInfo } from "../src/types";
-import { truncateCmd } from "../src/utils/format";
+import { truncateForDisplay } from "./shared/display-text";
 import { MAX_TAB_NAME, statusDot } from "./shared/ui";
 
 export { MAX_TAB_NAME, statusDot as renderProcessTabDot };
@@ -19,7 +19,7 @@ export function renderProcessTab(
   theme: Theme,
 ): string {
   const dot = statusDot(process, active, theme);
-  const label = truncateCmd(process.name, MAX_TAB_NAME);
+  const label = truncateForDisplay(process.name, MAX_TAB_NAME);
   return active
     ? theme.bg("selectedBg", ` ${dot} ${theme.fg("accent", label)} `)
     : ` ${dot} ${theme.fg("dim", label)} `;

package/extensions/processes/commands/kill.ts

@@ -10,7 +10,10 @@ import {
   SelectList,
 } from "@earendil-works/pi-tui";
 import { LIVE_STATUSES } from "../../../src/types";
-import { formatProcessSelectionDescription } from "../../shared/ui";
+import {
+  formatProcessSelectionDescription,
+  formatProcessSelectionLabel,
+} from "../../shared/ui";
 import { requestKill, requestProcess, requestProcessList } from "../client";
 
 /**
@@ -42,7 +45,10 @@ export function registerKillCommand(pi: ExtensionAPI): void {
           return;
         }
         if (!LIVE_STATUSES.has(proc.status)) {
-          ctx.ui.notify(`${proc.name} (${proc.id}) is not running.`, "warning");
+          ctx.ui.notify(
+            `${formatProcessSelectionLabel(proc)} is not running.`,
+            "warning",
+          );
           return;
         }
         id = proc.id;
@@ -68,10 +74,10 @@ export function registerKillCommand(pi: ExtensionAPI): void {
       const timeoutMs = signal === "SIGKILL" ? 200 : 3000;
       const result = await requestKill(events, id, { signal, timeoutMs });
       if (result.ok) {
-        ctx.ui.notify(`Killed ${proc.name} (${proc.id}).`, "info");
+        ctx.ui.notify(`Killed ${formatProcessSelectionLabel(proc)}.`, "info");
       } else {
         ctx.ui.notify(
-          `Failed to kill ${proc.name} (${proc.id}): ${result.reason}.`,
+          `Failed to kill ${formatProcessSelectionLabel(proc)}: ${result.reason}.`,
           "warning",
         );
       }
@@ -92,7 +98,7 @@ async function pickTarget(
   const items: SelectItem[] = requestProcessList(events)
     .filter((process) => LIVE_STATUSES.has(process.status))
     .map((process) => ({
-      label: `${process.name} (${process.id})`,
+      label: formatProcessSelectionLabel(process),
       value: process.id,
       description: formatProcessSelectionDescription(process),
     }));
@@ -145,7 +151,7 @@ function completions(
     )
     .map((process) => ({
       value: process.id,
-      label: `${process.name} (${process.id})`,
+      label: formatProcessSelectionLabel(process),
       description: formatProcessSelectionDescription(process),
     }));
   return items.length > 0 ? items : null;

package/extensions/processes/commands/overview.ts

@@ -6,6 +6,7 @@ import type {
 } from "@earendil-works/pi-coding-agent";
 import type { ProcessProtocolConfig } from "../../../src/protocol";
 import type { ProcessInfo } from "../../../src/types";
+import { sanitizeForDisplay } from "../../shared/display-text";
 import { requestConfig, requestProcess, requestProcessList } from "../client";
 import { OverviewComponent } from "../components/overview-component";
 
@@ -96,7 +97,7 @@ function formatPlainProcessList(processes: ProcessInfo[]): string {
   return processes
     .map(
       (process) =>
-        `${process.id}\t${process.name}\t${process.status}\t${process.command}`,
+        `${process.id}\t${sanitizeForDisplay(process.name)}\t${process.status}\t${sanitizeForDisplay(process.command)}`,
     )
     .join("\n");
 }

package/extensions/processes/components/overview-component.ts

@@ -6,14 +6,19 @@ import {
   Key,
   matchesKey,
   type TUI,
-  truncateToWidth,
   visibleWidth,
 } from "@earendil-works/pi-tui";
 import { CHANNELS, type ProcessProtocolConfig } from "../../../src/protocol";
 import { LIVE_STATUSES, type ProcessInfo } from "../../../src/types";
-import { formatRuntime, truncateCmd } from "../../../src/utils/format";
+import { formatRuntime } from "../../../src/utils/format";
+import {
+  sanitizeForDisplay,
+  truncateForDisplay,
+} from "../../shared/display-text";
 import { buildDroppedOutputLine, trimToBudget } from "../../shared/line-buffer";
+import { renderLogLine } from "../../shared/log-line";
 import { isOutputChangedPayload } from "../../shared/output-payload";
+import { truncateToWidth } from "../../shared/truncate";
 import { LineComponent, LinesComponent, statusColor } from "../../shared/ui";
 import {
   type ProcessLogLine,
@@ -573,7 +578,12 @@ export class OverviewComponent implements Component {
     width: number,
   ): string {
     const t = this.opts.theme;
-    const name = truncateToWidth(process.name, MAX_NAME_WIDTH, "", true);
+    const name = truncateToWidth(
+      sanitizeForDisplay(process.name),
+      MAX_NAME_WIDTH,
+      "",
+      true,
+    );
     const id = truncateToWidth(process.id, MAX_ID_WIDTH, "", true);
     const status = truncateToWidth(
       formatColoredStatusShort(process, t),
@@ -596,7 +606,7 @@ export class OverviewComponent implements Component {
     const marker = this.pinnedId === process.id ? t.fg("accent", "◆") : " ";
     const left = `${marker} ${name}${sep}${dim(id)}${sep}${status}${sep}${runtime}`;
     const remaining = Math.max(0, width - visibleWidth(left) - 2);
-    const command = dim(truncateCmd(process.command, remaining));
+    const command = dim(truncateForDisplay(process.command, remaining));
     const line = `${left}${sep}${command}`;
 
     if (selected) {
@@ -614,17 +624,19 @@ export class OverviewComponent implements Component {
     const dim = (value: string) => t.fg("dim", value);
     const accent = (value: string) => t.fg("accent", value);
 
-    const header = `${dim(">")} ${accent(truncateCmd(selected.command, Math.max(1, width - 2)))}`;
+    const header = `${dim(">")} ${accent(truncateForDisplay(selected.command, Math.max(1, width - 2)))}`;
     const body: string[] = [header];
     const available = this.previewHeight();
     const total = this.previewLines.length;
     const start = this.previewOffset;
     const slice = this.previewLines.slice(start, start + available);
     for (const line of slice) {
-      const text =
-        line.type === "stderr" ? t.fg("warning", line.text) : line.text;
       body.push(
-        truncateToWidth(`${dim(PREVIEW_LOG_PREFIX)}${text}`, width, "", true),
+        renderLogLine(line, {
+          theme: t,
+          width,
+          prefix: dim(PREVIEW_LOG_PREFIX),
+        }),
       );
     }
     while (body.length < available + 1) body.push("");

package/extensions/processes/components/overview-panel.ts

@@ -1,5 +1,6 @@
 import type { Component } from "@earendil-works/pi-tui";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth } from "../../shared/truncate";
 
 export interface OverviewPanelOptions {
   title?: string;

package/extensions/processes/config/migrations/002-stamp-v0-10-0-config-version.ts

@@ -17,5 +17,5 @@ export const configVersionStampMigration: Migration<ProcessConfig> = {
   shouldRun: needsConfigVersionStamp,
   run: (config) => stampConfigVersion(config),
   message:
-    "Updated pi-processes settings for v0.10.0. This release rewrites the package into separate process, logs, and dock extensions while preserving your existing settings. Release notes will be published at https://github.com/aliou/pi-processes/releases/tag/v0.10.0.",
+    "Updated pi-processes settings for v0.10.0. This release rewrites the package into separate process, logs, and dock extensions while preserving your existing settings. Release notes are available at https://github.com/aliou/pi-processes/releases/tag/v0.10.0.",
 };

package/extensions/processes/message-renderer.ts

@@ -4,10 +4,9 @@ import type {
   Theme,
 } from "@earendil-works/pi-coding-agent";
 import { type Component, Container, Text } from "@earendil-works/pi-tui";
-
+import { truncateForDisplay } from "../shared/display-text";
 import { MESSAGE_TYPE_PROCESS_NOTIFICATION } from "./constants";
 import type { ProcessNotificationDetails } from "./notifications/types";
-import { truncateToWidth } from "./utils/truncate";
 
 export function registerProcessNotificationRenderer(pi: ExtensionAPI): void {
   pi.registerMessageRenderer<ProcessNotificationDetails>(
@@ -41,10 +40,15 @@ function formatSummary(
   theme: Theme,
 ): string {
   const prefix = theme.fg("accent", "[process]");
-  const name = theme.fg("muted", `"${details.processName}"`);
+  const name = theme.fg(
+    "muted",
+    `"${truncateForDisplay(details.processName, 60)}"`,
+  );
 
   if (details.logMatch) {
-    const line = truncateToWidth(details.logMatch.line, 160, "…");
+    // Matched text is raw process output: sanitize before it reaches the
+    // transcript, or an escape sequence in a log line hits the terminal.
+    const line = truncateForDisplay(details.logMatch.line, 160);
     return `${prefix} ${name} matched ${details.logMatch.stream}: ${line}`;
   }
 

package/extensions/processes/tools/list/render.ts

@@ -1,8 +1,9 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Container, Text, visibleWidth } from "@earendil-works/pi-tui";
 import { formatTimestamp, shortenPath } from "../../../../src/utils";
+import { sanitizeForDisplay } from "../../../shared/display-text";
+import { truncateToWidth } from "../../../shared/truncate";
 import { LinesComponent } from "../../../shared/ui";
-import { truncateToWidth } from "../../utils/truncate";
 import { formatPatternForDisplay, ProcessActionTitle } from "../components";
 import type {
   ProcessesParamsType,
@@ -75,7 +76,7 @@ export function buildCollapsed(details: ListDetails, theme: Theme): Container {
 
   for (const process of details.processes.slice(0, 2)) {
     const parts = [
-      process.name,
+      sanitizeForDisplay(process.name),
       theme.fg("accent", process.id),
       `pid ${process.pid}`,
       formatColoredProcessStatus(process, theme),

package/extensions/processes/tools/output/render.ts

@@ -1,6 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Container, Spacer, Text } from "@earendil-works/pi-tui";
 
+import { sanitizeForDisplay } from "../../../shared/display-text";
 import { ProcessActionHeader } from "../components";
 import type { ProcessesParamsType } from "../schema";
 import { buildField } from "../utils";
@@ -32,7 +33,7 @@ export function buildExpanded(
   if (bodyLines.length > 0) {
     container.addChild(new Spacer(1));
     for (const line of bodyLines) {
-      container.addChild(new Text(line, 0, 0));
+      container.addChild(new Text(sanitizeForDisplay(line), 0, 0));
     }
   } else {
     container.addChild(new Spacer(1));
@@ -61,7 +62,7 @@ export function buildCollapsed(
   container.addChild(
     new Text(
       [
-        details.processName,
+        sanitizeForDisplay(details.processName),
         theme.fg("accent", details.id),
         theme.fg(getStatusTone(details), details.processStatus),
       ]
@@ -73,7 +74,7 @@ export function buildCollapsed(
   );
 
   const bodyLines = extractOutputBody(contentText, details);
-  const preview = bodyLines.slice(-2).join("\n");
+  const preview = bodyLines.slice(-2).map(sanitizeForDisplay).join("\n");
 
   if (preview) {
     container.addChild(new Text(theme.fg("muted", preview), 0, 0));

package/extensions/processes/tools/update/render.ts

@@ -1,5 +1,6 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Container, Text } from "@earendil-works/pi-tui";
+import { sanitizeForDisplay } from "../../../shared/display-text";
 import type { LogMatcherConfig } from "../../notifications/registry";
 import { buildMatcherLine, ProcessActionHeader } from "../components";
 import type { ProcessesParamsType } from "../schema";
@@ -31,7 +32,7 @@ export function buildExpanded(details: UpdateDetails, theme: Theme): Container {
   if (details.renamed && details.previousName && details.process) {
     container.addChild(
       new Text(
-        `${theme.fg("muted", "renamed:")} ${details.previousName} -> ${theme.fg("accent", details.process.name)}`,
+        `${theme.fg("muted", "renamed:")} ${sanitizeForDisplay(details.previousName)} -> ${theme.fg("accent", sanitizeForDisplay(details.process.name))}`,
         0,
         0,
       ),
@@ -62,7 +63,7 @@ export function buildCollapsed(
     container.addChild(
       buildField(
         "renamed",
-        `${details.previousName} -> ${details.process.name}`,
+        `${sanitizeForDisplay(details.previousName)} -> ${sanitizeForDisplay(details.process.name)}`,
         theme,
       ),
     );

package/extensions/processes/tools/utils.ts

@@ -8,8 +8,11 @@ import {
   formatTimestamp,
   shortenPath,
 } from "../../../src/utils";
+import {
+  sanitizeForDisplay,
+  truncateForDisplay,
+} from "../../shared/display-text";
 import { statusColor } from "../../shared/ui";
-import { truncateToWidth } from "../utils/truncate";
 
 export interface RenderOptions {
   expanded?: boolean;
@@ -33,8 +36,8 @@ export function buildCommandField(
   options?: { truncate?: boolean },
 ): Text {
   const value = options?.truncate
-    ? truncateToWidth(command, 80, theme.fg("accent", "…"))
-    : command;
+    ? truncateForDisplay(command, 80)
+    : sanitizeForDisplay(command);
   return buildField("command", theme.fg("accent", `\`${value}\``), theme);
 }
 
@@ -45,7 +48,9 @@ export function buildProcessDetails(
 ): Container {
   const container = new Container();
   container.addChild(buildField("id", process.id, theme));
-  container.addChild(buildField("name", process.name, theme));
+  container.addChild(
+    buildField("name", sanitizeForDisplay(process.name), theme),
+  );
   container.addChild(
     buildField("status", formatColoredProcessStatus(process, theme), theme),
   );
@@ -58,7 +63,9 @@ export function buildProcessDetails(
   container.addChild(
     buildField("started", formatTimestamp(process.startTime), theme),
   );
-  container.addChild(buildField("cwd", shortenPath(process.cwd), theme));
+  container.addChild(
+    buildField("cwd", sanitizeForDisplay(shortenPath(process.cwd)), theme),
+  );
   container.addChild(buildCommandField(process.command, theme));
   container.addChild(buildField("stdout", process.stdoutFile, theme));
   container.addChild(buildField("stderr", process.stderrFile, theme));
@@ -71,7 +78,7 @@ export function buildProcessSummaryRow(
 ): Text {
   return new Text(
     [
-      process.name,
+      sanitizeForDisplay(process.name),
       theme.fg("accent", process.id),
       `pid ${process.pid}`,
       formatColoredProcessStatus(process, theme),

package/extensions/processes-dock/commands/pin.ts

@@ -9,7 +9,10 @@ import {
   type SelectItem,
   SelectList,
 } from "@earendil-works/pi-tui";
-import { formatProcessSelectionDescription } from "../../shared/ui";
+import {
+  formatProcessSelectionDescription,
+  formatProcessSelectionLabel,
+} from "../../shared/ui";
 import { requestProcess, requestProcessList } from "../client";
 import type { DockController } from "../widget/setup";
 
@@ -83,7 +86,7 @@ async function pickPinTarget(
         ]
       : []),
     ...processes.map((process) => ({
-      label: `${process.name} (${process.id})`,
+      label: formatProcessSelectionLabel(process),
       value: process.id,
       description: formatProcessSelectionDescription(
         process,
@@ -149,7 +152,7 @@ function completions(
     )
     .map((process) => ({
       value: process.id,
-      label: `${process.name} (${process.id})`,
+      label: formatProcessSelectionLabel(process),
       description: formatProcessSelectionDescription(process),
     }));
   const items = [...clearItems, ...processItems];

package/extensions/processes-dock/components/log-dock-component.ts

@@ -1,14 +1,12 @@
 import { Stack } from "@aliou/pi-utils-ui";
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import {
-  type Component,
-  truncateToWidth,
-  visibleWidth,
-} from "@earendil-works/pi-tui";
+import { type Component, visibleWidth } from "@earendil-works/pi-tui";
 import type { ProcessInfo } from "../../../src/types";
 import { LIVE_STATUSES } from "../../../src/types";
-import { stripAnsi } from "../../../src/utils/ansi";
 import { renderProcessTab } from "../../process-tabs";
+import { sanitizeForDisplay } from "../../shared/display-text";
+import { displayTextOf, renderLogLine } from "../../shared/log-line";
+import { truncateToWidth } from "../../shared/truncate";
 import {
   clampNameColumn,
   LineComponent,
@@ -278,18 +276,11 @@ function renderAllRunningLogLines(
   );
   const nameCol = clampNameColumn(activeProcesses);
   const separator = theme.fg("dim", " │ ");
-  const sepLen = visibleWidth(separator);
 
   return stream.slice(-height).map(({ processId, line }) => {
     const process = byId.get(processId);
     const label = theme.fg("dim", padName(process?.name ?? processId, nameCol));
-    const text = renderLogText(
-      line,
-      snapshot,
-      theme,
-      Math.max(1, width - nameCol - sepLen),
-    );
-    return truncateToWidth(`${label}${separator}${text}`, width, "", true);
+    return renderLogText(line, snapshot, theme, width, `${label}${separator}`);
   });
 }
 
@@ -311,15 +302,17 @@ function renderLogText(
   snapshot: LogDockSnapshot,
   theme: Theme,
   width: number,
+  prefix = "",
 ): string {
-  const text = truncateToWidth(stripAnsi(line.text), width, "", true);
-  if (snapshot.notifyLines.has(line.text) || snapshot.notifyLines.has(text)) {
-    return truncateToWidth(theme.underline(text), width);
-  }
-  if (line.type === "stderr") {
-    return truncateToWidth(theme.fg("warning", text), width);
-  }
-  return truncateToWidth(text, width);
+  const notified =
+    snapshot.notifyLines.has(line.text) ||
+    snapshot.notifyLines.has(displayTextOf(line));
+  return renderLogLine(line, {
+    theme,
+    width,
+    prefix,
+    emphasis: notified ? "notify" : "none",
+  });
 }
 
 function renderProcessToken(
@@ -370,6 +363,6 @@ function centerLine(content: string, width: number, height: number): string[] {
 }
 
 function padName(value: string, width: number): string {
-  const name = truncateToWidth(value, width, "", true);
+  const name = truncateToWidth(sanitizeForDisplay(value), width, "", true);
   return `${name}${" ".repeat(Math.max(0, width - visibleWidth(name)))}`;
 }

package/extensions/processes-dock/widget/status.ts

@@ -1,7 +1,8 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-
+import { visibleWidth } from "@earendil-works/pi-tui";
 import { LIVE_STATUSES, type ProcessInfo } from "../../../src/types";
+import { truncateForDisplay } from "../../shared/display-text";
+import { truncateToWidth } from "../../shared/truncate";
 import { statusColor, statusDot } from "../../shared/ui";
 
 const MAX_PROCESS_NAME = 20;
@@ -12,11 +13,10 @@ const DEFAULT_MAX_WIDTH = 200;
  * and the name always agree.
  */
 function formatProcessName(process: ProcessInfo, theme: Theme): string {
-  const trimmed =
-    process.name.length > MAX_PROCESS_NAME
-      ? `${process.name.slice(0, MAX_PROCESS_NAME - 3)}...`
-      : process.name;
-  return theme.fg(statusColor(process), trimmed);
+  return theme.fg(
+    statusColor(process),
+    truncateForDisplay(process.name, MAX_PROCESS_NAME),
+  );
 }
 
 /**

package/extensions/processes-logs/commands/logs.ts

@@ -6,6 +6,7 @@ import type {
 } from "@earendil-works/pi-coding-agent";
 import type { ProcessProtocolConfig } from "../../../src/protocol";
 import type { ProcessInfo } from "../../../src/types";
+import { sanitizeForDisplay } from "../../shared/display-text";
 import { requestConfig, requestProcess, requestProcessList } from "../client";
 import { allProcessCompletions } from "../completions";
 import { LogOverlayComponent } from "../components/log-overlay-component";
@@ -102,7 +103,7 @@ function formatPlainProcessList(processes: ProcessInfo[]): string {
   return processes
     .map(
       (process) =>
-        `${process.id}\t${process.name}\t${process.status}\t${process.command}`,
+        `${process.id}\t${sanitizeForDisplay(process.name)}\t${process.status}\t${sanitizeForDisplay(process.command)}`,
     )
     .join("\n");
 }

package/extensions/processes-logs/completions.ts

@@ -1,6 +1,9 @@
 import type { EventBus } from "@earendil-works/pi-coding-agent";
 import type { AutocompleteItem } from "@earendil-works/pi-tui";
-import { formatProcessSelectionDescription } from "../shared/ui";
+import {
+  formatProcessSelectionDescription,
+  formatProcessSelectionLabel,
+} from "../shared/ui";
 import { requestProcessList } from "./client";
 
 export function allProcessCompletions(
@@ -23,7 +26,7 @@ function buildCompletions(
     )
     .map((process) => ({
       value: process.id,
-      label: `${process.name} (${process.id})`,
+      label: formatProcessSelectionLabel(process),
       description: formatProcessSelectionDescription(process),
     }));
 

package/extensions/processes-logs/components/log-file-viewer.ts

@@ -1,6 +1,9 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { sanitizeForDisplay } from "../../shared/display-text";
 import { trimToBudget } from "../../shared/line-buffer";
+import { type LogLineEmphasis, renderLogLine } from "../../shared/log-line";
+import { truncateToWidth } from "../../shared/truncate";
 import type { ProcessLogLine } from "../logs-client";
 
 export type StreamFilter = "both" | "stdout" | "stderr";
@@ -29,7 +32,7 @@ export class LogFileViewer {
   ) {
     this.follow = options.followEnabled;
     this.lines = trimToBudget(
-      initialLines,
+      initialLines.map(sanitizeLine),
       options.maxBufferLines,
       options.maxBufferBytes ?? Number.MAX_SAFE_INTEGER,
     );
@@ -38,7 +41,7 @@ export class LogFileViewer {
 
   appendLines(lines: ProcessLogLine[]): void {
     if (lines.length === 0) return;
-    this.lines.push(...lines);
+    this.lines.push(...lines.map(sanitizeLine));
     this.lines = trimToBudget(
       this.lines,
       this.options.maxBufferLines,
@@ -119,7 +122,9 @@ export class LogFileViewer {
    * priority (search current match > search match > notify match > stream).
    */
   addNotifyMatch(match: { line: string }): void {
-    if (match.line) this.notifyLines.add(match.line);
+    // Stored sanitized so it can be compared against sanitized buffer lines.
+    const line = sanitizeForDisplay(match.line);
+    if (line) this.notifyLines.add(line);
   }
 
   clearNotifyMatches(): void {
@@ -182,23 +187,15 @@ export class LogFileViewer {
 
     const rendered = visible.slice(start, end).map((line, index) => {
       const visibleIndex = start + index;
-      const text = truncateToWidth(line.text, width, "", true);
-      if (visibleIndex === currentMatchIndex) {
-        return truncateToWidth(
-          this.theme.bold(this.theme.inverse(text)),
-          width,
-        );
-      }
-      if (matchSet.has(visibleIndex)) {
-        return truncateToWidth(this.theme.fg("warning", text), width);
-      }
-      if (this.notifyLines.has(line.text)) {
-        return truncateToWidth(this.theme.underline(text), width);
-      }
-      if (line.type === "stderr") {
-        return truncateToWidth(this.theme.fg("warning", text), width);
-      }
-      return truncateToWidth(text, width);
+      const emphasis: LogLineEmphasis =
+        visibleIndex === currentMatchIndex
+          ? "search-current"
+          : matchSet.has(visibleIndex)
+            ? "search"
+            : this.notifyLines.has(line.text)
+              ? "notify"
+              : "none";
+      return renderLogLine(line, { theme: this.theme, width, emphasis });
     });
 
     while (rendered.length < height) rendered.unshift("");
@@ -272,3 +269,12 @@ export class LogFileViewer {
     this.centerTarget = index;
   }
 }
+
+/**
+ * Log lines are untrusted terminal output. Sanitize on ingest so search,
+ * notify-match comparison, and rendering all see the same safe text.
+ */
+function sanitizeLine(line: ProcessLogLine): ProcessLogLine {
+  const text = sanitizeForDisplay(line.text);
+  return text === line.text ? line : { ...line, text };
+}

package/extensions/processes-logs/components/log-overlay-component.ts

@@ -6,7 +6,6 @@ import {
   Key,
   matchesKey,
   type TUI,
-  truncateToWidth,
   visibleWidth,
 } from "@earendil-works/pi-tui";
 import {
@@ -16,9 +15,11 @@ import {
   type ProcessProtocolNotificationPayload,
 } from "../../../src/protocol";
 import { LIVE_STATUSES, type ProcessInfo } from "../../../src/types";
-import { formatRuntime, truncateCmd } from "../../../src/utils/format";
+import { formatRuntime } from "../../../src/utils/format";
 import { isRecord } from "../../../src/utils/is-record";
 import { renderProcessTab } from "../../process-tabs";
+import { truncateForDisplay } from "../../shared/display-text";
+import { truncateToWidth } from "../../shared/truncate";
 import { LineComponent, LinesComponent, RuleComponent } from "../../shared/ui";
 import { requestProcessList } from "../client";
 import {
@@ -559,7 +560,9 @@ export class LogOverlayComponent implements Component {
       4,
       width - visibleWidth(leftPrefix) - durationWidth - 1,
     );
-    const command = dim(truncateCmd(process.command, availableCommandWidth));
+    const command = dim(
+      truncateForDisplay(process.command, availableCommandWidth),
+    );
     const left = `${leftPrefix}${command}`;
     const gap = Math.max(1, width - visibleWidth(left) - durationWidth);
     return truncateToWidth(`${left}${" ".repeat(gap)}${duration}`, width);

package/extensions/shared/display-text.ts

@@ -0,0 +1,200 @@
+/**
+ * Make untrusted process output safe to render in the TUI.
+ *
+ * This module lives outside pi-agnostic `src/` because tab expansion needs the
+ * Pi TUI width measurement to stay in sync with what the renderer computes.
+ */
+
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import { truncateToWidth } from "./truncate";
+
+const ESC = String.fromCodePoint(0x001b);
+const BEL = String.fromCodePoint(0x0007);
+const ST = String.fromCodePoint(0x009c);
+const RESET = `${ESC}[0m`;
+
+// Control characters a single display row must never contain. Tabs are handled
+// separately; newlines are dropped because they would shift the whole frame.
+// C1 controls are included: a raw \u009b is an alias for CSI on some terminals.
+// biome-ignore lint/suspicious/noControlCharactersInRegex: this regex intentionally targets terminal control characters.
+const DISPLAY_CONTROL_CHARS = /[\u0000-\u0008\u000a-\u001f\u007f-\u009f]/gu;
+
+// SGR parameters we consider safe to keep: colors and attributes only.
+const SGR_PARAMS = /^[0-9;:]*$/u;
+
+// Terminals advance tabs to the next 8-column stop, but the TUI measures a tab
+// as a fixed width. Expanding here keeps measured width and drawn width equal.
+const TAB_WIDTH = 8;
+
+/**
+ * Sanitize one line of terminal output for display while keeping its colors.
+ *
+ * Keeps SGR sequences (`ESC[...m`) and drops everything else: cursor
+ * movement, erase, scroll regions, alternate screen switches, OSC/DCS/APC
+ * strings (terminated or not), charset designators, lone escapes, newlines,
+ * and C0/C1 control characters. Tabs are expanded to spaces. Those are the
+ * inputs that corrupt the screen, because they either act on the real
+ * terminal or make width measurement disagree with what the terminal draws.
+ *
+ * A trailing reset is appended when any SGR survives so colors cannot bleed
+ * into the rest of the frame.
+ */
+export function sanitizeForDisplay(text: string): string {
+  if (!text.includes(ESC)) return cleanPlainText(text, 0).text;
+
+  let out = "";
+  let cursor = 0;
+  let column = 0;
+  let keptSgr = false;
+
+  while (cursor < text.length) {
+    const escapeAt = text.indexOf(ESC, cursor);
+    if (escapeAt === -1) {
+      out += cleanPlainText(text.slice(cursor), column).text;
+      break;
+    }
+    const chunk = cleanPlainText(text.slice(cursor, escapeAt), column);
+    out += chunk.text;
+    column = chunk.column;
+
+    const sequence = readEscapeSequence(text, escapeAt);
+    if (sequence.isSgr) {
+      out += text.slice(escapeAt, sequence.end);
+      keptSgr = true;
+    }
+    cursor = sequence.end;
+  }
+
+  if (!keptSgr || out.endsWith(RESET)) return out;
+  return `${out}${RESET}`;
+}
+
+/**
+ * Fit a single-line label, such as a command or a process name, into `width`
+ * terminal cells. Sanitizes first, then truncates by display width so wide
+ * characters and emoji cannot over-run the row or get cut mid-grapheme.
+ */
+export function truncateForDisplay(text: string, width: number): string {
+  return closeSgr(truncateToWidth(sanitizeForDisplay(text), width, "…"));
+}
+
+/**
+ * Re-close colors after truncation. `sanitizeForDisplay` ends a colored string
+ * with a reset, but truncating can cut that reset off and let the color bleed
+ * into the rest of the frame.
+ */
+export function closeSgr(text: string): string {
+  if (!text.includes(ESC) || text.trimEnd().endsWith(RESET)) return text;
+  return `${text}${RESET}`;
+}
+
+/**
+ * Drop control characters and expand tabs, starting from `column` so tab stops
+ * line up across the chunks of a line split by escape sequences. Columns are
+ * measured in terminal cells, so wide and zero-width characters land right.
+ */
+function cleanPlainText(
+  text: string,
+  column: number,
+): { text: string; column: number } {
+  const clean = text.replace(DISPLAY_CONTROL_CHARS, "");
+  if (!clean.includes("\t")) {
+    return { text: clean, column: column + visibleWidth(clean) };
+  }
+
+  const parts = clean.split("\t");
+  let out = parts[0] ?? "";
+  let col = column + visibleWidth(out);
+  for (const part of parts.slice(1)) {
+    const spaces = TAB_WIDTH - (col % TAB_WIDTH);
+    out += " ".repeat(spaces) + part;
+    col += spaces + visibleWidth(part);
+  }
+  return { text: out, column: col };
+}
+
+/**
+ * Find the end of the escape sequence starting at `start` (which must point at
+ * an ESC) and report whether it is a plain SGR sequence.
+ *
+ * Unterminated sequences swallow the rest of the string: a terminal would do
+ * the same, so dropping the tail is what keeps the screen intact.
+ */
+function readEscapeSequence(
+  text: string,
+  start: number,
+): { end: number; isSgr: boolean } {
+  const next = text[start + 1];
+  if (next === undefined) return { end: text.length, isSgr: false };
+
+  if (next === "[") return readControlSequence(text, start);
+
+  // OSC (]) and APC (_): standard terminator is ST, but BEL is widely used
+  // for both in practice (pi's own cursor marker included), so accept it.
+  if (next === "]" || next === "_") {
+    return { end: findStringTerminator(text, start + 2, true), isSgr: false };
+  }
+
+  // DCS (P), SOS (X), PM (^): ST only. A BEL inside a sixel payload is data.
+  if (next === "P" || next === "X" || next === "^") {
+    return { end: findStringTerminator(text, start + 2, false), isSgr: false };
+  }
+
+  // Sequences with one intermediate byte: charset designators (ESC ( B),
+  // ESC % G, ESC # 8, and friends.
+  if (next >= "\u0020" && next <= "\u002f") {
+    return { end: Math.min(start + 3, text.length), isSgr: false };
+  }
+
+  // Everything else is a two-byte escape: ESC c (reset), ESC 7/8, ESC =, ...
+  return { end: start + 2, isSgr: false };
+}
+
+/** Index just past the terminator of a string sequence, else end of input. */
+function findStringTerminator(
+  text: string,
+  from: number,
+  allowBel: boolean,
+): number {
+  for (let index = from; index < text.length; index++) {
+    if (allowBel && text[index] === BEL) return index + 1;
+    if (text[index] === ST) return index + 1;
+    if (text[index] === ESC && text[index + 1] === "\\") return index + 2;
+  }
+  return text.length;
+}
+
+function readControlSequence(
+  text: string,
+  start: number,
+): { end: number; isSgr: boolean } {
+  let index = start + 2;
+  const paramStart = index;
+  while (
+    index < text.length &&
+    text[index] >= "\u0030" &&
+    text[index] <= "\u003f"
+  ) {
+    index++;
+  }
+  const paramEnd = index;
+  while (
+    index < text.length &&
+    text[index] >= "\u0020" &&
+    text[index] <= "\u002f"
+  ) {
+    index++;
+  }
+  const hasIntermediates = index > paramEnd;
+  const final = text[index];
+  if (final === undefined || final < "\u0040" || final > "\u007e") {
+    return { end: text.length, isSgr: false };
+  }
+
+  const isSgr =
+    final === "m" &&
+    !hasIntermediates &&
+    SGR_PARAMS.test(text.slice(paramStart, paramEnd));
+  return { end: index + 1, isSgr };
+}

package/extensions/shared/log-line.ts

@@ -0,0 +1,84 @@
+/**
+ * One renderer for a single line of process output, shared by the `/ps`
+ * preview, the `/ps:logs` overlay, and the dock.
+ *
+ * Every log view sanitizes untrusted output, truncates it to the row width,
+ * and tones it by stream and match state. Keeping that in one place is what
+ * stops the three views from drifting apart again.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+
+import { closeSgr, sanitizeForDisplay } from "./display-text";
+import { truncateToWidth } from "./truncate";
+
+export interface DisplayLogLine {
+  type: "stdout" | "stderr";
+  text: string;
+}
+
+/**
+ * Why a line stands out, in priority order. `search-current` is the match the
+ * user is sitting on, `search` is any other hit, `notify` is a watch match.
+ */
+export type LogLineEmphasis = "none" | "notify" | "search" | "search-current";
+
+export interface RenderLogLineOptions {
+  theme: Theme;
+  /** Total row width, including `prefix`. */
+  width: number;
+  emphasis?: LogLineEmphasis;
+  /** Already-styled row prefix, such as the dock's process label. */
+  prefix?: string;
+  /** Drop colors from the log text itself. Match and stream tones still apply. */
+  plain?: boolean;
+}
+
+export function renderLogLine(
+  line: DisplayLogLine,
+  options: RenderLogLineOptions,
+): string {
+  const {
+    theme,
+    width,
+    emphasis = "none",
+    prefix = "",
+    plain = false,
+  } = options;
+  if (width <= 0) return "";
+
+  const prefixWidth = visibleWidth(prefix);
+  const textWidth = Math.max(1, width - prefixWidth);
+  const safe = sanitizeForDisplay(line.text);
+  const text = closeSgr(
+    truncateToWidth(plain ? stripSgr(safe) : safe, textWidth, "", true),
+  );
+
+  return `${prefix}${toneLogText(text, line.type, emphasis, theme)}`;
+}
+
+/** Text of a log line as the views display it, for match comparisons. */
+export function displayTextOf(line: DisplayLogLine): string {
+  return sanitizeForDisplay(line.text);
+}
+
+function toneLogText(
+  text: string,
+  type: DisplayLogLine["type"],
+  emphasis: LogLineEmphasis,
+  theme: Theme,
+): string {
+  if (emphasis === "search-current") return theme.bold(theme.inverse(text));
+  if (emphasis === "search") return theme.fg("warning", text);
+  if (emphasis === "notify") return theme.underline(text);
+  if (type === "stderr") return theme.fg("warning", text);
+  return text;
+}
+
+const SGR = new RegExp(`${String.fromCodePoint(0x001b)}\\[[0-9;:]*m`, "gu");
+
+/** Drop the SGR sequences `sanitizeForDisplay` kept. */
+function stripSgr(text: string): string {
+  return text.replace(SGR, "");
+}

package/extensions/shared/ui.ts

@@ -13,6 +13,7 @@ import { type Component, visibleWidth } from "@earendil-works/pi-tui";
 
 import { LIVE_STATUSES, type ProcessInfo } from "../../src/types";
 import { formatStatus } from "../../src/utils/format";
+import { sanitizeForDisplay } from "./display-text";
 
 // ---------------------------------------------------------------------------
 // Render components
@@ -72,7 +73,7 @@ export function clampNameColumn(
   min: number = MIN_NAME_COLUMN,
 ): number {
   const longest = processes.reduce(
-    (acc, p) => Math.max(acc, visibleWidth(p.name)),
+    (acc, p) => Math.max(acc, visibleWidth(sanitizeForDisplay(p.name))),
     0,
   );
   return Math.min(Math.max(longest, min), max);
@@ -132,6 +133,15 @@ export function statusDot(
   return theme.fg("dim", "■");
 }
 
+/**
+ * Build the `label` string for process picker items and autocomplete
+ * completions: `"api (proc_1)"`. Names are untrusted display text, so they are
+ * sanitized here instead of at every call site.
+ */
+export function formatProcessSelectionLabel(process: ProcessInfo): string {
+  return `${sanitizeForDisplay(process.name)} (${process.id})`;
+}
+
 /**
  * Build the `description` string for process picker items and autocomplete
  * completions: `"running — pnpm dev"`. Shared so `/ps:kill`, `/ps:logs`,
@@ -141,6 +151,6 @@ export function formatProcessSelectionDescription(
   process: ProcessInfo,
   suffix = "",
 ): string {
-  const base = `${formatStatus(process)} — ${process.command}`;
+  const base = `${formatStatus(process)} — ${sanitizeForDisplay(process.command)}`;
   return suffix ? `${base}${suffix}` : base;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliou/pi-processes",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "license": "MIT",
   "type": "module",
   "private": false,
@@ -68,12 +68,6 @@
     "typescript": "^5.9.3",
     "vitest": "^4.1.5"
   },
-  "pnpm": {
-    "overrides": {
-      "@earendil-works/pi-ai": "$@earendil-works/pi-coding-agent",
-      "@earendil-works/pi-tui": "$@earendil-works/pi-coding-agent"
-    }
-  },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "biome check",
@@ -88,7 +82,7 @@
     "test:e2e": "vitest run --config vitest.e2e.config.ts",
     "release": "pnpm changeset publish"
   },
-  "packageManager": "pnpm@10.26.1",
+  "packageManager": "pnpm@11.5.1",
   "peerDependenciesMeta": {
     "@earendil-works/pi-ai": {
       "optional": true

package/src/manager/process-runtime-controller.ts

@@ -83,6 +83,11 @@ export class ProcessRuntimeController {
     this.registry.add(managed);
 
     if (!child.pid) {
+      // No pid means the process never started. The async spawn `error`
+      // event may not have been delivered yet (Node emits it on a later
+      // turn of the event loop, and it cannot fire while start() runs),
+      // so attach a handler that finalizes the record with the real
+      // reason when it arrives.
       this.logs.appendErrorLine(managed.stderrFile, "Spawn error: missing pid");
       managed.exitCode = -1;
       managed.success = false;
@@ -91,6 +96,14 @@ export class ProcessRuntimeController {
       managed.endTime = Date.now();
       this.releaseRuntimeHandles(managed);
       this.transition(managed, "exited");
+      child.on("error", (err) => {
+        this.logs.appendErrorLine(
+          managed.stderrFile,
+          `Process error: ${err.message}`,
+        );
+        managed.endReason = "spawn_error";
+        managed.errorMessage = err.message;
+      });
       return managed;
     }
 
@@ -361,24 +374,31 @@ export class ProcessRuntimeController {
     });
 
     child.on("error", (err) => {
-      this.logs.appendErrorLine(
-        managed.stderrFile,
-        `Process error: ${err.message}`,
-      );
-
-      if (!managed.endTime) {
-        this.releaseRuntimeHandles(managed);
-        managed.exitCode = -1;
-        managed.success = false;
-        managed.endReason = "spawn_error";
-        managed.errorMessage = err.message;
-        managed.endTime = Date.now();
-        this.output.flush(managed);
-        this.transition(managed, "exited");
-      }
+      this.handleSpawnError(managed, err);
     });
   }
 
+  private handleSpawnError(
+    managed: ManagedProcessRecord,
+    err: NodeJS.ErrnoException,
+  ): void {
+    this.logs.appendErrorLine(
+      managed.stderrFile,
+      `Process error: ${err.message}`,
+    );
+
+    if (managed.endTime) return;
+
+    this.releaseRuntimeHandles(managed);
+    managed.exitCode = -1;
+    managed.success = false;
+    managed.endReason = "spawn_error";
+    managed.errorMessage = err.message;
+    managed.endTime = Date.now();
+    this.output.flush(managed);
+    this.transition(managed, "exited");
+  }
+
   private ensureWatcherRunning(): void {
     if (this.watcher) return;
     if (!this.registry.hasAliveishProcesses()) return;

package/src/utils/ansi.ts

@@ -22,8 +22,10 @@ const ANSI_REPLACEMENTS: RegExp[] = [
 // Strip C0 terminal control characters that can corrupt TUI layout when
 // rendered back into pi, such as carriage return and backspace. Keep tabs and
 // newlines because logs use them as printable whitespace/line breaks.
+// C1 controls are stripped too: a raw \u009b is an alias for CSI on some
+// terminals, so leaving it in would reopen the escape-sequence hole.
 // biome-ignore lint/suspicious/noControlCharactersInRegex: this regex intentionally targets terminal control characters.
-const TERMINAL_CONTROL_CHARS = /[\u0000-\u0008\u000b-\u001f\u007f]/gu;
+const TERMINAL_CONTROL_CHARS = /[\u0000-\u0008\u000b-\u001f\u007f-\u009f]/gu;
 
 /** Check if a string contains ANSI escape codes. */
 export function hasAnsi(str: string): boolean {

package/src/utils/format.ts

@@ -49,14 +49,6 @@ export function formatStatus(proc: {
   }
 }
 
-/**
- * Truncate a command string to a maximum length.
- */
-export function truncateCmd(cmd: string, max = 40): string {
-  if (cmd.length <= max) return cmd;
-  return `${cmd.slice(0, max - 3)}...`;
-}
-
 /**
  * Format a timestamp as an ISO string or "-" if null.
  */

package/src/utils/index.ts

@@ -1,11 +1,6 @@
 export { hasAnsi, stripAnsi } from "./ansi";
 export { resolveShellExecutable, spawnCommand } from "./command-executor";
-export {
-  formatRuntime,
-  formatStatus,
-  formatTimestamp,
-  truncateCmd,
-} from "./format";
+export { formatRuntime, formatStatus, formatTimestamp } from "./format";
 export type { LineMatchMode } from "./match-line";
 export { compileLineMatcher } from "./match-line";
 export { isProcessGroupAlive, killProcessGroup } from "./process-group";

package/src/utils/process-group.ts

@@ -3,6 +3,7 @@
  * Uses signal 0 to test existence without actually sending a signal.
  */
 export function isProcessGroupAlive(pgid: number): boolean {
+  if (!Number.isInteger(pgid) || pgid <= 0) return false;
   try {
     process.kill(-pgid, 0);
     return true;
@@ -18,5 +19,8 @@ export function isProcessGroupAlive(pgid: number): boolean {
  * Negative PID targets the process group.
  */
 export function killProcessGroup(pgid: number, signal: NodeJS.Signals): void {
+  if (!Number.isInteger(pgid) || pgid <= 0) {
+    throw new RangeError("Process group ID must be a positive integer");
+  }
   process.kill(-pgid, signal);
 }