letmecook 0.0.13 → 0.0.14

package/src/ui/common/command-runner.ts

@@ -0,0 +1,249 @@
+import { type CliRenderer, TextRenderable } from "@opentui/core";
+import { createBaseLayout, clearLayout } from "../renderer";
+import { readProcessOutputWithBuffer } from "../../utils/stream";
+
+export interface CommandTask {
+  label: string; // "Cloning microsoft/playwright"
+  command: string[]; // ["git", "clone", "https://..."]
+  cwd?: string; // Working directory
+}
+
+export interface CommandRunnerOptions {
+  title: string; // "Setting up session"
+  tasks: CommandTask[]; // Array of commands to run
+  showOutput?: boolean; // Show last N lines (default: true)
+  outputLines?: number; // How many lines to show (default: 5)
+}
+
+export interface CommandResult {
+  task: CommandTask;
+  success: boolean;
+  exitCode: number;
+  output: string[];
+  error?: string;
+}
+
+let taskTexts: TextRenderable[] = [];
+let currentCommandText: TextRenderable | null = null;
+let outputText: TextRenderable | null = null;
+let tasksLabel: TextRenderable | null = null;
+
+function getStatusIcon(status: "pending" | "running" | "done" | "error"): {
+  icon: string;
+  color: string;
+} {
+  switch (status) {
+    case "done":
+      return { icon: "[✓]", color: "#22c55e" };
+    case "running":
+      return { icon: "[~]", color: "#fbbf24" };
+    case "error":
+      return { icon: "[✗]", color: "#ef4444" };
+    case "pending":
+    default:
+      return { icon: "[ ]", color: "#94a3b8" };
+  }
+}
+
+export function showCommandRunner(
+  renderer: CliRenderer,
+  options: CommandRunnerOptions,
+): {
+  taskStatuses: Array<{ task: CommandTask; status: "pending" | "running" | "done" | "error" }>;
+} {
+  clearLayout(renderer);
+  taskTexts = [];
+
+  const { title, tasks, showOutput = true } = options;
+
+  const { content } = createBaseLayout(renderer, title);
+
+  tasksLabel = new TextRenderable(renderer, {
+    id: "tasks-label",
+    content: "Tasks",
+    fg: "#e2e8f0",
+    marginTop: 1,
+    marginBottom: 1,
+  });
+  content.add(tasksLabel);
+
+  const taskStatuses = tasks.map((task) => ({ task, status: "pending" as const }));
+
+  tasks.forEach((task, i) => {
+    const statusIcon = getStatusIcon("pending");
+    const taskText = new TextRenderable(renderer, {
+      id: `task-${i}`,
+      content: `${statusIcon.icon} ${task.label}`,
+      fg: statusIcon.color,
+    });
+    content.add(taskText);
+    taskTexts.push(taskText);
+  });
+
+  if (showOutput) {
+    currentCommandText = new TextRenderable(renderer, {
+      id: "current-command",
+      content: "",
+      fg: "#64748b",
+      marginTop: 2,
+    });
+    content.add(currentCommandText);
+
+    const separator = new TextRenderable(renderer, {
+      id: "output-separator",
+      content: "──────────────────────────────────────",
+      fg: "#475569",
+      marginTop: 0,
+    });
+    content.add(separator);
+
+    outputText = new TextRenderable(renderer, {
+      id: "command-output",
+      content: "",
+      fg: "#64748b",
+      marginTop: 0,
+    });
+    content.add(outputText);
+  }
+
+  return { taskStatuses };
+}
+
+export function updateCommandRunner(
+  renderer: CliRenderer,
+  taskStatuses: Array<{ task: CommandTask; status: "pending" | "running" | "done" | "error" }>,
+  currentTaskIndex?: number,
+  outputLines?: string[],
+): void {
+  taskStatuses.forEach((item, i) => {
+    const text = taskTexts[i];
+    if (text) {
+      const statusIcon = getStatusIcon(item.status);
+      text.content = `${statusIcon.icon} ${item.task.label}`;
+      text.fg = statusIcon.color;
+    }
+  });
+
+  if (currentCommandText && currentTaskIndex !== undefined && currentTaskIndex >= 0) {
+    const currentTask = taskStatuses[currentTaskIndex];
+    if (currentTask) {
+      const commandStr = currentTask.task.command.join(" ");
+      currentCommandText.content = `Running: ${commandStr}`;
+      currentCommandText.fg = "#38bdf8";
+    }
+  }
+
+  if (outputText && outputLines && outputLines.length > 0) {
+    outputText.content = outputLines.map((line) => `  ${line}`).join("\n");
+  } else if (outputText) {
+    outputText.content = "";
+  }
+
+  renderer.requestRender();
+}
+
+export function hideCommandRunner(renderer: CliRenderer): void {
+  clearLayout(renderer);
+  taskTexts = [];
+  currentCommandText = null;
+  outputText = null;
+  tasksLabel = null;
+}
+
+export async function runCommands(
+  renderer: CliRenderer,
+  options: CommandRunnerOptions,
+): Promise<CommandResult[]> {
+  const { tasks, showOutput = true, outputLines = 5 } = options;
+
+  const { taskStatuses } = showCommandRunner(renderer, options);
+  const results: CommandResult[] = [];
+
+  for (let i = 0; i < tasks.length; i++) {
+    const task = tasks[i];
+    const taskState = taskStatuses[i];
+
+    if (!task || !taskState) continue;
+
+    // Update status to running
+    taskState.status = "running";
+    updateCommandRunner(renderer, taskStatuses, i, []);
+
+    try {
+      const proc = Bun.spawn(task.command, {
+        cwd: task.cwd,
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+
+      let outputBuffer: string[] = [];
+
+      const { success, output, fullOutput } = await readProcessOutputWithBuffer(proc, {
+        maxBufferLines: outputLines,
+        onBufferUpdate: (buffer) => {
+          outputBuffer = buffer;
+          if (showOutput) {
+            updateCommandRunner(renderer, taskStatuses, i, buffer);
+          }
+        },
+      });
+
+      const exitCode = await proc.exited;
+
+      if (success && exitCode === 0) {
+        taskState.status = "done";
+        results.push({
+          task,
+          success: true,
+          exitCode: 0,
+          output: outputBuffer.length > 0 ? outputBuffer : output,
+        });
+      } else {
+        taskState.status = "error";
+        const errorMsg = fullOutput.trim() || `Command exited with code ${exitCode}`;
+        results.push({
+          task,
+          success: false,
+          exitCode,
+          output: outputBuffer.length > 0 ? outputBuffer : output,
+          error: errorMsg,
+        });
+      }
+
+      // Final update with last output
+      if (showOutput) {
+        updateCommandRunner(
+          renderer,
+          taskStatuses,
+          i,
+          outputBuffer.length > 0 ? outputBuffer : output,
+        );
+      } else {
+        updateCommandRunner(renderer, taskStatuses, i);
+      }
+    } catch (error) {
+      taskState.status = "error";
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      results.push({
+        task,
+        success: false,
+        exitCode: 1,
+        output: [],
+        error: errorMsg,
+      });
+
+      if (showOutput) {
+        updateCommandRunner(renderer, taskStatuses, i, [errorMsg]);
+      } else {
+        updateCommandRunner(renderer, taskStatuses, i);
+      }
+    }
+  }
+
+  // Clear current command indicator when done
+  if (currentCommandText) {
+    currentCommandText.content = "";
+  }
+
+  return results;
+}

package/src/ui/common/footer.ts

@@ -0,0 +1,105 @@
+import { type CliRenderer, TextRenderable, type Renderable } from "@opentui/core";
+
+export interface FooterActions {
+  navigate?: boolean; // Show ↑↓ Navigate
+  select?: boolean; // Show Enter Select
+  back?: boolean; // Show Esc Back
+  new?: boolean; // Show n New
+  delete?: boolean; // Show d Delete
+  quit?: boolean; // Show q Quit
+  custom?: string[]; // Custom action hints like ["Tab Switch", "s Save"]
+}
+
+let footerSeparator: TextRenderable | null = null;
+let footerText: TextRenderable | null = null;
+let footerParent: Renderable | null = null;
+
+export function showFooter(
+  renderer: CliRenderer,
+  parent: Renderable,
+  actions: FooterActions = {},
+): void {
+  const {
+    navigate = true,
+    select = true,
+    back = true,
+    new: showNew = false,
+    delete: showDelete = false,
+    quit = false,
+    custom = [],
+  } = actions;
+
+  const parts: string[] = [];
+
+  if (navigate) {
+    parts.push("↑↓ Navigate");
+  }
+  if (select) {
+    parts.push("Enter Select");
+  }
+  if (back) {
+    parts.push("Esc Back");
+  }
+  if (showNew) {
+    parts.push("n New");
+  }
+  if (showDelete) {
+    parts.push("d Delete");
+  }
+  if (quit) {
+    parts.push("q Quit");
+  }
+  if (custom.length > 0) {
+    parts.push(...custom);
+  }
+
+  const footerContent = parts.join("  ");
+
+  // Hide any existing footer first
+  hideFooter(renderer);
+
+  // Create separator line
+  const separator = new TextRenderable(renderer, {
+    id: "footer-separator",
+    content: "─".repeat(66), // Approximate width for separator line
+    fg: "#475569",
+    marginTop: 1,
+  });
+  parent.add(separator);
+
+  // Create footer text
+  footerText = new TextRenderable(renderer, {
+    id: "footer-text",
+    content: footerContent,
+    fg: "#64748b",
+  });
+  parent.add(footerText);
+
+  footerSeparator = separator;
+  footerParent = parent;
+}
+
+export function updateFooter(
+  renderer: CliRenderer,
+  parent: Renderable,
+  actions: FooterActions,
+): void {
+  hideFooter(renderer);
+  showFooter(renderer, parent, actions);
+}
+
+export function hideFooter(_renderer: CliRenderer): void {
+  if (footerSeparator) {
+    if (footerParent) {
+      footerParent.remove("footer-separator");
+    }
+    footerSeparator = null;
+  }
+  if (footerText) {
+    if (footerParent) {
+      footerParent.remove("footer-text");
+    }
+    footerText = null;
+  }
+  footerParent = null;
+}

package/src/ui/common/keyboard.ts

@@ -0,0 +1,95 @@
+import type { KeyEvent } from "@opentui/core";
+
+/**
+ * Unified keyboard mapping constants for consistent navigation across the TUI.
+ *
+ * Design principles:
+ * - Arrow keys everywhere for navigation
+ * - Enter always confirms/selects
+ * - Esc always goes back/cancels
+ * - Tab moves between fields/sections
+ */
+
+export const KEYBOARD = {
+  // Navigation
+  UP: "up",
+  DOWN: "down",
+  LEFT: "left",
+  RIGHT: "right",
+  TAB: "tab",
+
+  // Actions
+  ENTER: "enter",
+  RETURN: "return",
+  ESCAPE: "escape",
+
+  // Global shortcuts (only on list screens)
+  NEW: "n",
+  DELETE: "d",
+  QUIT: "q",
+
+  // Text input shortcuts
+  BACKSPACE: "backspace",
+  CTRL_D: "d", // Ctrl+D (handled via ctrl modifier)
+} as const;
+
+/**
+ * Check if a key event matches a specific key name
+ */
+export function isKey(key: KeyEvent, name: string): boolean {
+  return key.name === name;
+}
+
+/**
+ * Check if a key event matches Enter/Return
+ */
+export function isEnter(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.ENTER || key.name === KEYBOARD.RETURN;
+}
+
+/**
+ * Check if a key event matches Escape
+ */
+export function isEscape(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.ESCAPE;
+}
+
+/**
+ * Check if a key event matches Tab
+ */
+export function isTab(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.TAB;
+}
+
+/**
+ * Check if a key event matches arrow up
+ */
+export function isArrowUp(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.UP;
+}
+
+/**
+ * Check if a key event matches arrow down
+ */
+export function isArrowDown(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.DOWN;
+}
+
+/**
+ * Check if a key event is Ctrl+D
+ */
+export function isCtrlD(key: KeyEvent): boolean {
+  return key.name === KEYBOARD.CTRL_D && key.ctrl === true;
+}
+
+/**
+ * Check if a key event is a navigation key (arrows)
+ */
+export function isNavigation(key: KeyEvent): boolean {
+  return (
+    key.name === KEYBOARD.UP ||
+    key.name === KEYBOARD.DOWN ||
+    key.name === KEYBOARD.LEFT ||
+    key.name === KEYBOARD.RIGHT
+  );
+}

package/src/ui/confirm-delete.ts

@@ -7,6 +7,8 @@ import {
 } from "@opentui/core";
 import { createBaseLayout, clearLayout } from "./renderer";
 import type { Session } from "../types";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape } from "./common/keyboard";
 
 export type DeleteConfirmChoice = "confirm" | "cancel";
 
@@ -60,14 +62,6 @@ export function showDeleteConfirm(
     });
     content.add(select);
 
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Select   [Esc] Cancel",
-      fg: "#64748b",
-      marginTop: 1,
-    });
-    content.add(instructions);
-
     select.focus();
 
     const handleSelect = (_index: number, option: { value: string }) => {
@@ -76,7 +70,7 @@ export function showDeleteConfirm(
     };
 
     const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "escape") {
+      if (isEscape(key)) {
         cleanup();
         resolve("cancel");
       }
@@ -86,9 +80,16 @@ export function showDeleteConfirm(
       select.off(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
       renderer.keyInput.off("keypress", handleKeypress);
       select.blur();
+      hideFooter(renderer);
       clearLayout(renderer);
     };
 
+    showFooter(renderer, content, {
+      navigate: true,
+      select: true,
+      back: true,
+    });
+
     select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
     renderer.keyInput.on("keypress", handleKeypress);
   });

package/src/ui/conflict.ts

@@ -7,6 +7,8 @@ import {
 } from "@opentui/core";
 import { createBaseLayout, clearLayout } from "./renderer";
 import type { Session, ConflictChoice } from "../types";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape } from "./common/keyboard";
 
 function formatTimeAgo(date: string): string {
   const now = new Date();
@@ -102,7 +104,7 @@ export function showConflictPrompt(
     };
 
     const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "escape") {
+      if (isEscape(key)) {
         cleanup();
         resolve("cancel");
       }
@@ -112,9 +114,16 @@ export function showConflictPrompt(
       select.off(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
       renderer.keyInput.off("keypress", handleKeypress);
       select.blur();
+      hideFooter(renderer);
       clearLayout(renderer);
     };
 
+    showFooter(renderer, content, {
+      navigate: true,
+      select: true,
+      back: true,
+    });
+
     select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
     renderer.keyInput.on("keypress", handleKeypress);
   });