@pablozaiden/terminatui 0.2.0 → 0.3.0-beta-1

package/examples/tui-app/commands/config/user/get.ts

@@ -1,10 +1,6 @@
-import { 
-    Command, 
-    type AppContext, 
-    type OptionSchema, 
-    type OptionValues,
-    type CommandResult 
-} from "../../../../../src/index.ts";
+import { Command, type CommandResult } from "../../../../../src/core/command";
+import { AppContext } from "../../../../../src/core/context";
+import type { OptionSchema, OptionValues } from "../../../../../src/types/command";
 
 const options = {
     key: {
@@ -31,7 +27,7 @@ export class UserGetCommand extends Command<typeof options> {
         { command: "config user get --key email", description: "Get user email" },
     ];
 
-    override async execute(ctx: AppContext, opts: OptionValues<typeof options>): Promise<CommandResult> {
+    override async execute(opts: OptionValues<typeof options>): Promise<CommandResult> {
         // Simulated user config store
         const userConfig: Record<string, string> = {
             name: "John Doe",
@@ -43,14 +39,14 @@ export class UserGetCommand extends Command<typeof options> {
         const value = userConfig[opts.key];
         
         if (value === undefined) {
-            ctx.logger.warn(`Key "${opts.key}" not found in user configuration`);
+            AppContext.current.logger.warn(`Key "${opts.key}" not found in user configuration`);
             return {
                 success: false,
                 message: `Key "${opts.key}" not found`,
             };
         }
 
-        ctx.logger.info(`Retrieved user.${opts.key} = ${value}`);
+        AppContext.current.logger.info(`Retrieved user.${opts.key} = ${value}`);
         return {
             success: true,
             data: { key: opts.key, value },

package/examples/tui-app/commands/config/user/index.ts

@@ -1,8 +1,4 @@
-import { 
-    Command, 
-    type AppContext,
-    type CommandResult 
-} from "../../../../../src/index.ts";
+import { Command, type CommandResult } from "../../../../../src/core/command.ts";
 import { UserGetCommand } from "./get.ts";
 import { UserSetCommand } from "./set.ts";
 
@@ -17,7 +13,7 @@ export class UserConfigCommand extends Command {
         new UserSetCommand(),
     ];
 
-    override execute(_ctx: AppContext): CommandResult {
+    override execute(): CommandResult {
         console.log("Use 'config user <command>' for user configuration.");
         console.log("Available: get, set");
         return { success: true };

package/examples/tui-app/commands/config/user/set.ts

@@ -1,10 +1,6 @@
-import { 
-    Command, 
-    type AppContext, 
-    type OptionSchema, 
-    type OptionValues,
-    type CommandResult 
-} from "../../../../../src/index.ts";
+import { Command, type CommandResult } from "../../../../../src/core/command";
+import { AppContext } from "../../../../../src/core/context";
+import type { OptionSchema, OptionValues } from "../../../../../src/types/command";
 
 const options = {
     key: {
@@ -40,13 +36,13 @@ export class UserSetCommand extends Command<typeof options> {
         { command: "config user set --key theme --value light", description: "Set theme" },
     ];
 
-    override async execute(ctx: AppContext, opts: OptionValues<typeof options>): Promise<CommandResult> {
-        ctx.logger.info(`Setting user.${opts.key} = "${opts.value}"`);
+    override async execute(opts: OptionValues<typeof options>): Promise<CommandResult> {
+        AppContext.current.logger.info(`Setting user.${opts.key} = "${opts.value}"`);
         
         // Simulate setting the value
         await new Promise(resolve => setTimeout(resolve, 300));
         
-        ctx.logger.info(`Successfully updated user configuration`);
+        AppContext.current.logger.info(`Successfully updated user configuration`);
         return {
             success: true,
             data: { key: opts.key, value: opts.value },

package/examples/tui-app/commands/greet.ts

@@ -1,10 +1,8 @@
-import { 
-    Command, 
-    type AppContext, 
-    type OptionSchema, 
-    type OptionValues,
-    type CommandResult 
-} from "../../../src/index.ts";
+import type { ReactNode } from "react";
+import { Command, type CommandResult } from "../../../src/core/command";
+import { AppContext } from "../../../src/core/context";
+import type { OptionSchema, OptionValues } from "../../../src/types/command";
+import { JsonHighlight } from "../../../src/tui/components/JsonHighlight.tsx";
 
 const greetOptions = {
     name: {
@@ -20,7 +18,7 @@ const greetOptions = {
         type: "boolean",
         description: "Use uppercase",
         alias: "l",
-        default: false,
+        default: true,
         label: "Loud Mode",
         order: 2,
         group: "Options",
@@ -48,16 +46,20 @@ export class GreetCommand extends Command<typeof greetOptions> {
         { command: "greet --name World --loud --times 3", description: "Loud greeting 3 times" },
     ];
 
-    override async execute(ctx: AppContext, opts: OptionValues<typeof greetOptions>): Promise<CommandResult> {
+    override async execute(opts: OptionValues<typeof greetOptions>): Promise<CommandResult> {
         const greeting = this.createGreeting(opts);
-        ctx.logger.info(greeting);
+        AppContext.current.logger.trace(greeting);
         return {
             success: true,
-            data: { greeting, timestamp: new Date().toISOString() },
+            data: { greeting, timestamp: new Date().toISOString(), meta: { loud: opts.loud, times: opts.times } },
             message: greeting,
         };
     }
 
+    override renderResult(result: CommandResult): ReactNode {
+        return JsonHighlight({ value: result.data });
+    }
+
     override getClipboardContent(result: CommandResult): string | undefined {
         const data = result.data as { greeting?: string } | undefined;
         return data?.greeting;

package/examples/tui-app/commands/math.ts

@@ -1,10 +1,6 @@
-import { 
-    Command, 
-    type AppContext, 
-    type OptionSchema, 
-    type OptionValues,
-    type CommandResult 
-} from "../../../src/index.ts";
+import { Command, type CommandResult } from "../../../src/core/command";
+import { AppContext } from "../../../src/core/context";
+import type { OptionSchema, OptionValues } from "../../../src/types/command";
 
 const mathOptions = {
     operation: {
@@ -50,10 +46,10 @@ export class MathCommand extends Command<typeof mathOptions> {
 
     override readonly actionLabel = "Calculate";
 
-    override async execute(ctx: AppContext, opts: OptionValues<typeof mathOptions>): Promise<CommandResult> {
+    override async execute(opts: OptionValues<typeof mathOptions>): Promise<CommandResult> {
         const result = this.calculate(opts);
         if (!result.success) {
-            ctx.logger.error(result.message || "Calculation failed");
+            AppContext.current.logger.error(result.message || "Calculation failed");
         }
         return result;
     }

package/examples/tui-app/commands/status.ts

@@ -1,10 +1,6 @@
-import { 
-    Command, 
-    type AppContext, 
-    type OptionSchema, 
-    type OptionValues,
-    type CommandResult 
-} from "../../../src/index.ts";
+import { Command, type CommandExecutionContext, type CommandResult } from "../../../src/core/command";
+import { AppContext } from "../../../src/core/context";
+import type { OptionSchema, OptionValues } from "../../../src/types/command";
 
 const statusOptions = {
     detailed: {
@@ -26,9 +22,9 @@ export class StatusCommand extends Command<typeof statusOptions> {
     override readonly actionLabel = "Check Status";
     override readonly immediateExecution = true; // No required fields
 
-    override async execute(ctx: AppContext, opts: OptionValues<typeof statusOptions>): Promise<CommandResult> {
-        const result = await this.getStatus(opts);
-        ctx.logger.info(result.message || "Status check complete");
+    override async execute(opts: OptionValues<typeof statusOptions>, execCtx : CommandExecutionContext): Promise<CommandResult> {
+        const result = await this.getStatus(opts, execCtx);
+        AppContext.current.logger.info(result.message || "Status check complete");
         return result;
     }
 
@@ -45,11 +41,24 @@ export class StatusCommand extends Command<typeof statusOptions> {
         ].join("\n");
     }
 
-    private async getStatus(opts: OptionValues<typeof statusOptions>): Promise<CommandResult> {
+    private async getStatus(opts: OptionValues<typeof statusOptions>, execCtx: CommandExecutionContext): Promise<CommandResult> {
         const detailed = opts.detailed as boolean;
         
         // Simulate some async work
-        await new Promise((resolve) => setTimeout(resolve, 500));
+        await new Promise(resolve => {
+            let count = 0;
+            let interval = setInterval(() => {
+                count++;
+                AppContext.current.logger.info(`Applying configuration... (${count}/5)`);
+                if (count >= 5 || execCtx.signal.aborted) {
+                    if (count < 5) {
+                        AppContext.current.logger.warn("Status check aborted");
+                    }
+                    clearInterval(interval);
+                    resolve(undefined);
+                }
+            }, 1000);
+        });
 
         const memMB = Math.round(process.memoryUsage().heapUsed / 1024 / 1024);
         const uptimeSec = Math.round(process.uptime());

package/examples/tui-app/index.ts

@@ -12,8 +12,11 @@
  *   bun examples/tui-app/index.ts greet --name "World" --loud
  */
 
-import { TuiApplication } from "../../src/index.ts";
-import { GreetCommand, MathCommand, StatusCommand, ConfigCommand } from "./commands/index.ts";
+import { TuiApplication } from "../../src/tui/TuiApplication.tsx";
+import { ConfigCommand } from "./commands/config/index.ts";
+import { GreetCommand } from "./commands/greet.ts";
+import { MathCommand } from "./commands/math.ts";
+import { StatusCommand } from "./commands/status.ts";
 
 class ExampleApp extends TuiApplication {
     constructor() {
@@ -32,4 +35,4 @@ class ExampleApp extends TuiApplication {
 }
 
 // Run the app
-await new ExampleApp().run(Bun.argv.slice(2));
+await new ExampleApp().run();

package/guides/01-hello-world.md

@@ -28,7 +28,12 @@ bun add @pablozaiden/terminatui
 Create `src/greet.ts`:
 
 ```typescript
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import {
+  Command,
+  type OptionSchema,
+  type CommandResult,
+  type CommandExecutionContext,
+} from "@pablozaiden/terminatui";
 
 const options = {
   name: {
@@ -43,7 +48,7 @@ export class GreetCommand extends Command<typeof options> {
   readonly description = "Greet someone";
   readonly options = options;
 
-  execute(_ctx: AppContext, config: { name: string }): CommandResult {
+  execute(config: { name: string }, _execCtx: CommandExecutionContext): CommandResult {
     console.log(`Hello, ${config.name}!`);
     return { success: true };
   }

package/guides/02-adding-options.md

@@ -19,7 +19,7 @@ myapp greet --name Alice --loud
 Update `src/greet.ts`:
 
 ```typescript
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
 
 const options = {
   name: {
@@ -40,7 +40,7 @@ export class GreetCommand extends Command<typeof options> {
   readonly description = "Greet someone";
   readonly options = options;
 
-  execute(_ctx: AppContext, config: { name: string; loud: boolean }): CommandResult {
+  execute(config: { name: string; loud: boolean }): CommandResult {
     const message = `Hello, ${config.name}!`;
     console.log(config.loud ? message.toUpperCase() : message);
     return { success: true };

package/guides/03-multiple-commands.md

@@ -19,8 +19,7 @@ fileutil count --dir ./src --ext .ts
 Create `src/commands/list.ts`:
 
 ```typescript
-import { readdirSync } from "fs";
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
 
 const options = {
   dir: {
@@ -36,9 +35,9 @@ export class ListCommand extends Command<typeof options> {
   readonly description = "List files in a directory";
   readonly options = options;
 
-  execute(_ctx: AppContext, config: { dir: string }): CommandResult {
+  async execute(config: { dir: string }): Promise<CommandResult> {
     try {
-      const files = readdirSync(config.dir);
+      const files = await Array.fromAsync(new Bun.Glob("*").scan({ cwd: config.dir, onlyFiles: false }));
       console.log(`Files in ${config.dir}:`);
       files.forEach((file) => console.log(`  ${file}`));
       return { success: true, message: `Found ${files.length} files` };
@@ -54,8 +53,7 @@ export class ListCommand extends Command<typeof options> {
 Create `src/commands/count.ts`:
 
 ```typescript
-import { readdirSync } from "fs";
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
 
 const options = {
   dir: {
@@ -76,9 +74,9 @@ export class CountCommand extends Command<typeof options> {
   readonly description = "Count files in a directory";
   readonly options = options;
 
-  execute(_ctx: AppContext, config: { dir: string; ext?: string }): CommandResult {
+  async execute(config: { dir: string; ext?: string }): Promise<CommandResult> {
     try {
-      let files = readdirSync(config.dir);
+      let files = await Array.fromAsync(new Bun.Glob("*").scan({ cwd: config.dir, onlyFiles: false }));
       
       if (config.ext) {
         files = files.filter((f) => f.endsWith(config.ext!));

package/guides/04-subcommands.md

@@ -17,7 +17,7 @@ dbctl db status
 Create `src/commands/db/migrate.ts`:
 
 ```typescript
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
 
 const options = {
   target: {
@@ -37,7 +37,7 @@ export class MigrateCommand extends Command<typeof options> {
   readonly description = "Run database migrations";
   readonly options = options;
 
-  execute(ctx: AppContext, config: { target: string; dry: boolean }): CommandResult {
+  execute(config: { target: string; dry: boolean }): CommandResult {
     ctx.logger.info(`Migrating to: ${config.target}`);
     
     if (config.dry) {
@@ -55,7 +55,7 @@ export class MigrateCommand extends Command<typeof options> {
 Create `src/commands/db/seed.ts`:
 
 ```typescript
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
 
 const options = {
   file: {
@@ -71,7 +71,7 @@ export class SeedCommand extends Command<typeof options> {
   readonly description = "Seed the database with data";
   readonly options = options;
 
-  execute(ctx: AppContext, config: { file: string }): CommandResult {
+  execute(config: { file: string }): CommandResult {
     ctx.logger.info(`Seeding from: ${config.file}`);
     console.log(`Loading seed data from ${config.file}...`);
     console.log("Database seeded successfully!");
@@ -83,14 +83,14 @@ export class SeedCommand extends Command<typeof options> {
 Create `src/commands/db/status.ts`:
 
 ```typescript
-import { Command, type AppContext, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type CommandResult } from "@pablozaiden/terminatui";
 
 export class StatusCommand extends Command {
   readonly name = "status";
   readonly description = "Show database status";
   readonly options = {};
 
-  execute(_ctx: AppContext): CommandResult {
+  execute(): CommandResult {
     console.log("Database Status:");
     console.log("  Connected: Yes");
     console.log("  Version: 1.2.3");
@@ -105,7 +105,7 @@ export class StatusCommand extends Command {
 Create `src/commands/db/index.ts`:
 
 ```typescript
-import { Command, type AppContext, type CommandResult } from "@pablozaiden/terminatui";
+import { Command, type CommandResult } from "@pablozaiden/terminatui";
 import { MigrateCommand } from "./migrate";
 import { SeedCommand } from "./seed";
 import { StatusCommand } from "./status";
@@ -123,7 +123,7 @@ export class DbCommand extends Command {
   ];
 
   // Parent command can have its own execute (optional)
-  execute(_ctx: AppContext): CommandResult {
+  execute(): CommandResult {
     console.log("Use 'dbctl db <command>' for database operations.");
     console.log("Available: migrate, seed, status");
     return { success: true };

package/guides/05-interactive-tui.md

@@ -1,4 +1,4 @@
-# Guide 5: Interactive TUI (Normal)
+# Guide 5: Interactive TUI
 
 Add an auto-generated Terminal User Interface to your CLI.
 
@@ -8,20 +8,34 @@ A task runner with both CLI and interactive TUI modes:
 
 ```bash
 # CLI mode
-taskr run --task build --env production
+taskr --mode cli run --task build --env production
 
-# TUI mode (interactive)
-taskr
+# TUI mode
+# (if your app's default mode is a TUI mode)
+ taskr
+
+# Force TUI mode
+ taskr --mode opentui
+ # or
+ taskr --mode ink
+
+# Force CLI mode
+ taskr --mode cli
 ```
 
-When you run without arguments, an interactive form appears!
+Only the selected mode (`--mode`) or your app's default mode controls whether the app runs in CLI or TUI.
 
 ## Step 1: Create the Command with TUI Metadata
 
 Create `src/commands/run.ts`:
 
 ```typescript
-import { Command, type AppContext, type OptionSchema, type CommandResult } from "@pablozaiden/terminatui";
+import {
+  Command,
+  type OptionSchema,
+  type CommandResult,
+  type CommandExecutionContext,
+} from "@pablozaiden/terminatui";
 
 const options = {
   task: {
@@ -70,11 +84,9 @@ export class RunCommand extends Command<typeof options, RunConfig> {
   override readonly displayName = "Run Task";
   override readonly actionLabel = "Start Task";
 
-  async execute(ctx: AppContext, config: RunConfig): Promise<CommandResult> {
-    ctx.logger.info(`Starting task: ${config.task}`);
-    
+  async execute(config: RunConfig, _execCtx: CommandExecutionContext): Promise<CommandResult> {
     if (config.verbose) {
-      ctx.logger.debug(`Environment: ${config.env}`);
+      console.debug(`Environment: ${config.env}`);
     }
 
     // Simulate task execution
@@ -82,10 +94,10 @@ export class RunCommand extends Command<typeof options, RunConfig> {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     console.log("Task completed!");
 
-    return { 
-      success: true, 
+    return {
+      success: true,
       data: { task: config.task, env: config.env },
-      message: `Task ${config.task} completed successfully`
+      message: `Task ${config.task} completed successfully`,
     };
   }
 }
@@ -100,13 +112,16 @@ import { TuiApplication } from "@pablozaiden/terminatui";
 import { RunCommand } from "./commands/run";
 
 class TaskRunnerApp extends TuiApplication {
+  // Default is CLI; each app decides.
+  protected override defaultMode = "opentui" as const;
+
   constructor() {
     super({
       name: "taskr",
-      displayName: "🚀 Task Runner",  // Shown in TUI header
+      displayName: "🚀 Task Runner", // Shown in TUI header
       version: "1.0.0",
       commands: [new RunCommand()],
-      enableTui: true,  // Default: true
+      enableTui: true, // Default: true
     });
   }
 }
@@ -116,26 +131,26 @@ await new TaskRunnerApp().run();
 
 ## Step 3: Test Both Modes
 
-**CLI Mode** (with arguments):
+**CLI Mode** (forced):
 
 ```bash
-bun src/index.ts run --task build --env production
+bun src/index.ts --mode cli run --task build --env production
 # Running build in production...
 # Task completed!
 ```
 
-**TUI Mode** (no arguments):
+**TUI Mode** (forced):
 
 ```bash
-bun src/index.ts
+bun src/index.ts --mode opentui
 ```
 
 This opens an interactive interface:
 - Use ↑/↓ to navigate fields
 - Press Enter to edit a field
+- Navigate to "CLI Command" button and press Enter to see the CLI command
 - Press Enter on "Start Task" to run
 - Press Esc to go back
-- Press C to see the CLI command
 
 ## TUI Metadata Reference
 
@@ -145,13 +160,13 @@ Add these properties to your options for TUI customization:
 {
   type: "string",
   description: "...",
-  
+
   // TUI-specific
-  label: "Display Label",    // Custom field label
-  order: 1,                  // Field sort order
-  group: "Settings",         // Group heading
-  placeholder: "Enter...",   // Placeholder text
-  tuiHidden: false,          // Hide from TUI (still in CLI)
+  label: "Display Label", // Custom field label
+  order: 1, // Field sort order
+  group: "Settings", // Group heading
+  placeholder: "Enter...", // Placeholder text
+  tuiHidden: false, // Hide from TUI (still in CLI)
 }
 ```
 
@@ -161,10 +176,10 @@ Add these properties to your options for TUI customization:
 class MyCommand extends Command {
   // Display name in command selector
   override readonly displayName = "My Command";
-  
+
   // Button text (default: "Run")
   override readonly actionLabel = "Execute";
-  
+
   // Skip config screen, run immediately
   override readonly immediateExecution = false;
 }
@@ -175,9 +190,8 @@ class MyCommand extends Command {
 | Key | Action |
 |-----|--------|
 | ↑/↓ | Navigate fields |
-| Enter | Edit field / Run |
+| Enter | Edit field / Press button / Run |
 | Tab | Cycle focus |
-| C | Show CLI command |
 | L | Toggle logs |
 | Ctrl+Y | Copy to clipboard |
 | Esc | Back / Cancel |
@@ -185,6 +199,7 @@ class MyCommand extends Command {
 ## What You Learned
 
 - Use `TuiApplication` instead of `Application`
+- Use `--mode` (or app default mode) to control CLI vs TUI
 - Add TUI metadata to options (label, order, group)
 - Customize with `displayName` and `actionLabel`
 - Both CLI and TUI work with the same command

package/guides/06-config-validation.md

@@ -16,11 +16,9 @@ Create `src/commands/deploy.ts`:
 
 ```typescript
 import path from "node:path";
-import { existsSync } from "node:fs";
 import { 
   Command, 
   ConfigValidationError,
-  type AppContext, 
   type OptionSchema, 
   type OptionValues,
   type CommandResult 
@@ -84,10 +82,7 @@ export class DeployCommand extends Command<typeof options, DeployConfig> {
    * Transform and validate raw options into DeployConfig.
    * Runs before execute() - errors here show helpful messages.
    */
-  override buildConfig(
-    _ctx: AppContext, 
-    opts: OptionValues<typeof options>
-  ): DeployConfig {
+  override async buildConfig(opts: OptionValues<typeof options>): Promise<DeployConfig> {
     // 1. Validate app path exists
     const appRaw = opts["app"] as string | undefined;
     if (!appRaw) {
@@ -98,7 +93,7 @@ export class DeployCommand extends Command<typeof options, DeployConfig> {
     }
     
     const appPath = path.resolve(appRaw);
-    if (!existsSync(appPath)) {
+    if (!(await Bun.file(appPath).exists())) {
       throw new ConfigValidationError(
         `Application path does not exist: ${appPath}`,
         "app"
@@ -157,11 +152,8 @@ export class DeployCommand extends Command<typeof options, DeployConfig> {
    * Execute with fully validated DeployConfig.
    * No need to validate here - buildConfig already did it!
    */
-  async execute(ctx: AppContext, config: DeployConfig): Promise<CommandResult> {
-    ctx.logger.info(`Deploying ${config.appName} to ${config.environment}`);
-    ctx.logger.debug(`Path: ${config.appPath}`);
-    ctx.logger.debug(`Replicas: ${config.replicas}`);
-    ctx.logger.debug(`URL: ${config.envConfig.url}`);
+  async execute(config: DeployConfig): Promise<CommandResult> {
+    console.log(`Deploying ${config.appName} to ${config.environment}`);
 
     if (config.dryRun) {
       console.log("DRY RUN - Would deploy:");