tmux-ide 1.3.1 → 2.1.0

package/src/widgets/setup/orchestrator-panel.tsx

@@ -0,0 +1,200 @@
+import { createSignal, For } 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 OrchestratorPanelConfig {
+  enabled: boolean;
+  auto_dispatch: boolean;
+  master_pane: string | null;
+}
+
+interface OrchestratorPanelProps {
+  claudePaneNames: string[];
+  theme: WidgetTheme;
+  onContinue: (config: OrchestratorPanelConfig) => void;
+  onBack: () => void;
+}
+
+type Field = "enabled" | "master_pane" | "auto_dispatch" | "confirm";
+
+export function OrchestratorPanel(props: OrchestratorPanelProps) {
+  const [enabled, setEnabled] = createSignal(true);
+  const [autoDispatch, setAutoDispatch] = createSignal(true);
+  const [masterIdx, setMasterIdx] = createSignal(0);
+  const [activeField, setActiveField] = createSignal<Field>("enabled");
+
+  const theme = props.theme;
+
+  const fields: Field[] = ["enabled", "master_pane", "auto_dispatch", "confirm"];
+
+  function fieldIndex() {
+    return fields.indexOf(activeField());
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onBack();
+      evt.preventDefault();
+      return;
+    }
+
+    if (evt.name === "down" || evt.name === "j") {
+      const next = Math.min(fieldIndex() + 1, fields.length - 1);
+      setActiveField(fields[next]!);
+      evt.preventDefault();
+    } else if (evt.name === "up" || evt.name === "k") {
+      const prev = Math.max(fieldIndex() - 1, 0);
+      setActiveField(fields[prev]!);
+      evt.preventDefault();
+    } else if (evt.name === "space" || evt.name === "return") {
+      const field = activeField();
+      if (field === "enabled") {
+        setEnabled(!enabled());
+      } else if (field === "master_pane" && props.claudePaneNames.length > 0) {
+        setMasterIdx((masterIdx() + 1) % props.claudePaneNames.length);
+      } else if (field === "auto_dispatch") {
+        setAutoDispatch(!autoDispatch());
+      } else if (field === "confirm") {
+        props.onContinue({
+          enabled: enabled(),
+          auto_dispatch: autoDispatch(),
+          master_pane: props.claudePaneNames[masterIdx()] ?? null,
+        });
+      }
+      evt.preventDefault();
+    }
+  });
+
+  function toggleLabel(active: boolean): string {
+    return active ? "[x]" : "[ ]";
+  }
+
+  function isActive(field: Field): boolean {
+    return activeField() === field;
+  }
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Orchestrator Configuration
+        </text>
+        <text fg={toRGBA(theme.fgMuted)}>
+          Configure multi-agent orchestration for your team layout.
+        </text>
+      </box>
+
+      {/* Enabled toggle */}
+      <box
+        flexShrink={0}
+        flexDirection="row"
+        gap={1}
+        paddingBottom={1}
+        onMouseDown={() => {
+          setActiveField("enabled");
+          setEnabled(!enabled());
+        }}
+      >
+        <text
+          fg={toRGBA(isActive("enabled") ? theme.accent : theme.fg)}
+          attributes={isActive("enabled") ? TextAttributes.BOLD : undefined}
+        >
+          {isActive("enabled") ? ">" : " "} {toggleLabel(enabled())} Enabled
+        </text>
+      </box>
+
+      {/* Master pane picker */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text
+          fg={toRGBA(isActive("master_pane") ? theme.accent : theme.fg)}
+          attributes={isActive("master_pane") ? TextAttributes.BOLD : undefined}
+        >
+          {isActive("master_pane") ? ">" : " "} Master Pane
+        </text>
+        <box paddingLeft={4}>
+          <For each={props.claudePaneNames}>
+            {(name, i) => (
+              <text
+                fg={toRGBA(i() === masterIdx() ? theme.accent : theme.fgMuted)}
+                onMouseDown={() => {
+                  setActiveField("master_pane");
+                  setMasterIdx(i());
+                }}
+              >
+                {i() === masterIdx() ? "● " : "○ "}
+                {name}
+              </text>
+            )}
+          </For>
+        </box>
+        <box paddingLeft={4}>
+          <text fg={toRGBA(theme.fgMuted)}>Space/Enter to cycle selection</text>
+        </box>
+      </box>
+
+      {/* Auto dispatch toggle */}
+      <box
+        flexShrink={0}
+        flexDirection="row"
+        gap={1}
+        paddingBottom={1}
+        onMouseDown={() => {
+          setActiveField("auto_dispatch");
+          setAutoDispatch(!autoDispatch());
+        }}
+      >
+        <text
+          fg={toRGBA(isActive("auto_dispatch") ? theme.accent : theme.fg)}
+          attributes={isActive("auto_dispatch") ? TextAttributes.BOLD : undefined}
+        >
+          {isActive("auto_dispatch") ? ">" : " "} {toggleLabel(autoDispatch())} Auto-dispatch tasks
+        </text>
+      </box>
+
+      {/* Spacer */}
+      <box flexGrow={1} />
+
+      {/* Continue button */}
+      <box
+        flexShrink={0}
+        paddingBottom={1}
+        onMouseDown={() => {
+          setActiveField("confirm");
+          props.onContinue({
+            enabled: enabled(),
+            auto_dispatch: autoDispatch(),
+            master_pane: props.claudePaneNames[masterIdx()] ?? null,
+          });
+        }}
+      >
+        <text
+          fg={toRGBA(isActive("confirm") ? theme.accent : theme.fgMuted)}
+          attributes={isActive("confirm") ? TextAttributes.BOLD : undefined}
+        >
+          {isActive("confirm") ? ">" : " "} [ Continue → ]
+        </text>
+      </box>
+
+      {/* 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)}>Space:toggle</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:select</text>
+          <text fg={toRGBA(theme.fgMuted)}>Esc:back</text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/widgets/setup/review-panel.tsx

@@ -0,0 +1,140 @@
+import { createSignal, createMemo, Show } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import yaml from "js-yaml";
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+import { validateConfig } from "../../validate.ts";
+import { writeConfig } from "../../lib/yaml-io.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);
+}
+
+export type ReviewAction = "write" | "launch";
+
+interface ReviewPanelProps {
+  config: IdeConfig;
+  dir: string;
+  theme: WidgetTheme;
+  onDone: (action: ReviewAction) => void;
+  onBack: () => void;
+}
+
+export function ReviewPanel(props: ReviewPanelProps) {
+  const [selectedAction, setSelectedAction] = createSignal<0 | 1>(0);
+
+  const theme = props.theme;
+
+  const yamlPreview = createMemo(() =>
+    yaml.dump(props.config, { lineWidth: -1, noRefs: true, quotingType: '"' }),
+  );
+
+  const errors = createMemo(() => validateConfig(props.config));
+  const isValid = createMemo(() => errors().length === 0);
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onBack();
+      evt.preventDefault();
+      return;
+    }
+
+    if (evt.name === "j" || evt.name === "down" || evt.name === "tab") {
+      setSelectedAction((prev) => (prev === 0 ? 1 : 0) as 0 | 1);
+      evt.preventDefault();
+    } else if (evt.name === "k" || evt.name === "up") {
+      setSelectedAction((prev) => (prev === 0 ? 1 : 0) as 0 | 1);
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      if (!isValid()) return;
+      writeConfig(props.dir, props.config);
+      props.onDone(selectedAction() === 0 ? "write" : "launch");
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Review Configuration
+        </text>
+      </box>
+
+      {/* YAML preview */}
+      <box flexGrow={1} flexShrink={1}>
+        <text fg={toRGBA(theme.fgMuted)} attributes={TextAttributes.BOLD}>
+          ide.yml preview:
+        </text>
+        <scrollbox>
+          <text fg={toRGBA(theme.fg)}>{yamlPreview()}</text>
+        </scrollbox>
+      </box>
+
+      {/* Validation status */}
+      <box flexShrink={0} paddingTop={1} paddingBottom={1}>
+        <Show
+          when={isValid()}
+          fallback={
+            <box>
+              <text fg={RGBA.fromInts(255, 80, 80, 255)} attributes={TextAttributes.BOLD}>
+                Validation errors:
+              </text>
+              {errors().map((e) => (
+                <text fg={RGBA.fromInts(255, 80, 80, 255)}> - {e}</text>
+              ))}
+            </box>
+          }
+        >
+          <text fg={toRGBA(theme.gitAdded)} attributes={TextAttributes.BOLD}>
+            Config is valid
+          </text>
+        </Show>
+      </box>
+
+      {/* Action buttons */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text
+          fg={toRGBA(selectedAction() === 0 ? theme.accent : theme.fgMuted)}
+          attributes={selectedAction() === 0 ? TextAttributes.BOLD : undefined}
+          onMouseDown={() => setSelectedAction(0)}
+          onMouseUp={() => {
+            if (!isValid()) return;
+            writeConfig(props.dir, props.config);
+            props.onDone("write");
+          }}
+        >
+          {selectedAction() === 0 ? ">" : " "} [ Write ide.yml ]
+        </text>
+        <text
+          fg={toRGBA(selectedAction() === 1 ? theme.accent : theme.fgMuted)}
+          attributes={selectedAction() === 1 ? TextAttributes.BOLD : undefined}
+          onMouseDown={() => setSelectedAction(1)}
+          onMouseUp={() => {
+            if (!isValid()) return;
+            writeConfig(props.dir, props.config);
+            props.onDone("launch");
+          }}
+        >
+          {selectedAction() === 1 ? ">" : " "} [ Write & Launch ]
+        </text>
+      </box>
+
+      {/* 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:select action</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:confirm</text>
+          <text fg={toRGBA(theme.fgMuted)}>Esc:back</text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/widgets/setup/setup-model.test.ts

@@ -0,0 +1,303 @@
+import { describe, it, expect } from "bun:test";
+import {
+  PRESETS,
+  getPreset,
+  flattenConfigTree,
+  updateConfigAtPath,
+  addPane,
+  removePane,
+  validateSetupConfig,
+} from "./setup-model.ts";
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+
+// ---------------------------------------------------------------------------
+// Layout Presets
+// ---------------------------------------------------------------------------
+
+describe("PRESETS", () => {
+  it("has 4 presets", () => {
+    expect(PRESETS.length).toBe(4);
+  });
+
+  it("each preset has required fields", () => {
+    for (const preset of PRESETS) {
+      expect(preset.id, `preset missing id`).toBeTruthy();
+      expect(preset.label, `preset ${preset.id} missing label`).toBeTruthy();
+      expect(preset.description, `preset ${preset.id} missing description`).toBeTruthy();
+      expect(preset.diagram.length > 0, `preset ${preset.id} missing diagram`).toBeTruthy();
+      expect(typeof preset.buildConfig).toBe("function");
+    }
+  });
+
+  it("each preset builds a valid IdeConfig", () => {
+    for (const preset of PRESETS) {
+      const config = preset.buildConfig("test-project");
+      const result = validateSetupConfig(config);
+      expect(
+        result.valid,
+        `preset ${preset.id} produced invalid config: ${!result.valid ? result.errors.join(", ") : ""}`,
+      ).toBeTruthy();
+    }
+  });
+
+  it("dual-claude preset builds 2 claude panes + dev/shell", () => {
+    const config = getPreset("dual-claude")!.buildConfig("my-app");
+    expect(config.rows.length).toBe(2);
+    expect(config.rows[0]!.size).toBe("70%");
+    expect(config.rows[0]!.panes.length).toBe(2);
+    expect(config.rows[0]!.panes[0]!.command).toBe("claude");
+    expect(config.rows[0]!.panes[1]!.command).toBe("claude");
+    expect(config.rows[1]!.panes.length).toBe(2);
+  });
+
+  it("triple-claude preset builds 3 claude panes + dev/shell", () => {
+    const config = getPreset("triple-claude")!.buildConfig("my-app");
+    expect(config.rows[0]!.panes.length).toBe(3);
+    expect(config.rows[0]!.size).toBe("70%");
+    for (const pane of config.rows[0]!.panes) {
+      expect(pane.command).toBe("claude");
+    }
+  });
+
+  it("single-claude preset builds 1 claude pane 60% + 3 bottom panes 40%", () => {
+    const config = getPreset("single-claude")!.buildConfig("my-app");
+    expect(config.rows[0]!.size).toBe("60%");
+    expect(config.rows[0]!.panes.length).toBe(1);
+    expect(config.rows[0]!.panes[0]!.command).toBe("claude");
+    expect(config.rows[1]!.panes.length).toBe(3);
+  });
+
+  it("agent-team preset has team, orchestrator, and role assignments", () => {
+    const config = getPreset("agent-team")!.buildConfig("my-app");
+    expect(config.team, "should have team config").toBeTruthy();
+    expect(config.orchestrator, "should have orchestrator config").toBeTruthy();
+    expect(config.orchestrator!.enabled).toBe(true);
+    expect(config.rows[0]!.panes[0]!.role).toBe("lead");
+    expect(config.rows[0]!.panes[1]!.role).toBe("teammate");
+    expect(config.rows[0]!.panes[2]!.role).toBe("teammate");
+    expect(config.rows[1]!.panes.length).toBe(3);
+  });
+
+  it("presets use detected devCommand when provided", () => {
+    const config = getPreset("dual-claude")!.buildConfig("my-app", {
+      devCommand: "pnpm dev",
+      packageManager: "pnpm",
+    });
+    expect(config.rows[1]!.panes[0]!.command).toBe("pnpm dev");
+  });
+
+  it("presets fall back to packageManager for dev command", () => {
+    const config = getPreset("dual-claude")!.buildConfig("my-app", {
+      devCommand: null,
+      packageManager: "yarn",
+    });
+    expect(config.rows[1]!.panes[0]!.command).toBe("yarn dev");
+  });
+});
+
+describe("getPreset", () => {
+  it("returns preset by id", () => {
+    expect(getPreset("dual-claude")!.id).toBe("dual-claude");
+    expect(getPreset("agent-team")!.id).toBe("agent-team");
+  });
+
+  it("returns undefined for unknown id", () => {
+    expect(getPreset("nonexistent")).toBe(undefined);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// flattenConfigTree
+// ---------------------------------------------------------------------------
+
+describe("flattenConfigTree", () => {
+  const simple: IdeConfig = {
+    name: "test",
+    rows: [
+      {
+        size: "70%",
+        panes: [{ title: "Claude 1", command: "claude" }, { title: "Shell" }],
+      },
+    ],
+  };
+
+  it("produces nodes for all config values", () => {
+    const nodes = flattenConfigTree(simple);
+    expect(nodes.length > 0).toBeTruthy();
+  });
+
+  it("includes leaf nodes with string values", () => {
+    const nodes = flattenConfigTree(simple);
+    const nameNode = nodes.find((n) => n.path.length === 1 && n.path[0] === "name");
+    expect(nameNode).toBeTruthy();
+    expect(nameNode!.value).toBe("test");
+    expect(nameNode!.expandable).toBe(false);
+  });
+
+  it("includes container nodes with null value", () => {
+    const nodes = flattenConfigTree(simple);
+    const rowsNode = nodes.find((n) => n.path.length === 1 && n.path[0] === "rows");
+    expect(rowsNode).toBeTruthy();
+    expect(rowsNode!.value).toBe(null);
+    expect(rowsNode!.expandable).toBe(true);
+  });
+
+  it("creates correct paths for deeply nested values", () => {
+    const nodes = flattenConfigTree(simple);
+    const titleNode = nodes.find(
+      (n) =>
+        n.path.length === 4 &&
+        n.path[0] === "rows" &&
+        n.path[1] === "0" &&
+        n.path[2] === "panes" &&
+        n.path[3] === "0",
+    );
+    expect(titleNode, "should have node for rows.0.panes.0").toBeTruthy();
+  });
+
+  it("sets depth correctly", () => {
+    const nodes = flattenConfigTree(simple);
+    const nameNode = nodes.find((n) => n.label === "name" && n.path.length === 1);
+    expect(nameNode!.depth).toBe(0);
+
+    const paneTitle = nodes.find((n) => n.label === "title" && n.value === "Claude 1");
+    expect(paneTitle).toBeTruthy();
+    expect(paneTitle!.depth).toBe(4); // rows.0.panes.0.title
+  });
+
+  it("skips undefined optional fields", () => {
+    const config: IdeConfig = { rows: [{ panes: [{ title: "X" }] }] };
+    const nodes = flattenConfigTree(config);
+    const nameNode = nodes.find((n) => n.label === "name");
+    expect(nameNode).toBe(undefined);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// updateConfigAtPath
+// ---------------------------------------------------------------------------
+
+describe("updateConfigAtPath", () => {
+  const base: IdeConfig = {
+    name: "test",
+    rows: [
+      {
+        size: "70%",
+        panes: [{ title: "Claude", command: "claude" }],
+      },
+    ],
+  };
+
+  it("updates a top-level string value", () => {
+    const updated = updateConfigAtPath(base, ["name"], "new-name");
+    expect(updated.name).toBe("new-name");
+    expect(base.name).toBe("test"); // original unchanged
+  });
+
+  it("updates a nested value", () => {
+    const updated = updateConfigAtPath(base, ["rows", "0", "panes", "0", "title"], "Renamed");
+    expect(updated.rows[0]!.panes[0]!.title).toBe("Renamed");
+    expect(base.rows[0]!.panes[0]!.title).toBe("Claude"); // original unchanged
+  });
+
+  it("updates row size", () => {
+    const updated = updateConfigAtPath(base, ["rows", "0", "size"], "50%");
+    expect(updated.rows[0]!.size).toBe("50%");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// addPane / removePane
+// ---------------------------------------------------------------------------
+
+describe("addPane", () => {
+  const base: IdeConfig = {
+    name: "test",
+    rows: [{ panes: [{ title: "Existing" }] }],
+  };
+
+  it("adds a new pane to the specified row", () => {
+    const updated = addPane(base, 0);
+    expect(updated.rows[0]!.panes.length).toBe(2);
+    expect(updated.rows[0]!.panes[1]!.title).toBe("New Pane");
+    expect(base.rows[0]!.panes.length).toBe(1); // original unchanged
+  });
+
+  it("returns clone unchanged for invalid row index", () => {
+    const updated = addPane(base, 99);
+    expect(updated.rows[0]!.panes.length).toBe(1);
+  });
+});
+
+describe("removePane", () => {
+  const base: IdeConfig = {
+    name: "test",
+    rows: [{ panes: [{ title: "First" }, { title: "Second" }, { title: "Third" }] }],
+  };
+
+  it("removes the pane at the specified index", () => {
+    const updated = removePane(base, 0, 1);
+    expect(updated.rows[0]!.panes.length).toBe(2);
+    expect(updated.rows[0]!.panes[0]!.title).toBe("First");
+    expect(updated.rows[0]!.panes[1]!.title).toBe("Third");
+    expect(base.rows[0]!.panes.length).toBe(3); // original unchanged
+  });
+
+  it("does not remove the last pane in a row", () => {
+    const single: IdeConfig = {
+      rows: [{ panes: [{ title: "Only" }] }],
+    };
+    const updated = removePane(single, 0, 0);
+    expect(updated.rows[0]!.panes.length).toBe(1);
+    expect(updated.rows[0]!.panes[0]!.title).toBe("Only");
+  });
+
+  it("returns clone unchanged for invalid row index", () => {
+    const updated = removePane(base, 99, 0);
+    expect(updated.rows[0]!.panes.length).toBe(3);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// validateSetupConfig
+// ---------------------------------------------------------------------------
+
+describe("validateSetupConfig", () => {
+  it("returns valid for a correct config", () => {
+    const config: IdeConfig = {
+      name: "test",
+      rows: [{ panes: [{ title: "Shell" }] }],
+    };
+    const result = validateSetupConfig(config);
+    expect(result.valid).toBe(true);
+  });
+
+  it("returns errors for missing rows", () => {
+    const result = validateSetupConfig({ name: "test" });
+    expect(result.valid).toBe(false);
+    expect(result.errors.length > 0).toBeTruthy();
+  });
+
+  it("returns errors for empty rows array", () => {
+    const result = validateSetupConfig({ name: "test", rows: [] });
+    expect(result.valid).toBe(false);
+  });
+
+  it("returns errors for empty panes array in a row", () => {
+    const result = validateSetupConfig({
+      name: "test",
+      rows: [{ panes: [] }],
+    });
+    expect(result.valid).toBe(false);
+  });
+
+  it("returns valid for config with optional fields", () => {
+    const config = {
+      name: "test",
+      rows: [{ size: "70%", panes: [{ title: "X", command: "claude", focus: true }] }],
+      theme: { accent: "colour75" },
+    };
+    const result = validateSetupConfig(config);
+    expect(result.valid).toBe(true);
+  });
+});