From 00f8bceebc4e303bdff9a697fba3c7debb0ba7cc Mon Sep 17 00:00:00 2001 From: Vojtech <119944107+cvrysanek@users.noreply.github.com> Date: Tue, 19 May 2026 20:54:07 +0400 Subject: [PATCH] fix(web): readable /home install-hero chips (amber on navy) (#358) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inline `` 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 `` 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 | 14 ++++++++++++++ app/web/templates/home_not_onboarded.html | 20 +++++++++++++++++--- app/web/templates/home_onboarded.html | 17 ++++++++++++++++- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d38c3e..957f7d6 100644 --- a/CHANGELOG.md +++ b/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 `` 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 diff --git a/app/web/templates/home_not_onboarded.html b/app/web/templates/home_not_onboarded.html index 4686952..111fae4 100644 --- a/app/web/templates/home_not_onboarded.html +++ b/app/web/templates/home_not_onboarded.html @@ -426,9 +426,23 @@ margin-top: 12px; line-height: 1.55; } +/* Inline `` 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 @@
Welcome, {{ display_name }} — let's get you set up

Connect Claude Code on your machine to your team's data

- {{ instance_brand }} gives Claude Code on your computer access to your team's curated data, plugins, third-party tools (Asana, Google Workspace, Atlassian), and shared knowledge — so you can ask questions and get answers in plain language, right from your terminal. This page walks you through the one-time setup (~10 minutes); 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 (~/{{ workspace_dir }}) and can be removed in one command. + {{ instance_brand }} gives Claude Code on your computer access to your team's curated data, plugins, third-party tools (Asana, Google Workspace, Atlassian), and shared knowledge — so you can ask questions and get answers in plain language, right from your terminal. This page walks you through the one-time setup (~10 minutes); 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 (~/{{ workspace_dir }}) and can be removed in one command.

- What leaves your machine. 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 /agnes-private) to disable telemetry for that chat — nothing from that session reaches the catalog. + What leaves your machine. 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 /agnes-private) to disable telemetry for that chat — nothing from that session reaches the catalog.

diff --git a/app/web/templates/home_onboarded.html b/app/web/templates/home_onboarded.html index 89aeba2..d9974eb 100644 --- a/app/web/templates/home_onboarded.html +++ b/app/web/templates/home_onboarded.html @@ -49,6 +49,21 @@ max-width: 680px; line-height: 1.6; } +/* Inline `` 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 @@
Welcome back, {{ display_name }}

You're all set up

- Open Claude Code in any project under ~/{{ workspace_dir }}/Projects/ + Open Claude Code in any project under ~/{{ workspace_dir }}/Projects/ 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.