tmux-ide 2.1.4 → 2.6.0

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

@@ -0,0 +1,395 @@
+import "@opentui/solid/runtime-plugin-support";
+import { parseArgs } from "node:util";
+import { render, useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { createSignal, createMemo, Show } from "solid-js";
+import { createTheme } from "../lib/theme.js";
+import { getAppConfig } from "../../lib/app-config.js";
+import { updateConfigAtPath, addPane, removePane, removeRow, validateSetupConfig, } from "../lib/config-model.js";
+import { readConfig, writeConfig } from "../../lib/yaml-io.js";
+import { hasSession } from "@tmux-ide/tmux-bridge";
+import { ConfigTree } from "../setup/config-tree.jsx";
+import { FieldEditor } from "../setup/field-editor.jsx";
+import { matchGrammar } from "../lib/grammar.js";
+import { HelpOverlay } from "../lib/help-overlay.jsx";
+/** Settings keys beyond the shared grammar — listed in the `?` overlay. The
+ *  layout tree adds its own j/k/enter (they follow the grammar). */
+const WIDGET_KEYS = [
+    { key: "tab / 1–4", label: "switch tab" },
+    { key: "a", label: "add pane (layout)" },
+    { key: "d", label: "delete row/pane (layout)" },
+    { key: "^S", label: "save" },
+    { key: "^R", label: "save & restart" },
+];
+const { values } = parseArgs({
+    options: {
+        session: { type: "string" },
+        dir: { type: "string" },
+        theme: { type: "string" },
+    },
+});
+const dir = values.dir ?? process.cwd();
+const themeConfig = values.theme ? JSON.parse(values.theme) : undefined;
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+const TABS = [
+    { id: "layout", label: "Layout" },
+    { id: "team", label: "Team" },
+    { id: "orchestrator", label: "Orch." },
+    { id: "theme", label: "Theme" },
+];
+function inferFieldType(path) {
+    const last = path[path.length - 1] ?? "";
+    // Boolean fields
+    if (["focus", "enabled", "auto_dispatch", "widgets"].includes(last)) {
+        return { type: "boolean" };
+    }
+    // Enum fields
+    if (last === "role")
+        return { type: "enum", enumValues: ["lead", "teammate", "planner"] };
+    if (last === "type")
+        return {
+            type: "enum",
+            enumValues: ["explorer", "changes", "preview", "tasks", "costs", "config", "mission-control"],
+        };
+    if (last === "dispatch_mode")
+        return { type: "enum", enumValues: ["tasks", "goals"] };
+    // Size fields
+    if (last === "size")
+        return { type: "size" };
+    // Number fields rendered as string (will be coerced)
+    return { type: "string" };
+}
+function coerceValue(raw, path) {
+    if (typeof raw !== "string")
+        return raw;
+    if (raw === "true")
+        return true;
+    if (raw === "false")
+        return false;
+    const last = path[path.length - 1] ?? "";
+    if (["stall_timeout", "poll_interval", "max_concurrent_agents", "priority"].includes(last)) {
+        const num = parseInt(raw, 10);
+        if (!isNaN(num))
+            return num;
+    }
+    return raw;
+}
+function getValueAtPath(config, path) {
+    let current = config;
+    for (const key of path) {
+        if (current === null || current === undefined)
+            return "";
+        if (typeof current === "object") {
+            current = current[key];
+        }
+        else {
+            return "";
+        }
+    }
+    return current === null || current === undefined ? "" : String(current);
+}
+render(() => {
+    const theme = createTheme(themeConfig, getAppConfig().theme);
+    const dimensions = useTerminalDimensions();
+    // Load config
+    let initialConfig;
+    try {
+        const result = readConfig(dir);
+        initialConfig = result.config;
+    }
+    catch {
+        console.error("No ide.yml found. Run 'tmux-ide init' first.");
+        process.exit(1);
+    }
+    const [config, setConfig] = createSignal(initialConfig);
+    const [savedConfig, setSavedConfig] = createSignal(JSON.stringify(initialConfig));
+    const [activeTab, setActiveTab] = createSignal("layout");
+    const [editingField, setEditingField] = createSignal(null);
+    const [statusMsg, setStatusMsg] = createSignal(null);
+    const [helpOpen, setHelpOpen] = createSignal(false);
+    const dirty = createMemo(() => JSON.stringify(config()) !== savedConfig());
+    const validation = createMemo(() => validateSetupConfig(config()));
+    function handleSave() {
+        writeConfig(dir, config());
+        setSavedConfig(JSON.stringify(config()));
+        setStatusMsg("Saved");
+        setTimeout(() => setStatusMsg(null), 2000);
+    }
+    function handleEditField(path) {
+        setEditingField(path);
+    }
+    function handleFieldSave(path, value) {
+        const coerced = coerceValue(value, path);
+        setConfig(updateConfigAtPath(config(), path, coerced));
+        setEditingField(null);
+    }
+    function handleAddPane(rowIdx) {
+        setConfig(addPane(config(), rowIdx));
+    }
+    function handleDelete(path) {
+        // Handle row deletion
+        if (path.length === 2 && path[0] === "rows" && /^\d+$/.test(path[1])) {
+            setConfig(removeRow(config(), parseInt(path[1], 10)));
+            return;
+        }
+        // Handle pane deletion
+        if (path.length >= 4 && path[0] === "rows" && path[2] === "panes") {
+            const rowIdx = parseInt(path[1], 10);
+            const paneIdx = parseInt(path[3], 10);
+            if (!isNaN(rowIdx) && !isNaN(paneIdx)) {
+                setConfig(removePane(config(), rowIdx, paneIdx));
+            }
+        }
+    }
+    function handleConfigChange(newConfig) {
+        setConfig(newConfig);
+    }
+    // Tab-level keyboard handling (when not editing a field). The layout tree
+    // (ConfigTree) owns j/k/enter itself — those already follow the grammar.
+    useKeyboard((evt) => {
+        if (editingField() !== null)
+            return; // Let field editor handle keys
+        // Help overlay swallows keys: esc / q / ? close it.
+        if (helpOpen()) {
+            const g = matchGrammar(evt);
+            if (g === "dismiss" || g === "quit" || g === "help")
+                setHelpOpen(false);
+            evt.preventDefault();
+            return;
+        }
+        // The shared grammar runs FIRST for help + quit; the dirty guard still
+        // gates a lossy close.
+        const grammar = matchGrammar(evt);
+        if (grammar === "help") {
+            setHelpOpen(true);
+            evt.preventDefault();
+            return;
+        }
+        else if (grammar === "dismiss" || grammar === "quit") {
+            // esc/q close the panel popup; the dirty guard blocks a lossy close
+            // (the `-E` popup exits when this process does).
+            if (dirty()) {
+                setStatusMsg("Unsaved changes! Ctrl+S to save, then q to quit.");
+                setTimeout(() => setStatusMsg(null), 3000);
+            }
+            else {
+                process.exit(0);
+            }
+            evt.preventDefault();
+            return;
+        }
+        if (evt.name === "tab") {
+            const tabs = TABS.map((t) => t.id);
+            const idx = tabs.indexOf(activeTab());
+            setActiveTab(tabs[(idx + 1) % tabs.length]);
+            evt.preventDefault();
+        }
+        else if (evt.ctrl && evt.name === "s") {
+            handleSave();
+            evt.preventDefault();
+        }
+        else if (evt.ctrl && evt.name === "r") {
+            handleSave();
+            const sessionName = config().name ?? dir.split("/").pop() ?? "ide";
+            if (hasSession(sessionName)) {
+                const { execFileSync } = require("node:child_process");
+                try {
+                    execFileSync("tmux-ide", ["restart"], { cwd: dir, stdio: "inherit" });
+                }
+                catch {
+                    /* restart may close our pane */
+                }
+            }
+            process.exit(0);
+        }
+        else if (evt.name === "1") {
+            setActiveTab("layout");
+            evt.preventDefault();
+        }
+        else if (evt.name === "2") {
+            setActiveTab("team");
+            evt.preventDefault();
+        }
+        else if (evt.name === "3") {
+            setActiveTab("orchestrator");
+            evt.preventDefault();
+        }
+        else if (evt.name === "4") {
+            setActiveTab("theme");
+            evt.preventDefault();
+        }
+    });
+    // Team panel: simple form for team config
+    function TeamPanel() {
+        const cfg = config();
+        const teamEnabled = !!cfg.team;
+        const teamName = cfg.team?.name ?? "";
+        const panes = [];
+        cfg.rows.forEach((row, ri) => {
+            row.panes.forEach((p, pi) => {
+                panes.push({ row: ri, pane: pi, title: p.title ?? `Row ${ri} Pane ${pi}`, role: p.role });
+            });
+        });
+        return (<box paddingLeft={1}>
+          <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+            Team Configuration
+          </text>
+          <box paddingTop={1}>
+            <text fg={toRGBA(theme.fg)}>
+              Team: {teamEnabled ? `enabled (${teamName})` : "disabled"}
+            </text>
+          </box>
+          <box paddingTop={1}>
+            <text fg={toRGBA(theme.fgMuted)}>
+              {teamEnabled
+                ? "Use 'tmux-ide config disable-team' to disable"
+                : "Use 'tmux-ide config enable-team --name <N>' to enable"}
+            </text>
+          </box>
+          <box paddingTop={1}>
+            <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+              Pane Roles
+            </text>
+          </box>
+          {panes.map((p) => (<box paddingLeft={1}>
+              <text fg={toRGBA(theme.fg)}>
+                {p.title}: {p.role ?? "none"}
+              </text>
+            </box>))}
+        </box>);
+    }
+    // Orchestrator panel: display orchestrator settings
+    function OrchestratorPanel() {
+        const cfg = config();
+        const orch = cfg.orchestrator;
+        const fields = [
+            ["enabled", String(orch?.enabled ?? false)],
+            ["auto_dispatch", String(orch?.auto_dispatch ?? true)],
+            ["dispatch_mode", orch?.dispatch_mode ?? "tasks"],
+            ["poll_interval", String(orch?.poll_interval ?? 5000)],
+            ["stall_timeout", String(orch?.stall_timeout ?? 300000)],
+            ["max_concurrent_agents", String(orch?.max_concurrent_agents ?? 10)],
+            ["widgets", String(orch?.widgets ?? false)],
+        ];
+        return (<box paddingLeft={1}>
+          <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+            Orchestrator Settings
+          </text>
+          <box paddingTop={1}>
+            {fields.map(([key, val]) => (<box flexDirection="row" gap={1}>
+                <text fg={toRGBA(theme.fgMuted)}>{key.padEnd(24)}</text>
+                <text fg={toRGBA(theme.fg)}>{val}</text>
+              </box>))}
+          </box>
+          <box paddingTop={1}>
+            <text fg={toRGBA(theme.fgMuted)}>
+              Edit via Layout tab or: tmux-ide config set orchestrator.enabled true
+            </text>
+          </box>
+        </box>);
+    }
+    // Theme panel: display theme settings
+    function ThemePanel() {
+        const cfg = config();
+        const t = cfg.theme;
+        const fields = [
+            ["accent", t?.accent ?? "(default)"],
+            ["border", t?.border ?? "(default)"],
+            ["bg", t?.bg ?? "(default)"],
+            ["fg", t?.fg ?? "(default)"],
+        ];
+        return (<box paddingLeft={1}>
+          <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+            Theme Colors
+          </text>
+          <box paddingTop={1}>
+            {fields.map(([key, val]) => (<box flexDirection="row" gap={1}>
+                <text fg={toRGBA(theme.fgMuted)}>{key.padEnd(12)}</text>
+                <text fg={toRGBA(theme.fg)}>{val}</text>
+              </box>))}
+          </box>
+          <box paddingTop={1}>
+            <text fg={toRGBA(theme.fgMuted)}>
+              Edit via Layout tab or: tmux-ide config set theme.accent colour75
+            </text>
+          </box>
+        </box>);
+    }
+    return (<box width={dimensions().width} height={dimensions().height} backgroundColor={toRGBA(theme.bg)} flexDirection="column">
+        <Show when={helpOpen()}>
+          <HelpOverlay theme={theme} title="settings" widgetKeys={WIDGET_KEYS}/>
+        </Show>
+        <Show when={!helpOpen()}>
+          {/* Title bar */}
+          <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingLeft={1} paddingRight={1}>
+            <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+              Settings
+            </text>
+            <box flexDirection="row" gap={2}>
+              {dirty() ? <text fg={toRGBA(theme.gitModified)}>unsaved</text> : null}
+              <text fg={toRGBA(theme.fgMuted)}>Ctrl+S:save</text>
+            </box>
+          </box>
+
+          {/* Main content */}
+          <box flexGrow={1} flexDirection="row">
+            {/* Tab sidebar */}
+            <box flexShrink={0} width={10} paddingLeft={1}>
+              {TABS.map((tab) => {
+            const isActive = () => activeTab() === tab.id;
+            return (<box flexShrink={0} backgroundColor={isActive() ? toRGBA(theme.selected) : undefined} onMouseUp={() => setActiveTab(tab.id)}>
+                    <text fg={toRGBA(isActive() ? theme.accent : theme.fgMuted)} attributes={isActive() ? TextAttributes.BOLD : 0}>
+                      {isActive() ? ">" : " "} {tab.label}
+                    </text>
+                  </box>);
+        })}
+            </box>
+
+            {/* Content area */}
+            <box flexGrow={1}>
+              <Show when={editingField() !== null} fallback={<>
+                    <Show when={activeTab() === "layout"}>
+                      <ConfigTree config={config()} onEditField={handleEditField} onAddPane={handleAddPane} onDelete={handleDelete} onSave={handleSave} onConfigChange={handleConfigChange} theme={theme}/>
+                    </Show>
+                    <Show when={activeTab() === "team"}>
+                      <TeamPanel />
+                    </Show>
+                    <Show when={activeTab() === "orchestrator"}>
+                      <OrchestratorPanel />
+                    </Show>
+                    <Show when={activeTab() === "theme"}>
+                      <ThemePanel />
+                    </Show>
+                  </>}>
+                <FieldEditor path={editingField()} value={getValueAtPath(config(), editingField())} fieldType={inferFieldType(editingField()).type} enumValues={inferFieldType(editingField()).enumValues} onSave={handleFieldSave} onCancel={() => setEditingField(null)} theme={theme}/>
+              </Show>
+            </box>
+          </box>
+
+          {/* Status bar */}
+          <box flexShrink={0} paddingLeft={1} paddingRight={1}>
+            <box flexShrink={0} height={1}>
+              <text fg={toRGBA(theme.border)} wrapMode="none">
+                {"─".repeat(Math.max(1, dimensions().width - 2))}
+              </text>
+            </box>
+            <box flexDirection="row" gap={2}>
+              {validation().valid ? (<text fg={toRGBA(theme.gitAdded)}>Valid</text>) : (<text fg={toRGBA(theme.gitDeleted)}>Invalid</text>)}
+              {statusMsg() ? <text fg={toRGBA(theme.accent)}>{statusMsg()}</text> : null}
+              <text fg={toRGBA(theme.fgMuted)}>Tab:switch</text>
+              <text fg={toRGBA(theme.fgMuted)}>1-4:tabs</text>
+              <text fg={toRGBA(theme.fgMuted)}>Ctrl+R:restart</text>
+              <text fg={toRGBA(theme.fgMuted)}>?:help</text>
+              <text fg={toRGBA(theme.fgMuted)}>q:quit</text>
+            </box>
+          </box>
+        </Show>
+      </box>);
+}, {
+    targetFps: 30,
+    exitOnCtrlC: true,
+    useKittyKeyboard: {},
+    autoFocus: false,
+});

package/packages/daemon/dist/widgets/explorer/breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import type { WidgetTheme } from "../lib/theme.ts";
+interface BreadcrumbsProps {
+    projectRoot: string;
+    currentDir: string;
+    branch: string | null;
+    theme: WidgetTheme;
+    onNavigate: (absolutePath: string) => void;
+}
+export declare function Breadcrumbs(props: BreadcrumbsProps): any;
+export {};

package/packages/daemon/dist/widgets/explorer/breadcrumbs.jsx

@@ -0,0 +1,51 @@
+import { For, Show, createMemo } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { relative, basename, join } from "node:path";
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+export function Breadcrumbs(props) {
+    const segments = createMemo(() => {
+        const rel = relative(props.projectRoot, props.currentDir);
+        const parts = rel ? rel.split("/") : [];
+        const result = [
+            {
+                name: basename(props.projectRoot),
+                absolutePath: props.projectRoot,
+                isLast: parts.length === 0,
+            },
+        ];
+        let currentPath = props.projectRoot;
+        for (let i = 0; i < parts.length; i++) {
+            currentPath = join(currentPath, parts[i]);
+            result.push({
+                name: parts[i],
+                absolutePath: currentPath,
+                isLast: i === parts.length - 1,
+            });
+        }
+        return result;
+    });
+    return (<box flexShrink={0} paddingLeft={1} paddingBottom={1} flexDirection="row" gap={0}>
+      <Show when={props.branch}>
+        <text fg={toRGBA(props.theme.accent)} attributes={TextAttributes.BOLD}>
+          {"⎇ "}
+          {props.branch}{" "}
+        </text>
+      </Show>
+      <For each={segments()}>
+        {(seg) => (<box flexDirection="row">
+            <text fg={seg.isLast ? toRGBA(props.theme.fg) : toRGBA(props.theme.fgMuted)} attributes={seg.isLast ? TextAttributes.BOLD : undefined} onMouseUp={() => {
+                if (!seg.isLast) {
+                    props.onNavigate(seg.absolutePath);
+                }
+            }}>
+              {seg.name}
+            </text>
+            <Show when={!seg.isLast}>
+              <text fg={toRGBA(props.theme.border)}>{" / "}</text>
+            </Show>
+          </box>)}
+      </For>
+    </box>);
+}

package/packages/daemon/dist/widgets/explorer/footer.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetTheme } from "../lib/theme.ts";
+interface FooterProps {
+    theme: WidgetTheme;
+}
+export declare function Footer(props: FooterProps): any;
+export {};

package/packages/daemon/dist/widgets/explorer/footer.jsx

@@ -0,0 +1,11 @@
+import { RGBA } from "@opentui/core";
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+export function Footer(props) {
+    return (<box flexShrink={0} paddingLeft={1} paddingTop={1}>
+      <text fg={toRGBA(props.theme.fgMuted)} wrapMode="none">
+        ↑↓:nav ⏎:enter ⌫:back /:search []:changes c:claude o:edit q:quit
+      </text>
+    </box>);
+}

package/packages/daemon/dist/widgets/explorer/index.d.ts

@@ -0,0 +1 @@
+export {};