From cc0f1c076f675c2c83aa9c79c000b76caeb2dc92 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <Christoph.Brandau@janus-engineering.com>
Date: Thu, 13 Aug 2026 20:06:27 +0200
Subject: [PATCH] refactor(ui): simplify branch status display and adjust
 layout

The changes simplify how branch status is shown in HistoryPanel.
The remoteName helper and the check icon were removed.
Status is composed inline with the label for local and remote branches.
CSS tweaks wrap content and adjust widths for better responsiveness.

- Remove remoteName helper and Check icon from HistoryPanel
- Inline status text for local/remote branches and avoid icons
- Improve graph layout: wrap refs and constrain widths on hover
---
 src/app.css                            | 28 ++++++++++++++++++++++++--
 src/lib/components/HistoryPanel.svelte | 25 ++++++++++-------------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6216f74..697edef 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2559,8 +2559,10 @@
   }
   .branch-ref-cluster {
     display: inline-flex;
+    flex: 0 1 auto;
     align-items: center;
     min-width: 0;
+    max-width: 100%;
     margin-left: -10px;
   }
   .compact-ref-chip {
@@ -2664,7 +2666,8 @@
   .graph-row:hover .compact-ref-chip.branch,
   .graph-row.selected .compact-ref-chip.branch,
   .graph-row:focus-within .compact-ref-chip.branch {
-    max-width: min(62%, 260px);
+    flex: 1 1 auto;
+    max-width: 100%;
     padding-right: 8px;
     border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
     background:
@@ -2673,6 +2676,18 @@
       inset 2px 0 0 var(--ref-lane-color, #69a7ff),
       0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
   }
+  .graph-row:hover .commit-ref-strip,
+  .graph-row.selected .commit-ref-strip,
+  .graph-row:focus-within .commit-ref-strip {
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+  .graph-row:hover .branch-ref-cluster,
+  .graph-row.selected .branch-ref-cluster,
+  .graph-row:focus-within .branch-ref-cluster {
+    flex: 0 0 auto;
+    max-width: min(100%, 320px);
+  }
   .graph-row:hover .compact-ref-branch-icon,
   .graph-row.selected .compact-ref-branch-icon,
   .graph-row:focus-within .compact-ref-branch-icon {
@@ -3069,8 +3084,17 @@
   }
 
   @media (hover: none) {
+    .commit-ref-strip {
+      flex-wrap: wrap;
+      row-gap: 4px;
+    }
+    .branch-ref-cluster {
+      flex: 0 0 auto;
+      max-width: min(100%, 320px);
+    }
     .compact-ref-chip.branch {
-      max-width: min(62%, 260px);
+      flex: 1 1 auto;
+      max-width: 100%;
       padding-right: 8px;
     }
     .compact-ref-chip.branch > span,
diff --git a/src/lib/components/HistoryPanel.svelte b/src/lib/components/HistoryPanel.svelte
index 00fe798..28e041e 100644
--- a/src/lib/components/HistoryPanel.svelte
+++ b/src/lib/components/HistoryPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
+  import { Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
   import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
 
   interface GraphSegment {
@@ -544,10 +544,6 @@
     return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
   }
 
-  function remoteName(branch: string): string {
-    return branch.split("/", 1)[0] ?? branch;
-  }
-
   function configuredUpstreamForBranch(local: string): string {
     return localBranchUpstreams[local] ?? (local === activeBranch ? activeUpstream : "");
   }
@@ -649,7 +645,6 @@
   }
 
   function branchStatusLabel(branch: CommitBranchDecoration): string {
-    if (branch.trackedRemote) return `✓ ${remoteName(branch.trackedRemote)}`;
     if (branch.label === activeBranch) {
       const parts = [];
       if (activeAhead > 0) parts.push(`↑${activeAhead}`);
@@ -661,9 +656,14 @@
   }
 
   function branchDecorationTitle(branch: CommitBranchDecoration): string {
-    if (branch.localOnly) return `${branch.label} · Local only — not published yet`;
-    if (branch.trackedRemote) return `${branch.label} · up to date with ${branch.trackedRemote}`;
+    if (branch.localOnly) {
+      const status = branchStatusLabel(branch);
+      return `${branch.label} · Local only — not published yet${status ? ` · ${status}` : ""}`;
+    }
     const status = branchStatusLabel(branch);
+    if (branch.trackedRemote) {
+      return `${branch.label} · Tracks ${branch.trackedRemote}${status ? ` · ${status}` : ""}`;
+    }
     if (status) return `${branch.label} · ${status}`;
     return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
   }
@@ -865,16 +865,13 @@
                       >
                         <GitBranch class="compact-ref-branch-icon" size={10} aria-hidden="true" />
                         <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 !refSummary.primaryBranch.localOnly && branchStatusLabel(refSummary.primaryBranch)}
+                          <small>{branchStatusLabel(refSummary.primaryBranch)}</small>
                         {/if}
                       </span>
                       {#if refSummary.primaryBranch.localOnly}
                         <span class="compact-ref-local-marker" title="This branch exists only locally and has not been published yet">
-                          <CloudOff size={9} aria-hidden="true" />LOCAL
+                          LOCAL
                         </span>
                       {/if}
                     </span>