tmux-ide 2.1.4 → 2.6.0

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

@@ -1,112 +0,0 @@
-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

@@ -1,238 +0,0 @@
-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/field-editor.tsx

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