im-pickle-rick 0.1.0

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

@@ -0,0 +1,200 @@
+import { CliRenderer, InputRenderable, InputRenderableEvents, BoxRenderable, Renderable, SyntaxStyle, RGBA } from "@opentui/core";
+import { FilePickerView } from "./components/FilePickerView.js";
+import { recursiveSearch } from "../utils/search.js";
+import { THEME } from "./theme.js";
+
+export interface FilePickerState {
+  activePicker: FilePickerView | null;
+  justClosed?: boolean;
+}
+
+/**
+ * Regex to match @-prefixed file paths.
+ * Matches patterns like @file/path or @src/ui/FilePickerView.ts
+ */
+const FILE_PATH_REGEX = /@([^\s@]+)/g;
+
+// Unique reference for our highlights
+const FILE_PATH_HL_REF = 9999;
+
+/**
+ * Sets up a file picker that triggers when " @" is typed in the input.
+ * Also handles atomic deletion of @-prefixed file paths with backspace/delete.
+ * And adds syntax highlighting to @-prefixed file paths.
+ * Returns a cleanup function.
+ */
+type PickerPositionValue = number | string;
+type PickerPositionResolver = () => number;
+
+export function setupFilePicker(
+  renderer: CliRenderer,
+  input: InputRenderable,
+  container: BoxRenderable | (Renderable & { add: (r: Renderable) => void, remove: (id: string) => void }),
+  state: FilePickerState,
+  options: { bottom?: PickerPositionValue | PickerPositionResolver, left?: PickerPositionValue, width?: PickerPositionValue } = {}
+) {
+  const resolveBottom = (): number => {
+    if (typeof options.bottom === "function") {
+      return options.bottom();
+    }
+    if (typeof options.bottom === "number") {
+      return options.bottom;
+    }
+    return 5;
+  };
+  // Setup syntax highlighting for file paths
+  const syntaxStyle = SyntaxStyle.create();
+  const filePathStyleId = syntaxStyle.registerStyle("filepath", {
+    fg: RGBA.fromHex(THEME.accent),
+    bold: true,
+  });
+  input.syntaxStyle = syntaxStyle;
+
+  const cleanupPicker = () => {
+    if (state.activePicker) {
+      state.activePicker.destroy();
+      container.remove(state.activePicker.id);
+      state.activePicker = null;
+
+      // Set a brief grace period to prevent auto-submission on Enter
+      state.justClosed = true;
+      setTimeout(() => {
+        state.justClosed = false;
+      }, 50);
+
+      input.focus();
+      renderer.requestRender();
+    }
+  };
+
+  /**
+   * Update highlights for all @-prefixed file paths in the input
+   */
+  const updateFilePathHighlights = () => {
+    // Clear existing file path highlights
+    input.removeHighlightsByRef(FILE_PATH_HL_REF);
+    
+    const value = input.value;
+    if (!value || filePathStyleId === null) return;
+
+    // Find all @-prefixed file paths and highlight them
+    let match;
+    FILE_PATH_REGEX.lastIndex = 0;
+    while ((match = FILE_PATH_REGEX.exec(value)) !== null) {
+      input.addHighlightByCharRange({
+        start: match.index,
+        end: match.index + match[0].length,
+        styleId: filePathStyleId,
+        hlRef: FILE_PATH_HL_REF,
+      });
+    }
+  };
+
+  /**
+   * Check if the cursor is at the end of an @-prefixed file path and delete it atomically.
+   * Returns true if a path was deleted, false otherwise.
+   */
+  const tryAtomicDelete = (): boolean => {
+    // Only delete atomically when picker is not active
+    if (state.activePicker) return false;
+
+    const value = input.value;
+    if (value.length === 0) return false;
+
+    // Find all @-prefixed file paths in the text
+    const matches: { start: number; end: number; text: string }[] = [];
+    let match;
+    FILE_PATH_REGEX.lastIndex = 0;
+    while ((match = FILE_PATH_REGEX.exec(value)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        text: match[0],
+      });
+    }
+
+    // Check if value ends with a @-prefixed path and delete the entire path
+    for (const m of matches) {
+      if (m.end === value.length) {
+        // Delete the entire @-prefixed path
+        const newValue = value.slice(0, m.start);
+        input.value = newValue;
+        updateFilePathHighlights();
+        renderer.requestRender();
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  // Override the input's deleteCharBackward method to handle atomic deletion
+  const originalDeleteCharBackward = input.deleteCharBackward.bind(input);
+  input.deleteCharBackward = (): boolean => {
+    // Try atomic deletion first (when picker is closed and cursor is at end of @-path)
+    if (tryAtomicDelete()) {
+      return true;
+    }
+    // Otherwise, use the default behavior
+    return originalDeleteCharBackward();
+  };
+
+  input.on(InputRenderableEvents.INPUT, async (value: string) => {
+    // Update highlights whenever input changes
+    updateFilePathHighlights();
+
+    const triggerMatch = value.match(/(?:^| )@([^ ]*)$/);
+    if (triggerMatch) {
+      const query = triggerMatch[1];
+      const { files } = await recursiveSearch(process.cwd(), query);
+      const normalizedFiles = files.map((f) => f.replace(process.cwd() + "/", ""));
+
+      if (normalizedFiles.length > 0) {
+        const pickerBottom = resolveBottom();
+        if (!state.activePicker) {
+          state.activePicker = new FilePickerView(
+            renderer,
+            normalizedFiles,
+            {
+              onSelect: (item) => {
+                // Keep the @ prefix when inserting the file path
+                const newValue = value.replace(/(^| )@[^ ]*$/, "$1@" + item);
+                input.value = newValue;
+                updateFilePathHighlights();
+                cleanupPicker();
+              },
+              onCancel: () => cleanupPicker(),
+            },
+            {
+              position: "absolute",
+              bottom: pickerBottom,
+              left: options.left ?? 0,
+              width: options.width ?? "100%",
+              maxHeight: 10,
+              zIndex: 2000,
+            }
+          );
+          container.add(state.activePicker);
+        } else {
+          (state.activePicker as any).bottom = pickerBottom;
+          state.activePicker.updateItems(normalizedFiles);
+        }
+      } else {
+        cleanupPicker();
+      }
+      renderer.requestRender();
+    } else {
+      cleanupPicker();
+      renderer.requestRender();
+    }
+  });
+
+  // Return enhanced cleanup
+  const originalCleanup = cleanupPicker;
+  return () => {
+    // Restore original deleteCharBackward method
+    input.deleteCharBackward = originalDeleteCharBackward;
+    syntaxStyle.destroy();
+    originalCleanup();
+  };
+}

package/src/ui/input-chrome.test.ts

@@ -0,0 +1,62 @@
+import { expect, test, describe, mock } from "bun:test";
+import { buildVerticalBar, createCtrlCExitHandler } from "./input-chrome.js";
+import { THEME } from "./theme.js";
+import type { CliRenderer, TextRenderable, KeyEvent } from "@opentui/core";
+
+describe("Input Chrome Utilities", () => {
+  describe("buildVerticalBar", () => {
+    test("should build a bar of correct height", () => {
+      expect(buildVerticalBar(1)).toBe("┃");
+      expect(buildVerticalBar(3)).toBe("┃\n┃\n┃");
+      expect(buildVerticalBar(0)).toBe("");
+    });
+
+    test("should handle undefined or percentage as default height 5", () => {
+      const expected = "┃\n┃\n┃\n┃\n┃";
+      expect(buildVerticalBar(undefined)).toBe(expected);
+      expect(buildVerticalBar("100%")).toBe(expected);
+    });
+  });
+
+  describe("createCtrlCExitHandler", () => {
+    test("should show hint on first Ctrl+C and exit on second", () => {
+      const mockRenderer = {
+        destroy: mock(() => {}),
+        requestRender: mock(() => {}),
+      } as unknown as CliRenderer;
+
+      const mockHintText = {
+        content: "",
+        fg: "",
+      } as unknown as TextRenderable;
+      
+      const originalExit = process.exit;
+      Object.defineProperty(process, 'exit', {
+        value: mock(() => {}),
+        configurable: true
+      });
+
+      const handler = createCtrlCExitHandler({
+        renderer: mockRenderer,
+        hintText: mockHintText,
+        originalContent: "Original",
+      });
+
+      // First Ctrl+C
+      const handled1 = handler({ ctrl: true, name: "c" } as KeyEvent);
+      expect(handled1).toBe(true);
+      expect(mockHintText.content).toBe("Press Ctrl+C again to exit" as any);
+      expect(mockHintText.fg).toBe(THEME.warning as any);
+      expect(mockRenderer.requestRender).toHaveBeenCalled();
+      expect(mockRenderer.destroy).not.toHaveBeenCalled();
+
+      // Second Ctrl+C (immediate)
+      const handled2 = handler({ ctrl: true, name: "c" } as KeyEvent);
+      expect(handled2).toBe(true);
+      expect(mockRenderer.destroy).toHaveBeenCalled();
+      expect(process.exit).toHaveBeenCalledWith(0);
+
+      Object.defineProperty(process, 'exit', { value: originalExit });
+    });
+  });
+});

package/src/ui/input-chrome.ts

@@ -0,0 +1,172 @@
+import {
+  CliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  RGBA,
+  KeyEvent,
+} from "@opentui/core";
+import { createMultiGradientText, capitalizeProvider } from "../utils/index.js";
+import { getConfiguredProvider, getConfiguredModel } from "../services/providers/index.js";
+import { THEME } from "./theme.js";
+
+const DOUBLE_TAP_THRESHOLD = 1000; // ms
+
+/**
+ * Builds a vertical decorative bar string of the specified height
+ * Accepts number or percentage string (percentage strings default to 5)
+ */
+export function buildVerticalBar(height: number | `${number}%` | undefined): string {
+  const h = typeof height === "number" ? height : 5;
+  if (h <= 0) return "";
+  return Array.from({ length: h }, () => "┃").join("\n");
+}
+
+/**
+ * Mouse hover/press handler factory for input containers
+ */
+export function createInputContainerMouseHandler(
+  container: BoxRenderable,
+  focusTarget?: { focus: () => void }
+) {
+  return (event: { type: string }) => {
+    if (event.type === "click" && focusTarget) {
+      focusTarget.focus();
+    }
+    switch (event.type) {
+      case "over":
+        container.backgroundColor = "#2d372d";
+        break;
+      case "out":
+        container.backgroundColor = THEME.surface;
+        break;
+      case "down":
+        container.backgroundColor = "#1a241a";
+        break;
+      case "up":
+        container.backgroundColor = "#2d372d";
+        break;
+    }
+  };
+}
+
+const PROVIDER_GRADIENT_COLORS = [
+  RGBA.fromHex("#1b5e20"),
+  RGBA.fromHex("#43a047"),
+  RGBA.fromHex("#76ff03"),
+];
+
+/**
+ * Creates a metadata row with provider gradient text
+ * Returns { row, providerLabel, modelLabel, updateProvider }
+ */
+export function createProviderMetadataRow(
+  renderer: CliRenderer,
+  idPrefix: string
+) {
+  const row = new BoxRenderable(renderer, {
+    id: `${idPrefix}-metadata-row`,
+    width: "100%",
+    height: 1,
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    gap: 1,
+  });
+
+  const pickleLabel = new TextRenderable(renderer, {
+    id: `${idPrefix}-meta-l`,
+    content: "Pickle",
+    fg: THEME.green,
+  });
+  row.add(pickleLabel);
+
+  const providerLabel = new TextRenderable(renderer, {
+    id: `${idPrefix}-meta-m`,
+    content: createMultiGradientText("Loading...", PROVIDER_GRADIENT_COLORS),
+  });
+  row.add(providerLabel);
+
+  const modelLabel = new TextRenderable(renderer, {
+    id: `${idPrefix}-meta-r`,
+    content: "",
+    fg: THEME.dim,
+  });
+  row.add(modelLabel);
+
+  // Fetch and update provider info asynchronously
+  Promise.all([getConfiguredProvider(), getConfiguredModel()])
+    .then(([provider, model]) => {
+      const displayProvider = capitalizeProvider(provider || "gemini");
+      providerLabel.content = createMultiGradientText(
+        displayProvider,
+        PROVIDER_GRADIENT_COLORS
+      );
+      modelLabel.content = model ? `(${model})` : "";
+      renderer.requestRender();
+    })
+    .catch(() => {
+      providerLabel.content = createMultiGradientText(
+        "Gemini",
+        PROVIDER_GRADIENT_COLORS
+      );
+      modelLabel.content = "";
+      renderer.requestRender();
+    });
+
+  return {
+    row,
+    pickleLabel,
+    providerLabel,
+    modelLabel,
+  };
+}
+
+export interface CtrlCExitHandlerOptions {
+  /** The renderer to use for requestRender and destroy */
+  renderer: CliRenderer;
+  /** The text renderable to show the hint in */
+  hintText: TextRenderable;
+  /** The original content to restore after timeout */
+  originalContent: string | ReturnType<typeof createMultiGradientText>;
+  /** Optional callback to check if handler should be skipped (e.g., picker active) */
+  shouldSkip?: () => boolean;
+}
+
+/**
+ * Creates a Ctrl+C double-tap exit handler.
+ * Returns a keypress handler function that can be attached to renderer.keyInput.on("keypress", ...)
+ */
+export function createCtrlCExitHandler(options: CtrlCExitHandlerOptions) {
+  const { renderer, hintText, originalContent, shouldSkip } = options;
+  let lastCtrlCTime = 0;
+  let ctrlCHintTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  return (key: KeyEvent): boolean => {
+    if (shouldSkip?.()) return false;
+
+    if (key.ctrl && key.name === "c") {
+      const now = Date.now();
+      if (now - lastCtrlCTime < DOUBLE_TAP_THRESHOLD) {
+        // Double Ctrl+C - exit
+        if (ctrlCHintTimeout) clearTimeout(ctrlCHintTimeout);
+        renderer.destroy();
+        process.exit(0);
+      } else {
+        // First Ctrl+C - show hint
+        lastCtrlCTime = now;
+        hintText.content = "Press Ctrl+C again to exit";
+        hintText.fg = THEME.warning;
+        renderer.requestRender();
+
+        // Clear hint after threshold
+        if (ctrlCHintTimeout) clearTimeout(ctrlCHintTimeout);
+        ctrlCHintTimeout = setTimeout(() => {
+          hintText.content = originalContent;
+          hintText.fg = THEME.dim;
+          renderer.requestRender();
+        }, DOUBLE_TAP_THRESHOLD);
+      }
+      return true;
+    }
+    return false;
+  };
+}

package/src/ui/logger.test.ts

@@ -0,0 +1,68 @@
+import { mock, expect, test, describe, beforeEach } from "bun:test";
+
+export const mockAppendFile = mock(async () => {});
+export const mockMkdir = mock(async () => {});
+
+mock.module("node:fs/promises", () => ({
+  appendFile: mockAppendFile,
+  mkdir: mockMkdir,
+}));
+
+// Force reload of logger
+const { logInfo, logSuccess, logError, logWarn, logDebug } = await import("./logger.js?t=" + Date.now());
+
+describe("UI Logger", () => {
+  beforeEach(() => {
+    mockAppendFile.mockClear();
+    mockMkdir.mockClear();
+  });
+
+  const waitForAppend = () => new Promise<void>((resolve) => {
+    const check = () => {
+      if (mockAppendFile.mock.calls.length > 0) {
+        resolve();
+      } else {
+        setTimeout(check, 10);
+      }
+    };
+    check();
+  });
+
+  test("logInfo should write [INFO] prefix to log file", async () => {
+    logInfo("Test message");
+    await waitForAppend();
+    
+    expect(mockMkdir).toHaveBeenCalled();
+    expect(mockAppendFile).toHaveBeenCalled();
+    const content = (mockAppendFile.mock.calls[0] as any[])[1];
+    expect(content).toContain("[INFO] Test message\n");
+  });
+
+  test("logSuccess should write [SUCCESS] prefix", async () => {
+    logSuccess("Great success");
+    await waitForAppend();
+    expect(mockAppendFile).toHaveBeenCalled();
+    expect((mockAppendFile.mock.calls[0] as any[])[1]).toContain("[SUCCESS] Great success\n");
+  });
+
+  test("logError should write [ERROR] prefix", async () => {
+    logError("Terrible failure");
+    await waitForAppend();
+    expect(mockAppendFile).toHaveBeenCalled();
+    expect((mockAppendFile.mock.calls[0] as any[])[1]).toContain("[ERROR] Terrible failure\n");
+  });
+
+  test("logWarn should write [WARN] prefix", async () => {
+    logWarn("Be careful");
+    await waitForAppend();
+    expect(mockAppendFile).toHaveBeenCalled();
+    expect((mockAppendFile.mock.calls[0] as any[])[1]).toContain("[WARN] Be careful\n");
+  });
+
+  test("logDebug should write [DEBUG] prefix", async () => {
+    logDebug("Secret stuff");
+    await waitForAppend();
+    expect(mockAppendFile).toHaveBeenCalled();
+    expect((mockAppendFile.mock.calls[0] as any[])[1]).toContain("[DEBUG] Secret stuff\n");
+  });
+});

package/src/ui/logger.ts

@@ -0,0 +1,45 @@
+import { appendFile, mkdir } from "node:fs/promises";
+import { join } from "node:path";
+
+const LOG_DIR = join(process.cwd(), ".pickle");
+const LOG_FILE = join(LOG_DIR, "cli.log");
+
+async function writeLog(line: string): Promise<void> {
+  try {
+    await mkdir(LOG_DIR, { recursive: true });
+    await appendFile(LOG_FILE, line + "\n", "utf-8");
+  } catch (err) {
+    // Only surface write issues when debugging; otherwise stay quiet
+    if (process.env.DEBUG) {
+      console.error("[logger] failed to write log:", err);
+    }
+  }
+}
+
+// Simple wrappers that write to log file; echo to console only in DEBUG
+export function logInfo(msg: string) {
+  void writeLog(`[INFO] ${msg}`);
+  if (process.env.DEBUG) console.log(`[INFO] ${msg}`);
+}
+
+export function logSuccess(msg: string) {
+  void writeLog(`[SUCCESS] ${msg}`);
+  if (process.env.DEBUG) console.log(`[SUCCESS] ${msg}`);
+}
+
+export function logError(msg: string) {
+  void writeLog(`[ERROR] ${msg}`);
+  if (process.env.DEBUG) console.error(`[ERROR] ${msg}`);
+}
+
+export function logWarn(msg: string) {
+  void writeLog(`[WARN] ${msg}`);
+  if (process.env.DEBUG) console.warn(`[WARN] ${msg}`);
+}
+
+export function logDebug(msg: string) {
+  if (process.env.DEBUG) {
+    console.debug(`[DEBUG] ${msg}`);
+  }
+  void writeLog(`[DEBUG] ${msg}`);
+}

package/src/ui/mock-factory.ts

@@ -0,0 +1,6 @@
+import { mock } from "bun:test";
+import { MockCliRenderer } from "./test-setup.js";
+
+export const createMockRenderer = () => {
+  return new MockCliRenderer();
+};

package/src/ui/spinner.test.ts

@@ -0,0 +1,65 @@
+import { expect, test, describe, mock, beforeEach, afterEach } from "bun:test";
+import { ProgressSpinner } from "./spinner.js";
+
+// Mock logger to avoid side effects during spinner tests
+mock.module("./logger.js", () => ({
+  logInfo: mock(() => {}),
+  logSuccess: mock(() => {}),
+  logError: mock(() => {}),
+}));
+
+describe("ProgressSpinner", () => {
+  const originalWrite = process.stdout.write;
+  let capturedOutput = "";
+
+  beforeEach(() => {
+    capturedOutput = "";
+    // @ts-ignore - mocking stdout.write
+    process.stdout.write = mock((str: string | Uint8Array) => {
+      capturedOutput += str.toString();
+      return true;
+    });
+  });
+
+  afterEach(() => {
+    process.stdout.write = originalWrite;
+  });
+
+  test("should initialize with label", () => {
+    const spinner = new ProgressSpinner("Loading");
+    spinner.updateStep("Step 1");
+    expect(capturedOutput).toBe("\rLoading: Step 1");
+  });
+
+  test("should initialize with active settings", () => {
+    const spinner = new ProgressSpinner("Tasks", ["A", "B"]);
+    spinner.updateStep("Running");
+    expect(capturedOutput).toBe("\rTasks [A, B]: Running");
+  });
+
+  test("success() should clear line and stop", () => {
+    const spinner = new ProgressSpinner("Build");
+    spinner.updateStep("compiling");
+    spinner.success("Done");
+    expect(capturedOutput).toContain("\rBuild: compiling");
+    expect(capturedOutput).toContain("\n");
+  });
+
+  test("error() should clear line and stop", () => {
+    const spinner = new ProgressSpinner("Build");
+    spinner.updateStep("compiling");
+    spinner.error("Fail");
+    expect(capturedOutput).toContain("\rBuild: compiling");
+    expect(capturedOutput).toContain("\n");
+  });
+
+  test("stop() should only write newline if active", () => {
+    const spinner = new ProgressSpinner("Idle");
+    spinner.stop();
+    expect(capturedOutput).toBe("");
+    
+    spinner.updateStep("Work");
+    spinner.stop();
+    expect(capturedOutput).toContain("\n");
+  });
+});

package/src/ui/spinner.ts

@@ -0,0 +1,41 @@
+import { logInfo, logSuccess, logError } from "./logger.js";
+
+export class ProgressSpinner {
+  private active = false;
+  private currentLabel: string;
+
+  constructor(label: string, activeSettings?: string[]) {
+    this.currentLabel = label;
+    if (activeSettings && activeSettings.length > 0) {
+      this.currentLabel += ` [${activeSettings.join(", ")}]`;
+    }
+  }
+
+  updateStep(step: string) {
+    this.active = true;
+    // In a real TUI, this would update a specific line.
+    // For now, we just print if it's a significant change or debug
+    // To avoid spamming stdout, we might throttle this or only show significant updates
+    // For this implementation, we'll keep it simple:
+    process.stdout.write(`\r${this.currentLabel}: ${step}`);
+  }
+
+  success(msg = "Done") {
+    this.active = false;
+    process.stdout.write("\n"); // Clear line end
+    logSuccess(`${this.currentLabel}: ${msg}`);
+  }
+
+  error(msg = "Failed") {
+    this.active = false;
+    process.stdout.write("\n"); // Clear line end
+    logError(`${this.currentLabel}: ${msg}`);
+  }
+
+  stop() {
+    if (this.active) {
+      process.stdout.write("\n");
+      this.active = false;
+    }
+  }
+}