im-pickle-rick 0.1.0

package/src/ui/dialogs/PRPreviewDialog.test.ts

@@ -0,0 +1,50 @@
+import { mock, expect, test, describe, beforeEach, afterEach, spyOn } from "bun:test";
+import { createMockRenderer } from "../mock-factory.ts";
+import * as git from "../../services/git/index.js";
+import { PRPreviewDialog } from "./PRPreviewDialog.ts";
+
+describe("PRPreviewDialog", () => {
+  let mockRenderer: any;
+  let events: any;
+  let spies: any[] = [];
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+    events = {
+      onConfirm: mock(async () => {}),
+      onCancel: mock(() => {}),
+    };
+
+    // Use spyOn instead of global mock.module to avoid polluting other tests
+    spies = [
+      spyOn(git, "generatePRDescription").mockResolvedValue({ title: "Test Title", body: "Test Body" }),
+    ];
+  });
+
+  afterEach(() => {
+    spies.forEach(spy => spy.mockRestore());
+  });
+
+  test("should initialize and setup UI", () => {
+    const dialog = new PRPreviewDialog(mockRenderer, events);
+    expect(dialog).toBeDefined();
+    expect(dialog.isOpen()).toBe(false);
+  });
+
+  test("should show and load PR description", async () => {
+    const dialog = new PRPreviewDialog(mockRenderer, events);
+    
+    const mockSession = {
+      id: "test-session",
+      worktreeInfo: {
+        branchName: "feature",
+        baseBranch: "main",
+      }
+    };
+    
+    await dialog.show(mockSession as any);
+    expect(dialog.isOpen()).toBe(true);
+    // titleInput.value should be set to the title from generatePRDescription
+    expect((dialog as any).titleInput.value).toBe("Test Title");
+  });
+});

package/src/ui/dialogs/PRPreviewDialog.ts

@@ -0,0 +1,346 @@
+import {
+	BoxRenderable,
+	TextRenderable,
+	TextAttributes,
+	ScrollBoxRenderable,
+	CliRenderer,
+	KeyEvent,
+	InputRenderable,
+	MarkdownRenderable,
+	SyntaxStyle,
+} from "@opentui/core";
+import { THEME } from "../theme.js";
+import type { SessionData } from "../../types/tasks.js";
+import { generatePRDescription } from "../../services/git/index.js";
+
+export interface PRPreviewDialogEvents {
+	onConfirm: (session: SessionData, title: string, body: string) => Promise<void>;
+	onCancel: () => void;
+}
+
+export class PRPreviewDialog {
+	public root: BoxRenderable;
+	private renderer: CliRenderer;
+	private isVisible = false;
+	private session: SessionData | null = null;
+	private events: PRPreviewDialogEvents;
+	private keyHandler: ((key: KeyEvent) => void) | null = null;
+
+	// UI Elements
+	private overlay: BoxRenderable;
+	private mainPanel: BoxRenderable;
+	private headerBar: BoxRenderable;
+	private titleText: TextRenderable;
+	private contentArea: BoxRenderable;
+	private titleInput: InputRenderable;
+	private bodyScrollContainer: ScrollBoxRenderable;
+	private bodyPreview: MarkdownRenderable;
+	private footerBar: BoxRenderable;
+	private statusText: TextRenderable;
+
+	// State
+	private prTitle: string = "";
+	private prBody: string = "";
+	private isEditingTitle = false;
+	private isLoading = false;
+
+	constructor(renderer: CliRenderer, events: PRPreviewDialogEvents) {
+		this.renderer = renderer;
+		this.events = events;
+
+		// Background overlay
+		this.overlay = new BoxRenderable(renderer, {
+			id: "pr-preview-overlay",
+			width: "100%",
+			height: "100%",
+			position: "absolute",
+			left: 0,
+			top: 0,
+			backgroundColor: THEME.bg,
+			visible: false,
+			zIndex: 31000,
+			flexDirection: "column",
+		});
+
+		// Main panel
+		this.mainPanel = new BoxRenderable(renderer, {
+			id: "pr-preview-main",
+			width: "100%",
+			height: "100%",
+			flexDirection: "column",
+			padding: 2,
+		});
+		this.overlay.add(this.mainPanel);
+
+		// Header bar
+		this.headerBar = new BoxRenderable(renderer, {
+			id: "pr-preview-header",
+			width: "100%",
+			height: 3,
+			flexDirection: "row",
+			alignItems: "center",
+			marginBottom: 1,
+			flexShrink: 0,
+		});
+		this.mainPanel.add(this.headerBar);
+
+		this.titleText = new TextRenderable(renderer, {
+			id: "pr-preview-title",
+			content: "Create Pull Request",
+			fg: THEME.accent,
+			attributes: TextAttributes.BOLD,
+		});
+		this.headerBar.add(this.titleText);
+
+		// Content area
+		this.contentArea = new BoxRenderable(renderer, {
+			id: "pr-preview-content",
+			width: "100%",
+			flexGrow: 1,
+			flexDirection: "column",
+		});
+		this.mainPanel.add(this.contentArea);
+
+		// Title section
+		const titleSection = new BoxRenderable(renderer, {
+			id: "pr-preview-title-section",
+			width: "100%",
+			flexDirection: "column",
+			marginBottom: 2,
+			flexShrink: 0,
+		});
+		this.contentArea.add(titleSection);
+
+		const titleLabel = new TextRenderable(renderer, {
+			id: "pr-preview-title-label",
+			content: "Title:",
+			fg: THEME.white,
+			attributes: TextAttributes.BOLD,
+			marginBottom: 1,
+		});
+		titleSection.add(titleLabel);
+
+		this.titleInput = new InputRenderable(renderer, {
+			id: "pr-preview-title-input",
+			width: "100%",
+			placeholder: "Enter PR title...",
+			backgroundColor: THEME.surface,
+			cursorColor: THEME.accent,
+			textColor: THEME.text,
+			placeholderColor: THEME.dim,
+		});
+		titleSection.add(this.titleInput);
+
+		// Body section
+		const bodySection = new BoxRenderable(renderer, {
+			id: "pr-preview-body-section",
+			width: "100%",
+			flexGrow: 1,
+			flexDirection: "column",
+		});
+		this.contentArea.add(bodySection);
+
+		const bodyLabel = new TextRenderable(renderer, {
+			id: "pr-preview-body-label",
+			content: "Description (Preview):",
+			fg: THEME.white,
+			attributes: TextAttributes.BOLD,
+			marginBottom: 1,
+		});
+		bodySection.add(bodyLabel);
+
+		this.bodyScrollContainer = new ScrollBoxRenderable(renderer, {
+			id: "pr-preview-body-scroll",
+			width: "100%",
+			flexGrow: 1,
+			scrollY: true,
+			backgroundColor: THEME.surface,
+			border: true,
+			borderColor: THEME.darkAccent,
+			contentOptions: {
+				padding: 1,
+			},
+		});
+		bodySection.add(this.bodyScrollContainer);
+
+		this.bodyPreview = new MarkdownRenderable(renderer, {
+			id: "pr-preview-body-content",
+			content: "",
+			width: "100%",
+			syntaxStyle: SyntaxStyle.fromStyles({}),
+		});
+		this.bodyScrollContainer.add(this.bodyPreview);
+
+		// Footer bar
+		this.footerBar = new BoxRenderable(renderer, {
+			id: "pr-preview-footer",
+			width: "100%",
+			height: 3,
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			marginTop: 1,
+			flexShrink: 0,
+		});
+		this.mainPanel.add(this.footerBar);
+
+		const footerLeft = new TextRenderable(renderer, {
+			id: "pr-preview-footer-left",
+			content: "[Enter] Create PR | [ESC] Cancel | [Tab] Edit Title",
+			fg: THEME.dim,
+		});
+		this.footerBar.add(footerLeft);
+
+		this.statusText = new TextRenderable(renderer, {
+			id: "pr-preview-status",
+			content: "",
+			fg: THEME.accent,
+		});
+		this.footerBar.add(this.statusText);
+
+		this.root = this.overlay;
+	}
+
+	private setupKeyboard() {
+		if (this.keyHandler) return;
+
+		this.keyHandler = (key: KeyEvent) => {
+			if (!this.isVisible || this.isLoading) return;
+
+			// If title input is focused, let it handle keys
+			if (this.titleInput.focused) {
+				if (key.name === "escape") {
+					this.titleInput.blur();
+					this.isEditingTitle = false;
+				} else if (key.name === "return" || key.name === "enter") {
+					this.prTitle = this.titleInput.value;
+					this.titleInput.blur();
+					this.isEditingTitle = false;
+				}
+				return;
+			}
+
+			// Tab to edit title
+			if (key.name === "tab") {
+				this.isEditingTitle = true;
+				this.titleInput.focus();
+			}
+			// Enter to confirm
+			else if (key.name === "return" || key.name === "enter") {
+				this.prTitle = this.titleInput.value;
+				this.confirmCreate();
+			}
+			// Escape to cancel
+			else if (key.name === "escape") {
+				this.hide();
+				this.events.onCancel();
+			}
+		};
+
+		this.renderer.keyInput.on("keypress", this.keyHandler);
+	}
+
+	private cleanupKeyboard() {
+		if (this.keyHandler) {
+			this.renderer.keyInput.off("keypress", this.keyHandler);
+			this.keyHandler = null;
+		}
+	}
+
+	private async loadPRDescription() {
+		if (!this.session?.worktreeInfo) return;
+
+		this.isLoading = true;
+		this.statusText.content = "Generating PR description...";
+		this.renderer.requestRender();
+
+		try {
+			const { branchName, baseBranch } = this.session.worktreeInfo;
+			const sessionDir = this.session.id;
+
+			const prDesc = await generatePRDescription(
+				sessionDir,
+				branchName,
+				baseBranch
+			);
+
+			this.prTitle = prDesc.title;
+			this.prBody = prDesc.body;
+
+			this.titleInput.value = this.prTitle;
+			this.bodyPreview.content = this.prBody;
+			this.statusText.content = "";
+		} catch (error) {
+			this.statusText.content = `Error: ${error instanceof Error ? error.message : "Failed to generate description"}`;
+		} finally {
+			this.isLoading = false;
+			this.renderer.requestRender();
+		}
+	}
+
+	private async confirmCreate() {
+		if (!this.session || this.isLoading) return;
+
+		this.isLoading = true;
+		this.statusText.content = "Creating PR...";
+		this.renderer.requestRender();
+
+		try {
+			await this.events.onConfirm(this.session, this.prTitle, this.prBody);
+			this.hide();
+		} catch (error) {
+			this.statusText.content = `Error: ${error instanceof Error ? error.message : "Failed to create PR"}`;
+			this.isLoading = false;
+			this.renderer.requestRender();
+		}
+	}
+
+	public async show(session: SessionData) {
+		if (this.isVisible) return;
+		if (!session.worktreeInfo) return;
+
+		this.session = session;
+		this.isVisible = true;
+		this.overlay.visible = true;
+
+		// Update title
+		const { branchName, baseBranch } = session.worktreeInfo;
+		this.titleText.content = `Create Pull Request: ${branchName} -> ${baseBranch}`;
+
+		// Load PR description
+		await this.loadPRDescription();
+
+		// Setup keyboard
+		this.setupKeyboard();
+
+		this.renderer.requestRender();
+	}
+
+	public hide() {
+		if (!this.isVisible) return;
+
+		this.isVisible = false;
+		this.overlay.visible = false;
+		this.cleanupKeyboard();
+
+		// Reset state
+		this.prTitle = "";
+		this.prBody = "";
+		this.isEditingTitle = false;
+		this.isLoading = false;
+		this.titleInput.value = "";
+		this.titleInput.blur();
+		this.bodyPreview.content = "";
+		this.statusText.content = "";
+
+		this.renderer.requestRender();
+	}
+
+	public isOpen(): boolean {
+		return this.isVisible;
+	}
+
+	public destroy() {
+		this.cleanupKeyboard();
+	}
+}

package/src/ui/dialogs/test-utils.ts

@@ -0,0 +1,232 @@
+import { mock } from "bun:test";
+import type { SessionData } from "../../types/tasks.ts";
+
+export interface MockComponent {
+  id: string;
+  visible: boolean;
+  onMouse?: ((e: { type: string }) => void) | null;
+  add?: ReturnType<typeof mock>;
+  remove?: ReturnType<typeof mock>;
+}
+
+export interface MockBox extends MockComponent {
+  backgroundColor?: string;
+  opacity: number;
+  right: number;
+  getChildren: ReturnType<typeof mock>;
+}
+
+export interface MockScrollBox extends MockComponent {
+  getChildren: ReturnType<typeof mock>;
+}
+
+export interface MockText extends MockComponent {
+  fg: string;
+  content: string;
+}
+
+export interface MockSelect extends MockComponent {
+  options: Array<{ title: string; value: string; description?: string }>;
+  on: ReturnType<typeof mock>;
+  emit: (event: string, ...args: Array<string | number | boolean | object>) => void;
+  moveUp: ReturnType<typeof mock>;
+  moveDown: ReturnType<typeof mock>;
+  selectCurrent: ReturnType<typeof mock>;
+  setSelectedIndex: ReturnType<typeof mock>;
+}
+
+export interface MockInput extends MockComponent {
+  focused: boolean;
+  value: string;
+  focus: ReturnType<typeof mock>;
+  blur: ReturnType<typeof mock>;
+}
+
+interface MockRenderableOptions {
+  id?: string;
+  visible?: boolean;
+  opacity?: number;
+  backgroundColor?: string;
+  content?: string;
+  fg?: string;
+  view?: string;
+  diff?: string;
+}
+
+export interface MockRenderer {
+  requestRender: ReturnType<typeof mock>;
+  root: { add: ReturnType<typeof mock> };
+  keyInput: {
+    on: ReturnType<typeof mock>;
+    off: ReturnType<typeof mock>;
+    emit: (event: string, ...args: Array<{ name: string; ctrl?: boolean; meta?: boolean } | number | string>) => void;
+  };
+}
+
+/**
+ * Standard mocking strategy for @opentui/core components.
+ */
+export const createOpentuiMocks = () => {
+  const mocks = {
+    BoxRenderable: class implements MockBox {
+      public visible = true;
+      public opacity = 1;
+      public id: string;
+      public backgroundColor: string | undefined;
+      public right: number = 0;
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-box";
+        if (options?.visible !== undefined) this.visible = options.visible;
+        if (options?.opacity !== undefined) this.opacity = options.opacity;
+        if (options?.backgroundColor !== undefined) this.backgroundColor = options.backgroundColor;
+      }
+      add = mock(() => {});
+      remove = mock(() => {});
+      getChildren = mock(() => [] as MockComponent[]);
+      onMouse = null;
+    },
+    ScrollBoxRenderable: class implements MockScrollBox {
+      public id: string;
+      public visible = true;
+      private children: MockComponent[] = [];
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-scrollbox";
+        this.getChildren = mock(() => this.children);
+        this.add = mock((child: MockComponent) => this.children.push(child));
+        this.remove = mock((id: string) => {
+          this.children = this.children.filter(c => c.id !== id);
+        });
+      }
+      add: ReturnType<typeof mock> = mock(() => {});
+      getChildren: ReturnType<typeof mock> = mock(() => []);
+      remove: ReturnType<typeof mock> = mock(() => {});
+    },
+    TextRenderable: class implements MockText {
+      public id: string;
+      public visible = true;
+      public fg = "";
+      public content: string = "";
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-text";
+        this.content = options?.content || "";
+        this.fg = options?.fg || "";
+      }
+      onMouse = null;
+    },
+    DiffRenderable: class implements MockComponent {
+      public id: string;
+      public visible = true;
+      public diff: string = "";
+      public view: string = "";
+      public filetype: string = "";
+      public wrapMode: string = "";
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-diff";
+        this.diff = options?.diff || "";
+        this.view = options?.view || "unified";
+      }
+      destroy = mock(() => {});
+    },
+    SelectRenderable: class implements MockSelect {
+      public id: string;
+      public visible = true;
+      public options: Array<{ title: string; value: string; description?: string }> = [];
+      private handlers: Record<string, Function[]> = {};
+      constructor(public renderer: MockRenderer, public options_init: MockRenderableOptions) {
+        this.id = options_init?.id || "mock-select";
+      }
+      on = mock((event: string, handler: Function) => {
+        if (!this.handlers[event]) this.handlers[event] = [];
+        this.handlers[event].push(handler);
+      });
+      emit = (event: string, ...args: Array<string | number | boolean | object>) => {
+        this.handlers[event]?.forEach(h => h(...args));
+      };
+      moveUp = mock(() => {});
+      moveDown = mock(() => {});
+      selectCurrent = mock(() => {});
+      setSelectedIndex = mock(() => {});
+    },
+    InputRenderable: class implements MockInput {
+      public id: string;
+      public visible = true;
+      public focused = false;
+      public value = "";
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-input";
+      }
+      focus = mock(() => { this.focused = true; });
+      blur = mock(() => { this.focused = false; });
+    },
+    MarkdownRenderable: class implements MockComponent {
+      public id: string;
+      public visible = true;
+      public content = "";
+      constructor(public renderer: MockRenderer, public options: MockRenderableOptions) {
+        this.id = options?.id || "mock-markdown";
+      }
+    },
+    createTimeline: mock(() => ({
+      add: mock((target: { opacity: number }, options: { opacity?: number; onComplete?: () => void }) => {
+        if (options.opacity !== undefined) target.opacity = options.opacity;
+        if (options.onComplete) options.onComplete();
+        return { play: mock(() => {}) };
+      }),
+      play: mock(() => {}),
+    })),
+    TextAttributes: { BOLD: 1 },
+    RGBA: { fromInts: mock(() => ({})), fromValues: mock(() => ({})) },
+    parseColor: mock(() => ({})),
+    SyntaxStyle: { fromStyles: mock(() => ({ destroy: mock(() => {}) })) },
+    SelectRenderableEvents: { SELECTION_CHANGED: "selection_changed", ITEM_SELECTED: "item_selected" },
+  };
+  return mocks;
+};
+
+export const gitMock = {
+  getChangedFiles: mock(async () => [] as Array<{ path: string; status: string; additions: number; deletions: number }>),
+  getFileDiff: mock(async () => ""),
+  getFileType: mock(() => "typescript"),
+  getStatusIndicator: mock(() => "M"),
+  getStatusColor: mock(() => "#ffffff"),
+  generatePRDescription: mock(async () => ({ title: "", body: "" })),
+};
+
+export const createMockRenderer = (): MockRenderer => {
+  const handlers: Record<string, Function[]> = {};
+  return {
+    requestRender: mock(() => {}),
+    root: { add: mock(() => {}) },
+    keyInput: {
+      on: mock((event: string, handler: Function) => {
+        if (!handlers[event]) handlers[event] = [];
+        handlers[event].push(handler);
+      }),
+      off: mock((event: string, handler: Function) => {
+        if (handlers[event]) {
+          handlers[event] = handlers[event].filter(h => h !== handler);
+        }
+      }),
+      emit: (event: string, ...args: Array<{ name: string; ctrl?: boolean; meta?: boolean } | number | string>) => {
+        handlers[event]?.forEach(h => h(...args));
+      }
+    }
+  };
+};
+
+/**
+ * Creates a valid SessionData mock for tests.
+ */
+export const createMockSession = (overrides: Partial<SessionData> = {}): SessionData => {
+  return {
+    id: "sessions/test",
+    prompt: "test prompt",
+    startTime: Date.now(),
+    status: "Running",
+    engine: "gemini",
+    isPrdMode: false,
+    iteration: 1,
+    history: [],
+    ...overrides,
+  } as SessionData;
+};

package/src/ui/file-picker-utils.test.ts

@@ -0,0 +1,71 @@
+import { expect, test, describe, mock, beforeEach } from "bun:test";
+import { createMockRenderer } from "./mock-factory.ts";
+import type { InputRenderable, BoxRenderable } from "@opentui/core";
+import type { FilePickerState } from "./file-picker-utils.js";
+
+// Mock search utility
+const mockRecursiveSearch = mock(async () => ({ files: ["test.ts", "other.ts"] }));
+mock.module("../utils/search.js", () => ({
+  recursiveSearch: mockRecursiveSearch,
+}));
+
+// Now import the target
+import { setupFilePicker } from "./file-picker-utils.js";
+
+describe("File Picker Utils", () => {
+  let mockRenderer: any;
+  let mockInput: InputRenderable;
+  let mockContainer: BoxRenderable;
+  let state: FilePickerState;
+
+  beforeEach(() => {
+    mockRenderer = createMockRenderer();
+    
+    mockInput = {
+      value: "",
+      syntaxStyle: null,
+      removeHighlightsByRef: mock(() => {}),
+      addHighlightByCharRange: mock(() => {}),
+      focus: mock(() => {}),
+      on: mock(() => {}),
+      deleteCharBackward: mock(() => false),
+    } as any;
+    
+    mockContainer = {
+      add: mock(() => {}),
+      remove: mock(() => {}),
+    } as any;
+    
+    state = {
+      activePicker: null,
+    };
+  });
+
+  test("setupFilePicker should register syntax highlighting and override delete", () => {
+    const cleanup = setupFilePicker(mockRenderer, mockInput, mockContainer, state);
+    expect(mockInput.syntaxStyle).not.toBeNull();
+    expect(typeof mockInput.deleteCharBackward).toBe("function");
+    cleanup();
+  });
+
+  test("should trigger search when @ is typed", async () => {
+    setupFilePicker(mockRenderer, mockInput, mockContainer, state);
+    
+    // @ts-ignore - accessing mock properties
+    const inputCalls = mockInput.on.mock.calls;
+    const onInput = inputCalls.find((c: [string, Function]) => c[0] === "input")[1];
+    
+    await onInput("Checking @");
+    expect(mockRecursiveSearch).toHaveBeenCalled();
+  });
+
+  test("atomic deletion logic", () => {
+    setupFilePicker(mockRenderer, mockInput, mockContainer, state);
+    
+    mockInput.value = "File is @test.ts";
+    // Should delete @test.ts atomically
+    const deleted = mockInput.deleteCharBackward();
+    expect(deleted).toBe(true);
+    expect(mockInput.value).toBe("File is ");
+  });
+});