tmux-ide 2.1.4 → 2.6.0

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

@@ -0,0 +1,261 @@
+import "@opentui/solid/runtime-plugin-support";
+import { parseArgs } from "node:util";
+import { existsSync } from "node:fs";
+import { execFileSync } from "node:child_process";
+import { join } from "node:path";
+import { render, useTerminalDimensions } from "@opentui/solid";
+import { RGBA } from "@opentui/core";
+import { createSignal, Switch, Match } from "solid-js";
+import { createTheme } from "../lib/theme.js";
+import { getAppConfig } from "../../lib/app-config.js";
+import { detectStack } from "../../detect.js";
+import { readConfig, writeConfig } from "../../lib/yaml-io.js";
+import { PRESETS, updateConfigAtPath, addPane, removePane, } from "./setup-model.js";
+import { DetectPanel } from "./detect-panel.jsx";
+import { LayoutPicker } from "./layout-picker.jsx";
+import { AgentNaming } from "./agent-naming.jsx";
+import { ConfigTree } from "./config-tree.jsx";
+import { FieldEditor } from "./field-editor.jsx";
+import { Footer } from "./footer.jsx";
+const { values } = parseArgs({
+    options: {
+        dir: { type: "string" },
+        theme: { type: "string" },
+        wizard: { type: "boolean" },
+        edit: { type: "boolean" },
+    },
+});
+const dir = values.dir ?? process.cwd();
+const themeConfig = values.theme ? JSON.parse(values.theme) : undefined;
+const forceWizard = values.wizard ?? false;
+const forceEdit = values.edit ?? false;
+function toRGBA(c) {
+    return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+// Determine field type from path for the field editor
+function inferFieldType(path) {
+    const last = path[path.length - 1];
+    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"] };
+    if (last === "focus" || last === "enabled" || last === "auto_dispatch" || last === "widgets")
+        return { type: "boolean" };
+    if (last === "size")
+        return { type: "size" };
+    return { type: "string" };
+}
+// Get current value at a path from config
+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();
+    // Detect project stack once
+    const detected = detectStack(dir);
+    const detectedInfo = {
+        packageManager: detected.packageManager,
+        language: detected.language,
+        frameworks: detected.frameworks,
+        devCommand: detected.devCommand,
+    };
+    // Determine initial view
+    const hasConfig = existsSync(join(dir, "ide.yml"));
+    const initialView = forceEdit && hasConfig
+        ? { kind: "editor-tree" }
+        : forceWizard || !hasConfig
+            ? { kind: "detect" }
+            : { kind: "editor-tree" };
+    const [view, setView] = createSignal(initialView);
+    // Config state — loaded from file for editor mode, built from wizard flow
+    const initialConfig = hasConfig
+        ? readConfig(dir).config
+        : { name: dir.split("/").pop() ?? "project", rows: [{ panes: [{ title: "Shell" }] }] };
+    const [config, setConfig] = createSignal(initialConfig);
+    function viewKind() {
+        return view().kind;
+    }
+    function footerActions() {
+        const quit = () => process.exit(0);
+        const kind = view().kind;
+        switch (kind) {
+            case "detect":
+                return {
+                    onConfirm: () => setView({ kind: "layout-picker" }),
+                    onQuit: quit,
+                };
+            case "layout-picker":
+                return { onQuit: quit };
+            case "agent-naming":
+                return {
+                    onBack: () => setView({ kind: "layout-picker" }),
+                    onQuit: quit,
+                };
+            case "orchestrator":
+                return {
+                    onBack: () => setView({ kind: "agent-naming", config: config() }),
+                    onQuit: quit,
+                };
+            case "review":
+                return {
+                    onBack: () => setView({ kind: "agent-naming", config: config() }),
+                    onQuit: quit,
+                };
+            case "editor-tree":
+                return {
+                    onSave: () => handleSaveOnly(config()),
+                    onQuit: quit,
+                };
+            case "editor-field":
+                return {
+                    onBack: () => {
+                        if (hasConfig && !forceWizard) {
+                            setView({ kind: "editor-tree" });
+                        }
+                        else {
+                            setView({ kind: "review", config: config() });
+                        }
+                    },
+                };
+            default:
+                return { onQuit: quit };
+        }
+    }
+    function handleSaveAndLaunch(cfg) {
+        writeConfig(dir, cfg);
+        try {
+            execFileSync("tmux-ide", [], { cwd: dir, stdio: "inherit" });
+        }
+        catch {
+            // tmux-ide may not be in PATH when running as widget
+        }
+        process.exit(0);
+    }
+    function handleSaveOnly(cfg) {
+        writeConfig(dir, cfg);
+        process.exit(0);
+    }
+    return (<box width={dimensions().width} height={dimensions().height} backgroundColor={toRGBA(theme.bg)}>
+        <box flexGrow={1}>
+          <Switch>
+            {/* Wizard flow */}
+            <Match when={view().kind === "detect"}>
+              <DetectPanel detected={detectedInfo} onContinue={() => setView({ kind: "layout-picker" })} theme={theme}/>
+            </Match>
+
+            <Match when={view().kind === "layout-picker"}>
+              <LayoutPicker presets={PRESETS} onSelect={(preset) => {
+            const name = dir.split("/").pop() ?? "project";
+            const cfg = preset.buildConfig(name, {
+                devCommand: detected.devCommand,
+                packageManager: detected.packageManager,
+            });
+            setConfig(cfg);
+            // If preset has claude panes, go to agent naming
+            const hasClaude = cfg.rows.some((r) => r.panes.some((p) => p.command === "claude"));
+            if (hasClaude) {
+                setView({ kind: "agent-naming", config: cfg });
+            }
+            else {
+                setView({ kind: "review", config: cfg });
+            }
+        }} theme={theme}/>
+            </Match>
+
+            <Match when={view().kind === "agent-naming"}>
+              <AgentNaming config={config()} onContinue={(names) => {
+            let cfg = config();
+            let nameIdx = 0;
+            // Apply names to claude panes
+            for (let ri = 0; ri < cfg.rows.length; ri++) {
+                for (let pi = 0; pi < cfg.rows[ri].panes.length; pi++) {
+                    if (cfg.rows[ri].panes[pi].command === "claude" && nameIdx < names.length) {
+                        cfg = updateConfigAtPath(cfg, ["rows", String(ri), "panes", String(pi), "title"], names[nameIdx]);
+                        nameIdx++;
+                    }
+                }
+            }
+            setConfig(cfg);
+            setView({ kind: "review", config: cfg });
+        }} theme={theme}/>
+            </Match>
+
+            <Match when={view().kind === "review"}>
+              <ConfigTree config={config()} onEditField={(path) => setView({ kind: "editor-field", path })} onAddPane={(rowIdx) => {
+            setConfig(addPane(config(), rowIdx));
+        }} onDelete={(path) => {
+            // Handle pane deletion: path like ["rows","0","panes","1"]
+            if (path.length === 4 && path[0] === "rows" && path[2] === "panes") {
+                const rowIdx = parseInt(path[1], 10);
+                const paneIdx = parseInt(path[3], 10);
+                setConfig(removePane(config(), rowIdx, paneIdx));
+            }
+        }} onSave={(cfg) => handleSaveAndLaunch(cfg)} onConfigChange={(cfg) => setConfig(cfg)} theme={theme}/>
+            </Match>
+
+            {/* Editor flow */}
+            <Match when={view().kind === "editor-tree"}>
+              <ConfigTree config={config()} onEditField={(path) => setView({ kind: "editor-field", path })} onAddPane={(rowIdx) => {
+            setConfig(addPane(config(), rowIdx));
+        }} onDelete={(path) => {
+            if (path.length === 4 && path[0] === "rows" && path[2] === "panes") {
+                const rowIdx = parseInt(path[1], 10);
+                const paneIdx = parseInt(path[3], 10);
+                setConfig(removePane(config(), rowIdx, paneIdx));
+            }
+        }} onSave={(cfg) => handleSaveOnly(cfg)} onConfigChange={(cfg) => setConfig(cfg)} theme={theme}/>
+            </Match>
+
+            <Match when={view().kind === "editor-field"}>
+              {(() => {
+            const v = view();
+            const fieldInfo = inferFieldType(v.path);
+            return (<FieldEditor path={v.path} value={getValueAtPath(config(), v.path)} fieldType={fieldInfo.type} enumValues={fieldInfo.enumValues} onSave={(path, newValue) => {
+                    setConfig(updateConfigAtPath(config(), path, newValue));
+                    // Return to appropriate tree view
+                    const prev = view();
+                    // Check if we came from editor or wizard review
+                    if (hasConfig && !forceWizard) {
+                        setView({ kind: "editor-tree" });
+                    }
+                    else {
+                        setView({ kind: "review", config: config() });
+                    }
+                }} onCancel={() => {
+                    if (hasConfig && !forceWizard) {
+                        setView({ kind: "editor-tree" });
+                    }
+                    else {
+                        setView({ kind: "review", config: config() });
+                    }
+                }} theme={theme}/>);
+        })()}
+            </Match>
+          </Switch>
+        </box>
+
+        <Footer viewKind={viewKind()} theme={theme} actions={footerActions()}/>
+      </box>);
+}, {
+    targetFps: 30,
+    exitOnCtrlC: true,
+    useKittyKeyboard: {},
+    autoFocus: false,
+});

package/packages/daemon/dist/widgets/setup/layout-picker.d.ts

@@ -0,0 +1,9 @@
+import type { LayoutPreset } from "./setup-model.ts";
+import type { WidgetTheme } from "../lib/theme.ts";
+interface LayoutPickerProps {
+    presets: LayoutPreset[];
+    onSelect: (preset: LayoutPreset) => void;
+    theme: WidgetTheme;
+}
+export declare function LayoutPicker(props: LayoutPickerProps): any;
+export {};

package/packages/daemon/dist/widgets/setup/layout-picker.jsx

@@ -0,0 +1,69 @@
+import { createSignal } 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);
+}
+export function LayoutPicker(props) {
+    const [selectedIndex, setSelectedIndex] = createSignal(0);
+    const theme = props.theme;
+    useKeyboard((evt) => {
+        if (evt.name === "k" || evt.name === "up") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            evt.preventDefault();
+        }
+        else if (evt.name === "j" || evt.name === "down") {
+            setSelectedIndex((i) => Math.min(props.presets.length - 1, i + 1));
+            evt.preventDefault();
+        }
+        else if (evt.name === "return") {
+            const preset = props.presets[selectedIndex()];
+            if (preset)
+                props.onSelect(preset);
+            evt.preventDefault();
+        }
+    });
+    return (<box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Choose Layout
+        </text>
+      </box>
+
+      {/* Preset options */}
+      {props.presets.map((preset, index) => {
+            const isSelected = () => selectedIndex() === index;
+            return (<box flexShrink={0} paddingBottom={1} backgroundColor={isSelected() ? toRGBA(theme.selected) : undefined} onMouseDown={() => setSelectedIndex(index)} onMouseMove={() => setSelectedIndex(index)} onMouseUp={() => props.onSelect(preset)}>
+            <box flexDirection="row" gap={1}>
+              <text fg={toRGBA(isSelected() ? theme.accent : theme.fgMuted)}>
+                {isSelected() ? "▸" : " "}
+              </text>
+              <text fg={toRGBA(isSelected() ? theme.accent : theme.fg)} attributes={isSelected() ? TextAttributes.BOLD : 0}>
+                {preset.label}
+              </text>
+              <text fg={toRGBA(theme.fgMuted)}>— {preset.description}</text>
+            </box>
+            {isSelected() ? (<box paddingLeft={3}>
+                {preset.diagram.map((line) => (<text fg={toRGBA(theme.fg)}>{line}</text>))}
+              </box>) : null}
+          </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)}>j/k:navigate</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:select</text>
+        </box>
+      </box>
+    </box>);
+}

package/packages/daemon/dist/widgets/setup/setup-model.d.ts

@@ -0,0 +1,15 @@
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+export { type TreeNode, flattenConfigTree, updateConfigAtPath, addPane, removePane, addRow, removeRow, deepClone, validateSetupConfig, } from "../lib/config-model.ts";
+export interface DetectedInfo {
+    devCommand: string | null;
+    packageManager: string | null;
+}
+export interface LayoutPreset {
+    id: string;
+    label: string;
+    description: string;
+    diagram: string[];
+    buildConfig: (name: string, detected?: DetectedInfo) => IdeConfig;
+}
+export declare const PRESETS: LayoutPreset[];
+export declare function getPreset(id: string): LayoutPreset | undefined;

package/packages/daemon/dist/widgets/setup/setup-model.js

@@ -0,0 +1,157 @@
+// Re-export shared config model utilities
+export { flattenConfigTree, updateConfigAtPath, addPane, removePane, addRow, removeRow, deepClone, validateSetupConfig, } from "../lib/config-model.js";
+function devCmd(detected) {
+    if (detected?.devCommand)
+        return detected.devCommand;
+    if (detected?.packageManager)
+        return `${detected.packageManager} dev`;
+    return "npm run dev";
+}
+function testCmd(detected) {
+    if (detected?.packageManager)
+        return `${detected.packageManager} test`;
+    return "npm test";
+}
+export const PRESETS = [
+    {
+        id: "dual-claude",
+        label: "Dual Claude",
+        description: "Two Claude panes on top, dev server and shell on the bottom.",
+        diagram: [
+            "┌─────────────────┬─────────────────┐",
+            "│                 │                 │",
+            "│    Claude 1     │    Claude 2     │  70%",
+            "│                 │                 │",
+            "├─────────────────┼─────────────────┤",
+            "│   Dev Server    │     Shell       │  30%",
+            "└─────────────────┴─────────────────┘",
+        ],
+        buildConfig(name, detected) {
+            return {
+                name,
+                rows: [
+                    {
+                        size: "70%",
+                        panes: [
+                            { title: "Claude 1", command: "claude", size: "50%" },
+                            { title: "Claude 2", command: "claude" },
+                        ],
+                    },
+                    {
+                        panes: [
+                            { title: "Dev Server", command: devCmd(detected), size: "50%" },
+                            { title: "Shell" },
+                        ],
+                    },
+                ],
+            };
+        },
+    },
+    {
+        id: "triple-claude",
+        label: "Triple Claude",
+        description: "Three Claude panes on top for parallel work, dev server and shell below.",
+        diagram: [
+            "┌───────────┬───────────┬───────────┐",
+            "│           │           │           │",
+            "│ Claude 1  │ Claude 2  │ Claude 3  │  70%",
+            "│           │           │           │",
+            "├───────────┴─────┬─────┴───────────┤",
+            "│   Dev Server    │     Shell       │  30%",
+            "└─────────────────┴─────────────────┘",
+        ],
+        buildConfig(name, detected) {
+            return {
+                name,
+                rows: [
+                    {
+                        size: "70%",
+                        panes: [
+                            { title: "Claude 1", command: "claude", size: "33%" },
+                            { title: "Claude 2", command: "claude", size: "34%" },
+                            { title: "Claude 3", command: "claude" },
+                        ],
+                    },
+                    {
+                        panes: [
+                            { title: "Dev Server", command: devCmd(detected), size: "50%" },
+                            { title: "Shell" },
+                        ],
+                    },
+                ],
+            };
+        },
+    },
+    {
+        id: "single-claude",
+        label: "Single Claude",
+        description: "One wide Claude pane on top, dev server, tests, and shell below.",
+        diagram: [
+            "┌─────────────────────────────────────┐",
+            "│             Claude                  │  60%",
+            "├──────────┬──────────┬──────────────┤",
+            "│ Dev Srv  │  Tests   │    Shell     │  40%",
+            "└──────────┴──────────┴──────────────┘",
+        ],
+        buildConfig(name, detected) {
+            return {
+                name,
+                rows: [
+                    {
+                        size: "60%",
+                        panes: [{ title: "Claude", command: "claude", focus: true }],
+                    },
+                    {
+                        panes: [
+                            { title: "Dev Server", command: devCmd(detected), size: "33%" },
+                            { title: "Tests", command: testCmd(detected), size: "34%" },
+                            { title: "Shell" },
+                        ],
+                    },
+                ],
+            };
+        },
+    },
+    {
+        id: "agent-team",
+        label: "Agent Team",
+        description: "Lead + 2 teammates on top, mission control/explorer/preview widgets below with orchestrator.",
+        diagram: [
+            "┌───────────┬───────────┬───────────┐",
+            "│           │           │           │",
+            "│   Lead    │ Teammate1 │ Teammate2 │  70%",
+            "│           │           │           │",
+            "├───────────┼───────────┴───────────┤",
+            "│  Mission  │  Explorer  │ Preview  │  30%",
+            "│  Control  │            │          │",
+            "└───────────┴────────────┴──────────┘",
+        ],
+        buildConfig(name, _detected) {
+            return {
+                name,
+                team: { name: name },
+                rows: [
+                    {
+                        size: "70%",
+                        panes: [
+                            { title: "Lead", command: "claude", role: "lead", focus: true, size: "33%" },
+                            { title: "Teammate 1", command: "claude", role: "teammate", size: "34%" },
+                            { title: "Teammate 2", command: "claude", role: "teammate" },
+                        ],
+                    },
+                    {
+                        panes: [
+                            { title: "Mission Control", type: "mission-control", size: "40%" },
+                            { title: "Explorer", type: "explorer", size: "30%" },
+                            { title: "Preview", type: "preview" },
+                        ],
+                    },
+                ],
+                orchestrator: { enabled: true, auto_dispatch: true },
+            };
+        },
+    },
+];
+export function getPreset(id) {
+    return PRESETS.find((p) => p.id === id);
+}

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

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