diff --git a/AGENTS.md b/AGENTS.md
index 6aea7be9..189b9fbf 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -207,6 +207,10 @@ vale .
 - If shared state must be added, use Redux rather than introducing a new global state library.
 - Avoid broad UI refactors unless the task explicitly asks for them.
 - Do not re-create components if we already have some in the app.
+- Follow `frontend/DESIGN.md`: compose `components/ui/` parts and pick their look with props, use theme tokens, and
+  keep typography, spacing, radius and motion on its roles.
+- Every user-visible string, attributes included (`aria-label`, `label`, `placeholder`, `title`, `alt`), is a `t()`
+  key in all seven locales under `frontend/src/locale/` (`de en es jp ru zh zh-TW`). Admin pages stay English.
 
 #### Icons
 
@@ -217,7 +221,7 @@ DocsGPT historically mixed three icon sources: `lucide-react`, inline SVG compon
    plus, etc.). It tokenizes via `currentColor`, ships tree-shaken icons, and the codebase
    already imports it in 30+ places. `<X className="size-4" />`, `<ChevronDown />`, etc.
 2. **Use `assets/<name>.svg?react`** when you need a brand-specific or domain illustration
-   that doesn't exist in lucide (the app logo, robot fallback, retry arrow, send arrow,
+   that doesn't exist in lucide (the app logo, robot fallback, send arrow,
    etc.). Always set `fill="currentColor"` / `stroke="currentColor"` in the SVG file so
    consumers can theme via Tailwind text classes.
 3. **Avoid `<img src={Asset}>` for new icons.** It blocks `currentColor` theming and
diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
new file mode 100644
index 00000000..43b6e7bb
--- /dev/null
+++ b/frontend/DESIGN.md
@@ -0,0 +1,1112 @@
+# DocsGPT frontend design system
+
+The UI is Tailwind v4 plus the shadcn-style components in
+`src/components/ui/`. `@shadcn/lint` enforces the rules below through
+`npm run lint`; its messages point here. Everything in this file is either a
+token in `src/index.css` or a variant in a `ui/` component, so an agent or a
+contributor can always find the concrete thing to use.
+
+## Rules in one paragraph
+
+Pages compose `ui/` components and choose their look through props
+(`variant`, `size`, `shape`). `className` on a component is for placement
+only: margin, width, flex and grid, positioning. Colours come from the theme
+tokens, never from the raw Tailwind palette. Spacing, type and radii come
+from the Tailwind scale, never from arbitrary `[...]` values. Runtime values
+go in CSS custom properties or, when unavoidable, an inline style with a
+disable comment. Conditional classes go through `cn(...)`, never a template
+literal (prettier sorts the classes inside `cn`, and `cn` merges conflicts).
+Every user-visible string, attributes included (`aria-label`, IconButton
+`label`, `placeholder`, `title`, `alt`, `hint`), is a `t()` key in all seven
+locales (`de en es jp ru zh zh-TW`); admin pages are English by design.
+Interpolated user text (a name, a timezone, a date) passes `interpolation: {
+escapeValue: false }`, or `/` renders as `&#x2F;`.
+
+## Colour tokens
+
+Defined in `src/index.css` (`:root` for light, `.dark` for dark) and exposed
+through `@theme inline`, so `bg-`, `text-`, `border-`, `ring-`, `fill-` and
+`stroke-` all accept them, including opacity modifiers such as
+`bg-success/10`. One token class replaces a light + dark pair.
+
+| Token                                   | Use for                                                                           | Replaces                                                            |
+| --------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `background`, `foreground`              | page surface and primary text                                                     | `bg-white`, `text-gray-700/800/900`, `dark:text-gray-200/300`       |
+| `card`, `card-foreground`               | raised surfaces (cards, dialogs, dropdowns)                                       | `bg-white dark:bg-[#2b2c31]`                                        |
+| `popover`, `popover-foreground`         | floating menus and popovers                                                       | same as card                                                        |
+| `muted`, `muted-foreground`             | quiet fills and secondary text, icons, placeholders, timestamps                   | `bg-gray-100/200`, `text-gray-400/500/600`, `dark:text-gray-400`    |
+| `accent`, `accent-foreground`           | hover and selected fills                                                          | `hover:bg-gray-100`, `dark:hover:bg-gray-700`                       |
+| `border`, `input`, `ring`               | dividers and field borders (fields use `border-border`), focus rings              | `border-gray-200/300`, `dark:border-gray-600/700`                   |
+| `primary`, `primary-foreground`         | brand purple: primary actions, links, selected states                             | `bg-purple-*`, `text-purple-*`, `#7D54D1`, `#A076F6`                |
+| `secondary`, `secondary-foreground`     | pressed and active toggles (a brand tint), secondary buttons, the question bubble | `bg-accent` on an active icon button                                |
+| `destructive`, `destructive-foreground` | errors, failed states, dangerous actions                                          | `text-red-*`, `bg-red-50/100`, `#B42318`, `#E60000`                 |
+| `success`, `success-foreground`         | completed, active, healthy                                                        | `text-green-*`, `text-emerald-*`, `bg-green-50/100`                 |
+| `warning`, `warning-foreground`         | paused, pending review, degraded                                                  | `text-amber-*`, `text-yellow-*`, `text-orange-*`, `bg-amber-50/100` |
+| `info`, `info-foreground`               | running, informational                                                            | `text-blue-*`, `bg-blue-50/100`                                     |
+| `sidebar-*`                             | the navigation rail                                                               |                                                                     |
+| `chart-1` to `chart-5`                  | data series only, never UI chrome (see below)                                     |                                                                     |
+| `answer-bubble`                         | assistant message background                                                      |                                                                     |
+
+Status colours are tuned to stay vivid rather than turning brown or olive,
+so their contrast is low. Against white in light mode, `destructive` and
+`success` are about 3.8:1, `warning` is 2.9:1 and `info` is 5.2:1. On the
+dark card, `destructive` is 2.9:1 and the others are 5.5:1 or more. Do not
+use them for long body text; they are for badges, icons, short labels and
+fills.
+
+The dark `primary` (#8855f1) is set so white text on it reaches 4.55:1 on
+every default Button. As text on the dark surfaces it is below 4.5:1 (3.45:1
+on background, 3.06:1 on card), so links and `text-primary` in dark pass only
+as large or UI text; a fix for that needs its own link token. `ring`,
+`secondary` and `sidebar-primary` keep the lighter #976af3.
+
+Chart colours are not a separate palette. `chart-1` to `chart-5` alias
+`primary`, `info`, `success`, `warning` and `destructive`, in that order,
+so the charts use the same colours as the rest of the app in both themes.
+A single series uses `chart-1`, the brand colour. When a series has a
+meaning, use the token for that meaning, not the next one in order:
+failed tool calls use `destructive`, succeeded ones `success`, pending
+ones `warning`. Series with no meaning (models, agents, sources) take
+`chart-1` to `chart-5` in order. When there are more than five, the four
+largest keep `chart-1` to `chart-4` and the rest are summed into one
+"Other" series in `chart-5`, so no colour repeats (`settings/foldSeries.ts`).
+`secondary` is never a chart colour.
+
+The status set is `success | warning | destructive | info`. `default` is the
+component's own base tone (brand on a Badge or Button, quiet on an Alert or
+Toast). `neutral` is the grey pill or box.
+
+One tint scale, by purpose:
+
+- Wash `/5`: a whole surface that is selected or receiving a drop (Card
+  `selected`, Dropzone drag-active and drag-reject). The border carries the
+  state; the wash only warms the surface. Never on a chip or a text fill.
+- Brand soft fill: `bg-secondary text-secondary-foreground` (Badge `default`,
+  Avatar `primary`, the OptionCard icon square), never `bg-primary/10`.
+- Status soft fill: `bg-<role>/10` in both themes (Badge, Alert, ToastHeader,
+  a danger-zone panel); no `dark:` twin.
+- Status border: `border-<role>/50`.
+- Tinted hover on a row that is already accent: `/15` light, `/20` dark
+  (`ghost-on-accent`, `ghost-destructive-on-accent`, a destructive menu item).
+- Neutral hover: solid `bg-accent` in both themes (ghost buttons, combobox,
+  SelectTrigger, Card `interactive`, Dropzone, every list-row highlight).
+- Quiet panel inside a page or card: `bg-muted`, not `bg-muted/40` or `/60`.
+- Dividers: `border-border`, not `border-border/60`.
+
+Patterns:
+
+- Status pill: `<Badge variant="success">`. Status box: `<Alert variant="warning">`.
+  Reach for `bg-success/10 text-success` directly only on dots and borders.
+- Solid status fill: `bg-warning text-warning-foreground`.
+- Guardrail outcomes: block `destructive`, flag `warning`, redact `info`,
+  not evaluated `neutral`.
+- Status border: `border-destructive/50`.
+- De-emphasised text: `text-muted-foreground`; go lighter with an opacity
+  modifier (`text-muted-foreground/70`) rather than a lighter grey.
+- Text on the brand colour is `text-primary-foreground`, not `text-white`.
+- `secondary` is a brand tint, not a grey: primary at 10% (light) or 15%
+  (dark) over whatever sits behind it, with `primary` text in light and a
+  lighter purple (#b89cf8) in dark. So a pressed toggle (CopyButton's copied
+  state, text-to-speech while speaking) shows on card, background and muted
+  alike, and never reads as the neutral ghost hover. Use it as
+  `variant={active ? 'secondary' : 'ghost-muted'}`. That is for one thing
+  switched on or off. Picking one value of several (a 7d / 30d / 90d range,
+  a schedule's frequency, a filter row) is a `ToggleGroup`, whose on item has
+  the `outline` look with no hue.
+- A brand chip, a small action that opens something an answer produced (an
+  artifact chip under an answer, a citation pill in its text), is also
+  `variant="secondary" shape="pill"`: the default size with a lucide icon
+  first for artifacts, `size="xs"` for citations. It is the same tint as a
+  pressed toggle; the difference is that a chip never toggles and always
+  opens or scrolls to something. The citation pill keeps `h-5 min-w-5`
+  (20px) so it sits in a line of text.
+- The user's question bubble is `bg-secondary text-foreground`: the brand
+  tint as the fill, with body text in `foreground` (15.7:1 light, 12.4:1
+  dark) rather than `secondary-foreground`, which is only 4.5:1 in light.
+  Controls on it (the collapse chevron) are plain `ghost` with a lucide icon
+  in `currentColor`.
+- `white`, `black`, `transparent`, `current` and `inherit` are allowed; use
+  them only for overlays and imagery, not for text or surfaces.
+- Swapping a state's colour for its same-hue token (amber to `warning`, red
+  to `destructive`) is fine without review; changing the hue of a state the
+  user sees (an error, a recording state, a selected tab) is a design
+  decision. Non-state UI follows the token even when its hue shifts.
+
+## Components and their variants
+
+### Button (`ui/button.tsx`)
+
+| Prop      | Values                                                                                                                                                                                                                                                 |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant` | `default`, `secondary`, `outline`, `outline-primary`, `ghost`, `ghost-muted`, `ghost-destructive`, `ghost-on-accent`, `ghost-destructive-on-accent`, `link`, `destructive`, `destructive-outline`, `combobox`, `sidebar-item`, `tab`, `section-toggle` |
+| `size`    | `xs`, `sm`, `default`, `lg`, `field`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `inline`                                                                                                                                                                |
+| `shape`   | `default` (rounded-md), `pill` (rounded-full, wider padding)                                                                                                                                                                                           |
+
+- Round brand buttons (`rounded-3xl px-5`, `rounded-full px-6`): `shape="pill"`,
+  plus `size="lg"` if they were `px-6`.
+- Muted icon buttons (`text-muted-foreground hover:text-foreground`):
+  `variant="ghost-muted"`.
+- Icon actions that remove something (a trash can on a member or shared
+  resource row) are `variant="ghost-destructive"`: muted at rest, red on
+  hover, so the warning shows even where the click deletes without asking.
+- Icon buttons on a row that is already `bg-accent` or `bg-sidebar-accent`
+  while you point at it (a highlighted Command item, a card or tile with
+  `hover:bg-accent`, a hovered sidebar row) are `variant="ghost-on-accent"`
+  (delete: `ghost-destructive-on-accent`). They hover with a
+  `foreground/15` (`destructive/15`) tint, which shows on accent where
+  ghost's accent square would not.
+- Icons are `lucide-react` at the default stroke (2). Don't pass
+  `strokeWidth`, and don't use an `<img>` for a glyph lucide has. The one
+  exception is a tiny check mark inside a status circle (the custom-model
+  test result, the artifact and research step ticks), drawn at 2.5 to 3 so
+  it stays legible at 10 to 12px; raw progress-ring `<svg>`s are not icons.
+- Icon size is one `size-N` class (never `h-N w-N`, never lucide's `size`
+  prop); colour goes on the icon (`text-muted-foreground`), spacing on the
+  parent (`gap-*`, not `mr-2` on the icon). Use current lucide names
+  (`TriangleAlert`, `CircleAlert`, `CircleCheck`, `CircleX`, `Trash2`,
+  `CodeXml`, `Search`), no `as` aliases. Inside a Button the size comes from
+  the Button: 16px, 14px at `xs`, 20px at `size="icon"`; write a `size-N`
+  only to differ from it, since any `size-` class switches the default off.
+- Bordered purple buttons (`border-primary text-primary hover:bg-primary`):
+  `variant="outline-primary"`.
+- Tiny inline actions (`h-auto px-2 py-1 text-xs`): `size="xs"`.
+- A link inside running text (an artifact link in an answer, a link in
+  markdown, a hint's "Learn more") is `variant="link" size="inline"`, with
+  `asChild` around the `<a>`: no height or padding, underlined on hover, the
+  shared focus ring. Standalone links ("Learn more" with `ExternalLink`, "Go to
+  Tools" with `ArrowRight`) are the same, the icon a child. Toggles and crumbs
+  keep a normal size. The base is `text-sm font-medium`, so a link in a 12px
+  hint passes `text-xs font-normal` (an approved exception), and a link that
+  must keep the colour of what it sits in (a status Alert, a dark overlay, a
+  source card's URL row) passes `text-current`. Never style a raw `<a>` as a
+  link.
+- Icon-only buttons are `IconButton` (below), never a `Button` with a
+  `title`.
+- Roles for dangerous and dismissive actions: a delete on a page (a "Danger
+  zone" card's Delete agent or Revoke, Delete all) is `destructive-outline`;
+  the submit of a confirm dialog is `destructive` (`ModalActions destructive`,
+  `ConfirmationModal variant="destructive"`); Cancel is `ghost` at the size and
+  shape of the button beside it, in a modal footer, a form header or an inline
+  editor. A Cancel inside a line of text (the composer's queued send) is
+  `link inline`.
+- The composer controls under the chat field (Attach, Voice, Tools,
+  Sources) are `size="sm" shape="pill"`. Their icons are `size-3.5 sm:size-4`
+  with no margin; the size's `gap-1.5` spaces them, and the label span keeps
+  `text-xs sm:text-sm` so the row still fits on a phone.
+- Popover comboboxes (`role="combobox"` + `Command`) use `variant="combobox"`,
+  which matches `SelectTrigger`: card fill, normal weight, and muted text
+  while `data-placeholder` is set (`data-placeholder={value ? undefined : ''}`).
+  Pass only layout (`w-full justify-between`) and keep the chevron as the
+  last child.
+- A button or picker that sits in a row of fields is `size="field"`: 38px.
+  `Input` and `SelectTrigger` take `size="field"` too (the same 38px as
+  Input `default`), so a form column has one name for one height. Page
+  actions beside a page's search field (Add Source, Add Tool, Test
+  retrieval, Sync) are `size="field" shape="pill"` too, with no min-width
+  or hand height. With `shape="pill"` its text starts 21px in, like the
+  Input and Select pills beside it. The agent form's pickers are
+  `combobox field pill`, its Add button `outline-primary field pill`.
+- Rows in the navigation sidebar (`hover:bg-sidebar-accent … pl-3 gap-2.5
+rounded-3xl`) are `variant="sidebar-item"`: left-aligned, full-radius, normal
+  weight, `bg-sidebar-accent` on hover and while `aria-current="page"`. Use it
+  with `asChild` around a `<Link>` for navigation rows, the label in a
+  `truncate` span. A row that also holds buttons (an agent's pin, a
+  conversation's menu, rename's Save / Cancel) puts the link and the buttons
+  side by side in a `group relative` wrapper, never buttons inside the link;
+  the link keeps its fill while the pointer is on a sibling with
+  `group-hover:bg-sidebar-accent`. The section sidebar's "Back to app" row is
+  the same variant.
+- Inline disclosure toggles ("Advanced settings", "Show advanced options")
+  are `variant="link" size="sm"` with only `-ml-3 w-fit justify-start`;
+  a chevron, when the toggle has one, is a lucide `ChevronRight` (so it
+  takes the link colour) as the first child.
+- Underline tabs (FilePicker's My Files / Shared with Me, the agent page
+  sub-nav) are `variant="tab"`: muted text on a transparent 2px bottom border,
+  square corners, no hover fill. Mark the current tab with `data-active`, which
+  gives it `foreground` text and a `primary` underline. Padding-free tabs (a
+  sub-nav with `gap-6`) add `size="inline"`, which keeps 4px above the line;
+  the row draws the 1px baseline, and `-mb-px` lays the underline over it.
+  Use them for a row of route links (the agent sub-nav: a `<nav>` whose
+  current link carries `aria-current="page"`). Tabs that switch a panel in
+  place are `ui/tabs` with `variant="underline"` on `TabsList` and each
+  `TabsTrigger`: the same pixels, plus `role="tablist"`/`"tab"`,
+  `aria-selected` and arrow-key focus; wrap the panel in `TabsContent`
+  (FilePicker's My Files / Shared with Me). The `default` variant is a pill
+  tab, unused in the app.
+- A section panel's disclosure header (NewAgent's Advanced and Guardrails
+  panels) is `variant="section-toggle" size="sm"` with `-ml-3 w-fit
+justify-start` and `aria-expanded`: a lucide `ChevronRight` first
+  (`rotate-90` while open) in primary, then the foreground title, with a
+  primary underline on hover. The button draws no focus ring; the panel does,
+  so keyboard focus outlines the whole white block:
+  `has-[[data-variant=section-toggle]:focus-visible]:ring-3 …:ring-ring/50
+…:ring-inset` on the panel `<div>` (inset, because a scrolling column clips
+  an outset ring). Status badges go beside the button, not inside it, or the
+  hover underline runs under them.
+- Drop `text-white` on default and destructive buttons; the foreground token
+  already provides it. Drop `disabled:cursor-not-allowed` on buttons; the
+  base disables pointer events. Fields are the other way round (see Focus,
+  elevation and stacking: "Disabled"). A disabled primary button just fades
+  (`disabled:opacity-50`); never hand-roll a grey disabled state.
+- A text button that removes something (Remove on a row) is
+  `ghost-destructive size="xs"`: grey at rest, red on hover.
+- A button that is busy (saving, creating, testing) takes `loading`: it
+  disables itself, sets `aria-busy`, and draws a 16px spinner over the label,
+  which stays in the layout (invisible) so the width doesn't jump. Keep the
+  idle label; never hand-place a `Spinner` in a button, swap the label for
+  "Saving…", or pin a fixed width to stop the jump. The one exception is a
+  button whose busy state says something the user needs: a progress figure
+  (a connector's Sync shows "42%") or a mode (the composer's Voice button shows
+  "Transcribing"). It keeps its busy label with a `Spinner size="xs"` (the
+  16px icon step, with a `label` so it doesn't announce "Loading") where its
+  icon was.
+
+### Card (`ui/card.tsx`)
+
+| Prop          | Values                                                                                                                                                        |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`     | `outline` (border + card surface, the default), `filled` (muted fill, no border, for tiles on a card-coloured page), `subtle` (border on the page background) |
+| `tone`        | `default`, `destructive` (the status soft fill and border, `border-destructive/50 bg-destructive/10`, over any variant)                                       |
+| `padding`     | `none`, `sm` (p-3, row boxes and code blocks), `default` (p-4), `lg` (p-6, tiles, chart panels and stat tiles)                                                |
+| `interactive` | whole card is the target: hover, focus ring and `selected` highlight; pair with `asChild` around a `<button>` or `<Link>`                                     |
+
+Parts: `CardHeader` (title left, `CardAction` top-right), `CardTitle`,
+`CardDescription`, `CardContent`, `CardFooter` (meta row, sticks to the
+bottom). One radius for every card (`rounded-2xl`); pass only layout and
+`gap-*` on `Card`. Children are spaced by Card's `gap-3`, so they carry no
+`mt-*`. Replaces every hand-rolled
+`rounded-(md|lg|xl|2xl|3xl|4xl) border bg-(card|muted) p-*` box:
+
+- Tiles (sources, tools, custom models, agents, folders) are `filled`, `lg`
+  (a folder row `default`), `interactive` only when a click navigates (a
+  draft agent is not). The Add tool picker tiles sit on the modal's card, so
+  they are `outline interactive lg` with `asChild` around a `<button>`.
+- Chart panels are `subtle lg` with fixed heights passed as layout; a chart
+  panel inside a modal is `outline` (the modal is already `bg-card`).
+- Row boxes inside a form or panel (a guardrail check, the schedule's
+  timezone box, the discovered MCP tools) are `padding="sm"`.
+- A danger zone (Delete agent, Revoke a device) and a failing stat are
+  `tone="destructive"`; the title beside it is `SectionHeader
+tone="destructive"`. Muted text fails AA on the red fill, so the tone turns
+  every `text-muted-foreground` inside it to `foreground`; don't pass a
+  lighter colour back. Icon buttons inside a destructive-tone row are
+  `ghost-destructive-on-accent`, whose red tint shows on the fill where
+  ghost's grey square would not.
+- A card on the page background that must not look raised (the shared
+  agent card) is `subtle lg`. Cards never take a shadow.
+
+Stat tiles are `components/StatCard.tsx`, never a hand-rolled Card: `label`,
+`value` (24px bold `tabular-nums`), `sub` (a 12px muted line or link),
+`hint` (a native `title` with the help cursor), `variant` (`subtle` on a
+page, `outline` inside a modal), `tone="destructive"` for a failing figure,
+`valueTone` (`destructive | warning | info | muted`) to colour the figure by
+meaning, and `loading` for a figure-sized Skeleton.
+
+Code blocks (a run's output, an error trace, a token or command to copy) are
+a `<pre className="font-mono text-xs whitespace-pre-wrap wrap-break-word">`
+in a Card picked by the surface underneath: `filled padding="sm"` (a muted
+well) on a card or background surface, `subtle padding="sm"` on a muted one
+(the tool-approval card, an expanded log row). A copy row is the same Card
+with `className="flex-row items-start gap-2"` and the `CopyButton` inside.
+Inside an Alert or a trace's tool panel, and in a full-pane viewer, the
+`<pre>` takes the recipe with no Card, so boxes don't nest. Put scroll caps
+(`max-h-* overflow-y-auto`) on the Card; never `break-all`.
+
+Tile text: the name is `CardTitle` (14px semibold from Card's `text-sm`; pass
+`as="h2"` on a page that goes from its title straight to a tile grid, but
+never a heading inside a clickable tile, whose children a button flattens), the
+description `CardDescription size="xs"` (12px muted, `leading-relaxed`), and
+meta lines (a date, a token count, a model id or host) go in `CardFooter` at
+regular weight. `font-medium` is for list rows (`ListRow`), not tiles.
+
+### SectionHeader (`ui/section-header.tsx`)
+
+`<SectionHeader as title description actions size tone>`. `size`: `default`
+(18px `text-lg font-semibold`, a section title on a page or panel), `sm` (the
+eyebrow, `text-muted-foreground text-xs font-semibold uppercase
+tracking-wider`, a label set in caps above a group or a table head), `xs`
+(14px `text-sm font-semibold`, a sub-heading inside a panel, drawer or modal).
+`tone="destructive"` for a danger zone only. `as` is the level in the outline
+(`h2` default). The spacing below belongs to the parent's `gap-*`, never an
+`mb-*` on the heading. Not for dialog and sheet titles (their own title) or a
+page byline (a muted `text-sm` paragraph).
+
+A title with controls beside it (Add, a filter Select, Import spec) passes
+them as `actions`, never a hand-rolled `flex justify-between` row around the
+header: the row centres the title on the buttons and wraps them under it on
+a phone (`flex-wrap items-center gap-x-4 gap-y-2`). Panel and chart titles
+are `size="xs"` with `as="h3"`; a title row that also holds a legend or a
+"Resets" line keeps its wrapper and swaps only the heading. Disclosure
+headers (`Button variant="section-toggle"`) and the Agents breadcrumb are not
+SectionHeaders.
+
+### OptionCard (`ui/option-card.tsx`)
+
+The picker tile: a whole-card `<button>` with an icon in a tinted square, a
+title and an optional description; `selected` fills the icon square and
+outlines the card. Use it wherever the user picks one of several ways to
+proceed (agent type, source type). Title-only tiles keep the same layout.
+Pass `selected` (true or false) only in a
+single-select picker inside a `role="radiogroup"`; the tile is then a radio.
+Tiles that advance a step or navigate (Upload's source types, the agent-type
+modal) leave it out and stay plain buttons. Only layout classes on it.
+
+### Badge (`ui/badge.tsx`)
+
+`variant`: `default` (brand), `neutral`, `success`, `warning`, `destructive`,
+`info`, `outline`. Replaces every hand-rolled
+`rounded-full bg-<colour>-100 px-2 py-0.5 text-xs text-<colour>-700 dark:...`
+pill, including schedule and run status pills, trace chips and statuses,
+token scope chips, "Disabled" and tool chips. A grey chip is `neutral`, never
+a `bg-muted` pill. The admin role is `default` wherever it shows (Teams, Admin
+→ Users); every other role is `neutral`. Chips that show code (token scopes) pass `font-mono`, and
+stat chips `tabular-nums`, as approved exceptions. HTTP method pills take their variant from
+`getMethodBadgeVariant` (`utils/httpMethodColors.ts`): GET `success`, POST
+`info`, PUT `warning`, DELETE `destructive`, PATCH `default`, anything else
+`neutral`. `MultiSelect` (`ui/multi-select.tsx`) shows its first two picks as
+`default` Badges with a remove X, then "+N more", on a `Button
+variant="combobox" size="field"` trigger that grows past 38px when the chips
+wrap, with SelectTrigger's turning chevron; each row in its list shows a
+`Checkbox size="sm"`.
+
+### Input (`ui/input.tsx`)
+
+| Prop      | Values                                                                               |
+| --------- | ------------------------------------------------------------------------------------ |
+| `size`    | `sm` (h-8), `default` (h-9.5, 38px), `lg` (h-12), `field` (h-9.5, the form-row name) |
+| `shape`   | `default`, `pill`                                                                    |
+| `variant` | `default`, `bare` (no border, padding, radius, shadow or ring), `filled` (card fill) |
+
+Text alignment classes (`text-right`) and `font-mono` (code fields) are
+allowed on Input and Textarea. `<Input label>` is the shorthand for a
+one-field `FormField`: the same floating label on the border, the same
+`labelSurface` (`card` default, forms in cards and modals; `background`,
+fields straight on a page; `muted`, fields on a muted panel). Never pass a
+background class for it. A placeholder under a floating label is an example:
+it stays hidden while the label rests inside and shows on focus. The chat and hero
+fields (`rounded-3xl px-5 py-3`) are `size="lg" shape="pill"`. A
+default-size pill (38px, the form-row height) pads `px-5` like the large
+one, so its text lines up with the Select pills. Compact table
+filters (`h-auto px-2 py-1 text-sm`) are `size="sm"`. An inset icon (a
+search glass) is `leftIcon`, with or without a `label`; it pads the field
+`pl-10`, so never hand-place an icon over an Input. A field inside a host
+that already draws the frame (the renaming sidebar row, a search strip in a
+bordered panel) is `variant="bare"`; the host shows focus, and any inset
+padding goes on the host, not the field. A field on a muted panel (the
+ImportSpec Base URL box) is `variant="filled"`, so it keeps the card fill
+instead of showing the panel through; never pass `bg-card` for it.
+
+### SelectTrigger (`ui/select.tsx`)
+
+`size`: `sm` (32px), `default` (36px), `field` (38px, the form-row
+height); `variant`: `default`, `ghost`; `shape`: `default`, `pill`. Pills
+pad `px-5` at every size but `sm` (`px-3`), so their text starts 21px in
+like the Input and Button field pills. A select in a form is
+`size="field"`, labelled by `FormField`. SelectTrigger is `w-fit`; pass
+`w-full` in a form column. Fields that take typing or sit beside one are 16px
+below `md` (iOS zooms on focus under 16px) and 14px from `md`: Input,
+Textarea, SelectTrigger `default | field`, Button `combobox` `default | field |
+lg` and CommandInput. The `sm` sizes stay 14px. A highlighted list row is
+`bg-accent` in Select, Command and DropdownMenu alike.
+
+### Textarea (`ui/textarea.tsx`)
+
+`size`: `sm`, `default`, `lg` (rounded-2xl, for prompt editors); `resize`:
+`none`, `vertical` (default), `both`. Same border, ring and invalid styling
+as Input. `variant`: `default` (transparent), `filled` (card fill), with
+the same rule as Input: a textarea on a muted panel is `variant="filled"`,
+never `bg-card`. Three raw `<textarea>` elements stay, because each sits
+under an overlay it must line up with: the chat composer, PromptTextArea's
+variable highlighter and the chunk editor behind its line-number gutter.
+
+### FormField (`ui/form-field.tsx`)
+
+Every boxed form control is labelled by a floating label:
+`<FormField label required hint error disabled labelSurface>` with the field
+as its only child. The label sits on the field's border (12px muted,
+`labelSurface` `card` | `background` | `muted` to match the surface behind
+the field, so the notch hides the line). It rests inside an empty, unfocused
+`Input` or `Textarea` and moves up on focus; on a `SelectTrigger`, combobox,
+`MultiSelect`, number field or `Dropzone` it stays on the border. It turns
+red (`text-destructive`) with an `error`, and dims while `disabled`. Under
+the field come a muted `text-xs` hint and a red `text-xs` error
+(`role="alert"`), 6px apart. The required star follows the label
+(`aria-hidden`; the field gets `aria-required`, not native `required`). A
+placeholder is an example: hidden while the label rests, shown on focus.
+Stack floating fields with `gap-5` so each label clears the field above.
+
+`Input`, `Textarea`, `SelectTrigger` (even nested in `Select`), `MultiSelect`,
+`Dropzone` and `Checkbox` read their `id`, `aria-invalid`, `aria-describedby`,
+`aria-required` and `disabled` from it, so don't set those by hand; an id
+the field already has wins. Any other control: pass `id` to FormField and
+the same id to the control. One FormField holds one control: a second field
+inside it needs its own `id`, or it takes the field's. Popovers reset the
+wiring (`FormFieldBoundary`), so a picker's search box is safe.
+`className` is layout only. `<Input label>` is the one-field shorthand; never
+put it inside a FormField (two labels).
+
+`float={false}` puts the label above instead (14px medium, 6px up), for a
+FormField with no single box to sit on: a list of checkboxes, several
+controls in a row, a loading or error line in place of the field. Controls
+whose label sits beside them (Switch, Checkbox, radio) use `SettingRow` or
+an inline `Label`, not FormField. An editing surface that fills its area
+(the chat composer, the chunk and wiki editors, editing a sent question) and
+repeated rows in a list (workflow expressions) have no visible label and
+must have an `aria-label`. Never hand-build a label above a field, a
+hand-positioned floating label, or a `div.flex-col` + `Label` + `<p>` stack.
+
+### SettingRow (`ui/setting-row.tsx`)
+
+A setting with a control on the right (a Switch, a short Input) is
+`<SettingRow label description htmlFor alignStart stack as after>{control}</SettingRow>`,
+grouped in `<SettingRows>`, which splits rows with `divide-border/50` and pads
+each 12px (none at the group's ends). The title is a `Label` for the control
+(`htmlFor` = the control's id), so every switch has a name and clicking the
+title toggles it; `as="h2" | "h3"` keeps a heading tag, and the control then
+needs its own `aria-label`. `alignStart` top-aligns the control for wrapping
+descriptions. `stack` puts a control too wide for a phone row (a 224px
+picker) under the title below `sm` at full width; give the picker
+`w-full sm:w-56`. `after` holds a field that belongs to the row, 8px under it
+(the agent form's limit Inputs). Settings → General is the page-level example:
+`PageToolbar` intro and rule, then `SectionHeader`ed groups of SettingRows in a
+`max-w-3xl` column. Inline "switch + label" pairs (a filter
+toggle) are not SettingRows.
+
+### Checkbox (`ui/checkbox.tsx`)
+
+`<Checkbox checked onCheckedChange>` (Radix), never `<input type="checkbox">`:
+native boxes take the OS accent and ignore dark mode. `size`: `default`
+(16px, option rows), `sm` (14px, table cells). Unchecked it is an
+`border-input` box; checked, `primary` with a `primary-foreground` check.
+Name it with a `Label htmlFor` or `aria-label`. For an on/off setting with a
+description use a Switch in a SettingRow instead.
+
+### Tooltip (`ui/tooltip.tsx`) and IconButton (`ui/icon-button.tsx`)
+
+Every icon-only button is an `IconButton`: `<IconButton label icon hint?
+side? variant size />`. `label` is the accessible name and the tooltip text;
+`hint` replaces the tooltip text when it says more than the name ("Undo
+(Ctrl+Z)"); `icon` is a lucide icon, rendered `aria-hidden`, or pass
+`children` for a swapping or custom glyph. It never sets `title`. Tooltip
+side: `bottom` for buttons in a header or toolbar at the top of a page, panel
+or dialog; `right` on the collapsed sidebar rail, where a top tooltip would
+cover the button above; the default `top` everywhere else (under an answer,
+in the composer, in rows). Toast close and collapse buttons are plain `Button`s with
+an `aria-label` and no tooltip.
+
+Tooltips open after 400ms. One `TooltipProvider` is mounted in `main.tsx`,
+so moving along a row of icon buttons opens each at once after the first
+(Radix's skip-delay); a `Tooltip` outside it (tests, a portal root) adds its
+own provider. For a hint on something that is not an icon button, compose
+`Tooltip` + `TooltipTrigger asChild` + `TooltipContent`. `title=` stays only
+on truncating text (`span`, `p`, `div`), where it shows the full name.
+
+### ToggleGroup (`ui/toggle-group.tsx`)
+
+The segmented control for picking one value of several (`type="single"`) or
+several of several (`type="multiple"`).
+Items are pills: the on item is the `outline` look (`bg-background`, border,
+`shadow-xs`), the others `ghost-muted`. `size` is `sm` (32px, the default) or
+`xs` (28px, inside a muted track: a wrapper `<div className="bg-muted
+rounded-full p-1">` around the group, whose own className takes layout only). A single group is a `radiogroup` with one Tab
+stop and arrow keys; it sends `""` when the on item is clicked again, so
+ignore that in `onValueChange` (`(v) => v && setRange(v)`). Route links in a
+row (the Agents filter pills) are not a ToggleGroup: they are `Button asChild
+variant={active ? 'outline' : 'ghost-muted'} size="sm" shape="pill"` around
+each `Link`, with `aria-current="page"` on the current one.
+
+### Separator (`ui/separator.tsx`)
+
+A 1px `bg-border` rule, horizontal or `orientation="vertical"`, decorative
+(`role="none"`) unless `decorative={false}`. Pass margins and width only.
+Replaces every `<hr>` and every `border-b` or `h-px` div that is only a line.
+
+### Spinner and Skeleton (`ui/spinner.tsx`, `ui/skeleton.tsx`)
+
+`Spinner size="xs | sm | default | lg"` (16, 20, 28, 40px) draws in
+`currentColor`, so colour it with a `text-*` token on it or its parent. `xs`
+is the icon-sized step: a busy Button, a step's status in a Preview or
+research row. Never shrink a larger size with `className="size-*"`, and don't
+use lucide `LoaderCircle` (formerly `Loader2`) or a hand-drawn SVG as a loader. `Skeleton` is a pulsing
+muted block sized with layout classes; its default radius (`rounded-sm`, 6px)
+is the bar radius, so pass none (`rounded-full` for an avatar or switch
+stand-in). Bars inside a muted surface (a `Card variant="filled"` tile) take
+`surface="muted"` (`bg-muted-foreground/20`), since `bg-muted` would vanish
+there. A tile's loading mirror is the same `Card` as the tile (variant,
+padding, height) with Skeleton bars laid out like its content; the Card
+itself never pulses, only the bars do. Never put a Skeleton inside an
+element that pulses itself; the two animations multiply.
+
+### LoadingState and EmptyState (`ui/loading-state.tsx`, `ui/empty-state.tsx`)
+
+A page, panel or dialog that is still loading shows `LoadingState`, never a
+hand-centred `Spinner`. `fill`: `parent` (`h-full`, needs a parent with a
+height: the artifact panel, a drawer body), `screen` (`h-screen`, the app and
+admin guards) or `block` (`py-10`, a page section or dialog body with no
+height of its own). `label` puts a muted caption under the ring (a long job:
+Convert to wiki, Enable GraphRAG); it is also the ring's name. Spinners
+inside a control (a busy Button, a picker's `sm` ring) stay `Spinner`.
+
+Nothing to show is `EmptyState`: `size` `default | sm | xs` (128 / 96 / 64px
+art, page / panel / popover), `illustration` `no-files | none` (a "no
+results" line is `size="xs" illustration="none"`), `title`, `description`
+(plain `muted-foreground`), `action`. A page or panel whose fetch failed is
+`EmptyState tone="destructive" illustration="none"` with a `Retry` action
+(`t('retry')`): a red `CircleAlert`, a red title, `role="alert"`. Never a bare
+`text-destructive` paragraph.
+
+### Progress (`ui/progress.tsx`)
+
+`value` 0 to 100, `variant`: `default`, `success`, `warning`,
+`destructive`, `info`; `size`: `sm`, `default`, `lg`. Replaces the
+width-percent divs in quota, indexing and guardrail views.
+
+### Avatar (`ui/avatar.tsx`)
+
+`size`: `none` (image decides, the default), `xs` (28px), `sm` (32px),
+`default` (36px), `lg` (40px): Button's names at Button's heights;
+`shape`: `none`, `circle`, `square`; `variant`: `default`, `primary` (brand
+initials on `secondary`), `muted` (grey initials). Initials boxes pass the letters as
+children.
+
+### Dropzone (`ui/dropzone.tsx`)
+
+`size`: `default` (tall target), `compact` (one row, for forms and modals).
+Props: `onDrop`, `accept`, `multiple`, `maxFiles`, `maxSize`, `disabled`,
+`title`, `description`, `icon`, `error`. Border and fill follow the drag
+state through `data-drag-active` and `data-drag-reject` (the `/5` wash);
+it hovers to solid `accent`. Every drop
+target renders it, including `components/FileUpload.tsx` (which keeps its
+preview and validation logic) and the Import agent / Import API
+specification dialogs; don't hand-roll a `border-2 border-dashed` target
+around `useDropzone`.
+
+### Toast (`ui/toast.tsx`)
+
+Feedback on anything the user did outside a modal (uploads, runs,
+approvals, team events, a page action's result) is a toast in the
+bottom-right stack; a result inside an open modal is an `Alert` there (see
+"Where a message lives"), since the toast stack paints under the modal's
+overlay. The app has one
+`ToastViewport`, mounted in `App.tsx`; it is the live region
+(`role="status"`, `aria-live="polite"`) and the fixed stack, so `Toast`
+cards carry no role and no toast renders its own rail or positioning. Top
+to bottom it holds `TeamNotificationToast`, `ToolApprovalToast`,
+`UploadToast` and `ActionToast`, and it moves to the bottom-left while the
+workflow Preview drawer is open. A new toast component returns only its
+`Toast` cards and is added to that viewport. A page that reports the result
+of an action (the admin Users actions) dispatches
+`showActionToast({ variant: 'success' | 'destructive', message })` from
+`notifications/actionToastSlice.ts`; `ActionToast` shows it and dismisses
+it after 4.5s, and a new result replaces the previous one.
+
+Compose `Toast` > `ToastHeader variant` (`default`, `success`, `warning`,
+`destructive`, `info`) with `ToastTitle` and `ToastActions` (collapse and
+close as `Button variant="ghost-muted" size="icon-sm"`), then
+`ToastContent` (add `scrollable` for long lists) with `ToastItem label meta`
+rows (optional `icon` before the label), a `ToastStatus status` circle per
+row (`pending`, `success`, `warning`, `destructive`, `info`),
+`ToastMessage variant` for an explanation and `ToastFooter` for action
+buttons. `ToastTitle` truncates to one line; `wrap` lets a long title (a
+localised string, a team name) wrap instead. `ToastMessage size` is `xs`
+(default, the note under a row) or `sm` (`text-sm leading-4.5`, the whole
+body of a notice). A message that is the only content under the header
+gets its top padding on its own, and a message right after a `ToastItem`
+shares that row's divider. Toasts own their width, radius and shadow; pass
+no width or colour to them.
+
+### A clickable card that holds a link
+
+A card that opens something and also holds a link (a source card under an
+answer, with its URL) is a plain `relative` container: a `<button
+type="button">` inside it covers the card with `after:absolute after:inset-0`
+(the card's radius on `after:`), and the link is a sibling after it with
+`relative z-10`, so both are real controls, one tab stop each, and neither
+sits inside the other. The container draws the focus ring for the button
+(`has-[>button:focus-visible]:ring-3 …ring-ring/50`). Never put a link inside
+a `role="button"` or a `<button>`.
+
+### Where a message lives: FormField, Alert or Toast
+
+- A message about one control is `FormField error` (it also turns the
+  floating label red).
+- A result the user must read before closing the modal (a failed share, a
+  failed import, a Test connection result) is an `Alert` in the modal body.
+- A fire-and-forget result, or any result on a page rather than in a modal,
+  is a toast (`showActionToast`).
+- A page or panel that failed to load its own content is
+  `EmptyState tone="destructive"` in place of that content, with `Retry`.
+- A notice the user must read before acting (an expiring token, a policy that
+  forces a setting, models without a price) is an `Alert`; one that is only
+  informative and should not be announced passes `role="note"`.
+- Status text of a sentence or more is an `Alert` with a lucide icon, never a
+  coloured paragraph. A long notice about an old run inside a collapsed panel
+  is `Alert role="status"`, not `alert`.
+- An action's error on a full-page form (saving an agent) is an `Alert
+variant="destructive"` above the form, not text in or beside the button.
+- A list of errors the user must read on a canvas or page (the workflow's
+  publish validation) is a destructive `Alert` floating at `z-20` on an opaque
+  `bg-card rounded-xl shadow-md` wrapper that stays until closed; a toast
+  would truncate each error to one line and dismiss itself.
+
+### Alert (`ui/alert.tsx`)
+
+Inline notice inside a form, modal or panel (see above). It is never a
+hand-rolled `rounded-lg bg-<role>/10` box.
+`variant`: `default`, `neutral` (the same quiet box, by name: a guardrail
+"not evaluated" outcome), `success`, `warning`, `info`, `destructive`. 14px
+corners (`rounded-xl`), like a popover. Every
+coloured variant is the same shape: `border-<role>/50 bg-<role>/10
+text-<role>`; `default` sits on `bg-background`. Icon first (a lucide icon,
+no classes: the Alert sizes it to 16px and colours it with the text), then
+`AlertTitle` and `AlertDescription`. The icon has its own column and sits
+centred on the text block, beside a single line, a wrapped paragraph or a
+title with its description. Every variant is
+`role="alert"` except `success`, which is `role="status"` so a confirmation
+is announced politely; pass `role` only to override that. Replaces the hand-rolled
+`rounded-lg border bg-amber-50 text-amber-800` boxes.
+
+A failed chat answer is an `Alert variant="destructive"` on the answer's
+`mr-5 ml-6` column: `CircleAlert`, the fixed title `conversation.failedTitle`,
+and the backend's error (often a raw provider exception) as `font-mono text-xs`
+detail in `AlertDescription`. Its action row is Retry (`RotateCcw`) and Copy,
+both `ghost-muted icon-sm pill` like every other answer action.
+
+The rows in an answer's step column (Sources, Reasoning, each tool step) are
+one recipe: `Button variant="ghost" size="sm"` at `ml-3.5 w-fit`, which puts a
+16px muted icon on the `ml-6` text column, then muted 14px text and a chevron.
+Sources adds its count and a right chevron, and opens the All sources sheet.
+
+### Breadcrumb (`ui/breadcrumb.tsx`)
+
+`BreadcrumbPage`, the current crumb, is always one line and truncates with
+an ellipsis. Pages pass only its width (`w-[16ch]`, `max-w-[32ch]`) and a
+`title` with the full text; never `truncate` or typography. Give every
+current crumb a width cap so a long name cannot push the row past the
+screen. A crumb that runs a handler instead of navigating is
+`BreadcrumbLink asChild` around a `<button type="button">`; the link carries
+the focus ring. The current crumb is never a disabled button. The path row above a
+source's file tree and chunk viewer is `components/tree/PathHeader`
+(back button, chevron crumbs, the last capped at `max-w-[32ch]`, actions on
+the right); don't hand-roll a `/`-separated path.
+
+### ListRow and DescriptionList (`ui/list-row.tsx`, `ui/description-list.tsx`)
+
+An identity row (avatar or icon square, a truncating title, one muted meta
+line, a trailing control) is `ListRow` inside `ListRows` (`divide-y
+divide-border`, no box of its own; wrap it in `Card padding="none"` or a
+bordered list for one). Rows are `px-4 py-3`, the title `text-sm
+font-medium`. `interactive` (with `asChild` around a `<Link>` or `<button>`)
+hovers to `bg-accent` and draws an inset focus ring. An icon square in
+`leading` is a plain `bg-muted text-muted-foreground size-8 rounded-md` span.
+
+Key/value rows are `DescriptionList` + `DescriptionItem`, never a hand-rolled
+`flex` of label and value. `layout="columns"` (default) is an 8rem label
+column beside the values (drawers, detail panels); `layout="justified"`
+right-aligns the values (a phone card; `columns={2}` for a stats dialog).
+`size` `sm | xs`; `mono` on an item for ids and URLs. Values wrap
+(`break-words`), they never run past the column.
+
+### Pagination (`ui/pagination.tsx`)
+
+The pager under a table, tile grid or list: "Page N of M" and four chevron
+`IconButton`s. `pageSize` adds the Rows per page select; `summary` puts a
+count on the left ("1,024 users"). `labels="text"` swaps the chevrons for
+Previous / Next buttons. Don't hand-roll a Previous / Next row.
+
+### Page chrome: SectionShell, PageToolbar, SearchInput
+
+Every section page (settings, admin, agents, teams) is wrapped in
+`navigation/SectionShell` (`width` `default` 6xl, `wide` 7xl for admin,
+`narrow` 5xl; `pills` for the phone destination pills); it draws the title and
+starts the content 32px below it, so pages carry no root `mt-*`. The block
+under the title is `components/PageToolbar`: `intro`, then the page `search`
+(left, `max-w-md`) and the page `action` (right, `Button size="field"
+shape="pill"`), then `divider` (a `Separator`). A page search is
+`components/SearchInput`: the 38px pill with a search icon and a floating
+`label`. The chunk viewer's and file tree's searches stay `CommandInput` in
+their frame, because their results are `CommandItem`s.
+
+### Grids
+
+Two recipes, no component. Tiles (sources, tools, custom models, agents):
+`grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`; tiles
+take the column width, never a fixed `w-[300px]`. Team cards stop at three
+columns (`lg:grid-cols-3`): their header row holds an initial, the name, a
+role badge and a chevron. Stat rows: `grid grid-cols-2 gap-4 md:grid-cols-4`
+(five tiles: `md:grid-cols-3 lg:grid-cols-5`; a dialog: `grid-cols-3`). A
+grid inside a Modal keeps its own column counts, because breakpoints follow
+the window, not the dialog.
+Skeleton mirrors follow the grid they stand in for.
+
+### Accordion (`ui/accordion.tsx`)
+
+`AccordionTrigger` carries its own inset and type (`px-4 py-3 text-sm
+font-medium`) and an inset focus ring, since `AccordionItem` clips anything
+outside it. Pages pass nothing to the trigger; put the frame (a bordered,
+rounded box) on a wrapper around `Accordion`.
+
+### Modal, not Dialog
+
+`ui/dialog.tsx` is the Radix primitive and is private to `ui/`; ESLint
+rejects imports of it elsewhere. App code uses `Modal` (sizes `sm` to
+`full`, `mobileVariant="sheet"`) or `CommandDialog`.
+
+The width comes from `size` only: `sm` 384, `md` 512 (the default), `lg` 672
+(a form or a one-column list: Move to folder, Upload), `xl` 896 (a grid of
+tiles or a wide editor: Add tool, Test retrieval, the prompt editor), `full`.
+Never add a width or height class. The dialog caps itself at `85dvh` and
+its body is the one scroller, so the header and footer stay put; don't cap
+the body with `contentClassName`. `contentClassName="overflow-visible"`
+(`!overflow-visible`) is only for a body whose popover must escape it (the
+prompt editor, Share conversation, Move to folder). `className` is placement
+only.
+
+A modal's body is `flex flex-col gap-5` when it stacks floating fields,
+with `gap-6` between labelled groups (a `SectionHeader size="xs"` and its
+fields); FormField supplies the 6px to its hint. The body carries no padding:
+Modal's scroll area already insets it (`px-1 pt-3 pb-0.5`) so focus rings
+aren't clipped. Never `space-y-*` on a body.
+
+A modal's heading is its `title` (20px, `text-xl leading-tight
+font-semibold`) and `description` (muted `text-sm`, 8px under the title).
+Don't pass `hideTitle` to draw your own `<h2>`; `hideTitle` is only for
+dialogs whose top line is not a title (Upload's step headings,
+ScheduleFormModal's editable name, the search palette). A step heading
+under a Back button uses the title's classes (`text-xl leading-tight
+font-semibold`), not a larger size.
+
+Buttons go in `footer`, never in `children`. The footer stacks full width on
+phones (primary on top) and sits in a right-aligned row from `sm` up. The
+standard pair is `footer={<ModalActions cancelLabel onCancel submitLabel
+onSubmit pending disabled destructive />}`: a ghost Cancel and a primary
+(or `destructive`) submit, both `size="lg" shape="pill"`; `pending` shows
+the submit's `loading` spinner. A left-hand extra (Test connection) is
+`footerStart`, and `submitProps` / `cancelProps` carry `type="submit"`,
+`form` or a test id. A lone button is a `size="lg" shape="pill"` Button.
+
+A search palette is `CommandDialog` on desktop. Pass cmdk options to its
+inner `Command` through `commandProps` (`shouldFilter={false}` when results
+come from a server search, a controlled `value`). On phones the same palette
+goes in `Modal mobileVariant="sheet"` as `<Command variant="palette">`, which
+gives it the dialog's 48px input row and row spacing, so both widths look
+the same (`modals/SearchConversationsModal.tsx`). `CommandDialog` sits on
+`DialogContent`, which has Modal's surface (`bg-card rounded-2xl
+shadow-modal`, no border, `p-8`, a 20px title, a `gap-3` footer, a left-aligned
+header, and the `flex-col max-h-[85dvh]` column whose body the caller makes the
+scroller) and the same blurred overlay. Modal, DialogContent and every Sheet share one scrim,
+`overlayScrim` in `lib/utils.ts` (`bg-black/25 backdrop-blur-xs
+dark:bg-black/50`).
+
+Every phone bottom sheet has one shape: `bg-card`, 16px top corners, no top
+border, at most 90% of the viewport, and bottom padding that clears the iPhone
+home indicator. `SheetContent side="bottom"` gives it with `pb-safe-0` (the
+bare inset); pass `handle` for the grab bar, which also hides the X (the handle and
+the overlay dismiss it; pass `showCloseButton` to keep one).
+`Modal mobileVariant="sheet"` shares the shape and the `SheetHandle`, with
+`pb-safe` (the inset, at least 1rem) under its footer. `pb-safe` and
+`pb-safe-0` are the `index.css` utilities for `env(safe-area-inset-bottom)`;
+never spell `env()` in a class.
+
+**Open question: side panel or right sheet for chat content.** Chat has two
+ways to show something beside an answer. Notes, todos and files open in
+`components/ArtifactSidebar`, a panel that takes a column and leaves the chat
+usable. An answer's full source list opens in a right `Sheet`, which blurs
+and blocks the chat, so the answer being checked is hidden while its sources
+are read. No rule picks between them yet. The leading proposal is one
+surface: content read alongside the chat (artifacts, sources, a cited
+source) opens in the side panel, with citation chips opening it at that
+source; overlays stay for tasks that interrupt (forms, confirmations,
+pickers); phones keep the bottom sheet. Until that is decided, don't add a
+third pattern: new "read beside the chat" content uses the side panel.
+
+In a picker list, mark the item that is currently chosen with
+`CommandItem checked` (a `secondary` brand tint through `data-checked`), not
+with `bg-accent`: cmdk's own `data-selected` highlight is `bg-accent` and
+follows the pointer and arrow keys, so an accent fill would look like hover.
+While a checked item is also highlighted it keeps its tint and text and gains
+a 1px inset `primary` ring, so the chosen row never turns plain grey.
+
+### ActionMenu (`ui/dropdown-menu.tsx`)
+
+The three-dots menu on a card, tile or row. Pass `options: MenuOption[]`
+(`label`, `onClick`, optional lucide `icon`, `variant: 'destructive'`,
+`disabled`) and a `triggerLabel`. It renders a `ghost-on-accent` `icon-xs`
+trigger with `EllipsisVertical`, and stops clicks and keys on the trigger and
+the menu from reaching the host, so it can sit inside a clickable card.
+`className` takes layout only (position, margin) and lands on the trigger;
+the menu is at least 144px wide and grows with its labels. `open`/`onOpenChange` make it controlled. Don't hand-build
+this menu from `DropdownMenu`, and don't declare a local option type.
+
+### Table, Label, dialog text
+
+Every table is `ui/table`; never a raw `<table>` or a table utility class (the
+chat's markdown tables are the one exception). The header row is dense by
+default (`px-2 py-1 text-sm font-normal text-foreground`, 28px, on
+`TableHead`'s sticky `bg-muted` strip). A `TableRow` hovers (`bg-accent`,
+pointer) only when it has an `onClick`; a read-only row does not. Use
+`TableContainer` for the bordered, scrolling frame; a table that already sits
+in a frame renders `Table` alone. `Table` keeps a 600px minimum so wide
+tables scroll sideways; a narrow one inside a panel passes
+`minWidth="min-w-0"`. A fixed icon column is `width="50px" align="center"`.
+`TableCell` and `TableHeader` accept typography and alignment classes and
+`text-muted-foreground` (RunLog's headers pass the eyebrow). `Label`, `DialogTitle`, `DialogDescription`,
+`SheetTitle` and `SheetDescription` accept typography plus
+`text-foreground` and `text-muted-foreground`. `DialogContent`,
+`PopoverContent`, `SheetContent`, `SheetHeader`, `SheetFooter`,
+`DropdownMenuContent`, `DropdownMenuSubContent`, `SelectContent`,
+`TooltipContent` and `Modal` accept `p-0` for edge-to-edge content; Modal
+merges it after its own `p-8`, so no `!` is needed. A modal that needs a
+full-bleed band under its title keeps the padding and bleeds the band out
+with negative margin (Move to folder's breadcrumb band). Everything else on these components is layout only.
+`MessageScrollerViewport` and `MessageScrollerContent` accept layout and
+spacing: the primitive measures Content's padding-block for its scroll and
+spacer math, and the Viewport's top gap must scroll with the messages, so
+padding there cannot move to a margin or a wrapper.
+
+## Spacing, type and radii
+
+Use the Tailwind scale. Tailwind v4 accepts fractional steps, so
+`h-10.5` is 42px and `ring-3` is a 3px ring; neither needs brackets. Layout
+values (`h-[calc(100dvh-64px)]`, `max-w-[520px]`) and motion values
+(`transition-[color,box-shadow]`, custom easings) are allowed. Font sizes,
+padding, colours and radii in brackets are not; pick the nearest scale step
+or add a token.
+
+### Typography roles
+
+- **Page title**: `SectionPageHeader` (24px bold); the only other text at
+  that size is a stat figure (`StatCard`).
+- **Title** of a dialog, sheet, drawer header or detail page: `text-xl
+leading-tight font-semibold`. `DialogTitle` and `SheetTitle` default to it;
+  `font-bold` is never a title weight. A picker popover's header is a
+  sub-heading, not a title.
+- **Section title**: `SectionHeader` (18px). **Sub-heading** inside a panel,
+  drawer or modal: `SectionHeader size="xs"` (14px semibold). **Eyebrow**
+  (anything set in caps): `SectionHeader size="sm"`; never `uppercase` on a
+  value (a variable name, a mode, an agent type).
+- **Tile text**: `CardTitle` + `CardDescription size="xs"` (see Card).
+- **Hint** under a control: FormField's `hint` (12px muted, 6px under the
+  field); a control with no FormField writes the same line as
+  `text-muted-foreground mt-1.5 text-xs`. Hints are muted, never a status
+  colour; a warning that needs attention is an `Alert`. **Description** under
+  a heading: `text-sm text-muted-foreground`.
+- **Markdown**: every renderer spreads `markdownHeadings` from
+  `lib/markdown.tsx` (h1 20px, h2 18px, h3 16px, semibold, `mt-4|3 mb-2`);
+  don't declare a local heading map.
+- **Mono**: ids, keys and code snippets are `font-mono text-xs`; code fields
+  (textareas) follow the field size; code blocks follow the Card recipe
+  (see Card). A preview of text a person or a model wrote (a trace's query
+  or output) stays proportional at the same size; only what the app
+  serialised (arguments, results, attributes) is mono. Every stat figure is
+  `tabular-nums`.
+
+### Rhythm
+
+32px between the page title and the content (`SectionShell`); 24px (`gap-6`)
+between sections inside a panel or drawer; 20px (`gap-5`) between floating
+fields; 8px (`gap-2`) in a button row, 12px (`gap-3`) in a modal footer. A
+two-up field grid is `grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2`. Stack
+with `flex flex-col gap-*`, not `space-y-*` (a child's own margin adds to a
+gap, so drop it).
+
+### Radius by role
+
+`rounded-xs` 2px, `rounded-sm` 6px, `rounded-md` 8px, `rounded-lg` 10px,
+`rounded-xl` 14px, `rounded-2xl` 18px (from `--radius`); bare `rounded` is a
+fixed 4px, so don't use it. Skeleton bars: the default. Tinted icon squares:
+`rounded-md` at `size-7|8`, `rounded-xl` at `size-12|14`, `rounded-2xl` at
+`size-20`. `rounded-full` only for avatars, status dots and the workflow
+palette pills.
+
+## Motion
+
+Transition only the property that changes: `transition-colors` by default,
+`transition-transform duration-200` for chevrons,
+`transition-[grid-template-rows,opacity] duration-300 ease-out` for
+collapsibles, `duration-300 ease-in-out` on the named property for the shell
+(sidebar, main column, top buttons); a shadow or ring change is
+`transition-shadow`, several at once a bare `transition`. No `transition-all`
+(the floating labels in `form-field.tsx` and `input.tsx`, which move and
+resize, are the exception) and no `hover:scale`: hover is a fill, border or
+text-colour change.
+
+New entrances are `animate-in fade-in duration-200 motion-reduce:animate-none`
+(`SectionRail`). Two chat timings are decided exceptions: the disclosure fade
+`animate-in fade-in duration-160 ease-out` and the answer bubble `animate-in
+fade-in slide-in-from-bottom-1.5 duration-260 ease-out`, both with
+`motion-reduce:animate-none`. `ui/` overlays keep their own enter and exit.
+
+## Breakpoints
+
+Phone / desktop is `lg` (1024px) in classes and `isDesktop` in JS
+(`useMediaQuery`); `sm` and `md` only reflow content. Wide two-column layouts
+that need more room (Analytics' chart rows, the agent form beside its preview)
+go two-up at `xl`. No custom breakpoints (`min-[…]`, `max-[…]`,
+`[@media(…)]`). The workflow builder needs `lg`; below it `MobileBlocker`
+shows.
+
+## Focus, elevation and stacking
+
+- **Focus ring**: `focus-visible:ring-3 focus-visible:ring-ring/50` plus
+  `focus-visible:border-ring` on fields. Never `focus:` (mouse users see it)
+  and never `ring-2` or `ring-[3px]`; the `ui/` components already carry it,
+  so plain elements should become components rather than copy the classes.
+  Inside `ui/`, spell it with the `focusRing` constant from `lib/utils.ts`
+  (with `invalidState` and `fieldFrame` for fields) rather than retyping it.
+- **Close buttons** on Modal, Sheet and DialogContent are a `ghost-muted`
+  `size="icon-sm"` Button (32px, accent square on hover) at `top-2 right-2`.
+- **Disabled**: buttons (Button, Accordion, Tabs) use
+  `disabled:pointer-events-none disabled:opacity-50`, so the pointer passes
+  through. Fields (Input, SelectTrigger, Switch, Textarea, CommandInput,
+  Label) use `disabled:cursor-not-allowed disabled:opacity-50` and never
+  `pointer-events-none`, which would hide the cursor.
+- **Elevation**: cards have no shadow; fields and outline buttons
+  `shadow-xs`; popovers, menus and select lists `shadow-md`; sheets
+  `shadow-lg`; modals (Modal and DialogContent) `shadow-modal`; toasts
+  `shadow-toast`. The one exception in `ui/` is the Switch thumb, `bg-white
+shadow-lg` in both themes: the knob is white on any track, and a white knob
+  on a white card needs the lift to read as raised. The off track is
+  `bg-input`. Accordions are
+  panels and have none. Outside `ui/` the only shadows are: the workflow
+  canvas nodes (`shadow-md`, `hover:shadow-lg`: a node lifts off the canvas
+  while you drag it); the workflow builder's node-settings panel and its
+  publish-error panel, which float over the canvas at popover elevation
+  (`shadow-md`, `z-20`); the chunk viewer's and file tree's search result
+  lists (`shadow-md`, in-page `z-20`, their results are `CommandItem`s inside
+  the search frame); and the Hero model picker's menu (an Approved
+  exception). Don't add new ones: a floating panel is a `Popover`,
+  `DropdownMenu` or `Modal`, which carry their own shadow and stacking; never
+  an `absolute` div with a shadow and a hand-picked `z-*`.
+- **Stacking**: `z-10` sticky headers and table heads inside a page;
+  `z-20` in-page floating chrome (banners, scroll-to-bottom, drag
+  handles); `z-50` overlays, modals, sheets and toasts; `z-200` every
+  portalled floating list (popover, menu, select, tooltip), so it opens above
+  a Modal without an override. Do not invent values in between.
+
+## Inline styles
+
+Allowed without comment in `src/components/MermaidRenderer.tsx` and
+`src/agents/workflow/nodes/**` (third-party renderers and canvas
+positions). Elsewhere, prefer a CSS custom property
+(`style={{ '--progress': pct }}` with `w-(--progress)`), and when a value
+truly is computed at runtime, keep the inline style and add
+`// eslint-disable-next-line shadcn/no-inline-styles -- <reason>`.
+
+## Approved exceptions
+
+Places where a rule is knowingly disabled. Each one carries the same reason
+as a comment at the call site; add a row here when you add a disable so the
+list stays reviewable.
+
+| Where                                                               | Rule                            | Why                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `components/Notification.tsx`                                       | `shadcn/no-restyle`             | The promo banner's close X (`ghost icon-xs`) sits on the purple gradient. Any fill would be a grey square on it, so hover dims the icon instead (`hover:bg-transparent hover:opacity-70`, plus `dark:hover:bg-transparent` to beat ghost's dark hover), and `text-primary-foreground` keeps it white, because the button inherits the page colour. One user, so it isn't a variant.                                                                                                             |
+| `components/ui/calendar.tsx`                                        | `shadcn/require-static-classes` | The day button merges `defaultClassNames.day`, which react-day-picker returns from `getDefaultClassNames()` at runtime; no static form exists.                                                                                                                                                                                                                                                                                                                                                  |
+| `navigation/SidebarLevel.tsx`                                       | `shadcn/no-arbitrary-values`    | The incoming sidebar panel casts a strong shadow off its left edge while it slides (`shadow-[-12px_0_24px_-6px_rgba(0,0,0,0.45)]`); no scale shadow is horizontal, and the container clips it once the panel comes to rest.                                                                                                                                                                                                                                                                     |
+| `components/MessageInput.tsx`                                       | `shadcn/no-restyle`             | The empty composer's send button is a grey circle (`bg-muted`, `dark:bg-accent`), not a faded brand one; no variant is neutral while disabled, and `secondary` is the brand-tinted pressed state.                                                                                                                                                                                                                                                                                               |
+| `Hero.tsx`                                                          | `shadcn/no-restyle`             | The landing page's model picker keeps its hero look: a borderless muted pill at 16px (`rounded-4xl px-6 py-4 text-base`) whose menu hangs from it as one shape. Three disables: `SelectTrigger`, `SelectContent`, `SelectItem`.                                                                                                                                                                                                                                                                 |
+| `agents/AgentsList.tsx`                                             | `shadcn/no-restyle`             | Inside a folder, the breadcrumb trail replaces the section `<h2>`, so its `BreadcrumbList` keeps heading typography (`text-foreground text-lg font-semibold gap-2`). It's the only breadcrumb that does.                                                                                                                                                                                                                                                                                        |
+| `conversation/MarkdownAnswer.tsx`, `components/ArtifactSidebar.tsx` | `shadcn/no-inline-styles`       | SyntaxHighlighter's `style` prop is its Prism theme object (`oneLight` / `vscDarkPlus`), picked by theme at runtime. It is not CSS, so no class or custom property can replace it. One disable per file.                                                                                                                                                                                                                                                                                        |
+| `agents/workflow/WorkflowPreview.tsx`                               | `shadcn/no-restyle`             | The Preview minimap's node rows are status tiles: the fill, border and ring follow the step (success, primary running + pulse, destructive, muted pending; a ring on the active row) and stay pinned on hover, pending and running rows stay unfaded while disabled, and clickable rows dim to 80% on hover. No Button variant is status-tinted. The rule reports each string inside `cn(...)`, so it's a `/* eslint-disable */` … `/* eslint-enable */` pair around the `className` attribute. |
+| `agents/schedules/ScheduleFormModal.tsx`                            | `shadcn/no-restyle`             | The schedule's name is the dialog's editable title: a `bare` Input with title type (`text-xl font-semibold`), so the dialog passes `hideTitle`. One disable.                                                                                                                                                                                                                                                                                                                                    |
+| `components/MermaidRenderer.tsx`                                    | `shadcn/no-restyle`             | The zoom − / + buttons sit on the diagram's `bg-black/70` overlay, where ghost's accent hover paints a light square with dark text; they hover to `white/20` with white text instead, in both themes. Two disables.                                                                                                                                                                                                                                                                             |
+| `Hero.tsx`                                                          | `shadcn/no-restyle`             | The landing page's demo cards are `Button outline lg pill`, but each is a two-line pill (a title over a clamped 12px query), so it undoes lg's height, the base's one-row layout, weight and nowrap: `h-auto w-full flex-col items-start gap-0 py-3.5 text-left text-xs font-normal whitespace-normal`. One disable (phase 7, 36a).                                                                                                                                                             |
+| `Navigation.tsx`, `conversation/ConversationTile.tsx`               | `shadcn/no-restyle`             | A sidebar row whose link has sibling buttons (an agent's pin, a conversation's menu and rename Save / Cancel) keeps its fill while the pointer is on a sibling or the menu is open (`group-hover:bg-sidebar-accent`, `bg-sidebar-accent`), and `pr-10` keeps the label clear of the buttons. ConversationTile's `cn(...)` needs a `/* eslint-disable */` … `/* eslint-enable */` pair.                                                                                                          |
+| `admin/Usage.tsx`                                                   | `shadcn/no-restyle`             | The Top users id is a `link inline` Button inside a mono table cell; it keeps the cell's type and wraps (`font-mono text-xs font-normal whitespace-normal text-left`). One disable.                                                                                                                                                                                                                                                                                                             |
+| `agents/workflow/WorkflowBuilder.tsx`                               | `shadcn/no-restyle`             | The "Learn more" links in the Set state and Condition nodes' 12px hints keep the sentence's size and weight (`text-xs font-normal` on `link inline`). Two disables.                                                                                                                                                                                                                                                                                                                             |
+| `components/MessageInput.tsx`                                       | `shadcn/no-restyle`             | The queued-send Cancel is a `link inline` inside the composer's 12px status line, so it takes the line's size (`text-xs`). One disable, beside the send button's.                                                                                                                                                                                                                                                                                                                               |
+| `settings/PersonalAccessTokens.tsx`                                 | `shadcn/no-restyle`             | Token scope chips are identifiers, so the `neutral` Badge is set in mono (`font-mono`). One disable.                                                                                                                                                                                                                                                                                                                                                                                            |
+| `settings/traces/TraceChips.tsx`                                    | `shadcn/no-restyle`             | Trace stat chips (durations, counts) use tabular figures so they don't jitter between rows (`tabular-nums` on Badge). One disable.                                                                                                                                                                                                                                                                                                                                                              |
+| `modals/MCPServerModal.tsx`                                         | `shadcn/no-restyle`             | The authorization link inside the test-result Alert keeps the Alert's status colour (`text-current` on `link inline`). One disable (phase 11, 63g).                                                                                                                                                                                                                                                                                                                                             |
+| `components/MermaidRenderer.tsx`                                    | `shadcn/no-restyle`             | The zoom readout between − and + is a `link inline` Button on the `bg-black/70` overlay; it keeps the overlay's white 12px regular text (`text-xs font-normal text-current`). One disable, beside the two zoom-button ones above (phase 11, 63g).                                                                                                                                                                                                                                               |
+| `conversation/SharedConversation.tsx`                               | `shadcn/no-restyle`             | The "DocsGPT" link sits in the `/share/:id` page's regular-weight byline (`font-normal`). One disable (phase 11, 63g).                                                                                                                                                                                                                                                                                                                                                                          |
+| `conversation/ConversationBubble.tsx`                               | `shadcn/no-restyle`             | A source card's URL row is a `link inline` around an `<a>`: foreground at rest, primary on hover, regular weight, truncating (`text-current font-normal hover:text-primary underline-offset-2 max-w-full justify-start`). One disable (phase 11, 63g).                                                                                                                                                                                                                                          |
+| `admin/Overview.tsx`                                                | `shadcn/no-restyle`             | "View in Audit" under the denied-sign-ins tile keeps the tile's destructive tone at hint size (`text-destructive text-xs font-normal`). One disable (phase 11, 63g).                                                                                                                                                                                                                                                                                                                            |
+| `settings/PairDeviceModal.tsx`                                      | `shadcn/no-restyle`             | The install link in Pair a remote machine sits in a 12px hint (`text-xs font-normal`, `self-start` in its column). One disable (phase 11, 63g).                                                                                                                                                                                                                                                                                                                                                 |
+| `agents/workflow/WorkflowBuilder.tsx`                               | `shadcn/no-restyle`             | The publish-error Alert floats over the canvas with its close button in the top-right corner, so it pads `pr-10` to keep a long title clear of the button. One disable.                                                                                                                                                                                                                                                                                                                         |
+
+Note that a multi-line reason has to be a `/* ... */` block comment;
+consecutive `//` lines only disable the next comment line, not the code.
+
+## Removed classes
+
+The lint reports classes Tailwind cannot generate; `no-unknown-classes` is at
+`error`, so none remain. For the record, they were bugs, not missing
+configuration:
+
+- `xs:` has never been a breakpoint here (not in the old Tailwind v3 config
+  either), so `xs:px-3`, `xs:text-xs` never applied. Remove them rather than
+  declaring the breakpoint, which would change layouts that were never seen.
+- `text-s`, `dark:text-gray`, `w-inherit` are typos for `text-sm`,
+  `dark:text-gray-*` and `w-[inherit]`.
+- `agents-container`, `conversations-container`, `loader` and `mermaid` are
+  unused hooks; nothing selects them. Before deleting a class like these,
+  grep for it in `querySelector` and `classList` calls too. `star` was
+  defined at runtime by a `<style>` element in `components/Notification.tsx`;
+  it is now the `notification-star` utility in `src/index.css`. `msc-spacer`
+  was a lookup hook for `ConversationMessages`' `querySelector`; the lookup
+  now uses the primitive's `[data-message-scroller-spacer]` attribute.
+
+## Live style guide
+
+`npm run dev`, then open `/design`. The page (`src/design/DesignSystem.tsx`)
+renders every `ui/` component with the variants above, shows the resolved
+value of each colour token and has a theme toggle. It is registered only
+when Vite runs in development mode, so it never ships. When you add a
+variant or token, add it there too.
+
+## Cleanup playbook
+
+Every `shadcn/*` rule is at `error`, and `lint-staged` runs the lint on
+staged files, so a violation blocks the commit. Work one file at a time and
+keep every step green.
+
+1. **See the state.** `npm run lint:design` prints warnings by rule and the
+   worst files. `npm run lint:design -- --file src/settings/Teams.tsx` lists
+   every warning in one file with the fix the message proposes;
+   `-- --rule no-raw-colors` lists files for one rule.
+2. **Pick a file, read it whole**, then fix all of its design warnings in
+   one pass. Map raw colours to tokens (table above), replace hand-rolled
+   boxes, pills, tiles, spinners and dropzones with the `ui/` components,
+   and move Button/Input/Select overrides onto `variant`, `size`, `shape`.
+   Delete the `dark:` twin of every class you tokenise. Remove classes the
+   lint calls unknown (`xs:*`, `text-s`, `dark:text-gray`, unused hooks).
+3. **Do not restyle `ui/` components from a page.** If a treatment is used
+   in more than one place and no variant fits, add the variant in the
+   component file, add it to `src/design/DesignSystem.tsx`, and document it
+   here. A one-off gets `// eslint-disable-next-line shadcn/<rule> -- reason`.
+4. **Keep behaviour identical.** Same DOM order, same handlers, same
+   translations (`t(...)` keys stay). Only classes and component choice
+   change. Prettier with the Tailwind plugin reorders classes; run
+   `npm run lint-fix` rather than fighting it.
+5. **Verify per file**: `npx eslint <file>` (zero `shadcn/*` warnings),
+   `npx tsc --noEmit -p tsconfig.json`, `npm test`, and look at the screen
+   in the running app (`npm run dev`, then the page that renders the file)
+   in both themes.
+
+Known traps:
+
+- `npm run lint` also reports 6 pre-existing Prettier errors (union-type
+  line breaks in `cronBuilder.ts`, `types/schedule.ts`, `types/workflow.ts`,
+  `api/client.ts`, `models/misc.ts`, `models/types.ts`) and about 330
+  TypeScript warnings unrelated to design; `npm run lint-fix` clears the
+  Prettier ones.
+- Port 5173 may be held by another checkout; check the Vite banner shows
+  this repo's path before trusting what you see.
+- `components/SkeletonLoader.tsx` renders `Skeleton` in its table, logs,
+  default and files layouts and its four tile mirrors (Card + bars). Its
+  analysis, dropdown, chunk-card and connected-state layouts still pulse their
+  own surface; move them onto Card + `Skeleton` the same way when you touch
+  them. (`agents/schedules/StatusBadge.tsx` is a status→variant map over
+  `Badge`, not a wrapper; keep it.)
+
+## Working with the lint
+
+```bash
+cd frontend && npm run lint
+```
+
+All `shadcn/*` rules are `error`. Add a variant or token only when a treatment
+is used in more than one place and none of the existing ones fits; a single
+special case gets a disable comment with a reason.
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 149980b5..b39ad5ae 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -1,10 +1,11 @@
-import js from '@eslint/js'
-import tsParser from '@typescript-eslint/parser'
-import tsPlugin from '@typescript-eslint/eslint-plugin'
-import react from 'eslint-plugin-react'
-import unusedImports from 'eslint-plugin-unused-imports'
-import prettier from 'eslint-plugin-prettier'
-import globals from 'globals'
+import js from '@eslint/js';
+import { plugin as shadcn } from '@shadcn/lint';
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import react from 'eslint-plugin-react';
+import unusedImports from 'eslint-plugin-unused-imports';
+import prettier from 'eslint-plugin-prettier';
+import globals from 'globals';
 
 export default [
   {
@@ -49,6 +50,7 @@ export default [
       react,
       'unused-imports': unusedImports,
       prettier,
+      shadcn,
     },
     rules: {
       ...js.configs.recommended.rules,
@@ -68,11 +70,251 @@ export default [
           endOfLine: 'auto',
         },
       ],
+      // The Radix Dialog wrapper is an internal primitive; app code uses
+      // <Modal> (or <CommandDialog>). Only src/components/ui may import it.
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['**/components/ui/dialog'],
+              message:
+                'Use <Modal> from @/components/ui/modal; the Dialog primitive is internal to ui/.',
+            },
+          ],
+        },
+      ],
+      // Design-system rules (@shadcn/lint). Tokens, variants and the
+      // approved exceptions are documented in DESIGN.md.
+      'shadcn/no-restyle': [
+        'error',
+        {
+          allow: ['layout'],
+          contracts: [
+            {
+              pattern: '^Button$',
+              allow: ['layout'],
+              message: {
+                shape:
+                  '"{{className}}" is not allowed on <Button>: use shape="pill" for round buttons. Other shapes need a new variant in {{file}}.',
+                spacing:
+                  '"{{className}}" is not allowed on <Button>: use a size ({{sizes}}). shape="pill" already widens the padding; put space around the button on the parent (gap) or as margin here.',
+                color:
+                  '"{{className}}" is not allowed on <Button>: use a variant ({{variants}}). Primary buttons already have white text; muted icon buttons are variant="ghost-muted"; bordered brand buttons are variant="outline-primary".',
+                typography:
+                  '"{{className}}" is not allowed on <Button>: size="xs" gives text-xs; the default size is text-sm. Add a size in {{file}} only if the design explicitly calls for one.',
+                default:
+                  '"{{className}}" is not allowed on <Button>: {{category}} belongs to the component. Use a variant ({{variants}}), a size ({{sizes}}) or a shape (default, pill). See DESIGN.md.',
+              },
+            },
+            {
+              pattern: '^Input$',
+              // font-mono: code fields (JSON, keys) keep a monospace face.
+              allow: [
+                'layout',
+                'text-left',
+                'text-center',
+                'text-right',
+                'font-mono',
+              ],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Input>: use size (default, sm, lg, field), shape (default, pill) and variant (default, bare, filled); alignment classes and font-mono are allowed. Add a variant in {{file}} only if the design explicitly calls for one.',
+              },
+            },
+            {
+              pattern: '^SelectTrigger$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <SelectTrigger>: use size (sm, default, field), variant (default, ghost) and shape (default, pill) from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Avatar$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Avatar>: use size (xs, sm, default, lg), shape (circle, square) and variant (primary, muted) from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Card$',
+              allow: ['layout', 'gap-*'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Card>: use variant (outline, filled, subtle), tone (destructive), padding (none, sm, default, lg) and interactive/selected from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Textarea$',
+              // font-mono: code editors (JSON schema, workflow code) keep a
+              // monospace face.
+              allow: [
+                'layout',
+                'text-left',
+                'text-center',
+                'text-right',
+                'font-mono',
+              ],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Textarea>: use size (sm, default, lg), resize (none, vertical, both) and variant (default, filled) from {{file}}; min-height and width are layout and allowed.',
+              },
+            },
+            {
+              pattern: '^Badge$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Badge>: use a variant ({{variants}}) from {{file}}.',
+              },
+            },
+            {
+              pattern: '^(Alert|AlertTitle|AlertDescription)$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <{{component}}>: use Alert variant (default, destructive, success, warning, info) from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Checkbox$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Checkbox>: use size from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Dropzone$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <Dropzone>: use size (default, compact); colours, border and radius follow the drag state in {{file}}.',
+              },
+            },
+            {
+              pattern: '^(Tabs|TabsList|TabsTrigger|TabsContent)$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <{{component}}>: use the variants in {{file}}.',
+              },
+            },
+            {
+              pattern: '^Command(Input|List|Item|Group|Empty)?$',
+              allow: ['layout'],
+              message: {
+                default:
+                  '"{{className}}" is not allowed on <{{component}}>: use the parts and the checked prop from {{file}}.',
+              },
+            },
+            {
+              pattern: '^Skeleton$',
+              allow: ['layout', 'rounded-*'],
+            },
+            {
+              pattern: '^Spinner$',
+              allow: ['layout', 'color'],
+            },
+            {
+              pattern: '^Progress$',
+              allow: ['layout'],
+            },
+            {
+              pattern: '^(Toast|ToastViewport)$',
+              allow: ['layout'],
+            },
+            {
+              pattern: '^(ToastContent|ToastItem|ToastFooter)$',
+              allow: ['layout', 'spacing'],
+            },
+            {
+              // The primitive measures Content's padding-block for its scroll
+              // math, and the Viewport's top gap must scroll with the
+              // messages, so padding here is part of the layout.
+              pattern: '^MessageScroller(Viewport|Content)$',
+              allow: ['layout', 'spacing'],
+            },
+            {
+              pattern: '^OptionCard$',
+              allow: ['layout'],
+            },
+            {
+              pattern: '^(CardHeader|CardContent|CardFooter|CardAction)$',
+              allow: ['layout', 'spacing', 'gap-*', 'bg-muted/*'],
+            },
+            {
+              pattern: '^(CardTitle|CardDescription)$',
+              allow: ['layout', 'typography', 'line-clamp-*'],
+            },
+            {
+              pattern: '^(TableCell|TableHeader)$',
+              allow: ['layout', 'typography', 'text-muted-foreground'],
+            },
+            {
+              pattern:
+                '^(Label|DialogTitle|DialogDescription|SheetTitle|SheetDescription)$',
+              allow: [
+                'layout',
+                'typography',
+                'text-muted-foreground',
+                'text-foreground',
+              ],
+            },
+            {
+              // Modal wraps DialogContent and merges className after its p-8.
+              pattern:
+                '^((Dialog|Popover|Sheet|DropdownMenu|DropdownMenuSub|Select|Tooltip)Content|Sheet(Header|Footer)|Modal)$',
+              allow: ['layout', 'p-0'],
+            },
+          ],
+        },
+      ],
+      'shadcn/no-raw-colors': [
+        'error',
+        {
+          message:
+            '"{{className}}" uses the raw Tailwind palette. Map it to a token from {{file}}: grey text -> text-foreground or text-muted-foreground; grey borders -> border-border; grey fills -> bg-muted, bg-accent or bg-card; red -> destructive; green -> success; amber, yellow and orange -> warning; blue -> info; purple -> primary. Soft badge or alert fills use bg-<token>/10 and a single class replaces the light+dark pair. Status pills should be <Badge variant="...">.',
+        },
+      ],
+      'shadcn/no-arbitrary-values': [
+        'error',
+        // Motion values (`transition-[color,box-shadow]`, custom easings)
+        // have no token scale; everything else must come from the theme.
+        { allow: ['layout', 'transition-*', 'ease-*'] },
+      ],
+      'shadcn/no-inline-styles': 'error',
+      'shadcn/no-unknown-classes': 'error',
+      'shadcn/require-static-classes': 'error',
     },
     settings: {
       react: {
         version: 'detect',
       },
+      shadcn: {
+        note: 'See frontend/DESIGN.md for tokens, component variants and approved exceptions.',
+      },
     },
   },
-]
+  {
+    // The design-system components define the styles; they are not restyled.
+    files: ['src/components/ui/**'],
+    rules: {
+      'shadcn/no-restyle': 'off',
+      'no-restricted-imports': 'off',
+    },
+  },
+  {
+    // Third-party renderers and canvas-positioned nodes take computed
+    // runtime values that Tailwind classes cannot express.
+    files: [
+      'src/components/MermaidRenderer.tsx',
+      'src/agents/workflow/nodes/**',
+    ],
+    rules: {
+      'shadcn/no-inline-styles': 'off',
+    },
+  },
+];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 41bb0bf8..aee05213 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,10 +8,6 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@radix-ui/react-accordion": "^1.2.12",
-        "@radix-ui/react-slot": "^1.3.3",
-        "@radix-ui/react-switch": "^1.3.7",
-        "@radix-ui/react-tabs": "^1.1.21",
         "@reduxjs/toolkit": "^2.12.0",
         "@shadcn/react": "^0.3.1",
         "chart.js": "^4.5.1",
@@ -20,13 +16,11 @@
         "cmdk": "^1.1.1",
         "copy-to-clipboard": "^4.0.2",
         "d3-force": "^3.0.0",
-        "date-fns": "^4.4.0",
         "i18next": "^26.4.2",
         "i18next-browser-languagedetector": "^8.2.1",
         "lodash": "^4.18.1",
         "lucide-react": "^1.45.0",
         "mermaid": "^12.0.0",
-        "prop-types": "^15.8.1",
         "radix-ui": "^1.6.7",
         "react": "^19.3.0",
         "react-chartjs-2": "^5.3.1",
@@ -48,6 +42,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.5",
+        "@shadcn/lint": "^0.2.0",
         "@tailwindcss/postcss": "^4.3.3",
         "@types/d3-force": "^3.0.10",
         "@types/lodash": "^4.17.25",
@@ -847,6 +842,329 @@
         "node": ">=22.12.0"
       }
     },
+    "node_modules/@oxc-parser/binding-android-arm-eabi": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm-eabi/-/binding-android-arm-eabi-0.148.0.tgz",
+      "integrity": "sha512-pHASv9g5pASxb7akHERZNSkrEqPhFaUix98o7d9hbTpolnnFWl7UiRrcMhCsV1+iVO4/cJwKsbKRJTFNs2tdBQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm64": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.148.0.tgz",
+      "integrity": "sha512-sg/6Ez0KdAygsu0POELux9wN1Po2CP93WY8eNl4DBKIGprsd4QSHBXOb471Pu9i2OCD5sLkISSb2agZEhVn2Zw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-arm64": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.148.0.tgz",
+      "integrity": "sha512-yiSJmzGUvCUaJT8X3j40gVcX+ckuHQMuiOtF8DvzTs5+JtB/7XuHFPp4M+vv5u+HlBtDUd4Ks5pyHpWz8mfnkg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-x64": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.148.0.tgz",
+      "integrity": "sha512-6ZeklaamrMy4H2JmhvcJg6iip59tYILtuLaILxyAHT3l5FDxnI5ihVievAft5ZmAbqtlWHErOi1OpJK8gy1wcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-freebsd-x64": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.148.0.tgz",
+      "integrity": "sha512-vFsPx+a/qFECPnz/H8nC6x6MDvnWscLTCo/5muojEF54ERUq1kdgbvnWo95YnkhjF9sTIcG/uDxQBh1gffaufQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.148.0.tgz",
+      "integrity": "sha512-eOr3M+6iGbbxNL4PSS0VtsyQ2eOUxSBh00BqO22SbolDimPSYsBuLr/LCrZBkiqW2BoabhR6V4R8jrRAay7hjg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.148.0.tgz",
+      "integrity": "sha512-58ZKDw0mQRbCNfrd2IDyV4o8T7enzGERJn41BH2tjrZVGyiKiFzcfDicuB7Zcpb/1xIOrObovr8Dja6lZi8dLw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-gnu": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.148.0.tgz",
+      "integrity": "sha512-Fnu95O4eZ5i++GPvIzBEZ8y4ddTLR+D9paYa8JRaRk6ZK7nHQiWP5xtrhcPQsXqgat1d7sU/d5rbbI0p1FTHSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-musl": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.148.0.tgz",
+      "integrity": "sha512-3CQy/BMdx7N7H3qrcPxUL+a2CwUZodUcf6oq8iJuNZ9C6Ol1aq3mcWzsgySJ7CHFLvpX21ZDPp1r1X0QLbu/AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-ppc64-gnu": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.148.0.tgz",
+      "integrity": "sha512-9LkaYvfiF8hMOw900csAvkf1oxE8XlmMeGowu5BcastSSwV8mKvKRMNU7HsV+ycyj1dQD8pX5qgOw8ja6SJacg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.148.0.tgz",
+      "integrity": "sha512-2GBiM9h26dR4WJfhoMvnFMnFLf7m/kYs4UMqjvrOfQG4BV1nuTJDH22Zc2MQr3INZF7nSKYQ6xlhD3hQ7A6gug==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-musl": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.148.0.tgz",
+      "integrity": "sha512-uPqZexvKJmEgq4mAu36qe2xTfXZE7oyik1R7KtZ5tl8qKlq1U1fIqTFRUEBZqRGvforoTrGIpatRzcoPKO66RA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-s390x-gnu": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.148.0.tgz",
+      "integrity": "sha512-9oUHvnTbp7ZraFsTC8PN6XhdhPSSxZumYvixWl7Smi353gEULvK6yV0sXNVrdFMHQeaDKFCi8TgDhNK7/A+Y+Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-gnu": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.148.0.tgz",
+      "integrity": "sha512-2qhDSJwKzbSZzF7lDqqk8sr/yXsmwr3PeUa4/nazIF+zFAYz1gVPEfC34GQtGxzJUUmklaYAL63368LEfrMeyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-musl": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.148.0.tgz",
+      "integrity": "sha512-qQoPDZUFV0bh9xA09XydmkjMBpgc1ukJuhMvzQ9QeVmFaHTS9W5TE5CoLmSl3QQyUP9OuHO3x/WPZTIIZPWR3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-openharmony-arm64": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-openharmony-arm64/-/binding-openharmony-arm64-0.148.0.tgz",
+      "integrity": "sha512-1UGbaQWEXUCLqAmaR5kwRDjx/R4S5LQKZkM9CHmaHkuKhriOF32aRLfS0jCRNE2yGQJLMEA1z9UucbBVqjXnDw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-arm64-msvc": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.148.0.tgz",
+      "integrity": "sha512-pWKdzRDNG2+NK4h/V6U/CYERcfYD6u28h5IB/VJVsrZaD3muvE58tUj22lieL5vLZ+XFi1GPv9YXckZbJZ9BLA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-ia32-msvc": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.148.0.tgz",
+      "integrity": "sha512-i3p4x+mvwtjcE1J5HM6V7ggsbXiznExN/4MkNyOy3dfXrVV3bnkSfmZxvo6/84qCVX4ShkpNE1SKt9biIF31GQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-x64-msvc": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.148.0.tgz",
+      "integrity": "sha512-Ye6vB7VQulghWYkYkECOBYFRVEizz4XyRTUAv+t8BuyurhKU7uD0P9eowL+mKG5Mf8MSYx+DI3Cm8SKZvYG7bQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
     "node_modules/@oxc-project/types": {
       "version": "0.149.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.149.0.tgz",
@@ -2786,6 +3104,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@shadcn/lint": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@shadcn/lint/-/lint-0.2.0.tgz",
+      "integrity": "sha512-DTYr427BR8cDc0J0Y++u1Uh12NAYGmdPiqgy4wKSogi7RNEhFanIcfBMPRPUvkunt9QiJUfI7B28TW39MrPCFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "cn": "0.3.2"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "optionalDependencies": {
+        "oxc-parser": "^0.148.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": ">=8.40.0",
+        "eslint": ">=9.30.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/parser": {
+          "optional": true
+        },
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@shadcn/react": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@shadcn/react/-/react-0.3.1.tgz",
@@ -3703,7 +4050,6 @@
       "version": "19.3.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
       "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3713,7 +4059,7 @@
       "version": "19.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
       "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.3.0"
@@ -4811,6 +5157,19 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/cn": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.3.2.tgz",
+      "integrity": "sha512-RKzY5Edavc8B2Ka6tjJecKFC4nm0p7lADY72xzICmiJSf4TkaxWXt0fHsib2P2G4FkFyXfSDi9oDtIBuCZvY2g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4938,7 +5297,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cytoscape": {
@@ -9848,6 +10206,55 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oxc-parser": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.148.0.tgz",
+      "integrity": "sha512-syxUKHeUll89RIABQADcI7sikYrwyssvA6gj4phSSIPezKVM8yMaLAiLLSc7fmzVvrwybfFGFbW5zme9sX87rg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@oxc-project/types": "^0.148.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      },
+      "optionalDependencies": {
+        "@oxc-parser/binding-android-arm-eabi": "0.148.0",
+        "@oxc-parser/binding-android-arm64": "0.148.0",
+        "@oxc-parser/binding-darwin-arm64": "0.148.0",
+        "@oxc-parser/binding-darwin-x64": "0.148.0",
+        "@oxc-parser/binding-freebsd-x64": "0.148.0",
+        "@oxc-parser/binding-linux-arm-gnueabihf": "0.148.0",
+        "@oxc-parser/binding-linux-arm-musleabihf": "0.148.0",
+        "@oxc-parser/binding-linux-arm64-gnu": "0.148.0",
+        "@oxc-parser/binding-linux-arm64-musl": "0.148.0",
+        "@oxc-parser/binding-linux-ppc64-gnu": "0.148.0",
+        "@oxc-parser/binding-linux-riscv64-gnu": "0.148.0",
+        "@oxc-parser/binding-linux-riscv64-musl": "0.148.0",
+        "@oxc-parser/binding-linux-s390x-gnu": "0.148.0",
+        "@oxc-parser/binding-linux-x64-gnu": "0.148.0",
+        "@oxc-parser/binding-linux-x64-musl": "0.148.0",
+        "@oxc-parser/binding-openharmony-arm64": "0.148.0",
+        "@oxc-parser/binding-win32-arm64-msvc": "0.148.0",
+        "@oxc-parser/binding-win32-ia32-msvc": "0.148.0",
+        "@oxc-parser/binding-win32-x64-msvc": "0.148.0"
+      }
+    },
+    "node_modules/oxc-parser/node_modules/@oxc-project/types": {
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.148.0.tgz",
+      "integrity": "sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -11746,7 +12153,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
diff --git a/frontend/package.json b/frontend/package.json
index 94a74649..81753fa8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "test:watch": "vitest",
     "lint": "eslint ./src --ext .jsx,.js,.ts,.tsx",
     "lint-fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --fix",
+    "lint:design": "eslint ./src -f json | node scripts/design-lint-report.mjs",
     "format": "prettier ./src --write",
     "prepare": "cd .. && husky install frontend/.husky"
   },
@@ -24,10 +25,6 @@
     ]
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
     "@reduxjs/toolkit": "^2.12.0",
     "@shadcn/react": "^0.3.1",
     "chart.js": "^4.5.1",
@@ -36,13 +33,11 @@
     "cmdk": "^1.1.1",
     "copy-to-clipboard": "^4.0.2",
     "d3-force": "^3.0.0",
-    "date-fns": "^4.4.0",
     "i18next": "^26.4.2",
     "i18next-browser-languagedetector": "^8.2.1",
     "lodash": "^4.18.1",
     "lucide-react": "^1.45.0",
     "mermaid": "^12.0.0",
-    "prop-types": "^15.8.1",
     "radix-ui": "^1.6.7",
     "react": "^19.3.0",
     "react-chartjs-2": "^5.3.1",
@@ -64,6 +59,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.5",
+    "@shadcn/lint": "^0.2.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/d3-force": "^3.0.10",
     "@types/lodash": "^4.17.25",
diff --git a/frontend/prettier.config.cjs b/frontend/prettier.config.cjs
index 8b38ecfa..b2e8451e 100644
--- a/frontend/prettier.config.cjs
+++ b/frontend/prettier.config.cjs
@@ -5,4 +5,5 @@ module.exports = {
   singleQuote: true,
   printWidth: 80,
   plugins: ['prettier-plugin-tailwindcss'],
+  tailwindFunctions: ['cn'],
 };
diff --git a/frontend/scripts/design-lint-report.mjs b/frontend/scripts/design-lint-report.mjs
new file mode 100644
index 00000000..b7d64e80
--- /dev/null
+++ b/frontend/scripts/design-lint-report.mjs
@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Summarise @shadcn/lint warnings from ESLint JSON output.
+ *
+ *   npm run lint:design              rules × counts, then the 25 worst files
+ *   npm run lint:design -- --rule no-raw-colors   files for one rule
+ *   npm run lint:design -- --file src/settings/Tools.tsx   every message in a file
+ *
+ * Reads ESLint's JSON from stdin; the npm script pipes it in.
+ */
+import { readFileSync } from 'node:fs';
+
+const args = process.argv.slice(2);
+const opt = (name) => {
+  const i = args.indexOf(name);
+  return i === -1 ? undefined : args[i + 1];
+};
+const onlyRule = opt('--rule');
+const onlyFile = opt('--file');
+
+const input = readFileSync(0, 'utf8');
+const start = input.indexOf('[');
+const results = JSON.parse(input.slice(start));
+
+const rows = [];
+for (const file of results) {
+  const rel = file.filePath.replace(`${process.cwd()}/`, '');
+  for (const m of file.messages) {
+    if (!m.ruleId?.startsWith('shadcn/')) continue;
+    rows.push({
+      file: rel,
+      rule: m.ruleId.slice(7),
+      line: m.line,
+      msg: m.message,
+    });
+  }
+}
+
+const count = (key) => {
+  const c = new Map();
+  for (const r of rows) c.set(r[key], (c.get(r[key]) ?? 0) + 1);
+  return [...c.entries()].sort((a, b) => b[1] - a[1]);
+};
+const pad = (s, n) => String(s).padStart(n);
+
+if (onlyFile) {
+  const mine = rows.filter(
+    (r) => r.file === onlyFile || r.file.endsWith(onlyFile),
+  );
+  console.log(`${mine.length} design warnings in ${onlyFile}\n`);
+  for (const r of mine.sort((a, b) => a.line - b.line)) {
+    console.log(
+      `${pad(r.line, 5)}  ${r.rule}\n       ${r.msg.split(' See frontend/DESIGN.md')[0]}\n`,
+    );
+  }
+} else if (onlyRule) {
+  const mine = rows.filter((r) => r.rule === onlyRule);
+  console.log(`${mine.length} warnings for shadcn/${onlyRule}\n`);
+  const byFile = new Map();
+  for (const r of mine) byFile.set(r.file, (byFile.get(r.file) ?? 0) + 1);
+  for (const [f, n] of [...byFile.entries()].sort((a, b) => b[1] - a[1]))
+    console.log(`${pad(n, 5)}  ${f}`);
+} else {
+  console.log(
+    `${rows.length} design warnings in ${new Set(rows.map((r) => r.file)).size} files\n`,
+  );
+  console.log('By rule:');
+  for (const [rule, n] of count('rule')) console.log(`${pad(n, 5)}  ${rule}`);
+  console.log('\nWorst files:');
+  for (const [file, n] of count('file').slice(0, 25))
+    console.log(`${pad(n, 5)}  ${file}`);
+  console.log(
+    '\nNext: npm run lint:design -- --file <path>   or   -- --rule <rule>',
+  );
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2772d157..10167400 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,20 +1,25 @@
 import { envVar } from '@/env';
 import './locale/i18n';
 
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
 
+import { cn } from '@/lib/utils';
+
 import Admin from './admin';
 import Agents from './agents';
 import SharedAgentGate from './agents/SharedAgentGate';
+import { selectWorkflowPreviewOpen } from './agents/workflow/workflowPreviewSlice';
 import DocsGPTMark from './assets/logo-b.svg';
 import DocsGPTMarkWhite from './assets/logo-w.svg';
 import ActionButtons from './components/ActionButtons';
 import AdminRoute from './components/AdminRoute';
 import ErrorBoundary from './components/ErrorBoundary';
-import Spinner from './components/Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
 import { Button } from './components/ui/button';
+import { ToastViewport } from './components/ui/toast';
 import UploadToast from './components/UploadToast';
 import Conversation from './conversation/Conversation';
 import { SharedConversation } from './conversation/SharedConversation';
@@ -26,11 +31,18 @@ import Navigation from './Navigation';
 import { getSectionForPath } from './navigation/sections';
 import { SidebarLevelProvider } from './navigation/SidebarLevelProvider';
 import PageNotFound from './PageNotFound';
+
+// Dev-only style guide (see frontend/DESIGN.md). The DEV guard around the
+// import lets the bundler drop the chunk from production builds entirely.
+const DesignSystem = import.meta.env.DEV
+  ? lazy(() => import('./design/DesignSystem'))
+  : null;
 import Setting from './settings';
 import Teams from './settings/Teams';
 import Notification from './components/Notification';
 import ToolApprovalToast from './notifications/ToolApprovalToast';
 import TeamNotificationToast from './notifications/TeamNotificationToast';
+import ActionToast from './notifications/ActionToast';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation();
@@ -58,13 +70,13 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
           alt="DocsGPT"
           className="h-14 w-auto"
         />
-        <p className="text-foreground max-w-md px-6 text-center text-sm dark:text-white">
+        <p className="text-foreground max-w-md px-6 text-center text-sm">
           {message}
         </p>
         <Button
           type="button"
           onClick={retryOidcLogin}
-          className="rounded-3xl px-5"
+          shape="pill"
           data-testid="oidc-signin"
         >
           {t('auth.signInWith', { provider: oidcProviderName || 'SSO' })}
@@ -73,23 +85,23 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
     );
   }
   if (isAuthLoading) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <Spinner />
-      </div>
-    );
+    return <LoadingState fill="screen" />;
   }
   return <EventStreamProvider>{children}</EventStreamProvider>;
 }
 
 function MainLayout() {
-  const { isMobile, isTablet } = useMediaQuery();
-  const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));
+  const { isMobile } = useMediaQuery();
+  const [navOpen, setNavOpen] = useState(!isMobile);
   const location = useLocation();
   // Settings and admin pages keep the profile menu but drop the chat actions:
   // the conversation now survives the trip, so "share" would target a chat
   // that isn't on screen.
   const inSection = Boolean(getSectionForPath(location.pathname));
+  // The workflow Preview drawer occupies the right edge; move the toast
+  // stack to the bottom-left while it's open so it stays visible without
+  // covering the drawer's attach/send controls.
+  const previewOpen = useSelector(selectWorkflowPreviewOpen);
 
   return (
     <SidebarLevelProvider>
@@ -97,11 +109,10 @@ function MainLayout() {
         <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
         <ActionButtons showNewChat={!inSection} showShare={!inSection} />
         <div
-          className={`h-[calc(100dvh-64px)] overflow-auto transition-all duration-300 ease-in-out lg:h-screen ${
-            !(isMobile || isTablet)
-              ? `${navOpen ? 'lg:ml-72' : 'lg:ml-14'}`
-              : 'ml-0 lg:ml-16'
-          }`}
+          className={cn(
+            'h-[calc(100dvh-64px)] overflow-auto transition-[margin] duration-300 ease-in-out lg:h-screen',
+            !isMobile ? (navOpen ? 'lg:ml-72' : 'lg:ml-14') : 'ml-0 lg:ml-16',
+          )}
         >
           {/* Contain route render crashes so navigation stays usable;
             keyed by path so the boundary resets when the user leaves. */}
@@ -109,9 +120,18 @@ function MainLayout() {
             <Outlet />
           </ErrorBoundary>
         </div>
-        <UploadToast />
-        <ToolApprovalToast />
-        <TeamNotificationToast />
+        {/* The one toast stack (and live region) for the app. Each toast
+          renders only its cards, top to bottom: team notifications, tool
+          approvals, uploads, action results. */}
+        <ToastViewport
+          className={cn(previewOpen && 'right-auto left-4')}
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <TeamNotificationToast />
+          <ToolApprovalToast />
+          <UploadToast />
+          <ActionToast />
+        </ToastViewport>
       </div>
     </SidebarLevelProvider>
   );
@@ -178,6 +198,16 @@ export default function App() {
         </Route>
         <Route path="/share/:identifier" element={<SharedConversation />} />
         <Route path="/shared/agent/:agentId" element={<SharedAgentGate />} />
+        {DesignSystem && (
+          <Route
+            path="/design"
+            element={
+              <Suspense fallback={null}>
+                <DesignSystem />
+              </Suspense>
+            }
+          />
+        )}
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
     </div>
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index acdd4648..bba6aebd 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -5,6 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import modelService from './api/services/modelService';
 import DocsGPTLogo from './assets/full-logo-b.svg';
 import DocsGPTLogoWhite from './assets/full-logo-w.svg';
+import { Button } from './components/ui/button';
+import { cn } from './lib/utils';
 import {
   Select,
   SelectContent,
@@ -25,6 +27,7 @@ import {
 import type { Model } from './models/types';
 
 function HeroModelSelect() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const selectedModel = useSelector(selectSelectedModel);
   const availableModels = useSelector(selectAvailableModels);
@@ -93,17 +96,27 @@ function HeroModelSelect() {
       disabled={!hasModels}
     >
       <SelectTrigger
-        className="bg-muted dark:bg-card text-foreground hover:bg-muted dark:hover:bg-card w-full justify-between rounded-4xl border-0 px-6 py-4 text-base shadow-none data-[state=open]:rounded-b-none"
-        size="lg"
+        /* eslint-disable-next-line shadcn/no-restyle --
+           The landing page's one focal control keeps its own look: a
+           borderless muted pill at 16px whose menu joins it (DESIGN.md,
+           Approved exceptions). */
+        className="bg-muted dark:bg-card text-foreground hover:bg-muted dark:hover:bg-card w-full justify-between rounded-4xl border-0 px-6 py-4 text-base shadow-none data-[state=open]:rounded-b-none md:text-base"
+        size="field"
       >
-        <SelectValue placeholder="Select Model" />
+        <SelectValue placeholder={t('conversation.selectModel')} />
       </SelectTrigger>
-      <SelectContent className="bg-muted dark:bg-card rounded-t-none rounded-b-4xl border-0 shadow-md data-[side=bottom]:translate-y-0">
+      <SelectContent
+        /* eslint-disable-next-line shadcn/no-restyle --
+           The hero picker's menu hangs from its trigger as one muted
+           shape (DESIGN.md, Approved exceptions). */
+        className="bg-muted dark:bg-card rounded-t-none rounded-b-4xl border-0 shadow-md data-[side=bottom]:translate-y-0"
+      >
         {hasModels ? (
           availableModels?.map((model: Model) => (
             <SelectItem
               key={model.id}
               value={model.id}
+              /* eslint-disable-next-line shadcn/no-restyle -- hero menu rows match its 16px trigger */
               className="px-5 py-3 text-base [&_[data-slot=select-item-indicator]]:right-5"
             >
               {model.display_name}
@@ -111,7 +124,7 @@ function HeroModelSelect() {
           ))
         ) : (
           <div className="text-muted-foreground px-5 py-3 text-base">
-            No models available
+            {t('agents.form.modelsPopup.noOptionsMessage')}
           </div>
         )}
       </SelectContent>
@@ -161,18 +174,29 @@ export default function Hero({
             (demo: { header: string; query: string }, key: number) =>
               demo.header &&
               demo.query && (
-                <button
+                <Button
                   key={key}
+                  type="button"
+                  variant="outline"
+                  size="lg"
+                  shape="pill"
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`border-border text-foreground hover:bg-muted dark:hover:bg-muted/50 bg-card w-full rounded-full border px-6 py-3.5 text-left transition-colors dark:bg-transparent ${key >= 2 ? 'hidden md:block' : ''}`}
+                  className={cn(
+                    /* eslint-disable-next-line shadcn/no-restyle --
+                       The demo card is a two-line pill (title over a clamped
+                       query at 12px), so it undoes lg's one-line height, the
+                       base's row layout, weight and nowrap. */
+                    'h-auto w-full flex-col items-start gap-0 py-3.5 text-left text-xs font-normal whitespace-normal',
+                    key >= 2 && 'hidden md:flex',
+                  )}
                 >
                   <p className="text-foreground mb-2 font-semibold">
                     {demo.header}
                   </p>
-                  <span className="line-clamp-2 text-gray-700 opacity-60 dark:text-gray-300">
+                  <span className="text-muted-foreground line-clamp-2">
                     {demo.query}
                   </span>
-                </button>
+                </Button>
               ),
           )}
         </div>
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 283026f3..d2e6146c 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -7,9 +7,11 @@ import {
   Menu,
   PanelLeftClose,
   PanelLeftOpen,
+  Pin,
+  PinOff,
   Plus,
-  Search as SearchIcon,
-  Settings as SettingsIcon,
+  Search,
+  Settings,
 } from 'lucide-react';
 
 import {
@@ -22,12 +24,11 @@ import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
 import Discord from './assets/discord.svg';
 import Github from './assets/git_nav.svg';
-import Pin from './assets/pin.svg';
 import { Avatar } from './components/ui/avatar';
 import { Button } from './components/ui/button';
-import Spinner from './components/Spinner';
+import { IconButton } from './components/ui/icon-button';
+import { LoadingState } from '@/components/ui/loading-state';
 import Twitter from './assets/TwitterX.svg';
-import UnPin from './assets/unpin.svg';
 import Help from './components/Help';
 import {
   handleAbort,
@@ -96,7 +97,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const selectedAgent = useSelector(selectSelectedAgent);
   const isAdmin = useSelector(selectIsAdmin);
 
-  const { isMobile, isTablet } = useMediaQuery();
+  const { isMobile } = useMediaQuery();
   const { showTokenModal, handleTokenSubmit } = useTokenAuth();
 
   // Section state is derived from the route, so deep links and the browser
@@ -143,7 +144,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       : t('navigation.backToApp');
 
   const exitSectionFrom = (section: Section | null) => () => {
-    if (isMobile || isTablet) setNavOpen(false);
+    if (isMobile) setNavOpen(false);
     goToLevel(section?.parentPath ?? lastAppPath.current ?? '/');
   };
 
@@ -153,7 +154,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     : t('navigation.backToApp');
 
   const closeNavOnMobile = () => {
-    if (isMobile || isTablet) setNavOpen(false);
+    if (isMobile) setNavOpen(false);
   };
 
   const [isDeletingConversation, setIsDeletingConversation] = useState(false);
@@ -168,7 +169,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       if (
         navRef.current &&
         !navRef.current.contains(event.target as Node) &&
-        (isMobile || isTablet) &&
+        isMobile &&
         navOpen
       ) {
         setNavOpen(false);
@@ -176,13 +177,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     }
 
     //event listener only for mobile/tablet when nav is open
-    if ((isMobile || isTablet) && navOpen) {
+    if (isMobile && navOpen) {
       document.addEventListener('mousedown', handleClickOutside);
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
       };
     }
-  }, [navOpen, isMobile, isTablet, setNavOpen]);
+  }, [navOpen, isMobile, setNavOpen]);
 
   useEffect(() => {
     function handleSearchShortcut(event: KeyboardEvent) {
@@ -275,7 +276,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const handleAgentClick = (agent: Agent) => {
     resetConversation();
     dispatch(setSelectedAgent(agent));
-    if (isMobile || isTablet) setNavOpen(!navOpen);
+    if (isMobile) setNavOpen(!navOpen);
     navigate(agent.id ? agentChatPath(agent.id) : '/c/new');
   };
 
@@ -380,12 +381,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   }
 
   useEffect(() => {
-    setNavOpen(!(isMobile || isTablet));
-  }, [isMobile, isTablet]);
+    setNavOpen(!isMobile);
+  }, [isMobile]);
 
   return (
     <>
-      {(isMobile || isTablet) && navOpen && (
+      {isMobile && navOpen && (
         <div
           className="fixed inset-0 z-10 bg-black opacity-50 transition-opacity duration-300"
           onClick={() => setNavOpen(false)}
@@ -393,21 +394,20 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       )}
 
       {/* Icon rail (desktop only, when sidebar collapsed) */}
-      {!navOpen && !isMobile && !isTablet && (
+      {!navOpen && !isMobile && (
         <div
           ref={navRef}
           className="bg-sidebar border-border scrollbar-overlay fixed top-0 left-0 z-10 hidden h-full w-14 flex-col items-center gap-2 overflow-x-hidden overflow-y-auto border-r py-3 lg:flex"
         >
-          <Button
-            type="button"
-            variant="ghost"
+          <IconButton
+            label={t('navigation.openSidebar')}
+            side="right"
+            variant="ghost-muted"
             size="icon"
             onClick={() => setNavOpen(true)}
-            aria-label="Open navigation menu"
-            className="text-muted-foreground hover:text-foreground"
           >
-            <PanelLeftOpen className="size-5" strokeWidth={1.75} />
-          </Button>
+            <PanelLeftOpen aria-hidden />
+          </IconButton>
           {activeSection ? (
             <SectionRail
               section={activeSection}
@@ -419,63 +419,59 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           ) : (
             <>
               {queries?.length > 0 && (
-                <Button
-                  type="button"
-                  variant="ghost"
+                <IconButton
+                  label={t('newChat')}
+                  side="right"
+                  variant="ghost-muted"
                   size="icon"
                   onClick={() => newChat()}
-                  aria-label="Start new chat"
-                  className="text-muted-foreground hover:text-foreground"
                 >
-                  <Plus className="size-5" strokeWidth={1.75} />
-                </Button>
+                  <Plus aria-hidden />
+                </IconButton>
               )}
-              <Button
-                type="button"
-                variant="ghost"
+              <IconButton
+                label={t('manageAgents')}
+                side="right"
+                variant="ghost-muted"
                 size="icon"
                 onClick={() => {
                   dispatch(setSelectedAgent(null));
                   goToLevel(AGENTS_MANAGE_ROOT);
                 }}
-                aria-label={t('manageAgents')}
-                className="text-muted-foreground hover:text-foreground"
               >
-                <LayoutGrid className="size-5" strokeWidth={1.75} />
-              </Button>
+                <LayoutGrid aria-hidden />
+              </IconButton>
               {conversations?.data && conversations.data.length > 0 && (
-                <Button
-                  type="button"
-                  variant="ghost"
+                <IconButton
+                  label={t('modals.searchConversations.searchPlaceholder')}
+                  side="right"
+                  variant="ghost-muted"
                   size="icon"
                   onClick={() => setSearchOpen(true)}
-                  aria-label={t('modals.searchConversations.searchPlaceholder')}
-                  title={t('modals.searchConversations.searchPlaceholder')}
-                  className="text-muted-foreground hover:text-foreground"
                 >
-                  <SearchIcon className="size-5" strokeWidth={1.75} />
-                </Button>
+                  <Search aria-hidden />
+                </IconButton>
               )}
               <div className="mt-auto flex flex-col items-center gap-2">
-                <Button
-                  type="button"
-                  variant="ghost"
+                <IconButton
+                  label={t('settings.label')}
+                  side="right"
+                  variant="ghost-muted"
                   size="icon"
                   onClick={() => goToLevel('/settings')}
-                  aria-label={t('settings.label')}
-                  className="text-muted-foreground hover:text-foreground"
                 >
-                  <SettingsIcon className="size-5" strokeWidth={1.75} />
-                </Button>
+                  <Settings aria-hidden />
+                </IconButton>
               </div>
             </>
           )}
         </div>
       )}
       <div
-        className={`${
-          !navOpen && '-ml-96 md:-ml-72'
-        } bg-sidebar dark:border-r-sidebar-border fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-300 ease-in-out dark:text-white`}
+        className={cn(
+          'bg-sidebar text-foreground fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-[margin] duration-300 ease-in-out',
+          !navOpen && '-ml-96 md:-ml-72',
+        )}
       >
         <div
           className={
@@ -485,34 +481,32 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <div className="min-w-0 flex-1">
             <TeamSwitcher
               onNavigate={() => {
-                if (isMobile || isTablet) {
+                if (isMobile) {
                   setNavOpen(false);
                 }
               }}
             />
           </div>
-          <Button
-            type="button"
-            variant="ghost"
+          <IconButton
+            label={
+              navOpen
+                ? t('navigation.closeSidebar')
+                : t('navigation.openSidebar')
+            }
+            side="bottom"
+            variant="ghost-muted"
             size="icon"
-            className="text-muted-foreground hover:text-foreground shrink-0"
+            className="shrink-0"
             onClick={() => {
               setNavOpen(!navOpen);
             }}
-            aria-label={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {navOpen ? (
-              <PanelLeftClose
-                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
-                strokeWidth={1.75}
-              />
+              <PanelLeftClose aria-hidden />
             ) : (
-              <PanelLeftOpen
-                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
-                strokeWidth={1.75}
-              />
+              <PanelLeftOpen aria-hidden />
             )}
-          </Button>
+          </IconButton>
         </div>
         {/* The chat list and the section nav swap places here. Both stay
             mounted so the conversation list keeps its scroll position while
@@ -522,21 +516,21 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <NavLink
               to={'/c/new'}
               onClick={() => {
-                if (isMobile || isTablet) {
+                if (isMobile) {
                   setNavOpen(!navOpen);
                 }
                 resetConversation();
               }}
               className={({ isActive }) =>
-                `${
-                  isActive ? 'bg-transparent' : ''
-                } group border-sidebar-border hover:border-sidebar-border sticky mx-4 mt-4 flex cursor-pointer items-center gap-2.5 rounded-3xl border p-3 hover:bg-transparent dark:text-white`
+                cn(
+                  'group border-sidebar-border hover:border-sidebar-border sticky mx-4 mt-4 flex cursor-pointer items-center gap-2.5 rounded-3xl border p-3 hover:bg-transparent',
+                  isActive && 'bg-transparent',
+                )
               }
             >
               <Plus
                 className="text-muted-foreground group-hover:text-foreground size-5 shrink-0"
-                strokeWidth={1.75}
-                aria-label="Create new chat"
+                aria-hidden
               />
               <p className="text-muted-foreground group-hover:text-foreground text-sm">
                 {t('newChat')}
@@ -544,16 +538,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </NavLink>
             <div
               id="conversationsMainDiv"
-              className="scrollbar-overlay min-h-0 flex-1 overflow-x-hidden overflow-y-auto dark:text-white"
+              className="scrollbar-overlay min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
             >
               {conversations?.loading && !isDeletingConversation && (
-                <div
-                  className="text-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform dark:text-white"
-                  role="status"
-                  aria-label="Loading conversations"
-                >
-                  <Spinner size="small" />
-                </div>
+                <LoadingState
+                  fill="parent"
+                  size="sm"
+                  className="pointer-events-none absolute inset-0"
+                />
               )}
               {recentAgents?.length > 0 ? (
                 <div>
@@ -562,112 +554,126 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                       {t('navigation.agents')}
                     </p>
                   </div>
-                  <div className="agents-container">
+                  <div>
                     <div>
-                      {recentAgents.map((agent, idx) => (
-                        <div
-                          key={idx}
-                          className={`group hover:bg-sidebar-accent mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 ${
-                            agent.id === selectedAgent?.id && !conversationId
-                              ? 'bg-sidebar-accent'
-                              : ''
-                          }`}
-                          onClick={() => handleAgentClick(agent)}
-                        >
-                          <div className="flex items-center gap-2">
-                            <div className="flex w-6 justify-center">
-                              <Avatar
-                                src={agent.image}
-                                alt="agent-logo"
-                                imgClassName="h-6 w-6 rounded-full object-contain"
+                      {recentAgents.map((agent, idx) => {
+                        const isCurrent =
+                          agent.id === selectedAgent?.id && !conversationId;
+                        return (
+                          <div key={idx} className="group relative mx-4 mt-4">
+                            <Button
+                              variant="sidebar-item"
+                              asChild
+                              /* eslint-disable-next-line shadcn/no-restyle -- the link and its pin button are siblings, so the row keeps its fill while the pointer is on the pin, and pr-10 keeps the name clear of it */
+                              className="group-hover:bg-sidebar-accent flex w-full pr-10"
+                            >
+                              <Link
+                                to={
+                                  agent.id ? agentChatPath(agent.id) : '/c/new'
+                                }
+                                aria-current={isCurrent ? 'page' : undefined}
+                                onClick={(event) => {
+                                  if (
+                                    event.metaKey ||
+                                    event.ctrlKey ||
+                                    event.shiftKey
+                                  )
+                                    return;
+                                  event.preventDefault();
+                                  handleAgentClick(agent);
+                                }}
+                              >
+                                <div className="flex w-6 shrink-0 justify-center">
+                                  <Avatar
+                                    src={agent.image}
+                                    alt=""
+                                    shape="circle"
+                                    className="overflow-hidden"
+                                    imgClassName="size-6 object-contain"
+                                  />
+                                </div>
+                                <span className="truncate">{agent.name}</span>
+                              </Link>
+                            </Button>
+                            <div
+                              className={cn(
+                                'absolute top-1 right-1.5 flex items-center',
+                                !isMobile &&
+                                  'invisible group-focus-within:visible group-hover:visible',
+                              )}
+                            >
+                              <IconButton
+                                label={
+                                  agent.pinned
+                                    ? t('agents.card.unpin')
+                                    : t('agents.card.pin')
+                                }
+                                icon={agent.pinned ? PinOff : Pin}
+                                variant="ghost-on-accent"
+                                size="icon-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleTogglePin(agent);
+                                }}
                               />
                             </div>
-                            <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
-                              {agent.name}
-                            </p>
                           </div>
-                          <div
-                            className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
-                          >
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon-sm"
-                              className="h-auto w-auto rounded-full p-0 hover:bg-transparent hover:opacity-75"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleTogglePin(agent);
-                              }}
-                              aria-label={
-                                agent.pinned ? 'Unpin agent' : 'Pin agent'
-                              }
-                            >
-                              <img
-                                src={agent.pinned ? UnPin : Pin}
-                                className="h-4 w-4"
-                              ></img>
-                            </Button>
-                          </div>
-                        </div>
-                      ))}
+                        );
+                      })}
                     </div>
-                    <NavLink
-                      to={AGENTS_MANAGE_ROOT}
-                      end
-                      onClick={(event) => {
-                        if (event.metaKey || event.ctrlKey || event.shiftKey)
-                          return;
-                        event.preventDefault();
-                        dispatch(setSelectedAgent(null));
-                        closeNavOnMobile();
-                        goToLevel(AGENTS_MANAGE_ROOT);
-                      }}
-                      className={({ isActive }) =>
-                        `hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 ${
-                          isActive ? 'bg-sidebar-accent' : ''
-                        }`
-                      }
+                    <Button
+                      variant="sidebar-item"
+                      asChild
+                      className="mx-4 my-auto mt-2 flex"
                     >
-                      <div className="flex w-6 justify-center">
-                        <LayoutGrid
-                          className="text-muted-foreground size-5"
-                          strokeWidth={1.75}
-                          aria-label="manage-agents"
-                        />
-                      </div>
-                      <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
-                        {t('manageAgents')}
-                      </p>
-                    </NavLink>
+                      <NavLink
+                        to={AGENTS_MANAGE_ROOT}
+                        end
+                        onClick={(event) => {
+                          if (event.metaKey || event.ctrlKey || event.shiftKey)
+                            return;
+                          event.preventDefault();
+                          dispatch(setSelectedAgent(null));
+                          closeNavOnMobile();
+                          goToLevel(AGENTS_MANAGE_ROOT);
+                        }}
+                      >
+                        <div className="flex w-6 justify-center">
+                          <LayoutGrid
+                            className="text-muted-foreground size-5"
+                            aria-hidden
+                          />
+                        </div>
+                        <span className="truncate">{t('manageAgents')}</span>
+                      </NavLink>
+                    </Button>
                   </div>
                 </div>
               ) : (
-                <NavLink
-                  to={AGENTS_MANAGE_ROOT}
-                  end
-                  onClick={(event) => {
-                    if (event.metaKey || event.ctrlKey || event.shiftKey)
-                      return;
-                    event.preventDefault();
-                    closeNavOnMobile();
-                    dispatch(setSelectedAgent(null));
-                    goToLevel(AGENTS_MANAGE_ROOT);
-                  }}
-                  className={({ isActive }) =>
-                    `hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3 ${
-                      isActive ? 'bg-sidebar-accent' : ''
-                    }`
-                  }
+                <Button
+                  variant="sidebar-item"
+                  asChild
+                  className="mx-4 my-auto mt-2 flex"
                 >
-                  <LayoutGrid
-                    className="text-muted-foreground size-5 shrink-0"
-                    strokeWidth={1.75}
-                    aria-label="manage-agents"
-                  />
-                  <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
-                    {t('manageAgents')}
-                  </p>
-                </NavLink>
+                  <NavLink
+                    to={AGENTS_MANAGE_ROOT}
+                    end
+                    onClick={(event) => {
+                      if (event.metaKey || event.ctrlKey || event.shiftKey)
+                        return;
+                      event.preventDefault();
+                      closeNavOnMobile();
+                      dispatch(setSelectedAgent(null));
+                      goToLevel(AGENTS_MANAGE_ROOT);
+                    }}
+                  >
+                    <LayoutGrid
+                      className="text-muted-foreground size-5 shrink-0"
+                      aria-hidden
+                    />
+                    <span className="truncate">{t('manageAgents')}</span>
+                  </NavLink>
+                </Button>
               )}
               {conversations?.data && conversations.data.length > 0 ? (
                 <div className="mt-7">
@@ -675,25 +681,18 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     <p className="mt-1 ml-4 text-sm font-semibold">
                       {t('chats')}
                     </p>
-                    <Button
-                      type="button"
-                      variant="ghost"
+                    <IconButton
+                      label={t('modals.searchConversations.searchPlaceholder')}
+                      variant="ghost-muted"
                       size="icon"
+                      shape="pill"
                       onClick={() => setSearchOpen(true)}
-                      className="text-muted-foreground hover:text-foreground hover:bg-sidebar-accent mr-1 rounded-full"
-                      aria-label={t(
-                        'modals.searchConversations.searchPlaceholder',
-                      )}
-                      title={t('modals.searchConversations.searchPlaceholder')}
+                      className="mr-1"
                     >
-                      <SearchIcon
-                        className="size-5"
-                        strokeWidth={1.75}
-                        aria-label="search"
-                      />
-                    </Button>
+                      <Search aria-hidden />
+                    </IconButton>
                   </div>
-                  <div className="conversations-container">
+                  <div>
                     {(conversations.data ?? []).map((conversation) => (
                       <ConversationTile
                         key={conversation.id}
@@ -752,38 +751,40 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             )}
           </SidebarLevel>
         </div>
-        <div className="text-foreground flex h-auto shrink-0 flex-col justify-end dark:text-white">
+        <div className="text-foreground flex h-auto shrink-0 flex-col justify-end">
           {/* Inside a section its own nav is the way around, so this entry
               would only duplicate what is already on screen. Entering settings
               no longer clears the conversation either, so the section's back
               button can return to it. */}
           <div
             className={cn(
-              'dark:border-b-sidebar-border flex flex-col gap-2 border-b py-2',
+              'flex flex-col gap-2 border-b py-2',
               inSection && 'hidden',
             )}
           >
-            <Link
-              to="/settings"
-              onClick={(event) => {
-                if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-                event.preventDefault();
-                closeNavOnMobile();
-                goToLevel('/settings');
-              }}
-              className="hover:bg-sidebar-accent mx-4 my-auto flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3"
+            <Button
+              variant="sidebar-item"
+              asChild
+              className="mx-4 my-auto flex"
             >
-              <SettingsIcon
-                className="text-muted-foreground size-5 shrink-0"
-                strokeWidth={1.75}
-                aria-label="Settings"
-              />
-              <p className="text-foreground text-sm dark:text-white">
-                {t('settings.label')}
-              </p>
-            </Link>
+              <Link
+                to="/settings"
+                onClick={(event) => {
+                  if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+                  event.preventDefault();
+                  closeNavOnMobile();
+                  goToLevel('/settings');
+                }}
+              >
+                <Settings
+                  className="text-muted-foreground size-5 shrink-0"
+                  aria-hidden
+                />
+                <p className="text-foreground text-sm">{t('settings.label')}</p>
+              </Link>
+            </Button>
           </div>
-          <div className="text-foreground flex flex-col justify-end dark:text-white">
+          <div className="text-foreground flex flex-col justify-end">
             <div className="flex items-center justify-between py-1">
               <Help />
 
@@ -797,7 +798,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     src={Discord}
                     width={24}
                     height={24}
-                    alt="Join Discord community"
+                    alt={t('navigation.social.discord')}
                     className="m-2 w-6 self-center filter dark:invert"
                   />
                 </NavLink>
@@ -810,7 +811,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                     src={Twitter}
                     width={20}
                     height={20}
-                    alt="Follow us on X"
+                    alt={t('navigation.social.x')}
                     className="m-2 self-center filter dark:invert"
                   />
                 </NavLink>
@@ -821,7 +822,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 >
                   <img
                     src={Github}
-                    alt="View on GitHub"
+                    alt={t('navigation.social.github')}
                     width={28}
                     height={28}
                     className="m-2 self-center filter dark:invert"
@@ -832,18 +833,18 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="dark:border-b-sidebar-border bg-sidebar sticky z-10 h-16 w-full border-b-2 lg:hidden">
+      <div className="bg-sidebar sticky z-10 h-16 w-full border-b-2 lg:hidden">
         <div className="relative flex h-full items-center">
-          <Button
-            type="button"
-            variant="ghost"
+          <IconButton
+            label={t('navigation.openSidebar')}
+            side="bottom"
+            variant="ghost-muted"
             size="icon"
-            className="text-muted-foreground hover:text-foreground ml-4 size-9 lg:hidden"
+            className="ml-4 lg:hidden"
             onClick={() => setNavOpen(true)}
-            aria-label="Toggle mobile menu"
           >
-            <Menu className="size-5" strokeWidth={1.75} />
-          </Button>
+            <Menu aria-hidden />
+          </IconButton>
         </div>
       </div>
       <ConfirmationModal
@@ -852,7 +853,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         setModalState={(state) => dispatch(setModalStateDeleteConv(state))}
         submitLabel={t('modals.deleteConv.delete')}
         handleSubmit={handleDeleteAllConversations}
-        variant="danger"
+        variant="destructive"
       />
       {uploadModalState === 'ACTIVE' && (
         <Upload
@@ -874,7 +875,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           token={token}
           onSelectConversation={(id) => {
             handleConversationClick(id);
-            if (isMobile || isTablet) setNavOpen(false);
+            if (isMobile) setNavOpen(false);
           }}
         />
       )}
diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
index 06cf1cc7..d87bab31 100644
--- a/frontend/src/PageNotFound.tsx
+++ b/frontend/src/PageNotFound.tsx
@@ -6,16 +6,16 @@ export default function PageNotFound() {
 
   return (
     <div className="bg-background grid min-h-screen">
-      <p className="text-foreground dark:bg-card mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16">
-        <h1>{t('pageNotFound.title')}</h1>
+      <div className="text-foreground bg-muted mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl p-6 lg:p-10 xl:p-16">
+        <h1 className="text-3xl">{t('pageNotFound.title')}</h1>
         <p>{t('pageNotFound.message')}</p>
         <Link
           to="/"
-          className="bg-primary hover:bg-primary/90 mr-4 inline-flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-white transition-colors duration-100"
+          className="bg-primary hover:bg-primary/90 text-primary-foreground mr-4 inline-flex cursor-pointer items-center justify-center rounded-full px-4 py-2 transition-colors duration-100"
         >
           {t('pageNotFound.goHome')}
         </Link>
-      </p>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/admin/Activity.tsx b/frontend/src/admin/Activity.tsx
index c5494635..28f75c0d 100644
--- a/frontend/src/admin/Activity.tsx
+++ b/frontend/src/admin/Activity.tsx
@@ -6,8 +6,15 @@ import { useSearchParams } from 'react-router-dom';
 import adminService, {
   type ActivityFilters,
 } from '../api/services/adminService';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
+import { IconButton } from '../components/ui/icon-button';
+import SearchInput from '../components/SearchInput';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../components/ui/description-list';
+import { LoadingState } from '../components/ui/loading-state';
 import { MultiSelect } from '../components/ui/multi-select';
 import {
   Table,
@@ -18,10 +25,11 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui/table';
+import { Pagination } from '../components/ui/pagination';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group';
 import { selectToken } from '../preferences/preferenceSlice';
 import {
-  Loading,
-  Pill,
+  LoadError,
   categoryTone,
   eventLabel,
   eventTone,
@@ -32,6 +40,7 @@ import {
   outcomeLabel,
   outcomeTone,
 } from './AdminUI';
+import { cn } from '@/lib/utils';
 
 type ActivityRow = {
   feed: string;
@@ -75,10 +84,9 @@ function DetailRow({ label, value }: { label: string; value: unknown }) {
       ? JSON.stringify(value)
       : String(value);
   return (
-    <div className="flex gap-2 text-[13px] break-all">
-      <span className="text-muted-foreground min-w-32 shrink-0">{label}</span>
-      <span className="font-mono">{text}</span>
-    </div>
+    <DescriptionItem label={label} mono>
+      {text}
+    </DescriptionItem>
   );
 }
 
@@ -91,24 +99,28 @@ function RowDetail({ row }: { row: ActivityRow }) {
   const detail = row.detail ?? {};
   const entries = Object.entries(detail);
   return (
-    <div className="bg-muted/40 space-y-1 rounded-lg px-4 py-3">
-      <DetailRow label="Event" value={row.event} />
-      <DetailRow label="Journal" value={row.feed} />
-      {row.actor_id ? <DetailRow label="Actor" value={row.actor_id} /> : null}
-      {row.target_id ? (
-        <DetailRow label="Affected user" value={row.target_id} />
-      ) : null}
-      {row.outcome ? <DetailRow label="Outcome" value={row.outcome} /> : null}
-      {row.ip ? <DetailRow label="IP" value={row.ip} /> : null}
-      {row.user_agent ? (
-        <DetailRow label="User agent" value={row.user_agent} />
-      ) : null}
-      <DetailRow label="Recorded" value={fmtDate(row.created_at)} />
+    <div className="bg-muted rounded-lg px-4 py-3">
+      <DescriptionList layout="columns" size="xs">
+        <DetailRow label="Event" value={row.event} />
+        <DetailRow label="Journal" value={row.feed} />
+        {row.actor_id ? <DetailRow label="Actor" value={row.actor_id} /> : null}
+        {row.target_id ? (
+          <DetailRow label="Affected user" value={row.target_id} />
+        ) : null}
+        {row.outcome ? <DetailRow label="Outcome" value={row.outcome} /> : null}
+        {row.ip ? <DetailRow label="IP" value={row.ip} /> : null}
+        {row.user_agent ? (
+          <DetailRow label="User agent" value={row.user_agent} />
+        ) : null}
+        <DetailRow label="Recorded" value={fmtDate(row.created_at)} />
+      </DescriptionList>
       {entries.length > 0 ? (
-        <div className="border-border mt-2 space-y-1 border-t pt-2">
-          {entries.map(([key, value]) => (
-            <DetailRow key={key} label={key} value={value} />
-          ))}
+        <div className="border-border mt-2 border-t pt-2">
+          <DescriptionList layout="columns" size="xs">
+            {entries.map(([key, value]) => (
+              <DetailRow key={key} label={key} value={value} />
+            ))}
+          </DescriptionList>
         </div>
       ) : null}
     </div>
@@ -126,6 +138,7 @@ export default function Activity() {
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
   const [expanded, setExpanded] = useState<string | null>(null);
   const [exporting, setExporting] = useState(false);
   const [catalogue, setCatalogue] = useState<Catalogue | null>(null);
@@ -183,6 +196,7 @@ export default function Activity() {
   const load = useCallback(async () => {
     const id = ++requestId.current;
     setLoading(true);
+    setFailed(false);
     try {
       const res = await adminService.getActivity(
         { ...filters, page, page_size: PAGE_SIZE },
@@ -192,6 +206,9 @@ export default function Activity() {
       if (id !== requestId.current) return;
       setRows(json.activity ?? []);
       setTotal(json.total ?? 0);
+      setFailed(!res.ok || json.success === false);
+    } catch {
+      if (id === requestId.current) setFailed(true);
     } finally {
       if (id === requestId.current) setLoading(false);
     }
@@ -244,16 +261,17 @@ export default function Activity() {
   const applySearch = () => withPageReset(setSearch)(searchDraft.trim());
 
   return (
-    <div className="mt-6">
+    <div>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <Input
-          placeholder="Search user, IP or detail"
-          value={searchDraft}
-          onChange={(e) => setSearchDraft(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && applySearch()}
-          onBlur={applySearch}
-          className="max-w-xs"
-        />
+        <div className="w-full max-w-xs">
+          <SearchInput
+            label="Search user, IP or detail"
+            value={searchDraft}
+            onChange={(e) => setSearchDraft(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && applySearch()}
+            onBlur={applySearch}
+          />
+        </div>
         <MultiSelect
           options={categoryOptions}
           selected={categories}
@@ -269,19 +287,21 @@ export default function Activity() {
           searchPlaceholder="Find an event"
           className="w-56"
         />
-        <div className="flex items-center gap-1">
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={String(rangeDays)}
+          onValueChange={(value) =>
+            value && withPageReset(setRangeDays)(Number(value))
+          }
+          aria-label="Range"
+        >
           {RANGES.map((range) => (
-            <Button
-              key={range.label}
-              variant={range.days === rangeDays ? 'default' : 'outline'}
-              size="sm"
-              className="rounded-3xl"
-              onClick={() => withPageReset(setRangeDays)(range.days)}
-            >
+            <ToggleGroupItem key={range.label} value={String(range.days)}>
               {range.label}
-            </Button>
+            </ToggleGroupItem>
           ))}
-        </div>
+        </ToggleGroup>
         {hasFilters ? (
           <Button
             variant="ghost"
@@ -304,7 +324,7 @@ export default function Activity() {
             disabled={exporting}
             onClick={() => exportAs('csv')}
           >
-            <Download className="size-4" />
+            <Download />
             CSV
           </Button>
           <Button
@@ -313,14 +333,16 @@ export default function Activity() {
             disabled={exporting}
             onClick={() => exportAs('ndjson')}
           >
-            <Download className="size-4" />
+            <Download />
             NDJSON
           </Button>
         </div>
       </div>
 
       {loading ? (
-        <Loading />
+        <LoadingState fill="block" />
+      ) : failed ? (
+        <LoadError message="Failed to load activity." onRetry={load} />
       ) : rows.length === 0 ? (
         <p className="text-muted-foreground mt-8 text-sm">No activity.</p>
       ) : (
@@ -347,51 +369,47 @@ export default function Activity() {
                   const repeat =
                     idx > 0 && rows[idx - 1].actor_id === row.actor_id;
                   return [
-                    <TableRow key={key} className="hover:bg-muted/40">
+                    <TableRow key={key}>
                       <TableCell>
-                        <button
-                          type="button"
+                        <IconButton
+                          variant="ghost-muted"
+                          size="icon-xs"
                           aria-expanded={isOpen}
-                          aria-label={
+                          label={
                             isOpen
                               ? `Hide details for ${eventLabel(row.event)}`
                               : `Show details for ${eventLabel(row.event)}`
                           }
-                          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring cursor-pointer rounded focus-visible:ring-2 focus-visible:outline-none"
+                          icon={isOpen ? ChevronDown : ChevronRight}
                           onClick={() => setExpanded(isOpen ? null : key)}
-                        >
-                          {isOpen ? (
-                            <ChevronDown className="size-4" />
-                          ) : (
-                            <ChevronRight className="size-4" />
-                          )}
-                        </button>
+                        />
                       </TableCell>
                       <TableCell>
                         <div className="flex items-center gap-2">
-                          <Pill tone={eventTone(row.event)}>
+                          <Badge variant={eventTone(row.event)}>
                             {eventLabel(row.event)}
-                          </Pill>
+                          </Badge>
                           {row.outcome ? (
-                            <Pill tone={outcomeTone(row.outcome)}>
+                            <Badge variant={outcomeTone(row.outcome)}>
                               {outcomeLabel(row.outcome)}
-                            </Pill>
+                            </Badge>
                           ) : null}
                         </div>
                       </TableCell>
                       <TableCell>
-                        <Pill tone={categoryTone(row.category)}>
+                        <Badge variant={categoryTone(row.category)}>
                           {row.category}
-                        </Pill>
+                        </Badge>
                       </TableCell>
                       <TableCell
-                        className={`font-mono text-[13px] ${
-                          repeat ? 'text-muted-foreground/50' : ''
-                        }`}
+                        className={cn(
+                          'font-mono text-xs',
+                          repeat ? 'text-muted-foreground/50' : '',
+                        )}
                       >
                         {repeat ? '〃' : (row.actor_id ?? '—')}
                       </TableCell>
-                      <TableCell className="font-mono text-[13px]">
+                      <TableCell className="font-mono text-xs">
                         {row.target_id && row.target_id !== row.actor_id
                           ? row.target_id
                           : '—'}
@@ -406,9 +424,7 @@ export default function Activity() {
                             local
                           </span>
                         ) : (
-                          <span className="font-mono text-[13px]">
-                            {row.ip}
-                          </span>
+                          <span className="font-mono text-xs">{row.ip}</span>
                         )}
                       </TableCell>
                       <TableCell className="text-muted-foreground whitespace-nowrap">
@@ -419,7 +435,7 @@ export default function Activity() {
                     </TableRow>,
                     isOpen ? (
                       <TableRow key={`${key}:detail`}>
-                        <TableCell colSpan={7} className="py-2">
+                        <TableCell colSpan={7}>
                           <RowDetail row={row} />
                         </TableCell>
                       </TableRow>
@@ -429,29 +445,12 @@ export default function Activity() {
               </TableBody>
             </Table>
           </TableContainer>
-          <div className="mt-4 flex items-center justify-between">
-            <p className="text-muted-foreground text-sm">
-              {fmtNumber(total)} events · page {page} of {totalPages}
-            </p>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={page <= 1}
-                onClick={() => setPage((p) => p - 1)}
-              >
-                Previous
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={page >= totalPages}
-                onClick={() => setPage((p) => p + 1)}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
+          <Pagination
+            page={page}
+            pageCount={totalPages}
+            onPageChange={setPage}
+            summary={`${fmtNumber(total)} events`}
+          />
         </>
       )}
     </div>
diff --git a/frontend/src/admin/AdminUI.test.ts b/frontend/src/admin/AdminUI.test.ts
index 26d74212..0da1f4eb 100644
--- a/frontend/src/admin/AdminUI.test.ts
+++ b/frontend/src/admin/AdminUI.test.ts
@@ -23,8 +23,8 @@ describe('eventLabel', () => {
 
 describe('eventTone', () => {
   it('flags removals and refusals', () => {
-    expect(eventTone('oidc_login_denied')).toBe('danger');
-    expect(eventTone('agent.deleted')).toBe('danger');
+    expect(eventTone('oidc_login_denied')).toBe('destructive');
+    expect(eventTone('agent.deleted')).toBe('destructive');
   });
 
   it('flags revocations as a warning, not a failure', () => {
@@ -32,18 +32,22 @@ describe('eventTone', () => {
     expect(eventTone('agent.key_regenerated')).toBe('warning');
   });
 
-  it('marks an admin grant with the brand tone', () => {
-    expect(eventTone('role_granted')).toBe('brand');
+  it('marks an admin grant with the brand (default) variant', () => {
+    expect(eventTone('role_granted')).toBe('default');
   });
 
   it('leaves routine events muted', () => {
-    expect(eventTone('oidc_login')).toBe('muted');
-    expect(eventTone('anything_else')).toBe('muted');
+    expect(eventTone('oidc_login')).toBe('neutral');
+    expect(eventTone('anything_else')).toBe('neutral');
   });
 });
 
 describe('categoryTone', () => {
-  it('has a tone for every category the API declares', () => {
+  it('has a variant for every category the API declares', () => {
+    expect(categoryTone('identity')).toBe('outline');
+    expect(categoryTone('access')).toBe('default');
+    expect(categoryTone('safety')).toBe('destructive');
+    expect(categoryTone('other')).toBe('neutral');
     for (const category of [
       'identity',
       'access',
@@ -58,7 +62,7 @@ describe('categoryTone', () => {
   });
 
   it('falls back for an unknown category', () => {
-    expect(categoryTone('invented')).toBe('muted');
+    expect(categoryTone('invented')).toBe('neutral');
   });
 });
 
@@ -66,11 +70,11 @@ describe('outcomeTone', () => {
   // The values below are the only ones the writers produce: guardrails emit
   // triggered/not_evaluated, the device feed emits dispatched.
   it('flags a guardrail that fired', () => {
-    expect(outcomeTone('triggered')).toBe('danger');
+    expect(outcomeTone('triggered')).toBe('destructive');
   });
 
   it('leaves a check that never ran neutral', () => {
-    expect(outcomeTone('not_evaluated')).toBe('muted');
+    expect(outcomeTone('not_evaluated')).toBe('neutral');
   });
 
   it('reads a dispatched device command as a success', () => {
@@ -78,7 +82,7 @@ describe('outcomeTone', () => {
   });
 
   it('leaves an unfamiliar outcome muted', () => {
-    expect(outcomeTone('something-new')).toBe('muted');
+    expect(outcomeTone('something-new')).toBe('neutral');
   });
 });
 
diff --git a/frontend/src/admin/AdminUI.tsx b/frontend/src/admin/AdminUI.tsx
index 250a7410..bad84a61 100644
--- a/frontend/src/admin/AdminUI.tsx
+++ b/frontend/src/admin/AdminUI.tsx
@@ -1,72 +1,39 @@
-import Spinner from '../components/Spinner';
-import { formatDateOnly, formatDateTime } from '../utils/dateTimeUtils';
+import type { VariantProps } from 'class-variance-authority';
 
-export function Loading() {
-  return (
-    <div className="flex h-40 items-center justify-center">
-      <Spinner />
-    </div>
-  );
-}
+import { Button } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import type { badgeVariants } from '../components/ui/badge';
+import {
+  formatDateOnly,
+  formatDateTime,
+  formatRelative,
+} from '../utils/dateTimeUtils';
 
+/** A failed admin fetch: a red message with a Retry that re-runs the fetch. */
 export function LoadError({
   message = 'Failed to load.',
+  onRetry,
 }: {
   message?: string;
-}) {
-  return <p className="text-muted-foreground mt-8 text-sm">{message}</p>;
-}
-
-export function StatCard({
-  label,
-  value,
-  sub,
-}: {
-  label: string;
-  value: React.ReactNode;
-  sub?: string;
+  onRetry: () => void;
 }) {
   return (
-    <div className="border-border dark:border-border rounded-2xl border px-6 py-5">
-      <p className="text-muted-foreground text-sm">{label}</p>
-      <p className="text-foreground dark:text-foreground mt-1 text-2xl font-bold tabular-nums">
-        {value}
-      </p>
-      {sub ? <p className="text-muted-foreground mt-1 text-xs">{sub}</p> : null}
-    </div>
+    <EmptyState
+      tone="destructive"
+      size="sm"
+      illustration="none"
+      title={message}
+      action={
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      }
+    />
   );
 }
 
-type Tone = 'default' | 'success' | 'danger' | 'muted' | 'brand' | 'warning';
-
-const TONES: Record<Tone, string> = {
-  default: 'bg-muted text-foreground',
-  success:
-    'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  danger: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  muted: 'bg-muted text-muted-foreground',
-  // brand violet — matches the chart's --primary; used for the Admin role.
-  brand:
-    'bg-[#7D54D1]/15 text-[#7D54D1] dark:bg-violet-900/40 dark:text-violet-300',
-  warning:
-    'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
-};
-
-export function Pill({
-  tone = 'default',
-  children,
-}: {
-  tone?: Tone;
-  children: React.ReactNode;
-}) {
-  return (
-    <span
-      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${TONES[tone]}`}
-    >
-      {children}
-    </span>
-  );
-}
+// Audit-feed pills render as Badge; these helpers pick its variant.
+type Tone = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
 
 export function fmtDate(value?: string | null): string {
   return value ? formatDateTime(value) : '—';
@@ -76,21 +43,10 @@ export function fmtDateShort(value?: string | null): string {
   return value ? formatDateOnly(value) : '—';
 }
 
+/** "3 minutes ago" in the UI language; `never` when there is no value. */
 export function fmtRelative(value?: string | null): string {
   if (!value) return 'never';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return String(value);
-  const sec = Math.round((Date.now() - date.getTime()) / 1000);
-  if (sec < 60) return 'just now';
-  const min = Math.round(sec / 60);
-  if (min < 60) return `${min}m ago`;
-  const hr = Math.round(min / 60);
-  if (hr < 24) return `${hr}h ago`;
-  const day = Math.round(hr / 24);
-  if (day < 7) return `${day}d ago`;
-  if (day < 30) return `${Math.round(day / 7)}w ago`;
-  if (day < 365) return `${Math.round(day / 30)}mo ago`;
-  return `${Math.round(day / 365)}y ago`;
+  return formatRelative(value) ?? String(value);
 }
 
 export function fmtNumber(n?: number | null): string {
@@ -202,25 +158,25 @@ const WARNING_EVENTS = new Set([
 ]);
 
 export function eventTone(event: string): Tone {
-  if (DANGER_EVENTS.has(event)) return 'danger';
-  if (event === 'role_granted') return 'brand';
+  if (DANGER_EVENTS.has(event)) return 'destructive';
+  if (event === 'role_granted') return 'default';
   if (WARNING_EVENTS.has(event)) return 'warning';
-  return 'muted';
+  return 'neutral';
 }
 
 // Category facet colors. Mirrors docsgpt/audit_events.py.
 const CATEGORY_TONES: Record<string, Tone> = {
-  identity: 'default',
-  access: 'brand',
+  identity: 'outline',
+  access: 'default',
   config: 'warning',
   data: 'success',
   device: 'warning',
-  safety: 'danger',
-  other: 'muted',
+  safety: 'destructive',
+  other: 'neutral',
 };
 
 export function categoryTone(category: string): Tone {
-  return CATEGORY_TONES[category] ?? 'muted';
+  return CATEGORY_TONES[category] ?? 'neutral';
 }
 
 // Outcome values the two side journals actually write.
@@ -232,13 +188,13 @@ export function categoryTone(category: string): Tone {
 // produced, so every outcome rendered neutral grey -- including a guardrail
 // that fired, which is the one signal the merged feed exists to surface.
 const OUTCOME_TONES: Record<string, Tone> = {
-  triggered: 'danger',
-  not_evaluated: 'muted',
+  triggered: 'destructive',
+  not_evaluated: 'neutral',
   dispatched: 'success',
 };
 
 export function outcomeTone(outcome: string): Tone {
-  return OUTCOME_TONES[outcome] ?? 'muted';
+  return OUTCOME_TONES[outcome] ?? 'neutral';
 }
 
 const OUTCOME_LABELS: Record<string, string> = {
diff --git a/frontend/src/admin/Admins.tsx b/frontend/src/admin/Admins.tsx
index 5a0b3361..8e08fdea 100644
--- a/frontend/src/admin/Admins.tsx
+++ b/frontend/src/admin/Admins.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import adminService from '../api/services/adminService';
+import { Badge } from '../components/ui/badge';
 import {
   Table,
   TableBody,
@@ -12,7 +13,8 @@ import {
   TableRow,
 } from '../components/ui/table';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Loading, Pill, fmtDate } from './AdminUI';
+import { LoadingState } from '@/components/ui/loading-state';
+import { LoadError, fmtDate } from './AdminUI';
 
 type Admin = { user_id: string; granted_at?: string; sources?: string[] };
 
@@ -20,29 +22,45 @@ export default function Admins() {
   const token = useSelector(selectToken);
   const [admins, setAdmins] = useState<Admin[]>([]);
   const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const [reloadKey, setReloadKey] = useState(0);
 
   useEffect(() => {
     let cancelled = false;
     setLoading(true);
+    setFailed(false);
     adminService
       .getAdmins(token)
       .then((res) => res.json())
       .then((json) => {
         if (!cancelled) {
           setAdmins(json.admins ?? []);
+          setFailed(!json.success);
           setLoading(false);
         }
       })
-      .catch(() => !cancelled && setLoading(false));
+      .catch(() => {
+        if (!cancelled) {
+          setFailed(true);
+          setLoading(false);
+        }
+      });
     return () => {
       cancelled = true;
     };
-  }, [token]);
+  }, [token, reloadKey]);
 
-  if (loading) return <Loading />;
+  if (loading) return <LoadingState fill="block" />;
+  if (failed)
+    return (
+      <LoadError
+        message="Failed to load admins."
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
 
   return (
-    <div className="mt-6">
+    <div>
       <p className="text-muted-foreground mb-4 text-sm">
         Admin access is the deployment super-admin role. Grant or revoke it from
         the Users tab; OIDC-group-derived grants reconcile automatically at
@@ -69,9 +87,9 @@ export default function Admins() {
                   <TableCell>
                     <div className="flex flex-wrap gap-1">
                       {(a.sources ?? []).map((s) => (
-                        <Pill key={s} tone="muted">
+                        <Badge key={s} variant="neutral">
                           {s}
-                        </Pill>
+                        </Badge>
                       ))}
                     </div>
                   </TableCell>
diff --git a/frontend/src/admin/LoadError.test.tsx b/frontend/src/admin/LoadError.test.tsx
new file mode 100644
index 00000000..0d7787fe
--- /dev/null
+++ b/frontend/src/admin/LoadError.test.tsx
@@ -0,0 +1,40 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { LoadError } from './AdminUI';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('LoadError', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('renders a destructive empty state whose Retry re-runs the fetch', () => {
+    const onRetry = vi.fn();
+    act(() => {
+      root.render(
+        <LoadError message="Failed to load users." onRetry={onRetry} />,
+      );
+    });
+    const block = container.querySelector('[data-slot="empty-state"]');
+    expect(block?.getAttribute('data-tone')).toBe('destructive');
+    expect(block?.getAttribute('role')).toBe('alert');
+    expect(block?.textContent).toContain('Failed to load users.');
+
+    const retry = container.querySelector('button');
+    expect(retry?.textContent).toBe('Retry');
+    act(() => retry?.click());
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/admin/Overview.tsx b/frontend/src/admin/Overview.tsx
index 1ed25f4c..586be944 100644
--- a/frontend/src/admin/Overview.tsx
+++ b/frontend/src/admin/Overview.tsx
@@ -4,7 +4,10 @@ import { Link } from 'react-router-dom';
 
 import adminService from '../api/services/adminService';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Loading, LoadError, StatCard, fmtNumber } from './AdminUI';
+import { Button } from '@/components/ui/button';
+import { LoadingState } from '@/components/ui/loading-state';
+import StatCard from '@/components/StatCard';
+import { LoadError, fmtNumber } from './AdminUI';
 
 function Section({
   title,
@@ -14,7 +17,8 @@ function Section({
   children: React.ReactNode;
 }) {
   return (
-    <div className="mt-8">
+    // The shell puts the first group 32px under the title.
+    <div className="mt-8 first:mt-0">
       <p className="text-muted-foreground mb-3 text-sm font-medium">{title}</p>
       {children}
     </div>
@@ -25,6 +29,7 @@ export default function Overview() {
   const token = useSelector(selectToken);
   const [data, setData] = useState<any | null>(null);
   const [loading, setLoading] = useState(true);
+  const [reloadKey, setReloadKey] = useState(0);
 
   useEffect(() => {
     let cancelled = false;
@@ -42,10 +47,16 @@ export default function Overview() {
     return () => {
       cancelled = true;
     };
-  }, [token]);
+  }, [token, reloadKey]);
 
-  if (loading) return <Loading />;
-  if (!data?.success) return <LoadError message="Failed to load overview." />;
+  if (loading) return <LoadingState fill="block" />;
+  if (!data?.success)
+    return (
+      <LoadError
+        message="Failed to load overview."
+        onRetry={() => setReloadKey((k) => k + 1)}
+      />
+    );
 
   const users = data.users ?? {};
   const failed = data.failed_logins_7d ?? 0;
@@ -85,36 +96,29 @@ export default function Overview() {
 
       <Section title="Security & access">
         <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-          <div
-            className={`rounded-2xl border px-6 py-5 ${
-              failed > 0
-                ? 'border-red-300 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30'
-                : 'border-border'
-            }`}
-          >
-            <p className="text-muted-foreground text-sm">Failed logins (7d)</p>
-            <p
-              className={`mt-1 text-2xl font-bold tabular-nums ${
-                failed > 0
-                  ? 'text-red-600 dark:text-red-400'
-                  : 'text-foreground'
-              }`}
-            >
-              {fmtNumber(failed)}
-            </p>
-            {failed > 0 ? (
-              <Link
-                to="/admin/audit?event=oidc_login_denied"
-                className="mt-2 inline-block text-xs text-red-600 hover:underline dark:text-red-400"
-              >
-                View in Audit →
-              </Link>
-            ) : (
-              <p className="text-muted-foreground mt-2 text-xs">
-                No denied logins
-              </p>
-            )}
-          </div>
+          <StatCard
+            label="Failed logins (7d)"
+            value={fmtNumber(failed)}
+            tone={failed > 0 ? 'destructive' : 'default'}
+            valueTone={failed > 0 ? 'destructive' : undefined}
+            sub={
+              failed > 0 ? (
+                <Button
+                  variant="link"
+                  size="inline"
+                  asChild
+                  // eslint-disable-next-line shadcn/no-restyle -- keeps the tile's destructive tone at hint size
+                  className="text-destructive text-xs font-normal"
+                >
+                  <Link to="/admin/audit?event=oidc_login_denied">
+                    View in Audit →
+                  </Link>
+                </Button>
+              ) : (
+                'No denied logins'
+              )
+            }
+          />
         </div>
       </Section>
     </div>
diff --git a/frontend/src/admin/QuotaEditor.tsx b/frontend/src/admin/QuotaEditor.tsx
index 7b9de108..9117a7ea 100644
--- a/frontend/src/admin/QuotaEditor.tsx
+++ b/frontend/src/admin/QuotaEditor.tsx
@@ -1,9 +1,12 @@
+import { CircleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import adminService, { type QuotaScope } from '../api/services/adminService';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
+import { Progress } from '../components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -45,11 +48,7 @@ export function UsageBar({
   const fmt = (n: number) => (kind === 'cost' ? fmtUsd(n) : fmtNumber(n));
   const percent = usagePercent(budget.used, budget.limit);
   const tone =
-    percent >= 100
-      ? 'bg-red-500'
-      : percent >= 80
-        ? 'bg-amber-500'
-        : 'bg-[#7D54D1]';
+    percent >= 100 ? 'destructive' : percent >= 80 ? 'warning' : 'default';
   return (
     <div>
       <div className="flex items-baseline justify-between gap-3 text-sm">
@@ -60,19 +59,16 @@ export function UsageBar({
         </span>
       </div>
       {budget.limit !== null ? (
-        <div
-          className="bg-muted mt-1 h-1.5 w-full overflow-hidden rounded-full"
-          role="progressbar"
+        <Progress
+          className="mt-1"
+          size="sm"
+          variant={tone}
+          value={percent}
           aria-label={label}
           aria-valuemin={0}
           aria-valuemax={100}
           aria-valuenow={Math.round(percent)}
-        >
-          <div
-            className={`h-full rounded-full ${tone}`}
-            style={{ width: `${percent}%` }}
-          />
-        </div>
+        />
       ) : null}
       {caption ? (
         <p className="text-muted-foreground mt-1 text-xs">{caption}</p>
@@ -194,10 +190,10 @@ export default function QuotaEditor({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       <p className="text-muted-foreground text-xs">{inheritHint}</p>
       {policy && !policy.enabled ? (
-        <p className="text-xs text-amber-600 dark:text-amber-400">
+        <p className="text-warning text-xs">
           This policy is disabled and is not enforced. Saving keeps it disabled.
         </p>
       ) : null}
@@ -231,9 +227,10 @@ export default function QuotaEditor({
         />
       </div>
       {error ? (
-        <p role="alert" className="text-sm text-red-600 dark:text-red-400">
-          {error}
-        </p>
+        <Alert variant="destructive">
+          <CircleAlert className="size-4" aria-hidden="true" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
       ) : null}
       <div className="flex justify-end gap-2">
         {policy ? (
diff --git a/frontend/src/admin/Quotas.tsx b/frontend/src/admin/Quotas.tsx
index 967f4f00..8b382454 100644
--- a/frontend/src/admin/Quotas.tsx
+++ b/frontend/src/admin/Quotas.tsx
@@ -1,10 +1,15 @@
+import { TriangleAlert } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import adminService, { type QuotaScope } from '../api/services/adminService';
 import teamsService from '../api/services/teamsService';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Modal } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -22,14 +27,8 @@ import {
   TableRow,
 } from '../components/ui/table';
 import { selectToken } from '../preferences/preferenceSlice';
-import {
-  LoadError,
-  Loading,
-  Pill,
-  fmtDate,
-  fmtNumber,
-  fmtRelative,
-} from './AdminUI';
+import { LoadingState } from '@/components/ui/loading-state';
+import { LoadError, fmtDate, fmtNumber, fmtRelative } from './AdminUI';
 import QuotaEditor from './QuotaEditor';
 import { describeBudget, type QuotaPolicy } from './quotaUtils';
 
@@ -53,6 +52,10 @@ const HINTS: Record<QuotaScope, string> = {
   user: 'Overrides team allowances and the instance default for this user.',
 };
 
+// React escapes on render; i18next's own escaping would mangle model ids
+// such as `org/model` into `org&#x2F;model`.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
 function PolicyCells({ policy }: { policy: QuotaPolicy }) {
   return (
     <>
@@ -73,6 +76,7 @@ function PolicyCells({ policy }: { policy: QuotaPolicy }) {
 }
 
 export default function Quotas() {
+  const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [data, setData] = useState<any | null>(null);
   const [teams, setTeams] = useState<any[]>([]);
@@ -113,18 +117,21 @@ export default function Quotas() {
     return teams.filter((team) => !covered.has(String(team.id)));
   }, [teams, teamPolicies]);
 
-  if (data === null && loading) return <Loading />;
-  if (!data?.success) return <LoadError message="Failed to load quotas." />;
+  if (data === null && loading) return <LoadingState fill="block" />;
+  if (!data?.success)
+    return <LoadError message="Failed to load quotas." onRetry={load} />;
 
   const bucketPill = (policy: QuotaPolicy) => (
     <>
-      {isAll(policy) ? null : <Pill tone="muted">{policy.bucket} traffic</Pill>}
-      {policy.enabled ? null : <Pill tone="muted">Disabled</Pill>}
+      {isAll(policy) ? null : (
+        <Badge variant="neutral">{policy.bucket} traffic</Badge>
+      )}
+      {policy.enabled ? null : <Badge variant="neutral">Disabled</Badge>}
     </>
   );
 
   return (
-    <div className="mt-6 space-y-8">
+    <div className="flex flex-col gap-8">
       <p className="text-muted-foreground text-sm">
         Usage is counted per user over each calendar {data.period} (UTC). The
         current window resets {fmtDate(data.resets_at)}. A request is refused
@@ -132,39 +139,49 @@ export default function Quotas() {
       </p>
 
       {(data.unpriced_models ?? []).length > 0 ? (
-        <div className="rounded-2xl border border-amber-300 bg-amber-50 px-5 py-4 text-sm dark:border-amber-800 dark:bg-amber-950/30">
-          <p className="text-foreground font-medium">
-            Models without a price are invisible to cost limits
-          </p>
-          <p className="text-muted-foreground mt-1">
-            These were used this {data.period} and recorded at $0:{' '}
-            {(data.unpriced_models as any[])
-              .map((m) => `${m.model_id} (${fmtNumber(m.tokens)} tokens)`)
-              .join(', ')}
-            . Use a token limit for them, or declare their rates in the model
-            catalog.
-          </p>
-        </div>
+        <Alert variant="warning" role="note">
+          <TriangleAlert className="size-4" aria-hidden="true" />
+          <AlertTitle>{t('admin.quotas.unpriced.title')}</AlertTitle>
+          <AlertDescription>
+            <p>
+              {t('admin.quotas.unpriced.body', {
+                period: data.period,
+                models: (data.unpriced_models as any[])
+                  .map((m) =>
+                    t('admin.quotas.unpriced.model', {
+                      model: m.model_id,
+                      tokens: fmtNumber(m.tokens),
+                      ...NO_ESCAPE,
+                    }),
+                  )
+                  .join(', '),
+                ...NO_ESCAPE,
+              })}
+            </p>
+          </AlertDescription>
+        </Alert>
       ) : null}
 
       <section>
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-foreground font-bold">Instance default</p>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() =>
-              setEditing({
-                scope: 'instance',
-                subjectId: null,
-                title: 'Instance default',
-                policy: instancePolicy,
-              })
-            }
-          >
-            {instancePolicy ? 'Edit' : 'Set default'}
-          </Button>
-        </div>
+        <SectionHeader
+          title="Instance default"
+          actions={
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                setEditing({
+                  scope: 'instance',
+                  subjectId: null,
+                  title: 'Instance default',
+                  policy: instancePolicy,
+                })
+              }
+            >
+              {instancePolicy ? 'Edit' : 'Set default'}
+            </Button>
+          }
+        />
         <p className="text-muted-foreground mt-1 text-sm">
           {instancePolicy
             ? `${instancePolicy.enabled ? '' : 'Disabled · '}Tokens: ${describeBudget(instancePolicy.token_limit, instancePolicy.token_unlimited, 'tokens')} · Cost: ${describeBudget(instancePolicy.cost_limit_usd, instancePolicy.cost_unlimited, 'cost')}`
@@ -173,41 +190,43 @@ export default function Quotas() {
       </section>
 
       <section>
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <p className="text-foreground font-bold">Team allowances</p>
-          {teamsWithoutPolicy.length > 0 ? (
-            <div className="flex items-center gap-2">
-              <Select value={teamPick} onValueChange={setTeamPick}>
-                <SelectTrigger className="w-52" aria-label="Team">
-                  <SelectValue placeholder="Choose a team" />
-                </SelectTrigger>
-                <SelectContent>
-                  {teamsWithoutPolicy.map((team) => (
-                    <SelectItem key={team.id} value={String(team.id)}>
-                      {team.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!teamPick}
-                onClick={() => {
-                  const team = teams.find((tm) => String(tm.id) === teamPick);
-                  setEditing({
-                    scope: 'team',
-                    subjectId: teamPick,
-                    title: team?.name ?? 'Team',
-                    policy: null,
-                  });
-                }}
-              >
-                Add allowance
-              </Button>
-            </div>
-          ) : null}
-        </div>
+        <SectionHeader
+          title="Team allowances"
+          actions={
+            teamsWithoutPolicy.length > 0 ? (
+              <>
+                <Select value={teamPick} onValueChange={setTeamPick}>
+                  <SelectTrigger className="w-52" aria-label="Team">
+                    <SelectValue placeholder="Choose a team" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {teamsWithoutPolicy.map((team) => (
+                      <SelectItem key={team.id} value={String(team.id)}>
+                        {team.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!teamPick}
+                  onClick={() => {
+                    const team = teams.find((tm) => String(tm.id) === teamPick);
+                    setEditing({
+                      scope: 'team',
+                      subjectId: teamPick,
+                      title: team?.name ?? 'Team',
+                      policy: null,
+                    });
+                  }}
+                >
+                  Add allowance
+                </Button>
+              </>
+            ) : null
+          }
+        />
         {teamPolicies.length === 0 ? (
           <p className="text-muted-foreground mt-1 text-sm">
             No team has an allowance.
@@ -266,7 +285,7 @@ export default function Quotas() {
       </section>
 
       <section>
-        <p className="text-foreground font-bold">User overrides</p>
+        <SectionHeader title="User overrides" />
         {userPolicies.length === 0 ? (
           <p className="text-muted-foreground mt-1 text-sm">
             No user has an override. Add one from a user&apos;s menu on the
diff --git a/frontend/src/admin/Usage.tsx b/frontend/src/admin/Usage.tsx
index 4904515b..f8799438 100644
--- a/frontend/src/admin/Usage.tsx
+++ b/frontend/src/admin/Usage.tsx
@@ -20,16 +20,14 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui/table';
-import { useDarkTheme } from '../hooks';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group';
 import { selectToken } from '../preferences/preferenceSlice';
-import {
-  Loading,
-  LoadError,
-  StatCard,
-  fmtMs,
-  fmtNumber,
-  fmtUsd,
-} from './AdminUI';
+import { LoadingState } from '@/components/ui/loading-state';
+import StatCard from '@/components/StatCard';
+import { Card } from '@/components/ui/card';
+import { SectionHeader } from '@/components/ui/section-header';
+import { LoadError, fmtMs, fmtNumber, fmtUsd } from './AdminUI';
+import { useChartPalette } from '../utils/chartUtils';
 import UsageChart from './UsageChart';
 import {
   GROUP_OPTIONS,
@@ -54,7 +52,8 @@ const RANGES = [7, 30, 90];
 
 export default function Usage() {
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
+  // Re-read on every theme change; Chart.js can't read CSS variables.
+  const palette = useChartPalette();
   const [days, setDays] = useState(30);
   const [groupBy, setGroupBy] = useState<GroupBy>('none');
   const [metric, setMetric] = useState<Metric>('tokens');
@@ -70,6 +69,8 @@ export default function Usage() {
         token,
       );
       setData(await res.json().catch(() => ({})));
+    } catch {
+      setData({});
     } finally {
       setLoading(false);
     }
@@ -84,33 +85,32 @@ export default function Usage() {
   const latency: Latency | undefined = data?.latency;
 
   const chartData = useMemo(
-    () => buildUsageChart(series, groupBy, metric),
-    // isDarkTheme re-resolves the canvas colors when the theme toggles.
-    [series, groupBy, metric, isDarkTheme],
+    () => buildUsageChart(series, groupBy, metric, palette),
+    [series, groupBy, metric, palette],
   );
 
   const cacheHitRate = useMemo(() => computeCacheHitRate(series), [series]);
 
-  if (data === null && loading) return <Loading />;
+  if (data === null && loading) return <LoadingState fill="block" />;
   if (data && !data.success)
-    return <LoadError message="Failed to load usage." />;
+    return <LoadError message="Failed to load usage." onRetry={load} />;
 
   return (
-    <div className="mt-6">
+    <div>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <div className="flex items-center gap-1">
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={String(days)}
+          onValueChange={(value) => value && setDays(Number(value))}
+          aria-label="Range"
+        >
           {RANGES.map((range) => (
-            <Button
-              key={range}
-              variant={range === days ? 'default' : 'outline'}
-              size="sm"
-              className="rounded-3xl"
-              onClick={() => setDays(range)}
-            >
+            <ToggleGroupItem key={range} value={String(range)}>
               {range}d
-            </Button>
+            </ToggleGroupItem>
           ))}
-        </div>
+        </ToggleGroup>
         <Select
           value={groupBy}
           onValueChange={(value) => setGroupBy(value as GroupBy)}
@@ -126,27 +126,19 @@ export default function Usage() {
             ))}
           </SelectContent>
         </Select>
-        <div className="flex items-center gap-1">
-          <Button
-            variant={metric === 'tokens' ? 'default' : 'outline'}
-            size="sm"
-            className="rounded-3xl"
-            onClick={() => setMetric('tokens')}
-          >
-            Tokens
-          </Button>
-          <Button
-            variant={metric === 'cost' ? 'default' : 'outline'}
-            size="sm"
-            className="rounded-3xl"
-            onClick={() => setMetric('cost')}
-          >
-            Cost
-          </Button>
-        </div>
+        <ToggleGroup
+          type="single"
+          size="sm"
+          value={metric}
+          onValueChange={(value) => value && setMetric(value as Metric)}
+          aria-label="Metric"
+        >
+          <ToggleGroupItem value="tokens">Tokens</ToggleGroupItem>
+          <ToggleGroupItem value="cost">Cost</ToggleGroupItem>
+        </ToggleGroup>
       </div>
 
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
         <StatCard
           label={`Spend (${days}d)`}
           value={fmtUsd(data?.total_cost)}
@@ -176,17 +168,23 @@ export default function Usage() {
         />
       </div>
 
-      <div className="border-border dark:border-border mt-4 h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
+      <Card
+        variant="subtle"
+        padding="lg"
+        className="mt-4 h-[345px] w-full overflow-hidden"
+      >
         <div className="flex flex-row items-center justify-between gap-3">
-          <p className="text-foreground dark:text-foreground font-bold">
-            {metric === 'cost' ? 'Spend' : 'Token usage'}
-          </p>
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={metric === 'cost' ? 'Spend' : 'Token usage'}
+          />
           <div
             id="admin-usage-legend"
             className="flex flex-row items-center justify-end"
           ></div>
         </div>
-        <div className="relative mt-px h-[260px] w-full">
+        <div className="relative h-[260px] w-full">
           {loading ? (
             <SkeletonLoader count={1} component={'analysis'} />
           ) : series.length === 0 ? (
@@ -198,15 +196,19 @@ export default function Usage() {
               data={chartData}
               legendID="admin-usage-legend"
               currency={metric === 'cost'}
+              gridColor={palette.border}
+              tickColor={palette.mutedForeground}
             />
           )}
         </div>
-      </div>
+      </Card>
 
-      <div className="border-border dark:border-border mt-4 w-full overflow-hidden rounded-2xl border px-6 py-5">
-        <p className="text-foreground dark:text-foreground mb-3 font-bold">
-          Top users
-        </p>
+      <Card
+        variant="subtle"
+        padding="lg"
+        className="mt-4 w-full overflow-hidden"
+      >
+        <SectionHeader as="h3" size="xs" title="Top users" />
         {topUsers.length === 0 ? (
           <p className="text-muted-foreground text-sm">No usage.</p>
         ) : (
@@ -221,15 +223,18 @@ export default function Usage() {
               </TableHead>
               <TableBody>
                 {topUsers.map((user) => (
-                  <TableRow key={user.user_id} className="hover:bg-muted/40">
-                    <TableCell className="font-mono text-[13px] break-all">
-                      <button
+                  <TableRow key={user.user_id}>
+                    <TableCell className="font-mono text-xs break-all">
+                      <Button
                         type="button"
-                        className="hover:text-foreground focus-visible:ring-ring cursor-pointer rounded text-left underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:outline-none"
+                        variant="link"
+                        size="inline"
+                        // eslint-disable-next-line shadcn/no-restyle -- the id keeps the cell's 12px mono type and wraps
+                        className="text-left font-mono text-xs font-normal whitespace-normal"
                         onClick={() => setDrilldown(user.user_id)}
                       >
                         {user.user_id}
-                      </button>
+                      </Button>
                     </TableCell>
                     <TableCell
                       align="right"
@@ -249,7 +254,7 @@ export default function Usage() {
             </Table>
           </TableContainer>
         )}
-      </div>
+      </Card>
 
       <UserUsageModal userId={drilldown} onClose={() => setDrilldown(null)} />
     </div>
diff --git a/frontend/src/admin/UsageChart.test.ts b/frontend/src/admin/UsageChart.test.ts
new file mode 100644
index 00000000..fb7b482e
--- /dev/null
+++ b/frontend/src/admin/UsageChart.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+
+import { seriesColor, usageColors } from './UsageChart';
+
+const palette = {
+  primary: 'c1',
+  series: ['c1', 'c2', 'c3', 'c4', 'c5'],
+  success: 's',
+  warning: 'w',
+  destructive: 'd',
+  border: 'b',
+  mutedForeground: 'm',
+};
+
+describe('usageColors', () => {
+  it('draws prompt in chart-1 and generated in chart-2', () => {
+    expect(usageColors(palette)).toEqual({ prompt: 'c1', generated: 'c2' });
+  });
+
+  it('reads the theme tokens when no palette is passed', () => {
+    expect(usageColors()).toEqual({ prompt: '#7d54d1', generated: '#2563eb' });
+  });
+});
+
+describe('seriesColor', () => {
+  it('walks chart-1 to chart-5 in order', () => {
+    expect([0, 1, 2, 3, 4].map((i) => seriesColor(i, palette))).toEqual(
+      palette.series,
+    );
+  });
+
+  it('never leaves the five chart tokens', () => {
+    expect(seriesColor(5, palette)).toBe('c1');
+  });
+});
diff --git a/frontend/src/admin/UsageChart.tsx b/frontend/src/admin/UsageChart.tsx
index f7d58496..c599e79b 100644
--- a/frontend/src/admin/UsageChart.tsx
+++ b/frontend/src/admin/UsageChart.tsx
@@ -9,7 +9,12 @@ import {
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 
-import { htmlLegendPlugin } from '../utils/chartUtils';
+import {
+  hoverColor,
+  htmlLegendPlugin,
+  readChartPalette,
+  type ChartPalette,
+} from '../utils/chartUtils';
 
 import type { ChartData } from 'chart.js';
 
@@ -22,40 +27,38 @@ ChartJS.register(
   Legend,
 );
 
-// Chart.js renders to a canvas and can't read CSS variables, so resolve the
-// theme color to a concrete string at render time (mirrors settings/Analytics).
-function readCssVar(name: string, fallback: string): string {
-  if (typeof window === 'undefined') return fallback;
-  const value = getComputedStyle(document.body).getPropertyValue(name).trim();
-  return value || fallback;
+/**
+ * Colours for the ungrouped Prompt / Generated pair.
+ *
+ * Same as settings/Analytics: prompt is `chart-1` (the brand), generated is
+ * `chart-2`. Chart.js renders to a canvas, so these are resolved strings.
+ *
+ * @param palette The resolved theme palette; read from the DOM when omitted.
+ * @returns The two bar colours.
+ */
+export function usageColors(palette: ChartPalette = readChartPalette()): {
+  prompt: string;
+  generated: string;
+} {
+  return { prompt: palette.series[0], generated: palette.series[1] };
 }
 
-export function usageColors(): { prompt: string; generated: string } {
-  return {
-    // Violet + pink is the established DocsGPT 2-series pairing (Analytics uses
-    // --primary + SERIES_COLORS[0]); far more colorblind-separable than blue.
-    prompt: readCssVar('--primary', '#7D54D1'),
-    generated: '#FF6384',
-  };
-}
-
-// Follow-on colors for a grouped chart (by model / agent / source), matching
-// the palette settings/Analytics already uses for its stacked series.
-const SERIES_COLORS = [
-  '#FF6384',
-  '#36A2EB',
-  '#FFCE56',
-  '#4BC0C0',
-  '#9966FF',
-  '#FF9F40',
-  '#2BC596',
-];
-
-/** Color for dataset ``index``; the first uses the resolved brand color. */
-export function seriesColor(index: number): string {
-  return index === 0
-    ? readCssVar('--primary', '#7D54D1')
-    : SERIES_COLORS[(index - 1) % SERIES_COLORS.length];
+/**
+ * Colour for dataset `index` of a grouped chart (by model / agent / flow).
+ *
+ * Groups have no meaning of their own, so they take `chart-1` to `chart-5` in
+ * order (DESIGN.md, chart colours). Callers fold anything past five into
+ * "Other" with `foldSeries`, so the modulo never repeats a colour in practice.
+ *
+ * @param index The dataset's position.
+ * @param palette The resolved theme palette; read from the DOM when omitted.
+ * @returns The bar colour.
+ */
+export function seriesColor(
+  index: number,
+  palette: ChartPalette = readChartPalette(),
+): string {
+  return palette.series[index % palette.series.length];
 }
 
 function compactTick(value: number | string): string {
@@ -82,6 +85,10 @@ type UsageChartProps = {
   maxTicksLimitInX?: number;
   /** Format the y axis as USD rather than a token count. */
   currency?: boolean;
+  /** Grid lines and axis borders (`--border`). */
+  gridColor: string;
+  /** Axis tick labels and legend text (`--muted-foreground`). */
+  tickColor: string;
 };
 
 export default function UsageChart({
@@ -89,25 +96,31 @@ export default function UsageChart({
   legendID,
   maxTicksLimitInX = 8,
   currency = false,
+  gridColor,
+  tickColor,
 }: UsageChartProps) {
   const options = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
-      legend: { display: false },
+      // The HTML legend copies each item's fontColor, which is this.
+      legend: { display: false, labels: { color: tickColor } },
       htmlLegend: { containerID: legendID },
     },
     scales: {
       x: {
-        grid: { lineWidth: 0.2, color: '#C4C4C4' },
-        border: { width: 0.2, color: '#C4C4C4' },
-        ticks: { maxTicksLimit: maxTicksLimitInX },
+        grid: { lineWidth: 0.2, color: gridColor },
+        border: { width: 0.2, color: gridColor },
+        ticks: { maxTicksLimit: maxTicksLimitInX, color: tickColor },
         stacked: true,
       },
       y: {
-        grid: { lineWidth: 0.2, color: '#C4C4C4' },
-        border: { width: 0.2, color: '#C4C4C4' },
-        ticks: { callback: currency ? currencyTick : compactTick },
+        grid: { lineWidth: 0.2, color: gridColor },
+        border: { width: 0.2, color: gridColor },
+        ticks: {
+          callback: currency ? currencyTick : compactTick,
+          color: tickColor,
+        },
         stacked: true,
       },
     },
@@ -120,7 +133,10 @@ export default function UsageChart({
         ...data,
         datasets: data.datasets.map((dataset) => ({
           ...dataset,
-          hoverBackgroundColor: `${dataset.backgroundColor}CC`,
+          hoverBackgroundColor:
+            typeof dataset.backgroundColor === 'string'
+              ? hoverColor(dataset.backgroundColor)
+              : dataset.backgroundColor,
         })),
       }}
     />
diff --git a/frontend/src/admin/UserQuotaModal.tsx b/frontend/src/admin/UserQuotaModal.tsx
index 241da310..8b35db17 100644
--- a/frontend/src/admin/UserQuotaModal.tsx
+++ b/frontend/src/admin/UserQuotaModal.tsx
@@ -5,7 +5,9 @@ import adminService from '../api/services/adminService';
 import teamsService from '../api/services/teamsService';
 import { Modal } from '../components/ui/modal';
 import { selectToken } from '../preferences/preferenceSlice';
-import { LoadError, Loading, fmtDate } from './AdminUI';
+import { LoadingState } from '@/components/ui/loading-state';
+import { SectionHeader } from '@/components/ui/section-header';
+import { LoadError, fmtDate } from './AdminUI';
 import QuotaEditor, { UsageBar } from './QuotaEditor';
 import {
   sourceLabel,
@@ -79,13 +81,13 @@ export default function UserQuotaModal({
       title={userId ? `Quota · ${userId}` : 'Quota'}
     >
       {data === null ? (
-        <Loading />
+        <LoadingState fill="block" />
       ) : !data.success ? (
-        <LoadError message="Failed to load this user's quota." />
+        <LoadError message="Failed to load this user's quota." onRetry={load} />
       ) : (
-        <div className="space-y-5">
+        <div className="flex flex-col gap-5">
           {overall ? (
-            <div className="space-y-3">
+            <div className="flex flex-col gap-3">
               <UsageBar
                 label={`Tokens this ${data.period}`}
                 kind="tokens"
@@ -103,10 +105,8 @@ export default function UserQuotaModal({
               </p>
             </div>
           ) : null}
-          <div className="border-border border-t pt-4">
-            <p className="text-foreground mb-2 text-sm font-bold">
-              User override
-            </p>
+          <div className="border-border flex flex-col gap-2 border-t pt-4">
+            <SectionHeader as="h3" size="xs" title="User override" />
             <QuotaEditor
               scope="user"
               subjectId={userId}
diff --git a/frontend/src/admin/UserUsageModal.tsx b/frontend/src/admin/UserUsageModal.tsx
index 2a9f853b..dc3aeff1 100644
--- a/frontend/src/admin/UserUsageModal.tsx
+++ b/frontend/src/admin/UserUsageModal.tsx
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import adminService from '../api/services/adminService';
-import { Button } from '../components/ui/button';
 import { Modal } from '../components/ui/modal';
 import {
   Table,
@@ -13,10 +12,15 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui/table';
-import { useDarkTheme } from '../hooks';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group';
 import { selectToken } from '../preferences/preferenceSlice';
 import { formatDate } from '../utils/dateTimeUtils';
-import { Loading, LoadError, StatCard, fmtNumber, fmtUsd } from './AdminUI';
+import { Card } from '@/components/ui/card';
+import { LoadingState } from '@/components/ui/loading-state';
+import { SectionHeader } from '@/components/ui/section-header';
+import StatCard from '@/components/StatCard';
+import { LoadError, fmtNumber, fmtUsd } from './AdminUI';
+import { useChartPalette } from '../utils/chartUtils';
 import UsageChart, { usageColors } from './UsageChart';
 
 type Bucket = {
@@ -74,7 +78,7 @@ function SplitTable({
             <TableBody>
               {rows.map((row) => (
                 <TableRow key={row.key}>
-                  <TableCell className="text-[13px] break-all">
+                  <TableCell className="text-xs break-all">
                     {labels?.[row.key] ?? row.key}
                   </TableCell>
                   <TableCell align="right" className="tabular-nums">
@@ -106,10 +110,12 @@ export default function UserUsageModal({
   onClose: () => void;
 }) {
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
+  // Re-read on every theme change; Chart.js can't read CSS variables.
+  const palette = useChartPalette();
   const [days, setDays] = useState(30);
   const [data, setData] = useState<any | null>(null);
   const [loading, setLoading] = useState(false);
+  const [reloadKey, setReloadKey] = useState(0);
 
   useEffect(() => {
     if (!userId) {
@@ -132,11 +138,11 @@ export default function UserUsageModal({
     return () => {
       cancelled = true;
     };
-  }, [userId, days, token]);
+  }, [userId, days, token, reloadKey]);
 
   const series: Bucket[] = data?.series ?? [];
   const chartData = useMemo(() => {
-    const colors = usageColors();
+    const colors = usageColors(palette);
     return {
       labels: series.map((bucket) => formatDate(bucket.bucket)),
       datasets: [
@@ -152,8 +158,7 @@ export default function UserUsageModal({
         },
       ],
     };
-    // isDarkTheme re-resolves the canvas colors when the theme toggles.
-  }, [series, isDarkTheme]);
+  }, [series, palette]);
 
   const totals = data?.totals ?? {};
 
@@ -164,38 +169,54 @@ export default function UserUsageModal({
       title={userId ? `Usage · ${userId}` : 'Usage'}
       size="lg"
     >
-      <div className="mb-4 flex items-center gap-1">
+      <ToggleGroup
+        type="single"
+        size="sm"
+        value={String(days)}
+        onValueChange={(value) => value && setDays(Number(value))}
+        aria-label="Range"
+        className="mb-4"
+      >
         {RANGES.map((range) => (
-          <Button
-            key={range}
-            variant={range === days ? 'default' : 'outline'}
-            size="sm"
-            className="rounded-3xl"
-            onClick={() => setDays(range)}
-          >
+          <ToggleGroupItem key={range} value={String(range)}>
             {range}d
-          </Button>
+          </ToggleGroupItem>
         ))}
-      </div>
+      </ToggleGroup>
 
       {loading ? (
-        <Loading />
+        <LoadingState fill="block" />
       ) : data && !data.success ? (
-        <LoadError message="Failed to load usage." />
+        <LoadError
+          message="Failed to load usage."
+          onRetry={() => setReloadKey((k) => k + 1)}
+        />
       ) : (
-        <div className="space-y-4">
-          <div className="grid grid-cols-3 gap-3">
-            <StatCard label="Cost" value={fmtUsd(totals.cost)} />
-            <StatCard label="Tokens" value={fmtNumber(totals.tokens)} />
-            <StatCard label="Calls" value={fmtNumber(totals.calls)} />
+        <div className="flex flex-col gap-4">
+          <div className="grid grid-cols-3 gap-4">
+            <StatCard
+              variant="outline"
+              label="Cost"
+              value={fmtUsd(totals.cost)}
+            />
+            <StatCard
+              variant="outline"
+              label="Tokens"
+              value={fmtNumber(totals.tokens)}
+            />
+            <StatCard
+              variant="outline"
+              label="Calls"
+              value={fmtNumber(totals.calls)}
+            />
           </div>
 
-          <div className="border-border h-64 rounded-2xl border px-4 py-3">
+          <Card variant="outline" padding="default" className="h-66">
             <div className="flex items-center justify-between">
-              <p className="text-foreground text-sm font-bold">Daily tokens</p>
+              <SectionHeader as="h3" size="xs" title="Daily tokens" />
               <div id="admin-user-usage-legend" className="flex" />
             </div>
-            <div className="relative mt-px h-48 w-full">
+            <div className="relative h-48 w-full">
               {series.length === 0 ? (
                 <p className="text-muted-foreground mt-8 text-sm">
                   No usage in this period.
@@ -204,10 +225,12 @@ export default function UserUsageModal({
                 <UsageChart
                   data={chartData}
                   legendID="admin-user-usage-legend"
+                  gridColor={palette.border}
+                  tickColor={palette.mutedForeground}
                 />
               )}
             </div>
-          </div>
+          </Card>
 
           <SplitTable title="Model" rows={data?.by_model ?? []} />
           <SplitTable
diff --git a/frontend/src/admin/Users.tsx b/frontend/src/admin/Users.tsx
index 242e678e..f80848b8 100644
--- a/frontend/src/admin/Users.tsx
+++ b/frontend/src/admin/Users.tsx
@@ -1,4 +1,5 @@
 import {
+  ChevronDown,
   Eye,
   Gauge,
   LogOut,
@@ -8,18 +9,19 @@ import {
   UserX,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import adminService from '../api/services/adminService';
-import ThreeDots from '../assets/three-dots.svg';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import {
+  ActionMenu,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  type MenuOption,
 } from '../components/ui/dropdown-menu';
-import { Input } from '../components/ui/input';
 import { Modal } from '../components/ui/modal';
 import {
   Table,
@@ -30,12 +32,19 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui/table';
+import SearchInput from '../components/SearchInput';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../components/ui/description-list';
+import { LoadingState } from '../components/ui/loading-state';
+import { Pagination } from '../components/ui/pagination';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
+import { showActionToast } from '../notifications/actionToastSlice';
 import { selectToken } from '../preferences/preferenceSlice';
 import {
-  Loading,
-  Pill,
+  LoadError,
   eventLabel,
   fmtDateShort,
   fmtNumber,
@@ -62,6 +71,7 @@ type Action = {
 const PAGE_SIZE = 25;
 
 export default function Users() {
+  const dispatch = useDispatch();
   const token = useSelector(selectToken);
   const [users, setUsers] = useState<AdminUser[]>([]);
   const [adminIds, setAdminIds] = useState<Set<string>>(new Set());
@@ -70,15 +80,12 @@ export default function Users() {
   const [search, setSearch] = useState('');
   const [query, setQuery] = useState('');
   const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
   const [busy, setBusy] = useState<string | null>(null);
   const [menuUserId, setMenuUserId] = useState<string | null>(null);
   const [detail, setDetail] = useState<any | null>(null);
   const [usageFor, setUsageFor] = useState<string | null>(null);
   const [quotaUserId, setQuotaUserId] = useState<string | null>(null);
-  const [feedback, setFeedback] = useState<{
-    ok: boolean;
-    message: string;
-  } | null>(null);
   const [confirm, setConfirm] = useState<{
     message: string;
     submitLabel: string;
@@ -88,6 +95,7 @@ export default function Users() {
 
   const load = useCallback(async () => {
     setLoading(true);
+    setFailed(false);
     try {
       const [usersRes, adminsRes] = await Promise.all([
         adminService.getUsers(
@@ -103,6 +111,9 @@ export default function Users() {
       setAdminIds(
         new Set((adminsJson.admins ?? []).map((a: any) => a.user_id)),
       );
+      setFailed(!usersRes.ok || usersJson.success === false);
+    } catch {
+      setFailed(true);
     } finally {
       setLoading(false);
     }
@@ -112,12 +123,15 @@ export default function Users() {
     load();
   }, [load]);
 
-  // Auto-dismiss the inline feedback banner.
-  useEffect(() => {
-    if (!feedback) return;
-    const id = setTimeout(() => setFeedback(null), 4500);
-    return () => clearTimeout(id);
-  }, [feedback]);
+  // The result shows as a toast in the app's shared ToastViewport
+  // (ActionToast), which auto-dismisses it.
+  const setFeedback = (feedback: { ok: boolean; message: string }) =>
+    dispatch(
+      showActionToast({
+        variant: feedback.ok ? 'success' : 'destructive',
+        message: feedback.message,
+      }),
+    );
 
   const run =
     (fn: () => Promise<Response>, userId: string, successMsg: string) =>
@@ -248,29 +262,18 @@ export default function Users() {
   };
 
   return (
-    <div className="mt-6">
-      {feedback ? (
-        <div
-          className={`mb-4 rounded-xl border px-4 py-2 text-sm ${
-            feedback.ok
-              ? 'border-green-300 bg-green-50 text-green-700 dark:border-green-900/50 dark:bg-green-950/30 dark:text-green-300'
-              : 'border-red-300 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300'
-          }`}
-        >
-          {feedback.message}
-        </div>
-      ) : null}
-
+    <div>
       <div className="mb-4 flex flex-wrap items-center gap-2">
-        <Input
-          placeholder="Filter by user id"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') applySearch();
-          }}
-          className="max-w-xs"
-        />
+        <div className="w-full max-w-xs">
+          <SearchInput
+            label="Filter by user id"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') applySearch();
+            }}
+          />
+        </div>
         <Button variant="outline" size="sm" onClick={applySearch}>
           Search
         </Button>
@@ -290,7 +293,9 @@ export default function Users() {
       </div>
 
       {loading ? (
-        <Loading />
+        <LoadingState fill="block" />
+      ) : failed ? (
+        <LoadError message="Failed to load users." onRetry={load} />
       ) : users.length === 0 ? (
         <p className="text-muted-foreground mt-8 text-sm">No users found.</p>
       ) : (
@@ -313,12 +318,11 @@ export default function Users() {
                   return (
                     <TableRow
                       key={u.user_id}
-                      className="hover:bg-muted/40 cursor-pointer"
                       onClick={() => openDetail(u.user_id)}
                     >
                       <TableCell className="max-w-[280px]">
                         <span
-                          className="block truncate font-mono text-[13px]"
+                          className="block truncate font-mono text-xs"
                           title={u.user_id}
                         >
                           {u.user_id}
@@ -326,9 +330,11 @@ export default function Users() {
                       </TableCell>
                       <TableCell>
                         <div className="flex flex-wrap gap-1">
-                          {isAdmin ? <Pill tone="brand">Admin</Pill> : null}
+                          {isAdmin ? (
+                            <Badge variant="default">Admin</Badge>
+                          ) : null}
                           {!u.active ? (
-                            <Pill tone="danger">Inactive</Pill>
+                            <Badge variant="destructive">Inactive</Badge>
                           ) : null}
                         </div>
                       </TableCell>
@@ -347,56 +353,31 @@ export default function Users() {
                           className="flex items-center justify-end"
                           onClick={(e) => e.stopPropagation()}
                         >
-                          <DropdownMenu
+                          <ActionMenu
                             open={menuUserId === u.user_id}
                             onOpenChange={(open) =>
                               setMenuUserId(open ? u.user_id : null)
                             }
-                          >
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                disabled={disabled}
-                                className="text-muted-foreground hover:text-foreground h-[35px] w-7"
-                                aria-label="User actions"
-                              >
-                                <img
-                                  src={ThreeDots}
-                                  alt="User actions"
-                                  className="filter dark:invert"
-                                />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent
-                              align="end"
-                              className="min-w-[176px]"
-                            >
-                              <DropdownMenuItem
-                                onSelect={() => openDetail(u.user_id)}
-                              >
-                                <Eye size={16} />
-                                <span>View details</span>
-                              </DropdownMenuItem>
-                              {buildActions(u.user_id, isAdmin, u.active).map(
-                                (act) => (
-                                  <DropdownMenuItem
-                                    key={act.key}
-                                    variant={
-                                      act.destructive
-                                        ? 'destructive'
-                                        : 'default'
-                                    }
-                                    onSelect={act.perform}
-                                  >
-                                    <act.icon size={16} />
-                                    <span>{act.label}</span>
-                                  </DropdownMenuItem>
-                                ),
-                              )}
-                            </DropdownMenuContent>
-                          </DropdownMenu>
+                            disabled={disabled}
+                            triggerLabel="User actions"
+                            options={[
+                              {
+                                label: 'View details',
+                                icon: Eye,
+                                onClick: () => openDetail(u.user_id),
+                              },
+                              ...buildActions(u.user_id, isAdmin, u.active).map(
+                                (act): MenuOption => ({
+                                  label: act.label,
+                                  icon: act.icon,
+                                  variant: act.destructive
+                                    ? 'destructive'
+                                    : 'default',
+                                  onClick: act.perform,
+                                }),
+                              ),
+                            ]}
+                          />
                         </div>
                       </TableCell>
                     </TableRow>
@@ -405,29 +386,12 @@ export default function Users() {
               </TableBody>
             </Table>
           </TableContainer>
-          <div className="mt-4 flex items-center justify-between">
-            <p className="text-muted-foreground text-sm">
-              {fmtNumber(total)} users · page {page} of {totalPages}
-            </p>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={page <= 1}
-                onClick={() => setPage((p) => p - 1)}
-              >
-                Previous
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={page >= totalPages}
-                onClick={() => setPage((p) => p + 1)}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
+          <Pagination
+            page={page}
+            pageCount={totalPages}
+            onPageChange={setPage}
+            summary={`${fmtNumber(total)} users`}
+          />
         </>
       )}
 
@@ -437,7 +401,7 @@ export default function Users() {
           modalState={confirmState}
           setModalState={setConfirmState}
           submitLabel={confirm.submitLabel}
-          variant="danger"
+          variant="destructive"
           handleSubmit={() => {
             confirm.run();
             setConfirm(null);
@@ -460,80 +424,78 @@ export default function Users() {
         size="lg"
         footer={
           detail ? (
-            <div className="flex flex-wrap justify-end gap-2">
-              {buildActions(
-                detail.user.user_id,
-                (detail.roles ?? []).includes('admin'),
-                detail.user?.active ?? true,
-              ).map((act) => (
-                <Button
-                  key={act.key}
-                  type="button"
-                  variant={act.destructive ? 'destructive-outline' : 'outline'}
-                  size="sm"
-                  onClick={() => {
-                    // Close the detail dialog before any confirm dialog opens
-                    // (avoids stacked modals); the list + banner reflect the result.
-                    setDetail(null);
-                    act.perform();
-                  }}
-                >
-                  <act.icon size={16} />
-                  {act.label}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="outline" size="lg" shape="pill">
+                  Actions
+                  <ChevronDown />
                 </Button>
-              ))}
-            </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {buildActions(
+                  detail.user.user_id,
+                  (detail.roles ?? []).includes('admin'),
+                  detail.user?.active ?? true,
+                ).map((act) => (
+                  <DropdownMenuItem
+                    key={act.key}
+                    variant={act.destructive ? 'destructive' : 'default'}
+                    onSelect={() => {
+                      // Close the detail dialog before any confirm dialog opens
+                      // (avoids stacked modals); the list + toast reflect the result.
+                      setDetail(null);
+                      act.perform();
+                    }}
+                  >
+                    <act.icon aria-hidden="true" />
+                    <span>{act.label}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
           ) : undefined
         }
       >
         {detail ? (
-          <div className="space-y-4 text-sm">
+          <div className="flex flex-col gap-4 text-sm">
             <div>
               <p className="text-muted-foreground mb-1 text-xs">
                 Roles & status
               </p>
               <div className="flex flex-wrap gap-2">
                 {(detail.roles ?? []).map((r: string) => (
-                  <Pill key={r} tone={r === 'admin' ? 'brand' : 'muted'}>
+                  <Badge
+                    key={r}
+                    variant={r === 'admin' ? 'default' : 'neutral'}
+                  >
                     {r}
-                  </Pill>
+                  </Badge>
                 ))}
                 {detail.user?.active ? (
-                  <Pill tone="success">Active</Pill>
+                  <Badge variant="success">Active</Badge>
                 ) : (
-                  <Pill tone="danger">Inactive</Pill>
+                  <Badge variant="destructive">Inactive</Badge>
                 )}
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-x-6 gap-y-2">
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">Agents</span>
-                <span className="tabular-nums">
-                  {fmtNumber(detail.counts?.agents)}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">Sources</span>
-                <span className="tabular-nums">
-                  {fmtNumber(detail.counts?.sources)}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">Conversations</span>
-                <span className="tabular-nums">
-                  {fmtNumber(detail.counts?.conversations)}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-muted-foreground">Tokens (30d)</span>
-                <span className="tabular-nums">
-                  {fmtNumber(detail.counts?.tokens_30d)}
-                </span>
-              </div>
-            </div>
+            <DescriptionList layout="justified" size="sm" columns={2}>
+              <DescriptionItem label="Agents">
+                {fmtNumber(detail.counts?.agents)}
+              </DescriptionItem>
+              <DescriptionItem label="Sources">
+                {fmtNumber(detail.counts?.sources)}
+              </DescriptionItem>
+              <DescriptionItem label="Conversations">
+                {fmtNumber(detail.counts?.conversations)}
+              </DescriptionItem>
+              <DescriptionItem label="Tokens (30d)">
+                {fmtNumber(detail.counts?.tokens_30d)}
+              </DescriptionItem>
+            </DescriptionList>
             <Button
               variant="outline"
               size="sm"
+              className="self-start"
               onClick={() => {
                 // Close the detail dialog before the usage dialog opens, so
                 // the two never stack.
@@ -548,7 +510,7 @@ export default function Users() {
               <p className="text-muted-foreground mb-1 text-xs">
                 Recent auth events
               </p>
-              <div className="max-h-64 space-y-1 overflow-auto">
+              <div className="flex max-h-64 flex-col gap-1 overflow-auto">
                 {(detail.recent_events ?? []).length === 0 ? (
                   <p className="text-muted-foreground">None</p>
                 ) : (
diff --git a/frontend/src/admin/index.tsx b/frontend/src/admin/index.tsx
index 65ec1c7c..5a39bb09 100644
--- a/frontend/src/admin/index.tsx
+++ b/frontend/src/admin/index.tsx
@@ -2,7 +2,7 @@ import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 
 import { useMediaQuery } from '../hooks';
 import SectionIndexPage from '../navigation/SectionIndexPage';
-import { CurrentSectionHeader } from '../navigation/SectionPageHeader';
+import SectionShell from '../navigation/SectionShell';
 import { ADMIN_SECTION } from '../navigation/sections';
 import Admins from './Admins';
 import Activity from './Activity';
@@ -18,32 +18,30 @@ import Users from './Users';
  */
 export default function Admin() {
   const location = useLocation();
-  const { isMobile, isTablet } = useMediaQuery();
+  const { isMobile } = useMediaQuery();
 
-  const showIndex =
-    (isMobile || isTablet) && location.pathname === ADMIN_SECTION.rootPath;
+  const showIndex = isMobile && location.pathname === ADMIN_SECTION.rootPath;
+
+  if (showIndex) {
+    return (
+      <SectionShell width="wide" header={false}>
+        <SectionIndexPage section={ADMIN_SECTION} />
+      </SectionShell>
+    );
+  }
 
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-7xl">
-        {showIndex ? (
-          <SectionIndexPage section={ADMIN_SECTION} />
-        ) : (
-          <>
-            <CurrentSectionHeader />
-            <Routes>
-              <Route index element={<Overview />} />
-              <Route path="overview" element={<Overview />} />
-              <Route path="users" element={<Users />} />
-              <Route path="roles" element={<Admins />} />
-              <Route path="usage" element={<Usage />} />
-              <Route path="quotas" element={<Quotas />} />
-              <Route path="audit" element={<Activity />} />
-              <Route path="*" element={<Navigate to="/admin" replace />} />
-            </Routes>
-          </>
-        )}
-      </div>
-    </div>
+    <SectionShell width="wide">
+      <Routes>
+        <Route index element={<Overview />} />
+        <Route path="overview" element={<Overview />} />
+        <Route path="users" element={<Users />} />
+        <Route path="roles" element={<Admins />} />
+        <Route path="usage" element={<Usage />} />
+        <Route path="quotas" element={<Quotas />} />
+        <Route path="audit" element={<Activity />} />
+        <Route path="*" element={<Navigate to="/admin" replace />} />
+      </Routes>
+    </SectionShell>
   );
 }
diff --git a/frontend/src/admin/usageChartData.test.ts b/frontend/src/admin/usageChartData.test.ts
index a92de3ef..c06b52cf 100644
--- a/frontend/src/admin/usageChartData.test.ts
+++ b/frontend/src/admin/usageChartData.test.ts
@@ -68,6 +68,34 @@ describe('buildUsageChart', () => {
     expect(chart.datasets[0].label).toBe('unknown');
   });
 
+  it('folds more than five groups into four plus Other in chart-5', () => {
+    const keys = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
+    const chart = buildUsageChart(
+      keys.map((key, i) =>
+        // 'a' is the smallest; b..e are the four largest.
+        bucket({ group_key: key, prompt_tokens: i === 0 ? 1 : 100 - i * 10 }),
+      ),
+      'model',
+      'tokens',
+    );
+    expect(chart.datasets.map((d) => d.label)).toEqual([
+      'b',
+      'c',
+      'd',
+      'e',
+      'Other',
+    ]);
+    expect(chart.datasets.map((d) => d.backgroundColor)).toEqual([
+      'color-0',
+      'color-1',
+      'color-2',
+      'color-3',
+      'color-4',
+    ]);
+    // Other sums a, f and g (prompt 1, 50, 40, plus 20 generated each).
+    expect(chart.datasets[4].data).toEqual([1 + 50 + 40 + 60]);
+  });
+
   it('handles an empty series', () => {
     const chart = buildUsageChart([], 'model', 'cost');
     expect(chart.labels).toEqual([]);
diff --git a/frontend/src/admin/usageChartData.ts b/frontend/src/admin/usageChartData.ts
index ee862e98..4148ba0d 100644
--- a/frontend/src/admin/usageChartData.ts
+++ b/frontend/src/admin/usageChartData.ts
@@ -1,3 +1,5 @@
+import { foldSeries, OTHER_SERIES_KEY } from '../settings/foldSeries';
+import type { ChartPalette } from '../utils/chartUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 import { seriesColor, usageColors } from './UsageChart';
 
@@ -34,12 +36,20 @@ function valueOf(row: UsageBucket, metric: Metric): number {
  * Ungrouped gives one dataset per token kind (or a single cost series);
  * grouped gives one dataset per group key, each aligned to the shared bucket
  * axis so a group missing a day plots 0 rather than shifting the whole series
- * left by one bar.
+ * left by one bar. Past five groups, the four largest stay and the rest sum
+ * into one "Other" series (`foldSeries`), so no chart colour repeats.
+ *
+ * @param series Usage rows from the server.
+ * @param groupBy How the rows are grouped.
+ * @param metric Tokens or cost.
+ * @param palette The resolved theme palette; read from the DOM when omitted.
+ * @returns Chart.js bar data.
  */
 export function buildUsageChart(
   series: UsageBucket[],
   groupBy: GroupBy,
   metric: Metric,
+  palette?: ChartPalette,
 ) {
   const buckets = Array.from(new Set(series.map((row) => row.bucket))).sort();
   const labels = buckets.map((bucket) => formatDate(bucket));
@@ -52,12 +62,12 @@ export function buildUsageChart(
           {
             label: 'Cost',
             data: series.map((row) => row.cost),
-            backgroundColor: seriesColor(0),
+            backgroundColor: seriesColor(0, palette),
           },
         ],
       };
     }
-    const colors = usageColors();
+    const colors = usageColors(palette);
     return {
       labels,
       datasets: [
@@ -78,20 +88,29 @@ export function buildUsageChart(
   const keys = Array.from(
     new Set(series.map((row) => row.group_key ?? 'unknown')),
   );
-  return {
-    labels,
-    datasets: keys.map((key, index) => {
+  // Each group aligned to the shared bucket axis, then folded past five.
+  const entries = foldSeries(
+    keys.map((key): [string, Record<string, number>] => {
       const byBucket = new Map(
         series
           .filter((row) => (row.group_key ?? 'unknown') === key)
           .map((row) => [row.bucket, valueOf(row, metric)]),
       );
-      return {
-        label: key,
-        data: buckets.map((bucket) => byBucket.get(bucket) ?? 0),
-        backgroundColor: seriesColor(index),
-      };
+      return [
+        key,
+        Object.fromEntries(
+          buckets.map((bucket) => [bucket, byBucket.get(bucket) ?? 0]),
+        ),
+      ];
     }),
+  );
+  return {
+    labels,
+    datasets: entries.map(([key, values], index) => ({
+      label: key === OTHER_SERIES_KEY ? 'Other' : key,
+      data: buckets.map((bucket) => values[bucket] ?? 0),
+      backgroundColor: seriesColor(index, palette),
+    })),
   };
 }
 
diff --git a/frontend/src/agents/AgentCard.tsx b/frontend/src/agents/AgentCard.tsx
index 01564c71..b8f8d71f 100644
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -1,44 +1,32 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Users } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import {
+  Activity,
+  Copy,
+  Download,
+  ExternalLink,
+  Folder,
+  Pencil,
+  Pin,
+  PinOff,
+  Trash2,
+  Users,
+} from 'lucide-react';
 
 import userService from '../api/services/userService';
-import Download from '../assets/download.svg';
-import Duplicate from '../assets/duplicate.svg';
-import Edit from '../assets/edit.svg';
-import FolderIcon from '../assets/folder.svg';
-import Link from '../assets/link-gray.svg';
-import Monitoring from '../assets/monitoring.svg';
-import Pin from '../assets/pin.svg';
-import Trash from '../assets/red-trash.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import UnPin from '../assets/unpin.svg';
 import { Avatar } from '../components/ui/avatar';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { Card, CardDescription, CardTitle } from '../components/ui/card';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { Modal } from '../components/ui/modal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import MoveToFolderModal from '../modals/MoveToFolderModal';
 import { ActiveState } from '../models/misc';
 import { useSidebarLevel } from '../navigation/SidebarLevelProvider';
 import ShareToTeamModal from '../teams/ShareToTeamModal';
-
-type AgentMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
 import {
   selectAgents,
   selectToken,
@@ -82,57 +70,43 @@ export default function AgentCard({
   const [shareModalOpen, setShareModalOpen] = useState(false);
   const [exportError, setExportError] = useState<string | null>(null);
 
-  const menuOptionsConfig: Record<string, AgentMenuOption[]> = {
+  const openEditor = () => {
+    if (agent.agent_type === 'workflow') {
+      goToLevel(agentEditPath(agent.id, true));
+    } else {
+      goToLevel(agentEditPath(agent.id));
+    }
+  };
+
+  const pinOption: MenuOption = {
+    icon: agent.pinned ? PinOff : Pin,
+    label: agent.pinned ? t('agents.card.unpin') : t('agents.card.pin'),
+    onClick: () => togglePin(),
+  };
+
+  const menuOptionsConfig: Record<string, MenuOption[]> = {
     template: [
       {
-        icon: Duplicate,
+        icon: Copy,
         label: t('modals.prompts.duplicate'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleDuplicate();
-        },
-        variant: 'default',
-        iconWidth: 18,
-        iconHeight: 18,
+        onClick: () => handleDuplicate(),
       },
     ],
     user: [
       {
-        icon: Monitoring,
+        icon: Activity,
         label: t('agents.form.buttons.logs'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          goToLevel(agentLogsPath(agent.id));
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: () => goToLevel(agentLogsPath(agent.id)),
       },
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('agents.edit'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          if (agent.agent_type === 'workflow') {
-            goToLevel(agentEditPath(agent.id, true));
-          } else {
-            goToLevel(agentEditPath(agent.id));
-          }
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: openEditor,
       },
       {
         icon: Download,
         label: t('agents.exportAgent'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleExport();
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: () => handleExport(),
       },
       // Sharing is an owner-only action: only show it for agents the user
       // owns ('user'), not agents shared into their workspace by a team.
@@ -141,54 +115,21 @@ export default function AgentCard({
             {
               icon: Users,
               label: t('agents.shareWithTeam'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                setShareModalOpen(true);
-              },
-              variant: 'default' as const,
-              iconWidth: 14,
-              iconHeight: 14,
-            },
-          ]
-        : []),
-      ...(agent.status === 'published'
-        ? [
-            {
-              icon: agent.pinned ? UnPin : Pin,
-              label: agent.pinned
-                ? t('agents.card.unpin')
-                : t('agents.card.pin'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                togglePin();
-              },
-              variant: 'default' as const,
-              iconWidth: 18,
-              iconHeight: 18,
+              onClick: () => setShareModalOpen(true),
             },
           ]
         : []),
+      ...(agent.status === 'published' ? [pinOption] : []),
       {
-        icon: FolderIcon,
+        icon: Folder,
         label: t('agents.folders.moveToFolder'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          setMoveModalState('ACTIVE');
-        },
-        variant: 'default',
-        iconWidth: 16,
-        iconHeight: 15,
+        onClick: () => setMoveModalState('ACTIVE'),
       },
       {
-        icon: Trash,
+        icon: Trash2,
         label: t('agents.form.buttons.delete'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          setDeleteConfirmation('ACTIVE');
-        },
+        onClick: () => setDeleteConfirmation('ACTIVE'),
         variant: 'destructive',
-        iconWidth: 13,
-        iconHeight: 13,
       },
     ],
     // Agents shared with the user via a team. They don't own it, so only
@@ -197,71 +138,24 @@ export default function AgentCard({
     // Logs / Export / Share / Move-to-folder / Delete stay owner-only.
     team: [
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('agents.edit'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          if (agent.agent_type === 'workflow') {
-            goToLevel(agentEditPath(agent.id, true));
-          } else {
-            goToLevel(agentEditPath(agent.id));
-          }
-        },
-        variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
+        onClick: openEditor,
       },
-      ...(agent.status === 'published'
-        ? [
-            {
-              icon: agent.pinned ? UnPin : Pin,
-              label: agent.pinned
-                ? t('agents.card.unpin')
-                : t('agents.card.pin'),
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                togglePin();
-              },
-              variant: 'default' as const,
-              iconWidth: 18,
-              iconHeight: 18,
-            },
-          ]
-        : []),
+      ...(agent.status === 'published' ? [pinOption] : []),
     ],
     shared: [
       {
-        icon: Link,
+        icon: ExternalLink,
         label: t('agents.card.open'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          navigate(sharedAgentPath(agent.shared_token));
-        },
-        variant: 'default',
-        iconWidth: 12,
-        iconHeight: 12,
+        onClick: () => navigate(sharedAgentPath(agent.shared_token)),
       },
+      pinOption,
       {
-        icon: agent.pinned ? UnPin : Pin,
-        label: agent.pinned ? t('agents.card.unpin') : t('agents.card.pin'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          togglePin();
-        },
-        variant: 'default',
-        iconWidth: 18,
-        iconHeight: 18,
-      },
-      {
-        icon: Trash,
+        icon: Trash2,
         label: t('agents.card.remove'),
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleHideSharedAgent();
-        },
+        onClick: () => handleHideSharedAgent(),
         variant: 'destructive',
-        iconWidth: 13,
-        iconHeight: 13,
       },
     ],
   };
@@ -384,11 +278,14 @@ export default function AgentCard({
     updateAgents?.(updatedAgents);
   };
   return (
-    <div
+    <Card
+      variant="filled"
+      interactive={agent.status === 'published'}
+      padding="lg"
       role={agent.status === 'published' ? 'button' : undefined}
       tabIndex={agent.status === 'published' ? 0 : undefined}
       aria-label={agent.status === 'published' ? agent.name : undefined}
-      className={`bg-muted hover:bg-accent focus-visible:ring-ring/50 focus-visible:border-ring relative flex h-44 flex-col justify-between rounded-2xl px-4 py-5 outline-none focus-visible:ring-[3px] sm:w-48 sm:px-6 ${agent.status === 'published' && 'cursor-pointer'}`}
+      className="relative h-44 justify-between"
       onClick={(e) => {
         e.stopPropagation();
         handleClick();
@@ -403,69 +300,30 @@ export default function AgentCard({
         }
       }}
     >
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            onClick={(e) => e.stopPropagation()}
-            className="absolute top-4 right-4 z-10 cursor-pointer"
-            aria-label="agent-actions"
-          >
-            <img
-              src={ThreeDots}
-              alt={'use-agent'}
-              className="h-[19px] w-[19px]"
-            />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="min-w-[144px]">
-          {menuOptions.map((option, index) => (
-            <DropdownMenuItem
-              key={index}
-              variant={option.variant}
-              onClick={(e) => e.stopPropagation()}
-              onSelect={(event) => {
-                option.onClick(event as unknown as SyntheticEvent);
-              }}
-            >
-              {typeof option.icon === 'string' ? (
-                <img
-                  src={option.icon}
-                  alt=""
-                  width={option.iconWidth ?? 16}
-                  height={option.iconHeight ?? 16}
-                />
-              ) : (
-                <option.icon
-                  size={Math.max(
-                    option.iconWidth ?? 16,
-                    option.iconHeight ?? 16,
-                  )}
-                  strokeWidth={1.75}
-                  aria-hidden="true"
-                />
-              )}
-              <span>{option.label}</span>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <ActionMenu
+        options={menuOptions}
+        triggerLabel={t('agents.card.actions')}
+        align="end"
+        className="absolute top-3 right-3 z-10"
+      />
       {/* Team access badge — pinned to the top row, left of the ⋯ menu
-          (right-11 clears the 19px trigger at right-4) so the two align. */}
+          (right-11 clears the 28px trigger at right-3) so the two align. */}
       {agent.ownership === 'team' && (
-        <span className="bg-muted dark:bg-accent text-muted-foreground absolute top-4 right-11 z-10 flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium">
-          <Users size={11} strokeWidth={2} aria-hidden="true" />
+        <Badge variant="neutral" className="absolute top-4 right-11 z-10">
+          <Users aria-hidden="true" />
           {agent.team_access === 'editor'
             ? t('agents.teamBadge.editor')
             : t('agents.teamBadge.viewer')}
-        </span>
+        </Badge>
       )}
       <div className="w-full">
         <div className="flex w-full items-center gap-1 px-1">
           <Avatar
             src={agent.image}
             alt={`${agent.name}`}
-            imgClassName="h-7 w-7 rounded-full object-contain"
+            size="xs"
+            shape="circle"
+            imgClassName="size-7 object-contain"
           />
           {agent.status === 'draft' && (
             <p className="text-foreground text-xs opacity-50">
@@ -473,16 +331,13 @@ export default function AgentCard({
             </p>
           )}
         </div>
-        <div className="mt-2">
-          <p
-            title={agent.name}
-            className="text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
-          >
+        <div className="mt-2 px-1">
+          <CardTitle title={agent.name} className="truncate capitalize">
             {agent.name}
-          </p>
-          <p className="dark:text-muted-foreground text-muted-foreground mt-1 h-20 overflow-auto px-1 text-xs leading-relaxed">
+          </CardTitle>
+          <CardDescription size="xs" className="mt-1 line-clamp-3">
             {agent.description}
-          </p>
+          </CardDescription>
         </div>
       </div>
       <ConfirmationModal
@@ -495,7 +350,7 @@ export default function AgentCard({
           setDeleteConfirmation('INACTIVE');
         }}
         cancelLabel={t('cancel')}
-        variant="danger"
+        variant="destructive"
       />
       <Modal
         open={exportError !== null}
@@ -508,7 +363,8 @@ export default function AgentCard({
           <Button
             type="button"
             onClick={() => setExportError(null)}
-            className="rounded-3xl px-5"
+            size="lg"
+            shape="pill"
           >
             {t('agents.close')}
           </Button>
@@ -532,6 +388,6 @@ export default function AgentCard({
           onClose={() => setShareModalOpen(false)}
         />
       )}
-    </div>
+    </Card>
   );
 }
diff --git a/frontend/src/agents/AgentLogs.tsx b/frontend/src/agents/AgentLogs.tsx
index 43b6cad7..a286ae28 100644
--- a/frontend/src/agents/AgentLogs.tsx
+++ b/frontend/src/agents/AgentLogs.tsx
@@ -8,8 +8,7 @@ import { selectToken } from '../preferences/preferenceSlice';
 import Analytics from '../settings/Analytics';
 import Logs from '../settings/Logs';
 import { formatDateTime } from '../utils/dateTimeUtils';
-import { CurrentSectionHeader } from '../navigation/SectionPageHeader';
-import SectionPills from '../navigation/SectionPills';
+import SectionShell from '../navigation/SectionShell';
 import GuardrailEvents from './components/GuardrailEvents';
 import { Agent } from './types';
 
@@ -40,35 +39,35 @@ export default function AgentLogs() {
   }, [agentId, token]);
 
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-6xl">
-        <CurrentSectionHeader />
-        <SectionPills className="mt-4" />
-        <div className="mt-6 flex flex-col gap-3">
-          {agent && (
-            <div className="flex flex-col gap-1">
-              <p className="text-foreground">{agent.name}</p>
-              <p className="text-muted-foreground text-xs">
-                {agent.last_used_at
-                  ? t('agents.logs.lastUsedAt') +
-                    ' ' +
-                    formatDateTime(agent.last_used_at)
-                  : t('agents.logs.noUsageHistory')}
-              </p>
-            </div>
-          )}
-        </div>
-        {agentId && (
-          <>
+    <SectionShell pills>
+      <div className="flex flex-col gap-3">
+        {agent && (
+          <div className="flex flex-col gap-1">
+            <p className="text-foreground">{agent.name}</p>
+            <p className="text-muted-foreground text-xs">
+              {agent.last_used_at
+                ? t('agents.logs.lastUsedAt') +
+                  ' ' +
+                  formatDateTime(agent.last_used_at)
+                : t('agents.logs.noUsageHistory')}
+            </p>
+          </div>
+        )}
+      </div>
+      {agentId && (
+        <>
+          <div className="mt-8">
             <Analytics agentId={agentId} />
-            <GuardrailEvents agentId={agentId} />
+          </div>
+          <GuardrailEvents agentId={agentId} />
+          <div className="mt-8">
             <Logs
               agentId={agentId}
               tableHeader={t('agents.logs.tableHeader')}
             />
-          </>
-        )}
-      </div>
-    </div>
+          </div>
+        </>
+      )}
+    </SectionShell>
   );
 }
diff --git a/frontend/src/agents/AgentPageHeader.test.tsx b/frontend/src/agents/AgentPageHeader.test.tsx
new file mode 100644
index 00000000..d3604a1d
--- /dev/null
+++ b/frontend/src/agents/AgentPageHeader.test.tsx
@@ -0,0 +1,56 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import AgentPageHeader from './AgentPageHeader';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('AgentPageHeader sub-nav', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('renders the tabs as underline tab buttons, marking the current page', () => {
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <AgentPageHeader
+            agentId="a1"
+            agentName="Renewals"
+            currentPage="logs"
+          />
+        </MemoryRouter>,
+      );
+    });
+    const nav = container.querySelector(
+      'nav[aria-label="agents.pageHeader.subnavAriaLabel"]',
+    );
+    const tabs = Array.from(nav?.children ?? []);
+    expect(tabs).toHaveLength(3);
+    for (const tab of tabs) {
+      expect(tab.getAttribute('data-variant')).toBe('tab');
+      expect(tab.getAttribute('data-size')).toBe('inline');
+    }
+    const current = tabs[1];
+    expect(current.tagName).toBe('SPAN');
+    expect(current.getAttribute('aria-current')).toBe('page');
+    expect(current.getAttribute('data-active')).toBe('true');
+    expect(tabs[0].tagName).toBe('A');
+    expect(tabs[0].getAttribute('data-active')).not.toBe('true');
+  });
+});
diff --git a/frontend/src/agents/AgentPageHeader.tsx b/frontend/src/agents/AgentPageHeader.tsx
index 77005df1..38966892 100644
--- a/frontend/src/agents/AgentPageHeader.tsx
+++ b/frontend/src/agents/AgentPageHeader.tsx
@@ -10,6 +10,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 import {
@@ -100,7 +101,7 @@ export default function AgentPageHeader({
           <BreadcrumbSeparator />
           <BreadcrumbItem>
             {currentPage === 'overview' ? (
-              <BreadcrumbPage title={displayName} className="w-[16ch] truncate">
+              <BreadcrumbPage title={displayName} className="w-[16ch]">
                 {displayName}
               </BreadcrumbPage>
             ) : (
@@ -133,35 +134,31 @@ export default function AgentPageHeader({
       >
         {tabs.map((tab) => {
           const isActive = tab.id === currentPage;
-          // Always render a 2px bottom border so row height stays constant
-          // between active/inactive; only the color changes.
-          const baseClasses =
-            'whitespace-nowrap border-b-2 pb-1 text-sm font-medium transition-colors';
+          // -mb-px lays the tab's 2px underline over the nav's 1px baseline.
           if (isActive) {
             return (
-              <span
+              <Button
                 key={tab.id}
-                aria-current="page"
-                className={cn(
-                  baseClasses,
-                  'border-primary text-foreground -mb-px',
-                )}
+                asChild
+                variant="tab"
+                size="inline"
+                data-active
+                className="-mb-px"
               >
-                {tab.label}
-              </span>
+                <span aria-current="page">{tab.label}</span>
+              </Button>
             );
           }
           return (
-            <Link
+            <Button
               key={tab.id}
-              to={tab.href}
-              className={cn(
-                baseClasses,
-                'text-muted-foreground hover:text-foreground hover:border-border/60 -mb-px border-transparent',
-              )}
+              asChild
+              variant="tab"
+              size="inline"
+              className="-mb-px"
             >
-              {tab.label}
-            </Link>
+              <Link to={tab.href}>{tab.label}</Link>
+            </Button>
           );
         })}
       </nav>
diff --git a/frontend/src/agents/AgentPreview.tsx b/frontend/src/agents/AgentPreview.tsx
index 408d6da0..74a1494b 100644
--- a/frontend/src/agents/AgentPreview.tsx
+++ b/frontend/src/agents/AgentPreview.tsx
@@ -120,7 +120,7 @@ export default function AgentPreview() {
               <MessageSquare className="text-muted-foreground size-6" />
             </div>
             <p className="text-foreground text-sm font-medium">
-              Test your agent
+              {t('agents.preview.emptyTitle')}
             </p>
           </section>
         ) : (
diff --git a/frontend/src/agents/AgentsList.tsx b/frontend/src/agents/AgentsList.tsx
index 208a85d0..09136fd8 100644
--- a/frontend/src/agents/AgentsList.tsx
+++ b/frontend/src/agents/AgentsList.tsx
@@ -1,4 +1,3 @@
-import { Search } from 'lucide-react';
 import {
   Fragment,
   useCallback,
@@ -39,7 +38,9 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '../components/ui/breadcrumb';
-import { CurrentSectionHeader } from '../navigation/SectionPageHeader';
+import SectionShell from '../navigation/SectionShell';
+import PageToolbar from '../components/PageToolbar';
+import SearchInput from '../components/SearchInput';
 import SectionPills from '../navigation/SectionPills';
 import { useAgentSearch } from './hooks/useAgentSearch';
 import { agentsListPath, filterFromPath } from './paths';
@@ -173,74 +174,62 @@ export default function AgentsList() {
     activeFilter === 'all';
 
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-6xl">
-        <CurrentSectionHeader />
-        <p className="text-muted-foreground mt-5 text-sm leading-6">
-          {t('agents.description')}
-        </p>
+    <SectionShell>
+      <p className="text-muted-foreground text-sm leading-6">
+        {t('agents.description')}
+      </p>
 
-        <SectionPills className="mt-6" />
+      <SectionPills className="mt-6" />
 
-        <div className="mt-6 flex flex-col gap-4 pb-4">
-          <div className="w-full max-w-md">
-            <Input
-              type="text"
+      <div className="mt-6">
+        <PageToolbar
+          search={
+            <SearchInput
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               label={t('agents.searchPlaceholder')}
-              labelBgClassName="bg-background"
-              className="rounded-full"
-              leftIcon={
-                <Search
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
             />
-          </div>
-        </div>
-
-        {visibleSections.map((sectionConfig) => (
-          <AgentSection
-            key={sectionConfig.id}
-            config={sectionConfig}
-            filteredAgents={
-              filteredAgentsBySection[sectionConfig.id as AgentSectionId]
-            }
-            totalAgents={
-              totalAgentsBySection[sectionConfig.id as AgentSectionId]
-            }
-            searchQuery={searchQuery}
-            isFilteredView={activeFilter !== 'all'}
-            isLoading={isLoading[sectionConfig.id as AgentSectionId]}
-            folders={sectionConfig.id === 'user' ? folders : null}
-            folderPath={sectionConfig.id === 'user' ? folderPath : []}
-            onFolderPathChange={
-              sectionConfig.id === 'user' ? setFolderPath : undefined
-            }
-            onCreateFolder={handleSubmitNewFolder}
-            onDeleteFolder={handleDeleteFolder}
-            onRenameFolder={handleRenameFolder}
-            setModalFolderId={setModalFolderId}
-            setShowAgentTypeModal={setShowAgentTypeModal}
-          />
-        ))}
-
-        {showSearchEmptyState && (
-          <div className="text-muted-foreground mt-12 flex flex-col items-center justify-center gap-2">
-            <p className="text-lg">{t('agents.noSearchResults')}</p>
-            <p className="text-sm">{t('agents.tryDifferentSearch')}</p>
-          </div>
-        )}
-
-        <AgentTypeModal
-          isOpen={showAgentTypeModal}
-          onClose={() => setShowAgentTypeModal(false)}
-          folderId={modalFolderId}
+          }
         />
       </div>
-    </div>
+
+      {visibleSections.map((sectionConfig) => (
+        <AgentSection
+          key={sectionConfig.id}
+          config={sectionConfig}
+          filteredAgents={
+            filteredAgentsBySection[sectionConfig.id as AgentSectionId]
+          }
+          totalAgents={totalAgentsBySection[sectionConfig.id as AgentSectionId]}
+          searchQuery={searchQuery}
+          isFilteredView={activeFilter !== 'all'}
+          isLoading={isLoading[sectionConfig.id as AgentSectionId]}
+          folders={sectionConfig.id === 'user' ? folders : null}
+          folderPath={sectionConfig.id === 'user' ? folderPath : []}
+          onFolderPathChange={
+            sectionConfig.id === 'user' ? setFolderPath : undefined
+          }
+          onCreateFolder={handleSubmitNewFolder}
+          onDeleteFolder={handleDeleteFolder}
+          onRenameFolder={handleRenameFolder}
+          setModalFolderId={setModalFolderId}
+          setShowAgentTypeModal={setShowAgentTypeModal}
+        />
+      ))}
+
+      {showSearchEmptyState && (
+        <div className="text-muted-foreground mt-12 flex flex-col items-center justify-center gap-2">
+          <p className="text-lg">{t('agents.noSearchResults')}</p>
+          <p className="text-sm">{t('agents.tryDifferentSearch')}</p>
+        </div>
+      )}
+
+      <AgentTypeModal
+        isOpen={showAgentTypeModal}
+        onClose={() => setShowAgentTypeModal(false)}
+        folderId={modalFolderId}
+      />
+    </SectionShell>
   );
 }
 
@@ -432,7 +421,7 @@ function AgentSection({
         {config.showNewAgentButton && (
           <Button
             type="button"
-            className="rounded-full text-white"
+            shape="pill"
             onClick={() => {
               setModalFolderId(null);
               setShowAgentTypeModal(true);
@@ -453,6 +442,9 @@ function AgentSection({
             // Drilling into a folder is a trail, not a back button — the
             // sidebar's back is the only thing that means "leave".
             <Breadcrumb>
+              {/* eslint-disable-next-line shadcn/no-restyle -- the folder
+                  trail stands in for the section <h2>, so it keeps heading
+                  typography (DESIGN.md Approved exceptions). */}
               <BreadcrumbList className="text-foreground gap-2 text-lg font-semibold sm:gap-2">
                 <BreadcrumbItem>
                   <BreadcrumbLink asChild>
@@ -469,7 +461,9 @@ function AgentSection({
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
                       {index === breadcrumbItems.length - 1 ? (
-                        <BreadcrumbPage>{item.name}</BreadcrumbPage>
+                        <BreadcrumbPage className="max-w-[32ch]">
+                          {item.name}
+                        </BreadcrumbPage>
                       ) : (
                         <BreadcrumbLink asChild>
                           <button
@@ -525,7 +519,8 @@ function AgentSection({
               <Button
                 type="button"
                 variant="outline"
-                className="bg-card shrink-0 rounded-full whitespace-nowrap"
+                shape="pill"
+                className="shrink-0 whitespace-nowrap"
                 onClick={() => {
                   setIsCreatingFolder(true);
                   setTimeout(() => newFolderInputRef.current?.focus(), 0);
@@ -538,7 +533,8 @@ function AgentSection({
             <Button
               type="button"
               variant="outline"
-              className="bg-card shrink-0 rounded-full whitespace-nowrap"
+              shape="pill"
+              className="shrink-0 whitespace-nowrap"
               onClick={() => setShowImportModal(true)}
             >
               {t('agents.importAgent')}
@@ -547,7 +543,8 @@ function AgentSection({
           {config.showNewAgentButton && (
             <Button
               type="button"
-              className="shrink-0 rounded-full whitespace-nowrap text-white"
+              shape="pill"
+              className="shrink-0 whitespace-nowrap"
               onClick={() => {
                 setModalFolderId(currentFolderId);
                 setShowAgentTypeModal(true);
@@ -565,14 +562,14 @@ function AgentSection({
 
       <div className="flex flex-col gap-4">
         {isLoading ? (
-          <div className="grid grid-cols-2 gap-3 sm:flex sm:flex-wrap">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             <SkeletonLoader component="agentCards" count={4} />
           </div>
         ) : (
           <>
             {/* Show subfolders at current level */}
             {config.id === 'user' && currentLevelFolders.length > 0 && (
-              <div className="grid grid-cols-2 gap-3 sm:flex sm:flex-wrap">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 {currentLevelFolders.map((folder) => (
                   <FolderCard
                     key={folder.id}
@@ -580,7 +577,6 @@ function AgentSection({
                     agentCount={getAgentsForFolder(folder.id).length}
                     onDelete={onDeleteFolder}
                     onRename={onRenameFolder}
-                    isExpanded={false}
                     onToggleExpand={handleNavigateIntoFolder}
                   />
                 ))}
@@ -589,7 +585,7 @@ function AgentSection({
 
             {/* Show agents at current level */}
             {unfolderedAgents.length > 0 ? (
-              <div className="grid grid-cols-2 gap-3 sm:flex sm:flex-wrap">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 {unfolderedAgents.map((agent) => (
                   <AgentCard
                     key={agent.id}
@@ -610,7 +606,8 @@ function AgentSection({
                 {config.showNewAgentButton && !currentFolderId && (
                   <Button
                     type="button"
-                    className="ml-2 rounded-full text-white"
+                    shape="pill"
+                    className="ml-2"
                     onClick={() => {
                       setModalFolderId(currentFolderId);
                       setShowAgentTypeModal(true);
diff --git a/frontend/src/agents/FolderCard.tsx b/frontend/src/agents/FolderCard.tsx
index 5a5d6fe6..f23b1278 100644
--- a/frontend/src/agents/FolderCard.tsx
+++ b/frontend/src/agents/FolderCard.tsx
@@ -1,35 +1,20 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Pencil, Trash2 } from 'lucide-react';
 
-import Edit from '../assets/edit.svg';
-import Trash from '../assets/red-trash.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { Card, CardTitle } from '../components/ui/card';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import FolderNameModal from '../modals/FolderManagementModal';
 import { ActiveState } from '../models/misc';
-import { AgentFolder } from './types';
 
-type FolderMenuOption = {
-  icon: string;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
+import { AgentFolder } from './types';
 
 type FolderCardProps = {
   folder: AgentFolder;
   agentCount: number;
   onDelete: (folderId: string) => Promise<boolean>;
   onRename: (folderId: string, newName: string) => void;
-  isExpanded: boolean;
   onToggleExpand: (folderId: string) => void;
 };
 
@@ -38,7 +23,6 @@ export default function FolderCard({
   agentCount,
   onDelete,
   onRename,
-  isExpanded,
   onToggleExpand,
 }: FolderCardProps) {
   const { t } = useTranslation();
@@ -47,28 +31,17 @@ export default function FolderCard({
   const [renameModalState, setRenameModalState] =
     useState<ActiveState>('INACTIVE');
 
-  const menuOptions: FolderMenuOption[] = [
+  const menuOptions: MenuOption[] = [
     {
-      icon: Edit,
+      icon: Pencil,
       label: t('agents.folders.rename'),
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setRenameModalState('ACTIVE');
-      },
-      variant: 'default',
-      iconWidth: 14,
-      iconHeight: 14,
+      onClick: () => setRenameModalState('ACTIVE'),
     },
     {
-      icon: Trash,
+      icon: Trash2,
       label: t('agents.folders.delete'),
-      onClick: (e: SyntheticEvent) => {
-        e.stopPropagation();
-        setDeleteConfirmation('ACTIVE');
-      },
+      onClick: () => setDeleteConfirmation('ACTIVE'),
       variant: 'destructive',
-      iconWidth: 13,
-      iconHeight: 13,
     },
   ];
 
@@ -78,13 +51,13 @@ export default function FolderCard({
 
   return (
     <>
-      <div
+      <Card
+        variant="filled"
+        interactive
+        padding="default"
         role="button"
         tabIndex={0}
-        aria-pressed={isExpanded}
-        className={`focus-visible:ring-ring/50 focus-visible:border-ring relative flex cursor-pointer items-center justify-between rounded-2xl px-4 py-3 outline-none focus-visible:ring-[3px] sm:w-48 ${
-          isExpanded ? 'bg-accent' : 'bg-muted hover:bg-accent'
-        }`}
+        className="relative flex-row items-center justify-between"
         onClick={() => onToggleExpand(folder.id)}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -94,50 +67,21 @@ export default function FolderCard({
         }}
       >
         <div className="flex items-center gap-2 overflow-hidden">
-          <span className="text-foreground truncate text-sm font-medium">
-            {folder.name}
-          </span>
+          <CardTitle className="truncate">{folder.name}</CardTitle>
           <span className="text-muted-foreground shrink-0 text-xs">
             ({agentCount})
           </span>
         </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              onClick={(e) => e.stopPropagation()}
-              onKeyDown={(e) => e.stopPropagation()}
-              className="ml-2 shrink-0 cursor-pointer"
-              aria-label={t('agents.folders.menuAriaLabel', {
-                folderName: folder.name,
-                defaultValue: 'Folder actions',
-              })}
-            >
-              <img src={ThreeDots} alt="" className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-[144px]">
-            {menuOptions.map((option, index) => (
-              <DropdownMenuItem
-                key={index}
-                variant={option.variant}
-                onClick={(e) => e.stopPropagation()}
-                onSelect={(event) => {
-                  option.onClick(event as unknown as SyntheticEvent);
-                }}
-              >
-                <img
-                  src={option.icon}
-                  alt=""
-                  width={option.iconWidth ?? 16}
-                  height={option.iconHeight ?? 16}
-                />
-                <span>{option.label}</span>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+        <ActionMenu
+          options={menuOptions}
+          triggerLabel={t('agents.folders.menuAriaLabel', {
+            folderName: folder.name,
+            interpolation: { escapeValue: false },
+          })}
+          align="end"
+          className="ml-2 shrink-0"
+        />
+      </Card>
       <ConfirmationModal
         message={t('agents.folders.deleteConfirm')}
         modalState={deleteConfirmation}
@@ -148,7 +92,7 @@ export default function FolderCard({
           setDeleteConfirmation('INACTIVE');
         }}
         cancelLabel={t('cancel')}
-        variant="danger"
+        variant="destructive"
       />
       <FolderNameModal
         modalState={renameModalState}
diff --git a/frontend/src/agents/NewAgent.test.tsx b/frontend/src/agents/NewAgent.test.tsx
new file mode 100644
index 00000000..55d0b937
--- /dev/null
+++ b/frontend/src/agents/NewAgent.test.tsx
@@ -0,0 +1,338 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter } from 'react-router-dom';
+
+import type { MultiSelectPopoverItem } from '../components/MultiSelectPopover';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const mockState = {
+  preference: {
+    token: null,
+    sourceDocs: [],
+    selectedAgent: null,
+    prompts: [],
+    agentFolders: [],
+  },
+};
+
+vi.mock('react-redux', () => ({
+  useSelector: (selector: (state: unknown) => unknown) => selector(mockState),
+  useDispatch: () => vi.fn(),
+}));
+
+const jsonResponse = (body: unknown, ok = true) =>
+  Promise.resolve({ ok, json: () => Promise.resolve(body) });
+
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getUserTools: () =>
+      jsonResponse({
+        tools: [
+          {
+            id: 'tool-1',
+            name: 'remote_device',
+            display_name: 'Laptop',
+            config: { device_id: 'device-1' },
+          },
+        ],
+      }),
+    getAgentFolders: () => jsonResponse({ folders: [] }),
+    getAgent: () => jsonResponse({}),
+    createAgent: () => jsonResponse({ message: 'Name is taken' }, false),
+    updateAgent: () => jsonResponse({}),
+    deleteAgent: () => jsonResponse({}),
+    createPrompt: () => jsonResponse({}),
+  },
+}));
+
+vi.mock('../api/services/devicesService', () => ({
+  default: {
+    list: () =>
+      Promise.resolve({
+        devices: [{ id: 'device-1', last_seen_at: new Date().toISOString() }],
+      }),
+  },
+}));
+
+vi.mock('../api/services/modelService', () => ({
+  default: {
+    getModels: () => jsonResponse({ models: [] }),
+    transformModels: () => [],
+  },
+}));
+
+// The pickers render only their trigger here, plus each item's rich
+// description so the device status pill can be checked.
+vi.mock('../components/MultiSelectPopover', () => ({
+  MultiSelectPopover: ({
+    trigger,
+    items,
+  }: {
+    trigger: React.ReactNode;
+    items: MultiSelectPopoverItem[];
+  }) => (
+    <div data-testid="picker">
+      {trigger}
+      {items.map((item) => (
+        <div key={item.id}>{item.descriptionNode}</div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock('./workflow/WorkflowBuilder', () => ({ default: () => null }));
+vi.mock('./AgentPreview', () => ({ default: () => null }));
+vi.mock('../settings/Prompts', () => ({ default: () => null }));
+vi.mock('./components/GuardrailsSection', () => ({
+  default: () => null,
+  guardrailsIncomplete: () => false,
+}));
+vi.mock('../upload/Upload', () => ({ default: () => null }));
+vi.mock('../modals/AgentDetailsModal', () => ({ default: () => null }));
+vi.mock('../teams/ShareToTeamModal', () => ({ default: () => null }));
+vi.mock('../modals/ConfirmationModal', () => ({ default: () => null }));
+vi.mock('../preferences/PromptsModal', () => ({ default: () => null }));
+vi.mock('../navigation/SectionPills', () => ({ default: () => null }));
+vi.mock('../navigation/SectionPageHeader', () => ({
+  CurrentSectionHeader: () => null,
+}));
+vi.mock('../components/FileUpload', () => ({ FileUpload: () => null }));
+vi.mock('../components/SourcesPopoverFooter', () => ({ default: () => null }));
+vi.mock('../components/ToolIcon', () => ({ default: () => null }));
+
+import NewAgent from './NewAgent';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const setNativeValue = (
+  el: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) => {
+  const proto =
+    el instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  Object.getOwnPropertyDescriptor(proto, 'value')!.set!.call(el, value);
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+};
+
+describe('NewAgent form', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <NewAgent mode="new" />
+        </MemoryRouter>,
+      );
+    });
+  };
+
+  const buttonByText = (text: string) =>
+    Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes(text),
+    )!;
+
+  // Decision 63 (3): every field, picker and button in the form is 42px.
+  it('renders the name field as a default-size (42px) pill Input', async () => {
+    await render();
+    const name = container.querySelector<HTMLInputElement>(
+      'input[placeholder="agents.form.placeholders.agentName"]',
+    )!;
+    expect(name.getAttribute('data-slot')).toBe('input');
+    expect(name.getAttribute('data-size')).toBe('default');
+    expect(name.getAttribute('data-shape')).toBe('pill');
+  });
+
+  it('renders the Add prompt button at the field height', async () => {
+    await render();
+    const add = buttonByText('agents.form.buttons.add');
+    expect(add.getAttribute('data-variant')).toBe('outline-primary');
+    expect(add.getAttribute('data-size')).toBe('field');
+    expect(add.getAttribute('data-shape')).toBe('pill');
+  });
+
+  it('renders the token and request limits as default-size pill Inputs', async () => {
+    await render();
+    await act(async () =>
+      buttonByText('agents.form.sections.advanced').click(),
+    );
+    for (const key of ['enterTokenLimit', 'enterRequestLimit']) {
+      const field = container.querySelector(
+        `input[placeholder="agents.form.placeholders.${key}"]`,
+      )!;
+      expect(field.getAttribute('data-size')).toBe('default');
+      expect(field.getAttribute('data-shape')).toBe('pill');
+    }
+  });
+
+  it('titles each form panel with a SectionHeader spaced by the panel gap', async () => {
+    await render();
+    const titles = Array.from(
+      container.querySelectorAll('[data-slot="section-header"] > h2'),
+    ).map((h) => h.textContent);
+    expect(titles).toEqual(
+      expect.arrayContaining([
+        'agents.form.sections.meta',
+        'agents.form.sections.source',
+        'agents.form.sections.tools',
+        'agents.form.sections.agentType',
+        'agents.form.sections.models',
+      ]),
+    );
+    const meta = Array.from(
+      container.querySelectorAll('[data-slot="section-header"]'),
+    ).find((h) => h.textContent === 'agents.form.sections.meta')!;
+    expect(meta.parentElement!.className.split(' ')).toEqual(
+      expect.arrayContaining(['flex', 'flex-col', 'gap-5']),
+    );
+    expect((meta.nextElementSibling as HTMLElement).className).not.toContain(
+      'mt-5',
+    );
+  });
+
+  // Decision 64: the Advanced header is a section-toggle with a leading
+  // lucide chevron; the panel draws the focus ring.
+  it('renders the Advanced header as a section-toggle', async () => {
+    await render();
+    const toggle = buttonByText('agents.form.sections.advanced');
+    expect(toggle.getAttribute('data-variant')).toBe('section-toggle');
+    expect(toggle.getAttribute('data-size')).toBe('sm');
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    const chevron = toggle.firstElementChild!;
+    expect(chevron.matches('svg.lucide-chevron-right')).toBe(true);
+    expect(chevron.getAttribute('class')).not.toContain('rotate-90');
+    expect(toggle.querySelectorAll('svg')).toHaveLength(1);
+    expect(toggle.querySelector('h2')).toBeNull();
+    expect(toggle.parentElement!.tagName).toBe('H2');
+    const panel = toggle.closest('.bg-card')!;
+    expect(panel.className).toContain(
+      'has-[[data-variant=section-toggle]:focus-visible]:ring-3',
+    );
+
+    await act(async () => toggle.click());
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    expect(chevron.getAttribute('class')).toContain('rotate-90');
+  });
+
+  it('renders the description as a large ui Textarea', async () => {
+    await render();
+    const description = container.querySelector(
+      'textarea[placeholder="agents.form.placeholders.describeAgent"]',
+    )!;
+    expect(description.getAttribute('data-slot')).toBe('textarea');
+    expect(description.getAttribute('data-size')).toBe('lg');
+  });
+
+  it('renders the pickers as pill comboboxes, muted while empty', async () => {
+    await render();
+    const triggers = Array.from(
+      container.querySelectorAll('[data-testid="picker"] > button'),
+    );
+    // Sources, tools, models.
+    expect(triggers).toHaveLength(3);
+    for (const trigger of triggers) {
+      expect(trigger.getAttribute('data-variant')).toBe('combobox');
+      expect(trigger.getAttribute('data-size')).toBe('field');
+      expect(trigger.getAttribute('data-shape')).toBe('pill');
+      expect(trigger.hasAttribute('data-placeholder')).toBe(true);
+      expect(trigger.querySelector('span.truncate')).not.toBeNull();
+    }
+  });
+
+  it('shows the device status as a Badge', async () => {
+    await render();
+    const badge = container.querySelector('[data-slot="badge"]');
+    expect(badge?.textContent).toBe('settings.devices.online');
+    expect(badge?.getAttribute('data-variant')).toBe('success');
+  });
+
+  it('renders Save draft and Publish as pill button variants', async () => {
+    await render();
+    const draft = buttonByText('agents.form.buttons.saveDraft');
+    expect(draft.getAttribute('data-variant')).toBe('outline-primary');
+    expect(draft.getAttribute('data-shape')).toBe('pill');
+    const publish = buttonByText('agents.form.buttons.publish');
+    expect(publish.getAttribute('data-variant')).toBe('default');
+    expect(publish.getAttribute('data-shape')).toBe('pill');
+    expect(publish.disabled).toBe(true);
+  });
+
+  // Item 42: the header's Cancel (shown once the form is dirty) is ghost.
+  it('renders the header Cancel as a ghost pill once the form changes', async () => {
+    await render();
+    const name = container.querySelector<HTMLInputElement>(
+      'input[placeholder="agents.form.placeholders.agentName"]',
+    )!;
+    await act(async () => setNativeValue(name, 'Support bot'));
+    const cancel = buttonByText('agents.form.buttons.cancel');
+    expect(cancel.getAttribute('data-variant')).toBe('ghost');
+    expect(cancel.getAttribute('data-shape')).toBe('pill');
+  });
+
+  it('shows a failed save as a destructive alert with an icon', async () => {
+    await render();
+    const draft = buttonByText('agents.form.buttons.saveDraft');
+    await act(async () => draft.click());
+    const alert = container.querySelector('[role="alert"]')!;
+    expect(alert.textContent).toContain('Name is taken');
+    // ui/alert's destructive variant.
+    expect(alert.className).toContain('border-destructive/50');
+    expect(alert.className).toContain('bg-destructive/10');
+    expect(alert.querySelector('svg.lucide-circle-x')).not.toBeNull();
+    // Decision 69 (b): the notice sits above the form panel, not in the
+    // header's button row.
+    expect(draft.parentElement?.contains(alert)).toBe(false);
+  });
+
+  it('marks JSON schema validity with token colours and lucide icons', async () => {
+    await render();
+    await act(async () =>
+      buttonByText('agents.form.sections.advanced').click(),
+    );
+    const schema = Array.from(container.querySelectorAll('textarea')).find(
+      (el) => el.className.includes('font-mono'),
+    )!;
+    expect(schema.getAttribute('data-slot')).toBe('textarea');
+    expect(schema.getAttribute('data-size')).toBe('lg');
+
+    await act(async () => setNativeValue(schema, '{ not json'));
+    const invalid = Array.from(container.querySelectorAll('div')).find(
+      (el) => el.textContent === 'agents.form.advanced.invalidJson',
+    )!;
+    expect(invalid.className).toContain('text-destructive');
+    expect(invalid.querySelector('svg.lucide-circle-x')).not.toBeNull();
+
+    await act(async () => setNativeValue(schema, '{}'));
+    const valid = Array.from(container.querySelectorAll('div')).find(
+      (el) => el.textContent === 'agents.form.advanced.validJson',
+    )!;
+    expect(valid.className).toContain('text-success');
+    expect(valid.querySelector('svg.lucide-circle-check')).not.toBeNull();
+  });
+
+  it('shows the preview placeholder illustration as decorative images', async () => {
+    await render();
+    const images = container.querySelectorAll('img[alt=""]');
+    expect(images).toHaveLength(2);
+    for (const img of images) {
+      expect(img.getAttribute('aria-hidden')).toBe('true');
+    }
+  });
+});
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index c071bf8f..d34a3478 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -1,9 +1,10 @@
 import isEqual from 'lodash/isEqual';
-import { MoreHorizontal } from 'lucide-react';
+import { ChevronRight, CircleCheck, CircleX, Database } from 'lucide-react';
 import React, {
   useCallback,
   useEffect,
   useMemo,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -11,13 +12,12 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { Card } from '@/components/ui/card';
+import { ActionMenu } from '@/components/ui/dropdown-menu';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 
 import {
@@ -27,19 +27,23 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SectionHeader } from '@/components/ui/section-header';
+import { SettingRow, SettingRows } from '@/components/ui/setting-row';
 import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 
 import devicesService from '../api/services/devicesService';
 import modelService from '../api/services/modelService';
 import userService from '../api/services/userService';
-import SourceIcon from '../assets/source.svg';
+import ScienceSparkDarkIcon from '../assets/science-spark-dark.svg';
+import ScienceSparkIcon from '../assets/science-spark.svg';
 import { FileUpload } from '../components/FileUpload';
 import {
   MultiSelectPopover,
   type MultiSelectPopoverItem,
 } from '../components/MultiSelectPopover';
 import SourcesPopoverFooter from '../components/SourcesPopoverFooter';
-import Spinner from '../components/Spinner';
 import ToolIcon from '../components/ToolIcon';
 import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ShareToTeamModal from '../teams/ShareToTeamModal';
@@ -173,6 +177,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [jsonSchemaText, setJsonSchemaText] = useState('');
   const [jsonSchemaValid, setJsonSchemaValid] = useState(true);
+  const tokenLimitSwitchId = useId();
+  const requestLimitSwitchId = useId();
+  const promptOverrideSwitchId = useId();
   const [isAdvancedSectionExpanded, setIsAdvancedSectionExpanded] =
     useState(false);
 
@@ -209,7 +216,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   };
   const agentTypes = [
     { label: t('agents.form.agentTypes.classic'), value: 'classic' },
-    { label: 'Research', value: 'research' },
+    { label: t('agents.form.agentTypes.research'), value: 'research' },
   ];
 
   const isPublishable = () => {
@@ -257,7 +264,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         own: t('agents.form.sourcePopup.groupOwn'),
         team: t('agents.form.sourcePopup.groupTeam'),
       },
-      SourceIcon,
+      <Database />,
     );
     // An attached source the caller can't list — an owner's private source on
     // a team-shared agent — still needs a row of its own, or it reads as
@@ -265,7 +272,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     const listed = new Set(items.map((item) => item.id));
     const unlisted = Array.from(selectedSourceIds)
       .filter((id) => !listed.has(id))
-      .map((id) => ({ id, label: resolveSourceLabel(id), icon: SourceIcon }));
+      .map((id) => ({ id, label: resolveSourceLabel(id), icon: <Database /> }));
     return [...items, ...unlisted];
   }, [resolveSourceLabel, selectedSourceIds, sourceDocs, t]);
 
@@ -581,7 +588,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           const base: MultiSelectPopoverItem = {
             id: tool.id,
             label: getToolDisplayName(tool),
-            icon: <ToolIcon name={tool.name} className="h-5 w-5" />,
+            icon: <ToolIcon name={tool.name} className="size-5" />,
             group: groupFor(tool),
           };
           if (tool.name === 'remote_device') {
@@ -589,17 +596,14 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
             const meta = devicesById.get(deviceId);
             const online = meta?.online ?? false;
             base.descriptionNode = (
-              <span
-                className={`mt-0.5 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
-                  online
-                    ? 'bg-green-100 text-green-900 dark:bg-green-900/30 dark:text-green-300'
-                    : 'bg-gray-200 text-gray-700 dark:bg-gray-700/40 dark:text-gray-300'
-                }`}
+              <Badge
+                variant={online ? 'success' : 'neutral'}
+                className="mt-0.5"
               >
                 {online
                   ? t('settings.devices.online')
                   : t('settings.devices.offline')}
-              </span>
+              </Badge>
             );
           }
           return base;
@@ -799,7 +803,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   const showAgentNav = effectiveMode === 'edit' && Boolean(agent.id);
 
   return (
-    <div className="flex flex-col p-4 pb-2 max-[1179px]:min-h-dvh min-[1180px]:h-dvh md:p-12 md:pt-4 md:pb-3">
+    <div className="flex min-h-dvh flex-col p-4 pb-2 md:p-12 md:pt-4 md:pb-3 xl:h-dvh">
       {agent.agent_type === 'workflow' && (
         <div className="mt-4 w-full">
           <WorkflowBuilder />
@@ -808,21 +812,12 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
       <div className="flex w-full flex-wrap items-center justify-between gap-2">
         {showAgentNav ? <CurrentSectionHeader /> : <span aria-hidden />}
         <div className="flex flex-wrap items-center gap-2">
-          {submitError && (
-            <div
-              role="alert"
-              className="flex items-center gap-2 text-sm text-red-600 dark:text-red-400"
-            >
-              <span className="h-4 w-4 shrink-0 bg-[url('/src/assets/circle-x.svg')] bg-contain bg-center bg-no-repeat" />
-              {submitError}
-            </div>
-          )}
           {hasChanges && (
             <Button
               type="button"
               variant="ghost"
+              shape="pill"
               onClick={handleCancel}
-              className="text-primary dark:text-foreground rounded-3xl px-2 hover:bg-transparent"
             >
               {t('agents.form.buttons.cancel')}
             </Button>
@@ -830,110 +825,100 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           {modeConfig[effectiveMode].showSaveDraft && (
             <Button
               type="button"
+              variant="outline-primary"
+              shape="pill"
               disabled={isDraftBlocked()}
+              loading={draftLoading}
               onClick={handleSaveDraft}
-              className={`border-primary text-primary hover:bg-primary/90 min-w-28 rounded-3xl border border-solid bg-transparent px-5 whitespace-nowrap hover:text-white ${
-                isDraftBlocked() ? 'disabled:opacity-30' : ''
-              }`}
             >
-              <span className="flex items-center justify-center transition-all duration-200">
-                {draftLoading ? (
-                  <Spinner size="small" />
-                ) : (
-                  t('agents.form.buttons.saveDraft')
-                )}
-              </span>
+              {t('agents.form.buttons.saveDraft')}
             </Button>
           )}
           <Button
             type="button"
             disabled={!isPublishable() || !hasChanges}
+            loading={publishLoading}
             onClick={handlePublish}
-            className={`${!isPublishable() || !hasChanges ? 'disabled:opacity-30' : ''} min-w-28 rounded-3xl px-5 whitespace-nowrap text-white`}
+            shape="pill"
           >
-            <span className="flex items-center justify-center transition-all duration-200">
-              {publishLoading ? (
-                <Spinner size="small" />
-              ) : (
-                modeConfig[effectiveMode].buttonText
-              )}
-            </span>
+            {modeConfig[effectiveMode].buttonText}
           </Button>
           {modeConfig[effectiveMode].showAccessDetails && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('agents.form.buttons.moreActions')}
-                  title={t('agents.form.buttons.moreActions')}
-                >
-                  <MoreHorizontal className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onSelect={() => setAgentDetails('ACTIVE')}>
-                  {t('agents.form.buttons.accessDetails')}
-                </DropdownMenuItem>
-                {/* Sharing is owner-only — hidden for agents shared into the
-                    workspace by a team (ownership === 'team'). */}
-                {agent.ownership !== 'team' && agent.id && (
-                  <DropdownMenuItem onSelect={() => setShareModalOpen(true)}>
-                    {t('agents.shareWithTeam')}
-                  </DropdownMenuItem>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
+            <ActionMenu
+              triggerLabel={t('agents.form.buttons.moreActions')}
+              options={[
+                {
+                  label: t('agents.form.buttons.accessDetails'),
+                  onClick: () => setAgentDetails('ACTIVE'),
+                },
+                // Sharing is owner-only — hidden for agents shared into the
+                // workspace by a team (ownership === 'team').
+                ...(agent.ownership !== 'team' && agent.id
+                  ? [
+                      {
+                        label: t('agents.shareWithTeam'),
+                        onClick: () => setShareModalOpen(true),
+                      },
+                    ]
+                  : []),
+              ]}
+            />
           )}
         </div>
       </div>
       {showAgentNav && <SectionPills className="mt-4" />}
-      <div className="bg-muted dark:bg-background mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-2xl p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
-        <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <h2 className="text-lg font-semibold">
-              {t('agents.form.sections.meta')}
-            </h2>
-            <Input
-              className="bg-card mt-3 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm"
-              type="text"
-              value={agent.name}
-              placeholder={t('agents.form.placeholders.agentName')}
-              onChange={(e) => setAgent({ ...agent, name: e.target.value })}
-            />
-            <textarea
-              className="border-border text-foreground dark:text-foreground dark:placeholder:text-muted-foreground bg-card dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring mt-3 h-32 w-full rounded-xl border px-5 py-4 text-sm outline-hidden placeholder:text-gray-400 focus-visible:ring-[3px]"
-              placeholder={t('agents.form.placeholders.describeAgent')}
-              value={agent.description}
-              onChange={(e) =>
-                setAgent({ ...agent, description: e.target.value })
-              }
-            />
-            <div className="mt-3">
+      {submitError && (
+        <Alert variant="destructive" className="mt-3">
+          <CircleX aria-hidden="true" className="size-4" />
+          <AlertDescription>{submitError}</AlertDescription>
+        </Alert>
+      )}
+      <div className="bg-muted mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-2xl p-5 xl:grid xl:gap-5 xl:overflow-hidden">
+        <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 xl:max-h-full xl:overflow-y-auto xl:pr-3">
+          <div className="bg-card flex flex-col gap-5 rounded-2xl px-6 py-3">
+            <SectionHeader title={t('agents.form.sections.meta')} />
+            <div className="flex flex-col gap-5">
+              <FormField label={t('agents.form.labels.name')}>
+                <Input
+                  shape="pill"
+                  type="text"
+                  value={agent.name}
+                  placeholder={t('agents.form.placeholders.agentName')}
+                  onChange={(e) => setAgent({ ...agent, name: e.target.value })}
+                />
+              </FormField>
+              <FormField label={t('agents.form.labels.description')}>
+                <Textarea
+                  size="lg"
+                  className="h-32"
+                  placeholder={t('agents.form.placeholders.describeAgent')}
+                  value={agent.description}
+                  onChange={(e) =>
+                    setAgent({ ...agent, description: e.target.value })
+                  }
+                />
+              </FormField>
               <FileUpload
                 showPreview
-                className="bg-card"
+                size="compact"
+                previewSize={56}
                 onUpload={handleUpload}
                 onRemove={() => setImageFile(null)}
                 uploadText={[
                   {
                     text: t('agents.form.upload.clickToUpload'),
-                    colorClass: 'text-primary',
+                    highlight: true,
                   },
                   {
                     text: t('agents.form.upload.dragAndDrop'),
-                    colorClass: 'text-[#525252]',
                   },
                 ]}
               />
             </div>
           </div>
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <h2 className="text-lg font-semibold">
-              {t('agents.form.sections.source')}
-            </h2>
-            <div className="mt-3">
+          <div className="bg-card flex flex-col gap-3 rounded-2xl px-6 py-3">
+            <SectionHeader title={t('agents.form.sections.source')} />
+            <div>
               <div className="flex flex-wrap items-center gap-1">
                 <MultiSelectPopover
                   open={isSourcePopupOpen}
@@ -960,22 +945,27 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   trigger={
                     <Button
                       type="button"
-                      variant="outline"
+                      variant="combobox"
+                      size="field"
+                      shape="pill"
                       ref={sourceAnchorButtonRef}
-                      title={selectedSourceNames.join(', ')}
-                      className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
-                        selectedSourceIds.size > 0
-                          ? 'text-foreground dark:text-foreground'
-                          : 'dark:text-muted-foreground text-gray-400'
-                      }`}
+                      data-placeholder={
+                        selectedSourceIds.size > 0 ? undefined : ''
+                      }
+                      className="w-full justify-start text-left"
                     >
-                      {sourceTriggerLabel}
+                      <span
+                        className="truncate"
+                        title={selectedSourceNames.join(', ')}
+                      >
+                        {sourceTriggerLabel}
+                      </span>
                     </Button>
                   }
                 />
               </div>
               {selectedSourceIds.size === 0 && (
-                <p className="text-muted-foreground mt-2 text-xs">
+                <p className="text-muted-foreground mt-1.5 text-xs">
                   {t('agents.form.sourcePopup.noSourceHint')}
                 </p>
               )}
@@ -1009,25 +999,26 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   }
                   setPrompts={(newPrompts) => dispatch(setPrompts(newPrompts))}
                   title={t('agents.form.sections.prompt')}
-                  titleClassName="text-lg font-semibold"
+                  titleAs="heading"
                   showAddButton={false}
                   dropdownProps={{ className: 'w-full' }}
                 />
               </div>
               <Button
                 type="button"
+                variant="outline-primary"
+                size="field"
+                shape="pill"
                 onClick={() => setAddPromptModal('ACTIVE')}
-                className="border-primary text-primary hover:bg-primary/90 h-auto min-w-20 shrink-0 basis-full rounded-3xl border border-solid bg-transparent px-5 py-3 whitespace-nowrap hover:text-white sm:basis-auto"
+                className="min-w-20 shrink-0 basis-full sm:basis-auto"
               >
                 {t('agents.form.buttons.add')}
               </Button>
             </div>
           </div>
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <h2 className="text-lg font-semibold">
-              {t('agents.form.sections.tools')}
-            </h2>
-            <div className="mt-3 flex flex-wrap items-center gap-1">
+          <div className="bg-card flex flex-col gap-3 rounded-2xl px-6 py-3">
+            <SectionHeader title={t('agents.form.sections.tools')} />
+            <div className="flex flex-wrap items-center gap-1">
               <MultiSelectPopover
                 open={isToolsPopupOpen}
                 onOpenChange={setIsToolsPopupOpen}
@@ -1059,40 +1050,36 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 trigger={
                   <Button
                     type="button"
-                    variant="outline"
+                    variant="combobox"
+                    size="field"
+                    shape="pill"
                     ref={toolAnchorButtonRef}
-                    className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
-                      selectedTools.length > 0
-                        ? 'text-foreground dark:text-foreground'
-                        : 'dark:text-muted-foreground text-gray-400'
-                    }`}
+                    data-placeholder={selectedTools.length > 0 ? undefined : ''}
+                    className="w-full justify-start text-left"
                   >
-                    {selectedTools.length > 0
-                      ? selectedTools
-                          .map((tool) => getToolDisplayName(tool))
-                          .filter(Boolean)
-                          .join(', ')
-                      : t('agents.form.placeholders.selectTools')}
+                    <span className="truncate">
+                      {selectedTools.length > 0
+                        ? selectedTools
+                            .map((tool) => getToolDisplayName(tool))
+                            .filter(Boolean)
+                            .join(', ')
+                        : t('agents.form.placeholders.selectTools')}
+                    </span>
                   </Button>
                 }
               />
             </div>
           </div>
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <h2 className="text-lg font-semibold">
-              {t('agents.form.sections.agentType')}
-            </h2>
-            <div className="mt-3">
+          <div className="bg-card flex flex-col gap-3 rounded-2xl px-6 py-3">
+            <SectionHeader title={t('agents.form.sections.agentType')} />
+            <div>
               <Select
                 value={agent.agent_type || undefined}
                 onValueChange={(value) =>
                   setAgent({ ...agent, agent_type: value })
                 }
               >
-                <SelectTrigger
-                  className="w-full rounded-3xl px-5 py-3 text-sm"
-                  size="lg"
-                >
+                <SelectTrigger className="w-full" shape="pill" size="field">
                   <SelectValue
                     placeholder={t('agents.form.placeholders.selectType')}
                   />
@@ -1107,11 +1094,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               </Select>
             </div>
           </div>
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <h2 className="text-lg font-semibold">
-              {t('agents.form.sections.models')}
-            </h2>
-            <div className="mt-3 flex flex-col gap-3">
+          <div className="bg-card flex flex-col gap-3 rounded-2xl px-6 py-3">
+            <SectionHeader title={t('agents.form.sections.models')} />
+            <div className="flex flex-col gap-3">
               <MultiSelectPopover
                 open={isModelsPopupOpen}
                 onOpenChange={setIsModelsPopupOpen}
@@ -1148,38 +1133,35 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 trigger={
                   <Button
                     type="button"
-                    variant="outline"
+                    variant="combobox"
+                    size="field"
+                    shape="pill"
                     ref={modelAnchorButtonRef}
-                    className={`bg-card h-auto w-full justify-start truncate rounded-3xl px-5 py-3 text-left text-sm font-normal ${
-                      selectedModelIds.size > 0
-                        ? 'text-foreground dark:text-foreground'
-                        : 'dark:text-muted-foreground text-gray-400'
-                    }`}
+                    data-placeholder={
+                      selectedModelIds.size > 0 ? undefined : ''
+                    }
+                    className="w-full justify-start text-left"
                   >
-                    {selectedModelIds.size > 0
-                      ? availableModels
-                          .filter((m) => selectedModelIds.has(m.id))
-                          .map((m) => m.display_name)
-                          .join(', ')
-                      : t('agents.form.placeholders.selectModels')}
+                    <span className="truncate">
+                      {selectedModelIds.size > 0
+                        ? availableModels
+                            .filter((m) => selectedModelIds.has(m.id))
+                            .map((m) => m.display_name)
+                            .join(', ')
+                        : t('agents.form.placeholders.selectModels')}
+                    </span>
                   </Button>
                 }
               />
               {selectedModelIds.size > 0 && (
-                <div>
-                  <label className="mb-2 block text-sm font-medium">
-                    {t('agents.form.labels.defaultModel')}
-                  </label>
+                <FormField label={t('agents.form.labels.defaultModel')}>
                   <Select
                     value={agent.default_model_id || undefined}
                     onValueChange={(value) =>
                       setAgent({ ...agent, default_model_id: value })
                     }
                   >
-                    <SelectTrigger
-                      className="w-full rounded-3xl px-5 py-3 text-sm"
-                      size="lg"
-                    >
+                    <SelectTrigger className="w-full" shape="pill" size="field">
                       <SelectValue
                         placeholder={t(
                           'agents.form.placeholders.selectDefaultModel',
@@ -1196,56 +1178,47 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         ))}
                     </SelectContent>
                   </Select>
-                </div>
+                </FormField>
               )}
             </div>
           </div>
-          <div className="bg-card rounded-2xl px-6 py-3">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() =>
-                setIsAdvancedSectionExpanded(!isAdvancedSectionExpanded)
-              }
-              className="h-auto w-full justify-between px-0 py-0 text-left hover:bg-transparent"
-            >
-              <div>
-                <h2 className="text-lg font-semibold">
+          <div className="bg-card has-[[data-variant=section-toggle]:focus-visible]:ring-ring/50 rounded-2xl px-6 py-3 has-[[data-variant=section-toggle]:focus-visible]:ring-3 has-[[data-variant=section-toggle]:focus-visible]:ring-inset">
+            {/* The heading wraps the toggle: a button's children are
+                presentational, so a heading inside it is lost to screen readers. */}
+            <h2>
+              <Button
+                type="button"
+                variant="section-toggle"
+                onClick={() =>
+                  setIsAdvancedSectionExpanded(!isAdvancedSectionExpanded)
+                }
+                size="sm"
+                aria-expanded={isAdvancedSectionExpanded}
+                className="-ml-3 w-fit justify-start"
+              >
+                <ChevronRight
+                  aria-hidden="true"
+                  className={cn(
+                    'transition-transform duration-200',
+                    isAdvancedSectionExpanded && 'rotate-90',
+                  )}
+                />
+                <span className="text-lg font-semibold">
                   {t('agents.form.sections.advanced')}
-                </h2>
-              </div>
-              <div className="ml-4 flex items-center">
-                <svg
-                  className={`size-5 transform transition-transform duration-200 ${
-                    isAdvancedSectionExpanded ? 'rotate-180' : ''
-                  }`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </div>
-            </Button>
+                </span>
+              </Button>
+            </h2>
             {isAdvancedSectionExpanded && (
-              <div className="mt-3">
-                <div>
-                  <h2 className="text-sm font-medium">
-                    {t('agents.form.advanced.jsonSchema')}
-                  </h2>
-                  <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                    {t('agents.form.advanced.jsonSchemaDescription')}
-                  </p>
-                </div>
-                <textarea
-                  value={jsonSchemaText}
-                  onChange={(e) => validateAndSetJsonSchema(e.target.value)}
-                  placeholder={`{
+              <div className="mt-5">
+                <FormField
+                  label={t('agents.form.advanced.jsonSchema')}
+                  hint={t('agents.form.advanced.jsonSchemaDescription')}
+                >
+                  <Textarea
+                    size="lg"
+                    value={jsonSchemaText}
+                    onChange={(e) => validateAndSetJsonSchema(e.target.value)}
+                    placeholder={`{
   "type": "object",
   "properties": {
     "name": {"type": "string"},
@@ -1254,41 +1227,59 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   "required": ["name", "email"],
   "additionalProperties": false
 }`}
-                  rows={9}
-                  className={`border-border text-foreground dark:text-foreground bg-card dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring mt-2 w-full rounded-2xl border px-4 py-3 font-mono text-sm outline-hidden focus-visible:ring-[3px]`}
-                />
+                    rows={9}
+                    className="font-mono"
+                  />
+                </FormField>
                 {jsonSchemaText.trim() !== '' && (
                   <div
-                    className={`mt-2 flex items-center gap-2 text-sm ${
-                      jsonSchemaValid
-                        ? 'text-green-600 dark:text-green-400'
-                        : 'text-red-600 dark:text-red-400'
-                    }`}
+                    className={cn(
+                      'mt-2 flex items-center gap-2 text-sm',
+                      jsonSchemaValid ? 'text-success' : 'text-destructive',
+                    )}
                   >
-                    <span
-                      className={`h-4 w-4 bg-contain bg-center bg-no-repeat ${
-                        jsonSchemaValid
-                          ? "bg-[url('/src/assets/circle-check.svg')]"
-                          : "bg-[url('/src/assets/circle-x.svg')]"
-                      }`}
-                    />
+                    {jsonSchemaValid ? (
+                      <CircleCheck className="size-4" aria-hidden="true" />
+                    ) : (
+                      <CircleX className="size-4" aria-hidden="true" />
+                    )}
                     {jsonSchemaValid
                       ? t('agents.form.advanced.validJson')
                       : t('agents.form.advanced.invalidJson')}
                   </div>
                 )}
 
-                <div className="mt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.tokenLimiting')}
-                      </h2>
-                      <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                        {t('agents.form.advanced.tokenLimitingDescription')}
-                      </p>
-                    </div>
+                <SettingRows className="mt-6">
+                  <SettingRow
+                    label={t('agents.form.advanced.tokenLimiting')}
+                    description={t(
+                      'agents.form.advanced.tokenLimitingDescription',
+                    )}
+                    htmlFor={tokenLimitSwitchId}
+                    after={
+                      <Input
+                        type="number"
+                        min="0"
+                        value={agent.token_limit || ''}
+                        onChange={(e) =>
+                          setAgent({
+                            ...agent,
+                            token_limit: e.target.value
+                              ? parseInt(e.target.value)
+                              : undefined,
+                          })
+                        }
+                        disabled={!agent.limited_token_mode}
+                        placeholder={t(
+                          'agents.form.placeholders.enterTokenLimit',
+                        )}
+                        aria-label={t('agents.form.advanced.tokenLimit')}
+                        shape="pill"
+                      />
+                    }
+                  >
                     <Switch
+                      id={tokenLimitSwitchId}
                       checked={agent.limited_token_mode}
                       onCheckedChange={(checked) => {
                         setAgent({
@@ -1300,40 +1291,37 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         });
                       }}
                     />
-                  </div>
-                  <Input
-                    type="number"
-                    min="0"
-                    value={agent.token_limit || ''}
-                    onChange={(e) =>
-                      setAgent({
-                        ...agent,
-                        token_limit: e.target.value
-                          ? parseInt(e.target.value)
-                          : undefined,
-                      })
+                  </SettingRow>
+                  <SettingRow
+                    label={t('agents.form.advanced.requestLimiting')}
+                    description={t(
+                      'agents.form.advanced.requestLimitingDescription',
+                    )}
+                    htmlFor={requestLimitSwitchId}
+                    after={
+                      <Input
+                        type="number"
+                        min="0"
+                        value={agent.request_limit || ''}
+                        onChange={(e) =>
+                          setAgent({
+                            ...agent,
+                            request_limit: e.target.value
+                              ? parseInt(e.target.value)
+                              : undefined,
+                          })
+                        }
+                        disabled={!agent.limited_request_mode}
+                        placeholder={t(
+                          'agents.form.placeholders.enterRequestLimit',
+                        )}
+                        aria-label={t('agents.form.advanced.requestLimit')}
+                        shape="pill"
+                      />
                     }
-                    disabled={!agent.limited_token_mode}
-                    placeholder={t('agents.form.placeholders.enterTokenLimit')}
-                    className={`bg-card mt-2 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm ${
-                      !agent.limited_token_mode
-                        ? 'cursor-not-allowed opacity-50'
-                        : ''
-                    }`}
-                  />
-                </div>
-
-                <div className="mt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.requestLimiting')}
-                      </h2>
-                      <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                        {t('agents.form.advanced.requestLimitingDescription')}
-                      </p>
-                    </div>
+                  >
                     <Switch
+                      id={requestLimitSwitchId}
                       checked={agent.limited_request_mode}
                       onCheckedChange={(checked) => {
                         setAgent({
@@ -1345,45 +1333,16 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         });
                       }}
                     />
-                  </div>
-                  <Input
-                    type="number"
-                    min="0"
-                    value={agent.request_limit || ''}
-                    onChange={(e) =>
-                      setAgent({
-                        ...agent,
-                        request_limit: e.target.value
-                          ? parseInt(e.target.value)
-                          : undefined,
-                      })
-                    }
-                    disabled={!agent.limited_request_mode}
-                    placeholder={t(
-                      'agents.form.placeholders.enterRequestLimit',
+                  </SettingRow>
+                  <SettingRow
+                    label={t('agents.form.advanced.systemPromptOverride')}
+                    description={t(
+                      'agents.form.advanced.systemPromptOverrideDescription',
                     )}
-                    className={`bg-card mt-2 h-auto rounded-3xl px-5 py-3 text-sm placeholder:text-gray-400 md:text-sm ${
-                      !agent.limited_request_mode
-                        ? 'cursor-not-allowed opacity-50'
-                        : ''
-                    }`}
-                  />
-                </div>
-
-                <div className="mt-6">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="min-w-0 flex-1">
-                      <h2 className="text-sm font-medium">
-                        {t('agents.form.advanced.systemPromptOverride')}
-                      </h2>
-                      <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                        {t(
-                          'agents.form.advanced.systemPromptOverrideDescription',
-                        )}
-                      </p>
-                    </div>
+                    htmlFor={promptOverrideSwitchId}
+                  >
                     <Switch
-                      className="shrink-0"
+                      id={promptOverrideSwitchId}
                       checked={agent.allow_system_prompt_override}
                       onCheckedChange={(checked) =>
                         setAgent({
@@ -1392,8 +1351,8 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                         })
                       }
                     />
-                  </div>
-                </div>
+                  </SettingRow>
+                </SettingRows>
               </div>
             )}
           </div>
@@ -1418,31 +1377,31 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
             }
           />
           {modeConfig[effectiveMode].showDelete && agent.id && (
-            <div className="border-destructive/40 bg-destructive/5 rounded-2xl border px-6 py-4">
-              <div className="flex flex-wrap items-start justify-between gap-3">
-                <div className="min-w-0 flex-1">
-                  <h2 className="text-destructive text-lg font-semibold">
-                    {t('agents.form.dangerZone.heading')}
-                  </h2>
-                  <p className="text-muted-foreground mt-1 text-xs">
-                    {t('agents.form.dangerZone.description')}
-                  </p>
-                </div>
-                <Button
-                  type="button"
-                  variant="destructive-outline"
-                  size="sm"
-                  onClick={() => setDeleteConfirmation('ACTIVE')}
-                  className="shrink-0"
-                >
-                  {t('agents.form.dangerZone.deleteButton')}
-                </Button>
-              </div>
-            </div>
+            <Card
+              tone="destructive"
+              padding="lg"
+              className="flex-row flex-wrap items-start justify-between"
+            >
+              <SectionHeader
+                tone="destructive"
+                title={t('agents.form.dangerZone.heading')}
+                description={t('agents.form.dangerZone.description')}
+                className="min-w-0 flex-1"
+              />
+              <Button
+                type="button"
+                variant="destructive-outline"
+                size="sm"
+                onClick={() => setDeleteConfirmation('ACTIVE')}
+                className="shrink-0"
+              >
+                {t('agents.form.dangerZone.deleteButton')}
+              </Button>
+            </Card>
           )}
         </div>
-        <div className="col-span-3 flex flex-col gap-2 max-[1179px]:h-auto max-[1179px]:px-0 max-[1179px]:py-0 min-[1180px]:h-full min-[1180px]:py-2">
-          <div className="flex-1 max-[1179px]:overflow-visible min-[1180px]:min-h-0 min-[1180px]:overflow-hidden">
+        <div className="col-span-3 flex flex-col gap-2 xl:h-full xl:py-2">
+          <div className="flex-1 xl:min-h-0 xl:overflow-hidden">
             <AgentPreviewArea />
           </div>
         </div>
@@ -1457,7 +1416,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           setDeleteConfirmation('INACTIVE');
         }}
         cancelLabel={t('agents.form.buttons.cancel')}
-        variant="danger"
+        variant="destructive"
       />
       <AgentDetailsModal
         agent={agent}
@@ -1501,14 +1460,25 @@ function AgentPreviewArea() {
   const { t } = useTranslation();
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
-    <div className="bg-card border-border w-full rounded-2xl border max-[1179px]:h-[600px] min-[1180px]:h-full">
+    <div className="bg-card border-border h-[600px] w-full rounded-2xl border xl:h-full">
       {selectedAgent?.status === 'published' ? (
         <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl">
           <AgentPreview />
         </div>
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center gap-2">
-          <span className="block h-12 w-12 bg-[url('/src/assets/science-spark.svg')] bg-contain bg-center bg-no-repeat transition-all dark:bg-[url('/src/assets/science-spark-dark.svg')]" />{' '}
+          <img
+            src={ScienceSparkIcon}
+            alt=""
+            aria-hidden="true"
+            className="block size-12 dark:hidden"
+          />
+          <img
+            src={ScienceSparkDarkIcon}
+            alt=""
+            aria-hidden="true"
+            className="hidden size-12 dark:block"
+          />{' '}
           <p className="text-muted-foreground text-xs">
             {t('agents.form.preview.publishedPreview')}
           </p>
diff --git a/frontend/src/agents/SharedAgent.tsx b/frontend/src/agents/SharedAgent.tsx
index e6b76867..e0cf4a3c 100644
--- a/frontend/src/agents/SharedAgent.tsx
+++ b/frontend/src/agents/SharedAgent.tsx
@@ -4,11 +4,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
 import MessageInput from '../components/MessageInput';
 import { Avatar } from '../components/ui/avatar';
-import Spinner from '../components/Spinner';
+import { EmptyState } from '@/components/ui/empty-state';
+import { LoadingState } from '@/components/ui/loading-state';
 import ConversationMessages from '../conversation/ConversationMessages';
 import { Query } from '../conversation/conversationModels';
 import {
@@ -18,7 +17,6 @@ import {
   selectQueries,
   selectStatus,
 } from '../conversation/conversationSlice';
-import { useDarkTheme } from '../hooks';
 import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import SharedAgentCard from './SharedAgentCard';
@@ -28,7 +26,6 @@ export default function SharedAgent() {
   const { t } = useTranslation();
   const { agentId } = useParams();
   const dispatch = useDispatch<AppDispatch>();
-  const [isDarkTheme] = useDarkTheme();
 
   const token = useSelector(selectToken);
   const queries = useSelector(selectQueries);
@@ -128,34 +125,20 @@ export default function SharedAgent() {
     if (sharedAgent) dispatch(setSelectedAgent(sharedAgent));
   }, [sharedAgent, dispatch]);
 
-  if (isLoading)
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
+  if (isLoading) return <LoadingState fill="parent" />;
   if (!sharedAgent)
     return (
-      <div className="flex h-full w-full items-center justify-center">
-        <div className="flex w-full flex-col items-center justify-center gap-4">
-          <img
-            src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-            alt="No agent found"
-            className="mx-auto mb-6 h-32 w-32"
-          />
-          <p className="text-muted-foreground text-center text-lg">
-            {t('agents.shared.notFound')}
-          </p>
-        </div>
-      </div>
+      <EmptyState className="h-full" title={t('agents.shared.notFound')} />
     );
   return (
     <div className="relative h-full w-full">
       <div className="absolute top-5 left-4 hidden items-center gap-3 sm:flex">
         <Avatar
           src={sharedAgent.image}
-          alt="agent-logo"
-          imgClassName="h-6 w-6 rounded-full object-contain"
+          alt={t('agents.shared.logoAlt')}
+          shape="circle"
+          className="overflow-hidden"
+          imgClassName="size-6 object-contain"
         />
         <h2 className="text-foreground text-lg font-semibold">
           {sharedAgent.name}
diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx
index a7102cd7..405528c5 100644
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -1,9 +1,11 @@
 import { useTranslation } from 'react-i18next';
+import { Pencil } from 'lucide-react';
 
-import EditIcon from '../assets/edit.svg';
 import ToolIcon from '../components/ToolIcon';
 import { Avatar } from '../components/ui/avatar';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
 import { formatDateTime } from '../utils/dateTimeUtils';
 import { getToolDisplayName } from '../utils/toolUtils';
 import { Agent } from './types';
@@ -23,14 +25,19 @@ export default function SharedAgentCard({
     agent.shared_metadata !== null &&
     Object.keys(agent.shared_metadata).length > 0;
   return (
-    <div className="border-border dark:border-border flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
+    <Card
+      variant="subtle"
+      padding="lg"
+      className="w-full max-w-[720px] sm:w-fit sm:min-w-[480px]"
+    >
       <div className="flex items-start gap-3">
-        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
+        <div className="flex size-12 items-center justify-center overflow-hidden rounded-full p-1">
           <Avatar
             src={agent.image}
             alt={agent.name}
-            className="h-full w-full"
-            imgClassName="h-full w-full rounded-full object-contain"
+            shape="circle"
+            className="size-full overflow-hidden"
+            imgClassName="size-full object-contain"
           />
         </div>
         <div className="flex max-h-[92px] flex-1 flex-col gap-px">
@@ -46,51 +53,58 @@ export default function SharedAgentCard({
             type="button"
             variant="outline"
             size="sm"
+            shape="pill"
             onClick={onEdit}
-            className="shrink-0 gap-1.5 rounded-full"
+            className="shrink-0"
             aria-label={t('agents.edit')}
           >
-            <img src={EditIcon} alt="" className="h-3.5 w-3.5" />
+            <Pencil />
             {t('agents.edit')}
           </Button>
         )}
       </div>
       {hasSharedMetadata && (
-        <div className="mt-4 flex items-center gap-8">
+        <div className="mt-1 flex items-center gap-8">
           {agent.shared_metadata?.shared_by && (
             <p className="text-foreground text-xs font-light sm:text-sm">
-              by {agent.shared_metadata.shared_by}
+              {t('agents.shared.sharedBy', {
+                name: agent.shared_metadata.shared_by,
+                interpolation: { escapeValue: false },
+              })}
             </p>
           )}
           {agent.shared_metadata?.shared_at && (
             <p className="text-muted-foreground text-xs font-light sm:text-sm">
-              Shared on {formatDateTime(agent.shared_metadata.shared_at)}
+              {t('agents.shared.sharedOn', {
+                date: formatDateTime(agent.shared_metadata.shared_at),
+                interpolation: { escapeValue: false },
+              })}
             </p>
           )}
         </div>
       )}
       {agent.tool_details && agent.tool_details.length > 0 && (
-        <div className="mt-8">
+        <div className="mt-5">
           <p className="text-foreground text-sm font-semibold sm:text-base">
-            Connected Tools
+            {t('agents.shared.connectedTools')}
           </p>
           <div className="mt-2 flex flex-wrap gap-2">
             {agent.tool_details.map((tool, index) => (
-              <span
-                key={index}
-                className="bg-accent text-foreground dark:bg-card flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light"
-              >
+              <Badge key={index} variant="default">
                 <ToolIcon
                   name={tool.name}
-                  title={`${getToolDisplayName(tool)} icon`}
-                  className="h-3 w-3"
+                  title={t('agents.shared.toolIconTitle', {
+                    name: getToolDisplayName(tool),
+                    interpolation: { escapeValue: false },
+                  })}
+                  className="size-3"
                 />{' '}
                 {getToolDisplayName(tool)}
-              </span>
+              </Badge>
             ))}
           </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }
diff --git a/frontend/src/agents/components/AgentTypeModal.test.tsx b/frontend/src/agents/components/AgentTypeModal.test.tsx
new file mode 100644
index 00000000..2db24052
--- /dev/null
+++ b/frontend/src/agents/components/AgentTypeModal.test.tsx
@@ -0,0 +1,72 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+const navigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => navigate,
+}));
+
+import AgentTypeModal from './AgentTypeModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('AgentTypeModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    navigate.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (onClose = vi.fn()) => {
+    await act(async () => {
+      root.render(<AgentTypeModal isOpen onClose={onClose} folderId="f1" />);
+    });
+    return onClose;
+  };
+
+  const tiles = () =>
+    Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="option-card"]',
+      ),
+    );
+
+  it('renders the two agent types as OptionCards', async () => {
+    await render();
+    const found = tiles();
+    expect(found).toHaveLength(2);
+    expect(found[0].textContent).toContain('agents.typeModal.classicTitle');
+    expect(found[1].textContent).toContain('agents.typeModal.workflowTitle');
+    expect(found[0].querySelector('[data-slot="option-card-icon"]')).not.toBe(
+      null,
+    );
+    expect(found[0].querySelector('[data-slot="card-description"]')).not.toBe(
+      null,
+    );
+  });
+
+  it('navigates to the workflow builder and closes', async () => {
+    const onClose = await render();
+    await act(async () => tiles()[1].click());
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(String(navigate.mock.calls[0][0])).toContain('workflow');
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('navigates to the classic form and closes', async () => {
+    const onClose = await render();
+    await act(async () => tiles()[0].click());
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(String(navigate.mock.calls[0][0])).not.toContain('workflow');
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/agents/components/AgentTypeModal.tsx b/frontend/src/agents/components/AgentTypeModal.tsx
index ed219b00..63a3b917 100644
--- a/frontend/src/agents/components/AgentTypeModal.tsx
+++ b/frontend/src/agents/components/AgentTypeModal.tsx
@@ -1,8 +1,10 @@
 import { Bot, Workflow } from 'lucide-react';
 import { agentNewPath } from '../paths';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { Modal } from '../../components/ui/modal';
+import { OptionCard } from '../../components/ui/option-card';
 
 interface AgentTypeModalProps {
   isOpen: boolean;
@@ -15,6 +17,7 @@ export default function AgentTypeModal({
   onClose,
   folderId,
 }: AgentTypeModalProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const handleSelect = (type: 'normal' | 'workflow') => {
@@ -30,48 +33,23 @@ export default function AgentTypeModal({
     <Modal
       open={isOpen}
       onOpenChange={(o) => !o && onClose()}
-      title="Create New Agent"
-      description="Choose the type of agent you want to create"
+      title={t('agents.typeModal.title')}
+      description={t('agents.typeModal.description')}
       size="md"
     >
       <div className="flex flex-col gap-4">
-        <button
-          type="button"
+        <OptionCard
+          icon={<Bot />}
+          title={t('agents.typeModal.classicTitle')}
+          description={t('agents.typeModal.classicDescription')}
           onClick={() => handleSelect('normal')}
-          className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 focus-visible:border-ring focus-visible:ring-ring/50 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all outline-none focus-visible:ring-[3px]"
-        >
-          <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary/90 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
-            <Bot size={28} />
-          </div>
-          <div className="flex-1">
-            <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
-              Classic Agent
-            </h3>
-            <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
-              Create a standard AI agent with a single model, tools, and
-              knowledge sources
-            </p>
-          </div>
-        </button>
-
-        <button
-          type="button"
+        />
+        <OptionCard
+          icon={<Workflow />}
+          title={t('agents.typeModal.workflowTitle')}
+          description={t('agents.typeModal.workflowDescription')}
           onClick={() => handleSelect('workflow')}
-          className="hover:border-primary hover:bg-primary/5 dark:hover:border-primary dark:hover:bg-primary/10 focus-visible:border-ring focus-visible:ring-ring/50 group dark:border-border flex items-start gap-5 rounded-xl border-2 border-gray-200 p-5 text-left transition-all outline-none focus-visible:ring-[3px]"
-        >
-          <div className="dark:bg-primary/20 bg-primary/10 text-primary group-hover:bg-primary flex h-14 w-14 shrink-0 items-center justify-center rounded-xl transition-colors group-hover:text-white dark:text-purple-300">
-            <Workflow size={28} />
-          </div>
-          <div className="flex-1">
-            <h3 className="text-foreground dark:text-foreground mb-2 text-lg font-semibold">
-              Workflow Agent
-            </h3>
-            <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
-              Design complex multi-step workflows with different models,
-              conditional logic, and state management
-            </p>
-          </div>
-        </button>
+        />
       </div>
     </Modal>
   );
diff --git a/frontend/src/agents/components/GuardrailEvents.test.tsx b/frontend/src/agents/components/GuardrailEvents.test.tsx
new file mode 100644
index 00000000..d5e6bc62
--- /dev/null
+++ b/frontend/src/agents/components/GuardrailEvents.test.tsx
@@ -0,0 +1,186 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+// A stable `t`: the component lists it as an effect dependency.
+vi.mock('react-i18next', () => {
+  const t = (key: string) => key;
+  return { useTranslation: () => ({ t }) };
+});
+
+const events = [
+  { id: '1', action: 'block', outcome: 'triggered' },
+  { id: '2', action: 'redact', outcome: 'triggered' },
+  { id: '3', action: 'flag', outcome: 'triggered' },
+  { id: '4', action: 'flag', outcome: 'not_evaluated' },
+].map((e) => ({
+  ...e,
+  check_name: `check-${e.id}`,
+  stage: 'input',
+  category: null,
+  detail: '',
+  created_at: '2026-09-01T00:00:00Z',
+}));
+
+// Flipped by the Retry test to make the next events fetch fail.
+const fetchState = vi.hoisted(() => ({ failNext: false }));
+
+vi.mock('../../api/services/userService', () => ({
+  default: {
+    getGuardrailEvents: () => {
+      if (fetchState.failNext) {
+        fetchState.failNext = false;
+        return Promise.reject(new Error('network'));
+      }
+      return Promise.resolve({
+        json: () => Promise.resolve({ success: true, events }),
+      });
+    },
+    getGuardrailSummary: () =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            success: true,
+            breakdown: [],
+            totals: { blocked: 1, redacted: 1, flagged: 1, not_evaluated: 1 },
+          }),
+      }),
+  },
+}));
+
+import GuardrailEvents from './GuardrailEvents';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = () =>
+  configureStore({ reducer: { preference: () => ({ token: null }) } });
+
+describe('GuardrailEvents tones', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <Provider store={makeStore()}>
+          <GuardrailEvents agentId="a1" />
+        </Provider>,
+      );
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it('colours outcome badges by meaning', () => {
+    const variants = Array.from(
+      container.querySelectorAll(
+        '[data-testid="guardrail-events-rows"] [data-slot="badge"]',
+      ),
+    ).map((b) => b.getAttribute('data-variant'));
+    expect(variants).toEqual(['destructive', 'info', 'warning', 'neutral']);
+  });
+
+  it('colours the stat tiles to match', () => {
+    const tone = (id: string) =>
+      container.querySelector(`[data-testid="${id}"] p:last-child`)?.className;
+    expect(tone('guardrail-stat-blocked')).toContain('text-destructive');
+    expect(tone('guardrail-stat-redacted')).toContain('text-info');
+    expect(tone('guardrail-stat-flagged')).toContain('text-warning');
+    expect(tone('guardrail-stat-not-evaluated')).toContain(
+      'text-muted-foreground',
+    );
+  });
+
+  it('renders the stat tiles as StatCards', () => {
+    for (const id of [
+      'guardrail-stat-blocked',
+      'guardrail-stat-redacted',
+      'guardrail-stat-flagged',
+      'guardrail-stat-not-evaluated',
+    ]) {
+      const tile = container.querySelector(`[data-testid="${id}"]`);
+      expect(tile?.getAttribute('data-slot')).toBe('card');
+      expect(tile?.getAttribute('data-variant')).toBe('subtle');
+    }
+    expect(
+      container
+        .querySelector('[data-testid="guardrail-stat-not-evaluated"]')
+        ?.getAttribute('title'),
+    ).toBe('agents.guardrailEvents.notEvaluatedHint');
+  });
+
+  it('puts the window Select in the section header actions', () => {
+    const header = container.querySelector('[data-slot="section-header"]');
+    expect(
+      header?.querySelector('[data-testid="guardrail-events-window"]'),
+    ).not.toBeNull();
+  });
+
+  it('renders ui/table named by the Guardrail decisions sub-heading', () => {
+    const table = container.querySelector('table[data-slot="table"]');
+    expect(table).not.toBeNull();
+    const labelId = table!.getAttribute('aria-labelledby');
+    expect(labelId).toBeTruthy();
+    // SectionHeader puts the id on its root; with no actions or description
+    // the root holds only the h3, so the name is the heading's text.
+    const label = document.getElementById(labelId!);
+    expect(label?.querySelector('h3')?.textContent).toBe(
+      'agents.guardrailEvents.tableHeader',
+    );
+    expect(label?.textContent).toBe('agents.guardrailEvents.tableHeader');
+    expect(table!.querySelector('[data-slot="table-head"]')).not.toBeNull();
+    expect(
+      table!.querySelector(
+        '[data-slot="table-body"][data-testid="guardrail-events-rows"]',
+      ),
+    ).not.toBeNull();
+  });
+});
+
+describe('GuardrailEvents load error', () => {
+  it('shows a destructive empty state whose Retry re-runs the fetch', async () => {
+    fetchState.failNext = true;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <Provider store={makeStore()}>
+          <GuardrailEvents agentId="a1" />
+        </Provider>,
+      );
+    });
+
+    const errorState = container.querySelector(
+      '[data-slot="empty-state"][data-tone="destructive"]',
+    );
+    expect(errorState?.textContent).toContain(
+      'agents.guardrailEvents.loadError',
+    );
+    const retry = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'retry',
+    );
+    expect(retry).toBeDefined();
+
+    await act(async () => retry!.click());
+
+    expect(
+      container.querySelector(
+        '[data-slot="empty-state"][data-tone="destructive"]',
+      ),
+    ).toBeNull();
+    expect(
+      container.querySelector('[data-testid="guardrail-events-rows"]'),
+    ).not.toBeNull();
+
+    await act(async () => root.unmount());
+    container.remove();
+  });
+});
diff --git a/frontend/src/agents/components/GuardrailEvents.tsx b/frontend/src/agents/components/GuardrailEvents.tsx
index da9ec9ea..bc9fc7d1 100644
--- a/frontend/src/agents/components/GuardrailEvents.tsx
+++ b/frontend/src/agents/components/GuardrailEvents.tsx
@@ -9,6 +9,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Progress } from '@/components/ui/progress';
+import { SectionHeader } from '@/components/ui/section-header';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import StatCard from '@/components/StatCard';
 
 import userService from '../../api/services/userService';
 import SkeletonLoader from '../../components/SkeletonLoader';
@@ -32,15 +46,18 @@ const ACTION_KEYS: Record<string, string> = {
   block: 'agents.form.guardrails.actions.block',
 };
 
-/** Colour by consequence, so "we refused" reads differently from "we noticed". */
-function actionTone(action: string, outcome: string): string {
-  if (outcome === 'not_evaluated')
-    return 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300';
-  if (action === 'block')
-    return 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300';
-  if (action === 'redact')
-    return 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300';
-  return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300';
+/**
+ * Colour by meaning, matching the status tokens used across the app: a block
+ * is a refusal, a flag needs review, a redaction is informational.
+ */
+function actionTone(
+  action: string,
+  outcome: string,
+): 'neutral' | 'destructive' | 'warning' | 'info' {
+  if (outcome === 'not_evaluated') return 'neutral';
+  if (action === 'block') return 'destructive';
+  if (action === 'redact') return 'info';
+  return 'warning';
 }
 
 type Props = { agentId?: string };
@@ -56,6 +73,8 @@ export default function GuardrailEvents({ agentId }: Props) {
   const [days, setDays] = React.useState(30);
   const [checkFilter, setCheckFilter] = React.useState('all');
   const [outcomeFilter, setOutcomeFilter] = React.useState('all');
+  // Bumped by Retry to re-run the fetch below.
+  const [reloadKey, setReloadKey] = React.useState(0);
 
   React.useEffect(() => {
     if (!agentId) return;
@@ -88,7 +107,7 @@ export default function GuardrailEvents({ agentId }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [agentId, token, days, t]);
+  }, [agentId, token, days, t, reloadKey]);
 
   const checkNames = React.useMemo(
     () => Array.from(new Set(events.map((e) => e.check_name))).sort(),
@@ -105,82 +124,88 @@ export default function GuardrailEvents({ agentId }: Props) {
   );
 
   const totals = summary?.totals;
+  const tableHeadingId = React.useId();
 
   return (
     <div className="mt-8 px-4" data-testid="guardrail-events">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h2 className="text-lg font-semibold">
-            {t('agents.guardrailEvents.heading')}
-          </h2>
-          <p className="text-muted-foreground mt-1 text-xs">
-            {t('agents.guardrailEvents.description')}
-          </p>
-        </div>
-        <Select
-          value={String(days)}
-          onValueChange={(value) => setDays(Number(value))}
-        >
-          <SelectTrigger
-            className="w-[150px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
-            data-testid="guardrail-events-window"
+      <SectionHeader
+        title={t('agents.guardrailEvents.heading')}
+        description={t('agents.guardrailEvents.description')}
+        actions={
+          <Select
+            value={String(days)}
+            onValueChange={(value) => setDays(Number(value))}
           >
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {WINDOWS.map((window) => (
-              <SelectItem key={window} value={String(window)}>
-                {t('agents.guardrailEvents.lastDays', { count: window })}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+            <SelectTrigger
+              className="w-[150px]"
+              size="field"
+              shape="pill"
+              data-testid="guardrail-events-window"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {WINDOWS.map((window) => (
+                <SelectItem key={window} value={String(window)}>
+                  {t('agents.guardrailEvents.lastDays', { count: window })}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        }
+      />
 
       {/* Blocked / flagged / redacted / not-evaluated are four different
           product problems; a single "violations" number hides which one you
           have. Not-evaluated in particular means a check silently stopped
           working. */}
-      <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
-        <StatTile
+      <div className="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatCard
           label={t('agents.guardrailEvents.blocked')}
-          value={totals?.blocked}
+          value={totals?.blocked ?? 0}
           loading={loading}
-          testId="guardrail-stat-blocked"
-          tone="text-red-700 dark:text-red-400"
+          data-testid="guardrail-stat-blocked"
+          valueTone="destructive"
         />
-        <StatTile
+        <StatCard
           label={t('agents.guardrailEvents.redacted')}
-          value={totals?.redacted}
+          value={totals?.redacted ?? 0}
           loading={loading}
-          testId="guardrail-stat-redacted"
-          tone="text-amber-700 dark:text-amber-400"
+          data-testid="guardrail-stat-redacted"
+          valueTone="info"
         />
-        <StatTile
+        <StatCard
           label={t('agents.guardrailEvents.flagged')}
-          value={totals?.flagged}
+          value={totals?.flagged ?? 0}
           loading={loading}
-          testId="guardrail-stat-flagged"
-          tone="text-emerald-700 dark:text-emerald-400"
+          data-testid="guardrail-stat-flagged"
+          valueTone="warning"
         />
-        <StatTile
+        <StatCard
           label={t('agents.guardrailEvents.notEvaluated')}
-          value={totals?.not_evaluated}
+          value={totals?.not_evaluated ?? 0}
           loading={loading}
-          testId="guardrail-stat-not-evaluated"
-          tone="text-muted-foreground"
+          data-testid="guardrail-stat-not-evaluated"
+          valueTone="muted"
           hint={t('agents.guardrailEvents.notEvaluatedHint')}
         />
       </div>
 
       {summary && summary.breakdown.length > 0 && <ByCheck summary={summary} />}
 
-      <div className="mt-6 flex flex-wrap items-center gap-3">
+      <SectionHeader
+        as="h3"
+        size="xs"
+        id={tableHeadingId}
+        title={t('agents.guardrailEvents.tableHeader')}
+        className="mt-6"
+      />
+      <div className="mt-3 flex flex-wrap items-center gap-3">
         <Select value={checkFilter} onValueChange={setCheckFilter}>
           <SelectTrigger
-            className="w-[170px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
+            className="w-[170px]"
+            size="field"
+            shape="pill"
             data-testid="guardrail-events-check-filter"
           >
             <SelectValue />
@@ -198,8 +223,9 @@ export default function GuardrailEvents({ agentId }: Props) {
         </Select>
         <Select value={outcomeFilter} onValueChange={setOutcomeFilter}>
           <SelectTrigger
-            className="w-[170px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
+            className="w-[170px]"
+            size="field"
+            shape="pill"
             data-testid="guardrail-events-outcome-filter"
           >
             <SelectValue />
@@ -224,19 +250,28 @@ export default function GuardrailEvents({ agentId }: Props) {
         </Select>
       </div>
 
-      <div className="border-border bg-card mt-3 w-full overflow-hidden rounded-xl border dark:bg-black">
-        <div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-white/5">
-          <p className="text-muted-foreground px-3 text-xs">
-            {t('agents.guardrailEvents.tableHeader')}
-          </p>
-        </div>
+      <div className="border-border bg-card mt-3 w-full overflow-hidden rounded-xl border">
         <div className="max-h-[45vh] overflow-y-auto">
           {loading ? (
             <div className="p-3">
               <SkeletonLoader count={3} />
             </div>
           ) : error ? (
-            <p className="text-destructive p-4 text-sm">{error}</p>
+            <EmptyState
+              tone="destructive"
+              size="sm"
+              illustration="none"
+              title={error}
+              action={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setReloadKey((key) => key + 1)}
+                >
+                  {t('retry')}
+                </Button>
+              }
+            />
           ) : visible.length === 0 ? (
             <p
               className="text-muted-foreground p-4 text-sm"
@@ -247,65 +282,51 @@ export default function GuardrailEvents({ agentId }: Props) {
                 : t('agents.guardrailEvents.emptyForFilter')}
             </p>
           ) : (
-            <table className="w-full text-left text-xs">
-              <thead className="text-muted-foreground">
-                <tr className="border-border border-b">
-                  <th className="px-3 py-2 font-medium">
-                    {t('agents.guardrailEvents.when')}
-                  </th>
-                  <th className="px-3 py-2 font-medium">
-                    {t('agents.guardrailEvents.check')}
-                  </th>
-                  <th className="px-3 py-2 font-medium">
-                    {t('agents.guardrailEvents.stage')}
-                  </th>
-                  <th className="px-3 py-2 font-medium">
+            <Table aria-labelledby={tableHeadingId}>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>{t('agents.guardrailEvents.when')}</TableHeader>
+                  <TableHeader>{t('agents.guardrailEvents.check')}</TableHeader>
+                  <TableHeader>{t('agents.guardrailEvents.stage')}</TableHeader>
+                  <TableHeader>
                     {t('agents.guardrailEvents.outcome')}
-                  </th>
-                  <th className="px-3 py-2 font-medium">
+                  </TableHeader>
+                  <TableHeader>
                     {t('agents.guardrailEvents.detail')}
-                  </th>
-                </tr>
-              </thead>
-              <tbody data-testid="guardrail-events-rows">
+                  </TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody data-testid="guardrail-events-rows">
                 {visible.map((event) => (
-                  <tr
-                    key={event.id}
-                    className="border-border/60 border-b last:border-0"
-                  >
-                    <td className="text-muted-foreground px-3 py-2 whitespace-nowrap">
+                  <TableRow key={event.id}>
+                    <TableCell className="text-muted-foreground whitespace-nowrap">
                       {formatDateTime(event.created_at)}
-                    </td>
-                    <td className="px-3 py-2">
+                    </TableCell>
+                    <TableCell>
                       <span className="font-medium">{event.check_name}</span>
                       {event.category && (
                         <span className="text-muted-foreground ml-1">
                           · {event.category}
                         </span>
                       )}
-                    </td>
-                    <td className="text-muted-foreground px-3 py-2">
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
                       {t(STAGE_KEYS[event.stage] ?? event.stage)}
-                    </td>
-                    <td className="px-3 py-2">
-                      <span
-                        className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${actionTone(
-                          event.action,
-                          event.outcome,
-                        )}`}
-                      >
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={actionTone(event.action, event.outcome)}>
                         {event.outcome === 'not_evaluated'
                           ? t('agents.guardrailEvents.notEvaluated')
                           : t(ACTION_KEYS[event.action] ?? event.action)}
-                      </span>
-                    </td>
-                    <td className="text-muted-foreground max-w-[28rem] px-3 py-2">
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
                       {event.detail || '—'}
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 ))}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           )}
         </div>
       </div>
@@ -318,39 +339,6 @@ export default function GuardrailEvents({ agentId }: Props) {
   );
 }
 
-function StatTile({
-  label,
-  value,
-  loading,
-  tone,
-  testId,
-  hint,
-}: {
-  label: string;
-  value?: number;
-  loading: boolean;
-  tone: string;
-  testId: string;
-  hint?: string;
-}) {
-  return (
-    <div
-      className="border-border bg-card rounded-xl border px-4 py-3"
-      data-testid={testId}
-      title={hint}
-    >
-      <p className="text-muted-foreground text-xs">{label}</p>
-      {loading ? (
-        <div className="mt-1 h-6 w-10">
-          <SkeletonLoader count={1} />
-        </div>
-      ) : (
-        <p className={`mt-1 text-xl font-semibold ${tone}`}>{value ?? 0}</p>
-      )}
-    </div>
-  );
-}
-
 /**
  * Per-check totals. The point is to see *which* control is firing: a rollout's
  * first week is spent finding the one that is over-triggering, and an
@@ -381,12 +369,10 @@ function ByCheck({ summary }: { summary: GuardrailSummary }) {
         {rows.map(([check, total]) => (
           <div key={check} className="flex items-center gap-3">
             <span className="w-32 shrink-0 truncate text-xs">{check}</span>
-            <div className="bg-border/60 h-2 flex-1 overflow-hidden rounded-full">
-              <div
-                className="bg-violets-are-blue h-full rounded-full"
-                style={{ width: `${max ? (total / max) * 100 : 0}%` }}
-              />
-            </div>
+            <Progress
+              className="flex-1"
+              value={max ? (total / max) * 100 : 0}
+            />
             <span className="text-muted-foreground w-10 shrink-0 text-right text-xs">
               {total}
             </span>
diff --git a/frontend/src/agents/components/GuardrailsSection.test.tsx b/frontend/src/agents/components/GuardrailsSection.test.tsx
new file mode 100644
index 00000000..581d1f34
--- /dev/null
+++ b/frontend/src/agents/components/GuardrailsSection.test.tsx
@@ -0,0 +1,383 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import type { GuardrailCatalog, GuardrailsConfig } from '../types';
+
+const getGuardrailCatalog = vi.fn();
+vi.mock('../../api/services/userService', () => ({
+  default: {
+    getGuardrailCatalog: (...args: unknown[]) => getGuardrailCatalog(...args),
+  },
+}));
+
+// A stable `t`: the component refetches the catalog whenever `t` changes.
+const t = (key: string) => key;
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t }),
+}));
+
+import GuardrailsSection from './GuardrailsSection';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const catalog: GuardrailCatalog = {
+  enabled: false,
+  checks: [
+    {
+      name: 'pii',
+      label: 'PII',
+      description: 'Detects personal data',
+      stages: ['input', 'output'],
+      supports_redaction: true,
+      latency_hint_ms: 50,
+      remote: false,
+      available: false,
+    },
+    {
+      name: 'policy',
+      label: 'Policy',
+      description: 'LLM judge',
+      stages: ['input'],
+      supports_redaction: false,
+      latency_hint_ms: 1500,
+      remote: true,
+      available: true,
+    },
+  ],
+  stages: ['input', 'output'],
+  modes: ['monitor_only', 'scan_all'],
+  actions_by_stage: {
+    input: ['flag', 'block'],
+    retrieval: ['flag'],
+    tool_result: ['flag'],
+    output: ['flag', 'redact', 'block'],
+  },
+  default_block_message: 'No',
+  pii_entities: ['EMAIL', 'PHONE'],
+  default_pii_entities: ['EMAIL'],
+  floor: {
+    enabled: true,
+    mode: 'scan_all',
+    fail_open: true,
+    timeout_ms: 2000,
+    block_message: '',
+    controls: [
+      {
+        check: 'pii',
+        stage: 'output',
+        action: 'block',
+        enabled: true,
+        settings: {},
+      },
+    ],
+  },
+};
+
+const config: GuardrailsConfig = {
+  enabled: true,
+  mode: 'monitor_only',
+  fail_open: true,
+  timeout_ms: 2000,
+  block_message: 'Sorry',
+  controls: [
+    {
+      check: 'pii',
+      stage: 'input',
+      action: 'flag',
+      enabled: true,
+      settings: { entities: ['EMAIL'] },
+    },
+    {
+      check: 'policy',
+      stage: 'input',
+      action: 'flag',
+      enabled: true,
+      settings: { policy: '' },
+    },
+    {
+      check: 'gone',
+      stage: 'input',
+      action: 'flag',
+      enabled: true,
+      settings: {},
+    },
+  ],
+};
+
+describe('GuardrailsSection', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    getGuardrailCatalog.mockReset();
+    getGuardrailCatalog.mockResolvedValue({
+      json: async () => ({ success: true, ...catalog }),
+    });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const q = (testId: string) =>
+    container.querySelector<HTMLElement>(`[data-testid="${testId}"]`);
+
+  const render = async (
+    props: Partial<Parameters<typeof GuardrailsSection>[0]> = {},
+  ) => {
+    await act(async () => {
+      root.render(
+        <GuardrailsSection
+          value={config}
+          onChange={() => undefined}
+          token="tok"
+          disabledNotice="Read only"
+          {...props}
+        />,
+      );
+    });
+    await act(async () => {
+      q('guardrails-toggle')?.click();
+    });
+  };
+
+  it('announces whether the section is open with aria-expanded', async () => {
+    await render();
+    expect(q('guardrails-toggle')?.getAttribute('aria-expanded')).toBe('true');
+    await act(async () => {
+      q('guardrails-toggle')?.click();
+    });
+    expect(q('guardrails-toggle')?.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  // Decision 64: the header is a section-toggle with a leading lucide
+  // chevron; the badges sit beside it and the panel draws the focus ring.
+  it('renders the header as a section-toggle with the badges beside it', async () => {
+    await render();
+    const toggle = q('guardrails-toggle')!;
+    expect(toggle.dataset.variant).toBe('section-toggle');
+    expect(toggle.dataset.size).toBe('sm');
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    const chevron = toggle.firstElementChild!;
+    expect(chevron.matches('svg.lucide-chevron-right')).toBe(true);
+    expect(chevron.getAttribute('class')).toContain('rotate-90');
+    expect(toggle.querySelectorAll('svg')).toHaveLength(1);
+    // The heading wraps the button (a button's children are presentational,
+    // so a heading inside it would be lost to screen readers).
+    expect(toggle.querySelector('h2')).toBeNull();
+    const heading = toggle.closest('h2')!;
+    expect(heading.textContent).toBe('agents.form.sections.guardrails');
+
+    const active = q('guardrails-active-badge')!;
+    const incomplete = q('guardrails-incomplete-badge')!;
+    expect(toggle.contains(active)).toBe(false);
+    expect(toggle.contains(incomplete)).toBe(false);
+    expect(active.parentElement).toBe(heading.parentElement);
+    expect(heading.parentElement?.firstElementChild).toBe(heading);
+
+    const panel = q('guardrails-section')!;
+    expect(panel.contains(toggle)).toBe(true);
+    expect(panel.className).toContain(
+      'has-[[data-variant=section-toggle]:focus-visible]:ring-3',
+    );
+    expect(panel.className).toContain('bg-card');
+
+    await act(async () => toggle.click());
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(chevron.getAttribute('class')).not.toContain('rotate-90');
+  });
+
+  it('renders the header pills as badges in their status roles', async () => {
+    await render();
+    expect(q('guardrails-active-badge')?.dataset.slot).toBe('badge');
+    expect(q('guardrails-active-badge')?.dataset.variant).toBe('success');
+    expect(q('guardrails-incomplete-badge')?.dataset.variant).toBe(
+      'destructive',
+    );
+    expect(q('guardrail-latency-pii')?.dataset.variant).toBe('neutral');
+    expect(q('guardrail-latency-pii')?.title).toBe(
+      'agents.form.guardrails.latencyHint',
+    );
+  });
+
+  it('shows the section notices as polite or warning alerts', async () => {
+    await render({ disabled: true });
+    const readOnly = q('guardrails-read-only');
+    expect(readOnly?.getAttribute('role')).toBe('status');
+    expect(readOnly?.textContent).toContain('Read only');
+    const instance = q('guardrails-instance-disabled');
+    expect(instance?.getAttribute('role')).toBe('alert');
+    expect(instance?.className).toContain('text-warning');
+    const floor = Array.from(
+      container.querySelectorAll<HTMLElement>('[role]'),
+    ).find((el) =>
+      el.textContent?.includes('agents.form.guardrails.floorNotice'),
+    );
+    expect(floor?.getAttribute('role')).toBe('status');
+    expect(floor?.className).toContain('text-info');
+  });
+
+  // Item 38: the instance-policy line is an info Alert announced as a note.
+  it('renders an instance-enforced control as an info note', async () => {
+    await render();
+    const note = q('guardrail-floor-pii:output')!;
+    expect(note.dataset.slot).toBe('alert');
+    expect(note.getAttribute('role')).toBe('note');
+    expect(note.className).toContain('text-info');
+    expect(note.querySelector('svg.lucide-info')).not.toBeNull();
+    expect(note.textContent).toContain('agents.form.guardrails.floorControl');
+  });
+
+  // Item 38: a control's setup error is its FormField error, tied to the
+  // action select.
+  it('announces the setup error under the control row', async () => {
+    await render();
+    const error = q('guardrail-needs-setup-policy-input')!;
+    expect(error.getAttribute('role')).toBe('alert');
+    expect(error.textContent).toBe('agents.form.guardrails.setupRequired');
+    expect(q('guardrail-needs-setup-pii-input')).toBeNull();
+  });
+
+  it('announces an empty PII entity list', async () => {
+    await render({
+      value: {
+        ...config,
+        controls: [{ ...config.controls[0], settings: { entities: [] } }],
+      },
+    });
+    await act(async () => {
+      q('guardrail-configure-pii-input')?.click();
+    });
+    const errors = Array.from(container.querySelectorAll('[role="alert"]')).map(
+      (el) => el.textContent,
+    );
+    expect(errors).toContain('agents.form.guardrails.pickAtLeastOne');
+  });
+
+  it('uses the pressed-toggle variants for stage chips', async () => {
+    await render();
+    expect(q('guardrail-stage-pii-input')?.dataset.variant).toBe('secondary');
+    const locked = q('guardrail-stage-pii-output');
+    expect(locked?.dataset.variant).toBe('secondary');
+    expect((locked as HTMLButtonElement).disabled).toBe(true);
+    // The hint lives on the hoverable wrapper; the named button has no title.
+    expect(locked?.hasAttribute('title')).toBe(false);
+    expect(locked?.parentElement?.title).toBe(
+      'agents.form.guardrails.lockedByFloor',
+    );
+    expect(q('guardrail-stage-policy-input')?.dataset.variant).toBe(
+      'secondary',
+    );
+  });
+
+  it('renders remove actions as ghost-destructive xs buttons', async () => {
+    await render();
+    const remove = q('guardrail-remove-pii-input');
+    expect(remove?.dataset.variant).toBe('ghost-destructive');
+    expect(remove?.dataset.size).toBe('xs');
+    const orphan = q('guardrail-orphan-gone')?.querySelector('button');
+    // On the tinted orphan row the hover is a destructive tint, not grey.
+    expect(orphan?.dataset.variant).toBe('ghost-destructive-on-accent');
+    expect(orphan?.dataset.size).toBe('xs');
+  });
+
+  it('draws the orphan-guardrail row as a small destructive Card', async () => {
+    await render();
+    const row = q('guardrail-orphan-gone');
+    expect(row?.dataset.slot).toBe('card');
+    expect(row?.dataset.tone).toBe('destructive');
+    expect(row?.dataset.padding).toBe('sm');
+  });
+
+  // Decision 63 (3): the form's fields and selects are all 42px.
+  it('sizes the fields through Input and Textarea props', async () => {
+    await render();
+    const block = q('guardrails-block-message');
+    expect(block?.dataset.size).toBe('default');
+    expect(block?.dataset.shape).toBe('pill');
+    expect(block?.className).not.toContain('bg-card');
+    const timeout = q('guardrails-timeout');
+    expect(timeout?.dataset.variant).toBe('filled');
+    expect(timeout?.dataset.size).toBe('default');
+    expect(timeout?.dataset.shape).toBe('pill');
+    const mode = q('guardrails-mode');
+    expect(mode?.dataset.size).toBe('field');
+    expect(mode?.dataset.shape).toBe('pill');
+
+    await act(async () => {
+      q('guardrail-configure-policy-input')?.click();
+    });
+    expect(q('guardrail-policy-text')?.dataset.slot).toBe('textarea');
+  });
+
+  // Decision 63e-b: the monitor-only line is advice, so the field's muted hint.
+  it('explains monitor-only mode in the mode field hint', async () => {
+    await render();
+    const hint = Array.from(container.querySelectorAll('p')).find(
+      (p) => p.textContent === 'agents.form.guardrails.monitorHint',
+    )!;
+    expect(hint.className.split(' ')).toEqual(
+      expect.arrayContaining(['text-muted-foreground', 'text-xs']),
+    );
+    expect(hint.className).not.toContain('text-warning');
+    expect(q('guardrails-mode')?.getAttribute('aria-describedby')).toContain(
+      hint.id,
+    );
+  });
+
+  // Decision 63a: each control's name is a 14px semibold sub-heading.
+  it('titles each check card with an xs section header', async () => {
+    await render();
+    const title = q('guardrail-check-pii')?.querySelector('h4');
+    expect(title?.textContent).toBe('PII');
+    expect(title?.className.split(' ')).toEqual(
+      expect.arrayContaining(['text-foreground', 'text-sm', 'font-semibold']),
+    );
+  });
+
+  it('renders each check as a small-padded Card', async () => {
+    await render();
+    const card = q('guardrail-check-pii');
+    expect(card?.dataset.slot).toBe('card');
+    expect(card?.dataset.padding).toBe('sm');
+  });
+
+  it('shows PII entities as toggle chips', async () => {
+    await render();
+    await act(async () => {
+      q('guardrail-configure-pii-input')?.click();
+    });
+    expect(q('guardrail-pii-EMAIL')?.dataset.variant).toBe('secondary');
+    expect(q('guardrail-pii-PHONE')?.dataset.variant).toBe('ghost-muted');
+  });
+
+  it('shows a failed catalog load as a destructive empty state with Retry', async () => {
+    getGuardrailCatalog.mockReset();
+    getGuardrailCatalog.mockRejectedValueOnce(new Error('network'));
+    getGuardrailCatalog.mockResolvedValue({
+      json: async () => ({ success: true, ...catalog }),
+    });
+    await render();
+
+    const errorState = () =>
+      container.querySelector<HTMLElement>(
+        '[data-slot="empty-state"][data-tone="destructive"]',
+      );
+    expect(errorState()?.textContent).toContain(
+      'agents.form.guardrails.loadError',
+    );
+    expect(errorState()?.dataset.size).toBe('sm');
+    const retry = Array.from(errorState()!.querySelectorAll('button')).find(
+      (b) => b.textContent === 'retry',
+    );
+
+    await act(async () => retry!.click());
+
+    expect(getGuardrailCatalog).toHaveBeenCalledTimes(2);
+    expect(errorState()).toBeNull();
+  });
+});
diff --git a/frontend/src/agents/components/GuardrailsSection.tsx b/frontend/src/agents/components/GuardrailsSection.tsx
index 1ead4ff3..3d27dd45 100644
--- a/frontend/src/agents/components/GuardrailsSection.tsx
+++ b/frontend/src/agents/components/GuardrailsSection.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
+import { ChevronRight, Info, Lock, TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { EmptyState } from '@/components/ui/empty-state';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import {
   Select,
@@ -10,7 +16,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SectionHeader } from '@/components/ui/section-header';
+import { SettingRow } from '@/components/ui/setting-row';
 import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 
 import userService from '../../api/services/userService';
 import {
@@ -108,11 +118,16 @@ export default function GuardrailsSection({
   const [catalog, setCatalog] = React.useState<GuardrailCatalog | null>(null);
   const [loadError, setLoadError] = React.useState<string | null>(null);
   const [openSettings, setOpenSettings] = React.useState<string | null>(null);
+  // Bumped by Retry to re-run the catalog fetch below.
+  const [reloadKey, setReloadKey] = React.useState(0);
+  const enabledId = React.useId();
+  const failOpenId = React.useId();
 
   const config = value ?? DEFAULT_GUARDRAILS;
 
   React.useEffect(() => {
     let cancelled = false;
+    setLoadError(null);
     userService
       .getGuardrailCatalog(token)
       .then((res) => res.json())
@@ -127,7 +142,7 @@ export default function GuardrailsSection({
     return () => {
       cancelled = true;
     };
-  }, [token, t]);
+  }, [token, t, reloadKey]);
 
   /** Floor-imposed controls, so the UI can show them as active and locked. */
   const floorControls = React.useMemo(() => {
@@ -202,143 +217,162 @@ export default function GuardrailsSection({
 
   return (
     <div
-      className="bg-card rounded-2xl px-6 py-3"
+      className="bg-card has-[[data-variant=section-toggle]:focus-visible]:ring-ring/50 rounded-2xl px-6 py-3 has-[[data-variant=section-toggle]:focus-visible]:ring-3 has-[[data-variant=section-toggle]:focus-visible]:ring-inset"
       data-testid="guardrails-section"
     >
-      <Button
-        type="button"
-        variant="ghost"
-        onClick={() => setExpanded(!expanded)}
-        className="h-auto w-full justify-between px-0 py-0 text-left hover:bg-transparent"
-        data-testid="guardrails-toggle"
-      >
-        <div className="flex flex-wrap items-center gap-3">
-          <h2 className="text-lg font-semibold">
-            {t('agents.form.sections.guardrails')}
-          </h2>
-          {config.enabled && (
-            <span
-              className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300"
-              data-testid="guardrails-active-badge"
-            >
-              {t('agents.form.guardrails.activeCount', {
-                count: config.controls.length + floorControls.size,
-              })}
-            </span>
-          )}
-          {incompleteCount > 0 && (
-            <span
-              className="bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-xs font-medium"
-              data-testid="guardrails-incomplete-badge"
-            >
-              {t('agents.form.guardrails.needsSetup', {
-                count: incompleteCount,
-              })}
-            </span>
-          )}
-        </div>
-        <div className="ml-4 flex items-center">
-          <svg
-            className={`size-5 transform transition-transform duration-200 ${
-              expanded ? 'rotate-180' : ''
-            }`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
+      <div className="flex flex-wrap items-center gap-2">
+        {/* The heading wraps the toggle: a button's children are
+            presentational, so a heading inside it is lost to screen readers. */}
+        <h2>
+          <Button
+            type="button"
+            variant="section-toggle"
+            size="sm"
+            onClick={() => setExpanded(!expanded)}
+            aria-expanded={expanded}
+            className="-ml-3 w-fit justify-start"
+            data-testid="guardrails-toggle"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
+            <ChevronRight
+              aria-hidden="true"
+              className={cn(
+                'transition-transform duration-200',
+                expanded && 'rotate-90',
+              )}
             />
-          </svg>
-        </div>
-      </Button>
+            <span className="text-lg font-semibold">
+              {t('agents.form.sections.guardrails')}
+            </span>
+          </Button>
+        </h2>
+        {config.enabled && (
+          <Badge variant="success" data-testid="guardrails-active-badge">
+            {t('agents.form.guardrails.activeCount', {
+              count: config.controls.length + floorControls.size,
+            })}
+          </Badge>
+        )}
+        {incompleteCount > 0 && (
+          <Badge
+            variant="destructive"
+            data-testid="guardrails-incomplete-badge"
+          >
+            {t('agents.form.guardrails.needsSetup', {
+              count: incompleteCount,
+            })}
+          </Badge>
+        )}
+      </div>
 
       {expanded && (
         <div className="mt-3 pb-3">
           {loadError && (
-            <p className="text-destructive mt-3 text-xs">{loadError}</p>
+            <EmptyState
+              tone="destructive"
+              size="sm"
+              illustration="none"
+              title={loadError}
+              action={
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setReloadKey((k) => k + 1)}
+                >
+                  {t('retry')}
+                </Button>
+              }
+            />
           )}
 
           {disabled && disabledNotice && (
-            <p
-              className="mt-3 rounded-lg bg-gray-100 px-3 py-2 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+            <Alert
+              role="status"
+              className="mt-3"
               data-testid="guardrails-read-only"
             >
-              {disabledNotice}
-            </p>
+              <Lock aria-hidden="true" className="size-4" />
+              <AlertDescription>{disabledNotice}</AlertDescription>
+            </Alert>
           )}
 
           {instanceDisabled && (
-            <p
-              className="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:bg-amber-900/30 dark:text-amber-300"
+            <Alert
+              variant="warning"
+              className="mt-3"
               data-testid="guardrails-instance-disabled"
             >
-              {t('agents.form.guardrails.instanceDisabled')}
-            </p>
+              <TriangleAlert aria-hidden="true" className="size-4" />
+              <AlertDescription>
+                {t('agents.form.guardrails.instanceDisabled')}
+              </AlertDescription>
+            </Alert>
           )}
 
           {floorControls.size > 0 && (
-            <p className="mt-3 rounded-lg bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
-              {t('agents.form.guardrails.floorNotice', {
-                count: floorControls.size,
-              })}
-            </p>
+            <Alert variant="info" role="status" className="mt-3">
+              <Info aria-hidden="true" className="size-4" />
+              <AlertDescription>
+                {t('agents.form.guardrails.floorNotice', {
+                  count: floorControls.size,
+                })}
+              </AlertDescription>
+            </Alert>
           )}
 
-          <div className="mt-4 flex items-center justify-between gap-4">
-            <div className="min-w-0 flex-1">
-              <h3 className="text-sm font-medium">
-                {t('agents.form.guardrails.enable')}
-              </h3>
-              <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                {t('agents.form.guardrails.enableDescription')}
-              </p>
-            </div>
+          <SettingRow
+            className="mt-4"
+            label={t('agents.form.guardrails.enable')}
+            description={t('agents.form.guardrails.enableDescription')}
+            htmlFor={enabledId}
+          >
             <Switch
-              className="shrink-0"
+              id={enabledId}
               checked={config.enabled}
               disabled={disabled}
               data-testid="guardrails-enabled"
               onCheckedChange={(checked) => patch({ enabled: checked })}
             />
-          </div>
+          </SettingRow>
 
           {config.enabled && (
             <>
               <div className="mt-5">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.mode')}
-                </label>
-                <Select
-                  value={config.mode}
-                  onValueChange={(mode) =>
-                    patch({ mode: mode as GuardrailsConfig['mode'] })
+                <FormField
+                  label={t('agents.form.guardrails.mode')}
+                  hint={
+                    config.mode === 'monitor_only'
+                      ? t('agents.form.guardrails.monitorHint')
+                      : undefined
                   }
                   disabled={disabled}
                 >
-                  <SelectTrigger
-                    className="w-full rounded-3xl px-5 py-3 text-sm"
-                    size="lg"
-                    data-testid="guardrails-mode"
+                  <Select
+                    value={config.mode}
+                    onValueChange={(mode) =>
+                      patch({ mode: mode as GuardrailsConfig['mode'] })
+                    }
+                    disabled={disabled}
                   >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {(catalog?.modes ?? Object.keys(MODE_KEYS)).map((mode) => (
-                      <SelectItem key={mode} value={mode}>
-                        {t(MODE_KEYS[mode] ?? mode)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {config.mode === 'monitor_only' && (
-                  <p className="mt-2 text-xs text-amber-700 dark:text-amber-400">
-                    {t('agents.form.guardrails.monitorHint')}
-                  </p>
-                )}
+                    <SelectTrigger
+                      className="w-full"
+                      size="field"
+                      shape="pill"
+                      data-testid="guardrails-mode"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(catalog?.modes ?? Object.keys(MODE_KEYS)).map(
+                        (mode) => (
+                          <SelectItem key={mode} value={mode}>
+                            {t(MODE_KEYS[mode] ?? mode)}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormField>
               </div>
 
               <div className="mt-5">
@@ -363,9 +397,11 @@ export default function GuardrailsSection({
                     />
                   ))}
                   {orphanControls.map((control) => (
-                    <div
+                    <Card
                       key={key(control.check, control.stage)}
-                      className="border-destructive/40 flex items-center justify-between gap-3 rounded-xl border px-4 py-3"
+                      tone="destructive"
+                      padding="sm"
+                      className="flex-row items-center justify-between"
                       data-testid={`guardrail-orphan-${control.check}`}
                     >
                       <p className="text-xs">
@@ -375,61 +411,56 @@ export default function GuardrailsSection({
                       </p>
                       <Button
                         type="button"
-                        variant="ghost"
-                        size="sm"
+                        variant="ghost-destructive-on-accent"
+                        size="xs"
                         disabled={disabled}
-                        className="text-destructive h-auto px-2 py-1 text-xs"
                         onClick={() =>
                           removeControl(control.check, control.stage)
                         }
                       >
                         {t('agents.form.guardrails.remove')}
                       </Button>
-                    </div>
+                    </Card>
                   ))}
                 </div>
               </div>
 
-              <div className="mt-6">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.blockMessage')}
-                </label>
+              <FormField
+                className="mt-6"
+                label={t('agents.form.guardrails.blockMessage')}
+                hint={t('agents.form.guardrails.blockMessageDescription')}
+                disabled={disabled}
+              >
                 <Input
                   type="text"
                   value={config.block_message}
                   maxLength={500}
-                  disabled={disabled}
                   data-testid="guardrails-block-message"
                   onChange={(e) => patch({ block_message: e.target.value })}
-                  className="bg-card h-auto rounded-3xl px-5 py-3 text-sm md:text-sm"
+                  shape="pill"
                 />
-                <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                  {t('agents.form.guardrails.blockMessageDescription')}
-                </p>
-              </div>
+              </FormField>
 
-              <div className="mt-6 flex items-center justify-between gap-4">
-                <div className="min-w-0 flex-1">
-                  <h3 className="text-sm font-medium">
-                    {t('agents.form.guardrails.failOpen')}
-                  </h3>
-                  <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                    {t('agents.form.guardrails.failOpenDescription')}
-                  </p>
-                </div>
+              <SettingRow
+                className="mt-6"
+                label={t('agents.form.guardrails.failOpen')}
+                description={t('agents.form.guardrails.failOpenDescription')}
+                htmlFor={failOpenId}
+              >
                 <Switch
-                  className="shrink-0"
+                  id={failOpenId}
                   checked={config.fail_open}
                   disabled={disabled}
                   data-testid="guardrails-fail-open"
                   onCheckedChange={(checked) => patch({ fail_open: checked })}
                 />
-              </div>
+              </SettingRow>
 
-              <div className="mt-4">
-                <label className="mb-2 block text-sm font-medium">
-                  {t('agents.form.guardrails.timeout')}
-                </label>
+              <FormField
+                className="mt-5"
+                label={t('agents.form.guardrails.timeout')}
+                disabled={disabled}
+              >
                 <NumberField
                   value={config.timeout_ms}
                   min={100}
@@ -440,7 +471,7 @@ export default function GuardrailsSection({
                   testId="guardrails-timeout"
                   onCommit={(timeout_ms) => patch({ timeout_ms })}
                 />
-              </div>
+              </FormField>
             </>
           )}
         </div>
@@ -494,7 +525,8 @@ function NumberField({
         setDraft(String(next));
         onCommit(next);
       }}
-      className="bg-card h-auto rounded-3xl px-5 py-3 text-sm md:text-sm"
+      variant="filled"
+      shape="pill"
     />
   );
 }
@@ -565,32 +597,27 @@ function CheckCard({
   );
 
   return (
-    <div
-      className="rounded-xl border border-gray-200 px-4 py-3 dark:border-gray-700"
-      data-testid={`guardrail-check-${info.name}`}
-    >
+    <Card padding="sm" data-testid={`guardrail-check-${info.name}`}>
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">
-          <h4 className="text-sm font-medium">{info.label}</h4>
-          <span
-            className="rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+          <SectionHeader as="h4" size="xs" title={info.label} />
+          <Badge
+            variant="neutral"
             title={t('agents.form.guardrails.latencyHint')}
             data-testid={`guardrail-latency-${info.name}`}
           >
             {latencyLabel(info.latency_hint_ms)}
-          </span>
+          </Badge>
           {unavailable && (
-            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-900/40 dark:text-amber-300">
+            <Badge variant="warning">
               {t('agents.form.guardrails.notConfigured')}
-            </span>
+            </Badge>
           )}
         </div>
-        <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
-          {info.description}
-        </p>
+        <p className="text-muted-foreground mt-1 text-xs">{info.description}</p>
       </div>
 
-      <div className="mt-3 flex flex-wrap gap-2">
+      <div className="flex flex-wrap gap-2">
         {info.stages.map((stage) => {
           const control = controlFor(info.name, stage);
           const floorAction = floorControls.get(key(info.name, stage));
@@ -602,40 +629,52 @@ function CheckCard({
           // out a credential strands a control that can never be cleared.
           const canToggle =
             !disabled && !locked && (Boolean(control) || !unavailable);
-          return (
-            <button
+          const chip = (
+            <Button
               key={stage}
               type="button"
+              variant={on ? 'secondary' : 'ghost-muted'}
+              size="xs"
+              shape="pill"
               disabled={!canToggle}
               data-testid={`guardrail-stage-${info.name}-${stage}`}
               onClick={() => toggleControl(info, stage, !control)}
-              className={`rounded-full border px-3 py-1 text-xs transition-colors ${
-                on
-                  ? 'border-violets-are-blue bg-violets-are-blue/10 text-violets-are-blue'
-                  : 'border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-400'
-              } ${!canToggle ? 'cursor-not-allowed opacity-60' : ''}`}
-              title={
-                locked ? t('agents.form.guardrails.lockedByFloor') : undefined
-              }
             >
               {t(STAGE_KEYS[stage] ?? stage)}
               {locked ? ' 🔒' : ''}
-            </button>
+            </Button>
+          );
+          // A disabled Button takes no pointer events, so the locked chip's
+          // hint lives on a wrapper that can still be hovered.
+          return locked ? (
+            <span
+              key={stage}
+              className="inline-flex"
+              title={t('agents.form.guardrails.lockedByFloor')}
+            >
+              {chip}
+            </span>
+          ) : (
+            chip
           );
         })}
       </div>
 
       {floorForCheck.map(([k, action]) => (
-        <div
+        <Alert
           key={`floor-${k}`}
-          className="mt-3 rounded-lg bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+          variant="info"
+          role="note"
           data-testid={`guardrail-floor-${k}`}
         >
-          {t('agents.form.guardrails.floorControl', {
-            stage: t(STAGE_KEYS[k.split(':')[1] as GuardrailStage] ?? ''),
-            action: t(ACTION_KEYS[action] ?? action),
-          })}
-        </div>
+          <Info aria-hidden="true" className="size-4" />
+          <AlertDescription>
+            {t('agents.form.guardrails.floorControl', {
+              stage: t(STAGE_KEYS[k.split(':')[1] as GuardrailStage] ?? ''),
+              action: t(ACTION_KEYS[action] ?? action),
+            })}
+          </AlertDescription>
+        </Alert>
       ))}
 
       {active.map((control) => {
@@ -644,11 +683,12 @@ function CheckCard({
         return (
           <div
             key={panelKey}
-            className={`mt-3 rounded-lg px-3 py-2 ${
+            className={cn(
+              'rounded-lg px-3 py-2',
               needsSetup
-                ? 'border-destructive/50 bg-destructive/5 border'
-                : 'bg-gray-50 dark:bg-gray-900/40'
-            }`}
+                ? 'border-destructive/50 bg-destructive/10 border'
+                : 'bg-muted',
+            )}
           >
             <div className="flex flex-wrap items-center justify-between gap-2">
               <span className="text-xs font-medium">
@@ -665,7 +705,8 @@ function CheckCard({
                   }
                 >
                   <SelectTrigger
-                    className="h-auto rounded-full px-3 py-1 text-xs"
+                    size="sm"
+                    shape="pill"
                     data-testid={`guardrail-action-${control.check}-${control.stage}`}
                   >
                     <SelectValue />
@@ -687,8 +728,7 @@ function CheckCard({
                   <Button
                     type="button"
                     variant="ghost"
-                    size="sm"
-                    className="h-auto px-2 py-1 text-xs"
+                    size="xs"
                     data-testid={`guardrail-configure-${control.check}-${control.stage}`}
                     onClick={() =>
                       setOpenSettings(
@@ -701,10 +741,9 @@ function CheckCard({
                 )}
                 <Button
                   type="button"
-                  variant="ghost"
-                  size="sm"
+                  variant="ghost-destructive"
+                  size="xs"
                   disabled={disabled}
-                  className="text-destructive h-auto px-2 py-1 text-xs"
                   data-testid={`guardrail-remove-${control.check}-${control.stage}`}
                   onClick={() => removeControl(control.check, control.stage)}
                 >
@@ -714,6 +753,7 @@ function CheckCard({
             </div>
             {needsSetup && (
               <p
+                role="alert"
                 className="text-destructive mt-1 text-xs"
                 data-testid={`guardrail-needs-setup-${control.check}-${control.stage}`}
               >
@@ -733,7 +773,7 @@ function CheckCard({
           </div>
         );
       })}
-    </div>
+    </Card>
   );
 }
 
@@ -757,11 +797,10 @@ function CheckSettings({
   const set = (next: Record<string, any>) => onChange({ ...s, ...next });
 
   const listField = (fieldKey: string, label: string, placeholder: string) => (
-    <div className="mt-2">
-      <label className="mb-1 block text-xs font-medium">{label}</label>
-      <textarea
+    <FormField label={label} labelSurface="muted" disabled={disabled}>
+      <Textarea
         rows={2}
-        disabled={disabled}
+        size="sm"
         data-testid={`guardrail-setting-${control.check}-${fieldKey}`}
         value={(s[fieldKey] ?? []).join('\n')}
         placeholder={placeholder}
@@ -773,21 +812,24 @@ function CheckSettings({
               .filter(Boolean),
           })
         }
-        className="bg-card w-full rounded-xl border border-gray-200 px-3 py-2 text-xs dark:border-gray-700"
+        variant="filled"
       />
-    </div>
+    </FormField>
   );
 
   return (
-    <div className="mt-3 border-t border-gray-200 pt-3 dark:border-gray-700">
+    <div className="border-border mt-3 flex flex-col gap-5 border-t pt-5">
       {control.check === 'pii' && (
         <div className="flex flex-wrap gap-2">
           {(catalog?.pii_entities ?? []).map((entity) => {
             const on = (s.entities ?? []).includes(entity);
             return (
-              <button
+              <Button
                 key={entity}
                 type="button"
+                variant={on ? 'secondary' : 'ghost-muted'}
+                size="xs"
+                shape="pill"
                 disabled={disabled}
                 data-testid={`guardrail-pii-${entity}`}
                 onClick={() =>
@@ -797,18 +839,13 @@ function CheckSettings({
                       : [...(s.entities ?? []), entity],
                   })
                 }
-                className={`rounded-full border px-2 py-0.5 text-[11px] ${
-                  on
-                    ? 'border-violets-are-blue bg-violets-are-blue/10 text-violets-are-blue'
-                    : 'border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-400'
-                }`}
               >
                 {entity}
-              </button>
+              </Button>
             );
           })}
           {(s.entities ?? []).length === 0 && (
-            <p className="text-destructive text-xs">
+            <p role="alert" className="text-destructive text-xs">
               {t('agents.form.guardrails.pickAtLeastOne')}
             </p>
           )}
@@ -838,27 +875,29 @@ function CheckSettings({
       )}
 
       {control.check === 'policy' && (
-        <div className="mt-2">
-          <label className="mb-1 block text-xs font-medium">
-            {t('agents.form.guardrails.policyText')}
-          </label>
-          <textarea
+        <FormField
+          label={t('agents.form.guardrails.policyText')}
+          labelSurface="muted"
+          disabled={disabled}
+        >
+          <Textarea
             rows={4}
+            size="sm"
             value={s.policy ?? ''}
-            disabled={disabled}
             data-testid="guardrail-policy-text"
             onChange={(e) => set({ policy: e.target.value })}
-            className="bg-card w-full rounded-xl border border-gray-200 px-3 py-2 text-xs dark:border-gray-700"
+            variant="filled"
           />
-        </div>
+        </FormField>
       )}
 
       {control.check === 'groundedness' && (
-        <div className="mt-2 grid grid-cols-2 gap-2">
-          <div>
-            <label className="mb-1 block text-xs font-medium">
-              {t('agents.form.guardrails.minOverlap')}
-            </label>
+        <div className="grid grid-cols-2 gap-2">
+          <FormField
+            label={t('agents.form.guardrails.minOverlap')}
+            labelSurface="muted"
+            disabled={disabled}
+          >
             <NumberField
               value={s.min_overlap ?? 0.3}
               min={0}
@@ -868,11 +907,12 @@ function CheckSettings({
               disabled={disabled}
               onCommit={(min_overlap) => set({ min_overlap })}
             />
-          </div>
-          <div>
-            <label className="mb-1 block text-xs font-medium">
-              {t('agents.form.guardrails.minWords')}
-            </label>
+          </FormField>
+          <FormField
+            label={t('agents.form.guardrails.minWords')}
+            labelSurface="muted"
+            disabled={disabled}
+          >
             <NumberField
               value={s.min_words ?? 25}
               min={1}
@@ -882,15 +922,17 @@ function CheckSettings({
               disabled={disabled}
               onCommit={(min_words) => set({ min_words })}
             />
-          </div>
+          </FormField>
         </div>
       )}
 
       {control.check === 'policy' && (
-        <div className="mt-2">
-          <label className="mb-1 block text-xs font-medium">
-            {t('agents.form.guardrails.confidence')}
-          </label>
+        <FormField
+          label={t('agents.form.guardrails.confidence')}
+          hint={t('agents.form.guardrails.confidenceHint')}
+          labelSurface="muted"
+          disabled={disabled}
+        >
           <NumberField
             value={s.confidence_threshold ?? 0.7}
             min={0}
@@ -900,10 +942,7 @@ function CheckSettings({
             disabled={disabled}
             onCommit={(confidence_threshold) => set({ confidence_threshold })}
           />
-          <p className="mt-1 text-[11px] text-gray-500">
-            {t('agents.form.guardrails.confidenceHint')}
-          </p>
-        </div>
+        </FormField>
       )}
     </div>
   );
diff --git a/frontend/src/agents/schedules/RunDetailDrawer.test.tsx b/frontend/src/agents/schedules/RunDetailDrawer.test.tsx
new file mode 100644
index 00000000..ef36b8fa
--- /dev/null
+++ b/frontend/src/agents/schedules/RunDetailDrawer.test.tsx
@@ -0,0 +1,136 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import '../../locale/i18n';
+import type { ScheduleRun } from '../types/schedule';
+import RunDetailDrawer from './RunDetailDrawer';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const run: ScheduleRun = {
+  id: 'r1',
+  schedule_id: 's1',
+  user_id: 'u1',
+  agent_id: 'a1',
+  status: 'failed',
+  scheduled_for: '2026-09-25T09:00:00Z',
+  trigger_source: 'cron',
+  started_at: '2026-09-25T09:00:00Z',
+  finished_at: '2026-09-25T09:01:00Z',
+  output: null,
+  output_truncated: false,
+  error: 'brave_search returned 429',
+  error_type: null,
+  prompt_tokens: 1120,
+  generated_tokens: 84,
+  created_at: '2026-09-25T09:00:00Z',
+  updated_at: '2026-09-25T09:01:00Z',
+};
+
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="sheet-content"]');
+
+describe('RunDetailDrawer', () => {
+  it('opens as a right Sheet with the standard X, not a hand-rolled aside', async () => {
+    await act(async () =>
+      root.render(<RunDetailDrawer run={run} onClose={vi.fn()} />),
+    );
+    const panel = content()!;
+    expect(panel).not.toBeNull();
+    expect(panel.dataset.side).toBe('right');
+    expect(panel.getAttribute('role')).toBe('dialog');
+    expect(panel.className.split(' ')).toEqual(
+      expect.arrayContaining(['bg-background', 'sm:max-w-xl']),
+    );
+    expect(panel.querySelector('[data-slot="sheet-title"]')!.textContent).toBe(
+      'Run details',
+    );
+    expect(panel.querySelector('[aria-label="Close"]')).not.toBeNull();
+    expect(document.querySelector('aside')).toBeNull();
+  });
+
+  it('labels come from the locale, trigger and status included', async () => {
+    await act(async () =>
+      root.render(<RunDetailDrawer run={run} onClose={vi.fn()} />),
+    );
+    const text = content()!.textContent!;
+    expect(text).toContain('Scheduled for');
+    expect(text).toContain('1120 prompt · 84 generated');
+    expect(text).toContain('Scheduled');
+    expect(text).toContain('Failed');
+  });
+
+  // L9: a code block on the sheet is a filled Card around the mono recipe.
+  it('puts the error on a filled Card so it shows on the sheet', async () => {
+    await act(async () =>
+      root.render(<RunDetailDrawer run={run} onClose={vi.fn()} />),
+    );
+    const pre = content()!.querySelector('pre')!;
+    const card = pre.parentElement!;
+    expect(card.getAttribute('data-slot')).toBe('card');
+    expect(card.getAttribute('data-variant')).toBe('filled');
+    expect(card.className.split(' ')).toContain('bg-muted');
+    expect(card.className.split(' ')).not.toContain('bg-background');
+    expect(pre.className.split(' ')).toEqual(
+      expect.arrayContaining([
+        'font-mono',
+        'text-xs',
+        'whitespace-pre-wrap',
+        'wrap-break-word',
+      ]),
+    );
+  });
+
+  // Decisions 63a / 63b: the title is the default SheetTitle; the Error
+  // heading is a destructive xs sub-heading.
+  it('uses the default sheet title and an xs destructive error heading', async () => {
+    await act(async () =>
+      root.render(<RunDetailDrawer run={run} onClose={vi.fn()} />),
+    );
+    const title = content()!.querySelector('[data-slot="sheet-title"]')!;
+    expect(title.className.split(' ')).toEqual(
+      expect.arrayContaining(['text-xl', 'leading-tight', 'font-semibold']),
+    );
+    expect(title.className).not.toContain('text-lg');
+    const error = content()!.querySelector('h3')!;
+    expect(error.textContent).toBe('Error');
+    expect(error.className.split(' ')).toEqual(
+      expect.arrayContaining(['text-destructive', 'text-sm', 'font-semibold']),
+    );
+  });
+
+  it('closes from the X', async () => {
+    const onClose = vi.fn();
+    await act(async () =>
+      root.render(<RunDetailDrawer run={run} onClose={onClose} />),
+    );
+    await act(async () =>
+      content()!
+        .querySelector<HTMLButtonElement>('[aria-label="Close"]')!
+        .click(),
+    );
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('renders nothing without a run', async () => {
+    await act(async () =>
+      root.render(<RunDetailDrawer run={null} onClose={vi.fn()} />),
+    );
+    expect(content()).toBeNull();
+  });
+});
diff --git a/frontend/src/agents/schedules/RunDetailDrawer.tsx b/frontend/src/agents/schedules/RunDetailDrawer.tsx
index 4c1359bd..d134d247 100644
--- a/frontend/src/agents/schedules/RunDetailDrawer.tsx
+++ b/frontend/src/agents/schedules/RunDetailDrawer.tsx
@@ -1,6 +1,12 @@
-import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { Button } from '../../components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '@/components/ui/description-list';
+import { SectionHeader } from '@/components/ui/section-header';
+import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet';
 import { formatDateTime } from '../../utils/dateTimeUtils';
 import type { ScheduleRun } from '../types/schedule';
 import ScheduleStatusBadge from './StatusBadge';
@@ -14,89 +20,104 @@ const formatTimestamp = (value?: string | null): string => {
   return value ? formatDateTime(value) : '—';
 };
 
-/** Side drawer with a single run's output / error (terminal-state only). */
+/** Side sheet with a single run's output / error (terminal-state only). */
 export default function RunDetailDrawer({
   run,
   onClose,
 }: RunDetailDrawerProps) {
-  useEffect(() => {
-    if (!run) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [run, onClose]);
-
+  const { t } = useTranslation();
   if (!run) return null;
   return (
-    <>
-      <div
-        className="fixed inset-0 z-20 bg-black/40"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      <aside
-        className="border-border bg-card fixed top-0 right-0 z-30 flex h-full w-full max-w-xl flex-col border-l p-6 shadow-lg"
-        role="dialog"
-        aria-label="Schedule run details"
+    <Sheet open onOpenChange={(open) => !open && onClose()}>
+      <SheetContent
+        side="right"
+        className="sm:max-w-xl"
+        aria-describedby={undefined}
       >
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold">Run details</h2>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={onClose}
-            className="text-muted-foreground"
-          >
-            Close
-          </Button>
+        {/* The sheet owns no padding of its own; the body sets it. */}
+        <div className="flex min-h-0 flex-1 flex-col gap-4 p-6">
+          <SheetTitle>{t('agents.schedules.runDetails.title')}</SheetTitle>
+          <DescriptionList size="sm">
+            <DescriptionItem label={t('agents.schedules.runDetails.status')}>
+              <ScheduleStatusBadge status={run.status} />
+            </DescriptionItem>
+            <DescriptionItem
+              label={t('agents.schedules.runDetails.scheduledFor')}
+            >
+              {formatTimestamp(run.scheduled_for)}
+            </DescriptionItem>
+            <DescriptionItem label={t('agents.schedules.runDetails.started')}>
+              {formatTimestamp(run.started_at)}
+            </DescriptionItem>
+            <DescriptionItem label={t('agents.schedules.runDetails.finished')}>
+              {formatTimestamp(run.finished_at)}
+            </DescriptionItem>
+            <DescriptionItem label={t('agents.schedules.runDetails.tokens')}>
+              {t('agents.schedules.runDetails.tokensValue', {
+                prompt: run.prompt_tokens,
+                generated: run.generated_tokens,
+              })}
+            </DescriptionItem>
+            <DescriptionItem label={t('agents.schedules.runDetails.trigger')}>
+              {t(`agents.schedules.trigger.${run.trigger_source}`, {
+                defaultValue: run.trigger_source,
+              })}
+            </DescriptionItem>
+          </DescriptionList>
+          {run.error && (
+            <section className="flex flex-col gap-1">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                tone="destructive"
+                title={
+                  run.error_type
+                    ? t('agents.schedules.runDetails.errorWithType', {
+                        type: run.error_type,
+                      })
+                    : t('agents.schedules.runDetails.error')
+                }
+              />
+              <Card
+                variant="filled"
+                padding="sm"
+                className="max-h-48 overflow-y-auto"
+              >
+                <pre className="font-mono text-xs wrap-break-word whitespace-pre-wrap">
+                  {run.error}
+                </pre>
+              </Card>
+            </section>
+          )}
+          {run.output && (
+            <section className="flex min-h-0 flex-1 flex-col gap-1">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={
+                  <>
+                    {t('agents.schedules.runDetails.output')}
+                    {run.output_truncated && (
+                      <span className="text-muted-foreground ml-1 text-xs">
+                        {t('agents.schedules.runDetails.truncated')}
+                      </span>
+                    )}
+                  </>
+                }
+              />
+              <Card
+                variant="filled"
+                padding="sm"
+                className="min-h-0 flex-1 overflow-y-auto"
+              >
+                <pre className="font-mono text-xs wrap-break-word whitespace-pre-wrap">
+                  {run.output}
+                </pre>
+              </Card>
+            </section>
+          )}
         </div>
-        <dl className="mb-4 grid grid-cols-2 gap-2 text-sm">
-          <dt className="text-muted-foreground">Status</dt>
-          <dd>
-            <ScheduleStatusBadge status={run.status} />
-          </dd>
-          <dt className="text-muted-foreground">Scheduled for</dt>
-          <dd>{formatTimestamp(run.scheduled_for)}</dd>
-          <dt className="text-muted-foreground">Started</dt>
-          <dd>{formatTimestamp(run.started_at)}</dd>
-          <dt className="text-muted-foreground">Finished</dt>
-          <dd>{formatTimestamp(run.finished_at)}</dd>
-          <dt className="text-muted-foreground">Tokens</dt>
-          <dd>
-            {run.prompt_tokens} prompt · {run.generated_tokens} generated
-          </dd>
-          <dt className="text-muted-foreground">Trigger</dt>
-          <dd>{run.trigger_source}</dd>
-        </dl>
-        {run.error && (
-          <section className="mb-4">
-            <h3 className="text-destructive text-sm font-semibold">
-              Error{run.error_type ? ` (${run.error_type})` : ''}
-            </h3>
-            <pre className="bg-background mt-1 max-h-48 overflow-auto rounded-md p-3 font-mono text-xs">
-              {run.error}
-            </pre>
-          </section>
-        )}
-        {run.output && (
-          <section className="flex-1 overflow-hidden">
-            <h3 className="text-sm font-semibold">
-              Output
-              {run.output_truncated && (
-                <span className="text-muted-foreground ml-1 text-xs">
-                  (truncated)
-                </span>
-              )}
-            </h3>
-            <pre className="bg-background mt-1 h-full overflow-auto rounded-md p-3 font-mono text-xs whitespace-pre-wrap">
-              {run.output}
-            </pre>
-          </section>
-        )}
-      </aside>
-    </>
+      </SheetContent>
+    </Sheet>
   );
 }
diff --git a/frontend/src/agents/schedules/RunLog.tsx b/frontend/src/agents/schedules/RunLog.tsx
index 83b0913c..c8cfbd4f 100644
--- a/frontend/src/agents/schedules/RunLog.tsx
+++ b/frontend/src/agents/schedules/RunLog.tsx
@@ -1,7 +1,16 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Button } from '../../components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../components/ui/table';
 import { selectToken } from '../../preferences/preferenceSlice';
 import type { AppDispatch, RootState } from '../../store';
 import { formatDateTime } from '../../utils/dateTimeUtils';
@@ -9,6 +18,10 @@ import type { ScheduleRun } from '../types/schedule';
 import ScheduleStatusBadge from './StatusBadge';
 import { loadRunsForSchedule, selectRunsForSchedule } from './schedulesSlice';
 
+// The column heads are a label row, so they take the eyebrow recipe.
+const HEADER_CELL =
+  'text-muted-foreground text-xs font-semibold tracking-wider uppercase';
+
 export type RunLogProps = {
   scheduleId: string;
   onSelect?: (run: ScheduleRun) => void;
@@ -20,6 +33,7 @@ const formatTimestamp = (value?: string | null): string => {
 
 /** Paginated run log for a schedule (SSE updates merge via schedulesSlice). */
 export default function RunLog({ scheduleId, onSelect }: RunLogProps) {
+  const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
   const token = useSelector(selectToken);
   const runs = useSelector((state: RootState) =>
@@ -34,27 +48,35 @@ export default function RunLog({ scheduleId, onSelect }: RunLogProps) {
   if (runs.length === 0) {
     return (
       <p className="text-muted-foreground py-3 text-sm">
-        No runs recorded for this schedule yet.
+        {t('agents.schedules.runLog.empty')}
       </p>
     );
   }
 
   return (
-    <table className="w-full text-left text-sm">
-      <thead className="text-muted-foreground text-xs uppercase">
-        <tr>
-          <th className="py-2">When</th>
-          <th className="py-2">Status</th>
-          <th className="py-2">Tokens</th>
-          <th className="py-2">Trigger</th>
-          <th className="py-2"></th>
-        </tr>
-      </thead>
-      <tbody>
+    <Table minWidth="min-w-0">
+      <TableHead>
+        <TableRow>
+          <TableHeader className={HEADER_CELL}>
+            {t('agents.schedules.runLog.when')}
+          </TableHeader>
+          <TableHeader className={HEADER_CELL}>
+            {t('agents.schedules.runDetails.status')}
+          </TableHeader>
+          <TableHeader className={HEADER_CELL}>
+            {t('agents.schedules.runDetails.tokens')}
+          </TableHeader>
+          <TableHeader className={HEADER_CELL}>
+            {t('agents.schedules.runDetails.trigger')}
+          </TableHeader>
+          <TableHeader className={HEADER_CELL}></TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
         {runs.map((run) => (
-          <tr key={run.id} className="border-border border-t">
-            <td className="py-2">{formatTimestamp(run.scheduled_for)}</td>
-            <td className="py-2">
+          <TableRow key={run.id}>
+            <TableCell>{formatTimestamp(run.scheduled_for)}</TableCell>
+            <TableCell>
               <div className="flex items-center gap-1.5">
                 <ScheduleStatusBadge status={run.status} />
                 {run.error_type && (
@@ -63,25 +85,29 @@ export default function RunLog({ scheduleId, onSelect }: RunLogProps) {
                   </span>
                 )}
               </div>
-            </td>
-            <td className="py-2">{run.prompt_tokens + run.generated_tokens}</td>
-            <td className="py-2">{run.trigger_source}</td>
-            <td className="py-2">
+            </TableCell>
+            <TableCell>{run.prompt_tokens + run.generated_tokens}</TableCell>
+            <TableCell>
+              {t(`agents.schedules.trigger.${run.trigger_source}`, {
+                defaultValue: run.trigger_source,
+              })}
+            </TableCell>
+            <TableCell>
               {onSelect && (
                 <Button
                   type="button"
                   variant="link"
-                  size="sm"
+                  size="xs"
                   onClick={() => onSelect(run)}
-                  className="h-auto p-0 text-xs underline"
+                  className="-mx-2 -my-1"
                 >
-                  Details
+                  {t('agents.schedules.runLog.details')}
                 </Button>
               )}
-            </td>
-          </tr>
+            </TableCell>
+          </TableRow>
         ))}
-      </tbody>
-    </table>
+      </TableBody>
+    </Table>
   );
 }
diff --git a/frontend/src/agents/schedules/ScheduleFormModal.tsx b/frontend/src/agents/schedules/ScheduleFormModal.tsx
index d94d224d..5d963965 100644
--- a/frontend/src/agents/schedules/ScheduleFormModal.tsx
+++ b/frontend/src/agents/schedules/ScheduleFormModal.tsx
@@ -1,9 +1,13 @@
-import { CalendarIcon } from 'lucide-react';
+import { CalendarIcon, CircleAlert } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
+import { Card } from '@/components/ui/card';
+import { FormField } from '@/components/ui/form-field';
+import { Input } from '@/components/ui/input';
 import {
   Popover,
   PopoverContent,
@@ -16,8 +20,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
 import { TimePicker } from '@/components/ui/time-picker';
-import { cn } from '@/lib/utils';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 import { Modal } from '../../components/ui/modal';
 import { formatDateOnly } from '../../utils/dateTimeUtils';
@@ -138,14 +143,24 @@ export default function ScheduleFormModal({
     // the engine's supported list (e.g. an exotic tz saved on the schedule).
     return list.includes(timezone) ? list : [timezone, ...list];
   }, [timezone]);
-  const [error, setError] = useState<string | null>(null);
+  // A missing instruction is the Instructions field's error; a run time in
+  // the past spans the date, time and timezone, so it is an Alert.
+  const [instructionError, setInstructionError] = useState<string | null>(null);
+  const [runAtError, setRunAtError] = useState<string | null>(null);
+  const setError = (field: 'instruction' | 'runAt', message: string) => {
+    setInstructionError(field === 'instruction' ? message : null);
+    setRunAtError(field === 'runAt' ? message : null);
+  };
 
   const setFrequency = (frequency: ScheduleFrequency) =>
     setValues((current) => ({ ...current, frequency }));
 
   const submit = async () => {
     if (!instruction.trim()) {
-      setError(t('agents.schedules.modal.errors.instructionRequired'));
+      setError(
+        'instruction',
+        t('agents.schedules.modal.errors.instructionRequired'),
+      );
       return;
     }
     const payload: ScheduleCreatePayload = {
@@ -159,11 +174,11 @@ export default function ScheduleFormModal({
       try {
         runAt = buildRunAtUtc(values.date, values.time, timezone);
       } catch {
-        setError(t('agents.schedules.modal.errors.runAtInPast'));
+        setError('runAt', t('agents.schedules.modal.errors.runAtInPast'));
         return;
       }
       if (new Date(runAt).getTime() <= Date.now()) {
-        setError(t('agents.schedules.modal.errors.runAtInPast'));
+        setError('runAt', t('agents.schedules.modal.errors.runAtInPast'));
         return;
       }
       payload.trigger_type = 'once';
@@ -171,13 +186,17 @@ export default function ScheduleFormModal({
     } else {
       const cron = buildCron(values.frequency, values);
       if (!cron) {
-        setError(t('agents.schedules.modal.errors.instructionRequired'));
+        setError(
+          'instruction',
+          t('agents.schedules.modal.errors.instructionRequired'),
+        );
         return;
       }
       payload.trigger_type = 'recurring';
       payload.cron = cron;
     }
-    setError(null);
+    setInstructionError(null);
+    setRunAtError(null);
     await onSubmit(payload);
   };
 
@@ -195,17 +214,32 @@ export default function ScheduleFormModal({
       }
       size="md"
       mobileVariant="sheet"
-      className="w-[min(560px,92vw)] sm:p-6"
-      contentClassName="max-h-[80vh]"
+      footer={
+        <Button
+          type="button"
+          size="lg"
+          shape="pill"
+          loading={submitting}
+          onClick={submit}
+        >
+          {isEdit
+            ? t('agents.schedules.modal.save')
+            : t('agents.schedules.modal.create')}
+        </Button>
+      }
     >
       <div className="flex flex-col gap-5">
         <div className="flex items-start gap-3 pr-6">
-          <input
+          <Input
             type="text"
+            variant="bare"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder={t('agents.schedules.modal.namePlaceholder')}
-            className="text-foreground placeholder:text-muted-foreground w-full bg-transparent text-xl font-semibold outline-none"
+            /* eslint-disable-next-line shadcn/no-restyle -- the schedule's
+               name is the dialog's editable title, so the bare field keeps
+               title type (20px semibold); DESIGN.md Approved exceptions. */
+            className="w-full text-xl font-semibold"
             aria-label={t('agents.schedules.modal.namePlaceholder')}
           />
         </div>
@@ -220,6 +254,7 @@ export default function ScheduleFormModal({
             monthly: t('agents.schedules.modal.frequency.monthly'),
             yearly: t('agents.schedules.modal.frequency.yearly'),
           }}
+          ariaLabel={t('agents.schedules.modal.frequencyLabel')}
         />
 
         <OnPicker
@@ -231,10 +266,14 @@ export default function ScheduleFormModal({
             on: t('agents.schedules.modal.on'),
             at: t('agents.schedules.modal.at'),
             pickDate: t('agents.schedules.modal.pickDate'),
+            days: t('agents.schedules.modal.dayOfWeek'),
           }}
         />
 
-        <div className="border-border flex flex-wrap items-center justify-between gap-2 rounded-md border p-3">
+        <Card
+          padding="sm"
+          className="flex-row flex-wrap items-center justify-between gap-2"
+        >
           <span className="text-foreground text-sm font-medium">
             {t('agents.schedules.modal.timezone')}
           </span>
@@ -251,37 +290,26 @@ export default function ScheduleFormModal({
               ariaLabel={t('agents.schedules.modal.timezone')}
             />
           </div>
-        </div>
+        </Card>
 
-        <label className="flex flex-col gap-2">
-          <span className="text-foreground text-sm font-medium">
-            {t('agents.schedules.modal.instructionsLabel')}
-          </span>
-          <textarea
+        <FormField
+          label={t('agents.schedules.modal.instructionsLabel')}
+          error={instructionError}
+        >
+          <Textarea
             value={instruction}
             onChange={(e) => setInstruction(e.target.value)}
             placeholder={t('agents.schedules.modal.instructionsPlaceholder')}
             rows={5}
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
           />
-        </label>
+        </FormField>
 
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
-        <div className="flex justify-end">
-          <Button
-            type="button"
-            disabled={submitting}
-            onClick={submit}
-            className="rounded-3xl px-5"
-          >
-            {submitting
-              ? '…'
-              : isEdit
-                ? t('agents.schedules.modal.save')
-                : t('agents.schedules.modal.create')}
-          </Button>
-        </div>
+        {runAtError && (
+          <Alert variant="destructive">
+            <CircleAlert aria-hidden="true" className="size-4" />
+            <AlertDescription>{runAtError}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </Modal>
   );
@@ -291,32 +319,32 @@ type FrequencyTabsProps = {
   frequency: ScheduleFrequency;
   onChange: (f: ScheduleFrequency) => void;
   labels: Record<ScheduleFrequency, string>;
+  ariaLabel: string;
 };
 
-function FrequencyTabs({ frequency, onChange, labels }: FrequencyTabsProps) {
+function FrequencyTabs({
+  frequency,
+  onChange,
+  labels,
+  ariaLabel,
+}: FrequencyTabsProps) {
   return (
-    <div className="bg-muted/60 dark:bg-muted/40 inline-flex w-full gap-1 rounded-full p-1">
-      {FREQUENCIES.map((f) => {
-        const active = f === frequency;
-        return (
-          <Button
-            key={f}
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={() => onChange(f)}
-            className={cn(
-              'h-auto flex-1 rounded-full px-3 py-1.5 text-xs font-medium',
-              active
-                ? 'bg-card text-foreground hover:bg-card shadow-sm'
-                : 'text-muted-foreground hover:text-foreground hover:bg-transparent',
-            )}
-            aria-pressed={active}
-          >
+    // The muted track is a plain wrapper: ToggleGroup takes layout only.
+    <div className="bg-muted w-full rounded-full p-1">
+      <ToggleGroup
+        type="single"
+        size="xs"
+        value={frequency}
+        onValueChange={(f) => f && onChange(f as ScheduleFrequency)}
+        aria-label={ariaLabel}
+        className="flex-nowrap"
+      >
+        {FREQUENCIES.map((f) => (
+          <ToggleGroupItem key={f} value={f} className="flex-1">
             {labels[f]}
-          </Button>
-        );
-      })}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
     </div>
   );
 }
@@ -326,7 +354,7 @@ type OnPickerProps = {
   onChange: (next: ScheduleFormValues) => void;
   tDay: (key: string) => string;
   tMonth: (key: string) => string;
-  labels: { on: string; at: string; pickDate: string };
+  labels: { on: string; at: string; pickDate: string; days: string };
 };
 
 function OnPicker({ values, onChange, tDay, tMonth, labels }: OnPickerProps) {
@@ -334,7 +362,7 @@ function OnPicker({ values, onChange, tDay, tMonth, labels }: OnPickerProps) {
     onChange({ ...values, ...patch });
 
   return (
-    <div className="border-border flex flex-col gap-3 rounded-md border p-3">
+    <Card padding="sm">
       {values.frequency === 'once' && (
         <div className="flex flex-wrap items-center justify-between gap-2">
           <span className="text-foreground text-sm font-medium">
@@ -370,24 +398,19 @@ function OnPicker({ values, onChange, tDay, tMonth, labels }: OnPickerProps) {
 
       {values.frequency === 'weekly' && (
         <div className="flex flex-col gap-2">
-          <div className="flex flex-wrap gap-1">
-            {DAY_OPTIONS.map((d) => {
-              const active = d.value === values.dayOfWeek;
-              return (
-                <Button
-                  key={d.key}
-                  type="button"
-                  size="sm"
-                  variant={active ? 'default' : 'outline'}
-                  onClick={() => set({ dayOfWeek: d.value })}
-                  className="rounded-full"
-                  aria-pressed={active}
-                >
-                  {tDay(d.key)}
-                </Button>
-              );
-            })}
-          </div>
+          {/* A weekly schedule runs on one day: a radio group. */}
+          <ToggleGroup
+            type="single"
+            value={String(values.dayOfWeek)}
+            onValueChange={(day) => day && set({ dayOfWeek: Number(day) })}
+            aria-label={labels.days}
+          >
+            {DAY_OPTIONS.map((d) => (
+              <ToggleGroupItem key={d.key} value={String(d.value)}>
+                {tDay(d.key)}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
           <div className="flex items-center justify-between gap-2">
             <span className="text-foreground text-sm font-medium">
               {labels.at}
@@ -446,7 +469,7 @@ function OnPicker({ values, onChange, tDay, tMonth, labels }: OnPickerProps) {
           </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }
 
@@ -464,20 +487,16 @@ function DatePicker({ value, onChange, placeholder }: DatePickerProps) {
       <PopoverTrigger asChild>
         <Button
           type="button"
-          variant="outline"
-          size="sm"
+          variant="combobox"
           aria-label={placeholder}
-          className={cn(
-            'h-9 justify-start gap-2 px-3 font-normal',
-            !value && 'text-muted-foreground',
-          )}
+          data-placeholder={value ? undefined : ''}
+          className="justify-start"
         >
-          <CalendarIcon className="size-4 opacity-70" />
+          <CalendarIcon className="opacity-70" />
           {value ? formatDateLabel(value) : placeholder}
         </Button>
       </PopoverTrigger>
-      {/* z-200 keeps the popover above Modal (z-50); matches SelectContent. */}
-      <PopoverContent className="z-200 w-auto p-0" align="start">
+      <PopoverContent className="w-auto p-0" align="start">
         <Calendar
           mode="single"
           selected={selected}
@@ -517,7 +536,7 @@ function DayOfMonthSelect({
 }: DayOfMonthSelectProps) {
   return (
     <Select value={String(value)} onValueChange={(v) => onChange(Number(v))}>
-      <SelectTrigger size="sm" aria-label={ariaLabel} className="h-9 w-[5rem]">
+      <SelectTrigger aria-label={ariaLabel} className="w-[5rem]">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
@@ -541,11 +560,7 @@ type MonthSelectProps = {
 function MonthSelect({ value, onChange, tMonth, ariaLabel }: MonthSelectProps) {
   return (
     <Select value={String(value)} onValueChange={(v) => onChange(Number(v))}>
-      <SelectTrigger
-        size="sm"
-        aria-label={ariaLabel}
-        className="h-9 w-[6.5rem]"
-      >
+      <SelectTrigger aria-label={ariaLabel} className="w-[6.5rem]">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
diff --git a/frontend/src/agents/schedules/SchedulerToolCallCard.test.ts b/frontend/src/agents/schedules/SchedulerToolCallCard.test.ts
index f5e4c8fe..a4aa3196 100644
--- a/frontend/src/agents/schedules/SchedulerToolCallCard.test.ts
+++ b/frontend/src/agents/schedules/SchedulerToolCallCard.test.ts
@@ -1,6 +1,21 @@
-import { describe, expect, it } from 'vitest';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
 
-import { extractToolError } from './SchedulerToolCallCard';
+import '../../locale/i18n';
+
+import SchedulerToolCallCard, {
+  extractToolError,
+  type SchedulerToolCallCardProps,
+} from './SchedulerToolCallCard';
+
+vi.mock('react-redux', () => ({
+  useDispatch: () => vi.fn(),
+  useSelector: () => null,
+}));
+
+const render = (props: SchedulerToolCallCardProps) =>
+  renderToStaticMarkup(createElement(SchedulerToolCallCard, props));
 
 // Regression for the iter-6 issue where ``cancel_scheduled_task`` returning
 // a plain ``"Error: …"`` string still rendered "Scheduled task cancelled."
@@ -35,3 +50,80 @@ describe('extractToolError', () => {
     expect(extractToolError(null)).toBeNull();
   });
 });
+
+describe('SchedulerToolCallCard', () => {
+  const scheduled = {
+    task_id: 't1',
+    resolved_run_at: '2026-09-27T09:00:00Z',
+    instruction: 'Send the weekly report',
+  };
+
+  it('renders a scheduled task on a Card with an icon, time and cancel pill', () => {
+    const html = render({ actionName: 'schedule_task', result: scheduled });
+    expect(html).toContain('data-slot="card"');
+    expect(html).not.toContain('rounded-2xl border p-4');
+    expect(html).toContain('lucide-calendar-clock');
+    expect(html).toContain('>Scheduled task<');
+    expect(html).not.toContain('⏰');
+    expect(html).toContain('text-muted-foreground text-xs');
+    // Instruction: muted, indented under the title, no quotes or italic.
+    expect(html).toContain('Send the weekly report');
+    expect(html).not.toContain('“');
+    expect(html).not.toContain('italic');
+    expect(html).toContain('pl-7');
+    expect(html).toContain('data-variant="destructive-outline"');
+    expect(html).toContain('>Cancel<');
+    expect(html).not.toContain('mt-2');
+  });
+
+  it('shows a spinner, not the calendar icon, while pending', () => {
+    const html = render({
+      actionName: 'schedule_task',
+      result: scheduled,
+      status: 'pending',
+    });
+    expect(html).toContain('data-slot="spinner"');
+    expect(html).not.toContain('lucide-calendar-clock');
+    expect(html).toContain('Scheduling…');
+  });
+
+  it('puts the scheduling error on its own line under a title-only heading', () => {
+    const html = render({
+      actionName: 'schedule_task',
+      result: { error: 'bad time' },
+    });
+    expect(html).toContain('lucide-circle-alert');
+    expect(html).toContain('>Scheduling failed<');
+    expect(html).toContain('>bad time<');
+  });
+
+  it('puts the cancel error on its own line under a title-only heading', () => {
+    const html = render({
+      actionName: 'cancel_scheduled_task',
+      result: 'Error: not found',
+    });
+    expect(html).toContain('lucide-circle-alert');
+    expect(html).toContain('>Cancel failed<');
+    expect(html).toContain('>not found<');
+  });
+
+  it('renders a successful cancel with the cancelled calendar icon', () => {
+    const html = render({
+      actionName: 'cancel_scheduled_task',
+      result: { task_id: 't1', status: 'cancelled' },
+    });
+    expect(html).toContain('lucide-calendar-x-2');
+    expect(html).toContain('Scheduled task cancelled.');
+  });
+
+  it('lists pending tasks on a Card', () => {
+    const html = render({
+      actionName: 'list_scheduled_tasks',
+      result: { tasks: [scheduled] },
+    });
+    expect(html).toContain('data-slot="card"');
+    expect(html).toContain('1 pending scheduled task');
+    expect(html).toContain('Send the weekly report');
+    expect(html).not.toContain('mt-2');
+  });
+});
diff --git a/frontend/src/agents/schedules/SchedulerToolCallCard.tsx b/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
index bbfc616b..a22a35e9 100644
--- a/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
+++ b/frontend/src/agents/schedules/SchedulerToolCallCard.tsx
@@ -1,11 +1,17 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { CalendarClock, CalendarX2, CircleAlert } from 'lucide-react';
+
 import { Button } from '../../components/ui/button';
+import { Card } from '../../components/ui/card';
+import { Spinner } from '../../components/ui/spinner';
 import { selectToken } from '../../preferences/preferenceSlice';
 import type { AppDispatch } from '../../store';
 import { formatDateTime } from '../../utils/dateTimeUtils';
 import { deleteSchedule, loadSchedulesForAgent } from './schedulesSlice';
+import ScheduleStatusBadge from './StatusBadge';
 
 export type SchedulerToolCallCardProps = {
   /** Outcome JSON the scheduler tool returned (action result). */
@@ -53,6 +59,7 @@ export default function SchedulerToolCallCard({
   status,
   agentId,
 }: SchedulerToolCallCardProps) {
+  const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
   const token = useSelector(selectToken);
   const [cancelled, setCancelled] = useState<boolean>(false);
@@ -93,17 +100,30 @@ export default function SchedulerToolCallCard({
     const cancelError = extractToolError(result);
     if (cancelError) {
       return (
-        <div className="border-border bg-card rounded-2xl border p-4 text-sm">
-          <p className="text-destructive font-semibold">
-            Cancel failed: {cancelError}
-          </p>
-        </div>
+        <Card>
+          <div className="flex items-start gap-3">
+            <CircleAlert className="text-destructive mt-0.5 size-4 shrink-0" />
+            <div className="flex min-w-0 flex-1 flex-col">
+              <p className="text-destructive font-semibold">
+                {t('agents.schedules.toolCard.cancelFailed')}
+              </p>
+              <p className="text-muted-foreground">{cancelError}</p>
+            </div>
+          </div>
+        </Card>
       );
     }
     return (
-      <div className="border-border bg-card rounded-2xl border p-4 text-sm">
-        <p className="font-semibold">Scheduled task cancelled.</p>
-      </div>
+      <Card>
+        <div className="flex items-start gap-3">
+          <CalendarX2 className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <p className="font-semibold">
+              {t('agents.schedules.toolCard.taskCancelled')}
+            </p>
+          </div>
+        </div>
+      </Card>
     );
   }
 
@@ -112,19 +132,28 @@ export default function SchedulerToolCallCard({
       ? (parsed?.tasks as Array<Record<string, unknown>>)
       : [];
     return (
-      <div className="border-border bg-card rounded-2xl border p-4 text-sm">
-        <p className="font-semibold">
-          {tasks.length} pending scheduled task{tasks.length === 1 ? '' : 's'}
-        </p>
-        <ul className="mt-2 flex flex-col gap-1">
-          {tasks.map((task) => (
-            <li key={String(task.task_id)}>
-              {formatTimestamp(task.resolved_run_at as string)} —{' '}
-              {String(task.instruction || task.name || task.task_id)}
-            </li>
-          ))}
-        </ul>
-      </div>
+      <Card>
+        <div className="flex items-start gap-3">
+          <CalendarClock className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <p className="font-semibold">
+              {t('agents.schedules.toolCard.pendingCount', {
+                count: tasks.length,
+              })}
+            </p>
+          </div>
+        </div>
+        {tasks.length > 0 && (
+          <ul className="flex flex-col gap-1 pl-7">
+            {tasks.map((task) => (
+              <li key={String(task.task_id)}>
+                {formatTimestamp(task.resolved_run_at as string)} —{' '}
+                {String(task.instruction || task.name || task.task_id)}
+              </li>
+            ))}
+          </ul>
+        )}
+      </Card>
     );
   }
 
@@ -133,45 +162,59 @@ export default function SchedulerToolCallCard({
   const schedulingError = error || extractToolError(result);
   if (schedulingError) {
     return (
-      <div className="border-border bg-card rounded-2xl border p-4 text-sm">
-        <p className="text-destructive font-semibold">
-          Scheduling failed: {schedulingError}
-        </p>
-      </div>
+      <Card>
+        <div className="flex items-start gap-3">
+          <CircleAlert className="text-destructive mt-0.5 size-4 shrink-0" />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <p className="text-destructive font-semibold">
+              {t('agents.schedules.toolCard.schedulingFailed')}
+            </p>
+            <p className="text-muted-foreground">{schedulingError}</p>
+          </div>
+        </div>
+      </Card>
     );
   }
 
+  const iconClass = 'text-muted-foreground mt-0.5 size-4 shrink-0';
   return (
-    <div className="border-border bg-card rounded-2xl border p-4 text-sm">
-      <div className="flex items-center justify-between">
-        <p className="font-semibold">
-          {status === 'pending' ? '⏰ Scheduling…' : '⏰ Scheduled task'}
-        </p>
-        {runAt && (
-          <span className="text-muted-foreground text-xs">
-            {formatTimestamp(runAt)}
-          </span>
+    <Card>
+      <div className="flex items-start gap-3">
+        {status === 'pending' ? (
+          <Spinner size="xs" className="text-muted-foreground mt-0.5" />
+        ) : cancelled ? (
+          <CalendarX2 className={iconClass} />
+        ) : (
+          <CalendarClock className={iconClass} />
         )}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <p className="font-semibold">
+            {status === 'pending'
+              ? t('agents.schedules.toolCard.scheduling')
+              : t('agents.schedules.toolCard.scheduled')}
+          </p>
+          {runAt && (
+            <span className="text-muted-foreground text-xs">
+              {formatTimestamp(runAt)}
+            </span>
+          )}
+        </div>
+        {taskId && !cancelled && (
+          <Button
+            type="button"
+            variant="destructive-outline"
+            size="xs"
+            shape="pill"
+            onClick={cancel}
+          >
+            {t('agents.schedules.cancel')}
+          </Button>
+        )}
+        {cancelled && <ScheduleStatusBadge status="cancelled" />}
       </div>
       {instruction && (
-        <p className="text-muted-foreground mt-2 text-sm italic">
-          “{instruction}”
-        </p>
+        <p className="text-muted-foreground pl-7">{instruction}</p>
       )}
-      {taskId && !cancelled && (
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={cancel}
-          className="text-destructive mt-2 text-xs"
-        >
-          Cancel
-        </Button>
-      )}
-      {cancelled && (
-        <p className="text-muted-foreground mt-2 text-xs">Cancelled.</p>
-      )}
-    </div>
+    </Card>
   );
 }
diff --git a/frontend/src/agents/schedules/SchedulesView.tsx b/frontend/src/agents/schedules/SchedulesView.tsx
index e10cea5d..9ab49b60 100644
--- a/frontend/src/agents/schedules/SchedulesView.tsx
+++ b/frontend/src/agents/schedules/SchedulesView.tsx
@@ -4,15 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import userService from '../../api/services/userService';
-import Spinner from '../../components/Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
+import { SectionHeader } from '@/components/ui/section-header';
 import { Button } from '../../components/ui/button';
 import ConfirmationModal from '../../modals/ConfirmationModal';
 import { ActiveState } from '../../models/misc';
 import { selectToken } from '../../preferences/preferenceSlice';
 import type { AppDispatch, RootState } from '../../store';
 import { formatDateTime } from '../../utils/dateTimeUtils';
-import { CurrentSectionHeader } from '../../navigation/SectionPageHeader';
-import SectionPills from '../../navigation/SectionPills';
+import SectionShell from '../../navigation/SectionShell';
 import type { Agent } from '../types';
 import type {
   Schedule,
@@ -34,6 +34,10 @@ import {
   updateSchedule,
 } from './schedulesSlice';
 
+// Timezones and dates carry slashes: React escapes on render, so i18next
+// must not escape them first.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
 const formatTimestamp = (value?: string | null): string => {
   return value ? formatDateTime(value) : '—';
 };
@@ -148,235 +152,244 @@ export default function SchedulesView() {
   };
 
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-6xl">
-        <CurrentSectionHeader />
-        <SectionPills className="mt-4" />
-        <div className="mt-6 flex flex-col gap-3">
-          {agent && (
-            <div className="flex flex-col gap-1">
-              <p className="text-foreground">{agent.name}</p>
-              <p className="text-muted-foreground text-xs">
-                {agent.last_used_at
-                  ? t('agents.logs.lastUsedAt') +
-                    ' ' +
-                    formatDateTime(agent.last_used_at)
-                  : t('agents.logs.noUsageHistory')}
-              </p>
-            </div>
-          )}
-        </div>
-        {loadingAgent ? (
-          <div className="flex h-[55vh] w-full items-center justify-center">
-            <Spinner />
+    <SectionShell pills>
+      <div className="flex flex-col gap-3">
+        {agent && (
+          <div className="flex flex-col gap-1">
+            <p className="text-foreground">{agent.name}</p>
+            <p className="text-muted-foreground text-xs">
+              {agent.last_used_at
+                ? t('agents.logs.lastUsedAt') +
+                  ' ' +
+                  formatDateTime(agent.last_used_at)
+                : t('agents.logs.noUsageHistory')}
+            </p>
           </div>
-        ) : (
-          agent && (
-            <div className="flex flex-col gap-4 p-4">
-              <header className="flex items-center justify-between">
-                <h2 className="text-lg font-semibold">
-                  {t('agents.schedules.heading')}
-                </h2>
+        )}
+      </div>
+      {loadingAgent ? (
+        <LoadingState fill="block" />
+      ) : (
+        agent && (
+          <div className="flex flex-col gap-4 p-4">
+            <SectionHeader
+              title={t('agents.schedules.heading')}
+              actions={
                 <Button type="button" size="sm" onClick={openCreate}>
                   {t('agents.schedules.newRecurring')}
                 </Button>
-              </header>
-              <section>
-                <h3 className="text-muted-foreground mb-2 text-sm font-semibold uppercase">
-                  {t('agents.schedules.recurring')} ({recurring.length})
-                </h3>
-                {recurring.length === 0 ? (
-                  <p className="text-muted-foreground text-sm">
-                    {t('agents.schedules.noRecurring')}
-                  </p>
-                ) : (
-                  <ul className="flex flex-col gap-3">
-                    {recurring.map((schedule) => (
-                      <li
-                        key={schedule.id}
-                        className="border-border bg-card rounded-lg border p-3"
-                      >
-                        <div className="flex items-start justify-between">
-                          <div>
-                            <div className="flex items-center gap-2">
-                              <p className="font-semibold">
-                                {schedule.name ||
-                                  schedule.instruction.slice(0, 80)}
-                              </p>
-                              <ScheduleStatusBadge status={schedule.status} />
-                            </div>
-                            <p className="text-muted-foreground text-xs">
-                              {formatCron(schedule.cron)} · tz:{' '}
-                              {schedule.timezone} · next:{' '}
-                              {formatTimestamp(schedule.next_run_at)}
+              }
+            />
+            <section className="flex flex-col gap-2">
+              <SectionHeader
+                as="h3"
+                size="sm"
+                title={`${t('agents.schedules.recurring')} (${recurring.length})`}
+              />
+              {recurring.length === 0 ? (
+                <p className="text-muted-foreground text-sm">
+                  {t('agents.schedules.noRecurring')}
+                </p>
+              ) : (
+                <ul className="flex flex-col gap-3">
+                  {recurring.map((schedule) => (
+                    <li
+                      key={schedule.id}
+                      className="border-border bg-card rounded-lg border p-3"
+                    >
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <p className="font-semibold">
+                              {schedule.name ||
+                                schedule.instruction.slice(0, 80)}
                             </p>
+                            <ScheduleStatusBadge status={schedule.status} />
                           </div>
-                          <div className="flex gap-2">
+                          <p className="text-muted-foreground text-xs">
+                            {formatCron(schedule.cron, t)} ·{' '}
+                            {t('agents.schedules.timezoneMeta', {
+                              ...NO_ESCAPE,
+                              timezone: schedule.timezone,
+                            })}{' '}
+                            ·{' '}
+                            {t('agents.schedules.nextRunMeta', {
+                              ...NO_ESCAPE,
+                              time: formatTimestamp(schedule.next_run_at),
+                            })}
+                          </p>
+                        </div>
+                        <div className="flex gap-2">
+                          <Button
+                            type="button"
+                            variant="outline-primary"
+                            size="sm"
+                            shape="pill"
+                            onClick={() => openEdit(schedule)}
+                          >
+                            {t('agents.schedules.edit')}
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline-primary"
+                            size="sm"
+                            shape="pill"
+                            onClick={() =>
+                              dispatch(
+                                setSchedulePaused({
+                                  id: schedule.id,
+                                  action:
+                                    schedule.status === 'active'
+                                      ? 'pause'
+                                      : 'resume',
+                                  token,
+                                }),
+                              )
+                            }
+                          >
+                            {schedule.status === 'active'
+                              ? t('agents.schedules.pause')
+                              : t('agents.schedules.resume')}
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline-primary"
+                            size="sm"
+                            shape="pill"
+                            onClick={() =>
+                              dispatch(
+                                runScheduleNow({ id: schedule.id, token }),
+                              )
+                            }
+                          >
+                            {t('agents.schedules.runNow')}
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="destructive-outline"
+                            size="sm"
+                            shape="pill"
+                            onClick={() => requestDelete(schedule)}
+                          >
+                            {t('agents.schedules.delete')}
+                          </Button>
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="link"
+                        size="xs"
+                        onClick={() =>
+                          setExpanded(
+                            expanded === schedule.id ? null : schedule.id,
+                          )
+                        }
+                        className="mt-0.5 -ml-2"
+                      >
+                        {expanded === schedule.id
+                          ? t('agents.schedules.hideRuns')
+                          : t('agents.schedules.showRuns')}
+                      </Button>
+                      {expanded === schedule.id && (
+                        <div className="mt-2">
+                          <RunLog
+                            scheduleId={schedule.id}
+                            onSelect={(run) => setActiveRun(run)}
+                          />
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+            <section className="flex flex-col gap-2">
+              <SectionHeader
+                as="h3"
+                size="sm"
+                title={`${t('agents.schedules.oneTime')} (${oneTime.length})`}
+              />
+              {oneTime.length === 0 ? (
+                <p className="text-muted-foreground text-sm">
+                  {t('agents.schedules.noOneTime')}
+                </p>
+              ) : (
+                <ul className="flex flex-col gap-2">
+                  {oneTime.map((schedule) => (
+                    <li
+                      key={schedule.id}
+                      className="border-border bg-card rounded-lg border p-3 text-sm"
+                    >
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <p className="font-semibold">
+                              {schedule.name ||
+                                schedule.instruction.slice(0, 80)}
+                            </p>
+                            <ScheduleStatusBadge status={schedule.status} />
+                          </div>
+                          <p className="text-muted-foreground text-xs">
+                            runs at {formatTimestamp(schedule.run_at)}
+                          </p>
+                        </div>
+                        <div className="flex gap-2">
+                          {schedule.status === 'active' && (
                             <Button
                               type="button"
+                              variant="outline-primary"
                               size="sm"
+                              shape="pill"
                               onClick={() => openEdit(schedule)}
-                              className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
                             >
                               {t('agents.schedules.edit')}
                             </Button>
-                            <Button
-                              type="button"
-                              size="sm"
-                              onClick={() =>
-                                dispatch(
-                                  setSchedulePaused({
-                                    id: schedule.id,
-                                    action:
-                                      schedule.status === 'active'
-                                        ? 'pause'
-                                        : 'resume',
-                                    token,
-                                  }),
-                                )
-                              }
-                              className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
-                            >
-                              {schedule.status === 'active'
-                                ? t('agents.schedules.pause')
-                                : t('agents.schedules.resume')}
-                            </Button>
-                            <Button
-                              type="button"
-                              size="sm"
-                              onClick={() =>
-                                dispatch(
-                                  runScheduleNow({ id: schedule.id, token }),
-                                )
-                              }
-                              className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
-                            >
-                              {t('agents.schedules.runNow')}
-                            </Button>
+                          )}
+                          {schedule.status === 'active' && (
                             <Button
                               type="button"
                               variant="destructive-outline"
                               size="sm"
+                              shape="pill"
                               onClick={() => requestDelete(schedule)}
-                              className="rounded-full px-5"
                             >
-                              {t('agents.schedules.delete')}
+                              {t('agents.schedules.cancel')}
                             </Button>
-                          </div>
+                          )}
                         </div>
-                        <Button
-                          type="button"
-                          variant="link"
-                          size="sm"
-                          onClick={() =>
-                            setExpanded(
-                              expanded === schedule.id ? null : schedule.id,
-                            )
-                          }
-                          className="mt-2 h-auto p-0 text-xs underline"
-                        >
-                          {expanded === schedule.id
-                            ? t('agents.schedules.hideRuns')
-                            : t('agents.schedules.showRuns')}
-                        </Button>
-                        {expanded === schedule.id && (
-                          <div className="mt-2">
-                            <RunLog
-                              scheduleId={schedule.id}
-                              onSelect={(run) => setActiveRun(run)}
-                            />
-                          </div>
-                        )}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </section>
-              <section>
-                <h3 className="text-muted-foreground mb-2 text-sm font-semibold uppercase">
-                  {t('agents.schedules.oneTime')} ({oneTime.length})
-                </h3>
-                {oneTime.length === 0 ? (
-                  <p className="text-muted-foreground text-sm">
-                    {t('agents.schedules.noOneTime')}
-                  </p>
-                ) : (
-                  <ul className="flex flex-col gap-2">
-                    {oneTime.map((schedule) => (
-                      <li
-                        key={schedule.id}
-                        className="border-border bg-card rounded-lg border p-3 text-sm"
-                      >
-                        <div className="flex items-start justify-between">
-                          <div>
-                            <div className="flex items-center gap-2">
-                              <p className="font-semibold">
-                                {schedule.name ||
-                                  schedule.instruction.slice(0, 80)}
-                              </p>
-                              <ScheduleStatusBadge status={schedule.status} />
-                            </div>
-                            <p className="text-muted-foreground text-xs">
-                              runs at {formatTimestamp(schedule.run_at)}
-                            </p>
-                          </div>
-                          <div className="flex gap-2">
-                            {schedule.status === 'active' && (
-                              <Button
-                                type="button"
-                                size="sm"
-                                onClick={() => openEdit(schedule)}
-                                className="border-primary text-primary hover:bg-primary/90 rounded-full border border-solid bg-transparent px-5 hover:text-white"
-                              >
-                                {t('agents.schedules.edit')}
-                              </Button>
-                            )}
-                            {schedule.status === 'active' && (
-                              <Button
-                                type="button"
-                                variant="destructive-outline"
-                                size="sm"
-                                onClick={() => requestDelete(schedule)}
-                                className="rounded-full px-5"
-                              >
-                                {t('agents.schedules.cancel')}
-                              </Button>
-                            )}
-                          </div>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </section>
-              <RunDetailDrawer
-                run={activeRun}
-                onClose={() => setActiveRun(null)}
-              />
-              {modalOpen && (
-                <ScheduleFormModal
-                  key={editing?.id ?? 'create'}
-                  open={modalOpen}
-                  initial={editing}
-                  agentToolIds={agentToolIds}
-                  onClose={closeModal}
-                  onSubmit={handleSubmit}
-                  submitting={submitting}
-                />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
               )}
-              <ConfirmationModal
-                message={t('agents.schedules.deleteConfirm')}
-                modalState={deleteConfirmation}
-                setModalState={setDeleteConfirmation}
-                submitLabel={t('agents.schedules.delete')}
-                handleSubmit={confirmDelete}
-                handleCancel={() => setScheduleToDelete(null)}
-                variant="danger"
+            </section>
+            <RunDetailDrawer
+              run={activeRun}
+              onClose={() => setActiveRun(null)}
+            />
+            {modalOpen && (
+              <ScheduleFormModal
+                key={editing?.id ?? 'create'}
+                open={modalOpen}
+                initial={editing}
+                agentToolIds={agentToolIds}
+                onClose={closeModal}
+                onSubmit={handleSubmit}
+                submitting={submitting}
               />
-            </div>
-          )
-        )}
-      </div>
-    </div>
+            )}
+            <ConfirmationModal
+              message={t('agents.schedules.deleteConfirm')}
+              modalState={deleteConfirmation}
+              setModalState={setDeleteConfirmation}
+              submitLabel={t('agents.schedules.delete')}
+              handleSubmit={confirmDelete}
+              handleCancel={() => setScheduleToDelete(null)}
+              variant="destructive"
+            />
+          </div>
+        )
+      )}
+    </SectionShell>
   );
 }
diff --git a/frontend/src/agents/schedules/StatusBadge.test.tsx b/frontend/src/agents/schedules/StatusBadge.test.tsx
index 69c5385a..64d2e42e 100644
--- a/frontend/src/agents/schedules/StatusBadge.test.tsx
+++ b/frontend/src/agents/schedules/StatusBadge.test.tsx
@@ -1,16 +1,18 @@
 import { renderToStaticMarkup } from 'react-dom/server';
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import i18n from '../../locale/i18n';
 
 import ScheduleStatusBadge, {
   formatStatusLabel,
-  getStatusClasses,
+  getStatusVariant,
   type ScheduleStatusBadgeStatus,
 } from './StatusBadge';
 
 type Case = {
   status: ScheduleStatusBadgeStatus;
   label: string;
-  classes: string[];
+  variant: string;
 };
 
 const CASES: Case[] = [
@@ -18,68 +20,67 @@ const CASES: Case[] = [
   {
     status: 'active',
     label: 'Active',
-    classes: ['bg-green-100', 'text-green-700'],
+    variant: 'success',
   },
   {
     status: 'paused',
     label: 'Paused',
-    classes: ['bg-amber-100', 'text-amber-700'],
+    variant: 'warning',
   },
   {
     status: 'completed',
     label: 'Completed',
-    classes: ['bg-blue-100', 'text-blue-700'],
+    variant: 'success',
   },
   {
     status: 'cancelled',
     label: 'Cancelled',
-    classes: ['bg-muted', 'text-muted-foreground'],
+    variant: 'neutral',
   },
   // Run statuses
   {
     status: 'success',
     label: 'Success',
-    classes: ['bg-green-100', 'text-green-700'],
+    variant: 'success',
   },
   {
     status: 'failed',
     label: 'Failed',
-    classes: ['bg-red-100', 'text-red-700'],
+    variant: 'destructive',
   },
   {
     status: 'skipped',
     label: 'Skipped',
-    classes: ['bg-amber-100', 'text-amber-700'],
+    variant: 'warning',
   },
   {
     status: 'running',
     label: 'Running',
-    classes: ['bg-blue-100', 'text-blue-700'],
+    variant: 'info',
   },
   {
     status: 'pending',
     label: 'Pending',
-    classes: ['bg-muted', 'text-muted-foreground'],
+    variant: 'neutral',
   },
   {
     status: 'timeout',
     label: 'Timeout',
-    classes: ['bg-red-100', 'text-red-700'],
+    variant: 'destructive',
   },
 ];
 
 describe('ScheduleStatusBadge', () => {
   it.each(CASES)(
-    'renders $status with label "$label" and the right color classes',
-    ({ status, label, classes }) => {
+    'renders $status with label "$label" as a $variant badge',
+    ({ status, label, variant }) => {
       const html = renderToStaticMarkup(
         <ScheduleStatusBadge status={status} />,
       );
       expect(html).toContain(label);
       expect(html).toContain(`data-status="${status}"`);
-      for (const cls of classes) {
-        expect(html).toContain(cls);
-      }
+      expect(html).toContain('data-slot="badge"');
+      expect(html).toContain(`data-variant="${variant}"`);
     },
   );
 
@@ -101,9 +102,21 @@ describe('formatStatusLabel', () => {
   });
 });
 
-describe('getStatusClasses', () => {
-  it('returns muted classes for an unknown status', () => {
+describe('getStatusVariant', () => {
+  it('returns neutral for an unknown status', () => {
     // @ts-expect-error -- exercising the runtime fallback for unknown values
-    expect(getStatusClasses('unknown')).toContain('text-muted-foreground');
+    expect(getStatusVariant('unknown')).toBe('neutral');
+  });
+});
+
+describe('ScheduleStatusBadge locale', () => {
+  afterEach(async () => {
+    await i18n.changeLanguage('en');
+  });
+
+  it('reads its label from the locale files', async () => {
+    await i18n.changeLanguage('de');
+    const html = renderToStaticMarkup(<ScheduleStatusBadge status="failed" />);
+    expect(html).toContain('Fehlgeschlagen');
   });
 });
diff --git a/frontend/src/agents/schedules/StatusBadge.tsx b/frontend/src/agents/schedules/StatusBadge.tsx
index c753411d..a3978e96 100644
--- a/frontend/src/agents/schedules/StatusBadge.tsx
+++ b/frontend/src/agents/schedules/StatusBadge.tsx
@@ -1,4 +1,6 @@
-import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+
+import { Badge } from '@/components/ui/badge';
 
 import type { ScheduleRunStatus, ScheduleStatus } from '../types/schedule';
 
@@ -9,23 +11,21 @@ export type ScheduleStatusBadgeProps = {
   className?: string;
 };
 
-const STATUS_CLASSES: Record<ScheduleStatusBadgeStatus, string> = {
+type StatusVariant = 'success' | 'warning' | 'info' | 'destructive' | 'neutral';
+
+const STATUS_VARIANTS: Record<ScheduleStatusBadgeStatus, StatusVariant> = {
   // Schedule statuses
-  active:
-    'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  paused:
-    'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
-  completed: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  cancelled: 'bg-muted text-muted-foreground',
+  active: 'success',
+  paused: 'warning',
+  completed: 'success',
+  cancelled: 'neutral',
   // Run statuses
-  success:
-    'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  failed: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  skipped:
-    'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
-  running: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  pending: 'bg-muted text-muted-foreground',
-  timeout: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  success: 'success',
+  failed: 'destructive',
+  skipped: 'warning',
+  running: 'info',
+  pending: 'neutral',
+  timeout: 'destructive',
 };
 
 /** Maps a status string to a human label (sentence-cased, underscores spaced). */
@@ -34,25 +34,26 @@ export const formatStatusLabel = (status: string): string => {
   return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 };
 
-/** Returns the Tailwind classes for a given schedule/run status pill. */
-export const getStatusClasses = (status: ScheduleStatusBadgeStatus): string =>
-  STATUS_CLASSES[status] ?? 'bg-muted text-muted-foreground';
+/** Returns the Badge variant for a given schedule/run status. */
+export const getStatusVariant = (
+  status: ScheduleStatusBadgeStatus,
+): StatusVariant => STATUS_VARIANTS[status] ?? 'neutral';
 
 /** Colored pill for schedule or run statuses. */
 export default function ScheduleStatusBadge({
   status,
   className,
 }: ScheduleStatusBadgeProps) {
+  const { t } = useTranslation();
   return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium',
-        getStatusClasses(status),
-        className,
-      )}
+    <Badge
+      variant={getStatusVariant(status)}
+      className={className}
       data-status={status}
     >
-      {formatStatusLabel(status)}
-    </span>
+      {t(`agents.schedules.status.${status}`, {
+        defaultValue: formatStatusLabel(status),
+      })}
+    </Badge>
   );
 }
diff --git a/frontend/src/agents/schedules/TimezoneCombobox.tsx b/frontend/src/agents/schedules/TimezoneCombobox.tsx
index 4950df11..c8972f83 100644
--- a/frontend/src/agents/schedules/TimezoneCombobox.tsx
+++ b/frontend/src/agents/schedules/TimezoneCombobox.tsx
@@ -125,16 +125,12 @@ export default function TimezoneCombobox({
       <PopoverTrigger asChild>
         <Button
           type="button"
-          variant="outline"
+          variant="combobox"
           role="combobox"
-          size="sm"
           aria-expanded={open}
           aria-label={ariaLabel}
-          className={cn(
-            'h-9 w-full justify-between gap-2 px-3 font-normal',
-            !value && 'text-muted-foreground',
-            className,
-          )}
+          data-placeholder={value ? undefined : ''}
+          className={cn('w-full justify-between', className)}
         >
           {value ? (
             <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
@@ -146,12 +142,11 @@ export default function TimezoneCombobox({
           ) : (
             <span className="truncate">{placeholder}</span>
           )}
-          <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      {/* z-200 keeps the popover above Modal (z-50); matches DatePicker. */}
       <PopoverContent
-        className="z-200 w-[min(20rem,calc(100vw-2rem))] p-0"
+        className="w-[min(20rem,calc(100vw-2rem))] p-0"
         align="start"
       >
         <Command shouldFilter={false}>
@@ -177,7 +172,7 @@ export default function TimezoneCombobox({
                   >
                     <Check
                       className={cn(
-                        'mr-2 size-4 shrink-0',
+                        'size-4 shrink-0',
                         selected ? 'opacity-100' : 'opacity-0',
                       )}
                     />
diff --git a/frontend/src/agents/schedules/cronBuilder.test.ts b/frontend/src/agents/schedules/cronBuilder.test.ts
index 4dae6df6..f528f4d9 100644
--- a/frontend/src/agents/schedules/cronBuilder.test.ts
+++ b/frontend/src/agents/schedules/cronBuilder.test.ts
@@ -1,3 +1,4 @@
+import i18next from 'i18next';
 import { describe, expect, it } from 'vitest';
 
 import type { Schedule } from '../types/schedule';
@@ -323,3 +324,64 @@ describe('formatCron', () => {
     expect(formatCron(undefined)).toBe('');
   });
 });
+
+describe('formatCron with a translate function', () => {
+  // The English locale strings (agents.schedules.cron) must read exactly like
+  // the untranslated fallback.
+  const t = i18next.createInstance();
+  void t.init({
+    lng: 'en',
+    initAsync: false,
+    resources: {
+      en: {
+        translation: {
+          agents: {
+            schedules: {
+              cron: {
+                daily: 'Daily at {{time}}',
+                weekly: 'Weekly on {{day}} at {{time}}',
+                monthly: 'Monthly on day {{day}} at {{time}}',
+                yearly: 'Yearly on {{month}} {{day}} at {{time}}',
+                custom: 'Custom: {{expression}}',
+                dayNames: {
+                  sun: 'Sunday',
+                  mon: 'Monday',
+                  tue: 'Tuesday',
+                  wed: 'Wednesday',
+                  thu: 'Thursday',
+                  fri: 'Friday',
+                  sat: 'Saturday',
+                },
+                monthNames: {
+                  jan: 'January',
+                  feb: 'February',
+                  mar: 'March',
+                  apr: 'April',
+                  may: 'May',
+                  jun: 'June',
+                  jul: 'July',
+                  aug: 'August',
+                  sep: 'September',
+                  oct: 'October',
+                  nov: 'November',
+                  dec: 'December',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  it.each([
+    '0 9 * * *',
+    '0 9 * * 1',
+    '15 7 * * 0',
+    '0 10 15 * *',
+    '0 8 15 3 *',
+    '0 9 * * 1-5',
+  ])('matches the English fallback for %s', (cron) => {
+    expect(formatCron(cron, t.t)).toBe(formatCron(cron));
+  });
+});
diff --git a/frontend/src/agents/schedules/cronBuilder.ts b/frontend/src/agents/schedules/cronBuilder.ts
index be54a780..c2e1dbf3 100644
--- a/frontend/src/agents/schedules/cronBuilder.ts
+++ b/frontend/src/agents/schedules/cronBuilder.ts
@@ -1,11 +1,8 @@
+import type { TFunction } from 'i18next';
 import type { Schedule } from '../types/schedule';
 
 export type ScheduleFrequency =
-  | 'once'
-  | 'daily'
-  | 'weekly'
-  | 'monthly'
-  | 'yearly';
+  'once' | 'daily' | 'weekly' | 'monthly' | 'yearly';
 
 export type ScheduleFormValues = {
   frequency: ScheduleFrequency;
@@ -312,13 +309,70 @@ const formatTime12h = (hour: number, minute: number): string => {
   return `${h12}:${pad2(minute)} ${period}`;
 };
 
-/** Human-readable label for a cron string the form emits; falls back for custom shapes. */
-export function formatCron(expression?: string | null): string {
+const DAY_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+const MONTH_KEYS = [
+  'jan',
+  'feb',
+  'mar',
+  'apr',
+  'may',
+  'jun',
+  'jul',
+  'aug',
+  'sep',
+  'oct',
+  'nov',
+  'dec',
+];
+
+// Cron text is plain text: React escapes on render.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
+/**
+ * Human-readable label for a cron string the form emits; falls back for custom shapes.
+ *
+ * Args:
+ *   expression: The cron expression.
+ *   t: Optional i18next translate function; without it the label is English.
+ *
+ * Returns:
+ *   The label, or an empty string when there is no expression.
+ */
+export function formatCron(expression?: string | null, t?: TFunction): string {
   if (!expression) return '';
   const parsed = parseCron(expression);
-  if (!parsed) return `Custom: ${expression}`;
+  const custom = () =>
+    t
+      ? t('agents.schedules.cron.custom', { ...NO_ESCAPE, expression })
+      : `Custom: ${expression}`;
+  if (!parsed) return custom();
   const { frequency, hour, minute, dom, mon, dow } = parsed;
   const time = formatTime12h(hour, minute);
+  if (t) {
+    const dayIndex = (dow ?? 0) % 7;
+    const monthIndex = ((mon ?? 1) - 1) % 12;
+    switch (frequency) {
+      case 'daily':
+        return t('agents.schedules.cron.daily', { time });
+      case 'weekly':
+        return t('agents.schedules.cron.weekly', {
+          time,
+          day: t(`agents.schedules.cron.dayNames.${DAY_KEYS[dayIndex]}`),
+        });
+      case 'monthly':
+        return t('agents.schedules.cron.monthly', { time, day: dom });
+      case 'yearly':
+        return t('agents.schedules.cron.yearly', {
+          time,
+          day: dom,
+          month: t(
+            `agents.schedules.cron.monthNames.${MONTH_KEYS[monthIndex]}`,
+          ),
+        });
+      default:
+        return custom();
+    }
+  }
   switch (frequency) {
     case 'daily':
       return `Daily at ${time}`;
diff --git a/frontend/src/agents/types/schedule.ts b/frontend/src/agents/types/schedule.ts
index 2cbf3e83..75fa7971 100644
--- a/frontend/src/agents/types/schedule.ts
+++ b/frontend/src/agents/types/schedule.ts
@@ -3,12 +3,7 @@ export type ScheduleTriggerType = 'once' | 'recurring';
 export type ScheduleStatus = 'active' | 'paused' | 'completed' | 'cancelled';
 
 export type ScheduleRunStatus =
-  | 'pending'
-  | 'running'
-  | 'success'
-  | 'failed'
-  | 'skipped'
-  | 'timeout';
+  'pending' | 'running' | 'success' | 'failed' | 'skipped' | 'timeout';
 
 // Mirrors the schedule_runs.error_type CHECK constraint (migrations 0010, 0027).
 export type ScheduleRunErrorType =
diff --git a/frontend/src/agents/types/workflow.ts b/frontend/src/agents/types/workflow.ts
index 370dfb25..3d2994ee 100644
--- a/frontend/src/agents/types/workflow.ts
+++ b/frontend/src/agents/types/workflow.ts
@@ -1,11 +1,5 @@
 export type NodeType =
-  | 'start'
-  | 'end'
-  | 'agent'
-  | 'note'
-  | 'state'
-  | 'condition'
-  | 'code';
+  'start' | 'end' | 'agent' | 'note' | 'state' | 'condition' | 'code';
 
 export interface CodeNodeConfig {
   code: string;
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index a31bbf50..ee79e146 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -1,14 +1,13 @@
 import 'reactflow/dist/style.css';
 
 import {
-  AlertCircle,
   Bot,
-  Code2,
+  CircleAlert,
+  CodeXml,
   Database,
   Flag,
   GitBranch,
   Link,
-  Loader2,
   Pencil,
   Play,
   Plus,
@@ -17,9 +16,18 @@ import {
   Trash2,
   Undo2,
   X,
+  type LucideIcon,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import {
+  type DragEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { type TFunction } from 'i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import ReactFlow, {
@@ -40,9 +48,19 @@ import ReactFlow, {
 } from 'reactflow';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Avatar } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { IconButton } from '@/components/ui/icon-button';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import { MultiSelect } from '@/components/ui/multi-select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -52,7 +70,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { SectionHeader } from '@/components/ui/section-header';
+import { SettingRow } from '@/components/ui/setting-row';
 import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 
 import modelService from '../../api/services/modelService';
 import userService from '../../api/services/userService';
@@ -101,10 +124,128 @@ import {
 import WorkflowPreview from './WorkflowPreview';
 
 import type { Model } from '../../models/types';
-import { useOutsideAlerter } from '@/hooks';
 
 const PRIMARY_ACTION_SPINNER_DELAY_MS = 180;
 
+type PaletteTone = 'primary' | 'success' | 'warning' | 'info';
+
+// Whole class strings per tone so Tailwind sees them.
+const PALETTE_TONE_CLASSES: Record<PaletteTone, string> = {
+  primary:
+    'bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground',
+  success:
+    'bg-success/10 text-success group-hover:bg-success group-hover:text-success-foreground',
+  warning:
+    'bg-warning/10 text-warning group-hover:bg-warning group-hover:text-warning-foreground',
+  info: 'bg-info/10 text-info group-hover:bg-info group-hover:text-info-foreground',
+};
+
+interface PaletteEntry {
+  type: string;
+  group: 'core' | 'logic';
+  icon: LucideIcon;
+  tone: PaletteTone;
+  labelKey: string;
+  hintKey?: string;
+}
+
+const PALETTE: PaletteEntry[] = [
+  {
+    type: 'agent',
+    group: 'core',
+    icon: Bot,
+    tone: 'primary',
+    labelKey: 'agents.workflow.builder.aiAgent',
+  },
+  {
+    type: 'end',
+    group: 'core',
+    icon: Flag,
+    tone: 'success',
+    labelKey: 'agents.workflow.nodes.end',
+  },
+  {
+    type: 'note',
+    group: 'core',
+    icon: StickyNote,
+    tone: 'warning',
+    labelKey: 'agents.workflow.nodes.note',
+  },
+  {
+    type: 'state',
+    group: 'logic',
+    icon: Database,
+    tone: 'info',
+    labelKey: 'agents.workflow.nodes.setState',
+    hintKey: 'agents.workflow.builder.setStateHint',
+  },
+  {
+    type: 'condition',
+    group: 'logic',
+    icon: GitBranch,
+    tone: 'warning',
+    labelKey: 'agents.workflow.nodes.condition',
+    hintKey: 'agents.workflow.builder.conditionHint',
+  },
+  {
+    type: 'code',
+    group: 'logic',
+    icon: CodeXml,
+    tone: 'info',
+    labelKey: 'agents.workflow.nodes.code',
+    hintKey: 'agents.workflow.builder.codeHint',
+  },
+];
+
+/**
+ * A draggable pill in the builder's node palette.
+ *
+ * Args:
+ *   entry: The palette entry to render.
+ *   onDragStart: Starts dragging a node of the entry's type onto the canvas.
+ */
+function NodePaletteItem({
+  entry,
+  onDragStart,
+}: {
+  entry: PaletteEntry;
+  onDragStart: (e: DragEvent, nodeType: string) => void;
+}) {
+  const { t } = useTranslation();
+  const Icon = entry.icon;
+  const label = (
+    <span className="text-foreground text-sm font-medium">
+      {t(entry.labelKey)}
+    </span>
+  );
+  return (
+    <div
+      className="group border-border bg-card hover:border-primary/40 flex cursor-move items-center gap-3 rounded-full border px-4 py-3 transition-colors"
+      draggable
+      onDragStart={(e) => onDragStart(e, entry.type)}
+    >
+      <div
+        className={cn(
+          'flex size-8 shrink-0 items-center justify-center rounded-full transition-colors',
+          PALETTE_TONE_CLASSES[entry.tone],
+        )}
+      >
+        <Icon className="size-4.5" />
+      </div>
+      {entry.hintKey ? (
+        <div className="flex flex-col">
+          {label}
+          <span className="text-muted-foreground text-xs">
+            {t(entry.hintKey)}
+          </span>
+        </div>
+      ) : (
+        label
+      )}
+    </div>
+  );
+}
+
 interface AgentNodeConfig {
   agent_type: 'classic' | 'research';
   llm_name?: string;
@@ -146,6 +287,34 @@ function validateJsonSchemaConfig(schema: unknown): string | null {
   return null;
 }
 
+// The schema validators return short English fragments (tests and the
+// validation list key off them); these map each to its locale key.
+// Names and handles are the user's own text: React escapes on render, so
+// i18next must not escape them first.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
+const SCHEMA_ERROR_KEYS: Record<string, string> = {
+  'must be a valid JSON object': 'agents.workflow.schema.notObject',
+  'must include either a "type" or "schema" field':
+    'agents.workflow.schema.missingType',
+  'must be valid JSON': 'agents.workflow.schema.invalidJson',
+};
+
+/**
+ * Translate a JSON schema validation fragment.
+ *
+ * Args:
+ *   t: The i18next translate function.
+ *   fragment: The fragment a schema validator returned.
+ *
+ * Returns:
+ *   The translated fragment, or the fragment itself when it is unknown.
+ */
+function schemaErrorText(t: TFunction, fragment: string): string {
+  const key = SCHEMA_ERROR_KEYS[fragment];
+  return key ? t(key) : fragment;
+}
+
 function isEditableTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
   if (target.isContentEditable) return true;
@@ -316,7 +485,6 @@ function WorkflowBuilderInner() {
   const [savedWorkflowSignature, setSavedWorkflowSignature] = useState<
     string | null
   >(null);
-  const workflowSettingsRef = useRef<HTMLDivElement>(null);
   const [availableModels, setAvailableModels] = useState<Model[]>([]);
   const [defaultAgentModelId, setDefaultAgentModelId] = useState('');
   const [availableTools, setAvailableTools] = useState<UserTool[]>([]);
@@ -681,29 +849,22 @@ function WorkflowBuilderInner() {
       const response = await userService.deleteAgent(agentToDelete, token);
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Failed to delete workflow agent');
+        throw new Error(
+          errorData.message || t('agents.workflow.builder.deleteFailed'),
+        );
       }
       navigateBackToAgents();
     } catch (error) {
       setPublishErrors([
         error instanceof Error
           ? error.message
-          : 'Failed to delete workflow agent',
+          : t('agents.workflow.builder.deleteFailed'),
       ]);
       setErrorContext('publish');
     } finally {
       setIsDeletingAgent(false);
     }
-  }, [currentAgentId, currentAgent.id, token, navigateBackToAgents]);
-
-  useEffect(() => {
-    if (publishErrors.length > 0) {
-      const timer = setTimeout(() => {
-        setPublishErrors([]);
-      }, 6000);
-      return () => clearTimeout(timer);
-    }
-  }, [publishErrors.length]);
+  }, [currentAgentId, currentAgent.id, token, navigateBackToAgents, t]);
 
   useEffect(() => {
     if (!isPublishing) {
@@ -775,17 +936,6 @@ function WorkflowBuilderInner() {
     setShowWorkflowSettings(false);
   }, []);
 
-  const handleCloseWorkflowSettings = useCallback(() => {
-    setShowWorkflowSettings(false);
-  }, []);
-
-  useOutsideAlerter(
-    workflowSettingsRef,
-    handleCloseWorkflowSettings,
-    [],
-    false,
-  );
-
   useEffect(() => {
     const loadModelsAndTools = async () => {
       try {
@@ -1005,30 +1155,33 @@ function WorkflowBuilderInner() {
     const errors: string[] = [];
 
     if (!workflowName.trim()) {
-      errors.push('Workflow name is required');
+      errors.push(t('agents.workflow.validation.nameRequired'));
     }
 
     const startNodes = nodes.filter((n) => n.type === 'start');
     if (startNodes.length !== 1) {
-      errors.push('Workflow must have exactly one start node');
+      errors.push(t('agents.workflow.validation.oneStart'));
     }
 
     const endNodes = nodes.filter((n) => n.type === 'end');
     const endNodeIds = new Set(endNodes.map((n) => n.id));
     if (endNodes.length === 0) {
-      errors.push('Workflow must have at least one end node');
+      errors.push(t('agents.workflow.validation.needEnd'));
     }
 
     const agentNodes = nodes.filter((n) => n.type === 'agent');
     if (agentNodes.length === 0) {
-      errors.push('Workflow must have at least one AI agent node');
+      errors.push(t('agents.workflow.validation.needAgent'));
     }
 
     agentNodes.forEach((node) => {
       const config = node.data?.config;
       if (!config?.llm_name && !config?.model_id) {
         errors.push(
-          `Agent "${node.data?.title || node.id}" must have a model selected`,
+          t('agents.workflow.validation.agentModel', {
+            ...NO_ESCAPE,
+            name: node.data?.title || node.id,
+          }),
         );
       }
 
@@ -1040,7 +1193,10 @@ function WorkflowBuilderInner() {
         );
         if (selectedModel && !selectedModel.supports_structured_output) {
           errors.push(
-            `Agent "${node.data?.title || node.id}" selected model does not support structured output`,
+            t('agents.workflow.validation.agentStructuredOutput', {
+              ...NO_ESCAPE,
+              name: node.data?.title || node.id,
+            }),
           );
         }
       }
@@ -1055,7 +1211,11 @@ function WorkflowBuilderInner() {
           : schemaValidationError;
       if (effectiveSchemaError) {
         errors.push(
-          `Agent "${node.data?.title || node.id}" JSON schema ${effectiveSchemaError}`,
+          t('agents.workflow.validation.agentSchema', {
+            ...NO_ESCAPE,
+            name: node.data?.title || node.id,
+            error: schemaErrorText(t, effectiveSchemaError),
+          }),
         );
       }
     });
@@ -1064,7 +1224,7 @@ function WorkflowBuilderInner() {
       const startId = startNodes[0].id;
       const hasOutgoing = edges.some((e) => e.source === startId);
       if (!hasOutgoing) {
-        errors.push('Start node must be connected to another node');
+        errors.push(t('agents.workflow.validation.startConnected'));
       }
     }
 
@@ -1072,7 +1232,10 @@ function WorkflowBuilderInner() {
       const hasIncoming = edges.some((e) => e.target === endNode.id);
       if (!hasIncoming) {
         errors.push(
-          `End node "${endNode.id}" must have an incoming connection`,
+          t('agents.workflow.validation.endIncoming', {
+            ...NO_ESCAPE,
+            name: endNode.id,
+          }),
         );
       }
     });
@@ -1080,10 +1243,10 @@ function WorkflowBuilderInner() {
     const nodeIds = new Set(nodes.map((n) => n.id));
     edges.forEach((edge) => {
       if (!nodeIds.has(edge.source)) {
-        errors.push(`Edge references non-existent source node`);
+        errors.push(t('agents.workflow.validation.edgeSource'));
       }
       if (!nodeIds.has(edge.target)) {
-        errors.push(`Edge references non-existent target node`);
+        errors.push(t('agents.workflow.validation.edgeTarget'));
       }
     });
 
@@ -1097,7 +1260,10 @@ function WorkflowBuilderInner() {
         !cases.some((c: ConditionCase) => Boolean((c.expression || '').trim()))
       ) {
         errors.push(
-          `Condition "${conditionTitle}" must have at least one case with an expression`,
+          t('agents.workflow.validation.conditionNeedsCase', {
+            ...NO_ESCAPE,
+            name: conditionTitle,
+          }),
         );
       }
 
@@ -1107,7 +1273,10 @@ function WorkflowBuilderInner() {
         const handle = (conditionCase.sourceHandle || '').trim();
         if (!handle) {
           errors.push(
-            `Condition "${conditionTitle}" has a case without a branch handle`,
+            t('agents.workflow.validation.conditionCaseNoHandle', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+            }),
           );
           return;
         }
@@ -1118,14 +1287,21 @@ function WorkflowBuilderInner() {
       });
       duplicateCaseHandles.forEach((handle) => {
         errors.push(
-          `Condition "${conditionTitle}" has duplicate case handle "${handle}"`,
+          t('agents.workflow.validation.conditionDuplicateHandle', {
+            ...NO_ESCAPE,
+            name: conditionTitle,
+            handle,
+          }),
         );
       });
 
       const outgoing = edges.filter((e) => e.source === node.id);
       if (outgoing.length < 2) {
         errors.push(
-          `Condition "${conditionTitle}" must have at least 2 outgoing connections`,
+          t('agents.workflow.validation.conditionTwoOutgoing', {
+            ...NO_ESCAPE,
+            name: conditionTitle,
+          }),
         );
       }
 
@@ -1143,24 +1319,40 @@ function WorkflowBuilderInner() {
       for (const [handle, handleEdges] of outgoingByHandle.entries()) {
         if (!handle) {
           errors.push(
-            `Condition "${conditionTitle}" has a connection without a branch handle`,
+            t('agents.workflow.validation.conditionEdgeNoHandle', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+            }),
           );
           continue;
         }
         if (handle !== 'else' && !caseHandles.has(handle)) {
           errors.push(
-            `Condition "${conditionTitle}" has a connection from unknown branch "${handle}"`,
+            t('agents.workflow.validation.conditionUnknownBranch', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+              handle,
+            }),
           );
         }
         if (handleEdges.length > 1) {
           errors.push(
-            `Condition "${conditionTitle}" has multiple connections from branch "${handle}"`,
+            t('agents.workflow.validation.conditionMultipleEdges', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+              handle,
+            }),
           );
         }
       }
 
       if (!outgoingByHandle.has('else')) {
-        errors.push(`Condition "${conditionTitle}" must have an Else branch`);
+        errors.push(
+          t('agents.workflow.validation.conditionNeedsElse', {
+            ...NO_ESCAPE,
+            name: conditionTitle,
+          }),
+        );
       }
 
       cases.forEach((conditionCase: ConditionCase) => {
@@ -1171,12 +1363,20 @@ function WorkflowBuilderInner() {
         const hasOutgoing = Boolean(outgoingByHandle.get(handle)?.length);
         if (hasExpression && !hasOutgoing) {
           errors.push(
-            `Condition "${conditionTitle}" case "${handle}" has an expression but no branch connection`,
+            t('agents.workflow.validation.caseNoConnection', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+              handle,
+            }),
           );
         }
         if (!hasExpression && hasOutgoing) {
           errors.push(
-            `Condition "${conditionTitle}" case "${handle}" has a branch connection but no expression`,
+            t('agents.workflow.validation.caseNoExpression', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+              handle,
+            }),
           );
         }
         if (conditionMode === 'simple' && hasExpression) {
@@ -1185,7 +1385,11 @@ function WorkflowBuilderInner() {
           );
           if (!parsedCondition.variable.trim()) {
             errors.push(
-              `Condition "${conditionTitle}" case "${handle}" must specify a variable in Simple mode`,
+              t('agents.workflow.validation.caseNoVariable', {
+                ...NO_ESCAPE,
+                name: conditionTitle,
+                handle,
+              }),
             );
           }
         }
@@ -1195,7 +1399,11 @@ function WorkflowBuilderInner() {
         if (!canReachEnd(edge.target, edges, nodeIds, endNodeIds)) {
           const handle = edge.sourceHandle || 'branch';
           errors.push(
-            `Branch "${handle}" of condition "${conditionTitle}" must eventually reach an end node`,
+            t('agents.workflow.validation.branchReachEnd', {
+              ...NO_ESCAPE,
+              name: conditionTitle,
+              handle,
+            }),
           );
         }
       });
@@ -1206,7 +1414,12 @@ function WorkflowBuilderInner() {
       const codeTitle = node.data?.title || node.id;
       const config = node.data?.config;
       if (!(config?.code || '').trim()) {
-        errors.push(`Code node "${codeTitle}" must have code to run`);
+        errors.push(
+          t('agents.workflow.validation.codeRequired', {
+            ...NO_ESCAPE,
+            name: codeTitle,
+          }),
+        );
       }
 
       const schemaValidationError = validateCodeJsonSchema(config?.json_schema);
@@ -1217,13 +1430,17 @@ function WorkflowBuilderInner() {
           : schemaValidationError;
       if (effectiveSchemaError) {
         errors.push(
-          `Code node "${codeTitle}" JSON schema ${effectiveSchemaError}`,
+          t('agents.workflow.validation.codeSchema', {
+            ...NO_ESCAPE,
+            name: codeTitle,
+            error: schemaErrorText(t, effectiveSchemaError),
+          }),
         );
       }
     });
 
     return errors;
-  }, [workflowName, nodes, edges, agentJsonSchemaErrors, availableModels]);
+  }, [workflowName, nodes, edges, agentJsonSchemaErrors, availableModels, t]);
 
   const canManageAgent = Boolean(currentAgentId || currentAgent.id);
   const effectiveAgentId = currentAgentId || currentAgent.id || '';
@@ -1271,7 +1488,10 @@ function WorkflowBuilderInner() {
           );
           if (!updateResponse.ok) {
             const errorData = await updateResponse.json().catch(() => ({}));
-            throw new Error(errorData.message || 'Failed to update workflow');
+            throw new Error(
+              errorData.message ||
+                t('agents.workflow.builder.updateWorkflowFailed'),
+            );
           }
 
           if (effectiveAgentId) {
@@ -1295,7 +1515,7 @@ function WorkflowBuilderInner() {
               token,
             );
             if (!agentUpdateResponse.ok) {
-              throw new Error('Failed to update agent');
+              throw new Error(t('agents.workflow.builder.updateAgentFailed'));
             }
             const updatedAgent = await agentUpdateResponse
               .json()
@@ -1329,7 +1549,10 @@ function WorkflowBuilderInner() {
             setPublishErrors(backendErrors);
             return false;
           }
-          throw new Error(errorData.message || 'Failed to create workflow');
+          throw new Error(
+            errorData.message ||
+              t('agents.workflow.builder.createWorkflowFailed'),
+          );
         }
         const responseData = await createResponse.json();
         savedWorkflowId = responseData?.data?.id ?? responseData?.id;
@@ -1362,7 +1585,9 @@ function WorkflowBuilderInner() {
         );
         if (!agentResponse.ok) {
           const errorData = await agentResponse.json().catch(() => ({}));
-          throw new Error(errorData.message || 'Failed to create agent');
+          throw new Error(
+            errorData.message || t('agents.workflow.builder.createAgentFailed'),
+          );
         }
         const agentData = await agentResponse.json().catch(() => ({}));
         if (agentData?.id) {
@@ -1406,7 +1631,9 @@ function WorkflowBuilderInner() {
         }
         console.error('Failed to save workflow:', error);
         setPublishErrors([
-          error instanceof Error ? error.message : 'Failed to save workflow',
+          error instanceof Error
+            ? error.message
+            : t('agents.workflow.builder.saveFailed'),
         ]);
         return false;
       } finally {
@@ -1424,6 +1651,7 @@ function WorkflowBuilderInner() {
       imageFile,
       folderId,
       navigateBackToAgents,
+      t,
     ],
   );
 
@@ -1435,7 +1663,9 @@ function WorkflowBuilderInner() {
 
   const isPrimaryActionDisabled =
     isPublishing || (canManageAgent && !hasSavableChanges);
-  const primaryActionLabel = canManageAgent ? 'Save' : 'Publish';
+  const primaryActionLabel = canManageAgent
+    ? t('agents.form.buttons.save')
+    : t('agents.form.buttons.publish');
 
   const handlePrimaryAction = useCallback(() => {
     if (isPrimaryActionDisabled) return;
@@ -1448,7 +1678,12 @@ function WorkflowBuilderInner() {
       ...currentAgent,
       id: effectiveAgentId,
       name: workflowName,
-      description: workflowDescription || `Workflow agent: ${workflowName}`,
+      description:
+        workflowDescription ||
+        t('agents.workflow.builder.defaultDescription', {
+          ...NO_ESCAPE,
+          name: workflowName,
+        }),
       image: currentAgentImage,
       agent_type: 'workflow',
       status: currentAgent.status || 'published',
@@ -1461,6 +1696,7 @@ function WorkflowBuilderInner() {
       workflowDescription,
       currentAgentImage,
       workflowId,
+      t,
     ],
   );
 
@@ -1542,8 +1778,8 @@ function WorkflowBuilderInner() {
   return (
     <>
       <MobileBlocker />
-      <div className="bg-background fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex">
-        <div className="border-border bg-card dark:bg-background flex items-center justify-between border-b px-6 py-4">
+      <div className="bg-background fixed inset-0 z-50 hidden h-screen w-full flex-col lg:flex">
+        <div className="border-border bg-card flex items-center justify-between border-b px-6 py-4">
           <div className="flex items-center gap-4">
             {canManageAgent ? (
               <AgentPageHeader
@@ -1557,8 +1793,8 @@ function WorkflowBuilderInner() {
               <Button
                 type="button"
                 variant="outline"
+                shape="pill"
                 onClick={navigateBackToAgents}
-                className="text-muted-foreground rounded-full px-4 py-2 text-sm font-normal shadow-none"
               >
                 {t('agents.backToAll')}
               </Button>
@@ -1566,10 +1802,12 @@ function WorkflowBuilderInner() {
             {!canManageAgent && (
               <div className="min-w-0">
                 <div
-                  className="max-w-xs truncate text-xl font-bold text-gray-900 dark:text-white"
-                  title={workflowName || 'New Workflow'}
+                  className="text-foreground max-w-xs truncate text-xl leading-tight font-semibold"
+                  title={
+                    workflowName || t('agents.workflow.builder.newWorkflow')
+                  }
                 >
-                  {workflowName || 'New Workflow'}
+                  {workflowName || t('agents.workflow.builder.newWorkflow')}
                 </div>
                 {workflowDescription && (
                   <div
@@ -1581,164 +1819,143 @@ function WorkflowBuilderInner() {
                 )}
               </div>
             )}
-            <div className="relative flex items-center">
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => setShowWorkflowSettings(!showWorkflowSettings)}
-                className="text-muted-foreground hover:bg-accent hover:text-foreground size-auto p-1"
-                aria-label="Edit workflow details"
-                title={
-                  workflowDescription
-                    ? `${workflowName || 'New Workflow'} — ${workflowDescription}`
-                    : 'Edit workflow details'
-                }
-              >
-                <Pencil size={14} />
-              </Button>
-              {showWorkflowSettings && (
-                <div
-                  ref={workflowSettingsRef}
-                  className="border-border bg-card absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border p-4 shadow-lg"
-                >
-                  <div className="mb-3">
-                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                      Workflow Name
-                    </label>
+            <Popover
+              open={showWorkflowSettings}
+              onOpenChange={setShowWorkflowSettings}
+            >
+              <PopoverTrigger asChild>
+                <IconButton
+                  variant="ghost-muted"
+                  size="icon-xs"
+                  side="bottom"
+                  label={t('agents.workflow.builder.editDetails')}
+                  hint={
+                    workflowDescription
+                      ? `${workflowName || t('agents.workflow.builder.newWorkflow')} — ${workflowDescription}`
+                      : undefined
+                  }
+                  icon={Pencil}
+                />
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-80">
+                <div className="flex flex-col gap-5">
+                  <FormField label={t('agents.workflow.builder.workflowName')}>
                     <Input
                       type="text"
                       value={workflowName}
                       onChange={(e) => setWorkflowName(e.target.value)}
-                      className="bg-card h-auto rounded-lg px-3 py-2 text-sm shadow-none"
-                      placeholder="Enter workflow name"
+                      placeholder={t(
+                        'agents.workflow.builder.workflowNamePlaceholder',
+                      )}
                     />
-                  </div>
-                  <div className="mb-3">
-                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                      Description
-                    </label>
-                    <textarea
+                  </FormField>
+                  <FormField label={t('agents.form.labels.description')}>
+                    <Textarea
                       value={workflowDescription}
                       onChange={(e) => setWorkflowDescription(e.target.value)}
-                      className="focus-visible:ring-ring/50 focus-visible:border-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus-visible:ring-2 dark:text-white"
                       rows={3}
-                      placeholder="Describe what this workflow does"
+                      placeholder={t(
+                        'agents.workflow.builder.workflowDescriptionPlaceholder',
+                      )}
                     />
-                  </div>
-                  <div className="mb-3">
-                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                      Agent Image
-                    </label>
-                    {currentAgentImage && !imageFile && (
-                      <div className="mb-2 flex items-center gap-2">
-                        <img
-                          src={currentAgentImage}
-                          alt="Agent image"
-                          className="h-10 w-10 rounded-full object-cover"
-                        />
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Current image
-                        </span>
-                      </div>
-                    )}
+                  </FormField>
+                  {currentAgentImage && !imageFile && (
+                    <div className="flex items-center gap-2">
+                      <Avatar
+                        src={currentAgentImage}
+                        alt={t('agents.workflow.builder.agentImageAlt')}
+                        size="lg"
+                        shape="circle"
+                        imgClassName="size-full object-cover"
+                      />
+                      <span className="text-muted-foreground text-xs">
+                        {t('agents.workflow.builder.currentImage')}
+                      </span>
+                    </div>
+                  )}
+                  <FormField
+                    label={t('agents.workflow.builder.agentImage')}
+                    hint={t('agents.workflow.builder.agentImageHint')}
+                  >
                     <FileUpload
                       showPreview
                       maxFiles={1}
                       previewSize={56}
+                      size="compact"
                       onUpload={handleUpload}
                       onRemove={() => setImageFile(null)}
                       uploadText={[
                         {
-                          text: 'Click to upload',
-                          colorClass: 'text-primary',
+                          text: t('agents.form.upload.clickToUpload'),
+                          highlight: true,
                         },
                         {
-                          text: ' or drag and drop',
-                          colorClass: 'text-muted-foreground',
+                          text: t('agents.form.upload.dragAndDrop'),
                         },
                       ]}
-                      className="border-border rounded-lg border-2 border-dashed p-3 text-center transition-colors"
                     />
-                    <p className="text-muted-foreground mt-1 text-xs">
-                      Image updates are included the next time you save.
-                    </p>
-                  </div>
-                  <div className="mb-3">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                          {t('agents.form.advanced.systemPromptOverride')}
-                        </label>
-                        <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-                          {t(
-                            'agents.form.advanced.systemPromptOverrideDescription',
-                          )}
-                        </p>
-                      </div>
-                      <button
-                        onClick={() =>
-                          setCurrentAgent((prev) => ({
-                            ...prev,
-                            allow_system_prompt_override:
-                              !prev.allow_system_prompt_override,
-                          }))
-                        }
-                        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${
-                          currentAgent.allow_system_prompt_override
-                            ? 'bg-primary'
-                            : 'bg-gray-300 dark:bg-gray-600'
-                        }`}
-                      >
-                        <span
-                          className={`absolute top-0.5 h-5 w-5 transform rounded-full bg-white transition-transform ${
-                            currentAgent.allow_system_prompt_override
-                              ? ''
-                              : '-translate-x-5'
-                          }`}
-                        />
-                      </button>
-                    </div>
-                  </div>
+                  </FormField>
+                  <SettingRow
+                    label={t('agents.form.advanced.systemPromptOverride')}
+                    description={t(
+                      'agents.form.advanced.systemPromptOverrideDescription',
+                    )}
+                    htmlFor="workflow-system-prompt-override"
+                  >
+                    <Switch
+                      id="workflow-system-prompt-override"
+                      checked={Boolean(
+                        currentAgent.allow_system_prompt_override,
+                      )}
+                      onCheckedChange={() =>
+                        setCurrentAgent((prev) => ({
+                          ...prev,
+                          allow_system_prompt_override:
+                            !prev.allow_system_prompt_override,
+                        }))
+                      }
+                    />
+                  </SettingRow>
                   <Button
                     type="button"
                     onClick={handleWorkflowSettingsDone}
                     disabled={isPublishing}
-                    className="w-full rounded-lg text-white"
+                    className="w-full"
                   >
-                    Done
+                    {t('agents.workflow.builder.done')}
                   </Button>
                 </div>
-              )}
-            </div>
+              </PopoverContent>
+            </Popover>
           </div>
           <div className="flex items-center gap-2">
             {canManageAgent && (
               <Button
                 type="button"
                 variant="outline"
+                shape="pill"
                 onClick={() => setAgentDetails('ACTIVE')}
-                className="rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200"
               >
-                <Link size={16} />
-                Access Details
+                <Link />
+                {t('agents.form.buttons.accessDetails')}
               </Button>
             )}
             {canManageAgent && (
               <Button
                 type="button"
                 variant="destructive-outline"
+                shape="pill"
                 onClick={() => setDeleteConfirmation('ACTIVE')}
-                disabled={isDeletingAgent}
-                className="bg-card rounded-full border-red-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 hover:text-red-600 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10 dark:hover:text-red-400"
+                loading={isDeletingAgent}
               >
-                <Trash2 size={16} />
-                {isDeletingAgent ? 'Deleting...' : 'Delete'}
+                <Trash2 />
+                {t('agents.form.buttons.delete')}
               </Button>
             )}
             <Button
               type="button"
               variant="outline"
+              shape="pill"
               onClick={() => {
                 const validationErrors = validateWorkflow();
                 if (validationErrors.length > 0) {
@@ -1748,179 +1965,102 @@ function WorkflowBuilderInner() {
                 }
                 setShowPreview(true);
               }}
-              className="rounded-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200"
             >
-              <Play size={16} />
-              Preview
+              <Play />
+              {t('agents.form.sections.preview')}
             </Button>
             <Button
               type="button"
               onClick={handlePrimaryAction}
               disabled={isPrimaryActionDisabled}
-              className={`relative rounded-full px-6 py-2 text-sm font-medium shadow-sm ${
-                canManageAgent && !hasSavableChanges
-                  ? 'dark:bg-accent bg-gray-200 text-gray-500 hover:bg-gray-200 dark:text-gray-400'
-                  : 'text-white'
-              }`}
+              loading={showPrimaryActionSpinner}
+              size="lg"
+              shape="pill"
             >
-              <span
-                className={
-                  showPrimaryActionSpinner ? 'opacity-0' : 'opacity-100'
-                }
-              >
-                {primaryActionLabel}
-              </span>
-              {showPrimaryActionSpinner ? (
-                <Loader2 size={16} className="absolute animate-spin" />
-              ) : null}
+              {primaryActionLabel}
             </Button>
           </div>
         </div>
 
         {publishErrors.length > 0 && (
-          <div className="pointer-events-none absolute top-20 right-0 left-0 z-50 flex justify-center px-4">
-            <Alert
-              variant="destructive"
-              className="pointer-events-auto w-full max-w-md bg-red-50 shadow-lg dark:bg-red-950/20"
-            >
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>
-                {errorContext === 'preview'
-                  ? 'Unable to preview workflow'
-                  : canManageAgent
-                    ? 'Unable to save workflow'
-                    : 'Unable to publish workflow'}
-              </AlertTitle>
-              <AlertDescription>
-                <ul className="mt-2 list-inside list-disc space-y-1 wrap-break-word">
-                  {publishErrors.map((error, index) => (
-                    <li key={index}>{error}</li>
-                  ))}
-                </ul>
-              </AlertDescription>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => setPublishErrors([])}
-                className="absolute top-4 right-4 size-auto p-0 text-red-700 hover:bg-transparent hover:text-red-900 dark:text-red-300 dark:hover:bg-transparent dark:hover:text-red-100"
+          <div className="pointer-events-none absolute top-20 right-0 left-0 z-20 flex justify-center px-4">
+            <div className="bg-card pointer-events-auto w-full max-w-md rounded-xl shadow-md">
+              <Alert
+                variant="destructive"
+                // eslint-disable-next-line shadcn/no-restyle -- the close button sits in the top-right corner, so a long title wraps clear of it
+                className="pr-10"
               >
-                <X size={16} />
-              </Button>
-            </Alert>
+                <CircleAlert className="size-4" />
+                <AlertTitle>
+                  {errorContext === 'preview'
+                    ? t('agents.workflow.builder.unablePreview')
+                    : canManageAgent
+                      ? t('agents.workflow.builder.unableSave')
+                      : t('agents.workflow.builder.unablePublish')}
+                </AlertTitle>
+                <AlertDescription>
+                  <ul className="mt-2 list-inside list-disc space-y-1 wrap-break-word">
+                    {publishErrors.map((error, index) => (
+                      <li key={index}>{error}</li>
+                    ))}
+                  </ul>
+                </AlertDescription>
+                <div className="absolute top-2.5 right-2.5">
+                  <IconButton
+                    variant="ghost"
+                    size="icon-xs"
+                    onClick={() => setPublishErrors([])}
+                    label={t('agents.close')}
+                    icon={X}
+                  />
+                </div>
+              </Alert>
+            </div>
           </div>
         )}
 
         <div className="flex flex-1 overflow-hidden">
-          <div className="border-border bg-muted dark:bg-background flex w-64 flex-col gap-6 border-r p-4">
-            <div>
-              <h3 className="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
-                Core Nodes
-              </h3>
+          <div className="border-border bg-muted flex w-64 flex-col gap-6 border-r p-4">
+            <div className="flex flex-col gap-3">
+              <SectionHeader
+                as="h3"
+                size="sm"
+                title={t('agents.workflow.builder.coreNodes')}
+              />
               <div className="flex flex-col gap-2">
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'agent')}
-                >
-                  <div className="text-primary group-hover:bg-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-100 transition-colors group-hover:text-white dark:bg-purple-900/40">
-                    <Bot size={18} />
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
-                    AI Agent
-                  </span>
-                </div>
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'end')}
-                >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-100 text-green-600 transition-colors group-hover:bg-green-600 group-hover:text-white dark:bg-green-900/40 dark:text-green-300">
-                    <Flag size={18} />
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
-                    End
-                  </span>
-                </div>
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'note')}
-                >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-yellow-100 text-yellow-600 transition-colors group-hover:bg-yellow-500 group-hover:text-white dark:bg-yellow-900/40 dark:text-yellow-300">
-                    <StickyNote size={18} />
-                  </div>
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
-                    Note
-                  </span>
-                </div>
+                {PALETTE.filter((entry) => entry.group === 'core').map(
+                  (entry) => (
+                    <NodePaletteItem
+                      key={entry.type}
+                      entry={entry}
+                      onDragStart={handleNodeDragStart}
+                    />
+                  ),
+                )}
               </div>
             </div>
 
-            <div>
-              <h3 className="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
-                Logic & Data
-              </h3>
+            <div className="flex flex-col gap-3">
+              <SectionHeader
+                as="h3"
+                size="sm"
+                title={t('agents.workflow.builder.logicNodes')}
+              />
               <div className="flex flex-col gap-2">
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'state')}
-                >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-900/40 dark:text-blue-300">
-                    <Database size={18} />
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-foreground text-sm font-medium">
-                      Set State
-                    </span>
-                    <span className="text-muted-foreground text-xs">
-                      Modify workflow variables
-                    </span>
-                  </div>
-                </div>
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'condition')}
-                >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600 transition-colors group-hover:bg-orange-600 group-hover:text-white dark:bg-orange-900/40 dark:text-orange-300">
-                    <GitBranch size={18} />
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-foreground text-sm font-medium">
-                      If / Else
-                    </span>
-                    <span className="text-muted-foreground text-xs">
-                      Conditional branching
-                    </span>
-                  </div>
-                </div>
-                <div
-                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
-                  draggable
-                  onDragStart={(e) => handleNodeDragStart(e, 'code')}
-                >
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 transition-colors group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-900/40 dark:text-indigo-300">
-                    <Code2 size={18} />
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-foreground text-sm font-medium">
-                      Code
-                    </span>
-                    <span className="text-muted-foreground text-xs">
-                      Run code in a sandbox
-                    </span>
-                  </div>
-                </div>
+                {PALETTE.filter((entry) => entry.group === 'logic').map(
+                  (entry) => (
+                    <NodePaletteItem
+                      key={entry.type}
+                      entry={entry}
+                      onDragStart={handleNodeDragStart}
+                    />
+                  ),
+                )}
               </div>
             </div>
           </div>
 
-          <div
-            ref={reactFlowWrapper}
-            className="bg-muted dark:bg-background/10 relative flex-1"
-          >
+          <div ref={reactFlowWrapper} className="bg-muted relative flex-1">
             <ReactFlow
               nodes={nodes}
               edges={edges}
@@ -1942,64 +2082,67 @@ function WorkflowBuilderInner() {
               <Background />
               <Controls />
               <Panel position="top-left" className="flex gap-1.5">
-                <Button
-                  type="button"
+                <IconButton
                   variant="outline"
                   size="icon-sm"
+                  side="bottom"
                   onClick={undo}
                   disabled={!canUndo}
-                  title="Undo (Ctrl+Z)"
-                  aria-label="Undo"
-                  className="bg-card"
-                >
-                  <Undo2 size={16} />
-                </Button>
-                <Button
-                  type="button"
+                  label={t('agents.workflow.undo')}
+                  hint={t('agents.workflow.undoHint')}
+                  icon={Undo2}
+                />
+                <IconButton
                   variant="outline"
                   size="icon-sm"
+                  side="bottom"
                   onClick={redo}
                   disabled={!canRedo}
-                  title="Redo (Ctrl+Shift+Z)"
-                  aria-label="Redo"
-                  className="bg-card"
-                >
-                  <Redo2 size={16} />
-                </Button>
+                  label={t('agents.workflow.redo')}
+                  hint={t('agents.workflow.redoHint')}
+                  icon={Redo2}
+                />
               </Panel>
             </ReactFlow>
 
             {showNodeConfig && selectedNode && (
               <>
-                <div className="border-border bg-card shadow-modal absolute top-4 right-4 z-20 w-96 rounded-2xl border">
+                <div className="border-border bg-card absolute top-4 right-4 z-20 w-96 rounded-2xl border shadow-md">
                   <div className="border-border flex items-center justify-between border-b p-4">
-                    <h3 className="font-semibold text-gray-900 dark:text-white">
-                      {selectedNode.type === 'start' && 'Start Node'}
-                      {selectedNode.type === 'end' && 'End Node'}
-                      {selectedNode.type === 'agent' && 'AI Agent'}
-                      {selectedNode.type === 'note' && 'Note'}
-                      {selectedNode.type === 'state' && 'Set global variables'}
-                      {selectedNode.type === 'condition' && 'If / Else'}
-                      {selectedNode.type === 'code' && 'Code'}
+                    <h3 className="text-foreground text-sm font-semibold">
+                      {selectedNode.type === 'start' &&
+                        t('agents.workflow.builder.startNode')}
+                      {selectedNode.type === 'end' &&
+                        t('agents.workflow.builder.endNode')}
+                      {selectedNode.type === 'agent' &&
+                        t('agents.workflow.builder.aiAgent')}
+                      {selectedNode.type === 'note' &&
+                        t('agents.workflow.nodes.note')}
+                      {selectedNode.type === 'state' &&
+                        t('agents.workflow.builder.stateTitle')}
+                      {selectedNode.type === 'condition' &&
+                        t('agents.workflow.nodes.condition')}
+                      {selectedNode.type === 'code' &&
+                        t('agents.workflow.nodes.code')}
                     </h3>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon-sm"
+                    <IconButton
+                      variant="ghost-muted"
+                      size="icon-xs"
+                      side="bottom"
                       onClick={() => setShowNodeConfig(false)}
-                      className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-gray-600 dark:hover:bg-transparent dark:hover:text-gray-200 [&_svg:not([class*='size-'])]:size-5"
+                      label={t('agents.close')}
                     >
-                      <X size={20} />
-                    </Button>
+                      <X className="size-5" aria-hidden />
+                    </IconButton>
                   </div>
 
                   <div className="max-h-[calc(100vh-200px)] overflow-y-auto p-4">
-                    <div className="mb-4 flex flex-col gap-2">
+                    <div className="mb-4 flex flex-col gap-5">
                       <div className="bg-muted rounded-lg p-3">
-                        <div className="mb-1 text-xs text-gray-500 dark:text-gray-400">
-                          Node ID
+                        <div className="text-muted-foreground mb-1 text-xs">
+                          {t('agents.workflow.builder.nodeId')}
                         </div>
-                        <div className="truncate font-mono text-xs text-gray-700 dark:text-gray-300">
+                        <div className="text-foreground truncate font-mono text-xs">
                           {selectedNode.id}
                         </div>
                       </div>
@@ -2007,10 +2150,9 @@ function WorkflowBuilderInner() {
                       {selectedNode.type !== 'start' &&
                         selectedNode.type !== 'end' && (
                           <>
-                            <div>
-                              <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                Title
-                              </label>
+                            <FormField
+                              label={t('agents.workflow.builder.title')}
+                            >
                               <Input
                                 type="text"
                                 value={
@@ -2024,17 +2166,17 @@ function WorkflowBuilderInner() {
                                     label: e.target.value,
                                   })
                                 }
-                                className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                placeholder="Enter node title"
+                                placeholder={t(
+                                  'agents.workflow.builder.titlePlaceholder',
+                                )}
                               />
-                            </div>
+                            </FormField>
 
                             {selectedNode.type === 'agent' && (
                               <>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Agent Type
-                                  </label>
+                                <FormField
+                                  label={t('agents.workflow.builder.agentType')}
+                                >
                                   <Select
                                     value={
                                       selectedNode.data.config?.agent_type ||
@@ -2049,23 +2191,29 @@ function WorkflowBuilderInner() {
                                       })
                                     }
                                   >
-                                    <SelectTrigger className="w-full">
-                                      <SelectValue placeholder="Select agent type" />
+                                    <SelectTrigger
+                                      size="field"
+                                      className="w-full"
+                                    >
+                                      <SelectValue
+                                        placeholder={t(
+                                          'agents.workflow.builder.agentTypePlaceholder',
+                                        )}
+                                      />
                                     </SelectTrigger>
                                     <SelectContent>
                                       <SelectItem value="classic">
-                                        Classic
+                                        {t('agents.form.agentTypes.classic')}
                                       </SelectItem>
                                       <SelectItem value="research">
-                                        Research
+                                        {t('agents.form.agentTypes.research')}
                                       </SelectItem>
                                     </SelectContent>
                                   </Select>
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Model
-                                  </label>
+                                </FormField>
+                                <FormField
+                                  label={t('agents.workflow.builder.model')}
+                                >
                                   <Select
                                     value={
                                       selectedNode.data.config?.model_id || ''
@@ -2085,8 +2233,15 @@ function WorkflowBuilderInner() {
                                       });
                                     }}
                                   >
-                                    <SelectTrigger className="w-full">
-                                      <SelectValue placeholder="Select a model" />
+                                    <SelectTrigger
+                                      size="field"
+                                      className="w-full"
+                                    >
+                                      <SelectValue
+                                        placeholder={t(
+                                          'agents.workflow.builder.modelPlaceholder',
+                                        )}
+                                      />
                                     </SelectTrigger>
                                     <SelectContent>
                                       {(() => {
@@ -2139,12 +2294,13 @@ function WorkflowBuilderInner() {
                                       })()}
                                     </SelectContent>
                                   </Select>
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    System Prompt
-                                  </label>
-                                  <textarea
+                                </FormField>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.systemPrompt',
+                                  )}
+                                >
+                                  <Textarea
                                     value={
                                       selectedNode.data.config?.system_prompt ??
                                       ''
@@ -2157,13 +2313,16 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                     rows={3}
-                                    placeholder="System prompt for the agent"
+                                    placeholder={t(
+                                      'agents.workflow.builder.systemPromptPlaceholder',
+                                    )}
                                   />
-                                </div>
+                                </FormField>
                                 <PromptTextArea
-                                  label="Prompt Template"
+                                  label={t(
+                                    'agents.workflow.builder.promptTemplate',
+                                  )}
                                   value={
                                     selectedNode.data.config?.prompt_template ||
                                     ''
@@ -2179,12 +2338,19 @@ function WorkflowBuilderInner() {
                                   nodes={nodes}
                                   edges={edges}
                                   selectedNodeId={selectedNode.id}
-                                  placeholder="Use {{ agent.variable }} for dynamic content"
+                                  placeholder={t(
+                                    'agents.workflow.builder.promptTemplatePlaceholder',
+                                    {
+                                      ...NO_ESCAPE,
+                                      example: '{{ agent.variable }}',
+                                    },
+                                  )}
                                 />
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Output Variable
-                                  </label>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.outputVariable',
+                                  )}
+                                >
                                   <Input
                                     type="text"
                                     value={
@@ -2200,39 +2366,37 @@ function WorkflowBuilderInner() {
                                         },
                                       });
                                     }}
-                                    className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                    placeholder="Variable name for output"
+                                    placeholder={t(
+                                      'agents.workflow.builder.outputVariablePlaceholder',
+                                    )}
                                   />
-                                </div>
+                                </FormField>
                                 <div className="flex items-center gap-2">
-                                  <input
-                                    type="checkbox"
+                                  <Checkbox
                                     id="stream_to_user"
                                     checked={
                                       selectedNode.data.config
                                         ?.stream_to_user ?? true
                                     }
-                                    onChange={(e) =>
+                                    onCheckedChange={(checked) =>
                                       handleUpdateNodeData({
                                         config: {
                                           ...(selectedNode.data.config || {}),
-                                          stream_to_user: e.target.checked,
+                                          stream_to_user: checked === true,
                                         },
                                       })
                                     }
-                                    className="h-4 w-4"
                                   />
                                   <label
                                     htmlFor="stream_to_user"
-                                    className="text-sm text-gray-700 dark:text-gray-300"
+                                    className="text-foreground text-sm"
                                   >
-                                    Stream output to user
+                                    {t('agents.workflow.builder.streamToUser')}
                                   </label>
                                 </div>{' '}
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Tools
-                                  </label>
+                                <FormField
+                                  label={t('agents.form.sections.tools')}
+                                >
                                   <MultiSelect
                                     options={availableTools.map((tool) => ({
                                       value: tool.id,
@@ -2249,15 +2413,20 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    placeholder="Select tools..."
-                                    searchPlaceholder="Search tools..."
-                                    emptyText="No tools available"
+                                    placeholder={t(
+                                      'agents.form.placeholders.selectTools',
+                                    )}
+                                    searchPlaceholder={t(
+                                      'agents.form.toolsPopup.searchPlaceholder',
+                                    )}
+                                    emptyText={t(
+                                      'agents.form.toolsPopup.noOptionsMessage',
+                                    )}
                                   />
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Sources
-                                  </label>
+                                </FormField>
+                                <FormField
+                                  label={t('agents.workflow.builder.sources')}
+                                >
                                   <MultiSelect
                                     options={sourceOptions}
                                     selected={
@@ -2271,11 +2440,17 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    placeholder="Select sources..."
-                                    searchPlaceholder="Search sources..."
-                                    emptyText="No sources available"
+                                    placeholder={t(
+                                      'agents.form.placeholders.selectSources',
+                                    )}
+                                    searchPlaceholder={t(
+                                      'agents.form.sourcePopup.searchPlaceholder',
+                                    )}
+                                    emptyText={t(
+                                      'agents.form.sourcePopup.noOptionsMessage',
+                                    )}
                                   />
-                                </div>
+                                </FormField>
                                 <NodeDocumentsControl
                                   key={selectedNode.id}
                                   value={
@@ -2291,13 +2466,19 @@ function WorkflowBuilderInner() {
                                     })
                                   }
                                   options={selectedAgentDocumentOptions}
-                                  label="Documents"
-                                  helpText="Documents passed to this agent from uploads or upstream nodes."
+                                  label={t('agents.workflow.builder.documents')}
+                                  helpText={t(
+                                    'agents.workflow.builder.documentsHint',
+                                  )}
                                 />
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    File passing
-                                  </label>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.filePassing',
+                                  )}
+                                  hint={t(
+                                    'agents.workflow.builder.filePassingHint',
+                                  )}
+                                >
                                   <Select
                                     value={normalizeFilePassing(
                                       selectedNode.data.config?.file_passing,
@@ -2311,7 +2492,10 @@ function WorkflowBuilderInner() {
                                       })
                                     }
                                   >
-                                    <SelectTrigger className="w-full">
+                                    <SelectTrigger
+                                      size="field"
+                                      className="w-full"
+                                    >
                                       <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
@@ -2320,34 +2504,60 @@ function WorkflowBuilderInner() {
                                           key={option.value}
                                           value={option.value}
                                         >
-                                          {option.label}
+                                          {t(
+                                            `agents.workflow.filePassing.${option.value}`,
+                                            { defaultValue: option.label },
+                                          )}
                                         </SelectItem>
                                       ))}
                                     </SelectContent>
                                   </Select>
-                                  <p className="text-muted-foreground mt-1 text-xs">
-                                    Auto: send native when the model supports
-                                    it, otherwise extract text.
-                                  </p>
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Structured Output (JSON Schema)
-                                  </label>
-                                  {!selectedAgentModelSupportsStructuredOutput && (
-                                    <p className="mb-2 text-xs text-red-600 dark:text-red-400">
-                                      Selected model does not support structured
-                                      output.
-                                    </p>
+                                </FormField>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.structuredOutput',
                                   )}
-                                  <textarea
+                                  hint={
+                                    [
+                                      !selectedAgentModelSupportsStructuredOutput
+                                        ? t(
+                                            'agents.workflow.builder.modelNoStructuredOutput',
+                                          )
+                                        : null,
+                                      selectedAgentJsonSchemaText.trim() !==
+                                        '' && !selectedAgentJsonSchemaError
+                                        ? t(
+                                            'agents.workflow.builder.validSchema',
+                                          )
+                                        : null,
+                                    ]
+                                      .filter(Boolean)
+                                      .join(' ') || undefined
+                                  }
+                                  error={
+                                    selectedAgentJsonSchemaText.trim() !== '' &&
+                                    selectedAgentJsonSchemaError
+                                      ? t(
+                                          'agents.workflow.builder.invalidSchema',
+                                          {
+                                            ...NO_ESCAPE,
+                                            error: schemaErrorText(
+                                              t,
+                                              selectedAgentJsonSchemaError,
+                                            ),
+                                          },
+                                        )
+                                      : undefined
+                                  }
+                                >
+                                  <Textarea
                                     value={selectedAgentJsonSchemaText}
                                     onChange={(e) =>
                                       handleAgentJsonSchemaChange(
                                         e.target.value,
                                       )
                                     }
-                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus-visible:ring-2 dark:text-white"
+                                    className="font-mono"
                                     rows={8}
                                     placeholder={`{
   "type": "object",
@@ -2357,48 +2567,33 @@ function WorkflowBuilderInner() {
   "required": ["summary"]
 }`}
                                   />
-                                  {selectedAgentJsonSchemaText.trim() !==
-                                    '' && (
-                                    <p
-                                      className={`mt-2 text-xs ${
-                                        selectedAgentJsonSchemaError
-                                          ? 'text-red-600 dark:text-red-400'
-                                          : 'text-green-600 dark:text-green-400'
-                                      }`}
-                                    >
-                                      {selectedAgentJsonSchemaError
-                                        ? `Invalid JSON schema: ${selectedAgentJsonSchemaError}`
-                                        : 'Valid JSON schema'}
-                                    </p>
-                                  )}
-                                </div>
+                                </FormField>
                               </>
                             )}
 
                             {selectedNode.type === 'note' && (
-                              <div>
-                                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                  Note Content
-                                </label>
-                                <textarea
+                              <FormField
+                                label={t('agents.workflow.builder.noteContent')}
+                              >
+                                <Textarea
                                   value={selectedNode.data.content || ''}
                                   onChange={(e) =>
                                     handleUpdateNodeData({
                                       content: e.target.value,
                                     })
                                   }
-                                  className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                   rows={4}
-                                  placeholder="Enter note content"
+                                  placeholder={t(
+                                    'agents.workflow.builder.noteContentPlaceholder',
+                                  )}
                                 />
-                              </div>
+                              </FormField>
                             )}
 
                             {selectedNode.type === 'state' && (
                               <>
-                                <p className="text-xs text-gray-500 dark:text-gray-400">
-                                  Assign values to workflow&apos;s state
-                                  variables
+                                <p className="text-muted-foreground text-xs">
+                                  {t('agents.workflow.builder.stateIntro')}
                                 </p>
                                 {(
                                   selectedNode.data.config?.operations || []
@@ -2410,22 +2605,29 @@ function WorkflowBuilderInner() {
                                     },
                                     idx: number,
                                   ) => (
-                                    <div
+                                    <Card
                                       key={idx}
-                                      className="border-border rounded-xl border p-3"
+                                      padding="sm"
+                                      className="gap-2"
                                     >
-                                      <div className="mb-2 flex items-center justify-between">
-                                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                                          Assign value
+                                      <div className="flex items-center justify-between">
+                                        <span className="text-foreground text-sm font-medium">
+                                          {t(
+                                            'agents.workflow.builder.assignValue',
+                                          )}
                                         </span>
                                         {(
                                           selectedNode.data.config
                                             ?.operations || []
                                         ).length > 1 && (
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon-sm"
+                                          <IconButton
+                                            variant="ghost-destructive"
+                                            size="icon-xs"
+                                            label={t(
+                                              'agents.workflow.removeAssignment',
+                                              { index: idx + 1 },
+                                            )}
+                                            icon={Trash2}
                                             onClick={() => {
                                               const ops = [
                                                 ...(selectedNode.data.config
@@ -2440,83 +2642,97 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-red-500 dark:hover:bg-transparent"
-                                          >
-                                            <Trash2 size={14} />
-                                          </Button>
+                                          />
                                         )}
                                       </div>
-                                      <textarea
-                                        value={op.expression}
-                                        onChange={(e) => {
-                                          const ops = [
-                                            ...(selectedNode.data.config
-                                              ?.operations || []),
-                                          ];
-                                          ops[idx] = {
-                                            ...ops[idx],
-                                            expression: e.target.value,
-                                          };
-                                          handleUpdateNodeData({
-                                            config: {
-                                              ...(selectedNode.data.config ||
-                                                {}),
-                                              operations: ops,
-                                            },
-                                          });
-                                        }}
-                                        className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card dark:bg-accent mb-1 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
-                                        rows={2}
-                                        placeholder="query"
-                                      />
-                                      <p className="text-muted-foreground mb-3 text-xs">
-                                        Use Common Expression Language to create
-                                        a custom expression. Reference state by
-                                        bare name (<code>query</code>), not{' '}
-                                        <code>{'{{query}}'}</code>.{' '}
-                                        <a
-                                          href="https://cel.dev/"
-                                          target="_blank"
-                                          rel="noreferrer"
-                                          className="text-primary underline"
+                                      <div className="flex flex-col gap-5">
+                                        <div className="flex flex-col gap-1">
+                                          <Textarea
+                                            value={op.expression}
+                                            onChange={(e) => {
+                                              const ops = [
+                                                ...(selectedNode.data.config
+                                                  ?.operations || []),
+                                              ];
+                                              ops[idx] = {
+                                                ...ops[idx],
+                                                expression: e.target.value,
+                                              };
+                                              handleUpdateNodeData({
+                                                config: {
+                                                  ...(selectedNode.data
+                                                    .config || {}),
+                                                  operations: ops,
+                                                },
+                                              });
+                                            }}
+                                            rows={2}
+                                            placeholder="query"
+                                            aria-label={t(
+                                              'agents.workflow.expressionRow',
+                                              { index: idx + 1 },
+                                            )}
+                                          />
+                                          <p className="text-muted-foreground text-xs">
+                                            <Trans
+                                              i18nKey="agents.workflow.builder.celHint"
+                                              components={{ code: <code /> }}
+                                              values={{ braced: '{{query}}' }}
+                                            />{' '}
+                                            <Button
+                                              variant="link"
+                                              size="inline"
+                                              asChild
+                                              // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
+                                              className="text-xs font-normal"
+                                            >
+                                              <a
+                                                href="https://cel.dev/"
+                                                target="_blank"
+                                                rel="noreferrer"
+                                              >
+                                                {t(
+                                                  'agents.workflow.builder.learnMore',
+                                                )}
+                                              </a>
+                                            </Button>
+                                          </p>
+                                        </div>
+                                        <FormField
+                                          label={t(
+                                            'agents.workflow.builder.toVariable',
+                                          )}
                                         >
-                                          Learn more
-                                        </a>
-                                      </p>
-                                      <div>
-                                        <span className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                          To variable
-                                        </span>
-                                        <Input
-                                          type="text"
-                                          value={op.target_variable}
-                                          onChange={(e) => {
-                                            const ops = [
-                                              ...(selectedNode.data.config
-                                                ?.operations || []),
-                                            ];
-                                            ops[idx] = {
-                                              ...ops[idx],
-                                              target_variable: e.target.value,
-                                            };
-                                            handleUpdateNodeData({
-                                              config: {
-                                                ...(selectedNode.data.config ||
-                                                  {}),
-                                                operations: ops,
-                                              },
-                                            });
-                                          }}
-                                          className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                          placeholder="variable_name"
-                                        />
+                                          <Input
+                                            type="text"
+                                            value={op.target_variable}
+                                            onChange={(e) => {
+                                              const ops = [
+                                                ...(selectedNode.data.config
+                                                  ?.operations || []),
+                                              ];
+                                              ops[idx] = {
+                                                ...ops[idx],
+                                                target_variable: e.target.value,
+                                              };
+                                              handleUpdateNodeData({
+                                                config: {
+                                                  ...(selectedNode.data
+                                                    .config || {}),
+                                                  operations: ops,
+                                                },
+                                              });
+                                            }}
+                                            placeholder="variable_name"
+                                          />
+                                        </FormField>
                                       </div>
-                                    </div>
+                                    </Card>
                                   ),
                                 )}
                                 <Button
                                   type="button"
-                                  variant="ghost"
+                                  variant="ghost-muted"
                                   size="sm"
                                   onClick={() => {
                                     const ops = [
@@ -2531,23 +2747,29 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="h-auto gap-1 self-start rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400"
+                                  className="self-start"
                                 >
-                                  <Plus size={14} />
-                                  Add
+                                  <Plus className="size-3.5" />
+                                  {t('agents.form.buttons.add')}
                                 </Button>
                               </>
                             )}
 
                             {selectedNode.type === 'condition' && (
                               <>
-                                <p className="text-xs text-gray-500 dark:text-gray-400">
-                                  Create conditions to branch your workflow
+                                <p className="text-muted-foreground text-xs">
+                                  {t('agents.workflow.builder.conditionIntro')}
                                 </p>
-                                <div className="border-border flex overflow-hidden rounded-lg border">
+                                <div className="border-border bg-card flex gap-1 rounded-xl border p-1">
                                   <Button
                                     type="button"
-                                    variant="ghost"
+                                    variant={
+                                      (selectedNode.data.config?.mode ||
+                                        'simple') === 'simple'
+                                        ? 'outline'
+                                        : 'ghost-muted'
+                                    }
+                                    size="xs"
                                     onClick={() =>
                                       handleUpdateNodeData({
                                         config: {
@@ -2556,18 +2778,19 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className={`h-auto flex-1 rounded-none px-3 py-1.5 text-xs font-medium ${
-                                      (selectedNode.data.config?.mode ||
-                                        'simple') === 'simple'
-                                        ? 'bg-primary hover:bg-primary text-white hover:text-white'
-                                        : 'text-gray-600 dark:text-gray-400'
-                                    }`}
+                                    className="flex-1"
                                   >
-                                    Simple
+                                    {t('agents.workflow.builder.modeSimple')}
                                   </Button>
                                   <Button
                                     type="button"
-                                    variant="ghost"
+                                    variant={
+                                      selectedNode.data.config?.mode ===
+                                      'advanced'
+                                        ? 'outline'
+                                        : 'ghost-muted'
+                                    }
+                                    size="xs"
                                     onClick={() =>
                                       handleUpdateNodeData({
                                         config: {
@@ -2576,33 +2799,35 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className={`h-auto flex-1 rounded-none px-3 py-1.5 text-xs font-medium ${
-                                      selectedNode.data.config?.mode ===
-                                      'advanced'
-                                        ? 'bg-primary hover:bg-primary text-white hover:text-white'
-                                        : 'text-gray-600 dark:text-gray-400'
-                                    }`}
+                                    className="flex-1"
                                   >
-                                    Advanced
+                                    {t('agents.workflow.builder.modeAdvanced')}
                                   </Button>
                                 </div>
 
                                 {(selectedNode.data.config?.cases || []).map(
                                   (c: ConditionCase, idx: number) => (
-                                    <div
+                                    <Card
                                       key={c.sourceHandle}
-                                      className="border-border rounded-xl border p-3"
+                                      padding="sm"
+                                      className="gap-2"
                                     >
-                                      <div className="mb-2 flex items-center justify-between">
-                                        <span className="text-sm font-semibold text-orange-600 dark:text-orange-400">
-                                          {idx === 0 ? 'If' : 'Else if'}
+                                      <div className="flex items-center justify-between">
+                                        <span className="text-warning text-sm font-semibold">
+                                          {idx === 0
+                                            ? t('agents.workflow.nodes.if')
+                                            : t('agents.workflow.nodes.elseIf')}
                                         </span>
                                         {(selectedNode.data.config?.cases || [])
                                           .length > 1 && (
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon-sm"
+                                          <IconButton
+                                            variant="ghost-destructive"
+                                            size="icon-xs"
+                                            label={t(
+                                              'agents.workflow.removeCondition',
+                                              { index: idx + 1 },
+                                            )}
+                                            icon={Trash2}
                                             onClick={() => {
                                               const cases =
                                                 normalizeConditionCases([
@@ -2633,10 +2858,7 @@ function WorkflowBuilderInner() {
                                                 );
                                               }
                                             }}
-                                            className="size-auto p-0 text-gray-400 hover:bg-transparent hover:text-red-500 dark:hover:bg-transparent"
-                                          >
-                                            <Trash2 size={14} />
-                                          </Button>
+                                          />
                                         )}
                                       </div>
                                       <Input
@@ -2659,8 +2881,13 @@ function WorkflowBuilderInner() {
                                             },
                                           });
                                         }}
-                                        className="bg-card dark:bg-accent mb-2 h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                        placeholder="Case name (optional)"
+                                        placeholder={t(
+                                          'agents.workflow.builder.caseNamePlaceholder',
+                                        )}
+                                        aria-label={t(
+                                          'agents.workflow.conditionNameRow',
+                                          { index: idx + 1 },
+                                        )}
                                       />
                                       {(selectedNode.data.config?.mode ||
                                         'simple') === 'simple' ? (
@@ -2695,8 +2922,13 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                            placeholder="Variable"
+                                            placeholder={t(
+                                              'agents.workflow.builder.variablePlaceholder',
+                                            )}
+                                            aria-label={t(
+                                              'agents.workflow.conditionVariableRow',
+                                              { index: idx + 1 },
+                                            )}
                                           />
                                           <Select
                                             value={
@@ -2728,7 +2960,14 @@ function WorkflowBuilderInner() {
                                               });
                                             }}
                                           >
-                                            <SelectTrigger className="w-24 shrink-0">
+                                            <SelectTrigger
+                                              size="field"
+                                              className="w-24 shrink-0"
+                                              aria-label={t(
+                                                'agents.workflow.conditionOperatorRow',
+                                                { index: idx + 1 },
+                                              )}
+                                            >
                                               <SelectValue />
                                             </SelectTrigger>
                                             <SelectContent>
@@ -2751,10 +2990,14 @@ function WorkflowBuilderInner() {
                                                 &lt;=
                                               </SelectItem>
                                               <SelectItem value="contains">
-                                                contains
+                                                {t(
+                                                  'agents.workflow.builder.opContains',
+                                                )}
                                               </SelectItem>
                                               <SelectItem value="startsWith">
-                                                starts
+                                                {t(
+                                                  'agents.workflow.builder.opStartsWith',
+                                                )}
                                               </SelectItem>
                                             </SelectContent>
                                           </Select>
@@ -2787,13 +3030,49 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="bg-card dark:bg-accent h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                            placeholder="Value"
+                                            placeholder={t(
+                                              'agents.workflow.builder.valuePlaceholder',
+                                            )}
+                                            aria-label={t(
+                                              'agents.workflow.conditionValueRow',
+                                              { index: idx + 1 },
+                                            )}
                                           />
                                         </div>
                                       ) : (
-                                        <>
-                                          <textarea
+                                        <FormField
+                                          label={t(
+                                            'agents.workflow.conditionRow',
+                                            { index: idx + 1 },
+                                          )}
+                                          hint={
+                                            <>
+                                              <Trans
+                                                i18nKey="agents.workflow.builder.celHint"
+                                                components={{ code: <code /> }}
+                                                values={{ braced: '{{query}}' }}
+                                              />{' '}
+                                              <Button
+                                                variant="link"
+                                                size="inline"
+                                                asChild
+                                                // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
+                                                className="text-xs font-normal"
+                                              >
+                                                <a
+                                                  href="https://cel.dev/"
+                                                  target="_blank"
+                                                  rel="noreferrer"
+                                                >
+                                                  {t(
+                                                    'agents.workflow.builder.learnMore',
+                                                  )}
+                                                </a>
+                                              </Button>
+                                            </>
+                                          }
+                                        >
+                                          <Textarea
                                             value={c.expression}
                                             onChange={(e) => {
                                               const cases = [
@@ -2812,34 +3091,20 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus-visible:ring-2 dark:text-white"
                                             rows={2}
-                                            placeholder='Enter condition, e.g. query.contains("refund")'
+                                            placeholder={t(
+                                              'agents.workflow.builder.conditionPlaceholder',
+                                            )}
                                           />
-                                          <p className="text-muted-foreground mt-1 text-xs">
-                                            Use Common Expression Language to
-                                            create a custom expression.
-                                            Reference state by bare name (
-                                            <code>query</code>), not{' '}
-                                            <code>{'{{query}}'}</code>.{' '}
-                                            <a
-                                              href="https://cel.dev/"
-                                              target="_blank"
-                                              rel="noreferrer"
-                                              className="text-primary underline"
-                                            >
-                                              Learn more
-                                            </a>
-                                          </p>
-                                        </>
+                                        </FormField>
                                       )}
-                                    </div>
+                                    </Card>
                                   ),
                                 )}
 
                                 <Button
                                   type="button"
-                                  variant="ghost"
+                                  variant="ghost-muted"
                                   size="sm"
                                   onClick={() => {
                                     const cases = normalizeConditionCases([
@@ -2860,25 +3125,23 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="h-auto gap-1 self-start rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-400"
+                                  className="self-start"
                                 >
-                                  <Plus size={14} />
-                                  Add
+                                  <Plus className="size-3.5" />
+                                  {t('agents.form.buttons.add')}
                                 </Button>
                               </>
                             )}
 
                             {selectedNode.type === 'code' && (
                               <>
-                                <p className="text-xs text-gray-500 dark:text-gray-400">
-                                  Run code in the workflow sandbox. Produced
-                                  files are saved as artifacts.
+                                <p className="text-muted-foreground text-xs">
+                                  {t('agents.workflow.builder.codeIntro')}
                                 </p>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Code
-                                  </label>
-                                  <textarea
+                                <FormField
+                                  label={t('agents.workflow.nodes.code')}
+                                >
+                                  <Textarea
                                     value={selectedNode.data.config?.code ?? ''}
                                     onChange={(e) =>
                                       handleUpdateNodeData({
@@ -2888,12 +3151,12 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus-visible:ring-2 dark:text-white"
+                                    className="font-mono"
                                     rows={10}
                                     spellCheck={false}
                                     placeholder={'print("hello world")'}
                                   />
-                                </div>
+                                </FormField>
                                 <NodeDocumentsControl
                                   key={selectedNode.id}
                                   value={selectedNode.data.config?.inputs ?? []}
@@ -2906,13 +3169,18 @@ function WorkflowBuilderInner() {
                                     })
                                   }
                                   options={selectedCodeDocumentOptions}
-                                  label="Input files"
-                                  helpText="Artifacts/upstream refs staged as files in the sandbox (one becomes inputs/<name>)."
+                                  label={t(
+                                    'agents.workflow.builder.inputFiles',
+                                  )}
+                                  helpText={t(
+                                    'agents.workflow.builder.inputFilesHint',
+                                  )}
                                 />
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Output Variable
-                                  </label>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.outputVariable',
+                                  )}
+                                >
                                   <Input
                                     type="text"
                                     value={
@@ -2927,14 +3195,14 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                    placeholder="Variable name for output"
+                                    placeholder={t(
+                                      'agents.workflow.builder.outputVariablePlaceholder',
+                                    )}
                                   />
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Timeout (seconds)
-                                  </label>
+                                </FormField>
+                                <FormField
+                                  label={t('agents.workflow.builder.timeout')}
+                                >
                                   <Input
                                     type="number"
                                     min={1}
@@ -2958,20 +3226,43 @@ function WorkflowBuilderInner() {
                                         },
                                       });
                                     }}
-                                    className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-                                    placeholder="Optional"
+                                    placeholder={t(
+                                      'agents.workflow.builder.optional',
+                                    )}
                                   />
-                                </div>
-                                <div>
-                                  <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    Structured Output (JSON Schema)
-                                  </label>
-                                  <textarea
+                                </FormField>
+                                <FormField
+                                  label={t(
+                                    'agents.workflow.builder.structuredOutput',
+                                  )}
+                                  hint={
+                                    selectedCodeJsonSchemaText.trim() !== '' &&
+                                    !selectedCodeJsonSchemaError
+                                      ? t('agents.workflow.builder.validSchema')
+                                      : undefined
+                                  }
+                                  error={
+                                    selectedCodeJsonSchemaText.trim() !== '' &&
+                                    selectedCodeJsonSchemaError
+                                      ? t(
+                                          'agents.workflow.builder.invalidSchema',
+                                          {
+                                            ...NO_ESCAPE,
+                                            error: schemaErrorText(
+                                              t,
+                                              selectedCodeJsonSchemaError,
+                                            ),
+                                          },
+                                        )
+                                      : undefined
+                                  }
+                                >
+                                  <Textarea
                                     value={selectedCodeJsonSchemaText}
                                     onChange={(e) =>
                                       handleCodeJsonSchemaChange(e.target.value)
                                     }
-                                    className="border-border focus-visible:ring-ring/50 focus-visible:border-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus-visible:ring-2 dark:text-white"
+                                    className="font-mono"
                                     rows={6}
                                     placeholder={`{
   "type": "object",
@@ -2981,20 +3272,7 @@ function WorkflowBuilderInner() {
   "required": ["result"]
 }`}
                                   />
-                                  {selectedCodeJsonSchemaText.trim() !== '' && (
-                                    <p
-                                      className={`mt-2 text-xs ${
-                                        selectedCodeJsonSchemaError
-                                          ? 'text-red-600 dark:text-red-400'
-                                          : 'text-green-600 dark:text-green-400'
-                                      }`}
-                                    >
-                                      {selectedCodeJsonSchemaError
-                                        ? `Invalid JSON schema: ${selectedCodeJsonSchemaError}`
-                                        : 'Valid JSON schema'}
-                                    </p>
-                                  )}
-                                </div>
+                                </FormField>
                               </>
                             )}
                           </>
@@ -3006,12 +3284,13 @@ function WorkflowBuilderInner() {
                       variant="destructive-outline"
                       onClick={handleDeleteNode}
                       disabled={selectedNode?.type === 'start'}
-                      className="w-full rounded-full border-red-200 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 hover:text-red-600 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10 dark:hover:text-red-400"
+                      shape="pill"
+                      className="w-full"
                     >
-                      <Trash2 size={16} />
+                      <Trash2 />
                       {selectedNode?.type === 'start'
-                        ? 'Cannot Delete Start Node'
-                        : 'Delete Node'}
+                        ? t('agents.workflow.builder.cannotDeleteStart')
+                        : t('agents.workflow.builder.deleteNode')}
                     </Button>
                   </div>
                 </div>
@@ -3023,8 +3302,7 @@ function WorkflowBuilderInner() {
         <Sheet open={showPreview} onOpenChange={setShowPreview}>
           <SheetContent
             side="right"
-            title="Workflow preview"
-            className="bg-card w-full max-w-none p-0 sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]"
+            className="w-full max-w-none p-0 sm:max-w-[600px] md:max-w-[700px] lg:max-w-[800px]"
           >
             <WorkflowPreview
               workflowId={workflowId}
@@ -3058,13 +3336,20 @@ function WorkflowBuilderInner() {
           </SheetContent>
         </Sheet>
         <ConfirmationModal
-          message={`Are you sure you want to delete "${workflowName || 'this workflow agent'}"?`}
+          message={
+            workflowName
+              ? t('agents.workflow.builder.deleteConfirm', {
+                  ...NO_ESCAPE,
+                  name: workflowName,
+                })
+              : t('agents.workflow.builder.deleteConfirmUnnamed')
+          }
           modalState={deleteConfirmation}
           setModalState={setDeleteConfirmation}
-          submitLabel="Delete"
+          submitLabel={t('agents.form.buttons.delete')}
           handleSubmit={handleDeleteAgent}
-          cancelLabel="Cancel"
-          variant="danger"
+          cancelLabel={t('agents.form.buttons.cancel')}
+          variant="destructive"
         />
         {canManageAgent && (
           <AgentDetailsModal
diff --git a/frontend/src/agents/workflow/WorkflowMiniMap.test.tsx b/frontend/src/agents/workflow/WorkflowMiniMap.test.tsx
new file mode 100644
index 00000000..ebff359b
--- /dev/null
+++ b/frontend/src/agents/workflow/WorkflowMiniMap.test.tsx
@@ -0,0 +1,134 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import type { WorkflowNode } from '../types/workflow';
+import type { WorkflowExecutionStep } from './workflowPreviewSlice';
+import { WorkflowMiniMap } from './WorkflowPreview';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const node = (
+  id: string,
+  type: WorkflowNode['type'],
+  y: number,
+): WorkflowNode => ({
+  id,
+  type,
+  title: id,
+  position: { x: 0, y },
+  data: {},
+});
+
+const nodes = [
+  node('start', 'start', 0),
+  node('done', 'agent', 1),
+  node('broken', 'agent', 2),
+  node('busy', 'agent', 3),
+];
+
+const step = (
+  nodeId: string,
+  status: WorkflowExecutionStep['status'],
+): WorkflowExecutionStep => ({
+  nodeId,
+  nodeType: 'agent',
+  nodeTitle: nodeId,
+  status,
+});
+
+const steps = [
+  step('done', 'completed'),
+  step('broken', 'failed'),
+  step('busy', 'running'),
+];
+
+describe('WorkflowMiniMap', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const rows = (activeNodeId: string | null = null) => {
+    act(() => {
+      root.render(
+        <WorkflowMiniMap
+          nodes={nodes}
+          activeNodeId={activeNodeId}
+          executionSteps={steps}
+        />,
+      );
+    });
+    const byName: Record<string, HTMLButtonElement> = {};
+    container.querySelectorAll<HTMLButtonElement>('button').forEach((b) => {
+      byName[b.textContent ?? ''] = b;
+    });
+    return byName;
+  };
+
+  // No i18n instance in this test: t() renders the key.
+  const START = 'agents.workflow.nodes.start';
+
+  const tokens = (el: HTMLElement) => el.className.split(/\s+/);
+
+  it('pins the success fill on hover for a completed row', () => {
+    const done = tokens(rows().done);
+    expect(done).toEqual(
+      expect.arrayContaining([
+        'bg-success/10',
+        'hover:bg-success/10',
+        'dark:hover:bg-success/10',
+        'hover:opacity-80',
+      ]),
+    );
+    expect(done).not.toContain('hover:bg-accent');
+    expect(done).not.toContain('dark:hover:bg-input/50');
+  });
+
+  it('pins each status fill on hover', () => {
+    const r = rows();
+    expect(tokens(r.broken)).toEqual(
+      expect.arrayContaining([
+        'hover:bg-destructive/10',
+        'dark:hover:bg-destructive/10',
+      ]),
+    );
+    expect(tokens(r.busy)).toEqual(
+      expect.arrayContaining([
+        'hover:bg-primary/10',
+        'dark:hover:bg-primary/10',
+        'animate-pulse',
+      ]),
+    );
+    expect(tokens(r[START])).toEqual(
+      expect.arrayContaining([
+        'bg-muted',
+        'hover:bg-muted',
+        'dark:hover:bg-muted',
+      ]),
+    );
+    expect(r[START].disabled).toBe(true);
+    expect(tokens(r[START])).not.toContain('hover:opacity-80');
+  });
+
+  it('pins the active fill on hover and keeps the ring', () => {
+    const done = tokens(rows('done').done);
+    expect(done).toEqual(
+      expect.arrayContaining([
+        'ring-2',
+        'ring-primary',
+        'hover:bg-primary/10',
+        'dark:hover:bg-primary/10',
+      ]),
+    );
+    expect(done).not.toContain('hover:bg-accent');
+  });
+});
diff --git a/frontend/src/agents/workflow/WorkflowPreview.tsx b/frontend/src/agents/workflow/WorkflowPreview.tsx
index b400ceb6..b8fc8429 100644
--- a/frontend/src/agents/workflow/WorkflowPreview.tsx
+++ b/frontend/src/agents/workflow/WorkflowPreview.tsx
@@ -1,23 +1,30 @@
 import {
   Bot,
-  CheckCircle2,
+  ChevronDown,
   Circle,
-  Code2,
+  CircleAlert,
+  CircleCheck,
+  CircleX,
+  CodeXml,
   Database,
   FileBox,
   Flag,
   GitBranch,
-  Loader2,
+  type LucideIcon,
   MessageSquare,
   Play,
   StickyNote,
   Workflow,
-  XCircle,
 } from 'lucide-react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { SectionHeader } from '@/components/ui/section-header';
+import { SheetTitle } from '@/components/ui/sheet';
+import { Spinner } from '@/components/ui/spinner';
 import {
   MessageScroller,
   MessageScrollerButton,
@@ -28,7 +35,6 @@ import {
 } from '@/components/ui/message-scroller';
 import { cn } from '@/lib/utils';
 
-import ChevronDownIcon from '../../assets/chevron-down.svg';
 import MessageInput from '../../components/MessageInput';
 import ConversationBubble from '../../conversation/ConversationBubble';
 import { Query } from '../../conversation/conversationModels';
@@ -66,24 +72,26 @@ interface WorkflowPreviewProps {
   workflowId?: string | null;
 }
 
-const NODE_ICONS: Record<string, React.ReactNode> = {
-  start: <Play className="h-3 w-3" />,
-  agent: <Bot className="h-3 w-3" />,
-  end: <Flag className="h-3 w-3" />,
-  note: <StickyNote className="h-3 w-3" />,
-  state: <Database className="h-3 w-3" />,
-  condition: <GitBranch className="h-3 w-3" />,
-  code: <Code2 className="h-3 w-3" />,
+// Components, not elements: the step list draws them at 12px, the minimap
+// rows at 14px.
+const NODE_ICONS: Record<string, LucideIcon> = {
+  start: Play,
+  agent: Bot,
+  end: Flag,
+  note: StickyNote,
+  state: Database,
+  condition: GitBranch,
+  code: CodeXml,
 };
 
 const NODE_COLORS: Record<string, string> = {
-  start: 'text-green-600 dark:text-green-400',
-  agent: 'text-purple-600 dark:text-purple-400',
-  end: 'text-gray-600 dark:text-gray-400',
-  note: 'text-yellow-600 dark:text-yellow-400',
-  state: 'text-blue-600 dark:text-blue-400',
-  condition: 'text-orange-600 dark:text-orange-400',
-  code: 'text-indigo-600 dark:text-indigo-400',
+  start: 'text-success',
+  agent: 'text-primary',
+  end: 'text-destructive',
+  note: 'text-warning',
+  state: 'text-info',
+  condition: 'text-warning',
+  code: 'text-info',
 };
 
 function ExecutionDetails({
@@ -99,6 +107,7 @@ function ExecutionDetails({
   onToggle: () => void;
   stepRefs?: React.RefObject<Map<string, HTMLDivElement>>;
 }) {
+  const { t } = useTranslation();
   const completedSteps = steps.filter(
     (s) => s.status === 'completed' || s.status === 'failed',
   );
@@ -116,43 +125,44 @@ function ExecutionDetails({
     <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
       <div className="my-2 flex flex-row items-center justify-center gap-3">
         <div className="flex h-[26px] w-[30px] items-center justify-center">
-          <Workflow className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          <Workflow className="text-muted-foreground size-5" />
         </div>
         <Button
           type="button"
           variant="ghost"
+          size="sm"
           onClick={onToggle}
-          className="h-auto gap-2 px-0 py-0 hover:bg-transparent"
+          className="-ml-2.5"
         >
           <p className="text-base font-semibold">
-            Execution Details
-            <span className="ml-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
-              ({completedSteps.length}{' '}
-              {completedSteps.length === 1 ? 'step' : 'steps'})
+            {t('agents.workflow.preview.executionDetails')}
+            <span className="text-muted-foreground ml-1.5 text-sm font-normal">
+              {t('agents.workflow.preview.stepCount', {
+                count: completedSteps.length,
+              })}
             </span>
           </p>
-          <img
-            src={ChevronDownIcon}
-            alt="ChevronDown"
+          <ChevronDown
             className={cn(
-              'h-4 w-4 transform transition-transform duration-200 dark:invert',
-              isOpen ? 'rotate-180' : '',
+              'transition-transform duration-200',
+              isOpen && 'rotate-180',
             )}
           />
         </Button>
       </div>
       <div
         className={cn(
-          'ml-3 grid w-full transition-all duration-300 ease-in-out',
+          'ml-3 grid w-full transition-[grid-template-rows,opacity] duration-300 ease-out',
           isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
         )}
       >
         <div className="overflow-hidden">
-          <div className="space-y-2 pr-2">
+          <div className="flex flex-col gap-2 pr-2">
             {completedSteps.map((step, stepIndex) => {
               const node = nodes.find((n) => n.id === step.nodeId);
               const displayName =
                 node?.title || node?.data?.title || step.nodeTitle;
+              const StepIcon = NODE_ICONS[step.nodeType] || Circle;
               const stateVars = step.stateDelta
                 ? Object.entries(step.stateDelta).filter(
                     ([key]) => !['query', 'chat_history'].includes(key),
@@ -175,10 +185,10 @@ function ExecutionDetails({
                   ref={(el) => {
                     if (el && stepRefs) stepRefs.current.set(step.nodeId, el);
                   }}
-                  className="bg-muted dark:bg-accent rounded-xl p-3"
+                  className="bg-muted rounded-xl p-3"
                 >
                   <div className="flex items-center gap-2 text-sm">
-                    <span className="flex h-5 w-5 shrink-0 items-center justify-center text-xs font-medium text-gray-500 dark:text-gray-400">
+                    <span className="text-muted-foreground flex size-5 shrink-0 items-center justify-center text-xs font-medium">
                       {stepIndex + 1}.
                     </span>
                     <div
@@ -187,43 +197,44 @@ function ExecutionDetails({
                         NODE_COLORS[step.nodeType] || NODE_COLORS.state,
                       )}
                     >
-                      {NODE_ICONS[step.nodeType] || (
-                        <Circle className="h-3 w-3" />
-                      )}
+                      <StepIcon className="size-3" />
                     </div>
-                    <span className="min-w-0 truncate font-medium text-gray-900 dark:text-white">
+                    <span className="text-foreground min-w-0 truncate font-medium">
                       {displayName}
                     </span>
                     <div className="ml-auto shrink-0">
                       {step.status === 'completed' && (
-                        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                        <CircleCheck className="text-success size-4" />
                       )}
                       {step.status === 'failed' && (
-                        <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
+                        <CircleX className="text-destructive size-4" />
                       )}
                     </div>
                   </div>
                   {(hasOutput || step.error || stateVars.length > 0) && (
-                    <div className="mt-3 space-y-2 text-sm">
+                    <div className="mt-3 flex flex-col gap-2 text-sm">
                       {hasOutput && (
                         <div className="bg-muted rounded-lg p-2">
-                          <span className="font-medium text-gray-600 dark:text-gray-400">
-                            Output:{' '}
+                          <span className="text-muted-foreground font-medium">
+                            {t('agents.workflow.preview.outputLabel')}{' '}
                           </span>
-                          <span className="wrap-break-word whitespace-pre-wrap text-gray-900 dark:text-gray-100">
+                          <span className="text-foreground wrap-break-word whitespace-pre-wrap">
                             {truncateText(formattedOutput, 300)}
                           </span>
                         </div>
                       )}
                       {step.error && (
-                        <div className="rounded-lg bg-red-50 p-2 dark:bg-red-900/30">
-                          <span className="font-medium text-red-700 dark:text-red-300">
-                            Error:{' '}
-                          </span>
-                          <span className="wrap-break-word whitespace-pre-wrap text-red-800 dark:text-red-200">
-                            {step.error}
-                          </span>
-                        </div>
+                        <Alert variant="destructive" role="status">
+                          <CircleAlert />
+                          <AlertDescription>
+                            <span className="font-medium">
+                              {t('agents.workflow.preview.errorLabel')}{' '}
+                            </span>
+                            <span className="wrap-break-word whitespace-pre-wrap">
+                              {step.error}
+                            </span>
+                          </AlertDescription>
+                        </Alert>
                       )}
                       {stateVars.length > 0 && (
                         <div className="flex flex-wrap gap-2">
@@ -232,11 +243,11 @@ function ExecutionDetails({
                               key={key}
                               className="bg-muted inline-flex items-center rounded-lg px-2 py-1 text-xs"
                             >
-                              <span className="max-w-[100px] truncate font-medium text-gray-600 dark:text-gray-400">
+                              <span className="text-muted-foreground max-w-[100px] truncate font-medium">
                                 {key}:
                               </span>
                               <span
-                                className="ml-1 max-w-[200px] truncate text-gray-900 dark:text-gray-100"
+                                className="text-foreground ml-1 max-w-[200px] truncate"
                                 title={formatValue(value)}
                               >
                                 {truncateText(formatValue(value), 50)}
@@ -268,32 +279,34 @@ function RunArtifactsSection({
   onToggle: () => void;
   runInProgress?: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
       <div className="my-2 flex flex-row items-center justify-center gap-3">
         <div className="flex h-[26px] w-[30px] items-center justify-center">
-          <FileBox className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          <FileBox className="text-muted-foreground size-5" />
         </div>
         <Button
           type="button"
           variant="ghost"
+          size="sm"
           onClick={onToggle}
-          className="h-auto gap-2 px-0 py-0 hover:bg-transparent"
+          className="-ml-2.5"
         >
-          <p className="text-base font-semibold">Artifacts</p>
-          <img
-            src={ChevronDownIcon}
-            alt="ChevronDown"
+          <p className="text-base font-semibold">
+            {t('agents.workflow.preview.artifacts')}
+          </p>
+          <ChevronDown
             className={cn(
-              'h-4 w-4 transform transition-transform duration-200 dark:invert',
-              isOpen ? 'rotate-180' : '',
+              'transition-transform duration-200',
+              isOpen && 'rotate-180',
             )}
           />
         </Button>
       </div>
       <div
         className={cn(
-          'ml-3 grid w-full transition-all duration-300 ease-in-out',
+          'ml-3 grid w-full transition-[grid-template-rows,opacity] duration-300 ease-out',
           isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
         )}
       >
@@ -312,7 +325,7 @@ function RunArtifactsSection({
   );
 }
 
-function WorkflowMiniMap({
+export function WorkflowMiniMap({
   nodes,
   activeNodeId,
   executionSteps,
@@ -323,9 +336,10 @@ function WorkflowMiniMap({
   executionSteps: WorkflowExecutionStep[];
   onNodeClick?: (nodeId: string) => void;
 }) {
+  const { t } = useTranslation();
   const getNodeDisplayName = (node: WorkflowNode) => {
-    if (node.type === 'start') return 'Start';
-    if (node.type === 'end') return 'End';
+    if (node.type === 'start') return t('agents.workflow.nodes.start');
+    if (node.type === 'end') return t('agents.workflow.nodes.end');
     return node.title || node.data?.title || node.type;
   };
 
@@ -341,26 +355,6 @@ function WorkflowMiniMap({
     return step?.status || 'pending';
   };
 
-  const getStatusColor = (nodeId: string) => {
-    const status = getNodeStatus(nodeId);
-    const isActive = nodeId === activeNodeId;
-
-    if (isActive) {
-      return 'ring-2 ring-purple-500 bg-purple-100 dark:bg-purple-900/50';
-    }
-
-    switch (status) {
-      case 'completed':
-        return 'bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700';
-      case 'running':
-        return 'bg-purple-100 dark:bg-purple-900/30 border-purple-300 dark:border-purple-700 animate-pulse';
-      case 'failed':
-        return 'bg-red-100 dark:bg-red-900/30 border-red-300 dark:border-red-700';
-      default:
-        return 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700';
-    }
-  };
-
   const executedOrder = new Map(executionSteps.map((s, i) => [s.nodeId, i]));
   const startNode = nodes.find((node) => node.type === 'start');
   const visibleNodeIds = new Set(executionSteps.map((step) => step.nodeId));
@@ -391,56 +385,75 @@ function WorkflowMiniMap({
   };
 
   return (
-    <div className="space-y-1">
-      {sortedNodes.map((node, index) => (
-        <div key={node.id} className="relative">
-          {index < sortedNodes.length - 1 && (
-            <div className="absolute top-12 left-4 h-3 w-0.5 bg-gray-200 dark:bg-gray-700" />
-          )}
-
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => hasStepData(node.id) && onNodeClick?.(node.id)}
-            disabled={!hasStepData(node.id)}
-            className={cn(
-              'h-12 w-full justify-start gap-2 px-3 text-xs disabled:opacity-100',
-              getStatusColor(node.id),
-              hasStepData(node.id) && 'hover:opacity-80',
+    <div className="flex flex-col gap-1">
+      {sortedNodes.map((node, index) => {
+        const status = getNodeStatus(node.id);
+        const NodeIcon = NODE_ICONS[node.type] || Circle;
+        const isActive = node.id === activeNodeId;
+        return (
+          <div key={node.id} className="relative">
+            {index < sortedNodes.length - 1 && (
+              <div className="bg-border absolute top-12 left-4 h-3 w-0.5" />
             )}
-          >
-            <div
+
+            <Button
+              type="button"
+              variant="outline"
+              size="xs"
+              onClick={() => hasStepData(node.id) && onNodeClick?.(node.id)}
+              disabled={!hasStepData(node.id)}
+              /* eslint-disable shadcn/no-restyle --
+                 Preview minimap status row: the fill, border and ring follow the step status (success, primary running + pulse,
+                 destructive, muted pending), pending and running rows stay unfaded while disabled, and clickable rows dim on hover.
+                 No Button variant is status-tinted. See DESIGN.md, Approved exceptions. */
               className={cn(
-                'flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
-                NODE_COLORS[node.type] || NODE_COLORS.state,
+                'h-12 w-full justify-start disabled:opacity-100',
+                isActive
+                  ? 'bg-primary/10 ring-primary hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/10 ring-2'
+                  : status === 'completed'
+                    ? 'border-success/50 bg-success/10 hover:bg-success/10 dark:border-success/50 dark:bg-success/10 dark:hover:bg-success/10'
+                    : status === 'running'
+                      ? 'border-primary/50 bg-primary/10 hover:bg-primary/10 dark:border-primary/50 dark:bg-primary/10 dark:hover:bg-primary/10 animate-pulse'
+                      : status === 'failed'
+                        ? 'border-destructive/50 bg-destructive/10 hover:bg-destructive/10 dark:border-destructive/50 dark:bg-destructive/10 dark:hover:bg-destructive/10'
+                        : 'border-border bg-muted hover:bg-muted dark:border-border dark:bg-muted dark:hover:bg-muted',
+                hasStepData(node.id) && 'hover:opacity-80',
               )}
+              /* eslint-enable shadcn/no-restyle */
             >
-              {NODE_ICONS[node.type] || <Circle className="h-3 w-3" />}
-            </div>
-            <div className="min-w-0 flex-1 text-left">
-              <div className="truncate font-medium text-gray-700 dark:text-gray-200">
-                {getNodeDisplayName(node)}
+              <div
+                className={cn(
+                  'flex size-5 shrink-0 items-center justify-center rounded-full',
+                  NODE_COLORS[node.type] || NODE_COLORS.state,
+                )}
+              >
+                <NodeIcon className="size-3.5" />
               </div>
-              {getNodeSubtitle(node) && (
-                <div className="truncate text-xs text-gray-500 dark:text-gray-400">
-                  {getNodeSubtitle(node)}
+              <div className="min-w-0 flex-1 text-left">
+                <div className="text-foreground truncate font-medium">
+                  {getNodeDisplayName(node)}
                 </div>
-              )}
-            </div>
-            <div className="shrink-0">
-              {getNodeStatus(node.id) === 'running' && (
-                <Loader2 className="h-3 w-3 animate-spin text-purple-500" />
-              )}
-              {getNodeStatus(node.id) === 'completed' && (
-                <CheckCircle2 className="h-3 w-3 text-green-500" />
-              )}
-              {getNodeStatus(node.id) === 'failed' && (
-                <XCircle className="h-3 w-3 text-red-500" />
-              )}
-            </div>
-          </Button>
-        </div>
-      ))}
+                {getNodeSubtitle(node) && (
+                  <div className="text-muted-foreground truncate text-xs">
+                    {getNodeSubtitle(node)}
+                  </div>
+                )}
+              </div>
+              <div className="shrink-0">
+                {status === 'running' && (
+                  <Spinner size="xs" className="text-primary" />
+                )}
+                {status === 'completed' && (
+                  <CircleCheck className="text-success size-3.5" />
+                )}
+                {status === 'failed' && (
+                  <CircleX className="text-destructive size-3.5" />
+                )}
+              </div>
+            </Button>
+          </div>
+        );
+      })}
     </div>
   );
 }
@@ -449,6 +462,7 @@ export default function WorkflowPreview({
   workflowData,
   workflowId,
 }: WorkflowPreviewProps) {
+  const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
 
   const queries = useSelector(selectWorkflowPreviewQueries) as WorkflowQuery[];
@@ -605,23 +619,21 @@ export default function WorkflowPreview({
     <div className="bg-card flex h-full flex-col">
       <div className="border-border flex h-[77px] items-center justify-between border-b px-6">
         <div className="flex items-center gap-3">
-          <div className="bg-muted flex items-center justify-center rounded-full p-3 text-gray-600 dark:text-gray-300">
-            <Play className="h-4 w-4" />
+          <div className="bg-muted text-muted-foreground flex items-center justify-center rounded-full p-3">
+            <Play className="size-4" />
           </div>
           <div>
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white">
-              Preview
-            </h2>
-            <p className="max-w-md truncate text-xs text-gray-500 dark:text-gray-400">
+            <SheetTitle>{t('agents.form.sections.preview')}</SheetTitle>
+            <p className="text-muted-foreground max-w-md truncate text-xs">
               {workflowData.name}
               {workflowData.description && ` - ${workflowData.description}`}
             </p>
           </div>
         </div>
         {status === 'loading' && (
-          <span className="text-primary dark:text-primary flex items-center gap-1 text-xs">
-            <Loader2 className="h-3 w-3 animate-spin" />
-            Running
+          <span className="text-primary flex items-center gap-1 text-xs">
+            <Spinner size="xs" />
+            {t('agents.schedules.status.running')}
           </span>
         )}
       </div>
@@ -629,11 +641,13 @@ export default function WorkflowPreview({
       <div className="flex min-h-0 flex-1">
         <div className="border-border flex w-64 shrink-0 flex-col border-r">
           <div className="flex items-center justify-between px-4 py-3">
-            <h3 className="text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
-              Workflow
-            </h3>
+            <SectionHeader
+              as="h3"
+              size="sm"
+              title={t('agents.workflow.preview.minimapHeading')}
+            />
           </div>
-          <div className="flex-1 scrollbar-thin overflow-y-auto p-3">
+          <div className="flex-1 overflow-y-auto p-3">
             <WorkflowMiniMap
               nodes={workflowData.nodes}
               activeNodeId={activeNodeId}
@@ -650,16 +664,16 @@ export default function WorkflowPreview({
             {queries.length === 0 ? (
               <div className="flex h-full flex-col items-center justify-center px-4">
                 <div className="bg-muted mb-2 flex size-14 shrink-0 items-center justify-center rounded-xl">
-                  <MessageSquare className="size-6 text-gray-600 dark:text-gray-300" />
+                  <MessageSquare className="text-muted-foreground size-6" />
                 </div>
-                <p className="text-xl font-semibold text-gray-700 dark:text-gray-200">
-                  Test the workflow
+                <p className="text-foreground text-xl font-semibold">
+                  {t('agents.workflow.preview.emptyTitle')}
                 </p>
               </div>
             ) : (
               <MessageScrollerProvider autoScroll>
                 <MessageScroller>
-                  <MessageScrollerViewport className="scrollbar-thin px-4 pt-4">
+                  <MessageScrollerViewport className="px-4 pt-4">
                     <MessageScrollerContent className="w-full">
                       {queries.map((query, index) => {
                         const querySteps = query.executionSteps || [];
@@ -776,8 +790,8 @@ export default function WorkflowPreview({
           </div>
           <div className="bg-card flex w-full flex-col gap-2 px-4 pt-2 pb-4">
             {sendBlockedMessage && (
-              <p className="text-xs text-red-500" role="alert">
-                {sendBlockedMessage}
+              <p className="text-destructive text-xs" role="alert">
+                {t(sendBlockedMessage)}
               </p>
             )}
             <MessageInput
diff --git a/frontend/src/agents/workflow/WorkflowRunArtifacts.test.tsx b/frontend/src/agents/workflow/WorkflowRunArtifacts.test.tsx
new file mode 100644
index 00000000..62f6f153
--- /dev/null
+++ b/frontend/src/agents/workflow/WorkflowRunArtifacts.test.tsx
@@ -0,0 +1,95 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => null,
+}));
+
+const listMock = vi.fn();
+const detailMock = vi.fn();
+vi.mock('../../api/services/userService', () => ({
+  default: {
+    listWorkflowRunArtifacts: (...args: unknown[]) => listMock(...args),
+    getDocumentArtifact: (...args: unknown[]) => detailMock(...args),
+  },
+}));
+
+vi.mock('../../components/DocumentArtifactView', () => ({
+  default: () => <div data-testid="artifact-view" />,
+}));
+
+import WorkflowRunArtifacts from './WorkflowRunArtifacts';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const failed = { ok: false, status: 500, json: async () => ({}) };
+
+describe('WorkflowRunArtifacts', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    listMock.mockReset();
+    detailMock.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async () => {
+    await act(async () => {
+      root.render(<WorkflowRunArtifacts workflowRunId="run-1" />);
+    });
+  };
+
+  const buttonByText = (text: string) =>
+    Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes(text),
+    );
+
+  it('shows a failed list load as an alert with Retry that refetches', async () => {
+    listMock.mockResolvedValue(failed);
+    await render();
+
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain(
+      'agents.workflow.artifacts.loadListFailed',
+    );
+    expect(listMock).toHaveBeenCalledTimes(1);
+
+    await act(async () => buttonByText('retry')!.click());
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it('retries a failed artifact preview', async () => {
+    listMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        artifacts: [
+          { id: 'a1', kind: 'pdf', title: 'Report', current_version: 1 },
+        ],
+      }),
+    });
+    detailMock.mockResolvedValue(failed);
+    await render();
+
+    await act(async () => buttonByText('Report')!.click());
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain(
+      'agents.workflow.artifacts.loadFailed',
+    );
+    expect(detailMock).toHaveBeenCalledTimes(1);
+
+    await act(async () => buttonByText('retry')!.click());
+    expect(detailMock).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx b/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
index f395f9c2..3e47410c 100644
--- a/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
+++ b/frontend/src/agents/workflow/WorkflowRunArtifacts.tsx
@@ -1,10 +1,12 @@
 import { ChevronLeft, FileBox } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../../api/services/userService';
 import DocumentArtifactView from '../../components/DocumentArtifactView';
-import Spinner from '../../components/Spinner';
+import { EmptyState } from '@/components/ui/empty-state';
+import { LoadingState } from '@/components/ui/loading-state';
 import {
   isDocumentArtifact,
   type DocumentArtifact,
@@ -12,6 +14,11 @@ import {
 import { Button } from '@/components/ui/button';
 import { selectToken } from '../../preferences/preferenceSlice';
 
+// Error states hold locale keys; the render translates them.
+const PREVIEW_UNSUPPORTED = 'agents.workflow.artifacts.previewUnsupported';
+const LIST_FAILED = 'agents.workflow.artifacts.loadListFailed';
+const DETAIL_FAILED = 'agents.workflow.artifacts.loadFailed';
+
 interface RunArtifactSummary {
   id: string;
   kind: string | null;
@@ -31,6 +38,7 @@ export default function WorkflowRunArtifacts({
   workflowRunId,
   inProgress = false,
 }: WorkflowRunArtifactsProps) {
+  const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [artifacts, setArtifacts] = useState<RunArtifactSummary[] | null>(null);
   const [loading, setLoading] = useState(true);
@@ -58,7 +66,7 @@ export default function WorkflowRunArtifacts({
           if (res.status === 403) {
             setArtifacts([]);
           } else {
-            setError('Failed to load artifacts');
+            setError(LIST_FAILED);
           }
           setLoading(false);
           return;
@@ -70,7 +78,7 @@ export default function WorkflowRunArtifacts({
       })
       .catch(() => {
         if (cancelled) return;
-        setError('Failed to load artifacts');
+        setError(LIST_FAILED);
         setLoading(false);
       });
     return () => {
@@ -93,7 +101,7 @@ export default function WorkflowRunArtifacts({
         .then(async (res: Response) => {
           if (cancelled) return;
           if (!res.ok) {
-            setDetailError('Failed to load artifact');
+            setDetailError(DETAIL_FAILED);
             setDetailLoading(false);
             return;
           }
@@ -103,13 +111,13 @@ export default function WorkflowRunArtifacts({
             setDetail(data.artifact);
             setDetailLoading(false);
           } else {
-            setDetailError('This artifact cannot be previewed');
+            setDetailError(PREVIEW_UNSUPPORTED);
             setDetailLoading(false);
           }
         })
         .catch(() => {
           if (cancelled) return;
-          setDetailError('Failed to load artifact');
+          setDetailError(DETAIL_FAILED);
           setDetailLoading(false);
         });
       return () => {
@@ -131,29 +139,41 @@ export default function WorkflowRunArtifacts({
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
-        <Spinner size="small" /> Loading artifacts...
-      </div>
+      <LoadingState
+        fill="block"
+        size="sm"
+        label={t('agents.workflow.artifacts.loading')}
+      />
     );
   }
 
   if (error) {
     return (
-      <div className="flex items-center justify-between gap-2 px-3 py-3 text-sm text-red-500">
-        <span>{error}</span>
-        <Button type="button" variant="outline" size="sm" onClick={loadList}>
-          Retry
-        </Button>
-      </div>
+      <EmptyState
+        tone="destructive"
+        size="sm"
+        illustration="none"
+        title={t(error)}
+        action={
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => loadList()}
+          >
+            {t('retry')}
+          </Button>
+        }
+      />
     );
   }
 
   if (!artifacts || artifacts.length === 0) {
     return (
-      <div className="px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
+      <div className="text-muted-foreground px-3 py-3 text-sm">
         {inProgress
-          ? 'Run in progress — artifacts appear here as nodes produce them.'
-          : 'No artifacts produced by this run.'}
+          ? t('agents.workflow.artifacts.inProgress')
+          : t('agents.workflow.artifacts.empty')}
       </div>
     );
   }
@@ -166,22 +186,41 @@ export default function WorkflowRunArtifacts({
             type="button"
             variant="ghost"
             size="sm"
-            className="gap-1 px-2"
             onClick={() => setSelectedId(null)}
           >
-            <ChevronLeft className="h-4 w-4" />
-            Back to artifacts
+            <ChevronLeft />
+            {t('agents.workflow.artifacts.back')}
           </Button>
         </div>
         <div className="min-h-0 flex-1 overflow-hidden">
           {detailLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <Spinner />
-            </div>
+            <LoadingState fill="parent" />
+          ) : detailError === PREVIEW_UNSUPPORTED ? (
+            // Not a failed load: nothing to retry.
+            <EmptyState
+              size="sm"
+              illustration="none"
+              title={t(detailError)}
+              className="h-full"
+            />
           ) : detailError ? (
-            <div className="flex h-full items-center justify-center">
-              <p className="text-sm text-red-500">{detailError}</p>
-            </div>
+            <EmptyState
+              tone="destructive"
+              size="sm"
+              illustration="none"
+              title={t(detailError)}
+              className="h-full"
+              action={
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fetchDetail(selectedId)}
+                >
+                  {t('retry')}
+                </Button>
+              }
+            />
           ) : detail ? (
             <DocumentArtifactView
               artifact={detail}
@@ -201,15 +240,18 @@ export default function WorkflowRunArtifacts({
             type="button"
             variant="outline"
             onClick={() => setSelectedId(artifact.id)}
-            className="h-auto w-full justify-start gap-3 px-3 py-2 text-left"
+            className="h-auto w-full justify-start text-left"
           >
-            <FileBox className="h-4 w-4 shrink-0 text-gray-500 dark:text-gray-400" />
+            <FileBox className="text-muted-foreground shrink-0" />
             <div className="min-w-0 flex-1">
-              <div className="truncate text-sm font-medium text-gray-900 dark:text-white">
-                {artifact.title || `Artifact ${artifact.id.slice(0, 8)}`}
+              <div className="text-foreground truncate text-sm font-medium">
+                {artifact.title ||
+                  t('agents.workflow.artifacts.untitled', {
+                    id: artifact.id.slice(0, 8),
+                  })}
               </div>
-              <div className="truncate text-xs text-gray-500 dark:text-gray-400">
-                {artifact.kind || 'file'}
+              <div className="text-muted-foreground truncate text-xs">
+                {artifact.kind || t('agents.workflow.artifacts.fileKind')}
                 {artifact.current_version != null
                   ? ` · v${artifact.current_version}`
                   : ''}
diff --git a/frontend/src/agents/workflow/components/MobileBlocker.tsx b/frontend/src/agents/workflow/components/MobileBlocker.tsx
index 92e8d19e..dec6aa56 100644
--- a/frontend/src/agents/workflow/components/MobileBlocker.tsx
+++ b/frontend/src/agents/workflow/components/MobileBlocker.tsx
@@ -1,17 +1,18 @@
 import { Monitor } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 export default function MobileBlocker() {
+  const { t } = useTranslation();
   return (
-    <div className="bg-background flex min-h-screen flex-col items-center justify-center px-6 text-center md:hidden">
-      <div className="bg-primary/10 dark:bg-primary/20 mb-6 flex h-20 w-20 items-center justify-center rounded-2xl">
-        <Monitor className="text-primary h-10 w-10" />
+    <div className="bg-background flex min-h-screen flex-col items-center justify-center px-6 text-center lg:hidden">
+      <div className="bg-secondary mb-6 flex size-20 items-center justify-center rounded-2xl">
+        <Monitor className="text-primary size-10" />
       </div>
-      <h2 className="text-foreground mb-2 text-xl font-bold">
-        Desktop Required
+      <h2 className="text-foreground mb-2 text-xl leading-tight font-semibold">
+        {t('agents.workflow.mobileBlocker.title')}
       </h2>
       <p className="text-muted-foreground max-w-sm text-sm leading-relaxed">
-        The Workflow Builder requires a larger screen for the best experience.
-        Please open this page on a desktop or laptop computer.
+        {t('agents.workflow.mobileBlocker.body')}
       </p>
     </div>
   );
diff --git a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
index 17bfced3..4ffc4876 100644
--- a/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
+++ b/frontend/src/agents/workflow/components/NodeDocumentsControl.tsx
@@ -1,9 +1,12 @@
 import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@/components/ui/button';
+import { FormField } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import { MultiSelect } from '@/components/ui/multi-select';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 import {
   appendDocumentRef,
@@ -21,10 +24,10 @@ interface NodeDocumentsControlProps {
   helpText?: string;
 }
 
-const MODE_OPTIONS: { mode: DocumentsMode; label: string }[] = [
-  { mode: 'all', label: 'All input docs' },
-  { mode: 'none', label: 'None' },
-  { mode: 'choose', label: 'Choose…' },
+const MODE_OPTIONS: { mode: DocumentsMode; labelKey: string }[] = [
+  { mode: 'all', labelKey: 'agents.workflow.documents.modeAll' },
+  { mode: 'none', labelKey: 'agents.workflow.documents.modeNone' },
+  { mode: 'choose', labelKey: 'agents.workflow.documents.modeChoose' },
 ];
 
 /** Shared All/None/Choose documents picker for agent and code workflow nodes. */
@@ -35,12 +38,14 @@ export default function NodeDocumentsControl({
   label,
   helpText,
 }: NodeDocumentsControlProps) {
+  const { t } = useTranslation();
   // Track mode in component state so "Choose" stays reachable even when the
   // chosen list is empty (an empty list otherwise reads back as "None").
   const [mode, setMode] = useState<DocumentsMode>(() =>
     getDocumentsMode(value),
   );
   const [refDraft, setRefDraft] = useState('');
+  const fieldId = useId();
 
   const chosen = documentsModeToInputDocuments('choose', value);
   const showChoose = mode === 'choose';
@@ -59,42 +64,46 @@ export default function NodeDocumentsControl({
   };
 
   return (
-    <div>
-      <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-        {label}
-      </label>
-      <div className="border-border bg-card flex gap-1 rounded-xl border p-1">
-        {MODE_OPTIONS.map(({ mode: optionMode, label: modeLabel }) => (
-          <Button
-            key={optionMode}
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={() => selectMode(optionMode)}
-            className={`h-auto flex-1 rounded-lg px-2 py-1.5 text-xs font-medium ${
-              mode === optionMode
-                ? 'bg-primary text-white'
-                : 'text-gray-600 dark:text-gray-300'
-            }`}
-          >
-            {modeLabel}
-          </Button>
-        ))}
+    <FormField label={label} hint={helpText} id={fieldId} float={false}>
+      {/* The track is a plain wrapper: ToggleGroup takes layout only. */}
+      <div className="border-border bg-card rounded-xl border p-1">
+        <ToggleGroup
+          id={fieldId}
+          type="single"
+          size="xs"
+          value={mode}
+          onValueChange={(next) => next && selectMode(next as DocumentsMode)}
+          aria-label={label}
+          className="flex-nowrap"
+        >
+          {MODE_OPTIONS.map(({ mode: optionMode, labelKey }) => (
+            <ToggleGroupItem
+              key={optionMode}
+              value={optionMode}
+              className="flex-1"
+            >
+              {t(labelKey)}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
       </div>
       {showChoose && (
-        <div className="mt-2 flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
           <MultiSelect
+            // Its own id: the FormField id belongs to the mode group above.
+            id={`${fieldId}-pick`}
             options={withChosenDocumentOptions(options, chosen)}
             selected={chosen}
             onChange={(next) =>
               onChange(documentsModeToInputDocuments('choose', next))
             }
-            placeholder="Select documents..."
-            searchPlaceholder="Search variables..."
-            emptyText="No upstream documents"
+            placeholder={t('agents.workflow.documents.selectPlaceholder')}
+            searchPlaceholder={t('agents.workflow.documents.searchPlaceholder')}
+            emptyText={t('agents.workflow.documents.empty')}
           />
           <div className="flex gap-2">
             <Input
+              id={`${fieldId}-ref`}
               type="text"
               value={refDraft}
               onChange={(e) => setRefDraft(e.target.value)}
@@ -104,25 +113,20 @@ export default function NodeDocumentsControl({
                   addRef();
                 }
               }}
-              className="bg-card h-auto rounded-xl px-3 py-2 text-sm shadow-none"
-              placeholder="Add ref (e.g. A1)"
+              placeholder={t('agents.workflow.documents.refPlaceholder')}
             />
             <Button
               type="button"
-              variant="ghost"
-              size="sm"
+              variant="ghost-muted"
               onClick={addRef}
-              className="h-auto shrink-0 gap-1 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-300"
+              className="shrink-0"
             >
-              <Plus size={14} />
-              Add
+              <Plus className="size-3.5" />
+              {t('agents.form.buttons.add')}
             </Button>
           </div>
         </div>
       )}
-      {helpText && (
-        <p className="text-muted-foreground mt-1 text-xs">{helpText}</p>
-      )}
-    </div>
+    </FormField>
   );
 }
diff --git a/frontend/src/agents/workflow/components/PromptTextArea.test.tsx b/frontend/src/agents/workflow/components/PromptTextArea.test.tsx
new file mode 100644
index 00000000..057349ec
--- /dev/null
+++ b/frontend/src/agents/workflow/components/PromptTextArea.test.tsx
@@ -0,0 +1,77 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+  }),
+}));
+
+import PromptTextArea from './PromptTextArea';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('PromptTextArea mention menu', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const render = (value: string) =>
+    act(() => {
+      root.render(
+        <PromptTextArea
+          value={value}
+          onChange={() => undefined}
+          nodes={[]}
+          edges={[]}
+          selectedNodeId="n1"
+        />,
+      );
+    });
+
+  const menu = () =>
+    document.querySelector('[data-slot="popover-content"]') as HTMLElement;
+
+  it('opens a portalled popover on "{{" and keeps focus in the textarea', () => {
+    render('{{');
+    const textarea = container.querySelector('textarea')!;
+    act(() => {
+      textarea.focus();
+      textarea.setSelectionRange(2, 2);
+      textarea.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
+    });
+
+    expect(menu()).not.toBeNull();
+    expect(container.contains(menu())).toBe(false);
+    expect(menu().textContent).toContain('source.content');
+    expect(document.activeElement).toBe(textarea);
+  });
+
+  it('closes when the trigger text is gone', () => {
+    render('{{');
+    const textarea = container.querySelector('textarea')!;
+    act(() => {
+      textarea.focus();
+      textarea.setSelectionRange(2, 2);
+      textarea.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
+    });
+    render('hello');
+    act(() => {
+      textarea.setSelectionRange(5, 5);
+      textarea.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));
+    });
+
+    expect(menu()).toBeNull();
+  });
+});
diff --git a/frontend/src/agents/workflow/components/PromptTextArea.tsx b/frontend/src/agents/workflow/components/PromptTextArea.tsx
index ce133990..c63842f4 100644
--- a/frontend/src/agents/workflow/components/PromptTextArea.tsx
+++ b/frontend/src/agents/workflow/components/PromptTextArea.tsx
@@ -1,11 +1,15 @@
 import { Braces, Plus, Search } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Edge, Node } from 'reactflow';
 
 import { Button } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { FormField, FormFieldBoundary } from '@/components/ui/form-field';
 import { Input } from '@/components/ui/input';
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
@@ -199,6 +203,16 @@ export function extractUpstreamVariables(
   return variables;
 }
 
+// Built-in section names (and the unnamed-node fallbacks) shown translated;
+// a node's own title is a value and shows as written.
+const SECTION_LABEL_KEYS: Record<string, string> = {
+  'Global context': 'agents.workflow.variables.globalContext',
+  'Workflow input': 'agents.workflow.variables.workflowInput',
+  Agent: 'agents.workflow.nodes.agent',
+  Code: 'agents.workflow.nodes.code',
+  'Set State': 'agents.workflow.nodes.setState',
+};
+
 function groupBySection(
   vars: WorkflowVariable[],
 ): Map<string, WorkflowVariable[]> {
@@ -221,7 +235,7 @@ function HighlightedOverlay({ text }: { text: string }) {
             {part}
           </span>
         ) : (
-          <span key={i} className="text-gray-900 dark:text-white">
+          <span key={i} className="text-foreground">
             {part}
           </span>
         ),
@@ -237,7 +251,12 @@ function VariableListWithSearch({
   variables: WorkflowVariable[];
   onSelect: (templatePath: string) => void;
 }) {
+  const { t } = useTranslation();
   const [search, setSearch] = useState('');
+  // Own id, and a FormFieldBoundary below: the "Add context" popover renders
+  // inside PromptTextArea's FormField (through a portal), whose context would
+  // otherwise hand this search box the textarea's id and floating placeholder.
+  const searchId = useId();
 
   const filtered = useMemo(
     () =>
@@ -252,52 +271,60 @@ function VariableListWithSearch({
   const grouped = useMemo(() => groupBySection(filtered), [filtered]);
 
   return (
-    <div className="flex w-full flex-col overflow-hidden">
-      <div className="border-border flex items-center gap-2 border-b px-3 py-2">
-        <Search className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-        <Input
-          type="text"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search variables..."
-          className="h-auto rounded-none border-0 px-0 py-0 text-sm text-gray-800 shadow-none focus-visible:ring-0 md:text-sm dark:border-0 dark:text-gray-200"
-        />
-      </div>
+    <FormFieldBoundary>
+      <div className="flex w-full flex-col overflow-hidden">
+        <div className="border-border flex items-center gap-2 border-b px-3 py-2">
+          <Search className="text-muted-foreground size-3.5 shrink-0" />
+          <Input
+            id={searchId}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('agents.workflow.variables.searchPlaceholder')}
+            variant="bare"
+          />
+        </div>
 
-      <div className="max-h-48 overflow-y-auto">
-        {filtered.length === 0 ? (
-          <div className="text-muted-foreground px-3 py-4 text-center text-xs">
-            No variables found
-          </div>
-        ) : (
-          Array.from(grouped.entries()).map(([section, vars]) => (
-            <div key={section}>
-              <div className="text-muted-foreground truncate px-3 pt-2.5 pb-1 text-xs font-semibold tracking-wider uppercase">
-                {section}
+        <div className="max-h-48 overflow-y-auto">
+          {filtered.length === 0 ? (
+            <EmptyState
+              size="xs"
+              illustration="none"
+              title={t('agents.workflow.variables.empty')}
+            />
+          ) : (
+            Array.from(grouped.entries()).map(([section, vars]) => (
+              <div key={section}>
+                <div className="text-muted-foreground truncate px-3 pt-2.5 pb-1 text-xs font-semibold tracking-wider uppercase">
+                  {SECTION_LABEL_KEYS[section]
+                    ? t(SECTION_LABEL_KEYS[section])
+                    : section}
+                </div>
+                {vars.map((v) => (
+                  <Button
+                    key={`${section}-${v.templatePath}`}
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onSelect(v.templatePath);
+                    }}
+                    className="w-full justify-start"
+                  >
+                    <Braces className="text-primary size-3.5 shrink-0" />
+                    <span className="text-foreground truncate font-medium">
+                      {v.label}
+                    </span>
+                  </Button>
+                ))}
               </div>
-              {vars.map((v) => (
-                <Button
-                  key={`${section}-${v.templatePath}`}
-                  type="button"
-                  variant="ghost"
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onSelect(v.templatePath);
-                  }}
-                  className="h-auto w-full justify-start gap-2 rounded-none px-3 py-1.5 text-left text-sm font-normal"
-                >
-                  <Braces className="text-primary h-3.5 w-3.5 shrink-0" />
-                  <span className="truncate font-medium text-gray-800 dark:text-gray-200">
-                    {v.label}
-                  </span>
-                </Button>
-              ))}
-            </div>
-          ))
-        )}
+            ))
+          )}
+        </div>
       </div>
-    </div>
+    </FormFieldBoundary>
   );
 }
 
@@ -322,12 +349,11 @@ export default function PromptTextArea({
   rows = 4,
   label,
 }: PromptTextAreaProps) {
+  const { t } = useTranslation();
+  const textareaId = useId();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
   const [showDropdown, setShowDropdown] = useState(false);
-  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
   const [filterText, setFilterText] = useState('');
   const [cursorInsertPos, setCursorInsertPos] = useState<number | null>(null);
   const [contextOpen, setContextOpen] = useState(false);
@@ -359,14 +385,6 @@ export default function PromptTextArea({
     if (triggerMatch) {
       setFilterText(triggerMatch[1].trim());
       setCursorInsertPos(cursorPos);
-
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-
-      setDropdownPos({
-        top: wrapper.offsetHeight + 4,
-        left: 0,
-      });
       setShowDropdown(true);
     } else {
       setShowDropdown(false);
@@ -420,33 +438,11 @@ export default function PromptTextArea({
     [value, onChange],
   );
 
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as HTMLElement)
-      ) {
-        setShowDropdown(false);
-      }
-    };
-    if (showDropdown) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [showDropdown]);
-
-  return (
-    <div>
-      {label && (
-        <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-          {label}
-        </label>
-      )}
-      <div
-        ref={wrapperRef}
-        className="border-border focus-within:ring-ring bg-card relative rounded-xl border transition-all focus-within:ring-2"
-      >
+  // The mention menu opens under the field and leaves focus in the textarea,
+  // so typing keeps filtering it.
+  const field = (
+    <PopoverAnchor asChild>
+      <div className="border-border focus-within:ring-ring bg-card relative rounded-xl border transition-shadow focus-within:ring-2">
         <div
           ref={overlayRef}
           aria-hidden
@@ -455,13 +451,22 @@ export default function PromptTextArea({
           {value ? (
             <HighlightedOverlay text={value} />
           ) : (
-            <span className="text-gray-400 dark:text-gray-500">
+            // Under a floating label the example waits for focus, like
+            // ui/Textarea, so it doesn't collide with the resting label.
+            <span
+              className={
+                label
+                  ? 'text-muted-foreground invisible group-focus-within/float:visible'
+                  : 'text-muted-foreground'
+              }
+            >
               {placeholder}
             </span>
           )}
         </div>
 
         <textarea
+          id={textareaId}
           ref={textareaRef}
           value={value}
           onChange={(e) => {
@@ -481,11 +486,7 @@ export default function PromptTextArea({
               overlayRef.current.scrollTop = textareaRef.current.scrollTop;
             }
           }}
-          className="focus-visible:ring-ring/50 focus-visible:border-ring relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm caret-black outline-none focus-visible:ring-[3px] dark:caret-white"
-          style={{
-            color: 'transparent',
-            WebkitTextFillColor: 'transparent',
-          }}
+          className="focus-visible:ring-ring/50 focus-visible:border-ring caret-foreground relative w-full rounded-xl bg-transparent px-3 pt-2 pb-8 text-sm text-transparent outline-none focus-visible:ring-3"
           rows={rows}
           placeholder={placeholder}
           spellCheck={false}
@@ -494,19 +495,15 @@ export default function PromptTextArea({
         <div className="absolute right-4 bottom-1.5 z-10">
           <Popover open={contextOpen} onOpenChange={setContextOpen}>
             <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                className="text-primary hover:bg-primary/10 h-auto gap-1 px-2 py-1 text-xs font-medium"
-              >
-                <Plus className="h-3 w-3" />
-                Add context
+              <Button type="button" variant="link" size="xs">
+                <Plus className="size-3" />
+                {t('agents.workflow.variables.addContext')}
               </Button>
             </PopoverTrigger>
             <PopoverContent
               align="end"
               side="top"
-              className="border-border bg-card w-60 rounded-xl border p-0 shadow-lg"
+              className="w-60 p-0"
               onOpenAutoFocus={(e) => e.preventDefault()}
             >
               <VariableListWithSearch
@@ -516,20 +513,39 @@ export default function PromptTextArea({
             </PopoverContent>
           </Popover>
         </div>
-
-        {showDropdown && filtered.length > 0 && (
-          <div
-            ref={dropdownRef}
-            className="border-border bg-card absolute z-50 w-64 rounded-xl border shadow-lg"
-            style={{ top: dropdownPos.top, left: dropdownPos.left }}
-          >
-            <VariableListWithSearch
-              variables={filtered}
-              onSelect={insertVariable}
-            />
-          </div>
-        )}
       </div>
-    </div>
+    </PopoverAnchor>
+  );
+
+  return (
+    <Popover
+      open={showDropdown && filtered.length > 0}
+      onOpenChange={(open) => {
+        if (!open) setShowDropdown(false);
+      }}
+    >
+      {label ? (
+        <FormField label={label} id={textareaId}>
+          {field}
+        </FormField>
+      ) : (
+        field
+      )}
+      <PopoverContent
+        align="start"
+        className="w-64 p-0"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(e) => {
+          if (textareaRef.current?.contains(e.target as HTMLElement)) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <VariableListWithSearch
+          variables={filtered}
+          onSelect={insertVariable}
+        />
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/frontend/src/agents/workflow/nodes/BaseNode.tsx b/frontend/src/agents/workflow/nodes/BaseNode.tsx
index a19346a5..e24ecf3f 100644
--- a/frontend/src/agents/workflow/nodes/BaseNode.tsx
+++ b/frontend/src/agents/workflow/nodes/BaseNode.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
 import { Handle, Position } from 'reactflow';
 
+import { cn } from '@/lib/utils';
+
 interface BaseNodeProps {
   title: string;
   children?: ReactNode;
@@ -23,60 +25,68 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
 }) => {
   let bgColor = 'bg-card';
   let borderColor = 'border-border';
-  let iconBg = 'bg-gray-100 dark:bg-gray-800';
-  let iconColor = 'text-gray-600 dark:text-gray-400';
+  let iconBg = 'bg-muted';
+  let iconColor = 'text-muted-foreground';
 
   if (selected) {
     borderColor = 'border-primary ring-2 ring-primary';
   }
 
   if (type === 'start') {
-    iconBg = 'bg-green-100 dark:bg-green-900/30';
-    iconColor = 'text-green-600 dark:text-green-400';
+    iconBg = 'bg-success/10';
+    iconColor = 'text-success';
   } else if (type === 'end') {
-    iconBg = 'bg-red-100 dark:bg-red-900/30';
-    iconColor = 'text-red-600 dark:text-red-400';
+    iconBg = 'bg-destructive/10';
+    iconColor = 'text-destructive';
   } else if (type === 'state') {
-    iconBg = 'bg-gray-100 dark:bg-gray-800';
-    iconColor = 'text-gray-600 dark:text-gray-400';
+    iconBg = 'bg-muted';
+    iconColor = 'text-muted-foreground';
   } else if (type === 'condition') {
-    iconBg = 'bg-orange-100 dark:bg-orange-900/30';
-    iconColor = 'text-orange-600 dark:text-orange-400';
+    iconBg = 'bg-warning/10';
+    iconColor = 'text-warning';
   } else if (type === 'code') {
-    iconBg = 'bg-indigo-100 dark:bg-indigo-900/30';
-    iconColor = 'text-indigo-600 dark:text-indigo-400';
+    iconBg = 'bg-info/10';
+    iconColor = 'text-info';
   }
 
   return (
     <div
-      className={`rounded-full border ${bgColor} ${borderColor} shadow-md transition-all hover:shadow-lg ${
-        selected ? 'scale-105' : ''
-      } max-w-[250px] min-w-[180px]`}
+      className={cn(
+        'rounded-full border shadow-md transition hover:shadow-lg',
+        bgColor,
+        borderColor,
+        selected && 'scale-105',
+        'max-w-[250px] min-w-[180px]',
+      )}
     >
       {handles.target && (
         <Handle
           type="target"
           position={Position.Left}
           isConnectable={true}
-          className="hover:bg-primary/90! border-card! -left-1! h-3! w-3! rounded-full! border-2! bg-gray-400! transition-colors!"
+          className="hover:bg-primary/90! border-card! bg-muted-foreground! -left-1! h-3! w-3! rounded-full! border-2! transition-colors!"
         />
       )}
 
       <div className="flex items-center gap-3 px-4 py-3">
         <div
-          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${iconBg} ${iconColor}`}
+          className={cn(
+            'flex size-10 shrink-0 items-center justify-center rounded-full',
+            iconBg,
+            iconColor,
+          )}
         >
           {icon}
         </div>
         <div className="min-w-0 flex-1 pr-3">
           <div
-            className="truncate text-sm font-semibold text-gray-900 dark:text-white"
+            className="text-foreground truncate text-sm font-semibold"
             title={title}
           >
             {title}
           </div>
           {children && (
-            <div className="mt-1 truncate text-xs text-gray-600 dark:text-gray-400">
+            <div className="text-muted-foreground mt-1 truncate text-xs">
               {children}
             </div>
           )}
@@ -88,7 +98,7 @@ export const BaseNode: React.FC<BaseNodeProps> = ({
           type="source"
           position={Position.Right}
           isConnectable={true}
-          className="hover:bg-primary/90! border-card! -right-1! h-3! w-3! rounded-full! border-2! bg-gray-400! transition-colors!"
+          className="hover:bg-primary/90! border-card! bg-muted-foreground! -right-1! h-3! w-3! rounded-full! border-2! transition-colors!"
         />
       )}
     </div>
diff --git a/frontend/src/agents/workflow/nodes/CodeNode.tsx b/frontend/src/agents/workflow/nodes/CodeNode.tsx
index c8559ed9..edb4731f 100644
--- a/frontend/src/agents/workflow/nodes/CodeNode.tsx
+++ b/frontend/src/agents/workflow/nodes/CodeNode.tsx
@@ -1,10 +1,14 @@
-import { Code2 } from 'lucide-react';
+import { CodeXml } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeProps } from 'reactflow';
 
 import { CodeNodeConfig } from '../../types/workflow';
 import { BaseNode } from './BaseNode';
 
+// Variable names are the user's own text: React escapes on render.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
 type CodeNodeData = {
   title?: string;
   label?: string;
@@ -12,7 +16,8 @@ type CodeNodeData = {
 };
 
 const CodeNode = ({ data, selected }: NodeProps<CodeNodeData>) => {
-  const title = data.title || data.label || 'Code';
+  const { t } = useTranslation();
+  const title = data.title || data.label || t('agents.workflow.nodes.code');
   const config = data.config || {};
   const code = (config.code || '').trim();
   const firstLine = code.split('\n').find((line) => line.trim() !== '') || '';
@@ -24,28 +29,34 @@ const CodeNode = ({ data, selected }: NodeProps<CodeNodeData>) => {
       title={title}
       type="code"
       selected={selected}
-      icon={<Code2 size={16} />}
+      icon={<CodeXml className="size-4" />}
       handles={{ source: true, target: true }}
     >
       <div className="flex flex-col gap-1">
         {codeHint ? (
           <div
-            className="truncate font-mono text-xs text-gray-500 dark:text-gray-400"
+            className="text-muted-foreground truncate font-mono text-xs"
             title={code}
           >
             {codeHint}
           </div>
         ) : (
-          <div className="text-xs text-gray-500 dark:text-gray-400">
-            No code yet
+          <div className="text-muted-foreground text-xs">
+            {t('agents.workflow.nodes.noCode')}
           </div>
         )}
         {config.output_variable && (
           <div
-            className="truncate text-xs text-gray-500 dark:text-gray-400"
-            title={`Output: ${config.output_variable}`}
+            className="text-muted-foreground truncate text-xs"
+            title={t('agents.workflow.nodes.output', {
+              ...NO_ESCAPE,
+              variable: config.output_variable,
+            })}
           >
-            Output: {config.output_variable}
+            {t('agents.workflow.nodes.output', {
+              ...NO_ESCAPE,
+              variable: config.output_variable,
+            })}
           </div>
         )}
       </div>
diff --git a/frontend/src/agents/workflow/nodes/ConditionNode.tsx b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
index e49f33e7..cdbabeac 100644
--- a/frontend/src/agents/workflow/nodes/ConditionNode.tsx
+++ b/frontend/src/agents/workflow/nodes/ConditionNode.tsx
@@ -1,7 +1,10 @@
 import { GitBranch } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Handle, NodeProps, Position } from 'reactflow';
 
+import { cn } from '@/lib/utils';
+
 import { ConditionCase } from '../../types/workflow';
 
 type ConditionNodeData = {
@@ -29,40 +32,45 @@ function getHandleTop(index: number, total: number): string {
 }
 
 const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
-  const title = data.title || data.label || 'If / Else';
+  const { t } = useTranslation();
+  const title =
+    data.title || data.label || t('agents.workflow.nodes.condition');
   const cases = data.config?.cases || [];
   const totalOutputs = cases.length + 1;
   const height = getNodeHeight(cases.length);
 
   return (
     <div
-      className={`bg-card relative rounded-2xl border shadow-md transition-all ${
+      className={cn(
+        'bg-card relative rounded-2xl border shadow-md transition',
         selected
-          ? 'border-primary dark:ring-primary scale-105 ring-2 ring-purple-300'
-          : 'border-border hover:shadow-lg'
-      }`}
+          ? 'border-primary ring-primary scale-105 ring-2'
+          : 'border-border hover:shadow-lg',
+      )}
       style={{ minWidth: 180, maxWidth: 220, height }}
     >
       <Handle
         type="target"
         position={Position.Left}
         isConnectable
-        className="hover:bg-primary/90! border-card! top-1/2! -left-1! h-3! w-3! rounded-full! border-2! bg-gray-400! transition-colors!"
+        className="hover:bg-primary/90! border-card! bg-muted-foreground! top-1/2! -left-1! h-3! w-3! rounded-full! border-2! transition-colors!"
       />
 
       <div className="flex items-center gap-3 px-3 py-2">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400">
-          <GitBranch size={14} />
+        <div className="bg-warning/10 text-warning flex size-9 shrink-0 items-center justify-center rounded-full">
+          <GitBranch className="size-3.5" />
         </div>
         <div className="min-w-0 flex-1 pr-2">
           <div
-            className="truncate text-sm font-semibold text-gray-900 dark:text-white"
+            className="text-foreground truncate text-sm font-semibold"
             title={title}
           >
             {title}
           </div>
-          <div className="text-xs text-gray-500 uppercase">
-            {data.config?.mode || 'simple'}
+          <div className="text-muted-foreground text-xs">
+            {data.config?.mode === 'advanced'
+              ? t('agents.workflow.nodes.modeAdvanced')
+              : t('agents.workflow.nodes.modeSimple')}
           </div>
         </div>
       </div>
@@ -74,12 +82,14 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
             className="flex items-center gap-1"
             style={{ height: ROW_HEIGHT }}
           >
-            <span className="shrink-0 text-xs font-medium text-orange-600 dark:text-orange-400">
-              {i === 0 ? 'If' : 'Else if'}
+            <span className="text-warning shrink-0 text-xs font-medium">
+              {i === 0
+                ? t('agents.workflow.nodes.if')
+                : t('agents.workflow.nodes.elseIf')}
             </span>
             {c.name && (
               <span
-                className="truncate text-xs text-gray-600 dark:text-gray-400"
+                className="text-muted-foreground truncate text-xs"
                 title={c.name}
               >
                 {c.name}
@@ -88,7 +98,9 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
           </div>
         ))}
         <div className="flex items-center gap-1" style={{ height: ROW_HEIGHT }}>
-          <span className="text-xs font-medium text-gray-500">Else</span>
+          <span className="text-muted-foreground text-xs font-medium">
+            {t('agents.workflow.nodes.else')}
+          </span>
         </div>
       </div>
 
@@ -100,7 +112,7 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
           id={c.sourceHandle}
           isConnectable
           style={{ top: getHandleTop(i, totalOutputs) }}
-          className="hover:bg-primary/90! dark:border-border! -right-1! h-3! w-3! rounded-full! border-2! border-white! bg-orange-400! transition-colors"
+          className="hover:bg-primary/90! border-card! bg-warning! -right-1! h-3! w-3! rounded-full! border-2! transition-colors"
         />
       ))}
       <Handle
@@ -109,7 +121,7 @@ const ConditionNode = ({ data, selected }: NodeProps<ConditionNodeData>) => {
         id="else"
         isConnectable
         style={{ top: getHandleTop(cases.length, totalOutputs) }}
-        className="hover:bg-primary/90! border-card! -right-1! h-3! w-3! rounded-full! border-2! bg-gray-400! transition-colors!"
+        className="hover:bg-primary/90! border-card! bg-muted-foreground! -right-1! h-3! w-3! rounded-full! border-2! transition-colors!"
       />
     </div>
   );
diff --git a/frontend/src/agents/workflow/nodes/SetStateNode.tsx b/frontend/src/agents/workflow/nodes/SetStateNode.tsx
index e9514a92..a5833566 100644
--- a/frontend/src/agents/workflow/nodes/SetStateNode.tsx
+++ b/frontend/src/agents/workflow/nodes/SetStateNode.tsx
@@ -1,10 +1,14 @@
 import { Database } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { NodeProps } from 'reactflow';
 
 import { StateOperationConfig } from '../../types/workflow';
 import { BaseNode } from './BaseNode';
 
+// Variable names are the user's own text: React escapes on render.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
 type SetStateNodeData = {
   label?: string;
   title?: string;
@@ -16,7 +20,8 @@ type SetStateNodeData = {
 };
 
 const SetStateNode = ({ data, selected }: NodeProps<SetStateNodeData>) => {
-  const title = data.title || data.label || 'Set State';
+  const { t } = useTranslation();
+  const title = data.title || data.label || t('agents.workflow.nodes.setState');
   const operations = data.config?.operations || [];
   const hasLegacy = !operations.length && data.variable;
 
@@ -25,29 +30,39 @@ const SetStateNode = ({ data, selected }: NodeProps<SetStateNodeData>) => {
       title={title}
       type="state"
       selected={selected}
-      icon={<Database size={16} />}
+      icon={<Database className="size-4" />}
       handles={{ source: true, target: true }}
     >
       <div className="flex flex-col gap-1">
         {operations.length > 0 ? (
           <div
-            className="truncate text-xs text-gray-500"
-            title={`${operations.length} operation(s)`}
+            className="text-muted-foreground truncate text-xs"
+            title={t('agents.workflow.nodes.operationCount', {
+              count: operations.length,
+            })}
           >
-            {operations.length} variable{operations.length !== 1 ? 's' : ''}
+            {t('agents.workflow.nodes.variableCount', {
+              count: operations.length,
+            })}
           </div>
         ) : hasLegacy ? (
           <>
             <div
-              className="truncate text-xs text-gray-500 uppercase"
-              title={`Variable: ${data.variable}`}
+              className="text-muted-foreground truncate text-xs"
+              title={t('agents.workflow.nodes.variableTitle', {
+                ...NO_ESCAPE,
+                name: data.variable,
+              })}
             >
               {data.variable}
             </div>
             {data.value && (
               <div
-                className="truncate text-xs text-blue-600 dark:text-blue-400"
-                title={`Value: ${data.value}`}
+                className="text-info truncate text-xs"
+                title={t('agents.workflow.nodes.valueTitle', {
+                  ...NO_ESCAPE,
+                  value: data.value,
+                })}
               >
                 {data.value}
               </div>
diff --git a/frontend/src/agents/workflow/nodes/index.tsx b/frontend/src/agents/workflow/nodes/index.tsx
index 4a117350..d1a8c10c 100644
--- a/frontend/src/agents/workflow/nodes/index.tsx
+++ b/frontend/src/agents/workflow/nodes/index.tsx
@@ -1,25 +1,34 @@
 import { Bot, Flag, Play, StickyNote } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '@/lib/utils';
 
 import { BaseNode } from './BaseNode';
 import CodeNode from './CodeNode';
 import ConditionNode from './ConditionNode';
 import SetStateNode from './SetStateNode';
 
+// Variable names are the user's own text: React escapes on render.
+const NO_ESCAPE = { interpolation: { escapeValue: false } } as const;
+
 export const StartNode = memo(function StartNode({
   selected,
 }: {
   selected: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <BaseNode
-      title="Start"
+      title={t('agents.workflow.nodes.start')}
       type="start"
       selected={selected}
       handles={{ target: false, source: true }}
-      icon={<Play size={16} />}
+      icon={<Play className="size-4" />}
     >
-      <div className="text-xs text-gray-500">Entry point of the workflow</div>
+      <div className="text-muted-foreground text-xs">
+        {t('agents.workflow.nodes.startHint')}
+      </div>
     </BaseNode>
   );
 });
@@ -29,15 +38,18 @@ export const EndNode = memo(function EndNode({
 }: {
   selected: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <BaseNode
-      title="End"
+      title={t('agents.workflow.nodes.end')}
       type="end"
       selected={selected}
       handles={{ target: true, source: false }}
-      icon={<Flag size={16} />}
+      icon={<Flag className="size-4" />}
     >
-      <div className="text-xs text-gray-500">Workflow completion</div>
+      <div className="text-muted-foreground text-xs">
+        {t('agents.workflow.nodes.endHint')}
+      </div>
     </BaseNode>
   );
 });
@@ -58,19 +70,20 @@ export const AgentNode = memo(function AgentNode({
   };
   selected: boolean;
 }) {
-  const title = data.title || data.label || 'Agent';
+  const { t } = useTranslation();
+  const title = data.title || data.label || t('agents.workflow.nodes.agent');
   const config = data.config || {};
   return (
     <BaseNode
       title={title}
       type="agent"
       selected={selected}
-      icon={<Bot size={16} />}
+      icon={<Bot className="size-4" />}
     >
       <div className="flex flex-col gap-1">
         {config.agent_type && (
           <div
-            className="truncate text-xs text-gray-500 uppercase"
+            className="text-muted-foreground truncate text-xs"
             title={config.agent_type}
           >
             {config.agent_type}
@@ -78,7 +91,7 @@ export const AgentNode = memo(function AgentNode({
         )}
         {config.model_id && (
           <div
-            className="text-primary dark:text-primary truncate text-xs"
+            className="text-primary truncate text-xs"
             title={config.model_id}
           >
             {config.model_id}
@@ -86,10 +99,16 @@ export const AgentNode = memo(function AgentNode({
         )}
         {config.output_variable && (
           <div
-            className="truncate text-xs text-gray-500 dark:text-gray-400"
-            title={`Output: ${config.output_variable}`}
+            className="text-muted-foreground truncate text-xs"
+            title={t('agents.workflow.nodes.output', {
+              ...NO_ESCAPE,
+              variable: config.output_variable,
+            })}
           >
-            Output: {config.output_variable}
+            {t('agents.workflow.nodes.output', {
+              ...NO_ESCAPE,
+              variable: config.output_variable,
+            })}
           </div>
         )}
       </div>
@@ -104,7 +123,8 @@ export const NoteNode = memo(function NoteNode({
   data: { title?: string; label?: string; content?: string };
   selected: boolean;
 }) {
-  const title = data.title || data.label || 'Note';
+  const { t } = useTranslation();
+  const title = data.title || data.label || t('agents.workflow.nodes.note');
   const maxContentLength = 120;
   const displayContent =
     data.content && data.content.length > maxContentLength
@@ -113,26 +133,29 @@ export const NoteNode = memo(function NoteNode({
 
   return (
     <div
-      className={`max-w-[250px] rounded-3xl border border-yellow-200 bg-yellow-50 px-5 py-3 shadow-md transition-all dark:border-yellow-800 dark:bg-yellow-900/20 ${
+      className={cn(
+        // Opaque tint: the card colour underneath, the warning wash painted
+        // over it as a flat gradient, so the canvas grid doesn't show through.
+        'bg-card from-warning/10 to-warning/10 max-w-[250px] rounded-3xl border bg-linear-to-b px-5 py-3 shadow-md transition',
         selected
-          ? 'scale-105 ring-2 ring-yellow-300 dark:ring-yellow-700'
-          : 'hover:shadow-lg'
-      }`}
+          ? 'border-warning ring-warning scale-105 ring-2'
+          : 'border-warning/50 hover:shadow-lg',
+      )}
     >
       <div className="flex items-start gap-3">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-800/30 dark:text-yellow-500">
-          <StickyNote size={18} />
+        <div className="bg-warning/15 text-warning flex size-10 shrink-0 items-center justify-center rounded-full">
+          <StickyNote className="size-4.5" />
         </div>
         <div className="min-w-0 flex-1">
           <div
-            className="truncate text-sm font-semibold text-yellow-800 dark:text-yellow-300"
+            className="text-foreground truncate text-sm font-semibold"
             title={title}
           >
             {title}
           </div>
           {displayContent && (
             <div
-              className="mt-1 text-xs wrap-break-word text-yellow-700 italic dark:text-yellow-400"
+              className="text-muted-foreground mt-1 text-xs wrap-break-word italic"
               title={data.content}
             >
               {displayContent}
diff --git a/frontend/src/agents/workflow/workflowPreviewSlice.ts b/frontend/src/agents/workflow/workflowPreviewSlice.ts
index b2aa88d9..d766f19e 100644
--- a/frontend/src/agents/workflow/workflowPreviewSlice.ts
+++ b/frontend/src/agents/workflow/workflowPreviewSlice.ts
@@ -76,9 +76,9 @@ export function collectCompletedAttachmentIds(
     .map((att) => att.id);
 }
 
-/** User-facing message shown when a Preview send is blocked. */
+/** Locale key of the message shown when a Preview send is blocked. */
 export const UNSAVED_DRAFT_ATTACHMENTS_MESSAGE =
-  'Save the workflow before attaching documents in Preview.';
+  'agents.workflow.preview.unsavedDraftAttachments';
 
 /**
  * Reason a Preview send must be blocked, or null when it may proceed. An
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 21ebf123..47daa009 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,8 +1,7 @@
 import { envVar } from '@/env';
 import { withThrottle, type FetchLike } from './throttle';
 
-export const baseURL =
-  envVar('VITE_API_HOST') || 'https://docsapi.arc53.com';
+export const baseURL = envVar('VITE_API_HOST') || 'https://docsapi.arc53.com';
 
 const getHeaders = (
   token: string | null,
diff --git a/frontend/src/assets/DragFileUpload.svg b/frontend/src/assets/DragFileUpload.svg
deleted file mode 100644
index 1b41d193..00000000
--- a/frontend/src/assets/DragFileUpload.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.8788 9.87836C34.4413 9.31595 35.2043 9 35.9998 9C36.7952 9 37.5582 9.31595 38.1208 9.87836L50.1208 21.8784C50.6672 22.4442 50.9696 23.202 50.9628 23.9886C50.9559 24.7752 50.6404 25.5276 50.0842 26.0838C49.528 26.64 48.7755 26.9555 47.989 26.9624C47.2024 26.9692 46.4446 26.6668 45.8788 26.1204L38.9998 19.2414V47.9994C38.9998 48.795 38.6837 49.5581 38.1211 50.1207C37.5585 50.6833 36.7954 50.9994 35.9998 50.9994C35.2041 50.9994 34.441 50.6833 33.8784 50.1207C33.3158 49.5581 32.9998 48.795 32.9998 47.9994V19.2414L26.1208 26.1204C25.555 26.6668 24.7971 26.9692 24.0106 26.9624C23.224 26.9555 22.4715 26.64 21.9153 26.0838C21.3591 25.5276 21.0436 24.7752 21.0367 23.9886C21.0299 23.202 21.3323 22.4442 21.8788 21.8784L33.8788 9.87836Z" fill="#313131"/>
-<path d="M18 51C18 50.2044 17.6839 49.4413 17.1213 48.8787C16.5587 48.3161 15.7956 48 15 48C14.2044 48 13.4413 48.3161 12.8787 48.8787C12.3161 49.4413 12 50.2044 12 51V52.8C12 58.446 16.554 63 22.2 63H49.8C55.446 63 60 58.446 60 52.8V51C60 50.2044 59.6839 49.4413 59.1213 48.8787C58.5587 48.3161 57.7957 48 57 48C56.2043 48 55.4413 48.3161 54.8787 48.8787C54.3161 49.4413 54 50.2044 54 51V52.8C54 55.134 52.134 57 49.8 57H22.2C19.866 57 18 55.134 18 52.8V51Z" fill="#313131"/>
-</svg>
diff --git a/frontend/src/assets/alert.svg b/frontend/src/assets/alert.svg
deleted file mode 100644
index 07721b57..00000000
--- a/frontend/src/assets/alert.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#ECECF1"/>
-</svg>
diff --git a/frontend/src/assets/arrow-down.svg b/frontend/src/assets/arrow-down.svg
deleted file mode 100644
index a4781b89..00000000
--- a/frontend/src/assets/arrow-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
-  <path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/arrow-full-right.svg b/frontend/src/assets/arrow-full-right.svg
deleted file mode 100644
index d6004b4a..00000000
--- a/frontend/src/assets/arrow-full-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033ZM0.5 6.5V7.25H12.5V6.5V5.75H0.5V6.5Z" fill="white"/>
-</svg>
diff --git a/frontend/src/assets/arrow-left.svg b/frontend/src/assets/arrow-left.svg
deleted file mode 100644
index 8c7c7972..00000000
--- a/frontend/src/assets/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.3183 20.8523C12.4198 20.9597 12.4991 21.0861 12.5518 21.2242C12.6044 21.3622 12.6294 21.5093 12.6252 21.657C12.621 21.8047 12.5878 21.9502 12.5274 22.0851C12.467 22.2199 12.3807 22.3416 12.2733 22.4431C12.1659 22.5446 12.0395 22.6239 11.9014 22.6766C11.7634 22.7293 11.6163 22.7542 11.4686 22.75C11.3208 22.7459 11.1754 22.7126 11.0405 22.6522C10.9057 22.5919 10.784 22.5055 10.6825 22.3981L1.12001 12.2731C0.922533 12.0642 0.812501 11.7877 0.812501 11.5002C0.812501 11.2128 0.922533 10.9362 1.12001 10.7273L10.6825 0.601207C10.7833 0.49145 10.905 0.40282 11.0403 0.340468C11.1757 0.278115 11.3221 0.243281 11.4711 0.23799C11.62 0.232697 11.7685 0.257054 11.908 0.309644C12.0474 0.362231 12.175 0.442004 12.2834 0.544328C12.3917 0.646653 12.4787 0.769488 12.5392 0.9057C12.5997 1.04191 12.6325 1.18878 12.6357 1.33779C12.639 1.48679 12.6126 1.63495 12.5581 1.77367C12.5036 1.91238 12.4221 2.03889 12.3183 2.14583L3.48476 11.5002L12.3183 20.8523Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/arrow-right.svg b/frontend/src/assets/arrow-right.svg
deleted file mode 100644
index a36d6e8f..00000000
--- a/frontend/src/assets/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="23" viewBox="0 0 13 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.681741 20.8523C0.580245 20.9597 0.500899 21.0861 0.448232 21.2242C0.395564 21.3622 0.370607 21.5093 0.374785 21.657C0.378964 21.8047 0.412197 21.9502 0.472586 22.0851C0.532974 22.2199 0.619336 22.3416 0.726741 22.4431C0.834146 22.5446 0.96049 22.6239 1.09856 22.6766C1.23663 22.7293 1.38372 22.7542 1.53144 22.75C1.67915 22.7459 1.8246 22.7126 1.95947 22.6522C2.09434 22.5919 2.216 22.5055 2.31749 22.3981L11.88 12.2731C12.0775 12.0642 12.1875 11.7877 12.1875 11.5002C12.1875 11.2128 12.0775 10.9362 11.88 10.7273L2.31749 0.601207C2.21666 0.49145 2.09503 0.40282 1.95967 0.340468C1.8243 0.278115 1.67789 0.243281 1.52895 0.23799C1.38 0.232697 1.23149 0.257054 1.09204 0.309644C0.95259 0.362231 0.824978 0.442004 0.716618 0.544328C0.608256 0.646653 0.521307 0.769488 0.46082 0.9057C0.400333 1.04191 0.367515 1.18878 0.364269 1.33779C0.361025 1.48679 0.387418 1.63495 0.441917 1.77367C0.496417 1.91238 0.577936 2.03889 0.681739 2.14583L9.51524 11.5002L0.681741 20.8523Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/book.svg b/frontend/src/assets/book.svg
deleted file mode 100644
index 596b1114..00000000
--- a/frontend/src/assets/book.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.2857 14H2.57143C1.15179 14 0 12.8242 0 11.375V2.625C0 1.17578 1.15179 0 2.57143 0H10.7143C11.4241 0 12 0.587891 12 1.3125V9.1875C12 9.75898 11.6411 10.2457 11.1429 10.4262V12.25C11.617 12.25 12 12.641 12 13.125C12 13.609 11.617 14 11.1429 14H10.2857ZM2.57143 10.5C2.09732 10.5 1.71429 10.891 1.71429 11.375C1.71429 11.859 2.09732 12.25 2.57143 12.25H9.42857V10.5H2.57143ZM3.42857 4.15625C3.42857 4.51992 3.71518 4.8125 4.07143 4.8125H8.78571C9.14196 4.8125 9.42857 4.51992 9.42857 4.15625C9.42857 3.79258 9.14196 3.5 8.78571 3.5H4.07143C3.71518 3.5 3.42857 3.79258 3.42857 4.15625ZM4.07143 6.125C3.71518 6.125 3.42857 6.41758 3.42857 6.78125C3.42857 7.14492 3.71518 7.4375 4.07143 7.4375H8.78571C9.14196 7.4375 9.42857 7.14492 9.42857 6.78125C9.42857 6.41758 9.14196 6.125 8.78571 6.125H4.07143Z" fill="#6A4DF4"/>
-</svg>
diff --git a/frontend/src/assets/calendar.svg b/frontend/src/assets/calendar.svg
deleted file mode 100644
index d0f67173..00000000
--- a/frontend/src/assets/calendar.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 7.5C6 7.36739 5.94732 7.24021 5.85355 7.14645C5.75979 7.05268 5.63261 7 5.5 7H4.5C4.36739 7 4.24021 7.05268 4.14645 7.14645C4.05268 7.24021 4 7.36739 4 7.5V8.5C4 8.63261 4.05268 8.75979 4.14645 8.85355C4.24021 8.94732 4.36739 9 4.5 9H5.5C5.63261 9 5.75979 8.94732 5.85355 8.85355C5.94732 8.75979 6 8.63261 6 8.5V7.5ZM6 10.5C6 10.3674 5.94732 10.2402 5.85355 10.1464C5.75979 10.0527 5.63261 10 5.5 10H4.5C4.36739 10 4.24021 10.0527 4.14645 10.1464C4.05268 10.2402 4 10.3674 4 10.5V11.5C4 11.6326 4.05268 11.7598 4.14645 11.8536C4.24021 11.9473 4.36739 12 4.5 12H5.5C5.63261 12 5.75979 11.9473 5.85355 11.8536C5.94732 11.7598 6 11.6326 6 11.5V10.5ZM7.5 7H8.5C8.63261 7 8.75979 7.05268 8.85355 7.14645C8.94732 7.24021 9 7.36739 9 7.5V8.5C9 8.63261 8.94732 8.75979 8.85355 8.85355C8.75979 8.94732 8.63261 9 8.5 9H7.5C7.36739 9 7.24021 8.94732 7.14645 8.85355C7.05268 8.75979 7 8.63261 7 8.5V7.5C7 7.36739 7.05268 7.24021 7.14645 7.14645C7.24021 7.05268 7.36739 7 7.5 7ZM8.5 10H7.5C7.36739 10 7.24021 10.0527 7.14645 10.1464C7.05268 10.2402 7 10.3674 7 10.5V11.5C7 11.6326 7.05268 11.7598 7.14645 11.8536C7.24021 11.9473 7.36739 12 7.5 12H8.5C8.63261 12 8.75979 11.9473 8.85355 11.8536C8.94732 11.7598 9 11.6326 9 11.5V10.5C9 10.3674 8.94732 10.2402 8.85355 10.1464C8.75979 10.0527 8.63261 10 8.5 10ZM10 7.5C10 7.36739 10.0527 7.24021 10.1464 7.14645C10.2402 7.05268 10.3674 7 10.5 7H11.5C11.6326 7 11.7598 7.05268 11.8536 7.14645C11.9473 7.24021 12 7.36739 12 7.5V8.5C12 8.63261 11.9473 8.75979 11.8536 8.85355C11.7598 8.94732 11.6326 9 11.5 9H10.5C10.3674 9 10.2402 8.94732 10.1464 8.85355C10.0527 8.75979 10 8.63261 10 8.5V7.5Z" fill="#848484"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 0C4.63261 0 4.75979 0.0526784 4.85355 0.146447C4.94732 0.240215 5 0.367392 5 0.5V1H11V0.5C11 0.367392 11.0527 0.240215 11.1464 0.146447C11.2402 0.0526784 11.3674 0 11.5 0C11.6326 0 11.7598 0.0526784 11.8536 0.146447C11.9473 0.240215 12 0.367392 12 0.5V1C13.66 1 15 2.34 15 4V12C15 13.66 13.66 15 12 15H4C2.34 15 1 13.66 1 12V4C1 2.34 2.34 1 4 1V0.5C4 0.367392 4.05268 0.240215 4.14645 0.146447C4.24021 0.0526784 4.36739 0 4.5 0ZM14 4V5H2V4C2 2.9 2.895 2 4 2V2.5C4 2.63261 4.05268 2.75979 4.14645 2.85355C4.24021 2.94732 4.36739 3 4.5 3C4.63261 3 4.75979 2.94732 4.85355 2.85355C4.94732 2.75979 5 2.63261 5 2.5V2H11V2.5C11 2.63261 11.0527 2.75979 11.1464 2.85355C11.2402 2.94732 11.3674 3 11.5 3C11.6326 3 11.7598 2.94732 11.8536 2.85355C11.9473 2.75979 12 2.63261 12 2.5V2C13.1 2 14 2.895 14 4ZM2 12V6H14V12C14 13.1 13.105 14 12 14H4C2.9 14 2 13.105 2 12Z" fill="#848484"/>
-</svg>
diff --git a/frontend/src/assets/check-circle-filled.svg b/frontend/src/assets/check-circle-filled.svg
deleted file mode 100644
index d67782aa..00000000
--- a/frontend/src/assets/check-circle-filled.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2.5C17.523 2.5 22 6.977 22 12.5C22 18.023 17.523 22.5 12 22.5C6.477 22.5 2 18.023 2 12.5C2 6.977 6.477 2.5 12 2.5ZM15.22 9.47L10.75 13.94L8.78 11.97C8.63783 11.8375 8.44978 11.7654 8.25548 11.7688C8.06118 11.7723 7.87579 11.851 7.73838 11.9884C7.60097 12.1258 7.52225 12.3112 7.51883 12.5055C7.5154 12.6998 7.58752 12.8878 7.72 13.03L10.22 15.53C10.3606 15.6705 10.5512 15.7493 10.75 15.7493C10.9488 15.7493 11.1394 15.6705 11.28 15.53L16.28 10.53C16.3537 10.4613 16.4128 10.3785 16.4538 10.2865C16.4948 10.1945 16.5168 10.0952 16.5186 9.99452C16.5204 9.89382 16.5018 9.79379 16.4641 9.7004C16.4264 9.60701 16.3703 9.52218 16.299 9.45096C16.2278 9.37974 16.143 9.3236 16.0496 9.28588C15.9562 9.24816 15.8562 9.22963 15.7555 9.23141C15.6548 9.23318 15.5555 9.25523 15.4635 9.29622C15.3715 9.33721 15.2887 9.39631 15.22 9.47Z" fill="#0C9D35"/>
-</svg>
diff --git a/frontend/src/assets/checkMark2.svg b/frontend/src/assets/checkMark2.svg
deleted file mode 100644
index 9ed02cbd..00000000
--- a/frontend/src/assets/checkMark2.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none">
-  <path d="M4.95919 10.1906C4.84318 10.1902 4.72847 10.166 4.62222 10.1194C4.51596 10.0729 4.42041 10.0049 4.34152 9.91985L0.229353 5.54538C0.0756344 5.38157 -0.00671208 5.1634 0.000428491 4.93886C0.00756906 4.71433 0.103612 4.50183 0.267428 4.34812C0.431245 4.1944 0.649417 4.11205 0.873948 4.11919C1.09848 4.12633 1.31098 4.22238 1.4647 4.38619L4.95073 8.10068L12.0666 0.316329C12.1389 0.226405 12.2287 0.152193 12.3306 0.0982513C12.4326 0.0443098 12.5445 0.0117775 12.6594 0.00265255C12.7744 -0.00647237 12.89 0.00800286 12.9992 0.045189C13.1084 0.082375 13.2088 0.141487 13.2943 0.218894C13.3798 0.296301 13.4485 0.390369 13.4964 0.49532C13.5442 0.600272 13.57 0.713891 13.5723 0.829198C13.5746 0.944506 13.5534 1.05907 13.5098 1.16585C13.4662 1.27263 13.4012 1.36937 13.3189 1.45014L5.58533 9.91139C5.50718 9.998 5.41197 10.0675 5.30567 10.1156C5.19938 10.1636 5.0843 10.1892 4.96766 10.1906H4.95919Z" fill="#747474"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg
deleted file mode 100644
index 3923a50a..00000000
--- a/frontend/src/assets/checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16px" height="16px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#11ee1c" stroke="#11ee1c" stroke-width="83.96799999999999"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z" fill="#0C9D35"></path></g></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/chevron-down.svg b/frontend/src/assets/chevron-down.svg
deleted file mode 100644
index b2605251..00000000
--- a/frontend/src/assets/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/chevron-right.svg b/frontend/src/assets/chevron-right.svg
deleted file mode 100644
index 1463b6f7..00000000
--- a/frontend/src/assets/chevron-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.29154 4.88202L1.70154 0.29202C1.60896 0.199438 1.49905 0.125998 1.37808 0.0758932C1.25712 0.0257882 1.12747 -2.37536e-07 0.99654 -2.44235e-07C0.86561 -2.50934e-07 0.735961 0.0257882 0.614997 0.0758931C0.494033 0.125998 0.384122 0.199438 0.29154 0.29202C0.198958 0.384602 0.125519 0.494513 0.0754137 0.615477C0.0253086 0.736441 -0.00048069 0.86609 -0.000480695 0.99702C-0.000480701 1.12795 0.0253086 1.2576 0.0754136 1.37856C0.125519 1.49953 0.198958 1.60944 0.29154 1.70202L4.17154 5.59202L0.29154 9.47202C0.198958 9.5646 0.125518 9.67451 0.0754133 9.79548C0.0253082 9.91644 -0.000481091 10.0461 -0.000481097 10.177C-0.000481102 10.3079 0.0253082 10.4376 0.0754132 10.5586C0.125518 10.6795 0.198958 10.7894 0.29154 10.882C0.384121 10.9746 0.494032 11.048 0.614996 11.0981C0.73596 11.1483 0.865609 11.174 0.99654 11.174C1.12747 11.174 1.25712 11.1483 1.37808 11.0981C1.49905 11.048 1.60896 10.9746 1.70154 10.882L6.29154 6.29202C6.38424 6.19951 6.45779 6.08962 6.50797 5.96864C6.55815 5.84767 6.58398 5.71799 6.58398 5.58702C6.58398 5.45605 6.55815 5.32637 6.50797 5.2054C6.45779 5.08442 6.38424 4.97453 6.29154 4.88202Z" fill="#666666"/>
-</svg>
diff --git a/frontend/src/assets/circle-check.svg b/frontend/src/assets/circle-check.svg
deleted file mode 100644
index f0e8390d..00000000
--- a/frontend/src/assets/circle-check.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(34 197 94)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/circle-x.svg b/frontend/src/assets/circle-x.svg
deleted file mode 100644
index d6bdd2c3..00000000
--- a/frontend/src/assets/circle-x.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(239 68 68)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/clip.svg b/frontend/src/assets/clip.svg
deleted file mode 100644
index a778e06b..00000000
--- a/frontend/src/assets/clip.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.08485 4.07133L3.08485 9.20109C3.08485 9.49263 3.20066 9.77222 3.40681 9.97837C3.61295 10.1845 3.89255 10.3003 4.18408 10.3003C4.47562 10.3003 4.75521 10.1845 4.96136 9.97837C5.1675 9.77222 5.28332 9.49263 5.28332 9.20109L5.28332 3.70492C5.28332 3.12185 5.05169 2.56266 4.6394 2.15037C4.22711 1.73808 3.66792 1.50645 3.08485 1.50645C2.50178 1.50645 1.94259 1.73808 1.5303 2.15037C1.118 2.56266 0.88638 3.12185 0.88638 3.70492L0.886379 9.20109C0.886379 10.0757 1.23381 10.9145 1.85225 11.5329C2.47069 12.1514 3.30948 12.4988 4.18408 12.4988C5.05869 12.4988 5.89747 12.1514 6.51591 11.5329C7.13435 10.9145 7.48178 10.0757 7.48178 9.20109L7.48178 4.07133" stroke="#5D5D5D" stroke-width="1.03637" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/cloud.svg b/frontend/src/assets/cloud.svg
deleted file mode 100644
index 9a8727db..00000000
--- a/frontend/src/assets/cloud.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 16C2.53043 16 3.03914 16.2107 3.41421 16.5858C3.78929 16.9609 4 17.4696 4 18C4 18.5304 3.78929 19.0391 3.41421 19.4142C3.03914 19.7893 2.53043 20 2 20C1.46957 20 0.960859 19.7893 0.585786 19.4142C0.210714 19.0391 0 18.5304 0 18C0 17.4696 0.210714 16.9609 0.585786 16.5858C0.960859 16.2107 1.46957 16 2 16ZM7.5 13C8.16304 13 8.79893 13.2634 9.26777 13.7322C9.73661 14.2011 10 14.837 10 15.5C10 16.163 9.73661 16.7989 9.26777 17.2678C8.79893 17.7366 8.16304 18 7.5 18C6.83696 18 6.20107 17.7366 5.73223 17.2678C5.26339 16.7989 5 16.163 5 15.5C5 14.837 5.26339 14.2011 5.73223 13.7322C6.20107 13.2634 6.83696 13 7.5 13ZM10 0C11.272 0.000250351 12.5033 0.448355 13.4779 1.26572C14.4525 2.08308 15.1082 3.2175 15.33 4.47H15.412C16.4105 4.47 17.3682 4.86667 18.0743 5.57274C18.7803 6.27882 19.177 7.23646 19.177 8.235C19.177 9.23354 18.7803 10.1912 18.0743 10.8973C17.3682 11.6033 16.4105 12 15.412 12H4.588C3.58946 12 2.63182 11.6033 1.92574 10.8973C1.21967 10.1912 0.823 9.23354 0.823 8.235C0.823 7.23646 1.21967 6.27882 1.92574 5.57274C2.63182 4.86667 3.58946 4.47 4.588 4.47H4.67C4.89179 3.2175 5.54749 2.08308 6.52211 1.26572C7.49673 0.448355 8.72801 0.000250351 10 0Z" fill="url(#paint0_linear_6161_11984)"/>
-<defs>
-<linearGradient id="paint0_linear_6161_11984" x1="0" y1="10" x2="19.177" y2="10" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/assets/copy.svg b/frontend/src/assets/copy.svg
deleted file mode 100644
index 803f82d9..00000000
--- a/frontend/src/assets/copy.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="16" stroke-width="1.15" viewBox="0 0 14 17" >
-<path d="M13.8013 5.01282L8.80645 0.191795C8.67953 0.0691399 8.50734 0.000152609 8.32774 0H6.09677C5.43801 0 4.80623 0.252586 4.34041 0.702193C3.8746 1.1518 3.6129 1.7616 3.6129 2.39744V3.48718H2.48387C1.82511 3.48718 1.19332 3.73977 0.727509 4.18937C0.261693 4.63898 0 5.24878 0 5.88462V14.6026C0 15.2384 0.261693 15.8482 0.727509 16.2978C1.19332 16.7474 1.82511 17 2.48387 17H8.80645C9.46521 17 10.097 16.7474 10.5628 16.2978C11.0286 15.8482 11.2903 15.2384 11.2903 14.6026V13.5128H11.5161C12.1749 13.5128 12.8067 13.2602 13.2725 12.8106C13.7383 12.361 14 11.7512 14 11.1154V5.44872C13.9929 5.28447 13.9219 5.12884 13.8013 5.01282ZM9.03226 2.23179L11.6877 4.79487H9.03226V2.23179ZM9.93548 14.6026C9.93548 14.8916 9.81653 15.1688 9.6048 15.3731C9.39306 15.5775 9.10589 15.6923 8.80645 15.6923H2.48387C2.18443 15.6923 1.89726 15.5775 1.68552 15.3731C1.47379 15.1688 1.35484 14.8916 1.35484 14.6026V5.88462C1.35484 5.5956 1.47379 5.31842 1.68552 5.11405C1.89726 4.90968 2.18443 4.79487 2.48387 4.79487H3.6129V11.1154C3.6129 11.7512 3.8746 12.361 4.34041 12.8106C4.80623 13.2602 5.43801 13.5128 6.09677 13.5128H9.93548V14.6026ZM11.5161 12.2051H6.09677C5.79734 12.2051 5.51016 12.0903 5.29843 11.886C5.08669 11.6816 4.96774 11.4044 4.96774 11.1154V2.39744C4.96774 2.10842 5.08669 1.83124 5.29843 1.62687C5.51016 1.4225 5.79734 1.30769 6.09677 1.30769H7.67742V5.44872C7.67976 5.62143 7.75188 5.78643 7.87842 5.90856C8.00496 6.03069 8.1759 6.10031 8.35484 6.10256H12.6452V11.1154C12.6452 11.4044 12.5262 11.6816 12.3145 11.886C12.1027 12.0903 11.8156 12.2051 11.5161 12.2051Z" fill="#949494"/>
-</svg>
diff --git a/frontend/src/assets/cross.svg b/frontend/src/assets/cross.svg
deleted file mode 100644
index c82c8d87..00000000
--- a/frontend/src/assets/cross.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/disc.svg b/frontend/src/assets/disc.svg
deleted file mode 100644
index 3ea3d451..00000000
--- a/frontend/src/assets/disc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C8.8144 0 10.4902 0.332143 11.739 0.898571C12.362 1.18143 12.9108 1.53643 13.3119 1.96714C13.7172 2.4 14 2.94429 14 3.57143V6.42857C14 7.05571 13.7172 7.59929 13.3119 8.03286C12.9108 8.46357 12.3627 8.81857 11.739 9.10143C10.4902 9.66786 8.8144 10 7 10C5.1856 10 3.5098 9.66786 2.261 9.10143C1.638 8.81857 1.0892 8.46357 0.6881 8.03286C0.2828 7.6 0 7.05571 0 6.42857V3.57143C0 2.94429 0.2828 2.40071 0.6881 1.96714C1.0892 1.53643 1.6373 1.18143 2.261 0.898571C3.5098 0.332143 5.1856 0 7 0ZM12.6 5.77143C12.3375 5.94714 12.047 6.10429 11.739 6.24429C10.4902 6.81071 8.8144 7.14286 7 7.14286C5.1856 7.14286 3.5098 6.81071 2.261 6.24429C1.96243 6.10966 1.67456 5.95157 1.4 5.77143V6.42857C1.4 6.59071 1.47 6.79857 1.7024 7.04857C1.9383 7.30143 2.3128 7.56214 2.8294 7.79643C3.8612 8.26429 5.3354 8.57143 7 8.57143C8.6646 8.57143 10.1388 8.26429 11.1706 7.79643C11.6872 7.56214 12.0617 7.30143 12.2976 7.04857C12.5307 6.79857 12.6 6.59071 12.6 6.42857V5.77143ZM7 1.42857C5.3347 1.42857 3.8612 1.73571 2.8294 2.20357C2.3128 2.43786 1.9383 2.69857 1.7024 2.95143C1.4693 3.20143 1.4 3.40929 1.4 3.57143C1.4 3.73357 1.47 3.94143 1.7024 4.19143C1.9383 4.44429 2.3128 4.705 2.8294 4.93929C3.8612 5.40714 5.3354 5.71429 7 5.71429C8.6646 5.71429 10.1388 5.40714 11.1706 4.93929C11.6872 4.705 12.0617 4.44429 12.2976 4.19143C12.5307 3.94143 12.6 3.73357 12.6 3.57143C12.6 3.40929 12.53 3.20143 12.2976 2.95143C12.0617 2.69857 11.6872 2.43786 11.1706 2.20357C10.1388 1.73643 8.6646 1.42857 7 1.42857Z" fill="#848484"/>
-</svg>
diff --git a/frontend/src/assets/dislike.svg b/frontend/src/assets/dislike.svg
deleted file mode 100644
index ec1d24c2..00000000
--- a/frontend/src/assets/dislike.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
-<path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/document.svg b/frontend/src/assets/document.svg
deleted file mode 100644
index bf9504c8..00000000
--- a/frontend/src/assets/document.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.9294 5.375V12.4583C12.9294 12.8341 12.7801 13.1944 12.5145 13.4601C12.2488 13.7257 11.8885 13.875 11.5127 13.875H3.01274C2.63701 13.875 2.27668 13.7257 2.011 13.4601C1.74532 13.1944 1.59607 12.8341 1.59607 12.4583V2.54167C1.59607 2.16594 1.74532 1.80561 2.011 1.53993C2.27668 1.27426 2.63701 1.125 3.01274 1.125H8.6794M12.9294 5.375V5.25317C12.9293 4.87747 12.78 4.5172 12.5143 4.25158L9.80282 1.54008C9.53721 1.27439 9.17693 1.12508 8.80124 1.125H8.6794M12.9294 5.375H10.0961C9.72035 5.375 9.36001 5.22574 9.09434 4.96007C8.82866 4.69439 8.6794 4.33406 8.6794 3.95833V1.125" stroke="#949494" stroke-width="1.41667" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/double-arrow-left.svg b/frontend/src/assets/double-arrow-left.svg
deleted file mode 100644
index cab9ff90..00000000
--- a/frontend/src/assets/double-arrow-left.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54" />
-    <path d="M15.41 10.59L10.83 6L15.41 1.41L14 0L8 6L14 12L15.41 10.59Z" fill="black"
-        fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/double-arrow-right.svg b/frontend/src/assets/double-arrow-right.svg
deleted file mode 100644
index 0d5167c2..00000000
--- a/frontend/src/assets/double-arrow-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.59 10.59L13.17 6L8.59 1.41L10 0L16 6L10 12L8.59 10.59Z" fill="black"
-        fill-opacity="0.54" />
-    <path d="M0.59 10.59L5.17 6L0.59 1.41L2 0L8 6L2 12L0.59 10.59Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/download.svg b/frontend/src/assets/download.svg
deleted file mode 100644
index ee1c091b..00000000
--- a/frontend/src/assets/download.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-  <path d="M7 10l5 5 5-5"/>
-  <path d="M12 15V3"/>
-</svg>
diff --git a/frontend/src/assets/dropdown-arrow.svg b/frontend/src/assets/dropdown-arrow.svg
deleted file mode 100644
index fb88e637..00000000
--- a/frontend/src/assets/dropdown-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0L5 5L10 0H0Z" fill="gray" fill-opacity="0.80"/>
-</svg>
diff --git a/frontend/src/assets/duplicate.svg b/frontend/src/assets/duplicate.svg
deleted file mode 100644
index 06f7a8d3..00000000
--- a/frontend/src/assets/duplicate.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8984 5.5H7.22656C5.99687 5.5 5 6.49687 5 7.72656V16.3984C5 17.6281 5.99687 18.625 7.22656 18.625H15.8984C17.1281 18.625 18.125 17.6281 18.125 16.3984V7.72656C18.125 6.49687 17.1281 5.5 15.8984 5.5Z" stroke="#949494" stroke-width="1.25" stroke-linejoin="round"/>
-<path d="M14.9805 5.5L15 4.5625C14.9984 3.98285 14.7674 3.4274 14.3575 3.01753C13.9476 2.60765 13.3922 2.37665 12.8125 2.375H4.375C3.71256 2.37696 3.07781 2.64098 2.6094 3.1094C2.14098 3.57781 1.87696 4.21256 1.875 4.875V13.3125C1.87665 13.8922 2.10765 14.4476 2.51753 14.8575C2.9274 15.2674 3.48285 15.4984 4.0625 15.5H5M11.5625 8.9375V15.1875M14.6875 12.0625H8.4375" stroke="#949494" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/edit.svg b/frontend/src/assets/edit.svg
deleted file mode 100644
index 25653776..00000000
--- a/frontend/src/assets/edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
-  <path d="M10.0588 2.74568L12.5294 5.15732M8.41176 14H15M1.82353 10.7845L1 14L4.29412 13.1961L13.8355 3.88237C14.1443 3.58087 14.3178 3.172 14.3178 2.74568C14.3178 2.31936 14.1443 1.9105 13.8355 1.609L13.6939 1.47073C13.385 1.16932 12.9662 1 12.5294 1C12.0927 1 11.6738 1.16932 11.3649 1.47073L1.82353 10.7845Z" stroke="#747474" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/envelope.svg b/frontend/src/assets/envelope.svg
deleted file mode 100644
index a4c25032..00000000
--- a/frontend/src/assets/envelope.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.04867 15.49H15.1775C16.5339 15.49 17.3172 14.7067 17.3172 13.1548V4.83755C17.3172 3.29309 16.5265 2.50977 14.9515 2.50977H2.82302C1.47463 2.50977 0.683594 3.28569 0.683594 4.83755V13.1545C0.683594 14.7138 1.48138 15.49 3.04867 15.49ZM8.10441 9.3803L2.41609 3.76816C2.58163 3.70034 2.77738 3.66273 3.01106 3.66273H14.9971C15.2305 3.66273 15.434 3.70034 15.6072 3.78327L9.92692 9.38062C9.60291 9.7043 9.31652 9.84766 9.01534 9.84766C8.71384 9.84766 8.42841 9.70398 8.10441 9.3803ZM1.83559 13.1548V4.76234L6.16717 9.01162L1.84331 13.2824C1.83592 13.2448 1.83559 13.1998 1.83559 13.1548ZM16.1646 4.84494V13.2599L11.8629 9.0113L16.1649 4.78516L16.1646 4.84494ZM3.01106 14.3377C2.79249 14.3377 2.61184 14.3075 2.4537 14.2397L6.95852 9.78723L7.44838 10.2694C7.97552 10.7891 8.48017 11.0077 9.01534 11.0077C9.54249 11.0077 10.0548 10.7891 10.5823 10.2694L11.0718 9.78723L15.5696 14.2319C15.4111 14.3075 15.2154 14.3374 14.9968 14.3374L3.01106 14.3377Z" fill="#6F6F6F"/>
-</svg>
diff --git a/frontend/src/assets/external-link.svg b/frontend/src/assets/external-link.svg
deleted file mode 100644
index 835fcc67..00000000
--- a/frontend/src/assets/external-link.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.4028 7.35671V12.6427C12.4043 12.844 12.3655 13.0436 12.2889 13.2298C12.2122 13.4159 12.0991 13.5849 11.9564 13.7269C11.8136 13.8688 11.6439 13.9808 11.4573 14.0563C11.2706 14.1318 11.0708 14.1694 10.8695 14.1667H3.36483C3.16278 14.1693 2.96226 14.1314 2.77509 14.0553C2.58792 13.9791 2.41789 13.8663 2.27504 13.7234C2.13219 13.5804 2.01941 13.4104 1.94335 13.2232C1.86728 13.036 1.82948 12.8354 1.83217 12.6334V5.12871C1.82975 4.92668 1.86776 4.7262 1.94396 4.53908C2.02017 4.35196 2.13302 4.18196 2.27589 4.0391C2.41875 3.89623 2.58875 3.78338 2.77587 3.70717C2.963 3.63097 3.16347 3.59296 3.3655 3.59537H8.65083M14.1648 1.83337L7.1175 8.88071M14.1648 1.83337H10.6408M14.1648 1.83337V5.35737" stroke="#7D54D1" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/eye-view.svg b/frontend/src/assets/eye-view.svg
deleted file mode 100644
index 1e569cfd..00000000
--- a/frontend/src/assets/eye-view.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5819_12451)">
-<path d="M8.40039 14.3C5.06706 14.3 2.53372 12.4334 0.533724 8.63338L0.400391 8.30005L0.533724 7.96672C2.53372 4.16672 5.06706 2.30005 8.40039 2.30005C11.7337 2.30005 14.2671 4.16672 16.2671 7.96672L16.4004 8.30005L16.2671 8.63338C14.2671 12.4334 11.7337 14.3 8.40039 14.3ZM1.93372 8.30005C3.60039 11.4334 5.73372 12.9667 8.40039 12.9667C11.0671 12.9667 13.2004 11.4334 14.8671 8.30005C13.2004 5.16672 11.0671 3.63338 8.40039 3.63338C5.73372 3.63338 3.60039 5.16672 1.93372 8.30005Z" fill="#747474"/>
-<path d="M8.40072 11.6333C6.53405 11.6333 5.06738 10.1667 5.06738 8.30001C5.06738 6.43334 6.53405 4.96667 8.40072 4.96667C10.2674 4.96667 11.734 6.43334 11.734 8.30001C11.734 10.1667 10.2674 11.6333 8.40072 11.6333ZM8.40072 6.30001C7.26738 6.30001 6.40072 7.16667 6.40072 8.30001C6.40072 9.43334 7.26738 10.3 8.40072 10.3C9.53405 10.3 10.4007 9.43334 10.4007 8.30001C10.4007 7.16667 9.53405 6.30001 8.40072 6.30001Z" fill="#747474"/>
-</g>
-<defs>
-<clipPath id="clip0_5819_12451">
-<rect width="16" height="16" fill="white" transform="translate(0.400391 0.300049)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/src/assets/file.svg b/frontend/src/assets/file.svg
deleted file mode 100644
index 7120a3c9..00000000
--- a/frontend/src/assets/file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 1.94971C0 0.983707 0.784 0.199707 1.75 0.199707H8.336C8.8 0.199707 9.245 0.383707 9.573 0.712707L12.487 3.62671C12.816 3.95471 13 4.39971 13 4.86371V14.4497C13 14.9138 12.8156 15.359 12.4874 15.6871C12.1592 16.0153 11.7141 16.1997 11.25 16.1997H1.75C1.28587 16.1997 0.840752 16.0153 0.512563 15.6871C0.184375 15.359 0 14.9138 0 14.4497V1.94971ZM1.75 1.69971C1.6837 1.69971 1.62011 1.72605 1.57322 1.77293C1.52634 1.81981 1.5 1.8834 1.5 1.94971V14.4497C1.5 14.5877 1.612 14.6997 1.75 14.6997H11.25C11.3163 14.6997 11.3799 14.6734 11.4268 14.6265C11.4737 14.5796 11.5 14.516 11.5 14.4497V6.19971H8.75C8.28587 6.19971 7.84075 6.01533 7.51256 5.68714C7.18437 5.35896 7 4.91384 7 4.44971V1.69971H1.75ZM8.5 1.76171V4.44971C8.5 4.58771 8.612 4.69971 8.75 4.69971H11.438L11.427 4.68671L8.513 1.77271L8.5 1.76171Z" fill="#59636E"/>
-</svg>
diff --git a/frontend/src/assets/folder.svg b/frontend/src/assets/folder.svg
deleted file mode 100644
index 2c2217f0..00000000
--- a/frontend/src/assets/folder.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.75 0.599915C1.28587 0.599915 0.840752 0.784289 0.512563 1.11248C0.184374 1.44067 0 1.88579 0 2.34991L0 12.8499C0 13.8159 0.784 14.5999 1.75 14.5999H14.25C14.7141 14.5999 15.1592 14.4155 15.4874 14.0874C15.8156 13.7592 16 13.314 16 12.8499V4.34991C16 3.88579 15.8156 3.44067 15.4874 3.11248C15.1592 2.78429 14.7141 2.59991 14.25 2.59991H7.5C7.46119 2.59991 7.42291 2.59088 7.3882 2.57352C7.35348 2.55616 7.32329 2.53096 7.3 2.49991L6.4 1.29991C6.07 0.859915 5.55 0.599915 5 0.599915H1.75Z" fill="#A382E7"/>
-</svg>
diff --git a/frontend/src/assets/full-logo.svg b/frontend/src/assets/full-logo.svg
deleted file mode 100644
index af581fc9..00000000
--- a/frontend/src/assets/full-logo.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.01 85.34">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #4a00e0;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <g>
-        <path class="cls-1" d="M152.09,85.34c-5.46,0-10.42-1.3-14.87-3.92-4.45-2.61-7.98-6.14-10.59-10.59-2.61-4.45-3.92-9.4-3.92-14.86s1.31-10.38,3.92-14.75c2.61-4.37,6.15-7.86,10.59-10.48,4.45-2.61,9.4-3.92,14.87-3.92s10.53,1.29,14.98,3.86c4.45,2.58,7.98,6.07,10.59,10.48,2.61,4.41,3.92,9.35,3.92,14.81s-1.31,10.42-3.92,14.86c-2.61,4.45-6.14,7.98-10.59,10.59-4.45,2.62-9.44,3.92-14.98,3.92ZM152.09,72.93c3.2,0,6.03-.72,8.49-2.17,2.46-1.44,4.37-3.45,5.74-6.03,1.36-2.58,2.05-5.5,2.05-8.78s-.7-6.16-2.11-8.66c-1.4-2.5-3.32-4.47-5.74-5.91-2.42-1.44-5.23-2.17-8.43-2.17s-5.91.72-8.37,2.17c-2.46,1.44-4.37,3.41-5.74,5.91-1.37,2.5-2.05,5.38-2.05,8.66s.68,6.2,2.05,8.78c1.36,2.58,3.28,4.58,5.74,6.03,2.46,1.44,5.25,2.17,8.37,2.17Z"/>
-        <path class="cls-1" d="M218.1,85.34c-5.54,0-10.55-1.29-15.04-3.86-4.49-2.58-8.02-6.09-10.59-10.53-2.58-4.45-3.86-9.4-3.86-14.87s1.29-10.51,3.86-14.92c2.58-4.41,6.1-7.9,10.59-10.48,4.49-2.58,9.5-3.86,15.04-3.86,4.37,0,8.44.84,12.23,2.52,3.78,1.68,7,4.08,9.66,7.2l-8.43,8.54c-1.64-1.95-3.61-3.41-5.91-4.39-2.3-.97-4.82-1.46-7.55-1.46-3.2,0-6.03.72-8.49,2.17-2.46,1.44-4.37,3.41-5.74,5.91-1.37,2.5-2.05,5.42-2.05,8.78s.68,6.19,2.05,8.72c1.36,2.54,3.28,4.53,5.74,5.97,2.46,1.44,5.29,2.17,8.49,2.17,2.73,0,5.25-.49,7.55-1.46,2.3-.98,4.27-2.44,5.91-4.39l8.43,8.54c-2.65,3.12-5.87,5.52-9.66,7.2-3.79,1.68-7.86,2.52-12.23,2.52Z"/>
-        <path class="cls-1" d="M267.61,85.34c-3.12,0-6.13-.41-9.01-1.23-2.89-.82-5.54-1.99-7.96-3.51-2.42-1.52-4.53-3.37-6.32-5.56l8.19-8.19c1.95,2.26,4.19,3.96,6.73,5.09,2.54,1.13,5.4,1.7,8.6,1.7,2.89,0,5.07-.43,6.55-1.29,1.48-.86,2.22-2.11,2.22-3.75s-.7-3.04-2.11-3.98c-1.4-.94-3.22-1.74-5.44-2.4-2.22-.66-4.56-1.35-7.02-2.05-2.46-.7-4.8-1.66-7.02-2.87-2.22-1.21-4.04-2.87-5.44-4.97-1.4-2.11-2.11-4.84-2.11-8.19,0-3.59.84-6.67,2.52-9.25,1.68-2.58,4.06-4.57,7.14-5.97,3.08-1.4,6.77-2.11,11.06-2.11,4.52,0,8.52.8,12,2.4,3.47,1.6,6.38,4,8.72,7.2l-8.19,8.19c-1.64-2.03-3.51-3.55-5.62-4.56-2.11-1.01-4.53-1.52-7.26-1.52-2.58,0-4.56.39-5.97,1.17-1.4.78-2.11,1.91-2.11,3.39,0,1.56.7,2.77,2.11,3.63,1.4.86,3.22,1.6,5.44,2.22,2.22.63,4.56,1.31,7.02,2.05,2.46.74,4.8,1.76,7.02,3.04,2.22,1.29,4.04,3.01,5.44,5.15,1.4,2.15,2.11,4.94,2.11,8.37,0,5.46-1.91,9.79-5.74,12.99-3.82,3.2-9.01,4.8-15.57,4.8Z"/>
-        <path class="cls-1" d="M338.31,85.34c-5.62,0-10.93-1.09-15.92-3.28-4.99-2.18-9.36-5.21-13.11-9.07-3.75-3.86-6.69-8.35-8.84-13.46-2.15-5.11-3.22-10.59-3.22-16.45s1.07-11.31,3.22-16.39c2.14-5.07,5.11-9.54,8.9-13.4,3.78-3.86,8.23-6.87,13.34-9.01,5.11-2.15,10.63-3.22,16.56-3.22,6.48,0,12.48,1.25,18.03,3.75,5.54,2.5,10.18,6.05,13.93,10.65l-9.13,9.13c-2.42-3.43-5.66-6.07-9.72-7.9-4.06-1.83-8.43-2.75-13.11-2.75-5.62,0-10.55,1.23-14.81,3.69-4.25,2.46-7.55,5.87-9.89,10.24-2.34,4.37-3.51,9.44-3.51,15.22s1.19,10.87,3.57,15.28c2.38,4.41,5.6,7.86,9.66,10.36,4.06,2.5,8.66,3.75,13.81,3.75,5.46,0,10.16-.99,14.1-2.98,3.94-1.99,6.96-4.95,9.07-8.9,2.11-3.94,3.16-8.8,3.16-14.57l8.43,6.09h-35v-12.29h40.5v1.87c0,9.76-1.74,17.87-5.21,24.35-3.47,6.48-8.21,11.32-14.22,14.51-6.01,3.2-12.88,4.8-20.6,4.8Z"/>
-        <path class="cls-1" d="M391.68,84.17V2.24h13.46v81.93h-13.46ZM400.92,53.27v-11.7h20.48c2.81,0,5.28-.57,7.43-1.7,2.14-1.13,3.84-2.73,5.09-4.8,1.25-2.07,1.87-4.51,1.87-7.32s-.63-5.25-1.87-7.32c-1.25-2.07-2.95-3.67-5.09-4.8-2.15-1.13-4.62-1.7-7.43-1.7h-20.48V2.24h21.18c5.15,0,9.77,1.05,13.87,3.16,4.1,2.11,7.33,5.07,9.72,8.9,2.38,3.82,3.57,8.31,3.57,13.46s-1.19,9.64-3.57,13.46c-2.38,3.82-5.62,6.79-9.72,8.9-4.1,2.11-8.72,3.16-13.87,3.16h-21.18Z"/>
-        <path class="cls-1" d="M454.18,14.53V2.24h66.83v12.29h-66.83ZM480.87,84.17V4.58h13.46v79.59h-13.46Z"/>
-      </g>
-      <path class="cls-1" d="M113.79,25.5c-2.18-5.16-5.24-9.65-9.19-13.48-3.95-3.83-8.62-6.79-14.02-8.88-5.4-2.09-11.24-3.14-17.52-3.14h-33.12v70.4c-3.81.33-7.54.21-11.2-.38-5.68-.91-10.85-2.82-15.52-5.73-4.67-2.9-8.61-6.67-11.84-11.29-.41-.59-.81-1.19-1.19-1.8h-.2c.54,2.88,1.37,5.64,2.47,8.28,2.18,5.2,5.24,9.71,9.19,13.54,3.95,3.83,8.6,6.79,13.96,8.88,4.48,1.75,9.26,2.77,14.33,3.06h0s11.24,0,11.24,0h22.12c6.2,0,11.98-1.05,17.34-3.14,5.36-2.09,10.01-5.06,13.96-8.88,3.95-3.83,7.01-8.34,9.19-13.54,2.18-5.2,3.26-10.86,3.26-16.98s-1.09-11.76-3.26-16.92ZM96.81,57.11c-2.3,4.23-5.52,7.49-9.67,9.79-4.15,2.3-8.92,3.44-14.32,3.44h-16.44V14.62h16.44c5.4,0,10.15,1.17,14.26,3.5,4.11,2.34,7.33,5.56,9.67,9.67,2.34,4.11,3.51,8.94,3.51,14.5s-1.15,10.58-3.44,14.81Z"/>
-      <path class="cls-1" d="M9.74,58.97c.25.21.64.21.99,0h0c.35-.22.6-.61.61-.99l.18-3.94c.02-.51-.37-.84-.87-.74l-1.69.36-2.11.45c-.37.08-.71.37-.87.75h0c-.16.39-.1.77.14.99l3.62,3.11Z"/>
-      <path class="cls-1" d="M14.41,61.98l5.72,2.68c.39.18.9,0,1.3-.45.4-.46.6-1.11.51-1.65l-.94-5.56c-.12-.73-.74-1.01-1.38-.63l-2.12,1.27-2.65,1.59c-.46.28-.83.84-.92,1.44v.02c-.1.6.09,1.11.48,1.29Z"/>
-      <path class="cls-1" d="M25.32,65.34c.14.8.61,1.36,1.18,1.42l8.43.86c.58.06,1.15-.39,1.45-1.15h0c.3-.76.27-1.68-.08-2.32l-3.65-6.61c-.48-.86-1.38-.95-2.02-.18l-2.12,2.54-2.66,3.18c-.46.56-.67,1.43-.53,2.23v.02Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images.svg b/frontend/src/assets/images.svg
deleted file mode 100644
index bd822b96..00000000
--- a/frontend/src/assets/images.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9477 3.02295H33.8827C35.898 3.02295 37.5388 4.6819 37.5388 6.71923V22.9819C37.5388 25.0193 35.898 26.6782 33.8827 26.6782H11.9477C9.9328 26.6782 8.29192 25.0193 8.29192 22.9819V6.71923C8.29192 4.6819 9.9328 3.02295 11.9477 3.02295ZM33.8827 5.97992H11.9477C11.5442 5.97992 11.2167 6.31098 11.2167 6.71916V20.6741L15.2527 16.595C16.2515 15.5839 17.8791 15.5839 18.8792 16.595L20.6486 18.3795L26.0799 11.7888C26.5653 11.2003 27.276 10.8603 28.0335 10.856C28.7953 10.8735 29.5046 11.1841 29.9946 11.765L34.614 17.2147V6.71923C34.614 6.31104 34.2866 5.97992 33.8827 5.97992ZM6.40446 25.1242C7.16068 27.3803 9.243 28.8957 11.584 28.8957H32.8128L31.4954 33.1312C31.1223 34.5715 29.7916 35.5487 28.3352 35.5487C28.051 35.5485 27.768 35.5117 27.4929 35.4393L4.88059 29.3169C3.13614 28.8305 2.09642 27.0048 2.55267 25.2438L6.10025 13.2714V23.3516C6.10025 23.8543 6.17497 24.3567 6.35333 24.9542L6.40446 25.1242ZM18.53 10.4151C18.53 12.0459 17.2186 13.3721 15.6055 13.3721C13.9926 13.3721 12.6808 12.0458 12.6808 10.4151C12.6808 8.78445 13.9925 7.45815 15.6055 7.45815C17.2186 7.45815 18.53 8.78438 18.53 10.4151Z" fill="#A3A3A3"/>
-</svg>
diff --git a/frontend/src/assets/info.svg b/frontend/src/assets/info.svg
deleted file mode 100644
index 6f3d2446..00000000
--- a/frontend/src/assets/info.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
-</svg>
diff --git a/frontend/src/assets/like.svg b/frontend/src/assets/like.svg
deleted file mode 100644
index c49604ed..00000000
--- a/frontend/src/assets/like.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
-<path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/link-gray.svg b/frontend/src/assets/link-gray.svg
deleted file mode 100644
index e6877148..00000000
--- a/frontend/src/assets/link-gray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.5304 17.5 16.0391 17.2893 16.4142 16.9142C16.7893 16.5391 17 16.0304 17 15.5V11.5M9 9.5L17 1.5M17 1.5V6.5M17 1.5H12" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/link.svg b/frontend/src/assets/link.svg
deleted file mode 100644
index 67bacd9d..00000000
--- a/frontend/src/assets/link.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z" fill="black" fill-opacity="0.54"/>
-</svg>
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
deleted file mode 100644
index 1b70c736..00000000
--- a/frontend/src/assets/logo.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.35 169.38">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #4a00e0;
-      }
-    </style>
-  </defs>
-  <g id="Layer_1-2" data-name="Layer 1">
-    <g>
-      <path class="cls-1" d="M226.85,50.84c-4.34-10.28-10.44-19.23-18.31-26.86-7.87-7.63-17.19-13.53-27.95-17.71-10.76-4.18-22.41-6.26-34.94-6.26h-66.02v140.35c-7.6.66-15.04.42-22.33-.75-11.32-1.82-21.64-5.63-30.94-11.42-9.3-5.79-17.17-13.29-23.6-22.5-.82-1.17-1.61-2.37-2.37-3.59h-.4c1.08,5.74,2.73,11.25,4.93,16.51,4.34,10.36,10.44,19.36,18.31,26.99,7.87,7.63,17.15,13.53,27.83,17.71,8.93,3.49,18.46,5.52,28.56,6.09h0s22.41,0,22.41,0h44.09c12.37,0,23.89-2.09,34.57-6.26,10.68-4.17,19.96-10.08,27.83-17.71,7.87-7.63,13.97-16.62,18.31-26.99,4.34-10.36,6.51-21.64,6.51-33.85s-2.17-23.45-6.51-33.73ZM193,113.84c-4.58,8.43-11,14.94-19.28,19.52-8.27,4.58-17.79,6.87-28.55,6.87h-32.77V29.15h32.77c10.76,0,20.24,2.33,28.43,6.99,8.19,4.66,14.61,11.08,19.28,19.28,4.66,8.19,6.99,17.83,6.99,28.91s-2.29,21.08-6.87,29.52Z"/>
-      <path class="cls-1" d="M19.41,117.55c.49.42,1.27.42,1.97,0h0c.7-.43,1.19-1.21,1.22-1.97l.37-7.84c.05-1.03-.73-1.68-1.74-1.47l-3.36.72-4.21.9c-.73.16-1.42.75-1.74,1.5v.02c-.33.75-.21,1.52.28,1.94l7.21,6.21Z"/>
-      <path class="cls-1" d="M28.73,123.56l11.41,5.35c.78.37,1.8,0,2.6-.9.8-.92,1.2-2.22,1.02-3.29l-1.88-11.08c-.25-1.45-1.47-2.01-2.74-1.25l-4.23,2.53-5.29,3.17c-.92.55-1.65,1.68-1.84,2.87v.03c-.2,1.19.18,2.21.96,2.57Z"/>
-      <path class="cls-1" d="M50.47,130.26c.28,1.59,1.21,2.71,2.36,2.83l16.8,1.72c1.15.12,2.29-.79,2.88-2.29h0c.6-1.52.54-3.34-.16-4.62l-7.28-13.18c-.95-1.72-2.75-1.89-4.02-.37l-4.23,5.07-5.29,6.35c-.92,1.11-1.34,2.86-1.06,4.45v.04Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/monitoring.svg b/frontend/src/assets/monitoring.svg
deleted file mode 100644
index bc47212e..00000000
--- a/frontend/src/assets/monitoring.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.85 16.087C4.84924 16.2663 4.91145 16.4239 5.03693 16.5494C5.16233 16.6747 5.31971 16.7373 5.499 16.7373L5.4997 16.7373C5.67889 16.7364 5.83627 16.6743 5.9617 16.5497C6.08758 16.4247 6.15 16.267 6.15 16.0873V10.7993C6.15 10.619 6.08842 10.4607 5.96269 10.3358C5.83772 10.2117 5.68058 10.1501 5.5017 10.1493C5.32173 10.1484 5.16366 10.2105 5.03793 10.3362C4.9124 10.4618 4.85 10.6195 4.85 10.7993V16.087ZM4.85 16.087C4.85 16.0868 4.85 16.0867 4.85 16.0866L5 16.0873M4.85 16.087V16.0873H5M5 16.0873C4.99933 16.2286 5.047 16.3473 5.143 16.4433C5.239 16.5393 5.35767 16.5873 5.499 16.5873L5 16.0873ZM17.4984 0.850356C17.6844 0.844257 17.8447 0.916616 17.9702 1.05647C18.0903 1.18276 18.1491 1.33782 18.1439 1.51269C18.1389 1.6837 18.0787 1.83386 17.9605 1.95296L17.9601 1.95335L12.7431 7.17035L12.7421 7.17131C12.5779 7.33262 12.3846 7.45674 12.1641 7.54381C11.9451 7.63023 11.7235 7.67428 11.5 7.67428C11.277 7.67428 11.0585 7.63017 10.8453 7.54316M17.4984 0.850356L10.8453 7.54316M17.4984 0.850356C17.3204 0.855502 17.1648 0.921665 17.0399 1.04721L17.4984 0.850356ZM10.8453 7.54316C10.632 7.45637 10.4379 7.33351 10.2633 7.17548L10.2578 7.1705L10.258 7.17037L7.83596 4.74937L7.83593 4.74935C7.75166 4.66508 7.6439 4.62029 7.5 4.62029C7.3561 4.62029 7.24834 4.66508 7.16407 4.74935L1.96007 9.95335C1.83516 10.0783 1.67973 10.1443 1.50197 10.1502L1.50128 10.1502C1.31531 10.1555 1.15551 10.0825 1.03084 9.94215C0.910023 9.81657 0.850921 9.66177 0.856065 9.48688C0.861095 9.31586 0.921352 9.1658 1.03993 9.04722L6.25793 3.82922L6.25859 3.82856C6.43436 3.65497 6.63139 3.52612 6.84951 3.44477C7.06174 3.36537 7.27883 3.32528 7.5 3.32528C7.72114 3.32528 7.94133 3.36536 8.15989 3.44418C8.38508 3.5254 8.58031 3.65486 8.74407 3.83122L11.164 6.2502L11.1641 6.25022C11.2483 6.33449 11.3561 6.37928 11.5 6.37928C11.6439 6.37928 11.7517 6.33449 11.8359 6.25022L11.8359 6.25021L17.0396 1.04758L10.8453 7.54316ZM1.5 16.7373L1.5007 16.7373C1.68022 16.7364 1.83649 16.6741 1.9617 16.5497C2.08758 16.4247 2.15 16.267 2.15 16.0873V15.2993C2.15 15.119 2.08842 14.9607 1.96269 14.8358C1.83772 14.7117 1.68058 14.6501 1.5017 14.6493C1.32173 14.6484 1.16366 14.7105 1.03793 14.8362C0.912396 14.9618 0.85 15.1195 0.85 15.2993V16.0873C0.85 16.2663 0.91197 16.4235 1.03657 16.549C1.16172 16.675 1.31979 16.7373 1.5 16.7373ZM9.499 16.7373L9.4997 16.7373C9.67889 16.7364 9.83627 16.6743 9.9617 16.5497C10.0876 16.4247 10.15 16.267 10.15 16.0873V12.7993C10.15 12.619 10.0884 12.4607 9.96269 12.3358C9.83772 12.2117 9.68058 12.1501 9.5017 12.1493C9.32173 12.1484 9.16366 12.2105 9.03793 12.3362C8.9124 12.4618 8.85 12.6195 8.85 12.7993V16.0873C8.85 16.2663 8.91197 16.4235 9.03656 16.549C9.16158 16.6749 9.31924 16.7373 9.499 16.7373ZM13.499 16.7373L13.4997 16.7373C13.6789 16.7364 13.8363 16.6743 13.9617 16.5497C14.0876 16.4247 14.15 16.267 14.15 16.0873V11.2993C14.15 11.119 14.0884 10.9607 13.9627 10.8358C13.8377 10.7117 13.6806 10.6501 13.5017 10.6493C13.3217 10.6484 13.1637 10.7105 13.0379 10.8362C12.9124 10.9618 12.85 11.1195 12.85 11.2993L12.85 16.0866L13 16.0873H12.85V16.0868C12.8492 16.2662 12.9114 16.4238 13.0369 16.5494C13.1623 16.6747 13.3197 16.7373 13.499 16.7373ZM17.499 16.7373L17.4997 16.7373C17.6789 16.7364 17.8363 16.6743 17.9617 16.5497C18.0876 16.4247 18.15 16.267 18.15 16.0873V7.29928C18.15 7.11895 18.0884 6.9607 17.9627 6.83585C17.8377 6.71175 17.6806 6.65013 17.5017 6.64929C17.3217 6.64844 17.1637 6.7105 17.0379 6.83622C16.9124 6.96176 16.85 7.11954 16.85 7.29928L16.85 16.0866L17 16.0873H16.85V16.0868C16.8492 16.2662 16.9114 16.4238 17.0369 16.5494C17.1623 16.6747 17.3197 16.7373 17.499 16.7373Z" fill="#747474" stroke="#747474" stroke-width="0.3"/>
-</svg>
diff --git a/frontend/src/assets/pin.svg b/frontend/src/assets/pin.svg
deleted file mode 100644
index 4e1d1071..00000000
--- a/frontend/src/assets/pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-icon lucide-pin"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/red-trash.svg b/frontend/src/assets/red-trash.svg
deleted file mode 100644
index 8026236e..00000000
--- a/frontend/src/assets/red-trash.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.66574 13.7747C1.66574 14.2168 1.84635 14.6407 2.16784 14.9533C2.48933 15.2658 2.92537 15.4414 3.38002 15.4414H10.2372C10.6918 15.4414 11.1279 15.2658 11.4493 14.9533C11.7708 14.6407 11.9515 14.2168 11.9515 13.7747V3.77474H1.66574V13.7747ZM3.38002 5.44141H10.2372V13.7747H3.38002V5.44141ZM9.80859 1.27474L8.95145 0.441406H4.66574L3.80859 1.27474H0.808594V2.94141H12.8086V1.27474H9.80859Z" fill="#f44336"/>
-</svg>
diff --git a/frontend/src/assets/redirect.svg b/frontend/src/assets/redirect.svg
deleted file mode 100644
index 38432950..00000000
--- a/frontend/src/assets/redirect.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.22066 0.46934C5.36129 0.328889 5.55191 0.25 5.75066 0.25C5.94941 0.25 6.14003 0.328889 6.28066 0.46934L10.5307 4.71934C10.6711 4.85997 10.75 5.05059 10.75 5.24934C10.75 5.44809 10.6711 5.63871 10.5307 5.77934L6.28066 10.0293C6.13851 10.162 5.95041 10.2342 5.75602 10.2309C5.56163 10.2275 5.37614 10.1488 5.23866 10.0113C5.10119 9.87386 5.02247 9.68837 5.01911 9.49398C5.01576 9.29959 5.08802 9.11149 5.22066 8.96934L8.19066 5.99934L0.75066 5.99934C0.551747 5.99934 0.360983 5.92032 0.22033 5.77967C0.0796773 5.63902 0.000659715 5.44825 0.000659724 5.24934C0.000659733 5.05043 0.0796774 4.85966 0.22033 4.71901C0.360983 4.57836 0.551747 4.49934 0.75066 4.49934L8.19066 4.49934L5.22066 1.52934C5.08021 1.38871 5.00132 1.19809 5.00132 0.99934C5.00132 0.800589 5.08021 0.609965 5.22066 0.46934Z" fill="#7D54D1"/>
-</svg>
diff --git a/frontend/src/assets/retry.svg b/frontend/src/assets/retry.svg
deleted file mode 100644
index 6a47b545..00000000
--- a/frontend/src/assets/retry.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 383.748 383.748" fill="currentColor" stroke="currentColor" stroke-width="10">
-<path d="M62.772 95.042C90.904 54.899 137.496 30 187.343 30c83.743 0 151.874 68.13 151.874 151.874h30C369.217 81.588 287.629 0 187.343 0c-35.038 0-69.061 9.989-98.391 28.888a182.423 182.423 0 0 0-47.731 44.705L2.081 34.641v113.365h113.91L62.772 95.042zM381.667 235.742h-113.91l53.219 52.965c-28.132 40.142-74.724 65.042-124.571 65.042-83.744 0-151.874-68.13-151.874-151.874h-30c0 100.286 81.588 181.874 181.874 181.874 35.038 0 69.062-9.989 98.391-28.888a182.443 182.443 0 0 0 47.731-44.706l39.139 38.952V235.742z"/>
-</svg>
diff --git a/frontend/src/assets/rounded-tick.svg b/frontend/src/assets/rounded-tick.svg
deleted file mode 100644
index 5ab2e5ef..00000000
--- a/frontend/src/assets/rounded-tick.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.75C4.62391 0.75 0.25 5.12391 0.25 10.5C0.25 15.8761 4.62391 20.25 10 20.25C15.3761 20.25 19.75 15.8761 19.75 10.5C19.75 5.12391 15.3761 0.75 10 0.75ZM15.0742 7.23234L8.77422 14.7323C8.70511 14.8147 8.61912 14.8812 8.52207 14.9273C8.42502 14.9735 8.31918 14.9983 8.21172 15H8.19906C8.09394 15 7.99 14.9778 7.89398 14.935C7.79797 14.8922 7.71202 14.8297 7.64172 14.7516L4.94172 11.7516C4.87315 11.6788 4.81981 11.5931 4.78483 11.4995C4.74986 11.4059 4.73395 11.3062 4.73805 11.2063C4.74215 11.1064 4.76617 11.0084 4.8087 10.9179C4.85124 10.8275 4.91142 10.7464 4.98572 10.6796C5.06002 10.6127 5.14694 10.5614 5.24136 10.5286C5.33579 10.4958 5.43581 10.4822 5.53556 10.4886C5.63531 10.495 5.73277 10.5213 5.82222 10.5659C5.91166 10.6106 5.99128 10.6726 6.05641 10.7484L8.17938 13.1072L13.9258 6.26766C14.0547 6.11863 14.237 6.02631 14.4335 6.01066C14.6299 5.99501 14.8246 6.05728 14.9754 6.18402C15.1263 6.31075 15.2212 6.49176 15.2397 6.68793C15.2582 6.8841 15.1988 7.07966 15.0742 7.23234Z" fill="#B5B5B5"/>
-</svg>
diff --git a/frontend/src/assets/single-left-arrow.svg b/frontend/src/assets/single-left-arrow.svg
deleted file mode 100644
index f28b2592..00000000
--- a/frontend/src/assets/single-left-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/single-right-arrow.svg b/frontend/src/assets/single-right-arrow.svg
deleted file mode 100644
index 85729e57..00000000
--- a/frontend/src/assets/single-right-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.59 1.41L5.17 6L0.59 10.59L2 12L8 6L2 0L0.59 1.41Z" fill="black" fill-opacity="0.54" />
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/source.svg b/frontend/src/assets/source.svg
deleted file mode 100644
index 06187a97..00000000
--- a/frontend/src/assets/source.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 10.5994V3.39941M11.6 3.39941V10.5994" stroke="#5D5D5D" stroke-width="0.9" stroke-linecap="round"/>
-<path d="M11.6 7C11.6 8.326 9.4508 9.4 6.8 9.4C4.1492 9.4 2 8.326 2 7M11.6 10.6C11.6 11.926 9.4508 13 6.8 13C4.1492 13 2 11.926 2 10.6M6.8 5.8C9.4508 5.8 11.6 4.726 11.6 3.4C11.6 2.074 9.4508 1 6.8 1C4.1492 1 2 2.074 2 3.4C2 4.726 4.1492 5.8 6.8 5.8Z" stroke="#5D5D5D" stroke-width="0.9"/>
-</svg>
diff --git a/frontend/src/assets/sources.svg b/frontend/src/assets/sources.svg
deleted file mode 100644
index 4bb7d30b..00000000
--- a/frontend/src/assets/sources.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.73517 17.2121L0.538918 17.9125C0.3753 18.0084 0.239616 18.1455 0.145332 18.31C0.0510491 18.4746 0.00144577 18.661 0.00144577 18.8506C0.00144577 19.0403 0.0510491 19.2267 0.145332 19.3912C0.239616 19.5558 0.3753 19.6929 0.538918 19.7888L11.0514 25.9513C11.2181 26.0489 11.4078 26.1004 11.601 26.1004C11.7941 26.1004 11.9838 26.0489 12.1505 25.9513L22.663 19.7888C22.8266 19.6929 22.9623 19.5558 23.0566 19.3912C23.1509 19.2267 23.2005 19.0403 23.2005 18.8506C23.2005 18.661 23.1509 18.4746 23.0566 18.31C22.9623 18.1455 22.8266 18.0084 22.663 17.9125L21.4668 17.2107L13.2511 22.0276C12.7506 22.321 12.1811 22.4757 11.601 22.4757C11.0209 22.4757 10.4513 22.321 9.95087 22.0276L1.73517 17.2121Z" fill="url(#paint0_linear_4013_8178)"/>
-<path d="M1.73517 11.4121L0.538918 12.1124C0.3753 12.2084 0.239616 12.3454 0.145332 12.51C0.0510491 12.6746 0.00144577 12.8609 0.00144577 13.0506C0.00144577 13.2403 0.0510491 13.4266 0.145332 13.5912C0.239616 13.7558 0.3753 13.8928 0.538918 13.9887L11.0514 20.1512C11.2181 20.2489 11.4078 20.3003 11.601 20.3003C11.7941 20.3003 11.9838 20.2489 12.1505 20.1512L22.663 13.9887C22.8266 13.8928 22.9623 13.7558 23.0566 13.5912C23.1509 13.4266 23.2005 13.2403 23.2005 13.0506C23.2005 12.8609 23.1509 12.6746 23.0566 12.51C22.9623 12.3454 22.8266 12.2084 22.663 12.1124L21.4668 11.4106L13.2511 16.2275C12.7506 16.5209 12.1811 16.6756 11.601 16.6756C11.0209 16.6756 10.4513 16.5209 9.95087 16.2275L1.73517 11.4121Z" fill="url(#paint1_linear_4013_8178)"/>
-<path d="M12.152 0.149921C11.9849 0.0517579 11.7947 0 11.601 0C11.4072 0 11.217 0.0517579 11.05 0.149921L0.537472 6.31242C0.373854 6.40835 0.23817 6.5454 0.143887 6.70997C0.0496035 6.87454 0 7.06091 0 7.25057C0 7.44024 0.0496035 7.6266 0.143887 7.79117C0.23817 7.95574 0.373854 8.09279 0.537472 8.18872L11.05 14.3512C11.217 14.4494 11.4072 14.5011 11.601 14.5011C11.7947 14.5011 11.9849 14.4494 12.152 14.3512L22.6645 8.18872C22.8281 8.09279 22.9638 7.95574 23.0581 7.79117C23.1523 7.6266 23.2019 7.44024 23.2019 7.25057C23.2019 7.06091 23.1523 6.87454 23.0581 6.70997C22.9638 6.5454 22.8281 6.40835 22.6645 6.31242L12.152 0.149921Z" fill="url(#paint2_linear_4013_8178)"/>
-<defs>
-<linearGradient id="paint0_linear_4013_8178" x1="0.00144577" y1="21.6555" x2="23.2005" y2="21.6555" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4013_8178" x1="0.00144577" y1="15.8555" x2="23.2005" y2="15.8555" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4013_8178" x1="0" y1="7.25057" x2="23.2019" y2="7.25057" gradientUnits="userSpaceOnUse">
-<stop stop-color="#70FDF7"/>
-<stop offset="0.325" stop-color="#747696"/>
-<stop offset="0.68" stop-color="#BD5372"/>
-<stop offset="1" stop-color="#F5A06C"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/assets/speaker.svg b/frontend/src/assets/speaker.svg
deleted file mode 100644
index 6c379177..00000000
--- a/frontend/src/assets/speaker.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9.59652V6.40372C1 5.94773 1.18114 5.51041 1.50358 5.18797C1.82602 4.86553 2.26334 4.68439 2.71933 4.68439H5.21237C5.38045 4.68435 5.54483 4.63503 5.68518 4.54254L10.8432 1.1417C10.9728 1.05636 11.1231 1.00768 11.2781 1.00084C11.4331 0.993993 11.5871 1.02924 11.7237 1.10283C11.8603 1.17643 11.9745 1.28563 12.054 1.41885C12.1336 1.55207 12.1756 1.70435 12.1757 1.85952V14.1407C12.1756 14.2959 12.1336 14.4482 12.054 14.5814C11.9745 14.7146 11.8603 14.8238 11.7237 14.8974C11.5871 14.971 11.4331 15.0063 11.2781 14.9994C11.1231 14.9926 10.9728 14.9439 10.8432 14.8585L5.68518 11.4577C5.54483 11.3652 5.38045 11.3159 5.21237 11.3159H2.71933C2.26334 11.3159 1.82602 11.1347 1.50358 10.8123C1.18114 10.4898 1 10.0525 1 9.59652Z" stroke="#949494" stroke-width="1.4"/>
-<path d="M15.1846 4.13149C15.1846 4.13149 16.4741 5.42099 16.4741 7.57016C16.4741 9.71932 15.1846 11.0088 15.1846 11.0088M17.7636 1.55249C17.7636 1.55249 19.9127 3.70166 19.9127 7.57016C19.9127 11.4387 17.7636 13.5878 17.7636 13.5878" stroke="#949494" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/stopspeech.svg b/frontend/src/assets/stopspeech.svg
deleted file mode 100644
index f77a235b..00000000
--- a/frontend/src/assets/stopspeech.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 1.14286C9.35622 1.14286 10.682 1.54502 11.8096 2.29849C12.9373 3.05197 13.8162 4.1229 14.3352 5.37588C14.8542 6.62886 14.99 8.0076 14.7254 9.33776C14.4608 10.6679 13.8077 11.8897 12.8487 12.8487C11.8897 13.8077 10.6679 14.4608 9.33776 14.7254C8.00761 14.99 6.62887 14.8542 5.37589 14.3352C4.12291 13.8162 3.05197 12.9373 2.2985 11.8096C1.54502 10.682 1.14286 9.35621 1.14286 8C1.14286 6.18137 1.86531 4.43723 3.15127 3.15127C4.43723 1.8653 6.18137 1.14286 8 1.14286ZM8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346626 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6568C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7601 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34314C12.1566 0.842854 10.1217 0 8 0Z" fill="#949494"/>
-<path d="M10.2857 5.71439V10.2858H5.71427V5.71439H10.2857ZM10.2857 4.57153H5.71427C5.41116 4.57153 5.12047 4.69194 4.90615 4.90627C4.69182 5.1206 4.57141 5.41129 4.57141 5.71439V10.2858C4.57141 10.5889 4.69182 10.8796 4.90615 11.0939C5.12047 11.3083 5.41116 11.4287 5.71427 11.4287H10.2857C10.5888 11.4287 10.8795 11.3083 11.0938 11.0939C11.3081 10.8796 11.4286 10.5889 11.4286 10.2858V5.71439C11.4286 5.41129 11.3081 5.1206 11.0938 4.90627C10.8795 4.69194 10.5888 4.57153 10.2857 4.57153Z" fill="#949494"/>
-</svg>
-
diff --git a/frontend/src/assets/sync.svg b/frontend/src/assets/sync.svg
deleted file mode 100644
index 4733bbdb..00000000
--- a/frontend/src/assets/sync.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#747474"><path d="M.01 0h24v24h-24V0z" fill="none"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/three-dots.svg b/frontend/src/assets/three-dots.svg
deleted file mode 100644
index 6462b942..00000000
--- a/frontend/src/assets/three-dots.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="25" viewBox="0 0 10 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 3.5C3.9 3.5 3 4.4 3 5.5C3 6.6 3.9 7.5 5 7.5C6.1 7.5 7 6.6 7 5.5C7 4.4 6.1 3.5 5 3.5ZM5 17.5C3.9 17.5 3 18.4 3 19.5C3 20.6 3.9 21.5 5 21.5C6.1 21.5 7 20.6 7 19.5C7 18.4 6.1 17.5 5 17.5ZM5 10.5C3.9 10.5 3 11.4 3 12.5C3 13.6 3.9 14.5 5 14.5C6.1 14.5 7 13.6 7 12.5C7 11.4 6.1 10.5 5 10.5Z" fill="#747474"/>
-</svg>
diff --git a/frontend/src/assets/tool.svg b/frontend/src/assets/tool.svg
deleted file mode 100644
index 3b4df3e3..00000000
--- a/frontend/src/assets/tool.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.82047 15.07H3.23047C2.40047 15.07 1.73047 14.4 1.73047 13.57V10.98C1.73047 10.58 1.89047 10.2 2.17047 9.91999L4.38047 7.70999C4.58047 7.50999 4.89047 7.50999 5.09047 7.70999C5.29047 7.90999 5.29047 8.21999 5.09047 8.41999L2.88047 10.63C2.78626 10.7223 2.73235 10.8481 2.73047 10.98V13.57C2.73047 13.85 2.95047 14.07 3.23047 14.07H5.82047C5.95047 14.07 6.08047 14.02 6.17047 13.92L8.38047 11.71C8.58047 11.51 8.89047 11.51 9.09047 11.71C9.29047 11.91 9.29047 12.22 9.09047 12.42L6.88047 14.63C6.60047 14.91 6.22047 15.07 5.82047 15.07ZM12.8505 8.44999C12.7849 8.45079 12.7199 8.43786 12.6596 8.41202C12.5993 8.38619 12.5451 8.34803 12.5005 8.29999C12.3005 8.09999 12.3005 7.78999 12.5005 7.58999L14.6005 5.48999C14.7905 5.29999 14.7905 4.97999 14.6005 4.77999L12.0105 2.18999C11.915 2.09844 11.7878 2.04732 11.6555 2.04732C11.5232 2.04732 11.396 2.09844 11.3005 2.18999L9.14047 4.34999C8.94047 4.54999 8.63047 4.54999 8.43047 4.34999C8.23047 4.14999 8.23047 3.83999 8.43047 3.63999L10.5905 1.47999C11.1605 0.90999 12.1405 0.90999 12.7105 1.47999L15.3005 4.06999C15.8805 4.64999 15.8805 5.60999 15.3005 6.18999L13.2005 8.28999C13.1005 8.38999 12.9705 8.43999 12.8505 8.43999V8.44999Z" fill="#5D5D5D"/>
-<path d="M11.6305 15.0605C11.2305 15.0605 10.8505 14.9005 10.5705 14.6205L8.38047 12.4305C8.18047 12.2305 8.18047 11.9205 8.38047 11.7205C8.58047 11.5205 8.89047 11.5205 9.09047 11.7205L11.2805 13.9105C11.4705 14.1005 11.8005 14.1005 11.9905 13.9105L14.5805 11.3205C14.7705 11.1305 14.7705 10.8105 14.5805 10.6105L12.3905 8.42055C12.1905 8.22055 12.1905 7.91055 12.3905 7.71055C12.5905 7.51055 12.9005 7.51055 13.1005 7.71055L15.2905 9.90055C15.8705 10.4805 15.8705 11.4405 15.2905 12.0205L12.7005 14.6105C12.4205 14.8905 12.0405 15.0505 11.6405 15.0505L11.6305 15.0605Z" fill="#5D5D5D"/>
-<path d="M8.98125 12.8195C8.91567 12.8203 8.85066 12.8073 8.79038 12.7815C8.7301 12.7557 8.6759 12.7175 8.63125 12.6695L2.09125 6.13945C1.51125 5.55945 1.51125 4.59945 2.09125 4.01945L4.68125 1.42945C5.25125 0.859453 6.23125 0.859453 6.80125 1.42945L13.3412 7.96945C13.5412 8.16945 13.5412 8.47945 13.3412 8.67945C13.1412 8.87945 12.8312 8.87945 12.6312 8.67945L6.09125 2.13945C5.99574 2.0479 5.86855 1.99678 5.73625 1.99678C5.60395 1.99678 5.47676 2.0479 5.38125 2.13945L2.79125 4.72945C2.60125 4.91945 2.60125 5.23945 2.79125 5.43945L9.33125 11.9795C9.53125 12.1795 9.53125 12.4895 9.33125 12.6895C9.23125 12.7895 9.10125 12.8395 8.98125 12.8395V12.8195Z" fill="#5D5D5D"/>
-<path d="M6.28906 6.01055C6.22349 6.01135 6.15847 5.99841 6.09819 5.97258C6.03791 5.94675 5.98371 5.90858 5.93906 5.86055C5.73906 5.66055 5.73906 5.35055 5.93906 5.15055L7.87906 3.21055C8.07906 3.01055 8.38906 3.01055 8.58906 3.21055C8.78906 3.41055 8.78906 3.72055 8.58906 3.92055L6.64906 5.86055C6.54906 5.96055 6.41906 6.01055 6.29906 6.01055H6.28906ZM8.31906 8.04055C8.25349 8.04135 8.18847 8.02841 8.12819 8.00258C8.06791 7.97675 8.01371 7.93858 7.96906 7.89055C7.76906 7.69055 7.76906 7.38055 7.96906 7.18055L9.90906 5.24055C10.1091 5.04055 10.4191 5.04055 10.6191 5.24055C10.8191 5.44055 10.8191 5.75055 10.6191 5.95055L8.67906 7.89055C8.57906 7.99055 8.44906 8.04055 8.32906 8.04055H8.31906ZM10.3491 10.0705C10.2835 10.0713 10.2185 10.0584 10.1582 10.0326C10.0979 10.0067 10.0437 9.96858 9.99906 9.92055C9.79906 9.72055 9.79906 9.41055 9.99906 9.21055L11.9391 7.27055C12.1391 7.07055 12.4491 7.07055 12.6491 7.27055C12.8491 7.47055 12.8491 7.78055 12.6491 7.98055L10.7091 9.92055C10.6091 10.0205 10.4791 10.0705 10.3591 10.0705H10.3491Z" fill="#5D5D5D"/>
-</svg>
diff --git a/frontend/src/assets/trash.svg b/frontend/src/assets/trash.svg
deleted file mode 100644
index d0e4546a..00000000
--- a/frontend/src/assets/trash.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="15" viewBox="0 0 12 15" fill="none">
-  <path d="M0.857143 13.3333C0.857143 13.7754 1.03775 14.1993 1.35925 14.5118C1.68074 14.8244 2.11677 15 2.57143 15H9.42857C9.88323 15 10.3193 14.8244 10.6408 14.5118C10.9622 14.1993 11.1429 13.7754 11.1429 13.3333V3.33333H0.857143V13.3333ZM2.57143 5H9.42857V13.3333H2.57143V5ZM9 0.833333L8.14286 0H3.85714L3 0.833333H0V2.5H12V0.833333H9Z" fill="#747474"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/unpin.svg b/frontend/src/assets/unpin.svg
deleted file mode 100644
index edb46d5d..00000000
--- a/frontend/src/assets/unpin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-off-icon lucide-pin-off"><path d="M12 17v5"/><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/><path d="m2 2 20 20"/><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/upload.svg b/frontend/src/assets/upload.svg
deleted file mode 100644
index 6ec01239..00000000
--- a/frontend/src/assets/upload.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="gray" fill-opacity="0.85"/>
-</svg>
diff --git a/frontend/src/assets/user.svg b/frontend/src/assets/user.svg
deleted file mode 100644
index 970bffb5..00000000
--- a/frontend/src/assets/user.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 855.6 867.3" style="enable-background:new 0 0 855.6 867.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-</style>
-<g id="Layer_2_00000062898455470481303740000016245162613792141746_">
-	<g id="avatar">
-		
-			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="281.0639" y1="214.2932" x2="737.1139" y2="670.3433" gradientTransform="matrix(1 0 0 -1 0 874.2527)">
-			<stop  offset="0" style="stop-color:#526676"/>
-			<stop  offset="1" style="stop-color:#6B9DBF"/>
-		</linearGradient>
-		<path class="st0" d="M725.1,663.3c-0.8,11.7-8,19.2-17.7,25c-25,14.9-51.5,26.3-79.2,35.1c-70.2,22.4-142.4,30.9-215.8,29.8
-			c-62.5-0.9-123.7-9.8-183.4-28.1c-32-9.8-62.8-22.3-91.7-39.3c-8.9-5.3-13.8-12.1-15-22.5c-2.5-21.2-2.4-42.6,0.3-63.8
-			c3.1-24,18-40.7,35.5-55.3c19.7-16.5,43.2-26,67.6-33c28.6-8.3,57.4-15.8,86-23.8c9.8,25.7,22.8,47,39,63.5
-			c22.4,22.8,50.2,35.3,78.4,35.3c41.9,0,80.6-26.8,103.4-71.6c4.2-8.3,8-16.8,11.3-25.5c7.4,2.5,14.9,4.6,22.5,6.5
-			c16.2,4.1,32.5,7.3,48.6,11.6c26.3,7.1,51.6,16.5,73.8,32.9c24.1,17.8,37.6,41.5,38.6,71.3C727.8,628.7,726.2,646,725.1,663.3z
-			 M317.7,351c2.7,2.5,4.7,5.7,5.8,9.3c3,10.3,4.8,21.1,8.2,31.3c8.2,24.8,20.8,47.4,41,64.4c18.7,15.8,40.5,23.3,61.9,23.3
-			c31.7,0,62.5-16.5,81.5-47.2c13.6-22.1,21.8-45.9,26.2-71.3c0.6-3.4,1.7-8,4.1-9.4c21.5-13,25.1-34,25.7-56.2
-			c0.2-8.3-1.7-9.6-8-10.3c0-17,0.6-33.8-0.2-50.6c-0.4-10.4-2.1-20.6-5-30.6c-8.3-27.4-25.6-46.7-53.6-55.1
-			c-4.3-1.3-10.5,0.2-12.9-3.9c-11-19.4-31.6-25.6-54.4-25.6c-19.3,0-40.2,4.4-58.6,9.2c-21.1,5.4-40.2,14.6-54.8,31.5
-			c-20.4,23.8-26.2,52.1-24.7,82.4c0.7,14.6,2.9,29.1,4.4,44.1c-10.9,0.9-11.2,4.8-11,13.6C293.9,321.5,301.4,336.5,317.7,351z"/>
-	</g>
-</g>
-</svg>
diff --git a/frontend/src/assets/warn.svg b/frontend/src/assets/warn.svg
deleted file mode 100644
index fdac9ad1..00000000
--- a/frontend/src/assets/warn.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 1.83989C16.5202 2.71758 17.7826 3.97997 18.6603 5.50017C19.538 7.02038 20 8.74483 20 10.5002C20 12.2556 19.5379 13.98 18.6602 15.5002C17.7825 17.0204 16.5201 18.2828 14.9999 19.1605C13.4797 20.0381 11.7552 20.5002 9.99984 20.5001C8.24446 20.5001 6.52002 20.038 4.99984 19.1603C3.47965 18.2826 2.21729 17.0202 1.33963 15.5C0.46198 13.9797 -4.45897e-05 12.2553 3.22765e-09 10.4999L0.00500012 10.1759C0.0610032 8.44888 0.563548 6.76585 1.46364 5.29089C2.36373 3.81592 3.63065 2.59934 5.14089 1.75977C6.65113 0.920205 8.35315 0.486289 10.081 0.50033C11.8089 0.514371 13.5036 0.97589 15 1.83989ZM10 13.4999C9.73478 13.4999 9.48043 13.6052 9.29289 13.7928C9.10536 13.9803 9 14.2347 9 14.4999V14.5099C9 14.7751 9.10536 15.0295 9.29289 15.217C9.48043 15.4045 9.73478 15.5099 10 15.5099C10.2652 15.5099 10.5196 15.4045 10.7071 15.217C10.8946 15.0295 11 14.7751 11 14.5099V14.4999C11 14.2347 10.8946 13.9803 10.7071 13.7928C10.5196 13.6052 10.2652 13.4999 10 13.4999ZM10 6.49989C9.73478 6.49989 9.48043 6.60525 9.29289 6.79279C9.10536 6.98032 9 7.23468 9 7.49989V11.4999C9 11.7651 9.10536 12.0195 9.29289 12.207C9.48043 12.3945 9.73478 12.4999 10 12.4999C10.2652 12.4999 10.5196 12.3945 10.7071 12.207C10.8946 12.0195 11 11.7651 11 11.4999V7.49989C11 7.23468 10.8946 6.98032 10.7071 6.79279C10.5196 6.60525 10.2652 6.49989 10 6.49989Z" fill="#EA4335"/>
-</svg>
diff --git a/frontend/src/components/ActionButtons.tsx b/frontend/src/components/ActionButtons.tsx
index cc161017..92188f9e 100644
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -10,8 +10,9 @@ import {
   setConversation,
   updateConversationId,
 } from '../conversation/conversationSlice';
-import { Button } from './ui/button';
+import { IconButton } from './ui/icon-button';
 import ProfileButton from './ProfileButton';
+import { cn } from '@/lib/utils';
 
 interface ActionButtonsProps {
   className?: string;
@@ -45,36 +46,38 @@ export default function ActionButtons({
   };
   return (
     <div
-      className={`fixed top-0 z-10 flex h-16 flex-col justify-center transition-all duration-300 ${
-        isArtifactOpen ? 'right-[calc(50%+1rem)]' : 'right-4'
-      }`}
+      className={cn(
+        'fixed top-0 z-10 flex h-16 flex-col justify-center transition-[right] duration-300 ease-in-out',
+        isArtifactOpen ? 'right-[calc(50%+1rem)]' : 'right-4',
+      )}
     >
-      <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
+      <div className={cn('flex items-center gap-2 sm:gap-4', className)}>
         {showNewChat && (
-          <Button
-            type="button"
-            variant="ghost"
+          <IconButton
+            label={t('newChat')}
+            side="bottom"
+            variant="ghost-muted"
             size="icon"
-            title={t('actionButtons.openNewChat')}
+            shape="pill"
             onClick={newChat}
-            className="text-muted-foreground hover:text-foreground rounded-full lg:hidden"
+            className="lg:hidden"
           >
-            <Plus className="size-5" strokeWidth={1.75} aria-label="NewChat" />
-          </Button>
+            <Plus aria-hidden />
+          </IconButton>
         )}
 
         {showShare && conversationId && (
           <>
-            <Button
-              type="button"
-              variant="ghost"
+            <IconButton
+              label={t('actionButtons.share')}
+              side="bottom"
+              variant="ghost-muted"
               size="icon"
-              title={t('actionButtons.share')}
+              shape="pill"
               onClick={() => setShareModalState(true)}
-              className="text-muted-foreground hover:text-foreground rounded-full"
             >
-              <Share className="size-5" strokeWidth={1.75} aria-label="share" />
-            </Button>
+              <Share aria-hidden />
+            </IconButton>
             {isShareModalOpen && (
               <ShareConversationModal
                 close={() => setShareModalState(false)}
diff --git a/frontend/src/components/AdminRoute.test.tsx b/frontend/src/components/AdminRoute.test.tsx
index d3650ab8..64bd7b23 100644
--- a/frontend/src/components/AdminRoute.test.tsx
+++ b/frontend/src/components/AdminRoute.test.tsx
@@ -23,7 +23,10 @@ function renderWith(roles: string[] | null) {
 
 describe('AdminRoute', () => {
   it('hides content until roles are resolved', () => {
-    expect(renderWith(null)).not.toContain('admin-secret');
+    const html = renderWith(null);
+    expect(html).not.toContain('admin-secret');
+    expect(html).toContain('data-slot="loading-state"');
+    expect(html).toContain('data-fill="screen"');
   });
 
   it('redirects (renders nothing) for non-admins', () => {
diff --git a/frontend/src/components/AdminRoute.tsx b/frontend/src/components/AdminRoute.tsx
index 90e9a5cc..b599946e 100644
--- a/frontend/src/components/AdminRoute.tsx
+++ b/frontend/src/components/AdminRoute.tsx
@@ -5,7 +5,7 @@ import {
   selectIsAdmin,
   selectRolesResolved,
 } from '../preferences/preferenceSlice';
-import Spinner from './Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
 
 /**
  * Cosmetic route guard — NOT a security boundary. The server enforces admin
@@ -22,11 +22,7 @@ export default function AdminRoute({
   const rolesResolved = useSelector(selectRolesResolved);
 
   if (!rolesResolved) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <Spinner />
-      </div>
-    );
+    return <LoadingState fill="screen" />;
   }
   if (!isAdmin) {
     return <Navigate to="/" replace />;
diff --git a/frontend/src/components/ArtifactSidebar.test.tsx b/frontend/src/components/ArtifactSidebar.test.tsx
new file mode 100644
index 00000000..43a2d6ed
--- /dev/null
+++ b/frontend/src/components/ArtifactSidebar.test.tsx
@@ -0,0 +1,108 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => null,
+}));
+
+vi.mock('../hooks', () => ({
+  useDarkTheme: () => [false],
+}));
+
+const documentMock = vi.fn();
+const legacyMock = vi.fn();
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getDocumentArtifact: (...args: unknown[]) => documentMock(...args),
+    getArtifact: (...args: unknown[]) => legacyMock(...args),
+  },
+}));
+
+import ArtifactSidebar from './ArtifactSidebar';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('ArtifactSidebar', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    documentMock.mockReset();
+    legacyMock.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it('shows a failed load as an alert with Retry that refetches', async () => {
+    documentMock.mockResolvedValue({ ok: false, status: 500 });
+    legacyMock.mockRejectedValue(new Error('offline'));
+
+    await act(async () => {
+      root.render(
+        <ArtifactSidebar
+          isOpen
+          onClose={vi.fn()}
+          artifactId="a1"
+          conversationId="c1"
+          variant="split"
+        />,
+      );
+    });
+
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain('components.artifact.fetchFailed');
+    expect(documentMock).toHaveBeenCalledTimes(1);
+
+    const retry = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'retry',
+    );
+    await act(async () => retry!.click());
+    expect(documentMock).toHaveBeenCalledTimes(2);
+  });
+  // L9: the raw-JSON fallback is a code block in the padded panel, so it is a
+  // filled Card around the mono recipe and scrolls inside the panel.
+  it('shows an unknown artifact type as a filled Card code block', async () => {
+    documentMock.mockResolvedValue({ ok: false, status: 404 });
+    legacyMock.mockResolvedValue({
+      success: true,
+      artifact: { artifact_type: 'mystery', data: { value: 42 } },
+    });
+
+    await act(async () => {
+      root.render(
+        <ArtifactSidebar
+          isOpen
+          onClose={vi.fn()}
+          artifactId="a2"
+          conversationId="c1"
+          variant="split"
+        />,
+      );
+    });
+
+    const pre = container.querySelector('pre')!;
+    expect(pre.textContent).toContain('"mystery"');
+    expect(pre.className.split(' ')).toEqual(
+      expect.arrayContaining([
+        'font-mono',
+        'text-xs',
+        'whitespace-pre-wrap',
+        'wrap-break-word',
+      ]),
+    );
+    const card = pre.parentElement!;
+    expect(card.getAttribute('data-slot')).toBe('card');
+    expect(card.getAttribute('data-variant')).toBe('filled');
+    expect(card.getAttribute('data-padding')).toBe('sm');
+  });
+});
diff --git a/frontend/src/components/ArtifactSidebar.tsx b/frontend/src/components/ArtifactSidebar.tsx
index fe3ddaaf..7f465d06 100644
--- a/frontend/src/components/ArtifactSidebar.tsx
+++ b/frontend/src/components/ArtifactSidebar.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -9,14 +11,21 @@ import {
 } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import remarkGfm from 'remark-gfm';
 
+import { markdownHeadings } from '@/lib/markdown';
+import { cn } from '@/lib/utils';
+
 import userService from '../api/services/userService';
 import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import { isDocumentArtifact, type DocumentArtifact } from './artifactViewUtils';
 import CopyButton from './CopyButton';
 import DocumentArtifactView from './DocumentArtifactView';
-import Spinner from './Spinner';
+import { EmptyState } from '@/components/ui/empty-state';
+import { LoadingState } from '@/components/ui/loading-state';
+import { Badge } from './ui/badge';
 import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { IconButton } from './ui/icon-button';
 import { Sheet, SheetContent } from './ui/sheet';
 
 type TodoItem = {
@@ -58,15 +67,24 @@ type ArtifactSidebarProps = {
   variant?: 'overlay' | 'split';
 };
 
-const ARTIFACT_TITLE_BY_TYPE: Record<ArtifactData['artifact_type'], string> = {
-  todo_list: 'Todo List',
-  note: 'Note',
-  memory: 'Memory',
+const ARTIFACT_TITLE_KEY_BY_TYPE: Record<
+  ArtifactData['artifact_type'],
+  string
+> = {
+  todo_list: 'components.artifact.types.todoList',
+  note: 'components.artifact.types.note',
+  memory: 'components.artifact.types.memory',
 };
 
-function getArtifactTitle(artifact: ArtifactData | null, toolName?: string) {
-  if (artifact)
-    return ARTIFACT_TITLE_BY_TYPE[artifact.artifact_type] ?? 'Artifact';
+function getArtifactTitle(
+  t: TFunction,
+  artifact: ArtifactData | null,
+  toolName?: string,
+) {
+  if (artifact) {
+    const key = ARTIFACT_TITLE_KEY_BY_TYPE[artifact.artifact_type];
+    return key ? t(key) : t('components.artifact.fallbackTitle');
+  }
 
   const formattedToolName = (toolName ?? '')
     .replace(/_/g, ' ')
@@ -74,48 +92,53 @@ function getArtifactTitle(artifact: ArtifactData | null, toolName?: string) {
     .trim()
     .replace(/\b\w/g, (c) => c.toUpperCase());
 
-  return formattedToolName || 'Artifact';
+  return formattedToolName || t('components.artifact.fallbackTitle');
 }
 
 function TodoListView({ data }: { data: TodoArtifactData }) {
+  const { t } = useTranslation();
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="mb-4 flex items-center justify-end">
         <div className="flex gap-2 text-xs">
-          <span className="rounded-full bg-green-100 px-2 py-1 text-green-700 dark:bg-green-900/30 dark:text-green-400">
-            {data.completed_count} done
-          </span>
-          <span className="rounded-full bg-blue-100 px-2 py-1 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
-            {data.open_count} open
-          </span>
+          <Badge variant="success">
+            {t('components.artifact.todo.done', {
+              count: data.completed_count,
+            })}
+          </Badge>
+          <Badge variant="info">
+            {t('components.artifact.todo.open', { count: data.open_count })}
+          </Badge>
         </div>
       </div>
       <div className="flex-1 overflow-y-auto">
         {data.items.length === 0 ? (
-          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
-            No todos yet
+          <p className="text-muted-foreground text-center text-sm">
+            {t('components.artifact.todo.empty')}
           </p>
         ) : (
           <ul className="space-y-2">
             {data.items.map((item, index) => (
               <li
                 key={`${item.todo_id}-${index}`}
-                className={`flex items-start gap-3 rounded-lg border p-3 ${
+                className={cn(
+                  'flex items-start gap-3 rounded-lg border p-3',
                   item.status === 'completed'
-                    ? 'border-green-300 dark:border-green-800'
-                    : 'border-gray-200 dark:border-gray-700'
-                }`}
+                    ? 'border-success/50'
+                    : 'border-border',
+                )}
               >
                 <span
-                  className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${
+                  className={cn(
+                    'mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border-2',
                     item.status === 'completed'
-                      ? 'border-green-500 bg-green-500 text-white'
-                      : 'border-gray-300 dark:border-gray-600'
-                  }`}
+                      ? 'border-success bg-success text-success-foreground'
+                      : 'border-input',
+                  )}
                 >
                   {item.status === 'completed' && (
                     <svg
-                      className="h-3 w-3"
+                      className="size-3"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -131,15 +154,18 @@ function TodoListView({ data }: { data: TodoArtifactData }) {
                 </span>
                 <div className="flex-1">
                   <p
-                    className={`text-sm ${
+                    className={cn(
+                      'text-sm',
                       item.status === 'completed'
-                        ? 'text-gray-500 line-through dark:text-gray-400'
-                        : 'text-gray-900 dark:text-white'
-                    }`}
+                        ? 'text-muted-foreground line-through'
+                        : 'text-foreground',
+                    )}
                   >
                     {item.title}
                   </p>
-                  <p className="mt-1 text-xs text-gray-400">#{item.todo_id}</p>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    #{item.todo_id}
+                  </p>
                 </div>
               </li>
             ))}
@@ -151,24 +177,26 @@ function TodoListView({ data }: { data: TodoArtifactData }) {
 }
 
 function NoteView({ data }: { data: NoteArtifactData }) {
+  const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <div className="mb-4 flex items-center justify-end">
         <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-500 dark:text-gray-400">
-            {data.line_count} lines
+          <span className="text-muted-foreground text-xs">
+            {t('components.artifact.note.lines', { count: data.line_count })}
           </span>
-          <CopyButton textToCopy={data.content || ''} />
+          <CopyButton textToCopy={data.content || ''} side="bottom" />
         </div>
       </div>
       <div className="flex-1 overflow-y-auto p-4">
         {data.content ? (
-          <div className="flex flex-col gap-3 text-sm leading-normal wrap-break-word whitespace-pre-wrap text-gray-800 dark:text-gray-200">
+          <div className="text-foreground flex flex-col gap-3 text-sm leading-normal wrap-break-word whitespace-pre-wrap">
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{
+                ...markdownHeadings,
                 code(props) {
                   const {
                     children,
@@ -185,17 +213,19 @@ function NoteView({ data }: { data: NoteArtifactData }) {
                   return match ? (
                     <div className="group border-border relative my-2 overflow-hidden rounded-xl border">
                       <div className="bg-muted flex items-center justify-between px-2 py-1">
-                        <span className="text-foreground dark:text-foreground text-xs font-medium">
+                        <span className="text-foreground text-xs font-medium">
                           {language}
                         </span>
                         <CopyButton
                           textToCopy={String(children).replace(/\n$/, '')}
+                          side="bottom"
                         />
                       </div>
                       <SyntaxHighlighter
                         {...rest}
                         PreTag="div"
                         language={language}
+                        /* eslint-disable-next-line shadcn/no-inline-styles -- SyntaxHighlighter's style prop is its Prism theme object (oneLight / vscDarkPlus), picked by theme at runtime; it is not CSS. See DESIGN.md, Approved exceptions. */
                         style={isDarkTheme ? vscDarkPlus : oneLight}
                         customStyle={{
                           margin: 0,
@@ -208,7 +238,7 @@ function NoteView({ data }: { data: NoteArtifactData }) {
                     </div>
                   ) : (
                     <code
-                      className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal"
+                      className="bg-accent rounded-md px-2 py-1 text-xs font-normal"
                       {...rest}
                     >
                       {children}
@@ -231,31 +261,19 @@ function NoteView({ data }: { data: NoteArtifactData }) {
                 },
                 a({ children, href }) {
                   return (
-                    <a
-                      href={href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:underline dark:text-blue-400"
-                    >
-                      {children}
-                    </a>
+                    <Button variant="link" size="inline" asChild>
+                      <a href={href} target="_blank" rel="noopener noreferrer">
+                        {children}
+                      </a>
+                    </Button>
                   );
                 },
                 p({ children }) {
                   return <p className="whitespace-pre-wrap">{children}</p>;
                 },
-                h1({ children }) {
-                  return <h1 className="text-xl font-bold">{children}</h1>;
-                },
-                h2({ children }) {
-                  return <h2 className="text-lg font-bold">{children}</h2>;
-                },
-                h3({ children }) {
-                  return <h3 className="text-base font-bold">{children}</h3>;
-                },
                 blockquote({ children }) {
                   return (
-                    <blockquote className="border-l-4 border-gray-300 pl-4 italic dark:border-gray-600">
+                    <blockquote className="border-border border-l-4 pl-4 italic">
                       {children}
                     </blockquote>
                   );
@@ -266,7 +284,9 @@ function NoteView({ data }: { data: NoteArtifactData }) {
             </ReactMarkdown>
           </div>
         ) : (
-          <p className="text-sm text-gray-500 dark:text-gray-400">Empty note</p>
+          <p className="text-muted-foreground text-sm">
+            {t('components.artifact.note.empty')}
+          </p>
         )}
       </div>
     </div>
@@ -283,6 +303,7 @@ export default function ArtifactSidebar({
 }: ArtifactSidebarProps) {
   const lastSuccessfulTodoArtifactIdRef = React.useRef<string | null>(null);
   const currentFetchIdRef = React.useRef<string | null>(null);
+  const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [artifact, setArtifact] = useState<ArtifactData | null>(null);
   const [documentArtifact, setDocumentArtifact] =
@@ -294,7 +315,8 @@ export default function ArtifactSidebar({
     artifactId,
   );
 
-  const title = documentArtifact?.title || getArtifactTitle(artifact, toolName);
+  const title =
+    documentArtifact?.title || getArtifactTitle(t, artifact, toolName);
 
   // Reset last successful todo artifact ID when conversation changes
   useEffect(() => {
@@ -414,15 +436,15 @@ export default function ArtifactSidebar({
           // Ensure we show a visible error state instead of rendering nothing.
           const message =
             data?.message ||
-            (status === 404 ? 'Artifact not found' : null) ||
-            'Failed to load artifact';
+            (status === 404 ? t('components.artifact.notFound') : null) ||
+            t('components.artifact.loadFailed');
           setError(message);
           setLoading(false);
         })
         .catch(() => {
           // Ignore if this is not the current fetch
           if (currentFetchIdRef.current !== fetchId) return;
-          setError('Failed to fetch artifact');
+          setError(t('components.artifact.fetchFailed'));
           setLoading(false);
         });
     }
@@ -437,17 +459,26 @@ export default function ArtifactSidebar({
 
   const renderContent = () => {
     if (loading) {
-      return (
-        <div className="flex h-full items-center justify-center">
-          <Spinner />
-        </div>
-      );
+      return <LoadingState fill="parent" />;
     }
     if (error) {
       return (
-        <div className="flex h-full items-center justify-center">
-          <p className="text-sm text-red-500">{error}</p>
-        </div>
+        <EmptyState
+          tone="destructive"
+          size="sm"
+          illustration="none"
+          title={error}
+          className="h-full"
+          action={
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setRefreshNonce((n) => n + 1)}
+            >
+              {t('retry')}
+            </Button>
+          }
+        />
       );
     }
     if (documentArtifact) {
@@ -462,8 +493,8 @@ export default function ArtifactSidebar({
     if (!artifact) {
       return (
         <div className="flex h-full items-center justify-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            Artifact not found
+          <p className="text-muted-foreground text-sm">
+            {t('components.artifact.notFound')}
           </p>
         </div>
       );
@@ -475,9 +506,15 @@ export default function ArtifactSidebar({
         return <NoteView data={artifact.data} />;
       default:
         return (
-          <pre className="text-xs text-gray-600 dark:text-gray-400">
-            {JSON.stringify(artifact, null, 2)}
-          </pre>
+          <Card
+            variant="filled"
+            padding="sm"
+            className="max-h-full overflow-auto"
+          >
+            <pre className="text-muted-foreground font-mono text-xs wrap-break-word whitespace-pre-wrap">
+              {JSON.stringify(artifact, null, 2)}
+            </pre>
+          </Card>
         );
     }
   };
@@ -490,21 +527,21 @@ export default function ArtifactSidebar({
         {/* Space for top bar / actions */}
         <div className="h-14 shrink-0" />
         {/* Artifact panel */}
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-transparent dark:border-gray-700">
+        <div className="border-border flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border bg-transparent">
           <div className="flex w-full items-center justify-between px-4 py-2">
-            <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            <span className="text-muted-foreground text-sm font-medium">
               {title}
             </span>
-            <Button
-              type="button"
+            <IconButton
+              label={t('agents.close')}
+              side="bottom"
               variant="ghost"
               size="icon-sm"
-              className="rounded-full"
+              shape="pill"
               onClick={onClose}
-              aria-label="Close"
             >
-              <X className="h-3 w-3" />
-            </Button>
+              <X aria-hidden="true" className="size-4" />
+            </IconButton>
           </div>
           <div className="flex-1 overflow-hidden p-4">{renderContent()}</div>
         </div>
@@ -522,25 +559,27 @@ export default function ArtifactSidebar({
       <SheetContent
         side="right"
         showCloseButton={false}
-        title={title || 'Artifact preview'}
-        className="dark:bg-card bg-card flex h-full w-80 flex-col gap-0 border-l border-[#9ca3af]/10 p-0 sm:w-96 sm:max-w-none"
+        title={title || t('components.artifact.preview')}
+        className="h-full w-80 p-0 sm:w-96 sm:max-w-none"
       >
-        <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
-          <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
-            {title}
-          </span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="rounded-full"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            <X className="h-4 w-4" />
-          </Button>
+        <div className="flex min-h-0 flex-1 flex-col">
+          <div className="border-border flex w-full items-center justify-between border-b px-4 py-3">
+            <span className="text-muted-foreground text-sm font-medium">
+              {title}
+            </span>
+            <IconButton
+              label={t('agents.close')}
+              side="bottom"
+              variant="ghost"
+              size="icon"
+              shape="pill"
+              onClick={onClose}
+            >
+              <X aria-hidden="true" className="size-4" />
+            </IconButton>
+          </div>
+          <div className="flex-1 overflow-hidden p-4">{renderContent()}</div>
         </div>
-        <div className="flex-1 overflow-hidden p-4">{renderContent()}</div>
       </SheetContent>
     </Sheet>
   );
diff --git a/frontend/src/components/Chunks.test.tsx b/frontend/src/components/Chunks.test.tsx
new file mode 100644
index 00000000..0124a09e
--- /dev/null
+++ b/frontend/src/components/Chunks.test.tsx
@@ -0,0 +1,160 @@
+import { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => null,
+}));
+
+vi.mock('../hooks', () => ({
+  useDarkTheme: () => [false],
+  useDebouncedValue: (value: unknown) => value,
+  useLoaderState: (initial: boolean) => useState(initial),
+  useMediaQuery: () => ({ isMobile: false }),
+  useOutsideAlerter: () => undefined,
+}));
+
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getDocumentChunks: vi.fn(async () => ({
+      ok: true,
+      json: async () => ({
+        page: 1,
+        per_page: 5,
+        total: 1,
+        chunks: [{ doc_id: 'c1', text: 'Late pickup clause', metadata: {} }],
+      }),
+    })),
+  },
+}));
+
+import Chunks from './Chunks';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const setInputValue = (input: HTMLInputElement, value: string) => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    'value',
+  )!.set!;
+  setter.call(input, value);
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+};
+
+describe('Chunks', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (onFileSelect = vi.fn()) => {
+    await act(async () => {
+      root.render(
+        <Chunks
+          documentId="doc"
+          documentName="Contracts"
+          handleGoBack={vi.fn()}
+          onFileSearch={() => [
+            { name: 'msa.pdf', path: 'contracts/msa.pdf', isFile: true },
+            { name: 'sla.docx', path: 'contracts/sla.docx', isFile: true },
+          ]}
+          onFileSelect={onFileSelect}
+        />,
+      );
+    });
+    return onFileSelect;
+  };
+
+  it('picks a file search result with the keyboard', async () => {
+    const onFileSelect = await render();
+    const input = container.querySelector<HTMLInputElement>(
+      '[data-slot="command-input"]',
+    )!;
+    expect(input).not.toBeNull();
+
+    await act(async () => setInputValue(input, 'contracts'));
+    const items = container.querySelectorAll('[data-slot="command-item"]');
+    expect(items).toHaveLength(2);
+
+    await act(async () => {
+      input.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+      );
+    });
+    await act(async () => {
+      input.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    expect(onFileSelect).toHaveBeenCalledWith('contracts/sla.docx');
+  });
+
+  it('renders each chunk tile as a button', async () => {
+    await render();
+    const tile = container.querySelector<HTMLButtonElement>(
+      'button[data-slot="card"]',
+    );
+    expect(tile).not.toBeNull();
+    expect(tile!.textContent).toContain('Late pickup clause');
+    expect(tile!.className).not.toContain('hover:scale-105');
+  });
+
+  const renderPath = async (props: {
+    onPathSelect?: (depth: number) => void;
+    handleGoBack?: () => void;
+  }) => {
+    await act(async () => {
+      root.render(
+        <Chunks
+          documentId="doc"
+          documentName="Contracts"
+          handleGoBack={props.handleGoBack ?? vi.fn()}
+          path="legal/2024/msa.pdf"
+          displayPath="legal/2024/msa.pdf"
+          onPathSelect={props.onPathSelect}
+        />,
+      );
+    });
+  };
+
+  const crumbButton = (label: string) =>
+    Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="breadcrumb-link"]',
+      ),
+    ).find((el) => el.textContent === label);
+
+  it('opens the root and parent folders from the path crumbs', async () => {
+    const onPathSelect = vi.fn();
+    await renderPath({ onPathSelect });
+
+    await act(async () => crumbButton('Contracts')!.click());
+    expect(onPathSelect).toHaveBeenLastCalledWith(0);
+    await act(async () => crumbButton('2024')!.click());
+    expect(onPathSelect).toHaveBeenLastCalledWith(2);
+    // The file is the current crumb, not a link.
+    expect(crumbButton('msa.pdf')).toBeUndefined();
+  });
+
+  it('without onPathSelect the root goes back and folders are text', async () => {
+    const handleGoBack = vi.fn();
+    await renderPath({ handleGoBack });
+
+    await act(async () => crumbButton('Contracts')!.click());
+    expect(handleGoBack).toHaveBeenCalledTimes(1);
+    expect(crumbButton('legal')).toBeUndefined();
+    expect(crumbButton('2024')).toBeUndefined();
+  });
+});
diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 8efa7f64..90edd05c 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -1,16 +1,12 @@
-import { Search as SearchIcon } from 'lucide-react';
+import { File, Folder } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { cn, fieldFrame } from '@/lib/utils';
+
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
 import {
-  useDarkTheme,
   useDebouncedValue,
   useLoaderState,
   useMediaQuery,
@@ -21,10 +17,29 @@ import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { ChunkType } from '../settings/types';
 import { formatChunkTokens } from './chunkUtils';
-import Pagination from './DocumentPagination';
 import SkeletonLoader from './SkeletonLoader';
+import PathHeader from './tree/PathHeader';
 import { Button } from './ui/button';
+import { Card } from './ui/card';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './ui/command';
+import { EmptyState } from './ui/empty-state';
 import { Input } from './ui/input';
+import { Pagination } from './ui/pagination';
+
+// The search field's frame: the Input look around a CommandInput (38px,
+// rounded-md, focus ring while the input has keyboard focus). CommandInput's
+// row is 36px with a bottom rule; pt-px + overflow-hidden clips that rule.
+const SEARCH_FRAME = cn(
+  fieldFrame,
+  'border-border has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 h-9.5 overflow-hidden rounded-md pt-px has-[input:focus-visible]:ring-3',
+);
 
 interface LineNumberedTextareaProps {
   value: string;
@@ -51,7 +66,7 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
     onChange(e.target.value);
   };
 
-  const lineHeight = 19.93;
+  const lineHeight = 20;
   const contentLines = value.split('\n').length;
 
   const heightOffset = isMobile ? 200 : 300;
@@ -62,24 +77,30 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   const totalLines = Math.max(contentLines, minLinesForDisplay);
 
   return (
-    <div className={`relative w-full ${className}`}>
-      <div
-        className="pointer-events-none absolute top-0 left-0 w-8 pr-2 text-right font-mono text-xs leading-[19.93px] text-gray-500 select-none lg:w-12 lg:pr-3 lg:text-sm dark:text-gray-400"
-        style={{
-          height: `${totalLines * lineHeight}px`,
-        }}
-      >
+    <div
+      className={cn('relative w-full', className)}
+      style={
+        {
+          '--numbered-height': `${totalLines * lineHeight}px`,
+        } as React.CSSProperties
+      }
+    >
+      <div className="text-muted-foreground pointer-events-none absolute top-0 left-0 h-(--numbered-height) w-8 pr-2 text-right font-mono text-xs leading-5 select-none lg:w-12 lg:pr-3 lg:text-sm">
         {Array.from({ length: totalLines }, (_, i) => (
           <div
             key={i + 1}
-            className="flex h-[19.93px] items-center justify-end leading-[19.93px]"
+            className="flex h-5 items-center justify-end leading-5"
           >
             {i + 1}
           </div>
         ))}
       </div>
       <textarea
-        className={`text-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full resize-none overflow-hidden border-none bg-transparent pl-8 font-['Inter'] text-[13.68px] leading-[19.93px] outline-none focus-visible:ring-[3px] lg:pl-12 dark:text-white ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'} ${!editable ? 'select-none' : ''}`}
+        className={cn(
+          'text-foreground focus-visible:ring-ring/50 focus-visible:border-ring h-(--numbered-height) w-full resize-none overflow-hidden border-none bg-transparent pl-8 text-sm leading-5 outline-none focus-visible:ring-3 lg:pl-12',
+          isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]',
+          !editable && 'select-none',
+        )}
         value={value}
         onChange={editable ? handleChange : undefined}
         onDoubleClick={onDoubleClick}
@@ -87,9 +108,6 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
         aria-label={ariaLabel}
         rows={totalLines}
         readOnly={!editable}
-        style={{
-          height: `${totalLines * lineHeight}px`,
-        }}
       />
     </div>
   );
@@ -111,6 +129,12 @@ interface ChunksProps {
   onFileSelect?: (path: string) => void;
   /** Extra header control, rendered left of the chunk actions. */
   headerAction?: React.ReactNode;
+  /**
+   * Opens a level of the path: 0 is the source root, n the folder made of
+   * the first n path segments. Without it the root crumb calls handleGoBack
+   * and folder crumbs are plain text.
+   */
+  onPathSelect?: (depth: number) => void;
 }
 
 const Chunks: React.FC<ChunksProps> = ({
@@ -122,6 +146,7 @@ const Chunks: React.FC<ChunksProps> = ({
   onFileSearch,
   onFileSelect,
   headerAction,
+  onPathSelect,
 }) => {
   const [fileSearchQuery, setFileSearchQuery] = useState('');
   const [fileSearchResults, setFileSearchResults] = useState<SearchResult[]>(
@@ -130,7 +155,6 @@ const Chunks: React.FC<ChunksProps> = ({
   const searchDropdownRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
   const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(5);
@@ -302,159 +326,137 @@ const Chunks: React.FC<ChunksProps> = ({
 
   const filteredChunks = paginatedChunks;
 
+  // The root crumb returns to the source (TreeBrowser: its top folder;
+  // standalone: back to the source list). Folder crumbs only navigate when
+  // the parent can open a folder (onPathSelect); the file is the current one.
   const renderPathNavigation = () => {
+    const rootLabel = documentName ?? '';
+    const selectRoot = onPathSelect ? () => onPathSelect(0) : handleGoBack;
     return (
-      <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex w-full items-center sm:w-auto">
-          <Button
-            type="button"
-            variant="outline"
-            size="icon-sm"
-            className="mr-3 h-[29px] w-[29px] rounded-full p-2 text-gray-400 dark:border-0 dark:text-gray-500"
-            onClick={
-              editingChunk
-                ? () => setEditingChunk(null)
-                : isAddingChunk
-                  ? () => setIsAddingChunk(false)
-                  : handleGoBack
-            }
-          >
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </Button>
-
-          <div className="flex flex-wrap items-center">
-            {/* Removed the directory icon */}
-            <span className="text-primary font-semibold wrap-break-word">
-              {documentName}
-            </span>
-
-            {pathParts.length > 0 && (
-              <>
-                <span className="mx-1 shrink-0 text-gray-500">/</span>
-                {pathParts.map((part, index) => (
-                  <React.Fragment key={index}>
-                    <span
-                      className={`wrap-break-word ${
-                        index < pathParts.length - 1
-                          ? 'text-primary font-medium'
-                          : 'text-gray-700 dark:text-gray-300'
-                      }`}
-                    >
-                      {part}
-                    </span>
-                    {index < pathParts.length - 1 && (
-                      <span className="mx-1 shrink-0 text-gray-500">/</span>
-                    )}
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 overflow-x-auto sm:mt-0 sm:w-auto">
-          {headerAction}
-          {editingChunk ? (
-            !isEditing ? (
-              <>
-                <Button
-                  type="button"
-                  className="h-[38px] min-w-[108px] rounded-full px-4 text-sm font-medium whitespace-nowrap"
-                  onClick={() => setIsEditing(true)}
-                >
-                  {t('modals.chunk.edit')}
-                </Button>
-                <Button
-                  type="button"
-                  variant="destructive-outline"
-                  className="h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap"
-                  onClick={() => {
-                    confirmDeleteChunk(editingChunk);
-                  }}
-                >
-                  {t('modals.chunk.delete')}
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => {
-                    setIsEditing(false);
-                  }}
-                  className="dark:text-foreground h-[38px] min-w-[108px] cursor-pointer rounded-full px-4 py-1 text-sm font-medium text-nowrap"
-                >
-                  {t('modals.chunk.cancel')}
-                </Button>
-                <Button
-                  type="button"
-                  onClick={() => {
-                    if (editingText.trim()) {
-                      const hasChanges =
-                        editingTitle !==
-                          (editingChunk?.metadata?.title || '') ||
-                        editingText !== (editingChunk?.text || '');
-
-                      if (hasChanges) {
-                        handleUpdateChunk(
-                          editingTitle,
-                          editingText,
-                          editingChunk,
-                        );
-                      }
-                      setIsEditing(false);
-                      setEditingChunk(null);
-                    }
-                  }}
-                  disabled={
-                    !editingText.trim() ||
-                    (editingTitle === (editingChunk?.metadata?.title || '') &&
-                      editingText === (editingChunk?.text || ''))
-                  }
-                  className={`h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap transition-all ${
-                    editingText.trim() &&
-                    (editingTitle !== (editingChunk?.metadata?.title || '') ||
-                      editingText !== (editingChunk?.text || ''))
-                      ? 'cursor-pointer'
-                      : 'cursor-not-allowed bg-gray-400 text-white hover:bg-gray-400'
-                  }`}
-                >
-                  {t('modals.chunk.save')}
-                </Button>
-              </>
-            )
-          ) : isAddingChunk ? (
+      <PathHeader
+        root={{
+          label: rootLabel,
+          onSelect: pathParts.length > 0 ? selectRoot : undefined,
+        }}
+        segments={pathParts.map((part, index) => ({
+          label: part,
+          onSelect:
+            onPathSelect && index < pathParts.length - 1
+              ? () => onPathSelect(index + 1)
+              : undefined,
+        }))}
+        backLabel={t('settings.sources.back')}
+        onBack={
+          editingChunk
+            ? () => setEditingChunk(null)
+            : isAddingChunk
+              ? () => setIsAddingChunk(false)
+              : handleGoBack
+        }
+        actions={
+          headerAction || editingChunk || isAddingChunk ? (
             <>
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => setIsAddingChunk(false)}
-                className="dark:text-foreground h-[38px] min-w-[108px] cursor-pointer rounded-full px-4 py-1 text-sm font-medium text-nowrap"
-              >
-                {t('modals.chunk.cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={() => {
-                  if (editingText.trim()) {
-                    handleAddChunk(editingTitle, editingText);
-                    setIsAddingChunk(false);
-                  }
-                }}
-                disabled={!editingText.trim()}
-                className={`h-[38px] min-w-[108px] rounded-full px-4 py-1 text-sm font-medium text-nowrap transition-all ${
-                  editingText.trim()
-                    ? 'cursor-pointer'
-                    : 'cursor-not-allowed bg-gray-400 text-white hover:bg-gray-400'
-                }`}
-              >
-                {t('modals.chunk.add')}
-              </Button>
+              {headerAction}
+              {editingChunk ? (
+                !isEditing ? (
+                  <>
+                    <Button
+                      type="button"
+                      size="field"
+                      shape="pill"
+                      onClick={() => setIsEditing(true)}
+                    >
+                      {t('modals.chunk.edit')}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="destructive-outline"
+                      size="field"
+                      shape="pill"
+                      onClick={() => {
+                        confirmDeleteChunk(editingChunk);
+                      }}
+                    >
+                      {t('modals.chunk.delete')}
+                    </Button>
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={() => {
+                        setIsEditing(false);
+                      }}
+                      size="field"
+                      shape="pill"
+                    >
+                      {t('modals.chunk.cancel')}
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={() => {
+                        if (editingText.trim()) {
+                          const hasChanges =
+                            editingTitle !==
+                              (editingChunk?.metadata?.title || '') ||
+                            editingText !== (editingChunk?.text || '');
+
+                          if (hasChanges) {
+                            handleUpdateChunk(
+                              editingTitle,
+                              editingText,
+                              editingChunk,
+                            );
+                          }
+                          setIsEditing(false);
+                          setEditingChunk(null);
+                        }
+                      }}
+                      disabled={
+                        !editingText.trim() ||
+                        (editingTitle ===
+                          (editingChunk?.metadata?.title || '') &&
+                          editingText === (editingChunk?.text || ''))
+                      }
+                      size="field"
+                      shape="pill"
+                    >
+                      {t('modals.chunk.save')}
+                    </Button>
+                  </>
+                )
+              ) : isAddingChunk ? (
+                <>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setIsAddingChunk(false)}
+                    size="field"
+                    shape="pill"
+                  >
+                    {t('modals.chunk.cancel')}
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={() => {
+                      if (editingText.trim()) {
+                        handleAddChunk(editingTitle, editingText);
+                        setIsAddingChunk(false);
+                      }
+                    }}
+                    disabled={!editingText.trim()}
+                    size="field"
+                    shape="pill"
+                  >
+                    {t('modals.chunk.add')}
+                  </Button>
+                </>
+              ) : null}
             </>
-          ) : null}
-        </div>
-      </div>
+          ) : undefined
+        }
+      />
     );
   };
 
@@ -496,60 +498,49 @@ const Chunks: React.FC<ChunksProps> = ({
   const renderFileSearch = () => {
     return (
       <div className="relative" ref={searchDropdownRef}>
-        <div className="relative flex items-center">
-          <div className="pointer-events-none absolute left-3">
-            <SearchIcon
-              className="text-muted-foreground size-4"
-              strokeWidth={1.75}
-              aria-label="Search"
+        {/* `contents`: the Command only scopes cmdk (the arrow keys move from
+            the input to the rows); the frame and the dropdown draw the look. */}
+        <Command shouldFilter={false} className="contents">
+          <div className={SEARCH_FRAME}>
+            <CommandInput
+              value={fileSearchQuery}
+              onValueChange={handleFileSearchChange}
+              placeholder={t('settings.sources.searchFiles')}
             />
           </div>
-          <Input
-            type="text"
-            value={fileSearchQuery}
-            onChange={(e) => handleFileSearchChange(e.target.value)}
-            placeholder={t('settings.sources.searchFiles')}
-            className={`h-[38px] py-2 pr-4 pl-10 ${
-              fileSearchQuery ? 'rounded-t-md' : 'rounded-md'
-            } transition-all duration-200`}
-          />
-        </div>
 
-        {fileSearchQuery && (
-          <div className="border-border bg-card dark:border-border dark:bg-card absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-md border border-t-0 shadow-lg">
-            <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto">
-              {fileSearchResults.length === 0 ? (
-                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                  {t('settings.sources.noResults')}
-                </div>
-              ) : (
-                fileSearchResults.map((result, index) => (
-                  <div
-                    key={index}
-                    title={result.path}
-                    onClick={() => handleSearchResultClick(result)}
-                    className={`hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-center px-3 py-2 ${
-                      index !== fileSearchResults.length - 1
-                        ? 'border-border dark:border-border border-b'
-                        : ''
-                    }`}
-                  >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? 'File' : 'Folder'}
-                      className="mr-2 h-4 w-4 shrink-0"
-                    />
-                    <span className="truncate text-sm">
-                      {result.name ||
-                        result.path.split('/').pop() ||
-                        result.path}
-                    </span>
-                  </div>
-                ))
-              )}
+          {fileSearchQuery && (
+            <div className="border-border bg-popover text-popover-foreground absolute top-full right-0 left-0 z-20 mt-1 w-full overflow-hidden rounded-xl border shadow-md">
+              <CommandList className="max-h-[calc(100vh-200px)]">
+                {fileSearchResults.length === 0 ? (
+                  <CommandEmpty>{t('settings.sources.noResults')}</CommandEmpty>
+                ) : (
+                  <CommandGroup>
+                    {fileSearchResults.map((result) => (
+                      <CommandItem
+                        key={result.path}
+                        value={result.path}
+                        title={result.path}
+                        onSelect={() => handleSearchResultClick(result)}
+                      >
+                        {result.isFile ? (
+                          <File />
+                        ) : (
+                          <Folder className="text-primary" />
+                        )}
+                        <span className="truncate">
+                          {result.name ||
+                            result.path.split('/').pop() ||
+                            result.path}
+                        </span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                )}
+              </CommandList>
             </div>
-          </div>
-        )}
+          )}
+        </Command>
       </div>
     );
   };
@@ -567,8 +558,8 @@ const Chunks: React.FC<ChunksProps> = ({
           {!editingChunk && !isAddingChunk ? (
             <>
               <div className="mb-3 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
-                <div className="border-border dark:border-border flex h-[38px] w-full flex-1 items-center overflow-hidden rounded-md border">
-                  <div className="dark:text-foreground flex h-full items-center px-4 font-medium whitespace-nowrap text-gray-700">
+                <div className="border-border flex h-9.5 w-full flex-1 items-center overflow-hidden rounded-md border">
+                  <div className="text-foreground flex h-full items-center px-4 font-medium whitespace-nowrap">
                     {totalChunks > 999999
                       ? `${(totalChunks / 1000000).toFixed(2)}M`
                       : totalChunks > 999
@@ -576,21 +567,23 @@ const Chunks: React.FC<ChunksProps> = ({
                         : totalChunks}{' '}
                     {t('settings.sources.chunks')}
                   </div>
-                  <div className="bg-border dark:bg-border h-full w-px"></div>
-                  <div className="h-full flex-1">
+                  <div className="bg-border h-full w-px"></div>
+                  <div className="h-full flex-1 px-3 py-2">
                     <Input
                       type="text"
+                      variant="bare"
                       placeholder={t('settings.sources.searchPlaceholder')}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                      className="h-full rounded-none border-0 px-3 py-2 text-[13.56px] leading-[100%] font-normal shadow-none focus-visible:ring-0 md:text-[13.56px] dark:border-0"
+                      className="h-full"
                     />
                   </div>
                 </div>
                 <Button
                   type="button"
-                  className="h-[38px] w-full min-w-[108px] shrink-0 rounded-full px-4 text-sm font-medium whitespace-normal sm:w-auto"
-                  title={t('settings.sources.addChunk')}
+                  size="field"
+                  shape="pill"
+                  className="w-full shrink-0 sm:w-auto"
                   onClick={() => {
                     setIsAddingChunk(true);
                     setEditingTitle('');
@@ -607,39 +600,43 @@ const Chunks: React.FC<ChunksProps> = ({
               ) : (
                 <div className="grid w-full grid-cols-1 justify-items-start gap-4 sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))]">
                   {filteredChunks.length === 0 ? (
-                    <div className="col-span-full flex min-h-[50vh] w-full flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400">
-                      <img
-                        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                        alt={t('settings.sources.noChunksAlt')}
-                        className="mx-auto mb-2 h-24 w-24"
-                      />
-                      {t('settings.sources.noChunks')}
-                    </div>
+                    <EmptyState
+                      size="sm"
+                      title={t('settings.sources.noChunks')}
+                      className="col-span-full min-h-[50vh] w-full"
+                    />
                   ) : (
                     filteredChunks.map((chunk, index) => (
-                      <div
+                      <Card
                         key={index}
-                        className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] transform cursor-pointer flex-col justify-between overflow-hidden rounded-md border transition-transform duration-200 hover:scale-105"
-                        onClick={() => {
-                          setEditingChunk(chunk);
-                          setEditingTitle(chunk.metadata?.title || '');
-                          setEditingText(chunk.text || '');
-                        }}
+                        interactive
+                        padding="none"
+                        asChild
+                        className="relative h-[197px] w-full max-w-[487px] justify-between gap-0 overflow-hidden"
                       >
-                        <div className="w-full">
-                          <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
-                            <div className="dark:text-muted-foreground text-sm text-[#59636E]">
-                              {formatChunkTokens(chunk.metadata)}{' '}
-                              {t('settings.sources.tokensUnit')}
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setEditingChunk(chunk);
+                            setEditingTitle(chunk.metadata?.title || '');
+                            setEditingText(chunk.text || '');
+                          }}
+                        >
+                          <div className="w-full">
+                            <div className="border-border bg-muted flex w-full items-center justify-between border-b px-4 py-3">
+                              <div className="text-muted-foreground text-sm">
+                                {formatChunkTokens(chunk.metadata)}{' '}
+                                {t('settings.sources.tokensUnit')}
+                              </div>
+                            </div>
+                            <div className="px-4 pt-3 pb-6">
+                              <p className="text-foreground line-clamp-6 text-sm leading-5 font-normal">
+                                {chunk.text}
+                              </p>
                             </div>
                           </div>
-                          <div className="px-4 pt-3 pb-6">
-                            <p className="text-foreground line-clamp-6 font-['Inter'] text-[13.68px] leading-[19.93px] font-normal">
-                              {chunk.text}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
+                        </button>
+                      </Card>
                     ))
                   )}
                 </div>
@@ -647,7 +644,7 @@ const Chunks: React.FC<ChunksProps> = ({
             </>
           ) : isAddingChunk ? (
             <div className="w-full">
-              <div className="border-border dark:border-border relative overflow-hidden rounded-lg border">
+              <div className="border-border relative overflow-hidden rounded-lg border">
                 <LineNumberedTextarea
                   value={editingText}
                   onChange={setEditingText}
@@ -659,9 +656,9 @@ const Chunks: React.FC<ChunksProps> = ({
           ) : (
             editingChunk && (
               <div className="w-full">
-                <div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-md border">
-                  <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
-                    <div className="dark:text-muted-foreground text-sm text-[#59636E]">
+                <div className="border-border relative flex w-full flex-col overflow-hidden rounded-md border">
+                  <div className="border-border bg-muted flex w-full items-center justify-between border-b px-4 py-3">
+                    <div className="text-muted-foreground text-sm">
                       {formatChunkTokens(editingChunk.metadata)}{' '}
                       {t('settings.sources.tokensUnit')}
                     </div>
@@ -691,11 +688,11 @@ const Chunks: React.FC<ChunksProps> = ({
             !editingChunk &&
             !isAddingChunk && (
               <Pagination
-                currentPage={page}
-                totalPages={Math.ceil(totalChunks / perPage)}
-                rowsPerPage={perPage}
+                page={page}
+                pageCount={Math.ceil(totalChunks / perPage)}
+                pageSize={perPage}
                 onPageChange={setPage}
-                onRowsPerPageChange={(rows) => {
+                onPageSizeChange={(rows) => {
                   setPerPage(rows);
                   setPage(1);
                 }}
@@ -712,7 +709,7 @@ const Chunks: React.FC<ChunksProps> = ({
         handleSubmit={handleConfirmedDelete}
         handleCancel={handleCancelDelete}
         submitLabel={t('modals.chunk.delete')}
-        variant="danger"
+        variant="destructive"
       />
     </div>
   );
diff --git a/frontend/src/components/ConfigFields.tsx b/frontend/src/components/ConfigFields.tsx
index 9e7520c4..ab0d7db2 100644
--- a/frontend/src/components/ConfigFields.tsx
+++ b/frontend/src/components/ConfigFields.tsx
@@ -1,10 +1,8 @@
 import { useMemo } from 'react';
 
-import { cn } from '@/lib/utils';
-
 import { ConfigRequirements } from '../modals/types';
+import { FormField, type FormFieldProps } from './ui/form-field';
 import { Input } from './ui/input';
-import { Label } from './ui/label';
 import {
   Select,
   SelectContent,
@@ -22,6 +20,8 @@ interface ConfigFieldsProps {
   errors?: { [key: string]: string };
   isEditing?: boolean;
   hasEncryptedCredentials?: boolean;
+  /** Surface behind the fields, for the floating labels' notch. */
+  labelSurface?: FormFieldProps['labelSurface'];
 }
 
 function shouldShowField(
@@ -41,6 +41,7 @@ export default function ConfigFields({
   errors = {},
   isEditing = false,
   hasEncryptedCredentials = false,
+  labelSurface,
 }: ConfigFieldsProps) {
   const sortedFields = useMemo(
     () =>
@@ -53,7 +54,7 @@ export default function ConfigFields({
   if (sortedFields.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-5">
       {sortedFields.map(([key, spec]) => {
         if (!shouldShowField(spec, values)) return null;
 
@@ -61,29 +62,22 @@ export default function ConfigFields({
         const hasEncrypted =
           isEditing && spec.secret && hasEncryptedCredentials;
         const placeholder = hasEncrypted ? '••••••••' : '';
-        const hasError = !!errors[key];
+        const error = errors[key] || undefined;
 
         if (spec.enum) {
           return (
-            <div key={key} className="flex flex-col gap-1.5">
-              <Label htmlFor={key}>
-                {spec.label || key}
-                {spec.required && <span className="text-red-500">*</span>}
-              </Label>
+            <FormField
+              key={key}
+              label={spec.label || key}
+              required={!!spec.required}
+              error={error}
+              labelSurface={labelSurface}
+            >
               <Select
                 value={value || spec.default || ''}
                 onValueChange={(v) => onChange(key, v)}
               >
-                <SelectTrigger
-                  id={key}
-                  variant="ghost"
-                  size="lg"
-                  className={cn(
-                    'w-full rounded-xl',
-                    hasError &&
-                      'border-destructive aria-invalid:ring-destructive/20',
-                  )}
-                >
+                <SelectTrigger size="field" className="w-full">
                   <SelectValue placeholder={spec.label || key} />
                 </SelectTrigger>
                 <SelectContent>
@@ -95,21 +89,19 @@ export default function ConfigFields({
                   ))}
                 </SelectContent>
               </Select>
-              {hasError && (
-                <p className="text-destructive text-xs">{errors[key]}</p>
-              )}
-            </div>
+            </FormField>
           );
         }
 
         return (
-          <div key={key} className="flex flex-col gap-1.5">
-            <Label htmlFor={key}>
-              {spec.label || key}
-              {spec.required && <span className="text-red-500">*</span>}
-            </Label>
+          <FormField
+            key={key}
+            label={spec.label || key}
+            required={!!spec.required}
+            error={error}
+            labelSurface={labelSurface}
+          >
             <Input
-              id={key}
               type={
                 spec.secret
                   ? 'password'
@@ -135,13 +127,8 @@ export default function ConfigFields({
               max={
                 spec.type === 'number' && key === 'timeout' ? 300 : undefined
               }
-              aria-invalid={hasError || undefined}
-              className={cn('rounded-xl', hasError && 'border-destructive')}
             />
-            {hasError && (
-              <p className="text-destructive text-xs">{errors[key]}</p>
-            )}
-          </div>
+          </FormField>
         );
       })}
     </div>
diff --git a/frontend/src/components/ConnectorAuth.test.tsx b/frontend/src/components/ConnectorAuth.test.tsx
new file mode 100644
index 00000000..49939bf4
--- /dev/null
+++ b/frontend/src/components/ConnectorAuth.test.tsx
@@ -0,0 +1,84 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('../hooks', () => ({
+  useDarkTheme: () => [false, () => undefined],
+}));
+
+vi.mock('../api/services/userService', () => ({ default: {} }));
+
+import ConnectorAuth from './ConnectorAuth';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('ConnectorAuth', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (props: Partial<Parameters<typeof ConnectorAuth>[0]>) =>
+    act(() =>
+      root.render(
+        <ConnectorAuth
+          provider="google_drive"
+          onSuccess={() => undefined}
+          onError={() => undefined}
+          label="Connect"
+          {...props}
+        />,
+      ),
+    );
+
+  it('shows the error as a destructive alert with an icon', () => {
+    render({ errorMessage: 'Session expired' });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).not.toBeNull();
+    expect(alert?.className).toContain('text-destructive');
+    expect(alert?.querySelector('svg')).not.toBeNull();
+    expect(alert?.textContent).toContain('Session expired');
+  });
+
+  it('renders the connected banner as a polite success alert', () => {
+    const onDisconnect = vi.fn();
+    render({ isConnected: true, userEmail: 'a@b.c', onDisconnect });
+    const banner = container.querySelector('[role="status"]');
+    expect(banner).not.toBeNull();
+    expect(banner?.className).toContain('text-success');
+    expect(banner?.className).toContain('bg-success/10');
+    expect(banner?.querySelector('svg')).not.toBeNull();
+    const button = banner?.querySelector('button');
+    expect(button?.className).toContain('text-primary');
+    expect(button?.className).not.toContain('text-black');
+    expect(button?.textContent).toBe(
+      'modals.uploadDoc.connectors.auth.disconnect',
+    );
+    act(() => button?.click());
+    expect(onDisconnect).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the auth button as a default brand button', () => {
+    render({});
+    const button = container.querySelector('button');
+    expect(button?.textContent).toContain('Connect');
+    expect(button?.className).toContain('bg-primary');
+    expect(button?.className).not.toContain('bg-blue-500');
+  });
+});
diff --git a/frontend/src/components/ConnectorAuth.tsx b/frontend/src/components/ConnectorAuth.tsx
index f18c077e..0f25a5d1 100644
--- a/frontend/src/components/ConnectorAuth.tsx
+++ b/frontend/src/components/ConnectorAuth.tsx
@@ -1,11 +1,12 @@
+import { CircleCheck, TriangleAlert } from 'lucide-react';
 import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import { isTrustedConnectorMessage } from '../utils/connectorAuthUtils';
+import { Alert, AlertDescription } from './ui/alert';
 import { Button } from './ui/button';
 
 interface ConnectorAuthProps {
@@ -31,7 +32,6 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
 }) => {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
   const completedRef = useRef(false);
   const intervalRef = useRef<number | null>(null);
   const authWindowRef = useRef<Window | null>(null);
@@ -208,68 +208,37 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
   return (
     <>
       {errorMessage && (
-        <div className="mb-4 flex items-center gap-2 rounded-lg border border-[#E60000] bg-transparent p-2 dark:border-[#D42626] dark:bg-[#D426261A]">
-          <svg
-            width="30"
-            height="30"
-            viewBox="0 0 30 30"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.09974 24.5422H22.9C24.5156 24.5422 25.5228 22.7901 24.715 21.3947L16.8149 7.74526C16.007 6.34989 13.9927 6.34989 13.1848 7.74526L5.28471 21.3947C4.47686 22.7901 5.48405 24.5422 7.09974 24.5422ZM14.9998 17.1981C14.4228 17.1981 13.9507 16.726 13.9507 16.149V14.0507C13.9507 13.4736 14.4228 13.0015 14.9998 13.0015C15.5769 13.0015 16.049 13.4736 16.049 14.0507V16.149C16.049 16.726 15.5769 17.1981 14.9998 17.1981ZM16.049 21.3947H13.9507V19.2964H16.049V21.3947Z"
-              fill={isDarkTheme ? '#EECF56' : '#E60000'}
-            />
-          </svg>
-
-          <span
-            className="text-sm text-[#E60000] dark:text-red-400"
-            style={{
-              fontFamily: 'Inter',
-              lineHeight: '100%',
-            }}
-          >
-            {errorMessage}
-          </span>
-        </div>
+        <Alert variant="destructive" className="mb-4">
+          <TriangleAlert aria-hidden="true" />
+          <AlertDescription>{errorMessage}</AlertDescription>
+        </Alert>
       )}
 
       {isConnected ? (
-        <div className="mb-4">
-          <div className="flex w-full items-center justify-between rounded-lg bg-[#8FDD51] px-4 py-2 text-sm font-medium text-black">
-            <div className="flex max-w-[500px] items-center gap-2">
-              <svg className="h-4 w-4" viewBox="0 0 24 24">
-                <path
-                  fill="currentColor"
-                  d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-                />
-              </svg>
-              <span>
-                {t('modals.uploadDoc.connectors.auth.connectedAs', {
-                  email: userEmail,
-                })}
-              </span>
-            </div>
+        <Alert variant="success" className="mb-4">
+          <CircleCheck aria-hidden="true" />
+          <AlertDescription className="flex items-center justify-between">
+            <span className="max-w-[500px]">
+              {t('modals.uploadDoc.connectors.auth.connectedAs', {
+                email: userEmail,
+              })}
+            </span>
             {onDisconnect && (
               <Button
                 type="button"
                 variant="link"
-                size="sm"
+                size="xs"
                 onClick={onDisconnect}
-                className="h-auto p-0 text-xs text-black underline hover:text-gray-700"
+                className="-my-1 ml-2 shrink-0"
               >
                 {t('modals.uploadDoc.connectors.auth.disconnect')}
               </Button>
             )}
-          </div>
-        </div>
+          </AlertDescription>
+        </Alert>
       ) : (
-        <Button
-          type="button"
-          onClick={handleAuth}
-          className="w-full rounded-lg bg-blue-500 px-4 py-3 text-white hover:bg-blue-600"
-        >
-          <svg className="h-5 w-5" viewBox="0 0 24 24">
+        <Button type="button" onClick={handleAuth} className="w-full">
+          <svg className="size-5" viewBox="0 0 24 24">
             <path
               fill="currentColor"
               d="M6.28 3l5.72 10H24l-5.72-10H6.28zm11.44 0L12 13l5.72 10H24L18.28 3h-.56zM0 13l5.72 10h5.72L5.72 13H0z"
diff --git a/frontend/src/components/ConnectorTree.tsx b/frontend/src/components/ConnectorTree.tsx
index 99bb30ca..53538189 100644
--- a/frontend/src/components/ConnectorTree.tsx
+++ b/frontend/src/components/ConnectorTree.tsx
@@ -1,10 +1,11 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { Check, RefreshCw } from 'lucide-react';
 
 import userService from '../api/services/userService';
-import CheckmarkIcon from '../assets/checkMark2.svg';
-import SyncIcon from '../assets/sync.svg';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -106,14 +107,12 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
   const topRightAction = (
     <>
       {headerAction}
-      <button
+      <Button
+        type="button"
+        size="field"
+        shape="pill"
         onClick={() => setSyncConfirmationModal('ACTIVE')}
         disabled={isSyncing}
-        className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm font-medium whitespace-nowrap transition-colors ${
-          isSyncing
-            ? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-600'
-            : 'bg-primary hover:bg-primary/90 text-white'
-        }`}
         title={
           isSyncing
             ? `${t('settings.sources.syncing')} ${syncProgress}%`
@@ -122,17 +121,21 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
               : t('settings.sources.sync')
         }
       >
-        <img
-          src={syncDone ? CheckmarkIcon : SyncIcon}
-          alt={t('settings.sources.sync')}
-          className={`mr-2 h-4 w-4 brightness-0 invert filter ${isSyncing ? 'animate-spin' : ''}`}
-        />
+        {syncDone ? (
+          <Check />
+        ) : isSyncing ? (
+          // The busy state shows its percentage, so it keeps the label and
+          // draws the app's ring spinner at icon size (DESIGN.md, Button).
+          <Spinner size="xs" label={t('settings.sources.syncing')} />
+        ) : (
+          <RefreshCw />
+        )}
         {isSyncing
           ? `${syncProgress}%`
           : syncDone
             ? 'Done'
             : t('settings.sources.sync')}
-      </button>
+      </Button>
     </>
   );
 
diff --git a/frontend/src/components/CopyButton.test.tsx b/frontend/src/components/CopyButton.test.tsx
new file mode 100644
index 00000000..0323bdce
--- /dev/null
+++ b/frontend/src/components/CopyButton.test.tsx
@@ -0,0 +1,120 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+const copyMock = vi.fn<(text: string) => boolean>(() => true);
+vi.mock('copy-to-clipboard', () => ({
+  default: (text: string) => copyMock(text),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import CopyButton from './CopyButton';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('CopyButton', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    copyMock.mockClear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+  });
+
+  function button(): HTMLButtonElement {
+    const el = container.querySelector('button');
+    if (!el) throw new Error('no button');
+    return el;
+  }
+
+  async function click() {
+    await act(async () => {
+      button().click();
+    });
+  }
+
+  it('renders an idle ghost-muted icon button', () => {
+    act(() => root.render(<CopyButton textToCopy="hello" />));
+    expect(button().getAttribute('aria-label')).toBe('conversation.copy');
+    expect(button().dataset.variant).toBe('ghost-muted');
+    expect(button().dataset.size).toBe('icon-sm');
+    expect(button().dataset.shape).toBe('pill');
+    // IconButton: a tooltip trigger, never a native title.
+    expect(button().hasAttribute('title')).toBe(false);
+    expect(button().dataset.state).toBe('closed');
+  });
+
+  it('uses icon-xs when size is xs and xs with text', () => {
+    act(() => root.render(<CopyButton textToCopy="hello" size="xs" />));
+    expect(button().dataset.size).toBe('icon-xs');
+    act(() => root.render(<CopyButton textToCopy="hello" showText />));
+    expect(button().dataset.size).toBe('xs');
+    expect(button().textContent).toContain('conversation.copy');
+    expect(button().hasAttribute('title')).toBe(false);
+  });
+
+  it('copies the text and shows the copied state without disabling', async () => {
+    act(() => root.render(<CopyButton textToCopy="hello" showText />));
+    await click();
+
+    expect(copyMock).toHaveBeenCalledWith('hello');
+    expect(button().getAttribute('aria-label')).toBe('conversation.copied');
+    expect(button().dataset.variant).toBe('secondary');
+    expect(button().hasAttribute('disabled')).toBe(false);
+    expect(button().textContent).toContain('conversation.copied');
+  });
+
+  it('ignores clicks while copied and resets after the timeout', async () => {
+    act(() =>
+      root.render(<CopyButton textToCopy="hello" copiedDuration={1000} />),
+    );
+    await click();
+    await click();
+    expect(copyMock).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(button().getAttribute('aria-label')).toBe('conversation.copy');
+    expect(button().dataset.variant).toBe('ghost-muted');
+  });
+
+  it('renders a text-only lg pill with custom labels that resets', async () => {
+    act(() =>
+      root.render(
+        <CopyButton
+          textToCopy="https://x/share/1"
+          size="lg"
+          copyLabel="Copy link"
+          copiedLabel="Link copied"
+          copiedDuration={1000}
+        />,
+      ),
+    );
+    expect(button().dataset.size).toBe('lg');
+    expect(button().dataset.shape).toBe('pill');
+    expect(button().dataset.variant).toBe('default');
+    expect(button().querySelector('svg')).toBeNull();
+    expect(button().textContent).toBe('Copy link');
+
+    await click();
+    expect(copyMock).toHaveBeenCalledWith('https://x/share/1');
+    expect(button().textContent).toContain('Link copied');
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(button().textContent).toBe('Copy link');
+  });
+});
diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
index 69285193..f04c34ef 100644
--- a/frontend/src/components/CopyButton.tsx
+++ b/frontend/src/components/CopyButton.tsx
@@ -1,78 +1,55 @@
-import clsx from 'clsx';
 import copy from 'copy-to-clipboard';
+import { Check, Copy } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import CheckMark from '../assets/checkmark.svg?react';
-import CopyIcon from '../assets/copy.svg?react';
 import { Button } from './ui/button';
+import { IconButton, type IconButtonProps } from './ui/icon-button';
 
 type CopyButtonProps = {
   textToCopy: string;
-  iconSize?: string;
-  padding?: string;
+  /**
+   * `xs` is `icon-xs` (28px) and `sm` is `icon-sm` (32px), icon only; `lg`
+   * is a text-only primary pill (Button `lg`, 40px) for a dialog footer.
+   */
+  size?: 'xs' | 'sm' | 'lg';
+  /** Show a "Copy"/"Copied" label next to the icon (renders at Button `xs`). */
   showText?: boolean;
   copiedDuration?: number;
+  /** The idle label (default `conversation.copy`). */
+  copyLabel?: string;
+  /** The label after a copy (default `conversation.copied`). */
+  copiedLabel?: string;
   className?: string;
-  iconWrapperClassName?: string;
-  textClassName?: string;
+  /** Tooltip side of the icon-only button: `bottom` in a header or toolbar. */
+  side?: IconButtonProps['side'];
 };
 
-const DEFAULT_ICON_SIZE = 'w-4 h-4';
-const DEFAULT_PADDING = 'p-2';
 const DEFAULT_COPIED_DURATION = 2000;
 
 export default function CopyButton({
   textToCopy,
-  iconSize = DEFAULT_ICON_SIZE,
-  padding = DEFAULT_PADDING,
+  size = 'sm',
   showText = false,
   copiedDuration = DEFAULT_COPIED_DURATION,
+  copyLabel,
+  copiedLabel,
   className,
-  iconWrapperClassName,
-  textClassName,
+  side,
 }: CopyButtonProps) {
   const { t } = useTranslation();
   const [isCopied, setIsCopied] = useState(false);
   const timeoutIdRef = useRef<number | null>(null);
-  // `copy` is async, so `isCopied` and the disabled prop only catch up after it
-  // resolves. Guard that window so rapid clicks cannot start a second write.
+  // `copy` is async, so `isCopied` only catches up after it resolves. Guard
+  // that window so rapid clicks cannot start a second write. The button is
+  // never disabled, so the copied confirmation does not fade.
   const copyInFlightRef = useRef(false);
 
-  const iconWrapperClasses = clsx(
-    'flex items-center justify-center rounded-full transition-colors duration-150 ease-in-out',
-    padding,
-    {
-      [`bg-transparent hover:bg-muted`]: !isCopied,
-      'bg-green-100 dark:bg-green-900 hover:bg-green-100 dark:hover:bg-green-900':
-        isCopied,
-    },
-    iconWrapperClassName,
-  );
-
-  const rootButtonClasses = clsx(
-    'group h-auto rounded-full bg-transparent p-0 hover:bg-transparent disabled:opacity-100',
-    className,
-  );
-
-  const textSpanClasses = clsx(
-    'text-xs text-gray-600 dark:text-gray-400 transition-opacity duration-150 ease-in-out',
-    { 'opacity-75': isCopied },
-    textClassName,
-  );
-
-  const IconComponent = isCopied ? CheckMark : CopyIcon;
-  const iconClasses = clsx(iconSize, {
-    'stroke-green-600 dark:stroke-green-400': isCopied,
-    'fill-none text-gray-700 dark:text-gray-300': !isCopied,
-  });
+  const IconComponent = isCopied ? Check : Copy;
 
   const buttonTitle = isCopied
-    ? t('conversation.copied')
-    : t('conversation.copy');
-  const displayedText = isCopied
-    ? t('conversation.copied')
-    : t('conversation.copy');
+    ? (copiedLabel ?? t('conversation.copied'))
+    : (copyLabel ?? t('conversation.copy'));
 
   const handleCopy = useCallback(async () => {
     if (isCopied || copyInFlightRef.current) return;
@@ -108,23 +85,59 @@ export default function CopyButton({
       }
     };
   }, []);
+  const liveRegion = (
+    <span className="sr-only" aria-live="polite" aria-atomic="true">
+      {isCopied ? t('conversation.copied', 'Copied to clipboard') : ''}
+    </span>
+  );
+  const variant = isCopied ? 'secondary' : 'ghost-muted';
+
+  if (size === 'lg') {
+    // The visible label is the name; the live region announces the copy.
+    return (
+      <Button
+        type="button"
+        size="lg"
+        shape="pill"
+        onClick={handleCopy}
+        className={className}
+      >
+        {buttonTitle}
+        {liveRegion}
+      </Button>
+    );
+  }
+
+  if (showText) {
+    return (
+      <Button
+        type="button"
+        variant={variant}
+        size="xs"
+        shape="pill"
+        onClick={handleCopy}
+        className={className}
+        aria-label={buttonTitle}
+      >
+        <IconComponent aria-hidden="true" />
+        <span>{buttonTitle}</span>
+        {liveRegion}
+      </Button>
+    );
+  }
+
   return (
-    <Button
-      type="button"
-      variant="ghost"
+    <IconButton
+      label={buttonTitle}
+      variant={variant}
+      size={size === 'xs' ? 'icon-xs' : 'icon-sm'}
+      shape="pill"
       onClick={handleCopy}
-      className={rootButtonClasses}
-      title={buttonTitle}
-      aria-label={buttonTitle}
-      disabled={isCopied}
+      className={className}
+      side={side}
     >
-      <div className={iconWrapperClasses}>
-        <IconComponent className={iconClasses} aria-hidden="true" />
-      </div>
-      {showText && <span className={textSpanClasses}>{displayedText}</span>}
-      <span className="sr-only" aria-live="polite" aria-atomic="true">
-        {isCopied ? t('conversation.copied', 'Copied to clipboard') : ''}
-      </span>
-    </Button>
+      <IconComponent aria-hidden="true" />
+      {liveRegion}
+    </IconButton>
   );
 }
diff --git a/frontend/src/components/DocumentArtifactView.tsx b/frontend/src/components/DocumentArtifactView.tsx
index 1050c3e2..d9e2fa78 100644
--- a/frontend/src/components/DocumentArtifactView.tsx
+++ b/frontend/src/components/DocumentArtifactView.tsx
@@ -1,5 +1,12 @@
-import { Download, FileText, History, RotateCcw } from 'lucide-react';
+import {
+  CircleAlert,
+  Download,
+  FileText,
+  History,
+  RotateCcw,
+} from 'lucide-react';
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
@@ -7,7 +14,7 @@ import { useDarkTheme } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
 import MarkdownPreview from './MarkdownPreview';
 import { renderMermaidDiagram } from './mermaidSecurity';
-import Spinner from './Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
 import {
   buildPreviewDocument,
   bytesPreviewModeForMime,
@@ -21,6 +28,7 @@ import {
   type BytesPreviewMode,
   type DocumentArtifact,
 } from './artifactViewUtils';
+import { Alert, AlertDescription } from './ui/alert';
 import { Button } from './ui/button';
 import { useArtifactBytes } from './useArtifactBytes';
 import {
@@ -49,6 +57,7 @@ function FramePreview({
   artifactKind: string;
   source: string;
 }) {
+  const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
   const [rendered, setRendered] = useState<string | null>(null);
   const [renderError, setRenderError] = useState(false);
@@ -86,17 +95,13 @@ function FramePreview({
 
   if (renderError) {
     return (
-      <pre className="overflow-auto p-4 text-xs text-gray-600 dark:text-gray-400">
+      <pre className="text-muted-foreground overflow-auto p-4 font-mono text-xs wrap-break-word whitespace-pre-wrap">
         {source}
       </pre>
     );
   }
   if (rendered === null) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
+    return <LoadingState fill="parent" />;
   }
 
   // For mermaid, `rendered` is mermaid's sandboxed-iframe wrapper; the 'mermaid'
@@ -106,8 +111,8 @@ function FramePreview({
     <iframe
       // No allow-same-origin: content is fully isolated from the app origin.
       sandbox=""
-      title="Artifact preview"
-      className="h-full w-full rounded-md border border-gray-200 bg-white dark:border-gray-700"
+      title={t('components.artifact.preview')}
+      className="border-border h-full w-full rounded-md border bg-white"
       srcDoc={buildPreviewDocument(previewKind, rendered)}
     />
   );
@@ -124,18 +129,17 @@ function DownloadCard({
   onDownload: () => void;
   downloading: boolean;
 }) {
+  const { t } = useTranslation();
   return (
     <div className="flex h-full flex-col items-center justify-center gap-4">
-      <div className="flex flex-col items-center gap-3 rounded-xl border border-gray-200 p-8 text-center dark:border-gray-700">
-        <FileText className="h-12 w-12 text-gray-400" />
+      <div className="border-border flex flex-col items-center gap-3 rounded-xl border p-8 text-center">
+        <FileText className="text-muted-foreground size-12" />
         <div>
-          <p className="text-sm font-medium break-all text-gray-800 dark:text-gray-200">
+          <p className="text-foreground text-sm font-medium break-all">
             {filename}
           </p>
           {size != null && (
-            <p className="text-xs text-gray-500 dark:text-gray-400">
-              {formatBytes(size)}
-            </p>
+            <p className="text-muted-foreground text-xs">{formatBytes(size)}</p>
           )}
         </div>
         <Button
@@ -143,14 +147,10 @@ function DownloadCard({
           variant="outline"
           size="sm"
           onClick={onDownload}
-          disabled={downloading}
+          loading={downloading}
         >
-          {downloading ? (
-            <Spinner size="small" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
-          Download
+          <Download />
+          {t('components.artifact.download')}
         </Button>
       </div>
     </div>
@@ -177,14 +177,11 @@ function BytesPreview({
   token: string | null;
   fallback: ReactNode;
 }) {
+  const { t } = useTranslation();
   const state = useArtifactBytes(artifactId, version, mode, token);
 
   if (state.status === 'loading') {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
+    return <LoadingState fill="parent" />;
   }
   if (state.status === 'error') {
     return <>{fallback}</>;
@@ -194,7 +191,7 @@ function BytesPreview({
       <div className="flex h-full items-center justify-center overflow-auto p-4">
         <img
           src={state.url}
-          alt="Artifact preview"
+          alt={t('components.artifact.preview')}
           className="max-h-full max-w-full object-contain"
         />
       </div>
@@ -206,8 +203,8 @@ function BytesPreview({
       <iframe
         // No allow-same-origin / no scripts: bytes are isolated from the app origin.
         sandbox=""
-        title="Artifact preview"
-        className="h-full w-full rounded-md border border-gray-200 bg-white dark:border-gray-700"
+        title={t('components.artifact.preview')}
+        className="border-border h-full w-full rounded-md border bg-white"
         srcDoc={buildPreviewDocument(
           mode === 'iframe-svg' ? 'svg' : 'html',
           state.text,
@@ -219,7 +216,7 @@ function BytesPreview({
     return <MarkdownPreview content={state.text} />;
   }
   return (
-    <pre className="h-full overflow-auto p-4 text-xs whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+    <pre className="text-foreground h-full overflow-auto p-4 font-mono text-xs wrap-break-word whitespace-pre-wrap">
       {state.text}
     </pre>
   );
@@ -232,6 +229,7 @@ export default function DocumentArtifactView({
   artifact: DocumentArtifact;
   onRefresh: () => void;
 }) {
+  const { t } = useTranslation();
   const token = useSelector(selectToken);
   const versionsDesc = useMemo(
     () => sortVersionsDesc(artifact.versions),
@@ -281,9 +279,11 @@ export default function DocumentArtifactView({
         'url',
       );
       const ok = await triggerResponseDownload(response, filename);
-      if (!ok && isMountedRef.current) setActionError('Download failed');
+      if (!ok && isMountedRef.current)
+        setActionError(t('components.artifact.downloadFailed'));
     } catch {
-      if (isMountedRef.current) setActionError('Download failed');
+      if (isMountedRef.current)
+        setActionError(t('components.artifact.downloadFailed'));
     } finally {
       if (isMountedRef.current) setDownloading(false);
     }
@@ -299,12 +299,14 @@ export default function DocumentArtifactView({
         token,
       );
       if (!response.ok) {
-        if (isMountedRef.current) setActionError('Restore failed');
+        if (isMountedRef.current)
+          setActionError(t('components.artifact.restoreFailed'));
         return;
       }
       if (isMountedRef.current) onRefresh();
     } catch {
-      if (isMountedRef.current) setActionError('Restore failed');
+      if (isMountedRef.current)
+        setActionError(t('components.artifact.restoreFailed'));
     } finally {
       if (isMountedRef.current) setRestoring(false);
     }
@@ -340,7 +342,7 @@ export default function DocumentArtifactView({
         : (selectedRow?.preview_text ?? '');
       if (text) {
         return (
-          <pre className="h-full overflow-auto p-4 text-xs whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+          <pre className="text-foreground h-full overflow-auto p-4 font-mono text-xs wrap-break-word whitespace-pre-wrap">
             {text}
           </pre>
         );
@@ -379,15 +381,18 @@ export default function DocumentArtifactView({
           value={String(selectedVersion)}
           onValueChange={(v) => setSelectedVersion(Number(v))}
         >
-          <SelectTrigger className="h-8 w-auto gap-2 rounded-md px-3 text-xs">
-            <History className="h-3.5 w-3.5" />
+          <SelectTrigger size="sm" className="w-auto">
+            <History className="size-3.5" />
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {versionsDesc.map((v) => (
               <SelectItem key={v.version} value={String(v.version)}>
-                Version {v.version}
-                {v.version === artifact.current_version ? ' (current)' : ''}
+                {v.version === artifact.current_version
+                  ? t('components.artifact.versionCurrent', {
+                      version: v.version,
+                    })
+                  : t('components.artifact.version', { version: v.version })}
               </SelectItem>
             ))}
           </SelectContent>
@@ -398,14 +403,10 @@ export default function DocumentArtifactView({
           variant="outline"
           size="sm"
           onClick={handleDownload}
-          disabled={downloading}
+          loading={downloading}
         >
-          {downloading ? (
-            <Spinner size="small" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
-          Download
+          <Download />
+          {t('components.artifact.download')}
         </Button>
 
         {!isCurrent && (
@@ -414,19 +415,20 @@ export default function DocumentArtifactView({
             variant="ghost"
             size="sm"
             onClick={handleRestore}
-            disabled={restoring}
+            loading={restoring}
           >
-            {restoring ? (
-              <Spinner size="small" />
-            ) : (
-              <RotateCcw className="h-4 w-4" />
-            )}
-            Restore
+            <RotateCcw />
+            {t('components.artifact.restore')}
           </Button>
         )}
       </div>
 
-      {actionError && <p className="text-xs text-red-500">{actionError}</p>}
+      {actionError && (
+        <Alert variant="destructive">
+          <CircleAlert className="size-4" aria-hidden="true" />
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
+      )}
 
       <div className="min-h-0 flex-1 overflow-hidden">{renderPreview()}</div>
     </div>
diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
deleted file mode 100644
index 94692bfe..00000000
--- a/frontend/src/components/DocumentPagination.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import SingleArrowLeft from '../assets/single-left-arrow.svg';
-import SingleArrowRight from '../assets/single-right-arrow.svg';
-import DoubleArrowLeft from '../assets/double-arrow-left.svg';
-import DoubleArrowRight from '../assets/double-arrow-right.svg';
-import { Button } from './ui/button';
-
-interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  rowsPerPage: number;
-  onPageChange: (page: number) => void;
-  onRowsPerPageChange: (rows: number) => void;
-}
-
-const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  rowsPerPage,
-  onPageChange,
-  onRowsPerPageChange,
-}) => {
-  const { t } = useTranslation();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const rowsPerPageOptions = [5, 10, 20, 50];
-
-  const toggleDropdown = () => setIsDropdownOpen((prev) => !prev);
-
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  };
-
-  const handleNextPage = () => {
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
-    }
-  };
-
-  const handleFirstPage = () => {
-    onPageChange(1);
-  };
-
-  const handleLastPage = () => {
-    onPageChange(totalPages);
-  };
-
-  const handleSelectRowsPerPage = (rows: number) => {
-    setIsDropdownOpen(false);
-    onRowsPerPageChange(rows);
-  };
-
-  return (
-    <div className="mt-2 flex items-center justify-end gap-4 border-gray-200 p-2 text-xs">
-      {/* Rows per page dropdown */}
-      <div className="relative flex items-center gap-2">
-        <span className="text-gray-900 dark:text-gray-50">
-          {t('pagination.rowsPerPage')}:
-        </span>
-        <div className="relative">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={toggleDropdown}
-            className="dark:bg-card h-auto rounded px-3 py-1 shadow-none"
-          >
-            {rowsPerPage}
-          </Button>
-          <div
-            className={`ring-opacity-5 dark:bg-card bg-card absolute right-0 z-50 mt-1 w-28 transform shadow-lg ring-1 ring-black transition-all duration-200 ease-in-out ${
-              isDropdownOpen
-                ? 'block scale-100 opacity-100'
-                : 'hidden scale-95 opacity-0'
-            }`}
-          >
-            {rowsPerPageOptions.map((option) => (
-              <div
-                key={option}
-                onClick={() => handleSelectRowsPerPage(option)}
-                className={`hover:bg-accent dark:hover:bg-accent cursor-pointer px-4 py-2 text-xs ${
-                  rowsPerPage === option
-                    ? 'dark:text-foreground bg-gray-100 dark:bg-neutral-700'
-                    : 'bg-card dark:text-foreground'
-                }`}
-              >
-                {option}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Pagination controls */}
-      <div className="text-gray-900 dark:text-gray-50">
-        {t('pagination.pageOf', { currentPage, totalPages })}
-      </div>
-      <div className="flex items-center gap-2 text-gray-900 dark:text-gray-50">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={handleFirstPage}
-          disabled={currentPage === 1}
-          className="h-auto rounded px-2 py-1 shadow-none"
-        >
-          <img
-            src={DoubleArrowLeft}
-            alt={t('pagination.firstPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={handlePreviousPage}
-          disabled={currentPage === 1}
-          className="h-auto rounded px-2 py-1 shadow-none"
-        >
-          <img
-            src={SingleArrowLeft}
-            alt={t('pagination.previousPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={handleNextPage}
-          disabled={currentPage === totalPages}
-          className="h-auto rounded px-2 py-1 shadow-none"
-        >
-          <img
-            src={SingleArrowRight}
-            alt={t('pagination.nextPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={handleLastPage}
-          disabled={currentPage === totalPages}
-          className="h-auto rounded px-2 py-1 shadow-none"
-        >
-          <img
-            src={DoubleArrowRight}
-            alt={t('pagination.lastPage')}
-            className="dark:brightness-200 dark:invert dark:sepia"
-          />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;
diff --git a/frontend/src/components/FilePicker.test.tsx b/frontend/src/components/FilePicker.test.tsx
new file mode 100644
index 00000000..6ac53d29
--- /dev/null
+++ b/frontend/src/components/FilePicker.test.tsx
@@ -0,0 +1,115 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+const validateConnectorSession = vi.fn();
+const getConnectorFiles = vi.fn();
+vi.mock('../api/services/userService', () => ({
+  default: {
+    validateConnectorSession: (...args: unknown[]) =>
+      validateConnectorSession(...args),
+    getConnectorFiles: (...args: unknown[]) => getConnectorFiles(...args),
+    disconnectConnector: vi.fn(),
+  },
+}));
+
+vi.mock('../utils/providerUtils', () => ({
+  getSessionToken: () => 'session-token',
+  setSessionToken: vi.fn(),
+  removeSessionToken: vi.fn(),
+}));
+
+vi.mock('../components/ConnectorAuth', () => ({ default: () => null }));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { FilePicker } from './FilePicker';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('FilePicker', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    validateConnectorSession.mockReset();
+    getConnectorFiles.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('shows an expired session as a destructive alert', async () => {
+    validateConnectorSession.mockResolvedValue({ ok: false });
+    await act(async () => {
+      root.render(
+        <FilePicker
+          provider="google_drive"
+          token={null}
+          onSelectionChange={() => undefined}
+        />,
+      );
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain('filePicker.sessionExpiredFor');
+    expect(alert?.querySelector('svg')).not.toBeNull();
+  });
+
+  async function renderSharePoint() {
+    validateConnectorSession.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        user_email: 'lena@meridian.example',
+        allows_shared_content: true,
+      }),
+    });
+    getConnectorFiles.mockResolvedValue({
+      json: async () => ({ success: true, files: [], next_page_token: null }),
+    });
+    await act(async () => {
+      root.render(
+        <FilePicker
+          provider="share_point"
+          token={null}
+          onSelectionChange={() => undefined}
+        />,
+      );
+    });
+  }
+
+  it('renders the drive switch as underline tabs with the active one marked', async () => {
+    await renderSharePoint();
+    const list = container.querySelector('[data-slot="tabs-list"]')!;
+    expect(list.getAttribute('role')).toBe('tablist');
+    expect(list.getAttribute('data-variant')).toBe('underline');
+    const tabs = Array.from(
+      list.querySelectorAll('[data-slot="tabs-trigger"][role="tab"]'),
+    );
+    expect(tabs.map((tab) => tab.textContent)).toEqual([
+      'filePicker.myFiles',
+      'filePicker.sharedWithMe',
+    ]);
+    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
+    expect(tabs[1].getAttribute('aria-selected')).toBe('false');
+    // The file list below is the active tab's panel.
+    const panel = container.querySelector('[role="tabpanel"]')!;
+    expect(panel.id).toBe(tabs[0].getAttribute('aria-controls'));
+  });
+
+  it('shows the folder trail as a breadcrumb with the current folder as the page', async () => {
+    await renderSharePoint();
+    const trail = container.querySelector('nav[aria-label="breadcrumb"]');
+    expect(trail).not.toBeNull();
+    const page = trail?.querySelector('[data-slot="breadcrumb-page"]');
+    expect(page?.textContent).toBe('filePicker.myFiles');
+    expect(page?.getAttribute('title')).toBe('filePicker.myFiles');
+    expect(trail?.querySelector('button[disabled]')).toBeNull();
+  });
+});
diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index d8437d42..f9570bc0 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -1,5 +1,11 @@
-import { Search as SearchIcon } from 'lucide-react';
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { File, Folder, TriangleAlert } from 'lucide-react';
+import React, {
+  Fragment,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import userService from '../api/services/userService';
 import { formatBytes } from '../utils/stringUtils';
@@ -10,11 +16,18 @@ import {
   removeSessionToken,
 } from '../utils/providerUtils';
 import ConnectorAuth from '../components/ConnectorAuth';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
-import CheckIcon from '../assets/checkmark.svg';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
+import SearchInput from './SearchInput';
+import { Alert, AlertDescription } from './ui/alert';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './ui/breadcrumb';
+import { Checkbox } from './ui/checkbox';
+import { Skeleton } from './ui/skeleton';
 import {
   Table,
   TableContainer,
@@ -24,6 +37,7 @@ import {
   TableHeader,
   TableCell,
 } from './ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { useDebouncedCallback } from '../hooks';
 
 interface CloudFile {
@@ -35,6 +49,26 @@ interface CloudFile {
   isFolder?: boolean;
 }
 
+/**
+ * The file browser under the drive tabs. With the tabs shown it is the active
+ * tab's panel; without them (one drive) it renders as is.
+ */
+function DrivePanel({
+  tabbed,
+  value,
+  children,
+}: {
+  tabbed: boolean;
+  value: string;
+  children: React.ReactNode;
+}) {
+  return tabbed ? (
+    <TabsContent value={value}>{children}</TabsContent>
+  ) : (
+    <>{children}</>
+  );
+}
+
 interface CloudFilePickerProps {
   onSelectionChange: (
     selectedFileIds: string[],
@@ -54,31 +88,31 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
   token,
   initialSelectedFiles = [],
 }) => {
+  const { t } = useTranslation();
   const PROVIDER_CONFIG = {
     google_drive: {
       displayName: 'Drive',
-      rootName: 'My Drive',
+      rootName: t('filePicker.myDrive'),
     },
     share_point: {
       displayName: 'SharePoint',
-      rootName: 'My Files',
+      rootName: t('filePicker.myFiles'),
     },
     confluence: {
       displayName: 'Confluence',
-      rootName: 'Spaces',
+      rootName: t('filePicker.spaces'),
     },
-  } as const;
+  };
 
   const getProviderConfig = (provider: string) => {
     return (
       PROVIDER_CONFIG[provider as keyof typeof PROVIDER_CONFIG] || {
         displayName: provider,
-        rootName: 'Root',
+        rootName: t('filePicker.root'),
       }
     );
   };
 
-  const { t } = useTranslation();
   const [files, setFiles] = useState<CloudFile[]>([]);
   const [selectedFiles, setSelectedFiles] =
     useState<string[]>(initialSelectedFiles);
@@ -193,14 +227,19 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
         removeSessionToken(provider);
         setIsConnected(false);
         setAuthError(
-          `Session expired. Please reconnect to ${getProviderConfig(provider).displayName}.`,
+          t('filePicker.sessionExpiredFor', {
+            provider: getProviderConfig(provider).displayName,
+          }),
         );
         return;
       }
 
       const validateData = await validateResponse.json();
       if (validateData.success) {
-        setUserEmail(validateData.user_email || 'Connected User');
+        setUserEmail(
+          validateData.user_email ||
+            t('modals.uploadDoc.connectors.auth.connectedUser'),
+        );
         setIsConnected(true);
         setAuthError('');
         if (provider === 'share_point') {
@@ -224,12 +263,12 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
         setIsConnected(false);
         setAuthError(
           validateData.error ||
-            'Session expired. Please reconnect your account.',
+            t('modals.uploadDoc.connectors.googleDrive.sessionExpiredGeneric'),
         );
       }
     } catch (error) {
       console.error('Error validating session:', error);
-      setAuthError('Failed to validate session. Please reconnect.');
+      setAuthError(t('modals.uploadDoc.connectors.googleDrive.validateFailed'));
       setIsConnected(false);
     }
   }, [provider, token, loadCloudFiles]);
@@ -339,6 +378,8 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
     }
   };
 
+  const showDriveTabs = provider === 'share_point' && allowsSharedContent;
+
   const handleTabChange = (tab: 'my_files' | 'shared') => {
     if (tab === activeTab) return;
     setActiveTab(tab);
@@ -351,7 +392,9 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
       {
         id: null,
         name:
-          tab === 'shared' ? 'Shared' : getProviderConfig(provider).rootName,
+          tab === 'shared'
+            ? t('filePicker.shared')
+            : getProviderConfig(provider).rootName,
       },
     ]);
     const sessionToken = getSessionToken(provider);
@@ -379,14 +422,22 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
   return (
     <div className="">
       {authError && (
-        <div className="mb-4 text-center text-sm text-red-500">{authError}</div>
+        <Alert variant="destructive" className="mb-4">
+          <TriangleAlert aria-hidden="true" />
+          <AlertDescription>{authError}</AlertDescription>
+        </Alert>
       )}
 
       <ConnectorAuth
         provider={provider}
-        label={`Connect to ${getProviderConfig(provider).displayName}`}
+        label={t('filePicker.connectTo', {
+          provider: getProviderConfig(provider).displayName,
+        })}
         onSuccess={(data) => {
-          setUserEmail(data.user_email || 'Connected User');
+          setUserEmail(
+            data.user_email ||
+              t('modals.uploadDoc.connectors.auth.connectedUser'),
+          );
           setIsConnected(true);
           setAuthError('');
 
@@ -429,208 +480,198 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
       />
 
       {isConnected && (
-        <div className="border-border dark:border-border mt-3 overflow-hidden rounded-lg border">
-          <div className="border-border dark:border-border rounded-t-lg">
-            {provider === 'share_point' && allowsSharedContent && (
-              <div className="border-border dark:border-border flex border-b">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => handleTabChange('my_files')}
-                  className={`h-auto rounded-none px-4 py-2 text-sm font-medium ${
-                    activeTab === 'my_files'
-                      ? 'border-b-2 border-[#A076F6] text-[#A076F6] hover:bg-transparent hover:text-[#A076F6]'
-                      : 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
-                  }`}
-                >
+        <div className="border-border mt-3 overflow-hidden rounded-lg border">
+          <Tabs
+            value={activeTab}
+            onValueChange={(value) =>
+              handleTabChange(value as 'my_files' | 'shared')
+            }
+          >
+            {showDriveTabs && (
+              <TabsList variant="underline">
+                <TabsTrigger variant="underline" value="my_files">
                   {t('filePicker.myFiles')}
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => handleTabChange('shared')}
-                  className={`h-auto rounded-none px-4 py-2 text-sm font-medium ${
-                    activeTab === 'shared'
-                      ? 'border-b-2 border-[#A076F6] text-[#A076F6] hover:bg-transparent hover:text-[#A076F6]'
-                      : 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
-                  }`}
-                >
+                </TabsTrigger>
+                <TabsTrigger variant="underline" value="shared">
                   {t('filePicker.sharedWithMe')}
-                </Button>
-              </div>
+                </TabsTrigger>
+              </TabsList>
             )}
-            <div className="dark:bg-muted rounded-t-lg bg-[#EEE6FF78] px-4 pt-4">
-              <div className="mb-2 flex items-center gap-1">
-                {folderPath.map((path, index) => (
-                  <div
-                    key={path.id || 'root'}
-                    className="flex items-center gap-1"
-                  >
-                    {index > 0 && <span className="text-gray-400">/</span>}
-                    <Button
-                      type="button"
-                      variant="link"
-                      size="sm"
-                      onClick={() => navigateBack(index)}
-                      className="h-auto p-0 text-sm text-[#A076F6] underline-offset-2 hover:text-[#8A5FD4]"
-                      disabled={index === folderPath.length - 1}
-                    >
-                      {path.name}
-                    </Button>
-                  </div>
-                ))}
-              </div>
-
-              <div className="mb-3 text-sm text-gray-600 dark:text-gray-400">
-                Select Files from {getProviderConfig(provider).displayName}
-              </div>
-
-              <div className="mb-3 max-w-md">
-                <Input
-                  type="text"
-                  label={t('filePicker.searchPlaceholder')}
-                  value={searchQuery}
-                  onChange={(e) => handleSearchChange(e.target.value)}
-                  labelBgClassName="bg-[#EEE6FF78] dark:bg-muted"
-                  leftIcon={
-                    <SearchIcon
-                      className="text-muted-foreground size-4"
-                      strokeWidth={1.75}
-                    />
-                  }
-                />
-              </div>
-
-              {/* Selected Files Message */}
-              <div className="pb-3 text-sm text-gray-600 dark:text-gray-400">
-                {t('filePicker.itemsSelected', {
-                  count: selectedFiles.length + selectedFolders.length,
-                })}
-              </div>
-            </div>
-
-            <div className="border-border dark:border-border h-72 border-t">
-              <TableContainer
-                ref={scrollContainerRef}
-                height="288px"
-                className="scrollbar-overlay md:w-4xl lg:w-5xl"
-                bordered={false}
-              >
-                {
-                  <>
-                    <Table minWidth="1200px">
-                      <TableHead>
-                        <TableRow>
-                          <TableHeader width="40px"></TableHeader>
-                          <TableHeader width="60%">
-                            {t('filePicker.name')}
-                          </TableHeader>
-                          <TableHeader width="20%">
-                            {t('filePicker.lastModified')}
-                          </TableHeader>
-                          <TableHeader width="20%">
-                            {t('filePicker.size')}
-                          </TableHeader>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {isLoading && files.length === 0
-                          ? Array.from({ length: 5 }).map((_, i) => (
-                              <TableRow key={`skeleton-${i}`}>
-                                <TableCell width="40px" align="center">
-                                  <div className="mx-auto h-5 w-5 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                                </TableCell>
-                                <TableCell>
-                                  <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                                </TableCell>
-                                <TableCell>
-                                  <div className="h-4 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                                </TableCell>
-                                <TableCell>
-                                  <div className="h-4 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                                </TableCell>
-                              </TableRow>
-                            ))
-                          : files.map((file, index) => (
-                              <TableRow
-                                key={`${file.id}-${index}`}
-                                onClick={() => {
-                                  if (isFolder(file)) {
-                                    handleFolderClick(file.id, file.name);
-                                  } else {
-                                    handleFileSelect(file.id, false);
-                                  }
-                                }}
+            <DrivePanel tabbed={showDriveTabs} value={activeTab}>
+              <div className="bg-muted rounded-t-lg px-4 pt-4">
+                <Breadcrumb className="mb-2 min-w-0">
+                  <BreadcrumbList className="flex-nowrap">
+                    {folderPath.map((path, index) => (
+                      <Fragment key={path.id || 'root'}>
+                        {index > 0 && <BreadcrumbSeparator />}
+                        {index === folderPath.length - 1 ? (
+                          <BreadcrumbItem className="min-w-0">
+                            <BreadcrumbPage
+                              title={path.name}
+                              className="max-w-[32ch]"
+                            >
+                              {path.name}
+                            </BreadcrumbPage>
+                          </BreadcrumbItem>
+                        ) : (
+                          <BreadcrumbItem>
+                            <BreadcrumbLink asChild>
+                              <button
+                                type="button"
+                                onClick={() => navigateBack(index)}
                               >
+                                {path.name}
+                              </button>
+                            </BreadcrumbLink>
+                          </BreadcrumbItem>
+                        )}
+                      </Fragment>
+                    ))}
+                  </BreadcrumbList>
+                </Breadcrumb>
+
+                <div className="text-muted-foreground mb-3 text-sm">
+                  {t('filePicker.selectFilesFrom', {
+                    provider: getProviderConfig(provider).displayName,
+                  })}
+                </div>
+
+                <div className="mb-3 max-w-md">
+                  <SearchInput
+                    label={t('filePicker.searchPlaceholder')}
+                    value={searchQuery}
+                    onChange={(e) => handleSearchChange(e.target.value)}
+                    labelSurface="muted"
+                  />
+                </div>
+
+                {/* Selected Files Message */}
+                <div className="text-muted-foreground pb-3 text-sm">
+                  {t('filePicker.itemsSelected', {
+                    count: selectedFiles.length + selectedFolders.length,
+                  })}
+                </div>
+              </div>
+
+              <div className="border-border scrollbar-overlay h-72 border-t">
+                <TableContainer
+                  ref={scrollContainerRef}
+                  height="288px"
+                  className="md:w-4xl lg:w-5xl"
+                  bordered={false}
+                >
+                  {
+                    <>
+                      <Table minWidth="1200px">
+                        <TableHead>
+                          <TableRow>
+                            <TableHeader width="40px"></TableHeader>
+                            <TableHeader width="60%">
+                              {t('filePicker.name')}
+                            </TableHeader>
+                            <TableHeader width="20%">
+                              {t('filePicker.lastModified')}
+                            </TableHeader>
+                            <TableHeader width="20%">
+                              {t('filePicker.size')}
+                            </TableHeader>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {isLoading && files.length === 0
+                            ? Array.from({ length: 5 }).map((_, i) => (
+                                <TableRow key={`skeleton-${i}`}>
+                                  <TableCell width="40px" align="center">
+                                    <Skeleton className="mx-auto size-5" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <Skeleton className="h-4 w-48" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <Skeleton className="h-4 w-24" />
+                                  </TableCell>
+                                  <TableCell>
+                                    <Skeleton className="h-4 w-16" />
+                                  </TableCell>
+                                </TableRow>
+                              ))
+                            : files.map((file, index) => (
+                                <TableRow
+                                  key={`${file.id}-${index}`}
+                                  onClick={() => {
+                                    if (isFolder(file)) {
+                                      handleFolderClick(file.id, file.name);
+                                    } else {
+                                      handleFileSelect(file.id, false);
+                                    }
+                                  }}
+                                >
+                                  <TableCell width="40px" align="center">
+                                    <Checkbox
+                                      size="sm"
+                                      className="align-middle"
+                                      aria-label={file.name}
+                                      checked={(isFolder(file)
+                                        ? selectedFolders
+                                        : selectedFiles
+                                      ).includes(file.id)}
+                                      onClick={(e) => e.stopPropagation()}
+                                      onCheckedChange={() =>
+                                        handleFileSelect(
+                                          file.id,
+                                          isFolder(file),
+                                        )
+                                      }
+                                    />
+                                  </TableCell>
+                                  <TableCell>
+                                    <div className="flex min-w-0 items-center gap-3">
+                                      <div className="shrink-0">
+                                        {isFolder(file) ? (
+                                          <Folder className="text-primary size-6" />
+                                        ) : (
+                                          <File className="text-muted-foreground size-6" />
+                                        )}
+                                      </div>
+                                      <span className="truncate">
+                                        {file.name}
+                                      </span>
+                                    </div>
+                                  </TableCell>
+                                  <TableCell className="text-xs">
+                                    {formatDateTime(file.modifiedTime)}
+                                  </TableCell>
+                                  <TableCell className="text-xs">
+                                    {file.size ? formatBytes(file.size) : '-'}
+                                  </TableCell>
+                                </TableRow>
+                              ))}
+                          {isLoading &&
+                            files.length > 0 &&
+                            Array.from({ length: 3 }).map((_, i) => (
+                              <TableRow key={`load-more-skeleton-${i}`}>
                                 <TableCell width="40px" align="center">
-                                  <div
-                                    className="border-border dark:border-border mx-auto flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border p-[0.5px] text-sm"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleFileSelect(file.id, isFolder(file));
-                                    }}
-                                  >
-                                    {(isFolder(file)
-                                      ? selectedFolders
-                                      : selectedFiles
-                                    ).includes(file.id) && (
-                                      <img
-                                        src={CheckIcon}
-                                        alt="Selected"
-                                        className="h-4 w-4"
-                                      />
-                                    )}
-                                  </div>
+                                  <Skeleton className="mx-auto size-5" />
                                 </TableCell>
                                 <TableCell>
-                                  <div className="flex min-w-0 items-center gap-3">
-                                    <div className="shrink-0">
-                                      <img
-                                        src={
-                                          isFolder(file) ? FolderIcon : FileIcon
-                                        }
-                                        alt={isFolder(file) ? 'Folder' : 'File'}
-                                        className="h-6 w-6"
-                                      />
-                                    </div>
-                                    <span className="truncate">
-                                      {file.name}
-                                    </span>
-                                  </div>
+                                  <Skeleton className="h-4 w-48" />
                                 </TableCell>
-                                <TableCell className="text-xs">
-                                  {formatDateTime(file.modifiedTime)}
+                                <TableCell>
+                                  <Skeleton className="h-4 w-24" />
                                 </TableCell>
-                                <TableCell className="text-xs">
-                                  {file.size ? formatBytes(file.size) : '-'}
+                                <TableCell>
+                                  <Skeleton className="h-4 w-16" />
                                 </TableCell>
                               </TableRow>
                             ))}
-                        {isLoading &&
-                          files.length > 0 &&
-                          Array.from({ length: 3 }).map((_, i) => (
-                            <TableRow key={`load-more-skeleton-${i}`}>
-                              <TableCell width="40px" align="center">
-                                <div className="mx-auto h-5 w-5 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="h-4 w-48 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="h-4 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                              </TableCell>
-                              <TableCell>
-                                <div className="h-4 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                      </TableBody>
-                    </Table>
-                  </>
-                }
-              </TableContainer>
-            </div>
-          </div>
+                        </TableBody>
+                      </Table>
+                    </>
+                  }
+                </TableContainer>
+              </div>
+            </DrivePanel>
+          </Tabs>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/FileTree.tsx b/frontend/src/components/FileTree.tsx
index 34586151..b406a2d2 100644
--- a/frontend/src/components/FileTree.tsx
+++ b/frontend/src/components/FileTree.tsx
@@ -1,17 +1,15 @@
-import React, { SyntheticEvent, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
-import Trash from '../assets/red-trash.svg';
+import { Trash2 } from 'lucide-react';
 import { SOURCE_FILE_TREE_ACCEPT_ATTR } from '../constants/fileUpload';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { selectToken } from '../preferences/preferenceSlice';
 import TreeBrowser from './tree/TreeBrowser';
-import type {
-  RowMenuContext,
-  TreeBrowserController,
-  TreeMenuOption,
-} from './tree/types';
+import { Button } from './ui/button';
+import type { MenuOption } from './ui/dropdown-menu';
+import type { RowMenuContext, TreeBrowserController } from './tree/types';
 import { useReingestSseWaiter } from './tree/useReingestWait';
 
 type QueuedOperation = {
@@ -211,18 +209,13 @@ const FileTree: React.FC<FileTreeProps> = ({
     name,
     isFile,
     defaultViewOption,
-  }: RowMenuContext): TreeMenuOption[] => {
+  }: RowMenuContext): MenuOption[] => {
     return [
       defaultViewOption,
       {
-        icon: Trash,
+        icon: Trash2,
         label: t('convTile.delete'),
-        onClick: (event: SyntheticEvent) => {
-          event.stopPropagation();
-          confirmDeleteItem(name, isFile);
-        },
-        iconWidth: 18,
-        iconHeight: 18,
+        onClick: () => confirmDeleteItem(name, isFile),
         variant: 'destructive',
       },
     ];
@@ -240,13 +233,9 @@ const FileTree: React.FC<FileTreeProps> = ({
     <>
       {headerAction}
       {!isProcessing ? (
-        <button
-          onClick={handleAddFile}
-          className="bg-primary hover:bg-primary/90 flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm font-medium whitespace-nowrap text-white"
-          title={t('settings.sources.addFile')}
-        >
+        <Button type="button" size="field" shape="pill" onClick={handleAddFile}>
           {t('settings.sources.addFile')}
-        </button>
+        </Button>
       ) : null}
     </>
   );
@@ -265,7 +254,7 @@ const FileTree: React.FC<FileTreeProps> = ({
       handleSubmit={handleConfirmedDelete}
       handleCancel={handleCancelDelete}
       submitLabel={t('convTile.delete')}
-      variant="danger"
+      variant="destructive"
     />
   );
 
diff --git a/frontend/src/components/FileUpload.test.tsx b/frontend/src/components/FileUpload.test.tsx
new file mode 100644
index 00000000..33f3ccc4
--- /dev/null
+++ b/frontend/src/components/FileUpload.test.tsx
@@ -0,0 +1,111 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { FileUpload } from './FileUpload';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+function makeFile(name: string, type: string, bytes = 10): File {
+  return new File([new Uint8Array(bytes)], name, { type });
+}
+
+async function selectFiles(container: HTMLElement, files: File[]) {
+  const input = container.querySelector('input[type="file"]');
+  if (!input) throw new Error('no file input');
+  Object.defineProperty(input, 'files', { value: files, configurable: true });
+  await act(async () => {
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  });
+  // react-dropzone resolves the selected files asynchronously.
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+describe('FileUpload', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it('renders on the shared Dropzone with the upload prompt', async () => {
+    await act(async () => {
+      root.render(<FileUpload onUpload={vi.fn()} />);
+    });
+    const zone = container.querySelector('[data-slot="dropzone"]');
+    expect(zone).not.toBeNull();
+    expect(zone?.getAttribute('data-size')).toBe('default');
+    expect(container.textContent).toContain(
+      'components.fileUpload.clickToUpload',
+    );
+    expect(container.textContent).toContain('components.fileUpload.fileTypes');
+  });
+
+  it('passes the compact size through', async () => {
+    await act(async () => {
+      root.render(<FileUpload onUpload={vi.fn()} size="compact" />);
+    });
+    expect(
+      container
+        .querySelector('[data-slot="dropzone"]')
+        ?.getAttribute('data-size'),
+    ).toBe('compact');
+  });
+
+  it('renders highlighted upload text segments', async () => {
+    await act(async () => {
+      root.render(
+        <FileUpload
+          onUpload={vi.fn()}
+          uploadText={[
+            { text: 'Click to upload', highlight: true },
+            { text: ' or drag and drop' },
+          ]}
+        />,
+      );
+    });
+    const highlighted = Array.from(container.querySelectorAll('span')).find(
+      (s) => s.textContent === 'Click to upload',
+    );
+    expect(highlighted?.className).toContain('text-primary');
+  });
+
+  it('calls onUpload with a valid file', async () => {
+    const onUpload = vi.fn();
+    await act(async () => {
+      root.render(<FileUpload onUpload={onUpload} />);
+    });
+    const file = makeFile('logo.png', 'image/png');
+    await selectFiles(container, [file]);
+    expect(onUpload).toHaveBeenCalledWith([file]);
+  });
+
+  it('shows the validator error and does not upload', async () => {
+    const onUpload = vi.fn();
+    await act(async () => {
+      root.render(
+        <FileUpload
+          onUpload={onUpload}
+          validator={() => ({ isValid: false, error: 'Bad image' })}
+        />,
+      );
+    });
+    await selectFiles(container, [makeFile('logo.png', 'image/png')]);
+    expect(onUpload).not.toHaveBeenCalled();
+    const error = container.querySelector('.text-destructive');
+    expect(error?.textContent).toContain('Bad image');
+  });
+});
diff --git a/frontend/src/components/FileUpload.tsx b/frontend/src/components/FileUpload.tsx
index 73aafa73..2fd94c68 100644
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -1,10 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDropzone } from 'react-dropzone';
-import { twMerge } from 'tailwind-merge';
+import type { FileRejection } from 'react-dropzone';
+import { ImageUp, X } from 'lucide-react';
 
-import Cross from '../assets/cross.svg';
-import ImagesIcon from '../assets/images.svg';
+import { Dropzone } from '@/components/ui/dropzone';
+
+type UploadTextSegment = {
+  text: string;
+  /** Renders the segment in the brand colour; others are muted. */
+  highlight?: boolean;
+};
 
 interface FileUploadProps {
   onUpload: (files: File[]) => void;
@@ -15,14 +20,14 @@ interface FileUploadProps {
   accept?: Record<string, string[]>; // e.g. { 'image/*': ['.png', '.jpg'] }
   showPreview?: boolean;
   previewSize?: number;
+  /** `compact` is a one-row target for forms and panels. */
+  size?: 'default' | 'compact';
 
   children?: React.ReactNode;
+  /** Layout classes only; the Dropzone owns colours, border and radius. */
   className?: string;
-  activeClassName?: string;
-  acceptClassName?: string;
-  rejectClassName?: string;
 
-  uploadText?: string | { text: string; colorClass?: string }[];
+  uploadText?: string | UploadTextSegment[];
   dragActiveText?: string;
   fileTypeText?: string;
   sizeLimitText?: string;
@@ -31,6 +36,13 @@ interface FileUploadProps {
   validator?: (file: File) => { isValid: boolean; error?: string };
 }
 
+/**
+ * Image/file picker built on `ui/dropzone`. Adds size and custom validation,
+ * an optional image preview with a remove button, and translated prompts.
+ *
+ * @param props - See `FileUploadProps`.
+ * @returns The dropzone with its preview and validation errors.
+ */
 export const FileUpload = ({
   onUpload,
   onRemove,
@@ -40,11 +52,9 @@ export const FileUpload = ({
   accept = { 'image/*': ['.jpeg', '.png', '.jpg'] },
   showPreview = false,
   previewSize = 80,
+  size = 'default',
   children,
-  className = 'border-2 border-dashed rounded-3xl p-6 text-center cursor-pointer transition-colors border-border dark:border-border',
-  activeClassName = 'border-blue-500 bg-blue-50',
-  acceptClassName = 'border-green-500 dark:border-green-500 bg-green-50 dark:bg-green-50/10',
-  rejectClassName = 'border-red-500 bg-red-50 dark:bg-red-500/10 dark:border-red-500',
+  className,
   uploadText,
   dragActiveText,
   fileTypeText,
@@ -83,12 +93,12 @@ export const FileUpload = ({
   };
 
   const onDrop = useCallback(
-    (acceptedFiles: File[], fileRejections: any[]) => {
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
       setErrors([]);
 
       if (fileRejections.length > 0) {
         const newErrors = fileRejections
-          .map(({ errors }) => errors.map((e: any) => e.message))
+          .map(({ errors }) => errors.map((e) => e.message))
           .flat();
         setErrors(newErrors);
         return;
@@ -117,44 +127,26 @@ export const FileUpload = ({
     [onUpload, multiple, maxSize, validator],
   );
 
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({
-    onDrop,
-    multiple,
-    maxFiles,
-    maxSize,
-    accept,
-    disabled,
-  });
-
-  const currentClassName = twMerge(
-    'border-2 border-dashed rounded-3xl p-8 text-center cursor-pointer transition-colors border-border dark:border-border',
-    className,
-    isDragActive && activeClassName,
-    isDragAccept && acceptClassName,
-    isDragReject && rejectClassName,
-    disabled && 'opacity-50 cursor-not-allowed',
-  );
-
   const handleRemove = () => {
     setPreview(null);
     setCurrentFile(null);
     if (onRemove && currentFile) onRemove(currentFile);
   };
 
+  // Callers size the preview box at runtime; a custom property keeps the
+  // dimension out of the style's width/height and in the classes.
+  const previewSizeStyle = {
+    '--preview-size': `${previewSize}px`,
+  } as React.CSSProperties;
+
   const renderPreview = () => (
     <div
-      className="relative"
-      style={{ width: previewSize, height: previewSize }}
+      className="relative size-(--preview-size) shrink-0"
+      style={previewSizeStyle}
     >
       <img
         src={preview ?? undefined}
-        alt="preview"
+        alt={t('components.fileUpload.preview')}
         className="h-full w-full rounded-md object-cover"
       />
       <button
@@ -164,77 +156,82 @@ export const FileUpload = ({
           handleRemove();
         }}
         className="bg-primary hover:bg-primary/90 absolute -top-2 -right-2 rounded-full p-1 transition-colors"
+        aria-label={t('components.fileUpload.remove')}
       >
-        <img src={Cross} alt="remove" className="h-3 w-3" />
+        <X className="text-primary-foreground size-3" />
       </button>
     </div>
   );
 
-  const renderUploadText = () => {
-    if (Array.isArray(uploadText)) {
-      return (
-        <p className="text-sm font-semibold">
-          {uploadText.map((segment, i) => (
-            <span key={i} className={segment.colorClass || ''}>
-              {segment.text}
-            </span>
-          ))}
-        </p>
-      );
-    }
-    return (
-      <p className="text-sm font-semibold">
-        {uploadText || t('components.fileUpload.clickToUpload')}
-      </p>
-    );
-  };
-
-  const defaultContent = (
-    <div className="flex flex-col items-center gap-2">
-      {showPreview && preview ? (
-        renderPreview()
-      ) : (
-        <div
-          style={{ width: previewSize, height: previewSize }}
-          className="flex items-center justify-center"
+  const uploadPrompt = Array.isArray(uploadText)
+    ? uploadText.map((segment, i) => (
+        <span
+          key={i}
+          className={
+            segment.highlight ? 'text-primary' : 'text-muted-foreground'
+          }
         >
-          <img src={ImagesIcon} className="h-10 w-10" />
-        </div>
-      )}
-      <div className="text-center">
-        <div className="text-sm font-medium">
-          {isDragActive ? (
-            <p className="text-sm font-semibold">
-              {dragActiveText || t('components.fileUpload.dropFiles')}
-            </p>
-          ) : (
-            renderUploadText()
-          )}
-        </div>
-        <p className="mt-1 text-xs text-[#A3A3A3]">
-          {fileTypeText || t('components.fileUpload.fileTypes')}{' '}
-          {maxSize / 1024 / 1024}
-          {sizeLimitText || t('components.fileUpload.sizeLimitUnit')}
-        </p>
-      </div>
-    </div>
+          {segment.text}
+        </span>
+      ))
+    : uploadText || t('components.fileUpload.clickToUpload');
+
+  // The Dropzone owns the drag state; its data attribute swaps the prompt.
+  const title = (
+    <>
+      <span className="in-data-[drag-active]:hidden">{uploadPrompt}</span>
+      <span className="hidden in-data-[drag-active]:inline">
+        {dragActiveText || t('components.fileUpload.dropFiles')}
+      </span>
+    </>
   );
 
+  const description = (
+    <>
+      {fileTypeText || t('components.fileUpload.fileTypes')}{' '}
+      {maxSize / 1024 / 1024}
+      {sizeLimitText || t('components.fileUpload.sizeLimitUnit')}
+    </>
+  );
+
+  // With a preview, the image takes the icon's place; the text block mirrors
+  // the Dropzone's own title/description layout.
+  const previewContent =
+    showPreview && preview ? (
+      <>
+        {renderPreview()}
+        <span className="flex min-w-0 flex-col gap-0.5">
+          <span className="text-sm font-medium">{title}</span>
+          <span className="text-muted-foreground text-xs">{description}</span>
+        </span>
+      </>
+    ) : undefined;
+
+  const error =
+    errors.length > 0
+      ? errors.map((message, i) => (
+          <span key={i} className="block truncate">
+            {message}
+          </span>
+        ))
+      : undefined;
+
   return (
-    <div className="relative">
-      <div {...getRootProps({ className: currentClassName })}>
-        <input {...getInputProps()} />
-        {children || defaultContent}
-        {errors.length > 0 && (
-          <div className="absolute right-0 left-0 mt-[2px] px-4 text-xs text-red-600">
-            {errors.map((error, i) => (
-              <p key={i} className="truncate">
-                {error}
-              </p>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
+    <Dropzone
+      onDrop={onDrop}
+      accept={accept}
+      multiple={multiple}
+      maxFiles={maxFiles}
+      maxSize={maxSize}
+      disabled={disabled}
+      size={size}
+      title={title}
+      description={description}
+      icon={<ImageUp />}
+      error={error}
+      className={className}
+    >
+      {children ?? previewContent}
+    </Dropzone>
   );
 };
diff --git a/frontend/src/components/GoogleDrivePicker.tsx b/frontend/src/components/GoogleDrivePicker.tsx
index 6cdef9b2..e172040f 100644
--- a/frontend/src/components/GoogleDrivePicker.tsx
+++ b/frontend/src/components/GoogleDrivePicker.tsx
@@ -19,6 +19,7 @@ import {
 } from '../utils/providerUtils';
 import SkeletonLoader from './SkeletonLoader';
 import { Button } from './ui/button';
+import { SectionHeader } from './ui/section-header';
 
 interface PickerFile {
   id: string;
@@ -123,8 +124,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
 
     try {
       const clientId: string = envVar('VITE_GOOGLE_CLIENT_ID');
-      const developerKey: string =
-        envVar('VITE_GOOGLE_PICKER_API_KEY') ?? '';
+      const developerKey: string = envVar('VITE_GOOGLE_PICKER_API_KEY') ?? '';
 
       // Derive appId from clientId (extract numeric part before first dash)
       const appId = clientId ? clientId.split('-')[0] : null;
@@ -265,29 +265,28 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
           />
 
           {isConnected && (
-            <div className="border-border dark:border-border rounded-lg border">
+            <div className="border-border rounded-lg border">
               <div className="p-4">
                 <div className="mb-4 flex items-center justify-between">
-                  <h3 className="text-sm font-medium">
-                    {t('modals.uploadDoc.connectors.googleDrive.selectedFiles')}
-                  </h3>
+                  <SectionHeader
+                    as="h3"
+                    size="xs"
+                    title={t(
+                      'modals.uploadDoc.connectors.googleDrive.selectedFiles',
+                    )}
+                  />
                   <Button
                     type="button"
                     size="sm"
                     onClick={() => handleOpenPicker()}
-                    className="bg-[#A076F6] hover:bg-[#8A5FD4]"
-                    disabled={isLoading}
+                    loading={isLoading}
                   >
-                    {isLoading
-                      ? t('modals.uploadDoc.connectors.googleDrive.loading')
-                      : t(
-                          'modals.uploadDoc.connectors.googleDrive.selectFiles',
-                        )}
+                    {t('modals.uploadDoc.connectors.googleDrive.selectFiles')}
                   </Button>
                 </div>
 
                 {selectedFiles.length === 0 && selectedFolders.length === 0 ? (
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                  <p className="text-muted-foreground text-sm">
                     {t(
                       'modals.uploadDoc.connectors.googleDrive.noFilesSelected',
                     )}
@@ -295,29 +294,33 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                 ) : (
                   <div className="max-h-60 overflow-y-auto">
                     {selectedFolders.length > 0 && (
-                      <div className="mb-2">
-                        <h4 className="mb-1 text-xs font-medium text-gray-500">
-                          {t('modals.uploadDoc.connectors.googleDrive.folders')}
-                        </h4>
+                      <div className="mb-2 flex flex-col gap-1">
+                        <SectionHeader
+                          as="h4"
+                          size="xs"
+                          title={t(
+                            'modals.uploadDoc.connectors.googleDrive.folders',
+                          )}
+                        />
                         {selectedFolders.map((folder) => (
                           <div
                             key={folder.id}
-                            className="flex items-center border-b border-gray-200 p-2 dark:border-gray-700"
+                            className="border-border flex items-center gap-2 border-b p-2"
                           >
                             <img
                               src={folder.iconUrl}
                               alt={t(
                                 'modals.uploadDoc.connectors.googleDrive.folderAlt',
                               )}
-                              className="mr-2 h-5 w-5"
+                              className="size-5"
                             />
                             <span className="flex-1 truncate text-sm">
                               {folder.name}
                             </span>
                             <Button
                               type="button"
-                              variant="link"
-                              size="sm"
+                              variant="ghost-destructive"
+                              size="xs"
                               onClick={() => {
                                 const newSelectedFolders =
                                   selectedFolders.filter(
@@ -329,7 +332,6 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                                   newSelectedFolders.map((f) => f.id),
                                 );
                               }}
-                              className="ml-2 h-auto p-0 text-sm text-red-500 hover:text-red-700 hover:no-underline"
                             >
                               {t(
                                 'modals.uploadDoc.connectors.googleDrive.remove',
@@ -341,29 +343,33 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                     )}
 
                     {selectedFiles.length > 0 && (
-                      <div>
-                        <h4 className="mb-1 text-xs font-medium text-gray-500">
-                          {t('modals.uploadDoc.connectors.googleDrive.files')}
-                        </h4>
+                      <div className="flex flex-col gap-1">
+                        <SectionHeader
+                          as="h4"
+                          size="xs"
+                          title={t(
+                            'modals.uploadDoc.connectors.googleDrive.files',
+                          )}
+                        />
                         {selectedFiles.map((file) => (
                           <div
                             key={file.id}
-                            className="flex items-center border-b border-gray-200 p-2 dark:border-gray-700"
+                            className="border-border flex items-center gap-2 border-b p-2"
                           >
                             <img
                               src={file.iconUrl}
                               alt={t(
                                 'modals.uploadDoc.connectors.googleDrive.fileAlt',
                               )}
-                              className="mr-2 h-5 w-5"
+                              className="size-5"
                             />
                             <span className="flex-1 truncate text-sm">
                               {file.name}
                             </span>
                             <Button
                               type="button"
-                              variant="link"
-                              size="sm"
+                              variant="ghost-destructive"
+                              size="xs"
                               onClick={() => {
                                 const newSelectedFiles = selectedFiles.filter(
                                   (f) => f.id !== file.id,
@@ -374,7 +380,6 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
                                   selectedFolders.map((f) => f.id),
                                 );
                               }}
-                              className="ml-2 h-auto p-0 text-sm text-red-500 hover:text-red-700 hover:no-underline"
                             >
                               {t(
                                 'modals.uploadDoc.connectors.googleDrive.remove',
diff --git a/frontend/src/components/GraphView.tsx b/frontend/src/components/GraphView.tsx
index f61b62e1..c4c048e3 100644
--- a/frontend/src/components/GraphView.tsx
+++ b/frontend/src/components/GraphView.tsx
@@ -1,14 +1,16 @@
 import { forceCollide, type SimulationNodeDatum } from 'd3-force';
-import { Network, X } from 'lucide-react';
+import { ArrowLeft, Network, X } from 'lucide-react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import ForceGraph2D, { type ForceGraphMethods } from 'react-force-graph-2d';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Button } from './ui/button';
+import { useThemeVersion } from '../utils/chartUtils';
+import { Badge } from './ui/badge';
+import { IconButton } from './ui/icon-button';
+import { SectionHeader } from './ui/section-header';
 import SkeletonLoader from './SkeletonLoader';
 import {
   ForceGraphData,
@@ -19,6 +21,7 @@ import {
   maxDegree,
   nodeAtPoint,
   nodeRadius,
+  readGraphPalette,
   toForceGraphData,
 } from './graphViewUtils';
 
@@ -53,6 +56,11 @@ const GraphView: React.FC<GraphViewProps> = ({
   const hoveredNodeIdRef = useRef<string | null>(null);
   const fgRef = useRef<ForceGraphMethods | undefined>(undefined);
   const [size, setSize] = useState({ width: 0, height: 480 });
+  // The canvas can't read CSS variables: resolve the tokens, and re-read them
+  // whenever the theme changes.
+  const themeVersion = useThemeVersion();
+  // themeVersion is not used inside the factory: it only signals a change.
+  const palette = useMemo(() => readGraphPalette(), [themeVersion]);
 
   useEffect(() => {
     let cancelled = false;
@@ -129,6 +137,11 @@ const GraphView: React.FC<GraphViewProps> = ({
     if (fg) fg.zoom(fg.zoom());
   };
 
+  // A settled simulation stops drawing, so paint the new colours once.
+  useEffect(() => {
+    repaint();
+  }, [palette]);
+
   const handlePointerMove = (event: React.MouseEvent<HTMLDivElement>) => {
     const node = pickNodeAt(event.clientX, event.clientY);
     if (containerRef.current) {
@@ -159,29 +172,24 @@ const GraphView: React.FC<GraphViewProps> = ({
   return (
     <div className="flex flex-col">
       <div className="mb-4 flex items-center">
-        <Button
-          type="button"
+        <IconButton
           variant="outline"
-          size="icon-sm"
-          className="text-muted-foreground mr-3 h-[29px] w-[29px] rounded-full p-2 dark:border-0"
+          size="icon-xs"
+          shape="pill"
+          className="mr-3"
           onClick={onBackToDocuments}
-          aria-label={t('settings.sources.backToAll')}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </Button>
+          label={t('settings.sources.backToAll')}
+          icon={ArrowLeft}
+          side="bottom"
+        />
         <span className="text-primary font-semibold wrap-break-word">
           {sourceName}
         </span>
         {headerAction ? <div className="ml-auto">{headerAction}</div> : null}
       </div>
 
-      <div className="bg-muted/60 text-muted-foreground dark:bg-accent/40 mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
-        <Network
-          size={16}
-          strokeWidth={1.75}
-          className="mt-0.5 shrink-0"
-          aria-hidden="true"
-        />
+      <div className="bg-muted text-muted-foreground mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
+        <Network className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
         <p>
           <span className="text-foreground font-medium">
             {t('settings.sources.graphrag.view.title')}
@@ -194,7 +202,7 @@ const GraphView: React.FC<GraphViewProps> = ({
         <SkeletonLoader count={4} />
       ) : isEmpty ? (
         <div className="border-border text-muted-foreground flex flex-col items-center gap-2 rounded-xl border border-dashed px-6 py-12 text-center text-sm">
-          <Network size={28} strokeWidth={1.5} aria-hidden="true" />
+          <Network className="size-7" aria-hidden="true" />
           <p>{t('settings.sources.graphrag.view.empty')}</p>
         </div>
       ) : (
@@ -225,7 +233,7 @@ const GraphView: React.FC<GraphViewProps> = ({
                   nodeVal={(node) =>
                     nodeRadius((node as GraphNode).degree, maxNodeDegree)
                   }
-                  linkColor={() => 'rgba(150,150,150,0.35)'}
+                  linkColor={() => palette.link}
                   cooldownTicks={80}
                   nodeCanvasObject={(node, ctx, globalScale) => {
                     const graphNode = node as GraphNode & {
@@ -237,8 +245,13 @@ const GraphView: React.FC<GraphViewProps> = ({
                     const hovered = hoveredNodeIdRef.current === graphNode.id;
                     ctx.beginPath();
                     ctx.arc(graphNode.x, graphNode.y ?? 0, r, 0, 2 * Math.PI);
-                    ctx.fillStyle = hovered ? '#7aa7d9' : '#4a7fb5';
+                    ctx.fillStyle = palette.node;
                     ctx.fill();
+                    if (hovered) {
+                      ctx.lineWidth = 2 / globalScale;
+                      ctx.strokeStyle = palette.hoverStroke;
+                      ctx.stroke();
+                    }
                     if (globalScale >= 1.2) {
                       const label = graphNode.name ?? '';
                       const x = graphNode.x;
@@ -248,11 +261,9 @@ const GraphView: React.FC<GraphViewProps> = ({
                       ctx.textBaseline = 'top';
                       ctx.lineWidth = 3 / globalScale;
                       ctx.lineJoin = 'round';
-                      ctx.strokeStyle = 'rgba(10,10,10,0.85)';
+                      ctx.strokeStyle = palette.halo;
                       ctx.strokeText(label, x, y);
-                      ctx.fillStyle = hovered
-                        ? 'rgba(255,255,255,0.98)'
-                        : 'rgba(210,210,210,0.95)';
+                      ctx.fillStyle = palette.label;
                       ctx.fillText(label, x, y);
                     }
                   }}
@@ -267,23 +278,27 @@ const GraphView: React.FC<GraphViewProps> = ({
                 <div className="flex flex-col">
                   <div className="mb-2 flex items-start justify-between gap-2">
                     <div className="min-w-0">
-                      <h3 className="text-foreground text-sm font-semibold wrap-break-word">
-                        {selectedNode.name}
-                      </h3>
+                      <SectionHeader
+                        as="h3"
+                        size="xs"
+                        className="wrap-break-word"
+                        title={selectedNode.name}
+                      />
                       {selectedNode.type && (
-                        <span className="bg-muted-foreground/10 text-muted-foreground mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium">
+                        <Badge variant="neutral" className="mt-1">
                           {selectedNode.type}
-                        </span>
+                        </Badge>
                       )}
                     </div>
-                    <button
-                      type="button"
+                    <IconButton
+                      variant="ghost-muted"
+                      size="icon-xs"
+                      className="shrink-0"
                       onClick={() => setSelectedNode(null)}
-                      aria-label={t('settings.sources.graphrag.view.close')}
-                      className="text-muted-foreground hover:text-foreground shrink-0"
-                    >
-                      <X size={16} aria-hidden="true" />
-                    </button>
+                      label={t('settings.sources.graphrag.view.close')}
+                      icon={X}
+                      side="bottom"
+                    />
                   </div>
 
                   {selectedNode.description && (
@@ -292,25 +307,29 @@ const GraphView: React.FC<GraphViewProps> = ({
                     </p>
                   )}
 
-                  <h4 className="text-foreground mb-2 text-xs font-semibold">
-                    {t('settings.sources.graphrag.view.linkedChunks')}
-                  </h4>
-                  {selectedNode.chunks.length === 0 ? (
-                    <p className="text-muted-foreground text-xs">
-                      {t('settings.sources.graphrag.view.noChunks')}
-                    </p>
-                  ) : (
-                    <ul className="flex flex-col gap-2">
-                      {selectedNode.chunks.map((chunk) => (
-                        <li
-                          key={chunk.chunk_id}
-                          className="border-border text-muted-foreground rounded-md border px-3 py-2 text-xs leading-relaxed wrap-break-word"
-                        >
-                          {chunk.text}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
+                  <div className="flex flex-col gap-2">
+                    <SectionHeader
+                      as="h4"
+                      size="xs"
+                      title={t('settings.sources.graphrag.view.linkedChunks')}
+                    />
+                    {selectedNode.chunks.length === 0 ? (
+                      <p className="text-muted-foreground text-xs">
+                        {t('settings.sources.graphrag.view.noChunks')}
+                      </p>
+                    ) : (
+                      <ul className="flex flex-col gap-2">
+                        {selectedNode.chunks.map((chunk) => (
+                          <li
+                            key={chunk.chunk_id}
+                            className="border-border text-muted-foreground rounded-md border px-3 py-2 text-xs leading-relaxed wrap-break-word"
+                          >
+                            {chunk.text}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
                 </div>
               ) : (
                 <p className="text-muted-foreground py-2 text-sm">
diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx
index 721ba5ba..fffe2c63 100644
--- a/frontend/src/components/Help.tsx
+++ b/frontend/src/components/Help.tsx
@@ -1,108 +1,60 @@
-import { useState, useRef, useEffect } from 'react';
-import { ShieldCheck } from 'lucide-react';
+import { FileText, Info, Mail, ShieldCheck } from 'lucide-react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import Info from '../assets/info.svg';
-import PageIcon from '../assets/documentation.svg';
-import EmailIcon from '../assets/envelope.svg';
 import { useTranslation } from 'react-i18next';
 import { selectIsAdmin } from '../preferences/preferenceSlice';
 import { Button } from './ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+
 const Help = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation();
   const isAdmin = useSelector(selectIsAdmin);
 
-  const toggleDropdown = () => {
-    setIsOpen((prev) => !prev);
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      dropdownRef.current &&
-      !dropdownRef.current.contains(event.target as Node) &&
-      buttonRef.current &&
-      !buttonRef.current.contains(event.target as Node)
-    ) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
   return (
-    <div className="relative inline-block text-sm" ref={dropdownRef}>
-      <Button
-        type="button"
-        variant="ghost"
-        ref={buttonRef}
-        onClick={toggleDropdown}
-        className="hover:bg-sidebar-accent mx-4 my-auto w-full justify-start gap-2.5 rounded-3xl pr-0 pl-3"
-      >
-        <img
-          src={Info}
-          alt="info"
-          className="w-5 shrink-0 filter dark:invert"
-        />
-        {t('help')}
-      </Button>
-      {isOpen && (
-        <div
-          className={`dark:bg-card bg-card absolute z-10 w-48 translate-x-4 ${
-            isAdmin ? '-translate-y-40' : '-translate-y-28'
-          } rounded-xl shadow-lg`}
-        >
+    <div className="inline-block text-sm">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="sidebar-item"
+            className="mx-4 my-auto w-full"
+          >
+            <Info className="text-muted-foreground size-5 shrink-0" />
+            {t('help')}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="top" align="start" className="w-48">
           {isAdmin && (
-            <Link
-              to="/admin"
-              onClick={() => setIsOpen(false)}
-              className="hover:bg-muted text-foreground flex items-center gap-4 rounded-t-xl px-4 py-2"
-            >
-              <ShieldCheck
-                size={20}
-                strokeWidth={1.75}
-                className="text-muted-foreground shrink-0"
-              />
-              {t('admin.label', 'Admin')}
-            </Link>
+            <DropdownMenuItem asChild>
+              <Link to="/admin">
+                <ShieldCheck />
+                {t('admin.label', 'Admin')}
+              </Link>
+            </DropdownMenuItem>
           )}
-          <a
-            href="https://docs.docsgpt.cloud/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={`hover:bg-muted text-foreground flex items-start gap-4 px-4 py-2 ${
-              isAdmin ? '' : 'rounded-t-xl'
-            }`}
-          >
-            <img
-              src={PageIcon}
-              alt="Documentation"
-              className="filter dark:invert"
-              width={20}
-            />
-            {t('documentation')}
-          </a>
-          <a
-            href="mailto:support@docsgpt.cloud"
-            className="hover:bg-muted text-foreground flex items-start gap-4 rounded-b-xl px-4 py-2"
-          >
-            <img
-              src={EmailIcon}
-              alt="Email Us"
-              className="p-0.5 filter dark:invert"
-              width={20}
-            />
-            {t('emailUs')}
-          </a>
-        </div>
-      )}
+          <DropdownMenuItem asChild>
+            <a
+              href="https://docs.docsgpt.cloud/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FileText />
+              {t('documentation')}
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <a href="mailto:support@docsgpt.cloud">
+              <Mail />
+              {t('emailUs')}
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   );
 };
diff --git a/frontend/src/components/MarkdownPreview.tsx b/frontend/src/components/MarkdownPreview.tsx
index d671e8e1..dcb595a2 100644
--- a/frontend/src/components/MarkdownPreview.tsx
+++ b/frontend/src/components/MarkdownPreview.tsx
@@ -1,6 +1,10 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import { markdownHeadings } from '@/lib/markdown';
+
+import { Button } from './ui/button';
+
 /**
  * Minimal GFM markdown renderer for artifact text previews. ReactMarkdown
  * parses to React elements (no `dangerouslySetInnerHTML`), so untrusted
@@ -9,20 +13,18 @@ import remarkGfm from 'remark-gfm';
 export default function MarkdownPreview({ content }: { content: string }) {
   return (
     <div className="h-full overflow-auto p-4">
-      <div className="flex flex-col gap-3 text-sm leading-normal break-words whitespace-pre-wrap text-gray-800 dark:text-gray-200">
+      <div className="text-foreground flex flex-col gap-3 text-sm leading-normal break-words whitespace-pre-wrap">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={{
+            ...markdownHeadings,
             a({ children, href }) {
               return (
-                <a
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:underline dark:text-blue-400"
-                >
-                  {children}
-                </a>
+                <Button variant="link" size="inline" asChild>
+                  <a href={href} target="_blank" rel="noopener noreferrer">
+                    {children}
+                  </a>
+                </Button>
               );
             },
             ul({ children }) {
@@ -39,19 +41,10 @@ export default function MarkdownPreview({ content }: { content: string }) {
                 </ol>
               );
             },
-            h1({ children }) {
-              return <h1 className="text-xl font-bold">{children}</h1>;
-            },
-            h2({ children }) {
-              return <h2 className="text-lg font-bold">{children}</h2>;
-            },
-            h3({ children }) {
-              return <h3 className="text-base font-bold">{children}</h3>;
-            },
             code({ children, ...rest }) {
               return (
                 <code
-                  className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal"
+                  className="bg-accent rounded-md px-2 py-1 text-xs font-normal"
                   {...rest}
                 >
                   {children}
@@ -60,7 +53,7 @@ export default function MarkdownPreview({ content }: { content: string }) {
             },
             blockquote({ children }) {
               return (
-                <blockquote className="border-l-4 border-gray-300 pl-4 italic dark:border-gray-600">
+                <blockquote className="border-border border-l-4 pl-4 italic">
                   {children}
                 </blockquote>
               );
diff --git a/frontend/src/components/MermaidRenderer.test.tsx b/frontend/src/components/MermaidRenderer.test.tsx
index 409235c0..bf144826 100644
--- a/frontend/src/components/MermaidRenderer.test.tsx
+++ b/frontend/src/components/MermaidRenderer.test.tsx
@@ -6,7 +6,10 @@ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 const renderMermaidDiagramMock = vi.hoisted(() => vi.fn());
 
 vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
+  useTranslation: () => ({
+    t: (key: string, opts?: { format?: string }) =>
+      opts?.format ? `${key} ${opts.format}` : key,
+  }),
 }));
 vi.mock('react-redux', () => ({ useSelector: () => 'idle' }));
 vi.mock('../hooks', () => ({ useDarkTheme: () => [false] }));
@@ -48,7 +51,44 @@ describe('MermaidRenderer', () => {
       );
     });
 
-    expect(container.querySelector('pre.mermaid')).not.toBeNull();
+    // The diagram host is the only <pre> while the code view is closed.
+    expect(container.querySelectorAll('pre')).toHaveLength(1);
+    expect(container.querySelector('pre')?.id).toMatch(/^mermaid-/);
     expect(container.querySelector('svg[data-rendered="true"]')).not.toBeNull();
   });
+
+  it('opens the Download menu with a menu item per format', async () => {
+    renderMermaidDiagramMock.mockResolvedValue({ svg: '<svg></svg>' });
+
+    await act(async () => {
+      root.render(
+        <MermaidRenderer code={'flowchart LR\nA --> B'} isLoading={false} />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[aria-haspopup="menu"]',
+    );
+    expect(trigger).not.toBeNull();
+    expect(trigger?.textContent).toContain('mermaid.download');
+    expect(trigger?.hasAttribute('title')).toBe(false);
+    expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+
+    await act(async () => {
+      trigger?.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
+    const items = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).map((item) => item.textContent);
+    expect(items).toEqual([
+      'mermaid.downloadAs SVG',
+      'mermaid.downloadAs PNG',
+      'mermaid.downloadAs MMD',
+    ]);
+  });
 });
diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index ff86d882..16c41e2d 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { CircleAlert } from 'lucide-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import {
   oneLight,
@@ -11,7 +12,15 @@ import { selectStatus } from '../conversation/conversationSlice';
 import { useDarkTheme } from '../hooks';
 import CopyButton from './CopyButton';
 import { renderMermaidDiagram } from './mermaidSecurity';
+import { Alert, AlertDescription } from './ui/alert';
 import { Button } from './ui/button';
+import { IconButton } from './ui/icon-button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
 import { MermaidRendererProps } from './types';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
@@ -27,8 +36,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const status = useSelector(selectStatus);
   const [error, setError] = useState<string | null>(null);
   const [showCode, setShowCode] = useState<boolean>(false);
-  const [showDownloadMenu, setShowDownloadMenu] = useState<boolean>(false);
-  const downloadMenuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const diagramRef = useRef<HTMLPreElement>(null);
   const [hoverPosition, setHoverPosition] = useState<{
@@ -114,7 +121,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           if (cancelled) return;
           console.error('Error rendering mermaid diagram:', err);
           setError(
-            `Failed to render diagram: ${err instanceof Error ? err.message : String(err)}`,
+            t('mermaid.renderFailed', {
+              message: err instanceof Error ? err.message : String(err),
+            }),
           );
         }
       }
@@ -126,22 +135,6 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
     };
   }, [code, isDarkTheme, isCurrentlyLoading]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        downloadMenuRef.current &&
-        !downloadMenuRef.current.contains(event.target as Node)
-      ) {
-        setShowDownloadMenu(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [showDownloadMenu]);
-
   const downloadSvg = (): void => {
     const element = document.getElementById(diagramId.current);
     if (!element) return;
@@ -265,73 +258,52 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   };
 
   const downloadOptions = [
-    { label: 'Download as SVG', action: downloadSvg },
-    { label: 'Download as PNG', action: downloadPng },
-    { label: 'Download as MMD', action: downloadMmd },
+    { label: t('mermaid.downloadAs', { format: 'SVG' }), action: downloadSvg },
+    { label: t('mermaid.downloadAs', { format: 'PNG' }), action: downloadPng },
+    { label: t('mermaid.downloadAs', { format: 'MMD' }), action: downloadMmd },
   ];
 
   const showDiagramOptions = !isCurrentlyLoading && !error;
   const errorRender = !isCurrentlyLoading && error;
 
   return (
-    <div className="w-inherit group border-border bg-card relative overflow-hidden rounded-xl border">
+    <div className="group border-border bg-card relative overflow-hidden rounded-xl border">
       <div className="bg-muted flex items-center justify-between px-2 py-1">
-        <span className="text-foreground dark:text-foreground text-xs font-medium">
-          mermaid
-        </span>
+        <span className="text-foreground text-xs font-medium">mermaid</span>
         <div className="flex items-center gap-2">
-          <CopyButton textToCopy={String(code).replace(/\n$/, '')} />
+          <CopyButton
+            textToCopy={String(code).replace(/\n$/, '')}
+            side="bottom"
+          />
 
           {showDiagramOptions && (
-            <div className="relative" ref={downloadMenuRef}>
-              <Button
-                type="button"
-                variant="secondary"
-                size="sm"
-                onClick={() => setShowDownloadMenu(!showDownloadMenu)}
-                className="h-auto gap-1 rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
-                title={t('mermaid.downloadOptions')}
-              >
-                Download <span className="ml-1">▼</span>
-              </Button>
-              {showDownloadMenu && (
-                <div className="border-border bg-card absolute right-0 z-10 mt-1 w-40 rounded-sm border shadow-lg">
-                  <ul>
-                    {downloadOptions.map((option, index) => (
-                      <li key={index}>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          onClick={() => {
-                            option.action();
-                            setShowDownloadMenu(false);
-                          }}
-                          className="h-auto w-full justify-start rounded-none px-4 py-2 text-left text-xs font-normal"
-                        >
-                          {option.label}
-                        </Button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="ghost-muted" size="xs">
+                  {t('mermaid.download')} <span className="ml-1">▼</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-40">
+                {downloadOptions.map((option) => (
+                  <DropdownMenuItem
+                    key={option.label}
+                    onSelect={() => option.action()}
+                  >
+                    {option.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
           )}
 
           {showDiagramOptions && (
             <Button
               type="button"
-              variant="secondary"
-              size="sm"
+              variant={showCode ? 'secondary' : 'ghost-muted'}
+              size="xs"
               onClick={() => setShowCode(!showCode)}
-              className={`h-auto rounded px-2 py-1 text-xs ${
-                showCode
-                  ? 'bg-blue-200 hover:bg-blue-200/90 dark:bg-blue-800 dark:hover:bg-blue-800/90'
-                  : 'bg-gray-100 hover:bg-gray-100/90 dark:bg-gray-700 dark:hover:bg-gray-700/90'
-              }`}
-              title={t('mermaid.viewCode')}
             >
-              Code
+              {t('mermaid.code')}
             </Button>
           )}
         </div>
@@ -339,16 +311,17 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
 
       {isCurrentlyLoading ? (
         <div className="bg-card flex items-center justify-center p-4">
-          <div className="text-sm text-gray-500 dark:text-gray-400">
-            Loading diagram...
+          <div className="text-muted-foreground text-sm">
+            {t('mermaid.loading')}
           </div>
         </div>
       ) : errorRender ? (
-        <div className="m-2 rounded-sm border-2 border-red-400 dark:border-red-700">
-          <div className="overflow-auto bg-red-100 px-4 py-2 text-sm wrap-break-word whitespace-normal text-red-800 dark:bg-red-900/30 dark:text-red-300">
+        <Alert variant="destructive" className="m-2 w-auto">
+          <CircleAlert />
+          <AlertDescription className="overflow-auto wrap-break-word whitespace-normal">
             {error}
-          </div>
-        </div>
+          </AlertDescription>
+        </Alert>
       ) : (
         <>
           <div
@@ -370,43 +343,52 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             {isHovering && (
               <>
                 <div className="absolute top-2 right-2 z-10 flex items-center gap-2 rounded-sm bg-black/70 px-2 py-1 text-xs text-white">
-                  <Button
-                    type="button"
+                  <IconButton
+                    label={t('mermaid.decreaseZoom')}
+                    side="bottom"
                     variant="ghost"
+                    size="icon-xs"
                     onClick={() =>
                       setZoomFactor((prev) => Math.max(1, prev - 0.5))
                     }
-                    className="h-auto px-1 py-0 text-white hover:bg-gray-600 hover:text-white"
-                    title={t('mermaid.decreaseZoom')}
+                    /* eslint-disable-next-line shadcn/no-restyle --
+                       zoom controls sit on the bg-black/70 overlay; ghost's accent hover would paint a light square on it */
+                    className="hover:bg-white/20 hover:text-white"
                   >
                     -
-                  </Button>
-                  <span
-                    className="cursor-pointer hover:underline"
-                    onClick={() => {
-                      setZoomFactor(2);
-                    }}
-                    title={t('mermaid.resetZoom')}
-                  >
-                    {zoomFactor.toFixed(1)}x
-                  </span>
+                  </IconButton>
                   <Button
                     type="button"
+                    variant="link"
+                    size="inline"
+                    onClick={() => setZoomFactor(2)}
+                    title={t('mermaid.resetZoom')}
+                    /* eslint-disable-next-line shadcn/no-restyle --
+                       on the bg-black/70 zoom overlay, like its − / + siblings: keeps the overlay's white 12px regular */
+                    className="text-xs font-normal text-current"
+                  >
+                    {zoomFactor.toFixed(1)}x
+                  </Button>
+                  <IconButton
+                    label={t('mermaid.increaseZoom')}
+                    side="bottom"
                     variant="ghost"
+                    size="icon-xs"
                     onClick={() =>
                       setZoomFactor((prev) => Math.min(6, prev + 0.5))
                     }
-                    className="h-auto px-1 py-0 text-white hover:bg-gray-600 hover:text-white"
-                    title={t('mermaid.increaseZoom')}
+                    /* eslint-disable-next-line shadcn/no-restyle --
+                       zoom controls sit on the bg-black/70 overlay; ghost's accent hover would paint a light square on it */
+                    className="hover:bg-white/20 hover:text-white"
                   >
                     +
-                  </Button>
+                  </IconButton>
                 </div>
               </>
             )}
             <pre
               ref={diagramRef}
-              className="mermaid w-full select-none"
+              className="w-full select-none"
               id={diagramId.current}
               key={`mermaid-${diagramId.current}`}
               style={{
@@ -424,8 +406,8 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           {showCode && (
             <div className="border-border border-t">
               <div className="bg-muted p-2">
-                <span className="text-foreground dark:text-foreground text-xs font-medium">
-                  Mermaid Code
+                <span className="text-foreground text-xs font-medium">
+                  {t('mermaid.codeTitle')}
                 </span>
               </div>
               <SyntaxHighlighter
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 76751195..c9a90216 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1,4 +1,6 @@
 import { envVar } from '@/env';
+import { cn } from '@/lib/utils';
+import { CloudUpload, Database } from 'lucide-react';
 import {
   useCallback,
   useEffect,
@@ -9,14 +11,13 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { useDropzone } from 'react-dropzone';
+import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import endpoints from '../api/endpoints';
 import userService from '../api/services/userService';
-import DragFileUpload from '../assets/DragFileUpload.svg';
 import SendArrow from '../assets/send.svg?react';
-import SourceIcon from '../assets/source.svg';
 import {
   addAttachment,
   removeAttachment,
@@ -38,6 +39,7 @@ import type { RootState } from '../store';
 import Upload from '../upload/Upload';
 import { isTouchDevice } from '../utils/browserUtils';
 import { Button } from './ui/button';
+import { IconButton } from './ui/icon-button';
 import { type MultiSelectPopoverItem } from './MultiSelectPopover';
 import ToolIcon from './ToolIcon';
 import {
@@ -125,19 +127,19 @@ const getLegacyGetUserMedia = () => {
 
 const getVoiceInputSupportError = (): string | null => {
   if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-    return 'Voice input is unavailable right now.';
+    return i18n.t('conversation.voice.unavailable');
   }
 
   if (!window.isSecureContext) {
-    return 'Voice input requires a secure connection (HTTPS or localhost).';
+    return i18n.t('conversation.voice.insecure');
   }
 
   if (!navigator.mediaDevices?.getUserMedia && !getLegacyGetUserMedia()) {
-    return 'Voice input is not available in this browser.';
+    return i18n.t('conversation.voice.unsupported');
   }
 
   if (!getAudioContextConstructor()) {
-    return 'Voice input requires Web Audio support in this browser.';
+    return i18n.t('conversation.voice.noWebAudio');
   }
 
   return null;
@@ -152,9 +154,7 @@ const getUserMediaStream = (
 
   const legacyGetUserMedia = getLegacyGetUserMedia();
   if (!legacyGetUserMedia) {
-    return Promise.reject(
-      new Error('Voice input is not available in this browser.'),
-    );
+    return Promise.reject(new Error(i18n.t('conversation.voice.unsupported')));
   }
 
   return new Promise((resolve, reject) => {
@@ -164,7 +164,7 @@ const getUserMediaStream = (
 
 const getVoiceInputErrorMessage = (error: unknown): string => {
   if (typeof window !== 'undefined' && !window.isSecureContext) {
-    return 'Voice input requires a secure connection (HTTPS or localhost).';
+    return i18n.t('conversation.voice.insecure');
   }
 
   if (error instanceof DOMException) {
@@ -172,15 +172,15 @@ const getVoiceInputErrorMessage = (error: unknown): string => {
       case 'NotAllowedError':
       case 'PermissionDeniedError':
       case 'SecurityError':
-        return 'Microphone access was blocked. Allow microphone permission and try again.';
+        return i18n.t('conversation.voice.micBlocked');
       case 'NotFoundError':
       case 'DevicesNotFoundError':
-        return 'No microphone was found on this device.';
+        return i18n.t('conversation.voice.micNotFound');
       case 'NotReadableError':
       case 'TrackStartError':
-        return 'The microphone is unavailable or already in use.';
+        return i18n.t('conversation.voice.micBusy');
       case 'AbortError':
-        return 'Microphone access was interrupted before recording started.';
+        return i18n.t('conversation.voice.micInterrupted');
       default:
         break;
     }
@@ -190,7 +190,7 @@ const getVoiceInputErrorMessage = (error: unknown): string => {
     return error.message;
   }
 
-  return 'Microphone access was denied.';
+  return i18n.t('conversation.voice.micDenied');
 };
 
 const downsampleFloat32Buffer = (
@@ -1060,7 +1060,9 @@ export default function MessageInput({
       const data = await response.json();
 
       if (!response.ok || !data?.success) {
-        throw new Error(data?.message || 'Failed to transcribe audio.');
+        throw new Error(
+          data?.message || t('conversation.voice.transcribeFailed'),
+        );
       }
 
       if (typeof data.text !== 'string' || !data.text.trim()) {
@@ -1078,7 +1080,9 @@ export default function MessageInput({
       console.error('Uploaded audio transcription failed', error);
       setRecordingState('error');
       setVoiceError(
-        error instanceof Error ? error.message : 'Failed to transcribe audio.',
+        error instanceof Error
+          ? error.message
+          : t('conversation.voice.transcribeFailed'),
       );
     }
   };
@@ -1155,7 +1159,7 @@ export default function MessageInput({
 
       if (!response.ok || !data?.success) {
         throw new Error(
-          data?.message || 'Failed to finalize live transcription.',
+          data?.message || t('conversation.voice.finalizeFailed'),
         );
       }
 
@@ -1175,7 +1179,7 @@ export default function MessageInput({
       setVoiceError(
         error instanceof Error
           ? error.message
-          : 'Failed to finalize live transcription.',
+          : t('conversation.voice.finalizeFailed'),
       );
     } finally {
       resetLiveTranscriptionState();
@@ -1227,7 +1231,9 @@ export default function MessageInput({
       const data = await response.json();
 
       if (!response.ok || !data?.success) {
-        throw new Error(data?.message || 'Failed to transcribe audio.');
+        throw new Error(
+          data?.message || t('conversation.voice.transcribeFailed'),
+        );
       }
 
       if (typeof data.transcript_text === 'string') {
@@ -1235,7 +1241,9 @@ export default function MessageInput({
       }
     } catch (error) {
       await failLiveTranscription(
-        error instanceof Error ? error.message : 'Failed to transcribe audio.',
+        error instanceof Error
+          ? error.message
+          : t('conversation.voice.transcribeFailed'),
       );
       return;
     } finally {
@@ -1308,7 +1316,7 @@ export default function MessageInput({
     const AudioContextConstructor = getAudioContextConstructor();
     if (!AudioContextConstructor) {
       setRecordingState('error');
-      setVoiceError('Voice input requires Web Audio support in this browser.');
+      setVoiceError(t('conversation.voice.noWebAudio'));
       return;
     }
 
@@ -1326,7 +1334,7 @@ export default function MessageInput({
       const liveStartData = await liveStartResponse.json();
       if (!liveStartResponse.ok || !liveStartData?.success) {
         throw new Error(
-          liveStartData?.message || 'Failed to start live transcription.',
+          liveStartData?.message || t('conversation.voice.startFailed'),
         );
       }
 
@@ -1410,7 +1418,7 @@ export default function MessageInput({
       setVoiceError(
         error instanceof Error
           ? error.message
-          : 'Failed to start live transcription.',
+          : t('conversation.voice.startFailed'),
       );
     }
   };
@@ -1494,7 +1502,7 @@ export default function MessageInput({
           own: t('conversation.sources.groupOwn'),
           team: t('conversation.sources.groupTeam'),
         },
-        SourceIcon,
+        <Database />,
       ),
     [sourceDocs, t],
   );
@@ -1541,7 +1549,7 @@ export default function MessageInput({
   const toolItems: MultiSelectPopoverItem[] = userTools.map((tool) => ({
     id: tool.id,
     label: tool.customName || tool.displayName,
-    icon: <ToolIcon name={tool.name} className="h-5 w-5" />,
+    icon: <ToolIcon name={tool.name} className="size-5" />,
   }));
 
   const selectedToolIds = userTools
@@ -1678,7 +1686,7 @@ export default function MessageInput({
           controls (dead Attach button, see AttachFileButton). */}
       <div
         translate="no"
-        className="border-border bg-card relative flex w-full flex-col rounded-3xl border dark:bg-transparent"
+        className="border-border bg-card relative flex w-full flex-col rounded-3xl border"
       >
         <AttachmentChipList
           attachments={attachments}
@@ -1701,18 +1709,22 @@ export default function MessageInput({
                 count: sendReadiness.pendingCount,
               })}
             </span>
-            <button
+            <Button
               type="button"
+              variant="link"
+              size="inline"
               onClick={cancelArmedSend}
-              className="underline hover:opacity-80"
+              /* eslint-disable-next-line shadcn/no-restyle --
+                 The queued-send Cancel sits inline in the composer's 12px status line; link inline keeps the base text-sm, so it takes the line's size. */
+              className="text-xs"
             >
               {t('conversation.attachments.cancelQueuedSend')}
-            </button>
+            </Button>
           </div>
         )}
         {sendArmed && sendReadiness.state === 'blocked' && (
           <div
-            className="px-2 pb-1 text-xs text-[#B42318] sm:px-3"
+            className="text-destructive px-2 pb-1 text-xs sm:px-3"
             role="alert"
           >
             {t('conversation.attachments.sendBlockedByFailed', {
@@ -1721,7 +1733,7 @@ export default function MessageInput({
           </div>
         )}
         {voiceError && (
-          <div className="px-2 pb-1 text-xs text-[#B42318] sm:px-3">
+          <div className="text-destructive px-2 pb-1 text-xs sm:px-3">
             {voiceError}
           </div>
         )}
@@ -1742,7 +1754,7 @@ export default function MessageInput({
             }
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className="inputbox-style dark:text-foreground dark:placeholder:text-muted-foreground/50 w-full scrollbar-thin overflow-x-hidden overflow-y-auto rounded-t-3xl bg-transparent px-2 text-base leading-tight whitespace-pre-wrap opacity-100 placeholder:text-gray-500 focus:outline-hidden sm:px-3"
+            className="text-foreground placeholder:text-muted-foreground w-full resize-none overflow-x-hidden overflow-y-auto rounded-t-3xl bg-transparent px-2 text-base leading-tight whitespace-pre-wrap opacity-100 focus:outline-hidden sm:px-3"
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             aria-label={t('inputPlaceholder')}
@@ -1787,37 +1799,40 @@ export default function MessageInput({
           </div>
 
           {loading ? (
-            <Button
-              type="button"
+            <IconButton
+              label={t('cancel')}
               variant="default"
               size="icon"
+              shape="pill"
               onClick={handleCancel}
-              aria-label={t('cancel')}
-              className="bg-primary ml-auto h-7 w-7 shrink-0 rounded-full text-white sm:h-9 sm:w-9"
+              className="ml-auto size-7 shrink-0 sm:size-9"
               disabled={!loading}
             >
-              <div className="flex h-3 w-3 items-center justify-center rounded-sm bg-white sm:h-3.5 sm:w-3.5" />
-            </Button>
+              <div className="flex size-3 items-center justify-center rounded-sm bg-white sm:size-3.5" />
+            </IconButton>
           ) : (
-            <Button
-              type="button"
+            <IconButton
+              label={t('conversation.send')}
               variant="default"
               size="icon"
+              shape="pill"
               onClick={handleSubmit}
-              aria-label={t('send')}
-              className={`ml-auto h-7 w-7 shrink-0 rounded-full transition-colors duration-300 ease-in-out sm:h-9 sm:w-9 ${
-                canSubmit
-                  ? 'bg-primary text-white'
-                  : 'bg-muted text-muted-foreground dark:bg-accent dark:text-muted-foreground'
-              }`}
+              className={cn(
+                'ml-auto size-7 shrink-0 sm:size-9',
+                !canSubmit &&
+                  /* eslint-disable-next-line shadcn/no-restyle --
+                     The empty composer's send button is a grey circle, not a
+                     faded brand one: no variant is neutral while disabled, and
+                     secondary is the brand-tinted pressed state. */
+                  'bg-muted text-muted-foreground dark:bg-accent',
+              )}
               disabled={!canSubmit}
             >
               <SendArrow
-                className="mx-auto my-auto block h-3.5 w-3.5 sm:h-4 sm:w-4"
-                aria-label={t('send')}
-                role="img"
+                className="mx-auto my-auto block size-3.5 sm:size-4"
+                aria-hidden="true"
               />
-            </Button>
+            </IconButton>
           )}
         </div>
       </div>
@@ -1834,12 +1849,12 @@ export default function MessageInput({
 
       {handleDragActive &&
         createPortal(
-          <div className="dark:bg-background/85 pointer-events-none fixed top-0 left-0 z-50 flex size-full flex-col items-center justify-center bg-white/85">
-            <img className="filter dark:invert" src={DragFileUpload} />
-            <span className="text-muted-foreground dark:text-muted-foreground px-2 text-2xl font-bold">
+          <div className="bg-background/85 pointer-events-none fixed top-0 left-0 z-50 flex size-full flex-col items-center justify-center">
+            <CloudUpload className="size-18" />
+            <span className="text-muted-foreground px-2 text-2xl font-bold">
               {t('modals.uploadDoc.drag.title')}
             </span>
-            <span className="text-s text-muted-foreground dark:text-muted-foreground w-48 p-2 text-center">
+            <span className="text-muted-foreground w-48 p-2 text-center text-sm">
               {t('modals.uploadDoc.drag.description')}
             </span>
           </div>,
diff --git a/frontend/src/components/MultiSelectPopover.test.tsx b/frontend/src/components/MultiSelectPopover.test.tsx
new file mode 100644
index 00000000..c3089f56
--- /dev/null
+++ b/frontend/src/components/MultiSelectPopover.test.tsx
@@ -0,0 +1,93 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+const media = { isMobile: false, isDesktop: true };
+vi.mock('../hooks', () => ({
+  useMediaQuery: () => media,
+  useDarkTheme: () => [false, () => undefined],
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+  }),
+}));
+
+import { MultiSelectPopover } from './MultiSelectPopover';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const items = [
+  { id: 'a', label: 'Alpha' },
+  { id: 'b', label: 'Beta' },
+];
+
+describe('MultiSelectPopover', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    media.isMobile = false;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const render = () =>
+    act(() => {
+      root.render(
+        <MultiSelectPopover
+          open
+          trigger={<button type="button">Open</button>}
+          items={items}
+          selectedIds={['b']}
+          onToggle={() => undefined}
+          className="max-h-40"
+        />,
+      );
+    });
+
+  it('puts className on the desktop popover', () => {
+    render();
+    const content = document.querySelector('[data-slot="popover-content"]');
+    expect(content?.className).toContain('max-h-40');
+  });
+
+  it('puts className on the mobile sheet', () => {
+    media.isMobile = true;
+    render();
+    const content = document.querySelector('[data-slot="sheet-content"]');
+    expect(content?.className).toContain('max-h-40');
+  });
+
+  it('uses the shared bottom-sheet shape and handle on phones', () => {
+    media.isMobile = true;
+    render();
+    const content = document.querySelector('[data-slot="sheet-content"]')!;
+    expect(content.querySelectorAll('[data-slot="sheet-handle"]')).toHaveLength(
+      1,
+    );
+    expect(content.className).toContain('rounded-t-2xl');
+    expect(content.className).not.toContain('env(');
+    expect(content.className).not.toContain('dark:bg-card');
+  });
+
+  it('marks chosen rows with CommandItem checked and a primary tick', () => {
+    render();
+    const rows = document.querySelectorAll('[data-slot="command-item"]');
+    expect(rows).toHaveLength(2);
+    expect(rows[0].hasAttribute('data-checked')).toBe(false);
+    expect(rows[1].getAttribute('data-checked')).toBe('true');
+    rows.forEach((row) => expect(row.querySelector('img')).toBeNull());
+    const tick = rows[1].querySelector('svg');
+    expect(tick).not.toBeNull();
+    expect(tick?.getAttribute('class')).toContain('text-primary');
+    expect(rows[0].querySelector('svg')).toBeNull();
+  });
+});
diff --git a/frontend/src/components/MultiSelectPopover.tsx b/frontend/src/components/MultiSelectPopover.tsx
index fc711c50..9fdffcff 100644
--- a/frontend/src/components/MultiSelectPopover.tsx
+++ b/frontend/src/components/MultiSelectPopover.tsx
@@ -1,12 +1,11 @@
+import { Check } from 'lucide-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import CheckmarkIcon from '../assets/checkmark.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import { useDarkTheme, useMediaQuery } from '../hooks';
+import { useMediaQuery } from '../hooks';
 import { cn } from '@/lib/utils';
-import Spinner from './Spinner';
+import { EmptyState } from '@/components/ui/empty-state';
+import { LoadingState } from '@/components/ui/loading-state';
 import {
   Command,
   CommandEmpty,
@@ -16,6 +15,7 @@ import {
   CommandList,
 } from './ui/command';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { SectionHeader } from './ui/section-header';
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from './ui/sheet';
 
 export type MultiSelectPopoverItem = {
@@ -42,7 +42,8 @@ export type MultiSelectPopoverProps = {
   footer?: React.ReactNode;
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
-  contentClassName?: string;
+  /** Extra layout classes for the popup (the desktop popover or the mobile sheet). */
+  className?: string;
   emptyMessage?: string;
   selectedFirst?: boolean;
   title?: string;
@@ -52,16 +53,11 @@ function renderIcon(icon: MultiSelectPopoverItem['icon']) {
   if (!icon) return null;
   if (typeof icon === 'string') {
     return (
-      <img
-        src={icon}
-        alt=""
-        aria-hidden="true"
-        className="mr-3 h-5 w-5 shrink-0"
-      />
+      <img src={icon} alt="" aria-hidden="true" className="size-5 shrink-0" />
     );
   }
   return (
-    <span className="mr-3 flex h-5 w-5 shrink-0 items-center justify-center">
+    <span className="flex size-5 shrink-0 items-center justify-center">
       {icon}
     </span>
   );
@@ -80,13 +76,12 @@ export function MultiSelectPopover({
   footer,
   align = 'start',
   side = 'bottom',
-  contentClassName,
+  className,
   emptyMessage,
   selectedFirst = false,
   title,
 }: MultiSelectPopoverProps) {
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
   const { isMobile } = useMediaQuery();
   const selectedSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
 
@@ -128,14 +123,15 @@ export function MultiSelectPopover({
         onSelect={() => {
           if (!item.disabled) onToggle(item.id);
         }}
-        className="dark:border-border data-[selected=true]:bg-accent flex cursor-pointer items-center justify-between gap-2 rounded-none border-b border-[#D9D9D9] px-3 py-3 last:border-b-0"
+        checked={isSelected}
+        className="cursor-pointer justify-between"
         aria-selected={isSelected}
       >
-        <div className="mr-3 flex grow items-center overflow-hidden">
+        <div className="mr-3 flex grow items-center gap-3 overflow-hidden">
           {renderIcon(item.icon)}
           <div className="overflow-hidden">
             <p
-              className="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
+              className="text-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
               title={item.label}
             >
               {item.label}
@@ -150,17 +146,11 @@ export function MultiSelectPopover({
           </div>
         </div>
         <div
-          className="border-border bg-card flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border-2 p-[0.5px]"
+          className="border-border bg-card flex size-4 shrink-0 items-center justify-center rounded-xs border-2"
           aria-hidden="true"
         >
           {isSelected && (
-            <img
-              src={CheckmarkIcon}
-              alt=""
-              width={10}
-              height={10}
-              aria-hidden="true"
-            />
+            <Check className="text-primary size-2.5" aria-hidden="true" />
           )}
         </div>
       </CommandItem>
@@ -168,26 +158,19 @@ export function MultiSelectPopover({
   };
 
   const renderEmptyState = () => (
-    <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-      <img
-        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-        alt=""
-        aria-hidden="true"
-        className="mb-3 h-16 w-16"
-      />
-      <p className="text-sm text-gray-500 dark:text-gray-400">
-        {emptyMessage || t('settings.tools.noToolsFound', 'No results found')}
-      </p>
-    </div>
+    <EmptyState
+      size="xs"
+      title={
+        emptyMessage || t('settings.tools.noToolsFound', 'No results found')
+      }
+    />
   );
 
   const commandBody = (
-    <Command shouldFilter={searchable} className="bg-transparent">
+    <Command shouldFilter={searchable}>
       {title && (
         <div className="shrink-0 px-4 pt-4">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-white">
-            {title}
-          </h3>
+          <SectionHeader as="h3" size="xs" title={title} />
         </div>
       )}
       {searchable && (
@@ -197,11 +180,9 @@ export function MultiSelectPopover({
       )}
 
       {loading ? (
-        <div className="text-foreground flex items-center justify-center py-8 dark:text-white">
-          <Spinner size="small" />
-        </div>
+        <LoadingState fill="block" size="sm" />
       ) : (
-        <div className="dark:border-border mx-4 my-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-[#D9D9D9]">
+        <div className="border-border mx-4 my-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border">
           <CommandList className="max-h-none min-h-0 flex-1 overflow-y-auto">
             <CommandEmpty>{renderEmptyState()}</CommandEmpty>
             {hasGroups ? (
@@ -212,23 +193,20 @@ export function MultiSelectPopover({
                   <CommandGroup
                     key={`group-${groupKey || 'ungrouped'}`}
                     heading={groupKey || undefined}
-                    className="[&_[cmdk-group-heading]]:bg-muted/50 [&_[cmdk-group-heading]]:dark:bg-card [&_[cmdk-group-heading]]:text-muted-foreground p-0 [&_[cmdk-group-heading]]:sticky [&_[cmdk-group-heading]]:top-0 [&_[cmdk-group-heading]]:z-10 [&_[cmdk-group-heading]]:border-b [&_[cmdk-group-heading]]:border-[#D9D9D9] [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:dark:border-[#2E2E2E]"
                   >
                     {groupItems.map(renderItem)}
                   </CommandGroup>
                 );
               })
             ) : (
-              <CommandGroup className="p-0">
-                {orderedItems.map(renderItem)}
-              </CommandGroup>
+              <CommandGroup>{orderedItems.map(renderItem)}</CommandGroup>
             )}
           </CommandList>
         </div>
       )}
 
       {footer && (
-        <div className="border-border dark:border-border shrink-0 border-t px-4 py-4">
+        <div className="border-border shrink-0 border-t px-4 py-4">
           {footer}
         </div>
       )}
@@ -241,20 +219,14 @@ export function MultiSelectPopover({
         <SheetTrigger asChild>{trigger}</SheetTrigger>
         <SheetContent
           side="bottom"
+          handle
           showCloseButton={false}
           onOpenAutoFocus={(e) => e.preventDefault()}
-          className={cn(
-            'border-border bg-background dark:border-border dark:bg-card flex max-h-[85vh] flex-col gap-0 overflow-hidden rounded-t-2xl p-0 pb-[env(safe-area-inset-bottom)]',
-            contentClassName,
-          )}
+          className={cn('overflow-hidden', className)}
         >
           <SheetTitle className="sr-only">
             {title || effectivePlaceholder}
           </SheetTitle>
-          <div
-            className="mx-auto mt-2 mb-1 h-1.5 w-12 shrink-0 rounded-full bg-gray-300 dark:bg-gray-600"
-            aria-hidden="true"
-          />
           {commandBody}
         </SheetContent>
       </Sheet>
@@ -268,8 +240,8 @@ export function MultiSelectPopover({
         align={align}
         side={side}
         className={cn(
-          'border-border bg-background dark:border-border dark:bg-card flex max-h-[min(600px,80vh)] w-[min(462px,calc(100vw-20px))] flex-col overflow-hidden rounded-lg p-0 shadow-md',
-          contentClassName,
+          'flex max-h-[min(600px,80vh)] w-[min(462px,calc(100vw-20px))] flex-col overflow-hidden p-0',
+          className,
         )}
       >
         {commandBody}
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index def9f580..20666fc0 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import close from '../assets/cross.svg';
-import { Button } from './ui/button';
+import { X } from 'lucide-react';
+import { IconButton } from './ui/icon-button';
 
 interface NotificationProps {
   notificationText: string;
@@ -25,114 +25,87 @@ export default function Notification({
 }: NotificationProps) {
   const { t } = useTranslation();
   return (
-    <>
-      <style>{`
-        @keyframes twinkle {
-          0%, 100% {
-            opacity: 0.3;
-            transform: scale(1) translateY(0);
-          }
-          50% {
-            opacity: 1;
-            transform: scale(1.2) translateY(-2px);
-          }
-        }
-
-        .star {
-          animation: twinkle var(--duration) ease-in-out infinite;
-          animation-delay: var(--delay);
-        }
-      `}</style>
-      <a
-        className="group absolute right-2 bottom-24 z-20 flex w-3/4 items-center justify-center gap-2 overflow-hidden rounded-lg px-2 py-4 sm:right-4 sm:bottom-6 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
-        style={{
-          background:
-            'linear-gradient(90deg, #390086 0%, #6222B7 100%), linear-gradient(90deg, rgba(57, 0, 134, 0) 0%, #6222B7 53.02%, rgba(57, 0, 134, 0) 100%)',
-        }}
-        href={notificationLink}
-        target="_blank"
-        aria-label={t('notification.ariaLabel')}
-        rel="noreferrer"
-      >
-        {/* Animated stars background */}
-        <div className="pointer-events-none absolute inset-0">
-          {stars.map((star) => (
-            <svg
-              key={star.id}
-              className="star absolute"
-              style={
-                {
-                  width: `${star.size * 4}px`,
-                  height: `${star.size * 4}px`,
-                  left: `${star.left}%`,
-                  top: `${star.top}%`,
-                  opacity: star.opacity,
-                  filter: `drop-shadow(0 0 ${star.size}px rgba(255, 255, 255, 0.5))`,
-                  '--duration': `${star.animationDuration}s`,
-                  '--delay': `${star.animationDelay}s`,
-                } as React.CSSProperties & {
-                  '--duration': string;
-                  '--delay': string;
-                }
-              }
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              {/* 4-pointed Christmas star */}
-              <path
-                d="M12 0L13.5 10.5L24 12L13.5 13.5L12 24L10.5 13.5L0 12L10.5 10.5L12 0Z"
-                fill="white"
-              />
-            </svg>
-          ))}
-        </div>
-
-        <p className="relative z-10 text-xs leading-6 font-semibold text-white xl:text-sm xl:leading-7">
-          {notificationText}
-        </p>
-        <span className="relative z-10 flex items-center">
+    <a
+      className="notification-banner group absolute right-2 bottom-24 z-20 flex w-3/4 items-center justify-center gap-2 overflow-hidden rounded-lg px-2 py-4 sm:right-4 sm:bottom-6 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
+      href={notificationLink}
+      target="_blank"
+      aria-label={t('notification.ariaLabel')}
+      rel="noreferrer"
+    >
+      {/* Animated stars background. The banner is always the purple gradient,
+          so its imagery is white in both themes. */}
+      <div className="pointer-events-none absolute inset-0 text-white">
+        {stars.map((star) => (
           <svg
-            width="18"
-            height="13"
-            viewBox="0 0 18 13"
+            key={star.id}
+            className="notification-star absolute"
+            style={
+              {
+                '--star-size': `${star.size * 4}px`,
+                '--star-left': `${star.left}%`,
+                '--star-top': `${star.top}%`,
+                '--star-opacity': String(star.opacity),
+                '--star-glow': `${star.size}px`,
+                '--star-duration': `${star.animationDuration}s`,
+                '--star-delay': `${star.animationDelay}s`,
+              } as React.CSSProperties
+            }
+            viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className="overflow-visible"
           >
-            {/* Arrow tail - grows leftward from arrow head's back point on hover */}
-            <rect
-              x="4"
-              y="5.75"
-              width="8"
-              height="1.5"
-              fill="white"
-              className="scale-x-0 transition-transform duration-300 ease-out group-hover:scale-x-100"
-              style={{ transformOrigin: '12px 6.5px' }}
-            />
-            {/* Arrow head - pushed forward by the tail on hover */}
+            {/* 4-pointed Christmas star */}
             <path
-              d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033Z"
-              fill="white"
-              className="transition-transform duration-300 ease-out group-hover:translate-x-1"
+              d="M12 0L13.5 10.5L24 12L13.5 13.5L12 24L10.5 13.5L0 12L10.5 10.5L12 0Z"
+              fill="currentColor"
             />
           </svg>
-        </span>
+        ))}
+      </div>
 
-        <Button
-          type="button"
-          variant="ghost"
-          className="absolute top-2 right-2 z-30 h-4 w-4 rounded-none bg-transparent p-0 hover:bg-transparent hover:opacity-70"
-          aria-label={t('notification.closeAriaLabel')}
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            handleCloseNotification();
-          }}
+      <p className="relative z-10 text-xs leading-6 font-semibold text-white xl:text-sm xl:leading-7">
+        {notificationText}
+      </p>
+      <span className="relative z-10 flex items-center text-white">
+        <svg
+          width="18"
+          height="13"
+          viewBox="0 0 18 13"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="overflow-visible"
         >
-          <img className="w-full" src={close} alt="Close notification" />
-        </Button>
-      </a>
-    </>
+          {/* Arrow tail - grows leftward from arrow head's back point on hover */}
+          <rect
+            x="4"
+            y="5.75"
+            width="8"
+            height="1.5"
+            fill="currentColor"
+            className="origin-[12px_6.5px] scale-x-0 transition-transform duration-300 ease-out group-hover:scale-x-100"
+          />
+          {/* Arrow head - pushed forward by the tail on hover */}
+          <path
+            d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033Z"
+            fill="currentColor"
+            className="transition-transform duration-300 ease-out group-hover:translate-x-1"
+          />
+        </svg>
+      </span>
+
+      <IconButton
+        label={t('notification.closeAriaLabel')}
+        icon={X}
+        variant="ghost"
+        size="icon-xs"
+        /* eslint-disable-next-line shadcn/no-restyle -- the close X on the promo gradient: any fill would be a grey square on the purple, so hover dims it instead; primary-foreground keeps it white because the button inherits the page colour */
+        className="text-primary-foreground absolute top-1 right-1 z-20 hover:bg-transparent hover:opacity-70"
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleCloseNotification();
+        }}
+      />
+    </a>
   );
 }
diff --git a/frontend/src/components/PageToolbar.test.tsx b/frontend/src/components/PageToolbar.test.tsx
new file mode 100644
index 00000000..44c95675
--- /dev/null
+++ b/frontend/src/components/PageToolbar.test.tsx
@@ -0,0 +1,46 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import PageToolbar from './PageToolbar';
+
+describe('PageToolbar', () => {
+  it('stacks intro, the search/action row and an opt-in rule', () => {
+    const html = renderToStaticMarkup(
+      <PageToolbar
+        intro="Manage tools"
+        search={<input />}
+        action={<button type="button">Add Tool</button>}
+        divider
+      />,
+    );
+    expect(html).toContain('text-muted-foreground mb-5 text-sm leading-6');
+    expect(html).toContain(
+      'mb-6 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between',
+    );
+    expect(html).toContain('w-full max-w-md');
+    expect(html).toContain('data-slot="separator"');
+    expect(html).toContain('mb-8');
+  });
+
+  it('puts the intro in the left slot when there is no search', () => {
+    const html = renderToStaticMarkup(
+      <PageToolbar
+        intro="Tokens"
+        action={<button type="button">Create</button>}
+      />,
+    );
+    expect(html).toContain('max-w-2xl');
+    expect(html).not.toContain('data-slot="separator"');
+  });
+
+  it('renders notices between the row and the rule', () => {
+    const html = renderToStaticMarkup(
+      <PageToolbar intro="x" action={<span />} divider>
+        <p>limit reached</p>
+      </PageToolbar>,
+    );
+    expect(html.indexOf('limit reached')).toBeLessThan(
+      html.indexOf('data-slot="separator"'),
+    );
+  });
+});
diff --git a/frontend/src/components/PageToolbar.tsx b/frontend/src/components/PageToolbar.tsx
new file mode 100644
index 00000000..cba98bc9
--- /dev/null
+++ b/frontend/src/components/PageToolbar.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+import { Separator } from './ui/separator';
+
+/**
+ * The block under a section page's title: an intro line, then a row with the
+ * page search on the left and the page action (an Add pill) on the right,
+ * optionally closed by a rule. Notices that belong to the action (a limit
+ * warning) go in `children`, under the row.
+ */
+export default function PageToolbar({
+  intro,
+  search,
+  action,
+  divider = false,
+  children,
+}: {
+  intro?: ReactNode;
+  search?: ReactNode;
+  action?: ReactNode;
+  divider?: boolean;
+  children?: ReactNode;
+}) {
+  // With no search, the intro takes the row's left slot beside the action.
+  const introInRow = !search && intro;
+
+  return (
+    <div data-slot="page-toolbar">
+      {intro && !introInRow ? (
+        <p className="text-muted-foreground mb-5 text-sm leading-6">{intro}</p>
+      ) : null}
+      <div className="mb-6 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
+        {introInRow ? (
+          <p className="text-muted-foreground max-w-2xl text-sm leading-6">
+            {intro}
+          </p>
+        ) : search ? (
+          <div className="w-full max-w-md">{search}</div>
+        ) : null}
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </div>
+      {children}
+      {divider ? <Separator className="mb-8" /> : null}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ProfileButton.tsx b/frontend/src/components/ProfileButton.tsx
index 790d9a07..401b6645 100644
--- a/frontend/src/components/ProfileButton.tsx
+++ b/frontend/src/components/ProfileButton.tsx
@@ -3,7 +3,9 @@ import { useTranslation } from 'react-i18next';
 
 import useTokenAuth from '../hooks/useTokenAuth';
 import { Avatar } from './ui/avatar';
+import { Button } from './ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { Separator } from './ui/separator';
 
 /**
  * Top-right account menu for OIDC sessions: an avatar that opens a popover
@@ -17,41 +19,45 @@ export default function ProfileButton() {
   if (authType !== 'oidc' || (!userName && !userEmail)) return null;
 
   const initial = (userName || userEmail || '?').charAt(0).toUpperCase();
-  const renderAvatar = (size: string, text: string) =>
+  // `sm` is size-8/text-sm, `lg` is size-10/text-base; the size variant
+  // also brings the flex centring and the overflow-hidden that clips both the
+  // photo and the initials to the circle.
+  const renderAvatar = (size: 'sm' | 'lg') =>
     userPicture ? (
       <Avatar
+        size={size}
+        shape="circle"
         src={userPicture}
-        alt={userName || userEmail || 'User avatar'}
-        className={size}
-        imgClassName={`${size} rounded-full object-cover`}
+        alt={userName || userEmail || t('components.profile.avatarAlt')}
+        imgClassName="size-full object-cover"
       />
     ) : (
-      <Avatar className={size}>
-        <span
-          className={`bg-primary text-primary-foreground flex ${size} items-center justify-center rounded-full ${text} font-medium`}
-        >
-          {initial}
-        </span>
+      <Avatar size={size} shape="circle" variant="primary">
+        {initial}
       </Avatar>
     );
 
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <button
+        {/* inline + pill: the avatar sets the size and the Button brings
+            only the round focus ring; ghost's hover fill sits under it. */}
+        <Button
           type="button"
+          variant="ghost"
+          size="inline"
+          shape="pill"
           aria-label={t('auth.account')}
-          className="ring-offset-background focus-visible:ring-ring hover:ring-primary/40 rounded-full transition outline-none hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2"
         >
-          {renderAvatar('size-8', 'text-sm')}
-        </button>
+          {renderAvatar('sm')}
+        </Button>
       </PopoverTrigger>
       <PopoverContent align="end" sideOffset={8} className="w-64 p-0">
         <div className="flex items-center gap-3 p-4">
-          {renderAvatar('size-10', 'text-base')}
+          {renderAvatar('lg')}
           <span className="flex min-w-0 flex-col">
             {userName && (
-              <p className="text-foreground truncate text-sm font-medium dark:text-white">
+              <p className="text-foreground truncate text-sm font-medium">
                 {userName}
               </p>
             )}
@@ -62,20 +68,18 @@ export default function ProfileButton() {
             )}
           </span>
         </div>
-        <div className="dark:border-sidebar-border border-t" />
+        <Separator />
         <div className="p-1">
-          <button
+          <Button
             type="button"
+            variant="ghost"
             onClick={logout}
             data-testid="oidc-signout"
-            className="text-foreground hover:bg-sidebar-accent flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm dark:text-white"
+            className="w-full justify-start"
           >
-            <LogOut
-              className="text-muted-foreground size-4 shrink-0"
-              strokeWidth={1.75}
-            />
+            <LogOut className="text-muted-foreground" aria-hidden />
             {t('auth.signOut')}
-          </button>
+          </Button>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/frontend/src/components/SearchInput.test.tsx b/frontend/src/components/SearchInput.test.tsx
new file mode 100644
index 00000000..af7608cd
--- /dev/null
+++ b/frontend/src/components/SearchInput.test.tsx
@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import SearchInput from './SearchInput';
+
+describe('SearchInput', () => {
+  it('is a 38px pill with a search icon and a floating label', () => {
+    const html = renderToStaticMarkup(<SearchInput label="Search tools..." />);
+    expect(html).toContain('rounded-full');
+    expect(html).toContain('h-9.5');
+    expect(html).toContain('pl-10');
+    expect(html).toContain('<label');
+    expect(html).toContain('bg-background');
+    expect(html).toContain('lucide-search');
+  });
+
+  it('takes a placeholder with an accessible name instead of a label', () => {
+    const html = renderToStaticMarkup(
+      <SearchInput placeholder="Search logs..." />,
+    );
+    expect(html).not.toContain('<label');
+    expect(html).toContain('aria-label="Search logs..."');
+  });
+});
diff --git a/frontend/src/components/SearchInput.tsx b/frontend/src/components/SearchInput.tsx
new file mode 100644
index 00000000..44416df3
--- /dev/null
+++ b/frontend/src/components/SearchInput.tsx
@@ -0,0 +1,35 @@
+import { Search } from 'lucide-react';
+
+import { Input, type InputProps } from './ui/input';
+
+type SearchInputProps = Omit<InputProps, 'shape' | 'leftIcon' | 'size'> & {
+  size?: 'field' | 'sm';
+};
+
+/**
+ * The search field above a list or grid: a 38px pill with a search icon.
+ * Give it a `label` (the floating label, the default for page searches) or a
+ * `placeholder`; a placeholder-only field is named by its placeholder.
+ */
+export default function SearchInput({
+  size = 'field',
+  labelSurface = 'background',
+  type = 'text',
+  label,
+  placeholder,
+  ...props
+}: SearchInputProps) {
+  return (
+    <Input
+      type={type}
+      size={size}
+      shape="pill"
+      label={label}
+      placeholder={placeholder}
+      aria-label={label ? undefined : (props['aria-label'] ?? placeholder)}
+      labelSurface={labelSurface}
+      leftIcon={<Search className="text-muted-foreground size-4" aria-hidden />}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index eea39673..6f3b6e7f 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -1,6 +1,11 @@
-import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useMediaQuery } from '@/hooks';
+import { cn } from '@/lib/utils';
+
 interface SkeletonLoaderProps {
   count?: number;
   component?:
@@ -24,44 +29,25 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   component = 'default',
 }) => {
   const { t } = useTranslation();
-  const [skeletonCount, setSkeletonCount] = useState(count);
-
-  useEffect(() => {
-    const handleResize = () => {
-      const windowWidth = window.innerWidth;
-
-      if (windowWidth > 1024) {
-        setSkeletonCount(1);
-      } else if (windowWidth > 768) {
-        setSkeletonCount(count);
-      } else {
-        setSkeletonCount(Math.min(count, 2));
-      }
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [count]);
+  const { isDesktop } = useMediaQuery();
+  // One placeholder beside the desktop shell, at most two below it.
+  const skeletonCount = isDesktop ? 1 : Math.min(count, 2);
 
   const renderTable = () => (
     <>
       {[...Array(4)].map((_, idx) => (
-        <tr key={idx} className="animate-pulse">
+        <tr key={idx}>
           <td className="w-[40%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full" />
           </td>
           <td className="w-[30%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full" />
           </td>
           <td className="w-[20%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full" />
           </td>
           <td className="w-[10%] px-4 py-4">
-            <div className="bg-muted h-4 w-full rounded-sm"></div>
+            <Skeleton className="h-4 w-full" />
           </td>
         </tr>
       ))}
@@ -71,18 +57,18 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderChatbot = () => (
     <>
       {[...Array(4)].map((_, idx) => (
-        <tr key={idx} className="animate-pulse">
+        <tr key={idx}>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-3/4 rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-3/4" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-full" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-full rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-full" />
           </td>
           <td className="p-2">
-            <div className="bg-muted mx-auto h-4 w-8 rounded-sm"></div>
+            <Skeleton className="mx-auto h-4 w-8" />
           </td>
         </tr>
       ))}
@@ -94,24 +80,21 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       <div className="bg-muted mb-2 h-4 w-24 rounded-sm"></div>
       <div className="bg-muted flex h-14 w-[360px] items-center justify-between rounded-3xl px-4">
         <div className="bg-muted-foreground/20 h-3 w-24 rounded-sm"></div>
-        <div className="bg-muted-foreground/20 h-3 w-3 rounded-sm"></div>
+        <div className="bg-muted-foreground/20 size-3 rounded-sm"></div>
       </div>
     </div>
   );
 
   const renderLogs = () => (
-    <div className="w-full animate-pulse space-y-px">
+    <div className="flex w-full flex-col gap-px">
       {[...Array(8)].map((_, idx) => (
-        <div
-          key={idx}
-          className="dark:hover:bg-accent hover:bg-muted flex w-full items-start p-2"
-        >
+        <div key={idx} className="hover:bg-accent flex w-full items-start p-2">
           <div className="flex w-full items-center gap-2">
-            <div className="bg-muted h-3 w-3 rounded-lg"></div>
+            <Skeleton className="size-3" />
             <div className="flex w-full flex-row items-center gap-2">
-              <div className="bg-muted h-3 w-[30%] rounded-lg lg:w-52"></div>
-              <div className="bg-muted h-3 w-[16%] rounded-lg lg:w-28"></div>
-              <div className="bg-muted h-3 w-[40%] rounded-lg lg:w-64"></div>
+              <Skeleton className="h-3 w-[30%] lg:w-52" />
+              <Skeleton className="h-3 w-[16%] lg:w-28" />
+              <Skeleton className="h-3 w-[40%] lg:w-64" />
             </div>
           </div>
         </div>
@@ -124,34 +107,37 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(skeletonCount)].map((_, idx) => (
         <div
           key={idx}
-          className={`p-6 ${
-            skeletonCount === 1 ? 'w-full' : 'w-60'
-          } animate-pulse rounded-3xl`}
+          className={cn(
+            'rounded-3xl p-6',
+            skeletonCount === 1 ? 'w-full' : 'w-60',
+          )}
         >
-          <div className="space-y-4">
-            <div>
-              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/2 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-5/6" />
+              <Skeleton className="h-4 w-1/2" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-full" />
             </div>
-            <div className="border-border my-4 border-t"></div>
-            <div>
-              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/4 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+            <Separator />
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="h-4 w-1/4" />
+              <Skeleton className="h-4 w-full" />
             </div>
-            <div className="border-border my-4 border-t"></div>
-            <div>
-              <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-1/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-2/3 rounded-sm"></div>
-              <div className="bg-muted mb-2 h-4 w-full rounded-sm"></div>
+            <Separator />
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-5/6" />
+              <Skeleton className="h-4 w-1/3" />
+              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+            <Separator />
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-5/6" />
             </div>
-            <div className="border-border my-4 border-t"></div>
-            <div className="bg-muted mb-2 h-4 w-3/4 rounded-sm"></div>
-            <div className="bg-muted mb-2 h-4 w-5/6 rounded-sm"></div>
           </div>
         </div>
       ))}
@@ -162,9 +148,9 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     <>
       {[...Array(skeletonCount)].map((_, idx) => (
         <div key={idx} className="bg-card w-full animate-pulse rounded-3xl p-6">
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <div className="bg-muted mb-4 h-4 w-1/3 rounded-sm"></div>
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
+              <div className="bg-muted h-4 w-1/3 rounded-sm"></div>
               <div className="grid grid-cols-6 items-end gap-2">
                 <div className="bg-muted h-32 rounded-sm"></div>
                 <div className="bg-muted h-24 rounded-sm"></div>
@@ -174,8 +160,8 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
                 <div className="bg-muted h-20 rounded-sm"></div>
               </div>
             </div>
-            <div className="space-y-2">
-              <div className="bg-muted mb-4 h-4 w-1/4 rounded-sm"></div>
+            <div className="flex flex-col gap-4">
+              <div className="bg-muted h-4 w-1/4 rounded-sm"></div>
               <div className="bg-muted h-32 rounded-sm"></div>
             </div>
             <div className="grid grid-cols-2 gap-4">
@@ -193,13 +179,13 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {Array.from({ length: count }).map((_, index) => (
         <div
           key={`chunk-skel-${index}`}
-          className="border-border dark:border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-md border"
+          className="border-border relative flex h-[197px] w-full max-w-[487px] animate-pulse flex-col overflow-hidden rounded-2xl border"
         >
           <div className="w-full">
-            <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
+            <div className="border-border bg-muted flex w-full items-center justify-between border-b px-4 py-3">
               <div className="bg-muted-foreground/20 h-4 w-20 rounded"></div>
             </div>
-            <div className="space-y-3 px-4 pt-4 pb-6">
+            <div className="flex flex-col gap-3 px-4 pt-4 pb-6">
               <div className="bg-muted h-3 w-full rounded"></div>
               <div className="bg-muted h-3 w-11/12 rounded"></div>
               <div className="bg-muted h-3 w-5/6 rounded"></div>
@@ -216,30 +202,31 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderSourceCards = () => (
     <>
       {Array.from({ length: count }).map((_, idx) => (
-        <div
+        <Card
           key={`source-skel-${idx}`}
-          className="bg-muted dark:bg-accent flex h-[130px] w-full animate-pulse flex-col rounded-2xl p-3"
+          variant="filled"
+          padding="lg"
+          className="min-h-[130px]"
         >
           <div className="w-full flex-1">
             <div className="flex w-full items-center justify-between gap-2">
-              <div className="flex-1">
-                <div className="bg-muted-foreground/20 h-[13px] w-full rounded"></div>
+              <Skeleton surface="muted" className="h-4 min-w-0 flex-1" />
+              <Skeleton surface="muted" className="size-7 shrink-0" />
+            </div>
+          </div>
+          <div className="flex flex-col items-start justify-start gap-1">
+            <div className="mt-auto flex flex-col items-start gap-1">
+              <div className="flex items-center gap-2">
+                <Skeleton surface="muted" className="size-3.5" />
+                <Skeleton surface="muted" className="h-3 w-20" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Skeleton surface="muted" className="size-3.5" />
+                <Skeleton surface="muted" className="h-3 w-16" />
               </div>
-              <div className="bg-muted-foreground/20 h-6 w-6 rounded"></div>
             </div>
           </div>
-
-          <div className="flex flex-col items-start justify-start gap-1 pt-3">
-            <div className="mb-1 flex items-center gap-2">
-              <div className="bg-muted-foreground/20 h-3 w-3 rounded"></div>
-              <div className="bg-muted-foreground/20 h-[12px] w-20 rounded"></div>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="bg-muted-foreground/20 h-3 w-3 rounded"></div>
-              <div className="bg-muted-foreground/20 h-[12px] w-16 rounded"></div>
-            </div>
-          </div>
-        </div>
+        </Card>
       ))}
     </>
   );
@@ -247,22 +234,26 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderAddToolCards = () => (
     <>
       {Array.from({ length: count }).map((_, idx) => (
-        <div
+        <Card
           key={`add-tool-skel-${idx}`}
-          className="border-border flex h-52 w-full animate-pulse flex-col justify-between rounded-2xl border p-6"
+          variant="outline"
+          padding="lg"
+          className="h-52 w-full justify-between"
         >
           <div className="w-full">
             <div className="flex w-full items-center justify-between px-1">
-              <div className="bg-muted h-6 w-6 rounded"></div>
+              <Skeleton className="size-6" />
             </div>
-            <div className="mt-[9px] space-y-2 px-1">
-              <div className="bg-muted h-4 w-2/3 rounded"></div>
-              <div className="bg-muted h-3 w-full rounded"></div>
-              <div className="bg-muted h-3 w-5/6 rounded"></div>
-              <div className="bg-muted h-3 w-3/4 rounded"></div>
+            <div className="mt-[9px] flex flex-col gap-2 px-1">
+              <Skeleton className="h-4 w-2/3" />
+              <div className="mt-1 flex flex-col gap-2">
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-5/6" />
+                <Skeleton className="h-3 w-3/4" />
+              </div>
             </div>
           </div>
-        </div>
+        </Card>
       ))}
     </>
   );
@@ -270,19 +261,26 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderAgentCards = () => (
     <>
       {Array.from({ length: count }).map((_, idx) => (
-        <div
+        <Card
           key={`agent-skel-${idx}`}
-          className="bg-muted flex h-44 animate-pulse flex-col rounded-2xl px-4 py-5 sm:w-48 sm:px-6"
+          variant="filled"
+          padding="lg"
+          className="relative h-44 justify-between"
         >
-          <div className="px-1">
-            <div className="bg-muted-foreground/20 h-7 w-7 rounded-full"></div>
+          <div className="w-full">
+            <div className="flex w-full items-center gap-1 px-1">
+              <Skeleton surface="muted" className="size-7 rounded-full" />
+            </div>
+            <div className="mt-2 flex flex-col gap-2 px-1">
+              <Skeleton surface="muted" className="h-4 w-2/3" />
+              <div className="mt-1 flex flex-col gap-2">
+                <Skeleton surface="muted" className="h-3 w-full" />
+                <Skeleton surface="muted" className="h-3 w-full" />
+                <Skeleton surface="muted" className="h-3 w-3/5" />
+              </div>
+            </div>
           </div>
-          <div className="mt-3 space-y-2 px-1">
-            <div className="bg-muted-foreground/20 h-4 w-2/3 rounded"></div>
-            <div className="bg-muted-foreground/20 h-3 w-full rounded"></div>
-            <div className="bg-muted-foreground/20 h-3 w-4/5 rounded"></div>
-          </div>
-        </div>
+        </Card>
       ))}
     </>
   );
@@ -290,25 +288,31 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   const renderToolCards = () => (
     <>
       {Array.from({ length: count }).map((_, idx) => (
-        <div
+        <Card
           key={`tool-skel-${idx}`}
-          className="bg-muted flex h-52 w-[300px] animate-pulse flex-col justify-between rounded-2xl p-6"
+          variant="filled"
+          padding="lg"
+          className="relative h-52 justify-between overflow-hidden"
         >
           <div className="w-full">
-            <div className="flex items-center gap-2 px-1">
-              <div className="bg-muted-foreground/20 h-6 w-6 rounded"></div>
+            <div className="flex w-full items-center gap-2 px-1">
+              <Skeleton surface="muted" className="size-6" />
             </div>
-            <div className="mt-[9px] space-y-2 px-1">
-              <div className="bg-muted-foreground/20 h-4 w-2/3 rounded"></div>
-              <div className="bg-muted-foreground/20 h-3 w-full rounded"></div>
-              <div className="bg-muted-foreground/20 h-3 w-5/6 rounded"></div>
-              <div className="bg-muted-foreground/20 h-3 w-3/4 rounded"></div>
+            <div className="mt-[9px] flex flex-col gap-2 px-1">
+              <Skeleton surface="muted" className="h-4 w-2/3" />
+              <div className="mt-1 flex flex-col gap-2">
+                <Skeleton surface="muted" className="h-3 w-full" />
+                <Skeleton surface="muted" className="h-3 w-5/6" />
+                <Skeleton surface="muted" className="h-3 w-full" />
+                <Skeleton surface="muted" className="h-3 w-3/4" />
+              </div>
             </div>
           </div>
-          <div className="flex justify-end">
-            <div className="bg-muted-foreground/20 h-5 w-9 rounded-full"></div>
-          </div>
-        </div>
+          <Skeleton
+            surface="muted"
+            className="absolute right-4 bottom-4 h-6 w-11 rounded-full"
+          />
+        </Card>
       ))}
     </>
   );
@@ -317,7 +321,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     <div className="mb-4">
       <div className="bg-muted flex w-full animate-pulse items-center justify-between rounded-lg px-4 py-2">
         <div className="flex items-center gap-2">
-          <div className="bg-muted-foreground/20 h-4 w-4 rounded"></div>
+          <div className="bg-muted-foreground/20 size-4 rounded"></div>
           <div className="bg-muted-foreground/20 h-4 w-32 rounded"></div>
         </div>
         <div className="bg-muted-foreground/20 h-4 w-16 rounded"></div>
@@ -326,13 +330,13 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderFilesSection = () => (
-    <div className="border-border dark:border-border rounded-lg border">
+    <div className="border-border rounded-lg border">
       <div className="p-4">
         <div className="mb-4 flex items-center justify-between">
-          <div className="bg-muted h-5 w-24 animate-pulse rounded"></div>
-          <div className="bg-muted h-8 w-24 animate-pulse rounded"></div>
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-8 w-24" />
         </div>
-        <div className="bg-muted h-4 w-40 animate-pulse rounded"></div>
+        <Skeleton className="h-4 w-40" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/SourcesPopoverFooter.tsx b/frontend/src/components/SourcesPopoverFooter.tsx
index 056d47fc..906ac6b0 100644
--- a/frontend/src/components/SourcesPopoverFooter.tsx
+++ b/frontend/src/components/SourcesPopoverFooter.tsx
@@ -1,7 +1,7 @@
+import { ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import RedirectIcon from '../assets/redirect.svg';
 import { Button } from './ui/button';
 
 type SourcesPopoverFooterProps = {
@@ -25,13 +25,14 @@ export default function SourcesPopoverFooter({
         onClick={onNavigate}
       >
         {t('settings.sources.goToSources')}
-        <img src={RedirectIcon} alt="" aria-hidden="true" className="h-3 w-3" />
+        <ArrowRight className="size-3" />
       </Link>
       <Button
         type="button"
-        variant="outline"
+        variant="outline-primary"
+        shape="pill"
         onClick={onUploadClick}
-        className="border-primary text-primary hover:bg-primary/90 h-auto w-auto self-start rounded-full border bg-transparent px-4 py-2 text-sm font-medium shadow-none transition-colors duration-200 hover:text-white"
+        className="w-auto self-start"
       >
         {t('settings.sources.uploadNew')}
       </Button>
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
deleted file mode 100644
index dda8b8c3..00000000
--- a/frontend/src/components/Spinner.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-type SpinnerProps = {
-  size?: 'small' | 'medium' | 'large';
-};
-
-const SIZE_MAP: Record<NonNullable<SpinnerProps['size']>, string> = {
-  small: '20px',
-  medium: '30px',
-  large: '40px',
-};
-
-export default function Spinner({ size = 'medium' }: SpinnerProps) {
-  const spinnerSize = SIZE_MAP[size];
-
-  const spinnerStyle: React.CSSProperties = {
-    width: spinnerSize,
-    height: spinnerSize,
-    aspectRatio: '1',
-    borderRadius: '50%',
-    background: `
-      radial-gradient(farthest-side, currentColor 94%, transparent) top/8px 8px no-repeat,
-      conic-gradient(transparent 30%, currentColor)
-    `,
-    WebkitMask:
-      'radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0)',
-    mask: 'radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0)',
-    animation: 'spinner-rotate 1s infinite linear',
-    color: 'currentColor',
-  };
-
-  return <div className="loader" role="status" style={spinnerStyle} />;
-}
diff --git a/frontend/src/components/StatCard.test.tsx b/frontend/src/components/StatCard.test.tsx
new file mode 100644
index 00000000..afbeebff
--- /dev/null
+++ b/frontend/src/components/StatCard.test.tsx
@@ -0,0 +1,96 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import StatCard from './StatCard';
+
+describe('StatCard', () => {
+  it('renders a subtle, large-padded Card with label and value', () => {
+    const html = renderToStaticMarkup(<StatCard label="Users" value="42" />);
+    expect(html).toContain('data-slot="card"');
+    expect(html).toContain('data-variant="subtle"');
+    expect(html).toContain('data-padding="lg"');
+    expect(html).toContain('gap-1');
+    expect(html).not.toContain('gap-3');
+    expect(html).toContain('text-muted-foreground text-sm');
+    expect(html).toContain('>Users<');
+    expect(html).toContain('text-2xl font-bold tabular-nums');
+    expect(html).toContain('>42<');
+    expect(html).not.toMatch(/\bmt-1\b/);
+  });
+
+  it('renders the sub line only when given', () => {
+    expect(
+      renderToStaticMarkup(<StatCard label="A" value="1" />),
+    ).not.toContain('text-xs');
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" sub="last 30 days" />,
+    );
+    expect(html).toContain('text-muted-foreground text-xs');
+    expect(html).toContain('>last 30 days<');
+  });
+
+  it('turns a hint into a native tooltip with a help cursor', () => {
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" hint="How this is counted" />,
+    );
+    expect(html).toContain('title="How this is counted"');
+    expect(html).toContain('cursor-help');
+    expect(
+      renderToStaticMarkup(<StatCard label="A" value="1" />),
+    ).not.toContain('cursor-help');
+  });
+
+  it('passes layout classes and data attributes through', () => {
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" className="col-span-2" data-testid="t" />,
+    );
+    expect(html).toContain('col-span-2');
+    expect(html).toContain('data-testid="t"');
+  });
+
+  it('defaults to subtle and takes outline for tiles inside a modal', () => {
+    expect(renderToStaticMarkup(<StatCard label="A" value="1" />)).toContain(
+      'data-variant="subtle"',
+    );
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" variant="outline" />,
+    );
+    expect(html).toContain('data-variant="outline"');
+    expect(html).toContain('bg-card');
+    expect(html).not.toContain('bg-background');
+  });
+
+  it('passes a destructive tone to the Card', () => {
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" tone="destructive" />,
+    );
+    expect(html).toContain('data-tone="destructive"');
+    expect(html).toContain('bg-destructive/10');
+    expect(
+      renderToStaticMarkup(<StatCard label="A" value="1" />),
+    ).not.toContain('data-tone');
+  });
+
+  it.each([
+    ['destructive', 'text-destructive'],
+    ['warning', 'text-warning'],
+    ['info', 'text-info'],
+    ['muted', 'text-muted-foreground'],
+  ] as const)('colours the figure with valueTone=%s', (valueTone, cls) => {
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="1" valueTone={valueTone} />,
+    );
+    expect(html).toContain(`text-2xl font-bold tabular-nums ${cls}`);
+  });
+
+  it('renders a figure-sized Skeleton instead of the value while loading', () => {
+    const html = renderToStaticMarkup(
+      <StatCard label="A" value="99" loading />,
+    );
+    expect(html).toContain('data-slot="skeleton"');
+    expect(html).toContain('h-8 w-12');
+    expect(html).not.toContain('>99<');
+    expect(html).not.toContain('tabular-nums');
+    expect(html).toContain('>A<');
+  });
+});
diff --git a/frontend/src/components/StatCard.tsx b/frontend/src/components/StatCard.tsx
new file mode 100644
index 00000000..ab75ed15
--- /dev/null
+++ b/frontend/src/components/StatCard.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import { Card } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+
+const VALUE_TONES = {
+  destructive: 'text-destructive',
+  warning: 'text-warning',
+  info: 'text-info',
+  muted: 'text-muted-foreground',
+} as const;
+
+type StatCardProps = Omit<React.ComponentProps<'div'>, 'title' | 'children'> & {
+  /** Muted caption above the figure. */
+  label: React.ReactNode;
+  /** The figure itself, set large in tabular numerals. */
+  value: React.ReactNode;
+  /** Optional 12px muted line under the figure. */
+  sub?: React.ReactNode;
+  /** Native tooltip on the tile; adds a help cursor. */
+  hint?: string;
+  /** Card surface: `subtle` on a page, `outline` inside a modal (bg-card). */
+  variant?: 'subtle' | 'outline';
+  /** `destructive` gives the tile the danger soft fill and border. */
+  tone?: 'default' | 'destructive';
+  /** Colours the figure by meaning; omitted, it inherits the card foreground. */
+  valueTone?: keyof typeof VALUE_TONES;
+  /** Shows a figure-sized Skeleton in place of the value. */
+  loading?: boolean;
+};
+
+/**
+ * A stat tile: label, big tabular figure and an optional sub line on a
+ * Card. `className` is for layout only (grid placement, width).
+ */
+function StatCard({
+  label,
+  value,
+  sub,
+  hint,
+  variant = 'subtle',
+  tone = 'default',
+  valueTone,
+  loading = false,
+  className,
+  ...rest
+}: StatCardProps) {
+  return (
+    <Card
+      variant={variant}
+      tone={tone}
+      padding="lg"
+      title={hint}
+      className={cn('gap-1', hint && 'cursor-help', className)}
+      {...rest}
+    >
+      <p className="text-muted-foreground text-sm">{label}</p>
+      {loading ? (
+        <Skeleton className="h-8 w-12" />
+      ) : (
+        <p
+          className={cn(
+            'text-2xl font-bold tabular-nums',
+            valueTone && VALUE_TONES[valueTone],
+          )}
+        >
+          {value}
+        </p>
+      )}
+      {sub ? <p className="text-muted-foreground text-xs">{sub}</p> : null}
+    </Card>
+  );
+}
+
+export default StatCard;
+export { StatCard };
+export type { StatCardProps };
diff --git a/frontend/src/components/TextToSpeechButton.tsx b/frontend/src/components/TextToSpeechButton.tsx
index 028a4bed..1eff24ff 100644
--- a/frontend/src/components/TextToSpeechButton.tsx
+++ b/frontend/src/components/TextToSpeechButton.tsx
@@ -1,9 +1,8 @@
+import { Square, Volume2 } from 'lucide-react';
 import { useState, useRef, useEffect } from 'react';
-import Speaker from '../assets/speaker.svg?react';
-import Stopspeech from '../assets/stopspeech.svg?react';
+import { useTranslation } from 'react-i18next';
 import userService from '../api/services/userService';
-import { Button } from './ui/button';
-import Spinner from './Spinner';
+import { IconButton } from './ui/icon-button';
 
 let currentlyPlayingAudio: {
   audio: HTMLAudioElement;
@@ -43,6 +42,7 @@ function setCachedAudio(text: string, audioBase64: string) {
 }
 
 export default function SpeakButton({ text }: { text: string }) {
+  const { t } = useTranslation();
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -172,30 +172,21 @@ export default function SpeakButton({ text }: { text: string }) {
   };
 
   return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon"
-      className={`cursor-pointer rounded-full ${
-        isSpeaking || isLoading ? 'bg-accent' : ''
-      }`}
-      onClick={handleSpeakClick}
-      aria-label={
+    <IconButton
+      label={
         isLoading
-          ? 'Loading audio'
+          ? t('conversation.loadingAudio', 'Loading audio')
           : isSpeaking
-            ? 'Stop speaking'
-            : 'Speak text'
+            ? t('conversation.stopSpeaking', 'Stop speaking')
+            : t('conversation.speak')
       }
-      disabled={isLoading}
-    >
-      {isLoading ? (
-        <Spinner size="small" />
-      ) : isSpeaking ? (
-        <Stopspeech className="fill-none" />
-      ) : (
-        <Speaker className="fill-none" />
-      )}
-    </Button>
+      variant={isSpeaking || isLoading ? 'secondary' : 'ghost-muted'}
+      size="icon-sm"
+      shape="pill"
+      className="cursor-pointer"
+      onClick={handleSpeakClick}
+      icon={isSpeaking ? Square : Volume2}
+      loading={isLoading}
+    />
   );
 }
diff --git a/frontend/src/components/ToolIcon.tsx b/frontend/src/components/ToolIcon.tsx
index bd9edab3..7688f15b 100644
--- a/frontend/src/components/ToolIcon.tsx
+++ b/frontend/src/components/ToolIcon.tsx
@@ -36,13 +36,5 @@ export default function ToolIcon({ name, className, title }: ToolIconProps) {
   const a11y = title
     ? { role: 'img' as const, 'aria-label': title }
     : { 'aria-hidden': true as const };
-  return (
-    <Icon
-      className={cn(
-        'h-6 w-6 text-neutral-700 dark:text-neutral-200',
-        className,
-      )}
-      {...a11y}
-    />
-  );
+  return <Icon className={cn('text-foreground size-6', className)} {...a11y} />;
 }
diff --git a/frontend/src/components/UploadToast.test.tsx b/frontend/src/components/UploadToast.test.tsx
new file mode 100644
index 00000000..efed2d77
--- /dev/null
+++ b/frontend/src/components/UploadToast.test.tsx
@@ -0,0 +1,121 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import uploadReducer, {
+  addUploadTask,
+  type UploadTask,
+} from '../upload/uploadSlice';
+import UploadToast from './UploadToast';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = () => configureStore({ reducer: { upload: uploadReducer } });
+
+const task = (over: Partial<UploadTask>): UploadTask => ({
+  id: 't1',
+  fileName: 'a.pdf',
+  progress: 40,
+  status: 'training',
+  ...over,
+});
+
+describe('UploadToast', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let store: ReturnType<typeof makeStore>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    store = makeStore();
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async () => {
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <UploadToast />
+        </Provider>,
+      );
+    });
+  };
+
+  it('renders nothing without tasks', async () => {
+    await render();
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders one card of rows with no rail of its own', async () => {
+    store.dispatch(
+      addUploadTask(task({ id: 't1', fileName: 'a.pdf', stage: 'embedding' })),
+    );
+    store.dispatch(
+      addUploadTask(task({ id: 't2', fileName: 'b.md', status: 'completed' })),
+    );
+    await render();
+    expect(container.querySelectorAll('[data-slot="toast"]')).toHaveLength(1);
+    expect(container.querySelector('[data-slot="toast-viewport"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(container.querySelector('.fixed')).toBeNull();
+    const rows = container.querySelectorAll('[data-slot="toast-item"]');
+    expect(rows).toHaveLength(2);
+    expect(rows[0].textContent).toContain('b.md');
+    expect(rows[0].querySelector('[data-status="success"]')).not.toBeNull();
+    expect(rows[1].textContent).toContain(
+      'modals.uploadDoc.progress.embedding',
+    );
+    expect(rows[1].querySelector('[role="progressbar"]')).not.toBeNull();
+    expect(
+      container.querySelector('[data-slot="toast-title"]')?.textContent,
+    ).toBe('modals.uploadDoc.progress.upload');
+  });
+
+  it('tints the header and explains a failure', async () => {
+    store.dispatch(
+      addUploadTask(task({ status: 'failed', errorMessage: 'Too big' })),
+    );
+    await render();
+    expect(
+      container
+        .querySelector('[data-slot="toast-header"]')
+        ?.getAttribute('data-variant'),
+    ).toBe('destructive');
+    const row = container.querySelector('[data-slot="toast-item"]');
+    expect(row?.querySelector('[data-status="destructive"]')).not.toBeNull();
+    const message = container.querySelector('[data-slot="toast-message"]');
+    expect(message?.textContent).toBe('Too big');
+    expect(message?.className).toContain('text-destructive');
+  });
+
+  it('collapses the rows and dismisses every task', async () => {
+    store.dispatch(addUploadTask(task({})));
+    await render();
+    const collapse = container.querySelector(
+      'button[aria-label="modals.uploadDoc.progress.collapseDetails"]',
+    ) as HTMLButtonElement;
+    await act(async () => collapse.click());
+    expect(
+      container.querySelector(
+        'button[aria-label="modals.uploadDoc.progress.expandDetails"]',
+      ),
+    ).not.toBeNull();
+    const close = container.querySelector(
+      'button[aria-label="modals.uploadDoc.progress.dismiss"]',
+    ) as HTMLButtonElement;
+    await act(async () => close.click());
+    expect(container.innerHTML).toBe('');
+  });
+});
diff --git a/frontend/src/components/UploadToast.tsx b/frontend/src/components/UploadToast.tsx
index 3c132c29..e6e2d462 100644
--- a/frontend/src/components/UploadToast.tsx
+++ b/frontend/src/components/UploadToast.tsx
@@ -1,18 +1,26 @@
-import { X } from 'lucide-react';
+import { ChevronDown, X } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { selectWorkflowPreviewOpen } from '../agents/workflow/workflowPreviewSlice';
-import CheckCircleFilled from '../assets/check-circle-filled.svg';
-import ChevronDown from '../assets/chevron-down.svg';
-import WarnIcon from '../assets/warn.svg';
+import { cn } from '@/lib/utils';
+
 import {
   dismissUploadTask,
   selectUploadTasks,
   type UploadTask,
 } from '../upload/uploadSlice';
 import { Button } from './ui/button';
+import {
+  Toast,
+  ToastActions,
+  ToastContent,
+  ToastHeader,
+  ToastItem,
+  ToastMessage,
+  ToastStatus,
+  ToastTitle,
+} from './ui/toast';
 
 const PROGRESS_RADIUS = 10;
 const PROGRESS_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RADIUS;
@@ -30,6 +38,11 @@ const IN_PROGRESS_STATUSES = new Set<UploadTask['status']>([
  * newest task overall if all are terminal). Per-task progress lives
  * on each row.
  *
+ * Renders only its ``Toast`` card: App.tsx mounts the shared
+ * ``ToastViewport`` and places this card at the bottom of the stack
+ * (and moves the whole stack left while the workflow Preview drawer is
+ * open).
+ *
  * Dismissal: the header X dismisses every visible task at once
  * (mirrors the GDrive panel close — keeps the surface tidy without
  * per-row controls). The chevron collapses the row list.
@@ -40,10 +53,6 @@ export default function UploadToast() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const uploadTasks = useSelector(selectUploadTasks);
-  // The workflow Preview drawer occupies the right edge; shift the toast to
-  // the bottom-left while it's open so it stays visible without covering the
-  // drawer's attach/send controls.
-  const previewOpen = useSelector(selectWorkflowPreviewOpen);
 
   const visibleTasks = uploadTasks.filter((task) => !task.dismissed);
   if (visibleTasks.length === 0) return null;
@@ -64,80 +73,62 @@ export default function UploadToast() {
   };
 
   return (
-    <div
-      className={`fixed bottom-4 z-50 flex max-w-md flex-col gap-2 ${
-        previewOpen ? 'left-4' : 'right-4'
-      }`}
-      onMouseDown={(e) => e.stopPropagation()}
-      role="status"
-      aria-live="polite"
-      aria-atomic="false"
-    >
+    <Toast>
+      <ToastHeader
+        variant={primaryTask.status === 'failed' ? 'destructive' : 'default'}
+      >
+        <ToastTitle>{headerLabel}</ToastTitle>
+        <ToastActions>
+          <Button
+            type="button"
+            variant="ghost-muted"
+            size="icon-sm"
+            onClick={() => setCollapsed((prev) => !prev)}
+            aria-label={
+              collapsed
+                ? t('modals.uploadDoc.progress.expandDetails')
+                : t('modals.uploadDoc.progress.collapseDetails')
+            }
+          >
+            <ChevronDown
+              className={cn(
+                'transition-transform duration-200',
+                collapsed && 'rotate-180',
+              )}
+            />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost-muted"
+            size="icon-sm"
+            onClick={dismissAll}
+            aria-label={t('modals.uploadDoc.progress.dismiss')}
+          >
+            <X />
+          </Button>
+        </ToastActions>
+      </ToastHeader>
+
       <div
-        className={`border-border bg-card shadow-toast w-[271px] overflow-hidden rounded-2xl border transition-all duration-300`}
+        className={cn(
+          'grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out',
+          collapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',
+        )}
       >
         <div
-          className={`flex items-center justify-between px-4 py-3 ${
-            primaryTask.status !== 'failed'
-              ? 'bg-accent/50 dark:bg-muted'
-              : 'bg-destructive/10 dark:bg-destructive/10'
-          }`}
+          className={cn(
+            'min-h-0 overflow-hidden transition-opacity duration-300',
+            collapsed ? 'opacity-0' : 'opacity-100',
+          )}
         >
-          <h3 className="dark:text-foreground text-sm leading-[16.5px] font-medium text-black">
-            {headerLabel}
-          </h3>
-          <div className="flex items-center gap-1">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              onClick={() => setCollapsed((prev) => !prev)}
-              aria-label={
-                collapsed
-                  ? t('modals.uploadDoc.progress.expandDetails')
-                  : t('modals.uploadDoc.progress.collapseDetails')
-              }
-              className="text-black opacity-70 hover:bg-transparent hover:opacity-100 dark:text-white dark:hover:bg-transparent"
-            >
-              <img
-                src={ChevronDown}
-                alt=""
-                className={`h-4 w-4 transform transition-transform duration-200 dark:invert ${
-                  collapsed ? 'rotate-180' : ''
-                }`}
-              />
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              onClick={dismissAll}
-              className="text-black opacity-70 hover:bg-transparent hover:opacity-100 dark:text-white dark:hover:bg-transparent"
-              aria-label={t('modals.uploadDoc.progress.dismiss')}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-
-        <div
-          className="grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out"
-          style={{ gridTemplateRows: collapsed ? '0fr' : '1fr' }}
-        >
-          <div
-            className={`min-h-0 overflow-hidden transition-opacity duration-300 ${
-              collapsed ? 'opacity-0' : 'opacity-100'
-            }`}
-          >
-            <ul className="max-h-72 overflow-y-auto">
-              {visibleTasks.map((task) => (
-                <UploadRow key={task.id} task={task} t={t} />
-              ))}
-            </ul>
-          </div>
+          <ToastContent scrollable>
+            {visibleTasks.map((task) => (
+              <UploadRow key={task.id} task={task} t={t} />
+            ))}
+          </ToastContent>
         </div>
       </div>
-    </div>
+    </Toast>
   );
 }
 
@@ -154,91 +145,80 @@ function UploadRow({
   const progressOffset = PROGRESS_CIRCUMFERENCE * (1 - rawProgress / 100);
 
   return (
-    <li className="border-border/50 border-b last:border-b-0">
-      <div className="flex items-center justify-between px-5 py-3">
-        <div className="flex min-w-0 flex-col">
-          <p
-            className="dark:text-muted-foreground max-w-[200px] truncate text-sm leading-[16.5px] font-normal text-black"
-            title={task.fileName}
+    <>
+      <ToastItem
+        label={<span title={task.fileName}>{task.fileName}</span>}
+        meta={
+          task.status === 'training' && task.stage
+            ? t(`modals.uploadDoc.progress.${task.stage}`)
+            : undefined
+        }
+      >
+        {showProgress && (
+          // Determinate ring: ToastStatus "pending" is an indeterminate
+          // spinner, and each row reports its own percentage.
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className="text-primary size-6 shrink-0"
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={formattedProgress}
+            aria-label={t('modals.uploadDoc.progress.uploadProgress', {
+              progress: formattedProgress,
+            })}
           >
-            {task.fileName}
-          </p>
-          {task.status === 'training' && task.stage && (
-            <span className="text-muted-foreground mt-0.5 text-xs leading-[14px]">
-              {t(`modals.uploadDoc.progress.${task.stage}`)}
-            </span>
-          )}
-        </div>
-
-        <div className="flex items-center gap-2">
-          {showProgress && (
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              className="text-primary h-6 w-6 shrink-0"
-              role="progressbar"
-              aria-valuemin={0}
-              aria-valuemax={100}
-              aria-valuenow={formattedProgress}
-              aria-label={t('modals.uploadDoc.progress.uploadProgress', {
-                progress: formattedProgress,
-              })}
-            >
-              <circle
-                className="text-muted dark:text-muted-foreground/30"
-                stroke="currentColor"
-                strokeWidth="2"
-                cx="12"
-                cy="12"
-                r={PROGRESS_RADIUS}
-                fill="none"
-              />
-              <circle
-                className="text-primary"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeDasharray={PROGRESS_CIRCUMFERENCE}
-                strokeDashoffset={progressOffset}
-                cx="12"
-                cy="12"
-                r={PROGRESS_RADIUS}
-                fill="none"
-                transform="rotate(-90 12 12)"
-              />
-            </svg>
-          )}
-
-          {task.status === 'completed' && (
-            <img
-              src={CheckCircleFilled}
-              alt=""
-              className="h-6 w-6 shrink-0"
-              aria-hidden="true"
+            <circle
+              className="text-muted dark:text-muted-foreground/30"
+              stroke="currentColor"
+              strokeWidth="2"
+              cx="12"
+              cy="12"
+              r={PROGRESS_RADIUS}
+              fill="none"
             />
-          )}
-
-          {task.status === 'failed' && (
-            <img
-              src={WarnIcon}
-              alt=""
-              className="h-6 w-6 shrink-0"
-              aria-hidden="true"
+            <circle
+              className="text-primary"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeDasharray={PROGRESS_CIRCUMFERENCE}
+              strokeDashoffset={progressOffset}
+              cx="12"
+              cy="12"
+              r={PROGRESS_RADIUS}
+              fill="none"
+              transform="rotate(-90 12 12)"
             />
-          )}
-        </div>
-      </div>
+          </svg>
+        )}
+
+        {task.status === 'completed' && (
+          <ToastStatus
+            status="success"
+            label={t('modals.uploadDoc.progress.completed')}
+          />
+        )}
+
+        {task.status === 'failed' && (
+          <ToastStatus
+            status="destructive"
+            label={t('modals.uploadDoc.progress.failed')}
+          />
+        )}
+      </ToastItem>
 
       {task.status === 'failed' &&
         (task.tokenLimitReached || task.errorMessage) && (
-          <span className="block px-5 pb-3 text-xs text-red-500">
+          <ToastMessage variant="destructive">
             {task.tokenLimitReached
               ? t('modals.uploadDoc.progress.tokenLimit')
               : task.errorMessage}
-          </span>
+          </ToastMessage>
         )}
-    </li>
+    </>
   );
 }
 
diff --git a/frontend/src/components/WikiViewer.tsx b/frontend/src/components/WikiViewer.tsx
index 6ef4181d..47942cb7 100644
--- a/frontend/src/components/WikiViewer.tsx
+++ b/frontend/src/components/WikiViewer.tsx
@@ -1,22 +1,22 @@
-import { BookOpen } from 'lucide-react';
+import { ArrowLeft, BookOpen } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import { markdownHeadings } from '@/lib/markdown';
+import { cn } from '@/lib/utils';
+
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
 import { selectToken } from '../preferences/preferenceSlice';
+import { formatRelative } from '../utils/dateTimeUtils';
 import { decodeJwtPayload } from '../utils/jwtUtils';
 import { Button } from './ui/button';
+import { IconButton } from './ui/icon-button';
+import { Textarea } from './ui/textarea';
 import SkeletonLoader from './SkeletonLoader';
-import {
-  WikiPageNode,
-  formatRelativeTime,
-  provenanceKey,
-  saveWikiPage,
-} from './wikiViewerUtils';
+import { WikiPageNode, provenanceKey, saveWikiPage } from './wikiViewerUtils';
 
 interface WikiViewerProps {
   docId: string;
@@ -28,15 +28,7 @@ interface WikiViewerProps {
 }
 
 const markdownComponents = {
-  h1: ({ children }: { children?: React.ReactNode }) => (
-    <h1 className="mt-4 mb-2 text-xl font-semibold">{children}</h1>
-  ),
-  h2: ({ children }: { children?: React.ReactNode }) => (
-    <h2 className="mt-4 mb-2 text-lg font-semibold">{children}</h2>
-  ),
-  h3: ({ children }: { children?: React.ReactNode }) => (
-    <h3 className="mt-3 mb-2 text-base font-semibold">{children}</h3>
-  ),
+  ...markdownHeadings,
   p: ({ children }: { children?: React.ReactNode }) => (
     <p className="mb-3">{children}</p>
   ),
@@ -47,17 +39,14 @@ const markdownComponents = {
     <ol className="mb-3 list-inside list-decimal pl-4">{children}</ol>
   ),
   a: ({ children, href }: { children?: React.ReactNode; href?: string }) => (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className="text-primary underline"
-    >
-      {children}
-    </a>
+    <Button variant="link" size="inline" asChild>
+      <a href={href} target="_blank" rel="noreferrer">
+        {children}
+      </a>
+    </Button>
   ),
   code: ({ children }: { children?: React.ReactNode }) => (
-    <code className="dark:bg-accent rounded-md bg-gray-200 px-1.5 py-0.5 text-xs">
+    <code className="bg-accent rounded-md px-1.5 py-0.5 text-xs">
       {children}
     </code>
   ),
@@ -194,7 +183,7 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
   const renderStamp = () => {
     if (!page) return null;
     const who = provenanceLabel(page.updated_via, page.updated_by);
-    const when = formatRelativeTime(page.updated_at);
+    const when = formatRelative(page.updated_at);
     const parts = [t('settings.sources.wiki.stamp.editedBy', { who })];
     if (when) parts.push(when);
     if (page.version != null) {
@@ -210,29 +199,24 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
   return (
     <div className="flex flex-col">
       <div className="mb-4 flex items-center">
-        <Button
-          type="button"
+        <IconButton
           variant="outline"
-          size="icon-sm"
-          className="text-muted-foreground mr-3 h-[29px] w-[29px] rounded-full p-2 dark:border-0"
+          size="icon-xs"
+          shape="pill"
+          className="mr-3"
           onClick={onBackToDocuments}
-          aria-label={t('settings.sources.backToAll')}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </Button>
+          label={t('settings.sources.backToAll')}
+          icon={ArrowLeft}
+          side="bottom"
+        />
         <span className="text-primary font-semibold wrap-break-word">
           {sourceName}
         </span>
         {headerAction ? <div className="ml-auto">{headerAction}</div> : null}
       </div>
 
-      <div className="bg-muted/60 text-muted-foreground dark:bg-accent/40 mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
-        <BookOpen
-          size={16}
-          strokeWidth={1.75}
-          className="mt-0.5 shrink-0"
-          aria-hidden="true"
-        />
+      <div className="bg-muted text-muted-foreground mb-4 flex items-start gap-2 rounded-xl px-4 py-3 text-xs">
+        <BookOpen className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
         <p>
           <span className="text-foreground font-medium">
             {t('settings.sources.wiki.livingTitle')}
@@ -259,11 +243,12 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
                   <button
                     type="button"
                     onClick={() => setSelectedPath(p.path)}
-                    className={`w-full truncate rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+                    className={cn(
+                      'w-full truncate rounded-lg px-3 py-2 text-left text-sm transition-colors',
                       selectedPath === p.path
-                        ? 'bg-muted text-foreground dark:bg-accent'
-                        : 'text-muted-foreground hover:bg-muted dark:hover:bg-accent'
-                    }`}
+                        ? 'bg-accent text-foreground'
+                        : 'text-muted-foreground hover:bg-accent',
+                    )}
                     title={p.path}
                   >
                     {p.title || p.path}
@@ -304,11 +289,12 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
 
               {isEditing ? (
                 <div className="flex flex-col gap-3">
-                  <textarea
+                  <Textarea
                     value={draft}
                     onChange={(e) => setDraft(e.target.value)}
                     placeholder={t('settings.sources.wiki.editPlaceholder')}
-                    className="border-border bg-card text-foreground min-h-[320px] w-full resize-y rounded-md border p-3 font-mono text-sm leading-relaxed"
+                    variant="filled"
+                    className="min-h-[320px] font-mono"
                     aria-label={selectedPath}
                   />
                   <div className="flex items-center gap-2">
@@ -316,15 +302,13 @@ const WikiViewer: React.FC<WikiViewerProps> = ({
                       type="button"
                       size="sm"
                       onClick={handleSave}
-                      disabled={saving}
+                      loading={saving}
                     >
-                      {saving
-                        ? t('settings.sources.wiki.saving')
-                        : t('settings.sources.wiki.save')}
+                      {t('settings.sources.wiki.save')}
                     </Button>
                     <Button
                       type="button"
-                      variant="outline"
+                      variant="ghost"
                       size="sm"
                       onClick={cancelEditing}
                       disabled={saving}
diff --git a/frontend/src/components/graphViewUtils.test.ts b/frontend/src/components/graphViewUtils.test.ts
index 5a68f0e4..db43fd72 100644
--- a/frontend/src/components/graphViewUtils.test.ts
+++ b/frontend/src/components/graphViewUtils.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 
 import {
   GraphNode,
@@ -8,6 +8,7 @@ import {
   nodeAtPoint,
   nodeLabelEl,
   nodeRadius,
+  readGraphPalette,
   toForceGraphData,
 } from './graphViewUtils';
 
@@ -129,3 +130,34 @@ describe('nodeAtPoint', () => {
     expect(nodeAtPoint(nodes, r + 3, 0, 1, 2)).toBeNull();
   });
 });
+
+describe('readGraphPalette', () => {
+  const tokens = ['--primary', '--foreground', '--border', '--card'];
+  afterEach(() =>
+    tokens.forEach((name) => document.body.style.removeProperty(name)),
+  );
+
+  it('maps nodes, hover ring, links, labels and halo onto the theme tokens', () => {
+    document.body.style.setProperty('--primary', '#976af3');
+    document.body.style.setProperty('--foreground', '#fafafa');
+    document.body.style.setProperty('--border', '#44454c');
+    document.body.style.setProperty('--card', '#2b2c31');
+    expect(readGraphPalette()).toEqual({
+      node: '#976af3',
+      hoverStroke: '#fafafa',
+      link: '#44454c',
+      label: '#fafafa',
+      halo: '#2b2c31',
+    });
+  });
+
+  it('falls back to the light tokens', () => {
+    expect(readGraphPalette()).toEqual({
+      node: '#7d54d1',
+      hoverStroke: '#171717',
+      link: '#d9d9d9',
+      label: '#171717',
+      halo: '#ffffff',
+    });
+  });
+});
diff --git a/frontend/src/components/graphViewUtils.ts b/frontend/src/components/graphViewUtils.ts
index ea72a9db..dbd0d76a 100644
--- a/frontend/src/components/graphViewUtils.ts
+++ b/frontend/src/components/graphViewUtils.ts
@@ -1,3 +1,5 @@
+import { readCssVar } from '../utils/chartUtils';
+
 export interface GraphNode {
   id: string;
   name: string;
@@ -97,3 +99,36 @@ export function nodeLabelEl(name: string): HTMLDivElement {
   el.textContent = name ?? '';
   return el;
 }
+
+/** Resolved canvas colours for the graph view. */
+export interface GraphPalette {
+  /** Node fill (`--primary`). */
+  node: string;
+  /** Ring around the hovered node (`--foreground`). */
+  hoverStroke: string;
+  /** Edge colour (`--border`). */
+  link: string;
+  /** Label text (`--foreground`). */
+  label: string;
+  /** Label halo (`--card`, the canvas surface, so it works in both themes). */
+  halo: string;
+}
+
+/**
+ * Resolve the graph canvas colours from the current theme tokens.
+ *
+ * The canvas can't read CSS variables, so the view re-reads this on every
+ * theme change. Fallbacks are the light-theme values from src/index.css.
+ *
+ * @returns Concrete colour strings for the canvas.
+ */
+export function readGraphPalette(): GraphPalette {
+  const foreground = readCssVar('--foreground', '#171717');
+  return {
+    node: readCssVar('--primary', '#7d54d1'),
+    hoverStroke: foreground,
+    link: readCssVar('--border', '#d9d9d9'),
+    label: foreground,
+    halo: readCssVar('--card', '#ffffff'),
+  };
+}
diff --git a/frontend/src/components/message-input/AttachFileButton.tsx b/frontend/src/components/message-input/AttachFileButton.tsx
index a0b95403..a33763ce 100644
--- a/frontend/src/components/message-input/AttachFileButton.tsx
+++ b/frontend/src/components/message-input/AttachFileButton.tsx
@@ -1,7 +1,8 @@
+import { Paperclip } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import ClipIcon from '../../assets/clip.svg';
 import { ATTACHMENT_FILE_ACCEPT_ATTR } from '../../constants/fileUpload';
+import { Button } from '../ui/button';
 
 type AttachFileButtonProps = {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -11,29 +12,24 @@ export default function AttachFileButton({ onChange }: AttachFileButtonProps) {
   const { t } = useTranslation();
 
   return (
-    // translate="no": Chrome's page translator rewrites text nodes inside
-    // this label into <font> wrappers and React then loses the control — a
-    // user with auto-translate on rage-clicked a dead Attach button until
-    // they reloaded. Keep the composer's controls out of the translator.
-    <label
-      translate="no"
-      className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-center rounded-full border px-2 py-1 transition-colors"
-    >
-      <img
-        src={ClipIcon}
-        alt="Attach"
-        className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
-      />
-      <span className="xs:text-xs dark:text-foreground text-muted-foreground text-xs font-medium sm:text-sm">
-        {t('conversation.attachments.attach')}
-      </span>
-      <input
-        type="file"
-        className="hidden"
-        multiple
-        accept={ATTACHMENT_FILE_ACCEPT_ATTR}
-        onChange={onChange}
-      />
-    </label>
+    <Button asChild variant="outline" size="sm" shape="pill">
+      {/* translate="no": Chrome's page translator rewrites text nodes inside
+          this label into <font> wrappers and React then loses the control — a
+          user with auto-translate on rage-clicked a dead Attach button until
+          they reloaded. Keep the composer's controls out of the translator. */}
+      <label translate="no" className="cursor-pointer justify-start">
+        <Paperclip />
+        <span className="text-foreground text-xs sm:text-sm">
+          {t('conversation.attachments.attach')}
+        </span>
+        <input
+          type="file"
+          className="hidden"
+          multiple
+          accept={ATTACHMENT_FILE_ACCEPT_ATTR}
+          onChange={onChange}
+        />
+      </label>
+    </Button>
   );
 }
diff --git a/frontend/src/components/message-input/AttachmentChipList.tsx b/frontend/src/components/message-input/AttachmentChipList.tsx
index 4d1a9b3e..7d31dfc9 100644
--- a/frontend/src/components/message-input/AttachmentChipList.tsx
+++ b/frontend/src/components/message-input/AttachmentChipList.tsx
@@ -1,10 +1,9 @@
-import { X } from 'lucide-react';
+import { Paperclip, TriangleAlert, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import AlertIcon from '../../assets/alert.svg';
-import DocumentationDark from '../../assets/documentation-dark.svg';
 import type { Attachment } from '../../upload/uploadSlice';
-import { Button } from '../ui/button';
+import { IconButton } from '../ui/icon-button';
+import { cn } from '@/lib/utils';
 
 type AttachmentChipListProps = {
   attachments: Attachment[];
@@ -54,40 +53,40 @@ export default function AttachmentChipList({
               onDragStart={(e) => onDragStart(e, attachment.id)}
               onDragOver={onDragOver}
               onDrop={(e) => onDropOn(e, attachment.id)}
-              className={`group dark:text-foreground bg-muted text-muted-foreground dark:bg-accent relative flex items-center rounded-xl px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm ${
-                attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
-              } ${
-                draggingId === attachment.id
-                  ? 'ring-dashed opacity-60 ring-2 ring-purple-200'
-                  : ''
-              }`}
+              // opacity-60 while dragging never applied (opacity-70 / -100
+              // come later in the stylesheet), so only the ring shows the drag.
+              className={cn(
+                'group bg-muted text-foreground relative flex items-center rounded-xl px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm',
+                attachment.status !== 'completed'
+                  ? 'opacity-70'
+                  : 'opacity-100',
+                draggingId === attachment.id && 'ring-primary/30 ring-2',
+              )}
               title={
                 attachment.status === 'failed' && attachment.errorMessage
                   ? `${attachment.fileName}: ${attachment.errorMessage}`
                   : attachment.fileName
               }
             >
-              <div className="bg-primary mr-2 flex h-8 w-8 items-center justify-center rounded-md p-1">
+              <div className="bg-primary mr-2 flex size-8 items-center justify-center rounded-md p-1">
                 {attachment.status === 'completed' && (
-                  <img
-                    src={DocumentationDark}
-                    alt="Attachment"
-                    className="h-[15px] w-[15px] object-fill"
+                  <Paperclip
+                    aria-label={t('conversation.attachments.attached')}
+                    className="text-primary-foreground size-3.75"
                   />
                 )}
 
                 {attachment.status === 'failed' && (
-                  <img
-                    src={AlertIcon}
-                    alt="Failed"
-                    className="h-[15px] w-[15px] object-fill"
+                  <TriangleAlert
+                    aria-label={t('conversation.attachments.failed')}
+                    className="text-primary-foreground size-4"
                   />
                 )}
 
                 {(attachment.status === 'uploading' ||
                   attachment.status === 'processing') && (
-                  <div className="flex h-[15px] w-[15px] items-center justify-center">
-                    <svg className="h-[15px] w-[15px]" viewBox="0 0 24 24">
+                  <div className="flex size-3.75 items-center justify-center">
+                    <svg className="size-3.75" viewBox="0 0 24 24">
                       <circle
                         className="opacity-0"
                         cx="12"
@@ -98,7 +97,7 @@ export default function AttachmentChipList({
                         fill="none"
                       />
                       <circle
-                        className="text-[#ECECF1]"
+                        className="text-primary-foreground"
                         cx="12"
                         cy="12"
                         r="10"
@@ -120,21 +119,18 @@ export default function AttachmentChipList({
                 {attachment.fileName}
               </span>
 
-              <Button
-                type="button"
+              <IconButton
+                label={t('conversation.attachments.remove')}
                 variant="ghost"
-                size="icon-sm"
-                className="ml-1.5 h-auto w-auto rounded-full p-1"
+                size="icon-xs"
+                shape="pill"
+                className="ml-1.5"
                 onClick={() => {
                   onRemove(attachment.id);
                 }}
-                aria-label={t('conversation.attachments.remove')}
               >
-                <X
-                  aria-label={t('conversation.attachments.remove')}
-                  className="h-2.5 w-2.5"
-                />
-              </Button>
+                <X aria-hidden="true" className="size-4" />
+              </IconButton>
             </div>
           );
         })}
@@ -142,7 +138,7 @@ export default function AttachmentChipList({
 
       {failures.length > 0 && (
         <div
-          className="flex flex-col gap-0.5 px-2 pb-1 text-xs text-[#B42318] sm:px-3"
+          className="text-destructive flex flex-col gap-0.5 px-2 pb-1 text-xs sm:px-3"
           role="alert"
         >
           {failures.map((attachment) => (
@@ -155,7 +151,7 @@ export default function AttachmentChipList({
 
       {unreadable.length > 0 && (
         <div
-          className="flex flex-col gap-0.5 px-2 pb-1 text-xs text-[#B54708] sm:px-3 dark:text-[#FDB022]"
+          className="text-warning flex flex-col gap-0.5 px-2 pb-1 text-xs sm:px-3"
           role="status"
         >
           {unreadable.map((attachment) => (
diff --git a/frontend/src/components/message-input/MicButton.tsx b/frontend/src/components/message-input/MicButton.tsx
index 23dc1590..c2b17110 100644
--- a/frontend/src/components/message-input/MicButton.tsx
+++ b/frontend/src/components/message-input/MicButton.tsx
@@ -1,6 +1,8 @@
-import { LoaderCircle, Mic, Square } from 'lucide-react';
+import { Mic, Square } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
 
 export type RecordingState = 'idle' | 'recording' | 'transcribing' | 'error';
 
@@ -10,16 +12,18 @@ type MicButtonProps = {
   onClick: () => void;
 };
 
-const getVoiceButtonLabel = (recordingState: RecordingState): string => {
-  if (recordingState === 'recording') return 'Stop recording';
-  if (recordingState === 'transcribing') return 'Transcribing audio';
-  return 'Voice input';
+const VOICE_LABEL_KEY: Record<RecordingState, string> = {
+  idle: 'conversation.voice.start',
+  error: 'conversation.voice.start',
+  recording: 'conversation.voice.stopRecording',
+  transcribing: 'conversation.voice.transcribingAudio',
 };
 
-const getVoiceButtonText = (recordingState: RecordingState): string => {
-  if (recordingState === 'recording') return 'Stop';
-  if (recordingState === 'transcribing') return 'Transcribing';
-  return 'Voice';
+const VOICE_TEXT_KEY: Record<RecordingState, string> = {
+  idle: 'conversation.voice.voice',
+  error: 'conversation.voice.voice',
+  recording: 'conversation.voice.stop',
+  transcribing: 'conversation.voice.transcribing',
 };
 
 export default function MicButton({
@@ -27,41 +31,36 @@ export default function MicButton({
   loading,
   onClick,
 }: MicButtonProps) {
-  const voiceButtonLabel = getVoiceButtonLabel(recordingState);
-  const voiceButtonText = getVoiceButtonText(recordingState);
+  const { t } = useTranslation();
+  const voiceButtonLabel = t(VOICE_LABEL_KEY[recordingState]);
+  const voiceButtonText = t(VOICE_TEXT_KEY[recordingState]);
+  const isRecording = recordingState === 'recording';
 
   return (
     <Button
       type="button"
-      variant="outline"
+      variant={isRecording ? 'destructive-outline' : 'outline'}
       size="sm"
+      shape="pill"
       onClick={onClick}
       aria-label={voiceButtonLabel}
       title={voiceButtonLabel}
       disabled={loading || recordingState === 'transcribing'}
-      className={`xs:px-3 xs:py-1.5 dark:border-border flex h-auto items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors ${
-        recordingState === 'recording'
-          ? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
-          : 'border-border dark:hover:bg-accent hover:bg-gray-100'
-      } ${
-        loading || recordingState === 'transcribing'
-          ? 'cursor-not-allowed opacity-60'
-          : ''
-      }`}
+      className="justify-start"
     >
       {recordingState === 'transcribing' ? (
-        <LoaderCircle className="mr-1 h-3.5 w-3.5 animate-spin sm:mr-1.5 sm:h-4 sm:w-4" />
-      ) : recordingState === 'recording' ? (
-        <Square className="mr-1 h-3.5 w-3.5 fill-current sm:mr-1.5 sm:h-4 sm:w-4" />
+        <Spinner size="xs" label={t('conversation.voice.transcribingAudio')} />
+      ) : isRecording ? (
+        <Square className="size-3.5 fill-current sm:size-4" />
       ) : (
-        <Mic className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4" />
+        <Mic className="size-3.5 sm:size-4" />
       )}
       <span
-        className={`xs:text-xs dark:text-foreground text-xs font-medium sm:text-sm ${
-          recordingState === 'recording'
-            ? 'text-[#B42318]'
-            : 'text-muted-foreground'
-        }`}
+        className={
+          isRecording
+            ? 'text-xs sm:text-sm'
+            : 'text-foreground text-xs sm:text-sm'
+        }
       >
         {voiceButtonText}
       </span>
diff --git a/frontend/src/components/message-input/SourcesTrigger.tsx b/frontend/src/components/message-input/SourcesTrigger.tsx
index f8edb1fc..dbdb86cc 100644
--- a/frontend/src/components/message-input/SourcesTrigger.tsx
+++ b/frontend/src/components/message-input/SourcesTrigger.tsx
@@ -1,6 +1,6 @@
+import { Database } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import SourceIcon from '../../assets/source.svg';
 import type { Doc } from '../../models/misc';
 import {
   MultiSelectPopover,
@@ -51,19 +51,16 @@ export default function SourcesTrigger({
           type="button"
           variant="outline"
           size="sm"
-          className="xs:px-3 xs:py-1.5 dark:border-border border-border hover:bg-accent dark:hover:bg-muted flex h-auto max-w-[130px] items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors sm:max-w-[150px]"
+          shape="pill"
+          className="max-w-[130px] justify-start sm:max-w-[150px]"
           title={
             selectedDocs && selectedDocs.length > 0
               ? selectedDocs.map((doc) => doc.name).join(', ')
               : t('conversation.sources.title')
           }
         >
-          <img
-            src={SourceIcon}
-            alt="Sources"
-            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
-          />
-          <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
+          <Database />
+          <span className="text-foreground truncate overflow-hidden text-xs sm:text-sm">
             {selectedDocs && selectedDocs.length > 0
               ? selectedDocs.length === 1
                 ? selectedDocs[0].name
diff --git a/frontend/src/components/message-input/ToolsTrigger.tsx b/frontend/src/components/message-input/ToolsTrigger.tsx
index 6fb2a49a..9fa67a22 100644
--- a/frontend/src/components/message-input/ToolsTrigger.tsx
+++ b/frontend/src/components/message-input/ToolsTrigger.tsx
@@ -1,7 +1,6 @@
+import { ArrowRight, Wrench } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import RedirectIcon from '../../assets/redirect.svg';
-import ToolIcon from '../../assets/tool.svg';
 import {
   MultiSelectPopover,
   type MultiSelectPopoverItem,
@@ -39,32 +38,23 @@ export default function ToolsTrigger({
       emptyMessage={t('settings.tools.noToolsFound')}
       loading={loading}
       footer={
-        <a
-          href="/settings/tools"
-          className="text-primary inline-flex items-center text-base font-medium"
-        >
-          {t('settings.tools.manageTools')}
-          <img
-            src={RedirectIcon}
-            alt=""
-            aria-hidden="true"
-            className="ml-2 h-[11px] w-[11px]"
-          />
-        </a>
+        <Button variant="link" size="inline" asChild>
+          <a href="/settings/tools">
+            {t('settings.tools.manageTools')}
+            <ArrowRight aria-hidden="true" className="size-3" />
+          </a>
+        </Button>
       }
       trigger={
         <Button
           type="button"
           variant="outline"
           size="sm"
-          className="xs:px-3 xs:py-1.5 xs:max-w-[150px] dark:border-border border-border hover:bg-muted dark:hover:bg-muted flex h-auto max-w-[130px] items-center justify-start rounded-full border bg-transparent px-2 py-1 shadow-none transition-colors"
+          shape="pill"
+          className="max-w-[130px] justify-start"
         >
-          <img
-            src={ToolIcon}
-            alt="Tools"
-            className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4 dark:invert"
-          />
-          <span className="xs:text-xs dark:text-foreground text-muted-foreground truncate overflow-hidden text-xs font-medium sm:text-sm">
+          <Wrench />
+          <span className="text-foreground truncate overflow-hidden text-xs sm:text-sm">
             {t('settings.tools.label')}
           </span>
         </Button>
diff --git a/frontend/src/components/tree/PathHeader.test.tsx b/frontend/src/components/tree/PathHeader.test.tsx
new file mode 100644
index 00000000..b77d04a4
--- /dev/null
+++ b/frontend/src/components/tree/PathHeader.test.tsx
@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TooltipProvider } from '../ui/tooltip';
+import PathHeader from './PathHeader';
+
+const render = (node: React.ReactNode) =>
+  renderToStaticMarkup(<TooltipProvider>{node}</TooltipProvider>);
+
+describe('PathHeader', () => {
+  it('renders a breadcrumb with clickable parents and a truncating last crumb', () => {
+    const html = render(
+      <PathHeader
+        backLabel="Back"
+        onBack={vi.fn()}
+        root={{ label: 'Contracts', onSelect: vi.fn() }}
+        segments={[
+          { label: 'carriers', onSelect: vi.fn() },
+          { label: 'a-very-long-file-name.pdf' },
+        ]}
+      />,
+    );
+    expect(html).toContain('data-slot="breadcrumb"');
+    expect(html.match(/data-slot="breadcrumb-link"/g)).toHaveLength(2);
+    expect(html).toContain('<button type="button"');
+    expect(html).toContain('max-w-[32ch]');
+    expect(html).toContain('title="a-very-long-file-name.pdf"');
+    expect(html).not.toContain('text-primary');
+    expect(html).toContain('aria-label="Back"');
+  });
+
+  it('makes the root the current crumb when there are no segments', () => {
+    const html = render(
+      <PathHeader backLabel="Back" onBack={vi.fn()} root={{ label: 'Docs' }} />,
+    );
+    expect(html).toContain('data-slot="breadcrumb-page"');
+    expect(html).not.toContain('data-slot="breadcrumb-link"');
+  });
+
+  it('renders actions on the right', () => {
+    const html = render(
+      <PathHeader
+        backLabel="Back"
+        onBack={vi.fn()}
+        root={{ label: 'Docs' }}
+        actions={<button type="button">Sync</button>}
+      />,
+    );
+    expect(html).toContain('Sync');
+  });
+});
diff --git a/frontend/src/components/tree/PathHeader.tsx b/frontend/src/components/tree/PathHeader.tsx
new file mode 100644
index 00000000..369a378d
--- /dev/null
+++ b/frontend/src/components/tree/PathHeader.tsx
@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { Fragment } from 'react';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../ui/breadcrumb';
+import { IconButton } from '../ui/icon-button';
+
+type Crumb = { label: string; onSelect?: () => void };
+
+/**
+ * The path row above a source's file tree and chunk viewer: a back button,
+ * the source and folder crumbs, and actions (search, sync, edit) on the
+ * right. The last crumb is the current one and truncates.
+ */
+export default function PathHeader({
+  root,
+  segments = [],
+  onBack,
+  backLabel,
+  actions,
+}: {
+  root: Crumb;
+  segments?: Crumb[];
+  onBack: () => void;
+  backLabel: string;
+  actions?: ReactNode;
+}) {
+  const crumbs = [root, ...segments];
+
+  return (
+    <div className="flex min-h-9.5 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex w-full min-w-0 items-center sm:w-auto">
+        <IconButton
+          variant="outline"
+          size="icon-xs"
+          shape="pill"
+          className="mr-3"
+          label={backLabel}
+          icon={ArrowLeft}
+          side="bottom"
+          onClick={onBack}
+        />
+        <Breadcrumb className="min-w-0">
+          <BreadcrumbList>
+            {crumbs.map((crumb, index) => {
+              const isLast = index === crumbs.length - 1;
+              return (
+                <Fragment key={`${index}-${crumb.label}`}>
+                  {index > 0 ? <BreadcrumbSeparator /> : null}
+                  <BreadcrumbItem>
+                    {isLast ? (
+                      <BreadcrumbPage
+                        className="max-w-[32ch]"
+                        title={crumb.label}
+                      >
+                        {crumb.label}
+                      </BreadcrumbPage>
+                    ) : crumb.onSelect ? (
+                      <BreadcrumbLink asChild>
+                        <button type="button" onClick={crumb.onSelect}>
+                          {crumb.label}
+                        </button>
+                      </BreadcrumbLink>
+                    ) : (
+                      <span>{crumb.label}</span>
+                    )}
+                  </BreadcrumbItem>
+                </Fragment>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+      {actions ? (
+        <div className="relative flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:w-auto">
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/src/components/tree/TreeBrowser.test.tsx b/frontend/src/components/tree/TreeBrowser.test.tsx
new file mode 100644
index 00000000..b0680589
--- /dev/null
+++ b/frontend/src/components/tree/TreeBrowser.test.tsx
@@ -0,0 +1,111 @@
+import { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => null,
+}));
+
+vi.mock('../../hooks', () => ({
+  useDarkTheme: () => [false],
+  useDebouncedValue: (value: unknown) => value,
+  useLoaderState: (initial: boolean) => useState(initial),
+  useMediaQuery: () => ({ isMobile: false }),
+  useOutsideAlerter: () => undefined,
+}));
+
+vi.mock('../../api/services/userService', () => ({
+  default: {
+    getDirectoryStructure: vi.fn(async () => ({
+      json: async () => ({
+        directory_structure: {
+          legal: { '2024': { 'msa.pdf': { type: 'pdf', size_bytes: 10 } } },
+        },
+      }),
+    })),
+    getDocumentChunks: vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ page: 1, per_page: 5, total: 0, chunks: [] }),
+    })),
+  },
+}));
+
+import TreeBrowser from './TreeBrowser';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('TreeBrowser path crumbs', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <TreeBrowser
+          docId="doc"
+          sourceName="Contracts"
+          onBackToDocuments={vi.fn()}
+          columnOrder="size-first"
+          topRightAction={null}
+        />,
+      );
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const openRow = async (name: string) => {
+    const row = Array.from(container.querySelectorAll('tr')).find(
+      (tr) => tr.querySelector('td')?.textContent?.trim() === name,
+    );
+    if (!row) throw new Error(`no row ${name}`);
+    await act(async () => row.click());
+  };
+
+  const crumbs = () =>
+    Array.from(container.querySelectorAll('[data-slot="breadcrumb-item"]')).map(
+      (el) => el.textContent,
+    );
+
+  const clickCrumb = async (label: string) => {
+    const link = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="breadcrumb-link"]',
+      ),
+    ).find((el) => el.textContent === label);
+    if (!link) throw new Error(`no crumb link ${label}`);
+    await act(async () => link.click());
+  };
+
+  it('returns to the root and to a parent folder from the crumbs', async () => {
+    await openRow('legal');
+    await openRow('2024');
+    expect(crumbs()).toEqual(['Contracts', 'legal', '2024']);
+
+    await clickCrumb('legal');
+    expect(crumbs()).toEqual(['Contracts', 'legal']);
+
+    await clickCrumb('Contracts');
+    expect(crumbs()).toEqual(['Contracts']);
+  });
+
+  it('a folder crumb in the chunk viewer returns to that folder', async () => {
+    await openRow('legal');
+    await openRow('2024');
+    await openRow('msa.pdf');
+    expect(crumbs()).toEqual(['Contracts', 'legal', '2024', 'msa.pdf']);
+
+    await clickCrumb('legal');
+    expect(crumbs()).toEqual(['Contracts', 'legal']);
+    expect(container.textContent).toContain('2024');
+  });
+});
diff --git a/frontend/src/components/tree/TreeBrowser.tsx b/frontend/src/components/tree/TreeBrowser.tsx
index 64ce9e3f..4e193a33 100644
--- a/frontend/src/components/tree/TreeBrowser.tsx
+++ b/frontend/src/components/tree/TreeBrowser.tsx
@@ -1,5 +1,4 @@
 import React, {
-  SyntheticEvent,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -11,16 +10,20 @@ import { useSelector } from 'react-redux';
 import { selectToken } from '../../preferences/preferenceSlice';
 import { formatBytes } from '../../utils/stringUtils';
 import userService from '../../api/services/userService';
-import ArrowLeft from '../../assets/arrow-left.svg';
-import EyeView from '../../assets/eye-view.svg';
-import FileIcon from '../../assets/file.svg';
-import FolderIcon from '../../assets/folder.svg';
-import ThreeDots from '../../assets/three-dots.svg';
+import { Eye, File, Folder } from 'lucide-react';
 import { useLoaderState, useOutsideAlerter } from '../../hooks';
 import Chunks from '../Chunks';
+import PathHeader from './PathHeader';
 import SkeletonLoader from '../SkeletonLoader';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
+import { cn, fieldFrame } from '@/lib/utils';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../ui/command';
 import {
   Table,
   TableBody,
@@ -30,19 +33,13 @@ import {
   TableHeader,
   TableRow,
 } from '../ui/table';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu';
+import { ActionMenu, type MenuOption } from '../ui/dropdown-menu';
 import type {
   DirectoryStructure,
   FileNode,
   RowMenuContext,
   SearchResult,
   TreeBrowserController,
-  TreeMenuOption,
 } from './types';
 
 /** Column ordering for the size/tokens pair. */
@@ -70,7 +67,7 @@ export interface TreeBrowserProps {
    * Builds the row action menu. Defaults to a single "View" option.
    * Wrappers can extend this with Delete, etc.
    */
-  getRowMenuOptions?: (ctx: RowMenuContext) => TreeMenuOption[];
+  getRowMenuOptions?: (ctx: RowMenuContext) => MenuOption[];
   /** Modals / overlays the wrapper wants rendered alongside the tree. */
   extraContent?: React.ReactNode;
   /**
@@ -91,6 +88,14 @@ export interface TreeBrowserProps {
   onCurrentPathChange?: (path: string[]) => void;
 }
 
+// The search field's frame: the pill Input look around a CommandInput
+// (38px, focus ring while the input has keyboard focus). CommandInput's row
+// is 36px with a bottom rule; pt-px + overflow-hidden clips that rule.
+const SEARCH_FRAME = cn(
+  fieldFrame,
+  'border-border has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 h-9.5 overflow-hidden rounded-full px-2 pt-px has-[input:focus-visible]:ring-3',
+);
+
 function calculateDirectoryStats(structure: DirectoryStructure): {
   totalSize: number;
   totalTokens: number;
@@ -397,20 +402,16 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     name: string,
     isFile: boolean,
     displayName?: string,
-  ): TreeMenuOption => ({
-    icon: EyeView,
+  ): MenuOption => ({
+    icon: Eye,
     label: t('settings.sources.view'),
-    onClick: (event: SyntheticEvent) => {
-      event.stopPropagation();
+    onClick: () => {
       if (isFile) {
         handleFileClick(name, displayName);
       } else {
         navigateToDirectory(name);
       }
     },
-    iconWidth: 18,
-    iconHeight: 18,
-    variant: 'default',
   });
 
   const resolveRowMenuOptions = (
@@ -418,7 +419,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     isFile: boolean,
     itemId: string,
     displayName?: string,
-  ): TreeMenuOption[] => {
+  ): MenuOption[] => {
     const defaultViewOption = buildDefaultViewOption(name, isFile, displayName);
     if (getRowMenuOptions) {
       return getRowMenuOptions({
@@ -438,44 +439,11 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
     itemId: string,
     displayName?: string,
   ) => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={(e) => e.stopPropagation()}
-          className="dark:hover:bg-muted h-[35px] w-6 shrink-0 p-0 hover:bg-[#EBEBEB]"
-          aria-label={t('settings.sources.menuAlt')}
-        >
-          <img
-            src={ThreeDots}
-            alt={t('settings.sources.menuAlt')}
-            className="opacity-60 hover:opacity-100"
-          />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[144px]">
-        {resolveRowMenuOptions(name, isFile, itemId, displayName).map(
-          (option, idx) => (
-            <DropdownMenuItem
-              key={idx}
-              variant={option.variant}
-              onSelect={(event) => {
-                option.onClick(event as unknown as SyntheticEvent);
-              }}
-            >
-              <img
-                src={option.icon}
-                alt=""
-                width={option.iconWidth ?? 16}
-                height={option.iconHeight ?? 16}
-              />
-              <span>{option.label}</span>
-            </DropdownMenuItem>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <ActionMenu
+      options={resolveRowMenuOptions(name, isFile, itemId, displayName)}
+      triggerLabel={t('settings.sources.menuAlt')}
+      className="shrink-0"
+    />
   );
 
   /**
@@ -533,12 +501,8 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
         ? [
             <TableRow key="parent-dir" onClick={navigateUp}>
               <TableCell width="40%" align="left">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 shrink-0"
-                  />
+                <div className="flex items-center gap-2">
+                  <Folder className="text-primary size-4 shrink-0" />
                   <span className="truncate">..</span>
                 </div>
               </TableCell>
@@ -563,12 +527,8 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
       return (
         <TableRow key={itemId} onClick={() => navigateToDirectory(name)}>
           <TableCell width="40%" align="left">
-            <div className="flex min-w-0 items-center">
-              <img
-                src={FolderIcon}
-                alt={t('settings.sources.folderAlt')}
-                className="mr-2 h-4 w-4 shrink-0"
-              />
+            <div className="flex min-w-0 items-center gap-2">
+              <Folder className="text-primary size-4 shrink-0" />
               <span className="truncate">{name}</span>
             </div>
           </TableCell>
@@ -594,12 +554,8 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
           onClick={() => handleFileClick(name, displayName)}
         >
           <TableCell width="40%" align="left">
-            <div className="flex min-w-0 items-center">
-              <img
-                src={FileIcon}
-                alt={t('settings.sources.fileAlt')}
-                className="mr-2 h-4 w-4 shrink-0"
-              />
+            <div className="flex min-w-0 items-center gap-2">
+              <File className="text-muted-foreground size-4 shrink-0" />
               <span className="truncate">{displayName}</span>
             </div>
           </TableCell>
@@ -619,110 +575,86 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
 
   const renderFileSearch = () => (
     <div className="relative w-52" ref={searchDropdownRef}>
-      <Input
-        type="text"
-        value={searchQuery}
-        onChange={(e) => {
-          setSearchQuery(e.target.value);
-          if (directoryStructure) {
-            setSearchResults(searchFiles(e.target.value, directoryStructure));
-          }
-        }}
-        placeholder={t('settings.sources.searchFiles')}
-        className={`h-[38px] px-4 py-2 ${searchQuery ? 'rounded-t-3xl' : 'rounded-3xl'}`}
-      />
-
-      {searchQuery && (
-        <div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-20 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-xl border border-t-0 shadow-lg transition-all duration-200">
-          <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
-            {searchResults.length === 0 ? (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                {t('settings.sources.noResults')}
-              </div>
-            ) : (
-              searchResults.map((result, index) => (
-                <div
-                  key={index}
-                  onClick={() => handleSearchSelect(result)}
-                  title={result.path}
-                  className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
-                    index !== searchResults.length - 1
-                      ? 'border-border dark:border-border border-b'
-                      : ''
-                  }`}
-                >
-                  <img
-                    src={result.isFile ? FileIcon : FolderIcon}
-                    alt={
-                      result.isFile
-                        ? t('settings.sources.fileAlt')
-                        : t('settings.sources.folderAlt')
-                    }
-                    className="mr-2 h-4 w-4 shrink-0"
-                  />
-                  <span className="flex-1 truncate text-sm">{result.name}</span>
-                </div>
-              ))
-            )}
-          </div>
+      {/* `contents`: the Command only scopes cmdk (the arrow keys move from
+          the input to the rows); the frame and the dropdown draw the look. */}
+      <Command shouldFilter={false} className="contents">
+        <div className={SEARCH_FRAME}>
+          <CommandInput
+            value={searchQuery}
+            onValueChange={(value) => {
+              setSearchQuery(value);
+              if (directoryStructure) {
+                setSearchResults(searchFiles(value, directoryStructure));
+              }
+            }}
+            placeholder={t('settings.sources.searchFiles')}
+          />
         </div>
-      )}
+
+        {searchQuery && (
+          <div className="border-border bg-popover text-popover-foreground absolute top-full right-0 left-0 z-20 mt-1 w-full overflow-hidden rounded-xl border shadow-md">
+            <CommandList className="max-h-[calc(100vh-200px)] overscroll-contain">
+              {searchResults.length === 0 ? (
+                <CommandEmpty>{t('settings.sources.noResults')}</CommandEmpty>
+              ) : (
+                <CommandGroup>
+                  {searchResults.map((result) => (
+                    <CommandItem
+                      key={result.path}
+                      value={result.path}
+                      title={result.path}
+                      onSelect={() => handleSearchSelect(result)}
+                    >
+                      {result.isFile ? (
+                        <File />
+                      ) : (
+                        <Folder className="text-primary" />
+                      )}
+                      <span className="min-w-0 flex-1 truncate">
+                        {result.name}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </div>
+        )}
+      </Command>
     </div>
   );
 
+  // Crumb n opens the folder made of the first n path segments (0 = root).
+  const openPathDepth = useCallback((depth: number) => {
+    setSelectedFile(null);
+    setCurrentPath((prev) => prev.slice(0, depth));
+  }, []);
+
   const renderPathNavigation = () => (
-    <div className="mb-0 flex min-h-[38px] flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex w-full items-center sm:w-auto">
-        <Button
-          type="button"
-          variant="outline"
-          size="icon-sm"
-          className="text-muted-foreground mr-3 h-[29px] w-[29px] rounded-full p-2 dark:border-0"
-          onClick={handleBackNavigation}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </Button>
-
-        <div className="flex flex-wrap items-center">
-          <span className="text-primary font-semibold wrap-break-word">
-            {sourceName}
-          </span>
-          {currentPath.length > 0 && (
-            <>
-              <span className="text-muted-foreground mx-1 shrink-0">/</span>
-              {currentPath.map((dir, index) => (
-                <React.Fragment key={index}>
-                  <span className="dark:text-foreground wrap-break-word text-gray-700">
-                    {dir}
-                  </span>
-                  {index < currentPath.length - 1 && (
-                    <span className="text-muted-foreground mx-1 shrink-0">
-                      /
-                    </span>
-                  )}
-                </React.Fragment>
-              ))}
-            </>
+    <PathHeader
+      root={{
+        label: sourceName,
+        onSelect: currentPath.length > 0 ? () => openPathDepth(0) : undefined,
+      }}
+      segments={currentPath.map((dir, index) => ({
+        label: dir,
+        onSelect:
+          index < currentPath.length - 1
+            ? () => openPathDepth(index + 1)
+            : undefined,
+      }))}
+      onBack={handleBackNavigation}
+      backLabel={t('settings.sources.back')}
+      actions={
+        <>
+          {statusLabel && (
+            <div className="text-muted-foreground text-sm">{statusLabel}</div>
           )}
-          {selectedFile && (
-            <>
-              <span className="text-muted-foreground mx-1 shrink-0">/</span>
-              <span className="dark:text-foreground wrap-break-word text-gray-700">
-                {selectedFile.name}
-              </span>
-            </>
-          )}
-        </div>
-      </div>
-
-      <div className="relative mt-2 flex w-full flex-row flex-nowrap items-center justify-end gap-2 sm:mt-0 sm:w-auto">
-        {statusLabel && (
-          <div className="text-muted-foreground text-sm">{statusLabel}</div>
-        )}
-        {renderFileSearch()}
-        {topRightAction}
-      </div>
-    </div>
+          {renderFileSearch()}
+          {topRightAction}
+        </>
+      }
+    />
   );
 
   const currentDirectory = getCurrentDirectory();
@@ -740,6 +672,7 @@ const TreeBrowser: React.FC<TreeBrowserProps> = ({
               displayPath={[...currentPath, selectedFile.name].join('/')}
               onFileSearch={handleFileSearch}
               onFileSelect={handleFileSelect}
+              onPathSelect={openPathDepth}
             />
           </div>
         </div>
diff --git a/frontend/src/components/tree/types.ts b/frontend/src/components/tree/types.ts
index e0f67014..9f3e980f 100644
--- a/frontend/src/components/tree/types.ts
+++ b/frontend/src/components/tree/types.ts
@@ -1,4 +1,4 @@
-import { SyntheticEvent } from 'react';
+import type { MenuOption } from '../ui/dropdown-menu';
 
 export interface FileNode {
   type?: string;
@@ -18,15 +18,6 @@ export interface SearchResult {
   isFile: boolean;
 }
 
-export type TreeMenuOption = {
-  icon: string;
-  label: string;
-  onClick: (event: SyntheticEvent) => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 /**
  * Row context passed to consumers' getRowMenuOptions callbacks so they
  * can build per-row menus (e.g. add a Delete option for upload trees).
@@ -37,7 +28,7 @@ export interface RowMenuContext {
   itemId: string;
   displayName?: string;
   /** Default "View" option already provided by TreeBrowser. */
-  defaultViewOption: TreeMenuOption;
+  defaultViewOption: MenuOption;
 }
 
 /**
diff --git a/frontend/src/components/ui/accordion.test.tsx b/frontend/src/components/ui/accordion.test.tsx
new file mode 100644
index 00000000..2e446f9c
--- /dev/null
+++ b/frontend/src/components/ui/accordion.test.tsx
@@ -0,0 +1,56 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './accordion';
+
+function renderAccordion(): string {
+  return renderToStaticMarkup(
+    <Accordion type="single" collapsible>
+      <AccordionItem value="audit">
+        <AccordionTrigger>Recent activity</AccordionTrigger>
+        <AccordionContent>Rows</AccordionContent>
+      </AccordionItem>
+    </Accordion>,
+  );
+}
+
+/** The class attribute of the element carrying the given data-slot. */
+function slotClasses(html: string, slot: string): string {
+  const tag = new RegExp(`<[^>]*data-slot="${slot}"[^>]*>`).exec(html)?.[0];
+  return /class="([^"]*)"/.exec(tag ?? '')?.[1] ?? '';
+}
+
+describe('AccordionTrigger', () => {
+  it('carries its own inset and section-heading type', () => {
+    const classes = slotClasses(renderAccordion(), 'accordion-trigger');
+    expect(classes).toContain('px-4');
+    expect(classes).toContain('py-3');
+    expect(classes).toContain('text-sm');
+    expect(classes).toContain('font-medium');
+  });
+
+  it('draws the focus ring inside the item, which clips outside it', () => {
+    const classes = slotClasses(renderAccordion(), 'accordion-trigger');
+    expect(classes).toContain('focus-visible:ring-3');
+    expect(classes).toContain('focus-visible:ring-inset');
+    expect(classes).not.toContain('focus-visible:ring-2');
+  });
+
+  it('keeps the chevron in muted-foreground in dark mode', () => {
+    const html = renderAccordion();
+    expect(html).toContain('text-muted-foreground');
+    expect(html).not.toContain('dark:invert');
+  });
+});
+
+describe('AccordionItem', () => {
+  it('draws no shadow of its own, like a card', () => {
+    const classes = slotClasses(renderAccordion(), 'accordion-item');
+    expect(classes).not.toMatch(/\bshadow-/);
+  });
+});
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
index 85d9a075..ac13564d 100644
--- a/frontend/src/components/ui/accordion.tsx
+++ b/frontend/src/components/ui/accordion.tsx
@@ -1,8 +1,8 @@
 import { ChevronDownIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cn, focusRing } from '@/lib/utils';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
 
 function Accordion({
   ...props
@@ -17,7 +17,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn('overflow-hidden shadow-xs', className)}
+      className={cn('overflow-hidden', className)}
       {...props}
     />
   );
@@ -33,14 +33,14 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          'focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 text-left transition-all outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          `${focusRing} flex flex-1 items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium transition-colors outline-none focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180`,
           className,
         )}
         {...props}
       >
         {children}
         <ChevronDownIcon
-          className="text-muted-foreground h-5 w-5 shrink-0 transition-transform duration-200 dark:invert"
+          className="text-muted-foreground size-5 shrink-0 transition-transform duration-200"
           aria-hidden="true"
         />
       </AccordionPrimitive.Trigger>
diff --git a/frontend/src/components/ui/alert.test.tsx b/frontend/src/components/ui/alert.test.tsx
new file mode 100644
index 00000000..b15dc26c
--- /dev/null
+++ b/frontend/src/components/ui/alert.test.tsx
@@ -0,0 +1,134 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const alertRole = () => container.firstElementChild!.getAttribute('role');
+
+describe('Alert', () => {
+  it.each(['default', 'destructive', 'warning', 'info'] as const)(
+    'announces %s assertively',
+    async (variant) => {
+      await render(
+        <Alert variant={variant}>
+          <AlertDescription>Notice</AlertDescription>
+        </Alert>,
+      );
+      expect(alertRole()).toBe('alert');
+    },
+  );
+
+  it('announces success politely', async () => {
+    await render(
+      <Alert variant="success">
+        <AlertDescription>Done</AlertDescription>
+      </Alert>,
+    );
+    expect(alertRole()).toBe('status');
+  });
+
+  it('lets the caller override the role', async () => {
+    await render(<Alert variant="destructive" role="status" />);
+    expect(alertRole()).toBe('status');
+  });
+
+  it('marks its parts with data-slot and the variant', async () => {
+    await render(
+      <Alert variant="warning">
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>Notice</AlertDescription>
+      </Alert>,
+    );
+    const alert = document.querySelector('[data-slot="alert"]')!;
+    expect(alert.getAttribute('data-variant')).toBe('warning');
+    expect(alert.querySelector('[data-slot="alert-title"]')).not.toBeNull();
+    expect(
+      alert.querySelector('[data-slot="alert-description"]'),
+    ).not.toBeNull();
+  });
+});
+
+describe('Alert layout', () => {
+  const classesOf = async (element: React.ReactElement) => {
+    await render(element);
+    return container.firstElementChild!.className.split(' ');
+  };
+
+  it('puts the icon in its own column, centred on the text block', async () => {
+    const classes = await classesOf(
+      <Alert variant="destructive">
+        <svg />
+        <AlertDescription>Failed</AlertDescription>
+      </Alert>,
+    );
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'grid',
+        'has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]',
+        '[&>svg]:self-center',
+        '[&>:not(svg)]:col-start-2',
+      ]),
+    );
+    expect(classes).not.toContain('[&>svg]:absolute');
+  });
+
+  it('takes the icon colour from the text, so it always matches', async () => {
+    const classes = await classesOf(<Alert variant="destructive" />);
+    expect(classes).toContain('[&>svg]:text-current');
+    expect(classes.some((c) => c.startsWith('[&>svg]:text-destructive'))).toBe(
+      false,
+    );
+  });
+
+  it('spans the icon across a title and its description', async () => {
+    const classes = await classesOf(<Alert variant="warning" />);
+    expect(classes).toContain(
+      'has-[>[data-slot=alert-title]]:[&>svg]:row-span-2',
+    );
+  });
+});
+
+describe('Alert surface', () => {
+  it('has 14px corners, like a popover', async () => {
+    await render(
+      <Alert variant="warning">
+        <AlertDescription>Notice</AlertDescription>
+      </Alert>,
+    );
+    const classes = container.firstElementChild!.className.split(' ');
+    expect(classes).toContain('rounded-xl');
+    expect(classes).not.toContain('rounded-lg');
+  });
+
+  it('variant="neutral" is the quiet default box', async () => {
+    await render(
+      <Alert variant="neutral">
+        <AlertDescription>Not evaluated</AlertDescription>
+      </Alert>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.dataset.variant).toBe('neutral');
+    expect(el.className).toContain('bg-background');
+  });
+});
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
index 4def013a..f8ca1cb9 100644
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -4,13 +4,21 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  // The icon has its own 16px column and sits centred on the text block
+  // (spanning a title and its description); everything else goes in the
+  // text column. The icon takes the text colour, so the two always match.
+  'relative grid w-full grid-cols-[0_1fr] gap-y-1 rounded-xl border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:self-center [&>svg]:text-current has-[>[data-slot=alert-title]]:[&>svg]:row-span-2 [&>:not(svg)]:col-start-2',
   {
     variants: {
       variant: {
         default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        // The grey box, by name (a guardrail "not evaluated" outcome); the
+        // same classes as default, which is the component's own base tone.
+        neutral: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 bg-destructive/10 text-destructive',
+        success: 'border-success/50 bg-success/10 text-success',
+        warning: 'border-warning/50 bg-warning/10 text-warning',
+        info: 'border-info/50 bg-info/10 text-info',
       },
     },
     defaultVariants: {
@@ -19,41 +27,44 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = 'Alert';
+function Alert({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      data-variant={variant}
+      // A success notice confirms rather than interrupts, so it is polite.
+      role={variant === 'success' ? 'status' : 'alert'}
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = 'AlertTitle';
+function AlertTitle({ className, ...props }: React.ComponentProps<'h5'>) {
+  return (
+    <h5
+      data-slot="alert-title"
+      className={cn('leading-none font-medium tracking-tight', className)}
+      {...props}
+    />
+  );
+}
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('text-sm [&_p]:leading-relaxed', className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = 'AlertDescription';
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn('text-sm [&_p]:leading-relaxed', className)}
+      {...props}
+    />
+  );
+}
 
 export { Alert, AlertTitle, AlertDescription };
diff --git a/frontend/src/components/ui/avatar.test.tsx b/frontend/src/components/ui/avatar.test.tsx
new file mode 100644
index 00000000..29abda9a
--- /dev/null
+++ b/frontend/src/components/ui/avatar.test.tsx
@@ -0,0 +1,45 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Avatar, avatarVariants } from './avatar';
+
+describe('Avatar variants', () => {
+  it('adds no sizing or radius unless asked, so image avatars are unchanged', () => {
+    const html = renderToStaticMarkup(<Avatar src="/a.png" />);
+    expect(html).toContain('class="shrink-0"');
+  });
+
+  it('sizes and shapes the initials box', () => {
+    const classes = avatarVariants({
+      size: 'default',
+      shape: 'circle',
+      variant: 'primary',
+    });
+    expect(classes).toContain('size-9');
+    expect(classes).toContain('rounded-full');
+    expect(classes).toContain('bg-secondary');
+    expect(classes).toContain('text-secondary-foreground');
+    expect(classes).not.toContain('dark:bg-primary/20');
+    expect(classes).toContain('items-center');
+  });
+
+  it('renders children instead of the image when given', () => {
+    const html = renderToStaticMarkup(
+      <Avatar size="xs" shape="square" variant="muted">
+        LK
+      </Avatar>,
+    );
+    expect(html).toContain('LK');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('rounded-md');
+  });
+});
+
+describe('Avatar sizes', () => {
+  it("shares Button's size names at the same pixels", () => {
+    expect(avatarVariants({ size: 'xs' })).toContain('size-7');
+    expect(avatarVariants({ size: 'sm' })).toContain('size-8');
+    expect(avatarVariants({ size: 'default' })).toContain('size-9');
+    expect(avatarVariants({ size: 'lg' })).toContain('size-10');
+  });
+});
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index fcf22994..aedd1275 100644
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,17 +1,49 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import Robot from '../../assets/robot.svg';
+import Robot from '@/assets/robot.svg';
 import { cn } from '@/lib/utils';
 
-type AvatarProps = {
-  src?: string | null;
-  alt?: string;
-  fallbackSrc?: string;
-  className?: string;
-  imgClassName?: string;
-  children?: React.ReactNode;
-};
+const avatarVariants = cva('shrink-0', {
+  variants: {
+    // `none` keeps the historical behaviour where the image sets the size.
+    // The rest share Button's names at Button's heights (xs 28, sm 32,
+    // default 36, lg 40), so an avatar beside a button reads one scale.
+    size: {
+      none: '',
+      xs: 'flex size-7 items-center justify-center overflow-hidden text-xs',
+      sm: 'flex size-8 items-center justify-center overflow-hidden text-sm',
+      default:
+        'flex size-9 items-center justify-center overflow-hidden text-sm',
+      lg: 'flex size-10 items-center justify-center overflow-hidden text-base',
+    },
+    shape: {
+      none: '',
+      circle: 'rounded-full',
+      square: 'rounded-md',
+    },
+    // Background for initials or icon fallbacks rendered via `children`.
+    variant: {
+      default: '',
+      primary: 'bg-secondary text-secondary-foreground font-medium',
+      muted: 'bg-muted-foreground/15 text-foreground font-medium',
+    },
+  },
+  defaultVariants: {
+    size: 'none',
+    shape: 'none',
+    variant: 'default',
+  },
+});
+
+type AvatarProps = React.ComponentProps<'div'> &
+  VariantProps<typeof avatarVariants> & {
+    src?: string | null;
+    alt?: string;
+    fallbackSrc?: string;
+    imgClassName?: string;
+  };
 
 function Avatar({
   src,
@@ -20,6 +52,10 @@ function Avatar({
   className,
   imgClassName,
   children,
+  size = 'none',
+  shape = 'none',
+  variant = 'default',
+  ...props
 }: AvatarProps) {
   const resolvedSrc = src && src.trim() !== '' ? src : fallbackSrc;
   const [currentSrc, setCurrentSrc] = useState(resolvedSrc);
@@ -32,7 +68,14 @@ function Avatar({
   }, [src, fallbackSrc]);
 
   return (
-    <div data-slot="avatar" className={cn('shrink-0', className)}>
+    <div
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+      data-variant={variant}
+      className={cn(avatarVariants({ size, shape, variant }), className)}
+      {...props}
+    >
       {children ?? (
         <img
           src={currentSrc}
@@ -49,4 +92,4 @@ function Avatar({
   );
 }
 
-export { Avatar };
+export { Avatar, avatarVariants };
diff --git a/frontend/src/components/ui/badge.test.tsx b/frontend/src/components/ui/badge.test.tsx
new file mode 100644
index 00000000..91071ce7
--- /dev/null
+++ b/frontend/src/components/ui/badge.test.tsx
@@ -0,0 +1,52 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Badge, badgeVariants } from './badge';
+
+describe('Badge', () => {
+  it('is a soft brand pill by default', () => {
+    const html = renderToStaticMarkup(<Badge>Beta</Badge>);
+    expect(html).toContain('rounded-full');
+    expect(html).toContain('bg-secondary');
+    expect(html).toContain('text-secondary-foreground');
+    expect(html).not.toContain('dark:bg-primary/20');
+    expect(html).toContain('data-variant="default"');
+  });
+
+  it.each([
+    ['success', 'text-success'],
+    ['warning', 'text-warning'],
+    ['destructive', 'text-destructive'],
+    ['info', 'text-info'],
+    ['neutral', 'text-muted-foreground'],
+  ] as const)('variant %s uses its semantic token', (variant, cls) => {
+    expect(badgeVariants({ variant })).toContain(cls);
+  });
+
+  it('never uses raw palette colours', () => {
+    for (const variant of [
+      'default',
+      'neutral',
+      'success',
+      'warning',
+      'destructive',
+      'info',
+      'outline',
+    ] as const) {
+      expect(badgeVariants({ variant })).not.toMatch(
+        /\b(bg|text|border)-(red|green|amber|yellow|blue|gray|purple)-\d+/,
+      );
+    }
+  });
+});
+
+describe('Badge status fills', () => {
+  it.each(['success', 'warning', 'destructive', 'info'] as const)(
+    '%s is /10 in both themes, like Alert',
+    (variant) => {
+      const classes = badgeVariants({ variant }).split(' ');
+      expect(classes).toContain(`bg-${variant}/10`);
+      expect(classes.some((c) => c.startsWith('dark:bg-'))).toBe(false);
+    },
+  );
+});
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 00000000..176c2970
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-secondary text-secondary-foreground',
+        neutral: 'bg-muted-foreground/15 text-muted-foreground',
+        success: 'bg-success/10 text-success',
+        warning: 'bg-warning/10 text-warning',
+        destructive: 'bg-destructive/10 text-destructive',
+        info: 'bg-info/10 text-info',
+        outline: 'border-border text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+/**
+ * Small status or category pill. Use the `variant` for meaning (success,
+ * warning, destructive, info, neutral) instead of raw palette classes.
+ */
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : 'span';
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/breadcrumb.test.tsx b/frontend/src/components/ui/breadcrumb.test.tsx
new file mode 100644
index 00000000..5f6d9b9c
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb.test.tsx
@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { BreadcrumbLink } from './breadcrumb';
+
+describe('BreadcrumbLink', () => {
+  it('shows the standard focus ring on an anchor', () => {
+    const html = renderToStaticMarkup(
+      <BreadcrumbLink href="/agents">Agents</BreadcrumbLink>,
+    );
+    expect(html).toContain('focus-visible:ring-3');
+    expect(html).toContain('focus-visible:ring-ring/50');
+    expect(html).toContain('outline-none');
+  });
+
+  it('passes the focus ring through asChild to a button crumb', () => {
+    const html = renderToStaticMarkup(
+      <BreadcrumbLink asChild>
+        <button type="button">My Drive</button>
+      </BreadcrumbLink>,
+    );
+    expect(html).toMatch(/<button[^>]*focus-visible:ring-3/);
+  });
+});
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
index 54a4076e..42f17397 100644
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { Slot } from 'radix-ui';
 
-import { cn } from '@/lib/utils';
+import { cn, focusRing } from '@/lib/utils';
 
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
@@ -43,7 +43,10 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn('hover:text-foreground transition-colors', className)}
+      className={cn(
+        `${focusRing} hover:text-foreground rounded-sm transition-colors outline-none`,
+        className,
+      )}
       {...props}
     />
   );
@@ -56,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('text-foreground font-normal', className)}
+      className={cn('text-foreground truncate font-normal', className)}
       {...props}
     />
   );
diff --git a/frontend/src/components/ui/button.test.tsx b/frontend/src/components/ui/button.test.tsx
new file mode 100644
index 00000000..fa54f098
--- /dev/null
+++ b/frontend/src/components/ui/button.test.tsx
@@ -0,0 +1,300 @@
+import type React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Button, buttonVariants } from './button';
+
+/** The class attribute of the rendered root element. */
+function renderedClasses(element: React.ReactElement): string {
+  const html = renderToStaticMarkup(element);
+  return /class="([^"]*)"/.exec(html)?.[1] ?? '';
+}
+
+describe('Button variants', () => {
+  it('renders a rectangular medium button by default', () => {
+    const html = renderToStaticMarkup(<Button>Save</Button>);
+    expect(html).toContain('rounded-md');
+    expect(html).toContain('h-9');
+    expect(html).toContain('data-shape="default"');
+  });
+
+  it('shape="pill" swaps the radius and widens the padding', () => {
+    // Rendered classes go through cn(), which resolves the compound
+    // variant's px-5 against the default size's px-4.
+    const classes = renderedClasses(<Button shape="pill">Save</Button>);
+    expect(classes).toContain('rounded-full');
+    expect(classes).not.toContain('rounded-md');
+    expect(classes).toContain('px-5');
+    expect(classes).not.toMatch(/(^|\s)px-4(\s|$)/);
+  });
+
+  it('large pills get the widest padding', () => {
+    const classes = buttonVariants({ shape: 'pill', size: 'lg' });
+    expect(classes).toContain('px-6');
+    expect(classes).toContain('h-10');
+  });
+
+  it('size="xs" is a compact text-xs button', () => {
+    const classes = renderedClasses(<Button size="xs">Save</Button>);
+    expect(classes).toContain('h-7');
+    expect(classes).toContain('text-xs');
+    expect(classes).not.toMatch(/(^|\s)text-sm(\s|$)/);
+  });
+
+  it('exposes muted and brand-outline variants', () => {
+    expect(buttonVariants({ variant: 'ghost-muted' })).toContain(
+      'text-muted-foreground',
+    );
+    expect(buttonVariants({ variant: 'outline-primary' })).toContain(
+      'border-primary',
+    );
+  });
+
+  it('variant="ghost-destructive" is a muted icon that warns red on hover', () => {
+    const classes = buttonVariants({ variant: 'ghost-destructive' }).split(' ');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('hover:text-destructive');
+    expect(classes).toContain('hover:bg-accent');
+    expect(classes).not.toContain('dark:hover:bg-accent/50');
+  });
+
+  it('size="inline" adds no height or padding, so a link sits mid-sentence', () => {
+    const classes = buttonVariants({ variant: 'link', size: 'inline' }).split(
+      ' ',
+    );
+    expect(classes).toContain('h-auto');
+    expect(classes).toContain('p-0');
+    expect(classes.some((c) => /^h-\d/.test(c))).toBe(false);
+    expect(classes.some((c) => /^px-\d/.test(c))).toBe(false);
+  });
+
+  it('lets callers pass layout classes through', () => {
+    const html = renderToStaticMarkup(
+      <Button className="mt-4 w-full">Save</Button>,
+    );
+    expect(html).toContain('mt-4');
+    expect(html).toContain('w-full');
+  });
+
+  it('variant="sidebar-item" is a full-width nav row, not a centred button', () => {
+    const classes = renderedClasses(
+      <Button variant="sidebar-item" aria-current="page">
+        Settings
+      </Button>,
+    ).split(' ');
+    for (const cls of [
+      'hover:bg-sidebar-accent',
+      'aria-[current=page]:bg-sidebar-accent',
+      'justify-start',
+      'gap-2.5',
+      'pl-3',
+      'pr-0',
+      'rounded-full',
+      'font-normal',
+    ]) {
+      expect(classes).toContain(cls);
+    }
+    // The default radius, centring and weight must not survive the merge.
+    // (The size's px-4 may remain; pl-3/pr-0 are emitted after padding-inline
+    // in Tailwind v4, so they win in CSS.)
+    for (const cls of ['rounded-md', 'justify-center', 'font-medium']) {
+      expect(classes).not.toContain(cls);
+    }
+  });
+
+  it('variant="tab" is an underline tab: square, muted, with the active state on data-active', () => {
+    const classes = renderedClasses(<Button variant="tab">My Files</Button>);
+    expect(classes).toContain('rounded-none');
+    expect(classes).not.toContain('rounded-md');
+    expect(classes).toContain('border-b-2');
+    expect(classes).toContain('border-transparent');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('data-[active=true]:border-primary');
+    expect(classes).toContain('data-[active=true]:text-foreground');
+    expect(classes).not.toContain('hover:bg-accent');
+  });
+
+  it('variant="tab" size="inline" keeps a 4px gap above the underline', () => {
+    const classes = renderedClasses(
+      <Button variant="tab" size="inline">
+        Logs
+      </Button>,
+    );
+    expect(classes).toContain('h-auto');
+    expect(classes).toContain('pb-1');
+  });
+
+  it('size="field" is the 38px form-row height shared with Input and SelectTrigger field', () => {
+    const classes = renderedClasses(<Button size="field">Add</Button>).split(
+      ' ',
+    );
+    expect(classes).toContain('h-9.5');
+    expect(classes).toContain('px-4');
+    expect(classes).not.toContain('h-9');
+  });
+
+  it('a field pill starts its text 20px in, like the Input and Select pills', () => {
+    const classes = renderedClasses(
+      <Button variant="combobox" size="field" shape="pill">
+        Select sources
+      </Button>,
+    ).split(' ');
+    expect(classes).toContain('h-9.5');
+    expect(classes).toContain('rounded-full');
+    expect(classes).toContain('px-5');
+    expect(classes).not.toContain('px-4');
+  });
+
+  it('variant="section-toggle" is a foreground title with a primary chevron and no ring of its own', () => {
+    const classes = renderedClasses(
+      <Button variant="section-toggle" size="sm">
+        Advanced
+      </Button>,
+    ).split(' ');
+    expect(classes).toContain('text-foreground');
+    expect(classes).toContain('decoration-primary');
+    expect(classes).toContain('hover:underline');
+    // Rendered HTML escapes `&>`, so read this one off the variant string.
+    expect(buttonVariants({ variant: 'section-toggle' }).split(' ')).toContain(
+      '[&>svg]:text-primary',
+    );
+    // The host panel draws the focus ring, so the button's own is off.
+    expect(classes).toContain('focus-visible:ring-0');
+    expect(classes).not.toContain('focus-visible:ring-3');
+    expect(classes).not.toContain('text-primary');
+  });
+
+  it('variant="ghost-on-accent" hovers with a foreground tint, not accent', () => {
+    // It sits on rows that are already bg-accent, where an accent hover
+    // would be invisible.
+    const classes = buttonVariants({ variant: 'ghost-on-accent' }).split(' ');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('hover:text-foreground');
+    expect(classes).toContain('hover:bg-foreground/15');
+    expect(classes).toContain('dark:hover:bg-foreground/20');
+    expect(classes).not.toContain('hover:bg-accent');
+  });
+
+  it('variant="ghost-destructive-on-accent" hovers with a destructive tint', () => {
+    const classes = buttonVariants({
+      variant: 'ghost-destructive-on-accent',
+    }).split(' ');
+    expect(classes).toContain('text-muted-foreground');
+    expect(classes).toContain('hover:text-destructive');
+    expect(classes).toContain('hover:bg-destructive/15');
+    expect(classes).toContain('dark:hover:bg-destructive/20');
+    expect(classes).not.toContain('hover:bg-accent');
+  });
+});
+
+describe('Button loading', () => {
+  const parse = (element: React.ReactElement) => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(element);
+    return host.firstElementChild as HTMLButtonElement;
+  };
+
+  it('disables the button and marks it busy', () => {
+    const button = parse(<Button loading>Save</Button>);
+    expect(button.disabled).toBe(true);
+    expect(button.getAttribute('aria-busy')).toBe('true');
+    expect(button.hasAttribute('data-loading')).toBe(true);
+  });
+
+  it('keeps the label in place, hidden, so the width holds', () => {
+    const button = parse(
+      <Button loading size="lg" shape="pill">
+        Create token
+      </Button>,
+    );
+    const label = button.querySelector('span.invisible')!;
+    expect(label.textContent).toBe('Create token');
+    expect(label.className).toContain('contents');
+    expect(button.className).toContain('relative');
+  });
+
+  it('centres a 16px spinner over the label', () => {
+    const button = parse(<Button loading>Save</Button>);
+    const overlay = button.querySelector('span.absolute')!;
+    expect(overlay.className).toContain('inset-0');
+    const spinner = overlay.querySelector('[data-slot="spinner"]')!;
+    expect(spinner.getAttribute('data-size')).toBe('xs');
+    expect(spinner.className).toContain('size-4');
+    expect(spinner.className).not.toContain('size-5');
+  });
+
+  it('renders plainly when not loading', () => {
+    const button = parse(<Button loading={false}>Save</Button>);
+    expect(button.disabled).toBe(false);
+    expect(button.hasAttribute('aria-busy')).toBe(false);
+    expect(button.innerHTML).toBe('Save');
+  });
+});
+
+describe('Button loading with an icon', () => {
+  it('keeps the icon padding while the label is wrapped', () => {
+    const html = renderToStaticMarkup(
+      <Button loading size="lg" shape="pill">
+        <svg />
+        Download
+      </Button>,
+    );
+    const host = document.createElement('div');
+    host.innerHTML = html;
+    const button = host.firstElementChild as HTMLButtonElement;
+    // The label wrapper is marked, and every icon-padding rule also matches an
+    // svg one level down inside it, so the width doesn't grow.
+    expect(
+      button.querySelector('[data-slot="button-label"]')?.querySelector('svg'),
+    ).not.toBeNull();
+    const iconRules = button.className
+      .split(' ')
+      .filter((c) => c.startsWith('has-['));
+    expect(iconRules.length).toBeGreaterThan(0);
+    for (const rule of iconRules) {
+      expect(rule).toContain('>[data-slot=button-label]>svg');
+    }
+  });
+});
+
+describe('Button dark hover', () => {
+  it.each(['ghost', 'ghost-muted', 'ghost-destructive'] as const)(
+    '%s hovers to solid accent in both themes',
+    (variant) => {
+      const classes = buttonVariants({ variant }).split(' ');
+      expect(classes).toContain('hover:bg-accent');
+      expect(classes).not.toContain('dark:hover:bg-accent/50');
+    },
+  );
+});
+
+describe('Button combobox text size', () => {
+  it.each(['default', 'field', 'lg'] as const)(
+    'combobox %s is 16px on phones, 14px from md',
+    (size) => {
+      const classes = buttonVariants({ variant: 'combobox', size }).split(' ');
+      expect(classes).toEqual(
+        expect.arrayContaining(['text-base', 'md:text-sm']),
+      );
+    },
+  );
+
+  it('combobox sm stays 14px', () => {
+    const classes = buttonVariants({ variant: 'combobox', size: 'sm' }).split(
+      ' ',
+    );
+    expect(classes).not.toContain('text-base');
+  });
+});
+
+describe('Button size="icon"', () => {
+  it('draws an unsized glyph at 20px in its 36px square', () => {
+    const classes = buttonVariants({ size: 'icon' });
+    expect(classes).toContain('size-9');
+    expect(classes).toContain("[&_svg:not([class*='size-'])]:size-5");
+    const html = renderToStaticMarkup(<Button size="icon">x</Button>);
+    expect(html).not.toContain(
+      '[&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4',
+    );
+  });
+});
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 6bac0ae2..71357365 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,39 +1,120 @@
 import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { Spinner } from '@/components/ui/spinner';
+import { cn, destructiveRing, focusRing, invalidState } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  `${focusRing} ${invalidState} inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring`,
+  // Icon padding (has-[>svg]) also matches an svg inside the invisible label
+  // wrapper that `loading` adds, so a busy icon button keeps its width.
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        'destructive-outline':
-          'border border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        destructive: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${destructiveRing} dark:bg-destructive/60`,
+        'destructive-outline': `border border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground ${destructiveRing}`,
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50',
+        'outline-primary':
+          'border border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        'ghost-muted':
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
+        // Icon actions that remove something: muted at rest, red on hover.
+        'ghost-destructive':
+          'text-muted-foreground hover:bg-accent hover:text-destructive',
+        // The same two on a row that is already bg-accent or
+        // bg-sidebar-accent (a highlighted Command item, a hovered card or
+        // sidebar row), where an accent hover would be invisible.
+        'ghost-on-accent':
+          'text-muted-foreground hover:bg-foreground/15 hover:text-foreground dark:hover:bg-foreground/20',
+        'ghost-destructive-on-accent':
+          'text-muted-foreground hover:bg-destructive/15 hover:text-destructive dark:hover:bg-destructive/20',
         link: 'text-primary underline-offset-4 hover:underline',
+        // Popover combobox triggers: mirrors SelectTrigger so the two sit
+        // side by side. Set data-placeholder while empty to mute the text.
+        // Rows in the navigation sidebar (Help, Settings, section links).
+        // Pair with aria-current="page" for the active row; the compound
+        // variant below sets the row's own padding and radius.
+        'sidebar-item':
+          'text-foreground hover:bg-sidebar-accent aria-[current=page]:bg-sidebar-accent',
+        combobox:
+          'border border-input bg-card font-normal shadow-xs hover:bg-accent data-placeholder:text-muted-foreground',
+        // Underline tabs (FilePicker's drives, the agent page sub-nav). Mark the
+        // current tab with data-active; the 2px border is always there so the
+        // row height doesn't move. The compound variant squares the corners.
+        tab: 'border-b-2 border-transparent text-muted-foreground hover:text-foreground hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground',
+        // A section panel's disclosure header (NewAgent's Advanced,
+        // Guardrails): a foreground title with a primary chevron and a primary
+        // underline on hover. It draws no ring of its own; the panel around it
+        // shows focus with has-[[data-variant=section-toggle]:focus-visible].
+        'section-toggle':
+          'text-foreground underline-offset-4 decoration-primary hover:underline focus-visible:ring-0 [&>svg]:text-primary',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
+        default: 'h-9 px-4 py-2 has-[>svg,>[data-slot=button-label]>svg]:px-3',
+        xs: "h-7 gap-1 px-2 text-xs has-[>svg,>[data-slot=button-label]>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: 'h-8 gap-1.5 px-3 has-[>svg,>[data-slot=button-label]>svg]:px-2.5',
+        lg: 'h-10 px-6 has-[>svg,>[data-slot=button-label]>svg]:px-4',
+        // The form-row height (38px), shared with Input default/field and
+        // SelectTrigger field, for pickers and buttons that sit among fields.
+        field: 'h-9.5 px-4 has-[>svg,>[data-slot=button-label]>svg]:px-3',
+        icon: "size-9 [&_svg:not([class*='size-'])]:size-5",
+        'icon-xs': 'size-7',
         'icon-sm': 'size-8',
         'icon-lg': 'size-10',
+        // A link mid-sentence: no height or padding, so it wraps with the text.
+        inline: 'h-auto p-0',
+      },
+      shape: {
+        default: 'rounded-md',
+        pill: 'rounded-full',
       },
     },
+    compoundVariants: [
+      // Pills read as cramped at the rectangular paddings, so widen them.
+      {
+        shape: 'pill',
+        size: 'default',
+        class: 'px-5 has-[>svg,>[data-slot=button-label]>svg]:px-4',
+      },
+      {
+        shape: 'pill',
+        size: 'lg',
+        class: 'px-6 has-[>svg,>[data-slot=button-label]>svg]:px-5',
+      },
+      // Text starts 21px in, like the Input and SelectTrigger pills beside it.
+      {
+        shape: 'pill',
+        size: 'field',
+        class: 'px-5 has-[>svg,>[data-slot=button-label]>svg]:px-4',
+      },
+      // A combobox is a field: 16px text on phones (like Input, so the row
+      // reads one size), 14px from md. The small sizes stay 14px.
+      {
+        variant: 'combobox',
+        size: ['default', 'field', 'lg'],
+        class: 'text-base md:text-sm',
+      },
+      // Tabs sit on a baseline rule, so they never round off.
+      { variant: 'tab', class: 'rounded-none' },
+      // A padding-free tab (the agent sub-nav) keeps 4px above its underline.
+      { variant: 'tab', size: 'inline', class: 'pb-1' },
+      // Nav rows line their icons up on the left edge at every size/shape.
+      {
+        variant: 'sidebar-item',
+        class:
+          'justify-start gap-2.5 rounded-full pr-0 pl-3 font-normal has-[>svg,>[data-slot=button-label]>svg]:pr-0 has-[>svg,>[data-slot=button-label]>svg]:pl-3',
+      },
+    ],
     defaultVariants: {
       variant: 'default',
       size: 'default',
+      shape: 'default',
     },
   },
 );
@@ -42,22 +123,52 @@ function Button({
   className,
   variant = 'default',
   size = 'default',
+  shape = 'default',
   asChild = false,
+  loading = false,
+  disabled,
+  children,
   ...props
 }: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    /**
+     * Disables the button and draws a 16px spinner over its label. The label
+     * stays in the layout (invisible), so the width doesn't jump.
+     */
+    loading?: boolean;
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';
 
   return (
     <Comp
       data-slot="button"
       data-variant={variant}
       data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
+      data-shape={shape}
+      data-loading={loading ? '' : undefined}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      className={cn(
+        buttonVariants({ variant, size, shape }),
+        loading && 'relative',
+        className,
+      )}
       {...props}
-    />
+    >
+      {loading && !asChild ? (
+        <>
+          <span data-slot="button-label" className="invisible contents">
+            {children}
+          </span>
+          <span className="absolute inset-0 flex items-center justify-center">
+            <Spinner size="xs" />
+          </span>
+        </>
+      ) : (
+        children
+      )}
+    </Comp>
   );
 }
 
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
index 318da8a3..fa7f1b78 100644
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -39,7 +39,7 @@ function Calendar({
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString('default', { month: 'short' }),
+          date.toLocaleString('en-GB', { month: 'short' }),
         ...formatters,
       }}
       classNames={{
@@ -72,24 +72,24 @@ function Calendar({
           defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
-          'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+          'border-input has-focus:border-ring has-focus:ring-ring/50 relative rounded-md border shadow-xs has-focus:ring-3',
           defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
-          'absolute inset-0 bg-popover opacity-0',
+          'bg-popover absolute inset-0 opacity-0',
           defaultClassNames.dropdown,
         ),
         caption_label: cn(
           'font-medium select-none',
           captionLayout === 'label'
             ? 'text-sm'
-            : 'flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+            : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5',
           defaultClassNames.caption_label,
         ),
         month_grid: 'w-full border-collapse',
         weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          'flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none',
+          'text-muted-foreground flex-1 rounded-md text-xs font-normal select-none',
           defaultClassNames.weekday,
         ),
         week: cn('mt-2 flex w-full', defaultClassNames.week),
@@ -98,7 +98,7 @@ function Calendar({
           defaultClassNames.week_number_header,
         ),
         week_number: cn(
-          'text-[0.8rem] text-muted-foreground select-none',
+          'text-muted-foreground text-xs select-none',
           defaultClassNames.week_number,
         ),
         day: cn(
@@ -109,13 +109,13 @@ function Calendar({
           defaultClassNames.day,
         ),
         range_start: cn(
-          'rounded-l-md bg-accent',
+          'bg-accent rounded-l-md',
           defaultClassNames.range_start,
         ),
         range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),
         today: cn(
-          'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
           defaultClassNames.today,
         ),
         outside: cn(
@@ -209,7 +209,9 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        /* eslint-disable-next-line shadcn/require-static-classes -- react-day-picker
+           hands these names back from getDefaultClassNames() at runtime. */
         defaultClassNames.day,
         className,
       )}
diff --git a/frontend/src/components/ui/card.test.tsx b/frontend/src/components/ui/card.test.tsx
new file mode 100644
index 00000000..6e78a6e8
--- /dev/null
+++ b/frontend/src/components/ui/card.test.tsx
@@ -0,0 +1,95 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  cardVariants,
+} from './card';
+
+describe('Card', () => {
+  it('is a bordered card surface by default', () => {
+    const html = renderToStaticMarkup(<Card>Body</Card>);
+    expect(html).toContain('rounded-2xl');
+    expect(html).toContain('bg-card');
+    expect(html).toContain('p-4');
+    expect(html).toContain('data-variant="outline"');
+  });
+
+  it('destructive tone is the status soft fill and border on any variant', () => {
+    const html = renderToStaticMarkup(
+      <Card variant="subtle" tone="destructive">
+        Danger
+      </Card>,
+    );
+    expect(html).toContain('border-destructive/50');
+    expect(html).toContain('bg-destructive/10');
+    expect(html).not.toContain('bg-background');
+    expect(html).not.toContain('border-border');
+    expect(html).toContain('data-tone="destructive"');
+  });
+
+  it('destructive tone turns muted text inside it to foreground', () => {
+    const classes = cardVariants({ tone: 'destructive' });
+    expect(classes).toContain('[&_.text-muted-foreground]:text-foreground');
+  });
+
+  it('CardTitle renders the heading level passed in as', () => {
+    const html = renderToStaticMarkup(<CardTitle as="h2">Tools</CardTitle>);
+    expect(html).toMatch(/^<h2[^>]*data-slot="card-title"/);
+    expect(renderToStaticMarkup(<CardTitle>Tools</CardTitle>)).toMatch(/^<div/);
+  });
+
+  it('filled variant drops the border', () => {
+    const classes = cardVariants({ variant: 'filled' });
+    expect(classes).toContain('bg-muted');
+    expect(classes).not.toMatch(/(^|\s)border(\s|$)/);
+  });
+
+  it('interactive cards get hover, focus and selected styles', () => {
+    const html = renderToStaticMarkup(
+      <Card interactive selected asChild>
+        <button type="button">Pick me</button>
+      </Card>,
+    );
+    expect(html).toContain('<button');
+    expect(html).toContain('cursor-pointer');
+    expect(html).toContain('data-selected="true"');
+    expect(html).toContain('focus-visible:ring-3');
+  });
+
+  it('header places the action in the trailing column', () => {
+    const html = renderToStaticMarkup(
+      <CardHeader>
+        <CardTitle>Arc53</CardTitle>
+        <CardAction>menu</CardAction>
+      </CardHeader>,
+    );
+    expect(html).toContain('grid-cols-[1fr_auto]');
+    expect(html).toContain('col-start-2');
+  });
+
+  it('exposes padding and interactive as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Card padding="none" interactive>
+        Body
+      </Card>,
+    );
+    expect(html).toContain('data-padding="none"');
+    expect(html).toContain('data-interactive="true"');
+  });
+
+  it('CardDescription is 14px by default and 12px relaxed at size xs', () => {
+    expect(
+      renderToStaticMarkup(<CardDescription>d</CardDescription>),
+    ).toContain('text-muted-foreground text-sm');
+    const xs = renderToStaticMarkup(
+      <CardDescription size="xs">d</CardDescription>,
+    );
+    expect(xs).toContain('text-xs leading-relaxed');
+    expect(xs).not.toContain('text-sm');
+  });
+});
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
new file mode 100644
index 00000000..11a88eae
--- /dev/null
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn, focusRing } from '@/lib/utils';
+
+const cardVariants = cva(
+  'text-card-foreground flex flex-col gap-3 rounded-2xl text-sm transition-colors',
+  {
+    variants: {
+      variant: {
+        // Bordered surface: lists of entities, panels, headers.
+        outline: 'border-border bg-card border',
+        // Filled, no border: tiles on a card-coloured page (sources, tools).
+        filled: 'bg-muted',
+        // Bordered on a muted page background.
+        subtle: 'border-border bg-background border',
+      },
+      tone: {
+        default: '',
+        // Danger zones and a red stat tile: the status soft fill and border.
+        // Listed after `variant` so twMerge lets it win on any surface. Muted
+        // text fails AA on the red fill, so it reads as foreground inside.
+        destructive:
+          'border-destructive/50 bg-destructive/10 border [&_.text-muted-foreground]:text-foreground',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-3',
+        default: 'p-4',
+        lg: 'p-6',
+      },
+      interactive: {
+        false: '',
+        // Whole card is a target: picker tiles, navigable list items.
+        true: `${focusRing} hover:border-primary/40 hover:bg-accent focus-visible:border-ring cursor-pointer text-left outline-none data-[selected=true]:border-primary data-[selected=true]:bg-primary/5`,
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      tone: 'default',
+      padding: 'default',
+      interactive: false,
+    },
+  },
+);
+
+type CardProps = React.ComponentProps<'div'> &
+  VariantProps<typeof cardVariants> & {
+    /** Render the card as its child, e.g. a `<button>` or `<Link>`. */
+    asChild?: boolean;
+    /** Highlights an interactive card as the current choice. */
+    selected?: boolean;
+  };
+
+function Card({
+  className,
+  variant = 'outline',
+  tone = 'default',
+  padding = 'default',
+  interactive = false,
+  selected,
+  asChild = false,
+  ...props
+}: CardProps) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot="card"
+      data-variant={variant}
+      data-tone={tone === 'default' ? undefined : tone}
+      data-padding={padding}
+      data-interactive={interactive || undefined}
+      data-selected={selected || undefined}
+      className={cn(
+        cardVariants({ variant, tone, padding, interactive }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Title row with an optional trailing action (menu, chevron, button). */
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'grid auto-rows-min grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type CardTitleProps = React.ComponentProps<'div'> & {
+  /** The heading level in the page outline; a plain `div` by default. */
+  as?: 'div' | 'h2' | 'h3' | 'h4';
+};
+
+function CardTitle({ className, as: Comp = 'div', ...props }: CardTitleProps) {
+  return (
+    <Comp
+      data-slot="card-title"
+      className={cn('text-foreground leading-snug font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+/** A muted line under a CardTitle; `size="xs"` for tiles (12px, relaxed). */
+function CardDescription({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'xs' }) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn(
+        'text-muted-foreground',
+        size === 'xs' ? 'text-xs leading-relaxed' : 'text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Slot in the header's top-right corner. */
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn(className)} {...props} />;
+}
+
+/** Meta row or controls at the bottom; pushes to the end of tall cards. */
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'text-muted-foreground mt-auto flex items-center gap-2 text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+  cardVariants,
+};
+export type { CardProps };
diff --git a/frontend/src/components/ui/checkbox.test.tsx b/frontend/src/components/ui/checkbox.test.tsx
new file mode 100644
index 00000000..36896dbb
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.test.tsx
@@ -0,0 +1,63 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Checkbox } from './checkbox';
+import { FormField } from './form-field';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('Checkbox', () => {
+  it('is a 16px themed box with a 6px radius by default', () => {
+    const box = render(<Checkbox aria-label="agents:read" />)
+      .firstElementChild as HTMLElement;
+    expect(box.getAttribute('role')).toBe('checkbox');
+    expect(box.className).toContain('size-4');
+    expect(box.className).toContain('rounded-sm');
+    expect(box.className).toContain('border-input');
+    expect(box.className).toContain('data-[state=checked]:bg-primary');
+    expect(box.className).toContain('focus-visible:ring-3');
+  });
+
+  it('size="sm" is 14px with a 12px check', () => {
+    const host = render(<Checkbox size="sm" checked aria-label="Filled" />);
+    const box = host.firstElementChild as HTMLElement;
+    expect(box.className).toContain('size-3.5');
+    expect(box.className).not.toMatch(/(^|\s)size-4(\s|$)/);
+    expect(host.querySelector('svg')?.getAttribute('class')).toContain(
+      'size-3',
+    );
+  });
+
+  it('shows the check only while checked', () => {
+    expect(
+      render(<Checkbox checked aria-label="a" />).querySelector('svg'),
+    ).not.toBeNull();
+    expect(
+      render(<Checkbox checked={false} aria-label="a" />).querySelector('svg'),
+    ).toBeNull();
+  });
+
+  it('takes its id and invalid state from a FormField', () => {
+    const host = render(
+      <FormField label="Stream output to user" error="Required">
+        <Checkbox />
+      </FormField>,
+    );
+    const box = host.querySelector('[role="checkbox"]')!;
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(box.id);
+    expect(box.getAttribute('aria-invalid')).toBe('true');
+  });
+});
+
+describe('Checkbox tick colour', () => {
+  it('keeps its own tick colour inside a parent that greys svgs', () => {
+    const host = render(<Checkbox size="sm" checked aria-label="Picked" />);
+    expect(host.querySelector('svg')?.getAttribute('class')).toContain(
+      'text-current',
+    );
+  });
+});
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..9290af02
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,58 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckIcon } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, focusRing, invalidState } from '@/lib/utils';
+
+const checkboxVariants = cva(
+  `${focusRing} ${invalidState} peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring shrink-0 rounded-sm border shadow-xs transition-shadow outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      size: {
+        // 16px, for rows of options (token scopes, parsed spec actions).
+        default: 'size-4',
+        // 14px, for dense table cells (ToolConfig's "Filled by LLM").
+        sm: 'size-3.5',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+/** A themed checkbox (Radix), so it looks the same on every OS and theme. */
+function Checkbox(checkboxProps: CheckboxProps) {
+  const {
+    className,
+    size = 'default',
+    ...props
+  } = useFormFieldControl(checkboxProps);
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      data-size={size}
+      className={cn(checkboxVariants({ size }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        {/* text-current: a parent that greys un-coloured svgs (CommandItem,
+            SelectItem) must not grey the tick. */}
+        <CheckIcon
+          className={
+            size === 'sm' ? 'size-3 text-current' : 'size-3.5 text-current'
+          }
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox, checkboxVariants };
+export type { CheckboxProps };
diff --git a/frontend/src/components/ui/command.test.tsx b/frontend/src/components/ui/command.test.tsx
new file mode 100644
index 00000000..a8772601
--- /dev/null
+++ b/frontend/src/components/ui/command.test.tsx
@@ -0,0 +1,148 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+describe('Command', () => {
+  it('is a plain command surface by default', async () => {
+    await render(<Command />);
+    const cmd = document.querySelector('[data-slot="command"]')!;
+    expect(cmd.getAttribute('data-variant')).toBe('default');
+    expect(cmd.className).not.toContain('[[cmdk-item]]:py-3');
+  });
+
+  it('variant="palette" carries the palette spacing for input and rows', async () => {
+    await render(<Command variant="palette" />);
+    const cmd = document.querySelector('[data-slot="command"]')!;
+    expect(cmd.getAttribute('data-variant')).toBe('palette');
+    expect(cmd.className).toContain(
+      '**:data-[slot=command-input-wrapper]:h-12',
+    );
+    expect(cmd.className).toContain('**:[[cmdk-item]]:py-3');
+    expect(cmd.className).toContain('**:[[cmdk-item]]:px-2');
+  });
+});
+
+describe('CommandDialog', () => {
+  it('renders one palette Command and forwards commandProps to it', async () => {
+    await render(
+      <CommandDialog
+        open
+        showCloseButton={false}
+        commandProps={{ shouldFilter: false, label: 'Search' }}
+      >
+        <CommandInput
+          placeholder="Search"
+          value="zzz"
+          onValueChange={() => {}}
+        />
+        <CommandList>
+          <CommandItem value="a">Fuel surcharge policy</CommandItem>
+        </CommandList>
+      </CommandDialog>,
+    );
+    const commands = document.querySelectorAll('[data-slot="command"]');
+    expect(commands).toHaveLength(1);
+    expect(commands[0].getAttribute('data-variant')).toBe('palette');
+    // shouldFilter={false} reached cmdk: an item that doesn't match the query
+    // stays rendered.
+    expect(document.body.textContent).toContain('Fuel surcharge policy');
+  });
+
+  it('CommandItem checked marks the chosen item apart from the hover highlight', async () => {
+    await render(
+      <Command>
+        <CommandList>
+          <CommandItem value="a" checked>
+            Default
+          </CommandItem>
+          <CommandItem value="b">Strict</CommandItem>
+        </CommandList>
+      </Command>,
+    );
+    const items = document.querySelectorAll('[data-slot="command-item"]');
+    expect(items[0].getAttribute('data-checked')).toBe('true');
+    expect(items[0].className).toContain('data-[checked=true]:bg-secondary');
+    expect(items[1].hasAttribute('data-checked')).toBe(false);
+    expect(items[1].hasAttribute('checked')).toBe(false);
+  });
+
+  it('keeps the checked tint while highlighted and rings it in primary', async () => {
+    await render(
+      <Command>
+        <CommandList>
+          <CommandItem value="a" checked>
+            Default
+          </CommandItem>
+        </CommandList>
+      </Command>,
+    );
+    const classes = document
+      .querySelector('[data-slot="command-item"]')!
+      .className.split(' ');
+    // Stacked data attributes out-rank the plain data-[selected=true] accent.
+    for (const cls of [
+      'data-[checked=true]:data-[selected=true]:bg-secondary',
+      'data-[checked=true]:data-[selected=true]:text-secondary-foreground',
+      'data-[checked=true]:data-[selected=true]:ring-1',
+      'data-[checked=true]:data-[selected=true]:ring-inset',
+      'data-[checked=true]:data-[selected=true]:ring-primary',
+    ]) {
+      expect(classes).toContain(cls);
+    }
+    // The ordinary highlight is still there for unchecked rows.
+    expect(classes).toContain('data-[selected=true]:bg-accent');
+  });
+});
+
+describe('CommandInput', () => {
+  it('is 16px on phones, fills its wrapper and selects in brand', async () => {
+    await render(
+      <Command>
+        <CommandInput placeholder="Search" />
+        <CommandList>
+          <CommandItem>One</CommandItem>
+        </CommandList>
+      </Command>,
+    );
+    const classes = document
+      .querySelector('[data-slot="command-input"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'text-base',
+        'md:text-sm',
+        'h-full',
+        'selection:bg-primary',
+      ]),
+    );
+    expect(classes).not.toContain('h-10');
+  });
+});
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
index 6bff16e4..e8e7e903 100644
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -11,15 +11,25 @@ import {
 } from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+// The search-palette spacing: a 48px input row and roomier rows. Shared by
+// CommandDialog and any palette rendered elsewhere (e.g. in a bottom sheet),
+// so both look the same.
+const PALETTE_CLASSES =
+  '**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3';
+
+type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {
+  /** `palette` is the search-palette spacing CommandDialog uses. */
+  variant?: 'default' | 'palette';
+};
+
+function Command({ className, variant = 'default', ...props }: CommandProps) {
   return (
     <CommandPrimitive
       data-slot="command"
+      data-variant={variant}
       className={cn(
         'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl',
+        variant === 'palette' && PALETTE_CLASSES,
         className,
       )}
       {...props}
@@ -33,12 +43,18 @@ function CommandDialog({
   children,
   className,
   showCloseButton = true,
+  commandProps,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
   className?: string;
   showCloseButton?: boolean;
+  /**
+   * Props for the palette's Command, e.g. `shouldFilter={false}` when the
+   * results come from a server search, or a controlled `value`.
+   */
+  commandProps?: Omit<CommandProps, 'variant' | 'children' | 'className'>;
 }) {
   return (
     <Dialog {...props}>
@@ -50,7 +66,7 @@ function CommandDialog({
         className={cn('overflow-hidden p-0', className)}
         showCloseButton={showCloseButton}
       >
-        <Command className="**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3">
+        <Command variant="palette" {...commandProps}>
           {children}
         </Command>
       </DialogContent>
@@ -71,7 +87,8 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          // 16px on phones like Input, so iOS doesn't zoom on focus.
+          'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-full w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className,
         )}
         {...props}
@@ -88,7 +105,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto',
         className,
       )}
       {...props}
@@ -97,12 +114,13 @@ function CommandList({
 }
 
 function CommandEmpty({
+  className,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn('py-6 text-center text-sm', className)}
       {...props}
     />
   );
@@ -137,15 +155,26 @@ function CommandSeparator({
   );
 }
 
+/**
+ * A row in a Command list. `checked` marks the item that is currently chosen
+ * (the active prompt in a picker) with a brand tint, apart from the
+ * `data-selected` highlight cmdk moves with the pointer and arrow keys. A
+ * checked row that is also highlighted keeps its tint and gains a 1px
+ * primary ring (the stacked data attributes out-rank the plain accent).
+ */
 function CommandItem({
   className,
+  checked,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: React.ComponentProps<typeof CommandPrimitive.Item> & {
+  checked?: boolean;
+}) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
+      data-checked={checked ? 'true' : undefined}
       className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[checked=true]:bg-secondary data-[checked=true]:text-secondary-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[checked=true]:data-[selected=true]:bg-secondary data-[checked=true]:data-[selected=true]:text-secondary-foreground data-[checked=true]:data-[selected=true]:ring-primary [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[checked=true]:data-[selected=true]:ring-1 data-[checked=true]:data-[selected=true]:ring-inset [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/description-list.test.tsx b/frontend/src/components/ui/description-list.test.tsx
new file mode 100644
index 00000000..2e760a4e
--- /dev/null
+++ b/frontend/src/components/ui/description-list.test.tsx
@@ -0,0 +1,48 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { DescriptionItem, DescriptionList } from './description-list';
+
+describe('DescriptionList', () => {
+  it('puts labels in an 8rem column by default', () => {
+    const html = renderToStaticMarkup(
+      <DescriptionList>
+        <DescriptionItem label="Status">Success</DescriptionItem>
+      </DescriptionList>,
+    );
+    expect(html).toContain('<dl');
+    expect(html).toContain('grid-cols-[minmax(0,8rem)_minmax(0,1fr)]');
+    expect(html).toContain('text-sm');
+    expect(html).toContain('<dt class="text-muted-foreground"');
+    expect(html).toContain('text-foreground min-w-0 break-words');
+  });
+
+  it('sets xs text and a mono value', () => {
+    const html = renderToStaticMarkup(
+      <DescriptionList size="xs">
+        <DescriptionItem label="Endpoint" mono>
+          https://x
+        </DescriptionItem>
+      </DescriptionList>,
+    );
+    expect(html).toContain('text-xs');
+    expect(html).toContain('font-mono');
+  });
+
+  it('justifies values right, optionally in two columns', () => {
+    const one = renderToStaticMarkup(
+      <DescriptionList layout="justified">
+        <DescriptionItem label="Tokens">1,204</DescriptionItem>
+      </DescriptionList>,
+    );
+    expect(one).toContain('flex flex-col gap-2');
+    expect(one).toContain('flex items-start justify-between gap-4');
+    expect(one).toContain('text-right tabular-nums');
+    const two = renderToStaticMarkup(
+      <DescriptionList layout="justified" columns={2}>
+        <DescriptionItem label="Tokens">1,204</DescriptionItem>
+      </DescriptionList>,
+    );
+    expect(two).toContain('grid grid-cols-2 gap-x-6 gap-y-2');
+  });
+});
diff --git a/frontend/src/components/ui/description-list.tsx b/frontend/src/components/ui/description-list.tsx
new file mode 100644
index 00000000..5a8c74f8
--- /dev/null
+++ b/frontend/src/components/ui/description-list.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type DescriptionListContextValue = { layout: 'columns' | 'justified' };
+
+const DescriptionListContext = React.createContext<DescriptionListContextValue>(
+  { layout: 'columns' },
+);
+
+type DescriptionListProps = React.ComponentProps<'dl'> & {
+  /**
+   * `columns`: an 8rem label column beside the values (drawers, detail
+   * panels). `justified`: label left, value right-aligned (a phone card, a
+   * stats dialog).
+   */
+  layout?: 'columns' | 'justified';
+  size?: 'sm' | 'xs';
+  /** `justified` only: two label/value pairs per line. */
+  columns?: 1 | 2;
+};
+
+/** Key/value rows in a `<dl>`. */
+function DescriptionList({
+  layout = 'columns',
+  size = 'sm',
+  columns = 1,
+  className,
+  ...props
+}: DescriptionListProps) {
+  return (
+    <DescriptionListContext.Provider value={{ layout }}>
+      <dl
+        data-slot="description-list"
+        data-layout={layout}
+        className={cn(
+          size === 'xs' ? 'text-xs' : 'text-sm',
+          layout === 'columns'
+            ? 'grid grid-cols-[minmax(0,8rem)_minmax(0,1fr)] gap-x-3 gap-y-1'
+            : columns === 2
+              ? 'grid grid-cols-2 gap-x-6 gap-y-2'
+              : 'flex flex-col gap-2',
+          className,
+        )}
+        {...props}
+      />
+    </DescriptionListContext.Provider>
+  );
+}
+
+type DescriptionItemProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+  label: React.ReactNode;
+  children?: React.ReactNode;
+  /** Monospace value: ids, URLs, hashes. */
+  mono?: boolean;
+};
+
+/** One label/value pair. */
+function DescriptionItem({
+  label,
+  mono = false,
+  className,
+  children,
+  ...props
+}: DescriptionItemProps) {
+  const { layout } = React.useContext(DescriptionListContext);
+
+  return (
+    <div
+      data-slot="description-item"
+      className={cn(
+        // `contents` keeps a valid <dl> group without breaking the grid.
+        layout === 'columns'
+          ? 'contents'
+          : 'flex items-start justify-between gap-4',
+        className,
+      )}
+      {...props}
+    >
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd
+        className={cn(
+          'text-foreground min-w-0 break-words',
+          layout === 'justified' && 'text-right tabular-nums',
+          mono && 'font-mono',
+        )}
+      >
+        {children}
+      </dd>
+    </div>
+  );
+}
+
+export { DescriptionItem, DescriptionList };
+export type { DescriptionItemProps, DescriptionListProps };
diff --git a/frontend/src/components/ui/dialog.test.tsx b/frontend/src/components/ui/dialog.test.tsx
new file mode 100644
index 00000000..da9f4a46
--- /dev/null
+++ b/frontend/src/components/ui/dialog.test.tsx
@@ -0,0 +1,129 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './dialog';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+describe('DialogContent', () => {
+  it('uses the Modal surface: card fill, 16px corners, modal shadow, no border', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const classes = document
+      .querySelector('[data-slot="dialog-content"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['bg-card', 'rounded-2xl', 'shadow-modal']),
+    );
+    expect(classes).not.toContain('bg-background');
+    expect(classes).not.toContain('rounded-lg');
+    expect(classes).not.toContain('border');
+  });
+
+  it('dims the page behind with the blurred overlay Modal uses', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const classes = document
+      .querySelector('[data-slot="dialog-overlay"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-black/25',
+        'backdrop-blur-xs',
+        'dark:bg-black/50',
+      ]),
+    );
+    expect(classes).not.toContain('bg-black/50');
+  });
+});
+
+describe('DialogContent matches Modal', () => {
+  it('pads 32px, titles at 20px and spaces the footer 12px', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+          <DialogFooter>
+            <button type="button">Cancel</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+    const content = document
+      .querySelector('[data-slot="dialog-content"]')!
+      .className.split(' ');
+    expect(content).toContain('p-8');
+    expect(content).not.toContain('p-6');
+    const title = document
+      .querySelector('[data-slot="dialog-title"]')!
+      .className.split(' ');
+    expect(title).toEqual(expect.arrayContaining(['text-xl', 'leading-tight']));
+    expect(title).not.toContain('text-lg');
+    const footer = document
+      .querySelector('[data-slot="dialog-footer"]')!
+      .className.split(' ');
+    expect(footer).toContain('gap-3');
+    expect(footer).not.toContain('gap-2');
+  });
+});
+
+describe('DialogContent layout', () => {
+  it("is Modal's capped flex column with a left-aligned header", async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogHeader>
+            <DialogTitle>Search</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>,
+    );
+    const content = document
+      .querySelector('[data-slot="dialog-content"]')!
+      .className.split(' ');
+    expect(content).toEqual(
+      expect.arrayContaining(['flex', 'flex-col', 'max-h-[85dvh]']),
+    );
+    expect(content).not.toContain('grid');
+    const header = document
+      .querySelector('[data-slot="dialog-header"]')!
+      .className.split(' ');
+    expect(header).toContain('text-left');
+    expect(header).not.toContain('text-center');
+  });
+});
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index f529dfea..bd3cade0 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { XIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { cn, overlayScrim } from '@/lib/utils';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
 function Dialog({
@@ -38,7 +37,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 ${overlayScrim}`,
         className,
       )}
       {...props}
@@ -60,19 +59,22 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          'bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 shadow-modal fixed top-1/2 left-1/2 z-50 flex max-h-[85dvh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl p-8 duration-200 outline-none sm:max-w-lg',
           className,
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
+          <DialogPrimitive.Close asChild>
+            <Button
+              variant="ghost-muted"
+              size="icon-sm"
+              aria-label="Close"
+              className="absolute top-2 right-2"
+            >
+              <XIcon />
+            </Button>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
@@ -84,7 +86,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn('flex flex-col gap-2 text-left', className)}
       {...props}
     />
   );
@@ -95,7 +97,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        'flex flex-col-reverse gap-3 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -110,7 +112,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn('text-xl leading-tight font-semibold', className)}
       {...props}
     />
   );
diff --git a/frontend/src/components/ui/dropdown-menu.test.tsx b/frontend/src/components/ui/dropdown-menu.test.tsx
new file mode 100644
index 00000000..129db538
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu.test.tsx
@@ -0,0 +1,111 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Pencil, Trash2 } from 'lucide-react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ActionMenu, type MenuOption } from './dropdown-menu';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const options = (onEdit = vi.fn(), onDelete = vi.fn()): MenuOption[] => [
+  { icon: Pencil, label: 'Edit', onClick: onEdit },
+  { icon: Trash2, label: 'Delete', variant: 'destructive', onClick: onDelete },
+];
+
+const trigger = () =>
+  document.querySelector<HTMLButtonElement>(
+    '[data-slot="dropdown-menu-trigger"]',
+  )!;
+const items = () =>
+  Array.from(
+    document.querySelectorAll<HTMLElement>('[data-slot="dropdown-menu-item"]'),
+  );
+
+describe('ActionMenu', () => {
+  it('renders a labelled ghost-on-accent icon trigger', async () => {
+    await render(
+      <ActionMenu options={options()} triggerLabel="Agent actions" />,
+    );
+    expect(trigger().getAttribute('aria-label')).toBe('Agent actions');
+    expect(trigger().getAttribute('data-variant')).toBe('ghost-on-accent');
+    expect(trigger().getAttribute('data-size')).toBe('icon-xs');
+    expect(trigger().querySelector('svg')).not.toBeNull();
+  });
+
+  it('passes layout classes, disabled and a test id to the trigger', async () => {
+    await render(
+      <ActionMenu
+        options={options()}
+        triggerLabel="Menu"
+        className="absolute top-3 right-3"
+        triggerTestId="menu-button-1"
+        disabled
+      />,
+    );
+    expect(trigger().className).toContain('top-3');
+    expect(trigger().disabled).toBe(true);
+    expect(trigger().getAttribute('data-testid')).toBe('menu-button-1');
+  });
+
+  it('keeps a trigger click from reaching a clickable parent', async () => {
+    const onCard = vi.fn();
+    await render(
+      <div onClick={onCard}>
+        <ActionMenu options={options()} triggerLabel="Menu" />
+      </div>,
+    );
+    await act(async () => trigger().click());
+    expect(onCard).not.toHaveBeenCalled();
+  });
+
+  it('renders one item per option with its icon and variant', async () => {
+    await render(<ActionMenu options={options()} triggerLabel="Menu" open />);
+    const [edit, del] = items();
+    expect(items()).toHaveLength(2);
+    expect(edit.textContent).toBe('Edit');
+    expect(edit.querySelector('svg')).not.toBeNull();
+    expect(del.getAttribute('data-variant')).toBe('destructive');
+  });
+
+  it('calls onClick on select without the click reaching the parent', async () => {
+    const onCard = vi.fn();
+    const onEdit = vi.fn();
+    await render(
+      <div onClick={onCard}>
+        <ActionMenu options={options(onEdit)} triggerLabel="Menu" open />
+      </div>,
+    );
+    await act(async () => items()[0].click());
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    expect(onCard).not.toHaveBeenCalled();
+  });
+
+  it('marks a disabled option', async () => {
+    await render(
+      <ActionMenu
+        options={[{ label: 'Export', onClick: vi.fn(), disabled: true }]}
+        triggerLabel="Menu"
+        open
+      />,
+    );
+    expect(items()[0].hasAttribute('data-disabled')).toBe(true);
+  });
+});
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 083d9963..48b23dec 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,8 +1,16 @@
 import * as React from 'react';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CircleIcon,
+  EllipsisVertical,
+  type LucideIcon,
+} from 'lucide-react';
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 function DropdownMenu({
   ...props
@@ -40,7 +48,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-200 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border p-1 shadow-md',
           className,
         )}
         {...props}
@@ -72,7 +80,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/15 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive! relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -228,7 +236,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-200 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
         className,
       )}
       {...props}
@@ -236,7 +244,99 @@ function DropdownMenuSubContent({
   );
 }
 
+/** One row of an ActionMenu. */
+type MenuOption = {
+  label: string;
+  onClick: (event: Event) => void;
+  icon?: LucideIcon;
+  variant?: 'default' | 'destructive';
+  disabled?: boolean;
+};
+
+const stopPropagation = (event: React.SyntheticEvent) =>
+  event.stopPropagation();
+
+/**
+ * The three-dots menu on a card, tile or row: an EllipsisVertical icon
+ * trigger and one item per option, icon first.
+ *
+ * Clicks and keys on the trigger and the menu stop propagating, because the
+ * menu usually sits inside a clickable card and a portal still bubbles
+ * through the React tree. The trigger is `ghost-on-accent`: most hosts turn
+ * bg-accent while the pointer is on them.
+ *
+ * @param options The menu rows.
+ * @param triggerLabel The trigger's accessible name.
+ * @param className Layout classes for the trigger (position, margin).
+ * @param triggerTestId A `data-testid` for the trigger.
+ */
+function ActionMenu({
+  options,
+  triggerLabel,
+  align = 'end',
+  open,
+  onOpenChange,
+  disabled,
+  className,
+  triggerTestId,
+}: {
+  options: MenuOption[];
+  triggerLabel: string;
+  align?: 'start' | 'center' | 'end';
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  triggerTestId?: string;
+}) {
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <Tooltip>
+        {/* Menu trigger outermost, so the button keeps its data-slot. */}
+        <DropdownMenuTrigger asChild>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost-on-accent"
+              size="icon-xs"
+              aria-label={triggerLabel}
+              disabled={disabled}
+              data-testid={triggerTestId}
+              className={className}
+              onClick={stopPropagation}
+              onKeyDown={stopPropagation}
+            >
+              <EllipsisVertical aria-hidden="true" />
+            </Button>
+          </TooltipTrigger>
+        </DropdownMenuTrigger>
+        <TooltipContent>{triggerLabel}</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent
+        align={align}
+        className="min-w-36"
+        onClick={stopPropagation}
+        onKeyDown={stopPropagation}
+      >
+        {options.map((option) => (
+          <DropdownMenuItem
+            key={option.label}
+            variant={option.variant}
+            disabled={option.disabled}
+            onSelect={(event) => option.onClick(event)}
+          >
+            {option.icon && <option.icon aria-hidden="true" />}
+            <span>{option.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export {
+  ActionMenu,
+  type MenuOption,
   DropdownMenu,
   DropdownMenuPortal,
   DropdownMenuTrigger,
diff --git a/frontend/src/components/ui/dropzone.test.tsx b/frontend/src/components/ui/dropzone.test.tsx
new file mode 100644
index 00000000..83dbbfbd
--- /dev/null
+++ b/frontend/src/components/ui/dropzone.test.tsx
@@ -0,0 +1,67 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Dropzone } from './dropzone';
+import { FormField } from './form-field';
+
+describe('Dropzone', () => {
+  it('renders the default prompt as a dashed card target', () => {
+    const html = renderToStaticMarkup(<Dropzone onDrop={vi.fn()} />);
+    expect(html).toContain('Click to upload or drag and drop');
+    expect(html).toContain('border-dashed');
+    expect(html).toContain('data-slot="dropzone"');
+    expect(html).toContain('<input');
+  });
+
+  it('shows description, error and custom title', () => {
+    const html = renderToStaticMarkup(
+      <Dropzone
+        onDrop={vi.fn()}
+        title="Drop your agent"
+        description=".yaml or .yml"
+        error="Only .yaml files are supported"
+      />,
+    );
+    expect(html).toContain('Drop your agent');
+    expect(html).toContain('.yaml or .yml');
+    expect(html).toContain('Only .yaml files are supported');
+    expect(html).toContain('text-destructive');
+  });
+
+  it('marks the disabled and compact states with data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Dropzone onDrop={vi.fn()} disabled size="compact" />,
+    );
+    expect(html).toContain('data-disabled="true"');
+    expect(html).toContain('data-size="compact"');
+  });
+
+  it('never uses raw palette colours', () => {
+    const html = renderToStaticMarkup(<Dropzone onDrop={vi.fn()} />);
+    expect(html).not.toMatch(/\b(bg|text|border)-(gray|red|green|blue)-\d+/);
+  });
+
+  it('lets a FormField label open the file picker', () => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(
+      <FormField label="Agent Image" hint="Updates on save">
+        <Dropzone onDrop={vi.fn()} />
+      </FormField>,
+    );
+    const input = host.querySelector('input')!;
+    expect(input.id).not.toBe('');
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(input.id);
+    const target = host.querySelector('[data-slot="dropzone"]')!;
+    expect(target.getAttribute('aria-describedby')).toBe(
+      host.querySelector('p')!.id,
+    );
+  });
+});
+
+describe('Dropzone hover', () => {
+  it('hovers to solid accent like Card and combobox', () => {
+    const html = renderToStaticMarkup(<Dropzone onDrop={vi.fn()} />);
+    expect(html).toContain('hover:bg-accent ');
+    expect(html).not.toContain('hover:bg-accent/40');
+  });
+});
diff --git a/frontend/src/components/ui/dropzone.tsx b/frontend/src/components/ui/dropzone.tsx
new file mode 100644
index 00000000..bd450ef4
--- /dev/null
+++ b/frontend/src/components/ui/dropzone.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { CloudUpload } from 'lucide-react';
+import {
+  useDropzone,
+  type Accept,
+  type DropzoneOptions,
+  type FileRejection,
+} from 'react-dropzone';
+
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cva } from 'class-variance-authority';
+
+import { cn, focusRing } from '@/lib/utils';
+
+const dropzoneVariants = cva(
+  `${focusRing} border-input bg-card text-foreground hover:bg-accent flex w-full cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed text-center transition-colors outline-none data-[drag-active]:border-primary data-[drag-active]:bg-primary/5 data-[drag-reject]:border-destructive data-[drag-reject]:bg-destructive/5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,
+  {
+    variants: {
+      size: {
+        default: 'px-6 py-10',
+        compact: 'flex-row justify-start px-4 py-3 text-left',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+const dropzoneIconVariants = cva(
+  'bg-muted text-muted-foreground flex shrink-0 items-center justify-center rounded-full',
+  {
+    variants: {
+      size: {
+        default: 'size-12 [&>svg]:size-6',
+        compact: 'size-8 [&>svg]:size-4',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+type DropzoneProps = {
+  /** Receives accepted files and, when `accept`/`maxSize` reject some, the rejections. */
+  onDrop: (accepted: File[], rejections: FileRejection[]) => void;
+  /** MIME-type map, e.g. `{ 'application/x-yaml': ['.yaml', '.yml'] }`. */
+  accept?: Accept;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSize?: number;
+  disabled?: boolean;
+  /** Compact fits inside forms and modals; default is the full-height target. */
+  size?: 'default' | 'compact';
+  /** Main line. Defaults to the generic upload prompt. */
+  title?: React.ReactNode;
+  /** Secondary line for accepted types and limits, e.g. ".yaml, up to 5 MB". */
+  description?: React.ReactNode;
+  /** Replaces the cloud icon. */
+  icon?: React.ReactNode;
+  /** Shown under the target in the destructive colour. */
+  error?: React.ReactNode;
+  /** Replaces the icon/title/description block entirely. */
+  children?: React.ReactNode;
+  className?: string;
+  validator?: DropzoneOptions['validator'];
+};
+
+/**
+ * Click-or-drag file target. Layout classes may be passed through
+ * `className`; colours, border and radius are owned by the component and
+ * follow the drag state (`data-drag-active`, `data-drag-reject`).
+ */
+function Dropzone({
+  onDrop,
+  accept,
+  multiple = false,
+  maxFiles,
+  maxSize,
+  disabled = false,
+  size = 'default',
+  title = 'Click to upload or drag and drop',
+  description,
+  icon,
+  error,
+  children,
+  className,
+  validator,
+}: DropzoneProps) {
+  // Inside a FormField the hidden input takes the field's id, so its label
+  // opens the file picker, and the target is described by the hint/error.
+  const field = useFormFieldControl<{
+    id?: string;
+    'aria-describedby'?: string;
+  }>({});
+  const { getRootProps, getInputProps, isDragActive, isDragReject } =
+    useDropzone({
+      onDrop,
+      accept,
+      multiple,
+      maxFiles,
+      maxSize,
+      disabled,
+      validator,
+    });
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      <div
+        {...getRootProps()}
+        aria-describedby={field['aria-describedby']}
+        data-slot="dropzone"
+        data-size={size}
+        data-disabled={disabled || undefined}
+        data-drag-active={isDragActive || undefined}
+        data-drag-reject={isDragReject || undefined}
+        className={dropzoneVariants({ size })}
+      >
+        <input {...getInputProps({ id: field.id })} />
+        {children ?? (
+          <>
+            <span className={dropzoneIconVariants({ size })}>
+              {icon ?? <CloudUpload />}
+            </span>
+            <span className="flex min-w-0 flex-col gap-0.5">
+              <span className="text-sm font-medium">{title}</span>
+              {description ? (
+                <span className="text-muted-foreground text-xs">
+                  {description}
+                </span>
+              ) : null}
+            </span>
+          </>
+        )}
+      </div>
+      {error ? <p className="text-destructive text-xs">{error}</p> : null}
+    </div>
+  );
+}
+
+export { Dropzone };
+export type { DropzoneProps };
diff --git a/frontend/src/components/ui/empty-state.test.tsx b/frontend/src/components/ui/empty-state.test.tsx
new file mode 100644
index 00000000..cdbd21de
--- /dev/null
+++ b/frontend/src/components/ui/empty-state.test.tsx
@@ -0,0 +1,55 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { EmptyState } from './empty-state';
+
+describe('EmptyState', () => {
+  it('renders both theme illustrations at 128px by default', () => {
+    const html = renderToStaticMarkup(<EmptyState title="No sources" />);
+    expect(html).toContain('py-12');
+    expect(html).toContain('size-32');
+    expect(html).toContain('dark:hidden');
+    expect(html).toContain('hidden dark:block');
+    expect(html).toContain('text-muted-foreground text-lg');
+    expect(html).not.toContain('role="alert"');
+  });
+
+  it('shrinks the art and padding at sm and xs', () => {
+    expect(renderToStaticMarkup(<EmptyState size="sm" title="x" />)).toContain(
+      'size-24',
+    );
+    const xs = renderToStaticMarkup(<EmptyState size="xs" title="x" />);
+    expect(xs).toContain('size-16');
+    expect(xs).toContain('py-8');
+  });
+
+  it('drops the art with illustration="none"', () => {
+    const html = renderToStaticMarkup(
+      <EmptyState illustration="none" title="No results" />,
+    );
+    expect(html).not.toContain('<svg');
+  });
+
+  it('turns red and announces itself with tone="destructive"', () => {
+    const html = renderToStaticMarkup(
+      <EmptyState
+        tone="destructive"
+        size="sm"
+        illustration="none"
+        title="Failed to load"
+        action={<button type="button">Retry</button>}
+      />,
+    );
+    expect(html).toContain('role="alert"');
+    expect(html).toContain('text-destructive mb-3 size-8');
+    expect(html).toContain('text-destructive text-base');
+    expect(html).not.toContain('text-muted-foreground text-base');
+    expect(html).toContain('Retry');
+  });
+
+  it('keeps the description in plain muted-foreground', () => {
+    const html = renderToStaticMarkup(<EmptyState title="t" description="d" />);
+    expect(html).toContain('text-muted-foreground mt-1 max-w-sm text-sm');
+    expect(html).not.toContain('/70');
+  });
+});
diff --git a/frontend/src/components/ui/empty-state.tsx b/frontend/src/components/ui/empty-state.tsx
new file mode 100644
index 00000000..0259ff92
--- /dev/null
+++ b/frontend/src/components/ui/empty-state.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { CircleAlert } from 'lucide-react';
+
+import NoFilesDark from '@/assets/no-files-dark.svg?react';
+import NoFiles from '@/assets/no-files.svg?react';
+import { cn } from '@/lib/utils';
+
+type EmptyStateSize = 'default' | 'sm' | 'xs';
+
+// Art, title size and padding per size: 128px on a page, 96px inside a
+// panel, 64px in a popover or picker.
+const SIZE_CLASSES: Record<
+  EmptyStateSize,
+  { root: string; art: string; title: string }
+> = {
+  default: { root: 'py-12', art: 'mb-6 size-32', title: 'text-lg' },
+  sm: { root: 'py-8', art: 'mb-4 size-24', title: 'text-base' },
+  xs: { root: 'py-8', art: 'mb-3 size-16', title: 'text-sm' },
+};
+
+type EmptyStateProps = Omit<React.ComponentProps<'div'>, 'title'> & {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** A button under the text: create the first item, retry a failed load. */
+  action?: React.ReactNode;
+  size?: EmptyStateSize;
+  /** The "no files" drawing, or text only. */
+  illustration?: 'no-files' | 'none';
+  /**
+   * `neutral` for "nothing here yet"; `destructive` for a failed page or
+   * panel load: a red icon replaces the art, the title turns red and the
+   * block is announced as an alert.
+   */
+  tone?: 'neutral' | 'destructive';
+};
+
+/** The one "nothing to show" block: empty lists, no search results, load errors. */
+function EmptyState({
+  title,
+  description,
+  action,
+  size = 'default',
+  illustration = 'no-files',
+  tone = 'neutral',
+  className,
+  ...props
+}: EmptyStateProps) {
+  const sizes = SIZE_CLASSES[size];
+  const destructive = tone === 'destructive';
+
+  return (
+    <div
+      data-slot="empty-state"
+      data-size={size}
+      data-tone={tone}
+      role={destructive ? 'alert' : undefined}
+      className={cn(
+        'flex flex-col items-center justify-center text-center',
+        sizes.root,
+        className,
+      )}
+      {...props}
+    >
+      {destructive ? (
+        <CircleAlert aria-hidden className="text-destructive mb-3 size-8" />
+      ) : illustration === 'no-files' ? (
+        <>
+          <NoFiles
+            aria-hidden
+            className={cn('mx-auto dark:hidden', sizes.art)}
+          />
+          <NoFilesDark
+            aria-hidden
+            className={cn('mx-auto hidden dark:block', sizes.art)}
+          />
+        </>
+      ) : null}
+      <p
+        className={cn(
+          destructive ? 'text-destructive' : 'text-muted-foreground',
+          sizes.title,
+        )}
+      >
+        {title}
+      </p>
+      {description ? (
+        <p className="text-muted-foreground mt-1 max-w-sm text-sm">
+          {description}
+        </p>
+      ) : null}
+      {action ? <div className="mt-4">{action}</div> : null}
+    </div>
+  );
+}
+
+export { EmptyState };
+export type { EmptyStateProps };
diff --git a/frontend/src/components/ui/form-field.test.tsx b/frontend/src/components/ui/form-field.test.tsx
new file mode 100644
index 00000000..aca06079
--- /dev/null
+++ b/frontend/src/components/ui/form-field.test.tsx
@@ -0,0 +1,258 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { FormField, FormFieldBoundary } from './form-field';
+import { Input } from './input';
+import { MultiSelect } from './multi-select';
+import { Select, SelectTrigger, SelectValue } from './select';
+import { Textarea } from './textarea';
+
+/** Parses rendered markup so tests can query it like the DOM. */
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('FormField floating label', () => {
+  it('floats the label on the field border, after the field', () => {
+    const host = render(
+      <FormField label="Server name">
+        <Input />
+      </FormField>,
+    );
+    const box = host.querySelector('input')!.parentElement!;
+    expect(box.className).toContain('relative');
+    const label = box.querySelector('label')!;
+    expect(box.lastElementChild).toBe(label);
+    for (const cls of [
+      'absolute',
+      '-top-2.5',
+      'left-3',
+      'text-xs',
+      'bg-card',
+    ]) {
+      expect(label.className.split(' ')).toContain(cls);
+    }
+    expect(label.className).toContain('text-muted-foreground');
+  });
+
+  it('rests the label inside an empty, unfocused Input or Textarea', () => {
+    const label = render(
+      <FormField label="Server name">
+        <Input />
+      </FormField>,
+    ).querySelector('label')!;
+    expect(label.className).toContain(
+      'group-has-[>input:placeholder-shown:not(:focus),>*>input:placeholder-shown:not(:focus)]/float:top-2',
+    );
+    expect(label.className).toContain(
+      'group-has-[>textarea:placeholder-shown:not(:focus),>*>textarea:placeholder-shown:not(:focus)]/float:top-2',
+    );
+  });
+
+  it('gives Input and Textarea a blank placeholder and shows a real one only on focus', () => {
+    const blank = render(
+      <FormField label="Server name">
+        <Input />
+      </FormField>,
+    ).querySelector('input')!;
+    expect(blank.getAttribute('placeholder')).toBe(' ');
+    const input = render(
+      <FormField label="Member email">
+        <Input placeholder="name@example.com" />
+      </FormField>,
+    ).querySelector('input')!;
+    expect(input.getAttribute('placeholder')).toBe('name@example.com');
+    expect(input.className).toContain('placeholder:text-transparent');
+    expect(input.className).toContain(
+      'focus:placeholder:text-muted-foreground',
+    );
+    const textarea = render(
+      <FormField label="Description">
+        <Textarea />
+      </FormField>,
+    ).querySelector('textarea')!;
+    expect(textarea.getAttribute('placeholder')).toBe(' ');
+    expect(textarea.className).toContain(
+      'focus:placeholder:text-muted-foreground',
+    );
+  });
+
+  it('turns the label red with an error', () => {
+    const label = render(
+      <FormField label="Server URL" error="Please enter a valid URL">
+        <Input />
+      </FormField>,
+    ).querySelector('label')!;
+    expect(label.className).toContain('text-destructive');
+    expect(label.className).not.toContain('text-muted-foreground');
+  });
+
+  it('matches the notch to labelSurface', () => {
+    const label = render(
+      <FormField label="Policy" labelSurface="muted">
+        <Textarea />
+      </FormField>,
+    ).querySelector('label')!;
+    expect(label.className.split(' ')).toContain('bg-muted');
+    expect(label.className.split(' ')).not.toContain('bg-card');
+  });
+
+  it('puts the label above the field with float={false}', () => {
+    const host = render(
+      <FormField label="Resources" float={false}>
+        <Input />
+      </FormField>,
+    );
+    const wrapper = host.firstElementChild as HTMLElement;
+    expect(wrapper.firstElementChild?.tagName).toBe('LABEL');
+    expect(wrapper.firstElementChild?.className).not.toContain('absolute');
+    const input = host.querySelector('input')!;
+    expect(input.hasAttribute('placeholder')).toBe(false);
+    expect(input.className).not.toContain('placeholder:text-transparent');
+  });
+});
+
+describe('FormField', () => {
+  it('stacks label, field, hint and error 6px apart', () => {
+    const host = render(
+      <FormField label="Server name" hint="Shown in the tool list">
+        <Input />
+      </FormField>,
+    );
+    const wrapper = host.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('flex-col');
+    expect(wrapper.className).toContain('gap-1.5');
+    expect(host.querySelector('p')?.className).toContain(
+      'text-muted-foreground',
+    );
+  });
+
+  it('points the label at the field and describes it with the hint', () => {
+    const host = render(
+      <FormField label="Server name" hint="Shown in the tool list">
+        <Input />
+      </FormField>,
+    );
+    const label = host.querySelector('label')!;
+    const input = host.querySelector('input')!;
+    expect(input.id).not.toBe('');
+    expect(label.getAttribute('for')).toBe(input.id);
+    const hint = host.querySelector('p')!;
+    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
+  });
+
+  it('keeps an id the field already has', () => {
+    const host = render(
+      <FormField label="Server name">
+        <Input id="mcp-name" />
+      </FormField>,
+    );
+    expect(host.querySelector('input')!.id).toBe('mcp-name');
+    expect(host.querySelector('label')!.getAttribute('for')).toBe('mcp-name');
+  });
+
+  it('marks the field invalid and announces the error', () => {
+    const host = render(
+      <FormField
+        label="Server name"
+        hint="Shown"
+        error="Server name is required"
+      >
+        <Input />
+      </FormField>,
+    );
+    const input = host.querySelector('input')!;
+    const error = host.querySelector('[role="alert"]')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(error.className).toContain('text-destructive');
+    expect(error.textContent).toBe('Server name is required');
+    expect(input.getAttribute('aria-describedby')?.split(' ')).toContain(
+      error.id,
+    );
+  });
+
+  it('draws a tight, decorative star and sets aria-required', () => {
+    const host = render(
+      <FormField label="Server name" required>
+        <Input />
+      </FormField>,
+    );
+    const label = host.querySelector('label')!;
+    const star = label.querySelector('span')!;
+    expect(star.getAttribute('aria-hidden')).toBe('true');
+    expect(star.className).toContain('text-destructive');
+    expect(host.querySelector('input')!.getAttribute('aria-required')).toBe(
+      'true',
+    );
+    // No native `required`: forms keep their own validation.
+    expect(host.querySelector('input')!.hasAttribute('required')).toBe(false);
+  });
+
+  it('wires Textarea and a SelectTrigger nested inside Select', () => {
+    const textarea = render(
+      <FormField label="Schema" error="Invalid">
+        <Textarea />
+      </FormField>,
+    );
+    expect(
+      textarea.querySelector('textarea')!.getAttribute('aria-invalid'),
+    ).toBe('true');
+
+    const select = render(
+      <FormField label="Authentication type">
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="None" />
+          </SelectTrigger>
+        </Select>
+      </FormField>,
+    );
+    const trigger = select.querySelector('[data-slot="select-trigger"]')!;
+    expect(select.querySelector('label')!.getAttribute('for')).toBe(trigger.id);
+  });
+
+  it('wires a MultiSelect trigger', () => {
+    const host = render(
+      <FormField label="Agents" error="Pick one">
+        <MultiSelect options={[]} selected={[]} onChange={() => undefined} />
+      </FormField>,
+    );
+    const trigger = host.querySelector('[role="combobox"]')!;
+    expect(host.querySelector('label')!.getAttribute('for')).toBe(trigger.id);
+    expect(trigger.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('dims the label and disables the field when disabled', () => {
+    const host = render(
+      <FormField label="Server name" disabled>
+        <Input />
+      </FormField>,
+    );
+    const wrapper = host.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('group');
+    expect(wrapper.getAttribute('data-disabled')).toBe('true');
+    expect(host.querySelector('input')!.disabled).toBe(true);
+  });
+
+  it('does not reach fields past a FormFieldBoundary', () => {
+    const host = render(
+      <FormField label="Prompt" id="prompt">
+        <Textarea />
+        <FormFieldBoundary>
+          <Input aria-label="Search variables" />
+        </FormFieldBoundary>
+      </FormField>,
+    );
+    expect(host.querySelector('textarea')!.id).toBe('prompt');
+    expect(host.querySelector('input')!.hasAttribute('id')).toBe(false);
+  });
+
+  it('leaves fields outside a FormField untouched', () => {
+    const host = render(<Input />);
+    const input = host.querySelector('input')!;
+    expect(input.hasAttribute('id')).toBe(false);
+    expect(input.hasAttribute('aria-invalid')).toBe(false);
+  });
+});
diff --git a/frontend/src/components/ui/form-field.tsx b/frontend/src/components/ui/form-field.tsx
new file mode 100644
index 00000000..2f0bf59e
--- /dev/null
+++ b/frontend/src/components/ui/form-field.tsx
@@ -0,0 +1,220 @@
+import * as React from 'react';
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+type FormFieldControl = {
+  id: string;
+  describedBy?: string;
+  invalid: boolean;
+  required: boolean;
+  disabled: boolean;
+  /** The label floats on the field's border (see FormField `float`). */
+  floating: boolean;
+};
+
+const FormFieldContext = React.createContext<FormFieldControl | null>(null);
+
+type ControlProps = {
+  id?: string;
+  disabled?: boolean;
+  'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+  'aria-describedby'?: string;
+  'aria-required'?: React.AriaAttributes['aria-required'];
+};
+
+/**
+ * Fills a field's id, disabled and aria wiring from the FormField around it.
+ * Props the caller passed win; outside a FormField the props come back as-is.
+ * Input, Textarea, SelectTrigger and Checkbox call it, so any of them works
+ * as a FormField child, even nested (a SelectTrigger inside a Select).
+ */
+/**
+ * True inside a FormField whose label floats on the field. Input and Textarea
+ * use it to keep a placeholder hidden under the resting label until focus.
+ */
+function useFormFieldFloating(): boolean {
+  return React.useContext(FormFieldContext)?.floating ?? false;
+}
+
+function useFormFieldControl<T extends ControlProps>(props: T): T {
+  const field = React.useContext(FormFieldContext);
+  if (!field) return props;
+  return {
+    ...props,
+    id: props.id ?? field.id,
+    disabled: props.disabled ?? (field.disabled || undefined),
+    'aria-invalid': props['aria-invalid'] ?? (field.invalid || undefined),
+    'aria-describedby': props['aria-describedby'] ?? field.describedBy,
+    'aria-required': props['aria-required'] ?? (field.required || undefined),
+  };
+}
+
+type FormFieldProps = {
+  label: React.ReactNode;
+  /** Draws the red star and sets aria-required (not native `required`). */
+  required?: boolean;
+  /** A muted line under the field. */
+  hint?: React.ReactNode;
+  /** A red line under the hint (role="alert"); also marks the field invalid. */
+  error?: React.ReactNode;
+  /** Dims the label and disables the field. */
+  disabled?: boolean;
+  /** The field's id; generated when neither this nor the field sets one. */
+  id?: string;
+  /**
+   * The label sits on the field's border (the default). Pass false for a
+   * field with no single box to sit on (a list of checkboxes, several
+   * controls in a row); the label then sits above it.
+   */
+  float?: boolean;
+  /** Surface behind the field, so the floating label's notch blends in. */
+  labelSurface?: keyof typeof LABEL_SURFACE_CLASSES;
+  /** Layout only (width, margin, grid placement). */
+  className?: string;
+  children: React.ReactNode;
+};
+
+// The floating label sits on the border, so its background has to match the
+// surface the field is placed on to hide the line behind it.
+const LABEL_SURFACE_CLASSES = {
+  card: 'bg-card',
+  background: 'bg-background',
+  muted: 'bg-muted',
+} as const;
+
+// Where the floating label rests while its Input or Textarea is empty and
+// unfocused, per control size; every other control keeps it on the border.
+// Only the field itself counts (up to two levels down, for an Input with an
+// icon or a Textarea under an overlay), not a search box in an inline menu.
+const FLOATING_LABEL_REST = [
+  'group-has-[>input:placeholder-shown:not(:focus),>*>input:placeholder-shown:not(:focus)]/float:top-2 group-has-[>input:placeholder-shown:not(:focus),>*>input:placeholder-shown:not(:focus)]/float:text-base',
+  'group-has-[>input[data-size=sm]:placeholder-shown:not(:focus)]/float:top-1.5 group-has-[>input[data-size=sm]:placeholder-shown:not(:focus)]/float:text-sm',
+  'group-has-[>input[data-size=lg]:placeholder-shown:not(:focus)]/float:top-3.5',
+  'group-has-[>*>input[data-left-icon]:placeholder-shown:not(:focus)]/float:left-7',
+  'group-has-[>textarea:placeholder-shown:not(:focus),>*>textarea:placeholder-shown:not(:focus)]/float:top-2 group-has-[>textarea:placeholder-shown:not(:focus),>*>textarea:placeholder-shown:not(:focus)]/float:text-base',
+  'group-has-[>textarea[data-size=lg]:placeholder-shown:not(:focus),>*>textarea[data-size=lg]:placeholder-shown:not(:focus)]/float:top-3',
+].join(' ');
+
+/**
+ * A labelled form field: the field with its label floating on the border,
+ * then an optional hint and error, 6px apart. The label rests inside an empty
+ * Input or Textarea and moves up on focus; on a Select, combobox, MultiSelect
+ * or Dropzone it stays on the border. Wires `htmlFor`, `aria-invalid`,
+ * `aria-describedby` and `aria-required` to the field through context (see
+ * useFormFieldControl). Stack floating fields with `gap-5` so each label
+ * clears the field above.
+ */
+function FormField({
+  label,
+  required = false,
+  hint,
+  error,
+  disabled = false,
+  id,
+  float = true,
+  labelSurface = 'card',
+  className,
+  children,
+}: FormFieldProps) {
+  const generatedId = React.useId();
+  const childId = React.isValidElement<{ id?: string }>(children)
+    ? children.props.id
+    : undefined;
+  const fieldId = id ?? childId ?? generatedId;
+  const hintId = hint ? `${fieldId}-hint` : undefined;
+  const errorId = error ? `${fieldId}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
+
+  const control = React.useMemo<FormFieldControl>(
+    () => ({
+      id: fieldId,
+      describedBy,
+      invalid: Boolean(error),
+      required,
+      disabled,
+      floating: float,
+    }),
+    [fieldId, describedBy, error, required, disabled, float],
+  );
+
+  const star = required ? (
+    <span aria-hidden="true" className="text-destructive">
+      *
+    </span>
+  ) : null;
+  const provided = (
+    <FormFieldContext.Provider value={control}>
+      {children}
+    </FormFieldContext.Provider>
+  );
+
+  return (
+    <div
+      data-slot="form-field"
+      data-disabled={disabled || undefined}
+      className={cn('group flex flex-col gap-1.5', className)}
+    >
+      {float ? (
+        <div className="group/float relative">
+          {provided}
+          <label
+            htmlFor={fieldId}
+            data-slot="form-field-label"
+            className={cn(
+              'pointer-events-none absolute -top-2.5 left-3 z-10 block max-w-[calc(100%-24px)] truncate px-2 text-xs transition-all select-none group-data-[disabled=true]:opacity-50',
+              error ? 'text-destructive' : 'text-muted-foreground',
+              FLOATING_LABEL_REST,
+              LABEL_SURFACE_CLASSES[labelSurface],
+            )}
+          >
+            {label}
+            {required ? (
+              <span aria-hidden="true" className="text-destructive ml-0.5">
+                *
+              </span>
+            ) : null}
+          </label>
+        </div>
+      ) : (
+        <>
+          <Label htmlFor={fieldId} className="gap-1">
+            {label}
+            {star}
+          </Label>
+          {provided}
+        </>
+      )}
+      {hint ? (
+        <p id={hintId} className="text-muted-foreground text-xs">
+          {hint}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Stops a FormField's wiring from reaching fields rendered inside this
+ * subtree (a popover's search box), which would otherwise share its id.
+ */
+function FormFieldBoundary({ children }: { children: React.ReactNode }) {
+  return (
+    <FormFieldContext.Provider value={null}>
+      {children}
+    </FormFieldContext.Provider>
+  );
+}
+
+export {
+  FormField,
+  FormFieldBoundary,
+  useFormFieldControl,
+  useFormFieldFloating,
+};
+export type { FormFieldProps };
diff --git a/frontend/src/components/ui/icon-button.test.tsx b/frontend/src/components/ui/icon-button.test.tsx
new file mode 100644
index 00000000..1f51dfcd
--- /dev/null
+++ b/frontend/src/components/ui/icon-button.test.tsx
@@ -0,0 +1,55 @@
+import { Copy } from 'lucide-react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { IconButton } from './icon-button';
+import { TooltipProvider } from './tooltip';
+
+describe('IconButton', () => {
+  it('names the button with its label and hides the icon', () => {
+    const html = renderToStaticMarkup(
+      <IconButton
+        label="Copy"
+        icon={Copy}
+        variant="ghost-muted"
+        size="icon-sm"
+      />,
+    );
+    expect(html).toContain('aria-label="Copy"');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('data-slot="tooltip-trigger"');
+    expect(html).toContain('size-8');
+  });
+
+  it('never sets a native title, even with a hint', () => {
+    const html = renderToStaticMarkup(
+      <IconButton label="Undo" hint="Undo (Ctrl+Z)" icon={Copy} />,
+    );
+    expect(html).not.toContain('title=');
+    expect(html).toContain('aria-label="Undo"');
+  });
+
+  it('defaults to a 36px square icon button', () => {
+    const html = renderToStaticMarkup(<IconButton label="Copy" icon={Copy} />);
+    expect(html).toContain('size-9');
+    expect(html).toContain('type="button"');
+  });
+
+  it('renders children in place of the icon', () => {
+    const html = renderToStaticMarkup(
+      <IconButton label="Send">
+        <svg data-testid="custom" />
+      </IconButton>,
+    );
+    expect(html).toContain('data-testid="custom"');
+  });
+
+  it('works inside an app-level provider', () => {
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <IconButton label="Copy" icon={Copy} />
+      </TooltipProvider>,
+    );
+    expect(html).toContain('aria-label="Copy"');
+  });
+});
diff --git a/frontend/src/components/ui/icon-button.tsx b/frontend/src/components/ui/icon-button.tsx
new file mode 100644
index 00000000..ca075a62
--- /dev/null
+++ b/frontend/src/components/ui/icon-button.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+
+import { Button, buttonVariants } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+type IconButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  'aria-label' | 'title' | 'size'
+> & {
+  /** The accessible name, and the tooltip text unless `hint` is set. */
+  label: string;
+  /** A lucide (or svg component) icon, rendered aria-hidden. */
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  /** Tooltip text when it differs from the name ("Undo (Ctrl+Z)"). */
+  hint?: React.ReactNode;
+  /** Tooltip side: `bottom` for header buttons, `top` (default) under text. */
+  side?: React.ComponentProps<typeof TooltipContent>['side'];
+  size?: Extract<
+    VariantProps<typeof buttonVariants>['size'],
+    'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
+  >;
+};
+
+/**
+ * An icon-only Button with its name and tooltip in one prop. It never sets
+ * a native `title`. Pass `children` instead of `icon` for a custom glyph
+ * (a spinner, an asset svg); the button stays `aria-label`-named.
+ */
+function IconButton({
+  label,
+  icon: Icon,
+  hint,
+  side,
+  size = 'icon',
+  type = 'button',
+  children,
+  ...props
+}: IconButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button aria-label={label} size={size} type={type} {...props}>
+          {children ?? (Icon ? <Icon aria-hidden="true" /> : null)}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{hint ?? label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export { IconButton };
+export type { IconButtonProps };
diff --git a/frontend/src/components/ui/input.test.tsx b/frontend/src/components/ui/input.test.tsx
new file mode 100644
index 00000000..841716c0
--- /dev/null
+++ b/frontend/src/components/ui/input.test.tsx
@@ -0,0 +1,151 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Input, inputVariants } from './input';
+
+describe('Input variants', () => {
+  it('keeps the 38px form-row rectangular field by default', () => {
+    const classes = inputVariants();
+    expect(classes).toContain('h-9.5');
+    expect(classes).toContain('rounded-md');
+  });
+
+  it('size="sm" is a compact field', () => {
+    const classes = inputVariants({ size: 'sm' });
+    expect(classes).toContain('h-8');
+    expect(classes).toContain('px-2');
+    expect(classes).not.toMatch(/\bh-9\.5\b/);
+  });
+
+  it('shape="pill" with size="lg" is the chat-style field', () => {
+    const classes = inputVariants({ size: 'lg', shape: 'pill' });
+    expect(classes).toContain('rounded-full');
+    expect(classes).toContain('h-12');
+    expect(classes).toContain('px-5');
+  });
+
+  it('a default-size pill starts its text 20px in, like the Select pill', () => {
+    const html = renderToStaticMarkup(<Input shape="pill" />);
+    const classes = (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
+    expect(classes).toContain('h-9.5');
+    expect(classes).toContain('px-5');
+    expect(classes).not.toContain('px-3');
+  });
+
+  it('an inset icon still pads the left of a default pill', () => {
+    const html = renderToStaticMarkup(
+      <Input shape="pill" leftIcon={<svg />} placeholder="Search" />,
+    );
+    const classes = (/<input[^>]*class="([^"]*)"/.exec(html)?.[1] ?? '').split(
+      ' ',
+    );
+    expect(classes).toContain('pl-10');
+    expect(classes).toContain('px-5');
+  });
+
+  it('moves the floating label to match the field height', () => {
+    const small = renderToStaticMarkup(<Input size="sm" label="Name" />);
+    expect(small).toContain('peer-placeholder-shown:top-1.5');
+    const large = renderToStaticMarkup(<Input size="lg" label="Name" />);
+    expect(large).toContain('peer-placeholder-shown:top-3.5');
+  });
+
+  it('does not leak the variant props onto the DOM element', () => {
+    const html = renderToStaticMarkup(<Input size="sm" shape="pill" />);
+    expect(html).toContain('data-size="sm"');
+    expect(html).not.toMatch(/\ssize="sm"/);
+    expect(html).not.toMatch(/\sshape="pill"/);
+  });
+
+  it('paints the floating label notch on the card surface by default', () => {
+    const html = renderToStaticMarkup(<Input label="Name" />);
+    expect(html).toMatch(/<label[^>]*class="[^"]*\bbg-card\b/);
+  });
+
+  it('labelSurface matches the notch to the surface behind the field', () => {
+    const page = renderToStaticMarkup(
+      <Input label="Search" labelSurface="background" />,
+    );
+    expect(page).toMatch(/<label[^>]*class="[^"]*\bbg-background\b/);
+    expect(page).not.toMatch(/<label[^>]*class="[^"]*\bbg-card\b/);
+    const muted = renderToStaticMarkup(
+      <Input label="Search" labelSurface="muted" />,
+    );
+    expect(muted).toMatch(/<label[^>]*class="[^"]*\bbg-muted\b/);
+    expect(muted).not.toMatch(/\slabelSurface=/i);
+  });
+
+  it('variant="filled" gives the field a card fill on a muted panel', () => {
+    const html = renderToStaticMarkup(<Input variant="filled" />);
+    const classes = (html.match(/class="([^"]*)"/)?.[1] ?? '').split(' ');
+    expect(classes).toContain('bg-card');
+    expect(classes).not.toContain('bg-transparent');
+    expect(html).toContain('data-variant="filled"');
+  });
+
+  it('variant="bare" drops the field chrome so the host frames it', () => {
+    const html = renderToStaticMarkup(<Input variant="bare" />);
+    const classes = /class="([^"]*)"/.exec(html)?.[1].split(' ') ?? [];
+    for (const cls of [
+      'border-0',
+      'rounded-none',
+      'p-0',
+      'h-auto',
+      'shadow-none',
+      'bg-transparent',
+      'text-sm',
+      'focus-visible:ring-0',
+    ]) {
+      expect(classes).toContain(cls);
+    }
+    for (const cls of ['h-9.5', 'px-3', 'shadow-xs', 'rounded-md', 'border']) {
+      expect(classes).not.toContain(cls);
+    }
+    expect(html).toContain('data-variant="bare"');
+  });
+
+  it('renders leftIcon inside the field without a floating label', () => {
+    const html = renderToStaticMarkup(
+      <Input leftIcon={<svg data-testid="icon" />} placeholder="Search" />,
+    );
+    expect(html).toContain('data-testid="icon"');
+    expect(html).toMatch(/<input[^>]*class="[^"]*\bpl-10\b/);
+    expect(html).not.toContain('<label');
+    // No label, so the real placeholder stays visible.
+    expect(html).toContain('placeholder="Search"');
+    expect(html).not.toContain('placeholder:text-transparent');
+  });
+
+  it('keeps the bare input when there is neither a label nor an icon', () => {
+    const html = renderToStaticMarkup(<Input />);
+    expect(html.startsWith('<input')).toBe(true);
+  });
+
+  it('keeps the bordered field by default', () => {
+    const html = renderToStaticMarkup(<Input />);
+    expect(html).toContain('data-variant="default"');
+    expect(html).toContain('shadow-xs');
+  });
+});
+
+describe('Input field size and disabled state', () => {
+  it('size="field" is the 38px form-row height, like Button field', () => {
+    const classes = inputVariants({ size: 'field' });
+    expect(classes).toContain('h-9.5');
+    expect(classes).toBe(inputVariants({ size: 'default' }));
+  });
+
+  it('a field pill pads px-5 like the default pill', () => {
+    const html = renderToStaticMarkup(<Input size="field" shape="pill" />);
+    const classes = (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
+    expect(classes).toContain('px-5');
+    expect(html).toContain('data-size="field"');
+  });
+
+  it('shows the not-allowed cursor while disabled', () => {
+    const classes = inputVariants().split(' ');
+    expect(classes).toContain('disabled:cursor-not-allowed');
+    // pointer-events-none would hide the cursor behind the field.
+    expect(classes).not.toContain('disabled:pointer-events-none');
+  });
+});
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 58d4a4ac..7c7d5906 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,45 +1,139 @@
 import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import {
+  useFormFieldControl,
+  useFormFieldFloating,
+} from '@/components/ui/form-field';
+import { cn, focusRing, invalidState, fieldFrame } from '@/lib/utils';
 
-type InputProps = React.ComponentProps<'input'> & {
-  label?: React.ReactNode;
-  leftIcon?: React.ReactNode;
-  labelBgClassName?: string;
+const inputVariants = cva(
+  `${focusRing} ${invalidState} ${fieldFrame} text-foreground file:text-foreground placeholder:text-muted-foreground w-full min-w-0 bg-transparent file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring`,
+  {
+    variants: {
+      size: {
+        default: 'h-9.5 px-3 py-1.5 text-base md:text-sm',
+        sm: 'h-8 px-2 py-1 text-sm',
+        lg: 'h-12 px-5 py-3 text-base md:text-sm',
+        // The form-row height (38px) by name, shared with Button field and
+        // SelectTrigger field; the same classes as default.
+        field: 'h-9.5 px-3 py-1.5 text-base md:text-sm',
+      },
+      shape: {
+        default: 'rounded-md',
+        pill: 'rounded-full',
+      },
+      // Declared after size and shape so cn() lets it win over them.
+      variant: {
+        default: '',
+        // A field inside a host that already draws the frame (a renaming
+        // sidebar row, a search strip in a bordered panel): no border,
+        // padding, radius, shadow or ring of its own.
+        bare: 'h-auto rounded-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0',
+        // A field on a muted panel: keeps the card fill so it still reads
+        // as a field against the panel.
+        filled: 'bg-card',
+      },
+    },
+    compoundVariants: [
+      // A default-size pill would start its text 12px from a 21px round end;
+      // pad it like the lg pill and SelectTrigger's pills (text 21px in).
+      // Not on `bare`, which has no padding of its own.
+      {
+        shape: 'pill',
+        size: ['default', 'field'],
+        variant: ['default', 'filled'],
+        class: 'px-5',
+      },
+    ],
+    defaultVariants: {
+      size: 'default',
+      shape: 'default',
+      variant: 'default',
+    },
+  },
+);
+
+// Where the floating label sits while the field is empty, per input height.
+const LABEL_RESTING_CLASSES: Record<
+  NonNullable<VariantProps<typeof inputVariants>['size']>,
+  string
+> = {
+  default: 'peer-placeholder-shown:top-2 peer-placeholder-shown:text-base',
+  sm: 'peer-placeholder-shown:top-1.5 peer-placeholder-shown:text-sm',
+  lg: 'peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base',
+  field: 'peer-placeholder-shown:top-2 peer-placeholder-shown:text-base',
 };
 
-const baseInputClasses =
-  'text-foreground file:text-foreground placeholder:text-muted-foreground border-border h-[42px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm';
+// The floating label sits on the field's border, so its background has to
+// match whatever surface the field is placed on to hide the line behind it.
+const LABEL_SURFACE_CLASSES = {
+  card: 'bg-card',
+  background: 'bg-background',
+  muted: 'bg-muted',
+} as const;
 
-const themeInputClasses =
-  'dark:border-border dark:text-white dark:placeholder:text-gray-400 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+type InputProps = Omit<React.ComponentProps<'input'>, 'size'> &
+  VariantProps<typeof inputVariants> & {
+    label?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    /** Surface behind the field, so the floating label's notch blends in. */
+    labelSurface?: keyof typeof LABEL_SURFACE_CLASSES;
+  };
 
-function Input({
-  className,
-  type,
-  label,
-  leftIcon,
-  labelBgClassName = 'bg-card',
-  id,
-  placeholder,
-  required,
-  ...props
-}: InputProps) {
+function Input(inputProps: InputProps) {
+  const {
+    className,
+    type,
+    label,
+    leftIcon,
+    labelSurface = 'card',
+    id,
+    placeholder,
+    required,
+    size = 'default',
+    shape = 'default',
+    variant = 'default',
+    ...props
+  } = useFormFieldControl(inputProps);
+  const floating = useFormFieldFloating();
   const generatedId = React.useId();
   const inputId = id ?? (label ? generatedId : undefined);
 
   if (!label) {
-    return (
+    const field = (
       <input
         type={type}
         id={id}
-        placeholder={placeholder}
+        // Under a FormField's floating label a blank placeholder drives the
+        // resting position; a real one stays hidden until focus.
+        placeholder={placeholder ?? (floating ? ' ' : undefined)}
         required={required}
         data-slot="input"
-        className={cn(baseInputClasses, themeInputClasses, className)}
+        data-size={size}
+        data-shape={shape}
+        data-variant={variant}
+        data-left-icon={leftIcon ? '' : undefined}
+        className={cn(
+          inputVariants({ size, shape, variant }),
+          floating &&
+            'focus:placeholder:text-muted-foreground placeholder:text-transparent',
+          leftIcon && 'pl-10',
+          className,
+        )}
         {...props}
       />
     );
+    if (!leftIcon) return field;
+    // An inset icon with no floating label (a search field).
+    return (
+      <div className="relative">
+        {field}
+        <div className="pointer-events-none absolute top-1/2 left-3 flex -translate-y-1/2 items-center justify-center">
+          {leftIcon}
+        </div>
+      </div>
+    );
   }
 
   return (
@@ -48,14 +142,16 @@ function Input({
         type={type}
         id={inputId}
         data-slot="input"
+        data-size={size}
+        data-shape={shape}
+        data-variant={variant}
         // Use a single-space placeholder so :placeholder-shown drives the
         // floating-label peer-trick even when the caller didn't pass one.
         placeholder={placeholder ?? ' '}
         required={required}
         className={cn(
-          baseInputClasses,
-          themeInputClasses,
-          'peer placeholder:text-transparent dark:placeholder:text-transparent',
+          inputVariants({ size, shape, variant }),
+          'peer focus:placeholder:text-muted-foreground placeholder:text-transparent',
           leftIcon && 'pl-10',
           className,
         )}
@@ -69,13 +165,13 @@ function Input({
       <label
         htmlFor={inputId}
         className={cn(
-          'text-muted-foreground pointer-events-none absolute -top-2.5 left-3 max-w-[calc(100%-24px)] cursor-none overflow-hidden px-2 text-xs text-ellipsis whitespace-nowrap transition-all select-none',
-          'peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-base',
+          'text-muted-foreground pointer-events-none absolute -top-2.5 left-3 max-w-[calc(100%-24px)] overflow-hidden px-2 text-xs text-ellipsis whitespace-nowrap transition-all select-none',
+          LABEL_RESTING_CLASSES[size ?? 'default'],
           leftIcon
             ? 'peer-placeholder-shown:left-7'
             : 'peer-placeholder-shown:left-3',
           'peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs',
-          labelBgClassName,
+          LABEL_SURFACE_CLASSES[labelSurface],
         )}
       >
         {label}
@@ -85,5 +181,5 @@ function Input({
   );
 }
 
-export { Input };
+export { Input, inputVariants };
 export type { InputProps };
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index af666c99..db95f3fc 100644
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -11,7 +11,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/list-row.test.tsx b/frontend/src/components/ui/list-row.test.tsx
new file mode 100644
index 00000000..013c4f7a
--- /dev/null
+++ b/frontend/src/components/ui/list-row.test.tsx
@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { ListRow, ListRows } from './list-row';
+
+describe('ListRow', () => {
+  it('lays out leading, a truncating title and meta, and trailing', () => {
+    const html = renderToStaticMarkup(
+      <ListRows>
+        <ListRow
+          leading={<span>L</span>}
+          title="lena@example.com"
+          description="Added manually"
+          trailing={<button type="button">Remove</button>}
+        />
+      </ListRows>,
+    );
+    expect(html).toContain('<ul');
+    expect(html).toContain('divide-border divide-y');
+    expect(html).toContain('<li');
+    expect(html).toContain('flex items-center gap-3 px-4 py-3');
+    expect(html).toContain('text-foreground truncate text-sm font-medium');
+    expect(html).toContain('text-muted-foreground truncate text-xs');
+  });
+
+  it('hovers to accent with an inset ring when interactive', () => {
+    const html = renderToStaticMarkup(
+      <ListRow interactive asChild title="Sources">
+        <a href="/settings/sources" />
+      </ListRow>,
+    );
+    expect(html).toContain('<a href="/settings/sources"');
+    expect(html).toContain('hover:bg-accent');
+    expect(html).toContain('focus-visible:ring-inset');
+    expect(html).toContain('Sources');
+  });
+});
diff --git a/frontend/src/components/ui/list-row.tsx b/frontend/src/components/ui/list-row.tsx
new file mode 100644
index 00000000..b8cae221
--- /dev/null
+++ b/frontend/src/components/ui/list-row.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+/** A list of rows split by 1px rules. Draws no box; wrap it in a Card for one. */
+function ListRows({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="list-rows"
+      className={cn('divide-border divide-y', className)}
+      {...props}
+    />
+  );
+}
+
+type ListRowProps = Omit<React.ComponentProps<'li'>, 'title'> & {
+  /** An Avatar, an icon or an icon square. */
+  leading?: React.ReactNode;
+  title: React.ReactNode;
+  /** One muted line under the title. */
+  description?: React.ReactNode;
+  /** A control, badge or chevron at the end of the row. */
+  trailing?: React.ReactNode;
+  /** The whole row is a target: hover fill and an inset focus ring. */
+  interactive?: boolean;
+  /**
+   * Render the row's content into its single child (a `<Link>` or
+   * `<button>`), wrapped in the `<li>`.
+   */
+  asChild?: boolean;
+};
+
+/** An identity row: leading art, a truncating title and meta, a trailing control. */
+function ListRow({
+  leading,
+  title,
+  description,
+  trailing,
+  interactive = false,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: ListRowProps) {
+  const rowClass = cn(
+    'flex items-center gap-3 px-4 py-3',
+    // Inset, because a row list usually sits in an overflow-hidden rounded
+    // box that would clip an outer ring.
+    interactive &&
+      'hover:bg-accent focus-visible:ring-ring/50 w-full text-left transition-colors outline-none focus-visible:ring-3 focus-visible:ring-inset',
+    !asChild && className,
+  );
+  const content = (
+    <>
+      {leading}
+      <div className="min-w-0 flex-1">
+        <p className="text-foreground truncate text-sm font-medium">{title}</p>
+        {description ? (
+          <p className="text-muted-foreground truncate text-xs">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {trailing}
+    </>
+  );
+
+  if (asChild) {
+    return (
+      <li data-slot="list-row" className={className} {...props}>
+        <Slot.Root className={rowClass}>
+          {React.isValidElement(children)
+            ? React.cloneElement(
+                children as React.ReactElement<{ children?: React.ReactNode }>,
+                undefined,
+                content,
+              )
+            : content}
+        </Slot.Root>
+      </li>
+    );
+  }
+
+  return (
+    <li data-slot="list-row" className={rowClass} {...props}>
+      {content}
+    </li>
+  );
+}
+
+export { ListRow, ListRows };
+export type { ListRowProps };
diff --git a/frontend/src/components/ui/loading-state.test.tsx b/frontend/src/components/ui/loading-state.test.tsx
new file mode 100644
index 00000000..f7beb580
--- /dev/null
+++ b/frontend/src/components/ui/loading-state.test.tsx
@@ -0,0 +1,36 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { LoadingState } from './loading-state';
+
+describe('LoadingState', () => {
+  it('fills its parent by default with one status ring', () => {
+    const html = renderToStaticMarkup(<LoadingState />);
+    expect(html).toContain('h-full');
+    expect(html).toContain('aria-label="loading"');
+    expect(html.match(/role="status"/g)).toHaveLength(1);
+  });
+
+  it('uses py-10 for block and h-screen for screen', () => {
+    expect(renderToStaticMarkup(<LoadingState fill="block" />)).toContain(
+      'py-10',
+    );
+    expect(renderToStaticMarkup(<LoadingState fill="screen" />)).toContain(
+      'h-screen',
+    );
+  });
+
+  it('shows a caption hidden from screen readers under the ring', () => {
+    const html = renderToStaticMarkup(
+      <LoadingState fill="block" label="Converting..." />,
+    );
+    expect(html).toContain('flex-col gap-3');
+    expect(html).toContain('aria-label="Converting..."');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('text-muted-foreground text-sm');
+  });
+});
diff --git a/frontend/src/components/ui/loading-state.tsx b/frontend/src/components/ui/loading-state.tsx
new file mode 100644
index 00000000..d6ee4b24
--- /dev/null
+++ b/frontend/src/components/ui/loading-state.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { cn } from '@/lib/utils';
+
+import { Spinner, type SpinnerProps } from './spinner';
+
+// `parent` needs a parent with a height (a panel, a drawer body); a page
+// section with none takes `block`.
+const FILL_CLASSES = {
+  parent: 'h-full',
+  screen: 'h-screen',
+  block: 'py-10',
+} as const;
+
+type LoadingStateProps = React.ComponentProps<'div'> & {
+  fill?: keyof typeof FILL_CLASSES;
+  size?: SpinnerProps['size'];
+  /** A caption under the ring; also the ring's accessible name. */
+  label?: string;
+};
+
+/** The centred spinner for a page, panel or dialog that is still loading. */
+function LoadingState({
+  fill = 'parent',
+  size = 'default',
+  label,
+  className,
+  ...props
+}: LoadingStateProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      data-slot="loading-state"
+      data-fill={fill}
+      className={cn(
+        'flex w-full items-center justify-center',
+        FILL_CLASSES[fill],
+        label && 'flex-col gap-3',
+        className,
+      )}
+      {...props}
+    >
+      <Spinner size={size} label={label ?? t('loading')} />
+      {label ? (
+        // The ring already announces the label; don't read it twice.
+        <p aria-hidden="true" className="text-muted-foreground text-sm">
+          {label}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export { LoadingState };
+export type { LoadingStateProps };
diff --git a/frontend/src/components/ui/message-scroller.tsx b/frontend/src/components/ui/message-scroller.tsx
index b7d97b61..c42edb47 100644
--- a/frontend/src/components/ui/message-scroller.tsx
+++ b/frontend/src/components/ui/message-scroller.tsx
@@ -42,7 +42,7 @@ function MessageScrollerViewport({
       className={cn(
         // Registry default also has: scroll-fade-b scrollbar-thin
         // scrollbar-gutter-stable data-autoscrolling:scrollbar-none.
-        // scrollbar-thin is a real @utility here (index.css) and would thin
+        // scrollbar-thin (Tailwind's scrollbar-width: thin) would thin
         // the chat scrollbar; the fade would double Conversation's gradient.
         'size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain contain-content',
         className,
diff --git a/frontend/src/components/ui/modal.test.tsx b/frontend/src/components/ui/modal.test.tsx
new file mode 100644
index 00000000..0912eb97
--- /dev/null
+++ b/frontend/src/components/ui/modal.test.tsx
@@ -0,0 +1,253 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const media = { isMobile: false, isDesktop: true };
+vi.mock('../../hooks', () => ({
+  useMediaQuery: () => media,
+}));
+
+import { Button } from './button';
+import { Modal, ModalActions } from './modal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="modal-content"]')!;
+
+describe('Modal header', () => {
+  it('draws the title at 20px with the description 8px under it', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create access token"
+        description="The token acts as you."
+      >
+        Body
+      </Modal>,
+    );
+    const title = document.querySelector('[data-slot="dialog-title"]')!;
+    expect(title.className).toContain('text-xl');
+    expect(title.className).toContain('leading-tight');
+    expect(title.className).not.toContain('text-lg');
+    const description = document.querySelector(
+      '[data-slot="dialog-description"]',
+    )!;
+    expect(description.className).toContain('mt-2');
+    // One flex item for both, so the column's gap-4 doesn't add to mt-2.
+    expect(title.parentElement).toBe(description.parentElement);
+    expect(title.parentElement).not.toBe(content());
+  });
+});
+
+describe('Modal footer', () => {
+  it('stacks on phones and sits in a right-aligned row from sm up', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create a team"
+        footer={<Button>Create</Button>}
+      >
+        Body
+      </Modal>,
+    );
+    const footer = document.querySelector('[data-slot="modal-footer"]')!;
+    const classes = footer.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'flex-col-reverse',
+        'gap-3',
+        'sm:flex-row',
+        'sm:justify-end',
+      ]),
+    );
+  });
+});
+
+describe('ModalActions', () => {
+  const renderActions = async (
+    props: Partial<React.ComponentProps<typeof ModalActions>> = {},
+  ) =>
+    render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Create access token"
+        footer={
+          <ModalActions
+            cancelLabel="Cancel"
+            onCancel={() => undefined}
+            submitLabel="Create token"
+            onSubmit={() => undefined}
+            {...props}
+          />
+        }
+      >
+        Body
+      </Modal>,
+    );
+
+  const footerButtons = () =>
+    Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="modal-footer"] button',
+      ),
+    );
+
+  it('renders a ghost Cancel and a primary submit, both lg pills', async () => {
+    await renderActions();
+    const [cancel, submit] = footerButtons();
+    expect(cancel.textContent).toBe('Cancel');
+    expect(cancel.dataset.variant).toBe('ghost');
+    expect(submit.textContent).toBe('Create token');
+    expect(submit.dataset.variant).toBe('default');
+    for (const button of [cancel, submit]) {
+      expect(button.dataset.size).toBe('lg');
+      expect(button.dataset.shape).toBe('pill');
+      expect(button.type).toBe('button');
+    }
+  });
+
+  it('renders only Cancel without a submitLabel', async () => {
+    await renderActions({ submitLabel: undefined });
+    const buttons = footerButtons();
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].textContent).toBe('Cancel');
+  });
+
+  it('turns the submit red when destructive', async () => {
+    await renderActions({ destructive: true });
+    expect(footerButtons()[1].dataset.variant).toBe('destructive');
+  });
+
+  it('shows the spinner while pending and disables submit', async () => {
+    await renderActions({ pending: true });
+    const submit = footerButtons()[1];
+    expect(submit.disabled).toBe(true);
+    expect(submit.getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('disables submit without a spinner when disabled', async () => {
+    await renderActions({ disabled: true });
+    const submit = footerButtons()[1];
+    expect(submit.disabled).toBe(true);
+    expect(submit.hasAttribute('aria-busy')).toBe(false);
+  });
+
+  it('pushes footerStart to the left edge from sm up', async () => {
+    await renderActions({
+      footerStart: <Button variant="outline">Test connection</Button>,
+    });
+    const start = document.querySelector('[data-slot="modal-footer-start"]')!;
+    expect(start.className).toContain('sm:mr-auto');
+    expect(start.textContent).toBe('Test connection');
+  });
+
+  it('passes extra props to the buttons', async () => {
+    await renderActions({
+      submitProps: { type: 'submit', form: 'token-form' },
+      cancelProps: { 'aria-label': 'Close dialog' },
+    });
+    const [cancel, submit] = footerButtons();
+    expect(submit.type).toBe('submit');
+    expect(submit.getAttribute('form')).toBe('token-form');
+    expect(cancel.getAttribute('aria-label')).toBe('Close dialog');
+  });
+});
+
+describe('Modal mobile sheet', () => {
+  afterEach(() => {
+    media.isMobile = false;
+  });
+
+  it('takes the bottom-sheet shape and handle from ui/sheet on phones', async () => {
+    media.isMobile = true;
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Test retrieval"
+        mobileVariant="sheet"
+      >
+        Body
+      </Modal>,
+    );
+    const sheet = content();
+    expect(sheet.hasAttribute('data-mobile-sheet')).toBe(true);
+    const classes = sheet.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-card',
+        'rounded-t-2xl',
+        'max-h-[90vh]',
+        'pb-safe',
+        'gap-3',
+        'px-4',
+      ]),
+    );
+    expect(sheet.className).not.toContain('env(');
+    expect(sheet.firstElementChild!.getAttribute('data-slot')).toBe(
+      'sheet-handle',
+    );
+  });
+
+  it('caps the desktop dialog at 85dvh and scrolls only its body', async () => {
+    await render(
+      <Modal open onOpenChange={() => undefined} title="Add tool" size="xl">
+        Body
+      </Modal>,
+    );
+    const classes = content().className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'flex',
+        'flex-col',
+        'max-h-[85dvh]',
+        'sm:max-w-4xl',
+      ]),
+    );
+    expect(classes).not.toContain('grid');
+    const body = [...content().children].find(
+      (el) => el.textContent === 'Body',
+    )!;
+    expect(body.className).toContain('overflow-y-auto');
+    expect(body.className).toContain('min-h-0');
+    expect(body.className).toContain('grow');
+  });
+
+  it('keeps the centred dialog on desktop', async () => {
+    await render(
+      <Modal
+        open
+        onOpenChange={() => undefined}
+        title="Test retrieval"
+        mobileVariant="sheet"
+      >
+        Body
+      </Modal>,
+    );
+    expect(content().hasAttribute('data-mobile-sheet')).toBe(false);
+    expect(content().className).toContain('rounded-2xl');
+    expect(content().querySelector('[data-slot="sheet-handle"]')).toBeNull();
+  });
+});
diff --git a/frontend/src/components/ui/modal.tsx b/frontend/src/components/ui/modal.tsx
index e5a22142..5d7f9135 100644
--- a/frontend/src/components/ui/modal.tsx
+++ b/frontend/src/components/ui/modal.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { XIcon } from 'lucide-react';
 import { Dialog as DialogPrimitive, VisuallyHidden } from 'radix-ui';
 import * as React from 'react';
 
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogClose,
@@ -12,7 +11,8 @@ import {
   DialogPortal,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { useMediaQuery } from '../../hooks';
+import { SheetHandle, sheetBottomShape } from '@/components/ui/sheet';
+import { useMediaQuery } from '@/hooks';
 import { cn } from '@/lib/utils';
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
@@ -75,27 +75,38 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
   // announce it. If no title was supplied at all, provide a sensible default
   // ("Dialog") behind VisuallyHidden so Radix never warns.
   const resolvedTitle = title ?? 'Dialog';
-  const titleNode =
-    hideTitle || !title ? (
-      <VisuallyHidden.Root>
-        <DialogTitle>{resolvedTitle}</DialogTitle>
-      </VisuallyHidden.Root>
-    ) : (
-      <DialogTitle>{title}</DialogTitle>
-    );
+  const showTitle = Boolean(title) && !hideTitle;
 
   const descriptionNode = description ? (
-    <DialogDescription>{description}</DialogDescription>
+    <DialogDescription className={showTitle ? 'mt-2' : undefined}>
+      {description}
+    </DialogDescription>
   ) : (
     <VisuallyHidden.Root>
       <DialogDescription>{resolvedTitle}</DialogDescription>
     </VisuallyHidden.Root>
   );
 
+  // A visible title and its description share one flex item, so the
+  // description sits 8px under the title rather than the column's 16px.
+  const headerNode = showTitle ? (
+    <div data-slot="modal-header" className="shrink-0">
+      <DialogTitle>{title}</DialogTitle>
+      {descriptionNode}
+    </div>
+  ) : (
+    <>
+      <VisuallyHidden.Root>
+        <DialogTitle>{resolvedTitle}</DialogTitle>
+      </VisuallyHidden.Root>
+      {descriptionNode}
+    </>
+  );
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
-        <DialogOverlay className="bg-black/25 backdrop-blur-xs dark:bg-black/50" />
+        <DialogOverlay />
         <DialogPrimitive.Content
           ref={ref}
           data-slot="modal-content"
@@ -114,44 +125,51 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
           className={cn(
             'bg-card text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out shadow-modal fixed z-50 duration-200 outline-none',
             isMobileSheet
-              ? 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 flex max-h-[90vh] w-full flex-col gap-3 rounded-t-2xl px-4 pt-2 pb-[max(env(safe-area-inset-bottom),1rem)]'
+              ? // The shared bottom-sheet shape; pb-safe clears the iPhone
+                // home indicator and keeps 1rem under the footer elsewhere.
+                `${sheetBottomShape} pb-safe flex w-full flex-col gap-3 px-4`
               : cn(
-                  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-8',
+                  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 top-1/2 left-1/2 flex max-h-[85dvh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl p-8',
                   SIZE_CLASSES[size],
                   className,
                 ),
           )}
         >
-          {isMobileSheet && (
-            <div
-              className="mx-auto h-1.5 w-12 shrink-0 rounded-full bg-gray-300 dark:bg-gray-600"
-              aria-hidden="true"
-            />
-          )}
-          {titleNode}
-          {descriptionNode}
+          {isMobileSheet && <SheetHandle />}
+          {headerNode}
           <div
             className={cn(
               // overflow-y-auto forces overflow-x:auto and establishes a clip
               // box. pt-3 reserves room so a floating Input label (which sits
               // ~10px above its field) at the top of the scroll area isn't
               'no-scrollbar text-foreground overflow-y-auto px-1 pt-3 pb-0.5',
-              isMobileSheet && 'min-h-0 grow',
+              // The body is the one scroller; header and footer stay put.
+              'min-h-0 grow',
               contentClassName,
             )}
           >
             {children}
           </div>
           {footer ? (
-            <div className="flex shrink-0 justify-end gap-2">{footer}</div>
+            // Phones stack the buttons full width, primary on top; from sm
+            // up they sit in one right-aligned row.
+            <div
+              data-slot="modal-footer"
+              className="flex shrink-0 flex-col-reverse gap-3 sm:flex-row sm:justify-end"
+            >
+              {footer}
+            </div>
           ) : null}
           {shouldShowCloseButton && !isMobileSheet && (
-            <DialogClose
-              className="ring-offset-background focus:ring-ring absolute top-3 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-              aria-label="Close"
-            >
-              <XIcon className="size-4" />
-              <span className="sr-only">Close</span>
+            <DialogClose asChild>
+              <Button
+                variant="ghost-muted"
+                size="icon-sm"
+                aria-label="Close"
+                className="absolute top-2 right-2"
+              >
+                <XIcon />
+              </Button>
             </DialogClose>
           )}
         </DialogPrimitive.Content>
@@ -160,4 +178,80 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
   );
 });
 
-export { Modal };
+type ModalActionsProps = {
+  cancelLabel: React.ReactNode;
+  onCancel: () => void;
+  /** Leave out for a footer with only the cancel button (a read-only view). */
+  submitLabel?: React.ReactNode;
+  onSubmit?: () => void;
+  /** Spinner on the submit button (it is also disabled). */
+  pending?: boolean;
+  /** Disables submit without a spinner (the form isn't valid yet). */
+  disabled?: boolean;
+  /** A red submit, for deletes. */
+  destructive?: boolean;
+  /** A button pinned to the footer's left edge from sm up (Test connection). */
+  footerStart?: React.ReactNode;
+  /** Extra props for the submit (type="submit", form, data-testid). */
+  submitProps?: Omit<React.ComponentProps<typeof Button>, 'children'>;
+  /** Extra props for Cancel. */
+  cancelProps?: Omit<React.ComponentProps<typeof Button>, 'children'>;
+};
+
+/**
+ * The standard modal footer: a ghost Cancel and a primary (or destructive)
+ * submit, both large pills. Pass it as Modal's `footer`. Without
+ * `submitLabel` only Cancel renders.
+ */
+function ModalActions({
+  cancelLabel,
+  onCancel,
+  submitLabel,
+  onSubmit,
+  pending = false,
+  disabled = false,
+  destructive = false,
+  footerStart,
+  submitProps,
+  cancelProps,
+}: ModalActionsProps) {
+  return (
+    <>
+      {footerStart ? (
+        <div
+          data-slot="modal-footer-start"
+          className="flex flex-col sm:mr-auto"
+        >
+          {footerStart}
+        </div>
+      ) : null}
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        shape="pill"
+        onClick={onCancel}
+        {...cancelProps}
+      >
+        {cancelLabel}
+      </Button>
+      {submitLabel ? (
+        <Button
+          type="button"
+          variant={destructive ? 'destructive' : 'default'}
+          size="lg"
+          shape="pill"
+          onClick={onSubmit}
+          disabled={disabled}
+          loading={pending}
+          {...submitProps}
+        >
+          {submitLabel}
+        </Button>
+      ) : null}
+    </>
+  );
+}
+
+export { Modal, ModalActions };
+export type { ModalActionsProps };
diff --git a/frontend/src/components/ui/multi-select.test.tsx b/frontend/src/components/ui/multi-select.test.tsx
new file mode 100644
index 00000000..b5e86acd
--- /dev/null
+++ b/frontend/src/components/ui/multi-select.test.tsx
@@ -0,0 +1,80 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { MultiSelect } from './multi-select';
+
+const options = [
+  { value: 'identity', label: 'Identity' },
+  { value: 'access', label: 'Access' },
+  { value: 'safety', label: 'Safety' },
+];
+
+function render(selected: string[]): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={() => undefined}
+      placeholder="All categories"
+    />,
+  );
+  return host;
+}
+
+describe('MultiSelect', () => {
+  it('uses the combobox trigger at the 38px form-row height', () => {
+    const trigger = render([]).querySelector<HTMLElement>('[role="combobox"]')!;
+    expect(trigger.dataset.slot).toBe('multi-select-trigger');
+    expect(trigger.dataset.variant).toBe('combobox');
+    expect(trigger.dataset.size).toBe('field');
+    const classes = trigger.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['h-auto', 'min-h-9.5', 'py-1.5']),
+    );
+    // No restyle of another variant's surface.
+    expect(classes).not.toContain('min-h-10');
+    expect(classes).not.toContain('bg-background');
+    expect(trigger.className).not.toContain('dark:bg-input/30');
+  });
+
+  it('marks the empty trigger as a placeholder', () => {
+    const trigger = render([]).querySelector('[role="combobox"]')!;
+    expect(trigger.hasAttribute('data-placeholder')).toBe(true);
+    expect(trigger.textContent).toContain('All categories');
+    const filled = render(['identity']).querySelector('[role="combobox"]')!;
+    expect(filled.hasAttribute('data-placeholder')).toBe(false);
+  });
+
+  it('shows the first two picks as Badges and counts the rest', () => {
+    const host = render(['identity', 'access', 'safety']);
+    const chips = Array.from(host.querySelectorAll('[data-slot="badge"]'));
+    expect(chips.map((chip) => chip.textContent)).toEqual([
+      'Identity',
+      'Access',
+    ]);
+    chips.forEach((chip) => {
+      expect(chip.getAttribute('data-variant')).toBe('default');
+      // The hand-rolled chip's heavier tint is gone.
+      expect(chip.className.split(' ')).not.toContain('bg-primary/20');
+    });
+    expect(host.textContent).toContain('+1 more');
+  });
+});
+
+describe('MultiSelect trigger chevron', () => {
+  it("rotates SelectTrigger's ChevronDown when open", () => {
+    const trigger = render([]).querySelector<HTMLElement>('[role="combobox"]')!;
+    expect(trigger.className.split(' ')).toContain('group');
+    const icon = trigger.querySelector('svg:last-child')!;
+    const classes = icon.getAttribute('class')!.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'size-4',
+        'opacity-50',
+        'group-data-[state=open]:rotate-180',
+      ]),
+    );
+    expect(icon.getAttribute('class')).toContain('lucide-chevron-down');
+  });
+});
diff --git a/frontend/src/components/ui/multi-select.tsx b/frontend/src/components/ui/multi-select.tsx
index e436dd8f..34cbe59b 100644
--- a/frontend/src/components/ui/multi-select.tsx
+++ b/frontend/src/components/ui/multi-select.tsx
@@ -1,9 +1,10 @@
-'use client';
-
-import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { ChevronDown, X } from 'lucide-react';
 import * as React from 'react';
 
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useFormFieldControl } from '@/components/ui/form-field';
 import {
   Command,
   CommandEmpty,
@@ -41,6 +42,8 @@ interface MultiSelectProps {
    * pointerdown instead.
    */
   modal?: boolean;
+  /** The trigger's id; inside a FormField it defaults to the field's. */
+  id?: string;
 }
 
 export function MultiSelect({
@@ -52,8 +55,16 @@ export function MultiSelect({
   searchPlaceholder = 'Search...',
   className,
   modal = false,
+  id,
 }: MultiSelectProps) {
   const [open, setOpen] = React.useState(false);
+  const control = useFormFieldControl<{
+    id?: string;
+    disabled?: boolean;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-required'?: React.AriaAttributes['aria-required'];
+  }>({ id });
 
   const handleSelect = (value: string) => {
     const newSelected = selected.includes(value)
@@ -76,12 +87,17 @@ export function MultiSelect({
     <Popover open={open} onOpenChange={setOpen} modal={modal}>
       <PopoverTrigger asChild>
         <Button
-          variant="outline"
+          variant="combobox"
+          size="field"
           role="combobox"
           aria-expanded={open}
+          data-slot="multi-select-trigger"
+          data-placeholder={selected.length ? undefined : ''}
+          {...control}
           className={cn(
-            'border-border bg-card hover:bg-accent h-auto min-h-10 w-full justify-between py-1.5',
-            !selected.length && 'text-gray-500 dark:text-gray-400',
+            // Grows past the 38px row when the chips wrap; `group` lets the
+            // chevron turn while open, like SelectTrigger's.
+            'group h-auto min-h-9.5 w-full justify-between py-1.5',
             className,
           )}
         >
@@ -97,15 +113,17 @@ export function MultiSelect({
                 {selectedLabels.slice(0, 2).map((label) => {
                   const option = options.find((o) => o.label === label);
                   return (
-                    <span
+                    <Badge
                       key={option?.value || label}
-                      className="bg-primary/20 dark:bg-primary/30 inline-flex max-w-[calc(100%-1rem)] min-w-0 items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium text-purple-700 dark:text-purple-300"
+                      className="max-w-[calc(100%-1rem)] min-w-0"
                     >
                       <span className="truncate">{label}</span>
+                      {/* A span, not a button: the trigger is already a
+                          <button>, and buttons can't nest. */}
                       <span
                         role="button"
                         tabIndex={0}
-                        className="flex h-3 w-3 cursor-pointer items-center justify-center hover:text-purple-900 dark:hover:text-purple-200"
+                        className="hover:text-primary/70 flex size-3 cursor-pointer items-center justify-center"
                         onMouseDown={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -121,33 +139,33 @@ export function MultiSelect({
                           }
                         }}
                       >
-                        <X className="h-3 w-3" />
+                        <X className="size-3" />
                       </span>
-                    </span>
+                    </Badge>
                   );
                 })}
                 {selected.length > 2 && (
-                  <span className="text-xs text-gray-600 dark:text-gray-400">
+                  <span className="text-muted-foreground text-xs">
                     +{selected.length - 2} more
                   </span>
                 )}
               </>
             )}
           </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronDown className="size-4 shrink-0 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="border-border bg-card w-(--radix-popover-trigger-width) p-0"
+        className="w-(--radix-popover-trigger-width) p-0"
         align="start"
       >
-        <Command className="bg-transparent">
-          <CommandInput placeholder={searchPlaceholder} className="h-9" />
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
           <CommandList>
             <CommandEmpty className="py-2 text-center text-sm">
               {emptyText}
             </CommandEmpty>
-            <CommandGroup className="p-1">
+            <CommandGroup>
               {options.map((option) => {
                 const isSelected = selected.includes(option.value);
                 return (
@@ -157,16 +175,15 @@ export function MultiSelect({
                     onSelect={() => handleSelect(option.value)}
                     className="cursor-pointer"
                   >
-                    <div
-                      className={cn(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border-2',
-                        isSelected
-                          ? 'border-primary bg-primary text-white'
-                          : 'border-gray-400 dark:border-gray-500',
-                      )}
-                    >
-                      {isSelected && <Check className="h-3 w-3 stroke-white" />}
-                    </div>
+                    {/* Visual only: the row is the control (cmdk handles the
+                        click and Enter), so the box takes no focus or events. */}
+                    <Checkbox
+                      size="sm"
+                      checked={isSelected}
+                      tabIndex={-1}
+                      aria-hidden
+                      className="pointer-events-none"
+                    />
                     {option.label}
                   </CommandItem>
                 );
diff --git a/frontend/src/components/ui/option-card.test.tsx b/frontend/src/components/ui/option-card.test.tsx
new file mode 100644
index 00000000..df6091b0
--- /dev/null
+++ b/frontend/src/components/ui/option-card.test.tsx
@@ -0,0 +1,54 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { OptionCard } from './option-card';
+
+describe('OptionCard', () => {
+  it('renders a whole-card button with icon and title', () => {
+    const html = renderToStaticMarkup(
+      <OptionCard icon={<svg />} title="Crawler" />,
+    );
+    expect(html).toMatch(/^<button/);
+    expect(html).toContain('Crawler');
+    expect(html).toContain('cursor-pointer');
+    expect(html).toContain('data-slot="option-card-icon"');
+  });
+
+  it('omits the description line when none is given', () => {
+    const html = renderToStaticMarkup(
+      <OptionCard icon={<svg />} title="GitHub" />,
+    );
+    expect(html).not.toContain('data-slot="card-description"');
+  });
+
+  it('marks the selected tile and fills its icon', () => {
+    const html = renderToStaticMarkup(
+      <OptionCard
+        icon={<svg />}
+        title="Classic Agent"
+        description="One model, tools and sources."
+        selected
+      />,
+    );
+    expect(html).toContain('data-selected="true"');
+    expect(html).toContain('aria-checked="true"');
+    expect(html).toContain('bg-primary text-primary-foreground');
+    expect(html).toContain('One model, tools and sources.');
+  });
+
+  it('is a plain button when it is not part of a single-select picker', () => {
+    const html = renderToStaticMarkup(
+      <OptionCard icon={<svg />} title="Upload File" />,
+    );
+    expect(html).not.toContain('role="radio"');
+    expect(html).not.toContain('aria-checked');
+  });
+
+  it('is an unchecked radio when selected={false} is passed', () => {
+    const html = renderToStaticMarkup(
+      <OptionCard icon={<svg />} title="Workflow Agent" selected={false} />,
+    );
+    expect(html).toContain('role="radio"');
+    expect(html).toContain('aria-checked="false"');
+  });
+});
diff --git a/frontend/src/components/ui/option-card.tsx b/frontend/src/components/ui/option-card.tsx
new file mode 100644
index 00000000..ce31a7d8
--- /dev/null
+++ b/frontend/src/components/ui/option-card.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { Card, CardDescription, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+
+type OptionCardProps = Omit<
+  React.ComponentProps<'button'>,
+  'title' | 'children'
+> & {
+  /** Icon shown in the tinted square; sized by the component. */
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  /** Optional second line. The tile stays the same height without it. */
+  description?: React.ReactNode;
+  /**
+   * Marks the current choice in a single-select picker. Pass it (true or
+   * false) only in a picker: the tile then becomes a radio. Left out, the
+   * tile is a plain button (it advances a step or navigates).
+   */
+  selected?: boolean;
+};
+
+/**
+ * Picker tile: a whole-card button with an icon, a title and an optional
+ * description. Used wherever the user chooses one of several ways to
+ * proceed (agent type, source type). Title-only tiles are fine.
+ */
+function OptionCard({
+  icon,
+  title,
+  description,
+  selected,
+  className,
+  type = 'button',
+  ...props
+}: OptionCardProps) {
+  return (
+    <Card interactive selected={selected} asChild className={className}>
+      <button
+        type={type}
+        role={props.role ?? (selected !== undefined ? 'radio' : undefined)}
+        aria-checked={selected}
+        data-slot="option-card"
+        {...props}
+      >
+        <span className="flex items-center gap-4">
+          <span
+            data-slot="option-card-icon"
+            className={cn(
+              'bg-secondary text-secondary-foreground flex size-12 shrink-0 items-center justify-center rounded-xl transition-colors [&>svg]:size-6',
+              selected && 'bg-primary text-primary-foreground',
+            )}
+          >
+            {icon}
+          </span>
+          <span className="flex min-w-0 flex-col gap-1">
+            <CardTitle className="text-base">{title}</CardTitle>
+            {description ? (
+              <CardDescription>{description}</CardDescription>
+            ) : null}
+          </span>
+        </span>
+      </button>
+    </Card>
+  );
+}
+
+export { OptionCard };
+export type { OptionCardProps };
diff --git a/frontend/src/components/ui/overlay-chrome.test.tsx b/frontend/src/components/ui/overlay-chrome.test.tsx
new file mode 100644
index 00000000..c69ae779
--- /dev/null
+++ b/frontend/src/components/ui/overlay-chrome.test.tsx
@@ -0,0 +1,129 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Modal } from './modal';
+import { Sheet, SheetContent } from './sheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const closeButton = () =>
+  document.querySelector<HTMLButtonElement>('button[aria-label="Close"]');
+
+describe('close buttons on overlays', () => {
+  const cases: [string, () => React.ReactElement][] = [
+    [
+      'Modal',
+      () => (
+        <Modal open onOpenChange={() => undefined} title="Create access token">
+          Body
+        </Modal>
+      ),
+    ],
+    [
+      'DialogContent',
+      () => (
+        <Dialog open>
+          <DialogContent aria-describedby={undefined}>
+            <DialogTitle>Search</DialogTitle>
+          </DialogContent>
+        </Dialog>
+      ),
+    ],
+    [
+      'SheetContent',
+      () => (
+        <Sheet open>
+          <SheetContent title="Trace" aria-describedby={undefined} />
+        </Sheet>
+      ),
+    ],
+  ];
+
+  it.each(cases)(
+    '%s closes with a 32px ghost-muted icon Button',
+    async (_name, element) => {
+      await render(element());
+      const button = closeButton();
+      expect(button).not.toBeNull();
+      expect(button!.dataset.variant).toBe('ghost-muted');
+      expect(button!.dataset.size).toBe('icon-sm');
+      expect(button!.className).toContain('absolute');
+    },
+  );
+
+  it.each(cases)(
+    '%s shows the focus ring on keyboard focus only',
+    async (_name, element) => {
+      await render(element());
+      const classes = closeButton()!.className.split(' ');
+      expect(classes).toContain('focus-visible:ring-3');
+      expect(classes.some((c) => c.startsWith('focus:'))).toBe(false);
+      expect(classes).not.toContain('focus:ring-2');
+    },
+  );
+});
+
+describe('overlay elevation', () => {
+  it('DialogContent is a modal surface', async () => {
+    await render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Search</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    const content = document.querySelector('[data-slot="dialog-content"]')!;
+    expect(content.className).toContain('shadow-modal');
+    expect(content.className).not.toContain('shadow-lg');
+    // Centred with scale steps, not bracketed percentages.
+    expect(content.className).toContain('-translate-x-1/2');
+    expect(content.className).not.toContain('translate-x-[-50%]');
+  });
+
+  it('DropdownMenuSubContent floats like the menu it opens from', async () => {
+    await render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub open>
+            <DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>Sales</DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    const sub = document.querySelector(
+      '[data-slot="dropdown-menu-sub-content"]',
+    )!;
+    expect(sub.className).toContain('shadow-md');
+    expect(sub.className).not.toContain('shadow-lg');
+  });
+});
diff --git a/frontend/src/components/ui/pagination-size.test.tsx b/frontend/src/components/ui/pagination-size.test.tsx
new file mode 100644
index 00000000..95da227c
--- /dev/null
+++ b/frontend/src/components/ui/pagination-size.test.tsx
@@ -0,0 +1,98 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { Pagination } from './pagination';
+import { TooltipProvider } from './tooltip';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('Pagination page size', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (onRowsPerPageChange = vi.fn()) => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <Pagination
+            page={1}
+            pageCount={3}
+            pageSize={10}
+            onPageChange={vi.fn()}
+            onPageSizeChange={onRowsPerPageChange}
+          />
+        </TooltipProvider>,
+      );
+    });
+    return onRowsPerPageChange;
+  };
+
+  const trigger = () =>
+    document.body.querySelector<HTMLButtonElement>(
+      '[data-slot="select-trigger"]',
+    );
+
+  it('shows the current value in a labelled combobox trigger', async () => {
+    await render();
+    const el = trigger();
+    expect(el).not.toBeNull();
+    expect(el!.getAttribute('role')).toBe('combobox');
+    expect(el!.getAttribute('aria-label')).toBe('pagination.rowsPerPage');
+    expect(el!.getAttribute('data-size')).toBe('sm');
+    expect(el!.textContent).toContain('10');
+  });
+
+  it('calls onRowsPerPageChange with the chosen number', async () => {
+    const onChange = await render();
+    const el = trigger()!;
+    await act(async () => {
+      el.dispatchEvent(
+        new PointerEvent('pointerdown', {
+          bubbles: true,
+          button: 0,
+          pointerType: 'mouse',
+        }),
+      );
+    });
+    const option = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).find((o) => o.textContent === '50');
+    expect(option).toBeDefined();
+    await act(async () => option!.click());
+    expect(onChange).toHaveBeenCalledWith(50);
+  });
+
+  it('labels the page buttons by their action', async () => {
+    await render();
+    const labels = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('button[aria-label]'),
+    ).map((b) => b.getAttribute('aria-label'));
+    expect(labels).toEqual(
+      expect.arrayContaining([
+        'pagination.firstPage',
+        'pagination.previousPage',
+        'pagination.nextPage',
+        'pagination.lastPage',
+      ]),
+    );
+    expect(container.querySelector('img')).toBeNull();
+    // IconButton: the name is aria-label and the hint is a tooltip, never a
+    // native title.
+    expect(container.querySelector('button[title]')).toBeNull();
+  });
+});
diff --git a/frontend/src/components/ui/pagination.test.tsx b/frontend/src/components/ui/pagination.test.tsx
new file mode 100644
index 00000000..be199447
--- /dev/null
+++ b/frontend/src/components/ui/pagination.test.tsx
@@ -0,0 +1,99 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: Record<string, unknown>) =>
+      opts ? `${key}:${JSON.stringify(opts)}` : key,
+  }),
+}));
+
+import { TooltipProvider } from './tooltip';
+import { Pagination } from './pagination';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('Pagination', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (node: React.ReactNode) => {
+    await act(async () => {
+      root.render(<TooltipProvider>{node}</TooltipProvider>);
+    });
+  };
+
+  const button = (label: string) =>
+    container.querySelector<HTMLButtonElement>(`[aria-label="${label}"]`);
+
+  it('renders the page-size select only with pageSize', async () => {
+    await render(<Pagination page={1} pageCount={3} onPageChange={vi.fn()} />);
+    expect(container.querySelector('[data-slot="select-trigger"]')).toBeNull();
+    await render(
+      <Pagination
+        page={1}
+        pageCount={3}
+        onPageChange={vi.fn()}
+        pageSize={10}
+        onPageSizeChange={vi.fn()}
+      />,
+    );
+    expect(
+      container.querySelector('[data-slot="select-trigger"]'),
+    ).not.toBeNull();
+  });
+
+  it('pages with the four chevrons and disables at the ends', async () => {
+    const onPageChange = vi.fn();
+    await render(
+      <Pagination page={1} pageCount={3} onPageChange={onPageChange} />,
+    );
+    expect(button('pagination.firstPage')!.disabled).toBe(true);
+    expect(button('pagination.previousPage')!.disabled).toBe(true);
+    await act(async () => button('pagination.nextPage')!.click());
+    expect(onPageChange).toHaveBeenCalledWith(2);
+    await act(async () => button('pagination.lastPage')!.click());
+    expect(onPageChange).toHaveBeenCalledWith(3);
+  });
+
+  it('puts the summary on the left and spreads the row', async () => {
+    await render(
+      <Pagination
+        page={3}
+        pageCount={41}
+        onPageChange={vi.fn()}
+        summary="1,024 users"
+      />,
+    );
+    const row = container.firstElementChild as HTMLElement;
+    expect(row.className).toContain('justify-between');
+    expect(row.textContent).toContain('1,024 users');
+  });
+
+  it('swaps chevrons for two text buttons with labels="text"', async () => {
+    await render(
+      <Pagination
+        page={2}
+        pageCount={3}
+        onPageChange={vi.fn()}
+        labels="text"
+      />,
+    );
+    expect(button('pagination.firstPage')).toBeNull();
+    const texts = Array.from(container.querySelectorAll('button')).map(
+      (b) => b.textContent,
+    );
+    expect(texts).toEqual(['pagination.previousPage', 'pagination.nextPage']);
+  });
+});
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
new file mode 100644
index 00000000..d0879ef0
--- /dev/null
+++ b/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import { Button } from './button';
+import { IconButton } from './icon-button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
+
+type PaginationProps = {
+  /** 1-based. */
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  /** Shows the "Rows per page" select. */
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (size: number) => void;
+  /** A count on the left ("1,024 users"); the row then spreads to both ends. */
+  summary?: React.ReactNode;
+  /** Four chevron buttons, or Previous / Next text buttons. */
+  labels?: 'icons' | 'text';
+  className?: string;
+};
+
+/** The pager under a table, a tile grid or a list. */
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  pageSize,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  onPageSizeChange,
+  summary,
+  labels = 'icons',
+  className,
+}: PaginationProps) {
+  const { t } = useTranslation();
+  const atStart = page <= 1;
+  const atEnd = page >= pageCount;
+  const goTo = (next: number) =>
+    onPageChange(Math.min(Math.max(next, 1), Math.max(pageCount, 1)));
+
+  return (
+    <div
+      data-slot="pagination"
+      className={cn(
+        'mt-2 flex items-center gap-4 p-2 text-xs',
+        summary ? 'justify-between' : 'justify-end',
+        className,
+      )}
+    >
+      {summary ? (
+        <p className="text-muted-foreground text-sm">{summary}</p>
+      ) : null}
+      <div className="flex items-center gap-4">
+        {pageSize !== undefined ? (
+          <div className="flex items-center gap-2">
+            <span className="text-foreground">
+              {t('pagination.rowsPerPage')}:
+            </span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(value) => onPageSizeChange?.(Number(value))}
+            >
+              <SelectTrigger size="sm" aria-label={t('pagination.rowsPerPage')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((option) => (
+                  <SelectItem key={option} value={String(option)}>
+                    {option}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+        <div className="text-foreground">
+          {t('pagination.pageOf', {
+            currentPage: page,
+            totalPages: Math.max(pageCount, 1),
+          })}
+        </div>
+        {labels === 'text' ? (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={atStart}
+              onClick={() => goTo(page - 1)}
+            >
+              {t('pagination.previousPage')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={atEnd}
+              onClick={() => goTo(page + 1)}
+            >
+              {t('pagination.nextPage')}
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <IconButton
+              variant="outline"
+              size="icon-xs"
+              disabled={atStart}
+              onClick={() => goTo(1)}
+              label={t('pagination.firstPage')}
+              icon={ChevronsLeft}
+            />
+            <IconButton
+              variant="outline"
+              size="icon-xs"
+              disabled={atStart}
+              onClick={() => goTo(page - 1)}
+              label={t('pagination.previousPage')}
+              icon={ChevronLeft}
+            />
+            <IconButton
+              variant="outline"
+              size="icon-xs"
+              disabled={atEnd}
+              onClick={() => goTo(page + 1)}
+              label={t('pagination.nextPage')}
+              icon={ChevronRight}
+            />
+            <IconButton
+              variant="outline"
+              size="icon-xs"
+              disabled={atEnd}
+              onClick={() => goTo(pageCount)}
+              label={t('pagination.lastPage')}
+              icon={ChevronsRight}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { Pagination };
+export type { PaginationProps };
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index d1de7eb1..2545703e 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { FormFieldBoundary } from '@/components/ui/form-field';
 import { cn } from '@/lib/utils';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
@@ -23,16 +24,20 @@ function PopoverContent({
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
+      {/* A popover opened from a FormField's control (a search box in a
+          picker) holds its own fields, not the FormField's. */}
+      <FormFieldBoundary>
+        <PopoverPrimitive.Content
+          data-slot="popover-content"
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-200 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border p-4 shadow-md outline-hidden',
+            className,
+          )}
+          {...props}
+        />
+      </FormFieldBoundary>
     </PopoverPrimitive.Portal>
   );
 }
diff --git a/frontend/src/components/ui/progress.test.tsx b/frontend/src/components/ui/progress.test.tsx
new file mode 100644
index 00000000..208a210b
--- /dev/null
+++ b/frontend/src/components/ui/progress.test.tsx
@@ -0,0 +1,39 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Progress } from './progress';
+
+describe('Progress', () => {
+  it('clamps the value and exposes it as a custom property', () => {
+    const html = renderToStaticMarkup(
+      <Progress value={140} variant="warning" />,
+    );
+    expect(html).toContain('--progress:100%');
+    expect(html).toContain('bg-warning');
+    expect(html).toContain('aria-valuenow="100"');
+  });
+
+  it('never uses raw palette colours', () => {
+    for (const variant of [
+      'default',
+      'success',
+      'warning',
+      'destructive',
+      'info',
+    ] as const) {
+      expect(
+        renderToStaticMarkup(<Progress value={50} variant={variant} />),
+      ).not.toMatch(
+        /\b(bg|text)-(red|green|amber|yellow|blue|gray|purple)-\d+/,
+      );
+    }
+  });
+
+  it('exposes its variant and size as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Progress value={50} variant="success" size="sm" />,
+    );
+    expect(html).toContain('data-variant="success"');
+    expect(html).toContain('data-size="sm"');
+  });
+});
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
new file mode 100644
index 00000000..048b19e6
--- /dev/null
+++ b/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const progressVariants = cva(
+  'bg-muted relative w-full overflow-hidden rounded-full',
+  {
+    variants: {
+      size: {
+        sm: 'h-1.5',
+        default: 'h-2',
+        lg: 'h-3',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+);
+
+const indicatorVariants = cva(
+  'h-full w-(--progress) rounded-full transition-[width] duration-300',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        success: 'bg-success',
+        warning: 'bg-warning',
+        destructive: 'bg-destructive',
+        info: 'bg-info',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> &
+  VariantProps<typeof progressVariants> &
+  VariantProps<typeof indicatorVariants> & {
+    /** 0 to 100. */
+    value?: number;
+  };
+
+/** Determinate bar for quotas, indexing and run progress. */
+function Progress({
+  className,
+  value = 0,
+  size = 'default',
+  variant = 'default',
+  ...props
+}: ProgressProps) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      data-variant={variant}
+      data-size={size}
+      value={clamped}
+      className={cn(progressVariants({ size }), className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className={indicatorVariants({ variant })}
+        // The only dynamic value; exposed as a custom property so the width
+        // itself stays a class (w-(--progress)), which the lint accepts.
+        style={{ '--progress': `${clamped}%` } as React.CSSProperties}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress, progressVariants };
+export type { ProgressProps };
diff --git a/frontend/src/components/ui/section-header.test.tsx b/frontend/src/components/ui/section-header.test.tsx
new file mode 100644
index 00000000..eb823c55
--- /dev/null
+++ b/frontend/src/components/ui/section-header.test.tsx
@@ -0,0 +1,57 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { SectionHeader } from './section-header';
+
+describe('SectionHeader', () => {
+  it('renders an 18px section title by default', () => {
+    const html = renderToStaticMarkup(
+      <SectionHeader title="Prompts" description="Saved system prompts." />,
+    );
+    expect(html).toContain('<h2');
+    expect(html).toContain('text-foreground text-lg font-semibold');
+    expect(html).toContain('text-muted-foreground text-sm');
+  });
+
+  it('renders the muted eyebrow at size sm', () => {
+    const html = renderToStaticMarkup(
+      <SectionHeader as="h3" size="sm" title="Recurring" />,
+    );
+    expect(html).toContain('<h3');
+    expect(html).toContain(
+      'text-muted-foreground text-xs font-semibold tracking-wider uppercase',
+    );
+  });
+
+  it('renders a 14px sub-heading at size xs, destructive on request', () => {
+    const plain = renderToStaticMarkup(
+      <SectionHeader as="h3" size="xs" title="Identity" />,
+    );
+    expect(plain).toContain('text-foreground text-sm font-semibold');
+    const danger = renderToStaticMarkup(
+      <SectionHeader
+        as="h3"
+        size="xs"
+        tone="destructive"
+        title="Danger zone"
+      />,
+    );
+    expect(danger).toContain('text-sm font-semibold text-destructive');
+    expect(danger).not.toContain('text-foreground');
+  });
+
+  it('puts actions at the end of the row', () => {
+    const html = renderToStaticMarkup(
+      <SectionHeader
+        title="Tools"
+        actions={<button type="button">Add</button>}
+      />,
+    );
+    expect(html).toContain('justify-between');
+    expect(html).toContain('<button');
+    // The row centres the title on its buttons and wraps on phones.
+    expect(html).toContain('items-center');
+    expect(html).toContain('flex-wrap');
+    expect(html).not.toContain('items-start');
+  });
+});
diff --git a/frontend/src/components/ui/section-header.tsx b/frontend/src/components/ui/section-header.tsx
new file mode 100644
index 00000000..dce5e3e8
--- /dev/null
+++ b/frontend/src/components/ui/section-header.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const sectionTitleVariants = cva('', {
+  variants: {
+    size: {
+      // A section title on a page or panel.
+      default: 'text-foreground text-lg font-semibold',
+      // An eyebrow: a label set in caps above a group.
+      sm: 'text-muted-foreground text-xs font-semibold tracking-wider uppercase',
+      // A sub-heading inside a panel, drawer or modal.
+      xs: 'text-foreground text-sm font-semibold',
+    },
+    tone: {
+      default: '',
+      // Danger zones only.
+      destructive: 'text-destructive',
+    },
+  },
+  defaultVariants: { size: 'default', tone: 'default' },
+});
+
+type SectionHeaderProps = Omit<React.ComponentProps<'div'>, 'title'> &
+  VariantProps<typeof sectionTitleVariants> & {
+    title: React.ReactNode;
+    /** One muted paragraph under the title. */
+    description?: React.ReactNode;
+    /** Buttons at the end of the title row. */
+    actions?: React.ReactNode;
+    /** The heading level in the page outline. */
+    as?: 'h2' | 'h3' | 'h4';
+  };
+
+/** A section title with an optional description and trailing actions. */
+function SectionHeader({
+  title,
+  description,
+  actions,
+  as: Heading = 'h2',
+  size,
+  tone,
+  className,
+  ...props
+}: SectionHeaderProps) {
+  const heading = (
+    <Heading className={cn(sectionTitleVariants({ size, tone }))}>
+      {title}
+    </Heading>
+  );
+  const text = description ? (
+    <div className="flex min-w-0 flex-col gap-1">
+      {heading}
+      <p className="text-muted-foreground text-sm">{description}</p>
+    </div>
+  ) : (
+    heading
+  );
+
+  return (
+    <div
+      data-slot="section-header"
+      className={cn(
+        actions &&
+          'flex flex-wrap items-center justify-between gap-x-4 gap-y-2',
+        className,
+      )}
+      {...props}
+    >
+      {text}
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  );
+}
+
+export { SectionHeader, sectionTitleVariants };
+export type { SectionHeaderProps };
diff --git a/frontend/src/components/ui/select.test.tsx b/frontend/src/components/ui/select.test.tsx
new file mode 100644
index 00000000..e3948a7f
--- /dev/null
+++ b/frontend/src/components/ui/select.test.tsx
@@ -0,0 +1,112 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { Select, SelectContent, SelectItem, SelectTrigger } from './select';
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+let host: HTMLDivElement | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  host?.remove();
+  root = null;
+  host = null;
+});
+
+describe('SelectItem', () => {
+  it('fills the highlighted item, so keyboard navigation is visible', () => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+    act(() => {
+      root!.render(
+        <Select open value="a">
+          <SelectTrigger aria-label="Rows">a</SelectTrigger>
+          <SelectContent>
+            <SelectItem value="a">A</SelectItem>
+          </SelectContent>
+        </Select>,
+      );
+    });
+    const item = document.querySelector('[data-slot="select-item"]');
+    expect(item).not.toBeNull();
+    // Radix sets data-highlighted on pointer hover and on arrow-key focus alike.
+    expect(item!.className).toContain('data-highlighted:bg-accent');
+    expect(item!.className).toContain(
+      'data-highlighted:text-accent-foreground',
+    );
+    expect(item!.className).not.toContain('data-highlighted:bg-muted');
+  });
+});
+
+describe('SelectTrigger sizes', () => {
+  const trigger = (props: Parameters<typeof SelectTrigger>[0]) => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+    act(() => {
+      root!.render(
+        <Select value="a">
+          <SelectTrigger aria-label="Retriever" {...props}>
+            a
+          </SelectTrigger>
+        </Select>,
+      );
+    });
+    return document.querySelector<HTMLElement>('[data-slot="select-trigger"]')!;
+  };
+
+  it('exposes its variant as a data attribute', () => {
+    expect(trigger({}).dataset.variant).toBe('default');
+  });
+
+  it('size="field" is the 38px form-row height, like SelectTrigger field', () => {
+    const el = trigger({ size: 'field' });
+    expect(el.dataset.size).toBe('field');
+    expect(el.className.split(' ')).toContain('h-9.5');
+  });
+
+  it.each(['default', 'field'] as const)(
+    'a %s pill starts its text 21px in (px-5)',
+    (size) => {
+      const classes = trigger({ size, shape: 'pill' }).className.split(' ');
+      expect(classes).toContain('rounded-full');
+      expect(classes).toContain('px-5');
+      expect(classes).not.toContain('px-3');
+      expect(classes).not.toContain('px-4');
+    },
+  );
+
+  it('a small pill keeps px-3', () => {
+    const classes = trigger({ size: 'sm', shape: 'pill' }).className.split(' ');
+    expect(classes).toContain('px-3');
+    expect(classes).not.toContain('px-5');
+  });
+
+  it.each(['default', 'field'] as const)(
+    '%s text is 16px on phones, 14px from md',
+    (size) => {
+      const classes = trigger({ size }).className.split(' ');
+      expect(classes).toEqual(
+        expect.arrayContaining(['text-base', 'md:text-sm']),
+      );
+    },
+  );
+
+  it('sm text stays 14px', () => {
+    const classes = trigger({ size: 'sm' }).className.split(' ');
+    expect(classes).not.toContain('text-base');
+    expect(classes).toContain('text-sm');
+  });
+
+  it('shows the not-allowed cursor while disabled', () => {
+    const classes = trigger({}).className.split(' ');
+    expect(classes).toContain('disabled:cursor-not-allowed');
+    expect(classes).toContain('focus-visible:ring-3');
+  });
+});
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index e643031b..57000a30 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,7 +1,10 @@
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { useFormFieldControl } from '@/components/ui/form-field';
+import { cn, fieldFrame, focusRing, invalidState } from '@/lib/utils';
 import { Select as SelectPrimitive } from 'radix-ui';
 
 function Select({
@@ -22,28 +25,61 @@ function SelectValue({
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
-function SelectTrigger({
-  className,
-  size = 'default',
-  variant = 'default',
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default' | 'lg';
-  variant?: 'default' | 'ghost';
-}) {
+const selectTriggerVariants = cva(
+  `${focusRing} ${invalidState} ${fieldFrame} group [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 px-3 py-2 text-sm whitespace-nowrap disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+  {
+    variants: {
+      size: {
+        // default and field are 16px on phones like Input (iOS zooms on a
+        // smaller field), 14px from md; sm stays 14px like Input sm.
+        sm: 'h-8',
+        default: 'h-9 text-base md:text-sm',
+        // The form-row height (38px), shared with Button field and Input
+        // default, so a column of mixed fields has one name for one height.
+        field: 'h-9.5 text-base md:text-sm',
+      },
+      variant: {
+        default:
+          'bg-card hover:bg-accent data-placeholder:text-muted-foreground',
+        ghost:
+          'hover:bg-accent data-[state=open]:bg-muted data-placeholder:text-muted-foreground bg-transparent',
+      },
+      shape: {
+        default: 'rounded-md',
+        pill: 'rounded-full',
+      },
+    },
+    compoundVariants: [
+      // Pills start their text 21px in, like the Input and Button field pills.
+      { shape: 'pill', size: ['default', 'field'], class: 'px-5' },
+    ],
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+      shape: 'default',
+    },
+  },
+);
+
+function SelectTrigger(
+  triggerProps: React.ComponentProps<typeof SelectPrimitive.Trigger> &
+    VariantProps<typeof selectTriggerVariants>,
+) {
+  const {
+    className,
+    size = 'default',
+    variant = 'default',
+    shape = 'default',
+    children,
+    ...props
+  } = useFormFieldControl(triggerProps);
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
-      className={cn(
-        "group aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=lg]:h-[42px] data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-gray-600 dark:[&_svg:not([class*='text-'])]:text-gray-400",
-        variant === 'default' &&
-          'border-border bg-card focus-visible:ring-ring/50 hover:bg-accent data-placeholder:text-muted-foreground',
-        variant === 'ghost' &&
-          'border-border focus-visible:ring-ring/50 hover:bg-accent data-[state=open]:bg-muted data-placeholder:text-muted-foreground dark:border-border dark:hover:bg-accent dark:data-[state=open]:bg-muted bg-transparent',
-        className,
-      )}
+      data-variant={variant}
+      data-shape={shape}
+      className={cn(selectTriggerVariants({ size, variant, shape }), className)}
       {...props}
     >
       {children}
@@ -66,7 +102,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'border-border bg-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-200 max-h-(--radix-select-content-available-height) w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border text-gray-900 shadow-md dark:text-white',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-200 max-h-(--radix-select-content-available-height) w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
@@ -113,7 +149,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "[&_svg:not([class*='text-'])]:text-muted-foreground hover:bg-muted relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
@@ -191,4 +227,5 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerVariants,
 };
diff --git a/frontend/src/components/ui/separator.test.tsx b/frontend/src/components/ui/separator.test.tsx
new file mode 100644
index 00000000..992e3fcb
--- /dev/null
+++ b/frontend/src/components/ui/separator.test.tsx
@@ -0,0 +1,31 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Separator } from './separator';
+
+describe('Separator', () => {
+  it('is a decorative 1px horizontal rule by default', () => {
+    const html = renderToStaticMarkup(<Separator />);
+    expect(html).toContain('data-orientation="horizontal"');
+    expect(html).toContain('role="none"');
+    expect(html).toContain('bg-border');
+    expect(html).toContain('h-px w-full');
+  });
+
+  it('draws a vertical rule', () => {
+    const html = renderToStaticMarkup(<Separator orientation="vertical" />);
+    expect(html).toContain('data-orientation="vertical"');
+    expect(html).toContain('h-full w-px');
+  });
+
+  it('keeps layout classes from the caller', () => {
+    const html = renderToStaticMarkup(<Separator className="mt-5 mb-8" />);
+    expect(html).toContain('mt-5 mb-8');
+  });
+
+  it('lets a caller width replace the full width', () => {
+    const html = renderToStaticMarkup(<Separator className="w-6" />);
+    expect(html).toContain('w-6');
+    expect(html).not.toContain('w-full');
+  });
+});
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
new file mode 100644
index 00000000..22f59545
--- /dev/null
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+/** A 1px `border`-coloured rule. Decorative by default (role="none"). */
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        // Plain classes, so a caller's w-* / h-* replaces them in cn().
+        orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/frontend/src/components/ui/setting-row.test.tsx b/frontend/src/components/ui/setting-row.test.tsx
new file mode 100644
index 00000000..2df53004
--- /dev/null
+++ b/frontend/src/components/ui/setting-row.test.tsx
@@ -0,0 +1,115 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { SettingRow, SettingRows } from './setting-row';
+import { Switch } from './switch';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('SettingRows / SettingRow', () => {
+  it('separates rows with a faint divider', () => {
+    const host = render(
+      <SettingRows>
+        <SettingRow label="Token limiting">
+          <Switch />
+        </SettingRow>
+      </SettingRows>,
+    );
+    const rows = host.firstElementChild as HTMLElement;
+    expect(rows.className).toContain('divide-y');
+    expect(rows.className).toContain('divide-border/50');
+  });
+
+  it('pads each row 12px, flush at the ends of the group', () => {
+    const host = render(
+      <SettingRow label="Token limiting">
+        <Switch />
+      </SettingRow>,
+    );
+    const row = host.firstElementChild as HTMLElement;
+    expect(row.className).toContain('py-3');
+    expect(row.className).toContain('first:pt-0');
+    expect(row.className).toContain('last:pb-0');
+  });
+
+  it('names the control with a clickable Label by default', () => {
+    const host = render(
+      <SettingRow
+        label="Token limiting"
+        description="Limit daily total tokens"
+        htmlFor="token-limiting"
+      >
+        <Switch id="token-limiting" />
+      </SettingRow>,
+    );
+    const label = host.querySelector('label')!;
+    expect(label.getAttribute('for')).toBe('token-limiting');
+    expect(label.className.split(' ')).not.toContain('pointer-events-none');
+    const description = host.querySelector('p')!;
+    expect(description.className).toContain('text-muted-foreground');
+    expect(description.className).toContain('text-xs');
+  });
+
+  it('keeps a heading tag when asked', () => {
+    const host = render(
+      <SettingRow label="Guardrails" as="h3">
+        <Switch aria-label="Guardrails" />
+      </SettingRow>,
+    );
+    expect(host.querySelector('h3')?.textContent).toBe('Guardrails');
+    expect(host.querySelector('label')).toBeNull();
+  });
+
+  it('aligns to the top for multi-line descriptions', () => {
+    const top = render(
+      <SettingRow label="A" alignStart>
+        <Switch />
+      </SettingRow>,
+    );
+    expect(top.innerHTML).toContain('items-start');
+    const centred = render(
+      <SettingRow label="A">
+        <Switch />
+      </SettingRow>,
+    );
+    expect(centred.innerHTML).toContain('items-center');
+  });
+
+  it('puts the `after` slot under the row, 8px down', () => {
+    const host = render(
+      <SettingRow label="Token limiting" after={<input data-testid="limit" />}>
+        <Switch />
+      </SettingRow>,
+    );
+    const after = host.querySelector('[data-testid="limit"]')!
+      .parentElement as HTMLElement;
+    expect(after.className).toContain('mt-2');
+  });
+
+  it('stacks a wide control under the label on phones with `stack`', () => {
+    const host = render(
+      <SettingRow label="Theme" stack>
+        <select data-testid="picker" />
+      </SettingRow>,
+    );
+    const line = host.querySelector('[data-slot="setting-row"] > div')!;
+    expect(line.className.split(' ')).toEqual(
+      expect.arrayContaining(['flex-col', 'sm:flex-row', 'sm:items-center']),
+    );
+    const slot = host.querySelector('[data-testid="picker"]')!
+      .parentElement as HTMLElement;
+    expect(slot.className.split(' ')).toEqual(
+      expect.arrayContaining(['w-full', 'sm:w-auto']),
+    );
+    const plain = render(
+      <SettingRow label="Theme">
+        <select />
+      </SettingRow>,
+    );
+    expect(plain.innerHTML).not.toContain('sm:flex-row');
+  });
+});
diff --git a/frontend/src/components/ui/setting-row.tsx b/frontend/src/components/ui/setting-row.tsx
new file mode 100644
index 00000000..970cb3ae
--- /dev/null
+++ b/frontend/src/components/ui/setting-row.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+/** A group of SettingRows, split by faint dividers. Layout classes only. */
+function SettingRows({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="setting-rows"
+      className={cn('divide-border/50 divide-y', className)}
+      {...props}
+    />
+  );
+}
+
+type SettingRowProps = {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  /** The control's id, so clicking the label toggles it and names it. */
+  htmlFor?: string;
+  /** Top-align the control, for descriptions that wrap. */
+  alignStart?: boolean;
+  /**
+   * Put the control under the title below `sm` and let it take the row's
+   * width, for controls too wide to share a phone row (a picker).
+   */
+  stack?: boolean;
+  /**
+   * The title element. `label` (default) names the control; a heading tag
+   * keeps the document outline, and the control then needs its own
+   * aria-label.
+   */
+  as?: 'label' | 'h2' | 'h3';
+  /** A field under the row that belongs to it (a limit Input under a Switch). */
+  after?: React.ReactNode;
+  /** Layout only. */
+  className?: string;
+  /** The control on the right: a Switch, a small Input, a Select. */
+  children?: React.ReactNode;
+};
+
+/**
+ * A settings row: title and muted description on the left, a control on the
+ * right, 12px of padding above and below (none at the ends of its group).
+ */
+function SettingRow({
+  label,
+  description,
+  htmlFor,
+  alignStart = false,
+  stack = false,
+  as = 'label',
+  after,
+  className,
+  children,
+}: SettingRowProps) {
+  const Heading = as === 'label' ? null : as;
+  return (
+    <div
+      data-slot="setting-row"
+      className={cn('py-3 first:pt-0 last:pb-0', className)}
+    >
+      <div
+        className={cn(
+          'flex justify-between gap-4',
+          stack
+            ? cn(
+                'flex-col gap-y-2 sm:flex-row',
+                alignStart ? 'sm:items-start' : 'sm:items-center',
+              )
+            : cn('flex-row', alignStart ? 'items-start' : 'items-center'),
+        )}
+      >
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          {Heading ? (
+            <Heading className="text-foreground text-sm leading-none font-medium">
+              {label}
+            </Heading>
+          ) : (
+            <Label
+              htmlFor={htmlFor}
+              className="text-foreground w-fit text-sm font-medium"
+            >
+              {label}
+            </Label>
+          )}
+          {description ? (
+            <p className="text-muted-foreground text-xs">{description}</p>
+          ) : null}
+        </div>
+        {children ? (
+          <div className={cn('shrink-0', stack && 'w-full sm:w-auto')}>
+            {children}
+          </div>
+        ) : null}
+      </div>
+      {after ? <div className="mt-2">{after}</div> : null}
+    </div>
+  );
+}
+
+export { SettingRow, SettingRows };
+export type { SettingRowProps };
diff --git a/frontend/src/components/ui/sheet.test.tsx b/frontend/src/components/ui/sheet.test.tsx
new file mode 100644
index 00000000..de8c0ac5
--- /dev/null
+++ b/frontend/src/components/ui/sheet.test.tsx
@@ -0,0 +1,155 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { Sheet, SheetContent, SheetTitle } from './sheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+const render = async (element: React.ReactElement) => {
+  await act(async () => root.render(element));
+};
+
+const content = () =>
+  document.querySelector<HTMLElement>('[data-slot="sheet-content"]')!;
+
+describe('SheetContent side="bottom"', () => {
+  it('is a card-coloured sheet with a rounded top that clears the home indicator', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          title="Tools"
+          aria-describedby={undefined}
+        />
+      </Sheet>,
+    );
+    const classes = content().className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-card',
+        'rounded-t-2xl',
+        'max-h-[90vh]',
+        'pb-safe-0',
+      ]),
+    );
+    expect(classes).not.toContain('bg-background');
+    expect(classes).not.toContain('border-t');
+    expect(content().dataset.side).toBe('bottom');
+  });
+
+  it('draws the grab handle first only when asked', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          handle
+          showCloseButton={false}
+          title="Tools"
+          aria-describedby={undefined}
+        >
+          <p>Body</p>
+        </SheetContent>
+      </Sheet>,
+    );
+    const handle = content().querySelector('[data-slot="sheet-handle"]');
+    expect(handle).not.toBeNull();
+    expect(handle!.getAttribute('aria-hidden')).toBe('true');
+    // The sr-only title comes first; the handle is the first visible child.
+    const visible = Array.from(content().children).filter(
+      (el) => !el.classList.contains('sr-only'),
+    );
+    expect(visible[0]).toBe(handle);
+  });
+
+  it('has no handle by default', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          title="Tools"
+          aria-describedby={undefined}
+        />
+      </Sheet>,
+    );
+    expect(content().querySelector('[data-slot="sheet-handle"]')).toBeNull();
+  });
+
+  it('leaves the side sheets on the page background with their border', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent side="right" title="Trace" aria-describedby={undefined} />
+      </Sheet>,
+    );
+    const classes = content().className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['bg-background', 'border-l']),
+    );
+    expect(classes).not.toContain('rounded-t-2xl');
+  });
+});
+
+describe('SheetOverlay', () => {
+  it('uses the blurred scrim every Modal uses', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent side="right" title="Trace" aria-describedby={undefined} />
+      </Sheet>,
+    );
+    const classes = document
+      .querySelector('[data-slot="sheet-overlay"]')!
+      .className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining([
+        'bg-black/25',
+        'backdrop-blur-xs',
+        'dark:bg-black/50',
+      ]),
+    );
+    expect(classes).not.toContain('bg-black/50');
+  });
+
+  it('hides the X on a handled bottom sheet by default', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent
+          side="bottom"
+          handle
+          title="Tools"
+          aria-describedby={undefined}
+        />
+      </Sheet>,
+    );
+    expect(
+      document.querySelector(
+        '[data-slot="sheet-content"] [aria-label="Close"]',
+      ),
+    ).toBeNull();
+  });
+
+  it('SheetTitle defaults to the 20px title', async () => {
+    await render(
+      <Sheet open>
+        <SheetContent>
+          <SheetTitle>Run details</SheetTitle>
+        </SheetContent>
+      </Sheet>,
+    );
+    const title = document.querySelector('[data-slot="sheet-title"]');
+    expect(title?.className).toContain('text-xl leading-tight font-semibold');
+  });
+});
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index e036acaf..48416ea9 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 import { XIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { cn, overlayScrim } from '@/lib/utils';
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -34,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 ${overlayScrim}`,
         className,
       )}
       {...props}
@@ -42,16 +44,62 @@ function SheetOverlay({
   );
 }
 
+/**
+ * The phone bottom-sheet shape: card fill, 16px top corners, capped at 90% of
+ * the viewport. Shared with Modal's `mobileVariant="sheet"` so every bottom
+ * sheet looks the same; the caller adds its own bottom padding (`pb-safe` or
+ * `pb-safe-0`).
+ */
+const sheetBottomShape =
+  'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto max-h-[90vh] rounded-t-2xl bg-card';
+
+/** The grab bar at the top of a bottom sheet, 8px below its edge. */
+function SheetHandle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-handle"
+      aria-hidden="true"
+      className={cn(
+        'bg-border mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const sheetContentVariants = cva(
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        right:
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        // A bottom sheet stacks its handle and parts flush; SheetHeader and
+        // SheetFooter bring their own padding.
+        bottom: `${sheetBottomShape} pb-safe-0 gap-0`,
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+);
+
 function SheetContent({
   className,
   children,
   side = 'right',
-  showCloseButton = true,
+  handle = false,
+  // A bottom sheet with a grab handle closes by drag or scrim, not an X.
+  showCloseButton = !handle,
   title,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: 'top' | 'right' | 'bottom' | 'left';
   showCloseButton?: boolean;
+  /** Draw the grab bar first (bottom sheets). */
+  handle?: boolean;
   // Accessible name for the dialog. Radix warns when a Dialog has no Title;
   // pass this to render a visually-hidden one when the panel has no visible
   // heading of its own (omit it if the children already render a SheetTitle).
@@ -62,26 +110,23 @@ function SheetContent({
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className,
-        )}
+        data-side={side}
+        className={cn(sheetContentVariants({ side }), className)}
         {...props}
       >
         {title ? <SheetTitle className="sr-only">{title}</SheetTitle> : null}
+        {handle && <SheetHandle />}
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
+          <SheetPrimitive.Close asChild>
+            <Button
+              variant="ghost-muted"
+              size="icon-sm"
+              aria-label="Close"
+              className="absolute top-2 right-2"
+            >
+              <XIcon />
+            </Button>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Content>
@@ -116,7 +161,10 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-foreground font-semibold', className)}
+      className={cn(
+        'text-foreground text-xl leading-tight font-semibold',
+        className,
+      )}
       {...props}
     />
   );
@@ -136,10 +184,12 @@ function SheetDescription({
 }
 
 export {
+  sheetBottomShape,
   Sheet,
   SheetTrigger,
   SheetClose,
   SheetContent,
+  SheetHandle,
   SheetHeader,
   SheetFooter,
   SheetTitle,
diff --git a/frontend/src/components/ui/skeleton.test.tsx b/frontend/src/components/ui/skeleton.test.tsx
new file mode 100644
index 00000000..5300a9ef
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.test.tsx
@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Skeleton } from './skeleton';
+
+describe('Skeleton', () => {
+  it('is a pulsing muted block hidden from assistive tech', () => {
+    const html = renderToStaticMarkup(<Skeleton className="h-4 w-32" />);
+    expect(html).toContain('animate-pulse');
+    expect(html).toContain('bg-muted');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('w-32');
+    expect(html).toContain('rounded-sm');
+  });
+
+  it('draws visible bars on a muted surface', () => {
+    const html = renderToStaticMarkup(
+      <Skeleton surface="muted" className="h-4 w-32" />,
+    );
+    expect(html).toContain('bg-muted-foreground/20');
+    expect(html).not.toMatch(/(^|\s)bg-muted(\s|")/);
+    expect(html).toContain('data-surface="muted"');
+  });
+});
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..7679aa93
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const skeletonVariants = cva('animate-pulse rounded-sm', {
+  variants: {
+    surface: {
+      // Bars on a card or background surface.
+      default: 'bg-muted',
+      // Bars inside a muted tile (a `Card variant="filled"` mirror), where
+      // `bg-muted` would vanish.
+      muted: 'bg-muted-foreground/20',
+    },
+  },
+  defaultVariants: { surface: 'default' },
+});
+
+type SkeletonProps = React.ComponentProps<'div'> &
+  VariantProps<typeof skeletonVariants>;
+
+/** Placeholder block; size it with width/height classes. Bars keep the default radius. */
+function Skeleton({ className, surface = 'default', ...props }: SkeletonProps) {
+  return (
+    <div
+      data-slot="skeleton"
+      data-surface={surface}
+      aria-hidden="true"
+      className={cn(skeletonVariants({ surface }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton, skeletonVariants };
diff --git a/frontend/src/components/ui/spinner.test.tsx b/frontend/src/components/ui/spinner.test.tsx
new file mode 100644
index 00000000..6e9d73aa
--- /dev/null
+++ b/frontend/src/components/ui/spinner.test.tsx
@@ -0,0 +1,21 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Spinner } from './spinner';
+
+describe('Spinner', () => {
+  it('is an accessible status element drawn by the ring utility', () => {
+    const html = renderToStaticMarkup(<Spinner size="sm" />);
+    expect(html).toContain('role="status"');
+    expect(html).toContain('aria-label="Loading"');
+    expect(html).toContain('spinner-ring');
+    expect(html).toContain('size-5');
+    expect(html).toContain('data-size="sm"');
+  });
+
+  it('xs is the 16px step for icon-sized spots', () => {
+    const html = renderToStaticMarkup(<Spinner size="xs" />);
+    expect(html).toContain('size-4');
+    expect(html).toContain('data-size="xs"');
+  });
+});
diff --git a/frontend/src/components/ui/spinner.tsx b/frontend/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..96b41510
--- /dev/null
+++ b/frontend/src/components/ui/spinner.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type SpinnerProps = React.ComponentProps<'div'> & {
+  size?: 'xs' | 'sm' | 'default' | 'lg';
+  /** Announced to screen readers. */
+  label?: string;
+};
+
+const SIZE_CLASSES: Record<NonNullable<SpinnerProps['size']>, string> = {
+  // Icon-sized spots: a busy Button, a step's status in a 12-16px row.
+  xs: 'size-4',
+  sm: 'size-5',
+  default: 'size-7',
+  lg: 'size-10',
+};
+
+/**
+ * Ring spinner drawn in `currentColor`, so it takes the text colour of its
+ * parent (or a `text-*` class). The ring itself is the `spinner-ring`
+ * utility in src/index.css.
+ */
+function Spinner({
+  className,
+  size = 'default',
+  label = 'Loading',
+  ...props
+}: SpinnerProps) {
+  return (
+    <div
+      role="status"
+      aria-label={label}
+      data-slot="spinner"
+      data-size={size}
+      className={cn('spinner-ring shrink-0', SIZE_CLASSES[size], className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };
+export type { SpinnerProps };
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index b42e7e23..e9655432 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn, focusRing } from '@/lib/utils';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 
 function Switch({
   className,
@@ -11,7 +11,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/35 dark:data-[state=unchecked]:bg-muted-foreground/45 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        `${focusRing} peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50`,
         className,
       )}
       {...props}
@@ -19,7 +19,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block size-5 rounded-full bg-white shadow-lg transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/frontend/src/components/ui/table.test.tsx b/frontend/src/components/ui/table.test.tsx
new file mode 100644
index 00000000..85b4b274
--- /dev/null
+++ b/frontend/src/components/ui/table.test.tsx
@@ -0,0 +1,97 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+
+function render(element: React.ReactElement): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(element);
+  return host;
+}
+
+describe('Table parts', () => {
+  it('pass native attributes through to the element', () => {
+    const host = render(
+      <Table aria-label="Audit feed" data-testid="table">
+        <TableHead data-testid="head">
+          <TableRow data-testid="head-row">
+            <TableHeader scope="col" width="120px">
+              When
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody data-testid="body">
+          <TableRow aria-selected="true">
+            <TableCell headers="when" align="right" colSpan={2}>
+              Today
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    const table = host.querySelector('table')!;
+    expect(table.getAttribute('aria-label')).toBe('Audit feed');
+    expect(table.dataset.slot).toBe('table');
+    expect(host.querySelector('thead')!.dataset.testid).toBe('head');
+    expect(host.querySelector('tbody')!.dataset.testid).toBe('body');
+    const th = host.querySelector('th')!;
+    expect(th.getAttribute('scope')).toBe('col');
+    expect(th.getAttribute('style')).toContain('--cell-width:120px');
+    expect(host.querySelector('tbody tr')!.getAttribute('aria-selected')).toBe(
+      'true',
+    );
+    const td = host.querySelector('td')!;
+    expect(td.getAttribute('headers')).toBe('when');
+    expect(td.getAttribute('colspan')).toBe('2');
+    expect(td.className).toContain('text-right');
+  });
+
+  it('draws a dense foreground header row', () => {
+    const th = render(
+      <table>
+        <thead>
+          <tr>
+            <TableHeader>When</TableHeader>
+          </tr>
+        </thead>
+      </table>,
+    ).querySelector('th')!;
+    const classes = th.className.split(' ');
+    expect(classes).toEqual(
+      expect.arrayContaining(['py-1', 'font-normal', 'text-foreground']),
+    );
+    expect(classes).not.toContain('py-3');
+    expect(classes).not.toContain('text-muted-foreground');
+  });
+
+  it('hovers only rows that have an onClick', () => {
+    const host = render(
+      <table>
+        <tbody>
+          <TableRow data-testid="plain" />
+          <TableRow data-testid="clickable" onClick={() => undefined} />
+        </tbody>
+      </table>,
+    );
+    const plain = host.querySelector('[data-testid="plain"]')!.className;
+    const clickable = host.querySelector(
+      '[data-testid="clickable"]',
+    )!.className;
+    expect(plain).not.toContain('hover:');
+    expect(plain).not.toContain('cursor-pointer');
+    expect(clickable).toContain('hover:bg-accent');
+    expect(clickable).toContain('cursor-pointer');
+  });
+
+  it('keeps the default minimum width on the table', () => {
+    const table = render(<Table>{null}</Table>).querySelector('table')!;
+    expect(table.className.split(' ')).toContain('min-w-[600px]');
+  });
+});
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index b15cfb6e..fd96c24f 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -2,11 +2,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-interface TableProps {
-  children: React.ReactNode;
-  className?: string;
+type TableProps = React.ComponentProps<'table'> & {
+  /** A min-width class; the table scrolls inside TableContainer below it. */
   minWidth?: string;
-}
+};
 
 interface TableContainerProps {
   children: React.ReactNode;
@@ -15,26 +14,24 @@ interface TableContainerProps {
   bordered?: boolean;
 }
 
-interface TableHeadProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-interface TableRowProps {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: () => void;
-}
-
-interface TableCellProps {
-  children?: React.ReactNode;
-  className?: string;
+// `align` and `width` are the deprecated HTML attributes on th/td; these parts
+// take them as a text-alignment choice and a CSS width instead.
+type TableCellProps<T extends 'th' | 'td'> = Omit<
+  React.ComponentProps<T>,
+  'align' | 'width'
+> & {
+  /** A min-width class for the column. */
   minWidth?: string;
+  /** A CSS width that fixes the column (min, max and width). */
   width?: string;
   align?: 'left' | 'right' | 'center';
-  /** Span several columns, e.g. a detail row under the row it expands. */
-  colSpan?: number;
-}
+};
+
+const ALIGN_CLASSES = {
+  left: 'text-left',
+  right: 'text-right',
+  center: 'text-center',
+} as const;
 
 const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
   function TableContainer(
@@ -56,11 +53,17 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
           className={cn(
             'w-full overflow-x-auto rounded-md bg-transparent',
             bordered && 'border-border border',
+            height === 'auto'
+              ? 'overflow-y-hidden'
+              : 'max-h-(--table-max-height) overflow-y-auto',
           )}
-          style={{
-            maxHeight: height === 'auto' ? undefined : height,
-            overflowY: height === 'auto' ? 'hidden' : 'auto',
-          }}
+          // The height is a runtime prop; exposed as a custom property so
+          // max-height itself stays a class.
+          style={
+            height === 'auto'
+              ? undefined
+              : ({ '--table-max-height': height } as React.CSSProperties)
+          }
         >
           {children}
         </div>
@@ -69,11 +72,11 @@ const TableContainer = React.forwardRef<HTMLDivElement, TableContainerProps>(
   },
 );
 
-const Table: React.FC<TableProps> = ({
-  children,
-  className = '',
+function Table({
+  className,
   minWidth = 'min-w-[600px]',
-}) => {
+  ...props
+}: TableProps) {
   return (
     <table
       data-slot="table"
@@ -82,117 +85,99 @@ const Table: React.FC<TableProps> = ({
         minWidth,
         className,
       )}
-    >
-      {children}
-    </table>
+      {...props}
+    />
   );
-};
+}
 
-const TableHead: React.FC<TableHeadProps> = ({ children, className = '' }) => {
+function TableHead({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-head"
       className={cn('bg-muted sticky top-0 z-10', className)}
-    >
-      {children}
-    </thead>
+      {...props}
+    />
   );
-};
+}
 
-const TableBody: React.FC<TableHeadProps> = ({ children, className = '' }) => {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
   return (
     <tbody
       data-slot="table-body"
       className={cn('[&>tr:last-child]:border-b-0', className)}
-    >
-      {children}
-    </tbody>
+      {...props}
+    />
   );
-};
+}
 
-const TableRow: React.FC<TableRowProps> = ({
-  children,
-  className = '',
+function TableRow({
+  className,
   onClick,
-}) => {
+  ...props
+}: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
       className={cn(
-        'border-border hover:bg-muted border-b',
-        onClick && 'cursor-pointer',
+        'border-border border-b',
+        onClick && 'hover:bg-accent cursor-pointer transition-colors',
         className,
       )}
       onClick={onClick}
-    >
-      {children}
-    </tr>
+      {...props}
+    />
   );
-};
+}
 
-const TableHeader: React.FC<TableCellProps> = ({
-  children,
-  className = '',
+function TableHeader({
+  className,
   minWidth,
   width,
   align = 'left',
-  colSpan,
-}) => {
-  const alignmentClass =
-    align === 'right'
-      ? 'text-right'
-      : align === 'center'
-        ? 'text-center'
-        : 'text-left';
-
+  ...props
+}: TableCellProps<'th'>) {
   return (
     <th
       data-slot="table-header"
-      colSpan={colSpan}
       className={cn(
-        'border-border text-muted-foreground relative box-border border-b px-2 py-3 text-sm font-medium lg:px-3',
-        alignmentClass,
+        'border-border text-foreground relative box-border border-b px-2 py-1 text-sm font-normal lg:px-3',
+        ALIGN_CLASSES[align],
         minWidth,
+        width && 'w-(--cell-width) max-w-(--cell-width) min-w-(--cell-width)',
         className,
       )}
-      style={width ? { width, minWidth: width, maxWidth: width } : {}}
-    >
-      {children}
-    </th>
+      style={
+        width ? ({ '--cell-width': width } as React.CSSProperties) : undefined
+      }
+      {...props}
+    />
   );
-};
+}
 
-const TableCell: React.FC<TableCellProps> = ({
-  children,
-  className = '',
+function TableCell({
+  className,
   minWidth,
   width,
   align = 'left',
-  colSpan,
-}) => {
-  const alignmentClass =
-    align === 'right'
-      ? 'text-right'
-      : align === 'center'
-        ? 'text-center'
-        : 'text-left';
-
+  ...props
+}: TableCellProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
-      colSpan={colSpan}
       className={cn(
         'box-border px-2 py-2 text-sm lg:px-3',
-        alignmentClass,
+        ALIGN_CLASSES[align],
         minWidth,
+        width && 'w-(--cell-width) max-w-(--cell-width) min-w-(--cell-width)',
         className,
       )}
-      style={width ? { width, minWidth: width, maxWidth: width } : {}}
-    >
-      {children}
-    </td>
+      style={
+        width ? ({ '--cell-width': width } as React.CSSProperties) : undefined
+      }
+      {...props}
+    />
   );
-};
+}
 
 export {
   Table,
@@ -203,5 +188,3 @@ export {
   TableHeader,
   TableCell,
 };
-
-export default Table;
diff --git a/frontend/src/components/ui/tabs.test.tsx b/frontend/src/components/ui/tabs.test.tsx
new file mode 100644
index 00000000..e59c497d
--- /dev/null
+++ b/frontend/src/components/ui/tabs.test.tsx
@@ -0,0 +1,83 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Tabs, TabsList, TabsTrigger } from './tabs';
+
+describe('TabsTrigger', () => {
+  it('uses the DESIGN.md 3px keyboard ring', () => {
+    const html = renderToStaticMarkup(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">Overview</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    const tag = /<button[^>]*data-slot="tabs-trigger"[^>]*>/.exec(html)![0];
+    expect(tag).toContain('focus-visible:ring-3');
+    expect(tag).not.toContain('focus-visible:ring-2');
+  });
+});
+
+describe('Tabs variants', () => {
+  const render = (variant?: 'default' | 'underline') =>
+    renderToStaticMarkup(
+      <Tabs defaultValue="a">
+        <TabsList variant={variant}>
+          <TabsTrigger variant={variant} value="a">
+            My Files
+          </TabsTrigger>
+          <TabsTrigger variant={variant} value="b">
+            Shared with Me
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+  const tag = (html: string, slot: string) =>
+    /class="([^"]*)"/
+      .exec(new RegExp(`<[^>]*data-slot="${slot}"[^>]*>`).exec(html)![0])![1]
+      .split(' ');
+
+  it('keeps the pill trigger as the default', () => {
+    const html = render();
+    const trigger = tag(html, 'tabs-trigger');
+    expect(trigger).toEqual(
+      expect.arrayContaining([
+        'rounded-3xl',
+        'font-bold',
+        'data-[state=active]:bg-muted',
+      ]),
+    );
+    expect(html).toContain('data-variant="default"');
+    expect(tag(html, 'tabs-list')).toContain('overflow-x-auto');
+  });
+
+  it('draws underline tabs with the Button tab look, keyed on the active state', () => {
+    const html = render('underline');
+    const trigger = tag(html, 'tabs-trigger');
+    expect(trigger).toEqual(
+      expect.arrayContaining([
+        'border-b-2',
+        'border-transparent',
+        'text-muted-foreground',
+        'hover:text-foreground',
+        'hover:border-border',
+        'data-[state=active]:border-primary',
+        'data-[state=active]:text-foreground',
+        'rounded-none',
+        'h-9',
+        'px-4',
+        'font-medium',
+        'focus-visible:ring-3',
+      ]),
+    );
+    expect(trigger).not.toContain('rounded-3xl');
+    expect(trigger).not.toContain('font-bold');
+    const list = tag(html, 'tabs-list');
+    expect(list).toEqual(expect.arrayContaining(['border-border', 'border-b']));
+    // No scroll container: it would clip the focus ring.
+    expect(list).not.toContain('overflow-x-auto');
+    expect(html).toContain('data-variant="underline"');
+    expect(html).toContain('role="tablist"');
+    expect(html).toContain('aria-selected="true"');
+  });
+});
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index f72d0b1a..b7ad5bc4 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn, focusRing } from '@/lib/utils';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 
 function Tabs({
   className,
@@ -10,39 +11,70 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
+      className={cn('flex flex-col', className)}
       {...props}
     />
   );
 }
 
+const tabsListVariants = cva('flex flex-nowrap', {
+  variants: {
+    variant: {
+      // Pill tabs that scroll sideways on narrow screens.
+      default: 'no-scrollbar snap-x overflow-x-auto scroll-smooth md:space-x-4',
+      // Underline tabs sit on a 1px baseline. No scroll container, which
+      // would clip the triggers' focus ring.
+      underline: 'border-border border-b',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
 function TabsList({
   className,
+  variant = 'default',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        'no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4',
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   );
 }
 
+const tabsTriggerVariants = cva(
+  `${focusRing} text-muted-foreground hover:text-foreground text-sm whitespace-nowrap outline-none disabled:pointer-events-none disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        default:
+          'data-[state=active]:bg-muted data-[state=active]:text-foreground snap-start rounded-3xl px-4 py-2 font-bold transition-colors',
+        // The same pixels as Button variant="tab": muted text on a
+        // transparent 2px bottom border, foreground and a primary underline
+        // when active.
+        underline:
+          'focus-visible:border-ring inline-flex h-9 items-center justify-center gap-2 rounded-none border-b-2 border-transparent px-4 py-2 font-medium transition-colors hover:border-border data-[state=active]:border-primary data-[state=active]:text-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
 function TabsTrigger({
   className,
+  variant = 'default',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> &
+  VariantProps<typeof tabsTriggerVariants>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
-      className={cn(
-        'focus-visible:ring-ring/50 data-[state=active]:bg-muted data-[state=active]:text-foreground dark:data-[state=active]:bg-accent text-muted-foreground hover:text-foreground snap-start rounded-3xl px-4 py-2 text-sm font-bold whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:text-white dark:data-[state=active]:text-white',
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsTriggerVariants({ variant }), className)}
       {...props}
     />
   );
diff --git a/frontend/src/components/ui/textarea.test.tsx b/frontend/src/components/ui/textarea.test.tsx
new file mode 100644
index 00000000..5650b1fa
--- /dev/null
+++ b/frontend/src/components/ui/textarea.test.tsx
@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Textarea, textareaVariants } from './textarea';
+
+function classesOf(html: string): string[] {
+  return (/class="([^"]*)"/.exec(html)?.[1] ?? '').split(' ');
+}
+
+describe('Textarea variants', () => {
+  it('is transparent by default, so it shows the surface behind it', () => {
+    const html = renderToStaticMarkup(<Textarea />);
+    expect(classesOf(html)).toContain('bg-transparent');
+    expect(html).toContain('data-variant="default"');
+  });
+
+  it('variant="filled" gives the field a card fill on a muted panel', () => {
+    const html = renderToStaticMarkup(<Textarea variant="filled" size="sm" />);
+    const classes = classesOf(html);
+    expect(classes).toContain('bg-card');
+    expect(classes).not.toContain('bg-transparent');
+    expect(html).toContain('data-variant="filled"');
+    expect(html).toContain('data-size="sm"');
+  });
+
+  it('does not leak the variant props onto the DOM element', () => {
+    const html = renderToStaticMarkup(
+      <Textarea variant="filled" resize="none" />,
+    );
+    expect(html).not.toMatch(/\svariant="filled"/);
+    expect(html).not.toMatch(/\sresize="none"/);
+  });
+});
+
+describe('Textarea', () => {
+  it('shares the Input field styling and resizes vertically by default', () => {
+    const classes = textareaVariants();
+    expect(classes).toContain('border-input');
+    expect(classes).not.toContain('border-border');
+    expect(classes).toContain('focus-visible:ring-3');
+    expect(classes).toContain('resize-y');
+    expect(classes).toContain('min-h-16');
+  });
+
+  it('renders size and resize as data attributes and classes', () => {
+    const html = renderToStaticMarkup(<Textarea size="lg" resize="none" />);
+    expect(html).toContain('data-size="lg"');
+    expect(html).toContain('resize-none');
+    expect(html).toContain('rounded-2xl');
+  });
+});
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..f0a22495
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import {
+  useFormFieldControl,
+  useFormFieldFloating,
+} from '@/components/ui/form-field';
+import { cn, focusRing, invalidState, fieldFrame } from '@/lib/utils';
+
+const textareaVariants = cva(
+  `${focusRing} ${invalidState} ${fieldFrame} text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring flex w-full min-w-0 bg-transparent disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      size: {
+        default: 'min-h-16 rounded-md px-3 py-2 text-base md:text-sm',
+        sm: 'min-h-8 rounded-md px-2 py-1 text-sm',
+        lg: 'min-h-24 rounded-2xl px-4 py-3 text-base md:text-sm',
+      },
+      resize: {
+        none: 'resize-none',
+        vertical: 'resize-y',
+        both: 'resize',
+      },
+      // Declared after size so cn() lets it win.
+      variant: {
+        default: '',
+        // A field on a muted panel: keeps the card fill so it still reads
+        // as a field against the panel (the same as Input's `filled`).
+        filled: 'bg-card',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      resize: 'vertical',
+      variant: 'default',
+    },
+  },
+);
+
+type TextareaProps = React.ComponentProps<'textarea'> &
+  VariantProps<typeof textareaVariants>;
+
+/** Multi-line sibling of Input; shares its border, ring and error styling. */
+function Textarea(textareaProps: TextareaProps) {
+  const {
+    className,
+    size = 'default',
+    resize = 'vertical',
+    variant = 'default',
+    placeholder,
+    ...props
+  } = useFormFieldControl(textareaProps);
+  const floating = useFormFieldFloating();
+  return (
+    <textarea
+      data-slot="textarea"
+      data-size={size}
+      data-variant={variant}
+      // Under a FormField's floating label a blank placeholder drives the
+      // resting position; a real one stays hidden until focus.
+      placeholder={placeholder ?? (floating ? ' ' : undefined)}
+      className={cn(
+        textareaVariants({ size, resize, variant }),
+        floating &&
+          'focus:placeholder:text-muted-foreground placeholder:text-transparent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea, textareaVariants };
+export type { TextareaProps };
diff --git a/frontend/src/components/ui/time-picker.test.tsx b/frontend/src/components/ui/time-picker.test.tsx
new file mode 100644
index 00000000..9eb51d73
--- /dev/null
+++ b/frontend/src/components/ui/time-picker.test.tsx
@@ -0,0 +1,34 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { TimePicker } from './time-picker';
+
+function render(): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = renderToStaticMarkup(
+    <TimePicker value="09:30" onChange={() => undefined} ariaLabel="Run at" />,
+  );
+  return host;
+}
+
+describe('TimePicker', () => {
+  it('marks its group with data-slot', () => {
+    const group = render().querySelector('[data-slot="time-picker"]')!;
+    expect(group.getAttribute('role')).toBe('group');
+    expect(group.getAttribute('aria-label')).toBe('Run at');
+  });
+
+  it('uses the default 36px SelectTrigger at a 68px scale width', () => {
+    const triggers = Array.from(
+      render().querySelectorAll('[data-slot="select-trigger"]'),
+    );
+    expect(triggers).toHaveLength(2);
+    for (const trigger of triggers) {
+      expect(trigger.getAttribute('data-size')).toBe('default');
+      const classes = trigger.getAttribute('class')!.split(' ');
+      expect(classes).toContain('h-9');
+      expect(classes).toContain('w-17');
+      expect(classes).not.toContain('w-[4.25rem]');
+    }
+  });
+});
diff --git a/frontend/src/components/ui/time-picker.tsx b/frontend/src/components/ui/time-picker.tsx
index e563b60b..da19905d 100644
--- a/frontend/src/components/ui/time-picker.tsx
+++ b/frontend/src/components/ui/time-picker.tsx
@@ -59,6 +59,7 @@ export function TimePicker({
 
   return (
     <div
+      data-slot="time-picker"
       className={cn('inline-flex items-center gap-1.5', className)}
       role="group"
       aria-label={ariaLabel}
@@ -74,9 +75,8 @@ export function TimePicker({
         onValueChange={(v) => emit(Number(v), minute)}
       >
         <SelectTrigger
-          size="sm"
           aria-label={ariaLabel ? `${ariaLabel} hours` : 'Hours'}
-          className="h-9 w-[4.25rem]"
+          className="w-17"
         >
           <SelectValue>{pad2(hour)}</SelectValue>
         </SelectTrigger>
@@ -94,9 +94,8 @@ export function TimePicker({
         onValueChange={(v) => emit(hour, Number(v))}
       >
         <SelectTrigger
-          size="sm"
           aria-label={ariaLabel ? `${ariaLabel} minutes` : 'Minutes'}
-          className="h-9 w-[4.25rem]"
+          className="w-17"
         >
           <SelectValue>{pad2(minute)}</SelectValue>
         </SelectTrigger>
diff --git a/frontend/src/components/ui/toast.test.tsx b/frontend/src/components/ui/toast.test.tsx
new file mode 100644
index 00000000..f5737db0
--- /dev/null
+++ b/frontend/src/components/ui/toast.test.tsx
@@ -0,0 +1,148 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import {
+  Toast,
+  ToastContent,
+  ToastHeader,
+  ToastItem,
+  ToastMessage,
+  ToastStatus,
+  ToastTitle,
+  ToastViewport,
+} from './toast';
+
+describe('Toast', () => {
+  it('is a bordered card with the toast shadow', () => {
+    const html = renderToStaticMarkup(<Toast>x</Toast>);
+    expect(html).toContain('shadow-toast');
+    expect(html).toContain('rounded-2xl');
+  });
+
+  it('leaves the live region to the viewport', () => {
+    const html = renderToStaticMarkup(
+      <ToastViewport>
+        <Toast>a</Toast>
+        <Toast>b</Toast>
+      </ToastViewport>,
+    );
+    // Exactly one live region: the viewport. Cards must not nest another.
+    expect(html.match(/role="status"/g)).toHaveLength(1);
+    expect(html).toMatch(
+      /^<div role="status" aria-live="polite" data-slot="toast-viewport"/,
+    );
+    expect(renderToStaticMarkup(<Toast>x</Toast>)).not.toContain('role=');
+  });
+
+  it('lets a caller override the viewport politeness', () => {
+    const html = renderToStaticMarkup(<ToastViewport aria-live="assertive" />);
+    expect(html).toContain('aria-live="assertive"');
+    expect(html).not.toContain('aria-live="polite"');
+  });
+
+  it('truncates the title unless it wraps', () => {
+    const truncated = renderToStaticMarkup(<ToastTitle>t</ToastTitle>);
+    expect(truncated).toContain('truncate');
+    const wrapped = renderToStaticMarkup(<ToastTitle wrap>t</ToastTitle>);
+    expect(wrapped).not.toContain('truncate');
+    expect(wrapped).not.toContain('wrap=');
+  });
+
+  it('sizes the message xs by default and sm on request', () => {
+    const xs = renderToStaticMarkup(<ToastMessage>m</ToastMessage>);
+    expect(xs).toContain('text-xs');
+    expect(xs).not.toContain('text-sm');
+    const sm = renderToStaticMarkup(<ToastMessage size="sm">m</ToastMessage>);
+    expect(sm).toContain('text-sm');
+    expect(sm).toContain('leading-4.5');
+    expect(sm).not.toContain('text-xs');
+  });
+
+  it('pads a message that is the only content under the header', () => {
+    const html = renderToStaticMarkup(<ToastMessage>m</ToastMessage>);
+    // pb-3 always; pt-3 only when nothing sits above it in ToastContent.
+    expect(html).toContain('pb-3');
+    expect(html).toContain('first:pt-3');
+  });
+
+  it('keeps a message under its row instead of below a divider', () => {
+    const html = renderToStaticMarkup(
+      <ToastItem label="1.png">
+        <ToastStatus status="destructive" />
+      </ToastItem>,
+    );
+    expect(html).toContain(
+      '[&amp;:has(+[data-slot=toast-message])]:border-b-0',
+    );
+  });
+
+  it('renders an optional icon before the label', () => {
+    const html = renderToStaticMarkup(
+      <ToastItem label="Conversation" icon={<ToastStatus status="warning" />}>
+        <button>Review</button>
+      </ToastItem>,
+    );
+    expect(html.indexOf('data-status="warning"')).toBeLessThan(
+      html.indexOf('Conversation'),
+    );
+    expect(html).not.toContain('icon=');
+  });
+
+  it('tints the header by variant and colours the message', () => {
+    const html = renderToStaticMarkup(
+      <Toast>
+        <ToastHeader variant="destructive">
+          <ToastTitle>Upload failed</ToastTitle>
+        </ToastHeader>
+        <ToastContent>
+          <ToastItem label="1.png">
+            <ToastStatus status="destructive" />
+          </ToastItem>
+          <ToastMessage variant="destructive">
+            No text could be extracted.
+          </ToastMessage>
+        </ToastContent>
+      </Toast>,
+    );
+    expect(html).toContain('bg-destructive/10');
+    expect(html).toContain('data-status="destructive"');
+    expect(html).toContain('text-destructive');
+    expect(html).toContain('No text could be extracted.');
+  });
+
+  it('never uses raw palette colours', () => {
+    const html = renderToStaticMarkup(
+      <Toast>
+        <ToastHeader variant="success">
+          <ToastTitle>Done</ToastTitle>
+        </ToastHeader>
+        <ToastItem label="a.md" meta="1.2k tokens">
+          <ToastStatus status="success" />
+        </ToastItem>
+      </Toast>,
+    );
+    expect(html).not.toMatch(
+      /\b(bg|text)-(red|green|amber|gray|black|white)\b/,
+    );
+  });
+
+  it('exposes the message variant and size as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <ToastMessage variant="destructive" size="sm">
+        Failed
+      </ToastMessage>,
+    );
+    expect(html).toContain('data-variant="destructive"');
+    expect(html).toContain('data-size="sm"');
+  });
+
+  it('shows the pending status with the small Spinner, unresized', () => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToStaticMarkup(<ToastStatus status="pending" />);
+    const spinner = host.querySelector('[data-slot="spinner"]')!;
+    expect(spinner.getAttribute('data-size')).toBe('sm');
+    const classes = spinner.getAttribute('class')!.split(' ');
+    expect(classes).toContain('size-5');
+    expect(classes).not.toContain('size-6');
+  });
+});
diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
new file mode 100644
index 00000000..69ad264b
--- /dev/null
+++ b/frontend/src/components/ui/toast.tsx
@@ -0,0 +1,282 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircle, Check, Info, TriangleAlert } from 'lucide-react';
+
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+
+/**
+ * Bottom-right message card: the app's messaging surface for uploads, tool
+ * approvals and team notifications. Compose:
+ * ToastViewport > Toast > ToastHeader(variant) [ToastTitle, ToastActions]
+ *                       > ToastContent > ToastItem(s) / ToastMessage
+ */
+
+/**
+ * Fixed stack in the bottom-right corner. One per app, mounted in App.tsx;
+ * every toast renders only its `Toast` cards into it. It is the single live
+ * region (`role="status"`, `aria-live="polite"`), so cards carry no role.
+ */
+function ToastViewport({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      data-slot="toast-viewport"
+      className={cn(
+        'fixed right-4 bottom-6 z-50 flex max-w-md flex-col gap-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Toast({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="toast"
+      className={cn(
+        'border-border bg-card text-card-foreground shadow-toast w-68 overflow-hidden rounded-2xl border',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const toastHeaderVariants = cva(
+  'flex items-center justify-between gap-2 px-4 py-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        success: 'bg-success/10',
+        warning: 'bg-warning/10',
+        destructive: 'bg-destructive/10',
+        info: 'bg-info/10',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+function ToastHeader({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof toastHeaderVariants>) {
+  return (
+    <div
+      data-slot="toast-header"
+      data-variant={variant}
+      className={cn(toastHeaderVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+/** One line with an ellipsis by default; `wrap` lets a long title wrap. */
+function ToastTitle({
+  className,
+  wrap = false,
+  ...props
+}: React.ComponentProps<'h3'> & { wrap?: boolean }) {
+  return (
+    <h3
+      data-slot="toast-title"
+      className={cn(
+        'text-foreground text-sm font-medium',
+        wrap ? 'min-w-0 break-words' : 'truncate',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Collapse and close buttons; use `Button variant="ghost-muted" size="icon-sm"`. */
+function ToastActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="toast-actions"
+      className={cn('flex shrink-0 items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Rows and messages. Pass `scrollable` only for long lists (uploads); a
+ * plain block sizes reliably in every engine, a max-height scroll box does
+ * not always inside a flex item in WebKit.
+ */
+function ToastContent({
+  className,
+  scrollable = false,
+  ...props
+}: React.ComponentProps<'div'> & { scrollable?: boolean }) {
+  return (
+    <div
+      data-slot="toast-content"
+      className={cn(scrollable && 'max-h-72 overflow-y-auto', className)}
+      {...props}
+    />
+  );
+}
+
+/** Action buttons under the rows, right-aligned. */
+function ToastFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="toast-footer"
+      className={cn('flex justify-end gap-2 px-5 pt-1 pb-3', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * One row: optional icon, label and optional meta on the left, status or
+ * actions on the right. A `ToastMessage` right after it belongs to the row,
+ * so the divider moves below the message.
+ */
+function ToastItem({
+  className,
+  label,
+  meta,
+  icon,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  label: React.ReactNode;
+  meta?: React.ReactNode;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="toast-item"
+      className={cn(
+        'border-border/50 flex items-center justify-between gap-3 border-b px-5 py-3 last:border-b-0 [&:has(+[data-slot=toast-message])]:border-b-0',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        {icon}
+        <div className="flex min-w-0 flex-col">
+          <span className="text-foreground truncate text-sm">{label}</span>
+          {meta ? (
+            <span className="text-muted-foreground mt-0.5 text-xs">{meta}</span>
+          ) : null}
+        </div>
+      </div>
+      {children ? (
+        <div className="flex shrink-0 items-center gap-2">{children}</div>
+      ) : null}
+    </div>
+  );
+}
+
+const toastStatusVariants = cva(
+  'flex size-6 shrink-0 items-center justify-center rounded-full [&>svg]:size-3.5',
+  {
+    variants: {
+      status: {
+        pending: 'text-primary',
+        success: 'bg-success text-success-foreground',
+        warning: 'bg-warning text-warning-foreground',
+        destructive: 'bg-destructive text-destructive-foreground',
+        info: 'bg-info text-info-foreground',
+      },
+    },
+    defaultVariants: { status: 'pending' },
+  },
+);
+
+const STATUS_ICON = {
+  pending: <Spinner size="sm" />,
+  success: <Check strokeWidth={3} />,
+  warning: <TriangleAlert strokeWidth={3} />,
+  destructive: <AlertCircle strokeWidth={3} />,
+  info: <Info strokeWidth={3} />,
+} as const;
+
+/** Filled status circle for a ToastItem. */
+function ToastStatus({
+  className,
+  status = 'pending',
+  label,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof toastStatusVariants> & { label?: string }) {
+  return (
+    <span
+      data-slot="toast-status"
+      data-status={status}
+      role="img"
+      aria-label={label ?? status ?? undefined}
+      className={cn(toastStatusVariants({ status }), className)}
+      {...props}
+    >
+      {STATUS_ICON[status ?? 'pending']}
+    </span>
+  );
+}
+
+// `first:pt-3` pads a message that is the only content under the header;
+// under a ToastItem the row's own padding already spaces it.
+const toastMessageVariants = cva(
+  'border-border/50 block border-b px-5 pb-3 last:border-b-0 first:pt-3',
+  {
+    variants: {
+      variant: {
+        default: 'text-muted-foreground',
+        success: 'text-success',
+        warning: 'text-warning',
+        destructive: 'text-destructive',
+        info: 'text-info',
+      },
+      size: {
+        xs: 'text-xs',
+        sm: 'text-sm leading-4.5',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'xs' },
+  },
+);
+
+/**
+ * Explanation under a row (why a file failed), or the whole body of a
+ * notice when it is the only content (`size="sm"`).
+ */
+function ToastMessage({
+  className,
+  variant = 'default',
+  size = 'xs',
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof toastMessageVariants>) {
+  return (
+    <span
+      data-slot="toast-message"
+      data-variant={variant}
+      data-size={size}
+      className={cn(toastMessageVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  ToastViewport,
+  Toast,
+  ToastHeader,
+  ToastTitle,
+  ToastActions,
+  ToastContent,
+  ToastFooter,
+  ToastItem,
+  ToastStatus,
+  ToastMessage,
+  toastHeaderVariants,
+};
diff --git a/frontend/src/components/ui/toggle-group.test.tsx b/frontend/src/components/ui/toggle-group.test.tsx
new file mode 100644
index 00000000..c0da6f7e
--- /dev/null
+++ b/frontend/src/components/ui/toggle-group.test.tsx
@@ -0,0 +1,44 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+
+const range = (value: string, size?: 'xs' | 'sm') =>
+  renderToStaticMarkup(
+    <ToggleGroup type="single" value={value} size={size} aria-label="Range">
+      <ToggleGroupItem value="7">7d</ToggleGroupItem>
+      <ToggleGroupItem value="30">30d</ToggleGroupItem>
+    </ToggleGroup>,
+  );
+
+/** The class attribute of the item whose text is `label`. */
+function itemClasses(html: string, label: string): string {
+  const match = new RegExp(`<button[^>]*class="([^"]*)"[^>]*>${label}<`).exec(
+    html,
+  );
+  return match?.[1] ?? '';
+}
+
+describe('ToggleGroup', () => {
+  it('is a radio group of pills', () => {
+    const html = range('30');
+    expect(html).toContain('role="radiogroup"');
+    expect(html).toContain('aria-label="Range"');
+    expect(itemClasses(html, '30d')).toContain('rounded-full');
+  });
+
+  it('draws the on item as outline and the off item as ghost-muted', () => {
+    const html = range('30');
+    const on = itemClasses(html, '30d');
+    const off = itemClasses(html, '7d');
+    expect(on).toContain('data-[state=on]:bg-background');
+    expect(on).toContain('data-[state=on]:border-border');
+    expect(off).toContain('text-muted-foreground');
+    expect(html).toMatch(/aria-checked="true"[^>]*>30d</);
+  });
+
+  it('sizes items sm (32px) by default and xs (28px) on request', () => {
+    expect(itemClasses(range('7'), '7d')).toContain('h-8');
+    expect(itemClasses(range('7', 'xs'), '7d')).toContain('h-7');
+  });
+});
diff --git a/frontend/src/components/ui/toggle-group.tsx b/frontend/src/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..b7ec2342
--- /dev/null
+++ b/frontend/src/components/ui/toggle-group.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+
+import { buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type ToggleSize = 'xs' | 'sm';
+
+const ToggleGroupSizeContext = React.createContext<ToggleSize>('sm');
+
+/**
+ * The segmented "one of N" (or "any of N") control: pill items, the on item
+ * drawn as `outline` (bg-background, border, shadow-xs) and the rest as
+ * `ghost-muted`. Radix makes a `type="single"` group a radiogroup with one
+ * Tab stop and arrow keys. A single group sends "" when the on item is
+ * clicked again; ignore it in `onValueChange` to keep one value selected.
+ */
+function ToggleGroup({
+  className,
+  size = 'sm',
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & {
+  size?: ToggleSize;
+}) {
+  return (
+    <ToggleGroupSizeContext.Provider value={size}>
+      <ToggleGroupPrimitive.Root
+        data-slot="toggle-group"
+        className={cn('flex flex-wrap items-center gap-1', className)}
+        {...props}
+      />
+    </ToggleGroupSizeContext.Provider>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
+  const size = React.useContext(ToggleGroupSizeContext);
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={cn(
+        buttonVariants({ variant: 'ghost-muted', size, shape: 'pill' }),
+        'data-[state=on]:border-border data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:dark:border-input data-[state=on]:dark:bg-input/30 data-[state=on]:dark:hover:bg-input/50 border border-transparent data-[state=on]:shadow-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/frontend/src/components/ui/tooltip.test.tsx b/frontend/src/components/ui/tooltip.test.tsx
new file mode 100644
index 00000000..df3e9029
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.test.tsx
@@ -0,0 +1,41 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+describe('Tooltip', () => {
+  it('renders its trigger without needing an app-level provider', () => {
+    const html = renderToStaticMarkup(
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button">Delete</button>
+        </TooltipTrigger>
+        <TooltipContent>Delete this source</TooltipContent>
+      </Tooltip>,
+    );
+    expect(html).toContain('data-slot="tooltip-trigger"');
+    expect(html).toContain('Delete');
+  });
+});
+
+describe('Tooltip timing', () => {
+  it('opens after 400ms', async () => {
+    const { TOOLTIP_DELAY_MS } = await import('./tooltip');
+    expect(TOOLTIP_DELAY_MS).toBe(400);
+  });
+
+  it('renders inside an app-level provider without adding its own', async () => {
+    const { TooltipProvider } = await import('./tooltip');
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button type="button">Copy</button>
+          </TooltipTrigger>
+          <TooltipContent>Copy</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(html).toContain('data-slot="tooltip-trigger"');
+  });
+});
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..79a11ad3
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+/** Hover delay before a tooltip opens (Pavel, phase 7: 400ms, not shadcn's 0). */
+const TOOLTIP_DELAY_MS = 400;
+
+/** True under a TooltipProvider, so a Tooltip knows not to add its own. */
+const InProviderContext = React.createContext(false);
+
+/**
+ * Mount once near the app root: tooltips under one provider share Radix's
+ * skip-delay, so moving along a row of icon buttons opens each at once
+ * after the first.
+ */
+function TooltipProvider({
+  delayDuration = TOOLTIP_DELAY_MS,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <InProviderContext.Provider value>
+      <TooltipPrimitive.Provider
+        data-slot="tooltip-provider"
+        delayDuration={delayDuration}
+        {...props}
+      />
+    </InProviderContext.Provider>
+  );
+}
+
+/** Uses the app-level provider when there is one, else carries its own. */
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  const inProvider = React.useContext(InProviderContext);
+  const root = <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+  return inProvider ? root : <TooltipProvider>{root}</TooltipProvider>;
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-200 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-200 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TOOLTIP_DELAY_MS,
+};
diff --git a/frontend/src/components/wikiViewerUtils.test.ts b/frontend/src/components/wikiViewerUtils.test.ts
index 73461e80..b4b0f7d5 100644
--- a/frontend/src/components/wikiViewerUtils.test.ts
+++ b/frontend/src/components/wikiViewerUtils.test.ts
@@ -1,10 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import {
-  formatRelativeTime,
-  provenanceKey,
-  saveWikiPage,
-} from './wikiViewerUtils';
+import { provenanceKey, saveWikiPage } from './wikiViewerUtils';
 
 const jsonResponse = (status: number, body: unknown): Response =>
   ({
@@ -13,26 +9,6 @@ const jsonResponse = (status: number, body: unknown): Response =>
     json: () => Promise.resolve(body),
   }) as unknown as Response;
 
-describe('formatRelativeTime', () => {
-  const now = Date.parse('2026-06-22T12:00:00Z');
-
-  it('returns null for empty or invalid values', () => {
-    expect(formatRelativeTime(null, now)).toBeNull();
-    expect(formatRelativeTime(undefined, now)).toBeNull();
-    expect(formatRelativeTime('not-a-date', now)).toBeNull();
-  });
-
-  it('formats a recent edit in minutes', () => {
-    const fiveMinAgo = new Date(now - 5 * 60000).toISOString();
-    expect(formatRelativeTime(fiveMinAgo, now)).toBe('5 minutes ago');
-  });
-
-  it('formats an older edit in days', () => {
-    const threeDaysAgo = new Date(now - 3 * 86400000).toISOString();
-    expect(formatRelativeTime(threeDaysAgo, now)).toBe('3 days ago');
-  });
-});
-
 describe('provenanceKey', () => {
   it('maps the current user to "you"', () => {
     expect(provenanceKey('human', 'user-1', 'user-1')).toBe('you');
diff --git a/frontend/src/components/wikiViewerUtils.ts b/frontend/src/components/wikiViewerUtils.ts
index 080dc9c5..c596355c 100644
--- a/frontend/src/components/wikiViewerUtils.ts
+++ b/frontend/src/components/wikiViewerUtils.ts
@@ -10,31 +10,6 @@ export interface WikiPageNode {
   content?: string;
 }
 
-const RELATIVE_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
-  ['year', 31536000000],
-  ['month', 2592000000],
-  ['day', 86400000],
-  ['hour', 3600000],
-  ['minute', 60000],
-];
-
-export function formatRelativeTime(
-  value: string | null | undefined,
-  now: number = Date.now(),
-): string | null {
-  if (!value) return null;
-  const then = new Date(value).getTime();
-  if (Number.isNaN(then)) return null;
-  const diffMs = now - then;
-  const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
-  for (const [unit, ms] of RELATIVE_UNITS) {
-    if (Math.abs(diffMs) >= ms) {
-      return formatter.format(-Math.round(diffMs / ms), unit);
-    }
-  }
-  return formatter.format(0, 'second');
-}
-
 export function provenanceKey(
   via?: string | null,
   by?: string | null,
diff --git a/frontend/src/conversation/AnswerFlow.test.tsx b/frontend/src/conversation/AnswerFlow.test.tsx
index 741db333..44e77d6c 100644
--- a/frontend/src/conversation/AnswerFlow.test.tsx
+++ b/frontend/src/conversation/AnswerFlow.test.tsx
@@ -71,7 +71,7 @@ describe('AnswerFlow', () => {
       toolCalls: [search()],
       segments: [{ kind: 'tool', call_id: 'c1' }],
     });
-    expect(html.split('fade-in-bubble').length - 1).toBe(1);
+    expect(html.split('slide-in-from-bottom-1.5').length - 1).toBe(1);
     expect(html.indexOf('Searched the web')).toBeLessThan(
       html.indexOf('part one part two'),
     );
@@ -139,7 +139,7 @@ describe('AnswerFlow', () => {
       isStreaming: true,
     });
     expect(html).toContain('Searching the web');
-    expect(html).not.toContain('fade-in-bubble');
+    expect(html).not.toContain('slide-in-from-bottom-1.5');
   });
 });
 
diff --git a/frontend/src/conversation/AnswerFlow.tsx b/frontend/src/conversation/AnswerFlow.tsx
index 6fa071fa..6f8c79c0 100644
--- a/frontend/src/conversation/AnswerFlow.tsx
+++ b/frontend/src/conversation/AnswerFlow.tsx
@@ -1,9 +1,8 @@
+import { ChevronDown, Cloud } from 'lucide-react';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import SchedulerToolCallCard from '../agents/schedules/SchedulerToolCallCard';
-import ChevronDown from '../assets/chevron-down.svg?react';
-import Cloud from '../assets/cloud.svg';
 import CopyButton from '../components/CopyButton';
 import ToolIcon from '../components/ToolIcon';
 import { Button } from '../components/ui/button';
@@ -18,6 +17,7 @@ import { type SandboxArtifact } from './sandboxLinks';
 import StreamingStatusLine from './StreamingStatusLine';
 import { ToolCallsType } from './types';
 import { isWikiWriteCall } from './wikiToolCall';
+import { cn } from '@/lib/utils';
 
 type AnswerFlowProps = {
   message?: string;
@@ -129,7 +129,7 @@ export default function AnswerFlow({
         <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
           {/* ``ml-6`` is the answer's text column: step labels sit at the same
               offset, with their icons in the gutter to its left. */}
-          <div className="fade-in-bubble my-2 mr-5 ml-6 flex max-w-full flex-col">
+          <div className="animate-in fade-in slide-in-from-bottom-1.5 my-2 mr-5 ml-6 flex max-w-full flex-col duration-260 ease-out motion-reduce:animate-none">
             <MarkdownAnswer
               content={message}
               isStreaming={isStreaming}
@@ -180,31 +180,32 @@ function InlineThoughtChip({
         variant="ghost"
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
-        // ml-4 plus the button's own px-2 puts the icon on the answer's ml-6
-        // text column. has-[>svg]:px-2 restates that padding under the same
-        // variant the button's own has-[>svg]:px-3 uses; a plain px-2 does not
-        // override it, and the chevron makes it match.
-        className="hover:bg-muted/60 ml-4 flex h-auto w-fit max-w-full items-center justify-start gap-2 rounded-lg bg-transparent px-2 py-1.5 text-sm font-normal has-[>svg]:px-2"
+        size="sm"
+        // ml-3.5 plus size sm's own has-[>svg]:px-2.5 (the chevron is a direct
+        // svg child) puts the icon on the answer's ml-6 text column.
+        className="ml-3.5 w-fit max-w-full justify-start"
       >
-        <img src={Cloud} alt="" aria-hidden className="h-4 w-4 shrink-0" />
+        <Cloud aria-hidden />
         <span
-          className={`min-w-0 truncate text-left ${
-            isActive ? 'shimmer-text' : 'text-muted-foreground'
-          }`}
+          className={cn(
+            'min-w-0 truncate text-left',
+            isActive ? 'shimmer-text' : 'text-muted-foreground',
+          )}
         >
           {t('conversation.reasoning')}
         </span>
         <ChevronDown
           aria-hidden
-          className={`text-muted-foreground h-4 w-4 shrink-0 transform transition-transform duration-200 ${
-            isOpen ? 'rotate-180' : ''
-          }`}
+          className={cn(
+            'text-muted-foreground shrink-0 transition-transform duration-200',
+            isOpen ? 'rotate-180' : '',
+          )}
         />
       </Button>
       {showLiveWindow && (
         <div
           ref={liveRef}
-          className="text-muted-foreground mt-1 ml-6 h-24 overflow-hidden scroll-smooth mask-[linear-gradient(to_bottom,transparent,black_40%)] text-sm leading-normal motion-reduce:scroll-auto"
+          className="text-muted-foreground mt-1 ml-6 h-24 overflow-hidden scroll-smooth mask-t-from-60% text-sm leading-normal motion-reduce:scroll-auto"
         >
           <div className="flex min-h-full flex-col justify-end wrap-break-word whitespace-pre-wrap">
             {pacedThought}
@@ -217,7 +218,7 @@ function InlineThoughtChip({
         </p>
       )}
       {isOpen && (
-        <p className="fade-in text-muted-foreground mt-0.5 ml-6 text-sm leading-normal wrap-break-word whitespace-pre-wrap">
+        <p className="animate-in fade-in text-muted-foreground mt-0.5 ml-6 text-sm leading-normal wrap-break-word whitespace-pre-wrap duration-160 ease-out motion-reduce:animate-none">
           {thought}
         </p>
       )}
@@ -246,29 +247,30 @@ function InlineToolCallChip({
         variant="ghost"
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
-        // ml-4 plus the button's own px-2 puts the icon on the answer's ml-6
-        // text column. has-[>svg]:px-2 restates that padding under the same
-        // variant the button's own has-[>svg]:px-3 uses; a plain px-2 does not
-        // override it, and the chevron makes it match.
-        className="hover:bg-muted/60 ml-4 flex h-auto w-fit max-w-full items-center justify-start gap-2 rounded-lg bg-transparent px-2 py-1.5 text-sm font-normal has-[>svg]:px-2"
+        size="sm"
+        // ml-3.5 plus size sm's own has-[>svg]:px-2.5 (the chevron is a direct
+        // svg child) puts the icon on the answer's ml-6 text column.
+        className="ml-3.5 w-fit max-w-full justify-start"
       >
         {/* ToolIcon renders nothing for a tool with no bundled icon, so the
             dot below stands in via ``only:block`` to keep the row aligned. */}
         <span
-          className={`flex h-4 w-4 shrink-0 items-center justify-center ${
-            isLive ? 'animate-pulse' : ''
-          }`}
+          className={cn(
+            'flex size-4 shrink-0 items-center justify-center',
+            isLive ? 'animate-pulse' : '',
+          )}
         >
           <ToolIcon
             name={toolCall.tool_name}
-            className="text-muted-foreground h-4 w-4"
+            className="text-muted-foreground size-4"
           />
-          <span className="bg-muted-foreground/50 hidden h-1.5 w-1.5 rounded-full only:block" />
+          <span className="bg-muted-foreground/50 hidden size-1.5 rounded-full only:block" />
         </span>
         <span
-          className={`min-w-0 truncate text-left ${
-            isLive ? 'shimmer-text' : 'text-muted-foreground'
-          }`}
+          className={cn(
+            'min-w-0 truncate text-left',
+            isLive ? 'shimmer-text' : 'text-muted-foreground',
+          )}
         >
           {label}
         </span>
@@ -279,13 +281,14 @@ function InlineToolCallChip({
         )}
         <ChevronDown
           aria-hidden
-          className={`text-muted-foreground h-4 w-4 shrink-0 transform transition-transform duration-200 ${
-            isOpen ? 'rotate-180' : ''
-          }`}
+          className={cn(
+            'text-muted-foreground shrink-0 transition-transform duration-200',
+            isOpen ? 'rotate-180' : '',
+          )}
         />
       </Button>
       {isOpen && (
-        <div className="fade-in mt-2 mr-5 ml-6 flex flex-col gap-2">
+        <div className="animate-in fade-in mt-2 mr-5 ml-6 flex flex-col gap-2 duration-160 ease-out motion-reduce:animate-none">
           <ToolCallPanel
             title={t('conversation.inlineSteps.arguments')}
             copyText={JSON.stringify(toolCall.arguments ?? {}, null, 2)}
@@ -304,7 +307,10 @@ function InlineToolCallChip({
           >
             {isRunning && (
               <p
-                className={`text-xs ${isLive ? 'shimmer-text' : 'text-muted-foreground'}`}
+                className={cn(
+                  'text-xs',
+                  isLive ? 'shimmer-text' : 'text-muted-foreground',
+                )}
               >
                 {t('conversation.inlineSteps.running')}
               </p>
@@ -343,7 +349,7 @@ export function ToolCallPanel({
   children: React.ReactNode;
 }) {
   return (
-    <div className="bg-muted/50 dark:bg-answer-bubble overflow-hidden rounded-xl">
+    <div className="bg-answer-bubble overflow-hidden rounded-xl">
       <div className="flex items-center justify-between px-3 py-1.5">
         <span className="text-muted-foreground text-xs font-medium">
           {title}
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 592509f8..ee06afda 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -39,6 +39,7 @@ import {
   selectAttachments,
   selectCompletedAttachments,
 } from '../upload/uploadSlice';
+import { cn } from '@/lib/utils';
 
 export default function Conversation() {
   const { t } = useTranslation();
@@ -372,9 +373,10 @@ export default function Conversation() {
   return (
     <div className="flex h-full">
       <div
-        className={`flex h-full min-h-0 flex-col transition-all ${
-          isSplitArtifactOpen ? 'w-[60%] px-6' : 'w-full'
-        }`}
+        className={cn(
+          'flex h-full min-h-0 flex-col transition-[width,padding]',
+          isSplitArtifactOpen ? 'w-[60%] px-6' : 'w-full',
+        )}
       >
         <div className="relative min-h-0 flex-1">
           {/* A render crash in the message list must leave the composer
@@ -408,22 +410,24 @@ export default function Conversation() {
             />
           </ErrorBoundary>
           <div
-            className={`from-background pointer-events-none absolute bottom-0 left-1/2 h-6 w-full -translate-x-1/2 rounded-t-2xl bg-linear-to-t to-transparent bg-clip-content px-2 ${
+            className={cn(
+              'from-background pointer-events-none absolute bottom-0 left-1/2 h-6 w-full -translate-x-1/2 rounded-t-2xl bg-linear-to-t to-transparent bg-clip-content px-2',
               isSplitArtifactOpen
                 ? 'max-w-325'
-                : 'max-w-325 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12'
-            }`}
+                : 'max-w-325 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12',
+            )}
           />
         </div>
 
         {/* One notch narrower than the message column above it, which keeps its
             own width. */}
         <div
-          className={`bg-opacity-0 z-3 flex h-auto w-full flex-col items-end self-center rounded-2xl py-1 ${
+          className={cn(
+            'z-10 flex h-auto w-full flex-col items-end self-center rounded-2xl py-1',
             isSplitArtifactOpen
               ? 'max-w-290'
-              : 'max-w-290 md:w-10/12 lg:w-9/12 xl:w-8/12 2xl:w-7/12'
-          }`}
+              : 'max-w-290 md:w-10/12 lg:w-9/12 xl:w-8/12 2xl:w-7/12',
+          )}
         >
           <div className="flex w-full items-center rounded-full px-2">
             <MessageInput
diff --git a/frontend/src/conversation/ConversationBubble.test.tsx b/frontend/src/conversation/ConversationBubble.test.tsx
new file mode 100644
index 00000000..62016644
--- /dev/null
+++ b/frontend/src/conversation/ConversationBubble.test.tsx
@@ -0,0 +1,405 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+import en from '../locale/en.json';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) =>
+      key
+        .split('.')
+        .reduce<unknown>(
+          (node, part) => (node as Record<string, unknown>)?.[part],
+          en,
+        ) ?? key,
+  }),
+}));
+
+import ConversationBubble from './ConversationBubble';
+import { ToolCallsType } from './types';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+// Mirrors the mocked t(): the English copy, or the key while it is unmerged.
+const tr = (key: string): string =>
+  (key
+    .split('.')
+    .reduce<unknown>(
+      (node, part) => (node as Record<string, unknown>)?.[part],
+      en,
+    ) as string | undefined) ?? key;
+
+const makeStore = () =>
+  configureStore({
+    reducer: {
+      preference: () => ({
+        chunks: '2',
+        selectedDocs: [],
+        token: null,
+        ttsAvailable: false,
+      }),
+    },
+  });
+
+const pendingCall: ToolCallsType = {
+  tool_name: 'crm',
+  action_name: 'crm_update',
+  call_id: 'call-1',
+  arguments: { id: 7 },
+  status: 'awaiting_approval',
+};
+
+describe('ConversationBubble', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (ui: React.ReactElement) => {
+    await act(async () => {
+      root.render(<Provider store={makeStore()}>{ui}</Provider>);
+    });
+  };
+
+  const buttonByText = (text: string) =>
+    Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === text,
+    ) as HTMLButtonElement;
+
+  it('renders the approval bar on Button variants and disables Approve while a deny reason is typed', async () => {
+    await render(
+      <ConversationBubble
+        type="ANSWER"
+        toolCalls={[pendingCall]}
+        onToolAction={() => {}}
+      />,
+    );
+
+    const approve = buttonByText(tr('conversation.toolApproval.approve'));
+    const deny = buttonByText(tr('conversation.toolApproval.deny'));
+    expect(approve.dataset.variant).toBe('default');
+    expect(approve.dataset.size).toBe('xs');
+    expect(approve.dataset.shape).toBe('pill');
+    expect(approve.disabled).toBe(false);
+    expect(deny.dataset.variant).toBe('outline');
+    expect(deny.dataset.size).toBe('xs');
+
+    const details = container.querySelector(
+      `button[aria-label="${tr('conversation.toolApproval.details')}"]`,
+    ) as HTMLButtonElement;
+    expect(details.dataset.variant).toBe('ghost-muted');
+    expect(details.dataset.size).toBe('icon-xs');
+    expect(details.hasAttribute('title')).toBe(false);
+    expect(details.getAttribute('aria-expanded')).toBe('false');
+
+    await act(async () => deny.click());
+    const input = container.querySelector('input') as HTMLInputElement;
+    expect(input.dataset.size).toBe('sm');
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      )!.set!;
+      setter.call(input, 'wrong record');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(buttonByText(tr('conversation.toolApproval.approve')).disabled).toBe(
+      true,
+    );
+    expect(
+      buttonByText(tr('conversation.toolApproval.deny')).dataset.variant,
+    ).toBe('destructive-outline');
+  });
+
+  // L9: the arguments block sits on the muted approval card, so it is a
+  // subtle Card (bordered well on the page background) around the recipe.
+  it('shows the approval arguments in a subtle Card with the mono recipe', async () => {
+    await render(
+      <ConversationBubble
+        type="ANSWER"
+        toolCalls={[pendingCall]}
+        onToolAction={() => {}}
+      />,
+    );
+    const details = container.querySelector(
+      `button[aria-label="${tr('conversation.toolApproval.details')}"]`,
+    ) as HTMLButtonElement;
+    await act(async () => details.click());
+    const pre = container.querySelector('pre')!;
+    expect(pre.textContent).toContain('"id": 7');
+    expect(pre.className.split(' ')).toEqual(
+      expect.arrayContaining([
+        'font-mono',
+        'text-xs',
+        'whitespace-pre-wrap',
+        'wrap-break-word',
+      ]),
+    );
+    const card = pre.parentElement!;
+    expect(card.getAttribute('data-slot')).toBe('card');
+    expect(card.getAttribute('data-variant')).toBe('subtle');
+    expect(card.getAttribute('data-padding')).toBe('sm');
+  });
+
+  it('renders artifact chips as secondary pills and feedback as muted icon buttons', async () => {
+    await render(
+      <ConversationBubble
+        type="ANSWER"
+        message="Done."
+        feedback="LIKE"
+        handleFeedback={() => {}}
+        onOpenArtifact={() => {}}
+        toolCalls={[
+          {
+            tool_name: 'code_executor',
+            action_name: 'code_executor_run',
+            call_id: 'call-2',
+            arguments: {},
+            status: 'completed',
+            artifact_id: 'art-1',
+          } as ToolCallsType,
+        ]}
+      />,
+    );
+
+    const viewArtifact =
+      (en.conversation as Record<string, unknown>).viewArtifact ??
+      'conversation.viewArtifact';
+    const chips = container.querySelectorAll(
+      `button[aria-label="${viewArtifact}"]`,
+    );
+    expect(chips.length).toBe(1);
+    chips.forEach((chip) => {
+      expect((chip as HTMLElement).dataset.variant).toBe('secondary');
+      expect((chip as HTMLElement).dataset.shape).toBe('pill');
+    });
+
+    const like = container.querySelector(
+      `button[aria-label="${tr('conversation.feedback.removeLike')}"]`,
+    ) as HTMLButtonElement;
+    expect(like.dataset.variant).toBe('ghost-muted');
+    expect(like.dataset.size).toBe('icon-sm');
+    expect(like.dataset.shape).toBe('pill');
+
+    // Every icon button in the row under the answer is a 32px muted pill
+    // with a tooltip trigger and no native title.
+    const copy = container.querySelector(
+      `button[aria-label="${en.conversation.copy}"]`,
+    ) as HTMLButtonElement;
+    const dislike = container.querySelector(
+      `button[aria-label="${tr('conversation.feedback.dislike')}"]`,
+    ) as HTMLButtonElement;
+    for (const btn of [copy, like, dislike]) {
+      expect(btn.dataset.variant).toBe('ghost-muted');
+      expect(btn.dataset.size).toBe('icon-sm');
+      expect(btn.dataset.shape).toBe('pill');
+      expect(btn.hasAttribute('title')).toBe(false);
+      expect(btn.dataset.state).toBe('closed');
+    }
+  });
+
+  it('renders the question edit actions as pill buttons', async () => {
+    await render(<ConversationBubble type="QUESTION" message="Hello" />);
+
+    const edit = container.querySelector(
+      `button[aria-label="${tr('conversation.edit.label')}"]`,
+    ) as HTMLButtonElement;
+    expect(edit.dataset.size).toBe('icon-xs');
+    expect(edit.dataset.shape).toBe('pill');
+    await act(async () => edit.click());
+
+    const cancel = buttonByText(en.conversation.edit.cancel);
+    const update = buttonByText(en.conversation.edit.update);
+    expect(cancel.dataset.variant).toBe('ghost');
+    expect(cancel.dataset.shape).toBe('pill');
+    expect(update.dataset.variant).toBe('default');
+    expect(update.dataset.shape).toBe('pill');
+    expect(update.disabled).toBe(true);
+  });
+
+  it('renders the question on the secondary tint with a foreground chevron', async () => {
+    const scrollHeight = vi
+      .spyOn(HTMLElement.prototype, 'scrollHeight', 'get')
+      .mockReturnValue(200);
+    await render(<ConversationBubble type="QUESTION" message="Hello" />);
+    scrollHeight.mockRestore();
+
+    const bubble = Array.from(
+      container.querySelectorAll<HTMLElement>('div'),
+    ).find((el) => el.className.includes('rounded-3xl'))!;
+    expect(bubble.className).toContain('bg-secondary');
+    expect(bubble.className).toContain('text-foreground');
+    expect(bubble.className).not.toMatch(/bg-primary|text-primary-foreground/);
+
+    const toggle = bubble.querySelector<HTMLButtonElement>(
+      `button[aria-label="${tr('conversation.question.expand')}"]`,
+    )!;
+    expect(toggle.dataset.variant).toBe('ghost');
+    expect(toggle.className).not.toContain('white/20');
+    expect(toggle.querySelector('img')).toBeNull();
+    expect(toggle.querySelector('svg')).not.toBeNull();
+  });
+  describe('source cards', () => {
+    const sources = [
+      { title: 'Guide', text: 'Guide text', link: 'https://example.com/guide' },
+      { title: 'Notes', text: 'Notes text', link: 'local' },
+    ];
+    const sheet = () => document.body.querySelector('[role="dialog"]');
+    const cards = () =>
+      Array.from(
+        container.querySelectorAll<HTMLElement>('[id^="source-"] > div'),
+      );
+    const cardButton = (i: number) =>
+      cards()[i].querySelector<HTMLButtonElement>(':scope > button')!;
+
+    it('opens the sources sheet when a card is clicked', async () => {
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={sources} />,
+      );
+      expect(sheet()).toBeNull();
+      await act(async () => cardButton(1).click());
+      expect(sheet()).not.toBeNull();
+    });
+
+    it('is a native stretched button with the focus ring on the card', async () => {
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={sources} />,
+      );
+      const card = cards()[0];
+      expect(card.getAttribute('role')).toBeNull();
+      expect(card.hasAttribute('tabindex')).toBe(false);
+      expect(card.className).toContain('relative');
+      expect(card.className).toContain('has-[>button:focus-visible]:ring-3');
+      const button = cardButton(0);
+      expect(button.type).toBe('button');
+      expect(button.className).toContain('outline-none');
+      expect(button.className).toContain('after:absolute');
+      expect(button.className).toContain('after:inset-0');
+      // A button takes phrasing content only.
+      expect(button.querySelector('p, div')).toBeNull();
+      expect(button.textContent).toBe('Guide text');
+    });
+
+    it('keeps the link outside the button and in tab order after it', async () => {
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={sources} />,
+      );
+      const card = cards()[0];
+      expect(cardButton(0).querySelector('a')).toBeNull();
+      const link = card.querySelector<HTMLAnchorElement>(':scope > a')!;
+      expect(link).not.toBeNull();
+      expect(link.className).toContain('relative');
+      expect(link.className).toContain('z-10');
+      const stops = Array.from(
+        container.querySelectorAll<HTMLElement>(
+          '[id^="source-"] button, [id^="source-"] a',
+        ),
+      );
+      expect(stops).toEqual([cardButton(0), link, cardButton(1)]);
+    });
+
+    it('shows no hover preview', async () => {
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={sources} />,
+      );
+      await act(async () => {
+        cards()[0].dispatchEvent(
+          new MouseEvent('mouseover', { bubbles: true }),
+        );
+      });
+      expect(container.querySelector('.bg-popover')).toBeNull();
+      expect(container.textContent?.match(/Guide text/g)?.length).toBe(1);
+    });
+
+    it('follows the link without opening the sheet', async () => {
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={sources} />,
+      );
+      const link = cards()[0].querySelector('a')!;
+      link.addEventListener('click', (e) => e.preventDefault());
+      await act(async () => link.click());
+      expect(sheet()).toBeNull();
+    });
+
+    it('renders "more sources" as a focus-ringed button that opens the sheet', async () => {
+      const many = [1, 2, 3, 4, 5].map((n) => ({
+        title: `S${n}`,
+        text: `Text ${n}`,
+        link: 'local',
+      }));
+      await render(
+        <ConversationBubble type="ANSWER" message="Hi" sources={many} />,
+      );
+      const more = Array.from(
+        container.querySelectorAll<HTMLButtonElement>('button'),
+      ).find((b) => b.className.includes('flex-col-reverse'))!;
+      expect(more).toBeDefined();
+      expect(more.type).toBe('button');
+      expect(more.getAttribute('role')).toBeNull();
+      expect(more.className).toContain('outline-none');
+      expect(more.className).toContain('focus-visible:ring-3');
+      expect(more.className).toContain('text-left');
+      await act(async () => more.click());
+      expect(sheet()).not.toBeNull();
+    });
+  });
+
+  it('shows a failed answer as a destructive Alert with the raw error as detail', async () => {
+    const raw = 'AuthenticationError: Error code: 401 - invalid_api_key';
+    await render(
+      <ConversationBubble
+        type="ERROR"
+        message={raw}
+        retryBtn={<button type="button">retry</button>}
+      />,
+    );
+    const alert = container.querySelector<HTMLElement>('[role="alert"]')!;
+    expect(alert.dataset.slot).toBe('alert');
+    expect(alert.dataset.variant).toBe('destructive');
+    expect(alert.className).not.toContain('rounded-full');
+    expect(alert.textContent).toContain(tr('conversation.failedTitle'));
+    const detail = alert.querySelector('[data-slot="alert-description"]')!;
+    expect(detail.textContent).toContain(raw);
+    expect(detail.innerHTML).toContain('font-mono');
+    // Retry sits beside a Copy button that copies the error for a report.
+    const copy = container.querySelector<HTMLButtonElement>(
+      `button[aria-label="${tr('conversation.copy')}"]`,
+    );
+    expect(copy).not.toBeNull();
+    expect(buttonByText('retry')).toBeDefined();
+  });
+
+  it('makes the Sources header a step row that opens the All sources sheet', async () => {
+    const sources = [1, 2, 3, 4].map((n) => ({
+      title: `Doc ${n}`,
+      text: `Excerpt ${n}`,
+      link: `doc-${n}.pdf`,
+    }));
+    await render(
+      <ConversationBubble type="ANSWER" message="Answer" sources={sources} />,
+    );
+    const header = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(
+        'button[data-variant="ghost"]',
+      ),
+    ).find((b) => b.textContent?.includes(tr('conversation.sources.title')))!;
+    expect(header).toBeDefined();
+    expect(header.dataset.size).toBe('sm');
+    expect(header.textContent).toContain('4');
+    expect(header.getAttribute('aria-haspopup')).toBe('dialog');
+    await act(async () => header.click());
+    expect(document.body.querySelector('[role="dialog"]')).not.toBeNull();
+  });
+});
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 557ec121..7c3fa653 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,26 +1,35 @@
 import { envVar } from '@/env';
+import { cn, focusRing } from '@/lib/utils';
 import 'katex/dist/katex.min.css';
 
-import { Pencil } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronRight,
+  CircleAlert,
+  Database,
+  Download,
+  Eye,
+  FileText,
+  Paperclip,
+  Pencil,
+  ThumbsDown,
+  ThumbsUp,
+  ExternalLink,
+} from 'lucide-react';
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import WorkflowRunArtifacts from '../agents/workflow/WorkflowRunArtifacts';
-import ChevronDown from '../assets/chevron-down.svg';
-import Dislike from '../assets/dislike.svg?react';
-import Document from '../assets/document.svg';
-import DocumentationDark from '../assets/documentation-dark.svg';
-import Edit from '../assets/edit.svg';
-import Like from '../assets/like.svg?react';
-import Link from '../assets/link.svg';
-import Sources from '../assets/sources.svg';
 import CopyButton from '../components/CopyButton';
 
-import { Avatar } from '../components/ui/avatar';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
+import { IconButton } from '../components/ui/icon-button';
 import { Input } from '../components/ui/input';
 import { Sheet, SheetContent } from '../components/ui/sheet';
+import { Textarea } from '../components/ui/textarea';
 import SpeakButton from '../components/TextToSpeechButton';
 import { useOutsideAlerter } from '../hooks';
 import {
@@ -34,7 +43,6 @@ import AnswerFlow from './AnswerFlow';
 import { AnswerSegment } from './answerSegments';
 import { deriveArtifactChips } from './artifactChips';
 import { FEEDBACK, MESSAGE_TYPE, ResearchState } from './conversationModels';
-import MarkdownAnswer from './MarkdownAnswer';
 import ResearchProgress from './ResearchProgress';
 import { ToolCallsType } from './types';
 import { wikiWriteActionKey, wikiWritePath } from './wikiToolCall';
@@ -117,7 +125,6 @@ const ConversationBubble = forwardRef<
   const messageRef = useRef<HTMLDivElement>(null);
   const [shouldShowToggle, setShouldShowToggle] = useState(false);
 
-  const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
   const editableQueryRef = useRef<HTMLDivElement>(null);
   const [isQuestionCollapsed, setIsQuestionCollapsed] = useState(true);
@@ -142,7 +149,7 @@ const ConversationBubble = forwardRef<
   let bubble;
   if (type === 'QUESTION') {
     bubble = (
-      <div className={`group ${className}`}>
+      <div className={cn('group', className)}>
         <div className="flex flex-col items-end">
           {filesAttached && filesAttached.length > 0 && (
             <div className="mr-5 mb-4 flex flex-wrap justify-end gap-2">
@@ -150,13 +157,12 @@ const ConversationBubble = forwardRef<
                 <div
                   key={index}
                   title={file.fileName}
-                  className="dark:text-foreground dark:bg-accent text-muted-foreground bg-muted flex items-center rounded-xl p-2 text-sm"
+                  className="bg-muted text-foreground flex items-center rounded-xl p-2 text-sm"
                 >
-                  <div className="bg-primary mr-2 items-center justify-center rounded-lg p-[5.5px]">
-                    <img
-                      src={DocumentationDark}
-                      alt="Attachment"
-                      className="h-3.75 w-3.75 object-fill"
+                  <div className="bg-primary mr-2 items-center justify-center rounded-lg p-1.5">
+                    <Paperclip
+                      aria-label={t('conversation.attachments.attachment')}
+                      className="text-primary-foreground size-3.75"
                     />
                   </div>
                   <span className="max-w-37.5 truncate font-normal">
@@ -166,56 +172,61 @@ const ConversationBubble = forwardRef<
               ))}
             </div>
           )}
-          <div
-            ref={ref}
-            className={`flex flex-row-reverse justify-items-start`}
-          >
+          <div ref={ref} className="flex flex-row-reverse justify-items-start">
             {!isEditClicked && (
               <>
                 {/* ``mr-3`` plus the pill's own ``mr-2`` puts the question's
                     right edge on the answer's ``mr-5`` gutter. */}
                 <div className="relative mr-3 flex w-full min-w-0 flex-col">
-                  <div className="mr-2 ml-2 flex max-w-full min-w-0 items-start gap-2 rounded-3xl bg-linear-to-b from-violet-500 to-violet-600 px-5 py-4 text-sm leading-normal wrap-anywhere whitespace-pre-wrap text-white sm:text-base">
+                  <div className="bg-secondary text-foreground mr-2 ml-2 flex max-w-full min-w-0 items-start gap-2 rounded-3xl px-5 py-4 text-sm leading-normal wrap-anywhere whitespace-pre-wrap sm:text-base">
                     <div
                       ref={messageRef}
-                      className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full min-w-0`}
+                      className={cn(
+                        isQuestionCollapsed ? 'line-clamp-4' : '',
+                        'w-full min-w-0',
+                      )}
                     >
                       {message}
                     </div>
                     {shouldShowToggle && (
-                      <Button
-                        type="button"
+                      <IconButton
+                        label={
+                          isQuestionCollapsed
+                            ? t('conversation.question.expand')
+                            : t('conversation.question.collapse')
+                        }
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-lg"
+                        shape="pill"
                         onClick={(e) => {
                           e.stopPropagation();
                           setIsQuestionCollapsed(!isQuestionCollapsed);
                         }}
-                        className="ml-1 h-auto w-auto rounded-full bg-transparent p-2 hover:bg-[#D9D9D933]"
+                        className="ml-1"
                       >
-                        <img
-                          src={ChevronDown}
-                          alt="Toggle"
-                          width={24}
-                          height={24}
-                          className={`transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
+                        <ChevronDown
+                          aria-hidden
+                          className={cn(
+                            'size-6 transition-transform duration-200',
+                            !isQuestionCollapsed && 'rotate-180',
+                          )}
                         />
-                      </Button>
+                      </IconButton>
                     )}
                   </div>
                 </div>
-                <Button
-                  type="button"
+                <IconButton
+                  label={t('conversation.edit.label')}
+                  icon={Pencil}
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs"
+                  shape="pill"
                   onClick={() => {
                     setIsEditClicked(true);
                     setEditInputBox(message ?? '');
                   }}
-                  className="invisible mt-3 h-fit w-auto shrink-0 cursor-pointer rounded-full p-2 pt-1.5 pl-1.5 group-hover:visible"
-                >
-                  <img src={Edit} alt="Edit" className="cursor-pointer" />
-                </Button>
+                  className="invisible mt-3 shrink-0 cursor-pointer group-hover:visible"
+                />
               </>
             )}
           </div>
@@ -224,8 +235,9 @@ const ConversationBubble = forwardRef<
               ref={editableQueryRef}
               className="mx-auto flex w-full flex-col gap-4 rounded-lg bg-transparent p-4"
             >
-              <textarea
+              <Textarea
                 placeholder={t('conversation.edit.placeholder')}
+                aria-label={t('conversation.edit.placeholder')}
                 onChange={(e) => {
                   setEditInputBox(e.target.value);
                 }}
@@ -237,20 +249,21 @@ const ConversationBubble = forwardRef<
                 }}
                 rows={5}
                 value={editInputBox}
-                className="border-border text-foreground dark:border-border dark:text-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden focus-visible:ring-[3px]"
+                size="lg"
+                resize="none"
               />
               <div className="flex items-center justify-end gap-2">
                 <Button
                   type="button"
                   variant="ghost"
-                  className="text-primary hover:bg-muted hover:text-foreground dark:hover:bg-accent dark:hover:text-foreground h-auto rounded-full px-4 py-2 text-sm font-semibold"
+                  shape="pill"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
                 </Button>
                 <Button
                   type="button"
-                  className="bg-primary not-disabled:hover:bg-primary/90 not-disabled:dark:hover:bg-primary/90 disabled:bg-primary/30 h-auto rounded-full px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-100"
+                  shape="pill"
                   onClick={handleEditClick}
                   disabled={
                     !editInputBox.trim() ||
@@ -269,7 +282,7 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group dark:text-foreground flex-col`}
+        className={cn('flex flex-wrap self-start', className, 'group flex-col')}
       >
         {DisableSourceFE ||
         type === 'ERROR' ||
@@ -280,94 +293,99 @@ const ConversationBubble = forwardRef<
               // Stretched, not shrink-to-fit: the grid below sizes off this box,
               // so a fit-content parent would leave its width to the cards.
               <div className="mb-4 flex w-full flex-col flex-wrap items-start self-stretch lg:flex-nowrap">
-                <div className="my-2 ml-6 flex flex-row items-center justify-center gap-3">
-                  <Avatar
-                    src={Sources}
-                    alt={t('conversation.sources.title')}
-                    className="h-6.5 w-7.5 text-xl"
-                    imgClassName="h-full w-full object-fill"
-                  />
-                  <p className="text-base font-semibold">
+                {/* A step row like Reasoning and the tool steps below it: same
+                    metrics, icon on the ml-6 column, and it opens the full list. */}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-haspopup="dialog"
+                  onClick={() => setIsSidebarOpen(true)}
+                  className="my-2 ml-3.5 w-fit"
+                >
+                  <Database className="text-muted-foreground" aria-hidden />
+                  <span className="text-muted-foreground">
                     {t('conversation.sources.title')}
-                  </p>
-                </div>
+                  </span>
+                  <span className="text-muted-foreground/70 font-normal">
+                    {sources.length}
+                  </span>
+                  <ChevronRight className="text-muted-foreground" aria-hidden />
+                </Button>
                 {/* Width comes from the stretched parent minus these margins;
                     w-full here would be the column width plus them. */}
-                <div className="fade-in mr-5 ml-6">
+                <div className="animate-in fade-in mr-5 ml-6 duration-160 ease-out motion-reduce:animate-none">
                   <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
                     {sources?.slice(0, 3)?.map((source, index) => (
                       <div
                         key={index}
                         id={`source-${index}`}
-                        className="relative transition-all duration-300"
+                        className="relative"
                       >
-                        <div
-                          className="bg-muted hover:bg-accent dark:bg-answer-bubble dark:hover:bg-muted h-28 cursor-pointer rounded-4xl p-4"
-                          onMouseOver={() => setActiveTooltip(index)}
-                          onMouseOut={() => setActiveTooltip(null)}
-                        >
-                          <p className="ellipsis-text h-12 text-xs wrap-break-word">
-                            {source.text}
-                          </p>
-                          <div
-                            className={`mt-3.5 flex flex-row items-center gap-1.5 underline-offset-2 ${
-                              source.link && source.link !== 'local'
-                                ? 'hover:text-[#007DFF] hover:underline dark:hover:text-blue-400'
-                                : ''
-                            }`}
-                            onClick={() =>
-                              source.link && source.link !== 'local'
-                                ? window.open(
-                                    source.link,
-                                    '_blank',
-                                    'noopener, noreferrer',
-                                  )
-                                : null
-                            }
+                        {/* Stretched button: its ::after covers the card, so the
+                            whole card opens the sheet; the URL link is a sibling
+                            above it (z-10), never nested inside a button. */}
+                        <div className="bg-answer-bubble hover:bg-accent has-[>button:focus-visible]:ring-ring/50 relative h-28 rounded-4xl p-4 has-[>button:focus-visible]:ring-3">
+                          <button
+                            type="button"
+                            className="block w-full cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-4xl"
+                            onClick={() => setIsSidebarOpen(true)}
                           >
-                            <img
-                              src={Document}
-                              alt="Document"
-                              className="h-4.25 w-4.25 object-fill"
-                            />
-                            <p
-                              className="mt-0.5 truncate text-xs"
-                              title={
-                                source.link && source.link !== 'local'
-                                  ? source.link
-                                  : source.title
-                              }
-                            >
-                              {source.link && source.link !== 'local'
-                                ? source.link
-                                : source.title}
-                            </p>
-                          </div>
-                        </div>
-                        {activeTooltip === index && (
-                          <div
-                            className={`dark:bg-card dark:text-foreground absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-0.75 rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl sm:w-56`}
-                            onMouseOver={() => setActiveTooltip(index)}
-                            onMouseOut={() => setActiveTooltip(null)}
-                          >
-                            <p className="line-clamp-6 max-h-41 overflow-hidden rounded-md text-sm wrap-break-word text-ellipsis">
+                            <span className="line-clamp-3 h-12 text-xs wrap-break-word">
                               {source.text}
-                            </p>
-                          </div>
-                        )}
+                            </span>
+                          </button>
+                          {source.link && source.link !== 'local' ? (
+                            <Button
+                              variant="link"
+                              size="inline"
+                              asChild
+                              // eslint-disable-next-line shadcn/no-restyle -- a source card's URL row: foreground at rest, primary on hover
+                              className="hover:text-primary relative z-10 mt-3.5 max-w-full flex-row justify-start gap-1.5 font-normal text-current underline-offset-2"
+                            >
+                              <a
+                                href={source.link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                <FileText className="text-muted-foreground shrink-0" />
+                                <p
+                                  className="mt-0.5 truncate text-xs"
+                                  title={source.link}
+                                >
+                                  {source.link}
+                                </p>
+                              </a>
+                            </Button>
+                          ) : (
+                            <div className="mt-3.5 flex flex-row items-center gap-1.5">
+                              <FileText className="text-muted-foreground size-4 shrink-0" />
+                              <p
+                                className="mt-0.5 truncate text-xs"
+                                title={source.title}
+                              >
+                                {source.title}
+                              </p>
+                            </div>
+                          )}
+                        </div>
                       </div>
                     ))}
                     {(sources?.length ?? 0) > 3 && (
-                      <div
-                        className="bg-muted text-primary hover:bg-accent hover:text-primary dark:bg-answer-bubble dark:hover:bg-muted dark:hover:text-primary flex h-28 cursor-pointer flex-col-reverse rounded-4xl p-4"
+                      <button
+                        type="button"
+                        className={cn(
+                          'bg-answer-bubble text-primary hover:bg-accent hover:text-primary flex h-28 cursor-pointer flex-col-reverse rounded-4xl p-4 text-left outline-none',
+                          focusRing,
+                        )}
                         onClick={() => setIsSidebarOpen(true)}
                       >
-                        <p className="ellipsis-text h-22 text-xs">
+                        <span className="line-clamp-3 h-22 text-xs">
                           {t('conversation.sources.view_more', {
                             count: sources?.length ? sources.length - 3 : 0,
                           })}
-                        </p>
-                      </div>
+                        </span>
+                      </button>
                     )}
                   </div>
                 </div>
@@ -386,27 +404,10 @@ const ConversationBubble = forwardRef<
                     toolName: artifact.toolName,
                   })
                 }
-                className="h-auto rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
+                variant="secondary"
+                shape="pill"
               >
-                <svg
-                  className="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                  />
-                </svg>
+                <Eye />
                 <span className="max-w-50 truncate" title={artifact.label}>
                   {artifact.label}
                 </span>
@@ -424,10 +425,18 @@ const ConversationBubble = forwardRef<
         )}
         {type === 'ERROR' ? (
           message && (
-            <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
-              <div className="fade-in-bubble text-destructive/80 dark:border-destructive dark:bg-destructive/15 relative mr-5 flex max-w-full flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 px-6 py-5 text-sm font-normal dark:text-white">
-                <MarkdownAnswer content={message} isStreaming={isStreaming} />
-              </div>
+            // On the answer's ml-6 text column. The backend's error is often a
+            // raw provider exception, so it is the detail under a readable title.
+            <div className="animate-in fade-in slide-in-from-bottom-1.5 mr-5 ml-6 self-stretch duration-260 ease-out motion-reduce:animate-none">
+              <Alert variant="destructive">
+                <CircleAlert />
+                <AlertTitle>{t('conversation.failedTitle')}</AlertTitle>
+                <AlertDescription>
+                  <p className="font-mono text-xs wrap-break-word whitespace-pre-wrap">
+                    {message}
+                  </p>
+                </AlertDescription>
+              </Alert>
             </div>
           )
         ) : (
@@ -448,7 +457,7 @@ const ConversationBubble = forwardRef<
             turnArtifacts={completedArtifacts}
             onOpenArtifact={onOpenArtifact}
             renderApproval={(toolCall: ToolCallsType) => (
-              <div className="fade-in mt-4 mr-5 ml-6">
+              <div className="animate-in fade-in mt-4 mr-5 ml-6 duration-160 ease-out motion-reduce:animate-none">
                 <ToolCallApprovalBar
                   toolCall={toolCall}
                   onToolAction={onToolAction}
@@ -465,9 +474,14 @@ const ConversationBubble = forwardRef<
           // ml-6 text column.
           <div className="my-2 ml-4 flex flex-wrap justify-start gap-2">
             {type === 'ERROR' ? (
-              <div className="relative block items-center justify-center">
-                <div>{retryBtn}</div>
-              </div>
+              <>
+                <div className="relative block items-center justify-center">
+                  {retryBtn}
+                </div>
+                <div className="relative block items-center justify-center">
+                  <CopyButton textToCopy={message} />
+                </div>
+              </>
             ) : (
               <>
                 {onOpenArtifact &&
@@ -484,28 +498,11 @@ const ConversationBubble = forwardRef<
                             toolName: artifact.toolName,
                           })
                         }
-                        className="h-auto rounded-full bg-purple-100 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50"
-                        aria-label="View artifact"
+                        variant="secondary"
+                        shape="pill"
+                        aria-label={t('conversation.viewArtifact')}
                       >
-                        <svg
-                          className="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                          />
-                        </svg>
+                        <Eye />
                         <span
                           className="max-w-50 truncate"
                           title={artifact.label}
@@ -522,10 +519,12 @@ const ConversationBubble = forwardRef<
                     </div>
                     {research && message && (
                       <div className="relative block items-center justify-center">
-                        <Button
-                          type="button"
-                          variant="ghost"
+                        <IconButton
+                          label={t('conversation.exportMarkdown')}
+                          icon={Download}
+                          variant="ghost-muted"
                           size="icon-sm"
+                          shape="pill"
                           onClick={() => {
                             const blob = new Blob([message], {
                               type: 'text/markdown',
@@ -537,23 +536,8 @@ const ConversationBubble = forwardRef<
                             link.click();
                             URL.revokeObjectURL(url);
                           }}
-                          className="bg-card hover:bg-muted dark:hover:bg-accent h-auto w-auto cursor-pointer rounded-full p-2 dark:bg-transparent"
-                          aria-label="Export as Markdown"
-                          title="Export as Markdown"
-                        >
-                          <svg
-                            className="stroke-muted-foreground h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth={1.5}
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
-                            />
-                          </svg>
-                        </Button>
+                          className="cursor-pointer"
+                        />
                       </div>
                     )}
                     {ttsAvailable && (
@@ -564,11 +548,16 @@ const ConversationBubble = forwardRef<
                     {handleFeedback && (
                       <>
                         <div className="relative flex items-center justify-center">
-                          <Button
-                            type="button"
-                            variant="ghost"
+                          <IconButton
+                            label={
+                              feedback === 'LIKE'
+                                ? t('conversation.feedback.removeLike')
+                                : t('conversation.feedback.like')
+                            }
+                            variant="ghost-muted"
                             size="icon-sm"
-                            className="h-auto w-auto cursor-pointer rounded-full bg-transparent p-2"
+                            shape="pill"
+                            className="cursor-pointer"
                             onClick={() => {
                               if (feedback === 'LIKE') {
                                 handleFeedback?.(null);
@@ -576,22 +565,27 @@ const ConversationBubble = forwardRef<
                                 handleFeedback?.('LIKE');
                               }
                             }}
-                            aria-label={
-                              feedback === 'LIKE' ? 'Remove like' : 'Like'
-                            }
                           >
-                            <Like
-                              className={`${feedback === 'LIKE' ? 'stroke-primary fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-none'}`}
-                            ></Like>
-                          </Button>
+                            <ThumbsUp
+                              aria-hidden
+                              className={cn(
+                                feedback === 'LIKE' && 'text-primary',
+                              )}
+                            />
+                          </IconButton>
                         </div>
 
                         <div className="relative flex items-center justify-center">
-                          <Button
-                            type="button"
-                            variant="ghost"
+                          <IconButton
+                            label={
+                              feedback === 'DISLIKE'
+                                ? t('conversation.feedback.removeDislike')
+                                : t('conversation.feedback.dislike')
+                            }
+                            variant="ghost-muted"
                             size="icon-sm"
-                            className="h-auto w-auto cursor-pointer rounded-full bg-transparent p-2"
+                            shape="pill"
+                            className="cursor-pointer"
                             onClick={() => {
                               if (feedback === 'DISLIKE') {
                                 handleFeedback?.(null);
@@ -599,16 +593,14 @@ const ConversationBubble = forwardRef<
                                 handleFeedback?.('DISLIKE');
                               }
                             }}
-                            aria-label={
-                              feedback === 'DISLIKE'
-                                ? 'Remove dislike'
-                                : 'Dislike'
-                            }
                           >
-                            <Dislike
-                              className={`${feedback === 'DISLIKE' ? 'stroke-destructive fill-white dark:fill-transparent' : 'stroke-muted-foreground fill-none'}`}
-                            ></Dislike>
-                          </Button>
+                            <ThumbsDown
+                              aria-hidden
+                              className={cn(
+                                feedback === 'DISLIKE' && 'text-destructive',
+                              )}
+                            />
+                          </IconButton>
                         </div>
                       </>
                     )}
@@ -622,8 +614,8 @@ const ConversationBubble = forwardRef<
           <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
             <SheetContent
               side="right"
-              title="Sources"
-              className="bg-card w-64 border-l border-[#9ca3af]/10 sm:w-80 sm:max-w-none"
+              title={t('conversation.sources.title')}
+              className="w-64 sm:w-80 sm:max-w-none"
             >
               <div className="flex h-full flex-col items-center gap-2 px-6 py-4 text-center">
                 <AllSources sources={sources} />
@@ -637,6 +629,18 @@ const ConversationBubble = forwardRef<
   return bubble;
 });
 
+/** Runs `action` on Enter or Space, for a `role="button"` element. */
+function onActivateKey(
+  action: () => void,
+): (e: React.KeyboardEvent<HTMLElement>) => void {
+  return (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      action();
+    }
+  };
+}
+
 type AllSourcesProps = {
   sources: { title: string; text: string; link?: string }[];
 };
@@ -654,7 +658,7 @@ function AllSources(sources: AllSourcesProps) {
     <div className="h-full w-full">
       <div className="w-full">
         <p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
-        <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
+        <div className="bg-border mx-1 mt-2 h-[0.8px] w-full rounded-full lg:w-[95%]"></div>
       </div>
       <div className="mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
         {sources.sources.map((source, index) => {
@@ -662,33 +666,36 @@ function AllSources(sources: AllSourcesProps) {
           return (
             <div
               key={index}
-              className={`group/card bg-muted hover:bg-accent dark:bg-card dark:hover:bg-muted relative w-full rounded-4xl p-4 transition-colors ${
-                isExternalSource ? 'cursor-pointer' : ''
-              }`}
+              className={cn(
+                'group/card bg-card hover:bg-accent relative w-full rounded-4xl p-4 transition-colors',
+                isExternalSource ? 'cursor-pointer' : '',
+              )}
               onClick={() =>
                 isExternalSource && source.link && handleCardClick(source.link)
               }
+              {...(isExternalSource && source.link
+                ? {
+                    role: 'button',
+                    tabIndex: 0,
+                    onKeyDown: onActivateKey(() =>
+                      handleCardClick(source.link as string),
+                    ),
+                  }
+                : {})}
             >
               <p
                 title={source.title}
-                className={`ellipsis-text text-left text-sm font-semibold wrap-break-word ${
-                  isExternalSource ? 'group-hover/card:text-primary' : ''
-                }`}
+                className={cn(
+                  'line-clamp-3 text-left text-sm font-semibold wrap-break-word',
+                  isExternalSource ? 'group-hover/card:text-primary' : '',
+                )}
               >
                 {`${index + 1}. ${source.title}`}
                 {isExternalSource && (
-                  <img
-                    src={Link}
-                    alt="External Link"
-                    className={`ml-1 inline h-3 w-3 object-fill dark:invert ${
-                      isExternalSource
-                        ? 'group-hover/card:contrast-50 group-hover/card:hue-rotate-235 group-hover/card:invert-31 group-hover/card:saturate-752 group-hover/card:sepia-80 group-hover/card:filter'
-                        : ''
-                    }`}
-                  />
+                  <ExternalLink className="text-muted-foreground group-hover/card:text-primary ml-1 inline size-3" />
                 )}
               </p>
-              <p className="dark:text-foreground mt-3 line-clamp-4 rounded-md text-left text-xs wrap-break-word text-black">
+              <p className="text-foreground mt-3 line-clamp-4 rounded-md text-left text-xs wrap-break-word">
                 {source.text}
               </p>
             </div>
@@ -711,6 +718,7 @@ function ToolCallApprovalBar({
     comment?: string,
   ) => void;
 }) {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
   const [comment, setComment] = useState('');
   const token = useSelector(selectToken);
@@ -745,10 +753,10 @@ function ToolCallApprovalBar({
   };
 
   return (
-    <div className="border-border bg-muted dark:bg-card mb-2 w-full overflow-hidden rounded-2xl border">
+    <div className="border-border bg-muted mb-2 w-full overflow-hidden rounded-2xl border">
       <div className="flex items-center gap-3 px-4 py-2.5">
         <div className="flex min-w-0 flex-1 items-center gap-2">
-          <span className="text-sm font-semibold whitespace-nowrap">
+          <span className="text-sm font-medium whitespace-nowrap">
             {toolCall.tool_name}
           </span>
           <span className="text-muted-foreground text-xs">{actionLabel}</span>
@@ -762,38 +770,33 @@ function ToolCallApprovalBar({
         <div className="flex items-center gap-2">
           <Button
             type="button"
-            className={`h-auto rounded-full px-4 py-1 text-xs font-medium ${
-              comment
-                ? 'bg-muted text-muted-foreground hover:bg-muted cursor-default opacity-50'
-                : 'bg-primary hover:bg-primary/90 text-white'
-            }`}
+            size="xs"
+            shape="pill"
+            disabled={Boolean(comment)}
             onClick={() => {
               if (!comment) onToolAction?.(toolCall.call_id, 'approved');
             }}
           >
-            Approve
+            {t('conversation.toolApproval.approve')}
           </Button>
           {isRemoteDevice && (
             <Button
               type="button"
               variant="outline"
-              className="h-auto rounded-full border bg-transparent px-4 py-1 text-xs font-medium shadow-none"
+              size="xs"
+              shape="pill"
               onClick={() => {
                 void handleApproveSticky();
               }}
-              title="Approve and don't ask again for this command shape"
             >
-              Approve, don&apos;t ask again
+              {t('conversation.toolApproval.approveAlways')}
             </Button>
           )}
           <Button
             type="button"
-            variant="outline"
-            className={`h-auto rounded-full border bg-transparent px-4 py-1 text-xs font-medium shadow-none ${
-              comment
-                ? 'border-destructive bg-destructive/10 text-destructive hover:bg-destructive/10 font-semibold'
-                : 'hover:bg-accent text-muted-foreground dark:bg-transparent'
-            }`}
+            variant={comment ? 'destructive-outline' : 'outline'}
+            size="xs"
+            shape="pill"
             onClick={() => {
               if (expanded && comment) {
                 onToolAction?.(toolCall.call_id, 'denied', comment);
@@ -804,36 +807,46 @@ function ToolCallApprovalBar({
               }
             }}
           >
-            Deny
+            {t('conversation.toolApproval.deny')}
           </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground h-6 w-6 rounded-full"
+          <IconButton
+            label={t('conversation.toolApproval.details')}
+            variant="ghost-muted"
+            size="icon-xs"
+            shape="pill"
             onClick={() => setExpanded(!expanded)}
-            title="Details"
+            aria-expanded={expanded}
           >
-            <img
-              src={ChevronDown}
-              alt="expand"
-              className={`h-3.5 w-3.5 transition-transform duration-200 dark:invert ${expanded ? 'rotate-180' : ''}`}
+            <ChevronDown
+              aria-hidden
+              className={cn(
+                'transition-transform duration-200',
+                expanded && 'rotate-180',
+              )}
             />
-          </Button>
+          </IconButton>
         </div>
       </div>
       {expanded && (
         <div className="border-border border-t px-4 py-3">
           <p className="text-muted-foreground mb-1 text-xs font-medium">
-            Arguments
+            {t('conversation.inlineSteps.arguments')}
           </p>
-          <pre className="bg-background dark:bg-background/50 mb-2 max-h-40 overflow-auto rounded-lg p-2 font-mono text-xs">
-            {JSON.stringify(toolCall.arguments, null, 2)}
-          </pre>
+          <Card
+            variant="subtle"
+            padding="sm"
+            className="mb-2 max-h-40 overflow-y-auto"
+          >
+            <pre className="font-mono text-xs wrap-break-word whitespace-pre-wrap">
+              {JSON.stringify(toolCall.arguments, null, 2)}
+            </pre>
+          </Card>
           <Input
             type="text"
-            placeholder="Optional reason for denying..."
-            className="bg-background h-8 rounded-lg px-3 py-1.5 text-sm md:text-sm"
+            placeholder={t('conversation.toolApproval.denyReasonPlaceholder')}
+            aria-label={t('conversation.toolApproval.denyReasonPlaceholder')}
+            size="sm"
+            variant="filled"
             value={comment}
             onChange={(e) => setComment(e.target.value)}
             onKeyDown={(e) => {
@@ -871,18 +884,22 @@ export function WikiWriteToolCallCard({
     <div className="my-2 mr-5 ml-6 flex min-w-0 items-center gap-2 py-1.5 text-sm">
       <Pencil
         aria-hidden
-        className={`text-muted-foreground h-4 w-4 shrink-0 ${
-          isLive ? 'animate-pulse' : ''
-        }`}
+        className={cn(
+          'text-muted-foreground size-4 shrink-0',
+          isLive ? 'animate-pulse' : '',
+        )}
       />
       <span
-        className={`shrink-0 ${isLive ? 'shimmer-text' : 'text-muted-foreground'}`}
+        className={cn(
+          'shrink-0',
+          isLive ? 'shimmer-text' : 'text-muted-foreground',
+        )}
       >
         {label}
       </span>
       {path && (
         <code
-          className="text-muted-foreground bg-muted dark:bg-answer-bubble min-w-0 truncate rounded-md px-1.5 py-0.5 font-mono text-xs"
+          className="text-muted-foreground bg-answer-bubble min-w-0 truncate rounded-md px-1.5 py-0.5 font-mono text-xs"
           title={path}
         >
           {path}
diff --git a/frontend/src/conversation/ConversationMessages.test.tsx b/frontend/src/conversation/ConversationMessages.test.tsx
new file mode 100644
index 00000000..ee37a712
--- /dev/null
+++ b/frontend/src/conversation/ConversationMessages.test.tsx
@@ -0,0 +1,101 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('./ConversationBubble', () => ({
+  default: ({
+    message,
+    retryBtn,
+  }: {
+    message?: string;
+    retryBtn?: React.ReactNode;
+  }) => (
+    <div>
+      {message}
+      {retryBtn}
+    </div>
+  ),
+}));
+
+vi.mock('../Hero', () => ({ default: () => null }));
+
+vi.mock('./StreamingStatusLine', () => ({ default: () => null }));
+
+import ConversationMessages from './ConversationMessages';
+import type { Query } from './conversationModels';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('ConversationMessages', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (queries: Query[]) =>
+    act(() => {
+      root.render(
+        <ConversationMessages
+          handleQuestion={() => undefined}
+          handleQuestionSubmission={() => undefined}
+          queries={queries}
+          status="idle"
+        />,
+      );
+    });
+
+  it('shows a non-fatal notice as a polite warning alert with an icon', () => {
+    render([
+      { prompt: 'hi', response: 'hello', notice: 'Some tools were skipped.' },
+    ]);
+
+    const notice = container.querySelector('[role="status"]');
+    expect(notice?.textContent).toBe('Some tools were skipped.');
+    expect(notice?.className).toContain('bg-warning/10');
+    expect(notice?.querySelector('svg')).not.toBeNull();
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+  });
+
+  it('collapses the pin spacer once it has scrolled below the fold', () => {
+    render([{ prompt: 'hi', response: 'hello' }]);
+
+    const viewport = container.querySelector<HTMLElement>(
+      '[data-slot="message-scroller-viewport"]',
+    )!;
+    const spacer = container.querySelector<HTMLElement>(
+      '[data-message-scroller-spacer]',
+    )!;
+    expect(spacer.className).not.toContain('max-h-0');
+
+    spacer.style.height = '200px';
+    Object.defineProperty(viewport, 'scrollHeight', { value: 1000 });
+    Object.defineProperty(viewport, 'clientHeight', { value: 500 });
+    act(() => {
+      viewport.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(spacer.className).toContain('max-h-0');
+  });
+
+  it('renders Retry like the other answer actions: 32px ghost pill, lucide glyph', () => {
+    render([{ prompt: 'hi', error: 'boom' }]);
+    const retry = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="conversation.retry"]',
+    )!;
+    expect(retry.dataset.variant).toBe('ghost-muted');
+    expect(retry.dataset.size).toBe('icon-sm');
+    expect(retry.querySelector('svg.lucide-rotate-ccw')).not.toBeNull();
+  });
+});
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 41befb2f..3686df8c 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -7,10 +7,11 @@ import {
   useRef,
   useState,
 } from 'react';
+import { RotateCcw, TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import Retry from '../assets/retry.svg?react';
-import { Button } from '../components/ui/button';
+import { Alert, AlertDescription } from '../components/ui/alert';
+import { IconButton } from '../components/ui/icon-button';
 import {
   MessageScroller,
   MessageScrollerButton,
@@ -24,6 +25,7 @@ import { deriveArtifactChips } from './artifactChips';
 import ConversationBubble from './ConversationBubble';
 import { FEEDBACK, Query, Status } from './conversationModels';
 import StreamingStatusLine from './StreamingStatusLine';
+import { cn } from '@/lib/utils';
 
 type ConversationMessagesProps = {
   handleQuestion: (params: {
@@ -116,7 +118,9 @@ export default function ConversationMessages({
       // (dist >= its height) so removing it never shifts the visible content.
       // Reading style.height (the primitive's inline value) avoids a reflow.
       if (!spacerCollapsedRef.current) {
-        const spacer = vp.querySelector<HTMLElement>('.msc-spacer');
+        const spacer = vp.querySelector<HTMLElement>(
+          '[data-message-scroller-spacer]',
+        );
         const spacerH = spacer ? parseFloat(spacer.style.height) || 0 : 0;
         if (spacerH > STICK_THRESHOLD_PX && dist >= spacerH) {
           spacerCollapsedRef.current = true;
@@ -155,10 +159,11 @@ export default function ConversationMessages({
     // tool_calls and would otherwise fall into the answer branch.
     if (query.error) {
       const retryButton = (
-        <Button
-          type="button"
-          variant="ghost"
-          className="dark:text-foreground h-auto self-center rounded-full px-5 py-3 text-lg text-gray-500 delay-100 hover:border-gray-500"
+        <IconButton
+          label={t('conversation.retry')}
+          variant="ghost-muted"
+          size="icon-sm"
+          shape="pill"
           disabled={status === 'loading'}
           onClick={() => {
             const questionToRetry = queries[index].prompt;
@@ -168,14 +173,9 @@ export default function ConversationMessages({
               index,
             });
           }}
-          aria-label={t('conversation.retry')}
         >
-          <Retry
-            width={12}
-            height={12}
-            className="text-gray-500 dark:text-[#ECECF1]"
-          />
-        </Button>
+          <RotateCcw aria-hidden="true" />
+        </IconButton>
       );
       return (
         <ConversationBubble
@@ -206,12 +206,14 @@ export default function ConversationMessages({
       return (
         <Fragment key={`${index}-ANSWER`}>
           {query.notice ? (
-            <div
+            <Alert
+              variant="warning"
               role="status"
-              className={`${bubbleMargin} mr-5 self-start rounded-2xl border border-amber-300 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-200`}
+              className={cn(bubbleMargin, 'mr-5 w-auto')}
             >
-              {query.notice}
-            </div>
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>{query.notice}</AlertDescription>
+            </Alert>
           ) : null}
           <ConversationBubble
             className={bubbleMargin}
@@ -242,7 +244,10 @@ export default function ConversationMessages({
     if (status === 'loading' && index === queries.length - 1) {
       return (
         <div
-          className={`fade-in-bubble group dark:text-foreground flex flex-col flex-wrap self-start ${bubbleMargin}`}
+          className={cn(
+            'animate-in fade-in slide-in-from-bottom-1.5 group flex flex-col flex-wrap self-start duration-260 ease-out motion-reduce:animate-none',
+            bubbleMargin,
+          )}
         >
           <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <StreamingStatusLine className="my-2 ml-6" />
@@ -270,10 +275,8 @@ export default function ConversationMessages({
       <MessageScroller>
         <MessageScrollerViewport className="sm:pt-6 lg:pt-12">
           <MessageScrollerContent
-            spacerClassName={
-              spacerCollapsed ? 'msc-spacer max-h-0' : 'msc-spacer'
-            }
-            className={`mx-auto pb-7 ${columnClass}`}
+            spacerClassName={spacerCollapsed ? 'max-h-0' : undefined}
+            className={cn('mx-auto pb-7', columnClass)}
           >
             {headerContent}
             {queries.map((query, index) => {
@@ -282,9 +285,10 @@ export default function ConversationMessages({
                 <Fragment key={`${index}-query-fragment`}>
                   <MessageScrollerItem messageId={`q-${index}`} scrollAnchor>
                     <ConversationBubble
-                      className={`${QUESTION_BUBBLE_MARGIN_BOTTOM} ${
-                        index === 0 ? FIRST_QUESTION_BUBBLE_MARGIN_TOP : ''
-                      }`}
+                      className={cn(
+                        QUESTION_BUBBLE_MARGIN_BOTTOM,
+                        index === 0 ? FIRST_QUESTION_BUBBLE_MARGIN_TOP : '',
+                      )}
                       message={query.prompt}
                       type="QUESTION"
                       handleUpdatedQuestionSubmission={handleQuestionSubmission}
diff --git a/frontend/src/conversation/ConversationTile.test.tsx b/frontend/src/conversation/ConversationTile.test.tsx
new file mode 100644
index 00000000..c99c9a9a
--- /dev/null
+++ b/frontend/src/conversation/ConversationTile.test.tsx
@@ -0,0 +1,79 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import ConversationTile from './ConversationTile';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = (conversationId: string | null) =>
+  configureStore({
+    reducer: {
+      conversation: () => ({ conversationId }),
+      preference: () => ({ token: null }),
+    },
+  });
+
+describe('ConversationTile', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (currentId: string | null, select = vi.fn()) => {
+    act(() => {
+      root.render(
+        <Provider store={makeStore(currentId)}>
+          <MemoryRouter>
+            <ConversationTile
+              conversation={{ id: 'c1', name: 'Halvorsen QBR prep' }}
+              selectConversation={select}
+              onConversationClick={() => undefined}
+              onDeleteConversation={() => undefined}
+              onSave={() => undefined}
+            />
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+    return container.querySelector('a') as HTMLAnchorElement;
+  };
+
+  it('is a sidebar-item link, marked current on its conversation', () => {
+    const link = render('c1');
+    expect(link.getAttribute('href')).toBe('/c/c1');
+    expect(link.dataset.variant).toBe('sidebar-item');
+    expect(link.getAttribute('aria-current')).toBe('page');
+    expect(link.querySelector('span')?.className).toContain('truncate');
+  });
+
+  it('keeps the actions menu outside the link', () => {
+    const link = render('c1');
+    const menu = container.querySelector('button[aria-label="convTile.menu"]');
+    expect(menu).not.toBeNull();
+    expect(link.contains(menu)).toBe(false);
+  });
+
+  it('selects another conversation on click', () => {
+    const select = vi.fn();
+    const link = render('other', select);
+    expect(link.hasAttribute('aria-current')).toBe(false);
+    act(() => link.click());
+    expect(select).toHaveBeenCalledWith('c1');
+  });
+});
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index cfc5d87d..21825738 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -1,31 +1,23 @@
-import { Share, X } from 'lucide-react';
+import { Check, Pencil, Share, Trash2, X } from 'lucide-react';
 import {
   SyntheticEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type ReactNode,
 } from 'react';
 import { useSelector } from 'react-redux';
-import Edit from '../assets/edit.svg';
-import { useDarkTheme } from '../hooks';
+import { Link } from 'react-router-dom';
 import ConfirmationModal from '../modals/ConfirmationModal';
-import CheckMark2 from '../assets/checkMark2.svg';
-import Trash from '../assets/red-trash.svg';
-import threeDots from '../assets/three-dots.svg';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../components/ui/button';
+import { IconButton } from '../components/ui/icon-button';
 import { Input } from '../components/ui/input';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { cn } from '../lib/utils';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
 import { useOutsideAlerter } from '../hooks';
 
 interface ConversationProps {
@@ -49,7 +41,6 @@ export default function ConversationTile({
 }: ConversationTileProps) {
   const conversationId = useSelector(selectConversationId);
   const tileRef = useRef<HTMLInputElement>(null);
-  const [isDarkTheme] = useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
   const [isOpen, setOpen] = useState<boolean>(false);
@@ -58,12 +49,12 @@ export default function ConversationTile({
   const [deleteModalState, setDeleteModalState] =
     useState<ActiveState>('INACTIVE');
   const { t } = useTranslation();
+  const isCurrent = conversationId === conversation.id;
   useEffect(() => {
     setConversationsName(conversation.name);
   }, [conversation.name]);
 
-  function handleEditConversation(event: SyntheticEvent) {
-    event.stopPropagation();
+  function handleEditConversation() {
     setIsEdit(true);
     setOpen(false);
   }
@@ -126,35 +117,24 @@ export default function ConversationTile({
     }
   };
 
-  type ConversationMenuOption = {
-    icon: ReactNode;
-    label: string;
-    onClick: (event: SyntheticEvent) => void;
-    variant: 'default' | 'destructive';
-  };
-
-  const menuOptions: ConversationMenuOption[] = [
+  const menuOptions: MenuOption[] = [
     {
-      icon: <Share className="size-4" strokeWidth={1.75} />,
+      icon: Share,
       label: t('convTile.share'),
-      onClick: (event: SyntheticEvent) => {
-        event.stopPropagation();
+      onClick: () => {
         setShareModalState(true);
         setOpen(false);
       },
-      variant: 'default',
     },
     {
-      icon: <img src={Edit} alt="" width={16} height={16} />,
+      icon: Pencil,
       label: t('convTile.rename'),
       onClick: handleEditConversation,
-      variant: 'default',
     },
     {
-      icon: <img src={Trash} alt="" width={18} height={18} />,
+      icon: Trash2,
       label: t('convTile.delete'),
-      onClick: (event: SyntheticEvent) => {
-        event.stopPropagation();
+      onClick: () => {
         setDeleteModalState('ACTIVE');
         setOpen(false);
       },
@@ -185,44 +165,59 @@ export default function ConversationTile({
             setIsHovered(false);
           }
         }}
-        onClick={() => {
-          onConversationClick();
-          conversationId !== conversation.id &&
-            selectConversation(conversation.id);
-        }}
-        className={`hover:bg-sidebar-accent mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 ${
-          conversationId === conversation.id || isOpen || isHovered || isEdit
-            ? 'bg-sidebar-accent'
-            : ''
-        }`}
+        className="group relative mx-4 mt-4"
       >
-        <div className={`flex w-10/12 gap-4`}>
-          {isEdit ? (
+        {isEdit ? (
+          // The rename field takes the row's place; the row keeps its fill
+          // and the Save / Cancel buttons sit where the menu was.
+          <div className="bg-sidebar-accent flex h-9 items-center rounded-full pr-20 pl-3">
             <Input
               autoFocus
               type="text"
-              className="h-6 w-full rounded-2xl border-0 px-1 text-sm leading-6 font-normal shadow-none focus-visible:ring-0 md:text-sm dark:border-0"
+              variant="bare"
+              className="w-full"
               value={conversationName}
               onChange={(e) => setConversationsName(e.target.value)}
               onKeyDown={handleRenameKeyDown}
             />
-          ) : (
-            <p className="text-foreground dark:text-foreground my-auto overflow-hidden text-sm leading-6 font-normal text-ellipsis whitespace-nowrap">
-              {conversationName}
-            </p>
-          )}
-        </div>
-        {(conversationId === conversation.id || isHovered || isOpen) && (
-          <div className="dark:text-muted-foreground flex text-white">
+          </div>
+        ) : (
+          <Button
+            variant="sidebar-item"
+            asChild
+            /* eslint-disable shadcn/no-restyle -- the link and its menu
+               button are siblings, so the row keeps its fill while the
+               pointer is on the button or the menu is open, and pr-10 keeps
+               the label clear of the button. */
+            className={cn(
+              'group-hover:bg-sidebar-accent flex w-full pr-10',
+              isOpen && 'bg-sidebar-accent',
+            )}
+            /* eslint-enable shadcn/no-restyle */
+          >
+            <Link
+              to={`/c/${conversation.id}`}
+              aria-current={isCurrent ? 'page' : undefined}
+              onClick={(event) => {
+                if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+                event.preventDefault();
+                onConversationClick();
+                if (!isCurrent) selectConversation(conversation.id);
+              }}
+            >
+              <span className="truncate">{conversationName}</span>
+            </Link>
+          </Button>
+        )}
+        {(isCurrent || isHovered || isOpen || isEdit) && (
+          <div className="absolute top-1 right-2 flex">
             {isEdit ? (
               <div className="flex gap-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('convTile.save')}
-                  title={t('convTile.save')}
-                  className="mr-2 h-auto w-auto bg-transparent p-0 hover:bg-transparent hover:opacity-50"
+                <IconButton
+                  label={t('convTile.save')}
+                  icon={Check}
+                  variant="ghost-on-accent"
+                  size="icon-xs"
                   onClick={(event: SyntheticEvent) => {
                     event.stopPropagation();
                     handleSaveConversation({
@@ -230,55 +225,26 @@ export default function ConversationTile({
                       name: conversationName,
                     });
                   }}
-                >
-                  <img src={CheckMark2} alt="" className="h-4 w-4" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label={t('cancel')}
-                  title={t('cancel')}
+                />
+                <IconButton
+                  label={t('cancel')}
+                  icon={X}
+                  variant="ghost-on-accent"
+                  size="icon-xs"
                   id={`img-${conversation.id}`}
-                  className="mt-px mr-4 h-auto w-auto bg-transparent p-0 hover:bg-transparent hover:opacity-50"
                   onClick={(event: SyntheticEvent) => {
                     event.stopPropagation();
                     onClear();
                   }}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
+                />
               </div>
             ) : (
-              <DropdownMenu open={isOpen} onOpenChange={setOpen}>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={(event: SyntheticEvent) => {
-                      event.stopPropagation();
-                    }}
-                    className="mr-2 h-6 w-6 rounded-full"
-                  >
-                    <img src={threeDots} width={8} alt="menu" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[144px]">
-                  {menuOptions.map((option, index) => (
-                    <DropdownMenuItem
-                      key={index}
-                      variant={option.variant}
-                      onSelect={(event) => {
-                        option.onClick(event as unknown as SyntheticEvent);
-                      }}
-                    >
-                      {option.icon}
-                      <span>{option.label}</span>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <ActionMenu
+                options={menuOptions}
+                triggerLabel={t('convTile.menu')}
+                open={isOpen}
+                onOpenChange={setOpen}
+              />
             )}
           </div>
         )}
diff --git a/frontend/src/conversation/MarkdownAnswer.tsx b/frontend/src/conversation/MarkdownAnswer.tsx
index 9d41dcd0..8736645b 100644
--- a/frontend/src/conversation/MarkdownAnswer.tsx
+++ b/frontend/src/conversation/MarkdownAnswer.tsx
@@ -1,6 +1,7 @@
 import 'katex/dist/katex.min.css';
 
 import { Fragment, type ReactNode, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import {
@@ -11,6 +12,8 @@ import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
+import { markdownHeadings } from '@/lib/markdown';
+
 import CopyButton from '../components/CopyButton';
 import MermaidRenderer from '../components/MermaidRenderer';
 import { Button } from '../components/ui/button';
@@ -21,6 +24,7 @@ import {
   type SandboxArtifact,
   sandboxUrlTransform,
 } from './sandboxLinks';
+import { cn } from '@/lib/utils';
 
 // One fenced block or inline code span. Backtick runs are length-matched, so a
 // ```` fence closes only on ```` and nested fences stay masked. The
@@ -144,6 +148,7 @@ export default function MarkdownAnswer({
   turnArtifacts?: SandboxArtifact[];
   onOpenArtifact?: (artifact: { id: string; toolName: string }) => void;
 }) {
+  const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
   // Re-runs on every streamed token otherwise.
   const contentSegments = useMemo(
@@ -163,16 +168,15 @@ export default function MarkdownAnswer({
       <Button
         type="button"
         variant="link"
+        size="inline"
         onClick={() =>
           onOpenArtifact({
             id: artifact.id,
             toolName: artifact.toolName ?? '',
           })
         }
-        /* Sits mid-sentence: no pill background, no fixed height, and it must
-           wrap with the surrounding text. */
-        className="text-primary h-auto w-auto bg-transparent p-0 whitespace-normal underline underline-offset-2"
-        title={artifact.label}
+        /* Sits mid-sentence, so it must wrap with the surrounding text. */
+        className="whitespace-normal"
       >
         {content}
       </Button>
@@ -184,7 +188,7 @@ export default function MarkdownAnswer({
       {contentSegments.map((segment, index) => (
         <Fragment key={index}>
           {segment.type === 'text' ? (
-            <div className="fade-in flex flex-col gap-3 leading-normal wrap-break-word whitespace-pre-wrap">
+            <div className="animate-in fade-in flex flex-col gap-3 leading-normal wrap-break-word whitespace-pre-wrap duration-160 ease-out motion-reduce:animate-none">
               <ReactMarkdown
                 remarkPlugins={[
                   remarkGfm,
@@ -193,6 +197,7 @@ export default function MarkdownAnswer({
                 rehypePlugins={[rehypeKatex]}
                 urlTransform={sandboxUrlTransform}
                 components={{
+                  ...markdownHeadings,
                   a({ href, children }) {
                     // A generated file is already on the turn as a download
                     // chip, but the model links it with a `sandbox:`/`artifact:`
@@ -215,6 +220,9 @@ export default function MarkdownAnswer({
                       return (
                         <Button
                           type="button"
+                          variant="secondary"
+                          size="xs"
+                          shape="pill"
                           onClick={() => {
                             const el = document.getElementById(
                               `source-${sourceIdx}`,
@@ -224,19 +232,16 @@ export default function MarkdownAnswer({
                                 behavior: 'smooth',
                                 block: 'center',
                               });
-                              el.classList.add('ring-2', 'ring-purple-500');
+                              el.classList.add('ring-3', 'ring-primary');
                               setTimeout(
                                 () =>
-                                  el.classList.remove(
-                                    'ring-2',
-                                    'ring-purple-500',
-                                  ),
+                                  el.classList.remove('ring-3', 'ring-primary'),
                                 2000,
                               );
                             }
                           }}
-                          className="mx-0.5 h-5 min-w-5 rounded-full bg-purple-100 px-1.5 text-xs font-semibold text-purple-700 hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-900/60"
-                          title={`Jump to source ${num}`}
+                          className="mx-0.5 h-5 min-w-5"
+                          title={t('conversation.jumpToSource', { num })}
                         >
                           {num}
                         </Button>
@@ -264,7 +269,7 @@ export default function MarkdownAnswer({
                       const { artifact } = sandboxLink;
                       return renderArtifactChip(
                         artifact,
-                        alt || artifact.label || 'Open file',
+                        alt || artifact.label || t('conversation.openFile'),
                       );
                     }
                     if (sandboxLink.kind === 'plain') {
@@ -282,17 +287,19 @@ export default function MarkdownAnswer({
                     return match ? (
                       <div className="group border-border relative overflow-hidden rounded-xl border">
                         <div className="bg-muted flex items-center justify-between px-2 py-1">
-                          <span className="text-foreground dark:text-foreground text-xs font-medium">
+                          <span className="text-foreground text-xs font-medium">
                             {language}
                           </span>
                           <CopyButton
                             textToCopy={String(children).replace(/\n$/, '')}
+                            side="bottom"
                           />
                         </div>
                         <SyntaxHighlighter
                           {...rest}
                           PreTag="div"
                           language={language}
+                          /* eslint-disable-next-line shadcn/no-inline-styles -- SyntaxHighlighter's style prop is its Prism theme object (oneLight / vscDarkPlus), picked by theme at runtime; it is not CSS. See DESIGN.md, Approved exceptions. */
                           style={isDarkTheme ? vscDarkPlus : oneLight}
                           className="mt-0!"
                           customStyle={{ margin: 0, borderRadius: 0 }}
@@ -301,7 +308,7 @@ export default function MarkdownAnswer({
                         </SyntaxHighlighter>
                       </div>
                     ) : (
-                      <code className="dark:bg-accent dark:text-foreground rounded-md bg-gray-200 px-2 py-1 text-xs font-normal whitespace-pre-line">
+                      <code className="bg-accent text-foreground rounded-md px-2 py-1 text-xs font-normal whitespace-pre-line">
                         {children}
                       </code>
                     );
@@ -309,7 +316,10 @@ export default function MarkdownAnswer({
                   ul({ children }) {
                     return (
                       <ul
-                        className={`list-inside list-disc pl-4 whitespace-normal ${classes.list}`}
+                        className={cn(
+                          'list-inside list-disc pl-4 whitespace-normal',
+                          classes.list,
+                        )}
                       >
                         {children}
                       </ul>
@@ -318,7 +328,10 @@ export default function MarkdownAnswer({
                   ol({ children }) {
                     return (
                       <ol
-                        className={`list-inside list-decimal pl-4 whitespace-normal ${classes.list}`}
+                        className={cn(
+                          'list-inside list-decimal pl-4 whitespace-normal',
+                          classes.list,
+                        )}
                       >
                         {children}
                       </ol>
@@ -327,7 +340,7 @@ export default function MarkdownAnswer({
                   table({ children }) {
                     return (
                       <div className="border-border relative overflow-x-auto rounded-lg border">
-                        <table className="dark:text-foreground w-full text-left text-gray-700">
+                        <table className="text-foreground w-full text-left">
                           {children}
                         </table>
                       </div>
@@ -359,7 +372,7 @@ export default function MarkdownAnswer({
               </ReactMarkdown>
             </div>
           ) : (
-            <div className="my-4 w-full" style={{ minWidth: '100%' }}>
+            <div className="my-4 w-full min-w-full">
               <MermaidRenderer code={segment.content} isLoading={isStreaming} />
             </div>
           )}
diff --git a/frontend/src/conversation/ResearchProgress.tsx b/frontend/src/conversation/ResearchProgress.tsx
index 1d86832d..7cc8770d 100644
--- a/frontend/src/conversation/ResearchProgress.tsx
+++ b/frontend/src/conversation/ResearchProgress.tsx
@@ -1,12 +1,17 @@
+import { ChevronDown } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import ResearchIcon from '../assets/research.svg';
 import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
+import { Spinner } from '../components/ui/spinner';
 import { ResearchState } from './conversationModels';
+import { cn } from '@/lib/utils';
 
 const SmallCheck = () => (
   <svg
-    className="h-3 w-3 text-green-500"
+    className="text-success size-3"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -16,47 +21,24 @@ const SmallCheck = () => (
   </svg>
 );
 
-const SmallSpinner = () => (
-  <svg
-    className="h-3 w-3 animate-spin text-purple-500"
-    fill="none"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      className="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    />
-    <path
-      className="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-    />
-  </svg>
-);
-
 const SmallPending = () => (
-  <div className="h-2.5 w-2.5 rounded-full border-[1.5px] border-gray-400 dark:border-gray-500" />
+  <div className="border-muted-foreground size-2.5 rounded-full border" />
 );
 
 function StatusText({ status, elapsed }: { status: string; elapsed?: number }) {
+  const { t } = useTranslation();
   const labels: Record<string, string> = {
-    planning: 'Planning research...',
-    researching: 'Researching...',
-    synthesizing: 'Writing report...',
-    complete: 'Complete',
+    planning: t('conversation.research.planning'),
+    researching: t('conversation.research.researching'),
+    synthesizing: t('conversation.research.synthesizing'),
+    complete: t('conversation.research.complete'),
   };
   const elapsed_str = elapsed ? ` \u00B7 ${Math.round(elapsed)}s` : '';
   return (
-    <span className="text-xs text-gray-500 dark:text-gray-400">
+    <span className="text-muted-foreground text-xs">
       {status === 'complete' ? (
         <>
-          <span className="text-green-600 dark:text-green-400">
-            {labels.complete}
-          </span>
+          <span className="text-success">{labels.complete}</span>
           {elapsed_str}
         </>
       ) : (
@@ -74,6 +56,7 @@ export default function ResearchProgress({
 }: {
   research: ResearchState;
 }) {
+  const { t } = useTranslation();
   const { plan, status, elapsed_seconds } = research;
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -93,8 +76,8 @@ export default function ResearchProgress({
   // Collapsed: single-line summary
   const summaryText =
     totalSteps > 0
-      ? `Researched ${completedSteps} topic${completedSteps !== 1 ? 's' : ''}`
-      : 'Research';
+      ? t('conversation.research.researched', { count: completedSteps })
+      : t('conversation.research.title');
 
   return (
     <div className="mb-4 flex w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
@@ -102,70 +85,62 @@ export default function ResearchProgress({
       <div className="my-2 flex flex-row items-center gap-3">
         <Avatar
           src={ResearchIcon}
-          alt="Research"
-          className="h-[26px] w-[30px] text-xl"
+          alt={t('conversation.research.title')}
+          className="h-[26px] w-[30px]"
           imgClassName="h-full w-full object-fill"
         />
         <Button
           type="button"
           variant="ghost"
           size="sm"
-          className="h-auto bg-transparent px-0 py-0 font-normal hover:bg-transparent dark:hover:bg-transparent"
+          className="-ml-2.5"
           onClick={() => setIsExpanded(!isExpanded)}
         >
           <p className="text-sm font-semibold">
-            {isExpanded ? 'Research' : summaryText}
+            {isExpanded ? t('conversation.research.title') : summaryText}
           </p>
-          <svg
-            className={`h-4 w-4 text-gray-500 transition-transform duration-200 dark:text-gray-400 ${isExpanded ? 'rotate-180' : ''}`}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
+          <ChevronDown
+            className={cn(
+              'text-muted-foreground transition-transform duration-200',
+              isExpanded && 'rotate-180',
+            )}
+          />
         </Button>
         {status && <StatusText status={status} elapsed={elapsed_seconds} />}
       </div>
 
       {/* Expanded: vertical timeline of steps */}
       {isExpanded && plan && plan.length > 0 && (
-        <div className="fade-in mr-5 ml-[42px] max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-          <div className="space-y-0">
+        <div className="animate-in fade-in mr-5 ml-[42px] max-w-[90vw] duration-160 ease-out motion-reduce:animate-none md:max-w-[70vw] lg:max-w-[50vw]">
+          <div className="flex flex-col">
             {plan.map((step, i) => {
               const isLast = i === plan.length - 1;
               return (
                 <div key={i} className="flex items-stretch gap-3">
                   {/* Timeline: dot + vertical line */}
                   <div className="flex flex-col items-center pt-1">
-                    <div className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                    <div className="flex size-4 flex-shrink-0 items-center justify-center">
                       {step.status === 'complete' ? (
                         <SmallCheck />
                       ) : step.status === 'researching' ? (
-                        <SmallSpinner />
+                        <Spinner size="xs" className="text-primary" />
                       ) : (
                         <SmallPending />
                       )}
                     </div>
-                    {!isLast && (
-                      <div className="mt-1 w-px flex-1 bg-gray-300 dark:bg-gray-600" />
-                    )}
+                    {!isLast && <div className="bg-border mt-1 w-px flex-1" />}
                   </div>
                   {/* Step content */}
-                  <div className={`pb-3 ${isLast ? '' : ''}`}>
+                  <div className="pb-3">
                     <p
-                      className={`text-sm ${
+                      className={cn(
+                        'text-sm',
                         step.status === 'complete'
-                          ? 'text-gray-700 dark:text-gray-300'
+                          ? 'text-foreground'
                           : step.status === 'researching'
-                            ? 'font-medium text-purple-700 dark:text-purple-300'
-                            : 'text-gray-500 dark:text-gray-500'
-                      }`}
+                            ? 'text-primary font-medium'
+                            : 'text-muted-foreground',
+                      )}
                     >
                       {step.query}
                     </p>
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 3a45a4fe..e34d3435 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -132,27 +132,29 @@ export const SharedConversation = () => {
     <>
       <DocumentHead
         title={`DocsGPT | ${title}`}
-        description="Shared conversations with DocsGPT"
+        description={t('sharedConv.metaDescription')}
         ogTitle={title}
-        ogDescription="Shared conversations with DocsGPT"
+        ogDescription={t('sharedConv.metaDescription')}
         twitterCard="summary_large_image"
         twitterTitle={title}
-        twitterDescription="Shared conversations with DocsGPT"
+        twitterDescription={t('sharedConv.metaDescription')}
       />
       <div className="bg-background flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
         <div className="border-b-border w-full max-w-325 border-b p-2 md:w-11/12 lg:w-10/12 xl:w-9/12 2xl:w-8/12">
-          <h1 className="text-foreground dark:text-foreground text-4xl font-semibold">
-            {title}
-          </h1>
-          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
+          <h1 className="text-foreground text-4xl font-semibold">{title}</h1>
+          <p className="text-muted-foreground text-sm">
             {t('sharedConv.subtitle')}{' '}
-            <a href="/" className="text-[#007DFF]">
-              DocsGPT
-            </a>
-          </h2>
-          <h2 className="text-foreground dark:text-foreground text-base font-semibold">
-            {date}
-          </h2>
+            <Button
+              variant="link"
+              size="inline"
+              asChild
+              // eslint-disable-next-line shadcn/no-restyle -- a link inside a regular-weight subtitle
+              className="font-normal"
+            >
+              <a href="/">DocsGPT</a>
+            </Button>
+          </p>
+          <p className="text-muted-foreground text-sm">{date}</p>
         </div>
         <ConversationMessages
           handleQuestion={handleQuestion}
@@ -176,7 +178,9 @@ export const SharedConversation = () => {
             <Button
               type="button"
               onClick={() => navigate('/')}
-              className="mb-14 h-auto w-fit rounded-full px-5 py-3 text-white shadow-xl sm:mb-0"
+              size="lg"
+              shape="pill"
+              className="mb-14 w-fit sm:mb-0"
             >
               {t('sharedConv.button')}
             </Button>
diff --git a/frontend/src/conversation/StreamingStatusLine.tsx b/frontend/src/conversation/StreamingStatusLine.tsx
index 48844327..fd2700e3 100644
--- a/frontend/src/conversation/StreamingStatusLine.tsx
+++ b/frontend/src/conversation/StreamingStatusLine.tsx
@@ -25,8 +25,8 @@ export default function StreamingStatusLine({
     >
       {/* Stands in for a step chip's icon so the live text keeps the same
           offset whether a chip or this line is carrying it. */}
-      <span className="flex h-4 w-4 shrink-0 items-center justify-center">
-        <span className="bg-muted-foreground/50 h-1.5 w-1.5 animate-pulse rounded-full" />
+      <span className="flex size-4 shrink-0 items-center justify-center">
+        <span className="bg-muted-foreground/50 size-1.5 animate-pulse rounded-full" />
       </span>
       <span className="shimmer-text max-w-[70vw] truncate text-sm lg:max-w-md">
         {hasAnswerText
diff --git a/frontend/src/conversation/answerFlowIntegration.test.tsx b/frontend/src/conversation/answerFlowIntegration.test.tsx
index d2ef60fe..d437ed36 100644
--- a/frontend/src/conversation/answerFlowIntegration.test.tsx
+++ b/frontend/src/conversation/answerFlowIntegration.test.tsx
@@ -85,7 +85,7 @@ describe('stream reducers feeding the answer flow', () => {
       </I18nextProvider>,
     );
 
-    expect(html.split('fade-in-bubble').length - 1).toBe(1);
+    expect(html.split('slide-in-from-bottom-1.5').length - 1).toBe(1);
     expect(html.indexOf('I should search.')).toBeLessThan(
       html.indexOf('Searched the web'),
     );
diff --git a/frontend/src/conversation/conversationSlice.test.ts b/frontend/src/conversation/conversationSlice.test.ts
index f4fc9feb..7ceeb0d4 100644
--- a/frontend/src/conversation/conversationSlice.test.ts
+++ b/frontend/src/conversation/conversationSlice.test.ts
@@ -15,6 +15,7 @@ import reducer, {
   addQuery,
   applyMessageTail,
   fetchAnswer,
+  mapServerQueryToClient,
   raiseNotice,
   resendQuery,
   setConversation,
@@ -328,3 +329,34 @@ describe('resendQuery', () => {
     expect(state.queries[0].error).toBeUndefined();
   });
 });
+
+describe('mapServerQueryToClient feedback', () => {
+  // The API stores feedback lowercase (analytics counts 'like'/'dislike'),
+  // while the thumbs compare against the FEEDBACK union.
+  it.each([
+    ['like', 'LIKE'],
+    ['dislike', 'DISLIKE'],
+    ['LIKE', 'LIKE'],
+    ['Dislike', 'DISLIKE'],
+  ])('maps stored %s to %s', (stored, expected) => {
+    const query = mapServerQueryToClient({
+      prompt: 'q',
+      response: 'a',
+      status: 'complete',
+      feedback: stored,
+    });
+    expect(query.feedback).toBe(expected);
+  });
+
+  it('drops missing or unknown feedback', () => {
+    for (const feedback of [undefined, null, '', 'meh']) {
+      const query = mapServerQueryToClient({
+        prompt: 'q',
+        response: 'a',
+        status: 'complete',
+        feedback,
+      });
+      expect(query.feedback).toBeUndefined();
+    }
+  });
+});
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index a46e2978..f0823b9d 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -29,6 +29,7 @@ import {
 import {
   Answer,
   ConversationState,
+  FEEDBACK,
   MessageStatus,
   Query,
   ResearchStep,
@@ -40,6 +41,14 @@ import { ToolCallsType } from './types';
 // terminal ``complete`` rows expose ``response``; non-terminal rows
 // would carry the WAL placeholder text, which must never render.
 // ``failed`` rows surface as ``error`` so they pick up Retry.
+// The API stores feedback lowercase ('like' / 'dislike') so analytics can
+// count it; the thumbs compare against the uppercase FEEDBACK union.
+function toClientFeedback(value: unknown): FEEDBACK | undefined {
+  if (typeof value !== 'string') return undefined;
+  const upper = value.toUpperCase();
+  return upper === 'LIKE' || upper === 'DISLIKE' ? upper : undefined;
+}
+
 export function mapServerQueryToClient(raw: any): Query {
   const status = raw?.status as MessageStatus | undefined;
   const isTerminalComplete = status === 'complete';
@@ -53,7 +62,7 @@ export function mapServerQueryToClient(raw: any): Query {
   const sources = Array.isArray(raw?.sources) ? raw.sources : undefined;
   const query: Query = {
     prompt: raw?.prompt ?? '',
-    feedback: raw?.feedback ?? undefined,
+    feedback: toClientFeedback(raw?.feedback),
     thought: raw?.thought ?? undefined,
     sources: sources && sources.length > 0 ? sources : undefined,
     tool_calls: toolCalls && toolCalls.length > 0 ? toolCalls : undefined,
diff --git a/frontend/src/conversation/quotaError.test.ts b/frontend/src/conversation/quotaError.test.ts
index 78220511..9939eb45 100644
--- a/frontend/src/conversation/quotaError.test.ts
+++ b/frontend/src/conversation/quotaError.test.ts
@@ -29,7 +29,8 @@ describe('quotaErrorMessage', () => {
     const [key, used, limit, resetsAt] = message.split('|');
     expect(key).toBe('conversation.quotaExceeded.tokens');
     expect([used, limit]).toEqual(['1,200,000', '1,000,000']);
-    expect(resetsAt).not.toBe('');
+    // Dates are en-GB everywhere, whatever the UI language.
+    expect(resetsAt).toMatch(/^\d{2}\/\d{2}\/\d{4}, \d{2}:\d{2}$/);
   });
 
   it('formats cost budgets as dollars', () => {
diff --git a/frontend/src/conversation/quotaError.ts b/frontend/src/conversation/quotaError.ts
index 86bf46dd..4c77abb3 100644
--- a/frontend/src/conversation/quotaError.ts
+++ b/frontend/src/conversation/quotaError.ts
@@ -1,5 +1,7 @@
 import type { TFunction } from 'i18next';
 
+import { formatDateTime } from '../utils/dateTimeUtils';
+
 export type QuotaErrorBody = {
   error_code?: string;
   dimension?: string;
@@ -33,10 +35,7 @@ export function quotaErrorMessage(
   const reset = body.resets_at ? new Date(body.resets_at) : null;
   const resetsAt =
     reset && !Number.isNaN(reset.getTime())
-      ? new Intl.DateTimeFormat(locale, {
-          dateStyle: 'medium',
-          timeStyle: 'short',
-        }).format(reset)
+      ? formatDateTime(body.resets_at as string)
       : '';
   return t(
     isCost
diff --git a/frontend/src/design/DesignSystem.tsx b/frontend/src/design/DesignSystem.tsx
new file mode 100644
index 00000000..66f5513d
--- /dev/null
+++ b/frontend/src/design/DesignSystem.tsx
@@ -0,0 +1,2935 @@
+import {
+  Check,
+  CircleAlert,
+  TriangleAlert,
+  Clock,
+  Copy,
+  Mail,
+  Mic,
+  Moon,
+  MoreHorizontal,
+  Pencil,
+  Pin,
+  Plus,
+  Search,
+  Settings,
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  X,
+  Calendar as CalendarIcon,
+  Database,
+  FileText,
+  Globe,
+  Link2,
+  Cloud,
+  Book,
+  GitBranch,
+  MessageSquare,
+  Users,
+  Workflow,
+  Sun,
+  Trash2,
+  Undo2,
+  Redo2,
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Avatar } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '@/components/ui/description-list';
+import { Dropzone } from '@/components/ui/dropzone';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '@/components/ui/command';
+import {
+  ActionMenu,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { FormField } from '@/components/ui/form-field';
+import { IconButton } from '@/components/ui/icon-button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ListRow, ListRows } from '@/components/ui/list-row';
+import { LoadingState } from '@/components/ui/loading-state';
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+} from '@/components/ui/message-scroller';
+import { Modal, ModalActions } from '@/components/ui/modal';
+import { MultiSelect } from '@/components/ui/multi-select';
+import { OptionCard } from '@/components/ui/option-card';
+import { Pagination } from '@/components/ui/pagination';
+import { Progress } from '@/components/ui/progress';
+import { SectionHeader } from '@/components/ui/section-header';
+import { Separator } from '@/components/ui/separator';
+import { SettingRow, SettingRows } from '@/components/ui/setting-row';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Toast,
+  ToastActions,
+  ToastContent,
+  ToastFooter,
+  ToastHeader,
+  ToastItem,
+  ToastMessage,
+  ToastStatus,
+  ToastTitle,
+} from '@/components/ui/toast';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TimePicker } from '@/components/ui/time-picker';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useDarkTheme } from '../hooks';
+
+/**
+ * Dev-only style guide, served at /design. It renders every component in
+ * src/components/ui with the variants DESIGN.md documents as the defaults,
+ * so the page doubles as a visual test of the theme tokens in both modes.
+ * Nothing here is translated: the route is not registered in production.
+ */
+
+const SECTIONS = [
+  ['tokens', 'Colour tokens'],
+  ['typography', 'Typography'],
+  ['buttons', 'Buttons'],
+  ['badges', 'Badges & toasts'],
+  ['cards', 'Cards'],
+  ['forms', 'Forms'],
+  ['dropzone', 'Dropzone'],
+  ['feedback', 'Feedback & loading'],
+  ['avatars', 'Avatars'],
+  ['navigation', 'Navigation'],
+  ['tables', 'Tables'],
+  ['overlays', 'Overlays'],
+  ['pickers', 'Pickers'],
+] as const;
+
+const SURFACE_TOKENS = [
+  { name: 'background', bg: 'bg-background', fg: 'text-foreground' },
+  { name: 'card', bg: 'bg-card', fg: 'text-card-foreground' },
+  { name: 'popover', bg: 'bg-popover', fg: 'text-popover-foreground' },
+  { name: 'muted', bg: 'bg-muted', fg: 'text-muted-foreground' },
+  { name: 'accent', bg: 'bg-accent', fg: 'text-accent-foreground' },
+  { name: 'sidebar', bg: 'bg-sidebar', fg: 'text-sidebar-foreground' },
+  {
+    name: 'sidebar-accent',
+    bg: 'bg-sidebar-accent',
+    fg: 'text-sidebar-accent-foreground',
+  },
+  {
+    name: 'sidebar-primary',
+    bg: 'bg-sidebar-primary',
+    fg: 'text-sidebar-primary-foreground',
+  },
+  {
+    name: 'sidebar-border',
+    bg: 'bg-sidebar-border',
+    fg: 'text-sidebar-foreground',
+  },
+  {
+    name: 'sidebar-ring',
+    bg: 'bg-sidebar-ring',
+    fg: 'text-sidebar-primary-foreground',
+  },
+  { name: 'answer-bubble', bg: 'bg-answer-bubble', fg: 'text-foreground' },
+] as const;
+
+const BRAND_TOKENS = [
+  { name: 'primary', bg: 'bg-primary', fg: 'text-primary-foreground' },
+  { name: 'secondary', bg: 'bg-secondary', fg: 'text-secondary-foreground' },
+  {
+    name: 'destructive',
+    bg: 'bg-destructive',
+    fg: 'text-destructive-foreground',
+  },
+  { name: 'success', bg: 'bg-success', fg: 'text-success-foreground' },
+  { name: 'warning', bg: 'bg-warning', fg: 'text-warning-foreground' },
+  { name: 'info', bg: 'bg-info', fg: 'text-info-foreground' },
+] as const;
+
+const LINE_TOKENS = [
+  { name: 'border', cls: 'border-border' },
+  { name: 'input', cls: 'border-input' },
+  { name: 'ring', cls: 'border-ring' },
+] as const;
+
+const CHART_TOKENS = [
+  'bg-chart-1',
+  'bg-chart-2',
+  'bg-chart-3',
+  'bg-chart-4',
+  'bg-chart-5',
+] as const;
+
+const BUTTON_VARIANTS = [
+  'default',
+  'secondary',
+  'outline',
+  'outline-primary',
+  'ghost',
+  'ghost-muted',
+  'ghost-destructive',
+  'ghost-on-accent',
+  'ghost-destructive-on-accent',
+  'link',
+  'destructive',
+  'destructive-outline',
+] as const;
+
+const BUTTON_SIZES = ['xs', 'sm', 'default', 'lg'] as const;
+const ICON_SIZES = ['icon-xs', 'icon-sm', 'icon', 'icon-lg'] as const;
+
+const BADGE_VARIANTS = [
+  'default',
+  'neutral',
+  'success',
+  'warning',
+  'destructive',
+  'info',
+  'outline',
+] as const;
+
+const AVATAR_SIZES = ['xs', 'sm', 'default', 'lg'] as const;
+
+const MULTI_OPTIONS = [
+  { value: 'pdf', label: 'PDF' },
+  { value: 'docx', label: 'Word' },
+  { value: 'md', label: 'Markdown' },
+  { value: 'html', label: 'HTML' },
+  { value: 'csv', label: 'CSV' },
+];
+
+const SOURCE_TYPES = [
+  ['Upload file', FileText],
+  ['Crawler', Globe],
+  ['Link', Link2],
+  ['GitHub', GitBranch],
+  ['Reddit', MessageSquare],
+  ['Google Drive', Cloud],
+  ['Amazon S3', Database],
+  ['New wiki', Book],
+] as const;
+
+const TABLE_ROWS = [
+  { name: 'Contracts & Policy Assistant', status: 'success', runs: 128 },
+  { name: 'Customer Renewal Desk', status: 'info', runs: 42 },
+  { name: 'Vendor Due Diligence', status: 'warning', runs: 9 },
+  { name: 'Legacy importer', status: 'destructive', runs: 0 },
+] as const;
+
+/** Reads a CSS custom property after the theme class has been applied. */
+function useCssVar(name: string, isDark: boolean): string {
+  const [value, setValue] = useState('');
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setValue(
+        getComputedStyle(document.documentElement)
+          .getPropertyValue(name)
+          .trim(),
+      );
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [name, isDark]);
+  return value;
+}
+
+function Section({
+  id,
+  title,
+  intro,
+  children,
+}: {
+  id: string;
+  title: string;
+  intro: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section id={id} className="scroll-mt-24">
+      <h2 className="text-foreground text-xl font-semibold">{title}</h2>
+      <p className="text-muted-foreground mt-1 max-w-2xl text-sm">{intro}</p>
+      <div className="mt-6 flex flex-col gap-8">{children}</div>
+    </section>
+  );
+}
+
+function Example({
+  title,
+  code,
+  children,
+}: {
+  title: string;
+  code?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        {code ? (
+          <code className="text-muted-foreground font-mono text-xs">
+            {code}
+          </code>
+        ) : null}
+      </div>
+      <div className="border-border bg-card rounded-xl border p-6">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function Swatch({
+  name,
+  bg,
+  fg,
+  isDark,
+}: {
+  name: string;
+  bg: string;
+  fg: string;
+  isDark: boolean;
+}) {
+  const value = useCssVar(`--${name}`, isDark);
+  return (
+    <div className="border-border flex flex-col overflow-hidden rounded-lg border">
+      <div className={`${bg} ${fg} flex h-16 items-end px-3 pb-2 text-xs`}>
+        Aa
+      </div>
+      <div className="bg-card px-3 py-2">
+        <div className="text-foreground text-xs font-medium">{name}</div>
+        <div className="text-muted-foreground font-mono text-xs">{value}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function DesignSystem() {
+  const [isDark, toggleTheme] = useDarkTheme();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const jumpTo = (id: string) => (event: React.MouseEvent) => {
+    event.preventDefault();
+    const container = scrollRef.current;
+    const target = document.getElementById(id);
+    if (!container || !target) return;
+    // Sections are offset from the scroll container; leave room for the
+    // sticky header.
+    container.scrollTo({ top: target.offsetTop - 88, behavior: 'smooth' });
+    window.history.replaceState(null, '', `#${id}`);
+  };
+  const [switchOn, setSwitchOn] = useState(true);
+  const [pagerPage, setPagerPage] = useState(2);
+  const [formats, setFormats] = useState<string[]>(['pdf', 'md']);
+  const [time, setTime] = useState('09:30');
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [modalOpen, setModalOpen] = useState(false);
+  const [showArchived, setShowArchived] = useState(true);
+  const [dropped, setDropped] = useState<string[]>([]);
+  const [agentType, setAgentType] = useState<'classic' | 'workflow'>('classic');
+  const [toolOn, setToolOn] = useState(false);
+  const [sectionOpen, setSectionOpen] = useState(false);
+  const [scopes, setScopes] = useState<string[]>(['agents:read']);
+  const [tokenLimit, setTokenLimit] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [sourceType, setSourceType] = useState<string>('Upload file');
+  const [range, setRange] = useState('30d');
+  const [trackRange, setTrackRange] = useState('7d');
+  const [days, setDays] = useState<string[]>(['mon', 'wed', 'fri']);
+  const [agentFilter, setAgentFilter] = useState('all');
+  const [modalDemo, setModalDemo] = useState<string | null>(null);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [sortBy, setSortBy] = useState('recent');
+
+  return (
+    <div
+      ref={scrollRef}
+      className="bg-background text-foreground relative h-full overflow-y-auto"
+    >
+      <header className="border-border bg-background/95 sticky top-0 z-20 border-b backdrop-blur">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-4 px-6 py-3">
+          <div className="mr-auto">
+            <h1 className="text-base font-semibold">DocsGPT design system</h1>
+            <p className="text-muted-foreground text-xs">
+              Defaults from frontend/DESIGN.md, rendered with the real
+              components. Dev route only.
+            </p>
+          </div>
+          <nav className="hidden flex-wrap gap-1 lg:flex">
+            {SECTIONS.map(([id, label]) => (
+              <Button key={id} asChild variant="ghost-muted" size="xs">
+                <a href={`#${id}`} onClick={jumpTo(id)}>
+                  {label}
+                </a>
+              </Button>
+            ))}
+          </nav>
+          <Button
+            variant="outline"
+            size="sm"
+            shape="pill"
+            onClick={toggleTheme}
+            aria-label="Toggle theme"
+          >
+            {isDark ? <Sun /> : <Moon />}
+            {isDark ? 'Light' : 'Dark'}
+          </Button>
+        </div>
+      </header>
+
+      <main className="mx-auto flex max-w-6xl flex-col gap-16 px-6 py-10">
+        <Section
+          id="tokens"
+          title="Colour tokens"
+          intro="Every colour in the UI resolves to one of these variables from src/index.css. The value shown is the one currently applied, so toggle the theme to compare."
+        >
+          <Example title="Surfaces" code="bg-card text-card-foreground">
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+              {SURFACE_TOKENS.map((t) => (
+                <Swatch key={t.name} {...t} isDark={isDark} />
+              ))}
+            </div>
+          </Example>
+          <Example
+            title="Brand and status"
+            code="bg-success text-success-foreground"
+          >
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+              {BRAND_TOKENS.map((t) => (
+                <Swatch key={t.name} {...t} isDark={isDark} />
+              ))}
+            </div>
+          </Example>
+          <Example title="Lines and charts" code="border-border · bg-chart-1">
+            <div className="flex flex-wrap items-center gap-6">
+              {LINE_TOKENS.map((t) => (
+                <div key={t.name} className="flex items-center gap-2">
+                  <div className={`${t.cls} size-10 rounded-md border-2`} />
+                  <span className="text-muted-foreground text-xs">
+                    {t.name}
+                  </span>
+                </div>
+              ))}
+              <div className="flex items-center gap-1">
+                {CHART_TOKENS.map((cls) => (
+                  <div key={cls} className={`${cls} h-10 w-6 rounded-sm`} />
+                ))}
+                <span className="text-muted-foreground ml-2 text-xs">
+                  chart-1 to chart-5: primary, info, success, warning,
+                  destructive
+                </span>
+              </div>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="typography"
+          title="Typography"
+          intro="Two text tones cover the app: foreground for content and muted-foreground for everything secondary. Lighter tiers use an opacity modifier, not a lighter grey."
+        >
+          <Example
+            title="Tones"
+            code="text-foreground · text-muted-foreground · text-muted-foreground/70"
+          >
+            <div className="flex flex-col gap-2 text-sm">
+              <p className="text-foreground">
+                Foreground: titles, body copy, values in tables.
+              </p>
+              <p className="text-muted-foreground">
+                Muted foreground: descriptions, labels, timestamps, icons.
+              </p>
+              <p className="text-muted-foreground/70">
+                Muted at 70%: placeholders and de-emphasised metadata.
+              </p>
+              <p className="text-primary">
+                Primary: links and the selected state.
+              </p>
+              <p className="text-destructive">Destructive: errors.</p>
+            </div>
+          </Example>
+          <Example
+            title="Scale"
+            code="text-xs · text-sm · text-base · text-lg · text-xl · font-mono"
+          >
+            <div className="flex flex-col gap-2">
+              <p className="text-xs">Extra small, 12px, badges and hints</p>
+              <p className="text-sm">Small, 14px, the default UI size</p>
+              <p className="text-base">
+                Base, 16px, inputs on mobile and prose
+              </p>
+              <p className="text-lg font-semibold">
+                Large, 18px, section titles
+              </p>
+              <p className="text-xl leading-tight font-semibold">
+                Extra large, 20px, dialog, sheet and detail-page titles
+              </p>
+              <p className="font-mono text-xs">Mono 12px: ids, keys, code</p>
+            </div>
+          </Example>
+          <Example
+            title="Roles"
+            code='<SectionHeader size="default | sm | xs" tone="destructive"> · CardTitle + CardDescription size="xs"'
+          >
+            <div className="flex max-w-md flex-col gap-6">
+              <SectionHeader
+                title="Prompts"
+                description="System prompts your agents can use."
+              />
+              <div className="flex flex-col gap-3">
+                <SectionHeader as="h3" size="sm" title="Recurring" />
+                <SectionHeader as="h3" size="xs" title="Connection" />
+                <SectionHeader
+                  as="h3"
+                  size="xs"
+                  tone="destructive"
+                  title="Danger zone"
+                />
+              </div>
+              <Card variant="filled">
+                <CardTitle>Vendor Due Diligence</CardTitle>
+                <CardDescription size="xs">
+                  Checks new carriers against sanctions lists and insurance
+                  certificates before onboarding.
+                </CardDescription>
+              </Card>
+            </div>
+          </Example>
+          <Example
+            title="Separator"
+            code='<Separator /> · <Separator orientation="vertical" />'
+          >
+            <div className="flex flex-col gap-6">
+              <div className="flex max-w-md flex-col gap-3 text-sm">
+                <p>Carrier network: 42 carriers across 18 lanes.</p>
+                <Separator />
+                <p className="text-muted-foreground">
+                  Last synced from SharePoint 12 minutes ago.
+                </p>
+              </div>
+              <div className="flex h-8 items-center gap-2">
+                <Button variant="ghost" size="sm">
+                  Export
+                </Button>
+                <Separator orientation="vertical" />
+                <Button variant="ghost" size="sm">
+                  Share
+                </Button>
+              </div>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="buttons"
+          title="Buttons"
+          intro="Pick a variant for meaning, a size for density and a shape for the surface it sits on. className is for placement only."
+        >
+          <Example
+            title="Variants × sizes"
+            code='<Button variant="…" size="…">'
+          >
+            <div className="overflow-x-auto">
+              <div className="grid min-w-2xl grid-cols-[8rem_repeat(4,auto)] items-center gap-x-6 gap-y-3">
+                <span />
+                {BUTTON_SIZES.map((size) => (
+                  <span
+                    key={size}
+                    className="text-muted-foreground font-mono text-xs"
+                  >
+                    {size}
+                  </span>
+                ))}
+                {BUTTON_VARIANTS.map((variant) => (
+                  <div key={variant} className="contents">
+                    <span className="text-muted-foreground font-mono text-xs">
+                      {variant}
+                    </span>
+                    {BUTTON_SIZES.map((size) => (
+                      <div key={size}>
+                        <Button variant={variant} size={size}>
+                          <Plus />
+                          Add source
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Shapes"
+            code='shape="pill" replaces rounded-3xl / rounded-full overrides'
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              <Button shape="pill">Send</Button>
+              <Button shape="pill" size="lg">
+                Get started
+              </Button>
+              <Button shape="pill" variant="outline-primary">
+                Upgrade
+              </Button>
+              <Button shape="pill" variant="outline">
+                <Settings />
+                Configure
+              </Button>
+              <Button shape="pill" variant="secondary" size="sm">
+                Filter
+              </Button>
+              <Button shape="pill" variant="ghost-muted" size="xs">
+                Clear
+              </Button>
+              <Button shape="pill" variant="outline" size="sm">
+                <Mic />
+                Voice
+              </Button>
+            </div>
+          </Example>
+          <Example
+            title="Sidebar rows"
+            code='<Button variant="sidebar-item" aria-current={active ? "page" : undefined}>'
+          >
+            <div className="bg-sidebar flex w-64 flex-col gap-1 rounded-lg border py-2">
+              <Button variant="sidebar-item" className="mx-4 w-auto">
+                <Book className="text-muted-foreground size-5" />
+                Sources
+              </Button>
+              <Button
+                variant="sidebar-item"
+                aria-current="page"
+                className="mx-4 w-auto"
+              >
+                <Settings className="text-muted-foreground size-5" />
+                Settings
+              </Button>
+              <Button variant="sidebar-item" className="mx-4 w-auto">
+                <MessageSquare className="text-muted-foreground size-5" />
+                Help
+              </Button>
+            </div>
+          </Example>
+          <Example
+            title="Combobox trigger"
+            code='<Button variant="combobox" role="combobox" data-placeholder={value ? undefined : ""}>'
+          >
+            <div className="flex max-w-md flex-col gap-3">
+              <Button
+                variant="combobox"
+                role="combobox"
+                aria-expanded={false}
+                data-placeholder=""
+                className="w-full justify-between"
+              >
+                <span className="truncate">Select a timezone…</span>
+                <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+              </Button>
+              <Button
+                variant="combobox"
+                role="combobox"
+                aria-expanded={false}
+                className="w-full justify-between"
+              >
+                <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                  <span className="truncate">Europe/Berlin</span>
+                  <span className="text-muted-foreground shrink-0 text-xs">
+                    UTC+02:00
+                  </span>
+                </span>
+                <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+              </Button>
+            </div>
+          </Example>
+          <Example
+            title="Form row (field height)"
+            code='<Input shape="pill"> · <SelectTrigger size="field" shape="pill"> · <Button variant="combobox" size="field" shape="pill">'
+          >
+            <div className="flex max-w-md flex-col gap-3">
+              <Input shape="pill" placeholder="Agent name" />
+              <div className="flex gap-2">
+                <Select defaultValue="default">
+                  <SelectTrigger size="field" shape="pill" className="flex-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="default">default</SelectItem>
+                    <SelectItem value="strict">strict</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button variant="outline-primary" size="field" shape="pill">
+                  Add
+                </Button>
+              </div>
+              <Button
+                variant="combobox"
+                size="field"
+                shape="pill"
+                data-placeholder=""
+                className="w-full justify-start text-left"
+              >
+                <span className="truncate">Select sources</span>
+              </Button>
+            </div>
+          </Example>
+          <Example
+            title="Link inside running text"
+            code='<Button variant="link" size="inline" asChild><a href>'
+          >
+            <p className="text-foreground max-w-md text-base">
+              The quarterly review for Halvorsen Logistics is ready. Open{' '}
+              <Button variant="link" size="inline" asChild>
+                <a href="#buttons">QBR report.html</a>
+              </Button>{' '}
+              to see lane costs and the renewal summary.
+            </p>
+          </Example>
+          <Example
+            title="Underline tabs"
+            code='<Button variant="tab" data-active={active}>  ·  size="inline" for padding-free tabs'
+          >
+            <div className="flex flex-col gap-6">
+              <div className="border-border flex border-b">
+                <Button variant="tab" data-active>
+                  My Files
+                </Button>
+                <Button variant="tab">Shared with Me</Button>
+              </div>
+              <div className="border-border flex items-center gap-6 border-b">
+                <Button
+                  variant="tab"
+                  size="inline"
+                  data-active
+                  className="-mb-px"
+                >
+                  Overview
+                </Button>
+                <Button variant="tab" size="inline" className="-mb-px">
+                  Logs
+                </Button>
+                <Button variant="tab" size="inline" className="-mb-px">
+                  Schedules
+                </Button>
+              </div>
+            </div>
+          </Example>
+          <Example title="Loading" code="<Button loading={saving}>">
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                size="lg"
+                shape="pill"
+                loading={saving}
+                onClick={() => {
+                  setSaving(true);
+                  window.setTimeout(() => setSaving(false), 1500);
+                }}
+              >
+                Create token
+              </Button>
+              <Button variant="outline" size="lg" shape="pill" loading>
+                Test connection
+              </Button>
+              <Button variant="destructive" loading>
+                Delete team
+              </Button>
+              <span className="text-muted-foreground text-xs">
+                Disabled, aria-busy, 16px spinner over the kept label; the width
+                holds.
+              </span>
+            </div>
+          </Example>
+          <Example
+            title="Section panel toggle"
+            code='<div className="has-[[data-variant=section-toggle]:focus-visible]:ring-3 …"><Button variant="section-toggle" size="sm" aria-expanded>'
+          >
+            <div className="bg-muted max-w-md rounded-2xl p-4">
+              <div className="bg-card has-[[data-variant=section-toggle]:focus-visible]:ring-ring/50 rounded-2xl px-6 py-3 has-[[data-variant=section-toggle]:focus-visible]:ring-3 has-[[data-variant=section-toggle]:focus-visible]:ring-inset">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant="section-toggle"
+                    size="sm"
+                    aria-expanded={sectionOpen}
+                    onClick={() => setSectionOpen(!sectionOpen)}
+                    className="-ml-3 w-fit justify-start"
+                  >
+                    <ChevronRight
+                      aria-hidden="true"
+                      className={sectionOpen ? 'rotate-90' : undefined}
+                    />
+                    <span className="text-lg font-semibold">Guardrails</span>
+                  </Button>
+                  <Badge variant="success">3 active</Badge>
+                  <Badge variant="destructive">1 needs setup</Badge>
+                </div>
+                {sectionOpen && (
+                  <p className="text-muted-foreground mt-2 text-sm">
+                    Run the selected checks on this agent&apos;s runs.
+                  </p>
+                )}
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Pressed toggles"
+            code='variant={active ? "secondary" : "ghost-muted"}'
+          >
+            <div className="grid gap-4 md:grid-cols-3">
+              {(['card', 'background', 'muted'] as const).map((surface) => (
+                <div
+                  key={surface}
+                  className={
+                    surface === 'card'
+                      ? 'bg-card flex items-center gap-2 rounded-lg border p-4'
+                      : surface === 'background'
+                        ? 'bg-background flex items-center gap-2 rounded-lg border p-4'
+                        : 'bg-muted flex items-center gap-2 rounded-lg border p-4'
+                  }
+                >
+                  <IconButton
+                    variant="ghost-muted"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Copy"
+                    icon={Copy}
+                  />
+                  <IconButton
+                    variant="secondary"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Copied"
+                    icon={Check}
+                  />
+                  <Button variant="secondary" size="xs" shape="pill">
+                    <Check />
+                    Copied
+                  </Button>
+                  <span className="text-muted-foreground text-xs">
+                    on {surface}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Example>
+          <Example
+            title="Segmented control"
+            code='<ToggleGroup type="single" value onValueChange={(v) => v && set(v)}> · size="xs" in a bg-muted rounded-full p-1 wrapper · type="multiple"'
+          >
+            <div className="flex flex-col gap-6">
+              <ToggleGroup
+                type="single"
+                aria-label="Date range"
+                value={range}
+                onValueChange={(v) => v && setRange(v)}
+              >
+                <ToggleGroupItem value="7d">7d</ToggleGroupItem>
+                <ToggleGroupItem value="30d">30d</ToggleGroupItem>
+                <ToggleGroupItem value="90d">90d</ToggleGroupItem>
+              </ToggleGroup>
+              {/* The track is a plain wrapper: ToggleGroup takes layout only. */}
+              <div className="bg-muted max-w-xs rounded-full p-1">
+                <ToggleGroup
+                  type="single"
+                  size="xs"
+                  aria-label="Chart range"
+                  value={trackRange}
+                  onValueChange={(v) => v && setTrackRange(v)}
+                  className="w-full"
+                >
+                  <ToggleGroupItem value="7d" className="flex-1">
+                    7d
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="30d" className="flex-1">
+                    30d
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="90d" className="flex-1">
+                    90d
+                  </ToggleGroupItem>
+                </ToggleGroup>
+              </div>
+              <ToggleGroup
+                type="multiple"
+                aria-label="Days of the week"
+                value={days}
+                onValueChange={setDays}
+              >
+                {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(
+                  (day) => (
+                    <ToggleGroupItem key={day} value={day.toLowerCase()}>
+                      {day}
+                    </ToggleGroupItem>
+                  ),
+                )}
+              </ToggleGroup>
+              <div className="flex flex-col gap-2">
+                <nav
+                  aria-label="Agent filters"
+                  className="flex flex-wrap gap-1"
+                >
+                  {(
+                    [
+                      ['all', 'All agents'],
+                      ['mine', 'Mine'],
+                      ['shared', 'Shared with me'],
+                    ] as const
+                  ).map(([id, label]) => (
+                    <Button
+                      key={id}
+                      asChild
+                      variant={agentFilter === id ? 'outline' : 'ghost-muted'}
+                      size="sm"
+                      shape="pill"
+                    >
+                      <a
+                        href="#buttons"
+                        aria-current={agentFilter === id ? 'page' : undefined}
+                        onClick={(event) => {
+                          event.preventDefault();
+                          setAgentFilter(id);
+                        }}
+                      >
+                        {label}
+                      </a>
+                    </Button>
+                  ))}
+                </nav>
+                <span className="text-muted-foreground text-xs">
+                  Route links are not a ToggleGroup: Button asChild
+                  variant=&#123;active ? &apos;outline&apos; :
+                  &apos;ghost-muted&apos;&#125; size=&quot;sm&quot;
+                  shape=&quot;pill&quot; around each Link, aria-current on the
+                  current one.
+                </span>
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Icon buttons"
+            code='<IconButton label="Edit" icon={Pencil} size="icon-xs" … "icon-lg">'
+          >
+            <div className="flex flex-wrap items-center gap-6">
+              {ICON_SIZES.map((size) => (
+                <div key={size} className="flex flex-col items-center gap-2">
+                  <div className="flex items-center gap-2">
+                    <IconButton
+                      size={size}
+                      variant="default"
+                      label="Add"
+                      icon={Plus}
+                    />
+                    <IconButton
+                      size={size}
+                      variant="outline"
+                      label="Edit"
+                      icon={Pencil}
+                    />
+                    <IconButton
+                      size={size}
+                      variant="ghost-muted"
+                      label="More"
+                      icon={MoreHorizontal}
+                    />
+                    <IconButton
+                      size={size}
+                      variant="ghost-destructive"
+                      shape="pill"
+                      label="Delete"
+                      icon={Trash2}
+                    />
+                  </div>
+                  <span className="text-muted-foreground font-mono text-xs">
+                    {size}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Example>
+          <Example
+            title="On an accent row"
+            code='variant="ghost-on-accent" · "ghost-destructive-on-accent"'
+          >
+            <div className="flex flex-col gap-3">
+              <div className="bg-accent text-accent-foreground flex w-80 items-center justify-between rounded-sm px-2 py-1.5 text-sm">
+                <span>Carrier onboarding checklist</span>
+                <div className="flex items-center gap-1">
+                  <IconButton
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    label="Edit"
+                    icon={Pencil}
+                  />
+                  <IconButton
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    label="Duplicate"
+                    icon={Copy}
+                  />
+                  <IconButton
+                    size="icon-xs"
+                    variant="ghost-destructive-on-accent"
+                    label="Delete"
+                    icon={Trash2}
+                  />
+                </div>
+              </div>
+              <div className="bg-sidebar-accent flex h-9 w-80 items-center justify-between rounded-3xl pl-3 text-sm">
+                <span>Vendor Due Diligence</span>
+                <div className="flex items-center px-1.5">
+                  <IconButton
+                    size="icon-xs"
+                    variant="ghost-on-accent"
+                    label="Pin agent"
+                    icon={Pin}
+                  />
+                </div>
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Action menu"
+            code="<ActionMenu options triggerLabel />"
+          >
+            <div className="bg-muted hover:bg-accent relative h-24 w-48 rounded-2xl p-4 text-sm">
+              <span className="font-semibold">Vendor Due Diligence</span>
+              <ActionMenu
+                triggerLabel="Agent actions"
+                className="absolute top-3 right-3"
+                options={[
+                  { icon: Pencil, label: 'Edit', onClick: () => {} },
+                  { icon: Copy, label: 'Duplicate', onClick: () => {} },
+                  { icon: Pin, label: 'Pin agent', onClick: () => {} },
+                  {
+                    icon: Trash2,
+                    label: 'Delete',
+                    variant: 'destructive',
+                    onClick: () => {},
+                  },
+                ]}
+              />
+            </div>
+          </Example>
+          <Example title="States" code="disabled · asChild">
+            <div className="flex flex-wrap items-center gap-3">
+              <Button disabled>Saving…</Button>
+              <Button variant="outline" disabled>
+                Disabled outline
+              </Button>
+              <Button variant="destructive">
+                <Trash2 />
+                Delete
+              </Button>
+              <Button variant="destructive-outline" size="sm">
+                Remove
+              </Button>
+              <Button asChild variant="link">
+                <a href="#buttons">Rendered as a link</a>
+              </Button>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="badges"
+          title="Badges, toasts & notices"
+          intro="Status meaning comes from the four status tokens. Pills are Badge. A field error is FormField error; a result inside an open modal, or a notice to read before acting, is an Alert; anything else the user did is a toast in the bottom-right corner."
+        >
+          <Example title="Badge variants" code='<Badge variant="success">'>
+            <div className="flex flex-wrap items-center gap-2">
+              {BADGE_VARIANTS.map((variant) => (
+                <Badge key={variant} variant={variant}>
+                  {variant}
+                </Badge>
+              ))}
+              <Badge variant="success">
+                <Check />
+                With icon
+              </Badge>
+            </div>
+          </Example>
+          <Example
+            title="Toasts"
+            code='<ToastViewport> (one, in App.tsx) > <Toast><ToastHeader variant="default | success | warning | destructive | info"><ToastTitle wrap?> · <ToastItem icon? label meta><ToastStatus status/> · <ToastMessage variant size>'
+          >
+            <div className="bg-muted/40 flex flex-wrap items-start gap-4 rounded-xl p-6">
+              <Toast>
+                <ToastHeader variant="destructive">
+                  <ToastTitle>Upload failed</ToastTitle>
+                  <ToastActions>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Collapse"
+                    >
+                      <ChevronDown />
+                    </Button>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Dismiss"
+                    >
+                      <X />
+                    </Button>
+                  </ToastActions>
+                </ToastHeader>
+                <ToastContent>
+                  <ToastItem label="🦖1.png">
+                    <ToastStatus status="destructive" />
+                  </ToastItem>
+                  <ToastMessage variant="destructive">
+                    No text could be extracted from this file. It may be empty,
+                    image-only, or in an unsupported format.
+                  </ToastMessage>
+                </ToastContent>
+              </Toast>
+              <Toast>
+                <ToastHeader>
+                  <ToastTitle>Upload completed</ToastTitle>
+                  <ToastActions>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Collapse"
+                    >
+                      <ChevronDown />
+                    </Button>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Dismiss"
+                    >
+                      <X />
+                    </Button>
+                  </ToastActions>
+                </ToastHeader>
+                <ToastContent scrollable>
+                  <ToastItem label="Audit.md" meta="1.8k tokens">
+                    <ToastStatus status="success" />
+                  </ToastItem>
+                  <ToastItem label="Tender checklist.docx" meta="Indexing…">
+                    <ToastStatus status="pending" />
+                  </ToastItem>
+                </ToastContent>
+              </Toast>
+              <Toast>
+                <ToastHeader variant="warning">
+                  <ToastTitle>Tool approval needed</ToastTitle>
+                  <ToastActions>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Dismiss"
+                    >
+                      <X />
+                    </Button>
+                  </ToastActions>
+                </ToastHeader>
+                <ToastContent>
+                  <ToastItem
+                    icon={<ToastStatus status="warning" />}
+                    label="Vendor Due Diligence"
+                    meta="wants to run web_search"
+                  />
+                  <ToastFooter>
+                    <Button size="sm" variant="outline">
+                      Deny
+                    </Button>
+                    <Button size="sm">Approve</Button>
+                  </ToastFooter>
+                </ToastContent>
+              </Toast>
+              <Toast>
+                <ToastHeader>
+                  <ToastTitle wrap>
+                    Zu einem Team hinzugefügt: Meridian Freight Operations
+                  </ToastTitle>
+                  <ToastActions>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost-muted"
+                      aria-label="Dismiss"
+                    >
+                      <X />
+                    </Button>
+                  </ToastActions>
+                </ToastHeader>
+                <ToastContent>
+                  <ToastMessage size="sm">
+                    You were added to Meridian Freight Operations as member
+                  </ToastMessage>
+                </ToastContent>
+              </Toast>
+              <Toast>
+                <ToastHeader variant="success">
+                  <ToastTitle>Sync finished</ToastTitle>
+                </ToastHeader>
+                <ToastContent>
+                  <ToastItem label="SharePoint">
+                    <ToastStatus status="success" />
+                  </ToastItem>
+                  <ToastMessage variant="success">
+                    412 documents are up to date.
+                  </ToastMessage>
+                  <ToastItem label="Google Drive">
+                    <ToastStatus status="warning" />
+                  </ToastItem>
+                  <ToastMessage variant="warning">
+                    3 files were skipped: over the 25 MB limit.
+                  </ToastMessage>
+                  <ToastItem label="Confluence">
+                    <ToastStatus status="info" />
+                  </ToastItem>
+                  <ToastMessage variant="info">
+                    Queued behind the nightly re-embed.
+                  </ToastMessage>
+                </ToastContent>
+              </Toast>
+              <Toast>
+                <ToastHeader variant="info">
+                  <ToastTitle>New model available</ToastTitle>
+                </ToastHeader>
+                <ToastContent>
+                  <ToastMessage size="sm">
+                    Re-embed your sources to use it for retrieval.
+                  </ToastMessage>
+                </ToastContent>
+              </Toast>
+            </div>
+          </Example>
+          <Example
+            title="Inline notices (forms and modals only)"
+            code='<Alert variant="default (= neutral) | success | warning | info | destructive">'
+          >
+            <div className="flex flex-col gap-3">
+              <Alert>
+                <Mail />
+                <AlertTitle>Index rebuilt</AlertTitle>
+                <AlertDescription>
+                  All 1,204 chunks were re-embedded with the new model.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="success">
+                <Check />
+                <AlertTitle>Connector synced</AlertTitle>
+                <AlertDescription>
+                  SharePoint finished 12 minutes ago with no changes.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="warning">
+                <Clock />
+                <AlertTitle>Token expires in 3 days</AlertTitle>
+                <AlertDescription>
+                  Reconnect before Friday to keep the nightly sync running.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="info">
+                <Search />
+                <AlertTitle>Indexing in progress</AlertTitle>
+                <AlertDescription>
+                  Answers may miss the newest documents until it finishes.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="destructive">
+                <Trash2 />
+                <AlertTitle>Connector unreachable</AlertTitle>
+                <AlertDescription>
+                  The SharePoint token expired. Reconnect to resume syncing.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="destructive">
+                <CircleAlert />
+                <AlertDescription>
+                  Failed to regenerate the token. Please try again.
+                </AlertDescription>
+              </Alert>
+              <Alert variant="warning" className="max-w-md">
+                <TriangleAlert />
+                <AlertDescription>
+                  Copy the token now and store it somewhere safe. For security
+                  reasons it won&apos;t be shown again.
+                </AlertDescription>
+              </Alert>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="cards"
+          title="Cards"
+          intro="One card, three surfaces. outline is the bordered default; filled is for tiles on a card-coloured page; subtle is a bordered box on a muted page. Interactive cards are the whole target."
+        >
+          <Example
+            title="Entity cards"
+            code='<Card variant="outline | filled"> + CardHeader / CardTitle / CardAction / CardFooter'
+          >
+            <div className="grid gap-4 md:grid-cols-3">
+              <Card variant="filled">
+                <CardHeader>
+                  <CardTitle>
+                    Doc 1 - Tender Guidance and Checklist.docx
+                  </CardTitle>
+                  <CardAction>
+                    <IconButton
+                      size="icon-xs"
+                      variant="ghost-muted"
+                      label="More"
+                      icon={MoreHorizontal}
+                    />
+                  </CardAction>
+                </CardHeader>
+                <CardFooter className="flex-col items-start gap-1">
+                  <span className="flex items-center gap-1">
+                    <CalendarIcon className="size-3" /> 11/08/2026, 16:44
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Database className="size-3" /> 1.8k tokens
+                  </span>
+                </CardFooter>
+              </Card>
+              <Card variant="filled">
+                <CardHeader>
+                  <div className="flex flex-col gap-1">
+                    <CardTitle>Arc53</CardTitle>
+                    <Badge variant="neutral">GraphRAG</Badge>
+                  </div>
+                  <CardAction>
+                    <IconButton
+                      size="icon-xs"
+                      variant="ghost-muted"
+                      label="More"
+                      icon={MoreHorizontal}
+                    />
+                  </CardAction>
+                </CardHeader>
+                <CardFooter className="flex-col items-start gap-1">
+                  <span className="flex items-center gap-1">
+                    <CalendarIcon className="size-3" /> 29/06/2026, 05:22
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Database className="size-3" /> 20.19k tokens
+                  </span>
+                </CardFooter>
+              </Card>
+              <Card variant="filled">
+                <CardHeader>
+                  <span className="bg-muted-foreground/15 text-foreground flex size-8 items-center justify-center rounded-md">
+                    <FileText className="size-4" />
+                  </span>
+                  <CardAction>
+                    <IconButton
+                      size="icon-xs"
+                      variant="ghost-muted"
+                      label="More"
+                      icon={MoreHorizontal}
+                    />
+                  </CardAction>
+                </CardHeader>
+                <CardContent className="flex flex-col gap-1">
+                  <CardTitle>Notepad</CardTitle>
+                  <CardDescription>
+                    Single note. Supports viewing, overwriting, string
+                    replacement.
+                  </CardDescription>
+                </CardContent>
+                <CardFooter className="justify-end">
+                  <Switch
+                    checked={toolOn}
+                    onCheckedChange={setToolOn}
+                    aria-label="Enable tool"
+                  />
+                </CardFooter>
+              </Card>
+            </div>
+          </Example>
+          <Example
+            title="Bordered surfaces"
+            code='<Card> (outline) · <Card interactive asChild><Link/></Card> · <Card padding="sm">'
+          >
+            <div className="grid gap-4 md:grid-cols-2">
+              <Card interactive asChild>
+                <a href="#cards">
+                  <CardHeader>
+                    <div className="flex items-center gap-3">
+                      <Avatar size="default" shape="square" variant="muted">
+                        A
+                      </Avatar>
+                      <CardTitle>Arc</CardTitle>
+                    </div>
+                    <CardAction className="flex items-center gap-2">
+                      <Badge variant="neutral">admin</Badge>
+                      <span className="text-muted-foreground">›</span>
+                    </CardAction>
+                  </CardHeader>
+                  <CardDescription className="italic">
+                    No description
+                  </CardDescription>
+                  <CardFooter>
+                    <Users className="size-3" /> 3 members · 3 shared
+                  </CardFooter>
+                </a>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <div className="flex items-start gap-3">
+                    <Avatar size="lg" shape="circle" imgClassName="size-full" />
+                    <div className="flex flex-col gap-1">
+                      <CardTitle>DocsGPT New Contact Responder</CardTitle>
+                      <CardDescription className="line-clamp-2">
+                        This agent processes notifications about new contact
+                        form submissions, extracts the name and email address,
+                        then drafts a personalised welcome.
+                      </CardDescription>
+                    </div>
+                  </div>
+                  <CardAction>
+                    <Button size="sm" variant="outline" shape="pill">
+                      <Pencil />
+                      Edit
+                    </Button>
+                  </CardAction>
+                </CardHeader>
+              </Card>
+              <div className="grid grid-cols-2 items-start gap-3">
+                <Card padding="sm" className="gap-1">
+                  <CardDescription>Run success</CardDescription>
+                  <span className="text-xl font-semibold">—</span>
+                </Card>
+                <Card padding="sm" className="gap-1">
+                  <CardDescription>Feedback</CardDescription>
+                  <span className="text-xl font-semibold">+0 / -0</span>
+                </Card>
+              </div>
+              <Card padding="sm">
+                <CardHeader className="items-center">
+                  <CardTitle>Token usage</CardTitle>
+                  <CardAction className="flex items-center gap-2">
+                    <span className="text-muted-foreground text-xs">
+                      Background tokens
+                    </span>
+                    <Switch aria-label="Background tokens" />
+                  </CardAction>
+                </CardHeader>
+                <CardContent>
+                  <div className="bg-muted/40 flex h-24 items-end justify-around rounded-lg px-4 pb-2">
+                    <span className="bg-chart-1 h-6 w-3 rounded-sm" />
+                    <span className="bg-chart-1 h-16 w-3 rounded-sm" />
+                    <span className="bg-chart-2 h-10 w-3 rounded-sm" />
+                    <span className="bg-chart-1 h-3 w-3 rounded-sm" />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </Example>
+          <Example
+            title="Subtle surface and paddings"
+            code='<Card variant="subtle"> on bg-muted · tone="destructive" · padding="lg" · padding="none"'
+          >
+            <div className="bg-muted grid items-start gap-4 rounded-2xl p-4 md:grid-cols-2">
+              <Card variant="subtle" padding="lg">
+                <CardTitle>Subtle</CardTitle>
+                <CardDescription>
+                  subtle is a bordered background-coloured box on a muted page;
+                  lg pads it 24px.
+                </CardDescription>
+              </Card>
+              <Card tone="destructive" padding="lg">
+                <CardTitle>Danger zone</CardTitle>
+                <CardDescription>
+                  tone=&quot;destructive&quot;: the status soft fill and border,
+                  for danger zones and a red stat tile.
+                </CardDescription>
+              </Card>
+              <Card padding="none" className="overflow-hidden">
+                <div className="bg-muted/40 flex h-20 items-center justify-center">
+                  <FileText className="text-muted-foreground size-6" />
+                </div>
+                <CardContent className="px-4 pb-4">
+                  <CardTitle>QBR report.html</CardTitle>
+                  <CardDescription>
+                    padding=&quot;none&quot;: the preview bleeds to the edge.
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            </div>
+          </Example>
+          <Example
+            title="Picker tiles"
+            code="<OptionCard icon title description? selected onClick>"
+          >
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-3 sm:grid-cols-2" role="radiogroup">
+                <OptionCard
+                  icon={<Bot />}
+                  title="Classic Agent"
+                  description="A standard AI agent with a single model, tools and knowledge sources."
+                  selected={agentType === 'classic'}
+                  onClick={() => setAgentType('classic')}
+                />
+                <OptionCard
+                  icon={<Workflow />}
+                  title="Workflow Agent"
+                  description="Multi-step workflows with different models, conditions and state."
+                  selected={agentType === 'workflow'}
+                  onClick={() => setAgentType('workflow')}
+                />
+              </div>
+              <div
+                className="grid gap-3 sm:grid-cols-2 md:grid-cols-3"
+                role="radiogroup"
+              >
+                {SOURCE_TYPES.map(([label, Icon]) => (
+                  <OptionCard
+                    key={label}
+                    icon={<Icon />}
+                    title={label}
+                    selected={sourceType === label}
+                    onClick={() => setSourceType(label)}
+                  />
+                ))}
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Identity rows"
+            code="<ListRows><ListRow leading title description trailing interactive asChild>"
+          >
+            <Card padding="none" className="overflow-hidden">
+              <ListRows>
+                <ListRow
+                  leading={
+                    <Avatar size="sm" shape="circle" variant="muted">
+                      L
+                    </Avatar>
+                  }
+                  title="lena.fischer@meridianfreight.com"
+                  description="Added manually"
+                  trailing={<Badge variant="default">admin</Badge>}
+                />
+                <ListRow
+                  leading={
+                    <span className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md">
+                      <FileText className="size-4" />
+                    </span>
+                  }
+                  title="Carrier contracts 2026"
+                  description="Source"
+                  trailing={<Badge variant="neutral">viewer</Badge>}
+                />
+                <ListRow
+                  interactive
+                  asChild
+                  title="Sources"
+                  trailing={
+                    <ChevronRight className="text-muted-foreground size-4" />
+                  }
+                >
+                  <button type="button" />
+                </ListRow>
+              </ListRows>
+            </Card>
+          </Example>
+          <Example
+            title="Key/value rows"
+            code='<DescriptionList layout="columns | justified" size="sm | xs"><DescriptionItem label mono>'
+          >
+            <div className="grid items-start gap-6 md:grid-cols-2">
+              <DescriptionList>
+                <DescriptionItem label="Status">
+                  <Badge variant="success">Success</Badge>
+                </DescriptionItem>
+                <DescriptionItem label="Started">
+                  24/09/2026, 09:00
+                </DescriptionItem>
+                <DescriptionItem label="Endpoint" mono>
+                  https://api.meridianfreight.example/v2/carriers/renewals
+                </DescriptionItem>
+              </DescriptionList>
+              <DescriptionList layout="justified">
+                <DescriptionItem label="Last used">
+                  3 minutes ago
+                </DescriptionItem>
+                <DescriptionItem label="Tokens">1,204</DescriptionItem>
+              </DescriptionList>
+            </div>
+          </Example>
+          <Example
+            title="Pager"
+            code='<Pagination page pageCount onPageChange pageSize? summary? labels="icons | text">'
+          >
+            <div className="flex flex-col gap-4">
+              <Pagination
+                page={pagerPage}
+                pageCount={5}
+                onPageChange={setPagerPage}
+                pageSize={10}
+                onPageSizeChange={() => undefined}
+              />
+              <Pagination
+                page={pagerPage}
+                pageCount={5}
+                onPageChange={setPagerPage}
+                summary="1,024 users"
+              />
+            </div>
+          </Example>
+          <Example
+            title="Empty, loading and failed"
+            code="<EmptyState size tone illustration> · <LoadingState fill label>"
+          >
+            <div className="grid items-center gap-6 md:grid-cols-3">
+              <EmptyState size="sm" title="No existing Sources" />
+              <EmptyState
+                tone="destructive"
+                size="sm"
+                illustration="none"
+                title="Failed to load usage."
+                action={
+                  <Button variant="outline" size="sm">
+                    Retry
+                  </Button>
+                }
+              />
+              <LoadingState fill="block" label="Converting..." />
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="forms"
+          title="Forms"
+          intro="Inputs and selects share the 38px form-row height (size field), the sm and lg densities and the pill shape. Every form field is labelled by a floating label (FormField, or the Input label shorthand)."
+        >
+          <Example
+            title="Input sizes"
+            code='<Input size="sm" | "default" | "field" | "lg">'
+          >
+            <div className="grid gap-4 md:grid-cols-4">
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="in-sm">Small</Label>
+                <Input id="in-sm" size="sm" placeholder="Filter rows…" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="in-md">Default</Label>
+                <Input id="in-md" placeholder="Agent name" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="in-field">Field (38px form row)</Label>
+                <Input id="in-field" size="field" placeholder="Server URL" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="in-lg">Large</Label>
+                <Input id="in-lg" size="lg" placeholder="Ask anything…" />
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Input shapes and states"
+            code='shape="pill" · label · leftIcon · aria-invalid · disabled'
+          >
+            <div className="grid gap-6 md:grid-cols-2">
+              <Input size="lg" shape="pill" placeholder="Search the docs" />
+              <Input
+                shape="pill"
+                leftIcon={<Search className="text-muted-foreground size-4" />}
+                label="With icon"
+              />
+              <Input
+                leftIcon={<Search className="text-muted-foreground size-4" />}
+                placeholder="Search files (icon, no label)"
+              />
+              <Input label="Floating label" defaultValue="Renewal desk" />
+              <Input label="Required" required />
+              <Input label="Invalid" aria-invalid defaultValue="not-an-email" />
+              <Input label="Disabled" disabled defaultValue="Read only" />
+            </div>
+          </Example>
+          <Example
+            title="Floating label on other surfaces"
+            code='<Input label="…" labelSurface="card" | "background" | "muted">'
+          >
+            <div className="grid gap-4 md:grid-cols-3">
+              {(['card', 'background', 'muted'] as const).map((surface) => (
+                <div
+                  key={surface}
+                  className={
+                    surface === 'card'
+                      ? 'bg-card rounded-lg border p-4'
+                      : surface === 'background'
+                        ? 'bg-background rounded-lg border p-4'
+                        : 'bg-muted rounded-lg border p-4'
+                  }
+                >
+                  <Input
+                    label={`On ${surface}`}
+                    labelSurface={surface}
+                    defaultValue="Renewal desk"
+                  />
+                </div>
+              ))}
+            </div>
+          </Example>
+          <Example
+            title="Bare field inside a host"
+            code='<Input variant="bare">'
+          >
+            <div className="bg-sidebar w-64 rounded-lg border py-2">
+              <div className="bg-sidebar-accent mx-2 flex h-9 items-center gap-1 rounded-3xl pr-1 pl-3">
+                <Input
+                  variant="bare"
+                  aria-label="Conversation name"
+                  defaultValue="Q3 carrier renewals"
+                  className="flex-1"
+                />
+                <IconButton
+                  variant="ghost-muted"
+                  size="icon-xs"
+                  label="Save"
+                  icon={Check}
+                />
+                <IconButton
+                  variant="ghost-muted"
+                  size="icon-xs"
+                  label="Cancel"
+                  icon={X}
+                />
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Field on a muted panel"
+            code='<Input variant="filled"> · <Textarea variant="filled">'
+          >
+            <div className="bg-muted flex max-w-sm flex-col gap-2 rounded-lg p-4">
+              <Input
+                variant="filled"
+                aria-label="Base URL"
+                defaultValue="https://api.meridianfreight.example/v2"
+              />
+              <Textarea
+                variant="filled"
+                size="sm"
+                rows={3}
+                aria-label="Banned terms"
+                defaultValue={'competitor name\ninternal codename'}
+              />
+            </div>
+          </Example>
+          <Example
+            title="Select"
+            code='<SelectTrigger size="…" variant="…" shape="…">'
+          >
+            <div className="flex flex-wrap items-center gap-4">
+              <Select defaultValue="finance">
+                <SelectTrigger size="sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="finance">Small</SelectItem>
+                  <SelectItem value="legal">Legal</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select defaultValue="finance">
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="finance">Default</SelectItem>
+                  <SelectItem value="legal">Legal</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select defaultValue="finance">
+                <SelectTrigger size="field">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="finance">Large</SelectItem>
+                  <SelectItem value="legal">Legal</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select defaultValue="finance">
+                <SelectTrigger size="field" shape="pill">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="finance">Large pill</SelectItem>
+                  <SelectItem value="legal">Legal</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select defaultValue="finance">
+                <SelectTrigger variant="ghost">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="finance">Ghost</SelectItem>
+                  <SelectItem value="legal">Legal</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Placeholder" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="a">Option A</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </Example>
+          <Example
+            title="Textarea"
+            code='<Textarea size="sm | default | lg" resize="none | vertical | both" variant="default | filled">'
+          >
+            <div className="grid items-start gap-4 md:grid-cols-3">
+              <Textarea size="sm" placeholder="Short note…" />
+              <Textarea placeholder="Describe what this agent does…" />
+              <Textarea
+                size="lg"
+                resize="none"
+                placeholder="System prompt…"
+                defaultValue="You are a helpful assistant for Meridian Freight Group."
+              />
+            </div>
+          </Example>
+          <Example
+            title="FormField"
+            code="<FormField label required hint error disabled labelSurface float>{field}</FormField>"
+          >
+            <div className="grid items-start gap-6 md:grid-cols-3">
+              <FormField
+                label="Server name"
+                required
+                hint="Shown in the tool list"
+              >
+                <Input placeholder="My MCP server" />
+              </FormField>
+              <FormField label="Authentication type">
+                <Select defaultValue="none">
+                  <SelectTrigger size="field" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">No authentication</SelectItem>
+                    <SelectItem value="bearer">Bearer token</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormField>
+              <FormField
+                label="Server URL"
+                required
+                error="Server URL is required"
+              >
+                <Input placeholder="https://" />
+              </FormField>
+              <FormField label="Description" hint="Optional">
+                <Textarea rows={3} placeholder="What this server is for" />
+              </FormField>
+              <div className="bg-muted rounded-2xl p-4">
+                <FormField label="Policy" labelSurface="muted">
+                  <Textarea rows={3} />
+                </FormField>
+              </div>
+              <FormField label="Scopes" float={false}>
+                <div className="flex flex-col gap-2 text-sm">
+                  <span>Agents: read</span>
+                  <span>Sources: read and write</span>
+                </div>
+              </FormField>
+            </div>
+          </Example>
+          <Example
+            title="SettingRow"
+            code='<SettingRows><SettingRow label description htmlFor after alignStart as="label | h2 | h3">{control}</SettingRow></SettingRows>'
+          >
+            <SettingRows className="max-w-xl">
+              <SettingRow
+                label="Token limiting"
+                description="Limit daily total tokens that can be used by this agent"
+                htmlFor="ds-token-limiting"
+                after={
+                  <Input
+                    shape="pill"
+                    placeholder="Enter token limit"
+                    disabled={!tokenLimit}
+                  />
+                }
+              >
+                <Switch
+                  id="ds-token-limiting"
+                  checked={tokenLimit}
+                  onCheckedChange={setTokenLimit}
+                />
+              </SettingRow>
+              <SettingRow
+                label="Allow prompt override"
+                description="Let v1 API callers replace this agent's system prompt"
+                htmlFor="ds-prompt-override"
+              >
+                <Switch id="ds-prompt-override" />
+              </SettingRow>
+              <SettingRow
+                as="h3"
+                label="Guardrails"
+                description="A heading title keeps the outline; the control names itself"
+              >
+                <Switch aria-label="Enable guardrails" />
+              </SettingRow>
+              <SettingRow
+                alignStart
+                label="Redact personal data"
+                description="Mask names, email addresses, phone numbers and account ids in both the question and the answer before they are stored in the run log. Wrapped descriptions top-align the control."
+                htmlFor="ds-redact"
+              >
+                <Switch id="ds-redact" />
+              </SettingRow>
+            </SettingRows>
+          </Example>
+          <Example
+            title="Checkbox"
+            code='<Checkbox size="sm | default" checked onCheckedChange>'
+          >
+            <div className="flex flex-col gap-3">
+              {['agents:read', 'agents:write', 'agents:keys'].map((scope) => (
+                <div key={scope} className="flex items-center gap-3">
+                  <Checkbox
+                    id={`ds-${scope}`}
+                    checked={scopes.includes(scope)}
+                    onCheckedChange={(checked) =>
+                      setScopes((current) =>
+                        checked === true
+                          ? [...current, scope]
+                          : current.filter((s) => s !== scope),
+                      )
+                    }
+                  />
+                  <Label htmlFor={`ds-${scope}`} className="font-mono">
+                    {scope}
+                  </Label>
+                </div>
+              ))}
+              <div className="flex items-center gap-3">
+                <Checkbox id="ds-cb-sm" size="sm" defaultChecked />
+                <Label htmlFor="ds-cb-sm">Small (table cells)</Label>
+              </div>
+              <div className="flex items-center gap-3">
+                <Checkbox id="ds-cb-disabled" disabled defaultChecked />
+                <Label htmlFor="ds-cb-disabled">Disabled</Label>
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Switch and multi-select"
+            code="<Switch> · <MultiSelect>"
+          >
+            <div className="grid items-start gap-6 md:grid-cols-2">
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-3">
+                  <Switch
+                    id="sw-1"
+                    checked={switchOn}
+                    onCheckedChange={setSwitchOn}
+                  />
+                  <Label htmlFor="sw-1">
+                    Notify on failed runs{' '}
+                    <span className="text-muted-foreground">
+                      ({switchOn ? 'on' : 'off'})
+                    </span>
+                  </Label>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Switch id="sw-2" disabled />
+                  <Label htmlFor="sw-2">Disabled</Label>
+                </div>
+              </div>
+              <MultiSelect
+                options={MULTI_OPTIONS}
+                selected={formats}
+                onChange={setFormats}
+                placeholder="Allowed formats"
+              />
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="dropzone"
+          title="Dropzone"
+          intro="Click-or-drag file target used by imports and uploads. Colours follow the drag state; pass accept and limits and describe them in the second line."
+        >
+          <Example
+            title="Default and compact"
+            code='<Dropzone accept={…} description="…" size="compact">'
+          >
+            <div className="grid gap-6 md:grid-cols-2">
+              <Dropzone
+                onDrop={(files) => setDropped(files.map((f) => f.name))}
+                accept={{ 'application/x-yaml': ['.yaml', '.yml'] }}
+                title="Click to upload or drag and drop a .yaml file"
+                description="Agent definitions exported from DocsGPT"
+              />
+              <div className="flex flex-col gap-4">
+                <Dropzone
+                  size="compact"
+                  multiple
+                  onDrop={(files) => setDropped(files.map((f) => f.name))}
+                  title="Attach files"
+                  description="PDF, Word, Markdown, up to 25 MB each"
+                  icon={<FileText />}
+                />
+                <Dropzone
+                  size="compact"
+                  disabled
+                  onDrop={() => undefined}
+                  title="Uploads paused"
+                  description="Indexing in progress"
+                />
+                <Dropzone
+                  size="compact"
+                  onDrop={() => undefined}
+                  title="With an error"
+                  error="Only .yaml or .yml files are supported"
+                />
+                <p className="text-muted-foreground text-xs">
+                  Last drop:{' '}
+                  {dropped.length ? dropped.join(', ') : 'nothing yet'}
+                </p>
+              </div>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="feedback"
+          title="Feedback & loading"
+          intro="IconButton names every icon-only button and gives it a tooltip, so no button sets title; Spinner and Skeleton replace the hand-drawn loaders; Progress replaces width-percent divs."
+        >
+          <Example
+            title="Icon buttons with tooltips"
+            code='<IconButton label icon hint? side="bottom" (header) | "top" (default) variant size>'
+          >
+            <div className="flex flex-col gap-6">
+              <div className="border-border flex items-center justify-between border-b pb-3">
+                <span className="text-sm font-medium">Run details</span>
+                <div className="flex items-center gap-1">
+                  <IconButton
+                    variant="ghost-muted"
+                    side="bottom"
+                    label="Search runs"
+                    icon={Search}
+                  />
+                  <IconButton
+                    variant="ghost-muted"
+                    side="bottom"
+                    label="Settings"
+                    icon={Settings}
+                  />
+                  <IconButton
+                    variant="ghost-muted"
+                    side="bottom"
+                    label="Close"
+                    icon={X}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p className="text-foreground max-w-md text-sm">
+                  The renewal summary for Halvorsen Logistics lists three lanes
+                  above target cost.
+                </p>
+                <div className="flex items-center gap-1">
+                  <IconButton
+                    variant="ghost-muted"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Copy"
+                    icon={Copy}
+                  />
+                  <IconButton
+                    variant="ghost-muted"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Undo"
+                    hint="Undo (Ctrl+Z)"
+                    icon={Undo2}
+                  />
+                  <IconButton
+                    variant="ghost-muted"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Redo"
+                    hint="Redo (Ctrl+Shift+Z)"
+                    icon={Redo2}
+                  />
+                  <IconButton
+                    variant="ghost-destructive"
+                    size="icon-sm"
+                    shape="pill"
+                    label="Delete"
+                    icon={Trash2}
+                  />
+                </div>
+              </div>
+              <span className="text-muted-foreground text-xs">
+                Header and toolbar buttons open below; buttons under text, in
+                the composer and in rows open above. Toast close and collapse
+                stay a plain Button with aria-label.
+              </span>
+            </div>
+          </Example>
+          <Example
+            title="Tooltip on something else"
+            code="<Tooltip><TooltipTrigger asChild>…</TooltipTrigger><TooltipContent>"
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge variant="neutral">GraphRAG</Badge>
+                </TooltipTrigger>
+                <TooltipContent>
+                  Indexed as a knowledge graph; answers can follow relations
+                  between entities.
+                </TooltipContent>
+              </Tooltip>
+              <span className="text-muted-foreground text-xs">
+                hover or focus the controls
+              </span>
+            </div>
+          </Example>
+          <Example
+            title="Spinner and skeleton"
+            code='<Spinner size="xs | sm | default | lg"> · <Skeleton className="h-4 w-40"> · <Skeleton surface="muted"> in a filled Card'
+          >
+            <div className="grid items-start gap-8 md:grid-cols-2">
+              <div className="flex items-center gap-6">
+                <Spinner size="xs" />
+                <Spinner size="sm" />
+                <Spinner />
+                <Spinner size="lg" />
+                <span className="text-primary flex items-center gap-2 text-sm">
+                  <Spinner size="sm" /> inherits text colour
+                </span>
+              </div>
+              <div className="flex items-center gap-4">
+                <Skeleton className="size-10 rounded-full" />
+                <div className="flex flex-1 flex-col gap-2">
+                  <Skeleton className="h-4 w-3/5" />
+                  <Skeleton className="h-3 w-4/5" />
+                  <Skeleton className="h-3 w-2/5" />
+                </div>
+              </div>
+              <Card variant="filled" padding="lg" className="md:col-span-2">
+                <Skeleton surface="muted" className="size-10 rounded-full" />
+                <Skeleton surface="muted" className="h-4 w-2/5" />
+                <Skeleton surface="muted" className="h-3 w-3/5" />
+              </Card>
+            </div>
+          </Example>
+          <Example
+            title="Progress"
+            code='<Progress value={62} variant="success" size="sm">'
+          >
+            <div className="grid gap-5 md:grid-cols-2">
+              <div className="flex flex-col gap-2">
+                <div className="text-muted-foreground flex justify-between text-xs">
+                  <span>Indexing 1,204 chunks</span>
+                  <span>62%</span>
+                </div>
+                <Progress value={62} />
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="text-muted-foreground flex justify-between text-xs">
+                  <span>Monthly quota</span>
+                  <span>91%</span>
+                </div>
+                <Progress value={91} variant="warning" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="text-muted-foreground flex justify-between text-xs">
+                  <span>Run success</span>
+                  <span>100%</span>
+                </div>
+                <Progress value={100} variant="success" size="sm" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="text-muted-foreground flex justify-between text-xs">
+                  <span>Guardrail blocks</span>
+                  <span>18%</span>
+                </div>
+                <Progress value={18} variant="destructive" size="lg" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="text-muted-foreground flex justify-between text-xs">
+                  <span>Re-embedding</span>
+                  <span>40%</span>
+                </div>
+                <Progress value={40} variant="info" />
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Message scroller"
+            code="<MessageScrollerProvider autoScroll><MessageScroller><MessageScrollerViewport><MessageScrollerContent><MessageScrollerItem messageId scrollAnchor?> · <MessageScrollerButton />"
+          >
+            <div className="border-border h-64 max-w-md overflow-hidden rounded-lg border">
+              <MessageScrollerProvider autoScroll>
+                <MessageScroller>
+                  <MessageScrollerViewport className="px-4 pt-4">
+                    <MessageScrollerContent className="gap-3 pb-4">
+                      {[
+                        'Which carriers renew this quarter?',
+                        'Halvorsen Logistics, Nordhavn Freight and Baltic Line renew before 30 November.',
+                        'Which of them are above target cost?',
+                        'Two lanes on Halvorsen and one on Baltic Line are 6-9% above target.',
+                        'Draft the renewal summary.',
+                        'The summary is ready: three lanes to renegotiate, two to keep as they are.',
+                      ].map((text, index) => (
+                        <MessageScrollerItem
+                          key={text}
+                          messageId={`ds-m-${index}`}
+                          scrollAnchor={index % 2 === 0}
+                        >
+                          <p
+                            className={
+                              index % 2 === 0
+                                ? 'bg-answer-bubble ml-auto w-fit max-w-[80%] rounded-2xl px-3 py-2 text-sm'
+                                : 'text-foreground text-sm'
+                            }
+                          >
+                            {text}
+                          </p>
+                        </MessageScrollerItem>
+                      ))}
+                    </MessageScrollerContent>
+                  </MessageScrollerViewport>
+                  <MessageScrollerButton />
+                </MessageScroller>
+              </MessageScrollerProvider>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="avatars"
+          title="Avatars"
+          intro="Image avatars keep their own size. Initials boxes take size, shape and a tone."
+        >
+          <Example
+            title="Sizes, shapes, tones"
+            code='<Avatar size="xs | sm | default | lg" shape="circle" variant="primary">LK</Avatar>'
+          >
+            <div className="flex flex-wrap items-end gap-8">
+              <div className="flex items-end gap-3">
+                {AVATAR_SIZES.map((size) => (
+                  <Avatar
+                    key={size}
+                    size={size}
+                    shape="circle"
+                    variant="primary"
+                  >
+                    LK
+                  </Avatar>
+                ))}
+              </div>
+              <div className="flex items-end gap-3">
+                {AVATAR_SIZES.map((size) => (
+                  <Avatar key={size} size={size} shape="square" variant="muted">
+                    MF
+                  </Avatar>
+                ))}
+              </div>
+              <div className="flex items-end gap-3">
+                <Avatar size="lg" shape="circle" imgClassName="size-full" />
+                <Avatar
+                  size="default"
+                  shape="square"
+                  imgClassName="size-full"
+                />
+                <span className="text-muted-foreground self-center text-xs">
+                  image, robot fallback
+                </span>
+              </div>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="navigation"
+          title="Navigation"
+          intro="Tabs, accordions and breadcrumbs as shipped."
+        >
+          <Example title="Tabs" code="<Tabs>">
+            <Tabs defaultValue="sources">
+              <TabsList>
+                <TabsTrigger value="sources">Sources</TabsTrigger>
+                <TabsTrigger value="tools">Tools</TabsTrigger>
+                <TabsTrigger value="guardrails">Guardrails</TabsTrigger>
+              </TabsList>
+              <TabsContent value="sources">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Connected sources and their indexing status.
+                </p>
+              </TabsContent>
+              <TabsContent value="tools">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Tools the agent may call.
+                </p>
+              </TabsContent>
+              <TabsContent value="guardrails">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Controls applied before and after each turn.
+                </p>
+              </TabsContent>
+            </Tabs>
+          </Example>
+          <Example
+            title="Underline tabs"
+            code='<TabsList variant="underline"> · <TabsTrigger variant="underline">'
+          >
+            <Tabs defaultValue="my_files">
+              <TabsList variant="underline">
+                <TabsTrigger variant="underline" value="my_files">
+                  My Files
+                </TabsTrigger>
+                <TabsTrigger variant="underline" value="shared">
+                  Shared with Me
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="my_files">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Files in your own drive.
+                </p>
+              </TabsContent>
+              <TabsContent value="shared">
+                <p className="text-muted-foreground pt-4 text-sm">
+                  Files other people shared with you.
+                </p>
+              </TabsContent>
+            </Tabs>
+          </Example>
+          <Example
+            title="Accordion and breadcrumb"
+            code="<Accordion> · <Breadcrumb> · <BreadcrumbEllipsis />"
+          >
+            <div className="grid gap-8 md:grid-cols-2">
+              <Accordion type="single" collapsible defaultValue="a">
+                <AccordionItem value="a">
+                  <AccordionTrigger>
+                    What does re-embedding do?
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    Recomputes vectors for every chunk with the current model.
+                  </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="b">
+                  <AccordionTrigger>Can I pause a schedule?</AccordionTrigger>
+                  <AccordionContent>
+                    Yes, paused schedules keep their history.
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#navigation">Agents</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#navigation">
+                      Renewal desk
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Schedules</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#navigation">Agents</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage
+                      title="Quarterly renewal desk for key logistics accounts"
+                      className="max-w-[16ch]"
+                    >
+                      Quarterly renewal desk for key logistics accounts
+                    </BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#navigation">Sources</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbEllipsis />
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Carrier contracts</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="tables"
+          title="Tables"
+          intro="Cells accept alignment and typography classes plus text-muted-foreground; everything else is layout."
+        >
+          <Example
+            title="Table with status badges"
+            code='<TableCell align="right" className="tabular-nums">'
+          >
+            <TableContainer>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableHeader>Agent</TableHeader>
+                    <TableHeader>Status</TableHeader>
+                    <TableHeader align="right">Runs</TableHeader>
+                    <TableHeader align="right">Actions</TableHeader>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {TABLE_ROWS.map((row) => (
+                    <TableRow key={row.name}>
+                      <TableCell className="font-medium">{row.name}</TableCell>
+                      <TableCell>
+                        <Badge variant={row.status}>{row.status}</Badge>
+                      </TableCell>
+                      <TableCell align="right" className="tabular-nums">
+                        {row.runs}
+                      </TableCell>
+                      <TableCell align="right">
+                        <IconButton
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          label="Copy"
+                          icon={Copy}
+                        />
+                        <IconButton
+                          size="icon-sm"
+                          variant="ghost-muted"
+                          label="Edit"
+                          icon={Pencil}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Example>
+        </Section>
+
+        <Section
+          id="overlays"
+          title="Overlays"
+          intro="Modal is the only dialog API for app code; the Radix Dialog underneath is private to ui/. Sheet is for side panels and phone bottom sheets. Popovers and menus share the popover surface."
+        >
+          <Example
+            title="Modal and sheet"
+            code='<Modal size="md" title description footer={<ModalActions …/>}> · <SheetContent side="right | left | top"> · <SheetContent side="bottom" handle>'
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              <Button variant="outline" onClick={() => setModalOpen(true)}>
+                Open modal
+              </Button>
+              <Modal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                title="Move to folder"
+                description="Pick where this agent should live."
+                footer={
+                  <ModalActions
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalOpen(false)}
+                    submitLabel="Move"
+                    onSubmit={() => setModalOpen(false)}
+                  />
+                }
+              >
+                <div className="flex flex-col gap-4">
+                  <Input label="Folder name" defaultValue="Finance" />
+                  <Select defaultValue="team">
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="team">Shared with team</SelectItem>
+                      <SelectItem value="me">Only me</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </Modal>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Open sheet</Button>
+                </SheetTrigger>
+                <SheetContent side="right">
+                  <SheetHeader>
+                    <SheetTitle>Run details</SheetTitle>
+                    <SheetDescription>
+                      Started 09:30, finished 09:31, 3 tools called.
+                    </SheetDescription>
+                  </SheetHeader>
+                </SheetContent>
+              </Sheet>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Left sheet</Button>
+                </SheetTrigger>
+                <SheetContent side="left">
+                  <SheetHeader>
+                    <SheetTitle>Folders</SheetTitle>
+                    <SheetDescription>
+                      side=&quot;left&quot;: a navigation drawer.
+                    </SheetDescription>
+                  </SheetHeader>
+                </SheetContent>
+              </Sheet>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Top sheet</Button>
+                </SheetTrigger>
+                <SheetContent side="top">
+                  <SheetHeader>
+                    <SheetTitle>Announcement</SheetTitle>
+                    <SheetDescription>
+                      side=&quot;top&quot;: full width, as tall as its content.
+                    </SheetDescription>
+                  </SheetHeader>
+                </SheetContent>
+              </Sheet>
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button variant="outline">Open bottom sheet</Button>
+                </SheetTrigger>
+                <SheetContent side="bottom" handle showCloseButton={false}>
+                  <SheetHeader>
+                    <SheetTitle>Tools</SheetTitle>
+                    <SheetDescription>
+                      The phone picker shape: card fill, rounded top, grab
+                      handle, clear of the home indicator.
+                    </SheetDescription>
+                  </SheetHeader>
+                </SheetContent>
+              </Sheet>
+            </div>
+          </Example>
+          <Example
+            title="Modal sizes and footers"
+            code='size="sm | lg | xl | full" · mobileVariant="sheet" · hideTitle · <ModalActions destructive | pending | footerStart> · no submitLabel = Cancel only'
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              {(
+                [
+                  ['sm', 'sm, destructive'],
+                  ['lg', 'lg, footerStart'],
+                  ['xl', 'xl, cancel only'],
+                  ['full', 'full, pending'],
+                  ['sheet', 'Sheet on phones'],
+                  ['hidden', 'hideTitle'],
+                ] as const
+              ).map(([id, label]) => (
+                <Button
+                  key={id}
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setModalDemo(id)}
+                >
+                  {label}
+                </Button>
+              ))}
+              <Modal
+                size="sm"
+                open={modalDemo === 'sm'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Delete source?"
+                description="Carrier contracts and its 1,204 chunks will be removed. Agents using it lose the source."
+                footer={
+                  <ModalActions
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalDemo(null)}
+                    submitLabel="Delete"
+                    destructive
+                    onSubmit={() => setModalDemo(null)}
+                  />
+                }
+              >
+                <p className="text-muted-foreground text-sm">
+                  This can&apos;t be undone.
+                </p>
+              </Modal>
+              <Modal
+                size="lg"
+                open={modalDemo === 'lg'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Edit MCP server"
+                footer={
+                  <ModalActions
+                    footerStart={
+                      <Button variant="outline" size="lg" shape="pill">
+                        Test connection
+                      </Button>
+                    }
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalDemo(null)}
+                    submitLabel="Save"
+                    onSubmit={() => setModalDemo(null)}
+                  />
+                }
+              >
+                <div className="flex flex-col gap-4">
+                  <Input label="Server name" defaultValue="Carrier rates" />
+                  <Input
+                    label="Server URL"
+                    defaultValue="https://mcp.meridianfreight.example"
+                  />
+                </div>
+              </Modal>
+              <Modal
+                size="xl"
+                open={modalDemo === 'xl'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Run details"
+                description="Read only: the footer is Cancel alone."
+                footer={
+                  <ModalActions
+                    cancelLabel="Close"
+                    onCancel={() => setModalDemo(null)}
+                  />
+                }
+              >
+                <p className="text-muted-foreground text-sm">
+                  Started 09:30, finished 09:31, 3 tools called.
+                </p>
+              </Modal>
+              <Modal
+                size="full"
+                open={modalDemo === 'full'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Import agents"
+                footer={
+                  <ModalActions
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalDemo(null)}
+                    submitLabel="Import"
+                    pending
+                  />
+                }
+              >
+                <p className="text-muted-foreground text-sm">
+                  pending spins and disables the submit; the label stays.
+                </p>
+              </Modal>
+              <Modal
+                mobileVariant="sheet"
+                open={modalDemo === 'sheet'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Share to team"
+                description="A centred modal from sm up; a bottom sheet with a grab handle on phones."
+                footer={
+                  <ModalActions
+                    cancelLabel="Cancel"
+                    onCancel={() => setModalDemo(null)}
+                    submitLabel="Share"
+                    onSubmit={() => setModalDemo(null)}
+                  />
+                }
+              >
+                <Input label="Add people" />
+              </Modal>
+              <Modal
+                hideTitle
+                open={modalDemo === 'hidden'}
+                onOpenChange={(open) => !open && setModalDemo(null)}
+                title="Image preview"
+              >
+                <div className="bg-muted flex h-48 items-center justify-center rounded-lg">
+                  <FileText className="text-muted-foreground size-8" />
+                </div>
+                <p className="text-muted-foreground mt-3 text-xs">
+                  The title is still announced to screen readers.
+                </p>
+              </Modal>
+            </div>
+          </Example>
+          <Example
+            title="Popover and dropdown menu"
+            code="<Popover> · <DropdownMenu> with Shortcut, Sub, RadioGroup, CheckboxItem"
+          >
+            <div className="flex flex-wrap items-center gap-3">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">Open popover</Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col gap-2">
+                    <p className="text-sm font-medium">Retrieval settings</p>
+                    <p className="text-muted-foreground text-sm">
+                      Chunks per query and the reranker threshold.
+                    </p>
+                    <Input size="sm" defaultValue="8" label="Chunks" />
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">
+                    Actions
+                    <MoreHorizontal />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuLabel>Conversation</DropdownMenuLabel>
+                  <DropdownMenuItem>
+                    <Pencil />
+                    Rename
+                    <DropdownMenuShortcut>F2</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Copy />
+                    Duplicate
+                    <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
+                  </DropdownMenuItem>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <Book />
+                      Move to
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>Finance</DropdownMenuItem>
+                      <DropdownMenuItem>Legal</DropdownMenuItem>
+                      <DropdownMenuItem>Operations</DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+                  <DropdownMenuRadioGroup
+                    value={sortBy}
+                    onValueChange={setSortBy}
+                  >
+                    <DropdownMenuRadioItem value="recent">
+                      Most recent
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="name">
+                      Name
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuCheckboxItem
+                    checked={showArchived}
+                    onCheckedChange={(v) => setShowArchived(Boolean(v))}
+                  >
+                    Show archived
+                  </DropdownMenuCheckboxItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <Trash2 />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </Example>
+          <Example
+            title="Command palette"
+            code='<Command variant="palette">, the spacing CommandDialog uses · <CommandDialog open onOpenChange title description>'
+          >
+            <div className="flex flex-col items-start gap-4">
+              <Button variant="outline" onClick={() => setPaletteOpen(true)}>
+                <Search />
+                Open CommandDialog
+              </Button>
+              <CommandDialog
+                open={paletteOpen}
+                onOpenChange={setPaletteOpen}
+                title="Search conversations"
+                description="Search your conversations by title"
+              >
+                <CommandInput placeholder="Search conversations…" />
+                <CommandList>
+                  <CommandEmpty>No results.</CommandEmpty>
+                  <CommandGroup heading="Recent">
+                    <CommandItem onSelect={() => setPaletteOpen(false)}>
+                      <MessageSquare />
+                      Q3 carrier renewals
+                    </CommandItem>
+                    <CommandItem onSelect={() => setPaletteOpen(false)}>
+                      <MessageSquare />
+                      Halvorsen lane costs
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </CommandDialog>
+              <div className="border-border w-full max-w-md overflow-hidden rounded-lg border">
+                <Command variant="palette">
+                  <CommandInput placeholder="Search agents, sources, settings…" />
+                  <CommandList>
+                    <CommandEmpty>No results.</CommandEmpty>
+                    <CommandGroup heading="Agents">
+                      <CommandItem>
+                        <Settings />
+                        Contracts & Policy Assistant
+                        <CommandShortcut>⌘1</CommandShortcut>
+                      </CommandItem>
+                      <CommandItem>
+                        <Settings />
+                        Customer Renewal Desk
+                        <CommandShortcut>⌘2</CommandShortcut>
+                      </CommandItem>
+                    </CommandGroup>
+                    <CommandGroup heading="Actions">
+                      <CommandItem>
+                        <Plus />
+                        New conversation
+                      </CommandItem>
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </div>
+            </div>
+          </Example>
+          <Example
+            title="Chosen item in a picker"
+            code="<CommandItem checked={item.id === selectedId}>"
+          >
+            <div className="border-border max-w-xs overflow-hidden rounded-lg border">
+              <Command>
+                <CommandList>
+                  <CommandItem value="default">default</CommandItem>
+                  <CommandItem value="creative" checked>
+                    creative
+                  </CommandItem>
+                  <CommandItem value="strict">strict</CommandItem>
+                </CommandList>
+              </Command>
+            </div>
+          </Example>
+        </Section>
+
+        <Section
+          id="pickers"
+          title="Pickers"
+          intro="Calendar wraps react-day-picker with the Button ghost variant; TimePicker is two Selects."
+        >
+          <Example
+            title="Calendar and time"
+            code='<Calendar mode="single"> · <TimePicker>'
+          >
+            <div className="flex flex-wrap items-start gap-8">
+              <div className="border-border rounded-lg border">
+                <Calendar mode="single" selected={date} onSelect={setDate} />
+              </div>
+              <div className="flex flex-col gap-3">
+                <Label>Run at</Label>
+                <TimePicker value={time} onChange={setTime} minuteStep={5} />
+                <p className="text-muted-foreground flex items-center gap-1 text-xs">
+                  <Clock className="size-3" />
+                  {date ? date.toLocaleDateString('en-GB') : 'No date'} at{' '}
+                  {time}
+                </p>
+              </div>
+            </div>
+          </Example>
+        </Section>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index dac0771f..eab5fabe 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -33,22 +33,22 @@ export function useOutsideAlerter<T extends HTMLElement>(
   }, [ref, handler, handleEscapeKey, ...additionalDeps]);
 }
 
+/**
+ * The app's one phone / desktop switch, matching Tailwind's ``lg`` (1024px):
+ * below it the shell is the phone layout, so JS and classes always agree.
+ */
 export function useMediaQuery() {
-  const mobileQuery = '(max-width: 768px)';
-  const tabletQuery = '(max-width: 1023px)';
+  const mobileQuery = '(max-width: 1023.98px)';
   const desktopQuery = '(min-width: 1024px)';
   const [isMobile, setIsMobile] = useState(false);
-  const [isTablet, setIsTablet] = useState(false);
   const [isDesktop, setIsDesktop] = useState(false);
 
   useEffect(() => {
     const mobileMedia = window.matchMedia(mobileQuery);
-    const tabletMedia = window.matchMedia(tabletQuery);
     const desktopMedia = window.matchMedia(desktopQuery);
 
     const updateMediaQueries = () => {
       setIsMobile(mobileMedia.matches);
-      setIsTablet(tabletMedia.matches && !mobileMedia.matches); // Tablet but not mobile
       setIsDesktop(desktopMedia.matches);
     };
 
@@ -60,9 +60,9 @@ export function useMediaQuery() {
     return () => {
       window.removeEventListener('resize', listener);
     };
-  }, [mobileQuery, tabletQuery, desktopQuery]);
+  }, [mobileQuery, desktopQuery]);
 
-  return { isMobile, isTablet, isDesktop };
+  return { isMobile, isDesktop };
 }
 
 /**
@@ -95,6 +95,11 @@ export function usePacedText(text: string, enabled: boolean): string {
   return enabled ? text.slice(0, Math.min(visibleLength, text.length)) : text;
 }
 
+// Each useDarkTheme() caller holds its own state; a toggle broadcasts the new
+// value so every other caller (logo, Mermaid, code blocks) follows without a
+// reload.
+const THEME_CHANGE_EVENT = 'docsgpt:themechange';
+
 export function useDarkTheme() {
   const getSystemThemePreference = () => {
     return (
@@ -126,13 +131,26 @@ export function useDarkTheme() {
     return () => mediaQuery.removeListener(handleChange);
   }, []);
 
+  useEffect(() => {
+    const handleThemeChange = (event: Event) => {
+      setIsDarkTheme((event as CustomEvent<boolean>).detail);
+    };
+    window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () =>
+      window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+  }, []);
+
   useEffect(() => {
     localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
     const action = isDarkTheme ? 'add' : 'remove';
     document.body?.classList[action]('dark');
     document.documentElement.classList[action]('dark');
 
-    const color = isDarkTheme ? '#161616' : '#fbfbfb';
+    // The browser toolbar matches the sidebar; read the token now that the
+    // `.dark` class above has flipped it.
+    const color =
+      getComputedStyle(document.body).getPropertyValue('--sidebar').trim() ||
+      (isDarkTheme ? '#161616' : '#fbfbfb');
     document.head
       .querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')
       .forEach((m) => {
@@ -144,7 +162,11 @@ export function useDarkTheme() {
   }, [isDarkTheme]);
 
   const toggleTheme = () => {
-    setIsDarkTheme(!isDarkTheme);
+    const next = !isDarkTheme;
+    setIsDarkTheme(next);
+    window.dispatchEvent(
+      new CustomEvent<boolean>(THEME_CHANGE_EVENT, { detail: next }),
+    );
   };
 
   return [isDarkTheme, toggleTheme, componentMounted] as const;
diff --git a/frontend/src/hooks/useDarkTheme.test.tsx b/frontend/src/hooks/useDarkTheme.test.tsx
new file mode 100644
index 00000000..0866b625
--- /dev/null
+++ b/frontend/src/hooks/useDarkTheme.test.tsx
@@ -0,0 +1,63 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useDarkTheme } from './index';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('useDarkTheme', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    localStorage.setItem('selectedTheme', 'Light');
+    vi.stubGlobal('matchMedia', (query: string) => ({
+      matches: false,
+      media: query,
+      addListener: () => {},
+      removeListener: () => {},
+    }));
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    localStorage.clear();
+    vi.unstubAllGlobals();
+  });
+
+  it('updates every consumer when one of them toggles the theme', async () => {
+    let toggle: (() => void) | undefined;
+    let logoIsDark: boolean | undefined;
+
+    function Settings() {
+      const [, toggleTheme] = useDarkTheme();
+      toggle = toggleTheme;
+      return null;
+    }
+    function Logo() {
+      [logoIsDark] = useDarkTheme();
+      return null;
+    }
+
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(
+        <>
+          <Settings />
+          <Logo />
+        </>,
+      );
+    });
+    expect(logoIsDark).toBe(false);
+
+    await act(async () => toggle?.());
+    expect(logoIsDark).toBe(true);
+
+    await act(async () => toggle?.());
+    expect(logoIsDark).toBe(false);
+
+    await act(async () => root.unmount());
+  });
+});
diff --git a/frontend/src/hooks/useMediaQuery.test.tsx b/frontend/src/hooks/useMediaQuery.test.tsx
new file mode 100644
index 00000000..93493e34
--- /dev/null
+++ b/frontend/src/hooks/useMediaQuery.test.tsx
@@ -0,0 +1,56 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useMediaQuery } from './index';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+// Evaluates min-/max-width queries against a fixed window width.
+const mockWidth = (width: number) => {
+  vi.stubGlobal('matchMedia', (query: string) => {
+    const max = /max-width:\s*([\d.]+)px/.exec(query);
+    const min = /min-width:\s*([\d.]+)px/.exec(query);
+    const matches =
+      (!max || width <= Number(max[1])) && (!min || width >= Number(min[1]));
+    return {
+      matches,
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    };
+  });
+};
+
+const read = async (width: number) => {
+  mockWidth(width);
+  let result: ReturnType<typeof useMediaQuery> | undefined;
+  function Probe() {
+    result = useMediaQuery();
+    return null;
+  }
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  await act(async () => root.render(<Probe />));
+  await act(async () => root.unmount());
+  return result!;
+};
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe('useMediaQuery', () => {
+  it('treats everything below lg (1024px) as mobile', async () => {
+    expect(await read(900)).toMatchObject({ isMobile: true, isDesktop: false });
+    expect(await read(1023)).toMatchObject({
+      isMobile: true,
+      isDesktop: false,
+    });
+  });
+
+  it('is desktop from 1024px', async () => {
+    expect(await read(1024)).toMatchObject({
+      isMobile: false,
+      isDesktop: true,
+    });
+  });
+});
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a9e6438d..9c2d052f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,24 +10,22 @@
     monospace;
   --shadow-modal: 0px 4px 40px -3px #0000001a;
   --shadow-toast: 0px 24px 48px 0px #00000029;
+  --font-sans: 'Inter', sans-serif;
+  /* tw-animate's slide-in-from-* takes integers of the spacing scale only;
+     this lets the answer bubble rise 6px as slide-in-from-bottom-1.5. */
+  --translate-1\.5: 0.375rem;
 }
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+/* Bottom padding that clears the iPhone home indicator (about 34px, since
+   index.html sets viewport-fit=cover). pb-safe keeps at least 1rem elsewhere,
+   for a sheet with a footer; pb-safe-0 is the bare inset, for a sheet whose
+   content brings its own padding. */
+@utility pb-safe {
+  padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+@utility pb-safe-0 {
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 @utility no-scrollbar {
@@ -39,44 +37,6 @@
   scrollbar-width: none; /* Firefox */
 }
 
-@utility scrollbar-thin {
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  /* Light theme scrollbar */
-  &::-webkit-scrollbar-thumb {
-    background: #e2e8f0;
-    border-radius: 9999px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #8c9198;
-  }
-
-  /* Dark theme scrollbar */
-  .dark &::-webkit-scrollbar-thumb {
-    background: #949494;
-    border-radius: 9999px;
-  }
-
-  .dark &::-webkit-scrollbar-thumb:hover {
-    background: #f0f0f0;
-  }
-
-  scrollbar-width: thin;
-  scrollbar-color: #e2e8f0 transparent;
-
-  .dark & {
-    scrollbar-color: #949494 transparent;
-  }
-}
-
 @utility scrollbar-overlay {
   &::-webkit-scrollbar {
     width: 6px;
@@ -93,24 +53,11 @@
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background: #e2e8f0;
+    background: var(--scrollbar-thumb);
   }
 
   &:hover::-webkit-scrollbar-thumb:hover {
-    background: #8c9198;
-  }
-
-  .dark &::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 9999px;
-  }
-
-  .dark &:hover::-webkit-scrollbar-thumb {
-    background: #949494;
-  }
-
-  .dark &:hover::-webkit-scrollbar-thumb:hover {
-    background: #f0f0f0;
+    background: var(--scrollbar-thumb-hover);
   }
 
   /* Standard scrollbar properties (Chrome 121+, Firefox) */
@@ -118,68 +65,77 @@
   scrollbar-color: transparent transparent;
 
   &:hover {
-    scrollbar-color: #e2e8f0 transparent;
-  }
-
-  .dark & {
-    scrollbar-color: transparent transparent;
-  }
-
-  .dark &:hover {
-    scrollbar-color: #949494 transparent;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
   }
 }
 
-@utility table-default {
-  @apply border-border text-foreground block w-full table-auto justify-center overflow-auto rounded-xl border text-center;
-
-  & th {
-    @apply p-4 font-normal text-nowrap text-gray-400;
+/* Ring spinner used by ui/spinner. Colour comes from currentColor. */
+@utility spinner-ring {
+  --spinner-thickness: 4px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(farthest-side, currentColor 94%, transparent) top /
+      var(--spinner-thickness) var(--spinner-thickness) no-repeat,
+    conic-gradient(transparent 30%, currentColor);
+  -webkit-mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - var(--spinner-thickness)),
+    #000 0
+  );
+  mask: radial-gradient(
+    farthest-side,
+    transparent calc(100% - var(--spinner-thickness)),
+    #000 0
+  );
+  animation: spinner-rotate 1s infinite linear;
+  &[data-size='xs'] {
+    --spinner-thickness: 2px;
   }
-
-  & th {
-    flex: 1;
+  &[data-size='sm'] {
+    --spinner-thickness: 3px;
   }
-
-  & th:last-child {
-    flex: 0;
-  }
-
-  & td {
-    @apply border-border w-full border-t px-4 py-2;
-  }
-
-  & td:last-child {
-    @apply border-r-0;
-  }
-
-  & th {
-    min-width: 150px;
-    max-width: 320px;
-    overflow: auto;
-  }
-
-  & td {
-    min-width: 150px;
-    max-width: 320px;
-    overflow: auto;
-  }
-
-  @supports (-moz-appearance: none) {
-    & th,
-    & td {
-      scrollbar-width: thin;
-      scrollbar-color: #e2e8f0 transparent;
-    }
-
-    .dark & th,
-    .dark & td {
-      scrollbar-color: #949494 transparent;
-    }
+  &[data-size='lg'] {
+    --spinner-thickness: 5px;
   }
 }
 
-@layer utilities {
+/* The promo banner in components/Notification.tsx. Its purples are a one-off
+   decorative gradient rather than UI chrome, so they stay literal here
+   instead of becoming theme tokens. */
+@utility notification-banner {
+  background:
+    linear-gradient(90deg, #390086 0%, #6222b7 100%),
+    linear-gradient(
+      90deg,
+      rgba(57, 0, 134, 0) 0%,
+      #6222b7 53.02%,
+      rgba(57, 0, 134, 0) 100%
+    );
+}
+
+/* One twinkling star on the promo banner. Every value is randomised per star
+   at render, so the component passes them in as custom properties. */
+@utility notification-star {
+  width: var(--star-size);
+  height: var(--star-size);
+  left: var(--star-left);
+  top: var(--star-top);
+  opacity: var(--star-opacity);
+  filter: drop-shadow(0 0 var(--star-glow) rgba(255, 255, 255, 0.5));
+  animation: twinkle var(--star-duration) ease-in-out infinite;
+  animation-delay: var(--star-delay);
+
+  /* Nested rather than grouped with the other resets in @layer base: the
+     utility is emitted after that layer, so an outside reset of equal
+     specificity would lose and the stars would twinkle anyway. They rest at
+     the opacity the component randomised for them. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+@layer base {
   :root {
     --viewport-height: 100vh;
     font-synthesis: none !important;
@@ -191,89 +147,22 @@
     }
   }
 
+  /* Tailwind's preflight does the reset; these are the app's own additions.
+     1.15 is the line-height the app was built against (preflight says 1.5):
+     every text-* utility and ui/ control sets its own, so only unsized text
+     reads this. */
   html {
-    background-color: var(--background);
-  }
-  body.dark {
-    background-color: var(--background);
-  }
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: #e2e8f0;
-    border-radius: 9999px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: #8c9198;
-  }
-  .dark ::-webkit-scrollbar-thumb {
-    background: #949494;
-  }
-  .dark ::-webkit-scrollbar-thumb:hover {
-    background: #f0f0f0;
-  }
-
-  /* Firefox: base scrollbar styles (Firefox ignores ::-webkit-scrollbar) */
-  @supports (-moz-appearance: none) {
-    * {
-      scrollbar-width: thin;
-      scrollbar-color: #e2e8f0 transparent;
-    }
-    .dark * {
-      scrollbar-color: #949494 transparent;
-    }
-  }
-}
-
-@layer base {
-  .prompt-variable-highlight {
-    background-color: rgba(106, 77, 244, 0.18);
-    border-radius: 0.375rem;
-    padding: 0 0.25rem;
-  }
-
-  .dark .prompt-variable-highlight {
-    background-color: rgba(106, 77, 244, 0.32);
-  }
-
-  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-  /* Document
-   ========================================================================== */
-
-  /**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-  html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+    line-height: 1.15;
     min-height: 100vh;
     overflow-x: hidden;
   }
 
-  /* Sections
-   ========================================================================== */
-
-  /**
- * Remove the margin in all browsers.
- */
-
   body {
-    margin: 0;
     min-height: var(--viewport-height);
     overflow-x: hidden;
-    font-family: 'Inter', sans-serif;
   }
-  /*
-Avoid over-scrolling in mobile browsers
-*/
+
+  /* Avoid over-scrolling in mobile browsers */
   @media only screen and (max-width: 500px) {
     body,
     html {
@@ -282,351 +171,46 @@ Avoid over-scrolling in mobile browsers
       width: 100%;
     }
   }
-  /**
- * Render the `main` element consistently in IE.
- */
-
-  main {
-    display: block;
-  }
-
-  /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  /* Grouping content
-   ========================================================================== */
-
-  /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /* Text-level semantics
-   ========================================================================== */
-
-  /**
- * Remove the gray background on active links in IE 10.
- */
-
-  a {
-    background-color: transparent;
-  }
-
-  /**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
- * Add the correct font size in all browsers.
- */
-
-  small {
-    font-size: 80%;
-  }
-
-  /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-   ========================================================================== */
-
-  /**
- * Remove the border on images inside links in IE 10.
- */
-
-  img {
-    border-style: none;
-  }
-
-  /* Forms
-   ========================================================================== */
-
-  /**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-
-  /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-  button,
-  input {
-    /* 1 */
-    overflow: visible;
-  }
-
-  /**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
-
-  /**
- * Correct the inability to style clickable types in iOS and Safari.
- */
 
+  /* Preflight leaves buttons on the arrow cursor. */
   button,
   [type='button'],
   [type='reset'],
   [type='submit'] {
-    -webkit-appearance: button;
     cursor: pointer;
   }
 
-  /**
- * Remove the inner border and padding in Firefox.
- */
-
-  button::-moz-focus-inner,
-  [type='button']::-moz-focus-inner,
-  [type='reset']::-moz-focus-inner,
-  [type='submit']::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 9999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
   }
 
-  /**
- * Restore the focus styles unset by the previous rule.
- */
-
-  button:-moz-focusring,
-  [type='button']:-moz-focusring,
-  [type='reset']:-moz-focusring,
-  [type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
- * Correct the padding in Firefox.
- */
-
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-  [type='checkbox'],
-  [type='radio'] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-  [type='number']::-webkit-inner-spin-button,
-  [type='number']::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-  [type='search'] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-  [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /* Interactive
-   ========================================================================== */
-
-  /*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-  details {
-    display: block;
-  }
-
-  /*
- * Add the correct display in all browsers.
- */
-
-  summary {
-    display: list-item;
-  }
-
-  /* Misc
-   ========================================================================== */
-
-  /**
- * Add the correct display in IE 10+.
- */
-
-  template {
-    display: none;
-  }
-
-  /**
- * Add the correct display in IE 10.
- */
-
-  [hidden] {
-    display: none;
-  }
-
-  [contentEditable]:empty:before {
-    content: attr(placeholder);
-    color: #9ca3af;
-    opacity: 1;
-  }
-
-  /* third container laylout for Firefox */
-  @-moz-document url-prefix() {
-    .firefox {
-      padding: 32px;
+  /* Firefox: base scrollbar styles (Firefox ignores ::-webkit-scrollbar) */
+  @supports (-moz-appearance: none) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb) transparent;
     }
   }
 
-  /* For screens with a maximum width of 768px (mobile) */
-  @media (max-width: 768px) {
-    .firefox {
-      padding: 16px;
-    }
+  .prompt-variable-highlight {
+    background-color: color-mix(in oklch, var(--primary) 18%, transparent);
+    border-radius: 0.375rem;
+    padding: 0 0.25rem;
+  }
+
+  .dark .prompt-variable-highlight {
+    background-color: color-mix(in oklch, var(--primary) 32%, transparent);
   }
 
   @font-face {
@@ -641,88 +225,28 @@ Avoid over-scrolling in mobile browsers
     src: url('/fonts/IBMPlexMono-Medium.ttf');
   }
 
-  /* Light mode specific autofill styles */
+  /* Keep autofilled text on the theme instead of the browser's own colours. */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
-    -webkit-text-fill-color: #343541 !important;
+    -webkit-text-fill-color: var(--foreground) !important;
     -webkit-box-shadow: 0 0 0 30px transparent inset !important;
     transition: background-color 5000s ease-in-out 0s;
-    caret-color: #343541;
-  }
-
-  /* Dark mode specific autofill styles */
-  .dark input:-webkit-autofill,
-  .dark input:-webkit-autofill:hover,
-  .dark input:-webkit-autofill:focus,
-  .dark input:-webkit-autofill:active {
-    -webkit-text-fill-color: #e5e7eb !important;
-    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
-    background-color: transparent !important;
-    caret-color: #e5e7eb;
-  }
-
-  /* Additional autocomplete dropdown styles for dark mode */
-  .dark input:-webkit-autofill::first-line {
-    color: #e5e7eb;
-  }
-
-  .inputbox-style {
-    resize: none;
-    padding-left: 36px;
-    padding-right: 36px;
-  }
-
-  .bottom-safe {
-    bottom: env(safe-area-inset-bottom, 0);
-  }
-
-  .ellipsis-text {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-  }
-
-  .logs-table {
-    font-family: var(--font-mono);
-  }
-
-  /* Disclosure content, e.g. an expanded tool call. Short on purpose: the
-     panel's height appears at once, so a long fade reads as the content
-     lagging behind the layout rather than as a reveal. */
-  .fade-in {
-    animation: fadeIn 0.16s ease-out;
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  /* The start state lives in the keyframes, not here: with `opacity: 0` on
-     the element itself the content was only ever visible *because* an
-     animation had run to completion, so anything that stopped it running —
-     a cancelled animation, a reduced-motion reset — left the answer blank.
-     The element now rests visible and the animation is purely additive. */
-  .fade-in-bubble {
-    animation: fadeInUp 0.26s ease-out;
+    caret-color: var(--foreground);
   }
 
+  /* The sweep on a streaming status line. The peak is a light grey in light
+     mode (the foreground would sweep a dark bar through the line) and the
+     foreground in dark. */
   .shimmer-text {
     background: linear-gradient(
       90deg,
-      #6b7280 0%,
-      #6b7280 40%,
-      #d1d5db 50%,
-      #6b7280 60%,
-      #6b7280 100%
+      var(--muted-foreground) 0%,
+      var(--muted-foreground) 40%,
+      var(--border) 50%,
+      var(--muted-foreground) 60%,
+      var(--muted-foreground) 100%
     );
     background-size: 200% 100%;
     -webkit-background-clip: text;
@@ -734,11 +258,11 @@ Avoid over-scrolling in mobile browsers
   .dark .shimmer-text {
     background-image: linear-gradient(
       90deg,
-      #9ca3af 0%,
-      #9ca3af 40%,
-      #f9fafb 50%,
-      #9ca3af 60%,
-      #9ca3af 100%
+      var(--muted-foreground) 0%,
+      var(--muted-foreground) 40%,
+      var(--foreground) 50%,
+      var(--muted-foreground) 60%,
+      var(--muted-foreground) 100%
     );
   }
 
@@ -760,23 +284,6 @@ Avoid over-scrolling in mobile browsers
     .dark .shimmer-text {
       background-image: none;
     }
-
-    /* Safe to drop outright now that both rest in their final state. */
-    .fade-in,
-    .fade-in-bubble {
-      animation: none;
-    }
-  }
-
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
   }
 
   @keyframes spinner-rotate {
@@ -784,6 +291,18 @@ Avoid over-scrolling in mobile browsers
       transform: rotate(1turn);
     }
   }
+
+  @keyframes twinkle {
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: scale(1) translateY(0);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.2) translateY(-2px);
+    }
+  }
 }
 
 /*
@@ -813,6 +332,13 @@ Avoid over-scrolling in mobile browsers
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -846,21 +372,34 @@ Avoid over-scrolling in mobile browsers
   --popover-foreground: #171717;
   --primary: #7d54d1;
   --primary-foreground: #ffffff;
-  --secondary: #f4f4f4;
-  --secondary-foreground: #7d54d1;
+  /* Pressed/active toggle fill: a brand tint, so it shows on any surface
+     (card, background, muted) and never reads as the neutral ghost hover. */
+  --secondary: #7d54d11a; /* primary at 10%; static, so no color-mix fallback */
+  --secondary-foreground: var(--primary);
   --muted: #f6f6f6;
   --muted-foreground: #737373;
   --accent: #ececec;
   --accent-foreground: #171717;
   --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  /* Status colours. Pair `text-<token>` with `bg-<token>/10` for soft badges
+     and alerts; use `bg-<token> text-<token>-foreground` for solid fills. */
+  --success: #079455;
+  --success-foreground: #ffffff;
+  --warning: #ca8a04;
+  --warning-foreground: #ffffff;
+  --info: #2563eb;
+  --info-foreground: #ffffff;
   --border: #d9d9d9;
   --input: #d9d9d9;
   --ring: #7d54d1;
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  /* Data series reuse brand and status colours: chart-1 is the brand, and a
+     series with a meaning takes the matching token (failed = chart-5). */
+  --chart-1: var(--primary);
+  --chart-2: var(--info);
+  --chart-3: var(--success);
+  --chart-4: var(--warning);
+  --chart-5: var(--destructive);
   --sidebar: #fbfbfb;
   --sidebar-foreground: #171717;
   --sidebar-primary: #7d54d1;
@@ -870,6 +409,8 @@ Avoid over-scrolling in mobile browsers
   --sidebar-border: #d9d9d9;
   --sidebar-ring: #7d54d1;
   --answer-bubble: #f6f6f6;
+  --scrollbar-thumb: #e2e8f0;
+  --scrollbar-thumb-hover: #8c9198;
 }
 
 /*
@@ -883,23 +424,32 @@ Avoid over-scrolling in mobile browsers
   --card-foreground: #fafafa;
   --popover: #2b2c31;
   --popover-foreground: #fafafa;
-  --primary: #976af3;
+  --primary: #8855f1; /* white text on it is 4.55:1 */
   --primary-foreground: #ffffff;
-  --secondary: #2b2c31;
-  --secondary-foreground: #e0e0e0;
+  --secondary: #976af326; /* #976af3 (the lighter dark purple) at 15% */
+  /* A lighter primary: #976af3 on the tint is about 3:1, this is 4.4-5.6:1. */
+  --secondary-foreground: #b89cf8;
   --muted: #35363b;
   --muted-foreground: #a1a1a1;
   --accent: #3e3f45;
   --accent-foreground: #fafafa;
   --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #4ade80;
+  --success-foreground: #052e16;
+  --warning: #fbbf24;
+  --warning-foreground: #451a03;
+  --info: #60a5fa;
+  --info-foreground: #172554;
   --border: #44454c;
   --input: #44454c;
   --ring: #976af3;
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  /* Same aliases as :root, re-declared so they resolve to the dark values. */
+  --chart-1: var(--primary);
+  --chart-2: var(--info);
+  --chart-3: var(--success);
+  --chart-4: var(--warning);
+  --chart-5: var(--destructive);
   --sidebar: #161616;
   --sidebar-foreground: #fafafa;
   --sidebar-primary: #976af3;
@@ -909,6 +459,8 @@ Avoid over-scrolling in mobile browsers
   --sidebar-border: #2b2c31;
   --sidebar-ring: #976af3;
   --answer-bubble: #2e303e;
+  --scrollbar-thumb: #949494;
+  --scrollbar-thumb-hover: #f0f0f0;
 }
 
 /*
diff --git a/frontend/src/lib/markdown.test.tsx b/frontend/src/lib/markdown.test.tsx
new file mode 100644
index 00000000..cb0c9120
--- /dev/null
+++ b/frontend/src/lib/markdown.test.tsx
@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import ReactMarkdown from 'react-markdown';
+import { describe, expect, it } from 'vitest';
+
+import { markdownHeadings } from './markdown';
+
+describe('markdownHeadings', () => {
+  it('maps h1-h3 to the shared semibold sizes with margins', () => {
+    const html = renderToStaticMarkup(
+      <ReactMarkdown components={markdownHeadings}>
+        {'# One\n\n## Two\n\n### Three'}
+      </ReactMarkdown>,
+    );
+    expect(html).toContain(
+      '<h1 class="mt-4 mb-2 text-xl font-semibold">One</h1>',
+    );
+    expect(html).toContain(
+      '<h2 class="mt-4 mb-2 text-lg font-semibold">Two</h2>',
+    );
+    expect(html).toContain(
+      '<h3 class="mt-3 mb-2 text-base font-semibold">Three</h3>',
+    );
+  });
+});
diff --git a/frontend/src/lib/markdown.tsx b/frontend/src/lib/markdown.tsx
new file mode 100644
index 00000000..e479639f
--- /dev/null
+++ b/frontend/src/lib/markdown.tsx
@@ -0,0 +1,17 @@
+import type { Components } from 'react-markdown';
+
+/**
+ * Heading renderers shared by every markdown surface (chat answers, the wiki
+ * view, note artifacts, document previews). Spread into `components`.
+ */
+export const markdownHeadings: Components = {
+  h1: ({ children }) => (
+    <h1 className="mt-4 mb-2 text-xl font-semibold">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="mt-4 mb-2 text-lg font-semibold">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="mt-3 mb-2 text-base font-semibold">{children}</h3>
+  ),
+};
diff --git a/frontend/src/lib/utils.test.ts b/frontend/src/lib/utils.test.ts
new file mode 100644
index 00000000..dc74bb77
--- /dev/null
+++ b/frontend/src/lib/utils.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import { buttonVariants } from '@/components/ui/button';
+import { inputVariants } from '@/components/ui/input';
+import { textareaVariants } from '@/components/ui/textarea';
+
+import { fieldFrame, focusRing, invalidState } from './utils';
+
+describe('shared ui class constants', () => {
+  it('focusRing is the DESIGN.md keyboard ring', () => {
+    expect(focusRing).toBe('focus-visible:ring-3 focus-visible:ring-ring/50');
+  });
+
+  it('invalidState is the aria-invalid triple', () => {
+    expect(invalidState.split(' ')).toEqual([
+      'aria-invalid:ring-destructive/20',
+      'dark:aria-invalid:ring-destructive/40',
+      'aria-invalid:border-destructive',
+    ]);
+  });
+
+  it.each([
+    ['Button', buttonVariants()],
+    ['Input', inputVariants()],
+    ['Textarea', textareaVariants()],
+  ])('%s is built from the shared constants', (_name, classes) => {
+    const list = classes.split(' ');
+    for (const c of [...focusRing.split(' '), ...invalidState.split(' ')]) {
+      expect(list).toContain(c);
+    }
+  });
+
+  it('fieldFrame carries the field border, shadow and transition', () => {
+    const list = inputVariants().split(' ');
+    for (const c of fieldFrame.split(' ')) expect(list).toContain(c);
+    expect(fieldFrame).toContain('shadow-xs');
+    expect(fieldFrame).toContain('transition-[color,box-shadow]');
+  });
+});
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 9ad0df42..0f90b4dd 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -4,3 +4,25 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+// Class strings shared by the ui/ primitives, so every control spells the
+// DESIGN.md focus, field and invalid rules the same way. Plain strings (not a
+// Tailwind @utility) so the literal classes stay greppable and testable.
+
+/** The keyboard focus ring (DESIGN.md "Focus ring"); fields add focus-visible:border-ring. */
+export const focusRing = 'focus-visible:ring-3 focus-visible:ring-ring/50';
+
+/** The red ring and border a control shows while aria-invalid is set. */
+export const invalidState =
+  'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+
+/** The scrim behind every Modal, Dialog and Sheet: a light blurred dim, darker in dark mode. */
+export const overlayScrim = 'bg-black/25 backdrop-blur-xs dark:bg-black/50';
+
+/** The focus ring of a destructive button, red instead of the ring token. */
+export const destructiveRing =
+  'focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40';
+
+/** The frame of a form field: a 1px input border, the field shadow and a quiet transition. */
+export const fieldFrame =
+  'border border-input shadow-xs transition-[color,box-shadow] outline-none';
diff --git a/frontend/src/locale/accessTokens.test.ts b/frontend/src/locale/accessTokens.test.ts
index 5415f4ce..6ba04518 100644
--- a/frontend/src/locale/accessTokens.test.ts
+++ b/frontend/src/locale/accessTokens.test.ts
@@ -47,13 +47,4 @@ describe('settings.accessTokens locale block', () => {
       );
     },
   );
-
-  it('every locale provides both plural forms i18next falls back through', () => {
-    [en, ...Object.values(LOCALES)].forEach((locale) => {
-      const relative = ((locale.settings as Tree).accessTokens as Tree)
-        .relative as Tree;
-      expect(relative.days_one).toBeTruthy();
-      expect(relative.days_other).toBeTruthy();
-    });
-  });
 });
diff --git a/frontend/src/locale/de.json b/frontend/src/locale/de.json
index 05e2770e..8e741b3f 100644
--- a/frontend/src/locale/de.json
+++ b/frontend/src/locale/de.json
@@ -8,6 +8,7 @@
   "sourceDocs": "Quelle",
   "none": "Keine",
   "loading": "Wird geladen...",
+  "retry": "Erneut versuchen",
   "cancel": "Abbrechen",
   "help": "Hilfe",
   "emailUs": "E-Mail senden",
@@ -23,7 +24,10 @@
     "sharedTitle": "Mit dir geteilt",
     "sharedBody": "{{type}} mit deinem Team geteilt: {{name}} ({{access}})",
     "sharedBodyNoName": "{{type}} wurde mit deinem Team geteilt ({{access}})",
-    "dismiss": "Schließen"
+    "dismiss": "Schließen",
+    "toolApprovalTitle": "Tool-Freigabe erforderlich",
+    "toolApprovalReview": "Prüfen",
+    "toolApprovalFallbackName": "Unterhaltung"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "Einstellungen",
     "general": {
       "label": "Allgemein",
-      "selectTheme": "Design auswählen",
+      "subtitle": "Legen Sie fest, wie DocsGPT aussieht, welche Sprache es verwendet und welchen Prompt Ihre Chats nutzen.",
+      "sections": {
+        "appearance": "Darstellung",
+        "chat": "Chat",
+        "dangerZone": "Gefahrenzone"
+      },
+      "theme": "Design",
+      "themeDescription": "Helle oder dunkle Oberfläche.",
+      "language": "Sprache",
+      "languageDescription": "Sprache von Menüs und Beschriftungen.",
       "light": "Hell",
       "dark": "Dunkel",
-      "selectLanguage": "Sprache auswählen",
       "chunks": "Chunks pro Anfrage",
       "prompt": "Aktiver Prompt",
+      "promptDescription": "Der System-Prompt für Chats ohne Agent. Agenten verwenden ihren eigenen.",
       "deleteAllLabel": "Alle Konversationen löschen",
       "deleteAllBtn": "Alle löschen",
+      "deleteAllDescription": "Löscht alle Unterhaltungen in Ihrem Konto dauerhaft. Dies kann nicht rückgängig gemacht werden.",
       "addNew": "Neu hinzufügen",
       "convHistory": "Konversationsverlauf",
       "none": "Keine",
@@ -72,7 +86,14 @@
       "high": "Hoch",
       "unlimited": "Unbegrenzt",
       "default": "Standard",
-      "add": "Hinzufügen"
+      "add": "Hinzufügen",
+      "promptActions": {
+        "select": "Prompt auswählen",
+        "edit": "Prompt bearbeiten",
+        "view": "Prompt anzeigen",
+        "duplicate": "Prompt duplizieren",
+        "delete": "Prompt löschen"
+      }
     },
     "sources": {
       "title": "Hier kannst du alle verfügbaren Quelldateien verwalten, die dir zur Verfügung stehen und die du hochgeladen hast.",
@@ -111,7 +132,6 @@
         "edit": "Bearbeiten",
         "save": "Speichern",
         "cancel": "Abbrechen",
-        "saving": "Speichern…",
         "saveFailed": "Die Seite konnte nicht gespeichert werden. Bitte versuche es erneut.",
         "forbidden": "Du hast keine Berechtigung, diese Seite zu bearbeiten.",
         "conflict": "Diese Seite wurde seit dem Öffnen geändert und neu geladen. Deine Änderungen stehen unten – übernimm sie erneut und speichere noch einmal.",
@@ -221,6 +241,7 @@
       "deleteWarning": "Bist du sicher, dass du \"{{name}}\" löschen möchtest?",
       "confirmDelete": "Bist du sicher, dass du diese Datei löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.",
       "backToAll": "Zurück zu allen Quellen",
+      "back": "Zurück",
       "chunks": "Chunks",
       "noChunks": "Keine Chunks gefunden",
       "noChunksAlt": "Keine Chunks gefunden",
@@ -324,7 +345,6 @@
         "subtitle": "Konfiguriere, wie \"{{name}}\" in Chunks aufgeteilt und abgerufen wird.",
         "subtitleGeneric": "Konfiguriere, wie diese Quelle in Chunks aufgeteilt und abgerufen wird.",
         "save": "Speichern",
-        "saving": "Speichern…",
         "readOnly": "Du hast nur Lesezugriff auf diese geteilte Quelle und kannst ihre Konfiguration nicht ändern.",
         "chunkingChangeHint": "Du hast eine Chunking-Einstellung geändert. Nach dem Speichern muss diese Quelle erneut indexiert werden, damit die Änderung wirkt.",
         "prescreenInvalidHint": "Prüfe die Vorfilter-Werte: Die abzurufenden Kandidaten müssen mindestens der Chunk-Anzahl entsprechen, und die zu behaltenden Chunks dürfen die Kandidatenzahl nicht überschreiten.",
@@ -371,6 +391,7 @@
       "failed": "Fehlgeschlagen",
       "skipped": "Übersprungen",
       "successful": "Erfolgreich",
+      "otherSeries": "Andere",
       "stats": {
         "messages": "Nachrichten",
         "tokens": "Tokens",
@@ -669,12 +690,19 @@
       "description": "Beschreibung",
       "descriptionPlaceholder": "Beschreibung eingeben",
       "bodyContentType": "Body-Inhaltstyp",
+      "bodyTypeHint": {
+        "json": "Das gängigste Format. Für moderne REST-APIs.",
+        "formUrlencoded": "Standardformat für Formularübermittlungen. Am besten für ältere APIs und Anmeldeformulare.",
+        "multipart": "Für APIs, die das Multipart-Format erfordern. Datei-Uploads über das LLM werden nicht unterstützt.",
+        "text": "Reine Textdaten. Jedes Feld in einer neuen Zeile.",
+        "xml": "Strukturiertes XML-Format. Für SOAP- und Enterprise-APIs.",
+        "octetStream": "Rohe Binärdaten, für die Übertragung Base64-kodiert."
+      },
       "headers": "Header",
       "queryParameters": "Abfrageparameter",
       "body": "Body",
       "deleteActionWarning": "Bist du sicher, dass du die Aktion \"{{name}}\" löschen möchtest?",
       "save": "Speichern",
-      "saving": "Speichere...",
       "saveFailed": "Werkzeug-Konfiguration konnte nicht gespeichert werden",
       "fieldName": "Feldname",
       "fieldType": "Feldtyp",
@@ -700,8 +728,6 @@
         "password": "Passwort",
         "timeout": "Timeout (Sekunden)",
         "testConnection": "Verbindung testen",
-        "testing": "Teste...",
-        "saving": "Speichere...",
         "save": "Speichern",
         "cancel": "Abbrechen",
         "noAuth": "Keine Authentifizierung",
@@ -740,7 +766,14 @@
           "oauthTimeout": "OAuth-Prozess abgelaufen, bitte erneut versuchen",
           "timeoutRange": "Timeout muss zwischen 1 und 300 Sekunden liegen"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}} ist erforderlich",
+        "positiveNumber": "Muss eine positive Zahl sein",
+        "maxTimeout": "Das maximale Timeout beträgt 300 Sekunden"
+      },
+      "headerValuePlaceholder": "z. B. application/json",
+      "toolIconTitle": "{{name}}-Symbol"
     },
     "devices": {
       "label": "Geräte",
@@ -791,10 +824,11 @@
         "installLink": "Du hast docsgpt-cli noch nicht? Installiere es",
         "stepTwo": "2. Gib diesen Code ein, wenn du dazu aufgefordert wirst:",
         "start": "Code generieren",
-        "starting": "Bitte warten…",
         "waitingForCli": "Warte, bis die CLI den Code einlöst…",
         "cancel": "Abbrechen"
-      }
+      },
+      "auditDurationValue": "{{value}} ms",
+      "fallbackName": "Gerät"
     },
     "customModels": {
       "label": "Eigene Modelle",
@@ -806,9 +840,7 @@
       "addTitle": "Eigenes Modell hinzufügen",
       "editTitle": "Eigenes Modell bearbeiten",
       "save": "Speichern",
-      "saving": "Speichern",
       "testConnection": "Verbindung testen",
-      "testing": "Test läuft",
       "testSuccess": "Verbindung erfolgreich.",
       "testHintNew": "Fülle Basis-URL, Modell-ID und API-Schlüssel aus, um Verbindungstests zu aktivieren.",
       "disabledBadge": "Deaktiviert",
@@ -909,15 +941,6 @@
         "workflows_one": "{{count}} Workflow",
         "workflows_other": "{{count}} Workflows"
       },
-      "relative": {
-        "now": "Gerade eben",
-        "minutes_one": "Vor {{count}} Minute",
-        "minutes_other": "Vor {{count}} Minuten",
-        "hours_one": "Vor {{count}} Stunde",
-        "hours_other": "Vor {{count}} Stunden",
-        "days_one": "Vor {{count}} Tag",
-        "days_other": "Vor {{count}} Tagen"
-      },
       "families": {
         "agents": "Agenten",
         "sources": "Quellen",
@@ -955,7 +978,6 @@
         "retry": "Erneut versuchen",
         "cancel": "Abbrechen",
         "submit": "Token erstellen",
-        "submitting": "Wird erstellt",
         "error": "Das Token konnte nicht erstellt werden. Bitte versuche es erneut."
       },
       "created": {
@@ -974,7 +996,6 @@
         "warning": "Neues Geheimnis für \"{{name}}\" erzeugen? Das aktuelle Geheimnis funktioniert sofort nicht mehr, alles, was es verwendet, muss aktualisiert werden. Name, Berechtigungen und Einschränkungen bleiben gleich.",
         "newExpiration": "Neues Ablaufdatum",
         "submit": "Neu generieren",
-        "submitting": "Wird neu generiert…",
         "error": "Das Token konnte nicht neu generiert werden. Bitte erneut versuchen.",
         "done": {
           "title": "Token neu generiert",
@@ -1031,7 +1052,8 @@
         "collapseDetails": "Upload-Details einklappen",
         "dismiss": "Upload-Benachrichtigung schließen",
         "uploadProgress": "Upload-Fortschritt {{progress}}%",
-        "clear": "Löschen"
+        "clear": "Löschen",
+        "ingestionFailed": "Aufnahme fehlgeschlagen."
       },
       "showAdvanced": "Erweiterte Optionen anzeigen",
       "hideAdvanced": "Erweiterte Optionen ausblenden",
@@ -1097,7 +1119,6 @@
           "pickerFailed": "Dateiauswahl konnte nicht geöffnet werden. Bitte versuche es erneut.",
           "selectedFiles": "Ausgewählte Dateien",
           "selectFiles": "Dateien auswählen",
-          "loading": "Laden...",
           "noFilesSelected": "Keine Dateien oder Ordner ausgewählt",
           "folders": "Ordner",
           "files": "Dateien",
@@ -1123,6 +1144,16 @@
           "folderAlt": "Ordner",
           "fileAlt": "Datei"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "AWS-Zugriffsschlüssel-ID",
+        "awsSecretAccessKey": "Geheimer AWS-Zugriffsschlüssel",
+        "bucket": "Bucket-Name",
+        "prefix": "Pfadpräfix (optional)",
+        "region": "AWS-Region",
+        "endpointUrl": "Benutzerdefinierte Endpunkt-URL (optional)",
+        "initialContent": "Anfangsinhalt (optional)"
       }
     },
     "createAPIKey": {
@@ -1163,7 +1194,10 @@
       "apiKeyPlaceholder": "API-Schlüssel / OAuth eingeben",
       "addButton": "Werkzeug hinzufügen",
       "closeButton": "Schließen",
-      "customNamePlaceholder": "Benutzerdefinierten Namen eingeben (optional)"
+      "customNamePlaceholder": "Benutzerdefinierten Namen eingeben (optional)",
+      "fieldRequired": "{{field}} ist erforderlich",
+      "positiveNumber": "Muss eine positive Zahl sein",
+      "maxTimeout": "Das Zeitlimit beträgt höchstens 300 Sekunden"
     },
     "prompts": {
       "addPrompt": "Prompt hinzufügen",
@@ -1285,15 +1319,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "JWT-Token hinzufügen",
+      "label": "JWT-Token",
+      "save": "Token speichern"
     }
   },
   "sharedConv": {
     "subtitle": "Erstellt mit",
     "button": "Mit DocsGPT starten",
-    "meta": "DocsGPT verwendet GenAI, bitte überprüfe kritische Informationen anhand der Quellen."
+    "meta": "DocsGPT verwendet GenAI, bitte überprüfe kritische Informationen anhand der Quellen.",
+    "metaDescription": "Geteilte Unterhaltungen mit DocsGPT"
   },
   "convTile": {
     "share": "Teilen",
+    "menu": "Unterhaltungsaktionen",
     "delete": "Löschen",
     "rename": "Umbenennen",
     "save": "Speichern",
@@ -1315,7 +1356,8 @@
     "edit": {
       "update": "Aktualisieren",
       "cancel": "Abbrechen",
-      "placeholder": "Aktualisierte Anfrage eingeben..."
+      "placeholder": "Aktualisierte Anfrage eingeben...",
+      "label": "Bearbeiten"
     },
     "sources": {
       "title": "Quellen",
@@ -1330,9 +1372,13 @@
     },
     "attachments": {
       "attach": "Anhängen",
-      "remove": "Anhang entfernen"
+      "remove": "Anhang entfernen",
+      "attached": "Anhang",
+      "failed": "Fehlgeschlagen",
+      "attachment": "Anhang"
     },
     "retry": "Erneut versuchen",
+    "failedTitle": "Antwort konnte nicht erstellt werden",
     "reasoning": "Begründung",
     "wikiWrite": {
       "edited": "Wiki bearbeitet",
@@ -1385,7 +1431,56 @@
     "quotaExceeded": {
       "tokens": "Sie haben {{used}} von Ihrem Kontingent von {{limit}} Tokens verbraucht. Es wird am {{resetsAt}} zurückgesetzt.",
       "cost": "Sie haben {{used}} von Ihrem Nutzungsbudget von {{limit}} verbraucht. Es wird am {{resetsAt}} zurückgesetzt."
-    }
+    },
+    "voice": {
+      "start": "Spracheingabe",
+      "stopRecording": "Aufnahme beenden",
+      "transcribingAudio": "Audio wird transkribiert",
+      "voice": "Sprache",
+      "stop": "Stopp",
+      "transcribing": "Transkribiere",
+      "unavailable": "Die Spracheingabe ist gerade nicht verfügbar.",
+      "insecure": "Die Spracheingabe erfordert eine sichere Verbindung (HTTPS oder localhost).",
+      "unsupported": "Die Spracheingabe ist in diesem Browser nicht verfügbar.",
+      "noWebAudio": "Die Spracheingabe erfordert Web-Audio-Unterstützung in diesem Browser.",
+      "micBlocked": "Der Mikrofonzugriff wurde blockiert. Erlaube den Mikrofonzugriff und versuche es erneut.",
+      "micNotFound": "Auf diesem Gerät wurde kein Mikrofon gefunden.",
+      "micBusy": "Das Mikrofon ist nicht verfügbar oder wird bereits verwendet.",
+      "micInterrupted": "Der Mikrofonzugriff wurde vor Beginn der Aufnahme unterbrochen.",
+      "micDenied": "Der Mikrofonzugriff wurde verweigert.",
+      "transcribeFailed": "Audio konnte nicht transkribiert werden.",
+      "finalizeFailed": "Live-Transkription konnte nicht abgeschlossen werden.",
+      "startFailed": "Live-Transkription konnte nicht gestartet werden."
+    },
+    "selectModel": "Modell auswählen",
+    "question": {
+      "expand": "Ganze Nachricht anzeigen",
+      "collapse": "Weniger anzeigen"
+    },
+    "exportMarkdown": "Als Markdown exportieren",
+    "feedback": {
+      "like": "Gefällt mir",
+      "removeLike": "„Gefällt mir“ entfernen",
+      "dislike": "Gefällt mir nicht",
+      "removeDislike": "„Gefällt mir nicht“ entfernen"
+    },
+    "toolApproval": {
+      "approve": "Genehmigen",
+      "approveAlways": "Genehmigen, nicht mehr fragen",
+      "deny": "Ablehnen",
+      "details": "Details",
+      "denyReasonPlaceholder": "Optionaler Grund für die Ablehnung…"
+    },
+    "research": {
+      "title": "Recherche",
+      "planning": "Recherche wird geplant…",
+      "researching": "Recherchiere…",
+      "synthesizing": "Bericht wird geschrieben…",
+      "complete": "Abgeschlossen",
+      "researched_one": "{{count}} Thema recherchiert",
+      "researched_other": "{{count}} Themen recherchiert"
+    },
+    "openFile": "Datei öffnen"
   },
   "agents": {
     "title": "Agenten",
@@ -1395,7 +1490,8 @@
       "unpin": "Agent lösen",
       "open": "Öffnen",
       "remove": "Entfernen",
-      "draft": "Entwurf"
+      "draft": "Entwurf",
+      "actions": "Agentenaktionen"
     },
     "description": "Entdecke und erstelle benutzerdefinierte Versionen von DocsGPT, die Anweisungen, zusätzliches Wissen und beliebige Kombinationen von Fähigkeiten kombinieren",
     "newAgent": "Neuer Agent",
@@ -1521,7 +1617,8 @@
       },
       "agentTypes": {
         "classic": "Klassisch",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "Recherche"
       },
       "labels": {
         "defaultModel": "Standardmodell"
@@ -1677,13 +1774,95 @@
           "nov": "Nov",
           "dec": "Dez"
         }
+      },
+      "status": {
+        "active": "Aktiv",
+        "paused": "Pausiert",
+        "completed": "Abgeschlossen",
+        "cancelled": "Abgebrochen",
+        "success": "Erfolgreich",
+        "failed": "Fehlgeschlagen",
+        "skipped": "Übersprungen",
+        "running": "Läuft",
+        "pending": "Ausstehend",
+        "timeout": "Zeitüberschreitung"
+      },
+      "trigger": {
+        "cron": "Geplant",
+        "manual": "Manuell"
+      },
+      "runDetails": {
+        "title": "Ausführungsdetails",
+        "status": "Status",
+        "scheduledFor": "Geplant für",
+        "started": "Gestartet",
+        "finished": "Beendet",
+        "tokens": "Tokens",
+        "tokensValue": "{{prompt}} Prompt · {{generated}} generiert",
+        "trigger": "Auslöser",
+        "error": "Fehler",
+        "errorWithType": "Fehler ({{type}})",
+        "output": "Ausgabe",
+        "truncated": "(gekürzt)"
+      },
+      "timezoneMeta": "Zeitzone: {{timezone}}",
+      "nextRunMeta": "nächster Lauf: {{time}}",
+      "toolCard": {
+        "cancelFailed": "Abbrechen fehlgeschlagen",
+        "taskCancelled": "Geplante Aufgabe abgebrochen.",
+        "pendingCount_one": "{{count}} ausstehende geplante Aufgabe",
+        "pendingCount_other": "{{count}} ausstehende geplante Aufgaben",
+        "schedulingFailed": "Planung fehlgeschlagen",
+        "scheduling": "Wird geplant…",
+        "scheduled": "Geplante Aufgabe"
+      },
+      "cron": {
+        "daily": "Täglich um {{time}}",
+        "weekly": "Wöchentlich am {{day}} um {{time}}",
+        "monthly": "Monatlich am {{day}}. um {{time}}",
+        "yearly": "Jährlich am {{day}}. {{month}} um {{time}}",
+        "custom": "Benutzerdefiniert: {{expression}}",
+        "dayNames": {
+          "sun": "Sonntag",
+          "mon": "Montag",
+          "tue": "Dienstag",
+          "wed": "Mittwoch",
+          "thu": "Donnerstag",
+          "fri": "Freitag",
+          "sat": "Samstag"
+        },
+        "monthNames": {
+          "jan": "Januar",
+          "feb": "Februar",
+          "mar": "März",
+          "apr": "April",
+          "may": "Mai",
+          "jun": "Juni",
+          "jul": "Juli",
+          "aug": "August",
+          "sep": "September",
+          "oct": "Oktober",
+          "nov": "November",
+          "dec": "Dezember"
+        }
+      },
+      "runLog": {
+        "when": "Wann",
+        "details": "Details",
+        "empty": "Für diesen Zeitplan wurden noch keine Läufe aufgezeichnet."
       }
     },
     "shared": {
-      "notFound": "Kein Agent gefunden. Bitte stelle sicher, dass der Agent geteilt ist."
+      "notFound": "Kein Agent gefunden. Bitte stelle sicher, dass der Agent geteilt ist.",
+      "logoAlt": "Agentenlogo",
+      "sharedBy": "von {{name}}",
+      "sharedOn": "Geteilt am {{date}}",
+      "connectedTools": "Verbundene Tools",
+      "toolIconTitle": "Symbol für {{name}}"
     },
     "preview": {
-      "testMessage": "Teste deinen Agenten hier. Veröffentlichte Agenten können in Konversationen verwendet werden."
+      "testMessage": "Teste deinen Agenten hier. Veröffentlichte Agenten können in Konversationen verwendet werden.",
+      "emptyTitle": "Teste deinen Agenten"
     },
     "deleteConfirmation": "Bist du sicher, dass du diesen Agenten löschen möchtest?",
     "folders": {
@@ -1701,7 +1880,9 @@
       "backToRoot": "Zurück",
       "currentFolder": "Dieser Ordner",
       "noSubfolders": "Keine Unterordner",
-      "noFolders": "Noch keine Ordner"
+      "openFolder": "Ordner öffnen",
+      "noFolders": "Noch keine Ordner",
+      "menuAriaLabel": "Aktionen für {{folderName}}"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1725,6 +1906,198 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "Dieses Artefakt kann nicht in der Vorschau angezeigt werden",
+        "loadListFailed": "Artefakte konnten nicht geladen werden",
+        "loadFailed": "Artefakt konnte nicht geladen werden",
+        "loading": "Artefakte werden geladen...",
+        "inProgress": "Lauf aktiv – Artefakte erscheinen hier, sobald Knoten sie erzeugen.",
+        "empty": "Dieser Lauf hat keine Artefakte erzeugt.",
+        "back": "Zurück zu den Artefakten",
+        "untitled": "Artefakt {{id}}",
+        "fileKind": "Datei"
+      },
+      "builder": {
+        "deleteFailed": "Workflow-Agent konnte nicht gelöscht werden",
+        "updateWorkflowFailed": "Workflow konnte nicht aktualisiert werden",
+        "updateAgentFailed": "Agent konnte nicht aktualisiert werden",
+        "createWorkflowFailed": "Workflow konnte nicht erstellt werden",
+        "createAgentFailed": "Agent konnte nicht erstellt werden",
+        "saveFailed": "Workflow konnte nicht gespeichert werden",
+        "defaultDescription": "Workflow-Agent: {{name}}",
+        "newWorkflow": "Neuer Workflow",
+        "editDetails": "Workflow-Details bearbeiten",
+        "workflowName": "Workflow-Name",
+        "workflowNamePlaceholder": "Workflow-Namen eingeben",
+        "workflowDescriptionPlaceholder": "Beschreibe, was dieser Workflow macht",
+        "agentImageAlt": "Agentenbild",
+        "currentImage": "Aktuelles Bild",
+        "agentImage": "Agentenbild",
+        "agentImageHint": "Bildänderungen werden beim nächsten Speichern übernommen.",
+        "done": "Fertig",
+        "unablePreview": "Workflow-Vorschau nicht möglich",
+        "unableSave": "Workflow kann nicht gespeichert werden",
+        "unablePublish": "Workflow kann nicht veröffentlicht werden",
+        "coreNodes": "Kernknoten",
+        "logicNodes": "Logik & Daten",
+        "aiAgent": "KI-Agent",
+        "setStateHint": "Workflow-Variablen ändern",
+        "conditionHint": "Bedingte Verzweigung",
+        "codeHint": "Code in einer Sandbox ausführen",
+        "startNode": "Startknoten",
+        "endNode": "Endknoten",
+        "stateTitle": "Globale Variablen setzen",
+        "nodeId": "Knoten-ID",
+        "title": "Titel",
+        "titlePlaceholder": "Knotentitel eingeben",
+        "agentType": "Agententyp",
+        "agentTypePlaceholder": "Agententyp auswählen",
+        "model": "Modell",
+        "modelPlaceholder": "Modell auswählen",
+        "systemPrompt": "System-Prompt",
+        "systemPromptPlaceholder": "System-Prompt für den Agenten",
+        "promptTemplate": "Prompt-Vorlage",
+        "promptTemplatePlaceholder": "Verwende {{example}} für dynamische Inhalte",
+        "outputVariable": "Ausgabevariable",
+        "outputVariablePlaceholder": "Variablenname für die Ausgabe",
+        "streamToUser": "Ausgabe an Nutzer streamen",
+        "sources": "Quellen",
+        "documents": "Dokumente",
+        "documentsHint": "Dokumente, die diesem Agenten aus Uploads oder vorgelagerten Knoten übergeben werden.",
+        "filePassing": "Dateiübergabe",
+        "filePassingHint": "Auto: nativ senden, wenn das Modell es unterstützt, sonst Text extrahieren.",
+        "structuredOutput": "Strukturierte Ausgabe (JSON-Schema)",
+        "modelNoStructuredOutput": "Das ausgewählte Modell unterstützt keine strukturierte Ausgabe.",
+        "validSchema": "Gültiges JSON-Schema",
+        "invalidSchema": "Ungültiges JSON-Schema: {{error}}",
+        "noteContent": "Notizinhalt",
+        "noteContentPlaceholder": "Notizinhalt eingeben",
+        "stateIntro": "Den Zustandsvariablen des Workflows Werte zuweisen",
+        "assignValue": "Wert zuweisen",
+        "celHint": "Erstelle mit der Common Expression Language einen eigenen Ausdruck. Verweise auf den Zustand mit dem reinen Namen (<code>query</code>), nicht <code>{{braced}}</code>.",
+        "learnMore": "Mehr erfahren",
+        "toVariable": "In Variable",
+        "conditionIntro": "Erstelle Bedingungen, um deinen Workflow zu verzweigen",
+        "modeSimple": "Einfach",
+        "modeAdvanced": "Erweitert",
+        "caseNamePlaceholder": "Fallname (optional)",
+        "variablePlaceholder": "Variable",
+        "valuePlaceholder": "Wert",
+        "opContains": "enthält",
+        "opStartsWith": "beginnt",
+        "conditionPlaceholder": "Bedingung eingeben, z. B. query.contains(\"refund\")",
+        "codeIntro": "Code in der Workflow-Sandbox ausführen. Erzeugte Dateien werden als Artefakte gespeichert.",
+        "inputFiles": "Eingabedateien",
+        "inputFilesHint": "Artefakte/vorgelagerte Referenzen, die als Dateien in der Sandbox bereitgestellt werden (eine wird zu inputs/<name>).",
+        "timeout": "Zeitlimit (Sekunden)",
+        "optional": "Optional",
+        "cannotDeleteStart": "Startknoten kann nicht gelöscht werden",
+        "deleteNode": "Knoten löschen",
+        "deleteConfirm": "Möchtest du „{{name}}“ wirklich löschen?",
+        "deleteConfirmUnnamed": "Möchtest du diesen Workflow-Agenten wirklich löschen?"
+      },
+      "validation": {
+        "nameRequired": "Workflow-Name ist erforderlich",
+        "oneStart": "Der Workflow muss genau einen Startknoten haben",
+        "needEnd": "Der Workflow muss mindestens einen Endknoten haben",
+        "needAgent": "Der Workflow muss mindestens einen KI-Agent-Knoten haben",
+        "agentModel": "Für Agent „{{name}}“ muss ein Modell ausgewählt sein",
+        "agentStructuredOutput": "Das für Agent „{{name}}“ ausgewählte Modell unterstützt keine strukturierte Ausgabe",
+        "agentSchema": "JSON-Schema von Agent „{{name}}“: {{error}}",
+        "startConnected": "Der Startknoten muss mit einem anderen Knoten verbunden sein",
+        "endIncoming": "Endknoten „{{name}}“ braucht eine eingehende Verbindung",
+        "edgeSource": "Eine Verbindung verweist auf einen nicht vorhandenen Quellknoten",
+        "edgeTarget": "Eine Verbindung verweist auf einen nicht vorhandenen Zielknoten",
+        "conditionNeedsCase": "Bedingung „{{name}}“ braucht mindestens einen Fall mit einem Ausdruck",
+        "conditionCaseNoHandle": "Bedingung „{{name}}“ hat einen Fall ohne Verzweigungs-Handle",
+        "conditionDuplicateHandle": "Bedingung „{{name}}“ hat das doppelte Fall-Handle „{{handle}}“",
+        "conditionTwoOutgoing": "Bedingung „{{name}}“ braucht mindestens 2 ausgehende Verbindungen",
+        "conditionEdgeNoHandle": "Bedingung „{{name}}“ hat eine Verbindung ohne Verzweigungs-Handle",
+        "conditionUnknownBranch": "Bedingung „{{name}}“ hat eine Verbindung von der unbekannten Verzweigung „{{handle}}“",
+        "conditionMultipleEdges": "Bedingung „{{name}}“ hat mehrere Verbindungen von der Verzweigung „{{handle}}“",
+        "conditionNeedsElse": "Bedingung „{{name}}“ braucht einen Sonst-Zweig",
+        "caseNoConnection": "Bedingung „{{name}}“, Fall „{{handle}}“ hat einen Ausdruck, aber keine Verzweigungsverbindung",
+        "caseNoExpression": "Bedingung „{{name}}“, Fall „{{handle}}“ hat eine Verzweigungsverbindung, aber keinen Ausdruck",
+        "caseNoVariable": "Bedingung „{{name}}“, Fall „{{handle}}“ muss im einfachen Modus eine Variable angeben",
+        "branchReachEnd": "Verzweigung „{{handle}}“ von Bedingung „{{name}}“ muss schließlich einen Endknoten erreichen",
+        "codeRequired": "Code-Knoten „{{name}}“ braucht auszuführenden Code",
+        "codeSchema": "JSON-Schema von Code-Knoten „{{name}}“: {{error}}"
+      },
+      "schema": {
+        "notObject": "muss ein gültiges JSON-Objekt sein",
+        "missingType": "muss ein Feld „type“ oder „schema“ enthalten",
+        "invalidJson": "muss gültiges JSON sein"
+      },
+      "filePassing": {
+        "auto": "Auto",
+        "native": "Nativ",
+        "extract": "Extrahieren"
+      },
+      "mobileBlocker": {
+        "title": "Desktop erforderlich",
+        "body": "Der Workflow-Builder braucht für eine gute Bedienung einen größeren Bildschirm. Bitte öffne diese Seite auf einem Desktop- oder Laptop-Computer."
+      },
+      "nodes": {
+        "start": "Start",
+        "startHint": "Einstiegspunkt des Workflows",
+        "end": "Ende",
+        "endHint": "Abschluss des Workflows",
+        "agent": "Agent",
+        "note": "Notiz",
+        "condition": "Wenn / Sonst",
+        "code": "Code",
+        "setState": "Zustand setzen",
+        "output": "Ausgabe: {{variable}}",
+        "noCode": "Noch kein Code",
+        "modeSimple": "einfach",
+        "modeAdvanced": "erweitert",
+        "if": "Wenn",
+        "elseIf": "Sonst wenn",
+        "else": "Sonst",
+        "operationCount_one": "{{count}} Operation",
+        "operationCount_other": "{{count}} Operationen",
+        "variableCount_one": "{{count}} Variable",
+        "variableCount_other": "{{count}} Variablen",
+        "variableTitle": "Variable: {{name}}",
+        "valueTitle": "Wert: {{value}}"
+      },
+      "preview": {
+        "executionDetails": "Ausführungsdetails",
+        "stepCount_one": "({{count}} Schritt)",
+        "stepCount_other": "({{count}} Schritte)",
+        "outputLabel": "Ausgabe:",
+        "errorLabel": "Fehler:",
+        "artifacts": "Artefakte",
+        "minimapHeading": "Workflow",
+        "emptyTitle": "Workflow testen",
+        "unsavedDraftAttachments": "Speichere den Workflow, bevor du in der Vorschau Dokumente anhängst."
+      },
+      "documents": {
+        "modeAll": "Alle Eingabedokumente",
+        "modeNone": "Keine",
+        "modeChoose": "Auswählen…",
+        "selectPlaceholder": "Dokumente auswählen...",
+        "searchPlaceholder": "Variablen suchen...",
+        "empty": "Keine vorgelagerten Dokumente",
+        "refPlaceholder": "Referenz hinzufügen (z. B. A1)"
+      },
+      "variables": {
+        "globalContext": "Globaler Kontext",
+        "workflowInput": "Workflow-Eingabe",
+        "searchPlaceholder": "Variablen suchen...",
+        "empty": "Keine Variablen gefunden",
+        "addContext": "Kontext hinzufügen"
+      }
+    },
+    "typeModal": {
+      "title": "Neuen Agenten erstellen",
+      "description": "Wähle die Art des Agenten, den du erstellen möchtest",
+      "classicTitle": "Klassischer Agent",
+      "classicDescription": "Erstelle einen Standard-KI-Agenten mit einem Modell, Tools und Wissensquellen",
+      "workflowTitle": "Workflow-Agent",
+      "workflowDescription": "Entwirf komplexe mehrstufige Workflows mit verschiedenen Modellen, bedingter Logik und Zustandsverwaltung"
     }
   },
   "components": {
@@ -1733,7 +2106,40 @@
       "dropFiles": "Dateien hier ablegen",
       "fileTypes": "PNG, JPG, JPEG bis zu",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "Datei überschreitet {{size}}MB-Limit"
+      "fileSizeError": "Datei überschreitet {{size}}MB-Limit",
+      "preview": "Bildvorschau",
+      "remove": "Datei entfernen"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "Aufgabenliste",
+        "note": "Notiz",
+        "memory": "Gedächtnis"
+      },
+      "fallbackTitle": "Artefakt",
+      "todo": {
+        "done": "{{count}} erledigt",
+        "open": "{{count}} offen",
+        "empty": "Noch keine Aufgaben"
+      },
+      "note": {
+        "lines_one": "{{count}} Zeile",
+        "lines_other": "{{count}} Zeilen",
+        "empty": "Leere Notiz"
+      },
+      "notFound": "Artefakt nicht gefunden",
+      "loadFailed": "Artefakt konnte nicht geladen werden",
+      "fetchFailed": "Artefakt konnte nicht abgerufen werden",
+      "preview": "Artefaktvorschau",
+      "download": "Herunterladen",
+      "restore": "Wiederherstellen",
+      "version": "Version {{version}}",
+      "versionCurrent": "Version {{version}} (aktuell)",
+      "downloadFailed": "Download fehlgeschlagen",
+      "restoreFailed": "Wiederherstellung fehlgeschlagen"
+    },
+    "profile": {
+      "avatarAlt": "Benutzeravatar"
     }
   },
   "pageNotFound": {
@@ -1749,7 +2155,14 @@
     "size": "Größe",
     "myFiles": "Meine Dateien",
     "sharedWithMe": "Mit mir geteilt",
-    "loadingMore": "Weitere Dateien laden..."
+    "loadingMore": "Weitere Dateien laden...",
+    "myDrive": "Meine Ablage",
+    "spaces": "Bereiche",
+    "root": "Stammverzeichnis",
+    "shared": "Geteilt",
+    "connectTo": "Mit {{provider}} verbinden",
+    "sessionExpiredFor": "Sitzung abgelaufen. Bitte verbinde dich erneut mit {{provider}}.",
+    "selectFilesFrom": "Dateien aus {{provider}} auswählen"
   },
   "actionButtons": {
     "openNewChat": "Neuen Chat öffnen",
@@ -1760,7 +2173,13 @@
     "viewCode": "Code anzeigen",
     "decreaseZoom": "Verkleinern",
     "resetZoom": "Zoom zurücksetzen",
-    "increaseZoom": "Vergrößern"
+    "increaseZoom": "Vergrößern",
+    "download": "Herunterladen",
+    "downloadAs": "Als {{format}} herunterladen",
+    "code": "Code",
+    "loading": "Diagramm wird geladen...",
+    "codeTitle": "Mermaid-Code",
+    "renderFailed": "Diagramm konnte nicht dargestellt werden: {{message}}"
   },
   "navigation": {
     "agents": "Agenten",
@@ -1773,6 +2192,13 @@
         "insights": "Auswertungen",
         "administration": "Administration"
       }
+    },
+    "openSidebar": "Seitenleiste öffnen",
+    "closeSidebar": "Seitenleiste schließen",
+    "social": {
+      "discord": "Der Discord-Community beitreten",
+      "x": "Folge uns auf X",
+      "github": "Auf GitHub ansehen"
     }
   },
   "teams": {
@@ -1783,7 +2209,8 @@
       "roleAdmin": "Admin",
       "roleMember": "Mitglied",
       "manageTeam": "Team verwalten",
-      "createTeam": "Team erstellen"
+      "createTeam": "Team erstellen",
+      "logoAlt": "DocsGPT-Logo"
     }
   },
   "notification": {
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 9bb4018f..e40886e1 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -8,6 +8,7 @@
   "sourceDocs": "Source",
   "none": "None",
   "loading": "Loading...",
+  "retry": "Retry",
   "cancel": "Cancel",
   "errorBoundary": {
     "message": "Something went wrong displaying this content.",
@@ -27,7 +28,10 @@
     "sharedTitle": "Shared with you",
     "sharedBody": "{{type}} shared with your team: {{name}} ({{access}})",
     "sharedBodyNoName": "{{type}} shared with your team ({{access}})",
-    "dismiss": "Dismiss"
+    "dismiss": "Dismiss",
+    "toolApprovalTitle": "Tool approval needed",
+    "toolApprovalReview": "Review",
+    "toolApprovalFallbackName": "Conversation"
   },
   "demo": [
     {
@@ -60,14 +64,24 @@
     "label": "Settings",
     "general": {
       "label": "General",
-      "selectTheme": "Select Theme",
+      "subtitle": "Choose how DocsGPT looks, which language it uses, and the prompt your chats use.",
+      "sections": {
+        "appearance": "Appearance",
+        "chat": "Chat",
+        "dangerZone": "Danger zone"
+      },
+      "theme": "Theme",
+      "themeDescription": "Light or dark interface.",
+      "language": "Language",
+      "languageDescription": "Language of menus and labels.",
       "light": "Light",
       "dark": "Dark",
-      "selectLanguage": "Select Language",
       "chunks": "Chunks processed per query",
-      "prompt": "Active Prompt",
-      "deleteAllLabel": "Delete All Conversations",
-      "deleteAllBtn": "Delete All",
+      "prompt": "Active prompt",
+      "promptDescription": "The system prompt for chats without an agent. Agents use their own.",
+      "deleteAllLabel": "Delete all conversations",
+      "deleteAllBtn": "Delete all",
+      "deleteAllDescription": "Permanently deletes every conversation in your account. This can't be undone.",
       "addNew": "Add New",
       "convHistory": "Conversation History",
       "none": "None",
@@ -76,7 +90,14 @@
       "high": "High",
       "unlimited": "Unlimited",
       "default": "Default",
-      "add": "Add"
+      "add": "Add",
+      "promptActions": {
+        "select": "Select a prompt",
+        "edit": "Edit prompt",
+        "view": "View prompt",
+        "duplicate": "Duplicate prompt",
+        "delete": "Delete prompt"
+      }
     },
     "sources": {
       "title": "Here you can manage all of the source file that are available to you and those you have uploaded.",
@@ -104,7 +125,8 @@
         "never": "Never",
         "daily": "Daily",
         "weekly": "Weekly",
-        "monthly": "Monthly"
+        "monthly": "Monthly",
+        "option": "Sync: {{frequency}}"
       },
       "actions": "Actions",
       "view": "View",
@@ -115,7 +137,6 @@
         "edit": "Edit",
         "save": "Save",
         "cancel": "Cancel",
-        "saving": "Saving…",
         "saveFailed": "Could not save the page. Please try again.",
         "forbidden": "You do not have permission to edit this page.",
         "conflict": "This page changed since you opened it and has been reloaded. Your edits are below — reapply and save again.",
@@ -225,6 +246,7 @@
       "deleteWarning": "Are you sure you want to delete \"{{name}}\"?",
       "confirmDelete": "Are you sure you want to delete this file? This action cannot be undone.",
       "backToAll": "Back to all sources",
+      "back": "Back",
       "chunks": "Chunks",
       "noChunks": "No chunks found",
       "noChunksAlt": "No chunks found",
@@ -328,7 +350,6 @@
         "subtitle": "Configure how \"{{name}}\" is chunked and retrieved.",
         "subtitleGeneric": "Configure how this source is chunked and retrieved.",
         "save": "Save",
-        "saving": "Saving…",
         "readOnly": "You have view-only access to this shared source and cannot change its config.",
         "chunkingChangeHint": "You changed a chunking setting. Saving will require re-ingesting this source for it to take effect.",
         "prescreenInvalidHint": "Check the prescreen values: candidates to fetch must be at least the number of chunks, and chunks to keep must not exceed candidates to fetch.",
@@ -375,6 +396,7 @@
       "failed": "Failed",
       "skipped": "Skipped",
       "successful": "Successful",
+      "otherSeries": "Other",
       "stats": {
         "messages": "Messages",
         "tokens": "Tokens",
@@ -674,12 +696,19 @@
       "description": "Description",
       "descriptionPlaceholder": "Enter description",
       "bodyContentType": "Body Content Type",
+      "bodyTypeHint": {
+        "json": "Most common format. Use for modern REST APIs.",
+        "formUrlencoded": "Standard form submission format. Best for legacy APIs and login forms.",
+        "multipart": "For APIs requiring multipart format. File uploads not supported through LLM.",
+        "text": "Raw text data. Each field on a new line.",
+        "xml": "Structured XML format. Use for SOAP and enterprise APIs.",
+        "octetStream": "Raw binary data, base64-encoded for transmission."
+      },
       "headers": "Headers",
       "queryParameters": "Query Parameters",
       "body": "Body",
       "deleteActionWarning": "Are you sure you want to delete the action \"{{name}}\"?",
       "save": "Save",
-      "saving": "Saving...",
       "saveFailed": "Failed to save tool configuration",
       "fieldName": "Field Name",
       "fieldType": "Field Type",
@@ -705,8 +734,6 @@
         "password": "Password",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -745,7 +772,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}} is required",
+        "positiveNumber": "Must be a positive number",
+        "maxTimeout": "Maximum timeout is 300 seconds"
+      },
+      "headerValuePlaceholder": "e.g., application/json",
+      "toolIconTitle": "{{name}} icon"
     },
     "devices": {
       "label": "Devices",
@@ -796,10 +830,11 @@
         "installLink": "Don't have docsgpt-cli? Install it",
         "stepTwo": "2. Enter this code when prompted:",
         "start": "Generate code",
-        "starting": "Working…",
         "waitingForCli": "Waiting for the CLI to redeem the code…",
         "cancel": "Cancel"
-      }
+      },
+      "auditDurationValue": "{{value}} ms",
+      "fallbackName": "device"
     },
     "customModels": {
       "label": "Custom Models",
@@ -811,9 +846,7 @@
       "addTitle": "Add Custom Model",
       "editTitle": "Edit Custom Model",
       "save": "Save",
-      "saving": "Saving",
       "testConnection": "Test connection",
-      "testing": "Testing",
       "testSuccess": "Connection successful.",
       "testHintNew": "Fill in Base URL, Model ID, and API key to enable connection tests.",
       "disabledBadge": "Disabled",
@@ -914,15 +947,6 @@
         "workflows_one": "{{count}} workflow",
         "workflows_other": "{{count}} workflows"
       },
-      "relative": {
-        "now": "Just now",
-        "minutes_one": "{{count}} minute ago",
-        "minutes_other": "{{count}} minutes ago",
-        "hours_one": "{{count}} hour ago",
-        "hours_other": "{{count}} hours ago",
-        "days_one": "{{count}} day ago",
-        "days_other": "{{count}} days ago"
-      },
       "families": {
         "agents": "Agents",
         "sources": "Sources",
@@ -960,7 +984,6 @@
         "retry": "Retry",
         "cancel": "Cancel",
         "submit": "Create token",
-        "submitting": "Creating",
         "error": "Failed to create the token. Please try again."
       },
       "created": {
@@ -979,7 +1002,6 @@
         "warning": "Generate a new secret for \"{{name}}\"? The current secret stops working immediately, so anything using it must be updated. The name, scopes and restrictions stay the same.",
         "newExpiration": "New expiration",
         "submit": "Regenerate",
-        "submitting": "Regenerating…",
         "error": "Failed to regenerate the token. Please try again.",
         "done": {
           "title": "Token regenerated",
@@ -1036,7 +1058,8 @@
         "collapseDetails": "Collapse upload details",
         "dismiss": "Dismiss upload toast",
         "uploadProgress": "Upload progress {{progress}}%",
-        "clear": "Clear"
+        "clear": "Clear",
+        "ingestionFailed": "Ingestion failed."
       },
       "showAdvanced": "Show advanced options",
       "hideAdvanced": "Hide advanced options",
@@ -1102,7 +1125,6 @@
           "pickerFailed": "Failed to open file picker. Please try again.",
           "selectedFiles": "Selected Files",
           "selectFiles": "Select Files",
-          "loading": "Loading...",
           "noFilesSelected": "No files or folders selected",
           "folders": "Folders",
           "files": "Files",
@@ -1128,6 +1150,16 @@
           "folderAlt": "Folder",
           "fileAlt": "File"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "AWS Access Key ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "bucket": "Bucket Name",
+        "prefix": "Path Prefix (optional)",
+        "region": "AWS Region",
+        "endpointUrl": "Custom Endpoint URL (optional)",
+        "initialContent": "Initial content (optional)"
       }
     },
     "createAPIKey": {
@@ -1168,7 +1200,10 @@
       "apiKeyPlaceholder": "Enter API Key / OAuth",
       "addButton": "Add Tool",
       "closeButton": "Close",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "{{field}} is required",
+      "positiveNumber": "Must be a positive number",
+      "maxTimeout": "Maximum timeout is 300 seconds"
     },
     "prompts": {
       "addPrompt": "Add Prompt",
@@ -1290,15 +1325,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "Add JWT Token",
+      "label": "JWT Token",
+      "save": "Save Token"
     }
   },
   "sharedConv": {
     "subtitle": "Created with",
     "button": "Get Started with DocsGPT",
-    "meta": "DocsGPT uses GenAI, please review critical information using sources."
+    "meta": "DocsGPT uses GenAI, please review critical information using sources.",
+    "metaDescription": "Shared conversations with DocsGPT"
   },
   "convTile": {
     "share": "Share",
+    "menu": "Conversation actions",
     "delete": "Delete",
     "rename": "Rename",
     "save": "Save",
@@ -1320,7 +1362,8 @@
     "edit": {
       "update": "Update",
       "cancel": "Cancel",
-      "placeholder": "Type the updated query..."
+      "placeholder": "Type the updated query...",
+      "label": "Edit"
     },
     "sources": {
       "title": "Sources",
@@ -1341,9 +1384,13 @@
       "cancelQueuedSend": "Cancel",
       "sendBlockedByFailed": "{{names}} couldn't be processed — remove to send",
       "unsupportedType": "Not a supported file type ({{extension}})",
-      "unreadableByModel": "{{model}} can't read {{name}} — switch to a model that supports images or PDFs"
+      "unreadableByModel": "{{model}} can't read {{name}} — switch to a model that supports images or PDFs",
+      "attached": "Attachment",
+      "failed": "Failed",
+      "attachment": "Attachment"
     },
     "retry": "Retry",
+    "failedTitle": "Couldn't generate a response",
     "reasoning": "Reasoning",
     "wikiWrite": {
       "edited": "Edited wiki",
@@ -1396,7 +1443,61 @@
     "quotaExceeded": {
       "tokens": "You've used {{used}} of your {{limit}} token quota. It resets {{resetsAt}}.",
       "cost": "You've used {{used}} of your {{limit}} usage budget. It resets {{resetsAt}}."
-    }
+    },
+    "send": "Send",
+    "viewArtifact": "View artifact",
+    "jumpToSource": "Jump to source {{num}}",
+    "stopSpeaking": "Stop speaking",
+    "loadingAudio": "Loading audio",
+    "voice": {
+      "start": "Voice input",
+      "stopRecording": "Stop recording",
+      "transcribingAudio": "Transcribing audio",
+      "voice": "Voice",
+      "stop": "Stop",
+      "transcribing": "Transcribing",
+      "unavailable": "Voice input is unavailable right now.",
+      "insecure": "Voice input requires a secure connection (HTTPS or localhost).",
+      "unsupported": "Voice input is not available in this browser.",
+      "noWebAudio": "Voice input requires Web Audio support in this browser.",
+      "micBlocked": "Microphone access was blocked. Allow microphone permission and try again.",
+      "micNotFound": "No microphone was found on this device.",
+      "micBusy": "The microphone is unavailable or already in use.",
+      "micInterrupted": "Microphone access was interrupted before recording started.",
+      "micDenied": "Microphone access was denied.",
+      "transcribeFailed": "Failed to transcribe audio.",
+      "finalizeFailed": "Failed to finalize live transcription.",
+      "startFailed": "Failed to start live transcription."
+    },
+    "selectModel": "Select Model",
+    "question": {
+      "expand": "Show full message",
+      "collapse": "Show less"
+    },
+    "exportMarkdown": "Export as Markdown",
+    "feedback": {
+      "like": "Like",
+      "removeLike": "Remove like",
+      "dislike": "Dislike",
+      "removeDislike": "Remove dislike"
+    },
+    "toolApproval": {
+      "approve": "Approve",
+      "approveAlways": "Approve, don't ask again",
+      "deny": "Deny",
+      "details": "Details",
+      "denyReasonPlaceholder": "Optional reason for denying…"
+    },
+    "research": {
+      "title": "Research",
+      "planning": "Planning research…",
+      "researching": "Researching…",
+      "synthesizing": "Writing report…",
+      "complete": "Complete",
+      "researched_one": "Researched {{count}} topic",
+      "researched_other": "Researched {{count}} topics"
+    },
+    "openFile": "Open file"
   },
   "agents": {
     "title": "Agents",
@@ -1406,7 +1507,8 @@
       "unpin": "Unpin agent",
       "open": "Open",
       "remove": "Remove",
-      "draft": "Draft"
+      "draft": "Draft",
+      "actions": "Agent actions"
     },
     "description": "Discover and create custom versions of DocsGPT that combine instructions, extra knowledge, and any combination of skills",
     "newAgent": "New Agent",
@@ -1532,10 +1634,13 @@
       },
       "agentTypes": {
         "classic": "Classic",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "Research"
       },
       "labels": {
-        "defaultModel": "Default Model"
+        "defaultModel": "Default Model",
+        "name": "Name",
+        "description": "Description"
       },
       "advanced": {
         "jsonSchema": "JSON response schema",
@@ -1547,7 +1652,9 @@
         "requestLimiting": "Request limiting",
         "requestLimitingDescription": "Limit daily total requests that can be made to this agent",
         "systemPromptOverride": "Allow prompt override",
-        "systemPromptOverrideDescription": "Let v1 API callers replace this agent's system prompt"
+        "systemPromptOverrideDescription": "Let v1 API callers replace this agent's system prompt",
+        "tokenLimit": "Token limit",
+        "requestLimit": "Request limit"
       },
       "preview": {
         "publishedPreview": "Published agents can be previewed here"
@@ -1687,14 +1794,98 @@
           "oct": "Oct",
           "nov": "Nov",
           "dec": "Dec"
+        },
+        "frequencyLabel": "Frequency",
+        "dayOfWeek": "Day of the week"
+      },
+      "status": {
+        "active": "Active",
+        "paused": "Paused",
+        "completed": "Completed",
+        "cancelled": "Cancelled",
+        "success": "Success",
+        "failed": "Failed",
+        "skipped": "Skipped",
+        "running": "Running",
+        "pending": "Pending",
+        "timeout": "Timeout"
+      },
+      "trigger": {
+        "cron": "Scheduled",
+        "manual": "Manual"
+      },
+      "runDetails": {
+        "title": "Run details",
+        "status": "Status",
+        "scheduledFor": "Scheduled for",
+        "started": "Started",
+        "finished": "Finished",
+        "tokens": "Tokens",
+        "tokensValue": "{{prompt}} prompt · {{generated}} generated",
+        "trigger": "Trigger",
+        "error": "Error",
+        "errorWithType": "Error ({{type}})",
+        "output": "Output",
+        "truncated": "(truncated)"
+      },
+      "timezoneMeta": "tz: {{timezone}}",
+      "nextRunMeta": "next: {{time}}",
+      "toolCard": {
+        "cancelFailed": "Cancel failed",
+        "taskCancelled": "Scheduled task cancelled.",
+        "pendingCount_one": "{{count}} pending scheduled task",
+        "pendingCount_other": "{{count}} pending scheduled tasks",
+        "schedulingFailed": "Scheduling failed",
+        "scheduling": "Scheduling…",
+        "scheduled": "Scheduled task"
+      },
+      "cron": {
+        "daily": "Daily at {{time}}",
+        "weekly": "Weekly on {{day}} at {{time}}",
+        "monthly": "Monthly on day {{day}} at {{time}}",
+        "yearly": "Yearly on {{month}} {{day}} at {{time}}",
+        "custom": "Custom: {{expression}}",
+        "dayNames": {
+          "sun": "Sunday",
+          "mon": "Monday",
+          "tue": "Tuesday",
+          "wed": "Wednesday",
+          "thu": "Thursday",
+          "fri": "Friday",
+          "sat": "Saturday"
+        },
+        "monthNames": {
+          "jan": "January",
+          "feb": "February",
+          "mar": "March",
+          "apr": "April",
+          "may": "May",
+          "jun": "June",
+          "jul": "July",
+          "aug": "August",
+          "sep": "September",
+          "oct": "October",
+          "nov": "November",
+          "dec": "December"
         }
+      },
+      "runLog": {
+        "when": "When",
+        "details": "Details",
+        "empty": "No runs recorded for this schedule yet."
       }
     },
     "shared": {
-      "notFound": "No agent found. Please ensure the agent is shared."
+      "notFound": "No agent found. Please ensure the agent is shared.",
+      "logoAlt": "Agent logo",
+      "sharedBy": "by {{name}}",
+      "sharedOn": "Shared on {{date}}",
+      "connectedTools": "Connected Tools",
+      "toolIconTitle": "{{name}} icon"
     },
     "preview": {
-      "testMessage": "Test your agent here. Published agents can be used in conversations."
+      "testMessage": "Test your agent here. Published agents can be used in conversations.",
+      "emptyTitle": "Test your agent"
     },
     "deleteConfirmation": "Are you sure you want to delete this agent?",
     "folders": {
@@ -1712,7 +1903,10 @@
       "backToRoot": "Back",
       "currentFolder": "This folder",
       "noSubfolders": "No subfolders",
-      "noFolders": "No folders yet"
+      "openFolder": "Open folder",
+      "noFolders": "No folders yet",
+      "moveTitle": "Move \"{{name}}\" to",
+      "menuAriaLabel": "Actions for {{folderName}}"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1736,6 +1930,210 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "expressionRow": "Expression {{index}}",
+      "conditionRow": "Condition {{index}}",
+      "conditionNameRow": "Condition {{index}} name",
+      "conditionVariableRow": "Condition {{index}} variable",
+      "conditionOperatorRow": "Condition {{index}} operator",
+      "conditionValueRow": "Condition {{index}} value",
+      "undo": "Undo",
+      "undoHint": "Undo (Ctrl+Z)",
+      "redo": "Redo",
+      "redoHint": "Redo (Ctrl+Shift+Z)",
+      "removeAssignment": "Remove assignment {{index}}",
+      "removeCondition": "Remove condition {{index}}",
+      "artifacts": {
+        "previewUnsupported": "This artifact cannot be previewed",
+        "loadListFailed": "Failed to load artifacts",
+        "loadFailed": "Failed to load artifact",
+        "loading": "Loading artifacts...",
+        "inProgress": "Run in progress — artifacts appear here as nodes produce them.",
+        "empty": "No artifacts produced by this run.",
+        "back": "Back to artifacts",
+        "untitled": "Artifact {{id}}",
+        "fileKind": "file"
+      },
+      "builder": {
+        "deleteFailed": "Failed to delete workflow agent",
+        "updateWorkflowFailed": "Failed to update workflow",
+        "updateAgentFailed": "Failed to update agent",
+        "createWorkflowFailed": "Failed to create workflow",
+        "createAgentFailed": "Failed to create agent",
+        "saveFailed": "Failed to save workflow",
+        "defaultDescription": "Workflow agent: {{name}}",
+        "newWorkflow": "New Workflow",
+        "editDetails": "Edit workflow details",
+        "workflowName": "Workflow Name",
+        "workflowNamePlaceholder": "Enter workflow name",
+        "workflowDescriptionPlaceholder": "Describe what this workflow does",
+        "agentImageAlt": "Agent image",
+        "currentImage": "Current image",
+        "agentImage": "Agent Image",
+        "agentImageHint": "Image updates are included the next time you save.",
+        "done": "Done",
+        "unablePreview": "Unable to preview workflow",
+        "unableSave": "Unable to save workflow",
+        "unablePublish": "Unable to publish workflow",
+        "coreNodes": "Core Nodes",
+        "logicNodes": "Logic & Data",
+        "aiAgent": "AI Agent",
+        "setStateHint": "Modify workflow variables",
+        "conditionHint": "Conditional branching",
+        "codeHint": "Run code in a sandbox",
+        "startNode": "Start Node",
+        "endNode": "End Node",
+        "stateTitle": "Set global variables",
+        "nodeId": "Node ID",
+        "title": "Title",
+        "titlePlaceholder": "Enter node title",
+        "agentType": "Agent Type",
+        "agentTypePlaceholder": "Select agent type",
+        "model": "Model",
+        "modelPlaceholder": "Select a model",
+        "systemPrompt": "System Prompt",
+        "systemPromptPlaceholder": "System prompt for the agent",
+        "promptTemplate": "Prompt Template",
+        "promptTemplatePlaceholder": "Use {{example}} for dynamic content",
+        "outputVariable": "Output Variable",
+        "outputVariablePlaceholder": "Variable name for output",
+        "streamToUser": "Stream output to user",
+        "sources": "Sources",
+        "documents": "Documents",
+        "documentsHint": "Documents passed to this agent from uploads or upstream nodes.",
+        "filePassing": "File passing",
+        "filePassingHint": "Auto: send native when the model supports it, otherwise extract text.",
+        "structuredOutput": "Structured Output (JSON Schema)",
+        "modelNoStructuredOutput": "Selected model does not support structured output.",
+        "validSchema": "Valid JSON schema",
+        "invalidSchema": "Invalid JSON schema: {{error}}",
+        "noteContent": "Note Content",
+        "noteContentPlaceholder": "Enter note content",
+        "stateIntro": "Assign values to workflow's state variables",
+        "assignValue": "Assign value",
+        "celHint": "Use Common Expression Language to create a custom expression. Reference state by bare name (<code>query</code>), not <code>{{braced}}</code>.",
+        "learnMore": "Learn more",
+        "toVariable": "To variable",
+        "conditionIntro": "Create conditions to branch your workflow",
+        "modeSimple": "Simple",
+        "modeAdvanced": "Advanced",
+        "caseNamePlaceholder": "Case name (optional)",
+        "variablePlaceholder": "Variable",
+        "valuePlaceholder": "Value",
+        "opContains": "contains",
+        "opStartsWith": "starts",
+        "conditionPlaceholder": "Enter condition, e.g. query.contains(\"refund\")",
+        "codeIntro": "Run code in the workflow sandbox. Produced files are saved as artifacts.",
+        "inputFiles": "Input files",
+        "inputFilesHint": "Artifacts/upstream refs staged as files in the sandbox (one becomes inputs/<name>).",
+        "timeout": "Timeout (seconds)",
+        "optional": "Optional",
+        "cannotDeleteStart": "Cannot Delete Start Node",
+        "deleteNode": "Delete Node",
+        "deleteConfirm": "Are you sure you want to delete \"{{name}}\"?",
+        "deleteConfirmUnnamed": "Are you sure you want to delete \"this workflow agent\"?"
+      },
+      "validation": {
+        "nameRequired": "Workflow name is required",
+        "oneStart": "Workflow must have exactly one start node",
+        "needEnd": "Workflow must have at least one end node",
+        "needAgent": "Workflow must have at least one AI agent node",
+        "agentModel": "Agent \"{{name}}\" must have a model selected",
+        "agentStructuredOutput": "Agent \"{{name}}\" selected model does not support structured output",
+        "agentSchema": "Agent \"{{name}}\" JSON schema {{error}}",
+        "startConnected": "Start node must be connected to another node",
+        "endIncoming": "End node \"{{name}}\" must have an incoming connection",
+        "edgeSource": "Edge references non-existent source node",
+        "edgeTarget": "Edge references non-existent target node",
+        "conditionNeedsCase": "Condition \"{{name}}\" must have at least one case with an expression",
+        "conditionCaseNoHandle": "Condition \"{{name}}\" has a case without a branch handle",
+        "conditionDuplicateHandle": "Condition \"{{name}}\" has duplicate case handle \"{{handle}}\"",
+        "conditionTwoOutgoing": "Condition \"{{name}}\" must have at least 2 outgoing connections",
+        "conditionEdgeNoHandle": "Condition \"{{name}}\" has a connection without a branch handle",
+        "conditionUnknownBranch": "Condition \"{{name}}\" has a connection from unknown branch \"{{handle}}\"",
+        "conditionMultipleEdges": "Condition \"{{name}}\" has multiple connections from branch \"{{handle}}\"",
+        "conditionNeedsElse": "Condition \"{{name}}\" must have an Else branch",
+        "caseNoConnection": "Condition \"{{name}}\" case \"{{handle}}\" has an expression but no branch connection",
+        "caseNoExpression": "Condition \"{{name}}\" case \"{{handle}}\" has a branch connection but no expression",
+        "caseNoVariable": "Condition \"{{name}}\" case \"{{handle}}\" must specify a variable in Simple mode",
+        "branchReachEnd": "Branch \"{{handle}}\" of condition \"{{name}}\" must eventually reach an end node",
+        "codeRequired": "Code node \"{{name}}\" must have code to run",
+        "codeSchema": "Code node \"{{name}}\" JSON schema {{error}}"
+      },
+      "schema": {
+        "notObject": "must be a valid JSON object",
+        "missingType": "must include either a \"type\" or \"schema\" field",
+        "invalidJson": "must be valid JSON"
+      },
+      "filePassing": {
+        "auto": "Auto",
+        "native": "Native",
+        "extract": "Extract"
+      },
+      "mobileBlocker": {
+        "title": "Desktop Required",
+        "body": "The Workflow Builder requires a larger screen for the best experience. Please open this page on a desktop or laptop computer."
+      },
+      "nodes": {
+        "start": "Start",
+        "startHint": "Entry point of the workflow",
+        "end": "End",
+        "endHint": "Workflow completion",
+        "agent": "Agent",
+        "note": "Note",
+        "condition": "If / Else",
+        "code": "Code",
+        "setState": "Set State",
+        "output": "Output: {{variable}}",
+        "noCode": "No code yet",
+        "modeSimple": "simple",
+        "modeAdvanced": "advanced",
+        "if": "If",
+        "elseIf": "Else if",
+        "else": "Else",
+        "operationCount_one": "{{count}} operation",
+        "operationCount_other": "{{count}} operations",
+        "variableCount_one": "{{count}} variable",
+        "variableCount_other": "{{count}} variables",
+        "variableTitle": "Variable: {{name}}",
+        "valueTitle": "Value: {{value}}"
+      },
+      "preview": {
+        "executionDetails": "Execution Details",
+        "stepCount_one": "({{count}} step)",
+        "stepCount_other": "({{count}} steps)",
+        "outputLabel": "Output:",
+        "errorLabel": "Error:",
+        "artifacts": "Artifacts",
+        "minimapHeading": "Workflow",
+        "emptyTitle": "Test the workflow",
+        "unsavedDraftAttachments": "Save the workflow before attaching documents in Preview."
+      },
+      "documents": {
+        "modeAll": "All input docs",
+        "modeNone": "None",
+        "modeChoose": "Choose…",
+        "selectPlaceholder": "Select documents...",
+        "searchPlaceholder": "Search variables...",
+        "empty": "No upstream documents",
+        "refPlaceholder": "Add ref (e.g. A1)"
+      },
+      "variables": {
+        "globalContext": "Global context",
+        "workflowInput": "Workflow input",
+        "searchPlaceholder": "Search variables...",
+        "empty": "No variables found",
+        "addContext": "Add context"
+      }
+    },
+    "typeModal": {
+      "title": "Create New Agent",
+      "description": "Choose the type of agent you want to create",
+      "classicTitle": "Classic Agent",
+      "classicDescription": "Create a standard AI agent with a single model, tools, and knowledge sources",
+      "workflowTitle": "Workflow Agent",
+      "workflowDescription": "Design complex multi-step workflows with different models, conditional logic, and state management"
     }
   },
   "components": {
@@ -1744,7 +2142,40 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "Image preview",
+      "remove": "Remove file"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "Todo List",
+        "note": "Note",
+        "memory": "Memory"
+      },
+      "fallbackTitle": "Artifact",
+      "todo": {
+        "done": "{{count}} done",
+        "open": "{{count}} open",
+        "empty": "No todos yet"
+      },
+      "note": {
+        "lines_one": "{{count}} line",
+        "lines_other": "{{count}} lines",
+        "empty": "Empty note"
+      },
+      "notFound": "Artifact not found",
+      "loadFailed": "Failed to load artifact",
+      "fetchFailed": "Failed to fetch artifact",
+      "preview": "Artifact preview",
+      "download": "Download",
+      "restore": "Restore",
+      "version": "Version {{version}}",
+      "versionCurrent": "Version {{version}} (current)",
+      "downloadFailed": "Download failed",
+      "restoreFailed": "Restore failed"
+    },
+    "profile": {
+      "avatarAlt": "User avatar"
     }
   },
   "pageNotFound": {
@@ -1760,7 +2191,14 @@
     "size": "Size",
     "myFiles": "My Files",
     "sharedWithMe": "Shared with Me",
-    "loadingMore": "Loading more files..."
+    "loadingMore": "Loading more files...",
+    "myDrive": "My Drive",
+    "spaces": "Spaces",
+    "root": "Root",
+    "shared": "Shared",
+    "connectTo": "Connect to {{provider}}",
+    "sessionExpiredFor": "Session expired. Please reconnect to {{provider}}.",
+    "selectFilesFrom": "Select Files from {{provider}}"
   },
   "actionButtons": {
     "openNewChat": "Open New Chat",
@@ -1771,7 +2209,13 @@
     "viewCode": "View Code",
     "decreaseZoom": "Decrease zoom",
     "resetZoom": "Reset zoom",
-    "increaseZoom": "Increase zoom"
+    "increaseZoom": "Increase zoom",
+    "download": "Download",
+    "downloadAs": "Download as {{format}}",
+    "code": "Code",
+    "loading": "Loading diagram...",
+    "codeTitle": "Mermaid Code",
+    "renderFailed": "Failed to render diagram: {{message}}"
   },
   "navigation": {
     "agents": "Agents",
@@ -1784,6 +2228,13 @@
         "insights": "Insights",
         "administration": "Administration"
       }
+    },
+    "openSidebar": "Open sidebar",
+    "closeSidebar": "Close sidebar",
+    "social": {
+      "discord": "Join Discord community",
+      "x": "Follow us on X",
+      "github": "View on GitHub"
     }
   },
   "teams": {
@@ -1794,7 +2245,8 @@
       "roleAdmin": "Admin",
       "roleMember": "Member",
       "manageTeam": "Manage team",
-      "createTeam": "Create team"
+      "createTeam": "Create team",
+      "logoAlt": "DocsGPT logo"
     }
   },
   "notification": {
@@ -1813,6 +2265,13 @@
       "usage": "Usage",
       "quotas": "Quotas",
       "audit": "Activity"
+    },
+    "quotas": {
+      "unpriced": {
+        "title": "Models without a price are invisible to cost limits",
+        "body": "These were used this {{period}} and recorded at $0: {{models}}. Use a token limit for them, or declare their rates in the model catalog.",
+        "model": "{{model}} ({{tokens}} tokens)"
+      }
     }
   }
 }
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index e5d9617c..6fab7ccd 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -8,6 +8,7 @@
   "sourceDocs": "Fuente",
   "none": "Ninguno",
   "loading": "Cargando...",
+  "retry": "Reintentar",
   "cancel": "Cancelar",
   "help": "Asistencia",
   "emailUs": "Envíanos un correo",
@@ -23,7 +24,10 @@
     "sharedTitle": "Compartido contigo",
     "sharedBody": "Se compartió con tu equipo: {{type}} «{{name}}» ({{access}})",
     "sharedBodyNoName": "Se compartió con tu equipo: {{type}} ({{access}})",
-    "dismiss": "Descartar"
+    "dismiss": "Descartar",
+    "toolApprovalTitle": "Se requiere aprobar una herramienta",
+    "toolApprovalReview": "Revisar",
+    "toolApprovalFallbackName": "Conversación"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "Configuración",
     "general": {
       "label": "General",
-      "selectTheme": "Seleccionar Tema",
+      "subtitle": "Elige el aspecto de DocsGPT, el idioma que usa y el prompt de tus chats.",
+      "sections": {
+        "appearance": "Apariencia",
+        "chat": "Chat",
+        "dangerZone": "Zona de peligro"
+      },
+      "theme": "Tema",
+      "themeDescription": "Interfaz clara u oscura.",
+      "language": "Idioma",
+      "languageDescription": "Idioma de los menús y las etiquetas.",
       "light": "Claro",
       "dark": "Oscuro",
-      "selectLanguage": "Seleccionar Idioma",
       "chunks": "Fragmentos procesados por consulta",
       "prompt": "Prompt Activo",
+      "promptDescription": "El prompt del sistema para los chats sin agente. Los agentes usan el suyo.",
       "deleteAllLabel": "Eliminar todas las conversaciones",
       "deleteAllBtn": "Eliminar todo",
+      "deleteAllDescription": "Elimina de forma permanente todas las conversaciones de tu cuenta. No se puede deshacer.",
       "addNew": "Añadir Nuevo",
       "convHistory": "Historial de conversaciones",
       "none": "Ninguno",
@@ -72,7 +86,14 @@
       "high": "Alto",
       "unlimited": "Ilimitado",
       "default": "Predeterminado",
-      "add": "Añadir"
+      "add": "Añadir",
+      "promptActions": {
+        "select": "Selecciona un prompt",
+        "edit": "Editar prompt",
+        "view": "Ver prompt",
+        "duplicate": "Duplicar prompt",
+        "delete": "Eliminar prompt"
+      }
     },
     "sources": {
       "title": "Aquí puedes gestionar todos los archivos fuente que están disponibles para ti y los que has subido.",
@@ -111,7 +132,6 @@
         "edit": "Editar",
         "save": "Guardar",
         "cancel": "Cancelar",
-        "saving": "Guardando…",
         "saveFailed": "No se pudo guardar la página. Inténtalo de nuevo.",
         "forbidden": "No tienes permiso para editar esta página.",
         "conflict": "Esta página cambió desde que la abriste y se ha recargado. Tus ediciones están abajo — vuelve a aplicarlas y guarda de nuevo.",
@@ -221,6 +241,7 @@
       "deleteWarning": "¿Estás seguro de que deseas eliminar \"{{name}}\"?",
       "confirmDelete": "¿Estás seguro de que deseas eliminar este archivo? Esta acción no se puede deshacer.",
       "backToAll": "Volver a todas las fuentes",
+      "back": "Volver",
       "chunks": "Fragmentos",
       "noChunks": "No se encontraron fragmentos",
       "noChunksAlt": "No se encontraron fragmentos",
@@ -324,7 +345,6 @@
         "subtitle": "Configura cómo se fragmenta y recupera \"{{name}}\".",
         "subtitleGeneric": "Configura cómo se fragmenta y recupera esta fuente.",
         "save": "Guardar",
-        "saving": "Guardando…",
         "readOnly": "Tienes acceso de solo lectura a esta fuente compartida y no puedes cambiar su configuración.",
         "chunkingChangeHint": "Cambiaste un ajuste de fragmentación. Al guardar será necesario reindexar esta fuente para que surta efecto.",
         "prescreenInvalidHint": "Revisa los valores de preselección: los candidatos a obtener deben ser al menos el número de fragmentos, y los fragmentos a conservar no deben superar los candidatos a obtener.",
@@ -371,6 +391,7 @@
       "failed": "Fallidas",
       "skipped": "Omitidas",
       "successful": "Exitosas",
+      "otherSeries": "Otros",
       "stats": {
         "messages": "Mensajes",
         "tokens": "Tokens",
@@ -669,12 +690,19 @@
       "description": "Descripción",
       "descriptionPlaceholder": "Ingresa descripción",
       "bodyContentType": "Tipo de contenido del cuerpo",
+      "bodyTypeHint": {
+        "json": "El formato más común. Úsalo para APIs REST modernas.",
+        "formUrlencoded": "Formato estándar de envío de formularios. Ideal para APIs heredadas y formularios de inicio de sesión.",
+        "multipart": "Para APIs que requieren formato multipart. No se admite la subida de archivos a través del LLM.",
+        "text": "Datos de texto sin formato. Cada campo en una línea nueva.",
+        "xml": "Formato XML estructurado. Úsalo para APIs SOAP y empresariales.",
+        "octetStream": "Datos binarios sin procesar, codificados en base64 para su transmisión."
+      },
       "headers": "Encabezados",
       "queryParameters": "Parámetros de Consulta",
       "body": "Cuerpo",
       "deleteActionWarning": "¿Estás seguro de que deseas eliminar la acción \"{{name}}\"?",
       "save": "Guardar",
-      "saving": "Guardando...",
       "saveFailed": "No se pudo guardar la configuración de la herramienta",
       "fieldName": "Nombre del campo",
       "fieldType": "Tipo de campo",
@@ -700,8 +728,6 @@
         "password": "Contraseña",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -740,7 +766,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}} es obligatorio",
+        "positiveNumber": "Debe ser un número positivo",
+        "maxTimeout": "El tiempo de espera máximo es de 300 segundos"
+      },
+      "headerValuePlaceholder": "p. ej., application/json",
+      "toolIconTitle": "Icono de {{name}}"
     },
     "devices": {
       "label": "Dispositivos",
@@ -791,10 +824,11 @@
         "installLink": "¿No tienes docsgpt-cli? Instálalo",
         "stepTwo": "2. Introduce este código cuando se te pida:",
         "start": "Generar código",
-        "starting": "Procesando…",
         "waitingForCli": "Esperando a que la CLI canjee el código…",
         "cancel": "Cancelar"
-      }
+      },
+      "auditDurationValue": "{{value}} ms",
+      "fallbackName": "dispositivo"
     },
     "customModels": {
       "label": "Modelos personalizados",
@@ -806,9 +840,7 @@
       "addTitle": "Añadir modelo personalizado",
       "editTitle": "Editar modelo personalizado",
       "save": "Guardar",
-      "saving": "Guardando",
       "testConnection": "Probar conexión",
-      "testing": "Probando",
       "testSuccess": "Conexión correcta.",
       "testHintNew": "Completa URL base, ID de modelo y clave API para habilitar las pruebas de conexión.",
       "disabledBadge": "Deshabilitado",
@@ -909,15 +941,6 @@
         "workflows_one": "{{count}} flujo de trabajo",
         "workflows_other": "{{count}} flujos de trabajo"
       },
-      "relative": {
-        "now": "Ahora mismo",
-        "minutes_one": "Hace {{count}} minuto",
-        "minutes_other": "Hace {{count}} minutos",
-        "hours_one": "Hace {{count}} hora",
-        "hours_other": "Hace {{count}} horas",
-        "days_one": "Hace {{count}} día",
-        "days_other": "Hace {{count}} días"
-      },
       "families": {
         "agents": "Agentes",
         "sources": "Fuentes",
@@ -955,7 +978,6 @@
         "retry": "Reintentar",
         "cancel": "Cancelar",
         "submit": "Crear token",
-        "submitting": "Creando",
         "error": "No se pudo crear el token. Inténtalo de nuevo."
       },
       "created": {
@@ -974,7 +996,6 @@
         "warning": "¿Generar un nuevo secreto para \"{{name}}\"? El secreto actual deja de funcionar de inmediato, así que todo lo que lo use debe actualizarse. El nombre, los permisos y las restricciones no cambian.",
         "newExpiration": "Nueva caducidad",
         "submit": "Regenerar",
-        "submitting": "Regenerando…",
         "error": "No se pudo regenerar el token. Inténtalo de nuevo.",
         "done": {
           "title": "Token regenerado",
@@ -1031,7 +1052,8 @@
         "collapseDetails": "Contraer detalles de subida",
         "dismiss": "Descartar notificación de subida",
         "uploadProgress": "Progreso de subida {{progress}}%",
-        "clear": "Limpiar"
+        "clear": "Limpiar",
+        "ingestionFailed": "La ingesta falló."
       },
       "showAdvanced": "Mostrar opciones avanzadas",
       "hideAdvanced": "Ocultar opciones avanzadas",
@@ -1097,7 +1119,6 @@
           "pickerFailed": "Error al abrir el selector de archivos. Por favor, inténtelo de nuevo.",
           "selectedFiles": "Archivos Seleccionados",
           "selectFiles": "Seleccionar Archivos",
-          "loading": "Cargando...",
           "noFilesSelected": "No hay archivos o carpetas seleccionados",
           "folders": "Carpetas",
           "files": "Archivos",
@@ -1123,6 +1144,16 @@
           "folderAlt": "Carpeta",
           "fileAlt": "Archivo"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "ID de clave de acceso de AWS",
+        "awsSecretAccessKey": "Clave de acceso secreta de AWS",
+        "bucket": "Nombre del bucket",
+        "prefix": "Prefijo de ruta (opcional)",
+        "region": "Región de AWS",
+        "endpointUrl": "URL de endpoint personalizada (opcional)",
+        "initialContent": "Contenido inicial (opcional)"
       }
     },
     "createAPIKey": {
@@ -1163,7 +1194,10 @@
       "apiKeyPlaceholder": "Ingrese la Clave API / OAuth",
       "addButton": "Agregar Herramienta",
       "closeButton": "Cerrar",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "{{field}} es obligatorio",
+      "positiveNumber": "Debe ser un número positivo",
+      "maxTimeout": "El tiempo de espera máximo es de 300 segundos"
     },
     "prompts": {
       "addPrompt": "Agregar Prompt",
@@ -1285,15 +1319,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "Añadir token JWT",
+      "label": "Token JWT",
+      "save": "Guardar token"
     }
   },
   "sharedConv": {
     "subtitle": "Creado con",
     "button": "Comienza con DocsGPT",
-    "meta": "DocsGPT utiliza GenAI, por favor revisa la información crítica utilizando fuentes."
+    "meta": "DocsGPT utiliza GenAI, por favor revisa la información crítica utilizando fuentes.",
+    "metaDescription": "Conversaciones compartidas con DocsGPT"
   },
   "convTile": {
     "share": "Compartir",
+    "menu": "Acciones de la conversación",
     "delete": "Eliminar",
     "rename": "Renombrar",
     "save": "Guardar",
@@ -1315,7 +1356,8 @@
     "edit": {
       "update": "Actualizar",
       "cancel": "Cancelar",
-      "placeholder": "Ingrese la consulta actualizada..."
+      "placeholder": "Ingrese la consulta actualizada...",
+      "label": "Editar"
     },
     "sources": {
       "title": "Fuentes",
@@ -1330,9 +1372,13 @@
     },
     "attachments": {
       "attach": "Adjuntar",
-      "remove": "Eliminar adjunto"
+      "remove": "Eliminar adjunto",
+      "attached": "Adjunto",
+      "failed": "Error",
+      "attachment": "Adjunto"
     },
     "retry": "Reintentar",
+    "failedTitle": "No se pudo generar una respuesta",
     "reasoning": "Razonamiento",
     "wikiWrite": {
       "edited": "Wiki editada",
@@ -1385,7 +1431,56 @@
     "quotaExceeded": {
       "tokens": "Has usado {{used}} de tu cuota de {{limit}} tokens. Se restablece el {{resetsAt}}.",
       "cost": "Has usado {{used}} de tu presupuesto de uso de {{limit}}. Se restablece el {{resetsAt}}."
-    }
+    },
+    "voice": {
+      "start": "Entrada de voz",
+      "stopRecording": "Detener grabación",
+      "transcribingAudio": "Transcribiendo audio",
+      "voice": "Voz",
+      "stop": "Detener",
+      "transcribing": "Transcribiendo",
+      "unavailable": "La entrada de voz no está disponible en este momento.",
+      "insecure": "La entrada de voz requiere una conexión segura (HTTPS o localhost).",
+      "unsupported": "La entrada de voz no está disponible en este navegador.",
+      "noWebAudio": "La entrada de voz requiere compatibilidad con Web Audio en este navegador.",
+      "micBlocked": "Se bloqueó el acceso al micrófono. Permite el acceso al micrófono e inténtalo de nuevo.",
+      "micNotFound": "No se encontró ningún micrófono en este dispositivo.",
+      "micBusy": "El micrófono no está disponible o ya está en uso.",
+      "micInterrupted": "El acceso al micrófono se interrumpió antes de empezar a grabar.",
+      "micDenied": "Se denegó el acceso al micrófono.",
+      "transcribeFailed": "No se pudo transcribir el audio.",
+      "finalizeFailed": "No se pudo finalizar la transcripción en vivo.",
+      "startFailed": "No se pudo iniciar la transcripción en vivo."
+    },
+    "selectModel": "Seleccionar modelo",
+    "question": {
+      "expand": "Mostrar mensaje completo",
+      "collapse": "Mostrar menos"
+    },
+    "exportMarkdown": "Exportar como Markdown",
+    "feedback": {
+      "like": "Me gusta",
+      "removeLike": "Quitar me gusta",
+      "dislike": "No me gusta",
+      "removeDislike": "Quitar no me gusta"
+    },
+    "toolApproval": {
+      "approve": "Aprobar",
+      "approveAlways": "Aprobar y no volver a preguntar",
+      "deny": "Denegar",
+      "details": "Detalles",
+      "denyReasonPlaceholder": "Motivo del rechazo (opcional)…"
+    },
+    "research": {
+      "title": "Investigación",
+      "planning": "Planificando la investigación…",
+      "researching": "Investigando…",
+      "synthesizing": "Redactando el informe…",
+      "complete": "Completado",
+      "researched_one": "{{count}} tema investigado",
+      "researched_other": "{{count}} temas investigados"
+    },
+    "openFile": "Abrir archivo"
   },
   "agents": {
     "title": "Agentes",
@@ -1395,7 +1490,8 @@
       "unpin": "Dejar de fijar agente",
       "open": "Abrir",
       "remove": "Quitar",
-      "draft": "Borrador"
+      "draft": "Borrador",
+      "actions": "Acciones del agente"
     },
     "description": "Descubre y crea versiones personalizadas de DocsGPT que combinan instrucciones, conocimiento adicional y cualquier combinación de habilidades",
     "newAgent": "Nuevo Agente",
@@ -1521,7 +1617,8 @@
       },
       "agentTypes": {
         "classic": "Clásico",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "Investigación"
       },
       "labels": {
         "defaultModel": "Modelo Predeterminado"
@@ -1677,13 +1774,95 @@
           "nov": "Nov",
           "dec": "Dic"
         }
+      },
+      "status": {
+        "active": "Activa",
+        "paused": "En pausa",
+        "completed": "Completada",
+        "cancelled": "Cancelada",
+        "success": "Correcta",
+        "failed": "Fallida",
+        "skipped": "Omitida",
+        "running": "En curso",
+        "pending": "Pendiente",
+        "timeout": "Tiempo agotado"
+      },
+      "trigger": {
+        "cron": "Programada",
+        "manual": "Manual"
+      },
+      "runDetails": {
+        "title": "Detalles de la ejecución",
+        "status": "Estado",
+        "scheduledFor": "Programada para",
+        "started": "Iniciada",
+        "finished": "Finalizada",
+        "tokens": "Tokens",
+        "tokensValue": "{{prompt}} de prompt · {{generated}} generados",
+        "trigger": "Origen",
+        "error": "Error",
+        "errorWithType": "Error ({{type}})",
+        "output": "Salida",
+        "truncated": "(truncada)"
+      },
+      "timezoneMeta": "zona horaria: {{timezone}}",
+      "nextRunMeta": "próxima: {{time}}",
+      "toolCard": {
+        "cancelFailed": "No se pudo cancelar",
+        "taskCancelled": "Tarea programada cancelada.",
+        "pendingCount_one": "{{count}} tarea programada pendiente",
+        "pendingCount_other": "{{count}} tareas programadas pendientes",
+        "schedulingFailed": "No se pudo programar",
+        "scheduling": "Programando…",
+        "scheduled": "Tarea programada"
+      },
+      "cron": {
+        "daily": "Diariamente a las {{time}}",
+        "weekly": "Semanalmente el {{day}} a las {{time}}",
+        "monthly": "Mensualmente el día {{day}} a las {{time}}",
+        "yearly": "Anualmente el {{day}} de {{month}} a las {{time}}",
+        "custom": "Personalizado: {{expression}}",
+        "dayNames": {
+          "sun": "domingo",
+          "mon": "lunes",
+          "tue": "martes",
+          "wed": "miércoles",
+          "thu": "jueves",
+          "fri": "viernes",
+          "sat": "sábado"
+        },
+        "monthNames": {
+          "jan": "enero",
+          "feb": "febrero",
+          "mar": "marzo",
+          "apr": "abril",
+          "may": "mayo",
+          "jun": "junio",
+          "jul": "julio",
+          "aug": "agosto",
+          "sep": "septiembre",
+          "oct": "octubre",
+          "nov": "noviembre",
+          "dec": "diciembre"
+        }
+      },
+      "runLog": {
+        "when": "Cuándo",
+        "details": "Detalles",
+        "empty": "Aún no hay ejecuciones registradas para esta programación."
       }
     },
     "shared": {
-      "notFound": "No se encontró el agente. Asegúrate de que el agente esté compartido."
+      "notFound": "No se encontró el agente. Asegúrate de que el agente esté compartido.",
+      "logoAlt": "Logotipo del agente",
+      "sharedBy": "por {{name}}",
+      "sharedOn": "Compartido el {{date}}",
+      "connectedTools": "Herramientas conectadas",
+      "toolIconTitle": "Icono de {{name}}"
     },
     "preview": {
-      "testMessage": "Prueba tu agente aquí. Los agentes publicados se pueden usar en conversaciones."
+      "testMessage": "Prueba tu agente aquí. Los agentes publicados se pueden usar en conversaciones.",
+      "emptyTitle": "Prueba tu agente"
     },
     "deleteConfirmation": "¿Estás seguro de que quieres eliminar este agente?",
     "folders": {
@@ -1701,7 +1880,9 @@
       "backToRoot": "Volver",
       "currentFolder": "Esta carpeta",
       "noSubfolders": "Sin subcarpetas",
-      "noFolders": "No hay carpetas todavía"
+      "openFolder": "Abrir carpeta",
+      "noFolders": "No hay carpetas todavía",
+      "menuAriaLabel": "Acciones para {{folderName}}"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1725,6 +1906,198 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "Este artefacto no se puede previsualizar",
+        "loadListFailed": "No se pudieron cargar los artefactos",
+        "loadFailed": "No se pudo cargar el artefacto",
+        "loading": "Cargando artefactos...",
+        "inProgress": "Ejecución en curso: los artefactos aparecen aquí a medida que los nodos los generan.",
+        "empty": "Esta ejecución no generó artefactos.",
+        "back": "Volver a los artefactos",
+        "untitled": "Artefacto {{id}}",
+        "fileKind": "archivo"
+      },
+      "builder": {
+        "deleteFailed": "No se pudo eliminar el agente de flujo de trabajo",
+        "updateWorkflowFailed": "No se pudo actualizar el flujo de trabajo",
+        "updateAgentFailed": "No se pudo actualizar el agente",
+        "createWorkflowFailed": "No se pudo crear el flujo de trabajo",
+        "createAgentFailed": "No se pudo crear el agente",
+        "saveFailed": "No se pudo guardar el flujo de trabajo",
+        "defaultDescription": "Agente de flujo de trabajo: {{name}}",
+        "newWorkflow": "Nuevo flujo de trabajo",
+        "editDetails": "Editar detalles del flujo de trabajo",
+        "workflowName": "Nombre del flujo de trabajo",
+        "workflowNamePlaceholder": "Introduce el nombre del flujo de trabajo",
+        "workflowDescriptionPlaceholder": "Describe qué hace este flujo de trabajo",
+        "agentImageAlt": "Imagen del agente",
+        "currentImage": "Imagen actual",
+        "agentImage": "Imagen del agente",
+        "agentImageHint": "Los cambios de imagen se incluyen la próxima vez que guardes.",
+        "done": "Listo",
+        "unablePreview": "No se puede previsualizar el flujo de trabajo",
+        "unableSave": "No se puede guardar el flujo de trabajo",
+        "unablePublish": "No se puede publicar el flujo de trabajo",
+        "coreNodes": "Nodos principales",
+        "logicNodes": "Lógica y datos",
+        "aiAgent": "Agente de IA",
+        "setStateHint": "Modifica las variables del flujo de trabajo",
+        "conditionHint": "Ramificación condicional",
+        "codeHint": "Ejecuta código en un entorno aislado",
+        "startNode": "Nodo de inicio",
+        "endNode": "Nodo final",
+        "stateTitle": "Establecer variables globales",
+        "nodeId": "ID del nodo",
+        "title": "Título",
+        "titlePlaceholder": "Introduce el título del nodo",
+        "agentType": "Tipo de agente",
+        "agentTypePlaceholder": "Selecciona el tipo de agente",
+        "model": "Modelo",
+        "modelPlaceholder": "Selecciona un modelo",
+        "systemPrompt": "Prompt del sistema",
+        "systemPromptPlaceholder": "Prompt del sistema para el agente",
+        "promptTemplate": "Plantilla de prompt",
+        "promptTemplatePlaceholder": "Usa {{example}} para contenido dinámico",
+        "outputVariable": "Variable de salida",
+        "outputVariablePlaceholder": "Nombre de la variable de salida",
+        "streamToUser": "Transmitir la salida al usuario",
+        "sources": "Fuentes",
+        "documents": "Documentos",
+        "documentsHint": "Documentos que se pasan a este agente desde cargas o nodos anteriores.",
+        "filePassing": "Paso de archivos",
+        "filePassingHint": "Auto: envía el archivo nativo si el modelo lo admite; si no, extrae el texto.",
+        "structuredOutput": "Salida estructurada (esquema JSON)",
+        "modelNoStructuredOutput": "El modelo seleccionado no admite salida estructurada.",
+        "validSchema": "Esquema JSON válido",
+        "invalidSchema": "Esquema JSON no válido: {{error}}",
+        "noteContent": "Contenido de la nota",
+        "noteContentPlaceholder": "Introduce el contenido de la nota",
+        "stateIntro": "Asigna valores a las variables de estado del flujo de trabajo",
+        "assignValue": "Asignar valor",
+        "celHint": "Usa Common Expression Language para crear una expresión personalizada. Haz referencia al estado por su nombre sin llaves (<code>query</code>), no <code>{{braced}}</code>.",
+        "learnMore": "Más información",
+        "toVariable": "A la variable",
+        "conditionIntro": "Crea condiciones para ramificar tu flujo de trabajo",
+        "modeSimple": "Simple",
+        "modeAdvanced": "Avanzado",
+        "caseNamePlaceholder": "Nombre del caso (opcional)",
+        "variablePlaceholder": "Variable",
+        "valuePlaceholder": "Valor",
+        "opContains": "contiene",
+        "opStartsWith": "empieza",
+        "conditionPlaceholder": "Introduce una condición, p. ej. query.contains(\"refund\")",
+        "codeIntro": "Ejecuta código en el entorno aislado del flujo de trabajo. Los archivos generados se guardan como artefactos.",
+        "inputFiles": "Archivos de entrada",
+        "inputFilesHint": "Artefactos o referencias anteriores que se colocan como archivos en el entorno aislado (cada uno pasa a ser inputs/<name>).",
+        "timeout": "Tiempo límite (segundos)",
+        "optional": "Opcional",
+        "cannotDeleteStart": "No se puede eliminar el nodo de inicio",
+        "deleteNode": "Eliminar nodo",
+        "deleteConfirm": "¿Seguro que quieres eliminar «{{name}}»?",
+        "deleteConfirmUnnamed": "¿Seguro que quieres eliminar este agente de flujo de trabajo?"
+      },
+      "validation": {
+        "nameRequired": "El nombre del flujo de trabajo es obligatorio",
+        "oneStart": "El flujo de trabajo debe tener exactamente un nodo de inicio",
+        "needEnd": "El flujo de trabajo debe tener al menos un nodo final",
+        "needAgent": "El flujo de trabajo debe tener al menos un nodo de agente de IA",
+        "agentModel": "El agente «{{name}}» debe tener un modelo seleccionado",
+        "agentStructuredOutput": "El modelo seleccionado para el agente «{{name}}» no admite salida estructurada",
+        "agentSchema": "Esquema JSON del agente «{{name}}»: {{error}}",
+        "startConnected": "El nodo de inicio debe estar conectado a otro nodo",
+        "endIncoming": "El nodo final «{{name}}» debe tener una conexión entrante",
+        "edgeSource": "Una conexión hace referencia a un nodo de origen inexistente",
+        "edgeTarget": "Una conexión hace referencia a un nodo de destino inexistente",
+        "conditionNeedsCase": "La condición «{{name}}» debe tener al menos un caso con una expresión",
+        "conditionCaseNoHandle": "La condición «{{name}}» tiene un caso sin identificador de rama",
+        "conditionDuplicateHandle": "La condición «{{name}}» tiene el identificador de caso duplicado «{{handle}}»",
+        "conditionTwoOutgoing": "La condición «{{name}}» debe tener al menos 2 conexiones salientes",
+        "conditionEdgeNoHandle": "La condición «{{name}}» tiene una conexión sin identificador de rama",
+        "conditionUnknownBranch": "La condición «{{name}}» tiene una conexión desde la rama desconocida «{{handle}}»",
+        "conditionMultipleEdges": "La condición «{{name}}» tiene varias conexiones desde la rama «{{handle}}»",
+        "conditionNeedsElse": "La condición «{{name}}» debe tener una rama Si no",
+        "caseNoConnection": "En la condición «{{name}}», el caso «{{handle}}» tiene una expresión pero no una conexión de rama",
+        "caseNoExpression": "En la condición «{{name}}», el caso «{{handle}}» tiene una conexión de rama pero no una expresión",
+        "caseNoVariable": "En la condición «{{name}}», el caso «{{handle}}» debe indicar una variable en el modo simple",
+        "branchReachEnd": "La rama «{{handle}}» de la condición «{{name}}» debe llegar finalmente a un nodo final",
+        "codeRequired": "El nodo de código «{{name}}» debe tener código que ejecutar",
+        "codeSchema": "Esquema JSON del nodo de código «{{name}}»: {{error}}"
+      },
+      "schema": {
+        "notObject": "debe ser un objeto JSON válido",
+        "missingType": "debe incluir un campo \"type\" o \"schema\"",
+        "invalidJson": "debe ser JSON válido"
+      },
+      "filePassing": {
+        "auto": "Automático",
+        "native": "Nativo",
+        "extract": "Extraer"
+      },
+      "mobileBlocker": {
+        "title": "Se requiere un ordenador",
+        "body": "El creador de flujos de trabajo necesita una pantalla más grande para ofrecer la mejor experiencia. Abre esta página en un ordenador de sobremesa o portátil."
+      },
+      "nodes": {
+        "start": "Inicio",
+        "startHint": "Punto de entrada del flujo de trabajo",
+        "end": "Fin",
+        "endHint": "Finalización del flujo de trabajo",
+        "agent": "Agente",
+        "note": "Nota",
+        "condition": "Si / Si no",
+        "code": "Código",
+        "setState": "Establecer estado",
+        "output": "Salida: {{variable}}",
+        "noCode": "Aún no hay código",
+        "modeSimple": "simple",
+        "modeAdvanced": "avanzado",
+        "if": "Si",
+        "elseIf": "Si no, si",
+        "else": "Si no",
+        "operationCount_one": "{{count}} operación",
+        "operationCount_other": "{{count}} operaciones",
+        "variableCount_one": "{{count}} variable",
+        "variableCount_other": "{{count}} variables",
+        "variableTitle": "Variable: {{name}}",
+        "valueTitle": "Valor: {{value}}"
+      },
+      "preview": {
+        "executionDetails": "Detalles de la ejecución",
+        "stepCount_one": "({{count}} paso)",
+        "stepCount_other": "({{count}} pasos)",
+        "outputLabel": "Salida:",
+        "errorLabel": "Error:",
+        "artifacts": "Artefactos",
+        "minimapHeading": "Flujo de trabajo",
+        "emptyTitle": "Prueba el flujo de trabajo",
+        "unsavedDraftAttachments": "Guarda el flujo de trabajo antes de adjuntar documentos en la vista previa."
+      },
+      "documents": {
+        "modeAll": "Todos los documentos de entrada",
+        "modeNone": "Ninguno",
+        "modeChoose": "Elegir…",
+        "selectPlaceholder": "Selecciona documentos...",
+        "searchPlaceholder": "Buscar variables...",
+        "empty": "No hay documentos anteriores",
+        "refPlaceholder": "Añadir referencia (p. ej. A1)"
+      },
+      "variables": {
+        "globalContext": "Contexto global",
+        "workflowInput": "Entrada del flujo de trabajo",
+        "searchPlaceholder": "Buscar variables...",
+        "empty": "No se encontraron variables",
+        "addContext": "Añadir contexto"
+      }
+    },
+    "typeModal": {
+      "title": "Crear un agente nuevo",
+      "description": "Elige el tipo de agente que quieres crear",
+      "classicTitle": "Agente clásico",
+      "classicDescription": "Crea un agente de IA estándar con un solo modelo, herramientas y fuentes de conocimiento",
+      "workflowTitle": "Agente de flujo de trabajo",
+      "workflowDescription": "Diseña flujos de trabajo complejos de varios pasos con distintos modelos, lógica condicional y gestión de estado"
     }
   },
   "components": {
@@ -1733,7 +2106,40 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "Vista previa de la imagen",
+      "remove": "Quitar archivo"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "Lista de tareas",
+        "note": "Nota",
+        "memory": "Memoria"
+      },
+      "fallbackTitle": "Artefacto",
+      "todo": {
+        "done": "{{count}} hechas",
+        "open": "{{count}} pendientes",
+        "empty": "Aún no hay tareas"
+      },
+      "note": {
+        "lines_one": "{{count}} línea",
+        "lines_other": "{{count}} líneas",
+        "empty": "Nota vacía"
+      },
+      "notFound": "Artefacto no encontrado",
+      "loadFailed": "No se pudo cargar el artefacto",
+      "fetchFailed": "No se pudo obtener el artefacto",
+      "preview": "Vista previa del artefacto",
+      "download": "Descargar",
+      "restore": "Restaurar",
+      "version": "Versión {{version}}",
+      "versionCurrent": "Versión {{version}} (actual)",
+      "downloadFailed": "Error en la descarga",
+      "restoreFailed": "Error al restaurar"
+    },
+    "profile": {
+      "avatarAlt": "Avatar del usuario"
     }
   },
   "pageNotFound": {
@@ -1749,7 +2155,14 @@
     "size": "Tamaño",
     "myFiles": "Mis archivos",
     "sharedWithMe": "Compartido conmigo",
-    "loadingMore": "Cargando más archivos..."
+    "loadingMore": "Cargando más archivos...",
+    "myDrive": "Mi unidad",
+    "spaces": "Espacios",
+    "root": "Raíz",
+    "shared": "Compartido",
+    "connectTo": "Conectar a {{provider}}",
+    "sessionExpiredFor": "Sesión expirada. Por favor, reconecte a {{provider}}.",
+    "selectFilesFrom": "Seleccionar archivos de {{provider}}"
   },
   "actionButtons": {
     "openNewChat": "Abrir nuevo chat",
@@ -1760,7 +2173,13 @@
     "viewCode": "Ver código",
     "decreaseZoom": "Reducir zoom",
     "resetZoom": "Restablecer zoom",
-    "increaseZoom": "Aumentar zoom"
+    "increaseZoom": "Aumentar zoom",
+    "download": "Descargar",
+    "downloadAs": "Descargar como {{format}}",
+    "code": "Código",
+    "loading": "Cargando diagrama...",
+    "codeTitle": "Código Mermaid",
+    "renderFailed": "No se pudo renderizar el diagrama: {{message}}"
   },
   "navigation": {
     "agents": "Agentes",
@@ -1773,6 +2192,13 @@
         "insights": "Estadísticas",
         "administration": "Administración"
       }
+    },
+    "openSidebar": "Abrir barra lateral",
+    "closeSidebar": "Cerrar barra lateral",
+    "social": {
+      "discord": "Únete a la comunidad de Discord",
+      "x": "Síguenos en X",
+      "github": "Ver en GitHub"
     }
   },
   "teams": {
@@ -1783,7 +2209,8 @@
       "roleAdmin": "Admin",
       "roleMember": "Miembro",
       "manageTeam": "Gestionar equipo",
-      "createTeam": "Crear equipo"
+      "createTeam": "Crear equipo",
+      "logoAlt": "Logotipo de DocsGPT"
     }
   },
   "notification": {
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index e0f4b035..bbac57ef 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -8,6 +8,7 @@
   "sourceDocs": "ソース",
   "none": "なし",
   "loading": "読み込み中...",
+  "retry": "再試行",
   "cancel": "キャンセル",
   "help": "ヘルプ",
   "emailUs": "メールを送る",
@@ -23,7 +24,10 @@
     "sharedTitle": "あなたに共有されました",
     "sharedBody": "チームに{{type}}が共有されました: {{name}}（{{access}}）",
     "sharedBodyNoName": "チームに{{type}}が共有されました（{{access}}）",
-    "dismiss": "閉じる"
+    "dismiss": "閉じる",
+    "toolApprovalTitle": "ツールの承認が必要です",
+    "toolApprovalReview": "確認",
+    "toolApprovalFallbackName": "会話"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "設定",
     "general": {
       "label": "一般",
-      "selectTheme": "テーマを選択",
+      "subtitle": "DocsGPTの外観、表示言語、チャットで使うプロンプトを選択します。",
+      "sections": {
+        "appearance": "外観",
+        "chat": "チャット",
+        "dangerZone": "危険な操作"
+      },
+      "theme": "テーマ",
+      "themeDescription": "ライトまたはダークのインターフェース。",
+      "language": "言語",
+      "languageDescription": "メニューとラベルの言語。",
       "light": "ライト",
       "dark": "ダーク",
-      "selectLanguage": "言語を選択",
       "chunks": "クエリごとに処理されるチャンク",
       "prompt": "アクティブプロンプト",
+      "promptDescription": "エージェントを使わないチャットのシステムプロンプト。エージェントは独自のものを使います。",
       "deleteAllLabel": "すべての会話を削除",
       "deleteAllBtn": "すべて削除",
+      "deleteAllDescription": "アカウント内のすべての会話を完全に削除します。この操作は元に戻せません。",
       "addNew": "新規追加",
       "convHistory": "会話履歴",
       "none": "なし",
@@ -72,7 +86,14 @@
       "high": "高",
       "unlimited": "無制限",
       "default": "デフォルト",
-      "add": "追加"
+      "add": "追加",
+      "promptActions": {
+        "select": "プロンプトを選択",
+        "edit": "プロンプトを編集",
+        "view": "プロンプトを表示",
+        "duplicate": "プロンプトを複製",
+        "delete": "プロンプトを削除"
+      }
     },
     "sources": {
       "title": "ここでは、利用可能なすべてのソースファイルとアップロードしたファイルを管理できます。",
@@ -111,7 +132,6 @@
         "edit": "編集",
         "save": "保存",
         "cancel": "キャンセル",
-        "saving": "保存中…",
         "saveFailed": "ページを保存できませんでした。もう一度お試しください。",
         "forbidden": "このページを編集する権限がありません。",
         "conflict": "このページは開いた後に変更されたため、再読み込みされました。あなたの編集内容は下にあります。再適用して、もう一度保存してください。",
@@ -220,6 +240,7 @@
       "deleteWarning": "\"{{name}}\"を削除してもよろしいですか？",
       "confirmDelete": "このファイルを削除してもよろしいですか？この操作は元に戻せません。",
       "backToAll": "すべてのソースに戻る",
+      "back": "戻る",
       "chunks": "チャンク",
       "noChunks": "チャンクが見つかりません",
       "noChunksAlt": "チャンクが見つかりません",
@@ -323,7 +344,6 @@
         "subtitle": "「{{name}}」のチャンク分割と検索の方法を設定します。",
         "subtitleGeneric": "このソースのチャンク分割と検索の方法を設定します。",
         "save": "保存",
-        "saving": "保存中…",
         "readOnly": "この共有ソースには閲覧のみのアクセス権があるため、設定を変更できません。",
         "chunkingChangeHint": "チャンク分割の設定を変更しました。保存後、反映にはこのソースの再インデックスが必要です。",
         "prescreenInvalidHint": "プリスクリーニングの値を確認してください。取得する候補数はチャンク数以上、保持するチャンク数は取得する候補数以下である必要があります。",
@@ -370,6 +390,7 @@
       "failed": "失敗",
       "skipped": "スキップ",
       "successful": "成功",
+      "otherSeries": "その他",
       "stats": {
         "messages": "メッセージ",
         "tokens": "トークン",
@@ -668,12 +689,19 @@
       "description": "説明",
       "descriptionPlaceholder": "説明を入力",
       "bodyContentType": "ボディのコンテンツタイプ",
+      "bodyTypeHint": {
+        "json": "最も一般的な形式です。最新の REST API に使用します。",
+        "formUrlencoded": "標準的なフォーム送信形式です。従来の API やログインフォームに最適です。",
+        "multipart": "multipart 形式を必要とする API 向けです。LLM 経由のファイルアップロードには対応していません。",
+        "text": "プレーンテキストデータです。各フィールドを改行で区切ります。",
+        "xml": "構造化された XML 形式です。SOAP やエンタープライズ API に使用します。",
+        "octetStream": "生のバイナリデータで、送信時に base64 エンコードされます。"
+      },
       "headers": "ヘッダー",
       "queryParameters": "クエリパラメータ",
       "body": "ボディ",
       "deleteActionWarning": "アクション \"{{name}}\" を削除してもよろしいですか？",
       "save": "保存",
-      "saving": "保存中...",
       "saveFailed": "ツール設定の保存に失敗しました",
       "fieldName": "フィールド名",
       "fieldType": "フィールドタイプ",
@@ -699,8 +727,6 @@
         "password": "パスワード",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -739,7 +765,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}}は必須です",
+        "positiveNumber": "正の数を入力してください",
+        "maxTimeout": "タイムアウトの上限は300秒です"
+      },
+      "headerValuePlaceholder": "例: application/json",
+      "toolIconTitle": "{{name}}のアイコン"
     },
     "devices": {
       "label": "デバイス",
@@ -790,10 +823,11 @@
         "installLink": "docsgpt-cliがない場合はインストール",
         "stepTwo": "2. 求められたらこのコードを入力:",
         "start": "コードを生成",
-        "starting": "処理中…",
         "waitingForCli": "CLIがコードを使用するのを待機中…",
         "cancel": "キャンセル"
-      }
+      },
+      "auditDurationValue": "{{value}} ミリ秒",
+      "fallbackName": "デバイス"
     },
     "customModels": {
       "label": "カスタムモデル",
@@ -805,9 +839,7 @@
       "addTitle": "カスタムモデルを追加",
       "editTitle": "カスタムモデルを編集",
       "save": "保存",
-      "saving": "保存中",
       "testConnection": "接続をテスト",
-      "testing": "テスト中",
       "testSuccess": "接続に成功しました。",
       "testHintNew": "接続テストを有効にするには、ベース URL、モデル ID、API キーを入力してください。",
       "disabledBadge": "無効",
@@ -908,15 +940,6 @@
         "workflows_one": "ワークフロー{{count}}件",
         "workflows_other": "ワークフロー{{count}}件"
       },
-      "relative": {
-        "now": "たった今",
-        "minutes_one": "{{count}}分前",
-        "minutes_other": "{{count}}分前",
-        "hours_one": "{{count}}時間前",
-        "hours_other": "{{count}}時間前",
-        "days_one": "{{count}}日前",
-        "days_other": "{{count}}日前"
-      },
       "families": {
         "agents": "エージェント",
         "sources": "ソース",
@@ -954,7 +977,6 @@
         "retry": "再試行",
         "cancel": "キャンセル",
         "submit": "トークンを作成",
-        "submitting": "作成中",
         "error": "トークンを作成できませんでした。もう一度お試しください。"
       },
       "created": {
@@ -973,7 +995,6 @@
         "warning": "「{{name}}」の新しいシークレットを生成しますか？現在のシークレットは直ちに無効になるため、使用している箇所をすべて更新する必要があります。名前、スコープ、制限は変わりません。",
         "newExpiration": "新しい有効期限",
         "submit": "再生成",
-        "submitting": "再生成中…",
         "error": "トークンを再生成できませんでした。もう一度お試しください。",
         "done": {
           "title": "トークンを再生成しました",
@@ -1030,7 +1051,8 @@
         "collapseDetails": "アップロードの詳細を折りたたむ",
         "dismiss": "アップロード通知を閉じる",
         "uploadProgress": "アップロード進行状況 {{progress}}%",
-        "clear": "クリア"
+        "clear": "クリア",
+        "ingestionFailed": "取り込みに失敗しました。"
       },
       "showAdvanced": "詳細オプションを表示",
       "hideAdvanced": "詳細オプションを非表示",
@@ -1096,7 +1118,6 @@
           "pickerFailed": "ファイルピッカーを開けませんでした。もう一度お試しください。",
           "selectedFiles": "選択されたファイル",
           "selectFiles": "ファイルを選択",
-          "loading": "読み込み中...",
           "noFilesSelected": "ファイルまたはフォルダが選択されていません",
           "folders": "フォルダ",
           "files": "ファイル",
@@ -1122,6 +1143,16 @@
           "folderAlt": "フォルダ",
           "fileAlt": "ファイル"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "AWS アクセスキー ID",
+        "awsSecretAccessKey": "AWS シークレットアクセスキー",
+        "bucket": "バケット名",
+        "prefix": "パスプレフィックス（任意）",
+        "region": "AWS リージョン",
+        "endpointUrl": "カスタムエンドポイント URL（任意）",
+        "initialContent": "初期コンテンツ（任意）"
       }
     },
     "createAPIKey": {
@@ -1162,7 +1193,10 @@
       "apiKeyPlaceholder": "APIキー / OAuthを入力してください",
       "addButton": "ツールを追加",
       "closeButton": "閉じる",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "{{field}} は必須です",
+      "positiveNumber": "正の数を入力してください",
+      "maxTimeout": "タイムアウトの上限は 300 秒です"
     },
     "prompts": {
       "addPrompt": "プロンプトを追加",
@@ -1283,15 +1317,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "JWT トークンを追加",
+      "label": "JWT トークン",
+      "save": "トークンを保存"
     }
   },
   "sharedConv": {
     "subtitle": "作成者",
     "button": "DocsGPT を始める",
-    "meta": "DocsGPT は GenAI を使用しています、情報源を使用して重要情報を確認してください。"
+    "meta": "DocsGPT は GenAI を使用しています、情報源を使用して重要情報を確認してください。",
+    "metaDescription": "DocsGPT で共有された会話"
   },
   "convTile": {
     "share": "共有",
+    "menu": "会話の操作",
     "delete": "削除",
     "rename": "名前変更",
     "save": "保存",
@@ -1313,7 +1354,8 @@
     "edit": {
       "update": "更新",
       "cancel": "キャンセル",
-      "placeholder": "更新されたクエリを入力..."
+      "placeholder": "更新されたクエリを入力...",
+      "label": "編集"
     },
     "sources": {
       "title": "ソース",
@@ -1327,9 +1369,13 @@
     },
     "attachments": {
       "attach": "添付",
-      "remove": "添付ファイルを削除"
+      "remove": "添付ファイルを削除",
+      "attached": "添付ファイル",
+      "failed": "失敗",
+      "attachment": "添付ファイル"
     },
     "retry": "再試行",
+    "failedTitle": "応答を生成できませんでした",
     "reasoning": "推論",
     "wikiWrite": {
       "edited": "Wikiを編集",
@@ -1382,7 +1428,55 @@
     "quotaExceeded": {
       "tokens": "トークンクォータ {{limit}} のうち {{used}} を使用しました。{{resetsAt}} にリセットされます。",
       "cost": "利用予算 {{limit}} のうち {{used}} を使用しました。{{resetsAt}} にリセットされます。"
-    }
+    },
+    "voice": {
+      "start": "音声入力",
+      "stopRecording": "録音を停止",
+      "transcribingAudio": "音声を文字起こし中",
+      "voice": "音声",
+      "stop": "停止",
+      "transcribing": "文字起こし中",
+      "unavailable": "現在、音声入力は利用できません。",
+      "insecure": "音声入力には安全な接続（HTTPS または localhost）が必要です。",
+      "unsupported": "このブラウザでは音声入力を利用できません。",
+      "noWebAudio": "音声入力には、このブラウザでの Web Audio サポートが必要です。",
+      "micBlocked": "マイクへのアクセスがブロックされました。マイクの使用を許可して、もう一度お試しください。",
+      "micNotFound": "このデバイスにマイクが見つかりません。",
+      "micBusy": "マイクが利用できないか、すでに使用中です。",
+      "micInterrupted": "録音開始前にマイクへのアクセスが中断されました。",
+      "micDenied": "マイクへのアクセスが拒否されました。",
+      "transcribeFailed": "音声を文字起こしできませんでした。",
+      "finalizeFailed": "ライブ文字起こしを完了できませんでした。",
+      "startFailed": "ライブ文字起こしを開始できませんでした。"
+    },
+    "selectModel": "モデルを選択",
+    "question": {
+      "expand": "メッセージ全体を表示",
+      "collapse": "折りたたむ"
+    },
+    "exportMarkdown": "Markdown としてエクスポート",
+    "feedback": {
+      "like": "高評価",
+      "removeLike": "高評価を取り消す",
+      "dislike": "低評価",
+      "removeDislike": "低評価を取り消す"
+    },
+    "toolApproval": {
+      "approve": "承認",
+      "approveAlways": "承認し、今後は確認しない",
+      "deny": "拒否",
+      "details": "詳細",
+      "denyReasonPlaceholder": "拒否の理由（任意）…"
+    },
+    "research": {
+      "title": "リサーチ",
+      "planning": "リサーチを計画中…",
+      "researching": "リサーチ中…",
+      "synthesizing": "レポートを作成中…",
+      "complete": "完了",
+      "researched": "{{count}} 件のトピックを調査しました"
+    },
+    "openFile": "ファイルを開く"
   },
   "agents": {
     "title": "エージェント",
@@ -1392,7 +1486,8 @@
       "unpin": "エージェントのピン留めを解除",
       "open": "開く",
       "remove": "削除",
-      "draft": "下書き"
+      "draft": "下書き",
+      "actions": "エージェントの操作"
     },
     "description": "指示、追加知識、スキルの組み合わせを含むDocsGPTのカスタムバージョンを発見して作成します",
     "newAgent": "新しいエージェント",
@@ -1518,7 +1613,8 @@
       },
       "agentTypes": {
         "classic": "クラシック",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "リサーチ"
       },
       "labels": {
         "defaultModel": "デフォルトモデル"
@@ -1673,13 +1769,95 @@
           "nov": "11月",
           "dec": "12月"
         }
+      },
+      "status": {
+        "active": "有効",
+        "paused": "一時停止",
+        "completed": "完了",
+        "cancelled": "キャンセル済み",
+        "success": "成功",
+        "failed": "失敗",
+        "skipped": "スキップ",
+        "running": "実行中",
+        "pending": "保留中",
+        "timeout": "タイムアウト"
+      },
+      "trigger": {
+        "cron": "スケジュール",
+        "manual": "手動"
+      },
+      "runDetails": {
+        "title": "実行の詳細",
+        "status": "ステータス",
+        "scheduledFor": "予定日時",
+        "started": "開始",
+        "finished": "終了",
+        "tokens": "トークン",
+        "tokensValue": "プロンプト {{prompt}} · 生成 {{generated}}",
+        "trigger": "トリガー",
+        "error": "エラー",
+        "errorWithType": "エラー（{{type}}）",
+        "output": "出力",
+        "truncated": "（切り詰め）"
+      },
+      "timezoneMeta": "タイムゾーン: {{timezone}}",
+      "nextRunMeta": "次回: {{time}}",
+      "toolCard": {
+        "cancelFailed": "キャンセルに失敗しました",
+        "taskCancelled": "予約タスクをキャンセルしました。",
+        "pendingCount_other": "保留中の予約タスク {{count}} 件",
+        "schedulingFailed": "スケジュール設定に失敗しました",
+        "scheduling": "スケジュール設定中…",
+        "scheduled": "予約タスク",
+        "pendingCount_one": "保留中の予約タスク {{count}} 件"
+      },
+      "cron": {
+        "daily": "毎日 {{time}}",
+        "weekly": "毎週{{day}} {{time}}",
+        "monthly": "毎月 {{day}} 日 {{time}}",
+        "yearly": "毎年 {{month}}{{day}}日 {{time}}",
+        "custom": "カスタム: {{expression}}",
+        "dayNames": {
+          "sun": "日曜日",
+          "mon": "月曜日",
+          "tue": "火曜日",
+          "wed": "水曜日",
+          "thu": "木曜日",
+          "fri": "金曜日",
+          "sat": "土曜日"
+        },
+        "monthNames": {
+          "jan": "1月",
+          "feb": "2月",
+          "mar": "3月",
+          "apr": "4月",
+          "may": "5月",
+          "jun": "6月",
+          "jul": "7月",
+          "aug": "8月",
+          "sep": "9月",
+          "oct": "10月",
+          "nov": "11月",
+          "dec": "12月"
+        }
+      },
+      "runLog": {
+        "when": "日時",
+        "details": "詳細",
+        "empty": "このスケジュールの実行記録はまだありません。"
       }
     },
     "shared": {
-      "notFound": "エージェントが見つかりません。エージェントが共有されていることを確認してください。"
+      "notFound": "エージェントが見つかりません。エージェントが共有されていることを確認してください。",
+      "logoAlt": "エージェントのロゴ",
+      "sharedBy": "共有者: {{name}}",
+      "sharedOn": "共有日: {{date}}",
+      "connectedTools": "接続済みツール",
+      "toolIconTitle": "{{name}} のアイコン"
     },
     "preview": {
-      "testMessage": "ここでエージェントをテストできます。公開されたエージェントは会話で使用できます。"
+      "testMessage": "ここでエージェントをテストできます。公開されたエージェントは会話で使用できます。",
+      "emptyTitle": "エージェントをテスト"
     },
     "deleteConfirmation": "このエージェントを削除してもよろしいですか？",
     "folders": {
@@ -1697,7 +1875,9 @@
       "backToRoot": "戻る",
       "currentFolder": "このフォルダ",
       "noSubfolders": "サブフォルダなし",
-      "noFolders": "フォルダがありません"
+      "openFolder": "フォルダーを開く",
+      "noFolders": "フォルダがありません",
+      "menuAriaLabel": "{{folderName}} の操作"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1721,6 +1901,198 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "このアーティファクトはプレビューできません",
+        "loadListFailed": "アーティファクトを読み込めませんでした",
+        "loadFailed": "アーティファクトを読み込めませんでした",
+        "loading": "アーティファクトを読み込み中...",
+        "inProgress": "実行中です。ノードが生成したアーティファクトがここに表示されます。",
+        "empty": "この実行ではアーティファクトは生成されませんでした。",
+        "back": "アーティファクト一覧に戻る",
+        "untitled": "アーティファクト {{id}}",
+        "fileKind": "ファイル"
+      },
+      "builder": {
+        "deleteFailed": "ワークフローエージェントを削除できませんでした",
+        "updateWorkflowFailed": "ワークフローを更新できませんでした",
+        "updateAgentFailed": "エージェントを更新できませんでした",
+        "createWorkflowFailed": "ワークフローを作成できませんでした",
+        "createAgentFailed": "エージェントを作成できませんでした",
+        "saveFailed": "ワークフローを保存できませんでした",
+        "defaultDescription": "ワークフローエージェント: {{name}}",
+        "newWorkflow": "新しいワークフロー",
+        "editDetails": "ワークフローの詳細を編集",
+        "workflowName": "ワークフロー名",
+        "workflowNamePlaceholder": "ワークフロー名を入力",
+        "workflowDescriptionPlaceholder": "このワークフローの内容を説明してください",
+        "agentImageAlt": "エージェント画像",
+        "currentImage": "現在の画像",
+        "agentImage": "エージェント画像",
+        "agentImageHint": "画像の変更は次回の保存時に反映されます。",
+        "done": "完了",
+        "unablePreview": "ワークフローをプレビューできません",
+        "unableSave": "ワークフローを保存できません",
+        "unablePublish": "ワークフローを公開できません",
+        "coreNodes": "基本ノード",
+        "logicNodes": "ロジックとデータ",
+        "aiAgent": "AI エージェント",
+        "setStateHint": "ワークフロー変数を変更",
+        "conditionHint": "条件分岐",
+        "codeHint": "サンドボックスでコードを実行",
+        "startNode": "開始ノード",
+        "endNode": "終了ノード",
+        "stateTitle": "グローバル変数を設定",
+        "nodeId": "ノード ID",
+        "title": "タイトル",
+        "titlePlaceholder": "ノードのタイトルを入力",
+        "agentType": "エージェントの種類",
+        "agentTypePlaceholder": "エージェントの種類を選択",
+        "model": "モデル",
+        "modelPlaceholder": "モデルを選択",
+        "systemPrompt": "システムプロンプト",
+        "systemPromptPlaceholder": "エージェントのシステムプロンプト",
+        "promptTemplate": "プロンプトテンプレート",
+        "promptTemplatePlaceholder": "動的な内容には {{example}} を使用します",
+        "outputVariable": "出力変数",
+        "outputVariablePlaceholder": "出力の変数名",
+        "streamToUser": "出力をユーザーにストリーミング",
+        "sources": "ソース",
+        "documents": "ドキュメント",
+        "documentsHint": "アップロードまたは上流ノードからこのエージェントに渡されるドキュメント。",
+        "filePassing": "ファイルの受け渡し",
+        "filePassingHint": "自動: モデルが対応していればネイティブで送信し、そうでなければテキストを抽出します。",
+        "structuredOutput": "構造化出力（JSON スキーマ）",
+        "modelNoStructuredOutput": "選択したモデルは構造化出力に対応していません。",
+        "validSchema": "有効な JSON スキーマ",
+        "invalidSchema": "無効な JSON スキーマ: {{error}}",
+        "noteContent": "メモの内容",
+        "noteContentPlaceholder": "メモの内容を入力",
+        "stateIntro": "ワークフローの状態変数に値を割り当てます",
+        "assignValue": "値を割り当て",
+        "celHint": "Common Expression Language でカスタム式を作成します。状態は名前だけで参照します（<code>query</code>）。<code>{{braced}}</code> ではありません。",
+        "learnMore": "詳細",
+        "toVariable": "代入先の変数",
+        "conditionIntro": "条件を作成してワークフローを分岐させます",
+        "modeSimple": "シンプル",
+        "modeAdvanced": "詳細",
+        "caseNamePlaceholder": "ケース名（任意）",
+        "variablePlaceholder": "変数",
+        "valuePlaceholder": "値",
+        "opContains": "含む",
+        "opStartsWith": "で始まる",
+        "conditionPlaceholder": "条件を入力（例: query.contains(\"refund\")）",
+        "codeIntro": "ワークフローのサンドボックスでコードを実行します。生成されたファイルはアーティファクトとして保存されます。",
+        "inputFiles": "入力ファイル",
+        "inputFilesHint": "サンドボックスにファイルとして配置されるアーティファクト/上流の参照（それぞれ inputs/<name> になります）。",
+        "timeout": "タイムアウト（秒）",
+        "optional": "任意",
+        "cannotDeleteStart": "開始ノードは削除できません",
+        "deleteNode": "ノードを削除",
+        "deleteConfirm": "「{{name}}」を削除してもよろしいですか？",
+        "deleteConfirmUnnamed": "このワークフローエージェントを削除してもよろしいですか？"
+      },
+      "validation": {
+        "nameRequired": "ワークフロー名は必須です",
+        "oneStart": "ワークフローには開始ノードがちょうど 1 つ必要です",
+        "needEnd": "ワークフローには終了ノードが 1 つ以上必要です",
+        "needAgent": "ワークフローには AI エージェントノードが 1 つ以上必要です",
+        "agentModel": "エージェント「{{name}}」のモデルを選択してください",
+        "agentStructuredOutput": "エージェント「{{name}}」で選択したモデルは構造化出力に対応していません",
+        "agentSchema": "エージェント「{{name}}」の JSON スキーマ: {{error}}",
+        "startConnected": "開始ノードを別のノードに接続してください",
+        "endIncoming": "終了ノード「{{name}}」には入力接続が必要です",
+        "edgeSource": "接続が存在しない接続元ノードを参照しています",
+        "edgeTarget": "接続が存在しない接続先ノードを参照しています",
+        "conditionNeedsCase": "条件「{{name}}」には式を持つケースが 1 つ以上必要です",
+        "conditionCaseNoHandle": "条件「{{name}}」に分岐ハンドルのないケースがあります",
+        "conditionDuplicateHandle": "条件「{{name}}」のケースハンドル「{{handle}}」が重複しています",
+        "conditionTwoOutgoing": "条件「{{name}}」には出力接続が 2 つ以上必要です",
+        "conditionEdgeNoHandle": "条件「{{name}}」に分岐ハンドルのない接続があります",
+        "conditionUnknownBranch": "条件「{{name}}」に不明な分岐「{{handle}}」からの接続があります",
+        "conditionMultipleEdges": "条件「{{name}}」の分岐「{{handle}}」から複数の接続があります",
+        "conditionNeedsElse": "条件「{{name}}」には Else 分岐が必要です",
+        "caseNoConnection": "条件「{{name}}」のケース「{{handle}}」には式がありますが、分岐の接続がありません",
+        "caseNoExpression": "条件「{{name}}」のケース「{{handle}}」には分岐の接続がありますが、式がありません",
+        "caseNoVariable": "条件「{{name}}」のケース「{{handle}}」では、シンプルモードで変数を指定する必要があります",
+        "branchReachEnd": "条件「{{name}}」の分岐「{{handle}}」は最終的に終了ノードに到達する必要があります",
+        "codeRequired": "コードノード「{{name}}」には実行するコードが必要です",
+        "codeSchema": "コードノード「{{name}}」の JSON スキーマ: {{error}}"
+      },
+      "schema": {
+        "notObject": "有効な JSON オブジェクトである必要があります",
+        "missingType": "\"type\" または \"schema\" フィールドが必要です",
+        "invalidJson": "有効な JSON である必要があります"
+      },
+      "filePassing": {
+        "auto": "自動",
+        "native": "ネイティブ",
+        "extract": "抽出"
+      },
+      "mobileBlocker": {
+        "title": "デスクトップが必要です",
+        "body": "ワークフロービルダーを快適に使うには、より大きな画面が必要です。このページはデスクトップまたはノートパソコンで開いてください。"
+      },
+      "nodes": {
+        "start": "開始",
+        "startHint": "ワークフローの開始点",
+        "end": "終了",
+        "endHint": "ワークフローの完了",
+        "agent": "エージェント",
+        "note": "メモ",
+        "condition": "If / Else",
+        "code": "コード",
+        "setState": "状態を設定",
+        "output": "出力: {{variable}}",
+        "noCode": "コードはまだありません",
+        "modeSimple": "シンプル",
+        "modeAdvanced": "詳細",
+        "if": "If",
+        "elseIf": "Else if",
+        "else": "Else",
+        "operationCount_other": "{{count}} 件の操作",
+        "variableCount_other": "{{count}} 個の変数",
+        "variableTitle": "変数: {{name}}",
+        "valueTitle": "値: {{value}}",
+        "operationCount_one": "{{count}} 件の操作",
+        "variableCount_one": "{{count}} 個の変数"
+      },
+      "preview": {
+        "executionDetails": "実行の詳細",
+        "stepCount_other": "（{{count}} ステップ）",
+        "outputLabel": "出力:",
+        "errorLabel": "エラー:",
+        "artifacts": "アーティファクト",
+        "minimapHeading": "ワークフロー",
+        "emptyTitle": "ワークフローをテスト",
+        "unsavedDraftAttachments": "プレビューでドキュメントを添付する前にワークフローを保存してください。",
+        "stepCount_one": "（{{count}} ステップ）"
+      },
+      "documents": {
+        "modeAll": "すべての入力ドキュメント",
+        "modeNone": "なし",
+        "modeChoose": "選択…",
+        "selectPlaceholder": "ドキュメントを選択...",
+        "searchPlaceholder": "変数を検索...",
+        "empty": "上流のドキュメントはありません",
+        "refPlaceholder": "参照を追加（例: A1）"
+      },
+      "variables": {
+        "globalContext": "グローバルコンテキスト",
+        "workflowInput": "ワークフロー入力",
+        "searchPlaceholder": "変数を検索...",
+        "empty": "変数が見つかりません",
+        "addContext": "コンテキストを追加"
+      }
+    },
+    "typeModal": {
+      "title": "新しいエージェントを作成",
+      "description": "作成するエージェントの種類を選択してください",
+      "classicTitle": "クラシックエージェント",
+      "classicDescription": "単一のモデル、ツール、ナレッジソースを持つ標準的な AI エージェントを作成します",
+      "workflowTitle": "ワークフローエージェント",
+      "workflowDescription": "複数のモデル、条件ロジック、状態管理を使った複雑なマルチステップのワークフローを設計します"
     }
   },
   "components": {
@@ -1729,7 +2101,39 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "画像のプレビュー",
+      "remove": "ファイルを削除"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "ToDo リスト",
+        "note": "メモ",
+        "memory": "メモリー"
+      },
+      "fallbackTitle": "アーティファクト",
+      "todo": {
+        "done": "{{count}} 件完了",
+        "open": "{{count}} 件未完了",
+        "empty": "ToDo はまだありません"
+      },
+      "note": {
+        "lines_other": "{{count}} 行",
+        "empty": "空のメモ"
+      },
+      "notFound": "アーティファクトが見つかりません",
+      "loadFailed": "アーティファクトを読み込めませんでした",
+      "fetchFailed": "アーティファクトを取得できませんでした",
+      "preview": "アーティファクトのプレビュー",
+      "download": "ダウンロード",
+      "restore": "復元",
+      "version": "バージョン {{version}}",
+      "versionCurrent": "バージョン {{version}}（現在）",
+      "downloadFailed": "ダウンロードに失敗しました",
+      "restoreFailed": "復元に失敗しました"
+    },
+    "profile": {
+      "avatarAlt": "ユーザーのアバター"
     }
   },
   "pageNotFound": {
@@ -1745,7 +2149,14 @@
     "size": "サイズ",
     "myFiles": "マイファイル",
     "sharedWithMe": "共有アイテム",
-    "loadingMore": "さらに読み込み中..."
+    "loadingMore": "さらに読み込み中...",
+    "myDrive": "マイドライブ",
+    "spaces": "スペース",
+    "root": "ルート",
+    "shared": "共有",
+    "connectTo": "{{provider}}に接続",
+    "sessionExpiredFor": "セッションが期限切れです。{{provider}}に再接続してください。",
+    "selectFilesFrom": "{{provider}}からファイルを選択"
   },
   "actionButtons": {
     "openNewChat": "新しいチャットを開く",
@@ -1756,7 +2167,13 @@
     "viewCode": "コードを表示",
     "decreaseZoom": "ズームアウト",
     "resetZoom": "ズームをリセット",
-    "increaseZoom": "ズームイン"
+    "increaseZoom": "ズームイン",
+    "download": "ダウンロード",
+    "downloadAs": "{{format}} でダウンロード",
+    "code": "コード",
+    "loading": "図を読み込み中...",
+    "codeTitle": "Mermaid コード",
+    "renderFailed": "図を描画できませんでした: {{message}}"
   },
   "navigation": {
     "agents": "エージェント",
@@ -1769,6 +2186,13 @@
         "insights": "インサイト",
         "administration": "管理"
       }
+    },
+    "openSidebar": "サイドバーを開く",
+    "closeSidebar": "サイドバーを閉じる",
+    "social": {
+      "discord": "Discord コミュニティに参加",
+      "x": "X でフォロー",
+      "github": "GitHub で見る"
     }
   },
   "teams": {
@@ -1779,7 +2203,8 @@
       "roleAdmin": "管理者",
       "roleMember": "メンバー",
       "manageTeam": "チームを管理",
-      "createTeam": "チームを作成"
+      "createTeam": "チームを作成",
+      "logoAlt": "DocsGPT ロゴ"
     }
   },
   "notification": {
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index ac6233ce..01f8d7ef 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -8,6 +8,7 @@
   "sourceDocs": "Источник",
   "none": "Нет",
   "loading": "Загрузка...",
+  "retry": "Повторить",
   "cancel": "Отмена",
   "help": "Помощь",
   "emailUs": "Напишите нам",
@@ -23,7 +24,10 @@
     "sharedTitle": "Поделились с вами",
     "sharedBody": "С вашей командой поделились: {{type}} «{{name}}» ({{access}})",
     "sharedBodyNoName": "С вашей командой поделились: {{type}} ({{access}})",
-    "dismiss": "Закрыть"
+    "dismiss": "Закрыть",
+    "toolApprovalTitle": "Требуется одобрение инструмента",
+    "toolApprovalReview": "Проверить",
+    "toolApprovalFallbackName": "Диалог"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "Настройки",
     "general": {
       "label": "Общие",
-      "selectTheme": "Выбрать тему",
+      "subtitle": "Выберите оформление DocsGPT, язык интерфейса и промпт для ваших чатов.",
+      "sections": {
+        "appearance": "Оформление",
+        "chat": "Чат",
+        "dangerZone": "Опасная зона"
+      },
+      "theme": "Тема",
+      "themeDescription": "Светлый или тёмный интерфейс.",
+      "language": "Язык",
+      "languageDescription": "Язык меню и подписей.",
       "light": "Светлая",
       "dark": "Тёмная",
-      "selectLanguage": "Выбрать язык",
       "chunks": "Обработанные фрагменты на запрос",
       "prompt": "Активная подсказка",
+      "promptDescription": "Системный промпт для чатов без агента. Агенты используют свой.",
       "deleteAllLabel": "Удалить все беседы",
       "deleteAllBtn": "Удалить все",
+      "deleteAllDescription": "Безвозвратно удаляет все беседы в вашем аккаунте. Это действие нельзя отменить.",
       "addNew": "Добавить новый",
       "convHistory": "История разговоров",
       "none": "Нет",
@@ -72,7 +86,14 @@
       "high": "Высокий",
       "unlimited": "Без ограничений",
       "default": "По умолчанию",
-      "add": "Добавить"
+      "add": "Добавить",
+      "promptActions": {
+        "select": "Выберите промпт",
+        "edit": "Редактировать промпт",
+        "view": "Просмотреть промпт",
+        "duplicate": "Дублировать промпт",
+        "delete": "Удалить промпт"
+      }
     },
     "sources": {
       "title": "Здесь вы можете управлять всеми исходными файлами, которые доступны вам и которые вы загрузили.",
@@ -111,7 +132,6 @@
         "edit": "Редактировать",
         "save": "Сохранить",
         "cancel": "Отмена",
-        "saving": "Сохранение…",
         "saveFailed": "Не удалось сохранить страницу. Пожалуйста, попробуйте ещё раз.",
         "forbidden": "У вас нет прав на редактирование этой страницы.",
         "conflict": "Страница изменилась с момента открытия и была перезагружена. Ваши правки ниже — примените их заново и сохраните ещё раз.",
@@ -233,6 +253,7 @@
       "deleteWarning": "Вы уверены, что хотите удалить \"{{name}}\"?",
       "confirmDelete": "Вы уверены, что хотите удалить этот файл? Это действие нельзя отменить.",
       "backToAll": "Вернуться ко всем источникам",
+      "back": "Назад",
       "chunks": "Фрагменты",
       "noChunks": "Фрагменты не найдены",
       "noChunksAlt": "Фрагменты не найдены",
@@ -336,7 +357,6 @@
         "subtitle": "Настройте, как «{{name}}» разбивается на фрагменты и извлекается.",
         "subtitleGeneric": "Настройте, как этот источник разбивается на фрагменты и извлекается.",
         "save": "Сохранить",
-        "saving": "Сохранение…",
         "readOnly": "У вас доступ только для просмотра этого общего источника, вы не можете изменять его настройки.",
         "chunkingChangeHint": "Вы изменили настройку разбиения на фрагменты. После сохранения потребуется переиндексация источника, чтобы изменения вступили в силу.",
         "prescreenInvalidHint": "Проверьте значения предварительного отбора: число кандидатов должно быть не меньше числа фрагментов, а число оставляемых фрагментов не должно превышать число кандидатов.",
@@ -383,6 +403,7 @@
       "failed": "Не удалось",
       "skipped": "Пропущено",
       "successful": "Успешно",
+      "otherSeries": "Другие",
       "stats": {
         "messages": "Сообщения",
         "tokens": "Токены",
@@ -695,12 +716,19 @@
       "description": "Описание",
       "descriptionPlaceholder": "Введите описание",
       "bodyContentType": "Тип содержимого тела",
+      "bodyTypeHint": {
+        "json": "Самый распространённый формат. Для современных REST API.",
+        "formUrlencoded": "Стандартный формат отправки форм. Лучше всего подходит для устаревших API и форм входа.",
+        "multipart": "Для API, требующих формат multipart. Загрузка файлов через LLM не поддерживается.",
+        "text": "Простые текстовые данные. Каждое поле с новой строки.",
+        "xml": "Структурированный формат XML. Для SOAP и корпоративных API.",
+        "octetStream": "Необработанные двоичные данные в кодировке base64 для передачи."
+      },
       "headers": "Заголовки",
       "queryParameters": "Параметры запроса",
       "body": "Тело запроса",
       "deleteActionWarning": "Вы уверены, что хотите удалить действие \"{{name}}\"?",
       "save": "Сохранить",
-      "saving": "Сохранение...",
       "saveFailed": "Не удалось сохранить настройки инструмента",
       "fieldName": "Имя поля",
       "fieldType": "Тип поля",
@@ -726,8 +754,6 @@
         "password": "Пароль",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -766,7 +792,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "Поле «{{field}}» обязательно",
+        "positiveNumber": "Должно быть положительным числом",
+        "maxTimeout": "Максимальный тайм-аут — 300 секунд"
+      },
+      "headerValuePlaceholder": "например, application/json",
+      "toolIconTitle": "Значок {{name}}"
     },
     "devices": {
       "label": "Устройства",
@@ -817,10 +850,11 @@
         "installLink": "Нет docsgpt-cli? Установите его",
         "stepTwo": "2. Введите этот код по запросу:",
         "start": "Сгенерировать код",
-        "starting": "Выполнение…",
         "waitingForCli": "Ожидание активации кода в CLI…",
         "cancel": "Отмена"
-      }
+      },
+      "auditDurationValue": "{{value}} мс",
+      "fallbackName": "устройство"
     },
     "customModels": {
       "label": "Свои модели",
@@ -832,9 +866,7 @@
       "addTitle": "Добавить свою модель",
       "editTitle": "Изменить свою модель",
       "save": "Сохранить",
-      "saving": "Сохранение",
       "testConnection": "Проверить соединение",
-      "testing": "Проверка",
       "testSuccess": "Соединение установлено.",
       "testHintNew": "Заполните Base URL, ID модели и API-ключ, чтобы включить проверку соединения.",
       "disabledBadge": "Отключено",
@@ -947,21 +979,6 @@
         "workflows_many": "{{count}} рабочих процессов",
         "workflows_other": "{{count}} рабочего процесса"
       },
-      "relative": {
-        "now": "Только что",
-        "minutes_one": "{{count}} минуту назад",
-        "minutes_few": "{{count}} минуты назад",
-        "minutes_many": "{{count}} минут назад",
-        "minutes_other": "{{count}} минуты назад",
-        "hours_one": "{{count}} час назад",
-        "hours_few": "{{count}} часа назад",
-        "hours_many": "{{count}} часов назад",
-        "hours_other": "{{count}} часа назад",
-        "days_one": "{{count}} день назад",
-        "days_few": "{{count}} дня назад",
-        "days_many": "{{count}} дней назад",
-        "days_other": "{{count}} дня назад"
-      },
       "families": {
         "agents": "Агенты",
         "sources": "Источники",
@@ -1001,7 +1018,6 @@
         "retry": "Повторить",
         "cancel": "Отмена",
         "submit": "Создать токен",
-        "submitting": "Создание",
         "error": "Не удалось создать токен. Попробуйте ещё раз."
       },
       "created": {
@@ -1020,7 +1036,6 @@
         "warning": "Создать новый секрет для «{{name}}»? Текущий секрет сразу перестанет работать, поэтому всё, что его использует, нужно обновить. Имя, права и ограничения останутся прежними.",
         "newExpiration": "Новый срок действия",
         "submit": "Перевыпустить",
-        "submitting": "Перевыпуск…",
         "error": "Не удалось перевыпустить токен. Попробуйте ещё раз.",
         "done": {
           "title": "Токен перевыпущен",
@@ -1077,7 +1092,8 @@
         "collapseDetails": "Свернуть детали загрузки",
         "dismiss": "Закрыть уведомление о загрузке",
         "uploadProgress": "Прогресс загрузки {{progress}}%",
-        "clear": "Очистить"
+        "clear": "Очистить",
+        "ingestionFailed": "Не удалось загрузить данные."
       },
       "showAdvanced": "Показать расширенные настройки",
       "hideAdvanced": "Скрыть расширенные настройки",
@@ -1143,7 +1159,6 @@
           "pickerFailed": "Не удалось открыть средство выбора файлов. Пожалуйста, попробуйте еще раз.",
           "selectedFiles": "Выбранные файлы",
           "selectFiles": "Выбрать файлы",
-          "loading": "Загрузка...",
           "noFilesSelected": "Файлы или папки не выбраны",
           "folders": "Папки",
           "files": "Файлы",
@@ -1169,6 +1184,16 @@
           "folderAlt": "Папка",
           "fileAlt": "Файл"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "Идентификатор ключа доступа AWS",
+        "awsSecretAccessKey": "Секретный ключ доступа AWS",
+        "bucket": "Имя бакета",
+        "prefix": "Префикс пути (необязательно)",
+        "region": "Регион AWS",
+        "endpointUrl": "Пользовательский URL эндпоинта (необязательно)",
+        "initialContent": "Исходное содержимое (необязательно)"
       }
     },
     "createAPIKey": {
@@ -1209,7 +1234,10 @@
       "apiKeyPlaceholder": "Введите API ключ / OAuth",
       "addButton": "Добавить инструмент",
       "closeButton": "Закрыть",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "Поле «{{field}}» обязательно",
+      "positiveNumber": "Должно быть положительным числом",
+      "maxTimeout": "Максимальный тайм-аут — 300 секунд"
     },
     "prompts": {
       "addPrompt": "Добавить промпт",
@@ -1333,15 +1361,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "Добавить токен JWT",
+      "label": "Токен JWT",
+      "save": "Сохранить токен"
     }
   },
   "sharedConv": {
     "subtitle": "Создано с помощью",
     "button": "Начать работу с DocsGPT",
-    "meta": "DocsGPT использует GenAI, пожалуйста, проверьте важную информацию, используя источники."
+    "meta": "DocsGPT использует GenAI, пожалуйста, проверьте важную информацию, используя источники.",
+    "metaDescription": "Общие беседы с DocsGPT"
   },
   "convTile": {
     "share": "Поделиться",
+    "menu": "Действия с беседой",
     "delete": "Удалить",
     "rename": "Переименовать",
     "save": "Сохранить",
@@ -1363,7 +1398,8 @@
     "edit": {
       "update": "Обновить",
       "cancel": "Отмена",
-      "placeholder": "Введите обновленный запрос..."
+      "placeholder": "Введите обновленный запрос...",
+      "label": "Редактировать"
     },
     "sources": {
       "title": "Источники",
@@ -1380,9 +1416,13 @@
     },
     "attachments": {
       "attach": "Прикрепить",
-      "remove": "Удалить вложение"
+      "remove": "Удалить вложение",
+      "attached": "Вложение",
+      "failed": "Ошибка",
+      "attachment": "Вложение"
     },
     "retry": "Повторить",
+    "failedTitle": "Не удалось сгенерировать ответ",
     "reasoning": "Рассуждение",
     "wikiWrite": {
       "edited": "Вики отредактирована",
@@ -1435,7 +1475,58 @@
     "quotaExceeded": {
       "tokens": "Вы использовали {{used}} из квоты в {{limit}} токенов. Квота сбросится {{resetsAt}}.",
       "cost": "Вы использовали {{used}} из бюджета в {{limit}}. Бюджет сбросится {{resetsAt}}."
-    }
+    },
+    "voice": {
+      "start": "Голосовой ввод",
+      "stopRecording": "Остановить запись",
+      "transcribingAudio": "Расшифровка аудио",
+      "voice": "Голос",
+      "stop": "Стоп",
+      "transcribing": "Расшифровка",
+      "unavailable": "Голосовой ввод сейчас недоступен.",
+      "insecure": "Для голосового ввода нужно защищённое соединение (HTTPS или localhost).",
+      "unsupported": "Голосовой ввод недоступен в этом браузере.",
+      "noWebAudio": "Для голосового ввода браузер должен поддерживать Web Audio.",
+      "micBlocked": "Доступ к микрофону заблокирован. Разрешите доступ к микрофону и попробуйте снова.",
+      "micNotFound": "На этом устройстве не найден микрофон.",
+      "micBusy": "Микрофон недоступен или уже используется.",
+      "micInterrupted": "Доступ к микрофону прервался до начала записи.",
+      "micDenied": "В доступе к микрофону отказано.",
+      "transcribeFailed": "Не удалось расшифровать аудио.",
+      "finalizeFailed": "Не удалось завершить расшифровку в реальном времени.",
+      "startFailed": "Не удалось запустить расшифровку в реальном времени."
+    },
+    "selectModel": "Выберите модель",
+    "question": {
+      "expand": "Показать сообщение целиком",
+      "collapse": "Свернуть"
+    },
+    "exportMarkdown": "Экспортировать в Markdown",
+    "feedback": {
+      "like": "Нравится",
+      "removeLike": "Убрать отметку «Нравится»",
+      "dislike": "Не нравится",
+      "removeDislike": "Убрать отметку «Не нравится»"
+    },
+    "toolApproval": {
+      "approve": "Одобрить",
+      "approveAlways": "Одобрить и больше не спрашивать",
+      "deny": "Отклонить",
+      "details": "Подробности",
+      "denyReasonPlaceholder": "Причина отказа (необязательно)…"
+    },
+    "research": {
+      "title": "Исследование",
+      "planning": "Планирование исследования…",
+      "researching": "Исследование…",
+      "synthesizing": "Составление отчёта…",
+      "complete": "Готово",
+      "researched_one": "Изучена {{count}} тема",
+      "researched_few": "Изучено {{count}} темы",
+      "researched_many": "Изучено {{count}} тем",
+      "researched_other": "Изучено {{count}} темы"
+    },
+    "openFile": "Открыть файл"
   },
   "agents": {
     "title": "Агенты",
@@ -1445,7 +1536,8 @@
       "unpin": "Открепить агента",
       "open": "Открыть",
       "remove": "Удалить",
-      "draft": "Черновик"
+      "draft": "Черновик",
+      "actions": "Действия с агентом"
     },
     "description": "Откройте и создайте пользовательские версии DocsGPT, которые объединяют инструкции, дополнительные знания и любую комбинацию навыков",
     "newAgent": "Новый Агент",
@@ -1571,7 +1663,8 @@
       },
       "agentTypes": {
         "classic": "Классический",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "Исследование"
       },
       "labels": {
         "defaultModel": "Модель по умолчанию"
@@ -1729,13 +1822,97 @@
           "nov": "Ноя",
           "dec": "Дек"
         }
+      },
+      "status": {
+        "active": "Активно",
+        "paused": "Приостановлено",
+        "completed": "Завершено",
+        "cancelled": "Отменено",
+        "success": "Успешно",
+        "failed": "Ошибка",
+        "skipped": "Пропущено",
+        "running": "Выполняется",
+        "pending": "Ожидает",
+        "timeout": "Тайм-аут"
+      },
+      "trigger": {
+        "cron": "По расписанию",
+        "manual": "Вручную"
+      },
+      "runDetails": {
+        "title": "Сведения о запуске",
+        "status": "Статус",
+        "scheduledFor": "Запланировано на",
+        "started": "Начало",
+        "finished": "Окончание",
+        "tokens": "Токены",
+        "tokensValue": "{{prompt}} в запросе · {{generated}} сгенерировано",
+        "trigger": "Запуск",
+        "error": "Ошибка",
+        "errorWithType": "Ошибка ({{type}})",
+        "output": "Результат",
+        "truncated": "(обрезано)"
+      },
+      "timezoneMeta": "часовой пояс: {{timezone}}",
+      "nextRunMeta": "следующий: {{time}}",
+      "toolCard": {
+        "cancelFailed": "Не удалось отменить",
+        "taskCancelled": "Запланированная задача отменена.",
+        "pendingCount_one": "{{count}} ожидающая задача",
+        "pendingCount_few": "{{count}} ожидающие задачи",
+        "pendingCount_many": "{{count}} ожидающих задач",
+        "pendingCount_other": "{{count}} ожидающей задачи",
+        "schedulingFailed": "Не удалось запланировать",
+        "scheduling": "Планирование…",
+        "scheduled": "Запланированная задача"
+      },
+      "cron": {
+        "daily": "Ежедневно в {{time}}",
+        "weekly": "Еженедельно: {{day}}, в {{time}}",
+        "monthly": "Ежемесячно, {{day}}-го числа в {{time}}",
+        "yearly": "Ежегодно, {{day}} {{month}} в {{time}}",
+        "custom": "Другое: {{expression}}",
+        "dayNames": {
+          "sun": "воскресенье",
+          "mon": "понедельник",
+          "tue": "вторник",
+          "wed": "среда",
+          "thu": "четверг",
+          "fri": "пятница",
+          "sat": "суббота"
+        },
+        "monthNames": {
+          "jan": "января",
+          "feb": "февраля",
+          "mar": "марта",
+          "apr": "апреля",
+          "may": "мая",
+          "jun": "июня",
+          "jul": "июля",
+          "aug": "августа",
+          "sep": "сентября",
+          "oct": "октября",
+          "nov": "ноября",
+          "dec": "декабря"
+        }
+      },
+      "runLog": {
+        "when": "Когда",
+        "details": "Подробнее",
+        "empty": "Для этого расписания пока нет запусков."
       }
     },
     "shared": {
-      "notFound": "Агент не найден. Убедитесь, что агент является общим."
+      "notFound": "Агент не найден. Убедитесь, что агент является общим.",
+      "logoAlt": "Логотип агента",
+      "sharedBy": "от {{name}}",
+      "sharedOn": "Опубликовано {{date}}",
+      "connectedTools": "Подключённые инструменты",
+      "toolIconTitle": "Значок {{name}}"
     },
     "preview": {
-      "testMessage": "Протестируйте своего агента здесь. Опубликованные агенты можно использовать в разговорах."
+      "testMessage": "Протестируйте своего агента здесь. Опубликованные агенты можно использовать в разговорах.",
+      "emptyTitle": "Протестируйте агента"
     },
     "deleteConfirmation": "Вы уверены, что хотите удалить этого агента?",
     "folders": {
@@ -1753,7 +1930,9 @@
       "backToRoot": "Назад",
       "currentFolder": "Эта папка",
       "noSubfolders": "Нет подпапок",
-      "noFolders": "Пока нет папок"
+      "openFolder": "Открыть папку",
+      "noFolders": "Пока нет папок",
+      "menuAriaLabel": "Действия для {{folderName}}"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1777,6 +1956,204 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "Предпросмотр этого артефакта недоступен",
+        "loadListFailed": "Не удалось загрузить артефакты",
+        "loadFailed": "Не удалось загрузить артефакт",
+        "loading": "Загрузка артефактов...",
+        "inProgress": "Запуск выполняется — артефакты появятся здесь по мере их создания узлами.",
+        "empty": "Этот запуск не создал артефактов.",
+        "back": "Назад к артефактам",
+        "untitled": "Артефакт {{id}}",
+        "fileKind": "файл"
+      },
+      "builder": {
+        "deleteFailed": "Не удалось удалить агента рабочего процесса",
+        "updateWorkflowFailed": "Не удалось обновить рабочий процесс",
+        "updateAgentFailed": "Не удалось обновить агента",
+        "createWorkflowFailed": "Не удалось создать рабочий процесс",
+        "createAgentFailed": "Не удалось создать агента",
+        "saveFailed": "Не удалось сохранить рабочий процесс",
+        "defaultDescription": "Агент рабочего процесса: {{name}}",
+        "newWorkflow": "Новый рабочий процесс",
+        "editDetails": "Изменить сведения о рабочем процессе",
+        "workflowName": "Название рабочего процесса",
+        "workflowNamePlaceholder": "Введите название рабочего процесса",
+        "workflowDescriptionPlaceholder": "Опишите, что делает этот рабочий процесс",
+        "agentImageAlt": "Изображение агента",
+        "currentImage": "Текущее изображение",
+        "agentImage": "Изображение агента",
+        "agentImageHint": "Изменения изображения применятся при следующем сохранении.",
+        "done": "Готово",
+        "unablePreview": "Не удалось запустить предпросмотр рабочего процесса",
+        "unableSave": "Не удалось сохранить рабочий процесс",
+        "unablePublish": "Не удалось опубликовать рабочий процесс",
+        "coreNodes": "Основные узлы",
+        "logicNodes": "Логика и данные",
+        "aiAgent": "ИИ-агент",
+        "setStateHint": "Изменение переменных рабочего процесса",
+        "conditionHint": "Условное ветвление",
+        "codeHint": "Запуск кода в песочнице",
+        "startNode": "Начальный узел",
+        "endNode": "Конечный узел",
+        "stateTitle": "Задать глобальные переменные",
+        "nodeId": "ID узла",
+        "title": "Название",
+        "titlePlaceholder": "Введите название узла",
+        "agentType": "Тип агента",
+        "agentTypePlaceholder": "Выберите тип агента",
+        "model": "Модель",
+        "modelPlaceholder": "Выберите модель",
+        "systemPrompt": "Системный промпт",
+        "systemPromptPlaceholder": "Системный промпт для агента",
+        "promptTemplate": "Шаблон промпта",
+        "promptTemplatePlaceholder": "Используйте {{example}} для динамического содержимого",
+        "outputVariable": "Выходная переменная",
+        "outputVariablePlaceholder": "Имя переменной для вывода",
+        "streamToUser": "Передавать вывод пользователю потоком",
+        "sources": "Источники",
+        "documents": "Документы",
+        "documentsHint": "Документы, передаваемые этому агенту из загрузок или предыдущих узлов.",
+        "filePassing": "Передача файлов",
+        "filePassingHint": "Авто: отправлять файл напрямую, если модель это поддерживает, иначе извлекать текст.",
+        "structuredOutput": "Структурированный вывод (JSON Schema)",
+        "modelNoStructuredOutput": "Выбранная модель не поддерживает структурированный вывод.",
+        "validSchema": "Корректная JSON-схема",
+        "invalidSchema": "Некорректная JSON-схема: {{error}}",
+        "noteContent": "Текст заметки",
+        "noteContentPlaceholder": "Введите текст заметки",
+        "stateIntro": "Присвойте значения переменным состояния рабочего процесса",
+        "assignValue": "Присвоить значение",
+        "celHint": "Используйте Common Expression Language, чтобы создать собственное выражение. Ссылайтесь на состояние по имени (<code>query</code>), а не <code>{{braced}}</code>.",
+        "learnMore": "Подробнее",
+        "toVariable": "В переменную",
+        "conditionIntro": "Создайте условия для ветвления рабочего процесса",
+        "modeSimple": "Простой",
+        "modeAdvanced": "Расширенный",
+        "caseNamePlaceholder": "Название варианта (необязательно)",
+        "variablePlaceholder": "Переменная",
+        "valuePlaceholder": "Значение",
+        "opContains": "содержит",
+        "opStartsWith": "начинается",
+        "conditionPlaceholder": "Введите условие, например query.contains(\"refund\")",
+        "codeIntro": "Запуск кода в песочнице рабочего процесса. Созданные файлы сохраняются как артефакты.",
+        "inputFiles": "Входные файлы",
+        "inputFilesHint": "Артефакты и ссылки из предыдущих узлов, размещаемые в песочнице как файлы (каждый становится inputs/<name>).",
+        "timeout": "Тайм-аут (секунды)",
+        "optional": "Необязательно",
+        "cannotDeleteStart": "Начальный узел нельзя удалить",
+        "deleteNode": "Удалить узел",
+        "deleteConfirm": "Вы уверены, что хотите удалить «{{name}}»?",
+        "deleteConfirmUnnamed": "Вы уверены, что хотите удалить этого агента рабочего процесса?"
+      },
+      "validation": {
+        "nameRequired": "Укажите название рабочего процесса",
+        "oneStart": "В рабочем процессе должен быть ровно один начальный узел",
+        "needEnd": "В рабочем процессе должен быть хотя бы один конечный узел",
+        "needAgent": "В рабочем процессе должен быть хотя бы один узел ИИ-агента",
+        "agentModel": "Для агента «{{name}}» нужно выбрать модель",
+        "agentStructuredOutput": "Модель, выбранная для агента «{{name}}», не поддерживает структурированный вывод",
+        "agentSchema": "JSON-схема агента «{{name}}»: {{error}}",
+        "startConnected": "Начальный узел должен быть соединён с другим узлом",
+        "endIncoming": "Конечному узлу «{{name}}» нужно входящее соединение",
+        "edgeSource": "Соединение ссылается на несуществующий исходный узел",
+        "edgeTarget": "Соединение ссылается на несуществующий целевой узел",
+        "conditionNeedsCase": "В условии «{{name}}» должен быть хотя бы один вариант с выражением",
+        "conditionCaseNoHandle": "В условии «{{name}}» есть вариант без идентификатора ветки",
+        "conditionDuplicateHandle": "В условии «{{name}}» повторяется идентификатор варианта «{{handle}}»",
+        "conditionTwoOutgoing": "У условия «{{name}}» должно быть не менее 2 исходящих соединений",
+        "conditionEdgeNoHandle": "У условия «{{name}}» есть соединение без идентификатора ветки",
+        "conditionUnknownBranch": "У условия «{{name}}» есть соединение из неизвестной ветки «{{handle}}»",
+        "conditionMultipleEdges": "У условия «{{name}}» несколько соединений из ветки «{{handle}}»",
+        "conditionNeedsElse": "У условия «{{name}}» должна быть ветка «Иначе»",
+        "caseNoConnection": "В условии «{{name}}» у варианта «{{handle}}» есть выражение, но нет соединения ветки",
+        "caseNoExpression": "В условии «{{name}}» у варианта «{{handle}}» есть соединение ветки, но нет выражения",
+        "caseNoVariable": "В условии «{{name}}» для варианта «{{handle}}» в простом режиме нужно указать переменную",
+        "branchReachEnd": "Ветка «{{handle}}» условия «{{name}}» должна в итоге вести к конечному узлу",
+        "codeRequired": "В узле кода «{{name}}» должен быть код для запуска",
+        "codeSchema": "JSON-схема узла кода «{{name}}»: {{error}}"
+      },
+      "schema": {
+        "notObject": "должна быть корректным JSON-объектом",
+        "missingType": "должна содержать поле \"type\" или \"schema\"",
+        "invalidJson": "должна быть корректным JSON"
+      },
+      "filePassing": {
+        "auto": "Авто",
+        "native": "Напрямую",
+        "extract": "Извлечь текст"
+      },
+      "mobileBlocker": {
+        "title": "Требуется компьютер",
+        "body": "Для конструктора рабочих процессов нужен экран побольше. Откройте эту страницу на настольном компьютере или ноутбуке."
+      },
+      "nodes": {
+        "start": "Начало",
+        "startHint": "Точка входа рабочего процесса",
+        "end": "Конец",
+        "endHint": "Завершение рабочего процесса",
+        "agent": "Агент",
+        "note": "Заметка",
+        "condition": "Если / Иначе",
+        "code": "Код",
+        "setState": "Задать состояние",
+        "output": "Вывод: {{variable}}",
+        "noCode": "Кода пока нет",
+        "modeSimple": "простой",
+        "modeAdvanced": "расширенный",
+        "if": "Если",
+        "elseIf": "Иначе если",
+        "else": "Иначе",
+        "operationCount_one": "{{count}} операция",
+        "operationCount_few": "{{count}} операции",
+        "operationCount_many": "{{count}} операций",
+        "operationCount_other": "{{count}} операции",
+        "variableCount_one": "{{count}} переменная",
+        "variableCount_few": "{{count}} переменные",
+        "variableCount_many": "{{count}} переменных",
+        "variableCount_other": "{{count}} переменной",
+        "variableTitle": "Переменная: {{name}}",
+        "valueTitle": "Значение: {{value}}"
+      },
+      "preview": {
+        "executionDetails": "Сведения о выполнении",
+        "stepCount_one": "({{count}} шаг)",
+        "stepCount_few": "({{count}} шага)",
+        "stepCount_many": "({{count}} шагов)",
+        "stepCount_other": "({{count}} шага)",
+        "outputLabel": "Вывод:",
+        "errorLabel": "Ошибка:",
+        "artifacts": "Артефакты",
+        "minimapHeading": "Рабочий процесс",
+        "emptyTitle": "Протестируйте рабочий процесс",
+        "unsavedDraftAttachments": "Сохраните рабочий процесс, прежде чем прикреплять документы в предпросмотре."
+      },
+      "documents": {
+        "modeAll": "Все входные документы",
+        "modeNone": "Нет",
+        "modeChoose": "Выбрать…",
+        "selectPlaceholder": "Выберите документы...",
+        "searchPlaceholder": "Поиск переменных...",
+        "empty": "Нет документов из предыдущих узлов",
+        "refPlaceholder": "Добавить ссылку (например, A1)"
+      },
+      "variables": {
+        "globalContext": "Глобальный контекст",
+        "workflowInput": "Входные данные рабочего процесса",
+        "searchPlaceholder": "Поиск переменных...",
+        "empty": "Переменные не найдены",
+        "addContext": "Добавить контекст"
+      }
+    },
+    "typeModal": {
+      "title": "Создать нового агента",
+      "description": "Выберите тип агента, которого хотите создать",
+      "classicTitle": "Классический агент",
+      "classicDescription": "Создайте стандартного ИИ-агента с одной моделью, инструментами и источниками знаний",
+      "workflowTitle": "Агент рабочего процесса",
+      "workflowDescription": "Создавайте сложные многошаговые рабочие процессы с разными моделями, условной логикой и управлением состоянием"
     }
   },
   "components": {
@@ -1785,7 +2162,42 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "Предпросмотр изображения",
+      "remove": "Удалить файл"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "Список задач",
+        "note": "Заметка",
+        "memory": "Память"
+      },
+      "fallbackTitle": "Артефакт",
+      "todo": {
+        "done": "Выполнено: {{count}}",
+        "open": "Открыто: {{count}}",
+        "empty": "Задач пока нет"
+      },
+      "note": {
+        "lines_one": "{{count}} строка",
+        "lines_few": "{{count}} строки",
+        "lines_many": "{{count}} строк",
+        "lines_other": "{{count}} строки",
+        "empty": "Пустая заметка"
+      },
+      "notFound": "Артефакт не найден",
+      "loadFailed": "Не удалось загрузить артефакт",
+      "fetchFailed": "Не удалось получить артефакт",
+      "preview": "Предпросмотр артефакта",
+      "download": "Скачать",
+      "restore": "Восстановить",
+      "version": "Версия {{version}}",
+      "versionCurrent": "Версия {{version}} (текущая)",
+      "downloadFailed": "Не удалось скачать",
+      "restoreFailed": "Не удалось восстановить"
+    },
+    "profile": {
+      "avatarAlt": "Аватар пользователя"
     }
   },
   "pageNotFound": {
@@ -1801,7 +2213,14 @@
     "size": "Размер",
     "myFiles": "Мои файлы",
     "sharedWithMe": "Доступные мне",
-    "loadingMore": "Загрузка файлов..."
+    "loadingMore": "Загрузка файлов...",
+    "myDrive": "Мой диск",
+    "spaces": "Пространства",
+    "root": "Корень",
+    "shared": "Общие",
+    "connectTo": "Подключиться к {{provider}}",
+    "sessionExpiredFor": "Сеанс истек. Пожалуйста, переподключитесь к {{provider}}.",
+    "selectFilesFrom": "Выберите файлы из {{provider}}"
   },
   "actionButtons": {
     "openNewChat": "Открыть новый чат",
@@ -1812,7 +2231,13 @@
     "viewCode": "Просмотр кода",
     "decreaseZoom": "Уменьшить масштаб",
     "resetZoom": "Сбросить масштаб",
-    "increaseZoom": "Увеличить масштаб"
+    "increaseZoom": "Увеличить масштаб",
+    "download": "Скачать",
+    "downloadAs": "Скачать в {{format}}",
+    "code": "Код",
+    "loading": "Загрузка диаграммы...",
+    "codeTitle": "Код Mermaid",
+    "renderFailed": "Не удалось отрисовать диаграмму: {{message}}"
   },
   "navigation": {
     "agents": "Агенты",
@@ -1825,6 +2250,13 @@
         "insights": "Аналитика",
         "administration": "Администрирование"
       }
+    },
+    "openSidebar": "Открыть боковую панель",
+    "closeSidebar": "Закрыть боковую панель",
+    "social": {
+      "discord": "Присоединиться к сообществу в Discord",
+      "x": "Следите за нами в X",
+      "github": "Открыть на GitHub"
     }
   },
   "teams": {
@@ -1835,7 +2267,8 @@
       "roleAdmin": "Администратор",
       "roleMember": "Участник",
       "manageTeam": "Управление командой",
-      "createTeam": "Создать команду"
+      "createTeam": "Создать команду",
+      "logoAlt": "Логотип DocsGPT"
     }
   },
   "notification": {
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index beb8acf7..4df98e2e 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -8,6 +8,7 @@
   "sourceDocs": "原始文件",
   "none": "無",
   "loading": "載入中...",
+  "retry": "重試",
   "cancel": "取消",
   "help": "幫助",
   "emailUs": "給我們發電郵",
@@ -23,7 +24,10 @@
     "sharedTitle": "已與您分享",
     "sharedBody": "已與您的團隊分享{{type}}：{{name}}（{{access}}）",
     "sharedBodyNoName": "已與您的團隊分享一個{{type}}（{{access}}）",
-    "dismiss": "關閉"
+    "dismiss": "關閉",
+    "toolApprovalTitle": "需要核准工具",
+    "toolApprovalReview": "檢視",
+    "toolApprovalFallbackName": "對話"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "設定",
     "general": {
       "label": "一般",
-      "selectTheme": "選擇主題",
+      "subtitle": "選擇 DocsGPT 的外觀、介面語言以及聊天使用的提示詞。",
+      "sections": {
+        "appearance": "外觀",
+        "chat": "聊天",
+        "dangerZone": "危險操作"
+      },
+      "theme": "主題",
+      "themeDescription": "淺色或深色介面。",
+      "language": "語言",
+      "languageDescription": "選單和標籤的語言。",
       "light": "淺色",
       "dark": "深色",
-      "selectLanguage": "選擇語言",
       "chunks": "每次查詢處理的區塊數",
       "prompt": "使用中的提示",
+      "promptDescription": "不使用代理的聊天所用的系統提示詞。代理會使用各自的提示詞。",
       "deleteAllLabel": "刪除所有對話",
       "deleteAllBtn": "全部刪除",
+      "deleteAllDescription": "永久刪除您帳戶中的所有對話。此操作無法復原。",
       "addNew": "新增",
       "convHistory": "對話歷史記錄",
       "none": "無",
@@ -72,7 +86,14 @@
       "high": "高",
       "unlimited": "無限制",
       "default": "預設",
-      "add": "添加"
+      "add": "添加",
+      "promptActions": {
+        "select": "選擇提示詞",
+        "edit": "編輯提示詞",
+        "view": "檢視提示詞",
+        "duplicate": "複製提示詞",
+        "delete": "刪除提示詞"
+      }
     },
     "sources": {
       "title": "在這裡您可以管理所有可用的來源檔案以及您上傳的檔案。",
@@ -111,7 +132,6 @@
         "edit": "編輯",
         "save": "儲存",
         "cancel": "取消",
-        "saving": "儲存中…",
         "saveFailed": "無法儲存頁面。請再試一次。",
         "forbidden": "您沒有編輯此頁面的權限。",
         "conflict": "此頁面在您開啟後已變更，並已重新載入。您的編輯內容如下——請重新套用後再次儲存。",
@@ -220,6 +240,7 @@
       "deleteWarning": "您確定要刪除 \"{{name}}\" 嗎？",
       "confirmDelete": "您確定要刪除此檔案嗎？此操作無法復原。",
       "backToAll": "返回所有來源",
+      "back": "返回",
       "chunks": "文本塊",
       "noChunks": "未找到文本塊",
       "noChunksAlt": "未找到文本塊",
@@ -323,7 +344,6 @@
         "subtitle": "設定「{{name}}」的分塊與檢索方式。",
         "subtitleGeneric": "設定此來源的分塊與檢索方式。",
         "save": "儲存",
-        "saving": "儲存中…",
         "readOnly": "您對此共享來源僅有檢視權限，無法變更其設定。",
         "chunkingChangeHint": "您變更了分塊設定。儲存後需重新索引此來源才會生效。",
         "prescreenInvalidHint": "請檢查預篩選數值：擷取候選數不得少於區塊數，且保留區塊數不得超過擷取候選數。",
@@ -370,6 +390,7 @@
       "failed": "失敗",
       "skipped": "已略過",
       "successful": "成功",
+      "otherSeries": "其他",
       "stats": {
         "messages": "訊息",
         "tokens": "Token",
@@ -668,12 +689,19 @@
       "description": "描述",
       "descriptionPlaceholder": "輸入描述",
       "bodyContentType": "主體內容類型",
+      "bodyTypeHint": {
+        "json": "最常用的格式。適用於現代 REST API。",
+        "formUrlencoded": "標準表單提交格式。最適合舊版 API 和登入表單。",
+        "multipart": "適用於需要 multipart 格式的 API。不支援透過 LLM 上傳檔案。",
+        "text": "純文字資料。每個欄位佔一行。",
+        "xml": "結構化 XML 格式。適用於 SOAP 和企業級 API。",
+        "octetStream": "原始二進位資料，傳輸時使用 base64 編碼。"
+      },
       "headers": "標頭",
       "queryParameters": "查詢參數",
       "body": "主體",
       "deleteActionWarning": "您確定要刪除操作 \"{{name}}\" 嗎？",
       "save": "儲存",
-      "saving": "儲存中...",
       "saveFailed": "儲存工具設定失敗",
       "fieldName": "欄位名稱",
       "fieldType": "欄位類型",
@@ -699,8 +727,6 @@
         "password": "密碼",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -739,7 +765,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}}為必填項",
+        "positiveNumber": "必須是正數",
+        "maxTimeout": "逾時時間最長為 300 秒"
+      },
+      "headerValuePlaceholder": "例如：application/json",
+      "toolIconTitle": "{{name}} 圖示"
     },
     "devices": {
       "label": "裝置",
@@ -790,10 +823,11 @@
         "installLink": "還沒有 docsgpt-cli？安裝它",
         "stepTwo": "2. 在提示時輸入此配對碼：",
         "start": "產生配對碼",
-        "starting": "處理中…",
         "waitingForCli": "等待 CLI 兌換配對碼…",
         "cancel": "取消"
-      }
+      },
+      "auditDurationValue": "{{value}} 毫秒",
+      "fallbackName": "裝置"
     },
     "customModels": {
       "label": "自訂模型",
@@ -805,9 +839,7 @@
       "addTitle": "新增自訂模型",
       "editTitle": "編輯自訂模型",
       "save": "儲存",
-      "saving": "儲存中",
       "testConnection": "測試連線",
-      "testing": "測試中",
       "testSuccess": "連線成功。",
       "testHintNew": "請填寫 Base URL、模型 ID 與 API 金鑰以啟用連線測試。",
       "disabledBadge": "已停用",
@@ -908,15 +940,6 @@
         "workflows_one": "{{count}} 個工作流程",
         "workflows_other": "{{count}} 個工作流程"
       },
-      "relative": {
-        "now": "剛剛",
-        "minutes_one": "{{count}} 分鐘前",
-        "minutes_other": "{{count}} 分鐘前",
-        "hours_one": "{{count}} 小時前",
-        "hours_other": "{{count}} 小時前",
-        "days_one": "{{count}} 天前",
-        "days_other": "{{count}} 天前"
-      },
       "families": {
         "agents": "代理",
         "sources": "來源",
@@ -954,7 +977,6 @@
         "retry": "重試",
         "cancel": "取消",
         "submit": "建立權杖",
-        "submitting": "建立中",
         "error": "建立權杖失敗，請再試一次。"
       },
       "created": {
@@ -973,7 +995,6 @@
         "warning": "要為「{{name}}」產生新的密鑰嗎？目前的密鑰會立即失效，所有使用它的地方都需要更新。名稱、權限範圍和限制維持不變。",
         "newExpiration": "新的到期時間",
         "submit": "重新產生",
-        "submitting": "正在重新產生…",
         "error": "重新產生權杖失敗，請再試一次。",
         "done": {
           "title": "權杖已重新產生",
@@ -1030,7 +1051,8 @@
         "collapseDetails": "摺疊上傳詳情",
         "dismiss": "關閉上傳通知",
         "uploadProgress": "上傳進度 {{progress}}%",
-        "clear": "清除"
+        "clear": "清除",
+        "ingestionFailed": "匯入失敗。"
       },
       "showAdvanced": "顯示進階選項",
       "hideAdvanced": "隱藏進階選項",
@@ -1096,7 +1118,6 @@
           "pickerFailed": "無法開啟檔案選擇器。請重試。",
           "selectedFiles": "已選擇的檔案",
           "selectFiles": "選擇檔案",
-          "loading": "載入中...",
           "noFilesSelected": "未選擇檔案或資料夾",
           "folders": "資料夾",
           "files": "檔案",
@@ -1122,6 +1143,16 @@
           "folderAlt": "資料夾",
           "fileAlt": "檔案"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "AWS 存取金鑰 ID",
+        "awsSecretAccessKey": "AWS 秘密存取金鑰",
+        "bucket": "儲存貯體名稱",
+        "prefix": "路徑前綴（選填）",
+        "region": "AWS 區域",
+        "endpointUrl": "自訂端點 URL（選填）",
+        "initialContent": "初始內容（選填）"
       }
     },
     "createAPIKey": {
@@ -1162,7 +1193,10 @@
       "apiKeyPlaceholder": "輸入 API 金鑰 / OAuth",
       "addButton": "新增工具",
       "closeButton": "關閉",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "{{field}} 為必填",
+      "positiveNumber": "必須是正數",
+      "maxTimeout": "逾時上限為 300 秒"
     },
     "prompts": {
       "addPrompt": "新增提示",
@@ -1283,15 +1317,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "新增 JWT 權杖",
+      "label": "JWT 權杖",
+      "save": "儲存權杖"
     }
   },
   "sharedConv": {
     "subtitle": "使用以下工具建立",
     "button": "開始使用 DocsGPT",
-    "meta": "DocsGPT 使用生成式 AI，請使用原始資料來源審閱重要資訊。"
+    "meta": "DocsGPT 使用生成式 AI，請使用原始資料來源審閱重要資訊。",
+    "metaDescription": "使用 DocsGPT 分享的對話"
   },
   "convTile": {
     "share": "分享",
+    "menu": "對話操作",
     "delete": "刪除",
     "rename": "重新命名",
     "save": "儲存",
@@ -1313,7 +1354,8 @@
     "edit": {
       "update": "更新",
       "cancel": "取消",
-      "placeholder": "輸入更新的查詢..."
+      "placeholder": "輸入更新的查詢...",
+      "label": "編輯"
     },
     "sources": {
       "title": "來源",
@@ -1327,9 +1369,13 @@
     },
     "attachments": {
       "attach": "附件",
-      "remove": "刪除附件"
+      "remove": "刪除附件",
+      "attached": "附件",
+      "failed": "失敗",
+      "attachment": "附件"
     },
     "retry": "重試",
+    "failedTitle": "無法產生回覆",
     "reasoning": "推理",
     "wikiWrite": {
       "edited": "已編輯 Wiki",
@@ -1382,7 +1428,55 @@
     "quotaExceeded": {
       "tokens": "您已使用 {{limit}} 權杖配額中的 {{used}}。配額將於 {{resetsAt}} 重設。",
       "cost": "您已使用 {{limit}} 用量預算中的 {{used}}。預算將於 {{resetsAt}} 重設。"
-    }
+    },
+    "voice": {
+      "start": "語音輸入",
+      "stopRecording": "停止錄音",
+      "transcribingAudio": "正在轉錄音訊",
+      "voice": "語音",
+      "stop": "停止",
+      "transcribing": "轉錄中",
+      "unavailable": "語音輸入目前無法使用。",
+      "insecure": "語音輸入需要安全連線（HTTPS 或 localhost）。",
+      "unsupported": "此瀏覽器不支援語音輸入。",
+      "noWebAudio": "語音輸入需要此瀏覽器支援 Web Audio。",
+      "micBlocked": "麥克風存取遭到封鎖。請允許麥克風權限後再試一次。",
+      "micNotFound": "在此裝置上找不到麥克風。",
+      "micBusy": "麥克風無法使用或已被占用。",
+      "micInterrupted": "錄音開始前麥克風存取被中斷。",
+      "micDenied": "麥克風存取遭拒。",
+      "transcribeFailed": "音訊轉錄失敗。",
+      "finalizeFailed": "無法完成即時轉錄。",
+      "startFailed": "無法啟動即時轉錄。"
+    },
+    "selectModel": "選擇模型",
+    "question": {
+      "expand": "顯示完整訊息",
+      "collapse": "收合"
+    },
+    "exportMarkdown": "匯出為 Markdown",
+    "feedback": {
+      "like": "讚",
+      "removeLike": "取消讚",
+      "dislike": "倒讚",
+      "removeDislike": "取消倒讚"
+    },
+    "toolApproval": {
+      "approve": "核准",
+      "approveAlways": "核准，不再詢問",
+      "deny": "拒絕",
+      "details": "詳細資料",
+      "denyReasonPlaceholder": "拒絕原因（選填）…"
+    },
+    "research": {
+      "title": "研究",
+      "planning": "正在規劃研究…",
+      "researching": "正在研究…",
+      "synthesizing": "正在撰寫報告…",
+      "complete": "已完成",
+      "researched": "已研究 {{count}} 個主題"
+    },
+    "openFile": "開啟檔案"
   },
   "agents": {
     "title": "代理",
@@ -1392,7 +1486,8 @@
       "unpin": "取消釘選代理",
       "open": "開啟",
       "remove": "移除",
-      "draft": "草稿"
+      "draft": "草稿",
+      "actions": "代理操作"
     },
     "description": "探索並創建結合指令、額外知識和任意技能組合的DocsGPT自訂版本",
     "newAgent": "新建代理",
@@ -1518,7 +1613,8 @@
       },
       "agentTypes": {
         "classic": "經典",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "研究"
       },
       "labels": {
         "defaultModel": "預設模型"
@@ -1673,13 +1769,95 @@
           "nov": "11月",
           "dec": "12月"
         }
+      },
+      "status": {
+        "active": "啟用中",
+        "paused": "已暫停",
+        "completed": "已完成",
+        "cancelled": "已取消",
+        "success": "成功",
+        "failed": "失敗",
+        "skipped": "已略過",
+        "running": "執行中",
+        "pending": "等待中",
+        "timeout": "逾時"
+      },
+      "trigger": {
+        "cron": "排程",
+        "manual": "手動"
+      },
+      "runDetails": {
+        "title": "執行詳情",
+        "status": "狀態",
+        "scheduledFor": "排定時間",
+        "started": "開始",
+        "finished": "結束",
+        "tokens": "權杖",
+        "tokensValue": "提示 {{prompt}} · 生成 {{generated}}",
+        "trigger": "觸發方式",
+        "error": "錯誤",
+        "errorWithType": "錯誤（{{type}}）",
+        "output": "輸出",
+        "truncated": "（已截斷）"
+      },
+      "timezoneMeta": "時區：{{timezone}}",
+      "nextRunMeta": "下次：{{time}}",
+      "toolCard": {
+        "cancelFailed": "取消失敗",
+        "taskCancelled": "已取消排程工作。",
+        "pendingCount_other": "{{count}} 個待執行的排程工作",
+        "schedulingFailed": "排程失敗",
+        "scheduling": "正在排程…",
+        "scheduled": "排程工作",
+        "pendingCount_one": "{{count}} 個待執行的排程工作"
+      },
+      "cron": {
+        "daily": "每天 {{time}}",
+        "weekly": "每週{{day}} {{time}}",
+        "monthly": "每月 {{day}} 日 {{time}}",
+        "yearly": "每年{{month}}{{day}}日 {{time}}",
+        "custom": "自訂：{{expression}}",
+        "dayNames": {
+          "sun": "日",
+          "mon": "一",
+          "tue": "二",
+          "wed": "三",
+          "thu": "四",
+          "fri": "五",
+          "sat": "六"
+        },
+        "monthNames": {
+          "jan": "1月",
+          "feb": "2月",
+          "mar": "3月",
+          "apr": "4月",
+          "may": "5月",
+          "jun": "6月",
+          "jul": "7月",
+          "aug": "8月",
+          "sep": "9月",
+          "oct": "10月",
+          "nov": "11月",
+          "dec": "12月"
+        }
+      },
+      "runLog": {
+        "when": "時間",
+        "details": "詳細資料",
+        "empty": "此排程尚無執行紀錄。"
       }
     },
     "shared": {
-      "notFound": "未找到代理。請確保代理已共享。"
+      "notFound": "未找到代理。請確保代理已共享。",
+      "logoAlt": "代理標誌",
+      "sharedBy": "來自 {{name}}",
+      "sharedOn": "分享於 {{date}}",
+      "connectedTools": "已連接的工具",
+      "toolIconTitle": "{{name}} 圖示"
     },
     "preview": {
-      "testMessage": "在此測試您的代理。已發佈的代理可以在對話中使用。"
+      "testMessage": "在此測試您的代理。已發佈的代理可以在對話中使用。",
+      "emptyTitle": "測試你的代理"
     },
     "deleteConfirmation": "您確定要刪除此代理嗎？",
     "folders": {
@@ -1697,7 +1875,9 @@
       "backToRoot": "返回",
       "currentFolder": "此資料夾",
       "noSubfolders": "沒有子資料夾",
-      "noFolders": "暫無資料夾"
+      "openFolder": "開啟資料夾",
+      "noFolders": "暫無資料夾",
+      "menuAriaLabel": "{{folderName}} 的操作"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1721,6 +1901,198 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "此產出物無法預覽",
+        "loadListFailed": "無法載入產出物",
+        "loadFailed": "無法載入產出物",
+        "loading": "正在載入產出物...",
+        "inProgress": "執行中——節點產生的產出物會顯示在這裡。",
+        "empty": "此次執行未產生產出物。",
+        "back": "返回產出物列表",
+        "untitled": "產出物 {{id}}",
+        "fileKind": "檔案"
+      },
+      "builder": {
+        "deleteFailed": "無法刪除工作流程代理",
+        "updateWorkflowFailed": "無法更新工作流程",
+        "updateAgentFailed": "無法更新代理",
+        "createWorkflowFailed": "無法建立工作流程",
+        "createAgentFailed": "無法建立代理",
+        "saveFailed": "無法儲存工作流程",
+        "defaultDescription": "工作流程代理：{{name}}",
+        "newWorkflow": "新增工作流程",
+        "editDetails": "編輯工作流程詳細資料",
+        "workflowName": "工作流程名稱",
+        "workflowNamePlaceholder": "輸入工作流程名稱",
+        "workflowDescriptionPlaceholder": "描述此工作流程的用途",
+        "agentImageAlt": "代理圖片",
+        "currentImage": "目前圖片",
+        "agentImage": "代理圖片",
+        "agentImageHint": "圖片更新將於下次儲存時生效。",
+        "done": "完成",
+        "unablePreview": "無法預覽工作流程",
+        "unableSave": "無法儲存工作流程",
+        "unablePublish": "無法發佈工作流程",
+        "coreNodes": "核心節點",
+        "logicNodes": "邏輯與資料",
+        "aiAgent": "AI 代理",
+        "setStateHint": "修改工作流程變數",
+        "conditionHint": "條件分支",
+        "codeHint": "在沙箱中執行程式碼",
+        "startNode": "開始節點",
+        "endNode": "結束節點",
+        "stateTitle": "設定全域變數",
+        "nodeId": "節點 ID",
+        "title": "標題",
+        "titlePlaceholder": "輸入節點標題",
+        "agentType": "代理類型",
+        "agentTypePlaceholder": "選擇代理類型",
+        "model": "模型",
+        "modelPlaceholder": "選擇模型",
+        "systemPrompt": "系統提示詞",
+        "systemPromptPlaceholder": "代理的系統提示詞",
+        "promptTemplate": "提示詞範本",
+        "promptTemplatePlaceholder": "使用 {{example}} 插入動態內容",
+        "outputVariable": "輸出變數",
+        "outputVariablePlaceholder": "輸出的變數名稱",
+        "streamToUser": "將輸出串流給使用者",
+        "sources": "來源",
+        "documents": "文件",
+        "documentsHint": "從上傳或上游節點傳給此代理的文件。",
+        "filePassing": "檔案傳遞",
+        "filePassingHint": "自動：模型支援時以原生方式傳送，否則擷取文字。",
+        "structuredOutput": "結構化輸出（JSON Schema）",
+        "modelNoStructuredOutput": "所選模型不支援結構化輸出。",
+        "validSchema": "JSON Schema 有效",
+        "invalidSchema": "JSON Schema 無效：{{error}}",
+        "noteContent": "備註內容",
+        "noteContentPlaceholder": "輸入備註內容",
+        "stateIntro": "為工作流程的狀態變數指定值",
+        "assignValue": "指定值",
+        "celHint": "使用 Common Expression Language 撰寫自訂運算式。直接以名稱參照狀態（<code>query</code>），而非 <code>{{braced}}</code>。",
+        "learnMore": "瞭解更多",
+        "toVariable": "目標變數",
+        "conditionIntro": "建立條件以分支你的工作流程",
+        "modeSimple": "簡易",
+        "modeAdvanced": "進階",
+        "caseNamePlaceholder": "分支名稱（選填）",
+        "variablePlaceholder": "變數",
+        "valuePlaceholder": "值",
+        "opContains": "包含",
+        "opStartsWith": "開頭為",
+        "conditionPlaceholder": "輸入條件，例如 query.contains(\"refund\")",
+        "codeIntro": "在工作流程沙箱中執行程式碼。產生的檔案會儲存為產出物。",
+        "inputFiles": "輸入檔案",
+        "inputFilesHint": "在沙箱中以檔案形式放置的產出物/上游參照（每個都會成為 inputs/<name>）。",
+        "timeout": "逾時（秒）",
+        "optional": "選填",
+        "cannotDeleteStart": "無法刪除開始節點",
+        "deleteNode": "刪除節點",
+        "deleteConfirm": "確定要刪除「{{name}}」嗎？",
+        "deleteConfirmUnnamed": "確定要刪除此工作流程代理嗎？"
+      },
+      "validation": {
+        "nameRequired": "工作流程名稱為必填",
+        "oneStart": "工作流程必須有且僅有一個開始節點",
+        "needEnd": "工作流程必須至少有一個結束節點",
+        "needAgent": "工作流程必須至少有一個 AI 代理節點",
+        "agentModel": "代理「{{name}}」必須選擇模型",
+        "agentStructuredOutput": "代理「{{name}}」所選模型不支援結構化輸出",
+        "agentSchema": "代理「{{name}}」的 JSON Schema：{{error}}",
+        "startConnected": "開始節點必須連接到其他節點",
+        "endIncoming": "結束節點「{{name}}」必須有傳入連線",
+        "edgeSource": "連線參照了不存在的來源節點",
+        "edgeTarget": "連線參照了不存在的目標節點",
+        "conditionNeedsCase": "條件「{{name}}」必須至少有一個包含運算式的分支",
+        "conditionCaseNoHandle": "條件「{{name}}」有一個缺少分支控點的分支",
+        "conditionDuplicateHandle": "條件「{{name}}」的分支控點「{{handle}}」重複",
+        "conditionTwoOutgoing": "條件「{{name}}」必須至少有 2 個傳出連線",
+        "conditionEdgeNoHandle": "條件「{{name}}」有一個缺少分支控點的連線",
+        "conditionUnknownBranch": "條件「{{name}}」有來自未知分支「{{handle}}」的連線",
+        "conditionMultipleEdges": "條件「{{name}}」的分支「{{handle}}」有多個連線",
+        "conditionNeedsElse": "條件「{{name}}」必須有 Else 分支",
+        "caseNoConnection": "條件「{{name}}」的分支「{{handle}}」有運算式但沒有分支連線",
+        "caseNoExpression": "條件「{{name}}」的分支「{{handle}}」有分支連線但沒有運算式",
+        "caseNoVariable": "條件「{{name}}」的分支「{{handle}}」在簡易模式下必須指定變數",
+        "branchReachEnd": "條件「{{name}}」的分支「{{handle}}」最終必須到達結束節點",
+        "codeRequired": "程式碼節點「{{name}}」必須包含要執行的程式碼",
+        "codeSchema": "程式碼節點「{{name}}」的 JSON Schema：{{error}}"
+      },
+      "schema": {
+        "notObject": "必須是有效的 JSON 物件",
+        "missingType": "必須包含 \"type\" 或 \"schema\" 欄位",
+        "invalidJson": "必須是有效的 JSON"
+      },
+      "filePassing": {
+        "auto": "自動",
+        "native": "原生",
+        "extract": "擷取"
+      },
+      "mobileBlocker": {
+        "title": "需要桌上型裝置",
+        "body": "工作流程建構器需要更大的螢幕才能獲得最佳體驗。請在桌上型電腦或筆記型電腦上開啟此頁面。"
+      },
+      "nodes": {
+        "start": "開始",
+        "startHint": "工作流程的入口",
+        "end": "結束",
+        "endHint": "工作流程完成",
+        "agent": "代理",
+        "note": "備註",
+        "condition": "If / Else",
+        "code": "程式碼",
+        "setState": "設定狀態",
+        "output": "輸出：{{variable}}",
+        "noCode": "尚無程式碼",
+        "modeSimple": "簡易",
+        "modeAdvanced": "進階",
+        "if": "If",
+        "elseIf": "Else if",
+        "else": "Else",
+        "operationCount_other": "{{count}} 個操作",
+        "variableCount_other": "{{count}} 個變數",
+        "variableTitle": "變數：{{name}}",
+        "valueTitle": "值：{{value}}",
+        "operationCount_one": "{{count}} 個操作",
+        "variableCount_one": "{{count}} 個變數"
+      },
+      "preview": {
+        "executionDetails": "執行詳細資料",
+        "stepCount_other": "（{{count}} 步）",
+        "outputLabel": "輸出：",
+        "errorLabel": "錯誤：",
+        "artifacts": "產出物",
+        "minimapHeading": "工作流程",
+        "emptyTitle": "測試工作流程",
+        "unsavedDraftAttachments": "在預覽中附加文件前，請先儲存工作流程。",
+        "stepCount_one": "（{{count}} 步）"
+      },
+      "documents": {
+        "modeAll": "所有輸入文件",
+        "modeNone": "無",
+        "modeChoose": "選擇…",
+        "selectPlaceholder": "選擇文件...",
+        "searchPlaceholder": "搜尋變數...",
+        "empty": "沒有上游文件",
+        "refPlaceholder": "新增參照（例如 A1）"
+      },
+      "variables": {
+        "globalContext": "全域內容",
+        "workflowInput": "工作流程輸入",
+        "searchPlaceholder": "搜尋變數...",
+        "empty": "找不到變數",
+        "addContext": "新增內容"
+      }
+    },
+    "typeModal": {
+      "title": "建立新代理",
+      "description": "選擇要建立的代理類型",
+      "classicTitle": "經典代理",
+      "classicDescription": "建立一個使用單一模型、工具和知識來源的標準 AI 代理",
+      "workflowTitle": "工作流程代理",
+      "workflowDescription": "設計包含不同模型、條件邏輯和狀態管理的複雜多步驟工作流程"
     }
   },
   "components": {
@@ -1729,7 +2101,39 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "圖片預覽",
+      "remove": "移除檔案"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "待辦清單",
+        "note": "筆記",
+        "memory": "記憶"
+      },
+      "fallbackTitle": "Artifact",
+      "todo": {
+        "done": "已完成 {{count}}",
+        "open": "未完成 {{count}}",
+        "empty": "尚無待辦事項"
+      },
+      "note": {
+        "lines_other": "{{count}} 行",
+        "empty": "空白筆記"
+      },
+      "notFound": "找不到 Artifact",
+      "loadFailed": "無法載入 Artifact",
+      "fetchFailed": "無法取得 Artifact",
+      "preview": "Artifact 預覽",
+      "download": "下載",
+      "restore": "還原",
+      "version": "版本 {{version}}",
+      "versionCurrent": "版本 {{version}}（目前）",
+      "downloadFailed": "下載失敗",
+      "restoreFailed": "還原失敗"
+    },
+    "profile": {
+      "avatarAlt": "使用者頭像"
     }
   },
   "pageNotFound": {
@@ -1745,7 +2149,14 @@
     "size": "大小",
     "myFiles": "我的檔案",
     "sharedWithMe": "與我共用",
-    "loadingMore": "載入更多檔案..."
+    "loadingMore": "載入更多檔案...",
+    "myDrive": "我的雲端硬碟",
+    "spaces": "空間",
+    "root": "根目錄",
+    "shared": "共用",
+    "connectTo": "連接到 {{provider}}",
+    "sessionExpiredFor": "工作階段已過期。請重新連接到 {{provider}}。",
+    "selectFilesFrom": "從 {{provider}} 選擇檔案"
   },
   "actionButtons": {
     "openNewChat": "開啟新聊天",
@@ -1756,7 +2167,13 @@
     "viewCode": "查看程式碼",
     "decreaseZoom": "縮小",
     "resetZoom": "重設縮放",
-    "increaseZoom": "放大"
+    "increaseZoom": "放大",
+    "download": "下載",
+    "downloadAs": "下載為 {{format}}",
+    "code": "程式碼",
+    "loading": "正在載入圖表...",
+    "codeTitle": "Mermaid 程式碼",
+    "renderFailed": "無法繪製圖表：{{message}}"
   },
   "navigation": {
     "agents": "代理",
@@ -1769,6 +2186,13 @@
         "insights": "洞察",
         "administration": "管理"
       }
+    },
+    "openSidebar": "開啟側邊欄",
+    "closeSidebar": "關閉側邊欄",
+    "social": {
+      "discord": "加入 Discord 社群",
+      "x": "在 X 上追蹤我們",
+      "github": "在 GitHub 上查看"
     }
   },
   "teams": {
@@ -1779,7 +2203,8 @@
       "roleAdmin": "管理員",
       "roleMember": "成員",
       "manageTeam": "管理團隊",
-      "createTeam": "建立團隊"
+      "createTeam": "建立團隊",
+      "logoAlt": "DocsGPT 標誌"
     }
   },
   "notification": {
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 540c40a4..8e16bd23 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -8,6 +8,7 @@
   "sourceDocs": "源",
   "none": "无",
   "loading": "加载中...",
+  "retry": "重试",
   "cancel": "取消",
   "help": "帮助",
   "emailUs": "给我们发邮件",
@@ -23,7 +24,10 @@
     "sharedTitle": "与您共享",
     "sharedBody": "{{type}}已共享给您的团队：{{name}}（{{access}}）",
     "sharedBodyNoName": "已与您的团队共享一个{{type}}（{{access}}）",
-    "dismiss": "忽略"
+    "dismiss": "忽略",
+    "toolApprovalTitle": "需要批准工具",
+    "toolApprovalReview": "查看",
+    "toolApprovalFallbackName": "对话"
   },
   "demo": [
     {
@@ -56,14 +60,24 @@
     "label": "设置",
     "general": {
       "label": "一般",
-      "selectTheme": "选择主题",
+      "subtitle": "选择 DocsGPT 的外观、界面语言以及聊天使用的提示词。",
+      "sections": {
+        "appearance": "外观",
+        "chat": "聊天",
+        "dangerZone": "危险操作"
+      },
+      "theme": "主题",
+      "themeDescription": "浅色或深色界面。",
+      "language": "语言",
+      "languageDescription": "菜单和标签的语言。",
       "light": "浅色",
       "dark": "暗色",
-      "selectLanguage": "选择语言",
       "chunks": "每个查询处理的块",
       "prompt": "提示",
+      "promptDescription": "不使用智能体的聊天所用的系统提示词。智能体使用各自的提示词。",
       "deleteAllLabel": "删除所有对话",
       "deleteAllBtn": "删除所有",
+      "deleteAllDescription": "永久删除您账户中的所有对话。此操作无法撤销。",
       "addNew": "添加新的",
       "convHistory": "对话历史",
       "none": "无",
@@ -72,7 +86,14 @@
       "high": "高",
       "unlimited": "无限",
       "default": "默认",
-      "add": "添加"
+      "add": "添加",
+      "promptActions": {
+        "select": "选择提示词",
+        "edit": "编辑提示词",
+        "view": "查看提示词",
+        "duplicate": "复制提示词",
+        "delete": "删除提示词"
+      }
     },
     "sources": {
       "title": "在这里您可以管理所有可用的源文件以及您上传的文件。",
@@ -111,7 +132,6 @@
         "edit": "编辑",
         "save": "保存",
         "cancel": "取消",
-        "saving": "保存中…",
         "saveFailed": "无法保存页面，请重试。",
         "forbidden": "您没有权限编辑此页面。",
         "conflict": "此页面在您打开后已被修改，并已重新加载。您的编辑内容在下方——请重新应用并再次保存。",
@@ -220,6 +240,7 @@
       "deleteWarning": "您确定要删除 \"{{name}}\" 吗？",
       "confirmDelete": "您确定要删除此文件吗？此操作无法撤销。",
       "backToAll": "返回所有来源",
+      "back": "返回",
       "chunks": "文本块",
       "noChunks": "未找到文本块",
       "noChunksAlt": "未找到文本块",
@@ -323,7 +344,6 @@
         "subtitle": "配置“{{name}}”的分块与检索方式。",
         "subtitleGeneric": "配置此来源的分块与检索方式。",
         "save": "保存",
-        "saving": "保存中…",
         "readOnly": "您对此共享来源仅有查看权限，无法更改其配置。",
         "chunkingChangeHint": "您更改了分块设置。保存后需要重新索引此来源才能生效。",
         "prescreenInvalidHint": "请检查预筛选参数：获取的候选数量至少应等于文本块数量，且保留的文本块数不得超过获取的候选数量。",
@@ -370,6 +390,7 @@
       "failed": "失败",
       "skipped": "已跳过",
       "successful": "成功",
+      "otherSeries": "其他",
       "stats": {
         "messages": "消息",
         "tokens": "令牌",
@@ -668,12 +689,19 @@
       "description": "描述",
       "descriptionPlaceholder": "输入描述",
       "bodyContentType": "请求体内容类型",
+      "bodyTypeHint": {
+        "json": "最常用的格式。适用于现代 REST API。",
+        "formUrlencoded": "标准表单提交格式。最适合旧版 API 和登录表单。",
+        "multipart": "适用于需要 multipart 格式的 API。不支持通过 LLM 上传文件。",
+        "text": "纯文本数据。每个字段占一行。",
+        "xml": "结构化 XML 格式。适用于 SOAP 和企业级 API。",
+        "octetStream": "原始二进制数据，传输时使用 base64 编码。"
+      },
       "headers": "请求头",
       "queryParameters": "查询参数",
       "body": "请求体",
       "deleteActionWarning": "您确定要删除操作 \"{{name}}\" 吗？",
       "save": "保存",
-      "saving": "保存中...",
       "saveFailed": "保存工具配置失败",
       "fieldName": "字段名称",
       "fieldType": "字段类型",
@@ -699,8 +727,6 @@
         "password": "密码",
         "timeout": "Timeout (seconds)",
         "testConnection": "Test Connection",
-        "testing": "Testing",
-        "saving": "Saving",
         "save": "Save",
         "cancel": "Cancel",
         "noAuth": "No Authentication",
@@ -739,7 +765,14 @@
           "oauthTimeout": "OAuth process timed out, please try again",
           "timeoutRange": "Timeout must be between 1 and 300 seconds"
         }
-      }
+      },
+      "configErrors": {
+        "required": "{{field}}为必填项",
+        "positiveNumber": "必须是正数",
+        "maxTimeout": "超时时间最长为 300 秒"
+      },
+      "headerValuePlaceholder": "例如：application/json",
+      "toolIconTitle": "{{name}} 图标"
     },
     "devices": {
       "label": "设备",
@@ -790,10 +823,11 @@
         "installLink": "还没有 docsgpt-cli？安装它",
         "stepTwo": "2. 在提示时输入此代码：",
         "start": "生成代码",
-        "starting": "处理中…",
         "waitingForCli": "等待 CLI 兑换代码…",
         "cancel": "取消"
-      }
+      },
+      "auditDurationValue": "{{value}} 毫秒",
+      "fallbackName": "设备"
     },
     "customModels": {
       "label": "自定义模型",
@@ -805,9 +839,7 @@
       "addTitle": "添加自定义模型",
       "editTitle": "编辑自定义模型",
       "save": "保存",
-      "saving": "保存中",
       "testConnection": "测试连接",
-      "testing": "测试中",
       "testSuccess": "连接成功。",
       "testHintNew": "请填写 Base URL、模型 ID 和 API 密钥以启用连接测试。",
       "disabledBadge": "已禁用",
@@ -908,15 +940,6 @@
         "workflows_one": "{{count}} 个工作流",
         "workflows_other": "{{count}} 个工作流"
       },
-      "relative": {
-        "now": "刚刚",
-        "minutes_one": "{{count}} 分钟前",
-        "minutes_other": "{{count}} 分钟前",
-        "hours_one": "{{count}} 小时前",
-        "hours_other": "{{count}} 小时前",
-        "days_one": "{{count}} 天前",
-        "days_other": "{{count}} 天前"
-      },
       "families": {
         "agents": "代理",
         "sources": "来源",
@@ -954,7 +977,6 @@
         "retry": "重试",
         "cancel": "取消",
         "submit": "创建令牌",
-        "submitting": "正在创建",
         "error": "创建令牌失败，请重试。"
       },
       "created": {
@@ -973,7 +995,6 @@
         "warning": "要为“{{name}}”生成新的密钥吗？当前密钥将立即失效，所有使用它的地方都需要更新。名称、权限范围和限制保持不变。",
         "newExpiration": "新的过期时间",
         "submit": "重新生成",
-        "submitting": "正在重新生成…",
         "error": "重新生成令牌失败，请重试。",
         "done": {
           "title": "令牌已重新生成",
@@ -1030,7 +1051,8 @@
         "collapseDetails": "折叠上传详情",
         "dismiss": "关闭上传通知",
         "uploadProgress": "上传进度 {{progress}}%",
-        "clear": "清除"
+        "clear": "清除",
+        "ingestionFailed": "导入失败。"
       },
       "showAdvanced": "显示高级选项",
       "hideAdvanced": "隐藏高级选项",
@@ -1096,7 +1118,6 @@
           "pickerFailed": "无法打开文件选择器。请重试。",
           "selectedFiles": "已选择的文件",
           "selectFiles": "选择文件",
-          "loading": "加载中...",
           "noFilesSelected": "未选择文件或文件夹",
           "folders": "文件夹",
           "files": "文件",
@@ -1122,6 +1143,16 @@
           "folderAlt": "文件夹",
           "fileAlt": "文件"
         }
+      },
+      "fields": {
+        "url": "URL",
+        "awsAccessKeyId": "AWS 访问密钥 ID",
+        "awsSecretAccessKey": "AWS 秘密访问密钥",
+        "bucket": "存储桶名称",
+        "prefix": "路径前缀（可选）",
+        "region": "AWS 区域",
+        "endpointUrl": "自定义端点 URL（可选）",
+        "initialContent": "初始内容（可选）"
       }
     },
     "createAPIKey": {
@@ -1162,7 +1193,10 @@
       "apiKeyPlaceholder": "输入 API 密钥 / OAuth",
       "addButton": "添加工具",
       "closeButton": "关闭",
-      "customNamePlaceholder": "Enter custom name (optional)"
+      "customNamePlaceholder": "Enter custom name (optional)",
+      "fieldRequired": "{{field}} 为必填项",
+      "positiveNumber": "必须是正数",
+      "maxTimeout": "超时时间最长为 300 秒"
     },
     "prompts": {
       "addPrompt": "添加提示",
@@ -1283,15 +1317,22 @@
       "review": "Review",
       "import": "Import",
       "continueToAgent": "Continue to agent"
+    },
+    "jwt": {
+      "title": "添加 JWT 令牌",
+      "label": "JWT 令牌",
+      "save": "保存令牌"
     }
   },
   "sharedConv": {
     "subtitle": "使用创建",
     "button": "开始使用 DocsGPT",
-    "meta": "DocsGPT 使用 GenAI，请使用资源查看关键信息。"
+    "meta": "DocsGPT 使用 GenAI，请使用资源查看关键信息。",
+    "metaDescription": "使用 DocsGPT 分享的对话"
   },
   "convTile": {
     "share": "分享",
+    "menu": "对话操作",
     "delete": "删除",
     "rename": "重命名",
     "save": "保存",
@@ -1313,7 +1354,8 @@
     "edit": {
       "update": "更新",
       "cancel": "取消",
-      "placeholder": "输入更新的查询..."
+      "placeholder": "输入更新的查询...",
+      "label": "编辑"
     },
     "sources": {
       "title": "来源",
@@ -1327,9 +1369,13 @@
     },
     "attachments": {
       "attach": "附件",
-      "remove": "删除附件"
+      "remove": "删除附件",
+      "attached": "附件",
+      "failed": "失败",
+      "attachment": "附件"
     },
     "retry": "重试",
+    "failedTitle": "无法生成回复",
     "reasoning": "推理",
     "wikiWrite": {
       "edited": "已编辑 Wiki",
@@ -1382,7 +1428,55 @@
     "quotaExceeded": {
       "tokens": "您已使用 {{limit}} 令牌配额中的 {{used}}。配额将于 {{resetsAt}} 重置。",
       "cost": "您已使用 {{limit}} 用量预算中的 {{used}}。预算将于 {{resetsAt}} 重置。"
-    }
+    },
+    "voice": {
+      "start": "语音输入",
+      "stopRecording": "停止录音",
+      "transcribingAudio": "正在转写音频",
+      "voice": "语音",
+      "stop": "停止",
+      "transcribing": "转写中",
+      "unavailable": "语音输入暂时不可用。",
+      "insecure": "语音输入需要安全连接（HTTPS 或 localhost）。",
+      "unsupported": "此浏览器不支持语音输入。",
+      "noWebAudio": "语音输入需要此浏览器支持 Web Audio。",
+      "micBlocked": "麦克风访问被阻止。请允许麦克风权限后重试。",
+      "micNotFound": "未在此设备上找到麦克风。",
+      "micBusy": "麦克风不可用或已被占用。",
+      "micInterrupted": "录音开始前麦克风访问被中断。",
+      "micDenied": "麦克风访问被拒绝。",
+      "transcribeFailed": "音频转写失败。",
+      "finalizeFailed": "无法完成实时转写。",
+      "startFailed": "无法启动实时转写。"
+    },
+    "selectModel": "选择模型",
+    "question": {
+      "expand": "显示完整消息",
+      "collapse": "收起"
+    },
+    "exportMarkdown": "导出为 Markdown",
+    "feedback": {
+      "like": "赞",
+      "removeLike": "取消赞",
+      "dislike": "踩",
+      "removeDislike": "取消踩"
+    },
+    "toolApproval": {
+      "approve": "批准",
+      "approveAlways": "批准，不再询问",
+      "deny": "拒绝",
+      "details": "详情",
+      "denyReasonPlaceholder": "拒绝原因（可选）…"
+    },
+    "research": {
+      "title": "研究",
+      "planning": "正在规划研究…",
+      "researching": "正在研究…",
+      "synthesizing": "正在撰写报告…",
+      "complete": "已完成",
+      "researched": "已研究 {{count}} 个主题"
+    },
+    "openFile": "打开文件"
   },
   "agents": {
     "title": "代理",
@@ -1392,7 +1486,8 @@
       "unpin": "取消固定代理",
       "open": "打开",
       "remove": "移除",
-      "draft": "草稿"
+      "draft": "草稿",
+      "actions": "代理操作"
     },
     "description": "发现并创建结合指令、额外知识和任意技能组合的DocsGPT自定义版本",
     "newAgent": "新建代理",
@@ -1518,7 +1613,8 @@
       },
       "agentTypes": {
         "classic": "经典",
-        "react": "ReAct"
+        "react": "ReAct",
+        "research": "研究"
       },
       "labels": {
         "defaultModel": "默认模型"
@@ -1673,13 +1769,95 @@
           "nov": "11月",
           "dec": "12月"
         }
+      },
+      "status": {
+        "active": "活跃",
+        "paused": "已暂停",
+        "completed": "已完成",
+        "cancelled": "已取消",
+        "success": "成功",
+        "failed": "失败",
+        "skipped": "已跳过",
+        "running": "运行中",
+        "pending": "等待中",
+        "timeout": "超时"
+      },
+      "trigger": {
+        "cron": "计划",
+        "manual": "手动"
+      },
+      "runDetails": {
+        "title": "运行详情",
+        "status": "状态",
+        "scheduledFor": "计划时间",
+        "started": "开始",
+        "finished": "结束",
+        "tokens": "令牌",
+        "tokensValue": "提示 {{prompt}} · 生成 {{generated}}",
+        "trigger": "触发方式",
+        "error": "错误",
+        "errorWithType": "错误（{{type}}）",
+        "output": "输出",
+        "truncated": "（已截断）"
+      },
+      "timezoneMeta": "时区：{{timezone}}",
+      "nextRunMeta": "下次：{{time}}",
+      "toolCard": {
+        "cancelFailed": "取消失败",
+        "taskCancelled": "已取消计划任务。",
+        "pendingCount_other": "{{count}} 个待执行的计划任务",
+        "schedulingFailed": "计划失败",
+        "scheduling": "正在计划…",
+        "scheduled": "计划任务",
+        "pendingCount_one": "{{count}} 个待执行的计划任务"
+      },
+      "cron": {
+        "daily": "每天 {{time}}",
+        "weekly": "每周{{day}} {{time}}",
+        "monthly": "每月 {{day}} 日 {{time}}",
+        "yearly": "每年{{month}}{{day}}日 {{time}}",
+        "custom": "自定义：{{expression}}",
+        "dayNames": {
+          "sun": "日",
+          "mon": "一",
+          "tue": "二",
+          "wed": "三",
+          "thu": "四",
+          "fri": "五",
+          "sat": "六"
+        },
+        "monthNames": {
+          "jan": "1月",
+          "feb": "2月",
+          "mar": "3月",
+          "apr": "4月",
+          "may": "5月",
+          "jun": "6月",
+          "jul": "7月",
+          "aug": "8月",
+          "sep": "9月",
+          "oct": "10月",
+          "nov": "11月",
+          "dec": "12月"
+        }
+      },
+      "runLog": {
+        "when": "时间",
+        "details": "详情",
+        "empty": "此计划尚无运行记录。"
       }
     },
     "shared": {
-      "notFound": "未找到代理。请确保代理已共享。"
+      "notFound": "未找到代理。请确保代理已共享。",
+      "logoAlt": "智能体标志",
+      "sharedBy": "来自 {{name}}",
+      "sharedOn": "分享于 {{date}}",
+      "connectedTools": "已连接的工具",
+      "toolIconTitle": "{{name}} 图标"
     },
     "preview": {
-      "testMessage": "在此测试您的代理。已发布的代理可以在对话中使用。"
+      "testMessage": "在此测试您的代理。已发布的代理可以在对话中使用。",
+      "emptyTitle": "测试你的智能体"
     },
     "deleteConfirmation": "您确定要删除此代理吗？",
     "folders": {
@@ -1697,7 +1875,9 @@
       "backToRoot": "返回",
       "currentFolder": "此文件夹",
       "noSubfolders": "没有子文件夹",
-      "noFolders": "暂无文件夹"
+      "openFolder": "打开文件夹",
+      "noFolders": "暂无文件夹",
+      "menuAriaLabel": "{{folderName}} 的操作"
     },
     "guardrailEvents": {
       "heading": "Guardrail activity",
@@ -1721,6 +1901,198 @@
       "emptyForFilter": "No decisions match this filter.",
       "truncated": "Showing the most recent {{count}} decisions.",
       "loadError": "Could not load guardrail activity"
+    },
+    "workflow": {
+      "artifacts": {
+        "previewUnsupported": "此产物无法预览",
+        "loadListFailed": "无法加载产物",
+        "loadFailed": "无法加载产物",
+        "loading": "正在加载产物...",
+        "inProgress": "运行中——节点生成的产物会显示在这里。",
+        "empty": "此次运行未生成产物。",
+        "back": "返回产物列表",
+        "untitled": "产物 {{id}}",
+        "fileKind": "文件"
+      },
+      "builder": {
+        "deleteFailed": "无法删除工作流智能体",
+        "updateWorkflowFailed": "无法更新工作流",
+        "updateAgentFailed": "无法更新智能体",
+        "createWorkflowFailed": "无法创建工作流",
+        "createAgentFailed": "无法创建智能体",
+        "saveFailed": "无法保存工作流",
+        "defaultDescription": "工作流智能体：{{name}}",
+        "newWorkflow": "新建工作流",
+        "editDetails": "编辑工作流详情",
+        "workflowName": "工作流名称",
+        "workflowNamePlaceholder": "输入工作流名称",
+        "workflowDescriptionPlaceholder": "描述此工作流的用途",
+        "agentImageAlt": "智能体图片",
+        "currentImage": "当前图片",
+        "agentImage": "智能体图片",
+        "agentImageHint": "图片更新将在下次保存时生效。",
+        "done": "完成",
+        "unablePreview": "无法预览工作流",
+        "unableSave": "无法保存工作流",
+        "unablePublish": "无法发布工作流",
+        "coreNodes": "核心节点",
+        "logicNodes": "逻辑与数据",
+        "aiAgent": "AI 智能体",
+        "setStateHint": "修改工作流变量",
+        "conditionHint": "条件分支",
+        "codeHint": "在沙箱中运行代码",
+        "startNode": "开始节点",
+        "endNode": "结束节点",
+        "stateTitle": "设置全局变量",
+        "nodeId": "节点 ID",
+        "title": "标题",
+        "titlePlaceholder": "输入节点标题",
+        "agentType": "智能体类型",
+        "agentTypePlaceholder": "选择智能体类型",
+        "model": "模型",
+        "modelPlaceholder": "选择模型",
+        "systemPrompt": "系统提示词",
+        "systemPromptPlaceholder": "智能体的系统提示词",
+        "promptTemplate": "提示词模板",
+        "promptTemplatePlaceholder": "使用 {{example}} 插入动态内容",
+        "outputVariable": "输出变量",
+        "outputVariablePlaceholder": "输出的变量名",
+        "streamToUser": "将输出流式传输给用户",
+        "sources": "来源",
+        "documents": "文档",
+        "documentsHint": "从上传或上游节点传给此智能体的文档。",
+        "filePassing": "文件传递",
+        "filePassingHint": "自动：模型支持时以原生方式发送，否则提取文本。",
+        "structuredOutput": "结构化输出（JSON Schema）",
+        "modelNoStructuredOutput": "所选模型不支持结构化输出。",
+        "validSchema": "JSON Schema 有效",
+        "invalidSchema": "JSON Schema 无效：{{error}}",
+        "noteContent": "备注内容",
+        "noteContentPlaceholder": "输入备注内容",
+        "stateIntro": "为工作流的状态变量赋值",
+        "assignValue": "赋值",
+        "celHint": "使用 Common Expression Language 编写自定义表达式。直接用名称引用状态（<code>query</code>），而不是 <code>{{braced}}</code>。",
+        "learnMore": "了解更多",
+        "toVariable": "目标变量",
+        "conditionIntro": "创建条件以分支你的工作流",
+        "modeSimple": "简单",
+        "modeAdvanced": "高级",
+        "caseNamePlaceholder": "分支名称（可选）",
+        "variablePlaceholder": "变量",
+        "valuePlaceholder": "值",
+        "opContains": "包含",
+        "opStartsWith": "开头为",
+        "conditionPlaceholder": "输入条件，例如 query.contains(\"refund\")",
+        "codeIntro": "在工作流沙箱中运行代码。生成的文件会保存为产物。",
+        "inputFiles": "输入文件",
+        "inputFilesHint": "在沙箱中作为文件放置的产物/上游引用（每个都会成为 inputs/<name>）。",
+        "timeout": "超时（秒）",
+        "optional": "可选",
+        "cannotDeleteStart": "无法删除开始节点",
+        "deleteNode": "删除节点",
+        "deleteConfirm": "确定要删除“{{name}}”吗？",
+        "deleteConfirmUnnamed": "确定要删除此工作流智能体吗？"
+      },
+      "validation": {
+        "nameRequired": "工作流名称为必填项",
+        "oneStart": "工作流必须有且仅有一个开始节点",
+        "needEnd": "工作流必须至少有一个结束节点",
+        "needAgent": "工作流必须至少有一个 AI 智能体节点",
+        "agentModel": "智能体“{{name}}”必须选择模型",
+        "agentStructuredOutput": "智能体“{{name}}”所选模型不支持结构化输出",
+        "agentSchema": "智能体“{{name}}”的 JSON Schema：{{error}}",
+        "startConnected": "开始节点必须连接到其他节点",
+        "endIncoming": "结束节点“{{name}}”必须有传入连接",
+        "edgeSource": "连线引用了不存在的源节点",
+        "edgeTarget": "连线引用了不存在的目标节点",
+        "conditionNeedsCase": "条件“{{name}}”必须至少有一个包含表达式的分支",
+        "conditionCaseNoHandle": "条件“{{name}}”有一个缺少分支句柄的分支",
+        "conditionDuplicateHandle": "条件“{{name}}”的分支句柄“{{handle}}”重复",
+        "conditionTwoOutgoing": "条件“{{name}}”必须至少有 2 个传出连接",
+        "conditionEdgeNoHandle": "条件“{{name}}”有一个缺少分支句柄的连接",
+        "conditionUnknownBranch": "条件“{{name}}”有来自未知分支“{{handle}}”的连接",
+        "conditionMultipleEdges": "条件“{{name}}”的分支“{{handle}}”有多个连接",
+        "conditionNeedsElse": "条件“{{name}}”必须有 Else 分支",
+        "caseNoConnection": "条件“{{name}}”的分支“{{handle}}”有表达式但没有分支连接",
+        "caseNoExpression": "条件“{{name}}”的分支“{{handle}}”有分支连接但没有表达式",
+        "caseNoVariable": "条件“{{name}}”的分支“{{handle}}”在简单模式下必须指定变量",
+        "branchReachEnd": "条件“{{name}}”的分支“{{handle}}”最终必须到达结束节点",
+        "codeRequired": "代码节点“{{name}}”必须包含要运行的代码",
+        "codeSchema": "代码节点“{{name}}”的 JSON Schema：{{error}}"
+      },
+      "schema": {
+        "notObject": "必须是有效的 JSON 对象",
+        "missingType": "必须包含 \"type\" 或 \"schema\" 字段",
+        "invalidJson": "必须是有效的 JSON"
+      },
+      "filePassing": {
+        "auto": "自动",
+        "native": "原生",
+        "extract": "提取"
+      },
+      "mobileBlocker": {
+        "title": "需要桌面设备",
+        "body": "工作流构建器需要更大的屏幕才能获得最佳体验。请在台式机或笔记本电脑上打开此页面。"
+      },
+      "nodes": {
+        "start": "开始",
+        "startHint": "工作流的入口",
+        "end": "结束",
+        "endHint": "工作流完成",
+        "agent": "智能体",
+        "note": "备注",
+        "condition": "If / Else",
+        "code": "代码",
+        "setState": "设置状态",
+        "output": "输出：{{variable}}",
+        "noCode": "暂无代码",
+        "modeSimple": "简单",
+        "modeAdvanced": "高级",
+        "if": "If",
+        "elseIf": "Else if",
+        "else": "Else",
+        "operationCount_other": "{{count}} 个操作",
+        "variableCount_other": "{{count}} 个变量",
+        "variableTitle": "变量：{{name}}",
+        "valueTitle": "值：{{value}}",
+        "operationCount_one": "{{count}} 个操作",
+        "variableCount_one": "{{count}} 个变量"
+      },
+      "preview": {
+        "executionDetails": "执行详情",
+        "stepCount_other": "（{{count}} 步）",
+        "outputLabel": "输出：",
+        "errorLabel": "错误：",
+        "artifacts": "产物",
+        "minimapHeading": "工作流",
+        "emptyTitle": "测试工作流",
+        "unsavedDraftAttachments": "在预览中附加文档前，请先保存工作流。",
+        "stepCount_one": "（{{count}} 步）"
+      },
+      "documents": {
+        "modeAll": "所有输入文档",
+        "modeNone": "无",
+        "modeChoose": "选择…",
+        "selectPlaceholder": "选择文档...",
+        "searchPlaceholder": "搜索变量...",
+        "empty": "没有上游文档",
+        "refPlaceholder": "添加引用（例如 A1）"
+      },
+      "variables": {
+        "globalContext": "全局上下文",
+        "workflowInput": "工作流输入",
+        "searchPlaceholder": "搜索变量...",
+        "empty": "未找到变量",
+        "addContext": "添加上下文"
+      }
+    },
+    "typeModal": {
+      "title": "创建新智能体",
+      "description": "选择要创建的智能体类型",
+      "classicTitle": "经典智能体",
+      "classicDescription": "创建一个使用单一模型、工具和知识来源的标准 AI 智能体",
+      "workflowTitle": "工作流智能体",
+      "workflowDescription": "设计包含不同模型、条件逻辑和状态管理的复杂多步骤工作流"
     }
   },
   "components": {
@@ -1729,7 +2101,39 @@
       "dropFiles": "Drop the files here",
       "fileTypes": "PNG, JPG, JPEG up to",
       "sizeLimitUnit": "MB",
-      "fileSizeError": "File exceeds {{size}}MB limit"
+      "fileSizeError": "File exceeds {{size}}MB limit",
+      "preview": "图片预览",
+      "remove": "移除文件"
+    },
+    "artifact": {
+      "types": {
+        "todoList": "待办列表",
+        "note": "笔记",
+        "memory": "记忆"
+      },
+      "fallbackTitle": "工件",
+      "todo": {
+        "done": "已完成 {{count}}",
+        "open": "未完成 {{count}}",
+        "empty": "暂无待办事项"
+      },
+      "note": {
+        "lines_other": "{{count}} 行",
+        "empty": "空笔记"
+      },
+      "notFound": "未找到工件",
+      "loadFailed": "无法加载工件",
+      "fetchFailed": "无法获取工件",
+      "preview": "工件预览",
+      "download": "下载",
+      "restore": "恢复",
+      "version": "版本 {{version}}",
+      "versionCurrent": "版本 {{version}}（当前）",
+      "downloadFailed": "下载失败",
+      "restoreFailed": "恢复失败"
+    },
+    "profile": {
+      "avatarAlt": "用户头像"
     }
   },
   "pageNotFound": {
@@ -1745,7 +2149,14 @@
     "size": "大小",
     "myFiles": "我的文件",
     "sharedWithMe": "与我共享",
-    "loadingMore": "加载更多文件..."
+    "loadingMore": "加载更多文件...",
+    "myDrive": "我的云端硬盘",
+    "spaces": "空间",
+    "root": "根目录",
+    "shared": "共享",
+    "connectTo": "连接到 {{provider}}",
+    "sessionExpiredFor": "会话已过期。请重新连接到 {{provider}}。",
+    "selectFilesFrom": "从 {{provider}} 选择文件"
   },
   "actionButtons": {
     "openNewChat": "打开新聊天",
@@ -1756,7 +2167,13 @@
     "viewCode": "查看代码",
     "decreaseZoom": "缩小",
     "resetZoom": "重置缩放",
-    "increaseZoom": "放大"
+    "increaseZoom": "放大",
+    "download": "下载",
+    "downloadAs": "下载为 {{format}}",
+    "code": "代码",
+    "loading": "正在加载图表...",
+    "codeTitle": "Mermaid 代码",
+    "renderFailed": "无法渲染图表：{{message}}"
   },
   "navigation": {
     "agents": "代理",
@@ -1769,6 +2186,13 @@
         "insights": "洞察",
         "administration": "管理"
       }
+    },
+    "openSidebar": "打开侧边栏",
+    "closeSidebar": "关闭侧边栏",
+    "social": {
+      "discord": "加入 Discord 社区",
+      "x": "在 X 上关注我们",
+      "github": "在 GitHub 上查看"
     }
   },
   "teams": {
@@ -1779,7 +2203,8 @@
       "roleAdmin": "管理员",
       "roleMember": "成员",
       "manageTeam": "管理团队",
-      "createTeam": "创建团队"
+      "createTeam": "创建团队",
+      "logoAlt": "DocsGPT 标志"
     }
   },
   "notification": {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 8d6adfee..61c0a601 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,6 +4,7 @@ import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import store from './store';
+import { TooltipProvider } from './components/ui/tooltip';
 import './index.css';
 
 // Show scrollbar on scroll for scrollbar-overlay elements, hide after 1s idle
@@ -18,9 +19,10 @@ function rebuildSbStyles() {
 function showOverlayScrollbar(el: HTMLElement) {
   if (!el.dataset.sbId) el.dataset.sbId = String(++sbIdCounter);
   const sbId = el.dataset.sbId;
-  const isDark = document.body.classList.contains('dark');
-  const thumb = isDark ? '#949494' : '#E2E8F0';
-  const thumbHover = isDark ? '#F0F0F0' : '#8C9198';
+  // --scrollbar-thumb(-hover) in index.css; `.dark` flips them on body.
+  const styles = getComputedStyle(document.body);
+  const thumb = styles.getPropertyValue('--scrollbar-thumb').trim();
+  const thumbHover = styles.getPropertyValue('--scrollbar-thumb-hover').trim();
   // Webkit: inject <style> (Safari only re-renders scrollbar on stylesheet changes)
   activeSbs.set(
     sbId,
@@ -70,7 +72,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider store={store}>
-        <App />
+        {/* One provider, so tooltips along a row skip the delay after the first. */}
+        <TooltipProvider>
+          <App />
+        </TooltipProvider>
       </Provider>
     </BrowserRouter>
   </React.StrictMode>,
diff --git a/frontend/src/modals/AccessTokenCreatedModal.tsx b/frontend/src/modals/AccessTokenCreatedModal.tsx
index 2004d3b5..db98f654 100644
--- a/frontend/src/modals/AccessTokenCreatedModal.tsx
+++ b/frontend/src/modals/AccessTokenCreatedModal.tsx
@@ -3,8 +3,11 @@ import { useTranslation } from 'react-i18next';
 
 import { baseURL } from '../api/client';
 import CopyButton from '../components/CopyButton';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
 import { Modal } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import { NO_ESCAPE } from '../settings/accessTokenUtils';
 
 interface AccessTokenCreatedModalProps {
@@ -33,79 +36,76 @@ export default function AccessTokenCreatedModal({
     <Modal
       open={token !== null}
       onOpenChange={(o) => !o && onClose()}
-      hideTitle
       title={t(`${copy}.title`)}
+      description={
+        <span className="break-words">
+          {t(`${copy}.subtitle`, {
+            name,
+            ...NO_ESCAPE,
+          })}
+        </span>
+      }
       size="lg"
       mobileVariant="sheet"
       // The secret cannot be shown again, so a stray click outside must not
       // dismiss it; closing takes the explicit button (or Esc).
       isPerformingTask
       footer={
-        <Button
-          type="button"
-          onClick={onClose}
-          className="rounded-3xl px-6 text-white"
-        >
+        <Button type="button" onClick={onClose} shape="pill" size="lg">
           {t('settings.accessTokens.created.done')}
         </Button>
       }
     >
-      <div className="flex flex-col gap-5 px-1">
-        <div>
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t(`${copy}.title`)}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm break-words">
-            {t(`${copy}.subtitle`, {
-              name,
-              ...NO_ESCAPE,
-            })}
-          </p>
-        </div>
-
-        <div
-          role="alert"
-          className="flex items-start gap-3 rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:bg-amber-900/20 dark:text-amber-300"
-        >
-          <TriangleAlert
-            className="mt-0.5 size-4 shrink-0"
-            aria-hidden="true"
-          />
-          <p>{t('settings.accessTokens.created.warning')}</p>
-        </div>
+      <div className="flex flex-col gap-5">
+        <Alert variant="warning">
+          <TriangleAlert className="size-4" aria-hidden="true" />
+          <AlertDescription>
+            <p>{t('settings.accessTokens.created.warning')}</p>
+          </AlertDescription>
+        </Alert>
 
         <div className="flex flex-col gap-1.5">
-          <p className="text-foreground dark:text-foreground text-sm font-semibold">
-            {t('settings.accessTokens.created.tokenLabel')}
-          </p>
-          <div className="bg-muted flex items-center gap-2 rounded-xl py-2 pr-2 pl-4">
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.accessTokens.created.tokenLabel')}
+          />
+          <Card
+            variant="filled"
+            padding="sm"
+            className="flex-row items-start gap-2"
+          >
             <code
               data-testid="pat-plaintext"
-              className="text-foreground dark:text-foreground min-w-0 flex-1 font-mono text-xs break-all select-all sm:text-sm"
+              className="text-foreground min-w-0 flex-1 font-mono text-xs wrap-break-word select-all"
             >
               {token}
             </code>
             {token && <CopyButton textToCopy={token} showText />}
-          </div>
+          </Card>
         </div>
 
         <div className="flex flex-col gap-2">
-          <p className="text-foreground dark:text-foreground text-sm font-semibold">
-            {t('settings.accessTokens.created.usageTitle')}
-          </p>
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.accessTokens.created.usageTitle')}
+          />
           <p className="text-muted-foreground text-xs">
             {t('settings.accessTokens.created.usageHint')}
           </p>
           {[exportSnippet, curlSnippet].map((snippet, index) => (
-            <div
+            <Card
               key={index}
-              className="bg-muted flex items-start gap-2 rounded-xl py-2 pr-2 pl-4"
+              variant="filled"
+              padding="sm"
+              className="flex-row items-start gap-2"
             >
-              <pre className="text-foreground dark:text-foreground min-w-0 flex-1 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap">
+              <pre className="text-foreground min-w-0 flex-1 font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap">
                 {snippet}
               </pre>
               <CopyButton textToCopy={snippet} />
-            </div>
+            </Card>
           ))}
         </div>
       </div>
diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index 4f19191b..5e46a7af 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 type AddActionModalProps = {
@@ -51,26 +51,22 @@ export default function AddActionModal({
       }}
       title={t('modals.addAction.title')}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleCancel}
-            className="rounded-3xl px-5"
-          >
-            {t('modals.configTool.closeButton')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleAddAction}
-            className="rounded-3xl px-5"
-          >
-            {t('modals.addAction.addButton')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('modals.configTool.closeButton')}
+          onCancel={handleCancel}
+          submitLabel={t('modals.addAction.addButton')}
+          onSubmit={handleAddAction}
+        />
       }
     >
-      <div className="relative">
+      <FormField
+        label={t('modals.addAction.actionNamePlaceholder')}
+        required
+        hint={functionNameError ? undefined : t('modals.addAction.formatHelp')}
+        error={
+          functionNameError ? t('modals.addAction.invalidFormat') : undefined
+        }
+      >
         <Input
           type="text"
           value={actionName}
@@ -79,20 +75,8 @@ export default function AddActionModal({
             setActionName(value);
             setFunctionNameError(!isValidFunctionName(value));
           }}
-          labelBgClassName="bg-card"
-          label={t('modals.addAction.actionNamePlaceholder')}
-          required={true}
         />
-        <p
-          className={`mt-2 ml-1 text-xs italic ${
-            functionNameError ? 'text-red-500' : 'text-muted-foreground'
-          }`}
-        >
-          {functionNameError
-            ? t('modals.addAction.invalidFormat')
-            : t('modals.addAction.formatHelp')}
-        </p>
-      </div>
+      </FormField>
     </Modal>
   );
 }
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index 2a23d06e..81ae3771 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import userService from '../api/services/userService';
 import SkeletonLoader from '../components/SkeletonLoader';
 import ToolIcon from '../components/ToolIcon';
+import { Card, CardDescription, CardTitle } from '../components/ui/card';
 import { Modal } from '../components/ui/modal';
 import { useLoaderState } from '../hooks';
 import PairDeviceModal from '../settings/PairDeviceModal';
@@ -120,11 +121,10 @@ export default function AddToolModal({
         onOpenChange={(o) => !o && setModalState('INACTIVE')}
         title={t('settings.tools.selectToolSetup')}
         size="xl"
-        className="h-[85vh] w-[90vw] sm:max-w-[950px] md:w-[85vw] lg:w-[75vw]"
       >
         <div className="flex h-full flex-col">
           <div>
-            <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
+            <div className="mt-5 px-3 py-px">
               {loading ? (
                 <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
                   <SkeletonLoader component="addToolCards" count={6} />
@@ -132,43 +132,48 @@ export default function AddToolModal({
               ) : (
                 <div className="grid auto-rows-fr grid-cols-1 gap-4 pb-2 sm:grid-cols-2 lg:grid-cols-3">
                   {availableTools.map((tool, index) => (
-                    <div
-                      role="button"
-                      tabIndex={0}
+                    <Card
+                      asChild
                       key={index}
-                      className="border-border bg-card hover:bg-accent hover:border-border/80 flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border p-6"
-                      onClick={() => {
-                        setSelectedTool(tool);
-                        handleAddTool(tool);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
+                      variant="outline"
+                      padding="lg"
+                      interactive
+                      className="h-52 w-full justify-between"
+                    >
+                      <button
+                        type="button"
+                        onClick={() => {
                           setSelectedTool(tool);
                           handleAddTool(tool);
-                        }
-                      }}
-                    >
-                      <div className="w-full">
-                        <div className="flex w-full items-center justify-between px-1">
-                          <ToolIcon
-                            name={tool.name}
-                            className="h-6 w-6"
-                            title={`${tool.name} icon`}
-                          />
+                        }}
+                      >
+                        <div className="w-full">
+                          <div className="flex w-full items-center justify-between px-1">
+                            <ToolIcon
+                              name={tool.name}
+                              className="size-6"
+                              title={t('settings.tools.toolIconTitle', {
+                                name: tool.name,
+                              })}
+                            />
+                          </div>
+                          <div className="mt-[9px] px-1">
+                            <CardTitle
+                              title={tool.displayName}
+                              className="truncate capitalize"
+                            >
+                              {tool.displayName}
+                            </CardTitle>
+                            <CardDescription
+                              size="xs"
+                              className="mt-1 h-24 overflow-auto"
+                            >
+                              {tool.description}
+                            </CardDescription>
+                          </div>
                         </div>
-                        <div className="mt-[9px]">
-                          <p
-                            title={tool.displayName}
-                            className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
-                          >
-                            {tool.displayName}
-                          </p>
-                          <p className="text-muted-foreground mt-1 h-24 overflow-auto px-1 text-xs leading-relaxed">
-                            {tool.description}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
+                      </button>
+                    </Card>
                   ))}
                 </div>
               )}
diff --git a/frontend/src/modals/AgentDetailsModal.tsx b/frontend/src/modals/AgentDetailsModal.tsx
index 78b70c48..ce256a00 100644
--- a/frontend/src/modals/AgentDetailsModal.tsx
+++ b/frontend/src/modals/AgentDetailsModal.tsx
@@ -1,15 +1,15 @@
 import { envVar } from '@/env';
+import { ExternalLink } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { Agent } from '../agents/types';
 import userService from '../api/services/userService';
-import ExternalLinkIcon from '../assets/external-link.svg';
 import CopyButton from '../components/CopyButton';
-import Spinner from '../components/Spinner';
 import { Button } from '../components/ui/button';
 import { Modal } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import ConfirmationModal from './ConfirmationModal';
@@ -104,185 +104,183 @@ export default function AgentDetailsModal({
 
   return (
     <>
-    <Modal
-      open={modalState === 'ACTIVE'}
-      onOpenChange={(o) => !o && setModalState('INACTIVE')}
-      title={t('modals.agentDetails.title')}
-      size="md"
-    >
-      <div>
-        <div className="mt-8 flex flex-col gap-6">
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <h2 className="text-foreground dark:text-foreground text-base font-semibold">
-                {t('modals.agentDetails.publicLink')}
-              </h2>
-            </div>
-            {sharedToken ? (
-              <div className="flex flex-col gap-2">
-                <p className="dark:text-foreground inline text-sm leading-normal font-medium break-all text-gray-700">
-                  <a
-                    href={`${baseURL}/shared/agent/${sharedToken}`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {`${baseURL}/shared/agent/${sharedToken}`}
-                  </a>
-                  <CopyButton
-                    textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
-                    padding="p-1"
-                    className="absolute -mt-0.5 ml-1 inline-flex"
-                  />
-                </p>
-                <a
-                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
-                  className="text-primary flex w-fit items-center gap-1 hover:underline"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <span className="text-sm">
-                    {t('modals.agentDetails.learnMore')}
-                  </span>
-                  <img
-                    src={ExternalLinkIcon}
-                    alt="External link"
-                    className="h-3 w-3"
-                  />
-                </a>
+      <Modal
+        open={modalState === 'ACTIVE'}
+        onOpenChange={(o) => !o && setModalState('INACTIVE')}
+        title={t('modals.agentDetails.title')}
+        size="md"
+      >
+        <div>
+          <div className="mt-8 flex flex-col gap-6">
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <SectionHeader
+                  as="h3"
+                  size="xs"
+                  title={t('modals.agentDetails.publicLink')}
+                />
               </div>
-            ) : (
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleGeneratePublicLink}
-                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
-              >
-                {loadingStates.publicLink ? (
-                  <Spinner size="small" />
-                ) : (
-                  t('modals.agentDetails.generate')
-                )}
-              </Button>
-            )}
-          </div>
-          <div className="flex flex-col gap-3">
-            <h2 className="text-foreground dark:text-foreground text-base font-semibold">
-              {t('modals.agentDetails.apiKey')}
-            </h2>
-            {apiKey ? (
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center gap-2">
-                  <div className="dark:text-foreground text-sm leading-normal font-medium break-all text-gray-700">
-                    {apiKey}
-                    {!apiKey.includes('...') && (
-                      <CopyButton
-                        textToCopy={apiKey}
-                        padding="p-1"
-                        className="absolute -mt-0.5 ml-1 inline-flex"
-                      />
-                    )}
-                  </div>
-                  {!apiKey.includes('...') && (
+              {sharedToken ? (
+                <div className="flex flex-col gap-2">
+                  <p className="text-foreground inline text-sm leading-normal font-medium break-all">
                     <a
-                      href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
-                      className="group border-primary text-primary hover:bg-primary/90 ml-8 flex w-[101px] items-center justify-center gap-1 rounded-full border py-1.5 text-sm font-medium transition-colors hover:text-white"
+                      href={`${baseURL}/shared/agent/${sharedToken}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {`${baseURL}/shared/agent/${sharedToken}`}
+                    </a>
+                    <CopyButton
+                      textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
+                      size="xs"
+                      className="absolute -mt-0.5 ml-1 inline-flex"
+                    />
+                  </p>
+                  <Button
+                    variant="link"
+                    size="inline"
+                    asChild
+                    className="w-fit"
+                  >
+                    <a
+                      href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      {t('modals.agentDetails.test')}
-                      <img
-                        src={ExternalLinkIcon}
-                        alt="External link"
-                        className="h-3 w-3 group-hover:brightness-0 group-hover:invert"
-                      />
+                      {t('modals.agentDetails.learnMore')}
+                      <ExternalLink className="size-3" />
                     </a>
-                  )}
-                  {apiKey.includes('...') && (
-                    <button
-                      type="button"
-                      onClick={() => setResetKeyConfirmState('ACTIVE')}
-                      disabled={loadingStates.apiKey}
-                      className="border-primary text-primary hover:bg-primary/90 ml-8 flex items-center justify-center gap-1 rounded-full border px-5 py-1.5 text-sm font-medium transition-colors hover:text-white disabled:opacity-60"
-                    >
-                      {loadingStates.apiKey ? (
-                        <Spinner size="small" />
-                      ) : (
-                        t('modals.agentDetails.resetKey')
-                      )}
-                    </button>
-                  )}
+                  </Button>
                 </div>
-              </div>
-            ) : (
-              <Button
-                type="button"
-                variant="outline"
-                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
-              >
-                {t('modals.agentDetails.generate')}
-              </Button>
-            )}
-          </div>
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center gap-2">
-              <h2 className="text-foreground dark:text-foreground text-base font-semibold">
-                {t('modals.agentDetails.webhookUrl')}
-              </h2>
-            </div>
-            {webhookUrl ? (
-              <div className="flex flex-col gap-2">
-                <p className="dark:text-foreground text-sm leading-normal font-medium break-all text-gray-700">
-                  <a href={webhookUrl} target="_blank" rel="noreferrer">
-                    {webhookUrl}
-                  </a>
-                  <CopyButton
-                    textToCopy={webhookUrl}
-                    padding="p-1"
-                    className="absolute -mt-0.5 ml-1 inline-flex"
-                  />
-                </p>
-                <a
-                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
-                  className="text-primary flex w-fit items-center gap-1 hover:underline"
-                  target="_blank"
-                  rel="noopener noreferrer"
+              ) : (
+                <Button
+                  type="button"
+                  variant="outline-primary"
+                  shape="pill"
+                  onClick={handleGeneratePublicLink}
+                  loading={loadingStates.publicLink}
                 >
-                  <span className="text-sm">
-                    {t('modals.agentDetails.learnMore')}
-                  </span>
-                  <img
-                    src={ExternalLinkIcon}
-                    alt="External link"
-                    className="h-3 w-3"
-                  />
-                </a>
+                  {t('modals.agentDetails.generate')}
+                </Button>
+              )}
+            </div>
+            <div className="flex flex-col gap-3">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={t('modals.agentDetails.apiKey')}
+              />
+              {apiKey ? (
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2">
+                    <div className="text-foreground text-sm leading-normal font-medium break-all">
+                      {apiKey}
+                      {!apiKey.includes('...') && (
+                        <CopyButton
+                          textToCopy={apiKey}
+                          size="xs"
+                          className="absolute -mt-0.5 ml-1 inline-flex"
+                        />
+                      )}
+                    </div>
+                    {!apiKey.includes('...') && (
+                      <Button
+                        asChild
+                        variant="outline-primary"
+                        size="sm"
+                        shape="pill"
+                        className="group ml-8 w-[101px]"
+                      >
+                        <a
+                          href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {t('modals.agentDetails.test')}
+                          <ExternalLink />
+                        </a>
+                      </Button>
+                    )}
+                    {apiKey.includes('...') && (
+                      <Button
+                        type="button"
+                        onClick={() => setResetKeyConfirmState('ACTIVE')}
+                        loading={loadingStates.apiKey}
+                        variant="outline-primary"
+                        size="sm"
+                        shape="pill"
+                        className="ml-8"
+                      >
+                        {t('modals.agentDetails.resetKey')}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <Button type="button" variant="outline-primary" shape="pill">
+                  {t('modals.agentDetails.generate')}
+                </Button>
+              )}
+            </div>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-2">
+                <SectionHeader
+                  as="h3"
+                  size="xs"
+                  title={t('modals.agentDetails.webhookUrl')}
+                />
               </div>
-            ) : (
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleGenerateWebhook}
-                className="border-primary text-primary hover:bg-primary/90 w-28 rounded-3xl border-solid px-5 hover:text-white"
-              >
-                {loadingStates.webhook ? (
-                  <Spinner size="small" />
-                ) : (
-                  t('modals.agentDetails.generate')
-                )}
-              </Button>
-            )}
+              {webhookUrl ? (
+                <div className="flex flex-col gap-2">
+                  <p className="text-foreground text-sm leading-normal font-medium break-all">
+                    <a href={webhookUrl} target="_blank" rel="noreferrer">
+                      {webhookUrl}
+                    </a>
+                    <CopyButton
+                      textToCopy={webhookUrl}
+                      size="xs"
+                      className="absolute -mt-0.5 ml-1 inline-flex"
+                    />
+                  </p>
+                  <Button
+                    variant="link"
+                    size="inline"
+                    asChild
+                    className="w-fit"
+                  >
+                    <a
+                      href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('modals.agentDetails.learnMore')}
+                      <ExternalLink className="size-3" />
+                    </a>
+                  </Button>
+                </div>
+              ) : (
+                <Button
+                  type="button"
+                  variant="outline-primary"
+                  shape="pill"
+                  onClick={handleGenerateWebhook}
+                  loading={loadingStates.webhook}
+                >
+                  {t('modals.agentDetails.generate')}
+                </Button>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </Modal>
-    <ConfirmationModal
-      message={t('modals.agentDetails.resetKeyConfirm')}
-      modalState={resetKeyConfirmState}
-      setModalState={setResetKeyConfirmState}
-      submitLabel={t('modals.agentDetails.resetKey')}
-      handleSubmit={handleRegenerateKey}
-      variant="danger"
-    />
+      </Modal>
+      <ConfirmationModal
+        message={t('modals.agentDetails.resetKeyConfirm')}
+        modalState={resetKeyConfirmState}
+        setModalState={setResetKeyConfirmState}
+        submitLabel={t('modals.agentDetails.resetKey')}
+        handleSubmit={handleRegenerateKey}
+        variant="destructive"
+      />
     </>
   );
 }
diff --git a/frontend/src/modals/ConfigToolModal.tsx b/frontend/src/modals/ConfigToolModal.tsx
index 7f657a07..c5a4917b 100644
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -4,10 +4,9 @@ import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import ConfigFields from '../components/ConfigFields';
-import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { AvailableToolType } from './types';
@@ -54,15 +53,17 @@ export default function ConfigToolModal({
         if (!visible) return;
       }
       if (spec.required && !configValues[key]?.toString().trim()) {
-        newErrors[key] = `${spec.label || key} is required`;
+        newErrors[key] = t('modals.configTool.fieldRequired', {
+          field: spec.label || key,
+        });
       }
       if (spec.type === 'number' && configValues[key] !== undefined) {
         const num = Number(configValues[key]);
         if (isNaN(num) || num < 1) {
-          newErrors[key] = 'Must be a positive number';
+          newErrors[key] = t('modals.configTool.positiveNumber');
         }
         if (key === 'timeout' && num > 300) {
-          newErrors[key] = 'Maximum timeout is 300 seconds';
+          newErrors[key] = t('modals.configTool.maxTimeout');
         }
       }
     });
@@ -120,50 +121,32 @@ export default function ConfigToolModal({
       title={t('modals.configTool.title')}
       size="lg"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            className="rounded-3xl px-5"
-          >
-            {t('modals.configTool.closeButton')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleAddTool}
-            disabled={saving}
-            className="rounded-3xl px-5"
-          >
-            {saving
-              ? t('modals.configTool.addButton') + '…'
-              : t('modals.configTool.addButton')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('modals.configTool.closeButton')}
+          onCancel={handleClose}
+          submitLabel={t('modals.configTool.addButton')}
+          onSubmit={handleAddTool}
+          pending={saving}
+        />
       }
     >
       <div>
-        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+        <p className="text-muted-foreground mt-2 text-sm">
           {t('modals.configTool.type')}:{' '}
-          <span className="font-medium text-gray-700 dark:text-gray-200">
+          <span className="text-foreground font-medium">
             {tool.displayName}
           </span>
         </p>
 
-        <div className="mt-6 flex flex-col gap-4 px-1">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="customName">
-              {t('modals.configTool.customNamePlaceholder')}
-            </Label>
+        <div className="mt-6 flex flex-col gap-5">
+          <FormField label={t('modals.configTool.customNamePlaceholder')}>
             <Input
-              id="customName"
               type="text"
               value={customName}
               onChange={(e) => setCustomName(e.target.value)}
               placeholder={tool.displayName}
-              className="rounded-xl"
             />
-          </div>
+          </FormField>
 
           {hasConfig && (
             <ConfigFields
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index 9c035166..4e986a03 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 export default function ConfirmationModal({
@@ -21,20 +20,16 @@ export default function ConfirmationModal({
   handleSubmit: () => void;
   cancelLabel?: string;
   handleCancel?: () => void;
-  variant?: 'default' | 'danger';
+  variant?: 'default' | 'destructive';
 }) {
   const { t } = useTranslation();
 
-  const handleSubmitClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleSubmitClick = () => {
     handleSubmit();
     setModalState('INACTIVE');
   };
 
-  const handleCancelClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleCancelClick = () => {
     setModalState('INACTIVE');
     handleCancel?.();
   };
@@ -47,24 +42,13 @@ export default function ConfirmationModal({
       }}
       title={message}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleCancelClick}
-            className="rounded-3xl px-5"
-          >
-            {cancelLabel ? cancelLabel : t('cancel')}
-          </Button>
-          <Button
-            type="button"
-            variant={variant === 'danger' ? 'destructive' : 'default'}
-            onClick={handleSubmitClick}
-            className="rounded-3xl px-5"
-          >
-            {submitLabel}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={cancelLabel ? cancelLabel : t('cancel')}
+          onCancel={handleCancelClick}
+          submitLabel={submitLabel}
+          onSubmit={handleSubmitClick}
+          destructive={variant === 'destructive'}
+        />
       }
     >
       {null}
diff --git a/frontend/src/modals/CreateAccessTokenModal.tsx b/frontend/src/modals/CreateAccessTokenModal.tsx
index db64674e..eba4964d 100644
--- a/frontend/src/modals/CreateAccessTokenModal.tsx
+++ b/frontend/src/modals/CreateAccessTokenModal.tsx
@@ -1,3 +1,4 @@
+import { CircleAlert, TriangleAlert } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,11 +9,13 @@ import patService, {
   CreateAccessTokenResponse,
 } from '../api/services/patService';
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Spinner } from '@/components/ui/spinner';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { MultiSelect } from '../components/ui/multi-select';
 import {
   Select,
@@ -21,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { SettingRow, SettingRows } from '../components/ui/setting-row';
 import { Switch } from '../components/ui/switch';
 import { selectToken } from '../preferences/preferenceSlice';
 import {
@@ -38,6 +42,7 @@ import {
   toResourceOptions,
 } from '../settings/accessTokenUtils';
 import { formatDateOnly } from '../utils/dateTimeUtils';
+import { cn } from '@/lib/utils';
 
 const MAX_NAME_LENGTH = 100;
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -200,65 +205,33 @@ export default function CreateAccessTokenModal({
     <Modal
       open={open}
       onOpenChange={(o) => !o && handleClose()}
-      hideTitle
       title={t('settings.accessTokens.create.title')}
+      description={t('settings.accessTokens.create.subtitle')}
       size="lg"
       mobileVariant="sheet"
       isPerformingTask={submitting}
-      contentClassName="max-h-[65vh]"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            disabled={submitting}
-            className="rounded-3xl px-6"
-          >
-            {t('settings.accessTokens.create.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={!canSubmit}
-            className="rounded-3xl px-6 text-white"
-          >
-            {submitting ? (
-              <span className="flex items-center gap-2">
-                <Spinner size="small" />
-                {t('settings.accessTokens.create.submitting')}
-              </span>
-            ) : (
-              t('settings.accessTokens.create.submit')
-            )}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.accessTokens.create.cancel')}
+          onCancel={handleClose}
+          submitLabel={t('settings.accessTokens.create.submit')}
+          onSubmit={handleSubmit}
+          pending={submitting}
+          disabled={!canSubmit}
+          cancelProps={{ disabled: submitting }}
+        />
       }
     >
       <form
-        className="flex flex-col gap-6 px-1"
+        className="flex flex-col gap-6"
         onSubmit={(e) => {
           e.preventDefault();
           handleSubmit();
         }}
       >
-        <div>
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t('settings.accessTokens.create.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {t('settings.accessTokens.create.subtitle')}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="pat-name">
-              {t('settings.accessTokens.create.name')}
-              <span className="text-red-500">*</span>
-            </Label>
+        <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
+          <FormField label={t('settings.accessTokens.create.name')} required>
             <Input
-              id="pat-name"
               type="text"
               value={name}
               maxLength={MAX_NAME_LENGTH}
@@ -267,23 +240,27 @@ export default function CreateAccessTokenModal({
                 setError(null);
               }}
               placeholder={t('settings.accessTokens.create.namePlaceholder')}
-              className="rounded-xl"
               autoComplete="off"
             />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="pat-expiry">
-              {t('settings.accessTokens.create.expiration')}
-            </Label>
+          </FormField>
+          <FormField
+            label={t('settings.accessTokens.create.expiration')}
+            hint={
+              expiry === NO_EXPIRY
+                ? undefined
+                : t('settings.accessTokens.create.expiresOn', {
+                    date: formatDateOnly(
+                      new Date(Date.now() + expiry * DAY_MS).toISOString(),
+                    ),
+                    ...NO_ESCAPE,
+                  })
+            }
+          >
             <Select
               value={String(expiry)}
               onValueChange={(value) => setExpiry(Number(value))}
             >
-              <SelectTrigger
-                id="pat-expiry"
-                className="w-full rounded-xl px-4 py-2"
-                size="lg"
-              >
+              <SelectTrigger className="w-full" size="field">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -294,40 +271,32 @@ export default function CreateAccessTokenModal({
                 ))}
               </SelectContent>
             </Select>
-            <p
-              className={`text-xs ${
-                expiry === NO_EXPIRY
-                  ? 'text-amber-700 dark:text-amber-400'
-                  : 'text-muted-foreground'
-              }`}
-            >
-              {expiry === NO_EXPIRY
-                ? t('settings.accessTokens.create.noExpirationHint')
-                : t('settings.accessTokens.create.expiresOn', {
-                    date: formatDateOnly(
-                      new Date(Date.now() + expiry * DAY_MS).toISOString(),
-                    ),
-                    ...NO_ESCAPE,
-                  })}
-            </p>
-          </div>
+            {expiry === NO_EXPIRY ? (
+              <Alert variant="warning">
+                <TriangleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>
+                  {t('settings.accessTokens.create.noExpirationHint')}
+                </AlertDescription>
+              </Alert>
+            ) : null}
+          </FormField>
         </div>
 
         <fieldset className="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
-          <legend className="text-foreground dark:text-foreground text-sm font-semibold">
+          <legend className="text-foreground text-sm font-semibold">
             {t('settings.accessTokens.create.scopes')}
-            <span className="text-red-500">*</span>
+            <span className="text-destructive">*</span>
           </legend>
           <p className="text-muted-foreground text-xs">
             {t('settings.accessTokens.create.scopesHint')}
           </p>
-          <div className="border-border dark:border-border divide-border flex flex-col divide-y rounded-xl border">
+          <div className="border-border divide-border flex flex-col divide-y rounded-xl border">
             {scopeGroups.map((group) => (
               <div
                 key={group.family}
                 className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:gap-4"
               >
-                <p className="text-foreground dark:text-foreground w-32 shrink-0 text-sm font-medium capitalize">
+                <p className="text-foreground w-32 shrink-0 text-sm font-medium capitalize">
                   {familyLabel(group.family)}
                 </p>
                 <div className="flex min-w-0 flex-1 flex-col gap-2.5">
@@ -345,22 +314,22 @@ export default function CreateAccessTokenModal({
                             ? t('settings.accessTokens.create.impliedByWrite')
                             : undefined
                         }
-                        className={`flex items-start gap-3 ${
+                        className={cn(
+                          'flex items-start gap-3',
                           implied
                             ? 'cursor-not-allowed opacity-70'
-                            : 'cursor-pointer'
-                        }`}
+                            : 'cursor-pointer',
+                        )}
                       >
-                        <input
+                        <Checkbox
                           id={id}
-                          type="checkbox"
                           checked={checked}
                           disabled={implied}
-                          onChange={() => toggleScope(scope.name)}
-                          className="accent-primary mt-0.5 size-4 shrink-0 rounded-sm border-gray-300 bg-transparent dark:[color-scheme:dark]"
+                          onCheckedChange={() => toggleScope(scope.name)}
+                          className="mt-0.5"
                         />
                         <span className="flex min-w-0 flex-col gap-0.5">
-                          <code className="text-foreground dark:text-foreground font-mono text-xs font-medium">
+                          <code className="text-foreground font-mono text-xs font-medium">
                             {scope.name}
                           </code>
                           <span className="text-muted-foreground text-xs leading-relaxed">
@@ -378,21 +347,20 @@ export default function CreateAccessTokenModal({
 
         {policy.filterable_families.length > 0 && (
           <div className="flex flex-col gap-3">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex flex-col gap-1">
-                <Label htmlFor="pat-restrict" className="text-sm font-semibold">
-                  {t('settings.accessTokens.create.restrict')}
-                </Label>
-                <p className="text-muted-foreground text-xs">
-                  {t('settings.accessTokens.create.restrictHint')}
-                </p>
-              </div>
-              <Switch
-                id="pat-restrict"
-                checked={restrict}
-                onCheckedChange={setRestrict}
-              />
-            </div>
+            <SettingRows>
+              <SettingRow
+                label={t('settings.accessTokens.create.restrict')}
+                description={t('settings.accessTokens.create.restrictHint')}
+                htmlFor="pat-restrict"
+                alignStart
+              >
+                <Switch
+                  id="pat-restrict"
+                  checked={restrict}
+                  onCheckedChange={setRestrict}
+                />
+              </SettingRow>
+            </SettingRows>
             {restrict && pickerFamilies.length === 0 && (
               <p className="text-muted-foreground bg-muted rounded-lg px-4 py-2 text-xs">
                 {t('settings.accessTokens.create.restrictNoFamilies')}
@@ -402,11 +370,17 @@ export default function CreateAccessTokenModal({
               pickerFamilies.map((family) => {
                 const state = resources[family];
                 return (
-                  <div key={family} className="flex flex-col gap-1.5">
-                    <Label className="capitalize">{familyLabel(family)}</Label>
+                  <FormField
+                    key={family}
+                    id={`pat-resources-${family}`}
+                    float={false}
+                    label={
+                      <span className="capitalize">{familyLabel(family)}</span>
+                    }
+                  >
                     {!state || state.status === 'loading' ? (
                       <div className="flex h-10 items-center">
-                        <Spinner size="small" />
+                        <Spinner size="sm" />
                       </div>
                     ) : state.status === 'error' ? (
                       <div className="flex flex-wrap items-center gap-2 text-xs">
@@ -416,7 +390,7 @@ export default function CreateAccessTokenModal({
                         <Button
                           type="button"
                           variant="link"
-                          className="h-auto p-0 text-xs"
+                          size="xs"
                           onClick={() => loadResources(family)}
                         >
                           {t('settings.accessTokens.create.retry')}
@@ -441,23 +415,20 @@ export default function CreateAccessTokenModal({
                         searchPlaceholder={t(
                           'settings.accessTokens.create.searchResources',
                         )}
-                        className="rounded-xl"
                         modal
                       />
                     )}
-                  </div>
+                  </FormField>
                 );
               })}
           </div>
         )}
 
         {error && (
-          <div
-            role="alert"
-            className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
-          >
-            {error}
-          </div>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </form>
     </Modal>
diff --git a/frontend/src/modals/CustomModelModal.test.tsx b/frontend/src/modals/CustomModelModal.test.tsx
new file mode 100644
index 00000000..7e7ee713
--- /dev/null
+++ b/frontend/src/modals/CustomModelModal.test.tsx
@@ -0,0 +1,56 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import { CapabilityChip } from './CustomModelModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('CapabilityChip', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (active: boolean, onClick = vi.fn()) => {
+    act(() => {
+      root.render(
+        <CapabilityChip label="Tools" active={active} onClick={onClick} />,
+      );
+    });
+    return container.querySelector<HTMLButtonElement>('[role="switch"]')!;
+  };
+
+  it('uses the secondary variant with a check when on', () => {
+    const chip = render(true);
+    expect(chip.dataset.variant).toBe('secondary');
+    expect(chip.dataset.size).toBe('sm');
+    expect(chip.dataset.shape).toBe('pill');
+    expect(chip.getAttribute('aria-checked')).toBe('true');
+    expect(chip.querySelector('svg')).not.toBeNull();
+    expect(chip.className).not.toMatch(/success/);
+  });
+
+  it('uses the ghost-muted variant without a check when off', () => {
+    const onClick = vi.fn();
+    const chip = render(false, onClick);
+    expect(chip.dataset.variant).toBe('ghost-muted');
+    expect(chip.getAttribute('aria-checked')).toBe('false');
+    expect(chip.querySelector('svg')).toBeNull();
+    expect(chip.textContent).toBe('Tools');
+    act(() => chip.click());
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/modals/CustomModelModal.tsx b/frontend/src/modals/CustomModelModal.tsx
index c217a616..6f7c4c7f 100644
--- a/frontend/src/modals/CustomModelModal.tsx
+++ b/frontend/src/modals/CustomModelModal.tsx
@@ -1,13 +1,14 @@
-import { Check } from 'lucide-react';
+import { Check, CircleAlert, CircleCheck } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import customModelsService from '../api/services/customModelsService';
-import Spinner from '../components/Spinner';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -17,7 +18,7 @@ import {
 } from '../components/ui/select';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 
 import type {
   CreateCustomModelPayload,
@@ -261,10 +262,6 @@ export default function CustomModelModal({
   const canTest = isEditMode
     ? !!(trimmedBaseUrl && trimmedUpstreamId)
     : !!(trimmedBaseUrl && trimmedApiKey && trimmedUpstreamId);
-  const testDisabledHint = canTest
-    ? undefined
-    : t('settings.customModels.testHintNew');
-
   const handleTest = async () => {
     if (!canTest) return;
     setTesting(true);
@@ -319,372 +316,273 @@ export default function CustomModelModal({
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={
         isEditMode
           ? t('settings.customModels.editTitle')
           : t('settings.customModels.addTitle')
       }
+      description={t('settings.customModels.modalSubtitle')}
       size="lg"
       mobileVariant="sheet"
-      className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
-    >
-      <div className="flex h-full flex-col">
-        <div className="px-2 py-2">
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {isEditMode
-              ? t('settings.customModels.editTitle')
-              : t('settings.customModels.addTitle')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {t('settings.customModels.modalSubtitle')}
-          </p>
-        </div>
-        <div className="flex-1 px-2">
-          <div className="flex flex-col gap-4 px-0.5 py-4">
-            {/* Row 1: Display name + Model ID side-by-side */}
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-display-name">
-                  {t('settings.customModels.fields.displayName')}
-                  <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="cm-display-name"
-                  type="text"
-                  value={formData.display_name}
-                  onChange={(e) => handleChange('display_name', e.target.value)}
-                  placeholder={t(
-                    'settings.customModels.placeholders.displayName',
-                  )}
-                  aria-invalid={!!errors.display_name || undefined}
-                  className="rounded-xl"
-                />
-                {errors.display_name && (
-                  <p className="text-destructive text-xs">
-                    {errors.display_name}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-model-id">
-                  {t('settings.customModels.fields.modelId')}
-                  <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="cm-model-id"
-                  type="text"
-                  value={formData.upstream_model_id}
-                  onChange={(e) =>
-                    handleChange('upstream_model_id', e.target.value)
-                  }
-                  placeholder={t('settings.customModels.placeholders.modelId')}
-                  aria-invalid={!!errors.upstream_model_id || undefined}
-                  className="rounded-xl"
-                />
-                {errors.upstream_model_id && (
-                  <p className="text-destructive text-xs">
-                    {errors.upstream_model_id}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {/* Row 2: Base URL + API key side-by-side */}
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-base-url">
-                  {t('settings.customModels.fields.baseUrl')}
-                  <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  id="cm-base-url"
-                  type="url"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  value={formData.base_url}
-                  onChange={(e) => handleChange('base_url', e.target.value)}
-                  placeholder={t('settings.customModels.placeholders.baseUrl')}
-                  aria-invalid={
-                    !!errors.base_url || !!errors.base_url_remote || undefined
-                  }
-                  className="rounded-xl"
-                />
-                {errors.base_url && (
-                  <p className="text-destructive text-xs">{errors.base_url}</p>
-                )}
-                {errors.base_url_remote && (
-                  <p className="text-destructive text-xs">
-                    {errors.base_url_remote}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="cm-api-key">
-                  {t('settings.customModels.fields.apiKey')}
-                  {!isEditMode && <span className="text-red-500">*</span>}
-                </Label>
-                <Input
-                  id="cm-api-key"
-                  type="text"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  value={formData.api_key}
-                  onChange={(e) => handleChange('api_key', e.target.value)}
-                  placeholder={
-                    isEditMode
-                      ? t('settings.customModels.placeholders.apiKeyEdit')
-                      : t('settings.customModels.placeholders.apiKey')
-                  }
-                  aria-invalid={!!errors.api_key || undefined}
-                  className="rounded-xl"
-                />
-                {isEditMode && (
-                  <p className="text-muted-foreground text-xs">
-                    {t('settings.customModels.hints.apiKeyEdit')}
-                  </p>
-                )}
-                {errors.api_key && (
-                  <p className="text-destructive text-xs">{errors.api_key}</p>
-                )}
-              </div>
-            </div>
-
-            {/* Row 3: Description (full width, optional) */}
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="cm-description">
-                {t('settings.customModels.fields.description')}
-              </Label>
-              <Input
-                id="cm-description"
-                type="text"
-                value={formData.description}
-                onChange={(e) => handleChange('description', e.target.value)}
-                placeholder={t(
-                  'settings.customModels.placeholders.description',
-                )}
-                className="rounded-xl"
-              />
-            </div>
-
-            {/* Row 4: Capabilities — flat (no border), chips + inline ctx */}
-            <div className="flex flex-col gap-2">
-              <Label>{t('settings.customModels.capabilities.title')}</Label>
-              <div className="grid gap-3 sm:grid-cols-2">
-                <div className="flex flex-col gap-1.5">
-                  <Label
-                    htmlFor="cm-api-flavor"
-                    className="text-muted-foreground text-xs"
-                  >
-                    {t('settings.customModels.capabilities.apiFlavor')}
-                  </Label>
-                  <Select
-                    value={formData.api_flavor}
-                    onValueChange={(value) =>
-                      handleChange('api_flavor', value as ModelApiFlavor)
-                    }
-                  >
-                    <SelectTrigger id="cm-api-flavor" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="chat_completions">
-                        {t(
-                          'settings.customModels.capabilities.apiFlavors.chatCompletions',
-                        )}
-                      </SelectItem>
-                      <SelectItem value="responses">
-                        {t(
-                          'settings.customModels.capabilities.apiFlavors.responses',
-                        )}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <Label
-                    htmlFor="cm-reasoning-effort"
-                    className="text-muted-foreground text-xs"
-                  >
-                    {t('settings.customModels.capabilities.reasoningEffort')}
-                  </Label>
-                  <Select
-                    value={formData.reasoning_effort}
-                    onValueChange={(value) =>
-                      handleChange(
-                        'reasoning_effort',
-                        value as ReasoningEffort | 'default',
-                      )
-                    }
-                  >
-                    <SelectTrigger id="cm-reasoning-effort" className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="default">
-                        {t(
-                          'settings.customModels.capabilities.reasoningEfforts.default',
-                        )}
-                      </SelectItem>
-                      {(
-                        [
-                          'none',
-                          'minimal',
-                          'low',
-                          'medium',
-                          'high',
-                          'xhigh',
-                        ] as ReasoningEffort[]
-                      ).map((effort) => (
-                        <SelectItem key={effort} value={effort}>
-                          {effort}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <CapabilityChip
-                  label={t('settings.customModels.capabilities.chips.tools')}
-                  active={formData.supports_tools}
-                  onClick={() =>
-                    handleChange('supports_tools', !formData.supports_tools)
-                  }
-                />
-                <CapabilityChip
-                  label={t(
-                    'settings.customModels.capabilities.chips.structuredOutput',
-                  )}
-                  active={formData.supports_structured_output}
-                  onClick={() =>
-                    handleChange(
-                      'supports_structured_output',
-                      !formData.supports_structured_output,
-                    )
-                  }
-                />
-                <CapabilityChip
-                  label={t('settings.customModels.capabilities.chips.images')}
-                  active={formData.supports_images}
-                  onClick={() =>
-                    handleChange('supports_images', !formData.supports_images)
-                  }
-                />
-              </div>
-              <div className="mt-1 flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-3">
-                <Label
-                  htmlFor="cm-context-window"
-                  className="text-muted-foreground text-xs sm:mb-0"
-                >
-                  {t('settings.customModels.capabilities.contextWindowShort')}
-                </Label>
-                <Input
-                  id="cm-context-window"
-                  type="number"
-                  value={formData.context_window}
-                  min={MIN_CONTEXT_WINDOW}
-                  max={MAX_CONTEXT_WINDOW}
-                  step={1000}
-                  onChange={(e) => {
-                    const v = e.target.value;
-                    if (v === '') {
-                      handleChange('context_window', '');
-                    } else {
-                      const n = parseInt(v, 10);
-                      if (!Number.isNaN(n)) {
-                        handleChange('context_window', n);
-                      }
-                    }
-                  }}
-                  aria-invalid={!!errors.context_window || undefined}
-                  className="w-full rounded-xl sm:w-40"
-                />
-                {errors.context_window && (
-                  <p className="text-destructive text-xs">
-                    {errors.context_window}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            {testResult && (
-              <div
-                className={`rounded-xl p-3 text-sm ${
-                  testResult.ok
-                    ? 'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                    : 'bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                }`}
-              >
-                {testResult.message}
-              </div>
-            )}
-
-            {errors.general && (
-              <div className="rounded-xl bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-                {errors.general}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="px-2 py-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+      footer={
+        <ModalActions
+          footerStart={
             <Button
               type="button"
               variant="outline"
               onClick={handleTest}
-              disabled={!canTest || testing || saving}
-              title={testDisabledHint}
-              className="w-full rounded-3xl px-6 disabled:cursor-not-allowed sm:w-auto"
+              disabled={!canTest || saving}
+              loading={testing}
+              size="lg"
+              shape="pill"
             >
-              {testing ? (
-                <div className="flex items-center justify-center">
-                  <Spinner size="small" />
-                  <span className="ml-2">
-                    {t('settings.customModels.testing')}
-                  </span>
-                </div>
-              ) : (
-                t('settings.customModels.testConnection')
-              )}
+              {t('settings.customModels.testConnection')}
             </Button>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                disabled={saving}
-                className="w-full rounded-3xl px-6 sm:w-auto"
+          }
+          cancelLabel={t('cancel')}
+          onCancel={closeModal}
+          cancelProps={{ disabled: saving }}
+          submitLabel={t('settings.customModels.save')}
+          onSubmit={handleSave}
+          pending={saving}
+        />
+      }
+    >
+      <div className="flex flex-col gap-5">
+        {/* Row 1: Display name + Model ID side-by-side */}
+        <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
+          <FormField
+            label={t('settings.customModels.fields.displayName')}
+            required
+            error={errors.display_name}
+          >
+            <Input
+              type="text"
+              value={formData.display_name}
+              onChange={(e) => handleChange('display_name', e.target.value)}
+              placeholder={t('settings.customModels.placeholders.displayName')}
+            />
+          </FormField>
+
+          <FormField
+            label={t('settings.customModels.fields.modelId')}
+            required
+            error={errors.upstream_model_id}
+          >
+            <Input
+              type="text"
+              value={formData.upstream_model_id}
+              onChange={(e) =>
+                handleChange('upstream_model_id', e.target.value)
+              }
+              placeholder={t('settings.customModels.placeholders.modelId')}
+            />
+          </FormField>
+        </div>
+
+        {/* Row 2: Base URL + API key side-by-side */}
+        <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
+          <FormField
+            label={t('settings.customModels.fields.baseUrl')}
+            required
+            error={
+              [errors.base_url, errors.base_url_remote]
+                .filter(Boolean)
+                .join(' ') || undefined
+            }
+          >
+            <Input
+              type="url"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              value={formData.base_url}
+              onChange={(e) => handleChange('base_url', e.target.value)}
+              placeholder={t('settings.customModels.placeholders.baseUrl')}
+            />
+          </FormField>
+
+          <FormField
+            label={t('settings.customModels.fields.apiKey')}
+            required={!isEditMode}
+            hint={
+              isEditMode
+                ? t('settings.customModels.hints.apiKeyEdit')
+                : undefined
+            }
+            error={errors.api_key}
+          >
+            <Input
+              type="text"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              value={formData.api_key}
+              onChange={(e) => handleChange('api_key', e.target.value)}
+              placeholder={
+                isEditMode
+                  ? t('settings.customModels.placeholders.apiKeyEdit')
+                  : t('settings.customModels.placeholders.apiKey')
+              }
+            />
+          </FormField>
+        </div>
+
+        {/* Row 3: Description (full width, optional) */}
+        <FormField label={t('settings.customModels.fields.description')}>
+          <Input
+            type="text"
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+            placeholder={t('settings.customModels.placeholders.description')}
+          />
+        </FormField>
+
+        {/* Row 4: Capabilities — flat (no border), fields grid then chips */}
+        <div className="flex flex-col gap-5">
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.customModels.capabilities.title')}
+          />
+          <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
+            <FormField
+              label={t('settings.customModels.capabilities.apiFlavor')}
+            >
+              <Select
+                value={formData.api_flavor}
+                onValueChange={(value) =>
+                  handleChange('api_flavor', value as ModelApiFlavor)
+                }
               >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={saving}
-                className="w-full rounded-3xl px-6 sm:w-auto"
+                <SelectTrigger size="field" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="chat_completions">
+                    {t(
+                      'settings.customModels.capabilities.apiFlavors.chatCompletions',
+                    )}
+                  </SelectItem>
+                  <SelectItem value="responses">
+                    {t(
+                      'settings.customModels.capabilities.apiFlavors.responses',
+                    )}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField
+              label={t('settings.customModels.capabilities.reasoningEffort')}
+            >
+              <Select
+                value={formData.reasoning_effort}
+                onValueChange={(value) =>
+                  handleChange(
+                    'reasoning_effort',
+                    value as ReasoningEffort | 'default',
+                  )
+                }
               >
-                {saving ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.customModels.saving')}
-                    </span>
-                  </div>
-                ) : (
-                  t('settings.customModels.save')
-                )}
-              </Button>
-            </div>
+                <SelectTrigger size="field" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">
+                    {t(
+                      'settings.customModels.capabilities.reasoningEfforts.default',
+                    )}
+                  </SelectItem>
+                  {(
+                    [
+                      'none',
+                      'minimal',
+                      'low',
+                      'medium',
+                      'high',
+                      'xhigh',
+                    ] as ReasoningEffort[]
+                  ).map((effort) => (
+                    <SelectItem key={effort} value={effort}>
+                      {effort}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField
+              label={t('settings.customModels.capabilities.contextWindowShort')}
+              error={errors.context_window}
+            >
+              <Input
+                type="number"
+                value={formData.context_window}
+                min={MIN_CONTEXT_WINDOW}
+                max={MAX_CONTEXT_WINDOW}
+                step={1000}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  if (v === '') {
+                    handleChange('context_window', '');
+                  } else {
+                    const n = parseInt(v, 10);
+                    if (!Number.isNaN(n)) {
+                      handleChange('context_window', n);
+                    }
+                  }
+                }}
+              />
+            </FormField>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <CapabilityChip
+              label={t('settings.customModels.capabilities.chips.tools')}
+              active={formData.supports_tools}
+              onClick={() =>
+                handleChange('supports_tools', !formData.supports_tools)
+              }
+            />
+            <CapabilityChip
+              label={t(
+                'settings.customModels.capabilities.chips.structuredOutput',
+              )}
+              active={formData.supports_structured_output}
+              onClick={() =>
+                handleChange(
+                  'supports_structured_output',
+                  !formData.supports_structured_output,
+                )
+              }
+            />
+            <CapabilityChip
+              label={t('settings.customModels.capabilities.chips.images')}
+              active={formData.supports_images}
+              onClick={() =>
+                handleChange('supports_images', !formData.supports_images)
+              }
+            />
           </div>
         </div>
+
+        {testResult && (
+          <Alert variant={testResult.ok ? 'success' : 'destructive'}>
+            {testResult.ok ? (
+              <CircleCheck className="size-4" aria-hidden="true" />
+            ) : (
+              <CircleAlert className="size-4" aria-hidden="true" />
+            )}
+            <AlertDescription>{testResult.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {errors.general && (
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </Modal>
   );
@@ -696,21 +594,22 @@ interface CapabilityChipProps {
   onClick: () => void;
 }
 
-function CapabilityChip({ label, active, onClick }: CapabilityChipProps) {
+export function CapabilityChip({
+  label,
+  active,
+  onClick,
+}: CapabilityChipProps) {
   return (
     <Button
       type="button"
-      variant="outline"
+      variant={active ? 'secondary' : 'ghost-muted'}
+      size="sm"
+      shape="pill"
       role="switch"
       aria-checked={active}
       onClick={onClick}
-      className={`h-auto rounded-full border px-3 py-1.5 shadow-none ${
-        active
-          ? 'border-emerald-500/50 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/10 hover:text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-300 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300'
-          : 'text-muted-foreground'
-      }`}
     >
-      {active && <Check size={14} strokeWidth={2.5} />}
+      {active && <Check className="size-3.5" strokeWidth={2.5} />}
       {label}
     </Button>
   );
diff --git a/frontend/src/modals/FolderManagementModal.tsx b/frontend/src/modals/FolderManagementModal.tsx
index e09cca65..2ffddb4f 100644
--- a/frontend/src/modals/FolderManagementModal.tsx
+++ b/frontend/src/modals/FolderManagementModal.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 
 type FolderNameModalProps = {
@@ -62,26 +61,17 @@ export default function FolderNameModal({
           : t('agents.folders.rename')
       }
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleCancel}
-            className="rounded-3xl px-5"
-          >
-            {t('cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={!name.trim()}
-            className="rounded-3xl px-5"
-          >
-            {mode === 'create'
+        <ModalActions
+          cancelLabel={t('cancel')}
+          onCancel={handleCancel}
+          submitLabel={
+            mode === 'create'
               ? t('agents.folders.createFolder')
-              : t('agents.folders.rename')}
-          </Button>
-        </>
+              : t('agents.folders.rename')
+          }
+          onSubmit={handleSubmit}
+          disabled={!name.trim()}
+        />
       }
     >
       <Input
diff --git a/frontend/src/modals/ImportAgentModal.test.tsx b/frontend/src/modals/ImportAgentModal.test.tsx
new file mode 100644
index 00000000..c6975e5f
--- /dev/null
+++ b/frontend/src/modals/ImportAgentModal.test.tsx
@@ -0,0 +1,186 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: (selector: (state: unknown) => unknown) =>
+    selector({ preference: { token: 'token', sourceDocs: [] } }),
+}));
+
+vi.mock('react-router-dom', () => ({ useNavigate: () => vi.fn() }));
+
+// The picker is exercised through its onDrop handler: happy-dom can't drive a
+// real drag or a file chooser, and the drop is what stages the YAML.
+const dropzone = vi.hoisted(() => ({
+  onDrop: null as null | ((accepted: File[], rejected: unknown[]) => void),
+}));
+vi.mock('react-dropzone', () => ({
+  useDropzone: (options: {
+    onDrop: (accepted: File[], rejected: unknown[]) => void;
+  }) => {
+    dropzone.onDrop = options.onDrop;
+    return {
+      getRootProps: () => ({}),
+      getInputProps: () => ({}),
+      isDragActive: false,
+      isDragReject: false,
+    };
+  },
+}));
+
+const service = vi.hoisted(() => ({
+  planImportAgent: vi.fn(),
+  importAgent: vi.fn(),
+}));
+vi.mock('../api/services/userService', () => ({ default: service }));
+
+import ImportAgentModal from './ImportAgentModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const jsonResponse = (body: unknown) =>
+  ({ ok: true, json: async () => body }) as Response;
+
+const flush = () => act(async () => new Promise((r) => setTimeout(r, 0)));
+
+const clickButton = async (label: string) => {
+  const button = Array.from(document.querySelectorAll('button')).find(
+    (b) => b.textContent === label,
+  );
+  expect(button).toBeDefined();
+  await act(async () => button!.click());
+  await flush();
+};
+
+describe('ImportAgentModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    service.planImportAgent.mockResolvedValue(
+      jsonResponse({
+        success: true,
+        plan: {
+          target: { action: 'create', agent_id: null, matched_by: null },
+          sources: [],
+          tools: [],
+          prompt: { status: 'default' },
+          models: [],
+        },
+      }),
+    );
+    service.importAgent.mockResolvedValue(
+      jsonResponse({
+        success: true,
+        agent_id: 'agent-1',
+        agent_type: 'classic',
+        status: 'draft',
+        warnings: [
+          "Source 'Carrier Rate Cards' not found; left unattached",
+          "Model 'gpt-4o' not available; skipped",
+        ],
+      }),
+    );
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.clearAllMocks();
+  });
+
+  it('shows post-import warnings as a polite warning alert', async () => {
+    act(() => {
+      root.render(
+        <ImportAgentModal
+          modalState="ACTIVE"
+          setModalState={() => undefined}
+        />,
+      );
+    });
+
+    const file = new File(['name: Agent\n'], 'agent.yaml', {
+      type: 'application/x-yaml',
+    });
+    await act(async () => dropzone.onDrop!([file], []));
+    await flush();
+    await clickButton('modals.importAgent.review');
+    await clickButton('modals.importAgent.import');
+
+    const notice = document.querySelector('[role="status"]');
+    expect(notice).not.toBeNull();
+    expect(notice!.className).toContain('bg-warning/10');
+    expect(notice!.className).toContain('text-warning');
+    expect(notice!.querySelector('svg')?.getAttribute('aria-hidden')).toBe(
+      'true',
+    );
+    expect(notice!.querySelector('h5')?.textContent).toBe(
+      'modals.importAgent.warningsTitle',
+    );
+    const items = Array.from(notice!.querySelectorAll('ul > li')).map(
+      (li) => li.textContent,
+    );
+    expect(items).toEqual([
+      "Source 'Carrier Rate Cards' not found; left unattached",
+      "Model 'gpt-4o' not available; skipped",
+    ]);
+    expect(document.querySelector('[role="alert"]')).toBeNull();
+  });
+  it('draws plan warnings and a failed import as Alerts', async () => {
+    service.planImportAgent.mockResolvedValue(
+      jsonResponse({
+        success: true,
+        plan: {
+          target: { action: 'update', agent_id: 'a1', matched_by: 'name' },
+          workflow: { action: 'delete', nodes: 3 },
+          sources: [],
+          tools: [{ key: 't1', type: 'brave', status: 'unavailable' }],
+          prompt: { status: 'default' },
+          models: [],
+        },
+      }),
+    );
+    service.importAgent.mockResolvedValue(
+      jsonResponse({ success: false, message: 'Import blew up' }),
+    );
+    act(() => {
+      root.render(
+        <ImportAgentModal
+          modalState="ACTIVE"
+          setModalState={() => undefined}
+        />,
+      );
+    });
+
+    const file = new File(['name: Agent\n'], 'agent.yaml', {
+      type: 'application/x-yaml',
+    });
+    await act(async () => dropzone.onDrop!([file], []));
+    await flush();
+    await clickButton('modals.importAgent.review');
+
+    const warnings = Array.from(
+      document.querySelectorAll('[data-slot="alert"][data-variant="warning"]'),
+    ).map((a) => a.textContent);
+    expect(warnings).toEqual([
+      'modals.importAgent.workflowDelete',
+      'modals.importAgent.toolUnavailable',
+    ]);
+
+    await clickButton('modals.importAgent.import');
+    const error = document.querySelector(
+      '[data-slot="alert"][data-variant="destructive"]',
+    );
+    expect(error?.getAttribute('role')).toBe('alert');
+    expect(error?.textContent).toBe('Import blew up');
+    expect(error?.querySelector('svg')?.getAttribute('aria-hidden')).toBe(
+      'true',
+    );
+  });
+});
diff --git a/frontend/src/modals/ImportAgentModal.tsx b/frontend/src/modals/ImportAgentModal.tsx
index 47cc573d..82928377 100644
--- a/frontend/src/modals/ImportAgentModal.tsx
+++ b/frontend/src/modals/ImportAgentModal.tsx
@@ -1,16 +1,16 @@
-import { AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { TriangleAlert, CircleCheck, CircleAlert } from 'lucide-react';
 import { useState } from 'react';
-import { type FileRejection, useDropzone } from 'react-dropzone';
+import { type FileRejection } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
-import Upload from '../assets/upload.svg';
-import Spinner from '../components/Spinner';
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Dropzone } from '../components/ui/dropzone';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -22,6 +22,11 @@ import { agentEditPath } from '../agents/paths';
 import { ActiveState } from '../models/misc';
 import { selectSourceDocs, selectToken } from '../preferences/preferenceSlice';
 
+const YAML_ACCEPT = {
+  'application/x-yaml': ['.yaml', '.yml'],
+  'text/yaml': ['.yaml', '.yml'],
+};
+
 type PlanSource = {
   name: string;
   type: string;
@@ -125,28 +130,20 @@ export default function ImportAgentModal({
     setYamlText(await selectedFile.text());
   };
 
-  const { getRootProps, getInputProps, isDragActive, isDragReject } =
-    useDropzone({
-      onDrop: (acceptedFiles: File[], fileRejections: FileRejection[]) => {
-        // A rejected file never reaches acceptedFiles, so without this the
-        // drop is a silent no-op and any previously picked file stays staged.
-        if (fileRejections.length > 0) {
-          setFileName('');
-          setYamlText('');
-          setError(t('modals.importAgent.invalidFileType'));
-          return;
-        }
-        if (acceptedFiles[0]) processFile(acceptedFiles[0]);
-      },
-      multiple: false,
-      // Declared here (not via getInputProps) so drag-and-drop is filtered
-      // too; processFile's extension check stays as a backstop for odd MIME
-      // reports.
-      accept: {
-        'application/x-yaml': ['.yaml', '.yml'],
-        'text/yaml': ['.yaml', '.yml'],
-      },
-    });
+  const handleDrop = (
+    acceptedFiles: File[],
+    fileRejections: FileRejection[],
+  ) => {
+    // A rejected file never reaches acceptedFiles, so without this the
+    // drop is a silent no-op and any previously picked file stays staged.
+    if (fileRejections.length > 0) {
+      setFileName('');
+      setYamlText('');
+      setError(t('modals.importAgent.invalidFileType'));
+      return;
+    }
+    if (acceptedFiles[0]) processFile(acceptedFiles[0]);
+  };
 
   const handleAnalyze = async () => {
     if (!yamlText) return;
@@ -252,50 +249,30 @@ export default function ImportAgentModal({
             handleClose();
             if (path) navigate(path);
           }}
-          className="rounded-3xl px-5"
+          size="lg"
+          shape="pill"
         >
           {t('modals.importAgent.continueToAgent')}
         </Button>
       );
     }
     return (
-      <>
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={handleClose}
-          className="rounded-3xl px-5"
-        >
-          {t('modals.importAgent.cancel')}
-        </Button>
-        {!plan ? (
-          <Button
-            type="button"
-            onClick={handleAnalyze}
-            disabled={!yamlText || loading}
-            className="w-24 rounded-3xl px-5 disabled:cursor-not-allowed"
-          >
-            {loading ? (
-              <Spinner size="small" />
-            ) : (
-              t('modals.importAgent.review')
-            )}
-          </Button>
-        ) : (
-          <Button
-            type="button"
-            onClick={handleImport}
-            disabled={importing}
-            className="rounded-3xl px-5 disabled:cursor-not-allowed"
-          >
-            {importing ? (
-              <Spinner size="small" />
-            ) : (
-              t('modals.importAgent.import')
-            )}
-          </Button>
-        )}
-      </>
+      <ModalActions
+        cancelLabel={t('modals.importAgent.cancel')}
+        onCancel={handleClose}
+        {...(!plan
+          ? {
+              submitLabel: t('modals.importAgent.review'),
+              onSubmit: handleAnalyze,
+              pending: loading,
+              disabled: !yamlText,
+            }
+          : {
+              submitLabel: t('modals.importAgent.import'),
+              onSubmit: handleImport,
+              pending: importing,
+            })}
+      />
     );
   };
 
@@ -305,50 +282,38 @@ export default function ImportAgentModal({
       onOpenChange={(o) => !o && handleClose()}
       title={t('modals.importAgent.title')}
       size="lg"
-      contentClassName="max-h-[70vh]"
       footer={renderFooter()}
     >
       <div className="flex flex-col gap-4">
         {warnings ? (
-          <div className="flex flex-col gap-3">
-            <p className="text-foreground text-sm">
+          <Alert variant="warning" role="status">
+            <TriangleAlert aria-hidden="true" />
+            <AlertTitle>
               {importedStatus === 'published'
                 ? t('modals.importAgent.warningsTitlePublished')
                 : t('modals.importAgent.warningsTitle')}
-            </p>
-            <ul className="list-disc space-y-1 pl-5 text-sm text-yellow-700 dark:text-yellow-400">
-              {warnings.map((w, i) => (
-                <li key={i}>{w}</li>
-              ))}
-            </ul>
-          </div>
+            </AlertTitle>
+            <AlertDescription>
+              <ul className="list-disc space-y-1 pl-5">
+                {warnings.map((w, i) => (
+                  <li key={i}>{w}</li>
+                ))}
+              </ul>
+            </AlertDescription>
+          </Alert>
         ) : !plan ? (
           <div className="flex flex-col gap-4">
             <p className="text-muted-foreground text-sm">
               {t('modals.importAgent.description')}
             </p>
-            <div
-              {...getRootProps({
-                className: `border-border hover:border-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
-                  isDragReject
-                    ? 'border-destructive'
-                    : isDragActive
-                      ? 'border-primary'
-                      : ''
-                }`,
-              })}
-            >
-              <img
-                src={Upload}
-                alt=""
-                className="mb-3 h-10 w-10 opacity-60 dark:invert"
-              />
-              <p className="text-foreground text-sm font-medium">
-                {fileName || t('modals.importAgent.dropzoneText')}
-              </p>
-              <input {...getInputProps()} />
-            </div>
-            {error && <p className="text-destructive text-sm">{error}</p>}
+            <Dropzone
+              onDrop={handleDrop}
+              // The accept map filters drag-and-drop too; processFile's
+              // extension check stays as a backstop for odd MIME reports.
+              accept={YAML_ACCEPT}
+              title={fileName || t('modals.importAgent.dropzoneText')}
+              error={error}
+            />
           </div>
         ) : (
           <div className="flex flex-col gap-5">
@@ -364,15 +329,20 @@ export default function ImportAgentModal({
               (plan.workflow.action === 'delete' ? (
                 // Irreversible: the graph, its run history and its artifacts
                 // all go. Warn rather than confirming with a green check.
-                <p className="text-destructive flex items-center gap-2 text-sm">
-                  <AlertTriangle className="h-4 w-4 shrink-0" />
-                  {t('modals.importAgent.workflowDelete', {
-                    nodes: plan.workflow.nodes,
-                  })}
-                </p>
+                <Alert variant="warning">
+                  <TriangleAlert className="size-4" aria-hidden="true" />
+                  <AlertDescription>
+                    {t('modals.importAgent.workflowDelete', {
+                      nodes: plan.workflow.nodes,
+                    })}
+                  </AlertDescription>
+                </Alert>
               ) : (
                 <p className="flex items-center gap-2 text-sm">
-                  <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                  <CircleCheck
+                    className="text-success size-4"
+                    aria-hidden="true"
+                  />
                   {plan.workflow.action === 'update'
                     ? t('modals.importAgent.workflowUpdate', {
                         nodes: plan.workflow.nodes,
@@ -388,13 +358,19 @@ export default function ImportAgentModal({
                 {plan.sources.map((s) =>
                   s.status === 'matched' ? (
                     <p key={s.name} className="flex items-center gap-2 text-sm">
-                      <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                      <CircleCheck
+                        className="text-success size-4"
+                        aria-hidden="true"
+                      />
                       {t('modals.importAgent.sourceMatched', { name: s.name })}
                     </p>
                   ) : (
                     <div key={s.name} className="flex flex-col gap-1">
                       <p className="flex items-center gap-2 text-sm">
-                        <AlertTriangle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                        <TriangleAlert
+                          className="text-warning size-4"
+                          aria-hidden="true"
+                        />
                         {t('modals.importAgent.sourceMissing', {
                           name: s.name,
                         })}
@@ -437,7 +413,10 @@ export default function ImportAgentModal({
                   <div key={tool.key} className="flex flex-col gap-1">
                     {tool.status === 'builtin' && (
                       <p className="flex items-center gap-2 text-sm">
-                        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                        <CircleCheck
+                          className="text-success size-4"
+                          aria-hidden="true"
+                        />
                         {t('modals.importAgent.toolBuiltin', {
                           type: tool.type,
                         })}
@@ -445,19 +424,24 @@ export default function ImportAgentModal({
                     )}
                     {tool.status === 'reuse' && (
                       <p className="flex items-center gap-2 text-sm">
-                        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+                        <CircleCheck
+                          className="text-success size-4"
+                          aria-hidden="true"
+                        />
                         {t('modals.importAgent.toolReuse', {
                           name: tool.name || tool.type,
                         })}
                       </p>
                     )}
                     {tool.status === 'unavailable' && (
-                      <p className="text-destructive flex items-center gap-2 text-sm">
-                        <AlertTriangle className="h-4 w-4" />
-                        {t('modals.importAgent.toolUnavailable', {
-                          type: tool.type,
-                        })}
-                      </p>
+                      <Alert variant="warning">
+                        <TriangleAlert className="size-4" aria-hidden="true" />
+                        <AlertDescription>
+                          {t('modals.importAgent.toolUnavailable', {
+                            type: tool.type,
+                          })}
+                        </AlertDescription>
+                      </Alert>
                     )}
                     {tool.status === 'create' && (
                       <div className="flex flex-col gap-2">
@@ -478,7 +462,6 @@ export default function ImportAgentModal({
                             onChange={(e) =>
                               setToolSecret(tool.key, field, e.target.value)
                             }
-                            className="bg-card h-auto rounded-lg px-3 py-2 text-sm md:text-sm"
                           />
                         ))}
                       </div>
@@ -509,14 +492,18 @@ export default function ImportAgentModal({
                             [m.display_name || '']: e.target.value,
                           }))
                         }
-                        className="bg-card h-auto rounded-lg px-3 py-2 text-sm md:text-sm"
                       />
                     </div>
                   ))}
               </Section>
             )}
 
-            {error && <p className="text-destructive text-sm">{error}</p>}
+            {error && (
+              <Alert variant="destructive">
+                <CircleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
           </div>
         )}
       </div>
diff --git a/frontend/src/modals/ImportSpecModal.tsx b/frontend/src/modals/ImportSpecModal.tsx
index a5bee57b..ed5e8af0 100644
--- a/frontend/src/modals/ImportSpecModal.tsx
+++ b/frontend/src/modals/ImportSpecModal.tsx
@@ -1,18 +1,21 @@
 import { useState } from 'react';
-import { type FileRejection, useDropzone } from 'react-dropzone';
+import { type FileRejection } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Upload from '../assets/upload.svg';
-import Spinner from '../components/Spinner';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
+import { Dropzone } from '../components/ui/dropzone';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import { APIActionType } from '../settings/types';
-import { getMethodColorClass } from '../utils/httpMethodColors';
+import { getMethodBadgeVariant } from '../utils/httpMethodColors';
 
 interface ImportSpecModalProps {
   modalState: ActiveState;
@@ -73,28 +76,20 @@ export default function ImportSpecModal({
     setParsedResult(null);
   };
 
-  const { getRootProps, getInputProps, isDragActive, isDragReject } =
-    useDropzone({
-      onDrop: (acceptedFiles: File[], fileRejections: FileRejection[]) => {
-        // A rejected file never reaches acceptedFiles, so without this the
-        // drop is a silent no-op and any previously picked file stays staged.
-        if (fileRejections.length > 0) {
-          setFile(null);
-          setParsedResult(null);
-          setError(t('modals.importSpec.invalidFileType'));
-          return;
-        }
-        if (acceptedFiles[0]) processFile(acceptedFiles[0]);
-      },
-      multiple: false,
-      // Declared here (not via getInputProps) so drag-and-drop is filtered
-      // too; processFile's extension check stays as a backstop.
-      accept: {
-        'application/json': ['.json'],
-        'application/x-yaml': ['.yaml', '.yml'],
-        'text/yaml': ['.yaml', '.yml'],
-      },
-    });
+  const handleDrop = (
+    acceptedFiles: File[],
+    fileRejections: FileRejection[],
+  ) => {
+    // A rejected file never reaches acceptedFiles, so without this the
+    // drop is a silent no-op and any previously picked file stays staged.
+    if (fileRejections.length > 0) {
+      setFile(null);
+      setParsedResult(null);
+      setError(t('modals.importSpec.invalidFileType'));
+      return;
+    }
+    if (acceptedFiles[0]) processFile(acceptedFiles[0]);
+  };
 
   const handleParse = async () => {
     if (!file) return;
@@ -174,84 +169,60 @@ export default function ImportSpecModal({
       onOpenChange={(o) => !o && handleClose()}
       title={t('modals.importSpec.title')}
       size="lg"
-      contentClassName="max-h-[70vh]"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            className="rounded-3xl px-5"
-          >
-            {t('modals.importSpec.cancel')}
-          </Button>
-          {!parsedResult ? (
-            <Button
-              type="button"
-              onClick={handleParse}
-              disabled={!file || loading}
-              className="w-20 rounded-3xl px-5 disabled:cursor-not-allowed"
-            >
-              {loading && <Spinner size="small" />}
-              {!loading && t('modals.importSpec.parse')}
-            </Button>
-          ) : (
-            <Button
-              type="button"
-              onClick={handleImport}
-              disabled={selectedActions.size === 0}
-              className="rounded-3xl px-5 disabled:cursor-not-allowed"
-            >
-              {t('modals.importSpec.import', { count: selectedActions.size })}
-            </Button>
-          )}
-        </>
+        !parsedResult ? (
+          <ModalActions
+            cancelLabel={t('modals.importSpec.cancel')}
+            onCancel={handleClose}
+            submitLabel={t('modals.importSpec.parse')}
+            onSubmit={handleParse}
+            pending={loading}
+            disabled={!file}
+          />
+        ) : (
+          <ModalActions
+            cancelLabel={t('modals.importSpec.cancel')}
+            onCancel={handleClose}
+            submitLabel={t('modals.importSpec.import', {
+              count: selectedActions.size,
+            })}
+            onSubmit={handleImport}
+            disabled={selectedActions.size === 0}
+          />
+        )
       }
     >
       <div className="flex flex-col gap-4">
         {!parsedResult ? (
           <div className="flex flex-col gap-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
+            <p className="text-muted-foreground text-sm">
               {t('modals.importSpec.description')}
             </p>
 
-            <div
-              {...getRootProps({
-                className: `border-border dark:border-border hover:border-primary dark:hover:border-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
-                  isDragReject
-                    ? 'border-destructive'
-                    : isDragActive
-                      ? 'border-primary'
-                      : ''
-                }`,
-              })}
-            >
-              <img
-                src={Upload}
-                alt="Upload"
-                className="mb-3 h-10 w-10 opacity-60 dark:invert"
-              />
-              <p className="text-foreground dark:text-foreground text-sm font-medium">
-                {file ? file.name : t('modals.importSpec.dropzoneText')}
-              </p>
-              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                {t('modals.importSpec.supportedFormats')}
-              </p>
-              <input {...getInputProps()} />
-            </div>
-
-            {error && (
-              <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
-            )}
+            <Dropzone
+              onDrop={handleDrop}
+              // Declared here so drag-and-drop is filtered too; processFile's
+              // extension check stays as a backstop.
+              accept={{
+                'application/json': ['.json'],
+                'application/x-yaml': ['.yaml', '.yml'],
+                'text/yaml': ['.yaml', '.yml'],
+              }}
+              title={file ? file.name : t('modals.importSpec.dropzoneText')}
+              description={t('modals.importSpec.supportedFormats')}
+              error={error}
+            />
           </div>
         ) : (
           <div className="flex flex-col gap-4">
             <div className="bg-muted rounded-xl p-4">
-              <h3 className="text-foreground dark:text-foreground font-medium">
-                {parsedResult.metadata.title}
-              </h3>
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={parsedResult.metadata.title}
+              />
               {parsedResult.metadata.description && (
-                <p className="mt-1 line-clamp-2 text-sm text-gray-600 dark:text-gray-400">
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">
                   {parsedResult.metadata.description}
                 </p>
               )}
@@ -259,24 +230,25 @@ export default function ImportSpecModal({
                 {t('modals.importSpec.version')}:{' '}
                 {parsedResult.metadata.version}
               </p>
-              <div className="mt-3">
-                <label className="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">
-                  {t('modals.importSpec.baseUrl')}
-                </label>
+              <FormField
+                label={t('modals.importSpec.baseUrl')}
+                labelSurface="muted"
+                className="mt-5"
+              >
                 <Input
                   type="text"
+                  variant="filled"
                   value={baseUrl}
                   onChange={(e) => setBaseUrl(e.target.value)}
-                  className="bg-card h-auto rounded-lg px-3 py-2 text-sm md:text-sm"
                   placeholder={
                     parsedResult.metadata.base_url || 'https://api.example.com'
                   }
                 />
-              </div>
+              </FormField>
             </div>
 
             <div className="flex items-center justify-between px-1">
-              <p className="text-foreground dark:text-foreground text-sm font-medium">
+              <p className="text-foreground text-sm font-medium">
                 {t('modals.importSpec.actionsFound', {
                   count: parsedResult.actions.length,
                 })}
@@ -286,7 +258,7 @@ export default function ImportSpecModal({
                 variant="link"
                 size="sm"
                 onClick={toggleAll}
-                className="h-auto p-0"
+                className="-my-1.5 -mr-3"
               >
                 {selectedActions.size === parsedResult.actions.length
                   ? t('modals.importSpec.deselectAll')
@@ -294,34 +266,33 @@ export default function ImportSpecModal({
               </Button>
             </div>
 
-            <div className="max-h-72 space-y-2 overflow-y-auto px-1">
+            <div className="flex max-h-72 flex-col gap-2 overflow-y-auto px-1">
               {parsedResult.actions.map((action, index) => (
                 <label
                   key={index}
-                  className="border-border dark:border-border hover:bg-muted dark:hover:bg-muted flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-colors"
+                  htmlFor={`import-spec-action-${index}`}
+                  className="border-border hover:bg-muted flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-colors"
                 >
-                  <input
-                    type="checkbox"
+                  <Checkbox
+                    id={`import-spec-action-${index}`}
                     checked={selectedActions.has(index)}
-                    onChange={() => toggleAction(index)}
-                    className="text-primary focus:ring-ring mt-1 h-4 w-4 rounded border-gray-300"
+                    onCheckedChange={() => toggleAction(index)}
+                    className="mt-1"
                   />
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <span
-                        className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColorClass(action.method)}`}
-                      >
+                      <Badge variant={getMethodBadgeVariant(action.method)}>
                         {action.method.toUpperCase()}
-                      </span>
-                      <span className="text-foreground dark:text-foreground truncate font-medium">
+                      </Badge>
+                      <span className="text-foreground truncate font-medium">
                         {action.name}
                       </span>
                     </div>
-                    <p className="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
+                    <p className="text-muted-foreground mt-1 truncate text-sm">
                       {action.url}
                     </p>
                     {action.description && (
-                      <p className="mt-1 line-clamp-1 text-xs text-gray-400 dark:text-gray-500">
+                      <p className="text-muted-foreground/70 mt-1 line-clamp-1 text-xs">
                         {action.description}
                       </p>
                     )}
diff --git a/frontend/src/modals/JWTModal.tsx b/frontend/src/modals/JWTModal.tsx
index 9734089d..a5219691 100644
--- a/frontend/src/modals/JWTModal.tsx
+++ b/frontend/src/modals/JWTModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -14,6 +15,7 @@ export default function JWTModal({
   modalState,
   handleTokenSubmit,
 }: JWTModalProps) {
+  const { t } = useTranslation();
   const [jwtToken, setJwtToken] = useState<string>('');
 
   return (
@@ -23,28 +25,29 @@ export default function JWTModal({
         /* uncloseable by design; P1.7 revisits */
       }}
       isPerformingTask={true}
-      title="Add JWT Token"
-    >
-      <div data-testid="jwt-modal">
-        <div className="relative mt-5 mb-4">
-          <Input
-            name="JWT Token"
-            type="text"
-            className="rounded-md"
-            value={jwtToken}
-            onChange={(e) => setJwtToken(e.target.value)}
-            data-testid="jwt-token-input"
-          />
-        </div>
+      title={t('modals.jwt.title')}
+      footer={
         <Button
           type="button"
+          size="lg"
+          shape="pill"
           disabled={jwtToken.length === 0}
           onClick={handleTokenSubmit.bind(null, jwtToken)}
-          className="float-right mt-4 rounded-3xl px-5"
           data-testid="jwt-token-submit"
         >
-          Save Token
+          {t('modals.jwt.save')}
         </Button>
+      }
+    >
+      <div data-testid="jwt-modal">
+        <Input
+          name="JWT Token"
+          label={t('modals.jwt.label')}
+          type="text"
+          value={jwtToken}
+          onChange={(e) => setJwtToken(e.target.value)}
+          data-testid="jwt-token-input"
+        />
       </div>
     </Modal>
   );
diff --git a/frontend/src/modals/MCPServerModal.tsx b/frontend/src/modals/MCPServerModal.tsx
index 48628e5a..cf9cd5b9 100644
--- a/frontend/src/modals/MCPServerModal.tsx
+++ b/frontend/src/modals/MCPServerModal.tsx
@@ -1,13 +1,16 @@
+import { CircleAlert, CircleCheck, TriangleAlert } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { baseURL } from '../api/client';
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
 import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
+import { FormField } from '../components/ui/form-field';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -18,7 +21,7 @@ import {
 import { ActiveState } from '../models/misc';
 import { selectRecentEvents } from '../notifications/notificationsSlice';
 import { selectToken } from '../preferences/preferenceSlice';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 
 interface MCPServerModalProps {
   modalState: ActiveState;
@@ -452,123 +455,89 @@ export default function MCPServerModal({
     switch (formData.auth_type) {
       case 'api_key':
         return (
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="api_key">
-                {t('settings.tools.mcp.authTypes.apiKey')}
-                <span className="text-red-500">*</span>
-              </Label>
+          <div className="flex flex-col gap-5">
+            <FormField
+              label={t('settings.tools.mcp.authTypes.apiKey')}
+              required
+              error={errors.api_key}
+            >
               <Input
-                id="api_key"
                 type="text"
                 value={formData.api_key}
                 onChange={(e) => handleInputChange('api_key', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.apiKey')}
-                aria-invalid={!!errors.api_key || undefined}
-                className="rounded-xl"
               />
-              {errors.api_key && (
-                <p className="text-destructive text-xs">{errors.api_key}</p>
-              )}
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="header_name">
-                {t('settings.tools.mcp.headerName')}
-              </Label>
+            </FormField>
+            <FormField label={t('settings.tools.mcp.headerName')}>
               <Input
-                id="header_name"
                 type="text"
                 value={formData.header_name}
                 onChange={(e) =>
                   handleInputChange('header_name', e.target.value)
                 }
                 placeholder="X-API-Key"
-                className="rounded-xl"
               />
-            </div>
+            </FormField>
           </div>
         );
       case 'bearer':
         return (
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="bearer_token">
-              {t('settings.tools.mcp.authTypes.bearer')}
-              <span className="text-red-500">*</span>
-            </Label>
+          <FormField
+            label={t('settings.tools.mcp.authTypes.bearer')}
+            required
+            error={errors.bearer_token}
+          >
             <Input
-              id="bearer_token"
               type="text"
               value={formData.bearer_token}
               onChange={(e) =>
                 handleInputChange('bearer_token', e.target.value)
               }
               placeholder={t('settings.tools.mcp.placeholders.bearerToken')}
-              aria-invalid={!!errors.bearer_token || undefined}
-              className="rounded-xl"
             />
-            {errors.bearer_token && (
-              <p className="text-destructive text-xs">{errors.bearer_token}</p>
-            )}
-          </div>
+          </FormField>
         );
       case 'basic':
         return (
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="username">
-                {t('settings.tools.mcp.username')}
-                <span className="text-red-500">*</span>
-              </Label>
+          <div className="flex flex-col gap-5">
+            <FormField
+              label={t('settings.tools.mcp.username')}
+              required
+              error={errors.username}
+            >
               <Input
-                id="username"
                 type="text"
                 value={formData.username}
                 onChange={(e) => handleInputChange('username', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.username')}
-                aria-invalid={!!errors.username || undefined}
-                className="rounded-xl"
               />
-              {errors.username && (
-                <p className="text-destructive text-xs">{errors.username}</p>
-              )}
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="password">
-                {t('settings.tools.mcp.password')}
-                <span className="text-red-500">*</span>
-              </Label>
+            </FormField>
+            <FormField
+              label={t('settings.tools.mcp.password')}
+              required
+              error={errors.password}
+            >
               <Input
-                id="password"
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleInputChange('password', e.target.value)}
                 placeholder={t('settings.tools.mcp.placeholders.password')}
-                aria-invalid={!!errors.password || undefined}
-                className="rounded-xl"
               />
-              {errors.password && (
-                <p className="text-destructive text-xs">{errors.password}</p>
-              )}
-            </div>
+            </FormField>
           </div>
         );
       case 'oauth':
         return (
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="oauth_scopes">
-              {t('settings.tools.mcp.placeholders.oauthScopes')}
-            </Label>
+          <FormField label={t('settings.tools.mcp.placeholders.oauthScopes')}>
             <Input
-              id="oauth_scopes"
               type="text"
               value={formData.oauth_scopes}
               onChange={(e) =>
                 handleInputChange('oauth_scopes', e.target.value)
               }
               placeholder="read, write"
-              className="rounded-xl"
             />
-          </div>
+          </FormField>
         );
       default:
         return null;
@@ -593,125 +562,132 @@ export default function MCPServerModal({
       }
       size="lg"
       mobileVariant="sheet"
-      className="max-w-[600px] md:w-[80vw] lg:w-[60vw]"
+      footer={
+        <ModalActions
+          footerStart={
+            <Button
+              type="button"
+              variant="outline"
+              onClick={testConnection}
+              loading={testing}
+              size="lg"
+              shape="pill"
+            >
+              {t('settings.tools.mcp.testConnection')}
+            </Button>
+          }
+          cancelLabel={t('settings.tools.mcp.cancel')}
+          onCancel={() => {
+            setModalState('INACTIVE');
+            resetForm();
+          }}
+          submitLabel={t('settings.tools.mcp.save')}
+          onSubmit={handleSave}
+          pending={loading}
+          disabled={!saveActive}
+        />
+      }
     >
-      <div className="flex h-full flex-col">
-        <div className="flex-1 px-6">
-          <div className="flex flex-col gap-4 px-0.5 py-4">
-            {server?.has_encrypted_credentials &&
-              formData.auth_type !== 'oauth' && (
-                <div className="rounded-xl bg-amber-50 p-3 text-sm text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
-                  {t('settings.tools.mcp.reenterCredentials', {
-                    defaultValue:
-                      'Re-enter your credentials to test and update the connection.',
-                  })}
-                </div>
-              )}
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-name">
-                {t('settings.tools.mcp.serverName')}
-                <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                id="mcp-name"
-                type="text"
-                value={formData.name}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-                placeholder={t('settings.tools.mcp.serverName')}
-                aria-invalid={!!errors.name || undefined}
-                className="rounded-xl"
-              />
-              {errors.name && (
-                <p className="text-destructive text-xs">{errors.name}</p>
-              )}
-            </div>
+      <div className="flex flex-col gap-5">
+        {server?.has_encrypted_credentials &&
+          formData.auth_type !== 'oauth' && (
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {t('settings.tools.mcp.reenterCredentials', {
+                  defaultValue:
+                    'Re-enter your credentials to test and update the connection.',
+                })}
+              </AlertDescription>
+            </Alert>
+          )}
+        <FormField
+          label={t('settings.tools.mcp.serverName')}
+          required
+          error={errors.name}
+        >
+          <Input
+            type="text"
+            value={formData.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            placeholder={t('settings.tools.mcp.serverName')}
+          />
+        </FormField>
 
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-url">
-                {t('settings.tools.mcp.serverUrl')}
-                <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                id="mcp-url"
-                type="text"
-                value={formData.server_url}
-                onChange={(e) =>
-                  handleInputChange('server_url', e.target.value)
+        <FormField
+          label={t('settings.tools.mcp.serverUrl')}
+          required
+          error={errors.server_url}
+        >
+          <Input
+            type="text"
+            value={formData.server_url}
+            onChange={(e) => handleInputChange('server_url', e.target.value)}
+            placeholder="https://example.com/mcp"
+          />
+        </FormField>
+
+        <FormField label={t('settings.tools.mcp.authType')}>
+          <Select
+            value={formData.auth_type}
+            onValueChange={(v) => handleInputChange('auth_type', v)}
+          >
+            <SelectTrigger size="field" className="w-full">
+              <SelectValue placeholder={t('settings.tools.mcp.authType')} />
+            </SelectTrigger>
+            <SelectContent>
+              {authTypes.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FormField>
+
+        {renderAuthFields()}
+
+        <FormField
+          label={t('settings.tools.mcp.timeout')}
+          error={errors.timeout}
+        >
+          <Input
+            type="number"
+            value={formData.timeout}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value === '') {
+                handleInputChange('timeout', '');
+              } else {
+                const numValue = parseInt(value);
+                if (!isNaN(numValue) && numValue >= 1) {
+                  handleInputChange('timeout', numValue);
                 }
-                placeholder="https://example.com/mcp"
-                aria-invalid={!!errors.server_url || undefined}
-                className="rounded-xl"
-              />
-              {errors.server_url && (
-                <p className="text-destructive text-xs">{errors.server_url}</p>
-              )}
-            </div>
+              }
+            }}
+            placeholder="30"
+            min={1}
+            max={300}
+          />
+        </FormField>
 
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('settings.tools.mcp.authType')}</Label>
-              <Select
-                value={formData.auth_type}
-                onValueChange={(v) => handleInputChange('auth_type', v)}
-              >
-                <SelectTrigger
-                  variant="ghost"
-                  size="lg"
-                  className="w-full rounded-xl"
+        {testResult && (
+          <Alert variant={testResult.success ? 'success' : 'destructive'}>
+            {testResult.success ? (
+              <CircleCheck className="size-4" aria-hidden="true" />
+            ) : (
+              <CircleAlert className="size-4" aria-hidden="true" />
+            )}
+            <AlertDescription>
+              <p>{testResult.message}</p>
+              {testResult.authorization_url && (
+                <Button
+                  variant="link"
+                  size="inline"
+                  asChild
+                  // eslint-disable-next-line shadcn/no-restyle -- the link inherits its Alert's status colour
+                  className="mt-1.5 text-current"
                 >
-                  <SelectValue placeholder={t('settings.tools.mcp.authType')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {authTypes.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {renderAuthFields()}
-
-            <div className="flex flex-col gap-1.5">
-              <Label htmlFor="mcp-timeout">
-                {t('settings.tools.mcp.timeout')}
-              </Label>
-              <Input
-                id="mcp-timeout"
-                type="number"
-                value={formData.timeout}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  if (value === '') {
-                    handleInputChange('timeout', '');
-                  } else {
-                    const numValue = parseInt(value);
-                    if (!isNaN(numValue) && numValue >= 1) {
-                      handleInputChange('timeout', numValue);
-                    }
-                  }
-                }}
-                placeholder="30"
-                min={1}
-                max={300}
-                aria-invalid={!!errors.timeout || undefined}
-                className="rounded-xl"
-              />
-              {errors.timeout && (
-                <p className="text-destructive text-xs">{errors.timeout}</p>
-              )}
-            </div>
-
-            {testResult && (
-              <div
-                className={`rounded-xl p-4 text-sm ${
-                  testResult.success
-                    ? 'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                    : 'bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                }`}
-              >
-                <p>{testResult.message}</p>
-                {testResult.authorization_url && (
                   <a
                     href={testResult.authorization_url}
                     target="_blank"
@@ -725,107 +701,55 @@ export default function MCPServerModal({
                       );
                       if (popup) oauthPopupRef.current = popup;
                     }}
-                    className="mt-1.5 inline-block font-medium underline"
                   >
                     {t('settings.tools.mcp.openAuthPage', {
                       defaultValue: 'Open authorization page',
                     })}
                   </a>
-                )}
-              </div>
-            )}
-
-            {discoveredTools.length > 0 && testResult?.success && (
-              <div className="border-border dark:border-border rounded-xl border p-4">
-                <h4 className="mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                  {t('settings.tools.mcp.discoveredTools', {
-                    count: discoveredTools.length,
-                    defaultValue: `Discovered Actions (${discoveredTools.length})`,
-                  })}
-                </h4>
-                <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
-                  {discoveredTools.map((tool) => (
-                    <li
-                      key={tool.name}
-                      className="flex items-start gap-2 rounded-lg bg-gray-50 px-3 py-2 text-sm dark:bg-white/5"
-                    >
-                      <span className="text-primary mt-0.5">&#9679;</span>
-                      <div className="min-w-0">
-                        <span className="font-medium text-gray-900 dark:text-white">
-                          {tool.name}
-                        </span>
-                        {tool.description && (
-                          <p className="truncate text-xs text-gray-500 dark:text-gray-400">
-                            {tool.description}
-                          </p>
-                        )}
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-            {errors.general && (
-              <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-                {errors.general}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="px-6 py-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={testConnection}
-              disabled={testing}
-              className="w-full rounded-3xl px-6 sm:w-auto"
-            >
-              {testing ? (
-                <div className="flex items-center justify-center">
-                  <Spinner size="small" />
-                  <span className="ml-2">
-                    {t('settings.tools.mcp.testing')}
-                  </span>
-                </div>
-              ) : (
-                t('settings.tools.mcp.testConnection')
+                </Button>
               )}
-            </Button>
+            </AlertDescription>
+          </Alert>
+        )}
 
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => {
-                  setModalState('INACTIVE');
-                  resetForm();
-                }}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.tools.mcp.cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={loading || !saveActive}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {loading ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.tools.mcp.saving')}
+        {discoveredTools.length > 0 && testResult?.success && (
+          <Card padding="sm" className="gap-2">
+            <SectionHeader
+              as="h3"
+              size="xs"
+              title={t('settings.tools.mcp.discoveredTools', {
+                count: discoveredTools.length,
+                defaultValue: `Discovered Actions (${discoveredTools.length})`,
+              })}
+            />
+            <ul className="flex max-h-40 flex-col gap-1.5 overflow-y-auto">
+              {discoveredTools.map((tool) => (
+                <li
+                  key={tool.name}
+                  className="bg-muted flex items-start gap-2 rounded-lg px-3 py-2 text-sm"
+                >
+                  <span className="text-primary mt-0.5">&#9679;</span>
+                  <div className="min-w-0">
+                    <span className="text-foreground font-medium">
+                      {tool.name}
                     </span>
+                    {tool.description && (
+                      <p className="text-muted-foreground truncate text-xs">
+                        {tool.description}
+                      </p>
+                    )}
                   </div>
-                ) : (
-                  t('settings.tools.mcp.save')
-                )}
-              </Button>
-            </div>
-          </div>
-        </div>
+                </li>
+              ))}
+            </ul>
+          </Card>
+        )}
+        {errors.general && (
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
       </div>
     </Modal>
   );
diff --git a/frontend/src/modals/MoveToFolderModal.test.tsx b/frontend/src/modals/MoveToFolderModal.test.tsx
new file mode 100644
index 00000000..857aacdd
--- /dev/null
+++ b/frontend/src/modals/MoveToFolderModal.test.tsx
@@ -0,0 +1,253 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('../hooks', () => ({
+  useMediaQuery: () => ({ isMobile: false, isDesktop: true }),
+}));
+
+const getAgentFolders = vi.fn();
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getAgentFolders: (...args: unknown[]) => getAgentFolders(...args),
+    createAgentFolder: vi.fn(),
+    moveAgentToFolder: vi.fn(),
+  },
+}));
+
+vi.mock('react-redux', () => ({
+  useDispatch: () => vi.fn(),
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import MoveToFolderModal from './MoveToFolderModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const folders = [
+  { id: 'f1', name: 'Carriers', parent_id: null },
+  { id: 'f2', name: 'Customs', parent_id: null },
+  { id: 'f3', name: 'Rotterdam', parent_id: 'f1' },
+];
+
+describe('MoveToFolderModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    getAgentFolders.mockReset();
+    getAgentFolders.mockResolvedValue({
+      ok: true,
+      json: async () => ({ folders }),
+    });
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async (currentFolderId?: string) => {
+    await act(async () => {
+      root.render(
+        <MoveToFolderModal
+          modalState="ACTIVE"
+          setModalState={() => undefined}
+          agentName="Vendor Due Diligence"
+          agentId="a1"
+          currentFolderId={currentFolderId}
+          onMoveSuccess={() => undefined}
+        />,
+      );
+    });
+  };
+
+  const trail = () =>
+    document.body.querySelector('nav[aria-label="breadcrumb"]');
+  const rowFor = (name: string) =>
+    Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>('[data-slot="button"]'),
+    ).find((b) => b.textContent?.includes(name));
+
+  it('shows the root as the current breadcrumb page, not a button', async () => {
+    await render();
+    const page = trail()?.querySelector('[data-slot="breadcrumb-page"]');
+    expect(page?.textContent).toBe('agents.filters.byMe');
+    expect(page?.getAttribute('title')).toBe('agents.filters.byMe');
+    expect(trail()?.querySelector('button')).toBeNull();
+  });
+
+  const items = () =>
+    Array.from(
+      document.body.querySelectorAll<HTMLElement>('[data-slot="command-item"]'),
+    );
+  const itemFor = (name: string) =>
+    items().find((el) => el.textContent?.includes(name));
+  // An IconButton: TooltipTrigger's asChild renames the Button's data-slot.
+  const chevronOf = (name: string) =>
+    itemFor(name)?.querySelector<HTMLButtonElement>('button');
+
+  it('turns ancestors into breadcrumb link buttons after navigating in', async () => {
+    await render();
+    await act(async () => chevronOf('Carriers')?.click());
+
+    const page = trail()?.querySelector('[data-slot="breadcrumb-page"]');
+    expect(page?.textContent).toBe('Carriers');
+    expect(page?.getAttribute('title')).toBe('Carriers');
+    const link = trail()?.querySelector<HTMLButtonElement>(
+      '[data-slot="breadcrumb-link"]',
+    );
+    expect(link?.tagName).toBe('BUTTON');
+    expect(link?.getAttribute('type')).toBe('button');
+    expect(link?.textContent).toBe('agents.filters.byMe');
+    expect(itemFor('Rotterdam')).toBeDefined();
+
+    await act(async () => link?.click());
+    expect(
+      trail()?.querySelector('[data-slot="breadcrumb-page"]')?.textContent,
+    ).toBe('agents.filters.byMe');
+  });
+
+  it('renders the folder rows as cmdk items in a focusable Command', async () => {
+    await render('f2');
+    const rows = items();
+    expect(rows.map((r) => r.textContent)).toEqual([
+      'agents.folders.noFolder',
+      'Carriers',
+      'Customs',
+    ]);
+    rows.forEach((r) => {
+      expect(r.hasAttribute('cmdk-item')).toBe(true);
+      expect(r.getAttribute('role')).toBe('option');
+    });
+    const cmd = document.body.querySelector('[data-slot="command"]');
+    expect(cmd?.getAttribute('tabindex')).toBe('0');
+    // No nested role="button" span inside a row any more.
+    expect(
+      document.body.querySelector('[cmdk-item] [role="button"]'),
+    ).toBeNull();
+  });
+
+  it('marks the chosen folder with CommandItem checked and aria-checked', async () => {
+    await render('f2');
+    expect(itemFor('Customs')?.getAttribute('data-checked')).toBe('true');
+    expect(itemFor('Customs')?.getAttribute('aria-checked')).toBe('true');
+    for (const name of ['Carriers', 'agents.folders.noFolder']) {
+      expect(itemFor(name)?.hasAttribute('data-checked')).toBe(false);
+      expect(itemFor(name)?.getAttribute('aria-checked')).toBe('false');
+      expect(itemFor(name)?.hasAttribute('aria-pressed')).toBe(false);
+    }
+
+    await act(async () => itemFor('Carriers')?.click());
+    expect(itemFor('Carriers')?.getAttribute('data-checked')).toBe('true');
+    expect(itemFor('Carriers')?.getAttribute('aria-checked')).toBe('true');
+    expect(itemFor('Customs')?.hasAttribute('data-checked')).toBe(false);
+
+    await act(async () => itemFor('agents.folders.noFolder')?.click());
+    expect(
+      itemFor('agents.folders.noFolder')?.getAttribute('aria-checked'),
+    ).toBe('true');
+    expect(itemFor('Carriers')?.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('highlights no row on open, not even "No folder (root)"', async () => {
+    await render('f2');
+    expect(items().length).toBe(3);
+    expect(
+      items().filter((r) => r.getAttribute('data-selected') === 'true'),
+    ).toHaveLength(0);
+  });
+
+  it('keys rows by folder id, so same-named folders highlight separately', async () => {
+    getAgentFolders.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        folders: [
+          { id: 'd1', name: 'Archive', parent_id: null },
+          { id: 'd2', name: 'Archive', parent_id: null },
+        ],
+      }),
+    });
+    await render();
+    const [first, second] = items();
+    await act(async () => {
+      first.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }));
+    });
+    expect(first.getAttribute('data-selected')).toBe('true');
+    expect(second.getAttribute('data-selected')).toBe('false');
+
+    await act(async () => second.click());
+    expect(second.getAttribute('data-checked')).toBe('true');
+    expect(first.hasAttribute('data-checked')).toBe(false);
+  });
+
+  it('drills in from the chevron without changing the chosen folder', async () => {
+    await render('f2');
+    const chevron = chevronOf('Carriers');
+    expect(chevron?.getAttribute('type')).toBe('button');
+    expect(chevron?.getAttribute('data-variant')).toBe('ghost-on-accent');
+    expect(chevron?.getAttribute('data-size')).toBe('icon-xs');
+    expect(chevron?.getAttribute('aria-label')).toBe(
+      'agents.folders.openFolder',
+    );
+    // The folder icon is decorative; the row's text names it.
+    expect(
+      itemFor('Carriers')?.querySelector('svg')?.getAttribute('aria-hidden'),
+    ).toBe('true');
+    expect(chevron?.querySelector('svg')).not.toBeNull();
+    // The chevron is the row's last child, and only rows with subfolders get one.
+    expect(itemFor('Carriers')?.lastElementChild).toBe(chevron);
+    expect(chevronOf('Customs')).toBeNull();
+
+    await act(async () => chevron?.click());
+    expect(itemFor('Rotterdam')).toBeDefined();
+    expect(itemFor('Rotterdam')?.getAttribute('aria-checked')).toBe('false');
+
+    await act(async () =>
+      trail()
+        ?.querySelector<HTMLButtonElement>('[data-slot="breadcrumb-link"]')
+        ?.click(),
+    );
+    expect(itemFor('Customs')?.getAttribute('data-checked')).toBe('true');
+    expect(itemFor('Carriers')?.hasAttribute('data-checked')).toBe(false);
+  });
+
+  it('does not choose the row when Enter is pressed on its chevron', async () => {
+    await render('f2');
+    const row = itemFor('Carriers')!;
+    // Highlight the row, as the pointer does on the way to the chevron, so
+    // cmdk's root Enter handler would select it if the key reached it.
+    await act(async () => {
+      row.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }));
+    });
+    expect(row.getAttribute('data-selected')).toBe('true');
+
+    await act(async () => {
+      chevronOf('Carriers')?.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    expect(itemFor('Carriers')?.hasAttribute('data-checked')).toBe(false);
+    expect(itemFor('Customs')?.getAttribute('data-checked')).toBe('true');
+  });
+
+  it('renders the footer actions as pill buttons', async () => {
+    await render();
+    const newFolder = rowFor('agents.folders.newFolder');
+    expect(newFolder?.getAttribute('data-variant')).toBe('outline-primary');
+    // New Folder swaps in place with the 42px new-folder Input, so it is the
+    // field height too and the footer row doesn't jump.
+    expect(newFolder?.getAttribute('data-size')).toBe('field');
+    expect(newFolder?.getAttribute('data-shape')).toBe('pill');
+    expect(rowFor('agents.folders.move')?.getAttribute('data-shape')).toBe(
+      'pill',
+    );
+    expect(rowFor('cancel')?.getAttribute('data-shape')).toBe('pill');
+  });
+});
diff --git a/frontend/src/modals/MoveToFolderModal.tsx b/frontend/src/modals/MoveToFolderModal.tsx
index ae25db68..11870f07 100644
--- a/frontend/src/modals/MoveToFolderModal.tsx
+++ b/frontend/src/modals/MoveToFolderModal.tsx
@@ -1,17 +1,37 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronRight, Folder } from 'lucide-react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AgentFolder } from '../agents/types';
 import userService from '../api/services/userService';
-import ChevronRight from '../assets/chevron-right.svg';
-import FolderIcon from '../assets/folder.svg';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../components/ui/breadcrumb';
 import { Button } from '../components/ui/button';
+import { IconButton } from '../components/ui/icon-button';
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '../components/ui/command';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState } from '../models/misc';
 import { selectToken, setAgentFolders } from '../preferences/preferenceSlice';
 
+// cmdk keys rows by `value`: the root row needs a value no folder id can take,
+// and the highlight starts on a value no row has, so nothing is highlighted
+// until the pointer or the arrow keys move it.
+const ROOT_ROW_VALUE = '__docsgpt-no-folder__';
+const NO_HIGHLIGHT = '__docsgpt-no-highlight__';
+
 type MoveToFolderModalProps = {
   modalState: ActiveState;
   setModalState: (state: ActiveState) => void;
@@ -40,6 +60,8 @@ export default function MoveToFolderModal({
   const newFolderInputRef = useRef<HTMLInputElement>(null);
   // Track navigation path for nested folders
   const [folderPath, setFolderPath] = useState<string[]>([]);
+  // The row cmdk highlights (pointer / arrow keys), apart from the chosen one.
+  const [highlightedRow, setHighlightedRow] = useState(NO_HIGHLIGHT);
 
   const currentNavigationFolderId =
     folderPath.length > 0 ? folderPath[folderPath.length - 1] : null;
@@ -49,6 +71,7 @@ export default function MoveToFolderModal({
       fetchFolders();
       setSelectedFolderId(currentFolderId || null);
       setFolderPath([]);
+      setHighlightedRow(NO_HIGHLIGHT);
     }
   }, [modalState]);
 
@@ -82,6 +105,9 @@ export default function MoveToFolderModal({
     });
   }, [folders, folderPath]);
 
+  const showRootRow = Boolean(currentFolderId) && folderPath.length === 0;
+  const hasRows = showRootRow || currentLevelFolders.length > 0;
+
   const handleNavigateIntoFolder = (folderId: string) => {
     setFolderPath((prev) => [...prev, folderId]);
   };
@@ -119,6 +145,29 @@ export default function MoveToFolderModal({
     }
   };
 
+  const createNewFolder = () => {
+    handleCreateFolder(newFolderName.trim());
+    setNewFolderName('');
+    setIsCreatingFolder(false);
+  };
+
+  const cancelFooter = () => {
+    if (isCreatingFolder) {
+      setNewFolderName('');
+      setIsCreatingFolder(false);
+    } else {
+      setModalState('INACTIVE');
+    }
+  };
+
+  const submitFooter = () => {
+    if (isCreatingFolder) {
+      if (newFolderName.trim()) createNewFolder();
+    } else {
+      handleMove();
+    }
+  };
+
   const handleMove = async () => {
     try {
       const response = await userService.moveAgentToFolder(
@@ -138,143 +187,206 @@ export default function MoveToFolderModal({
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && setModalState('INACTIVE')}
-      size="md"
-      className="w-[800px] max-w-[90vw] p-0! sm:max-w-[90vw]"
+      size="lg"
       contentClassName="overflow-visible"
-      hideTitle
-      title={`${t('agents.folders.move')} "${agentName}" to`}
-    >
-      <div>
-        <div className="px-6 pt-4">
-          <h2 className="text-foreground dark:text-foreground mb-2 text-2xl leading-7 font-semibold tracking-[0.15px]">
-            {t('agents.folders.move')} &quot;{agentName}&quot; to
-          </h2>
-        </div>
-        <div className="bg-muted dark:bg-muted text-muted-foreground flex items-center gap-1 px-8 py-2 text-xs font-semibold">
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => handleNavigateToPath(-1)}
-            className={`hover:text-foreground h-auto px-0 py-0 text-xs font-semibold hover:bg-transparent dark:hover:text-white ${folderPath.length > 0 ? 'opacity-70' : ''}`}
-          >
-            {t('agents.filters.byMe')}
-          </Button>
-          {breadcrumbItems.map((item, index) => (
-            <span key={item.id} className="flex items-center gap-1">
-              <svg
-                className="mx-1"
-                width="5"
-                height="10"
-                viewBox="0 0 5 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+      title={t('agents.folders.moveTitle', { name: agentName })}
+      footer={
+        <ModalActions
+          cancelLabel={t('cancel')}
+          onCancel={cancelFooter}
+          submitLabel={
+            isCreatingFolder
+              ? t('agents.folders.createFolder')
+              : t('agents.folders.move')
+          }
+          onSubmit={submitFooter}
+          disabled={isCreatingFolder && !newFolderName.trim()}
+          footerStart={
+            isCreatingFolder ? (
+              <Input
+                ref={newFolderInputRef}
+                type="text"
+                label={t('agents.folders.folderName')}
+                value={newFolderName}
+                onChange={(e) => setNewFolderName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && newFolderName.trim()) {
+                    createNewFolder();
+                  } else if (e.key === 'Escape') {
+                    setNewFolderName('');
+                    setIsCreatingFolder(false);
+                  }
+                }}
+                onBlur={() => {
+                  if (!newFolderName.trim()) {
+                    setIsCreatingFolder(false);
+                  }
+                }}
+                placeholder={t('agents.folders.newFolder')}
+                shape="pill"
+                autoFocus
+              />
+            ) : (
+              <Button
+                type="button"
+                variant="outline-primary"
+                size="field"
+                shape="pill"
+                onClick={() => {
+                  setIsCreatingFolder(true);
+                  setTimeout(() => newFolderInputRef.current?.focus(), 0);
+                }}
               >
-                <path
-                  d="M0.134367 9.15687C0.0914459 9.20458 0.0578918 9.2607 0.0356192 9.32203C0.0133471 9.38335 0.00279279 9.44869 0.00455995 9.5143C0.00632664 9.57992 0.0203805 9.64452 0.045918 9.70443C0.0714555 9.76434 0.107977 9.81837 0.153397 9.86346C0.198817 9.90854 0.252247 9.94378 0.310635 9.96718C0.369022 9.99057 0.431225 10.0017 0.493692 9.9998C0.556159 9.99794 0.617665 9.98318 0.674701 9.95636C0.731736 9.92954 0.783183 9.89118 0.826104 9.84347L4.86996 5.34611C4.95347 5.25333 5 5.13049 5 5.00281C5 4.87513 4.95347 4.75229 4.86996 4.65951L0.826103 0.161649C0.783465 0.112896 0.73203 0.0735287 0.674785 0.045833C0.617539 0.0181364 0.555626 0.00266495 0.49264 0.000314153C0.429653 -0.00203665 0.36685 0.00878279 0.307878 0.0321411C0.248906 0.0555004 0.19494 0.0909342 0.149116 0.136384C0.103292 0.181836 0.0665217 0.236396 0.0409428 0.296899C0.0153638 0.357402 0.00148499 0.422641 0.000112656 0.488825C-0.00125968 0.55501 0.00990166 0.620821 0.0329486 0.682436C0.0559961 0.744051 0.0904695 0.800243 0.134366 0.847745L3.86994 5.00281L0.134367 9.15687Z"
-                  fill="currentColor"
-                />
-              </svg>
-              {index === breadcrumbItems.length - 1 ? (
-                <span>{item.name}</span>
+                {t('agents.folders.newFolder')}
+              </Button>
+            )
+          }
+        />
+      }
+    >
+      {/* The Modal keeps its p-8 for the title and footer; the breadcrumb band
+          and the folder list bleed to the dialog's edges (-mx-9 = the 32px
+          padding plus the content area's 4px). */}
+      <div className="-mx-9">
+        <div className="bg-muted px-8 py-2">
+          <Breadcrumb className="min-w-0">
+            <BreadcrumbList className="flex-nowrap">
+              {folderPath.length === 0 ? (
+                <BreadcrumbItem className="min-w-0">
+                  <BreadcrumbPage
+                    title={t('agents.filters.byMe')}
+                    className="max-w-[32ch]"
+                  >
+                    {t('agents.filters.byMe')}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
               ) : (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => handleNavigateToPath(index)}
-                  className="hover:text-foreground h-auto px-0 py-0 text-xs font-semibold opacity-70 hover:bg-transparent dark:hover:text-white"
-                >
-                  {item.name}
-                </Button>
+                <BreadcrumbItem>
+                  <BreadcrumbLink asChild>
+                    <button
+                      type="button"
+                      onClick={() => handleNavigateToPath(-1)}
+                    >
+                      {t('agents.filters.byMe')}
+                    </button>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
               )}
-            </span>
-          ))}
+              {breadcrumbItems.map((item, index) => (
+                <Fragment key={item.id}>
+                  <BreadcrumbSeparator />
+                  {index === breadcrumbItems.length - 1 ? (
+                    <BreadcrumbItem className="min-w-0">
+                      <BreadcrumbPage
+                        title={item.name}
+                        className="max-w-[32ch]"
+                      >
+                        {item.name}
+                      </BreadcrumbPage>
+                    </BreadcrumbItem>
+                  ) : (
+                    <BreadcrumbItem>
+                      <BreadcrumbLink asChild>
+                        <button
+                          type="button"
+                          onClick={() => handleNavigateToPath(index)}
+                        >
+                          {item.name}
+                        </button>
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                  )}
+                </Fragment>
+              ))}
+            </BreadcrumbList>
+          </Breadcrumb>
         </div>
-        <div className="dark:border-border max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200">
+        <div className="border-border border-y px-5 py-1">
           {isLoading ? (
             <div className="flex h-[200px] items-center justify-center">
               <span className="text-muted-foreground text-sm">
                 {t('modals.searchConversations.loading')}
               </span>
             </div>
-          ) : (
-            <div className="flex w-full flex-col">
-              {/* Option to move to root (no folder) - only show at root level */}
-              {currentFolderId && folderPath.length === 0 && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSelectedFolderId(null);
-                  }}
-                  className={`dark:border-border h-auto w-full justify-start gap-2 rounded-none border-b border-gray-200 px-8 py-2 text-left text-sm ${
-                    selectedFolderId === null
-                      ? 'bg-primary hover:bg-primary text-white hover:text-white'
-                      : 'bg-muted hover:bg-accent dark:bg-muted'
-                  }`}
-                >
-                  <span
-                    className={
-                      selectedFolderId === null
-                        ? 'text-white'
-                        : 'text-gray-600 dark:text-gray-300'
-                    }
-                  >
-                    {t('agents.folders.noFolder')}
-                  </span>
-                </Button>
-              )}
-
-              {currentLevelFolders.map((folder) => (
-                <Button
-                  key={folder.id}
-                  type="button"
-                  variant="ghost"
-                  onClick={() => setSelectedFolderId(folder.id)}
-                  className={`dark:border-border h-auto w-full justify-between rounded-none border-b border-gray-200 px-8 py-2 text-left text-sm ${
-                    selectedFolderId === folder.id
-                      ? 'bg-primary hover:bg-primary text-white hover:text-white'
-                      : 'bg-muted hover:bg-accent dark:bg-muted'
-                  }`}
-                >
-                  <span className="flex flex-1 items-center gap-2">
-                    <img
-                      src={FolderIcon}
-                      alt="folder"
-                      className={`h-4 w-4 ${selectedFolderId === folder.id ? 'brightness-0 invert' : ''}`}
-                    />
-                    <span
-                      className={`truncate ${selectedFolderId === folder.id ? 'text-white' : 'text-foreground'}`}
+          ) : hasRows ? (
+            <Command
+              tabIndex={0}
+              value={highlightedRow}
+              onValueChange={setHighlightedRow}
+            >
+              <CommandList
+                label={t('agents.folders.moveToFolder')}
+                className="max-h-60 min-h-50"
+              >
+                <CommandGroup>
+                  {/* Option to move to root (no folder) - only show at root level */}
+                  {showRootRow && (
+                    <CommandItem
+                      value={ROOT_ROW_VALUE}
+                      keywords={[t('agents.folders.noFolder')]}
+                      checked={selectedFolderId === null}
+                      aria-checked={selectedFolderId === null}
+                      onSelect={() => setSelectedFolderId(null)}
                     >
-                      {folder.name}
-                    </span>
-                  </span>
-                  {/* Check if folder has subfolders */}
-                  {folders.some((f) => f.parent_id === folder.id) && (
-                    <span
-                      role="button"
-                      tabIndex={0}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleNavigateIntoFolder(folder.id);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.stopPropagation();
-                          handleNavigateIntoFolder(folder.id);
+                      <span
+                        className={
+                          selectedFolderId === null
+                            ? undefined
+                            : 'text-muted-foreground'
                         }
-                      }}
-                      className="hover:bg-accent ml-2 flex h-6 w-6 items-center justify-center rounded-full"
-                    >
-                      <img
-                        src={ChevronRight}
-                        alt="expand"
-                        className={`h-3 w-3 ${selectedFolderId === folder.id ? 'brightness-0 invert' : 'dark:invert'}`}
-                      />
-                    </span>
+                      >
+                        {t('agents.folders.noFolder')}
+                      </span>
+                    </CommandItem>
                   )}
-                </Button>
-              ))}
+
+                  {currentLevelFolders.map((folder) => (
+                    <CommandItem
+                      key={folder.id}
+                      value={folder.id}
+                      keywords={[folder.name]}
+                      checked={selectedFolderId === folder.id}
+                      aria-checked={selectedFolderId === folder.id}
+                      onSelect={() => setSelectedFolderId(folder.id)}
+                      className="justify-between"
+                    >
+                      <span className="flex flex-1 items-center gap-2">
+                        <Folder className="text-primary" />
+                        <span className="truncate">{folder.name}</span>
+                      </span>
+                      {/* Check if folder has subfolders */}
+                      {folders.some((f) => f.parent_id === folder.id) && (
+                        <IconButton
+                          variant="ghost-on-accent"
+                          size="icon-xs"
+                          label={t('agents.folders.openFolder')}
+                          onClick={(e) => {
+                            // Keep cmdk's row click from choosing the folder.
+                            e.stopPropagation();
+                            handleNavigateIntoFolder(folder.id);
+                          }}
+                          onKeyDown={(e) => {
+                            // cmdk's root handles Enter by choosing the
+                            // highlighted row and cancelling this button's
+                            // click; stop it here so Enter drills in instead.
+                            if (e.key === 'Enter') e.stopPropagation();
+                          }}
+                        >
+                          {/* text-current keeps the Button's colour: the
+                              CommandItem mutes every uncoloured svg in it. */}
+                          <ChevronRight
+                            className="text-current"
+                            aria-hidden="true"
+                          />
+                        </IconButton>
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          ) : (
+            <>
               {currentLevelFolders.length === 0 && folderPath.length > 0 && (
                 <div className="text-muted-foreground flex h-[200px] items-center justify-center text-sm">
                   {t('agents.folders.noSubfolders')}
@@ -287,98 +399,9 @@ export default function MoveToFolderModal({
                     {t('agents.folders.noFolders')}
                   </div>
                 )}
-            </div>
+            </>
           )}
         </div>
-
-        <div className="dark:border-border flex items-center justify-between border-t border-gray-200 px-8 py-4">
-          {isCreatingFolder ? (
-            <Input
-              ref={newFolderInputRef}
-              type="text"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && newFolderName.trim()) {
-                  handleCreateFolder(newFolderName.trim());
-                  setNewFolderName('');
-                  setIsCreatingFolder(false);
-                } else if (e.key === 'Escape') {
-                  setNewFolderName('');
-                  setIsCreatingFolder(false);
-                }
-              }}
-              onBlur={() => {
-                if (!newFolderName.trim()) {
-                  setIsCreatingFolder(false);
-                }
-              }}
-              placeholder={t('agents.folders.newFolder')}
-              className="border-primary text-primary placeholder:text-primary/60 dark:placeholder:text-primary/60 dark:text-primary dark:border-primary h-auto rounded-full px-6 py-2 text-sm font-medium"
-              autoFocus
-            />
-          ) : (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsCreatingFolder(true);
-                setTimeout(() => newFolderInputRef.current?.focus(), 0);
-              }}
-              className="border-primary text-primary hover:bg-primary/10 hover:text-primary h-auto rounded-full bg-transparent px-6 py-2 text-sm font-medium"
-            >
-              {t('agents.folders.newFolder')}
-            </Button>
-          )}
-
-          <div className="flex gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (isCreatingFolder) {
-                  setNewFolderName('');
-                  setIsCreatingFolder(false);
-                } else {
-                  setModalState('INACTIVE');
-                }
-              }}
-              className="dark:text-foreground h-auto rounded-3xl px-5 py-2 text-sm font-medium"
-            >
-              {t('cancel')}
-            </Button>
-            {isCreatingFolder ? (
-              <Button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (newFolderName.trim()) {
-                    handleCreateFolder(newFolderName.trim());
-                    setNewFolderName('');
-                    setIsCreatingFolder(false);
-                  }
-                }}
-                disabled={!newFolderName.trim()}
-                className="h-auto rounded-3xl px-5 py-2 text-sm text-white"
-              >
-                {t('agents.folders.createFolder')}
-              </Button>
-            ) : (
-              <Button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleMove();
-                }}
-                className="h-auto rounded-3xl px-5 py-2 text-sm text-white"
-              >
-                {t('agents.folders.move')}
-              </Button>
-            )}
-          </div>
-        </div>
       </div>
     </Modal>
   );
diff --git a/frontend/src/modals/RegenerateAccessTokenModal.tsx b/frontend/src/modals/RegenerateAccessTokenModal.tsx
index 1b217dbb..519913b0 100644
--- a/frontend/src/modals/RegenerateAccessTokenModal.tsx
+++ b/frontend/src/modals/RegenerateAccessTokenModal.tsx
@@ -1,3 +1,4 @@
+import { CircleAlert, TriangleAlert } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,10 +9,9 @@ import patService, {
   CreateAccessTokenResponse,
   PersonalAccessToken,
 } from '../api/services/patService';
-import Spinner from '../components/Spinner';
-import { Button } from '../components/ui/button';
-import { Label } from '../components/ui/label';
-import { Modal } from '../components/ui/modal';
+import { Alert, AlertDescription } from '../components/ui/alert';
+import { FormField } from '../components/ui/form-field';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -89,66 +89,48 @@ export default function RegenerateAccessTokenModal({
     <Modal
       open={item !== null}
       onOpenChange={(o) => !o && handleClose()}
-      hideTitle
       title={t('settings.accessTokens.regenerate.title')}
+      description={
+        <span className="break-words">
+          {t('settings.accessTokens.regenerate.warning', {
+            name: item?.name ?? '',
+            ...NO_ESCAPE,
+          })}
+        </span>
+      }
       size="md"
       mobileVariant="sheet"
       isPerformingTask={submitting}
       footer={
-        <>
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={handleClose}
-            disabled={submitting}
-            className="rounded-3xl px-6"
-          >
-            {t('settings.accessTokens.create.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={submitting}
-            className="rounded-3xl px-6 text-white"
-          >
-            {submitting ? (
-              <span className="flex items-center gap-2">
-                <Spinner size="small" />
-                {t('settings.accessTokens.regenerate.submitting')}
-              </span>
-            ) : (
-              t('settings.accessTokens.regenerate.submit')
-            )}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.accessTokens.create.cancel')}
+          onCancel={handleClose}
+          submitLabel={t('settings.accessTokens.regenerate.submit')}
+          onSubmit={handleSubmit}
+          pending={submitting}
+          cancelProps={{ disabled: submitting }}
+        />
       }
     >
-      <div className="flex flex-col gap-5 px-1">
-        <div>
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t('settings.accessTokens.regenerate.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm break-words">
-            {t('settings.accessTokens.regenerate.warning', {
-              name: item?.name ?? '',
-              ...NO_ESCAPE,
-            })}
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <Label htmlFor="pat-regenerate-expiry">
-            {t('settings.accessTokens.regenerate.newExpiration')}
-          </Label>
+      <div className="flex flex-col gap-5">
+        <FormField
+          label={t('settings.accessTokens.regenerate.newExpiration')}
+          hint={
+            expiry === NO_EXPIRY
+              ? undefined
+              : t('settings.accessTokens.create.expiresOn', {
+                  date: formatDateOnly(
+                    new Date(Date.now() + expiry * DAY_MS).toISOString(),
+                  ),
+                  ...NO_ESCAPE,
+                })
+          }
+        >
           <Select
             value={String(expiry)}
             onValueChange={(value) => setExpiry(Number(value))}
           >
-            <SelectTrigger
-              id="pat-regenerate-expiry"
-              className="w-full rounded-xl px-4 py-2"
-              size="lg"
-            >
+            <SelectTrigger className="w-full" size="field">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -159,31 +141,21 @@ export default function RegenerateAccessTokenModal({
               ))}
             </SelectContent>
           </Select>
-          <p
-            className={`text-xs ${
-              expiry === NO_EXPIRY
-                ? 'text-amber-700 dark:text-amber-400'
-                : 'text-muted-foreground'
-            }`}
-          >
-            {expiry === NO_EXPIRY
-              ? t('settings.accessTokens.create.noExpirationHint')
-              : t('settings.accessTokens.create.expiresOn', {
-                  date: formatDateOnly(
-                    new Date(Date.now() + expiry * DAY_MS).toISOString(),
-                  ),
-                  ...NO_ESCAPE,
-                })}
-          </p>
-        </div>
+          {expiry === NO_EXPIRY ? (
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {t('settings.accessTokens.create.noExpirationHint')}
+              </AlertDescription>
+            </Alert>
+          ) : null}
+        </FormField>
 
         {error && (
-          <p
-            role="alert"
-            className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
-          >
-            {error}
-          </p>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/modals/SearchConversationsModal.test.tsx b/frontend/src/modals/SearchConversationsModal.test.tsx
new file mode 100644
index 00000000..3ee33c26
--- /dev/null
+++ b/frontend/src/modals/SearchConversationsModal.test.tsx
@@ -0,0 +1,196 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+const media = { isMobile: false, isDesktop: true };
+vi.mock('../hooks', () => ({
+  useMediaQuery: () => media,
+}));
+
+const searchConversations = vi.fn();
+vi.mock('../preferences/preferenceApi', () => ({
+  searchConversations: (...args: unknown[]) => searchConversations(...args),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import SearchConversationsModal from './SearchConversationsModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const conversations = [
+  { id: 'c1', name: 'Fuel surcharge policy summary' },
+  { id: 'c2', name: 'Q3 carrier rate negotiation' },
+];
+
+const serverResults = [
+  {
+    id: 'r1',
+    name: 'Q3 carrier rate negotiation',
+    match_field: 'response' as const,
+    match_snippet: 'Halvorsen agreed to cap the fuel surcharge at 18%.',
+  },
+  {
+    id: 'r2',
+    name: 'Customs hold on Rotterdam shipment',
+    match_field: 'prompt' as const,
+    match_snippet: 'The broker added a demurrage surcharge.',
+  },
+];
+
+describe('SearchConversationsModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let close: ReturnType<typeof vi.fn<() => void>>;
+  let onSelect: ReturnType<typeof vi.fn<(id: string) => void>>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    media.isMobile = false;
+    media.isDesktop = true;
+    searchConversations.mockReset();
+    searchConversations.mockResolvedValue({ data: serverResults });
+    close = vi.fn<() => void>();
+    onSelect = vi.fn<(id: string) => void>();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+  });
+
+  const render = async () => {
+    await act(async () => {
+      root.render(
+        <SearchConversationsModal
+          close={close}
+          conversations={conversations}
+          token="tok"
+          onSelectConversation={onSelect}
+        />,
+      );
+    });
+  };
+
+  const input = () =>
+    document.body.querySelector<HTMLInputElement>(
+      '[data-slot="command-input"]',
+    )!;
+
+  const items = () =>
+    Array.from(
+      document.body.querySelectorAll<HTMLElement>('[data-slot="command-item"]'),
+    );
+
+  const type = async (value: string) => {
+    await act(async () => {
+      const el = input();
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      )!.set!;
+      setter.call(el, value);
+      el.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await act(async () => {
+      vi.advanceTimersByTime(300);
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+  };
+
+  const key = async (k: string) => {
+    await act(async () => {
+      input().dispatchEvent(
+        new KeyboardEvent('keydown', { key: k, bubbles: true }),
+      );
+    });
+  };
+
+  it('renders a CommandDialog without a close button at desktop width', async () => {
+    await render();
+    const content = document.body.querySelector('[data-slot="dialog-content"]');
+    expect(content).not.toBeNull();
+    expect(content!.querySelector('[data-slot="command"]')).not.toBeNull();
+    expect(document.body.querySelector('[data-slot="modal-content"]')).toBe(
+      null,
+    );
+    expect(document.body.querySelector('[data-slot="dialog-close"]')).toBe(
+      null,
+    );
+    expect(items().map((i) => i.textContent)).toEqual([
+      'Fuel surcharge policy summary',
+      'Q3 carrier rate negotiation',
+    ]);
+  });
+
+  it('shows server results as returned, with snippets on desktop', async () => {
+    await render();
+    await type('surcharge');
+    expect(searchConversations).toHaveBeenCalledWith('surcharge', 'tok');
+    const rows = items();
+    // r2's title does not contain the query: cmdk must not filter it out.
+    expect(rows).toHaveLength(2);
+    expect(rows[0].textContent).toContain('Q3 carrier rate negotiation');
+    expect(rows[0].textContent).toContain('Halvorsen agreed');
+    expect(rows[1].textContent).toContain('demurrage');
+    expect(rows[0].querySelector('mark')?.textContent).toBe('surcharge');
+    expect(rows[0].getAttribute('role')).toBe('option');
+  });
+
+  it('opens the highlighted conversation on Enter and follows arrow keys', async () => {
+    await render();
+    await type('surcharge');
+    expect(items()[0].getAttribute('data-selected')).toBe('true');
+    await key('ArrowDown');
+    expect(items()[1].getAttribute('data-selected')).toBe('true');
+    await key('Enter');
+    expect(onSelect).toHaveBeenCalledWith('r2');
+    expect(close).toHaveBeenCalled();
+  });
+
+  it('opens a conversation on click', async () => {
+    await render();
+    await act(async () => {
+      items()[1].click();
+    });
+    expect(onSelect).toHaveBeenCalledWith('c2');
+    expect(close).toHaveBeenCalled();
+  });
+
+  it('shows the empty state when the search returns nothing', async () => {
+    searchConversations.mockResolvedValue({ data: [] });
+    await render();
+    await type('zzz');
+    expect(items()).toHaveLength(0);
+    expect(document.body.textContent).toContain(
+      'modals.searchConversations.noResults',
+    );
+  });
+
+  it('renders a bottom sheet with title-only rows on phones', async () => {
+    media.isMobile = true;
+    media.isDesktop = false;
+    await render();
+    const sheet = document.body.querySelector('[data-slot="modal-content"]');
+    expect(sheet).not.toBeNull();
+    expect(sheet!.hasAttribute('data-mobile-sheet')).toBe(true);
+    expect(sheet!.querySelector('[data-slot="command"]')).not.toBeNull();
+    expect(document.body.querySelector('[data-slot="dialog-content"]')).toBe(
+      null,
+    );
+    await type('surcharge');
+    const rows = items();
+    expect(rows).toHaveLength(2);
+    expect(rows[0].textContent).toBe('Q3 carrier rate negotiation');
+    expect(rows[1].textContent).toBe('Customs hold on Rotterdam shipment');
+    await key('Enter');
+    expect(onSelect).toHaveBeenCalledWith('r1');
+  });
+});
diff --git a/frontend/src/modals/SearchConversationsModal.tsx b/frontend/src/modals/SearchConversationsModal.tsx
index 7ecb37b9..8c93c753 100644
--- a/frontend/src/modals/SearchConversationsModal.tsx
+++ b/frontend/src/modals/SearchConversationsModal.tsx
@@ -1,16 +1,16 @@
-import { Search as SearchIcon } from 'lucide-react';
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
+import {
+  Command,
+  CommandDialog,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../components/ui/command';
 import { Modal } from '../components/ui/modal';
+import { useMediaQuery } from '../hooks';
 import { searchConversations } from '../preferences/preferenceApi';
 
 type ConversationListItem = {
@@ -51,6 +51,13 @@ function HighlightedText({ text, query }: { text: string; query: string }) {
   );
 }
 
+/**
+ * Conversation search palette. At `sm`+ it is a `CommandDialog`; on phones it
+ * is the `Modal` bottom sheet with the same Command parts inside, showing
+ * titles only. Results come from the debounced server search and are shown
+ * unfiltered (`shouldFilter={false}`); cmdk owns arrow-key navigation and
+ * Enter/click open the highlighted conversation via `onSelect`.
+ */
 export default function SearchConversationsModal({
   close,
   conversations,
@@ -58,17 +65,21 @@ export default function SearchConversationsModal({
   onSelectConversation,
 }: SearchConversationsModalProps) {
   const { t } = useTranslation();
+  const { isMobile } = useMediaQuery();
   const inputRef = useRef<HTMLInputElement>(null);
-  const resultRefs = useRef<Array<HTMLButtonElement | null>>([]);
 
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<ConversationListItem[] | null>(null);
   const [isSearching, setIsSearching] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
+  const [selectedId, setSelectedId] = useState('');
 
+  const title = t('modals.searchConversations.searchPlaceholder');
+
+  // The branch can switch after mount (useMediaQuery settles in an effect),
+  // remounting the input, so refocus it whenever the branch changes.
   useEffect(() => {
     inputRef.current?.focus();
-  }, []);
+  }, [isMobile]);
 
   useEffect(() => {
     const trimmed = query.trim();
@@ -92,152 +103,143 @@ export default function SearchConversationsModal({
     return results ?? [];
   }, [query, results, conversations]);
 
+  // Keep the highlighted row when it survives a list change, otherwise
+  // highlight the first row, so Enter always has a target.
   useEffect(() => {
     if (isSearching || visibleConversations.length === 0) {
-      setActiveIndex(-1);
+      setSelectedId('');
       return;
     }
-
-    setActiveIndex((currentIndex) => {
-      if (currentIndex >= 0 && currentIndex < visibleConversations.length) {
-        return currentIndex;
-      }
-
-      return 0;
-    });
+    setSelectedId((current) =>
+      visibleConversations.some((c) => c.id === current)
+        ? current
+        : visibleConversations[0].id,
+    );
   }, [isSearching, visibleConversations]);
 
-  useEffect(() => {
-    if (activeIndex < 0) return;
-
-    resultRefs.current[activeIndex]?.scrollIntoView({
-      block: 'nearest',
-    });
-  }, [activeIndex]);
-
   const handleSelect = (id: string) => {
     onSelectConversation(id);
     close();
   };
 
-  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (visibleConversations.length === 0 || isSearching) return;
+  const trimmedQuery = query.trim();
+  const showEmptyState =
+    !!trimmedQuery && !isSearching && visibleConversations.length === 0;
 
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      setActiveIndex((currentIndex) =>
-        currentIndex < visibleConversations.length - 1 ? currentIndex + 1 : 0,
+  const status = (
+    <>
+      {isSearching && (
+        <div className="text-muted-foreground px-3 py-3 text-xs">
+          {t('modals.searchConversations.loading')}
+        </div>
+      )}
+      {showEmptyState && (
+        <div className="text-muted-foreground px-3 py-3 text-xs">
+          {t('modals.searchConversations.noResults')}
+        </div>
+      )}
+    </>
+  );
+
+  const renderItems = (withSnippet: boolean) =>
+    !isSearching &&
+    visibleConversations.map((conversation) => {
+      const titleNode = trimmedQuery ? (
+        <HighlightedText text={conversation.name} query={trimmedQuery} />
+      ) : (
+        conversation.name
       );
-      return;
-    }
+      const showSnippet =
+        withSnippet &&
+        !!trimmedQuery &&
+        !!conversation.match_snippet &&
+        conversation.match_field !== 'name';
 
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      setActiveIndex((currentIndex) =>
-        currentIndex > 0 ? currentIndex - 1 : visibleConversations.length - 1,
+      return (
+        <CommandItem
+          key={conversation.id}
+          value={conversation.id}
+          onSelect={() => handleSelect(conversation.id)}
+        >
+          {withSnippet ? (
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <span className="truncate">{titleNode}</span>
+              {showSnippet && (
+                <span className="text-muted-foreground line-clamp-2 text-xs">
+                  <HighlightedText
+                    text={conversation.match_snippet as string}
+                    query={trimmedQuery}
+                  />
+                </span>
+              )}
+            </div>
+          ) : (
+            <span className="truncate">{titleNode}</span>
+          )}
+        </CommandItem>
       );
-      return;
-    }
+    });
 
-    if (event.key === 'Enter' && activeIndex >= 0) {
-      event.preventDefault();
-      handleSelect(visibleConversations[activeIndex].id);
-    }
+  const commandProps = {
+    shouldFilter: false,
+    label: title,
+    value: selectedId,
+    onValueChange: setSelectedId,
   };
 
-  const showEmptyState =
-    !!query.trim() && !isSearching && visibleConversations.length === 0;
+  const input = (
+    <CommandInput
+      ref={inputRef}
+      value={query}
+      onValueChange={setQuery}
+      placeholder={title}
+    />
+  );
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) close();
+  };
+
+  if (isMobile) {
+    return (
+      <Modal
+        open={true}
+        onOpenChange={onOpenChange}
+        hideTitle
+        title={title}
+        showCloseButton={false}
+        mobileVariant="sheet"
+        contentClassName="-mx-3 -mt-3 flex flex-col"
+      >
+        <Command variant="palette" {...commandProps} className="min-h-0">
+          {input}
+          <CommandList className="max-h-none">
+            <div className="py-1">
+              {status}
+              {renderItems(false)}
+            </div>
+          </CommandList>
+        </Command>
+      </Modal>
+    );
+  }
 
   return (
-    <Modal
+    <CommandDialog
       open={true}
-      onOpenChange={(open) => {
-        if (!open) close();
-      }}
-      hideTitle
-      title={t('modals.searchConversations.searchPlaceholder')}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={title}
       showCloseButton={false}
-      mobileVariant="sheet"
-      className="w-[92vw] !max-w-xl !p-0"
-      contentClassName="max-h-[70vh]"
+      commandProps={commandProps}
     >
-      <div className="flex flex-col">
-        <div className="border-sidebar-border flex items-center gap-2 border-b px-5 py-4">
-          <SearchIcon
-            className="text-muted-foreground size-4"
-            strokeWidth={1.75}
-            aria-label="search"
-          />
-          <Input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={handleInputKeyDown}
-            placeholder={t('modals.searchConversations.searchPlaceholder')}
-            className="h-auto rounded-none border-none px-0 py-0 text-sm shadow-none focus-visible:ring-0"
-          />
-        </div>
-
-        <div className="max-h-[55vh] overflow-y-auto py-2" role="listbox">
-          {isSearching && (
-            <div className="text-muted-foreground px-5 py-3 text-xs">
-              {t('modals.searchConversations.loading')}
-            </div>
-          )}
-          {showEmptyState && (
-            <div className="text-muted-foreground px-5 py-3 text-xs">
-              {t('modals.searchConversations.noResults')}
-            </div>
-          )}
-          {!isSearching &&
-            visibleConversations.map((conversation, index) => {
-              const trimmedQuery = query.trim();
-              const showSnippet =
-                !!trimmedQuery &&
-                !!conversation.match_snippet &&
-                conversation.match_field !== 'name';
-              const isActive = index === activeIndex;
-
-              return (
-                <Button
-                  key={conversation.id}
-                  type="button"
-                  variant="ghost"
-                  ref={(element) => {
-                    resultRefs.current[index] = element;
-                  }}
-                  onClick={() => handleSelect(conversation.id)}
-                  onMouseEnter={() => setActiveIndex(index)}
-                  role="option"
-                  aria-selected={isActive}
-                  className={`text-foreground flex h-auto w-full flex-col items-start gap-0.5 rounded-none px-5 py-2.5 text-left ${
-                    isActive ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent'
-                  }`}
-                >
-                  <span className="w-full truncate">
-                    {trimmedQuery ? (
-                      <HighlightedText
-                        text={conversation.name}
-                        query={trimmedQuery}
-                      />
-                    ) : (
-                      conversation.name
-                    )}
-                  </span>
-                  {showSnippet && (
-                    <span className="text-muted-foreground line-clamp-2 w-full text-xs">
-                      <HighlightedText
-                        text={conversation.match_snippet as string}
-                        query={trimmedQuery}
-                      />
-                    </span>
-                  )}
-                </Button>
-              );
-            })}
-        </div>
-      </div>
-    </Modal>
+      {input}
+      <CommandList>
+        {status}
+        {!isSearching && visibleConversations.length > 0 && (
+          <CommandGroup>{renderItems(true)}</CommandGroup>
+        )}
+      </CommandList>
+    </CommandDialog>
   );
 }
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index d0ac889c..047cd66d 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import conversationService from '../api/services/conversationService';
-import Spinner from '../components/Spinner';
+import CopyButton from '../components/CopyButton';
 import { Button } from '../components/ui/button';
+import { FormField } from '../components/ui/form-field';
 import { Modal } from '../components/ui/modal';
 import {
   Select,
@@ -13,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { SettingRow } from '../components/ui/setting-row';
 import { Switch } from '../components/ui/switch';
 import { Doc } from '../models/misc';
 import {
@@ -38,9 +40,9 @@ export const ShareConversationModal = ({
   const domain = window.location.origin;
 
   const [identifier, setIdentifier] = useState<null | string>(null);
-  const [isCopied, setIsCopied] = useState(false);
   const [status, setStatus] = useState<StatusType>('idle');
   const [allowPrompt, setAllowPrompt] = useState<boolean>(false);
+  const promptSwitchId = useId();
 
   const sourceDocs = useSelector(selectSourceDocs);
   const preSelectedDoc = useSelector(selectSelectedDocs);
@@ -60,11 +62,6 @@ export const ShareConversationModal = ({
     value: string;
   } | null>(preSelectedDoc ? extractDocPaths(preSelectedDoc)[0] : null);
 
-  const handleCopyKey = (url: string) => {
-    navigator.clipboard.writeText(url);
-    setIsCopied(true);
-  };
-
   const togglePromptPermission = () => {
     setAllowPrompt(!allowPrompt);
     setStatus('idle');
@@ -110,19 +107,45 @@ export const ShareConversationModal = ({
       title={t('modals.shareConv.label')}
       description={t('modals.shareConv.note')}
       contentClassName="!overflow-visible"
+      footer={
+        status === 'fetched' ? (
+          <CopyButton
+            size="lg"
+            textToCopy={`${domain}/share/${identifier}`}
+            copyLabel={t('modals.saveKey.copy')}
+            copiedLabel={t('modals.saveKey.copied')}
+          />
+        ) : (
+          <Button
+            type="button"
+            size="lg"
+            shape="pill"
+            loading={status === 'loading'}
+            onClick={() => {
+              shareCoversationPublicly(allowPrompt);
+            }}
+          >
+            {t('modals.shareConv.create')}
+          </Button>
+        )
+      }
     >
       <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between">
-          <span className="text-foreground text-lg dark:text-white">
-            {t('modals.shareConv.option')}
-          </span>
+        <SettingRow
+          label={t('modals.shareConv.option')}
+          htmlFor={promptSwitchId}
+        >
           <Switch
+            id={promptSwitchId}
             checked={allowPrompt}
             onCheckedChange={togglePromptPermission}
           />
-        </div>
+        </SettingRow>
         {allowPrompt && (
-          <div className="my-4">
+          <FormField
+            label={t('modals.createAPIKey.sourceDoc')}
+            className="my-4"
+          >
             <Select
               value={sourcePath?.value}
               onValueChange={(value) => {
@@ -132,7 +155,7 @@ export const ShareConversationModal = ({
                 if (opt) setSourcePath(opt);
               }}
             >
-              <SelectTrigger className="w-full rounded-xl px-5 py-3" size="lg">
+              <SelectTrigger className="w-full" size="field">
                 <SelectValue placeholder={t('modals.createAPIKey.sourceDoc')} />
               </SelectTrigger>
               <SelectContent>
@@ -143,35 +166,11 @@ export const ShareConversationModal = ({
                 ))}
               </SelectContent>
             </Select>
-          </div>
+          </FormField>
         )}
-        <div className="flex items-baseline justify-between gap-2">
-          <span className="no-scrollbar border-border text-foreground dark:border-border w-full overflow-x-auto rounded-full border-2 px-4 py-3 whitespace-nowrap dark:text-white">
-            {`${domain}/share/${identifier ?? '....'}`}
-          </span>
-          {status === 'fetched' ? (
-            <Button
-              type="button"
-              size="lg"
-              className="my-1 w-28 rounded-3xl"
-              onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
-            >
-              {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
-            </Button>
-          ) : (
-            <Button
-              type="button"
-              size="lg"
-              className="my-1 w-28 justify-evenly rounded-3xl text-center"
-              onClick={() => {
-                shareCoversationPublicly(allowPrompt);
-              }}
-            >
-              {t('modals.shareConv.create')}
-              {status === 'loading' && <Spinner size="small" />}
-            </Button>
-          )}
-        </div>
+        <span className="no-scrollbar border-border text-foreground w-full overflow-x-auto rounded-full border-2 px-4 py-3 whitespace-nowrap">
+          {`${domain}/share/${identifier ?? '....'}`}
+        </span>
       </div>
     </Modal>
   );
diff --git a/frontend/src/models/misc.ts b/frontend/src/models/misc.ts
index c0c5efb2..4beef408 100644
--- a/frontend/src/models/misc.ts
+++ b/frontend/src/models/misc.ts
@@ -8,11 +8,7 @@ export type User = {
 // (application/storage/db/source_config.py). All fields are optional; absent
 // keys fall back to the backend defaults documented inline.
 export type ChunkingStrategy =
-  | 'classic_chunk'
-  | 'recursive'
-  | 'markdown'
-  | 'parent_child'
-  | 'semantic';
+  'classic_chunk' | 'recursive' | 'markdown' | 'parent_child' | 'semantic';
 
 export type RetrievalExposure = 'prefetch' | 'agentic_tool';
 
diff --git a/frontend/src/models/types.ts b/frontend/src/models/types.ts
index a68829e5..9dba98d3 100644
--- a/frontend/src/models/types.ts
+++ b/frontend/src/models/types.ts
@@ -1,12 +1,7 @@
 export type ModelSource = 'builtin' | 'user';
 export type ModelApiFlavor = 'chat_completions' | 'responses';
 export type ReasoningEffort =
-  | 'none'
-  | 'minimal'
-  | 'low'
-  | 'medium'
-  | 'high'
-  | 'xhigh';
+  'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh';
 
 export interface AvailableModel {
   id: string;
diff --git a/frontend/src/navigation/DetailBreadcrumb.tsx b/frontend/src/navigation/DetailBreadcrumb.tsx
index 6f007a02..78026da3 100644
--- a/frontend/src/navigation/DetailBreadcrumb.tsx
+++ b/frontend/src/navigation/DetailBreadcrumb.tsx
@@ -40,10 +40,7 @@ export default function DetailBreadcrumb({
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage
-            title={currentLabel}
-            className="max-w-[32ch] truncate"
-          >
+          <BreadcrumbPage title={currentLabel} className="max-w-[32ch]">
             {currentLabel}
           </BreadcrumbPage>
         </BreadcrumbItem>
diff --git a/frontend/src/navigation/SectionIndexPage.tsx b/frontend/src/navigation/SectionIndexPage.tsx
index ba75711a..c04d58c1 100644
--- a/frontend/src/navigation/SectionIndexPage.tsx
+++ b/frontend/src/navigation/SectionIndexPage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { ListRow, ListRows } from '@/components/ui/list-row';
 import { selectIsAdmin } from '@/preferences/preferenceSlice';
 
 import { getVisibleGroups, type Section } from './sections';
@@ -19,11 +20,11 @@ export default function SectionIndexPage({ section }: { section: Section }) {
   const groups = getVisibleGroups(section, { isAdmin });
 
   return (
-    <div className="flex flex-col">
-      <h1 className="text-foreground dark:text-foreground text-2xl font-bold">
+    <div className="flex flex-col gap-8">
+      <h1 className="text-foreground text-2xl font-bold">
         {section.title ?? t(section.titleKey)}
       </h1>
-      <div className="mt-6 flex flex-col gap-6">
+      <div className="flex flex-col gap-6">
         {groups.map((group) => (
           <div key={group.key} className="flex flex-col gap-1">
             {group.labelKey && (
@@ -31,31 +32,34 @@ export default function SectionIndexPage({ section }: { section: Section }) {
                 {t(group.labelKey)}
               </p>
             )}
-            <div className="border-border divide-border divide-y overflow-hidden rounded-2xl border">
-              {group.items.map((item) => {
-                const Icon = item.icon;
-                return (
-                  <Link
-                    key={item.key}
-                    to={item.path}
-                    className="hover:bg-muted dark:hover:bg-accent flex items-center gap-3 px-4 py-3.5"
-                  >
-                    <Icon
-                      className="text-muted-foreground size-5 shrink-0"
-                      strokeWidth={1.75}
-                      aria-hidden
-                    />
-                    <span className="text-foreground dark:text-foreground flex-1 text-sm">
-                      {t(item.labelKey)}
-                    </span>
-                    <ChevronRight
-                      className="text-muted-foreground size-4 shrink-0"
-                      strokeWidth={1.75}
-                      aria-hidden
-                    />
-                  </Link>
-                );
-              })}
+            <div className="border-border overflow-hidden rounded-2xl border">
+              <ListRows>
+                {group.items.map((item) => {
+                  const Icon = item.icon;
+                  return (
+                    <ListRow
+                      key={item.key}
+                      interactive
+                      asChild
+                      leading={
+                        <Icon
+                          className="text-muted-foreground size-5 shrink-0"
+                          aria-hidden
+                        />
+                      }
+                      title={t(item.labelKey)}
+                      trailing={
+                        <ChevronRight
+                          className="text-muted-foreground size-4 shrink-0"
+                          aria-hidden
+                        />
+                      }
+                    >
+                      <Link to={item.path} />
+                    </ListRow>
+                  );
+                })}
+              </ListRows>
             </div>
           </div>
         ))}
diff --git a/frontend/src/navigation/SectionNav.tsx b/frontend/src/navigation/SectionNav.tsx
index ec1ff63b..1b2ef85a 100644
--- a/frontend/src/navigation/SectionNav.tsx
+++ b/frontend/src/navigation/SectionNav.tsx
@@ -2,7 +2,7 @@ import { ArrowLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 import { getVisibleGroups, type Section, type SectionItem } from './sections';
 import { useSidebarLevel } from './SidebarLevelProvider';
@@ -42,54 +42,48 @@ export default function SectionNav({
     const isActive = item.key === activeItemKey;
     const Icon = item.icon;
     return (
-      <Link
+      <Button
         key={item.key}
-        to={item.path}
-        onClick={(event) => {
-          // Same level, so nothing slides — but routing through the level
-          // provider still renders the page at low priority, which keeps the
-          // highlight moving under the cursor instead of after the mount.
-          if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-          event.preventDefault();
-          goToLevel(item.path);
-          onNavigate?.();
-        }}
-        aria-current={isActive ? 'page' : undefined}
-        className={cn(
-          'hover:bg-sidebar-accent mx-4 my-1 flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3',
-          isActive && 'bg-sidebar-accent',
-        )}
+        variant="sidebar-item"
+        asChild
+        className="mx-4 my-1 flex"
       >
-        <Icon
-          className="text-muted-foreground size-5 shrink-0"
-          strokeWidth={1.75}
-          aria-hidden
-        />
-        <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
-          {t(item.labelKey)}
-        </p>
-      </Link>
+        <Link
+          to={item.path}
+          onClick={(event) => {
+            // Same level, so nothing slides — but routing through the level
+            // provider still renders the page at low priority, which keeps the
+            // highlight moving under the cursor instead of after the mount.
+            if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+            event.preventDefault();
+            goToLevel(item.path);
+            onNavigate?.();
+          }}
+          aria-current={isActive ? 'page' : undefined}
+        >
+          <Icon className="text-muted-foreground size-5 shrink-0" aria-hidden />
+          <span className="truncate">{t(item.labelKey)}</span>
+        </Link>
+      </Button>
     );
   };
 
   return (
     <div className="flex h-full flex-col">
-      <button
+      <Button
         type="button"
+        variant="sidebar-item"
         onClick={onBack}
-        className="group border-sidebar-border hover:border-sidebar-border mx-4 mt-4 flex shrink-0 cursor-pointer items-center gap-2.5 rounded-3xl border p-3 text-left"
+        className="mx-4 mt-4 flex shrink-0"
       >
         <ArrowLeft
-          className="text-muted-foreground group-hover:text-foreground size-5 shrink-0"
-          strokeWidth={1.75}
+          className="text-muted-foreground size-5 shrink-0"
           aria-hidden
         />
-        <p className="text-muted-foreground group-hover:text-foreground text-sm">
-          {backLabel}
-        </p>
-      </button>
+        <span className="truncate">{backLabel}</span>
+      </Button>
       <p
-        className="text-foreground mt-6 ml-8 shrink-0 truncate pr-4 text-sm font-semibold dark:text-white"
+        className="text-foreground mt-6 ml-8 shrink-0 truncate pr-4 text-sm font-semibold"
         title={sectionTitle}
       >
         {sectionTitle}
diff --git a/frontend/src/navigation/SectionPageHeader.tsx b/frontend/src/navigation/SectionPageHeader.tsx
index 8104dd94..2e79e903 100644
--- a/frontend/src/navigation/SectionPageHeader.tsx
+++ b/frontend/src/navigation/SectionPageHeader.tsx
@@ -22,9 +22,9 @@ export function SectionBackLink({
 }) {
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const { isMobile, isTablet } = useMediaQuery();
+  const { isMobile } = useMediaQuery();
 
-  if (!(isMobile || isTablet)) return null;
+  if (!isMobile) return null;
 
   // Up one level, matching the sidebar's back button: out of an agent lands
   // on the agent list, out of a settings page on the settings index. A
@@ -46,7 +46,7 @@ export function SectionBackLink({
         className,
       )}
     >
-      <ArrowLeft className="size-4 shrink-0" strokeWidth={1.75} aria-hidden />
+      <ArrowLeft className="size-4 shrink-0" aria-hidden />
       {parent ? t(parent.titleKey) : (section.title ?? t(section.titleKey))}
     </Link>
   );
@@ -70,7 +70,7 @@ export default function SectionPageHeader({
   return (
     <div className={cn('flex flex-col', className)}>
       <SectionBackLink section={section} />
-      <h1 className="text-foreground dark:text-foreground text-2xl font-bold">
+      <h1 className="text-foreground text-2xl font-bold">
         {item && section.pageTitle !== 'section'
           ? t(item.labelKey)
           : (section.title ?? t(section.titleKey))}
diff --git a/frontend/src/navigation/SectionPills.tsx b/frontend/src/navigation/SectionPills.tsx
index 4778f8f4..4a4d10f0 100644
--- a/frontend/src/navigation/SectionPills.tsx
+++ b/frontend/src/navigation/SectionPills.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { selectIsAdmin } from '@/preferences/preferenceSlice';
 
@@ -39,19 +40,17 @@ export default function SectionPills({ className }: { className?: string }) {
       {items.map((entry) => {
         const isActive = entry.key === item?.key;
         return (
-          <Link
+          <Button
             key={entry.key}
-            to={entry.path}
-            aria-current={isActive ? 'page' : undefined}
-            className={cn(
-              'rounded-full px-4 py-2 text-sm whitespace-nowrap transition-colors',
-              isActive
-                ? 'bg-border text-foreground dark:bg-accent dark:text-white'
-                : 'text-muted-foreground hover:bg-accent/50 dark:text-gray',
-            )}
+            asChild
+            variant={isActive ? 'outline' : 'ghost-muted'}
+            size="sm"
+            shape="pill"
           >
-            {t(entry.labelKey)}
-          </Link>
+            <Link to={entry.path} aria-current={isActive ? 'page' : undefined}>
+              {t(entry.labelKey)}
+            </Link>
+          </Button>
         );
       })}
     </div>
diff --git a/frontend/src/navigation/SectionRail.tsx b/frontend/src/navigation/SectionRail.tsx
index 5ece5227..5ff75764 100644
--- a/frontend/src/navigation/SectionRail.tsx
+++ b/frontend/src/navigation/SectionRail.tsx
@@ -2,7 +2,8 @@ import { ArrowLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { Button } from '@/components/ui/button';
+import { IconButton } from '@/components/ui/icon-button';
+import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 
 import { getSectionItems, type Section } from './sections';
@@ -40,18 +41,16 @@ export default function SectionRail({
       key={section.key}
       className="animate-in fade-in flex flex-col items-center gap-2 duration-200 motion-reduce:animate-none"
     >
-      <Button
-        type="button"
-        variant="ghost"
+      <IconButton
+        label={backLabel}
+        side="right"
+        variant="ghost-muted"
         size="icon"
         onClick={onBack}
-        aria-label={backLabel}
-        title={backLabel}
-        className="text-muted-foreground hover:text-foreground"
       >
-        <ArrowLeft className="size-5" strokeWidth={1.75} />
-      </Button>
-      <div className="bg-border my-1 h-px w-6 shrink-0" aria-hidden />
+        <ArrowLeft aria-hidden />
+      </IconButton>
+      <Separator className="my-1 w-6" />
       {items.map((item) => {
         const label = t(item.labelKey);
         const isActive = item.key === activeItemKey;
@@ -73,7 +72,7 @@ export default function SectionRail({
               isActive && 'bg-sidebar-accent text-foreground',
             )}
           >
-            <Icon className="size-5" strokeWidth={1.75} aria-hidden />
+            <Icon className="size-5" aria-hidden />
           </Link>
         );
       })}
diff --git a/frontend/src/navigation/SectionShell.tsx b/frontend/src/navigation/SectionShell.tsx
new file mode 100644
index 00000000..e023f6f6
--- /dev/null
+++ b/frontend/src/navigation/SectionShell.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { CurrentSectionHeader } from './SectionPageHeader';
+import SectionPills from './SectionPills';
+
+const WIDTH_CLASSES = {
+  default: 'max-w-6xl',
+  // Admin: wide tables.
+  wide: 'max-w-7xl',
+  narrow: 'max-w-5xl',
+} as const;
+
+/**
+ * The frame of every section page (settings, admin, agents, teams): the
+ * scroll container, the centred column, the section title and, with `pills`,
+ * the phone/tablet destination pills. Content starts 32px under the title.
+ */
+export default function SectionShell({
+  width = 'default',
+  pills = false,
+  header = true,
+  children,
+}: {
+  width?: keyof typeof WIDTH_CLASSES;
+  pills?: boolean;
+  /** False for the phone section index, which draws its own title. */
+  header?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className="h-full overflow-auto p-4 md:p-12">
+      <div className={cn('mx-auto w-full', WIDTH_CLASSES[width])}>
+        {header ? (
+          <>
+            <CurrentSectionHeader />
+            {pills ? <SectionPills className="mt-4" /> : null}
+            <div className="mt-8">{children}</div>
+          </>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/navigation/SidebarLevel.tsx b/frontend/src/navigation/SidebarLevel.tsx
index 20d15f10..a3989a29 100644
--- a/frontend/src/navigation/SidebarLevel.tsx
+++ b/frontend/src/navigation/SidebarLevel.tsx
@@ -58,6 +58,10 @@ export default function SidebarLevel({
         // the container clips once it comes to rest — so the layering only
         // shows while there is layering to show.
         offset === 0 &&
+          /* eslint-disable-next-line shadcn/no-arbitrary-values -- the
+             incoming panel's leading-edge shadow is horizontal; no scale
+             shadow is, and the container clips it at rest (DESIGN.md
+             Approved exceptions). */
           'visible translate-x-0 opacity-100 shadow-[-12px_0_24px_-6px_rgba(0,0,0,0.45)]',
         // Dimmed rather than faded out: at rest the panel in front covers it
         // completely, so there is nothing to hide, and keeping it legible
diff --git a/frontend/src/navigation/SidebarNavRow.test.tsx b/frontend/src/navigation/SidebarNavRow.test.tsx
new file mode 100644
index 00000000..df1cbf33
--- /dev/null
+++ b/frontend/src/navigation/SidebarNavRow.test.tsx
@@ -0,0 +1,55 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { MemoryRouter, NavLink } from 'react-router-dom';
+
+import { Button } from '../components/ui/button';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+// Navigation.tsx renders its sidebar rows as
+// <Button variant="sidebar-item" asChild><NavLink end /></Button>; the
+// variant keys its selected fill on the aria-current NavLink sets.
+function renderRow(path: string) {
+  act(() => {
+    root.render(
+      <MemoryRouter initialEntries={[path]}>
+        <Button variant="sidebar-item" asChild className="mx-4 mt-2 flex">
+          <NavLink to="/agents/manage" end>
+            Manage agents
+          </NavLink>
+        </Button>
+      </MemoryRouter>,
+    );
+  });
+  return container.querySelector('a') as HTMLAnchorElement;
+}
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('sidebar nav row', () => {
+  it('is marked current on the exact route', () => {
+    const link = renderRow('/agents/manage');
+    expect(link.getAttribute('aria-current')).toBe('page');
+    expect(link.dataset.variant).toBe('sidebar-item');
+    expect(link.className).toContain('aria-[current=page]:bg-sidebar-accent');
+    expect(link.className).toContain('mx-4');
+    expect(link.classList.contains('inline-flex')).toBe(false);
+  });
+
+  it('is not current on a nested route, because of end', () => {
+    const link = renderRow('/agents/manage/abc');
+    expect(link.hasAttribute('aria-current')).toBe(false);
+  });
+});
diff --git a/frontend/src/notifications/ActionToast.test.tsx b/frontend/src/notifications/ActionToast.test.tsx
new file mode 100644
index 00000000..e5a4e41b
--- /dev/null
+++ b/frontend/src/notifications/ActionToast.test.tsx
@@ -0,0 +1,94 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+import ActionToast, { ACTION_TOAST_DISMISS_MS } from './ActionToast';
+import actionToastReducer, { showActionToast } from './actionToastSlice';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = () =>
+  configureStore({ reducer: { actionToast: actionToastReducer } });
+
+describe('ActionToast', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let store: ReturnType<typeof makeStore>;
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    store = makeStore();
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <ActionToast />
+        </Provider>,
+      );
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+  });
+
+  const show = async (variant: 'success' | 'destructive', message: string) =>
+    act(async () => {
+      store.dispatch(showActionToast({ variant, message }));
+    });
+
+  it('renders nothing when there is no toast', () => {
+    expect(container.querySelector('[data-slot="toast"]')).toBeNull();
+  });
+
+  it('renders the message as a card with the variant header', async () => {
+    await show('success', 'lena deactivated');
+    const card = container.querySelector('[data-slot="toast"]');
+    expect(card?.textContent).toContain('lena deactivated');
+    // Cards carry no role; the shared ToastViewport is the live region.
+    expect(card?.getAttribute('role')).toBeNull();
+    expect(
+      container
+        .querySelector('[data-slot="toast-header"]')
+        ?.getAttribute('data-variant'),
+    ).toBe('success');
+  });
+
+  it('uses the destructive header for a failure', async () => {
+    await show('destructive', 'Action failed for lena');
+    expect(
+      container
+        .querySelector('[data-slot="toast-header"]')
+        ?.getAttribute('data-variant'),
+    ).toBe('destructive');
+  });
+
+  it('closes on the dismiss button', async () => {
+    await show('success', 'done');
+    const btn = container.querySelector(
+      'button[aria-label="notifications.dismiss"]',
+    ) as HTMLButtonElement;
+    await act(async () => btn.click());
+    expect(container.querySelector('[data-slot="toast"]')).toBeNull();
+  });
+
+  it('auto-dismisses after 4.5s, restarting for a new message', async () => {
+    vi.useFakeTimers();
+    expect(ACTION_TOAST_DISMISS_MS).toBe(4500);
+    await show('success', 'first');
+    await act(async () => vi.advanceTimersByTime(3000));
+    await show('success', 'second');
+    await act(async () => vi.advanceTimersByTime(3000));
+    expect(container.textContent).toContain('second');
+    await act(async () => vi.advanceTimersByTime(1600));
+    expect(container.querySelector('[data-slot="toast"]')).toBeNull();
+  });
+});
diff --git a/frontend/src/notifications/ActionToast.tsx b/frontend/src/notifications/ActionToast.tsx
new file mode 100644
index 00000000..3374454d
--- /dev/null
+++ b/frontend/src/notifications/ActionToast.tsx
@@ -0,0 +1,59 @@
+import { X } from 'lucide-react';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Button } from '../components/ui/button';
+import {
+  Toast,
+  ToastActions,
+  ToastHeader,
+  ToastTitle,
+} from '../components/ui/toast';
+
+import { dismissActionToast, selectActionToast } from './actionToastSlice';
+
+export const ACTION_TOAST_DISMISS_MS = 4500;
+
+/**
+ * The result of an action a page just ran (dispatch `showActionToast`),
+ * shown as a card in the shared `ToastViewport` mounted in App.tsx. Returns
+ * only the card; the viewport is the live region. Auto-dismisses after
+ * 4.5s, restarting whenever a new result replaces the card.
+ */
+export default function ActionToast() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const toast = useSelector(selectActionToast);
+  const id = toast?.id;
+
+  useEffect(() => {
+    if (id === undefined) return;
+    const timer = window.setTimeout(
+      () => dispatch(dismissActionToast(id)),
+      ACTION_TOAST_DISMISS_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [id, dispatch]);
+
+  if (!toast) return null;
+
+  return (
+    <Toast>
+      <ToastHeader variant={toast.variant}>
+        <ToastTitle wrap>{toast.message}</ToastTitle>
+        <ToastActions>
+          <Button
+            type="button"
+            variant="ghost-muted"
+            size="icon-sm"
+            onClick={() => dispatch(dismissActionToast(toast.id))}
+            aria-label={t('notifications.dismiss')}
+          >
+            <X />
+          </Button>
+        </ToastActions>
+      </ToastHeader>
+    </Toast>
+  );
+}
diff --git a/frontend/src/notifications/TeamNotificationToast.test.tsx b/frontend/src/notifications/TeamNotificationToast.test.tsx
new file mode 100644
index 00000000..b034508f
--- /dev/null
+++ b/frontend/src/notifications/TeamNotificationToast.test.tsx
@@ -0,0 +1,109 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: Record<string, unknown>) =>
+      opts && 'team' in opts ? `${key}:${opts.team}` : key,
+  }),
+}));
+
+import notificationsReducer, { sseEventReceived } from './notificationsSlice';
+import TeamNotificationToast from './TeamNotificationToast';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = () =>
+  configureStore({ reducer: { notifications: notificationsReducer } });
+
+describe('TeamNotificationToast', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let store: ReturnType<typeof makeStore>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    store = makeStore();
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+  });
+
+  const renderToast = async () => {
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <TeamNotificationToast />
+        </Provider>,
+      );
+    });
+  };
+
+  const addMember = (id: string) =>
+    store.dispatch(
+      sseEventReceived({
+        id,
+        type: 'team.member_added',
+        payload: { team_name: 'Ops', role: 'team_member' },
+      }),
+    );
+
+  it('renders nothing without team events', async () => {
+    await renderToast();
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders title and body on the shared toast primitive', async () => {
+    addMember('e1');
+    await renderToast();
+    // Cards only: App.tsx owns the one shared ToastViewport (the live
+    // region), so the component renders neither a rail nor a role.
+    expect(container.querySelector('[data-slot="toast-viewport"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    const toast = container.querySelector('[data-slot="toast"]');
+    expect(toast).not.toBeNull();
+    expect(toast?.parentElement).toBe(container);
+    const title = container.querySelector('[data-slot="toast-title"]');
+    expect(title?.textContent).toBe('notifications.memberAddedTitle');
+    // A long localized title wraps rather than truncating.
+    expect(title?.className).not.toContain('truncate');
+    const body = container.querySelector('[data-slot="toast-message"]');
+    expect(body?.textContent).toBe('notifications.memberAddedBody:Ops');
+    expect(body?.className).toContain('text-sm');
+  });
+
+  it('dismisses on the close button', async () => {
+    addMember('e1');
+    await renderToast();
+    const close = container.querySelector(
+      'button[aria-label="notifications.dismiss"]',
+    ) as HTMLButtonElement;
+    expect(close).not.toBeNull();
+    await act(async () => close.click());
+    expect(container.innerHTML).toBe('');
+    expect(
+      store
+        .getState()
+        .notifications.dismissedShareNotifications.map((e) => e.id),
+    ).toContain('e1');
+  });
+
+  it('auto-dismisses after its own timer', async () => {
+    vi.useFakeTimers();
+    addMember('e1');
+    await renderToast();
+    expect(container.querySelector('[data-slot="toast"]')).not.toBeNull();
+    await act(async () => {
+      vi.advanceTimersByTime(8000);
+    });
+    expect(container.innerHTML).toBe('');
+  });
+});
diff --git a/frontend/src/notifications/TeamNotificationToast.tsx b/frontend/src/notifications/TeamNotificationToast.tsx
index 27fccae9..78058512 100644
--- a/frontend/src/notifications/TeamNotificationToast.tsx
+++ b/frontend/src/notifications/TeamNotificationToast.tsx
@@ -4,6 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Button } from '../components/ui/button';
+import {
+  Toast,
+  ToastActions,
+  ToastContent,
+  ToastHeader,
+  ToastMessage,
+  ToastTitle,
+} from '../components/ui/toast';
 
 import {
   dismissShareNotification,
@@ -50,28 +58,25 @@ function ShareToast({
   }, [id, onDismiss]);
 
   return (
-    <div className="border-border bg-card shadow-toast w-[271px] overflow-hidden rounded-2xl border">
-      <div className="bg-accent/50 dark:bg-muted flex items-center justify-between px-4 py-3">
-        <h3 className="dark:text-foreground text-sm leading-[16.5px] font-medium text-black">
-          {title}
-        </h3>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          onClick={() => onDismiss(id)}
-          className="h-8 w-8 p-0 text-black opacity-70 transition-opacity hover:bg-transparent hover:opacity-100 dark:text-white"
-          aria-label={dismissLabel}
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-      <div className="px-5 py-3">
-        <p className="dark:text-muted-foreground text-sm leading-[18px] font-normal text-black">
-          {body}
-        </p>
-      </div>
-    </div>
+    <Toast>
+      <ToastHeader variant="default">
+        <ToastTitle wrap>{title}</ToastTitle>
+        <ToastActions>
+          <Button
+            type="button"
+            variant="ghost-muted"
+            size="icon-sm"
+            onClick={() => onDismiss(id)}
+            aria-label={dismissLabel}
+          >
+            <X />
+          </Button>
+        </ToastActions>
+      </ToastHeader>
+      <ToastContent>
+        <ToastMessage size="sm">{body}</ToastMessage>
+      </ToastContent>
+    </Toast>
   );
 }
 
@@ -141,16 +146,10 @@ export default function TeamNotificationToast() {
     };
   };
 
+  // Cards only: App.tsx mounts the shared ToastViewport (the live region)
+  // and stacks these above ToolApprovalToast and UploadToast.
   return (
-    // Standard bottom-right toast rail. UploadToast / ToolApprovalToast use the
-    // same corner but rarely co-occur with team-share toasts.
-    <div
-      className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2"
-      onMouseDown={(e) => e.stopPropagation()}
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    >
+    <>
       {visible.map((event) => {
         const { title, body } = describe(event);
         return (
@@ -164,6 +163,6 @@ export default function TeamNotificationToast() {
           />
         );
       })}
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/notifications/ToolApprovalToast.test.tsx b/frontend/src/notifications/ToolApprovalToast.test.tsx
new file mode 100644
index 00000000..5dd68d59
--- /dev/null
+++ b/frontend/src/notifications/ToolApprovalToast.test.tsx
@@ -0,0 +1,144 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+
+import en from '../locale/en.json';
+
+// Resolve keys against the English bundle so assertions read as the UI does.
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) =>
+      key
+        .split('.')
+        .reduce<unknown>(
+          (node, part) => (node as Record<string, unknown>)?.[part],
+          en,
+        ) ?? key,
+  }),
+}));
+
+import notificationsReducer, { sseEventReceived } from './notificationsSlice';
+import ToolApprovalToast from './ToolApprovalToast';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const makeStore = () =>
+  configureStore({
+    reducer: {
+      notifications: notificationsReducer,
+      preference: () => ({
+        conversations: { data: [{ id: 'c1', name: 'Halvorsen review' }] },
+      }),
+    },
+  });
+
+function Location() {
+  return <span data-testid="location">{useLocation().pathname}</span>;
+}
+
+describe('ToolApprovalToast', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let store: ReturnType<typeof makeStore>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    store = makeStore();
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const renderAt = async (path: string) => {
+    await act(async () => {
+      root.render(
+        <Provider store={store}>
+          <MemoryRouter initialEntries={[path]}>
+            <Routes>
+              <Route
+                path="*"
+                element={
+                  <>
+                    <ToolApprovalToast />
+                    <Location />
+                  </>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        </Provider>,
+      );
+    });
+  };
+
+  const pause = (id: string, conversationId: string) =>
+    store.dispatch(
+      sseEventReceived({
+        id,
+        type: 'tool.approval.required',
+        scope: { kind: 'conversation', id: conversationId },
+      }),
+    );
+
+  const toasts = () => container.querySelectorAll('[data-slot="toast"]');
+
+  it('renders a warning card with no rail of its own', async () => {
+    pause('e1', 'c1');
+    await renderAt('/');
+    expect(toasts()).toHaveLength(1);
+    // App.tsx owns the shared ToastViewport and its live region.
+    expect(container.querySelector('[data-slot="toast-viewport"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    expect(container.querySelector('.fixed')).toBeNull();
+    expect(
+      container
+        .querySelector('[data-slot="toast-header"]')
+        ?.getAttribute('data-variant'),
+    ).toBe('warning');
+    expect(
+      container.querySelector('[data-slot="toast-title"]')?.textContent,
+    ).toBe('Tool approval needed');
+    const item = container.querySelector('[data-slot="toast-item"]');
+    expect(item?.textContent).toContain('Halvorsen review');
+    expect(item?.querySelector('[data-status="warning"]')).not.toBeNull();
+  });
+
+  it('dedups per conversation and hides the one in view', async () => {
+    pause('e1', 'c1');
+    pause('e2', 'c1');
+    pause('e3', 'c2');
+    await renderAt('/c/c2');
+    expect(toasts()).toHaveLength(1);
+    expect(container.textContent).toContain('Halvorsen review');
+  });
+
+  it('dismisses on close', async () => {
+    pause('e1', 'c1');
+    await renderAt('/');
+    const close = container.querySelector(
+      'button[aria-label="Dismiss"]',
+    ) as HTMLButtonElement;
+    await act(async () => close.click());
+    expect(toasts()).toHaveLength(0);
+  });
+
+  it('navigates to the conversation on Review', async () => {
+    pause('e1', 'c1');
+    await renderAt('/');
+    const review = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Review',
+    ) as HTMLButtonElement;
+    await act(async () => review.click());
+    expect(
+      container.querySelector('[data-testid="location"]')?.textContent,
+    ).toBe('/c/c1');
+    expect(toasts()).toHaveLength(0);
+  });
+});
diff --git a/frontend/src/notifications/ToolApprovalToast.tsx b/frontend/src/notifications/ToolApprovalToast.tsx
index 79e3dd65..6ac79060 100644
--- a/frontend/src/notifications/ToolApprovalToast.tsx
+++ b/frontend/src/notifications/ToolApprovalToast.tsx
@@ -1,9 +1,18 @@
 import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMatch, useNavigate } from 'react-router-dom';
 
-import WarnIcon from '../assets/warn.svg';
 import { Button } from '../components/ui/button';
+import {
+  Toast,
+  ToastActions,
+  ToastContent,
+  ToastHeader,
+  ToastItem,
+  ToastStatus,
+  ToastTitle,
+} from '../components/ui/toast';
 import type { RootState } from '../store';
 
 import {
@@ -17,9 +26,10 @@ import {
 const APPROVAL_EVENT_MAX_AGE_MS = 35 * 60 * 1000;
 
 /**
- * Surface ``tool.approval.required`` events as toasts that look like
- * ``UploadToast`` (same fixed bottom-right rail) — but only when the
- * user is NOT already on the conversation that needs the approval.
+ * Surface ``tool.approval.required`` events as toast cards in the shared
+ * ``ToastViewport`` (mounted in App.tsx, between the team notifications
+ * and ``UploadToast``) — but only when the user is NOT already on the
+ * conversation that needs the approval.
  *
  * - Dedup by ``conversation_id`` (the SSE ``scope.id``): keep only
  *   the newest pending event per conversation, so multiple paused
@@ -29,6 +39,7 @@ const APPROVAL_EVENT_MAX_AGE_MS = 35 * 60 * 1000;
  * - Clicking "Review" navigates to ``/c/<id>`` and dismisses.
  */
 export default function ToolApprovalToast() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const events = useSelector(selectRecentEvents);
@@ -98,74 +109,53 @@ export default function ToolApprovalToast() {
 
   const conversationName = (conversationId: string): string => {
     const found = conversations?.find((c) => c.id === conversationId);
-    return found?.name ?? 'Conversation';
+    return found?.name ?? t('notifications.toolApprovalFallbackName');
   };
 
   return (
-    // Sit above ``UploadToast`` (which owns ``bottom-4 right-4``)
-    // rather than overlapping it. ``bottom-24`` ≈ 96px clears one
-    // standard-height upload toast; multiple in-flight uploads will
-    // stack into the gap, at which point the approval toast still
-    // floats on top via ``z-50``. Acceptable v1 layout — the two
-    // surfaces are rarely competing.
-    <div
-      className="fixed right-4 bottom-24 z-50 flex max-w-md flex-col gap-2"
-      onMouseDown={(e) => e.stopPropagation()}
-      role="status"
-      aria-live="polite"
-      aria-atomic="true"
-    >
+    <>
       {Array.from(pendingByConversation.values()).map(
         ({ eventId, conversationId }) => (
-          <div
-            key={eventId}
-            className="border-border bg-card shadow-toast w-[271px] overflow-hidden rounded-2xl border"
-          >
-            <div className="bg-accent/50 dark:bg-muted flex items-center justify-between px-4 py-3">
-              <h3 className="dark:text-foreground text-sm leading-[16.5px] font-medium text-black">
-                Tool approval needed
-              </h3>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => dispatch(dismissToolApproval(eventId))}
-                className="h-8 w-8 p-0 text-black opacity-70 transition-opacity hover:bg-transparent hover:opacity-100 dark:text-white"
-                aria-label="Dismiss"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            <div className="flex items-center justify-between gap-3 px-5 py-3">
-              <div className="flex min-w-0 items-center gap-2">
-                <img
-                  src={WarnIcon}
-                  alt=""
-                  className="h-5 w-5 shrink-0"
-                  aria-hidden="true"
-                />
-                <p
-                  className="dark:text-muted-foreground max-w-[140px] truncate text-sm leading-[16.5px] font-normal text-black"
-                  title={conversationName(conversationId)}
+          <Toast key={eventId}>
+            <ToastHeader variant="warning">
+              <ToastTitle>{t('notifications.toolApprovalTitle')}</ToastTitle>
+              <ToastActions>
+                <Button
+                  type="button"
+                  variant="ghost-muted"
+                  size="icon-sm"
+                  onClick={() => dispatch(dismissToolApproval(eventId))}
+                  aria-label={t('notifications.dismiss')}
                 >
-                  {conversationName(conversationId)}
-                </p>
-              </div>
-              <Button
-                type="button"
-                size="sm"
-                onClick={() => {
-                  dispatch(dismissToolApproval(eventId));
-                  navigate(`/c/${conversationId}`);
-                }}
-                className="h-auto rounded-full px-3 py-1 text-xs font-medium text-white shadow-sm"
+                  <X />
+                </Button>
+              </ToastActions>
+            </ToastHeader>
+            <ToastContent>
+              <ToastItem
+                icon={<ToastStatus status="warning" />}
+                label={
+                  <span title={conversationName(conversationId)}>
+                    {conversationName(conversationId)}
+                  </span>
+                }
               >
-                Review
-              </Button>
-            </div>
-          </div>
+                <Button
+                  type="button"
+                  size="xs"
+                  shape="pill"
+                  onClick={() => {
+                    dispatch(dismissToolApproval(eventId));
+                    navigate(`/c/${conversationId}`);
+                  }}
+                >
+                  {t('notifications.toolApprovalReview')}
+                </Button>
+              </ToastItem>
+            </ToastContent>
+          </Toast>
         ),
       )}
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/notifications/actionToastSlice.test.ts b/frontend/src/notifications/actionToastSlice.test.ts
new file mode 100644
index 00000000..3a538d51
--- /dev/null
+++ b/frontend/src/notifications/actionToastSlice.test.ts
@@ -0,0 +1,54 @@
+import actionToastReducer, {
+  dismissActionToast,
+  selectActionToast,
+  showActionToast,
+} from './actionToastSlice';
+
+const state = (s: ReturnType<typeof actionToastReducer>) => ({
+  actionToast: s,
+});
+
+describe('actionToastSlice', () => {
+  it('starts empty', () => {
+    const s = actionToastReducer(undefined, { type: '@@init' });
+    expect(selectActionToast(state(s))).toBeNull();
+  });
+
+  it('shows a toast with a fresh id, replacing the previous one', () => {
+    let s = actionToastReducer(
+      undefined,
+      showActionToast({ variant: 'success', message: 'a deactivated' }),
+    );
+    const first = selectActionToast(state(s));
+    expect(first).toMatchObject({
+      variant: 'success',
+      message: 'a deactivated',
+    });
+
+    s = actionToastReducer(
+      s,
+      showActionToast({
+        variant: 'destructive',
+        message: 'Action failed for a',
+      }),
+    );
+    const second = selectActionToast(state(s));
+    expect(second).toMatchObject({
+      variant: 'destructive',
+      message: 'Action failed for a',
+    });
+    expect(second?.id).not.toBe(first?.id);
+  });
+
+  it('dismisses only the toast with the given id', () => {
+    let s = actionToastReducer(
+      undefined,
+      showActionToast({ variant: 'success', message: 'one' }),
+    );
+    const id = selectActionToast(state(s))!.id;
+    s = actionToastReducer(s, dismissActionToast(id + 1));
+    expect(selectActionToast(state(s))).not.toBeNull();
+    s = actionToastReducer(s, dismissActionToast(id));
+    expect(selectActionToast(state(s))).toBeNull();
+  });
+});
diff --git a/frontend/src/notifications/actionToastSlice.ts b/frontend/src/notifications/actionToastSlice.ts
new file mode 100644
index 00000000..cf2e745a
--- /dev/null
+++ b/frontend/src/notifications/actionToastSlice.ts
@@ -0,0 +1,43 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export type ActionToastVariant = 'success' | 'destructive';
+
+export type ActionToastState = {
+  id: number;
+  variant: ActionToastVariant;
+  message: string;
+};
+
+type SliceState = { current: ActionToastState | null; nextId: number };
+
+const initialState: SliceState = { current: null, nextId: 1 };
+
+/**
+ * One transient result card for an action a page just ran (the admin Users
+ * actions today). A new result replaces the previous one; the fresh `id`
+ * restarts the card's auto-dismiss timer.
+ */
+const actionToastSlice = createSlice({
+  name: 'actionToast',
+  initialState,
+  reducers: {
+    showActionToast(
+      state,
+      action: PayloadAction<{ variant: ActionToastVariant; message: string }>,
+    ) {
+      state.current = { id: state.nextId, ...action.payload };
+      state.nextId += 1;
+    },
+    dismissActionToast(state, action: PayloadAction<number>) {
+      if (state.current?.id === action.payload) state.current = null;
+    },
+  },
+});
+
+export const { showActionToast, dismissActionToast } = actionToastSlice.actions;
+
+export const selectActionToast = (state: {
+  actionToast: SliceState;
+}): ActionToastState | null => state.actionToast.current;
+
+export default actionToastSlice.reducer;
diff --git a/frontend/src/preferences/PromptsModal.test.tsx b/frontend/src/preferences/PromptsModal.test.tsx
new file mode 100644
index 00000000..e32045b3
--- /dev/null
+++ b/frontend/src/preferences/PromptsModal.test.tsx
@@ -0,0 +1,134 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('../hooks', () => ({
+  useMediaQuery: () => ({ isMobile: false, isDesktop: true }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-router-dom', () => ({
+  Link: ({ children }: { children: React.ReactNode }) => <a>{children}</a>,
+}));
+
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getUserTools: () =>
+      Promise.resolve({ json: () => Promise.resolve({ success: false }) }),
+  },
+}));
+
+import PromptsModal from './PromptsModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('PromptsModal', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = async (setContent: (c: string) => void = () => undefined) => {
+    await act(async () => {
+      root.render(
+        <PromptsModal
+          existingPrompts={[]}
+          modalState="ACTIVE"
+          setModalState={() => undefined}
+          type="ADD"
+          newPromptName=""
+          setNewPromptName={() => undefined}
+          newPromptContent="Hello {{ source.content }}"
+          setNewPromptContent={setContent}
+          editPromptName=""
+          setEditPromptName={() => undefined}
+          editPromptContent=""
+          setEditPromptContent={() => undefined}
+          currentPromptEdit={{ name: '', id: '', type: '' }}
+        />,
+      );
+    });
+  };
+
+  it('edits the prompt text in a large Textarea', async () => {
+    await render();
+    const textarea = document.body.querySelector<HTMLTextAreaElement>(
+      '#new-prompt-content',
+    );
+    expect(textarea?.dataset.slot).toBe('textarea');
+    expect(textarea?.dataset.size).toBe('lg');
+  });
+
+  it('scrolls the highlight layer through custom properties, not a transform', async () => {
+    await render();
+    const layer = document.body.querySelector<HTMLElement>(
+      '.prompt-variable-highlight',
+    )?.parentElement;
+    expect(layer).toBeTruthy();
+    expect(layer?.style.transform).toBe('');
+    expect(layer?.style.getPropertyValue('--scroll-x')).toBe('0px');
+    expect(layer?.style.getPropertyValue('--scroll-y')).toBe('0px');
+  });
+  it('inserts a variable from a Select that never keeps a value', async () => {
+    const setContent = vi.fn();
+    await render(setContent);
+    const triggers = Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="select-trigger"]',
+      ),
+    );
+    expect(triggers.map((b) => b.textContent)).toEqual([
+      'modals.prompts.systemVariablesDropdownLabel',
+      'modals.prompts.toolVariables',
+    ]);
+    const [system] = triggers;
+    expect(system.dataset.size).toBe('field');
+    expect(system.dataset.shape).toBe('pill');
+    expect(system.hasAttribute('data-placeholder')).toBe(true);
+
+    const textarea = document.body.querySelector<HTMLTextAreaElement>(
+      '#new-prompt-content',
+    )!;
+    textarea.setSelectionRange(5, 5);
+    await act(async () => {
+      system.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    const option = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).find((o) =>
+      o.textContent?.includes(
+        'modals.prompts.systemVariableOptions.systemDate',
+      ),
+    );
+    expect(option).toBeDefined();
+    await act(async () => {
+      option!.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    expect(setContent).toHaveBeenCalledWith(
+      'Hello {{ system.date }} {{ source.content }}',
+    );
+    // The trigger falls back to its label: nothing stays selected.
+    expect(system.textContent).toBe(
+      'modals.prompts.systemVariablesDropdownLabel',
+    );
+  });
+});
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index b5c18187..fc933a6d 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,20 +1,22 @@
-import { ChevronDown } from 'lucide-react';
+import { Book } from 'lucide-react';
 import { ActiveState } from '../models/misc';
+import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
+import { Textarea } from '../components/ui/textarea';
+import { FormField } from '../components/ui/form-field';
 import { Link } from 'react-router-dom';
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Modal } from '../components/ui/modal';
-import { Button } from '../components/ui/button';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
-import BookIcon from '../assets/book.svg';
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
 import userService from '../api/services/userService';
 import { selectToken } from '../preferences/preferenceSlice';
 import { UserToolType } from '../settings/types';
@@ -107,8 +109,8 @@ type VariableMenuProps = {
   textareaId: string;
   content: string;
   setContent: (content: string) => void;
-  triggerClassName?: string;
-  contentClassName?: string;
+  /** Which variables the menu inserts; sets the trigger's width. */
+  kind: 'system' | 'tool';
 };
 
 function VariableMenu({
@@ -117,8 +119,7 @@ function VariableMenu({
   textareaId,
   content,
   setContent,
-  triggerClassName,
-  contentClassName,
+  kind,
 }: VariableMenuProps) {
   const handleSelect = (value: string) => {
     const textarea = document.getElementById(textareaId) as HTMLTextAreaElement;
@@ -145,32 +146,29 @@ function VariableMenu({
     }, 0);
   };
 
+  // An insert menu on a Select that never keeps a value: the placeholder
+  // stands in for the label, and every pick inserts and resets to "".
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          className={`border-border bg-card text-foreground hover:bg-accent h-auto justify-between rounded-3xl px-5 py-3 text-xs sm:text-sm ${triggerClassName ?? ''}`}
-        >
-          <span className="truncate">{label}</span>
-          <ChevronDown className="text-muted-foreground ml-2 h-4 w-4 shrink-0" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="start"
-        className={`max-h-72 overflow-y-auto ${contentClassName ?? ''}`}
+    <Select value="" onValueChange={handleSelect}>
+      <SelectTrigger
+        size="field"
+        shape="pill"
+        className={
+          kind === 'system'
+            ? 'w-[140px] sm:w-[185px]'
+            : 'w-[140px] sm:w-[171px]'
+        }
       >
+        <SelectValue placeholder={label} />
+      </SelectTrigger>
+      <SelectContent align="start">
         {options.map((opt) => (
-          <DropdownMenuItem
-            key={opt.value}
-            onSelect={() => handleSelect(opt.value)}
-          >
+          <SelectItem key={opt.value} value={opt.value}>
             {opt.label}
-          </DropdownMenuItem>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   );
 }
 
@@ -178,7 +176,6 @@ type PromptTextareaProps = {
   id: string;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  ariaLabel: string;
   readOnly?: boolean;
 };
 
@@ -186,7 +183,6 @@ function PromptTextarea({
   id,
   value,
   onChange,
-  ariaLabel,
   readOnly = false,
 }: PromptTextareaProps) {
   const [scrollOffsets, setScrollOffsets] = React.useState({ top: 0, left: 0 });
@@ -203,32 +199,38 @@ function PromptTextarea({
     });
   };
 
+  // One relative box holding the highlight overlay and the Textarea, so it
+  // can be a FormField's single child; the FormField label comes later in
+  // the DOM, so at the Textarea's z-10 it still paints on top.
   return (
-    <>
+    <div className="relative w-full">
       <div
-        className="bg-card pointer-events-none absolute inset-0 z-0 overflow-hidden rounded px-3 py-2"
+        className="bg-card pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-2xl border border-transparent px-4 py-3"
         aria-hidden="true"
       >
         <div
-          className="min-h-full text-base leading-normal wrap-break-word whitespace-pre-wrap text-transparent"
-          style={{
-            transform: `translate(${-scrollOffsets.left}px, ${-scrollOffsets.top}px)`,
-          }}
+          className="min-h-full translate-x-(--scroll-x) translate-y-(--scroll-y) text-base wrap-break-word whitespace-pre-wrap text-transparent md:text-sm"
+          style={
+            {
+              '--scroll-x': `${-scrollOffsets.left}px`,
+              '--scroll-y': `${-scrollOffsets.top}px`,
+            } as React.CSSProperties
+          }
         >
           {highlightedValue}
         </div>
       </div>
-      <textarea
+      <Textarea
         id={id}
-        className="peer border-border dark:border-border focus-visible:ring-ring/50 focus-visible:border-ring relative z-10 h-48 w-full resize-none rounded border-2 bg-transparent px-3 py-2 text-base text-gray-800 outline-none focus-visible:ring-[3px] md:h-64 lg:h-80 dark:text-white"
+        size="lg"
+        resize="none"
+        className="relative z-10 h-48 md:h-64 lg:h-80"
         value={value}
         onChange={onChange}
         onScroll={handleScroll}
-        placeholder=" "
-        aria-label={ariaLabel}
         readOnly={readOnly}
       />
-    </>
+    </div>
   );
 }
 
@@ -298,23 +300,15 @@ const useToolVariables = () => {
 };
 
 function AddPrompt({
-  setModalState,
-  handleAddPrompt,
   newPromptName,
   setNewPromptName,
   newPromptContent,
   setNewPromptContent,
-  disableSave,
-  duplicateSourceName,
 }: {
-  setModalState: (state: ActiveState) => void;
-  handleAddPrompt?: () => void;
   newPromptName: string;
   setNewPromptName: (name: string) => void;
   newPromptContent: string;
   setNewPromptContent: (content: string) => void;
-  disableSave: boolean;
-  duplicateSourceName?: string | null;
 }) {
   const { t } = useTranslation();
   const systemVariableOptions = React.useMemo(
@@ -325,48 +319,26 @@ function AddPrompt({
 
   return (
     <div>
-      <p className="mb-1 text-xl font-semibold text-[#2B2B2B] dark:text-white">
-        {duplicateSourceName
-          ? t('modals.prompts.duplicatePrompt')
-          : t('modals.prompts.addPrompt')}
-      </p>
-      <p className="dark:text-muted-foreground mb-6 text-sm text-[#6B6B6B]">
-        {duplicateSourceName
-          ? t('modals.prompts.duplicateDescription', {
-              name: duplicateSourceName,
-            })
-          : t('modals.prompts.addDescription')}
-      </p>
-      <div>
-        <Input
-          label={t('modals.prompts.promptName')}
-          type="text"
-          className="mb-5"
-          value={newPromptName}
-          onChange={(e) => setNewPromptName(e.target.value)}
-          labelBgClassName="bg-card"
-        />
+      <div className="flex flex-col gap-5">
+        <FormField label={t('modals.prompts.promptName')}>
+          <Input
+            type="text"
+            value={newPromptName}
+            onChange={(e) => setNewPromptName(e.target.value)}
+          />
+        </FormField>
 
-        <div className="relative w-full">
+        <FormField label={t('modals.prompts.promptText')}>
           <PromptTextarea
             id="new-prompt-content"
             value={newPromptContent}
             onChange={(e) => setNewPromptContent(e.target.value)}
-            ariaLabel={t('prompts.textAriaLabel')}
           />
-          <label
-            htmlFor="new-prompt-content"
-            className={`absolute z-20 select-none ${
-              newPromptContent ? '-top-2.5 left-3 text-xs' : ''
-            } text-muted-foreground bg-card pointer-events-none max-w-[calc(100%-24px)] cursor-none overflow-hidden px-2 text-ellipsis whitespace-nowrap transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs`}
-          >
-            {t('modals.prompts.promptText')}
-          </label>
-        </div>
+        </FormField>
       </div>
 
       <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-4">
-        <p className="flex flex-col text-sm font-medium text-gray-700 dark:text-gray-300">
+        <p className="text-foreground flex flex-col text-sm font-medium">
           <span className="font-bold">
             {t('modals.prompts.variablesLabel')}
           </span>
@@ -382,7 +354,7 @@ function AddPrompt({
             textareaId="new-prompt-content"
             content={newPromptContent}
             setContent={setNewPromptContent}
-            triggerClassName="w-[140px] sm:w-[185px]"
+            kind="system"
           />
 
           <VariableMenu
@@ -391,74 +363,26 @@ function AddPrompt({
             textareaId="new-prompt-content"
             content={newPromptContent}
             setContent={setNewPromptContent}
-            triggerClassName="w-[140px] sm:w-[171px]"
+            kind="tool"
           />
         </div>
       </div>
-      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
-        <div className="flex justify-start">
-          <Link
-            to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
-          >
-            <img
-              src={BookIcon}
-              alt=""
-              className="flex h-4 w-3 shrink-0 items-center justify-center"
-              aria-hidden="true"
-            />
-            <span className="text-sm font-bold">
-              {t('modals.prompts.learnAboutPrompts')}
-            </span>
-          </Link>
-        </div>
-
-        <div className="flex justify-end gap-2 sm:gap-4">
-          <Button
-            type="button"
-            variant="destructive-outline"
-            onClick={() => setModalState('INACTIVE')}
-            className="h-auto rounded-3xl px-5 py-2 text-sm font-medium"
-          >
-            {t('modals.prompts.cancel')}
-          </Button>
-
-          <Button
-            type="button"
-            onClick={handleAddPrompt}
-            className="h-auto rounded-3xl px-6 py-2 text-sm font-medium text-white"
-            disabled={disableSave}
-          >
-            {t('modals.prompts.save')}
-          </Button>
-        </div>
-      </div>
     </div>
   );
 }
 
 function EditPrompt({
-  setModalState,
-  handleEditPrompt,
   editPromptName,
   setEditPromptName,
   editPromptContent,
   setEditPromptContent,
   currentPromptEdit,
-  disableSave,
-  onDuplicate,
 }: {
-  setModalState: (state: ActiveState) => void;
-  handleEditPrompt?: (id: string, type: string) => void;
   editPromptName: string;
   setEditPromptName: (name: string) => void;
   editPromptContent: string;
   setEditPromptContent: (content: string) => void;
   currentPromptEdit: { name: string; id: string; type: string };
-  disableSave: boolean;
-  onDuplicate?: () => void;
 }) {
   const { t } = useTranslation();
   const systemVariableOptions = React.useMemo(
@@ -470,53 +394,29 @@ function EditPrompt({
 
   return (
     <div>
-      <p className="mb-1 text-xl font-semibold text-[#2B2B2B] dark:text-white">
-        {t(
-          isReadOnly
-            ? 'modals.prompts.viewPrompt'
-            : 'modals.prompts.editPrompt',
-        )}
-      </p>
-      <p className="dark:text-muted-foreground mb-6 text-sm text-[#6B6B6B]">
-        {t(
-          isReadOnly
-            ? 'modals.prompts.viewDescription'
-            : 'modals.prompts.editDescription',
-        )}
-      </p>
-      <div>
-        <Input
-          label={t('modals.prompts.promptName')}
-          type="text"
-          className="mb-5"
-          value={editPromptName}
-          onChange={(e) => setEditPromptName(e.target.value)}
-          labelBgClassName="bg-card"
-          disabled={isReadOnly}
-        />
+      <div className="flex flex-col gap-5">
+        <FormField label={t('modals.prompts.promptName')}>
+          <Input
+            type="text"
+            value={editPromptName}
+            onChange={(e) => setEditPromptName(e.target.value)}
+            disabled={isReadOnly}
+          />
+        </FormField>
 
-        <div className="relative w-full">
+        <FormField label={t('modals.prompts.promptText')}>
           <PromptTextarea
             id="edit-prompt-content"
             value={editPromptContent}
             onChange={(e) => setEditPromptContent(e.target.value)}
-            ariaLabel={t('prompts.textAriaLabel')}
             readOnly={isReadOnly}
           />
-          <label
-            htmlFor="edit-prompt-content"
-            className={`absolute z-20 select-none ${
-              editPromptContent ? '-top-2.5 left-3 text-xs' : ''
-            } text-muted-foreground bg-card pointer-events-none max-w-[calc(100%-24px)] cursor-none overflow-hidden px-2 text-ellipsis whitespace-nowrap transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs`}
-          >
-            {t('modals.prompts.promptText')}
-          </label>
-        </div>
+        </FormField>
       </div>
 
       {!isReadOnly && (
         <div className="mt-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-4">
-          <p className="flex flex-col text-sm font-medium text-gray-700 dark:text-gray-300">
+          <p className="text-foreground flex flex-col text-sm font-medium">
             <span className="font-bold">
               {t('modals.prompts.variablesLabel')}
             </span>
@@ -532,7 +432,7 @@ function EditPrompt({
               textareaId="edit-prompt-content"
               content={editPromptContent}
               setContent={setEditPromptContent}
-              triggerClassName="w-[140px] sm:w-[185px]"
+              kind="system"
             />
 
             <VariableMenu
@@ -541,74 +441,11 @@ function EditPrompt({
               textareaId="edit-prompt-content"
               content={editPromptContent}
               setContent={setEditPromptContent}
-              triggerClassName="w-[140px] sm:w-[171px]"
+              kind="tool"
             />
           </div>
         </div>
       )}
-      <div className="mt-4 flex flex-col justify-between gap-4 text-sm sm:flex-row sm:gap-0">
-        <div className="flex justify-start">
-          <Link
-            to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary flex items-center gap-2 text-sm font-medium hover:underline"
-          >
-            <img
-              src={BookIcon}
-              alt=""
-              className="flex h-4 w-3 shrink-0 items-center justify-center"
-              aria-hidden="true"
-            />
-            <span className="text-sm font-bold">
-              {t('modals.prompts.learnAboutPrompts')}
-            </span>
-          </Link>
-        </div>
-
-        <div className="flex justify-end gap-2 sm:gap-4">
-          <Button
-            type="button"
-            variant="destructive-outline"
-            onClick={() => setModalState('INACTIVE')}
-            className="h-auto rounded-3xl px-5 py-2 text-sm font-medium"
-          >
-            {t('modals.prompts.cancel')}
-          </Button>
-
-          {isReadOnly ? (
-            onDuplicate && (
-              <Button
-                type="button"
-                onClick={onDuplicate}
-                className="h-auto rounded-3xl px-6 py-2 text-sm font-medium text-white"
-              >
-                {t('modals.prompts.duplicate')}
-              </Button>
-            )
-          ) : (
-            <Button
-              type="button"
-              onClick={() => {
-                handleEditPrompt &&
-                  handleEditPrompt(
-                    currentPromptEdit.id,
-                    currentPromptEdit.type,
-                  );
-              }}
-              className="h-auto rounded-3xl px-6 py-2 text-sm font-medium text-white"
-              disabled={disableSave || !editPromptName}
-              title={
-                disableSave && editPromptName
-                  ? t('modals.prompts.nameExists')
-                  : ''
-              }
-            >
-              {t('modals.prompts.save')}
-            </Button>
-          )}
-        </div>
-      </div>
     </div>
   );
 }
@@ -677,37 +514,115 @@ export default function PromptsModal({
     newPromptContent,
   ]);
 
+  const { t } = useTranslation();
+  const isReadOnly = type === 'EDIT' && currentPromptEdit.type === 'public';
+  const closeModal = () => setModalState('INACTIVE');
+
   let view;
+  let title: string;
+  let description: string;
 
   if (type === 'ADD') {
+    title = duplicateSourceName
+      ? t('modals.prompts.duplicatePrompt')
+      : t('modals.prompts.addPrompt');
+    description = duplicateSourceName
+      ? t('modals.prompts.duplicateDescription', {
+          name: duplicateSourceName,
+        })
+      : t('modals.prompts.addDescription');
     view = (
       <AddPrompt
-        setModalState={setModalState}
-        handleAddPrompt={handleAddPrompt}
         newPromptName={newPromptName}
         setNewPromptName={setNewPromptName}
         newPromptContent={newPromptContent}
         setNewPromptContent={setNewPromptContent}
-        disableSave={disableSave}
-        duplicateSourceName={duplicateSourceName}
       />
     );
-  } else if (type === 'EDIT') {
+  } else {
+    title = t(
+      isReadOnly ? 'modals.prompts.viewPrompt' : 'modals.prompts.editPrompt',
+    );
+    description = t(
+      isReadOnly
+        ? 'modals.prompts.viewDescription'
+        : 'modals.prompts.editDescription',
+    );
     view = (
       <EditPrompt
-        setModalState={setModalState}
-        handleEditPrompt={handleEditPrompt}
         editPromptName={editPromptName}
         setEditPromptName={setEditPromptName}
         editPromptContent={editPromptContent}
         setEditPromptContent={setEditPromptContent}
         currentPromptEdit={currentPromptEdit}
-        disableSave={disableSave}
-        onDuplicate={onDuplicate}
+      />
+    );
+  }
+
+  const learnLink = (
+    <Button variant="link" size="inline" asChild>
+      <Link
+        to="https://docs.docsgpt.cloud/Guides/Customising-prompts"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Book />
+        <span className="font-bold">
+          {t('modals.prompts.learnAboutPrompts')}
+        </span>
+      </Link>
+    </Button>
+  );
+
+  let footer: React.ReactNode;
+  if (type === 'ADD') {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.save')}
+        onSubmit={handleAddPrompt}
+        disabled={disableSave}
+      />
+    );
+  } else if (!isReadOnly) {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.save')}
+        onSubmit={() =>
+          handleEditPrompt?.(currentPromptEdit.id, currentPromptEdit.type)
+        }
+        disabled={disableSave || !editPromptName}
+        submitProps={{
+          title:
+            disableSave && editPromptName ? t('modals.prompts.nameExists') : '',
+        }}
+      />
+    );
+  } else if (onDuplicate) {
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+        submitLabel={t('modals.prompts.duplicate')}
+        onSubmit={onDuplicate}
       />
     );
   } else {
-    view = <></>;
+    // A public prompt with nothing to do but close: the link and a lone
+    // Cancel.
+    footer = (
+      <ModalActions
+        footerStart={learnLink}
+        cancelLabel={t('modals.prompts.cancel')}
+        onCancel={closeModal}
+      />
+    );
   }
 
   return (
@@ -722,19 +637,11 @@ export default function PromptsModal({
           }
         }
       }}
-      hideTitle
-      title={
-        type === 'ADD'
-          ? duplicateSourceName
-            ? 'Duplicate Prompt'
-            : 'Add Prompt'
-          : currentPromptEdit.type === 'public'
-            ? 'View Prompt'
-            : 'Edit Prompt'
-      }
-      size="lg"
+      title={title}
+      description={description}
+      footer={footer}
+      size="xl"
       mobileVariant="sheet"
-      className="bg-card dark:bg-card w-[95vw] max-w-[650px] rounded-2xl px-4 py-4 sm:px-6 sm:py-6 md:max-w-[860px] md:px-8 md:py-6 lg:max-w-[980px]"
       contentClassName="!overflow-visible"
     >
       {view}
diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx
index f67855bd..63e06dde 100644
--- a/frontend/src/settings/Analytics.tsx
+++ b/frontend/src/settings/Analytics.tsx
@@ -7,13 +7,17 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { foldSeries, OTHER_SERIES_KEY } from './foldSeries';
 
 import userService from '../api/services/userService';
 import SkeletonLoader from '../components/SkeletonLoader';
+import StatCard from '../components/StatCard';
+import { Card } from '../components/ui/card';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -22,27 +26,16 @@ import {
   SelectValue,
 } from '../components/ui/select';
 import { Switch } from '../components/ui/switch';
-import { useDarkTheme, useLoaderState } from '../hooks';
+import { useLoaderState } from '../hooks';
 import { selectToken } from '../preferences/preferenceSlice';
-import { htmlLegendPlugin } from '../utils/chartUtils';
+import {
+  hoverColor,
+  htmlLegendPlugin,
+  useChartPalette,
+} from '../utils/chartUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 import UsageQuota from './components/UsageQuota';
 
-/**
- * Resolve a CSS custom property on `:root` to a concrete color string.
- *
- * Chart.js renders to a canvas, so it can't consume Tailwind classes or CSS
- * variables directly. Read the resolved value at render time and pass that
- * concrete string. Falls back when running outside a browser (SSR / tests).
- */
-function readCssVar(name: string, fallback: string): string {
-  if (typeof window === 'undefined') return fallback;
-  // The `.dark` class lives on document.body (see useDarkTheme), so query
-  // body — querying documentElement would always resolve the :root value.
-  const value = getComputedStyle(document.body).getPropertyValue(name).trim();
-  return value || fallback;
-}
-
 import type { ChartData } from 'chart.js';
 ChartJS.register(
   CategoryScale,
@@ -53,18 +46,6 @@ ChartJS.register(
   Legend,
 );
 
-// Extra series colors for grouped/stacked charts. The first dataset always
-// uses the resolved `--primary` color; these follow for datasets 2..n.
-const SERIES_COLORS = [
-  '#FF6384',
-  '#36A2EB',
-  '#FFCE56',
-  '#4BC0C0',
-  '#9966FF',
-  '#FF9F40',
-  '#2BC596',
-];
-
 type TokenGroupBy = 'none' | 'model' | 'agent' | 'source';
 
 type AnalyticsProps = {
@@ -151,17 +132,11 @@ export default function Analytics({ agentId }: AnalyticsProps) {
   const [loadingFeedback, setLoadingFeedback] = useLoaderState(true);
   const [loadingTools, setLoadingTools] = useLoaderState(true);
   const [loadingSchedules, setLoadingSchedules] = useLoaderState(true);
-  const [isDarkTheme] = useDarkTheme();
-  const primaryColor = useMemo(
-    () => readCssVar('--primary', '#7d54d1'),
-    // isDarkTheme drives the `.dark` class on document.body and changes the
-    // resolved value of `--primary`; re-read whenever it flips.
-    [isDarkTheme],
-  );
+  // Re-read on every theme change; Chart.js can't read CSS variables.
+  const palette = useChartPalette();
+  const primaryColor = palette.primary;
   const seriesColor = (index: number) =>
-    index === 0
-      ? primaryColor
-      : SERIES_COLORS[(index - 1) % SERIES_COLORS.length];
+    palette.series[index % palette.series.length];
 
   // Monotonic request ids, one per chart: a response only lands if no
   // newer request for that chart was issued meanwhile, so an
@@ -361,7 +336,9 @@ export default function Analytics({ agentId }: AnalyticsProps) {
     },
   ];
 
-  const tokenSeriesEntries = Object.entries(tokenSeries || {});
+  // Grouped series have no meaning of their own, so past five they fold into
+  // "Other" instead of repeating a colour (DESIGN.md, chart colours).
+  const tokenSeriesEntries = foldSeries(Object.entries(tokenSeries || {}));
   const tokenLabels = Object.keys(
     tokenSeriesEntries[0]?.[1] || tokenUsageData || {},
   ).map((item) => formatDate(item));
@@ -371,13 +348,15 @@ export default function Analytics({ agentId }: AnalyticsProps) {
         ? key === 'prompt'
           ? t('settings.analytics.promptTokens')
           : t('settings.analytics.generatedTokens')
-        : key,
+        : key === OTHER_SERIES_KEY
+          ? t('settings.analytics.otherSeries')
+          : key,
     data: Object.values(series),
     backgroundColor: seriesColor(index),
   }));
 
   return (
-    <div className="mt-8">
+    <div>
       {agentId ? null : <UsageQuota />}
       <div className="mb-5 flex flex-row flex-wrap items-center justify-between gap-3">
         <p className="text-muted-foreground text-sm leading-6">
@@ -390,10 +369,7 @@ export default function Analytics({ agentId }: AnalyticsProps) {
             if (opt) setTimeFilter(opt);
           }}
         >
-          <SelectTrigger
-            className="w-[125px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
-          >
+          <SelectTrigger className="w-[125px]" size="field" shape="pill">
             <SelectValue
               placeholder={t('settings.analytics.filterPlaceholder')}
             />
@@ -409,30 +385,30 @@ export default function Analytics({ agentId }: AnalyticsProps) {
       </div>
 
       {/* Summary stat cards */}
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
         {statCards.map((card) => (
-          <div
+          <StatCard
             key={card.label}
-            title={card.hint}
-            className={`border-border dark:border-border rounded-2xl border px-6 py-5${card.hint ? ' cursor-help' : ''}`}
-          >
-            <p className="text-muted-foreground text-sm">{card.label}</p>
-            <p className="text-foreground dark:text-foreground mt-1 text-2xl font-bold">
-              {card.value}
-            </p>
-          </div>
+            label={card.label}
+            value={card.value}
+            hint={card.hint}
+          />
         ))}
       </div>
 
       {/* Messages Analytics */}
-      <div className="mt-4 flex w-full flex-col gap-3 [@media(min-width:1080px)]:flex-row">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
-          <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
-              {t('settings.analytics.messages')}
-            </p>
-          </div>
-          <div className="relative mt-px h-[245px] w-full">
+      <div className="mt-4 flex w-full flex-col gap-3 xl:flex-row">
+        <Card
+          variant="subtle"
+          padding="lg"
+          className="h-[345px] w-full overflow-hidden xl:w-1/2"
+        >
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.analytics.messages')}
+          />
+          <div className="relative h-[245px] w-full">
             <div
               id="legend-container-1"
               className="flex flex-row items-center justify-end"
@@ -455,26 +431,31 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                 }}
                 legendID="legend-container-1"
                 maxTicksLimitInX={8}
+                gridColor={palette.border}
+                tickColor={palette.mutedForeground}
                 isStacked={false}
               />
             )}
           </div>
-        </div>
+        </Card>
 
         {/* Token Usage Analytics */}
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
+        <Card
+          variant="subtle"
+          padding="lg"
+          className="h-[345px] w-full overflow-hidden xl:w-1/2"
+        >
           <div className="flex flex-row flex-wrap items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
-              {t('settings.analytics.tokenUsage')}
-            </p>
+            <SectionHeader
+              as="h3"
+              size="xs"
+              title={t('settings.analytics.tokenUsage')}
+            />
             <Select
               value={tokenGroupBy}
               onValueChange={(value) => setTokenGroupBy(value as TokenGroupBy)}
             >
-              <SelectTrigger
-                className="w-[110px] rounded-3xl px-5 py-3 text-sm"
-                size="lg"
-              >
+              <SelectTrigger className="w-[110px]" size="field" shape="pill">
                 <SelectValue placeholder={t('settings.analytics.groupBy')} />
               </SelectTrigger>
               <SelectContent>
@@ -490,12 +471,13 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                 {t('settings.analytics.includeSideChannel')}
               </p>
               <Switch
+                aria-label={t('settings.analytics.includeSideChannel')}
                 checked={includeSideChannel}
                 onCheckedChange={setIncludeSideChannel}
               />
             </div>
           </div>
-          <div className="relative mt-px h-[245px] w-full">
+          <div className="relative h-[245px] w-full">
             <div
               id="legend-container-2"
               className="flex flex-row items-center justify-end"
@@ -510,22 +492,28 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                 }}
                 legendID="legend-container-2"
                 maxTicksLimitInX={8}
+                gridColor={palette.border}
+                tickColor={palette.mutedForeground}
                 isStacked={true}
               />
             )}
           </div>
-        </div>
+        </Card>
       </div>
 
       {/* Scheduled runs + tool usage */}
-      <div className="mt-4 flex w-full flex-col gap-3 [@media(min-width:1080px)]:flex-row">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
-          <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
-              {t('settings.analytics.scheduledRuns')}
-            </p>
-          </div>
-          <div className="relative mt-px h-[245px] w-full">
+      <div className="mt-4 flex w-full flex-col gap-3 xl:flex-row">
+        <Card
+          variant="subtle"
+          padding="lg"
+          className="h-[345px] w-full overflow-hidden xl:w-1/2"
+        >
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.analytics.scheduledRuns')}
+          />
+          <div className="relative h-[245px] w-full">
             <div
               id="legend-container-4"
               className="flex flex-row items-center justify-end"
@@ -544,39 +532,45 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                       data: Object.values(scheduleData || {}).map(
                         (item) => item.completed,
                       ),
-                      backgroundColor: primaryColor,
+                      backgroundColor: palette.success,
                     },
                     {
                       label: t('settings.analytics.failed'),
                       data: Object.values(scheduleData || {}).map(
                         (item) => item.failed,
                       ),
-                      backgroundColor: '#FF6384',
+                      backgroundColor: palette.destructive,
                     },
                     {
                       label: t('settings.analytics.skipped'),
                       data: Object.values(scheduleData || {}).map(
                         (item) => item.skipped,
                       ),
-                      backgroundColor: '#FFCE56',
+                      backgroundColor: palette.warning,
                     },
                   ],
                 }}
                 legendID="legend-container-4"
                 maxTicksLimitInX={8}
+                gridColor={palette.border}
+                tickColor={palette.mutedForeground}
                 isStacked={true}
               />
             )}
           </div>
-        </div>
+        </Card>
 
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5 [@media(min-width:1080px)]:w-1/2">
-          <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
-              {t('settings.analytics.toolUsage')}
-            </p>
-          </div>
-          <div className="relative mt-px h-[245px] w-full">
+        <Card
+          variant="subtle"
+          padding="lg"
+          className="h-[345px] w-full overflow-hidden xl:w-1/2"
+        >
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.analytics.toolUsage')}
+          />
+          <div className="relative h-[245px] w-full">
             <div
               id="legend-container-5"
               className="flex flex-row items-center justify-end"
@@ -593,33 +587,39 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                       data: (toolsData || []).map(
                         (tool) => tool.calls - tool.failures,
                       ),
-                      backgroundColor: primaryColor,
+                      backgroundColor: palette.success,
                     },
                     {
                       label: t('settings.analytics.failed'),
                       data: (toolsData || []).map((tool) => tool.failures),
-                      backgroundColor: '#FF6384',
+                      backgroundColor: palette.destructive,
                     },
                   ],
                 }}
                 legendID="legend-container-5"
                 maxTicksLimitInX={8}
+                gridColor={palette.border}
+                tickColor={palette.mutedForeground}
                 isStacked={true}
               />
             )}
           </div>
-        </div>
+        </Card>
       </div>
 
       {/* Feedback Analytics */}
       <div className="mt-4 flex w-full flex-col gap-3">
-        <div className="border-border dark:border-border h-[345px] w-full overflow-hidden rounded-2xl border px-6 py-5">
-          <div className="flex flex-row items-center justify-start gap-3">
-            <p className="text-foreground dark:text-foreground font-bold">
-              {t('settings.analytics.userFeedback')}
-            </p>
-          </div>
-          <div className="relative mt-px h-[245px] w-full">
+        <Card
+          variant="subtle"
+          padding="lg"
+          className="h-[345px] w-full overflow-hidden"
+        >
+          <SectionHeader
+            as="h3"
+            size="xs"
+            title={t('settings.analytics.userFeedback')}
+          />
+          <div className="relative h-[245px] w-full">
             <div
               id="legend-container-3"
               className="flex flex-row items-center justify-end"
@@ -638,24 +638,26 @@ export default function Analytics({ agentId }: AnalyticsProps) {
                       data: Object.values(feedbackData || {}).map(
                         (item) => item.positive,
                       ),
-                      backgroundColor: primaryColor,
+                      backgroundColor: palette.success,
                     },
                     {
                       label: t('settings.analytics.negativeFeedback'),
                       data: Object.values(feedbackData || {}).map(
                         (item) => item.negative,
                       ),
-                      backgroundColor: '#FF6384',
+                      backgroundColor: palette.destructive,
                     },
                   ],
                 }}
                 legendID="legend-container-3"
                 maxTicksLimitInX={8}
+                gridColor={palette.border}
+                tickColor={palette.mutedForeground}
                 isStacked={false}
               />
             )}
           </div>
-        </div>
+        </Card>
       </div>
     </div>
   );
@@ -666,6 +668,10 @@ type AnalyticsChartProps = {
   legendID: string;
   maxTicksLimitInX: number;
   isStacked: boolean;
+  /** Grid lines and axis borders (`--border`). */
+  gridColor: string;
+  /** Axis tick labels and legend text (`--muted-foreground`). */
+  tickColor: string;
 };
 
 function AnalyticsChart({
@@ -673,6 +679,8 @@ function AnalyticsChart({
   legendID,
   maxTicksLimitInX,
   isStacked,
+  gridColor,
+  tickColor,
 }: AnalyticsChartProps) {
   const options = {
     responsive: true,
@@ -680,6 +688,8 @@ function AnalyticsChart({
     plugins: {
       legend: {
         display: false,
+        // The HTML legend copies each item's fontColor, which is this.
+        labels: { color: tickColor },
       },
       htmlLegend: {
         containerID: legendID,
@@ -689,25 +699,29 @@ function AnalyticsChart({
       x: {
         grid: {
           lineWidth: 0.2,
-          color: '#C4C4C4',
+          color: gridColor,
         },
         border: {
           width: 0.2,
-          color: '#C4C4C4',
+          color: gridColor,
         },
         ticks: {
           maxTicksLimit: maxTicksLimitInX,
+          color: tickColor,
         },
         stacked: isStacked,
       },
       y: {
         grid: {
           lineWidth: 0.2,
-          color: '#C4C4C4',
+          color: gridColor,
         },
         border: {
           width: 0.2,
-          color: '#C4C4C4',
+          color: gridColor,
+        },
+        ticks: {
+          color: tickColor,
         },
         stacked: isStacked,
       },
@@ -721,7 +735,10 @@ function AnalyticsChart({
         ...data,
         datasets: data.datasets.map((dataset) => ({
           ...dataset,
-          hoverBackgroundColor: `${dataset.backgroundColor}CC`, // 80% opacity
+          hoverBackgroundColor:
+            typeof dataset.backgroundColor === 'string'
+              ? hoverColor(dataset.backgroundColor)
+              : dataset.backgroundColor,
         })),
       }}
     />
diff --git a/frontend/src/settings/ConvertToWikiModal.tsx b/frontend/src/settings/ConvertToWikiModal.tsx
index d024b8b2..cfb9ee3b 100644
--- a/frontend/src/settings/ConvertToWikiModal.tsx
+++ b/frontend/src/settings/ConvertToWikiModal.tsx
@@ -1,11 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { CircleAlert, CircleCheck } from 'lucide-react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState, Doc } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 
@@ -124,77 +126,86 @@ export default function ConvertToWikiModal({
     fail(start.message);
   };
 
+  let footer: ReactNode = null;
+  if (phase === 'confirm') {
+    footer = (
+      <ModalActions
+        cancelLabel={t('cancel')}
+        onCancel={closeModal}
+        submitLabel={t('settings.sources.wiki.convert.confirm')}
+        onSubmit={handleConvert}
+      />
+    );
+  } else if (phase === 'summary' && summary) {
+    footer = (
+      <Button type="button" onClick={closeModal} size="lg" shape="pill">
+        {t('settings.sources.wiki.convert.done')}
+      </Button>
+    );
+  } else if (phase === 'error') {
+    footer = (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        size="lg"
+        shape="pill"
+      >
+        {t('cancel')}
+      </Button>
+    );
+  }
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.wiki.convert.title')}
+      description={
+        phase === 'confirm'
+          ? document?.name
+            ? t('settings.sources.wiki.convert.intro', {
+                name: document.name,
+              })
+            : t('settings.sources.wiki.convert.introGeneric')
+          : undefined
+      }
+      footer={footer}
       size="md"
       mobileVariant="sheet"
-      className="max-w-[480px]"
       isPerformingTask={phase === 'converting'}
     >
-      <div className="flex flex-col gap-5 px-1 py-1">
-        <h2 className="text-foreground text-xl font-semibold">
-          {t('settings.sources.wiki.convert.title')}
-        </h2>
-
+      <div className="flex flex-col gap-5">
         {phase === 'confirm' && (
-          <>
-            <p className="text-muted-foreground text-sm">
-              {document?.name
-                ? t('settings.sources.wiki.convert.intro', {
-                    name: document.name,
-                  })
-                : t('settings.sources.wiki.convert.introGeneric')}
-            </p>
-            <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
-              <li>{t('settings.sources.wiki.convert.costReparse')}</li>
-              <li>{t('settings.sources.wiki.convert.costSkipped')}</li>
-              <li>{t('settings.sources.wiki.convert.costIrreversible')}</li>
-            </ul>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleConvert}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.wiki.convert.confirm')}
-              </Button>
-            </div>
-          </>
+          <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
+            <li>{t('settings.sources.wiki.convert.costReparse')}</li>
+            <li>{t('settings.sources.wiki.convert.costSkipped')}</li>
+            <li>{t('settings.sources.wiki.convert.costIrreversible')}</li>
+          </ul>
         )}
 
         {phase === 'converting' && (
-          <div className="flex flex-col items-center gap-3 py-6">
-            <Spinner size="medium" />
-            <p className="text-muted-foreground text-sm">
-              {t('settings.sources.wiki.convert.inProgress')}
-            </p>
-          </div>
+          <LoadingState
+            fill="block"
+            label={t('settings.sources.wiki.convert.inProgress')}
+          />
         )}
 
         {phase === 'summary' && summary && (
           <>
-            <div className="rounded-xl bg-green-50 p-4 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-200">
-              {[
-                t('settings.sources.wiki.convert.summaryPages', {
-                  count: summary.pagesCreated,
-                }),
-                t('settings.sources.wiki.convert.summarySkipped', {
-                  count: summary.skipped.length,
-                }),
-              ].join(' · ')}
-            </div>
+            <Alert variant="success">
+              <CircleCheck className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {[
+                  t('settings.sources.wiki.convert.summaryPages', {
+                    count: summary.pagesCreated,
+                  }),
+                  t('settings.sources.wiki.convert.summarySkipped', {
+                    count: summary.skipped.length,
+                  }),
+                ].join(' · ')}
+              </AlertDescription>
+            </Alert>
             {summary.skipped.length > 0 && (
               <div className="flex flex-col gap-1.5">
                 <p className="text-foreground text-sm font-medium">
@@ -210,34 +221,14 @@ export default function ConvertToWikiModal({
                 </ul>
               </div>
             )}
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.wiki.convert.done')}
-              </Button>
-            </div>
           </>
         )}
 
         {phase === 'error' && (
-          <>
-            <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-              {error}
-            </div>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-            </div>
-          </>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/settings/CustomModels.tsx b/frontend/src/settings/CustomModels.tsx
index 743eaf82..08e90650 100644
--- a/frontend/src/settings/CustomModels.tsx
+++ b/frontend/src/settings/CustomModels.tsx
@@ -1,25 +1,19 @@
-import { Globe, Search as SearchIcon, Tag, Trash } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import { Globe, Pencil, Tag, Trash2 } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import customModelsService from '../api/services/customModelsService';
 import modelService from '../api/services/modelService';
-import Edit from '../assets/edit.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import ThreeDotsIcon from '../assets/three-dots.svg';
+import PageToolbar from '../components/PageToolbar';
+import SearchInput from '../components/SearchInput';
 import SkeletonLoader from '../components/SkeletonLoader';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
-import { Input } from '../components/ui/input';
-import { useDarkTheme, useLoaderState } from '../hooks';
+import { Card, CardFooter, CardTitle } from '../components/ui/card';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
+import { EmptyState } from '../components/ui/empty-state';
+import { useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CustomModelModal from '../modals/CustomModelModal';
 import { ActiveState } from '../models/misc';
@@ -30,15 +24,6 @@ import {
 
 import type { CustomModel } from '../models/types';
 
-type CustomModelMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 const formatBaseUrlHost = (baseUrl: string): string => {
   if (!baseUrl) return '';
   try {
@@ -55,7 +40,6 @@ export default function CustomModels() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
 
   const [models, setModels] = React.useState<CustomModel[]>([]);
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -143,22 +127,18 @@ export default function CustomModels() {
     }
   };
 
-  const getMenuOptions = (model: CustomModel): CustomModelMenuOption[] => [
+  const getMenuOptions = (model: CustomModel): MenuOption[] => [
     {
-      icon: Edit,
+      icon: Pencil,
       label: t('settings.customModels.actions.edit'),
       onClick: () => openEditModal(model),
       variant: 'default',
-      iconWidth: 14,
-      iconHeight: 14,
     },
     {
-      icon: Trash,
+      icon: Trash2,
       label: t('settings.customModels.actions.delete'),
       onClick: () => requestDelete(model),
       variant: 'destructive',
-      iconWidth: 16,
-      iconHeight: 16,
     },
   ];
 
@@ -171,163 +151,94 @@ export default function CustomModels() {
   });
 
   const renderEmptyState = () => (
-    <div className="flex w-full flex-col items-center justify-center py-12">
-      <img
-        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-        alt={t('settings.customModels.empty')}
-        className="mx-auto mb-6 h-32 w-32"
-      />
-      <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-        {t('settings.customModels.empty')}
-      </p>
-    </div>
+    <EmptyState title={t('settings.customModels.empty')} />
   );
 
   return (
-    <div className="mt-8">
+    <div>
       <div className="relative flex flex-col">
-        <p className="text-muted-foreground mb-5 text-sm leading-6">
-          {t('settings.customModels.subtitle')}
-        </p>
-        <div className="my-3 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="w-full max-w-md">
-            <Input
+        <PageToolbar
+          intro={t('settings.customModels.subtitle')}
+          search={
+            <SearchInput
               maxLength={256}
               label={t('settings.customModels.searchPlaceholder')}
               name="custom-models-search-input"
-              type="text"
               id="custom-models-search-input"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              labelBgClassName="bg-background"
-              className="rounded-full"
-              leftIcon={
-                <SearchIcon
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
             />
-          </div>
-          <Button
-            type="button"
-            className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
-            onClick={openAddModal}
-          >
-            {t('settings.customModels.addModel')}
-          </Button>
-        </div>
-        <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+          }
+          action={
+            <Button
+              type="button"
+              size="field"
+              shape="pill"
+              onClick={openAddModal}
+            >
+              {t('settings.customModels.addModel')}
+            </Button>
+          }
+          divider
+        />
         {loading ? (
-          <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             <SkeletonLoader component="toolCards" count={3} />
           </div>
+        ) : filteredModels.length === 0 ? (
+          renderEmptyState()
         ) : (
-          <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
-            {filteredModels.length === 0
-              ? renderEmptyState()
-              : filteredModels.map((model) => (
-                  <div
-                    key={model.id}
-                    className="bg-muted hover:bg-accent relative flex w-[300px] flex-col overflow-hidden rounded-2xl p-5"
-                  >
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          onClick={(e) => e.stopPropagation()}
-                          className="absolute top-3 right-3 z-10 cursor-pointer"
-                          aria-label={t(
-                            'settings.customModels.actionsMenuAria',
-                            { modelName: model.display_name },
-                          )}
-                        >
-                          <img
-                            src={ThreeDotsIcon}
-                            alt={t('settings.customModels.actionsMenuAria', {
-                              modelName: model.display_name,
-                            })}
-                            className="h-[19px] w-[19px]"
-                          />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="end"
-                        className="min-w-[144px]"
-                      >
-                        {getMenuOptions(model).map((option, index) => {
-                          const IconCmp =
-                            typeof option.icon !== 'string'
-                              ? option.icon
-                              : null;
-                          return (
-                            <DropdownMenuItem
-                              key={index}
-                              variant={option.variant}
-                              onSelect={() => option.onClick()}
-                            >
-                              {typeof option.icon === 'string' ? (
-                                <img
-                                  src={option.icon}
-                                  alt=""
-                                  width={option.iconWidth ?? 16}
-                                  height={option.iconHeight ?? 16}
-                                />
-                              ) : (
-                                IconCmp && (
-                                  <IconCmp
-                                    size={Math.max(
-                                      option.iconWidth ?? 16,
-                                      option.iconHeight ?? 16,
-                                    )}
-                                    strokeWidth={1.75}
-                                    aria-hidden="true"
-                                  />
-                                )
-                              )}
-                              <span>{option.label}</span>
-                            </DropdownMenuItem>
-                          );
-                        })}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    <div className="w-full pr-7">
-                      <div className="flex items-center gap-2">
-                        <p
-                          title={model.display_name}
-                          className="text-foreground dark:text-foreground truncate text-sm leading-snug font-semibold"
-                        >
-                          {model.display_name}
-                        </p>
-                        {!model.enabled && (
-                          <span className="bg-muted-foreground/15 text-muted-foreground shrink-0 rounded-full px-2 py-0.5 text-xs leading-none font-medium">
-                            {t('settings.customModels.disabledBadge')}
-                          </span>
-                        )}
-                      </div>
-                      <div className="mt-3 space-y-1.5">
-                        <div
-                          className="text-muted-foreground/80 flex items-center gap-1.5 text-xs leading-relaxed"
-                          title={model.upstream_model_id}
-                        >
-                          <Tag className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                          <span className="truncate">
-                            {model.upstream_model_id}
-                          </span>
-                        </div>
-                        <div
-                          className="text-muted-foreground/80 flex items-center gap-1.5 text-xs leading-relaxed"
-                          title={model.base_url}
-                        >
-                          <Globe className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                          <span className="truncate">
-                            {formatBaseUrlHost(model.base_url)}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {filteredModels.map((model) => (
+              <Card
+                key={model.id}
+                variant="filled"
+                padding="lg"
+                className="relative overflow-hidden"
+              >
+                <ActionMenu
+                  options={getMenuOptions(model)}
+                  triggerLabel={t('settings.customModels.actionsMenuAria', {
+                    modelName: model.display_name,
+                  })}
+                  className="absolute top-3 right-3 z-10"
+                />
+                <div className="w-full pr-7">
+                  <div className="flex items-center gap-2">
+                    <CardTitle
+                      as="h2"
+                      title={model.display_name}
+                      className="min-w-0 truncate"
+                    >
+                      {model.display_name}
+                    </CardTitle>
+                    {!model.enabled && (
+                      <Badge variant="neutral">
+                        {t('settings.customModels.disabledBadge')}
+                      </Badge>
+                    )}
                   </div>
-                ))}
+                </div>
+                <CardFooter className="flex-col items-stretch gap-1.5 pr-7">
+                  <div
+                    className="flex items-center gap-1.5 leading-relaxed"
+                    title={model.upstream_model_id}
+                  >
+                    <Tag className="size-3.5 shrink-0 opacity-70" />
+                    <span className="truncate">{model.upstream_model_id}</span>
+                  </div>
+                  <div
+                    className="flex items-center gap-1.5 leading-relaxed"
+                    title={model.base_url}
+                  >
+                    <Globe className="size-3.5 shrink-0 opacity-70" />
+                    <span className="truncate">
+                      {formatBaseUrlHost(model.base_url)}
+                    </span>
+                  </div>
+                </CardFooter>
+              </Card>
+            ))}
           </div>
         )}
       </div>
@@ -345,7 +256,7 @@ export default function CustomModels() {
         setModalState={setDeleteState}
         handleSubmit={confirmDelete}
         submitLabel={t('settings.customModels.actions.delete')}
-        variant="danger"
+        variant="destructive"
       />
     </div>
   );
diff --git a/frontend/src/settings/EnableGraphRAGModal.tsx b/frontend/src/settings/EnableGraphRAGModal.tsx
index 7709b771..8f2ca576 100644
--- a/frontend/src/settings/EnableGraphRAGModal.tsx
+++ b/frontend/src/settings/EnableGraphRAGModal.tsx
@@ -1,11 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
+import { CircleAlert, CircleCheck } from 'lucide-react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { LoadingState } from '@/components/ui/loading-state';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
+import { Progress } from '../components/ui/progress';
 import { ActiveState, Doc } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
 import type { AppDispatch, RootState } from '../store';
@@ -196,31 +199,58 @@ export default function EnableGraphRAGModal({
       ? Math.min(100, Math.round((build.current / build.total) * 100))
       : null;
 
+  let footer: ReactNode = null;
+  if (phase === 'confirm') {
+    footer = (
+      <ModalActions
+        cancelLabel={t('cancel')}
+        onCancel={closeModal}
+        submitLabel={t('settings.sources.graphrag.enable.confirm')}
+        onSubmit={handleEnable}
+      />
+    );
+  } else if (phase === 'summary' && summary) {
+    footer = (
+      <Button type="button" onClick={closeModal} size="lg" shape="pill">
+        {t('settings.sources.graphrag.enable.done')}
+      </Button>
+    );
+  } else if (phase === 'error') {
+    footer = (
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={closeModal}
+        size="lg"
+        shape="pill"
+      >
+        {t('cancel')}
+      </Button>
+    );
+  }
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.graphrag.enable.title')}
+      description={
+        phase === 'confirm'
+          ? document?.name
+            ? t('settings.sources.graphrag.enable.intro', {
+                name: document.name,
+              })
+            : t('settings.sources.graphrag.enable.introGeneric')
+          : undefined
+      }
+      footer={footer}
       size="md"
       mobileVariant="sheet"
-      className="max-w-[480px]"
       isPerformingTask={phase === 'building'}
     >
-      <div className="flex flex-col gap-5 px-1 py-1">
-        <h2 className="text-foreground text-xl font-semibold">
-          {t('settings.sources.graphrag.enable.title')}
-        </h2>
-
+      <div className="flex flex-col gap-5">
         {phase === 'confirm' && (
           <>
-            <p className="text-muted-foreground text-sm">
-              {document?.name
-                ? t('settings.sources.graphrag.enable.intro', {
-                    name: document.name,
-                  })
-                : t('settings.sources.graphrag.enable.introGeneric')}
-            </p>
             <ul className="text-muted-foreground list-disc space-y-1.5 pl-5 text-sm">
               <li>{t('settings.sources.graphrag.enable.costExtraction')}</li>
               <li>{t('settings.sources.graphrag.enable.costCost')}</li>
@@ -231,50 +261,32 @@ export default function EnableGraphRAGModal({
                 hi: estimate.hi.toLocaleString(),
               })}
             </div>
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleEnable}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.graphrag.enable.confirm')}
-              </Button>
-            </div>
           </>
         )}
 
-        {phase === 'building' && (
-          <div className="flex flex-col items-center gap-3 py-6">
-            <Spinner size="medium" />
-            <p className="text-muted-foreground text-sm">
-              {progressPct !== null
-                ? t('settings.sources.graphrag.enable.inProgressPct', {
-                    pct: progressPct,
-                  })
-                : t('settings.sources.graphrag.enable.inProgress')}
-            </p>
-            {progressPct !== null && (
-              <div className="bg-muted h-1.5 w-48 overflow-hidden rounded-full">
-                <div
-                  className="bg-foreground/70 h-full rounded-full transition-all"
-                  style={{ width: `${progressPct}%` }}
-                />
-              </div>
-            )}
-          </div>
-        )}
+        {phase === 'building' &&
+          (progressPct === null ? (
+            <LoadingState
+              fill="block"
+              label={t('settings.sources.graphrag.enable.inProgress')}
+            />
+          ) : (
+            // The bar sits under the caption, so the block's py-10 moves to
+            // this wrapper and the ring only centres itself.
+            <div className="flex flex-col items-center gap-3 py-10">
+              <LoadingState
+                label={t('settings.sources.graphrag.enable.inProgressPct', {
+                  pct: progressPct,
+                })}
+              />
+              <Progress size="sm" value={progressPct} className="w-48" />
+            </div>
+          ))}
 
         {phase === 'summary' && summary && (
-          <>
-            <div className="rounded-xl bg-green-50 p-4 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-200">
+          <Alert variant="success">
+            <CircleCheck className="size-4" aria-hidden="true" />
+            <AlertDescription>
               {[
                 t('settings.sources.graphrag.enable.summaryNodes', {
                   count: summary.nodes,
@@ -286,35 +298,15 @@ export default function EnableGraphRAGModal({
                   count: summary.chunksProcessed,
                 }),
               ].join(' · ')}
-            </div>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.graphrag.enable.done')}
-              </Button>
-            </div>
-          </>
+            </AlertDescription>
+          </Alert>
         )}
 
         {phase === 'error' && (
-          <>
-            <div className="rounded-xl bg-red-50 p-4 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-              {error}
-            </div>
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-            </div>
-          </>
+          <Alert variant="destructive">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 34fc18e7..0ceb244e 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -10,6 +10,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { SectionHeader } from '../components/ui/section-header';
+import { SettingRow, SettingRows } from '../components/ui/setting-row';
+import PageToolbar from '../components/PageToolbar';
 import { useDarkTheme } from '../hooks';
 import {
   selectPrompt,
@@ -45,6 +48,8 @@ export default function General() {
     isDarkTheme ? 'Dark' : 'Light',
   );
   const dispatch = useDispatch();
+  const themeId = React.useId();
+  const languageId = React.useId();
   const locale = localStorage.getItem('docsgpt-locale');
   // Fall back to English when the stored locale is not one we offer. Without
   // the fallback `find` returns undefined, the effect below writes the string
@@ -62,74 +67,111 @@ export default function General() {
     changeLanguage(selectedLanguage.value);
   }, [selectedLanguage, changeLanguage]);
   return (
-    <div className="mt-8 flex flex-col gap-6">
-      <div className="flex flex-col gap-4">
-        <Prompts
-          prompts={prompts}
-          selectedPrompt={selectedPrompt}
-          onSelectPrompt={(name, id, type) =>
-            dispatch(setPrompt({ name: name, id: id, type: type }))
-          }
-          setPrompts={(newPrompts) => dispatch(setPrompts(newPrompts))}
-        />
-      </div>
-      <div className="flex flex-col gap-4">
-        <label className="text-foreground dark:text-foreground text-base font-medium">
-          {t('settings.general.selectTheme')}
-        </label>
-        <Select
-          value={selectedTheme}
-          onValueChange={(value) => {
-            setSelectedTheme(value);
-            value !== selectedTheme && toggleTheme();
-          }}
-        >
-          <SelectTrigger className="w-56 rounded-3xl px-5 py-3" size="lg">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {themes.map((theme) => (
-              <SelectItem key={theme.value} value={theme.value}>
-                {theme.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="flex flex-col gap-4">
-        <label className="text-foreground dark:text-foreground text-base font-medium">
-          {t('settings.general.selectLanguage')}
-        </label>
-        <Select
-          value={selectedLanguage?.value}
-          onValueChange={(value) => {
-            const opt = languageOptions.find((o) => o.value === value);
-            if (opt) setSelectedLanguage(opt);
-          }}
-        >
-          <SelectTrigger className="w-56 rounded-3xl px-5 py-3" size="lg">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {languageOptions.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <hr className="border-border dark:border-border my-4 w-[calc(min(665px,100%))] border-t" />
-      <div className="flex flex-col gap-2">
-        <Button
-          type="button"
-          variant="destructive-outline"
-          title={t('settings.general.deleteAllLabel')}
-          className="w-fit rounded-3xl px-5 py-3 tracking-[0.015em] hover:font-bold hover:tracking-normal"
-          onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
-        >
-          {t('settings.general.deleteAllBtn')}
-        </Button>
+    <div>
+      <PageToolbar intro={t('settings.general.subtitle')} divider />
+      <div className="flex max-w-3xl flex-col gap-10">
+        <section className="flex flex-col gap-4">
+          <SectionHeader title={t('settings.general.sections.appearance')} />
+          <SettingRows>
+            <SettingRow
+              label={t('settings.general.theme')}
+              description={t('settings.general.themeDescription')}
+              htmlFor={themeId}
+              stack
+            >
+              <Select
+                value={selectedTheme}
+                onValueChange={(value) => {
+                  setSelectedTheme(value);
+                  if (value !== selectedTheme) toggleTheme();
+                }}
+              >
+                <SelectTrigger
+                  id={themeId}
+                  className="w-full sm:w-56"
+                  size="field"
+                  shape="pill"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {themes.map((theme) => (
+                    <SelectItem key={theme.value} value={theme.value}>
+                      {theme.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </SettingRow>
+            <SettingRow
+              label={t('settings.general.language')}
+              description={t('settings.general.languageDescription')}
+              htmlFor={languageId}
+              stack
+            >
+              <Select
+                value={selectedLanguage?.value}
+                onValueChange={(value) => {
+                  const opt = languageOptions.find((o) => o.value === value);
+                  if (opt) setSelectedLanguage(opt);
+                }}
+              >
+                <SelectTrigger
+                  id={languageId}
+                  className="w-full sm:w-56"
+                  size="field"
+                  shape="pill"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {languageOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </SettingRow>
+          </SettingRows>
+        </section>
+        <section className="flex flex-col gap-4">
+          <SectionHeader title={t('settings.general.sections.chat')} />
+          <SettingRows>
+            <Prompts
+              prompts={prompts}
+              selectedPrompt={selectedPrompt}
+              description={t('settings.general.promptDescription')}
+              onSelectPrompt={(name, id, type) =>
+                dispatch(setPrompt({ name: name, id: id, type: type }))
+              }
+              setPrompts={(newPrompts) => dispatch(setPrompts(newPrompts))}
+            />
+          </SettingRows>
+        </section>
+        <section className="flex flex-col gap-4">
+          <SectionHeader
+            title={t('settings.general.sections.dangerZone')}
+            tone="destructive"
+          />
+          <SettingRows>
+            <SettingRow
+              label={t('settings.general.deleteAllLabel')}
+              description={t('settings.general.deleteAllDescription')}
+              as="h3"
+            >
+              <Button
+                type="button"
+                variant="destructive-outline"
+                size="field"
+                shape="pill"
+                onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
+              >
+                {t('settings.general.deleteAllBtn')}
+              </Button>
+            </SettingRow>
+          </SettingRows>
+        </section>
       </div>
     </div>
   );
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 16a0b247..c39a50c7 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -1,14 +1,19 @@
-import { Activity } from 'lucide-react';
+import { Activity, ChevronRight } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ChevronRight from '../assets/chevron-right.svg';
 import CopyButton from '../components/CopyButton';
+import SearchInput from '../components/SearchInput';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
+import { Card } from '../components/ui/card';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../components/ui/description-list';
+import { EmptyState } from '../components/ui/empty-state';
 import {
   Select,
   SelectContent,
@@ -17,6 +22,7 @@ import {
   SelectValue,
 } from '../components/ui/select';
 import { useLoaderState } from '../hooks';
+import { cn } from '../lib/utils';
 import { selectToken } from '../preferences/preferenceSlice';
 import TraceChips from './traces/TraceChips';
 import TraceSheet from './traces/TraceSheet';
@@ -138,16 +144,13 @@ export default function Logs({ agentId, tableHeader }: LogsProps) {
   ];
 
   return (
-    <div className="mt-8">
+    <div>
       <p className="text-muted-foreground mb-5 text-sm leading-6">
         {t('settings.logs.subtitle')}
       </p>
       <div className="mb-3 flex flex-row flex-wrap items-center gap-3">
         <Select value={levelFilter} onValueChange={setLevelFilter}>
-          <SelectTrigger
-            className="w-[125px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
-          >
+          <SelectTrigger className="w-[125px]" size="field" shape="pill">
             <SelectValue placeholder={t('settings.logs.levels.all')} />
           </SelectTrigger>
           <SelectContent>
@@ -159,10 +162,7 @@ export default function Logs({ agentId, tableHeader }: LogsProps) {
           </SelectContent>
         </Select>
         <Select value={typeFilter} onValueChange={setTypeFilter}>
-          <SelectTrigger
-            className="w-[140px] rounded-3xl px-5 py-3 text-sm"
-            size="lg"
-          >
+          <SelectTrigger className="w-[140px]" size="field" shape="pill">
             <SelectValue placeholder={t('settings.logs.types.all')} />
           </SelectTrigger>
           <SelectContent>
@@ -173,12 +173,13 @@ export default function Logs({ agentId, tableHeader }: LogsProps) {
             ))}
           </SelectContent>
         </Select>
-        <Input
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          placeholder={t('settings.logs.searchPlaceholder')}
-          className="w-56 rounded-3xl"
-        />
+        <div className="w-56">
+          <SearchInput
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            label={t('settings.logs.searchPlaceholder')}
+          />
+        </div>
       </div>
       <div>
         <LogsTable
@@ -249,17 +250,20 @@ function LogsTable({
   }, []);
 
   return (
-    <div className="logs-table border-border bg-card h-[55vh] w-full overflow-hidden rounded-xl border dark:bg-black">
-      <div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-white/5">
+    <div className="border-border bg-card h-[55vh] w-full overflow-hidden rounded-xl border font-mono">
+      <div className="bg-muted flex h-8 flex-col items-start justify-center">
         <p className="text-muted-foreground px-3 text-xs">
           {tableHeader ? tableHeader : t('settings.logs.tableHeader')}
         </p>
       </div>
       <div className="relative flex h-[51vh] grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
         {!loading && logs.length === 0 && (
-          <p className="text-muted-foreground w-full py-4 text-center text-xs">
-            {t('settings.logs.noLogs')}
-          </p>
+          <EmptyState
+            size="xs"
+            illustration="none"
+            title={t('settings.logs.noLogs')}
+            className="w-full"
+          />
         )}
         {logs?.map((log, index) => {
           if (index === logs.length - 1) {
@@ -310,9 +314,9 @@ function Log({
 }) {
   const { t } = useTranslation();
   const logLevelColor = {
-    info: 'text-green-500',
-    error: 'text-red-500',
-    warning: 'text-yellow-500',
+    info: 'text-success',
+    error: 'text-destructive',
+    warning: 'text-warning',
   };
   const { id, action, timestamp, event_type, ...filteredLog } = log;
 
@@ -428,7 +432,7 @@ function Log({
     });
 
   return (
-    <div className="group dark:hover:bg-accent hover:bg-muted w-full rounded-xl bg-transparent">
+    <div className="group hover:bg-accent w-full rounded-xl bg-transparent">
       <div
         role="button"
         tabIndex={0}
@@ -440,30 +444,35 @@ function Log({
             onToggle(log.id);
           }
         }}
-        className={`text-foreground focus-visible:ring-ring/50 flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 outline-none focus-visible:ring-3 focus-visible:ring-inset ${
-          isOpen ? 'dark:bg-background rounded-t-xl bg-[#F1F1F1]' : ''
-        }`}
+        className={cn(
+          'text-foreground focus-visible:ring-ring/50 flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 outline-none focus-visible:ring-3 focus-visible:ring-inset',
+          isOpen && 'bg-muted rounded-t-xl',
+        )}
       >
-        <img
-          src={ChevronRight}
-          alt="Expand log entry"
-          className={`mt-[3px] h-3 w-3 transition duration-300 dark:invert ${isOpen ? 'rotate-90' : ''}`}
+        <ChevronRight
+          className={cn(
+            'text-muted-foreground mt-[3px] size-3 transition-transform duration-200',
+            isOpen && 'rotate-90',
+          )}
         />
         <span className="flex flex-row flex-wrap gap-2">
-          <h2 className="dark:text-foreground text-xs text-black/60">{`${log.timestamp}`}</h2>
+          <h2 className="text-muted-foreground text-xs">{`${log.timestamp}`}</h2>
           {log.event_type && (
             <h2 className="text-muted-foreground text-xs">
               {t(`settings.logs.types.${log.event_type}`)}
             </h2>
           )}
-          <h2 className="text-xs text-[#913400] dark:text-orange-500">{`[${log.action}]`}</h2>
+          <h2 className="text-warning text-xs">{`[${log.action}]`}</h2>
           {log.trace && (
             <h2 className="text-muted-foreground text-xs tabular-nums">
               {formatDurationMs(log.trace.duration_ms)}
             </h2>
           )}
           <h2
-            className={`max-w-72 text-xs ${logLevelColor[log.level]} wrap-break-word`}
+            className={cn(
+              'max-w-72 text-xs wrap-break-word',
+              logLevelColor[log.level],
+            )}
           >
             {`${log.question}`.length > 250
               ? `${log.question.substring(0, 250)}...`
@@ -472,7 +481,7 @@ function Log({
         </span>
       </div>
       {isOpen && (
-        <div className="dark:bg-background rounded-b-xl bg-[#F1F1F1] px-4 py-3">
+        <div className="bg-muted rounded-b-xl px-4 py-3">
           {log.trace && (
             <div className="flex flex-wrap items-center gap-2 px-2 pb-3">
               <Button
@@ -494,41 +503,39 @@ function Log({
             </div>
           )}
           {detailRows.length > 0 && (
-            <div className="flex flex-col gap-1 px-2 pb-2">
+            <DescriptionList size="xs" className="mx-2 mb-2">
               {detailRows.map(([label, value]) => (
-                <div key={label} className="flex flex-row gap-2 text-xs">
-                  <span className="text-muted-foreground w-28 shrink-0">
-                    {label}
-                  </span>
-                  <span className="text-foreground wrap-break-word">
-                    {value}
-                  </span>
-                </div>
+                <DescriptionItem key={label} label={label}>
+                  {value}
+                </DescriptionItem>
               ))}
-            </div>
+            </DescriptionList>
           )}
           {textBlocks.map((block) => (
-            <div key={block.label} className="px-2 pb-2">
+            <div key={block.label} className="flex flex-col gap-1 px-2 pb-2">
               <p className="text-muted-foreground text-xs">{block.label}</p>
-              <pre
-                className={`font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap ${
-                  block.isError
-                    ? 'text-red-500'
-                    : 'text-gray-700 dark:text-gray-400'
-                }`}
-              >
-                {block.text}
-              </pre>
+              <Card variant="subtle" padding="sm">
+                <pre
+                  className={cn(
+                    'font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap',
+                    block.isError ? 'text-destructive' : 'text-foreground',
+                  )}
+                >
+                  {block.text}
+                </pre>
+              </Card>
             </div>
           ))}
           {jsonBlocks.map((block) => (
-            <div key={block.label} className="px-2 pb-2">
+            <div key={block.label} className="flex flex-col gap-1 px-2 pb-2">
               <p className="text-muted-foreground text-xs">{block.label}</p>
-              <div className="scrollbar-overlay max-h-60 overflow-y-auto">
-                <pre className="font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap text-gray-700 dark:text-gray-400">
-                  {JSON.stringify(block.value, null, 2)}
-                </pre>
-              </div>
+              <Card variant="subtle" padding="sm">
+                <div className="scrollbar-overlay max-h-60 overflow-y-auto">
+                  <pre className="text-foreground font-mono text-xs leading-relaxed wrap-break-word whitespace-pre-wrap">
+                    {JSON.stringify(block.value, null, 2)}
+                  </pre>
+                </div>
+              </Card>
             </div>
           ))}
           <div className="my-px w-fit">
diff --git a/frontend/src/settings/PairDeviceModal.tsx b/frontend/src/settings/PairDeviceModal.tsx
index 01890166..7f5120eb 100644
--- a/frontend/src/settings/PairDeviceModal.tsx
+++ b/frontend/src/settings/PairDeviceModal.tsx
@@ -1,3 +1,4 @@
+import { ShieldAlert } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -10,8 +11,9 @@ import devicesService, {
 import CopyButton from '../components/CopyButton';
 import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { Modal, ModalActions } from '../components/ui/modal';
 import {
   Select,
   SelectContent,
@@ -145,7 +147,6 @@ export default function PairDeviceModal({
         onChange={(e) => setName(e.target.value)}
         label={t('settings.devices.pairing.nameLabel')}
         placeholder={t('settings.devices.pairing.namePlaceholder')}
-        labelBgClassName="bg-card"
       />
       <Input
         type="text"
@@ -153,7 +154,6 @@ export default function PairDeviceModal({
         onChange={(e) => setDescription(e.target.value)}
         label={t('settings.devices.pairing.descriptionLabel')}
         placeholder={t('settings.devices.pairing.descriptionPlaceholder')}
-        labelBgClassName="bg-card"
       />
       <div className="flex flex-col gap-2">
         <span className="text-muted-foreground text-xs">
@@ -176,9 +176,12 @@ export default function PairDeviceModal({
           </SelectContent>
         </Select>
         {approvalMode === 'full' && (
-          <p className="text-xs text-red-600 dark:text-red-400">
-            {t('settings.devices.pairing.fullAccessWarning')}
-          </p>
+          <Alert variant="destructive">
+            <ShieldAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>
+              {t('settings.devices.pairing.fullAccessWarning')}
+            </AlertDescription>
+          </Alert>
         )}
       </div>
       {error && (
@@ -198,20 +201,31 @@ export default function PairDeviceModal({
         <span className="text-muted-foreground text-xs">
           {t('settings.devices.pairing.stepOne')}
         </span>
-        <div className="bg-muted flex items-center gap-2 rounded-md p-3">
-          <pre className="grow font-mono text-sm break-all whitespace-pre-wrap select-all">
+        <Card
+          variant="filled"
+          padding="sm"
+          className="flex-row items-start gap-2"
+        >
+          <pre className="min-w-0 flex-1 font-mono text-xs wrap-break-word whitespace-pre-wrap select-all">
             {installCommand}
           </pre>
           <CopyButton textToCopy={installCommand} />
-        </div>
-        <a
-          href="https://github.com/arc53/DocsGPT-cli#installation"
-          target="_blank"
-          rel="noreferrer"
-          className="text-muted-foreground hover:text-foreground text-xs underline"
+        </Card>
+        <Button
+          variant="link"
+          size="inline"
+          asChild
+          // eslint-disable-next-line shadcn/no-restyle -- a link in a 12px hint keeps the sentence's size and weight
+          className="self-start text-xs font-normal"
         >
-          {t('settings.devices.pairing.installLink')}
-        </a>
+          <a
+            href="https://github.com/arc53/DocsGPT-cli#installation"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('settings.devices.pairing.installLink')}
+          </a>
+        </Button>
       </div>
       <div className="flex flex-col gap-1">
         <span className="text-muted-foreground text-xs">
@@ -233,25 +247,17 @@ export default function PairDeviceModal({
   const footer = (() => {
     if (stage === 'form') {
       return (
-        <>
-          <Button variant="ghost" onClick={close} className="rounded-3xl px-5">
-            {t('settings.devices.pairing.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleStart}
-            disabled={submitting}
-            className="rounded-3xl px-5 text-white"
-          >
-            {submitting
-              ? t('settings.devices.pairing.starting')
-              : t('settings.devices.pairing.start')}
-          </Button>
-        </>
+        <ModalActions
+          cancelLabel={t('settings.devices.pairing.cancel')}
+          onCancel={close}
+          submitLabel={t('settings.devices.pairing.start')}
+          onSubmit={handleStart}
+          pending={submitting}
+        />
       );
     }
     return (
-      <Button variant="ghost" onClick={close} className="rounded-3xl px-5">
+      <Button variant="ghost" size="lg" shape="pill" onClick={close}>
         {t('settings.devices.pairing.cancel')}
       </Button>
     );
@@ -265,7 +271,6 @@ export default function PairDeviceModal({
       }}
       title={t('settings.devices.pairing.title')}
       footer={footer}
-      contentClassName="px-1"
     >
       {stage === 'form' && renderForm()}
       {stage === 'waiting' && renderWaiting()}
diff --git a/frontend/src/settings/PersonalAccessTokens.tsx b/frontend/src/settings/PersonalAccessTokens.tsx
index 27cebbb0..3b8d154f 100644
--- a/frontend/src/settings/PersonalAccessTokens.tsx
+++ b/frontend/src/settings/PersonalAccessTokens.tsx
@@ -10,11 +10,16 @@ import patService, {
   CreateAccessTokenResponse,
   PersonalAccessToken,
 } from '../api/services/patService';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
+import PageToolbar from '../components/PageToolbar';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Alert, AlertDescription } from '../components/ui/alert';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../components/ui/description-list';
+import { EmptyState } from '../components/ui/empty-state';
 import {
   Table,
   TableBody,
@@ -24,19 +29,21 @@ import {
   TableHeader,
   TableRow,
 } from '../components/ui/table';
-import { useDarkTheme } from '../hooks';
 import AccessTokenCreatedModal from '../modals/AccessTokenCreatedModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CreateAccessTokenModal from '../modals/CreateAccessTokenModal';
 import RegenerateAccessTokenModal from '../modals/RegenerateAccessTokenModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import { formatDateOnly, formatDateTime } from '../utils/dateTimeUtils';
+import {
+  formatDateOnly,
+  formatDateTime,
+  formatRelative,
+} from '../utils/dateTimeUtils';
 import {
   countLiveTokens,
   expiryStatus,
   NO_ESCAPE,
-  relativeTime,
   restrictionCounts,
 } from './accessTokenUtils';
 
@@ -51,25 +58,23 @@ function ScopeChips({ scopes }: { scopes: string[] }) {
   return (
     <div className="flex flex-wrap items-center gap-1">
       {visible.map((scope) => (
-        <span
-          key={scope}
-          className="bg-muted text-foreground dark:text-foreground rounded-full px-2 py-0.5 font-mono text-[11px] leading-4 whitespace-nowrap"
-        >
+        // eslint-disable-next-line shadcn/no-restyle -- scope names are identifiers, set in mono (item 37)
+        <Badge key={scope} variant="neutral" className="font-mono">
           {scope}
-        </span>
+        </Badge>
       ))}
       {scopes.length > VISIBLE_SCOPES && (
-        <button
+        <Button
           type="button"
+          variant="link"
+          size="xs"
           onClick={() => setExpanded((prev) => !prev)}
           aria-expanded={expanded}
-          title={expanded ? undefined : scopes.slice(VISIBLE_SCOPES).join(', ')}
-          className="text-primary hover:bg-primary/10 cursor-pointer rounded-full px-2 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap"
         >
           {expanded
             ? t('settings.accessTokens.showLess')
             : t('settings.accessTokens.moreScopes', { count: hidden })}
-        </button>
+        </Button>
       )}
     </div>
   );
@@ -78,7 +83,6 @@ function ScopeChips({ scopes }: { scopes: string[] }) {
 export default function PersonalAccessTokens() {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
 
   const [tokens, setTokens] = React.useState<PersonalAccessToken[]>([]);
   const [scopes, setScopes] = React.useState<AccessTokenScope[]>([]);
@@ -186,18 +190,10 @@ export default function PersonalAccessTokens() {
   };
 
   const renderLastUsed = (item: PersonalAccessToken) => {
-    const relative = relativeTime(item.last_used_at);
-    if (!relative || !item.last_used_at) {
+    const label = formatRelative(item.last_used_at, { dateAfterDays: 30 });
+    if (!label || !item.last_used_at) {
       return t('settings.accessTokens.never');
     }
-    const label =
-      relative.unit === 'date'
-        ? formatDateOnly(item.last_used_at)
-        : relative.unit === 'now'
-          ? t('settings.accessTokens.relative.now')
-          : t(`settings.accessTokens.relative.${relative.unit}`, {
-              count: relative.count,
-            });
     const details = [formatDateTime(item.last_used_at), item.last_used_ip]
       .filter(Boolean)
       .join(' · ');
@@ -213,19 +209,12 @@ export default function PersonalAccessTokens() {
     if (status === 'ok') return date;
     const expired = status === 'expired';
     return (
-      <span
-        className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap ${
-          expired
-            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-            : 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300'
-        }`}
-        title={date}
-      >
+      <Badge variant={expired ? 'destructive' : 'warning'} title={date}>
         <TriangleAlert className="size-3 shrink-0" aria-hidden="true" />
         {expired
           ? t('settings.accessTokens.expired', { date, ...NO_ESCAPE })
           : t('settings.accessTokens.expiresSoon', { date, ...NO_ESCAPE })}
-      </span>
+      </Badge>
     );
   };
 
@@ -235,7 +224,7 @@ export default function PersonalAccessTokens() {
         type="button"
         variant="outline"
         size="sm"
-        className="rounded-full px-4"
+        shape="pill"
         onClick={() => setTokenToRegenerate(item)}
         aria-label={t('settings.accessTokens.regenerate.aria', {
           name: item.name,
@@ -249,9 +238,9 @@ export default function PersonalAccessTokens() {
   const renderRevokeButton = (item: PersonalAccessToken) => (
     <Button
       type="button"
-      variant="outline"
+      variant="destructive-outline"
       size="sm"
-      className="text-destructive hover:text-destructive border-destructive/40 hover:bg-destructive/10 rounded-full px-4"
+      shape="pill"
       onClick={() => requestRevoke(item)}
       aria-label={t('settings.accessTokens.revokeAria', {
         name: item.name,
@@ -269,79 +258,62 @@ export default function PersonalAccessTokens() {
   );
 
   const renderEmptyState = () => (
-    <div className="flex w-full flex-col items-center justify-center py-12">
-      <img
-        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-        alt=""
-        className="mx-auto mb-6 h-32 w-32"
-      />
-      <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-        {t('settings.accessTokens.empty')}
-      </p>
-      {policy?.enabled && (
-        <p className="text-muted-foreground mt-2 max-w-md text-center text-sm">
-          {t('settings.accessTokens.emptyHint')}
-        </p>
-      )}
-    </div>
+    <EmptyState
+      title={t('settings.accessTokens.empty')}
+      description={
+        policy?.enabled ? t('settings.accessTokens.emptyHint') : undefined
+      }
+    />
   );
 
-  const mobileField = (label: string, value: React.ReactNode) => (
-    <div className="flex items-start justify-between gap-4 text-sm">
-      <span className="text-muted-foreground shrink-0">{label}</span>
-      <span className="text-foreground dark:text-foreground min-w-0 text-right">
-        {value}
-      </span>
-    </div>
-  );
+  const showDisabledNotice = !!policy && !policy.enabled;
+  const showLimitNotice = !!policy?.enabled && limitReached;
+  const hasNotices = showDisabledNotice || showLimitNotice || !!error;
 
   return (
-    <div className="mt-8">
+    <div>
       <div className="relative flex flex-col">
-        <div className="my-3 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-muted-foreground max-w-2xl text-sm leading-6">
-            {t('settings.accessTokens.subtitle')}
-          </p>
-          {policy?.enabled && (
-            <Button
-              type="button"
-              className="h-11 min-w-[108px] shrink-0 rounded-full whitespace-normal text-white"
-              onClick={() => setCreateOpen(true)}
-              disabled={limitReached}
-              title={
-                limitReached
-                  ? t('settings.accessTokens.limitReached', {
-                      count: policy.max_per_user,
-                    })
-                  : undefined
-              }
-            >
-              {t('settings.accessTokens.createToken')}
-            </Button>
+        <PageToolbar
+          intro={t('settings.accessTokens.subtitle')}
+          action={
+            policy?.enabled ? (
+              <Button
+                type="button"
+                size="field"
+                shape="pill"
+                onClick={() => setCreateOpen(true)}
+                disabled={limitReached}
+              >
+                {t('settings.accessTokens.createToken')}
+              </Button>
+            ) : undefined
+          }
+          divider
+        >
+          {hasNotices && (
+            <div className="mb-6 flex flex-col gap-2">
+              {showDisabledNotice && (
+                <Alert>
+                  <AlertDescription>
+                    {t('settings.accessTokens.disabledNotice')}
+                  </AlertDescription>
+                </Alert>
+              )}
+              {showLimitNotice && policy && (
+                <p className="text-muted-foreground text-xs">
+                  {t('settings.accessTokens.limitReached', {
+                    count: policy.max_per_user,
+                  })}
+                </p>
+              )}
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+            </div>
           )}
-        </div>
-
-        {policy && !policy.enabled && (
-          <Alert className="mt-2">
-            <AlertDescription>
-              {t('settings.accessTokens.disabledNotice')}
-            </AlertDescription>
-          </Alert>
-        )}
-        {policy?.enabled && limitReached && (
-          <p className="text-muted-foreground mt-1 text-xs">
-            {t('settings.accessTokens.limitReached', {
-              count: policy.max_per_user,
-            })}
-          </p>
-        )}
-        {error && (
-          <Alert variant="destructive" className="mt-2">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+        </PageToolbar>
 
         {loading ? (
           <SkeletonLoader component="default" />
@@ -382,7 +354,7 @@ export default function PersonalAccessTokens() {
                     <TableRow key={item.id}>
                       <TableCell className="max-w-[220px]">
                         <p
-                          className="text-foreground dark:text-foreground truncate font-medium"
+                          className="text-foreground truncate font-medium"
                           title={item.name}
                         >
                           {item.name}
@@ -423,12 +395,12 @@ export default function PersonalAccessTokens() {
               {tokens.map((item) => (
                 <li
                   key={item.id}
-                  className="bg-muted/60 flex flex-col gap-3 rounded-2xl p-4"
+                  className="bg-muted flex flex-col gap-3 rounded-2xl p-4"
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0">
                       <p
-                        className="text-foreground dark:text-foreground truncate text-sm font-semibold"
+                        className="text-foreground truncate text-sm font-medium"
                         title={item.name}
                       >
                         {item.name}
@@ -437,24 +409,26 @@ export default function PersonalAccessTokens() {
                     </div>
                   </div>
                   <ScopeChips scopes={item.scopes} />
-                  <div className="flex flex-col gap-1.5">
-                    {mobileField(
-                      t('settings.accessTokens.resources'),
-                      renderRestrictions(item),
-                    )}
-                    {mobileField(
-                      t('settings.accessTokens.createdAt'),
-                      item.created_at ? formatDateOnly(item.created_at) : '-',
-                    )}
-                    {mobileField(
-                      t('settings.accessTokens.lastUsed'),
-                      renderLastUsed(item),
-                    )}
-                    {mobileField(
-                      t('settings.accessTokens.expires'),
-                      renderExpiry(item),
-                    )}
-                  </div>
+                  <DescriptionList layout="justified" size="sm">
+                    <DescriptionItem
+                      label={t('settings.accessTokens.resources')}
+                    >
+                      {renderRestrictions(item)}
+                    </DescriptionItem>
+                    <DescriptionItem
+                      label={t('settings.accessTokens.createdAt')}
+                    >
+                      {item.created_at ? formatDateOnly(item.created_at) : '-'}
+                    </DescriptionItem>
+                    <DescriptionItem
+                      label={t('settings.accessTokens.lastUsed')}
+                    >
+                      {renderLastUsed(item)}
+                    </DescriptionItem>
+                    <DescriptionItem label={t('settings.accessTokens.expires')}>
+                      {renderExpiry(item)}
+                    </DescriptionItem>
+                  </DescriptionList>
                   <div className="flex flex-wrap items-center justify-end gap-2">
                     {renderRegenerateButton(item)}
                     {renderRevokeButton(item)}
@@ -498,7 +472,7 @@ export default function PersonalAccessTokens() {
         setModalState={setRevokeState}
         handleSubmit={confirmRevoke}
         submitLabel={t('settings.accessTokens.revoke')}
-        variant="danger"
+        variant="destructive"
       />
     </div>
   );
diff --git a/frontend/src/settings/Prompts.test.tsx b/frontend/src/settings/Prompts.test.tsx
new file mode 100644
index 00000000..276d589d
--- /dev/null
+++ b/frontend/src/settings/Prompts.test.tsx
@@ -0,0 +1,186 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'test-token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../api/services/userService', () => ({ default: {} }));
+vi.mock('../teams/ShareToTeamModal', () => ({ default: () => null }));
+vi.mock('../preferences/PromptsModal', () => ({ default: () => null }));
+vi.mock('../modals/ConfirmationModal', () => ({ default: () => null }));
+
+import Prompts from './Prompts';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const prompts = [
+  { id: 'p1', name: 'Default', type: 'public' },
+  { id: 'p2', name: 'Vendor due diligence', type: 'private' },
+  { id: 'p3', name: 'Carrier rate summary', type: 'private' },
+];
+
+describe('Prompts', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+  });
+
+  const renderPrompts = (
+    extra: Partial<React.ComponentProps<typeof Prompts>> = {},
+  ) =>
+    act(() => {
+      root.render(
+        <Prompts
+          prompts={prompts}
+          selectedPrompt={prompts[1]}
+          onSelectPrompt={() => undefined}
+          setPrompts={() => undefined}
+          {...extra}
+        />,
+      );
+    });
+
+  it('renders the prompt picker as a 38px combobox field pill', () => {
+    renderPrompts();
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[role="combobox"]',
+    );
+    expect(trigger?.getAttribute('data-variant')).toBe('combobox');
+    expect(trigger?.getAttribute('data-size')).toBe('field');
+    expect(trigger?.getAttribute('data-shape')).toBe('pill');
+    expect(trigger?.className).toMatch(/(^|\s)h-9\.5(\s|$)/);
+    expect(trigger?.className).not.toMatch(/(^|\s)h-10\.5(\s|$)/);
+  });
+
+  it('puts the edit pencil beside the picker, not inside it', () => {
+    renderPrompts();
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[role="combobox"]',
+    );
+    expect(trigger?.querySelector('[role="button"], button')).toBeNull();
+    const edit = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="settings.general.promptActions.edit"]',
+    );
+    expect(edit).not.toBeNull();
+    expect(edit?.getAttribute('data-variant')).toBe('ghost-muted');
+    expect(edit?.getAttribute('data-size')).toBe('icon-xs');
+    expect(edit?.parentElement).toBe(trigger?.parentElement);
+  });
+
+  it('renders a SettingRow on Settings whose label names the picker', () => {
+    renderPrompts({ description: 'Used without an agent.' });
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[role="combobox"]',
+    )!;
+    expect(
+      container.querySelector('[data-slot="form-field-label"]'),
+    ).toBeNull();
+    const row = container.querySelector('[data-slot="setting-row"]')!;
+    const label = row.querySelector<HTMLLabelElement>('label')!;
+    expect(label.textContent).toBe('settings.general.prompt');
+    expect(label.htmlFor).toBe(trigger.id);
+    expect(row.textContent).toContain('Used without an agent.');
+    expect(trigger.hasAttribute('aria-label')).toBe(false);
+    // 224px from sm, full width when the row stacks on a phone.
+    expect(trigger.className.split(' ')).toEqual(
+      expect.arrayContaining(['w-full', 'sm:w-56']),
+    );
+  });
+
+  it('keeps a section heading above the picker with titleAs="heading"', () => {
+    renderPrompts({
+      titleAs: 'heading',
+      title: 'Prompt',
+    });
+    expect(
+      container.querySelector('[data-slot="form-field-label"]'),
+    ).toBeNull();
+    const heading = container.querySelector(
+      '[data-slot="section-header"] > h2',
+    )!;
+    expect(heading.textContent).toBe('Prompt');
+    expect(heading.className.split(' ')).toEqual(
+      expect.arrayContaining(['text-lg', 'font-semibold']),
+    );
+    expect(
+      container
+        .querySelector('button[role="combobox"]')
+        ?.getAttribute('aria-label'),
+    ).toBe('Prompt');
+  });
+
+  it('makes Add a neutral outline pill sized to the field row', () => {
+    renderPrompts();
+    const add = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('[data-slot="button"]'),
+    ).find((b) => b.textContent === 'settings.general.add');
+    expect(add?.getAttribute('data-size')).toBe('field');
+    expect(add?.getAttribute('data-shape')).toBe('pill');
+    expect(add?.getAttribute('data-variant')).toBe('outline');
+    expect(add?.className).not.toMatch(/(^|\s)h-11\.5(\s|$)/);
+  });
+
+  it('marks only the active prompt as checked in the list', () => {
+    act(() => {
+      root.render(
+        <Prompts
+          prompts={prompts}
+          selectedPrompt={prompts[1]}
+          onSelectPrompt={() => undefined}
+          setPrompts={() => undefined}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[role="combobox"]',
+    );
+    expect(trigger).not.toBeNull();
+    act(() => {
+      trigger!.dispatchEvent(
+        new PointerEvent('pointerdown', { bubbles: true, button: 0 }),
+      );
+      trigger!.click();
+    });
+
+    const items = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[data-slot="command-item"]'),
+    );
+    expect(items).toHaveLength(3);
+
+    const byName = (name: string) =>
+      items.find((item) => item.textContent?.includes(name));
+    expect(byName('Vendor due diligence')?.dataset.checked).toBe('true');
+    expect(byName('Default')?.dataset.checked).toBeUndefined();
+    expect(byName('Carrier rate summary')?.dataset.checked).toBeUndefined();
+    // The fill comes from the checked API, not from page classes.
+    expect(byName('Vendor due diligence')?.className).not.toMatch(
+      /(^|\s)(bg-accent|font-medium)(\s|$)/,
+    );
+    // Row actions are IconButtons: named, with a tooltip instead of `title`.
+    const actions = Array.from(
+      byName('Vendor due diligence')!.querySelectorAll('button'),
+    );
+    expect(actions.length).toBeGreaterThan(0);
+    for (const action of actions) {
+      expect(action.getAttribute('aria-label')).toBeTruthy();
+      expect(action.hasAttribute('title')).toBe(false);
+      expect(action.dataset.slot).toBe('tooltip-trigger');
+    }
+  });
+});
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index af264a22..a012b498 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -12,11 +12,14 @@ import {
   CommandList,
 } from '../components/ui/command';
 import { Button } from '../components/ui/button';
+import { IconButton } from '../components/ui/icon-button';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '../components/ui/popover';
+import { SectionHeader } from '../components/ui/section-header';
+import { SettingRow } from '../components/ui/setting-row';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, PromptProps } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -26,12 +29,17 @@ import { cn } from '@/lib/utils';
 
 type PromptsDropdownProps = {
   className?: string;
-  contentClassName?: string;
 };
 
 type ExtendedPromptProps = PromptProps & {
   title?: string;
-  titleClassName?: string;
+  /**
+   * `row` (Settings → General): a SettingRow whose label names the picker.
+   * `heading` (the agent form): the title is a section heading above it.
+   */
+  titleAs?: 'row' | 'heading';
+  /** The row's muted description, for `titleAs="row"`. */
+  description?: string;
   dropdownProps?: PromptsDropdownProps;
   showAddButton?: boolean;
 };
@@ -42,12 +50,15 @@ export default function Prompts({
   onSelectPrompt,
   setPrompts,
   title,
-  titleClassName = 'dark:text-foreground font-medium',
+  titleAs = 'row',
+  description,
   dropdownProps = {},
   showAddButton = true,
 }: ExtendedPromptProps) {
   const token = useSelector(selectToken);
   const { t } = useTranslation();
+  const pickerId = React.useId();
+  const titleText = title ? title : t('settings.general.prompt');
   const [newPromptName, setNewPromptName] = React.useState('');
   const [newPromptContent, setNewPromptContent] = React.useState('');
   const [editPromptName, setEditPromptName] = React.useState('');
@@ -261,203 +272,199 @@ export default function Prompts({
       });
   };
 
-  const pillClassName = cn(
-    'border-border bg-card text-foreground hover:bg-accent flex w-56 items-stretch rounded-3xl border text-sm transition-colors',
-    dropdownProps.className,
+  const picker = (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="combobox"
+          size="field"
+          shape="pill"
+          id={pickerId}
+          role="combobox"
+          aria-expanded={open}
+          aria-label={titleAs === 'heading' ? titleText : undefined}
+          data-placeholder={selectedPrompt?.name ? undefined : ''}
+          className={cn(
+            'w-full min-w-0 justify-between',
+            titleAs === 'row' && 'sm:w-56',
+          )}
+        >
+          <span className="truncate">
+            {selectedPrompt?.name || t('settings.general.promptActions.select')}
+          </span>
+          <span className="text-muted-foreground">
+            <ChevronDown
+              className={cn(
+                'transition-transform duration-200',
+                open && 'rotate-180',
+              )}
+            />
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-(--radix-popover-trigger-width) p-0"
+      >
+        <Command>
+          <CommandInput
+            placeholder={t('settings.sources.searchPlaceholder')}
+            className="h-9"
+          />
+          <CommandList>
+            <CommandEmpty>{t('settings.sources.noResults')}</CommandEmpty>
+            {prompts.map((prompt) => {
+              const isActive = selectedPrompt?.id === prompt.id;
+              const canModify = prompt.type !== 'public';
+              // Sharing is an owner-only action: hide it for public
+              // prompts and prompts shared into the workspace by a
+              // team.
+              const canShare =
+                prompt.type !== 'public' && prompt.type !== 'team';
+              return (
+                <CommandItem
+                  key={prompt.id}
+                  value={prompt.name}
+                  checked={isActive}
+                  onSelect={() => handleSelectPrompt(prompt)}
+                  className="flex items-center justify-between"
+                >
+                  <span className="truncate">{prompt.name}</span>
+                  <div className="flex shrink-0 items-center gap-1">
+                    <IconButton
+                      variant="ghost-on-accent"
+                      size="icon-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEditModal(prompt);
+                      }}
+                      label={
+                        canModify
+                          ? t('settings.general.promptActions.edit')
+                          : t('settings.general.promptActions.view')
+                      }
+                    >
+                      {canModify ? (
+                        <Pencil className="text-current" aria-hidden="true" />
+                      ) : (
+                        <Eye className="text-current" aria-hidden="true" />
+                      )}
+                    </IconButton>
+                    <IconButton
+                      variant="ghost-on-accent"
+                      size="icon-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDuplicatePrompt(prompt);
+                      }}
+                      label={t('settings.general.promptActions.duplicate')}
+                    >
+                      <Copy className="text-current" aria-hidden="true" />
+                    </IconButton>
+                    {canShare && (
+                      <IconButton
+                        variant="ghost-on-accent"
+                        size="icon-xs"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setOpen(false);
+                          setPromptToShare({
+                            id: prompt.id,
+                            name: prompt.name,
+                          });
+                        }}
+                        label={t('agents.shareWithTeam')}
+                      >
+                        <Users className="text-current" aria-hidden="true" />
+                      </IconButton>
+                    )}
+                    {canModify && (
+                      <IconButton
+                        variant="ghost-destructive-on-accent"
+                        size="icon-xs"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeletePrompt(prompt.id);
+                        }}
+                        label={t('settings.general.promptActions.delete')}
+                      >
+                        <Trash2 className="text-current" aria-hidden="true" />
+                      </IconButton>
+                    )}
+                  </div>
+                </CommandItem>
+              );
+            })}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+
+  const editButton = selectedPrompt?.id && selectedPrompt.type !== 'public' && (
+    <IconButton
+      variant="ghost-muted"
+      size="icon-xs"
+      shape="pill"
+      onClick={() => openEditModal(selectedPrompt)}
+      label={t('settings.general.promptActions.edit')}
+      icon={Pencil}
+    />
+  );
+
+  // A prompt that belongs to this field, so a neutral pill rather than the
+  // primary one reserved for a page's own action.
+  const addButton = showAddButton && (
+    <Button
+      type="button"
+      variant="outline"
+      size="field"
+      shape="pill"
+      onClick={() => {
+        setModalType('ADD');
+        setDuplicateSource(null);
+        setModalState('ACTIVE');
+      }}
+    >
+      {t('settings.general.add')}
+    </Button>
   );
 
   return (
     <>
-      <div>
+      {titleAs === 'row' ? (
+        <SettingRow
+          label={titleText}
+          description={description}
+          htmlFor={pickerId}
+          stack
+        >
+          <div className="flex items-center gap-2">
+            <div className="flex min-w-0 flex-1 items-center gap-1 sm:flex-none">
+              {picker}
+              {editButton}
+            </div>
+            {addButton}
+          </div>
+        </SettingRow>
+      ) : (
         <div className="flex flex-col gap-3">
-          <p className={titleClassName}>
-            {title ? title : t('settings.general.prompt')}
-          </p>
+          <SectionHeader as="h2" title={titleText} />
           <div className="flex flex-row flex-wrap items-end justify-start gap-6">
-            <Popover open={open} onOpenChange={setOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  type="button"
-                  aria-label="Toggle prompt list"
-                  className={cn(
-                    pillClassName,
-                    'focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
-                  )}
-                >
-                  <span
-                    className={cn(
-                      'flex min-w-0 flex-1 items-center py-3 pl-5 text-left',
-                      !selectedPrompt?.name && 'text-muted-foreground',
-                    )}
-                  >
-                    <span className="truncate">
-                      {selectedPrompt?.name || 'Select a prompt'}
-                    </span>
-                  </span>
-                  {selectedPrompt?.id && selectedPrompt.type !== 'public' && (
-                    <>
-                      <span
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          openEditModal(selectedPrompt);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            openEditModal(selectedPrompt);
-                          }
-                        }}
-                        className="text-muted-foreground hover:bg-foreground/15 hover:text-foreground dark:hover:bg-foreground/20 focus-visible:ring-ring/50 mx-1 my-auto shrink-0 rounded-full p-1.5 transition-colors outline-none focus-visible:ring-[3px]"
-                        aria-label="Edit prompt"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </span>
-                      <span
-                        className="bg-border my-2.5 w-px shrink-0"
-                        aria-hidden="true"
-                      />
-                    </>
-                  )}
-                  <span className="text-muted-foreground hover:bg-foreground/15 hover:text-foreground dark:hover:bg-foreground/20 my-auto mr-2.5 ml-1 shrink-0 rounded-full p-1.5 transition-colors">
-                    <ChevronDown
-                      className={cn(
-                        'h-4 w-4 transition-transform',
-                        open && 'rotate-180',
-                      )}
-                    />
-                  </span>
-                </button>
-              </PopoverTrigger>
-              <PopoverContent
-                align="start"
-                className={cn(
-                  'w-(--radix-popover-trigger-width) p-0',
-                  dropdownProps.contentClassName,
-                )}
-              >
-                <Command>
-                  <CommandInput
-                    placeholder={t('settings.sources.searchPlaceholder')}
-                    className="h-9"
-                  />
-                  <CommandList>
-                    <CommandEmpty>
-                      {t('settings.sources.noResults')}
-                    </CommandEmpty>
-                    {prompts.map((prompt) => {
-                      const isActive = selectedPrompt?.id === prompt.id;
-                      const canModify = prompt.type !== 'public';
-                      // Sharing is an owner-only action: hide it for public
-                      // prompts and prompts shared into the workspace by a
-                      // team.
-                      const canShare =
-                        prompt.type !== 'public' && prompt.type !== 'team';
-                      return (
-                        <CommandItem
-                          key={prompt.id}
-                          value={prompt.name}
-                          onSelect={() => handleSelectPrompt(prompt)}
-                          className={cn(
-                            'flex items-center justify-between gap-2',
-                            isActive && 'bg-accent font-medium',
-                          )}
-                        >
-                          <span className="truncate">{prompt.name}</span>
-                          <div className="flex shrink-0 items-center gap-1">
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                openEditModal(prompt);
-                              }}
-                              className="group/btn hover:bg-foreground/15 dark:hover:bg-foreground/20 h-auto w-auto rounded p-1"
-                              aria-label={
-                                canModify ? 'Edit prompt' : 'View prompt'
-                              }
-                            >
-                              {canModify ? (
-                                <Pencil className="text-muted-foreground group-hover/btn:text-foreground h-3.5 w-3.5" />
-                              ) : (
-                                <Eye className="text-muted-foreground group-hover/btn:text-foreground h-3.5 w-3.5" />
-                              )}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleDuplicatePrompt(prompt);
-                              }}
-                              className="group/btn hover:bg-foreground/15 dark:hover:bg-foreground/20 h-auto w-auto rounded p-1"
-                              aria-label="Duplicate prompt"
-                            >
-                              <Copy className="text-muted-foreground group-hover/btn:text-foreground h-3.5 w-3.5" />
-                            </Button>
-                            {canShare && (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon-sm"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setOpen(false);
-                                  setPromptToShare({
-                                    id: prompt.id,
-                                    name: prompt.name,
-                                  });
-                                }}
-                                className="group/btn hover:bg-foreground/15 dark:hover:bg-foreground/20 h-auto w-auto rounded p-1"
-                                aria-label={t('agents.shareWithTeam')}
-                                title={t('agents.shareWithTeam')}
-                              >
-                                <Users className="text-muted-foreground group-hover/btn:text-foreground h-3.5 w-3.5" />
-                              </Button>
-                            )}
-                            {canModify && (
-                              <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon-sm"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDeletePrompt(prompt.id);
-                                }}
-                                className="group/btn hover:bg-destructive/15 dark:hover:bg-destructive/25 h-auto w-auto rounded p-1"
-                                aria-label="Delete prompt"
-                              >
-                                <Trash2 className="text-muted-foreground group-hover/btn:text-destructive h-3.5 w-3.5" />
-                              </Button>
-                            )}
-                          </div>
-                        </CommandItem>
-                      );
-                    })}
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-            {showAddButton && (
-              <Button
-                type="button"
-                className="h-auto w-20 rounded-3xl border border-transparent py-3"
-                onClick={() => {
-                  setModalType('ADD');
-                  setDuplicateSource(null);
-                  setModalState('ACTIVE');
-                }}
-              >
-                {t('settings.general.add')}
-              </Button>
-            )}
+            <div
+              className={cn(
+                'flex w-56 items-center gap-1',
+                dropdownProps.className,
+              )}
+            >
+              {picker}
+              {editButton}
+            </div>
+            {addButton}
           </div>
         </div>
-      </div>
+      )}
       <PromptsModal
         existingPrompts={prompts}
         type={modalType}
@@ -487,7 +494,7 @@ export default function Prompts({
           submitLabel={t('modals.deleteConv.delete')}
           handleSubmit={confirmDeletePrompt}
           handleCancel={() => setPromptToDelete(null)}
-          variant="danger"
+          variant="destructive"
         />
       )}
       {promptToShare && (
diff --git a/frontend/src/settings/RemoteDeviceConfig.test.tsx b/frontend/src/settings/RemoteDeviceConfig.test.tsx
new file mode 100644
index 00000000..8837d77e
--- /dev/null
+++ b/frontend/src/settings/RemoteDeviceConfig.test.tsx
@@ -0,0 +1,123 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../components/ToolIcon', () => ({ default: () => null }));
+vi.mock('../components/CopyButton', () => ({ default: () => null }));
+vi.mock('../navigation/DetailBreadcrumb', () => ({ default: () => null }));
+vi.mock('../modals/ConfirmationModal', () => ({ default: () => null }));
+
+const getDevice = vi.fn();
+vi.mock('../api/services/devicesService', () => ({
+  default: {
+    get: (...args: unknown[]) => getDevice(...args),
+    listAudit: () => Promise.resolve({ entries: [] }),
+  },
+}));
+
+import type { Device } from '../api/services/devicesService';
+import type { UserToolType } from './types';
+import RemoteDeviceConfig from './RemoteDeviceConfig';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const tool = {
+  id: 'tool-1',
+  name: 'remote_device',
+  displayName: 'Remote device',
+  config: { device_id: 'dev-1' },
+} as unknown as UserToolType;
+
+const device = (overrides: Partial<Device>): Device => ({
+  id: 'dev-1',
+  name: 'Laptop',
+  approval_mode: 'ask',
+  status: 'active',
+  last_seen_at: null,
+  ...overrides,
+});
+
+describe('RemoteDeviceConfig', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    getDevice.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = async (d: Device) => {
+    getDevice.mockResolvedValue(d);
+    await act(async () => {
+      root.render(<RemoteDeviceConfig tool={tool} handleGoBack={() => {}} />);
+    });
+  };
+
+  const badges = () =>
+    Array.from(container.querySelectorAll<HTMLElement>('[data-slot="badge"]'));
+
+  it('shows an online device as a success badge', async () => {
+    await render(device({ last_seen_at: new Date().toISOString() }));
+    const pill = badges().find((el) =>
+      el.textContent?.includes('settings.devices.online'),
+    );
+    expect(pill?.dataset.variant).toBe('success');
+  });
+
+  it('shows an offline device as a neutral badge', async () => {
+    await render(device({}));
+    const pill = badges().find((el) =>
+      el.textContent?.includes('settings.devices.offline'),
+    );
+    expect(pill?.dataset.variant).toBe('neutral');
+  });
+
+  it('marks full approval with a destructive badge and alert', async () => {
+    await render(device({ approval_mode: 'full' }));
+    const pill = badges().find((el) =>
+      el.textContent?.includes('settings.devices.approvalFull'),
+    );
+    expect(pill?.dataset.variant).toBe('destructive');
+
+    const warning = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="alert"]'),
+    ).find((el) =>
+      el.textContent?.includes('settings.devices.fullAccessWarning'),
+    );
+    expect(warning?.className).toContain('text-destructive');
+    expect(warning?.querySelector('svg')).not.toBeNull();
+  });
+
+  it('draws Revoke as an outlined destructive pill', async () => {
+    await render(device({}));
+    const revoke = Array.from(
+      container.querySelectorAll<HTMLElement>('button'),
+    ).find((el) => el.textContent === 'settings.devices.revoke');
+    expect(revoke?.dataset.variant).toBe('destructive-outline');
+    expect(revoke?.dataset.shape).toBe('pill');
+  });
+
+  it('boxes the danger zone in a destructive Card', async () => {
+    await render(device({}));
+    const revoke = Array.from(
+      container.querySelectorAll<HTMLElement>('button'),
+    ).find((el) => el.textContent === 'settings.devices.revoke');
+    const box = revoke?.closest<HTMLElement>('[data-slot="card"]');
+    expect(box?.dataset.tone).toBe('destructive');
+    expect(box?.dataset.padding).toBe('default');
+  });
+});
diff --git a/frontend/src/settings/RemoteDeviceConfig.tsx b/frontend/src/settings/RemoteDeviceConfig.tsx
index afc04833..42483cfb 100644
--- a/frontend/src/settings/RemoteDeviceConfig.tsx
+++ b/frontend/src/settings/RemoteDeviceConfig.tsx
@@ -1,3 +1,4 @@
+import { ShieldAlert } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,7 +9,6 @@ import devicesService, {
   Device,
 } from '../api/services/devicesService';
 import CopyButton from '../components/CopyButton';
-import Spinner from '../components/Spinner';
 import ToolIcon from '../components/ToolIcon';
 import DetailBreadcrumb from '../navigation/DetailBreadcrumb';
 import {
@@ -18,8 +18,17 @@ import {
   AccordionTrigger,
 } from '../components/ui/accordion';
 import { Alert, AlertDescription } from '../components/ui/alert';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Card } from '../components/ui/card';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../components/ui/description-list';
+import { FormField } from '../components/ui/form-field';
 import { Input } from '../components/ui/input';
+import { LoadingState } from '../components/ui/loading-state';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -185,15 +194,11 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
       : '');
 
   if (loading && !device) {
-    return (
-      <div className="mt-8 flex items-center justify-center py-16">
-        <Spinner size="large" />
-      </div>
-    );
+    return <LoadingState fill="block" size="lg" />;
   }
 
   return (
-    <div className="scrollbar-overlay mt-8 flex flex-col gap-6">
+    <div className="scrollbar-overlay flex flex-col gap-6">
       <div className="mb-4 flex items-center justify-between gap-3">
         <DetailBreadcrumb
           parentLabel={t('settings.tools.label')}
@@ -204,11 +209,13 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
         />
         <Button
           type="button"
-          className="rounded-full px-3 py-2 text-xs text-nowrap text-white sm:px-4 sm:py-2"
+          size="sm"
+          shape="pill"
           onClick={handleSaveChanges}
-          disabled={!hasUnsavedChanges || saving || loading}
+          disabled={!hasUnsavedChanges || loading}
+          loading={saving}
         >
-          {saving ? t('settings.tools.saving') : t('settings.tools.save')}
+          {t('settings.tools.save')}
         </Button>
       </div>
 
@@ -221,78 +228,73 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
       <div className="flex flex-wrap items-center gap-3">
         <ToolIcon
           name={tool.name}
-          title={`${tool.displayName} icon`}
-          className="h-7 w-7"
+          title={t('settings.tools.toolIconTitle', { name: tool.displayName })}
+          className="size-7"
         />
-        <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-          {device?.name || tool.customName || tool.displayName || 'device'}
+        <h2 className="text-foreground text-xl leading-tight font-semibold">
+          {device?.name ||
+            tool.customName ||
+            tool.displayName ||
+            t('settings.devices.fallbackName')}
         </h2>
-        <span
-          className={`rounded-full px-3 py-0.5 text-xs font-medium ${
-            online
-              ? 'bg-green-100 text-green-900 dark:bg-green-900/30 dark:text-green-300'
-              : 'bg-gray-200 text-gray-700 dark:bg-gray-700/40 dark:text-gray-300'
-          }`}
-        >
-          {pillText}
-        </span>
+        <Badge variant={online ? 'success' : 'neutral'}>{pillText}</Badge>
         {approvalMode === 'full' && (
-          <span className="rounded-full bg-red-200 px-3 py-0.5 text-xs font-medium text-red-900 dark:bg-red-900/40 dark:text-red-300">
+          <Badge variant="destructive">
             {t('settings.devices.approvalFull')}
-          </span>
+          </Badge>
         )}
       </div>
 
       {/* Identity */}
-      <section className="flex flex-col gap-4">
-        <h3 className="text-foreground dark:text-foreground text-sm font-semibold">
-          {t('settings.devices.identity')}
-        </h3>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <label className="text-muted-foreground w-32 shrink-0 pt-2 text-sm">
-            {t('settings.devices.nameLabel')}
-          </label>
-          <div className="w-full max-w-[340px]">
-            <Input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder={t('settings.devices.nameLabel')}
-              className="rounded-xl"
-            />
-          </div>
-        </div>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <label className="text-muted-foreground w-32 shrink-0 pt-2 text-sm">
-            {t('settings.devices.descriptionLabel')}
-          </label>
-          <div className="w-full max-w-[340px]">
-            <Input
-              type="text"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder={t('settings.devices.descriptionPlaceholder')}
-              className="rounded-xl"
-            />
-          </div>
-        </div>
+      <section className="flex flex-col gap-5">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('settings.devices.identity')}
+        />
+        <FormField
+          label={t('settings.devices.nameLabel')}
+          labelSurface="background"
+          className="w-full max-w-[340px]"
+        >
+          <Input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </FormField>
+        <FormField
+          label={t('settings.devices.descriptionLabel')}
+          labelSurface="background"
+          className="w-full max-w-[340px]"
+        >
+          <Input
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t('settings.devices.descriptionPlaceholder')}
+          />
+        </FormField>
       </section>
 
       {/* Access */}
-      <section className="flex flex-col gap-4">
-        <h3 className="text-foreground dark:text-foreground text-sm font-semibold">
-          {t('settings.devices.access')}
-        </h3>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <label className="text-muted-foreground w-32 shrink-0 pt-2 text-sm">
-            {t('settings.devices.approvalMode')}
-          </label>
-          <div className="flex w-full max-w-[340px] flex-col gap-2">
+      <section className="flex flex-col gap-5">
+        <SectionHeader as="h3" size="xs" title={t('settings.devices.access')} />
+        <div className="flex w-full max-w-[340px] flex-col gap-2">
+          <FormField
+            label={t('settings.devices.approvalMode')}
+            labelSurface="background"
+            hint={
+              approvalMode === 'full'
+                ? t('settings.devices.approvalFullDescription')
+                : t('settings.devices.approvalAskDescription')
+            }
+          >
             <Select
               value={approvalMode}
               onValueChange={(value) => setApprovalMode(value as ApprovalMode)}
             >
-              <SelectTrigger className="w-full rounded-xl px-4 py-2" size="lg">
+              <SelectTrigger className="w-full" size="field">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -304,57 +306,46 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
                 </SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-muted-foreground text-xs">
-              {approvalMode === 'full'
-                ? t('settings.devices.approvalFullDescription')
-                : t('settings.devices.approvalAskDescription')}
-            </p>
-            {approvalMode === 'full' && (
-              <div className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400">
+          </FormField>
+          {approvalMode === 'full' && (
+            <Alert variant="destructive">
+              <ShieldAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
                 {t('settings.devices.fullAccessWarning')}
-              </div>
-            )}
-          </div>
+              </AlertDescription>
+            </Alert>
+          )}
         </div>
       </section>
 
       {/* Connection */}
       <section className="flex flex-col gap-4">
-        <h3 className="text-foreground dark:text-foreground text-sm font-semibold">
-          {t('settings.devices.connection')}
-        </h3>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <span className="text-muted-foreground w-32 shrink-0 pt-px text-sm">
-            {t('settings.devices.hostLabel')}
-          </span>
-          <div className="text-muted-foreground w-full max-w-md text-sm">
-            <span className="font-mono">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('settings.devices.connection')}
+        />
+        <DescriptionList layout="columns" size="sm">
+          <DescriptionItem label={t('settings.devices.hostLabel')}>
+            <span className="font-mono text-xs">
               {device?.hostname || 'unknown host'}
             </span>
             {device?.os ? ` · ${device.os}` : ''}
             {device?.arch ? ` · ${device.arch}` : ''}
             {device?.cli_version ? ` · cli ${device.cli_version}` : ''}
-          </div>
-        </div>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <span className="text-muted-foreground w-32 shrink-0 pt-1 text-sm">
-            {t('settings.devices.deviceIdLabel')}
-          </span>
-          <div className="flex w-full max-w-md flex-wrap items-center gap-2">
-            <code className="text-foreground dark:text-foreground bg-muted max-w-full truncate rounded px-2 py-0.5 font-mono text-xs">
-              {deviceId || '-'}
-            </code>
-            {deviceId && <CopyButton textToCopy={deviceId} />}
-          </div>
-        </div>
-        <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:gap-4">
-          <span className="text-muted-foreground w-32 shrink-0 pt-px text-sm">
-            {t('settings.devices.lastSeenLabel')}
-          </span>
-          <div className="text-muted-foreground w-full max-w-md text-sm">
+          </DescriptionItem>
+          <DescriptionItem label={t('settings.devices.deviceIdLabel')}>
+            <div className="flex flex-wrap items-center gap-2">
+              <code className="text-foreground bg-muted max-w-full truncate rounded px-2 py-0.5 font-mono text-xs">
+                {deviceId || '-'}
+              </code>
+              {deviceId && <CopyButton textToCopy={deviceId} />}
+            </div>
+          </DescriptionItem>
+          <DescriptionItem label={t('settings.devices.lastSeenLabel')}>
             {formatTimestamp(device?.last_seen_at)}
-          </div>
-        </div>
+          </DescriptionItem>
+        </DescriptionList>
         {!online && (
           <p className="text-muted-foreground text-xs">
             {t('settings.devices.offlineHint')}
@@ -364,81 +355,93 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
 
       {/* Recent activity */}
       <section className="flex flex-col gap-3">
-        <h3 className="text-foreground dark:text-foreground text-sm font-semibold">
-          {t('settings.devices.auditTitle')}
-        </h3>
-        <Accordion
-          type="single"
-          collapsible
-          onValueChange={handleAuditToggle}
-          className="border-border dark:border-border w-full rounded-xl border"
-        >
-          <AccordionItem value="audit" className="border-b-0">
-            <AccordionTrigger className="px-4 py-3 text-sm font-semibold">
-              {t('settings.devices.auditTitle')}
-              {audit !== null ? ` (${audit.length})` : ''}
-            </AccordionTrigger>
-            <AccordionContent className="px-4 pb-4">
-              {auditLoading ? (
-                <p className="text-muted-foreground py-2 text-sm">
-                  {t('settings.devices.auditLoading')}
-                </p>
-              ) : !audit || audit.length === 0 ? (
-                <p className="text-muted-foreground py-2 text-sm">
-                  {t('settings.devices.auditEmpty')}
-                </p>
-              ) : (
-                <ul className="flex flex-col gap-2">
-                  {audit.map((entry) => (
-                    <li
-                      key={entry.id}
-                      className="bg-muted/40 flex flex-col gap-1 rounded-md px-3 py-2 text-xs"
-                    >
-                      <code className="text-foreground dark:text-foreground block font-mono break-all whitespace-pre-wrap">
-                        {entry.command}
-                      </code>
-                      <div className="text-muted-foreground flex flex-wrap gap-3">
-                        <span>
-                          {t('settings.devices.auditDecision')}:{' '}
-                          {entry.decision}
-                        </span>
-                        <span>
-                          {t('settings.devices.auditExit')}:{' '}
-                          {entry.exit_code ?? '-'}
-                        </span>
-                        <span>
-                          {t('settings.devices.auditDuration')}:{' '}
-                          {entry.duration_ms ?? '-'} ms
-                        </span>
-                        <span>{formatTimestamp(entry.created_at)}</span>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('settings.devices.auditTitle')}
+        />
+        <div className="border-border w-full rounded-xl border">
+          <Accordion
+            type="single"
+            collapsible
+            onValueChange={handleAuditToggle}
+          >
+            <AccordionItem value="audit">
+              <AccordionTrigger>
+                {t('settings.devices.auditTitle')}
+                {audit !== null ? ` (${audit.length})` : ''}
+              </AccordionTrigger>
+              <AccordionContent>
+                {auditLoading ? (
+                  <p className="text-muted-foreground py-2 text-sm">
+                    {t('settings.devices.auditLoading')}
+                  </p>
+                ) : !audit || audit.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-sm">
+                    {t('settings.devices.auditEmpty')}
+                  </p>
+                ) : (
+                  <ul className="flex flex-col gap-2">
+                    {audit.map((entry) => (
+                      <li
+                        key={entry.id}
+                        className="bg-muted flex flex-col gap-1 rounded-md px-3 py-2 text-xs"
+                      >
+                        <code className="text-foreground block font-mono break-all whitespace-pre-wrap">
+                          {entry.command}
+                        </code>
+                        <div className="text-muted-foreground flex flex-wrap gap-3">
+                          <span>
+                            {t('settings.devices.auditDecision')}:{' '}
+                            {entry.decision}
+                          </span>
+                          <span>
+                            {t('settings.devices.auditExit')}:{' '}
+                            {entry.exit_code ?? '-'}
+                          </span>
+                          <span>
+                            {t('settings.devices.auditDuration')}:{' '}
+                            {t('settings.devices.auditDurationValue', {
+                              value: entry.duration_ms ?? '-',
+                            })}
+                          </span>
+                          <span>{formatTimestamp(entry.created_at)}</span>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
       </section>
 
       {/* Danger zone */}
       <section className="flex flex-col gap-3">
-        <h3 className="text-destructive text-sm font-semibold">
-          {t('settings.devices.dangerZone')}
-        </h3>
-        <div className="border-destructive/40 flex flex-col gap-3 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          tone="destructive"
+          title={t('settings.devices.dangerZone')}
+        />
+        <Card
+          tone="destructive"
+          className="sm:flex-row sm:items-center sm:justify-between"
+        >
           <p className="text-muted-foreground text-sm">
             {t('settings.devices.dangerZoneDescription')}
           </p>
           <Button
             type="button"
-            variant="destructive"
-            className="shrink-0 rounded-full px-5 text-white"
+            variant="destructive-outline"
+            shape="pill"
+            className="shrink-0"
             onClick={() => setRevokeState('ACTIVE')}
           >
             {t('settings.devices.revoke')}
           </Button>
-        </div>
+        </Card>
       </section>
 
       <ConfirmationModal
@@ -451,7 +454,7 @@ export default function RemoteDeviceConfig({ tool, handleGoBack }: Props) {
         setModalState={setRevokeState}
         handleSubmit={handleRevoke}
         submitLabel={t('settings.devices.revoke')}
-        variant="danger"
+        variant="destructive"
       />
     </div>
   );
diff --git a/frontend/src/settings/SourceConfigModal.tsx b/frontend/src/settings/SourceConfigModal.tsx
index 50e9a117..3942e113 100644
--- a/frontend/src/settings/SourceConfigModal.tsx
+++ b/frontend/src/settings/SourceConfigModal.tsx
@@ -1,11 +1,11 @@
+import { CircleAlert, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
-import { Button } from '../components/ui/button';
-import { Modal } from '../components/ui/modal';
+import { Alert, AlertDescription } from '../components/ui/alert';
+import { Modal, ModalActions } from '../components/ui/modal';
 import { ActiveState, Doc } from '../models/misc';
 import type { Model } from '../models/types';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -141,126 +141,92 @@ export default function SourceConfigModal({
   // The backend rejects an incoherent prescreen config; block save up-front.
   const prescreenValid = isPrescreenConfigValid(options);
 
+  const footer = reingestPrompt ? (
+    <ModalActions
+      cancelLabel={t('settings.sources.configModal.reingestLater')}
+      onCancel={closeModal}
+      submitLabel={t('settings.sources.reingest')}
+      onSubmit={handleConfirmReingest}
+    />
+  ) : (
+    <ModalActions
+      cancelLabel={t('cancel')}
+      onCancel={closeModal}
+      cancelProps={{ disabled: saving }}
+      submitLabel={t('settings.sources.configModal.save')}
+      onSubmit={handleSave}
+      pending={saving}
+      disabled={isReadOnly || !hasChanges || !prescreenValid}
+    />
+  );
+
   return (
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={t('settings.sources.configModal.title')}
+      description={
+        document?.name
+          ? t('settings.sources.configModal.subtitle', {
+              name: document.name,
+            })
+          : t('settings.sources.configModal.subtitleGeneric')
+      }
+      footer={footer}
       size="lg"
       mobileVariant="sheet"
-      className="max-h-[90vh] max-w-[600px] md:w-[80vw] lg:w-[60vw]"
-      contentClassName="max-h-[80vh]"
       isPerformingTask={saving}
     >
-      <div className="flex h-full flex-col">
-        <div className="px-2 py-2">
-          <h2 className="text-foreground dark:text-foreground text-xl font-semibold">
-            {t('settings.sources.configModal.title')}
-          </h2>
-          <p className="text-muted-foreground mt-2 text-sm">
-            {document?.name
-              ? t('settings.sources.configModal.subtitle', {
-                  name: document.name,
-                })
-              : t('settings.sources.configModal.subtitleGeneric')}
-          </p>
-        </div>
-
-        <div className="flex-1 px-2">
-          {reingestPrompt ? (
-            <div className="flex flex-col gap-4 px-0.5 py-4">
-              <div className="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
+      <div>
+        {reingestPrompt ? (
+          <div className="flex flex-col gap-4">
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
                 {t('settings.sources.configModal.reingestRequired')}
+              </AlertDescription>
+            </Alert>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {isReadOnly && (
+              <div className="bg-muted text-muted-foreground rounded-xl p-3 text-sm">
+                {t('settings.sources.configModal.readOnly')}
               </div>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-4 px-0.5 py-4">
-              {isReadOnly && (
-                <div className="bg-muted text-muted-foreground rounded-xl p-3 text-sm">
-                  {t('settings.sources.configModal.readOnly')}
-                </div>
-              )}
-              <RetrievalOptions
-                value={options}
-                onChange={setOptions}
-                alwaysOpen
-                disabled={isReadOnly}
-                hybridAvailable={hybridAvailable}
-                graphRAGAvailable={graphRAGAvailable}
-                availableModels={availableModels}
-              />
-              {willRequireReingest && !isReadOnly && (
-                <div className="rounded-xl bg-amber-50 p-3 text-xs text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
+            )}
+            <RetrievalOptions
+              value={options}
+              onChange={setOptions}
+              alwaysOpen
+              disabled={isReadOnly}
+              hybridAvailable={hybridAvailable}
+              graphRAGAvailable={graphRAGAvailable}
+              availableModels={availableModels}
+            />
+            {willRequireReingest && !isReadOnly && (
+              <Alert variant="warning">
+                <TriangleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>
                   {t('settings.sources.configModal.chunkingChangeHint')}
-                </div>
-              )}
-              {!prescreenValid && !isReadOnly && (
-                <div className="rounded-xl bg-amber-50 p-3 text-xs text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
+                </AlertDescription>
+              </Alert>
+            )}
+            {!prescreenValid && !isReadOnly && (
+              <Alert variant="warning">
+                <TriangleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>
                   {t('settings.sources.configModal.prescreenInvalidHint')}
-                </div>
-              )}
-              {error && (
-                <div className="rounded-xl bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-                  {error}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="px-2 py-4">
-          {reingestPrompt ? (
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.configModal.reingestLater')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleConfirmReingest}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('settings.sources.reingest')}
-              </Button>
-            </div>
-          ) : (
-            <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end sm:gap-3">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={closeModal}
-                disabled={saving}
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={handleSave}
-                disabled={
-                  saving || isReadOnly || !hasChanges || !prescreenValid
-                }
-                className="w-full rounded-3xl px-6 sm:w-auto"
-              >
-                {saving ? (
-                  <div className="flex items-center justify-center">
-                    <Spinner size="small" />
-                    <span className="ml-2">
-                      {t('settings.sources.configModal.saving')}
-                    </span>
-                  </div>
-                ) : (
-                  t('settings.sources.configModal.save')
-                )}
-              </Button>
-            </div>
-          )}
-        </div>
+                </AlertDescription>
+              </Alert>
+            )}
+            {error && (
+              <Alert variant="destructive">
+                <CircleAlert className="size-4" aria-hidden="true" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
       </div>
     </Modal>
   );
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index c6847247..38aa5297 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -1,11 +1,16 @@
 import {
   BookOpen,
+  CalendarIcon,
+  Check,
+  Eye,
+  HardDrive,
   Network,
-  Search as SearchIcon,
+  RefreshCw,
+  Search,
   SlidersHorizontal,
+  Trash2,
   Users,
 } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,25 +18,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import userService from '../api/services/userService';
 import modelService from '../api/services/modelService';
 
-import EyeView from '../assets/eye-view.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import Trash from '../assets/red-trash.svg';
-import SyncIcon from '../assets/sync.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import CalendarIcon from '../assets/calendar.svg';
-import DiscIcon from '../assets/disc.svg';
-import Pagination from '../components/DocumentPagination';
+import PageToolbar from '../components/PageToolbar';
+import SearchInput from '../components/SearchInput';
 import SkeletonLoader from '../components/SkeletonLoader';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
-import { Input } from '../components/ui/input';
-import { useDarkTheme, useDebouncedValue, useLoaderState } from '../hooks';
+import { Card, CardFooter, CardTitle } from '../components/ui/card';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
+import { EmptyState } from '../components/ui/empty-state';
+import { Pagination } from '../components/ui/pagination';
+import { useDebouncedValue, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, DocumentsProps } from '../models/misc';
 import type { Model } from '../models/types';
@@ -61,15 +57,6 @@ import { clearGraphBuild, selectGraphBuilds } from './graphBuildSlice';
 import SourceConfigModal from './SourceConfigModal';
 import TestRetrievalModal from './TestRetrievalModal';
 
-type SourceMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-};
-
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
     return (Math.round((num + Number.EPSILON) * 100) / 100).toString();
@@ -91,7 +78,6 @@ export default function Sources({
   handleDeleteDocument,
 }: DocumentsProps) {
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
   const dispatch = useDispatch();
   const token = useSelector(selectToken);
   const uploadTasks = useSelector(selectUploadTasks);
@@ -141,15 +127,6 @@ export default function Sources({
   // Graph-build progress is SSE-driven (graphBuildSlice), so the "building"
   // badge survives closing the modal and reflects the real backend state.
   const graphBuilds = useSelector(selectGraphBuilds);
-  const [syncMenuState, setSyncMenuState] = useState<{
-    isOpen: boolean;
-    docId: string | null;
-    document: Doc | null;
-  }>({
-    isOpen: false,
-    docId: null,
-    document: null,
-  });
 
   const refreshDocs = useCallback(
     (
@@ -354,18 +331,15 @@ export default function Sources({
     }
   };
 
-  const getActionOptions = (
-    index: number,
-    document: Doc,
-  ): SourceMenuOption[] => {
+  const getActionOptions = (index: number, document: Doc): MenuOption[] => {
     const isWiki = document.config?.kind === 'wiki' || document.type === 'wiki';
     const isGraphRAG = document.config?.kind === 'graphrag';
     // 'team' viewers cannot write; convert is owner/editor only.
     const canEdit =
       document.ownership !== 'team' || document.team_access === 'editor';
-    const actions: SourceMenuOption[] = [
+    const actions: MenuOption[] = [
       {
-        icon: isGraphRAG ? Network : EyeView,
+        icon: isGraphRAG ? Network : Eye,
         label: isWiki
           ? t('settings.sources.wiki.view')
           : isGraphRAG
@@ -374,48 +348,41 @@ export default function Sources({
         onClick: () => {
           setDocumentToView(document);
         },
-        iconWidth: 18,
-        iconHeight: 18,
         variant: 'default',
       },
     ];
 
     if (document.ingestStatus === 'failed') {
       actions.push({
-        icon: SyncIcon,
+        icon: RefreshCw,
         label: t('settings.sources.reingest'),
         onClick: () => {
           handleReingest(document);
         },
-        iconWidth: 14,
-        iconHeight: 14,
         variant: 'default',
       });
     }
 
     if (document.syncFrequency) {
-      actions.push({
-        icon: SyncIcon,
-        label: t('settings.sources.sync'),
-        onClick: () => {
-          setSyncMenuState({
-            isOpen: true,
-            docId: document.id ?? null,
-            document: document,
-          });
-        },
-        iconWidth: 14,
-        iconHeight: 14,
-        variant: 'default',
+      // One row per sync frequency; the current one carries the check.
+      syncOptions.forEach((opt) => {
+        actions.push({
+          icon: document.syncFrequency === opt.value ? Check : RefreshCw,
+          label: t('settings.sources.syncFrequency.option', {
+            frequency: opt.label,
+          }),
+          onClick: () => {
+            handleManageSync(document, opt.value);
+          },
+          variant: 'default',
+        });
       });
       actions.push({
-        icon: SyncIcon,
+        icon: RefreshCw,
         label: t('settings.sources.syncNow'),
         onClick: () => {
           handleSyncNow(document);
         },
-        iconWidth: 14,
-        iconHeight: 14,
         variant: 'default',
       });
     }
@@ -428,22 +395,18 @@ export default function Sources({
           setDocumentToConfigure(document);
           setConfigModalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
 
     if (document.id) {
       actions.push({
-        icon: SearchIcon,
+        icon: Search,
         label: t('settings.sources.testRetrieval.action'),
         onClick: () => {
           setDocumentToTest(document);
           setTestRetrievalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
@@ -462,8 +425,6 @@ export default function Sources({
           setDocumentToConvert(document);
           setConvertModalState('ACTIVE');
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
@@ -477,20 +438,16 @@ export default function Sources({
         onClick: () => {
           setDocumentToShare(document);
         },
-        iconWidth: 16,
-        iconHeight: 16,
         variant: 'default',
       });
     }
 
     actions.push({
-      icon: Trash,
+      icon: Trash2,
       label: t('convTile.delete'),
       onClick: () => {
         handleDeleteConfirmation(index, document);
       },
-      iconWidth: 18,
-      iconHeight: 18,
       variant: 'destructive',
     });
 
@@ -553,7 +510,8 @@ export default function Sources({
     <Button
       type="button"
       variant="outline"
-      className="h-[38px] rounded-full px-4 text-sm font-medium whitespace-nowrap"
+      shape="pill"
+      size="field"
       onClick={() => {
         setDocumentToTest(documentToView);
         setTestRetrievalState('ACTIVE');
@@ -564,7 +522,7 @@ export default function Sources({
   ) : null;
 
   return documentToView ? (
-    <div className="mt-8 flex flex-col">
+    <div className="flex flex-col">
       {documentToView.config?.kind === 'wiki' ||
       documentToView.type === 'wiki' ? (
         <WikiViewer
@@ -618,70 +576,57 @@ export default function Sources({
       />
     </div>
   ) : (
-    <div className="mt-8 flex w-full max-w-full flex-col">
+    <div className="flex w-full max-w-full flex-col">
       <div className="relative flex grow flex-col">
-        <p className="text-muted-foreground mb-5 text-sm leading-6">
-          {t('settings.sources.subtitle')}
-        </p>
-        <div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
-          <div className="w-full max-w-md sm:w-auto">
-            <Input
+        <PageToolbar
+          intro={t('settings.sources.subtitle')}
+          search={
+            <SearchInput
               maxLength={256}
               label={t('settings.sources.searchPlaceholder')}
               name="Document-search-input"
-              type="text"
               id="document-search-input"
               value={searchTerm}
               onChange={(e) => {
                 setSearchTerm(e.target.value);
                 setCurrentPage(1);
               }}
-              labelBgClassName="bg-background"
-              className="rounded-full"
-              leftIcon={
-                <SearchIcon
-                  className="text-muted-foreground size-4"
-                  strokeWidth={1.75}
-                />
-              }
             />
-          </div>
-          <Button
-            type="button"
-            className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
-            title={t('settings.sources.addSource')}
-            onClick={() => {
-              setIsOnboarding(false);
-              setModalState('ACTIVE');
-            }}
-          >
-            {t('settings.sources.addSource')}
-          </Button>
-        </div>
+          }
+          action={
+            <Button
+              type="button"
+              size="field"
+              shape="pill"
+              title={t('settings.sources.addSource')}
+              onClick={() => {
+                setIsOnboarding(false);
+                setModalState('ACTIVE');
+              }}
+            >
+              {t('settings.sources.addSource')}
+            </Button>
+          }
+          divider
+        />
         <div className="relative w-full">
           {loading ? (
-            <div className="grid w-full grid-cols-1 gap-6 px-2 py-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
               <SkeletonLoader component="sourceCards" count={rowsPerPage} />
             </div>
           ) : !currentDocuments?.length ? (
-            <div className="flex flex-col items-center justify-center py-12">
-              <img
-                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt={t('settings.sources.noData')}
-                className="mx-auto mb-6 h-32 w-32"
-              />
-              <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-                {t('settings.sources.noData')}
-              </p>
-            </div>
+            <EmptyState title={t('settings.sources.noData')} />
           ) : (
-            <div className="grid w-full grid-cols-1 gap-6 px-2 py-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
               {currentDocuments.map((document, index) => {
                 const docId = document.id ? document.id.toString() : '';
 
                 return (
                   <div key={docId} className="relative">
-                    <div
+                    <Card
+                      variant="filled"
+                      interactive
+                      padding="lg"
                       role="button"
                       tabIndex={0}
                       aria-label={document.name}
@@ -692,145 +637,48 @@ export default function Sources({
                           setDocumentToView(document);
                         }
                       }}
-                      className={`bg-muted dark:bg-accent focus-visible:ring-ring/50 flex min-h-[130px] w-full cursor-pointer flex-col rounded-2xl p-5 transition-all duration-200 outline-none focus-visible:ring-[3px] ${
-                        actionMenuDocId === docId ||
-                        syncMenuState.docId === docId
-                          ? 'scale-[1.05]'
-                          : 'hover:scale-[1.05]'
-                      }`}
+                      className="min-h-[130px]"
                     >
                       <div className="w-full flex-1">
                         <div className="flex w-full items-center justify-between gap-2">
-                          <h3
-                            className="dark:text-foreground text-foreground line-clamp-2 min-w-0 flex-1 text-sm leading-[18px] font-semibold wrap-anywhere"
+                          <CardTitle
+                            className="line-clamp-2 min-w-0 flex-1 wrap-anywhere"
                             title={document.name}
                           >
                             {document.name}
-                          </h3>
+                          </CardTitle>
                           <div className="relative flex shrink-0 items-center justify-end">
-                            {document.syncFrequency && (
-                              <DropdownMenu
-                                open={
-                                  syncMenuState.docId === docId &&
-                                  syncMenuState.isOpen
-                                }
-                                onOpenChange={(isOpen) => {
-                                  setSyncMenuState((prev) => ({
-                                    ...prev,
-                                    isOpen,
-                                    docId: isOpen ? docId : null,
-                                    document: isOpen ? document : null,
-                                  }));
-                                }}
-                              >
-                                <DropdownMenuTrigger asChild>
-                                  <span
-                                    aria-hidden
-                                    className="pointer-events-none absolute inset-0 opacity-0"
-                                  />
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent
-                                  align="end"
-                                  className="min-w-[120px]"
-                                  onClick={(e) => e.stopPropagation()}
-                                >
-                                  {syncOptions.map((opt) => (
-                                    <DropdownMenuItem
-                                      key={opt.value}
-                                      onSelect={() =>
-                                        handleManageSync(document, opt.value)
-                                      }
-                                    >
-                                      {opt.label}
-                                    </DropdownMenuItem>
-                                  ))}
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            )}
-                            <DropdownMenu
+                            <ActionMenu
+                              options={getActionOptions(index, document)}
+                              triggerLabel={t('settings.sources.menuAlt')}
+                              triggerTestId={`menu-button-${docId}`}
                               open={actionMenuDocId === docId}
                               onOpenChange={(open) =>
                                 setActionMenuDocId(open ? docId : null)
                               }
-                            >
-                              <DropdownMenuTrigger asChild>
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={(e) => e.stopPropagation()}
-                                  className="h-[35px] w-6"
-                                  aria-label={t('settings.sources.menuAlt')}
-                                  data-testid={`menu-button-${docId}`}
-                                >
-                                  <img
-                                    src={ThreeDots}
-                                    alt={t('settings.sources.menuAlt')}
-                                    className="opacity-60 hover:opacity-100"
-                                  />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent
-                                align="end"
-                                className="min-w-[144px]"
-                                onClick={(e) => e.stopPropagation()}
-                              >
-                                {getActionOptions(index, document).map(
-                                  (option, idx) => (
-                                    <DropdownMenuItem
-                                      key={idx}
-                                      variant={option.variant}
-                                      onSelect={() => option.onClick()}
-                                    >
-                                      {typeof option.icon === 'string' ? (
-                                        <img
-                                          src={option.icon}
-                                          alt=""
-                                          width={option.iconWidth ?? 16}
-                                          height={option.iconHeight ?? 16}
-                                        />
-                                      ) : (
-                                        <option.icon
-                                          size={Math.max(
-                                            option.iconWidth ?? 16,
-                                            option.iconHeight ?? 16,
-                                          )}
-                                          strokeWidth={1.75}
-                                          aria-hidden="true"
-                                        />
-                                      )}
-                                      <span>{option.label}</span>
-                                    </DropdownMenuItem>
-                                  ),
-                                )}
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                            />
                           </div>
                         </div>
                       </div>
 
                       <div className="flex flex-col items-start justify-start gap-1">
                         {document.ownership === 'team' && (
-                          <span className="bg-muted-foreground/10 text-muted-foreground flex items-center gap-1 rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium">
-                            <Users
-                              size={11}
-                              strokeWidth={2}
-                              aria-hidden="true"
-                            />
+                          <Badge variant="neutral">
+                            <Users className="size-3" aria-hidden="true" />
                             {document.team_access === 'editor'
                               ? t('teamAccess.editor')
                               : t('teamAccess.viewer')}
-                          </span>
+                          </Badge>
                         )}
                         {document.ingestStatus === 'failed' && (
-                          <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs leading-[16px] font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
+                          <Badge variant="destructive">
                             {t('settings.sources.ingestFailed')}
-                          </span>
+                          </Badge>
                         )}
                         {document.ingestStatus === 'processing' && (
-                          <span className="bg-muted-foreground/10 text-muted-foreground rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium">
+                          <Badge variant="neutral">
                             {t('settings.sources.ingestProcessing')}
-                          </span>
+                          </Badge>
                         )}
                         {document.config?.kind === 'graphrag' &&
                           (() => {
@@ -848,10 +696,9 @@ export default function Sources({
                                   )
                                 : null;
                             return (
-                              <span className="bg-muted-foreground/10 text-muted-foreground flex items-center gap-1 rounded-full px-2 py-0.5 text-xs leading-[16px] font-medium">
+                              <Badge variant="neutral">
                                 <Network
-                                  size={11}
-                                  strokeWidth={2}
+                                  className="size-3"
                                   aria-hidden="true"
                                 />
                                 {isBuilding
@@ -862,29 +709,23 @@ export default function Sources({
                                       )
                                     : t('settings.sources.graphrag.building')
                                   : t('settings.sources.graphrag.badge')}
-                              </span>
+                              </Badge>
                             );
                           })()}
-                        <div className="flex items-center gap-2">
-                          <img
-                            src={CalendarIcon}
-                            alt=""
-                            className="h-3.5 w-3.5"
-                          />
-                          <span className="text-muted-foreground text-xs leading-[18px] font-medium">
+                        <CardFooter className="flex-col items-start gap-1">
+                          <span className="flex items-center gap-2">
+                            <CalendarIcon className="size-3.5" />
                             {document.date ? formatDate(document.date) : ''}
                           </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <img src={DiscIcon} alt="" className="h-3.5 w-3.5" />
-                          <span className="text-muted-foreground text-xs leading-[18px] font-medium">
+                          <span className="flex items-center gap-2">
+                            <HardDrive className="size-3.5" />
                             {document.tokens
                               ? formatTokens(+document.tokens)
                               : ''}
                           </span>
-                        </div>
+                        </CardFooter>
                       </div>
-                    </div>
+                    </Card>
                   </div>
                 );
               })}
@@ -896,14 +737,14 @@ export default function Sources({
       {currentDocuments.length > 0 && totalPages > 1 && (
         <div className="mt-auto pt-4">
           <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            rowsPerPage={rowsPerPage}
+            page={currentPage}
+            pageCount={totalPages}
+            pageSize={rowsPerPage}
             onPageChange={(page) => {
               setCurrentPage(page);
               refreshDocs(undefined, page, rowsPerPage);
             }}
-            onRowsPerPageChange={(rows) => {
+            onPageSizeChange={(rows) => {
               setRowsPerPage(rows);
               setCurrentPage(1);
               refreshDocs(undefined, 1, rows);
@@ -938,7 +779,7 @@ export default function Sources({
             setDocumentToDelete(null);
           }}
           submitLabel={t('convTile.delete')}
-          variant="danger"
+          variant="destructive"
         />
       )}
 
diff --git a/frontend/src/settings/Teams.tsx b/frontend/src/settings/Teams.tsx
index d77ec619..30a31de4 100644
--- a/frontend/src/settings/Teams.tsx
+++ b/frontend/src/settings/Teams.tsx
@@ -1,9 +1,9 @@
 import {
   Bot,
   ChevronRight,
+  CircleAlert,
   FileText,
   MessageSquare,
-  MoreVertical,
   Pencil,
   Plus,
   Trash2,
@@ -20,22 +20,28 @@ import teamsService, {
   TeamRole,
 } from '../api/services/teamsService';
 import userService from '../api/services/userService';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
 import SkeletonLoader from '../components/SkeletonLoader';
 import DetailBreadcrumb from '../navigation/DetailBreadcrumb';
-import { SectionBackLink } from '../navigation/SectionPageHeader';
-import { SETTINGS_SECTION } from '../navigation/sections';
+import SectionShell from '../navigation/SectionShell';
+import PageToolbar from '../components/PageToolbar';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Avatar } from '../components/ui/avatar';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+  Card,
+  CardDescription,
+  CardFooter,
+  CardTitle,
+} from '../components/ui/card';
+import { ActionMenu } from '../components/ui/dropdown-menu';
+import { EmptyState } from '../components/ui/empty-state';
+import { FormField } from '../components/ui/form-field';
+import { IconButton } from '../components/ui/icon-button';
 import { Input } from '../components/ui/input';
-import { Modal } from '../components/ui/modal';
+import { ListRow, ListRows } from '../components/ui/list-row';
+import { Modal, ModalActions } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Select,
   SelectContent,
@@ -43,9 +49,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
-import { useDarkTheme } from '../hooks';
+import { Textarea } from '../components/ui/textarea';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
+import { showActionToast } from '../notifications/actionToastSlice';
 import {
   selectAgents,
   selectPrompts,
@@ -98,10 +105,12 @@ const initialOf = (label: string): string => {
 
 export default function Teams() {
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch<AppDispatch>();
+  // A failed action on the team detail page is a fire-and-forget result.
+  const reportError = (message: string) =>
+    dispatch(showActionToast({ variant: 'destructive', message }));
   const token = useSelector(selectToken);
   const teams = useSelector(selectTeams);
   const teamsLoading = useSelector(selectTeamsLoading);
@@ -128,7 +137,6 @@ export default function Teams() {
   const [newMemberRole, setNewMemberRole] = useState<TeamRole>('team_member');
   const [addMemberOpen, setAddMemberOpen] = useState(false);
   const [addMemberError, setAddMemberError] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
 
   const [deleteTeamModalState, setDeleteTeamModalState] =
     useState<ActiveState>('INACTIVE');
@@ -190,7 +198,7 @@ export default function Teams() {
 
   // Lucide icon for a grant's resource type, shown in the row's type tile.
   const resourceTypeIcon = (type: string): ReactNode => {
-    const props = { size: 16, strokeWidth: 1.75, 'aria-hidden': true } as const;
+    const props = { size: 16, 'aria-hidden': true } as const;
     switch (type) {
       case 'agent':
         return <Bot {...props} />;
@@ -215,7 +223,6 @@ export default function Teams() {
 
   const openTeam = async (team: Team) => {
     setSelected(team);
-    setError(null);
     // Clear the previous team's data so the detail view doesn't flash stale
     // members/grants while this team's fetch is in flight.
     setMembers([]);
@@ -269,7 +276,7 @@ export default function Teams() {
       }
     } catch {
       // Surface the failure instead of silently rendering an empty team.
-      setError(t('settings.teams.openTeamError'));
+      reportError(t('settings.teams.openTeamError'));
     }
   };
 
@@ -412,7 +419,6 @@ export default function Teams() {
 
   const handleRoleChange = async (memberId: string, role: TeamRole) => {
     if (!selected) return;
-    setError(null);
     try {
       const res = await teamsService.setMemberRole(
         selected.id,
@@ -421,10 +427,10 @@ export default function Teams() {
         token,
       );
       if (res?.success === false)
-        setError(res.message ?? t('settings.teams.updateFailed'));
+        reportError(res.message ?? t('settings.teams.updateFailed'));
       openTeam(selected);
     } catch {
-      setError(t('settings.teams.roleChangeError'));
+      reportError(t('settings.teams.roleChangeError'));
     }
   };
 
@@ -441,7 +447,7 @@ export default function Teams() {
       await teamsService.removeMember(selected.id, memberId, token);
       openTeam(selected);
     } catch {
-      setError(t('settings.teams.removeMemberError'));
+      reportError(t('settings.teams.removeMemberError'));
     }
   };
 
@@ -458,13 +464,12 @@ export default function Teams() {
       await dispatch(deleteTeam({ id: team.id, token })).unwrap();
       if (selected?.id === team.id) setSelected(null);
     } catch {
-      setError(t('settings.teams.deleteTeamError'));
+      reportError(t('settings.teams.deleteTeamError'));
     }
   };
 
   const handleUnshare = async (grant: Grant) => {
     if (!selected) return;
-    setError(null);
     try {
       await teamsService.unshare(
         selected.id,
@@ -476,142 +481,126 @@ export default function Teams() {
       );
       openTeam(selected);
     } catch {
-      setError(t('settings.teams.unshareError'));
+      reportError(t('settings.teams.unshareError'));
     }
   };
 
   const isAdmin = selected?.member_role === 'team_admin';
 
   const roleBadge = (role: TeamRole) => (
-    <span
-      className={`rounded-full px-2 py-0.5 text-xs ${
-        role === 'team_admin'
-          ? 'bg-muted-foreground/15 text-foreground'
-          : 'bg-muted-foreground/10 text-muted-foreground'
-      }`}
-    >
+    <Badge variant={role === 'team_admin' ? 'default' : 'neutral'}>
       {role === 'team_admin'
         ? t('settings.teams.roleAdmin')
         : t('settings.teams.roleMember')}
-    </span>
-  );
-
-  const emptyState = (message: string, extra?: ReactNode) => (
-    <div className="flex flex-col items-center justify-center py-12">
-      <img
-        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-        alt=""
-        aria-hidden="true"
-        className="mx-auto mb-6 h-32 w-32"
-      />
-      <p className="text-muted-foreground max-w-sm text-center text-sm">
-        {message}
-      </p>
-      {extra}
-    </div>
+    </Badge>
   );
 
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-5xl">
-        <SectionBackLink section={SETTINGS_SECTION} />
-      </div>
-      <div className="mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="min-w-0">
-          <p className="text-foreground text-2xl font-bold">
-            {t('settings.teams.label')}
-          </p>
-          <p className="text-muted-foreground text-sm">
-            {t('settings.teams.subtitle')}
-          </p>
-        </div>
-        <Button className="shrink-0" onClick={openCreateModal}>
-          <Plus size={16} strokeWidth={1.75} aria-hidden />
-          {t('settings.teams.newTeam')}
-        </Button>
-      </div>
+    <SectionShell>
+      <PageToolbar
+        intro={t('settings.teams.subtitle')}
+        action={
+          <Button size="field" shape="pill" onClick={openCreateModal}>
+            <Plus aria-hidden />
+            {t('settings.teams.newTeam')}
+          </Button>
+        }
+      />
 
       {!selected ? (
-        <div className="mx-auto mt-8 w-full max-w-5xl">
+        <div>
           {teamsLoading ? (
             <SkeletonLoader component="default" />
           ) : teamsError ? (
-            <p className="text-destructive text-sm" role="alert">
-              {t('settings.teams.loadError')}
-            </p>
-          ) : teams.length === 0 ? (
-            emptyState(
-              t('settings.teams.noTeams'),
-              <Button
-                variant="ghost"
-                className="mt-4"
-                onClick={openCreateModal}
-              >
-                <Plus size={16} strokeWidth={1.75} aria-hidden />
-                {t('settings.teams.newTeam')}
-              </Button>,
-            )
-          ) : (
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {teams.map((team) => (
-                <button
-                  key={team.id}
-                  className="border-border bg-muted dark:bg-accent hover:border-primary/40 group flex h-full flex-col gap-3 rounded-2xl border p-4 text-left transition-colors"
-                  onClick={() => openTeam(team)}
+            <EmptyState
+              tone="destructive"
+              size="sm"
+              illustration="none"
+              title={t('settings.teams.loadError')}
+              action={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => dispatch(loadTeams({ token }))}
                 >
-                  <div className="flex items-center gap-3">
-                    <span aria-hidden="true" className="contents">
-                      <Avatar
-                        alt=""
-                        className="bg-muted-foreground/15 text-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium"
-                      >
-                        {initialOf(team.name)}
-                      </Avatar>
-                    </span>
-                    <span className="text-foreground min-w-0 flex-1 truncate text-sm font-semibold">
-                      {team.name}
-                    </span>
-                    {roleBadge(team.member_role ?? 'team_member')}
-                    <ChevronRight
-                      className="text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5"
-                      size={18}
-                      strokeWidth={1.75}
-                      aria-hidden
-                    />
-                  </div>
-                  {team.description ? (
-                    <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
-                      {team.description}
-                    </p>
-                  ) : (
-                    <p className="text-muted-foreground/50 text-xs italic">
-                      {t('settings.teams.noDescription')}
-                    </p>
-                  )}
-                  <div className="text-muted-foreground mt-auto flex items-center gap-1.5 text-xs">
-                    <Users size={13} strokeWidth={1.75} aria-hidden />
-                    <span>
-                      {t(
-                        (team.member_count ?? 0) === 1
-                          ? 'settings.teams.memberCountOne'
-                          : 'settings.teams.memberCountOther',
-                        { count: team.member_count ?? 0 },
-                      )}
-                    </span>
-                    <span aria-hidden>·</span>
-                    <span>
-                      {t('settings.teams.sharedCount', {
-                        count: team.shared_count ?? 0,
-                      })}
-                    </span>
-                  </div>
-                </button>
+                  {t('retry')}
+                </Button>
+              }
+            />
+          ) : teams.length === 0 ? (
+            <EmptyState
+              title={t('settings.teams.noTeams')}
+              action={
+                <Button variant="ghost" onClick={openCreateModal}>
+                  <Plus aria-hidden />
+                  {t('settings.teams.newTeam')}
+                </Button>
+              }
+            />
+          ) : (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {teams.map((team) => (
+                <Card
+                  key={team.id}
+                  asChild
+                  interactive
+                  className="group h-full"
+                >
+                  <button onClick={() => openTeam(team)}>
+                    <div className="flex items-center gap-3">
+                      <span aria-hidden="true" className="contents">
+                        <Avatar
+                          alt=""
+                          size="default"
+                          shape="square"
+                          variant="muted"
+                        >
+                          {initialOf(team.name)}
+                        </Avatar>
+                      </span>
+                      <CardTitle className="min-w-0 flex-1 truncate">
+                        {team.name}
+                      </CardTitle>
+                      {roleBadge(team.member_role ?? 'team_member')}
+                      <ChevronRight
+                        className="text-muted-foreground size-4.5 shrink-0 transition-transform group-hover:translate-x-0.5"
+                        aria-hidden
+                      />
+                    </div>
+                    {team.description ? (
+                      <CardDescription size="xs" className="line-clamp-2">
+                        {team.description}
+                      </CardDescription>
+                    ) : (
+                      <p className="text-muted-foreground/50 text-xs italic">
+                        {t('settings.teams.noDescription')}
+                      </p>
+                    )}
+                    <CardFooter className="gap-1.5">
+                      <Users className="size-3.5" aria-hidden />
+                      <span>
+                        {t(
+                          (team.member_count ?? 0) === 1
+                            ? 'settings.teams.memberCountOne'
+                            : 'settings.teams.memberCountOther',
+                          { count: team.member_count ?? 0 },
+                        )}
+                      </span>
+                      <span aria-hidden>·</span>
+                      <span>
+                        {t('settings.teams.sharedCount', {
+                          count: team.shared_count ?? 0,
+                        })}
+                      </span>
+                    </CardFooter>
+                  </button>
+                </Card>
               ))}
             </div>
           )}
         </div>
       ) : (
-        <div className="mx-auto mt-8 max-w-5xl space-y-6">
+        <div className="flex flex-col gap-6">
           <DetailBreadcrumb
             parentLabel={t('settings.teams.label')}
             currentLabel={selected.name}
@@ -619,22 +608,18 @@ export default function Teams() {
               setSelected(null);
               setMembers([]);
               setGrants([]);
-              setError(null);
             }}
           />
 
           <div className="flex items-start justify-between gap-3">
             <div className="flex min-w-0 items-center gap-3">
               <span aria-hidden="true" className="contents">
-                <Avatar
-                  alt=""
-                  className="bg-muted-foreground/15 text-foreground flex size-10 shrink-0 items-center justify-center rounded-md text-base font-medium"
-                >
+                <Avatar alt="" size="lg" shape="square" variant="muted">
                   {initialOf(selected.name)}
                 </Avatar>
               </span>
               <div className="min-w-0">
-                <h3 className="text-foreground truncate text-xl font-bold">
+                <h3 className="text-foreground truncate text-xl leading-tight font-semibold">
                   {selected.name}
                 </h3>
                 {selected.description && (
@@ -645,173 +630,154 @@ export default function Teams() {
               </div>
             </div>
             {isAdmin && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+              <ActionMenu
+                options={[
+                  {
+                    label: t('settings.teams.editTeam'),
+                    icon: Pencil,
+                    onClick: openEditModal,
+                  },
+                  {
+                    label: t('settings.teams.deleteTeam'),
+                    icon: Trash2,
+                    variant: 'destructive',
+                    onClick: () => requestDeleteTeam(selected),
+                  },
+                ]}
+                triggerLabel={t('settings.teams.teamActions')}
+                className="shrink-0"
+              />
+            )}
+          </div>
+
+          <div className="border-border flex flex-col gap-3 border-t pt-6">
+            <SectionHeader
+              as="h4"
+              size="sm"
+              title={`${t('settings.teams.members')} · ${members.length}`}
+              actions={
+                isAdmin && (
                   <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    className="text-muted-foreground shrink-0"
-                    aria-label={t('settings.teams.teamActions')}
+                    variant="outline"
+                    size="sm"
+                    className="shrink-0"
+                    onClick={openAddMemberModal}
                   >
-                    <MoreVertical size={18} strokeWidth={1.75} aria-hidden />
+                    <Plus aria-hidden />
+                    {t('settings.teams.addMember')}
                   </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[160px]">
-                  <DropdownMenuItem onSelect={openEditModal}>
-                    <Pencil size={15} strokeWidth={1.75} aria-hidden />
-                    <span>{t('settings.teams.editTeam')}</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    variant="destructive"
-                    onSelect={() => requestDeleteTeam(selected)}
-                  >
-                    <Trash2 size={15} strokeWidth={1.75} aria-hidden />
-                    <span>{t('settings.teams.deleteTeam')}</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
-
-          {error && (
-            <p className="text-destructive text-sm" role="alert">
-              {error}
-            </p>
-          )}
-
-          <div className="border-border mt-6 border-t pt-6">
-            <div className="mb-3 flex items-center justify-between gap-2">
-              <h4 className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
-                {t('settings.teams.members')} · {members.length}
-              </h4>
-              {isAdmin && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="shrink-0"
-                  onClick={openAddMemberModal}
-                >
-                  <Plus size={15} strokeWidth={1.75} aria-hidden />
-                  {t('settings.teams.addMember')}
-                </Button>
-              )}
-            </div>
+                )
+              }
+            />
             {members.length === 0 ? (
-              emptyState(t('settings.teams.noMembers'))
+              <EmptyState size="sm" title={t('settings.teams.noMembers')} />
             ) : (
-              <ul>
+              <ListRows>
                 {members.map((m) => (
-                  <li
+                  <ListRow
                     key={`${m.user_id}-${m.source}`}
-                    className="border-border/60 flex items-center gap-3 border-b px-1 py-2.5 last:border-b-0"
-                  >
-                    <span aria-hidden="true" className="contents">
-                      <Avatar
-                        alt=""
-                        className="bg-muted-foreground/15 text-foreground flex size-8 items-center justify-center rounded-full text-sm font-medium"
-                      >
-                        {initialOf(memberLabel(m))}
-                      </Avatar>
-                    </span>
-                    <div className="min-w-0 flex-1">
-                      <p
-                        className="text-foreground truncate text-sm font-medium"
-                        title={memberLabel(m)}
-                      >
-                        {memberLabel(m)}
-                      </p>
-                      <p className="text-muted-foreground truncate text-xs">
-                        {sourceLabel(m.source)}
-                      </p>
-                    </div>
-                    {isAdmin ? (
-                      <Select
-                        value={m.role}
-                        onValueChange={(value) =>
-                          handleRoleChange(m.user_id, value as TeamRole)
-                        }
-                      >
-                        <SelectTrigger
-                          size="sm"
-                          className="shrink-0"
-                          aria-label={t('settings.teams.memberRoleLabel')}
-                        >
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="team_member">
-                            {t('settings.teams.roleMember')}
-                          </SelectItem>
-                          <SelectItem value="team_admin">
-                            {t('settings.teams.roleAdmin')}
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    ) : (
-                      <span className="shrink-0">{roleBadge(m.role)}</span>
-                    )}
-                    {isAdmin && (
-                      <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        className="text-muted-foreground hover:text-destructive shrink-0"
-                        aria-label={t('settings.teams.remove')}
-                        title={t('settings.teams.remove')}
-                        onClick={() => requestRemoveMember(m.user_id)}
-                      >
-                        <Trash2 size={16} strokeWidth={1.75} aria-hidden />
-                      </Button>
-                    )}
-                  </li>
+                    leading={
+                      <span aria-hidden="true" className="contents">
+                        <Avatar alt="" size="sm" shape="circle" variant="muted">
+                          {initialOf(memberLabel(m))}
+                        </Avatar>
+                      </span>
+                    }
+                    title={<span title={memberLabel(m)}>{memberLabel(m)}</span>}
+                    description={sourceLabel(m.source)}
+                    trailing={
+                      <>
+                        {isAdmin ? (
+                          <Select
+                            value={m.role}
+                            onValueChange={(value) =>
+                              handleRoleChange(m.user_id, value as TeamRole)
+                            }
+                          >
+                            <SelectTrigger
+                              size="sm"
+                              className="shrink-0"
+                              aria-label={t('settings.teams.memberRoleLabel')}
+                            >
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="team_member">
+                                {t('settings.teams.roleMember')}
+                              </SelectItem>
+                              <SelectItem value="team_admin">
+                                {t('settings.teams.roleAdmin')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        ) : (
+                          <span className="shrink-0">{roleBadge(m.role)}</span>
+                        )}
+                        {isAdmin && (
+                          <IconButton
+                            variant="ghost-destructive"
+                            size="icon-sm"
+                            className="shrink-0"
+                            label={t('settings.teams.remove')}
+                            icon={Trash2}
+                            onClick={() => requestRemoveMember(m.user_id)}
+                          />
+                        )}
+                      </>
+                    }
+                  />
                 ))}
-              </ul>
+              </ListRows>
             )}
           </div>
 
-          <div className="border-border mt-6 border-t pt-6">
-            <h4 className="text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase">
-              {t('settings.teams.sharedResources')} · {grants.length}
-            </h4>
+          <div className="border-border flex flex-col gap-3 border-t pt-6">
+            <SectionHeader
+              as="h4"
+              size="sm"
+              title={`${t('settings.teams.sharedResources')} · ${grants.length}`}
+            />
             {grants.length === 0 ? (
-              emptyState(t('settings.teams.nothingShared'))
+              <EmptyState size="sm" title={t('settings.teams.nothingShared')} />
             ) : (
-              <ul>
+              <ListRows>
                 {grants.map((g) => (
-                  <li
+                  <ListRow
                     key={`${g.resource_type}-${g.resource_id}`}
-                    className="border-border/60 flex items-center gap-3 border-b px-1 py-2.5 last:border-b-0"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="bg-muted-foreground/10 text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md"
-                      title={resourceTypeLabel(g.resource_type)}
-                    >
-                      {resourceTypeIcon(g.resource_type)}
-                    </span>
-                    <span
-                      className="text-foreground min-w-0 flex-1 truncate text-sm font-medium"
-                      title={g.resource_id}
-                    >
-                      {resolveResourceName(g)}
-                    </span>
-                    <span className="bg-muted-foreground/10 text-muted-foreground shrink-0 rounded-full px-2 py-0.5 text-xs">
-                      {accessLevelLabel(g.access_level)}
-                    </span>
-                    {isAdmin && (
-                      <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        className="text-muted-foreground hover:text-destructive shrink-0"
-                        aria-label={t('settings.teams.unshare')}
-                        title={t('settings.teams.unshare')}
-                        onClick={() => handleUnshare(g)}
+                    leading={
+                      <span
+                        aria-hidden="true"
+                        className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md"
+                        title={resourceTypeLabel(g.resource_type)}
                       >
-                        <Trash2 size={16} strokeWidth={1.75} aria-hidden />
-                      </Button>
-                    )}
-                  </li>
+                        {resourceTypeIcon(g.resource_type)}
+                      </span>
+                    }
+                    title={
+                      <span title={g.resource_id}>
+                        {resolveResourceName(g)}
+                      </span>
+                    }
+                    trailing={
+                      <>
+                        <Badge variant="neutral">
+                          {accessLevelLabel(g.access_level)}
+                        </Badge>
+                        {isAdmin && (
+                          <IconButton
+                            variant="ghost-destructive"
+                            size="icon-sm"
+                            className="shrink-0"
+                            label={t('settings.teams.unshare')}
+                            icon={Trash2}
+                            onClick={() => handleUnshare(g)}
+                          />
+                        )}
+                      </>
+                    }
+                  />
                 ))}
-              </ul>
+              </ListRows>
             )}
           </div>
         </div>
@@ -827,29 +793,29 @@ export default function Teams() {
         title={t('settings.teams.createTeam')}
         description={t('settings.teams.createTeamDescription')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeCreateModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleCreate} disabled={!newTeamName.trim()}>
-              {t('settings.teams.create')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeCreateModal}
+            submitLabel={t('settings.teams.create')}
+            onSubmit={handleCreate}
+            disabled={!newTeamName.trim()}
+          />
         }
       >
-        <Input
-          type="text"
-          autoFocus
-          label={t('settings.teams.teamNamePlaceholder')}
-          aria-label={t('settings.teams.teamNamePlaceholder')}
-          value={newTeamName}
-          onChange={(e) => setNewTeamName(e.target.value)}
-          onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
-        />
+        <FormField label={t('settings.teams.teamNamePlaceholder')}>
+          <Input
+            type="text"
+            autoFocus
+            value={newTeamName}
+            onChange={(e) => setNewTeamName(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+          />
+        </FormField>
         {createError && (
-          <p className="text-destructive mt-3 text-sm" role="alert">
-            {createError}
-          </p>
+          <Alert variant="destructive" className="mt-3">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{createError}</AlertDescription>
+          </Alert>
         )}
       </Modal>
 
@@ -860,46 +826,39 @@ export default function Teams() {
         mobileVariant="sheet"
         title={t('settings.teams.editTeam')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeEditModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleEditSave} disabled={!editName.trim()}>
-              {t('settings.teams.save')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeEditModal}
+            submitLabel={t('settings.teams.save')}
+            onSubmit={handleEditSave}
+            disabled={!editName.trim()}
+          />
         }
       >
-        <div className="flex flex-col gap-4">
-          <Input
-            type="text"
-            autoFocus
-            label={t('settings.teams.teamNamePlaceholder')}
-            aria-label={t('settings.teams.teamNamePlaceholder')}
-            value={editName}
-            onChange={(e) => setEditName(e.target.value)}
-          />
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="team-edit-description"
-              className="text-foreground text-sm font-medium"
-            >
-              {t('settings.teams.descriptionLabel')}
-            </label>
-            <textarea
-              id="team-edit-description"
+        <div className="flex flex-col gap-5">
+          <FormField label={t('settings.teams.teamNamePlaceholder')}>
+            <Input
+              type="text"
+              autoFocus
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+            />
+          </FormField>
+          <FormField label={t('settings.teams.descriptionLabel')}>
+            <Textarea
               rows={3}
-              className="border-border bg-background text-foreground focus-visible:ring-ring/50 focus-visible:border-ring placeholder:text-muted-foreground w-full resize-none rounded-lg border px-3 py-2 text-sm outline-none focus-visible:ring-[3px]"
+              resize="none"
               placeholder={t('settings.teams.descriptionPlaceholder')}
               value={editDescription}
               onChange={(e) => setEditDescription(e.target.value)}
             />
-          </div>
+          </FormField>
         </div>
         {editError && (
-          <p className="text-destructive mt-3 text-sm" role="alert">
-            {editError}
-          </p>
+          <Alert variant="destructive" className="mt-3">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{editError}</AlertDescription>
+          </Alert>
         )}
       </Modal>
 
@@ -913,42 +872,32 @@ export default function Teams() {
         title={t('settings.teams.addMemberTitle')}
         description={t('settings.teams.addMemberDescription')}
         footer={
-          <>
-            <Button variant="ghost" onClick={closeAddMemberModal}>
-              {t('cancel')}
-            </Button>
-            <Button onClick={handleAddMember} disabled={!newMemberEmail.trim()}>
-              {t('settings.teams.add')}
-            </Button>
-          </>
+          <ModalActions
+            cancelLabel={t('cancel')}
+            onCancel={closeAddMemberModal}
+            submitLabel={t('settings.teams.add')}
+            onSubmit={handleAddMember}
+            disabled={!newMemberEmail.trim()}
+          />
         }
       >
-        <div className="flex flex-col gap-4">
-          <Input
-            type="email"
-            autoFocus
-            label={t('settings.teams.memberEmailLabel')}
-            aria-label={t('settings.teams.memberEmailLabel')}
-            placeholder={t('settings.teams.memberEmailPlaceholder')}
-            value={newMemberEmail}
-            onChange={(e) => setNewMemberEmail(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && handleAddMember()}
-          />
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="add-member-role"
-              className="text-foreground text-sm font-medium"
-            >
-              {t('settings.teams.memberRoleLabel')}
-            </label>
+        <div className="flex flex-col gap-5">
+          <FormField label={t('settings.teams.memberEmailLabel')}>
+            <Input
+              type="email"
+              autoFocus
+              placeholder={t('settings.teams.memberEmailPlaceholder')}
+              value={newMemberEmail}
+              onChange={(e) => setNewMemberEmail(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleAddMember()}
+            />
+          </FormField>
+          <FormField label={t('settings.teams.memberRoleLabel')}>
             <Select
               value={newMemberRole}
               onValueChange={(value) => setNewMemberRole(value as TeamRole)}
             >
-              <SelectTrigger
-                id="add-member-role"
-                aria-label={t('settings.teams.memberRoleLabel')}
-              >
+              <SelectTrigger size="field" className="w-full">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -960,12 +909,13 @@ export default function Teams() {
                 </SelectItem>
               </SelectContent>
             </Select>
-          </div>
+          </FormField>
         </div>
         {addMemberError && (
-          <p className="text-destructive mt-3 text-sm" role="alert">
-            {addMemberError}
-          </p>
+          <Alert variant="destructive" className="mt-3">
+            <CircleAlert className="size-4" aria-hidden="true" />
+            <AlertDescription>{addMemberError}</AlertDescription>
+          </Alert>
         )}
       </Modal>
 
@@ -978,7 +928,7 @@ export default function Teams() {
         submitLabel={t('settings.teams.deleteTeam')}
         handleSubmit={confirmDeleteTeam}
         handleCancel={() => setTeamToDelete(null)}
-        variant="danger"
+        variant="destructive"
       />
       <ConfirmationModal
         message={t('settings.teams.removeMemberConfirmation')}
@@ -987,8 +937,8 @@ export default function Teams() {
         submitLabel={t('settings.teams.remove')}
         handleSubmit={confirmRemoveMember}
         handleCancel={() => setMemberToRemove(null)}
-        variant="danger"
+        variant="destructive"
       />
-    </div>
+    </SectionShell>
   );
 }
diff --git a/frontend/src/settings/TestRetrievalModal.notices.test.tsx b/frontend/src/settings/TestRetrievalModal.notices.test.tsx
new file mode 100644
index 00000000..0dbe9df2
--- /dev/null
+++ b/frontend/src/settings/TestRetrievalModal.notices.test.tsx
@@ -0,0 +1,117 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('../hooks', () => ({
+  useMediaQuery: () => ({ isMobile: false, isDesktop: true }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const testSourceRetrieval = vi.fn();
+vi.mock('../api/services/userService', () => ({
+  default: {
+    testSourceRetrieval: (...args: unknown[]) => testSourceRetrieval(...args),
+  },
+}));
+
+import type { Doc } from '../models/misc';
+import TestRetrievalModal from './TestRetrievalModal';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const doc = (config: Doc['config']): Doc =>
+  ({ id: 'src-1', name: 'Handbook', config }) as Doc;
+
+const alerts = () =>
+  Array.from(document.body.querySelectorAll<HTMLElement>('[role="alert"]'));
+
+describe('TestRetrievalModal notices', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    testSourceRetrieval.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = (document: Doc) =>
+    act(() => {
+      root.render(
+        <TestRetrievalModal
+          modalState="ACTIVE"
+          setModalState={() => undefined}
+          document={document}
+        />,
+      );
+    });
+
+  it('sizes the Run button to the query field row', () => {
+    render(doc(undefined));
+    const run = Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>('[data-slot="button"]'),
+    ).find((b) => b.textContent === 'settings.sources.testRetrieval.run');
+    expect(run?.getAttribute('data-size')).toBe('field');
+    expect(run?.getAttribute('data-shape')).toBe('pill');
+    // 38px, the height of the Input beside it.
+    expect(run?.className).toContain('h-9.5');
+  });
+
+  it('shows an invalid prescreen config as a warning Alert with an icon', () => {
+    render(
+      doc({
+        retrieval: { chunks: 10, prescreen: { candidate_k: 5, max_keep: 3 } },
+      } as Doc['config']),
+    );
+
+    const warning = alerts().find((el) =>
+      el.textContent?.includes(
+        'settings.sources.configModal.prescreenInvalidHint',
+      ),
+    );
+    expect(warning).toBeDefined();
+    expect(warning?.className).toContain('text-warning');
+    expect(warning?.querySelector('svg')).not.toBeNull();
+  });
+
+  it('shows a failed run as a destructive Alert with an icon', async () => {
+    testSourceRetrieval.mockRejectedValue(new Error('network'));
+    render(doc(undefined));
+
+    const input =
+      document.body.querySelector<HTMLInputElement>('input[type="text"]');
+    expect(input).not.toBeNull();
+    const setValue = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    )?.set;
+    act(() => {
+      setValue?.call(input, 'fuel surcharge');
+      input?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await act(async () => {
+      input?.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+
+    const error = alerts().find((el) =>
+      el.textContent?.includes('settings.sources.testRetrieval.errors.failed'),
+    );
+    expect(error).toBeDefined();
+    expect(error?.className).toContain('text-destructive');
+    expect(error?.querySelector('svg')).not.toBeNull();
+  });
+});
diff --git a/frontend/src/settings/TestRetrievalModal.tsx b/frontend/src/settings/TestRetrievalModal.tsx
index 6de11f45..97bb6c94 100644
--- a/frontend/src/settings/TestRetrievalModal.tsx
+++ b/frontend/src/settings/TestRetrievalModal.tsx
@@ -1,12 +1,14 @@
+import { CircleAlert, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import Spinner from '../components/Spinner';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Modal } from '../components/ui/modal';
+import { cn } from '../lib/utils';
 import { ActiveState, Doc } from '../models/misc';
 import type { Model } from '../models/types';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -176,25 +178,17 @@ export default function TestRetrievalModal({
     <Modal
       open={modalState === 'ACTIVE'}
       onOpenChange={(o) => !o && closeModal()}
-      hideTitle
       title={tr('title')}
-      size="lg"
+      description={
+        document?.name
+          ? tr('subtitle', { name: document.name })
+          : tr('subtitleGeneric')
+      }
+      // xl, like PromptsModal, so the two large modals read as one family.
+      size="xl"
       mobileVariant="sheet"
-      // Same width ramp and padding as PromptsModal so the two large modals
-      // read as one family.
-      className="bg-card dark:bg-card w-[95vw] max-w-[650px] rounded-2xl px-4 py-4 sm:px-6 sm:py-6 md:max-w-[860px] md:px-8 md:py-6 lg:max-w-[980px]"
-      contentClassName="max-h-[70vh]"
     >
       <div className="flex flex-col">
-        <p className="mb-1 text-xl font-semibold text-[#2B2B2B] dark:text-white">
-          {tr('title')}
-        </p>
-        <p className="dark:text-muted-foreground mb-6 text-sm text-[#6B6B6B]">
-          {document?.name
-            ? tr('subtitle', { name: document.name })
-            : tr('subtitleGeneric')}
-        </p>
-
         <div className="flex flex-col gap-4">
           <div className="flex flex-row items-center gap-2">
             <Input
@@ -202,7 +196,8 @@ export default function TestRetrievalModal({
               value={query}
               autoFocus
               placeholder={tr('queryPlaceholder')}
-              className="h-[42px] flex-1 rounded-3xl px-4"
+              shape="pill"
+              className="flex-1"
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') handleRun();
@@ -212,9 +207,12 @@ export default function TestRetrievalModal({
               type="button"
               disabled={!canRun}
               onClick={handleRun}
-              className="h-[42px] min-w-[96px] shrink-0 rounded-3xl px-6 text-sm font-medium"
+              size="field"
+              shape="pill"
+              loading={running}
+              className="shrink-0"
             >
-              {running ? <Spinner size="small" /> : tr('run')}
+              {tr('run')}
             </Button>
           </div>
 
@@ -230,15 +228,19 @@ export default function TestRetrievalModal({
           <p className="text-muted-foreground text-xs">{tr('notSavedHint')}</p>
 
           {!prescreenValid && (
-            <div className="rounded-xl bg-amber-50 p-3 text-xs text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
-              {t('settings.sources.configModal.prescreenInvalidHint')}
-            </div>
+            <Alert variant="warning">
+              <TriangleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>
+                {t('settings.sources.configModal.prescreenInvalidHint')}
+              </AlertDescription>
+            </Alert>
           )}
 
           {error && (
-            <div className="rounded-xl bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/40 dark:text-red-300">
-              {error}
-            </div>
+            <Alert variant="destructive">
+              <CircleAlert className="size-4" aria-hidden="true" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
           )}
 
           {result && (
@@ -263,7 +265,7 @@ export default function TestRetrievalModal({
                   return (
                     <div
                       key={chunk.rank}
-                      className="border-border bg-muted/40 rounded-xl border p-4"
+                      className="border-border bg-muted rounded-xl border p-4"
                     >
                       <div className="mb-2 flex flex-row items-center justify-between gap-2">
                         <div className="flex min-w-0 flex-row items-center gap-2">
@@ -288,17 +290,19 @@ export default function TestRetrievalModal({
                           in, the collapsed clamp spends its 3 lines on nothing
                           and the preview looks empty. */}
                       <p
-                        className={`text-muted-foreground text-sm whitespace-pre-wrap ${
-                          isOpen ? '' : 'line-clamp-3'
-                        }`}
+                        className={cn(
+                          'text-muted-foreground text-sm whitespace-pre-wrap',
+                          !isOpen && 'line-clamp-3',
+                        )}
                       >
                         {chunk.text.trim()}
                       </p>
                       <Button
                         type="button"
                         variant="link"
+                        size="xs"
                         onClick={() => toggleExpanded(chunk.rank)}
-                        className="text-muted-foreground h-auto px-0 py-1 text-xs"
+                        className="-ml-2"
                       >
                         {isOpen ? tr('showLess') : tr('showMore')}
                       </Button>
diff --git a/frontend/src/settings/ToolConfig.test.tsx b/frontend/src/settings/ToolConfig.test.tsx
new file mode 100644
index 00000000..d38cf092
--- /dev/null
+++ b/frontend/src/settings/ToolConfig.test.tsx
@@ -0,0 +1,396 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: unknown) =>
+      typeof fallback === 'string' ? fallback : key,
+  }),
+}));
+
+vi.mock('../hooks', () => ({ useDarkTheme: () => [false, () => {}] }));
+vi.mock('../navigation/DetailBreadcrumb', () => ({ default: () => null }));
+vi.mock('../modals/ConfirmationModal', () => ({ default: () => null }));
+vi.mock('../modals/AddActionModal', () => ({ default: () => null }));
+vi.mock('../modals/ImportSpecModal', () => ({ default: () => null }));
+
+const updateTool = vi.fn();
+vi.mock('../api/services/userService', () => ({
+  default: {
+    updateTool: (...args: unknown[]) => updateTool(...args),
+    deleteTool: () => Promise.resolve(),
+  },
+}));
+
+import type { APIToolType, UserToolType } from './types';
+import ToolConfig from './ToolConfig';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const userTool = {
+  id: 'tool-1',
+  name: 'brave_search',
+  displayName: 'Brave',
+  description: '',
+  status: true,
+  config: {},
+  actions: [
+    {
+      name: 'search',
+      description: 'Search the web',
+      active: true,
+      parameters: {
+        type: 'object',
+        properties: {
+          q: {
+            type: 'string',
+            description: '',
+            value: '',
+            filled_by_llm: true,
+          },
+        },
+      },
+    },
+  ],
+} as unknown as UserToolType;
+
+const apiTool = {
+  id: 'tool-2',
+  name: 'api_tool',
+  displayName: 'API',
+  description: '',
+  status: true,
+  config: {
+    actions: {
+      list: {
+        name: 'list',
+        method: 'POST',
+        url: 'https://example.com',
+        description: 'List things',
+        active: true,
+        body: { type: 'object', properties: {} },
+        headers: {
+          type: 'object',
+          properties: {
+            Accept: {
+              type: 'string',
+              description: '',
+              value: '',
+              filled_by_llm: false,
+            },
+          },
+        },
+        query_params: { type: 'object', properties: {} },
+        body_content_type: 'application/json',
+        body_encoding_rules: {},
+      },
+    },
+  },
+} as unknown as APIToolType;
+
+describe('ToolConfig', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    updateTool.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  const render = async (tool: UserToolType | APIToolType) => {
+    await act(async () => {
+      root.render(
+        <ToolConfig tool={tool} setTool={() => {}} handleGoBack={() => {}} />,
+      );
+    });
+  };
+
+  const buttonByText = (text: string) =>
+    Array.from(container.querySelectorAll<HTMLElement>('button')).find(
+      (el) => el.textContent === text,
+    );
+
+  it('renders the header Save as a small pill with no class overrides', async () => {
+    await render(userTool);
+    const save = buttonByText('settings.tools.save');
+    expect(save?.dataset.size).toBe('sm');
+    expect(save?.dataset.shape).toBe('pill');
+    expect(save?.className).not.toMatch(/text-white|text-xs/);
+  });
+
+  it('renders the actions search as a labelled pill SearchInput with an inset icon', async () => {
+    await render(userTool);
+    const label = Array.from(container.querySelectorAll('label')).find(
+      (el) => el.textContent === 'settings.tools.searchActions',
+    );
+    const search = label?.htmlFor
+      ? container.querySelector<HTMLInputElement>(
+          `input[id="${label.htmlFor}"]`,
+        )
+      : null;
+    expect(search?.dataset.shape).toBe('pill');
+    expect(search?.className).toContain('pl-10');
+    expect(search?.parentElement?.querySelector('svg')).not.toBeNull();
+  });
+
+  it('renders the parameter table fields at the small Input size', async () => {
+    await render(userTool);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    const tableInputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>('table input[data-slot]'),
+    );
+    expect(tableInputs.length).toBeGreaterThan(0);
+    tableInputs.forEach((input) => {
+      expect(input.dataset.size).toBe('sm');
+      expect(input.className).not.toMatch(/rounded-lg|h-auto/);
+    });
+  });
+
+  it('shows a failed save as a destructive Alert', async () => {
+    updateTool.mockRejectedValue(new Error('nope'));
+    await render({ ...userTool, customName: '' });
+    const name = container.querySelector<HTMLInputElement>(
+      'input[placeholder="settings.tools.customNamePlaceholder"]',
+    );
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      )?.set;
+      setter?.call(name, 'Renamed');
+      name?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    await act(async () => {
+      buttonByText('settings.tools.save')?.click();
+    });
+    const alert = container.querySelector<HTMLElement>('[role="alert"]');
+    expect(alert?.textContent).toBe('settings.tools.saveFailed');
+    expect(alert?.className).toContain('text-destructive');
+  });
+
+  it('renders the API tool header actions as outline-primary pills', async () => {
+    await render(apiTool);
+    for (const label of [
+      'settings.tools.importSpec',
+      'settings.tools.addAction',
+    ]) {
+      const button = buttonByText(label);
+      expect(button?.dataset.variant).toBe('outline-primary');
+      expect(button?.dataset.shape).toBe('pill');
+    }
+  });
+
+  it('renders Actions as a section title with the API buttons as its actions', async () => {
+    await render(apiTool);
+    const heading = Array.from(container.querySelectorAll('h2')).find(
+      (el) => el.textContent === 'settings.tools.actions',
+    );
+    expect(heading?.className).toContain('text-lg font-semibold');
+    const header = heading?.closest('[data-slot="section-header"]');
+    expect(header?.contains(buttonByText('settings.tools.importSpec')!)).toBe(
+      true,
+    );
+    expect(header?.contains(buttonByText('settings.tools.addAction')!)).toBe(
+      true,
+    );
+  });
+
+  it('renders Actions as a section title without buttons on a non-API tool', async () => {
+    await render(userTool);
+    const heading = Array.from(container.querySelectorAll('h2')).find(
+      (el) => el.textContent === 'settings.tools.actions',
+    );
+    expect(heading?.className).toContain('text-lg font-semibold');
+    expect(buttonByText('settings.tools.importSpec')).toBeUndefined();
+  });
+
+  it('renders the API action form as 42px pills with remove icons', async () => {
+    await render(apiTool);
+    const deleteAction = container.querySelector<HTMLElement>(
+      'button[aria-label="convTile.delete"]',
+    );
+    expect(deleteAction?.hasAttribute('title')).toBe(false);
+    expect(deleteAction?.dataset.variant).toBe('ghost-destructive');
+    expect(deleteAction?.dataset.size).toBe('icon-xs');
+
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    const urlField = container.querySelector<HTMLInputElement>(
+      'input[value="https://example.com"]',
+    );
+    expect(urlField?.dataset.shape).toBe('pill');
+    expect(urlField?.dataset.size).toBe('default');
+    const triggers = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-slot="select-trigger"]'),
+    );
+    expect(triggers).toHaveLength(2);
+    triggers.forEach((trigger) => {
+      expect(trigger.dataset.size).toBe('field');
+      expect(trigger.className).not.toContain('rounded-3xl');
+    });
+    const addNew = buttonByText('settings.tools.addNew');
+    expect(addNew?.dataset.variant).toBe('outline-primary');
+    expect(addNew?.dataset.shape).toBe('pill');
+    const removeRow = container.querySelector<HTMLElement>(
+      'table button[data-variant="ghost-destructive"]',
+    );
+    expect(removeRow?.dataset.size).toBe('icon-xs');
+  });
+
+  it('renders the body type hint as a FormField hint and the action sections as xs sub-headings', async () => {
+    await render(apiTool);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    const hint = Array.from(container.querySelectorAll('p')).find(
+      (el) => el.textContent === 'settings.tools.bodyTypeHint.json',
+    );
+    expect(hint?.className).toBe('text-muted-foreground text-xs');
+    expect(hint?.id).toBeTruthy();
+    expect(
+      container.querySelector(`[aria-describedby~="${hint?.id}"]`),
+    ).not.toBeNull();
+    const headers = Array.from(container.querySelectorAll('h3')).find(
+      (el) => el.textContent === 'settings.tools.headers',
+    );
+    expect(headers?.className).toContain('text-sm font-semibold');
+  });
+
+  it('renders the property type as a small Select, not a native select', async () => {
+    const list = (apiTool.config as { actions: Record<string, object> }).actions
+      .list;
+    await render({
+      ...apiTool,
+      config: {
+        actions: {
+          list: {
+            ...list,
+            query_params: {
+              type: 'object',
+              properties: {
+                limit: {
+                  type: 'integer',
+                  description: '',
+                  value: '',
+                  filled_by_llm: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    } as unknown as APIToolType);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    expect(container.querySelector('select:not([aria-hidden])')).toBeNull();
+    const typeTrigger = container.querySelector<HTMLElement>(
+      'table [data-slot="select-trigger"]',
+    );
+    expect(typeTrigger?.dataset.size).toBe('sm');
+    expect(typeTrigger?.getAttribute('aria-label')).toBe('settings.tools.type');
+    expect(typeTrigger?.textContent).toContain('integer');
+  });
+
+  it('opens an action header from the keyboard', async () => {
+    await render(apiTool);
+    const header = container.querySelector<HTMLElement>(
+      '[role="button"][aria-expanded]',
+    );
+    expect(header?.tabIndex).toBe(0);
+    expect(header?.getAttribute('aria-expanded')).toBe('false');
+    await act(async () => {
+      header?.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    expect(header?.getAttribute('aria-expanded')).toBe('true');
+    expect(
+      container.querySelector('input[value="https://example.com"]'),
+    ).not.toBeNull();
+  });
+
+  it('renders the parameter table from the ui/table parts', async () => {
+    await render(userTool);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    expect(container.querySelector('.table-default')).toBeNull();
+    const table = container.querySelector('table');
+    expect(table?.dataset.slot).toBe('table');
+    expect(table?.closest('[data-slot="table-container"]')).not.toBeNull();
+    const heads = Array.from(table?.querySelectorAll('th') ?? []);
+    expect(heads.length).toBe(5);
+    heads.forEach((th) => expect(th.dataset.slot).toBe('table-header'));
+    table?.querySelectorAll('td').forEach((td) => {
+      expect(td.dataset.slot).toBe('table-cell');
+    });
+  });
+
+  it('renders the API property tables from the ui/table parts with 50px delete columns', async () => {
+    await render(apiTool);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    expect(container.querySelector('.table-default')).toBeNull();
+    const tables = Array.from(container.querySelectorAll('table'));
+    expect(tables).toHaveLength(3);
+    tables.forEach((table) => {
+      expect(table.dataset.slot).toBe('table');
+      expect(table.closest('[data-slot="table-container"]')).not.toBeNull();
+      table.querySelectorAll('th').forEach((th) => {
+        expect(th.dataset.slot).toBe('table-header');
+        expect(th.className).not.toContain('!');
+      });
+    });
+    const deleteCell = container
+      .querySelector('table button[data-variant="ghost-destructive"]')
+      ?.closest('td');
+    expect(deleteCell?.dataset.slot).toBe('table-cell');
+    expect(deleteCell?.style.getPropertyValue('--cell-width')).toBe('50px');
+    expect(deleteCell?.className).toContain('text-center');
+    expect(deleteCell?.className).not.toMatch(/p-0|!/);
+  });
+
+  it('renders the add-property Cancel as a ghost pill', async () => {
+    await render(apiTool);
+    await act(async () => {
+      (
+        container.querySelector('[class*="cursor-pointer"]') as HTMLElement
+      ).click();
+    });
+    await act(async () => {
+      buttonByText('settings.tools.addNew')?.click();
+    });
+    const cancel = buttonByText('settings.tools.cancel');
+    expect(cancel?.dataset.variant).toBe('ghost');
+    expect(cancel?.dataset.size).toBe('sm');
+    expect(cancel?.dataset.shape).toBe('pill');
+  });
+});
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index 6c845131..cc66f616 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -1,15 +1,12 @@
+import { ChevronRight, CircleCheck, CircleX, Trash2 } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ChevronRight from '../assets/chevron-right.svg';
-import CircleCheck from '../assets/circle-check.svg';
-import CircleX from '../assets/circle-x.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import Trash from '../assets/trash.svg';
 import ConfigFields from '../components/ConfigFields';
+import SearchInput from '../components/SearchInput';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import {
   Select,
   SelectContent,
@@ -17,25 +14,48 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../components/ui/select';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Checkbox } from '../components/ui/checkbox';
+import { EmptyState } from '../components/ui/empty-state';
+import { FormField } from '../components/ui/form-field';
+import { IconButton } from '../components/ui/icon-button';
 import { Input } from '../components/ui/input';
+import { SectionHeader } from '../components/ui/section-header';
 import { Switch } from '../components/ui/switch';
-import { useDarkTheme } from '../hooks';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../components/ui/table';
 import AddActionModal from '../modals/AddActionModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import DetailBreadcrumb from '../navigation/DetailBreadcrumb';
 import ImportSpecModal from '../modals/ImportSpecModal';
 import { ActiveState } from '../models/misc';
 import { selectToken } from '../preferences/preferenceSlice';
-import { getMethodColorClass } from '../utils/httpMethodColors';
+import { getMethodBadgeVariant } from '../utils/httpMethodColors';
 import { areObjectsEqual } from '../utils/objectUtils';
+import { cn, focusRing } from '@/lib/utils';
 import { APIActionType, APIToolType, UserToolType } from './types';
 
-// The `!` suffix is required because the surrounding `@utility table-default`
-// rules in index.css (min-w 150px, max-w 320px, p-4 / px-4 py-2) out-specify
-// plain Tailwind utility classes. Inline style={{...}} used to win on
-// specificity; the `!` keeps that behaviour without resorting to inline styles.
-const NARROW_CELL = 'w-[50px]! min-w-[50px]! max-w-[50px]! p-0!';
+const BODY_TYPE_HINT_KEYS: Record<string, string> = {
+  'application/json': 'json',
+  'application/x-www-form-urlencoded': 'formUrlencoded',
+  'multipart/form-data': 'multipart',
+  'text/plain': 'text',
+  'application/xml': 'xml',
+  'application/octet-stream': 'octetStream',
+};
+
+/** Maps a body content type to its hint's locale key suffix (JSON by default). */
+function bodyTypeHintKey(contentType?: string): string {
+  return BODY_TYPE_HINT_KEYS[contentType || 'application/json'] ?? 'json';
+}
 
 export default function ToolConfig({
   tool,
@@ -88,7 +108,6 @@ export default function ToolConfig({
     Set<number>
   >(new Set());
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
 
   const toggleUserActionExpand = (index: number) => {
     setExpandedUserActions((prev) => {
@@ -141,7 +160,9 @@ export default function ToolConfig({
       if (spec.required && !configValues[key]?.toString().trim()) {
         const hasEncCreds = !!(tool as any).config?.has_encrypted_credentials;
         if (!(spec.secret && hasEncCreds)) {
-          newErrors[key] = `${spec.label || key} is required`;
+          newErrors[key] = t('settings.tools.configErrors.required', {
+            field: spec.label || key,
+          });
         }
       }
       if (
@@ -151,10 +172,10 @@ export default function ToolConfig({
       ) {
         const num = Number(configValues[key]);
         if (isNaN(num) || num < 1) {
-          newErrors[key] = 'Must be a positive number';
+          newErrors[key] = t('settings.tools.configErrors.positiveNumber');
         }
         if (key === 'timeout' && num > 300) {
-          newErrors[key] = 'Maximum timeout is 300 seconds';
+          newErrors[key] = t('settings.tools.configErrors.maxTimeout');
         }
       }
     });
@@ -329,7 +350,7 @@ export default function ToolConfig({
     });
   };
   return (
-    <div className="scrollbar-overlay mt-8 flex flex-col gap-4">
+    <div className="scrollbar-overlay flex flex-col gap-4">
       <div className="mb-4 flex items-center justify-between gap-3">
         <DetailBreadcrumb
           parentLabel={t('settings.tools.label')}
@@ -338,41 +359,44 @@ export default function ToolConfig({
         />
         <Button
           type="button"
-          className="rounded-full px-3 py-2 text-xs text-nowrap text-white sm:px-4 sm:py-2"
+          size="sm"
+          shape="pill"
           onClick={handleSaveChanges}
-          disabled={!hasUnsavedChanges || saving}
+          disabled={!hasUnsavedChanges}
+          loading={saving}
         >
-          {saving ? t('settings.tools.saving') : t('settings.tools.save')}
+          {t('settings.tools.save')}
         </Button>
       </div>
       {saveError && (
-        <div className="mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400">
-          {saveError}
-        </div>
+        <Alert variant="destructive" className="mb-2">
+          <AlertDescription>{saveError}</AlertDescription>
+        </Alert>
       )}
-      <div className="mt-1">
-        <p className="text-foreground dark:text-foreground text-sm font-semibold">
-          {t('settings.tools.customName')}
-        </p>
-        <div className="relative mt-4 w-full max-w-96">
-          <Input
-            type="text"
-            value={customName}
-            onChange={(e) => setCustomName(e.target.value)}
-            placeholder={t('settings.tools.customNamePlaceholder')}
-            className="rounded-xl"
-          />
-        </div>
-      </div>
+      <FormField
+        label={t('settings.tools.customName')}
+        labelSurface="background"
+        className="mt-4 w-full max-w-96"
+      >
+        <Input
+          type="text"
+          value={customName}
+          onChange={(e) => setCustomName(e.target.value)}
+          placeholder={t('settings.tools.customNamePlaceholder')}
+        />
+      </FormField>
       <div className="mt-1">
         {tool.name !== 'api_tool' &&
           Object.keys(configRequirements).length > 0 && (
-            <div>
-              <p className="text-foreground dark:text-foreground mb-4 text-sm font-semibold">
-                {t('settings.tools.authentication')}
-              </p>
+            <div className="flex flex-col gap-4">
+              <SectionHeader
+                as="h3"
+                size="xs"
+                title={t('settings.tools.authentication')}
+              />
               <div className="max-w-96">
                 <ConfigFields
+                  labelSurface="background"
                   configRequirements={configRequirements}
                   values={configValues}
                   onChange={handleFieldChange}
@@ -387,79 +411,60 @@ export default function ToolConfig({
           )}
       </div>
       <div className="flex flex-col gap-4">
-        <div className="mx-0 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40"></div>
-        <div className="flex w-full flex-row items-center justify-between gap-2">
-          <p className="text-foreground dark:text-foreground text-base font-semibold">
-            {t('settings.tools.actions')}
-          </p>
-          {tool.name === 'api_tool' && (
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setImportModalState('ACTIVE')}
-                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-full px-5 py-1"
-              >
-                {t('settings.tools.importSpec')}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setActionModalState('ACTIVE')}
-                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground rounded-full px-5 py-1"
-              >
-                {t('settings.tools.addAction')}
-              </Button>
-            </div>
-          )}
-        </div>
+        <div className="bg-border mx-0 my-2 h-[0.8px] w-full rounded-full"></div>
+        <SectionHeader
+          title={t('settings.tools.actions')}
+          actions={
+            tool.name === 'api_tool' ? (
+              <>
+                <Button
+                  type="button"
+                  variant="outline-primary"
+                  shape="pill"
+                  onClick={() => setImportModalState('ACTIVE')}
+                >
+                  {t('settings.tools.importSpec')}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline-primary"
+                  shape="pill"
+                  onClick={() => setActionModalState('ACTIVE')}
+                >
+                  {t('settings.tools.addAction')}
+                </Button>
+              </>
+            ) : null
+          }
+        />
         {tool.name === 'api_tool' ? (
           <>
             {tool.config.actions &&
             Object.keys(tool.config.actions).length > 0 ? (
               <APIToolConfig tool={tool as APIToolType} setTool={setTool} />
             ) : (
-              <div className="flex flex-col items-center justify-center py-8">
-                <img
-                  src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                  alt="No actions found"
-                  className="mx-auto mb-4 h-24 w-24"
-                />
-                <p className="text-center text-gray-500 dark:text-gray-400">
-                  {t('settings.tools.noActionsFound')}
-                </p>
-              </div>
+              <EmptyState
+                size="sm"
+                title={t('settings.tools.noActionsFound')}
+              />
             )}
           </>
         ) : (
           <div className="flex flex-col gap-4">
             {'actions' in tool && tool.actions && tool.actions.length > 0 ? (
               <>
-                <div className="relative">
-                  <svg
-                    className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={2}
-                    stroke="currentColor"
-                  >
-                    <circle cx="11" cy="11" r="8" />
-                    <path strokeLinecap="round" d="m21 21-4.35-4.35" />
-                  </svg>
-                  <Input
-                    type="text"
-                    value={userActionsSearch}
-                    onChange={(e) => setUserActionsSearch(e.target.value)}
-                    placeholder={t('settings.tools.searchActions')}
-                    className="h-10 rounded-full pr-4 pl-10 text-sm md:text-sm"
-                  />
-                </div>
+                <SearchInput
+                  value={userActionsSearch}
+                  onChange={(e) => setUserActionsSearch(e.target.value)}
+                  label={t('settings.tools.searchActions')}
+                />
 
                 {filteredUserActions.length === 0 && userActionsSearch && (
-                  <p className="py-4 text-center text-gray-500 dark:text-gray-400">
-                    {t('settings.tools.noActionsMatch')}
-                  </p>
+                  <EmptyState
+                    size="xs"
+                    illustration="none"
+                    title={t('settings.tools.noActionsMatch')}
+                  />
                 )}
 
                 {filteredUserActions.map(({ action, originalIndex }) => {
@@ -467,23 +472,38 @@ export default function ToolConfig({
                   return (
                     <div
                       key={originalIndex}
-                      className="border-border dark:border-border w-full rounded-xl border"
+                      className="border-border w-full rounded-xl border"
                     >
                       <div
-                        className={`border-border dark:border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
+                        className={cn(
+                          'border-border bg-muted flex cursor-pointer flex-wrap items-center justify-between px-4 py-3 outline-none',
+                          isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl',
+                          focusRing,
+                        )}
                         onClick={() => toggleUserActionExpand(originalIndex)}
+                        role="button"
+                        tabIndex={0}
+                        aria-expanded={isExpanded}
+                        onKeyDown={(e) => {
+                          if (e.target !== e.currentTarget) return;
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            toggleUserActionExpand(originalIndex);
+                          }
+                        }}
                       >
                         <div className="flex items-center gap-3">
-                          <img
-                            src={ChevronRight}
-                            alt="expand"
-                            className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
+                          <ChevronRight
+                            className={cn(
+                              'text-muted-foreground size-4 transition-transform duration-200',
+                              isExpanded && 'rotate-90',
+                            )}
                           />
-                          <p className="text-foreground dark:text-foreground font-semibold">
+                          <p className="text-foreground font-semibold">
                             {action.name}
                           </p>
                           {action.description && (
-                            <p className="hidden truncate text-sm text-gray-500 md:block md:max-w-xs lg:max-w-md dark:text-gray-400">
+                            <p className="text-muted-foreground hidden truncate text-sm md:block md:max-w-xs lg:max-w-md">
                               {action.description}
                             </p>
                           )}
@@ -493,9 +513,12 @@ export default function ToolConfig({
                           onClick={(e) => e.stopPropagation()}
                         >
                           <div className="flex items-center gap-1">
-                            <span className="text-xs text-gray-500 dark:text-gray-400">
+                            <label
+                              htmlFor={`approvalToggle-${originalIndex}`}
+                              className="text-muted-foreground text-xs"
+                            >
                               {t('settings.tools.requireApproval', 'Approval')}
-                            </span>
+                            </label>
                             <Switch
                               checked={action.require_approval ?? false}
                               onCheckedChange={(checked) => {
@@ -529,6 +552,9 @@ export default function ToolConfig({
                               });
                             }}
                             id={`actionToggle-${originalIndex}`}
+                            aria-label={t('settings.tools.toggleToolAria', {
+                              toolName: action.name,
+                            })}
                           />
                         </div>
                       </div>
@@ -539,6 +565,7 @@ export default function ToolConfig({
                               type="text"
                               className="w-full"
                               label={t('settings.tools.descriptionPlaceholder')}
+                              labelSurface="background"
                               value={action.description}
                               onChange={(e) => {
                                 setTool({
@@ -557,132 +584,149 @@ export default function ToolConfig({
                             />
                           </div>
                           <div className="px-5 py-4">
-                            <table className="table-default">
-                              <thead>
-                                <tr>
-                                  <th>{t('settings.tools.fieldName')}</th>
-                                  <th>{t('settings.tools.fieldType')}</th>
-                                  <th>{t('settings.tools.filledByLLM')}</th>
-                                  <th>
-                                    {t('settings.tools.fieldDescription')}
-                                  </th>
-                                  <th>{t('settings.tools.value')}</th>
-                                </tr>
-                              </thead>
-                              <tbody>
-                                {Object.entries(
-                                  action.parameters?.properties,
-                                ).map((param, paramIndex) => {
-                                  const uniqueKey = `${originalIndex}-${param[0]}`;
-                                  return (
-                                    <tr
-                                      key={paramIndex}
-                                      className="font-normal text-nowrap"
-                                    >
-                                      <td>{param[0]}</td>
-                                      <td>{param[1].type}</td>
-                                      <td>
-                                        <label
-                                          htmlFor={uniqueKey}
-                                          className="ml-2.5 flex cursor-pointer items-start gap-4"
-                                        >
-                                          <div className="flex items-center">
-                                            &#8203;
-                                            <input
-                                              checked={param[1].filled_by_llm}
-                                              id={uniqueKey}
-                                              type="checkbox"
-                                              className="size-4 rounded-sm border-gray-300 bg-transparent"
-                                              onChange={() =>
-                                                handleCheckboxChange(
-                                                  originalIndex,
-                                                  param[0],
-                                                )
-                                              }
-                                            />
-                                          </div>
-                                        </label>
-                                      </td>
-                                      <td className="w-10">
-                                        <Input
-                                          key={uniqueKey}
-                                          value={param[1].description}
-                                          className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
-                                          onChange={(e) => {
-                                            setTool({
-                                              ...tool,
-                                              actions: tool.actions.map(
-                                                (act, index) => {
-                                                  if (index === originalIndex) {
-                                                    return {
-                                                      ...act,
-                                                      parameters: {
-                                                        ...act.parameters,
-                                                        properties: {
-                                                          ...act.parameters
-                                                            .properties,
-                                                          [param[0]]: {
+                            <TableContainer>
+                              <Table>
+                                <TableHead>
+                                  <TableRow>
+                                    <TableHeader>
+                                      {t('settings.tools.fieldName')}
+                                    </TableHeader>
+                                    <TableHeader>
+                                      {t('settings.tools.fieldType')}
+                                    </TableHeader>
+                                    <TableHeader>
+                                      {t('settings.tools.filledByLLM')}
+                                    </TableHeader>
+                                    <TableHeader>
+                                      {t('settings.tools.fieldDescription')}
+                                    </TableHeader>
+                                    <TableHeader>
+                                      {t('settings.tools.value')}
+                                    </TableHeader>
+                                  </TableRow>
+                                </TableHead>
+                                <TableBody>
+                                  {Object.entries(
+                                    action.parameters?.properties,
+                                  ).map((param, paramIndex) => {
+                                    const uniqueKey = `${originalIndex}-${param[0]}`;
+                                    return (
+                                      <TableRow key={paramIndex}>
+                                        <TableCell className="text-nowrap">
+                                          {param[0]}
+                                        </TableCell>
+                                        <TableCell className="text-nowrap">
+                                          {param[1].type}
+                                        </TableCell>
+                                        <TableCell>
+                                          <label
+                                            htmlFor={uniqueKey}
+                                            className="ml-2.5 flex cursor-pointer items-start gap-4"
+                                          >
+                                            <div className="flex items-center">
+                                              &#8203;
+                                              <Checkbox
+                                                size="sm"
+                                                checked={param[1].filled_by_llm}
+                                                id={uniqueKey}
+                                                aria-label={t(
+                                                  'settings.tools.filledByLLM',
+                                                )}
+                                                onCheckedChange={() =>
+                                                  handleCheckboxChange(
+                                                    originalIndex,
+                                                    param[0],
+                                                  )
+                                                }
+                                              />
+                                            </div>
+                                          </label>
+                                        </TableCell>
+                                        <TableCell>
+                                          <Input
+                                            key={uniqueKey}
+                                            value={param[1].description}
+                                            size="sm"
+                                            onChange={(e) => {
+                                              setTool({
+                                                ...tool,
+                                                actions: tool.actions.map(
+                                                  (act, index) => {
+                                                    if (
+                                                      index === originalIndex
+                                                    ) {
+                                                      return {
+                                                        ...act,
+                                                        parameters: {
+                                                          ...act.parameters,
+                                                          properties: {
                                                             ...act.parameters
-                                                              .properties[
-                                                              param[0]
-                                                            ],
-                                                            description:
-                                                              e.target.value,
+                                                              .properties,
+                                                            [param[0]]: {
+                                                              ...act.parameters
+                                                                .properties[
+                                                                param[0]
+                                                              ],
+                                                              description:
+                                                                e.target.value,
+                                                            },
                                                           },
                                                         },
-                                                      },
-                                                    };
-                                                  }
-                                                  return act;
-                                                },
-                                              ),
-                                            });
-                                          }}
-                                        />
-                                      </td>
-                                      <td>
-                                        <Input
-                                          value={param[1].value}
-                                          key={uniqueKey}
-                                          disabled={param[1].filled_by_llm}
-                                          className={`h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
-                                          onChange={(e) => {
-                                            setTool({
-                                              ...tool,
-                                              actions: tool.actions.map(
-                                                (act, index) => {
-                                                  if (index === originalIndex) {
-                                                    return {
-                                                      ...act,
-                                                      parameters: {
-                                                        ...act.parameters,
-                                                        properties: {
-                                                          ...act.parameters
-                                                            .properties,
-                                                          [param[0]]: {
+                                                      };
+                                                    }
+                                                    return act;
+                                                  },
+                                                ),
+                                              });
+                                            }}
+                                          />
+                                        </TableCell>
+                                        <TableCell>
+                                          <Input
+                                            value={param[1].value}
+                                            key={uniqueKey}
+                                            disabled={param[1].filled_by_llm}
+                                            size="sm"
+                                            onChange={(e) => {
+                                              setTool({
+                                                ...tool,
+                                                actions: tool.actions.map(
+                                                  (act, index) => {
+                                                    if (
+                                                      index === originalIndex
+                                                    ) {
+                                                      return {
+                                                        ...act,
+                                                        parameters: {
+                                                          ...act.parameters,
+                                                          properties: {
                                                             ...act.parameters
-                                                              .properties[
-                                                              param[0]
-                                                            ],
-                                                            value:
-                                                              e.target.value,
+                                                              .properties,
+                                                            [param[0]]: {
+                                                              ...act.parameters
+                                                                .properties[
+                                                                param[0]
+                                                              ],
+                                                              value:
+                                                                e.target.value,
+                                                            },
                                                           },
                                                         },
-                                                      },
-                                                    };
-                                                  }
-                                                  return act;
-                                                },
-                                              ),
-                                            });
-                                          }}
-                                        />
-                                      </td>
-                                    </tr>
-                                  );
-                                })}
-                              </tbody>
-                            </table>
+                                                      };
+                                                    }
+                                                    return act;
+                                                  },
+                                                ),
+                                              });
+                                            }}
+                                          />
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })}
+                                </TableBody>
+                              </Table>
+                            </TableContainer>
                           </div>
                         </>
                       )}
@@ -691,16 +735,10 @@ export default function ToolConfig({
                 })}
               </>
             ) : (
-              <div className="flex flex-col items-center justify-center py-8">
-                <img
-                  src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                  alt="No actions found"
-                  className="mx-auto mb-4 h-24 w-24"
-                />
-                <p className="text-center text-gray-500 dark:text-gray-400">
-                  {t('settings.tools.noActionsFound')}
-                </p>
-              </div>
+              <EmptyState
+                size="sm"
+                title={t('settings.tools.noActionsFound')}
+              />
             )}
           </div>
         )}
@@ -869,31 +907,18 @@ function APIToolConfig({
 
   return (
     <div className="scrollbar-overlay flex flex-col gap-4">
-      <div className="relative">
-        <svg
-          className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={2}
-          stroke="currentColor"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path strokeLinecap="round" d="m21 21-4.35-4.35" />
-        </svg>
-        <Input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={t('settings.tools.searchActions')}
-          className="h-10 rounded-full pr-4 pl-10 text-sm md:text-sm"
-        />
-      </div>
+      <SearchInput
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        label={t('settings.tools.searchActions')}
+      />
 
       {filteredActions.length === 0 && searchQuery && (
-        <p className="py-4 text-center text-gray-500 dark:text-gray-400">
-          {t('settings.tools.noActionsMatch')}
-        </p>
+        <EmptyState
+          size="xs"
+          illustration="none"
+          title={t('settings.tools.noActionsMatch')}
+        />
       )}
 
       <div className="flex flex-col gap-4">
@@ -902,28 +927,39 @@ function APIToolConfig({
           return (
             <div
               key={actionIndex}
-              className="border-border dark:border-border w-full rounded-xl border"
+              className="border-border w-full rounded-xl border"
             >
               <div
-                className={`border-border dark:border-border flex cursor-pointer flex-wrap items-center justify-between ${isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl'} bg-muted px-4 py-3`}
+                className={cn(
+                  'border-border bg-muted flex cursor-pointer flex-wrap items-center justify-between px-4 py-3 outline-none',
+                  isExpanded ? 'rounded-t-xl border-b' : 'rounded-xl',
+                  focusRing,
+                )}
                 onClick={() => toggleActionExpand(actionName)}
+                role="button"
+                tabIndex={0}
+                aria-expanded={isExpanded}
+                onKeyDown={(e) => {
+                  if (e.target !== e.currentTarget) return;
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleActionExpand(actionName);
+                  }
+                }}
               >
                 <div className="flex items-center gap-3">
-                  <img
-                    src={ChevronRight}
-                    alt="expand"
-                    className={`h-4 w-4 opacity-60 transition-transform duration-200 dark:invert ${isExpanded ? 'rotate-90' : ''}`}
+                  <ChevronRight
+                    className={cn(
+                      'text-muted-foreground size-4 transition-transform duration-200',
+                      isExpanded && 'rotate-90',
+                    )}
                   />
-                  <span
-                    className={`rounded px-2 py-0.5 text-xs font-medium ${getMethodColorClass(action.method)}`}
-                  >
+                  <Badge variant={getMethodBadgeVariant(action.method)}>
                     {action.method}
-                  </span>
-                  <p className="text-foreground dark:text-foreground font-semibold">
-                    {action.name}
-                  </p>
+                  </Badge>
+                  <p className="text-foreground font-semibold">{action.name}</p>
                   {action.description && (
-                    <p className="hidden truncate text-sm text-gray-500 md:block md:max-w-xs lg:max-w-md dark:text-gray-400">
+                    <p className="text-muted-foreground hidden truncate text-sm md:block md:max-w-xs lg:max-w-md">
                       {action.description}
                     </p>
                   )}
@@ -932,24 +968,22 @@ function APIToolConfig({
                   className="flex items-center gap-2"
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
+                  <IconButton
+                    label={t('convTile.delete')}
+                    icon={Trash2}
+                    variant="ghost-destructive"
+                    size="icon-xs"
+                    shape="pill"
                     onClick={() => handleDeleteActionClick(actionName)}
-                    className="mr-2 h-6 w-6 rounded-full"
-                    title={t('convTile.delete')}
-                  >
-                    <img
-                      src={Trash}
-                      alt="delete"
-                      className="h-4 w-4 opacity-40 transition-opacity hover:opacity-100"
-                    />
-                  </Button>
+                    className="mr-2"
+                  />
                   <div className="flex items-center gap-1">
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                    <label
+                      htmlFor={`approvalToggle-${actionIndex}`}
+                      className="text-muted-foreground text-xs"
+                    >
                       {t('settings.tools.requireApproval', 'Approval')}
-                    </span>
+                    </label>
                     <Switch
                       checked={action.require_approval ?? false}
                       onCheckedChange={() => {
@@ -978,6 +1012,9 @@ function APIToolConfig({
                     checked={action.active}
                     onCheckedChange={() => handleActionToggle(actionName)}
                     id={`actionToggle-${actionIndex}`}
+                    aria-label={t('settings.tools.toggleToolAria', {
+                      toolName: actionName,
+                    })}
                   />
                 </div>
               </div>
@@ -1007,13 +1044,16 @@ function APIToolConfig({
                         });
                       }}
                       label={t('settings.tools.urlPlaceholder')}
+                      labelSurface="background"
+                      shape="pill"
                     />
                   </div>
                   <div className="mt-4 px-5 py-2">
-                    <div className="relative w-full">
-                      <span className="text-muted-foreground bg-card absolute -top-2 left-5 z-10 px-2 text-xs">
-                        {t('settings.tools.method')}
-                      </span>
+                    <FormField
+                      label={t('settings.tools.method')}
+                      labelSurface="background"
+                      className="w-full max-w-80"
+                    >
                       <Select
                         value={action.method}
                         onValueChange={(value) => {
@@ -1044,8 +1084,9 @@ function APIToolConfig({
                         }}
                       >
                         <SelectTrigger
-                          className="w-56 rounded-3xl px-5 py-3"
-                          size="lg"
+                          className="w-full"
+                          size="field"
+                          shape="pill"
                         >
                           <SelectValue />
                         </SelectTrigger>
@@ -1065,7 +1106,7 @@ function APIToolConfig({
                           ))}
                         </SelectContent>
                       </Select>
-                    </div>
+                    </FormField>
                   </div>
                   <div className="mt-4 px-5 py-2">
                     <Input
@@ -1091,6 +1132,8 @@ function APIToolConfig({
                         });
                       }}
                       label={t('settings.tools.descriptionPlaceholder')}
+                      labelSurface="background"
+                      shape="pill"
                     />
                   </div>
                   {(action.method === 'POST' ||
@@ -1099,10 +1142,16 @@ function APIToolConfig({
                     action.method === 'HEAD' ||
                     action.method === 'OPTIONS') && (
                     <div className="mt-4 px-5 py-2">
-                      <div className="relative w-full">
-                        <span className="text-muted-foreground bg-card absolute -top-2 left-5 z-10 px-2 text-xs">
-                          {t('settings.tools.bodyContentType')}
-                        </span>
+                      <FormField
+                        label={t('settings.tools.bodyContentType')}
+                        hint={t(
+                          `settings.tools.bodyTypeHint.${bodyTypeHintKey(
+                            action.body_content_type,
+                          )}`,
+                        )}
+                        labelSurface="background"
+                        className="w-full max-w-80"
+                      >
                         <Select
                           value={action.body_content_type || 'application/json'}
                           onValueChange={(value) => {
@@ -1132,8 +1181,9 @@ function APIToolConfig({
                           }}
                         >
                           <SelectTrigger
-                            className="w-56 rounded-3xl px-5 py-3"
-                            size="lg"
+                            className="w-full"
+                            size="field"
+                            shape="pill"
                           >
                             <SelectValue />
                           </SelectTrigger>
@@ -1152,24 +1202,7 @@ function APIToolConfig({
                             ))}
                           </SelectContent>
                         </Select>
-                      </div>
-                      <p className="text-foreground dark:text-foreground mt-2 text-xs opacity-60">
-                        {action.body_content_type === 'multipart/form-data' &&
-                          'For APIs requiring multipart format. File uploads not supported through LLM.'}
-                        {action.body_content_type ===
-                          'application/octet-stream' &&
-                          'Raw binary data, base64-encoded for transmission.'}
-                        {action.body_content_type ===
-                          'application/x-www-form-urlencoded' &&
-                          'Standard form submission format. Best for legacy APIs and login forms.'}
-                        {action.body_content_type === 'application/xml' &&
-                          'Structured XML format. Use for SOAP and enterprise APIs.'}
-                        {action.body_content_type === 'text/plain' &&
-                          'Raw text data. Each field on a new line.'}
-                        {(!action.body_content_type ||
-                          action.body_content_type === 'application/json') &&
-                          'Most common format. Use for modern REST APIs.'}
-                      </p>
+                      </FormField>
                     </div>
                   )}
                   <div className="mt-4 px-5 py-2">
@@ -1198,7 +1231,7 @@ function APIToolConfig({
             setActionToDelete(null);
           }}
           submitLabel={t('convTile.delete')}
-          variant="danger"
+          variant="destructive"
         />
       )}
     </div>
@@ -1216,6 +1249,7 @@ function APIActionTable({
   ) => void;
 }) {
   const { t } = useTranslation();
+  const idPrefix = React.useId();
 
   const [action, setAction] = React.useState<APIActionType>(apiAction);
   const [newPropertyKey, setNewPropertyKey] = React.useState('');
@@ -1398,14 +1432,15 @@ function APIActionTable({
       <>
         {Object.entries(action[section].properties).map(
           ([key, param], index) => (
-            <tr key={index} className="font-normal text-nowrap">
-              <td className="relative">
+            <TableRow key={index}>
+              <TableCell className="relative">
                 {editingPropertyKey.section === section &&
                 editingPropertyKey.oldKey === key ? (
                   <div className="flex flex-row items-center justify-between gap-2">
                     <Input
                       value={newPropertyKey}
-                      className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                      size="sm"
+                      className="min-w-[130.5px]"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -1414,78 +1449,85 @@ function APIActionTable({
                       }}
                     />
                     <div className="mt-1">
-                      <Button
-                        type="button"
+                      <IconButton
+                        label={t('settings.tools.save')}
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs"
                         onClick={handleRenameProperty}
-                        className="mr-1 h-5 w-5"
+                        className="mr-1"
                       >
-                        <img
-                          src={CircleCheck}
-                          alt="check"
-                          className="h-5 w-5"
-                        />
-                      </Button>
-                      <Button
-                        type="button"
+                        <CircleCheck className="text-success" aria-hidden />
+                      </IconButton>
+                      <IconButton
+                        label={t('settings.tools.cancel')}
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs"
                         onClick={handleRenamePropertyCancel}
-                        className="h-5 w-5"
                       >
-                        <img src={CircleX} alt="cancel" className="h-5 w-5" />
-                      </Button>
+                        <CircleX className="text-destructive" aria-hidden />
+                      </IconButton>
                     </div>
                   </div>
                 ) : (
                   <Input
                     value={key}
-                    className="h-auto min-w-[175.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                    size="sm"
+                    className="min-w-[175.5px]"
                     onFocus={() => handleRenamePropertyStart(section, key)}
                     readOnly
                   />
                 )}
-              </td>
-              <td>
-                <select
+              </TableCell>
+              <TableCell>
+                <Select
                   value={param.type}
-                  onChange={(e) =>
+                  onValueChange={(value) =>
                     handlePropertyTypeChange(
                       section,
                       key,
-                      e.target.value as 'string' | 'integer',
+                      value as 'string' | 'integer',
                     )
                   }
-                  className="border-border dark:border-border focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden focus-visible:ring-2"
                 >
-                  <option value="string">string</option>
-                  <option value="integer">integer</option>
-                </select>
-              </td>
-              <td>
-                <label className="ml-2.5 flex cursor-pointer items-start gap-4">
+                  <SelectTrigger
+                    size="sm"
+                    aria-label={t('settings.tools.type')}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="string">string</SelectItem>
+                    <SelectItem value="integer">integer</SelectItem>
+                  </SelectContent>
+                </Select>
+              </TableCell>
+              <TableCell>
+                <label
+                  htmlFor={`${idPrefix}-${section}-${index}-filled-by-llm`}
+                  className="ml-2.5 flex cursor-pointer items-start gap-4"
+                >
                   <div className="flex items-center">
-                    <input
+                    <Checkbox
+                      size="sm"
+                      id={`${idPrefix}-${section}-${index}-filled-by-llm`}
+                      aria-label={t('settings.tools.filledByLLM')}
                       checked={param.filled_by_llm}
-                      type="checkbox"
-                      className="size-4 rounded-sm border-gray-300 bg-transparent"
-                      onChange={(e) =>
+                      onCheckedChange={(checked) =>
                         handlePropertyChange(
                           section,
                           key,
                           'filled_by_llm',
-                          e.target.checked,
+                          checked === true,
                         )
                       }
                     />
                   </div>
                 </label>
-              </td>
-              <td className="w-10">
+              </TableCell>
+              <TableCell>
                 <Input
                   value={param.description}
-                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                  size="sm"
                   onChange={(e) =>
                     handlePropertyChange(
                       section,
@@ -1495,36 +1537,32 @@ function APIActionTable({
                     )
                   }
                 />
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <Input
                   value={param.value}
                   disabled={param.filled_by_llm}
                   onChange={(e) =>
                     handlePropertyChange(section, key, 'value', e.target.value)
                   }
-                  className={`h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm ${param.filled_by_llm ? 'opacity-50' : ''}`}
+                  size="sm"
                 />
-              </td>
-              <td
-                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
-              >
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
+              </TableCell>
+              <TableCell width="50px" align="center">
+                <IconButton
+                  label={t('convTile.delete')}
+                  icon={Trash2}
+                  variant="ghost-destructive"
+                  size="icon-xs"
                   onClick={() => handlePorpertyDelete(section, key)}
-                  className="h-4 w-4 opacity-60 hover:opacity-100"
-                >
-                  <img src={Trash} alt="delete" className="h-4 w-4"></img>
-                </Button>
-              </td>
-            </tr>
+                />
+              </TableCell>
+            </TableRow>
           ),
         )}
         {addingPropertySection === section ? (
-          <tr>
-            <td>
+          <TableRow>
+            <TableCell>
               <Input
                 value={newPropertyKey}
                 onChange={(e) => setNewPropertyKey(e.target.value)}
@@ -1534,58 +1572,64 @@ function APIActionTable({
                   }
                 }}
                 placeholder={t('settings.tools.propertyName')}
-                className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                size="sm"
+                className="min-w-[130.5px]"
               />
-            </td>
-            <td>
-              <select
+            </TableCell>
+            <TableCell>
+              <Select
                 value={newPropertyType}
-                onChange={(e) =>
-                  setNewPropertyType(e.target.value as 'string' | 'integer')
+                onValueChange={(value) =>
+                  setNewPropertyType(value as 'string' | 'integer')
                 }
-                className="border-border dark:border-border focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden focus-visible:ring-2"
               >
-                <option value="string">string</option>
-                <option value="integer">integer</option>
-              </select>
-            </td>
-            <td colSpan={3} className="text-right">
+                <SelectTrigger size="sm" aria-label={t('settings.tools.type')}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="string">string</SelectItem>
+                  <SelectItem value="integer">integer</SelectItem>
+                </SelectContent>
+              </Select>
+            </TableCell>
+            <TableCell colSpan={3} className="text-right">
               <Button
                 type="button"
                 variant="default"
                 size="sm"
+                shape="pill"
                 onClick={handleAddProperty}
-                className="mr-1 rounded-full px-5 text-white"
+                className="mr-1"
               >
                 {t('settings.tools.add')}
               </Button>
               <Button
                 type="button"
-                variant="destructive-outline"
+                variant="ghost"
                 size="sm"
+                shape="pill"
                 onClick={handleAddPropertyCancel}
-                className="rounded-full px-5"
               >
                 {t('settings.tools.cancel')}
               </Button>
-            </td>
-            <td className={NARROW_CELL}></td>
-          </tr>
+            </TableCell>
+            <TableCell width="50px" align="center"></TableCell>
+          </TableRow>
         ) : (
-          <tr>
-            <td colSpan={5}>
+          <TableRow>
+            <TableCell colSpan={5}>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-primary"
                 size="sm"
+                shape="pill"
                 onClick={() => handleAddPropertyStart(section)}
-                className="border-primary text-primary hover:bg-primary/90 rounded-full px-5 text-nowrap hover:text-white"
               >
                 {t('settings.tools.addNew')}
               </Button>
-            </td>
-            <td className={NARROW_CELL}></td>
-          </tr>
+            </TableCell>
+            <TableCell width="50px" align="center"></TableCell>
+          </TableRow>
         )}
       </>
     );
@@ -1596,14 +1640,15 @@ function APIActionTable({
       <>
         {Object.entries(action.headers.properties).map(
           ([key, param], index) => (
-            <tr key={index} className="font-normal text-nowrap">
-              <td className="relative">
+            <TableRow key={index}>
+              <TableCell className="relative">
                 {editingPropertyKey.section === 'headers' &&
                 editingPropertyKey.oldKey === key ? (
                   <div className="flex flex-row items-center justify-between gap-2">
                     <Input
                       value={newPropertyKey}
-                      className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                      size="sm"
+                      className="min-w-[130.5px]"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -1612,40 +1657,36 @@ function APIActionTable({
                       }}
                     />
                     <div className="mt-1">
-                      <Button
-                        type="button"
+                      <IconButton
+                        label={t('settings.tools.save')}
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs"
                         onClick={handleRenameProperty}
-                        className="mr-1 h-5 w-5"
+                        className="mr-1"
                       >
-                        <img
-                          src={CircleCheck}
-                          alt="check"
-                          className="h-5 w-5"
-                        />
-                      </Button>
-                      <Button
-                        type="button"
+                        <CircleCheck className="text-success" aria-hidden />
+                      </IconButton>
+                      <IconButton
+                        label={t('settings.tools.cancel')}
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs"
                         onClick={handleRenamePropertyCancel}
-                        className="h-5 w-5"
                       >
-                        <img src={CircleX} alt="cancel" className="h-5 w-5" />
-                      </Button>
+                        <CircleX className="text-destructive" aria-hidden />
+                      </IconButton>
                     </div>
                   </div>
                 ) : (
                   <Input
                     value={key}
-                    className="h-auto min-w-[175.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                    size="sm"
+                    className="min-w-[175.5px]"
                     onFocus={() => handleRenamePropertyStart('headers', key)}
                     readOnly
                   />
                 )}
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <Input
                   value={param.value}
                   onChange={(e) =>
@@ -1656,14 +1697,14 @@ function APIActionTable({
                       e.target.value,
                     )
                   }
-                  placeholder="e.g., application/json"
-                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                  placeholder={t('settings.tools.headerValuePlaceholder')}
+                  size="sm"
                 />
-              </td>
-              <td>
+              </TableCell>
+              <TableCell>
                 <Input
                   value={param.description}
-                  className="h-auto rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                  size="sm"
                   onChange={(e) =>
                     handlePropertyChange(
                       'headers',
@@ -1673,26 +1714,22 @@ function APIActionTable({
                     )
                   }
                 />
-              </td>
-              <td
-                className={`border-border dark:border-border border-b ${NARROW_CELL}`}
-              >
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
+              </TableCell>
+              <TableCell width="50px" align="center">
+                <IconButton
+                  label={t('convTile.delete')}
+                  icon={Trash2}
+                  variant="ghost-destructive"
+                  size="icon-xs"
                   onClick={() => handlePorpertyDelete('headers', key)}
-                  className="h-4 w-4 opacity-60 hover:opacity-100"
-                >
-                  <img src={Trash} alt="delete" className="h-4 w-4"></img>
-                </Button>
-              </td>
-            </tr>
+                />
+              </TableCell>
+            </TableRow>
           ),
         )}
         {addingPropertySection === 'headers' ? (
-          <tr>
-            <td>
+          <TableRow>
+            <TableCell>
               <Input
                 value={newPropertyKey}
                 onChange={(e) => setNewPropertyKey(e.target.value)}
@@ -1702,46 +1739,48 @@ function APIActionTable({
                   }
                 }}
                 placeholder={t('settings.tools.propertyName')}
-                className="h-auto min-w-[130.5px] rounded-lg px-2 py-1 text-sm shadow-none md:text-sm"
+                size="sm"
+                className="min-w-[130.5px]"
               />
-            </td>
-            <td colSpan={2} className="text-right">
+            </TableCell>
+            <TableCell colSpan={2} className="text-right">
               <Button
                 type="button"
                 variant="default"
                 size="sm"
+                shape="pill"
                 onClick={handleAddProperty}
-                className="mr-1 rounded-full px-5 text-white"
+                className="mr-1"
               >
                 {t('settings.tools.add')}
               </Button>
               <Button
                 type="button"
-                variant="destructive-outline"
+                variant="ghost"
                 size="sm"
+                shape="pill"
                 onClick={handleAddPropertyCancel}
-                className="rounded-full px-5"
               >
                 {t('settings.tools.cancel')}
               </Button>
-            </td>
-            <td className={NARROW_CELL}></td>
-          </tr>
+            </TableCell>
+            <TableCell width="50px" align="center"></TableCell>
+          </TableRow>
         ) : (
-          <tr>
-            <td colSpan={3}>
+          <TableRow>
+            <TableCell colSpan={3}>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-primary"
                 size="sm"
+                shape="pill"
                 onClick={() => handleAddPropertyStart('headers')}
-                className="border-primary text-primary hover:bg-primary/90 rounded-full px-5 text-nowrap hover:text-white"
               >
                 {t('settings.tools.addNew')}
               </Button>
-            </td>
-            <td className={NARROW_CELL}></td>
-          </tr>
+            </TableCell>
+            <TableCell width="50px" align="center"></TableCell>
+          </TableRow>
         )}
       </>
     );
@@ -1749,83 +1788,61 @@ function APIActionTable({
 
   return (
     <div className="scrollbar-overlay flex flex-col gap-6">
-      <div>
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
-          {t('settings.tools.headers')}
-        </h3>
-        <table className="table-default">
-          <thead>
-            <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.name')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.value')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.description')}
-              </th>
-              <th className={NARROW_CELL}></th>
-            </tr>
-          </thead>
-          <tbody>{renderHeadersTable()}</tbody>
-        </table>
+      <div className="flex flex-col gap-1">
+        <SectionHeader as="h3" size="xs" title={t('settings.tools.headers')} />
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>{t('settings.tools.name')}</TableHeader>
+                <TableHeader>{t('settings.tools.value')}</TableHeader>
+                <TableHeader>{t('settings.tools.description')}</TableHeader>
+                <TableHeader width="50px" align="center"></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>{renderHeadersTable()}</TableBody>
+          </Table>
+        </TableContainer>
       </div>
-      <div>
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
-          {t('settings.tools.queryParameters')}
-        </h3>
-        <table className="table-default">
-          <thead>
-            <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.name')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.type')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.filledByLLM')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.description')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.value')}
-              </th>
-              <th className={NARROW_CELL}></th>
-            </tr>
-          </thead>
-          <tbody>{renderPropertiesTable('query_params')}</tbody>
-        </table>
+      <div className="flex flex-col gap-1">
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('settings.tools.queryParameters')}
+        />
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>{t('settings.tools.name')}</TableHeader>
+                <TableHeader>{t('settings.tools.type')}</TableHeader>
+                <TableHeader>{t('settings.tools.filledByLLM')}</TableHeader>
+                <TableHeader>{t('settings.tools.description')}</TableHeader>
+                <TableHeader>{t('settings.tools.value')}</TableHeader>
+                <TableHeader width="50px" align="center"></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>{renderPropertiesTable('query_params')}</TableBody>
+          </Table>
+        </TableContainer>
       </div>
-      <div className="mb-6">
-        <h3 className="text-foreground dark:text-foreground mb-1 text-base font-normal">
-          {t('settings.tools.body')}
-        </h3>
-        <table className="table-default">
-          <thead>
-            <tr>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.name')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.type')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.filledByLLM')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.description')}
-              </th>
-              <th className="text-foreground dark:text-foreground px-2 py-1 text-left text-sm font-normal">
-                {t('settings.tools.value')}
-              </th>
-              <th className={NARROW_CELL}></th>
-            </tr>
-          </thead>
-          <tbody>{renderPropertiesTable('body')}</tbody>
-        </table>
+      <div className="mb-6 flex flex-col gap-1">
+        <SectionHeader as="h3" size="xs" title={t('settings.tools.body')} />
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>{t('settings.tools.name')}</TableHeader>
+                <TableHeader>{t('settings.tools.type')}</TableHeader>
+                <TableHeader>{t('settings.tools.filledByLLM')}</TableHeader>
+                <TableHeader>{t('settings.tools.description')}</TableHeader>
+                <TableHeader>{t('settings.tools.value')}</TableHeader>
+                <TableHeader width="50px" align="center"></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>{renderPropertiesTable('body')}</TableBody>
+          </Table>
+        </TableContainer>
       </div>
     </div>
   );
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index 2960ee18..eb408ad4 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -1,27 +1,21 @@
-import { RefreshCcw, Search as SearchIcon, Trash, Users } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import { Pencil, RefreshCw, Trash2, Users } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import devicesService from '../api/services/devicesService';
 import userService from '../api/services/userService';
-import Edit from '../assets/edit.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
-import ThreeDotsIcon from '../assets/three-dots.svg';
+import PageToolbar from '../components/PageToolbar';
+import SearchInput from '../components/SearchInput';
 import SkeletonLoader from '../components/SkeletonLoader';
 import ToolIcon from '../components/ToolIcon';
+import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
+import { Card, CardDescription, CardTitle } from '../components/ui/card';
 import { Switch } from '../components/ui/switch';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
-import { Input } from '../components/ui/input';
-import { useDarkTheme, useLoaderState } from '../hooks';
+import { ActionMenu, type MenuOption } from '../components/ui/dropdown-menu';
+import { EmptyState } from '../components/ui/empty-state';
+import { useLoaderState } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import MCPServerModal from '../modals/MCPServerModal';
@@ -32,20 +26,9 @@ import RemoteDeviceConfig from './RemoteDeviceConfig';
 import ToolConfig from './ToolConfig';
 import { APIToolType, UserToolType } from './types';
 
-type ToolsMenuOption = {
-  icon: string | LucideIcon;
-  label: string;
-  onClick: () => void;
-  variant: 'default' | 'destructive';
-  iconWidth?: number;
-  iconHeight?: number;
-  iconClassName?: string;
-};
-
 export default function Tools() {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
 
   const [searchTerm, setSearchTerm] = React.useState('');
   const [addToolModalState, setAddToolModalState] =
@@ -118,23 +101,19 @@ export default function Tools() {
     setReconnectModalState('ACTIVE');
   };
 
-  const getMenuOptions = (tool: UserToolType): ToolsMenuOption[] => {
-    const options: ToolsMenuOption[] = [
+  const getMenuOptions = (tool: UserToolType): MenuOption[] => {
+    const options: MenuOption[] = [
       {
-        icon: Edit,
+        icon: Pencil,
         label: t('settings.tools.edit'),
         onClick: () => handleSettingsClick(tool),
         variant: 'default',
-        iconWidth: 14,
-        iconHeight: 14,
       },
       {
-        icon: Trash,
+        icon: Trash2,
         label: t('settings.tools.delete'),
         onClick: () => handleDeleteTool(tool),
         variant: 'destructive',
-        iconWidth: 16,
-        iconHeight: 16,
       },
     ];
     // Sharing is an owner-only action: hide it for tools shared into the
@@ -145,19 +124,14 @@ export default function Tools() {
         label: t('settings.tools.shareWithTeam'),
         onClick: () => setToolToShare(tool),
         variant: 'default',
-        iconWidth: 16,
-        iconHeight: 16,
       });
     }
     if (tool.name === 'mcp_tool') {
       options.splice(1, 0, {
-        icon: RefreshCcw,
+        icon: RefreshCw,
         label: t('settings.tools.reconnect'),
         onClick: () => handleReconnect(tool),
         variant: 'default',
-        iconWidth: 16,
-        iconHeight: 16,
-        iconClassName: 'text-[#747474]',
       });
     }
     return options;
@@ -279,224 +253,142 @@ export default function Tools() {
           />
         )
       ) : (
-        <div className="mt-8">
+        <div>
           <div className="relative flex flex-col">
-            <p className="text-muted-foreground mb-5 text-sm leading-6">
-              {t('settings.tools.subtitle')}
-            </p>
-            <div className="my-3 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div className="w-full max-w-md">
-                <Input
+            <PageToolbar
+              intro={t('settings.tools.subtitle')}
+              search={
+                <SearchInput
                   maxLength={256}
                   label={t('settings.tools.searchPlaceholder')}
                   name="Document-search-input"
-                  type="text"
                   id="tool-search-input"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
-                  labelBgClassName="bg-background"
-                  className="rounded-full"
-                  leftIcon={
-                    <SearchIcon
-                      className="text-muted-foreground size-4"
-                      strokeWidth={1.75}
-                    />
-                  }
                 />
-              </div>
-              <Button
-                type="button"
-                className="h-11 min-w-[108px] rounded-full whitespace-normal text-white"
-                onClick={() => {
-                  setAddToolModalState('ACTIVE');
-                }}
-              >
-                {t('settings.tools.addTool')}
-              </Button>
-            </div>
-            <div className="border-border dark:border-border mt-5 mb-8 border-b" />
+              }
+              action={
+                <Button
+                  type="button"
+                  size="field"
+                  shape="pill"
+                  onClick={() => {
+                    setAddToolModalState('ACTIVE');
+                  }}
+                >
+                  {t('settings.tools.addTool')}
+                </Button>
+              }
+              divider
+            />
             {loading ? (
-              <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                 <SkeletonLoader component="toolCards" count={6} />
               </div>
+            ) : userTools.length === 0 ? (
+              <EmptyState title={t('settings.tools.noToolsFound')} />
             ) : (
-              <div className="flex flex-wrap justify-center gap-4 sm:justify-start">
-                {userTools.length === 0 ? (
-                  <div className="flex w-full flex-col items-center justify-center py-12">
-                    <img
-                      src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                      alt={t('settings.tools.noToolsFound')}
-                      className="mx-auto mb-6 h-32 w-32"
-                    />
-                    <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-                      {t('settings.tools.noToolsFound')}
-                    </p>
-                  </div>
+              (() => {
+                const filtered = userTools.filter((tool) =>
+                  (tool.customName || tool.displayName)
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase()),
+                );
+                return filtered.length === 0 ? (
+                  <EmptyState title={t('settings.tools.noToolsFound')} />
                 ) : (
-                  (() => {
-                    const filtered = userTools.filter((tool) =>
-                      (tool.customName || tool.displayName)
-                        .toLowerCase()
-                        .includes(searchTerm.toLowerCase()),
-                    );
-                    return filtered.length === 0 ? (
-                      <div className="flex w-full flex-col items-center justify-center py-12">
-                        <img
-                          src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                          alt={t('settings.tools.noToolsFound')}
-                          className="mx-auto mb-6 h-32 w-32"
-                        />
-                        <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-                          {t('settings.tools.noToolsFound')}
-                        </p>
-                      </div>
-                    ) : (
-                      filtered.map((tool, index) => (
-                        <div
-                          key={index}
-                          className="bg-muted hover:bg-accent relative flex h-52 w-[300px] flex-col justify-between overflow-hidden rounded-2xl p-5"
-                        >
-                          {!tool.default && (
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <button
-                                  type="button"
-                                  onClick={(e) => e.stopPropagation()}
-                                  className="absolute top-4 right-4 z-10 cursor-pointer"
-                                  aria-label={t(
-                                    'settings.tools.settingsIconAlt',
-                                  )}
-                                >
-                                  <img
-                                    src={ThreeDotsIcon}
-                                    alt={t('settings.tools.settingsIconAlt')}
-                                    className="h-[19px] w-[19px]"
-                                  />
-                                </button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent
-                                align="end"
-                                className="min-w-[144px]"
-                              >
-                                {getMenuOptions(tool).map((option, idx) => {
-                                  const IconCmp =
-                                    typeof option.icon !== 'string'
-                                      ? option.icon
-                                      : null;
-                                  return (
-                                    <DropdownMenuItem
-                                      key={idx}
-                                      variant={option.variant}
-                                      onSelect={() => option.onClick()}
-                                    >
-                                      {typeof option.icon === 'string' ? (
-                                        <img
-                                          src={option.icon}
-                                          alt=""
-                                          width={option.iconWidth ?? 16}
-                                          height={option.iconHeight ?? 16}
-                                          className={option.iconClassName}
-                                        />
-                                      ) : (
-                                        IconCmp && (
-                                          <IconCmp
-                                            size={Math.max(
-                                              option.iconWidth ?? 16,
-                                              option.iconHeight ?? 16,
-                                            )}
-                                            strokeWidth={1.75}
-                                            aria-hidden="true"
-                                            className={option.iconClassName}
-                                          />
-                                        )
-                                      )}
-                                      <span>{option.label}</span>
-                                    </DropdownMenuItem>
-                                  );
-                                })}
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          )}
-                          <div className="w-full">
-                            <div className="flex w-full items-center gap-2 px-1">
-                              <ToolIcon
-                                name={tool.name}
-                                title={`${tool.displayName} icon`}
-                                className="h-6 w-6"
-                              />
-                              {tool.default && (
-                                <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs leading-none font-medium text-gray-600 dark:bg-gray-700/40 dark:text-gray-300">
-                                  {t('settings.tools.builtIn')}
-                                </span>
-                              )}
-                              {tool.name === 'mcp_tool' &&
-                                mcpStatuses[tool.id] && (
-                                  <span
-                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs leading-none font-medium ${
-                                      mcpStatuses[tool.id] === 'connected'
-                                        ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                                        : mcpStatuses[tool.id] === 'needs_auth'
-                                          ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
-                                          : 'bg-gray-100 text-gray-600 dark:bg-gray-700/40 dark:text-gray-300'
-                                    }`}
-                                  >
-                                    {mcpStatuses[tool.id] === 'connected'
-                                      ? t('settings.tools.authStatus.connected')
-                                      : mcpStatuses[tool.id] === 'needs_auth'
-                                        ? t(
-                                            'settings.tools.authStatus.needsAuth',
-                                          )
-                                        : t(
-                                            'settings.tools.authStatus.configured',
-                                          )}
-                                  </span>
-                                )}
-                              {tool.ownership === 'team' && (
-                                <span className="bg-muted-foreground/10 text-muted-foreground inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs leading-none font-medium">
-                                  <Users
-                                    size={11}
-                                    strokeWidth={2}
-                                    aria-hidden="true"
-                                  />
-                                  {tool.team_access === 'editor'
-                                    ? t('teamAccess.editor')
-                                    : t('teamAccess.viewer')}
-                                </span>
-                              )}
-                            </div>
-                            <div className="mt-[9px]">
-                              <p
-                                title={tool.customName || tool.displayName}
-                                className="text-foreground dark:text-foreground truncate px-1 text-sm leading-relaxed font-semibold capitalize"
-                              >
-                                {tool.customName || tool.displayName}
-                              </p>
-                              <p
-                                className="text-muted-foreground mt-1 line-clamp-4 max-h-24 overflow-hidden px-1 text-xs leading-relaxed break-all"
-                                title={tool.description}
-                              >
-                                {tool.description}
-                              </p>
-                            </div>
-                          </div>
-                          <div className="absolute right-4 bottom-4">
-                            <Switch
-                              checked={tool.status}
-                              onCheckedChange={(checked) =>
-                                updateToolStatus(tool.id, checked)
-                              }
-                              id={`toolToggle-${index}`}
-                              aria-label={t('settings.tools.toggleToolAria', {
-                                toolName: tool.customName || tool.displayName,
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    {filtered.map((tool, index) => (
+                      <Card
+                        key={index}
+                        variant="filled"
+                        padding="lg"
+                        className="relative h-52 justify-between overflow-hidden"
+                      >
+                        {!tool.default && (
+                          <ActionMenu
+                            options={getMenuOptions(tool)}
+                            triggerLabel={t('settings.tools.settingsIconAlt')}
+                            className="absolute top-3 right-3 z-10"
+                          />
+                        )}
+                        <div className="w-full">
+                          <div className="flex w-full items-center gap-2 px-1">
+                            <ToolIcon
+                              name={tool.name}
+                              title={t('settings.tools.toolIconTitle', {
+                                name: tool.displayName,
                               })}
+                              className="size-6"
                             />
+                            {tool.default && (
+                              <Badge variant="neutral">
+                                {t('settings.tools.builtIn')}
+                              </Badge>
+                            )}
+                            {tool.name === 'mcp_tool' &&
+                              mcpStatuses[tool.id] && (
+                                <Badge
+                                  variant={
+                                    mcpStatuses[tool.id] === 'connected'
+                                      ? 'success'
+                                      : mcpStatuses[tool.id] === 'needs_auth'
+                                        ? 'warning'
+                                        : 'neutral'
+                                  }
+                                >
+                                  {mcpStatuses[tool.id] === 'connected'
+                                    ? t('settings.tools.authStatus.connected')
+                                    : mcpStatuses[tool.id] === 'needs_auth'
+                                      ? t('settings.tools.authStatus.needsAuth')
+                                      : t(
+                                          'settings.tools.authStatus.configured',
+                                        )}
+                                </Badge>
+                              )}
+                            {tool.ownership === 'team' && (
+                              <Badge variant="neutral">
+                                <Users className="size-3" aria-hidden="true" />
+                                {tool.team_access === 'editor'
+                                  ? t('teamAccess.editor')
+                                  : t('teamAccess.viewer')}
+                              </Badge>
+                            )}
+                          </div>
+                          <div className="mt-[9px] px-1">
+                            <CardTitle
+                              as="h2"
+                              title={tool.customName || tool.displayName}
+                              className="truncate capitalize"
+                            >
+                              {tool.customName || tool.displayName}
+                            </CardTitle>
+                            <CardDescription
+                              size="xs"
+                              className="mt-1 line-clamp-4 max-h-24 overflow-hidden break-words"
+                              title={tool.description}
+                            >
+                              {tool.description}
+                            </CardDescription>
                           </div>
                         </div>
-                      ))
-                    );
-                  })()
-                )}
-              </div>
+                        <div className="absolute right-4 bottom-4">
+                          <Switch
+                            checked={tool.status}
+                            onCheckedChange={(checked) =>
+                              updateToolStatus(tool.id, checked)
+                            }
+                            id={`toolToggle-${index}`}
+                            aria-label={t('settings.tools.toggleToolAria', {
+                              toolName: tool.customName || tool.displayName,
+                            })}
+                          />
+                        </div>
+                      </Card>
+                    ))}
+                  </div>
+                );
+              })()
             )}
           </div>
           <AddToolModal
@@ -516,7 +408,7 @@ export default function Tools() {
             setModalState={setDeleteModalState}
             handleSubmit={confirmDeleteTool}
             submitLabel={t('settings.tools.delete')}
-            variant="danger"
+            variant="destructive"
           />
           <MCPServerModal
             modalState={reconnectModalState}
diff --git a/frontend/src/settings/accessTokenUtils.test.ts b/frontend/src/settings/accessTokenUtils.test.ts
index 8b04866e..eb2e0ac7 100644
--- a/frontend/src/settings/accessTokenUtils.test.ts
+++ b/frontend/src/settings/accessTokenUtils.test.ts
@@ -12,7 +12,6 @@ import {
   isUuid,
   NO_ESCAPE,
   NO_EXPIRY,
-  relativeTime,
   renewalExpiry,
   restrictionCounts,
   scopesToSubmit,
@@ -210,30 +209,6 @@ describe('expiryStatus', () => {
   });
 });
 
-describe('relativeTime', () => {
-  const ago = (ms: number) => new Date(NOW - ms).toISOString();
-
-  it('buckets past timestamps', () => {
-    expect(relativeTime(null, NOW)).toBeNull();
-    expect(relativeTime('garbage', NOW)).toBeNull();
-    expect(relativeTime(ago(20_000), NOW)).toEqual({ unit: 'now' });
-    expect(relativeTime(ago(5 * 60_000), NOW)).toEqual({
-      unit: 'minutes',
-      count: 5,
-    });
-    expect(relativeTime(ago(3 * 3_600_000), NOW)).toEqual({
-      unit: 'hours',
-      count: 3,
-    });
-    expect(relativeTime(ago(2 * DAY), NOW)).toEqual({ unit: 'days', count: 2 });
-    expect(relativeTime(ago(45 * DAY), NOW)).toEqual({ unit: 'date' });
-  });
-
-  it('treats clock skew into the future as "now"', () => {
-    expect(relativeTime(ago(-30_000), NOW)).toEqual({ unit: 'now' });
-  });
-});
-
 describe('toResourceOptions', () => {
   it('accepts only UUID ids', () => {
     expect(isUuid(ID_A)).toBe(true);
diff --git a/frontend/src/settings/accessTokenUtils.ts b/frontend/src/settings/accessTokenUtils.ts
index 8ebe70e8..6b617a2c 100644
--- a/frontend/src/settings/accessTokenUtils.ts
+++ b/frontend/src/settings/accessTokenUtils.ts
@@ -189,29 +189,6 @@ export function countLiveTokens(
     .length;
 }
 
-export type RelativeTime =
-  | { unit: 'now' }
-  | { unit: 'minutes' | 'hours' | 'days'; count: number }
-  | { unit: 'date' };
-
-/** Bucket a past timestamp for display; older than 30 days falls back to a date. */
-export function relativeTime(
-  value: string | null | undefined,
-  now: number = Date.now(),
-): RelativeTime | null {
-  if (!value) return null;
-  const at = Date.parse(value);
-  if (Number.isNaN(at)) return null;
-  const minutes = Math.floor(Math.max(0, now - at) / 60_000);
-  if (minutes < 1) return { unit: 'now' };
-  if (minutes < 60) return { unit: 'minutes', count: minutes };
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return { unit: 'hours', count: hours };
-  const days = Math.floor(hours / 24);
-  if (days <= 30) return { unit: 'days', count: days };
-  return { unit: 'date' };
-}
-
 export interface ResourceOption {
   value: string;
   label: string;
diff --git a/frontend/src/settings/components/RetrievalOptions.tsx b/frontend/src/settings/components/RetrievalOptions.tsx
index b9dec5d6..b85d6cc0 100644
--- a/frontend/src/settings/components/RetrievalOptions.tsx
+++ b/frontend/src/settings/components/RetrievalOptions.tsx
@@ -1,11 +1,11 @@
-import { type ReactNode, useMemo, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { cn } from '@/lib/utils';
 
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
-import { Label } from '../../components/ui/label';
 import {
   Select,
   SelectContent,
@@ -13,6 +13,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../../components/ui/select';
+import { SectionHeader } from '../../components/ui/section-header';
+import { SettingRow, SettingRows } from '../../components/ui/setting-row';
 import { Switch } from '../../components/ui/switch';
 import type {
   ChunkingStrategy,
@@ -22,8 +24,6 @@ import type {
 } from '../../models/misc';
 import type { Model } from '../../models/types';
 
-import ChevronRight from '../../assets/chevron-right.svg';
-
 // Defaults mirror the backend SourceConfig
 // (application/storage/db/source_config.py). A form seeded with these and sent
 // verbatim reproduces today's behavior, so the backend's "absent == default"
@@ -150,60 +150,24 @@ export function availableRetrievers(
 }
 
 /**
- * Group eyebrow: an uppercase, tracked title with a normal-weight muted ` · tag`
- * suffix. Reads as more prominent than the individual field labels below it.
+ * Group eyebrow: an uppercase, tracked title with a normal-weight ` · tag`
+ * suffix, set above the field rows of a group.
  */
 function GroupHeader({ title, tag }: { title: string; tag: string }) {
   return (
-    <h4 className="text-foreground text-xs font-semibold tracking-wider uppercase">
-      {title}
-      <span className="text-muted-foreground font-normal normal-case">
-        {' · '}
-        {tag}
-      </span>
-    </h4>
-  );
-}
-
-/**
- * One settings row: a left block (medium-weight label plus optional muted
- * description) and a right block holding the control. `alignStart` top-aligns
- * the row for controls paired with a multi-line description; otherwise both
- * sides are vertically centered.
- */
-function SettingRow({
-  label,
-  htmlFor,
-  description,
-  alignStart = false,
-  children,
-}: {
-  label: string;
-  htmlFor?: string;
-  description?: ReactNode;
-  alignStart?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex flex-row justify-between gap-4 py-3 first:pt-0 last:pb-0',
-        alignStart ? 'items-start' : 'items-center',
-      )}
-    >
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <Label
-          htmlFor={htmlFor}
-          className="text-foreground pointer-events-none w-fit text-sm font-medium"
-        >
-          {label}
-        </Label>
-        {description ? (
-          <p className="text-muted-foreground text-xs">{description}</p>
-        ) : null}
-      </div>
-      <div className="shrink-0">{children}</div>
-    </div>
+    <SectionHeader
+      as="h4"
+      size="sm"
+      title={
+        <>
+          {title}
+          <span className="text-muted-foreground font-normal normal-case">
+            {' · '}
+            {tag}
+          </span>
+        </>
+      }
+    />
   );
 }
 
@@ -448,7 +412,7 @@ export default function RetrievalOptions({
       <div className="flex flex-col gap-3">
         <GroupHeader title={tr('retrieval.title')} tag={tr('retrieval.tag')} />
 
-        <div className="divide-border/50 divide-y">
+        <SettingRows>
           <SettingRow
             label={tr('retrieval.retriever')}
             htmlFor="retrieval-retriever"
@@ -462,8 +426,8 @@ export default function RetrievalOptions({
             >
               <SelectTrigger
                 id="retrieval-retriever"
-                className="w-52 rounded-md"
-                size="lg"
+                className="w-52"
+                size="field"
               >
                 <SelectValue />
               </SelectTrigger>
@@ -559,8 +523,8 @@ export default function RetrievalOptions({
               >
                 <SelectTrigger
                   id="retrieval-exposure"
-                  className="w-52 rounded-md"
-                  size="lg"
+                  className="w-52"
+                  size="field"
                 >
                   <SelectValue />
                 </SelectTrigger>
@@ -589,7 +553,7 @@ export default function RetrievalOptions({
               onCheckedChange={(checked) => setPrescreen({ enabled: checked })}
             />
           </SettingRow>
-        </div>
+        </SettingRows>
 
         {/* Prescreen expanded inputs (kept as floating-label cards) */}
         {value.retrieval.prescreen.enabled && (
@@ -600,7 +564,6 @@ export default function RetrievalOptions({
               label={tr('prescreen.candidateK')}
               value={String(value.retrieval.prescreen.candidate_k)}
               disabled={disabled}
-              labelBgClassName="bg-card"
               onChange={(e) =>
                 setPrescreen({
                   candidate_k: Math.max(
@@ -616,7 +579,6 @@ export default function RetrievalOptions({
               label={tr('prescreen.maxKeep')}
               value={String(value.retrieval.prescreen.max_keep)}
               disabled={disabled}
-              labelBgClassName="bg-card"
               onChange={(e) =>
                 setPrescreen({
                   max_keep: Math.min(
@@ -632,7 +594,6 @@ export default function RetrievalOptions({
               label={tr('prescreen.batchSize')}
               value={String(value.retrieval.prescreen.batch_size)}
               disabled={disabled}
-              labelBgClassName="bg-card"
               onChange={(e) =>
                 setPrescreen({
                   batch_size: Math.max(1, Number(e.target.value) || 1),
@@ -654,7 +615,7 @@ export default function RetrievalOptions({
             {tr('graphRetrieval.agentToolHint')}
           </p>
 
-          <div className="divide-border/50 divide-y">
+          <SettingRows>
             <SettingRow
               label={tr('graphRetrieval.seedStrategy')}
               htmlFor="graph-seed-strategy"
@@ -670,8 +631,8 @@ export default function RetrievalOptions({
               >
                 <SelectTrigger
                   id="graph-seed-strategy"
-                  className="w-52 rounded-md"
-                  size="lg"
+                  className="w-52"
+                  size="field"
                 >
                   <SelectValue />
                 </SelectTrigger>
@@ -717,7 +678,7 @@ export default function RetrievalOptions({
                 }
               />
             </SettingRow>
-          </div>
+          </SettingRows>
         </div>
       )}
 
@@ -726,7 +687,7 @@ export default function RetrievalOptions({
         <div className="flex flex-col gap-3">
           <GroupHeader title={tr('graph.title')} tag={tr('graph.tag')} />
 
-          <div className="divide-border/50 divide-y">
+          <SettingRows>
             <SettingRow
               label={tr('graph.extractionModel')}
               htmlFor="graph-extraction-model"
@@ -744,8 +705,8 @@ export default function RetrievalOptions({
               >
                 <SelectTrigger
                   id="graph-extraction-model"
-                  className="w-52 rounded-md"
-                  size="lg"
+                  className="w-52"
+                  size="field"
                 >
                   <SelectValue />
                 </SelectTrigger>
@@ -794,7 +755,7 @@ export default function RetrievalOptions({
                 }}
               />
             </SettingRow>
-          </div>
+          </SettingRows>
         </div>
       )}
 
@@ -802,7 +763,7 @@ export default function RetrievalOptions({
       <div className={cn('flex flex-col gap-3', queryOnly && 'hidden')}>
         <GroupHeader title={tr('chunking.title')} tag={tr('chunking.tag')} />
 
-        <div className="divide-border/50 divide-y">
+        <SettingRows>
           <SettingRow
             label={tr('chunking.strategy')}
             htmlFor="chunking-strategy"
@@ -816,8 +777,8 @@ export default function RetrievalOptions({
             >
               <SelectTrigger
                 id="chunking-strategy"
-                className="w-52 rounded-md"
-                size="lg"
+                className="w-52"
+                size="field"
               >
                 <SelectValue />
               </SelectTrigger>
@@ -882,7 +843,7 @@ export default function RetrievalOptions({
               }
             />
           </SettingRow>
-        </div>
+        </SettingRows>
       </div>
     </div>
   );
@@ -896,22 +857,26 @@ export default function RetrievalOptions({
       <Button
         type="button"
         variant="link"
+        size="sm"
         onClick={() => setOpen((o) => !o)}
-        className="text-foreground hover:text-foreground h-auto w-fit justify-start px-0 py-2 text-sm font-normal hover:no-underline"
+        className="-ml-3 w-fit justify-start"
       >
-        <img
-          src={ChevronRight}
-          alt=""
-          className={`h-3 w-3 transform transition-transform dark:invert ${
-            expanded ? 'rotate-90' : ''
-          }`}
+        <ChevronRight
+          aria-hidden
+          className={cn(
+            'size-3 transition-transform duration-200',
+            expanded && 'rotate-90',
+          )}
         />
         <span>{tr('title')}</span>
       </Button>
       <div
-        className={`grid transition-all duration-300 ease-in-out ${
-          expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
-        }`}
+        className={cn(
+          'grid transition-[grid-template-rows,opacity] duration-300 ease-out',
+          expanded
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0',
+        )}
       >
         <div className="overflow-hidden">{body}</div>
       </div>
diff --git a/frontend/src/settings/components/UsageQuota.tsx b/frontend/src/settings/components/UsageQuota.tsx
index a2147beb..7d3e8f41 100644
--- a/frontend/src/settings/components/UsageQuota.tsx
+++ b/frontend/src/settings/components/UsageQuota.tsx
@@ -4,7 +4,11 @@ import { useSelector } from 'react-redux';
 
 import { usagePercent } from '../../admin/quotaUtils';
 import userService from '../../api/services/userService';
+import { Card } from '../../components/ui/card';
+import { SectionHeader } from '../../components/ui/section-header';
+import { Progress } from '../../components/ui/progress';
 import { selectToken } from '../../preferences/preferenceSlice';
+import { formatDateTime } from '../../utils/dateTimeUtils';
 
 type Budget = { limit: number | null; used: number };
 type Bucket = {
@@ -27,11 +31,7 @@ function Meter({
   if (budget.limit === null) return null;
   const percent = usagePercent(budget.used, budget.limit);
   const tone =
-    percent >= 100
-      ? 'bg-red-500'
-      : percent >= 80
-        ? 'bg-amber-500'
-        : 'bg-[#7D54D1]';
+    percent >= 100 ? 'destructive' : percent >= 80 ? 'warning' : 'default';
   return (
     <div className="min-w-48 flex-1">
       <div className="flex items-baseline justify-between gap-3 text-sm">
@@ -43,19 +43,16 @@ function Meter({
           })}
         </span>
       </div>
-      <div
-        className="bg-muted mt-1 h-1.5 w-full overflow-hidden rounded-full"
-        role="progressbar"
+      <Progress
+        size="sm"
+        variant={tone}
+        value={percent}
+        className="mt-1"
         aria-label={label}
         aria-valuemin={0}
         aria-valuemax={100}
         aria-valuenow={Math.round(percent)}
-      >
-        <div
-          className={`h-full rounded-full ${tone}`}
-          style={{ width: `${percent}%` }}
-        />
-      </div>
+      />
     </div>
   );
 }
@@ -91,10 +88,7 @@ export default function UsageQuota() {
   const reset = new Date(buckets[0].resets_at);
   const resetsAt = Number.isNaN(reset.getTime())
     ? ''
-    : new Intl.DateTimeFormat(i18n.language, {
-        dateStyle: 'medium',
-        timeStyle: 'short',
-      }).format(reset);
+    : formatDateTime(buckets[0].resets_at);
 
   // A request must fit its own bucket and ``all``, so each limited one is shown.
   const scopeLabel = (name: string) =>
@@ -103,11 +97,13 @@ export default function UsageQuota() {
       : null;
 
   return (
-    <div className="border-border mb-6 rounded-2xl border px-6 py-5">
+    <Card variant="subtle" padding="lg" className="mb-6">
       <div className="flex flex-wrap items-baseline justify-between gap-2">
-        <p className="text-foreground font-bold">
-          {t('settings.analytics.quota.title')}
-        </p>
+        <SectionHeader
+          as="h3"
+          size="xs"
+          title={t('settings.analytics.quota.title')}
+        />
         {resetsAt ? (
           <p className="text-muted-foreground text-xs">
             {t('settings.analytics.quota.resets', { resetsAt })}
@@ -115,7 +111,7 @@ export default function UsageQuota() {
         ) : null}
       </div>
       {buckets.map((bucket) => (
-        <div key={bucket.bucket} className="mt-3">
+        <div key={bucket.bucket}>
           {scopeLabel(bucket.bucket) ? (
             <p className="text-muted-foreground mb-1 text-xs">
               {scopeLabel(bucket.bucket)}
@@ -135,6 +131,6 @@ export default function UsageQuota() {
           </div>
         </div>
       ))}
-    </div>
+    </Card>
   );
 }
diff --git a/frontend/src/settings/foldSeries.test.ts b/frontend/src/settings/foldSeries.test.ts
new file mode 100644
index 00000000..8f12d7f2
--- /dev/null
+++ b/frontend/src/settings/foldSeries.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+
+import { foldSeries, OTHER_SERIES_KEY } from './foldSeries';
+
+const day = (a: number, b: number) => ({ '2026-09-22': a, '2026-09-23': b });
+
+describe('foldSeries', () => {
+  it('keeps five or fewer series as they are, in order', () => {
+    const entries: [string, Record<string, number>][] = [
+      ['gpt-4.1', day(1, 1)],
+      ['claude-sonnet-4-5', day(9, 9)],
+    ];
+    expect(foldSeries(entries)).toEqual(entries);
+  });
+
+  it('keeps the four largest series and sums the rest into Other', () => {
+    const entries: [string, Record<string, number>][] = [
+      ['a', day(1, 0)],
+      ['b', day(50, 50)],
+      ['c', day(2, 3)],
+      ['d', day(40, 40)],
+      ['e', day(30, 30)],
+      ['f', day(20, 25)],
+      ['g', day(4, 1)],
+    ];
+    const folded = foldSeries(entries);
+    expect(folded.map(([key]) => key)).toEqual([
+      'b',
+      'd',
+      'e',
+      'f',
+      OTHER_SERIES_KEY,
+    ]);
+    // a + c + g, per day.
+    expect(folded[4][1]).toEqual({ '2026-09-22': 7, '2026-09-23': 4 });
+  });
+
+  it('treats a missing day in a folded series as zero', () => {
+    const entries: [string, Record<string, number>][] = [
+      ['a', day(10, 10)],
+      ['b', day(10, 10)],
+      ['c', day(10, 10)],
+      ['d', day(10, 10)],
+      ['e', { '2026-09-22': 1 }],
+      ['f', day(2, 2)],
+    ];
+    expect(foldSeries(entries)[4][1]).toEqual({
+      '2026-09-22': 3,
+      '2026-09-23': 2,
+    });
+  });
+
+  it('lists Other buckets in the first series order, which the axis uses', () => {
+    const entries: [string, Record<string, number>][] = [
+      ['a', { d1: 9, d2: 9, d3: 9 }],
+      ['b', { d1: 9, d2: 9, d3: 9 }],
+      ['c', { d1: 9, d2: 9, d3: 9 }],
+      ['d', { d1: 9, d2: 9, d3: 9 }],
+      ['e', { d3: 1, d1: 2 }],
+      ['f', { d2: 4 }],
+    ];
+    expect(Object.keys(foldSeries(entries)[4][1])).toEqual(['d1', 'd2', 'd3']);
+  });
+});
diff --git a/frontend/src/settings/foldSeries.ts b/frontend/src/settings/foldSeries.ts
new file mode 100644
index 00000000..f7a64b4d
--- /dev/null
+++ b/frontend/src/settings/foldSeries.ts
@@ -0,0 +1,51 @@
+/** Key of the synthetic series that sums everything past the chart's colours. */
+export const OTHER_SERIES_KEY = '__other__';
+
+/** DESIGN.md: charts have five series colours, `chart-1` to `chart-5`. */
+const MAX_SERIES = 5;
+
+type SeriesEntry = [string, Record<string, number>];
+
+const total = (series: Record<string, number>): number =>
+  Object.values(series).reduce((sum, value) => sum + (value || 0), 0);
+
+/**
+ * Fit series with no meaning (models, agents, sources) into the five chart
+ * colours without repeating one.
+ *
+ * Five or fewer series are returned unchanged. With more, the four largest
+ * by total keep their original order and everything else is summed, bucket
+ * by bucket, into one {@link OTHER_SERIES_KEY} series at the end, which the
+ * chart draws in `chart-5`.
+ *
+ * @param entries Series as `[key, {bucket: value}]`, in server order.
+ * @returns The series to draw, at most five.
+ */
+export function foldSeries(entries: SeriesEntry[]): SeriesEntry[] {
+  if (entries.length <= MAX_SERIES) return entries;
+
+  const keep = new Set(
+    [...entries]
+      .sort((a, b) => total(b[1]) - total(a[1]))
+      .slice(0, MAX_SERIES - 1)
+      .map(([key]) => key),
+  );
+
+  // Bucket order follows the first series (the chart's axis labels), then any
+  // bucket only a later series reports, so Object.values lines up.
+  const other: Record<string, number> = {};
+  for (const [, series] of entries) {
+    for (const bucket of Object.keys(series)) other[bucket] ??= 0;
+  }
+  for (const [key, series] of entries) {
+    if (keep.has(key)) continue;
+    for (const [bucket, value] of Object.entries(series)) {
+      other[bucket] += value || 0;
+    }
+  }
+
+  return [
+    ...entries.filter(([key]) => keep.has(key)),
+    [OTHER_SERIES_KEY, other],
+  ];
+}
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index e4b443b5..723e0061 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -5,7 +5,7 @@ import userService from '../api/services/userService';
 import { useMediaQuery } from '../hooks';
 import { Doc } from '../models/misc';
 import SectionIndexPage from '../navigation/SectionIndexPage';
-import { CurrentSectionHeader } from '../navigation/SectionPageHeader';
+import SectionShell from '../navigation/SectionShell';
 import { SETTINGS_SECTION } from '../navigation/sections';
 import {
   selectPaginatedDocuments,
@@ -31,10 +31,9 @@ import Tools from './Tools';
 export default function Settings() {
   const dispatch = useDispatch();
   const location = useLocation();
-  const { isMobile, isTablet } = useMediaQuery();
+  const { isMobile } = useMediaQuery();
 
-  const showIndex =
-    (isMobile || isTablet) && location.pathname === SETTINGS_SECTION.rootPath;
+  const showIndex = isMobile && location.pathname === SETTINGS_SECTION.rootPath;
 
   const token = useSelector(selectToken);
   const documents = useSelector(selectSourceDocs);
@@ -63,40 +62,39 @@ export default function Settings() {
       .catch((error) => console.error(error));
   };
 
+  if (showIndex) {
+    return (
+      <SectionShell header={false}>
+        <SectionIndexPage section={SETTINGS_SECTION} />
+      </SectionShell>
+    );
+  }
+
   return (
-    <div className="h-full overflow-auto p-4 md:p-12">
-      <div className="mx-auto w-full max-w-6xl">
-        {showIndex ? (
-          <SectionIndexPage section={SETTINGS_SECTION} />
-        ) : (
-          <>
-            <CurrentSectionHeader />
-            <Routes>
-              <Route index element={<General />} />
-              <Route path="general" element={<General />} />
-              <Route
-                path="sources"
-                element={
-                  <Sources
-                    paginatedDocuments={paginatedDocuments}
-                    handleDeleteDocument={handleDeleteClick}
-                  />
-                }
-              />
-              <Route path="analytics" element={<Analytics />} />
-              <Route path="logs" element={<Logs />} />
-              <Route path="tools" element={<Tools />} />
-              <Route
-                path="devices"
-                element={<Navigate to="/settings/tools" replace />}
-              />
-              <Route path="custom-models" element={<CustomModels />} />
-              <Route path="access-tokens" element={<PersonalAccessTokens />} />
-              <Route path="*" element={<Navigate to="/settings" replace />} />
-            </Routes>
-          </>
-        )}
-      </div>
-    </div>
+    <SectionShell>
+      <Routes>
+        <Route index element={<General />} />
+        <Route path="general" element={<General />} />
+        <Route
+          path="sources"
+          element={
+            <Sources
+              paginatedDocuments={paginatedDocuments}
+              handleDeleteDocument={handleDeleteClick}
+            />
+          }
+        />
+        <Route path="analytics" element={<Analytics />} />
+        <Route path="logs" element={<Logs />} />
+        <Route path="tools" element={<Tools />} />
+        <Route
+          path="devices"
+          element={<Navigate to="/settings/tools" replace />}
+        />
+        <Route path="custom-models" element={<CustomModels />} />
+        <Route path="access-tokens" element={<PersonalAccessTokens />} />
+        <Route path="*" element={<Navigate to="/settings" replace />} />
+      </Routes>
+    </SectionShell>
   );
 }
diff --git a/frontend/src/settings/traces/TraceChips.tsx b/frontend/src/settings/traces/TraceChips.tsx
index d1240a57..1d5472d1 100644
--- a/frontend/src/settings/traces/TraceChips.tsx
+++ b/frontend/src/settings/traces/TraceChips.tsx
@@ -9,6 +9,7 @@ import {
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Badge } from '@/components/ui/badge';
 import { TraceCounts } from '../types';
 import { formatDurationMs, formatTokens } from './traceUtils';
 
@@ -76,17 +77,15 @@ export default function TraceChips({ durationMs, counts }: TraceChipsProps) {
   return (
     <div className="flex flex-wrap gap-1.5">
       {chips.map((chip) => (
-        <span
+        <Badge
           key={chip.key}
-          className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs tabular-nums ${
-            chip.tone === 'danger'
-              ? 'bg-destructive/10 text-destructive'
-              : 'bg-muted text-foreground'
-          }`}
+          variant={chip.tone === 'danger' ? 'destructive' : 'neutral'}
+          // eslint-disable-next-line shadcn/no-restyle -- durations and counts use tabular figures so chips don't jitter between rows
+          className="tabular-nums"
         >
           {chip.icon}
           {chip.label}
-        </span>
+        </Badge>
       ))}
     </div>
   );
diff --git a/frontend/src/settings/traces/TraceSheet.test.tsx b/frontend/src/settings/traces/TraceSheet.test.tsx
new file mode 100644
index 00000000..03618b84
--- /dev/null
+++ b/frontend/src/settings/traces/TraceSheet.test.tsx
@@ -0,0 +1,74 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-redux', () => ({
+  useSelector: () => 'token',
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('./TraceWaterfall', () => ({ default: () => null }));
+
+const getTraces = vi.fn();
+vi.mock('../../api/services/userService', () => ({
+  default: {
+    getTraces: (...args: unknown[]) => getTraces(...args),
+  },
+}));
+
+import TraceSheet from './TraceSheet';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const flush = () => act(() => new Promise((resolve) => setTimeout(resolve)));
+
+describe('TraceSheet', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    getTraces.mockReset();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('shows a destructive empty state whose Retry refetches the trace', async () => {
+    getTraces
+      .mockResolvedValueOnce({ ok: false })
+      .mockResolvedValueOnce({ ok: true, json: async () => ({ traces: [] }) });
+
+    act(() =>
+      root.render(
+        <TraceSheet
+          traceRef={{ field: 'id', value: 't-1' }}
+          onClose={() => undefined}
+        />,
+      ),
+    );
+    await flush();
+
+    const alert = document.body.querySelector('[data-slot="empty-state"]');
+    expect(alert?.getAttribute('data-tone')).toBe('destructive');
+    expect(alert?.textContent).toContain('settings.logs.trace.failed');
+    expect(getTraces).toHaveBeenCalledTimes(1);
+
+    const retry = Array.from(alert?.querySelectorAll('button') ?? []).find(
+      (button) => button.textContent === 'retry',
+    );
+    expect(retry).toBeDefined();
+    act(() => retry?.click());
+    await flush();
+
+    expect(getTraces).toHaveBeenCalledTimes(2);
+    expect(document.body.textContent).toContain('settings.logs.trace.empty');
+    expect(document.body.querySelector('[data-tone="destructive"]')).toBeNull();
+  });
+});
diff --git a/frontend/src/settings/traces/TraceSheet.tsx b/frontend/src/settings/traces/TraceSheet.tsx
index eb7e2385..a9886d03 100644
--- a/frontend/src/settings/traces/TraceSheet.tsx
+++ b/frontend/src/settings/traces/TraceSheet.tsx
@@ -3,7 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import userService from '../../api/services/userService';
-import Spinner from '../../components/Spinner';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { EmptyState } from '@/components/ui/empty-state';
+import { LoadingState } from '@/components/ui/loading-state';
 import { Sheet, SheetContent } from '../../components/ui/sheet';
 import { selectToken } from '../../preferences/preferenceSlice';
 import { formatDateTime } from '../../utils/dateTimeUtils';
@@ -17,12 +20,15 @@ type TraceSheetProps = {
   onClose: () => void;
 };
 
-/** Status pill tones. The theme has no success or warning token yet. */
-const STATUS_TONE: Record<string, string> = {
-  ok: 'bg-muted text-foreground',
-  error: 'bg-destructive/10 text-destructive',
-  paused: 'bg-primary/10 text-primary',
-  cancelled: 'bg-muted text-muted-foreground',
+/** Status → Badge variant. Unknown statuses (pending, denied, skipped) fall back to `neutral`. */
+const STATUS_VARIANT: Record<
+  string,
+  React.ComponentProps<typeof Badge>['variant']
+> = {
+  ok: 'neutral',
+  error: 'destructive',
+  paused: 'default',
+  cancelled: 'neutral',
 };
 
 /**
@@ -39,6 +45,8 @@ export default function TraceSheet({
   const [traces, setTraces] = useState<Trace[]>([]);
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
+  // Bumped by Retry to re-run the fetch for the same trace.
+  const [reloadKey, setReloadKey] = useState(0);
   // The sheet is opened from a Logs row, not a SheetTrigger, so Radix has no
   // trigger to return focus to on close; remember what had focus instead.
   const returnFocusRef = useRef<HTMLElement | null>(null);
@@ -69,7 +77,7 @@ export default function TraceSheet({
         if (!controller.signal.aborted) setLoading(false);
       });
     return () => controller.abort();
-  }, [traceRef?.field, traceRef?.value, agentId, token]);
+  }, [traceRef?.field, traceRef?.value, agentId, token, reloadKey]);
 
   return (
     <Sheet open={traceRef !== null} onOpenChange={(open) => !open && onClose()}>
@@ -95,16 +103,24 @@ export default function TraceSheet({
         }}
         className="w-full overflow-y-auto sm:max-w-3xl"
       >
-        <div className="flex flex-col gap-8 px-4 pt-4 pb-6">
-          {loading && (
-            <div className="flex justify-center py-10">
-              <Spinner />
-            </div>
-          )}
+        <div className="flex flex-col gap-6 px-4 pt-4 pb-6">
+          {loading && <LoadingState fill="block" />}
           {!loading && failed && (
-            <p className="text-destructive text-sm">
-              {t('settings.logs.trace.failed')}
-            </p>
+            <EmptyState
+              tone="destructive"
+              size="sm"
+              illustration="none"
+              title={t('settings.logs.trace.failed')}
+              action={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setReloadKey((key) => key + 1)}
+                >
+                  {t('retry')}
+                </Button>
+              }
+            />
           )}
           {!loading && !failed && traces.length === 0 && (
             <p className="text-muted-foreground text-sm">
@@ -129,16 +145,12 @@ export default function TraceSheet({
                 <span className="text-muted-foreground text-xs">
                   {formatDateTime(trace.started_at)}
                 </span>
-                <span
-                  className={`rounded-full px-2 py-0.5 text-xs font-medium ${
-                    STATUS_TONE[trace.status] ?? STATUS_TONE.cancelled
-                  }`}
-                >
+                <Badge variant={STATUS_VARIANT[trace.status] ?? 'neutral'}>
                   {t(
                     `settings.logs.trace.status.${trace.status}`,
                     trace.status,
                   )}
-                </span>
+                </Badge>
               </div>
               <TraceChips
                 durationMs={trace.duration_ms}
diff --git a/frontend/src/settings/traces/TraceSpanDetails.tsx b/frontend/src/settings/traces/TraceSpanDetails.tsx
index 146acef1..caf46113 100644
--- a/frontend/src/settings/traces/TraceSpanDetails.tsx
+++ b/frontend/src/settings/traces/TraceSpanDetails.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Alert, AlertDescription } from '../../components/ui/alert';
+import { Card } from '../../components/ui/card';
+import {
+  DescriptionItem,
+  DescriptionList,
+} from '../../components/ui/description-list';
 import { ToolCallPanel } from '../../conversation/AnswerFlow';
 import { TraceSpan } from '../types';
 import { formatDurationMs, formatTokens } from './traceUtils';
 
-type Row = [string, string];
+/** A fact row: label, value and whether the value is an id (set in mono). */
+type Row = [string, string, boolean];
 
 function str(value: unknown): string | undefined {
   if (value === null || value === undefined || value === '') return undefined;
@@ -32,9 +37,9 @@ export default function TraceSpanDetails({ span }: { span: TraceSpan }) {
   const f = (key: string) => t(`settings.logs.trace.fields.${key}`);
   const yes = t('settings.logs.trace.fields.yes');
   const rows: Row[] = [];
-  const push = (label: string, value: unknown) => {
+  const push = (label: string, value: unknown, mono = false) => {
     const text = str(value);
-    if (text !== undefined) rows.push([label, text]);
+    if (text !== undefined) rows.push([label, text, mono]);
   };
 
   push(
@@ -72,7 +77,7 @@ export default function TraceSpanDetails({ span }: { span: TraceSpan }) {
     case 'tool':
       push(f('tool'), a['docsgpt.tool']);
       push(f('action'), a['docsgpt.action'] ?? a['gen_ai.tool.name']);
-      push(f('callId'), a['gen_ai.tool.call.id']);
+      push(f('callId'), a['gen_ai.tool.call.id'], true);
       break;
     case 'retrieval':
     case 'search':
@@ -117,24 +122,25 @@ export default function TraceSpanDetails({ span }: { span: TraceSpan }) {
 
   return (
     <div className="flex flex-col gap-3 text-xs">
-      <div className="grid grid-cols-[minmax(0,9rem)_minmax(0,1fr)] gap-x-3 gap-y-1">
-        {rows.map(([label, value]) => (
-          <React.Fragment key={label}>
-            <span className="text-muted-foreground">{label}</span>
-            <span className="text-foreground break-all">{value}</span>
-          </React.Fragment>
+      <DescriptionList size="xs">
+        {rows.map(([label, value, mono]) => (
+          <DescriptionItem key={label} label={label} mono={mono}>
+            {value}
+          </DescriptionItem>
         ))}
-      </div>
+      </DescriptionList>
       {span.error && (
         <Alert variant="destructive">
-          <AlertDescription className="font-mono whitespace-pre-wrap">
-            {span.error}
+          <AlertDescription>
+            <pre className="font-mono text-xs wrap-break-word whitespace-pre-wrap">
+              {span.error}
+            </pre>
           </AlertDescription>
         </Alert>
       )}
       {preview.query !== undefined && (
         <ToolCallPanel title={f('query')} copyText={jsonText(preview.query)}>
-          <p className="font-mono whitespace-pre-wrap">
+          <p className="max-h-60 overflow-y-auto wrap-break-word whitespace-pre-wrap">
             {jsonText(preview.query)}
           </p>
         </ToolCallPanel>
@@ -144,21 +150,21 @@ export default function TraceSpanDetails({ span }: { span: TraceSpan }) {
           title={f('arguments')}
           copyText={jsonText(preview.arguments)}
         >
-          <p className="max-h-60 overflow-y-auto font-mono whitespace-pre-wrap">
+          <pre className="max-h-60 overflow-y-auto font-mono text-xs wrap-break-word whitespace-pre-wrap">
             {jsonText(preview.arguments)}
-          </p>
+          </pre>
         </ToolCallPanel>
       )}
       {preview.result !== undefined && (
         <ToolCallPanel title={f('result')} copyText={jsonText(preview.result)}>
-          <p className="max-h-60 overflow-y-auto font-mono whitespace-pre-wrap">
+          <pre className="max-h-60 overflow-y-auto font-mono text-xs wrap-break-word whitespace-pre-wrap">
             {jsonText(preview.result)}
-          </p>
+          </pre>
         </ToolCallPanel>
       )}
       {preview.output !== undefined && (
         <ToolCallPanel title={f('output')} copyText={jsonText(preview.output)}>
-          <p className="max-h-60 overflow-y-auto whitespace-pre-wrap">
+          <p className="max-h-60 overflow-y-auto wrap-break-word whitespace-pre-wrap">
             {jsonText(preview.output)}
           </p>
         </ToolCallPanel>
@@ -191,18 +197,24 @@ export default function TraceSpanDetails({ span }: { span: TraceSpan }) {
       )}
       {otherPreviews.map(([key, value]) => (
         <ToolCallPanel key={key} title={key} copyText={jsonText(value)}>
-          <p className="max-h-60 overflow-y-auto font-mono whitespace-pre-wrap">
+          <pre className="max-h-60 overflow-y-auto font-mono text-xs wrap-break-word whitespace-pre-wrap">
             {jsonText(value)}
-          </p>
+          </pre>
         </ToolCallPanel>
       ))}
       <details>
         <summary className="text-muted-foreground cursor-pointer select-none">
           {f('allAttributes')}
         </summary>
-        <pre className="text-muted-foreground mt-1 max-h-60 overflow-y-auto font-mono whitespace-pre-wrap">
-          {JSON.stringify(a, null, 2)}
-        </pre>
+        <Card
+          variant="filled"
+          padding="sm"
+          className="mt-1 max-h-60 overflow-y-auto"
+        >
+          <pre className="text-muted-foreground font-mono text-xs wrap-break-word whitespace-pre-wrap">
+            {JSON.stringify(a, null, 2)}
+          </pre>
+        </Card>
       </details>
     </div>
   );
diff --git a/frontend/src/settings/traces/TraceWaterfall.tsx b/frontend/src/settings/traces/TraceWaterfall.tsx
index 30957719..05168db8 100644
--- a/frontend/src/settings/traces/TraceWaterfall.tsx
+++ b/frontend/src/settings/traces/TraceWaterfall.tsx
@@ -14,6 +14,9 @@ import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '../../components/ui/button';
+import { EmptyState } from '../../components/ui/empty-state';
+import { IconButton } from '../../components/ui/icon-button';
+import { cn } from '../../lib/utils';
 import { Trace, TraceSpan } from '../types';
 import TraceSpanDetails from './TraceSpanDetails';
 import {
@@ -97,9 +100,11 @@ export default function TraceWaterfall({ trace }: { trace: Trace }) {
 
   if (!rows.length) {
     return (
-      <p className="text-muted-foreground py-4 text-center text-xs">
-        {t('settings.logs.trace.noSpans')}
-      </p>
+      <EmptyState
+        size="xs"
+        illustration="none"
+        title={t('settings.logs.trace.noSpans')}
+      />
     );
   }
 
@@ -111,7 +116,10 @@ export default function TraceWaterfall({ trace }: { trace: Trace }) {
           {SCALE_TICKS.map((tick) => (
             <span
               key={tick.at}
-              className={`absolute top-0 whitespace-nowrap tabular-nums ${tick.className}`}
+              className={cn(
+                'absolute top-0 whitespace-nowrap tabular-nums',
+                tick.className,
+              )}
             >
               {tick.at === 0 ? '0' : formatDurationMs(totalMs * tick.at)}
             </span>
@@ -139,21 +147,28 @@ export default function TraceWaterfall({ trace }: { trace: Trace }) {
             style={geometry}
           >
             <div
-              className={`grid grid-cols-9 items-center gap-3 rounded-md ${selected ? 'bg-accent' : ''}`}
+              className={cn(
+                'grid grid-cols-9 items-center gap-3 rounded-md',
+                selected && 'bg-accent',
+              )}
             >
               <div className="col-span-5 flex min-w-0 items-center pl-(--trace-indent)">
                 {hasChildren ? (
-                  <Button
+                  <IconButton
+                    label={t('settings.logs.trace.toggleChildren')}
                     variant="ghost"
                     size="icon-sm"
-                    aria-label={t('settings.logs.trace.toggleChildren')}
                     aria-expanded={!isCollapsed}
                     onClick={() => toggleCollapsed(span.id)}
                   >
                     <ChevronRight
-                      className={`text-muted-foreground transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
+                      aria-hidden
+                      className={cn(
+                        'text-muted-foreground transition-transform duration-200',
+                        !isCollapsed && 'rotate-90',
+                      )}
                     />
-                  </Button>
+                  </IconButton>
                 ) : (
                   <span className="size-8 shrink-0" />
                 )}
@@ -165,7 +180,12 @@ export default function TraceWaterfall({ trace }: { trace: Trace }) {
                   onClick={() => toggleSelected(span.id)}
                 >
                   <Icon
-                    className={`size-3.5 ${span.status === 'error' ? 'text-destructive' : 'text-muted-foreground'}`}
+                    className={cn(
+                      'size-3.5',
+                      span.status === 'error'
+                        ? 'text-destructive'
+                        : 'text-muted-foreground',
+                    )}
                     aria-label={t(
                       `settings.logs.trace.kinds.${span.kind}`,
                       span.kind,
@@ -191,7 +211,10 @@ export default function TraceWaterfall({ trace }: { trace: Trace }) {
                 className="bg-muted relative col-span-4 h-3 cursor-pointer rounded-sm"
               >
                 <span
-                  className={`absolute inset-y-0 left-(--trace-bar-left) w-(--trace-bar-width) rounded-sm ${barClass(span)}`}
+                  className={cn(
+                    'absolute inset-y-0 left-(--trace-bar-left) w-(--trace-bar-width) rounded-sm',
+                    barClass(span),
+                  )}
                 />
               </div>
             </div>
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index c9a72491..429eb5cd 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -8,6 +8,7 @@ import {
   conversationSlice,
 } from './conversation/conversationSlice';
 import { sharedConversationSlice } from './conversation/sharedConversationSlice';
+import actionToastReducer from './notifications/actionToastSlice';
 import notificationsReducer from './notifications/notificationsSlice';
 import { getStoredRecentDocs } from './preferences/preferenceApi';
 import {
@@ -70,6 +71,7 @@ const store = configureStore({
     agentPreview: agentPreviewReducer,
     workflowPreview: workflowPreviewReducer,
     notifications: notificationsReducer,
+    actionToast: actionToastReducer,
     schedules: schedulesReducer,
     teams: teamsReducer,
     graphBuild: graphBuildReducer,
diff --git a/frontend/src/teams/ShareToTeamModal.tsx b/frontend/src/teams/ShareToTeamModal.tsx
index 49ac442b..54f4c9d7 100644
--- a/frontend/src/teams/ShareToTeamModal.tsx
+++ b/frontend/src/teams/ShareToTeamModal.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown } from 'lucide-react';
+import { CircleAlert, Trash2 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -9,6 +9,7 @@ import teamsService, {
   ResourceType,
   TeamMember,
 } from '../api/services/teamsService';
+import { Alert, AlertDescription } from '../components/ui/alert';
 import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
 import {
@@ -19,14 +20,10 @@ import {
   CommandItem,
   CommandList,
 } from '../components/ui/command';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../components/ui/dropdown-menu';
+import { IconButton } from '../components/ui/icon-button';
+import { ListRow, ListRows } from '../components/ui/list-row';
 import { Modal } from '../components/ui/modal';
+import { SectionHeader } from '../components/ui/section-header';
 import {
   Popover,
   PopoverContent,
@@ -42,7 +39,6 @@ import {
 import { selectToken } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 import { decodeJwtPayload } from '../utils/jwtUtils';
-import { cn } from '@/lib/utils';
 import { loadTeams, selectTeams } from './teamsSlice';
 
 type Props = {
@@ -411,44 +407,36 @@ export default function ShareToTeamModal({
     const key = shareKey(share);
     const rowBusy = busyKeys.has(key);
     return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
+      <>
+        <Select
+          value={share.access_level}
+          disabled={rowBusy}
+          onValueChange={(value) => changeAccess(share, value as AccessLevel)}
+        >
+          <SelectTrigger
             size="sm"
-            disabled={rowBusy}
-            className="shrink-0 gap-1 px-2 font-normal"
+            className="w-28 shrink-0"
             aria-label={t('settings.teams.share.access')}
           >
-            {t(`settings.teams.share.accessLevel.${share.access_level}`)}
-            <ChevronDown className="size-4 opacity-50" />
-          </Button>
-        </DropdownMenuTrigger>
-        {/* z-200 keeps the menu above Modal (z-50), matching the combobox/access controls. */}
-        <DropdownMenuContent align="end" className="z-200 min-w-40">
-          {(['viewer', 'editor'] as AccessLevel[]).map((level) => (
-            <DropdownMenuItem
-              key={level}
-              onSelect={() => changeAccess(share, level)}
-            >
-              <Check
-                className={cn(
-                  'size-4 shrink-0',
-                  share.access_level === level ? 'opacity-100' : 'opacity-0',
-                )}
-              />
-              {t(`settings.teams.share.accessLevel.${level}`)}
-            </DropdownMenuItem>
-          ))}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            variant="destructive"
-            onSelect={() => removeAccess(share)}
-          >
-            {t('settings.teams.share.removeAccess')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {(['viewer', 'editor'] as AccessLevel[]).map((level) => (
+              <SelectItem key={level} value={level}>
+                {t(`settings.teams.share.accessLevel.${level}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <IconButton
+          variant="ghost-destructive"
+          size="icon-sm"
+          icon={Trash2}
+          disabled={rowBusy}
+          label={t('settings.teams.share.removeAccess')}
+          onClick={() => removeAccess(share)}
+        />
+      </>
     );
   };
 
@@ -462,29 +450,22 @@ export default function ShareToTeamModal({
       ? t('settings.teams.share.teamLabel')
       : t('settings.teams.share.viaTeam', { team: name });
     return (
-      <li key={shareKey(share)} className="flex items-center gap-3 py-2">
-        <Avatar
-          alt=""
-          className={cn(
-            'bg-primary/10 text-primary dark:bg-primary/20 flex size-9 items-center justify-center text-sm font-medium',
-            isTeam ? 'rounded-md' : 'rounded-full',
-          )}
-        >
-          {initialOf(primary)}
-        </Avatar>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium" title={primary}>
-            {primary}
-          </p>
-          <p
-            className="text-muted-foreground truncate text-xs"
-            title={secondary}
+      <ListRow
+        key={shareKey(share)}
+        leading={
+          <Avatar
+            alt=""
+            variant="primary"
+            size="default"
+            shape={isTeam ? 'square' : 'circle'}
           >
-            {secondary}
-          </p>
-        </div>
-        {renderRoleControl(share)}
-      </li>
+            {initialOf(primary)}
+          </Avatar>
+        }
+        title={<span title={primary}>{primary}</span>}
+        description={<span title={secondary}>{secondary}</span>}
+        trailing={renderRoleControl(share)}
+      />
     );
   };
 
@@ -499,7 +480,7 @@ export default function ShareToTeamModal({
       title={title}
       size="md"
       footer={
-        <Button variant="outline" disabled={inFlight} onClick={onClose}>
+        <Button size="lg" shape="pill" disabled={inFlight} onClick={onClose}>
           {t('settings.teams.share.done')}
         </Button>
       }
@@ -509,14 +490,18 @@ export default function ShareToTeamModal({
       </p>
 
       {loadError && (
-        <p className="text-destructive mt-3 text-sm" role="alert">
-          {t('settings.teams.share.loadError')}
-        </p>
+        <Alert variant="destructive" className="mt-3">
+          <CircleAlert className="size-4" aria-hidden="true" />
+          <AlertDescription>
+            {t('settings.teams.share.loadError')}
+          </AlertDescription>
+        </Alert>
       )}
       {actionError && (
-        <p className="text-destructive mt-3 text-sm" role="alert">
-          {actionError}
-        </p>
+        <Alert variant="destructive" className="mt-3">
+          <CircleAlert className="size-4" aria-hidden="true" />
+          <AlertDescription>{actionError}</AlertDescription>
+        </Alert>
       )}
 
       {teams.length === 0 ? (
@@ -529,20 +514,20 @@ export default function ShareToTeamModal({
               <PopoverTrigger asChild>
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="combobox"
                   role="combobox"
                   aria-expanded={pickerOpen}
                   disabled={committing}
-                  className="text-muted-foreground h-9 min-w-0 flex-1 justify-start gap-2 px-3 font-normal"
+                  data-placeholder=""
+                  className="min-w-0 flex-1 justify-start"
                 >
                   <span className="truncate">
                     {t('settings.teams.share.addPlaceholder')}
                   </span>
                 </Button>
               </PopoverTrigger>
-              {/* z-200 keeps the popover above Modal (z-50). */}
               <PopoverContent
-                className="z-200 w-[min(22rem,calc(100vw-2rem))] p-0"
+                className="w-[min(22rem,calc(100vw-2rem))] p-0"
                 align="start"
               >
                 <Command shouldFilter={false}>
@@ -566,11 +551,12 @@ export default function ShareToTeamModal({
                             key={suggestion.key}
                             value={suggestion.key}
                             onSelect={() => commitSuggestion(suggestion)}
-                            className="gap-3"
                           >
                             <Avatar
                               alt=""
-                              className="bg-primary/10 text-primary dark:bg-primary/20 flex size-7 items-center justify-center rounded-md text-xs font-medium"
+                              variant="primary"
+                              size="xs"
+                              shape="square"
                             >
                               {initialOf(suggestion.teamName)}
                             </Avatar>
@@ -591,11 +577,12 @@ export default function ShareToTeamModal({
                               key={suggestion.key}
                               value={`${suggestion.key} ${suggestion.label} ${suggestion.teamName}`}
                               onSelect={() => commitSuggestion(suggestion)}
-                              className="gap-3"
                             >
                               <Avatar
                                 alt=""
-                                className="bg-primary/10 text-primary dark:bg-primary/20 flex size-7 items-center justify-center rounded-full text-xs font-medium"
+                                variant="primary"
+                                size="xs"
+                                shape="circle"
                               >
                                 {initialOf(suggestion.label)}
                               </Avatar>
@@ -639,30 +626,34 @@ export default function ShareToTeamModal({
           </div>
 
           {/* People with access. */}
-          <section className="mt-6">
-            <h3 className="text-sm font-medium">
-              {t('settings.teams.share.peopleWithAccess')}
-            </h3>
-            <ul className="mt-1 max-h-72 overflow-auto">
+          <section className="mt-6 flex flex-col gap-1">
+            <SectionHeader
+              as="h3"
+              size="xs"
+              title={t('settings.teams.share.peopleWithAccess')}
+            />
+            <ListRows className="max-h-72 overflow-auto">
               {/* Owner — pinned, non-interactive. */}
-              <li className="flex items-center gap-3 py-2">
-                <Avatar
-                  alt=""
-                  className="bg-primary/10 text-primary dark:bg-primary/20 flex size-9 items-center justify-center rounded-full text-sm font-medium"
-                >
-                  {initialOf(t('settings.teams.share.you'))}
-                </Avatar>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium">
-                    {t('settings.teams.share.you')}
-                  </p>
-                </div>
-                <span className="text-muted-foreground shrink-0 pr-3 text-sm">
-                  {t('settings.teams.share.owner')}
-                </span>
-              </li>
+              <ListRow
+                leading={
+                  <Avatar
+                    alt=""
+                    variant="primary"
+                    size="default"
+                    shape="circle"
+                  >
+                    {initialOf(t('settings.teams.share.you'))}
+                  </Avatar>
+                }
+                title={t('settings.teams.share.you')}
+                trailing={
+                  <span className="text-muted-foreground shrink-0 pr-3 text-sm">
+                    {t('settings.teams.share.owner')}
+                  </span>
+                }
+              />
               {shares.map(renderShareRow)}
-            </ul>
+            </ListRows>
           </section>
         </>
       )}
diff --git a/frontend/src/teams/TeamSwitcher.tsx b/frontend/src/teams/TeamSwitcher.tsx
index 4c1fa533..9c8af2ec 100644
--- a/frontend/src/teams/TeamSwitcher.tsx
+++ b/frontend/src/teams/TeamSwitcher.tsx
@@ -6,7 +6,7 @@ import {
   Check,
   ChevronsUpDown,
   Plus,
-  Settings as SettingsIcon,
+  Settings,
   User,
   Users,
 } from 'lucide-react';
@@ -32,6 +32,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../components/ui/dropdown-menu';
+import { Button } from '../components/ui/button';
 
 type TeamSwitcherProps = {
   // Called after a navigation/selection so callers (e.g. the mobile nav) can
@@ -90,34 +91,34 @@ export default function TeamSwitcher({
   const triggerIcon = currentTeam ? (
     // A solid square reads heavier than the dino, so keep the team avatar a
     // touch smaller (with a little margin to align with the wordmark).
-    <span className="bg-muted dark:bg-accent text-foreground mx-1 flex size-7 shrink-0 items-center justify-center rounded-md text-sm font-semibold">
+    <span className="bg-muted text-foreground mx-1 flex size-7 shrink-0 items-center justify-center rounded-md text-sm font-semibold">
       {teamInitial}
     </span>
   ) : (
     <img
       className="h-8 w-auto shrink-0"
       src={isDarkTheme ? DocsGPTMarkWhite : DocsGPTMark}
-      alt="DocsGPT Logo"
+      alt={t('teams.switcher.logoAlt')}
     />
   );
 
   // Expanded brand row. In a personal context the full lockup replaces the
   // mark-plus-label pair outright — the wordmark is part of the artwork, so a
   // separate "DocsGPT" text label would repeat it. `mr-auto` keeps the chevron
-  // pinned right, the job the label's `flex-1` used to do, and `ml-4` lines the
+  // pinned right, the job the label's `flex-1` used to do, and `ml-3` lines the
   // logo's left edge up with the "Agents"/"Chats" section headings below it
   // (those sit 32px in: `mx-4` on their row plus `ml-4` on the label; the
-  // header strip and this button contribute 8px of padding each).
+  // header strip adds 8px and the sidebar-item row's `pl-3` 12px).
   const expandedBrand = currentTeam ? (
     <>
       {triggerIcon}
-      <span className="text-foreground min-w-0 flex-1 truncate text-xl font-semibold dark:text-white">
+      <span className="text-foreground min-w-0 flex-1 truncate text-xl font-semibold">
         {currentTeam.name}
       </span>
     </>
   ) : (
     <img
-      className="mr-auto ml-4 h-4 w-auto shrink-0"
+      className="mr-auto ml-3 h-4 w-auto shrink-0"
       src={isDarkTheme ? DocsGPTLogoWhite : DocsGPTLogo}
       alt="DocsGPT"
     />
@@ -150,46 +151,48 @@ export default function TeamSwitcher({
           <button
             type="button"
             aria-label={t('teams.switcher.ariaLabel')}
-            className="hover:bg-muted dark:hover:bg-accent flex items-center justify-center rounded-lg p-1 transition-colors"
+            className="hover:bg-sidebar-accent flex items-center justify-center rounded-full p-1 transition-colors"
           >
             {triggerIcon}
           </button>
         ) : (
-          <button
+          <Button
             type="button"
+            variant="sidebar-item"
             aria-label={t('teams.switcher.ariaLabel')}
-            className="hover:bg-muted dark:hover:bg-accent text-foreground flex w-full items-center gap-1.5 rounded-lg px-2 py-1 text-left transition-colors"
+            className="w-full"
           >
             {expandedBrand}
-            <ChevronsUpDown
-              className="text-muted-foreground size-4 shrink-0"
-              strokeWidth={1.75}
-            />
-          </button>
+            {/* sidebar-item rows carry no right padding, so the chevron's
+                margin keeps it clear of the pill's end. */}
+            <ChevronsUpDown className="text-muted-foreground mr-3 size-4" />
+          </Button>
         )}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-62">
-        <DropdownMenuLabel className="flex items-center gap-2">
-          <span className="bg-muted dark:bg-accent flex size-7 shrink-0 items-center justify-center rounded-md">
-            {currentTeam ? (
-              <Users className="size-4" strokeWidth={1.75} />
-            ) : (
-              <User className="size-4" strokeWidth={1.75} />
-            )}
-          </span>
-          <span className="min-w-0 flex-1">
-            <span className="text-foreground block truncate text-sm font-semibold">
-              {currentName}
+        <DropdownMenuLabel>
+          <div className="flex items-center gap-2">
+            <span className="bg-muted flex size-7 shrink-0 items-center justify-center rounded-md">
+              {currentTeam ? (
+                <Users className="size-4" />
+              ) : (
+                <User className="size-4" />
+              )}
             </span>
-            <span className="text-muted-foreground block truncate text-xs font-normal">
-              {currentRoleLabel}
+            <span className="min-w-0 flex-1">
+              <span className="text-foreground block truncate text-sm font-semibold">
+                {currentName}
+              </span>
+              <span className="text-muted-foreground block truncate text-xs font-normal">
+                {currentRoleLabel}
+              </span>
             </span>
-          </span>
+          </div>
         </DropdownMenuLabel>
 
         {currentTeam && (
           <DropdownMenuItem onSelect={goToManage}>
-            <SettingsIcon className="size-4" strokeWidth={1.75} />
+            <Settings className="size-4" />
             <span>{t('teams.switcher.manageTeam')}</span>
           </DropdownMenuItem>
         )}
@@ -199,7 +202,7 @@ export default function TeamSwitcher({
         {/* Personal account entry */}
         {currentTeam && (
           <DropdownMenuItem onSelect={() => selectTeam(null)}>
-            <User className="size-4" strokeWidth={1.75} />
+            <User className="size-4" />
             <span className="min-w-0 flex-1 truncate">
               {t('teams.switcher.personal')}
             </span>
@@ -210,7 +213,7 @@ export default function TeamSwitcher({
         {/* Other teams to switch to */}
         {otherTeams.map((team) => (
           <DropdownMenuItem key={team.id} onSelect={() => selectTeam(team.id)}>
-            <Users className="size-4" strokeWidth={1.75} />
+            <Users className="size-4" />
             <span className="min-w-0 flex-1 truncate" title={team.name}>
               {team.name}
             </span>
@@ -220,7 +223,7 @@ export default function TeamSwitcher({
         <DropdownMenuSeparator />
 
         <DropdownMenuItem onSelect={goToCreate}>
-          <Plus className="size-4" strokeWidth={1.75} />
+          <Plus className="size-4" />
           <span>{t('teams.switcher.createTeam')}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/frontend/src/upload/Upload.test.tsx b/frontend/src/upload/Upload.test.tsx
new file mode 100644
index 00000000..f7ff6c36
--- /dev/null
+++ b/frontend/src/upload/Upload.test.tsx
@@ -0,0 +1,101 @@
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('react-redux', () => ({
+  useSelector: () => null,
+  useDispatch: () => vi.fn(),
+  useStore: () => ({ getState: () => ({}) }),
+}));
+
+vi.mock('../api/services/userService', () => ({
+  default: {
+    getConfig: () => Promise.resolve({ json: () => Promise.resolve({}) }),
+  },
+}));
+
+import Upload from './Upload';
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe('Upload source-type tiles', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  const render = async () => {
+    await act(async () => {
+      root.render(
+        <Upload
+          receivedFile={[]}
+          setModalState={vi.fn()}
+          isOnboarding={false}
+          renderTab={null}
+          close={vi.fn()}
+        />,
+      );
+    });
+  };
+
+  const tiles = () =>
+    Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>(
+        '[data-slot="option-card"]',
+      ),
+    );
+
+  it('renders each source type as a button tile', async () => {
+    await render();
+    const found = tiles();
+    expect(found.length).toBeGreaterThan(0);
+    for (const tile of found) {
+      expect(tile.tagName).toBe('BUTTON');
+      expect(tile.getAttribute('type')).toBe('button');
+    }
+    const crawler = found.find((tile) =>
+      tile.textContent?.includes('modals.uploadDoc.ingestors.crawler.label'),
+    );
+    expect(crawler).toBeDefined();
+    expect(crawler!.querySelector('img')?.className).toContain('size-6');
+  });
+
+  it('selects the clicked source type', async () => {
+    await render();
+    const crawler = tiles().find((tile) =>
+      tile.textContent?.includes('modals.uploadDoc.ingestors.crawler.label'),
+    )!;
+    await act(async () => crawler.click());
+    expect(tiles()).toHaveLength(0);
+    expect(document.body.textContent).toContain(
+      'modals.uploadDoc.ingestors.crawler.heading',
+    );
+  });
+
+  it('leaves the disabled Train button on the default variant', async () => {
+    await render();
+    const crawler = tiles().find((tile) =>
+      tile.textContent?.includes('modals.uploadDoc.ingestors.crawler.label'),
+    )!;
+    await act(async () => crawler.click());
+    const train = Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>('button'),
+    ).find((b) => b.textContent === 'modals.uploadDoc.train');
+    expect(train).toBeDefined();
+    expect(train!.disabled).toBe(true);
+    expect(train!.className).not.toContain('bg-gray-300');
+    expect(train!.className).toContain('bg-primary');
+  });
+});
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index dc4989a9..257032c5 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,4 +1,6 @@
+import { ChevronLeft } from 'lucide-react';
 import { envVar } from '@/env';
+import { cn } from '@/lib/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { nanoid } from '@reduxjs/toolkit';
 import { useDropzone } from 'react-dropzone';
@@ -12,6 +14,7 @@ import type { Model } from '../models/types';
 import { getSessionToken } from '../utils/providerUtils';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
+import { FormField as UiFormField } from '../components/ui/form-field';
 import { Label } from '../components/ui/label';
 import {
   Select,
@@ -21,7 +24,10 @@ import {
   SelectValue,
 } from '../components/ui/select';
 import { Switch } from '../components/ui/switch';
+import { Textarea } from '../components/ui/textarea';
 import { Modal } from '../components/ui/modal';
+import { Separator } from '../components/ui/separator';
+import { OptionCard } from '../components/ui/option-card';
 import { ActiveState, Doc } from '../models/misc';
 
 import { getDocs } from '../preferences/preferenceApi';
@@ -51,8 +57,6 @@ import RetrievalOptions, {
   type RetrievalOptionsValue,
 } from '../settings/components/RetrievalOptions';
 
-import ChevronRight from '../assets/chevron-right.svg';
-
 function Upload({
   receivedFile = [],
   setModalState,
@@ -137,22 +141,23 @@ function Upload({
     const advancedFields = schema.filter((field: FormField) => field.advanced);
 
     return (
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5">
           {generalFields.map((field: FormField) => renderField(field))}
         </div>
 
         {advancedFields.length > 0 && (
           <div
-            className={`grid transition-all duration-300 ease-in-out ${
+            className={cn(
+              'grid transition-[grid-template-rows,opacity] duration-300 ease-out',
               showAdvancedOptions
                 ? 'grid-rows-[1fr] opacity-100'
-                : 'grid-rows-[0fr] opacity-0'
-            }`}
+                : 'grid-rows-[0fr] opacity-0',
+            )}
           >
             <div className="flex flex-col gap-4 overflow-hidden">
-              <hr className="my-4 border border-[#C4C4C4]/40" />
-              <div className="flex flex-col gap-4">
+              <Separator className="my-4" />
+              <div className="flex flex-col gap-5">
                 {advancedFields.map((field: FormField) => renderField(field))}
               </div>
             </div>
@@ -164,12 +169,13 @@ function Upload({
 
   const renderField = (field: FormField) => {
     const isRequired = field.required ?? false;
+    const fieldLabel = field.labelKey ? t(field.labelKey) : field.label;
     switch (field.type) {
       case 'string':
         return (
           <Input
             key={field.name}
-            label={field.label}
+            label={fieldLabel}
             type="text"
             name={field.name}
             value={String(
@@ -182,14 +188,13 @@ function Upload({
               )
             }
             required={isRequired}
-            labelBgClassName="bg-card"
           />
         );
       case 'number':
         return (
           <Input
             key={field.name}
-            label={field.label}
+            label={fieldLabel}
             type="number"
             name={field.name}
             value={String(
@@ -202,7 +207,6 @@ function Upload({
               )
             }
             required={isRequired}
-            labelBgClassName="bg-card"
           />
         );
       case 'enum': {
@@ -210,30 +214,32 @@ function Upload({
           ingestor.config[field.name as keyof typeof ingestor.config] ?? '',
         );
         return (
-          <Select
+          <UiFormField
             key={field.name}
-            value={currentValue || undefined}
-            onValueChange={(value) => {
-              handleIngestorChange(
-                field.name as keyof IngestorConfig['config'],
-                value,
-              );
-            }}
+            label={fieldLabel}
+            required={isRequired}
           >
-            <SelectTrigger
-              className="w-full rounded-3xl px-5 py-3 text-sm"
-              size="lg"
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(value) => {
+                handleIngestorChange(
+                  field.name as keyof IngestorConfig['config'],
+                  value,
+                );
+              }}
             >
-              <SelectValue placeholder={field.label} />
-            </SelectTrigger>
-            <SelectContent>
-              {(field.options || []).map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+              <SelectTrigger className="w-full" size="field" shape="pill">
+                <SelectValue placeholder={fieldLabel} />
+              </SelectTrigger>
+              <SelectContent>
+                {(field.options || []).map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </UiFormField>
         );
       }
       case 'boolean':
@@ -243,7 +249,7 @@ function Upload({
             className="mt-2 flex flex-row items-center gap-3 text-base"
           >
             <Label htmlFor={`field-${field.name}`} className="text-foreground">
-              {field.label}
+              {fieldLabel}
             </Label>
             <Switch
               id={`field-${field.name}`}
@@ -261,15 +267,12 @@ function Upload({
         );
       case 'textarea':
         return (
-          <div key={field.name} className="flex flex-col gap-2">
-            <Label
-              htmlFor={`field-${field.name}`}
-              className="text-foreground text-sm"
-            >
-              {field.label}
-            </Label>
-            <textarea
-              id={`field-${field.name}`}
+          <UiFormField
+            key={field.name}
+            label={fieldLabel}
+            required={isRequired}
+          >
+            <Textarea
               name={field.name}
               value={String(
                 ingestor.config[field.name as keyof typeof ingestor.config] ??
@@ -283,28 +286,29 @@ function Upload({
               }
               required={isRequired}
               rows={8}
-              className="border-border bg-card text-foreground focus:border-primary w-full resize-y rounded-2xl border p-3 text-sm outline-none"
+              size="lg"
+              variant="filled"
             />
-          </div>
+          </UiFormField>
         );
       case 'local_file_picker':
         return (
           <div key={field.name}>
             <div className="mb-3" {...getRootProps()}>
-              <span className="text-primary dark:text-muted-foreground inline-block rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium hover:cursor-pointer">
+              <span className="text-primary dark:text-muted-foreground border-border inline-block rounded-3xl border bg-transparent px-4 py-2 font-medium hover:cursor-pointer">
                 <input type="button" {...getInputProps()} />
                 {t('modals.uploadDoc.choose')}
               </span>
             </div>
             <div className="mt-4 max-w-full">
-              <p className="text-foreground dark:text-foreground mb-3.5 text-sm font-medium">
+              <p className="text-foreground mb-3.5 text-sm font-medium">
                 {t('modals.uploadDoc.selectedFiles')}
               </p>
               <div className="max-w-full overflow-hidden">
                 {files.map((file) => (
                   <p
                     key={file.name}
-                    className="text-muted-foreground truncate overflow-hidden text-ellipsis"
+                    className="text-muted-foreground truncate"
                     title={file.name}
                   >
                     {file.name}
@@ -1026,30 +1030,20 @@ function Upload({
     return (
       <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {ingestorOptions.map((option) => (
-          <div
+          <OptionCard
             key={option.value}
-            className={`relative mx-auto flex h-[91.2px] w-full cursor-pointer flex-col justify-between gap-2 rounded-2xl border border-solid pt-[21.1px] pr-[21px] pb-[15px] pl-[21px] transition-colors duration-300 ease-out ${
-              ingestor.type === option.value
-                ? 'border-primary bg-primary text-white'
-                : 'border-border hover:bg-accent/30 dark:border-border/30 bg-transparent transition-shadow duration-300 hover:shadow-[0_0_15px_0_#00000026]'
-            }`}
+            icon={
+              <img
+                src={option.icon}
+                alt={option.label}
+                className="size-6 dark:invert"
+              />
+            }
+            title={t(`modals.uploadDoc.ingestors.${option.value}.label`)}
             onClick={() =>
               handleIngestorTypeChange(option.value as IngestorType)
             }
-          >
-            <div className="flex h-full flex-col justify-between">
-              <div className="h-6 w-6">
-                <img
-                  src={option.icon}
-                  alt={option.label}
-                  className={`${ingestor.type === option.value ? 'invert filter' : ''} dark:invert dark:filter`}
-                />
-              </div>
-              <p className="self-start text-sm leading-[18px] font-semibold">
-                {t(`modals.uploadDoc.ingestors.${option.value}.label`)}
-              </p>
-            </div>
-          </div>
+          />
         ))}
       </div>
     );
@@ -1060,14 +1054,27 @@ function Upload({
       onOpenChange={(o) => !o && handleClose()}
       hideTitle
       title={t('modals.uploadDoc.label')}
+      footer={
+        activeTab && ingestor.type ? (
+          <Button
+            type="button"
+            onClick={handleUpload}
+            disabled={isUploadDisabled()}
+            size="lg"
+            shape="pill"
+          >
+            {ingestor.type === 'wiki'
+              ? t('modals.uploadDoc.create')
+              : t('modals.uploadDoc.train')}
+          </Button>
+        ) : undefined
+      }
       size="lg"
       mobileVariant="sheet"
-      className="max-h-[90vh] w-11/12 sm:w-auto sm:min-w-[600px] md:min-w-[700px]"
-      contentClassName="max-h-[80vh]"
     >
       <div className="flex w-full flex-col gap-6">
         {!ingestor.type && (
-          <p className="text-foreground dark:text-foreground text-left text-xl leading-7 font-semibold tracking-[0.15px]">
+          <p className="text-foreground text-left text-xl leading-tight font-semibold">
             {t('modals.uploadDoc.selectSource')}
           </p>
         )}
@@ -1076,22 +1083,19 @@ function Upload({
           <>
             {!ingestor.type && renderIngestorSelection()}
             {ingestor.type && (
-              <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-5">
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant="ghost-muted"
+                  size="sm"
                   onClick={() => handleIngestorTypeChange(null)}
-                  className="h-auto w-fit gap-2 px-0 py-0 text-[#777777] hover:bg-transparent hover:text-[#555555]"
+                  className="-ml-3 w-fit justify-start"
                 >
-                  <img
-                    src={ChevronRight}
-                    alt="back"
-                    className="h-3 w-3 rotate-180 transform dark:invert"
-                  />
+                  <ChevronLeft />
                   <span>{t('modals.uploadDoc.back')}</span>
                 </Button>
 
-                <h2 className="text-foreground text-2xl leading-7 font-semibold tracking-[0.15px]">
+                <h2 className="text-foreground text-xl leading-tight font-semibold">
                   {ingestor.type &&
                     t(`modals.uploadDoc.ingestors.${ingestor.type}.heading`)}
                 </h2>
@@ -1108,7 +1112,6 @@ function Upload({
                   }}
                   label={t('modals.uploadDoc.name')}
                   required={true}
-                  labelBgClassName="bg-card"
                   className="w-full"
                 />
                 {renderFormFields()}
@@ -1131,8 +1134,9 @@ function Upload({
                 <Button
                   type="button"
                   variant="link"
+                  size="sm"
                   onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-                  className="h-auto w-fit justify-start px-0 py-2 text-sm font-normal hover:no-underline"
+                  className="-ml-3 w-fit justify-start"
                 >
                   {showAdvancedOptions
                     ? t('modals.uploadDoc.hideAdvanced')
@@ -1141,24 +1145,6 @@ function Upload({
               )}
           </>
         )}
-        <div className="flex justify-end gap-4">
-          {activeTab && ingestor.type && (
-            <Button
-              type="button"
-              onClick={handleUpload}
-              disabled={isUploadDisabled()}
-              className={`h-auto rounded-3xl px-4 py-2 text-sm font-medium ${
-                isUploadDisabled()
-                  ? 'dark:bg-muted dark:text-muted-foreground bg-gray-300 text-gray-500'
-                  : ''
-              }`}
-            >
-              {ingestor.type === 'wiki'
-                ? t('modals.uploadDoc.create')
-                : t('modals.uploadDoc.train')}
-            </Button>
-          )}
-        </div>
       </div>
     </Modal>
   );
diff --git a/frontend/src/upload/types/ingestor.ts b/frontend/src/upload/types/ingestor.ts
index 5a31d0a4..1c3d1eff 100644
--- a/frontend/src/upload/types/ingestor.ts
+++ b/frontend/src/upload/types/ingestor.ts
@@ -49,7 +49,9 @@ export type FieldType =
 
 export interface FormField {
   name: string;
+  /** English fallback; the form shows `t(labelKey)` when one is set. */
   label: string;
+  labelKey?: string;
   type: FieldType;
   required?: boolean;
   advanced?: boolean;
@@ -85,14 +87,30 @@ export const IngestorFormSchemas: IngestorSchema[] = [
     label: 'Crawler',
     icon: CrawlerIcon,
     heading: 'Add content with Web Crawler',
-    fields: [{ name: 'url', label: 'URL', type: 'string', required: true }],
+    fields: [
+      {
+        name: 'url',
+        label: 'URL',
+        labelKey: 'modals.uploadDoc.fields.url',
+        type: 'string',
+        required: true,
+      },
+    ],
   },
   {
     key: 'url',
     label: 'Link',
     icon: UrlIcon,
     heading: 'Add content from URL',
-    fields: [{ name: 'url', label: 'URL', type: 'string', required: true }],
+    fields: [
+      {
+        name: 'url',
+        label: 'URL',
+        labelKey: 'modals.uploadDoc.fields.url',
+        type: 'string',
+        required: true,
+      },
+    ],
   },
   {
     key: 'github',
@@ -103,6 +121,7 @@ export const IngestorFormSchemas: IngestorSchema[] = [
       {
         name: 'repo_url',
         label: 'Repository URL',
+        labelKey: 'modals.uploadDoc.repoUrl',
         type: 'string',
         required: true,
       },
@@ -114,28 +133,38 @@ export const IngestorFormSchemas: IngestorSchema[] = [
     icon: RedditIcon,
     heading: 'Add content from Reddit',
     fields: [
-      { name: 'client_id', label: 'Client ID', type: 'string', required: true },
+      {
+        name: 'client_id',
+        label: 'Client ID',
+        labelKey: 'modals.uploadDoc.reddit.id',
+        type: 'string',
+        required: true,
+      },
       {
         name: 'client_secret',
         label: 'Client Secret',
+        labelKey: 'modals.uploadDoc.reddit.secret',
         type: 'string',
         required: true,
       },
       {
         name: 'user_agent',
         label: 'User Agent',
+        labelKey: 'modals.uploadDoc.reddit.agent',
         type: 'string',
         required: true,
       },
       {
         name: 'search_queries',
         label: 'Search Queries',
+        labelKey: 'modals.uploadDoc.reddit.searchQueries',
         type: 'string',
         required: true,
       },
       {
         name: 'number_posts',
         label: 'Number of Posts',
+        labelKey: 'modals.uploadDoc.reddit.numberOfPosts',
         type: 'number',
         required: true,
       },
@@ -168,36 +197,42 @@ export const IngestorFormSchemas: IngestorSchema[] = [
       {
         name: 'aws_access_key_id',
         label: 'AWS Access Key ID',
+        labelKey: 'modals.uploadDoc.fields.awsAccessKeyId',
         type: 'string',
         required: true,
       },
       {
         name: 'aws_secret_access_key',
         label: 'AWS Secret Access Key',
+        labelKey: 'modals.uploadDoc.fields.awsSecretAccessKey',
         type: 'string',
         required: true,
       },
       {
         name: 'bucket',
         label: 'Bucket Name',
+        labelKey: 'modals.uploadDoc.fields.bucket',
         type: 'string',
         required: true,
       },
       {
         name: 'prefix',
         label: 'Path Prefix (optional)',
+        labelKey: 'modals.uploadDoc.fields.prefix',
         type: 'string',
         required: false,
       },
       {
         name: 'region',
         label: 'AWS Region',
+        labelKey: 'modals.uploadDoc.fields.region',
         type: 'string',
         required: false,
       },
       {
         name: 'endpoint_url',
         label: 'Custom Endpoint URL (optional)',
+        labelKey: 'modals.uploadDoc.fields.endpointUrl',
         type: 'string',
         required: false,
       },
@@ -248,6 +283,7 @@ export const IngestorFormSchemas: IngestorSchema[] = [
       {
         name: 'initial_content',
         label: 'Initial content (optional)',
+        labelKey: 'modals.uploadDoc.fields.initialContent',
         type: 'textarea',
         required: false,
       },
diff --git a/frontend/src/upload/uploadSlice.ts b/frontend/src/upload/uploadSlice.ts
index db5a00fa..34613135 100644
--- a/frontend/src/upload/uploadSlice.ts
+++ b/frontend/src/upload/uploadSlice.ts
@@ -1,3 +1,4 @@
+import i18n from 'i18next';
 import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import {
@@ -411,7 +412,7 @@ export const uploadSlice = createSlice({
           task.errorMessage =
             typeof payload.error === 'string'
               ? payload.error
-              : 'Ingestion failed.';
+              : i18n.t('modals.uploadDoc.progress.ingestionFailed');
           if (!wasTerminal && !sourceWasDismissed) task.dismissed = false;
           break;
         default:
diff --git a/frontend/src/utils/chartUtils.test.ts b/frontend/src/utils/chartUtils.test.ts
new file mode 100644
index 00000000..74eecaeb
--- /dev/null
+++ b/frontend/src/utils/chartUtils.test.ts
@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { hoverColor, readChartPalette, readCssVar } from './chartUtils';
+
+const TOKENS = [
+  '--chart-1',
+  '--chart-2',
+  '--chart-3',
+  '--chart-4',
+  '--chart-5',
+  '--border',
+  '--muted-foreground',
+  '--primary',
+];
+
+afterEach(() => {
+  TOKENS.forEach((name) => document.body.style.removeProperty(name));
+  vi.unstubAllGlobals();
+});
+
+describe('readCssVar', () => {
+  it('reads the token from body, where the .dark class lives', () => {
+    document.body.style.setProperty('--primary', '#976af3');
+    expect(readCssVar('--primary', '#7d54d1')).toBe('#976af3');
+  });
+
+  it('falls back when the token is not set', () => {
+    expect(readCssVar('--not-a-token', '#123456')).toBe('#123456');
+  });
+});
+
+describe('readChartPalette', () => {
+  it('resolves the five series tokens and the axis chrome', () => {
+    const dark = ['#976af3', '#60a5fa', '#4ade80', '#fbbf24', '#dc2626'];
+    dark.forEach((value, i) =>
+      document.body.style.setProperty(`--chart-${i + 1}`, value),
+    );
+    document.body.style.setProperty('--border', '#44454c');
+    document.body.style.setProperty('--muted-foreground', '#a1a1a1');
+
+    const palette = readChartPalette();
+    expect(palette.series).toEqual(dark);
+    expect(palette.border).toBe('#44454c');
+    expect(palette.mutedForeground).toBe('#a1a1a1');
+  });
+
+  it('falls back to the light tokens outside a themed document', () => {
+    const palette = readChartPalette();
+    expect(palette.series).toEqual([
+      '#7d54d1',
+      '#2563eb',
+      '#079455',
+      '#ca8a04',
+      '#ef4444',
+    ]);
+    expect(palette.border).toBe('#d9d9d9');
+    expect(palette.mutedForeground).toBe('#737373');
+  });
+});
+
+describe('hoverColor', () => {
+  it('mixes to 80% when the browser supports color-mix', () => {
+    vi.stubGlobal('CSS', { supports: () => true });
+    expect(hoverColor('oklch(0.6 0.2 290)')).toBe(
+      'color-mix(in oklch, oklch(0.6 0.2 290) 80%, transparent)',
+    );
+  });
+
+  it('falls back to an 8-digit hex without color-mix', () => {
+    vi.stubGlobal('CSS', { supports: () => false });
+    expect(hoverColor('#7d54d1')).toBe('#7d54d1cc');
+  });
+
+  it('keeps a non-hex colour as it is without color-mix', () => {
+    vi.stubGlobal('CSS', { supports: () => false });
+    expect(hoverColor('rgb(1, 2, 3)')).toBe('rgb(1, 2, 3)');
+  });
+});
diff --git a/frontend/src/utils/chartUtils.ts b/frontend/src/utils/chartUtils.ts
index eedfe892..eb860e98 100644
--- a/frontend/src/utils/chartUtils.ts
+++ b/frontend/src/utils/chartUtils.ts
@@ -1,4 +1,122 @@
 import { Chart as ChartJS } from 'chart.js';
+import { useEffect, useMemo, useState } from 'react';
+
+/**
+ * Resolve a CSS custom property to a concrete colour string.
+ *
+ * Chart.js and other canvas renderers can't consume Tailwind classes or CSS
+ * variables directly, so read the resolved value at render time and pass that
+ * concrete string. Falls back when running outside a browser (SSR / tests).
+ *
+ * @param name The custom property, e.g. `--primary`.
+ * @param fallback Returned when the property is unset or there is no DOM.
+ * @returns The resolved value, trimmed.
+ */
+export function readCssVar(name: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  // The `.dark` class lives on document.body (see useDarkTheme), so query
+  // body — querying documentElement would always resolve the :root value.
+  const value = getComputedStyle(document.body).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+/**
+ * Build the hover fill for a bar: the same colour at 80% opacity.
+ *
+ * `color-mix()` accepts any CSS colour string (hex, `oklch()`, ...), which the
+ * theme tokens are. Canvas `fillStyle` parses it in current engines. Where the
+ * browser doesn't support `color-mix()`, a 6-digit hex gets an `cc` alpha and
+ * anything else keeps its base colour, so the canvas never receives a string
+ * it would silently ignore.
+ *
+ * @param color A resolved CSS colour.
+ * @returns A colour string the canvas accepts.
+ */
+export function hoverColor(color: string): string {
+  const mixed = `color-mix(in oklch, ${color} 80%, transparent)`;
+  if (typeof CSS !== 'undefined' && CSS.supports?.('color', mixed)) {
+    return mixed;
+  }
+  return /^#[0-9a-f]{6}$/i.test(color) ? `${color}cc` : color;
+}
+
+/**
+ * Data-series tokens (DESIGN.md: `chart-1`..`chart-5`, data series only).
+ * Fallbacks are the light-theme values from src/index.css.
+ */
+export const SERIES_TOKENS: [string, string][] = [
+  ['--chart-1', '#7d54d1'],
+  ['--chart-2', '#2563eb'],
+  ['--chart-3', '#079455'],
+  ['--chart-4', '#ca8a04'],
+  ['--chart-5', '#ef4444'],
+];
+
+export type ChartPalette = {
+  primary: string;
+  series: string[];
+  success: string;
+  warning: string;
+  destructive: string;
+  /** Grid lines and axis borders. */
+  border: string;
+  /** Tick labels and legend text. */
+  mutedForeground: string;
+};
+
+/**
+ * Resolve every colour the charts use from the current theme tokens.
+ *
+ * @returns Concrete colour strings for the canvas: brand, the five series
+ *   colours, the status colours, and the axis chrome.
+ */
+export function readChartPalette(): ChartPalette {
+  return {
+    primary: readCssVar('--primary', '#7d54d1'),
+    series: SERIES_TOKENS.map(([name, fallback]) => readCssVar(name, fallback)),
+    success: readCssVar('--success', '#079455'),
+    warning: readCssVar('--warning', '#ca8a04'),
+    destructive: readCssVar('--destructive', '#ef4444'),
+    border: readCssVar('--border', '#d9d9d9'),
+    mutedForeground: readCssVar('--muted-foreground', '#737373'),
+  };
+}
+
+/**
+ * Count theme changes, for canvases that must re-read their colours.
+ *
+ * Each useDarkTheme() call keeps its own state and applies the `.dark` class
+ * in an effect, so a flip of `isDarkTheme` alone can be read before the class
+ * lands, and a toggle made elsewhere never reaches the component. Watching the
+ * body class catches the moment the tokens really change, either way.
+ *
+ * @returns A number that increments whenever the body class changes.
+ */
+export function useThemeVersion(): number {
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    const observer = new MutationObserver(() =>
+      setVersion((current) => current + 1),
+    );
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    return () => observer.disconnect();
+  }, []);
+  return version;
+}
+
+/**
+ * The chart palette for the current theme, re-read on every theme change.
+ *
+ * @returns The resolved {@link ChartPalette}.
+ */
+export function useChartPalette(): ChartPalette {
+  const themeVersion = useThemeVersion();
+  // themeVersion is not used inside the factory: it only signals a change.
+  return useMemo(() => readChartPalette(), [themeVersion]);
+}
 
 const getOrCreateLegendList = (
   chart: ChartJS,
diff --git a/frontend/src/utils/dateTimeUtils.test.ts b/frontend/src/utils/dateTimeUtils.test.ts
index 36184377..89eaa8c4 100644
--- a/frontend/src/utils/dateTimeUtils.test.ts
+++ b/frontend/src/utils/dateTimeUtils.test.ts
@@ -41,3 +41,43 @@ describe('dateTimeUtils', () => {
     expect(formatDateTime('still not a date')).toBe('still not a date');
   });
 });
+
+describe('formatRelative', () => {
+  const NOW = Date.parse('2026-09-25T12:00:00Z');
+  const ago = (ms: number) => new Date(NOW - ms).toISOString();
+
+  it('returns null for empty or unparseable values', async () => {
+    const { formatRelative } = await import('./dateTimeUtils');
+    expect(formatRelative(null, { now: NOW })).toBeNull();
+    expect(formatRelative('garbage', { now: NOW })).toBeNull();
+  });
+
+  it('words the gap with Intl in the given language', async () => {
+    const { formatRelative } = await import('./dateTimeUtils');
+    expect(formatRelative(ago(20_000), { now: NOW, locale: 'en' })).toBe('now');
+    expect(formatRelative(ago(3 * 60_000), { now: NOW, locale: 'en' })).toBe(
+      '3 minutes ago',
+    );
+    expect(
+      formatRelative(ago(26 * 3_600_000), { now: NOW, locale: 'en' }),
+    ).toBe('yesterday');
+    expect(formatRelative(ago(3 * 60_000), { now: NOW, locale: 'de' })).toBe(
+      'vor 3 Minuten',
+    );
+  });
+
+  it("maps the app's language codes to BCP 47", async () => {
+    const { formatRelative } = await import('./dateTimeUtils');
+    expect(formatRelative(ago(3 * 60_000), { now: NOW, locale: 'jp' })).toBe(
+      '3 分前',
+    );
+  });
+
+  it('falls back to a date past dateAfterDays', async () => {
+    const { formatRelative } = await import('./dateTimeUtils');
+    const old = ago(45 * 86_400_000);
+    expect(
+      formatRelative(old, { now: NOW, locale: 'en', dateAfterDays: 30 }),
+    ).toBe(formatDateOnly(old));
+  });
+});
diff --git a/frontend/src/utils/dateTimeUtils.ts b/frontend/src/utils/dateTimeUtils.ts
index 1f287cab..d0f5a334 100644
--- a/frontend/src/utils/dateTimeUtils.ts
+++ b/frontend/src/utils/dateTimeUtils.ts
@@ -1,3 +1,5 @@
+import i18next from 'i18next';
+
 type FormatMode = 'auto' | 'date' | 'dateTime';
 
 const DATE_ONLY_REGEX = /^(\d{4})-(\d{2})-(\d{2})$/;
@@ -5,6 +7,8 @@ const LOCAL_DATE_TIME_REGEX =
   /^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?$/;
 const HAS_TIME_REGEX = /\d{1,2}:\d{2}/;
 
+// Dates are en-GB (DD/MM/YYYY, 24-hour) in every UI language; only relative
+// phrases (formatRelative) follow the language.
 const DATE_FORMATTER = new Intl.DateTimeFormat('en-GB', {
   day: '2-digit',
   month: '2-digit',
@@ -68,3 +72,54 @@ export function formatDateOnly(dateString: string): string {
 export function formatDateTime(dateString: string): string {
   return formatDateValue(dateString, 'dateTime');
 }
+
+// The app's language codes (locale/i18n.ts) that aren't BCP 47 tags.
+const INTL_LOCALES: Record<string, string> = { jp: 'ja', zhTW: 'zh-TW' };
+
+/** The current UI language as a tag `Intl` understands. */
+export function intlLocale(language: string = i18next.language): string {
+  if (!language) return 'en';
+  return INTL_LOCALES[language] ?? language;
+}
+
+const RELATIVE_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ['year', 31_536_000_000],
+  ['month', 2_592_000_000],
+  ['week', 604_800_000],
+  ['day', 86_400_000],
+  ['hour', 3_600_000],
+  ['minute', 60_000],
+];
+
+/**
+ * "3 minutes ago", "yesterday", "now" in the UI language.
+ *
+ * Args:
+ *   value: an ISO timestamp.
+ *   options.now: the reference time (tests).
+ *   options.locale: an app language code; defaults to the current one.
+ *   options.dateAfterDays: past this many days, show the date instead.
+ *
+ * Returns:
+ *   The phrase, or null when the value is empty or unparseable.
+ */
+export function formatRelative(
+  value: string | null | undefined,
+  options: { now?: number; locale?: string; dateAfterDays?: number } = {},
+): string | null {
+  if (!value) return null;
+  const then = Date.parse(value);
+  if (Number.isNaN(then)) return null;
+  const { now = Date.now(), locale, dateAfterDays } = options;
+  const diffMs = Math.max(0, now - then);
+  if (dateAfterDays !== undefined && diffMs > dateAfterDays * 86_400_000) {
+    return formatDateOnly(value);
+  }
+  const formatter = new Intl.RelativeTimeFormat(intlLocale(locale), {
+    numeric: 'auto',
+  });
+  for (const [unit, ms] of RELATIVE_UNITS) {
+    if (diffMs >= ms) return formatter.format(-Math.round(diffMs / ms), unit);
+  }
+  return formatter.format(0, 'second');
+}
diff --git a/frontend/src/utils/httpMethodColors.test.ts b/frontend/src/utils/httpMethodColors.test.ts
new file mode 100644
index 00000000..8813c2c5
--- /dev/null
+++ b/frontend/src/utils/httpMethodColors.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+
+import { getMethodBadgeVariant } from './httpMethodColors';
+
+describe('getMethodBadgeVariant', () => {
+  it('maps each HTTP method to a Badge variant by meaning', () => {
+    expect(getMethodBadgeVariant('GET')).toBe('success');
+    expect(getMethodBadgeVariant('POST')).toBe('info');
+    expect(getMethodBadgeVariant('PUT')).toBe('warning');
+    expect(getMethodBadgeVariant('DELETE')).toBe('destructive');
+    expect(getMethodBadgeVariant('PATCH')).toBe('default');
+    expect(getMethodBadgeVariant('HEAD')).toBe('neutral');
+    expect(getMethodBadgeVariant('OPTIONS')).toBe('neutral');
+  });
+
+  it('ignores case', () => {
+    expect(getMethodBadgeVariant('get')).toBe('success');
+    expect(getMethodBadgeVariant('Delete')).toBe('destructive');
+  });
+
+  it('falls back to neutral for an unknown method', () => {
+    expect(getMethodBadgeVariant('TRACE')).toBe('neutral');
+  });
+});
diff --git a/frontend/src/utils/httpMethodColors.ts b/frontend/src/utils/httpMethodColors.ts
index 424b3074..e2b4c9c8 100644
--- a/frontend/src/utils/httpMethodColors.ts
+++ b/frontend/src/utils/httpMethodColors.ts
@@ -1,15 +1,24 @@
-const METHOD_COLORS: Record<string, string> = {
-  GET: 'bg-[#D1FAE5] text-[#065F46] dark:bg-[#064E3B]/60 dark:text-[#6EE7B7]',
-  POST: 'bg-[#DBEAFE] text-[#1E40AF] dark:bg-[#1E3A8A]/60 dark:text-[#93C5FD]',
-  PUT: 'bg-[#FEF3C7] text-[#92400E] dark:bg-[#78350F]/60 dark:text-[#FCD34D]',
-  DELETE:
-    'bg-[#FEE2E2] text-[#991B1B] dark:bg-[#7F1D1D]/60 dark:text-[#FCA5A5]',
-  PATCH: 'bg-[#EDE9FE] text-[#5B21B6] dark:bg-[#4C1D95]/60 dark:text-[#C4B5FD]',
-  HEAD: 'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
-  OPTIONS:
-    'bg-[#F3F4F6] text-[#374151] dark:bg-[#374151]/60 dark:text-[#D1D5DB]',
+type MethodBadgeVariant =
+  'default' | 'neutral' | 'success' | 'warning' | 'destructive' | 'info';
+
+// Reads, writes, replaces and deletes take the status tokens that match
+// their weight; PATCH is the brand tint, and the rest are neutral.
+const METHOD_VARIANTS: Record<string, MethodBadgeVariant> = {
+  GET: 'success',
+  POST: 'info',
+  PUT: 'warning',
+  DELETE: 'destructive',
+  PATCH: 'default',
+  HEAD: 'neutral',
+  OPTIONS: 'neutral',
 };
 
-export function getMethodColorClass(method: string): string {
-  return METHOD_COLORS[method.toUpperCase()] ?? METHOD_COLORS.GET;
+/**
+ * The `Badge` variant for an HTTP method pill.
+ *
+ * @param method - The HTTP method, in any case.
+ * @returns The variant for `<Badge>`; `neutral` for an unknown method.
+ */
+export function getMethodBadgeVariant(method: string): MethodBadgeVariant {
+  return METHOD_VARIANTS[method.toUpperCase()] ?? 'neutral';
 }