claude-mux 0.7.0

package/src/commands/tui.ts

@@ -0,0 +1,255 @@
+import { Command } from "commander";
+import { render } from "ink";
+import React from "react";
+import { execSync } from "child_process";
+import { existsSync, writeFileSync, unlinkSync, readFileSync, mkdirSync } from "fs";
+import { createInterface } from "readline";
+import { join } from "path";
+import { App } from "../app.js";
+import { isInTmux, getTmuxSessionName } from "../tmux/detect.js";
+import { CLAUDE_WATCH_DIR, SESSIONS_DIR, DEFAULT_SERVER_PORT } from "../utils/paths.js";
+import { VERSION } from "../utils/version.js";
+import { isPidAlive } from "../utils/pid.js";
+import {
+  checkHooksStatus,
+  getInstalledHooksVersion,
+  installHooks,
+  saveClaudeSettings,
+} from "../setup/hooks.js";
+
+const WATCH_SESSION = "watch";
+
+/**
+ * Prompt user for input and return their response.
+ */
+function promptUser(question: string): Promise<string> {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+}
+
+export interface TuiOptions {
+  serve?: boolean;
+  port: string;
+  host: string;
+}
+
+export async function runTui(options: TuiOptions): Promise<void> {
+  // Check if running in tmux
+  if (!isInTmux()) {
+    console.error("claude-mux requires tmux to run.");
+    console.error("");
+    console.error("Start tmux first, then run claude-mux from inside tmux.");
+    process.exit(1);
+  }
+
+  // Check if we're in the correct session
+  const currentSession = getTmuxSessionName();
+  if (currentSession !== WATCH_SESSION) {
+    console.log(`Switching to '${WATCH_SESSION}' session...`);
+
+    // Build command to re-invoke claude-mux the same way it was originally called
+    const cwd = process.cwd();
+    // Escape single quotes in args for shell safety
+    const escapeArg = (arg: string) => `'${arg.replace(/'/g, "'\\''")}'`;
+    const originalCmd = process.argv.map(escapeArg).join(" ");
+    const fullCmd = `cd ${escapeArg(cwd)} && ${originalCmd}`;
+
+    try {
+      // Kill any existing watch session that isn't running claude-mux,
+      // then (re)create it with the command passed directly to new-session.
+      //
+      // We avoid tmux send-keys entirely because it races with shell init
+      // on macOS: zsh's compinit prompt intercepts keystrokes before the
+      // shell is ready, mangling the command (e.g. "cd" becoming "åWcd").
+      // Passing the command to new-session bypasses interactive shell init.
+
+      let needsCreate = true;
+      try {
+        execSync(`tmux has-session -t ${WATCH_SESSION} 2>/dev/null`, { stdio: "ignore" });
+        // Session exists - check if claude-mux is already running
+        try {
+          const paneCmd = execSync(
+            `tmux list-panes -t ${WATCH_SESSION} -F "#{pane_current_command}"`,
+            { encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }
+          ).trim();
+          if (paneCmd.includes("node") || paneCmd.includes("claude-mux")) {
+            // Already running, just switch to it
+            needsCreate = false;
+          } else {
+            // Session exists but claude-mux isn't running — add a new window
+            execSync(`tmux new-window -t ${WATCH_SESSION} ${escapeArg(fullCmd)}`, { stdio: "ignore" });
+            needsCreate = false;
+          }
+        } catch {
+          // Can't list panes — add a new window in the existing session
+          execSync(`tmux new-window -t ${WATCH_SESSION} ${escapeArg(fullCmd)}`, { stdio: "ignore" });
+          needsCreate = false;
+        }
+      } catch {
+        // Session doesn't exist
+      }
+
+      if (needsCreate) {
+        execSync(`tmux new-session -d -s ${WATCH_SESSION} ${escapeArg(fullCmd)}`, { stdio: "ignore" });
+      }
+      execSync(`tmux switch-client -t ${WATCH_SESSION}`, { stdio: "inherit" });
+    } catch (error) {
+      console.error("Failed to switch to watch session:", error);
+      process.exit(1);
+    }
+
+    process.exit(0);
+  }
+
+  // We're in the watch session, run the TUI
+
+  // Auto-create data directories if needed
+  if (!existsSync(CLAUDE_WATCH_DIR)) {
+    mkdirSync(CLAUDE_WATCH_DIR, { recursive: true });
+  }
+  if (!existsSync(SESSIONS_DIR)) {
+    mkdirSync(SESSIONS_DIR, { recursive: true });
+  }
+
+  // Check hooks version and prompt if needed
+  const hooksStatus = checkHooksStatus();
+  if (hooksStatus !== "current") {
+    const installedVersion = getInstalledHooksVersion();
+    const action = hooksStatus === "install" ? "installed" : "updated";
+    const currentInfo = installedVersion ? `installed: ${installedVersion}` : "not installed";
+
+    console.log(`claude-mux hooks need to be ${action} (${currentInfo}, required: ${VERSION})`);
+    console.log("");
+
+    const answer = await promptUser(`${hooksStatus === "install" ? "Install" : "Update"} hooks now? [Y/n/q]: `);
+    const normalized = answer.toLowerCase().trim();
+
+    if (normalized === "q") {
+      console.log("Exiting.");
+      process.exit(0);
+    } else if (normalized === "n") {
+      console.log("Skipping hook installation. Some features may not work correctly.");
+      console.log("");
+    } else {
+      // Default to Yes
+      console.log("Installing hooks...");
+      const { newSettings } = installHooks();
+      saveClaudeSettings(newSettings);
+      console.log("Hooks installed successfully.");
+      console.log("");
+    }
+  }
+
+  // Check if another instance is already running
+  const lockFile = join(CLAUDE_WATCH_DIR, "claude-mux.lock");
+  if (existsSync(lockFile)) {
+    try {
+      const lock = JSON.parse(readFileSync(lockFile, "utf-8"));
+      if (lock.pid && isPidAlive(lock.pid)) {
+        if (lock.version === VERSION) {
+          console.log("claude-mux is already running.");
+          if (lock.tmux_target) {
+            try {
+              execSync(`tmux switch-client -t "${lock.tmux_target}"`, { stdio: "inherit" });
+            } catch {
+              // Ignore - may already be in the right pane
+            }
+          }
+          process.exit(0);
+        } else {
+          // Different version — kill old instance and restart
+          console.log(`Restarting claude-mux (${lock.version || "unknown"} → ${VERSION})...`);
+          process.kill(lock.pid, "SIGTERM");
+          execSync("sleep 0.5", { stdio: "ignore" });
+        }
+      }
+    } catch {
+      // Stale or corrupt lock file, proceed
+    }
+  }
+
+  // Move window and pane to base indices so claude-mux is always at the first position
+  try {
+    const baseIndex = execSync('tmux show-options -gv base-index', {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"],
+    }).trim();
+    execSync(`tmux move-window -t ${baseIndex}`, { stdio: "ignore" });
+  } catch {
+    // Ignore - already at base index or move not possible
+  }
+  try {
+    const paneBaseIndex = execSync('tmux show-options -gv pane-base-index', {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"],
+    }).trim();
+    execSync(`tmux swap-pane -t .${paneBaseIndex}`, { stdio: "ignore" });
+  } catch {
+    // Ignore - already at base pane index or swap not possible
+  }
+
+  // Write lock file
+  const tmuxTarget = `${WATCH_SESSION}:${(() => {
+    try {
+      return execSync('tmux display-message -p "#{window_index}.#{pane_index}"', {
+        encoding: "utf-8",
+        stdio: ["pipe", "pipe", "pipe"],
+      }).trim();
+    } catch {
+      return "1.1";
+    }
+  })()}`;
+  writeFileSync(lockFile, JSON.stringify({ pid: process.pid, tmux_target: tmuxTarget, version: VERSION }));
+
+  // Rename current window to "watch"
+  try {
+    execSync(`tmux rename-window watch`, { stdio: "ignore" });
+  } catch {
+    // Ignore errors
+  }
+
+  // Add tmux keybinding dynamically (prefix + W to switch to watch session pane)
+  try {
+    execSync(`tmux bind-key W switch-client -t "${tmuxTarget}"`, { stdio: "ignore" });
+  } catch {
+    // Ignore errors - binding might already exist
+  }
+
+  // Start HTTP server if --serve flag is provided
+  if (options.serve) {
+    const { runServe } = await import("./serve.js");
+    await runServe({ port: options.port, host: options.host });
+  }
+
+  // Enter alternate screen buffer (like vim, htop)
+  process.stdout.write("\x1b[?1049h");
+  process.stdout.write("\x1b[H"); // Move cursor to top-left
+
+  const { waitUntilExit } = render(React.createElement(App));
+
+  try {
+    await waitUntilExit();
+  } finally {
+    // Exit alternate screen buffer, restore previous content
+    process.stdout.write("\x1b[?1049l");
+    try { unlinkSync(lockFile); } catch { /* ignore */ }
+  }
+}
+
+export function createTuiCommand(): Command {
+  return new Command("tui")
+    .description("Run the TUI dashboard (requires tmux)")
+    .option("--serve", "Start HTTP server alongside TUI")
+    .option("--port <number>", "Server port", String(DEFAULT_SERVER_PORT))
+    .option("--host <address>", "Server host (use 0.0.0.0 for LAN)", "127.0.0.1")
+    .action(runTui);
+}

package/src/commands/uninstall.ts

@@ -0,0 +1,13 @@
+import { Command } from "commander";
+import { runCleanup } from "../setup/index.js";
+
+export async function runUninstallCommand(): Promise<void> {
+  await runCleanup();
+  process.exit(0);
+}
+
+export function createUninstallCommand(): Command {
+  return new Command("uninstall")
+    .description("Remove claude-mux hooks and configuration")
+    .action(runUninstallCommand);
+}

package/src/components/Header.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface HeaderProps {
+  claudeCount: number;
+  tmuxCount: number;
+}
+
+export function Header({ claudeCount, tmuxCount }: HeaderProps) {
+  const parts: string[] = [];
+  if (claudeCount > 0) {
+    parts.push(`${claudeCount} claude`);
+  }
+  if (tmuxCount > 0) {
+    parts.push(`${tmuxCount} tmux`);
+  }
+  const countText = parts.length > 0 ? parts.join(", ") : "no sessions";
+
+  return (
+    <Box
+      borderStyle="single"
+      borderBottom={false}
+      paddingX={1}
+      justifyContent="space-between"
+    >
+      <Text bold color="cyan">
+        claude-mux
+      </Text>
+      <Text dimColor>{countText}</Text>
+    </Box>
+  );
+}

package/src/components/HelpDialog.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface HelpDialogProps {
+  width?: number;
+}
+
+const KEYS = [
+  { key: "Enter", desc: "Go to session" },
+  { key: "↑↓ / j k", desc: "Select session" },
+  { key: "h", desc: "Toggle help" },
+  { key: "q", desc: "Quit" },
+  { key: "prefix+W", desc: "Return here" },
+];
+
+export function HelpDialog({ width }: HelpDialogProps) {
+  const boxWidth = Math.min(width || 40, 40);
+
+  return (
+    <Box flexDirection="column" alignItems="center" justifyContent="center" width={width}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        paddingX={2}
+        paddingY={1}
+        width={boxWidth}
+      >
+        <Box justifyContent="center" marginBottom={1}>
+          <Text bold>Keyboard Shortcuts</Text>
+        </Box>
+        {KEYS.map(({ key, desc }) => (
+          <Box key={key}>
+            <Box width={14}>
+              <Text color="cyan">{key}</Text>
+            </Box>
+            <Text dimColor>{desc}</Text>
+          </Box>
+        ))}
+        <Box justifyContent="center" marginTop={1}>
+          <Text dimColor>Press any key to close</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/components/SessionEntry.tsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import type { Session, SessionState } from "../db/index.js";
+import type { TmuxSession } from "../tmux/detect.js";
+
+const BLINK_INTERVAL = 500;
+
+// Self-contained blinking bullet - only this component re-renders during blink
+function BlinkingBullet({ color, shouldBlink }: { color: string; shouldBlink: boolean }) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (!shouldBlink) {
+      setVisible(true);
+      return;
+    }
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, BLINK_INTERVAL);
+    return () => clearInterval(interval);
+  }, [shouldBlink]);
+
+  return <Text color={color}>{visible ? "●" : " "}</Text>;
+}
+
+// Unified display item - either a Claude session or a plain tmux session
+export type DisplayItem =
+  | { type: "claude"; session: Session }
+  | { type: "tmux"; tmuxSession: TmuxSession };
+
+interface SessionEntryProps {
+  item: DisplayItem;
+  isSelected: boolean;
+  width?: number;
+}
+
+function getStateColor(state: SessionState): string {
+  switch (state) {
+    case "waiting":
+    case "permission":
+      return "red";
+    case "idle":
+      return "yellow";
+    case "busy":
+      return "green";
+    default:
+      return "gray";
+  }
+}
+
+function getStateText(session: Session): string {
+  switch (session.state) {
+    case "permission":
+      return "Waiting: permission";
+    case "waiting":
+      return session.prompt_text ? `Waiting: ${truncate(session.prompt_text, 30)}` : "Waiting";
+    case "idle":
+      return "Idle";
+    case "busy":
+      return session.current_action || "Working...";
+    default:
+      return session.state;
+  }
+}
+
+function truncate(str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str;
+  return str.slice(0, maxLen - 1) + "…";
+}
+
+function truncatePath(path: string, maxLen: number): string {
+  if (path.length <= maxLen) return path;
+
+  // Try to show ~ for home directory
+  const home = process.env.HOME || process.env.USERPROFILE || "";
+  if (home && path.startsWith(home)) {
+    path = "~" + path.slice(home.length);
+    if (path.length <= maxLen) return path;
+  }
+
+  // Truncate from the beginning
+  return "…" + path.slice(-(maxLen - 1));
+}
+
+export function SessionEntry({ item, isSelected, width }: SessionEntryProps) {
+  if (item.type === "claude") {
+    return <ClaudeEntry session={item.session} isSelected={isSelected} width={width} />;
+  } else {
+    return <TmuxEntry tmuxSession={item.tmuxSession} isSelected={isSelected} width={width} />;
+  }
+}
+
+function ClaudeEntry({
+  session,
+  isSelected,
+  width,
+}: {
+  session: Session;
+  isSelected: boolean;
+  width?: number;
+}) {
+  const stateColor = getStateColor(session.state);
+  const shouldBlink = session.state === "busy";
+
+  const tmuxTarget = session.tmux_target || "—";
+
+  // Fixed widths for prefix and suffix columns
+  const prefixWidth = 4; // selector + bullet + space
+  const typeWidth = 8;
+  const totalWidth = width || 100;
+  const stateWidth = totalWidth <= 70 ? 10 : 22;
+
+  // Calculate flex column widths from remaining space
+  const remainingWidth = totalWidth - prefixWidth - typeWidth - stateWidth;
+  const targetWidth = Math.floor(remainingWidth * 0.3);
+  const pathWidth = remainingWidth - targetWidth;
+
+  return (
+    <Box width={width}>
+      {/* Selection indicator (▶ is wide, takes 2 cols) or 2 spaces */}
+      <Text color="cyan" bold>{isSelected ? "▶" : "  "}</Text>
+      {/* Bullet in column 4 - self-contained blink logic */}
+      <BlinkingBullet color={stateColor} shouldBlink={shouldBlink} />
+      <Text>{" "}</Text>
+
+      {/* tmux target */}
+      <Box width={targetWidth} overflowX="hidden">
+        <Text dimColor wrap="truncate-end">{tmuxTarget}</Text>
+      </Box>
+
+      {/* Working directory */}
+      <Box width={pathWidth} overflowX="hidden">
+        <Text wrap="truncate-end">{truncatePath(session.cwd, pathWidth)}</Text>
+      </Box>
+
+      {/* Type column */}
+      <Box width={typeWidth}>
+        <Text dimColor>claude</Text>
+      </Box>
+
+      {/* State description */}
+      <Box width={stateWidth} overflowX="hidden">
+        <Text color={stateColor} wrap="truncate-end">{getStateText(session)}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function TmuxEntry({
+  tmuxSession,
+  isSelected,
+  width,
+}: {
+  tmuxSession: TmuxSession;
+  isSelected: boolean;
+  width?: number;
+}) {
+  const bullet = "●";
+
+  // Fixed widths for prefix and suffix columns
+  const prefixWidth = 4; // selector + bullet + space
+  const typeWidth = 8;
+  const totalWidth = width || 100;
+  const stateWidth = totalWidth <= 70 ? 10 : 22;
+
+  // Calculate flex column widths from remaining space
+  const remainingWidth = totalWidth - prefixWidth - typeWidth - stateWidth;
+  const targetWidth = Math.floor(remainingWidth * 0.3);
+  const pathWidth = remainingWidth - targetWidth;
+
+  const windowInfo = `${tmuxSession.windowCount} window${tmuxSession.windowCount !== 1 ? "s" : ""}${tmuxSession.attached ? " (attached)" : ""}`;
+
+  return (
+    <Box width={width}>
+      {/* Selection indicator (▶ is wide, takes 2 cols) or 2 spaces */}
+      <Text color="cyan" bold>{isSelected ? "▶" : "  "}</Text>
+      {/* Bullet in column 4 */}
+      <Text dimColor>{bullet}</Text>
+      <Text>{" "}</Text>
+
+      {/* Session name as target */}
+      <Box width={targetWidth} overflowX="hidden">
+        <Text dimColor wrap="truncate-end">{tmuxSession.name}</Text>
+      </Box>
+
+      {/* Window count info */}
+      <Box width={pathWidth} overflowX="hidden">
+        <Text dimColor wrap="truncate-end">{windowInfo}</Text>
+      </Box>
+
+      {/* Type column */}
+      <Box width={typeWidth}>
+        <Text dimColor>tmux</Text>
+      </Box>
+
+      {/* Empty state column for alignment */}
+      <Box width={stateWidth}>
+        <Text dimColor>—</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/SessionList.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Box, Text } from "ink";
+import type { Session } from "../db/index.js";
+import type { TmuxSession } from "../tmux/detect.js";
+import { SessionEntry, type DisplayItem } from "./SessionEntry.js";
+
+interface SessionListProps {
+  sessions: Session[];
+  tmuxSessions: TmuxSession[];
+  selectedIndex: number;
+  width?: number;
+}
+
+export function SessionList({ sessions, tmuxSessions, selectedIndex, width }: SessionListProps) {
+  // Get tmux session names that have Claude instances
+  const claudeTmuxSessions = new Set<string>();
+  for (const session of sessions) {
+    if (session.tmux_target) {
+      // Extract session name from target (e.g., "cw:1.3" -> "cw")
+      const sessionName = session.tmux_target.split(":")[0];
+      claudeTmuxSessions.add(sessionName);
+    }
+  }
+
+  // Filter tmux sessions to only those without Claude instances
+  const nonClaudeTmuxSessions = tmuxSessions.filter(
+    (ts) => !claudeTmuxSessions.has(ts.name)
+  );
+
+  // Build unified display items: Claude sessions first, then non-Claude tmux sessions
+  const items: DisplayItem[] = [
+    ...sessions.map((session): DisplayItem => ({ type: "claude", session })),
+    ...nonClaudeTmuxSessions.map((tmuxSession): DisplayItem => ({ type: "tmux", tmuxSession })),
+  ];
+
+  if (items.length === 0) {
+    return (
+      <Box paddingY={1}>
+        <Text dimColor>  No sessions</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {items.map((item, index) => (
+        <SessionEntry
+          key={item.type === "claude" ? item.session.id : `tmux-${item.tmuxSession.name}`}
+          item={item}
+          isSelected={index === selectedIndex}
+          width={width}
+        />
+      ))}
+    </Box>
+  );
+}
+
+// Export the total count for navigation purposes
+export function getTotalItemCount(sessions: Session[], tmuxSessions: TmuxSession[]): number {
+  const claudeTmuxSessions = new Set<string>();
+  for (const session of sessions) {
+    if (session.tmux_target) {
+      const sessionName = session.tmux_target.split(":")[0];
+      claudeTmuxSessions.add(sessionName);
+    }
+  }
+  const nonClaudeTmuxSessions = tmuxSessions.filter(
+    (ts) => !claudeTmuxSessions.has(ts.name)
+  );
+  return sessions.length + nonClaudeTmuxSessions.length;
+}
+
+// Get the display item at a specific index
+export function getItemAtIndex(
+  sessions: Session[],
+  tmuxSessions: TmuxSession[],
+  index: number
+): DisplayItem | null {
+  const claudeTmuxSessions = new Set<string>();
+  for (const session of sessions) {
+    if (session.tmux_target) {
+      const sessionName = session.tmux_target.split(":")[0];
+      claudeTmuxSessions.add(sessionName);
+    }
+  }
+  const nonClaudeTmuxSessions = tmuxSessions.filter(
+    (ts) => !claudeTmuxSessions.has(ts.name)
+  );
+
+  if (index < sessions.length) {
+    return { type: "claude", session: sessions[index] };
+  }
+  const tmuxIndex = index - sessions.length;
+  if (tmuxIndex < nonClaudeTmuxSessions.length) {
+    return { type: "tmux", tmuxSession: nonClaudeTmuxSessions[tmuxIndex] };
+  }
+  return null;
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { VERSION } from "../utils/version.js";
+
+interface StatusBarProps {
+  inTmux: boolean;
+}
+
+export function StatusBar({ inTmux }: StatusBarProps) {
+  return (
+    <Box borderStyle="single" borderTop={false} paddingX={1} justifyContent="space-between">
+      <Text>
+        <Text color="cyan">[h]</Text>
+        <Text dimColor> Help </Text>
+        <Text color="cyan">[q]</Text>
+        <Text dimColor> Quit </Text>
+        <Text color="cyan">[prefix+W]</Text>
+        <Text dimColor> Return here</Text>
+        {!inTmux && (
+          <Text color="yellow"> (not in tmux - navigation disabled)</Text>
+        )}
+      </Text>
+      <Text dimColor>v{VERSION}</Text>
+    </Box>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { Header } from "./Header.js";
+export { HelpDialog } from "./HelpDialog.js";
+export { SessionEntry } from "./SessionEntry.js";
+export { SessionList } from "./SessionList.js";
+export { StatusBar } from "./StatusBar.js";