update /mux ui

Author: leohenon

src/mux-menu.ts

@@ -1,7 +1,16 @@
 import { execFileSync } from "node:child_process";
-import type { Theme } from "@mariozechner/pi-coding-agent";
-import { Container } from "@mariozechner/pi-tui";
-import type { Focusable, TUI } from "@mariozechner/pi-tui";
+import {
+  DynamicBorder,
+  rawKeyHint,
+  type Theme,
+} from "@mariozechner/pi-coding-agent";
+import {
+  Container,
+  Spacer,
+  truncateToWidth,
+  visibleWidth,
+} from "@mariozechner/pi-tui";
+import type { Component, Focusable, TUI } from "@mariozechner/pi-tui";
 import * as heartbeat from "./heartbeat.js";
 
 const POOL = "_pi-mux";
@@ -30,6 +39,8 @@ export class MuxMenu extends Container implements Focusable {
   private readonly currentCwd: string;
   private readonly done: (result: undefined) => void;
   private refreshTimer?: ReturnType<typeof setInterval>;
+  private poolPanes = new Set<string>();
+  private readonly list: MuxList;
 
   constructor(opts: MuxMenuOptions) {
     super();
@@ -38,6 +49,8 @@ export class MuxMenu extends Container implements Focusable {
     this.currentPaneId = opts.currentPaneId;
     this.currentCwd = opts.currentCwd;
     this.done = opts.done;
+    this.list = new MuxList(this);
+    this.buildLayout();
     this.refresh();
     this.refreshTimer = setInterval(() => {
       this.refresh();
@@ -47,29 +60,60 @@ export class MuxMenu extends Container implements Focusable {
       this.refreshTimer.unref();
   }
 
+  private buildLayout(): void {
+    this.clear();
+    this.addChild(new Spacer(1));
+    this.addChild(new DynamicBorder((s) => this.theme.fg("accent", s)));
+    this.addChild(new Spacer(1));
+    this.addChild(this.list);
+    this.addChild(new Spacer(1));
+    this.addChild(new DynamicBorder((s) => this.theme.fg("accent", s)));
+  }
+
   dispose(): void {
     if (this.refreshTimer) {
       clearInterval(this.refreshTimer);
       this.refreshTimer = undefined;
     }
   }
 
-  private poolPanes = new Set<string>();
-
   private refresh(): void {
     this.poolPanes = listPoolPanes();
     const all = heartbeat.listActive();
     const inScope =
-      this.scope === "all"
-        ? all
-        : all.filter((e) => e.cwd === this.currentCwd);
+      this.scope === "all" ? all : all.filter((e) => e.cwd === this.currentCwd);
     inScope.sort((a, b) => a.paneId.localeCompare(b.paneId));
     this.rows = inScope;
     if (this.selectedIndex >= this.rows.length) {
       this.selectedIndex = Math.max(0, this.rows.length - 1);
     }
   }
 
+  getRows(): heartbeat.Heartbeat[] {
+    return this.rows;
+  }
+  getPoolPanes(): Set<string> {
+    return this.poolPanes;
+  }
+  getSelectedIndex(): number {
+    return this.selectedIndex;
+  }
+  getMode(): Mode {
+    return this.mode;
+  }
+  getPendingConfirmMessage(): string {
+    return this.pendingConfirmMessage;
+  }
+  getScope(): Scope {
+    return this.scope;
+  }
+  getCurrentPaneId(): string {
+    return this.currentPaneId;
+  }
+  getTheme(): Theme {
+    return this.theme;
+  }
+
   private killTargets(): heartbeat.Heartbeat[] {
     return this.rows.filter((r) => r.paneId !== this.currentPaneId);
   }
@@ -167,67 +211,104 @@ export class MuxMenu extends Container implements Focusable {
       execFileSync("tmux", ["kill-pane", "-t", paneId]);
     } catch {}
   }
+}
+
+class MuxList implements Component {
+  constructor(private readonly parent: MuxMenu) {}
+
+  invalidate(): void {}
 
   render(width: number): string[] {
-    const lines: string[] = [];
-    const scopeLabel = this.scope === "cwd" ? "this folder" : "all folders";
-    const header = this.theme.bold(
-      `pi-mux  ${this.theme.fg(
-        "muted",
-        `[${this.rows.length} in ${scopeLabel}]`,
-      )}`,
+    const theme = this.parent.getTheme();
+    const rows = this.parent.getRows();
+    const poolPanes = this.parent.getPoolPanes();
+    const currentPaneId = this.parent.getCurrentPaneId();
+    const selectedIndex = this.parent.getSelectedIndex();
+    const mode = this.parent.getMode();
+
+    const scope = this.parent.getScope();
+    const title = theme.bold("pi-mux");
+    const scopeText =
+      scope === "cwd"
+        ? `${theme.fg("accent", "◉ Current Folder")}${theme.fg("muted", " | ○ All")}`
+        : `${theme.fg("muted", "○ Current Folder | ")}${theme.fg("accent", "◉ All")}`;
+    const spacingN = Math.max(
+      1,
+      width - visibleWidth(title) - visibleWidth(scopeText),
     );
-    lines.push(truncate(header, width));
+    const header = title + " ".repeat(spacingN) + scopeText;
+
+    const lines: string[] = [];
+    lines.push(truncateToWidth(header, width, ""));
     lines.push("");
 
-    if (this.rows.length === 0) {
-      lines.push(
-        this.theme.fg("muted", "  (no backgrounded pi sessions)"),
-      );
+    if (rows.length === 0) {
+      lines.push(theme.fg("muted", "  (no pi sessions tracked)"));
     } else {
-      for (let i = 0; i < this.rows.length; i++) {
-        const row = this.rows[i]!;
-        const isCurrent = row.paneId === this.currentPaneId;
-        const isSelected = i === this.selectedIndex;
-        const inPool = this.poolPanes.has(row.paneId);
-        const cursor = isSelected ? this.theme.fg("accent", "› ") : "  ";
-        const cwdShort = row.cwd.replace(process.env.HOME ?? "", "~");
-        const name = row.label?.trim() || "(empty session)";
-        const snippet = name.length > 50 ? `${name.slice(0, 47)}…` : name;
-        const label = `${cwdShort}  ${this.theme.fg("muted", snippet)}`;
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i]!;
+        const isCurrent = row.paneId === currentPaneId;
+        const isSelected = i === selectedIndex;
+        const inPool = poolPanes.has(row.paneId);
+
+        const cursor = isSelected ? theme.fg("accent", "› ") : "  ";
+
+        const rawName = row.label?.trim() || "(empty session)";
+        const normalizedName = rawName.replace(/[\x00-\x1f\x7f]/g, " ").trim();
+
         const tagParts: string[] = [];
         if (isCurrent) tagParts.push("current");
         else if (inPool) tagParts.push("backgrounded");
         else tagParts.push("open");
         if (row.busy && !isCurrent) tagParts.push("busy");
-        const tags = this.theme.fg("muted", ` [${tagParts.join(" · ")}]`);
-        let line = cursor + label + tags;
-        if (isSelected) line = this.theme.bg("selectedBg", line);
-        lines.push(truncate(line, width));
+        const tagPlain = `[${tagParts.join(" · ")}]`;
+        const tagStyled = theme.fg("dim", tagPlain);
+
+        const cwdShort = row.cwd.replace(process.env.HOME ?? "", "~");
+
+        const cursorWidth = visibleWidth(cursor);
+        const tagWidth = visibleWidth(tagPlain);
+        const cwdWidth = visibleWidth(cwdShort);
+        const minGap = 6;
+        const availableForName = Math.max(
+          5,
+          width - cursorWidth - 1 - tagWidth - minGap - cwdWidth,
+        );
+        const truncatedName = truncateToWidth(
+          normalizedName,
+          availableForName,
+          "…",
+        );
+        const styledName = isCurrent
+          ? theme.fg("accent", truncatedName)
+          : truncatedName;
+        const boldedName = isSelected ? theme.bold(styledName) : styledName;
+
+        const leftPart = `${cursor}${boldedName} ${tagStyled}`;
+        const leftWidth = visibleWidth(leftPart);
+        const spacing = Math.max(minGap, width - leftWidth - cwdWidth);
+        let line = leftPart + " ".repeat(spacing) + theme.fg("dim", cwdShort);
+        if (isSelected) line = theme.bg("selectedBg", line);
+        lines.push(truncateToWidth(line, width, ""));
       }
     }
 
     lines.push("");
-    if (this.mode !== "list") {
-      lines.push(this.theme.fg("error", this.pendingConfirmMessage));
+    if (mode !== "list") {
+      lines.push(theme.fg("error", this.parent.getPendingConfirmMessage()));
     } else {
+      const sep = theme.fg("muted", " · ");
       const hints = [
-        "d kill",
-        "D kill all",
-        "tab scope",
-        "q close",
-      ].join(this.theme.fg("muted", " · "));
-      lines.push(this.theme.fg("muted", hints));
+        rawKeyHint("d", "kill"),
+        rawKeyHint("D", "kill all"),
+        rawKeyHint("tab", "scope"),
+        rawKeyHint("q", "close"),
+      ].join(sep);
+      lines.push(hints);
     }
 
-    return lines.map((l) => truncate(l, width));
+    return lines;
   }
-
-  invalidate(): void {}
-}
-
-function truncate(s: string, width: number): string {
-  return s.length > width * 4 ? s.slice(0, width * 4) : s;
 }
 
 function listPoolPanes(): Set<string> {