From dcce776e3496b3d76ef3043b15bcd25aa5cb8129 Mon Sep 17 00:00:00 2001
From: hanafish <1106510024@qq.com>
Date: Tue, 4 Aug 2026 13:03:04 +0800
Subject: [PATCH] refactor(status-bar): unify typography roles

---
 .../StatusBarTypography.md                    | 52 +++++++++++++++++
 .../DiffStatsBadge.typography.test.ts         | 34 +++++++++++
 .../__tests__/diffStatsBadgeHelpers.test.ts   | 23 ++++++++
 .../DiffStatsBadge/diffStatsBadgeHelpers.ts   | 13 +++++
 src/components/DiffStatsBadge/index.tsx       | 14 +++--
 .../shared/StatusBar/BrowserStatusBar.tsx     | 15 ++++-
 .../shared/StatusBar/CiStatusMenu.tsx         |  6 +-
 .../shared/StatusBar/EditorStatusBar.tsx      | 56 +++++++++++--------
 .../shared/StatusBar/GitSyncStatusMenu.tsx    | 30 ++++++----
 .../shared/StatusBar/PortsStatusMenu.tsx      |  6 +-
 .../shared/StatusBar/ProjectStatusBar.tsx     |  5 +-
 .../StatusBar/ProjectSyncStatusWidget.tsx     | 12 ++--
 .../shared/StatusBar/StatusBarBase.tsx        | 51 ++++++++++++++++-
 .../StatusBarBase.typography.test.ts          | 51 +++++++++++++++++
 .../WorkStation/shared/StatusBar/index.ts     |  4 +-
 .../shared/StatusBar/statusBarTokens.ts       | 30 ++++++++--
 16 files changed, 340 insertions(+), 62 deletions(-)
 create mode 100644 docs/frontend-ui-audit-2026-08-03/StatusBarTypography.md
 create mode 100644 src/components/DiffStatsBadge/__tests__/DiffStatsBadge.typography.test.ts
 create mode 100644 src/modules/WorkStation/shared/StatusBar/__tests__/StatusBarBase.typography.test.ts

diff --git a/docs/frontend-ui-audit-2026-08-03/StatusBarTypography.md b/docs/frontend-ui-audit-2026-08-03/StatusBarTypography.md
new file mode 100644
index 000000000..6008e0910
--- /dev/null
+++ b/docs/frontend-ui-audit-2026-08-03/StatusBarTypography.md
@@ -0,0 +1,52 @@
+# Frontend UI Audit — StatusBarTypography
+
+**Files:** `src/modules/WorkStation/shared/StatusBar/*.tsx`, `src/modules/WorkStation/shared/StatusBar/statusBarTokens.ts`, `src/components/DiffStatsBadge/index.tsx`
+**Date:** 2026-08-03
+**Auditor:** Codex
+
+## D1 — Raw HTML vs Design System
+
+| Line                                  | Element                              | Verdict          | Reason                                                                                                                                                                       | Suggested change |
+| ------------------------------------- | ------------------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `StatusBarBase.tsx:126`               | `<button>` inside `StatusBarButton`  | keep with reason | This is the status-bar design-system primitive itself; it owns status-bar sizing, variants, disabled state, tooltip forwarding, and accessible naming.                       | —                |
+| `GitSyncStatusMenu.tsx:241,266,293`   | Git action menu `<button>` rows      | keep with reason | Rows use shared dropdown tokens, `role="menuitem"`, visible labels, and menu-specific disabled behavior; the general Button component does not cover this menu-row contract. | —                |
+| `PortsStatusMenu.tsx:118,130,143,371` | Port action/menu `<button>` controls | keep with reason | These are compact menu-row actions with distinct copy/open/stop behavior and established dropdown styling; each has a visible or explicit accessible name.                   | —                |
+| `PortsStatusMenu.tsx:312`             | Port filter `<input>`                | keep with reason | This is embedded in the shared dropdown search container and uses the dropdown search token contract; replacing it independently would break the compact menu composition.   | —                |
+| `CiStatusMenu.tsx:158,332,341`        | CI menu action `<button>` controls   | keep with reason | The controls are menu-local icon/action rows with accessible labels and shared dropdown styling.                                                                             | —                |
+
+## D2 — Arbitrary Tailwind Value vs Token
+
+| Line                       | Value                                  | Verdict                  | Reason                                                                                                                                                                                  | Suggested change                                                                                           |
+| -------------------------- | -------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `StatusBarRenderer.tsx:28` | `bg-[var(--cm-editor-background,...)]` | fix candidate (deferred) | Folder-wide sweep found a project-owned editor background variable outside the typography change. It should not be changed site-by-site in this single-responsibility typography patch. | Map the project-owned variable in Tailwind or fold it into the matching surface token in a separate sweep. |
+
+## D3 — Hardcoded Sizes / Colors
+
+| Line                                            | Value                           | Verdict                  | Reason                                                                                                                                                                           | Suggested change                                                      |
+| ----------------------------------------------- | ------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `statusBarTokens.ts:20`                         | status-bar 11px type scale      | fix (completed)          | The previous local `text-[11px]` duplicated the global workstation secondary typography role.                                                                                    | `STATUS_BAR_TYPOGRAPHY.root` now derives from `TYPOGRAPHY.secondary`. |
+| `statusBarTokens.ts:71`                         | extension item 11px/line-height | fix (completed)          | Extension items repeated the base bar typography literal.                                                                                                                        | Extension items now compose `STATUS_BAR_TYPOGRAPHY.root`.             |
+| `EditorStatusBar.tsx:620`                       | language-service panel 13px     | fix (completed)          | The status-bar-owned dropdown repeated the existing dropdown item font size.                                                                                                     | Reuse `DROPDOWN_ITEM.fontSizeClass`.                                  |
+| `BrowserStatusBar.tsx:118`                      | `max-w-[240px]`                 | fix candidate (deferred) | `max-w-60` is an equivalent spacing token, but width cleanup is unrelated to the requested typography lifecycle.                                                                 | Replace in a focused status-bar sizing cleanup.                       |
+| `EditorStatusBar.tsx:474`                       | `max-w-[200px]`                 | keep with reason         | The truncation cap has no exact standard Tailwind spacing equivalent; 192px or 208px would change the commit-author allocation.                                                  | —                                                                     |
+| `DiffStatsBadge/diffStatsBadgeHelpers.ts:16-18` | named 11/12/13px scale          | keep with reason         | Pixel values are isolated behind the component's `size` API and intentionally match the established diff-viewer type scale. Callers do not repeat arbitrary font-size utilities. | —                                                                     |
+
+## D4 — Accessibility
+
+| Line                      | Element                    | Verdict          | Reason                                                                                                                                             | Suggested change |
+| ------------------------- | -------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `StatusBarBase.tsx:126`   | `StatusBarButton`          | keep with reason | Visible children provide a name; icon-only uses supply `ariaLabel` or `title`, which is forwarded to `aria-label`.                                 | —                |
+| `EditorStatusBar.tsx:608` | click-away overlay `<div>` | keep with reason | The overlay is a pointer-dismiss backdrop, not the primary interactive control; the language-services trigger remains a keyboard-focusable button. | —                |
+| Git/ports/CI menus        | menu controls              | keep with reason | Menu action buttons have visible labels or explicit accessible names and retain native keyboard semantics.                                         | —                |
+
+## D5 — Visual Patterns Observed
+
+- Pattern: 11px status-bar text with normal/medium roles and tabular numeric values — previously repeated across Editor, Browser, Project, Git Sync, CI, and Ports status surfaces; now abstracted by `STATUS_BAR_TYPOGRAPHY`, `StatusBarLabel`, and `StatusBarText` semantic props.
+- Pattern: normal-weight diff statistics in the status bar — now expressed through the shared `DiffStatsBadge weight="normal"` API while every existing consumer keeps the backwards-compatible medium default.
+
+## Summary
+
+- 4 fixes completed
+- 8 kept with documented reason
+- 2 deferred fix candidates outside the typography scope
+- 2 repeated typography patterns abstracted
diff --git a/src/components/DiffStatsBadge/__tests__/DiffStatsBadge.typography.test.ts b/src/components/DiffStatsBadge/__tests__/DiffStatsBadge.typography.test.ts
new file mode 100644
index 000000000..9040ec00b
--- /dev/null
+++ b/src/components/DiffStatsBadge/__tests__/DiffStatsBadge.typography.test.ts
@@ -0,0 +1,34 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import DiffStatsBadge from "..";
+
+describe("DiffStatsBadge typography", () => {
+  it("preserves medium weight by default", () => {
+    const markup = renderToStaticMarkup(
+      createElement(DiffStatsBadge, { additions: 12, deletions: 3 })
+    );
+
+    expect(markup).toContain("font-medium");
+    expect(markup).not.toContain("font-normal");
+  });
+
+  it("supports a semantic normal-weight status-bar variant", () => {
+    const markup = renderToStaticMarkup(
+      createElement(DiffStatsBadge, {
+        additions: 12,
+        deletions: 3,
+        variant: "plain",
+        size: "xs",
+        weight: "normal",
+      })
+    );
+
+    expect(markup).toContain("text-[11px]");
+    expect(markup).toContain("font-mono");
+    expect(markup).toContain("font-normal");
+    expect(markup).toContain("tabular-nums");
+    expect(markup).not.toContain("font-medium");
+  });
+});
diff --git a/src/components/DiffStatsBadge/__tests__/diffStatsBadgeHelpers.test.ts b/src/components/DiffStatsBadge/__tests__/diffStatsBadgeHelpers.test.ts
index 5fa4a9f93..b87d356a7 100644
--- a/src/components/DiffStatsBadge/__tests__/diffStatsBadgeHelpers.test.ts
+++ b/src/components/DiffStatsBadge/__tests__/diffStatsBadgeHelpers.test.ts
@@ -2,8 +2,11 @@ import { describe, expect, it } from "vitest";
 
 import {
   DIFF_STATS_SIZE_CLASSES,
+  DIFF_STATS_WEIGHT_CLASSES,
   type DiffStatsBadgeSize,
+  type DiffStatsBadgeWeight,
   getDiffStatsSizeClass,
+  getDiffStatsWeightClass,
 } from "../diffStatsBadgeHelpers";
 
 describe("getDiffStatsSizeClass", () => {
@@ -39,3 +42,23 @@ describe("getDiffStatsSizeClass", () => {
     expect(DIFF_STATS_SIZE_CLASSES.sm).toContain("12px");
   });
 });
+
+describe("getDiffStatsWeightClass", () => {
+  it("maps named weights to typography tokens", () => {
+    expect(getDiffStatsWeightClass("normal")).toBe("font-normal");
+    expect(getDiffStatsWeightClass("medium")).toBe("font-medium");
+  });
+
+  it("defaults and falls back to the backwards-compatible medium weight", () => {
+    expect(getDiffStatsWeightClass()).toBe("font-medium");
+    const unknown = "bold" as unknown as DiffStatsBadgeWeight;
+    expect(getDiffStatsWeightClass(unknown)).toBe("font-medium");
+  });
+
+  it("keeps every weight mapping as a single token", () => {
+    for (const cls of Object.values(DIFF_STATS_WEIGHT_CLASSES)) {
+      expect(cls.trim()).toBe(cls);
+      expect(cls.split(" ").filter(Boolean)).toHaveLength(1);
+    }
+  });
+});
diff --git a/src/components/DiffStatsBadge/diffStatsBadgeHelpers.ts b/src/components/DiffStatsBadge/diffStatsBadgeHelpers.ts
index 62bb6c79a..7d9082b40 100644
--- a/src/components/DiffStatsBadge/diffStatsBadgeHelpers.ts
+++ b/src/components/DiffStatsBadge/diffStatsBadgeHelpers.ts
@@ -9,6 +9,7 @@
  * rendering for every pre-existing call site.
  */
 export type DiffStatsBadgeSize = "inherit" | "xs" | "sm" | "md";
+export type DiffStatsBadgeWeight = "normal" | "medium";
 
 export const DIFF_STATS_SIZE_CLASSES: Record<DiffStatsBadgeSize, string> = {
   inherit: "",
@@ -17,6 +18,11 @@ export const DIFF_STATS_SIZE_CLASSES: Record<DiffStatsBadgeSize, string> = {
   md: "text-[13px]",
 };
 
+export const DIFF_STATS_WEIGHT_CLASSES: Record<DiffStatsBadgeWeight, string> = {
+  normal: "font-normal",
+  medium: "font-medium",
+};
+
 /**
  * Maps a {@link DiffStatsBadgeSize} to its font-size class. Unknown/undefined
  * sizes fall back to `inherit` (no class), so the badge never silently changes
@@ -28,3 +34,10 @@ export function getDiffStatsSizeClass(size?: DiffStatsBadgeSize): string {
   }
   return DIFF_STATS_SIZE_CLASSES[size] ?? DIFF_STATS_SIZE_CLASSES.inherit;
 }
+
+/** Maps the named badge weight to a single Tailwind typography token. */
+export function getDiffStatsWeightClass(
+  weight: DiffStatsBadgeWeight = "medium"
+): string {
+  return DIFF_STATS_WEIGHT_CLASSES[weight] ?? DIFF_STATS_WEIGHT_CLASSES.medium;
+}
diff --git a/src/components/DiffStatsBadge/index.tsx b/src/components/DiffStatsBadge/index.tsx
index ac5ca2687..679c47334 100644
--- a/src/components/DiffStatsBadge/index.tsx
+++ b/src/components/DiffStatsBadge/index.tsx
@@ -4,7 +4,9 @@ import { DIFF_STATS } from "@src/config/workstation/tokens";
 
 import {
   type DiffStatsBadgeSize,
+  type DiffStatsBadgeWeight,
   getDiffStatsSizeClass,
+  getDiffStatsWeightClass,
 } from "./diffStatsBadgeHelpers";
 
 type DiffStatsBadgeVariant = "default" | "compact" | "chat" | "plain";
@@ -20,6 +22,8 @@ export interface DiffStatsBadgeProps {
    * of re-specifying `text-[Npx]` externally.
    */
   size?: DiffStatsBadgeSize;
+  /** Named font weight. Defaults to `medium` for backwards compatibility. */
+  weight?: DiffStatsBadgeWeight;
   /**
    * Gap utility between the additions and deletions values. Defaults to
    * `"gap-1"`. Pass `"gap-0"` (or another gap token) to override — supplied
@@ -37,11 +41,11 @@ export interface DiffStatsBadgeProps {
 }
 
 const CONTAINER_CLASSES: Record<DiffStatsBadgeVariant, string> = {
-  default: `${DIFF_STATS.container} font-mono font-medium leading-none tabular-nums`,
-  compact: `${DIFF_STATS.containerCompact} font-mono font-medium leading-none tabular-nums`,
-  chat: "chat-block-xs flex shrink-0 items-center font-mono font-medium leading-none tabular-nums",
+  default: `${DIFF_STATS.container} font-mono leading-none tabular-nums`,
+  compact: `${DIFF_STATS.containerCompact} font-mono leading-none tabular-nums`,
+  chat: "chat-block-xs flex shrink-0 items-center font-mono leading-none tabular-nums",
   plain:
-    "inline-flex shrink-0 items-center font-mono font-medium leading-none tabular-nums",
+    "inline-flex shrink-0 items-center font-mono leading-none tabular-nums",
 };
 
 const VALUE_BASE_CLASSES = "inline-flex";
@@ -56,6 +60,7 @@ const DiffStatsBadge = memo(function DiffStatsBadge({
   deletions = 0,
   variant = "default",
   size = "inherit",
+  weight = "medium",
   gapClassName = "gap-1",
   reserveValueWidth = true,
   className,
@@ -77,6 +82,7 @@ const DiffStatsBadge = memo(function DiffStatsBadge({
         CONTAINER_CLASSES[variant],
         gapClassName,
         getDiffStatsSizeClass(size),
+        getDiffStatsWeightClass(weight),
         className
       )}
     >
diff --git a/src/modules/WorkStation/shared/StatusBar/BrowserStatusBar.tsx b/src/modules/WorkStation/shared/StatusBar/BrowserStatusBar.tsx
index 8f903bceb..53bff37a7 100644
--- a/src/modules/WorkStation/shared/StatusBar/BrowserStatusBar.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/BrowserStatusBar.tsx
@@ -12,7 +12,12 @@ import { AlertTriangle, BrushCleaning, Plus, XCircle } from "lucide-react";
 import React, { memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseStatusBar, StatusBarButton, StatusBarText } from "./StatusBarBase";
+import {
+  BaseStatusBar,
+  StatusBarButton,
+  StatusBarLabel,
+  StatusBarText,
+} from "./StatusBarBase";
 
 export interface BrowserStatusBarProps {
   /** Current page URL */
@@ -79,13 +84,17 @@ const BrowserStatusBar: React.FC<BrowserStatusBarProps> = memo(
               {errorCount > 0 && (
                 <span className={`flex items-center gap-1 ${itemTextClass}`}>
                   <XCircle size={13} />
-                  <span className="font-medium">{errorCount}</span>
+                  <StatusBarLabel emphasis numeric>
+                    {errorCount}
+                  </StatusBarLabel>
                 </span>
               )}
               {warningCount > 0 && (
                 <span className={`flex items-center gap-1 ${itemTextClass}`}>
                   <AlertTriangle size={13} />
-                  <span className="font-medium">{warningCount}</span>
+                  <StatusBarLabel emphasis numeric>
+                    {warningCount}
+                  </StatusBarLabel>
                 </span>
               )}
             </StatusBarButton>
diff --git a/src/modules/WorkStation/shared/StatusBar/CiStatusMenu.tsx b/src/modules/WorkStation/shared/StatusBar/CiStatusMenu.tsx
index 2c2a34092..d2f5db247 100644
--- a/src/modules/WorkStation/shared/StatusBar/CiStatusMenu.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/CiStatusMenu.tsx
@@ -44,7 +44,7 @@ import { openExternalLink } from "@src/util/platform/ipcRenderer";
 import { formatRelativeTime } from "@src/util/time/formatRelativeTime";
 import { classNames } from "@src/util/ui/classNames";
 
-import { StatusBarButton } from "./StatusBarBase";
+import { StatusBarButton, StatusBarLabel } from "./StatusBarBase";
 import { StatusBarTooltip } from "./StatusBarTooltip";
 
 const MENU_ICON_SIZE = DROPDOWN_ITEM.iconSize;
@@ -292,9 +292,9 @@ export const CiStatusMenu: React.FC<CiStatusMenuProps> = memo(
             dataTestId="status-bar-ci"
           >
             <BranchCiIcon status={ciStatus} />
-            <span className="font-medium tabular-nums text-text-1">
+            <StatusBarLabel emphasis numeric className="text-text-1">
               {triggerLabel}
-            </span>
+            </StatusBarLabel>
           </StatusBarButton>
         </StatusBarTooltip>
 
diff --git a/src/modules/WorkStation/shared/StatusBar/EditorStatusBar.tsx b/src/modules/WorkStation/shared/StatusBar/EditorStatusBar.tsx
index 1d4499a85..fee76cafe 100644
--- a/src/modules/WorkStation/shared/StatusBar/EditorStatusBar.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/EditorStatusBar.tsx
@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import DiffStatsBadge from "@src/components/DiffStatsBadge";
 import {
   DROPDOWN_CLASSES,
+  DROPDOWN_ITEM,
   DROPDOWN_WIDTHS,
 } from "@src/components/Dropdown/tokens";
 import { SPINNER_TOKENS } from "@src/config/spinnerTokens";
@@ -51,6 +52,7 @@ import {
   BaseStatusBar,
   StatusBarButton,
   StatusBarDivider,
+  StatusBarLabel,
   StatusBarSegment,
   StatusBarText,
 } from "./StatusBarBase";
@@ -207,9 +209,12 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                 ) : (
                   <Code size={13} className="shrink-0 text-text-1" />
                 )}
-                <span className="min-w-0 truncate font-medium text-text-1">
+                <StatusBarLabel
+                  emphasis
+                  className="min-w-0 truncate text-text-1"
+                >
                   {workspaceLabel}
-                </span>
+                </StatusBarLabel>
               </StatusBarButton>
             </StatusBarTooltip>
           ) : (
@@ -219,9 +224,9 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
               dataTestId="status-bar-no-repo"
             >
               <Code size={13} className="text-primary-6" />
-              <span className="font-medium text-primary-6">
+              <StatusBarLabel emphasis className="text-primary-6">
                 {t("actions.addWorkspace")}
-              </span>
+              </StatusBarLabel>
             </StatusBarButton>
           )}
 
@@ -231,9 +236,9 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
               title={t("workstation.notGitInitializedTooltip")}
             >
               <GitBranch size={13} className="text-text-2" />
-              <span className="font-medium text-text-2">
+              <StatusBarLabel emphasis className="text-text-2">
                 {t("workstation.notGitInitialized")}
-              </span>
+              </StatusBarLabel>
             </StatusBarSegment>
           )}
 
@@ -251,13 +256,16 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                 dataTestId="status-bar-worktree"
               >
                 <Folder size={13} className="shrink-0 text-text-1" />
-                <span className="min-w-0 truncate font-medium text-text-1">
+                <StatusBarLabel
+                  emphasis
+                  className="min-w-0 truncate text-text-1"
+                >
                   {activeWorktree && !activeWorktree.isMain
                     ? activeWorktree.path.split("/").pop() ||
                       activeWorktree.branch ||
                       activeWorktree.path
                     : t("selectors.branch.labels.mainWorktree", "Main")}
-                </span>
+                </StatusBarLabel>
               </StatusBarButton>
             </StatusBarTooltip>
           )}
@@ -292,19 +300,21 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                 ) : (
                   <GitBranch size={13} className="shrink-0 text-text-1" />
                 )}
-                <span className="min-w-0 truncate font-medium text-text-1">
+                <StatusBarLabel
+                  emphasis
+                  className="min-w-0 truncate text-text-1"
+                >
                   {branchName}
-                </span>
+                </StatusBarLabel>
                 {(workingAdditions > 0 || workingDeletions > 0) && (
                   <DiffStatsBadge
                     additions={workingAdditions}
                     deletions={workingDeletions}
                     variant="plain"
                     size="xs"
+                    weight="normal"
                     reserveValueWidth={false}
-                    // `!font-normal` overrides the badge's baked-in font-medium
-                    // (classNames is a plain join, so importance must win, not order).
-                    className="shrink-0 !font-normal"
+                    className="shrink-0"
                   />
                 )}
               </StatusBarButton>
@@ -349,14 +359,14 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
               dataTestId="status-bar-switch-to-session-repo"
             >
               <ArrowRightLeft size={13} />
-              <span className="font-medium">
+              <StatusBarLabel emphasis>
                 {t("workstation.switchToSessionRepo", {
                   name:
                     sessionRepoHint.type === "folder"
                       ? sessionRepoHint.folderName
                       : sessionRepoHint.repoName,
                 })}
-              </span>
+              </StatusBarLabel>
             </StatusBarButton>
           )}
 
@@ -395,7 +405,7 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                 size={13}
                 className={isIndexingActive ? "animate-pulse" : ""}
               />
-              <span className="font-medium">
+              <StatusBarLabel emphasis>
                 {indexingProgress.status === "embedding"
                   ? indexingProgress.progress > 0
                     ? t("workstation.embeddingShort", {
@@ -405,7 +415,7 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                   : indexingProgress.filesTotal > 0
                     ? `${t("labels.indexing")} ${indexingProgress.filesProcessed}/${indexingProgress.filesTotal}`
                     : `${t("labels.indexing")}...`}
-              </span>
+              </StatusBarLabel>
             </StatusBarSegment>
           )}
         </>
@@ -470,13 +480,13 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
           )}
 
           {cursor && (
-            <StatusBarText className="tabular-nums">
+            <StatusBarText numeric>
               Ln {cursor.line}, Col {cursor.column}
             </StatusBarText>
           )}
 
           {hasSelection && (
-            <StatusBarText>
+            <StatusBarText numeric>
               (
               {cursor?.selectedLines && cursor.selectedLines > 1
                 ? t("workstation.linesSelected", {
@@ -490,7 +500,7 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
           )}
 
           {totalLines !== undefined && (
-            <StatusBarText>
+            <StatusBarText numeric>
               {t("workstation.nLines", { count: totalLines })}
             </StatusBarText>
           )}
@@ -508,7 +518,9 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                     <span className="inline-flex items-center gap-1">
                       <span>{lspStatus?.language || "LSP"}</span>
                       <StatusBarDivider />
-                      <span>{activeLanguageServiceCount}</span>
+                      <StatusBarLabel numeric>
+                        {activeLanguageServiceCount}
+                      </StatusBarLabel>
                     </span>
                   </>
                 ) : (
@@ -605,7 +617,7 @@ export const EditorStatusBar: React.FC<EditorStatusBarProps> = memo(
                   right: lspDropdownPosition.right,
                 }}
               >
-                <div className="space-y-2 text-[13px]">
+                <div className={`space-y-2 ${DROPDOWN_ITEM.fontSizeClass}`}>
                   {languageServicePanelRows.map((row) =>
                     row.kind === "empty" ? (
                       <div key={row.key} className="font-bold text-text-3">
diff --git a/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx b/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
index 5522e483d..07384a83e 100644
--- a/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
@@ -24,7 +24,7 @@ import {
 import { useDropdownEngine } from "@src/hooks/dropdown";
 import { classNames } from "@src/util/ui/classNames";
 
-import { StatusBarButton } from "./StatusBarBase";
+import { StatusBarButton, StatusBarLabel } from "./StatusBarBase";
 import { StatusBarTooltip } from "./StatusBarTooltip";
 
 const MENU_ICON_SIZE = DROPDOWN_ITEM.iconSize;
@@ -174,33 +174,41 @@ export const GitSyncStatusMenu: React.FC<GitSyncStatusMenuProps> = memo(
               />
             )}
             {needsPublish && !isPublishing && (
-              <span className="font-medium text-text-1">
+              <StatusBarLabel emphasis className="text-text-1">
                 {t("git.actions.publish")}
-              </span>
+              </StatusBarLabel>
             )}
             {isPublishing && (
-              <span className="font-medium text-text-1">
+              <StatusBarLabel emphasis className="text-text-1">
                 {t("workstation.publishingBranch")}
-              </span>
+              </StatusBarLabel>
             )}
             {!needsPublish &&
               syncStatusLabel &&
               behindCount === 0 &&
               aheadCount === 0 && (
-                <span className="font-medium text-text-1">
+                <StatusBarLabel emphasis className="text-text-1">
                   {syncStatusLabel}
-                </span>
+                </StatusBarLabel>
               )}
             {!needsPublish && (behindCount > 0 || aheadCount > 0) && (
               <>
-                <span className="flex items-center font-medium text-text-1">
+                <StatusBarLabel
+                  emphasis
+                  numeric
+                  className="flex items-center text-text-1"
+                >
                   {behindCount}
                   <ArrowDown size={MENU_ICON_SIZE} />
-                </span>
-                <span className="flex items-center font-medium text-text-1">
+                </StatusBarLabel>
+                <StatusBarLabel
+                  emphasis
+                  numeric
+                  className="flex items-center text-text-1"
+                >
                   {aheadCount}
                   <ArrowUp size={MENU_ICON_SIZE} />
-                </span>
+                </StatusBarLabel>
               </>
             )}
             <ChevronDown size={12} className="text-text-3" />
diff --git a/src/modules/WorkStation/shared/StatusBar/PortsStatusMenu.tsx b/src/modules/WorkStation/shared/StatusBar/PortsStatusMenu.tsx
index 29ea921ef..2a9ba23f0 100644
--- a/src/modules/WorkStation/shared/StatusBar/PortsStatusMenu.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/PortsStatusMenu.tsx
@@ -31,7 +31,7 @@ import { requestNewBrowserSessionAtom } from "@src/store/workstation/workstation
 import { copyText } from "@src/util/data/clipboard";
 import { classNames } from "@src/util/ui/classNames";
 
-import { StatusBarButton } from "./StatusBarBase";
+import { StatusBarButton, StatusBarLabel } from "./StatusBarBase";
 import { StatusBarTooltip } from "./StatusBarTooltip";
 import {
   refreshWorkspacePortScan,
@@ -283,7 +283,9 @@ export const PortsStatusMenu: React.FC = memo(() => {
           dataTestId="status-bar-ports"
         >
           <Unplug size={13} className="text-text-1" />
-          <span className="font-medium text-text-1">{workspaceCount}</span>
+          <StatusBarLabel emphasis numeric className="text-text-1">
+            {workspaceCount}
+          </StatusBarLabel>
         </StatusBarButton>
       </StatusBarTooltip>
 
diff --git a/src/modules/WorkStation/shared/StatusBar/ProjectStatusBar.tsx b/src/modules/WorkStation/shared/StatusBar/ProjectStatusBar.tsx
index 499148d2f..29f5ea296 100644
--- a/src/modules/WorkStation/shared/StatusBar/ProjectStatusBar.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/ProjectStatusBar.tsx
@@ -12,6 +12,7 @@ import ProjectOrgGitFolderSyncWidget from "./ProjectOrgGitFolderSyncWidget";
 import ProjectSyncStatusWidget from "./ProjectSyncStatusWidget";
 import {
   BaseStatusBar,
+  StatusBarLabel,
   StatusBarSegment,
   StatusBarText,
 } from "./StatusBarBase";
@@ -59,9 +60,9 @@ const ProjectStatusBar: React.FC<ProjectStatusBarProps> = memo(
           {activeMemberCount != null && (
             <StatusBarSegment>
               <Users size={12} className="text-text-1" />
-              <span className="tabular-nums text-text-1">
+              <StatusBarLabel numeric className="text-text-1">
                 {activeMemberCount}
-              </span>
+              </StatusBarLabel>
             </StatusBarSegment>
           )}
 
diff --git a/src/modules/WorkStation/shared/StatusBar/ProjectSyncStatusWidget.tsx b/src/modules/WorkStation/shared/StatusBar/ProjectSyncStatusWidget.tsx
index 03c0dd4d4..1e7f2e21e 100644
--- a/src/modules/WorkStation/shared/StatusBar/ProjectSyncStatusWidget.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/ProjectSyncStatusWidget.tsx
@@ -35,7 +35,7 @@ import { activeStatusBarCallbacksAtom } from "@src/store/ui/workStationAtom";
 import { truncate } from "@src/util/string/truncate";
 import { formatRelativeTime } from "@src/util/time/formatRelativeTime";
 
-import { StatusBarButton } from "./StatusBarBase";
+import { StatusBarButton, StatusBarLabel } from "./StatusBarBase";
 
 export interface ProjectSyncStatusWidgetProps {
   /** Slug of the active project — used to look up the live event entry. */
@@ -83,7 +83,7 @@ const ProjectSyncStatusWidget: React.FC<ProjectSyncStatusWidgetProps> = memo(
         return {
           icon: <CloudOff size={13} className="text-danger-6" />,
           label: String(entry.abandoned_count),
-          labelClass: "text-danger-6 tabular-nums",
+          labelClass: "text-danger-6",
           tooltip: t("statusBar.sync.abandoned", {
             count: entry.abandoned_count,
           }),
@@ -98,7 +98,7 @@ const ProjectSyncStatusWidget: React.FC<ProjectSyncStatusWidgetProps> = memo(
         return {
           icon: <CloudAlert size={13} className="text-warning-6" />,
           label: String(entry.failed_count),
-          labelClass: "text-warning-6 tabular-nums",
+          labelClass: "text-warning-6",
           tooltip,
         };
       }
@@ -107,7 +107,7 @@ const ProjectSyncStatusWidget: React.FC<ProjectSyncStatusWidgetProps> = memo(
         return {
           icon: <CloudUpload size={13} className="text-text-1" />,
           label: String(entry.pending_count),
-          labelClass: "text-text-1 tabular-nums",
+          labelClass: "text-text-1",
           tooltip: t("statusBar.sync.pending", {
             count: entry.pending_count,
           }),
@@ -134,7 +134,9 @@ const ProjectSyncStatusWidget: React.FC<ProjectSyncStatusWidgetProps> = memo(
       <StatusBarButton onClick={handleClick} title={fullTooltip}>
         {view.icon}
         {view.label !== null && (
-          <span className={view.labelClass}>{view.label}</span>
+          <StatusBarLabel numeric className={view.labelClass}>
+            {view.label}
+          </StatusBarLabel>
         )}
       </StatusBarButton>
     );
diff --git a/src/modules/WorkStation/shared/StatusBar/StatusBarBase.tsx b/src/modules/WorkStation/shared/StatusBar/StatusBarBase.tsx
index e35d15fc8..2879bcaf2 100644
--- a/src/modules/WorkStation/shared/StatusBar/StatusBarBase.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/StatusBarBase.tsx
@@ -20,7 +20,7 @@ import React, { forwardRef, memo } from "react";
 import { SURFACE_TOKENS } from "@src/config/surfaceTokens";
 import { classNames } from "@src/util/ui/classNames";
 
-import { STATUS_BAR_TOKENS } from "./statusBarTokens";
+import { STATUS_BAR_TOKENS, STATUS_BAR_TYPOGRAPHY } from "./statusBarTokens";
 
 // ============================================
 // Types
@@ -175,11 +175,45 @@ export const StatusBarSegment: React.FC<StatusBarSegmentProps> = memo(
 
 StatusBarSegment.displayName = "StatusBarSegment";
 
+export interface StatusBarLabelProps {
+  children: React.ReactNode;
+  /** Use the status bar's emphasized label weight. */
+  emphasis?: boolean;
+  /** Use stable-width numerals for changing counts and positions. */
+  numeric?: boolean;
+  className?: string;
+}
+
+/**
+ * Inline typography primitive for labels nested inside status-bar buttons and
+ * segments. Font size and line height come from the bar root; this component
+ * owns only the semantic weight and numeric alignment variants.
+ */
+export const StatusBarLabel: React.FC<StatusBarLabelProps> = memo(
+  ({ children, emphasis = false, numeric = false, className }) => (
+    <span
+      className={classNames(
+        emphasis ? STATUS_BAR_TYPOGRAPHY.emphasis : STATUS_BAR_TYPOGRAPHY.label,
+        numeric && STATUS_BAR_TYPOGRAPHY.numeric,
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+);
+
+StatusBarLabel.displayName = "StatusBarLabel";
+
 export interface StatusBarTextProps {
   /** Text content */
   children: React.ReactNode;
   /** Whether text should be muted */
   muted?: boolean;
+  /** Use the status bar's emphasized label weight. */
+  emphasis?: boolean;
+  /** Use stable-width numerals for changing counts and positions. */
+  numeric?: boolean;
   /** Native tooltip — useful for truncated labels */
   title?: string;
   /** Additional class name */
@@ -190,11 +224,22 @@ export interface StatusBarTextProps {
  * Plain text segment — same horizontal padding and height alignment as {@link StatusBarButton}.
  */
 export const StatusBarText: React.FC<StatusBarTextProps> = memo(
-  ({ children, muted = false, title, className }) => {
+  ({
+    children,
+    muted = false,
+    emphasis = false,
+    numeric = false,
+    title,
+    className,
+  }) => {
     return (
       <span
         className={classNames(
           STATUS_BAR_TOKENS.text,
+          emphasis
+            ? STATUS_BAR_TYPOGRAPHY.emphasis
+            : STATUS_BAR_TYPOGRAPHY.label,
+          numeric && STATUS_BAR_TYPOGRAPHY.numeric,
           muted ? "text-text-3" : "text-text-1",
           className
         )}
@@ -241,7 +286,7 @@ export const BaseStatusBar: React.FC<BaseStatusBarProps> = memo(
         className={classNames(
           STATUS_BAR_TOKENS.barShell,
           STATUS_BAR_TOKENS.heightClass,
-          STATUS_BAR_TOKENS.textSizeClass,
+          STATUS_BAR_TOKENS.typographyClass,
           STATUS_BAR_TOKENS.barPaddingClass,
           // Top hairline = boundary with the content area above. The
           // bottom hairline (boundary with the dock) is owned by
diff --git a/src/modules/WorkStation/shared/StatusBar/__tests__/StatusBarBase.typography.test.ts b/src/modules/WorkStation/shared/StatusBar/__tests__/StatusBarBase.typography.test.ts
new file mode 100644
index 000000000..dd2f6b96c
--- /dev/null
+++ b/src/modules/WorkStation/shared/StatusBar/__tests__/StatusBarBase.typography.test.ts
@@ -0,0 +1,51 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { TYPOGRAPHY } from "@src/config/workstation/tokens";
+
+import {
+  BaseStatusBar,
+  StatusBarLabel,
+  type StatusBarLabelProps,
+  StatusBarText,
+  type StatusBarTextProps,
+} from "../StatusBarBase";
+import { STATUS_BAR_TOKENS, STATUS_BAR_TYPOGRAPHY } from "../statusBarTokens";
+
+describe("status-bar typography", () => {
+  it("derives the root style from the shared secondary-text token", () => {
+    for (const token of TYPOGRAPHY.secondary.split(" ")) {
+      expect(STATUS_BAR_TYPOGRAPHY.root).toContain(token);
+    }
+    expect(STATUS_BAR_TYPOGRAPHY.root).toContain("leading-none");
+    expect(STATUS_BAR_TOKENS.typographyClass).toBe(STATUS_BAR_TYPOGRAPHY.root);
+  });
+
+  it("keeps extension-host items on the same typography contract", () => {
+    for (const token of STATUS_BAR_TYPOGRAPHY.root.split(" ")) {
+      expect(STATUS_BAR_TOKENS.extensionItem).toContain(token);
+    }
+  });
+
+  it("renders semantic label weight and numeric variants", () => {
+    const markup = renderToStaticMarkup(
+      createElement(BaseStatusBar, {
+        leftContent: createElement(
+          StatusBarLabel,
+          { emphasis: true, numeric: true } as StatusBarLabelProps,
+          1501
+        ),
+        rightContent: createElement(
+          StatusBarText,
+          { numeric: true } as StatusBarTextProps,
+          "Ln 1, Col 1"
+        ),
+      })
+    );
+
+    expect(markup).toContain(STATUS_BAR_TYPOGRAPHY.root);
+    expect(markup).toContain("font-medium tabular-nums");
+    expect(markup).toContain("font-normal tabular-nums");
+  });
+});
diff --git a/src/modules/WorkStation/shared/StatusBar/index.ts b/src/modules/WorkStation/shared/StatusBar/index.ts
index c6e499dda..1811e0d15 100644
--- a/src/modules/WorkStation/shared/StatusBar/index.ts
+++ b/src/modules/WorkStation/shared/StatusBar/index.ts
@@ -12,13 +12,14 @@
  */
 
 // Layout tokens (Tailwind class strings for bar height, clusters, segments)
-export { STATUS_BAR_TOKENS } from "./statusBarTokens";
+export { STATUS_BAR_TOKENS, STATUS_BAR_TYPOGRAPHY } from "./statusBarTokens";
 
 // Base components
 export {
   BaseStatusBar,
   StatusBarButton,
   StatusBarDivider,
+  StatusBarLabel,
   StatusBarSegment,
   StatusBarText,
 } from "./StatusBarBase";
@@ -26,6 +27,7 @@ export type {
   BaseStatusBarProps,
   StatusBarButtonProps,
   StatusBarDividerProps,
+  StatusBarLabelProps,
   StatusBarSegmentProps,
   StatusBarTextProps,
 } from "./StatusBarBase";
diff --git a/src/modules/WorkStation/shared/StatusBar/statusBarTokens.ts b/src/modules/WorkStation/shared/StatusBar/statusBarTokens.ts
index 5f11e5f7e..0b2acbea8 100644
--- a/src/modules/WorkStation/shared/StatusBar/statusBarTokens.ts
+++ b/src/modules/WorkStation/shared/StatusBar/statusBarTokens.ts
@@ -5,12 +5,32 @@
  * cluster gaps stay aligned when the bar layout changes.
  */
 import { SURFACE_TOKENS } from "@src/config/surfaceTokens";
+import { TYPOGRAPHY } from "@src/config/workstation/tokens";
+
+/**
+ * Semantic typography roles shared by every workstation status bar.
+ *
+ * The bar owns the 11px secondary-text scale and compact line height once;
+ * consumers only opt into emphasis or numeric alignment. Keeping those roles
+ * here prevents repo, branch, cursor, and extension items from rebuilding the
+ * same typography with unrelated utility strings.
+ */
+export const STATUS_BAR_TYPOGRAPHY = {
+  /** Base status-bar text: 11px, normal weight, compact line height. */
+  root: `${TYPOGRAPHY.secondary} leading-none`,
+  /** Default labels inherit the root's normal weight. */
+  label: "font-normal",
+  /** Workspace, branch, action, and count emphasis. */
+  emphasis: "font-medium",
+  /** Stable-width digits for cursor positions and counts. */
+  numeric: "tabular-nums",
+} as const;
 
 export const STATUS_BAR_TOKENS = {
   /** Bar height (36px) */
   heightClass: "h-9",
-  /** Primary label size */
-  textSizeClass: "text-[11px]",
+  /** Shared semantic typography for the entire bar. */
+  typographyClass: STATUS_BAR_TYPOGRAPHY.root,
   /** Outer horizontal padding of the bar (outside left/right clusters) */
   barPaddingClass: "px-2",
 
@@ -39,8 +59,7 @@ export const STATUS_BAR_TOKENS = {
    * label. Matches the primary pill used in the selection dropdown so
    * status-bar CTAs read consistently.
    */
-  buttonPrimary:
-    "bg-primary-6 px-2.5 font-medium text-white hover:bg-primary-7",
+  buttonPrimary: `bg-primary-6 px-2.5 text-white hover:bg-primary-7 ${STATUS_BAR_TYPOGRAPHY.emphasis}`,
   /** Non-interactive block (icon + labels), e.g. indexing */
   segment:
     "flex h-full shrink-0 cursor-default select-none items-center gap-1.5 px-2",
@@ -49,6 +68,5 @@ export const STATUS_BAR_TOKENS = {
 
   /** Extension host items embedded in the bar */
   extensionRoot: "flex h-full min-h-0 items-center",
-  extensionItem:
-    "flex h-full min-h-0 shrink-0 items-center gap-1.5 px-2 text-[11px] leading-none transition-colors",
+  extensionItem: `flex h-full min-h-0 shrink-0 items-center gap-1.5 px-2 transition-colors ${STATUS_BAR_TYPOGRAPHY.root}`,
 } as const;