im-pickle-rick 0.1.0

package/src/ui/views/LogView.ts

@@ -0,0 +1,277 @@
+import fs from "node:fs";
+import fsp from "node:fs/promises";
+import {
+  CliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  StyledText,
+  parseColor,
+  type TextChunk,
+  ScrollBoxRenderable,
+} from "@opentui/core";
+import { THEME } from "../theme.js";
+
+interface LogLine {
+  content: string;
+  color: string;
+}
+
+export class LogView {
+  public root: BoxRenderable;
+  private logFilePath: string;
+  private fileHandle: fsp.FileHandle | null = null;
+  private lastSize: number = 0;
+  private tailInterval: ReturnType<typeof setTimeout> | null = null;
+  private tailing: boolean = false;
+  private isDestroyed = false;
+  private renderer: CliRenderer;
+  private lines: LogLine[] = [];
+  private textRenderable: TextRenderable;
+  private scrollBox: ScrollBoxRenderable;
+  private readonly MAX_LINES = 8000; // Allow deeper backscroll before truncation
+  private readonly RENDER_CHUNK_SIZE = this.MAX_LINES; // Render everything we keep so older iterations stay visible
+  private updateTimeout: ReturnType<typeof setTimeout> | null = null;
+  private onNewLines?: () => void;
+  private lastUpdateTime: number = 0;
+
+  constructor(renderer: CliRenderer, logFilePath: string, onNewLines?: () => void) {
+    this.renderer = renderer;
+    this.logFilePath = logFilePath;
+    this.onNewLines = onNewLines;
+
+    this.root = new BoxRenderable(renderer, {
+      id: "log-view-root",
+      width: "100%",
+      height: "100%",
+      backgroundColor: THEME.bg,
+      flexDirection: "column",
+      flexGrow: 1,
+    });
+
+    this.scrollBox = new ScrollBoxRenderable(renderer, {
+      id: "log-view-scroll",
+      width: "100%",
+      height: "100%",
+      flexGrow: 1,
+      scrollY: true,
+      stickyScroll: true,
+      stickyStart: "bottom",
+      backgroundColor: THEME.bg,
+      scrollbarOptions: {
+        trackOptions: {
+          backgroundColor: THEME.darkAccent,
+          foregroundColor: THEME.accent,
+        },
+      },
+    });
+
+    this.textRenderable = new TextRenderable(renderer, {
+      id: "log-view-text",
+      width: "100%",
+      height: "auto",
+      content: "[ Initializing Log View... ]",
+      fg: THEME.dim,
+    });
+    this.scrollBox.add(this.textRenderable);
+    this.root.add(this.scrollBox);
+
+    this.init();
+  }
+
+  private formatLogLine(content: string): LogLine {
+    const stripped = this.stripAnsi(content);
+    const trimmed = stripped.trim();
+
+    let color = THEME.text;
+
+    if (trimmed.startsWith("[Phase") || trimmed.startsWith("[Iteration") || trimmed.startsWith("Phase")) {
+      color = THEME.accent;
+    } else if (trimmed.startsWith(">>")) {
+      color = THEME.blue;
+    } else if (/ERROR|FAILED|Exception|Error:/i.test(trimmed)) {
+      color = THEME.error;
+    } else if (/WARNING|CAUTION/i.test(trimmed)) {
+      color = THEME.warning;
+    } else if (/\[DONE\]|SUCCESS|Successfully/i.test(trimmed)) {
+      color = THEME.green;
+    }
+
+    return { content: stripped, color };
+  }
+
+  private async init() {
+    try {
+      await fsp.access(this.logFilePath, fs.constants.R_OK);
+      this.fileHandle = await fsp.open(this.logFilePath, "r");
+      const stats = await this.fileHandle.stat();
+      this.lastSize = stats.size;
+
+      if (stats.size > 0) {
+        const content = await fsp.readFile(this.logFilePath, "utf8");
+        const rawLines = content.split("\n");
+        
+        const linesToProcess = rawLines[rawLines.length - 1] === "" 
+          ? rawLines.slice(0, -1) 
+          : rawLines;
+
+        const lastLines = linesToProcess.slice(-this.MAX_LINES);
+        this.addRawLines(lastLines);
+      }
+    } catch (error) {
+      if (error instanceof Error && (error as NodeJS.ErrnoException).code !== "ENOENT") {
+        this.addRawLines([`[Error reading log: ${error.message}]`]);
+      }
+    }
+
+    this.startTailing();
+  }
+
+  public startTailing() {
+    if (this.tailing) return;
+    this.tailing = true;
+    this.poll();
+  }
+
+  private async poll() {
+    if (!this.tailing) return;
+    try {
+      await this.checkFile();
+    } catch (e) {
+      // Silence background poll errors
+    } finally {
+      this.tailInterval = setTimeout(() => this.poll(), 500) as any;
+    }
+  }
+
+  public stopTailing() {
+    this.tailing = false;
+    if (this.tailInterval) {
+      clearTimeout(this.tailInterval);
+      this.tailInterval = null;
+    }
+  }
+
+  private async checkFile() {
+    try {
+      if (!this.fileHandle) {
+        try {
+          await fsp.access(this.logFilePath, fs.constants.R_OK);
+          this.fileHandle = await fsp.open(this.logFilePath, "r");
+          const stats = await this.fileHandle.stat();
+          this.lastSize = stats.size;
+          return;
+        } catch {
+          return;
+        }
+      }
+
+      const stats = await this.fileHandle.stat();
+      if (stats.size > this.lastSize) {
+        const bufferSize = stats.size - this.lastSize;
+        const buffer = Buffer.alloc(bufferSize);
+        
+        await this.fileHandle.read(buffer, 0, bufferSize, this.lastSize);
+
+        const content = buffer.toString();
+        this.lastSize = stats.size;
+        
+        const rawLines = content.split("\n");
+        if (rawLines.length > 0 && rawLines[rawLines.length - 1] === "") {
+          rawLines.pop();
+        }
+        
+        this.addRawLines(rawLines);
+      } else if (stats.size < this.lastSize) {
+        this.lastSize = stats.size;
+        this.addRawLines(["[Log file truncated]"]);
+      }
+    } catch (error) {
+      if (this.fileHandle) {
+        await this.fileHandle.close().catch(() => {});
+        this.fileHandle = null;
+      }
+      this.addRawLines([`[Error reading log file: ${error}]`]);
+    }
+  }
+
+  private stripAnsi(text: string): string {
+    return text.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, "");
+  }
+
+  private addRawLines(newLines: string[]) {
+    if (this.isDestroyed) return;
+    if (newLines.length === 0) return;
+
+    const formatted = newLines.map(line => this.formatLogLine(line));
+
+    this.lines.push(...formatted);
+    if (this.lines.length > this.MAX_LINES) {
+      this.lines = this.lines.slice(-this.MAX_LINES);
+    }
+    
+    // Clear existing timeout and force immediate update if it's been > 500ms
+    const now = Date.now();
+    const timeSinceLastUpdate = now - this.lastUpdateTime;
+    
+    if (this.updateTimeout) {
+      clearTimeout(this.updateTimeout);
+      this.updateTimeout = null;
+    }
+    
+    // Use shorter timeout for more frequent updates, or immediate if it's been a while
+    const timeoutDuration = timeSinceLastUpdate > 500 ? 0 : 50;
+    
+    this.updateTimeout = setTimeout(() => {
+      this.updateRenderable();
+      this.onNewLines?.();
+      this.updateTimeout = null;
+    }, timeoutDuration);
+  }
+
+  private updateRenderable() {
+    if (this.isDestroyed) return;
+    const now = Date.now();
+    this.lastUpdateTime = now;
+    
+    // For very long logs, only render the last RENDER_CHUNK_SIZE lines to improve performance
+    const linesToRender = this.lines.length > this.RENDER_CHUNK_SIZE 
+      ? this.lines.slice(-this.RENDER_CHUNK_SIZE)
+      : this.lines;
+    
+    const chunks: TextChunk[] = linesToRender.map((line, i) => ({
+      __isChunk: true,
+      text: line.content + (i === linesToRender.length - 1 ? "" : "\n"),
+      fg: parseColor(line.color),
+    }));
+    
+    // Add a truncation indicator if we're not showing all lines
+    if (this.lines.length > this.RENDER_CHUNK_SIZE) {
+      const hiddenCount = this.lines.length - this.RENDER_CHUNK_SIZE;
+      chunks.unshift({
+        __isChunk: true,
+        text: `[... ${hiddenCount} earlier lines hidden for performance ...]\n`,
+        fg: parseColor(THEME.dim),
+      });
+    }
+    
+    this.textRenderable.content = new StyledText(chunks);
+    if (this.scrollBox) {
+      this.scrollBox.scrollTo({ x: 0, y: this.scrollBox.scrollHeight });
+    }
+  }
+
+  public async destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    this.stopTailing();
+    if (this.updateTimeout) {
+      clearTimeout(this.updateTimeout);
+      this.updateTimeout = null;
+    }
+    if (this.fileHandle) {
+      await this.fileHandle.close().catch(() => {});
+      this.fileHandle = null;
+    }
+    this.root.destroyRecursively();
+  }
+}

package/src/ui/views/ToyboxView.test.ts

@@ -0,0 +1,46 @@
+import { expect, test, describe, mock, beforeEach } from "bun:test";
+import "../test-setup.js";
+import { createMockRenderer } from "../mock-factory.ts";
+import { BoxRenderable } from "@opentui/core";
+
+import { ToyboxView } from "./ToyboxView.js";
+
+describe("ToyboxView", () => {
+  let mockRenderer: any;
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+  });
+
+  test("should initialize with container", () => {
+    const onBack = mock(() => {});
+    const mockContainer = new BoxRenderable(mockRenderer, { id: "toybox-container" });
+    const view = new ToyboxView(mockRenderer, mockContainer, undefined, onBack);
+
+    expect(view["container"]).toBeDefined();
+    expect(view["toys"].length).toBeGreaterThan(0);
+  });
+
+  test("should have enable and disable methods", () => {
+    const mockContainer = new BoxRenderable(mockRenderer, { id: "toybox-container" });
+    const view = new ToyboxView(mockRenderer, mockContainer);
+
+    expect(typeof view.enable).toBe("function");
+    expect(typeof view.disable).toBe("function");
+  });
+
+  test("should have destroy method", () => {
+    const mockContainer = new BoxRenderable(mockRenderer, { id: "toybox-container" });
+    const view = new ToyboxView(mockRenderer, mockContainer);
+
+    expect(typeof view.destroy).toBe("function");
+  });
+
+  test("should create card renderables for toys", () => {
+    const mockContainer = new BoxRenderable(mockRenderer, { id: "toybox-container" });
+    const view = new ToyboxView(mockRenderer, mockContainer);
+
+    // Should have cards for each toy
+    expect(view["cardRenderables"].length).toBe(view["toys"].length);
+  });
+});

package/src/ui/views/ToyboxView.ts

@@ -0,0 +1,323 @@
+import {
+  CliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  ASCIIFontRenderable,
+  RGBA,
+  createTimeline,
+  RenderableEvents,
+} from "@opentui/core";
+import { THEME } from "../theme.js";
+import { launchGameboy, isGameboyActive } from "../../games/gameboy/GameboyView.js";
+import { launchSnake } from "../../games/snake/SnakeView.js";
+import { HEADER_LINES, getLineColor } from "../common.js";
+import { GameSidebarManager } from "../../games/GameSidebarManager.js";
+
+/**
+ * Interface representing a "toy" in the toybox.
+ */
+export interface Toy {
+  id: string;
+  title: string;
+  description: string;
+  color: string;
+  onClick?: () => void;
+}
+
+/**
+ * ToyboxView class representing a top-level view for Rick's inventions.
+ */
+export class ToyboxView {
+  private keyHandler?: (key: any) => void;
+  private toys: Toy[] = [];
+  private cardRenderables: BoxRenderable[] = [];
+  private selectedIndex = -1;
+  private sidebarManager: GameSidebarManager;
+
+  constructor(
+    private renderer: CliRenderer,
+    private container: BoxRenderable,
+    private onSplitSnake?: () => void,
+    private onBack?: () => void
+  ) {
+    this.sidebarManager = new GameSidebarManager(renderer);
+    this.init();
+  }
+
+  private init() {
+    this.container.flexDirection = "column";
+    this.container.alignItems = "center";
+    this.container.justifyContent = "flex-start";
+    this.container.paddingTop = 1;
+    this.container.backgroundColor = RGBA.fromHex(THEME.bg);
+
+    const headerContainer = new BoxRenderable(this.renderer, {
+      id: "toybox-headerContainer",
+      flexDirection: "column",
+      alignItems: "center",
+      height: 10,
+      marginBottom: 1,
+    });
+
+    HEADER_LINES.forEach((line, i) => {
+      const color = getLineColor(i);
+      const textRenderable = new TextRenderable(this.renderer, {
+        id: `toybox-header-line-${i}`,
+        content: line.trimEnd(),
+        fg: color,
+        flexShrink: 0,
+        alignSelf: "center",
+      });
+      headerContainer.add(textRenderable);
+    });
+
+    const toyGrid = new BoxRenderable(this.renderer, {
+      id: "toybox-grid",
+      width: "100%",
+      flexGrow: 1,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      padding: 2,
+      gap: 2,
+    });
+
+    this.populateToyGrid(toyGrid);
+
+    // Help text at the bottom
+    const helpText = new TextRenderable(this.renderer, {
+      id: "toybox-help",
+      content: "←→: Select | ENTER: Play | CTRL+S: Sessions | ESC: Back",
+      fg: THEME.dim,
+      alignSelf: "center",
+      marginTop: 1,
+      flexShrink: 0,
+    });
+
+    this.container.add(headerContainer);
+    this.container.add(toyGrid);
+    this.container.add(helpText);
+  }
+
+  public enable() {
+    if (!this.keyHandler) {
+      this.keyHandler = (key: any) => this.handleKey(key);
+      this.renderer.keyInput.on("keypress", this.keyHandler);
+      this.sidebarManager.enable();
+      
+      // Select first item if nothing selected
+      if (this.selectedIndex === -1 && this.toys.length > 0) {
+        this.selectedIndex = 0;
+        this.updateSelection();
+      }
+    }
+  }
+
+  public disable() {
+    if (this.keyHandler) {
+      this.renderer.keyInput.off("keypress", this.keyHandler);
+      this.keyHandler = undefined;
+    }
+    this.sidebarManager.disable();
+  }
+
+  private handleKey(key: any) {
+    // Ignore input when GameBoy is active
+    if (isGameboyActive()) return;
+
+    if (key.name === "escape") {
+      if (this.onBack) this.onBack();
+      return;
+    }
+
+    // Handle sidebar toggle using generic manager
+    if (this.sidebarManager.handleKey(key)) {
+      return;
+    }
+
+    // Tab triggers split view
+    if (key.name === "tab") {
+      if (this.onSplitSnake) this.onSplitSnake();
+      return;
+    }
+
+    if (this.toys.length === 0) return;
+
+    if (key.name === "right") {
+      this.selectedIndex = (this.selectedIndex + 1) % this.toys.length;
+      this.updateSelection();
+    } else if (key.name === "left") {
+      this.selectedIndex = (this.selectedIndex - 1 + this.toys.length) % this.toys.length;
+      this.updateSelection();
+    } else if (key.name === "return" || key.name === "enter" || key.name === "space") {
+      if (this.selectedIndex !== -1 && this.toys[this.selectedIndex].onClick) {
+        this.toys[this.selectedIndex].onClick!();
+      }
+    }
+  }
+
+  private updateSelection() {
+    this.cardRenderables.forEach((card, i) => {
+      const isSelected = i === this.selectedIndex;
+      const toy = this.toys[i];
+      const targetBorder = isSelected ? RGBA.fromHex(THEME.accent) : RGBA.fromHex(THEME.darkAccent);
+      const targetBg = isSelected ? RGBA.fromHex(THEME.bg) : RGBA.fromHex(THEME.surface);
+
+      createTimeline()
+        .add(card.borderColor, {
+          r: targetBorder.r,
+          g: targetBorder.g,
+          b: targetBorder.b,
+          duration: 150,
+          ease: "outQuad",
+        })
+        .add(card.backgroundColor, {
+          r: targetBg.r,
+          g: targetBg.g,
+          b: targetBg.b,
+          duration: 150,
+          ease: "outQuad",
+        });
+    });
+    this.renderer.requestRender();
+  }
+
+  public destroy() {
+    this.disable();
+  }
+
+  private populateToyGrid(container: BoxRenderable) {
+    this.toys = [
+      {
+        id: "gameboy",
+        title: "GameBoy",
+        description: "Play retro GameBoy games",
+        color: THEME.blue,
+        onClick: () => {
+          this.disable();
+          launchGameboy(this.renderer, {
+            onExit: () => {
+              this.enable();
+              this.renderer.requestRender();
+            },
+            onSidebarRequest: () => this.sidebarManager.toggleSidebar(),
+          });
+        },
+      },
+      {
+        id: "snake",
+        title: "Snake",
+        description: "Pickle Snake! Eat to grow.",
+        color: THEME.accent,
+        onClick: () => {
+          this.disable();
+          launchSnake(this.renderer, () => {
+            this.enable();
+            this.renderer.requestRender();
+          }, {
+            onSplitRequest: (paused) => {
+              if (this.onSplitSnake) (this.onSplitSnake as any)(paused);
+            },
+            onSidebarRequest: () => this.sidebarManager.toggleSidebar(),
+          });
+        },
+      },
+    ];
+
+    this.cardRenderables = [];
+    this.toys.forEach((toy) => {
+      const card = this.createToyCard(toy);
+      this.cardRenderables.push(card);
+      container.add(card);
+    });
+  }
+
+  private createToyCard(toy: Toy): BoxRenderable {
+    const card = new BoxRenderable(this.renderer, {
+      id: `toy-card-${toy.id}`,
+      width: 32,
+      height: 14,
+      border: true,
+      borderColor: THEME.darkAccent,
+      backgroundColor: THEME.surface,
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 1,
+      gap: 1,
+    });
+
+    const titleText = new ASCIIFontRenderable(this.renderer, {
+      id: `toy-title-${toy.id}`,
+      text: toy.title,
+      font: "tiny",
+      color: toy.color,
+    });
+
+    const descText = new TextRenderable(this.renderer, {
+      id: `toy-desc-${toy.id}`,
+      content: toy.description,
+      fg: THEME.dim,
+      marginTop: 1,
+    });
+
+    card.add(titleText);
+    card.add(descText);
+
+    const normalBorder = RGBA.fromHex(THEME.darkAccent);
+    const hoverBorder = RGBA.fromHex(THEME.accent);
+    const normalBg = RGBA.fromHex(THEME.surface);
+    const hoverBg = RGBA.fromHex(THEME.bg);
+
+    card.onMouseOver = () => {
+      createTimeline()
+        .add(card.borderColor, {
+          r: hoverBorder.r,
+          g: hoverBorder.g,
+          b: hoverBorder.b,
+          duration: 150,
+          ease: "outQuad",
+        })
+        .add(card.backgroundColor, {
+          r: hoverBg.r,
+          g: hoverBg.g,
+          b: hoverBg.b,
+          duration: 150,
+          ease: "outQuad",
+        });
+    };
+
+    card.onMouseOut = () => {
+      createTimeline()
+        .add(card.borderColor, {
+          r: normalBorder.r,
+          g: normalBorder.g,
+          b: normalBorder.b,
+          duration: 200,
+          ease: "outQuad",
+        })
+        .add(card.backgroundColor, {
+          r: normalBg.r,
+          g: normalBg.g,
+          b: normalBg.b,
+          duration: 200,
+          ease: "outQuad",
+        });
+    };
+
+    if (toy.onClick) {
+      const originalOnMouse = card.onMouse;
+      card.onMouse = (event: any) => {
+        if (event.type === "click" || event.type === "up") {
+          toy.onClick!();
+        }
+        if (originalOnMouse) {
+          originalOnMouse(event);
+        }
+      };
+    }
+
+    return card;
+  }
+}