tmux-ide 2.6.0 → 2.7.0

package/packages/daemon/src/widgets/explorer/tree.tsx

@@ -0,0 +1,165 @@
+import { createMemo, createEffect, For, Show } from "solid-js";
+import { RGBA, type ScrollBoxRenderable } from "@opentui/core";
+import type { TreeNode } from "./tree-model.ts";
+import type { WidgetTheme } from "../lib/theme.ts";
+
+function toRGBA(c: { r: number; g: number; b: number; a: number }): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+const TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case "M":
+      return " M";
+    case "A":
+      return " A";
+    case "D":
+      return " D";
+    case "?":
+      return " ?";
+    default:
+      return "";
+  }
+}
+
+function getStatusColor(
+  status: string,
+  theme: WidgetTheme,
+): { r: number; g: number; b: number; a: number } {
+  switch (status) {
+    case "M":
+      return theme.gitModified;
+    case "A":
+      return theme.gitAdded;
+    case "D":
+      return theme.gitDeleted;
+    case "?":
+      return theme.gitUntracked;
+    default:
+      return theme.fgMuted;
+  }
+}
+
+function getNameColor(
+  name: string,
+  isDir: boolean,
+  isSelected: boolean,
+  isIgnored: boolean,
+  theme: WidgetTheme,
+): { r: number; g: number; b: number; a: number } {
+  if (isSelected) return theme.selectedText;
+  if (isIgnored) return theme.ignored;
+  if (isDir) return theme.dirName;
+  if (name.endsWith(".lock") || name.startsWith(".") || name === "LICENSE") {
+    return theme.fgMuted;
+  }
+  return theme.fg;
+}
+
+interface FileTreeProps {
+  nodes: TreeNode[];
+  selected: number;
+  theme: WidgetTheme;
+  inputMode: "keyboard" | "mouse";
+  onSelect: (index: number) => void;
+  onActivate: (node: TreeNode) => void;
+  onInputModeChange: (mode: "keyboard" | "mouse") => void;
+}
+
+export function FileTree(props: FileTreeProps) {
+  let scroll: ScrollBoxRenderable | undefined;
+
+  createEffect(() => {
+    const idx = props.selected;
+    if (!scroll) return;
+    const children = scroll.getChildren();
+    const target = children[idx];
+    if (!target) return;
+    const y = target.y - scroll.y;
+    if (y >= scroll.height) scroll.scrollBy(y - scroll.height + 1);
+    if (y < 0) scroll.scrollBy(y);
+  });
+
+  return (
+    <scrollbox
+      ref={(r: ScrollBoxRenderable) => (scroll = r)}
+      flexGrow={1}
+      verticalScrollbarOptions={{
+        trackOptions: {
+          backgroundColor: toRGBA(props.theme.bg),
+          foregroundColor: toRGBA(props.theme.accent),
+        },
+      }}
+    >
+      <Show
+        when={props.nodes.length > 0}
+        fallback={
+          <box paddingLeft={2} paddingTop={1}>
+            <text fg={toRGBA(props.theme.fgMuted)}>empty directory</text>
+          </box>
+        }
+      >
+        <For each={props.nodes}>
+          {(node, index) => {
+            const isSelected = createMemo(() => index() === props.selected);
+            const icon = node.entry.isDir ? "> " : "  ";
+            const nameColor = () =>
+              getNameColor(
+                node.entry.name,
+                node.entry.isDir,
+                isSelected(),
+                node.entry.ignored,
+                props.theme,
+              );
+            const rowBg = () =>
+              isSelected()
+                ? toRGBA(props.theme.selected)
+                : index() % 2 === 1
+                  ? toRGBA(props.theme.rowAlt)
+                  : TRANSPARENT;
+
+            return (
+              <box
+                id={String(index())}
+                backgroundColor={rowBg()}
+                flexDirection="row"
+                paddingLeft={1}
+                paddingRight={1}
+                onMouseMove={() => {
+                  props.onInputModeChange("mouse");
+                  props.onSelect(index());
+                }}
+                onMouseDown={() => props.onSelect(index())}
+                onMouseUp={() => {
+                  props.onActivate(node);
+                }}
+              >
+                <text fg={toRGBA(nameColor())} wrapMode="none" flexGrow={1}>
+                  {icon}
+                  {node.entry.name}
+                  {node.entry.isDir ? "/" : ""}
+                </text>
+                <Show when={node.gitStatus}>
+                  <text
+                    fg={toRGBA(getStatusColor(node.gitStatus!, props.theme))}
+                    flexShrink={0}
+                    wrapMode="none"
+                  >
+                    {getStatusLabel(node.gitStatus!)}
+                  </text>
+                </Show>
+                <Show when={isSelected() && !node.entry.isDir}>
+                  <text fg={toRGBA(props.theme.fgMuted)} flexShrink={0} wrapMode="none">
+                    {" c: send to claude code"}
+                  </text>
+                </Show>
+              </box>
+            );
+          }}
+        </For>
+      </Show>
+    </scrollbox>
+  );
+}

package/packages/daemon/src/widgets/lib/config-model.ts

@@ -0,0 +1,116 @@
+import { IdeConfigSchema, type IdeConfig, type Row } from "../../schemas/ide-config.ts";
+
+// ---------------------------------------------------------------------------
+// Config Tree
+// ---------------------------------------------------------------------------
+
+export interface TreeNode {
+  path: string[];
+  label: string;
+  value: string | null;
+  depth: number;
+  expandable: boolean;
+}
+
+function flattenValue(obj: unknown, path: string[], depth: number, nodes: TreeNode[]): void {
+  if (Array.isArray(obj)) {
+    const label = path[path.length - 1] ?? "";
+    nodes.push({ path: [...path], label, value: null, depth, expandable: true });
+    for (let i = 0; i < obj.length; i++) {
+      flattenValue(obj[i], [...path, String(i)], depth + 1, nodes);
+    }
+  } else if (obj !== null && typeof obj === "object") {
+    const label = path[path.length - 1] ?? "";
+    nodes.push({ path: [...path], label, value: null, depth, expandable: true });
+    for (const [key, val] of Object.entries(obj as Record<string, unknown>)) {
+      flattenValue(val, [...path, key], depth + 1, nodes);
+    }
+  } else {
+    const label = path[path.length - 1] ?? "";
+    nodes.push({
+      path: [...path],
+      label,
+      value: obj === undefined || obj === null ? null : String(obj),
+      depth,
+      expandable: false,
+    });
+  }
+}
+
+export function flattenConfigTree(config: IdeConfig): TreeNode[] {
+  const nodes: TreeNode[] = [];
+  for (const [key, val] of Object.entries(config)) {
+    if (val === undefined) continue;
+    flattenValue(val, [key], 0, nodes);
+  }
+  return nodes;
+}
+
+// ---------------------------------------------------------------------------
+// Config Mutations
+// ---------------------------------------------------------------------------
+
+export function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj)) as T;
+}
+
+export function updateConfigAtPath(config: IdeConfig, path: string[], value: unknown): IdeConfig {
+  const cloned = deepClone(config);
+  let current: Record<string, unknown> = cloned as unknown as Record<string, unknown>;
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i]!;
+    current = current[key] as Record<string, unknown>;
+  }
+  const lastKey = path[path.length - 1]!;
+  current[lastKey] = value;
+  return cloned;
+}
+
+export function addPane(config: IdeConfig, rowIdx: number): IdeConfig {
+  const cloned = deepClone(config);
+  const row = cloned.rows[rowIdx];
+  if (!row) return cloned;
+  row.panes.push({ title: "New Pane" });
+  return cloned;
+}
+
+export function removePane(config: IdeConfig, rowIdx: number, paneIdx: number): IdeConfig {
+  const cloned = deepClone(config);
+  const row = cloned.rows[rowIdx];
+  if (!row) return cloned;
+  if (row.panes.length <= 1) return cloned;
+  row.panes.splice(paneIdx, 1);
+  return cloned;
+}
+
+export function addRow(config: IdeConfig, size?: string): IdeConfig {
+  const cloned = deepClone(config);
+  const row: Row = { panes: [{ title: "Shell" }] };
+  if (size) row.size = size;
+  cloned.rows.push(row);
+  return cloned;
+}
+
+export function removeRow(config: IdeConfig, rowIdx: number): IdeConfig {
+  const cloned = deepClone(config);
+  if (cloned.rows.length <= 1) return cloned;
+  cloned.rows.splice(rowIdx, 1);
+  return cloned;
+}
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+export function validateSetupConfig(
+  config: unknown,
+): { valid: true; config: IdeConfig } | { valid: false; errors: string[] } {
+  const result = IdeConfigSchema.safeParse(config);
+  if (result.success) {
+    return { valid: true, config: result.data };
+  }
+  return {
+    valid: false,
+    errors: result.error.issues.map((issue) => `${issue.path.join(".")}: ${issue.message}`),
+  };
+}

package/packages/daemon/src/widgets/lib/files.ts

@@ -0,0 +1,88 @@
+import { readdirSync, readFileSync, existsSync } from "node:fs";
+import { join, relative } from "node:path";
+import ignore, { type Ignore } from "ignore";
+
+const ALWAYS_IGNORE = new Set([
+  "node_modules",
+  ".git",
+  ".svn",
+  ".hg",
+  "dist",
+  "build",
+  "out",
+  ".next",
+  ".turbo",
+  ".cache",
+  "__pycache__",
+  "coverage",
+  ".nyc_output",
+  "target",
+  "vendor",
+  "bower_components",
+]);
+
+export { type Ignore };
+
+export interface FileEntry {
+  name: string;
+  path: string; // relative to root
+  absolutePath: string;
+  isDir: boolean;
+  ignored: boolean; // gitignored
+}
+
+export function createIgnoreFilter(rootDir: string): Ignore {
+  const ig = ignore();
+  const gitignorePath = join(rootDir, ".gitignore");
+  if (existsSync(gitignorePath)) {
+    ig.add(readFileSync(gitignorePath, "utf-8"));
+  }
+  return ig;
+}
+
+export function readDirectory(
+  dir: string,
+  rootDir: string,
+  ig: Ignore,
+  showHidden: boolean,
+  showIgnored: boolean = false,
+): FileEntry[] {
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  return entries
+    .filter((e) => {
+      if (ALWAYS_IGNORE.has(e.name)) return false;
+      if (!showHidden && e.name.startsWith(".")) return false;
+      if (showIgnored) return true;
+      const rel = relative(rootDir, join(dir, e.name));
+      try {
+        return !ig.ignores(e.isDirectory() ? rel + "/" : rel);
+      } catch {
+        return true;
+      }
+    })
+    .map((e) => {
+      const rel = relative(rootDir, join(dir, e.name));
+      let isIgnored = false;
+      try {
+        isIgnored = ig.ignores(e.isDirectory() ? rel + "/" : rel);
+      } catch {
+        // ignore malformed paths for ignore rules
+      }
+      return {
+        name: e.name,
+        path: rel,
+        absolutePath: join(dir, e.name),
+        isDir: e.isDirectory(),
+        ignored: isIgnored,
+      };
+    })
+    .sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+}

package/packages/daemon/src/widgets/lib/git.ts

@@ -0,0 +1,88 @@
+import { execFileSync } from "node:child_process";
+
+export interface GitFileStatus {
+  path: string;
+  status: "M" | "A" | "D" | "R" | "?";
+  additions: number;
+  deletions: number;
+}
+
+function execGit(dir: string, args: string[]): string {
+  try {
+    return execFileSync(
+      "git",
+      ["-c", "core.fsmonitor=false", "-c", "core.quotepath=false", ...args],
+      { cwd: dir, encoding: "utf-8", stdio: ["ignore", "pipe", "ignore"] },
+    );
+  } catch {
+    return "";
+  }
+}
+
+export function getGitBranch(dir: string): string | null {
+  const result = execGit(dir, ["rev-parse", "--abbrev-ref", "HEAD"]).trim();
+  return result || null;
+}
+
+export function getGitFileStatuses(dir: string): GitFileStatus[] {
+  const results: GitFileStatus[] = [];
+
+  // 1. Identify deleted files first so we can tag them correctly in numstat
+  const deleted = execGit(dir, ["diff", "--name-only", "--diff-filter=D", "HEAD"]);
+  const deletedPaths = new Set(deleted.split("\n").filter(Boolean));
+
+  // 2. Modified/deleted files with line counts
+  const numstat = execGit(dir, ["diff", "--numstat", "HEAD"]);
+  for (const line of numstat.split("\n").filter(Boolean)) {
+    const parts = line.split("\t");
+    if (parts.length < 3) continue;
+    const [added, removed, ...pathParts] = parts;
+    const filepath = pathParts.join("\t");
+    if (added === "-") continue; // binary file
+    results.push({
+      path: filepath,
+      status: deletedPaths.has(filepath) ? "D" : "M",
+      additions: parseInt(added!, 10) || 0,
+      deletions: parseInt(removed!, 10) || 0,
+    });
+  }
+
+  // 3. Deleted files not in numstat (shouldn't happen, but be safe)
+  const numstatPaths = new Set(results.map((r) => r.path));
+  for (const filepath of deletedPaths) {
+    if (!numstatPaths.has(filepath)) {
+      results.push({ path: filepath, status: "D", additions: 0, deletions: 0 });
+    }
+  }
+
+  // 4. Untracked files
+  const untracked = execGit(dir, ["ls-files", "--others", "--exclude-standard"]);
+  for (const filepath of untracked.split("\n").filter(Boolean)) {
+    results.push({ path: filepath, status: "?", additions: 0, deletions: 0 });
+  }
+
+  return results;
+}
+
+export function getGitStatusMap(dir: string): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const file of getGitFileStatuses(dir)) {
+    map.set(file.path, file.status);
+    // Propagate to parent directories
+    let parent = file.path;
+    while (parent.includes("/")) {
+      parent = parent.substring(0, parent.lastIndexOf("/"));
+      if (!map.has(parent)) map.set(parent, file.status);
+    }
+  }
+  return map;
+}
+
+export function getFileDiff(dir: string, path: string, staged: boolean): string {
+  const args = staged ? ["diff", "--cached", "--", path] : ["diff", "--", path];
+  return execGit(dir, args);
+}
+
+export function isGitRepo(dir: string): boolean {
+  return execGit(dir, ["rev-parse", "--is-inside-work-tree"]).trim() === "true";
+}

package/packages/daemon/src/widgets/lib/grammar.ts

@@ -0,0 +1,126 @@
+/**
+ * The ONE interaction grammar shared by every TUI surface — the sidebar,
+ * explorer, changes, config, and the team cockpit/picker.
+ *
+ * Cohesion is muscle memory: `j`/`k` (+ arrows) move, `enter` activates, `/`
+ * filters, `esc` closes the topmost thing (filter → detail → widget), `q`
+ * quits, `?` toggles help. These keys mean the SAME thing everywhere, so a
+ * widget never invents its own drift for a universal verb.
+ *
+ * Widgets call {@link matchGrammar} FIRST in their key handler and act on the
+ * returned {@link GrammarAction}, falling through to their own widget-specific
+ * keys only when it returns `null`. The escape precedence is factored into the
+ * pure {@link dismiss} state-machine so "esc closes the filter before it quits"
+ * is defined (and tested) in one place.
+ *
+ * This module is the SINGLE SOURCE for the grammar: the per-widget help
+ * overlays and the cheat sheet both render their "in panels & sidebar" section
+ * from {@link GRAMMAR_HELP}, so documentation can never drift from behaviour.
+ *
+ * Pure — no io, no solid, no opentui — so it unit-tests as a plain table.
+ */
+
+/** The universal verbs every surface understands. */
+export type GrammarAction =
+  | "navDown"
+  | "navUp"
+  | "activate"
+  | "filter"
+  | "help"
+  | "dismiss"
+  | "quit";
+
+/** The subset of an @opentui key event the grammar needs. */
+export interface GrammarKeyEvent {
+  name: string;
+  ctrl?: boolean;
+  alt?: boolean;
+  meta?: boolean;
+  shift?: boolean;
+}
+
+/**
+ * Deterministic iteration order for {@link matchGrammar}. The grammar keys are
+ * mutually exclusive (no key appears in two actions), so order only fixes the
+ * lookup for readers/tests — it never changes a result.
+ */
+export const GRAMMAR_ACTION_ORDER: GrammarAction[] = [
+  "navDown",
+  "navUp",
+  "activate",
+  "filter",
+  "help",
+  "dismiss",
+  "quit",
+];
+
+/**
+ * The fixed key → action bindings. Unlike the team app's configurable
+ * `DEFAULT_KEYMAP`, the GRAMMAR itself is not user-configurable — its whole
+ * value is that it is the same everywhere. The team keymap's universal actions
+ * (up/down/enter/filter/help/quit) agree with these by construction.
+ */
+export const GRAMMAR_KEYS: Record<GrammarAction, string[]> = {
+  navDown: ["j", "down"],
+  navUp: ["k", "up"],
+  activate: ["return"],
+  filter: ["/"],
+  help: ["?"],
+  dismiss: ["escape"],
+  quit: ["q"],
+};
+
+/**
+ * Human-facing rows for the help overlays and the cheat sheet — rendered
+ * straight from this constant so the docs are sourced from the grammar itself.
+ */
+export const GRAMMAR_HELP: ReadonlyArray<{ keys: string; label: string }> = [
+  { keys: "j / ↓", label: "move down" },
+  { keys: "k / ↑", label: "move up" },
+  { keys: "enter", label: "activate / open" },
+  { keys: "/", label: "filter list" },
+  { keys: "esc", label: "close filter → detail → widget" },
+  { keys: "q", label: "quit" },
+  { keys: "?", label: "toggle this help" },
+];
+
+/**
+ * Map a key event to its {@link GrammarAction}, or `null` when the key is not
+ * part of the grammar (so the caller falls through to its widget-specific
+ * keys).
+ *
+ * `ctrl`/`alt`/`meta` combos are NEVER grammar — those namespaces belong to the
+ * widgets (`ctrl+s` save, `ctrl+c` quit, the `M-…` dock popups). `shift` is
+ * allowed through because `?` arrives as a shifted `/` on most layouts; no
+ * widget binds a `shift+<grammar key>` combo, so letting it pass is safe.
+ */
+export function matchGrammar(evt: GrammarKeyEvent): GrammarAction | null {
+  if (evt.ctrl || evt.alt || evt.meta) return null;
+  for (const action of GRAMMAR_ACTION_ORDER) {
+    if (GRAMMAR_KEYS[action].includes(evt.name)) return action;
+  }
+  return null;
+}
+
+/** Which layer an `esc` (or `q`) should close, given what is currently open. */
+export type DismissTarget = "filter" | "detail" | "widget";
+
+/** The open-overlay layers a surface can stack, topmost-wins. */
+export interface OverlayState {
+  /** A `/` filter prompt is open (typing narrows a list). */
+  filterOpen?: boolean;
+  /** A transient detail view is open (help overlay, field editor, preview). */
+  detailOpen?: boolean;
+}
+
+/**
+ * The escape precedence, as a pure function: esc closes the FILTER first, then
+ * an open DETAIL, and only when nothing is layered does it fall through to the
+ * WIDGET itself (quit / close the popup). Widgets call this to decide what a
+ * bare `esc` (grammar `dismiss`) should do without re-deriving the order.
+ */
+export function dismiss(state: OverlayState): DismissTarget {
+  if (state.filterOpen) return "filter";
+  if (state.detailOpen) return "detail";
+  return "widget";
+}

package/packages/daemon/src/widgets/lib/help-overlay.tsx

@@ -0,0 +1,101 @@
+/**
+ * The shared `?` help overlay — one box, every surface.
+ *
+ * Renders the UNIVERSAL interaction grammar (from {@link GRAMMAR_HELP}, the same
+ * constant the cheat sheet reads) above the caller's OWN widget-specific keys.
+ * Because the grammar rows come from `grammar.ts`, no surface can document
+ * `j`/`k`/`enter`/`/`/`esc`/`q`/`?` differently from how it behaves.
+ *
+ * Each surface keeps a `helpOpen` signal, routes `?` (grammar `help`) to toggle
+ * it and `esc`/`q` to close it, and renders `<HelpOverlay …>` in place of its
+ * body while open. Kept theme-driven and io-free so it drops into any widget.
+ */
+import { For, Show } from "solid-js";
+import { RGBA, TextAttributes } from "@opentui/core";
+import type { WidgetTheme } from "./theme.ts";
+import { GRAMMAR_HELP } from "./grammar.ts";
+
+function toRGBA(c: { r: number; g: number; b: number; a: number }): RGBA {
+  return RGBA.fromInts(c.r, c.g, c.b, c.a);
+}
+
+/** A widget-specific key row: the rendered key(s) and what they do. */
+export interface WidgetKey {
+  key: string;
+  label: string;
+}
+
+export interface HelpOverlayProps {
+  theme: WidgetTheme;
+  /** Surface name shown in the header (e.g. "explorer", "sidebar"). */
+  title: string;
+  /** The surface's own keys, listed under the shared grammar. */
+  widgetKeys: WidgetKey[];
+}
+
+/**
+ * A centered help card: a "grammar" section (shared verbs) then a section of
+ * the surface's own keys. Replaces the surface body while `?` is held open;
+ * `esc`/`q`/`?` close it.
+ */
+export function HelpOverlay(props: HelpOverlayProps) {
+  const keyCol = () => {
+    const widths = [
+      ...GRAMMAR_HELP.map((r) => r.keys.length),
+      ...props.widgetKeys.map((r) => r.key.length),
+    ];
+    return Math.max(6, ...widths);
+  };
+  return (
+    <box flexDirection="column" flexGrow={1} alignItems="center" paddingTop={2}>
+      <box
+        flexDirection="column"
+        border
+        borderColor={toRGBA(props.theme.accent)}
+        backgroundColor={toRGBA(props.theme.selected)}
+        paddingLeft={2}
+        paddingRight={2}
+        paddingTop={1}
+        paddingBottom={1}
+      >
+        <text fg={toRGBA(props.theme.accent)} attributes={TextAttributes.BOLD}>
+          {props.title} — help
+        </text>
+
+        <box paddingTop={1}>
+          <text fg={toRGBA(props.theme.fgMuted)} attributes={TextAttributes.BOLD}>
+            grammar
+          </text>
+        </box>
+        <For each={GRAMMAR_HELP}>
+          {(row) => (
+            <box flexDirection="row" gap={1}>
+              <text fg={toRGBA(props.theme.accent)}>{row.keys.padEnd(keyCol())}</text>
+              <text fg={toRGBA(props.theme.fg)}>{row.label}</text>
+            </box>
+          )}
+        </For>
+
+        <Show when={props.widgetKeys.length > 0}>
+          <box paddingTop={1}>
+            <text fg={toRGBA(props.theme.fgMuted)} attributes={TextAttributes.BOLD}>
+              {props.title}
+            </text>
+          </box>
+          <For each={props.widgetKeys}>
+            {(row) => (
+              <box flexDirection="row" gap={1}>
+                <text fg={toRGBA(props.theme.accent)}>{row.key.padEnd(keyCol())}</text>
+                <text fg={toRGBA(props.theme.fg)}>{row.label}</text>
+              </box>
+            )}
+          </For>
+        </Show>
+
+        <box paddingTop={1}>
+          <text fg={toRGBA(props.theme.fgMuted)}>esc / q / ? to close</text>
+        </box>
+      </box>
+    </box>
+  );
+}