redesign(ai): restyle the signed-in account card to the levelcode.ai classic look - #50
Merged
ndemianc merged 4 commits intoJul 26, 2026
Merged
redesign(ai): restyle the signed-in account card to the levelcode.ai classic look#50ndemianc merged 4 commits into
ndemianc merged 4 commits into
Conversation
Copy link
Copy Markdown
Contributor
Sorry, something went wrong.
…classic look
The Manage-account popover referenced a specific model ("Plan: Max · Kimi K2.7 Code",
and "unlock Kimi K2.7 Code" on the free CTA) — model churn that confused clients — and
carried a verbose "Gateway mode: … proxied by the account server … levelcode.ai.providerMode"
explainer that wasn't pulling its weight.
Rebuilt to match the levelcode.ai "classic" (atom.io) aesthetic used across the site:
- Fixed brand palette scoped to `.acctcard.classic` — One Dark by default, One Light under
body.vscode-light (the convention the rest of this webview already uses). One violet accent
(#7d6bff / #5b3fd6), hairline borders, 6px card / 4px controls, mono + tabular metadata.
- Model-agnostic: the plan line becomes a mono `plan · Max` pill (BYOK: `your own key`); the
free-tier CTA is just "Upgrade to Pro". No model name anywhere.
- The gateway explainer is gone. Its space isn't refilled with credits (those live on
/ai/account, one click away via Manage account) — the card now shows the email (mono) under
the name and stays uncluttered. BYOK keeps a one-line "keys never leave your machine".
- Sign out becomes a quiet accent link; removed the now-dead privacyNote().
Verified: chat.html scripts parse (0 errors); webviewCss + creditFormat suites green; no
model refs / credits / privacyNote left in the card. (Design matches the approved mockup;
a live webview render needs the VS Code host.)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor
There was a problem hiding this comment.
Pull request overview
This PR redesigns the signed-in Manage-account popover UI in extensions/levelcode-ai to match the levelcode.ai “classic” visual style while removing model-specific and overly verbose copy.
Changes:
- Added a new .acctcard.classic style block with fixed brand palette (dark default, light under body.vscode-light).
- Updated renderAccount() signed-in markup to be model-agnostic (plan pill), remove credits/explainer text, and simplify actions/layout.
- Removed the now-dead privacyNote() rendering path in the signed-in card.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sorry, something went wrong.
The neutral hollow-ring avatar read as empty, especially in One Dark. Fill it with a soft
accent tint + violet initials — anchored and on-brand, matching the original card's
tinted-avatar approach in the new classic palette.
(Note: the "broken/left-aligned" look in the extracted-CSS preview was a preview bug — it
dropped the base `.acctbody { text-align: center }` rule. The shipped card centers all its
content; verified the rule is present.)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Comment thread
extensions/levelcode-ai/media/chat.html
…review) The card's comment claimed "tabular-nums metadata" but no rule set font-variant-numeric, so digits (the email, any future counter) weren't aligned. Set it on the .acctcard.classic root — the house pattern here (used in ~10 other places) — so the comment is true and numbers align throughout the card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Comment thread
extensions/levelcode-ai/media/chat.html
Outdated
…card (PR #50 review) The classic card used a fixed brand palette; high-contrast DARK (body.vscode-high-contrast) fell through to the One Dark brand palette, overriding the user's accessibility theme, and high-contrast LIGHT was mapped to the light brand palette rather than HC tokens. Now BOTH high-contrast modes map the card's --cc-* vars onto the editor's own tokens — --vscode-foreground / editor(Widget)-background / descriptionForeground / textLink-foreground, and crucially --vscode-contrastBorder for the required visible edges. The lone filled control (free-tier Upgrade) takes --vscode-button-* instead of white-on-accent. Normal light/dark keep the brand look; HC users keep their contrast. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Comment thread
extensions/levelcode-ai/media/chat.html
Comment on lines
+872
to
+876
| /* The one filled control (free-tier Upgrade) takes the editor's button colors in HC, not white-on-accent. */ | ||
| body.vscode-high-contrast .acctcard.classic .abtn.primary, body.vscode-high-contrast-light .acctcard.classic .abtn.primary { | ||
| background: var(--vscode-button-background); color: var(--vscode-button-foreground); | ||
| border: 1px solid var(--vscode-contrastBorder, transparent); | ||
| } |
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
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.
Redesigns the Manage-account popover (signed-in state) in the editor.
Why
Three problems with the old card:
What changed
Rebuilt to the levelcode.ai "classic" (atom.io) look used across the /ai/* pages:
Layout: avatar → name → email → plan · Max pill → (Upgrade, free only) → Manage account → Sign out → Synced.
Mockup
The approved design: https://claude.ai/code/artifact/c0fbc518-d74b-4bad-b5c1-9056e0483c81 (the shipped card drops the credits line the mockup showed, per the decision to keep credits on /ai/account).
Verification
🤖 Generated with Claude Code