From 564fcdeffc6f4ba891f91cee1b3a7ca3309974c3 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 17:33:13 +0200
Subject: [PATCH 1/9] docs(sprint): seed jewel-brand migration sprint doc

---
 docs/plans/jewel-brand-sprint.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 docs/plans/jewel-brand-sprint.md

diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
new file mode 100644
index 000000000..d8516676b
--- /dev/null
+++ b/docs/plans/jewel-brand-sprint.md
@@ -0,0 +1,31 @@
+# Migrate right-ui (CLI) + right-dashboard (Telegram) to Observatory/jewel brand — Sprint
+
+Integration: claude/strange-borg-9c9f27  ·  Base: master
+Engine: mimo
+Issue: https://github.com/onsails/right-agent/issues/130 (follow-up to #129)
+Legend: todo · brainstorming · planned · executing · review · blocked · done
+
+## Stages
+1. [todo] CLI       — right-ui (Rust): replace orange accents → jewel semantic hexes; keep NO_COLOR/TERM=dumb fallbacks.
+2. [todo] Dashboard — right-dashboard (Vue): introduce jewel palette tokens; accent→teal, identity→ruby, warm→gold; replace ad-hoc Telegram-blue/scattered hexes.
+
+## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)
+- base plum `#121016`, panel `#201a26`, lines `#2d2533` / `#3e3146`
+- ruby `#c75f88` = identity (word "right" + claw mark)
+- teal `#3bb0c4` = action / structure / links
+- gold `#cda14b` = warmth / secondary highlight
+- text `#f1ece9`, muted `#b6a8b0`, dim `#6f6169`
+- semantic: ok `#6bbf59`, warn `#e6c06a`, err `#e2556a`, info `#3bb0c4`
+
+## Notes
+- Recolor only — not a structural change. Dashboard keeps `right_ui::*`/`AsyncState`/`CollapsibleSection` primitives and existing component structure.
+- right-ui current orange: `ORANGE = #E8632A` const in `crates/right-ui/src/atoms.rs`; `BRAND_ORANGE` in `prompts.rs`; status glyphs in atoms/line/recap/splash/theme.
+- Dashboard is NOT literally orange today — it's Telegram-native blue (`#2481cc`/`#17212b`) + scattered hardcoded hexes with no jewel tokens. Migration introduces palette CSS custom properties.
+
+## Decisions log
+- 2-stage decomposition (CLI then dashboard); CLI first fixes canonical jewel hexes the dashboard reuses.
+- Integration branch = current worktree branch `claude/strange-borg-9c9f27` (no new branch, per user rule).
+- Engine: mimo, not pinned → resolve model per stage via mimo-resolve.
+
+## Open questions
+- (none yet)

From 4de5d654ee6345fbeb7762763dad40e8eb0c0f38 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 17:37:35 +0200
Subject: [PATCH 2/9] docs(sprint): stage 01 CLI spec + plan

---
 docs/plans/01-cli-plan.md        | 210 +++++++++++++++++++++++++++++++
 docs/plans/01-cli-spec.md        |  75 +++++++++++
 docs/plans/jewel-brand-sprint.md |   2 +-
 3 files changed, 286 insertions(+), 1 deletion(-)
 create mode 100644 docs/plans/01-cli-plan.md
 create mode 100644 docs/plans/01-cli-spec.md

diff --git a/docs/plans/01-cli-plan.md b/docs/plans/01-cli-plan.md
new file mode 100644
index 000000000..4b73658ad
--- /dev/null
+++ b/docs/plans/01-cli-plan.md
@@ -0,0 +1,210 @@
+# Stage 01 — right-ui (CLI) jewel recolor — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Recolor `right-ui` from coal/fire orange (`#E8632A`) to the
+Observatory/jewel palette — ruby identity, teal action, corrected semantic
+glyphs, and a brand wordmark in the splash — without any structural change.
+
+**Architecture:** All ANSI color originates in `crates/right-ui/src/atoms.rs`
+(palette consts + `Rail` + `Glyph`) and `prompts.rs` (cursor). `splash.rs` gains
+theme-aware wordmark coloring that reuses the atoms palette consts. Mono/Ascii
+tiers stay byte-identical (no ANSI). Spec: `docs/plans/01-cli-spec.md`.
+
+**Tech Stack:** Rust (edition 2024), `owo-colors` (`truecolor`), `inquire`
+(`Color::Rgb`), `cargo nextest`.
+
+**Jewel RGB reference (decimal, for `truecolor` escapes `\x1b[38;2;R;G;Bm`):**
+- ruby `#c75f88` = (199, 95, 136)  →  escape `\x1b[38;2;199;95;136m`
+- teal `#3bb0c4` = (59, 176, 196)  →  escape `\x1b[38;2;59;176;196m`
+- muted `#b6a8b0` = (182, 168, 176)
+- ok `#6bbf59` = (107, 191, 89)  (unchanged)
+- warn `#e6c06a` = (230, 192, 106)
+- err `#e2556a` = (226, 85, 106)
+- info `#3bb0c4` = (59, 176, 196)  (== teal)
+
+**Commit policy:** Do NOT `git commit` per task. The sprint stage-runner commits
+and lands the whole stage after review + verify (mechanics §7). Leave the working
+tree dirty; just keep each task green.
+
+---
+
+### Task 1: atoms.rs — jewel palette constants
+
+**Files:**
+- Modify: `crates/right-ui/src/atoms.rs`
+- Test: `crates/right-ui/src/atoms_tests.rs`
+
+**Step 1 — Write failing regression tests.** Append to `atoms_tests.rs`:
+
+```rust
+// --- jewel palette regression (truecolor escapes) ---
+
+#[test]
+fn rail_is_ruby() {
+    // ruby #c75f88 = (199, 95, 136)
+    let s = Rail::prefix(Theme::Color);
+    assert!(s.contains("\x1b[38;2;199;95;136m"), "rail not ruby: {s:?}");
+}
+
+#[test]
+fn mark_is_ruby() {
+    let s = Rail::mark(Theme::Color);
+    assert!(s.contains("\x1b[38;2;199;95;136m"), "mark not ruby: {s:?}");
+}
+
+#[test]
+fn glyph_semantic_hexes() {
+    assert!(Glyph::Ok.render(Theme::Color).contains("\x1b[38;2;107;191;89m"));
+    assert!(Glyph::Warn.render(Theme::Color).contains("\x1b[38;2;230;192;106m"));
+    assert!(Glyph::Err.render(Theme::Color).contains("\x1b[38;2;226;85;106m"));
+    assert!(Glyph::Info.render(Theme::Color).contains("\x1b[38;2;59;176;196m"));
+}
+```
+
+**Step 2 — Run, verify red.**
+Run: `devenv shell -- cargo nextest run -p right-ui rail_is_ruby mark_is_ruby glyph_semantic_hexes`
+Expected: FAIL (still orange `232;99;42`, warn `217;168;42`, etc.).
+
+**Step 3 — Edit the consts and rename.** In `atoms.rs`:
+- Replace `pub(crate) const ORANGE: (u8, u8, u8) = (0xE8, 0x63, 0x2A);`
+  with `pub(crate) const RUBY: (u8, u8, u8) = (0xC7, 0x5F, 0x88);`
+- Add `pub(crate) const MUTED: (u8, u8, u8) = (0xB6, 0xA8, 0xB0);`
+  and `pub(crate) const TEAL: (u8, u8, u8) = (0x3B, 0xB0, 0xC4);`
+  (TEAL/MUTED are used by prompts.rs / splash.rs in later tasks.)
+- `const OK` stays `(0x6B, 0xBF, 0x59)`.
+- `const WARN: (u8,u8,u8) = (0xE6, 0xC0, 0x6A);`
+- `const ERR:  (u8,u8,u8) = (0xE2, 0x55, 0x6A);`
+- `const INFO: (u8,u8,u8) = (0x3B, 0xB0, 0xC4);`
+- Replace the three `ORANGE.0, ORANGE.1, ORANGE.2` uses in `Rail` with
+  `RUBY.0, RUBY.1, RUBY.2`.
+- Update the module doc comment (line ~4) "orange rail" → "ruby rail".
+
+> Note: `TEAL`/`MUTED` may trip `dead_code` until Tasks 2–3 use them. If you do
+> Task 1 in isolation and the crate fails to compile on the unused const, add the
+> consts in the task that first consumes them instead, or complete Tasks 1–3 as
+> one edit before the first full build. Either ordering is fine; keep them in
+> `atoms.rs` as the single palette source.
+
+**Step 4 — Run, verify green.**
+Run: `devenv shell -- cargo nextest run -p right-ui`
+Expected: PASS (existing atoms tests + new regression tests).
+
+---
+
+### Task 2: prompts.rs — highlighted cursor → teal
+
+**Files:**
+- Modify: `crates/right-ui/src/prompts.rs` (impl + its inline `#[cfg(test)] mod tests`)
+
+**Step 1 — Update the test first.** In the `tests` module:
+- `color_theme_only_colors_highlighted_cursor`: the assertion
+  `assert_eq!(cfg.highlighted_option_prefix.style.fg, Some(BRAND_ORANGE));`
+  becomes `Some(CURSOR_TEAL)` (new const name from Step 2).
+
+**Step 2 — Edit impl.**
+- Change `use crate::atoms::ORANGE;` → `use crate::atoms::TEAL;`
+- Replace the `BRAND_ORANGE` const with:
+  ```rust
+  const CURSOR_TEAL: Color = Color::Rgb { r: TEAL.0, g: TEAL.1, b: TEAL.2 };
+  ```
+- Update both references (`with_fg(BRAND_ORANGE)` and the test) to `CURSOR_TEAL`.
+- Update the module doc comment (lines ~6–9): "brand orange" → "brand teal";
+  drop the now-stale parenthetical about orange if it no longer reads true.
+
+**Step 3 — Run, verify green.**
+Run: `devenv shell -- cargo nextest run -p right-ui prompts`
+Expected: PASS.
+
+---
+
+### Task 3: splash.rs — brand wordmark (`right` ruby + `agent` muted)
+
+**Files:**
+- Modify: `crates/right-ui/src/splash.rs`
+- Test: `crates/right-ui/src/splash_tests.rs`
+
+**Step 1 — Update/replace tests.** The current Color-theme test asserts the
+contiguous substring `"right agent v0.10.2"`, which is no longer contiguous once
+ANSI is interleaved. Replace `splash_color_has_ansi_no_unicode_loss` with:
+
+```rust
+#[test]
+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");
+    // "right" in ruby, "agent" in muted; version stays plain.
+    assert!(s.contains("\x1b[38;2;199;95;136m"), "wordmark 'right' not ruby: {s:?}");
+    assert!(s.contains("\x1b[38;2;182;168;176m"), "wordmark 'agent' not muted: {s:?}");
+    assert!(s.contains("v0.10.2"), "version text missing: {s:?}");
+}
+```
+Leave `splash_mono_three_lines`, `splash_ascii`, `splash_mono_no_ansi`,
+`splash_ascii_no_unicode_atoms` unchanged — Mono/Ascii output must stay
+byte-identical (`"▐✓ right agent v0.10.2"` / `"|* right agent v0.10.2"`).
+
+**Step 2 — Run, verify red.**
+Run: `devenv shell -- cargo nextest run -p right-ui splash`
+Expected: FAIL on the new ruby/muted assertions.
+
+**Step 3 — Implement wordmark coloring.** In `splash.rs`:
+- Add `use owo_colors::OwoColorize;` and `use crate::atoms::{MUTED, RUBY};`.
+- Add a private helper:
+  ```rust
+  /// Brand wordmark: `right` (ruby) + `agent` (muted) in Color; plain otherwise.
+  fn wordmark(theme: Theme) -> String {
+      match theme {
+          Theme::Color => format!(
+              "{} {}",
+              "right".truecolor(RUBY.0, RUBY.1, RUBY.2),
+              "agent".truecolor(MUTED.0, MUTED.1, MUTED.2),
+          ),
+          Theme::Mono | Theme::Ascii => "right agent".to_string(),
+      }
+  }
+  ```
+- In `splash`, replace the line-1 construction
+  `out.push_str("right agent v"); out.push_str(version);`
+  with:
+  ```rust
+  out.push_str(&wordmark(theme));
+  out.push_str(" v");
+  out.push_str(version);
+  ```
+  (Mark `▐✓ ` and the trailing space before the wordmark are unchanged.)
+
+**Step 4 — Run, verify green.**
+Run: `devenv shell -- cargo nextest run -p right-ui splash`
+Expected: PASS. Confirm Mono line is still exactly `"▐✓ right agent v0.10.2"`.
+
+---
+
+### Task 4: cleanup + grep gate + final stage verification
+
+**Step 1 — Grep gate.** From repo root:
+Run: `rg -n -i "0xE8, 0x63, 0x2A|#E8632A|ORANGE|orange" crates/right-ui/src`
+Expected: NO matches (all renamed; doc comments updated). If any remain, fix the
+wording/value; "orange" must not appear in `right-ui` source.
+
+**Step 2 — Build clean.**
+Run: `devenv shell -- cargo build -p right-ui`
+Expected: no warnings about unused `TEAL`/`MUTED`/`RUBY` (all consumed).
+
+**Step 3 — Full crate test.**
+Run: `devenv shell -- cargo nextest run -p right-ui`
+Expected: ALL green.
+
+**Step 4 — Clippy (crate-scoped).**
+Run: `devenv shell -- cargo clippy -p right-ui -- -D warnings`
+Expected: clean.
+
+---
+
+## Stage completion gate (handled by stage-runner, not per-task)
+- `cargo nextest run -p right-ui` green, `cargo clippy -p right-ui` clean,
+  grep gate empty.
+- Code review (`/code-review high --fix`) clean or all findings resolved.
+- Then commit + merge `$BR` into integration via `--no-ff` + remove worktree.
+- The mandatory full-workspace test (`cargo nextest run --workspace` +
+  `cargo test --doc --workspace`) is run once at the END of the whole sprint
+  (after Stage 02), not per stage.
diff --git a/docs/plans/01-cli-spec.md b/docs/plans/01-cli-spec.md
new file mode 100644
index 000000000..06b029762
--- /dev/null
+++ b/docs/plans/01-cli-spec.md
@@ -0,0 +1,75 @@
+# Stage 01 — right-ui (CLI) → Observatory/jewel — Spec
+
+## Goal
+Recolor the `right-ui` crate from the old "coal & fire" orange brand to the
+Observatory/jewel palette, matching `docs/brand-guidelines.html` (v2). Recolor
+only — no structural/API changes. `NO_COLOR` (Mono) and `TERM=dumb`/non-TTY
+(Ascii) tiers must keep producing identical plain output (no ANSI).
+
+## Authoritative palette (from brand guide)
+- ruby `#c75f88` = identity (mark + the word `right`)
+- teal `#3bb0c4` = action / structure / links / info
+- muted `#b6a8b0` = secondary text (the word `agent`)
+- semantic: ok `#6bbf59`, warn `#e6c06a`, err `#e2556a`, info `#3bb0c4`
+- gold `#cda14b` = warmth/secondary — **not used in the CLI** (YAGNI; decided).
+
+## Color surface (the only callsites — verified by grep)
+All ANSI color lives in two files; `splash.rs` adds wordmark coloring.
+1. `crates/right-ui/src/atoms.rs`
+   - `ORANGE` const `#E8632A` → replace with `RUBY` `#c75f88`. Used by
+     `Rail::{prefix,mark,blank}` for the rail `▐` and claw mark `▐✓`.
+     Brand guide: "the mark is always rendered in ruby."
+   - Semantic glyph consts corrected to brand hexes:
+     - `OK` `#6BBF59` → unchanged (already brand `#6bbf59`).
+     - `WARN` `#D9A82A` → `#E6C06A`.
+     - `ERR` `#E03C3C` → `#E2556A`.
+     - `INFO` `#4A90E2` (blue) → `#3BB0C4` (teal).
+2. `crates/right-ui/src/prompts.rs`
+   - `BRAND_ORANGE` (currently aliases `ORANGE`) → new `TEAL` `#3bb0c4`
+     for the highlighted-option cursor `>` (action/focal). Rename the const to
+     `CURSOR_TEAL` (or keep a clearly-named teal const); stop importing `ORANGE`.
+3. `crates/right-ui/src/splash.rs`
+   - Line 1 currently pushes `"right agent v<version>"` as **plain text**.
+     Apply the brand wordmark in `Theme::Color` only:
+     - `right` → ruby `#c75f88`
+     - ` agent` → muted `#b6a8b0`
+     - ` v<version>` → default (uncolored).
+   - The leading `▐✓ ` (claw mark) already comes from `Rail::mark` (now ruby).
+   - `Theme::Mono` and `Theme::Ascii`: wordmark stays plain (no ANSI) — output
+     byte-identical to today.
+
+## Naming / constants
+- Introduce shared jewel constants once (in `atoms.rs`) and reuse: `RUBY`,
+  `TEAL`, `MUTED` as `(u8,u8,u8)` tuples, matching the existing const style.
+- `prompts.rs` builds its `comfy`/`inquire` `Color::Rgb` from the shared tuple
+  rather than redefining the literal, to keep one source of truth.
+- Update doc comments that say "orange" (atoms.rs header, prompts.rs header) to
+  "ruby"/"teal" as appropriate.
+
+## Out of scope
+- No new themes, no `--no-color` flag work, no changes to detection logic in
+  `theme.rs`, no changes to `line.rs`/`recap.rs`/`header.rs`/`writer.rs`
+  (they delegate to atoms and need no edits).
+- Dashboard (Stage 02).
+
+## Verification criteria
+- `cargo build -p right-ui` clean.
+- `cargo nextest run -p right-ui` green after test updates.
+- Tests to update (all in `crates/right-ui/src/*_tests.rs`):
+  - `atoms_tests.rs`: any assertion embedding the orange truecolor escape
+    (`\x1b[38;2;232;99;42m`) or referencing `ORANGE`; update to ruby
+    `\x1b[38;2;199;95;136m`; update warn/err/info escape assertions to new hexes.
+  - `prompts_tests.rs` (in `prompts.rs` `#[cfg(test)]`): `BRAND_ORANGE`
+    assertion → new teal const.
+  - `splash_tests.rs`: add/adjust a `Theme::Color` assertion proving the
+    wordmark carries ruby+muted ANSI; assert Mono/Ascii lines are byte-identical
+    to today (`"▐✓ right agent v0.10.2"` / `"|* right agent v0.10.2"`).
+- Grep gate: no `0xE8, 0x63, 0x2A` / `#E8632A` / `ORANGE` / "orange" remains in
+  `crates/right-ui/src` (except possibly a CHANGELOG-style comment — none expected).
+- Brand-conformance rule (AGENTS.md): all user-facing output still flows through
+  `right_ui::*`; this stage only changes hex values, not the routing.
+
+## TDD note
+For the wordmark (new behavior), write the failing `splash.rs` Color-theme test
+first (assert ruby+muted ANSI present), confirm red, then implement. The const
+swaps in atoms/prompts are mechanical — update tests and impl together.
diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
index d8516676b..434708318 100644
--- a/docs/plans/jewel-brand-sprint.md
+++ b/docs/plans/jewel-brand-sprint.md
@@ -6,7 +6,7 @@ Issue: https://github.com/onsails/right-agent/issues/130 (follow-up to #129)
 Legend: todo · brainstorming · planned · executing · review · blocked · done
 
 ## Stages
-1. [todo] CLI       — right-ui (Rust): replace orange accents → jewel semantic hexes; keep NO_COLOR/TERM=dumb fallbacks.
+1. [planned] CLI    — right-ui (Rust): replace orange accents → jewel semantic hexes; keep NO_COLOR/TERM=dumb fallbacks. spec:01-cli-spec.md plan:01-cli-plan.md
 2. [todo] Dashboard — right-dashboard (Vue): introduce jewel palette tokens; accent→teal, identity→ruby, warm→gold; replace ad-hoc Telegram-blue/scattered hexes.
 
 ## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)

From 59ac254c6eac00dfb01f3b37154e611efad4828d Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 17:58:59 +0200
Subject: [PATCH 3/9] feat(jewel-brand): stage 01 right-ui CLI jewel recolor

---
 crates/right-ui/src/atoms.rs        | 18 +++++++------
 crates/right-ui/src/atoms_tests.rs  | 39 +++++++++++++++++++++++++++++
 crates/right-ui/src/prompts.rs      | 20 +++++++--------
 crates/right-ui/src/splash.rs       | 19 ++++++++++++--
 crates/right-ui/src/splash_tests.rs | 13 ++++++++--
 5 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/crates/right-ui/src/atoms.rs b/crates/right-ui/src/atoms.rs
index 7ebd2f1a2..6c070b65e 100644
--- a/crates/right-ui/src/atoms.rs
+++ b/crates/right-ui/src/atoms.rs
@@ -1,7 +1,7 @@
 //! Brand atoms — rail (`▐`), mark (`▐✓`), and semantic glyphs (`✓ ! ✗ …`).
 //!
 //! Color values come from the brand guide. Three render tiers:
-//! * `Color`: orange rail + colored Unicode glyphs via owo-colors truecolor
+//! * `Color`: ruby rail + colored Unicode glyphs via owo-colors truecolor
 //! * `Mono`: same glyphs without ANSI
 //! * `Ascii`: `|` rail + bracketed text (`[ok]/[warn]/[err]/[…]`)
 
@@ -9,11 +9,13 @@ use owo_colors::OwoColorize;
 
 use crate::theme::Theme;
 
-pub(crate) const ORANGE: (u8, u8, u8) = (0xE8, 0x63, 0x2A);
+pub(crate) const RUBY: (u8, u8, u8) = (0xC7, 0x5F, 0x88);
+pub(crate) const MUTED: (u8, u8, u8) = (0xB6, 0xA8, 0xB0);
+pub(crate) const TEAL: (u8, u8, u8) = (0x3B, 0xB0, 0xC4);
 const OK: (u8, u8, u8) = (0x6B, 0xBF, 0x59);
-const WARN: (u8, u8, u8) = (0xD9, 0xA8, 0x2A);
-const ERR: (u8, u8, u8) = (0xE0, 0x3C, 0x3C);
-const INFO: (u8, u8, u8) = (0x4A, 0x90, 0xE2);
+const WARN: (u8, u8, u8) = (0xE6, 0xC0, 0x6A);
+const ERR: (u8, u8, u8) = (0xE2, 0x55, 0x6A);
+const INFO: (u8, u8, u8) = (0x3B, 0xB0, 0xC4);
 
 pub struct Rail;
 
@@ -21,7 +23,7 @@ impl Rail {
     /// `"▐  "` (Color/Mono) or `"|  "` (Ascii). Always 4 visible cells.
     pub fn prefix(theme: Theme) -> String {
         match theme {
-            Theme::Color => format!("{}  ", "▐".truecolor(ORANGE.0, ORANGE.1, ORANGE.2)),
+            Theme::Color => format!("{}  ", "▐".truecolor(RUBY.0, RUBY.1, RUBY.2)),
             Theme::Mono => "▐  ".to_string(),
             Theme::Ascii => "|  ".to_string(),
         }
@@ -30,7 +32,7 @@ impl Rail {
     /// `"▐✓"` (Color/Mono) or `"|*"` (Ascii). 2 visible cells.
     pub fn mark(theme: Theme) -> String {
         match theme {
-            Theme::Color => format!("{}", "▐✓".truecolor(ORANGE.0, ORANGE.1, ORANGE.2)),
+            Theme::Color => format!("{}", "▐✓".truecolor(RUBY.0, RUBY.1, RUBY.2)),
             Theme::Mono => "▐✓".to_string(),
             Theme::Ascii => "|*".to_string(),
         }
@@ -39,7 +41,7 @@ impl Rail {
     /// `"▐"` (Color/Mono) or `"|"` (Ascii). For blank rail rows.
     pub fn blank(theme: Theme) -> String {
         match theme {
-            Theme::Color => format!("{}", "▐".truecolor(ORANGE.0, ORANGE.1, ORANGE.2)),
+            Theme::Color => format!("{}", "▐".truecolor(RUBY.0, RUBY.1, RUBY.2)),
             Theme::Mono => "▐".to_string(),
             Theme::Ascii => "|".to_string(),
         }
diff --git a/crates/right-ui/src/atoms_tests.rs b/crates/right-ui/src/atoms_tests.rs
index 0e4c65bc3..87773e6ee 100644
--- a/crates/right-ui/src/atoms_tests.rs
+++ b/crates/right-ui/src/atoms_tests.rs
@@ -118,3 +118,42 @@ fn no_ansi_in_mono_or_ascii() {
         }
     }
 }
+
+// --- jewel palette regression (truecolor escapes) ---
+
+#[test]
+fn rail_is_ruby() {
+    // ruby #c75f88 = (199, 95, 136)
+    let s = Rail::prefix(Theme::Color);
+    assert!(s.contains("\x1b[38;2;199;95;136m"), "rail not ruby: {s:?}");
+}
+
+#[test]
+fn mark_is_ruby() {
+    let s = Rail::mark(Theme::Color);
+    assert!(s.contains("\x1b[38;2;199;95;136m"), "mark not ruby: {s:?}");
+}
+
+#[test]
+fn glyph_semantic_hexes() {
+    assert!(
+        Glyph::Ok
+            .render(Theme::Color)
+            .contains("\x1b[38;2;107;191;89m")
+    );
+    assert!(
+        Glyph::Warn
+            .render(Theme::Color)
+            .contains("\x1b[38;2;230;192;106m")
+    );
+    assert!(
+        Glyph::Err
+            .render(Theme::Color)
+            .contains("\x1b[38;2;226;85;106m")
+    );
+    assert!(
+        Glyph::Info
+            .render(Theme::Color)
+            .contains("\x1b[38;2;59;176;196m")
+    );
+}
diff --git a/crates/right-ui/src/prompts.rs b/crates/right-ui/src/prompts.rs
index dd8b42ac2..70bc6f137 100644
--- a/crates/right-ui/src/prompts.rs
+++ b/crates/right-ui/src/prompts.rs
@@ -4,30 +4,30 @@
 //! options LightCyan — both clash with the rail-and-glyph palette. The brand
 //! reads "interactive prompts stay plain" (spec Decision #1) literally: no
 //! color injected into the prompt chrome — except the `>` highlighted-option
-//! cursor, which uses brand orange so the active selection is the focal point.
+//! cursor, which uses brand teal so the active selection is the focal point.
 //! (Color::DarkGrey was tried for the rest and rendered as pastel blue on the
 //! macOS Terminal default palette, defeating the purpose.)
 
 use inquire::ui::{Color, RenderConfig, Styled};
 
 use crate::Theme;
-use crate::atoms::ORANGE;
+use crate::atoms::TEAL;
 
-const BRAND_ORANGE: Color = Color::Rgb {
-    r: ORANGE.0,
-    g: ORANGE.1,
-    b: ORANGE.2,
+const CURSOR_TEAL: Color = Color::Rgb {
+    r: TEAL.0,
+    g: TEAL.1,
+    b: TEAL.2,
 };
 
 /// Returns the brand `RenderConfig` for the given theme.
 ///
-/// `Color`: `empty()` chrome plus the orange `>` highlighted-option cursor.
+/// `Color`: `empty()` chrome plus the teal `>` highlighted-option cursor.
 /// `Mono` / `Ascii`: `RenderConfig::empty()` — no styling at all.
 pub fn render_config(theme: Theme) -> RenderConfig<'static> {
     match theme {
         Theme::Mono | Theme::Ascii => RenderConfig::empty(),
         Theme::Color => RenderConfig::empty()
-            .with_highlighted_option_prefix(Styled::new(">").with_fg(BRAND_ORANGE)),
+            .with_highlighted_option_prefix(Styled::new(">").with_fg(CURSOR_TEAL)),
     }
 }
 
@@ -63,8 +63,8 @@ mod tests {
         assert!(cfg.answered_prompt_prefix.style.fg.is_none());
         assert!(cfg.help_message.fg.is_none());
         assert!(cfg.canceled_prompt_indicator.style.fg.is_none());
-        // Only the highlighted cursor gets brand orange.
+        // Only the highlighted cursor gets brand teal.
         assert_eq!(cfg.highlighted_option_prefix.content, ">");
-        assert_eq!(cfg.highlighted_option_prefix.style.fg, Some(BRAND_ORANGE));
+        assert_eq!(cfg.highlighted_option_prefix.style.fg, Some(CURSOR_TEAL));
     }
 }
diff --git a/crates/right-ui/src/splash.rs b/crates/right-ui/src/splash.rs
index 33603520c..f2da306a6 100644
--- a/crates/right-ui/src/splash.rs
+++ b/crates/right-ui/src/splash.rs
@@ -1,8 +1,22 @@
 //! Full splash header — `▐✓ right agent vX.Y.Z` + tagline + blank rail.
 
-use crate::atoms::Rail;
+use owo_colors::OwoColorize;
+
+use crate::atoms::{MUTED, RUBY, Rail};
 use crate::theme::Theme;
 
+/// Brand wordmark: `right` (ruby) + `agent` (muted) in Color; plain otherwise.
+fn wordmark(theme: Theme) -> String {
+    match theme {
+        Theme::Color => format!(
+            "{} {}",
+            "right".truecolor(RUBY.0, RUBY.1, RUBY.2),
+            "agent".truecolor(MUTED.0, MUTED.1, MUTED.2),
+        ),
+        Theme::Mono | Theme::Ascii => "right agent".to_string(),
+    }
+}
+
 /// Three-line splash: `▐✓ right agent v<version>` / `▐  <tagline>` / `▐`.
 /// No trailing newline after the third line. Reserved for `right init`.
 pub fn splash(theme: Theme, version: &str, tagline: &str) -> String {
@@ -10,7 +24,8 @@ pub fn splash(theme: Theme, version: &str, tagline: &str) -> String {
     // Line 1: ▐✓ right agent v0.10.2
     out.push_str(&Rail::mark(theme));
     out.push(' ');
-    out.push_str("right agent v");
+    out.push_str(&wordmark(theme));
+    out.push_str(" v");
     out.push_str(version);
     out.push('\n');
     // Line 2: ▐  <tagline>
diff --git a/crates/right-ui/src/splash_tests.rs b/crates/right-ui/src/splash_tests.rs
index 559c13e0c..cce873bdb 100644
--- a/crates/right-ui/src/splash_tests.rs
+++ b/crates/right-ui/src/splash_tests.rs
@@ -22,10 +22,19 @@ fn splash_ascii() {
 }
 
 #[test]
-fn splash_color_has_ansi_no_unicode_loss() {
+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:?}"
+    );
+    assert!(
+        s.contains("\x1b[38;2;182;168;176m"),
+        "wordmark 'agent' not muted: {s:?}"
+    );
+    assert!(s.contains("v0.10.2"), "version text missing: {s:?}");
 }
 
 #[test]

From 1228bfc58ed0616abb16fc8c8bbedadf3767d987 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 18:00:21 +0200
Subject: [PATCH 4/9] docs(sprint): stage 01 CLI done @809d6e3c

---
 docs/plans/jewel-brand-sprint.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
index 434708318..3605019f8 100644
--- a/docs/plans/jewel-brand-sprint.md
+++ b/docs/plans/jewel-brand-sprint.md
@@ -6,7 +6,7 @@ Issue: https://github.com/onsails/right-agent/issues/130 (follow-up to #129)
 Legend: todo · brainstorming · planned · executing · review · blocked · done
 
 ## Stages
-1. [planned] CLI    — right-ui (Rust): replace orange accents → jewel semantic hexes; keep NO_COLOR/TERM=dumb fallbacks. spec:01-cli-spec.md plan:01-cli-plan.md
+1. [done] CLI       — right-ui (Rust): orange→jewel; rail/mark→ruby, cursor→teal, glyphs→semantic, splash wordmark right=ruby/agent=muted. spec:01-cli-spec.md plan:01-cli-plan.md (merged @809d6e3c · review clean · 55/55 right-ui tests)
 2. [todo] Dashboard — right-dashboard (Vue): introduce jewel palette tokens; accent→teal, identity→ruby, warm→gold; replace ad-hoc Telegram-blue/scattered hexes.
 
 ## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)
@@ -25,7 +25,8 @@ Legend: todo · brainstorming · planned · executing · review · blocked · do
 ## Decisions log
 - 2-stage decomposition (CLI then dashboard); CLI first fixes canonical jewel hexes the dashboard reuses.
 - Integration branch = current worktree branch `claude/strange-borg-9c9f27` (no new branch, per user rule).
-- Engine: mimo, not pinned → resolve model per stage via mimo-resolve.
+- Engine: mimo, not pinned → resolve model per stage via mimo-resolve. Per user: always most-capable model + highest effort → openai/gpt-5.4 variant max (review max).
+- Stage 01: mimo's first session stalled empty; resume (same handle) completed. A pre-commit hook reformats (rustfmt) — re-stage + retry the commit if it rewrites files.
 
 ## Open questions
 - (none yet)

From 56dd48f08cd0fe5da76f82376e73478d9edf7a25 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 18:22:24 +0200
Subject: [PATCH 5/9] docs(sprint): stage 02 dashboard spec + plan (fixed
 jewel-dark)

---
 docs/plans/02-dashboard-plan.md  | 249 +++++++++++++++++++++++++++++++
 docs/plans/02-dashboard-spec.md  | 124 +++++++++++++++
 docs/plans/jewel-brand-sprint.md |   2 +-
 3 files changed, 374 insertions(+), 1 deletion(-)
 create mode 100644 docs/plans/02-dashboard-plan.md
 create mode 100644 docs/plans/02-dashboard-spec.md

diff --git a/docs/plans/02-dashboard-plan.md b/docs/plans/02-dashboard-plan.md
new file mode 100644
index 000000000..cf87a2bad
--- /dev/null
+++ b/docs/plans/02-dashboard-plan.md
@@ -0,0 +1,249 @@
+# Stage 02 — right-dashboard jewel recolor — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Recolor the `right-dashboard` Vue frontend to a fixed jewel-dark theme
+(brand-forward), with `--jewel-*` CSS tokens as the single source of truth, the
+Telegram theme vars overridden to jewel (defeating Telegram's inline injection),
+recolored semantics, ruby identity, and a legible ECharts dark theme. No
+structural change. Spec: `docs/plans/02-dashboard-spec.md`.
+
+**Architecture:** Jewel tokens live in `App.vue :root`. `telegram.ts` gains
+`applyJewelTheme()` that re-points `--tg-theme-*` at `var(--jewel-*)` after
+Telegram init. Hardcoded semantic hexes are replaced in place; charts merge a
+shared jewel option fragment. Tokens are the source of truth; components keep
+using `var(--tg-theme-*)` which now resolves to jewel.
+
+**Tech Stack:** Vue 3 SFC, TypeScript, Vite, Vitest (SSR `renderToString`),
+vue-echarts/ECharts, **pnpm**.
+
+**Run commands from the frontend dir.** Use:
+`devenv shell -- bash -c 'cd crates/right-dashboard/frontend && pnpm <script>'`
+(devenv provides node/pnpm). A `prek`/rustfmt pre-commit hook exists — if a
+commit reformats files, re-stage and retry; prefix commits with
+`PREK_ALLOW_NO_CONFIG=1`. **Do NOT commit per task** — the stage-runner commits
+and lands the whole stage after review + verify.
+
+**Jewel reference (hex):** base `#121016` panel `#201a26` line `#2d2533`
+line-2 `#3e3146` · ruby `#c75f88` teal `#3bb0c4` gold `#cda14b` · text `#f1ece9`
+muted `#b6a8b0` dim `#6f6169` · ok `#6bbf59` warn `#e6c06a` err `#e2556a`
+info `#3bb0c4`.
+
+---
+
+### Task 1: Jewel tokens + Telegram-var defaults in `:root`
+
+**Files:** Modify `crates/right-dashboard/frontend/src/App.vue` (the global
+`<style>` block, currently starting at the `:root { --token-* }` rule).
+
+**Step 1 — Replace the `:root` block.** Replace the existing
+```
+:root {
+  --token-input: #6b7b88;
+  --token-output: #2481cc;
+  --token-create: #b87900;
+  --token-read: #0d7a45;
+}
+```
+with the full jewel token set + Telegram-var defaults from the spec
+("Authoritative palette → jewel tokens" and the stylesheet-defaults list under
+"defeat Telegram's inline theme injection"). Include `--jewel-*`, the
+`--jewel-*-bg` tints, the jewel `--token-*` palette, and the
+`--tg-theme-*: var(--jewel-*)` default mappings (cover bg-color,
+secondary-bg-color, text-color, hint-color, **hint_color** underscore variant,
+link-color, button_color, section_separator_color).
+
+**Step 2 — Verify it parses.**
+Run: `devenv shell -- bash -c 'cd crates/right-dashboard/frontend && pnpm typecheck'`
+Expected: clean (CSS isn't typechecked, but this catches SFC breakage).
+
+---
+
+### Task 2: `applyJewelTheme()` in `telegram.ts` (TDD — the only new logic)
+
+**Files:**
+- Modify `crates/right-dashboard/frontend/src/telegram.ts`
+- Test `crates/right-dashboard/frontend/src/telegram.test.ts` (create if absent;
+  else append).
+
+**Step 1 — Write the failing test.**
+```ts
+import { describe, expect, it, vi } from 'vitest'
+import { applyJewelTheme } from './telegram'
+
+describe('applyJewelTheme', () => {
+  it('repoints tg-theme vars at jewel tokens', () => {
+    const setProperty = vi.fn()
+    const root = { style: { setProperty } } as unknown as HTMLElement
+    applyJewelTheme(root)
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-bg-color', 'var(--jewel-base)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-button_color', 'var(--jewel-teal)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-text-color', 'var(--jewel-text)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-secondary-bg-color', 'var(--jewel-panel)')
+  })
+})
+```
+
+**Step 2 — Run, verify red.**
+Run: `devenv shell -- bash -c 'cd crates/right-dashboard/frontend && pnpm test telegram'`
+Expected: FAIL (`applyJewelTheme` not exported).
+
+**Step 3 — Implement.** In `telegram.ts`:
+```ts
+const JEWEL_THEME_VARS: ReadonlyArray<[string, string]> = [
+  ['--tg-theme-bg-color', 'var(--jewel-base)'],
+  ['--tg-theme-secondary-bg-color', 'var(--jewel-panel)'],
+  ['--tg-theme-text-color', 'var(--jewel-text)'],
+  ['--tg-theme-hint-color', 'var(--jewel-muted)'],
+  ['--tg-theme-hint_color', 'var(--jewel-muted)'],
+  ['--tg-theme-link-color', 'var(--jewel-teal)'],
+  ['--tg-theme-button_color', 'var(--jewel-teal)'],
+  ['--tg-theme-section_separator_color', 'var(--jewel-line)'],
+]
+
+export function applyJewelTheme(
+  root: HTMLElement | undefined = typeof document === 'undefined' ? undefined : document.documentElement,
+): void {
+  if (!root) return
+  for (const [name, value] of JEWEL_THEME_VARS) {
+    root.style.setProperty(name, value)
+  }
+}
+```
+
+**Step 4 — Wire into init.** In `initializeTelegramWebApp` (telegram.ts), call
+`applyJewelTheme()` so it runs after Telegram's own theme is applied, and also
+when there is no Telegram WebApp (no early-return before it). If init lives in
+App.vue `onMounted`, call `applyJewelTheme()` there right after
+`initializeTelegramWebApp(...)`. Pick whichever the code structure makes
+cleanest; it MUST run on every load.
+
+**Step 5 — Run, verify green.**
+Run: `devenv shell -- bash -c 'cd crates/right-dashboard/frontend && pnpm test telegram'`
+Expected: PASS. Also `pnpm typecheck` clean.
+
+---
+
+### Task 3: Recolor App.vue semantic CSS
+
+**Files:** Modify `crates/right-dashboard/frontend/src/App.vue` (`<style>`).
+
+Replace the light semantic fg/bg literals with jewel tokens (use the tokens from
+Task 1; do not reintroduce raw hexes):
+- `.status-pill.ok` / `.run-delivery-badge.ok` → `color: var(--jewel-ok); background: var(--jewel-ok-bg);`
+- `.status-pill.active`/`.warn`, `.run-delivery-badge.active` → `color: var(--jewel-warn); background: var(--jewel-warn-bg);`
+  (`.active` fg may use `var(--jewel-gold)` for warmth — keep bg as warn tint).
+- `.status-pill.bad` / `.run-delivery-badge.bad` → `color: var(--jewel-err); background: var(--jewel-err-bg);`
+- `.metric-card.ok strong` → `var(--jewel-ok)`; `.metric-card.active strong` → `var(--jewel-gold)`; `.metric-card.bad strong` → `var(--jewel-err)`.
+- `.status-dot.ok` → `var(--jewel-ok)`; `.status-dot.active` → `var(--jewel-gold)`; `.status-dot.bad` → `var(--jewel-err)`.
+- `.cron-delete` `--danger` fallback `#c0392b` → `var(--jewel-err)` (update both the `border` and `color` fallbacks; or define `--danger: var(--jewel-err)` in `:root` and keep references).
+
+**Step — Verify.** `pnpm typecheck` clean; visually confirm no `#0d7a45/#dff5e8/#8a5a00/#fff0c2/#a42323/#ffe1de/#b87900/#b92b27/#c0392b` remain in App.vue:
+Run: `rg -n "#0d7a45|#dff5e8|#8a5a00|#fff0c2|#a42323|#ffe1de|#b87900|#b92b27|#c0392b" crates/right-dashboard/frontend/src/App.vue` → no matches.
+
+---
+
+### Task 4: Recolor McpView.vue + ProvidersView.vue semantic rgba
+
+**Files:** Modify
+`crates/right-dashboard/frontend/src/views/McpView.vue` and
+`crates/right-dashboard/frontend/src/views/ProvidersView.vue`.
+
+Replace the standalone semantic `rgba()` literals (NOT the `--tg-theme-*`
+fallbacks) with jewel tints:
+- `rgba(25,135,84,0.35)` (green border) → `rgba(107,191,89,0.4)` (jewel ok).
+- `rgba(176,42,55,0.35)` (red border) → `rgba(226,85,106,0.4)` (jewel err).
+- `rgba(214,165,26,0.14)` / `rgba(214,165,26,0.4)` (gold bg/border) →
+  `rgba(205,161,75,0.14)` / `rgba(205,161,75,0.4)` (jewel gold `#cda14b`).
+Leave `rgba(84,102,117,…)` separator fallbacks as-is (they sit inside
+`var(--tg-theme-section_separator_color, …)` and the JS override wins); or update
+them to a jewel line rgba for consistency — optional, not gated.
+
+**Step — Verify.**
+Run: `rg -n "rgba\(25,\s*135,\s*84|rgba\(176,\s*42,\s*55|rgba\(214,\s*165,\s*26" crates/right-dashboard/frontend/src` → no matches.
+
+---
+
+### Task 5: Ruby identity in AppShell
+
+**Files:** Modify `crates/right-dashboard/frontend/src/components/AppShell.vue`.
+
+The topbar `<h1>{{ agent }}</h1>` is the brand identity. Give it ruby:
+add/extend a scoped style `.topbar h1 { color: var(--jewel-ruby); }` (or a class
+on the h1). Keep weight/size unchanged. Do not ruby-tint other text.
+
+**Step — Verify.** `pnpm typecheck` clean; `pnpm test AppShell` green (the SSR
+test asserts structure/text, not color — should pass unchanged).
+
+---
+
+### Task 6: ECharts jewel dark theme
+
+**Files:**
+- Create `crates/right-dashboard/frontend/src/components/charts/jewelChart.ts`
+- Modify each ECharts chart component (find them:
+  `rg -l "AsyncVChart|VChart|registerDashboardCharts" crates/right-dashboard/frontend/src/components/charts`).
+- Modify `crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue`.
+
+**Step 1 — Create the shared base.** `jewelChart.ts`:
+```ts
+export const JEWEL_CHART_PALETTE = ['#3bb0c4', '#c75f88', '#cda14b', '#6bbf59', '#b6a8b0', '#e6c06a']
+
+/** Option fragment merged into every dashboard ECharts option for jewel-dark legibility. */
+export const jewelChartBase = {
+  backgroundColor: 'transparent',
+  color: JEWEL_CHART_PALETTE,
+  textStyle: { color: '#b6a8b0' },
+  title: { textStyle: { color: '#f1ece9' } },
+  legend: { textStyle: { color: '#b6a8b0' } },
+  tooltip: {
+    backgroundColor: '#201a26',
+    borderColor: '#2d2533',
+    textStyle: { color: '#f1ece9' },
+  },
+  categoryAxis: { axisLine: { lineStyle: { color: '#2d2533' } }, axisLabel: { color: '#b6a8b0' }, splitLine: { lineStyle: { color: '#2d2533' } } },
+  valueAxis: { axisLine: { lineStyle: { color: '#2d2533' } }, axisLabel: { color: '#b6a8b0' }, splitLine: { lineStyle: { color: '#2d2533' } } },
+} as const
+```
+
+**Step 2 — Apply to each chart's `option` computed.** For every ECharts chart,
+spread `jewelChartBase` first and let the chart's own option override structure:
+`const option = computed(() => ({ ...jewelChartBase, /* existing option */ }))`,
+and for axis-bearing charts, fold the axis defaults into the chart's `xAxis`/
+`yAxis`/`tooltip`/`legend` (merge, do not drop the chart's own axis `data`/
+`formatter`). Keep each chart's existing series/data untouched. Prefer a shallow
+deep-merge by hand per chart (these option objects are small) over a generic
+merge util — be careful not to clobber `tooltip.formatter`, `xAxis.data`,
+`legend.type`.
+
+**Step 3 — Fix the selected-bar highlight.** In `UsageSpendChart.vue`,
+`borderColor: '#111827'` → `borderColor: '#f1ece9'` (visible on dark).
+
+**Step 4 — Verify.**
+Run: `devenv shell -- bash -c 'cd crates/right-dashboard/frontend && pnpm test'`
+Expected: all green. `rg -n "#111827|#2481cc" crates/right-dashboard/frontend/src` → no matches.
+
+---
+
+### Task 7: Final stage verification (also re-run by stage-runner)
+
+From `crates/right-dashboard/frontend` (via the devenv wrapper):
+- `pnpm install --frozen-lockfile` (only if `node_modules` missing).
+- `pnpm typecheck` → clean.
+- `pnpm test` → all green.
+- `pnpm build` → succeeds.
+- **Grep gate** (repo root) — none of these standalone literals remain in
+  `crates/right-dashboard/frontend/src`:
+  `rg -n "#2481cc|#0d7a45|#dff5e8|#8a5a00|#fff0c2|#a42323|#ffe1de|#b87900|#b92b27|#c0392b|#111827" crates/right-dashboard/frontend/src`
+  Expected: no matches.
+
+---
+
+## Stage completion gate (handled by stage-runner)
+- typecheck + test + build green, grep gate empty.
+- Code review (`/code-review max --fix`) clean or all findings resolved.
+- Commit on `$BR`, merge `--no-ff` into `claude/strange-borg-9c9f27`, remove
+  worktree + delete branch.
+- The mandatory **full-workspace** test (`cargo nextest run --workspace` +
+  `cargo test --doc --workspace`) is the sprint's final gate, run by the
+  conductor AFTER this stage lands.
diff --git a/docs/plans/02-dashboard-spec.md b/docs/plans/02-dashboard-spec.md
new file mode 100644
index 000000000..b5f9c1542
--- /dev/null
+++ b/docs/plans/02-dashboard-spec.md
@@ -0,0 +1,124 @@
+# Stage 02 — right-dashboard (Telegram Mini App) → Observatory/jewel — Spec
+
+## Goal
+Recolor the `right-dashboard` Vue frontend to a **fixed jewel dark** theme
+(brand-forward, decided), matching `docs/brand-guidelines.html` (v2). The
+dashboard must always render the dark plum jewel palette regardless of the
+user's Telegram light/dark theme. Structure, components, and the
+`AsyncState`/`CollapsibleSection` primitives are unchanged — this is color only.
+
+Frontend root: `crates/right-dashboard/frontend`. Package manager: **pnpm**.
+
+## Authoritative palette → jewel tokens (source of truth)
+Define once in `App.vue`'s global `<style>` `:root`:
+```
+--jewel-base:  #121016;  /* page background (plum) */
+--jewel-panel: #201a26;  /* cards / secondary bg */
+--jewel-line:  #2d2533;  /* borders / separators */
+--jewel-line-2:#3e3146;  /* stronger border */
+--jewel-ruby:  #c75f88;  /* IDENTITY — agent name / brand mark */
+--jewel-teal:  #3bb0c4;  /* ACTION — accent, links, active tab, selection */
+--jewel-gold:  #cda14b;  /* warmth / secondary highlight */
+--jewel-text:  #f1ece9;  /* primary text */
+--jewel-muted: #b6a8b0;  /* hint / secondary text */
+--jewel-dim:   #6f6169;  /* faint text */
+--jewel-ok:    #6bbf59;  --jewel-warn: #e6c06a;  --jewel-err: #e2556a;  --jewel-info: #3bb0c4;
+/* dark semantic tints for pill/badge backgrounds (translucent over panel) */
+--jewel-ok-bg:   rgba(107,191,89,0.16);
+--jewel-warn-bg: rgba(230,192,106,0.16);
+--jewel-err-bg:  rgba(226,85,106,0.16);
+/* chart token palette (distinct hues on dark) */
+--token-input:  #b6a8b0;  --token-output: #3bb0c4;  --token-create: #cda14b;  --token-read: #6bbf59;
+```
+
+## The core problem: defeat Telegram's inline theme injection
+The dashboard reads `var(--tg-theme-*, <fallback>)` everywhere. Telegram injects
+`--tg-theme-*` as **inline styles on `document.documentElement`**, which beat any
+stylesheet `:root`. Two-layer fix so the jewel theme always wins and there is no
+light flash:
+
+1. **Stylesheet defaults** — in `:root`, after the `--jewel-*` tokens, set the
+   Telegram vars the app uses to jewel:
+   ```
+   --tg-theme-bg-color: var(--jewel-base);
+   --tg-theme-secondary-bg-color: var(--jewel-panel);
+   --tg-theme-text-color: var(--jewel-text);
+   --tg-theme-hint-color: var(--jewel-muted);
+   --tg-theme-hint_color: var(--jewel-muted);     /* Spinner.vue uses underscore form */
+   --tg-theme-link-color: var(--jewel-teal);
+   --tg-theme-button_color: var(--jewel-teal);
+   --tg-theme-section_separator_color: var(--jewel-line);
+   ```
+2. **JS override after Telegram init** — add `applyJewelTheme(root?: HTMLElement)`
+   to `telegram.ts` that calls `documentElement.style.setProperty('--tg-theme-…','var(--jewel-…)')`
+   for each of the vars above. Call it from `initializeTelegramWebApp` (and ensure
+   it runs even when there is no Telegram WebApp). This re-applies jewel *after*
+   Telegram's inline injection, so the user's Telegram theme never leaks through.
+
+Net effect: existing component CSS keeps using `var(--tg-theme-*)`, but those now
+resolve to jewel — minimal structural churn, guaranteed brand look. The
+`--jewel-*` tokens remain the single source of truth.
+
+## Hardcoded hexes to replace (recolor in place)
+Replace every literal below (full inventory — verified by grep) with jewel
+tokens. None are `--tg-theme-*`, so they need direct edits.
+- **App.vue** `:root` token block (`--token-*`) → jewel chart palette above.
+- **App.vue** status semantics — `.status-pill`, `.metric-card`, `.status-dot`,
+  `.run-delivery-badge` (`.ok/.active/.warn/.bad`): replace the light fg/bg pairs
+  (`#0d7a45/#dff5e8`, `#8a5a00/#fff0c2`, `#a42323/#ffe1de`, `#b87900`, `#b92b27`)
+  with jewel: ok→`--jewel-ok`/`--jewel-ok-bg`, warn+active→`--jewel-warn`/`--jewel-warn-bg`
+  (active may use `--jewel-gold` fg for warmth), bad→`--jewel-err`/`--jewel-err-bg`.
+- **App.vue** `--danger` fallback `#c0392b` → `--jewel-err`.
+- **McpView.vue / ProvidersView.vue** semantic `rgba(...)` backgrounds/borders
+  (`rgba(25,135,84,…)` green, `rgba(176,42,55,…)` red, `rgba(214,165,26,…)` gold)
+  → jewel ok / err / gold tints.
+- **UsageSpendChart.vue** `borderColor: '#111827'` (selected-bar highlight, an
+  near-black invisible on plum) → a light/teal highlight, e.g. `#f1ece9` or
+  `#3bb0c4`.
+
+## ECharts dark theming (charts must be legible on plum)
+Charts currently use ECharts' default light palette + dark axis text → unreadable
+on jewel-dark. Add a shared jewel chart base and apply to every ECharts chart
+(those rendering through `AsyncVChart`/`VChart` — enumerate via grep):
+- `backgroundColor: 'transparent'`
+- `textStyle.color` → `#f1ece9`; axis line/label/splitLine → `#2d2533` / `#b6a8b0`
+- tooltip: bg `#201a26`, border `#2d2533`, text `#f1ece9`
+- series color palette: `['#3bb0c4','#c75f88','#cda14b','#6bbf59','#b6a8b0','#e6c06a']`
+Implement as a small exported helper (e.g. `src/components/charts/jewelChart.ts`)
+merged into each chart's `option` computed (robust regardless of the
+`AsyncVChart` wrapper). Register-theme is acceptable only if the wrapper forwards
+`theme`; otherwise merge into option.
+
+## Identity (ruby)
+The agent name is the brand identity element: `AppShell.vue` `<h1>{{ agent }}</h1>`
+in the topbar → ruby (`var(--jewel-ruby)`). Accent/action (active tab, selected
+row, links) → teal (already covered via `--tg-theme-button_color` → teal). Do not
+ruby-tint anything else; identity stays scarce.
+
+## Out of scope
+- No layout/structure/markup changes, no component additions beyond the chart
+  theme helper and the `applyJewelTheme` function.
+- No changes to data flow, API, or the `right_ui::*`/Rust side.
+- Light-theme support is intentionally dropped (fixed dark, per decision).
+
+## Verification criteria (from `crates/right-dashboard/frontend`)
+- `pnpm install --frozen-lockfile` (if deps not present).
+- `pnpm typecheck` clean (`vue-tsc --noEmit`).
+- `pnpm test` green (Vitest SSR). No existing test asserts colors (verified), so
+  none should break; if any do, fix the assertion to the jewel value.
+- `pnpm build` succeeds (`vue-tsc && vite build`).
+- Grep gate — these must NOT remain anywhere in `src` (replaced by jewel):
+  `#2481cc` (TG blue), `#0d7a45`, `#dff5e8`, `#8a5a00`, `#fff0c2`, `#a42323`,
+  `#ffe1de`, `#b87900`, `#b92b27`, `#c0392b`, `#111827`, `#6b7b88` (as a
+  color literal). Telegram light fallbacks inside `var(--tg-theme-x, …)` may be
+  updated to jewel or left (JS override wins); the grep gate targets the
+  standalone semantic/accent literals above.
+- Dashboard frontend-primitive rule (AGENTS.md): `AsyncState`/`CollapsibleSection`
+  usage unchanged; no raw placeholder text introduced.
+
+## TDD note
+This is presentational CSS/JS with SSR tests that assert structure, not color, so
+strict red/green per color is impractical. Write ONE new unit test for
+`applyJewelTheme` (the only new logic): given a stub `documentElement`/root with a
+`style.setProperty` spy, assert it sets `--tg-theme-bg-color` to `var(--jewel-base)`
+etc. Everything else is verified by typecheck + build + the grep gate.
diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
index 3605019f8..39737fe80 100644
--- a/docs/plans/jewel-brand-sprint.md
+++ b/docs/plans/jewel-brand-sprint.md
@@ -7,7 +7,7 @@ Legend: todo · brainstorming · planned · executing · review · blocked · do
 
 ## Stages
 1. [done] CLI       — right-ui (Rust): orange→jewel; rail/mark→ruby, cursor→teal, glyphs→semantic, splash wordmark right=ruby/agent=muted. spec:01-cli-spec.md plan:01-cli-plan.md (merged @809d6e3c · review clean · 55/55 right-ui tests)
-2. [todo] Dashboard — right-dashboard (Vue): introduce jewel palette tokens; accent→teal, identity→ruby, warm→gold; replace ad-hoc Telegram-blue/scattered hexes.
+2. [planned] Dashboard — right-dashboard (Vue): FIXED jewel-dark (brand-forward); --jewel-* tokens as source of truth, override --tg-theme-* → jewel (defeat TG inline injection), recolor semantics, ruby identity, ECharts dark theme. spec:02-dashboard-spec.md plan:02-dashboard-plan.md
 
 ## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)
 - base plum `#121016`, panel `#201a26`, lines `#2d2533` / `#3e3146`

From 5247203097a110eab72b18cd7cbbaa607ed3ce79 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 18:54:16 +0200
Subject: [PATCH 6/9] feat(jewel-brand): stage 02 right-dashboard fixed
 jewel-dark recolor

---
 crates/right-dashboard/frontend/src/App.vue   | 86 ++++++++++++-------
 .../frontend/src/components/AppShell.vue      |  6 ++
 .../components/charts/CostLearningRiver.vue   |  8 +-
 .../components/charts/LearningFlowChart.vue   |  4 +-
 .../src/components/charts/UsageSpendChart.vue | 19 +++-
 .../src/components/charts/jewelChart.ts       | 25 ++++++
 .../frontend/src/telegram.test.ts             | 15 ++++
 .../right-dashboard/frontend/src/telegram.ts  | 23 +++++
 .../frontend/src/views/McpView.vue            |  8 +-
 .../frontend/src/views/ProviderTypeList.vue   |  2 +-
 .../frontend/src/views/ProvidersView.vue      |  4 +-
 11 files changed, 157 insertions(+), 43 deletions(-)
 create mode 100644 crates/right-dashboard/frontend/src/components/charts/jewelChart.ts

diff --git a/crates/right-dashboard/frontend/src/App.vue b/crates/right-dashboard/frontend/src/App.vue
index 57f002906..3e92bc6b0 100644
--- a/crates/right-dashboard/frontend/src/App.vue
+++ b/crates/right-dashboard/frontend/src/App.vue
@@ -130,10 +130,36 @@ function toggleDisplayMode(): void {
 
 <style>
 :root {
-  --token-input: #6b7b88;
-  --token-output: #2481cc;
-  --token-create: #b87900;
-  --token-read: #0d7a45;
+  --jewel-base: #121016;
+  --jewel-panel: #201a26;
+  --jewel-line: #2d2533;
+  --jewel-line-2: #3e3146;
+  --jewel-ruby: #c75f88;
+  --jewel-teal: #3bb0c4;
+  --jewel-gold: #cda14b;
+  --jewel-text: #f1ece9;
+  --jewel-muted: #b6a8b0;
+  --jewel-dim: #6f6169;
+  --jewel-ok: #6bbf59;
+  --jewel-warn: #e6c06a;
+  --jewel-err: #e2556a;
+  --jewel-info: #3bb0c4;
+  --jewel-ok-bg: rgba(107, 191, 89, 0.16);
+  --jewel-warn-bg: rgba(230, 192, 106, 0.16);
+  --jewel-err-bg: rgba(226, 85, 106, 0.16);
+  --token-input: #b6a8b0;
+  --token-output: #3bb0c4;
+  --token-create: #cda14b;
+  --token-read: #6bbf59;
+  --tg-theme-bg-color: var(--jewel-base);
+  --tg-theme-secondary-bg-color: var(--jewel-panel);
+  --tg-theme-text-color: var(--jewel-text);
+  --tg-theme-hint-color: var(--jewel-muted);
+  --tg-theme-hint_color: var(--jewel-muted);
+  --tg-theme-link-color: var(--jewel-teal);
+  --tg-theme-button_color: var(--jewel-teal);
+  --tg-theme-section_separator_color: var(--jewel-line);
+  --danger: var(--jewel-err);
 }
 
 * {
@@ -230,23 +256,23 @@ h3 {
 }
 
 .status-pill.ok {
-  color: #0d7a45;
-  background: #dff5e8;
+  color: var(--jewel-ok);
+  background: var(--jewel-ok-bg);
 }
 
 .status-pill.active {
-  color: #8a5a00;
-  background: #fff0c2;
+  color: var(--jewel-gold);
+  background: var(--jewel-warn-bg);
 }
 
 .status-pill.warn {
-  color: #8a5a00;
-  background: #fff0c2;
+  color: var(--jewel-warn);
+  background: var(--jewel-warn-bg);
 }
 
 .status-pill.bad {
-  color: #a42323;
-  background: #ffe1de;
+  color: var(--jewel-err);
+  background: var(--jewel-err-bg);
 }
 
 .status-pill.muted {
@@ -320,8 +346,8 @@ dt,
 
 .tab-button.active,
 .segment-button.active {
-  border-color: var(--tg-theme-button_color, #2481cc);
-  color: var(--tg-theme-button_color, #2481cc);
+  border-color: var(--tg-theme-button_color, var(--jewel-teal));
+  color: var(--tg-theme-button_color, var(--jewel-teal));
   font-weight: 700;
 }
 
@@ -376,15 +402,15 @@ dt,
 }
 
 .metric-card.ok strong {
-  color: #0d7a45;
+  color: var(--jewel-ok);
 }
 
 .metric-card.active strong {
-  color: #8a5a00;
+  color: var(--jewel-gold);
 }
 
 .metric-card.bad strong {
-  color: #a42323;
+  color: var(--jewel-err);
 }
 
 .two-column {
@@ -417,8 +443,8 @@ dt,
   font-size: 0.75rem;
   padding: 0.2rem 0.5rem;
   border-radius: 0.4rem;
-  border: 1px solid var(--danger, #c0392b);
-  color: var(--danger, #c0392b);
+  border: 1px solid var(--danger, var(--jewel-err));
+  color: var(--danger, var(--jewel-err));
   background: transparent;
   cursor: pointer;
 }
@@ -485,8 +511,8 @@ dd {
 }
 
 .data-row.selected {
-  border-color: var(--tg-theme-button_color, #2481cc);
-  box-shadow: inset 0 0 0 1px var(--tg-theme-button_color, #2481cc);
+  border-color: var(--tg-theme-button_color, var(--jewel-teal));
+  box-shadow: inset 0 0 0 1px var(--tg-theme-button_color, var(--jewel-teal));
 }
 
 .row-main,
@@ -523,15 +549,15 @@ dd {
 }
 
 .status-dot.ok {
-  background: #0d7a45;
+  background: var(--jewel-ok);
 }
 
 .status-dot.active {
-  background: #b87900;
+  background: var(--jewel-gold);
 }
 
 .status-dot.bad {
-  background: #b92b27;
+  background: var(--jewel-err);
 }
 
 .run-delivery-badge {
@@ -549,18 +575,18 @@ dd {
 }
 
 .run-delivery-badge.ok {
-  color: #0d7a45;
-  background: #dff5e8;
+  color: var(--jewel-ok);
+  background: var(--jewel-ok-bg);
 }
 
 .run-delivery-badge.active {
-  color: #8a5a00;
-  background: #fff0c2;
+  color: var(--jewel-gold);
+  background: var(--jewel-warn-bg);
 }
 
 .run-delivery-badge.bad {
-  color: #a42323;
-  background: #ffe1de;
+  color: var(--jewel-err);
+  background: var(--jewel-err-bg);
 }
 
 .run-note-preview {
diff --git a/crates/right-dashboard/frontend/src/components/AppShell.vue b/crates/right-dashboard/frontend/src/components/AppShell.vue
index 4d65d8521..90b7f8263 100644
--- a/crates/right-dashboard/frontend/src/components/AppShell.vue
+++ b/crates/right-dashboard/frontend/src/components/AppShell.vue
@@ -68,3 +68,9 @@ const emit = defineEmits<{
     <slot />
   </main>
 </template>
+
+<style scoped>
+.topbar h1 {
+  color: var(--jewel-ruby);
+}
+</style>
diff --git a/crates/right-dashboard/frontend/src/components/charts/CostLearningRiver.vue b/crates/right-dashboard/frontend/src/components/charts/CostLearningRiver.vue
index 20ccf71e1..bab17b2bd 100644
--- a/crates/right-dashboard/frontend/src/components/charts/CostLearningRiver.vue
+++ b/crates/right-dashboard/frontend/src/components/charts/CostLearningRiver.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AsyncVChart from './AsyncVChart.vue'
+import { jewelChartBase } from './jewelChart'
 import { money } from '../../format'
 import type { CostLearningRiver } from '../../types'
 
@@ -54,12 +55,15 @@ const option = computed(() => {
   }
 
   return {
+    ...jewelChartBase,
     tooltip: {
+      ...jewelChartBase.tooltip,
       trigger: 'axis',
       renderMode: 'richText',
       formatter: formatTooltip,
     },
     legend: {
+      ...jewelChartBase.legend,
       type: 'scroll',
       bottom: 0,
     },
@@ -67,7 +71,9 @@ const option = computed(() => {
       type: 'time',
       top: 16,
       bottom: 52,
-      axisLabel: { hideOverlap: true },
+      axisLine: { lineStyle: { color: '#2d2533' } },
+      axisLabel: { color: '#b6a8b0', hideOverlap: true },
+      splitLine: { lineStyle: { color: '#2d2533' } },
     },
     dataZoom: [
       {
diff --git a/crates/right-dashboard/frontend/src/components/charts/LearningFlowChart.vue b/crates/right-dashboard/frontend/src/components/charts/LearningFlowChart.vue
index 2c81ee10d..5aae1b8bc 100644
--- a/crates/right-dashboard/frontend/src/components/charts/LearningFlowChart.vue
+++ b/crates/right-dashboard/frontend/src/components/charts/LearningFlowChart.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { ComposeOption, SankeySeriesOption, TooltipComponentOption } from 'echarts'
 import AsyncVChart from './AsyncVChart.vue'
+import { jewelChartBase } from './jewelChart'
 import type { LearningFlowEdge, LearningFlowNode } from '../../types'
 
 type LearningFlowChartOption = ComposeOption<SankeySeriesOption | TooltipComponentOption>
@@ -30,7 +31,8 @@ function selectNode(event: ChartClickEvent): void {
 }
 
 const option = computed<LearningFlowChartOption>(() => ({
-  tooltip: { trigger: 'item' },
+  ...jewelChartBase,
+  tooltip: { ...jewelChartBase.tooltip, trigger: 'item' },
   series: [
     {
       type: 'sankey',
diff --git a/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue b/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
index 10b967baf..620de22c4 100644
--- a/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
+++ b/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AsyncVChart from './AsyncVChart.vue'
+import { jewelChartBase } from './jewelChart'
 import { money } from '../../format'
 import type { UsageDailyPoint } from '../../types'
 
@@ -70,22 +71,32 @@ function barDatum(point: UsageDailyPoint, source: string): BarDatum {
   return {
     value,
     itemStyle: {
-      borderColor: '#111827',
+      borderColor: '#f1ece9',
       borderWidth: 1,
     },
   }
 }
 
 const option = computed(() => ({
+  ...jewelChartBase,
   tooltip: {
+    ...jewelChartBase.tooltip,
     trigger: 'axis',
     axisPointer: { type: 'shadow' },
     formatter: formatTooltip,
   },
-  legend: { type: 'scroll', bottom: 0 },
+  legend: { ...jewelChartBase.legend, type: 'scroll', bottom: 0 },
   grid: { left: 44, right: 12, top: 18, bottom: 54 },
-  xAxis: { type: 'category', data: props.points.map((point) => point.date), axisLabel: { hideOverlap: true } },
-  yAxis: { type: 'value' },
+  xAxis: {
+    ...jewelChartBase.categoryAxis,
+    type: 'category',
+    data: props.points.map((point) => point.date),
+    axisLabel: { ...jewelChartBase.categoryAxis.axisLabel, hideOverlap: true },
+  },
+  yAxis: {
+    ...jewelChartBase.valueAxis,
+    type: 'value',
+  },
   series: sources.value.map((source) => ({
     name: source,
     type: 'bar',
diff --git a/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts b/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts
new file mode 100644
index 000000000..df46bf341
--- /dev/null
+++ b/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts
@@ -0,0 +1,25 @@
+export const JEWEL_CHART_PALETTE = ['#3bb0c4', '#c75f88', '#cda14b', '#6bbf59', '#b6a8b0', '#e6c06a']
+
+/** Option fragment merged into every dashboard ECharts option for jewel-dark legibility. */
+export const jewelChartBase = {
+  backgroundColor: 'transparent',
+  color: JEWEL_CHART_PALETTE,
+  textStyle: { color: '#b6a8b0' },
+  title: { textStyle: { color: '#f1ece9' } },
+  legend: { textStyle: { color: '#b6a8b0' } },
+  tooltip: {
+    backgroundColor: '#201a26',
+    borderColor: '#2d2533',
+    textStyle: { color: '#f1ece9' },
+  },
+  categoryAxis: {
+    axisLine: { lineStyle: { color: '#2d2533' } },
+    axisLabel: { color: '#b6a8b0' },
+    splitLine: { lineStyle: { color: '#2d2533' } },
+  },
+  valueAxis: {
+    axisLine: { lineStyle: { color: '#2d2533' } },
+    axisLabel: { color: '#b6a8b0' },
+    splitLine: { lineStyle: { color: '#2d2533' } },
+  },
+} as const
diff --git a/crates/right-dashboard/frontend/src/telegram.test.ts b/crates/right-dashboard/frontend/src/telegram.test.ts
index 4a5b78a6a..cc1a5e5f4 100644
--- a/crates/right-dashboard/frontend/src/telegram.test.ts
+++ b/crates/right-dashboard/frontend/src/telegram.test.ts
@@ -5,6 +5,7 @@ import { initialDashboardTabFromLocation } from './format'
 import {
   alertMessage,
   applyTelegramDisplayMode,
+  applyJewelTheme,
   confirmAction,
   DASHBOARD_DISPLAY_MODE_STORAGE_KEY,
   initializeTelegramWebApp,
@@ -263,6 +264,20 @@ describe('Telegram dashboard display mode helpers', () => {
   })
 })
 
+describe('applyJewelTheme', () => {
+  it('repoints tg-theme vars at jewel tokens', () => {
+    const setProperty = vi.fn()
+    const root = { style: { setProperty } } as unknown as HTMLElement
+
+    applyJewelTheme(root)
+
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-bg-color', 'var(--jewel-base)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-button_color', 'var(--jewel-teal)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-text-color', 'var(--jewel-text)')
+    expect(setProperty).toHaveBeenCalledWith('--tg-theme-secondary-bg-color', 'var(--jewel-panel)')
+  })
+})
+
 describe('initialDashboardTabFromLocation', () => {
   it('prefers query view', () => {
     expect(initialDashboardTabFromLocation('?view=mcp', '')).toBe('mcp')
diff --git a/crates/right-dashboard/frontend/src/telegram.ts b/crates/right-dashboard/frontend/src/telegram.ts
index 51a2fee87..84d71042f 100644
--- a/crates/right-dashboard/frontend/src/telegram.ts
+++ b/crates/right-dashboard/frontend/src/telegram.ts
@@ -8,6 +8,17 @@ type FullscreenChangedEvent = typeof FULLSCREEN_CHANGED_EVENT
 type DashboardDisplayModeStorage = Pick<Storage, 'getItem' | 'setItem'>
 type TelegramFullscreenChangedHandler = () => void
 
+const JEWEL_THEME_VARS: ReadonlyArray<[string, string]> = [
+  ['--tg-theme-bg-color', 'var(--jewel-base)'],
+  ['--tg-theme-secondary-bg-color', 'var(--jewel-panel)'],
+  ['--tg-theme-text-color', 'var(--jewel-text)'],
+  ['--tg-theme-hint-color', 'var(--jewel-muted)'],
+  ['--tg-theme-hint_color', 'var(--jewel-muted)'],
+  ['--tg-theme-link-color', 'var(--jewel-teal)'],
+  ['--tg-theme-button_color', 'var(--jewel-teal)'],
+  ['--tg-theme-section_separator_color', 'var(--jewel-line)'],
+]
+
 export interface TelegramWebApp {
   initData?: string
   ready?: () => void
@@ -119,6 +130,7 @@ export function initializeTelegramWebApp(
 ): DashboardDisplayMode {
   webApp?.ready?.()
   webApp?.expand?.()
+  applyJewelTheme()
 
   if (preferredMode !== 'fullscreen') {
     return actualDisplayMode(webApp, 'normal')
@@ -126,6 +138,17 @@ export function initializeTelegramWebApp(
   return tryRequestFullscreen(webApp)
 }
 
+export function applyJewelTheme(
+  root: HTMLElement | undefined = typeof document === 'undefined' ? undefined : document.documentElement,
+): void {
+  if (!root) {
+    return
+  }
+  for (const [name, value] of JEWEL_THEME_VARS) {
+    root.style.setProperty(name, value)
+  }
+}
+
 export function applyTelegramDisplayMode(
   mode: DashboardDisplayMode,
   webApp: TelegramWebApp | undefined = defaultWebApp(),
diff --git a/crates/right-dashboard/frontend/src/views/McpView.vue b/crates/right-dashboard/frontend/src/views/McpView.vue
index 65b1a367d..f0c0bd47e 100644
--- a/crates/right-dashboard/frontend/src/views/McpView.vue
+++ b/crates/right-dashboard/frontend/src/views/McpView.vue
@@ -650,13 +650,13 @@ function resetAdd(): void {
 }
 
 .oauth-status-succeeded {
-  border-color: rgba(25, 135, 84, 0.35);
+  border-color: rgba(107, 191, 89, 0.4);
 }
 
 .oauth-status-failed,
 .oauth-status-expired,
 .oauth-status-unknown {
-  border-color: rgba(176, 42, 55, 0.35);
+  border-color: rgba(226, 85, 106, 0.4);
 }
 
 .server-header-editor {
@@ -671,8 +671,8 @@ function resetAdd(): void {
 
 .notice.warn {
   color: var(--tg-theme-text-color, #17212b);
-  background: rgba(214, 165, 26, 0.14);
-  border: 1px solid rgba(214, 165, 26, 0.4);
+  background: rgba(205, 161, 75, 0.14);
+  border: 1px solid rgba(205, 161, 75, 0.4);
   border-radius: 7px;
   padding: 6px 8px;
 }
diff --git a/crates/right-dashboard/frontend/src/views/ProviderTypeList.vue b/crates/right-dashboard/frontend/src/views/ProviderTypeList.vue
index 26bdbc732..bced11748 100644
--- a/crates/right-dashboard/frontend/src/views/ProviderTypeList.vue
+++ b/crates/right-dashboard/frontend/src/views/ProviderTypeList.vue
@@ -44,7 +44,7 @@ function select(t: ProviderProfileView): void {
 }
 
 .type-card:hover {
-  border-color: var(--tg-theme-button_color, #2481cc);
+  border-color: var(--tg-theme-button_color, var(--jewel-teal));
 }
 
 .type-card strong {
diff --git a/crates/right-dashboard/frontend/src/views/ProvidersView.vue b/crates/right-dashboard/frontend/src/views/ProvidersView.vue
index 72e0346b6..505d4f92c 100644
--- a/crates/right-dashboard/frontend/src/views/ProvidersView.vue
+++ b/crates/right-dashboard/frontend/src/views/ProvidersView.vue
@@ -670,8 +670,8 @@ watch(rotateCredential, () => {
 
 .notice.warn {
   color: var(--tg-theme-text-color, #17212b);
-  background: rgba(214, 165, 26, 0.14);
-  border: 1px solid rgba(214, 165, 26, 0.4);
+  background: rgba(205, 161, 75, 0.14);
+  border: 1px solid rgba(205, 161, 75, 0.4);
   border-radius: 7px;
   padding: 6px 8px;
 }

From f4871fb9f9292c77f501904e6239cb09e8fb9e84 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 18:55:21 +0200
Subject: [PATCH 7/9] docs(sprint): stage 02 dashboard done @964e15de; sprint
 complete

---
 docs/plans/jewel-brand-sprint.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
index 39737fe80..2e2f03fe9 100644
--- a/docs/plans/jewel-brand-sprint.md
+++ b/docs/plans/jewel-brand-sprint.md
@@ -7,7 +7,9 @@ Legend: todo · brainstorming · planned · executing · review · blocked · do
 
 ## Stages
 1. [done] CLI       — right-ui (Rust): orange→jewel; rail/mark→ruby, cursor→teal, glyphs→semantic, splash wordmark right=ruby/agent=muted. spec:01-cli-spec.md plan:01-cli-plan.md (merged @809d6e3c · review clean · 55/55 right-ui tests)
-2. [planned] Dashboard — right-dashboard (Vue): FIXED jewel-dark (brand-forward); --jewel-* tokens as source of truth, override --tg-theme-* → jewel (defeat TG inline injection), recolor semantics, ruby identity, ECharts dark theme. spec:02-dashboard-spec.md plan:02-dashboard-plan.md
+2. [done] Dashboard — right-dashboard (Vue): FIXED jewel-dark; --jewel-* tokens + --tg-theme-* override (applyJewelTheme defeats TG inline injection), recolored semantics, ruby identity (AppShell agent name), ECharts jewel theme on all 3 chart consumers. spec:02-dashboard-spec.md plan:02-dashboard-plan.md (merged @964e15de · review clean · 209/209 tests · typecheck+build green · grep gates empty)
+
+## Status: COMPLETE — both stages landed on claude/strange-borg-9c9f27. Final full-workspace verification pending.
 
 ## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)
 - base plum `#121016`, panel `#201a26`, lines `#2d2533` / `#3e3146`

From f78b4173809d037f51bcb2ab9350bf3736d09fde Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 19:07:18 +0200
Subject: [PATCH 8/9] docs(sprint): record final full-workspace verification
 (green)

---
 docs/plans/jewel-brand-sprint.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/plans/jewel-brand-sprint.md b/docs/plans/jewel-brand-sprint.md
index 2e2f03fe9..3919ce0e2 100644
--- a/docs/plans/jewel-brand-sprint.md
+++ b/docs/plans/jewel-brand-sprint.md
@@ -9,7 +9,13 @@ Legend: todo · brainstorming · planned · executing · review · blocked · do
 1. [done] CLI       — right-ui (Rust): orange→jewel; rail/mark→ruby, cursor→teal, glyphs→semantic, splash wordmark right=ruby/agent=muted. spec:01-cli-spec.md plan:01-cli-plan.md (merged @809d6e3c · review clean · 55/55 right-ui tests)
 2. [done] Dashboard — right-dashboard (Vue): FIXED jewel-dark; --jewel-* tokens + --tg-theme-* override (applyJewelTheme defeats TG inline injection), recolored semantics, ruby identity (AppShell agent name), ECharts jewel theme on all 3 chart consumers. spec:02-dashboard-spec.md plan:02-dashboard-plan.md (merged @964e15de · review clean · 209/209 tests · typecheck+build green · grep gates empty)
 
-## Status: COMPLETE — both stages landed on claude/strange-borg-9c9f27. Final full-workspace verification pending.
+## Status: COMPLETE — both stages landed on claude/strange-borg-9c9f27.
+
+### Final full-workspace verification
+- `cargo nextest` (workspace minus 3 contended `right` binaries): **2866/2866 pass** (50 ignored live tests skipped), incl. new `right-ui splash_color_wordmark_is_ruby_and_muted`.
+- `right` integration binaries run serially: **53/53 pass** (`cli_integration` 40, `home_isolation` 2, `wizard_brand` 11).
+- `cargo test --doc --workspace`: green.
+- **Pre-existing flakiness (not from this sprint):** a fully-parallel `cargo nextest run --workspace` shows ~12 `right`-crate init/destroy failures from concurrent `cloudflared` tunnel-name collisions + missing local OAuth creds. All pass serially/in isolation; the recolor touches only color values in `right-ui` + dashboard frontend, nothing near tunnels/init/credentials.
 
 ## Brand reference (authoritative: docs/brand-guidelines.html, v2 jewel)
 - base plum `#121016`, panel `#201a26`, lines `#2d2533` / `#3e3146`

From f8ac37db5818295cfc59af1cc5a26ff0379b5937 Mon Sep 17 00:00:00 2001
From: Andrey Kuznetsov <fear@loathing.in>
Date: Mon, 15 Jun 2026 21:33:25 +0400
Subject: [PATCH 9/9] refactor(dashboard): keep jewelChartBase spreadable,
 dedup axis fragment

`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.
---
 .../src/components/charts/UsageSpendChart.vue |  8 +++---
 .../src/components/charts/jewelChart.ts       | 26 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue b/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
index 620de22c4..92a9922e8 100644
--- a/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
+++ b/crates/right-dashboard/frontend/src/components/charts/UsageSpendChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import AsyncVChart from './AsyncVChart.vue'
-import { jewelChartBase } from './jewelChart'
+import { jewelAxis, jewelChartBase } from './jewelChart'
 import { money } from '../../format'
 import type { UsageDailyPoint } from '../../types'
 
@@ -88,13 +88,13 @@ const option = computed(() => ({
   legend: { ...jewelChartBase.legend, type: 'scroll', bottom: 0 },
   grid: { left: 44, right: 12, top: 18, bottom: 54 },
   xAxis: {
-    ...jewelChartBase.categoryAxis,
+    ...jewelAxis,
     type: 'category',
     data: props.points.map((point) => point.date),
-    axisLabel: { ...jewelChartBase.categoryAxis.axisLabel, hideOverlap: true },
+    axisLabel: { ...jewelAxis.axisLabel, hideOverlap: true },
   },
   yAxis: {
-    ...jewelChartBase.valueAxis,
+    ...jewelAxis,
     type: 'value',
   },
   series: sources.value.map((source) => ({
diff --git a/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts b/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts
index df46bf341..aba59b244 100644
--- a/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts
+++ b/crates/right-dashboard/frontend/src/components/charts/jewelChart.ts
@@ -1,6 +1,10 @@
 export const JEWEL_CHART_PALETTE = ['#3bb0c4', '#c75f88', '#cda14b', '#6bbf59', '#b6a8b0', '#e6c06a']
 
-/** Option fragment merged into every dashboard ECharts option for jewel-dark legibility. */
+/**
+ * Spreadable root fragment merged into every dashboard ECharts option for
+ * jewel-dark legibility. Contains only valid top-level option keys, so
+ * `...jewelChartBase` never leaks non-option keys into the chart config.
+ */
 export const jewelChartBase = {
   backgroundColor: 'transparent',
   color: JEWEL_CHART_PALETTE,
@@ -12,14 +16,14 @@ export const jewelChartBase = {
     borderColor: '#2d2533',
     textStyle: { color: '#f1ece9' },
   },
-  categoryAxis: {
-    axisLine: { lineStyle: { color: '#2d2533' } },
-    axisLabel: { color: '#b6a8b0' },
-    splitLine: { lineStyle: { color: '#2d2533' } },
-  },
-  valueAxis: {
-    axisLine: { lineStyle: { color: '#2d2533' } },
-    axisLabel: { color: '#b6a8b0' },
-    splitLine: { lineStyle: { color: '#2d2533' } },
-  },
+} as const
+
+/**
+ * Axis styling fragment. Merge into an `xAxis`/`yAxis` explicitly — it is NOT
+ * a top-level option key, so it must never be spread at the option root.
+ */
+export const jewelAxis = {
+  axisLine: { lineStyle: { color: '#2d2533' } },
+  axisLabel: { color: '#b6a8b0' },
+  splitLine: { lineStyle: { color: '#2d2533' } },
 } as const