From e2733f896c5a9daf3952307e2b0b72c954ce2f35 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 14 Jul 2026 14:54:15 -0700
Subject: [PATCH] fix(status-bar): single-line sign-in row + review dedup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-out roster rows now read as one line (name · "not signed in" ·
right-aligned Sign in) instead of a floating button over an orphaned
second line. Review follow-ups: the non-submenu ProviderDetailsMenu
branch reuses the extracted panelBody, and the icon-only letter badge is
one shared component so its has-data dot condition can't drift.
---
 .../src/components/status-bar/StatusBar.tsx   | 55 +++++++------------
 .../status-bar/UsageRosterPanel.tsx           | 39 +++++++------
 2 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/renderer/src/components/status-bar/StatusBar.tsx b/src/renderer/src/components/status-bar/StatusBar.tsx
index e93bd9e6bbc..55c5eb30f87 100644
--- a/src/renderer/src/components/status-bar/StatusBar.tsx
+++ b/src/renderer/src/components/status-bar/StatusBar.tsx
@@ -1107,7 +1107,21 @@ function WindowLabel({
   )
 }
 
-// Single-letter provider badge for the icon-only (narrow) status bar.
+// Single-letter provider badge for the icon-only (narrow) status bar. Shared by
+// the roster trigger and ProviderDetailsMenu so the dot's has-data condition
+// and markup can't drift between the two.
+function ProviderLetterBadge({ p }: { p: ProviderRateLimits }): React.JSX.Element {
+  const hasData = Boolean(p.session || p.weekly || p.fableWeekly || p.monthly || p.buckets?.length)
+  return (
+    <span className="inline-flex items-center gap-1 text-muted-foreground">
+      <span
+        className={`inline-block h-2 w-2 rounded-full ${hasData ? 'bg-muted-foreground/60' : 'bg-muted-foreground/30'}`}
+      />
+      {getProviderLetter(p.provider)}
+    </span>
+  )
+}
+
 function getProviderLetter(provider: ProviderRateLimits['provider']): string {
   switch (provider) {
     case 'claude':
@@ -1822,6 +1836,7 @@ export function ProviderDetailsMenu({
     <>
       {topContent}
       <div className="p-2">
+        {/* Why: provider-specific action sections may render richer reset-credit UI. */}
         <ProviderPanel
           p={provider}
           showResetCredits={!hidePanelResetCredits}
@@ -1862,12 +1877,7 @@ export function ProviderDetailsMenu({
           aria-label={ariaLabel}
         >
           {iconOnly ? (
-            <span className="inline-flex items-center gap-1">
-              <span
-                className={`inline-block h-2 w-2 rounded-full ${provider.session || provider.weekly || provider.fableWeekly ? 'bg-muted-foreground/60' : 'bg-muted-foreground/30'}`}
-              />
-              <span className="text-muted-foreground">{getProviderLetter(provider.provider)}</span>
-            </span>
+            <ProviderLetterBadge p={provider} />
           ) : (
             <ProviderSegment p={provider} compact={compact} display={usagePercentageDisplay} />
           )}
@@ -1891,21 +1901,7 @@ export function ProviderDetailsMenu({
           event.preventDefault()
         }}
       >
-        {topContent}
-        <div className="p-2">
-          {/* Why: provider-specific action sections may render richer reset-credit UI. */}
-          <ProviderPanel
-            p={provider}
-            showResetCredits={!hidePanelResetCredits}
-            usagePercentageDisplay={usagePercentageDisplay}
-          />
-        </div>
-        {children ? (
-          <>
-            <DropdownMenuSeparator />
-            {children}
-          </>
-        ) : null}
+        {panelBody}
       </DropdownMenuContent>
     </DropdownMenu>
   )
@@ -2201,19 +2197,8 @@ function StatusBarInner({ floatingTerminalOpen }: StatusBarProps): React.JSX.Ele
                   {rosterProviders.map((p) =>
                     iconOnly ? (
                       // Narrow status bar: fall back to main's compact letter badge.
-                      <span
-                        key={p.provider}
-                        className="inline-flex items-center gap-1 text-muted-foreground"
-                        title={getProviderDisplayName(p.provider)}
-                      >
-                        <span
-                          className={`inline-block h-2 w-2 rounded-full ${
-                            p.session || p.weekly || p.fableWeekly || p.monthly || p.buckets?.length
-                              ? 'bg-muted-foreground/60'
-                              : 'bg-muted-foreground/30'
-                          }`}
-                        />
-                        {getProviderLetter(p.provider)}
+                      <span key={p.provider} title={getProviderDisplayName(p.provider)}>
+                        <ProviderLetterBadge p={p} />
                       </span>
                     ) : (
                       <ProviderSegment
diff --git a/src/renderer/src/components/status-bar/UsageRosterPanel.tsx b/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
index f1087785b78..8e01e4238b0 100644
--- a/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
+++ b/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
@@ -79,27 +79,30 @@ export function UsageRow({
           {name}
           {plan ? <span className="font-normal text-muted-foreground"> · {plan}</span> : null}
         </span>
-        {!signedOut && reset ? (
+        {signedOut ? (
+          <>
+            <span className="min-w-0 truncate text-[11px] text-muted-foreground">
+              {translate(
+                'auto.components.status.bar.UsageRosterPanel.notSignedIn',
+                'not signed in'
+              )}
+            </span>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                onSignIn(p.provider)
+              }}
+              className="ml-auto shrink-0 rounded-md border border-border bg-secondary px-2.5 py-0.5 text-xs text-foreground hover:bg-accent"
+            >
+              {translate('auto.components.status.bar.StatusBar.c35af53b73', 'Sign in')}
+            </button>
+          </>
+        ) : reset ? (
           <span className="shrink-0 text-[11px] text-muted-foreground">{reset}</span>
         ) : null}
-        {signedOut ? (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              onSignIn(p.provider)
-            }}
-            className="ml-auto shrink-0 rounded-md border border-border bg-secondary px-2.5 py-0.5 text-xs text-foreground hover:bg-accent"
-          >
-            {translate('auto.components.status.bar.StatusBar.c35af53b73', 'Sign in')}
-          </button>
-        ) : null}
       </div>
-      {signedOut ? (
-        <div className="pl-[30px] text-[11px] text-muted-foreground">
-          {translate('auto.components.status.bar.UsageRosterPanel.notSignedIn', 'not signed in')}
-        </div>
-      ) : (
+      {signedOut ? null : (
         <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1 pl-[30px]">
           {sections.map((s) => {
             const used = clampUsedPercent(s.window.usedPercent)