> 🤖 This PR was modified by Coder Agents on behalf of Jake Howell.
Fixes the `outsideBox` variant styling for tabs and simplifies the kebab
overflow logic. The overflow calculation now accounts for `column-gap`
between tabs so the menu trigger appears at the correct breakpoint.
- Fix Tailwind hover selector syntax for `outsideBox` variant
(`[&_[data-slot=tabs-trigger]:hover]` instead of
`[&_[data-slot=tabs-trigger]]:hover`)
- Account for `column-gap` in `useKebabMenu` overflow calculation via a
new `getTabGap` helper
- Use content-box width (`getContentBoxWidth`) for the initial overflow
pass so it matches `ResizeObserver`'s `contentRect.width`
- Consolidate `calculateTabValues` into a single-pass loop, removing the
separate `findFirstTabIndex` function
- Drop `FC` wrapper in favor of inline prop destructuring across all tab
components
- Forward `ref` through `TabsList` so consumers can attach refs directly
- Add `useKebabMenu` unit tests covering both all-visible and overflow
scenarios
## Summary
Fixes the warning badge color in light mode by switching text and border
tokens from `content-warning`/`border-warning` to `highlight-orange`.
## What changed
The `warning` variant in `Badge` was the only colored badge variant not
using the `highlight-*` token pattern:
| Variant | Before | After |
|---|---|---|
| warning (text) | `text-content-warning` | `text-highlight-orange` |
| warning (border) | `border-border-warning` | `border-highlight-orange`
|
In light mode, `content-warning` (HSL 27 96% 61%) produced a washed-out
orange. `highlight-orange` (HSL 30 100% 32%) gives a darker, more
legible result that matches the screenshot in the issue.
> [!NOTE]
> This PR was authored by Coder Agents.
Renames the `--border-hover` design token to `--border-secondary` and
updates the color values to work well on `surface-secondary`
backgrounds, preparing for the template creation flow.
- Light theme: `240 5% 65%` (`#A1A1AA`)
- Dark theme: `240 5% 26%` (`#3F3F46`)
All 7 component usages updated to use the new token name.
<details>
<summary>Context</summary>
The previous `border-hover` token used a single value (`#52525B`) for
both themes, which didn't provide enough contrast on `surface-secondary`
backgrounds. The rename to `border-secondary` better reflects its
semantic role as a secondary border color rather than a hover-specific
one, and the updated values give proper contrast in both light and dark
themes. This change is a prerequisite for the upcoming template creation
flow work.
</details>
> 🤖 Generated by Coder Agents
This branch tightens import hygiene and editor guidance to reduce
accidental use of legacy or discouraged patterns.
It also updates consumers too, by propagating the new `lucide-react`
import convention across the existing UI surfaces that reference those
icons.
- Updated `.vscode/settings.json` to prefer non-relative imports and
improve TypeScript auto-import behavior.
- Re-enabled and expanded Biome restricted-import enforcement in
`biome.jsonc` for migration guardrails.
- Added/used `lucide-react` `-Icon` naming conventions for clarity and
consistency.
- Updated consumers too across components, modules, and pages so the new
import rules are applied end-to-end.
This pull-request takes our `<CodeExample />` component and removes the
MUI specific styles.
---------
Co-authored-by: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
This pull-request takes our `<Avatar />` and `<AvatarCard />` component
and removes the bespoke styles to them. As an added bonus I took care of
the `getExternalImageStylesFromUrl` helper util and cleaned out the
MUI-specific code to it.
There are some remnants of `@emotion/react` in
`getExternalImageStylesFromUrl` however we don't have a theme switcher
that could appropriately handle it yet.
The `DateRangePicker` accepts a `now` prop that stories and tests use to
pin preset ranges and future-date disabling to a deterministic clock,
but it never forwarded that value to the underlying `Calendar`.
`react-day-picker` then computed its own `today` from wall-clock time,
which drives both the "today" highlight modifier and the initial visible
month — causing stories like `TemplateInsightsControls:Day` to _flake_
as real time advanced.
Thread `currentTime` into `react-day-picker`'s `today` prop. When `now`
is omitted (production usage), `currentTime` falls back to `new Date()`,
which matches `react-day-picker`'s existing default, so there is no
runtime behavior change.
The shadcn-compatible CSS aliases (`--background`, `--foreground`,
`--muted`,
`--muted-foreground`, `--primary`, `--primary-foreground`) were added as
part
of the Coder agents work with hardcoded HSL values that duplicated
existing
semantic design tokens. These non-standard color classes (`bg-muted`,
`text-muted-foreground`, `text-foreground`) had started spreading
through
components like Table, MultiUserSelect, and WorkspacesTable.
This PR makes two changes:
1. **CSS aliases now derive from canonical tokens via `var()`
references**
instead of duplicating HSL values. The aliases remain for `streamdown`
and other external consumers, but `--background` now resolves to
`--surface-primary` (`#FFFFFF` in light, was `#FAFAFA`), and the rest
map to their semantic equivalents (`--content-primary`,
`--surface-secondary`, `--content-secondary`, `--content-link`).
2. **Component classes replaced with semantic equivalents:**
- `bg-muted` → `bg-surface-secondary`
- `text-muted-foreground` → `text-content-secondary`
- `text-foreground` → `text-content-primary`
- `text-amber-400` → `text-content-warning`
- `hsl(var(--background))` → `hsl(var(--surface-primary))`
- `hsl(var(--muted-foreground))` → `hsl(var(--content-secondary))`
> This PR was initially created by Claude Opus 4.
Co-authored-by: Jaayden Halko <jaayden@coder.com>
Co-authored-by: Jaayden Halko <jaayden.halko@gmail.com>
Relates to https://linear.app/codercom/issue/CODAGT-103
- Add `keywords={[option.label]}` to `CommandItem` in
`MultiSelectCombobox` so cmdk's default filter matches against the
visible label text, not just the value (UUID)
- Extend `OpenCombobox` story with type-to-filter assertions
- Add "search filters by display name" step to `TemplateAllowlist` story
> 🤖
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Agent log tabs could spill over the Copy/Download area, and the overflow
kebab sometimes never wired up because ResizeObserver ran with no node
or while inactive. This ties the hook to when the strip is real and
clips the tab column.
- `AgentRow`: `enabled` for `useKebabMenu` is `hasStartupFeatures &&
hasAnyLogs && showLogs`; `hasAnyLogs` is computed before the hook; tab
list wrapper gets `overflow-hidden`.
- `useKebabMenu`: attach `ResizeObserver` in `useLayoutEffect`; bail if
missing container or `!enabled || !isActive`; deps include `enabled` and
`isActive`.
- `TabsList` (`overflowKebabMenu`): add `min-w-0 w-full max-w-full` with
`flex-nowrap` so the list stays inside the flex column.
## Summary
Fixes the "See all templates" link overlapping template items in the New
Workspace dropdown.
## Root cause
Two compounding issues:
1. **`OverflowY` className was being overwritten, not merged.** The
component spread `...attrs` (which included the caller's `className`)
onto the div, silently replacing its own base classes
(`overflow-y-auto`, `shrink`, `w-full`). This meant the template list
never scrolled independently.
2. **`PopoverContent` has `overflow-y-auto` in its base styles.** With
the inner `OverflowY` not scrolling, the *entire popover* became the
scroll container. The "See all templates" footer was part of that
scrollable flow and overlapped template rows as the user scrolled.
## Fix
- **`OverflowY`**: Destructure `className` explicitly and merge it with
the base classes using `cn()` so `overflow-y-auto` and `shrink` are
always preserved.
- **`PopoverContent`**: Add `overflow-hidden flex flex-col` to make it a
non-scrolling flex container. Only the `OverflowY` child scrolls.
- **`OverflowY` usage**: Add `min-h-0` so the flex child can shrink
below its content size when the popover's available height is
constrained.
## Screenshot
<img width="1460" height="1072" alt="image"
src="https://github.com/user-attachments/assets/9b519f2d-9806-44ca-a354-12248de36952"
/>
> 🤖 Generated with [Coder Agents](https://coder.com/agents)
The vitest process hung after all 2132 story tests passed because
leftover refetchInterval polls kept the Node.js event loop alive.
Components that set per-query refetchInterval override the
QueryClient default, causing HTTP requests through vite's proxy
to localhost:3000 (no backend) that never resolve cleanly.
Three fixes:
- preview.tsx: disable all automatic refetching defaults and cancel
in-flight queries on story unmount via useEffect cleanup
- storybook.tsx: save/restore the original window.WebSocket in the
withWebSocket decorator, clear pending timers in close()
- vite.config.mts: add explicit testTimeout, hookTimeout, bail, and
retry settings to the storybook vitest project
Also fix 5 story files that imported from @testing-library/react
instead of storybook/test.
Adds a small LinearProgress (determinate + MUI-style dual-bar
indeterminate) and uses it on workspace build progress; drops MUI and
adds Tailwind keyframes + Storybook stories.
- New component under `site/src/components/LinearProgress/`
- `WorkspaceBuildProgress` switched off `@mui/material/LinearProgress`
- Added `bar-indeterminate` / `bar-indeterminate-2` animation keyframes
<img width="563" height="115" alt="image"
src="https://github.com/user-attachments/assets/bdcd8584-fa2d-487c-96f6-084891a9b084"
/>
`OrganizationAutocomplete` declared `options: Organization[]` (mutable),
but `useDashboard().organizations` returns `readonly Organization[]`.
Callers forced to spread to satisfy the type even though the component
never mutates the array.
While fixing this, found two more issues with how organization context
is resolved:
- `AgentCreateForm`, `ChatPageContent`, and `OrganizationRedirect` used
`organizations[0]` assuming the default org is first — nothing
guarantees that ordering.
- `ChatPageInput` was guessing the org from `useDashboard()` for file
uploads on existing chats, even though the chat already has
`organization_id`. In multi-org deployments, uploads could land in the
wrong org.
Changes:
- Widen `OrganizationAutocomplete` `options` to `readonly
Organization[]`
- Remove unnecessary `[...organizations]` spread in `AgentCreateForm`
- Replace all `organizations[0]` with `.find(o => o.is_default) ??
organizations[0]` for users not in the default org
- Eliminate `[...organizations].sort()` allocation in
`OrganizationRedirect` with direct `.find()` lookups (equivalent
priority: editable default → any editable → viewable default → any
viewable)
- Thread `chat.organization_id` from `AgentChatPage` →
`AgentChatPageView` → `ChatPageInput` so file uploads use the chat's
actual org instead of guessing
Closes#24285
> 🤖 PR initially created by Claude Opus 4.6
Replaces remaining MUI `<Skeleton />` usages with our shared `Skeleton`
component to keep loading states consistent and reduce MUI/Emotion
coupling. Also cleans up a few adjacent touched styles while preserving
existing behavior.
- Replace `@mui/material/Skeleton` with `#/components/Skeleton/Skeleton`
- Remove a few MUI-specific skeleton patterns at callsites
- De-mui adjacent Emotion styles
- Simplify filter layout handling with class-based responsive wrapping
Fixes https://github.com/coder/internal/issues/1440
- Convert `OrganizationAutocomplete` to a purely presentational, fully
controlled component
- Accept `value`, `onChange`, `options` from parent; remove internal
state, data fetching, and permission filtering
- Update `CreateTemplateForm` and `CreateUserForm` to own org fetching,
permission checks, auto-select, and invalid-value clearing inline
- Memoize `orgOptions` in callers for stable `useEffect` deps
- Rewrite Storybook stories for the new controlled API
> 🤖 Written by a Coder Agent. Reviewed by a human.
\`InlineMarkdown\` and \`MemoizedInlineMarkdown\` lived in
\`Markdown.tsx\`
alongside a static \`import { Prism as SyntaxHighlighter } from
"react-syntax-highlighter"\` — the full PrismJS build with ~300 language
grammars. Because \`DashboardLayout\` eagerly imports
\`AnnouncementBannerView → InlineMarkdown\`, every authenticated page
loaded and evaluated the entire Prism/refractor bundle on startup even
though syntax highlighting is only used in secondary views.
This PR moves \`InlineMarkdown\` and \`MemoizedInlineMarkdown\` into
their
own \`InlineMarkdown.tsx\` file that depends only on \`react-markdown\`
and
updates all six consumers to import from the new module.
\`Markdown.tsx\`
keeps the PrismJS import for the full \`Markdown\` component, which is
only reached through lazy-loaded routes.
> 🤖 Generated by Coder Agents
This pull-request makes a few changes to our `<Badge />` component to
bring it inline with Figma.
* Added all variants to the stories of Figma (they can vary per
badge-type, so its better we track everything).
* Removed the `border` variant of the component, border variants should
be on all `sm` and `md`.
* Added a hover effect to the `default` variant (per-design).
* Resolved issue with sizings of `xs` and `sm` plus resolved
iconography.
* Resolved issue with icons not showing at all on `xs` variants.
This pull-request resolves an regression where the spread was overriding
the required styles from the `react-window` virtualised rows. This was
causing the scroll to act a little crazy.
Migrated LogLine and Logs components from Emotion CSS-in-JS to Tailwind
CSS classes.
- Replaced Emotion `css` prop and theme-based styling with Tailwind
utility classes in `LogLine` and `LogLinePrefix` components
- Converted CSS-in-JS styles object to conditional Tailwind classes
using the `cn` utility function
- Updated log level styling (error, debug, warn) to use Tailwind classes
with design token references
- Migrated the Logs container component styling from Emotion to Tailwind
classes
- Removed Emotion imports and theme dependencies
Refactored the tab overflow hook by renaming `useTabOverflowKebabMenu`
to `useKebabMenu` and removing the configurable `alwaysVisibleTabsCount`
parameter.
- Renamed `useTabOverflowKebabMenu` to `useKebabMenu` and moved it to a
new file
- Removed the `alwaysVisibleTabsCount` parameter and hardcoded it to 1
tab as `ALWAYS_VISIBLE_TABS_COUNT`
- Removed the `utils/index.ts` export file for the Tabs component
- Updated the import in `AgentRow.tsx` to use the new hook name and
removed the `alwaysVisibleTabsCount` prop
- Refactored the internal logic to use a more functional approach with
`reduce` instead of imperative loops
- Added better performance optimizations to prevent unnecessary
re-renders
This PR improves the agent log download functionality by replacing the
single download button with a comprehensive dropdown menu system.
- Replaced single download button with a dropdown menu offering multiple
download options
- Added ability to download all logs or individual log sources
separately
- Updated download button to show chevron icon indicating dropdown
functionality
- Enhanced download options with appropriate icons for each log source
<img width="370" height="305" alt="image"
src="https://github.com/user-attachments/assets/ddf025f5-f936-499a-9165-6e81b62d6860"
/>
Audit and connection log pages were timing out due to expensive COUNT(*)
queries over large tables. This commit adds opt-in count capping: requests can
return a `count_cap` field signaling that the count was truncated at a threshold,
avoiding full table scans that caused page timeouts.
Text-cast UUID comparisons in regosql-generated authorization queries
also contributed to the slowdown by preventing index usage for connection
and audit log queries. These now emit native UUID operators.
Frontend changes handle the capped state in usePaginatedQuery and
PaginationWidget, optionally displaying a capped count in the pagination
UI (e.g. "Showing 2,076 to 2,100 of 2,000+ logs")
Related to:
https://linear.app/codercom/issue/PLAT-31/connectionaudit-log-performance-issue
Add optional demographic and newsletter preference fields to the first
user setup page, and redesign the setup form using non-MUI components
## New fields
**Newsletter preferences** (opt-in checkboxes):
- **Marketing updates** — product announcements, tips, best practices
- **Release & security updates** — new releases, patches, security
advisories
## Frontend redesign
Migrated the setup page from MUI to the shadcn/ui design system used
across the rest of the app:
- Replaced MUI `TextField`, `MenuItem`, `Checkbox`, `Autocomplete` with
`Input`, `Label`, `Select`, and `Checkbox` from `#/components`
- Switched from Emotion `css` props to Tailwind utility classes
- Left-aligned header, widened form container to 500px
- Updated copy: "30-day trial", "Learn more", "Help us make Coder
better"
- Side-by-side layouts for first/last name, phone/country
- Moved privacy policy text to always-visible onboarding section
- Removed "Number of developers" field from trial section
### Implementation notes
- The `onboarding_info` payload is fire-and-forget via
`Telemetry.Report()` — not stored in the database
- Country picker switched from MUI Autocomplete to Radix Select for
design consistency
- GitHub OAuth button preserved — conditionally rendered when
`authMethods.github.enabled`
- NewPasswordField is meant to be a drop in replacement for the MUI
PasswordField
### References
- #23989
- #24021
- #24014
- #24018
---------
Co-authored-by: Tracy Johnson <tracy@coder.com>
Co-authored-by: Jeremy Ruppel <jeremy.ruppel@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Co-authored-by: Kayla はな <mckayla@hey.com>
Added `data-slot` attributes to all Tabs components for better CSS
targeting and component identification. Replaced generic button
selectors with data-slot attribute selectors in tab styling variants.
Implemented `useTabOverflowKebabMenu` hook to handle tab overflow
scenarios by measuring tab widths and determining which tabs should be
hidden in a dropdown menu when container space is limited.
Enhanced the AgentRow logs section with:
- Tab overflow handling using a kebab menu (three dots) for tabs that
don't fit
- Copy logs button with visual feedback using CheckIcon animation
- Download logs functionality for selected tab content with proper
filename generation
- Improved layout with flex containers and proper spacing
Few props and components updates
* Added `overflowKebabMenu` prop to TabsList component to enable
`flex-nowrap` behavior when overflow handling is active.
* Created `<DownloadSelectedAgentLogsButton />` component to replace the
previous download functionality, now working with filtered log content
based on selected tab.
https://github.com/user-attachments/assets/af48ca39-c906-4a11-a891-0d4399eee827
This pull-request removes all instances of `<IconButton />` being
imported from `@mui/material/IconButton`. This means that we've removed
one whole dependency from MUI and replaced all instances with the local
variant.
This PR adds log source tabs to the workspace agent logs panel so users
can quickly focus on specific log streams instead of scanning one
combined feed. It also updates the shared tabs trigger behavior to
explicitly use `type="button"` when rendered as a native button,
preventing unintended form submission behavior.
- Adds per-source tabs in `AgentRow` with an **All Logs** default view.
- Shows only log sources that currently have output, with source icons
and sorted labels.
- Filters rendered log lines based on the active tab while preserving
existing log streaming/scroll behavior.
- Refines the logs container layout/styling for the new tabbed UI.
- Updates `TabsTrigger` to safely default button type when not using
`asChild`.
https://github.com/user-attachments/assets/9b3e7a9d-72e3-4c12-aba2-2b70cdbc04c1
The CopyButton tooltip on `/agents` defaulted to top (Radix default),
while the Edit button already used `side="bottom"`. This adds an
optional `tooltipSide` prop to `CopyButton` and passes `"bottom"` in the
agents `ConversationTimeline` so both tooltips appear below the buttons
consistently.
## Changes
- `CopyButton`: added optional `tooltipSide` prop, forwarded to
`<TooltipContent side={tooltipSide}>`
- `ConversationTimeline`: passed `tooltipSide="bottom"` to the
copy-message `CopyButton`
> Generated by Coder Agents
This pull-request moves using to using the plain `radix-ui` package over
`@radix-ui/react-*` packages. Put simply, now we're not going to run
into issues with inconsistent radix dependencies. This will have no
effect to how the code is built, but will give us a single place to
import from.
This refactors `<Tabs />` into two clearer patterns: link tabs for route
navigation and Radix tabs for stateful tab panels. That gives us proper
accessibility semantics where we need them without overloading simple
navigation tabs.
As part of that split, this updates several consumers, adds coverage for
both variants, and cleans up some nearby styling.
- introduce Radix-backed tabs primitives for tabbed content
- move router-based tabs to `LinkTabs`
- update notifications, IdP sync, and workspace build pages to use
semantic tabs
- preserve route navigation tabs for groups and templates
- add stories/tests for both tab implementations
- simplify related layout and styling in touched components
Closes#22244
This pull-request makes our `<Alert />`'s more inline with the Figma
style-system, we're looking to ensure that these are vertically rendered
now and not horizontal WCAG nightmares.
---------
Co-authored-by: Danielle Maywood <danielle@themaywoods.com>
Sometimes clicking **Edit** on a chat message does not populate the
composer with the message text, and the edit flow had a few timing bugs
around Lexical hydration. The composer was relying on
`key={initialValue}` on `LexicalComposer`, so re-editing the same text
could produce no state change, no remount, and an empty editor.
This PR keeps the editor mounted and switches edit flows to an
imperative `setValue()` API on `ChatMessageInputRef`. It also hardens
that API so draft reads and writes stay correct across initial
hydration: canceling edit no longer refocuses on mobile, pre-edit draft
snapshots preserve persisted drafts, early `setValue()` calls buffer
until the editor is ready, and `getValue()` falls back before readiness
but reads live editor state after attach.
Closes#22189
GFM alerts (e.g., `> [!IMPORTANT]`) in Markdown content failed to render
when the alert body contained inline formatting like `**bold**`,
`*italic*`, or `` `code` ``. The alert marker and subsequent text were
merged into a single string node by the parser, causing the type
detection to fail and fall back to a plain blockquote.
Additionally, multi-line alert content (`> line one\n> line two`) lost
its line breaks — all lines collapsed into one.
- Split the alert marker from trailing content in shared string nodes so
type detection works with inline formatting
- Preserve embedded newlines as `<br/>` elements to match GitHub's GFM
alert rendering
- Wrap plain-text children instead of splitting on `\n` to avoid
stripping newline information early
<img width="447" height="187" alt="image"
src="https://github.com/user-attachments/assets/d2fa3495-0b31-483c-97d8-12fed6819e24"
/>
Jake Howell