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

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 {

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>

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,20 +55,25 @@ const option = computed(() => {
   }
 
   return {
+    ...jewelChartBase,
     tooltip: {
+      ...jewelChartBase.tooltip,
       trigger: 'axis',
       renderMode: 'richText',
       formatter: formatTooltip,
     },
     legend: {
+      ...jewelChartBase.legend,
       type: 'scroll',
       bottom: 0,
     },
     singleAxis: {
       type: 'time',
       top: 16,
       bottom: 52,
-      axisLabel: { hideOverlap: true },
+      axisLine: { lineStyle: { color: '#2d2533' } },
+      axisLabel: { color: '#b6a8b0', hideOverlap: true },
+      splitLine: { lineStyle: { color: '#2d2533' } },
     },
     dataZoom: [
       {

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',

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 { jewelAxis, 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: {
+    ...jewelAxis,
+    type: 'category',
+    data: props.points.map((point) => point.date),
+    axisLabel: { ...jewelAxis.axisLabel, hideOverlap: true },
+  },
+  yAxis: {
+    ...jewelAxis,
+    type: 'value',
+  },
   series: sources.value.map((source) => ({
     name: source,
     type: 'bar',

crates/right-dashboard/frontend/src/components/charts/jewelChart.ts

@@ -0,0 +1,29 @@
+export const JEWEL_CHART_PALETTE = ['#3bb0c4', '#c75f88', '#cda14b', '#6bbf59', '#b6a8b0', '#e6c06a']
+
+/**
+ * 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,
+  textStyle: { color: '#b6a8b0' },
+  title: { textStyle: { color: '#f1ece9' } },
+  legend: { textStyle: { color: '#b6a8b0' } },
+  tooltip: {
+    backgroundColor: '#201a26',
+    borderColor: '#2d2533',
+    textStyle: { color: '#f1ece9' },
+  },
+} 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

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')

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,13 +130,25 @@ export function initializeTelegramWebApp(
 ): DashboardDisplayMode {
   webApp?.ready?.()
   webApp?.expand?.()
+  applyJewelTheme()
 
   if (preferredMode !== 'fullscreen') {
     return actualDisplayMode(webApp, 'normal')
   }
   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(),