@hienlh/ppm 0.19.11 → 0.20.0

package/src/web/components/chat/usage-badge.tsx

@@ -1,11 +1,15 @@
 /**
  * The chat header's usage chip and the panel it opens.
  *
- * Display only. Adding, removing, enabling, exporting and rotating accounts all live in
- * Settings → Accounts; this panel links there instead of carrying its own copy of those
- * controls, which is what let the two drift apart. The account cards are the same component
- * the Settings pane renders — passing no action callbacks is what makes them read-only, so
- * there is one card implementation rather than a display twin.
+ * Adding, removing, exporting and rotating accounts live in Settings → Accounts; this panel
+ * links there rather than carrying its own copy of them. What it does carry is the two
+ * decisions that belong to the conversation in front of you: which account serves it, and
+ * whether an account is available at all.
+ *
+ * The rule the original separation was protecting still holds, and is what makes those two
+ * safe to have here: the cards are the same component the Settings pane renders, and the
+ * switch drives the same `useAccountsData().toggle` that pane drives. One implementation, two
+ * places it appears — not a display twin that can drift.
  *
  * Accounts sit in a row that scrolls sideways, not a vertical stack: this panel exists to
  * compare them, and stacked in a 350px strip that meant scrolling past one account to see
@@ -15,11 +19,17 @@
 import { useState } from "react";
 import { Activity, ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
 import type { UsageInfo } from "../../../types/chat";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { openSettings } from "@/components/settings/open-settings";
 import { AccountCard } from "@/components/settings/accounts/account-card";
 import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-row";
 import { useAccountsData } from "@/components/settings/accounts/use-accounts-data";
-import { formatLastUpdated, pctColor } from "@/components/settings/accounts/account-usage-format";
+import { formatLastUpdated, formatResetTime, pctColor } from "@/components/settings/accounts/account-usage-format";
+
+/** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
+function atCap(util: number | null | undefined): boolean {
+  return Math.round((util ?? 0) * 100) >= 100;
+}
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -38,16 +48,20 @@ export function UsageBadge({ usage, loading, onClick }: UsageBadgeProps) {
   const colorClass = fiveHourPct != null || sevenDayPct != null ? pctColor(worstPct) : "text-text-subtle";
 
   return (
-    <button
-      onClick={onClick}
-      className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-hover ${colorClass}`}
-      title="Click for usage details"
-    >
-      {loading ? <RefreshCw className="size-3 animate-spin" /> : <Activity className="size-3" />}
-      <span>5h:{fiveHourLabel}</span>
-      <span className="text-text-subtle">·</span>
-      <span>Wk:{sevenDayLabel}</span>
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          onClick={onClick}
+          className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-hover ${colorClass}`}
+        >
+          {loading ? <RefreshCw className="size-3 animate-spin" /> : <Activity className="size-3" />}
+          <span>5h:{fiveHourLabel}</span>
+          <span className="text-text-subtle">·</span>
+          <span>Wk:{sevenDayLabel}</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">Click for usage details</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -60,17 +74,89 @@ interface UsageDetailPanelProps {
   onReload?: () => void;
   loading?: boolean;
   lastFetchedAt?: string | null;
+  /** Route this chat to a different account. Omitted when the caller cannot re-route. */
+  onSelectAccount?: (accountId: string, label: string | null) => Promise<string | null>;
+  /** Account currently claimed or bound for this chat, so the card can mark itself. */
+  selectedAccountId?: string | null;
 }
 
-export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastFetchedAt }: UsageDetailPanelProps) {
+export function UsageDetailPanel({
+  usage, visible, onClose, onReload, loading, lastFetchedAt,
+  onSelectAccount, selectedAccountId,
+}: UsageDetailPanelProps) {
+  const [selectingId, setSelectingId] = useState<string | null>(null);
   // Fetching is gated on visibility: the panel is collapsed most of the time, and its
   // usage endpoint is the expensive one.
-  const { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload } = useAccountsData(visible);
+  const { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload, toggle, togglingId } = useAccountsData(visible);
+  // One strip for anything that went wrong in this panel — a refused switch or a refused
+  // toggle. Two separate messages in two places would be harder to notice, not clearer.
+  const [panelError, setPanelError] = useState<string | null>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   if (!visible) return null;
 
   const accountMap = new Map(accounts.map((a) => [a.id, a]));
+
+  /**
+   * Why an account cannot take this chat, in the words the card shows.
+   *
+   * Only the reasons the server itself refuses — disabled, or a token past saving. Being
+   * near a quota cap is not one of them: that is a slower turn, not an impossible one, and
+   * a user who picks a nearly-capped account on purpose is allowed to.
+   */
+  function unselectableReason(
+    info?: (typeof accounts)[number],
+    entry?: (typeof usages)[number],
+  ): string | null {
+    if (info) {
+      if (info.status === "disabled") return "Disabled";
+      // A rejected grant is refused before the token's freshness is even consulted, so such
+      // an account cannot take a turn however healthy the rest of the card looks.
+      if (info.reauthRequired) return "Sign in again to use this account";
+      const expired = !info.hasRefreshToken && info.expiresAt && info.expiresAt < Math.floor(Date.now() / 1000);
+      if (expired) return "Token expired — sign in again";
+    }
+    // Reached, not merely approaching. The router steers away from 95% so it can spread load
+    // early, but an account at 96% still answers — refusing it would be wrong. At 100% the
+    // next turn fails outright, and that is the point where saying no is the truth.
+    const session = entry?.usage.session;
+    if (atCap(session?.utilization)) {
+      return `5-hour limit reached${session?.resetsAt ? ` — resets ${formatResetTime(session)}` : ""}`;
+    }
+    const weekly = entry?.usage.weekly;
+    if (atCap(weekly?.utilization)) {
+      return `Weekly limit reached${weekly?.resetsAt ? ` — resets ${formatResetTime(weekly)}` : ""}`;
+    }
+    return null;
+  }
+
+  async function handleToggle(id: string, status: string) {
+    setPanelError(await toggle(id, status));
+  }
+
+  async function handleSelect(accountId: string) {
+    if (!onSelectAccount) return;
+    // Refuse here rather than leaving the button inert: the user pressed something and is
+    // owed the reason. Checked again server-side, which is what catches an account that
+    // became unusable between this render and the click.
+    const refused = unselectableReason(
+      accountMap.get(accountId),
+      usages.find((u) => u.accountId === accountId),
+    );
+    if (refused) { setPanelError(`Cannot switch to this account — ${refused.toLowerCase()}.`); return; }
+
+    setSelectingId(accountId);
+    setPanelError(null);
+    try {
+      // The label travels with the id: a tab that has no session yet displays the choice
+      // straight away, and it is the only place that knows the human-readable name.
+      const label = usages.find((u) => u.accountId === accountId)?.accountLabel ?? null;
+      setPanelError((await onSelectAccount(accountId, label)) ?? null);
+    } finally {
+      setSelectingId(null);
+    }
+  }
+
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
   const hasPerAccountUsage = usages.length > 0;
 
@@ -95,33 +181,45 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           )}
         </div>
         <div className="flex items-center gap-1">
-          <button
-            onClick={() => openSettings("accounts")}
-            className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-            title="Add, remove or rotate accounts"
-          >
-            Manage accounts <ExternalLink className="size-3" />
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => openSettings("accounts")}
+                className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+              >
+                Manage accounts <ExternalLink className="size-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Add, remove or rotate accounts</TooltipContent>
+          </Tooltip>
           {hasPerAccountUsage && (
-            <button
-              onClick={() => setIsFullscreen((v) => !v)}
-              className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-              title={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
-              aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
-            >
-              {isFullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setIsFullscreen((v) => !v)}
+                  className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+                  aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
+                >
+                  {isFullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">{isFullscreen ? "Exit fullscreen" : "Fullscreen view"}</TooltipContent>
+            </Tooltip>
           )}
           {onReload && (
-            <button
-              onClick={() => { onReload(); void reload(); }}
-              disabled={loading || refreshing}
-              className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50 cursor-pointer"
-              title="Refresh"
-              aria-label="Refresh usage"
-            >
-              <RefreshCw className={`size-3 ${(loading || refreshing) ? "animate-spin" : ""}`} />
-            </button>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => { onReload(); void reload(); }}
+                  disabled={loading || refreshing}
+                  className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50 cursor-pointer"
+                  aria-label="Refresh usage"
+                >
+                  <RefreshCw className={`size-3 ${(loading || refreshing) ? "animate-spin" : ""}`} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">Refresh</TooltipContent>
+            </Tooltip>
           )}
           <button
             onClick={() => { setIsFullscreen(false); onClose(); }}
@@ -133,6 +231,22 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </div>
       </div>
 
+      {/* The server distinguishes "this login was rejected, sign in again" from "could not
+          reach Anthropic, try shortly", and the difference decides what the user should do.
+          Showing its words verbatim is the only way that survives to them. */}
+      {panelError && (
+        <div className="shrink-0 flex items-start gap-2 rounded border border-error/40 bg-error/10 px-2 py-1.5 text-[11px] text-error">
+          <span className="flex-1">{panelError}</span>
+          <button
+            onClick={() => setPanelError(null)}
+            className="shrink-0 text-error/70 hover:text-error cursor-pointer"
+            aria-label="Dismiss"
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      )}
+
       {hasPerAccountUsage || initialLoading ? (
         <div
           className={isFullscreen
@@ -147,16 +261,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           {initialLoading ? (
             <p className="text-[10px] text-text-subtle">Loading...</p>
           ) : (
-            usages.map((entry) => (
-              <AccountCard
-                key={entry.accountId}
-                entry={entry}
-                isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
-                accountInfo={accountMap.get(entry.accountId)}
-                flash={flashIds.has(entry.accountId)}
-                layout={isFullscreen ? "grid" : "strip"}
-              />
-            ))
+            usages.map((entry) => {
+              const info = accountMap.get(entry.accountId);
+              return (
+                <AccountCard
+                  key={entry.accountId}
+                  entry={entry}
+                  // What is serving THIS chat, not what the rotation would pick next —
+                  // those differ the moment a session is bound to an account.
+                  isActive={entry.accountId === (selectedAccountId ?? usage.activeAccountId ?? activeAccountId)}
+                  accountInfo={info}
+                  flash={flashIds.has(entry.accountId)}
+                  layout={isFullscreen ? "grid" : "strip"}
+                  onSelect={onSelectAccount ? handleSelect : undefined}
+                  unselectableReason={unselectableReason(info, entry)}
+                  selecting={selectingId === entry.accountId}
+                  onToggle={handleToggle}
+                  toggling={togglingId === entry.accountId}
+                />
+              );
+            })
           )}
         </div>
       ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (

package/src/web/components/editor/code-editor.tsx

@@ -8,6 +8,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { useInlineBlame } from "@/hooks/use-inline-blame";
 import { Loader2, FileWarning, Play, Database, ExternalLink, X, GripHorizontal, ShieldCheck, ShieldOff } from "lucide-react";
 import { EditorBreadcrumb } from "./editor-breadcrumb";
 import { EditorToolbar } from "./editor-toolbar";
@@ -73,8 +74,16 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestContentRef = useRef<string>("");
   const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
+  // Mirrors editorRef as state, so hooks that must react to the editor existing
+  // (inline blame) re-run on mount instead of reading a ref that is still null.
+  const [mounted, setMounted] = useState<{
+    editor: MonacoType.editor.IStandaloneCodeEditor;
+    monaco: typeof MonacoType;
+  } | null>(null);
   const { tabs, updateTab } = useTabStore(useShallow((s) => ({ tabs: s.tabs, updateTab: s.updateTab })));
   const { wordWrap, toggleWordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap })));
+  const inlineBlame = useSettingsStore((s) => s.inlineBlame);
+  const toggleInlineBlame = useSettingsStore((s) => s.toggleInlineBlame);
   const monacoTheme = useMonacoTheme();
 
   const isUntitled = metadata?.isUntitled === true;
@@ -367,6 +376,18 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     if (ownTab.title !== newTitle) updateTab(ownTab.id, { title: newTitle });
   }, [unsaved]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // GitLens-style annotation on the cursor's line. Off unless the pref is on,
+  // and never for an untitled buffer or inline (read-only preview) content —
+  // neither has a path git could blame.
+  const canBlame = !isUntitled && inlineContent == null && !!filePath && !!projectName;
+  const blame = useInlineBlame({
+    editor: mounted?.editor ?? null,
+    monaco: mounted?.monaco ?? null,
+    projectName,
+    filePath: canBlame ? filePath : undefined,
+    enabled: inlineBlame && canBlame,
+  });
+
   const saveFile = useCallback(
     async (text: string) => {
       if (!filePath) return;
@@ -378,9 +399,12 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
           await api.put(`${projectUrl(projectName!)}/files/write`, { path: filePath, content: text });
         }
         setUnsaved(false);
+        // The blame line table is keyed by line number, so an edit invalidates
+        // it; a save is the point where a fresh one can be had.
+        blame.refresh();
       } catch { /* Silent — unsaved indicator persists */ }
     },
-    [filePath, projectName, isExternalFile],
+    [filePath, projectName, isExternalFile, blame.refresh], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   function handleChange(value: string | undefined) {
@@ -452,6 +476,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
   const handleEditorMount: OnMount = useCallback((editor, monaco) => {
     editorRef.current = editor;
     monacoInstanceRef.current = monaco;
+    setMounted({ editor, monaco });
     if (lineNumber && lineNumber > 0) {
       setTimeout(() => revealTarget(), 100);
     }
@@ -466,6 +491,10 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
       monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
       () => useSettingsStore.getState().toggleWordWrap(),
     );
+    editor.addCommand(
+      monaco.KeyMod.Alt | monaco.KeyCode.KeyB,
+      () => useSettingsStore.getState().toggleInlineBlame(),
+    );
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: true, noSyntaxValidation: true, noSuggestionDiagnostics: true,
     });
@@ -694,6 +723,9 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             onCsvModeChange={setCsvMode}
             wordWrap={wordWrap}
             onToggleWordWrap={toggleWordWrap}
+            inlineBlame={inlineBlame}
+            onToggleInlineBlame={canBlame ? toggleInlineBlame : undefined}
+            blameStale={blame.stale}
             onRefresh={reloadFile}
             refreshing={refreshing}
             filePath={filePath}

package/src/web/components/editor/diff-viewer.tsx

@@ -5,7 +5,8 @@ import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
-import { Loader2, FileCode, WrapText } from "lucide-react";
+import { Loader2, FileCode, WrapText, UserRound } from "lucide-react";
+import { useInlineBlame } from "@/hooks/use-inline-blame";
 
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
@@ -49,6 +50,20 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const diffEditorRef = useRef<import("monaco-editor").editor.IStandaloneDiffEditor | null>(null);
   const [editorReady, setEditorReady] = useState(false);
+  // The two panes, as state rather than refs: the blame hooks have to re-run
+  // once the editor exists. `focused` is which pane gets annotated — only one,
+  // because both panes carry a cursor position and annotating both would leave a
+  // stray line-1 annotation in the idle pane.
+  //
+  // It starts on the modified side rather than nothing: that is the side the
+  // normal editor annotates, so turning blame on shows something immediately
+  // instead of waiting for a click nobody knows to make.
+  const [panes, setPanes] = useState<{
+    monaco: typeof import("monaco-editor");
+    original: import("monaco-editor").editor.ICodeEditor;
+    modified: import("monaco-editor").editor.ICodeEditor;
+  } | null>(null);
+  const [focused, setFocused] = useState<"original" | "modified">("modified");
   const [containerHeight, setContainerHeight] = useState<number | undefined>();
 
   useEffect(() => {
@@ -134,6 +149,42 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     return langFile ? getMonacoLanguage(langFile) : "plaintext";
   }, [filePath, file1, file2]);
 
+  const inlineBlame = useSettingsStore((s) => s.inlineBlame);
+  const toggleInlineBlame = useSettingsStore((s) => s.toggleInlineBlame);
+
+  /**
+   * Blame is only honest on the full-file path.
+   *
+   * `file-full-diff` hands back both sides as complete files at real revisions,
+   * so a line number here is the line number git blamed. The other three paths
+   * cannot be blamed: inline content and a two-file compare are not a tracked
+   * path at a revision, and `parseDiff` rebuilds the file from hunks alone, so
+   * its line 40 is not the file's line 40 — annotating it would confidently
+   * name the wrong commit.
+   */
+  const canBlame = Boolean(projectName && filePath && fullFileDiff);
+
+  // The left pane is the file at `ref1` (the route defaults to HEAD); the right
+  // is `ref2`, or the working tree when there is none.
+  useInlineBlame({
+    editor: panes?.original ?? null,
+    monaco: panes?.monaco ?? null,
+    projectName,
+    filePath: canBlame ? filePath : undefined,
+    rev: ref1 || "HEAD",
+    enabled: inlineBlame && canBlame && focused === "original",
+    readOnly: true,
+  });
+  useInlineBlame({
+    editor: panes?.modified ?? null,
+    monaco: panes?.monaco ?? null,
+    projectName,
+    filePath: canBlame ? filePath : undefined,
+    rev: ref2,
+    enabled: inlineBlame && canBlame && focused === "modified",
+    readOnly: true,
+  });
+
   // Force inline on mobile (<768px) since side-by-side is too narrow
   const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
   const renderSideBySide = !isMobile;
@@ -190,13 +241,26 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Toolbar */}
-      {!isMobile && (
+      {(!isMobile || canBlame) && (
         <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
-          <button type="button" onClick={toggleWordWrap} title="Toggle word wrap"
-            className={`p-1 rounded hover:bg-muted transition-colors ${wordWrap ? "bg-muted text-foreground" : ""}`}
-          >
-            <WrapText className="size-3.5" />
-          </button>
+          {canBlame && (
+            <button type="button" onClick={toggleInlineBlame}
+              title="Inline blame (Alt+B) — who last touched the cursor's line. Click a pane to annotate that side."
+              className={`flex items-center justify-center rounded hover:bg-muted active:scale-95 transition-colors ${
+                isMobile ? "size-11" : "p-1"
+              } ${inlineBlame ? "bg-muted text-foreground" : ""}`}
+            >
+              <UserRound className="size-3.5" />
+            </button>
+          )}
+          {/* Word wrap is forced on below `md`, so its toggle would be a lie. */}
+          {!isMobile && (
+            <button type="button" onClick={toggleWordWrap} title="Toggle word wrap"
+              className={`p-1 rounded hover:bg-muted transition-colors ${wordWrap ? "bg-muted text-foreground" : ""}`}
+            >
+              <WrapText className="size-3.5" />
+            </button>
+          )}
         </div>
       )}
       {/* Monaco DiffEditor */}
@@ -208,9 +272,20 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
             original={original}
             modified={modified}
             theme={monacoTheme}
-            onMount={(editor) => {
+            onMount={(editor, monaco) => {
               diffEditorRef.current = editor;
               setEditorReady(true);
+              const originalPane = editor.getOriginalEditor();
+              const modifiedPane = editor.getModifiedEditor();
+              setPanes({ monaco, original: originalPane, modified: modifiedPane });
+              originalPane.onDidFocusEditorText(() => setFocused("original"));
+              modifiedPane.onDidFocusEditorText(() => setFocused("modified"));
+              // Same shortcut as the normal editor. It goes on the diff editor,
+              // not the panes: only IStandaloneDiffEditor has addCommand.
+              editor.addCommand(
+                monaco.KeyMod.Alt | monaco.KeyCode.KeyB,
+                () => useSettingsStore.getState().toggleInlineBlame(),
+              );
             }}
             options={{
               fontSize: isMobile ? 11 : 13,

package/src/web/components/editor/editor-toolbar.tsx

@@ -1,4 +1,4 @@
-import { Code, Eye, WrapText, Table, Download, RefreshCw } from "lucide-react";
+import { Code, Eye, WrapText, Table, Download, RefreshCw, UserRound } from "lucide-react";
 import { downloadFile } from "@/lib/file-download";
 
 interface EditorToolbarProps {
@@ -9,6 +9,11 @@ interface EditorToolbarProps {
   onCsvModeChange?: (mode: "table" | "raw") => void;
   wordWrap: boolean;
   onToggleWordWrap: () => void;
+  /** Omitted for buffers git cannot blame (untitled, inline preview). */
+  inlineBlame?: boolean;
+  onToggleInlineBlame?: () => void;
+  /** Blame is on but hidden because the buffer has unsaved edits. */
+  blameStale?: boolean;
   onRefresh?: () => void;
   refreshing?: boolean;
   filePath?: string;
@@ -21,15 +26,18 @@ function ToolbarButton({
   onClick,
   icon: Icon,
   label,
+  title,
 }: {
   active: boolean;
   onClick: () => void;
   icon: React.ComponentType<{ className?: string }>;
   label: string;
+  title?: string;
 }) {
   return (
     <button
       type="button"
+      title={title}
       onClick={onClick}
       className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${
         active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
@@ -49,6 +57,9 @@ export function EditorToolbar({
   onCsvModeChange,
   wordWrap,
   onToggleWordWrap,
+  inlineBlame,
+  onToggleInlineBlame,
+  blameStale,
   onRefresh,
   refreshing,
   filePath,
@@ -78,6 +89,19 @@ export function EditorToolbar({
         icon={WrapText}
         label="Wrap"
       />
+      {onToggleInlineBlame && (
+        <ToolbarButton
+          active={inlineBlame === true}
+          onClick={onToggleInlineBlame}
+          icon={UserRound}
+          label="Blame"
+          title={
+            inlineBlame && blameStale
+              ? "Blame is hidden until this file is saved — the line numbers have moved"
+              : "Inline blame (Alt+B)"
+          }
+        />
+      )}
       {onRefresh && (
         <button
           type="button"