This is part 1 to lay the foundation for the theme changes.
Part 2 which adds the UI implementation is in this PR,
https://github.com/coder/coder/pull/24680
-----------------
Adds four sitewide colorblind-friendly theme palettes alongside the
existing
light and dark themes. The palettes retune the red/green and blue/yellow
semantic axes so success/error, warning, and diff additions/deletions
remain distinguishable under the most common color vision deficiencies.
| Preference ID | Purpose |
|---|---|
| `dark-protan-deuter` / `light-protan-deuter` | Protanopia &
deuteranopia (red/green). Success and additions shift to sky-blue;
destructive and deletions shift to vermilion/orange; warning shifts to
fuchsia so warning and destructive states do not collapse onto the same
hue. |
| `dark-tritan` / `light-tritan` | Tritanopia (blue/yellow). Warning
shifts from amber to fuchsia; red/green semantic pair is preserved. |
The diff panel and every semantic role (`success`, `error`, `warning`,
`notice`, `danger`) pick up the new palette automatically because they
consume the sitewide CSS variables in `site/src/index.css`. No backend
or database change is required: `theme_preference` is already a
free-form `text` column.
The existing `"dark"`, `"light"`, and `"auto"` preferences are
unchanged.
This PR ships the palettes and the resolution machinery
(`CONCRETE_THEMES`, `resolveThemeName`, `isConcreteThemeName`, and the
ThemeProvider/AgentEmbedPage plumbing). It intentionally does **not**
add UI to select the new themes; the follow-up PR #24680 adds a Theme
mode dropdown (Sync with system / Single theme) that exposes every
concrete theme, including the four added here.
Produced with Coder Agents assistance.
<details>
<summary>Implementation plan and decision log</summary>
Full plan (investigation, file layout, TDD phases, open risks) is
attached to the chat that produced this PR.
Key decisions:
- **Sitewide, not agent-scoped.** The diff panel already consumes the
sitewide theme via CSS variables. Keeping the change at the user
appearance layer also fixes red/green accents in alerts, badges, and
build states in one change, and matches how comparable products (e.g.
GitHub) ship this feature.
- **No backend change.** `codersdk/users.go` already accepts any
`theme_preference` string, and `ThemeProvider` now has a shared resolver
(`resolveThemeName`) that maps any persisted value to a concrete theme,
tolerating unknowns and the legacy `"auto"` value.
- **Palette provenance.** The protan/deuter palette is inspired by
CVD-safe blue/orange palettes and tuned within the existing Tailwind
color scales; the tritan palette keeps red/green semantics intact and
shifts warning to fuchsia. This PR does not claim exact Okabe-Ito or
WCAG AA derivation without recorded contrast data.
- **UI deferred.** Selecting the new themes is gated on the follow-up PR
#24680 which replaces the flat theme grid with a Theme mode dropdown.
</details>
* Removes experiment `web-push`.
* Falls back to NoopWebpusher in case of error
* Checks browser capability in FE
* Adds note to agents getting-started docs regarding webpush without TLS
> 🤖
Add theme synchronization, navigation blocking, scroll-to-bottom
handling, and chat-ready signaling to the agent embed page. The parent
frame can now set light/dark theme via postMessage or query param, and
ThemeProvider skips its own class manipulation when the embed marker is
present. Navigation attempts that leave the embed route are intercepted
and forwarded to the parent frame. The scroll container ref is lifted
to the layout so the parent can request scroll-to-bottom.
React's [Why You Might Not Need An
Effect](https://react.dev/learn/you-might-not-need-an-effect) article
describes several antipatterns and footguns you might encounter when
working with useEffect, so I fed it to an agent and let it determine
some low hanging fruit to fix:
Replace useEffect+setState patterns with direct computations where the
values are purely derived from props, state, or query data:
- useWebpushNotifications: derive `enabled` inline from query data
instead of setting it via useEffect
- ProxyContext: replace `proxy` state + updateProxy callback + useEffect
with a single useMemo over its three inputs
- useSyncFormParameters: replace ref-sync useEffect with direct
assignment during render
- AgentsSidebar (LoadMoreSentinel): replace two ref-sync useEffects with
direct assignments during render
Co-authored by Coder Agent 🤖
## Problem
Two network requests were blocking the initial page render with
fullscreen `<Loader fullscreen />` spinners:
1. **`POST /api/v2/authcheck`** (permissions) — blocked in `RequireAuth`
via `AuthProvider.isLoading`
2. **`GET /api/v2/organizations`** — blocked in `DashboardProvider`
All other bootstrap queries (`user`, `entitlements`, `appearance`,
`experiments`, `build-info`, `regions`) already used server-side
metadata injection via `index.html` meta tags and resolved instantly.
These two did not.
## Solution
Follow the existing `cachedQuery` + `<meta>` tag pattern to inject both
datasets server-side:
### Server-side (`site/site.go`)
- Add `Permissions` and `Organizations` fields to `htmlState`
- Fetch organizations via `GetOrganizationsByUserID` in parallel with
existing queries
- Evaluate all `permissionChecks` using the RBAC authorizer directly
- Inject results as HTML-escaped JSON into `<meta>` tags
### Frontend
- Register `permissions` and `organizations` in `useEmbeddedMetadata`
- Update `checkAuthorization()` to accept optional metadata and use
`disabledRefetchOptions` when available
- Update `organizations()` to accept optional metadata and use
`cachedQuery` when available
- Wire metadata through `AuthProvider` and `DashboardProvider`
### Note
The Go `permissionChecks` map in `site/site.go` mirrors
`site/src/modules/permissions/index.ts` and must be kept in sync.
## Problem
The subscribe flow in `useWebpushNotifications` called
`pushManager.subscribe()` without first requesting the `Notification`
permission. When the browser permission state is `"denied"` (e.g. from a
previous prompt dismissal), the browser throws:
```
DOMException: Registration failed - permission denied
```
This surfaced as a confusing error toast on the agents page. The error
has nothing to do with Coder RBAC roles — it's the browser denying the
push subscription because notification permission was previously
declined. An admin who had granted browser permission wouldn't see this;
a user who previously dismissed or denied the prompt would.
## Fix
Added an explicit `Notification.requestPermission()` call before
`pushManager.subscribe()`. This:
1. **Re-prompts** the user if the permission state is `"default"` (not
yet decided)
2. **Throws a clear, actionable error** if the permission is `"denied"`:
*"Notifications are blocked by your browser. Please allow notifications
for this site in your browser settings."*
3. **Only proceeds** to `pushManager.subscribe()` after permission is
confirmed as `"granted"`
## Tests
New test file `useWebpushNotifications.jest.ts`:
- **requests notification permission before subscribing** — verifies
`requestPermission()` is called before `pushManager.subscribe()`
- **throws a clear error when permission is denied** — verifies the
user-friendly error message
- **does not call pushManager.subscribe when permission is denied** —
verifies we bail out early
## Summary
Wire VAPID web push notifications into the Agents (chat) system so users
get desktop notifications when an agent finishes running.
### Backend
- Add `webpush.Dispatcher` to `chatd.Server` and pass it through from
`coderd.Options.WebPushDispatcher`
- In `processChat()`'s deferred cleanup, dispatch a web push
notification when the chat reaches a terminal state:
- **`waiting`** (success): "Agent has finished running."
- **`error`** (failure): the error message, or "Agent encountered an
error."
- Sub-agent chats (`ParentChatID.Valid`) are skipped to avoid
notification spam from internal delegation
- Gracefully no-ops when the dispatcher is nil (web push disabled)
### Frontend
- New `WebPushButton` component — a bell icon that uses the existing
`useWebpushNotifications` hook
- Returns `null` when the `web-push` experiment is off
- Three states: loading spinner, green bell (subscribed), muted bell-off
(unsubscribed)
- Tooltip + toast feedback on toggle
- Added to both the Agents page empty state top bar and the AgentDetail
top bar
- The Agents page has its own layout (no standard Navbar), so it needs
its own subscribe button
### End-to-end flow
1. User clicks the bell icon on `/agents` → browser subscribes via VAPID
2. User starts an agent chat → chat enters `running` status
3. Agent finishes → `processChat` defer sets status to `waiting`/`error`
→ dispatches web push
4. Browser service worker shows a desktop notification with the chat
title and status
---------
Co-authored-by: Coder <coder@users.noreply.github.com>
Replaces our custom `<GlobalSnackbar />` (MUI Snackbar + event emitter)
with [`sonner`](https://github.com/emilkowalski/sonner). Deletes
`GlobalSnackbar/`, the custom event emitter infra, and migrates ~80
source files to `toast.success()` / `toast.error()` from `sonner`.
- ~47 error toasts now surface API error detail via
`getErrorDetail(error)` in the toast description, not just a generic
message. Coincides with #22229.
- Toast messages follow an `{Action} "{entity}" {result}.` format (e.g.
`User "alice" suspended successfully.`) since toasts persist across
navigation now.
- 17 uses of `toast.promise()` for loading → success → error lifecycle.
- Some toasts include action buttons for quick navigation (e.g. "View
task", "View template").
- Multiple toasts can stack and display simultaneously.
---------
Co-authored-by: Kayla はな <mckayla@hey.com>
Use the server-rendered meta tag value as an intermediate fallback for
theme preference, between the JS-fetched value and the default theme.
This ensures the correct theme is applied before the API response loads.
Fixes#20050
Adds deprecation markers for MUI components and the custom Stack
component to guide migration to shadcn/ui and Tailwind CSS.
Changes:
- Added JSDoc @deprecated tags to Stack component and type definitions
- Added deprecation comments to MUI imports in theme files
- Expanded Biome noRestrictedImports rules to flag all MUI component
imports
---------
Co-authored-by: Claude <noreply@anthropic.com>
Auto select the proxy on first load (stored in local storage, so per
browser), then defer to user selection. The auto selected proxy will not
update again once set.
Builds on https://github.com/coder/coder/pull/17570
Frontend portion of https://github.com/coder/coder/tree/chat originally
authored by @kylecarbs
Additional changes:
- Addresses linter complaints
- Brings `ChatToolInvocation` argument definitions in line with those
defined in `codersdk/toolsdk`
- Ensures chat-related features are not shown unless
`ExperimentAgenticChat` is enabled.
Co-authored-by: Kyle Carberry <kyle@carberry.com>
I've been bit in the past by hard to deduce bugs caused by circular
dependencies within TS projects. On a hunch that this could be
contributing to some flaky tests I've used the tool
[dpdm](https://github.com/acrazing/dpdm) to find and remove them.
This PR does the following:
- Move around exports/create new files to remove any non-type circular
depencies
- Add dpdm as a dev dependency and create the `check:circular-depency`
pnpm script
* Improves tests for webpush notifications
* Sets subscriber correctly in web push payload (without this,
notifications do not work in Safari)
* NOTE: for now, I'm using the Coder Access URL. Some push messaging
service don't like it when you use a non-HTTPS URL, so dropping a warn
log about this.
* Adds a service worker and context for push notifications
* Adds a button beside "Inbox" to enable / disable push notifications
Notes:
* ✅ Tested in in Firefox and Safari, and Chrome.
Adds warnings to the proxy and proxy health pages on HTTP 1.1, 1.0, 0.9
protocols.
Only the performance API can return the HTTP protocol type. We already
use the performance API for latency timings, and each proxy could have
this issue.
resolvescoder/internal#205
The goal is to create a new page located in deployment settings to allow
users to create and update organization IDP sync settings.
- [x] Use shadcn button for export policy button
- [x] Disable save button if form is not dirty
- [x] Disable "Add IdP organization" button if idp org name or coder
orgs are empty
- [x] Add footnote label below organization sync field input
- [x] Add button to Delete rows in mapping table
- [x] Create Multi-select combox box component to select coder org to
map to idp org
- [x] Storybook tests
- [x] Tooltip for assign default org switch
- [x] Display success/error toast on form submission
<img width="1181" alt="Screenshot 2024-12-02 at 20 33 07"
src="https://github.com/user-attachments/assets/86877d3b-82ec-4ed2-b239-bf8497352a9e">
Closes#15212
## Changes made
- Updated logic so that proxy config is only requested when appropriate,
instead of for all users on all deployment pages
- Split up the main context provider for the `/deployment` and
`/organizations` routes, and updated layout logic for
`ManagementSettingsLayout` layout component. This ensures the sidebar is
always visible, even if request errors happen
- Added additional routing safeguards to make sure that even if a user
can view one page in the deployment section, they won't be able to
navigate directly to any arbitrary deployment page
- Updated logic for sidebar navigation to ensure that nav items only
appear when the user truly has permission
- Centralized a lot of the orgs logic into the `useAuthenticated` hook
- Added additional check cases to the `permissions.tsx` file, to give
more granularity, and added missing type-checking
- Extended the API for the `RequirePermissions` component to let it
redirect users anywhere
- Updated some of our testing setup files to ensure that types were
defined correctly
---------
Co-authored-by: McKayla Washburn <mckayla@hey.com>
* chore: move schedule controls to the right side of the screen
* chore: add org display to workspace topbar
* fix: force organizations to be readonly array
* fix update type mismatch for organizations again
* refactor: tuck main loading skeleton for filter into base definition
* refactor: give filter files different names to reduce confusion
* refactor: remove separate base filter skeleton
* fix: update responsive logic for audit table filter
* chore: add organizations option group to workspaces table
* refactor: make prop contracts more explicit
* refactor: centralize the organizations dropdown logic
* fix: update imports and formatting
* fix: update quota querying logic to use new endpoint
* fix: add logic for handling long workspace or org names
* chore: add links for workspaces by org
* chore: expand tooltip styling for org
* chore: expand tooltip styling for owner
* refactor: split off breadcrumbs for readability
* fix: display correct template version name in dropdown
* fix: update overflow styling for breadcrumb segments
* fix: favor org display name
* fix: centralize org display name logic
* fix: make sure skeletons stay synced with org feature toggles
* fix: ensure that mock query cache key and component key are properly synced for storybook
* docs: clean up wording on SearchField comment
* fix: shrink mix width threshold for search field
* chore: add navigation test for workspace details page (#14629)
* chore: add tests for WorkspacePage cross-page navigation
* fix: update story to use mock organizations menu
Jaayden Halko