From 8ea40260ad51e24603411aa1e7527e9c7643249a Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Thu, 24 Sep 2026 09:50:44 +0700
Subject: [PATCH] feat(ui): terminal, charts and low-contrast text follow the
 selected theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The lane terminal (xterm) takes its palette from the selected DARK theme —
  it stays dark in light mode, as a terminal should — and repaints live when
  the theme changes (`client/src/lib/terminalTheme.ts`).
- Charts on the Dashboard and Workflows pages draw their grid, axes, labels
  and tooltips from theme tokens instead of hardcoded near-black/white, and
  the activity heatmap ramps from the page surface to the accent, so it reads
  on every theme instead of going near-black on light ones.
- Status/brand text that only worked on dark backgrounds
  (`text-*-300/400`) gets a darker light-mode shade (`text-*-700
  dark:text-*-300`) across sessions, conversations, workflows, config and
  settings. Categorical chart colours are kept.
---
 CLAUDE.md                                     |   2 +-
 client/src/components/AgentCard.tsx           |   4 +-
 client/src/components/EventDetail.tsx         |   2 +-
 client/src/components/ImportHistory.tsx       |   8 +-
 client/src/components/SessionOverview.tsx     |  24 +-
 client/src/components/StatusBadge.tsx         |   2 +-
 client/src/components/config/ScopeBadge.tsx   |   4 +-
 .../conversation/MarkdownContent.tsx          |   9 +-
 .../components/conversation/MessageList.tsx   |  30 +-
 .../components/conversation/ToolCallBlock.tsx |   6 +-
 .../src/components/conversation/toolStyle.ts  |  60 +-
 .../src/components/event-views/primitives.tsx |   8 +-
 .../components/lanes/FolderBrowseModal.tsx    |   2 +-
 client/src/components/run/RunHistory.tsx      |   4 +-
 client/src/components/run/RunSetup.tsx        |   2 +-
 client/src/components/run/TerminalView.tsx    |  30 +-
 .../run/__tests__/TerminalView.test.tsx       |  34 +-
 .../components/workflows/CompactionImpact.tsx |  18 +-
 .../workflows/ErrorPropagationMap.tsx         |   4 +-
 .../components/workflows/OrchestrationDAG.tsx |   6 +-
 .../workflows/SessionComplexityScatter.tsx    |  18 +-
 .../components/workflows/SessionDrillIn.tsx   |  12 +-
 .../workflows/WorkflowRunsPanel.tsx           |  18 +-
 .../components/workflows/WorkflowStats.tsx    |   8 +-
 .../src/lib/__tests__/terminalTheme.test.ts   |  71 ++
 client/src/lib/terminalTheme.ts               |  94 ++
 client/src/lib/types.ts                       |  18 +-
 client/src/pages/ActivityFeed.tsx             |   4 +-
 client/src/pages/CcConfig.tsx                 |  28 +-
 client/src/pages/Dashboard.tsx                |  96 +-
 client/src/pages/SessionDetail.tsx            |  30 +-
 client/src/pages/Sessions.tsx                 |   2 +-
 client/src/pages/Settings.tsx                 |  32 +-
 client/src/pages/Workflows.tsx                |   2 +-
 .../pages/__tests__/Dashboard.heatmap.test.ts |  30 +
 .../screens.snapshot.test.tsx.snap            | 832 +++++++++---------
 36 files changed, 919 insertions(+), 635 deletions(-)
 create mode 100644 client/src/lib/__tests__/terminalTheme.test.ts
 create mode 100644 client/src/lib/terminalTheme.ts
 create mode 100644 client/src/pages/__tests__/Dashboard.heatmap.test.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 0d95eb96..c83ee206 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,6 +1,6 @@
 # Claude Code Working Guide
 
-_Last synced: v1.8.3 (2026-09-23) + `GET /api/settings/info` reporting `server.memory.heapLimit` (V8's `heap_size_limit`), which the Dashboard's V8 Heap bar and Health Score now divide by instead of `heapTotal` + every `claude plugin install|update -y` (`cc-plugin-cli.js`, `skill-plugins.js`, both detached update helpers, `/agenthub-update`) retrying WITHOUT `-y` when an older Claude Code answers `unknown option '-y'` + the Add-lane modal asking `POST /api/lanes/ensure` with `exact: true` (#42) — without it a directory NESTED inside an existing lane resolves to that parent lane with `created: false`, so the modal closed on the parent and no new card ever appeared; `exact` counts only a lane on that very directory, and a `created: false` answer now names the lane that owns the folder instead of closing. The CLI, the run console and Sagi keep the parent lookup + Settings → **Appearance** (`client/src/components/settings/AppearanceSettings.tsx`: mode Dark/Light/**System** — `prefers-color-scheme`, followed live — plus one NAMED theme remembered per mode: dark Default/Darcula/Apple Dark, light Default/Apple Light/IntelliJ Light/Canvas). A theme is a CSS-variable override block in `client/src/index.css` keyed by `data-theme` on `<html>` (`.dark[data-theme=…]` / `[data-mode="light"][data-theme=…]`, `data-mode` is set on `<html>` too), and `--tint-base`/light `--syn-plain` are now `var(--surface-3)`/`var(--fg-primary)` so no theme restates them; `hooks/useTheme.ts` is a `useSyncExternalStore` reader over `localStorage` (`theme` = `dark|light|system`, `agenthub.theme.dark|light`) that caches NOTHING in the module, so the Sidebar and Settings can never disagree — do not reintroduce per-instance `useState` there; an inline `<script>` in `client/index.html` reads the same keys before first paint, so a key rename touches BOTH + the diff's +/- rows (`LaneDiffView.tsx` `rowTint`/`markerClass`, `highlight.ts` `diff-add`/`diff-del`) taking a /20 status tint, a 3px status bar and a coloured marker, and the changed-span emphasis `bg-fg-primary/15` instead of `bg-white/15`, which vanished on every light theme + the light theme going WARM (`client/src/index.css`: the whole light ramp is Claude's ivory/terracotta family — page `#e8e5da`, `.card` `#f5f3ec`, warm borders and a warm `--shadow-card`, `--accent` `#a34a28` which is the brand `#cc785c` two steps down because the brand value is 3.1:1 on ivory and 3.3:1 under white text — dark mode is untouched and stays Radix slate + blue) + status/accent FILLS being pre-mixed instead of translucent (`tint()` in `client/tailwind.config.js` + `--tint-base` in both themes of `client/src/index.css`: `bg-status-success/10` and `border-status-danger/40` now compile to `color-mix(…, rgb(var(--tint-base)))`, because `rgb(… / 0.1)` composites with whatever sits behind it — one "success" chip rendered as five different colours over the five surface steps and washed out on light cards. Scoped to `backgroundColor`/`borderColor` ONLY: `text-status-warning/80` and `ring-accent/40` sit on top of a fill and must stay translucent, and a translucent `surface` is what every scrim is made of. Light `--status-*` also dropped two steps below Radix 11 so a label clears 4.5:1 on its own densest chip, not just on the card) + the LIGHT theme being rebuilt around the rule that the surface ramp rises in lightness with its index in BOTH themes (`client/src/index.css`: page `surface-0` #eef0f3 under a brighter `.card` `surface-3` #f8f9fb, so hovers lift; light `--accent` #0068d6 because dark's #0090ff is 3.3:1 on white; `--fg-muted` held at ≥4.5:1; new `--syn-*` syntax tokens + `syntax.*` in `tailwind.config.js` consumed by `tokenClass` in `client/src/lib/highlight.ts`, dark keeping its pastels and light taking the same hues four steps darker) — a hardcoded near-black panel, a `hover:text-white` or a global `filter: invert(1)` is a light-mode BUG, token it or scope it under `.dark` + the lane console attaching to a lane's still-live run instead of failing on `409 ERUNLIVE` (`LaneConsolePane.tsx`, checked by `.code`), with a two-click **Kill** in Active runs (`RunHistory.tsx`) + the prompt box sending on Enter (Shift+Enter newline, IME-safe, `RunSetup.tsx`) + hook ingest dropping a byte-identical redelivery of the session's latest event (`findRecentDuplicateEvent` in `server/db.js`, guard in `POST /api/hooks/event`) + the Add-lane modal having NO pipeline picker and no Advanced disclosure (`AddLaneModal.tsx`: every lane is created on the server's own `default`, changed afterwards from the lane's detail header or at creation via `agenthub lanes add --pipeline <id>`; the router radio is the one per-lane extra left and it sits in the form) + the lane-detail header dropping its stage and `auto: <stage>` chips (the PipelineMap directly below already draws both) + the Changes panel's ONE resize control being icon-only, drawing the width the next click lands on + `client/src/components/Tooltip.tsx` — `GlobalTooltip`, mounted once in `App.tsx`, upgrades EVERY native `title` in the app into an anchored, themed bubble (parks the attribute in `data-tip` while the bubble is up and restores it after, so the accessible name and the no-JS fallback survive; `data-tip-off` opts out, `Tip.tsx` shares its `TOOLTIP_SURFACE`) — do NOT add a per-call-site tooltip wrapper, keep writing `title=` + the lane git surface of issues #34 and #35 — `server/lib/git-diff.js` (a lane's changes as parsed hunks, `range=work|branch|commit`, a caller-chosen `context`, three caps, plus `listCommits`/`readFileAt`/`listPaths`/`listTree`) behind `GET /api/lanes/:id/git/changes|log|file|ls|tree`, `server/lib/git-ops.js` (fetch/pull/push/stage/unstage/discard/commit/switch/branch-create/branch-delete — a per-file path must be one `git status` reports as changed, and `discard` needs `confirm: true`) behind `POST /api/lanes/:id/git/:action`, the Changes panel's five modes (**Files** first) with a staged-only commit box in its overview and per-file collapse in its review list (the header folds, only the PATH opens the file; plus collapse/expand-all) and a **back** that returns to the originating mode AND scroll offset, ONE header control that steps narrow/50-50/70-30/closed (`agenthub.workspace.changesSize` beside `changesOpen`), and its VS Code-shaped viewer (`LaneDiffView.tsx`: a diff bounded to its own box and scrolling on BOTH axes — a horizontal bar at the foot of a 2000-line container is only reachable at the end of the file — unified/side-by-side as two independently scrolling columns with MIRRORED `scrollLeft` — halves inside one scroller painted over each other with nothing to scroll — highlighting reused from `client/src/lib/highlight.ts`, intra-line emphasis, expand AND collapse context, whole-file), the Add-lane modal's third branch answer **Current branch** (it switches the modal to Repo mode — a lane that simply IS the repo on `main`, which a worktree could not do anyway because git holds one worktree per branch) and its `prefill` prop, driven by the git bar's **New lane here**, `gitFacts` gaining `hasRemote`/`upstream`/`ahead`/`behind`, `GET /api/lanes/branches` gaining `worktrees`, `GET /api/run/cwds` gaining a `repo` kind (the `source_repo` of existing lanes), the Add-lane modal's new/existing branch toggle + worktree list + Advanced disclosure (`AddLaneModal.tsx`), and the two new client components `LaneGitBar.tsx` (in `LaneCard`) and `LaneChangesPanel.tsx` (the collapsible Changes card beside `lane-detail` in `Workspace.tsx`, `agenthub.workspace.changesOpen`) + v1.6.17 (2026-09-18) + the run's permission mode defaulting to `auto` and the model picker sending ALIASES (`ALLOWED_PERMISSION_MODES` in `server/lib/pty-run.js` + `server/routes/run.js` gained `auto`, which is also the fallback `buildClaudeArgv` passes to `--permission-mode`, the `RunSetup` select's first option and `LaneConsolePane`'s initial state; and `RUN_MODEL_CHOICES` in `client/src/lib/api.ts` now holds `fable`/`opus`/`sonnet`/`haiku` instead of pinned ids — `claude --model` resolves an alias to the latest model itself, so a release like Fable 5.1 needs no edit here, and pricing is unaffected because it keys off the resolved id the transcript reports) + `convertEol` being GONE from the xterm terminal (`TerminalView.tsx`) — it rewrote every bare LF as CR+LF, so a tmux pane that scrolled (tmux emits a bare LF and keeps drawing at the column it was on) had the rest of that draw land at column 0, stamping a line's first characters into the left margin of the rows below: the torn left edge of issue #33, which the attach-size fix alone did NOT cure + the lane pane inheriting the graphical session's `DISPLAY`/`WAYLAND_DISPLAY`/`XAUTHORITY`/`XDG_RUNTIME_DIR` (`server/lib/desktop-env.js`, merged into `spawnRun`'s tmux `-e` env) — a systemd user service has none of them, so `claude` in a dashboard-started pane could not read the clipboard and answered "no image found in clipboard" on every image paste + the PTY attach carrying the client's REAL size (`sizeFromQuery` in `server/websocket.js`, `?cols=&rows=` on the `/ws-pty/:runId` URL built in `TerminalView.tsx`) — `attach()` was spawning `tmux attach-session` at a hardcoded 80×24 on EVERY attach, and tmux sizes the window to the newest client, so `claude` redrew its whole UI at 80 columns until the first `resize` message landed and that width stayed in the scrollback as the torn left-margin fragments of issue #33 + the Workspace's no-lane state being a real banner (`lane-empty` in `client/src/pages/Workspace.tsx`, `empty.title`/`empty.body` in `lanes.json` replacing `emptyState`) — the lane strip, add tile included, now renders only when a lane exists + the **Create/update readme file** action living in the lane's **Tools** menu (`LaneToolsMenu` in `client/src/components/lanes/LaneCard.tsx`, `actions.writeDocs*` in `lanes.json`) instead of being a checkbox in the Add-lane modal — same `api.run.start({initialPrompt: "/sg-all:sg-md-writing"})`, claude lanes only, but re-runnable long after creation + the lane terminal taking focus on mount and reporting its own death (`TerminalView.tsx`: `term.focus()` after the first fit, so typing reaches tmux without clicking the pane, and a new `onExit` prop — read through a ref so an inline parent callback never re-attaches the socket — fired on the server's `exit` frame; `LaneConsolePane` runs `newRun()` there, so a double Ctrl+C out of `claude` lands back on the run setup form instead of a dead pane behind a **New run** button) + the run console pre-filling NOTHING into the prompt box and a resume sending NO prompt (`LaneConsolePane.tsx`'s `promptPrefill` is gone — picking a pipeline used to write its driving slash command into the box on a claude lane and a stage-declaration checklist on a codex one, and whatever sits there is sent as a real prompt the moment the run starts; `handleStart` in `RunSetup.tsx` now drops `initialPrompt` entirely when a session is being resumed, since a resume carries its own transcript and anything typed would fire an extra turn into it) + browser notifications falling back when the push landed NOWHERE (`notify()` in `client/src/hooks/useNotifications.ts`): `POST /api/push/send` answers 200 with `{native:false, pushed:0}` whenever this browser has no push subscription — no service worker, a non-secure origin like `http://<lan-ip>:4820`, an unreachable push service — and the client counted that as delivered, so nothing ever appeared; delivery is now `native || pushed > 0` and anything else shows the notification locally (skipped when the push DID land, or every one would be doubled). The `Notification` API still needs a secure context, so a bare LAN IP can show nothing at all + auth-profile switching reading and writing the macOS **login Keychain** (`readCredentials`/`writeCredentials` in `server/lib/cc-profiles.js`): on darwin the `claude` CLI keeps `claudeAiOauth` in the generic-password item `Claude Code-credentials` (account `$USER`), never in `<CLAUDE_HOME>/.credentials.json` — so a switch rewrote a file nothing reads and the CLI kept running as the previous account. The Keychain wins when it holds an item, the file stays the fallback and is kept in step only when it already exists, and `AGENTHUB_CC_KEYCHAIN=0` pins the file (the test suite sets it so a Mac dev run never touches the real Keychain) + turn bookkeeping being idempotent (`stmts.insertEventAt` in `server/db.js`, used for `TurnDuration` with the TRANSCRIPT's timestamp — its dedup guard matches on `created_at`, so a NOW stamp made every hook re-insert the session's whole turn history: 587k rows, 75% of the events table — and `meta.thinking_blocks`/`turn_count`/`total_turn_duration_ms` now ASSIGNED from the full parse instead of `+=`, since `extract()` returns whole-transcript totals every time) + `hasLegacyHooks` blocking `fastPathOk` (`scripts/plugin-bootstrap.js`): leftover checkout hook entries double EVERY event and subagent row, `stripLegacyHooks` only ever ran inside `bootstrap()`, and the fast path skipped it on exactly the healthy installs where it mattered + the one-time repair marker moving to `user_version` 3 (`server/index.js`) — it now also deletes the duplicated `TurnDuration` rows, and 2 could not be trusted because an old build still ingesting hooks re-inflated whatever that pass corrected + a router switch on a LIVE pane reporting itself (`POST /api/lanes/:id/router/apply` now answers `restart_required`/`run_id` when `runs.getRun(runIdForLane(id))` is live, and `LaneRouterRow` renders a **Restart** button that kills that pane and restarts it from the lane id alone — Claude Code re-applies `env` to a running session but keeps the model it resolved at startup, so the old router's model name reaches the new endpoint and the next prompt fails) + the sidebar brand being the SmartGift wordmark with the `AgentHub` caption under it and the vendored `client/public/favicon.ico` (`Sidebar.tsx`, `client/index.html`, `client/public/manifest.json`) + the two "Claude is waiting for YOU" notification types (`client/src/lib/notifPrefs.ts` — the ONE definition of the prefs shape/defaults/storage, now imported by both `Settings.tsx` and `useNotifications.ts`; `onAwaitingInput` and `onTurnComplete` default ON, issue #29) + per-message token counting (`lastUsageMsgId` in `server/lib/transcript-cache.js` and both parsers in `scripts/import-history.js`: Claude Code writes ONE JSONL line per content block of an assistant message and each repeats the same message-level `usage`, so summing lines over-counted tokens and cost ~1.5–2× on tool-heavy sessions) + `stmts.setTokenUsage` (`server/db.js`) — the EXACT counterpart of `replaceTokenUsage`, used only by `reconcileTokens`, because the high-water `baseline_*` columns make a downward CORRECTION impossible; the server runs that reconcile once in the background at the first start after upgrading (`user_version` 2, `server/index.js`) + v1.6.12 (2026-09-18) + the same three rules in `skills/ship-feature-lane/SKILL.md` (three scheduled touchpoints now: Stage 0 Q&A, Stage 0b plan approval, Stage 7 acceptance before the PR is published — the publish rule and the turn-liveness rule name them) + the `default` 8-node pipeline asking the user twice and looping on a NO-GO (`skills/ship-feature/SKILL.md` + `server/data/pipelines/default.json`: `intake` now DECLARES `/superpowers:brainstorming` and detects it, the `plan` phase blocks on an explicit approval, `ship-feature` gained the four sections that make a long run followable and affordable (**Right-size the run** — trivial work does not enter the pipeline and a small change skips the plan-debate/independent-test/gate agents, **Dispatching a judgement** — the fresh-context/foreground/never-fork/never-dispatch-what-a-command-answers contract written ONCE instead of re-argued per phase, **Resuming after a compaction**, and a per-phase **Leave when:**), `review` DECLARES the bare `/code-review` (Claude Code's own, no `plugin:` prefix — `requiredSkillPlugins` skips it, so it adds no install requirement) and runs it always and a domain reviewer only for the layers `git diff --name-only` shows, and `gate` requires the user's acceptance — a NO-GO re-declares `implementing` or `plan` instead of proceeding) + `KEEP_RETIRED_ROOTS` dropping to 1 (`scripts/plugin-bootstrap.js`) + lane removal being record-only (the `remove` branch in `server/routes/lanes.js` no longer calls `removeWorktree`/`removeLaneData`, so a worktree, its branch and its database survive forgetting a lane — see the rule under **Lanes**) + v1.6.10 (2026-09-17) + per-profile Claude quota (`server/lib/cc-usage.js`, `POST /api/cc-config/profiles/usage`, the **Check quota** button in the Profiles modal) — a POST because a saved profile's token is normally expired, so answering refreshes it and the refresh ROTATES the credentials written back to disk, which is also why it never runs on a poll; the LIVE account is the exception and is read from `.credentials.json` via `cc-profiles.liveCredentialsFor`, never refreshed, because the CLI has already retired the refresh token its profile copy holds + the settings patch that changes nothing now writing nothing (`patchSettings` in `server/lib/cc-mutate.js`, plus `.claude/.cc-config-backups/` in a lane's git exclude) + the Add-lane modal closing itself on a clean setup and offering a real Close when a step failed + a lane's router pick no longer landing on whichever lane the user switched to mid-apply (`LaneRouterRow`), nor reverting on the next lane switch — `POST /api/lanes/:id/router/apply` now `broadcastLane`s like every other mutating lane route, so the client's cached row stops disagreeing with what was written + a run being opened by a DECLARATION only — a backwards DETECTION now continues the run in flight (`appendStageEvent` in `server/lib/lanes.js`), because detection bounces within one feature and `runs` is what every pass rate on the Workflows page is divided by + `SETTLE_MS` in `server/lib/cc-reload.js` — the two reload commands are typed a second apart, and `reloadOpenSessions` is now async, because Claude Code swallows the Enter after a slash command and back-to-back sends merged into one composer line + v1.6.0 (2026-09-14) + the lane strip's drag/Alt-arrow reordering and inline rename (`client/src/lib/laneOrderStorage.ts`, `LaneStripCard`'s `index`/`onReorder` props, the Workspace detail header's rename field, and `normalizeTitle`/`bindable` in `server/lib/lanes.js`) + the uncommitted-files hover panel (`LaneGitFilesPanel` in `LaneCard`, and `files` from `GET /api/lanes/:id/git` now being `{path,status,added,deleted}` records off one extra `git diff --numstat HEAD`) + AI Router profiles (`server/lib/ai-routers.js`, `server/lib/router-apply.js`, the Settings tab `/settings?tool=ai-router`, its **Test** button / `POST /api/ai-routers/test`, the per-lane router select — labelled **Model**, `LaneRouterRow` exported from `LaneCard` and rendered in the Workspace lane-detail header row — and `lanes.router_profile`) + the bootstrap's superseded-build guard and plugin-cache pruner (`supersededBy`/`pruneRetiredPluginRoots` in `scripts/plugin-bootstrap.js`, `unitRoot` in `scripts/systemd-service.js`) + v1.5.6 (2026-09-11) + the systemd handover rule below (`scripts/systemd-service.js`'s `writeUserService`/`restartUserService` split and `plugin-bootstrap.js`'s deferred `pendingSystemdRestart`) + eb63569 (2026-09-10) + release-based update detection (`server/lib/update-check.js` reads the forge releases API — a checkout via its `origin` remote, a plugin-cache install via the marketplace manifest on disk, since an archive-sourced cache dir has no `.git`; a `plugin_managed` install self-updates via the detached `plugin-update` chain) + the install-wide **Update all** batch and session reload (`server/lib/cc-update-all.js`, `server/lib/cc-reload.js`)._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker.
+_Last synced: v1.8.3 (2026-09-23) + `GET /api/settings/info` reporting `server.memory.heapLimit` (V8's `heap_size_limit`), which the Dashboard's V8 Heap bar and Health Score now divide by instead of `heapTotal` + every `claude plugin install|update -y` (`cc-plugin-cli.js`, `skill-plugins.js`, both detached update helpers, `/agenthub-update`) retrying WITHOUT `-y` when an older Claude Code answers `unknown option '-y'` + the Dashboard heatmap ramp mixing `--accent` into `--surface-0` so it reads on every theme + the xterm terminal following the selected DARK theme (`client/src/lib/terminalTheme.ts`, live via `term.options.theme`) and chart colours using structural tokens + the Add-lane modal asking `POST /api/lanes/ensure` with `exact: true` (#42) — without it a directory NESTED inside an existing lane resolves to that parent lane with `created: false`, so the modal closed on the parent and no new card ever appeared; `exact` counts only a lane on that very directory, and a `created: false` answer now names the lane that owns the folder instead of closing. The CLI, the run console and Sagi keep the parent lookup + Settings → **Appearance** (`client/src/components/settings/AppearanceSettings.tsx`: mode Dark/Light/**System** — `prefers-color-scheme`, followed live — plus one NAMED theme remembered per mode: dark Default/Darcula/Apple Dark, light Default/Apple Light/IntelliJ Light/Canvas). A theme is a CSS-variable override block in `client/src/index.css` keyed by `data-theme` on `<html>` (`.dark[data-theme=…]` / `[data-mode="light"][data-theme=…]`, `data-mode` is set on `<html>` too), and `--tint-base`/light `--syn-plain` are now `var(--surface-3)`/`var(--fg-primary)` so no theme restates them; `hooks/useTheme.ts` is a `useSyncExternalStore` reader over `localStorage` (`theme` = `dark|light|system`, `agenthub.theme.dark|light`) that caches NOTHING in the module, so the Sidebar and Settings can never disagree — do not reintroduce per-instance `useState` there; an inline `<script>` in `client/index.html` reads the same keys before first paint, so a key rename touches BOTH + the diff's +/- rows (`LaneDiffView.tsx` `rowTint`/`markerClass`, `highlight.ts` `diff-add`/`diff-del`) taking a /20 status tint, a 3px status bar and a coloured marker, and the changed-span emphasis `bg-fg-primary/15` instead of `bg-white/15`, which vanished on every light theme + the light theme going WARM (`client/src/index.css`: the whole light ramp is Claude's ivory/terracotta family — page `#e8e5da`, `.card` `#f5f3ec`, warm borders and a warm `--shadow-card`, `--accent` `#a34a28` which is the brand `#cc785c` two steps down because the brand value is 3.1:1 on ivory and 3.3:1 under white text — dark mode is untouched and stays Radix slate + blue) + status/accent FILLS being pre-mixed instead of translucent (`tint()` in `client/tailwind.config.js` + `--tint-base` in both themes of `client/src/index.css`: `bg-status-success/10` and `border-status-danger/40` now compile to `color-mix(…, rgb(var(--tint-base)))`, because `rgb(… / 0.1)` composites with whatever sits behind it — one "success" chip rendered as five different colours over the five surface steps and washed out on light cards. Scoped to `backgroundColor`/`borderColor` ONLY: `text-status-warning/80` and `ring-accent/40` sit on top of a fill and must stay translucent, and a translucent `surface` is what every scrim is made of. Light `--status-*` also dropped two steps below Radix 11 so a label clears 4.5:1 on its own densest chip, not just on the card) + the LIGHT theme being rebuilt around the rule that the surface ramp rises in lightness with its index in BOTH themes (`client/src/index.css`: page `surface-0` #eef0f3 under a brighter `.card` `surface-3` #f8f9fb, so hovers lift; light `--accent` #0068d6 because dark's #0090ff is 3.3:1 on white; `--fg-muted` held at ≥4.5:1; new `--syn-*` syntax tokens + `syntax.*` in `tailwind.config.js` consumed by `tokenClass` in `client/src/lib/highlight.ts`, dark keeping its pastels and light taking the same hues four steps darker) — a hardcoded near-black panel, a `hover:text-white` or a global `filter: invert(1)` is a light-mode BUG, token it or scope it under `.dark` + the lane console attaching to a lane's still-live run instead of failing on `409 ERUNLIVE` (`LaneConsolePane.tsx`, checked by `.code`), with a two-click **Kill** in Active runs (`RunHistory.tsx`) + the prompt box sending on Enter (Shift+Enter newline, IME-safe, `RunSetup.tsx`) + hook ingest dropping a byte-identical redelivery of the session's latest event (`findRecentDuplicateEvent` in `server/db.js`, guard in `POST /api/hooks/event`) + the Add-lane modal having NO pipeline picker and no Advanced disclosure (`AddLaneModal.tsx`: every lane is created on the server's own `default`, changed afterwards from the lane's detail header or at creation via `agenthub lanes add --pipeline <id>`; the router radio is the one per-lane extra left and it sits in the form) + the lane-detail header dropping its stage and `auto: <stage>` chips (the PipelineMap directly below already draws both) + the Changes panel's ONE resize control being icon-only, drawing the width the next click lands on + `client/src/components/Tooltip.tsx` — `GlobalTooltip`, mounted once in `App.tsx`, upgrades EVERY native `title` in the app into an anchored, themed bubble (parks the attribute in `data-tip` while the bubble is up and restores it after, so the accessible name and the no-JS fallback survive; `data-tip-off` opts out, `Tip.tsx` shares its `TOOLTIP_SURFACE`) — do NOT add a per-call-site tooltip wrapper, keep writing `title=` + the lane git surface of issues #34 and #35 — `server/lib/git-diff.js` (a lane's changes as parsed hunks, `range=work|branch|commit`, a caller-chosen `context`, three caps, plus `listCommits`/`readFileAt`/`listPaths`/`listTree`) behind `GET /api/lanes/:id/git/changes|log|file|ls|tree`, `server/lib/git-ops.js` (fetch/pull/push/stage/unstage/discard/commit/switch/branch-create/branch-delete — a per-file path must be one `git status` reports as changed, and `discard` needs `confirm: true`) behind `POST /api/lanes/:id/git/:action`, the Changes panel's five modes (**Files** first) with a staged-only commit box in its overview and per-file collapse in its review list (the header folds, only the PATH opens the file; plus collapse/expand-all) and a **back** that returns to the originating mode AND scroll offset, ONE header control that steps narrow/50-50/70-30/closed (`agenthub.workspace.changesSize` beside `changesOpen`), and its VS Code-shaped viewer (`LaneDiffView.tsx`: a diff bounded to its own box and scrolling on BOTH axes — a horizontal bar at the foot of a 2000-line container is only reachable at the end of the file — unified/side-by-side as two independently scrolling columns with MIRRORED `scrollLeft` — halves inside one scroller painted over each other with nothing to scroll — highlighting reused from `client/src/lib/highlight.ts`, intra-line emphasis, expand AND collapse context, whole-file), the Add-lane modal's third branch answer **Current branch** (it switches the modal to Repo mode — a lane that simply IS the repo on `main`, which a worktree could not do anyway because git holds one worktree per branch) and its `prefill` prop, driven by the git bar's **New lane here**, `gitFacts` gaining `hasRemote`/`upstream`/`ahead`/`behind`, `GET /api/lanes/branches` gaining `worktrees`, `GET /api/run/cwds` gaining a `repo` kind (the `source_repo` of existing lanes), the Add-lane modal's new/existing branch toggle + worktree list + Advanced disclosure (`AddLaneModal.tsx`), and the two new client components `LaneGitBar.tsx` (in `LaneCard`) and `LaneChangesPanel.tsx` (the collapsible Changes card beside `lane-detail` in `Workspace.tsx`, `agenthub.workspace.changesOpen`) + v1.6.17 (2026-09-18) + the run's permission mode defaulting to `auto` and the model picker sending ALIASES (`ALLOWED_PERMISSION_MODES` in `server/lib/pty-run.js` + `server/routes/run.js` gained `auto`, which is also the fallback `buildClaudeArgv` passes to `--permission-mode`, the `RunSetup` select's first option and `LaneConsolePane`'s initial state; and `RUN_MODEL_CHOICES` in `client/src/lib/api.ts` now holds `fable`/`opus`/`sonnet`/`haiku` instead of pinned ids — `claude --model` resolves an alias to the latest model itself, so a release like Fable 5.1 needs no edit here, and pricing is unaffected because it keys off the resolved id the transcript reports) + `convertEol` being GONE from the xterm terminal (`TerminalView.tsx`) — it rewrote every bare LF as CR+LF, so a tmux pane that scrolled (tmux emits a bare LF and keeps drawing at the column it was on) had the rest of that draw land at column 0, stamping a line's first characters into the left margin of the rows below: the torn left edge of issue #33, which the attach-size fix alone did NOT cure + the lane pane inheriting the graphical session's `DISPLAY`/`WAYLAND_DISPLAY`/`XAUTHORITY`/`XDG_RUNTIME_DIR` (`server/lib/desktop-env.js`, merged into `spawnRun`'s tmux `-e` env) — a systemd user service has none of them, so `claude` in a dashboard-started pane could not read the clipboard and answered "no image found in clipboard" on every image paste + the PTY attach carrying the client's REAL size (`sizeFromQuery` in `server/websocket.js`, `?cols=&rows=` on the `/ws-pty/:runId` URL built in `TerminalView.tsx`) — `attach()` was spawning `tmux attach-session` at a hardcoded 80×24 on EVERY attach, and tmux sizes the window to the newest client, so `claude` redrew its whole UI at 80 columns until the first `resize` message landed and that width stayed in the scrollback as the torn left-margin fragments of issue #33 + the Workspace's no-lane state being a real banner (`lane-empty` in `client/src/pages/Workspace.tsx`, `empty.title`/`empty.body` in `lanes.json` replacing `emptyState`) — the lane strip, add tile included, now renders only when a lane exists + the **Create/update readme file** action living in the lane's **Tools** menu (`LaneToolsMenu` in `client/src/components/lanes/LaneCard.tsx`, `actions.writeDocs*` in `lanes.json`) instead of being a checkbox in the Add-lane modal — same `api.run.start({initialPrompt: "/sg-all:sg-md-writing"})`, claude lanes only, but re-runnable long after creation + the lane terminal taking focus on mount and reporting its own death (`TerminalView.tsx`: `term.focus()` after the first fit, so typing reaches tmux without clicking the pane, and a new `onExit` prop — read through a ref so an inline parent callback never re-attaches the socket — fired on the server's `exit` frame; `LaneConsolePane` runs `newRun()` there, so a double Ctrl+C out of `claude` lands back on the run setup form instead of a dead pane behind a **New run** button) + the run console pre-filling NOTHING into the prompt box and a resume sending NO prompt (`LaneConsolePane.tsx`'s `promptPrefill` is gone — picking a pipeline used to write its driving slash command into the box on a claude lane and a stage-declaration checklist on a codex one, and whatever sits there is sent as a real prompt the moment the run starts; `handleStart` in `RunSetup.tsx` now drops `initialPrompt` entirely when a session is being resumed, since a resume carries its own transcript and anything typed would fire an extra turn into it) + browser notifications falling back when the push landed NOWHERE (`notify()` in `client/src/hooks/useNotifications.ts`): `POST /api/push/send` answers 200 with `{native:false, pushed:0}` whenever this browser has no push subscription — no service worker, a non-secure origin like `http://<lan-ip>:4820`, an unreachable push service — and the client counted that as delivered, so nothing ever appeared; delivery is now `native || pushed > 0` and anything else shows the notification locally (skipped when the push DID land, or every one would be doubled). The `Notification` API still needs a secure context, so a bare LAN IP can show nothing at all + auth-profile switching reading and writing the macOS **login Keychain** (`readCredentials`/`writeCredentials` in `server/lib/cc-profiles.js`): on darwin the `claude` CLI keeps `claudeAiOauth` in the generic-password item `Claude Code-credentials` (account `$USER`), never in `<CLAUDE_HOME>/.credentials.json` — so a switch rewrote a file nothing reads and the CLI kept running as the previous account. The Keychain wins when it holds an item, the file stays the fallback and is kept in step only when it already exists, and `AGENTHUB_CC_KEYCHAIN=0` pins the file (the test suite sets it so a Mac dev run never touches the real Keychain) + turn bookkeeping being idempotent (`stmts.insertEventAt` in `server/db.js`, used for `TurnDuration` with the TRANSCRIPT's timestamp — its dedup guard matches on `created_at`, so a NOW stamp made every hook re-insert the session's whole turn history: 587k rows, 75% of the events table — and `meta.thinking_blocks`/`turn_count`/`total_turn_duration_ms` now ASSIGNED from the full parse instead of `+=`, since `extract()` returns whole-transcript totals every time) + `hasLegacyHooks` blocking `fastPathOk` (`scripts/plugin-bootstrap.js`): leftover checkout hook entries double EVERY event and subagent row, `stripLegacyHooks` only ever ran inside `bootstrap()`, and the fast path skipped it on exactly the healthy installs where it mattered + the one-time repair marker moving to `user_version` 3 (`server/index.js`) — it now also deletes the duplicated `TurnDuration` rows, and 2 could not be trusted because an old build still ingesting hooks re-inflated whatever that pass corrected + a router switch on a LIVE pane reporting itself (`POST /api/lanes/:id/router/apply` now answers `restart_required`/`run_id` when `runs.getRun(runIdForLane(id))` is live, and `LaneRouterRow` renders a **Restart** button that kills that pane and restarts it from the lane id alone — Claude Code re-applies `env` to a running session but keeps the model it resolved at startup, so the old router's model name reaches the new endpoint and the next prompt fails) + the sidebar brand being the SmartGift wordmark with the `AgentHub` caption under it and the vendored `client/public/favicon.ico` (`Sidebar.tsx`, `client/index.html`, `client/public/manifest.json`) + the two "Claude is waiting for YOU" notification types (`client/src/lib/notifPrefs.ts` — the ONE definition of the prefs shape/defaults/storage, now imported by both `Settings.tsx` and `useNotifications.ts`; `onAwaitingInput` and `onTurnComplete` default ON, issue #29) + per-message token counting (`lastUsageMsgId` in `server/lib/transcript-cache.js` and both parsers in `scripts/import-history.js`: Claude Code writes ONE JSONL line per content block of an assistant message and each repeats the same message-level `usage`, so summing lines over-counted tokens and cost ~1.5–2× on tool-heavy sessions) + `stmts.setTokenUsage` (`server/db.js`) — the EXACT counterpart of `replaceTokenUsage`, used only by `reconcileTokens`, because the high-water `baseline_*` columns make a downward CORRECTION impossible; the server runs that reconcile once in the background at the first start after upgrading (`user_version` 2, `server/index.js`) + v1.6.12 (2026-09-18) + the same three rules in `skills/ship-feature-lane/SKILL.md` (three scheduled touchpoints now: Stage 0 Q&A, Stage 0b plan approval, Stage 7 acceptance before the PR is published — the publish rule and the turn-liveness rule name them) + the `default` 8-node pipeline asking the user twice and looping on a NO-GO (`skills/ship-feature/SKILL.md` + `server/data/pipelines/default.json`: `intake` now DECLARES `/superpowers:brainstorming` and detects it, the `plan` phase blocks on an explicit approval, `ship-feature` gained the four sections that make a long run followable and affordable (**Right-size the run** — trivial work does not enter the pipeline and a small change skips the plan-debate/independent-test/gate agents, **Dispatching a judgement** — the fresh-context/foreground/never-fork/never-dispatch-what-a-command-answers contract written ONCE instead of re-argued per phase, **Resuming after a compaction**, and a per-phase **Leave when:**), `review` DECLARES the bare `/code-review` (Claude Code's own, no `plugin:` prefix — `requiredSkillPlugins` skips it, so it adds no install requirement) and runs it always and a domain reviewer only for the layers `git diff --name-only` shows, and `gate` requires the user's acceptance — a NO-GO re-declares `implementing` or `plan` instead of proceeding) + `KEEP_RETIRED_ROOTS` dropping to 1 (`scripts/plugin-bootstrap.js`) + lane removal being record-only (the `remove` branch in `server/routes/lanes.js` no longer calls `removeWorktree`/`removeLaneData`, so a worktree, its branch and its database survive forgetting a lane — see the rule under **Lanes**) + v1.6.10 (2026-09-17) + per-profile Claude quota (`server/lib/cc-usage.js`, `POST /api/cc-config/profiles/usage`, the **Check quota** button in the Profiles modal) — a POST because a saved profile's token is normally expired, so answering refreshes it and the refresh ROTATES the credentials written back to disk, which is also why it never runs on a poll; the LIVE account is the exception and is read from `.credentials.json` via `cc-profiles.liveCredentialsFor`, never refreshed, because the CLI has already retired the refresh token its profile copy holds + the settings patch that changes nothing now writing nothing (`patchSettings` in `server/lib/cc-mutate.js`, plus `.claude/.cc-config-backups/` in a lane's git exclude) + the Add-lane modal closing itself on a clean setup and offering a real Close when a step failed + a lane's router pick no longer landing on whichever lane the user switched to mid-apply (`LaneRouterRow`), nor reverting on the next lane switch — `POST /api/lanes/:id/router/apply` now `broadcastLane`s like every other mutating lane route, so the client's cached row stops disagreeing with what was written + a run being opened by a DECLARATION only — a backwards DETECTION now continues the run in flight (`appendStageEvent` in `server/lib/lanes.js`), because detection bounces within one feature and `runs` is what every pass rate on the Workflows page is divided by + `SETTLE_MS` in `server/lib/cc-reload.js` — the two reload commands are typed a second apart, and `reloadOpenSessions` is now async, because Claude Code swallows the Enter after a slash command and back-to-back sends merged into one composer line + v1.6.0 (2026-09-14) + the lane strip's drag/Alt-arrow reordering and inline rename (`client/src/lib/laneOrderStorage.ts`, `LaneStripCard`'s `index`/`onReorder` props, the Workspace detail header's rename field, and `normalizeTitle`/`bindable` in `server/lib/lanes.js`) + the uncommitted-files hover panel (`LaneGitFilesPanel` in `LaneCard`, and `files` from `GET /api/lanes/:id/git` now being `{path,status,added,deleted}` records off one extra `git diff --numstat HEAD`) + AI Router profiles (`server/lib/ai-routers.js`, `server/lib/router-apply.js`, the Settings tab `/settings?tool=ai-router`, its **Test** button / `POST /api/ai-routers/test`, the per-lane router select — labelled **Model**, `LaneRouterRow` exported from `LaneCard` and rendered in the Workspace lane-detail header row — and `lanes.router_profile`) + the bootstrap's superseded-build guard and plugin-cache pruner (`supersededBy`/`pruneRetiredPluginRoots` in `scripts/plugin-bootstrap.js`, `unitRoot` in `scripts/systemd-service.js`) + v1.5.6 (2026-09-11) + the systemd handover rule below (`scripts/systemd-service.js`'s `writeUserService`/`restartUserService` split and `plugin-bootstrap.js`'s deferred `pendingSystemdRestart`) + eb63569 (2026-09-10) + release-based update detection (`server/lib/update-check.js` reads the forge releases API — a checkout via its `origin` remote, a plugin-cache install via the marketplace manifest on disk, since an archive-sourced cache dir has no `.git`; a `plugin_managed` install self-updates via the detached `plugin-update` chain) + the install-wide **Update all** batch and session reload (`server/lib/cc-update-all.js`, `server/lib/cc-reload.js`)._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker.
 
 ## Project mission
 - Maintain a reliable local-first dashboard for Claude Code session monitoring.
diff --git a/client/src/components/AgentCard.tsx b/client/src/components/AgentCard.tsx
index e81cb9d2..3a834dc1 100644
--- a/client/src/components/AgentCard.tsx
+++ b/client/src/components/AgentCard.tsx
@@ -182,7 +182,9 @@ export function AgentCard({ agent, session, label, onClick }: AgentCardProps) {
         <div className="flex items-center gap-2.5 min-w-0 overflow-hidden">
           <div
             className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${
-              isMain ? "bg-accent/15 text-accent" : "bg-violet-500/15 text-violet-400"
+              isMain
+                ? "bg-accent/15 text-accent"
+                : "bg-violet-500/15 text-violet-700 dark:text-violet-400"
             }`}
           >
             {isMain ? <Bot className="w-3.5 h-3.5" /> : <GitBranch className="w-3.5 h-3.5" />}
diff --git a/client/src/components/EventDetail.tsx b/client/src/components/EventDetail.tsx
index 6d32b977..7c24c09b 100644
--- a/client/src/components/EventDetail.tsx
+++ b/client/src/components/EventDetail.tsx
@@ -379,7 +379,7 @@ function ScalarValue({ value }: { value: unknown }) {
   if (value == null) return <span className="text-fg-muted italic">null</span>;
   if (typeof value === "boolean") {
     const color = value
-      ? "text-green-400 border-green-500/30 bg-green-500/10"
+      ? "text-green-700 dark:text-green-400 border-green-500/30 bg-green-500/10"
       : "text-fg-secondary border-border-light/30 bg-surface-4/10";
     return (
       <span className={`inline-block px-2 py-0.5 rounded border ${color}`}>{String(value)}</span>
diff --git a/client/src/components/ImportHistory.tsx b/client/src/components/ImportHistory.tsx
index b0581a56..87d79af6 100644
--- a/client/src/components/ImportHistory.tsx
+++ b/client/src/components/ImportHistory.tsx
@@ -625,7 +625,7 @@ export function ImportHistory() {
               <ResultStat
                 label={t("import.result.backfilled", { count: result.backfilled ?? 0 })}
                 value={result.backfilled ?? 0}
-                color="text-blue-400"
+                color="text-blue-700 dark:text-blue-400"
               />
               <ResultStat
                 label={t("import.result.skipped", { count: result.skipped })}
@@ -672,12 +672,12 @@ export function ImportHistory() {
               <ResultStat
                 label={t("import.backupResult.events", { count: backupResult.events })}
                 value={backupResult.events}
-                color="text-violet-300"
+                color="text-violet-700 dark:text-violet-300"
               />
               <ResultStat
                 label={t("import.backupResult.pricing", { count: backupResult.model_pricing })}
                 value={backupResult.model_pricing}
-                color="text-cyan-300"
+                color="text-cyan-700 dark:text-cyan-300"
               />
             </div>
             <p className="text-[11px] text-fg-muted">
@@ -737,7 +737,7 @@ function ModeButton({
     >
       <div
         className={`flex items-center gap-1.5 text-xs font-medium mb-1 ${
-          active ? "text-blue-400" : "text-fg-secondary"
+          active ? "text-blue-700 dark:text-blue-400" : "text-fg-secondary"
         }`}
       >
         {icon}
diff --git a/client/src/components/SessionOverview.tsx b/client/src/components/SessionOverview.tsx
index 5c248b8b..54b2c30e 100644
--- a/client/src/components/SessionOverview.tsx
+++ b/client/src/components/SessionOverview.tsx
@@ -95,21 +95,21 @@ function StatTile({
 }) {
   const palette = {
     default: "border-surface-3 bg-surface-2 text-fg-secondary",
-    violet: "border-violet-500/20 bg-violet-500/5 text-violet-200",
+    violet: "border-violet-500/20 bg-violet-500/5 text-violet-800 dark:text-violet-200",
     emerald: "border-status-success/20 bg-status-success/5 text-status-success",
     amber: "border-status-warning/20 bg-status-warning/5 text-status-warning",
-    rose: "border-rose-500/20 bg-rose-500/5 text-rose-200",
-    cyan: "border-cyan-500/20 bg-cyan-500/5 text-cyan-200",
-    blue: "border-blue-600/20 bg-blue-600/5 text-blue-300",
+    rose: "border-rose-500/20 bg-rose-500/5 text-rose-800 dark:text-rose-200",
+    cyan: "border-cyan-500/20 bg-cyan-500/5 text-cyan-800 dark:text-cyan-200",
+    blue: "border-blue-600/20 bg-blue-600/5 text-blue-700 dark:text-blue-300",
   }[tone];
 
   const iconTone = {
     default: "text-fg-muted",
-    violet: "text-violet-400",
+    violet: "text-violet-700 dark:text-violet-400",
     emerald: "text-status-success",
     amber: "text-status-warning",
-    rose: "text-rose-400",
-    cyan: "text-cyan-400",
+    rose: "text-rose-700 dark:text-rose-400",
+    cyan: "text-cyan-700 dark:text-cyan-400",
     blue: "text-blue-500",
   }[tone];
 
@@ -359,7 +359,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
         <div className="lg:col-span-2 rounded-lg border border-surface-3 bg-surface-2/60 p-3.5">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
-              <Wrench className="w-3.5 h-3.5 text-violet-400" />
+              <Wrench className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
               Top tools
             </h3>
             <span className="text-[10px] text-fg-muted font-mono">
@@ -418,7 +418,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
               <>
                 <div className="flex items-center justify-between mb-3">
                   <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
-                    <GitBranch className="w-3.5 h-3.5 text-cyan-400" />
+                    <GitBranch className="w-3.5 h-3.5 text-cyan-700 dark:text-cyan-400" />
                     Subagents
                   </h3>
                   <span className="text-[10px] text-fg-muted font-mono">{totalRuns} runs</span>
@@ -508,14 +508,14 @@ function TokenFlowBar({ tokens, total }: { tokens: SessionStats["tokens"]; total
       label: "Cache read",
       value: tokens.cache_read_tokens,
       cls: "bg-sky-500",
-      text: "text-sky-300",
+      text: "text-sky-700 dark:text-sky-300",
     },
     {
       key: "cache_write",
       label: "Cache write",
       value: tokens.cache_write_tokens,
       cls: "bg-violet-500",
-      text: "text-violet-300",
+      text: "text-violet-700 dark:text-violet-300",
     },
     {
       key: "input",
@@ -529,7 +529,7 @@ function TokenFlowBar({ tokens, total }: { tokens: SessionStats["tokens"]; total
       label: "Output",
       value: tokens.output_tokens,
       cls: "bg-orange-500",
-      text: "text-orange-300",
+      text: "text-orange-700 dark:text-orange-300",
     },
   ];
 
diff --git a/client/src/components/StatusBadge.tsx b/client/src/components/StatusBadge.tsx
index 6bf97970..579eea12 100644
--- a/client/src/components/StatusBadge.tsx
+++ b/client/src/components/StatusBadge.tsx
@@ -91,7 +91,7 @@ function ReasonChip({ reason }: { reason: AwaitingReason }) {
       className={`inline-flex items-center gap-1 rounded-full border px-1.5 text-[10px] font-medium leading-4 ${
         cfg.urgent
           ? "bg-status-warning/15 border-status-warning/25 text-status-warning"
-          : "bg-yellow-500/10 border-yellow-500/20 text-yellow-400/90"
+          : "bg-yellow-500/10 border-yellow-500/20 text-yellow-700/90 dark:text-yellow-400/90"
       }`}
     >
       <Icon className="w-2.5 h-2.5 flex-shrink-0" aria-hidden="true" />
diff --git a/client/src/components/config/ScopeBadge.tsx b/client/src/components/config/ScopeBadge.tsx
index 44e4fa97..92ab1d7c 100644
--- a/client/src/components/config/ScopeBadge.tsx
+++ b/client/src/components/config/ScopeBadge.tsx
@@ -12,11 +12,11 @@ export function ScopeBadge({ scope }: { scope: string }) {
   const { t } = useTranslation("ccConfig");
   const color =
     scope === "user"
-      ? "bg-sky-500/10 text-sky-300 border-sky-500/30"
+      ? "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30"
       : scope === "project"
         ? "bg-status-success/10 text-status-success border-status-success/30"
         : scope === "project-local"
-          ? "bg-violet-500/10 text-violet-300 border-violet-500/30"
+          ? "bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/30"
           : "bg-surface-3 text-fg-secondary border-border";
   const label =
     scope === "project-local"
diff --git a/client/src/components/conversation/MarkdownContent.tsx b/client/src/components/conversation/MarkdownContent.tsx
index ab4eae0d..4656a972 100644
--- a/client/src/components/conversation/MarkdownContent.tsx
+++ b/client/src/components/conversation/MarkdownContent.tsx
@@ -320,7 +320,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           href={linkM[2]!}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-violet-300 hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
+          className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
         >
           {renderInline(linkM[1]!, `${baseKey}-l${n}`)}
         </a>
@@ -337,7 +337,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           href={urlM[0]}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-violet-300 hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70 break-all"
+          className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70 break-all"
         >
           {urlM[0]}
         </a>
@@ -428,7 +428,10 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
               );
             }
             return (
-              <ul key={idx} className="list-disc pl-5 space-y-1 marker:text-violet-400/60">
+              <ul
+                key={idx}
+                className="list-disc pl-5 space-y-1 marker:text-violet-700/60 dark:marker:text-violet-400/60"
+              >
                 {b.items.map((item, i) => (
                   <li key={i} className="text-sm text-fg-secondary">
                     {renderListItem(item, `li${idx}-${i}`)}
diff --git a/client/src/components/conversation/MessageList.tsx b/client/src/components/conversation/MessageList.tsx
index d4e387e5..57c0bffc 100644
--- a/client/src/components/conversation/MessageList.tsx
+++ b/client/src/components/conversation/MessageList.tsx
@@ -82,25 +82,25 @@ const SENDER_STYLES: Record<
     label: "User",
     icon: User,
     avatarRing:
-      "bg-gradient-to-br from-blue-600/30 to-cyan-500/20 text-blue-300 ring-1 ring-blue-500/30",
+      "bg-gradient-to-br from-blue-600/30 to-cyan-500/20 text-blue-700 dark:text-blue-300 ring-1 ring-blue-500/30",
     accentBar: "before:bg-blue-600/40",
-    headerText: "text-blue-300",
+    headerText: "text-blue-700 dark:text-blue-300",
   },
   assistant: {
     label: "Assistant",
     icon: Bot,
     avatarRing:
-      "bg-gradient-to-br from-violet-500/30 to-fuchsia-500/20 text-violet-200 ring-1 ring-violet-400/30",
+      "bg-gradient-to-br from-violet-500/30 to-fuchsia-500/20 text-violet-800 dark:text-violet-200 ring-1 ring-violet-400/30",
     accentBar: "before:bg-violet-500/40",
-    headerText: "text-violet-200",
+    headerText: "text-violet-800 dark:text-violet-200",
   },
   orchestrator: {
     label: "Main agent",
     icon: Workflow,
     avatarRing:
-      "bg-gradient-to-br from-teal-500/30 to-status-success/20 text-teal-200 ring-1 ring-teal-400/30",
+      "bg-gradient-to-br from-teal-500/30 to-status-success/20 text-teal-800 dark:text-teal-200 ring-1 ring-teal-400/30",
     accentBar: "before:bg-teal-500/40",
-    headerText: "text-teal-200",
+    headerText: "text-teal-800 dark:text-teal-200",
   },
   system: {
     label: "System",
@@ -169,7 +169,7 @@ function SessionEventRow({ title, timestamp }: { title?: string; timestamp: stri
   return (
     <div className="flex items-center justify-center py-1">
       <div className="inline-flex items-center gap-2 text-[11px] text-fg-secondary bg-surface-2/70 border border-surface-3 rounded-full px-3 py-1 max-w-full">
-        <Pencil className="w-3 h-3 text-violet-300/70 flex-shrink-0" />
+        <Pencil className="w-3 h-3 text-violet-700/70 dark:text-violet-300/70 flex-shrink-0" />
         <span className="text-fg-muted">Renamed session →</span>
         <span className="text-fg-secondary font-medium truncate">{title || "(untitled)"}</span>
         {timestamp && (
@@ -253,11 +253,13 @@ function renderSegment(seg: TuiSegment, key: number): React.ReactNode {
         <CollapsibleBlock
           key={key}
           text={seg.text}
-          icon={<ScrollText className="w-3.5 h-3.5 text-violet-400/60 flex-shrink-0" />}
+          icon={
+            <ScrollText className="w-3.5 h-3.5 text-violet-700/60 dark:text-violet-400/60 flex-shrink-0" />
+          }
           title="Persisted output"
           borderClass="border-violet-500/20"
           bgClass="bg-violet-500/5"
-          textClass="text-violet-300/80"
+          textClass="text-violet-700/80 dark:text-violet-300/80"
         />
       );
     case "text": {
@@ -394,7 +396,9 @@ export function MessageList({ messages, loading }: MessageListProps) {
                   <span className="text-[10px] text-fg-muted font-mono inline-flex items-center gap-1">
                     <span className="text-status-success/70">↓ {fmt(msg.usage.input_tokens)}</span>
                     <span className="text-fg-muted">·</span>
-                    <span className="text-orange-300/70">↑ {fmt(msg.usage.output_tokens)}</span>
+                    <span className="text-orange-700/70 dark:text-orange-300/70">
+                      ↑ {fmt(msg.usage.output_tokens)}
+                    </span>
                   </span>
                 )}
                 {msg.timestamp && (
@@ -413,11 +417,13 @@ export function MessageList({ messages, loading }: MessageListProps) {
                       <CollapsibleBlock
                         key={bIdx}
                         text={block.text}
-                        icon={<ScrollText className="w-3.5 h-3.5 text-cyan-400/60 flex-shrink-0" />}
+                        icon={
+                          <ScrollText className="w-3.5 h-3.5 text-cyan-700/60 dark:text-cyan-400/60 flex-shrink-0" />
+                        }
                         title="Task Notification"
                         borderClass="border-cyan-500/20"
                         bgClass="bg-cyan-500/5"
-                        textClass="text-cyan-400/80"
+                        textClass="text-cyan-700/80 dark:text-cyan-400/80"
                       />
                     );
                   }
diff --git a/client/src/components/conversation/ToolCallBlock.tsx b/client/src/components/conversation/ToolCallBlock.tsx
index 3a8ff17d..32edd362 100644
--- a/client/src/components/conversation/ToolCallBlock.tsx
+++ b/client/src/components/conversation/ToolCallBlock.tsx
@@ -156,7 +156,7 @@ function renderInput(toolUse: TranscriptContent) {
     return (
       <div className="space-y-2">
         <div className="flex items-center gap-1.5 text-xs text-fg-secondary">
-          <FileText className="w-3.5 h-3.5 text-violet-400" />
+          <FileText className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
           <span className="font-mono">{obj.file_path}</span>
           {obj.replace_all === true && (
             <span className="text-[10px] uppercase tracking-wider text-status-warning/80 bg-status-warning/10 border border-status-warning/20 rounded px-1.5 py-0.5">
@@ -178,7 +178,7 @@ function renderInput(toolUse: TranscriptContent) {
   if (tool === "read" && typeof obj.file_path === "string") {
     return (
       <div className="flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-4/40 border border-surface-3 rounded-md px-3 py-2">
-        <FileText className="w-3.5 h-3.5 text-sky-400 flex-shrink-0" />
+        <FileText className="w-3.5 h-3.5 text-sky-700 dark:text-sky-400 flex-shrink-0" />
         <span className="font-mono break-all">{obj.file_path}</span>
         {(typeof obj.offset === "number" || typeof obj.limit === "number") && (
           <span className="text-fg-muted font-mono ml-auto flex-shrink-0">
@@ -198,7 +198,7 @@ function renderInput(toolUse: TranscriptContent) {
           <span className="text-fg-muted font-mono uppercase tracking-wider text-[10px]">
             Pattern
           </span>
-          <code className="font-mono text-cyan-300 bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
+          <code className="font-mono text-cyan-700 dark:text-cyan-300 bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
             {obj.pattern}
           </code>
         </div>
diff --git a/client/src/components/conversation/toolStyle.ts b/client/src/components/conversation/toolStyle.ts
index e3a7b31c..ccf274a1 100644
--- a/client/src/components/conversation/toolStyle.ts
+++ b/client/src/components/conversation/toolStyle.ts
@@ -83,8 +83,8 @@ export interface ToolStyle {
 
 const VIOLET: ToolStyle = {
   Icon: Wrench,
-  text: "text-violet-300",
-  chip: "bg-violet-500/15 text-violet-300",
+  text: "text-violet-700 dark:text-violet-300",
+  chip: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
   bar: "bg-violet-500/60",
   border: "border-violet-500/20",
 };
@@ -92,99 +92,99 @@ const VIOLET: ToolStyle = {
 const STYLES: Record<string, ToolStyle> = {
   bash: {
     Icon: Terminal,
-    text: "text-emerald-300",
-    chip: "bg-emerald-500/15 text-emerald-300",
+    text: "text-emerald-700 dark:text-emerald-300",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
     bar: "bg-emerald-500/60",
     border: "border-emerald-500/20",
   },
   read: {
     Icon: FileText,
-    text: "text-sky-300",
-    chip: "bg-sky-500/15 text-sky-300",
+    text: "text-sky-700 dark:text-sky-300",
+    chip: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
     bar: "bg-sky-500/60",
     border: "border-sky-500/20",
   },
   write: {
     Icon: FilePlus2,
-    text: "text-violet-300",
-    chip: "bg-violet-500/15 text-violet-300",
+    text: "text-violet-700 dark:text-violet-300",
+    chip: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
     bar: "bg-violet-500/60",
     border: "border-violet-500/20",
   },
   edit: {
     Icon: FilePen,
-    text: "text-amber-300",
-    chip: "bg-amber-500/15 text-amber-300",
+    text: "text-amber-700 dark:text-amber-300",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
     bar: "bg-amber-500/60",
     border: "border-amber-500/20",
   },
   multiedit: {
     Icon: FilePen,
-    text: "text-amber-300",
-    chip: "bg-amber-500/15 text-amber-300",
+    text: "text-amber-700 dark:text-amber-300",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
     bar: "bg-amber-500/60",
     border: "border-amber-500/20",
   },
   grep: {
     Icon: Search,
-    text: "text-cyan-300",
-    chip: "bg-cyan-500/15 text-cyan-300",
+    text: "text-cyan-700 dark:text-cyan-300",
+    chip: "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300",
     bar: "bg-cyan-500/60",
     border: "border-cyan-500/20",
   },
   glob: {
     Icon: FolderTree,
-    text: "text-cyan-300",
-    chip: "bg-cyan-500/15 text-cyan-300",
+    text: "text-cyan-700 dark:text-cyan-300",
+    chip: "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300",
     bar: "bg-cyan-500/60",
     border: "border-cyan-500/20",
   },
   webfetch: {
     Icon: Globe,
-    text: "text-blue-300",
-    chip: "bg-blue-500/15 text-blue-300",
+    text: "text-blue-700 dark:text-blue-300",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
     bar: "bg-blue-500/60",
     border: "border-blue-500/20",
   },
   websearch: {
     Icon: Globe,
-    text: "text-blue-300",
-    chip: "bg-blue-500/15 text-blue-300",
+    text: "text-blue-700 dark:text-blue-300",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
     bar: "bg-blue-500/60",
     border: "border-blue-500/20",
   },
   task: {
     Icon: Bot,
-    text: "text-pink-300",
-    chip: "bg-pink-500/15 text-pink-300",
+    text: "text-pink-700 dark:text-pink-300",
+    chip: "bg-pink-500/15 text-pink-700 dark:text-pink-300",
     bar: "bg-pink-500/60",
     border: "border-pink-500/20",
   },
   agent: {
     Icon: Bot,
-    text: "text-pink-300",
-    chip: "bg-pink-500/15 text-pink-300",
+    text: "text-pink-700 dark:text-pink-300",
+    chip: "bg-pink-500/15 text-pink-700 dark:text-pink-300",
     bar: "bg-pink-500/60",
     border: "border-pink-500/20",
   },
   todowrite: {
     Icon: ListTodo,
-    text: "text-rose-300",
-    chip: "bg-rose-500/15 text-rose-300",
+    text: "text-rose-700 dark:text-rose-300",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
     bar: "bg-rose-500/60",
     border: "border-rose-500/20",
   },
   schedulewakeup: {
     Icon: Clock,
-    text: "text-orange-300",
-    chip: "bg-orange-500/15 text-orange-300",
+    text: "text-orange-700 dark:text-orange-300",
+    chip: "bg-orange-500/15 text-orange-700 dark:text-orange-300",
     bar: "bg-orange-500/60",
     border: "border-orange-500/20",
   },
   skill: {
     Icon: Sparkles,
-    text: "text-fuchsia-300",
-    chip: "bg-fuchsia-500/15 text-fuchsia-300",
+    text: "text-fuchsia-700 dark:text-fuchsia-300",
+    chip: "bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300",
     bar: "bg-fuchsia-500/60",
     border: "border-fuchsia-500/20",
   },
diff --git a/client/src/components/event-views/primitives.tsx b/client/src/components/event-views/primitives.tsx
index 3179c6ac..551b069a 100644
--- a/client/src/components/event-views/primitives.tsx
+++ b/client/src/components/event-views/primitives.tsx
@@ -289,7 +289,7 @@ function HunkView({ hunk }: { hunk: DiffHunk }) {
   let newLine = hunk.newStart;
   return (
     <div>
-      <div className="px-3 py-1 text-[10px] text-cyan-300 bg-cyan-500/10 border-y border-cyan-500/20 font-mono">
+      <div className="px-3 py-1 text-[10px] text-cyan-700 dark:text-cyan-300 bg-cyan-500/10 border-y border-cyan-500/20 font-mono">
         @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},{hunk.newLines} @@
       </div>
       <table className="w-full border-collapse">
@@ -301,7 +301,7 @@ function HunkView({ hunk }: { hunk: DiffHunk }) {
             const showNew = kind !== "remove";
             const rowBg =
               kind === "add"
-                ? "bg-green-500/10 text-green-200"
+                ? "bg-green-500/10 text-green-800 dark:text-green-200"
                 : kind === "remove"
                   ? "bg-status-danger/10 text-status-danger"
                   : "text-fg-secondary";
@@ -372,7 +372,7 @@ function ValueCell({ value }: { value: unknown }) {
       <span
         className={`inline-block px-2 py-0.5 rounded border text-[11px] font-mono ${
           value
-            ? "text-green-400 border-green-500/30 bg-green-500/10"
+            ? "text-green-700 dark:text-green-400 border-green-500/30 bg-green-500/10"
             : "text-fg-secondary border-border-light/30 bg-surface-4/10"
         }`}
       >
@@ -445,7 +445,7 @@ export function MatchList({ matches }: { matches: GrepMatch[] }) {
     <ul className="divide-y divide-border border border-border rounded overflow-hidden text-[11px] max-h-80 overflow-y-auto font-mono">
       {matches.map((m, i) => (
         <li key={i} className="px-3 py-1 text-fg-secondary break-all">
-          {m.file && <span className="text-cyan-300">{m.file}</span>}
+          {m.file && <span className="text-cyan-700 dark:text-cyan-300">{m.file}</span>}
           {m.line != null && <span className="text-fg-muted">:{m.line}</span>}
           {m.text && <span className="text-fg-secondary">: {m.text}</span>}
         </li>
diff --git a/client/src/components/lanes/FolderBrowseModal.tsx b/client/src/components/lanes/FolderBrowseModal.tsx
index 973f16d3..3d2cee8d 100644
--- a/client/src/components/lanes/FolderBrowseModal.tsx
+++ b/client/src/components/lanes/FolderBrowseModal.tsx
@@ -99,7 +99,7 @@ export function FolderBrowseModal({
               className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-primary hover:bg-surface-2"
             >
               {entry.isGitRepo ? (
-                <FolderGit2 className="h-3.5 w-3.5 text-blue-400" />
+                <FolderGit2 className="h-3.5 w-3.5 text-blue-700 dark:text-blue-400" />
               ) : (
                 <FolderOpen className="h-3.5 w-3.5 text-fg-muted" />
               )}
diff --git a/client/src/components/run/RunHistory.tsx b/client/src/components/run/RunHistory.tsx
index f9fc623f..cdc33ebe 100644
--- a/client/src/components/run/RunHistory.tsx
+++ b/client/src/components/run/RunHistory.tsx
@@ -58,7 +58,7 @@ function StatusPill({
   const colors: Record<string, string> = {
     running: "bg-status-success/10 text-status-success border-status-success/30",
     gone: "bg-surface-3 text-fg-secondary border-border",
-    completed: "bg-sky-500/10 text-sky-300 border-sky-500/30",
+    completed: "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30",
     error: "bg-status-danger/10 text-status-danger border-status-danger/30",
     killed: "bg-surface-3 text-fg-secondary border-border",
     abandoned: "bg-surface-3 text-fg-secondary border-border",
@@ -574,7 +574,7 @@ function UnifiedRunRowView({
         )}
         {row.external && (
           <span
-            className="text-[10px] font-semibold text-amber-300 bg-amber-500/10 border border-amber-500/25 px-1.5 py-0.5 rounded-full"
+            className="text-[10px] font-semibold text-amber-700 dark:text-amber-300 bg-amber-500/10 border border-amber-500/25 px-1.5 py-0.5 rounded-full"
             title={t("runs.externalHint")}
           >
             {t("runs.externalBadge")}
diff --git a/client/src/components/run/RunSetup.tsx b/client/src/components/run/RunSetup.tsx
index 2f77d885..5e8bf4a9 100644
--- a/client/src/components/run/RunSetup.tsx
+++ b/client/src/components/run/RunSetup.tsx
@@ -691,7 +691,7 @@ function SessionPicker({
                         s.status === "active"
                           ? "bg-status-success/10 text-status-success border-status-success/30"
                           : s.status === "completed"
-                            ? "bg-sky-500/10 text-sky-300 border-sky-500/30"
+                            ? "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30"
                             : s.status === "error"
                               ? "bg-status-danger/10 text-status-danger border-status-danger/30"
                               : "bg-surface-3 text-fg-secondary border-border"
diff --git a/client/src/components/run/TerminalView.tsx b/client/src/components/run/TerminalView.tsx
index ed5c356c..129b8e96 100644
--- a/client/src/components/run/TerminalView.tsx
+++ b/client/src/components/run/TerminalView.tsx
@@ -9,13 +9,17 @@
  * The socket auto-reconnects: a server restart kills the attach PTY, and
  * without a retry the pane silently freezes on its last painted frame — it
  * still LOOKS live, but no keystroke or mouse report reaches tmux again.
+ * Always painted dark, in the palette of the user's chosen DARK theme
+ * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { CanvasAddon } from "@xterm/addon-canvas";
 import "@xterm/xterm/css/xterm.css";
+import { useTheme } from "../../hooks/useTheme";
+import { terminalThemeFor } from "../../lib/terminalTheme";
 
 interface TerminalViewProps {
   runId: string;
@@ -33,6 +37,14 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
   // re-attach on each one.
   const onExitRef = useRef(onExit);
   onExitRef.current = onExit;
+  // Always the DARK theme's palette, even in light mode: Claude Code's TUI
+  // assumes a dark background. Read through a ref at construction so a theme
+  // change never re-runs the attach effect; the effect below recolours live.
+  const darkTheme = useTheme().themeFor.dark;
+  const palette = useMemo(() => terminalThemeFor(darkTheme), [darkTheme]);
+  const paletteRef = useRef(palette);
+  paletteRef.current = palette;
+  const termRef = useRef<Terminal | null>(null);
 
   useEffect(() => {
     // An explicit fontFamily pins every glyph to one bundled webfont. Left
@@ -56,7 +68,9 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
       fontSize: 13,
       cursorBlink: true,
       fontFamily: '"JetBrains Mono", monospace',
+      theme: paletteRef.current,
     });
+    termRef.current = term;
     const fit = new FitAddon();
     term.loadAddon(fit);
     if (containerRef.current) term.open(containerRef.current);
@@ -225,8 +239,20 @@ export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
       ws?.close();
       canvas?.dispose();
       term.dispose();
+      termRef.current = null;
     };
   }, [runId, wsBaseUrl]);
 
-  return <div ref={containerRef} className="h-full w-full" data-testid="terminal-view" />;
+  useEffect(() => {
+    if (termRef.current) termRef.current.options.theme = palette;
+  }, [palette]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full"
+      style={{ backgroundColor: palette.background }}
+      data-testid="terminal-view"
+    />
+  );
 }
diff --git a/client/src/components/run/__tests__/TerminalView.test.tsx b/client/src/components/run/__tests__/TerminalView.test.tsx
index c009a28d..b75f78e9 100644
--- a/client/src/components/run/__tests__/TerminalView.test.tsx
+++ b/client/src/components/run/__tests__/TerminalView.test.tsx
@@ -3,11 +3,12 @@
  * @description Tests for the xterm.js-backed terminal view: verifies it opens
  * a WS connection to the right URL, writes incoming binary frames to the
  * mocked terminal, forwards typed input as outgoing binary frames, and
- * re-attaches after the socket drops (server restart) but not after `exit`.
+ * re-attaches after the socket drops (server restart) but not after `exit`,
+ * and recolours live on a dark-theme change without re-attaching.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, cleanup } from "@testing-library/react";
+import { render, cleanup, act } from "@testing-library/react";
 import { TerminalView } from "../TerminalView";
 
 const writeMock = vi.fn();
@@ -26,9 +27,13 @@ const termState = {
   rows: 28,
 };
 const onResizeHandlers: Array<() => void> = [];
+const termOptions: { theme?: unknown } = {};
+const ctorArgs: Array<{ theme?: unknown }> = [];
 
 vi.mock("@xterm/xterm", () => ({
-  Terminal: vi.fn().mockImplementation(() => ({
+  Terminal: vi.fn().mockImplementation((opts: { theme?: unknown }) => ({
+    ...(ctorArgs.push(opts), {}),
+    options: termOptions,
     get modes() {
       return termState.modes;
     },
@@ -58,6 +63,10 @@ vi.mock("@xterm/xterm", () => ({
     focus: focusMock,
   })),
 }));
+// jsdom loads no stylesheet, so stand in for the CSS-variable probe.
+vi.mock("../../../lib/terminalTheme", () => ({
+  terminalThemeFor: (id: string) => ({ background: `bg-${id}` }),
+}));
 vi.mock("@xterm/addon-fit", () => ({
   FitAddon: vi.fn().mockImplementation(() => ({ fit: vi.fn() })),
 }));
@@ -103,6 +112,10 @@ describe("TerminalView", () => {
     loadAddonMock.mockClear();
     openMock.mockClear();
     focusMock.mockClear();
+    disposeMock.mockClear();
+    ctorArgs.length = 0;
+    delete termOptions.theme;
+    localStorage.clear();
   });
 
   afterEach(cleanup);
@@ -126,6 +139,21 @@ describe("TerminalView", () => {
     expect(MockWebSocket.instances[0]!.url).toBe("ws://localhost:4820/ws-pty/agenthub-lane-1");
   });
 
+  it("paints the chosen DARK theme and recolours live without re-attaching", () => {
+    localStorage.setItem("theme", "light"); // app in light mode: terminal stays dark
+    localStorage.setItem("agenthub.theme.dark", "apple-dark");
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    expect(ctorArgs[0]!.theme).toEqual({ background: "bg-apple-dark" });
+
+    act(() => {
+      localStorage.setItem("agenthub.theme.dark", "darcula");
+      window.dispatchEvent(new Event("agenthub-theme"));
+    });
+    expect(termOptions.theme).toEqual({ background: "bg-darcula" });
+    expect(MockWebSocket.instances).toHaveLength(1);
+    expect(disposeMock).not.toHaveBeenCalled();
+  });
+
   it("writes incoming WS data to the terminal", () => {
     render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
     const ws = MockWebSocket.instances[0]!;
diff --git a/client/src/components/workflows/CompactionImpact.tsx b/client/src/components/workflows/CompactionImpact.tsx
index 8e3c0561..e4129951 100644
--- a/client/src/components/workflows/CompactionImpact.tsx
+++ b/client/src/components/workflows/CompactionImpact.tsx
@@ -151,7 +151,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
     .attr("x2", innerW)
     .attr("y1", (d) => yScale(d))
     .attr("y2", (d) => yScale(d))
-    .attr("stroke", "#2a2a3d")
+    .attr("stroke", "rgb(var(--border))")
     .attr("stroke-width", 1);
 
   // Y axis (sessions)
@@ -166,7 +166,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
     )
     .call((ax) => ax.select(".domain").remove())
     .selectAll("text")
-    .attr("fill", "#6b7280")
+    .attr("fill", "rgb(var(--fg-muted))")
     .attr("font-size", 10)
     .attr("font-family", "Inter, sans-serif");
 
@@ -176,7 +176,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
     .call(d3.axisBottom(xScale).tickSize(0).tickPadding(8))
     .call((ax) => ax.select(".domain").remove())
     .selectAll("text")
-    .attr("fill", "#9ca3af")
+    .attr("fill", "rgb(var(--fg-secondary))")
     .attr("font-size", 10)
     .attr("font-family", "Inter, sans-serif");
 
@@ -185,7 +185,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
     .attr("x", innerW / 2)
     .attr("y", innerH + 38)
     .attr("text-anchor", "middle")
-    .attr("fill", "#6b7280")
+    .attr("fill", "rgb(var(--fg-muted))")
     .attr("font-size", 10)
     .attr("font-weight", 500)
     .attr("font-family", "Inter, sans-serif")
@@ -196,7 +196,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
     .attr("x", -innerH / 2)
     .attr("y", -38)
     .attr("text-anchor", "middle")
-    .attr("fill", "#6b7280")
+    .attr("fill", "rgb(var(--fg-muted))")
     .attr("font-size", 10)
     .attr("font-weight", 500)
     .attr("font-family", "Inter, sans-serif")
@@ -229,7 +229,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
         .attr("x", bx + bw / 2)
         .attr("y", by - 5)
         .attr("text-anchor", "middle")
-        .attr("fill", "#a5b4fc")
+        .attr("fill", "rgb(var(--fg-secondary))")
         .attr("font-size", 10)
         .attr("font-weight", "600")
         .attr("font-family", "Inter, sans-serif")
@@ -242,7 +242,7 @@ function renderHistogram(svg: SVGSVGElement, histo: HistogramBucket[], opts: His
         .attr("y", innerH - 1)
         .attr("width", bw)
         .attr("height", 1)
-        .attr("fill", "#2a2a3d");
+        .attr("fill", "rgb(var(--border))");
     }
 
     // Transparent, full-height hover target on top of the bar.
@@ -364,12 +364,12 @@ export function CompactionImpact({ data }: CompactionImpactProps) {
           label={t("compaction.sessionsAffected")}
           value={affected.toLocaleString()}
           sub={t("compaction.ofTotal", { total: data.totalSessions.toLocaleString() })}
-          accent="text-violet-300"
+          accent="text-violet-700 dark:text-violet-300"
         />
         <StatBox
           label={t("compaction.avgPerSession")}
           value={avgPerSession.toFixed(1)}
-          accent="text-blue-400"
+          accent="text-blue-700 dark:text-blue-400"
         />
         <StatBox
           label={t("compaction.peakSession")}
diff --git a/client/src/components/workflows/ErrorPropagationMap.tsx b/client/src/components/workflows/ErrorPropagationMap.tsx
index 45a583b3..8ffd010a 100644
--- a/client/src/components/workflows/ErrorPropagationMap.tsx
+++ b/client/src/components/workflows/ErrorPropagationMap.tsx
@@ -92,7 +92,7 @@ export function ErrorPropagationMap({ data }: ErrorPropagationMapProps) {
             height="24"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#10b981"
+            stroke="rgb(var(--status-success))"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -174,7 +174,7 @@ export function ErrorPropagationMap({ data }: ErrorPropagationMapProps) {
                     </div>
                     <span
                       className="text-xs font-semibold tabular-nums w-7 text-right transition-colors"
-                      style={{ color: isHovered ? color : "#9ca3af" }}
+                      style={{ color: isHovered ? color : "rgb(var(--fg-secondary))" }}
                     >
                       {d.count}
                     </span>
diff --git a/client/src/components/workflows/OrchestrationDAG.tsx b/client/src/components/workflows/OrchestrationDAG.tsx
index 628b1cfa..6b397cea 100644
--- a/client/src/components/workflows/OrchestrationDAG.tsx
+++ b/client/src/components/workflows/OrchestrationDAG.tsx
@@ -587,7 +587,7 @@ export function OrchestrationDAG({ data, onNodeClick, selectedNode }: Orchestrat
       .attr("x", (_, i) => layerXPositions[i] ?? 0)
       .attr("y", 22)
       .attr("text-anchor", "middle")
-      .attr("fill", "#6b7280")
+      .attr("fill", "rgb(var(--fg-muted))")
       .attr("font-size", "10px")
       .attr("font-weight", "500")
       .attr("letter-spacing", "0.08em")
@@ -605,7 +605,7 @@ export function OrchestrationDAG({ data, onNodeClick, selectedNode }: Orchestrat
         .attr("y1", 32)
         .attr("x2", sepX)
         .attr("y2", svgHeight - PADDING_BOTTOM + 8)
-        .attr("stroke", "#1f1f30")
+        .attr("stroke", "rgb(var(--border))")
         .attr("stroke-width", 1)
         .attr("stroke-dasharray", "4 4");
     }
@@ -651,7 +651,7 @@ export function OrchestrationDAG({ data, onNodeClick, selectedNode }: Orchestrat
         .append("path")
         .attr("d", path)
         .attr("fill", "none")
-        .attr("stroke", isZero ? "#2a2a3d" : "#4f46e5")
+        .attr("stroke", isZero ? "rgb(var(--border-light))" : "#4f46e5")
         .attr("stroke-width", isZero ? 1 : stroke)
         .attr("stroke-opacity", isZero ? 0.3 : 0.55)
         .attr("stroke-linecap", "round");
diff --git a/client/src/components/workflows/SessionComplexityScatter.tsx b/client/src/components/workflows/SessionComplexityScatter.tsx
index 4f3b2dc8..b06c37e0 100644
--- a/client/src/components/workflows/SessionComplexityScatter.tsx
+++ b/client/src/components/workflows/SessionComplexityScatter.tsx
@@ -262,7 +262,7 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
       .range([MIN_BUBBLE_R, MAX_BUBBLE_R]);
 
     // Grid lines
-    const gridColor = "#2a2a3d";
+    const gridColor = "rgb(var(--border))";
 
     g.append("g")
       .attr("class", "grid-x")
@@ -303,9 +303,9 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
           .tickFormat((d) => fmtXTick(d as number))
       )
       .call((sel) => {
-        sel.select(".domain").attr("stroke", "#363650");
-        sel.selectAll(".tick line").attr("stroke", "#363650");
-        sel.selectAll(".tick text").attr("fill", "#6b7280").attr("font-size", "11");
+        sel.select(".domain").attr("stroke", "rgb(var(--border-light))");
+        sel.selectAll(".tick line").attr("stroke", "rgb(var(--border-light))");
+        sel.selectAll(".tick text").attr("fill", "rgb(var(--fg-muted))").attr("font-size", "11");
       });
 
     // X axis label
@@ -313,7 +313,7 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
       .attr("x", innerW / 2)
       .attr("y", innerH + 44)
       .attr("text-anchor", "middle")
-      .attr("fill", "#6b7280")
+      .attr("fill", "rgb(var(--fg-muted))")
       .attr("font-size", "11")
       .text(t("complexity.duration"));
 
@@ -321,9 +321,9 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
     g.append("g")
       .call(d3.axisLeft(yScale).ticks(5).tickFormat(d3.format("d")))
       .call((sel) => {
-        sel.select(".domain").attr("stroke", "#363650");
-        sel.selectAll(".tick line").attr("stroke", "#363650");
-        sel.selectAll(".tick text").attr("fill", "#6b7280").attr("font-size", "11");
+        sel.select(".domain").attr("stroke", "rgb(var(--border-light))");
+        sel.selectAll(".tick line").attr("stroke", "rgb(var(--border-light))");
+        sel.selectAll(".tick text").attr("fill", "rgb(var(--fg-muted))").attr("font-size", "11");
       });
 
     // Y axis label
@@ -332,7 +332,7 @@ export function SessionComplexityScatter({ data, onSessionClick }: SessionComple
       .attr("x", -innerH / 2)
       .attr("y", -40)
       .attr("text-anchor", "middle")
-      .attr("fill", "#6b7280")
+      .attr("fill", "rgb(var(--fg-muted))")
       .attr("font-size", "11")
       .text(t("complexity.agentCount"));
 
diff --git a/client/src/components/workflows/SessionDrillIn.tsx b/client/src/components/workflows/SessionDrillIn.tsx
index 80a89fd3..6c168e22 100644
--- a/client/src/components/workflows/SessionDrillIn.tsx
+++ b/client/src/components/workflows/SessionDrillIn.tsx
@@ -75,7 +75,7 @@ type AgentNode = SessionDrillInData["tree"][number];
 function statusColor(status: string): string {
   switch (status) {
     case "completed":
-      return "text-violet-400 bg-violet-500/10 border-violet-500/20";
+      return "text-violet-700 dark:text-violet-400 bg-violet-500/10 border-violet-500/20";
     case "working":
       return "text-status-success bg-status-success/10 border-status-success/20";
     case "error":
@@ -83,7 +83,7 @@ function statusColor(status: string): string {
     case "active":
       return "text-status-success bg-status-success/10 border-status-success/20";
     case "waiting":
-      return "text-yellow-400 bg-yellow-500/10 border-yellow-500/20";
+      return "text-yellow-700 dark:text-yellow-400 bg-yellow-500/10 border-yellow-500/20";
     default:
       return "text-fg-secondary bg-surface-4/10 border-border-light/20";
   }
@@ -186,7 +186,7 @@ function TreeNode({ node, depth }: TreeNodeProps) {
 
         {/* Name */}
         <span
-          className={`text-sm font-medium truncate ${isMain ? "text-indigo-300" : "text-fg-secondary"}`}
+          className={`text-sm font-medium truncate ${isMain ? "text-indigo-700 dark:text-indigo-300" : "text-fg-secondary"}`}
         >
           {node.name}
         </span>
@@ -255,7 +255,7 @@ function ToolTimeline({ events }: ToolTimelineProps) {
             className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-surface-4 transition-colors"
           >
             {/* Tool pill */}
-            <span className="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-indigo-500/15 text-indigo-300 border border-indigo-500/20 whitespace-nowrap">
+            <span className="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 border border-indigo-500/20 whitespace-nowrap">
               {ev.tool_name ?? ev.event_type}
             </span>
 
@@ -286,8 +286,8 @@ interface EventSequenceProps {
 const EVENT_TYPE_COLOR: Record<string, string> = {
   tool_use: "text-blue-500",
   tool_result: "text-status-success",
-  agent_start: "text-indigo-400",
-  agent_stop: "text-violet-400",
+  agent_start: "text-indigo-700 dark:text-indigo-400",
+  agent_stop: "text-violet-700 dark:text-violet-400",
   compaction: "text-status-warning",
   error: "text-status-danger",
 };
diff --git a/client/src/components/workflows/WorkflowRunsPanel.tsx b/client/src/components/workflows/WorkflowRunsPanel.tsx
index e99012dd..28450a5d 100644
--- a/client/src/components/workflows/WorkflowRunsPanel.tsx
+++ b/client/src/components/workflows/WorkflowRunsPanel.tsx
@@ -121,13 +121,13 @@ function statusClass(status: string): string {
 // (e.g. Scout / Verify / Synthesize, or Explain / Interview / Gotcha) reads
 // as its own color in both the filter row and the result label chips.
 const PHASE_PALETTE = [
-  "bg-violet-500/15 text-violet-300 border-violet-500/40",
-  "bg-sky-500/15 text-sky-300 border-sky-500/40",
+  "bg-violet-500/15 text-violet-700 dark:text-violet-300 border-violet-500/40",
+  "bg-sky-500/15 text-sky-700 dark:text-sky-300 border-sky-500/40",
   "bg-status-warning/15 text-status-warning border-status-warning/40",
   "bg-status-success/15 text-status-success border-status-success/40",
-  "bg-rose-500/15 text-rose-300 border-rose-500/40",
-  "bg-cyan-500/15 text-cyan-300 border-cyan-500/40",
-  "bg-fuchsia-500/15 text-fuchsia-300 border-fuchsia-500/40",
+  "bg-rose-500/15 text-rose-700 dark:text-rose-300 border-rose-500/40",
+  "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300 border-cyan-500/40",
+  "bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300 border-fuchsia-500/40",
 ];
 
 function phaseColor(phaseTitles: string[], title: string | null | undefined): string {
@@ -321,7 +321,7 @@ export function WorkflowRunsPanel({
   if (!controlled && loading) {
     return (
       <div className="flex items-center justify-center gap-2 py-8 text-sm text-fg-muted">
-        <Loader2 className="w-4 h-4 animate-spin text-violet-400" />
+        <Loader2 className="w-4 h-4 animate-spin text-violet-700 dark:text-violet-400" />
         <span className="animate-pulse">{t("runs.loading")}</span>
       </div>
     );
@@ -365,7 +365,7 @@ export function WorkflowRunsPanel({
               {running ? (
                 <Loader2 className="w-4 h-4 text-status-warning flex-shrink-0 animate-spin" />
               ) : (
-                <Workflow className="w-4 h-4 text-violet-400 flex-shrink-0" />
+                <Workflow className="w-4 h-4 text-violet-700 dark:text-violet-400 flex-shrink-0" />
               )}
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 flex-wrap">
@@ -393,7 +393,7 @@ export function WorkflowRunsPanel({
                 <Link
                   to={`/sessions/${encodeURIComponent(run.session_id)}`}
                   onClick={(e) => e.stopPropagation()}
-                  className="text-fg-muted hover:text-violet-400 transition-colors flex-shrink-0"
+                  className="text-fg-muted hover:text-violet-700 dark:hover:text-violet-400 transition-colors flex-shrink-0"
                   title={t("runs.openSession")}
                 >
                   <ExternalLink className="w-3.5 h-3.5" />
@@ -565,7 +565,7 @@ export function WorkflowRunsPanel({
                                 <span>{t("runs.tools", { count: a.toolCalls || 0 })}</span>
                                 {a.durationMs != null && <span>{formatMs(a.durationMs)}</span>}
                                 {ts?.loading && (
-                                  <span className="flex items-center gap-1 text-violet-400">
+                                  <span className="flex items-center gap-1 text-violet-700 dark:text-violet-400">
                                     <Loader2 className="w-3 h-3 animate-spin" />
                                     {t("runs.loadingFull")}
                                   </span>
diff --git a/client/src/components/workflows/WorkflowStats.tsx b/client/src/components/workflows/WorkflowStats.tsx
index e671d6c3..d10344c2 100644
--- a/client/src/components/workflows/WorkflowStats.tsx
+++ b/client/src/components/workflows/WorkflowStats.tsx
@@ -71,7 +71,7 @@ function formatDurationSec(sec: number): string {
 
 function successRateColor(rate: number): string {
   if (rate > 90) return "text-status-success";
-  if (rate > 70) return "text-yellow-400";
+  if (rate > 70) return "text-yellow-700 dark:text-yellow-400";
   return "text-status-danger";
 }
 
@@ -325,7 +325,7 @@ export function WorkflowStats({ stats }: WorkflowStatsProps) {
         label={t("stats.avgAgentDepth")}
         value={stats.avgDepth.toFixed(1)}
         icon={GitFork}
-        accentClass="text-indigo-400"
+        accentClass="text-indigo-700 dark:text-indigo-400"
         calculationKey="stats.tooltip.calc.depth"
         interp={interpAvgDepth(stats.avgDepth)}
         metricPhraseKey="stats.tooltip.phrase.depth"
@@ -352,7 +352,7 @@ export function WorkflowStats({ stats }: WorkflowStatsProps) {
         label={t("stats.mostCommonFlow")}
         value={topFlowLabel}
         icon={ArrowRightLeft}
-        accentClass="text-violet-400"
+        accentClass="text-violet-700 dark:text-violet-400"
         calculationKey="stats.tooltip.calc.topFlow"
         interp={interpTopFlow(topFlow?.source ?? null, topFlow?.target ?? null)}
         metricPhraseKey="stats.tooltip.phrase.topFlow"
@@ -361,7 +361,7 @@ export function WorkflowStats({ stats }: WorkflowStatsProps) {
         label={t("stats.avgCompactions")}
         value={stats.avgCompactions.toFixed(1)}
         icon={Layers}
-        accentClass="text-cyan-400"
+        accentClass="text-cyan-700 dark:text-cyan-400"
         calculationKey="stats.tooltip.calc.compactions"
         interp={interpAvgCompactions(stats.avgCompactions)}
         metricPhraseKey="stats.tooltip.phrase.compactions"
diff --git a/client/src/lib/__tests__/terminalTheme.test.ts b/client/src/lib/__tests__/terminalTheme.test.ts
new file mode 100644
index 00000000..c43a1184
--- /dev/null
+++ b/client/src/lib/__tests__/terminalTheme.test.ts
@@ -0,0 +1,71 @@
+/**
+ * @file terminalTheme.test.ts
+ * @description Tests for the xterm theme builder: CSS-variable RGB triplets
+ * become hex, status/accent map to the ANSI hues, bright twins are lighter,
+ * and the probe resolves a named dark theme's variables.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect } from "vitest";
+import { buildTerminalTheme, terminalThemeFor } from "../terminalTheme";
+
+const vars: Record<string, string> = {
+  "--surface-0": " 17 17 19",
+  "--surface-3": "39 42 45",
+  "--fg-primary": "237 238 240",
+  "--fg-secondary": "176 180 186",
+  "--fg-muted": "105 110 119",
+  "--border-light": "67 72 78",
+  "--accent": "0 144 255",
+  "--status-success": "61 214 140",
+  "--status-danger": "255 149 146",
+  "--status-warning": "255 202 22",
+};
+
+describe("buildTerminalTheme", () => {
+  it("maps theme tokens onto the xterm palette", () => {
+    const t = buildTerminalTheme((n) => vars[n] ?? "");
+    expect(t.background).toBe("#111113");
+    expect(t.foreground).toBe("#edeef0");
+    expect(t.cursor).toBe("#edeef0");
+    expect(t.selectionBackground).toBe("#43484e");
+    expect(t.red).toBe("#ff9592");
+    expect(t.green).toBe("#3dd68c");
+    expect(t.yellow).toBe("#ffca16");
+    expect(t.blue).toBe("#0090ff");
+    expect(t.black).toBe("#43484e");
+    expect(t.brightBlack).toBe("#696e77");
+    expect(t.brightWhite).toBe("#edeef0");
+  });
+
+  it("makes each bright twin lighter than its base colour", () => {
+    const t = buildTerminalTheme((n) => vars[n] ?? "");
+    const sum = (hex: string) =>
+      [1, 3, 5].reduce((a, i) => a + parseInt(hex.slice(i, i + 2), 16), 0);
+    for (const c of ["red", "green", "yellow", "blue", "magenta", "cyan"] as const) {
+      const base = t[c]!;
+      const bright = t[`bright${c[0]!.toUpperCase()}${c.slice(1)}` as keyof typeof t] as string;
+      expect(sum(bright)).toBeGreaterThan(sum(base));
+    }
+  });
+
+  it("leaves a colour unset when its variable is missing, so xterm keeps its default", () => {
+    const t = buildTerminalTheme(() => "");
+    expect(t.background).toBeUndefined();
+    expect(t.red).toBeUndefined();
+  });
+});
+
+describe("terminalThemeFor", () => {
+  it("resolves variables on a dark probe scoped to the theme id, then removes it", () => {
+    const style = document.createElement("style");
+    style.textContent = `.dark { --surface-0: 1 2 3; } .dark[data-theme="darcula"] { --surface-0: 30 31 32; }`;
+    document.head.appendChild(style);
+    try {
+      expect(terminalThemeFor("default").background).toBe("#010203");
+      expect(terminalThemeFor("darcula").background).toBe("#1e1f20");
+      expect(document.body.children).toHaveLength(0);
+    } finally {
+      style.remove();
+    }
+  });
+});
diff --git a/client/src/lib/terminalTheme.ts b/client/src/lib/terminalTheme.ts
new file mode 100644
index 00000000..e2b04ef0
--- /dev/null
+++ b/client/src/lib/terminalTheme.ts
@@ -0,0 +1,94 @@
+/**
+ * @file terminalTheme.ts
+ * @description The xterm colour theme for lane terminals. The terminal is
+ * ALWAYS dark — Claude Code's TUI picks its own colours for a dark background,
+ * so a light terminal would make its text unreadable — and is painted with the
+ * palette of the DARK theme the user picked (`themeFor.dark`). Colours are read
+ * from the CSS variables in `index.css` on a hidden probe carrying
+ * `class="dark" data-theme=<id>`, so no hex is duplicated here.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import type { ITheme } from "@xterm/xterm";
+
+/** Reads one CSS variable (an RGB triplet like `17 17 19`) by name. */
+export type VarReader = (name: string) => string;
+
+function toHex(triplet: string): string | undefined {
+  const parts = triplet
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  if (parts.length !== 3 || parts.some((n) => !Number.isFinite(n))) return undefined;
+  return "#" + parts.map((n) => Math.round(n).toString(16).padStart(2, "0")).join("");
+}
+
+/** Mix a hex colour toward white by `amount` (0..1) — the ANSI "bright" twin. */
+function lighten(hex: string | undefined, amount: number): string | undefined {
+  if (!hex) return undefined;
+  const rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return (
+    "#" +
+    rgb
+      .map((c) =>
+        Math.round(c + (255 - c) * amount)
+          .toString(16)
+          .padStart(2, "0")
+      )
+      .join("")
+  );
+}
+
+/**
+ * Build an xterm theme from a theme's CSS variables. red/green/yellow come from
+ * `--status-*`, blue from `--accent`, black/white from the surface/fg ramp.
+ * Magenta and cyan stay the classic ANSI hues: no token keeps that hue in every
+ * theme (darcula's keyword is orange), and a program printing "magenta" should
+ * get magenta.
+ */
+export function buildTerminalTheme(read: VarReader): ITheme {
+  const v = (name: string) => toHex(read(name));
+  const red = v("--status-danger");
+  const green = v("--status-success");
+  const yellow = v("--status-warning");
+  const blue = v("--accent");
+  const magenta = "#c678dd";
+  const cyan = "#56b6c2";
+  return {
+    background: v("--surface-0"),
+    foreground: v("--fg-primary"),
+    cursor: v("--fg-primary"),
+    cursorAccent: v("--surface-0"),
+    selectionBackground: v("--border-light"),
+    black: v("--border-light"),
+    red,
+    green,
+    yellow,
+    blue,
+    magenta,
+    cyan,
+    white: v("--fg-secondary"),
+    brightBlack: v("--fg-muted"),
+    brightRed: lighten(red, 0.25),
+    brightGreen: lighten(green, 0.25),
+    brightYellow: lighten(yellow, 0.25),
+    brightBlue: lighten(blue, 0.25),
+    brightMagenta: lighten(magenta, 0.25),
+    brightCyan: lighten(cyan, 0.25),
+    brightWhite: v("--fg-primary"),
+  };
+}
+
+/** Resolve the dark theme `id`'s variables on a hidden probe and build the theme. */
+export function terminalThemeFor(id: string): ITheme {
+  const probe = document.createElement("div");
+  probe.className = "dark";
+  if (id !== "default") probe.dataset.theme = id;
+  probe.style.display = "none";
+  document.body.appendChild(probe);
+  try {
+    const style = getComputedStyle(probe);
+    return buildTerminalTheme((name) => style.getPropertyValue(name));
+  } finally {
+    probe.remove();
+  }
+}
diff --git a/client/src/lib/types.ts b/client/src/lib/types.ts
index a6407e10..89060a27 100644
--- a/client/src/lib/types.ts
+++ b/client/src/lib/types.ts
@@ -2805,7 +2805,7 @@ export const STATUS_CONFIG: Record<
   // Green: the agent is actively running a tool / doing work.
   working: {
     labelKey: "common:status.working",
-    color: "text-emerald-400",
+    color: "text-emerald-700 dark:text-emerald-400",
     bg: "bg-emerald-500/10 border-emerald-500/20",
     dot: "bg-emerald-400",
   },
@@ -2813,21 +2813,21 @@ export const STATUS_CONFIG: Record<
   // on user input - attention may be required.
   waiting: {
     labelKey: "common:status.waiting",
-    color: "text-yellow-400",
+    color: "text-yellow-700 dark:text-yellow-400",
     bg: "bg-yellow-500/10 border-yellow-500/20",
     dot: "bg-yellow-400",
   },
   // Violet: the agent finished cleanly.
   completed: {
     labelKey: "common:status.completed",
-    color: "text-violet-400",
+    color: "text-violet-700 dark:text-violet-400",
     bg: "bg-violet-500/10 border-violet-500/20",
     dot: "bg-violet-400",
   },
   // Red: the agent ended in an error state.
   error: {
     labelKey: "common:status.error",
-    color: "text-red-400",
+    color: "text-red-700 dark:text-red-400",
     bg: "bg-red-500/10 border-red-500/20",
     dot: "bg-red-400",
   },
@@ -3013,28 +3013,28 @@ export const SESSION_STATUS_CONFIG: Record<
   // Green: the session is live and running.
   active: {
     labelKey: "common:status.active",
-    color: "text-emerald-400",
+    color: "text-emerald-700 dark:text-emerald-400",
     bg: "bg-emerald-500/10 border-emerald-500/20",
     dot: "bg-emerald-400",
   },
   // Yellow: blocked on user input via the AWAITING_STATUS overlay.
   waiting: {
     labelKey: "common:status.waiting",
-    color: "text-yellow-400",
+    color: "text-yellow-700 dark:text-yellow-400",
     bg: "bg-yellow-500/10 border-yellow-500/20",
     dot: "bg-yellow-400",
   },
   // Violet: the session ended cleanly (SessionEnd).
   completed: {
     labelKey: "common:status.completed",
-    color: "text-violet-400",
+    color: "text-violet-700 dark:text-violet-400",
     bg: "bg-violet-500/10 border-violet-500/20",
     dot: "bg-violet-400",
   },
   // Red: the session ended in an error state.
   error: {
     labelKey: "common:status.error",
-    color: "text-red-400",
+    color: "text-red-700 dark:text-red-400",
     bg: "bg-red-500/10 border-red-500/20",
     dot: "bg-red-400",
   },
@@ -3044,7 +3044,7 @@ export const SESSION_STATUS_CONFIG: Record<
     // Muted slate distinguishes "given up / faded out" from yellow Waiting
     // (attention required).
     labelKey: "common:status.abandoned",
-    color: "text-slate-400",
+    color: "text-slate-600 dark:text-slate-400",
     bg: "bg-slate-500/10 border-slate-500/20",
     dot: "bg-slate-400",
   },
diff --git a/client/src/pages/ActivityFeed.tsx b/client/src/pages/ActivityFeed.tsx
index ec0c5ab7..f304b0ce 100644
--- a/client/src/pages/ActivityFeed.tsx
+++ b/client/src/pages/ActivityFeed.tsx
@@ -341,7 +341,9 @@ export function ActivityFeed() {
             <p className="text-xs text-fg-muted">
               {t("subtitle")}
               {paused && (
-                <span className="ml-2 text-yellow-400">{t("paused", { count: bufferCount })}</span>
+                <span className="ml-2 text-yellow-700 dark:text-yellow-400">
+                  {t("paused", { count: bufferCount })}
+                </span>
               )}
             </p>
           </div>
diff --git a/client/src/pages/CcConfig.tsx b/client/src/pages/CcConfig.tsx
index 0a57d7de..51aa0af7 100644
--- a/client/src/pages/CcConfig.tsx
+++ b/client/src/pages/CcConfig.tsx
@@ -970,7 +970,7 @@ type Tone =
 const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring: string }> = {
   sky: {
     iconBg: "bg-sky-500/10",
-    iconText: "text-sky-300",
+    iconText: "text-sky-700 dark:text-sky-300",
     bar: "bg-sky-500/40",
     ring: "ring-sky-500/20",
   },
@@ -982,7 +982,7 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
   },
   violet: {
     iconBg: "bg-violet-500/10",
-    iconText: "text-violet-300",
+    iconText: "text-violet-700 dark:text-violet-300",
     bar: "bg-violet-500/40",
     ring: "ring-violet-500/20",
   },
@@ -994,37 +994,37 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
   },
   fuchsia: {
     iconBg: "bg-fuchsia-500/10",
-    iconText: "text-fuchsia-300",
+    iconText: "text-fuchsia-700 dark:text-fuchsia-300",
     bar: "bg-fuchsia-500/40",
     ring: "ring-fuchsia-500/20",
   },
   cyan: {
     iconBg: "bg-cyan-500/10",
-    iconText: "text-cyan-300",
+    iconText: "text-cyan-700 dark:text-cyan-300",
     bar: "bg-cyan-500/40",
     ring: "ring-cyan-500/20",
   },
   pink: {
     iconBg: "bg-pink-500/10",
-    iconText: "text-pink-300",
+    iconText: "text-pink-700 dark:text-pink-300",
     bar: "bg-pink-500/40",
     ring: "ring-pink-500/20",
   },
   indigo: {
     iconBg: "bg-indigo-500/10",
-    iconText: "text-indigo-300",
+    iconText: "text-indigo-700 dark:text-indigo-300",
     bar: "bg-indigo-500/40",
     ring: "ring-indigo-500/20",
   },
   orange: {
     iconBg: "bg-orange-500/10",
-    iconText: "text-orange-300",
+    iconText: "text-orange-700 dark:text-orange-300",
     bar: "bg-orange-500/40",
     ring: "ring-orange-500/20",
   },
   teal: {
     iconBg: "bg-teal-500/10",
-    iconText: "text-teal-300",
+    iconText: "text-teal-700 dark:text-teal-300",
     bar: "bg-teal-500/40",
     ring: "ring-teal-500/20",
   },
@@ -1036,7 +1036,7 @@ const TONES: Record<Tone, { iconBg: string; iconText: string; bar: string; ring:
   },
   rose: {
     iconBg: "bg-rose-500/10",
-    iconText: "text-rose-300",
+    iconText: "text-rose-700 dark:text-rose-300",
     bar: "bg-rose-500/40",
     ring: "ring-rose-500/20",
   },
@@ -2721,7 +2721,7 @@ function CurrentConfigPanel({ sources }: { sources: CcSettingsSource[] }) {
   return (
     <div className="rounded-lg border border-border bg-surface-2">
       <div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
-        <SettingsIcon className="w-3.5 h-3.5 text-violet-300/80" />
+        <SettingsIcon className="w-3.5 h-3.5 text-violet-700/80 dark:text-violet-300/80" />
         <span className="text-sm font-medium text-fg-primary">Current configuration</span>
         <span className="text-[11px] text-fg-muted ml-auto">
           {setCount} option{setCount !== 1 ? "s" : ""} set · the rest use defaults
@@ -3233,7 +3233,7 @@ function renderMemoryIndex(
           type="button"
           onClick={() => onJump(capturedTarget)}
           title={`${jumpTitle}: ${normalizeMemoryTarget(capturedTarget)}`}
-          className="text-teal-300 hover:text-teal-200 underline decoration-dotted underline-offset-2 hover:decoration-solid focus:outline-none focus:ring-1 focus:ring-teal-400/60 rounded-sm"
+          className="text-teal-700 dark:text-teal-300 hover:text-teal-800 dark:hover:text-teal-200 underline decoration-dotted underline-offset-2 hover:decoration-solid focus:outline-none focus:ring-1 focus:ring-teal-400/60 rounded-sm"
         >
           {label}
         </button>
@@ -3386,7 +3386,7 @@ function MemoryPanel({
       {totalAuto > 0 && (
         <section className="pt-1">
           <div className="flex items-center gap-2 mb-1">
-            <BookOpen className="w-3.5 h-3.5 text-teal-300" />
+            <BookOpen className="w-3.5 h-3.5 text-teal-700 dark:text-teal-300" />
             <h3 className="text-[11px] font-semibold uppercase tracking-wider text-fg-secondary">
               {t("memory.autoTitle")}
             </h3>
@@ -3499,7 +3499,7 @@ function MemoryProjectGroup({
               open ? "" : "-rotate-90"
             }`}
           />
-          <FolderTree className="w-3.5 h-3.5 text-teal-300 flex-shrink-0" />
+          <FolderTree className="w-3.5 h-3.5 text-teal-700 dark:text-teal-300 flex-shrink-0" />
           <span className="font-mono text-xs text-fg-secondary truncate flex-1 min-w-0">
             {project}
           </span>
@@ -3618,7 +3618,7 @@ function MemoryIndexCard({
   return (
     <div className="rounded-md border border-teal-500/20 bg-teal-500/5">
       <div className="flex items-center gap-2 px-3 py-1.5 border-b border-teal-500/15">
-        <BookOpen className="w-3 h-3 text-teal-300 flex-shrink-0" />
+        <BookOpen className="w-3 h-3 text-teal-700 dark:text-teal-300 flex-shrink-0" />
         <span className="font-mono text-[11px] text-fg-secondary truncate flex-1 min-w-0">
           {item.name}
         </span>
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index aed2016c..a310ce31 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -212,27 +212,16 @@ function useTooltip() {
   return { show, move, hide, node };
 }
 
-function cellColor(count: number, max: number) {
-  if (count === 0) return "#161625";
-  // Log scale + RGB interpolation across a wide color ramp for maximum perceptual range
+/** Heatmap cell fill: the page surface mixed toward the accent on a log
+ *  scale. Built from theme tokens so the ramp reads surface → accent in every
+ *  theme; the old fixed indigo ramp went near-black on light themes. Exported
+ *  for its test. */
+export function cellColor(count: number, max: number) {
+  if (count === 0) return "rgb(var(--surface-0))";
   const t = Math.log(count + 1) / Math.log(Math.max(max, 1) + 1);
-  // Ramp: near-black indigo → deep indigo → bright indigo → lavender
-  type RGB = [number, number, number];
-  const stops: RGB[] = [
-    [22, 20, 60], // near-black indigo
-    [55, 48, 163], // deep indigo
-    [99, 102, 241], // bright indigo
-    [199, 210, 254], // lavender
-  ];
-  const scaled = t * (stops.length - 1);
-  const lo = Math.min(Math.floor(scaled), stops.length - 2);
-  const frac = scaled - lo;
-  const [r1, g1, b1]: RGB = stops[lo] as RGB;
-  const [r2, g2, b2]: RGB = stops[lo + 1] as RGB;
-  const r = Math.round(r1 + (r2 - r1) * frac);
-  const g = Math.round(g1 + (g2 - g1) * frac);
-  const b = Math.round(b1 + (b2 - b1) * frac);
-  return `rgb(${r},${g},${b})`;
+  // Floor at 20% so a single event still reads as distinct from an empty day.
+  const pct = Math.round(20 + 80 * t);
+  return `color-mix(in srgb, rgb(var(--accent)) ${pct}%, rgb(var(--surface-0)))`;
 }
 
 function Heatmap({ weeks }: { weeks: Array<Array<{ date: string; count: number }>> }) {
@@ -352,7 +341,7 @@ function Heatmap({ weeks }: { weeks: Array<Array<{ date: string; count: number }
                   height: 13,
                   borderRadius: 2,
                   backgroundColor: cellColor(cell.count, maxCount),
-                  border: "1px solid rgba(255,255,255,0.04)",
+                  border: "1px solid rgb(var(--border) / 0.4)",
                   flexShrink: 0,
                   cursor: "default",
                 }}
@@ -374,7 +363,7 @@ function Heatmap({ weeks }: { weeks: Array<Array<{ date: string; count: number }
                 height: 13,
                 borderRadius: 2,
                 backgroundColor: cellColor(v, maxCount),
-                border: "1px solid rgba(255,255,255,0.06)",
+                border: "1px solid rgb(var(--border) / 0.5)",
               }}
             />
           );
@@ -593,7 +582,14 @@ function DonutChart({
     <div className="flex items-center justify-center gap-6 w-full">
       {node}
       <svg width={128} height={128} viewBox="0 0 128 128" className="flex-shrink-0">
-        <circle cx={cx} cy={cy} r={r} fill="none" stroke="#1e1e2e" strokeWidth={stroke} />
+        <circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          fill="none"
+          stroke="rgb(var(--border))"
+          strokeWidth={stroke}
+        />
         {segments.map(({ label, value, color }, i) => {
           const dash = (value / total) * circumference;
           const gap = circumference - dash;
@@ -1010,7 +1006,7 @@ function AnalyticsTab() {
           raw={data ? totalTokens.toLocaleString() : undefined}
           sub={data ? `${cacheHitPct}${t("cacheHitRate")}` : undefined}
           icon={Cpu}
-          color="text-violet-400"
+          color="text-violet-700 dark:text-violet-400"
           loading={!data}
         />
         <StatPill
@@ -1032,7 +1028,7 @@ function AnalyticsTab() {
           raw={data ? data.overview.total_events.toLocaleString() : undefined}
           sub={data ? `~${data.avg_events_per_session}${t("perSession")}` : undefined}
           icon={Zap}
-          color="text-yellow-400"
+          color="text-yellow-700 dark:text-yellow-400"
           loading={!data}
         />
       </div>
@@ -1155,7 +1151,9 @@ function AnalyticsTab() {
                     </div>
                     <div className="flex justify-between text-xs text-fg-muted">
                       <span>{t("cacheEfficiency")}</span>
-                      <span className="text-violet-400 font-mono">{cacheHitPct}%</span>
+                      <span className="text-violet-700 dark:text-violet-400 font-mono">
+                        {cacheHitPct}%
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -1180,12 +1178,12 @@ function AnalyticsTab() {
                       {
                         label: t("common:token.cacheRead"),
                         value: data?.tokens.total_cache_read ?? 0,
-                        color: "text-violet-400",
+                        color: "text-violet-700 dark:text-violet-400",
                       },
                       {
                         label: t("common:token.cacheWrite"),
                         value: data?.tokens.total_cache_write ?? 0,
-                        color: "text-yellow-400",
+                        color: "text-yellow-700 dark:text-yellow-400",
                       },
                       { label: t("common:total"), value: totalTokens, color: "text-fg-primary" },
                     ].map(({ label, value, color }) => (
@@ -1331,7 +1329,7 @@ function AnalyticsTab() {
                       </div>
                       <div className="mt-4 pt-4 border-t border-border text-xs flex justify-between">
                         <span className="text-fg-muted">{t("common:total")}</span>
-                        <span className="text-cyan-400 font-mono">
+                        <span className="text-cyan-700 dark:text-cyan-400 font-mono">
                           <Tip raw={fmtCostFull(totalCost30d)}>{fmtCost(totalCost30d)}</Tip>
                         </span>
                       </div>
@@ -1761,7 +1759,14 @@ function SystemHealthTab() {
                 viewBox="0 0 96 96"
                 className="flex-shrink-0 cursor-default"
               >
-                <circle cx="48" cy="48" r="38" fill="none" stroke="#1e1e2e" strokeWidth="14" />
+                <circle
+                  cx="48"
+                  cy="48"
+                  r="38"
+                  fill="none"
+                  stroke="rgb(var(--border))"
+                  strokeWidth="14"
+                />
                 {(() => {
                   const r = 38,
                     cx = 48,
@@ -1882,7 +1887,14 @@ function SystemHealthTab() {
               raw={`Score: ${healthScore.toFixed(1)} / 100\n\n• Success Rate (40%): ${successRate.toFixed(1)}%\n• Cache Hit (25%): ${cacheHitRate.toFixed(1)}%\n• Error Avoidance (25%): ${(100 - errorRate).toFixed(1)}%\n• Memory Health (10%): ${(100 - heapUsedPct).toFixed(1)}%`}
             >
               <svg width="120" height="120" viewBox="0 0 120 120" className="cursor-default">
-                <circle cx="60" cy="60" r="48" fill="none" stroke="#1e1e2e" strokeWidth="10" />
+                <circle
+                  cx="60"
+                  cy="60"
+                  r="48"
+                  fill="none"
+                  stroke="rgb(var(--border))"
+                  strokeWidth="10"
+                />
                 <circle
                   cx="60"
                   cy="60"
@@ -1954,7 +1966,7 @@ function SystemHealthTab() {
             >
               <div className="text-center cursor-default">
                 <p className="text-[9px] text-fg-muted uppercase">Compact</p>
-                <p className="text-xs font-mono font-bold text-violet-400">
+                <p className="text-xs font-mono font-bold text-violet-700 dark:text-violet-400">
                   {workflow.compaction?.totalCompactions ?? 0}
                 </p>
               </div>
@@ -2036,7 +2048,7 @@ function SystemHealthTab() {
         <div className="card p-5 flex flex-col gap-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <BarChart3 className="w-4 h-4 text-violet-400" />
+              <BarChart3 className="w-4 h-4 text-violet-700 dark:text-violet-400" />
               <span className="text-xs text-fg-muted uppercase tracking-wider">Concurrency</span>
             </div>
             <span className="text-[10px] font-mono text-fg-muted">{lanes.length} intervals</span>
@@ -2058,7 +2070,7 @@ function SystemHealthTab() {
                       ? "#fbbf24"
                       : lane.count > 0
                         ? "#34d399"
-                        : "#1e1e2e";
+                        : "rgb(var(--border))";
                 return (
                   <div
                     key={i}
@@ -2172,7 +2184,7 @@ function SystemHealthTab() {
         <div className="card p-5 flex flex-col gap-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <GitBranch className="w-4 h-4 text-violet-400" />
+              <GitBranch className="w-4 h-4 text-violet-700 dark:text-violet-400" />
               <span className="text-xs text-fg-muted uppercase tracking-wider">
                 Subagent Effectiveness
               </span>
@@ -2282,7 +2294,7 @@ function SystemHealthTab() {
         <div className="card p-5 flex flex-col gap-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <Cpu className="w-4 h-4 text-cyan-400" />
+              <Cpu className="w-4 h-4 text-cyan-700 dark:text-cyan-400" />
               <span className="text-xs text-fg-muted uppercase tracking-wider">Platform</span>
             </div>
             <span className="text-[10px] font-mono text-fg-muted">{info.server.node_version}</span>
@@ -2620,7 +2632,7 @@ export function Dashboard() {
               label={t("activeSubagents")}
               value={stats ? allSubagents.filter((a) => a.status === "working").length : ""}
               icon={GitBranch}
-              accentColor="text-violet-400"
+              accentColor="text-violet-700 dark:text-violet-400"
               trend={stats ? `${allSubagents.length}${t("totalTrend")}` : undefined}
               loading={!stats}
             />
@@ -2629,7 +2641,7 @@ export function Dashboard() {
               value={stats ? fmt(stats.events_today) : ""}
               raw={stats ? stats.events_today.toLocaleString() : undefined}
               icon={Zap}
-              accentColor="text-yellow-400"
+              accentColor="text-yellow-700 dark:text-yellow-400"
               loading={!stats}
             />
             <StatCard
@@ -2637,7 +2649,7 @@ export function Dashboard() {
               value={stats ? fmt(stats.total_events) : ""}
               raw={stats ? stats.total_events.toLocaleString() : undefined}
               icon={Activity}
-              accentColor="text-violet-400"
+              accentColor="text-violet-700 dark:text-violet-400"
               loading={!stats}
             />
             <StatCard
@@ -2721,7 +2733,7 @@ export function Dashboard() {
                                 empty rather than as a misalignment. */}
                             {!hasChildren && !isSubagent && (
                               <span
-                                className="w-6 h-6 flex-shrink-0 flex items-center justify-center text-violet-400/70"
+                                className="w-6 h-6 flex-shrink-0 flex items-center justify-center text-violet-700/70 dark:text-violet-400/70"
                                 aria-hidden="true"
                                 title={t("common:noSubagents", "No subagents")}
                               >
@@ -2729,7 +2741,7 @@ export function Dashboard() {
                               </span>
                             )}
                             {isSubagent && (
-                              <GitBranch className="w-3 h-3 text-violet-400 flex-shrink-0" />
+                              <GitBranch className="w-3 h-3 text-violet-700 dark:text-violet-400 flex-shrink-0" />
                             )}
                             <div className="flex-1 min-w-0">
                               <AgentCard
@@ -2758,7 +2770,7 @@ export function Dashboard() {
                               onClick={() =>
                                 setExpandedAgents((prev) => new Set([...prev, agent.id]))
                               }
-                              className="ml-7 mt-1 text-[11px] text-violet-400 hover:text-violet-300 transition-colors"
+                              className="ml-7 mt-1 text-[11px] text-violet-700 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 transition-colors"
                             >
                               {t("common:subagent_label", { count: totalDesc })}
                               {activeDesc > 0 && (
diff --git a/client/src/pages/SessionDetail.tsx b/client/src/pages/SessionDetail.tsx
index 740bb149..a03cf6b6 100644
--- a/client/src/pages/SessionDetail.tsx
+++ b/client/src/pages/SessionDetail.tsx
@@ -664,23 +664,29 @@ export function SessionDetail() {
                 }`}
               >
                 <ReasonIcon
-                  className={`w-3.5 h-3.5 ${urgent ? "text-status-warning" : "text-yellow-300"}`}
+                  className={`w-3.5 h-3.5 ${urgent ? "text-status-warning" : "text-yellow-700 dark:text-yellow-300"}`}
                 />
               </span>
               <div className="flex-1 min-w-0">
                 <div
-                  className={`text-sm font-medium ${urgent ? "text-status-warning" : "text-yellow-200"}`}
+                  className={`text-sm font-medium ${urgent ? "text-status-warning" : "text-yellow-800 dark:text-yellow-200"}`}
                 >
                   {t("detail.waitingBanner.title")}
                   {cfg && (
-                    <span className={urgent ? "text-status-warning/90" : "text-yellow-300/80"}>
+                    <span
+                      className={
+                        urgent
+                          ? "text-status-warning/90"
+                          : "text-yellow-700/80 dark:text-yellow-300/80"
+                      }
+                    >
                       {" · "}
                       {t(cfg.labelKey)}
                     </span>
                   )}
                 </div>
                 <div
-                  className={`text-[11px] ${urgent ? "text-status-warning/70" : "text-yellow-400/60"}`}
+                  className={`text-[11px] ${urgent ? "text-status-warning/70" : "text-yellow-700/60 dark:text-yellow-400/60"}`}
                 >
                   {cfg ? t(cfg.descKey) : t("detail.waitingBanner.generic")}
                 </div>
@@ -688,7 +694,7 @@ export function SessionDetail() {
               {session.awaiting_input_since && (
                 <span
                   className={`text-[11px] flex-shrink-0 flex items-center gap-1.5 ${
-                    urgent ? "text-status-warning/80" : "text-yellow-400/70"
+                    urgent ? "text-status-warning/80" : "text-yellow-700/70 dark:text-yellow-400/70"
                   }`}
                 >
                   <span
@@ -736,7 +742,7 @@ export function SessionDetail() {
           }}
           className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
             activeTab === "agents"
-              ? "border-violet-500 text-violet-400"
+              ? "border-violet-500 text-violet-700 dark:text-violet-400"
               : "border-transparent text-fg-muted hover:text-fg-secondary"
           }`}
         >
@@ -750,7 +756,7 @@ export function SessionDetail() {
           }}
           className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
             activeTab === "conversation"
-              ? "border-violet-500 text-violet-400"
+              ? "border-violet-500 text-violet-700 dark:text-violet-400"
               : "border-transparent text-fg-muted hover:text-fg-secondary"
           }`}
         >
@@ -764,7 +770,7 @@ export function SessionDetail() {
           }}
           className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
             activeTab === "timeline"
-              ? "border-violet-500 text-violet-400"
+              ? "border-violet-500 text-violet-700 dark:text-violet-400"
               : "border-transparent text-fg-muted hover:text-fg-secondary"
           }`}
         >
@@ -794,7 +800,7 @@ export function SessionDetail() {
           {workflows.length > 0 && (
             <div className="mb-4">
               <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5">
-                <Workflow className="w-3.5 h-3.5 text-violet-400" />
+                <Workflow className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
                 {wfT("runs.sessionTitle")}
                 <span className="text-fg-muted font-mono">· {workflows.length}</span>
               </h3>
@@ -807,7 +813,7 @@ export function SessionDetail() {
           ) : (
             <>
               <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-3 flex items-center gap-1.5">
-                <Bot className="w-3.5 h-3.5 text-violet-400" />
+                <Bot className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
                 {t("detail.agents")}
                 <span className="text-fg-muted font-mono">· {agents.length}</span>
               </h3>
@@ -885,7 +891,7 @@ export function SessionDetail() {
                           )}
                           {isSubagent && !hasChildren && <span className="w-6 flex-shrink-0" />}
                           {isSubagent && (
-                            <GitBranch className="w-3 h-3 text-violet-400 flex-shrink-0" />
+                            <GitBranch className="w-3 h-3 text-violet-700 dark:text-violet-400 flex-shrink-0" />
                           )}
                           <div className="flex-1 min-w-0">
                             <AgentCard
@@ -928,7 +934,7 @@ export function SessionDetail() {
                             onClick={() =>
                               setExpandedAgents((prev) => new Set([...prev, agent.id]))
                             }
-                            className="ml-7 mt-1 text-[11px] text-violet-400 hover:text-violet-300 transition-colors"
+                            className="ml-7 mt-1 text-[11px] text-violet-700 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 transition-colors"
                           >
                             {t("common:subagent_label", { count: totalDesc })}
                           </button>
diff --git a/client/src/pages/Sessions.tsx b/client/src/pages/Sessions.tsx
index e78e6eea..efef4f13 100644
--- a/client/src/pages/Sessions.tsx
+++ b/client/src/pages/Sessions.tsx
@@ -436,7 +436,7 @@ export function Sessions() {
                           </p>
                           {session.source && session.source !== "local" && (
                             <span
-                              className="inline-flex items-center gap-1 text-[10px] font-semibold text-sky-300 bg-sky-500/10 border border-sky-500/25 px-1.5 py-0.5 rounded-full"
+                              className="inline-flex items-center gap-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300 bg-sky-500/10 border border-sky-500/25 px-1.5 py-0.5 rounded-full"
                               title={t("remoteSourceBadgeTitle", "Collected from a remote machine")}
                             >
                               <Server className="w-2.5 h-2.5" />
diff --git a/client/src/pages/Settings.tsx b/client/src/pages/Settings.tsx
index 149b023d..1623f429 100644
--- a/client/src/pages/Settings.tsx
+++ b/client/src/pages/Settings.tsx
@@ -880,7 +880,9 @@ export function Settings() {
   // just Sonnet 5), so a future model with a launch promo needs no code change.
   const introField = (key: keyof EditRow, labelKey: string, opts: { date?: boolean } = {}) => (
     <label className="flex flex-col gap-1">
-      <span className="text-[10px] uppercase tracking-wider text-violet-300/70">{t(labelKey)}</span>
+      <span className="text-[10px] uppercase tracking-wider text-violet-700/70 dark:text-violet-300/70">
+        {t(labelKey)}
+      </span>
       <input
         type={opts.date ? "text" : "number"}
         {...(opts.date ? { placeholder: "YYYY-MM-DD" } : { step: "0.01", min: "0" })}
@@ -896,7 +898,7 @@ export function Settings() {
       <td colSpan={10} className="px-4 pb-3 pt-2">
         <div className="mt-2 rounded-md border border-violet-500/20 bg-violet-500/[0.04] px-3 py-2.5">
           <div className="flex items-center gap-1.5 mb-2">
-            <span className="text-[11px] font-semibold text-violet-300 uppercase tracking-wider">
+            <span className="text-[11px] font-semibold text-violet-700 dark:text-violet-300 uppercase tracking-wider">
               {t("pricing.introRatesTitle")}
             </span>
             <span className="text-[11px] text-fg-muted">{t("pricing.introRatesHint")}</span>
@@ -1187,7 +1189,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary">
                       {rule.display_name}
                       {rule.intro_until && (
-                        <div className="text-[11px] font-normal text-violet-400/80 mt-0.5">
+                        <div className="text-[11px] font-normal text-violet-700/80 dark:text-violet-400/80 mt-0.5">
                           {t("pricing.introNote", {
                             input: rule.intro_input_per_mtok,
                             output: rule.intro_output_per_mtok,
@@ -1199,7 +1201,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary text-right font-mono">
                       ${rule.input_per_mtok}
                       {rule.intro_until && (
-                        <span className="block text-[11px] text-violet-400/80">
+                        <span className="block text-[11px] text-violet-700/80 dark:text-violet-400/80">
                           ${rule.intro_input_per_mtok}
                         </span>
                       )}
@@ -1207,7 +1209,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary text-right font-mono">
                       ${rule.output_per_mtok}
                       {rule.intro_until && (
-                        <span className="block text-[11px] text-violet-400/80">
+                        <span className="block text-[11px] text-violet-700/80 dark:text-violet-400/80">
                           ${rule.intro_output_per_mtok}
                         </span>
                       )}
@@ -1215,7 +1217,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary text-right font-mono">
                       ${rule.cache_read_per_mtok}
                       {rule.intro_until && (
-                        <span className="block text-[11px] text-violet-400/80">
+                        <span className="block text-[11px] text-violet-700/80 dark:text-violet-400/80">
                           ${rule.intro_cache_read_per_mtok}
                         </span>
                       )}
@@ -1223,7 +1225,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary text-right font-mono">
                       ${rule.cache_write_per_mtok}
                       {rule.intro_until && (
-                        <span className="block text-[11px] text-violet-400/80">
+                        <span className="block text-[11px] text-violet-700/80 dark:text-violet-400/80">
                           ${rule.intro_cache_write_per_mtok}
                         </span>
                       )}
@@ -1231,7 +1233,7 @@ export function Settings() {
                     <td className="px-4 py-3 text-sm text-fg-secondary text-right font-mono">
                       ${rule.cache_write_1h_per_mtok}
                       {rule.intro_until && (
-                        <span className="block text-[11px] text-violet-400/80">
+                        <span className="block text-[11px] text-violet-700/80 dark:text-violet-400/80">
                           ${rule.intro_cache_write_1h_per_mtok}
                         </span>
                       )}
@@ -1580,7 +1582,7 @@ export function Settings() {
                   />
                 </div>
                 <div className="flex items-center gap-3 bg-surface-2 rounded-lg px-3.5 py-3">
-                  <CheckCircle className="w-4 h-4 text-violet-400 flex-shrink-0" />
+                  <CheckCircle className="w-4 h-4 text-violet-700 dark:text-violet-400 flex-shrink-0" />
                   <Toggle
                     checked={notifPrefs.onSessionComplete}
                     onChange={(v) => updateNotifPrefs({ onSessionComplete: v })}
@@ -1688,9 +1690,11 @@ export function Settings() {
                   const tableIcons: Record<string, React.ReactNode> = {
                     sessions: <Layers className="w-4 h-4 text-blue-500" />,
                     agents: <Users className="w-4 h-4 text-status-success" />,
-                    events: <Activity className="w-4 h-4 text-violet-400" />,
+                    events: <Activity className="w-4 h-4 text-violet-700 dark:text-violet-400" />,
                     token_usage: <Coins className="w-4 h-4 text-status-warning" />,
-                    model_pricing: <BarChart3 className="w-4 h-4 text-cyan-400" />,
+                    model_pricing: (
+                      <BarChart3 className="w-4 h-4 text-cyan-700 dark:text-cyan-400" />
+                    ),
                   };
                   const tableLabels: Record<string, string> = {
                     sessions: t("tables.sessions"),
@@ -1725,7 +1729,7 @@ export function Settings() {
                 })()}
                 <div className="bg-surface-2 rounded-lg px-3 py-3 border-l-2 border-indigo-500/20">
                   <div className="flex items-center gap-2 mb-1.5">
-                    <HardDrive className="w-4 h-4 text-indigo-400" />
+                    <HardDrive className="w-4 h-4 text-indigo-700 dark:text-indigo-400" />
                     <p className="text-[11px] text-fg-muted uppercase tracking-wider">
                       {t("data.dbSize")}
                     </p>
@@ -1870,7 +1874,7 @@ export function Settings() {
             <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
               <div className="bg-surface-2 rounded-lg px-4 py-3">
                 <div className="flex items-center gap-2 mb-1.5">
-                  <Server className="w-4 h-4 text-indigo-400" />
+                  <Server className="w-4 h-4 text-indigo-700 dark:text-indigo-400" />
                   <p className="text-[11px] text-fg-muted uppercase tracking-wider">
                     {t("about.release")}
                   </p>
@@ -1908,7 +1912,7 @@ export function Settings() {
               </div>
               <div className="bg-surface-2 rounded-lg px-4 py-3">
                 <div className="flex items-center gap-2 mb-1.5">
-                  <Globe className="w-4 h-4 text-violet-400" />
+                  <Globe className="w-4 h-4 text-violet-700 dark:text-violet-400" />
                   <p className="text-[11px] text-fg-muted uppercase tracking-wider">
                     {t("about.platform")}
                   </p>
diff --git a/client/src/pages/Workflows.tsx b/client/src/pages/Workflows.tsx
index d94cb170..a3e6be78 100644
--- a/client/src/pages/Workflows.tsx
+++ b/client/src/pages/Workflows.tsx
@@ -224,7 +224,7 @@ export function Workflows() {
       <div className="card p-4 space-y-3">
         <div>
           <h2 className="text-sm font-semibold text-fg-secondary flex items-center gap-2">
-            <Workflow className="w-4 h-4 text-violet-400" />
+            <Workflow className="w-4 h-4 text-violet-700 dark:text-violet-400" />
             {t("runs.title")}
           </h2>
           <p className="text-xs text-fg-muted mt-0.5">{t("runs.subtitle")}</p>
diff --git a/client/src/pages/__tests__/Dashboard.heatmap.test.ts b/client/src/pages/__tests__/Dashboard.heatmap.test.ts
new file mode 100644
index 00000000..90e36387
--- /dev/null
+++ b/client/src/pages/__tests__/Dashboard.heatmap.test.ts
@@ -0,0 +1,30 @@
+/**
+ * @file Dashboard.heatmap.test.ts
+ * @description Pins the activity heatmap's colour ramp to the theme tokens: it
+ * runs from the page surface to the accent in every theme, instead of a fixed
+ * near-black indigo that vanished into dark and blotted out light themes.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect } from "vitest";
+import { cellColor } from "../Dashboard";
+
+describe("heatmap cellColor", () => {
+  it("paints an empty day as the bare surface", () => {
+    expect(cellColor(0, 10)).toBe("rgb(var(--surface-0))");
+  });
+
+  it("mixes the accent into the surface, more for busier days, and never a fixed rgb", () => {
+    const low = cellColor(1, 100);
+    const high = cellColor(100, 100);
+    for (const c of [low, high]) {
+      expect(c).toMatch(
+        /^color-mix\(in srgb, rgb\(var\(--accent\)\) \d+%, rgb\(var\(--surface-0\)\)\)$/
+      );
+    }
+    const pct = (c: string) => Number(/(\d+)%/.exec(c)?.[1]);
+    expect(pct(high)).toBe(100);
+    expect(pct(low)).toBeGreaterThan(0);
+    expect(pct(low)).toBeLessThan(pct(high));
+  });
+});
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index 6855b895..412c1adc 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -202,7 +202,7 @@ exports[`screen snapshots > Activity feed 1`] = `
               >
                 <dt>
                   <span
-                    class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
+                    class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400"
                   >
                     <span
                       class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse-dot"
@@ -217,7 +217,7 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-yellow-500/10 border-yellow-500/20 text-yellow-400"
+                    class="badge bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-400"
                   >
                     <span
                       class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse-dot"
@@ -232,7 +232,7 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-violet-500/10 border-violet-500/20 text-violet-400"
+                    class="badge bg-violet-500/10 border-violet-500/20 text-violet-700 dark:text-violet-400"
                   >
                     <span
                       class="w-1.5 h-1.5 rounded-full bg-violet-400 "
@@ -247,7 +247,7 @@ exports[`screen snapshots > Activity feed 1`] = `
                 </dd>
                 <dt>
                   <span
-                    class="badge bg-red-500/10 border-red-500/20 text-red-400"
+                    class="badge bg-red-500/10 border-red-500/20 text-red-700 dark:text-red-400"
                   >
                     <span
                       class="w-1.5 h-1.5 rounded-full bg-red-400 "
@@ -1508,7 +1508,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                   class="w-7 h-7 rounded-md bg-sky-500/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                 >
                   <svg
-                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-sky-300"
+                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-sky-700 dark:text-sky-300"
                     fill="none"
                     height="24"
                     stroke="currentColor"
@@ -1668,7 +1668,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                   class="w-7 h-7 rounded-md bg-violet-500/10 flex items-center justify-center flex-shrink-0 ml-1.5"
                 >
                   <svg
-                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-violet-300"
+                    class="lucide lucide-folder-tree w-3.5 h-3.5 text-violet-700 dark:text-violet-300"
                     fill="none"
                     height="24"
                     stroke="currentColor"
@@ -1848,7 +1848,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-fuchsia-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-sparkles w-3.5 h-3.5 text-fuchsia-300"
+                        class="lucide lucide-sparkles w-3.5 h-3.5 text-fuchsia-700 dark:text-fuchsia-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -1921,7 +1921,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-sky-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-user-round w-3.5 h-3.5 text-sky-300"
+                        class="lucide lucide-user-round w-3.5 h-3.5 text-sky-700 dark:text-sky-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -1987,7 +1987,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-cyan-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-slash w-3.5 h-3.5 text-cyan-300"
+                        class="lucide lucide-slash w-3.5 h-3.5 text-cyan-700 dark:text-cyan-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -2048,7 +2048,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-pink-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-palette w-3.5 h-3.5 text-pink-300"
+                        class="lucide lucide-palette w-3.5 h-3.5 text-pink-700 dark:text-pink-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -2133,7 +2133,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-indigo-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-server w-3.5 h-3.5 text-indigo-300"
+                        class="lucide lucide-server w-3.5 h-3.5 text-indigo-700 dark:text-indigo-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -2343,7 +2343,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-orange-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-webhook w-3.5 h-3.5 text-orange-300"
+                        class="lucide lucide-webhook w-3.5 h-3.5 text-orange-700 dark:text-orange-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -2399,7 +2399,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-rose-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-keyboard w-3.5 h-3.5 text-rose-300"
+                        class="lucide lucide-keyboard w-3.5 h-3.5 text-rose-700 dark:text-rose-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -2532,7 +2532,7 @@ exports[`screen snapshots > Claude Config 1`] = `
                       class="w-6 h-6 rounded-md bg-teal-500/10 flex items-center justify-center flex-shrink-0"
                     >
                       <svg
-                        class="lucide lucide-book-open w-3.5 h-3.5 text-teal-300"
+                        class="lucide lucide-book-open w-3.5 h-3.5 text-teal-700 dark:text-teal-300"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -3012,7 +3012,7 @@ exports[`screen snapshots > Dashboard 1`] = `
               Total Tokens
             </span>
             <svg
-              class="lucide lucide-cpu w-4 h-4 text-violet-400"
+              class="lucide lucide-cpu w-4 h-4 text-violet-700 dark:text-violet-400"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3064,7 +3064,7 @@ exports[`screen snapshots > Dashboard 1`] = `
             </svg>
           </div>
           <p
-            class="text-2xl font-bold text-violet-400"
+            class="text-2xl font-bold text-violet-700 dark:text-violet-400"
           >
             <span
               class="relative inline-block cursor-default"
@@ -3139,7 +3139,7 @@ exports[`screen snapshots > Dashboard 1`] = `
               Total Events
             </span>
             <svg
-              class="lucide lucide-zap w-4 h-4 text-yellow-400"
+              class="lucide lucide-zap w-4 h-4 text-yellow-700 dark:text-yellow-400"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -3156,7 +3156,7 @@ exports[`screen snapshots > Dashboard 1`] = `
             </svg>
           </div>
           <p
-            class="text-2xl font-bold text-yellow-400"
+            class="text-2xl font-bold text-yellow-700 dark:text-yellow-400"
           >
             <span
               class="relative inline-block cursor-default"
@@ -3321,25 +3321,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3347,25 +3347,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3373,25 +3373,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3399,25 +3399,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3425,25 +3425,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3451,25 +3451,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3477,25 +3477,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3503,25 +3503,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3529,25 +3529,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3555,25 +3555,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3581,25 +3581,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3607,25 +3607,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3633,25 +3633,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3659,25 +3659,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3685,25 +3685,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3711,25 +3711,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3737,25 +3737,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3763,25 +3763,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3789,25 +3789,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3815,25 +3815,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3841,25 +3841,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3867,25 +3867,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3893,25 +3893,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3919,25 +3919,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3945,25 +3945,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3971,25 +3971,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -3997,25 +3997,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4023,25 +4023,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4049,25 +4049,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4075,25 +4075,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4101,25 +4101,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4127,25 +4127,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4153,25 +4153,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4179,25 +4179,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4205,25 +4205,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4231,25 +4231,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4257,25 +4257,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4283,25 +4283,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4309,25 +4309,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4335,25 +4335,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4361,25 +4361,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4387,25 +4387,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4413,25 +4413,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4439,25 +4439,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4465,25 +4465,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4491,25 +4491,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4517,25 +4517,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4543,25 +4543,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4569,25 +4569,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4595,25 +4595,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4621,25 +4621,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4647,25 +4647,25 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                   <div
@@ -4673,16 +4673,16 @@ exports[`screen snapshots > Dashboard 1`] = `
                     style="gap: 3px;"
                   >
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                     <div
-                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.04); flex-shrink: 0; cursor: default;"
+                      style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.4); flex-shrink: 0; cursor: default;"
                     />
                   </div>
                 </div>
@@ -4693,19 +4693,19 @@ exports[`screen snapshots > Dashboard 1`] = `
                     Less
                   </span>
                   <div
-                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.06);"
+                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.5);"
                   />
                   <div
-                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(22, 22, 37); border: 1px solid rgba(255, 255, 255, 0.06);"
+                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(var(--surface-0)); border: 1px solid rgb(var(--border) / 0.5);"
                   />
                   <div
-                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
+                    style="width: 13px; height: 13px; border-radius: 2px; background-color: color-mix(in srgb, rgb(var(--accent)) 100%, rgb(var(--surface-0))); border: 1px solid rgb(var(--border) / 0.5);"
                   />
                   <div
-                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
+                    style="width: 13px; height: 13px; border-radius: 2px; background-color: color-mix(in srgb, rgb(var(--accent)) 100%, rgb(var(--surface-0))); border: 1px solid rgb(var(--border) / 0.5);"
                   />
                   <div
-                    style="width: 13px; height: 13px; border-radius: 2px; background-color: rgb(199, 210, 254); border: 1px solid rgba(255, 255, 255, 0.06);"
+                    style="width: 13px; height: 13px; border-radius: 2px; background-color: color-mix(in srgb, rgb(var(--accent)) 100%, rgb(var(--surface-0))); border: 1px solid rgb(var(--border) / 0.5);"
                   />
                   <span>
                     More
@@ -5664,7 +5664,7 @@ exports[`screen snapshots > Session detail 1`] = `
             Test Session
           </h2>
           <span
-            class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
+            class="badge bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400"
           >
             Active
           </span>
@@ -5887,7 +5887,7 @@ exports[`screen snapshots > Session detail 1`] = `
       class="flex items-center gap-1 border-b border-border"
     >
       <button
-        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-violet-500 text-violet-400"
+        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-violet-500 text-violet-700 dark:text-violet-400"
       >
         <svg
           class="lucide lucide-bot w-4 h-4"
@@ -6029,13 +6029,13 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-violet-500/20 bg-violet-500/5 text-violet-200"
+            class="rounded-lg border px-3 py-2.5 border-violet-500/20 bg-violet-500/5 text-violet-800 dark:text-violet-200"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
             >
               <span
-                class="text-violet-400"
+                class="text-violet-700 dark:text-violet-400"
               >
                 <svg
                   class="lucide lucide-wrench w-3 h-3"
@@ -6063,13 +6063,13 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-cyan-500/20 bg-cyan-500/5 text-cyan-200"
+            class="rounded-lg border px-3 py-2.5 border-cyan-500/20 bg-cyan-500/5 text-cyan-800 dark:text-cyan-200"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
             >
               <span
-                class="text-cyan-400"
+                class="text-cyan-700 dark:text-cyan-400"
               >
                 <svg
                   class="lucide lucide-git-branch w-3 h-3"
@@ -6113,7 +6113,7 @@ exports[`screen snapshots > Session detail 1`] = `
             </div>
           </div>
           <div
-            class="rounded-lg border px-3 py-2.5 border-blue-600/20 bg-blue-600/5 text-blue-300"
+            class="rounded-lg border px-3 py-2.5 border-blue-600/20 bg-blue-600/5 text-blue-700 dark:text-blue-300"
           >
             <div
               class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
@@ -6250,7 +6250,7 @@ exports[`screen snapshots > Session detail 1`] = `
                 class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
               >
                 <svg
-                  class="lucide lucide-wrench w-3.5 h-3.5 text-violet-400"
+                  class="lucide lucide-wrench w-3.5 h-3.5 text-violet-700 dark:text-violet-400"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -6290,7 +6290,7 @@ exports[`screen snapshots > Session detail 1`] = `
                 class="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5"
               >
                 <svg
-                  class="lucide lucide-git-branch w-3.5 h-3.5 text-cyan-400"
+                  class="lucide lucide-git-branch w-3.5 h-3.5 text-cyan-700 dark:text-cyan-400"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -6345,7 +6345,7 @@ exports[`screen snapshots > Session detail 1`] = `
           class="text-xs font-semibold text-fg-secondary uppercase tracking-wider mb-2 flex items-center gap-1.5"
         >
           <svg
-            class="lucide lucide-workflow w-3.5 h-3.5 text-violet-400"
+            class="lucide lucide-workflow w-3.5 h-3.5 text-violet-700 dark:text-violet-400"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -6409,7 +6409,7 @@ exports[`screen snapshots > Session detail 1`] = `
                 />
               </svg>
               <svg
-                class="lucide lucide-workflow w-4 h-4 text-violet-400 flex-shrink-0"
+                class="lucide lucide-workflow w-4 h-4 text-violet-700 dark:text-violet-400 flex-shrink-0"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -8907,7 +8907,7 @@ exports[`screen snapshots > Settings 1`] = `
               class="text-left p-3 rounded-lg border transition-colors border-blue-600/40 bg-blue-600/10"
             >
               <div
-                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-blue-400"
+                class="flex items-center gap-1.5 text-xs font-medium mb-1 text-blue-700 dark:text-blue-400"
               >
                 <svg
                   class="lucide lucide-refresh-cw w-3.5 h-3.5"
@@ -9990,7 +9990,7 @@ exports[`screen snapshots > Settings 1`] = `
                 class="flex items-center gap-2 mb-1.5"
               >
                 <svg
-                  class="lucide lucide-hard-drive w-4 h-4 text-indigo-400"
+                  class="lucide lucide-hard-drive w-4 h-4 text-indigo-700 dark:text-indigo-400"
                   fill="none"
                   height="24"
                   stroke="currentColor"
@@ -10305,7 +10305,7 @@ exports[`screen snapshots > Settings 1`] = `
               class="flex items-center gap-2 mb-1.5"
             >
               <svg
-                class="lucide lucide-server w-4 h-4 text-indigo-400"
+                class="lucide lucide-server w-4 h-4 text-indigo-700 dark:text-indigo-400"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -10477,7 +10477,7 @@ exports[`screen snapshots > Settings 1`] = `
               class="flex items-center gap-2 mb-1.5"
             >
               <svg
-                class="lucide lucide-globe w-4 h-4 text-violet-400"
+                class="lucide lucide-globe w-4 h-4 text-violet-700 dark:text-violet-400"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -10737,7 +10737,7 @@ exports[`screen snapshots > Workflows 1`] = `
             Avg Agent Depth
           </span>
           <svg
-            class="lucide lucide-git-fork w-4 h-4 flex-shrink-0 text-indigo-400"
+            class="lucide lucide-git-fork w-4 h-4 flex-shrink-0 text-indigo-700 dark:text-indigo-400"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -10775,7 +10775,7 @@ exports[`screen snapshots > Workflows 1`] = `
           class="flex items-end justify-between gap-2"
         >
           <span
-            class="text-2xl font-semibold leading-none truncate text-indigo-400"
+            class="text-2xl font-semibold leading-none truncate text-indigo-700 dark:text-indigo-400"
             title="0.0"
           >
             0.0
@@ -10979,7 +10979,7 @@ exports[`screen snapshots > Workflows 1`] = `
             Most Common Flow
           </span>
           <svg
-            class="lucide lucide-arrow-right-left w-4 h-4 flex-shrink-0 text-violet-400"
+            class="lucide lucide-arrow-right-left w-4 h-4 flex-shrink-0 text-violet-700 dark:text-violet-400"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -11008,7 +11008,7 @@ exports[`screen snapshots > Workflows 1`] = `
           class="flex items-end justify-between gap-2"
         >
           <span
-            class="text-2xl font-semibold leading-none truncate text-violet-400"
+            class="text-2xl font-semibold leading-none truncate text-violet-700 dark:text-violet-400"
             title="-"
           >
             -
@@ -11058,7 +11058,7 @@ exports[`screen snapshots > Workflows 1`] = `
             Avg Compactions
           </span>
           <svg
-            class="lucide lucide-layers w-4 h-4 flex-shrink-0 text-cyan-400"
+            class="lucide lucide-layers w-4 h-4 flex-shrink-0 text-cyan-700 dark:text-cyan-400"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -11084,7 +11084,7 @@ exports[`screen snapshots > Workflows 1`] = `
           class="flex items-end justify-between gap-2"
         >
           <span
-            class="text-2xl font-semibold leading-none truncate text-cyan-400"
+            class="text-2xl font-semibold leading-none truncate text-cyan-700 dark:text-cyan-400"
             title="0.0"
           >
             0.0
@@ -11350,7 +11350,7 @@ exports[`screen snapshots > Workflows 1`] = `
           class="text-sm font-semibold text-fg-secondary flex items-center gap-2"
         >
           <svg
-            class="lucide lucide-workflow w-4 h-4 text-violet-400"
+            class="lucide lucide-workflow w-4 h-4 text-violet-700 dark:text-violet-400"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -11414,7 +11414,7 @@ exports[`screen snapshots > Workflows 1`] = `
               />
             </svg>
             <svg
-              class="lucide lucide-workflow w-4 h-4 text-violet-400 flex-shrink-0"
+              class="lucide lucide-workflow w-4 h-4 text-violet-700 dark:text-violet-400 flex-shrink-0"
               fill="none"
               height="24"
               stroke="currentColor"
@@ -11488,7 +11488,7 @@ exports[`screen snapshots > Workflows 1`] = `
               </div>
             </div>
             <a
-              class="text-fg-muted hover:text-violet-400 transition-colors flex-shrink-0"
+              class="text-fg-muted hover:text-violet-700 dark:hover:text-violet-400 transition-colors flex-shrink-0"
               href="/sessions/sess-1"
               title="Open parent session"
             >
@@ -11705,7 +11705,7 @@ exports[`screen snapshots > Workflows 1`] = `
             <svg
               fill="none"
               height="24"
-              stroke="#10b981"
+              stroke="rgb(var(--status-success))"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"