Oxagen CLI TUI

                       ┌──────────── q / Ctrl-C: exit ───────────┐
launchTui(program)     │                                         ▼
   │ build tree     ┌──────┐  Enter   ┌──────────┐  Enter  ┌──────────┐  submit  ┌──────────┐
   └──────────────► │ menu │ ───────► │ commands │ ──────► │  form    │ ───────► │ running  │
                    │ (grp)│ ◄─────── │ (in grp) │ ◄────── │ (args)   │          │ (exec)   │
                    └──────┘   Esc    └──────────┘   Esc   └──────────┘          └────┬─────┘
                       ▲                                                              │ done
                       └───────────────────── Esc (back to menu) ◄────── ┌──────────┐│
                                                                          │  result  │◄┘
                                                                          └──────────┘

const noCommand = process.argv.slice(2).length === 0;
const wantsTui = noCommand && process.stdout.isTTY && !process.env.OXAGEN_NO_TUI;
if (wantsTui) {
  const { launchTui } = await import("./tui/app.js"); // lazy: Ink not loaded otherwise
  await launchTui(program, version);
} else {
  program.parse(process.argv);
}

apps/cli/
  package.json                     (+ @inkjs/ui)
  src/
    index.tsx                      (activation seam; lazy import launchTui)
    components/DevStatus.tsx        (import palette from tui/theme)
    tui/
      theme.ts                     (new)
      banner.tsx                   (new)
      command-tree.ts              (new)
      command-form.tsx             (new)
      runner.ts                    (new)
      app.tsx                      (new)
      __tests__/
        command-tree.test.ts       (new)
        runner.test.ts             (new)
        banner.test.tsx            (new)
        app.test.tsx               (new)
        command-form.test.tsx      (new)
README / apps/cli/README.md        (document the interactive TUI + OXAGEN_NO_TUI)

// apps/cli/src/tui/__tests__/theme.test.ts
import { describe, it, expect } from "vitest";
import { theme } from "../theme.js";

describe("theme", () => {
  it("exposes the Oxagen brand palette and glyphs", () => {
    expect(theme.cyan).toBe("#7CE8F4");
    expect(theme.violet).toBe("#7C5AED");
    expect(theme.ring).toBe("◯");
    expect(theme.pointer).toBe("❯");
  });
});

// apps/cli/src/tui/theme.ts
// The Oxagen brand palette. Single source of truth shared by every TUI surface
// (banner, menu, forms) and the `oxagen dev` status view.
export const theme = {
  cyan: "#7CE8F4", // jewel cyan — ring glyph, accents
  violet: "#7C5AED", // jewel violet — wordmark, selection
  dim: "gray",
  ring: "◯",
  pointer: "❯",
} as const;

import { theme } from "../tui/theme.js";

git -C ../oxagen-cli-dev add apps/cli/src/tui/theme.ts apps/cli/src/tui/__tests__/theme.test.ts apps/cli/src/components/DevStatus.tsx
git -C ../oxagen-cli-dev commit -m "feat(cli): add tui theme palette; DevStatus reuses it"

// apps/cli/src/tui/__tests__/command-tree.test.ts
import { describe, it, expect } from "vitest";
import { Command } from "commander";
import { buildCommandTree } from "../command-tree.js";

function fixture(): Command {
  const program = new Command("oxagen").description("Oxagen developer CLI");
  const auth = program.command("auth").description("Authentication");
  auth
    .command("login")
    .description("Authenticate")
    .requiredOption("--email <email>", "Email address")
    .requiredOption("--password <password>", "Password")
    .option("--remember", "Stay signed in")
    .action(() => {});
  const agent = program.command("agent").description("Agent commands");
  const mcp = agent.command("mcp").description("MCP servers");
  mcp
    .command("register")
    .description("Register an MCP server")
    .argument("<name>", "server name")
    .option("--auth-config <json>", "auth config")
    .action(() => {});
  return program;
}

describe("buildCommandTree", () => {
  it("maps nested groups, args, options, and runnable leaves", () => {
    const tree = buildCommandTree(fixture());
    expect(tree.name).toBe("oxagen");
    expect(tree.path).toEqual([]);
    expect(tree.children.map((c) => c.name).sort()).toEqual(["agent", "auth"]);

    const login = tree.children.find((c) => c.name === "auth")!.children[0];
    expect(login.path).toEqual(["auth", "login"]);
    expect(login.runnable).toBe(true);
    expect(login.options.find((o) => o.long === "--email")!.required).toBe(true);
    expect(login.options.find((o) => o.long === "--remember")!.isBoolean).toBe(true);

    const register = tree.children
      .find((c) => c.name === "agent")!.children
      .find((c) => c.name === "mcp")!.children[0];
    expect(register.path).toEqual(["agent", "mcp", "register"]);
    expect(register.args[0]).toMatchObject({ name: "name", required: true, variadic: false });
    expect(register.options.find((o) => o.long === "--auth-config")!.secret).toBe(true);
  });

  it("omits the implicit help command", () => {
    const tree = buildCommandTree(fixture());
    expect(tree.children.some((c) => c.name === "help")).toBe(false);
  });
});

// apps/cli/src/tui/command-tree.ts
import type { Argument, Command, Option } from "commander";

export interface ArgSpec {
  name: string;
  required: boolean;
  variadic: boolean;
  description: string;
}

export interface OptSpec {
  flags: string;
  long: string;
  short?: string;
  description: string;
  required: boolean;
  isBoolean: boolean;
  takesValue: boolean;
  defaultValue?: unknown;
  secret: boolean;
  choices?: string[];
}

export interface CommandNode {
  name: string;
  description: string;
  path: string[];
  args: ArgSpec[];
  options: OptSpec[];
  children: CommandNode[];
  runnable: boolean;
}

// Flags whose values must never be shown in plaintext in the form.
const SECRET_RE = /(password|secret|token|api[-_]?key|auth[-_]?config)/i;

export function buildCommandTree(program: Command): CommandNode {
  return toNode(program, []);
}

function toNode(cmd: Command, path: string[]): CommandNode {
  const children = cmd.commands
    .filter((c) => c.name() !== "help")
    .map((c) => toNode(c, [...path, c.name()]));
  return {
    name: cmd.name(),
    description: cmd.description() ?? "",
    path,
    args: cmd.registeredArguments.map(toArgSpec),
    options: cmd.options.map(toOptSpec),
    children,
    runnable: children.length === 0,
  };
}

function toArgSpec(a: Argument): ArgSpec {
  return {
    name: a.name(),
    required: a.required,
    variadic: a.variadic,
    description: a.description ?? "",
  };
}

function toOptSpec(o: Option): OptSpec {
  const long = o.long ?? "";
  return {
    flags: o.flags,
    long,
    short: o.short ?? undefined,
    description: o.description ?? "",
    required: o.mandatory,
    isBoolean: o.isBoolean(),
    takesValue: !o.isBoolean(),
    defaultValue: o.defaultValue,
    secret: SECRET_RE.test(long),
    choices: o.argChoices,
  };
}

git -C ../oxagen-cli-dev add apps/cli/src/tui/command-tree.ts apps/cli/src/tui/__tests__/command-tree.test.ts
git -C ../oxagen-cli-dev commit -m "feat(cli): introspect commander program into a serializable command tree"

// apps/cli/src/tui/__tests__/runner.test.ts
import { describe, it, expect, vi } from "vitest";
import type { CommandNode } from "../command-tree.js";
import { assembleArgv } from "../runner.js";

const node: CommandNode = {
  name: "login",
  description: "Authenticate",
  path: ["auth", "login"],
  args: [{ name: "name", required: true, variadic: false, description: "" }],
  options: [
    { flags: "--email <e>", long: "--email", description: "", required: true, isBoolean: false, takesValue: true, secret: false },
    { flags: "--remember", long: "--remember", description: "", required: false, isBoolean: true, takesValue: false, secret: false },
    { flags: "--tags <t...>", long: "--tags", description: "", required: false, isBoolean: false, takesValue: true, secret: false },
  ],
  children: [],
  runnable: true,
};

describe("assembleArgv", () => {
  it("orders positionals, includes set options, and drops empty/false ones", () => {
    const argv = assembleArgv(node, {
      "arg:name": "acme",
      "opt:--email": "you@example.com",
      "opt:--remember": true,
    });
    expect(argv).toEqual(["acme", "--email", "you@example.com", "--remember"]);
  });

  it("omits boolean flags that are false and value options left blank", () => {
    const argv = assembleArgv(node, { "arg:name": "acme", "opt:--remember": false, "opt:--email": "" });
    expect(argv).toEqual(["acme"]);
  });
});

// apps/cli/src/tui/runner.ts
import { spawn } from "node:child_process";
import type { CommandNode } from "./command-tree.js";

export type FormValues = Record<string, string | boolean>;

// Build the argv tokens that follow the command path, from collected form values.
export function assembleArgv(node: CommandNode, values: FormValues): string[] {
  const tokens: string[] = [];

  for (const arg of node.args) {
    const v = values[`arg:${arg.name}`];
    if (typeof v === "string" && v.trim() !== "") {
      if (arg.variadic) tokens.push(...v.trim().split(/\s+/));
      else tokens.push(v);
    }
  }

  for (const opt of node.options) {
    const v = values[`opt:${opt.long}`];
    if (opt.isBoolean) {
      if (v === true) tokens.push(opt.long);
    } else if (typeof v === "string" && v.trim() !== "") {
      tokens.push(opt.long, v);
    }
  }

  return tokens;
}

// Execute the selected command as a child process so each run is isolated and
// repeat-safe. stdio is inherited so auth prompts and streaming output work.
export function runCommand(node: CommandNode, argv: string[]): Promise<{ code: number }> {
  return new Promise((resolve) => {
    const entry = process.argv[1];
    const child = spawn(process.execPath, [entry, ...node.path, ...argv], { stdio: "inherit" });
    child.on("exit", (code) => resolve({ code: code ?? 0 }));
    child.on("error", () => resolve({ code: 1 }));
  });
}

git -C ../oxagen-cli-dev add apps/cli/src/tui/runner.ts apps/cli/src/tui/__tests__/runner.test.ts
git -C ../oxagen-cli-dev commit -m "feat(cli): assemble argv from form values and run commands as child processes"

cd ../oxagen-cli-dev
pnpm --filter @oxagen/cli add -D ink-testing-library@4.0.0
pnpm i --no-frozen-lockfile

// apps/cli/src/tui/__tests__/banner.test.tsx
import { describe, it, expect } from "vitest";
import { render } from "ink-testing-library";
import React from "react";
import { Banner } from "../banner.js";

describe("Banner", () => {
  it("renders the Oxagen wordmark, ring glyph, and version", () => {
    const { lastFrame } = render(<Banner version="0.4.0" />);
    const frame = lastFrame() ?? "";
    expect(frame).toContain("◯");
    expect(frame.toLowerCase()).toContain("oxagen");
    expect(frame).toContain("0.4.0");
  });
});

// apps/cli/src/tui/banner.tsx
import { Box, Text } from "ink";
import React from "react";
import { theme } from "./theme.js";

// Block-letter OXAGEN wordmark. Kept as a literal so it renders identically
// across terminals (no figlet dependency).
const WORDMARK: string[] = [
  " ██████  ██   ██  █████   ██████  ███████ ███    ██",
  "██    ██  ██ ██  ██   ██ ██       ██      ████   ██",
  "██    ██   ███   ███████ ██   ███ █████   ██ ██  ██",
  "██    ██  ██ ██  ██   ██ ██    ██ ██      ██  ██ ██",
  " ██████  ██   ██ ██   ██  ██████  ███████ ██   ████",
];

export function Banner({ version }: { version: string }): React.ReactElement {
  return (
    <Box flexDirection="column" paddingX={1} marginBottom={1}>
      {WORDMARK.map((line, i) => (
        <Text key={i} color={theme.violet} bold>
          {line}
        </Text>
      ))}
      <Text>
        <Text color={theme.cyan}>{theme.ring} </Text>
        <Text color={theme.violet} bold>
          Oxagen
        </Text>
        <Text dimColor>{`  ·  developer CLI  v${version}`}</Text>
      </Text>
    </Box>
  );
}

git -C ../oxagen-cli-dev add apps/cli/src/tui/banner.tsx apps/cli/src/tui/__tests__/banner.test.tsx apps/cli/package.json ../oxagen-cli-dev/pnpm-lock.yaml
git -C ../oxagen-cli-dev commit -m "feat(cli): ASCII-art Oxagen banner; add ink-testing-library"

cd ../oxagen-cli-dev
pnpm --filter @oxagen/cli add @inkjs/ui@2.0.0
pnpm i --no-frozen-lockfile

// apps/cli/src/tui/__tests__/command-form.test.tsx
import { describe, it, expect, vi } from "vitest";
import { render } from "ink-testing-library";
import React from "react";
import { CommandForm } from "../command-form.js";
import type { CommandNode } from "../command-tree.js";

const node: CommandNode = {
  name: "login",
  description: "Authenticate",
  path: ["auth", "login"],
  args: [],
  options: [
    { flags: "--email <e>", long: "--email", description: "Email", required: true, isBoolean: false, takesValue: true, secret: false },
    { flags: "--password <p>", long: "--password", description: "Password", required: true, isBoolean: false, takesValue: true, secret: true },
  ],
  children: [],
  runnable: true,
};

const ENTER = "\r";

describe("CommandForm", () => {
  it("renders a field per option and masks secret fields", () => {
    const { lastFrame } = render(<CommandForm node={node} onSubmit={() => {}} onCancel={() => {}} />);
    const frame = lastFrame() ?? "";
    expect(frame).toContain("--email");
    expect(frame).toContain("--password");
    expect(frame.toLowerCase()).toContain("required");
  });

  it("blocks submit while a required field is empty", () => {
    const onSubmit = vi.fn();
    const { stdin } = render(<CommandForm node={node} onSubmit={onSubmit} onCancel={() => {}} />);
    stdin.write(ENTER); // attempt submit with empty required fields
    expect(onSubmit).not.toHaveBeenCalled();
  });

  it("calls onCancel on escape", () => {
    const onCancel = vi.fn();
    const { stdin } = render(<CommandForm node={node} onSubmit={() => {}} onCancel={onCancel} />);
    stdin.write(""); // ESC
    expect(onCancel).toHaveBeenCalledTimes(1);
  });
});

// apps/cli/src/tui/command-form.tsx
import { PasswordInput, TextInput } from "@inkjs/ui";
import { Box, Text, useInput } from "ink";
import React, { useState } from "react";
import type { CommandNode } from "./command-tree.js";
import type { FormValues } from "./runner.js";
import { theme } from "./theme.js";

interface Field {
  key: string; // FormValues key: arg:<name> | opt:<long>
  label: string;
  description: string;
  required: boolean;
  kind: "text" | "secret" | "bool";
}

function fieldsOf(node: CommandNode): Field[] {
  const argFields: Field[] = node.args.map((a) => ({
    key: `arg:${a.name}`,
    label: `<${a.name}>`,
    description: a.description,
    required: a.required,
    kind: "text",
  }));
  const optFields: Field[] = node.options.map((o) => ({
    key: `opt:${o.long}`,
    label: o.long,
    description: o.description,
    required: o.required,
    kind: o.isBoolean ? "bool" : o.secret ? "secret" : "text",
  }));
  return [...argFields, ...optFields];
}

export function CommandForm(props: {
  node: CommandNode;
  onSubmit: (values: FormValues) => void;
  onCancel: () => void;
}): React.ReactElement {
  const fields = fieldsOf(props.node);
  const [values, setValues] = useState<FormValues>(() => {
    const initial: FormValues = {};
    for (const f of fields) if (f.kind === "bool") initial[f.key] = false;
    return initial;
  });
  const [active, setActive] = useState(0);
  const [error, setError] = useState<string | null>(null);

  const missing = (): Field | undefined =>
    fields.find((f) => f.required && f.kind !== "bool" && !String(values[f.key] ?? "").trim());

  const trySubmit = () => {
    const m = missing();
    if (m) {
      setError(`${m.label} is required`);
      return;
    }
    props.onSubmit(values);
  };

  useInput((input, key) => {
    if (key.escape) return props.onCancel();
    if (key.downArrow || key.tab) setActive((i) => Math.min(i + 1, fields.length - 1));
    else if (key.upArrow) setActive((i) => Math.max(i - 1, 0));
    else if (key.return) {
      const f = fields[active];
      if (f?.kind === "bool") setValues((v) => ({ ...v, [f.key]: !v[f.key] }));
      else if (active === fields.length - 1) trySubmit();
      else setActive((i) => Math.min(i + 1, fields.length - 1));
    } else if (input === " ") {
      const f = fields[active];
      if (f?.kind === "bool") setValues((v) => ({ ...v, [f.key]: !v[f.key] }));
    }
  });

  const setVal = (key: string, val: string) => setValues((v) => ({ ...v, [key]: val }));

  return (
    <Box flexDirection="column" paddingX={1}>
      <Text>
        <Text color={theme.violet} bold>
          {props.node.path.join(" › ")}
        </Text>
      </Text>
      <Text dimColor>{props.node.description}</Text>
      <Box flexDirection="column" marginTop={1}>
        {fields.map((f, i) => {
          const focused = i === active;
          return (
            <Box key={f.key} flexDirection="column" marginBottom={1}>
              <Text>
                <Text color={focused ? theme.cyan : undefined}>{focused ? `${theme.pointer} ` : "  "}</Text>
                <Text bold={focused}>{f.label}</Text>
                {f.required ? <Text color={theme.violet}> (required)</Text> : null}
                {f.description ? <Text dimColor>{`  ${f.description}`}</Text> : null}
              </Text>
              <Box marginLeft={2}>
                {f.kind === "bool" ? (
                  <Text color={values[f.key] ? theme.cyan : undefined}>
                    {values[f.key] ? "[x] on" : "[ ] off"} {focused ? "(space toggles)" : ""}
                  </Text>
                ) : f.kind === "secret" ? (
                  <PasswordInput isDisabled={!focused} placeholder="•••" onChange={(val) => setVal(f.key, val)} />
                ) : (
                  <TextInput isDisabled={!focused} placeholder="…" onChange={(val) => setVal(f.key, val)} />
                )}
              </Box>
            </Box>
          );
        })}
      </Box>
      {error ? <Text color="red">{error}</Text> : null}
      <Text dimColor>↑/↓ field · space toggles · ↵ next/submit · esc cancel</Text>
    </Box>
  );
}

git -C ../oxagen-cli-dev add apps/cli/src/tui/command-form.tsx apps/cli/src/tui/__tests__/command-form.test.tsx apps/cli/package.json ../oxagen-cli-dev/pnpm-lock.yaml
git -C ../oxagen-cli-dev commit -m "feat(cli): generic interactive argument form with secret masking + validation"

// apps/cli/src/tui/__tests__/app.test.tsx
import { describe, it, expect } from "vitest";
import { render } from "ink-testing-library";
import React from "react";
import { Command } from "commander";
import { App } from "../app.js";

function program(): Command {
  const p = new Command("oxagen").description("Oxagen developer CLI");
  const auth = p.command("auth").description("Authentication");
  auth.command("login").description("Authenticate").option("--email <e>", "Email").action(() => {});
  auth.command("logout").description("Sign out").action(() => {});
  p.command("chat").description("Chat & messaging");
  return p;
}

const DOWN = "";
const ENTER = "\r";
const ESC = "";

describe("App", () => {
  it("renders banner + top-level groups", () => {
    const { lastFrame } = render(<App program={program()} version="0.4.0" />);
    const frame = lastFrame() ?? "";
    expect(frame.toLowerCase()).toContain("oxagen");
    expect(frame).toContain("auth");
    expect(frame).toContain("chat");
  });

  it("drills into a group and back out", () => {
    const { lastFrame, stdin } = render(<App program={program()} version="0.4.0" />);
    stdin.write(ENTER); // enter "auth" (first item)
    expect(lastFrame()).toContain("login");
    expect(lastFrame()).toContain("logout");
    stdin.write(ESC); // back to groups
    expect(lastFrame()).toContain("chat");
  });

  it("filters the current list as you type", () => {
    const { lastFrame, stdin } = render(<App program={program()} version="0.4.0" />);
    stdin.write("ch");
    const frame = lastFrame() ?? "";
    expect(frame).toContain("chat");
    expect(frame).not.toContain("auth");
  });
});

// apps/cli/src/tui/app.tsx
import type { Command } from "commander";
import { Box, Text, useApp, useInput, render } from "ink";
import React, { useMemo, useState } from "react";
import { Banner } from "./banner.js";
import { CommandForm } from "./command-form.js";
import { buildCommandTree, type CommandNode } from "./command-tree.js";
import { assembleArgv, runCommand, type FormValues } from "./runner.js";
import { theme } from "./theme.js";

type Screen =
  | { kind: "list"; node: CommandNode }
  | { kind: "form"; node: CommandNode }
  | { kind: "result"; node: CommandNode; code: number };

export function App(props: { program: Command; version: string; onExit?: () => void }): React.ReactElement {
  const root = useMemo(() => buildCommandTree(props.program), [props.program]);
  const { exit } = useApp();
  const [stack, setStack] = useState<Screen[]>([{ kind: "list", node: root }]);
  const [cursor, setCursor] = useState(0);
  const [filter, setFilter] = useState("");
  const screen = stack[stack.length - 1];

  const quit = () => {
    props.onExit?.();
    exit();
  };
  const pop = () => {
    if (stack.length === 1) return quit();
    setStack((s) => s.slice(0, -1));
    setCursor(0);
    setFilter("");
  };
  const push = (s: Screen) => {
    setStack((prev) => [...prev, s]);
    setCursor(0);
    setFilter("");
  };

  const visibleChildren = (node: CommandNode): CommandNode[] =>
    node.children.filter((c) => c.name.toLowerCase().includes(filter.toLowerCase()));

  useInput((input, key) => {
    if (screen.kind !== "list") return; // form/result handle their own input
    if (key.escape) return pop();
    if (input === "q" && filter === "") return quit();

    const items = visibleChildren(screen.node);
    if (key.downArrow) setCursor((c) => Math.min(c + 1, Math.max(items.length - 1, 0)));
    else if (key.upArrow) setCursor((c) => Math.max(c - 1, 0));
    else if (key.return) {
      const sel = items[cursor];
      if (!sel) return;
      if (sel.runnable) push({ kind: "form", node: sel });
      else push({ kind: "list", node: sel });
    } else if (key.backspace || key.delete) setFilter((f) => f.slice(0, -1));
    else if (input && !key.ctrl && !key.meta && input >= " ") setFilter((f) => f + input);
  });

  if (screen.kind === "form") {
    return (
      <CommandForm
        node={screen.node}
        onCancel={pop}
        onSubmit={async (values: FormValues) => {
          const argv = assembleArgv(screen.node, values);
          const { code } = await runCommand(screen.node, argv);
          setStack((s) => [...s.slice(0, -1), { kind: "result", node: screen.node, code }]);
        }}
      />
    );
  }

  if (screen.kind === "result") {
    return (
      <ResultView
        node={screen.node}
        code={screen.code}
        onBack={() => {
          setStack((s) => s.slice(0, -1));
          setCursor(0);
        }}
        onQuit={quit}
      />
    );
  }

  const items = visibleChildren(screen.node);
  const crumb = ["oxagen", ...screen.node.path].join(" › ");

  return (
    <Box flexDirection="column">
      {stack.length === 1 ? <Banner version={props.version} /> : null}
      <Box paddingX={1}>
        <Text color={theme.violet} bold>
          {crumb}
        </Text>
        {filter ? <Text dimColor>{`   /${filter}`}</Text> : null}
      </Box>
      <Box paddingX={1}>
        <Text dimColor>↑/↓ move · ↵ select · esc back · q quit · type to filter</Text>
      </Box>
      <Box flexDirection="column" paddingX={1} marginTop={1}>
        {items.length === 0 ? (
          <Text dimColor>no matches</Text>
        ) : (
          items.map((c, i) => (
            <Text key={c.name} color={i === cursor ? theme.cyan : undefined}>
              {i === cursor ? `${theme.pointer} ` : "  "}
              <Text bold={i === cursor}>{c.name.padEnd(16)}</Text>
              <Text dimColor>{c.description}</Text>
            </Text>
          ))
        )}
      </Box>
    </Box>
  );
}

function ResultView(props: { node: CommandNode; code: number; onBack: () => void; onQuit: () => void }): React.ReactElement {
  useInput((input, key) => {
    if (key.escape || key.return) props.onBack();
    else if (input === "q") props.onQuit();
  });
  return (
    <Box flexDirection="column" paddingX={1}>
      <Text>
        <Text color={theme.violet} bold>
          {props.node.path.join(" › ")}
        </Text>{" "}
        <Text color={props.code === 0 ? "green" : "red"}>
          {props.code === 0 ? "✓ completed" : `✗ exit ${props.code}`}
        </Text>
      </Text>
      <Text dimColor>↵/esc back to menu · q quit</Text>
    </Box>
  );
}

export function launchTui(program: Command, version: string): Promise<void> {
  return new Promise((resolve) => {
    const { waitUntilExit } = render(<App program={program} version={version} onExit={() => {}} />);
    void waitUntilExit().then(() => resolve());
  });
}

git -C ../oxagen-cli-dev add apps/cli/src/tui/app.tsx apps/cli/src/tui/__tests__/app.test.tsx
git -C ../oxagen-cli-dev commit -m "feat(cli): TUI navigation state machine (menu → command → form → result)"

const noCommand = process.argv.slice(2).length === 0;
const wantsTui = noCommand && Boolean(process.stdout.isTTY) && !process.env.OXAGEN_NO_TUI;

if (wantsTui) {
  // Lazy-load Ink so the ~134 non-interactive commands never pay for it.
  const { launchTui } = await import("./tui/app.js");
  await launchTui(program, version);
} else {
  await program.parseAsync(process.argv);
}

async function main(): Promise<void> {
  const noCommand = process.argv.slice(2).length === 0;
  const wantsTui = noCommand && Boolean(process.stdout.isTTY) && !process.env.OXAGEN_NO_TUI;
  if (wantsTui) {
    const { launchTui } = await import("./tui/app.js");
    await launchTui(program, version);
  } else {
    await program.parseAsync(process.argv);
  }
}
void main();

node apps/cli/dist/index.js --help        # prints commander help (unchanged)
node apps/cli/dist/index.js --version      # prints 0.4.0
node apps/cli/dist/index.js auth --help    # prints auth subcommands (unchanged)
node apps/cli/dist/index.js | cat          # non-TTY → help, NOT the TUI
OXAGEN_NO_TUI=1 node apps/cli/dist/index.js # prints help, NOT the TUI

git -C ../oxagen-cli-dev add apps/cli/src/index.tsx
git -C ../oxagen-cli-dev commit -m "feat(cli): launch interactive TUI for bare TTY invocation (OXAGEN_NO_TUI opt-out)"

## Interactive mode

Run `oxagen` with no arguments in a terminal to open the interactive TUI: an
ASCII banner and a keyboard-navigable menu of every command group and command.

- `↑/↓` move · `↵` select · `Esc` back · `q` quit · type to filter
- Selecting a command opens a form for its arguments and flags, then runs it.
- Secret inputs (passwords, tokens) are masked.

Disable it (always print help instead) with `OXAGEN_NO_TUI=1`. Non-interactive
usage — `oxagen <command> …`, pipes, and CI — is unaffected.

Running `oxagen` with no args in a terminal opens an interactive TUI (banner +
menu + argument forms); `OXAGEN_NO_TUI=1` or any subcommand/pipe keeps the
classic non-interactive behavior.

pnpm --filter @oxagen/cli build

git -C ../oxagen-cli-dev add apps/cli/README.md README.md
git -C ../oxagen-cli-dev commit -m "docs(cli): document interactive TUI mode and OXAGEN_NO_TUI"
git -C ../oxagen-cli-dev push origin feat/cli-dev-binary-and-daemon-adr