Fix English health ring layout and hero asset

.gitignore

@@ -22,6 +22,8 @@ docs/mission.runbook.md
 docs/mission.sop.md
 init.sh
 docs/assets/*-tight.png
+docs/assets/*-preview*.png
+docs/assets/*-inspect*.png
 1440m
 180m
 720m

docs/PROGRESS.md

@@ -1,5 +1,25 @@
 # Progress
 
+## Phase 135 (English overview health ring no longer collides in README or UI) — Completed
+- Scope:
+  - Fix the English `Health score` ring so the inner label does not crowd or visually collide with the score.
+  - Align the public English README hero image with the corrected UI treatment.
+- Changed files:
+  - `src/ui/server.ts`
+  - `test/ui-render-smoke.test.ts`
+  - `docs/assets/overview-hero-en.png`
+  - `.gitignore`
+  - `docs/PROGRESS.md`
+- Implementation:
+  - Shortened the English ring label from `Health score` to `Health` while keeping the full meaning in `aria-label`.
+  - Stabilized the inner ring layout with explicit two-row grid alignment, centered label text, and tighter bounds.
+  - Replaced the English README hero asset with a corrected version whose health ring matches the new English UI treatment.
+  - Ignored local screenshot-inspection and preview artifacts created while fixing the asset.
+- Verification:
+  - `npm run build`
+  - `npm test`
+  - `npm run smoke:ui`
+
 ## Phase 134 (GitHub README now defaults to Chinese, with English as an explicit switch) — Completed
 - Scope:
   - Make the public GitHub landing page default to Chinese instead of English.

src/ui/server.ts

@@ -4510,7 +4510,9 @@ async function renderHtml(
           <div class="overview-focus-ring">
             <div class="overview-focus-core">
               <div class="overview-focus-score" data-counter-key="overview:focus-score" data-counter-target="${overviewFocusScore}" data-counter-format="int">${overviewFocusScore}</div>
-              <div class="overview-focus-unit">${escapeHtml(t("Health score", "健康分"))}</div>
+              <div class="overview-focus-unit" aria-label="${escapeHtml(t("Health score", "健康分"))}">${escapeHtml(
+                t("Health", "健康分"),
+              )}</div>
             </div>
           </div>
           <div class="overview-focus-copy">
@@ -5485,8 +5487,12 @@ async function renderHtml(
       background: rgba(255, 255, 255, 0.97);
       border: 1px solid rgba(16, 42, 67, 0.12);
       display: grid;
-      place-items: center;
+      grid-template-rows: auto auto;
+      justify-items: center;
       align-content: center;
+      gap: 3px;
+      padding: 8px 6px;
+      box-sizing: border-box;
     }
     .overview-focus-score {
       font-size: 28px;
@@ -5497,12 +5503,15 @@ async function renderHtml(
       font-variant-numeric: tabular-nums;
     }
     .overview-focus-unit {
-      margin-top: 2px;
-      font-size: 11px;
+      font-size: 10px;
       color: #6f7985;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       font-weight: 620;
+      line-height: 1.15;
+      text-align: center;
+      max-width: 56px;
+      text-wrap: balance;
     }
     .overview-focus-copy {
       min-width: 0;

test/ui-render-smoke.test.ts

@@ -347,6 +347,16 @@ test("heartbeat API routes are implemented in UI server", async () => {
   assert(source.includes("runTaskHeartbeat({ gate })"));
 });
 
+test("overview focus ring keeps a compact English label and stable inner layout", async () => {
+  const source = await readFile("src/ui/server.ts", "utf8");
+  assert(source.includes('aria-label="${escapeHtml(t("Health score", "健康分"))}"'));
+  assert(source.includes('t("Health", "健康分")'));
+  assert(source.includes("grid-template-rows: auto auto;"));
+  assert(source.includes("justify-items: center;"));
+  assert(source.includes("text-align: center;"));
+  assert(source.includes("max-width: 56px;"));
+});
+
 test("usage dashboard includes token type share and cron token share sections", async () => {
   const source = await readFile("src/ui/server.ts", "utf8");
   assert(source.includes("AI 用量构成（全部会话）"));