im-pickle-rick 0.1.0

package/src/ui/test-setup.ts

@@ -0,0 +1,300 @@
+import { mock } from "bun:test";
+
+export class MockRenderable {
+  public id = "";
+  public visible = true;
+  public zIndex = 0;
+  public _children: any[] = [];
+  public _handlers: Record<string, Function[]> = {};
+  public _ctx: any;
+  
+  constructor(renderer: any, options: any) {
+    this._ctx = renderer;
+    this.id = options?.id || "";
+    this.visible = options?.visible !== false;
+    this._children = [];
+    this._handlers = {};
+  }
+
+  public add(child: any) { 
+    if (child) this._children.push(child); 
+  }
+  public remove(id: string) { 
+    this._children = this._children.filter((c: any) => c.id !== id); 
+  }
+  public getChildren() { 
+    return this._children || []; 
+  }
+  public destroy() {}
+  public destroyRecursively() {}
+  public onMouse() {}
+  public focus() {}
+  public blur() {}
+  public requestRender() {}
+  
+  public on(event: string, handler: Function) {
+    if (!this._handlers[event]) this._handlers[event] = [];
+    this._handlers[event].push(handler);
+  }
+  
+  public off(event: string, handler: Function) {
+    if (this._handlers[event]) {
+      this._handlers[event] = this._handlers[event].filter((h: any) => h !== handler);
+    }
+  }
+  
+  public emit(event: string, ...args: any[]) {
+    if (this._handlers[event]) {
+      this._handlers[event].forEach((h: any) => h(...args));
+    }
+  }
+}
+
+export class MockCliRenderer {
+  public root = new MockRenderable(null, { id: "root" });
+  public keyInput: any;
+  public _internalKeyInput: any;
+  public requestRender = mock(() => {});
+  public addInputHandler = mock(() => {});
+  public registerLifecyclePass = mock(() => {});
+  public on = mock(() => {});
+  public off = mock(() => {});
+  public start = mock(() => {});
+  public stop = mock(() => {});
+  public getSelection = mock(() => ({ isSelecting: false }));
+  public clearSelection = mock(() => {});
+  public focusRenderable = mock(() => {});
+  public useMouse = false;
+
+  constructor() {
+    this.keyInput = {
+      on: mock(function(this: any, event: string, handler: Function) {
+        if (!this._handlers) this._handlers = {};
+        if (!this._handlers[event]) this._handlers[event] = [];
+        this._handlers[event].push(handler);
+      }),
+      off: mock(function(this: any, event: string, handler: Function) {
+        if (this._handlers && this._handlers[event]) {
+          this._handlers[event] = this._handlers[event].filter((h: any) => h !== handler);
+        }
+      }),
+      emit: mock(function(this: any, event: string, ...args: any[]) {
+        if (this._handlers && this._handlers[event]) {
+          this._handlers[event].forEach((h: any) => h(...args));
+        }
+      }),
+      removeListener: mock(() => {}),
+      _handlers: {} as Record<string, Function[]>
+    };
+    this._internalKeyInput = {
+      onInternal: mock(() => {}),
+      offInternal: mock(() => {}),
+    };
+  }
+}
+
+export const mockAppendFile = mock(async () => {});
+export const mockMkdir = mock(async () => {});
+export const mockWriteFile = mock(async () => {});
+export const mockReadFile = mock(async () => "mock content");
+
+// Global mock registration
+mock.module("@opentui/core", () => {
+  return {
+    CliRenderer: MockCliRenderer,
+    createCliRenderer: mock(async () => new MockCliRenderer()),
+    Renderable: MockRenderable,
+    InputRenderable: class extends MockRenderable {
+      public height = 1;
+      public plainText = "";
+      public value = "";
+      public virtualLineCount = 1;
+      public maxLength = 1000;
+      public yogaNode = { markDirty: mock(() => {}) };
+      public placeholder = "";
+      public _placeholder = "";
+      public position = "relative";
+      public onContentChange: () => void = () => {};
+      constructor(ctx: any, options: any) { 
+        super(ctx, options);
+        this.value = options?.value || ""; 
+        this.plainText = this.value;
+        this.maxLength = options?.maxLength ?? 1000;
+        this.height = options?.height ?? 1;
+        
+        // Ensure methods that might be overridden in subclasses are on the prototype OR
+        // allow them to be shadowed by subclass properties.
+        // We'll keep them as instance properties for now but use bind to allow super calls
+      }
+      public deleteCharBackward = mock(() => true);
+      public deleteChar = mock(() => true);
+      public handleKeyPress = mock(() => true);
+      public newLine = mock(() => true);
+      public handlePaste = mock(() => {});
+      public insertText = mock(function(this: any, text: string) { this.plainText += text; });
+      public setText = mock(function(this: any, text: string) { this.plainText = text; });
+      public submit = mock(() => true);
+      public removeHighlightsByRef = mock(() => {});
+      public addHighlightByCharRange = mock(() => {});
+      public syntaxStyle = { registerStyle: mock(() => 1), destroy: mock(() => {}) };
+    },
+    BoxRenderable: class extends MockRenderable {
+      public backgroundColor: any = { r: 0, g: 0, b: 0, a: 1 };
+      public borderColor: any = { r: 0, g: 0, b: 0, a: 1 };
+      public right = 0;
+      public height: any = 0;
+      public minHeight = 0;
+      public flexDirection = "column";
+      public alignItems = "stretch";
+      public justifyContent = "flex-start";
+      public paddingTop = 0;
+      constructor(renderer: any, options: any) {
+        super(renderer, options);
+        this.height = options?.height || 0;
+        this.minHeight = options?.minHeight || 0;
+        if (options?.backgroundColor) {
+          this.backgroundColor = typeof options.backgroundColor === 'string'
+            ? { r: 0, g: 0, b: 0, a: 1, toString: () => options.backgroundColor }
+            : options.backgroundColor;
+        }
+        if (options?.borderColor) {
+          this.borderColor = typeof options.borderColor === 'string'
+            ? { r: 0, g: 0, b: 0, a: 1, toString: () => options.borderColor }
+            : options.borderColor;
+        }
+      }
+    },
+    ScrollBoxRenderable: class extends MockRenderable {
+      public stopAutoScroll = mock(() => {});
+    },
+    TextRenderable: class extends MockRenderable {
+      public content = "";
+      public fg = "";
+      constructor(renderer: any, options: any) { 
+        super(renderer, options);
+        this.content = options?.content || ""; 
+      }
+    },
+    SelectRenderable: class extends MockRenderable {
+      public options: any[] = [];
+      constructor(renderer: any, options: any) {
+        super(renderer, options);
+        this.options = options?.options || [];
+      }
+      public setSelectedIndex = mock(() => {});
+      public moveUp = mock(() => {});
+      public moveDown = mock(() => {});
+      public selectCurrent = mock(() => {});
+    },
+    TabSelectRenderable: class extends MockRenderable {
+      constructor(renderer: any, options: any) {
+        super(renderer, options);
+      }
+    },
+    ASCIIFontRenderable: class extends MockRenderable {},
+    DiffRenderable: class extends MockRenderable {},
+    FrameBufferRenderable: class extends MockRenderable {},
+    MarkdownRenderable: class extends MockRenderable {},
+    fg: () => (text: string) => text,
+    RGBA: { 
+      fromValues: mock((r: number, g: number, b: number, a: number) => ({ r, g, b, a, toString: () => `rgba(${r},${g},${b},${a})` })),
+      fromHex: mock((hex: string) => {
+        if (typeof hex !== 'string') return { r: 0, g: 0, b: 0, a: 1, toString: () => String(hex) };
+        const r = parseInt(hex.slice(1, 3), 16) || 0;
+        const g = parseInt(hex.slice(3, 5), 16) || 0;
+        const b = parseInt(hex.slice(5, 7), 16) || 0;
+        return { r, g, b, a: 1, toString: () => hex };
+      }),
+      fromInts: mock((r: number, g: number, b: number, a: number) => ({ r, g, b, a, toString: () => `rgba(${r},${g},${b},${a})` })),
+    },
+    parseColor: mock((c: string) => {
+      if (typeof c === 'string' && c.startsWith("#")) {
+        const r = parseInt(c.slice(1, 3), 16) || 0;
+        const g = parseInt(c.slice(3, 5), 16) || 0;
+        const b = parseInt(c.slice(5, 7), 16) || 0;
+        return { r, g, b, a: 1, toString: () => c };
+      }
+      return { r: 0, g: 0, b: 0, a: 1, toString: () => String(c) };
+    }),
+    parseColorHex: mock((hex: string) => {
+      if (typeof hex !== 'string') return { r: 0, g: 0, b: 0, a: 1, toString: () => String(hex) };
+      const r = parseInt(hex.slice(1, 3), 16) || 0;
+      const g = parseInt(hex.slice(3, 5), 16) || 0;
+      const b = parseInt(hex.slice(5, 7), 16) || 0;
+      return { r, g, b, a: 1, toString: () => hex };
+    }),
+    rgbToHex: mock((rgbaOrR: any, gArg?: number, bArg?: number) => {
+      // Handle both RGBA object and individual numbers
+      const r = typeof rgbaOrR === 'object' ? rgbaOrR.r : rgbaOrR;
+      const g = typeof rgbaOrR === 'object' ? rgbaOrR.g : gArg ?? 0;
+      const b = typeof rgbaOrR === 'object' ? rgbaOrR.b : bArg ?? 0;
+      const toHex = (n: number) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }),
+    createTimeline: mock(() => {
+      const tl: any = {
+        _actions: [] as Function[],
+        add: function(target: any, options: any) {
+          const { onUpdate, onComplete, duration, ease, ...props } = options || {};
+          const anim = { progress: 1 };
+          tl._actions.push(() => {
+            if (target) Object.assign(target, props);
+            if (onUpdate) onUpdate(anim);
+            if (onComplete) onComplete(anim);
+          });
+          queueMicrotask(() => {
+            while (tl._actions.length > 0) {
+              const action = tl._actions.shift();
+              if (action) action();
+            }
+          });
+          return tl;
+        },
+        play: function() {
+          while (tl._actions.length > 0) {
+            const action = tl._actions.shift();
+            if (action) action();
+          }
+          return tl;
+        },
+        pause: function() { return tl; },
+      };
+      return tl;
+    }),
+    StyledText: class { 
+      constructor(public chunks: any[]) {}
+      public toString() {
+        return this.chunks.map(c => typeof c === 'string' ? c : (c.text || '')).join('');
+      }
+    },
+    TextAttributes: { BOLD: 1 },
+    Timeline: class {},
+    SelectRenderableEvents: { CHANGE: "change", SELECTION_CHANGED: "selection_changed", ITEM_SELECTED: "item_selected" },
+    TabSelectRenderableEvents: { CHANGE: "change" },
+    InputRenderableEvents: {
+      ENTER: "enter",
+      INPUT: "input",
+      SUBMIT: "submit",
+    },
+    RenderableEvents: {
+      FOCUS: "focus",
+      BLUR: "blur",
+    },
+    SyntaxStyle: { 
+      create: mock(() => ({ registerStyle: mock(() => 1), destroy: mock(() => {}) })),
+      fromStyles: mock(() => ({ registerStyle: mock(() => 1), destroy: mock(() => {}) })),
+    },
+    MouseParser: class {
+      parseMouseEvent = mock(() => null);
+    },
+    engine: {
+      attach: mock(() => {}),
+    },
+    MouseParserEvents: {
+      MOUSE_DOWN: "mousedown",
+      MOUSE_UP: "mouseup",
+      MOUSE_MOVE: "mousemove",
+      MOUSE_WHEEL: "mousewheel",
+    }
+  };
+});

package/src/ui/theme.test.ts

@@ -0,0 +1,23 @@
+import { expect, test, describe } from "bun:test";
+import { THEME } from "./theme.js";
+
+describe("UI Theme", () => {
+  test("THEME should contain all required palette keys", () => {
+    const requiredKeys = [
+      "bg", "surface", "footer", "text", "dim", "accent", 
+      "darkAccent", "blue", "white", "green", "error", 
+      "warning", "orange"
+    ];
+    
+    for (const [key, value] of Object.entries(THEME)) {
+      expect(requiredKeys).toContain(key);
+      expect(typeof value).toBe("string");
+      expect(value).toMatch(/^#[0-9a-fA-F]{6}$/);
+    }
+  });
+
+  test("THEME should have specific high-fidelity colors", () => {
+    expect(THEME.bg).toBe("#050f05");
+    expect(THEME.accent).toBe("#76ff03");
+  });
+});

package/src/ui/theme.ts

@@ -0,0 +1,16 @@
+// High-Fidelity "Pickle Sleek" Palette
+export const THEME = {
+  bg: "#050f05",
+  surface: "#0a140a",
+  footer: "#2e7d32",
+  text: "#ccff90",
+  dim: "#4e6e50",
+  accent: "#76ff03",
+  darkAccent: "#212d21",
+  blue: "#2196f3",
+  white: "#ffffff",
+  green: "#4caf50",
+  error: "#ff5252",
+  warning: "#76ff03",
+  orange: "#ffab40",
+};

package/src/ui/views/LandingView.integration.test.ts

@@ -0,0 +1,21 @@
+import { expect, test, describe, beforeEach, mock } from "bun:test";
+import "../test-setup.js";
+import { createMockRenderer } from "../mock-factory.js";
+import { createLandingView } from "./LandingView.js";
+
+describe("LandingView Integration", () => {
+  let mockRenderer: any;
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+  });
+
+  test("should create landing view", async () => {
+    const onEnter = mock(() => {});
+    const result = await createLandingView(mockRenderer as any, onEnter);
+
+    expect(result).toBeDefined();
+    expect(result.root).toBeDefined();
+    expect(result.input).toBeDefined();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { expect, test, describe, mock, beforeEach } from "bun:test";
+import "../test-setup.js";
+import { createMockRenderer } from "../mock-factory.ts";
+
+mock.module("../file-picker-utils.js", () => ({
+  setupFilePicker: mock(() => () => {}),
+}));
+
+import { createLandingView } from "./LandingView.js";
+
+describe("LandingView", () => {
+  let mockRenderer: any;
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+  });
+
+  test("should create landing view", async () => {
+    const onEnter = mock(() => {});
+    const view = await createLandingView(mockRenderer, onEnter);
+    expect(view.root).toBeDefined();
+    expect(view.input).toBeDefined();
+  });
+});

package/src/ui/views/LandingView.ts

@@ -0,0 +1,221 @@
+import {
+  CliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  KeyEvent,
+} from "@opentui/core";
+import * as fs from "fs";
+import * as path from "path";
+import { HEADER_LINES, getLineColor } from "../common.js";
+import { THEME } from "../theme.js";
+import { setupFilePicker, FilePickerState } from "../file-picker-utils.js";
+import { getCurrentBranch } from "../../services/git/branch.js";
+import { isGameboyActive } from "../../games/gameboy/GameboyView.js";
+import { MultiLineInputRenderable, MultiLineInputEvents } from "../components/MultiLineInput.js";
+import { buildVerticalBar, createInputContainerMouseHandler, createProviderMetadataRow, createCtrlCExitHandler } from "../input-chrome.js";
+
+/**
+ * Creates the landing view for the Pickle Rick CLI.
+ * Returns the root container and the input component for further event handling.
+ */
+export async function createLandingView(
+  renderer: CliRenderer,
+  onEnter: (prompt: string, mode: "pickle" | "pickle-prd") => void
+) {
+  const INPUT_CHROME_LINES = 4;
+  let mode: "pickle" | "pickle-prd" = "pickle";
+
+  // Fetch Metadata
+  const cwd = process.cwd();
+  let version = "?.?.?";
+  try {
+    const packageJsonPath = path.resolve(process.cwd(), "package.json");
+    if (fs.existsSync(packageJsonPath)) {
+      const content = fs.readFileSync(packageJsonPath, "utf-8");
+      const pkg = JSON.parse(content);
+      version = pkg.version || "?.?.?";
+    }
+  } catch (e) {
+    // Ignore
+  }
+
+  const root = new BoxRenderable(renderer, {
+    id: "landing-root",
+    width: "100%",
+    height: "100%",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: THEME.bg,
+  });
+
+  const headerContainer = new BoxRenderable(renderer, {
+    id: "landing-header",
+    flexDirection: "column",
+    alignItems: "center",
+    marginBottom: 2,
+  });
+
+  HEADER_LINES.forEach((line, i) => {
+    const color = getLineColor(i);
+    headerContainer.add(
+      new TextRenderable(renderer, {
+        id: `landing-header-line-${i}`,
+        content: line.trimEnd(),
+        fg: color,
+      })
+    );
+  });
+
+  const inputContainer = new BoxRenderable(renderer, {
+    id: "landing-input-container",
+    width: 80,
+    minHeight: 5,
+    flexDirection: "column",
+    backgroundColor: THEME.surface,
+    paddingLeft: 1,
+    paddingRight: 1,
+  });
+
+  const input = new MultiLineInputRenderable(renderer, {
+    id: "landing-input",
+    flexGrow: 1,
+    placeholder: "I turned myself into a TUI, Morty! *Belch* Ask me anything...",
+    textColor: THEME.text,
+    focusedTextColor: THEME.text,
+    minHeight: 1,
+    maxHeight: 10,
+  });
+
+  const inputRow = new BoxRenderable(renderer, {
+    id: "landing-input-row",
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+  });
+  inputRow.add(input);
+
+  const { row: metadataRow } = createProviderMetadataRow(renderer, "landing");
+
+  inputContainer.add(new BoxRenderable(renderer, { id: "landing-spacer1", height: 1 }));
+  inputContainer.add(inputRow);
+  inputContainer.add(new BoxRenderable(renderer, { id: "landing-spacer2", height: 1 }));
+  inputContainer.add(metadataRow);
+  inputContainer.add(new BoxRenderable(renderer, { id: "landing-spacer3", height: 1 }));
+
+  // Bottom footer bar with cwd and version
+  const footerBar = new BoxRenderable(renderer, {
+    id: "landing-footer-bar",
+    width: "100%",
+    height: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    paddingLeft: 1,
+    paddingRight: 1,
+  });
+
+  const footerCwd = new TextRenderable(renderer, {
+    id: "landing-footer-cwd",
+    content: cwd,
+    fg: THEME.dim,
+  });
+  footerBar.add(footerCwd);
+
+  const footerVersion = new TextRenderable(renderer, {
+    id: "landing-footer-version",
+    content: version,
+    fg: THEME.dim,
+  });
+  footerBar.add(footerVersion);
+
+  // Fetch branch asynchronously
+  getCurrentBranch().then((branch) => {
+    if (branch) {
+      footerCwd.content = `${cwd}:${branch}`;
+      renderer.requestRender();
+    }
+  });
+
+  const inputDecorativeBar = new TextRenderable(renderer, {
+    id: "landing-decorative-bar",
+    content: buildVerticalBar(inputContainer.minHeight ?? 5),
+    fg: THEME.accent,
+    position: "absolute",
+    left: 0,
+    top: 0,
+  });
+  inputContainer.add(inputDecorativeBar);
+
+  const footerHints = new BoxRenderable(renderer, {
+    id: "landing-footer-hints",
+    width: 80,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    marginTop: 1,
+  });
+
+  const hintsText = new TextRenderable(renderer, {
+    id: "landing-hints-text",
+    content: "ctrl+c exit",
+    fg: THEME.dim,
+  });
+  footerHints.add(hintsText);
+
+  inputContainer.onMouse = createInputContainerMouseHandler(inputContainer, input);
+
+  const pickerState: FilePickerState = { activePicker: null };
+
+  input.on(MultiLineInputEvents.INPUT, (value: string) => {
+    const minHeight = typeof inputContainer.minHeight === "number" ? inputContainer.minHeight : 5;
+    const inputHeight = typeof input.height === "number" ? input.height : 1;
+    const nextHeight = Math.max(minHeight, inputHeight + INPUT_CHROME_LINES);
+    if (inputContainer.height !== nextHeight) {
+      inputContainer.height = nextHeight;
+      inputDecorativeBar.content = buildVerticalBar(nextHeight);
+      renderer.requestRender();
+    }
+  });
+
+  input.on(MultiLineInputEvents.SUBMIT, (value: string) => {
+    if (pickerState.activePicker || pickerState.justClosed || isGameboyActive()) return;
+    onEnter(value, mode);
+  });
+
+  const onKey = createCtrlCExitHandler({
+    renderer,
+    hintText: hintsText,
+    originalContent: "ctrl+c exit",
+    shouldSkip: () => !root.visible || !!pickerState.activePicker || isGameboyActive(),
+  });
+
+  renderer.keyInput.on("keypress", (key: KeyEvent) => {
+    if (key.name === "return" && key.shift) {
+      input.value = input.value + "\n";
+      renderer.requestRender();
+      return true;
+    }
+    return false;
+  });
+
+  renderer.keyInput.on("keypress", onKey);
+
+  setupFilePicker(renderer, input, inputContainer, pickerState, {
+    bottom: () => {
+      const height = inputContainer.height;
+      return typeof height === "number" ? height : 5;
+    },
+    width: "100%",
+  });
+
+  root.add(headerContainer);
+  root.add(inputContainer);
+  root.add(footerHints);
+  root.add(footerBar);
+
+  input.focus();
+
+  return { root, input };
+}

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

@@ -0,0 +1,24 @@
+import { expect, test, describe, mock, beforeEach } from "bun:test";
+import "../test-setup.js";
+import { createMockRenderer } from "../mock-factory.ts";
+
+mock.module("node:fs/promises", () => ({
+  readFile: mock(async () => "line1\nline2\nline3"),
+  stat: mock(async () => ({ size: 100 })),
+}));
+
+import { LogView } from "./LogView.js";
+
+describe("LogView", () => {
+  let mockRenderer: any;
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+  });
+
+  test("should initialize", () => {
+    const view = new LogView(mockRenderer, "test.log");
+    expect(view).toBeDefined();
+    expect(view.root).toBeDefined();
+  });
+});