tmux-ide 2.6.0 → 2.7.0

package/packages/daemon/src/widgets/setup/index.tsx

@@ -0,0 +1,341 @@
+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, type RGBA as RGBAType } from "../lib/theme.ts";
+import { getAppConfig } from "../../lib/app-config.ts";
+import { detectStack } from "../../detect.ts";
+import { readConfig, writeConfig } from "../../lib/yaml-io.ts";
+import {
+  PRESETS,
+  flattenConfigTree,
+  updateConfigAtPath,
+  addPane,
+  removePane,
+  validateSetupConfig,
+  type LayoutPreset,
+  type TreeNode,
+} from "./setup-model.ts";
+import type { IdeConfig } from "../../schemas/ide-config.ts";
+import { DetectPanel, type DetectedStackInfo } from "./detect-panel.tsx";
+import { LayoutPicker } from "./layout-picker.tsx";
+import { AgentNaming } from "./agent-naming.tsx";
+import { ConfigTree } from "./config-tree.tsx";
+import { FieldEditor, type FieldType } from "./field-editor.tsx";
+import { Footer, type ViewKind, type FooterActions } from "./footer.tsx";
+
+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: RGBAType): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+// Determine field type from path for the field editor
+function inferFieldType(path: string[]): { type: FieldType; enumValues?: string[] } {
+  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: IdeConfig, path: string[]): string {
+  let current: unknown = config;
+  for (const key of path) {
+    if (current === null || current === undefined) return "";
+    if (typeof current === "object") {
+      current = (current as Record<string, unknown>)[key];
+    } else {
+      return "";
+    }
+  }
+  return current === null || current === undefined ? "" : String(current);
+}
+
+type View =
+  | { kind: "detect" }
+  | { kind: "layout-picker" }
+  | { kind: "agent-naming"; config: IdeConfig }
+  | { kind: "orchestrator" }
+  | { kind: "review"; config: IdeConfig }
+  | { kind: "editor-tree" }
+  | { kind: "editor-field"; path: string[] };
+
+render(
+  () => {
+    const theme = createTheme(themeConfig, getAppConfig().theme);
+    const dimensions = useTerminalDimensions();
+
+    // Detect project stack once
+    const detected = detectStack(dir);
+    const detectedInfo: DetectedStackInfo = {
+      packageManager: detected.packageManager,
+      language: detected.language,
+      frameworks: detected.frameworks,
+      devCommand: detected.devCommand,
+    };
+
+    // Determine initial view
+    const hasConfig = existsSync(join(dir, "ide.yml"));
+    const initialView: View =
+      forceEdit && hasConfig
+        ? { kind: "editor-tree" }
+        : forceWizard || !hasConfig
+          ? { kind: "detect" }
+          : { kind: "editor-tree" };
+
+    const [view, setView] = createSignal<View>(initialView);
+
+    // Config state — loaded from file for editor mode, built from wizard flow
+    const initialConfig: IdeConfig = hasConfig
+      ? readConfig(dir).config
+      : { name: dir.split("/").pop() ?? "project", rows: [{ panes: [{ title: "Shell" }] }] };
+    const [config, setConfig] = createSignal<IdeConfig>(initialConfig);
+
+    function viewKind(): ViewKind {
+      return view().kind;
+    }
+
+    function footerActions(): 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: IdeConfig) {
+      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: IdeConfig) {
+      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: LayoutPreset) => {
+                  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: string[]) => {
+                  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() as Extract<View, { kind: "editor-field" }>;
+                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/src/widgets/setup/layout-picker.tsx

@@ -0,0 +1,96 @@
+import { createSignal } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { LayoutPreset } from "./setup-model.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);
+}
+
+interface LayoutPickerProps {
+  presets: LayoutPreset[];
+  onSelect: (preset: LayoutPreset) => void;
+  theme: WidgetTheme;
+}
+
+export function LayoutPicker(props: LayoutPickerProps) {
+  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/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>
+  );
+}