@jx0/jmux 0.1.0

package/src/main.ts

@@ -0,0 +1,405 @@
+import { $ } from "bun";
+import { TmuxPty } from "./tmux-pty";
+import { ScreenBridge } from "./screen-bridge";
+import { Renderer } from "./renderer";
+import { InputRouter } from "./input-router";
+import { Sidebar } from "./sidebar";
+import { TmuxControl, type ControlEvent } from "./tmux-control";
+import type { SessionInfo } from "./types";
+import { resolve, dirname } from "path";
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
+import { homedir } from "os";
+
+// --- CLI commands (run and exit before TUI) ---
+
+if (process.argv.includes("--install-agent-hooks")) {
+  installAgentHooks();
+  process.exit(0);
+}
+
+function installAgentHooks(): void {
+  const claudeDir = resolve(homedir(), ".claude");
+  const settingsPath = resolve(claudeDir, "settings.json");
+
+  // Ensure .claude directory exists
+  if (!existsSync(claudeDir)) {
+    mkdirSync(claudeDir, { recursive: true });
+  }
+
+  // Read existing settings or start fresh
+  let settings: Record<string, any> = {};
+  if (existsSync(settingsPath)) {
+    try {
+      settings = JSON.parse(readFileSync(settingsPath, "utf-8"));
+    } catch {
+      console.error("Error: could not parse ~/.claude/settings.json");
+      process.exit(1);
+    }
+  }
+
+  // Check if hook already exists
+  const stopHooks = settings.hooks?.Stop;
+  if (stopHooks) {
+    const alreadyInstalled = stopHooks.some((entry: any) =>
+      entry.hooks?.some((h: any) => h.command?.includes("@jmux-attention")),
+    );
+    if (alreadyInstalled) {
+      console.log("jmux agent hooks are already installed.");
+      return;
+    }
+  }
+
+  // Add the hook
+  if (!settings.hooks) settings.hooks = {};
+  if (!settings.hooks.Stop) settings.hooks.Stop = [];
+
+  settings.hooks.Stop.push({
+    hooks: [
+      {
+        type: "command",
+        command: "tmux set-option @jmux-attention 1 2>/dev/null || true",
+        timeout: 5,
+      },
+    ],
+  });
+
+  writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+  console.log("Installed jmux agent hooks in ~/.claude/settings.json");
+  console.log("");
+  console.log("When Claude Code finishes a response, your jmux sidebar");
+  console.log("will show an orange ! on that session.");
+}
+
+// --- TUI startup ---
+
+const SIDEBAR_WIDTH = 24;
+const BORDER_WIDTH = 1;
+const SIDEBAR_TOTAL = SIDEBAR_WIDTH + BORDER_WIDTH;
+
+// Resolve paths relative to source
+const jmuxDir = resolve(dirname(import.meta.dir));
+const configFile = resolve(jmuxDir, "config", "tmux.conf");
+
+// Parse args: jmux [session] [--socket name]
+let sessionName: string | undefined;
+let socketName: string | undefined;
+for (let i = 2; i < process.argv.length; i++) {
+  if (process.argv[i] === "--socket" || process.argv[i] === "-L") {
+    socketName = process.argv[++i];
+  } else if (!sessionName && !process.argv[i].startsWith("-")) {
+    sessionName = process.argv[i];
+  }
+}
+const cols = process.stdout.columns || 80;
+const rows = process.stdout.rows || 24;
+const sidebarVisible = cols >= 80;
+const mainCols = sidebarVisible ? cols - SIDEBAR_TOTAL : cols;
+
+// Enter alternate screen, raw mode, enable mouse tracking
+process.stdout.write("\x1b[?1049h");
+process.stdout.write("\x1b[?1000h"); // mouse button tracking
+process.stdout.write("\x1b[?1006h"); // SGR extended mouse mode
+if (process.stdin.setRawMode) {
+  process.stdin.setRawMode(true);
+}
+process.stdin.resume();
+
+// Core components
+const pty = new TmuxPty({ sessionName, socketName, configFile, jmuxDir, cols: mainCols, rows });
+const bridge = new ScreenBridge(mainCols, rows);
+const renderer = new Renderer();
+const sidebar = new Sidebar(SIDEBAR_WIDTH, rows);
+const control = new TmuxControl();
+
+let currentSessionId: string | null = null;
+let ptyClientName: string | null = null;
+let sidebarShown = sidebarVisible;
+let currentSessions: SessionInfo[] = [];
+const lastViewedTimestamps = new Map<string, number>();
+
+function switchByOffset(offset: number): void {
+  const ids = sidebar.getDisplayOrderIds();
+  if (ids.length === 0) return;
+  const currentIdx = ids.indexOf(currentSessionId ?? "");
+  const base = currentIdx >= 0 ? currentIdx : 0;
+  const newIdx = (base + offset + ids.length) % ids.length;
+  switchSession(ids[newIdx]);
+}
+
+// --- Session data helpers ---
+
+async function fetchSessions(): Promise<void> {
+  try {
+    const lines = await control.sendCommand(
+      "list-sessions -F '#{session_id}:#{session_name}:#{session_activity}:#{session_attached}:#{session_windows}'",
+    );
+    const sessions: SessionInfo[] = lines
+      .filter((l) => l.length > 0)
+      .map((line) => {
+        const [id, name, activity, attached, windows] = line.split(":");
+        return {
+          id,
+          name,
+          activity: parseInt(activity, 10) || 0,
+          attached: attached === "1",
+          attention: false,
+          windowCount: parseInt(windows, 10) || 1,
+        };
+      });
+    currentSessions = sessions;
+
+    // Mark sessions with activity since last viewed
+    for (const session of sessions) {
+      const lastViewed = lastViewedTimestamps.get(session.id) ?? 0;
+      if (session.activity > lastViewed && session.id !== currentSessionId) {
+        sidebar.setActivity(session.id, true);
+      }
+    }
+
+    sidebar.updateSessions(sessions);
+    renderFrame();
+
+    // Fire-and-forget git branch lookup (async, updates sidebar when done)
+    lookupSessionDetails(sessions);
+  } catch {
+    // tmux server may be shutting down
+  }
+}
+
+async function resolveClientName(): Promise<void> {
+  try {
+    const lines = await control.sendCommand(
+      "list-clients -F '#{client_name}:#{client_pid}:#{client_session}'",
+    );
+    const pid = pty.pid.toString();
+    for (const line of lines) {
+      const parts = line.split(":");
+      if (parts[1] === pid) {
+        ptyClientName = parts[0];
+        // Set the initial active session
+        const clientSessionName = parts[2];
+        if (clientSessionName) {
+          const match = currentSessions.find((s) => s.name === clientSessionName);
+          if (match) {
+            currentSessionId = match.id;
+            sidebar.setActiveSession(match.id);
+          }
+        }
+        return;
+      }
+    }
+  } catch {
+    // Retry on next session switch
+  }
+}
+
+async function switchSession(sessionId: string): Promise<void> {
+  if (!ptyClientName) await resolveClientName();
+  if (!ptyClientName) return;
+
+  try {
+    await control.sendCommand(
+      `switch-client -c ${ptyClientName} -t '${sessionId}'`,
+    );
+    lastViewedTimestamps.set(sessionId, Math.floor(Date.now() / 1000));
+    sidebar.setActivity(sessionId, false);
+    currentSessionId = sessionId;
+    sidebar.setActiveSession(sessionId);
+    renderFrame();
+
+    // Clear attention flag if set
+    try {
+      await control.sendCommand(
+        `set-option -t '${sessionId}' -u @jmux-attention`,
+      );
+    } catch {
+      // Option may not be set
+    }
+  } catch {
+    // Session may have been killed
+  }
+}
+
+// --- Rendering ---
+
+let renderTimer: ReturnType<typeof setTimeout> | null = null;
+
+function renderFrame(): void {
+  const grid = bridge.getGrid();
+  const cursor = bridge.getCursor();
+  renderer.render(grid, cursor, sidebarShown ? sidebar.getGrid() : null);
+}
+
+function scheduleRender(): void {
+  if (renderTimer !== null) return;
+  renderTimer = setTimeout(() => {
+    renderTimer = null;
+    renderFrame();
+  }, 16); // ~60fps cap
+}
+
+// --- Input Router ---
+
+const inputRouter = new InputRouter(
+  {
+    sidebarCols: SIDEBAR_WIDTH,
+    onPtyData: (data) => pty.write(data),
+    onSidebarClick: (row) => {
+      const session = sidebar.getSessionByRow(row);
+      if (session) switchSession(session.id);
+    },
+    onSessionPrev: () => switchByOffset(-1),
+    onSessionNext: () => switchByOffset(1),
+  },
+  sidebarShown,
+);
+
+// --- PTY output pipeline ---
+
+let writesPending = 0;
+
+pty.onData((data: string) => {
+  writesPending++;
+  bridge.write(data).then(() => {
+    writesPending--;
+    if (writesPending === 0) {
+      scheduleRender();
+    }
+  });
+});
+
+// --- Stdin ---
+
+process.stdin.on("data", (data: Buffer) => {
+  inputRouter.handleInput(data.toString());
+});
+
+// --- Resize ---
+
+process.on("SIGWINCH", () => {
+  const newCols = process.stdout.columns || 80;
+  const newRows = process.stdout.rows || 24;
+  const newSidebarVisible = newCols >= 80;
+  const newMainCols = newSidebarVisible ? newCols - SIDEBAR_TOTAL : newCols;
+
+  sidebarShown = newSidebarVisible;
+  inputRouter.setSidebarVisible(newSidebarVisible);
+  pty.resize(newMainCols, newRows);
+  bridge.resize(newMainCols, newRows);
+  sidebar.resize(SIDEBAR_WIDTH, newRows);
+});
+
+// --- Control mode events ---
+
+control.onEvent((event: ControlEvent) => {
+  switch (event.type) {
+    case "sessions-changed":
+      fetchSessions();
+      break;
+    case "session-changed":
+      currentSessionId = event.args;
+      sidebar.setActiveSession(event.args);
+      renderFrame();
+      break;
+    case "client-session-changed":
+      // A client (possibly our PTY client) switched sessions — re-resolve
+      resolveClientName().then(() => renderFrame());
+      break;
+    case "subscription-changed":
+      if (event.name === "attention") {
+        const pairs = event.value.trim().split(/\s+/);
+        for (const pair of pairs) {
+          const eqIdx = pair.indexOf("=");
+          if (eqIdx === -1) continue;
+          const id = pair.slice(0, eqIdx);
+          const val = pair.slice(eqIdx + 1);
+          if (val === "1") {
+            sidebar.setActivity(id, false);
+          }
+        }
+        fetchSessions();
+      }
+      break;
+  }
+});
+
+// --- Git branch lookup ---
+
+async function lookupSessionDetails(sessions: SessionInfo[]): Promise<void> {
+  const home = process.env.HOME || "";
+  for (const session of sessions) {
+    try {
+      // Use control mode connection — respects -L socket and -f config
+      const lines = await control.sendCommand(
+        `display-message -t '${session.id}' -p '#{pane_current_path}'`,
+      );
+      const cwd = (lines[0] || "").trim();
+      if (!cwd) continue;
+      session.directory = cwd.startsWith(home)
+        ? "~" + cwd.slice(home.length)
+        : cwd;
+      const branch = await $`git -C ${cwd} branch --show-current`
+        .text()
+        .catch(() => "");
+      session.gitBranch = branch.trim() || undefined;
+    } catch {
+      // Session may not exist or no git repo
+    }
+  }
+  sidebar.updateSessions(sessions);
+  renderFrame();
+}
+
+// --- Startup sequence ---
+
+async function start(): Promise<void> {
+  // Wait for first PTY data (tmux is ready) using a one-shot flag
+  await new Promise<void>((resolve) => {
+    let resolved = false;
+    pty.onData(function firstData() {
+      if (!resolved) {
+        resolved = true;
+        resolve();
+      }
+    });
+  });
+
+  // Start control mode
+  await control.start({ socketName, configFile });
+
+  // Prefix is C-a — hardcoded since we ship our own tmux.conf
+
+  // Fetch initial sessions, then resolve client name (needs sessions list)
+  await fetchSessions();
+  await resolveClientName();
+  renderFrame();
+
+  // Subscribe to @jmux-attention across all sessions
+  await control.registerSubscription(
+    "attention",
+    1,
+    "#{S:#{session_id}=#{@jmux-attention} }",
+  );
+}
+
+// --- Cleanup ---
+
+function cleanup(): void {
+  control.close().catch(() => {});
+  process.stdout.write("\x1b[?1000l"); // disable mouse button tracking
+  process.stdout.write("\x1b[?1006l"); // disable SGR mouse mode
+  process.stdout.write("\x1b[?25h");
+  process.stdout.write("\x1b[?1049l");
+  if (process.stdin.setRawMode) {
+    process.stdin.setRawMode(false);
+  }
+  process.exit(0);
+}
+
+pty.onExit(() => cleanup());
+process.on("SIGINT", () => cleanup());
+process.on("SIGTERM", () => cleanup());
+
+// --- Go ---
+
+start().catch(() => cleanup());

package/src/renderer.ts

@@ -0,0 +1,132 @@
+import type { Cell, CellGrid, CursorPosition } from "./types";
+import { ColorMode } from "./types";
+import { createGrid, DEFAULT_CELL } from "./cell-grid";
+
+export const BORDER_CHAR = "\u2502"; // │
+
+export function sgrForCell(cell: Cell): string {
+  const parts: string[] = ["0"]; // always reset first
+
+  if (cell.bold) parts.push("1");
+  if (cell.dim) parts.push("2");
+  if (cell.italic) parts.push("3");
+  if (cell.underline) parts.push("4");
+
+  // Foreground
+  if (cell.fgMode === ColorMode.Palette) {
+    if (cell.fg < 8) {
+      parts.push(`${30 + cell.fg}`);
+    } else if (cell.fg < 16) {
+      parts.push(`${90 + cell.fg - 8}`);
+    } else {
+      parts.push(`38;5;${cell.fg}`);
+    }
+  } else if (cell.fgMode === ColorMode.RGB) {
+    const r = (cell.fg >> 16) & 0xff;
+    const g = (cell.fg >> 8) & 0xff;
+    const b = cell.fg & 0xff;
+    parts.push(`38;2;${r};${g};${b}`);
+  }
+
+  // Background
+  if (cell.bgMode === ColorMode.Palette) {
+    if (cell.bg < 8) {
+      parts.push(`${40 + cell.bg}`);
+    } else if (cell.bg < 16) {
+      parts.push(`${100 + cell.bg - 8}`);
+    } else {
+      parts.push(`48;5;${cell.bg}`);
+    }
+  } else if (cell.bgMode === ColorMode.RGB) {
+    const r = (cell.bg >> 16) & 0xff;
+    const g = (cell.bg >> 8) & 0xff;
+    const b = cell.bg & 0xff;
+    parts.push(`48;2;${r};${g};${b}`);
+  }
+
+  return `\x1b[${parts.join(";")}m`;
+}
+
+export function compositeGrids(
+  main: CellGrid,
+  sidebar: CellGrid | null,
+): CellGrid {
+  if (!sidebar) return main;
+
+  const totalCols = sidebar.cols + 1 + main.cols;
+  const rows = main.rows;
+  const grid = createGrid(totalCols, rows);
+
+  for (let y = 0; y < rows; y++) {
+    // Copy sidebar cells
+    for (let x = 0; x < sidebar.cols && x < sidebar.cells[y]?.length; x++) {
+      grid.cells[y][x] = { ...sidebar.cells[y][x] };
+    }
+    // Border column
+    const borderCol = sidebar.cols;
+    grid.cells[y][borderCol] = {
+      ...DEFAULT_CELL,
+      char: BORDER_CHAR,
+      dim: true,
+    };
+    // Copy main cells
+    for (let x = 0; x < main.cols; x++) {
+      grid.cells[y][borderCol + 1 + x] = { ...main.cells[y][x] };
+    }
+  }
+
+  return grid;
+}
+
+function cellsEqual(a: Cell, b: Cell): boolean {
+  return (
+    a.fg === b.fg &&
+    a.bg === b.bg &&
+    a.fgMode === b.fgMode &&
+    a.bgMode === b.bgMode &&
+    a.bold === b.bold &&
+    a.dim === b.dim &&
+    a.italic === b.italic &&
+    a.underline === b.underline
+  );
+}
+
+export class Renderer {
+  private prevAttrs: Cell | null = null;
+
+  render(
+    main: CellGrid,
+    cursor: CursorPosition,
+    sidebar: CellGrid | null,
+  ): void {
+    const grid = compositeGrids(main, sidebar);
+    const cursorOffset = sidebar ? sidebar.cols + 1 : 0;
+    const buf: string[] = [];
+
+    for (let y = 0; y < grid.rows; y++) {
+      // Move to start of row (1-indexed)
+      buf.push(`\x1b[${y + 1};1H`);
+      this.prevAttrs = null;
+
+      for (let x = 0; x < grid.cols; x++) {
+        const cell = grid.cells[y][x];
+
+        // Emit SGR only when attributes change
+        if (!this.prevAttrs || !cellsEqual(this.prevAttrs, cell)) {
+          buf.push(sgrForCell(cell));
+          this.prevAttrs = cell;
+        }
+
+        buf.push(cell.char);
+      }
+    }
+
+    // Reset attributes, position cursor
+    buf.push("\x1b[0m");
+    buf.push(
+      `\x1b[${cursor.y + 1};${cursor.x + cursorOffset + 1}H`,
+    );
+
+    process.stdout.write(buf.join(""));
+  }
+}

package/src/screen-bridge.ts

@@ -0,0 +1,70 @@
+import { Terminal } from "@xterm/headless";
+import type { Cell, CellGrid, CursorPosition } from "./types";
+import { ColorMode } from "./types";
+import { createGrid, DEFAULT_CELL } from "./cell-grid";
+
+export class ScreenBridge {
+  private terminal: Terminal;
+
+  constructor(cols: number, rows: number) {
+    this.terminal = new Terminal({
+      cols,
+      rows,
+      scrollback: 0,
+      allowProposedApi: true,
+    });
+  }
+
+  write(data: string): Promise<void> {
+    return new Promise((resolve) => {
+      this.terminal.write(data, resolve);
+    });
+  }
+
+  getGrid(): CellGrid {
+    const cols = this.terminal.cols;
+    const rows = this.terminal.rows;
+    const grid = createGrid(cols, rows);
+    const buffer = this.terminal.buffer.active;
+
+    for (let y = 0; y < rows; y++) {
+      const line = buffer.getLine(y);
+      if (!line) continue;
+      for (let x = 0; x < cols; x++) {
+        const xtermCell = line.getCell(x);
+        if (!xtermCell) continue;
+
+        const cell = grid.cells[y][x];
+        const chars = xtermCell.getChars();
+        cell.char = chars || " ";
+        cell.fg = xtermCell.getFgColor();
+        cell.bg = xtermCell.getBgColor();
+        cell.fgMode = xtermCell.isFgRGB()
+          ? ColorMode.RGB
+          : xtermCell.isFgPalette()
+            ? ColorMode.Palette
+            : ColorMode.Default;
+        cell.bgMode = xtermCell.isBgRGB()
+          ? ColorMode.RGB
+          : xtermCell.isBgPalette()
+            ? ColorMode.Palette
+            : ColorMode.Default;
+        cell.bold = xtermCell.isBold() !== 0;
+        cell.italic = xtermCell.isItalic() !== 0;
+        cell.underline = xtermCell.isUnderline() !== 0;
+        cell.dim = xtermCell.isDim() !== 0;
+      }
+    }
+
+    return grid;
+  }
+
+  getCursor(): CursorPosition {
+    const buffer = this.terminal.buffer.active;
+    return { x: buffer.cursorX, y: buffer.cursorY };
+  }
+
+  resize(cols: number, rows: number): void {
+    this.terminal.resize(cols, rows);
+  }
+}