Bring the Familiars page onto the brand palette and SDK shapes - #23
Merged
Conversation
The page was built to emulate Messages, so its accent was iOS blue and its greys were Apple's, and its contract verdict came from a local helper that computed five properties by hand. Both are replaced. Surfaces are the brand's neutrals, the accent is #9A8ECD, and the one gradient is gone -- DESIGN.md rules gradients out without exception, and asks for violet on identity moments rather than on backgrounds, so the user's bubble is a violet tint with a violet hairline rather than a violet fill. The Contract tab now renders the CaveContractReport the SDK exposes, from the same fixtures the Minimal surface uses. That is a restructure rather than a rename: the page showed a note per property, which the SDK has no field for. The real report explains itself through violations and warnings, each naming the file it came from, and keeps the two apart because a violation fails a contract and a warning does not -- Echo keeping no memory and Astra declaring no automatic tier are different answers and should not look alike. An Activity tab comes with those shapes: four windows, success rate, median, tokens, cost and tool failures, with the backfill state shown rather than hidden. A window with no attempts reads "No runs in this window" instead of 0%, because a rate over nothing is unknown. Two mistakes of mine, both found by measuring rather than looking. The new rules were scoped `.chat-demo .fam-*` and matched nothing: this page renders outside .chat-demo, as a sibling under .demo-surface, which is why every existing fam- rule in the file is unscoped too. A probe reported the metric grid computing as `display: block`. And there are two token blocks. .chat-demo and .demo-shell each define --demo-*, so updating one moved the chat surface to the brand while the familiars page went on inheriting Apple's greys from the other. Both are on brand now, with a comment saying why the duplication exists. 107 tests, lint and typecheck clean.
There was a problem hiding this comment.
Pull request overview
Aligns the Familiars demo surface with the brand palette and with the shared “minimal familiar SDK” shapes, so the Familiars page and Minimal surface render from the same contract + analytics fixtures/types.
Changes:
- Switch Familiars contract + activity data to
CaveContractReport/CaveFamiliarAnalyticssourced fromminimal-familiar-sdk. - Add an Activity tab rendering execution analytics windows (including explicit “no runs” and backfill state).
- Update demo CSS tokens and component styling to use the brand neutrals/violet and remove the one CSS gradient usage in
chat-demo.css.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/demo/familiars-page.tsx | Uses shared SDK-shaped fixtures for contract + analytics; adds Activity tab UI. |
| src/demo/chat-demo.css | Updates demo token palette + component colors to brand neutrals/violet; adds styling for contract/analytics sections. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Three from review, and two were about my own comments rather than the code they sat next to. The comments cited "DESIGN.md" as though it were in this repository. It is not -- it lives in OpenCoven/brand, so a reader following the citation found nothing. Every reference now names the repository that holds the file, including the ones already merged in minimal-macos.css. The claim that the brand forbids gradients "without exception" was undercut by two gradients inside the very components being rebranded: the familiar glyph and the chat avatar, both inline in TSX where a stylesheet sweep would never find them. Both are flat now. Gradients do remain in src/styles.css, but that is the Phase 0 scaffold on its own approved direction, so the claim is scoped to this surface rather than overstated. And the danger button took the brand red on its border while keeping #ff6961 for its text, which is half a colour change. 107 tests, lint and typecheck clean.
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.
The Familiars page was built to emulate Messages — iOS blue accent, Apple greys
— and computed its contract verdict from a local helper. This brings it onto the
brand palette and the shapes
@opencoven/cave-clientexposes.SDK shapes
Contract and Activity read
CaveContractReportandCaveFamiliarAnalyticsfromthe same
minimal-familiar-sdk.tsthe Minimal surface uses. One set of types,one set of fixtures — and the cross-repository canary already compiles against
those names, so both surfaces are covered by the same enforcement.
The Contract tab is a restructure, not a rename. The page showed a
noteper property; the SDK has no field for that. The real report explains itself
through
violationsandwarnings, each naming the file it came from, andkeeps them apart because a violation fails a contract and a warning does not.
Echo keeping no memory and Astra declaring no automatic tier are different
answers, and folding them into one count would make them look alike.
The Activity tab comes with those shapes: four windows, success rate, median,
tokens, cost, tool failures. Two things it will not round off — a window with no
attempts reads "No runs in this window" rather than 0%, and the backfill
state is shown, because figures from a partial import are a different claim
from figures drawn from the whole history.
Brand palette
#080808/#0f0f0f/#141414/#1a1a1a)#9A8ECD, replacing iOS blue#30D158/#FF3B30DESIGN.mdallows no exceptionsVerified: zero
linear-gradient, zeroradial-gradient, zerobackdrop-filter,zero occurrences of the old blue, green or light-blue accents.
Two mistakes of mine, both caught by measuring rather than looking
The new CSS matched nothing. I scoped the rules
.chat-demo .fam-*, butthis page renders outside
.chat-demo— it is a sibling under.demo-surface. That is also why every existingfam-rule in the file isunscoped. A probe reported the metric grid computing as
display: block; it isgridnow.There are two token blocks.
.chat-demoand.demo-shelleach define--demo-*. Updating only the first moved the chat surface onto the brand whilethe Familiars page went on inheriting Apple's greys from the second — a
half-branded result that looked plausible in isolation. Both are updated, with a
comment recording why the duplication exists so the next person does not fix one
and stop.
Checks
107 tests, lint and typecheck clean.
🤖 Generated with Claude Code