diff --git a/plugins/git/package.json b/plugins/git/package.json
index d5149130..2cda8cb4 100644
--- a/plugins/git/package.json
+++ b/plugins/git/package.json
@@ -52,6 +52,8 @@
   },
   "devDependencies": {
     "@antfu/design": "catalog:frontend",
+    "@floating-ui/react": "catalog:frontend",
+    "@iconify-json/catppuccin": "catalog:frontend",
     "@pierre/diffs": "catalog:frontend",
     "@radix-ui/react-scroll-area": "catalog:frontend",
     "@radix-ui/react-separator": "catalog:frontend",
diff --git a/plugins/git/src/client/components/branches-panel.tsx b/plugins/git/src/client/components/branches-panel.tsx
deleted file mode 100644
index d6bb8a60..00000000
--- a/plugins/git/src/client/components/branches-panel.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client'
-
-import type { DevframeRpcClient } from 'devframe/client'
-import { useCallback } from 'react'
-import { useRpcResource } from './use-rpc-resource'
-import { BranchesPanelView } from './views/branches-panel-view'
-
-export function BranchesPanel() {
-  const loader = useCallback((rpc: DevframeRpcClient) => rpc.call('git:branches'), [])
-  const { data, loading, refresh } = useRpcResource(loader)
-
-  return <BranchesPanelView data={data} loading={loading} onRefresh={refresh} />
-}
diff --git a/plugins/git/src/client/components/dashboard.tsx b/plugins/git/src/client/components/dashboard.tsx
index 9ce75ad7..df295ff2 100644
--- a/plugins/git/src/client/components/dashboard.tsx
+++ b/plugins/git/src/client/components/dashboard.tsx
@@ -2,12 +2,10 @@
 
 import type { DevframeRpcClient } from 'devframe/client'
 import type { PointerEvent as ReactPointerEvent } from 'react'
-import type { Branch, GitBranches } from '../../index'
+import type { GitBranches } from '../../index'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { nav as navBar, navBrand, tab as tabClass, tabsList } from '../lib/design'
-import { cn } from '../lib/utils'
 import { CommitDetailsPanel } from './commit-details-panel'
-import { DiffPanel } from './diff-panel'
 import { LogPanel } from './log-panel'
 import { RpcProvider, useRpc } from './rpc-provider'
 import { StatusPanel } from './status-panel'
@@ -15,10 +13,9 @@ import { useTheme } from './theme'
 import { Badge } from './ui/badge'
 import { IconButton } from './ui/button'
 import { Icon } from './ui/icon'
-import { Skeleton } from './ui/skeleton'
 import { useRpcResource } from './use-rpc-resource'
 
-type DashboardPane = 'status' | 'commits' | 'diff'
+type DashboardPane = 'commits' | 'changes'
 
 interface NavItem {
   id: DashboardPane
@@ -27,9 +24,8 @@ interface NavItem {
 }
 
 const NAV_ITEMS: NavItem[] = [
-  { id: 'status', label: 'Status', icon: 'i-ph-tree-view-duotone' },
   { id: 'commits', label: 'Commits', icon: 'i-ph-git-commit-duotone' },
-  { id: 'diff', label: 'Diff', icon: 'i-ph-git-diff-duotone' },
+  { id: 'changes', label: 'Changes', icon: 'i-ph-git-diff-duotone' },
 ]
 
 function clamp(value: number, min: number, max: number): number {
@@ -117,47 +113,36 @@ function ThemeToggle() {
   )
 }
 
-function BranchRow({
-  branch,
-  selected,
+/** Branch picker, living in the nav bar. */
+function BranchSelect({
+  branches,
+  disabled,
+  value,
   onSelect,
 }: {
-  branch: Branch
-  selected: boolean
+  branches: GitBranches | null
+  disabled: boolean
+  value: string | null
   onSelect: (name: string) => void
 }) {
   return (
-    <li>
-      <button
-        type="button"
-        onClick={() => onSelect(branch.name)}
-        className={cn(
-          'hover:bg-active w-full rounded-md px-2 py-1.5 text-left transition-colors',
-          selected && 'bg-active',
-        )}
+    <label className="border-base bg-base focus-within:ring-primary-500/40 flex h-7 min-w-0 items-center gap-1.5 rounded-md border pr-1.5 pl-2 focus-within:ring-2">
+      <Icon name="i-ph-git-branch-duotone" className="color-active size-3.5 shrink-0" />
+      <select
+        aria-label="Branch"
+        value={value ?? ''}
+        onChange={event => onSelect(event.target.value)}
+        disabled={disabled}
+        className="color-base h-full max-w-44 min-w-0 cursor-pointer appearance-none truncate bg-transparent pr-4 text-sm outline-none disabled:cursor-default"
       >
-        <div className="flex items-center gap-2">
-          <Icon name="i-ph-git-branch-duotone" className={cn('size-3.5', branch.current ? 'color-active' : 'color-muted')} />
-          <span className="truncate font-mono text-xs" title={branch.name}>{branch.name}</span>
-          {branch.current && <Badge variant="success" className="px-1 py-0 text-[10px]">current</Badge>}
-        </div>
-        {(branch.ahead > 0 || branch.behind > 0) && (
-          <p className="color-muted mt-0.5 text-[11px] tabular-nums">
-            {branch.ahead > 0 && `ahead ${branch.ahead}`}
-            {branch.ahead > 0 && branch.behind > 0 && ' · '}
-            {branch.behind > 0 && `behind ${branch.behind}`}
-          </p>
-        )}
-      </button>
-    </li>
-  )
-}
-
-function PanelHeading({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex h-9 shrink-0 items-center justify-between gap-2 border-b px-3">
-      {children}
-    </div>
+        {!branches?.isRepo && <option value="">Not a repository</option>}
+        {branches?.isRepo && branches.branches.length === 0 && <option value="">No branches</option>}
+        {branches?.isRepo && branches.branches.map(branch => (
+          <option key={branch.name} value={branch.name}>{branch.name}</option>
+        ))}
+      </select>
+      <Icon name="i-ph-caret-up-down" className="color-faint pointer-events-none -ml-4 size-3.5 shrink-0" />
+    </label>
   )
 }
 
@@ -166,15 +151,12 @@ function DashboardBody() {
   const [selectedBranch, setSelectedBranch] = useState<string | null>(null)
   const [selectedCommit, setSelectedCommit] = useState<string | null>(null)
 
-  const leftRail = useRailWidth('devframe-git:rail-left', 264, 200, 420, 1)
-  const rightRail = useRailWidth('devframe-git:rail-right', 360, 280, 560, -1)
+  const rightRail = useRailWidth('devframe-git:rail-right', 480, 340, 760, -1)
 
   const branchesLoader = useCallback((rpc: DevframeRpcClient) => rpc.call('git:branches'), [])
   const {
     data: branches,
     loading: branchesLoading,
-    error: branchesError,
-    refresh: refreshBranches,
   } = useRpcResource<GitBranches>(branchesLoader)
 
   useEffect(() => {
@@ -202,9 +184,16 @@ function DashboardBody() {
       <header className={navBar()}>
         <div className={navBrand()}>
           <Icon name="i-ph-git-fork-duotone" className="text-base color-active" />
-          <span>Git Dashboard</span>
+          <span>Git</span>
         </div>
 
+        <BranchSelect
+          branches={branches}
+          disabled={branchesLoading || !branches?.isRepo || branches.branches.length === 0}
+          value={selectedBranch}
+          onSelect={selectBranch}
+        />
+
         <nav className={tabsList()} role="tablist" aria-label="Git views">
           {NAV_ITEMS.map(({ id, label, icon }) => (
             <button
@@ -228,83 +217,10 @@ function DashboardBody() {
       </header>
 
       <div className="flex min-h-0 flex-1">
-        {/* Left rail: views + branch picker, then the branch list. */}
-        <aside className="flex min-h-0 flex-col" style={{ width: leftRail.width }}>
-          <div className="shrink-0 space-y-3 border-b p-3">
-            <div className="space-y-1.5">
-              <label htmlFor="branch-select" className="color-muted text-[11px] font-medium tracking-wide uppercase">
-                Branch
-              </label>
-              <select
-                id="branch-select"
-                value={selectedBranch ?? ''}
-                onChange={event => selectBranch(event.target.value)}
-                disabled={branchesLoading || !branches?.isRepo || branches.branches.length === 0}
-                className="bg-base border-base focus:ring-primary-500/40 h-9 w-full rounded-md border px-2 text-sm outline-none focus:ring-2"
-              >
-                {!branches?.isRepo && <option value="">Not a repository</option>}
-                {branches?.isRepo && branches.branches.length === 0 && <option value="">No branches</option>}
-                {branches?.isRepo && branches.branches.map(branch => (
-                  <option key={branch.name} value={branch.name}>{branch.name}</option>
-                ))}
-              </select>
-            </div>
-
-            {branchesError && <p className="text-error text-xs">{branchesError}</p>}
-          </div>
-
-          <div className="flex min-h-0 flex-1 flex-col">
-            <PanelHeading>
-              <span className="text-xs font-medium">Branches</span>
-              <div className="flex items-center gap-1">
-                <span className="color-muted text-[11px] tabular-nums">
-                  {branches?.isRepo ? branches.branches.length : ''}
-                </span>
-                <IconButton
-                  variant="ghost"
-                  size="sm"
-                  onClick={refreshBranches}
-                  disabled={branchesLoading}
-                  aria-label="Refresh branches"
-                >
-                  <Icon name="i-ph-arrows-clockwise" className={cn('size-4', branchesLoading && 'animate-spin')} />
-                </IconButton>
-              </div>
-            </PanelHeading>
-
-            <div className="min-h-0 flex-1 overflow-y-auto p-2">
-              {!branches && (
-                <div className="space-y-2">
-                  {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-9 w-full" />)}
-                </div>
-              )}
-
-              {branches && !branches.isRepo && (
-                <p className="color-muted p-2 text-sm">The working directory is not a git repository.</p>
-              )}
-
-              {branches?.isRepo && (
-                <ul className="space-y-0.5">
-                  {branches.branches.map(branch => (
-                    <BranchRow
-                      key={branch.name}
-                      branch={branch}
-                      selected={branch.name === selectedBranch}
-                      onSelect={selectBranch}
-                    />
-                  ))}
-                </ul>
-              )}
-            </div>
-          </div>
-        </aside>
-
-        <Resizer onPointerDown={leftRail.onPointerDown} label="Resize sidebar" />
-
         {/* Center: the active pane, scrolling inside its own region. */}
         <section className="flex min-h-0 min-w-0 flex-1 flex-col">
           {pane === 'commits' && (
-            <div className="flex min-h-0 flex-1 flex-col p-3">
+            <div className="flex min-h-0 flex-1 flex-col px-3 py-2.5">
               <LogPanel
                 branch={selectedBranch}
                 selectedHash={selectedCommit}
@@ -312,16 +228,11 @@ function DashboardBody() {
               />
             </div>
           )}
-          {pane === 'status' && (
-            <div className="flex min-h-0 flex-1 flex-col p-3">
+          {pane === 'changes' && (
+            <div className="flex min-h-0 flex-1 flex-col px-3 py-2.5">
               <StatusPanel />
             </div>
           )}
-          {pane === 'diff' && (
-            <div className="min-h-0 flex-1 overflow-y-auto p-3">
-              <DiffPanel />
-            </div>
-          )}
         </section>
 
         {showCommitDetails && selectedCommit && (
diff --git a/plugins/git/src/client/components/diff-panel.tsx b/plugins/git/src/client/components/diff-panel.tsx
deleted file mode 100644
index c3d9a904..00000000
--- a/plugins/git/src/client/components/diff-panel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import type { DevframeRpcClient } from 'devframe/client'
-import { useCallback, useState } from 'react'
-import { useRpcResource } from './use-rpc-resource'
-import { DiffPanelView, DiffPatchView } from './views/diff-panel-view'
-
-function PatchViewer({ staged, path }: { staged: boolean, path: string }) {
-  const loader = useCallback(
-    (rpc: DevframeRpcClient) => rpc.call('git:diff', { staged, path }),
-    [staged, path],
-  )
-  const { data, loading } = useRpcResource(loader)
-  return (
-    <DiffPatchView
-      patch={data?.patch ?? null}
-      loading={loading || !data}
-      truncated={data?.truncated ?? false}
-    />
-  )
-}
-
-export function DiffPanel() {
-  const [staged, setStaged] = useState(false)
-  const [selected, setSelected] = useState<string | null>(null)
-
-  const loader = useCallback(
-    (rpc: DevframeRpcClient) => rpc.call('git:diff', { staged }),
-    [staged],
-  )
-  const { data, loading, refresh } = useRpcResource(loader)
-
-  const selectScope = useCallback((value: boolean) => {
-    setStaged(value)
-    setSelected(null)
-  }, [])
-
-  return (
-    <DiffPanelView
-      data={data}
-      loading={loading}
-      staged={staged}
-      selected={selected}
-      onSelectScope={selectScope}
-      onSelectFile={setSelected}
-      onRefresh={refresh}
-      patchSlot={selected ? <PatchViewer key={`${staged}:${selected}`} staged={staged} path={selected} /> : null}
-    />
-  )
-}
diff --git a/plugins/git/src/client/components/log-panel.tsx b/plugins/git/src/client/components/log-panel.tsx
index 94e403f8..4774f318 100644
--- a/plugins/git/src/client/components/log-panel.tsx
+++ b/plugins/git/src/client/components/log-panel.tsx
@@ -109,6 +109,18 @@ export function LogPanel({ branch, selectedHash, onSelectCommit }: LogPanelProps
     await loadPage(rpc, skip, 'append')
   }, [rpc, skip, loadPage])
 
+  // Feeds the row hover card: metadata + changed-file stats for one commit.
+  // The patch is skipped here — the card only needs totals, and the full diff
+  // lives in the details panel.
+  const loadDetail = useCallback(
+    (hash: string) => {
+      if (!rpc)
+        return Promise.reject(new Error('rpc unavailable'))
+      return rpc.call('git:show', { hash, patch: false })
+    },
+    [rpc],
+  )
+
   return (
     <LogPanelView
       rpcConnected={!!rpc}
@@ -124,6 +136,7 @@ export function LogPanel({ branch, selectedHash, onSelectCommit }: LogPanelProps
       onRefresh={refresh}
       onLoadMore={loadMore}
       onSelectCommit={onSelectCommit}
+      onLoadDetail={rpc ? loadDetail : undefined}
     />
   )
 }
diff --git a/plugins/git/src/client/components/rpc-provider.tsx b/plugins/git/src/client/components/rpc-provider.tsx
index 22b7db8e..3e87cf90 100644
--- a/plugins/git/src/client/components/rpc-provider.tsx
+++ b/plugins/git/src/client/components/rpc-provider.tsx
@@ -1,8 +1,10 @@
 'use client'
 
 import type { DevframeRpcClient } from 'devframe/client'
+import type { ConnectionMeta } from 'devframe/types'
 import type { ReactNode } from 'react'
 import { connectDevframe } from 'devframe/client'
+import { DEVFRAME_WS_ROUTE } from 'devframe/constants'
 import { createContext, use, useEffect, useState } from 'react'
 
 interface ConnectionState {
@@ -28,8 +30,13 @@ export function RpcProvider({ children }: { children: ReactNode }) {
     // Next.js statically inlines `process.env.NEXT_PUBLIC_*` at build time.
     // eslint-disable-next-line node/prefer-global/process
     const devWs = process.env.NEXT_PUBLIC_DEVFRAME_WS
-    const options = devWs
-      ? { connectionMeta: { backend: 'websocket' as const, websocket: devWs } }
+    // A bare port (what `scripts/dev.mjs` sets) becomes a same-host socket on
+    // the backend's WS route; a full `ws(s)://` URL is used verbatim.
+    const websocket: ConnectionMeta['websocket'] | undefined = devWs
+      ? (/^\d+$/.test(devWs) ? { port: Number(devWs), path: DEVFRAME_WS_ROUTE } : devWs)
+      : undefined
+    const options = websocket
+      ? { connectionMeta: { backend: 'websocket' as const, websocket } }
       : undefined
     connectDevframe(options).then(
       (rpc) => {
diff --git a/plugins/git/src/client/components/status-panel.tsx b/plugins/git/src/client/components/status-panel.tsx
index 40723da3..a0898796 100644
--- a/plugins/git/src/client/components/status-panel.tsx
+++ b/plugins/git/src/client/components/status-panel.tsx
@@ -4,8 +4,30 @@ import type { DevframeRpcClient } from 'devframe/client'
 import { useCallback, useState } from 'react'
 import { useRpc } from './rpc-provider'
 import { useRpcResource } from './use-rpc-resource'
+import { DiffPatchView } from './views/diff-panel-view'
 import { StatusPanelView } from './views/status-panel-view'
 
+function PatchViewer({ staged, path }: { staged: boolean, path: string }) {
+  const loader = useCallback(
+    (rpc: DevframeRpcClient) => rpc.call('git:diff', { staged, path }),
+    [staged, path],
+  )
+  const { data, loading } = useRpcResource(loader)
+  return (
+    <DiffPatchView
+      patch={data?.patch ?? null}
+      loading={loading || !data}
+      truncated={data?.truncated ?? false}
+    />
+  )
+}
+
+/**
+ * The merged "Changes" view: the working tree's staged / unstaged / untracked
+ * files (with stage / unstage / commit actions in write mode), and — when a
+ * file is selected — its diff below, folding the old Status and Diff tabs into
+ * one surface.
+ */
 export function StatusPanel() {
   const { rpc } = useRpc()
   const loader = useCallback((r: DevframeRpcClient) => r.call('git:status'), [])
@@ -13,6 +35,7 @@ export function StatusPanel() {
   const [busy, setBusy] = useState(false)
   const [message, setMessage] = useState('')
   const [note, setNote] = useState<string | null>(null)
+  const [selected, setSelected] = useState<{ path: string, staged: boolean } | null>(null)
 
   const canWrite = !!data?.canWrite && rpc?.connectionMeta.backend === 'websocket'
 
@@ -60,6 +83,10 @@ export function StatusPanel() {
     }
   }, [rpc, message, setData])
 
+  const selectFile = useCallback((path: string, staged: boolean) => {
+    setSelected(prev => (prev && prev.path === path && prev.staged === staged ? null : { path, staged }))
+  }, [])
+
   return (
     <StatusPanelView
       data={data}
@@ -68,11 +95,16 @@ export function StatusPanel() {
       canWrite={!!canWrite}
       message={message}
       note={note}
+      selectedKey={selected ? `${selected.staged}:${selected.path}` : null}
       onRefresh={refresh}
       onStage={stage}
       onUnstage={unstage}
       onCommit={commit}
       onMessageChange={setMessage}
+      onSelectFile={selectFile}
+      patchSlot={selected
+        ? <PatchViewer key={`${selected.staged}:${selected.path}`} staged={selected.staged} path={selected.path} />
+        : null}
     />
   )
 }
diff --git a/plugins/git/src/client/components/ui/avatar.tsx b/plugins/git/src/client/components/ui/avatar.tsx
new file mode 100644
index 00000000..68d2dba2
--- /dev/null
+++ b/plugins/git/src/client/components/ui/avatar.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import type * as React from 'react'
+import { useEffect, useState } from 'react'
+import { cn } from '../../lib/utils'
+
+// A commit author avatar. We try to resolve a real portrait from the author's
+// identity — a GitHub avatar for `noreply` commit emails, otherwise Gravatar —
+// and fall back to a deterministic initials chip when there's no image (or no
+// network). The chip is always rendered underneath, so the image simply paints
+// over it once it loads and reappears on error.
+
+// Saturated-but-legible hues that sit well behind white text in both themes.
+const AVATAR_COLORS = [
+  '#3b82f6', // blue
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#10b981', // emerald
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+  '#14b8a6', // teal
+  '#6366f1', // indigo
+]
+
+function hashString(input: string): number {
+  let hash = 0
+  for (let i = 0; i < input.length; i++)
+    hash = (hash * 31 + input.charCodeAt(i)) | 0
+  return Math.abs(hash)
+}
+
+/** Up to two initials from a display name (or the email local-part). */
+function initialsOf(name: string, email?: string): string {
+  const source = name.trim() || (email ?? '').split('@')[0] || '?'
+  const parts = source.split(/[\s._-]+/).filter(Boolean)
+  if (parts.length === 0)
+    return '?'
+  if (parts.length === 1)
+    return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+async function sha256Hex(input: string): Promise<string> {
+  const bytes = new TextEncoder().encode(input)
+  const digest = await crypto.subtle.digest('SHA-256', bytes)
+  return Array.from(new Uint8Array(digest), b => b.toString(16).padStart(2, '0')).join('')
+}
+
+// `[<n>+]<user>@users.noreply.github.com` → the GitHub username.
+const GITHUB_NOREPLY = /^(?:\d+\+)?([a-z0-9](?:[a-z0-9-]*[a-z0-9])?)@users\.noreply\.github\.com$/i
+
+/**
+ * Resolve an avatar image URL for a commit email. GitHub noreply addresses map
+ * straight to the user's GitHub avatar; everything else resolves via Gravatar
+ * (`d=404` so unregistered emails fail the request and fall back to initials).
+ * Returns `null` when no email or no crypto (insecure context) is available.
+ */
+async function resolveAvatarUrl(email: string, size: number): Promise<string | null> {
+  const normalized = email.trim().toLowerCase()
+  if (!normalized || !normalized.includes('@'))
+    return null
+
+  const github = normalized.match(GITHUB_NOREPLY)
+  if (github)
+    return `https://github.com/${github[1]}.png?size=${size}`
+
+  if (!globalThis.crypto?.subtle)
+    return null
+  const hash = await sha256Hex(normalized)
+  return `https://gravatar.com/avatar/${hash}?s=${size}&d=404`
+}
+
+export function Avatar({
+  name,
+  email,
+  size = 64,
+  className,
+  ...props
+}: { name: string, email?: string, size?: number } & React.ComponentProps<'span'>) {
+  const key = (email || name || '?').toLowerCase()
+  const color = AVATAR_COLORS[hashString(key) % AVATAR_COLORS.length]
+  const [src, setSrc] = useState<string | null>(null)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    let alive = true
+    setSrc(null)
+    setFailed(false)
+    resolveAvatarUrl(email ?? '', size)
+      .then(url => alive && setSrc(url))
+      .catch(() => {})
+    return () => {
+      alive = false
+    }
+  }, [email, size])
+
+  return (
+    <span
+      className={cn(
+        'relative inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-[11px] font-semibold text-white select-none',
+        className,
+      )}
+      style={{ backgroundColor: color }}
+      title={name}
+      {...props}
+    >
+      {initialsOf(name, email)}
+      {src && !failed && (
+        <img
+          src={src}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          onError={() => setFailed(true)}
+          className="absolute inset-0 size-full rounded-full object-cover"
+        />
+      )}
+    </span>
+  )
+}
diff --git a/plugins/git/src/client/components/ui/file-icon.tsx b/plugins/git/src/client/components/ui/file-icon.tsx
new file mode 100644
index 00000000..3faab18d
--- /dev/null
+++ b/plugins/git/src/client/components/ui/file-icon.tsx
@@ -0,0 +1,16 @@
+import type * as React from 'react'
+import { getFileIcon } from '../../lib/file-icon'
+import { cn } from '../../lib/utils'
+import { Icon } from './icon'
+
+/**
+ * A file-type glyph for a path, mirroring `@antfu/design`'s `FileIcon`
+ * (catppuccin icon set). Sizing/color pass through `className`.
+ */
+export function FileIcon({
+  path,
+  className,
+  ...props
+}: { path: string } & Omit<React.ComponentProps<'span'>, 'children'>) {
+  return <Icon name={getFileIcon(path)} className={cn('size-4', className)} {...props} />
+}
diff --git a/plugins/git/src/client/components/ui/status-mark.tsx b/plugins/git/src/client/components/ui/status-mark.tsx
new file mode 100644
index 00000000..42724c6a
--- /dev/null
+++ b/plugins/git/src/client/components/ui/status-mark.tsx
@@ -0,0 +1,44 @@
+import type { FileStatusCode } from '../../../index'
+import { cn } from '../../lib/utils'
+
+// A single-letter git status mark (A / M / D / R …), tinted by change kind —
+// the compact status indicator shown beside a file in the changes and
+// commit-detail file lists.
+
+const STATUS_LABEL: Record<FileStatusCode, string> = {
+  'modified': 'M',
+  'added': 'A',
+  'deleted': 'D',
+  'renamed': 'R',
+  'copied': 'C',
+  'type-changed': 'T',
+  'unmerged': 'U',
+  'unknown': '?',
+}
+
+const STATUS_COLOR: Record<FileStatusCode, string> = {
+  'added': 'text-success',
+  'deleted': 'text-error',
+  'modified': 'text-warning',
+  'renamed': 'color-active',
+  'copied': 'color-active',
+  'type-changed': 'text-warning',
+  'unmerged': 'text-error',
+  'unknown': 'color-muted',
+}
+
+export function statusLabel(code: FileStatusCode): string {
+  return STATUS_LABEL[code]
+}
+
+export function StatusMark({ code, className }: { code: FileStatusCode, className?: string }) {
+  return (
+    <span
+      className={cn('w-3.5 shrink-0 text-center font-mono text-xs font-semibold', STATUS_COLOR[code], className)}
+      title={code}
+      aria-label={code}
+    >
+      {STATUS_LABEL[code]}
+    </span>
+  )
+}
diff --git a/plugins/git/src/client/components/views/commit-details-view.stories.tsx b/plugins/git/src/client/components/views/commit-details-view.stories.tsx
index 916f7d74..9803ce10 100644
--- a/plugins/git/src/client/components/views/commit-details-view.stories.tsx
+++ b/plugins/git/src/client/components/views/commit-details-view.stories.tsx
@@ -43,9 +43,9 @@ const detail: CommitDetail = {
   parents: ['b2c3d4e5f6a7b8c9'],
   refs: ['HEAD -> main', 'origin/main'],
   files: [
-    { path: 'src/client/components/views/log-panel-view.tsx', additions: 41, deletions: 18, binary: false },
-    { path: 'src/client/components/log-panel.tsx', additions: 6, deletions: 1, binary: false },
-    { path: 'public/preview.png', additions: 0, deletions: 0, binary: true },
+    { path: 'src/client/components/views/log-panel-view.tsx', additions: 41, deletions: 18, binary: false, status: 'modified' },
+    { path: 'src/client/components/log-panel.tsx', additions: 6, deletions: 1, binary: false, status: 'added' },
+    { path: 'public/preview.png', additions: 0, deletions: 0, binary: true, status: 'added' },
   ],
   totalAdditions: 47,
   totalDeletions: 19,
diff --git a/plugins/git/src/client/components/views/commit-details-view.tsx b/plugins/git/src/client/components/views/commit-details-view.tsx
index e332f0f6..0fe0e9ef 100644
--- a/plugins/git/src/client/components/views/commit-details-view.tsx
+++ b/plugins/git/src/client/components/views/commit-details-view.tsx
@@ -3,9 +3,11 @@
 import type { CommitDetail } from '../../../index'
 import { Badge } from '../ui/badge'
 import { IconButton } from '../ui/button'
+import { FileIcon } from '../ui/file-icon'
 import { Icon } from '../ui/icon'
 import { ScrollArea } from '../ui/scroll-area'
 import { Skeleton } from '../ui/skeleton'
+import { StatusMark } from '../ui/status-mark'
 import { DiffPatchView } from './diff-panel-view'
 
 export interface CommitDetailsViewProps {
@@ -134,12 +136,14 @@ export function CommitDetailsView({ data, loading, error, onClose }: CommitDetai
                 : (
                     <ul className="space-y-0.5">
                       {data.files.map(file => (
-                        <li key={file.path} className="flex items-center gap-2 font-mono text-xs">
-                          <span className="min-w-0 flex-1 truncate" title={file.path}>{file.path}</span>
+                        <li key={file.path} className="flex items-center gap-2 text-xs">
+                          <StatusMark code={file.status} />
+                          <FileIcon path={file.path} className="size-4 shrink-0" />
+                          <span className="min-w-0 flex-1 truncate font-mono" title={file.path}>{file.path}</span>
                           {file.binary
                             ? <Badge variant="secondary" className="px-1.5 py-0 text-[10px]">bin</Badge>
                             : (
-                                <span className="shrink-0 tabular-nums">
+                                <span className="shrink-0 font-mono tabular-nums">
                                   <span className="text-success">{`+${file.additions}`}</span>
                                   {' '}
                                   <span className="text-error">{`−${file.deletions}`}</span>
diff --git a/plugins/git/src/client/components/views/diff-panel-view.tsx b/plugins/git/src/client/components/views/diff-panel-view.tsx
index fc4df48b..8cddb39c 100644
--- a/plugins/git/src/client/components/views/diff-panel-view.tsx
+++ b/plugins/git/src/client/components/views/diff-panel-view.tsx
@@ -2,7 +2,7 @@
 
 import type { FileDiffMetadata, FileDiffOptions } from '@pierre/diffs'
 import type { ReactNode } from 'react'
-import type { GitDiff } from '../../../index'
+import type { FileStatusCode, GitDiff } from '../../../index'
 import { parsePatchFiles } from '@pierre/diffs'
 import { FileDiff } from '@pierre/diffs/react'
 import { useMemo, useState } from 'react'
@@ -10,9 +10,11 @@ import { cn } from '../../lib/utils'
 import { useColorScheme } from '../theme'
 import { Badge } from '../ui/badge'
 import { IconButton } from '../ui/button'
+import { FileIcon } from '../ui/file-icon'
 import { Icon } from '../ui/icon'
 import { ScrollArea } from '../ui/scroll-area'
 import { Skeleton } from '../ui/skeleton'
+import { StatusMark } from '../ui/status-mark'
 
 export interface DiffPanelViewProps {
   data: GitDiff | null
@@ -51,18 +53,18 @@ function fileStats(file: FileDiffMetadata): { additions: number, deletions: numb
   return { additions, deletions }
 }
 
-/** Phosphor icon + tint for a parsed file's change type. */
-function changeTypeIcon(type: FileDiffMetadata['type']): { name: string, className: string } {
+/** Map a parsed file's change type to a git status code (for the status mark). */
+function changeTypeStatus(type: FileDiffMetadata['type']): FileStatusCode {
   switch (type) {
     case 'new':
-      return { name: 'i-ph-file-plus-duotone', className: 'text-success' }
+      return 'added'
     case 'deleted':
-      return { name: 'i-ph-file-x-duotone', className: 'text-error' }
+      return 'deleted'
     case 'rename-pure':
     case 'rename-changed':
-      return { name: 'i-ph-file-arrow-up-duotone', className: 'color-muted' }
+      return 'renamed'
     default:
-      return { name: 'i-ph-file-duotone', className: 'color-muted' }
+      return 'modified'
   }
 }
 
@@ -74,7 +76,6 @@ function changeTypeIcon(type: FileDiffMetadata['type']): { name: string, classNa
 function FileDiffSection({ file, options, defaultOpen }: { file: FileDiffMetadata, options: FileDiffOptions<undefined>, defaultOpen: boolean }) {
   const [open, setOpen] = useState(defaultOpen)
   const { additions, deletions } = fileStats(file)
-  const icon = changeTypeIcon(file.type)
   const label = file.prevName ? `${file.prevName} → ${file.name}` : file.name
 
   return (
@@ -83,10 +84,11 @@ function FileDiffSection({ file, options, defaultOpen }: { file: FileDiffMetadat
         type="button"
         onClick={() => setOpen(value => !value)}
         aria-expanded={open}
-        className="hover:bg-active bg-secondary flex w-full items-center gap-2 px-2.5 py-1.5 text-left font-mono text-xs transition-colors"
+        className="hover:bg-active bg-secondary flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left font-mono text-xs transition-colors"
       >
         <Icon name="i-ph-caret-right" className={cn('color-faint size-3 transition-transform', open && 'rotate-90')} />
-        <Icon name={icon.name} className={cn('size-3.5', icon.className)} />
+        <StatusMark code={changeTypeStatus(file.type)} />
+        <FileIcon path={file.name} className="size-3.5" />
         <span className="min-w-0 flex-1 truncate" title={label}>{label}</span>
         {file.hunks.length > 0
           ? (
diff --git a/plugins/git/src/client/components/views/log-panel-view.stories.tsx b/plugins/git/src/client/components/views/log-panel-view.stories.tsx
index 118b443f..94a4b66d 100644
--- a/plugins/git/src/client/components/views/log-panel-view.stories.tsx
+++ b/plugins/git/src/client/components/views/log-panel-view.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { Commit } from '../../../index'
+import type { Commit, CommitDetail } from '../../../index'
 import { LogPanelView } from './log-panel-view'
 
 const now = Date.now()
@@ -11,20 +11,58 @@ function at(minutesAgo: number): number {
 // A small multi-branch history: `main` (current) sits on lane 0, a merge fans
 // the graph into a second lane, and several branch tips / a tag carry labels.
 const commits: Commit[] = [
-  { hash: 'c01', shortHash: 'c01a1b2', parents: ['c02'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(8), subject: 'Optimizes CSS output', body: '', refs: ['HEAD -> main'] },
-  { hash: 'c02', shortHash: 'c02b2c3', parents: ['c03'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(34), subject: 'Add overflow corrector', body: '', refs: [] },
-  { hash: 'c03', shortHash: 'c03c3d4', parents: ['c04'], author: 'Lin Chen', email: 'lin@example.dev', date: at(96), subject: 'Fixes stash node icon alignment', body: '', refs: ['origin/feature/onboard'] },
-  { hash: 'c04', shortHash: 'c04d4e5', parents: ['c05', 'c07'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(140), subject: 'Removes dead code', body: '', refs: [] },
-  { hash: 'c05', shortHash: 'c05e5f6', parents: ['c06'], author: 'Mara Singh', email: 'mara@example.dev', date: at(210), subject: 'Fix bugs in telemetry system', body: '', refs: ['feature/graph'] },
-  { hash: 'c06', shortHash: 'c06f607', parents: ['c08'], author: 'Lin Chen', email: 'lin@example.dev', date: at(320), subject: 'Ensures proper date ordering for Graph', body: '', refs: [] },
-  { hash: 'c07', shortHash: 'c07a708', parents: ['c08'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(360), subject: 'Use gitconfig to suggest profile author and email', body: '', refs: [] },
-  { hash: 'c08', shortHash: 'c08b809', parents: ['c09'], author: 'Mara Singh', email: 'mara@example.dev', date: at(540), subject: 'Log error instead of throwing', body: '', refs: ['bug/error-log'] },
-  { hash: 'c09', shortHash: 'c09c90a', parents: ['c10'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(880), subject: 'Runs yarn install after unlink', body: '', refs: [] },
-  { hash: 'c10', shortHash: 'c10d0ab', parents: ['c11'], author: 'Lin Chen', email: 'lin@example.dev', date: at(1450), subject: 'Add file-diff icons, bump component version', body: '', refs: ['feature/icons'] },
-  { hash: 'c11', shortHash: 'c11e1bc', parents: ['c12'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(2600), subject: 'Centralize command registrations', body: '', refs: ['development'] },
-  { hash: 'c12', shortHash: 'c12f2cd', parents: [], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(9000), subject: 'Add type safety to date ordering', body: '', refs: ['tag: v0.1.0'] },
+  { hash: 'c01', shortHash: 'c01a1b2', parents: ['c02'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(8), subject: 'Optimizes CSS output', body: 'Trims unused utilities and dedupes the emitted stylesheet.', refs: ['HEAD -> main'] },
+  { hash: 'c02', shortHash: 'c02b2c3', parents: ['c03'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(34), subject: 'Add overflow corrector', body: 'Prepared merge preview for affected spreadsheet rows.', refs: [] },
+  { hash: 'c03', shortHash: 'c03c3d4', parents: ['c04'], author: 'Lin Chen', email: 'lin@example.dev', date: at(96), subject: 'Fixes stash node icon alignment', body: 'Nudges the stash node so it lines up with commit dots.', refs: ['origin/feature/onboard'] },
+  { hash: 'c04', shortHash: 'c04d4e5', parents: ['c05', 'c07'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(140), subject: 'Removes dead code', body: 'Drops the legacy graph renderer and its helpers.', refs: [] },
+  { hash: 'c05', shortHash: 'c05e5f6', parents: ['c06'], author: 'Mara Singh', email: 'mara@example.dev', date: at(210), subject: 'Fix bugs in telemetry system', body: 'Guards against undefined spans during teardown.', refs: ['feature/graph'] },
+  { hash: 'c06', shortHash: 'c06f607', parents: ['c08'], author: 'Lin Chen', email: 'lin@example.dev', date: at(320), subject: 'Ensures proper date ordering for Graph', body: 'Sorts commits by author date before lane assignment.', refs: [] },
+  { hash: 'c07', shortHash: 'c07a708', parents: ['c08'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(360), subject: 'Use gitconfig to suggest profile author and email', body: 'Reads user.name / user.email as defaults.', refs: [] },
+  { hash: 'c08', shortHash: 'c08b809', parents: ['c09'], author: 'Mara Singh', email: 'mara@example.dev', date: at(540), subject: 'Log error instead of throwing', body: 'Downgrades a fatal path to a reported diagnostic.', refs: ['bug/error-log'] },
+  { hash: 'c09', shortHash: 'c09c90a', parents: ['c10'], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(880), subject: 'Runs yarn install after unlink', body: 'Restores dependencies once a linked package is removed.', refs: [] },
+  { hash: 'c10', shortHash: 'c10d0ab', parents: ['c11'], author: 'Lin Chen', email: 'lin@example.dev', date: at(1450), subject: 'Add file-diff icons, bump component version', body: 'Ships per-status diff icons and a minor version bump.', refs: ['feature/icons'] },
+  { hash: 'c11', shortHash: 'c11e1bc', parents: ['c12'], author: 'Grace Hopper', email: 'grace@example.dev', date: at(2600), subject: 'Centralize command registrations', body: 'Moves scattered command wiring into one registry.', refs: ['development'] },
+  { hash: 'c12', shortHash: 'c12f2cd', parents: [], author: 'Ada Lovelace', email: 'ada@example.dev', date: at(9000), subject: 'Add type safety to date ordering', body: 'Types the comparator so bad inputs fail at compile time.', refs: ['tag: v0.1.0'] },
 ]
 
+// Stand-in for the `git:show` call the live dashboard makes to fill the hover
+// card. Derives plausible changed-file stats from the hash so each commit reads
+// distinctly.
+async function loadDetail(hash: string): Promise<CommitDetail> {
+  const commit = commits.find(c => c.hash === hash)
+  const seed = hash.charCodeAt(hash.length - 1)
+  const additions = 20 + ((seed * 37) % 180)
+  const deletions = seed % 60
+  const fileCount = 1 + (seed % 4)
+  return {
+    isRepo: true,
+    found: true,
+    hash,
+    shortHash: commit?.shortHash ?? hash,
+    author: commit?.author ?? '',
+    email: commit?.email ?? '',
+    date: commit?.date ?? now,
+    committer: commit?.author ?? '',
+    committerEmail: commit?.email ?? '',
+    commitDate: commit?.date ?? now,
+    subject: commit?.subject ?? '',
+    body: commit?.body ?? '',
+    parents: commit?.parents ?? [],
+    refs: commit?.refs ?? [],
+    files: Array.from({ length: fileCount }, (_, i) => ({
+      path: `src/module-${i}.ts`,
+      additions: Math.round(additions / fileCount),
+      deletions: Math.round(deletions / fileCount),
+      binary: false,
+      status: 'modified' as const,
+    })),
+    totalAdditions: additions,
+    totalDeletions: deletions,
+    patch: null,
+    truncated: false,
+  }
+}
+
 const meta = {
   title: 'Panels/Log',
   component: LogPanelView,
@@ -41,6 +79,7 @@ const meta = {
     onRefresh: () => undefined,
     onLoadMore: () => undefined,
     onSelectCommit: () => undefined,
+    onLoadDetail: loadDetail,
   },
 } satisfies Meta<typeof LogPanelView>
 
diff --git a/plugins/git/src/client/components/views/log-panel-view.tsx b/plugins/git/src/client/components/views/log-panel-view.tsx
index 962dd780..1ddb141f 100644
--- a/plugins/git/src/client/components/views/log-panel-view.tsx
+++ b/plugins/git/src/client/components/views/log-panel-view.tsx
@@ -1,23 +1,35 @@
 'use client'
 
-import type { Commit } from '../../../index'
+import type { Commit, CommitDetail } from '../../../index'
 import type { GraphRow } from '../../lib/commit-graph'
 import type { GitRef } from '../../lib/refs'
-import { memo, useEffect, useMemo, useRef } from 'react'
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  safePolygon,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useTransitionStatus,
+} from '@floating-ui/react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { computeGraph } from '../../lib/commit-graph'
 import { parseRefs } from '../../lib/refs'
 import { cn } from '../../lib/utils'
+import { Avatar } from '../ui/avatar'
 import { IconButton } from '../ui/button'
 import { Icon } from '../ui/icon'
 import { Skeleton } from '../ui/skeleton'
 
-const ROW_H = 46
-const COL_W = 16
-const NODE_R = 5
-const PAD_L = 6
-// Width reserved on the left for branch / tag labels, right-aligned against
-// the graph so the active branch hugs its node.
-const REFS_W = 152
+const ROW_H = 30
+const COL_W = 15
+const NODE_R = 4
+const PAD_L = 8
 
 export interface LogPanelViewProps {
   rpcConnected: boolean
@@ -38,6 +50,11 @@ export interface LogPanelViewProps {
   onLoadMore: () => void | Promise<void>
   /** Called when a commit row is activated. */
   onSelectCommit?: (hash: string) => void
+  /**
+   * Lazily resolve a commit's detail (author, body, changed-file stats) for the
+   * hover card. Omitted in previews or when detail can't be fetched.
+   */
+  onLoadDetail?: (hash: string) => Promise<CommitDetail>
 }
 
 function relativeTime(epoch: number): string {
@@ -46,17 +63,17 @@ function relativeTime(epoch: number): string {
   if (mins < 1)
     return 'just now'
   if (mins < 60)
-    return `${mins}m ago`
+    return `${mins} minute${mins === 1 ? '' : 's'} ago`
   const hours = Math.round(mins / 60)
   if (hours < 24)
-    return `${hours}h ago`
+    return `${hours} hour${hours === 1 ? '' : 's'} ago`
   const days = Math.round(hours / 24)
   if (days < 30)
-    return `${days}d ago`
+    return `${days} day${days === 1 ? '' : 's'} ago`
   return new Date(epoch).toLocaleDateString()
 }
 
-/** `#rrggbb` → `rgba(...)`, for lane-tinted backgrounds. */
+/** `#rrggbb` → `rgba(...)`, for lane-tinted accents. */
 function withAlpha(hex: string, alpha: number): string {
   const r = Number.parseInt(hex.slice(1, 3), 16)
   const g = Number.parseInt(hex.slice(3, 5), 16)
@@ -110,13 +127,17 @@ function GraphCell({ row, width, isHead, topStub }: {
         />
       ))}
       {isHead && (
-        <circle cx={cx(row.col)} cy={mid} r={NODE_R + 3.5} fill="none" stroke={row.color} strokeWidth={1.5} opacity={0.4} />
+        <circle cx={cx(row.col)} cy={mid} r={NODE_R + 3.5} fill="none" stroke={row.color} strokeWidth={1.5} opacity={0.3} />
       )}
+      {/* HEAD reads as a hollow ring ("you are here"); every other commit is a
+          solid lane-colored dot. The ring's fill tracks the base surface
+          (`bg-base` → white / #111) so it reads as hollow in both themes. */}
       <circle
         cx={cx(row.col)}
         cy={mid}
         r={NODE_R}
-        fill={isHead ? row.color : 'var(--color-card)'}
+        fill={isHead ? undefined : row.color}
+        className={isHead ? 'fill-white dark:fill-[#111]' : undefined}
         stroke={row.color}
         strokeWidth={2.5}
       />
@@ -128,10 +149,10 @@ function RefLabel({ refToken, color }: { refToken: GitRef, color: string }) {
   if (refToken.kind === 'tag') {
     return (
       <span
-        className="inline-flex max-w-[140px] items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] leading-none font-medium"
+        className="inline-flex max-w-[140px] items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] leading-none font-medium"
         style={{ color, borderColor: withAlpha(color, 0.5), backgroundColor: withAlpha(color, 0.12) }}
       >
-        <Icon name="i-ph-tag-duotone" className="size-3 shrink-0" />
+        <Icon name="i-ph-tag-duotone" className="size-2.5 shrink-0" />
         <span className="truncate" title={refToken.name}>{refToken.name}</span>
       </span>
     )
@@ -139,7 +160,7 @@ function RefLabel({ refToken, color }: { refToken: GitRef, color: string }) {
 
   if (refToken.kind === 'head') {
     return (
-      <span className="color-muted inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[11px] leading-none font-medium">
+      <span className="color-muted inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 font-mono text-[10px] leading-none font-medium">
         HEAD
       </span>
     )
@@ -150,7 +171,7 @@ function RefLabel({ refToken, color }: { refToken: GitRef, color: string }) {
 
   return (
     <span
-      className="inline-flex max-w-[140px] items-center gap-1 rounded-full px-2 py-0.5 text-[11px] leading-none font-medium"
+      className="inline-flex max-w-[140px] items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] leading-none font-medium"
       style={
         current
           ? { color: '#fff', backgroundColor: color }
@@ -158,14 +179,87 @@ function RefLabel({ refToken, color }: { refToken: GitRef, color: string }) {
       }
     >
       {current
-        ? <Icon name="i-ph-check" className="size-3 shrink-0" />
-        : <Icon name="i-ph-git-branch-duotone" className="size-3 shrink-0 opacity-70" />}
+        ? <Icon name="i-ph-check" className="size-2.5 shrink-0" />
+        : <Icon name="i-ph-git-branch-duotone" className="size-2.5 shrink-0 opacity-70" />}
       <span className="truncate" title={name}>{name}</span>
     </span>
   )
 }
 
-const CommitRow = memo(({ commit, row, gutter, currentBranch, isHead, topStub, selected, onSelect }: {
+interface DetailState {
+  loading: boolean
+  data: CommitDetail | null
+}
+
+function DiffStat({ additions, deletions }: { additions: number, deletions: number }) {
+  return (
+    <span className="tabular-nums">
+      <span className="text-success font-medium">{`+${additions}`}</span>
+      {' '}
+      <span className="text-error font-medium">{`−${deletions}`}</span>
+    </span>
+  )
+}
+
+/** The floating commit card body (avatar, author, message, changed stats). */
+function CommitHoverCard({ commit, detail, onOpen }: {
+  commit: Commit
+  detail: DetailState | undefined
+  onOpen: () => void
+}) {
+  const body = (detail?.data?.body || commit.body || commit.subject).trim()
+  const files = detail?.data?.files.length ?? 0
+
+  return (
+    <>
+      <div className="space-y-2.5 p-3.5">
+        <div className="flex items-center gap-2.5">
+          <Avatar name={commit.author} email={commit.email} className="size-8 text-xs" />
+          <div className="flex min-w-0 items-baseline gap-2">
+            <span className="color-base truncate font-semibold">{commit.author}</span>
+            <span className="color-muted shrink-0 text-xs" title={new Date(commit.date).toLocaleString()}>
+              {relativeTime(commit.date)}
+            </span>
+          </div>
+        </div>
+        <p className="color-muted line-clamp-3 text-sm leading-snug">{body}</p>
+      </div>
+
+      <div className="border-base flex items-center justify-between border-t px-3.5 py-2.5 text-sm">
+        {detail?.loading || !detail
+          ? (
+              <span className="color-faint inline-flex items-center gap-1.5">
+                <Icon name="i-ph-spinner-gap" className="size-3.5 animate-spin" />
+                Loading…
+              </span>
+            )
+          : detail.data
+            ? (
+                <span className="color-muted">
+                  <span className="color-base font-medium">
+                    {files}
+                    {' '}
+                    {files === 1 ? 'file' : 'files'}
+                    {' '}
+                    changed
+                  </span>
+                  {' '}
+                  <DiffStat additions={detail.data.totalAdditions} deletions={detail.data.totalDeletions} />
+                </span>
+              )
+            : (
+                <code className="color-muted tabular-nums">{commit.shortHash}</code>
+              )}
+
+        <IconButton variant="ghost" size="sm" onClick={onOpen} aria-label="Open commit details">
+          <Icon name="i-ph-arrow-right" className="size-4" />
+        </IconButton>
+      </div>
+    </>
+  )
+}
+
+const CommitRow = memo(({ commit, row, gutter, currentBranch, isHead, topStub, selected, onSelect, onLoadDetail }: {
   commit: Commit
   row: GraphRow
   gutter: number
@@ -174,52 +268,99 @@ const CommitRow = memo(({ commit, row, gutter, currentBranch, isHead, topStub, s
   topStub: boolean
   selected: boolean
   onSelect?: (hash: string) => void
+  onLoadDetail?: (hash: string) => Promise<CommitDetail>
 }) => {
   const refs = useMemo(() => parseRefs(commit.refs, currentBranch), [commit.refs, currentBranch])
-  const hasCurrent = refs.some(r => r.kind === 'branch' && r.current)
+  // Commits off the mainline (lane 0) recede, so the checked-out line reads as
+  // the spine of the history — matching the emphasized/faded rows in the design.
+  const [open, setOpen] = useState(false)
+  const [detail, setDetail] = useState<DetailState | undefined>()
+  const dim = row.col !== 0 && !selected && !open
+
+  // Floating-ui drives the hover card: hover (with a safe-polygon bridge so the
+  // pointer can travel into the card) + keyboard focus open it, dismiss closes
+  // it, and `useTransitionStatus` gates the @antfu/design fade animation.
+  const floating = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  })
+  const hover = useHover(floating.context, { delay: { open: 200, close: 80 }, handleClose: safePolygon() })
+  const focus = useFocus(floating.context)
+  const dismiss = useDismiss(floating.context)
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss])
+  const { isMounted, status } = useTransitionStatus(floating.context, { duration: 150 })
+
+  useEffect(() => {
+    if (!open || detail || !onLoadDetail)
+      return
+    let alive = true
+    setDetail({ loading: true, data: null })
+    onLoadDetail(commit.hash)
+      .then(data => alive && setDetail({ loading: false, data }))
+      .catch(() => alive && setDetail({ loading: false, data: null }))
+    return () => {
+      alive = false
+    }
+  }, [open, detail, onLoadDetail, commit.hash])
 
   return (
     <li>
       <button
+        ref={floating.refs.setReference}
         type="button"
-        onClick={() => onSelect?.(commit.hash)}
         aria-current={selected ? 'true' : undefined}
         className={cn(
           'relative flex w-full items-stretch rounded-md text-left transition-colors',
           'focus-visible:ring-primary-500/40 outline-none focus-visible:ring-2',
-          selected ? 'ring-primary/60 bg-active ring-1' : 'hover:bg-active',
+          selected ? 'bg-active' : 'hover:bg-active',
         )}
         style={{ height: ROW_H }}
+        {...getReferenceProps({ onClick: () => onSelect?.(commit.hash) })}
       >
-        {/* Lane-tinted row highlight, fading toward the message. */}
-        <div
-          className="pointer-events-none absolute inset-y-[5px] left-0 rounded-full"
-          style={{
-            width: REFS_W + gutter + 12,
-            background: `linear-gradient(90deg, ${withAlpha(row.color, hasCurrent ? 0.34 : 0.2)} 0%, ${withAlpha(row.color, 0.04)} 100%)`,
-          }}
-        />
+        <div className="relative z-10">
+          <GraphCell row={row} width={gutter} isHead={isHead} topStub={topStub} />
+        </div>
 
-        <div className="relative z-10 flex items-center justify-end gap-1 overflow-hidden pr-1.5" style={{ width: REFS_W }}>
+        <div className="relative z-10 flex min-w-0 flex-1 items-center gap-1.5 pr-2 pl-1.5">
+          <span
+            className={cn(
+              'truncate text-[13px] transition-colors',
+              dim ? 'color-faint font-normal' : 'color-base font-medium',
+            )}
+            title={commit.subject}
+          >
+            {commit.subject}
+          </span>
           {refs.map((refToken, i) => (
             <RefLabel key={i} refToken={refToken} color={row.color} />
           ))}
         </div>
+      </button>
 
-        <div className="relative z-10">
-          <GraphCell row={row} width={gutter} isHead={isHead} topStub={topStub} />
-        </div>
-
-        <div className="relative z-10 flex min-w-0 flex-1 flex-col justify-center gap-0.5 pl-4">
-          <span className="truncate text-sm font-medium" title={commit.subject}>{commit.subject}</span>
-          <div className="color-muted flex items-center gap-2 text-xs">
-            <code className="shrink-0 tabular-nums">{commit.shortHash}</code>
-            <span className="truncate">{commit.author}</span>
-            <span aria-hidden>·</span>
-            <span className="shrink-0 tabular-nums" title={new Date(commit.date).toLocaleString()}>{relativeTime(commit.date)}</span>
+      {isMounted && (
+        <FloatingPortal>
+          <div
+            ref={floating.refs.setFloating}
+            style={floating.floatingStyles}
+            data-af-animate
+            data-state={status === 'open' ? 'open' : 'closed'}
+            className="border-base bg-base z-tooltip w-80 overflow-hidden rounded-lg border shadow-lg"
+            {...getFloatingProps()}
+          >
+            <CommitHoverCard
+              commit={commit}
+              detail={detail}
+              onOpen={() => {
+                onSelect?.(commit.hash)
+                setOpen(false)
+              }}
+            />
           </div>
-        </div>
-      </button>
+        </FloatingPortal>
+      )}
     </li>
   )
 })
@@ -233,11 +374,6 @@ function WipRow({ col, color, gutter, changes }: {
   const mid = ROW_H / 2
   return (
     <li className="relative flex items-stretch" style={{ height: ROW_H }}>
-      <div
-        className="pointer-events-none absolute inset-y-[5px] left-0 rounded-full"
-        style={{ width: REFS_W + gutter + 12, background: `linear-gradient(90deg, ${withAlpha(color, 0.16)} 0%, ${withAlpha(color, 0.03)} 100%)` }}
-      />
-      <div className="relative z-10" style={{ width: REFS_W }} />
       <div className="relative z-10">
         <svg width={gutter} height={ROW_H} className="block shrink-0" style={{ overflow: 'visible' }} aria-hidden>
           <path
@@ -248,12 +384,12 @@ function WipRow({ col, color, gutter, changes }: {
             strokeDasharray="2 3"
             strokeLinecap="round"
           />
-          <circle cx={cx(col)} cy={mid} r={NODE_R} fill="var(--color-card)" stroke={color} strokeWidth={2} strokeDasharray="2 2" />
+          <circle cx={cx(col)} cy={mid} r={NODE_R} className="fill-white dark:fill-[#111]" stroke={color} strokeWidth={2} strokeDasharray="2 2" />
         </svg>
       </div>
-      <div className="relative z-10 flex min-w-0 flex-1 items-center gap-2 pl-4">
+      <div className="relative z-10 flex min-w-0 flex-1 items-center gap-2 pr-2 pl-1.5">
         <Icon name="i-ph-pencil-simple-duotone" className="color-muted size-3.5 shrink-0" />
-        <span className="text-sm font-medium">Work in Progress</span>
+        <span className="text-[13px] font-medium">Work in Progress</span>
         <span className="color-muted text-xs">
           {changes}
           {' '}
@@ -279,6 +415,7 @@ export function LogPanelView(props: LogPanelViewProps) {
     onRefresh,
     onLoadMore,
     onSelectCommit,
+    onLoadDetail,
   } = props
 
   const graph = useMemo(
@@ -326,21 +463,24 @@ export function LogPanelView(props: LogPanelViewProps) {
   }, [hasMore, loading, commits.length])
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-3">
-      <div className="flex items-center justify-between">
-        <span className="color-muted text-xs tabular-nums">
-          {isRepo
-            ? `${commits.length}${hasMore ? '+' : ''} commits${selectedRef ? ` · ${selectedRef}` : ''}`
-            : ' '}
-        </span>
+    <div className="flex h-full min-h-0 flex-col gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-baseline gap-2.5">
+          <h2 className="text-lg leading-none font-semibold tracking-tight">Commit History</h2>
+          <span className="color-muted shrink-0 text-xs tabular-nums">
+            {isRepo
+              ? `${commits.length}${hasMore ? '+' : ''}${selectedRef ? ` · ${selectedRef}` : ''}`
+              : ''}
+          </span>
+        </div>
         <IconButton variant="ghost" size="sm" onClick={onRefresh} disabled={loading} aria-label="Refresh log">
           <Icon name="i-ph-arrows-clockwise" className={cn('size-4', loading && 'animate-spin')} />
         </IconButton>
       </div>
 
       {!rpcConnected && (
-        <div className="space-y-2">
-          {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+        <div className="space-y-1.5">
+          {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-8 w-full" />)}
         </div>
       )}
 
@@ -357,7 +497,7 @@ export function LogPanelView(props: LogPanelViewProps) {
       )}
 
       {isRepo === true && commits.length > 0 && (
-        <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto pr-2">
+        <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto pr-1">
           <ul>
             {showWip && headRow && (
               <WipRow col={headRow.col} color={headRow.color} gutter={gutter} changes={workingChanges ?? 0} />
@@ -373,6 +513,7 @@ export function LogPanelView(props: LogPanelViewProps) {
                 topStub={i === 0 && showWip}
                 selected={commit.hash === selectedHash}
                 onSelect={onSelectCommit}
+                onLoadDetail={onLoadDetail}
               />
             ))}
           </ul>
diff --git a/plugins/git/src/client/components/views/status-panel-view.stories.tsx b/plugins/git/src/client/components/views/status-panel-view.stories.tsx
index 65ee26f7..2677fc68 100644
--- a/plugins/git/src/client/components/views/status-panel-view.stories.tsx
+++ b/plugins/git/src/client/components/views/status-panel-view.stories.tsx
@@ -57,7 +57,7 @@ function Harness(props: Partial<React.ComponentProps<typeof StatusPanelView>>) {
 }
 
 const meta = {
-  title: 'Panels/Status',
+  title: 'Panels/Changes',
   component: Harness,
 } satisfies Meta<typeof Harness>
 
@@ -69,3 +69,13 @@ export const ReadOnly: Story = { args: { canWrite: false } }
 export const Clean: Story = { args: { data: clean } }
 export const Loading: Story = { args: { data: null, loading: true } }
 export const NotARepo: Story = { args: { data: { ...clean, isRepo: false } } }
+export const FileSelected: Story = {
+  args: {
+    selectedKey: 'false:README.md',
+    patchSlot: (
+      <div className="color-muted p-3 font-mono text-xs">
+        diff --git a/README.md b/README.md
+      </div>
+    ),
+  },
+}
diff --git a/plugins/git/src/client/components/views/status-panel-view.tsx b/plugins/git/src/client/components/views/status-panel-view.tsx
index 101a855f..a57609ef 100644
--- a/plugins/git/src/client/components/views/status-panel-view.tsx
+++ b/plugins/git/src/client/components/views/status-panel-view.tsx
@@ -1,12 +1,15 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import type { FileStatusCode, GitStatus, StatusFileEntry } from '../../../index'
+import type { GitStatus, StatusFileEntry } from '../../../index'
+import { cn } from '../../lib/utils'
 import { Badge } from '../ui/badge'
 import { Button, IconButton } from '../ui/button'
+import { FileIcon } from '../ui/file-icon'
 import { Icon } from '../ui/icon'
 import { ScrollArea } from '../ui/scroll-area'
 import { Skeleton } from '../ui/skeleton'
+import { StatusMark } from '../ui/status-mark'
 import { Textarea } from '../ui/textarea'
 
 export interface StatusPanelViewProps {
@@ -16,44 +19,47 @@ export interface StatusPanelViewProps {
   canWrite: boolean
   message: string
   note: string | null
+  /** `${staged}:${path}` of the file whose diff is shown, or `null`. */
+  selectedKey?: string | null
   onRefresh: () => void | Promise<void>
   onStage: (paths: string[]) => void | Promise<void>
   onUnstage: (paths: string[]) => void | Promise<void>
   onCommit: () => void | Promise<void>
   onMessageChange: (value: string) => void
+  /** Reveal a file's diff. `staged` picks the index-vs-HEAD diff. */
+  onSelectFile?: (path: string, staged: boolean) => void
+  /** The selected file's diff viewer, rendered below the file list. */
+  patchSlot?: ReactNode
 }
 
-const STATUS_LABEL: Record<FileStatusCode, string> = {
-  'modified': 'M',
-  'added': 'A',
-  'deleted': 'D',
-  'renamed': 'R',
-  'copied': 'C',
-  'type-changed': 'T',
-  'unmerged': 'U',
-  'unknown': '?',
+function fileKey(path: string, staged: boolean): string {
+  return `${staged}:${path}`
 }
 
-function statusColor(code: FileStatusCode): string {
-  switch (code) {
-    case 'added': return 'text-success'
-    case 'deleted': return 'text-error'
-    case 'modified': return 'text-warning'
-    case 'unmerged': return 'text-error'
-    default: return 'color-muted'
-  }
-}
-
-function FileRow({ entry, action }: { entry: StatusFileEntry, action?: ReactNode }) {
+function FileRow({ entry, staged, selected, action, onSelect }: {
+  entry: StatusFileEntry
+  staged: boolean
+  selected: boolean
+  action?: ReactNode
+  onSelect?: (path: string, staged: boolean) => void
+}) {
   const label = entry.from ? `${entry.from} → ${entry.path}` : entry.path
   return (
-    <li className="hover:bg-active flex items-center gap-2 rounded py-0.5 pl-1 font-mono text-xs transition-colors">
-      <span className={`w-3 shrink-0 text-center font-semibold ${statusColor(entry.status)}`}>
-        {STATUS_LABEL[entry.status]}
-      </span>
-      <span className="flex-1 truncate" title={label}>
-        {label}
-      </span>
+    <li
+      className={cn(
+        'group flex items-center gap-1 rounded pr-1 transition-colors',
+        selected ? 'bg-active' : 'hover:bg-active',
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => onSelect?.(entry.path, staged)}
+        className="flex min-w-0 flex-1 items-center gap-1.5 py-0.5 pl-1 text-left text-xs outline-none"
+      >
+        <StatusMark code={entry.status} />
+        <FileIcon path={entry.path} className="size-4" />
+        <span className="min-w-0 flex-1 truncate font-mono" title={label}>{label}</span>
+      </button>
       {action}
     </li>
   )
@@ -87,7 +93,7 @@ function Section({
 }
 
 export function StatusPanelView(props: StatusPanelViewProps) {
-  const { data, loading, busy, canWrite, message, note, onRefresh, onStage, onUnstage, onCommit, onMessageChange } = props
+  const { data, loading, busy, canWrite, message, note, selectedKey, onRefresh, onStage, onUnstage, onCommit, onMessageChange, onSelectFile, patchSlot } = props
 
   const stageBtn = (paths: string[], label: string) => (
     <IconButton variant="ghost" size="sm" disabled={busy} aria-label={label} onClick={() => onStage(paths)}>
@@ -103,48 +109,45 @@ export function StatusPanelView(props: StatusPanelViewProps) {
   return (
     <div className="flex h-full min-h-0 flex-col gap-3">
       <div className="flex shrink-0 items-center justify-between gap-2">
-        <div className="flex flex-wrap items-center gap-2">
-          {data?.isRepo
-            ? (
-                <>
-                  <Badge variant="outline" className="gap-1 font-mono">
-                    <Icon name="i-ph-git-branch-duotone" className="size-3" />
-                    {data.detached ? `detached @ ${data.head}` : data.branch}
-                  </Badge>
-                  {data.upstream && (
-                    <Badge variant="secondary" className="gap-1 font-mono">
-                      {data.upstream}
-                      {data.ahead > 0 && (
-                        <span className="text-success inline-flex items-center tabular-nums">
-                          <Icon name="i-ph-arrow-up" className="size-3" />
-                          {data.ahead}
-                        </span>
-                      )}
-                      {data.behind > 0 && (
-                        <span className="text-warning inline-flex items-center tabular-nums">
-                          <Icon name="i-ph-arrow-down" className="size-3" />
-                          {data.behind}
-                        </span>
-                      )}
-                    </Badge>
-                  )}
-                  {data.clean
-                    ? (
-                        <Badge variant="success" className="gap-1">
-                          <Icon name="i-ph-check" className="size-3" />
-                          clean
-                        </Badge>
-                      )
-                    : <Badge variant="warning">working tree dirty</Badge>}
-                </>
-              )
-            : <Skeleton className="h-5 w-40" />}
+        <div className="flex min-w-0 items-baseline gap-2.5">
+          <h2 className="text-lg leading-none font-semibold tracking-tight">Changes</h2>
+          {data?.isRepo && !data.clean && (
+            <span className="color-muted shrink-0 text-xs tabular-nums">
+              {data.staged.length + data.unstaged.length + data.untracked.length}
+              {' '}
+              changed
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {data?.isRepo && (data.ahead > 0 || data.behind > 0) && (
+            <Badge variant="secondary" className="gap-1 font-mono">
+              {data.ahead > 0 && (
+                <span className="text-success inline-flex items-center tabular-nums">
+                  <Icon name="i-ph-arrow-up" className="size-3" />
+                  {data.ahead}
+                </span>
+              )}
+              {data.behind > 0 && (
+                <span className="text-warning inline-flex items-center tabular-nums">
+                  <Icon name="i-ph-arrow-down" className="size-3" />
+                  {data.behind}
+                </span>
+              )}
+            </Badge>
+          )}
+          <IconButton variant="ghost" size="sm" onClick={onRefresh} disabled={loading || busy} aria-label="Refresh status">
+            <Icon name="i-ph-arrows-clockwise" className={`size-4 ${loading ? 'animate-spin' : ''}`} />
+          </IconButton>
         </div>
-        <IconButton variant="ghost" size="sm" onClick={onRefresh} disabled={loading || busy} aria-label="Refresh status">
-          <Icon name="i-ph-arrows-clockwise" className={`size-4 ${loading ? 'animate-spin' : ''}`} />
-        </IconButton>
       </div>
 
+      {!data && (
+        <div className="space-y-2">
+          {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-6 w-full" />)}
+        </div>
+      )}
+
       {data && !data.isRepo && (
         <p className="color-muted text-sm">The working directory is not a git repository.</p>
       )}
@@ -168,6 +171,9 @@ export function StatusPanelView(props: StatusPanelViewProps) {
                   <FileRow
                     key={`s:${entry.path}`}
                     entry={entry}
+                    staged
+                    selected={selectedKey === fileKey(entry.path, true)}
+                    onSelect={onSelectFile}
                     action={canWrite ? unstageBtn([entry.path], `Unstage ${entry.path}`) : undefined}
                   />
                 ))}
@@ -184,6 +190,9 @@ export function StatusPanelView(props: StatusPanelViewProps) {
                   <FileRow
                     key={`u:${entry.path}`}
                     entry={entry}
+                    staged={false}
+                    selected={selectedKey === fileKey(entry.path, false)}
+                    onSelect={onSelectFile}
                     action={canWrite ? stageBtn([entry.path], `Stage ${entry.path}`) : undefined}
                   />
                 ))}
@@ -200,6 +209,9 @@ export function StatusPanelView(props: StatusPanelViewProps) {
                   <FileRow
                     key={`t:${path}`}
                     entry={{ path, status: 'unknown' }}
+                    staged={false}
+                    selected={selectedKey === fileKey(path, false)}
+                    onSelect={onSelectFile}
                     action={canWrite ? stageBtn([path], `Stage ${path}`) : undefined}
                   />
                 ))}
@@ -207,6 +219,12 @@ export function StatusPanelView(props: StatusPanelViewProps) {
             </div>
           </ScrollArea>
 
+          {patchSlot && (
+            <div className="min-h-0 flex-1 overflow-hidden rounded-md border">
+              {patchSlot}
+            </div>
+          )}
+
           {canWrite && data.staged.length > 0 && (
             <div className="shrink-0 space-y-2 border-t pt-3">
               <Textarea
diff --git a/plugins/git/src/client/lib/commit-graph.ts b/plugins/git/src/client/lib/commit-graph.ts
index 13501606..c2eb79b4 100644
--- a/plugins/git/src/client/lib/commit-graph.ts
+++ b/plugins/git/src/client/lib/commit-graph.ts
@@ -33,19 +33,18 @@ export interface CommitGraph {
   columns: number
 }
 
-// Lane palette tuned to read clearly on the dark dashboard, à la GitLens'
-// commit graph: a vivid violet leads (the mainline / current branch tends to
-// land in lane 0), then warm/cool tones alternate so adjacent lanes stay
-// distinct.
+// Lane palette tuned to read clearly in both themes: a blue leads (the mainline
+// / current branch tends to land in lane 0), then warm tones — orange, red —
+// pick up branches as they fan out, so adjacent lanes stay distinct.
 export const GRAPH_COLORS = [
-  '#a78bfa', // violet
+  '#3b82f6', // blue
+  '#f59e0b', // amber / orange
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#10b981', // emerald
   '#ec4899', // pink
-  '#f5b14c', // amber
-  '#34d399', // emerald
-  '#38bdf8', // sky
-  '#22d3ee', // cyan
-  '#f87171', // red
-  '#a3e635', // lime
+  '#06b6d4', // cyan
+  '#f97316', // orange
 ]
 
 interface Lane {
diff --git a/plugins/git/src/client/lib/file-icon.ts b/plugins/git/src/client/lib/file-icon.ts
new file mode 100644
index 00000000..ce5e58a8
--- /dev/null
+++ b/plugins/git/src/client/lib/file-icon.ts
@@ -0,0 +1,57 @@
+// @unocss-include — the `i-catppuccin:*` classes below are assembled by path at
+// runtime, so this marker forces UnoCSS to emit every one of them.
+//
+// A local port of `@antfu/design`'s `FileIcon` (its `utils/icon`), mapping a
+// file path to a catppuccin icon class. Ported rather than imported so the React
+// surface stays self-contained and its UnoCSS build extracts the finite icon set
+// straight from this file. See `@antfu/design/utils/icon` for the source list.
+
+interface FileIconRule {
+  match: RegExp
+  icon: string
+}
+
+// Ordered so the first match wins (e.g. `.d.ts` before `.ts`).
+const FILE_ICON_RULES: FileIconRule[] = [
+  { match: /package\.json$/, icon: 'i-catppuccin:npm' },
+  { match: /(?:^|\/)tsconfig(?:\.\w+)?\.json$/, icon: 'i-catppuccin:typescript-config' },
+  { match: /\.(?:test|spec)\.[cm]?[jt]sx?$/, icon: 'i-catppuccin:typescript-test' },
+  { match: /\.vue$/, icon: 'i-catppuccin:vue' },
+  { match: /\.svelte$/, icon: 'i-catppuccin:svelte' },
+  { match: /\.tsx$/, icon: 'i-catppuccin:typescript-react' },
+  { match: /\.jsx$/, icon: 'i-catppuccin:javascript-react' },
+  { match: /\.d\.[cm]?ts$/, icon: 'i-catppuccin:typescript-def' },
+  { match: /\.[cm]?ts$/, icon: 'i-catppuccin:typescript' },
+  { match: /\.[cm]?js$/, icon: 'i-catppuccin:javascript' },
+  { match: /\.json5?$/, icon: 'i-catppuccin:json' },
+  { match: /\.ya?ml$/, icon: 'i-catppuccin:yaml' },
+  { match: /\.toml$/, icon: 'i-catppuccin:toml' },
+  { match: /\.mdx?$/, icon: 'i-catppuccin:markdown' },
+  { match: /\.html?$/, icon: 'i-catppuccin:html' },
+  { match: /\.(?:css|postcss)$/, icon: 'i-catppuccin:css' },
+  { match: /\.s[ac]ss$/, icon: 'i-catppuccin:sass' },
+  { match: /\.less$/, icon: 'i-catppuccin:less' },
+  { match: /\.svg$/, icon: 'i-catppuccin:svg' },
+  { match: /\.(?:png|jpe?g|gif|webp|avif|ico)$/, icon: 'i-catppuccin:image' },
+  { match: /\.(?:woff2?|ttf|otf|eot)$/, icon: 'i-catppuccin:font' },
+  { match: /\.wasm$/, icon: 'i-catppuccin:webassembly' },
+  { match: /\.(?:sh|bash|zsh|fish)$/, icon: 'i-catppuccin:bash' },
+  { match: /\.py$/, icon: 'i-catppuccin:python' },
+  { match: /\.rs$/, icon: 'i-catppuccin:rust' },
+  { match: /\.go$/, icon: 'i-catppuccin:go' },
+  { match: /\.(?:xlsx?|csv)$/, icon: 'i-catppuccin:table' },
+  { match: /(?:^|\/)\.gitignore$/, icon: 'i-catppuccin:git' },
+  { match: /(?:^|\/)LICENSE(?:\.\w+)?$/, icon: 'i-catppuccin:license' },
+]
+
+const FALLBACK_FILE_ICON = 'i-catppuccin:file'
+
+/** Resolve the catppuccin icon class for a file path (query/hash stripped). */
+export function getFileIcon(path: string): string {
+  const clean = path.replace(/[?#].*$/, '')
+  for (const rule of FILE_ICON_RULES) {
+    if (rule.match.test(clean))
+      return rule.icon
+  }
+  return FALLBACK_FILE_ICON
+}
diff --git a/plugins/git/src/client/next.config.mjs b/plugins/git/src/client/next.config.mjs
index 55bd2e31..d88ef108 100644
--- a/plugins/git/src/client/next.config.mjs
+++ b/plugins/git/src/client/next.config.mjs
@@ -1,15 +1,25 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: 'export',
-  assetPrefix: '.',
-  trailingSlash: true,
-  images: { unoptimized: true },
-  // The workspace tsconfig uses path aliases that point at devframe's
-  // source so source-level edits HMR cleanly. Next.js's incremental TS
-  // check can't follow workspace project references through those aliases
-  // and ends up type-checking unrelated source. Defer typechecking to the
-  // workspace's own `tsc -b` (`pnpm typecheck`), which honors references.
-  typescript: { ignoreBuildErrors: true },
-}
+import { PHASE_DEVELOPMENT_SERVER } from 'next/constants.js'
 
-export default nextConfig
+/**
+ * The static-export options (`output: 'export'`, a relative `assetPrefix`, and
+ * `trailingSlash`) exist so `next build` emits a self-contained SPA that mounts
+ * at any base. They are wrong for `next dev`: a relative `assetPrefix` breaks
+ * the dev client runtime's chunk base, so the page never hydrates (no
+ * interactivity, and the RPC client never connects). Apply them only for the
+ * production build so `pnpm dev` hydrates normally.
+ *
+ * @type {(phase: string) => import('next').NextConfig}
+ */
+export default (phase) => {
+  const isDev = phase === PHASE_DEVELOPMENT_SERVER
+  return {
+    ...(isDev ? {} : { output: 'export', assetPrefix: '.', trailingSlash: true }),
+    images: { unoptimized: true },
+    // The workspace tsconfig uses path aliases that point at devframe's
+    // source so source-level edits HMR cleanly. Next.js's incremental TS
+    // check can't follow workspace project references through those aliases
+    // and ends up type-checking unrelated source. Defer typechecking to the
+    // workspace's own `tsc -b` (`pnpm typecheck`), which honors references.
+    typescript: { ignoreBuildErrors: true },
+  }
+}
diff --git a/plugins/git/src/rpc/functions/show.ts b/plugins/git/src/rpc/functions/show.ts
index 09ad0cc5..59ba47b6 100644
--- a/plugins/git/src/rpc/functions/show.ts
+++ b/plugins/git/src/rpc/functions/show.ts
@@ -1,4 +1,5 @@
 import type { GitContext } from '../context.ts'
+import type { FileStatusCode } from './status.ts'
 import { defineRpcFunction } from 'devframe'
 import { isSafeRevision, splitClean, tryGit, UNIT } from '../../node/git.ts'
 import { getGitContext } from '../context.ts'
@@ -17,6 +18,8 @@ export interface CommitFile {
   additions: number
   deletions: number
   binary: boolean
+  /** Change kind relative to the parent (add / modify / delete / rename …). */
+  status: FileStatusCode
 }
 
 export interface CommitDetail {
@@ -91,15 +94,46 @@ const SHOW_FORMAT = [
   '%b', // body
 ].join(UNIT)
 
-function parseNumstat(raw: string): CommitFile[] {
+function mapStatusCode(code: string): FileStatusCode {
+  switch (code[0]) {
+    case 'M': return 'modified'
+    case 'A': return 'added'
+    case 'D': return 'deleted'
+    case 'R': return 'renamed'
+    case 'C': return 'copied'
+    case 'T': return 'type-changed'
+    case 'U': return 'unmerged'
+    default: return 'unknown'
+  }
+}
+
+/**
+ * Parse `git diff-tree --name-status` into a `path → status` map. Rename/copy
+ * rows carry a similarity score and both old + new paths; the new path (last
+ * field) keys the map so it aligns with the numstat entry.
+ */
+function parseNameStatus(raw: string): Map<string, FileStatusCode> {
+  const map = new Map<string, FileStatusCode>()
+  for (const line of splitClean(raw, '\n')) {
+    const [code, ...paths] = line.split('\t')
+    const path = paths[paths.length - 1]
+    if (path)
+      map.set(path, mapStatusCode(code))
+  }
+  return map
+}
+
+function parseNumstat(raw: string, status: Map<string, FileStatusCode>): CommitFile[] {
   return splitClean(raw, '\n').map((line) => {
     const [add, del, ...rest] = line.split('\t')
     const binary = add === '-' || del === '-'
+    const path = rest.join('\t')
     return {
-      path: rest.join('\t'),
+      path,
       additions: binary ? 0 : Number(add),
       deletions: binary ? 0 : Number(del),
       binary,
+      status: status.get(path) ?? 'modified',
     }
   })
 }
@@ -129,7 +163,8 @@ async function readCommit(git: GitContext, hash: string, includePatch: boolean):
 
   // `--root` so the initial commit reports its full tree as additions.
   const numstat = await tryGit(git.cwd, ['diff-tree', '--no-commit-id', '--numstat', '-r', '--root', '--end-of-options', hash])
-  const files = numstat ? parseNumstat(numstat) : []
+  const nameStatusRaw = await tryGit(git.cwd, ['diff-tree', '--no-commit-id', '--name-status', '-r', '--root', '--end-of-options', hash])
+  const files = numstat ? parseNumstat(numstat, nameStatusRaw ? parseNameStatus(nameStatusRaw) : new Map()) : []
   const totalAdditions = files.reduce((sum, f) => sum + f.additions, 0)
   const totalDeletions = files.reduce((sum, f) => sum + f.deletions, 0)
 
diff --git a/plugins/git/test/git.test.ts b/plugins/git/test/git.test.ts
index dc591f84..e3bffeee 100644
--- a/plugins/git/test/git.test.ts
+++ b/plugins/git/test/git.test.ts
@@ -118,6 +118,8 @@ describe('@devframes/plugin-git', () => {
     expect(detail.found).toBe(true)
     expect(detail.hash).toBe(log.commits[0].hash)
     expect(detail.files.map(file => file.path)).toContain('a.txt')
+    // Each changed file carries its change kind (add / modify / delete …).
+    expect(detail.files.find(file => file.path === 'a.txt')?.status).toBe('added')
   })
 
   it('lists local branches with the current one first', async () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aecdf6a8..92ee607d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,6 +129,12 @@ catalogs:
     '@antfu/design':
       specifier: ^0.2.1
       version: 0.2.1
+    '@floating-ui/react':
+      specifier: ^0.27.0
+      version: 0.27.20
+    '@iconify-json/catppuccin':
+      specifier: ^1.2.0
+      version: 1.2.17
     '@iconify-json/ph':
       specifier: ^1.2.2
       version: 1.2.2
@@ -384,7 +390,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       colorjs.io:
         specifier: catalog:frontend
         version: 0.6.1
@@ -424,7 +430,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@devframes/hub':
         specifier: workspace:*
         version: link:../../packages/hub
@@ -494,7 +500,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@devframes/hub':
         specifier: workspace:*
         version: link:../../packages/hub
@@ -543,7 +549,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       colorjs.io:
         specifier: catalog:frontend
         version: 0.6.1
@@ -589,7 +595,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@devframes/hub':
         specifier: workspace:*
         version: link:../../packages/hub
@@ -629,7 +635,7 @@ importers:
     dependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       colorjs.io:
         specifier: catalog:frontend
         version: 0.6.1
@@ -813,7 +819,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       colorjs.io:
         specifier: catalog:frontend
         version: 0.6.1
@@ -865,7 +871,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@iconify-json/ph':
         specifier: catalog:frontend
         version: 1.2.2
@@ -914,7 +920,13 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+      '@floating-ui/react':
+        specifier: catalog:frontend
+        version: 0.27.20(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@iconify-json/catppuccin':
+        specifier: catalog:frontend
+        version: 1.2.17
       '@pierre/diffs':
         specifier: catalog:frontend
         version: 1.2.12(@shikijs/themes@4.3.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -1005,7 +1017,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@5.9.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@5.9.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@5.9.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@5.9.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@5.9.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@5.9.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@5.9.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@5.9.3))
       '@iconify-json/ph':
         specifier: catalog:frontend
         version: 1.2.2
@@ -1069,7 +1081,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@devframes/hub':
         specifier: workspace:*
         version: link:../../packages/hub
@@ -1151,7 +1163,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@iconify-json/ph':
         specifier: catalog:frontend
         version: 1.2.2
@@ -1208,7 +1220,7 @@ importers:
     devDependencies:
       '@antfu/design':
         specifier: catalog:frontend
-        version: 0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
+        version: 0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))
       '@iconify-json/ph':
         specifier: catalog:frontend
         version: 1.2.2
@@ -1977,15 +1989,36 @@ packages:
   '@floating-ui/core@1.7.5':
     resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
   '@floating-ui/dom@1.1.1':
     resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
 
   '@floating-ui/dom@1.7.6':
     resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
 
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.27.20':
+    resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@floating-ui/vue@1.1.11':
     resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
 
@@ -2015,6 +2048,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/catppuccin@1.2.17':
+    resolution: {integrity: sha512-l1pFOADEUlw+j7V+yfFzBowdE4deeMuI4amqfKaN+7uTI9B0Ho24C86DitQk5zb62NkEM9poOyfuG7WS2bw6jg==}
+
   '@iconify-json/ph@1.2.2':
     resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
 
@@ -9153,13 +9189,14 @@ snapshots:
 
   '@adobe/css-tools@4.5.0': {}
 
-  '@antfu/design@0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@5.9.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@5.9.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@5.9.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@5.9.3))':
+  '@antfu/design@0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@5.9.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@5.9.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@5.9.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 14.3.0(vue@3.5.39(typescript@5.9.3))
       unocss: 66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0))
       vue: 3.5.39(typescript@5.9.3)
     optionalDependencies:
       '@antfu/utils': 9.3.0
+      '@iconify-json/catppuccin': 1.2.17
       '@tanstack/vue-virtual': 3.13.30(vue@3.5.39(typescript@5.9.3))
       '@unocss/core': 66.7.5
       colorjs.io: 0.6.1
@@ -9167,13 +9204,14 @@ snapshots:
       playwright: 1.61.1
       reka-ui: 2.10.1(vue@3.5.39(typescript@5.9.3))
 
-  '@antfu/design@0.2.1(@antfu/utils@9.3.0)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))':
+  '@antfu/design@0.2.1(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.39(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.6.1)(floating-vue@5.2.2(vue@3.5.39(typescript@6.0.3)))(playwright@1.61.1)(reka-ui@2.10.1(vue@3.5.39(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0)))(vue@3.5.39(typescript@6.0.3))':
     dependencies:
       '@vueuse/core': 14.3.0(vue@3.5.39(typescript@6.0.3))
       unocss: 66.7.5(@unocss/postcss@66.7.5(postcss@8.5.16))(vite@8.1.3(@types/node@26.1.0)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.0)(yaml@2.9.0))
       vue: 3.5.39(typescript@6.0.3)
     optionalDependencies:
       '@antfu/utils': 9.3.0
+      '@iconify-json/catppuccin': 1.2.17
       '@tanstack/vue-virtual': 3.13.30(vue@3.5.39(typescript@6.0.3))
       '@unocss/core': 66.7.5
       colorjs.io: 0.6.1
@@ -9809,6 +9847,10 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
   '@floating-ui/dom@1.1.1':
     dependencies:
       '@floating-ui/core': 1.7.5
@@ -9818,8 +9860,29 @@ snapshots:
       '@floating-ui/core': 1.7.5
       '@floating-ui/utils': 0.2.11
 
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@floating-ui/react@0.27.20(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      tabbable: 6.5.0
+
   '@floating-ui/utils@0.2.11': {}
 
+  '@floating-ui/utils@0.2.12': {}
+
   '@floating-ui/vue@1.1.11(vue@3.5.39(typescript@5.9.3))':
     dependencies:
       '@floating-ui/dom': 1.7.6
@@ -9859,6 +9922,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/catppuccin@1.2.17':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ph@1.2.2':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1dd9614e..5d663e7b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -77,6 +77,8 @@ catalogs:
     vitepress-plugin-mermaid: ^2.0.17
   frontend:
     '@antfu/design': ^0.2.1
+    '@floating-ui/react': ^0.27.0
+    '@iconify-json/catppuccin': ^1.2.0
     '@iconify-json/ph': ^1.2.2
     '@pierre/diffs': ^1.2.12
     '@radix-ui/react-scroll-area': ^1.2.14
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.d.ts
index bccae735..4249f94d 100644
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-git/index.snapshot.d.ts
@@ -52,6 +52,7 @@ export interface CommitFile {
   additions: number;
   deletions: number;
   binary: boolean;
+  status: FileStatusCode;
 }
 export interface CommitResult {
   ok: boolean;