redesign amico entity component - #12
Merged
Merged
Conversation
The 3px accent-colored border-left (and the onboarding wizard's 4px accent border-top) read as a heavy yellow outline on every amicode card. Drop the rail from the home dashboard hero cards, the in-chat receipt/entity/ask/run cards, the problem rail, and the onboarding wizard — each keeps its neutral 1px hairline. The H-mark, live dots, hover tints, and focus outlines (keyboard a11y) are untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Fold the full AMICO receipt redesign into the rail removal: instead of just dropping the accent bar, give the whole family one visual language. - receipt card (card.tsx): the H-mark doubles as the working spinner, diffs render structured (dimmed old -> new) instead of a run-on string, a green check settles the done state, failure tints the card red, and it is a real <button> with a focus ring (was a click-only <div>, invisible to keyboard) - entity view (entity-view.tsx): raw keys lead with a human label and keep the technical name beneath (params.drive_max -> "Drive max"), nested fields get a subhead, the arrived-from change is highlighted, the edit-in-chat affordance is always visible, and a footer states the read-only / edit-in-chat contract - rail / ask-card / run-window share the surface + H-mark signature - identity via an accent-tinted wash + gold hairline, no side rail - new pure helpers receiptParts / humanizeKey / fieldGroup (receiptText output unchanged); interaction/animation styles in new amicode.css Typecheck clean; 66/66 amicode tests pass; app build succeeds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
kateebonner
changed the title
kateebonner
added a commit
that referenced
this pull request
Jul 15, 2026
…d ink The default theme's light accent used a dimmed gold (`#857A00`/`#6B6200`) for `text-accent`/`icon-accent` because raw `#FFF676` is unreadable on a light bg (1.1:1). But that made every accent text/icon/border read muddy on light and lost the brand. This mirrors the amicode webview fix (harmoniqs/amicode#140): yellow is a FILL, never an ink. - oc-2.json (LIGHT v2Overrides only; dark untouched): text/icon-accent gold → neutral dark ink (grey-1000 / grey-900). This turns `icon-accent` into the "edge" role — dark on light, lemon on dark — for free. - amicode.css: the solid brand dots (.amc-livedot, anchored timeline node) now fill with `bg-accent` (true lemon) and take `icon-accent` as a 1px edge — a dark hairline on light, invisible (lemon-on-lemon) on dark. Dark render is byte-for-byte unchanged. oc-2.json's v2Overrides is hand-maintained for the brand (theme.css is still upstream blue); do NOT run `generate:v2-oc2` — it would revert every brand accent to blue. Patch map (AMICODE-PATCHES.md #12) updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Removes the yellow accent rail — the
3px solid var(--v2-icon-icon-accent)border-left(and the onboarding wizard's4pxborder-top) — from every amicode card surface. Each element keeps its neutral1pxhairline (--v2-border-border-base).Why
The accent rail read as a heavy yellow outline on every card. Dropping it gives the surfaces a cleaner, quieter frame while the H-mark keeps carrying brand identity.
Surfaces (7 files)
home-cards.tsx— home dashboard hero cards (HERO_CARD)card.tsx— in-chat receipt cardentity-view.tsx— entity-view dialog bodyentity-rail.tsx— problem-header railask-card.tsx— question cardrun-window.tsx— run windowonboarding-wizard.tsx— wizard panel top railPreserved (deliberately)
outline: … var(--v2-border-border-focus …)) — keyboard accessibilityrunninglive dots, and accent hover tintscomponents/message-part.cssaccent border — not an amicode surface; left untouched to avoid upstream rebase churnVerify
packages/uitypecheck ✓ and full-repobun typecheck✓ (pre-push, 23/23)There is an uncommitted
amicode.cssrefactor onkate/chat-jitter-motionthat re-introduces the rail in CSS. When that work lands, also drop these so the in-chat cards stay rail-free:amicode.css→border-left: 3px solid var(--v2-icon-icon-accent)on the shared card surfaces (amicode-entity-rail/ask-card/run-window)amicode.css→ the faint goldborderon[data-component="amicode-card"]amicode.css→ therun-window:hoverborder-left-coloraccent🤖 Generated with Claude Code