@aliou/pi-processes 0.4.0 → 0.4.3

package/commands/index.ts

@@ -48,15 +48,10 @@ function allProcessCompletions(manager: ProcessManager) {
   };
 }
 
-export interface ProcessCommands {
-  /** Start streaming logs for a process via the widget. Needs a UI context. */
-  streamProcess: (processId: string, ui: ExtensionCommandContext["ui"]) => void;
-}
-
 export function setupProcessesCommands(
   pi: ExtensionAPI,
   manager: ProcessManager,
-): ProcessCommands {
+): void {
   let streamingProcessId: string | null = null;
 
   // ── /process:list ──────────────────────────────────────────────────
@@ -304,12 +299,6 @@ export function setupProcessesCommands(
       { placement: "aboveEditor" },
     );
   }
-
-  return {
-    streamProcess: (processId: string, ui: ExtensionCommandContext["ui"]) => {
-      startStreaming(ui, manager, processId);
-    },
-  };
 }
 
 async function pickProcess(

package/components/log-stream-component.ts

@@ -1,3 +1,8 @@
+import {
+  createPanelPadder,
+  renderPanelRule,
+  renderPanelTitleLine,
+} from "@aliou/pi-utils-ui";
 import type { Theme } from "@mariozechner/pi-coding-agent";
 import {
   type Component,
@@ -62,26 +67,26 @@ export class LogStreamComponent implements Component {
 
     const theme = this.theme;
     const dim = (s: string) => theme.fg("dim", s);
-    const accent = (s: string) => theme.fg("accent", s);
     const warning = (s: string) => theme.fg("warning", s);
-    const border = (s: string) => theme.fg("dim", s);
     const innerWidth = width - 2;
 
+    const basePadLine = createPanelPadder(width);
     const padLine = (content: string): string => {
       const contentWidth = visibleWidth(content);
-      if (contentWidth > innerWidth) {
-        return ` ${truncateToWidth(content, innerWidth)} `;
-      }
-      return ` ${content}${" ".repeat(Math.max(0, innerWidth - contentWidth))} `;
+      return basePadLine(
+        contentWidth > innerWidth
+          ? truncateToWidth(content, innerWidth)
+          : content,
+      );
     };
 
     const lines: string[] = [];
     const proc = this.manager.get(this.processId);
 
     if (!proc) {
-      lines.push(border("─".repeat(width)));
+      lines.push(renderPanelRule(width, theme));
       lines.push(padLine(warning("Process not found")));
-      lines.push(border("─".repeat(width)));
+      lines.push(renderPanelRule(width, theme));
       this.cachedLines = lines;
       this.cachedWidth = width;
       return this.cachedLines;
@@ -90,15 +95,12 @@ export class LogStreamComponent implements Component {
     // Header
     const icon = statusIcon(proc.status, proc.success);
     const label = statusLabel(proc);
-    const headerText = ` ${accent(proc.name)} ${dim(`(${proc.id})`)} ${icon} ${dim(label)} `;
-    const headerLen = visibleWidth(headerText);
-    const borderLen = Math.max(0, width - headerLen);
-    const leftBorder = Math.floor(borderLen / 2);
-    const rightBorder = borderLen - leftBorder;
     lines.push(
-      border("─".repeat(leftBorder)) +
-        headerText +
-        border("─".repeat(rightBorder)),
+      renderPanelTitleLine(
+        `Process: ${proc.name} (${proc.id}) ${icon} ${label}`,
+        width,
+        theme,
+      ),
     );
 
     // Log lines (interleaved stdout + stderr in temporal order).
@@ -127,9 +129,9 @@ export class LogStreamComponent implements Component {
     }
 
     // Footer hint
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
     lines.push(padLine(dim("Run /process:stream to dismiss")));
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
 
     this.cachedLines = lines;
     this.cachedWidth = width;

package/components/process-picker-component.ts

@@ -1,5 +1,10 @@
+import {
+  createPanelPadder,
+  renderPanelRule,
+  renderPanelTitleLine,
+} from "@aliou/pi-utils-ui";
 import type { Theme } from "@mariozechner/pi-coding-agent";
-import { type Component, matchesKey, visibleWidth } from "@mariozechner/pi-tui";
+import { type Component, matchesKey } from "@mariozechner/pi-tui";
 import type { ProcessInfo } from "../constants";
 import type { ProcessManager } from "../manager";
 import { statusIcon, statusLabel } from "./status-format";
@@ -105,29 +110,13 @@ export class ProcessPickerComponent implements Component {
     const theme = this.theme;
     const dim = (s: string) => theme.fg("dim", s);
     const accent = (s: string) => theme.fg("accent", s);
-    const bold = (s: string) => theme.bold(s);
-    const border = (s: string) => theme.fg("dim", s);
-    const innerWidth = width - 2;
 
-    const padLine = (content: string): string => {
-      const len = visibleWidth(content);
-      return ` ${content}${" ".repeat(Math.max(0, innerWidth - len))} `;
-    };
+    const padLine = createPanelPadder(width);
 
     const lines: string[] = [];
     const processes = this.getProcesses();
 
-    // Header
-    const titleText = ` ${this.title} `;
-    const titleLen = titleText.length;
-    const borderLen = Math.max(0, width - titleLen);
-    const leftBorder = Math.floor(borderLen / 2);
-    const rightBorder = borderLen - leftBorder;
-    lines.push(
-      border("─".repeat(leftBorder)) +
-        accent(bold(titleText)) +
-        border("─".repeat(rightBorder)),
-    );
+    lines.push(renderPanelTitleLine(this.title, width, theme));
 
     if (processes.length === 0) {
       lines.push(padLine(""));
@@ -151,13 +140,13 @@ export class ProcessPickerComponent implements Component {
     }
 
     // Footer
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
     lines.push(
       padLine(
         `${dim("j/k")} select  ${dim("enter")} confirm  ${dim("q")} cancel`,
       ),
     );
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
 
     this.cachedLines = lines;
     this.cachedWidth = width;

package/components/processes-component.ts

@@ -1,3 +1,8 @@
+import {
+  createPanelPadder,
+  renderPanelRule,
+  renderPanelTitleLine,
+} from "@aliou/pi-utils-ui";
 import type { Theme } from "@mariozechner/pi-coding-agent";
 import { type Component, matchesKey, visibleWidth } from "@mariozechner/pi-tui";
 import { configLoader } from "../config";
@@ -204,28 +209,14 @@ export class ProcessesComponent implements Component {
     const dim = (s: string) => theme.fg("dim", s);
     const accent = (s: string) => theme.fg("accent", s);
     const warning = (s: string) => theme.fg("warning", s);
-    const bold = (s: string) => theme.bold(s);
-    const border = (s: string) => theme.fg("dim", s);
 
     const lines: string[] = [];
     const processes = this.manager.list();
     const innerWidth = width - 2;
 
-    const padLine = (content: string): string => {
-      const len = visibleWidth(content);
-      return ` ${content}${" ".repeat(Math.max(0, innerWidth - len))} `;
-    };
-
-    const title = " Background Processes ";
-    const titleLen = title.length;
-    const borderLen = Math.max(0, width - titleLen);
-    const leftBorder = Math.floor(borderLen / 2);
-    const rightBorder = borderLen - leftBorder;
-    lines.push(
-      border("─".repeat(leftBorder)) +
-        accent(bold(title)) +
-        border("─".repeat(rightBorder)),
-    );
+    const padLine = createPanelPadder(width);
+
+    lines.push(renderPanelTitleLine("Background Processes", width, theme));
 
     if (processes.length === 0) {
       lines.push(padLine(""));
@@ -270,7 +261,7 @@ export class ProcessesComponent implements Component {
         dim("Size".padStart(sizeWidth)) +
         (hasProcessScroll ? dim(headerSuffixText) : "");
       lines.push(padLine(header));
-      lines.push(border("─".repeat(width)));
+      lines.push(renderPanelRule(width, theme));
 
       const visibleProcessCount = Math.min(
         maxVisibleProcesses,
@@ -321,7 +312,7 @@ export class ProcessesComponent implements Component {
         const output = this.manager.getOutput(selected.id, maxPreviewLines * 2);
         const sizes = this.manager.getFileSize(selected.id);
 
-        lines.push(border("─".repeat(width)));
+        lines.push(renderPanelRule(width, theme));
 
         const logTitlePlain = `Output: ${selected.name} (${selected.id})`;
         const sizeInfoPlain = sizes
@@ -394,7 +385,7 @@ export class ProcessesComponent implements Component {
       }
     }
 
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
 
     const footerLeft =
       `${dim("enter")} stream  ` +
@@ -421,7 +412,7 @@ export class ProcessesComponent implements Component {
     const footer = footerLeft + " ".repeat(footerGap) + footerRight;
 
     lines.push(padLine(footer));
-    lines.push(border("─".repeat(width)));
+    lines.push(renderPanelRule(width, theme));
 
     this.cachedLines = lines;
     this.cachedWidth = width;

package/hooks/widget.ts

@@ -126,8 +126,9 @@ export function setupProcessWidget(pi: ExtensionAPI, manager: ProcessManager) {
   }
 
   pi.on("session_start", async (_event, ctx) => {
+    // Startup defer: capture context only. First render happens on process
+    // manager events or explicit settings updates.
     latestContext = ctx;
-    updateWidget();
   });
 
   pi.on("session_switch", async (_event, ctx) => {

package/index.ts

@@ -19,8 +19,8 @@ export default async function (pi: ExtensionAPI) {
   const manager = new ProcessManager();
 
   const { update: updateWidget } = setupProcessesHooks(pi, manager);
-  const commands = setupProcessesCommands(pi, manager);
-  setupProcessesTools(pi, manager, commands);
+  setupProcessesCommands(pi, manager);
+  setupProcessesTools(pi, manager);
   registerProcessesSettings(pi, () => {
     updateWidget();
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliou/pi-processes",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "type": "module",
   "private": false,
   "keywords": [
@@ -34,7 +34,8 @@
   ],
   "dependencies": {
     "@sinclair/typebox": "^0.34.41",
-    "@aliou/pi-utils-settings": "0.2.1"
+    "@aliou/pi-utils-settings": "0.4.0",
+    "@aliou/pi-utils-ui": "^0.1.0"
   },
   "peerDependencies": {
     "@mariozechner/pi-coding-agent": ">=0.51.0"

package/tools/index.ts

@@ -1,3 +1,4 @@
+import { ToolBody, ToolCallHeader, ToolFooter } from "@aliou/pi-utils-ui";
 import { StringEnum } from "@mariozechner/pi-ai";
 import type {
   AgentToolResult,
@@ -57,13 +58,7 @@ const ProcessesParams = Type.Object({
 
 type ProcessesParamsType = Static<typeof ProcessesParams>;
 
-import type { ProcessCommands } from "../commands";
-
-export function setupProcessesTools(
-  pi: ExtensionAPI,
-  manager: ProcessManager,
-  commands: ProcessCommands,
-) {
+export function setupProcessesTools(pi: ExtensionAPI, manager: ProcessManager) {
   pi.registerTool<typeof ProcessesParams, ProcessesDetails>({
     name: "process",
     label: "Process",
@@ -85,50 +80,56 @@ Note: User always sees process updates in the UI. The notify flags control wheth
     parameters: ProcessesParams,
 
     async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
-      const result = await executeAction(params, manager, ctx);
-      // Auto-stream logs when a process is started successfully.
-      if (
-        params.action === "start" &&
-        result.details?.success &&
-        result.details.process &&
-        ctx.hasUI
-      ) {
-        commands.streamProcess(result.details.process.id, ctx.ui);
-      }
-      return result;
+      return executeAction(params, manager, ctx);
     },
 
-    renderCall(args: ProcessesParamsType, theme: Theme): Text {
-      let text = theme.fg("toolTitle", theme.bold("Process "));
-      text += theme.fg("accent", args.action);
+    renderCall(args: ProcessesParamsType, theme: Theme) {
+      const longArgs: Array<{ label?: string; value: string }> = [];
+      const optionArgs: Array<{ label: string; value: string }> = [];
+      let mainArg: string | undefined;
 
-      switch (args.action) {
-        case "start": {
-          if (args.name) {
-            text += ` ${theme.fg("accent", `"${args.name}"`)}`;
-          }
-          if (args.command) {
-            text += `\n${theme.fg("muted", `$ ${args.command}`)}`;
-          }
-          return new Text(text, 0, 0);
+      if (args.action === "start") {
+        if (args.name) {
+          mainArg = `"${args.name}"`;
         }
-        case "output":
-        case "kill":
-        case "logs":
-          if (args.id) {
-            text += ` ${theme.fg("muted", args.id)}`;
+
+        if (args.command) {
+          if (!mainArg && args.command.length <= 60) {
+            mainArg = args.command;
+          } else if (args.command.length <= 60) {
+            optionArgs.push({ label: "command", value: args.command });
+          } else {
+            longArgs.push({ label: "command", value: args.command });
           }
-          break;
+        }
+      }
+
+      if (
+        (args.action === "output" ||
+          args.action === "kill" ||
+          args.action === "logs") &&
+        args.id
+      ) {
+        mainArg = args.id;
       }
 
-      return new Text(text, 0, 0);
+      return new ToolCallHeader(
+        {
+          toolName: "Process",
+          action: args.action,
+          mainArg,
+          optionArgs,
+          longArgs,
+        },
+        theme,
+      );
     },
 
     renderResult(
       result: AgentToolResult<ProcessesDetails>,
-      _options: ToolRenderResultOptions,
+      options: ToolRenderResultOptions,
       theme: Theme,
-    ): Text {
+    ) {
       const { details } = result;
 
       if (!details) {
@@ -140,34 +141,32 @@ Note: User always sees process updates in the UI. The notify flags control wheth
         );
       }
 
-      if (!details.success) {
-        return new Text(theme.fg("error", details.message), 0, 0);
-      }
-
-      // For start action
-      if (details.action === "start" && details.process) {
-        const p = details.process;
-        return new Text(
-          theme.fg("success", "\u2713 Started ") +
-            theme.fg("accent", `"${p.name}"`) +
-            ` (${p.id}, PID: ${p.pid})`,
-          0,
-          0,
-        );
-      }
-
-      // For output action
-      if (details.action === "output" && details.output) {
-        const lines: string[] = [];
-        lines.push(theme.fg("muted", details.message));
+      const fields: Array<
+        { label: string; value: string; showCollapsed?: boolean } | Text
+      > = [];
 
+      if (!details.success) {
+        fields.push({
+          label: "Error",
+          value: theme.fg("error", details.message),
+          showCollapsed: true,
+        });
+      } else if (details.action === "start" && details.process) {
+        const process = details.process;
+        fields.push({
+          label: "Status",
+          value:
+            theme.fg("success", "Started") +
+            ` ${theme.fg("accent", `"${process.name}"`)} (${process.id}, PID: ${process.pid})`,
+          showCollapsed: true,
+        });
+      } else if (details.action === "output" && details.output) {
+        const lines: string[] = [theme.fg("muted", details.message)];
         let hadAnsi = false;
 
         if (details.output.stdout.length > 0) {
-          lines.push("");
-          lines.push(theme.fg("accent", "stdout:"));
-          const stdoutLines = details.output.stdout.slice(-20);
-          for (const line of stdoutLines) {
+          lines.push("", theme.fg("accent", "stdout:"));
+          for (const line of details.output.stdout.slice(-20)) {
             if (!hadAnsi && hasAnsi(line)) hadAnsi = true;
             lines.push(stripAnsi(line));
           }
@@ -182,10 +181,8 @@ Note: User always sees process updates in the UI. The notify flags control wheth
         }
 
         if (details.output.stderr.length > 0) {
-          lines.push("");
-          lines.push(theme.fg("warning", "stderr:"));
-          const stderrLines = details.output.stderr.slice(-10);
-          for (const line of stderrLines) {
+          lines.push("", theme.fg("warning", "stderr:"));
+          for (const line of details.output.stderr.slice(-10)) {
             if (!hadAnsi && hasAnsi(line)) hadAnsi = true;
             lines.push(theme.fg("warning", stripAnsi(line)));
           }
@@ -200,28 +197,25 @@ Note: User always sees process updates in the UI. The notify flags control wheth
         }
 
         if (hadAnsi) {
-          lines.push("");
           lines.push(
+            "",
             theme.fg("muted", "ANSI escape codes were stripped from output"),
           );
         }
 
-        return new Text(lines.join("\n"), 0, 0);
-      }
-
-      // For list action
-      if (
+        fields.push(new Text(lines.join("\n"), 0, 0));
+      } else if (
         details.action === "list" &&
         details.processes &&
         details.processes.length > 0
       ) {
-        const lines: string[] = [];
-        lines.push(
+        const lines: string[] = [
           theme.fg("success", `${details.processes.length} process(es):`),
-        );
-        for (const p of details.processes) {
+        ];
+
+        for (const process of details.processes) {
           let status: string;
-          switch (p.status) {
+          switch (process.status) {
             case "running":
               status = theme.fg("accent", "running");
               break;
@@ -235,43 +229,52 @@ Note: User always sees process updates in the UI. The notify flags control wheth
               status = theme.fg("warning", "killed");
               break;
             case "exited":
-              status = p.success
+              status = process.success
                 ? theme.fg("success", "exit(0)")
-                : theme.fg("error", `exit(${p.exitCode ?? "?"})`);
+                : theme.fg("error", `exit(${process.exitCode ?? "?"})`);
               break;
             default:
-              status = theme.fg("muted", p.status);
+              status = theme.fg("muted", process.status);
           }
+
           lines.push(
-            `  ${p.id} ${theme.fg("accent", `"${p.name}"`)}: ${truncateCmd(p.command)} [${status}] ${formatRuntime(p.startTime, p.endTime)}`,
+            `  ${process.id} ${theme.fg("accent", `"${process.name}"`)}: ${truncateCmd(process.command)} [${status}] ${formatRuntime(process.startTime, process.endTime)}`,
           );
         }
-        return new Text(lines.join("\n"), 0, 0);
-      }
 
-      // For logs action
-      if (details.action === "logs" && details.logFiles) {
-        const lines: string[] = [];
-        lines.push(theme.fg("success", "Log files:"));
-        lines.push(
-          `  stdout: ${theme.fg("accent", details.logFiles.stdoutFile)}`,
+        fields.push(new Text(lines.join("\n"), 0, 0));
+      } else if (details.action === "logs" && details.logFiles) {
+        fields.push(
+          new Text(
+            [
+              theme.fg("success", "Log files:"),
+              `  stdout: ${theme.fg("accent", details.logFiles.stdoutFile)}`,
+              `  stderr: ${theme.fg("accent", details.logFiles.stderrFile)}`,
+            ].join("\n"),
+            0,
+            0,
+          ),
         );
-        lines.push(
-          `  stderr: ${theme.fg("accent", details.logFiles.stderrFile)}`,
-        );
-        return new Text(lines.join("\n"), 0, 0);
+      } else {
+        fields.push({
+          label: "Result",
+          value: details.message,
+          showCollapsed: true,
+        });
       }
 
-      // For clear action
-      if (details.action === "clear") {
-        return new Text(
-          theme.fg("success", "\u2713 ") + theme.fg("muted", details.message),
-          0,
-          0,
-        );
-      }
+      const footer = new ToolFooter(theme, {
+        items: [
+          { label: "action", value: details.action, tone: "accent" },
+          {
+            label: "status",
+            value: details.success ? "ok" : "error",
+            tone: details.success ? "success" : "error",
+          },
+        ],
+      });
 
-      return new Text(details.message, 0, 0);
+      return new ToolBody({ fields, footer }, options, theme);
     },
   });
 }