mini-coder 0.4.1 → 0.5.1

package/src/ui/help.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test";
+import { DEFAULT_SHOW_REASONING } from "../settings.ts";
+import { buildHelpText, type HelpRenderState } from "./help.ts";
+
+describe("ui/help", () => {
+  test("buildHelpText includes current reasoning and verbose state", () => {
+    const helpState: HelpRenderState = {
+      providers: new Map(),
+      model: null,
+      agentsMd: [],
+      skills: [],
+      plugins: [],
+      showReasoning: DEFAULT_SHOW_REASONING,
+      verbose: false,
+    };
+
+    const text = buildHelpText(helpState);
+
+    expect(text).toContain(
+      `/reasoning  Toggle thinking display (currently ${DEFAULT_SHOW_REASONING ? "on" : "off"})`,
+    );
+    expect(text).toContain(
+      "/verbose  Toggle verbose tool rendering (currently off)",
+    );
+  });
+
+  test("buildHelpText includes the current Escape input-focus note", () => {
+    const helpState: HelpRenderState = {
+      providers: new Map(),
+      model: null,
+      agentsMd: [],
+      skills: [],
+      plugins: [],
+      showReasoning: DEFAULT_SHOW_REASONING,
+      verbose: false,
+    };
+
+    const text = buildHelpText(helpState);
+
+    expect(text).toContain("Escape blurs the input first");
+    expect(text).toContain("Tab re-focuses the input");
+    expect(text).toContain("Escape again interrupts the current turn");
+  });
+});

package/src/ui/help.ts

@@ -0,0 +1,125 @@
+/**
+ * `/help` text rendering and command descriptions for the terminal UI.
+ *
+ * @module
+ */
+
+import type { AppState } from "../index.ts";
+import { COMMANDS } from "../input.ts";
+import { abbreviatePath } from "./status.ts";
+
+/** Help text inputs derived from application state. */
+export interface HelpRenderState {
+  /** Available provider credentials keyed by provider id. */
+  providers: AppState["providers"];
+  /** Current model selection. */
+  model: AppState["model"];
+  /** Loaded AGENTS.md files. */
+  agentsMd: AppState["agentsMd"];
+  /** Discovered skills. */
+  skills: AppState["skills"];
+  /** Active plugins. */
+  plugins: AppState["plugins"];
+  /** Whether reasoning blocks are shown in the log. */
+  showReasoning: AppState["showReasoning"];
+  /** Whether verbose tool rendering is enabled in the log. */
+  verbose: AppState["verbose"];
+}
+
+/** Command descriptions for `/help` and command autocomplete. */
+export const COMMAND_DESCRIPTIONS: Record<string, string> = {
+  model: "Select a model",
+  effort: "Set reasoning effort",
+  session: "Resume a session",
+  new: "New session",
+  fork: "Fork session",
+  undo: "Undo last turn",
+  reasoning: "Toggle thinking display",
+  verbose: "Toggle verbose tool rendering",
+  login: "OAuth login",
+  logout: "OAuth logout",
+  help: "Show help",
+};
+
+/**
+ * Get the `/help` description for a command, including current state when relevant.
+ *
+ * @param command - Command name.
+ * @param state - Help-relevant application state.
+ * @returns Human-readable command description.
+ */
+function getHelpCommandDescription(
+  command: (typeof COMMANDS)[number],
+  state: Pick<HelpRenderState, "showReasoning" | "verbose">,
+): string {
+  const description = COMMAND_DESCRIPTIONS[command] ?? "";
+  if (command === "reasoning") {
+    return `${description} (currently ${state.showReasoning ? "on" : "off"})`;
+  }
+  if (command === "verbose") {
+    return `${description} (currently ${state.verbose ? "on" : "off"})`;
+  }
+  return description;
+}
+
+/**
+ * Build the `/help` text shown in the conversation log.
+ *
+ * @param state - Help-relevant application state.
+ * @returns Multi-line help text for display.
+ */
+export function buildHelpText(state: HelpRenderState): string {
+  const lines: string[] = [];
+
+  lines.push("Commands:");
+  for (const command of COMMANDS) {
+    lines.push(`  /${command}  ${getHelpCommandDescription(command, state)}`);
+  }
+
+  const providerNames = Array.from(state.providers.keys());
+  lines.push("");
+  lines.push("Note:");
+  lines.push("  While a turn is running, Escape blurs the input first.");
+  lines.push("  Tab re-focuses the input.");
+  lines.push("  Escape again interrupts the current turn.");
+
+  lines.push("");
+  lines.push(
+    providerNames.length > 0
+      ? `Providers: ${providerNames.join(", ")}`
+      : "Providers: none (use /login)",
+  );
+
+  lines.push(
+    state.model
+      ? `Model: ${state.model.provider}/${state.model.id}`
+      : "Model: none (use /model)",
+  );
+
+  if (state.agentsMd.length > 0) {
+    lines.push("");
+    lines.push("AGENTS.md files:");
+    for (const agentFile of state.agentsMd) {
+      lines.push(`  ${abbreviatePath(agentFile.path)}`);
+    }
+  }
+
+  if (state.skills.length > 0) {
+    lines.push("");
+    lines.push("Skills:");
+    for (const skill of state.skills) {
+      const description = skill.description ? `  ${skill.description}` : "";
+      lines.push(`  ${skill.name}${description}`);
+    }
+  }
+
+  if (state.plugins.length > 0) {
+    lines.push("");
+    lines.push("Plugins:");
+    for (const plugin of state.plugins) {
+      lines.push(`  ${plugin.entry.name}`);
+    }
+  }
+
+  return lines.join("\n");
+}

package/src/ui/input.test.ts

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { DEFAULT_THEME } from "../theme.ts";
+import {
+  autocompleteInputPath,
+  type InputController,
+  renderInputArea,
+} from "./input.ts";
+
+const tempDirs: string[] = [];
+
+function createTempDir(): string {
+  const dir = mkdtempSync(join(tmpdir(), "mini-coder-ui-input-test-"));
+  tempDirs.push(dir);
+  return dir;
+}
+
+afterEach(() => {
+  for (const dir of tempDirs.splice(0)) {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+function expectTextInput(node: ReturnType<typeof renderInputArea>) {
+  if (node.type !== "textinput") {
+    throw new Error("Expected a TextInput node");
+  }
+  return node;
+}
+
+describe("ui/input", () => {
+  test("renderInputArea shows the current draft with the configured placeholder and size limits", () => {
+    const controller: InputController = {
+      onChange: () => {},
+      onFocus: () => {},
+      onBlur: () => {},
+      onKeyPress: () => undefined,
+    };
+
+    const input = expectTextInput(
+      renderInputArea(DEFAULT_THEME, controller, "draft", true),
+    );
+    const placeholder = input.props.placeholder;
+
+    expect(input.props.value).toBe("draft");
+    expect(input.props.focused).toBe(true);
+    expect(input.props.minHeight).toBe(2);
+    expect(input.props.maxHeight).toBe(10);
+    expect(input.props.padding).toEqual({ x: 1 });
+    expect(placeholder?.type).toBe("text");
+    if (!placeholder || placeholder.type !== "text") {
+      throw new Error("Expected a text placeholder");
+    }
+    expect(placeholder.content).toBe("message…");
+  });
+
+  test("autocompleteInputPath completes the last file path token", () => {
+    const cwd = createTempDir();
+    mkdirSync(join(cwd, "src"), { recursive: true });
+    writeFileSync(join(cwd, "src", "ui.ts"), "", "utf-8");
+
+    expect(autocompleteInputPath("inspect src/u", cwd)).toBe(
+      "inspect src/ui.ts",
+    );
+  });
+
+  test("autocompleteInputPath returns null when no completion is available", () => {
+    const cwd = createTempDir();
+
+    expect(autocompleteInputPath("inspect src/u", cwd)).toBeNull();
+  });
+});

package/src/ui/input.ts

@@ -0,0 +1,138 @@
+/**
+ * Input-area rendering and path-autocomplete helpers for the terminal UI.
+ *
+ * @module
+ */
+
+import { readdirSync } from "node:fs";
+import { isAbsolute, join } from "node:path";
+import { Text, TextInput } from "@cel-tui/core";
+import type { Node } from "@cel-tui/types";
+import type { Theme } from "../theme.ts";
+
+/** Stable callbacks for the controlled TextInput. */
+export interface InputController {
+  /** Update the controlled input value and re-render. */
+  onChange: (value: string) => void;
+  /** Mark the input as focused and re-render. */
+  onFocus: () => void;
+  /** Mark the input as blurred and re-render. */
+  onBlur: () => void;
+  /** Intercept submit/autocomplete keys before default editing runs. */
+  onKeyPress: (key: string) => boolean | undefined;
+}
+
+/** Find the longest common prefix across a list of strings. */
+function getLongestCommonPrefix(values: readonly string[]): string {
+  if (values.length === 0) {
+    return "";
+  }
+
+  let prefix = values[0]!;
+  for (let i = 1; i < values.length && prefix.length > 0; i++) {
+    const value = values[i]!;
+    let j = 0;
+    while (j < prefix.length && j < value.length && prefix[j] === value[j]) {
+      j++;
+    }
+    prefix = prefix.slice(0, j);
+  }
+
+  return prefix;
+}
+
+/**
+ * Attempt to autocomplete the final path token in the current draft.
+ *
+ * @param value - Current input draft.
+ * @param cwd - Working directory used to resolve relative paths.
+ * @returns The completed input value, or `null` when no completion is available.
+ */
+export function autocompleteInputPath(
+  value: string,
+  cwd: string,
+): string | null {
+  const tokenMatch = /(^|\s)(\S+)$/.exec(value);
+  if (!tokenMatch?.[2]) {
+    return null;
+  }
+
+  const token = tokenMatch[2];
+  const tokenStart = tokenMatch.index + tokenMatch[1]!.length;
+  const slashIndex = token.lastIndexOf("/");
+  const dirToken = slashIndex >= 0 ? token.slice(0, slashIndex + 1) : "";
+  const partial = token.slice(slashIndex + 1);
+  const searchDir = isAbsolute(token)
+    ? dirToken || "/"
+    : join(cwd, dirToken || ".");
+
+  const entries = (() => {
+    try {
+      return readdirSync(searchDir, {
+        encoding: "utf8",
+        withFileTypes: true,
+      });
+    } catch {
+      return null;
+    }
+  })();
+  if (!entries) {
+    return null;
+  }
+
+  const showHidden = partial.startsWith(".");
+  const matches = entries
+    .filter((entry) => (showHidden ? true : !entry.name.startsWith(".")))
+    .filter((entry) => entry.name.startsWith(partial))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  if (matches.length === 0) {
+    return null;
+  }
+
+  let completedName: string | null = null;
+  if (matches.length === 1) {
+    const match = matches[0]!;
+    completedName = `${match.name}${match.isDirectory() ? "/" : ""}`;
+  } else {
+    const prefix = getLongestCommonPrefix(matches.map((entry) => entry.name));
+    if (prefix.length > partial.length) {
+      completedName = prefix;
+    }
+  }
+
+  if (!completedName) {
+    return null;
+  }
+
+  return `${value.slice(0, tokenStart)}${dirToken}${completedName}`;
+}
+
+/**
+ * Render the input area.
+ *
+ * @param theme - Active UI theme.
+ * @param controller - Stable TextInput callbacks.
+ * @param value - Current input draft.
+ * @param focused - Whether the input should be focused.
+ * @returns The input area node.
+ */
+export function renderInputArea(
+  theme: Theme,
+  controller: InputController,
+  value: string,
+  focused: boolean,
+): Node {
+  return TextInput({
+    minHeight: 2,
+    maxHeight: 10,
+    padding: { x: 1 },
+    value,
+    onChange: controller.onChange,
+    placeholder: Text("message…", { fgColor: theme.mutedText }),
+    focused,
+    onFocus: controller.onFocus,
+    onBlur: controller.onBlur,
+    onKeyPress: controller.onKeyPress,
+  });
+}

package/src/ui/overlay.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "bun:test";
+import { Select } from "@cel-tui/components";
+import type { Node } from "@cel-tui/types";
+import { DEFAULT_THEME } from "../theme.ts";
+import { type ActiveOverlay, renderOverlay } from "./overlay.ts";
+
+function collectText(node: Node | null): string[] {
+  if (!node) {
+    return [];
+  }
+  if (node.type === "text") {
+    return [node.content];
+  }
+  if (node.type === "textinput") {
+    return [];
+  }
+  return node.children.flatMap((child) => collectText(child));
+}
+
+describe("ui/overlay", () => {
+  test("renderOverlay shows the title above the selectable body", () => {
+    const overlay: ActiveOverlay = {
+      title: "Commands",
+      select: Select({
+        items: [{ label: "overlay body", value: "body", filterText: "body" }],
+        maxVisible: 1,
+        placeholder: "type to filter...",
+        focused: true,
+        highlightColor: DEFAULT_THEME.accentText,
+        onSelect: () => {},
+        onBlur: () => {},
+      }),
+    };
+
+    const text = collectText(renderOverlay(DEFAULT_THEME, overlay));
+    const titleIndex = text.indexOf("Commands");
+    const bodyIndex = text.indexOf("overlay body");
+
+    expect(titleIndex).toBeGreaterThanOrEqual(0);
+    expect(bodyIndex).toBeGreaterThan(titleIndex);
+  });
+});

package/src/ui/overlay.ts

@@ -0,0 +1,59 @@
+/**
+ * Overlay rendering primitives for the terminal UI.
+ *
+ * @module
+ */
+
+import type { SelectInstance } from "@cel-tui/components";
+import { Text, VStack } from "@cel-tui/core";
+import type { Node } from "@cel-tui/types";
+import type { Theme } from "../theme.ts";
+
+/** Max visible items in the overlay Select. */
+export const OVERLAY_MAX_VISIBLE = 15;
+
+/** Horizontal padding around the overlay modal. */
+export const OVERLAY_PADDING_X = 4;
+
+/** Active overlay for interactive commands such as `/model` and `/session`. */
+export interface ActiveOverlay {
+  /** The Select component instance. */
+  select: SelectInstance;
+  /** Title displayed above the Select. */
+  title: string;
+}
+
+/**
+ * Render the centered overlay modal for an active Select.
+ *
+ * @param theme - Active UI theme.
+ * @param overlay - Overlay title and Select instance to render.
+ * @returns The overlay node.
+ */
+export function renderOverlay(theme: Theme, overlay: ActiveOverlay): Node {
+  const modalHeight = OVERLAY_MAX_VISIBLE + 3;
+
+  return VStack(
+    {
+      height: "100%",
+      justifyContent: "center",
+      padding: { x: OVERLAY_PADDING_X },
+    },
+    [
+      VStack(
+        {
+          height: modalHeight,
+          bgColor: theme.overlayBg,
+          padding: { x: 1 },
+        },
+        [
+          Text(overlay.title, {
+            bold: true,
+            fgColor: theme.accentText,
+          }),
+          overlay.select(),
+        ],
+      ),
+    ],
+  );
+}