@fresh-editor/fresh-editor 0.2.23 → 0.2.25

package/plugins/git_log.ts

@@ -1,1163 +1,760 @@
 /// <reference path="./lib/fresh.d.ts" />
-const editor = getEditor();
 
+import {
+  type GitCommit,
+  buildCommitDetailEntries,
+  buildCommitLogEntries,
+  buildDetailPlaceholderEntries,
+  fetchCommitShow,
+  fetchGitLog,
+} from "./lib/git_history.ts";
+
+const editor = getEditor();
 
 /**
- * Git Log Plugin - Magit-style Git Log Interface
+ * Git Log Plugin — Magit-style git history interface built on top of the
+ * modern plugin API primitives:
  *
- * Provides an interactive git log view with:
- * - Syntax highlighting for hash, author, date, subject
- * - Cursor navigation between commits
- * - Enter to open commit details in a virtual buffer
+ *   * `createBufferGroup` for a side-by-side "log | detail" layout that
+ *     appears as a single tab with its own inner scroll state.
+ *   * `setPanelContent` with `TextPropertyEntry[]` + `inlineOverlays` for
+ *     aligned columns and per-theme colouring (every colour is a theme key,
+ *     so the panel follows theme changes).
+ *   * `cursor_moved` subscription to live-update the right-hand detail panel
+ *     as the user scrolls through the commit list.
  *
- * Architecture designed for future magit-style features.
+ * The rendering helpers live in `lib/git_history.ts` so the same commit-list
+ * view can be reused by `audit_mode`'s PR-branch review mode.
  */
 
 // =============================================================================
-// Types and Interfaces
+// State
 // =============================================================================
 
-interface GitCommit {
-  hash: string;
-  shortHash: string;
-  author: string;
-  authorEmail: string;
-  date: string;
-  relativeDate: string;
-  subject: string;
-  body: string;
-  refs: string;      // Branch/tag refs
-  graph: string;     // Graph characters
-}
-
-interface GitLogOptions {
-  showGraph: boolean;
-  showRefs: boolean;
-  maxCommits: number;
-}
-
 interface GitLogState {
   isOpen: boolean;
-  bufferId: number | null;
-  splitId: number | null; // The split where git log is displayed
-  sourceBufferId: number | null; // The buffer that was open before git log (to restore on close)
+  groupId: number | null;
+  logBufferId: number | null;
+  detailBufferId: number | null;
+  toolbarBufferId: number | null;
+  /** Click-regions for the toolbar's buttons, populated by `renderToolbar`. */
+  toolbarButtons: ToolbarButton[];
   commits: GitCommit[];
-  options: GitLogOptions;
-  cachedContent: string; // Store content for highlighting (getBufferText doesn't work for virtual buffers)
-}
-
-interface GitCommitDetailState {
-  isOpen: boolean;
-  bufferId: number | null;
-  splitId: number | null;
-  commit: GitCommit | null;
-  cachedContent: string; // Store content for highlighting
+  selectedIndex: number;
+  /** Cached `git show` output for the currently-displayed detail commit. */
+  detailCache: { hash: string; output: string } | null;
+  /**
+   * In-flight detail request id. Used to ignore stale responses when the
+   * user scrolls through the log faster than `git show` can return.
+   */
+  pendingDetailId: number;
+  /**
+   * Debounce token for `cursor_moved`. Rapid cursor motion (PageDown, held
+   * j/k) would otherwise trigger a full log re-render + `git show` per
+   * intermediate row; we bump this id on every event and only do the work
+   * after a short delay if no newer event has arrived.
+   */
+  pendingCursorMoveId: number;
+  /**
+   * Byte offset at the start of each row in the rendered log panel, plus
+   * the total buffer length at the end. Populated by `renderLog` so the
+   * cursor_moved handler can map byte positions to commit indices without
+   * relying on `getCursorLine` (which is not implemented for virtual
+   * buffers).
+   */
+  logRowByteOffsets: number[];
 }
 
-interface GitFileViewState {
-  isOpen: boolean;
-  bufferId: number | null;
-  splitId: number | null;
-  filePath: string | null;
-  commitHash: string | null;
-}
-
-// =============================================================================
-// State Management
-// =============================================================================
-
-const gitLogState: GitLogState = {
+const state: GitLogState = {
   isOpen: false,
-  bufferId: null,
-  splitId: null,
-  sourceBufferId: null,
+  groupId: null,
+  logBufferId: null,
+  detailBufferId: null,
+  toolbarBufferId: null,
+  toolbarButtons: [],
   commits: [],
-  options: {
-    showGraph: false,  // Disabled by default - graph interferes with format parsing
-    showRefs: true,
-    maxCommits: 100,
-  },
-  cachedContent: "",
-};
-
-const commitDetailState: GitCommitDetailState = {
-  isOpen: false,
-  bufferId: null,
-  splitId: null,
-  commit: null,
-  cachedContent: "",
-};
-
-const fileViewState: GitFileViewState = {
-  isOpen: false,
-  bufferId: null,
-  splitId: null,
-  filePath: null,
-  commitHash: null,
+  selectedIndex: 0,
+  detailCache: null,
+  pendingDetailId: 0,
+  pendingCursorMoveId: 0,
+  logRowByteOffsets: [],
 };
 
-// =============================================================================
-// Color Definitions (for syntax highlighting)
-// =============================================================================
+/**
+ * Delay before reacting to `cursor_moved`. Long enough to collapse a burst
+ * of events from held j/k or PageDown into a single render, short enough
+ * that the detail panel still feels live.
+ */
+const CURSOR_DEBOUNCE_MS = 60;
+
+// UTF-8 byte length — the overlay API expects byte offsets; JS strings are
+// UTF-16. Matches the helper used by `lib/git_history.ts`.
+function utf8Len(s: string): number {
+  let b = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    if (c <= 0x7f) b += 1;
+    else if (c <= 0x7ff) b += 2;
+    else if (c >= 0xd800 && c <= 0xdfff) {
+      b += 4;
+      i++;
+    } else b += 3;
+  }
+  return b;
+}
 
-const colors = {
-  hash: [255, 180, 50] as [number, number, number],       // Yellow/Orange
-  author: [100, 200, 255] as [number, number, number],    // Cyan
-  date: [150, 255, 150] as [number, number, number],      // Green
-  subject: [255, 255, 255] as [number, number, number],   // White
-  header: [255, 200, 100] as [number, number, number],    // Gold
-  separator: [100, 100, 100] as [number, number, number], // Gray
-  selected: [80, 80, 120] as [number, number, number],    // Selection background
-  diffAdd: [100, 255, 100] as [number, number, number],   // Green for additions
-  diffDel: [255, 100, 100] as [number, number, number],   // Red for deletions
-  diffHunk: [150, 150, 255] as [number, number, number],  // Blue for hunk headers
-  branch: [255, 150, 255] as [number, number, number],    // Magenta for branches
-  tag: [255, 255, 100] as [number, number, number],       // Yellow for tags
-  remote: [255, 130, 100] as [number, number, number],    // Orange for remotes
-  graph: [150, 150, 150] as [number, number, number],     // Gray for graph
-  // Syntax highlighting colors
-  syntaxKeyword: [200, 120, 220] as [number, number, number],  // Purple for keywords
-  syntaxString: [180, 220, 140] as [number, number, number],   // Light green for strings
-  syntaxComment: [120, 120, 120] as [number, number, number],  // Gray for comments
-  syntaxNumber: [220, 180, 120] as [number, number, number],   // Orange for numbers
-  syntaxFunction: [100, 180, 255] as [number, number, number], // Blue for functions
-  syntaxType: [80, 200, 180] as [number, number, number],      // Teal for types
-};
+/**
+ * Binary search `logRowByteOffsets` for the 0-indexed row whose byte
+ * offset is the largest one ≤ `bytePos`. Returns 0 on an empty table.
+ */
+function rowFromByte(bytePos: number): number {
+  const offs = state.logRowByteOffsets;
+  if (offs.length === 0) return 0;
+  let lo = 0;
+  let hi = offs.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (offs[mid] <= bytePos) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}
 
 // =============================================================================
-// Mode Definitions
+// Modes
+//
+// A buffer group has a single mode shared by all of its panels, so the
+// handlers below branch on which panel currently has focus to do the
+// right thing (`Return` jumps into the detail panel when pressed in
+// the log, and opens the file at the cursor when pressed in the detail).
 // =============================================================================
 
-// Define git-log mode with minimal keybindings
-// Navigation uses normal cursor movement (arrows, j/k work naturally via parent mode)
+// j/k as vi-style aliases for Up/Down, plus the plugin-specific action
+// keys. Everything else (arrows, Page{Up,Down}, Home/End, Shift+motion for
+// selection, Ctrl+C copy, …) is inherited from the Normal keymap because
+// the mode is registered with `inheritNormalBindings: true`.
 editor.defineMode(
   "git-log",
   [
-    ["Return", "git_log_show_commit"],
-    ["Tab", "git_log_show_commit"],
-    ["q", "git_log_close"],
-    ["Escape", "git_log_close"],
+    ["k", "move_up"],
+    ["j", "move_down"],
+    ["Return", "git_log_enter"],
+    ["Tab", "git_log_tab"],
+    ["q", "git_log_q"],
     ["r", "git_log_refresh"],
     ["y", "git_log_copy_hash"],
   ],
-  true // read-only
+  true, // read-only
+  false, // allow_text_input
+  true, // inherit Normal-context bindings for unbound keys
 );
 
-// Define git-commit-detail mode for viewing commit details
-// Inherits from normal mode for natural cursor movement
-editor.defineMode(
-  "git-commit-detail",
-  [
-    ["Return", "git_commit_detail_open_file"],
-    ["q", "git_commit_detail_close"],
-    ["Escape", "git_commit_detail_close"],
-  ],
-  true // read-only
-);
+// =============================================================================
+// Panel layout
+// =============================================================================
 
-// Define git-file-view mode for viewing files at a specific commit
-editor.defineMode(
-  "git-file-view",
-  [
-    ["q", "git_file_view_close"],
-    ["Escape", "git_file_view_close"],
-  ],
-  true // read-only
-);
+/**
+ * Group buffer layout — a one-row sticky toolbar on top, then a horizontal
+ * split below with the commit log on the left (60%) and detail on the
+ * right (40%). The toolbar mirrors the review-diff style: a fixed-height
+ * panel above the scrollable content that holds all the keybinding hints
+ * so they don't shift or scroll with the data.
+ */
+const GROUP_LAYOUT = JSON.stringify({
+  type: "split",
+  direction: "v",
+  ratio: 0.05, // ignored when one side is `fixed`
+  first: { type: "fixed", id: "toolbar", height: 1 },
+  second: {
+    type: "split",
+    direction: "h",
+    ratio: 0.6,
+    first: { type: "scrollable", id: "log" },
+    second: { type: "scrollable", id: "detail" },
+  },
+});
 
 // =============================================================================
-// Git Command Execution
+// Toolbar
 // =============================================================================
 
-async function fetchGitLog(): Promise<GitCommit[]> {
-  // Use record separator to reliably split commits
-  // Format: hash, short hash, author, email, date, relative date, refs, subject, body
-  const format = "%H%x00%h%x00%an%x00%ae%x00%ai%x00%ar%x00%d%x00%s%x00%b%x1e";
+interface ToolbarHint {
+  key: string;
+  label: string;
+  /** Click action — `null` for hints that are keyboard-only (j/k, PgUp). */
+  onClick: (() => void | Promise<void>) | null;
+}
+
+interface ToolbarButton {
+  row: number;
+  startCol: number;
+  endCol: number;
+  onClick: (() => void | Promise<void>) | null;
+}
 
-  const args = [
-    "log",
-    `--format=${format}`,
-    `-n${gitLogState.options.maxCommits}`,
+function toolbarHints(): ToolbarHint[] {
+  return [
+    { key: "Tab", label: "switch pane", onClick: git_log_tab },
+    { key: "RET", label: "open file", onClick: git_log_enter },
+    { key: "y", label: "copy hash", onClick: git_log_copy_hash },
+    { key: "r", label: "refresh", onClick: git_log_refresh },
+    { key: "q", label: "quit", onClick: git_log_q },
   ];
+}
 
-  const cwd = editor.getCwd();
-  const result = await editor.spawnProcess("git", args, cwd);
+/**
+ * Build the single-row toolbar. Each hint renders as a discrete button with
+ * its own background so it reads as clickable; the column range of each
+ * button is captured in `state.toolbarButtons` so `on_git_log_toolbar_click`
+ * can map a mouse click back to the right handler.
+ */
+function buildToolbarEntries(width: number): TextPropertyEntry[] {
+  const W = Math.max(20, width);
+  const buttons: ToolbarButton[] = [];
+  let text = "";
+  const overlays: InlineOverlay[] = [];
+
+  for (const hint of toolbarHints()) {
+    const body = ` [${hint.key}] ${hint.label} `;
+    const bodyLen = body.length;
+    const gap = text.length > 0 ? 1 : 0;
+    if (text.length + gap + bodyLen > W) break;
+
+    if (gap) text += " ";
+
+    const startCol = text.length;
+    const startByte = utf8Len(text);
+    text += body;
+    const endByte = utf8Len(text);
+    const endCol = text.length;
+
+    overlays.push({
+      start: startByte,
+      end: endByte,
+      style: { bg: "ui.status_bar_bg" },
+    });
+    const keyDisplay = `[${hint.key}]`;
+    const keyStartByte = startByte + utf8Len(" ");
+    const keyEndByte = keyStartByte + utf8Len(keyDisplay);
+    overlays.push({
+      start: keyStartByte,
+      end: keyEndByte,
+      style: { fg: "editor.fg", bold: true },
+    });
+    overlays.push({
+      start: keyEndByte,
+      end: endByte,
+      style: { fg: "editor.line_number_fg" },
+    });
 
-  if (result.exit_code !== 0) {
-    editor.setStatus(editor.t("status.git_error", { error: result.stderr }));
-    return [];
+    buttons.push({ row: 0, startCol, endCol, onClick: hint.onClick });
   }
 
-  const commits: GitCommit[] = [];
-  // Split by record separator (0x1e)
-  const records = result.stdout.split("\x1e");
-
-  for (const record of records) {
-    if (!record.trim()) continue;
-
-    const parts = record.split("\x00");
-    if (parts.length >= 8) {
-      commits.push({
-        hash: parts[0].trim(),
-        shortHash: parts[1].trim(),
-        author: parts[2].trim(),
-        authorEmail: parts[3].trim(),
-        date: parts[4].trim(),
-        relativeDate: parts[5].trim(),
-        refs: parts[6].trim(),
-        subject: parts[7].trim(),
-        body: parts[8] ? parts[8].trim() : "",
-        graph: "", // Graph is handled separately if needed
-      });
-    }
-  }
+  state.toolbarButtons = buttons;
 
-  return commits;
+  return [
+    {
+      text: text + "\n",
+      properties: { type: "git-log-toolbar" },
+      style: { bg: "editor.bg", extendToLineEnd: true },
+      inlineOverlays: overlays,
+    },
+  ];
 }
 
-async function fetchCommitDiff(hash: string): Promise<string> {
-  const cwd = editor.getCwd();
-  const result = await editor.spawnProcess("git", [
-    "show",
-    "--stat",
-    "--patch",
-    hash,
-  ], cwd);
+function renderToolbar(): void {
+  if (state.groupId === null) return;
+  const vp = editor.getViewport();
+  const width = vp ? vp.width : 80;
+  editor.setPanelContent(state.groupId, "toolbar", buildToolbarEntries(width));
+}
 
-  if (result.exit_code !== 0) {
-    return editor.t("status.error_fetching_diff", { error: result.stderr });
+function on_git_log_toolbar_click(data: {
+  buffer_id: number | null;
+  buffer_row: number | null;
+  buffer_col: number | null;
+}): void {
+  if (!state.isOpen) return;
+  if (data.buffer_id === null || data.buffer_id !== state.toolbarBufferId) return;
+  if (data.buffer_row === null || data.buffer_col === null) return;
+  const row = data.buffer_row;
+  const col = data.buffer_col;
+  const hit = state.toolbarButtons.find(
+    (b) => b.row === row && col >= b.startCol && col < b.endCol
+  );
+  if (hit && hit.onClick) {
+    void hit.onClick();
   }
+}
+registerHandler("on_git_log_toolbar_click", on_git_log_toolbar_click);
 
-  return result.stdout;
+function on_git_log_resize(_data: { width: number; height: number }): void {
+  if (!state.isOpen) return;
+  renderToolbar();
 }
+registerHandler("on_git_log_resize", on_git_log_resize);
 
 // =============================================================================
-// Git Log View
+// Rendering
 // =============================================================================
 
-function formatCommitRow(commit: GitCommit): string {
-  // Build a structured line for consistent parsing and highlighting
-  // Format: shortHash (author, relativeDate) subject [refs]
-  let line = commit.shortHash;
-
-  // Add author in parentheses
-  line += " (" + commit.author + ", " + commit.relativeDate + ")";
-
-  // Add subject
-  line += " " + commit.subject;
-
-  // Add refs at the end if present and enabled
-  if (gitLogState.options.showRefs && commit.refs) {
-    line += " " + commit.refs;
-  }
-
-  return line + "\n";
+function detailFooter(hash: string): string {
+  return editor.t("status.commit_ready", { hash });
 }
 
-// Helper to extract content string from entries (for highlighting)
-function entriesToContent(entries: TextPropertyEntry[]): string {
-  return entries.map(e => e.text).join("");
+function renderLog(): void {
+  if (state.groupId === null) return;
+  // No header row and no footer: the sticky toolbar above the group
+  // carries the shortcut hints, and the commit count goes to the status
+  // line when the group opens.
+  const entries = buildCommitLogEntries(state.commits, {
+    selectedIndex: state.selectedIndex,
+    header: null,
+  });
+  // Rebuild the byte-offset table used by cursor_moved to map positions
+  // to commit indices. `offsets[i]` is the byte offset of commit i; the
+  // final entry is the total buffer length, so row lookups clamp
+  // correctly on the last row.
+  const offsets: number[] = [];
+  let running = 0;
+  for (const e of entries) {
+    offsets.push(running);
+    running += utf8Len(e.text);
+  }
+  offsets.push(running);
+  state.logRowByteOffsets = offsets;
+  editor.setPanelContent(state.groupId, "log", entries);
 }
 
-function buildGitLogEntries(): TextPropertyEntry[] {
-  const entries: TextPropertyEntry[] = [];
-
-  // Magit-style header
-  entries.push({
-    text: editor.t("panel.commits_header") + "\n",
-    properties: { type: "section-header" },
-  });
+function renderDetailPlaceholder(message: string): void {
+  if (state.groupId === null) return;
+  editor.setPanelContent(
+    state.groupId,
+    "detail",
+    buildDetailPlaceholderEntries(message)
+  );
+}
 
-  if (gitLogState.commits.length === 0) {
-    entries.push({
-      text: editor.t("panel.no_commits") + "\n",
-      properties: { type: "empty" },
-    });
-  } else {
-    // Add each commit
-    for (let i = 0; i < gitLogState.commits.length; i++) {
-      const commit = gitLogState.commits[i];
-      entries.push({
-        text: formatCommitRow(commit),
-        properties: {
-          type: "commit",
-          index: i,
-          hash: commit.hash,
-          shortHash: commit.shortHash,
-          author: commit.author,
-          date: commit.relativeDate,
-          subject: commit.subject,
-          refs: commit.refs,
-          graph: commit.graph,
-        },
-      });
-    }
+function renderDetailForCommit(commit: GitCommit, showOutput: string): void {
+  if (state.groupId === null) return;
+  const entries = buildCommitDetailEntries(commit, showOutput);
+  editor.setPanelContent(state.groupId, "detail", entries);
+  // Always scroll the detail panel back to the top when the selection changes.
+  if (state.detailBufferId !== null) {
+    editor.setBufferCursor(state.detailBufferId, 0);
   }
-
-  // Footer with help
-  entries.push({
-    text: "\n",
-    properties: { type: "blank" },
-  });
-  entries.push({
-    text: editor.t("panel.log_footer", { count: String(gitLogState.commits.length) }) + "\n",
-    properties: { type: "footer" },
-  });
-
-  return entries;
 }
 
-function applyGitLogHighlighting(): void {
-  if (gitLogState.bufferId === null) return;
-
-  const bufferId = gitLogState.bufferId;
-
-  // Clear existing overlays
-  editor.clearNamespace(bufferId, "gitlog");
-
-  // Use cached content (getBufferText doesn't work for virtual buffers)
-  const content = gitLogState.cachedContent;
-  if (!content) return;
-  const lines = content.split("\n");
-
-  // Get cursor line to highlight current row (1-indexed from API)
-  const cursorLine = editor.getCursorLine();
-  const headerLines = 1; // Just "Commits:" header
-
-  let byteOffset = 0;
-
-  for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-    const line = lines[lineIdx];
-    const lineStart = byteOffset;
-    const lineEnd = byteOffset + line.length;
-
-    // Highlight section header
-    if (line === editor.t("panel.commits_header")) {
-      editor.addOverlay(bufferId, "gitlog", lineStart, lineEnd, {
-        fg: colors.header,
-        underline: true,
-        bold: true,
-      });
-      byteOffset += line.length + 1;
-      continue;
-    }
-
-    const commitIndex = lineIdx - headerLines;
-    if (commitIndex < 0 || commitIndex >= gitLogState.commits.length) {
-      byteOffset += line.length + 1;
-      continue;
-    }
-
-    const commit = gitLogState.commits[commitIndex];
-    // cursorLine is 1-indexed, lineIdx is 0-indexed
-    const isCurrentLine = (lineIdx + 1) === cursorLine;
-
-    // Highlight entire line if cursor is on it (using selected color with underline)
-    if (isCurrentLine) {
-      editor.addOverlay(bufferId, "gitlog", lineStart, lineEnd, {
-        fg: colors.selected,
-        underline: true,
-        bold: true,
-      });
-    }
-
-    // Parse the line format: "shortHash (author, relativeDate) subject [refs]"
-    // Highlight hash (first 7+ chars until space)
-    const hashEnd = commit.shortHash.length;
-    editor.addOverlay(bufferId, "gitlog", lineStart, lineStart + hashEnd, {
-      fg: colors.hash,
-    });
-
-    // Highlight author name (inside parentheses)
-    const authorPattern = "(" + commit.author + ",";
-    const authorStartInLine = line.indexOf(authorPattern);
-    if (authorStartInLine >= 0) {
-      const authorStart = lineStart + authorStartInLine + 1; // skip "("
-      const authorEnd = authorStart + commit.author.length;
-      editor.addOverlay(bufferId, "gitlog", authorStart, authorEnd, {
-        fg: colors.author,
-      });
-    }
+/**
+ * Synchronous detail refresh: render from cache if we have it, otherwise
+ * a "loading…" placeholder. Never spawns git. Called immediately on every
+ * selection change so the user sees instant feedback even while the real
+ * `git show` is debounced.
+ *
+ * Returns the commit that needs fetching (cache miss) or null (cache hit
+ * or no commit selected) so the caller can decide whether to spawn.
+ */
+function refreshDetailImmediate(): GitCommit | null {
+  if (state.groupId === null) return null;
+  if (state.commits.length === 0) {
+    renderDetailPlaceholder(editor.t("status.no_commits"));
+    return null;
+  }
+  const idx = Math.max(0, Math.min(state.selectedIndex, state.commits.length - 1));
+  const commit = state.commits[idx];
+  if (!commit) return null;
 
-    // Highlight relative date
-    const datePattern = ", " + commit.relativeDate + ")";
-    const dateStartInLine = line.indexOf(datePattern);
-    if (dateStartInLine >= 0) {
-      const dateStart = lineStart + dateStartInLine + 2; // skip ", "
-      const dateEnd = dateStart + commit.relativeDate.length;
-      editor.addOverlay(bufferId, "gitlog", dateStart, dateEnd, {
-        fg: colors.date,
-      });
-    }
+  if (state.detailCache && state.detailCache.hash === commit.hash) {
+    renderDetailForCommit(commit, state.detailCache.output);
+    return null;
+  }
 
-    // Highlight refs (branches/tags) at end of line if present
-    if (gitLogState.options.showRefs && commit.refs) {
-      const refsStartInLine = line.lastIndexOf(commit.refs);
-      if (refsStartInLine >= 0) {
-        const refsStart = lineStart + refsStartInLine;
-        const refsEnd = refsStart + commit.refs.length;
-
-        // Determine color based on ref type
-        let refColor = colors.branch;
-        if (commit.refs.includes("tag:")) {
-          refColor = colors.tag;
-        } else if (commit.refs.includes("origin/") || commit.refs.includes("remote")) {
-          refColor = colors.remote;
-        }
-
-        editor.addOverlay(bufferId, "gitlog", refsStart, refsEnd, {
-          fg: refColor,
-          bold: true,
-        });
-      }
-    }
+  renderDetailPlaceholder(
+    editor.t("status.loading_commit", { hash: commit.shortHash })
+  );
+  return commit;
+}
 
-    byteOffset += line.length + 1;
-  }
+/**
+ * Spawn `git show` for `commit` and render the result. Tagged with
+ * `pendingDetailId` so a newer selection supersedes in-flight fetches.
+ */
+async function fetchAndRenderDetail(commit: GitCommit): Promise<void> {
+  const myId = ++state.pendingDetailId;
+  const output = await fetchCommitShow(editor, commit.hash);
+  if (myId !== state.pendingDetailId) return;
+  if (state.groupId === null) return;
+  state.detailCache = { hash: commit.hash, output };
+  // Only render if the current selection is still this commit — a rapid
+  // Up/Down burst might have moved on before we got here.
+  const currentIdx = Math.max(
+    0,
+    Math.min(state.selectedIndex, state.commits.length - 1)
+  );
+  if (state.commits[currentIdx]?.hash !== commit.hash) return;
+  renderDetailForCommit(commit, output);
 }
 
-function updateGitLogView(): void {
-  if (gitLogState.bufferId !== null) {
-    const entries = buildGitLogEntries();
-    gitLogState.cachedContent = entriesToContent(entries);
-    editor.setVirtualBufferContent(gitLogState.bufferId, entries);
-    applyGitLogHighlighting();
-  }
+/**
+ * Combined synchronous + asynchronous refresh used by open/refresh paths
+ * where there's no burst of events to collapse.
+ */
+async function refreshDetail(): Promise<void> {
+  const pending = refreshDetailImmediate();
+  if (pending) await fetchAndRenderDetail(pending);
 }
 
 // =============================================================================
-// Commit Detail View
+// Selection tracking — keeps `state.selectedIndex` in sync with the log
+// panel's native cursor so the highlight and detail stay consistent.
 // =============================================================================
 
-// Parse diff line to extract file and line information
-interface DiffContext {
-  currentFile: string | null;
-  currentHunkNewStart: number;
-  currentHunkNewLine: number;  // Current line within the new file
+function selectedCommit(): GitCommit | null {
+  if (state.commits.length === 0) return null;
+  const i = Math.max(0, Math.min(state.selectedIndex, state.commits.length - 1));
+  return state.commits[i] ?? null;
 }
 
-function buildCommitDetailEntries(commit: GitCommit, showOutput: string): TextPropertyEntry[] {
-  const entries: TextPropertyEntry[] = [];
-  const lines = showOutput.split("\n");
-
-  // Track diff context for file/line navigation
-  const diffContext: DiffContext = {
-    currentFile: null,
-    currentHunkNewStart: 0,
-    currentHunkNewLine: 0,
-  };
-
-  for (const line of lines) {
-    let lineType = "text";
-    const properties: Record<string, unknown> = { type: lineType };
-
-    // Detect diff file header: diff --git a/path b/path
-    const diffHeaderMatch = line.match(/^diff --git a\/(.+) b\/(.+)$/);
-    if (diffHeaderMatch) {
-      diffContext.currentFile = diffHeaderMatch[2]; // Use the 'b' (new) file path
-      diffContext.currentHunkNewStart = 0;
-      diffContext.currentHunkNewLine = 0;
-      lineType = "diff-header";
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-    }
-    // Detect +++ line (new file path)
-    else if (line.startsWith("+++ b/")) {
-      diffContext.currentFile = line.slice(6);
-      lineType = "diff-header";
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-    }
-    // Detect hunk header: @@ -old,count +new,count @@
-    else if (line.startsWith("@@")) {
-      lineType = "diff-hunk";
-      const hunkMatch = line.match(/@@ -\d+(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
-      if (hunkMatch) {
-        diffContext.currentHunkNewStart = parseInt(hunkMatch[1], 10);
-        diffContext.currentHunkNewLine = diffContext.currentHunkNewStart;
-      }
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-      properties.line = diffContext.currentHunkNewStart;
-    }
-    // Addition line
-    else if (line.startsWith("+") && !line.startsWith("+++")) {
-      lineType = "diff-add";
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-      properties.line = diffContext.currentHunkNewLine;
-      diffContext.currentHunkNewLine++;
-    }
-    // Deletion line
-    else if (line.startsWith("-") && !line.startsWith("---")) {
-      lineType = "diff-del";
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-      // Deletion lines don't advance the new file line counter
-    }
-    // Context line (unchanged)
-    else if (line.startsWith(" ") && diffContext.currentFile && diffContext.currentHunkNewLine > 0) {
-      lineType = "diff-context";
-      properties.type = lineType;
-      properties.file = diffContext.currentFile;
-      properties.line = diffContext.currentHunkNewLine;
-      diffContext.currentHunkNewLine++;
-    }
-    // Other diff header lines
-    else if (line.startsWith("index ") || line.startsWith("--- ")) {
-      lineType = "diff-header";
-      properties.type = lineType;
-    }
-    // Commit header lines
-    else if (line.startsWith("commit ")) {
-      lineType = "header";
-      properties.type = lineType;
-      const hashMatch = line.match(/^commit ([a-f0-9]+)/);
-      if (hashMatch) {
-        properties.hash = hashMatch[1];
-      }
-    }
-    else if (line.startsWith("Author:")) {
-      lineType = "meta";
-      properties.type = lineType;
-      properties.field = "author";
-    }
-    else if (line.startsWith("Date:")) {
-      lineType = "meta";
-      properties.type = lineType;
-      properties.field = "date";
-    }
-
-    entries.push({
-      text: `${line}\n`,
-      properties: properties,
-    });
-  }
-
-  // Footer with help
-  entries.push({
-    text: "\n",
-    properties: { type: "blank" },
-  });
-  entries.push({
-    text: editor.t("panel.detail_footer") + "\n",
-    properties: { type: "footer" },
-  });
-
-  return entries;
-}
-
-function applyCommitDetailHighlighting(): void {
-  if (commitDetailState.bufferId === null) return;
-
-  const bufferId = commitDetailState.bufferId;
-
-  // Clear existing overlays
-  editor.clearNamespace(bufferId, "gitdetail");
-
-  // Use cached content (getBufferText doesn't work for virtual buffers)
-  const content = commitDetailState.cachedContent;
-  if (!content) return;
-  const lines = content.split("\n");
-
-  let byteOffset = 0;
-
-  for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-    const line = lines[lineIdx];
-    const lineStart = byteOffset;
-    const lineEnd = byteOffset + line.length;
-
-    // Highlight diff additions (green)
-    if (line.startsWith("+") && !line.startsWith("+++")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart, lineEnd, {
-        fg: colors.diffAdd,
-      });
-    }
-    // Highlight diff deletions (red)
-    else if (line.startsWith("-") && !line.startsWith("---")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart, lineEnd, {
-        fg: colors.diffDel,
-      });
-    }
-    // Highlight hunk headers (cyan/blue)
-    else if (line.startsWith("@@")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart, lineEnd, {
-        fg: colors.diffHunk,
-        bold: true,
-      });
-    }
-    // Highlight commit hash in "commit <hash>" line (git show format)
-    else if (line.startsWith("commit ")) {
-      const hashMatch = line.match(/^commit ([a-f0-9]+)/);
-      if (hashMatch) {
-        const hashStart = lineStart + 7; // "commit " is 7 chars
-        editor.addOverlay(bufferId, "gitdetail", hashStart, hashStart + hashMatch[1].length, {
-          fg: colors.hash,
-          bold: true,
-        });
-      }
-    }
-    // Highlight author line
-    else if (line.startsWith("Author:")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart + 8, lineEnd, {
-        fg: colors.author,
-      });
-    }
-    // Highlight date line
-    else if (line.startsWith("Date:")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart + 6, lineEnd, {
-        fg: colors.date,
-      });
-    }
-    // Highlight diff file headers
-    else if (line.startsWith("diff --git")) {
-      editor.addOverlay(bufferId, "gitdetail", lineStart, lineEnd, {
-        fg: colors.header,
-        bold: true,
-      });
-    }
-
-    byteOffset += line.length + 1;
-  }
+function indexFromCursorByte(bytePos: number): number {
+  // No header row — row 0 is commit 0.
+  const idx = rowFromByte(bytePos);
+  if (idx < 0) return 0;
+  if (idx >= state.commits.length) return state.commits.length - 1;
+  return idx;
 }
 
 // =============================================================================
-// Public Commands - Git Log
+// Commands
 // =============================================================================
 
-async function show_git_log() : Promise<void> {
-  if (gitLogState.isOpen) {
-    editor.setStatus(editor.t("status.already_open"));
+async function show_git_log(): Promise<void> {
+  if (state.isOpen) {
+    // Already open — pull the existing tab to the front instead of
+    // bailing out with a status message.
+    if (state.groupId !== null) {
+      editor.focusBufferGroupPanel(state.groupId, "log");
+    }
     return;
   }
-
   editor.setStatus(editor.t("status.loading"));
 
-  // Store the current split ID and buffer ID before opening git log
-  gitLogState.splitId = editor.getActiveSplitId();
-  gitLogState.sourceBufferId = editor.getActiveBufferId();
-
-  // Fetch commits
-  gitLogState.commits = await fetchGitLog();
-
-  if (gitLogState.commits.length === 0) {
+  state.commits = await fetchGitLog(editor);
+  if (state.commits.length === 0) {
     editor.setStatus(editor.t("status.no_commits"));
-    gitLogState.splitId = null;
     return;
   }
 
-  // Build entries and cache content for highlighting
-  const entries = buildGitLogEntries();
-  gitLogState.cachedContent = entriesToContent(entries);
-
-  // Create virtual buffer in the current split (replacing current buffer)
-  const result = await editor.createVirtualBufferInExistingSplit({
-    name: "*Git Log*",
-    mode: "git-log",
-    readOnly: true,
-    entries: entries,
-    splitId: gitLogState.splitId!,
-    showLineNumbers: false,
-    showCursors: true,
-    editingDisabled: true,
-  });
-
-  if (result !== null) {
-    gitLogState.isOpen = true;
-    gitLogState.bufferId = result.bufferId;
-
-    // Apply syntax highlighting
-    applyGitLogHighlighting();
-
-    editor.setStatus(editor.t("status.log_ready", { count: String(gitLogState.commits.length) }));
-    editor.debug("Git log panel opened");
-  } else {
-    gitLogState.splitId = null;
-    editor.setStatus(editor.t("status.failed_open"));
-  }
+  // `createBufferGroup` is not currently included in the generated
+  // `EditorAPI` type (it's a runtime-only binding, same as in audit_mode),
+  // so we cast to `any` to keep the type checker happy.
+  const group = await (editor as any).createBufferGroup(
+    "*Git Log*",
+    "git-log",
+    GROUP_LAYOUT
+  );
+  state.groupId = group.groupId as number;
+  state.logBufferId = (group.panels["log"] as number | undefined) ?? null;
+  state.detailBufferId = (group.panels["detail"] as number | undefined) ?? null;
+  state.toolbarBufferId = (group.panels["toolbar"] as number | undefined) ?? null;
+  state.selectedIndex = 0;
+  state.detailCache = null;
+  state.isOpen = true;
+
+  // The log panel owns a native cursor so j/k/Up/Down navigate commits,
+  // and the detail panel also gets a cursor so diff lines can be clicked
+  // / traversed before pressing Enter to open a file.
+  if (state.logBufferId !== null) {
+    editor.setBufferShowCursors(state.logBufferId, true);
+  }
+  if (state.detailBufferId !== null) {
+    editor.setBufferShowCursors(state.detailBufferId, true);
+    // Wrap long lines in the detail panel — git diffs often exceed the
+    // 40% split width, and horizontal scrolling a commit is awkward.
+    editor.setLineWrap(state.detailBufferId, null, true);
+    // Per-panel mode: the group was created with "git-log" which applies
+    // to the initially-focused panel (log). The detail panel's mode is
+    // set when we focus into it.
+  }
+
+  renderToolbar();
+  renderLog();
+  // Position the cursor on the first commit (row 0 now that the header
+  // row is gone).
+  if (state.logBufferId !== null && state.commits.length > 0) {
+    editor.setBufferCursor(state.logBufferId, 0);
+  }
+  await refreshDetail();
+
+  if (state.groupId !== null) {
+    editor.focusBufferGroupPanel(state.groupId, "log");
+  }
+  editor.on("cursor_moved", "on_git_log_cursor_moved");
+  editor.on("mouse_click", "on_git_log_toolbar_click");
+  editor.on("resize", "on_git_log_resize");
+  editor.on("buffer_closed", "on_git_log_buffer_closed");
+
+  editor.setStatus(
+    editor.t("status.log_ready", { count: String(state.commits.length) })
+  );
 }
 registerHandler("show_git_log", show_git_log);
 
-function git_log_close() : void {
-  if (!gitLogState.isOpen) {
-    return;
-  }
-
-  // Restore the original buffer in the split
-  if (gitLogState.splitId !== null && gitLogState.sourceBufferId !== null) {
-    editor.setSplitBuffer(gitLogState.splitId, gitLogState.sourceBufferId);
-  }
+/** Reset all state + unsubscribe. Idempotent; safe to call from either
+ * path (user-initiated close or externally-closed group via the tab's
+ * close button, which triggers `buffer_closed`). */
+function git_log_cleanup(): void {
+  if (!state.isOpen) return;
+  editor.off("cursor_moved", "on_git_log_cursor_moved");
+  editor.off("mouse_click", "on_git_log_toolbar_click");
+  editor.off("resize", "on_git_log_resize");
+  editor.off("buffer_closed", "on_git_log_buffer_closed");
+  state.isOpen = false;
+  state.groupId = null;
+  state.logBufferId = null;
+  state.detailBufferId = null;
+  state.toolbarBufferId = null;
+  state.toolbarButtons = [];
+  state.commits = [];
+  state.selectedIndex = 0;
+  state.detailCache = null;
+}
 
-  // Close the git log buffer (it's no longer displayed)
-  if (gitLogState.bufferId !== null) {
-    editor.closeBuffer(gitLogState.bufferId);
+function git_log_close(): void {
+  if (!state.isOpen) return;
+  const groupId = state.groupId;
+  git_log_cleanup();
+  if (groupId !== null) {
+    editor.closeBufferGroup(groupId);
   }
-
-  gitLogState.isOpen = false;
-  gitLogState.bufferId = null;
-  gitLogState.splitId = null;
-  gitLogState.sourceBufferId = null;
-  gitLogState.commits = [];
   editor.setStatus(editor.t("status.closed"));
 }
 registerHandler("git_log_close", git_log_close);
 
-// Cursor moved handler for git log - update highlighting and status
-function on_git_log_cursor_moved(data: {
-  buffer_id: number;
-  cursor_id: number;
-  old_position: number;
-  new_position: number;
-}): void {
-  // Only handle cursor movement in our git log buffer
-  if (gitLogState.bufferId === null || data.buffer_id !== gitLogState.bufferId) {
-    return;
-  }
-
-  // Re-apply highlighting to update cursor line highlight
-  applyGitLogHighlighting();
-
-  // Get cursor line to show status
-  const cursorLine = editor.getCursorLine();
-  const headerLines = 1;
-  const commitIndex = cursorLine - headerLines;
-
-  if (commitIndex >= 0 && commitIndex < gitLogState.commits.length) {
-    editor.setStatus(editor.t("status.commit_position", { current: String(commitIndex + 1), total: String(gitLogState.commits.length) }));
+function on_git_log_buffer_closed(data: { buffer_id: number }): void {
+  if (!state.isOpen) return;
+  if (
+    data.buffer_id === state.logBufferId ||
+    data.buffer_id === state.detailBufferId ||
+    data.buffer_id === state.toolbarBufferId
+  ) {
+    git_log_cleanup();
   }
 }
-registerHandler("on_git_log_cursor_moved", on_git_log_cursor_moved);
-
-// Register cursor movement handler
-editor.on("cursor_moved", "on_git_log_cursor_moved");
-
-async function git_log_refresh() : Promise<void> {
-  if (!gitLogState.isOpen) return;
+registerHandler("on_git_log_buffer_closed", on_git_log_buffer_closed);
 
+async function git_log_refresh(): Promise<void> {
+  if (!state.isOpen) return;
   editor.setStatus(editor.t("status.refreshing"));
-  gitLogState.commits = await fetchGitLog();
-  updateGitLogView();
-  editor.setStatus(editor.t("status.refreshed", { count: String(gitLogState.commits.length) }));
+  state.commits = await fetchGitLog(editor);
+  state.detailCache = null;
+  if (state.selectedIndex >= state.commits.length) {
+    state.selectedIndex = Math.max(0, state.commits.length - 1);
+  }
+  renderLog();
+  await refreshDetail();
+  editor.setStatus(
+    editor.t("status.refreshed", { count: String(state.commits.length) })
+  );
 }
 registerHandler("git_log_refresh", git_log_refresh);
 
-// Helper function to get commit at current cursor position
-function getCommitAtCursor(): GitCommit | null {
-  if (gitLogState.bufferId === null) return null;
-
-  // Use text properties to find which commit the cursor is on
-  // This is more reliable than line number calculation
-  const props = editor.getTextPropertiesAtCursor(gitLogState.bufferId);
-
-  if (props.length > 0) {
-    const prop = props[0];
-    // Check if cursor is on a commit line (has type "commit" and index)
-    if (prop.type === "commit" && typeof prop.index === "number") {
-      const index = prop.index as number;
-      if (index >= 0 && index < gitLogState.commits.length) {
-        return gitLogState.commits[index];
-      }
-    }
-    // Also support finding commit by hash (alternative lookup)
-    if (prop.hash && typeof prop.hash === "string") {
-      return gitLogState.commits.find(c => c.hash === prop.hash) || null;
-    }
-  }
-
-  return null;
-}
-
-async function git_log_show_commit() : Promise<void> {
-  if (!gitLogState.isOpen || gitLogState.commits.length === 0) return;
-  if (gitLogState.splitId === null) return;
-
-  const commit = getCommitAtCursor();
+function git_log_copy_hash(): void {
+  const commit = selectedCommit();
   if (!commit) {
     editor.setStatus(editor.t("status.move_to_commit"));
     return;
   }
+  editor.copyToClipboard(commit.hash);
+  editor.setStatus(
+    editor.t("status.hash_copied", {
+      short: commit.shortHash,
+      full: commit.hash,
+    })
+  );
+}
+registerHandler("git_log_copy_hash", git_log_copy_hash);
 
-  editor.setStatus(editor.t("status.loading_commit", { hash: commit.shortHash }));
-
-  // Fetch full commit info using git show (includes header and diff)
-  const showOutput = await fetchCommitDiff(commit.hash);
-
-  // Build entries using raw git show output
-  const entries = buildCommitDetailEntries(commit, showOutput);
-
-  // Cache content for highlighting (getBufferText doesn't work for virtual buffers)
-  commitDetailState.cachedContent = entriesToContent(entries);
-
-  // Create virtual buffer in the current split (replacing git log view)
-  const result = await editor.createVirtualBufferInExistingSplit({
-    name: `*Commit: ${commit.shortHash}*`,
-    mode: "git-commit-detail",
-    readOnly: true,
-    entries: entries,
-    splitId: gitLogState.splitId!,
-    showLineNumbers: false, // Disable line numbers for cleaner diff view
-    showCursors: true,
-    editingDisabled: true,
-  });
-
-  if (result !== null) {
-    commitDetailState.isOpen = true;
-    commitDetailState.bufferId = result.bufferId;
-    commitDetailState.splitId = gitLogState.splitId;
-    commitDetailState.commit = commit;
-
-    // Apply syntax highlighting
-    applyCommitDetailHighlighting();
+/** Is the detail panel the currently-focused buffer? */
+function isDetailFocused(): boolean {
+  return (
+    state.detailBufferId !== null &&
+    editor.getActiveBufferId() === state.detailBufferId
+  );
+}
 
-    editor.setStatus(editor.t("status.commit_ready", { hash: commit.shortHash }));
+function git_log_tab(): void {
+  if (state.groupId === null) return;
+  if (isDetailFocused()) {
+    editor.focusBufferGroupPanel(state.groupId, "log");
   } else {
-    editor.setStatus(editor.t("status.failed_open_details"));
+    editor.focusBufferGroupPanel(state.groupId, "detail");
+    const commit = selectedCommit();
+    if (commit) editor.setStatus(detailFooter(commit.shortHash));
   }
 }
-registerHandler("git_log_show_commit", git_log_show_commit);
+registerHandler("git_log_tab", git_log_tab);
 
-function git_log_copy_hash() : void {
-  if (!gitLogState.isOpen || gitLogState.commits.length === 0) return;
-
-  const commit = getCommitAtCursor();
-  if (!commit) {
-    editor.setStatus(editor.t("status.move_to_commit"));
+/**
+ * Enter: on the log panel jumps focus into the detail panel; on the detail
+ * panel opens the file at the cursor position (if any).
+ */
+function git_log_enter(): void {
+  if (state.groupId === null) return;
+  if (isDetailFocused()) {
+    git_log_detail_open_file();
     return;
   }
+  editor.focusBufferGroupPanel(state.groupId, "detail");
+  const commit = selectedCommit();
+  if (commit) editor.setStatus(detailFooter(commit.shortHash));
+}
+registerHandler("git_log_enter", git_log_enter);
 
-  // Copy hash to clipboard
-  editor.copyToClipboard(commit.hash);
-  editor.setStatus(editor.t("status.hash_copied", { short: commit.shortHash, full: commit.hash }));
+/** q/Escape: closes the entire log group from any panel. */
+function git_log_q(): void {
+  if (state.groupId === null) return;
+  git_log_close();
 }
-registerHandler("git_log_copy_hash", git_log_copy_hash);
+registerHandler("git_log_q", git_log_q);
 
 // =============================================================================
-// Public Commands - Commit Detail
+// Detail panel — open file at commit
 // =============================================================================
 
-function git_commit_detail_close() : void {
-  if (!commitDetailState.isOpen) {
-    return;
-  }
-
-  // Go back to the git log view by restoring the git log buffer
-  if (commitDetailState.splitId !== null && gitLogState.bufferId !== null) {
-    editor.setSplitBuffer(commitDetailState.splitId, gitLogState.bufferId);
-    // Re-apply highlighting since we're switching back
-    applyGitLogHighlighting();
-  }
-
-  // Close the commit detail buffer (it's no longer displayed)
-  if (commitDetailState.bufferId !== null) {
-    editor.closeBuffer(commitDetailState.bufferId);
-  }
-
-  commitDetailState.isOpen = false;
-  commitDetailState.bufferId = null;
-  commitDetailState.splitId = null;
-  commitDetailState.commit = null;
-
-  editor.setStatus(editor.t("status.log_ready", { count: String(gitLogState.commits.length) }));
-}
-registerHandler("git_commit_detail_close", git_commit_detail_close);
+async function git_log_detail_open_file(): Promise<void> {
+  if (state.detailBufferId === null) return;
+  const commit = selectedCommit();
+  if (!commit) return;
 
-// Close file view and go back to commit detail
-function git_file_view_close() : void {
-  if (!fileViewState.isOpen) {
+  const props = editor.getTextPropertiesAtCursor(state.detailBufferId);
+  if (props.length === 0) {
+    editor.setStatus(editor.t("status.move_to_diff"));
     return;
   }
-
-  // Go back to the commit detail view by restoring the commit detail buffer
-  if (fileViewState.splitId !== null && commitDetailState.bufferId !== null) {
-    editor.setSplitBuffer(fileViewState.splitId, commitDetailState.bufferId);
-    // Re-apply highlighting since we're switching back
-    applyCommitDetailHighlighting();
-  }
-
-  // Close the file view buffer (it's no longer displayed)
-  if (fileViewState.bufferId !== null) {
-    editor.closeBuffer(fileViewState.bufferId);
-  }
-
-  fileViewState.isOpen = false;
-  fileViewState.bufferId = null;
-  fileViewState.splitId = null;
-  fileViewState.filePath = null;
-  fileViewState.commitHash = null;
-
-  if (commitDetailState.commit) {
-    editor.setStatus(editor.t("status.commit_ready", { hash: commitDetailState.commit.shortHash }));
+  const file = props[0].file as string | undefined;
+  const line = (props[0].line as number | undefined) ?? 1;
+  if (!file) {
+    editor.setStatus(editor.t("status.move_to_diff_with_context"));
+    return;
   }
-}
-registerHandler("git_file_view_close", git_file_view_close);
 
-// Fetch file content at a specific commit
-async function fetchFileAtCommit(commitHash: string, filePath: string): Promise<string | null> {
-  const cwd = editor.getCwd();
+  editor.setStatus(
+    editor.t("status.file_loading", { file, hash: commit.shortHash })
+  );
   const result = await editor.spawnProcess("git", [
     "show",
-    `${commitHash}:${filePath}`,
-  ], cwd);
-
+    `${commit.hash}:${file}`,
+  ]);
   if (result.exit_code !== 0) {
-    return null;
+    editor.setStatus(
+      editor.t("status.file_not_found", { file, hash: commit.shortHash })
+    );
+    return;
   }
 
-  return result.stdout;
-}
+  const lines = result.stdout.split("\n");
+  const entries: TextPropertyEntry[] = lines.map((l, i) => ({
+    text: l + (i < lines.length - 1 ? "\n" : ""),
+    properties: { type: "content", line: i + 1 },
+  }));
 
-// Get language type from file extension
-function getLanguageFromPath(filePath: string): string {
-  const ext = editor.pathExtname(filePath).toLowerCase();
-  const extMap: Record<string, string> = {
-    ".rs": "rust",
-    ".ts": "typescript",
-    ".tsx": "typescript",
-    ".js": "javascript",
-    ".jsx": "javascript",
-    ".py": "python",
-    ".go": "go",
-    ".c": "c",
-    ".cpp": "cpp",
-    ".h": "c",
-    ".hpp": "cpp",
-    ".java": "java",
-    ".rb": "ruby",
-    ".sh": "shell",
-    ".bash": "shell",
-    ".zsh": "shell",
-    ".toml": "toml",
-    ".yaml": "yaml",
-    ".yml": "yaml",
-    ".json": "json",
-    ".md": "markdown",
-    ".css": "css",
-    ".html": "html",
-    ".xml": "xml",
-  };
-  return extMap[ext] || "text";
+  // `*<hash>:<path>*` matches the virtual-name convention the host uses
+  // to detect syntax from the trailing filename's extension.
+  const name = `*${commit.shortHash}:${file}*`;
+  const view = await editor.createVirtualBuffer({
+    name,
+    mode: "git-log-file-view",
+    readOnly: true,
+    editingDisabled: true,
+    showLineNumbers: true,
+    entries,
+  });
+  if (view) {
+    const byte = await editor.getLineStartPosition(Math.max(0, line - 1));
+    if (byte !== null) editor.setBufferCursor(view.bufferId, byte);
+    editor.setStatus(
+      editor.t("status.file_view_ready", {
+        file,
+        hash: commit.shortHash,
+        line: String(line),
+      })
+    );
+  } else {
+    editor.setStatus(editor.t("status.failed_open_file", { file }));
+  }
 }
+registerHandler("git_log_detail_open_file", git_log_detail_open_file);
 
-// Keywords for different languages
-const languageKeywords: Record<string, string[]> = {
-  rust: ["fn", "let", "mut", "const", "pub", "use", "mod", "struct", "enum", "impl", "trait", "for", "while", "loop", "if", "else", "match", "return", "async", "await", "move", "self", "Self", "super", "crate", "where", "type", "static", "unsafe", "extern", "ref", "dyn", "as", "in", "true", "false"],
-  typescript: ["function", "const", "let", "var", "class", "interface", "type", "extends", "implements", "import", "export", "from", "async", "await", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "new", "this", "super", "null", "undefined", "true", "false", "try", "catch", "finally", "throw", "typeof", "instanceof", "void", "delete", "in", "of", "static", "readonly", "private", "public", "protected", "abstract", "enum"],
-  javascript: ["function", "const", "let", "var", "class", "extends", "import", "export", "from", "async", "await", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "new", "this", "super", "null", "undefined", "true", "false", "try", "catch", "finally", "throw", "typeof", "instanceof", "void", "delete", "in", "of", "static"],
-  python: ["def", "class", "if", "elif", "else", "for", "while", "try", "except", "finally", "with", "as", "import", "from", "return", "yield", "raise", "pass", "break", "continue", "and", "or", "not", "in", "is", "lambda", "None", "True", "False", "global", "nonlocal", "async", "await", "self"],
-  go: ["func", "var", "const", "type", "struct", "interface", "map", "chan", "if", "else", "for", "range", "switch", "case", "default", "break", "continue", "return", "go", "defer", "select", "import", "package", "nil", "true", "false", "make", "new", "len", "cap", "append", "copy", "delete", "panic", "recover"],
-};
-
-// Apply basic syntax highlighting to file view
-function applyFileViewHighlighting(bufferId: number, content: string, filePath: string): void {
-  const language = getLanguageFromPath(filePath);
-  const keywords = languageKeywords[language] || [];
-  const lines = content.split("\n");
-
-  // Clear existing overlays
-  editor.clearNamespace(bufferId, "syntax");
-
-  let byteOffset = 0;
-  let inMultilineComment = false;
-  let inMultilineString = false;
-
-  for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-    const line = lines[lineIdx];
-    const lineStart = byteOffset;
-
-    // Skip empty lines
-    if (line.trim() === "") {
-      byteOffset += line.length + 1;
-      continue;
-    }
-
-    // Check for multiline comment start/end
-    if (language === "rust" || language === "c" || language === "cpp" || language === "java" || language === "javascript" || language === "typescript" || language === "go") {
-      if (line.includes("/*") && !line.includes("*/")) {
-        inMultilineComment = true;
-      }
-      if (inMultilineComment) {
-        editor.addOverlay(bufferId, "syntax", lineStart, lineStart + line.length, {
-          fg: colors.syntaxComment,
-          italic: true,
-        });
-        if (line.includes("*/")) {
-          inMultilineComment = false;
-        }
-        byteOffset += line.length + 1;
-        continue;
-      }
-    }
-
-    // Python multiline strings
-    if (language === "python" && (line.includes('"""') || line.includes("'''"))) {
-      const tripleQuote = line.includes('"""') ? '"""' : "'''";
-      const firstIdx = line.indexOf(tripleQuote);
-      const secondIdx = line.indexOf(tripleQuote, firstIdx + 3);
-      if (firstIdx >= 0 && secondIdx < 0) {
-        inMultilineString = !inMultilineString;
-      }
-    }
-    if (inMultilineString) {
-      editor.addOverlay(bufferId, "syntax", lineStart, lineStart + line.length, {
-        fg: colors.syntaxString,
-      });
-      byteOffset += line.length + 1;
-      continue;
-    }
-
-    // Single-line comment detection
-    let commentStart = -1;
-    if (language === "rust" || language === "c" || language === "cpp" || language === "java" || language === "javascript" || language === "typescript" || language === "go") {
-      commentStart = line.indexOf("//");
-    } else if (language === "python" || language === "shell" || language === "ruby" || language === "yaml" || language === "toml") {
-      commentStart = line.indexOf("#");
-    }
-
-    if (commentStart >= 0) {
-      editor.addOverlay(bufferId, "syntax", lineStart + commentStart, lineStart + line.length, {
-        fg: colors.syntaxComment,
-        italic: true,
-      });
-    }
-
-    // String highlighting (simple: find "..." and '...')
-    let i = 0;
-    while (i < line.length) {
-      const ch = line[i];
-      if (ch === '"' || ch === "'") {
-        const quote = ch;
-        const start = i;
-        i++;
-        while (i < line.length && line[i] !== quote) {
-          if (line[i] === '\\') i++; // Skip escaped chars
-          i++;
-        }
-        if (i < line.length) i++; // Include closing quote
-        const end = i;
-        if (commentStart < 0 || start < commentStart) {
-          editor.addOverlay(bufferId, "syntax", lineStart + start, lineStart + end, {
-            fg: colors.syntaxString,
-          });
-        }
-      } else {
-        i++;
-      }
-    }
-
-    // Keyword highlighting
-    for (const keyword of keywords) {
-      const regex = new RegExp(`\\b${keyword}\\b`, "g");
-      let match: RegExpExecArray | null;
-      while ((match = regex.exec(line)) !== null) {
-        const kwStart = match.index;
-        const kwEnd = kwStart + keyword.length;
-        // Don't highlight if inside comment
-        if (commentStart < 0 || kwStart < commentStart) {
-          editor.addOverlay(bufferId, "syntax", lineStart + kwStart, lineStart + kwEnd, {
-            fg: colors.syntaxKeyword,
-            bold: true,
-          });
-        }
-      }
-    }
-
-    // Number highlighting
-    const numberRegex = /\b\d+(\.\d+)?\b/g;
-    let numMatch: RegExpExecArray | null;
-    while ((numMatch = numberRegex.exec(line)) !== null) {
-      const numStart = numMatch.index;
-      const numEnd = numStart + numMatch[0].length;
-      if (commentStart < 0 || numStart < commentStart) {
-        editor.addOverlay(bufferId, "syntax", lineStart + numStart, lineStart + numEnd, {
-          fg: colors.syntaxNumber,
-        });
-      }
-    }
+// File-view mode so `q` closes the tab and returns to the group.
+editor.defineMode(
+  "git-log-file-view",
+  [
+    ["q", "git_log_file_view_close"],
+    ["Escape", "git_log_file_view_close"],
+  ],
+  true
+);
 
-    byteOffset += line.length + 1;
-  }
+function git_log_file_view_close(): void {
+  const id = editor.getActiveBufferId();
+  if (id) editor.closeBuffer(id);
 }
+registerHandler("git_log_file_view_close", git_log_file_view_close);
 
-// Open file at the current diff line position - shows file as it was at that commit
-async function git_commit_detail_open_file() : Promise<void> {
-  if (!commitDetailState.isOpen || commitDetailState.bufferId === null) {
-    return;
-  }
-
-  const commit = commitDetailState.commit;
-  if (!commit) {
-    editor.setStatus(editor.t("status.move_to_commit"));
-    return;
-  }
+// =============================================================================
+// Cursor tracking — live-update the detail panel as the user scrolls through
+// the commit list.
+// =============================================================================
 
-  // Get text properties at cursor position to find file/line info
-  const props = editor.getTextPropertiesAtCursor(commitDetailState.bufferId);
-
-  if (props.length > 0) {
-    const file = props[0].file as string | undefined;
-    const line = props[0].line as number | undefined;
-
-    if (file) {
-      editor.setStatus(editor.t("status.file_loading", { file, hash: commit.shortHash }));
-
-      // Fetch file content at this commit
-      const content = await fetchFileAtCommit(commit.hash, file);
-
-      if (content === null) {
-        editor.setStatus(editor.t("status.file_not_found", { file, hash: commit.shortHash }));
-        return;
-      }
-
-      // Build entries for the virtual buffer - one entry per line for proper line tracking
-      const lines = content.split("\n");
-      const entries: TextPropertyEntry[] = [];
-
-      for (let i = 0; i < lines.length; i++) {
-        entries.push({
-          text: lines[i] + (i < lines.length - 1 ? "\n" : ""),
-          properties: { type: "content", line: i + 1 },
-        });
-      }
-
-      // Create a read-only virtual buffer with the file content
-      const result = await editor.createVirtualBufferInExistingSplit({
-        name: `${file} @ ${commit.shortHash}`,
-        mode: "git-file-view",
-        readOnly: true,
-        entries: entries,
-        splitId: commitDetailState.splitId!,
-        showLineNumbers: true,
-        showCursors: true,
-        editingDisabled: true,
-      });
-
-      if (result !== null) {
-        // Track file view state so we can navigate back
-        fileViewState.isOpen = true;
-        fileViewState.bufferId = result.bufferId;
-        fileViewState.splitId = commitDetailState.splitId;
-        fileViewState.filePath = file;
-        fileViewState.commitHash = commit.hash;
-
-        // Apply syntax highlighting based on file type
-        applyFileViewHighlighting(result.bufferId, content, file);
-
-        const targetLine = line || 1;
-        editor.setStatus(editor.t("status.file_view_ready", { file, hash: commit.shortHash, line: String(targetLine) }));
-      } else {
-        editor.setStatus(editor.t("status.failed_open_file", { file }));
-      }
-    } else {
-      editor.setStatus(editor.t("status.move_to_diff_with_context"));
-    }
-  } else {
-    editor.setStatus(editor.t("status.move_to_diff"));
-  }
+async function on_git_log_cursor_moved(data: {
+  buffer_id: number;
+  cursor_id: number;
+  old_position: number;
+  new_position: number;
+}): Promise<void> {
+  if (!state.isOpen) return;
+  // Only react to movement inside the log panel.
+  if (data.buffer_id !== state.logBufferId) return;
+
+  // Map the cursor's byte offset to a commit index via the row-offset
+  // table built in `renderLog`. This avoids relying on `getCursorLine`
+  // which is not implemented for virtual buffers.
+  const idx = indexFromCursorByte(data.new_position);
+  if (idx === state.selectedIndex) return;
+  state.selectedIndex = idx;
+
+  // Immediate feedback: update the log panel's selection highlight and
+  // either show the cached detail or a "loading" placeholder. Only the
+  // actual `git show` spawn is debounced below, so a burst of j/k events
+  // still feels responsive even though we collapse the fetches into one.
+  renderLog();
+  const pending = refreshDetailImmediate();
+
+  const commit = state.commits[state.selectedIndex];
+  if (commit) {
+    editor.setStatus(
+      editor.t("status.commit_position", {
+        current: String(state.selectedIndex + 1),
+        total: String(state.commits.length),
+      })
+    );
+  }
+
+  if (!pending) return;
+
+  // Debounce: bump the token, wait a beat, bail if a newer event has
+  // arrived. `git show` is expensive; a burst of cursor events (held
+  // j/k, PageDown) must collapse to one spawn.
+  const myId = ++state.pendingCursorMoveId;
+  await editor.delay(CURSOR_DEBOUNCE_MS);
+  if (myId !== state.pendingCursorMoveId) return;
+  if (!state.isOpen) return;
+  await fetchAndRenderDetail(pending);
 }
-registerHandler("git_commit_detail_open_file", git_commit_detail_open_file);
+registerHandler("on_git_log_cursor_moved", on_git_log_cursor_moved);
 
 // =============================================================================
-// Command Registration
+// Command registration
 // =============================================================================
 
 editor.registerCommand(
@@ -1166,14 +763,12 @@ editor.registerCommand(
   "show_git_log",
   null
 );
-
 editor.registerCommand(
   "%cmd.git_log_close",
   "%cmd.git_log_close_desc",
   "git_log_close",
   null
 );
-
 editor.registerCommand(
   "%cmd.git_log_refresh",
   "%cmd.git_log_refresh_desc",
@@ -1181,8 +776,4 @@ editor.registerCommand(
   null
 );
 
-// =============================================================================
-// Plugin Initialization
-// =============================================================================
-
-editor.debug("Git Log plugin initialized - Use 'Git Log' command to open");
+editor.debug("Git Log plugin initialized (modern buffer-group layout)");