redesign amico entity component by kateebonner · Pull Request #12 · harmoniqs/opencode

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonner · 2026-07-09T06:57:49Z

What

Removes the yellow accent rail — the 3px solid var(--v2-icon-icon-accent)border-left (and the onboarding wizard's 4pxborder-top) — from every amicode card surface. Each element keeps its neutral 1px hairline (--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 card
entity-view.tsx — entity-view dialog body
entity-rail.tsx — problem-header rail
ask-card.tsx — question card
run-window.tsx — run window
onboarding-wizard.tsx — wizard panel top rail

Preserved (deliberately)

Focus outlines (outline: … var(--v2-border-border-focus …)) — keyboard accessibility
The gold H-mark, runninglive dots, and accent hover tints
Accent-tinted button/input borders — out of scope; this PR is rails only
Stock components/message-part.css accent border — not an amicode surface; left untouched to avoid upstream rebase churn

Verify

packages/ui typecheck ✓ and full-repo bun typecheck ✓ (pre-push, 23/23)
Style-only change — no logic touched

⚠️ Follow-up — in-flight refactor

There is an uncommittedamicode.css refactor on kate/chat-jitter-motion that 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 gold border on [data-component="amicode-card"]
amicode.css → the run-window:hoverborder-left-color accent

🤖 Generated with Claude Code

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>

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

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

kateebonnerand others added 2 commits July 9, 2026 06:56

kateebonner changed the title ~~fix(amicode): remove the yellow accent rail from card surfaces~~redesign amico entity componentJul 9, 2026

kateebonner merged commit 9fe0ea7 into local/amicodeJul 9, 2026
0 of 4 checks passed

kateebonner mentioned this pull request Jul 15, 2026
feat(amicode): light-mode brand yellow — fill + edge, not a muddy gold ink #30
Closed

Uh oh!

Conversation

kateebonner commented Jul 9, 2026

What

Why

Surfaces (7 files)

Preserved (deliberately)

Verify

⚠️ Follow-up — in-flight refactor

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

kateebonner commented Jul 9, 2026

What

Why

Surfaces (7 files)

Preserved (deliberately)

Verify

⚠️ Follow-up — in-flight refactor

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

kateebonner commented Jul 9, 2026

What

Why

Surfaces (7 files)

Preserved (deliberately)

Verify

⚠️ Follow-up — in-flight refactor

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

kateebonner commented Jul 9, 2026

What

Why

Surfaces (7 files)

Preserved (deliberately)

Verify

⚠️ Follow-up — in-flight refactor

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

kateebonner commented Jul 9, 2026

What