git-diff-view 0.0.2 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jeff Haynie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,48 +1,94 @@
 # git-diff-view
 
-A beautiful git diff viewer that opens in your browser, powered by [@pierre/diffs](https://diffs.com/).
+A beautiful, browser-based git diff viewer with syntax highlighting and automatic dark/light theme detection.
 
-## Features
+![git-diff-view screenshot](screenshot.png)
 
-- 🎨 **Auto theme detection** - matches your system light/dark mode
-- 📊 **Stacked (unified) layout** - easy to read diffs
-- 📏 **Styled bars** - visual indicators for additions/deletions
-- 🔢 **Line numbers** - always visible
-- ✨ **Word-level highlighting** - see exactly what changed
-- 📁 **Multi-file support** - all changes in one view
+## Why git-diff-view?
+
+Terminal diffs are hard to read. `git-diff-view` opens your diffs in a beautiful browser interface with:
+
+- **Word-level highlighting** — see exactly which characters changed, not just which lines
+- **Automatic theme detection** — seamlessly matches your system's light or dark mode
+- **Unified diff layout** — familiar, easy-to-scan format with colored addition/deletion bars
+- **Multi-file support** — review all your changes in a single scrollable view
+- **Zero configuration** — works out of the box
+
+Powered by [@pierre/diffs](https://diffs.com/).
+
+---
 
 ## Installation
 
+### Prerequisites
+
+- [Bun](https://bun.sh) — install with `curl -fsSL https://bun.sh/install | bash`
+- macOS (uses native `open` command and theme detection)
+
+### Quick Start
+
+```bash
+# Install globally
+bun install -g git-diff-view
+
+# Install the git alias
+git-diff-view install
+```
+
+Or with npm:
+
 ```bash
-bun install
-./index.ts install
+npm install -g git-diff-view
+git-diff-view install
 ```
 
-This installs a global git alias `dv`.
+That's it. You now have a `git dv` command available in any repository.
+
+---
 
 ## Usage
 
+### As a git alias (recommended)
+
+After installation, use `git dv` anywhere you'd use `git diff`:
+
 ```bash
-git dv              # unstaged changes
-git dv --staged     # staged changes
-git dv HEAD~3       # last 3 commits
-git dv main..HEAD   # compare branches
-git dv -- file.ts   # specific file
+git dv                  # View unstaged changes
+git dv --staged         # View staged changes
+git dv HEAD~1           # View last commit
+git dv HEAD~3           # View last 3 commits
+git dv main..feature    # Compare branches
+git dv -- src/app.ts    # View changes to a specific file
 ```
 
-## Commands
+### Standalone commands
 
 ```bash
-./index.ts install    # install git alias
-./index.ts uninstall  # remove git alias
-./index.ts run        # view diff (used by alias)
-./index.ts --help     # show help
+./index.ts install      # Install the git dv alias
+./index.ts uninstall    # Remove the git dv alias
+./index.ts run          # Run the diff viewer directly
+./index.ts --help       # Show help
 ```
 
-## Requirements
+---
+
+## How It Works
+
+1. `git dv` captures the output of `git diff` with your arguments
+2. A local server spins up and parses the diff
+3. Your browser opens to a React-powered diff viewer
+4. The server automatically shuts down after 3 seconds
+
+---
+
+## Uninstall
+
+```bash
+git-diff-view uninstall
+bun remove -g git-diff-view
+```
 
-- [Bun](https://bun.sh) runtime
-- macOS (for `open` command and theme detection)
+---
 
 ## License
 

package/frontend.tsx

@@ -1,6 +1,6 @@
 import { FileDiff } from "@pierre/diffs/react";
 import { parsePatchFiles, type FileDiffMetadata } from "@pierre/diffs";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 
 interface DiffData {
@@ -8,10 +8,113 @@ interface DiffData {
   theme: "pierre-dark" | "pierre-light";
 }
 
+type DiffStyle = "unified" | "split";
+
+interface IconProps {
+  size?: number;
+}
+
+function IconDiffSplit({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <path d="M14 0H8.5v16H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-1.5 6.5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0" />
+      <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5.5V0zm.5 7.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1" opacity={0.3} />
+    </svg>
+  );
+}
+
+function IconDiffUnified({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <path fillRule="evenodd" d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5h16zm-8-4a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1A.5.5 0 0 0 8 10" clipRule="evenodd" />
+      <path fillRule="evenodd" d="M14 0a2 2 0 0 1 2 2v5.5H0V2a2 2 0 0 1 2-2zM6.5 3.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" clipRule="evenodd" opacity={0.4} />
+    </svg>
+  );
+}
+
+function IconCodeStyleBars({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <g opacity={0.4}>
+        <path d="M4.25 13a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1 0-1.5zM6.25 1a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5zM4 4.75A.75.75 0 0 1 4.75 4h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 4.75" />
+      </g>
+      <path fillRule="evenodd" d="M4 7.75A.75.75 0 0 1 4.75 7h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 7.75" clipRule="evenodd" />
+      <path d="M4 10.75a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1-.75-.75M0 7.5A.5.5 0 0 1 .5 7h1a.5.5 0 0 1 .5.5V11a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 0 11z" />
+    </svg>
+  );
+}
+
+function IconCodeStyleBg({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <path d="M0 2.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 2.25" opacity={0.4} />
+      <path fillRule="evenodd" d="M15 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM2.5 9a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1zm0-2a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1z" clipRule="evenodd" />
+      <path d="M0 14.75A.75.75 0 0 1 .75 14h5.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75" opacity={0.4} />
+    </svg>
+  );
+}
+
+function IconChevronDown({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <path fillRule="evenodd" d="M4.22 5.72a.75.75 0 0 1 1.06 0L8 8.44l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 6.78a.75.75 0 0 1 0-1.06z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+function IconChevronRight({ size = 16 }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width={size} height={size}>
+      <path fillRule="evenodd" d="M5.72 11.78a.75.75 0 0 1 0-1.06L8.44 8 5.72 5.28a.75.75 0 0 1 1.06-1.06l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+interface IconButtonProps {
+  onClick: () => void;
+  icon: ReactNode;
+  title: string;
+}
+
+function IconButton({ onClick, icon, title }: IconButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: 4,
+        borderRadius: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: 0.7,
+        color: "inherit",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.opacity = "1")}
+      onMouseLeave={(e) => (e.currentTarget.style.opacity = "0.7")}
+    >
+      {icon}
+    </button>
+  );
+}
+
 const App = () => {
   const [data, setData] = useState<DiffData | null>(null);
   const [files, setFiles] = useState<FileDiffMetadata[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [diffStyle, setDiffStyle] = useState<DiffStyle>("unified");
+  const [disableBackground, setDisableBackground] = useState(false);
+  const [collapsedFiles, setCollapsedFiles] = useState<Record<number, boolean>>({});
+
+  const toggleCollapse = (index: number) => {
+    setCollapsedFiles((prev) => ({
+      ...prev,
+      [index]: !prev[index],
+    }));
+  };
 
   useEffect(() => {
     fetch("/api/diff")
@@ -37,20 +140,46 @@ const App = () => {
     return <div style={{ color: "#888", padding: 20 }}>No changes</div>;
   }
 
+  const renderHeaderMetadata = (index: number) => (
+    <div style={{ display: "flex", alignItems: "center", gap: 4, marginRight: -4 }}>
+      <IconButton
+        onClick={() => setDiffStyle((c) => (c === "split" ? "unified" : "split"))}
+        icon={diffStyle === "split" ? <IconDiffSplit size={16} /> : <IconDiffUnified size={16} />}
+        title={diffStyle === "split" ? "Switch to unified" : "Switch to split"}
+      />
+      <IconButton
+        onClick={() => setDisableBackground((c) => !c)}
+        icon={disableBackground ? <IconCodeStyleBars size={16} /> : <IconCodeStyleBg size={16} />}
+        title={disableBackground ? "Enable background" : "Disable background"}
+      />
+      <IconButton
+        onClick={() => toggleCollapse(index)}
+        icon={collapsedFiles[index] ? <IconChevronRight size={16} /> : <IconChevronDown size={16} />}
+        title={collapsedFiles[index] ? "Expand" : "Collapse"}
+      />
+    </div>
+  );
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-      {files.map((file, i) => (
-        <FileDiff
-          key={i}
-          fileDiff={file}
-          options={{
-            theme: data.theme,
-            diffStyle: "unified",
-            diffIndicators: "bars",
-            lineDiffType: "word",
-          }}
-        />
-      ))}
+      {files.map((file, i) => {
+        const isCollapsed = collapsedFiles[i] ?? false;
+        return (
+          <FileDiff
+            key={`${i}-${isCollapsed}`}
+            fileDiff={file}
+            options={{
+              theme: data.theme,
+              diffStyle,
+              diffIndicators: "bars",
+              lineDiffType: "word",
+              disableBackground,
+              unsafeCSS: isCollapsed ? "[data-code] { display: none; }" : "",
+            }}
+            renderHeaderMetadata={() => renderHeaderMetadata(i)}
+          />
+        );
+      })}
     </div>
   );
 };

package/index.ts

@@ -75,18 +75,14 @@ const run = async (args: string[]) => {
         headers: { "Content-Type": "application/json" },
       }),
     },
-    development: {
-      hmr: true,
-    },
   });
 
   const url = `http://localhost:${server.port}`;
-  console.log(`Opening diff at ${url}`);
-
-  await $`open ${url}`;
+  await $`open ${url}`.quiet();
 
   await Bun.sleep(3000);
   server.stop();
+  process.exit(0);
 };
 
 const showHelp = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-diff-view",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "module": "index.ts",
   "type": "module",
   "bin": {

package/CLAUDE.md

@@ -1,106 +0,0 @@
-
-Default to using Bun instead of Node.js.
-
-- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
-- Use `bun test` instead of `jest` or `vitest`
-- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
-- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
-- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
-- Use `bunx <package> <command>` instead of `npx <package> <command>`
-- Bun automatically loads .env, so don't use dotenv.
-
-## APIs
-
-- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
-- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
-- `Bun.redis` for Redis. Don't use `ioredis`.
-- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
-- `WebSocket` is built-in. Don't use `ws`.
-- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
-- Bun.$`ls` instead of execa.
-
-## Testing
-
-Use `bun test` to run tests.
-
-```ts#index.test.ts
-import { test, expect } from "bun:test";
-
-test("hello world", () => {
-  expect(1).toBe(1);
-});
-```
-
-## Frontend
-
-Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
-
-Server:
-
-```ts#index.ts
-import index from "./index.html"
-
-Bun.serve({
-  routes: {
-    "/": index,
-    "/api/users/:id": {
-      GET: (req) => {
-        return new Response(JSON.stringify({ id: req.params.id }));
-      },
-    },
-  },
-  // optional websocket support
-  websocket: {
-    open: (ws) => {
-      ws.send("Hello, world!");
-    },
-    message: (ws, message) => {
-      ws.send(message);
-    },
-    close: (ws) => {
-      // handle close
-    }
-  },
-  development: {
-    hmr: true,
-    console: true,
-  }
-})
-```
-
-HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
-
-```html#index.html
-<html>
-  <body>
-    <h1>Hello, world!</h1>
-    <script type="module" src="./frontend.tsx"></script>
-  </body>
-</html>
-```
-
-With the following `frontend.tsx`:
-
-```tsx#frontend.tsx
-import React from "react";
-import { createRoot } from "react-dom/client";
-
-// import .css files directly and it works
-import './index.css';
-
-const root = createRoot(document.body);
-
-export default function Frontend() {
-  return <h1>Hello, world!</h1>;
-}
-
-root.render(<Frontend />);
-```
-
-Then, run index.ts
-
-```sh
-bun --hot ./index.ts
-```
-
-For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.