From e89fe043f7361da7e7c2c4ba19c656dc8b0e4584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Fri, 17 Apr 2026 20:13:56 -0400
Subject: [PATCH] refactor(providers): split displayHint from status color +
 normalize type scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two providers-panel audit items landed together because they both
come down to "the eye should have to track one piece of status info
in one place":

- ProviderRow displayHint (e.g. "sk-ant-...abcd", "claude.pro@gmail.com",
  "AWS profile: prod") was color-coded by credential status. That made
  the hint itself read as green/amber/red — e.g. an active connection
  would render its hint in success green, which looked like the hint
  was announcing its own success. The dot on the left already carries
  the status signal; the hint should just identify which credential we
  are looking at.

  Split the second line so the hint is always muted-foreground. When
  status is anything other than `active` or `not_configured`, we
  append a colored status label after a separator ("· Expired") so
  the hint stays readable while the anomaly still surfaces.

- Type scale cleanup: the group header and count used `text-[10px]
  tracking-[0.12em]` which was the smallest text on the page. Bumped
  to `text-[11px] tracking-[0.08em]` to match the section-header
  rhythm established in the agent Edit form (commit 9981ee3), and
  added `tabular-nums` to the count so alignment is stable across
  groups of different sizes. Auth-kind chip (OAUTH / API KEY / AZURE /
  AWS / GCP) likewise promoted from 10px to 11px with the same tracking.

No behavioral change — these are readability fixes only. Covers
J-P2 / J-P3 / J-P5.
---
 .../components/settings/providers/ProviderRow.tsx     | 11 ++++++++---
 .../components/settings/providers/ProvidersPanel.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/settings/providers/ProviderRow.tsx b/src/renderer/components/settings/providers/ProviderRow.tsx
index 88c66bc9..fa8cd697 100644
--- a/src/renderer/components/settings/providers/ProviderRow.tsx
+++ b/src/renderer/components/settings/providers/ProviderRow.tsx
@@ -136,12 +136,17 @@ export function ProviderRow({ entry, credential }: Props) {
             <div className="truncate text-[13px] font-semibold text-foreground">
               {entry.label}
             </div>
-            <div className="text-[10px] uppercase tracking-[0.1em] text-muted-foreground/70">
+            <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground/80">
               {kindLabel(entry.auth.type, t)}
             </div>
           </div>
-          <div className={`truncate text-[11px] ${statusStyle.text}`}>
-            {hasCredential ? (credential.displayHint ?? statusLabelText) : statusLabelText}
+          <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+            <span className="truncate">
+              {hasCredential && credential.displayHint ? credential.displayHint : statusLabelText}
+            </span>
+            {hasCredential && status !== "active" ? (
+              <span className={`shrink-0 font-medium ${statusStyle.text}`}>· {statusLabelText}</span>
+            ) : null}
           </div>
         </div>
         <div className="flex flex-shrink-0 items-center gap-1">
diff --git a/src/renderer/components/settings/providers/ProvidersPanel.tsx b/src/renderer/components/settings/providers/ProvidersPanel.tsx
index def437ec..e9400c12 100644
--- a/src/renderer/components/settings/providers/ProvidersPanel.tsx
+++ b/src/renderer/components/settings/providers/ProvidersPanel.tsx
@@ -150,10 +150,10 @@ export function ProvidersPanel({ catalog }: ProvidersPanelProps = {}) {
           {grouped.map((group) => (
             <div key={group.id}>
               <div className="mb-2 flex items-baseline justify-between">
-                <h3 className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                <h3 className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
                   {group.label}
                 </h3>
-                <span className="text-[10px] text-muted-foreground/70">
+                <span className="text-[11px] text-muted-foreground/70 tabular-nums">
                   {group.items.length}
                 </span>
               </div>