ui(env): explicit switcher button+modal, forced selection, 3px color bar

- Replace EnvironmentSelector "All Envs" dropdown with Button+Modal (DS Modal, forced on first-use).
- Add 8-swatch preset color picker in the Environment settings "Appearance" section; commits via useUpdateEnvironment.
- Render a 3px fixed top bar in the current env's color across every page (z-index 900, below DS modals).
- New env-colors tokens (--env-color-*, light + dark) and envColorVar() helper with slate fallback.
- Vitest coverage for button, modal, and color helpers (13 new specs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/components/EnvironmentSwitcherButton.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { EnvironmentSwitcherButton } from './EnvironmentSwitcherButton';
+import type { Environment } from '../api/queries/admin/environments';
+
+const envs: Environment[] = [
+  {
+    id: '11111111-1111-1111-1111-111111111111',
+    slug: 'dev',
+    displayName: 'Development',
+    production: false,
+    enabled: true,
+    defaultContainerConfig: {},
+    jarRetentionCount: 5,
+    color: 'amber',
+    createdAt: '2026-04-22T00:00:00Z',
+  },
+  {
+    id: '22222222-2222-2222-2222-222222222222',
+    slug: 'prod',
+    displayName: 'Production',
+    production: true,
+    enabled: true,
+    defaultContainerConfig: {},
+    jarRetentionCount: 10,
+    color: 'red',
+    createdAt: '2026-04-22T00:00:00Z',
+  },
+];
+
+describe('EnvironmentSwitcherButton', () => {
+  it('renders the selected env display name', () => {
+    render(<EnvironmentSwitcherButton envs={envs} value="dev" onClick={() => {}} />);
+    expect(screen.getByText('Development')).toBeInTheDocument();
+  });
+
+  it('shows placeholder text when no env is selected', () => {
+    render(<EnvironmentSwitcherButton envs={envs} value={undefined} onClick={() => {}} />);
+    expect(screen.getByText(/select environment/i)).toBeInTheDocument();
+  });
+
+  it('fires onClick when pressed', () => {
+    const onClick = vi.fn();
+    render(<EnvironmentSwitcherButton envs={envs} value="dev" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: /switch environment/i }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('paints the color dot with the env color CSS variable', () => {
+    const { container } = render(
+      <EnvironmentSwitcherButton envs={envs} value="prod" onClick={() => {}} />,
+    );
+    const dot = container.querySelector('span[aria-hidden]');
+    expect(dot).toBeTruthy();
+    expect((dot as HTMLElement).style.background).toContain('env-color-red');
+  });
+});