improved api-key-manager, git-repo-selector, added search bar, refined zoom feature, established display boundaries

Author: su4532

TESTING_STRATEGY.md

@@ -0,0 +1,90 @@
+# Relentless Testing Strategy for Vibe Commit Visualizer
+
+To ensure `vibecommit-visualizer` is production-ready, we need a multi-layered testing approach that goes beyond simple unit tests. We must test the UI, the Electron integration, performance with large repositories, and edge cases.
+
+## 1. Foundation: Unit & Integration Tests (Backend Logic)
+**Current Status:** Partially implemented (`tests/unit`, `tests/integration`).
+**Goal:** 100% coverage of business logic and IPC handlers.
+
+- **Action Items:**
+    - **IPC Handlers**: Ensure every `ipcMain.handle` is tested with various inputs (valid, invalid, missing params).
+    - **Git Parsing**: Test the regex/parsing logic for `git log` output against weird commit messages (emojis, multi-line, special characters).
+    - **Security**: Verify `child_process` arguments are always sanitized (already seemingly covered, but double-check).
+
+## 2. Component Testing (Frontend UI)
+**Current Status:** Missing.
+**Goal:** Verify individual React components render and behave correctly in isolation.
+**Tools:** `React Testing Library` + `Jest`.
+
+- **Action Items:**
+    - **GitVisualizer**:
+        - Test rendering with 0 commits (empty state).
+        - Test rendering with 10 commits.
+        - Test clicking a node triggers `onCommitSelect`.
+        - Test loading state (spinner).
+    - **ApiKeyManager**:
+        - Test input validation (empty key, invalid format).
+        - Test saving/loading from `sessionStorage`.
+
+## 3. End-to-End (E2E) Testing with Playwright
+**Current Status:** Missing.
+**Goal:** Test the actual packaged Electron app running on the OS.
+**Tools:** `Playwright` (supports Electron).
+
+- **Action Items:**
+    - **Setup**: Configure Playwright to launch the Electron executable.
+    - **Smoke Test**: Launch app -> Verify window opens -> Verify "Loading" -> Verify Graph appears.
+    - **Interaction**:
+        - Click a commit node -> Verify details panel opens.
+        - Click "Generate" -> Verify Vibe CLI is called (mocked or real).
+    - **Visual Regression**: Take screenshots of the graph and compare against baselines to catch layout breakages.
+
+## 4. "Relentless" Stress & Performance Testing
+**Current Status:** Missing.
+**Goal:** Ensure the app doesn't freeze or crash under heavy load (User reported freezing).
+
+- **Action Items:**
+    - **Large Repo Test**:
+        - Create a script to generate a dummy git repo with 1,000, 5,000, and 10,000 commits.
+        - Point the visualizer to this repo.
+        - Measure time to render.
+        - **Pass Criteria**: UI remains responsive (60fps), graph renders within X seconds.
+    - **Complex Graph Test**:
+        - Generate a repo with many merges/branches (complex topology) to stress the `dagre` layout engine.
+    - **Memory Leak Test**:
+        - Open/close the app 10 times.
+        - Switch branches 50 times rapidly.
+        - Monitor RAM usage.
+
+## 5. Chaos & Edge Case Testing
+**Goal:** Break the app intentionally.
+
+- **Action Items:**
+    - **Missing Dependencies**: Run app where `git` is uninstalled or `vibe` CLI is missing. Verify error messages.
+    - **Corrupt Repo**: Point app to a `.git` folder with missing HEAD or corrupt objects.
+    - **Network Failures**: Disconnect internet while using AI features.
+    - **Concurrent Operations**: Spam the "Refresh" button while a command is running.
+
+## 6. Packaging & Distribution Testing
+**Goal:** Ensure the built artifact works on fresh machines.
+
+- **Action Items:**
+    - **Clean VM Test**: Run the `.exe` (Windows) or `.dmg` (Mac) on a fresh VM with no Node/Python installed.
+    - **Path Spaces**: Test with project paths containing spaces and special characters (e.g., `C:\Users\Name\My Projects\Vibe Commit`).
+
+---
+
+# Implementation Plan
+
+## Phase 1: Setup E2E Framework
+1. Install Playwright: `pnpm add -D @playwright/test playwright`.
+2. Create `playwright.config.ts` configured for Electron.
+3. Write a basic "App Launches" test.
+
+## Phase 2: Stress Test Script
+1. Create `scripts/generate-large-repo.js`.
+2. Run the visualizer against it and profile performance.
+
+## Phase 3: Component Tests
+1. Add `testing-library` dependencies.
+2. Write `GitVisualizer.test.tsx`.

__mocks__/keytar.js

@@ -0,0 +1,5 @@
+module.exports = {
+    getPassword: jest.fn(),
+    setPassword: jest.fn(),
+    deletePassword: jest.fn(),
+};

app/globals.css

@@ -119,6 +119,7 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -137,6 +138,7 @@
 
 /* Dark mode overrides for diff2html */
 .dark .diff2html-wrapper {
+
   /* File header styling */
   .d2h-file-header {
     background-color: oklch(0.2 0 0) !important;
@@ -217,12 +219,12 @@
 
   /* Inline changes (word-level diffs) */
   .d2h-ins .d2h-change {
-    background-color: oklch(0.3 0.15 150) !important;
+    background-color: oklch(0.22 0.06 150) !important;
     color: oklch(0.95 0 0) !important;
   }
 
   .d2h-del .d2h-change {
-    background-color: oklch(0.3 0.15 25) !important;
+    background-color: oklch(0.22 0.06 25) !important;
     color: oklch(0.95 0 0) !important;
   }
 
@@ -277,4 +279,4 @@
   .d2h-diff-tbody tr td {
     border-color: oklch(0.25 0 0) !important;
   }
-}
+}

app/layout.tsx

@@ -31,6 +31,8 @@ export const metadata: Metadata = {
   },
 };
 
+import { Toaster } from "@/components/ui/toaster";
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -40,6 +42,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={`font-sans antialiased`}>
         <ThemeProvider>{children}</ThemeProvider>
+        <Toaster />
       </body>
     </html>
   );

app/page.tsx

@@ -6,6 +6,8 @@ import { GitRepoSelector } from "@/components/git-repo-selector";
 import { BranchSelector } from "@/components/branch-selector";
 import { DiffDialog } from "@/components/diff-dialog";
 import { apiService } from "@/lib/ipc-api";
+import { useToast } from "@/components/ui/use-toast";
+import { ChevronUp } from "lucide-react";
 
 const LAST_REPO_KEY = "git-visualizer-last-repo";
 
@@ -21,6 +23,7 @@ export default function Page() {
     model: string;
     apiKey: string;
   } | null>(null);
+  const { toast } = useToast();
 
   // Load saved repository path on mount
   useEffect(() => {
@@ -56,8 +59,16 @@ export default function Page() {
         } else {
           setSelectedBranch("");
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error("Failed to fetch branches:", error);
+        if (error.message && error.message.includes("Invalid repository path")) {
+          toast({
+            variant: "destructive",
+            title: "Invalid repository path",
+            description: "The specified path is not a valid git repository.",
+          });
+          setSelectedRepo(""); // Clear the invalid path
+        }
         setBranches([]);
         setSelectedBranch("");
       } finally {
@@ -114,9 +125,19 @@ export default function Page() {
         </div>
       )}
 
-      {/* Repo selector at bottom-center */}
-      <div className="pointer-events-auto absolute inset-x-0 bottom-3 z-40 flex w-full justify-center">
-        <div className="w-full max-w-xl px-3">
+      {/* Repo selector */}
+      <div
+        className={`pointer-events-auto absolute inset-x-0 z-40 flex flex-col items-center justify-center transition-all duration-500 ease-in-out ${selectedRepo
+            ? "bottom-0 translate-y-[calc(100%-24px)] hover:translate-y-0"
+            : "top-1/2 -translate-y-1/2"
+          }`}
+      >
+        {selectedRepo && (
+          <div className="flex h-6 w-16 items-center justify-center rounded-t-lg bg-card border-t border-x border-border shadow-[0_-2px_10px_rgba(0,0,0,0.1)] cursor-pointer">
+            <ChevronUp className="h-4 w-4 text-muted-foreground" />
+          </div>
+        )}
+        <div className="w-full max-w-xl px-3 pb-3">
           <GitRepoSelector
             onRepoSelect={setSelectedRepo}
             initialValue={selectedRepo}

babel.jest.js

@@ -8,5 +8,7 @@ module.exports = {
         },
       },
     ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
   ],
 };

components/api-key-manager.tsx

@@ -37,7 +37,7 @@ interface ApiKeyManagerProps {
 }
 
 // Available models with provider mappings (stored as provider:modelname)
-const AVAILABLE_MODELS: Model[] = [
+export const AVAILABLE_MODELS: Model[] = [
   // Google
   {
     id: "google:gemini-2.5-flash-lite",

components/git-repo-selector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -20,33 +20,66 @@ export function GitRepoSelector({
   initialValue?: string;
 }) {
   const [repoPath, setRepoPath] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // Update local state when initialValue changes
   useEffect(() => {
     setRepoPath(initialValue);
   }, [initialValue]);
 
+  // Scroll input to end when repoPath changes
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.scrollLeft = inputRef.current.scrollWidth;
+    }
+  }, [repoPath]);
+
   const handleSelect = () => {
     if (repoPath.trim()) {
       onRepoSelect(repoPath.trim());
     }
   };
 
+  const handleBrowse = async () => {
+    try {
+      // @ts-ignore - electronAPI is exposed via preload
+      const path = await window.electronAPI.openDirectory();
+      if (path) {
+        setRepoPath(path);
+        onRepoSelect(path);
+      }
+    } catch (error) {
+      console.error("Failed to open directory selector:", error);
+    }
+  };
+
   return (
     <Card className="border border-border bg-card">
-      <CardHeader>
-        <CardTitle className="text-lg flex items-center gap-2">
+      <CardHeader className="flex flex-row items-start justify-between space-y-0">
+        <div className="flex flex-col gap-1.5">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <FolderOpen className="h-4 w-4" />
+            Repository
+          </CardTitle>
+          <CardDescription>Select a local git repository</CardDescription>
+        </div>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleBrowse}
+          title="Browse for repository"
+          className="hover:bg-primary hover:text-primary-foreground hover:border-primary hover:shadow-[0_0_15px_var(--primary)] transition-all duration-300"
+        >
           <FolderOpen className="h-4 w-4" />
-          Repository
-        </CardTitle>
-        <CardDescription>Select a local git repository</CardDescription>
+        </Button>
       </CardHeader>
       <CardContent className="space-y-3">
         <Input
+          ref={inputRef}
           placeholder="/path/to/repo"
           value={repoPath}
           onChange={(e) => setRepoPath(e.target.value)}
-          onKeyPress={(e) => e.key === "Enter" && handleSelect()}
+          onKeyDown={(e) => e.key === "Enter" && handleSelect()}
           className="bg-input text-foreground"
         />
         <Button onClick={handleSelect} className="w-full">