tmux-ide 2.1.4 → 2.6.0

package/packages/daemon/dist/widgets/preview/index.jsx

@@ -0,0 +1,371 @@
+import { parseArgs } from "node:util";
+import { readFileSync, existsSync, statSync } from "node:fs";
+import { extname, basename, resolve } from "node:path";
+import { execFileSync } from "node:child_process";
+import { render, useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { createSignal, createMemo, onCleanup, Show, For } from "solid-js";
+import { createTheme } from "../lib/theme.js";
+import { getAppConfig } from "../../lib/app-config.js";
+import { getFileDiff } from "../lib/git.js";
+const { values } = parseArgs({
+    options: {
+        session: { type: "string" },
+        dir: { type: "string" },
+        theme: { type: "string" },
+    },
+});
+const session = values.session ?? "";
+const dir = values.dir ?? process.cwd();
+const themeConfig = values.theme ? JSON.parse(values.theme) : undefined;
+const MAX_PREVIEW_LINES = 500;
+const BINARY_EXTENSIONS = new Set([
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".bmp",
+    ".ico",
+    ".webp",
+    ".woff",
+    ".woff2",
+    ".ttf",
+    ".otf",
+    ".eot",
+    ".mp3",
+    ".mp4",
+    ".wav",
+    ".ogg",
+    ".webm",
+    ".zip",
+    ".tar",
+    ".gz",
+    ".bz2",
+    ".7z",
+    ".rar",
+    ".pdf",
+    ".exe",
+    ".dll",
+    ".so",
+    ".dylib",
+    ".node",
+    ".wasm",
+    ".tgz",
+]);
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+function getPreviewFile() {
+    if (!session)
+        return null;
+    try {
+        return (execFileSync("tmux", ["show-option", "-t", session, "-v", "@preview_file"], {
+            encoding: "utf-8",
+            stdio: ["ignore", "pipe", "ignore"],
+        }).trim() || null);
+    }
+    catch {
+        return null;
+    }
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes}B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+const KEYWORD_RE = /^(import|export|from|const|let|var|function|return|if|else|for|while|class|interface|type|async|await|try|catch|throw|new|switch|case|default|break|continue|enum|extends|implements|public|private|protected|static|readonly|abstract|override|declare|module|namespace|def|fn|pub|mut|use|mod|struct|impl|trait|match|loop|where|yield)\b/;
+function getLineColor(line, theme) {
+    const trimmed = line.trim();
+    if (!trimmed)
+        return theme.fg;
+    // Comments
+    if (trimmed.startsWith("//") ||
+        trimmed.startsWith("#") ||
+        trimmed.startsWith("--") ||
+        trimmed.startsWith("/*") ||
+        trimmed.startsWith("*")) {
+        return theme.fgMuted;
+    }
+    // Strings
+    if (trimmed.startsWith('"') || trimmed.startsWith("'") || trimmed.startsWith("`")) {
+        return theme.gitAdded;
+    }
+    // Keywords
+    if (KEYWORD_RE.test(trimmed)) {
+        return theme.accent;
+    }
+    return theme.fg;
+}
+// Parse diff to get line-level change info for gutter markers
+function parseDiffLineMap(diff) {
+    const map = new Map();
+    if (!diff)
+        return map;
+    const lines = diff.split("\n");
+    for (const line of lines) {
+        // Parse hunk headers: @@ -oldStart,oldCount +newStart,newCount @@
+        const hunkMatch = line.match(/^@@ -\d+(?:,\d+)? \+(\d+)(?:,(\d+))? @@/);
+        if (hunkMatch)
+            continue;
+    }
+    // Simpler approach: track added lines from the diff
+    let newLineNum = 0;
+    for (const line of lines) {
+        const hunkMatch = line.match(/^@@ -\d+(?:,\d+)? \+(\d+)/);
+        if (hunkMatch) {
+            newLineNum = parseInt(hunkMatch[1], 10);
+            continue;
+        }
+        if (line.startsWith("+++") || line.startsWith("---") || line.startsWith("diff"))
+            continue;
+        if (line.startsWith("+")) {
+            map.set(newLineNum, "added");
+            newLineNum++;
+        }
+        else if (line.startsWith("-")) {
+            // Deleted line — mark the current position as modified
+            if (!map.has(newLineNum))
+                map.set(newLineNum, "modified");
+        }
+        else {
+            newLineNum++;
+        }
+    }
+    return map;
+}
+function loadFile(filePath) {
+    const fullPath = filePath.startsWith("/") ? filePath : resolve(dir, filePath);
+    if (!existsSync(fullPath))
+        return null;
+    let size;
+    try {
+        size = formatSize(statSync(fullPath).size);
+    }
+    catch {
+        size = "";
+    }
+    if (BINARY_EXTENSIONS.has(extname(fullPath).toLowerCase())) {
+        return { content: "(binary file)", totalLines: 1, binary: true, size };
+    }
+    try {
+        const raw = readFileSync(fullPath, "utf-8");
+        if (raw.includes("\0")) {
+            return { content: "(binary file)", totalLines: 1, binary: true, size };
+        }
+        const allLines = raw.split("\n");
+        return {
+            content: allLines.slice(0, MAX_PREVIEW_LINES).join("\n"),
+            totalLines: allLines.length,
+            binary: false,
+            size,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+render(() => {
+    const theme = createTheme(themeConfig, getAppConfig().theme);
+    const dimensions = useTerminalDimensions();
+    const [filePath, setFilePath] = createSignal(null);
+    const [fileContent, setFileContent] = createSignal(null);
+    const [totalLines, setTotalLines] = createSignal(0);
+    const [fileSize, setFileSize] = createSignal("");
+    const [isBinary, setIsBinary] = createSignal(false);
+    const [fileDiff, setFileDiff] = createSignal(null);
+    const [viewMode, setViewMode] = createSignal("content");
+    // Poll tmux session variable for file path changes
+    const interval = setInterval(() => {
+        const newPath = getPreviewFile();
+        if (newPath !== filePath()) {
+            setFilePath(newPath);
+            setViewMode("content");
+            if (newPath) {
+                const result = loadFile(newPath);
+                if (result) {
+                    setFileContent(result.content);
+                    setTotalLines(result.totalLines);
+                    setFileSize(result.size);
+                    setIsBinary(result.binary);
+                }
+                else {
+                    setFileContent(null);
+                    setTotalLines(0);
+                    setFileSize("");
+                    setIsBinary(false);
+                }
+                // Check for git diff
+                try {
+                    const diff = getFileDiff(dir, newPath, false);
+                    setFileDiff(diff || null);
+                }
+                catch {
+                    setFileDiff(null);
+                }
+            }
+            else {
+                setFileContent(null);
+                setTotalLines(0);
+                setFileSize("");
+                setIsBinary(false);
+                setFileDiff(null);
+            }
+        }
+    }, 200);
+    onCleanup(() => clearInterval(interval));
+    const lines = createMemo(() => {
+        const content = fileContent();
+        if (!content)
+            return [];
+        return content.split("\n");
+    });
+    const fileExt = createMemo(() => {
+        const fp = filePath();
+        return fp ? extname(fp).toLowerCase() : "";
+    });
+    const lineNumWidth = createMemo(() => Math.max(3, String(totalLines()).length));
+    const diffLineMap = createMemo(() => parseDiffLineMap(fileDiff() ?? ""));
+    useKeyboard((evt) => {
+        if (evt.name === "d") {
+            if (fileDiff())
+                setViewMode((m) => (m === "content" ? "diff" : "content"));
+            evt.preventDefault();
+        }
+        else if (evt.name === "r" && filePath()) {
+            const result = loadFile(filePath());
+            if (result) {
+                setFileContent(result.content);
+                setTotalLines(result.totalLines);
+                setFileSize(result.size);
+                setIsBinary(result.binary);
+            }
+            try {
+                const diff = getFileDiff(dir, filePath(), false);
+                setFileDiff(diff || null);
+            }
+            catch {
+                setFileDiff(null);
+            }
+            evt.preventDefault();
+        }
+        else if (evt.name === "q") {
+            process.exit(0);
+        }
+    });
+    return (<box width={dimensions().width} height={dimensions().height} backgroundColor={toRGBA(theme.bg)}>
+        {/* Header */}
+        <Show when={filePath()} fallback={<box flexGrow={1} paddingLeft={2} paddingTop={2}>
+              <text fg={toRGBA(theme.fgMuted)}>Select a file in the explorer</text>
+              <text fg={toRGBA(theme.border)} paddingTop={1}>
+                Navigate with ↑↓ keys
+              </text>
+              <text fg={toRGBA(theme.border)}>Preview updates automatically</text>
+            </box>}>
+          <box flexShrink={0} paddingLeft={1} flexDirection="row" gap={2}>
+            <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+              {basename(filePath())}
+            </text>
+            <Show when={!isBinary()}>
+              <text fg={toRGBA(theme.fgMuted)}>{totalLines()} lines</text>
+            </Show>
+            <text fg={toRGBA(theme.fgMuted)}>{fileSize()}</text>
+            <Show when={fileDiff()}>
+              {(() => {
+            const lines = fileDiff().split("\n");
+            const added = lines.filter((l) => l.startsWith("+") && !l.startsWith("+++")).length;
+            const removed = lines.filter((l) => l.startsWith("-") && !l.startsWith("---")).length;
+            return (<box flexDirection="row" gap={1}>
+                    <Show when={added > 0}>
+                      <text fg={toRGBA(theme.gitAdded)}>+{added}</text>
+                    </Show>
+                    <Show when={removed > 0}>
+                      <text fg={toRGBA(theme.gitDeleted)}>-{removed}</text>
+                    </Show>
+                    <text fg={toRGBA(viewMode() === "diff" ? theme.gitModified : theme.fgMuted)}>
+                      {viewMode() === "diff" ? "[diff]" : "[d:diff]"}
+                    </text>
+                  </box>);
+        })()}
+            </Show>
+          </box>
+
+          {/* Separator */}
+          <box flexShrink={0} height={1}>
+            <text fg={toRGBA(theme.border)} wrapMode="none">
+              {"─".repeat(dimensions().width)}
+            </text>
+          </box>
+
+          {/* Diff view */}
+          <Show when={viewMode() === "diff" && fileDiff()}>
+            <scrollbox flexGrow={1}>
+              <For each={fileDiff().split("\n")}>
+                {(line) => {
+            const color = line.startsWith("+")
+                ? theme.diffAdded
+                : line.startsWith("-")
+                    ? theme.diffRemoved
+                    : line.startsWith("@@")
+                        ? theme.diffHunk
+                        : theme.diffContext;
+            const bg = line.startsWith("+")
+                ? theme.diffAddedBg
+                : line.startsWith("-")
+                    ? theme.diffRemovedBg
+                    : theme.diffContextBg;
+            return (<box backgroundColor={toRGBA(bg)}>
+                      <text fg={toRGBA(color)} wrapMode="none">
+                        {line || " "}
+                      </text>
+                    </box>);
+        }}
+              </For>
+            </scrollbox>
+          </Show>
+
+          {/* Content view */}
+          <Show when={viewMode() === "content" && fileContent()}>
+            <scrollbox flexGrow={1}>
+              <For each={lines()}>
+                {(line, lineNum) => {
+            const color = isBinary() ? theme.fgMuted : getLineColor(line, theme);
+            const lineNumber = lineNum() + 1;
+            const changeType = diffLineMap().get(lineNumber);
+            const gutterColor = changeType === "added"
+                ? theme.gitAdded
+                : changeType === "modified"
+                    ? theme.gitModified
+                    : null;
+            const gutterChar = gutterColor ? "│" : " ";
+            return (<box flexDirection="row">
+                      <Show when={!isBinary()}>
+                        <text fg={toRGBA(gutterColor ?? theme.diffLineNumber)} flexShrink={0} wrapMode="none">
+                          {gutterChar}
+                          {String(lineNumber).padStart(lineNumWidth())}{" "}
+                        </text>
+                      </Show>
+                      <text fg={toRGBA(color)} wrapMode="none">
+                        {line || " "}
+                      </text>
+                    </box>);
+        }}
+              </For>
+            </scrollbox>
+          </Show>
+
+          {/* Footer */}
+          <box flexShrink={0} paddingLeft={1}>
+            <text fg={toRGBA(theme.fgMuted)} wrapMode="none">
+              d:diff view r:refresh q:quit
+            </text>
+          </box>
+        </Show>
+      </box>);
+}, {
+    targetFps: 30,
+    exitOnCtrlC: true,
+    useKittyKeyboard: {},
+    autoFocus: false,
+});

package/packages/daemon/dist/widgets/resolve.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeConfig } from "../types.ts";
+interface WidgetOptions {
+    session: string;
+    dir: string;
+    target: string | null;
+    theme: ThemeConfig | null;
+}
+export declare function resolveWidgetCommand(type: string, opts: WidgetOptions): string;
+export interface WidgetSpawnSpec {
+    cwd: string;
+    cmd: string[];
+}
+/**
+ * Structured form of `resolveWidgetCommand` for direct PTY spawning. Callers
+ * that own the cwd separately (e.g. the /ws/pty bridge accepting cwd in its
+ * init frame) avoid the shell hop and get exec-style argv.
+ */
+export declare function resolveWidgetSpawn(type: string, opts: WidgetOptions): WidgetSpawnSpec;
+export declare const WIDGET_TYPES: string[];
+export {};

package/packages/daemon/dist/widgets/resolve.js

@@ -0,0 +1,100 @@
+import { resolve, dirname } from "node:path";
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { shellEscape } from "../lib/shell.js";
+import { resolveTuiLaunch, findCompiledTui, isBunAvailable } from "../tui/compiled.js";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// The .tsx extension is used at runtime; Bun handles JSX via preload plugin.
+// Exactly the widgets that exist — a stale entry here becomes a dead
+// `Module not found` pane at launch time.
+const WIDGET_ENTRY_POINTS = {
+    explorer: "explorer/index.tsx",
+    changes: "changes/index.tsx",
+    preview: "preview/index.tsx",
+    setup: "setup/index.tsx",
+    config: "config/index.tsx",
+    sidebar: "sidebar/index.tsx",
+};
+/**
+ * Resolve a widget entry to an absolute path that works from BOTH runtimes:
+ * unbundled (this file lives in packages/daemon/src/widgets — entries are
+ * siblings) and the esbuild bundle (import.meta.url collapses to bin/cli.js,
+ * so entries live at ../packages/daemon/src/widgets from there). Probing with
+ * existsSync keeps one code path honest instead of guessing by environment.
+ */
+function widgetEntryPath(entry) {
+    const sibling = resolve(__dirname, entry);
+    if (existsSync(sibling))
+        return sibling;
+    return resolve(__dirname, "../packages/daemon/src/widgets", entry);
+}
+/**
+ * The tmux-ide repo root — where bunfig.toml (the JSX preload) lives. Widgets
+ * must be SPAWNED from here regardless of which project they render (the
+ * project dir travels via --dir); cd-ing to the project instead crashes bun
+ * with "Cannot find module react/jsx-dev-runtime" outside this repo.
+ */
+const REPO_ROOT = existsSync(resolve(__dirname, "explorer/index.tsx"))
+    ? resolve(__dirname, "../../../..") // unbundled: src/widgets → repo root
+    : resolve(__dirname, ".."); // bundled: bin → repo root
+function widgetArgs(opts) {
+    const args = [`--session=${opts.session}`, `--dir=${opts.dir}`];
+    if (opts.target)
+        args.push(`--target=${opts.target}`);
+    if (opts.theme)
+        args.push(`--theme=${JSON.stringify(opts.theme)}`);
+    return args;
+}
+export function resolveWidgetCommand(type, opts) {
+    const entry = WIDGET_ENTRY_POINTS[type];
+    if (!entry)
+        throw new Error(`Unknown widget type: ${type}`);
+    const scriptPath = widgetEntryPath(entry);
+    const launch = resolveTuiLaunch({
+        surface: type,
+        scriptPath,
+        args: widgetArgs(opts),
+        checkoutExists: existsSync(scriptPath),
+        bunAvailable: isBunAvailable(),
+        compiledBinary: findCompiledTui(),
+    });
+    if (launch.mode === "unavailable") {
+        throw new Error(`Cannot launch ${type} widget: ${launch.reasons.join("; ")}`);
+    }
+    const escapedArgs = launch.argv.map(shellEscape).join(" ");
+    if (launch.mode === "bun") {
+        // cd to the tmux-ide REPO root (not the project) so bunfig.toml's JSX
+        // preload is found; the project dir rides in via --dir.
+        return `cd ${shellEscape(REPO_ROOT)} && bun ${escapedArgs}`;
+    }
+    // Compiled binary: no bunfig to find (JSX + native dylib are baked in). Run
+    // from the pane's dir so a stray repo-root bunfig can't hijack the preload.
+    return `cd ${shellEscape(opts.dir)} && ${shellEscape(launch.bin)} ${escapedArgs}`;
+}
+/**
+ * Structured form of `resolveWidgetCommand` for direct PTY spawning. Callers
+ * that own the cwd separately (e.g. the /ws/pty bridge accepting cwd in its
+ * init frame) avoid the shell hop and get exec-style argv.
+ */
+export function resolveWidgetSpawn(type, opts) {
+    const entry = WIDGET_ENTRY_POINTS[type];
+    if (!entry)
+        throw new Error(`Unknown widget type: ${type}`);
+    const scriptPath = widgetEntryPath(entry);
+    const launch = resolveTuiLaunch({
+        surface: type,
+        scriptPath,
+        args: widgetArgs(opts),
+        checkoutExists: existsSync(scriptPath),
+        bunAvailable: isBunAvailable(),
+        compiledBinary: findCompiledTui(),
+    });
+    if (launch.mode === "unavailable") {
+        throw new Error(`Cannot launch ${type} widget: ${launch.reasons.join("; ")}`);
+    }
+    // Bun spawns from the repo root (bunfig preload); the binary spawns from the
+    // pane's dir (self-contained, avoids a stray bunfig preload).
+    const cwd = launch.mode === "bun" ? REPO_ROOT : opts.dir;
+    return { cwd, cmd: [launch.bin, ...launch.argv] };
+}
+export const WIDGET_TYPES = Object.keys(WIDGET_ENTRY_POINTS);

package/packages/daemon/dist/widgets/setup/agent-naming.d.ts

@@ -0,0 +1,9 @@
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+import type { WidgetTheme } from "../lib/theme.ts";
+interface AgentNamingProps {
+    config: IdeConfig;
+    onContinue: (names: string[]) => void;
+    theme: WidgetTheme;
+}
+export declare function AgentNaming(props: AgentNamingProps): any;
+export {};

package/packages/daemon/dist/widgets/setup/agent-naming.jsx

@@ -0,0 +1,81 @@
+import { createSignal, onMount } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+/** Extract titles of claude panes from an IdeConfig. */
+function extractClaudePaneTitles(config) {
+    const titles = [];
+    for (const row of config.rows) {
+        for (const pane of row.panes) {
+            if (pane.command === "claude") {
+                titles.push(pane.title ?? "Claude");
+            }
+        }
+    }
+    return titles;
+}
+export function AgentNaming(props) {
+    const defaults = extractClaudePaneTitles(props.config);
+    const theme = props.theme;
+    // Create a signal per pane name
+    const nameSignals = defaults.map((d) => createSignal(d));
+    const [activeField, setActiveField] = createSignal(0);
+    const inputRefs = new Array(defaults.length).fill(undefined);
+    onMount(() => {
+        setTimeout(() => inputRefs[0]?.focus(), 50);
+    });
+    useKeyboard((evt) => {
+        if (evt.name === "tab") {
+            const next = (activeField() + 1) % nameSignals.length;
+            setActiveField(next);
+            setTimeout(() => inputRefs[next]?.focus(), 10);
+            evt.preventDefault();
+        }
+        else if (evt.name === "return") {
+            const names = nameSignals.map(([getter]) => getter());
+            props.onContinue(names);
+            evt.preventDefault();
+        }
+    });
+    return (<box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Name Your Agents
+        </text>
+        <text fg={toRGBA(theme.fgMuted)}>Customize the names for each Claude pane.</text>
+      </box>
+
+      {/* Input fields */}
+      {nameSignals.map(([getter, setter], index) => {
+            const isActive = () => activeField() === index;
+            return (<box flexShrink={0} paddingBottom={1} onMouseDown={() => {
+                    setActiveField(index);
+                    setTimeout(() => inputRefs[index]?.focus(), 10);
+                }}>
+            <text fg={toRGBA(isActive() ? theme.accent : theme.fgMuted)}>Pane {index + 1}</text>
+            <input value={getter()} placeholder={defaults[index] ?? "Agent"} onInput={(v) => setter(v)} focusedBackgroundColor={toRGBA(theme.selected)} cursorColor={toRGBA(theme.accent)} focusedTextColor={toRGBA(theme.fg)} ref={(r) => {
+                    inputRefs[index] = r;
+                }}/>
+          </box>);
+        })}
+
+      {/* Spacer */}
+      <box flexGrow={1}/>
+
+      {/* Footer */}
+      <box flexShrink={0}>
+        <box flexShrink={0} height={1}>
+          <text fg={toRGBA(theme.border)} wrapMode="none">
+            {"─".repeat(40)}
+          </text>
+        </box>
+        <box flexDirection="row" gap={2}>
+          <text fg={toRGBA(theme.fgMuted)}>Tab:next field</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:continue</text>
+        </box>
+      </box>
+    </box>);
+}

package/packages/daemon/dist/widgets/setup/config-tree.d.ts

@@ -0,0 +1,13 @@
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+import type { WidgetTheme } from "../lib/theme.ts";
+interface ConfigTreeProps {
+    config: IdeConfig;
+    onEditField: (path: string[]) => void;
+    onAddPane: (rowIdx: number) => void;
+    onDelete: (path: string[]) => void;
+    onSave: (config: IdeConfig) => void;
+    onConfigChange: (config: IdeConfig) => void;
+    theme: WidgetTheme;
+}
+export declare function ConfigTree(props: ConfigTreeProps): any;
+export {};