tmux-ide 1.3.1 → 2.1.0

package/src/widgets/lib/pane-comms.ts

@@ -0,0 +1,207 @@
+import { execFileSync } from "node:child_process";
+
+export interface PaneInfo {
+  id: string;
+  index: number;
+  title: string;
+  currentCommand: string;
+  width: number;
+  height: number;
+  active: boolean;
+  role: "lead" | "teammate" | "planner" | "validator" | "researcher" | "widget" | "shell" | null;
+  name: string | null;
+  type: string | null;
+}
+
+type TmuxExecutor = (cmd: string, args: string[], options?: object) => string;
+
+let _executor: TmuxExecutor = (cmd, args, options) =>
+  execFileSync(cmd, args, { encoding: "utf-8", ...options }).toString();
+
+export function _setExecutor(fn: TmuxExecutor): () => void {
+  const prev = _executor;
+  _executor = fn;
+  return () => {
+    _executor = prev;
+  };
+}
+
+function tmux(...args: string[]): string {
+  try {
+    return _executor("tmux", args, {
+      stdio: ["pipe", "pipe", "pipe"],
+    }).trim();
+  } catch (error) {
+    const stderr = (error as { stderr?: Buffer | string })?.stderr?.toString() ?? "";
+    if (stderr.includes("no server running") || stderr.includes("can't find session")) {
+      return "";
+    }
+    throw error;
+  }
+}
+
+export function listSessionPanes(session: string): PaneInfo[] {
+  const format = [
+    "#{pane_id}",
+    "#{pane_index}",
+    "#{pane_title}",
+    "#{pane_current_command}",
+    "#{pane_width}",
+    "#{pane_height}",
+    "#{pane_active}",
+    "#{@ide_role}",
+    "#{@ide_name}",
+    "#{@ide_type}",
+  ].join("\t");
+
+  const output = tmux("list-panes", "-t", session, "-F", format);
+  if (!output) return [];
+
+  return output
+    .split("\n")
+    .filter(Boolean)
+    .map((line) => {
+      const [id, index, title, cmd, width, height, active, role, name, type] = line.split("\t");
+      return {
+        id: id!,
+        index: parseInt(index!, 10),
+        title: title!,
+        currentCommand: cmd!,
+        width: parseInt(width!, 10),
+        height: parseInt(height!, 10),
+        active: active === "1",
+        role: (role || null) as PaneInfo["role"],
+        name: name || null,
+        type: type || null,
+      };
+    });
+}
+
+export function findPaneByTitle(session: string, title: string): string | null {
+  const panes = listSessionPanes(session);
+  const match = panes.find((p) => p.title === title);
+  return match?.id ?? null;
+}
+
+export function findPaneByPattern(session: string, pattern: string): string | null {
+  const panes = listSessionPanes(session);
+  const lower = pattern.toLowerCase();
+  const match = panes.find((p) => p.title.toLowerCase().includes(lower));
+  return match?.id ?? null;
+}
+
+export function findAdjacentPane(session: string, currentPaneId: string): string | null {
+  const panes = listSessionPanes(session);
+  const currentIdx = panes.findIndex((p) => p.id === currentPaneId);
+  if (currentIdx === -1 || panes.length < 2) return null;
+  const nextIdx = (currentIdx + 1) % panes.length;
+  return panes[nextIdx]!.id;
+}
+
+const BUSY_COMMANDS = new Set([
+  "claude",
+  "codex",
+  "vim",
+  "nvim",
+  "vi",
+  "nano",
+  "emacs",
+  "less",
+  "more",
+  "top",
+  "htop",
+  "man",
+]);
+
+const SHELL_COMMANDS = new Set(["zsh", "bash", "sh", "fish"]);
+
+export type PaneBusyStatus = "idle" | "busy" | "agent";
+
+export function isPaneBusy(session: string, paneId: string): boolean {
+  const panes = listSessionPanes(session);
+  const pane = panes.find((p) => p.id === paneId);
+  if (!pane) return true;
+  const cmd = pane.currentCommand.toLowerCase();
+  if (SHELL_COMMANDS.has(cmd)) return false;
+  if (BUSY_COMMANDS.has(cmd)) return true;
+  return true; // unknown command — assume busy
+}
+
+export function getPaneBusyStatus(session: string, paneId: string): PaneBusyStatus {
+  const panes = listSessionPanes(session);
+  const pane = panes.find((p) => p.id === paneId);
+  if (!pane) return "busy";
+  const cmd = pane.currentCommand.toLowerCase();
+  if (cmd.startsWith("claude") || cmd.startsWith("codex")) return "agent";
+  if (SHELL_COMMANDS.has(cmd)) return "idle";
+  return "busy";
+}
+
+export function sendText(session: string, paneId: string, text: string): void {
+  tmux("send-keys", "-t", paneId, "-l", "--", text);
+}
+
+function sleepMs(ms: number): void {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+
+export function sendCommand(session: string, paneId: string, command: string): boolean {
+  const status = getPaneBusyStatus(session, paneId);
+  try {
+    tmux("send-keys", "-t", paneId, "-l", "--", command);
+  } catch {
+    return false;
+  }
+  if (status === "agent") {
+    // Claude Code shows a [Pasted text] preview for long input (roughly >200 chars).
+    // Short commands land directly in the prompt — just need a brief delay for the
+    // TUI to register the input. Long commands trigger the paste preview which needs
+    // two Enters: one to confirm the preview, one to submit the prompt.
+    if (command.length < 200) {
+      sleepMs(150);
+    } else {
+      sleepMs(5000);
+      tmux("send-keys", "-t", paneId, "Enter");
+      sleepMs(2000);
+    }
+    tmux("send-keys", "-t", paneId, "Enter");
+    return true;
+  }
+  tmux("send-keys", "-t", paneId, "Enter");
+  return true;
+}
+
+export function openFileInEditor(session: string, paneId: string, filePath: string): void {
+  const editor = process.env.EDITOR ?? "vim";
+  sendCommand(session, paneId, `${editor} ${filePath}`);
+}
+
+export interface TargetOptions {
+  title?: string;
+  titlePattern?: string;
+  paneId?: string;
+  selfPaneId?: string;
+}
+
+export function resolveTarget(session: string, opts: TargetOptions): string | null {
+  if (opts.paneId) return opts.paneId;
+  if (opts.title) return findPaneByTitle(session, opts.title);
+  if (opts.titlePattern) return findPaneByPattern(session, opts.titlePattern);
+  if (opts.selfPaneId) return findAdjacentPane(session, opts.selfPaneId);
+  return null;
+}
+
+/**
+ * Capture the last line of a tmux pane. Uses the mockable executor so tests
+ * can intercept the call instead of hitting a real tmux server.
+ */
+export function captureLastLine(paneId: string): string {
+  try {
+    return _executor("tmux", ["capture-pane", "-t", paneId, "-p", "-S", "-1"], {
+      encoding: "utf-8",
+      stdio: ["ignore", "pipe", "ignore"],
+    }).trim();
+  } catch {
+    return "";
+  }
+}

package/src/widgets/lib/theme.ts

@@ -0,0 +1,151 @@
+export type RGBA = { r: number; g: number; b: number; a: number };
+
+export interface WidgetTheme {
+  bg: RGBA;
+  fg: RGBA;
+  fgMuted: RGBA;
+  accent: RGBA;
+  border: RGBA;
+  selected: RGBA;
+  selectedText: RGBA;
+  dirName: RGBA;
+  rowAlt: RGBA;
+  indentGuide: RGBA;
+  ignored: RGBA;
+  gitModified: RGBA;
+  gitAdded: RGBA;
+  gitDeleted: RGBA;
+  gitUntracked: RGBA;
+  diffAdded: RGBA;
+  diffAddedBg: RGBA;
+  diffRemoved: RGBA;
+  diffRemovedBg: RGBA;
+  diffContext: RGBA;
+  diffContextBg: RGBA;
+  diffHunk: RGBA;
+  diffLineNumber: RGBA;
+}
+
+function rgba(r: number, g: number, b: number, a = 255) {
+  return { r, g, b, a };
+}
+
+const DEFAULTS: WidgetTheme = {
+  bg: rgba(30, 30, 40),
+  fg: rgba(200, 200, 210),
+  fgMuted: rgba(120, 120, 140),
+  accent: rgba(130, 170, 255),
+  border: rgba(60, 60, 80),
+  selected: rgba(50, 50, 70),
+  selectedText: rgba(255, 255, 255),
+  dirName: rgba(100, 160, 255),
+  rowAlt: rgba(255, 255, 255, 5),
+  indentGuide: rgba(60, 60, 80),
+  ignored: rgba(80, 80, 100),
+  gitModified: rgba(230, 180, 80),
+  gitAdded: rgba(80, 200, 120),
+  gitDeleted: rgba(230, 80, 80),
+  gitUntracked: rgba(120, 120, 140),
+  diffAdded: rgba(80, 200, 120),
+  diffAddedBg: rgba(20, 60, 30),
+  diffRemoved: rgba(230, 80, 80),
+  diffRemovedBg: rgba(60, 20, 20),
+  diffContext: rgba(160, 160, 170),
+  diffContextBg: rgba(30, 30, 40),
+  diffHunk: rgba(100, 180, 220),
+  diffLineNumber: rgba(80, 80, 100),
+};
+
+/**
+ * Parse a tmux/CSS color string into RGBA.
+ * Supports: colourN / colorN (0-255), #rgb, #rrggbb.
+ */
+function parseColor(color: string): RGBA | null {
+  // tmux colour0–colour255
+  const tmuxMatch = color.match(/^colou?r(\d+)$/);
+  if (tmuxMatch) {
+    const rawIndex = tmuxMatch[1];
+    if (!rawIndex) return null;
+    const n = parseInt(rawIndex, 10);
+    if (n < 0 || n > 255) return null;
+
+    // Standard colors 0–15 (approximate to common terminal defaults)
+    const STANDARD: [number, number, number][] = [
+      [0, 0, 0],
+      [128, 0, 0],
+      [0, 128, 0],
+      [128, 128, 0],
+      [0, 0, 128],
+      [128, 0, 128],
+      [0, 128, 128],
+      [192, 192, 192],
+      [128, 128, 128],
+      [255, 0, 0],
+      [0, 255, 0],
+      [255, 255, 0],
+      [0, 0, 255],
+      [255, 0, 255],
+      [0, 255, 255],
+      [255, 255, 255],
+    ];
+    if (n < 16) {
+      const standard = STANDARD[n];
+      if (!standard) return null;
+      return rgba(standard[0], standard[1], standard[2]);
+    }
+
+    // 6×6×6 color cube (16–231)
+    if (n < 232) {
+      const idx = n - 16;
+      const LEVELS: number[] = [0, 95, 135, 175, 215, 255];
+      const r = LEVELS[Math.floor(idx / 36)];
+      const g = LEVELS[Math.floor((idx % 36) / 6)];
+      const b = LEVELS[idx % 6];
+      if (r == null || g == null || b == null) return null;
+      return rgba(r, g, b);
+    }
+
+    // Grayscale ramp (232–255)
+    const level = 8 + 10 * (n - 232);
+    return rgba(level, level, level);
+  }
+
+  // Hex: #rgb or #rrggbb
+  const hexMatch = color.match(/^#([0-9a-fA-F]{3,6})$/);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (!hex) return null;
+    if (hex.length === 3) {
+      const [r, g, b] = hex.split("");
+      if (!r || !g || !b) return null;
+      hex = r + r + g + g + b + b;
+    }
+    if (hex.length !== 6) return null;
+    return rgba(
+      parseInt(hex.slice(0, 2), 16),
+      parseInt(hex.slice(2, 4), 16),
+      parseInt(hex.slice(4, 6), 16),
+    );
+  }
+
+  return null;
+}
+
+export function createTheme(config?: Record<string, string>): WidgetTheme {
+  if (!config) return DEFAULTS;
+  const theme = { ...DEFAULTS };
+  const MAP: Record<string, keyof WidgetTheme> = {
+    accent: "accent",
+    border: "border",
+    bg: "bg",
+    fg: "fg",
+  };
+  for (const [key, prop] of Object.entries(MAP)) {
+    const val = config[key];
+    if (val) {
+      const parsed = parseColor(val);
+      if (parsed) theme[prop] = parsed;
+    }
+  }
+  return theme;
+}

package/src/widgets/lib/watcher.ts

@@ -0,0 +1,50 @@
+import * as watcher from "@parcel/watcher";
+import { join } from "node:path";
+
+export interface WatchEvent {
+  type: "create" | "update" | "delete";
+  path: string;
+}
+
+export async function watchDirectory(
+  dir: string,
+  onChange: (events: WatchEvent[]) => void,
+  options?: { debounceMs?: number; ignore?: string[] },
+): Promise<() => Promise<void>> {
+  const debounceMs = options?.debounceMs ?? 300;
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  const subscription = await watcher.subscribe(
+    dir,
+    (err, events) => {
+      if (err) return;
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => onChange(events as unknown as WatchEvent[]), debounceMs);
+    },
+    { ignore: options?.ignore ?? ["node_modules", ".git", "dist", "build", ".next"] },
+  );
+
+  return () => subscription.unsubscribe();
+}
+
+export async function watchGitHead(
+  dir: string,
+  onBranchChange: () => void,
+): Promise<(() => Promise<void>) | null> {
+  const gitDir = join(dir, ".git");
+  try {
+    const subscription = await watcher.subscribe(
+      gitDir,
+      (err, events) => {
+        if (err) return;
+        if (events.some((e) => e.path.endsWith("HEAD"))) {
+          onBranchChange();
+        }
+      },
+      { ignore: ["objects", "pack", "refs", "logs"] },
+    );
+    return () => subscription.unsubscribe();
+  } catch {
+    return null;
+  }
+}

package/src/widgets/mission-control/activity-feed.tsx

@@ -0,0 +1,59 @@
+import { RGBA, TextAttributes } from "@opentui/core";
+import type { OrchestratorEvent } from "../../lib/event-log.ts";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+function formatRelative(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  if (ms < 3600000) return `${Math.round(ms / 60000)}m`;
+  return `${(ms / 3600000).toFixed(1)}h`;
+}
+
+function eventColor(type: string, theme: WidgetTheme): RGBAType {
+  switch (type) {
+    case "dispatch":
+      return theme.accent;
+    case "completion":
+      return theme.gitAdded;
+    case "error":
+    case "reconcile":
+      return theme.gitDeleted;
+    case "stall":
+      return theme.gitModified;
+    default:
+      return theme.fgMuted;
+  }
+}
+
+interface ActivityFeedProps {
+  events: OrchestratorEvent[];
+  theme: WidgetTheme;
+}
+
+export function ActivityFeed(props: ActivityFeedProps) {
+  return (
+    <box flexGrow={1}>
+      {props.events.length === 0 ? (
+        <text fg={toRGBA(props.theme.fgMuted)}>No recent activity</text>
+      ) : (
+        props.events.map((evt) => (
+          <box flexShrink={0} flexDirection="row" gap={1}>
+            <text fg={toRGBA(props.theme.fgMuted)} wrapMode="none">
+              {formatRelative(evt.timestamp).padStart(4)}
+            </text>
+            <text fg={toRGBA(eventColor(evt.type, props.theme))} wrapMode="none">
+              {evt.type.padEnd(11)}
+            </text>
+            <text fg={toRGBA(props.theme.fg)} wrapMode="none">
+              {evt.message.slice(0, 40)}
+            </text>
+          </box>
+        ))
+      )}
+    </box>
+  );
+}

package/src/widgets/mission-control/agent-panel.tsx

@@ -0,0 +1,132 @@
+import { createSignal, For, Show } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+export interface AgentInfo {
+  name: string;
+  paneId: string;
+  state: "busy" | "idle" | "error";
+  role?: string;
+  currentTask: { id: string; title: string; elapsed: string } | null;
+}
+
+interface AgentPanelProps {
+  agents: AgentInfo[];
+  isActive: boolean;
+  theme: WidgetTheme;
+  onAddAgent: () => void;
+  onSelectAgent: (agent: AgentInfo) => void;
+}
+
+function dotChar(state: AgentInfo["state"]): string {
+  return state === "error" ? "!" : state === "busy" ? "*" : "o";
+}
+
+function dotColor(state: AgentInfo["state"], theme: WidgetTheme): RGBAType {
+  switch (state) {
+    case "idle":
+      return theme.gitAdded;
+    case "busy":
+      return theme.gitModified;
+    case "error":
+      return theme.gitDeleted;
+  }
+}
+
+export function AgentPanel(props: AgentPanelProps) {
+  const [selected, setSelected] = createSignal(0);
+
+  // Total rows = agents + 1 for the [+add] row
+  const rowCount = () => props.agents.length + 1;
+
+  useKeyboard((evt) => {
+    if (!props.isActive) return;
+
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((i) => Math.max(0, i - 1));
+      evt.preventDefault();
+    } else if (evt.name === "down" || evt.name === "j") {
+      setSelected((i) => Math.min(rowCount() - 1, i + 1));
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (selected() === props.agents.length) {
+        props.onAddAgent();
+      } else {
+        const agent = props.agents[selected()];
+        if (agent) props.onSelectAgent(agent);
+      }
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexGrow={1}>
+      <For each={props.agents}>
+        {(agent, i) => {
+          const isSel = () => props.isActive && selected() === i();
+          return (
+            <box
+              flexShrink={0}
+              flexDirection="row"
+              gap={1}
+              backgroundColor={isSel() ? toRGBA(props.theme.selected) : undefined}
+              onMouseDown={() => {
+                setSelected(i());
+                props.onSelectAgent(agent);
+              }}
+            >
+              <text fg={toRGBA(dotColor(agent.state, props.theme))}>{dotChar(agent.state)}</text>
+              <text
+                fg={toRGBA(isSel() ? props.theme.selectedText : props.theme.fg)}
+                attributes={isSel() ? TextAttributes.BOLD : 0}
+                wrapMode="none"
+              >
+                {agent.name}
+              </text>
+              <Show when={agent.currentTask}>
+                {(task) => (
+                  <text fg={toRGBA(props.theme.fgMuted)} wrapMode="none">
+                    {task().title} {task().elapsed}
+                  </text>
+                )}
+              </Show>
+              <Show when={!agent.currentTask}>
+                <text fg={toRGBA(props.theme.fgMuted)}>idle</text>
+              </Show>
+            </box>
+          );
+        }}
+      </For>
+
+      {/* Add agent row */}
+      <box
+        flexShrink={0}
+        flexDirection="row"
+        backgroundColor={
+          props.isActive && selected() === props.agents.length
+            ? toRGBA(props.theme.selected)
+            : undefined
+        }
+        onMouseDown={() => {
+          setSelected(props.agents.length);
+          props.onAddAgent();
+        }}
+      >
+        <text
+          fg={toRGBA(
+            props.isActive && selected() === props.agents.length
+              ? props.theme.accent
+              : props.theme.fgMuted,
+          )}
+        >
+          [+add]
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/widgets/mission-control/command-bar.tsx

@@ -0,0 +1,63 @@
+import { createSignal, onMount } from "solid-js";
+import { RGBA, TextAttributes, type InputRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { WidgetTheme, RGBA as RGBAType } from "../lib/theme.ts";
+
+function toRGBA(c: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+interface CommandBarProps {
+  value: string;
+  isActive: boolean;
+  theme: WidgetTheme;
+  onSubmit: (value: string) => void;
+  onChange: (value: string) => void;
+  onEscape: () => void;
+}
+
+export function CommandBar(props: CommandBarProps) {
+  let inputRef: InputRenderable | undefined;
+
+  onMount(() => {
+    if (props.isActive) {
+      setTimeout(() => inputRef?.focus(), 50);
+    }
+  });
+
+  useKeyboard((evt) => {
+    if (!props.isActive) return;
+
+    if (evt.name === "escape") {
+      props.onEscape();
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (props.value.trim()) {
+        props.onSubmit(props.value);
+      }
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <text
+        fg={toRGBA(props.isActive ? props.theme.accent : props.theme.fgMuted)}
+        attributes={props.isActive ? TextAttributes.BOLD : 0}
+      >
+        {">"}
+      </text>
+      <input
+        value={props.value}
+        placeholder={props.isActive ? "task create, send, goal, add..." : "press / to type"}
+        onInput={(v: string) => props.onChange(v)}
+        focusedBackgroundColor={toRGBA(props.theme.selected)}
+        cursorColor={toRGBA(props.theme.accent)}
+        focusedTextColor={toRGBA(props.theme.fg)}
+        ref={(r: InputRenderable) => {
+          inputRef = r;
+        }}
+      />
+    </box>
+  );
+}