Skip to content

feat(brand): migrate right-ui CLI + right-dashboard to Observatory/jewel#136

Merged
onsails merged 11 commits into
masterfrom
claude/strange-borg-9c9f27
Jun 15, 2026
Merged

feat(brand): migrate right-ui CLI + right-dashboard to Observatory/jewel#136
onsails merged 11 commits into
masterfrom
claude/strange-borg-9c9f27

Conversation

@onsails

@onsails onsails commented Jun 15, 2026

Copy link
Copy Markdown
Owner

Closes #130.

Migrates the two surfaces still on the old "coal & fire" orange brand to Observatory / jewel (docs/brand-guidelines.html, authoritative). Recolor only — no structural changes. Run as a two-stage sprint; see docs/plans/jewel-brand-sprint.md.

Stage 01 — right-ui (CLI) · merged @809d6e3c

  • ORANGE #E8632ARUBY #c75f88 for the rail and claw mark ▐✓ (brand: "the mark is always ruby").
  • Prompt highlighted-cursor > → teal #3bb0c4 (action).
  • Semantic glyphs corrected to brand hexes: warn #e6c06a, err #e2556a, info → teal #3bb0c4 (was blue); ok unchanged.
  • Splash wordmark now branded: right = ruby, agent = muted #b6a8b0 (was plain).
  • NO_COLOR (Mono) and TERM=dumb/non-TTY (Ascii) output stays byte-identical.

Stage 02 — right-dashboard (Telegram Mini App) · merged @964e15de

  • Fixed jewel-dark (brand-forward): --jewel-* CSS tokens are the source of truth in App.vue :root.
  • applyJewelTheme() (telegram.ts) re-points --tg-theme-* at the jewel tokens after Telegram's inline theme injection, so the dashboard always renders the dark plum jewel look regardless of the user's Telegram light/dark theme.
  • Semantics recolored (status pills, metric cards, status dots, badges, danger); MCP/Providers rgba() tints → jewel.
  • Identity: the agent name in AppShell topbar → ruby.
  • Shared ECharts jewel theme (components/charts/jewelChart.ts) applied to all three chart consumers; selected-bar highlight #111827#f1ece9.

Verification

  • right-ui: 55/55 crate tests; right brand-output tests (wizard_brand) 11/11.
  • right-dashboard: typecheck clean, 209/209 Vitest, vite build green; grep gates empty.
  • Full workspace: 2866/2866 parallel + the 3 right integration binaries 53/53 serial + doctests green.
  • Note: a fully-parallel cargo nextest run --workspace shows ~12 pre-existing right-crate init/destroy failures from concurrent cloudflared tunnel-name collisions + missing local OAuth creds — unrelated to this recolor (all pass serially/in isolation).

Copilot AI review requested due to automatic review settings June 15, 2026 17:08

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR completes the migration of the remaining “coal & fire”/Telegram-default styling to the Observatory / jewel brand across the Rust CLI surface (right-ui) and the Telegram mini-app dashboard (right-dashboard), and adds the associated sprint/spec/plan documentation.

Changes:

  • CLI (right-ui): switches rail/mark to ruby, prompt cursor to teal, updates semantic glyph colors, and adds a ruby/muted splash wordmark with updated tests.
  • Dashboard (right-dashboard): introduces jewel CSS tokens as the palette source of truth, forces Telegram --tg-theme-* vars to jewel via applyJewelTheme(), recolors remaining hardcoded accents/semantic tints, and applies a shared jewel ECharts option base (incl. selected-bar highlight).
  • Docs: adds the sprint write-up plus Stage 01/02 spec + implementation plans.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
docs/plans/jewel-brand-sprint.md Adds sprint summary, verification notes, and authoritative palette reference.
docs/plans/02-dashboard-spec.md Specifies fixed jewel-dark approach, token map, tg-theme override, and chart theming requirements.
docs/plans/02-dashboard-plan.md Implementation plan for dashboard recolor, Telegram override, and ECharts theming.
docs/plans/01-cli-spec.md CLI recolor spec (ruby/teal/muted + semantic hexes) and verification gates.
docs/plans/01-cli-plan.md Step-by-step CLI recolor plan and test updates.
crates/right-ui/src/splash.rs Implements theme-aware branded wordmark coloring for the splash line.
crates/right-ui/src/splash_tests.rs Updates splash tests for the new branded wordmark behavior.
crates/right-ui/src/prompts.rs Changes highlighted prompt cursor color from orange to teal + updates tests/docs.
crates/right-ui/src/atoms.rs Replaces ORANGE with RUBY; adds TEAL/MUTED; updates semantic glyph constants.
crates/right-ui/src/atoms_tests.rs Adds regression tests asserting truecolor escapes match jewel palette.
crates/right-dashboard/frontend/src/views/ProviderTypeList.vue Updates hover accent fallback to jewel teal.
crates/right-dashboard/frontend/src/views/ProvidersView.vue Recolors warning notice tint to jewel gold rgba values.
crates/right-dashboard/frontend/src/views/McpView.vue Recolors OAuth status borders and warning notice tint to jewel-aligned rgba values.
crates/right-dashboard/frontend/src/telegram.ts Adds applyJewelTheme() and calls it during Telegram init to override inline tg theme vars.
crates/right-dashboard/frontend/src/telegram.test.ts Adds unit test coverage for applyJewelTheme().
crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue Applies jewel chart base + updates selected-bar highlight to a light color.
crates/right-dashboard/frontend/src/components/charts/LearningFlowChart.vue Applies jewel chart base + jewel tooltip styling.
crates/right-dashboard/frontend/src/components/charts/jewelChart.ts Introduces shared ECharts jewel option fragment and palette.
crates/right-dashboard/frontend/src/components/charts/CostLearningRiver.vue Applies jewel chart base + aligns axis styling to jewel dark values.
crates/right-dashboard/frontend/src/components/AppShell.vue Styles topbar agent name using jewel ruby identity color.
crates/right-dashboard/frontend/src/App.vue Defines --jewel-* tokens, maps --tg-theme-* defaults to jewel, and recolors semantic UI elements.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +25 to +32
fn splash_color_wordmark_is_ruby_and_muted() {
let s = splash(Theme::Color, "0.10.2", "tagline");
assert!(s.contains(ESC), "color splash should emit ANSI");
assert!(s.contains("right agent v0.10.2"));
// "right" in ruby, "agent" in muted; version stays plain.
assert!(
s.contains("\x1b[38;2;199;95;136m"),
"wordmark 'right' not ruby: {s:?}"
);
Comment on lines +3 to +7
/** Option fragment merged into every dashboard ECharts option for jewel-dark legibility. */
export const jewelChartBase = {
backgroundColor: 'transparent',
color: JEWEL_CHART_PALETTE,
textStyle: { color: '#b6a8b0' },
`jewelChartBase` carried `categoryAxis`/`valueAxis` keys that are not
valid top-level ECharts option keys, so every `...jewelChartBase` spread
(CostLearningRiver, LearningFlowChart, UsageSpendChart) leaked dead keys
into the chart root. The two axis objects were also byte-identical.

Split the axis styling into a single shared `jewelAxis` fragment merged
explicitly into `xAxis`/`yAxis`, leaving `jewelChartBase` as a clean
spreadable root. Behavior-neutral (ECharts ignored the stray keys);
removes the duplication and makes the spread API honest.
@onsails onsails merged commit 253be80 into master Jun 15, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Migrate right-ui (CLI) and right-dashboard (Telegram) to Observatory/jewel brand

2 participants