Demo budget card stays visible when a personal key overrides the shared demo key

The demo budget card was disappearing when a user saved their own Case.dev API key. Since the personal key only overrides the shared key rather than erasing the underlying budget, the card should still be visible - just labeled differently. This pair of commits makes that distinction visible in the UI.

chat-ui

The first commit (918566b0) changes the render condition from {usingDemoKey && ...} to {hostedDemo && ...}, so the card renders whenever demo mode is active rather than only when the demo key is in use. DemoBudgetSummary gets a usingDemoKey prop and shows either the normal remaining/exhausted state or a "your personal Case.dev key is active, so demo credits are not being used" message. The badge flips from "Active"/"Exhausted" to "Bypassed" when a personal key is in effect.

The second commit (bae6a181) refines this by passing caseKeyStatus instead of the derived boolean, and distinguishes between personalKeyActive (user key saved and configured) and a generic bypassed state that covers any non-demo source. The "bypassed" text splits into two variants: one specific to a confirmed personal key ("Your personal Case.dev key is active...") and one more generic for other bypass states ("Demo credits are available, but this session is not currently using the shared demo key."). The badge color for bypassed drops from emerald to gray.

Both commits are frontend-only. The change is about accurate state representation in the Account > Models page for hosted demo users, not a behavior change anywhere in the billing path.

So what Skip unless you're running a metered hosted demo and want the budget card behavior. The pattern - keeping a quota widget visible even when it's not actively being spent, and labeling that state clearly - is a minor UX detail that's easy to get wrong and annoying to debug later.

View this fork on GitHub →

Spotted something wrong? Or know the PR text has fresher detail than the writeup above?

Commits in this thread

2 commits from CaseMark/mikeoss-casedotdev, oldest first. Source extracted verbatim from the harvested git log.

SHA Subject Author Date
918566b0 Show demo budget when personal key is active kveton 2026-05-04 ↗ GitHub
bae6a181 Clarify bypassed demo budget state kveton 2026-05-04 ↗ GitHub

Capture this thread into my fork

Download a single Markdown prompt that tells Claude how to port every commit above into your working tree — adapting paths and structure to match your repo. Run it via claude -p < capture-thread-280.md from inside the repo you want the changes in.

⬇ Download capture-thread-280.md