Color environment indicators per environment

[colonelpanic8]

What Changed

• Added a per-environment accent color, chosen by the user and stored in client settings (environmentAccentColors, keyed by EnvironmentId).
• Added an Accent color control to Settings → Connections, both for "This environment" and for every saved remote environment row.
• Tinted the environment glyphs that already exist with the chosen color — no new text anywhere:
  • the remote cloud glyph on sidebar thread rows,
  • the project header remote/sandbox badge (only when every remote member of the group agrees on one color),
  • the sidebar v2 row server glyph and its hover-tooltip environment row,
  • the sidebar v2 project-actions environment rows,
  • the Run on environment selector (trigger and each item).
• Generalized the existing ProviderAccentColorPicker into a reusable AccentColorPicker and reused it for environments rather than duplicating the swatch/custom-color UI.

Why

Every environment indicator draws the same glyph, so someone running threads on several machines cannot tell which environment a thread belongs to without hovering. Color differentiates the indicators that are already on screen.

Deliberately no labels: sidebar rows have no horizontal room to spare, so this rides entirely on existing glyphs.

The mapping is client-local rather than server-backed on purpose. It describes how this client distinguishes its environments, it has to stay readable while an environment is disconnected, and no single backend should dictate it to the others.

UI Changes

Accent color row (unset)	Picker open	Color chosen

Verified live in the web app: the row renders for the current environment, the popover offers the six shared swatches plus the custom hex/HSV picker and a clear action, and the choice round-trips through client settings (environmentAccentColors in persisted client settings) and is reflected back in the control.

The tinted remote glyphs themselves need a second, genuinely remote backend to appear. I could not pair two local dev servers in a browser to capture that: cross-origin pairing is blocked because /.well-known/t3/environment and /api/auth/pair do not send access-control-allow-origin (pre-existing, unrelated to this change). The tinting logic is covered by tests instead, and the render sites are one-line style applications of environmentAccentStyle.

Checklist

• vp test run apps/web/src/environmentAccentColors.test.ts apps/web/src/environmentGrouping.test.ts (30 tests)
• vp test run apps/desktop/src/settings/DesktopClientSettings.test.ts (7 tests)
• vp run --filter @t3tools/web typecheck
• vp run --filter @t3tools/contracts typecheck
• vp run --filter @t3tools/desktop typecheck
• vp run --filter @t3tools/client-runtime typecheck
• vp run --filter @t3tools/mobile typecheck
• vp lint and vp fmt on every changed file
• Exercised the real settings flow in the running web app and confirmed persistence

---

Note

Low Risk
UI-only client settings and icon styling with validation and tests; no auth, server state, or data migration risk.

Overview
Users can assign a per-environment accent color stored in client settings (environmentAccentColors) so existing environment glyphs are visually distinct without adding labels.

Settings & persistence: Connections gains an accent-color control for the primary environment and each remote row (EnvironmentAccentColorControl). Colors are client-local hex values, normalized via shared accentColors helpers (provider picker refactored to generic AccentColorPicker). Updates use useUpdateClientSettingsWith so rapid picker commits do not clobber each other.

UI tinting: Sidebar (v1/v2), branch toolbar “Run on” selector, and grouped project remote badges apply environmentAccentStyle when a color is set; grouped badges only tint when all remote members share one color (remoteEnvironmentIds added to sidebar grouping).

Contracts & tests: ClientSettings / patch schemas extended; desktop settings tests updated; unit tests cover resolve/apply/style behavior.

^{Reviewed by Cursor Bugbot for commit e6e3dd5. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add per-environment accent color indicators across the UI

• Adds environmentAccentColors to client settings (keyed by EnvironmentId) and exposes hooks and utilities in environmentAccentColors.ts for reading, resolving, and updating colors.
• Environment icons in the branch toolbar selector, sidebar thread rows, project headers, and SidebarV2 rows/tooltips are now tinted with the environment's accent color when set.
• Adds an EnvironmentAccentColorControl component (swatch button + popover picker) rendered in the Connections settings for both primary and saved remote environments.
• Extracts shared accent color primitives (ACCENT_COLOR_SWATCHES, normalizeAccentColor) into accentColors.ts and reuses them in the existing provider accent color picker.
• Adds useUpdateClientSettingsWith hook to apply settings patches derived from the latest snapshot, avoiding stale overwrites on concurrent writes.

^{Macroscope summarized e6e3dd5.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 53ea9f82-37e7-41b5-94e7-3c2b2f720385

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 4a3384f. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new user-facing feature (per-environment accent colors) with new components, hooks, and client settings schema additions. New features with visual behavior changes across multiple UI surfaces warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}