tmux-ide 1.2.1 → 2.0.0

package/src/widgets/setup/agent-naming.tsx

@@ -0,0 +1,112 @@
+import { createSignal, onMount } from "solid-js";
+import { RGBA, TextAttributes, type InputRenderable } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import type { IdeConfig } from "../../schemas/ide-config.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);
+}
+
+/** Extract titles of claude panes from an IdeConfig. */
+function extractClaudePaneTitles(config: IdeConfig): string[] {
+  const titles: string[] = [];
+  for (const row of config.rows) {
+    for (const pane of row.panes) {
+      if (pane.command === "claude") {
+        titles.push(pane.title ?? "Claude");
+      }
+    }
+  }
+  return titles;
+}
+
+interface AgentNamingProps {
+  config: IdeConfig;
+  onContinue: (names: string[]) => void;
+  theme: WidgetTheme;
+}
+
+export function AgentNaming(props: AgentNamingProps) {
+  const defaults = extractClaudePaneTitles(props.config);
+  const theme = props.theme;
+
+  // Create a signal per pane name
+  const nameSignals = defaults.map((d) => createSignal(d));
+  const [activeField, setActiveField] = createSignal(0);
+
+  const inputRefs: (InputRenderable | undefined)[] = new Array(defaults.length).fill(undefined);
+
+  onMount(() => {
+    setTimeout(() => inputRefs[0]?.focus(), 50);
+  });
+
+  useKeyboard((evt) => {
+    if (evt.name === "tab") {
+      const next = (activeField() + 1) % nameSignals.length;
+      setActiveField(next);
+      setTimeout(() => inputRefs[next]?.focus(), 10);
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      const names = nameSignals.map(([getter]) => getter());
+      props.onContinue(names);
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Name Your Agents
+        </text>
+        <text fg={toRGBA(theme.fgMuted)}>Customize the names for each Claude pane.</text>
+      </box>
+
+      {/* Input fields */}
+      {nameSignals.map(([getter, setter], index) => {
+        const isActive = () => activeField() === index;
+        return (
+          <box
+            flexShrink={0}
+            paddingBottom={1}
+            onMouseDown={() => {
+              setActiveField(index);
+              setTimeout(() => inputRefs[index]?.focus(), 10);
+            }}
+          >
+            <text fg={toRGBA(isActive() ? theme.accent : theme.fgMuted)}>Pane {index + 1}</text>
+            <input
+              value={getter()}
+              placeholder={defaults[index] ?? "Agent"}
+              onInput={(v: string) => setter(v)}
+              focusedBackgroundColor={toRGBA(theme.selected)}
+              cursorColor={toRGBA(theme.accent)}
+              focusedTextColor={toRGBA(theme.fg)}
+              ref={(r: InputRenderable) => {
+                inputRefs[index] = r;
+              }}
+            />
+          </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)}>Tab:next field</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:continue</text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/widgets/setup/config-tree.tsx

@@ -0,0 +1,238 @@
+import { createSignal, createMemo } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import { useKeyboard } from "@opentui/solid";
+import { flattenConfigTree, validateSetupConfig, addPane, type TreeNode } from "./setup-model.ts";
+import type { IdeConfig } from "../../schemas/ide-config.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 ConfigTreeProps {
+  config: IdeConfig;
+  onEditField: (path: string[]) => void;
+  onAddPane: (rowIdx: number) => void;
+  onDelete: (path: string[]) => void;
+  onSave: (config: IdeConfig) => void;
+  onConfigChange: (config: IdeConfig) => void;
+  theme: WidgetTheme;
+}
+
+/** Check if a path is a row-level container (e.g. ["rows", "0"]). */
+function isRowPath(path: string[]): boolean {
+  return path.length === 2 && path[0] === "rows" && /^\d+$/.test(path[1]!);
+}
+
+/** Extract row index from a pane-level path (e.g. ["rows","0","panes","1","title"] → 0). */
+function rowIndexFromPath(path: string[]): number | null {
+  if (path.length >= 2 && path[0] === "rows" && /^\d+$/.test(path[1]!)) {
+    return parseInt(path[1]!, 10);
+  }
+  return null;
+}
+
+export function ConfigTree(props: ConfigTreeProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [collapsed, setCollapsed] = createSignal<Set<string>>(new Set());
+  const [confirmDelete, setConfirmDelete] = createSignal<string | null>(null);
+  const [inputMode, setInputMode] = createSignal<"keyboard" | "mouse">("keyboard");
+
+  const theme = props.theme;
+
+  const allNodes = createMemo(() => flattenConfigTree(props.config));
+
+  // Filter out children of collapsed nodes
+  const visibleNodes = createMemo(() => {
+    const all = allNodes();
+    const collapsedSet = collapsed();
+    const result: TreeNode[] = [];
+    for (const node of all) {
+      // Check if any ancestor is collapsed
+      let hidden = false;
+      for (let len = 1; len < node.path.length; len++) {
+        const ancestorKey = node.path.slice(0, len).join(".");
+        if (collapsedSet.has(ancestorKey)) {
+          hidden = true;
+          break;
+        }
+      }
+      if (!hidden) result.push(node);
+    }
+    return result;
+  });
+
+  const validation = createMemo(() => validateSetupConfig(props.config));
+
+  function toggleCollapse(node: TreeNode) {
+    const key = node.path.join(".");
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }
+
+  function isCollapsed(node: TreeNode): boolean {
+    return collapsed().has(node.path.join("."));
+  }
+
+  useKeyboard((evt) => {
+    setInputMode("keyboard");
+
+    // Delete confirmation mode
+    if (confirmDelete() !== null) {
+      if (evt.name === "y") {
+        const pathStr = confirmDelete()!;
+        setConfirmDelete(null);
+        props.onDelete(pathStr.split("."));
+        evt.preventDefault();
+        return;
+      }
+      setConfirmDelete(null);
+      evt.preventDefault();
+      return;
+    }
+
+    const nodes = visibleNodes();
+
+    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(nodes.length - 1, i + 1));
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      const node = nodes[selectedIndex()];
+      if (!node) return;
+      if (node.expandable) {
+        toggleCollapse(node);
+      } else {
+        props.onEditField(node.path);
+      }
+      evt.preventDefault();
+    } else if (evt.name === "a") {
+      const node = nodes[selectedIndex()];
+      if (!node) return;
+      const rowIdx = rowIndexFromPath(node.path);
+      if (rowIdx !== null) {
+        props.onAddPane(rowIdx);
+      }
+      evt.preventDefault();
+    } else if (evt.name === "d") {
+      const node = nodes[selectedIndex()];
+      if (!node) return;
+      setConfirmDelete(node.path.join("."));
+      evt.preventDefault();
+    } else if (evt.ctrl && evt.name === "s") {
+      props.onSave(props.config);
+      evt.preventDefault();
+    }
+  });
+
+  function nodeLabel(node: TreeNode): string {
+    const indent = "  ".repeat(node.depth);
+    const prefix = node.expandable ? (isCollapsed(node) ? "▸ " : "▾ ") : "  ";
+    if (node.value !== null) {
+      return `${indent}${prefix}${node.label}: ${node.value}`;
+    }
+    return `${indent}${prefix}${node.label}`;
+  }
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Config Editor
+        </text>
+        <text fg={toRGBA(theme.fgMuted)} onMouseUp={() => props.onSave(props.config)}>
+          Ctrl+S:save
+        </text>
+      </box>
+
+      {/* Tree */}
+      <box flexGrow={1}>
+        {visibleNodes().map((node, index) => {
+          const isSelected = () => selectedIndex() === index;
+          const isRow = isRowPath(node.path);
+          return (
+            <box
+              flexShrink={0}
+              backgroundColor={isSelected() ? toRGBA(theme.selected) : undefined}
+              onMouseMove={() => {
+                setInputMode("mouse");
+                setSelectedIndex(index);
+              }}
+              onMouseDown={() => setSelectedIndex(index)}
+              onMouseUp={() => {
+                if (node.expandable) toggleCollapse(node);
+                else props.onEditField(node.path);
+              }}
+            >
+              <box flexDirection="row">
+                <text
+                  fg={toRGBA(
+                    isSelected() ? theme.accent : node.expandable ? theme.fg : theme.fgMuted,
+                  )}
+                  attributes={isSelected() ? TextAttributes.BOLD : 0}
+                  wrapMode="none"
+                >
+                  {nodeLabel(node)}
+                </text>
+                {isSelected() && isRow ? (
+                  <text fg={toRGBA(theme.fgMuted)}> [a:add pane]</text>
+                ) : null}
+              </box>
+            </box>
+          );
+        })}
+      </box>
+
+      {/* Delete confirmation */}
+      {confirmDelete() !== null ? (
+        <box flexShrink={0} paddingTop={1}>
+          <text fg={toRGBA(theme.gitDeleted)} attributes={TextAttributes.BOLD}>
+            Delete {confirmDelete()}? y/n
+          </text>
+        </box>
+      ) : null}
+
+      {/* Validation status */}
+      <box flexShrink={0} paddingTop={1}>
+        {validation().valid ? (
+          <text fg={toRGBA(theme.gitAdded)}>Config valid</text>
+        ) : (
+          <box>
+            <text fg={toRGBA(theme.gitDeleted)} attributes={TextAttributes.BOLD}>
+              Validation errors:
+            </text>
+            {(validation() as { valid: false; errors: string[] }).errors.slice(0, 3).map((err) => (
+              <text fg={toRGBA(theme.gitDeleted)}> {err}</text>
+            ))}
+          </box>
+        )}
+      </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:nav</text>
+          <text fg={toRGBA(theme.fgMuted)}>Enter:edit/toggle</text>
+          <text fg={toRGBA(theme.fgMuted)}>a:add pane</text>
+          <text fg={toRGBA(theme.fgMuted)}>d:delete</text>
+          <text fg={toRGBA(theme.fgMuted)}>Ctrl+S:save</text>
+        </box>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,72 @@
+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 DetectedStackInfo {
+  packageManager: string | null;
+  language: string | null;
+  frameworks: string[];
+  devCommand: string | null;
+}
+
+interface DetectPanelProps {
+  detected: DetectedStackInfo;
+  onContinue: () => void;
+  theme: WidgetTheme;
+}
+
+export function DetectPanel(props: DetectPanelProps) {
+  const theme = props.theme;
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      props.onContinue();
+      evt.preventDefault();
+    }
+  });
+
+  function field(label: string, value: string | null): string {
+    return `${label}: ${value ?? "not detected"}`;
+  }
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Project Detected
+        </text>
+      </box>
+
+      {/* Detection results */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.fg)}>{field("Package Manager", props.detected.packageManager)}</text>
+        <text fg={toRGBA(theme.fg)}>{field("Language", props.detected.language)}</text>
+        <text fg={toRGBA(theme.fg)}>
+          {field(
+            "Frameworks",
+            props.detected.frameworks.length > 0 ? props.detected.frameworks.join(", ") : null,
+          )}
+        </text>
+        <text fg={toRGBA(theme.fg)}>{field("Dev Command", props.detected.devCommand)}</text>
+      </box>
+
+      {/* Spacer */}
+      <box flexGrow={1} />
+
+      {/* Footer */}
+      <box flexShrink={0} onMouseDown={() => props.onContinue()}>
+        <box flexShrink={0} height={1}>
+          <text fg={toRGBA(theme.border)} wrapMode="none">
+            {"─".repeat(40)}
+          </text>
+        </box>
+        <text fg={toRGBA(theme.accent)}>Enter:continue</text>
+      </box>
+    </box>
+  );
+}

package/src/widgets/setup/field-editor.tsx

@@ -0,0 +1,265 @@
+import { createSignal, onMount } from "solid-js";
+import { RGBA, TextAttributes, type InputRenderable } 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 type FieldType = "string" | "enum" | "boolean" | "size";
+
+export interface FieldEditorProps {
+  path: string[];
+  value: string;
+  fieldType: FieldType;
+  enumValues?: string[];
+  onSave: (path: string[], newValue: unknown) => void;
+  onCancel: () => void;
+  theme: WidgetTheme;
+}
+
+/** Validate a size string (e.g. "70%", "50%"). */
+function isValidSize(v: string): boolean {
+  return /^\d{1,3}%$/.test(v);
+}
+
+// ---------------------------------------------------------------------------
+// String / Size editor (input-based)
+// ---------------------------------------------------------------------------
+
+function StringEditor(props: {
+  value: string;
+  isSize: boolean;
+  onSave: (v: string) => void;
+  onCancel: () => void;
+  theme: WidgetTheme;
+}) {
+  const [text, setText] = createSignal(props.value);
+  const [error, setError] = createSignal<string | null>(null);
+  let inputRef: InputRenderable | undefined;
+
+  onMount(() => {
+    setTimeout(() => inputRef?.focus(), 50);
+  });
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onCancel();
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      const val = text();
+      if (props.isSize && !isValidSize(val)) {
+        setError("Must be a percentage (e.g. 70%)");
+        return;
+      }
+      props.onSave(val);
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box>
+      <input
+        value={text()}
+        placeholder={props.isSize ? "e.g. 70%" : "Enter value..."}
+        onInput={(v: string) => {
+          setText(v);
+          setError(null);
+        }}
+        focusedBackgroundColor={toRGBA(props.theme.selected)}
+        cursorColor={toRGBA(props.theme.accent)}
+        focusedTextColor={toRGBA(props.theme.fg)}
+        onMouseDown={() => inputRef?.focus()}
+        ref={(r: InputRenderable) => {
+          inputRef = r;
+        }}
+      />
+      {error() ? <text fg={toRGBA(props.theme.gitDeleted)}>{error()}</text> : null}
+    </box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Enum editor (list selection)
+// ---------------------------------------------------------------------------
+
+function EnumEditor(props: {
+  value: string;
+  values: string[];
+  onSave: (v: string) => void;
+  onCancel: () => void;
+  theme: WidgetTheme;
+}) {
+  const initial = Math.max(0, props.values.indexOf(props.value));
+  const [selectedIndex, setSelectedIndex] = createSignal(initial);
+  const [inputMode, setInputMode] = createSignal<"keyboard" | "mouse">("keyboard");
+
+  useKeyboard((evt) => {
+    setInputMode("keyboard");
+    if (evt.name === "escape") {
+      props.onCancel();
+      evt.preventDefault();
+    } else 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.values.length - 1, i + 1));
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      const val = props.values[selectedIndex()];
+      if (val !== undefined) props.onSave(val);
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box>
+      {props.values.map((val, index) => {
+        const isSelected = () => selectedIndex() === index;
+        return (
+          <box
+            flexShrink={0}
+            backgroundColor={isSelected() ? toRGBA(props.theme.selected) : undefined}
+            onMouseMove={() => {
+              setInputMode("mouse");
+              setSelectedIndex(index);
+            }}
+            onMouseDown={() => setSelectedIndex(index)}
+            onMouseUp={() => props.onSave(val)}
+          >
+            <text
+              fg={toRGBA(isSelected() ? props.theme.accent : props.theme.fg)}
+              attributes={isSelected() ? TextAttributes.BOLD : 0}
+            >
+              {isSelected() ? "▸ " : "  "}
+              {val}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Boolean editor (toggle)
+// ---------------------------------------------------------------------------
+
+function BooleanEditor(props: {
+  value: string;
+  onSave: (v: boolean) => void;
+  onCancel: () => void;
+  theme: WidgetTheme;
+}) {
+  const [val, setVal] = createSignal(props.value === "true");
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape") {
+      props.onCancel();
+      evt.preventDefault();
+    } else if (evt.name === "space") {
+      setVal((v) => !v);
+      evt.preventDefault();
+    } else if (evt.name === "return") {
+      props.onSave(val());
+      evt.preventDefault();
+    }
+  });
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <text
+        fg={toRGBA(props.theme.accent)}
+        attributes={TextAttributes.BOLD}
+        onMouseUp={() => setVal((v) => !v)}
+      >
+        {val() ? "[x]" : "[ ]"}
+      </text>
+      <text fg={toRGBA(props.theme.fg)} onMouseUp={() => setVal((v) => !v)}>
+        {val() ? "true" : "false"}
+      </text>
+      <text fg={toRGBA(props.theme.fgMuted)}>(Space to toggle, click to flip)</text>
+    </box>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main FieldEditor
+// ---------------------------------------------------------------------------
+
+export function FieldEditor(props: FieldEditorProps) {
+  const theme = props.theme;
+  const pathLabel = props.path.join(".");
+
+  return (
+    <box paddingLeft={1} paddingRight={1}>
+      {/* Header */}
+      <box flexShrink={0} flexDirection="row" justifyContent="space-between" paddingBottom={1}>
+        <text fg={toRGBA(theme.accent)} attributes={TextAttributes.BOLD}>
+          Edit: {pathLabel}
+        </text>
+        <text fg={toRGBA(theme.fgMuted)} onMouseUp={() => props.onCancel()}>
+          Esc:cancel
+        </text>
+      </box>
+
+      {/* Current value */}
+      <box flexShrink={0} paddingBottom={1}>
+        <text fg={toRGBA(theme.fgMuted)}>Current: {props.value || "(empty)"}</text>
+      </box>
+
+      {/* Editor */}
+      <box flexShrink={0} paddingBottom={1}>
+        {props.fieldType === "enum" ? (
+          <EnumEditor
+            value={props.value}
+            values={props.enumValues ?? []}
+            onSave={(v) => props.onSave(props.path, v)}
+            onCancel={props.onCancel}
+            theme={theme}
+          />
+        ) : props.fieldType === "boolean" ? (
+          <BooleanEditor
+            value={props.value}
+            onSave={(v) => props.onSave(props.path, v)}
+            onCancel={props.onCancel}
+            theme={theme}
+          />
+        ) : (
+          <StringEditor
+            value={props.value}
+            isSize={props.fieldType === "size"}
+            onSave={(v) => props.onSave(props.path, v)}
+            onCancel={props.onCancel}
+            theme={theme}
+          />
+        )}
+      </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}>
+          {props.fieldType === "enum" ? (
+            <text fg={toRGBA(theme.fgMuted)}>j/k:navigate Enter:select</text>
+          ) : props.fieldType === "boolean" ? (
+            <text fg={toRGBA(theme.fgMuted)}>Space:toggle Enter:confirm</text>
+          ) : (
+            <text fg={toRGBA(theme.fgMuted)}>Enter:save</text>
+          )}
+          <text fg={toRGBA(theme.fgMuted)} onMouseUp={() => props.onCancel()}>
+            Esc:cancel
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}