reload button

Author: Ademfcan

app/api/git/commits/route.ts

@@ -36,6 +36,29 @@ export async function POST(request: NextRequest) {
         }
       })
 
+    // Detect uncommitted working directory changes and append a pseudo-commit at the end
+    try {
+      const status = execSync(`cd "${repoPath}" && git status --porcelain`, { encoding: "utf-8" })
+      const hasChanges = status.trim().length > 0
+      if (hasChanges && commits.length > 0) {
+        const head = commits[0] // git log lists HEAD first
+        commits.push({
+          id: "WORKING_DIR",
+          label: "WORK",
+          hash: "WORKING_DIR",
+          message: "Working directory (uncommitted changes)",
+          author: "workspace",
+          date: new Date().toISOString(),
+          parents: [head.hash],
+          // extra metadata for the client to style differently
+          kind: "working",
+          isWorkingDir: true,
+        } as any)
+      }
+    } catch {
+      // If status fails (e.g., not a git repo), ignore silently
+    }
+
     return NextResponse.json({ commits })
   } catch (error: any) {
     return NextResponse.json({ error: error.message || "Failed to fetch commits" }, { status: 500 })

app/api/git/diff/route.ts

@@ -1,17 +1,77 @@
 import { execSync } from "child_process"
+import fs from "fs"
+import os from "os"
+import path from "path"
 import { type NextRequest, NextResponse } from "next/server"
 
 export async function POST(request: NextRequest) {
   try {
-    const { repoPath, commitHash } = await request.json()
+  const { repoPath, commitHash } = await request.json()
 
     if (!repoPath || !commitHash) {
       return NextResponse.json({ error: "Repository path and commit hash are required" }, { status: 400 })
     }
 
-  // Use git show to get the patch for a single commit. Disable color and pager for clean parsing.
-  const cmd = `cd "${repoPath}" && git show ${commitHash} --no-color --no-ext-diff`
-  const diffText = execSync(cmd, { encoding: "utf-8", env: { ...process.env, GIT_PAGER: "" } })
+  // Helper to run git commands that may exit with non-zero when differences exist (git diff returns 1)
+  const runGit = (cmd: string): string => {
+    try {
+      return execSync(cmd, { encoding: "utf-8", env: { ...process.env, GIT_PAGER: "" } })
+    } catch (e: any) {
+      const out: Buffer | string | undefined = e?.stdout
+      if (out) {
+        return Buffer.isBuffer(out) ? out.toString("utf-8") : String(out)
+      }
+      throw e
+    }
+  }
+
+  // If the special working directory node is requested, return the working tree diff vs HEAD
+  let diffText = ""
+  if (commitHash === "WORKING_DIR") {
+    // Base diff: tracked changes vs HEAD (staged + unstaged)
+    const baseCmd = `cd "${repoPath}" && git diff HEAD --no-color --no-ext-diff`
+    diffText = runGit(baseCmd)
+
+    // Append diffs for untracked files using no-index against an empty temp file
+    const listCmd = `cd "${repoPath}" && git ls-files --others --exclude-standard -z`
+    let untrackedRaw = ""
+    try {
+      // Capture as Buffer to safely handle NULs
+      const buf: Buffer = execSync(listCmd, { env: { ...process.env, GIT_PAGER: "" } }) as unknown as Buffer
+      untrackedRaw = buf.toString("utf-8")
+    } catch {
+      untrackedRaw = ""
+    }
+    const files = untrackedRaw
+      .split("\u0000")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0)
+
+    if (files.length > 0) {
+      // Create a temporary empty file
+      const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "vcv-"))
+      const emptyPath = path.join(tmpDir, "empty")
+      fs.writeFileSync(emptyPath, "")
+      try {
+        for (const f of files) {
+          const perFileCmd = `cd "${repoPath}" && git diff --no-index --no-color --no-ext-diff -- "${emptyPath}" "${f}"`
+          const perFile = runGit(perFileCmd)
+          if (perFile && perFile.trim().length > 0) {
+            if (diffText && !diffText.endsWith("\n")) diffText += "\n"
+            diffText += perFile
+          }
+        }
+      } finally {
+        // Cleanup temp file and dir
+        try { fs.unlinkSync(emptyPath) } catch {}
+        try { fs.rmdirSync(tmpDir) } catch {}
+      }
+    }
+  } else {
+    // Use git show to get the patch for a single commit. Disable color and pager for clean parsing.
+    const cmd = `cd "${repoPath}" && git show ${commitHash} --no-color --no-ext-diff`
+    diffText = runGit(cmd)
+  }
 
     return NextResponse.json({ diff: diffText })
   } catch (error: any) {

app/page.tsx

@@ -14,6 +14,7 @@ export default function Page() {
   const [selectedCommit, setSelectedCommit] = useState<any>(null)
   const [diffOpen, setDiffOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [diffRefreshKey, setDiffRefreshKey] = useState(0)
 
   const fetchBranches = useCallback(async () => {
     try {
@@ -80,6 +81,7 @@ export default function Page() {
               branch={selectedBranch}
               onCommitSelect={(c) => setSelectedCommit(c)}
               isLoading={isLoading}
+              onReloadDiffs={() => setDiffRefreshKey((k) => k + 1)}
             />
           ) : (
             <div className="flex h-full w-full items-center justify-center text-muted-foreground">
@@ -99,6 +101,7 @@ export default function Page() {
         repoPath={selectedRepo}
         branch={selectedBranch}
         commit={selectedCommit}
+        refreshKey={diffRefreshKey}
       />
     </div>
   )

components/diff-dialog.tsx

@@ -5,7 +5,7 @@ import { html as renderDiff, parse as parseDiff } from "diff2html"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Badge } from "@/components/ui/badge"
 import { Separator } from "@/components/ui/separator"
-import { Clock, GitCommit } from "lucide-react"
+import { Clock, GitCommit, RotateCcw } from "lucide-react"
 import { format } from "date-fns"
 import { Button } from "@/components/ui/button"
 import { ButtonGroup } from "@/components/ui/button-group"
@@ -44,6 +44,7 @@ export function DiffDialog({
   >(new Map())
 
   const [view, setView] = useState<"unified" | "split">("unified")
+  const [refreshTick, setRefreshTick] = useState<number>(0)
 
   const title = useMemo(() => {
     if (!commit) return "Commit"
@@ -133,7 +134,7 @@ export function DiffDialog({
     }
     load()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [commit, repoPath, open, view, visibleCount])
+  }, [commit, repoPath, open, view, visibleCount, refreshTick])
 
   // Clear cache when switching branches as requested
   useEffect(() => {
@@ -201,6 +202,26 @@ export function DiffDialog({
               </DialogDescription>
             </div>
             <div className="flex items-center gap-2">
+              {(() => {
+                const isWorking = !!commit && (commit.isWorkingDir || commit.kind === "working" || commit.hash === "WORKING_DIR")
+                if (!isWorking) return null
+                const onReload = () => {
+                  if (!commit) return
+                  const cacheKey = `${repoPath}::${commit.hash}`
+                  diffCacheRef.current.delete(cacheKey)
+                  setDiffHtml("")
+                  setError(null)
+                  setVisibleCount(CHUNK_SIZE)
+                  // scroll to top for better UX
+                  try { scrollRef.current?.scrollTo?.({ top: 0 }) } catch {}
+                  setRefreshTick((t) => t + 1)
+                }
+                return (
+                  <Button size="sm" variant="outline" onClick={onReload} disabled={loading}>
+                    <RotateCcw className="h-4 w-4 mr-1" /> Reload
+                  </Button>
+                )
+              })()}
               <ButtonGroup>
                 <Button
                   size="sm"

components/git-visualizer.tsx

@@ -22,6 +22,8 @@ interface CommitNode {
   author: string
   date: string
   parents?: string[]
+  kind?: string
+  isWorkingDir?: boolean
 }
 
 export function GitVisualizer({
@@ -63,7 +65,7 @@ export function GitVisualizer({
   const elements = useMemo(() => {
     if (!commits?.length) return []
     const ids = new Set(commits.map((c) => c.id))
-    const nodes = commits.map((c) => ({ data: { id: c.id, label: c.label } }))
+    const nodes = commits.map((c) => ({ data: { id: c.id, label: c.label, kind: (c as any).kind } }))
     const edges: any[] = []
     for (const child of commits) {
       for (const parent of child.parents || []) {
@@ -118,6 +120,12 @@ export function GitVisualizer({
           height: 16,
         },
       },
+      {
+        selector: 'node[kind = "working"]',
+        style: {
+          "background-color": "hsl(24, 94%, 50%)", // orange for working directory
+        },
+      },
       {
         selector: "edge",
         style: {