fix(web): readable /home install-hero <code> chips (amber on navy) (#358)

Inline `<code>` chips inside the blue install-hero (claude --version,
~/Agnes, /agnes-private, ~/.claude/settings.local.json, ...) used to
render as a rgba(255,255,255,0.12) faint-white pill on the
#0073D1→#0056A3 hero gradient with inherited near-white text — ≈2:1
contrast (fails WCAG AA), and the pill silhouette merged into the
hero. Visual perception was a muddy bluish blob; user reported the
text as "dark blue/black" because the white edges were lost.

New rule lands at ≈9:1 contrast and matches the .install-cmd
copy-button-box palette (amber #FBBF24 on rgba(15,23,42,0.75) dark
navy, with a subtle amber border so the chip reads as an affordance
even with the transparent navy bg). Applies in both home templates
— .install-hero code on the not-onboarded view, .hero code on the
onboarded welcome card.

Two inline `style="background: rgba(255,255,255,0.12);..."` overrides
on `<code>` elements in the lead paragraphs (home_not_onboarded.html
and home_onboarded.html) dropped so the CSS rule actually wins —
styling now lives in one place per hero scope.

CHANGELOG.md

@@ -24,6 +24,20 @@ CalVer image tags (`stable-YYYY.MM.N`, `dev-YYYY.MM.N`) are produced for every C
   covered — the bug was that the call site sat inside the
   `if not override_active:` block. Moved out to a common step
   before the first pull so every init path runs it.
+- Inline `<code>` chips inside the blue install-hero on `/home` (both
+  not-onboarded install steps + onboarded welcome paragraph) now render
+  as amber-on-dark-navy with a subtle amber border instead of the
+  previous `rgba(255,255,255,0.12)` faint-white-on-blue pill with
+  inherited white text. The previous combination was ≈2:1 contrast
+  (fails WCAG AA) and the chip silhouette merged into the hero
+  gradient, so `claude --version`, `~/Agnes`, `/agnes-private`,
+  `~/.claude/settings.local.json`, etc. looked like a muddy blob
+  rather than a readable code chip. New rule lands at ≈9:1 contrast
+  and matches the existing `.install-cmd` copy-button-box palette.
+  Two inline `style="background: rgba(255,255,255,0.12);..."`
+  overrides in the lead paragraphs of both home templates dropped
+  so the CSS rule wins; styling now lives in one place per hero
+  scope (`.install-hero code` / `.hero code`).
 
 ## [0.55.4] — 2026-05-19
 

app/web/templates/home_not_onboarded.html

@@ -426,9 +426,23 @@
     margin-top: 12px;
     line-height: 1.55;
 }
+/* Inline `<code>` chips inside the blue install-hero (lead paragraphs +
+   install-note prose). Previous rule was `rgba(255,255,255,0.12)` bg +
+   inherited near-white text — barely-visible faint-white film on the
+   blue gradient with low-contrast white text on top (≈2:1, fails WCAG
+   AA). The visual effect read as a muddy bluish blob — the user
+   reported the text as "dark blue/black font" because the chip blended
+   into the hero and the white text lost its edges.
+   Switched to the same amber-on-dark-navy palette as the .install-cmd
+   copy-button boxes below (≈9:1 contrast). Border tint matches the
+   amber accent so chips read as clickable affordances even with the
+   transparent navy bg. */
+.home-mock .install-hero code,
 .home-mock .install-note code,
 .home-mock .install-note > code {
-    background: rgba(255, 255, 255, 0.12);
+    background: rgba(15, 23, 42, 0.75);
+    color: #FBBF24;
+    border: 1px solid rgba(251, 191, 36, 0.30);
     padding: 1px 6px;
     border-radius: 4px;
     font-family: var(--hp-font-mono);
@@ -1055,10 +1069,10 @@
         <div class="eyebrow">Welcome, {{ display_name }} — let's get you set up</div>
         <h1>Connect Claude Code on your machine to your team's data</h1>
         <p class="lead">
-            {{ instance_brand }} gives <strong>Claude Code</strong> on your computer access to your team's <strong>curated data, plugins, third-party tools (Asana, Google Workspace, Atlassian), and shared knowledge</strong> — so you can ask questions and get answers in plain language, right from your terminal. This page walks you through the <strong>one-time setup (~10 minutes)</strong>; the install script also connects your tools for you, so there's no extra page to visit. Everything it installs lives in your home folder (<code style="background: rgba(255,255,255,0.12); border: none; padding: 1px 6px; border-radius: 4px; font-family: var(--hp-font-mono); font-size: 12.5px;">~/{{ workspace_dir }}</code>) and can be removed in one command.
+            {{ instance_brand }} gives <strong>Claude Code</strong> on your computer access to your team's <strong>curated data, plugins, third-party tools (Asana, Google Workspace, Atlassian), and shared knowledge</strong> — so you can ask questions and get answers in plain language, right from your terminal. This page walks you through the <strong>one-time setup (~10 minutes)</strong>; the install script also connects your tools for you, so there's no extra page to visit. Everything it installs lives in your home folder (<code>~/{{ workspace_dir }}</code>) and can be removed in one command.
         </p>
         <p class="lead lead-privacy">
-            <strong>What leaves your machine.</strong> Session telemetry — prompts, tool calls, and tool responses — flows back to the central catalog so the team can analyse failure patterns. Raw data rows you query locally stay on your machine; only the prompt/response transcript travels. Need a session off the record? Toggle Private in Claude Code (by typing <code style="background: rgba(255,255,255,0.12); padding: 1px 6px; border-radius: 4px; font-family: var(--hp-font-mono); font-size: 12.5px;">/agnes-private</code>) to disable telemetry for that chat — nothing from that session reaches the catalog.
+            <strong>What leaves your machine.</strong> Session telemetry — prompts, tool calls, and tool responses — flows back to the central catalog so the team can analyse failure patterns. Raw data rows you query locally stay on your machine; only the prompt/response transcript travels. Need a session off the record? Toggle Private in Claude Code (by typing <code>/agnes-private</code>) to disable telemetry for that chat — nothing from that session reaches the catalog.
         </p>
 
         <div class="install-block">

app/web/templates/home_onboarded.html

@@ -49,6 +49,21 @@
     max-width: 680px;
     line-height: 1.6;
 }
+/* Inline `<code>` chips inside the blue welcome hero — mirror the
+   .install-hero rule on the not-onboarded view (amber-on-dark-navy,
+   ≈9:1 contrast). Previous inline `style="background: rgba(255,255,
+   255,0.12)..."` rendered as a near-invisible faint-white pill on the
+   blue gradient, with inherited white text on top — low contrast +
+   the chip silhouette merged into the hero. */
+.home-mock .hero code {
+    background: rgba(15, 23, 42, 0.75);
+    color: #FBBF24;
+    border: 1px solid rgba(251, 191, 36, 0.30);
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
+    font-size: 12.5px;
+}
 
 .home-mock .section-label {
     font-size: 11px;
@@ -104,7 +119,7 @@
         <div class="eyebrow">Welcome back, {{ display_name }}</div>
         <h1>You're all set up</h1>
         <p>
-            Open Claude Code in any project under <code style="background: rgba(255,255,255,0.12); border: none; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12.5px;">~/{{ workspace_dir }}/Projects/</code>
+            Open Claude Code in any project under <code>~/{{ workspace_dir }}/Projects/</code>
             and start a session — your data and plugins are already synced. Use the cards below to jump into the parts of {{ instance_brand }} you need.
         </p>
     </div>