letmecook 0.0.1 → 0.0.4

package/src/ui/main-menu.ts

@@ -0,0 +1,155 @@
+import {
+  type CliRenderer,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+  type KeyEvent,
+} from "@opentui/core";
+import { createBaseLayout, clearLayout } from "./renderer";
+import { buildSessionOptions } from "./session-options";
+import type { Session } from "../types";
+
+export type MainMenuAction =
+  | { type: "new-session" }
+  | { type: "resume"; session: Session }
+  | { type: "delete"; session: Session }
+  | { type: "quit" };
+
+export function showMainMenu(renderer: CliRenderer, sessions: Session[]): Promise<MainMenuAction> {
+  return new Promise((resolve) => {
+    clearLayout(renderer);
+
+    const { content } = createBaseLayout(renderer, "letmecook");
+
+    // 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
+    const sessionsHeader = new TextRenderable(renderer, {
+      id: "sessions-header",
+      content: "Sessions",
+      fg: "#e2e8f0",
+      marginTop: 1,
+      marginBottom: 1,
+    });
+    content.add(sessionsHeader);
+
+    const options = buildSessionOptions(sessions);
+    const select =
+      options.length > 0
+        ? new SelectRenderable(renderer, {
+            id: "session-list",
+            width: 65,
+            height: Math.min(sessions.length * 2, 10),
+            options,
+            showDescription: true,
+            backgroundColor: "transparent",
+            focusedBackgroundColor: "transparent",
+            selectedBackgroundColor: "#334155",
+            textColor: "#e2e8f0",
+            selectedTextColor: "#38bdf8",
+            descriptionColor: "#64748b",
+            selectedDescriptionColor: "#94a3b8",
+          })
+        : null;
+
+    if (select) {
+      content.add(select);
+    } else {
+      const emptyText = new TextRenderable(renderer, {
+        id: "empty-sessions",
+        content: "No sessions yet. Start one with [n].",
+        fg: "#94a3b8",
+        marginBottom: 1,
+      });
+      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();
+    }
+
+    let selectedIndex = 0;
+
+    const handleSelect = (_index: number, option: { value: Session }) => {
+      cleanup();
+      resolve({ type: "resume", session: option.value });
+    };
+
+    const handleKeypress = (key: KeyEvent) => {
+      if (sessions.length > 0 && (key.name === "up" || key.name === "k")) {
+        selectedIndex = Math.max(0, selectedIndex - 1);
+      } else if (sessions.length > 0 && (key.name === "down" || key.name === "j")) {
+        selectedIndex = Math.min(sessions.length - 1, selectedIndex + 1);
+      } else if (key.name === "d" && sessions.length > 0) {
+        const session = sessions[selectedIndex];
+        if (session) {
+          cleanup();
+          resolve({ type: "delete", session });
+        }
+        return;
+      }
+
+      if (key.name === "n") {
+        cleanup();
+        resolve({ type: "new-session" });
+        return;
+      }
+
+      if (key.name === "escape") {
+        cleanup();
+        resolve({ type: "quit" });
+      }
+    };
+
+    const cleanup = () => {
+      if (select) {
+        select.off(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
+        select.blur();
+      }
+      renderer.keyInput.off("keypress", handleKeypress);
+      clearLayout(renderer);
+    };
+
+    if (select) {
+      select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
+    }
+    renderer.keyInput.on("keypress", handleKeypress);
+  });
+}

package/src/ui/new-session.ts

@@ -0,0 +1,99 @@
+import { type CliRenderer, TextRenderable, InputRenderable, type KeyEvent } from "@opentui/core";
+import { createBaseLayout, clearLayout } from "./renderer";
+import type { RepoSpec } from "../types";
+
+export interface NewSessionResult {
+  goal?: string;
+  cancelled: boolean;
+}
+
+export function showNewSessionPrompt(
+  renderer: CliRenderer,
+  repos: RepoSpec[],
+): Promise<NewSessionResult> {
+  return new Promise((resolve) => {
+    clearLayout(renderer);
+
+    const { content } = createBaseLayout(renderer, "Creating new session");
+
+    // Show repos
+    const reposLabel = new TextRenderable(renderer, {
+      id: "repos-label",
+      content: "Repositories:",
+      fg: "#e2e8f0",
+      marginBottom: 0,
+    });
+    content.add(reposLabel);
+
+    repos.forEach((repo, i) => {
+      const branch = repo.branch ? ` (${repo.branch})` : " (default)";
+      const roMarker = repo.readOnly ? " [RO]" : "";
+      const latestMarker = repo.latest ? " [Latest]" : "";
+      const repoText = new TextRenderable(renderer, {
+        id: `repo-${i}`,
+        content: `  - ${repo.owner}/${repo.name}${branch}${roMarker}${latestMarker}`,
+        fg: "#94a3b8",
+      });
+      content.add(repoText);
+    });
+
+    // Goal prompt
+    const goalLabel = new TextRenderable(renderer, {
+      id: "goal-label",
+      content: "\nAnything you'd like to add? (goal/context for AI agents)",
+      fg: "#e2e8f0",
+      marginTop: 1,
+    });
+    content.add(goalLabel);
+
+    const goalInput = new InputRenderable(renderer, {
+      id: "goal-input",
+      width: 60,
+      height: 1,
+      placeholder: "e.g., Integrate testing framework...",
+      placeholderColor: "#64748b",
+      backgroundColor: "#334155",
+      textColor: "#f8fafc",
+      cursorColor: "#38bdf8",
+      marginTop: 1,
+    });
+    content.add(goalInput);
+
+    goalInput.onPaste = (event) => {
+      const text = event.text.replace(/[\r\n]+/g, "");
+      if (!text) return;
+      goalInput.insertText(text);
+      event.preventDefault();
+    };
+
+    // Instructions
+    const instructions = new TextRenderable(renderer, {
+      id: "instructions",
+      content: "\n[Enter] Continue   [Esc] Cancel",
+      fg: "#64748b",
+      marginTop: 1,
+    });
+    content.add(instructions);
+
+    goalInput.focus();
+
+    const handleKeypress = (key: KeyEvent) => {
+      if (key.name === "escape") {
+        cleanup();
+        resolve({ cancelled: true });
+      } else if (key.name === "return" || key.name === "enter") {
+        cleanup();
+        const goal = goalInput.value.trim() || undefined;
+        resolve({ goal, cancelled: false });
+      }
+    };
+
+    const cleanup = () => {
+      renderer.keyInput.off("keypress", handleKeypress);
+      goalInput.blur();
+      clearLayout(renderer);
+    };
+
+    renderer.keyInput.on("keypress", handleKeypress);
+  });
+}

package/src/ui/progress.ts

@@ -0,0 +1,191 @@
+import { type CliRenderer, TextRenderable } from "@opentui/core";
+import { createBaseLayout, clearLayout } from "./renderer";
+import type { RepoSpec } from "../types";
+
+export type ProgressPhase =
+  | "naming"
+  | "proposal"
+  | "cloning"
+  | "installing-skills"
+  | "refreshing"
+  | "done";
+
+export type ProgressRepoStatus =
+  | "pending"
+  | "cloning"
+  | "refreshing"
+  | "updated"
+  | "up-to-date"
+  | "skipped"
+  | "done"
+  | "error";
+
+export interface ProgressOptions {
+  title?: string;
+  label?: string;
+  initialPhase?: ProgressPhase;
+}
+
+export interface ProgressState {
+  sessionName?: string;
+  repos: Array<{
+    repo: RepoSpec;
+    status: ProgressRepoStatus;
+  }>;
+  phase: ProgressPhase;
+  currentOutput?: string[]; // Last 5 lines of git output
+}
+
+let statusTexts: TextRenderable[] = [];
+let phaseText: TextRenderable | null = null;
+let sessionText: TextRenderable | null = null;
+let outputText: TextRenderable | null = null;
+
+function getPhasePresentation(phase: ProgressPhase): { content: string; fg: string } {
+  switch (phase) {
+    case "naming":
+      return { content: "Generating session name...", fg: "#fbbf24" };
+    case "proposal":
+      return { content: "Here's what the agent proposed:", fg: "#38bdf8" };
+    case "cloning":
+      return { content: "Cloning repositories...", fg: "#38bdf8" };
+    case "installing-skills":
+      return { content: "Installing skills...", fg: "#38bdf8" };
+    case "refreshing":
+      return { content: "Refreshing latest repositories...", fg: "#38bdf8" };
+    case "done":
+      return { content: "Ready!", fg: "#22c55e" };
+    default:
+      return { content: "Processing...", fg: "#38bdf8" };
+  }
+}
+
+export function showProgress(
+  renderer: CliRenderer,
+  repos: RepoSpec[],
+  options: ProgressOptions = {},
+): ProgressState {
+  clearLayout(renderer);
+  statusTexts = [];
+
+  const {
+    title = "Setting up session",
+    label = "Cloning repositories:",
+    initialPhase = "naming",
+  } = options;
+
+  const { content } = createBaseLayout(renderer, title);
+
+  const phasePresentation = getPhasePresentation(initialPhase);
+
+  phaseText = new TextRenderable(renderer, {
+    id: "phase",
+    content: phasePresentation.content,
+    fg: phasePresentation.fg,
+    marginBottom: 1,
+  });
+  content.add(phaseText);
+
+  sessionText = new TextRenderable(renderer, {
+    id: "session-name",
+    content: "",
+    fg: "#38bdf8",
+  });
+  content.add(sessionText);
+
+  const cloningLabel = new TextRenderable(renderer, {
+    id: "cloning-label",
+    content: `\n${label}`,
+    fg: "#e2e8f0",
+    marginTop: 1,
+  });
+  content.add(cloningLabel);
+
+  const state: ProgressState = {
+    repos: repos.map((repo) => ({ repo, status: "pending" as const })),
+    phase: initialPhase,
+  };
+
+  repos.forEach((repo, i) => {
+    const statusText = new TextRenderable(renderer, {
+      id: `repo-status-${i}`,
+      content: `  [ ] ${repo.owner}/${repo.name}`,
+      fg: "#94a3b8",
+    });
+    content.add(statusText);
+    statusTexts.push(statusText);
+  });
+
+  // Output display section (shows last 5 lines of git output)
+  outputText = new TextRenderable(renderer, {
+    id: "git-output",
+    content: "",
+    fg: "#64748b", // Muted slate gray
+    marginTop: 1,
+  });
+  content.add(outputText);
+
+  return state;
+}
+
+export function updateProgress(renderer: CliRenderer, state: ProgressState): void {
+  if (phaseText) {
+    const phasePresentation = getPhasePresentation(state.phase);
+    phaseText.content = phasePresentation.content;
+    phaseText.fg = phasePresentation.fg;
+  }
+
+  if (sessionText && state.sessionName) {
+    sessionText.content = `Session: ${state.sessionName}`;
+  }
+
+  state.repos.forEach((item, i) => {
+    const text = statusTexts[i];
+    if (text) {
+      const icon =
+        item.status === "done" || item.status === "updated"
+          ? "[x]"
+          : item.status === "cloning" || item.status === "refreshing"
+            ? "[~]"
+            : item.status === "error"
+              ? "[!]"
+              : item.status === "up-to-date"
+                ? "[=]"
+                : item.status === "skipped"
+                  ? "[>]"
+                  : "[ ]";
+      const color =
+        item.status === "done" || item.status === "updated"
+          ? "#22c55e"
+          : item.status === "cloning"
+            ? "#fbbf24"
+            : item.status === "refreshing"
+              ? "#38bdf8"
+              : item.status === "error"
+                ? "#ef4444"
+                : item.status === "skipped"
+                  ? "#f59e0b"
+                  : "#94a3b8";
+
+      text.content = `  ${icon} ${item.repo.owner}/${item.repo.name}`;
+      text.fg = color;
+    }
+  });
+
+  // Update git output display
+  if (outputText && state.currentOutput && state.currentOutput.length > 0) {
+    outputText.content = state.currentOutput.map((line) => `  ${line}`).join("\n");
+  } else if (outputText) {
+    outputText.content = "";
+  }
+
+  renderer.requestRender();
+}
+
+export function hideProgress(renderer: CliRenderer): void {
+  clearLayout(renderer);
+  statusTexts = [];
+  phaseText = null;
+  sessionText = null;
+  outputText = null;
+}

package/src/ui/reclone-prompt.ts

@@ -0,0 +1,93 @@
+import {
+  type CliRenderer,
+  TextRenderable,
+  SelectRenderable,
+  SelectRenderableEvents,
+  type KeyEvent,
+} from "@opentui/core";
+import { createBaseLayout, clearLayout } from "./renderer";
+import type { RepoSpec } from "../types";
+
+export type RecloneChoice = "reclone" | "skip";
+
+export function showReclonePrompt(renderer: CliRenderer, repo: RepoSpec): Promise<RecloneChoice> {
+  return new Promise((resolve) => {
+    clearLayout(renderer);
+
+    const { content } = createBaseLayout(renderer, "Update issue");
+
+    const repoInfo = new TextRenderable(renderer, {
+      id: "repo-info",
+      content: `${repo.owner}/${repo.name}`,
+      fg: "#38bdf8",
+      marginBottom: 1,
+    });
+    content.add(repoInfo);
+
+    const warning = new TextRenderable(renderer, {
+      id: "warning",
+      content: "We had issues updating this repo.",
+      fg: "#f59e0b",
+      marginBottom: 0,
+    });
+    content.add(warning);
+
+    const question = new TextRenderable(renderer, {
+      id: "question",
+      content: "Wipe and reclone it?",
+      fg: "#e2e8f0",
+      marginBottom: 1,
+    });
+    content.add(question);
+
+    const select = new SelectRenderable(renderer, {
+      id: "reclone-select",
+      width: 24,
+      height: 2,
+      options: [
+        { name: "Reclone", description: "", value: "reclone" },
+        { name: "Skip", description: "", value: "skip" },
+      ],
+      showDescription: false,
+      backgroundColor: "transparent",
+      focusedBackgroundColor: "transparent",
+      selectedBackgroundColor: "#334155",
+      textColor: "#e2e8f0",
+      selectedTextColor: "#38bdf8",
+      marginTop: 1,
+    });
+    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 }) => {
+      cleanup();
+      resolve(option.value as RecloneChoice);
+    };
+
+    const handleKeypress = (key: KeyEvent) => {
+      if (key.name === "escape") {
+        cleanup();
+        resolve("skip");
+      }
+    };
+
+    const cleanup = () => {
+      select.off(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
+      renderer.keyInput.off("keypress", handleKeypress);
+      select.blur();
+      clearLayout(renderer);
+    };
+
+    select.on(SelectRenderableEvents.ITEM_SELECTED, handleSelect);
+    renderer.keyInput.on("keypress", handleKeypress);
+  });
+}

package/src/ui/renderer.ts

@@ -0,0 +1,108 @@
+import {
+  createCliRenderer,
+  type CliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  ASCIIFontRenderable,
+  RGBA,
+} from "@opentui/core";
+import { measureText } from "@opentui/core";
+
+let renderer: CliRenderer | null = null;
+
+export async function createRenderer(): Promise<CliRenderer> {
+  if (renderer) {
+    return renderer;
+  }
+
+  renderer = await createCliRenderer({
+    exitOnCtrlC: false,
+    targetFps: 30,
+  });
+
+  renderer.setBackgroundColor("#0f172a");
+
+  return renderer;
+}
+
+export function getRenderer(): CliRenderer | null {
+  return renderer;
+}
+
+export function destroyRenderer(): void {
+  if (renderer) {
+    renderer.destroy();
+    renderer = null;
+  }
+}
+
+export interface LayoutElements {
+  container: BoxRenderable;
+  title: ASCIIFontRenderable;
+  content: BoxRenderable;
+}
+
+export function createBaseLayout(r: CliRenderer, subtitle?: string): LayoutElements {
+  const width = r.terminalWidth;
+
+  // Main container
+  const container = new BoxRenderable(r, {
+    id: "main-container",
+    width: "100%",
+    height: "100%",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: 1,
+  });
+  r.root.add(container);
+
+  // Title
+  const titleText = "letmecook";
+  const titleFont = "tiny";
+  const { width: titleWidth } = measureText({ text: titleText, font: titleFont });
+  const centerX = Math.floor(width / 2) - Math.floor(titleWidth / 2);
+
+  const title = new ASCIIFontRenderable(r, {
+    id: "title",
+    text: titleText,
+    font: titleFont,
+    color: RGBA.fromHex("#f8fafc"),
+    position: "absolute",
+    left: centerX,
+    top: 11,
+  });
+  r.root.add(title);
+
+  // Content box below title
+  const content = new BoxRenderable(r, {
+    id: "content",
+    width: Math.min(70, width - 4),
+    marginTop: 15,
+    padding: 1,
+    flexDirection: "column",
+    borderStyle: "single",
+    borderColor: "#475569",
+    backgroundColor: "#1e293b",
+  });
+  container.add(content);
+
+  // Add subtitle if provided
+  if (subtitle) {
+    const subtitleText = new TextRenderable(r, {
+      id: "subtitle",
+      content: subtitle,
+      fg: "#94a3b8",
+      marginBottom: 1,
+    });
+    content.add(subtitleText);
+  }
+
+  return { container, title, content };
+}
+
+export function clearLayout(r: CliRenderer): void {
+  // Remove known elements
+  r.root.remove("main-container");
+  r.root.remove("title");
+  r.root.remove("content");
+}