tmux-ide 1.3.1 → 2.1.0

package/src/widgets/setup/footer.tsx

@@ -0,0 +1,107 @@
+import { RGBA, TextAttributes } from "@opentui/core";
+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 ViewKind =
+  | "detect"
+  | "layout-picker"
+  | "agent-naming"
+  | "orchestrator"
+  | "review"
+  | "editor-tree"
+  | "editor-field";
+
+export interface FooterActions {
+  onConfirm?: () => void;
+  onBack?: () => void;
+  onQuit?: () => void;
+  onAdd?: () => void;
+  onDelete?: () => void;
+  onSave?: () => void;
+}
+
+interface FooterProps {
+  viewKind: ViewKind;
+  theme: WidgetTheme;
+  actions?: FooterActions;
+}
+
+interface HintDef {
+  label: string;
+  actionKey?: keyof FooterActions;
+}
+
+const VIEW_HINTS: Record<ViewKind, HintDef[]> = {
+  detect: [
+    { label: "Enter:continue", actionKey: "onConfirm" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  "layout-picker": [
+    { label: "j/k:navigate" },
+    { label: "Enter:select", actionKey: "onConfirm" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  "agent-naming": [
+    { label: "Tab:next field" },
+    { label: "Enter:continue", actionKey: "onConfirm" },
+    { label: "Esc:back", actionKey: "onBack" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  orchestrator: [
+    { label: "Space:toggle" },
+    { label: "Enter:continue", actionKey: "onConfirm" },
+    { label: "Esc:back", actionKey: "onBack" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  review: [
+    { label: "Enter:confirm", actionKey: "onConfirm" },
+    { label: "Esc:back", actionKey: "onBack" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  "editor-tree": [
+    { label: "j/k:nav" },
+    { label: "Enter:edit", actionKey: "onConfirm" },
+    { label: "a:add pane", actionKey: "onAdd" },
+    { label: "d:delete", actionKey: "onDelete" },
+    { label: "Ctrl+S:save", actionKey: "onSave" },
+    { label: "q:quit", actionKey: "onQuit" },
+  ],
+  "editor-field": [
+    { label: "Enter:save", actionKey: "onConfirm" },
+    { label: "Esc:cancel", actionKey: "onBack" },
+  ],
+};
+
+export function Footer(props: FooterProps) {
+  const theme = props.theme;
+  const hints = () => VIEW_HINTS[props.viewKind] ?? [];
+
+  return (
+    <box flexShrink={0}>
+      <box flexShrink={0} height={1}>
+        <text fg={toRGBA(theme.border)} wrapMode="none">
+          {"─".repeat(60)}
+        </text>
+      </box>
+      <box flexDirection="row" gap={2}>
+        {hints().map((hint) => {
+          const handler = hint.actionKey ? props.actions?.[hint.actionKey] : undefined;
+          const isClickable = !!handler;
+          return (
+            <text
+              fg={toRGBA(isClickable ? theme.fg : theme.fgMuted)}
+              attributes={isClickable ? TextAttributes.UNDERLINE : 0}
+              wrapMode="none"
+              onMouseDown={handler ? () => handler() : undefined}
+            >
+              {hint.label}
+            </text>
+          );
+        })}
+      </box>
+    </box>
+  );
+}

package/src/widgets/setup/index.tsx

@@ -0,0 +1,340 @@
+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 { 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);
+    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/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>
+  );
+}