letmecook 0.0.13 → 0.0.14

package/src/ui/exit.ts

@@ -1,7 +1,15 @@
-import { type CliRenderer, TextRenderable, type KeyEvent } from "@opentui/core";
+import {
+  type CliRenderer,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+  type KeyEvent,
+} from "@opentui/core";
 import { createBaseLayout, clearLayout } from "./renderer";
 import type { Session, ExitChoice, RepoSpec } from "../types";
 import { sessionHasUncommittedChanges } from "../git";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape } from "./common/keyboard";
 
 export function showExitPrompt(renderer: CliRenderer, session: Session): Promise<ExitChoice> {
   return new Promise((resolve) => {
@@ -23,47 +31,59 @@ export function showExitPrompt(renderer: CliRenderer, session: Session): Promise
       id: "question",
       content: "What would you like to do?",
       fg: "#e2e8f0",
+      marginBottom: 1,
     });
     content.add(question);
 
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Resume   [e] Edit session   [d] Delete session   [Esc] Back to home",
-      fg: "#64748b",
+    const select = new SelectRenderable(renderer, {
+      id: "exit-select",
+      width: 40,
+      height: 4,
+      options: [
+        { name: "Resume session", description: "", value: "resume" },
+        { name: "Edit session", description: "", value: "edit" },
+        { name: "Delete session", description: "", value: "delete" },
+        { name: "Back to home", description: "", value: "home" },
+      ],
+      showDescription: false,
+      backgroundColor: "transparent",
+      focusedBackgroundColor: "transparent",
+      selectedBackgroundColor: "#334155",
+      textColor: "#e2e8f0",
+      selectedTextColor: "#38bdf8",
       marginTop: 1,
     });
-    content.add(instructions);
+    content.add(select);
 
-    const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "return" || key.name === "enter") {
-        cleanup();
-        resolve("resume");
-        return;
-      }
-
-      if (key.name === "e") {
-        cleanup();
-        resolve("edit");
-        return;
-      }
+    select.focus();
 
-      if (key.name === "d") {
-        cleanup();
-        resolve("delete");
-        return;
-      }
+    const handleSelect = (_index: number, option: { value: string }) => {
+      cleanup();
+      resolve(option.value as ExitChoice);
+    };
 
-      if (key.name === "escape") {
+    const handleKeypress = (key: KeyEvent) => {
+      if (isEscape(key)) {
         cleanup();
         resolve("home");
       }
     };
 
     const cleanup = () => {
+      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);
   });
 }
@@ -109,47 +129,59 @@ export function showExitPromptWithChanges(
       id: "question",
       content: "What would you like to do?",
       fg: "#e2e8f0",
+      marginBottom: 1,
     });
     content.add(question);
 
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Resume   [e] Edit session   [d] Delete session   [Esc] Back to home",
-      fg: "#64748b",
+    const select = new SelectRenderable(renderer, {
+      id: "exit-select",
+      width: 40,
+      height: 4,
+      options: [
+        { name: "Resume session", description: "", value: "resume" },
+        { name: "Edit session", description: "", value: "edit" },
+        { name: "Delete session", description: "", value: "delete" },
+        { name: "Back to home", description: "", value: "home" },
+      ],
+      showDescription: false,
+      backgroundColor: "transparent",
+      focusedBackgroundColor: "transparent",
+      selectedBackgroundColor: "#334155",
+      textColor: "#e2e8f0",
+      selectedTextColor: "#38bdf8",
       marginTop: 1,
     });
-    content.add(instructions);
+    content.add(select);
 
-    const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "return" || key.name === "enter") {
-        cleanup();
-        resolve("resume");
-        return;
-      }
-
-      if (key.name === "e") {
-        cleanup();
-        resolve("edit");
-        return;
-      }
+    select.focus();
 
-      if (key.name === "d") {
-        cleanup();
-        resolve("delete");
-        return;
-      }
+    const handleSelect = (_index: number, option: { value: string }) => {
+      cleanup();
+      resolve(option.value as ExitChoice);
+    };
 
-      if (key.name === "escape") {
+    const handleKeypress = (key: KeyEvent) => {
+      if (isEscape(key)) {
         cleanup();
         resolve("home");
       }
     };
 
     const cleanup = () => {
+      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/list.ts

@@ -8,6 +8,8 @@ import {
 import { createBaseLayout, clearLayout } from "./renderer";
 import { buildSessionOptions } from "./session-options";
 import type { Session } from "../types";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape, isArrowUp, isArrowDown } from "./common/keyboard";
 
 export type ListAction =
   | { type: "resume"; session: Session }
@@ -19,7 +21,7 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
   return new Promise((resolve) => {
     clearLayout(renderer);
 
-    const { content } = createBaseLayout(renderer, "Sessions");
+    const { content } = createBaseLayout(renderer, `Sessions (${sessions.length})`);
 
     if (sessions.length === 0) {
       const emptyText = new TextRenderable(renderer, {
@@ -30,13 +32,21 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
       content.add(emptyText);
 
       const handleKeypress = (key: KeyEvent) => {
-        if (key.name === "escape") {
+        if (key.name === "q" || isEscape(key)) {
           renderer.keyInput.off("keypress", handleKeypress);
+          hideFooter(renderer);
           clearLayout(renderer);
           resolve({ type: "quit" });
         }
       };
 
+      showFooter(renderer, content, {
+        navigate: false,
+        select: false,
+        back: false,
+        quit: true,
+      });
+
       renderer.keyInput.on("keypress", handleKeypress);
       return;
     }
@@ -60,15 +70,6 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
     });
     content.add(select);
 
-    // Instructions
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Resume   [d] Delete   [a] Nuke All   [Esc] Quit",
-      fg: "#64748b",
-      marginTop: 1,
-    });
-    content.add(instructions);
-
     select.focus();
 
     let selectedIndex = 0;
@@ -80,9 +81,9 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
 
     const handleKeypress = (key: KeyEvent) => {
       // Track selection for delete
-      if (key.name === "up" || key.name === "k") {
+      if (isArrowUp(key)) {
         selectedIndex = Math.max(0, selectedIndex - 1);
-      } else if (key.name === "down" || key.name === "j") {
+      } else if (isArrowDown(key)) {
         selectedIndex = Math.min(sessions.length - 1, selectedIndex + 1);
       } else if (key.name === "d") {
         const session = sessions[selectedIndex];
@@ -93,7 +94,7 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
       } else if (key.name === "a") {
         cleanup();
         resolve({ type: "nuke-all" });
-      } else if (key.name === "escape") {
+      } else if (key.name === "q" || isEscape(key)) {
         cleanup();
         resolve({ type: "quit" });
       }
@@ -103,9 +104,17 @@ export function showSessionList(renderer: CliRenderer, sessions: Session[]): Pro
       select.off(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
       renderer.keyInput.off("keypress", handleKeypress);
       select.blur();
+      hideFooter(renderer);
       clearLayout(renderer);
     };
 
+    showFooter(renderer, content, {
+      navigate: true,
+      select: false,
+      back: false,
+      custom: ["Enter Resume", "d Delete", "a Nuke All", "q Quit"],
+    });
+
     select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
     renderer.keyInput.on("keypress", handleKeypress);
   });

package/src/ui/main-menu.ts

@@ -8,6 +8,8 @@ import {
 import { createBaseLayout, clearLayout } from "./renderer";
 import { buildSessionOptions } from "./session-options";
 import type { Session } from "../types";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape, isArrowUp, isArrowDown } from "./common/keyboard";
 
 export type MainMenuAction =
   | { type: "new-session" }
@@ -19,23 +21,13 @@ export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promis
   return new Promise((resolve) => {
     clearLayout(renderer);
 
-    const { content } = createBaseLayout(renderer, "letmecook");
+    const { content } = createBaseLayout(renderer);
 
-    // Welcome text
-    const welcome = new TextRenderable(renderer, {
-      id: "welcome",
-      content: "Multi-repo workspace manager for AI coding sessions",
-      fg: "#94a3b8",
-      marginBottom: 2,
-    });
-    content.add(welcome);
-
-    // Sessions section
+    // Sessions section with count
     const sessionsHeader = new TextRenderable(renderer, {
       id: "sessions-header",
-      content: "Sessions",
+      content: `Sessions (${sessions.length})`,
       fg: "#e2e8f0",
-      marginTop: 1,
       marginBottom: 1,
     });
     content.add(sessionsHeader);
@@ -71,36 +63,6 @@ export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promis
       content.add(emptyText);
     }
 
-    // Actions section
-    const actionsHeader = new TextRenderable(renderer, {
-      id: "actions-header",
-      content: "Actions",
-      fg: "#e2e8f0",
-      marginTop: 1,
-      marginBottom: 1,
-    });
-    content.add(actionsHeader);
-
-    const actionsText = new TextRenderable(renderer, {
-      id: "actions",
-      content:
-        sessions.length > 0
-          ? "[n] New session\n[d] Delete session\n[Esc] Quit"
-          : "[n] New session\n[Esc] Quit",
-      fg: "#94a3b8",
-    });
-    content.add(actionsText);
-
-    if (sessions.length > 0) {
-      const instructions = new TextRenderable(renderer, {
-        id: "instructions",
-        content: "\n[Enter] Resume session",
-        fg: "#64748b",
-        marginTop: 1,
-      });
-      content.add(instructions);
-    }
-
     if (select) {
       select.focus();
     }
@@ -113,9 +75,9 @@ export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promis
     };
 
     const handleKeypress = (key: KeyEvent) => {
-      if (sessions.length > 0 && (key.name === "up" || key.name === "k")) {
+      if (sessions.length > 0 && isArrowUp(key)) {
         selectedIndex = Math.max(0, selectedIndex - 1);
-      } else if (sessions.length > 0 && (key.name === "down" || key.name === "j")) {
+      } else if (sessions.length > 0 && isArrowDown(key)) {
         selectedIndex = Math.min(sessions.length - 1, selectedIndex + 1);
       } else if (key.name === "d" && sessions.length > 0) {
         const session = sessions[selectedIndex];
@@ -132,7 +94,7 @@ export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promis
         return;
       }
 
-      if (key.name === "escape") {
+      if (key.name === "q" || isEscape(key)) {
         cleanup();
         resolve({ type: "quit" });
       }
@@ -144,9 +106,26 @@ export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promis
         select.blur();
       }
       renderer.keyInput.off("keypress", handleKeypress);
+      hideFooter(renderer);
       clearLayout(renderer);
     };
 
+    // Show footer with context-aware actions
+    const footerActions: string[] = [];
+    if (sessions.length > 0) {
+      footerActions.push("Enter Open", "n New", "d Delete");
+    } else {
+      footerActions.push("n New");
+    }
+    footerActions.push("q Quit");
+
+    showFooter(renderer, content, {
+      navigate: sessions.length > 0,
+      select: false,
+      back: false,
+      custom: footerActions,
+    });
+
     if (select) {
       select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
     }

package/src/ui/reclone-prompt.ts

@@ -7,6 +7,8 @@ import {
 } from "@opentui/core";
 import { createBaseLayout, clearLayout } from "./renderer";
 import type { RepoSpec } from "../types";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape } from "./common/keyboard";
 
 export type RecloneChoice = "reclone" | "skip";
 
@@ -58,14 +60,6 @@ export function showReclonePrompt(renderer: CliRenderer, repo: RepoSpec): Promis
     });
     content.add(select);
 
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Select   [Esc] Skip",
-      fg: "#64748b",
-      marginTop: 1,
-    });
-    content.add(instructions);
-
     select.focus();
 
     const handleSelect = (_index: number, option: { value: string }) => {
@@ -74,7 +68,7 @@ export function showReclonePrompt(renderer: CliRenderer, repo: RepoSpec): Promis
     };
 
     const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "escape") {
+      if (isEscape(key)) {
         cleanup();
         resolve("skip");
       }
@@ -84,9 +78,17 @@ export function showReclonePrompt(renderer: CliRenderer, repo: RepoSpec): Promis
       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,
+      custom: ["Esc Skip"],
+    });
+
     select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
     renderer.keyInput.on("keypress", handleKeypress);
   });

package/src/ui/renderer.ts

@@ -101,8 +101,20 @@ export function createBaseLayout(r: CliRenderer, subtitle?: string): LayoutEleme
 }
 
 export function clearLayout(r: CliRenderer): void {
-  // Remove known elements
-  r.root.remove("main-container");
-  r.root.remove("title");
-  r.root.remove("content");
+  // Remove known elements (ignore if they don't exist)
+  try {
+    r.root.remove("main-container");
+  } catch {
+    // Element doesn't exist
+  }
+  try {
+    r.root.remove("title");
+  } catch {
+    // Element doesn't exist
+  }
+  try {
+    r.root.remove("content");
+  } catch {
+    // Element doesn't exist
+  }
 }

package/src/ui/session-details.ts

@@ -1,7 +1,15 @@
-import { type CliRenderer, TextRenderable, type KeyEvent } from "@opentui/core";
+import {
+  type CliRenderer,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+  type KeyEvent,
+} from "@opentui/core";
 import { createBaseLayout, clearLayout } from "./renderer";
 import type { Session } from "../types";
 import { formatRepoList } from "./common/repo-formatter";
+import { showFooter, hideFooter } from "./common/footer";
+import { isEscape } from "./common/keyboard";
 
 export type SessionDetailsAction = "resume" | "edit" | "add-repos" | "back";
 
@@ -41,37 +49,54 @@ export function showSessionDetails(
     });
     content.add(reposInfo);
 
-    const instructions = new TextRenderable(renderer, {
-      id: "instructions",
-      content: "\n[Enter] Resume   [e] Edit settings   [Esc] Back",
-      fg: "#64748b",
+    const select = new SelectRenderable(renderer, {
+      id: "session-details-select",
+      width: 40,
+      height: 3,
+      options: [
+        { name: "Resume session", description: "", value: "resume" },
+        { name: "Edit settings", description: "", value: "edit" },
+        { name: "Back", description: "", value: "back" },
+      ],
+      showDescription: false,
+      backgroundColor: "transparent",
+      focusedBackgroundColor: "transparent",
+      selectedBackgroundColor: "#334155",
+      textColor: "#e2e8f0",
+      selectedTextColor: "#38bdf8",
       marginTop: 1,
     });
-    content.add(instructions);
+    content.add(select);
 
-    const handleKeypress = (key: KeyEvent) => {
-      if (key.name === "return" || key.name === "enter") {
-        cleanup();
-        resolve("resume");
-        return;
-      }
+    select.focus();
 
-      if (key.name === "e") {
-        cleanup();
-        resolve("edit");
-        return;
-      }
+    const handleSelect = (_index: number, option: { value: string }) => {
+      cleanup();
+      resolve(option.value as SessionDetailsAction);
+    };
 
-      if (key.name === "escape") {
+    const handleKeypress = (key: KeyEvent) => {
+      if (isEscape(key)) {
         cleanup();
         resolve("back");
       }
     };
 
     const cleanup = () => {
+      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);
   });
 }