diff --git a/src/App.svelte b/src/App.svelte
index 290a10c..3094c77 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4929,8 +4929,11 @@
           {commits}
           {selectedCommitHash}
           {localBranchNames}
+          remoteBranchNames={remoteBranches.map((branch) => branch.name)}
           activeBranch={status?.current_branch ?? ""}
           activeUpstream={status?.upstream ?? ""}
+          activeAhead={status?.ahead ?? 0}
+          activeBehind={status?.behind ?? 0}
           repositoryKey={activeRepoPath}
           {hasRepository}
           {isBusy}
diff --git a/src/app.css b/src/app.css
index 61f9e3a..e7fefb1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -292,21 +292,58 @@
     align-items: center;
     flex: 0 0 auto;
     justify-content: flex-end;
-    gap: 8px;
+    gap: 5px;
     min-width: 0;
   }
 
+  .graph-visibility-select {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-height: 28px;
+    padding: 0 7px;
+    border: 1px solid rgba(94,110,156,0.2);
+    border-radius: 6px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.035);
+  }
+
+  .graph-visibility-select > svg:first-child { color: #76d995; }
+  .graph-visibility-select > svg:last-child { position: absolute; right: 6px; pointer-events: none; }
+  .graph-visibility-label {
+    color: var(--color-ink-faint);
+    font-size: 9px;
+    font-weight: 800;
+    letter-spacing: .05em;
+    text-transform: uppercase;
+  }
+  .graph-visibility-select select {
+    min-width: 62px;
+    height: 24px;
+    padding: 0 18px 0 2px;
+    border: 0;
+    outline: 0;
+    appearance: none;
+    color: var(--color-ink);
+    background: transparent;
+    box-shadow: none;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 800;
+  }
+  .graph-visibility-select select:focus { box-shadow: none; }
+
   .graph-branch-dialog-button {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 0;
     min-height: 26px;
-    padding: 0 9px;
-    overflow: hidden;
-    border: 1px solid rgba(91,209,138,0.24);
-    border-radius: 999px;
-    color: #b6f1c4;
-    background: rgba(34,68,48,0.28);
+    padding: 0 5px;
+    border: 1px solid rgba(94,110,156,0.18);
+    border-radius: 6px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.03);
     font-size: 11px;
     font-weight: 800;
     white-space: nowrap;
@@ -314,15 +351,16 @@
   }
 
   .graph-branch-dialog-button:hover {
-    border-color: rgba(91,209,138,0.42);
-    background: rgba(34,68,48,0.42);
+    border-color: rgba(91,209,138,0.32);
+    color: var(--color-ink);
+    background: rgba(34,68,48,0.24);
   }
 
   .graph-branch-dialog-button span {
-    padding: 1px 5px;
-    border-radius: 999px;
-    color: #061021;
-    background: #6ce18f;
+    padding: 1px 4px;
+    border-radius: 4px;
+    color: #9fdcaf;
+    background: transparent;
     font-size: 10px;
     line-height: 1.2;
   }
@@ -2492,38 +2530,6 @@
     font-size: 10.5px;
     font-weight: 700;
   }
-  .commit-local-branches {
-    display: inline-flex;
-    flex: 0 1 auto;
-    flex-wrap: wrap;
-    gap: 3px;
-    min-width: 0;
-    max-width: min(100%, 260px);
-  }
-  .commit-branch-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    min-width: 0;
-    max-width: 100%;
-    height: 17px;
-    padding: 0 6px 0 5px;
-    overflow: hidden;
-    border: 1px solid rgba(91,209,138,0.22);
-    border-radius: 999px;
-    color: #a8eeba;
-    background: rgba(34,68,48,0.42);
-    font-family: var(--font-mono);
-    font-size: 9.5px;
-    font-weight: 750;
-    line-height: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .commit-branch-chip svg {
-    flex: 0 0 auto;
-    color: #76d995;
-  }
   .commit-author {
     flex: 1 1 80px;
     overflow: hidden;
@@ -2531,30 +2537,153 @@
     white-space: nowrap;
   }
 
-  .ref-list { display: flex; flex-wrap: wrap; gap: 3px; }
-  .ref-list .ref-chip {
-    max-width: 100%;
+  .commit-ref-area { display: grid; gap: 5px; min-width: 0; }
+  .commit-ref-strip {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    min-height: 19px;
+  }
+  .compact-ref-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    max-width: min(58%, 230px);
+    height: 19px;
+    padding: 0 6px 0 5px;
     overflow: hidden;
-    padding: 1px 6px;
-    border-radius: 999px;
-    color: var(--color-accent);
-    background: rgba(106,154,255,0.09);
-    border: 1px solid rgba(106,154,255,0.16);
+    border: 1px solid rgba(91,209,138,0.2);
+    border-radius: 5px;
+    color: #a8eeba;
+    background: rgba(34,68,48,0.3);
+    font-family: var(--font-mono);
     font-size: 9.5px;
+    font-weight: 750;
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .compact-ref-chip > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .compact-ref-chip.branch > i,
+  .commit-ref-detail-item > i {
+    flex: 0 0 auto;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--ref-lane-color, #69a7ff);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 18%, transparent);
+  }
+  .compact-ref-chip.current {
+    border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 52%, transparent);
+    color: #eaf2ff;
+    background: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 16%, rgba(18,24,36,.92));
+  }
+  .compact-ref-chip.remote {
+    border-color: rgba(122,172,255,0.22);
+    color: #bcd2ff;
+    background: rgba(31,43,72,0.52);
+  }
+  .compact-ref-chip.tag {
+    flex: 0 1 auto;
+    border-color: rgba(224,180,92,0.22);
+    color: #dbc078;
+    background: rgba(224,180,92,0.075);
+  }
+  .compact-ref-chip.tag svg { flex: 0 0 auto; }
+  .compact-ref-chip small {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 2px;
+    padding-left: 4px;
+    border-left: 1px solid rgba(255,255,255,.12);
+    color: #f0bd6b;
+    font-family: var(--font-sans);
+    font-size: 8.5px;
+    font-weight: 850;
+  }
+  .compact-ref-chip small.up-to-date { color: #7de39b; }
+  .compact-ref-overflow {
+    flex: 0 0 auto;
+    min-width: 29px;
+    min-height: 19px;
+    height: 19px;
+    padding: 0 5px;
+    border-color: rgba(94,110,156,0.2);
+    border-radius: 5px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.035);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    font-weight: 800;
+  }
+  .compact-ref-overflow:hover:not(:disabled),
+  .compact-ref-overflow[aria-expanded="true"] {
+    border-color: rgba(101,162,255,.34);
+    color: var(--color-ink);
+    background: rgba(101,162,255,.1);
+  }
+  .commit-ref-details {
+    display: grid;
+    gap: 7px;
+    padding: 8px;
+    border: 1px solid rgba(94,110,156,.2);
+    border-radius: 7px;
+    background: rgba(10,14,21,.68);
+    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ref-lane-color, #69a7ff) 65%, transparent);
+  }
+  .commit-ref-details > strong {
+    color: var(--color-ink-muted);
+    font-size: 10px;
+    font-weight: 800;
+  }
+  .commit-ref-details section {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr);
+    align-items: start;
+    gap: 7px;
+  }
+  .commit-ref-details section > span {
+    padding-top: 3px;
+    color: var(--color-ink-faint);
+    font-size: 8px;
+    font-weight: 850;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+  }
+  .commit-ref-details section > div { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
+  .commit-ref-detail-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    min-height: 20px;
+    padding: 2px 6px;
+    overflow: hidden;
+    border: 1px solid rgba(94,110,156,.18);
+    border-radius: 5px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,.025);
+    font-family: var(--font-mono);
+    font-size: 9px;
     font-weight: 700;
-    line-height: 1.25;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .ref-list .ref-chip.head {
-    color: #061021;
-    border-color: rgba(65,209,255,0.48);
-    background: linear-gradient(135deg, #41d1ff, #7c6cff);
-    box-shadow: 0 0 14px rgba(65,209,255,0.2);
+  .commit-ref-detail-item.local { color: #a8eeba; border-color: rgba(91,209,138,.18); }
+  .commit-ref-detail-item.remote { color: #bcd2ff; border-color: rgba(122,172,255,.2); }
+  .commit-ref-detail-item.tag { color: #dbc078; border-color: rgba(224,180,92,.2); }
+  .commit-ref-detail-item small {
+    color: var(--color-ink-faint);
+    font-family: var(--font-sans);
+    font-size: 8px;
+    font-weight: 800;
   }
-  .ref-list .ref-chip.branch { color: #7ddf9c; background: rgba(78,202,118,0.08); border-color: rgba(78,202,118,0.18); }
-  .ref-list .ref-chip.remote { color: #aeb6ff; background: rgba(124,108,255,0.08); border-color: rgba(124,108,255,0.18); }
-  .ref-list .ref-chip.tag { color: #dbc078; background: rgba(224,180,92,0.08); border-color: rgba(224,180,92,0.2); }
 
   .commit-files {
     display: grid;
@@ -2620,6 +2749,15 @@
     background: rgba(65,209,255,0.08);
     color: var(--color-ink);
   }
+
+  .branch-filter-group-label {
+    padding: 9px 9px 3px;
+    color: var(--color-ink-faint);
+    font-size: 9px;
+    font-weight: 850;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
   .commit-note-button:not(:disabled) { color: color-mix(in srgb, var(--color-accent) 72%, var(--color-ink-dim)); }
   /* --- Git graph --- */
 
@@ -2727,63 +2865,11 @@
     border-color: var(--dot-color, #5a8cf8);
     box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
   }
-  .graph-hover-branches {
-    position: absolute;
-    z-index: 5;
-    top: 50%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
-    max-width: 190px;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(-50%) translateX(-4px);
-    transition: opacity 120ms ease, transform 120ms ease;
-  }
-  .graph-gutter:hover .graph-hover-branches {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-  .graph-hover-branches span {
-    display: inline-flex;
-    align-items: center;
-    gap: 3px;
-    max-width: 180px;
-    height: 18px;
-    padding: 0 6px 0 5px;
-    overflow: hidden;
-    border: 1px solid rgba(91,209,138,0.28);
-    border-radius: 999px;
-    color: #b2f0c2;
-    background: rgba(14,36,27,0.94);
-    box-shadow: 0 8px 22px rgba(0,0,0,0.24);
-    font-family: var(--font-mono);
-    font-size: 9.5px;
-    font-weight: 750;
-    line-height: 1;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .graph-hover-branches span.remote,
   .branch-filter-option.remote {
     border-color: rgba(122,172,255,0.32);
     color: #bcd2ff;
     background: rgba(31,43,72,0.88);
   }
-  .graph-hover-branches span.ahead {
-    border-color: rgba(224,160,64,0.42);
-    color: #ffd99a;
-    background: rgba(58,42,20,0.94);
-  }
-  .graph-hover-branches span.behind {
-    border-color: rgba(122,172,255,0.46);
-    color: #c7dbff;
-    background: rgba(25,39,70,0.94);
-  }
-  .graph-hover-branches svg {
-    flex: 0 0 auto;
-    color: #76d995;
-  }
   .commit-body {
     display: grid;
     gap: 5px;
@@ -5656,7 +5742,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   contain-intrinsic-block-size: 108px;
 }
 .commit-avatar { border-radius: 50%; }
-.commit-kind, .commit-branch-chip, .ref-chip { border-radius: 4px !important; }
+.commit-kind, .compact-ref-chip { border-radius: 4px !important; }
 .workspace-statusbar {
   display: flex;
   align-items: center;
@@ -5902,46 +5988,47 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   color: #315fd6;
 }
 
-:root[data-theme="light"] .commit-branch-chip,
-:root[data-theme="light"] .graph-hover-branches span {
+:root[data-theme="light"] .compact-ref-chip.branch {
   border-color: rgba(31,128,76,0.22);
   color: #146b3b;
   background: rgba(224,246,233,0.92);
-  box-shadow: 0 8px 22px rgba(28,44,74,0.12);
 }
 
-:root[data-theme="light"] .graph-hover-branches span.remote,
+:root[data-theme="light"] .compact-ref-chip.current {
+  border-color: color-mix(in srgb, var(--ref-lane-color, #315fd6) 48%, rgba(49,95,214,.2));
+  color: #18345f;
+  background: color-mix(in srgb, var(--ref-lane-color, #315fd6) 12%, #f7faff);
+}
+
+:root[data-theme="light"] .compact-ref-chip.remote,
 :root[data-theme="light"] .branch-filter-option.remote {
   border-color: rgba(49,95,214,0.22);
   color: #315fd6;
   background: rgba(231,237,255,0.92);
 }
 
-:root[data-theme="light"] .graph-hover-branches span.ahead {
-  border-color: rgba(150,98,15,0.28);
-  color: #96620f;
-  background: rgba(255,244,224,0.95);
+:root[data-theme="light"] .compact-ref-chip.tag,
+:root[data-theme="light"] .commit-ref-detail-item.tag {
+  color: #8b5d0e;
+  background: rgba(255,244,224,.9);
 }
 
-:root[data-theme="light"] .graph-hover-branches span.behind {
-  border-color: rgba(49,95,214,0.26);
-  color: #315fd6;
-  background: rgba(231,237,255,0.95);
+:root[data-theme="light"] .compact-ref-overflow,
+:root[data-theme="light"] .graph-visibility-select,
+:root[data-theme="light"] .graph-branch-dialog-button {
+  color: #475873;
+  border-color: rgba(49,95,214,.16);
+  background: rgba(244,247,252,.9);
 }
 
-:root[data-theme="light"] .ref-list .ref-chip.head {
-  color: #ffffff;
-  background: linear-gradient(135deg, #0f8fb5, #315fd6);
+:root[data-theme="light"] .commit-ref-details {
+  border-color: rgba(49,95,214,.16);
+  background: rgba(247,249,253,.94);
 }
 
-:root[data-theme="light"] .ref-list .ref-chip.branch {
-  color: #16723b;
-  background: rgba(78,202,118,0.12);
-}
-
-:root[data-theme="light"] .ref-list .ref-chip.remote {
-  color: #315fd6;
-  background: rgba(49,95,214,0.09);
+:root[data-theme="light"] .commit-ref-detail-item {
+  color: #475873;
+  background: #ffffff;
 }
 
 :root[data-theme="light"] .commit-files,
diff --git a/src/lib/components/HistoryPanel.svelte b/src/lib/components/HistoryPanel.svelte
index 4020a19..1038cf4 100644
--- a/src/lib/components/HistoryPanel.svelte
+++ b/src/lib/components/HistoryPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Cherry, ChevronDown, ChevronRight, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, X } from "@lucide/svelte";
+  import { Check, Cherry, ChevronDown, ChevronRight, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
   import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
 
   interface GraphSegment {
@@ -22,11 +22,32 @@
     graphCommit: GitCommit;
   }
 
+  type BranchVisibilityMode = "focus" | "local" | "all" | "custom";
+  type CommitRefKind = "local" | "remote" | "head";
+
+  interface CommitBranchDecoration {
+    label: string;
+    kind: CommitRefKind;
+    current: boolean;
+    trackedRemote: string;
+    representedBranches: string[];
+  }
+
+  interface CommitRefSummary {
+    branches: CommitBranchDecoration[];
+    tags: string[];
+    other: string[];
+    primaryBranch: CommitBranchDecoration | null;
+    primaryTag: string;
+    overflowCount: number;
+  }
+
   const GRAPH_COLORS = [
     "#69a7ff", "#5bd18a", "#d8a74a", "#ba82ff",
     "#ff7c9f", "#48c7d8", "#c5cf54", "#e18c55",
   ];
   const GRAPH_LANE = 18;
+  const GRAPH_VISIBILITY_STORAGE_PREFIX = "gitlite.graphVisibility.v1:";
   const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
     dateStyle: "medium",
     timeStyle: "short",
@@ -35,8 +56,11 @@
   interface Props {
     commits: GitCommit[];
     localBranchNames: string[];
+    remoteBranchNames: string[];
     activeBranch: string;
     activeUpstream: string;
+    activeAhead: number;
+    activeBehind: number;
     repositoryKey: string;
     hasRepository: boolean;
     isBusy: boolean;
@@ -59,8 +83,11 @@
   let {
     commits = [],
     localBranchNames = [],
+    remoteBranchNames = [],
     activeBranch = "",
     activeUpstream = "",
+    activeAhead = 0,
+    activeBehind = 0,
     repositoryKey = "",
     hasRepository = false,
     isBusy = false,
@@ -80,10 +107,11 @@
     onSelectCommit = () => {},
   }: Props = $props();
 
-  let hiddenGraphBranches = $state<Set<string>>(new Set());
+  let branchVisibilityMode = $state<BranchVisibilityMode>("focus");
+  let customVisibleBranches = $state<Set<string>>(new Set());
+  let loadedVisibilityRepository = $state("");
   let branchDialogOpen = $state(false);
-  let userAdjustedBranchFilter = $state(false);
-  let lastDefaultFilterKey = $state("");
+  let expandedRefsCommitHash = $state("");
   let panelElement = $state<HTMLElement | null>(null);
   let contextCommit = $state<GitCommit | null>(null);
   let contextMenuX = $state(0);
@@ -232,39 +260,40 @@
   }
 
   let localBranchNameSet = $derived(new Set(localBranchNames));
+  let remoteBranchNameSet = $derived(new Set(remoteBranchNames));
 
   function uniqueStrings(values: string[]): string[] {
     return [...new Set(values.filter(Boolean))];
   }
 
-  let graphBranchNames = $derived(uniqueStrings([...localBranchNames, activeUpstream].filter(Boolean)));
+  let graphBranchNames = $derived(uniqueStrings([...localBranchNames, ...remoteBranchNames, activeUpstream].filter(Boolean)));
   let graphBranchNameSet = $derived(new Set(graphBranchNames));
 
+  function focusBranchNames(): string[] {
+    const focused = uniqueStrings([activeBranch, activeUpstream].filter((branch) => graphBranchNameSet.has(branch)));
+    if (focused.length > 0) return focused;
+    return localBranchNames[0] ? [localBranchNames[0]] : graphBranchNames.slice(0, 1);
+  }
+
+  function branchNamesForMode(): string[] {
+    if (branchVisibilityMode === "focus") return focusBranchNames();
+    if (branchVisibilityMode === "local") return localBranchNames;
+    if (branchVisibilityMode === "all") return graphBranchNames;
+    return graphBranchNames.filter((branch) => customVisibleBranches.has(branch));
+  }
+
+  let visibleGraphBranchNames = $derived(branchNamesForMode());
+  let visibleGraphBranchNameSet = $derived(new Set(visibleGraphBranchNames));
+
   function branchIsVisible(branch: string): boolean {
-    if (branch === activeUpstream && activeUpstream) {
-      return !activeBranch || !hiddenGraphBranches.has(activeBranch);
-    }
-    return !hiddenGraphBranches.has(branch);
-  }
-
-  function visibleBranchLabels(labels: string[]): string[] {
-    return labels.filter(branchIsVisible);
-  }
-
-  function commitHoverBranchLabels(commit: GitCommit, row: GraphRow | undefined): string[] {
-    const directBranches = graphBranchRefs(commit);
-    if (directBranches.length > 0) return directBranches;
-
-    const containingBranches = row?.branchLabels ?? [];
-    if (containingBranches.length <= 3) return containingBranches;
-    return [...containingBranches.slice(0, 3), `+${containingBranches.length - 3} more`];
+    return visibleGraphBranchNameSet.has(branch);
   }
 
   function commitHoverTitle(commit: GitCommit, row: GraphRow | undefined): string {
-    const directBranches = graphBranchRefs(commit);
+    const directBranches = graphBranchRefs(commit).filter(branchIsVisible);
     if (directBranches.length > 0) return `Branches: ${directBranches.join(", ")}`;
 
-    const containingBranches = row?.branchLabels ?? [];
+    const containingBranches = (row?.branchLabels ?? []).filter(branchIsVisible);
     if (containingBranches.length === 0) return commit.short_hash;
     return `Branches containing this commit: ${containingBranches.join(", ")}`;
   }
@@ -284,7 +313,7 @@
 
   function branchesAreVisible(branches: string[]): boolean {
     if (graphBranchNames.length === 0) return true;
-    return branches.some(branchIsVisible);
+    return branches.some((branch) => visibleGraphBranchNameSet.has(branch));
   }
 
   function rowGraphIsVisible(row: GraphRow | undefined): boolean {
@@ -361,20 +390,31 @@
   }
 
   function toggleGraphBranch(branch: string) {
-    const next = new Set(hiddenGraphBranches);
+    const next = branchVisibilityMode === "custom"
+      ? new Set(customVisibleBranches)
+      : new Set(visibleGraphBranchNames);
     if (next.has(branch)) next.delete(branch); else next.add(branch);
-    hiddenGraphBranches = next;
-    userAdjustedBranchFilter = true;
+    customVisibleBranches = next;
+    branchVisibilityMode = "custom";
   }
 
   function showAllGraphBranches() {
-    hiddenGraphBranches = new Set();
-    userAdjustedBranchFilter = true;
+    branchVisibilityMode = "all";
   }
 
   function hideAllGraphBranches() {
-    hiddenGraphBranches = new Set(localBranchNames);
-    userAdjustedBranchFilter = true;
+    customVisibleBranches = new Set();
+    branchVisibilityMode = "custom";
+  }
+
+  function showFocusGraphBranches() {
+    branchVisibilityMode = "focus";
+  }
+
+  function changeBranchVisibilityMode(event: Event) {
+    const value = (event.currentTarget as HTMLSelectElement).value as BranchVisibilityMode;
+    branchVisibilityMode = value;
+    if (value === "custom") openBranchDialog();
   }
 
   function openBranchDialog() {
@@ -391,6 +431,10 @@
     }
   }
 
+  function toggleCommitRefs(commit: GitCommit) {
+    expandedRefsCommitHash = expandedRefsCommitHash === commit.hash ? "" : commit.hash;
+  }
+
   function openCommitActionMenu(event: MouseEvent, commit: GitCommit) {
     event.preventDefault();
     event.stopPropagation();
@@ -464,6 +508,7 @@
   function handleWindowKeydown(event: KeyboardEvent) {
     if (event.key !== "Escape") return;
     closeCommitContextMenu();
+    expandedRefsCommitHash = "";
     handleBranchDialogKeydown(event);
   }
 
@@ -491,22 +536,138 @@
     return labels;
   }
 
-  function visibleRefs(commit: GitCommit): string[] {
-    return commit.refs.filter((ref) => !localBranchNameSet.has(refLabel(ref)));
-  }
-
-  function refClass(ref: string): string {
-    if (ref.startsWith("HEAD")) return "head";
-    if (ref.startsWith("tag:")) return "tag";
-    if (localBranchNameSet.has(refLabel(ref))) return "branch";
-    if (ref.includes("/")) return "remote";
-    return "branch";
-  }
-
   function refLabel(ref: string): string {
     return ref.replace(/^HEAD ->\s*/, "").replace(/^tag:\s*/, "");
   }
 
+  function isSymbolicRemoteHead(ref: string): boolean {
+    if (ref.startsWith("HEAD ->") || ref.startsWith("tag:")) return false;
+    const label = refLabel(ref);
+    return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
+  }
+
+  function branchNameWithoutRemote(branch: string): string {
+    const slash = branch.indexOf("/");
+    return slash === -1 ? branch : branch.slice(slash + 1);
+  }
+
+  function remoteName(branch: string): string {
+    return branch.split("/", 1)[0] ?? branch;
+  }
+
+  function matchingRemoteBranch(local: string, remoteBranches: string[]): string {
+    if (local === activeBranch && activeUpstream && remoteBranches.includes(activeUpstream)) {
+      return activeUpstream;
+    }
+    return remoteBranches.find((remote) => branchNameWithoutRemote(remote) === local) ?? "";
+  }
+
+  function compareBranchDecorations(left: CommitBranchDecoration, right: CommitBranchDecoration): number {
+    const priority = (item: CommitBranchDecoration) => {
+      if (item.label === activeBranch) return 0;
+      if (item.kind === "head") return 1;
+      if (item.kind === "local") return 2;
+      if (item.label === activeUpstream) return 3;
+      return 4;
+    };
+    return priority(left) - priority(right) || left.label.localeCompare(right.label, undefined, { numeric: true });
+  }
+
+  function commitRefSummary(commit: GitCommit): CommitRefSummary {
+    const local = new Set<string>();
+    const remote = new Set<string>();
+    const tags = new Set<string>();
+    const other = new Set<string>();
+    let detachedHead = false;
+
+    for (const ref of commit.refs) {
+      if (isSymbolicRemoteHead(ref)) continue;
+      const label = refLabel(ref);
+      if (!label) continue;
+      if (ref.startsWith("tag:")) {
+        tags.add(label);
+      } else if (localBranchNameSet.has(label)) {
+        local.add(label);
+      } else if (remoteBranchNameSet.has(label) || label === activeUpstream) {
+        remote.add(label);
+      } else if (label === "HEAD") {
+        detachedHead = true;
+      } else {
+        other.add(label);
+      }
+    }
+
+    const remainingRemote = [...remote];
+    const branches: CommitBranchDecoration[] = [...local].map((label) => {
+      const trackedRemote = matchingRemoteBranch(label, remainingRemote);
+      if (trackedRemote) remainingRemote.splice(remainingRemote.indexOf(trackedRemote), 1);
+      return {
+        label,
+        kind: "local",
+        current: label === activeBranch,
+        trackedRemote,
+        representedBranches: trackedRemote ? [label, trackedRemote] : [label],
+      };
+    });
+
+    if (detachedHead) {
+      branches.push({
+        label: "HEAD",
+        kind: "head",
+        current: true,
+        trackedRemote: "",
+        representedBranches: [],
+      });
+    }
+
+    branches.push(...remainingRemote.map((label) => ({
+      label,
+      kind: "remote" as const,
+      current: false,
+      trackedRemote: "",
+      representedBranches: [label],
+    })));
+
+    const sortedBranches = branches.sort(compareBranchDecorations);
+    const primaryBranch = sortedBranches.find(
+      (branch) => branch.kind === "head" || branch.representedBranches.some(branchIsVisible),
+    ) ?? null;
+    const sortedTags = [...tags].sort((left, right) => left.localeCompare(right, undefined, { numeric: true }));
+    const sortedOther = [...other].sort((left, right) => left.localeCompare(right));
+    const primaryTag = sortedTags[0] ?? "";
+
+    return {
+      branches: sortedBranches,
+      tags: sortedTags,
+      other: sortedOther,
+      primaryBranch,
+      primaryTag,
+      overflowCount:
+        Math.max(0, sortedBranches.length - (primaryBranch ? 1 : 0))
+        + Math.max(0, sortedTags.length - (primaryTag ? 1 : 0))
+        + sortedOther.length,
+    };
+  }
+
+  function branchStatusLabel(branch: CommitBranchDecoration): string {
+    if (branch.trackedRemote) return `✓ ${remoteName(branch.trackedRemote)}`;
+    if (branch.label === activeBranch) {
+      const parts = [];
+      if (activeAhead > 0) parts.push(`↑${activeAhead}`);
+      if (activeBehind > 0) parts.push(`↓${activeBehind}`);
+      return parts.join(" ");
+    }
+    if (branch.label === activeUpstream && activeBehind > 0) return `↓${activeBehind}`;
+    return "";
+  }
+
+  function branchDecorationTitle(branch: CommitBranchDecoration): string {
+    if (branch.trackedRemote) return `${branch.label} · up to date with ${branch.trackedRemote}`;
+    const status = branchStatusLabel(branch);
+    if (status) return `${branch.label} · ${status}`;
+    return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
+  }
+
   function formatCommitDate(value: string): string {
     const date = new Date(value);
     if (Number.isNaN(date.getTime())) return value;
@@ -514,11 +675,60 @@
   }
 
   $effect(() => {
-    const available = new Set(localBranchNames);
-    const nextHidden = new Set([...hiddenGraphBranches].filter((branch) => available.has(branch)));
-    if (nextHidden.size !== hiddenGraphBranches.size) {
-      hiddenGraphBranches = nextHidden;
+    const currentRepository = repositoryKey;
+    if (loadedVisibilityRepository === currentRepository) return;
+    loadedVisibilityRepository = currentRepository;
+    expandedRefsCommitHash = "";
+
+    if (!currentRepository) {
+      branchVisibilityMode = "focus";
+      customVisibleBranches = new Set();
+      return;
     }
+
+    try {
+      const stored = localStorage.getItem(`${GRAPH_VISIBILITY_STORAGE_PREFIX}${currentRepository}`);
+      if (!stored) {
+        branchVisibilityMode = "focus";
+        customVisibleBranches = new Set();
+        return;
+      }
+      const parsed = JSON.parse(stored) as { mode?: unknown; branches?: unknown };
+      const mode = parsed.mode;
+      branchVisibilityMode = mode === "focus" || mode === "local" || mode === "all" || mode === "custom"
+        ? mode
+        : "focus";
+      customVisibleBranches = new Set(
+        Array.isArray(parsed.branches)
+          ? parsed.branches.filter((branch): branch is string => typeof branch === "string")
+          : [],
+      );
+    } catch {
+      branchVisibilityMode = "focus";
+      customVisibleBranches = new Set();
+    }
+  });
+
+  $effect(() => {
+    const currentRepository = repositoryKey;
+    const mode = branchVisibilityMode;
+    const branches = [...customVisibleBranches];
+    if (!currentRepository || loadedVisibilityRepository !== currentRepository) return;
+    try {
+      localStorage.setItem(
+        `${GRAPH_VISIBILITY_STORAGE_PREFIX}${currentRepository}`,
+        JSON.stringify({ mode, branches }),
+      );
+    } catch {
+      // The graph still works if storage is unavailable.
+    }
+  });
+
+  $effect(() => {
+    if (graphBranchNames.length === 0 || customVisibleBranches.size === 0) return;
+    const available = new Set(graphBranchNames);
+    const next = new Set([...customVisibleBranches].filter((branch) => available.has(branch)));
+    if (next.size !== customVisibleBranches.size) customVisibleBranches = next;
   });
 
   $effect(() => {
@@ -530,36 +740,11 @@
     });
   });
 
-  $effect(() => {
-    const defaultBranch = activeBranch && localBranchNames.includes(activeBranch)
-      ? activeBranch
-      : (graphBranchNames[0] ?? "");
-    const defaultFilterKey = `${repositoryKey}::${defaultBranch}`;
-
-    if (!defaultBranch) {
-      if (lastDefaultFilterKey !== defaultFilterKey) {
-        hiddenGraphBranches = new Set();
-        userAdjustedBranchFilter = false;
-        lastDefaultFilterKey = defaultFilterKey;
-      }
-      return;
-    }
-
-    if (lastDefaultFilterKey !== defaultFilterKey) {
-      userAdjustedBranchFilter = false;
-      lastDefaultFilterKey = defaultFilterKey;
-    }
-
-    if (!userAdjustedBranchFilter) {
-      hiddenGraphBranches = new Set(localBranchNames.filter((branch) => branch !== defaultBranch));
-    }
-  });
-
   let branchMembership = $derived(branchMembershipByHash(commits));
   let visibleCommitEntries = $derived(visibleCommitEntriesForGraph(commits, branchMembership));
   let visibleCommits = $derived(visibleCommitEntries.map((entry) => entry.commit));
   let graphCommits = $derived(visibleCommitEntries.map((entry) => entry.graphCommit));
-  let visibleBranchCount = $derived(localBranchNames.filter(branchIsVisible).length);
+  let visibleBranchCount = $derived(visibleGraphBranchNames.length);
   let graph = $derived(computeGraph(graphCommits, branchMembership));
   let graphRows = $derived(graph.rows);
   let graphWidth = $derived(Math.max(Math.max(graph.columns, 1) * GRAPH_LANE + 18, 42));
@@ -573,17 +758,31 @@
       <span class="eyebrow">History</span>
       <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Commits</h2>
     </div>
-    {#if localBranchNames.length > 0}
+    {#if graphBranchNames.length > 0}
       <div class="section-head-actions">
+        <label class="graph-visibility-select" title="Choose which branches are shown in the graph">
+          <GitBranch size={13} aria-hidden="true" />
+          <span class="graph-visibility-label">Branches</span>
+          <select
+            aria-label="Branch visibility mode"
+            value={branchVisibilityMode}
+            onchange={changeBranchVisibilityMode}
+          >
+            <option value="focus">Focus</option>
+            <option value="local">Local</option>
+            <option value="all">All</option>
+            <option value="custom">Custom…</option>
+          </select>
+          <ChevronDown size={12} aria-hidden="true" />
+        </label>
         <button
           class="graph-branch-dialog-button"
           type="button"
           onclick={openBranchDialog}
-          title="Select branches shown in the graph"
+          title="Customize visible branches"
+          aria-label={`${visibleBranchCount} of ${graphBranchNames.length} branches visible. Customize branches.`}
         >
-          <GitBranch size={13} aria-hidden="true" />
-          Branches
-          <span>{visibleBranchCount}/{localBranchNames.length}</span>
+          <span>{visibleBranchCount}/{graphBranchNames.length}</span>
         </button>
       </div>
     {/if}
@@ -601,8 +800,7 @@
       {#each visibleCommitEntries as entry, rowIndex (entry.commit.hash)}
         {@const item = entry.commit}
         {@const row = graphRows[rowIndex]}
-        {@const hoverBranchRefs = commitHoverBranchLabels(item, row)}
-        {@const otherRefs = visibleRefs(item)}
+        {@const refSummary = commitRefSummary(item)}
         {@const rowSyncClass = syncClassForBranches(row?.branchLabels ?? [])}
         <article
           class="commit-row graph-row"
@@ -650,25 +848,102 @@
                 title={commitHoverTitle(item, row)}
                 style={`left:${graphColX(row.dotCol)}px; --dot-color:${row.dotColor}`}
               ></span>
-              {#if hoverBranchRefs.length > 0}
-                <div class="graph-hover-branches" style={`left:${graphColX(row.dotCol) + 13}px`}>
-                  {#each hoverBranchRefs as branch}
-                    <span
-                      class:remote={branch === activeUpstream}
-                      class:ahead={activeBranch === branch && rowSyncClass === "ahead"}
-                      class:behind={activeUpstream === branch && rowSyncClass === "behind"}
-                      title={branch}
-                    >
-                      <GitBranch size={10} aria-hidden="true" />
-                      {branch}
-                    </span>
-                  {/each}
-                </div>
-              {/if}
             {/if}
           </div>
 
           <div class="commit-body">
+            {#if refSummary.primaryBranch || refSummary.primaryTag || refSummary.overflowCount > 0}
+              <div class="commit-ref-area" style={`--ref-lane-color:${row?.dotColor ?? GRAPH_COLORS[0]}`}>
+                <div class="commit-ref-strip" aria-label="Commit references">
+                  {#if refSummary.primaryBranch}
+                    <span
+                      class="compact-ref-chip branch"
+                      class:current={refSummary.primaryBranch.current}
+                      class:remote={refSummary.primaryBranch.kind === "remote"}
+                      title={branchDecorationTitle(refSummary.primaryBranch)}
+                    >
+                      <i aria-hidden="true"></i>
+                      <span>{refSummary.primaryBranch.label}</span>
+                      {#if branchStatusLabel(refSummary.primaryBranch)}
+                        <small class:up-to-date={Boolean(refSummary.primaryBranch.trackedRemote)}>
+                          {#if refSummary.primaryBranch.trackedRemote}<Check size={9} aria-hidden="true" />{/if}
+                          {branchStatusLabel(refSummary.primaryBranch).replace(/^✓\s*/, "")}
+                        </small>
+                      {/if}
+                    </span>
+                  {/if}
+                  {#if refSummary.primaryTag}
+                    <span class="compact-ref-chip tag" title={`Tag ${refSummary.primaryTag}`}>
+                      <Tag size={10} aria-hidden="true" />
+                      <span>{refSummary.primaryTag}</span>
+                    </span>
+                  {/if}
+                  {#if refSummary.overflowCount > 0}
+                    <button
+                      class="compact-ref-overflow"
+                      type="button"
+                      onclick={() => toggleCommitRefs(item)}
+                      aria-expanded={expandedRefsCommitHash === item.hash}
+                      aria-controls={`commit-refs-${item.hash}`}
+                      title={`Show ${refSummary.overflowCount} more ${refSummary.overflowCount === 1 ? "reference" : "references"}`}
+                    >
+                      +{refSummary.overflowCount}
+                    </button>
+                  {/if}
+                </div>
+
+                {#if refSummary.overflowCount > 0 && expandedRefsCommitHash === item.hash}
+                  <div class="commit-ref-details" id={`commit-refs-${item.hash}`}>
+                    <strong>References on this commit</strong>
+                    {#if refSummary.branches.some((branch) => branch.kind !== "remote")}
+                      <section>
+                        <span>Local</span>
+                        <div>
+                          {#each refSummary.branches.filter((branch) => branch.kind !== "remote") as branch}
+                            <span class="commit-ref-detail-item local" title={branchDecorationTitle(branch)}>
+                              <i aria-hidden="true"></i>{branch.label}
+                              {#if branch.current}<small>Current</small>{/if}
+                              {#if branch.trackedRemote}<small>{branch.trackedRemote}</small>{/if}
+                            </span>
+                          {/each}
+                        </div>
+                      </section>
+                    {/if}
+                    {#if refSummary.branches.some((branch) => branch.kind === "remote")}
+                      <section>
+                        <span>Remote</span>
+                        <div>
+                          {#each refSummary.branches.filter((branch) => branch.kind === "remote") as branch}
+                            <span class="commit-ref-detail-item remote"><i aria-hidden="true"></i>{branch.label}</span>
+                          {/each}
+                        </div>
+                      </section>
+                    {/if}
+                    {#if refSummary.tags.length > 0}
+                      <section>
+                        <span>Tags</span>
+                        <div>
+                          {#each refSummary.tags as tag}
+                            <span class="commit-ref-detail-item tag"><Tag size={10} aria-hidden="true" />{tag}</span>
+                          {/each}
+                        </div>
+                      </section>
+                    {/if}
+                    {#if refSummary.other.length > 0}
+                      <section>
+                        <span>Other</span>
+                        <div>
+                          {#each refSummary.other as ref}
+                            <span class="commit-ref-detail-item">{ref}</span>
+                          {/each}
+                        </div>
+                      </section>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
             <div class="commit-card-head">
               <span class="commit-avatar">
                 {authorInitials(item.author_name)}
@@ -690,14 +965,6 @@
               </div>
             </div>
 
-            {#if otherRefs.length > 0}
-              <div class="ref-list" aria-label="Commit refs">
-                {#each otherRefs as ref}
-                  <span class={`ref-chip ${refClass(ref)}`}>{refLabel(ref)}</span>
-                {/each}
-              </div>
-            {/if}
-
             {#if item.files.length > 0}
               <div class="commit-files">
                 <button
@@ -837,25 +1104,43 @@
       </header>
 
       <div class="branch-filter-summary">
-        <span>{visibleBranchCount} of {localBranchNames.length} branches selected</span>
+        <span>{visibleBranchCount} of {graphBranchNames.length} branches selected</span>
         <div class="branch-filter-actions">
-          <button type="button" onclick={showAllGraphBranches} disabled={visibleBranchCount === localBranchNames.length}>Show all</button>
+          <button type="button" onclick={showFocusGraphBranches} disabled={branchVisibilityMode === "focus"}>Focus</button>
+          <button type="button" onclick={showAllGraphBranches} disabled={visibleBranchCount === graphBranchNames.length}>Show all</button>
           <button type="button" onclick={hideAllGraphBranches} disabled={visibleBranchCount === 0}>Hide all</button>
         </div>
       </div>
 
       <div class="branch-filter-dialog-list">
-        {#each localBranchNames as branch}
-          <label class:muted={!branchIsVisible(branch)} class="branch-filter-option" title={branch}>
-            <input
-              type="checkbox"
-              checked={branchIsVisible(branch)}
-              onchange={() => toggleGraphBranch(branch)}
-            />
-            <GitBranch size={14} aria-hidden="true" />
-            <span>{branch}</span>
-          </label>
-        {/each}
+        {#if localBranchNames.length > 0}
+          <span class="branch-filter-group-label">Local</span>
+          {#each localBranchNames as branch}
+            <label class:muted={!branchIsVisible(branch)} class="branch-filter-option" title={branch}>
+              <input
+                type="checkbox"
+                checked={branchIsVisible(branch)}
+                onchange={() => toggleGraphBranch(branch)}
+              />
+              <GitBranch size={14} aria-hidden="true" />
+              <span>{branch}</span>
+            </label>
+          {/each}
+        {/if}
+        {#if remoteBranchNames.length > 0}
+          <span class="branch-filter-group-label">Remote</span>
+          {#each remoteBranchNames as branch}
+            <label class:muted={!branchIsVisible(branch)} class="branch-filter-option remote" title={branch}>
+              <input
+                type="checkbox"
+                checked={branchIsVisible(branch)}
+                onchange={() => toggleGraphBranch(branch)}
+              />
+              <GitBranch size={14} aria-hidden="true" />
+              <span>{branch}</span>
+            </label>
+          {/each}
+        {/if}
       </div>
     </div>
   </div>