tmux-ide 2.6.0 → 2.6.1

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

@@ -0,0 +1,246 @@
+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";
+import { matchGrammar } from "../lib/grammar.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();
+
+    // The shared grammar runs FIRST; add/delete/save keys fall through below.
+    const grammar = matchGrammar(evt);
+    if (grammar === "navUp") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+      evt.preventDefault();
+      return;
+    } else if (grammar === "navDown") {
+      setSelectedIndex((i) => Math.min(nodes.length - 1, i + 1));
+      evt.preventDefault();
+      return;
+    } else if (grammar === "activate") {
+      const node = nodes[selectedIndex()];
+      if (!node) return;
+      if (node.expandable) {
+        toggleCollapse(node);
+      } else {
+        props.onEditField(node.path);
+      }
+      evt.preventDefault();
+      return;
+    }
+
+    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/packages/daemon/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/packages/daemon/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>
+  );
+}

package/packages/daemon/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>
+  );
+}