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
* s/readAllUsers/viewAllUsers
Other frontend variables use the `view` syntax. Arguably we should
use `read` to match the backend, but `view` does seem more UI-like.
* Check license for organizations
All the checks now require both the experiment and license.
I also renamed the variable canViewOrganizations everywhere for
consistency.
* Allow any auditor to view the audit log
* Use fine-grained permissions on settings page
Since in addition to deployment settings this page now also includes
users, audit logs, groups, and orgs.
Since you might not be able to fetch deployment values, move all the
loaders to the individual pages instead of in the wrapping layout.
* Add stories for organization members page
Needed to break it out into a separate view to do this.
* Add stories for multi-org sidebar
* Remove multi-org check from management settings layout
We only use this layout when multi-org is enabled, so no need to run the
check a second time.
* Add more stories for deployment dropdown
* wip: commit progress on code split-up
* wip: commit more progress
* wip: finish initial version of class implementation
* chore: update all import paths to go through client instance
* fix: remove temp comments
* refactor: smoooooooosh the API
* refactor: update import setup for tests
Kayla はな