feat(git): resolve author avatars, tighter commit rows

- Resolve real commit-author portraits (GitHub avatar for noreply emails,
  otherwise Gravatar via a SHA-256 email hash), painting over the initials
  chip and falling back to it on error or offline.
- Tighten the commit list another notch (shorter rows, narrower lane gutter).
- Fix the `pnpm dev` harness: a bare `NEXT_PUBLIC_DEVFRAME_WS` port now
  resolves to a same-host socket on the backend's WS route instead of being
  mis-read as a path.

Author: antfubot

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) => {

plugins/git/src/client/components/ui/avatar.tsx

@@ -1,10 +1,14 @@
+'use client'
+
 import type * as React from 'react'
+import { useEffect, useState } from 'react'
 import { cn } from '../../lib/utils'
 
-// A deterministic, offline avatar: initials drawn on a stable background color
-// derived from the author's identity. No network round-trip (keeping the
-// dashboard self-contained), yet every author reads as a distinct chip — the
-// same visual role the photo avatar plays in the commit hover card.
+// 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 = [
@@ -38,26 +42,81 @@ function initialsOf(name: string, email?: string): string {
   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 } & React.ComponentProps<'span'>) {
+}: { 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
-      aria-hidden
       className={cn(
-        'inline-flex size-7 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold text-white select-none',
+        '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>
   )
 }

plugins/git/src/client/components/views/log-panel-view.tsx

@@ -26,9 +26,9 @@ import { IconButton } from '../ui/button'
 import { Icon } from '../ui/icon'
 import { Skeleton } from '../ui/skeleton'
 
-const ROW_H = 36
-const COL_W = 16
-const NODE_R = 4.5
+const ROW_H = 30
+const COL_W = 15
+const NODE_R = 4
 const PAD_L = 8
 
 export interface LogPanelViewProps {