AI-Cognitive-Leap/agnes-the-ai-analyst
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
Vojtech 2026-05-19 20:54:07 +04:00 committed by GitHub
parent 0c9e172ce1
commit 00f8bceebc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
CHANGELOG.md
View file

@ -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

20
app/web/templates/home_not_onboarded.html
View file

@ -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">

17
app/web/templates/home_onboarded.html
View file

@ -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>