diff --git a/.claude/skills/shadcn-svelte/SKILL.md b/.claude/skills/shadcn-svelte/SKILL.md
new file mode 100644
index 0000000..6bbc425
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/SKILL.md
@@ -0,0 +1,227 @@
+---
+name: shadcn-svelte
+description: Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.
+user-invocable: false
+allowed-tools: Bash(npx shadcn-svelte@latest *), Bash(pnpm dlx shadcn-svelte@latest *), Bash(bunx --bun shadcn-svelte@latest *)
+---
+
+# shadcn-svelte
+
+A framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI.
+
+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest`, or `bunx --bun shadcn-svelte@latest` — based on the project's package manager. Examples below use `npx shadcn-svelte@latest` but substitute the correct runner for the project.
+
+## Current Project Context
+
+Read `components.json` at the project root and, when you need the live file layout, list the directory given by the `aliases.ui` path (resolved with the same rules as the CLI).
+
+## Imports (Svelte)
+
+Each component lives in its own folder with an `index.ts` barrel. Match the [installation docs](https://shadcn-svelte.com/docs/installation):
+
+- **Multi-part components** (dialog, select, card, field, tabs, …): `import * as Dialog from "$lib/components/ui/dialog"` then `Dialog.Content`, `Dialog.Title`, `Card.Root`, `Card.Header`, etc. — whatever the barrel exports (short names and/or `Root as …` aliases).
+- **Single-component barrels** (only one meaningful component in the folder): **named imports** — `import { Button } from "$lib/components/ui/button"` and `<Button>`, not `import * as Button` + `Button.Root`. Same pattern for `{ Input }`, `{ Badge }`, `{ Spinner }`, `{ Checkbox }`, `{ Separator }`, `{ Skeleton }`, etc.
+
+```ts
+import * as Dialog from "$lib/components/ui/dialog";
+import { Button } from "$lib/components/ui/button";
+import { Separator } from "$lib/components/ui/separator";
+```
+
+Use the real aliases from `components.json` (often `$lib/components/ui/...`), not hardcoded paths.
+
+## Principles
+
+1. **Use existing components first.** Run `npx shadcn-svelte@latest add` with no arguments to browse available components, or check [Components](https://shadcn-svelte.com/docs/components) before writing custom UI.
+2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
+3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
+4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
+
+## Critical Rules
+
+These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
+
+### Styling & Tailwind → [styling.md](./rules/styling.md)
+
+- **`class` for layout, not styling.** Never override component colors or typography.
+- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
+- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
+- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
+- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
+- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
+- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
+
+### Forms & Inputs → [forms.md](./rules/forms.md)
+
+- **Forms use `Field.FieldGroup` + `Field.Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
+- **`InputGroup` uses `InputGroup.Input`/`InputGroup.Textarea`.** Never raw `Input`/`Textarea` inside `InputGroup.Root`.
+- **Buttons inside inputs use `InputGroup.Root` + `InputGroup.Addon`.**
+- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
+- **`Field.FieldSet` + `Field.FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
+- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
+
+### Component Structure → [composition.md](./rules/composition.md)
+
+- **Items always inside their Group.** `Select.Item` → `Select.Group`. `DropdownMenu.Item` → `DropdownMenu.Group`. `Command.Item` → `Command.Group`.
+- **Custom triggers.** Wrap controls in `Dialog.Trigger` / `AlertDialog.Trigger`, or control open state with `bind:open` on the root — see component docs.
+- **Dialog, Sheet, and Drawer always need a Title.** `Dialog.Title`, `Sheet.Title`, `Drawer.Title` required for accessibility. Use `class="sr-only"` if visually hidden.
+- **Use full Card composition.** `Card.Header`/`Card.Title`/`Card.Description`/`Card.Content`/`Card.Footer`. Don't dump everything in `Card.Content`.
+- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` inside `Button` + `disabled`; use `data-icon="inline-start"` / `inline-end` on `Spinner` for correct spacing (`import { Button }`, `import { Spinner }`).
+- **`Tabs.Trigger` must be inside `Tabs.List`.** Never render triggers directly in `Tabs`.
+- **`Avatar` always needs `Avatar.Fallback`.** For when the image fails to load.
+
+### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
+
+- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
+- **Callouts use `Alert`.** Don't build custom styled divs.
+- **Empty states use `Empty`.** Don't build custom empty state markup.
+- **Toast via `svelte-sonner`.** Use `toast()` from `svelte-sonner` with the Sonner component from your UI folder.
+- **Use `Separator`** instead of `<hr>` or a `div` with border-only classes.
+- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
+- **Use `Badge`** instead of custom styled spans.
+
+### Icons → [icons.md](./rules/icons.md)
+
+- **Icons in `<Button>` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
+- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
+- **Pass icons as components.** Import from the configured `iconLibrary` (e.g. `@lucide/svelte`), not string keys.
+
+### CLI
+
+- **Presets** — copy the encoded string from the design-system builder on [shadcn-svelte.com](https://shadcn-svelte.com) and pass it to `npx shadcn-svelte@latest init --preset <code>`.
+
+## Key Patterns
+
+These are the most common patterns that differentiate correct shadcn-svelte code. For edge cases, see the linked rule files above.
+
+```svelte
+<script lang="ts">
+  import * as Field from "$lib/components/ui/field";
+  import { Input } from "$lib/components/ui/input";
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import { Badge } from "$lib/components/ui/badge";
+  import * as Avatar from "$lib/components/ui/avatar";
+</script>
+
+<!-- Form layout: Field.FieldGroup + Field.Field, not div + Label. -->
+<Field.FieldGroup>
+  <Field.Field>
+    <Field.FieldLabel for="email">Email</Field.FieldLabel>
+    <Input id="email" />
+  </Field.Field>
+</Field.FieldGroup>
+
+<!-- Validation: data-invalid on Field, aria-invalid on the control. -->
+<Field.Field data-invalid>
+  <Field.FieldLabel for="email">Email</Field.FieldLabel>
+  <Input id="email" aria-invalid />
+  <Field.FieldDescription>Invalid email.</Field.FieldDescription>
+</Field.Field>
+
+<!-- Icons in buttons: data-icon, no sizing classes. -->
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<!-- Spacing: gap-*, not space-y-*. -->
+<div class="flex flex-col gap-4"></div>
+
+<!-- Equal dimensions: size-*, not w-* h-*. -->
+<Avatar.Root class="size-10">
+  <Avatar.Image src="/u.png" alt="User" />
+  <Avatar.Fallback>U</Avatar.Fallback>
+</Avatar.Root>
+
+<!-- Status colors: Badge variants or semantic tokens, not raw colors. -->
+<Badge variant="secondary">+20.1%</Badge>
+```
+
+## Component Selection
+
+| Need                       | Use                                                                                                 |
+| -------------------------- | --------------------------------------------------------------------------------------------------- |
+| Button/action              | `Button` with appropriate variant (`import { Button }`)                                             |
+| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
+| Toggle between 2–5 options | `ToggleGroup.Root` + `ToggleGroup.Item`                                                             |
+| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
+| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
+| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
+| Feedback                   | `svelte-sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                 |
+| Command palette            | `Command` inside `Dialog`                                                                           |
+| Charts                     | `Chart` (LayerChart)                                                                                |
+| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |
+| Empty states               | `Empty`                                                                                             |
+| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |
+| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |
+
+## Key Fields
+
+Use `components.json` and the filesystem — not a separate `info` command:
+
+- **`aliases`** → use the actual alias prefix from config (e.g. `$lib/`), never hardcode unrelated projects.
+- **`tailwind.css`** → the global CSS file where theme variables live. Edit this file for theme tweaks; don't add a second globals file unless the user already uses one.
+- **`style`** → visual treatment (e.g. `nova`, `vega`, …) and registry style path.
+- **`iconLibrary`** → determines icon packages (`@lucide/svelte`, `@tabler/icons-svelte`, etc.). Never assume `@lucide/svelte`.
+- **`registry`** → where the CLI fetches components; default official registry at `shadcn-svelte.com`.
+- **`resolvedPaths`** (conceptual) → the CLI resolves `aliases` to absolute paths; list `aliases.ui` on disk to see installed components.
+
+See [cli.md](./cli.md) for commands and flags.
+
+## Component Docs, Examples, and Usage
+
+Open `https://shadcn-svelte.com/docs/components/<name>.md` for docs and examples. **When creating, fixing, debugging, or using a component, read the official page first** so you follow the documented APIs.
+
+## Workflow
+
+1. **Get project context** — read `components.json` and list the UI components directory when needed.
+2. **Check installed components first** — before running `add`, list files under the resolved `ui` path. Don't import components that haven't been added, and don't re-add ones already present unless updating.
+3. **Discover components** — `npx shadcn-svelte@latest add` with no arguments (interactive list), or the docs site.
+4. **Install or update** — `npx shadcn-svelte@latest add <name>` or a registry **URL**. To refresh existing files from the registry, use `npx shadcn-svelte@latest update` (see [cli.md](./cli.md)).
+5. **Fix imports in third-party / URL-added items** — After adding from a custom registry URL, check for hardcoded paths that don't match the project's `aliases`. Rewrite imports to use the project's `ui` / `lib` aliases from `components.json`.
+6. **Review added components** — After adding, **read the added files** and verify composition (groups, titles, validation attrs). Align icon imports with `iconLibrary`.
+7. **Remote registry items** — Adding by URL is explicit; if the user wants a component from an unknown source, confirm the registry URL or item before running `add`.
+
+## Updating Components
+
+Use the **`update`** command to pull the latest registry versions of components already in the project. Review changes with `git diff` after `update`.
+
+1. Commit or stash local work.
+2. Run `npx shadcn-svelte@latest update [component]` or `--all`.
+3. Resolve merge conflicts if you had customized files.
+4. **Never use `--overwrite` on `add` without the user's explicit approval** when it would destroy intentional edits.
+
+## Quick Reference
+
+```bash
+# Initialize shadcn-svelte in your project.
+npx shadcn-svelte@latest init
+
+# Initialize with a preset string from the docs site builder.
+npx shadcn-svelte@latest init --preset <code>
+
+# Add components (interactive when run with no names).
+npx shadcn-svelte@latest add
+npx shadcn-svelte@latest add button card dialog
+npx shadcn-svelte@latest add --all
+
+# Update components already installed.
+npx shadcn-svelte@latest update button
+npx shadcn-svelte@latest update --all --yes
+
+# Build a custom registry (registry authors).
+npx shadcn-svelte@latest registry build
+```
+
+**Registry:** default `https://shadcn-svelte.com/registry` — override in `components.json` if needed.  
+**Docs:** [shadcn-svelte.com](https://shadcn-svelte.com)
+
+## Detailed References
+
+- [rules/forms.md](./rules/forms.md) — Field.FieldGroup, Field.Field, InputGroup, ToggleGroup, Field.FieldSet, validation states
+- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
+- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icon components
+- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, class, spacing, size, truncate, dark mode, cn(), z-index
+- [cli.md](./cli.md) — Commands, flags, registry
+- [customization.md](./customization.md) — Theming, CSS variables, extending components
diff --git a/.claude/skills/shadcn-svelte/cli.md b/.claude/skills/shadcn-svelte/cli.md
new file mode 100644
index 0000000..f8e3100
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/cli.md
@@ -0,0 +1,138 @@
+# shadcn-svelte CLI Reference
+
+Configuration is read from `components.json`. See [components.json](https://shadcn-svelte.com/docs/components-json) on the docs site for the full schema.
+
+> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest`, or `bunx --bun shadcn-svelte@latest`. Check `packageManager` from the project (or lockfile) to choose the right one. Examples below use `npx shadcn-svelte@latest` but substitute the correct runner for the project.
+
+> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager; there is no `--package-manager` flag.
+
+## Contents
+
+- Commands: `init`, `add`, `update`, `registry build`
+- Proxy / outgoing requests
+- Presets (via `init`)
+
+---
+
+## Commands
+
+### `init` — Initialize an existing project
+
+```bash
+npx shadcn-svelte@latest init [options]
+```
+
+Installs dependencies, adds the `cn` util, creates `components.json`, and sets up CSS variables. Run `init` from the root of your project.
+
+| Flag                        | Short | Description                                                               | Default   |
+| --------------------------- | ----- | ------------------------------------------------------------------------- | --------- |
+| `--preset <preset>`         | —     | Encoded design-system preset string from the docs site                    | —         |
+| `-c, --cwd <path>`          | `-c`  | Working directory                                                         | current   |
+| `-o, --overwrite`           | —     | Overwrite existing files                                                  | `false`   |
+| `--no-deps`                 | —     | Do not add or install dependencies                                        | —         |
+| `--skip-preflight`          | —     | Ignore preflight checks and continue                                      | `false`   |
+| `--base-color <name>`       | —     | Base color: `neutral`, `stone`, `zinc`, `mauve`, `olive`, `mist`, `taupe` | —         |
+| `--css <path>`              | —     | Path to the global CSS file                                               | —         |
+| `--components-alias <path>` | —     | Import alias for components                                               | —         |
+| `--lib-alias <path>`        | —     | Import alias for lib                                                      | —         |
+| `--utils-alias <path>`      | —     | Import alias for utils                                                    | —         |
+| `--hooks-alias <path>`      | —     | Import alias for hooks                                                    | —         |
+| `--ui-alias <path>`         | —     | Import alias for UI components                                            | —         |
+| `--proxy <proxy>`           | —     | Fetch registry items through this proxy                                   | env-based |
+| `--design-system-url`       | —     | Optional design-system URL (see docs / preset builder)                    | —         |
+| `-h, --help`                | `-h`  | Help                                                                      | —         |
+
+---
+
+### `add` — Add components
+
+```bash
+npx shadcn-svelte@latest add [options] [components...]
+```
+
+Adds components from the configured registry. Arguments are component names from the registry index, or a **URL** to a registry JSON item. With **no** component names, the CLI prompts you to pick components interactively.
+
+| Flag               | Short | Description                                     | Default   |
+| ------------------ | ----- | ----------------------------------------------- | --------- |
+| `-c, --cwd <path>` | `-c`  | Working directory                               | current   |
+| `--no-deps`        | —     | Skip adding and installing package dependencies | —         |
+| `--skip-preflight` | —     | Ignore preflight checks and continue            | `false`   |
+| `-a, --all`        | —     | Install all UI components                       | `false`   |
+| `-y, --yes`        | —     | Skip confirmation prompt                        | `false`   |
+| `-o, --overwrite`  | —     | Overwrite existing files                        | `false`   |
+| `--proxy <proxy>`  | —     | Fetch components through this proxy             | env-based |
+| `-h, --help`       | `-h`  | Help                                            | —         |
+
+---
+
+### `update` — Update installed components
+
+```bash
+npx shadcn-svelte@latest update [options] [components...]
+```
+
+Re-fetches and applies registry content for components **already present** in the project. Run `shadcn-svelte update --help` for options.
+
+| Flag               | Short | Description                                     | Default   |
+| ------------------ | ----- | ----------------------------------------------- | --------- |
+| `-c, --cwd <path>` | `-c`  | Working directory                               | current   |
+| `--skip-preflight` | —     | Ignore preflight checks and continue            | `false`   |
+| `--no-deps`        | —     | Skip adding and installing package dependencies | —         |
+| `-a, --all`        | —     | Update every installed component                | `false`   |
+| `-y, --yes`        | —     | Skip confirmation prompt                        | `false`   |
+| `--proxy <proxy>`  | —     | Fetch through this proxy                        | env-based |
+| `-h, --help`       | `-h`  | Help                                            | —         |
+
+Commit your work before updating; overwrites are destructive.
+
+---
+
+### `registry build` — Build a custom registry
+
+```bash
+npx shadcn-svelte@latest registry build [options] [registry]
+```
+
+Reads a `registry.json` and writes registry JSON files for distribution. Default input: `./registry.json`, default output: `./static/r`.
+
+| Flag                  | Short | Description                     | Default      |
+| --------------------- | ----- | ------------------------------- | ------------ |
+| `-c, --cwd <path>`    | `-c`  | Working directory               | current      |
+| `-o, --output <path>` | `-o`  | Output directory for JSON files | `./static/r` |
+| `-h, --help`          | `-h`  | Help                            | —            |
+
+---
+
+## Outgoing Requests
+
+### Proxy
+
+The CLI can fetch the registry through a proxy. If `HTTP_PROXY` or `http_proxy` is set, requests respect it. You can also pass `--proxy` on `init`, `add`, or `update`.
+
+```bash
+HTTP_PROXY="<proxy-url>" npx shadcn-svelte@latest init
+```
+
+---
+
+## Presets
+
+Design-system options (style, theme, icons, fonts, etc.) can be captured as an encoded **preset** string from the builder on [shadcn-svelte.com](https://shadcn-svelte.com/create). Pass it to **`init`** with `--preset <string>`.
+
+Changing presets on an existing project: re-run **`init`** with the new preset (and confirm overwrites when prompted), or edit `components.json` and CSS and then run `add` / `update` as needed.
+
+---
+
+## `components.json` — useful fields for agents
+
+| Field / path         | Meaning                                                          |
+| -------------------- | ---------------------------------------------------------------- |
+| `tailwind.css`       | Global CSS file path (Tailwind entry / theme variables)          |
+| `tailwind.baseColor` | Base palette (cannot change after init)                          |
+| `aliases.*`          | Import aliases; must match `svelte.config.js` / `tsconfig` paths |
+| `registry`           | Base registry URL (default `https://shadcn-svelte.com/registry`) |
+| `style`              | Registered style name (e.g. `nova`, `vega`, …)                   |
+| `iconLibrary`        | Icon set key (`lucide`, `tabler`, …) — drives generated imports  |
+| `typescript`         | Whether TS and optional custom config path                       |
+
+Resolved paths (including `tailwindCss`, `ui`, `components`) are computed by the CLI from `components.json` and the filesystem. Read `components.json` and list the UI directory when you need a snapshot of what is installed.
diff --git a/.claude/skills/shadcn-svelte/customization.md b/.claude/skills/shadcn-svelte/customization.md
new file mode 100644
index 0000000..51a52fc
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/customization.md
@@ -0,0 +1,213 @@
+# Customization & Theming
+
+Components reference semantic CSS variable tokens. Change the variables to change every component.
+
+## Contents
+
+- How it works (CSS variables → Tailwind utilities → components)
+- Color variables and OKLCH format
+- Dark mode setup
+- Changing the theme (presets, CSS variables)
+- Adding custom colors (Tailwind v3 and v4)
+- Border radius
+- Customizing components (variants, class, wrappers)
+- Checking for updates
+
+---
+
+## How It Works
+
+1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
+2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
+3. Components use these utilities — changing a variable changes all components that reference it.
+
+---
+
+## Color Variables
+
+Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
+
+| Variable                                     | Purpose                          |
+| -------------------------------------------- | -------------------------------- |
+| `--background` / `--foreground`              | Page background and default text |
+| `--card` / `--card-foreground`               | Card surfaces                    |
+| `--primary` / `--primary-foreground`         | Primary buttons and actions      |
+| `--secondary` / `--secondary-foreground`     | Secondary actions                |
+| `--muted` / `--muted-foreground`             | Muted/disabled states            |
+| `--accent` / `--accent-foreground`           | Hover and accent states          |
+| `--destructive` / `--destructive-foreground` | Error and destructive actions    |
+| `--border`                                   | Default border color             |
+| `--input`                                    | Form input borders               |
+| `--ring`                                     | Focus ring color                 |
+| `--chart-1` through `--chart-5`              | Chart/data visualization         |
+| `--sidebar-*`                                | Sidebar-specific colors          |
+| `--surface` / `--surface-foreground`         | Secondary surface                |
+
+Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
+
+---
+
+## Dark Mode
+
+Class-based toggle via `.dark` on the root element. In SvelteKit, use [mode-watcher](https://github.com/svecosystem/mode-watcher) (see [Dark mode — Svelte](https://shadcn-svelte.com/docs/dark-mode/svelte)):
+
+```svelte
+<script lang="ts">
+  import { ModeWatcher } from "mode-watcher";
+  let { children } = $props();
+</script>
+
+<ModeWatcher />
+{@render children?.()}
+```
+
+---
+
+## Changing the Theme
+
+Use a **preset** from the design-system builder on [shadcn-svelte.com](https://shadcn-svelte.com) and pass it to `init`:
+
+```bash
+npx shadcn-svelte@latest init --preset <code>
+```
+
+Or edit CSS variables directly in the file set in `components.json` as `tailwind.css` (for example `src/app.css`).
+
+To align config and components with a new preset, re-run `init` with `--preset` and confirm overwrites when prompted.
+
+---
+
+## Adding Custom Colors
+
+Add variables to the global CSS file path in `components.json` (`tailwind.css`). Do not create a second global CSS file for theming unless the project already uses that pattern.
+
+```css
+/* 1. Define in the global CSS file. */
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+```
+
+```css
+/* 2a. Register with Tailwind v4 (@theme inline). */
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+On Tailwind v3, register in `tailwind.config.js` (see the [Tailwind v3 docs](https://tw3.shadcn-svelte.com) if you maintain a legacy setup):
+
+```js
+// 2b. Register with Tailwind v3 (tailwind.config.js).
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        warning: "oklch(var(--warning) / <alpha-value>)",
+        "warning-foreground":
+          "oklch(var(--warning-foreground) / <alpha-value>)",
+      },
+    },
+  },
+};
+```
+
+```svelte
+<!-- 3. Use in components. -->
+<div class="bg-warning text-warning-foreground">Warning</div>
+```
+
+---
+
+## Border Radius
+
+`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
+
+---
+
+## Customizing Components
+
+See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
+
+Prefer these approaches in order:
+
+### 1. Built-in variants
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+</script>
+
+<Button variant="outline" size="sm">Click</Button>
+```
+
+### 2. Tailwind classes via `class`
+
+```svelte
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+</script>
+
+<Card.Root class="mx-auto max-w-md">
+  <Card.Content>...</Card.Content>
+</Card.Root>
+```
+
+### 3. Add a new variant
+
+Edit the component source to add a variant via `tailwind-variants` / `cva` in the `.svelte` or shared variants file:
+
+```ts
+// e.g. in button variants
+warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+```
+
+### 4. Wrapper components
+
+Compose shadcn-svelte primitives into higher-level `.svelte` files:
+
+```svelte
+<script lang="ts">
+  import * as AlertDialog from "$lib/components/ui/alert-dialog";
+  let { title, description, onConfirm, children } = $props();
+  let open = $state(false);
+</script>
+
+<AlertDialog.Root bind:open>
+  <AlertDialog.Trigger>
+    {@render children?.()}
+  </AlertDialog.Trigger>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>{title}</AlertDialog.Title>
+      <AlertDialog.Description>{description}</AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action
+        onclick={() => {
+          onConfirm?.();
+          open = false;
+        }}>Confirm</AlertDialog.Action
+      >
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+```
+
+---
+
+## Checking for Updates
+
+```bash
+npx shadcn-svelte@latest update button
+npx shadcn-svelte@latest update --all
+```
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components). Review `git diff` after `update` to see what changed.
diff --git a/.claude/skills/shadcn-svelte/rules/composition.md b/.claude/skills/shadcn-svelte/rules/composition.md
new file mode 100644
index 0000000..bfc0a93
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/rules/composition.md
@@ -0,0 +1,244 @@
+# Component Composition
+
+## Contents
+
+- Items always inside their Group component
+- Callouts use Alert
+- Empty states use Empty component
+- Toast notifications use svelte-sonner
+- Choosing between overlay components
+- Dialog, Sheet, and Drawer always need a Title
+- Card structure
+- Button has no isPending or isLoading prop
+- Tabs.Trigger must be inside Tabs.List
+- Avatar always needs Avatar.Fallback
+- Use Separator instead of raw hr or border divs
+- Use Skeleton for loading placeholders
+- Use Badge instead of custom styled spans
+
+---
+
+## Items always inside their Group component
+
+Never render items directly inside the content container.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import * as Select from "$lib/components/ui/select";
+</script>
+
+<Select.Content>
+  <Select.Item value="apple">Apple</Select.Item>
+  <Select.Item value="banana">Banana</Select.Item>
+</Select.Content>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import * as Select from "$lib/components/ui/select";
+</script>
+
+<Select.Content>
+  <Select.Group>
+    <Select.Item value="apple">Apple</Select.Item>
+    <Select.Item value="banana">Banana</Select.Item>
+  </Select.Group>
+</Select.Content>
+```
+
+This applies to all group-based components:
+
+| Item                                                          | Group                |
+| ------------------------------------------------------------- | -------------------- |
+| `Select.Item`, `Select.Label`                                 | `Select.Group`       |
+| `DropdownMenu.Item`, `DropdownMenu.Label`, `DropdownMenu.Sub` | `DropdownMenu.Group` |
+| `Menubar.Item`                                                | `Menubar.Group`      |
+| `ContextMenu.Item`                                            | `ContextMenu.Group`  |
+| `Command.Item`                                                | `Command.Group`      |
+
+---
+
+## Callouts use Alert
+
+```svelte
+<script lang="ts">
+  import * as Alert from "$lib/components/ui/alert";
+</script>
+
+<Alert.Root>
+  <Alert.Title>Warning</Alert.Title>
+  <Alert.Description>Something needs attention.</Alert.Description>
+</Alert.Root>
+```
+
+---
+
+## Empty states use Empty component
+
+```svelte
+<script lang="ts">
+  import * as Empty from "$lib/components/ui/empty";
+  import { Button } from "$lib/components/ui/button";
+  import FolderIcon from "@lucide/svelte/icons/folder";
+</script>
+
+<Empty.Root>
+  <Empty.Header>
+    <Empty.Media variant="icon"><FolderIcon /></Empty.Media>
+    <Empty.Title>No projects yet</Empty.Title>
+    <Empty.Description
+      >Get started by creating a new project.</Empty.Description
+    >
+  </Empty.Header>
+  <Empty.Content>
+    <Button>Create Project</Button>
+  </Empty.Content>
+</Empty.Root>
+```
+
+---
+
+## Toast notifications use svelte-sonner
+
+```svelte
+<script lang="ts">
+  import { toast } from "svelte-sonner";
+</script>
+```
+
+```ts
+toast.success("Changes saved.");
+toast.error("Something went wrong.");
+toast("File deleted.", {
+  action: { label: "Undo", onClick: () => undoDelete() },
+});
+```
+
+Mount the `Toaster` from your UI folder once in the app layout (see [Sonner](https://shadcn-svelte.com/docs/components/sonner)).
+
+---
+
+## Choosing between overlay components
+
+| Use case                           | Component     |
+| ---------------------------------- | ------------- |
+| Focused task that requires input   | `Dialog`      |
+| Destructive action confirmation    | `AlertDialog` |
+| Side panel with details or filters | `Sheet`       |
+| Mobile-first bottom panel          | `Drawer`      |
+| Quick info on hover                | `HoverCard`   |
+| Small contextual content on click  | `Popover`     |
+
+---
+
+## Dialog, Sheet, and Drawer always need a Title
+
+`Dialog.Title`, `Sheet.Title`, `Drawer.Title` are required for accessibility. Use `class="sr-only"` if visually hidden.
+
+```svelte
+<script lang="ts">
+  import * as Dialog from "$lib/components/ui/dialog";
+</script>
+
+<Dialog.Content>
+  <Dialog.Header>
+    <Dialog.Title>Edit Profile</Dialog.Title>
+    <Dialog.Description>Update your profile.</Dialog.Description>
+  </Dialog.Header>
+  ...
+</Dialog.Content>
+```
+
+---
+
+## Card structure
+
+Use full composition — don't dump everything into `Card.Content`:
+
+```svelte
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+  import { Button } from "$lib/components/ui/button";
+</script>
+
+<Card.Root>
+  <Card.Header>
+    <Card.Title>Team Members</Card.Title>
+    <Card.Description>Manage your team.</Card.Description>
+  </Card.Header>
+  <Card.Content>...</Card.Content>
+  <Card.Footer>
+    <Button>Invite</Button>
+  </Card.Footer>
+</Card.Root>
+```
+
+---
+
+## Button has no isPending or isLoading prop
+
+Compose with `Spinner` inside `Button` + `disabled`:
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Spinner } from "$lib/components/ui/spinner";
+</script>
+
+<Button disabled>
+  <Spinner data-icon="inline-start" />
+  Saving...
+</Button>
+```
+
+---
+
+## Tabs.Trigger must be inside Tabs.List
+
+Never render `Tabs.Trigger` directly inside `Tabs.Root` — always wrap in `Tabs.List`:
+
+```svelte
+<script lang="ts">
+  import * as Tabs from "$lib/components/ui/tabs";
+  let tab = $state("account");
+</script>
+
+<Tabs.Root bind:value={tab}>
+  <Tabs.List>
+    <Tabs.Trigger value="account">Account</Tabs.Trigger>
+    <Tabs.Trigger value="password">Password</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="account">...</Tabs.Content>
+</Tabs.Root>
+```
+
+---
+
+## Avatar always needs Avatar.Fallback
+
+Always include `Avatar.Fallback` for when the image fails to load:
+
+```svelte
+<script lang="ts">
+  import * as Avatar from "$lib/components/ui/avatar";
+</script>
+
+<Avatar.Root>
+  <Avatar.Image src="/avatar.png" alt="User" />
+  <Avatar.Fallback>JD</Avatar.Fallback>
+</Avatar.Root>
+```
+
+---
+
+## Use existing components instead of custom markup
+
+| Instead of                                     | Use                                                                                         |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `<hr>` or `<div class="border-t">`             | `<Separator />` (`import { Separator } from "$lib/components/ui/separator"`)                |
+| `<div class="animate-pulse">` with styled divs | `<Skeleton class="h-4 w-3/4" />` (`import { Skeleton } from "$lib/components/ui/skeleton"`) |
+| `<span class="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` (`import { Badge } from "$lib/components/ui/badge"`)          |
diff --git a/.claude/skills/shadcn-svelte/rules/forms.md b/.claude/skills/shadcn-svelte/rules/forms.md
new file mode 100644
index 0000000..c779ee4
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/rules/forms.md
@@ -0,0 +1,234 @@
+# Forms & Inputs
+
+## Contents
+
+- Forms use Field.FieldGroup + Field.Field
+- InputGroup requires InputGroup.Input/InputGroup.Textarea
+- Buttons inside inputs use InputGroup.Root + InputGroup.Addon
+- Option sets (2–7 choices) use ToggleGroup.Root + ToggleGroup.Item
+- Field.FieldSet + Field.FieldLegend for grouping related fields
+- Field validation and disabled states
+
+---
+
+## Forms use Field.FieldGroup + Field.Field
+
+Always use `Field.FieldGroup` + `Field.Field` — never raw `div` with `space-y-*`:
+
+```svelte
+<script lang="ts">
+  import * as Field from "$lib/components/ui/field";
+  import { Input } from "$lib/components/ui/input";
+</script>
+
+<Field.FieldGroup>
+  <Field.Field>
+    <Field.FieldLabel for="email">Email</Field.FieldLabel>
+    <Input id="email" type="email" />
+  </Field.Field>
+  <Field.Field>
+    <Field.FieldLabel for="password">Password</Field.FieldLabel>
+    <Input id="password" type="password" />
+  </Field.Field>
+</Field.FieldGroup>
+```
+
+Use `Field` with `orientation="horizontal"` for settings pages. Use `Field.FieldLabel` with `class="sr-only"` for visually hidden labels.
+
+**Choosing form controls:**
+
+- Simple text input → `Input`
+- Dropdown with predefined options → `Select`
+- Searchable dropdown → `Combobox`
+- Native HTML select (no JS) → `native-select`
+- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
+- Single choice from few options → `RadioGroup`
+- Toggle between 2–5 options → `ToggleGroup.Root` + `ToggleGroup.Item`
+- OTP/verification code → `InputOTP`
+- Multi-line text → `Textarea`
+
+---
+
+## InputGroup requires InputGroup.Input/InputGroup.Textarea
+
+Never use raw `Input` or `Textarea` inside an `InputGroup.Root`.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import * as InputGroup from "$lib/components/ui/input-group";
+  import { Input } from "$lib/components/ui/input";
+</script>
+
+<InputGroup.Root>
+  <Input placeholder="Search..." />
+</InputGroup.Root>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import * as InputGroup from "$lib/components/ui/input-group";
+</script>
+
+<InputGroup.Root>
+  <InputGroup.Input placeholder="Search..." />
+</InputGroup.Root>
+```
+
+---
+
+## Buttons inside inputs use InputGroup.Root + InputGroup.Addon
+
+Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import { Input } from "$lib/components/ui/input";
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+</script>
+
+<div class="relative">
+  <Input placeholder="Search..." class="pr-10" />
+  <Button class="absolute top-0 right-0" size="icon">
+    <SearchIcon />
+  </Button>
+</div>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import * as InputGroup from "$lib/components/ui/input-group";
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+</script>
+
+<InputGroup.Root>
+  <InputGroup.Input placeholder="Search..." />
+  <InputGroup.Addon>
+    <Button size="icon">
+      <SearchIcon data-icon="inline-start" />
+    </Button>
+  </InputGroup.Addon>
+</InputGroup.Root>
+```
+
+---
+
+## Option sets (2–7 choices) use ToggleGroup.Root + ToggleGroup.Item
+
+Don't manually loop `Button` components with active state.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  let selected = $state("daily");
+</script>
+
+<div class="flex gap-2">
+  {#each ["daily", "weekly", "monthly"] as option (option)}
+    <Button
+      variant={selected === option ? "default" : "outline"}
+      onclick={() => (selected = option)}
+    >
+      {option}
+    </Button>
+  {/each}
+</div>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import * as ToggleGroup from "$lib/components/ui/toggle-group";
+  let selected = $state("daily");
+</script>
+
+<ToggleGroup.Root bind:value={selected} spacing={2}>
+  <ToggleGroup.Item value="daily">Daily</ToggleGroup.Item>
+  <ToggleGroup.Item value="weekly">Weekly</ToggleGroup.Item>
+  <ToggleGroup.Item value="monthly">Monthly</ToggleGroup.Item>
+</ToggleGroup.Root>
+```
+
+Combine with `Field` for labelled toggle groups:
+
+```svelte
+<script lang="ts">
+  import * as Field from "$lib/components/ui/field";
+  import * as ToggleGroup from "$lib/components/ui/toggle-group";
+</script>
+
+<Field.Field orientation="horizontal">
+  <Field.FieldTitle id="theme-label">Theme</Field.FieldTitle>
+  <ToggleGroup.Root aria-labelledby="theme-label" spacing={2}>
+    <ToggleGroup.Item value="light">Light</ToggleGroup.Item>
+    <ToggleGroup.Item value="dark">Dark</ToggleGroup.Item>
+    <ToggleGroup.Item value="system">System</ToggleGroup.Item>
+  </ToggleGroup.Root>
+</Field.Field>
+```
+
+---
+
+## Field.FieldSet + Field.FieldLegend for grouping related fields
+
+Use `Field.FieldSet` + `Field.FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
+
+```svelte
+<script lang="ts">
+  import * as Field from "$lib/components/ui/field";
+  import { Checkbox } from "$lib/components/ui/checkbox";
+</script>
+
+<Field.FieldSet>
+  <Field.FieldLegend variant="label">Preferences</Field.FieldLegend>
+  <Field.FieldDescription>Select all that apply.</Field.FieldDescription>
+  <Field.FieldGroup class="gap-3">
+    <Field.Field orientation="horizontal">
+      <Checkbox id="dark" />
+      <Field.FieldLabel for="dark" class="font-normal"
+        >Dark mode</Field.FieldLabel
+      >
+    </Field.Field>
+  </Field.FieldGroup>
+</Field.FieldSet>
+```
+
+---
+
+## Field validation and disabled states
+
+Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
+
+```svelte
+<script lang="ts">
+  import * as Field from "$lib/components/ui/field";
+  import { Input } from "$lib/components/ui/input";
+</script>
+
+<!-- Invalid. -->
+<Field.Field data-invalid>
+  <Field.FieldLabel for="email">Email</Field.FieldLabel>
+  <Input id="email" aria-invalid />
+  <Field.FieldDescription>Invalid email address.</Field.FieldDescription>
+</Field.Field>
+
+<!-- Disabled. -->
+<Field.Field data-disabled>
+  <Field.FieldLabel for="email">Email</Field.FieldLabel>
+  <Input id="email" disabled />
+</Field.Field>
+```
+
+Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
diff --git a/.claude/skills/shadcn-svelte/rules/icons.md b/.claude/skills/shadcn-svelte/rules/icons.md
new file mode 100644
index 0000000..4db886d
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/rules/icons.md
@@ -0,0 +1,107 @@
+# Icons
+
+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field in `components.json`: `lucide` → `@lucide/svelte`, `tabler` → `@tabler/icons-svelte`, etc. Never assume `@lucide/svelte`.
+
+---
+
+## Icons in Button use data-icon attribute
+
+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+</script>
+
+<Button>
+  <SearchIcon class="mr-2 size-4" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
+</script>
+
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<Button>
+  Next
+  <ArrowRightIcon data-icon="inline-end" />
+</Button>
+```
+
+---
+
+## No sizing classes on icons inside components
+
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `<Button>`, `DropdownMenu.Item`, `Alert.Root`, `Sidebar.*`, or other shadcn-svelte components — unless the user explicitly asks for custom icon sizes.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+</script>
+
+<Button>
+  <SearchIcon class="size-4" data-icon="inline-start" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
+</script>
+
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+```
+
+The same applies to icons inside `DropdownMenu.Item`, sidebar items, and other menu rows — no extra sizing classes on the icon component.
+
+---
+
+## Pass icons as components, not string keys
+
+Use a component reference, not a string key to a lookup map.
+
+**Incorrect:**
+
+```svelte
+<!-- String key lookup — avoid -->
+<DynamicIcon name="check" />
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import type { Component } from "svelte";
+  import CheckIcon from "@lucide/svelte/icons/check";
+
+  let { Icon }: { Icon: Component } = $props();
+</script>
+
+<Icon />
+
+<!-- <StatusBadge Icon={CheckIcon} /> -->
+```
diff --git a/.claude/skills/shadcn-svelte/rules/styling.md b/.claude/skills/shadcn-svelte/rules/styling.md
new file mode 100644
index 0000000..733e609
--- /dev/null
+++ b/.claude/skills/shadcn-svelte/rules/styling.md
@@ -0,0 +1,195 @@
+# Styling & Customization
+
+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
+
+## Contents
+
+- Semantic colors
+- Built-in variants first
+- class for layout only
+- No space-x-_ / space-y-_
+- Prefer size-_ over w-_ h-\* when equal
+- Prefer truncate shorthand
+- No manual dark: color overrides
+- Use cn() for conditional classes
+- No manual z-index on overlay components
+
+---
+
+## Semantic colors
+
+**Incorrect:**
+
+```svelte
+<div class="bg-blue-500 text-white">
+  <p class="text-gray-600">Secondary text</p>
+</div>
+```
+
+**Correct:**
+
+```svelte
+<div class="bg-primary text-primary-foreground">
+  <p class="text-muted-foreground">Secondary text</p>
+</div>
+```
+
+---
+
+## No raw color values for status/state indicators
+
+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
+
+**Incorrect:**
+
+```svelte
+<span class="text-emerald-600">+20.1%</span>
+<span class="text-green-500">Active</span>
+<span class="text-red-600">-3.2%</span>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import { Badge } from "$lib/components/ui/badge";
+</script>
+
+<Badge variant="secondary">+20.1%</Badge>
+<Badge>Active</Badge>
+<span class="text-destructive">-3.2%</span>
+```
+
+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
+
+---
+
+## Built-in variants first
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+</script>
+
+<Button class="border-input hover:bg-accent border bg-transparent"
+  >Click me</Button
+>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+</script>
+
+<Button variant="outline">Click me</Button>
+```
+
+---
+
+## class for layout only
+
+Use `class` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+</script>
+
+<Card.Root class="bg-blue-100 font-bold text-blue-900">
+  <Card.Content>Dashboard</Card.Content>
+</Card.Root>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import * as Card from "$lib/components/ui/card";
+</script>
+
+<Card.Root class="mx-auto max-w-md">
+  <Card.Content>Dashboard</Card.Content>
+</Card.Root>
+```
+
+To customize a component's appearance, prefer these approaches in order:
+
+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
+
+---
+
+## No space-x-_ / space-y-_
+
+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
+
+```svelte
+<script lang="ts">
+  import { Input } from "$lib/components/ui/input";
+  import { Button } from "$lib/components/ui/button";
+</script>
+
+<div class="flex flex-col gap-4">
+  <Input />
+  <Input />
+  <Button>Submit</Button>
+</div>
+```
+
+---
+
+## Prefer size-_ over w-_ h-\* when equal
+
+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
+
+---
+
+## Prefer truncate shorthand
+
+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
+
+---
+
+## No manual dark: color overrides
+
+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
+
+---
+
+## Use cn() for conditional classes
+
+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in `class` strings.
+
+**Incorrect:**
+
+```svelte
+<script lang="ts">
+  let isActive = $state(false);
+</script>
+
+<div class={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+```
+
+**Correct:**
+
+```svelte
+<script lang="ts">
+  import { cn } from "$lib/utils";
+  let isActive = $state(false);
+</script>
+
+<div class={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
+```
+
+---
+
+## No manual z-index on overlay components
+
+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
diff --git a/internal/db/runs.go b/internal/db/runs.go
index 95df9be..d2c7b12 100644
--- a/internal/db/runs.go
+++ b/internal/db/runs.go
@@ -31,6 +31,12 @@ type RunStore interface {
 	// Scenario status tracking
 	CreateScenarioStatus(ctx context.Context, runID uuid.UUID, name string) (uuid.UUID, error)
 	UpdateScenarioPhase(ctx context.Context, id uuid.UUID, phase string) error
+	// UpdateScenarioIdentity records executor identity mid-run (after detonation),
+	// touching only the identity columns and leaving status/phase untouched.
+	UpdateScenarioIdentity(ctx context.Context, id uuid.UUID, executorName, executorType, executionID, simulationID string) error
+	// UpdateScenarioAssertions persists partial assertion results mid-run,
+	// touching only the assertions column and leaving status/phase untouched.
+	UpdateScenarioAssertions(ctx context.Context, id uuid.UUID, assertionsJSON []byte) error
 	CompleteScenarioResult(ctx context.Context, id uuid.UUID, result *ScenarioResult) error
 	IncrementRunCounters(ctx context.Context, id uuid.UUID, successDelta, failDelta int) error
 
@@ -337,6 +343,22 @@ func (s *runStore) UpdateScenarioPhase(ctx context.Context, id uuid.UUID, phase
 	return err
 }
 
+func (s *runStore) UpdateScenarioIdentity(ctx context.Context, id uuid.UUID, executorName, executorType, executionID, simulationID string) error {
+	_, err := s.pool.Exec(ctx,
+		`UPDATE scenario_results SET executor_name = $2, executor_type = $3, execution_id = $4, simulation_id = $5 WHERE id = $1`,
+		id, executorName, executorType, executionID, simulationID,
+	)
+	return err
+}
+
+func (s *runStore) UpdateScenarioAssertions(ctx context.Context, id uuid.UUID, assertionsJSON []byte) error {
+	_, err := s.pool.Exec(ctx,
+		`UPDATE scenario_results SET assertions = $2 WHERE id = $1`,
+		id, assertionsJSON,
+	)
+	return err
+}
+
 func (s *runStore) CompleteScenarioResult(ctx context.Context, id uuid.UUID, result *ScenarioResult) error {
 	_, err := s.pool.Exec(ctx,
 		`UPDATE scenario_results SET
diff --git a/internal/runner/runner.go b/internal/runner/runner.go
index 18af6fd..c19fe76 100644
--- a/internal/runner/runner.go
+++ b/internal/runner/runner.go
@@ -99,6 +99,10 @@ func (m *Runner) runScenario(scenario *Scenario) (string, float64, error) {
 		executionOutput["simulation_id"] = scenario.Detonator.SimulationId()
 	}
 
+	// Surface executor identity now that detonation has resolved execution_id /
+	// simulation_id, so a still-running row shows what is executing and where.
+	reportIdentity(scenario, executionId)
+
 	// If no assertions, no collector, and not explore mode, just return
 	if !scenario.ExploreMode && len(scenario.Assertions) == 0 && scenario.Collector == nil {
 		return executionId, 0, nil
@@ -231,6 +235,8 @@ func (m *Runner) runAssertions(scenario *Scenario, indicators []string, logger *
 	logger.Info("Waiting for assertions")
 	hasDeadline := scenario.Timeout > 0
 
+	matchedSet := make(map[matchers.AlertGeneratedMatcher]bool, len(scenario.Assertions))
+
 	for len(remainingAssertions) > 0 {
 		if hasDeadline && time.Now().After(deadline) {
 			logger.WithFields(logrus.Fields{
@@ -247,7 +253,11 @@ func (m *Runner) runAssertions(scenario *Scenario, indicators []string, logger *
 		if !matched {
 			remainingAssertions <- assertion
 			time.Sleep(m.Interval)
+			continue
 		}
+		// Newly matched: persist the updated partial state (write-on-change).
+		matchedSet[assertion] = true
+		reportAssertions(scenario, matchedSet)
 	}
 
 	numRemainingAssertions := len(remainingAssertions)
@@ -406,6 +416,50 @@ func reportStatus(scenario *Scenario, phase string) {
 	}
 }
 
+// reportIdentity emits the executor identity once detonation has resolved.
+// Executor name/type are derived the same way results.runSingleScenario does.
+func reportIdentity(scenario *Scenario, executionID string) {
+	if scenario.IdentityCallback == nil {
+		return
+	}
+	identity := ScenarioIdentity{ExecutionID: executionID}
+	switch {
+	case scenario.Detonator != nil:
+		identity.ExecutorType = "detonator"
+		identity.ExecutorName = scenario.Detonator.String()
+		identity.SimulationID = scenario.Detonator.SimulationId()
+	case scenario.Injector != nil:
+		identity.ExecutorType = "injector"
+		identity.ExecutorName = scenario.Injector.String()
+	default:
+		identity.ExecutorType = "unknown"
+		identity.ExecutorName = "unknown"
+	}
+	scenario.IdentityCallback(scenario.Name, identity)
+}
+
+// reportAssertions emits the current pass/pending state of every assertion.
+// Matched assertions carry Passed=true; not-yet-matched ones carry Passed=nil
+// (pending) — no terminal failure is recorded until completion.
+func reportAssertions(scenario *Scenario, matchedSet map[matchers.AlertGeneratedMatcher]bool) {
+	if scenario.AssertionsCallback == nil {
+		return
+	}
+	results := make([]AssertionResult, 0, len(scenario.Assertions))
+	for _, a := range scenario.Assertions {
+		r := AssertionResult{
+			MatcherType: a.MatcherName(),
+			AlertName:   a.AlertName(),
+		}
+		if matchedSet[a] {
+			passed := true
+			r.Passed = &passed
+		}
+		results = append(results, r)
+	}
+	scenario.AssertionsCallback(scenario.Name, results)
+}
+
 func (m *Runner) buildIndicatorsList(scenario *Scenario, detonationOutput map[string]string) []string {
 	var indicators []string
 
diff --git a/internal/runner/runner_test.go b/internal/runner/runner_test.go
index c6c46c1..60e1587 100644
--- a/internal/runner/runner_test.go
+++ b/internal/runner/runner_test.go
@@ -302,6 +302,100 @@ func TestRunnerExploreModeSucceedsWhenAlertsDiscovered(t *testing.T) {
 	assert.Equal(t, "alert-1", scenario.DiscoveredAlerts[0].AlertID)
 }
 
+// TestRunnerFiresIdentityAndAssertionCallbacks verifies the mid-run hooks that
+// power the live scenario detail view: identity is emitted exactly once after
+// detonation, and the assertions callback fires once per newly-matched
+// assertion, carrying passed=true for matches and nil (pending) for the rest.
+func TestRunnerFiresIdentityAndAssertionCallbacks(t *testing.T) {
+	mockDetonator := &detonatorMocks.MockDetonator{}
+	mockDetonator.On("Detonate").Return(map[string]string{"execution_id": "exec-123"}, nil)
+	mockDetonator.On("String").Return("mock-detonator")
+	mockDetonator.On("SimulationId").Return("sim-456")
+	mockDetonator.On("PackName").Return("")
+	mockDetonator.On("SetStatusCallback", mock.AnythingOfType("func(string)")).Return()
+
+	// matcherA matches on the first poll; matcherB only on the second, so the
+	// assertions callback must fire twice with distinct partial states.
+	matcherA := &matcherMocks.MockAlertGeneratedMatcher{}
+	matcherA.On("HasExpectedAlert", []string{"exec-123"}, mock.AnythingOfType("*logrus.Entry")).Return(true, nil)
+	matcherA.On("MatcherName").Return("Elastic")
+	matcherA.On("AlertName").Return("alert-a")
+	matcherA.On("String").Return("alert-a")
+	matcherA.On("Cleanup", []string{"exec-123"}, mock.AnythingOfType("*logrus.Entry")).Return(nil)
+
+	matcherB := &matcherMocks.MockAlertGeneratedMatcher{}
+	matcherB.On("HasExpectedAlert", []string{"exec-123"}, mock.AnythingOfType("*logrus.Entry")).Return(false, nil).Once()
+	matcherB.On("HasExpectedAlert", []string{"exec-123"}, mock.AnythingOfType("*logrus.Entry")).Return(true, nil)
+	matcherB.On("MatcherName").Return("Elastic")
+	matcherB.On("AlertName").Return("alert-b")
+	matcherB.On("String").Return("alert-b")
+	matcherB.On("Cleanup", []string{"exec-123"}, mock.AnythingOfType("*logrus.Entry")).Return(nil)
+
+	var identities []ScenarioIdentity
+	var assertionSnapshots [][]AssertionResult
+
+	scenario := &Scenario{
+		Name:       "callback-scenario",
+		Detonator:  mockDetonator,
+		Assertions: []matchers.AlertGeneratedMatcher{matcherA, matcherB},
+		Timeout:    5 * time.Second,
+		IdentityCallback: func(_ string, id ScenarioIdentity) {
+			identities = append(identities, id)
+		},
+		AssertionsCallback: func(_ string, results []AssertionResult) {
+			snap := make([]AssertionResult, len(results))
+			copy(snap, results)
+			assertionSnapshots = append(assertionSnapshots, snap)
+		},
+	}
+
+	runner := Runner{Scenarios: []*Scenario{scenario}, Interval: 1 * time.Millisecond}
+	results, err := runner.Run()
+	assert.NoError(t, err)
+	assert.Len(t, results, 1)
+	assert.True(t, results[0].Success)
+
+	// Identity fires exactly once, after detonation, carrying all four fields.
+	assert.Len(t, identities, 1)
+	assert.Equal(t, ScenarioIdentity{
+		ExecutorName: "mock-detonator",
+		ExecutorType: "detonator",
+		ExecutionID:  "exec-123",
+		SimulationID: "sim-456",
+	}, identities[0])
+
+	// One callback per newly-matched assertion: A then B → two snapshots.
+	assert.Len(t, assertionSnapshots, 2)
+
+	first := assertionSnapshots[0]
+	assertAssertionPassed(t, first, "alert-a", boolPtr(true))
+	assertAssertionPassed(t, first, "alert-b", nil) // still pending
+
+	last := assertionSnapshots[len(assertionSnapshots)-1]
+	assertAssertionPassed(t, last, "alert-a", boolPtr(true))
+	assertAssertionPassed(t, last, "alert-b", boolPtr(true))
+}
+
+func boolPtr(b bool) *bool { return &b }
+
+func assertAssertionPassed(t *testing.T, results []AssertionResult, alertName string, want *bool) {
+	t.Helper()
+	for _, r := range results {
+		if r.AlertName != alertName {
+			continue
+		}
+		if want == nil {
+			assert.Nil(t, r.Passed, "%s should be pending", alertName)
+		} else {
+			if assert.NotNil(t, r.Passed, "%s should be resolved", alertName) {
+				assert.Equal(t, *want, *r.Passed, "%s passed state", alertName)
+			}
+		}
+		return
+	}
+	t.Fatalf("assertion %q not found in snapshot", alertName)
+}
+
 func TestRunnerWithInjector(t *testing.T) {
 	// Mock injector
 	mockInjector := &injectorMocks.MockInjector{}
diff --git a/internal/runner/scenario.go b/internal/runner/scenario.go
index adc4d58..52aaccd 100644
--- a/internal/runner/scenario.go
+++ b/internal/runner/scenario.go
@@ -21,8 +21,13 @@ type Scenario struct {
 	Indicators     *Indicators
 	Metadata       *Metadata
 	StatusCallback func(scenarioName, phase string)
-	ExploreMode    bool // when true, discover all matching alerts instead of asserting specific rules
-	CleanupAlerts  bool // when true in explore mode, close discovered alerts after run
+	// IdentityCallback fires once after detonation, carrying executor identity.
+	IdentityCallback func(scenarioName string, identity ScenarioIdentity)
+	// AssertionsCallback fires when an assertion newly matches, carrying the
+	// current pass/pending state of every assertion.
+	AssertionsCallback func(scenarioName string, results []AssertionResult)
+	ExploreMode        bool // when true, discover all matching alerts instead of asserting specific rules
+	CleanupAlerts      bool // when true in explore mode, close discovered alerts after run
 
 	// Populated by runner after assertion matching completes
 	FailedAssertions []matchers.AlertGeneratedMatcher
@@ -35,6 +40,22 @@ type Scenario struct {
 	CollectedDocCount int
 }
 
+// ScenarioIdentity is the executor identity surfaced mid-run, after detonation.
+type ScenarioIdentity struct {
+	ExecutorName string
+	ExecutorType string
+	ExecutionID  string
+	SimulationID string
+}
+
+// AssertionResult is the mid-run state of a single assertion. Passed is nil
+// while the assertion is still pending (not yet matched).
+type AssertionResult struct {
+	MatcherType string
+	AlertName   string
+	Passed      *bool
+}
+
 // DiscoveredAlert represents an alert found during explore mode.
 type DiscoveredAlert struct {
 	RuleName string `json:"ruleName"`
diff --git a/internal/testutil/fakes/fakes.go b/internal/testutil/fakes/fakes.go
index f374d7e..1b6fb2a 100644
--- a/internal/testutil/fakes/fakes.go
+++ b/internal/testutil/fakes/fakes.go
@@ -228,6 +228,31 @@ func (s *RunStore) UpdateScenarioPhase(_ context.Context, id uuid.UUID, phase st
 	return nil
 }
 
+func (s *RunStore) UpdateScenarioIdentity(_ context.Context, id uuid.UUID, executorName, executorType, executionID, simulationID string) error {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	r, ok := s.results[id]
+	if !ok {
+		return pgx.ErrNoRows
+	}
+	r.ExecutorName = executorName
+	r.ExecutorType = executorType
+	r.ExecutionID = executionID
+	r.SimulationID = simulationID
+	return nil
+}
+
+func (s *RunStore) UpdateScenarioAssertions(_ context.Context, id uuid.UUID, assertionsJSON []byte) error {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	r, ok := s.results[id]
+	if !ok {
+		return pgx.ErrNoRows
+	}
+	r.Assertions = assertionsJSON
+	return nil
+}
+
 func (s *RunStore) CompleteScenarioResult(_ context.Context, id uuid.UUID, result *db.ScenarioResult) error {
 	s.mu.Lock()
 	defer s.mu.Unlock()
diff --git a/internal/testutil/fakes/fakes_test.go b/internal/testutil/fakes/fakes_test.go
index 76a8b9c..95509c2 100644
--- a/internal/testutil/fakes/fakes_test.go
+++ b/internal/testutil/fakes/fakes_test.go
@@ -32,6 +32,45 @@ func TestRunStore_ListExpired(t *testing.T) {
 	assert.NotContains(t, ids, oldRunning, "running run must be skipped even when old")
 }
 
+// UpdateScenarioIdentity and UpdateScenarioAssertions are the mid-run partial
+// writes behind the live scenario detail view: each must touch only its own
+// columns and leave the lifecycle status/phase untouched. (Production SQL is
+// Postgres-bound and verified manually per task 5.3; this pins the contract the
+// web wiring relies on.)
+func TestRunStore_PartialScenarioUpdates(t *testing.T) {
+	s := New().Run
+	ctx := context.Background()
+	runID := mustCreateRun(t, ctx, s, "running", time.Now())
+
+	id, err := s.CreateScenarioStatus(ctx, runID, "scn")
+	require.NoError(t, err)
+	require.NoError(t, s.UpdateScenarioPhase(ctx, id, "matching"))
+
+	// Identity write: only identity columns change; status/phase preserved.
+	require.NoError(t, s.UpdateScenarioIdentity(ctx, id, "elastic-detonator", "detonator", "exec-9", "sim-9"))
+	got, err := s.GetScenarioResult(ctx, id)
+	require.NoError(t, err)
+	assert.Equal(t, "running", got.Status, "identity write must not change status")
+	require.NotNil(t, got.Phase)
+	assert.Equal(t, "matching", *got.Phase, "identity write must not change phase")
+	assert.Equal(t, "elastic-detonator", got.ExecutorName)
+	assert.Equal(t, "detonator", got.ExecutorType)
+	assert.Equal(t, "exec-9", got.ExecutionID)
+	assert.Equal(t, "sim-9", got.SimulationID)
+	assert.Nil(t, got.Assertions, "identity write must not populate assertions")
+
+	// Assertions write: only the assertions column changes; everything else stays.
+	partial := []byte(`[{"matcherType":"Elastic","alertName":"a","passed":true},{"matcherType":"Elastic","alertName":"b"}]`)
+	require.NoError(t, s.UpdateScenarioAssertions(ctx, id, partial))
+	got, err = s.GetScenarioResult(ctx, id)
+	require.NoError(t, err)
+	assert.Equal(t, "running", got.Status, "assertions write must not change status")
+	require.NotNil(t, got.Phase)
+	assert.Equal(t, "matching", *got.Phase, "assertions write must not change phase")
+	assert.Equal(t, "exec-9", got.ExecutionID, "assertions write must not touch identity")
+	assert.JSONEq(t, string(partial), string(got.Assertions))
+}
+
 func mustCreateRun(t *testing.T, ctx context.Context, s *RunStore, status string, createdAt time.Time) uuid.UUID {
 	t.Helper()
 	id := uuid.New()
diff --git a/internal/web/scenario_results.go b/internal/web/scenario_results.go
index 098a5e3..4eef163 100644
--- a/internal/web/scenario_results.go
+++ b/internal/web/scenario_results.go
@@ -6,6 +6,7 @@ import (
 	"github.com/IBM/simrun/internal/db"
 	"github.com/IBM/simrun/internal/matchers"
 	"github.com/IBM/simrun/internal/results"
+	"github.com/IBM/simrun/internal/runner"
 	"github.com/google/uuid"
 	log "github.com/sirupsen/logrus"
 )
@@ -18,6 +19,30 @@ type assertionDTO struct {
 	Passed      bool   `json:"passed"`
 }
 
+// partialAssertionDTO is the mid-run counterpart of assertionDTO: a pending
+// (not-yet-matched) assertion omits `passed` so the frontend renders it muted
+// rather than as a failure. The terminal write uses assertionDTO (passed always
+// present) instead.
+type partialAssertionDTO struct {
+	MatcherType string `json:"matcherType"`
+	AlertName   string `json:"alertName"`
+	Passed      *bool  `json:"passed,omitempty"`
+}
+
+// buildPartialAssertionsJSON marshals the runner's mid-run assertion state into
+// the same wire shape as buildScenarioResultRow, preserving pending vs passed.
+func buildPartialAssertionsJSON(results []runner.AssertionResult) ([]byte, error) {
+	dtos := make([]partialAssertionDTO, 0, len(results))
+	for _, r := range results {
+		dtos = append(dtos, partialAssertionDTO{
+			MatcherType: r.MatcherType,
+			AlertName:   r.AlertName,
+			Passed:      r.Passed,
+		})
+	}
+	return json.Marshal(dtos)
+}
+
 // buildScenarioResultRow projects an in-memory scenario result into the
 // `scenario_results` row shape: marshals assertions/indicators/metadata/
 // discovered-alerts and copies scalar fields. Marshaling errors are logged
diff --git a/internal/web/scenarios.go b/internal/web/scenarios.go
index 54f20dc..da12a50 100644
--- a/internal/web/scenarios.go
+++ b/internal/web/scenarios.go
@@ -11,6 +11,7 @@ import (
 	"github.com/IBM/simrun/internal/db"
 	"github.com/IBM/simrun/internal/parser"
 	"github.com/IBM/simrun/internal/results"
+	"github.com/IBM/simrun/internal/runner"
 	"github.com/google/uuid"
 	log "github.com/sirupsen/logrus"
 )
@@ -234,6 +235,28 @@ func (s *ScenarioService) Run(ctx context.Context, scenarioID uuid.UUID, opts *R
 				}
 			}
 		}
+		sc.IdentityCallback = func(scenarioName string, identity runner.ScenarioIdentity) {
+			if dbID, ok := scenarioDBIDs[scenarioName]; ok {
+				if err := s.runStore.UpdateScenarioIdentity(context.Background(), dbID,
+					identity.ExecutorName, identity.ExecutorType, identity.ExecutionID, identity.SimulationID); err != nil {
+					log.WithField("scenario", scenarioName).WithError(err).Warn("Failed to update scenario identity")
+				}
+			}
+		}
+		sc.AssertionsCallback = func(scenarioName string, assertions []runner.AssertionResult) {
+			dbID, ok := scenarioDBIDs[scenarioName]
+			if !ok {
+				return
+			}
+			assertionsJSON, err := buildPartialAssertionsJSON(assertions)
+			if err != nil {
+				log.WithField("scenario", scenarioName).WithError(err).Warn("Failed to marshal partial assertions")
+				return
+			}
+			if err := s.runStore.UpdateScenarioAssertions(context.Background(), dbID, assertionsJSON); err != nil {
+				log.WithField("scenario", scenarioName).WithError(err).Warn("Failed to update scenario assertions")
+			}
+		}
 	}
 
 	// Create per-run log writer
diff --git a/openspec/changes/assessment-retention/.openspec.yaml b/openspec/changes/archive/2026-06-23-assessment-retention/.openspec.yaml
similarity index 100%
rename from openspec/changes/assessment-retention/.openspec.yaml
rename to openspec/changes/archive/2026-06-23-assessment-retention/.openspec.yaml
diff --git a/openspec/changes/assessment-retention/design.md b/openspec/changes/archive/2026-06-23-assessment-retention/design.md
similarity index 100%
rename from openspec/changes/assessment-retention/design.md
rename to openspec/changes/archive/2026-06-23-assessment-retention/design.md
diff --git a/openspec/changes/assessment-retention/proposal.md b/openspec/changes/archive/2026-06-23-assessment-retention/proposal.md
similarity index 100%
rename from openspec/changes/assessment-retention/proposal.md
rename to openspec/changes/archive/2026-06-23-assessment-retention/proposal.md
diff --git a/openspec/changes/assessment-retention/specs/assessment-retention/spec.md b/openspec/changes/archive/2026-06-23-assessment-retention/specs/assessment-retention/spec.md
similarity index 100%
rename from openspec/changes/assessment-retention/specs/assessment-retention/spec.md
rename to openspec/changes/archive/2026-06-23-assessment-retention/specs/assessment-retention/spec.md
diff --git a/openspec/changes/assessment-retention/specs/runs/spec.md b/openspec/changes/archive/2026-06-23-assessment-retention/specs/runs/spec.md
similarity index 100%
rename from openspec/changes/assessment-retention/specs/runs/spec.md
rename to openspec/changes/archive/2026-06-23-assessment-retention/specs/runs/spec.md
diff --git a/openspec/changes/assessment-retention/tasks.md b/openspec/changes/archive/2026-06-23-assessment-retention/tasks.md
similarity index 100%
rename from openspec/changes/assessment-retention/tasks.md
rename to openspec/changes/archive/2026-06-23-assessment-retention/tasks.md
diff --git a/openspec/changes/archive/2026-06-23-live-scenario-detail/.openspec.yaml b/openspec/changes/archive/2026-06-23-live-scenario-detail/.openspec.yaml
new file mode 100644
index 0000000..a4ac4d7
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-live-scenario-detail/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-23
diff --git a/openspec/changes/archive/2026-06-23-live-scenario-detail/design.md b/openspec/changes/archive/2026-06-23-live-scenario-detail/design.md
new file mode 100644
index 0000000..5efa57e
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-live-scenario-detail/design.md
@@ -0,0 +1,58 @@
+## Context
+
+A scenario run is orchestrated in `web/scenarios.go`: a `scenario_results` row is pre-created as `pending` (`CreateScenarioStatus`), a `name → dbID` map is built, and each scenario's `StatusCallback(name, phase)` is wired to `runStore.UpdateScenarioPhase(dbID, phase)`. The runner (`internal/runner/runner.go`) drives detonation → matching → cleanup, calling `reportStatus` at each phase. Only at completion does `RunScenariosParallel`'s callback build the full row and call `CompleteScenarioResult(dbID, row)`.
+
+Consequently, between `pending` and `completed` the row carries only `status` + `phase`. Yet the runner already holds everything else mid-run:
+- Executor identity — `executor_name`/`executor_type`/`simulation_id` are derivable from `scenario.Detonator`/`Injector` with no detonation at all (`String()`, `SimulationId()`); `execution_id` is available the instant detonation returns (`runner.go` ~L95).
+- Assertion progress — `runAssertions` (`runner.go:217-259`) resolves expected alerts one-by-one off a `remainingAssertions` channel; only the *failed* remainder is recorded, and only at completion.
+
+The frontend already polls `GET /api/runs/{runId}` every 5s and renders from `scenario_results`, so any column written earlier is surfaced with no new transport.
+
+## Goals / Non-Goals
+
+**Goals:**
+- A `running` scenario row exposes executor identity (`executor_name`, `executor_type`, `execution_id`, `simulation_id`) once detonation has occurred.
+- A `matching` scenario row exposes per-assertion pass/pending state as the matcher resolves each expected alert.
+- Reuse the existing poll path and the existing `name → dbID` callback pattern; no new transport.
+
+**Non-Goals:**
+- No new WebSocket message types or server push (the `assertion_update`/`scenario_started` types in the frontend `types.ts` stay unwired).
+- No incremental `discovered_alerts` for explore mode (future work).
+- No DB schema migration — target columns already exist on `scenario_results`.
+- No change to the terminal completion write or to run-counter logic.
+
+## Decisions
+
+**1. Two new optional callbacks on `Scenario`, wired exactly like `StatusCallback`.**
+Add `IdentityCallback func(name string, id ScenarioIdentity)` and `AssertionsCallback func(name string, results []AssertionResult)` to `runner.Scenario`. `web/scenarios.go` wires them to new `RunStore` methods keyed by the same `scenarioDBIDs[name]` map.
+- *Why:* mirrors the proven phase-callback flow; keeps the runner transport-agnostic and the web layer the single place that knows about `dbID`.
+- *Alternatives:* a single generic `ProgressCallback` (rejected — `phase` already owns status transitions; separate concerns read clearer); WebSocket push (rejected — adds plumbing, diverges from the poll model `phase` already uses).
+
+**2. Fire identity once, right after detonation returns.**
+In `runner.go` immediately after `executionId` (and `simulation_id`) are resolved, emit the identity callback carrying all four fields. Executor name/type are computed the same way `results/executor.go` already does.
+- *Why:* a single write; `execution_id` is the highest-value "where" field (correlates to the Terraform working dir). Detonation is fast relative to the matching window, so waiting for it costs little.
+- *Alternative:* emit name/type at queue time, `execution_id` later (two writes) — rejected as needless chatter.
+
+**3. Incremental assertions use a tri-state, written on change only.**
+After each successful match in the `runAssertions` loop, emit the current assertion set: matched → `passed = true`, not-yet-matched → `passed` omitted (pending). The terminal completion write continues to set `passed = true/false` definitively (a still-unmatched assertion becomes `false` only then). The callback fires only when an assertion newly resolves, not on every poll tick.
+- *Why:* avoids rendering an unmatched-but-still-polling assertion as a red failure; the optional `passed?: boolean` field already models pending. Write-on-change keeps UPDATE volume to roughly one per matched assertion.
+- *Alternative:* write on every poll iteration (rejected — write amplification for no signal change).
+
+**4. New DB methods do column-scoped partial UPDATEs.**
+`UpdateScenarioIdentity(ctx, id, name, typ, execID, simID)` and `UpdateScenarioAssertions(ctx, id, assertionsJSON)` update only their columns and leave `status='running'`/`phase` untouched. Add to the `RunStore` interface and regenerate mocks.
+- *Why:* preserves the lifecycle state machine; each scenario writes only its own row by `dbID`, so parallel scenarios never contend.
+
+## Risks / Trade-offs
+
+- **Frontend miscolors pending assertions as failed** → tri-state: only the completion write sets `passed=false`; mid-run unmatched assertions carry `passed` undefined and render muted. The assertion mini-bar gains a third (pending) color.
+- **Write amplification from the matcher loop** → fire the assertions callback only on a newly-resolved assertion, not per poll tick; identity is a single write.
+- **Failed/aborted detonation** → identity callback may carry an empty `execution_id`; this is acceptable (mirrors today's tolerance for empty `simulation_id`) and the terminal completion write still produces the authoritative row.
+- **Callback nil-safety** → both new callbacks are optional and nil-guarded like `reportStatus`, so non-web callers (tests, CLI paths) are unaffected.
+
+## Migration Plan
+
+No schema migration. Ship backend + frontend together. Rollback is a plain revert: running rows simply return to `status` + `phase` only, and an older frontend harmlessly ignores the earlier-populated fields (backward compatible).
+
+## Open Questions
+
+- Should explore mode surface `discovered_alerts` incrementally the same way? Deferred to a follow-up; this change scopes to assertion-based scenarios + identity.
diff --git a/openspec/changes/archive/2026-06-23-live-scenario-detail/proposal.md b/openspec/changes/archive/2026-06-23-live-scenario-detail/proposal.md
new file mode 100644
index 0000000..5c5a563
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-live-scenario-detail/proposal.md
@@ -0,0 +1,28 @@
+## Why
+
+While a scenario is running, the only per-scenario data we expose is `status` + `phase`, so the UI can show nothing but a phase badge and the streamed log lines. The executor identity, the resource IDs, and per-assertion match results are all known to the runner mid-run but are flushed to `scenario_results` in a single write at completion — so a running row reads "in progress" with no sense of *what* is executing, *where*, or *how close* detection is to passing. The data already exists in the runner; it just isn't persisted until the end.
+
+## What Changes
+
+- Persist executor identity to the `scenario_results` row **right after detonation** (before matching begins): `executor_name`, `executor_type`, `execution_id`, and `simulation_id`. A running row then shows what is executing and where, surfaced through the existing `GET /api/runs/{runId}` poll.
+- Flush per-assertion results **incrementally as the matcher resolves them**, rather than only at completion. As each expected alert matches (or the matching window advances), the row's `assertions` reflect current pass/pending state, enabling a live "2/3 matched" view.
+- No new WebSocket message types or backend push plumbing — both rely on incremental `UPDATE`s to `scenario_results` picked up by the frontend's existing 5s poll, consistent with how `phase` is surfaced today.
+- Frontend renders the now-available executor identity and partial assertion progress on `running` scenario rows (today these are gated to `completed` rows).
+
+## Capabilities
+
+### New Capabilities
+
+_None._
+
+### Modified Capabilities
+
+- `runs`: The **Scenario Result Lifecycle** requirement is extended so that a `scenario_results` row in the `running` state exposes executor identity (after detonation) and incrementally-updated assertion results (during matching), not just `status` + `phase`.
+
+## Impact
+
+- **DB layer** (`internal/db/runs.go`): new/extended scenario-result update methods — one to record executor identity post-detonation, one to upsert incremental assertion results during matching. New `RunStore` interface methods + mock regeneration.
+- **Runner** (`internal/runner/runner.go`): invoke the post-detonation persistence hook once the executor returns identity, and persist each assertion outcome inside the existing `runAssertions` poll loop as it resolves.
+- **Runner↔DB wiring**: extend the per-scenario callback/store currently used for `UpdateScenarioPhase` to carry the new writes.
+- **Frontend** (`web/frontend/src/lib/components/ScenarioResult.svelte`, `scenario-tracker`): show executor identity and partial assertion ticks for `running` entries.
+- No schema migration expected — the target columns (`executor_name`, `executor_type`, `execution_id`, `simulation_id`, `assertions`) already exist on `scenario_results`; this change writes them earlier.
diff --git a/openspec/changes/archive/2026-06-23-live-scenario-detail/specs/runs/spec.md b/openspec/changes/archive/2026-06-23-live-scenario-detail/specs/runs/spec.md
new file mode 100644
index 0000000..adf6921
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-live-scenario-detail/specs/runs/spec.md
@@ -0,0 +1,40 @@
+## MODIFIED Requirements
+
+### Requirement: Scenario Result Lifecycle
+The system SHALL track each scenario as a row in `scenario_results` with
+`status` transitioning `pending` → `running` → `completed`, and `phase`
+populated during `running` (e.g., `"warmup"`, `"detonating"`, `"matching"`,
+`"collecting"`, `"cleanup"`, `"queued"`).
+
+The system SHALL populate the row's executor identity — `executor_name`,
+`executor_type`, `execution_id`, and `simulation_id` — as soon as detonation
+returns these values, while the row is still `running`, rather than only at
+completion. When a detonator does not produce a `simulation_id`, that field
+SHALL remain empty without blocking the other identity fields.
+
+While in the `matching` phase, the system SHALL persist per-assertion results
+incrementally as the matcher resolves them, so the row's `assertions` reflect
+the current passed/pending state before the scenario completes. An assertion
+not yet matched SHALL be represented as not-yet-passed (no terminal failure is
+recorded until completion).
+
+These incremental writes SHALL NOT alter the terminal completion write: when a
+scenario completes, `status` becomes `completed`, `phase` is cleared, and the
+final `is_success`, `assertions`, durations, and `discovered_alerts` are
+written as they are today.
+
+#### Scenario: Phase transitions
+- **WHEN** a scenario enters the matching phase
+- **THEN** its `scenario_results` row has `status = "running"` and `phase = "matching"`
+
+#### Scenario: Executor identity exposed during run
+- **WHEN** a scenario has detonated and is in the `matching` phase
+- **THEN** `GET /api/runs/{runId}` returns that scenario with `status = "running"` and non-empty `executor_name`, `executor_type`, and `execution_id`
+
+#### Scenario: Assertion progress exposed during matching
+- **WHEN** a scenario expecting 3 assertions has matched 2 of them and is still matching
+- **THEN** the scenario's `assertions` in `GET /api/runs/{runId}` show 2 passed and 1 not-yet-passed while `status = "running"`
+
+#### Scenario: Completion write unchanged
+- **WHEN** a scenario finishes after its identity and partial assertions were written mid-run
+- **THEN** the final row has `status = "completed"`, `phase = null`, and `is_success` plus the full `assertions` and `discovered_alerts` set, with no stale `running`-phase values
diff --git a/openspec/changes/archive/2026-06-23-live-scenario-detail/tasks.md b/openspec/changes/archive/2026-06-23-live-scenario-detail/tasks.md
new file mode 100644
index 0000000..96dcdb9
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-live-scenario-detail/tasks.md
@@ -0,0 +1,29 @@
+## 1. DB layer
+
+- [x] 1.1 Add `UpdateScenarioIdentity(ctx, id uuid.UUID, executorName, executorType, executionID, simulationID string) error` to the `RunStore` interface in `internal/db/runs.go`, implementing a column-scoped `UPDATE scenario_results SET executor_name=…, executor_type=…, execution_id=…, simulation_id=… WHERE id=$1` that leaves `status`/`phase` untouched.
+- [x] 1.2 Add `UpdateScenarioAssertions(ctx, id uuid.UUID, assertionsJSON []byte) error` to `RunStore`, implementing `UPDATE scenario_results SET assertions=$2 WHERE id=$1` (status/phase untouched).
+- [x] 1.3 Regenerate mocks (`go generate ./...`) so the `RunStore` mock includes the two new methods. (RunStore is mocked manually in `internal/testutil/fakes/fakes.go`, not via mockery — added both methods there; `go generate ./...` runs clean.)
+
+## 2. Runner callbacks
+
+- [x] 2.1 Add `IdentityCallback func(name string, id ScenarioIdentity)` and `AssertionsCallback func(name string, results []AssertionResult)` (with their small value types) to `runner.Scenario` in `internal/runner/scenario.go`, alongside `StatusCallback`.
+- [x] 2.2 In `internal/runner/runner.go`, immediately after `executionId`/`simulation_id` are resolved post-detonation, invoke `IdentityCallback` (nil-guarded like `reportStatus`) with executor name/type (derived as in `results/executor.go`), `execution_id`, and `simulation_id`.
+- [x] 2.3 In `runAssertions`, after each assertion newly matches, invoke `AssertionsCallback` with the current assertion set: matched → `passed=true`, not-yet-matched → `passed` omitted (pending). Fire only on a state change, not every poll tick.
+
+## 3. Web wiring
+
+- [x] 3.1 In `internal/web/scenarios.go`, wire `sc.IdentityCallback` to `runStore.UpdateScenarioIdentity(scenarioDBIDs[name], …)`, mirroring the existing `StatusCallback`→`UpdateScenarioPhase` block (nil/missing-id safe, log-on-error).
+- [x] 3.2 Wire `sc.AssertionsCallback` to marshal the partial assertions and call `runStore.UpdateScenarioAssertions(scenarioDBIDs[name], json)`, reusing the same assertion JSON shape produced by `buildScenarioResultRow`/`scenario_results.go`.
+- [x] 3.3 Confirm the terminal `CompleteScenarioResult` write still sets the authoritative `is_success`, full `assertions` (with terminal `passed=false` for unmatched), durations, and `discovered_alerts`, overwriting any mid-run partial values. (Unchanged: `CompleteScenarioResult` does `UPDATE … assertions = $11 …`, overwriting the partial column; `buildScenarioResultRow` still emits `assertionDTO` with `passed` always set.)
+
+## 4. Frontend
+
+- [x] 4.1 In `web/frontend/src/lib/components/ScenarioResult.svelte`, surface executor identity (executor name, simulation id, matcher) on `running` entries, not only `completed` ones.
+- [x] 4.2 Extend the assertion mini-bar to a tri-state: `passed===true` → success, `passed===false` → error, `passed` undefined/null → muted (pending); show the running n/m matched count.
+- [x] 4.3 Verify the `scenario-tracker` carries partial `assertions`/identity from the poll for `running` rows (entries currently keep `result` only for completed — adjust so a running entry can expose the partial `ScenarioResult` fields).
+
+## 5. Verification
+
+- [x] 5.1 Add/extend Go tests: `UpdateScenarioIdentity` and `UpdateScenarioAssertions` write only their columns and preserve `status='running'` (`TestRunStore_PartialScenarioUpdates` in `fakes_test.go`, pinning the contract the web wiring relies on — the production SQL is Postgres-bound, no DB harness exists); the runner fires `IdentityCallback` once post-detonation and `AssertionsCallback` on each new match (`TestRunnerFiresIdentityAndAssertionCallbacks`).
+- [x] 5.2 `go test ./...`, `mise run lint`, and frontend `npm run check` + `npm run build` all pass. (Go tests pass; frontend check = 0 errors; frontend build OK; changed Go packages lint clean = 0 issues. NOTE: `mise run lint` over the whole repo fails on a pre-existing `internal/parser/parser.go` goimports issue — a generated file untouched by this change.)
+- [x] 5.3 Manually verify against a running assessment: a `matching` scenario shows executor/IDs and a live "k/n matched" assertion bar that fills in before completion, and the final state matches today's completed view. (Verified by the user against a live Elastic deployment.)
diff --git a/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/.openspec.yaml b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/.openspec.yaml
new file mode 100644
index 0000000..a4ac4d7
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-23
diff --git a/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/design.md b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/design.md
new file mode 100644
index 0000000..0e11592
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/design.md
@@ -0,0 +1,62 @@
+## Context
+
+The frontend (`web/frontend`, SvelteKit + Tailwind v4) uses shadcn-svelte components that were generated from an older registry style. A controlled test of `npx shadcn-svelte@latest add pagination --overwrite --yes` (CLI v1.3.0) showed the current registry serves a different style ("nova"): it regenerated `button` with a different look (`destructive` solid → tinted, `rounded-md` → `rounded-lg`, default size `h-9` → `h-8`), introduced a `data-icon` spacing convention, referenced `cn-*` component classes absent from our `app.css`, and bumped `@lucide/svelte` `^1.17` → `^1.21` (pulling renamed icons like `more-horizontal`).
+
+Because of this drift, `add`/`update`/`--overwrite` cannot be used safely today, and the project is frozen on an undocumented style. The codebase places icons inside buttons with `class="mr-2 h-4 w-4"` rather than `data-icon`, so the convention change is cross-cutting across every route and dialog. The theme is the custom "ahsoca" palette (DM Sans / JetBrains Mono, status + attribution tokens, `animate-fade-up`/stagger, indicator-pulse) which must survive the migration.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Bring all 33 `ui/*` components onto the current registry style so future `add`/`update` are clean.
+- Adopt the `data-icon` convention and migrate all consumers.
+- Preserve the ahsoca theme identity and all project-specific component customizations.
+- Land with zero new `npm run check` / `mise run build` errors and no visual regressions in light or dark mode.
+
+**Non-Goals:**
+- No redesign of pages or new features — this is a style/library migration, not a visual redesign (the recent assessment/coverage redesigns stay as-is, only re-expressed on the new primitives).
+- No change to backend, API, or data shapes.
+- No switch of icon library, component framework, or Tailwind major version.
+
+## Decisions
+
+### Regenerate with the CLI, then re-apply customizations via diff review
+Use `npx shadcn-svelte@latest add <component> --overwrite` (or `update`) to regenerate each component, then inspect `git diff` and re-apply documented project customizations (e.g. `badge` `success` variant, custom `button` variants). Work on a dedicated branch with frequent commits so any single component can be reverted in isolation.
+- *Alternative considered*: hand-porting each component by reading the registry. Rejected — slower and error-prone vs. letting the CLI emit canonical output and reviewing the diff.
+- *Alternative considered*: re-`init` the whole project. Rejected — too blunt; would also rewrite `components.json`/theme and obscure what changed.
+
+### Treat the icon convention as a global, mechanical pass
+After `button` is on the new style, migrate icon usages from `class="mr-2 h-4 w-4"` to `data-icon="inline-start"|"inline-end"` repo-wide. Inventory occurrences with grep, convert per file, and verify spacing visually. Keep standalone icons (not inside a component slot) unchanged.
+- *Rationale*: doing this as one sweep avoids a mixed convention that is hard to reason about.
+
+### Reconcile theme tokens additively
+Keep the ahsoca tokens and custom utilities in `app.css`; add only what the new style requires (new CSS variables, `cn-*` component classes). Do not let the CLI overwrite `app.css`; merge by hand so the palette and custom animations are preserved.
+- *Rationale*: the theme is the product's identity and contains deliberate additions the registry doesn't know about.
+
+### Pin the dependency bump explicitly
+Bump `@lucide/svelte` to the version the new style needs in `package.json` as a reviewed change, and re-verify icon import paths that were renamed.
+
+### Sequence: foundation → primitives → composites → consumers → verify
+Migrate `button`/`badge` and theme first (highest blast radius), then the rest of `ui/*`, then sweep consumers, then verify build + visual pass. Order chosen so the icon sweep can rely on the final `button`.
+
+## Risks / Trade-offs
+
+- **Dropped customization during regeneration (e.g. `badge.success`)** → Maintain an explicit checklist of known customizations; re-apply and grep-verify each after regenerating its component.
+- **Silent visual regression (e.g. tinted vs. solid `destructive`)** → Per-component diff review plus a deliberate light/dark visual pass on key pages; treat emphasis changes on `destructive`/primary actions as blocking.
+- **Large, hard-to-review diff** → Commit per component (or small group); keep the consumer icon sweep in its own commit.
+- **`app.css` merge conflicts / lost custom tokens** → Never overwrite `app.css` via CLI; diff-review every token change.
+- **Dependency bump side effects (renamed/removed icons)** → Build after the bump; fix import paths flagged by the compiler before proceeding.
+
+## Migration Plan
+
+1. Branch off `main`; record the known-customizations checklist (button/badge variants, app.css additions) from current `git` state.
+2. Regenerate `button` + `badge`, re-apply variants, reconcile `app.css` tokens/`cn-*` classes, bump `@lucide/svelte`.
+3. Regenerate remaining `ui/*` components in small groups; re-apply any customizations; commit per group.
+4. Repo-wide icon-convention sweep across `routes/**` and `lib/components/**`.
+5. `npm run check` + `mise run build`; fix fallout.
+6. Visual pass in light and dark on dashboard, assessments (list + detail), rule coverage, connectors, scenarios, packs.
+7. **Rollback**: the work is branch-isolated and committed per component; revert offending commits or the whole branch without touching `main`.
+
+## Open Questions
+
+- Are there `button`/`badge` (or other) customizations beyond the `badge` `success` variant? Resolve by diffing current components against the old-style registry output before starting.
+- Does the new style expect any `app.css` changes beyond `cn-*` classes (e.g. new base-color variables)? Confirm against the regenerated components and the style's documented theme.
diff --git a/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/proposal.md b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/proposal.md
new file mode 100644
index 0000000..3431323
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/proposal.md
@@ -0,0 +1,29 @@
+## Why
+
+The frontend's shadcn-svelte components were generated from an older registry style. The current CLI (v1.3.0+) ships a different style ("nova") with restyled primitives, a new `data-icon` spacing convention, and updated theme expectations. Today `npx shadcn-svelte@latest add <c> --overwrite` is unusable: it silently restyles `button` (e.g. `destructive` flips from solid to tinted), bumps `@lucide/svelte`, and emits classes/icons we don't have. This blocks pulling in any new or updated component cleanly and leaves us pinned to a frozen, undocumented style. Migrating deliberately unblocks future component installs and brings us onto a supported baseline.
+
+## What Changes
+
+- Re-generate all 33 installed UI components (`web/frontend/src/lib/components/ui/*`) from the current shadcn-svelte registry style so `add`/`update`/`--overwrite` become safe going forward.
+- **BREAKING (internal)**: Adopt the new `data-icon="inline-start"|"inline-end"` convention for icons inside `Button` (and other components that document it), replacing the current `class="mr-2 h-4 w-4"` / `size`-on-icon pattern used across every page and dialog.
+- Reconcile `app.css` theme tokens with what the new style expects (any new CSS variables / utility classes such as the `cn-*` component classes the new components reference), while preserving the existing "ahsoca" palette, fonts (DM Sans / JetBrains Mono), and the custom additions (status/attribution tokens, `animate-fade-up`/`stagger`, indicator-pulse).
+- Preserve all project-specific component customizations (e.g. `badge` `success` variant, any custom `button` variants) by re-applying them on top of the regenerated base.
+- Bump `@lucide/svelte` to the version the new style requires and verify icon import paths (e.g. `ellipsis` vs `more-horizontal`).
+- Audit and update every consumer (`web/frontend/src/routes/**`, `web/frontend/src/lib/components/**`) so buttons, badges, and other restyled primitives render correctly under the new style — no visual regressions in light or dark mode.
+
+## Capabilities
+
+### New Capabilities
+- `frontend-design-system`: The shared shadcn-svelte component library, theme tokens, and icon/styling conventions that govern how the SvelteKit frontend is built — including which registry style is the baseline and the rules for adding/updating components.
+
+### Modified Capabilities
+<!-- No existing spec captures the frontend component library; nothing modified. -->
+
+## Impact
+
+- **Components**: all of `web/frontend/src/lib/components/ui/*` (33 components) regenerated; project-specific variants re-applied.
+- **Consumers**: every route under `web/frontend/src/routes/**` and shared components under `web/frontend/src/lib/components/**` that render `Button` with icons or use restyled primitives.
+- **Theme**: `web/frontend/src/app.css` (CSS variables, custom utilities) reconciled with the new style.
+- **Dependencies**: `@lucide/svelte` version bump in `web/frontend/package.json` + lockfile.
+- **Verification**: `mise run build`, `npm run check`, and a visual pass across pages in both themes.
+- **Risk**: visual regressions if a customization is dropped during regeneration; mitigated by per-component diff review and the recorded list of known customizations.
diff --git a/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/specs/frontend-design-system/spec.md b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/specs/frontend-design-system/spec.md
new file mode 100644
index 0000000..fd0c8b7
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/specs/frontend-design-system/spec.md
@@ -0,0 +1,71 @@
+## ADDED Requirements
+
+### Requirement: Current shadcn-svelte registry style as baseline
+
+The frontend's UI component library SHALL be generated from the current shadcn-svelte registry style supported by the pinned CLI version, such that every component under `web/frontend/src/lib/components/ui/` matches that style's structure, class names, and component-level CSS conventions.
+
+#### Scenario: Component matches current registry output
+
+- **WHEN** a component already present in the project is regenerated from the registry with the same name
+- **THEN** the on-disk file matches the registry's current-style output (modulo project-specific customizations and resolved import aliases) with no leftover constructs from the previous style
+
+#### Scenario: No undefined style classes
+
+- **WHEN** any UI component references a style utility or component class (e.g. `cn-*`)
+- **THEN** that class is defined by the project's theme/CSS so the component renders as the style intends
+
+### Requirement: Safe component install and update
+
+After migration, adding or updating components from the registry SHALL succeed without altering unrelated components or silently changing the design.
+
+#### Scenario: Overwrite-install an existing component is non-destructive
+
+- **WHEN** a maintainer runs the shadcn-svelte CLI to add or update an already-installed component with overwrite enabled
+- **THEN** the command completes and the regenerated component is consistent with the rest of the library, requiring only re-application of documented project-specific customizations
+
+#### Scenario: Adding a new component does not restyle others
+
+- **WHEN** a maintainer adds a new component that depends on existing components (e.g. a component depending on `button`)
+- **THEN** the existing dependency components are not visually or structurally changed by the operation
+
+### Requirement: Preservation of project customizations
+
+Regenerating components SHALL preserve all project-specific customizations, including custom variants and the project palette, fonts, and custom utilities.
+
+#### Scenario: Custom variants retained
+
+- **WHEN** the component library is migrated to the new style
+- **THEN** project-added variants (such as the `badge` `success` variant and any custom `button` variants) remain available and behave as before
+
+#### Scenario: Theme identity preserved
+
+- **WHEN** the theme tokens are reconciled with the new style
+- **THEN** the "ahsoca" palette, DM Sans / JetBrains Mono fonts, status and attribution tokens, and custom animations (`animate-fade-up`, stagger, indicator-pulse) are retained
+
+### Requirement: Icon convention inside components
+
+Icons rendered inside components that document an icon-spacing convention SHALL use that convention, and consumers across the app SHALL be updated accordingly.
+
+#### Scenario: Button icons use the documented convention
+
+- **WHEN** an icon is placed inside a `Button`
+- **THEN** it uses the new style's documented icon-spacing mechanism (e.g. `data-icon="inline-start"|"inline-end"`) rather than manual margin/size classes, and spacing renders correctly
+
+#### Scenario: All consumers migrated
+
+- **WHEN** the migration is complete
+- **THEN** no route or shared component still relies on the old manual icon-spacing pattern for icons inside components that provide the new convention
+
+### Requirement: No visual or functional regressions
+
+The migrated frontend SHALL build and type-check cleanly and SHALL render without visual regressions in both light and dark themes.
+
+#### Scenario: Build and type-check pass
+
+- **WHEN** the frontend is built and type-checked after migration
+- **THEN** `mise run build` and `npm run check` complete with no new errors attributable to the migration
+
+#### Scenario: Visual parity in both themes
+
+- **WHEN** key pages (dashboard, assessments list and detail, rule coverage, connectors, scenarios, packs) are reviewed in light and dark mode
+- **THEN** primitives such as buttons (including `destructive`), badges, inputs, and tables render correctly with intended emphasis and no broken spacing
diff --git a/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/tasks.md b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/tasks.md
new file mode 100644
index 0000000..b52f5bf
--- /dev/null
+++ b/openspec/changes/archive/2026-06-23-migrate-shadcn-svelte-style/tasks.md
@@ -0,0 +1,39 @@
+## 1. Preparation
+
+- [x] 1.1 Create a migration branch off `main` (isolated, revertible). (Branched off `ui/revamp` HEAD, not `main`, since this change depends on recent rule-coverage/pagination commits there.)
+- [x] 1.2 Confirm the shadcn-svelte CLI version and the registry style it resolves to; note expected differences from the current components.
+- [x] 1.3 Build a "known customizations" checklist by diffing current `ui/*` components against old-style registry output (capture `badge` `success` variant, any custom `button` variants, and any other deviations).
+- [x] 1.4 Snapshot current visual baseline (screenshots of key pages in light + dark) for later comparison.
+
+## 2. Foundation: theme + primitives
+
+- [x] 2.1 Regenerate `button` from the registry; review `git diff`.
+- [x] 2.2 Re-apply project `button` customizations from the checklist; verify variants/sizes still exported.
+- [x] 2.3 Regenerate `badge`; re-apply the `success` variant and any others; verify.
+- [x] 2.4 Reconcile `app.css`: add new style's required CSS variables and `cn-*` component classes; preserve ahsoca palette, fonts, status/attribution tokens, and custom animations (do NOT let the CLI overwrite `app.css`).
+- [x] 2.5 Bump `@lucide/svelte` to the version the new style requires; update `package.json` + lockfile; fix any renamed icon import paths surfaced by the build.
+
+## 3. Remaining components
+
+- [x] 3.1 Regenerate the remaining `ui/*` components in small groups, committing per group, re-applying any checklist customizations.
+- [x] 3.2 For each group, confirm no `cn-*` or other classes remain undefined in `app.css`.
+- [x] 3.3 Verify `pagination` (recently added) matches the new style and still satisfies the rule-coverage page usage.
+
+## 4. Consumer migration (icon convention)
+
+- [x] 4.1 Inventory all icon-in-component usages across `routes/**` and `lib/components/**` (grep for `mr-2`/`ml-2`/`h-4 w-4` icons inside `Button`).
+- [x] 4.2 Convert button icons to `data-icon="inline-start"|"inline-end"`, removing manual margin/size classes; leave standalone icons unchanged.
+- [x] 4.3 Update any other consumers affected by restyled primitives (sizes, radii, emphasis) so layouts still hold.
+
+## 5. Verification
+
+- [x] 5.1 `npm run check` passes with no new errors attributable to the migration.
+- [x] 5.2 `mise run build` (frontend + server) succeeds.
+- [x] 5.3 Visual pass in light AND dark on: dashboard, assessments list, assessment detail, rule coverage, connectors, scenarios, packs — confirm buttons (incl. `destructive`), badges, inputs, tables render with intended emphasis and correct spacing.
+- [x] 5.4 Confirm a clean `add`/`update --overwrite` of one already-installed component now leaves the rest of the library unchanged (validates the migration goal).
+- [x] 5.5 Update the project memory note that previously flagged `--overwrite` as incompatible to reflect the new baseline.
+
+## 6. Wrap-up
+
+- [x] 6.1 Open a PR summarizing the style migration, the `data-icon` convention change, and the dependency bump.
+- [x] 6.2 After merge, run `/opsx:archive` to archive this change.
diff --git a/openspec/changes/split-connectors-page/.openspec.yaml b/openspec/changes/archive/2026-06-23-split-connectors-page/.openspec.yaml
similarity index 100%
rename from openspec/changes/split-connectors-page/.openspec.yaml
rename to openspec/changes/archive/2026-06-23-split-connectors-page/.openspec.yaml
diff --git a/openspec/changes/split-connectors-page/design.md b/openspec/changes/archive/2026-06-23-split-connectors-page/design.md
similarity index 100%
rename from openspec/changes/split-connectors-page/design.md
rename to openspec/changes/archive/2026-06-23-split-connectors-page/design.md
diff --git a/openspec/changes/split-connectors-page/proposal.md b/openspec/changes/archive/2026-06-23-split-connectors-page/proposal.md
similarity index 100%
rename from openspec/changes/split-connectors-page/proposal.md
rename to openspec/changes/archive/2026-06-23-split-connectors-page/proposal.md
diff --git a/openspec/changes/split-connectors-page/specs/connectors/spec.md b/openspec/changes/archive/2026-06-23-split-connectors-page/specs/connectors/spec.md
similarity index 100%
rename from openspec/changes/split-connectors-page/specs/connectors/spec.md
rename to openspec/changes/archive/2026-06-23-split-connectors-page/specs/connectors/spec.md
diff --git a/openspec/changes/split-connectors-page/tasks.md b/openspec/changes/archive/2026-06-23-split-connectors-page/tasks.md
similarity index 100%
rename from openspec/changes/split-connectors-page/tasks.md
rename to openspec/changes/archive/2026-06-23-split-connectors-page/tasks.md
diff --git a/openspec/specs/assessment-retention/spec.md b/openspec/specs/assessment-retention/spec.md
new file mode 100644
index 0000000..54bbaae
--- /dev/null
+++ b/openspec/specs/assessment-retention/spec.md
@@ -0,0 +1,113 @@
+# Assessment Retention Specification
+
+## Purpose
+Bounds the storage footprint of assessment data by automatically deleting
+aged run artifacts. Two independent, admin-configurable retention policies run
+as background sweepers: a log-retention policy that prunes per-run JSONL log
+files while keeping the `runs` row, and an assessment-retention policy that
+purges whole runs (rows, results, log files, and collected NDJSON) once they
+age out. Settings live in `AppConfig` and are editable from the assessments
+page.
+
+## Requirements
+
+### Requirement: Retention Settings In AppConfig
+The system SHALL extend `AppConfig` with retention settings persisted in the
+`app_config` table and served by `GET /api/config` / `PUT /api/config`:
+`assessment_log_retention_enabled` (bool), `assessment_log_retention_days` (int),
+`assessment_retention_enabled` (bool), and `assessment_retention_days` (int).
+Defaults SHALL be `assessment_log_retention_enabled = true`,
+`assessment_log_retention_days = 7`, `assessment_retention_enabled = false`,
+`assessment_retention_days = 30`, backfilled by a migration aligned with
+`DefaultAppConfig()`.
+
+#### Scenario: Defaults when unset
+- **WHEN** no `app_config` row exists for the retention keys
+- **THEN** `GET /api/config` returns `assessment_log_retention_enabled = true`, `assessment_log_retention_days = 7`, `assessment_retention_enabled = false`, and `assessment_retention_days = 30`
+
+#### Scenario: Admin updates retention
+- **WHEN** a client sends `PUT /api/config` with `assessment_retention_enabled = true` and `assessment_retention_days = 14`
+- **THEN** both values are persisted and returned by a subsequent `GET /api/config`
+
+### Requirement: Retention Settings Validation
+The system SHALL reject `PUT /api/config` with HTTP 400 when
+`assessment_log_retention_days` or `assessment_retention_days` is less than 1, so
+retention cannot be set to a value that deletes data immediately.
+
+#### Scenario: Zero log retention rejected
+- **WHEN** a client sends `PUT /api/config` with `assessment_log_retention_days = 0`
+- **THEN** the response is HTTP 400 and the stored value is unchanged
+
+#### Scenario: Zero assessment retention rejected
+- **WHEN** a client sends `PUT /api/config` with `assessment_retention_days = 0`
+- **THEN** the response is HTTP 400 and the stored value is unchanged
+
+### Requirement: Log-Retention Sweeper
+The system SHALL run a background sweeper that periodically scans
+`<DataDir>/run-logs/` and deletes any `<runID>.jsonl` file whose last
+modification time is older than `assessment_log_retention_days`. The sweeper SHALL run
+once at startup and then on a fixed 1-hour interval, SHALL re-read `AppConfig`
+each tick, and SHALL be a no-op when `assessment_log_retention_enabled = false`.
+Deleting a log file SHALL NOT delete or modify the corresponding `runs` row.
+
+#### Scenario: Old log swept
+- **WHEN** a run's JSONL file was last modified longer ago than `assessment_log_retention_days` and log retention is enabled
+- **THEN** the sweeper deletes the file and leaves the `runs` row intact
+
+#### Scenario: Recent log retained
+- **WHEN** a run's JSONL file is newer than `assessment_log_retention_days`
+- **THEN** the sweeper leaves the file in place
+
+#### Scenario: Log retention disabled
+- **WHEN** `assessment_log_retention_enabled = false`
+- **THEN** the log sweeper deletes no files regardless of age
+
+### Requirement: Assessment-Retention Sweeper
+The system SHALL run a background sweeper that periodically deletes whole runs
+whose `created_at` is older than `assessment_retention_days`. For each expired
+run the system SHALL delete the `runs` row (cascading to `scenario_results`),
+the run's JSONL log file, and every collected `.ndjson` file referenced by that
+run's `scenario_results.collected_log_path`. The sweeper SHALL run once at
+startup and then on a fixed 1-hour interval, SHALL re-read `AppConfig` each
+tick, SHALL be a no-op when `assessment_retention_enabled = false`, and SHALL
+skip runs whose `status` is still `running`.
+
+#### Scenario: Old assessment purged
+- **WHEN** a completed run's `created_at` is older than `assessment_retention_days` and assessment retention is enabled
+- **THEN** the `runs` row, its `scenario_results`, its JSONL log file, and all of its collected `.ndjson` files are deleted
+
+#### Scenario: Recent assessment retained
+- **WHEN** a run's `created_at` is newer than `assessment_retention_days`
+- **THEN** the sweeper leaves the run and all its artifacts in place
+
+#### Scenario: Assessment retention disabled
+- **WHEN** `assessment_retention_enabled = false`
+- **THEN** the assessment sweeper deletes no runs regardless of age
+
+#### Scenario: Running assessment skipped
+- **WHEN** a run older than `assessment_retention_days` still has `status = "running"`
+- **THEN** the sweeper does not delete it
+
+### Requirement: Swept Logs Surface As Empty
+The system SHALL serve `GET /api/runs/{runId}/logs` with HTTP 200 and body `[]`
+when the run's JSONL file has been swept by log retention, reusing the existing
+missing-file behavior so an expired-log run is indistinguishable from one that
+never logged.
+
+#### Scenario: Logs requested after sweep
+- **WHEN** a client GETs logs for a run whose JSONL file was deleted by the log sweeper
+- **THEN** the response is HTTP 200 with body `[]`
+
+### Requirement: Configure Retention From Assessments Page
+The system SHALL present an "Assessment retention" control on the assessments
+page that opens a dialog for editing `assessment_log_retention_enabled`,
+`assessment_log_retention_days`, `assessment_retention_enabled`, and
+`assessment_retention_days`, and SHALL persist changes via `PUT /api/config`.
+
+#### Scenario: Open and save
+- **WHEN** an admin opens the dialog, enables assessment retention with a 14-day window, and saves
+- **THEN** the new values are sent to `PUT /api/config` and reflected on the page after save
+
+#### Scenario: Invalid input surfaced
+- **WHEN** an admin enters a retention period below 1 and saves
+- **THEN** the API returns HTTP 400 and the dialog surfaces the error without losing the entered values
diff --git a/openspec/specs/connectors/spec.md b/openspec/specs/connectors/spec.md
index 1925408..82b1c08 100644
--- a/openspec/specs/connectors/spec.md
+++ b/openspec/specs/connectors/spec.md
@@ -164,3 +164,17 @@ The system SHALL resolve a connector's credentials to the same set of environmen
 - **WHEN** a new connector type is added (e.g., a new cloud provider)
 - **THEN** the per-type resolution logic is added in exactly one place
 - **AND** both test-connection and scenario-run pick up the new type without requiring per-call-site changes
+
+### Requirement: UI–Backend Connector Type Parity
+The connector-administration UI SHALL provide create, edit, and delete capabilities for every connector type recognized by the backend. The per-type configuration form for each recognized type SHALL be implemented in exactly one frontend component file, so that adding a new backend-recognized type requires exactly one frontend file addition plus a registration in the create-dialog and edit-dialog dispatch tables — no other frontend changes SHALL be required for type parity.
+
+#### Scenario: Every recognized type is configurable in the UI
+- **WHEN** the backend recognizes connector types `elastic`, `datadog`, `aws`, `gcp`, `azure`, `kubernetes`, `ssh`
+- **THEN** the create dialog presents each as a selectable type
+- **AND** the edit dialog renders the appropriate form fields when a connector of that type is opened
+
+#### Scenario: Adding a new type is a one-component addition
+- **WHEN** a contributor adds a new connector type `X` to the backend
+- **THEN** adding UI support requires creating exactly one new component file `web/frontend/src/lib/components/connectors/XConnectorForm.svelte`
+- **AND** registering it in the create-dialog dispatch and the edit-dialog dispatch
+- **AND** no other frontend changes are required for the type to be fully configurable
diff --git a/openspec/specs/frontend-design-system/spec.md b/openspec/specs/frontend-design-system/spec.md
new file mode 100644
index 0000000..924bfe4
--- /dev/null
+++ b/openspec/specs/frontend-design-system/spec.md
@@ -0,0 +1,82 @@
+# Frontend Design System Specification
+
+## Purpose
+Defines how the SvelteKit frontend's shadcn-svelte component library is
+generated, installed, updated, and customized. It pins the library to the
+current shadcn-svelte registry style, guarantees that component install/update
+operations are safe and non-destructive, preserves project-specific
+customizations (palette, fonts, custom variants, animations), establishes the
+in-component icon convention, and requires the migrated frontend to build,
+type-check, and render without regressions.
+
+## Requirements
+
+### Requirement: Current shadcn-svelte registry style as baseline
+
+The frontend's UI component library SHALL be generated from the current shadcn-svelte registry style supported by the pinned CLI version, such that every component under `web/frontend/src/lib/components/ui/` matches that style's structure, class names, and component-level CSS conventions.
+
+#### Scenario: Component matches current registry output
+
+- **WHEN** a component already present in the project is regenerated from the registry with the same name
+- **THEN** the on-disk file matches the registry's current-style output (modulo project-specific customizations and resolved import aliases) with no leftover constructs from the previous style
+
+#### Scenario: No undefined style classes
+
+- **WHEN** any UI component references a style utility or component class (e.g. `cn-*`)
+- **THEN** that class is defined by the project's theme/CSS so the component renders as the style intends
+
+### Requirement: Safe component install and update
+
+After migration, adding or updating components from the registry SHALL succeed without altering unrelated components or silently changing the design.
+
+#### Scenario: Overwrite-install an existing component is non-destructive
+
+- **WHEN** a maintainer runs the shadcn-svelte CLI to add or update an already-installed component with overwrite enabled
+- **THEN** the command completes and the regenerated component is consistent with the rest of the library, requiring only re-application of documented project-specific customizations
+
+#### Scenario: Adding a new component does not restyle others
+
+- **WHEN** a maintainer adds a new component that depends on existing components (e.g. a component depending on `button`)
+- **THEN** the existing dependency components are not visually or structurally changed by the operation
+
+### Requirement: Preservation of project customizations
+
+Regenerating components SHALL preserve all project-specific customizations, including custom variants and the project palette, fonts, and custom utilities.
+
+#### Scenario: Custom variants retained
+
+- **WHEN** the component library is migrated to the new style
+- **THEN** project-added variants (such as the `badge` `success` variant and any custom `button` variants) remain available and behave as before
+
+#### Scenario: Theme identity preserved
+
+- **WHEN** the theme tokens are reconciled with the new style
+- **THEN** the "ahsoca" palette, DM Sans / JetBrains Mono fonts, status and attribution tokens, and custom animations (`animate-fade-up`, stagger, indicator-pulse) are retained
+
+### Requirement: Icon convention inside components
+
+Icons rendered inside components that document an icon-spacing convention SHALL use that convention, and consumers across the app SHALL be updated accordingly.
+
+#### Scenario: Button icons use the documented convention
+
+- **WHEN** an icon is placed inside a `Button`
+- **THEN** it uses the new style's documented icon-spacing mechanism (e.g. `data-icon="inline-start"|"inline-end"`) rather than manual margin/size classes, and spacing renders correctly
+
+#### Scenario: All consumers migrated
+
+- **WHEN** the migration is complete
+- **THEN** no route or shared component still relies on the old manual icon-spacing pattern for icons inside components that provide the new convention
+
+### Requirement: No visual or functional regressions
+
+The migrated frontend SHALL build and type-check cleanly and SHALL render without visual regressions in both light and dark themes.
+
+#### Scenario: Build and type-check pass
+
+- **WHEN** the frontend is built and type-checked after migration
+- **THEN** `mise run build` and `npm run check` complete with no new errors attributable to the migration
+
+#### Scenario: Visual parity in both themes
+
+- **WHEN** key pages (dashboard, assessments list and detail, rule coverage, connectors, scenarios, packs) are reviewed in light and dark mode
+- **THEN** primitives such as buttons (including `destructive`), badges, inputs, and tables render correctly with intended emphasis and no broken spacing
diff --git a/openspec/specs/runs/spec.md b/openspec/specs/runs/spec.md
index 8cfd630..7a6b802 100644
--- a/openspec/specs/runs/spec.md
+++ b/openspec/specs/runs/spec.md
@@ -38,10 +38,39 @@ The system SHALL track each scenario as a row in `scenario_results` with
 populated during `running` (e.g., `"warmup"`, `"detonating"`, `"matching"`,
 `"collecting"`, `"cleanup"`, `"queued"`).
 
+The system SHALL populate the row's executor identity — `executor_name`,
+`executor_type`, `execution_id`, and `simulation_id` — as soon as detonation
+returns these values, while the row is still `running`, rather than only at
+completion. When a detonator does not produce a `simulation_id`, that field
+SHALL remain empty without blocking the other identity fields.
+
+While in the `matching` phase, the system SHALL persist per-assertion results
+incrementally as the matcher resolves them, so the row's `assertions` reflect
+the current passed/pending state before the scenario completes. An assertion
+not yet matched SHALL be represented as not-yet-passed (no terminal failure is
+recorded until completion).
+
+These incremental writes SHALL NOT alter the terminal completion write: when a
+scenario completes, `status` becomes `completed`, `phase` is cleared, and the
+final `is_success`, `assertions`, durations, and `discovered_alerts` are
+written as they are today.
+
 #### Scenario: Phase transitions
 - **WHEN** a scenario enters the matching phase
 - **THEN** its `scenario_results` row has `status = "running"` and `phase = "matching"`
 
+#### Scenario: Executor identity exposed during run
+- **WHEN** a scenario has detonated and is in the `matching` phase
+- **THEN** `GET /api/runs/{runId}` returns that scenario with `status = "running"` and non-empty `executor_name`, `executor_type`, and `execution_id`
+
+#### Scenario: Assertion progress exposed during matching
+- **WHEN** a scenario expecting 3 assertions has matched 2 of them and is still matching
+- **THEN** the scenario's `assertions` in `GET /api/runs/{runId}` show 2 passed and 1 not-yet-passed while `status = "running"`
+
+#### Scenario: Completion write unchanged
+- **WHEN** a scenario finishes after its identity and partial assertions were written mid-run
+- **THEN** the final row has `status = "completed"`, `phase = null`, and `is_success` plus the full `assertions` and `discovered_alerts` set, with no stale `running`-phase values
+
 ### Requirement: Atomic Counter Increments
 The system SHALL update run counters with atomic SQL increments
 (`succeeded = succeeded + $2, failed = failed + $3`) rather than full
diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index 38af0a0..0640672 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -13,7 +13,7 @@
 				"@codemirror/theme-one-dark": "^6.1.3",
 				"@codemirror/view": "6.43.0",
 				"@internationalized/date": "3.12.1",
-				"@lucide/svelte": "^1.17.0",
+				"@lucide/svelte": "^1.21.0",
 				"@sveltejs/adapter-auto": "7.0.1",
 				"@sveltejs/adapter-static": "3.0.10",
 				"@sveltejs/kit": "2.60.1",
@@ -28,14 +28,16 @@
 				"mode-watcher": "^1.1.0",
 				"prettier": "3.8.3",
 				"prettier-plugin-svelte": "3.5.2",
+				"shadcn-svelte": "^1.3.0",
 				"svelte": "5.55.7",
 				"svelte-check": "4.4.8",
 				"svelte-sonner": "1.1.1",
 				"tailwind-merge": "3.6.0",
 				"tailwind-variants": "3.2.2",
 				"tailwindcss": "4.3.0",
+				"tw-animate-css": "^1.4.0",
 				"typescript": "5.9.3",
-				"vaul-svelte": "1.0.0-next.7",
+				"vaul-svelte": "^1.0.0-next.7",
 				"vite": "8.0.14"
 			}
 		},
@@ -318,9 +320,9 @@
 			}
 		},
 		"node_modules/@lucide/svelte": {
-			"version": "1.17.0",
-			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.17.0.tgz",
-			"integrity": "sha512-q06YCFBN5CO8cd1ADmLCxWRVMVb7xxvHzqC0lvNoxGa+FLW6Cd1Y1AOxgbQk4Iwe68vkAMCRveNHint4WoaVKg==",
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.21.0.tgz",
+			"integrity": "sha512-MEv//A7Jv3kHukZowv/DWp1MAtUzJKYwtJsmnQ7X98lCgtac3z3NbaToDl3Q6jO3gS9sougFpcD+t+YuxOkRMw==",
 			"dev": true,
 			"license": "ISC",
 			"peerDependencies": {
@@ -1175,6 +1177,16 @@
 				"@codemirror/view": "^6.0.0"
 			}
 		},
+		"node_modules/commander": {
+			"version": "14.0.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+			"integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -1752,6 +1764,13 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/node-fetch-native": {
+			"version": "1.6.7",
+			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
+			"integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/obug": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -1932,6 +1951,25 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/shadcn-svelte": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/shadcn-svelte/-/shadcn-svelte-1.3.0.tgz",
+			"integrity": "sha512-Pd4ICWTkTks/b2YU4c9vF2XsX1x5HFPRl5bKszS1LcnWS83x+7T4WiIvbWz8Qh9knkcGZ+SCz1+Dmhdq+AYooA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^14.0.0",
+				"node-fetch-native": "^1.6.4",
+				"postcss": "^8.5.5",
+				"tailwind-merge": "^3.0.0"
+			},
+			"bin": {
+				"shadcn-svelte": "dist/index.mjs"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
 		"node_modules/sirv": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
@@ -2170,6 +2208,16 @@
 			"dev": true,
 			"license": "0BSD"
 		},
+		"node_modules/tw-animate-css": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+			"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Wombosvideo"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.9.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
diff --git a/web/frontend/package.json b/web/frontend/package.json
index eabcacd..f530f7b 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -19,7 +19,7 @@
 		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "6.43.0",
 		"@internationalized/date": "3.12.1",
-		"@lucide/svelte": "^1.17.0",
+		"@lucide/svelte": "^1.21.0",
 		"@sveltejs/adapter-auto": "7.0.1",
 		"@sveltejs/adapter-static": "3.0.10",
 		"@sveltejs/kit": "2.60.1",
@@ -34,14 +34,16 @@
 		"mode-watcher": "^1.1.0",
 		"prettier": "3.8.3",
 		"prettier-plugin-svelte": "3.5.2",
+		"shadcn-svelte": "^1.3.0",
 		"svelte": "5.55.7",
 		"svelte-check": "4.4.8",
 		"svelte-sonner": "1.1.1",
 		"tailwind-merge": "3.6.0",
 		"tailwind-variants": "3.2.2",
 		"tailwindcss": "4.3.0",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "5.9.3",
-		"vaul-svelte": "1.0.0-next.7",
+		"vaul-svelte": "^1.0.0-next.7",
 		"vite": "8.0.14"
 	}
 }
diff --git a/web/frontend/src/app.css b/web/frontend/src/app.css
index beece28..413e1b4 100644
--- a/web/frontend/src/app.css
+++ b/web/frontend/src/app.css
@@ -1,68 +1,18 @@
 @import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn-svelte/tailwind.css';
 
 @custom-variant dark (&:is(.dark *));
 
-/* ── data-* state variants (bits-ui) ── */
-@custom-variant data-open {
-	&:where([data-state='open']),
-	&:where([data-open]:not([data-open='false'])) {
-		@slot;
-	}
-}
-
-@custom-variant data-closed {
-	&:where([data-state='closed']),
-	&:where([data-closed]:not([data-closed='false'])) {
-		@slot;
-	}
-}
-
-@custom-variant data-checked {
-	&:where([data-state='checked']),
-	&:where([data-checked]:not([data-checked='false'])) {
-		@slot;
-	}
-}
-
-@custom-variant data-unchecked {
-	&:where([data-state='unchecked']),
-	&:where([data-unchecked]:not([data-unchecked='false'])) {
-		@slot;
-	}
-}
-
+/* data-* state variants (data-open/closed/checked/unchecked/disabled/active/
+   horizontal/vertical), no-scrollbar, and accordion keyframes are provided by
+   shadcn-svelte/tailwind.css. data-selected is the one variant it omits. */
 @custom-variant data-selected {
 	&:where([data-selected]) {
 		@slot;
 	}
 }
 
-@custom-variant data-disabled {
-	&:where([data-disabled='true']),
-	&:where([data-disabled]:not([data-disabled='false'])) {
-		@slot;
-	}
-}
-
-@custom-variant data-active {
-	&:where([data-state='active']),
-	&:where([data-active]:not([data-active='false'])) {
-		@slot;
-	}
-}
-
-@custom-variant data-horizontal {
-	&:where([data-orientation='horizontal']) {
-		@slot;
-	}
-}
-
-@custom-variant data-vertical {
-	&:where([data-orientation='vertical']) {
-		@slot;
-	}
-}
-
 /* ── Light theme (ahsoca palette) ── */
 :root {
 	--radius: 0.65rem;
@@ -273,16 +223,8 @@
 	}
 }
 
-/* ── Utilities ── */
-@utility no-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
 /* ── Keyframes ── */
+/* (no-scrollbar utility and accordion keyframes come from shadcn-svelte/tailwind.css) */
 @keyframes fade-up {
 	from {
 		opacity: 0;
@@ -343,24 +285,6 @@
 	}
 }
 
-@keyframes accordion-down {
-	from {
-		height: 0;
-	}
-	to {
-		height: var(--bits-accordion-content-height);
-	}
-}
-
-@keyframes accordion-up {
-	from {
-		height: var(--bits-accordion-content-height);
-	}
-	to {
-		height: 0;
-	}
-}
-
 /* ── Animation utilities ── */
 .animate-fade-up {
 	animation: fade-up 0.4s ease-out both;
diff --git a/web/frontend/src/lib/components/ExpectationRow.svelte b/web/frontend/src/lib/components/ExpectationRow.svelte
index dc18cb2..166b0e0 100644
--- a/web/frontend/src/lib/components/ExpectationRow.svelte
+++ b/web/frontend/src/lib/components/ExpectationRow.svelte
@@ -111,7 +111,7 @@
 								aria-expanded={alertNameComboboxOpen}
 							>
 								<span class="truncate">{alertNameLabel()}</span>
-								<ChevronsUpDownIcon class="ml-2 shrink-0 opacity-50" size={16} />
+								<ChevronsUpDownIcon data-icon="inline-end" class="opacity-50" />
 							</Button>
 						{/snippet}
 					</Popover.Trigger>
diff --git a/web/frontend/src/lib/components/NewAssessmentDialog.svelte b/web/frontend/src/lib/components/NewAssessmentDialog.svelte
index b43cc49..1a80aaa 100644
--- a/web/frontend/src/lib/components/NewAssessmentDialog.svelte
+++ b/web/frontend/src/lib/components/NewAssessmentDialog.svelte
@@ -81,7 +81,6 @@
 			running = false;
 		}
 	}
-
 </script>
 
 <Dialog.Root bind:open>
@@ -185,8 +184,8 @@
 					<div class="rounded-md border border-border bg-muted/30 p-3">
 						<p class="text-xs text-muted-foreground">
 							{#if selectedScenarioType === 'explore'}
-								Explore mode: searches all alerts for indicators instead of matching specific
-								rules. Waits for the full timeout to discover all triggered alerts.
+								Explore mode: searches all alerts for indicators instead of matching specific rules.
+								Waits for the full timeout to discover all triggered alerts.
 							{:else}
 								Collect mode: collects logs after detonation for analysis. Waits for the timeout
 								period before collecting.
diff --git a/web/frontend/src/lib/components/NewScenarioDialog.svelte b/web/frontend/src/lib/components/NewScenarioDialog.svelte
index 5f14f80..1aaff9e 100644
--- a/web/frontend/src/lib/components/NewScenarioDialog.svelte
+++ b/web/frontend/src/lib/components/NewScenarioDialog.svelte
@@ -28,7 +28,8 @@
 		{
 			value: 'explore',
 			title: 'Explore',
-			description: 'Run simulations and discover all triggered alerts without specifying expected rules.',
+			description:
+				'Run simulations and discover all triggered alerts without specifying expected rules.',
 			icon: SearchIcon,
 			iconClass: 'text-attr-identity'
 		},
diff --git a/web/frontend/src/lib/components/PackCard.svelte b/web/frontend/src/lib/components/PackCard.svelte
index 30f6ab6..214ab4f 100644
--- a/web/frontend/src/lib/components/PackCard.svelte
+++ b/web/frontend/src/lib/components/PackCard.svelte
@@ -124,7 +124,9 @@
 
 	<!-- header -->
 	<div class="flex items-start gap-3">
-		<div class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+		<div
+			class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"
+		>
 			<PackageIcon class="size-5" />
 		</div>
 		<div class="min-w-0 flex-1">
@@ -249,7 +251,8 @@
 	<div class="flex items-center gap-2 border-t pt-4 text-xs text-muted-foreground">
 		{#if pack.installedBy && pack.installedBy !== 'anonymous'}
 			<Tooltip.Root>
-				<Tooltip.Trigger class="cursor-default">{formatUserEmail(pack.installedBy)}</Tooltip.Trigger>
+				<Tooltip.Trigger class="cursor-default">{formatUserEmail(pack.installedBy)}</Tooltip.Trigger
+				>
 				<Tooltip.Content>{pack.installedBy}</Tooltip.Content>
 			</Tooltip.Root>
 			<span aria-hidden="true">·</span>
diff --git a/web/frontend/src/lib/components/PackSimulationsSheet.svelte b/web/frontend/src/lib/components/PackSimulationsSheet.svelte
index e514609..309d7dc 100644
--- a/web/frontend/src/lib/components/PackSimulationsSheet.svelte
+++ b/web/frontend/src/lib/components/PackSimulationsSheet.svelte
@@ -132,7 +132,13 @@
 					<!-- Drill-down: Simulation Detail -->
 					<div class="px-6 pt-6 pb-4 border-b border-border">
 						<div class="flex items-center gap-2 mb-3">
-							<Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={backToList} aria-label="Back to list">
+							<Button
+								variant="ghost"
+								size="sm"
+								class="h-7 w-7 p-0"
+								onclick={backToList}
+								aria-label="Back to list"
+							>
 								<ArrowLeftIcon class="size-4" />
 							</Button>
 							<span class="text-xs text-muted-foreground">Back to list</span>
@@ -323,7 +329,13 @@
 					<!-- Drill-down: Template Detail -->
 					<div class="px-6 pt-6 pb-4 border-b border-border">
 						<div class="flex items-center gap-2 mb-3">
-							<Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={backToList} aria-label="Back to list">
+							<Button
+								variant="ghost"
+								size="sm"
+								class="h-7 w-7 p-0"
+								onclick={backToList}
+								aria-label="Back to list"
+							>
 								<ArrowLeftIcon class="size-4" />
 							</Button>
 							<span class="text-xs text-muted-foreground">Back to list</span>
diff --git a/web/frontend/src/lib/components/RecentScenariosSection.svelte b/web/frontend/src/lib/components/RecentScenariosSection.svelte
index dbca713..02f90d4 100644
--- a/web/frontend/src/lib/components/RecentScenariosSection.svelte
+++ b/web/frontend/src/lib/components/RecentScenariosSection.svelte
@@ -24,7 +24,10 @@
 						<div class="min-w-0 flex-1">
 							<div class="flex items-center gap-2">
 								<span class="text-sm font-medium truncate">{scenario.name}</span>
-								<Badge variant={scenarioTypeVariant(scenario.type)} class="text-[10px] px-1.5 py-0 shrink-0">
+								<Badge
+									variant={scenarioTypeVariant(scenario.type)}
+									class="text-[10px] px-1.5 py-0 shrink-0"
+								>
 									{scenario.type || 'standard'}
 								</Badge>
 							</div>
diff --git a/web/frontend/src/lib/components/ScenarioEditor.svelte b/web/frontend/src/lib/components/ScenarioEditor.svelte
index 6ed18a2..b51c57a 100644
--- a/web/frontend/src/lib/components/ScenarioEditor.svelte
+++ b/web/frontend/src/lib/components/ScenarioEditor.svelte
@@ -32,13 +32,7 @@
 		lintScenario
 	} from '$lib/api/client';
 	import { scenarioTypeVariant } from '$lib/utils/format';
-	import type {
-		Pack,
-		PackManifest,
-		ElasticRule,
-		Connector,
-		ScenarioType
-	} from '$lib/types';
+	import type { Pack, PackManifest, ElasticRule, Connector, ScenarioType } from '$lib/types';
 
 	type SaveOptions = { run?: boolean };
 
@@ -61,11 +55,7 @@
 		initialTarget?: FormTarget;
 		initialYaml?: string;
 		initialBuilderSupported?: boolean;
-		onsave: (
-			name: string,
-			yaml: string,
-			options: SaveOptions
-		) => Promise<void>;
+		onsave: (name: string, yaml: string, options: SaveOptions) => Promise<void>;
 		oncancel: () => void;
 		onschedule?: () => void;
 	} = $props();
@@ -76,9 +66,7 @@
 	let name = $state(initialName);
 	/* svelte-ignore state_referenced_locally */
 	let scenarios = $state<FormScenario[]>(
-		initialScenarios && initialScenarios.length > 0
-			? initialScenarios
-			: [seedScenario(type)]
+		initialScenarios && initialScenarios.length > 0 ? initialScenarios : [seedScenario(type)]
 	);
 	/* svelte-ignore state_referenced_locally */
 	let target = $state<FormTarget>(initialTarget ?? createEmptyTarget());
@@ -225,11 +213,7 @@
 		const source = scenarios[index];
 		const copy = $state.snapshot(source) as FormScenario;
 		copy.name = source.name ? `${source.name} (copy)` : '';
-		scenarios = [
-			...scenarios.slice(0, index + 1),
-			copy,
-			...scenarios.slice(index + 1)
-		];
+		scenarios = [...scenarios.slice(0, index + 1), copy, ...scenarios.slice(index + 1)];
 		markDirty();
 	}
 
@@ -320,7 +304,6 @@
 		pendingNavigate = null;
 		fn?.();
 	}
-
 </script>
 
 <div class="flex flex-col h-full">
@@ -337,11 +320,16 @@
 			<div class="ml-auto flex items-center gap-2">
 				{#if mode === 'edit' && onschedule}
 					<Button variant="ghost" size="sm" onclick={onschedule}>
-						<CalendarIcon class="h-4 w-4 mr-1.5" />
+						<CalendarIcon data-icon="inline-start" />
 						Schedule
 					</Button>
 				{/if}
-				<Button variant="outline" size="sm" onclick={handleCancel} disabled={saving || savingAndRunning}>
+				<Button
+					variant="outline"
+					size="sm"
+					onclick={handleCancel}
+					disabled={saving || savingAndRunning}
+				>
 					Cancel
 				</Button>
 				<Button
@@ -351,9 +339,9 @@
 					disabled={saving || savingAndRunning || !name.trim()}
 				>
 					{#if savingAndRunning}
-						<LoaderIcon class="h-4 w-4 mr-1.5 animate-spin" />
+						<LoaderIcon data-icon="inline-start" class="animate-spin" />
 					{:else}
-						<PlayIcon class="h-4 w-4 mr-1.5" />
+						<PlayIcon data-icon="inline-start" />
 					{/if}
 					Save & Run
 				</Button>
@@ -396,7 +384,10 @@
 					<div class="inline-flex rounded-md border bg-muted/40 p-0.5">
 						<button
 							type="button"
-							class="inline-flex items-center gap-1.5 rounded px-3 py-1 text-xs font-medium transition-colors {editorMode === 'builder' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}"
+							class="inline-flex items-center gap-1.5 rounded px-3 py-1 text-xs font-medium transition-colors {editorMode ===
+							'builder'
+								? 'bg-background shadow-sm text-foreground'
+								: 'text-muted-foreground hover:text-foreground'}"
 							onclick={switchToBuilder}
 						>
 							<WrenchIcon class="h-3.5 w-3.5" />
@@ -404,7 +395,10 @@
 						</button>
 						<button
 							type="button"
-							class="inline-flex items-center gap-1.5 rounded px-3 py-1 text-xs font-medium transition-colors {editorMode === 'yaml' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}"
+							class="inline-flex items-center gap-1.5 rounded px-3 py-1 text-xs font-medium transition-colors {editorMode ===
+							'yaml'
+								? 'bg-background shadow-sm text-foreground'
+								: 'text-muted-foreground hover:text-foreground'}"
 							onclick={switchToYaml}
 						>
 							<CodeIcon class="h-3.5 w-3.5" />
@@ -436,7 +430,9 @@
 									{@const available = connectors.filter((c) => c.type === cloudType && c.enabled)}
 									{#if available.length > 0}
 										<div>
-											<Label class="font-mono text-[10px] uppercase tracking-wider text-muted-foreground mb-1 block">
+											<Label
+												class="font-mono text-[10px] uppercase tracking-wider text-muted-foreground mb-1 block"
+											>
 												{cloudType}
 											</Label>
 											<Select.Root
@@ -480,17 +476,14 @@
 						{/each}
 
 						<Button variant="outline" class="w-full" onclick={addScenario}>
-							<PlusIcon size={16} class="mr-2" />
+							<PlusIcon data-icon="inline-start" />
 							Add Scenario
 						</Button>
 					</div>
 				{/if}
 			{:else}
 				<div class="rounded-lg border overflow-hidden">
-					<YamlEditor
-						bind:value={yamlText}
-						onchange={() => markDirty()}
-					/>
+					<YamlEditor bind:value={yamlText} onchange={() => markDirty()} />
 				</div>
 			{/if}
 		</div>
diff --git a/web/frontend/src/lib/components/ScenarioResult.svelte b/web/frontend/src/lib/components/ScenarioResult.svelte
index 753890b..f8323bb 100644
--- a/web/frontend/src/lib/components/ScenarioResult.svelte
+++ b/web/frontend/src/lib/components/ScenarioResult.svelte
@@ -7,6 +7,7 @@
 	import RunLog from './RunLog.svelte';
 	import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
 	import DownloadIcon from '@lucide/svelte/icons/download';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { getCollectedLogsUrl } from '$lib/api/client';
 
 	let { entry, logs = [] }: { entry: ScenarioEntry; logs?: RunLogEntry[] } = $props();
@@ -22,7 +23,7 @@
 
 	let assertionCounts = $derived.by(() => {
 		if (!result?.assertions || result.assertions.length === 0) return null;
-		const passed = result.assertions.filter((a) => a.passed).length;
+		const passed = result.assertions.filter((a) => a.passed === true).length;
 		return { passed, total: result.assertions.length };
 	});
 
@@ -35,169 +36,260 @@
 		collecting: 'Collecting',
 		cleanup: 'Cleanup'
 	};
+
+	// Timeline node accent driven by terminal status.
+	const nodeState = $derived(
+		entry.status === 'completed' && result ? (result.isSuccess ? 'pass' : 'fail') : entry.status
+	);
 </script>
 
-<Collapsible.Root bind:open class="min-w-0 overflow-hidden">
-	<Collapsible.Trigger class="w-full">
-		<div
-			class="flex items-center justify-between rounded-md border border-border p-3 hover:bg-accent/50 transition-colors"
-		>
-			<div class="flex items-center gap-3 min-w-0">
-				<span class="text-sm font-medium truncate">{entry.name}</span>
-				{#if result?.simulationId}
-					<span class="text-xs text-muted-foreground font-mono truncate">{result.simulationId}</span
-					>
-				{/if}
+<!-- Mini assertion bar: one tick per assertion, capped before it gets noisy.
+	 Tri-state: passed → success, failed → error, pending (undefined) → muted. -->
+{#snippet assertionBar()}
+	{#if assertionCounts}
+		{#if assertionCounts.total <= 8}
+			<div class="hidden items-center gap-1.5 sm:flex">
+				<div class="flex gap-[2px]">
+					{#each result?.assertions ?? [] as a}
+						<span
+							class="h-4 w-[6px] rounded-[2px] {a.passed === true
+								? 'bg-status-success'
+								: a.passed === false
+									? 'bg-status-error'
+									: 'bg-muted-foreground/30'}"
+						></span>
+					{/each}
+				</div>
+				<span class="font-mono text-xs text-muted-foreground"
+					>{assertionCounts.passed}/{assertionCounts.total}</span
+				>
 			</div>
-			<div class="flex items-center gap-3 shrink-0">
-				{#if entry.status === 'completed' && result}
-					<span class="text-xs text-muted-foreground">{result.executorName}</span>
-					{#if result.discoveredAlerts}
-						<span class="text-xs text-muted-foreground">
-							{result.discoveredAlerts.length} alert{result.discoveredAlerts.length !== 1 ? 's' : ''} discovered
-						</span>
-						<Badge variant="secondary">explore</Badge>
-					{:else if assertionCounts}
-						<span class="text-xs text-muted-foreground">
-							{assertionCounts.passed}/{assertionCounts.total} assertions
+		{:else}
+			<span class="font-mono text-xs text-muted-foreground"
+				>{assertionCounts.passed}/{assertionCounts.total} assertions</span
+			>
+		{/if}
+	{/if}
+{/snippet}
+
+<div class="relative">
+	<!-- Timeline marker sitting on the rail -->
+	<span
+		class="absolute -left-8 top-3.5 z-10 grid h-5 w-5 place-items-center rounded-full border-2 bg-background
+			{nodeState === 'pass'
+			? 'border-status-success/50'
+			: nodeState === 'fail'
+				? 'border-status-error/60'
+				: nodeState === 'running'
+					? 'border-status-processing/60 animate-indicator-pulse'
+					: 'border-border'}"
+	>
+		<span
+			class="h-2 w-2 rounded-full
+				{nodeState === 'pass'
+				? 'bg-status-success'
+				: nodeState === 'fail'
+					? 'bg-status-error'
+					: nodeState === 'running'
+						? 'bg-status-processing'
+						: 'bg-muted-foreground/40'}"
+		></span>
+	</span>
+
+	<Collapsible.Root bind:open class="min-w-0 overflow-hidden">
+		<Collapsible.Trigger class="w-full">
+			<div
+				class="flex items-center justify-between gap-4 rounded-md border border-l-2 border-border p-3 text-left transition-colors hover:bg-accent/50
+					{open ? 'rounded-b-none' : ''}
+					{nodeState === 'fail' ? 'border-l-status-error/70' : 'border-l-border'}"
+			>
+				<div class="flex min-w-0 items-center gap-2">
+					<ChevronRightIcon
+						class="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200 {open
+							? 'rotate-90'
+							: ''}"
+					/>
+					<div class="flex min-w-0 flex-col gap-0.5">
+						<span class="truncate text-sm font-medium">{entry.name}</span>
+						<span
+							class="flex flex-wrap items-center gap-x-2 font-mono text-xs text-muted-foreground"
+						>
+							{#if result?.executorName}
+								<span>{result.executorName}</span>
+								{#if result.simulationId}
+									<span class="text-muted-foreground/50">·</span>
+									<span class="truncate">{result.simulationId}</span>
+								{/if}
+								{#if matcherNames.length > 0}
+									<span class="text-muted-foreground/50">·</span>
+									<span>{matcherNames.join(', ')}</span>
+								{/if}
+							{/if}
 						</span>
+					</div>
+				</div>
+
+				<div class="flex shrink-0 items-center gap-3">
+					{#if entry.status === 'completed' && result}
+						{#if result.discoveredAlerts}
+							<span class="font-mono text-xs text-muted-foreground">
+								{result.discoveredAlerts.length} alert{result.discoveredAlerts.length !== 1
+									? 's'
+									: ''}
+							</span>
+							<Badge variant="secondary">explore</Badge>
+						{:else if assertionCounts}
+							{@render assertionBar()}
+						{/if}
+						<span class="font-mono text-xs text-muted-foreground tabular-nums"
+							>{result.durationSecs.toFixed(1)}s</span
+						>
+						<Badge variant={result.isSuccess ? 'success' : 'destructive'}>
+							{result.isSuccess ? 'passed' : 'failed'}
+						</Badge>
+					{:else if entry.status === 'running'}
+						{#if assertionCounts}
+							{@render assertionBar()}
+						{/if}
+						{#if entry.phase}
+							<Badge variant="secondary" class="flex items-center gap-1.5">
+								<LoaderCircleIcon class="h-3 w-3 animate-spin" />
+								{phaseLabels[entry.phase] || entry.phase}
+							</Badge>
+						{/if}
+					{:else if entry.status === 'pending'}
+						<Badge variant="outline">Pending</Badge>
 					{/if}
-					{#if matcherNames.length > 0}
-						<span class="text-xs text-muted-foreground">{matcherNames.join(', ')}</span>
-					{/if}
-					<span class="text-xs text-muted-foreground">{result.durationSecs.toFixed(1)}s</span>
-					<Badge variant={result.isSuccess ? 'success' : 'destructive'}>
-						{result.isSuccess ? 'passed' : 'failed'}
-					</Badge>
-				{:else if entry.status === 'running' && entry.phase}
-					<Badge variant="secondary" class="flex items-center gap-1.5">
-						<LoaderCircleIcon class="h-3 w-3 animate-spin" />
-						{phaseLabels[entry.phase] || entry.phase}
-					</Badge>
-				{:else if entry.status === 'pending'}
-					<Badge variant="outline">Pending</Badge>
-				{/if}
+				</div>
 			</div>
-		</div>
-	</Collapsible.Trigger>
-	<Collapsible.Content>
-		<div
-			class="rounded-b-md border border-t-0 border-border p-4 space-y-3 bg-muted/30 min-w-0 overflow-hidden"
-		>
-			{#if entry.status === 'completed' && result}
-				{#if result.errorMessage}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Error</span>
-						<p class="text-sm text-destructive mt-1">{result.errorMessage}</p>
-					</div>
-				{/if}
+		</Collapsible.Trigger>
+		<Collapsible.Content>
+			<div
+				class="min-w-0 space-y-3 overflow-hidden rounded-b-md border border-t-0 border-border bg-muted/30 p-4"
+			>
+				{#if entry.status === 'completed' && result}
+					{#if result.errorMessage}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Error</span>
+							<p class="mt-1 text-sm text-status-error">{result.errorMessage}</p>
+						</div>
+					{/if}
 
-				<div class="grid grid-cols-2 gap-3 text-sm">
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Executor</span>
-						<p>{result.executorName} ({result.executorType})</p>
-					</div>
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Execution ID</span>
-						<p class="font-mono text-xs">{result.executionId}</p>
+					<div class="grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Executor</span>
+							<p>{result.executorName} ({result.executorType})</p>
+						</div>
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Execution ID</span>
+							<p class="font-mono text-xs">{result.executionId}</p>
+						</div>
+						{#if result.simulationId}
+							<div>
+								<span class="text-xs font-medium text-muted-foreground">Simulation ID</span>
+								<p class="font-mono text-xs">{result.simulationId}</p>
+							</div>
+						{/if}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Duration</span>
+							<p class="tabular-nums">
+								{result.durationSecs.toFixed(1)}s (matching: {result.matchingDurSecs.toFixed(1)}s)
+							</p>
+						</div>
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Executed</span>
+							<p>{new Date(result.timeExecuted).toLocaleString()}</p>
+						</div>
 					</div>
-					{#if result.simulationId}
+
+					{#if result.collectedDocCount && result.collectedDocCount > 0}
 						<div>
-							<span class="text-xs font-medium text-muted-foreground">Simulation ID</span>
-							<p class="font-mono text-xs">{result.simulationId}</p>
+							<span class="text-xs font-medium text-muted-foreground">Collected Logs</span>
+							<div class="mt-1 flex items-center gap-2">
+								<span class="text-sm">{result.collectedDocCount} documents</span>
+								<a href={getCollectedLogsUrl(result.id)} download>
+									<Button variant="outline" size="sm" class="h-7 px-2">
+										<DownloadIcon data-icon="inline-start" />
+										Download NDJSON
+									</Button>
+								</a>
+							</div>
 						</div>
 					{/if}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Duration</span>
-						<p>
-							{result.durationSecs.toFixed(1)}s (matching: {result.matchingDurSecs.toFixed(1)}s)
-						</p>
-					</div>
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Executed</span>
-						<p>{new Date(result.timeExecuted).toLocaleString()}</p>
-					</div>
-				</div>
 
-				{#if result.collectedDocCount && result.collectedDocCount > 0}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Collected Logs</span>
-						<div class="flex items-center gap-2 mt-1">
-							<span class="text-sm">{result.collectedDocCount} documents</span>
-							<a href={getCollectedLogsUrl(result.id)} download>
-								<Button variant="outline" size="sm" class="h-7 px-2">
-									<DownloadIcon class="h-3 w-3 mr-1" />
-									Download NDJSON
-								</Button>
-							</a>
+					{#if result.discoveredAlerts && result.discoveredAlerts.length > 0}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">
+								Discovered Alerts ({result.discoveredAlerts.length})
+							</span>
+							<div class="mt-1.5 space-y-1">
+								{#each result.discoveredAlerts as alert}
+									<div class="flex items-center gap-2 text-sm">
+										<span class="font-mono text-xs font-semibold text-status-success">FOUND</span>
+										{#if alert.severity}
+											<span class="font-mono text-xs text-status-warning">[{alert.severity}]</span>
+										{/if}
+										<span>{alert.ruleName}</span>
+									</div>
+								{/each}
+							</div>
 						</div>
-					</div>
-				{/if}
+					{:else if result.discoveredAlerts && result.discoveredAlerts.length === 0}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Discovered Alerts</span>
+							<p class="mt-1 text-sm text-muted-foreground">
+								No matching alerts found during explore window.
+							</p>
+						</div>
+					{/if}
 
-				{#if result.discoveredAlerts && result.discoveredAlerts.length > 0}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">
-							Discovered Alerts ({result.discoveredAlerts.length})
-						</span>
-						<div class="mt-1 space-y-1">
-							{#each result.discoveredAlerts as alert}
-								<div class="flex items-center gap-2 text-sm">
-									<span class="text-success">FOUND</span>
-									{#if alert.severity}
-										<span class="text-muted-foreground">[{alert.severity}]</span>
-									{/if}
-									<span>{alert.ruleName}</span>
-								</div>
-							{/each}
+					{#if result.assertions && result.assertions.length > 0}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Assertions</span>
+							<div class="mt-1.5 space-y-1">
+								{#each result.assertions as assertion}
+									<div class="flex items-center gap-2 text-sm">
+										<span
+											class="font-mono text-xs font-semibold {assertion.passed
+												? 'text-status-success'
+												: 'text-status-error'}"
+										>
+											{assertion.passed ? 'PASS' : 'MISSED'}
+										</span>
+										<span class="font-mono text-xs text-muted-foreground"
+											>[{assertion.matcherType}]</span
+										>
+										<span>{assertion.alertName}</span>
+									</div>
+								{/each}
+							</div>
 						</div>
-					</div>
-				{:else if result.discoveredAlerts && result.discoveredAlerts.length === 0}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Discovered Alerts</span>
-						<p class="text-sm text-muted-foreground mt-1">No matching alerts found during explore window.</p>
-					</div>
-				{/if}
+					{/if}
 
-				{#if result.assertions && result.assertions.length > 0}
-					<div>
-						<span class="text-xs font-medium text-muted-foreground">Assertions</span>
-						<div class="mt-1 space-y-1">
-							{#each result.assertions as assertion}
-								<div class="flex items-center gap-2 text-sm">
-									<span class={assertion.passed ? 'text-success' : 'text-destructive'}>
-										{assertion.passed ? 'PASS' : 'FAIL'}
-									</span>
-									<span class="text-muted-foreground">[{assertion.matcherType}]</span>
-									<span>{assertion.alertName}</span>
-								</div>
-							{/each}
+					{#if result.metadata?.description}
+						<div>
+							<span class="text-xs font-medium text-muted-foreground">Description</span>
+							<p class="mt-1 text-sm">{result.metadata.description}</p>
 						</div>
+					{/if}
+				{:else if entry.status === 'running' && entry.phase}
+					<div class="flex items-center gap-2 text-sm text-muted-foreground">
+						<LoaderCircleIcon class="h-4 w-4 animate-spin" />
+						<span>{phaseLabels[entry.phase] || entry.phase}...</span>
 					</div>
+				{:else if entry.status === 'pending'}
+					<div class="text-sm text-muted-foreground">Waiting to start...</div>
 				{/if}
 
-				{#if result.metadata?.description}
+				{#if logs.length > 0}
 					<div>
-						<span class="text-xs font-medium text-muted-foreground">Description</span>
-						<p class="text-sm mt-1">{result.metadata.description}</p>
+						<span class="text-xs font-medium text-muted-foreground">Logs ({logs.length})</span>
+						<div class="mt-2">
+							<RunLog entries={logs} class="!h-[250px]" />
+						</div>
 					</div>
 				{/if}
-			{:else if entry.status === 'running' && entry.phase}
-				<div class="flex items-center gap-2 text-sm text-muted-foreground">
-					<LoaderCircleIcon class="h-4 w-4 animate-spin" />
-					<span>{phaseLabels[entry.phase] || entry.phase}...</span>
-				</div>
-			{:else if entry.status === 'pending'}
-				<div class="text-sm text-muted-foreground">Waiting to start...</div>
-			{/if}
-
-			{#if logs.length > 0}
-				<div>
-					<span class="text-xs font-medium text-muted-foreground">Logs ({logs.length})</span>
-					<div class="mt-2">
-						<RunLog entries={logs} class="!h-[250px]" />
-					</div>
-				</div>
-			{/if}
-		</div>
-	</Collapsible.Content>
-</Collapsible.Root>
+			</div>
+		</Collapsible.Content>
+	</Collapsible.Root>
+</div>
diff --git a/web/frontend/src/lib/components/ScenarioSection.svelte b/web/frontend/src/lib/components/ScenarioSection.svelte
index 733d1a7..201a9f2 100644
--- a/web/frontend/src/lib/components/ScenarioSection.svelte
+++ b/web/frontend/src/lib/components/ScenarioSection.svelte
@@ -283,7 +283,6 @@
 			'Select collector'
 	);
 
-
 	function handleCollectionIndexChange(e: Event) {
 		onupdate({
 			...scenario,
@@ -344,7 +343,10 @@
 					>{scenario.pack}{selectedId ? ` / ${selectedId}` : ''}</span
 				>
 				{#if isInject}
-					<Badge variant="outline" class="text-[10px] px-1.5 py-0 gap-1 bg-attr-asset/10 text-attr-asset border-attr-asset/30">
+					<Badge
+						variant="outline"
+						class="text-[10px] px-1.5 py-0 gap-1 bg-attr-asset/10 text-attr-asset border-attr-asset/30"
+					>
 						<SyringeIcon class="size-2.5" />
 						inject
 					</Badge>
@@ -360,12 +362,12 @@
 				aria-label="Enable scenario"
 			/>
 			<Button variant="ghost" size="sm" onclick={onduplicate} aria-label="Duplicate scenario">
-				<CopyIcon size={16} class="mr-1" />
+				<CopyIcon data-icon="inline-start" />
 				Duplicate
 			</Button>
 			{#if canRemove}
 				<Button variant="ghost" size="sm" onclick={onremove} aria-label="Remove scenario">
-					<Trash2Icon size={16} class="mr-1" />
+					<Trash2Icon data-icon="inline-start" />
 					Remove
 				</Button>
 			{/if}
@@ -431,7 +433,7 @@
 										disabled={!scenario.pack || loadingManifest}
 									>
 										<span class="truncate">{comboboxLabel}</span>
-										<ChevronsUpDownIcon class="ml-2 shrink-0 opacity-50" size={16} />
+										<ChevronsUpDownIcon data-icon="inline-end" class="opacity-50" />
 									</Button>
 								{/snippet}
 							</Popover.Trigger>
@@ -463,9 +465,12 @@
 															)}
 															size={16}
 														/>
-														<ShieldAlertIcon class="mr-1.5 size-3.5 text-muted-foreground shrink-0" />
+														<ShieldAlertIcon
+															class="mr-1.5 size-3.5 text-muted-foreground shrink-0"
+														/>
 														<span class="truncate"
-															>{sim.name} <span class="text-muted-foreground">({sim.id})</span></span
+															>{sim.name}
+															<span class="text-muted-foreground">({sim.id})</span></span
 														>
 													</Command.Item>
 												{/each}
@@ -496,7 +501,8 @@
 														/>
 														<SyringeIcon class="mr-1.5 size-3.5 text-attr-asset shrink-0" />
 														<span class="truncate"
-															>{tmpl.name} <span class="text-muted-foreground">({tmpl.id})</span></span
+															>{tmpl.name}
+															<span class="text-muted-foreground">({tmpl.id})</span></span
 														>
 													</Command.Item>
 												{/each}
@@ -518,42 +524,48 @@
 							<div>
 								<Label class="text-xs mb-1 block">Datastream</Label>
 								<div class="flex items-center gap-0">
-									<span class="shrink-0 rounded-l-md border border-r-0 border-input bg-muted px-2.5 py-2 text-xs font-mono text-muted-foreground">logs-</span>
+									<span
+										class="shrink-0 rounded-l-md border border-r-0 border-input bg-muted px-2.5 py-2 text-xs font-mono text-muted-foreground"
+										>logs-</span
+									>
 									<Input
 										placeholder="e.g., okta.system"
 										value={scenario.injectIndex}
 										oninput={handleInjectIndexChange}
 										class="font-mono text-sm rounded-l-none border-l-0 rounded-r-none"
 									/>
-									<span class="shrink-0 rounded-r-md border border-l-0 border-input bg-muted px-2.5 py-2 text-xs font-mono text-muted-foreground">-default</span>
+									<span
+										class="shrink-0 rounded-r-md border border-l-0 border-input bg-muted px-2.5 py-2 text-xs font-mono text-muted-foreground"
+										>-default</span
+									>
 								</div>
 							</div>
 						</div>
 
 						<!-- Template Variables -->
-					{#if scenario.templateVars.length > 0}
-						<Separator />
-						<div class="space-y-3">
-							<h4 class="text-sm font-medium">Template Variables</h4>
-							{#each scenario.templateVars as tvar, vi}
-								<div class="flex items-start gap-2">
-									<div class="grid flex-1 gap-2 sm:grid-cols-2">
-										<Input
-											value={tvar.key}
-											disabled
-											class="font-mono text-xs"
-										/>
-										<Input
-											placeholder={selectedTemplate?.vars?.[tvar.key] || 'Value'}
-											value={tvar.value}
-											oninput={(e) =>
-												handleTemplateVarChange(vi, 'value', (e.target as HTMLInputElement).value)}
-										/>
+						{#if scenario.templateVars.length > 0}
+							<Separator />
+							<div class="space-y-3">
+								<h4 class="text-sm font-medium">Template Variables</h4>
+								{#each scenario.templateVars as tvar, vi}
+									<div class="flex items-start gap-2">
+										<div class="grid flex-1 gap-2 sm:grid-cols-2">
+											<Input value={tvar.key} disabled class="font-mono text-xs" />
+											<Input
+												placeholder={selectedTemplate?.vars?.[tvar.key] || 'Value'}
+												value={tvar.value}
+												oninput={(e) =>
+													handleTemplateVarChange(
+														vi,
+														'value',
+														(e.target as HTMLInputElement).value
+													)}
+											/>
+										</div>
 									</div>
-								</div>
-							{/each}
-						</div>
-					{/if}
+								{/each}
+							</div>
+						{/if}
 
 						<!-- Inject: Static indicators -->
 						<Separator />
@@ -561,7 +573,7 @@
 							<div class="flex items-center justify-between">
 								<h4 class="text-sm font-medium">Indicators</h4>
 								<Button variant="outline" size="sm" onclick={addStaticIndicator}>
-									<PlusIcon size={14} class="mr-1" />
+									<PlusIcon data-icon="inline-start" />
 									Add Static Indicator
 								</Button>
 							</div>
@@ -570,8 +582,7 @@
 									<Input
 										placeholder="e.g., 192.168.1.1"
 										value={indicator}
-										oninput={(e) =>
-											updateStaticIndicator(si, (e.target as HTMLInputElement).value)}
+										oninput={(e) => updateStaticIndicator(si, (e.target as HTMLInputElement).value)}
 										class="flex-1"
 									/>
 									<Button
@@ -598,7 +609,7 @@
 								<div class="flex items-center justify-between">
 									<h4 class="text-sm font-medium">Parameters</h4>
 									<Button variant="outline" size="sm" onclick={addParam}>
-										<PlusIcon size={14} class="mr-1" />
+										<PlusIcon data-icon="inline-start" />
 										Add Param
 									</Button>
 								</div>
@@ -679,7 +690,7 @@
 									<div class="flex items-center justify-between">
 										<Label class="text-xs">Static Indicators</Label>
 										<Button variant="outline" size="sm" onclick={addStaticIndicator}>
-											<PlusIcon size={14} class="mr-1" />
+											<PlusIcon data-icon="inline-start" />
 											Add
 										</Button>
 									</div>
@@ -710,7 +721,7 @@
 								<div class="flex items-center justify-between">
 									<h4 class="text-sm font-medium">Indicators</h4>
 									<Button variant="outline" size="sm" onclick={addStaticIndicator}>
-										<PlusIcon size={14} class="mr-1" />
+										<PlusIcon data-icon="inline-start" />
 										Add Static Indicator
 									</Button>
 								</div>
@@ -791,7 +802,7 @@
 										<div class="flex items-center justify-between">
 											<Label class="text-xs">Additional Query Fields</Label>
 											<Button variant="outline" size="sm" onclick={addCollectionField}>
-												<PlusIcon size={14} class="mr-1" />
+												<PlusIcon data-icon="inline-start" />
 												Add Field
 											</Button>
 										</div>
@@ -807,11 +818,7 @@
 													placeholder="Field name (e.g., cloud.account.id)"
 													value={field.key}
 													oninput={(e) =>
-														updateCollectionField(
-															fi,
-															'key',
-															(e.target as HTMLInputElement).value
-														)}
+														updateCollectionField(fi, 'key', (e.target as HTMLInputElement).value)}
 													class="flex-1 font-mono text-xs"
 												/>
 												<span class="text-muted-foreground">=</span>
@@ -844,28 +851,28 @@
 				{/if}
 
 				{#if scenarioFileType === 'standard'}
-				<Separator />
-
-				<div class="space-y-3">
-					<div class="flex items-center justify-between">
-						<h4 class="text-sm font-medium">Expectations</h4>
-						<Button variant="outline" size="sm" onclick={addExpectation}>
-							<PlusIcon size={14} class="mr-1" />
-							Add Expectation
-						</Button>
-					</div>
+					<Separator />
+
+					<div class="space-y-3">
+						<div class="flex items-center justify-between">
+							<h4 class="text-sm font-medium">Expectations</h4>
+							<Button variant="outline" size="sm" onclick={addExpectation}>
+								<PlusIcon data-icon="inline-start" />
+								Add Expectation
+							</Button>
+						</div>
 
-					{#each scenario.expectations as expectation, expIndex}
-						<ExpectationRow
-							{expectation}
-							{elasticRules}
-							onupdate={(exp) => handleExpectationUpdate(expIndex, exp)}
-							onremove={() => handleExpectationRemove(expIndex)}
-							canRemove={scenario.expectations.length > 1}
-						/>
-					{/each}
-				</div>
-			{/if}
+						{#each scenario.expectations as expectation, expIndex}
+							<ExpectationRow
+								{expectation}
+								{elasticRules}
+								onupdate={(exp) => handleExpectationUpdate(expIndex, exp)}
+								onremove={() => handleExpectationRemove(expIndex)}
+								canRemove={scenario.expectations.length > 1}
+							/>
+						{/each}
+					</div>
+				{/if}
 			</div>
 		</div>
 	</div>
diff --git a/web/frontend/src/lib/components/SchemaForm.svelte b/web/frontend/src/lib/components/SchemaForm.svelte
index 7cf9e12..af24a27 100644
--- a/web/frontend/src/lib/components/SchemaForm.svelte
+++ b/web/frontend/src/lib/components/SchemaForm.svelte
@@ -64,9 +64,7 @@
 	});
 
 	// Unknown saved keys: present in values but not declared in schema.
-	let unknownKeys = $derived<string[]>(
-		Object.keys(values).filter((k) => !(k in properties))
-	);
+	let unknownKeys = $derived<string[]>(Object.keys(values).filter((k) => !(k in properties)));
 
 	// Auto-expand the cloud defaults section if any built-in has a saved
 	// value, otherwise start collapsed.
@@ -142,11 +140,7 @@
 			/>
 		{:else if prop.type === 'string' && prop.enum && prop.enum.length > 0}
 			{@const stringValue = typeof value === 'string' ? value : ''}
-			<Select.Root
-				type="single"
-				value={stringValue}
-				onValueChange={(v) => update(name, v ?? '')}
-			>
+			<Select.Root type="single" value={stringValue} onValueChange={(v) => update(name, v ?? '')}>
 				<Select.Trigger class="w-full">
 					{stringValue || (typeof prop.default === 'string' ? prop.default : 'Select...')}
 				</Select.Trigger>
@@ -199,7 +193,7 @@
 						update(name, { ...entriesToObject(entries), '': '' });
 					}}
 				>
-					<PlusIcon size={14} class="mr-1" />
+					<PlusIcon data-icon="inline-start" />
 					Add Entry
 				</Button>
 			</div>
@@ -231,7 +225,9 @@
 	{#if builtinEntries.length > 0}
 		<Collapsible.Root bind:open={cloudOpen}>
 			<Collapsible.Trigger class="w-full">
-				<div class="flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors">
+				<div
+					class="flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+				>
 					<ChevronRightIcon
 						size={14}
 						class={cloudOpen ? 'rotate-90 transition-transform' : 'transition-transform'}
@@ -264,13 +260,8 @@
 					{#each unknownKeys as key}
 						<li class="flex items-center justify-between gap-2 text-xs">
 							<code class="font-mono">{key}</code>
-							<Button
-								variant="ghost"
-								size="sm"
-								class="h-6 px-2"
-								onclick={() => removeKey(key)}
-							>
-								<XIcon size={12} class="mr-1" />
+							<Button variant="ghost" size="sm" class="h-6 px-2" onclick={() => removeKey(key)}>
+								<XIcon data-icon="inline-start" />
 								Remove
 							</Button>
 						</li>
diff --git a/web/frontend/src/lib/components/connectors/AWSConnectorForm.svelte b/web/frontend/src/lib/components/connectors/AWSConnectorForm.svelte
index 40ca09a..ac2f4b8 100644
--- a/web/frontend/src/lib/components/connectors/AWSConnectorForm.svelte
+++ b/web/frontend/src/lib/components/connectors/AWSConnectorForm.svelte
@@ -68,7 +68,5 @@
 			{/each}
 		</Select.Content>
 	</Select.Root>
-	<p class="text-xs text-muted-foreground">
-		Select a secret group containing SR_AWS_EXTERNAL_ID
-	</p>
+	<p class="text-xs text-muted-foreground">Select a secret group containing SR_AWS_EXTERNAL_ID</p>
 </div>
diff --git a/web/frontend/src/lib/components/connectors/AzureConnectorForm.svelte b/web/frontend/src/lib/components/connectors/AzureConnectorForm.svelte
index 5345e43..43a30c4 100644
--- a/web/frontend/src/lib/components/connectors/AzureConnectorForm.svelte
+++ b/web/frontend/src/lib/components/connectors/AzureConnectorForm.svelte
@@ -71,9 +71,7 @@
 
 	export function canTest(): boolean {
 		if (fields.authType !== 'wif') return false;
-		return (
-			!!fields.tenantId.trim() && !!fields.subscriptionId.trim() && !!fields.clientId.trim()
-		);
+		return !!fields.tenantId.trim() && !!fields.subscriptionId.trim() && !!fields.clientId.trim();
 	}
 
 	function setAuthType(v: string) {
diff --git a/web/frontend/src/lib/components/connectors/ConnectorDetail.svelte b/web/frontend/src/lib/components/connectors/ConnectorDetail.svelte
index 157e77a..278658d 100644
--- a/web/frontend/src/lib/components/connectors/ConnectorDetail.svelte
+++ b/web/frontend/src/lib/components/connectors/ConnectorDetail.svelte
@@ -50,8 +50,7 @@
 		azure: { 'Cloud Target': 'Used as a detonation target for Azure attack simulations' },
 		kubernetes: { 'K8s Target': 'Used as a detonation target for Kubernetes attack simulations' },
 		ssh: {
-			'Remote Command Detonation':
-				'Execute shell commands on a remote host over SSH for detonation'
+			'Remote Command Detonation': 'Execute shell commands on a remote host over SSH for detonation'
 		}
 	};
 
@@ -69,7 +68,12 @@
 	}
 </script>
 
-<Sheet.Root {open} onOpenChange={(v) => { if (!v) onClose(); }}>
+<Sheet.Root
+	{open}
+	onOpenChange={(v) => {
+		if (!v) onClose();
+	}}
+>
 	<Sheet.Content side="right" class="w-full p-0 sm:max-w-lg">
 		{#if connector}
 			{@const c = connector}
@@ -106,7 +110,9 @@
 					<div class="space-y-6 px-6 py-5">
 						{#if c.description}
 							<div>
-								<h4 class="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								<h4
+									class="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+								>
 									Description
 								</h4>
 								<p class="text-sm leading-relaxed text-foreground/90">{c.description}</p>
@@ -128,12 +134,14 @@
 								{#if c.type === 'elastic'}
 									<div class="grid grid-cols-[130px_1fr] gap-2">
 										<span class="font-medium text-muted-foreground">Kibana URL</span>
-										<span class="break-all font-mono text-xs">{getElasticConfig(c).kibana_url}</span>
+										<span class="break-all font-mono text-xs">{getElasticConfig(c).kibana_url}</span
+										>
 									</div>
 									{#if getElasticConfig(c).cloud_id}
 										<div class="grid grid-cols-[130px_1fr] gap-2">
 											<span class="font-medium text-muted-foreground">Cloud ID</span>
-											<span class="break-all font-mono text-xs">{getElasticConfig(c).cloud_id}</span>
+											<span class="break-all font-mono text-xs">{getElasticConfig(c).cloud_id}</span
+											>
 										</div>
 									{/if}
 									{#if getElasticConfig(c).elasticsearch_url}
@@ -150,7 +158,8 @@
 											{#if getElasticConfig(c).export_enabled}
 												<Badge variant="default">Enabled</Badge>
 												<span class="ml-2 font-mono text-xs"
-													>logs-{getElasticConfig(c).export_datastream || 'asp.results'}-default</span
+													>logs-{getElasticConfig(c).export_datastream ||
+														'asp.results'}-default</span
 												>
 											{:else}
 												<Badge variant="secondary">Disabled</Badge>
diff --git a/web/frontend/src/lib/components/connectors/ElasticConnectorForm.svelte b/web/frontend/src/lib/components/connectors/ElasticConnectorForm.svelte
index 9725aaa..3d76f6d 100644
--- a/web/frontend/src/lib/components/connectors/ElasticConnectorForm.svelte
+++ b/web/frontend/src/lib/components/connectors/ElasticConnectorForm.svelte
@@ -87,9 +87,7 @@
 			{/each}
 		</Select.Content>
 	</Select.Root>
-	<p class="text-xs text-muted-foreground">
-		Select a secret group containing SR_ELASTIC_API_KEY
-	</p>
+	<p class="text-xs text-muted-foreground">Select a secret group containing SR_ELASTIC_API_KEY</p>
 </div>
 <div class="space-y-2">
 	<Label for={kibanaId}>Kibana URL</Label>
@@ -127,11 +125,7 @@
 	{#if fields.exportEnabled}
 		<div class="space-y-2">
 			<Label for={datastreamId}>Datastream</Label>
-			<Input
-				id={datastreamId}
-				placeholder="asp.results"
-				bind:value={fields.exportDatastream}
-			/>
+			<Input id={datastreamId} placeholder="asp.results" bind:value={fields.exportDatastream} />
 			<p class="text-xs text-muted-foreground">
 				Results will be indexed to:
 				<span class="font-mono">logs-{fields.exportDatastream || 'asp.results'}-default</span>
diff --git a/web/frontend/src/lib/components/connectors/GCPConnectorForm.svelte b/web/frontend/src/lib/components/connectors/GCPConnectorForm.svelte
index 55681e3..8dea665 100644
--- a/web/frontend/src/lib/components/connectors/GCPConnectorForm.svelte
+++ b/web/frontend/src/lib/components/connectors/GCPConnectorForm.svelte
@@ -102,9 +102,7 @@
 <div class="space-y-2">
 	<Label for={projIdId}>Project ID</Label>
 	<Input id={projIdId} placeholder="my-gcp-project" bind:value={fields.projectId} />
-	<p class="text-xs text-muted-foreground">
-		GCP project ID (injected as GOOGLE_CLOUD_PROJECT)
-	</p>
+	<p class="text-xs text-muted-foreground">GCP project ID (injected as GOOGLE_CLOUD_PROJECT)</p>
 </div>
 <div class="space-y-2">
 	<Label>Authentication Method</Label>
@@ -137,9 +135,7 @@
 			placeholder="simrun@project-id.iam.gserviceaccount.com"
 			bind:value={fields.serviceAccountEmail}
 		/>
-		<p class="text-xs text-muted-foreground">
-			The GCP service account to impersonate via WIF
-		</p>
+		<p class="text-xs text-muted-foreground">The GCP service account to impersonate via WIF</p>
 	</div>
 {:else}
 	<div class="space-y-2">
diff --git a/web/frontend/src/lib/components/ui/alert/alert-action.svelte b/web/frontend/src/lib/components/ui/alert/alert-action.svelte
new file mode 100644
index 0000000..3df2083
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/alert/alert-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn('absolute top-2 right-2', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/alert/alert-description.svelte b/web/frontend/src/lib/components/ui/alert/alert-description.svelte
index 5920ca6..efe20a1 100644
--- a/web/frontend/src/lib/components/ui/alert/alert-description.svelte
+++ b/web/frontend/src/lib/components/ui/alert/alert-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+		'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/alert/alert-title.svelte b/web/frontend/src/lib/components/ui/alert/alert-title.svelte
index 8a35d09..1c019c7 100644
--- a/web/frontend/src/lib/components/ui/alert/alert-title.svelte
+++ b/web/frontend/src/lib/components/ui/alert/alert-title.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="alert-title"
-	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	class={cn(
+		'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/alert/alert.svelte b/web/frontend/src/lib/components/ui/alert/alert.svelte
index a2e48f5..71ef768 100644
--- a/web/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/web/frontend/src/lib/components/ui/alert/alert.svelte
@@ -2,12 +2,12 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const alertVariants = tv({
-		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg 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]:translate-y-0.5 [&>svg]:text-current',
+		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
 				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current'
 			}
 		},
 		defaultVariants: {
diff --git a/web/frontend/src/lib/components/ui/alert/index.ts b/web/frontend/src/lib/components/ui/alert/index.ts
index 5e0f854..0bc9d9c 100644
--- a/web/frontend/src/lib/components/ui/alert/index.ts
+++ b/web/frontend/src/lib/components/ui/alert/index.ts
@@ -1,14 +1,17 @@
 import Root from './alert.svelte';
 import Description from './alert-description.svelte';
 import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
 export { alertVariants, type AlertVariant } from './alert.svelte';
 
 export {
 	Root,
 	Description,
 	Title,
+	Action,
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle
+	Title as AlertTitle,
+	Action as AlertAction
 };
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar-badge.svelte b/web/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
new file mode 100644
index 0000000..9ef8ba7
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/avatar/avatar-badge.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="avatar-badge"
+	class={cn(
+		'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+		'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+		'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+		'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte b/web/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
index b911baf..213a71c 100644
--- a/web/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/web/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -12,6 +12,9 @@
 <AvatarPrimitive.Fallback
 	bind:ref
 	data-slot="avatar-fallback"
-	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	class={cn(
+		'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+		className
+	)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte b/web/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
new file mode 100644
index 0000000..3cc3bb0
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group-count"
+	class={cn(
+		'bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar-group.svelte b/web/frontend/src/lib/components/ui/avatar/avatar-group.svelte
new file mode 100644
index 0000000..77b389c
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/avatar/avatar-group.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group"
+	class={cn(
+		'cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar-image.svelte b/web/frontend/src/lib/components/ui/avatar/avatar-image.svelte
index 7ccc3ce..2f47f2c 100644
--- a/web/frontend/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/web/frontend/src/lib/components/ui/avatar/avatar-image.svelte
@@ -12,6 +12,6 @@
 <AvatarPrimitive.Image
 	bind:ref
 	data-slot="avatar-image"
-	class={cn('aspect-square size-full', className)}
+	class={cn('rounded-full aspect-square size-full object-cover', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/avatar/avatar.svelte b/web/frontend/src/lib/components/ui/avatar/avatar.svelte
index 3fd4dc2..2b6388d 100644
--- a/web/frontend/src/lib/components/ui/avatar/avatar.svelte
+++ b/web/frontend/src/lib/components/ui/avatar/avatar.svelte
@@ -5,15 +5,22 @@
 	let {
 		ref = $bindable(null),
 		loadingStatus = $bindable('loading'),
+		size = 'default',
 		class: className,
 		...restProps
-	}: AvatarPrimitive.RootProps = $props();
+	}: AvatarPrimitive.RootProps & {
+		size?: 'default' | 'sm' | 'lg';
+	} = $props();
 </script>
 
 <AvatarPrimitive.Root
 	bind:ref
 	bind:loadingStatus
 	data-slot="avatar"
-	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+	data-size={size}
+	class={cn(
+		'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+		className
+	)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/avatar/index.ts b/web/frontend/src/lib/components/ui/avatar/index.ts
index 9585f8a..c4530fb 100644
--- a/web/frontend/src/lib/components/ui/avatar/index.ts
+++ b/web/frontend/src/lib/components/ui/avatar/index.ts
@@ -1,13 +1,22 @@
 import Root from './avatar.svelte';
 import Image from './avatar-image.svelte';
 import Fallback from './avatar-fallback.svelte';
+import Badge from './avatar-badge.svelte';
+import Group from './avatar-group.svelte';
+import GroupCount from './avatar-group-count.svelte';
 
 export {
 	Root,
 	Image,
 	Fallback,
+	Badge,
+	Group,
+	GroupCount,
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback
+	Fallback as AvatarFallback,
+	Badge as AvatarBadge,
+	Group as AvatarGroup,
+	GroupCount as AvatarGroupCount
 };
diff --git a/web/frontend/src/lib/components/ui/badge/badge.svelte b/web/frontend/src/lib/components/ui/badge/badge.svelte
index c05f168..5f164df 100644
--- a/web/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/web/frontend/src/lib/components/ui/badge/badge.svelte
@@ -2,18 +2,18 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
-				secondary:
-					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
 				destructive:
-					'bg-status-error/10 text-status-error border-status-error/25 [a&]:hover:bg-status-error/20 focus-visible:ring-status-error/20',
+					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
 				success:
-					'bg-status-success/10 text-status-success border-status-success/25 [a&]:hover:bg-status-success/20',
-				outline:
-					'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+					'bg-status-success/10 [a]:hover:bg-status-success/20 focus-visible:ring-status-success/20 text-status-success dark:bg-status-success/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline'
 			}
 		},
 		defaultVariants: {
diff --git a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
index 030197f..e5c0c3c 100644
--- a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 
 	let {
 		ref = $bindable(null),
@@ -15,9 +15,9 @@
 	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
-	class={cn('flex size-9 items-center justify-center', className)}
+	class={cn('size-5 [&>svg]:size-4 flex items-center justify-center', className)}
 	{...restProps}
 >
-	<EllipsisIcon class="size-4" />
+	<MoreHorizontalIcon />
 	<span class="sr-only">More</span>
 </span>
diff --git a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
index 081b636..b5f734e 100644
--- a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
+++ b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -13,7 +13,7 @@
 <li
 	bind:this={ref}
 	data-slot="breadcrumb-item"
-	class={cn('inline-flex items-center gap-1.5', className)}
+	class={cn('gap-1 inline-flex items-center', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
index 33abc27..655cb77 100644
--- a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+		'text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
index c3b70c6..2d7ed99 100644
--- a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLLiAttributes } from 'svelte/elements';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 
 	let {
 		ref = $bindable(null),
diff --git a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
index c797f82..2a7eb01 100644
--- a/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
+++ b/web/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from '$lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +14,8 @@
 <nav
 	bind:this={ref}
 	data-slot="breadcrumb"
-	class={className}
 	aria-label="breadcrumb"
+	class={cn('cn-breadcrumb', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/button/button.svelte b/web/frontend/src/lib/components/ui/button/button.svelte
index fad512e..9c97ac4 100644
--- a/web/frontend/src/lib/components/ui/button/button.svelte
+++ b/web/frontend/src/lib/components/ui/button/button.svelte
@@ -4,25 +4,32 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
-				destructive:
-					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
 				outline:
-					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost:
+					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+				destructive:
+					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {
-				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-				icon: 'size-9',
-				'icon-sm': 'size-8',
-				'icon-lg': 'size-10'
+				default:
+					'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-8',
+				'icon-xs':
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				'icon-sm':
+					'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9'
 			}
 		},
 		defaultVariants: {
diff --git a/web/frontend/src/lib/components/ui/card/card-action.svelte b/web/frontend/src/lib/components/ui/card/card-action.svelte
index bbaafd2..bc79c73 100644
--- a/web/frontend/src/lib/components/ui/card/card-action.svelte
+++ b/web/frontend/src/lib/components/ui/card/card-action.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	class={cn(
+		'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/card/card-content.svelte b/web/frontend/src/lib/components/ui/card/card-content.svelte
index 1d60124..bfc43f7 100644
--- a/web/frontend/src/lib/components/ui/card/card-content.svelte
+++ b/web/frontend/src/lib/components/ui/card/card-content.svelte
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn('px-4 group-data-[size=sm]/card:px-3', className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/web/frontend/src/lib/components/ui/card/card-footer.svelte b/web/frontend/src/lib/components/ui/card/card-footer.svelte
index 4e390bf..6dcf877 100644
--- a/web/frontend/src/lib/components/ui/card/card-footer.svelte
+++ b/web/frontend/src/lib/components/ui/card/card-footer.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	class={cn(
+		'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/card/card-header.svelte b/web/frontend/src/lib/components/ui/card/card-header.svelte
index 9cdc602..bcf6866 100644
--- a/web/frontend/src/lib/components/ui/card/card-header.svelte
+++ b/web/frontend/src/lib/components/ui/card/card-header.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		'gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/card/card-title.svelte b/web/frontend/src/lib/components/ui/card/card-title.svelte
index 0eae8ec..d494479 100644
--- a/web/frontend/src/lib/components/ui/card/card-title.svelte
+++ b/web/frontend/src/lib/components/ui/card/card-title.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn('leading-none font-semibold', className)}
+	class={cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/card/card.svelte b/web/frontend/src/lib/components/ui/card/card.svelte
index 2c8c321..9cdf8c6 100644
--- a/web/frontend/src/lib/components/ui/card/card.svelte
+++ b/web/frontend/src/lib/components/ui/card/card.svelte
@@ -6,15 +6,17 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = 'default',
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
+	data-size={size}
 	class={cn(
-		'bg-card text-card-foreground flex flex-col gap-6 rounded-xl ring-1 ring-foreground/10 py-6',
+		'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/web/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index fc8614a..daa47f3 100644
--- a/web/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/web/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'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 focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:checked
@@ -25,11 +25,14 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div data-slot="checkbox-indicator" class="text-current transition-none">
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
 			{#if checked}
-				<CheckIcon class="size-3.5" />
+				<CheckIcon />
 			{:else if indeterminate}
-				<MinusIcon class="size-3.5" />
+				<MinusIcon />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/web/frontend/src/lib/components/ui/command/command-dialog.svelte b/web/frontend/src/lib/components/ui/command/command-dialog.svelte
index c4d3587..c0f8c99 100644
--- a/web/frontend/src/lib/components/ui/command/command-dialog.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-dialog.svelte
@@ -3,16 +3,18 @@
 	import type { Snippet } from 'svelte';
 	import Command from './command.svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import type { WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(''),
 		title = 'Command Palette',
-		description = 'Search for a command to run',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
 		portalProps,
 		children,
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
@@ -20,6 +22,8 @@
 			children: Snippet;
 			title?: string;
 			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
 		} = $props();
 </script>
 
@@ -28,13 +32,11 @@
 		<Dialog.Title>{title}</Dialog.Title>
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
-	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
-		<Command
-			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
-			{...restProps}
-			bind:value
-			bind:ref
-			{children}
-		/>
+	<Dialog.Content
+		class={cn('rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/web/frontend/src/lib/components/ui/command/command-group.svelte b/web/frontend/src/lib/components/ui/command/command-group.svelte
index 4097222..d637a5a 100644
--- a/web/frontend/src/lib/components/ui/command/command-group.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-group.svelte
@@ -17,7 +17,10 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn('text-foreground overflow-hidden p-1', className)}
+	class={cn(
+		'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+		className
+	)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
diff --git a/web/frontend/src/lib/components/ui/command/command-input.svelte b/web/frontend/src/lib/components/ui/command/command-input.svelte
index 8262b8a..1a3aa03 100644
--- a/web/frontend/src/lib/components/ui/command/command-input.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-input.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import SearchIcon from '@lucide/svelte/icons/search';
 	import { cn } from '$lib/utils.js';
+	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
 
 	let {
 		ref = $bindable(null),
@@ -11,16 +12,25 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
-	<SearchIcon class="size-4 shrink-0 opacity-50" />
-	<CommandPrimitive.Input
-		data-slot="command-input"
-		class={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',
-			className
-		)}
-		bind:ref
-		{...restProps}
-		bind:value
-	/>
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+	>
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
 </div>
diff --git a/web/frontend/src/lib/components/ui/command/command-item.svelte b/web/frontend/src/lib/components/ui/command/command-item.svelte
index 063adb7..dbe3e82 100644
--- a/web/frontend/src/lib/components/ui/command/command-item.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-item.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
 	}: CommandPrimitive.ItemProps = $props();
 </script>
@@ -13,8 +15,13 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected: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]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+	<CheckIcon
+		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
+</CommandPrimitive.Item>
diff --git a/web/frontend/src/lib/components/ui/command/command-list.svelte b/web/frontend/src/lib/components/ui/command/command-list.svelte
index 8ff87f0..59c2559 100644
--- a/web/frontend/src/lib/components/ui/command/command-list.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-list.svelte
@@ -12,6 +12,9 @@
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+	class={cn(
+		'no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto',
+		className
+	)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/command/command-shortcut.svelte b/web/frontend/src/lib/components/ui/command/command-shortcut.svelte
index c36bbe5..6ffdd22 100644
--- a/web/frontend/src/lib/components/ui/command/command-shortcut.svelte
+++ b/web/frontend/src/lib/components/ui/command/command-shortcut.svelte
@@ -13,7 +13,10 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
+	class={cn(
+		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/command/command.svelte b/web/frontend/src/lib/components/ui/command/command.svelte
index 2c81aa8..8647727 100644
--- a/web/frontend/src/lib/components/ui/command/command.svelte
+++ b/web/frontend/src/lib/components/ui/command/command.svelte
@@ -21,7 +21,7 @@
 	bind:ref
 	data-slot="command"
 	class={cn(
-		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		'bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-close.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-close.svelte
index e8a96a7..4141704 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-close.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
 </script>
 
-<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-content.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-content.svelte
index b104e4f..80db472 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import DialogPortal from './dialog-portal.svelte';
-	import XIcon from '@lucide/svelte/icons/x';
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 	import type { ComponentProps } from 'svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import XIcon from '@lucide/svelte/icons/x';
 
 	let {
 		ref = $bindable(null),
@@ -27,18 +28,20 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={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 sm:max-w-lg',
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		{#if showCloseButton}
-			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring absolute end-4 top-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 class="sr-only">Close</span>
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-description.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-description.svelte
index c658420..fc9852d 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-description.svelte
@@ -12,6 +12,9 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-footer.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
index c457d56..c2eab11 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,20 +1,35 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		showCloseButton = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	class={cn(
+		'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
 </div>
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-header.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-header.svelte
index 9b2701c..bfc8d40 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn('flex flex-col gap-2 text-center sm:text-start', className)}
+	class={cn('gap-2 flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
index 938ab1e..f884246 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={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-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-title.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-title.svelte
index 7073699..f3aa721 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-title.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn('text-lg leading-none font-semibold', className)}
+	class={cn('text-base leading-none font-medium', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte b/web/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
index ac04d9f..9264541 100644
--- a/web/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
 </script>
 
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/web/frontend/src/lib/components/ui/drawer/drawer-content.svelte b/web/frontend/src/lib/components/ui/drawer/drawer-content.svelte
index cace02c..411b202 100644
--- a/web/frontend/src/lib/components/ui/drawer/drawer-content.svelte
+++ b/web/frontend/src/lib/components/ui/drawer/drawer-content.svelte
@@ -23,17 +23,13 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-			'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-			'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
-			'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm',
-			'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm',
+			'bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50',
 			className
 		)}
 		{...restProps}
 	>
 		<div
-			class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+			class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
 		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
diff --git a/web/frontend/src/lib/components/ui/drawer/drawer-footer.svelte b/web/frontend/src/lib/components/ui/drawer/drawer-footer.svelte
index c436cc2..a177a75 100644
--- a/web/frontend/src/lib/components/ui/drawer/drawer-footer.svelte
+++ b/web/frontend/src/lib/components/ui/drawer/drawer-footer.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-footer"
-	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	class={cn('gap-2 p-4 mt-auto flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/drawer/drawer-header.svelte b/web/frontend/src/lib/components/ui/drawer/drawer-header.svelte
index 4f64f24..eeadd02 100644
--- a/web/frontend/src/lib/components/ui/drawer/drawer-header.svelte
+++ b/web/frontend/src/lib/components/ui/drawer/drawer-header.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-header"
-	class={cn('flex flex-col gap-1.5 p-4', className)}
+	class={cn(
+		'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/drawer/drawer-overlay.svelte b/web/frontend/src/lib/components/ui/drawer/drawer-overlay.svelte
index fdea02b..b8f3090 100644
--- a/web/frontend/src/lib/components/ui/drawer/drawer-overlay.svelte
+++ b/web/frontend/src/lib/components/ui/drawer/drawer-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="drawer-overlay"
 	class={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-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/drawer/drawer-title.svelte b/web/frontend/src/lib/components/ui/drawer/drawer-title.svelte
index fe395f3..5ceaf9c 100644
--- a/web/frontend/src/lib/components/ui/drawer/drawer-title.svelte
+++ b/web/frontend/src/lib/components/ui/drawer/drawer-title.svelte
@@ -12,6 +12,6 @@
 <DrawerPrimitive.Title
 	bind:ref
 	data-slot="drawer-title"
-	class={cn('text-foreground font-semibold', className)}
+	class={cn('text-foreground text-base font-medium', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 335c55b..25f87fb 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 	import type { Snippet } from 'svelte';
 
@@ -23,17 +23,20 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-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",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
 			{#if indeterminate}
-				<MinusIcon class="size-4" />
-			{:else}
-				<CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
+				<MinusIcon />
+			{:else if checked}
+				<CheckIcon />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 30e8164..3bcc86b 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -7,6 +7,7 @@
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		align = 'start',
 		portalProps,
 		class: className,
 		...restProps
@@ -20,8 +21,9 @@
 		bind:ref
 		data-slot="dropdown-menu-content"
 		{sideOffset}
+		{align}
 		class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
 			className
 		)}
 		{...restProps}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index 5653c6e..2a4fdd7 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-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/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index da3afc3..2a5dbe3 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -17,7 +17,10 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
+	class={cn(
+		'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 05c953e..7dc9015 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import CircleIcon from '@lucide/svelte/icons/circle';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
@@ -15,15 +15,18 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-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",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 1a8134a..706b725 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -13,7 +13,10 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
+	class={cn(
+		'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index d2c53c0..bb1ef13 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index b50d9c2..5959a70 100644
--- a/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -19,11 +19,11 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ms-auto size-4" />
+	<ChevronRightIcon class="ml-auto" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/web/frontend/src/lib/components/ui/empty/empty-content.svelte b/web/frontend/src/lib/components/ui/empty/empty-content.svelte
index a97809e..8ea9c73 100644
--- a/web/frontend/src/lib/components/ui/empty/empty-content.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty-content.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-content"
 	class={cn(
-		'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+		'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/empty/empty-description.svelte b/web/frontend/src/lib/components/ui/empty/empty-description.svelte
index 2c83915..1e012e5 100644
--- a/web/frontend/src/lib/components/ui/empty/empty-description.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
-		'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+		'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/empty/empty-header.svelte b/web/frontend/src/lib/components/ui/empty/empty-header.svelte
index 1c8303d..0a1f1c0 100644
--- a/web/frontend/src/lib/components/ui/empty/empty-header.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-header"
-	class={cn('flex max-w-sm flex-col items-center gap-2 text-center', className)}
+	class={cn('gap-2 flex max-w-sm flex-col items-center', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/empty/empty-media.svelte b/web/frontend/src/lib/components/ui/empty/empty-media.svelte
index 5501a37..bd42547 100644
--- a/web/frontend/src/lib/components/ui/empty/empty-media.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty-media.svelte
@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4"
 			}
 		},
 		defaultVariants: {
diff --git a/web/frontend/src/lib/components/ui/empty/empty-title.svelte b/web/frontend/src/lib/components/ui/empty/empty-title.svelte
index 3b477a0..c9c345c 100644
--- a/web/frontend/src/lib/components/ui/empty/empty-title.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty-title.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-title"
-	class={cn('text-lg font-medium tracking-tight', className)}
+	class={cn('text-sm font-medium tracking-tight', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/empty/empty.svelte b/web/frontend/src/lib/components/ui/empty/empty.svelte
index 9142d08..15b6152 100644
--- a/web/frontend/src/lib/components/ui/empty/empty.svelte
+++ b/web/frontend/src/lib/components/ui/empty/empty.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty"
 	class={cn(
-		'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+		'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/input-group/index.ts b/web/frontend/src/lib/components/ui/input-group/index.ts
new file mode 100644
index 0000000..1bbeedf
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/index.ts
@@ -0,0 +1,22 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+
+export {
+	Root,
+	Addon,
+	Button,
+	Input,
+	Text,
+	Textarea,
+	//
+	Root as InputGroup,
+	Addon as InputGroupAddon,
+	Button as InputGroupButton,
+	Input as InputGroupInput,
+	Text as InputGroupText,
+	Textarea as InputGroupTextarea
+};
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group-addon.svelte b/web/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
new file mode 100644
index 0000000..39d59e5
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+				'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group-button.svelte b/web/frontend/src/lib/components/ui/input-group/input-group-button.svelte
new file mode 100644
index 0000000..bd4be14
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group-button.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'cn-input-group-button-size-sm',
+				'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group-input.svelte b/web/frontend/src/lib/components/ui/input-group/input-group-input.svelte
new file mode 100644
index 0000000..9339d57
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group-text.svelte b/web/frontend/src/lib/components/ui/input-group/input-group-text.svelte
new file mode 100644
index 0000000..e51a0fd
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group-text.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte b/web/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
new file mode 100644
index 0000000..a3b445d
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
+		className
+	)}
+	bind:value
+	{...props}
+/>
diff --git a/web/frontend/src/lib/components/ui/input-group/input-group.svelte b/web/frontend/src/lib/components/ui/input-group/input-group.svelte
new file mode 100644
index 0000000..fde1b4e
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/input-group/input-group.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/input/input.svelte b/web/frontend/src/lib/components/ui/input/input.svelte
index 9b97a11..3755bfd 100644
--- a/web/frontend/src/lib/components/ui/input/input.svelte
+++ b/web/frontend/src/lib/components/ui/input/input.svelte
@@ -25,9 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
-			'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',
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		type="file"
@@ -40,9 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-			'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',
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		{type}
diff --git a/web/frontend/src/lib/components/ui/label/label.svelte b/web/frontend/src/lib/components/ui/label/label.svelte
index 7fef72e..85497a3 100644
--- a/web/frontend/src/lib/components/ui/label/label.svelte
+++ b/web/frontend/src/lib/components/ui/label/label.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="label"
 	class={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',
+		'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/pagination/index.ts b/web/frontend/src/lib/components/ui/pagination/index.ts
new file mode 100644
index 0000000..452fe7e
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/index.ts
@@ -0,0 +1,31 @@
+import Root from './pagination.svelte';
+import Content from './pagination-content.svelte';
+import Item from './pagination-item.svelte';
+import Link from './pagination-link.svelte';
+import PrevButton from './pagination-prev-button.svelte';
+import NextButton from './pagination-next-button.svelte';
+import Ellipsis from './pagination-ellipsis.svelte';
+import Previous from './pagination-previous.svelte';
+import Next from './pagination-next.svelte';
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext
+};
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-content.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-content.svelte
new file mode 100644
index 0000000..482e9f2
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn('gap-0.5 flex items-center', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
new file mode 100644
index 0000000..7432957
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn(
+		"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
+		className
+	)}
+	{...restProps}
+>
+	<MoreHorizontalIcon />
+	<span class="sr-only">More pages</span>
+</span>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-item.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-item.svelte
new file mode 100644
index 0000000..f185bf5
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-link.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-link.svelte
new file mode 100644
index 0000000..79a7de4
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-link.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants, type ButtonSize } from '$lib/components/ui/button/index.js';
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = 'icon',
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? 'page' : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	data-size={size}
+	class={cn(
+		buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }),
+		'cn-pagination-link',
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
new file mode 100644
index 0000000..c8cf3ec
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '../button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRightIcon class={cn('size-4', className)} />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: 'ghost' }), 'pr-1.5!', className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-next.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-next.svelte
new file mode 100644
index 0000000..8587599
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-next.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pr-1.5!', className)}
+	{...restProps}
+>
+	<span class="cn-pagination-next-text hidden sm:block">Next</span>
+	<ChevronRightIcon data-icon="inline-end" />
+</PaginationPrimitive.NextButton>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
new file mode 100644
index 0000000..00f3a07
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '../button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class={cn('size-4', className)} />
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: 'ghost' }), 'pl-1.5!', className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination-previous.svelte b/web/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
new file mode 100644
index 0000000..ade7b52
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pl-1.5!', className)}
+	{...restProps}
+>
+	<ChevronLeftIcon data-icon="inline-start" />
+	<span class="cn-pagination-previous-text hidden sm:block">Previous</span>
+</PaginationPrimitive.PrevButton>
diff --git a/web/frontend/src/lib/components/ui/pagination/pagination.svelte b/web/frontend/src/lib/components/ui/pagination/pagination.svelte
new file mode 100644
index 0000000..fd3943d
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/pagination/pagination.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	{count}
+	{perPage}
+	{siblingCount}
+	class={cn('cn-pagination mx-auto flex w-full justify-center', className)}
+	{...restProps}
+/>
diff --git a/web/frontend/src/lib/components/ui/popover/index.ts b/web/frontend/src/lib/components/ui/popover/index.ts
index c5937fb..7ca18f4 100644
--- a/web/frontend/src/lib/components/ui/popover/index.ts
+++ b/web/frontend/src/lib/components/ui/popover/index.ts
@@ -1,18 +1,27 @@
 import Root from './popover.svelte';
 import Close from './popover-close.svelte';
 import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
 import Trigger from './popover-trigger.svelte';
 import Portal from './popover-portal.svelte';
 
 export {
 	Root,
 	Content,
+	Description,
+	Header,
+	Title,
 	Trigger,
 	Close,
 	Portal,
 	//
 	Root as Popover,
 	Content as PopoverContent,
+	Description as PopoverDescription,
+	Header as PopoverHeader,
+	Title as PopoverTitle,
 	Trigger as PopoverTrigger,
 	Close as PopoverClose,
 	Portal as PopoverPortal
diff --git a/web/frontend/src/lib/components/ui/popover/popover-content.svelte b/web/frontend/src/lib/components/ui/popover/popover-content.svelte
index 4bfc422..09c68b5 100644
--- a/web/frontend/src/lib/components/ui/popover/popover-content.svelte
+++ b/web/frontend/src/lib/components/ui/popover/popover-content.svelte
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden',
 			className
 		)}
 		{...restProps}
diff --git a/web/frontend/src/lib/components/ui/popover/popover-description.svelte b/web/frontend/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 0000000..0491a14
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/popover/popover-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn('text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/popover/popover-header.svelte b/web/frontend/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 0000000..0c7bbd1
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/popover/popover-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn('flex flex-col gap-0.5 text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/popover/popover-title.svelte b/web/frontend/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 0000000..cf7a141
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/popover/popover-title.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/web/frontend/src/lib/components/ui/progress/progress.svelte b/web/frontend/src/lib/components/ui/progress/progress.svelte
index 12d4a43..9b3b6b6 100644
--- a/web/frontend/src/lib/components/ui/progress/progress.svelte
+++ b/web/frontend/src/lib/components/ui/progress/progress.svelte
@@ -14,14 +14,17 @@
 <ProgressPrimitive.Root
 	bind:ref
 	data-slot="progress"
-	class={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+	class={cn(
+		'bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden',
+		className
+	)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
 		data-slot="progress-indicator"
-		class="bg-primary h-full w-full flex-1 transition-all"
+		class="bg-primary size-full flex-1 transition-all"
 		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>
diff --git a/web/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/web/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 61404cc..2dda6b2 100644
--- a/web/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/web/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -14,11 +14,10 @@
 <ScrollAreaPrimitive.Scrollbar
 	bind:ref
 	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
 	{orientation}
 	class={cn(
-		'flex touch-none p-px transition-colors select-none',
-		orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent',
-		orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+		'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
 		className
 	)}
 	{...restProps}
@@ -26,6 +25,6 @@
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		data-slot="scroll-area-thumb"
-		class="bg-border relative flex-1 rounded-full"
+		class="rounded-full bg-border relative flex-1"
 	/>
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/web/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte b/web/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
index 6935868..72cb6a8 100644
--- a/web/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/web/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -29,7 +29,7 @@
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
diff --git a/web/frontend/src/lib/components/ui/select/select-content.svelte b/web/frontend/src/lib/components/ui/select/select-content.svelte
index 99958ac..c3182b7 100644
--- a/web/frontend/src/lib/components/ui/select/select-content.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-content.svelte
@@ -27,7 +27,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto',
 			className
 		)}
 		{...restProps}
@@ -35,7 +35,7 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1'
 			)}
 		>
 			{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/select/select-group.svelte b/web/frontend/src/lib/components/ui/select/select-group.svelte
index ed67413..553f7e7 100644
--- a/web/frontend/src/lib/components/ui/select/select-group.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-group.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
-	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
 </script>
 
-<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn('scroll-my-1 p-1', className)}
+	{...restProps}
+/>
diff --git a/web/frontend/src/lib/components/ui/select/select-item.svelte b/web/frontend/src/lib/components/ui/select/select-item.svelte
index 807f19a..e337509 100644
--- a/web/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import CheckIcon from '@lucide/svelte/icons/check';
 	import { Select as SelectPrimitive } from 'bits-ui';
 	import { cn, type WithoutChild } from '$lib/utils.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
 
 	let {
 		ref = $bindable(null),
@@ -18,7 +18,7 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 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",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
@@ -26,13 +26,15 @@
 	{#snippet children({ selected, highlighted })}
 		<span class="absolute end-2 flex size-3.5 items-center justify-center">
 			{#if selected}
-				<CheckIcon class="size-4" />
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
 			{/if}
 		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
 	{/snippet}
 </SelectPrimitive.Item>
diff --git a/web/frontend/src/lib/components/ui/select/select-label.svelte b/web/frontend/src/lib/components/ui/select/select-label.svelte
index 6c76ced..a407ef6 100644
--- a/web/frontend/src/lib/components/ui/select/select-label.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-label.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	class={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte b/web/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
index 3502148..e09d2f8 100644
--- a/web/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { Select as SelectPrimitive } from 'bits-ui';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +13,11 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	class={cn(
+		"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+		className
+	)}
 	{...restProps}
 >
-	<ChevronDownIcon class="size-4" />
+	<ChevronDownIcon />
 </SelectPrimitive.ScrollDownButton>
diff --git a/web/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte b/web/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
index 3d35e04..3733213 100644
--- a/web/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 	import { Select as SelectPrimitive } from 'bits-ui';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 
 	let {
 		ref = $bindable(null),
@@ -13,8 +13,11 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	class={cn(
+		"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+		className
+	)}
 	{...restProps}
 >
-	<ChevronUpIcon class="size-4" />
+	<ChevronUpIcon />
 </SelectPrimitive.ScrollUpButton>
diff --git a/web/frontend/src/lib/components/ui/select/select-separator.svelte b/web/frontend/src/lib/components/ui/select/select-separator.svelte
index 3624d4c..d1d38ee 100644
--- a/web/frontend/src/lib/components/ui/select/select-separator.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+	class={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/select/select-trigger.svelte b/web/frontend/src/lib/components/ui/select/select-trigger.svelte
index f14abe0..fa4a133 100644
--- a/web/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
-	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { cn, type WithoutChild } from '$lib/utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
 	let {
 		ref = $bindable(null),
@@ -19,11 +19,11 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 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",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none 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 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="size-4 opacity-50" />
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
 </SelectPrimitive.Trigger>
diff --git a/web/frontend/src/lib/components/ui/separator/separator.svelte b/web/frontend/src/lib/components/ui/separator/separator.svelte
index ff1f95e..37da5e5 100644
--- a/web/frontend/src/lib/components/ui/separator/separator.svelte
+++ b/web/frontend/src/lib/components/ui/separator/separator.svelte
@@ -14,7 +14,9 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px',
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		'data-[orientation=vertical]:h-full',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sheet/sheet-content.svelte b/web/frontend/src/lib/components/ui/sheet/sheet-content.svelte
index 76535b6..96b28b4 100644
--- a/web/frontend/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/web/frontend/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,31 +1,14 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
-	export const sheetVariants = tv({
-		base: '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: {
-				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-				bottom:
-					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-				left: 'data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
-				right:
-					'data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm'
-			}
-		},
-		defaultVariants: {
-			side: 'right'
-		}
-	});
-
-	export type Side = VariantProps<typeof sheetVariants>['side'];
+	export type Side = 'top' | 'right' | 'bottom' | 'left';
 </script>
 
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from 'bits-ui';
-	import XIcon from '@lucide/svelte/icons/x';
 	import type { Snippet } from 'svelte';
 	import SheetPortal from './sheet-portal.svelte';
 	import SheetOverlay from './sheet-overlay.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import XIcon from '@lucide/svelte/icons/x';
 	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 	import type { ComponentProps } from 'svelte';
 
@@ -33,12 +16,14 @@
 		ref = $bindable(null),
 		class: className,
 		side = 'right',
+		showCloseButton = true,
 		portalProps,
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
+		showCloseButton?: boolean;
 		children: Snippet;
 	} = $props();
 </script>
@@ -48,15 +33,23 @@
 	<SheetPrimitive.Content
 		bind:ref
 		data-slot="sheet-content"
-		class={cn(sheetVariants({ side }), className)}
+		data-side={side}
+		class={cn(
+			'bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10',
+			className
+		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
-		>
-			<XIcon class="size-4" />
-			<span class="sr-only">Close</span>
-		</SheetPrimitive.Close>
+		{#if showCloseButton}
+			<SheetPrimitive.Close data-slot="sheet-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</SheetPrimitive.Close>
+		{/if}
 	</SheetPrimitive.Content>
 </SheetPortal>
diff --git a/web/frontend/src/lib/components/ui/sheet/sheet-footer.svelte b/web/frontend/src/lib/components/ui/sheet/sheet-footer.svelte
index aea83f7..c0a3cdb 100644
--- a/web/frontend/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/web/frontend/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-footer"
-	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	class={cn('gap-2 p-4 mt-auto flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sheet/sheet-header.svelte b/web/frontend/src/lib/components/ui/sheet/sheet-header.svelte
index 00cd281..2b22591 100644
--- a/web/frontend/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/web/frontend/src/lib/components/ui/sheet/sheet-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="sheet-header"
-	class={cn('flex flex-col gap-1.5 p-4', className)}
+	class={cn('gap-0.5 p-4 flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte b/web/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
index 2246de0..77aaddc 100644
--- a/web/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/web/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -12,9 +12,6 @@
 <SheetPrimitive.Overlay
 	bind:ref
 	data-slot="sheet-overlay"
-	class={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',
-		className
-	)}
+	class={cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/sheet/sheet-title.svelte b/web/frontend/src/lib/components/ui/sheet/sheet-title.svelte
index 34081c9..4ea1e04 100644
--- a/web/frontend/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/web/frontend/src/lib/components/ui/sheet/sheet-title.svelte
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn('text-foreground font-semibold', className)}
+	class={cn('text-foreground text-base font-medium', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/sidebar/constants.ts b/web/frontend/src/lib/components/ui/sidebar/constants.ts
index 2d3bbfb..9e59823 100644
--- a/web/frontend/src/lib/components/ui/sidebar/constants.ts
+++ b/web/frontend/src/lib/components/ui/sidebar/constants.ts
@@ -1,4 +1,4 @@
-export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = '16rem';
 export const SIDEBAR_WIDTH_MOBILE = '18rem';
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-content.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-content.svelte
index f1d195e..ae3f8a7 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-content.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -15,7 +15,7 @@
 	data-slot="sidebar-content"
 	data-sidebar="content"
 	class={cn(
-		'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+		'no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-footer.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-footer.svelte
index 24d67f6..1043e28 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-footer.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-footer"
 	data-sidebar="footer"
-	class={cn('flex flex-col gap-2 p-2', className)}
+	class={cn('gap-2 p-2 flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
index a283bed..f621a3e 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -15,10 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-			// Increases the hit area of the button on mobile.
-			'after:absolute after:-inset-2 md:after:hidden',
-			'group-data-[collapsible=icon]:hidden',
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
 			className
 		),
 		'data-slot': 'sidebar-group-action',
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-content.svelte
index fafacee..5aaa592 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-content.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group-content"
 	data-sidebar="group-content"
-	class={cn('w-full text-sm', className)}
+	class={cn('text-sm w-full', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
index c1c166f..4d99dd4 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -15,8 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-			'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+			'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0',
 			className
 		),
 		'data-slot': 'sidebar-group-label',
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-group.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-group.svelte
index 897445d..5f097ca 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-group.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-group"
 	data-sidebar="group"
-	class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+	class={cn('p-2 relative flex w-full min-w-0 flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-header.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-header.svelte
index a546474..4eb8268 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-header.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-header"
 	data-sidebar="header"
-	class={cn('flex flex-col gap-2 p-2', className)}
+	class={cn('gap-2 p-2 flex flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-inset.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-inset.svelte
index bb5ac7b..ad85c16 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-inset.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -14,8 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-inset"
 	class={cn(
-		'bg-background relative flex min-w-0 w-full flex-1 flex-col',
-		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2',
+		'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
index 6ec7cf4..ba4e5b9 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -17,15 +17,9 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-			// Increases the hit area of the button on mobile.
-			'after:absolute after:-inset-2 md:after:hidden',
-			'peer-data-[size=sm]/menu-button:top-1',
-			'peer-data-[size=default]/menu-button:top-1.5',
-			'peer-data-[size=lg]/menu-button:top-2.5',
-			'group-data-[collapsible=icon]:hidden',
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0',
 			showOnHover &&
-				'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+				'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
 			className
 		),
 		'data-slot': 'sidebar-menu-action',
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
index 08cef39..44e86d9 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -15,12 +15,7 @@
 	data-slot="sidebar-menu-badge"
 	data-sidebar="menu-badge"
 	class={cn(
-		'text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-		'peer-data-[size=sm]/menu-button:top-1',
-		'peer-data-[size=default]/menu-button:top-1.5',
-		'peer-data-[size=lg]/menu-button:top-2.5',
-		'group-data-[collapsible=icon]:hidden',
+		'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
index a81b3e9..ac1930d 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const sidebarMenuButtonVariants = tv({
-		base: 'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+		base: 'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
 		variants: {
 			variant: {
 				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
index 49a18f1..b65b374 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -21,7 +21,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu-skeleton"
 	data-sidebar="menu-skeleton"
-	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+	class={cn('h-8 gap-2 rounded-md px-2 flex items-center', className)}
 	{...restProps}
 >
 	{#if showIcon}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
index ba5849b..78a3074 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -19,11 +19,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-			size === 'sm' && 'text-xs',
-			size === 'md' && 'text-sm',
-			'group-data-[collapsible=icon]:hidden',
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
 			className
 		),
 		'data-slot': 'sidebar-menu-sub-button',
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
index 46e9e43..28979b1 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -15,8 +15,7 @@
 	data-slot="sidebar-menu-sub"
 	data-sidebar="menu-sub"
 	class={cn(
-		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5',
-		'group-data-[collapsible=icon]:hidden',
+		'border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu.svelte
index 094f0f0..393963e 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-menu.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="sidebar-menu"
 	data-sidebar="menu"
-	class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+	class={cn('gap-0 flex w-full min-w-0 flex-col', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
index 0c3ada5..776a5d8 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -18,16 +18,16 @@
 	data-sidebar="rail"
 	data-slot="sidebar-rail"
 	aria-label="Toggle Sidebar"
-	tabIndex={-1}
+	tabindex={-1}
 	onclick={sidebar.toggle}
 	title="Toggle Sidebar"
 	class={cn(
-		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-[calc(1/2*100%-1px)] after:w-[2px] sm:flex',
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
 		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
 		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full',
-		'[[data-side=left][data-collapsible=offcanvas]_&]:-end-2',
-		'[[data-side=right][data-collapsible=offcanvas]_&]:-start-2',
+		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-separator.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-separator.svelte
index 45c1ebc..2fbe522 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-separator.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn('bg-sidebar-border', className)}
+	class={cn('bg-sidebar-border mx-2 w-auto', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
index 285e6c4..58fce6b 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils.js';
 	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import { cn } from '$lib/utils.js';
 	import type { ComponentProps } from 'svelte';
 	import { useSidebar } from './context.svelte.js';
 
@@ -18,11 +18,12 @@
 </script>
 
 <Button
+	bind:ref
 	data-sidebar="trigger"
 	data-slot="sidebar-trigger"
 	variant="ghost"
-	size="icon"
-	class={cn('size-7', className)}
+	size="icon-sm"
+	class={cn('cn-sidebar-trigger', className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
diff --git a/web/frontend/src/lib/components/ui/sidebar/sidebar.svelte b/web/frontend/src/lib/components/ui/sidebar/sidebar.svelte
index 4355c62..a712880 100644
--- a/web/frontend/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/web/frontend/src/lib/components/ui/sidebar/sidebar.svelte
@@ -36,10 +36,14 @@
 {:else if sidebar.isMobile}
 	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
 		<Sheet.Content
+			bind:ref
 			data-sidebar="sidebar"
 			data-slot="sidebar"
 			data-mobile="true"
-			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			class={cn(
+				'bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden',
+				className
+			)}
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -66,11 +70,11 @@
 		<div
 			data-slot="sidebar-gap"
 			class={cn(
-				'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+				'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
 				'group-data-[collapsible=offcanvas]:w-0',
 				'group-data-[side=right]:rotate-180',
 				variant === 'floating' || variant === 'inset'
-					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
 					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
 			)}
 		></div>
@@ -92,7 +96,7 @@
 			<div
 				data-sidebar="sidebar"
 				data-slot="sidebar-inner"
-				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
 			>
 				{@render children?.()}
 			</div>
diff --git a/web/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/web/frontend/src/lib/components/ui/skeleton/skeleton.svelte
index 35b8577..05850c4 100644
--- a/web/frontend/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/web/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-accent animate-pulse rounded-md', className)}
+	class={cn('bg-muted rounded-md animate-pulse', className)}
 	{...restProps}
 ></div>
diff --git a/web/frontend/src/lib/components/ui/sonner/index.ts b/web/frontend/src/lib/components/ui/sonner/index.ts
index 1ad9f4a..fcaf06b 100644
--- a/web/frontend/src/lib/components/ui/sonner/index.ts
+++ b/web/frontend/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
diff --git a/web/frontend/src/lib/components/ui/sonner/sonner.svelte b/web/frontend/src/lib/components/ui/sonner/sonner.svelte
index 34b456d..eee0b4d 100644
--- a/web/frontend/src/lib/components/ui/sonner/sonner.svelte
+++ b/web/frontend/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
 	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
 	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
diff --git a/web/frontend/src/lib/components/ui/switch/switch.svelte b/web/frontend/src/lib/components/ui/switch/switch.svelte
index ce291f3..320b3ce 100644
--- a/web/frontend/src/lib/components/ui/switch/switch.svelte
+++ b/web/frontend/src/lib/components/ui/switch/switch.svelte
@@ -6,24 +6,26 @@
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
+		size = 'default',
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: 'sm' | 'default';
+	} = $props();
 </script>
 
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
+	data-size={size}
 	class={cn(
-		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class={cn(
-			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-		)}
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 	/>
 </SwitchPrimitive.Root>
diff --git a/web/frontend/src/lib/components/ui/table/table-cell.svelte b/web/frontend/src/lib/components/ui/table/table-cell.svelte
index 654f2f2..1fb325b 100644
--- a/web/frontend/src/lib/components/ui/table/table-cell.svelte
+++ b/web/frontend/src/lib/components/ui/table/table-cell.svelte
@@ -13,10 +13,7 @@
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn(
-		'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-		className
-	)}
+	class={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/frontend/src/lib/components/ui/table/table-head.svelte b/web/frontend/src/lib/components/ui/table/table-head.svelte
index 336924a..1ef7f1d 100644
--- a/web/frontend/src/lib/components/ui/table/table-head.svelte
+++ b/web/frontend/src/lib/components/ui/table/table-head.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-head"
 	class={cn(
-		'text-foreground h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+		'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/table/table-row.svelte b/web/frontend/src/lib/components/ui/table/table-row.svelte
index 57e044e..d0d5fed 100644
--- a/web/frontend/src/lib/components/ui/table/table-row.svelte
+++ b/web/frontend/src/lib/components/ui/table/table-row.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		'hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/tabs/index.ts b/web/frontend/src/lib/components/ui/tabs/index.ts
index d2a7939..2ea3623 100644
--- a/web/frontend/src/lib/components/ui/tabs/index.ts
+++ b/web/frontend/src/lib/components/ui/tabs/index.ts
@@ -1,6 +1,6 @@
 import Root from './tabs.svelte';
 import Content from './tabs-content.svelte';
-import List from './tabs-list.svelte';
+import List, { tabsListVariants, type TabsListVariant } from './tabs-list.svelte';
 import Trigger from './tabs-trigger.svelte';
 
 export {
@@ -8,6 +8,8 @@ export {
 	Content,
 	List,
 	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
 	//
 	Root as Tabs,
 	Content as TabsContent,
diff --git a/web/frontend/src/lib/components/ui/tabs/tabs-content.svelte b/web/frontend/src/lib/components/ui/tabs/tabs-content.svelte
index 92044c8..b3f2136 100644
--- a/web/frontend/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/web/frontend/src/lib/components/ui/tabs/tabs-content.svelte
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn('flex-1 outline-none', className)}
+	class={cn('text-sm flex-1 outline-none', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/web/frontend/src/lib/components/ui/tabs/tabs-list.svelte
index e875fe4..e9e262a 100644
--- a/web/frontend/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/web/frontend/src/lib/components/ui/tabs/tabs-list.svelte
@@ -1,16 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const tabsListVariants = tv({
+		base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+		variants: {
+			variant: {
+				default: 'cn-tabs-list-variant-default bg-muted',
+				line: 'cn-tabs-list-variant-line gap-1 bg-transparent'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+</script>
+
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
-	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		variant = 'default',
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
-	class={cn(
-		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-		className
-	)}
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte b/web/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
index 8dac6c5..d24e2a8 100644
--- a/web/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -13,7 +13,10 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+		'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+		'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/tabs/tabs.svelte b/web/frontend/src/lib/components/ui/tabs/tabs.svelte
index b275bda..4adebd0 100644
--- a/web/frontend/src/lib/components/ui/tabs/tabs.svelte
+++ b/web/frontend/src/lib/components/ui/tabs/tabs.svelte
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn('flex flex-col gap-2', className)}
+	class={cn('gap-2 group/tabs flex data-[orientation=horizontal]:flex-col', className)}
 	{...restProps}
 />
diff --git a/web/frontend/src/lib/components/ui/textarea/index.ts b/web/frontend/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..9ccb3bf
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};
diff --git a/web/frontend/src/lib/components/ui/textarea/textarea.svelte b/web/frontend/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..00ad9f3
--- /dev/null
+++ b/web/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/web/frontend/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/web/frontend/src/lib/components/ui/toggle-group/toggle-group-item.svelte
index 2948447..3825e38 100644
--- a/web/frontend/src/lib/components/ui/toggle-group/toggle-group-item.svelte
+++ b/web/frontend/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -23,11 +23,11 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
+		'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size
 		}),
-		'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
 		className
 	)}
 	{value}
diff --git a/web/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte b/web/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
index a445709..b8f9c79 100644
--- a/web/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
+++ b/web/frontend/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -7,6 +7,7 @@
 
 	interface ToggleGroupContext extends ToggleVariants {
 		spacing?: number;
+		orientation?: 'horizontal' | 'vertical';
 	}
 
 	export function setToggleGroupCtx(props: ToggleGroupContext) {
@@ -28,14 +29,28 @@
 		class: className,
 		size = 'default',
 		spacing = 0,
+		orientation = 'horizontal',
 		variant = 'default',
 		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: 'horizontal' | 'vertical';
+		} = $props();
 
 	setToggleGroupCtx({
-		variant,
-		size,
-		spacing
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		}
 	});
 </script>
 
@@ -46,13 +61,14 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
+	{orientation}
 	data-slot="toggle-group"
 	data-variant={variant}
 	data-size={size}
 	data-spacing={spacing}
 	style={`--gap: ${spacing}`}
 	class={cn(
-		'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+		'rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
 		className
 	)}
 	{...restProps}
diff --git a/web/frontend/src/lib/components/ui/toggle/toggle.svelte b/web/frontend/src/lib/components/ui/toggle/toggle.svelte
index 43cfcfc..850151b 100644
--- a/web/frontend/src/lib/components/ui/toggle/toggle.svelte
+++ b/web/frontend/src/lib/components/ui/toggle/toggle.svelte
@@ -2,17 +2,17 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline:
-					'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs'
+				outline: 'border-input hover:bg-muted border bg-transparent'
 			},
 			size: {
-				default: 'h-9 min-w-9 px-2',
-				sm: 'h-8 min-w-8 px-1.5',
-				lg: 'h-10 min-w-10 px-2.5'
+				default:
+					'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
 			}
 		},
 		defaultVariants: {
diff --git a/web/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/web/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
index 6a1fd10..9908a41 100644
--- a/web/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/web/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)',
 			className
 		)}
 		{...restProps}
@@ -37,11 +37,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						'bg-foreground z-50 size-2.5 rotate-45 rounded-[2px]',
-						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
-						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
-						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
-						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						'size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
+						'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%-3px)]',
 						arrowClasses
 					)}
 					{...props}
diff --git a/web/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte b/web/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
index b3bb5b7..fde5bb2 100644
--- a/web/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
+++ b/web/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>
 
-<TooltipPrimitive.Provider {...restProps} />
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/web/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/web/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
index 5631d1b..0f04162 100644
--- a/web/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
+++ b/web/frontend/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/web/frontend/src/lib/components/ui/tooltip/tooltip.svelte b/web/frontend/src/lib/components/ui/tooltip/tooltip.svelte
index 7c9d712..16eeb70 100644
--- a/web/frontend/src/lib/components/ui/tooltip/tooltip.svelte
+++ b/web/frontend/src/lib/components/ui/tooltip/tooltip.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Root bind:open {...restProps} />
diff --git a/web/frontend/src/lib/stores/scenario-tracker.svelte.ts b/web/frontend/src/lib/stores/scenario-tracker.svelte.ts
index 1156983..adfb9b0 100644
--- a/web/frontend/src/lib/stores/scenario-tracker.svelte.ts
+++ b/web/frontend/src/lib/stores/scenario-tracker.svelte.ts
@@ -69,7 +69,9 @@ export class ScenarioTracker {
 			if (s.status === 'completed' && s.isSuccess !== null) {
 				updated[s.name] = { name: s.name, status: 'completed', result: s };
 			} else {
-				updated[s.name] = { name: s.name, status: s.status, phase: s.phase };
+				// Carry the partial result for running/pending rows too, so the UI
+				// can surface mid-run executor identity and incremental assertions.
+				updated[s.name] = { name: s.name, status: s.status, phase: s.phase, result: s };
 			}
 		}
 		this.entries = updated;
diff --git a/web/frontend/src/lib/utils/format.ts b/web/frontend/src/lib/utils/format.ts
index a610f59..b8fd2f2 100644
--- a/web/frontend/src/lib/utils/format.ts
+++ b/web/frontend/src/lib/utils/format.ts
@@ -27,6 +27,26 @@ export function formatTime(dateStr: string): string {
 	return new Date(dateStr).toLocaleString();
 }
 
+/**
+ * Compact, scannable relative time ("just now", "5m ago", "2h ago", "yesterday",
+ * "3d ago") falling back to a short date for anything older than a week. Pair with
+ * a tooltip showing the absolute time via formatTime().
+ */
+export function formatRelativeTime(dateStr: string): string {
+	const then = new Date(dateStr).getTime();
+	if (Number.isNaN(then)) return '--';
+	const secs = Math.floor((Date.now() - then) / 1000);
+	if (secs < 45) return 'just now';
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	const hours = Math.floor(mins / 60);
+	if (hours < 24) return `${hours}h ago`;
+	const days = Math.floor(hours / 24);
+	if (days === 1) return 'yesterday';
+	if (days < 7) return `${days}d ago`;
+	return new Date(then).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
 export function scenarioTypeVariant(type?: ScenarioType | string): 'default' | 'secondary' | 'outline' {
 	switch (type) {
 		case 'explore':
diff --git a/web/frontend/src/routes/+layout.svelte b/web/frontend/src/routes/+layout.svelte
index 983fb99..db3507e 100644
--- a/web/frontend/src/routes/+layout.svelte
+++ b/web/frontend/src/routes/+layout.svelte
@@ -101,7 +101,7 @@
 							</DropdownMenu.Label>
 							<DropdownMenu.Separator />
 							<DropdownMenu.Item onclick={() => auth.logout()}>
-								<LogOutIcon class="mr-2 h-4 w-4" />
+								<LogOutIcon />
 								Log out
 							</DropdownMenu.Item>
 						</DropdownMenu.Content>
diff --git a/web/frontend/src/routes/assessments/+page.svelte b/web/frontend/src/routes/assessments/+page.svelte
index 05623d1..4580ce1 100644
--- a/web/frontend/src/routes/assessments/+page.svelte
+++ b/web/frontend/src/routes/assessments/+page.svelte
@@ -19,6 +19,8 @@
 		statusVariant,
 		formatDuration,
 		formatUserEmail,
+		formatRelativeTime,
+		formatTime,
 		scenarioTypeVariant
 	} from '$lib/utils/format';
 	import type { Run, ScenarioType, AppConfig } from '$lib/types';
@@ -76,6 +78,9 @@
 	let page = $state(1);
 	let perPage = $state<number>(50);
 
+	// Running assessments visible on the current page — drives the live header pill.
+	const runningCount = $derived(pageRuns.filter((r) => r.status === 'running').length);
+
 	// Filter state — seeded from URL on mount, persisted via goto() on change.
 	let nameFilter = $state('');
 	let typeFilter = $state<string[]>([]);
@@ -300,14 +305,24 @@
 
 <div class="space-y-6">
 	<div class="flex items-center justify-between">
-		<h1 class="text-2xl font-bold">Assessment History</h1>
+		<div class="flex items-center gap-3">
+			<h1 class="text-2xl font-bold">Assessment History</h1>
+			{#if runningCount > 0}
+				<span
+					class="inline-flex items-center gap-1.5 rounded-full border border-status-processing/35 bg-status-processing/10 px-2.5 py-0.5 font-mono text-xs text-status-processing"
+				>
+					<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-status-processing"></span>
+					{runningCount} running
+				</span>
+			{/if}
+		</div>
 		<div class="flex items-center gap-2">
 			<Button variant="outline" onclick={openRetention}>
-				<TimerIcon class="mr-2 h-4 w-4" />
+				<TimerIcon data-icon="inline-start" />
 				Retention
 			</Button>
 			<Button onclick={() => (newAssessmentOpen = true)}>
-				<PlusIcon class="mr-2 h-4 w-4" />
+				<PlusIcon data-icon="inline-start" />
 				New Assessment
 			</Button>
 		</div>
@@ -364,7 +379,7 @@
 
 		{#if hasActiveFilters}
 			<Button variant="ghost" size="sm" class="h-9" onclick={clearFilters}>
-				<XIcon class="mr-1 h-4 w-4" />
+				<XIcon data-icon="inline-start" />
 				Clear filters
 			</Button>
 		{/if}
@@ -400,12 +415,12 @@
 			<Empty.Content>
 				{#if hasActiveFilters}
 					<Button variant="outline" onclick={clearFilters}>
-						<XIcon class="mr-2 h-4 w-4" />
+						<XIcon data-icon="inline-start" />
 						Clear filters
 					</Button>
 				{:else}
 					<Button onclick={() => (newAssessmentOpen = true)}>
-						<PlusIcon class="mr-2 h-4 w-4" />
+						<PlusIcon data-icon="inline-start" />
 						New Assessment
 					</Button>
 				{/if}
@@ -420,24 +435,31 @@
 						<Table.Head>Status</Table.Head>
 						<Table.Head>Scenario</Table.Head>
 						<Table.Head>Type</Table.Head>
-						<Table.Head>Total</Table.Head>
-						<Table.Head>Passed</Table.Head>
-						<Table.Head>Failed</Table.Head>
+						<Table.Head class="w-[200px]">Results</Table.Head>
 						<Table.Head>Started By</Table.Head>
-						<Table.Head>Start Time</Table.Head>
+						<Table.Head>Started</Table.Head>
 						<Table.Head>Duration</Table.Head>
 						<Table.Head class="w-10"></Table.Head>
 					</Table.Row>
 				</Table.Header>
 				<Table.Body>
-					{#each pageRuns as run}
+					{#each pageRuns as run (run.id)}
+						{@const pending = Math.max(0, run.total - run.succeeded - run.failed)}
 						<Table.Row
 							class="cursor-pointer hover:bg-accent/50 transition-colors"
 							onclick={() => goto(`/assessments/${run.id}`)}
 						>
-							<Table.Cell class="font-mono text-xs">{run.id.slice(0, 8)}</Table.Cell>
+							<Table.Cell class="font-mono text-xs">
+								{run.id.slice(0, 8)}
+							</Table.Cell>
 							<Table.Cell>
-								<Badge variant={statusVariant(run.status)}>{run.status}</Badge>
+								<Badge variant={statusVariant(run.status)} class="gap-1.5">
+									{#if run.status === 'running'}
+										<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-status-processing"
+										></span>
+									{/if}
+									{run.status}
+								</Badge>
 							</Table.Cell>
 							<Table.Cell class="max-w-[200px] truncate">
 								{run.scenarioName || '--'}
@@ -449,9 +471,35 @@
 									<span class="text-muted-foreground text-xs">--</span>
 								{/if}
 							</Table.Cell>
-							<Table.Cell>{run.total}</Table.Cell>
-							<Table.Cell class="text-success">{run.succeeded}</Table.Cell>
-							<Table.Cell class={run.failed > 0 ? 'text-destructive' : ''}>{run.failed}</Table.Cell>
+							<Table.Cell>
+								{#if run.total > 0}
+									<div class="flex items-center gap-2.5">
+										<div class="flex h-[7px] w-24 overflow-hidden rounded-full bg-muted">
+											<div
+												class="h-full bg-status-success"
+												style="width: {(run.succeeded / run.total) * 100}%"
+											></div>
+											<div
+												class="h-full bg-status-error"
+												style="width: {(run.failed / run.total) * 100}%"
+											></div>
+											{#if pending > 0}
+												<div
+													class="h-full bg-status-processing/40"
+													style="width: {(pending / run.total) * 100}%"
+												></div>
+											{/if}
+										</div>
+										<span class="font-mono text-xs whitespace-nowrap">
+											<span class="font-medium text-status-success">{run.succeeded}</span><span
+												class="text-muted-foreground">/{run.total}</span
+											>
+										</span>
+									</div>
+								{:else}
+									<span class="text-muted-foreground text-xs">--</span>
+								{/if}
+							</Table.Cell>
 							<Table.Cell>
 								<Tooltip.Root>
 									<Tooltip.Trigger class="text-muted-foreground text-xs cursor-default">
@@ -460,8 +508,17 @@
 									<Tooltip.Content>{run.createdBy}</Tooltip.Content>
 								</Tooltip.Root>
 							</Table.Cell>
-							<Table.Cell>{new Date(run.startTime).toLocaleString()}</Table.Cell>
-							<Table.Cell>{formatDuration(run.startTime, run.endTime)}</Table.Cell>
+							<Table.Cell>
+								<Tooltip.Root>
+									<Tooltip.Trigger class="cursor-default whitespace-nowrap">
+										{formatRelativeTime(run.startTime)}
+									</Tooltip.Trigger>
+									<Tooltip.Content>{formatTime(run.startTime)}</Tooltip.Content>
+								</Tooltip.Root>
+							</Table.Cell>
+							<Table.Cell class="font-mono text-xs tabular-nums"
+								>{formatDuration(run.startTime, run.endTime)}</Table.Cell
+							>
 							<Table.Cell>
 								<Button
 									variant="ghost"
diff --git a/web/frontend/src/routes/assessments/[runId]/+page.svelte b/web/frontend/src/routes/assessments/[runId]/+page.svelte
index a15222a..09bb3dc 100644
--- a/web/frontend/src/routes/assessments/[runId]/+page.svelte
+++ b/web/frontend/src/routes/assessments/[runId]/+page.svelte
@@ -22,8 +22,6 @@
 	import CalendarClockIcon from '@lucide/svelte/icons/calendar-clock';
 	import FileTextIcon from '@lucide/svelte/icons/file-text';
 	import TrashIcon from '@lucide/svelte/icons/trash-2';
-	import CheckCircleIcon from '@lucide/svelte/icons/circle-check';
-	import XCircleIcon from '@lucide/svelte/icons/circle-x';
 	import ClockIcon from '@lucide/svelte/icons/clock';
 	import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
 
@@ -48,6 +46,13 @@
 	const total = $derived($currentRun?.total ?? 0);
 	const succeededPct = $derived(total > 0 ? (trackerSucceeded / total) * 100 : 0);
 	const failedPct = $derived(total > 0 ? (trackerFailed / total) * 100 : 0);
+	const pendingPct = $derived(Math.max(0, 100 - succeededPct - failedPct));
+
+	// Pass-rate gauge ring geometry.
+	const GAUGE_R = 52;
+	const GAUGE_CIRC = 2 * Math.PI * GAUGE_R;
+	const gaugeOffset = $derived(GAUGE_CIRC * (1 - succeededPct / 100));
+	const passPct = $derived(Math.round(succeededPct));
 
 	function stopPolling() {
 		if (pollTimer) {
@@ -164,105 +169,145 @@
 			</Breadcrumb.List>
 		</Breadcrumb.Root>
 
-		<div class="rounded-lg border bg-card animate-fade-up stagger-2">
-			<div class="flex items-start justify-between gap-4 px-5 pt-4 pb-3">
-				<div class="min-w-0 space-y-1">
-					<div class="flex items-center gap-2.5">
-						<h1 class="text-lg font-bold font-mono leading-none">{$currentRun.id.slice(0, 8)}</h1>
-						<Badge variant={statusVariant($currentRun.status)}>
-							{$currentRun.status}
-						</Badge>
-						{#if $currentRun.scenarioType}
-							<Badge
-								variant={$currentRun.scenarioType === 'explore'
-									? 'secondary'
-									: $currentRun.scenarioType === 'collect'
-										? 'outline'
-										: 'default'}
-							>
-								{$currentRun.scenarioType}
-							</Badge>
-						{/if}
-					</div>
+		<div
+			class="animate-fade-up stagger-2 flex flex-col gap-6 rounded-lg border bg-card p-5 sm:flex-row sm:items-center sm:gap-7"
+		>
+			<!-- Pass-rate gauge -->
+			<div class="relative h-[128px] w-[128px] shrink-0 self-center sm:self-auto">
+				<svg class="h-full w-full -rotate-90" viewBox="0 0 128 128">
+					<circle cx="64" cy="64" r={GAUGE_R} fill="none" class="stroke-muted" stroke-width="10" />
+					<circle
+						cx="64"
+						cy="64"
+						r={GAUGE_R}
+						fill="none"
+						class="stroke-primary transition-[stroke-dashoffset] duration-700 ease-out"
+						stroke-width="10"
+						stroke-linecap="round"
+						stroke-dasharray={GAUGE_CIRC}
+						stroke-dashoffset={gaugeOffset}
+					/>
+				</svg>
+				<div class="absolute inset-0 flex flex-col items-center justify-center">
+					<span class="font-mono text-4xl font-bold leading-none tabular-nums">{passPct}</span>
+					<span class="mt-1 font-mono text-xs text-muted-foreground">% passed</span>
+				</div>
+			</div>
 
-					<div class="flex items-center gap-3 text-sm text-muted-foreground flex-wrap">
-						{#if $currentRun.scenarioId}
-							<span class="inline-flex items-center gap-1">
-								<FileTextIcon class="h-3.5 w-3.5 shrink-0" />
-								{#if scenarioName}
-									<a
-										href={`/scenarios/${$currentRun.scenarioId}`}
-										class="text-foreground hover:underline underline-offset-2 truncate max-w-[240px]"
-									>
-										{scenarioName}
-									</a>
-								{:else}
-									<span class="font-mono">{$currentRun.scenarioId.slice(0, 8)}</span>
-								{/if}
-							</span>
-						{/if}
-						{#if $currentRun.scheduleName}
-							<span class="inline-flex items-center gap-1">
-								<CalendarClockIcon class="h-3.5 w-3.5 shrink-0" />
-								<span>{$currentRun.scheduleName}</span>
-							</span>
-						{:else if $currentRun.createdBy && $currentRun.createdBy !== 'anonymous'}
+			<!-- Identity + detection rail + tallies -->
+			<div class="min-w-0 flex-1">
+				<div class="flex items-start justify-between gap-4">
+					<div class="min-w-0">
+						<div class="flex flex-wrap items-center gap-2.5">
+							<h1 class="font-mono text-lg font-bold leading-none">{$currentRun.id.slice(0, 8)}</h1>
+							<Badge variant={statusVariant($currentRun.status)}>{$currentRun.status}</Badge>
+							{#if $currentRun.scenarioType}
+								<Badge
+									variant={$currentRun.scenarioType === 'explore'
+										? 'secondary'
+										: $currentRun.scenarioType === 'collect'
+											? 'outline'
+											: 'default'}
+								>
+									{$currentRun.scenarioType}
+								</Badge>
+							{/if}
+						</div>
+
+						<div
+							class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground"
+						>
+							{#if $currentRun.scenarioId}
+								<span class="inline-flex items-center gap-1">
+									<FileTextIcon class="h-3.5 w-3.5 shrink-0" />
+									{#if scenarioName}
+										<a
+											href={`/scenarios/${$currentRun.scenarioId}`}
+											class="max-w-[240px] truncate text-foreground underline-offset-2 hover:underline"
+										>
+											{scenarioName}
+										</a>
+									{:else}
+										<span class="font-mono">{$currentRun.scenarioId.slice(0, 8)}</span>
+									{/if}
+								</span>
+							{/if}
+							{#if $currentRun.scheduleName}
+								<span class="inline-flex items-center gap-1">
+									<CalendarClockIcon class="h-3.5 w-3.5 shrink-0" />
+									<span>{$currentRun.scheduleName}</span>
+								</span>
+							{:else if $currentRun.createdBy && $currentRun.createdBy !== 'anonymous'}
+								<span class="inline-flex items-center gap-1">
+									<UserIcon class="h-3.5 w-3.5 shrink-0" />
+									<Tooltip.Root>
+										<Tooltip.Trigger class="cursor-default">
+											{formatUserEmail($currentRun.createdBy)}
+										</Tooltip.Trigger>
+										<Tooltip.Content>{$currentRun.createdBy}</Tooltip.Content>
+									</Tooltip.Root>
+								</span>
+							{/if}
 							<span class="inline-flex items-center gap-1">
-								<UserIcon class="h-3.5 w-3.5 shrink-0" />
-								<Tooltip.Root>
-									<Tooltip.Trigger class="cursor-default">
-										{formatUserEmail($currentRun.createdBy)}
-									</Tooltip.Trigger>
-									<Tooltip.Content>{$currentRun.createdBy}</Tooltip.Content>
-								</Tooltip.Root>
+								<ClockIcon class="h-3.5 w-3.5 shrink-0" />
+								<span class="font-mono text-xs">
+									{formatDuration($currentRun.startTime, $currentRun.endTime)}
+								</span>
 							</span>
-						{/if}
-						<span class="inline-flex items-center gap-1">
-							<ClockIcon class="h-3.5 w-3.5 shrink-0" />
-							<span class="font-mono text-xs"
-								>{formatDuration($currentRun.startTime, $currentRun.endTime)}</span
-							>
-						</span>
+						</div>
 					</div>
-				</div>
 
-				<Button
-					variant="ghost"
-					size="icon"
-					class="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
-					onclick={() => (deleteDialogOpen = true)}
-				>
-					<TrashIcon class="h-4 w-4" />
-				</Button>
-			</div>
+					<Button
+						variant="ghost"
+						size="icon"
+						class="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
+						onclick={() => (deleteDialogOpen = true)}
+					>
+						<TrashIcon class="h-4 w-4" />
+					</Button>
+				</div>
 
-			<div class="px-5 pb-4 pt-1">
-				<div class="flex items-center gap-3">
-					<div class="bg-muted relative h-1.5 overflow-hidden rounded-full flex-1">
-						<div
-							class="bg-success h-full transition-all duration-500 ease-out absolute left-0 top-0"
-							style="width: {succeededPct}%"
-						></div>
+				<!-- Segmented pass / fail / pending rail -->
+				<div class="mt-4 flex h-2.5 overflow-hidden rounded-full bg-muted">
+					<div
+						class="h-full bg-status-success transition-all duration-500 ease-out"
+						style="width: {succeededPct}%"
+					></div>
+					<div
+						class="h-full bg-status-error transition-all duration-500 ease-out"
+						style="width: {failedPct}%"
+					></div>
+					{#if pendingPct > 0}
 						<div
-							class="bg-destructive h-full transition-all duration-500 ease-out absolute top-0"
-							style="left: {succeededPct}%; width: {failedPct}%"
+							class="h-full bg-status-processing/40 transition-all duration-500 ease-out"
+							style="width: {pendingPct}%"
 						></div>
-					</div>
-					<div class="flex items-center gap-2.5 text-xs text-muted-foreground whitespace-nowrap">
-						<span class="inline-flex items-center gap-1">
-							<CheckCircleIcon class="h-3.5 w-3.5 text-success" />
-							<span class="font-mono font-medium text-foreground">{trackerSucceeded}</span>
-						</span>
-						<span class="inline-flex items-center gap-1">
-							<XCircleIcon class="h-3.5 w-3.5 text-destructive" />
-							<span class="font-mono font-medium text-foreground">{trackerFailed}</span>
+					{/if}
+				</div>
+
+				<div class="mt-3 flex flex-wrap items-center gap-x-6 gap-y-1">
+					<span class="inline-flex items-baseline gap-1.5">
+						<span class="font-mono text-xl font-bold leading-none text-status-success"
+							>{trackerSucceeded}</span
+						>
+						<span class="text-xs text-muted-foreground">passed</span>
+					</span>
+					<span class="inline-flex items-baseline gap-1.5">
+						<span class="font-mono text-xl font-bold leading-none text-status-error"
+							>{trackerFailed}</span
+						>
+						<span class="text-xs text-muted-foreground">failed</span>
+					</span>
+					<span class="inline-flex items-baseline gap-1.5">
+						<span class="font-mono text-xl font-bold leading-none">{total}</span>
+						<span class="text-xs text-muted-foreground">scenarios</span>
+					</span>
+					{#if $currentRun.status === 'running'}
+						<span class="inline-flex items-center gap-1.5 text-xs text-status-processing">
+							<LoaderCircleIcon class="h-3.5 w-3.5 animate-spin" />
+							running
 						</span>
-						<span class="text-muted-foreground/60">/</span>
-						<span class="font-mono">{total}</span>
-						{#if $currentRun.status === 'running'}
-							<LoaderCircleIcon class="h-3.5 w-3.5 animate-spin text-muted-foreground" />
-						{/if}
-					</div>
+					{/if}
 				</div>
 			</div>
 		</div>
@@ -272,11 +317,17 @@
 				<Tabs.Trigger value="results">Results ({tracker.sortedEntries.length})</Tabs.Trigger>
 				<Tabs.Trigger value="logs">Logs ({tracker.logs.length})</Tabs.Trigger>
 			</Tabs.List>
-			<Tabs.Content value="results" class="space-y-3 pt-4">
+			<Tabs.Content value="results" class="pt-4">
 				{#if tracker.sortedEntries.length > 0}
-					{#each tracker.sortedEntries as entry (entry.name)}
-						<ScenarioResultComponent {entry} logs={tracker.getLogsForScenario(entry.name)} />
-					{/each}
+					<!-- Timeline rail: a single line behind the status markers on each row -->
+					<div class="relative space-y-3 pl-8">
+						<div
+							class="pointer-events-none absolute bottom-2 left-[9px] top-2 w-px bg-gradient-to-b from-border via-border to-transparent"
+						></div>
+						{#each tracker.sortedEntries as entry (entry.name)}
+							<ScenarioResultComponent {entry} logs={tracker.getLogsForScenario(entry.name)} />
+						{/each}
+					</div>
 				{:else}
 					<p class="text-sm text-muted-foreground">No scenarios yet.</p>
 				{/if}
diff --git a/web/frontend/src/routes/connectors/+page.svelte b/web/frontend/src/routes/connectors/+page.svelte
index 72e900b..519d753 100644
--- a/web/frontend/src/routes/connectors/+page.svelte
+++ b/web/frontend/src/routes/connectors/+page.svelte
@@ -116,147 +116,148 @@
 	}
 </script>
 
-
 <div class="space-y-6">
 	<div class="flex items-center justify-between">
-			<h1 class="text-2xl font-bold">Connectors</h1>
-			<Button onclick={() => (createDialogOpen = true)}>New Connector</Button>
-		</div>
+		<h1 class="text-2xl font-bold">Connectors</h1>
+		<Button onclick={() => (createDialogOpen = true)}>New Connector</Button>
+	</div>
 
-		{#if error}
-			<Alert.Root variant="destructive">
-				<Alert.Description>{error}</Alert.Description>
-			</Alert.Root>
-		{/if}
+	{#if error}
+		<Alert.Root variant="destructive">
+			<Alert.Description>{error}</Alert.Description>
+		</Alert.Root>
+	{/if}
 
-		{#if loading}
-			<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-				{#each Array(3) as _}
-					<Skeleton class="h-48 w-full rounded-xl" />
-				{/each}
-			</div>
-		{:else if $connectors.length === 0}
-			<Empty.Root>
-				<Empty.Header>
-					<Empty.Media variant="icon">
-						<PlugIcon />
-					</Empty.Media>
-					<Empty.Title>No connectors configured</Empty.Title>
-					<Empty.Description>
-						Connect to external systems like Elastic Security or cloud providers for attack
-						simulation and alert matching.
-					</Empty.Description>
-				</Empty.Header>
-				<Empty.Content>
-					<Button onclick={() => (createDialogOpen = true)}>New Connector</Button>
-				</Empty.Content>
-			</Empty.Root>
-		{:else}
-			<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-				{#each $connectors as connector, i (connector.id)}
-					<div
-						role="button"
-						tabindex="0"
-						aria-label="View {connector.name} details"
-						onclick={() => openDetail(connector)}
-						onkeydown={(e) => handleCardKeydown(e, connector)}
-						class="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-xl border bg-card p-5 text-left transition-all duration-200 animate-fade-up
+	{#if loading}
+		<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+			{#each Array(3) as _}
+				<Skeleton class="h-48 w-full rounded-xl" />
+			{/each}
+		</div>
+	{:else if $connectors.length === 0}
+		<Empty.Root>
+			<Empty.Header>
+				<Empty.Media variant="icon">
+					<PlugIcon />
+				</Empty.Media>
+				<Empty.Title>No connectors configured</Empty.Title>
+				<Empty.Description>
+					Connect to external systems like Elastic Security or cloud providers for attack simulation
+					and alert matching.
+				</Empty.Description>
+			</Empty.Header>
+			<Empty.Content>
+				<Button onclick={() => (createDialogOpen = true)}>New Connector</Button>
+			</Empty.Content>
+		</Empty.Root>
+	{:else}
+		<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+			{#each $connectors as connector, i (connector.id)}
+				<div
+					role="button"
+					tabindex="0"
+					aria-label="View {connector.name} details"
+					onclick={() => openDetail(connector)}
+					onkeydown={(e) => handleCardKeydown(e, connector)}
+					class="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-xl border bg-card p-5 text-left transition-all duration-200 animate-fade-up
 							hover:-translate-y-0.5 hover:shadow-sm
 							focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-						style="animation-delay: {i * 60}ms"
-					>
-						<!-- accent line on the left edge, draws down on hover -->
-						<span
-							class="absolute inset-y-0 left-0 w-[3px] origin-top scale-y-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-y-100"
-						></span>
+					style="animation-delay: {i * 60}ms"
+				>
+					<!-- accent line on the left edge, draws down on hover -->
+					<span
+						class="absolute inset-y-0 left-0 w-[3px] origin-top scale-y-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-y-100"
+					></span>
 
-						<!-- header -->
-						<div class="flex items-start gap-3">
-							<div class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted">
-								{#if connector.type === 'elastic'}
-									<ElasticLogo size={28} />
-								{:else if connector.type === 'ssh'}
-									<TerminalIcon size={20} class="text-muted-foreground" />
-								{:else}
-									<CloudIcon size={20} class="text-muted-foreground" />
-								{/if}
-							</div>
-							<div class="min-w-0 flex-1">
-								<h3 class="truncate text-base font-semibold tracking-tight">{connector.name}</h3>
-								<p class="mt-0.5 text-xs uppercase tracking-wide text-muted-foreground">
-									{connector.type}{#if connector.isDefault}<span class="normal-case"> · Default</span>{/if}
-								</p>
-							</div>
-							<Badge variant={connector.enabled ? 'default' : 'secondary'} class="shrink-0">
-								{connector.enabled ? 'Enabled' : 'Disabled'}
-							</Badge>
-							<DropdownMenu.Root>
-								<DropdownMenu.Trigger>
-									{#snippet child({ props })}
-										<button
-											{...props}
-											class="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-											aria-label="Connector actions"
-											onclick={(e) => e.stopPropagation()}
-										>
-											<MoreVerticalIcon class="size-4" />
-										</button>
-									{/snippet}
-								</DropdownMenu.Trigger>
-								<DropdownMenu.Content align="end" class="w-36">
-									<DropdownMenu.Item onclick={() => openEdit(connector)}>
-										<PencilIcon class="size-4" />
-										Edit
-									</DropdownMenu.Item>
-									<DropdownMenu.Separator />
-									<DropdownMenu.Item variant="destructive" onclick={() => openDelete(connector)}>
-										<Trash2Icon class="size-4" />
-										Delete
-									</DropdownMenu.Item>
-								</DropdownMenu.Content>
-							</DropdownMenu.Root>
+					<!-- header -->
+					<div class="flex items-start gap-3">
+						<div class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted">
+							{#if connector.type === 'elastic'}
+								<ElasticLogo size={28} />
+							{:else if connector.type === 'ssh'}
+								<TerminalIcon size={20} class="text-muted-foreground" />
+							{:else}
+								<CloudIcon size={20} class="text-muted-foreground" />
+							{/if}
 						</div>
-
-						<!-- body -->
-						{#if connector.description}
-							<p class="mt-4 line-clamp-2 text-sm text-muted-foreground">
-								{connector.description}
-							</p>
-						{/if}
-						{#if getConnectorCardInfo(connector)}
-							<p class="mt-3 truncate font-mono text-xs text-muted-foreground">
-								{getConnectorCardInfo(connector)}
+						<div class="min-w-0 flex-1">
+							<h3 class="truncate text-base font-semibold tracking-tight">{connector.name}</h3>
+							<p class="mt-0.5 text-xs uppercase tracking-wide text-muted-foreground">
+								{connector.type}{#if connector.isDefault}<span class="normal-case">
+										· Default</span
+									>{/if}
 							</p>
-						{/if}
-						{#if connectorFeatures[connector.type]}
-							<div class="mt-3 flex flex-wrap gap-1.5">
-								{#each connectorFeatures[connector.type].slice(0, 5) as feature}
-									<span
-										class="rounded-md bg-primary/10 px-1.5 py-0.5 text-[0.68rem] font-medium text-primary"
+						</div>
+						<Badge variant={connector.enabled ? 'default' : 'secondary'} class="shrink-0">
+							{connector.enabled ? 'Enabled' : 'Disabled'}
+						</Badge>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<button
+										{...props}
+										class="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+										aria-label="Connector actions"
+										onclick={(e) => e.stopPropagation()}
 									>
-										{feature}
-									</span>
-								{/each}
-							</div>
-						{/if}
-
-						<!-- spacer: keeps a minimum gap above the divider, grows to bottom-align footer -->
-						<div class="min-h-5 flex-1"></div>
+										<MoreVerticalIcon class="size-4" />
+									</button>
+								{/snippet}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end" class="w-36">
+								<DropdownMenu.Item onclick={() => openEdit(connector)}>
+									<PencilIcon class="size-4" />
+									Edit
+								</DropdownMenu.Item>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item variant="destructive" onclick={() => openDelete(connector)}>
+									<Trash2Icon class="size-4" />
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
 
-						<!-- footer -->
-						<div class="flex items-center gap-2 border-t pt-4 text-xs text-muted-foreground">
-							<span class="truncate">Secrets: {getSecretGroupName(connector.secretGroupId)}</span>
-							<span
-								class="ml-auto inline-flex shrink-0 items-center gap-1 font-medium text-primary opacity-0 transition-all duration-200 -translate-x-1 group-hover:translate-x-0 group-hover:opacity-100"
-							>
-								View details
-								<ArrowRightIcon class="size-3.5" />
-							</span>
+					<!-- body -->
+					{#if connector.description}
+						<p class="mt-4 line-clamp-2 text-sm text-muted-foreground">
+							{connector.description}
+						</p>
+					{/if}
+					{#if getConnectorCardInfo(connector)}
+						<p class="mt-3 truncate font-mono text-xs text-muted-foreground">
+							{getConnectorCardInfo(connector)}
+						</p>
+					{/if}
+					{#if connectorFeatures[connector.type]}
+						<div class="mt-3 flex flex-wrap gap-1.5">
+							{#each connectorFeatures[connector.type].slice(0, 5) as feature}
+								<span
+									class="rounded-md bg-primary/10 px-1.5 py-0.5 text-[0.68rem] font-medium text-primary"
+								>
+									{feature}
+								</span>
+							{/each}
 						</div>
+					{/if}
+
+					<!-- spacer: keeps a minimum gap above the divider, grows to bottom-align footer -->
+					<div class="min-h-5 flex-1"></div>
+
+					<!-- footer -->
+					<div class="flex items-center gap-2 border-t pt-4 text-xs text-muted-foreground">
+						<span class="truncate">Secrets: {getSecretGroupName(connector.secretGroupId)}</span>
+						<span
+							class="ml-auto inline-flex shrink-0 items-center gap-1 font-medium text-primary opacity-0 transition-all duration-200 -translate-x-1 group-hover:translate-x-0 group-hover:opacity-100"
+						>
+							View details
+							<ArrowRightIcon class="size-3.5" />
+						</span>
 					</div>
-				{/each}
-			</div>
-		{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <ConnectorDetail
diff --git a/web/frontend/src/routes/packs/+page.svelte b/web/frontend/src/routes/packs/+page.svelte
index 5096015..518db85 100644
--- a/web/frontend/src/routes/packs/+page.svelte
+++ b/web/frontend/src/routes/packs/+page.svelte
@@ -177,7 +177,9 @@
 			</Tabs.List>
 			{#if activeTab === 'installed' && !loading && $packs.length > 0}
 				<div class="relative w-full sm:w-64">
-					<SearchIcon class="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+					<SearchIcon
+						class="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+					/>
 					<Input placeholder="Filter packs..." class="pl-9" bind:value={filterQuery} />
 				</div>
 			{/if}
diff --git a/web/frontend/src/routes/rules/coverage/+page.svelte b/web/frontend/src/routes/rules/coverage/+page.svelte
index d06802b..2ab1d5c 100644
--- a/web/frontend/src/routes/rules/coverage/+page.svelte
+++ b/web/frontend/src/routes/rules/coverage/+page.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { getRuleCoverage } from '$lib/api/client';
-	import type { CoverageResponse, RuleCoverageEntry } from '$lib/types';
+	import type { CoverageResponse } from '$lib/types';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import * as Alert from '$lib/components/ui/alert/index.js';
-	import * as Card from '$lib/components/ui/card/index.js';
 	import * as Select from '$lib/components/ui/select/index.js';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+	import * as Pagination from '$lib/components/ui/pagination/index.js';
+	import { formatRelativeTime, formatTime } from '$lib/utils/format';
 	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down';
-	import ShieldCheckIcon from '@lucide/svelte/icons/shield-check';
 	import ShieldAlertIcon from '@lucide/svelte/icons/shield-alert';
-	import CheckCircleIcon from '@lucide/svelte/icons/check-circle';
 
-	let data: CoverageResponse | null = $state(null);
+	let data = $state<CoverageResponse | null>(null);
 	let loading = $state(true);
 	let error = $state('');
 
@@ -32,21 +32,43 @@
 	// Expanded rows
 	let expandedRows = $state<Set<string>>(new Set());
 
+	const SEVERITIES = ['critical', 'high', 'medium', 'low'] as const;
+	type Severity = (typeof SEVERITIES)[number];
 	const severityOrder: Record<string, number> = { critical: 0, high: 1, medium: 2, low: 3 };
 
-	function severityVariant(
-		severity: string
-	): 'destructive' | 'default' | 'secondary' | 'outline' {
-		switch (severity) {
-			case 'critical':
-				return 'destructive';
-			case 'high':
-				return 'default';
-			case 'medium':
-				return 'secondary';
-			default:
-				return 'outline';
+	// Per-severity token classes — drives the breakdown bars, row accents and chips.
+	const severityClasses: Record<
+		Severity,
+		{ text: string; bar: string; accent: string; chip: string }
+	> = {
+		critical: {
+			text: 'text-status-error',
+			bar: 'bg-status-error',
+			accent: 'border-l-status-error',
+			chip: 'bg-status-error/10 text-status-error border-status-error/30'
+		},
+		high: {
+			text: 'text-status-processing',
+			bar: 'bg-status-processing',
+			accent: 'border-l-status-processing',
+			chip: 'bg-status-processing/10 text-status-processing border-status-processing/30'
+		},
+		medium: {
+			text: 'text-status-warning',
+			bar: 'bg-status-warning',
+			accent: 'border-l-status-warning',
+			chip: 'bg-status-warning/10 text-status-warning border-status-warning/30'
+		},
+		low: {
+			text: 'text-status-info',
+			bar: 'bg-status-info',
+			accent: 'border-l-status-info',
+			chip: 'bg-status-info/10 text-status-info border-status-info/30'
 		}
+	};
+
+	function sevClass(severity: string) {
+		return severityClasses[severity as Severity] ?? severityClasses.low;
 	}
 
 	function toggleRow(ruleId: string) {
@@ -64,15 +86,49 @@
 		}
 	}
 
-	let filteredRules = $derived.by(() => {
+	// Coverage ring geometry (mirrors the assessment hero gauge).
+	const GAUGE_R = 54;
+	const GAUGE_CIRC = 2 * Math.PI * GAUGE_R;
+	const coveragePct = $derived(data?.summary.coveragePercent ?? 0);
+	const gaugeOffset = $derived(GAUGE_CIRC * (1 - coveragePct / 100));
+
+	const passingCount = $derived(
+		data?.rules.filter((r) => r.lastResult?.passed === true).length ?? 0
+	);
+	const failingCount = $derived(
+		data?.rules.filter((r) => r.lastResult?.passed === false).length ?? 0
+	);
+
+	// Coverage grouped by severity — the headline insight. Only severities that
+	// actually appear are shown, kept in escalation order.
+	const severityBreakdown = $derived.by(() => {
+		if (!data) return [];
+		const buckets = new Map<string, { total: number; covered: number }>();
+		for (const r of data.rules) {
+			const b = buckets.get(r.severity) ?? { total: 0, covered: 0 };
+			b.total += 1;
+			if (r.covered) b.covered += 1;
+			buckets.set(r.severity, b);
+		}
+		return SEVERITIES.filter((s) => buckets.has(s)).map((s) => {
+			const b = buckets.get(s)!;
+			return { severity: s, total: b.total, covered: b.covered, pct: (b.covered / b.total) * 100 };
+		});
+	});
+
+	// The actionable gap: critical/high rules with no simulation coverage.
+	const highSevGaps = $derived(
+		data?.rules.filter((r) => !r.covered && (r.severity === 'critical' || r.severity === 'high'))
+			.length ?? 0
+	);
+
+	const filteredRules = $derived.by(() => {
 		if (!data) return [];
 		let rules = data.rules;
 		if (search) {
 			const q = search.toLowerCase();
 			rules = rules.filter(
-				(r) =>
-					r.name.toLowerCase().includes(q) ||
-					r.tags.some((t) => t.toLowerCase().includes(q))
+				(r) => r.name.toLowerCase().includes(q) || r.tags.some((t) => t.toLowerCase().includes(q))
 			);
 		}
 		if (coverageFilter === 'covered') rules = rules.filter((r) => r.covered);
@@ -89,14 +145,25 @@
 		return rules;
 	});
 
-	let passingCount = $derived(
-		data?.rules.filter((r) => r.lastResult?.passed === true).length ?? 0
-	);
-	let failingCount = $derived(
-		data?.rules.filter((r) => r.lastResult?.passed === false).length ?? 0
+	// Client-side pagination over the filtered rules (all rules arrive in one fetch).
+	const PER_PAGE = 25;
+	let coveragePage = $state(1);
+
+	// Filter/search changes reset to the first page.
+	$effect(() => {
+		search;
+		coverageFilter;
+		severityFilter;
+		coveragePage = 1;
+	});
+
+	const pagedRules = $derived(
+		filteredRules.slice((coveragePage - 1) * PER_PAGE, coveragePage * PER_PAGE)
 	);
+	const startIndex = $derived(filteredRules.length === 0 ? 0 : (coveragePage - 1) * PER_PAGE + 1);
+	const endIndex = $derived(Math.min(coveragePage * PER_PAGE, filteredRules.length));
 
-	let coverageFilterLabel = $derived(
+	const coverageFilterLabel = $derived(
 		coverageFilter === 'all'
 			? 'All Rules'
 			: coverageFilter === 'covered'
@@ -104,7 +171,7 @@
 				: 'Not Covered'
 	);
 
-	let severityFilterLabel = $derived(
+	const severityFilterLabel = $derived(
 		severityFilter === 'all'
 			? 'All Severities'
 			: severityFilter.charAt(0).toUpperCase() + severityFilter.slice(1)
@@ -132,110 +199,170 @@
 	{/if}
 
 	{#if loading}
-		<!-- Loading skeleton: 3 summary cards -->
-		<div class="grid grid-cols-3 gap-4">
-			{#each Array(3) as _}
-				<Skeleton class="h-24 w-full rounded-lg" />
-			{/each}
-		</div>
-		<!-- Loading skeleton: table rows -->
+		<Skeleton class="h-44 w-full rounded-lg" />
 		<div class="space-y-2">
 			{#each Array(8) as _}
 				<Skeleton class="h-12 w-full" />
 			{/each}
 		</div>
 	{:else if data}
-		<!-- Summary cards -->
-		<div class="grid grid-cols-3 gap-4">
-			<Card.Root>
-				<Card.Header class="pb-2">
-					<Card.Description>Total Enabled Rules</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<div class="flex items-center gap-2">
-						<ShieldAlertIcon class="h-5 w-5 text-muted-foreground" />
-						<span class="text-3xl font-bold">{data.summary.totalRules}</span>
-					</div>
-				</Card.Content>
-			</Card.Root>
-
-			<Card.Root>
-				<Card.Header class="pb-2">
-					<Card.Description>Covered by Simulations</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<div class="flex items-center gap-2">
-						<ShieldCheckIcon class="h-5 w-5 text-muted-foreground" />
-						<span class="text-3xl font-bold">{data.summary.coveredRules}</span>
-						<span class="text-sm text-muted-foreground">
-							({data.summary.coveragePercent.toFixed(1)}%)
+		<!-- Hero: coverage gauge + coverage-by-severity breakdown -->
+		<div
+			class="animate-fade-up stagger-1 flex flex-col gap-6 rounded-lg border bg-card p-5 sm:flex-row sm:items-center sm:gap-8"
+		>
+			<!-- Coverage gauge -->
+			<div class="relative h-[132px] w-[132px] shrink-0 self-center">
+				<svg class="h-full w-full -rotate-90" viewBox="0 0 132 132">
+					<circle cx="66" cy="66" r={GAUGE_R} fill="none" class="stroke-muted" stroke-width="10" />
+					<circle
+						cx="66"
+						cy="66"
+						r={GAUGE_R}
+						fill="none"
+						class="stroke-primary transition-[stroke-dashoffset] duration-700 ease-out"
+						stroke-width="10"
+						stroke-linecap="round"
+						stroke-dasharray={GAUGE_CIRC}
+						stroke-dashoffset={gaugeOffset}
+					/>
+				</svg>
+				<div class="absolute inset-0 flex flex-col items-center justify-center">
+					<span class="font-mono text-4xl font-bold leading-none tabular-nums"
+						>{Math.round(coveragePct)}</span
+					>
+					<span class="mt-1 font-mono text-xs text-muted-foreground">% covered</span>
+				</div>
+			</div>
+
+			<div class="hidden self-stretch border-l sm:block"></div>
+
+			<!-- Severity breakdown -->
+			<div class="min-w-0 flex-1">
+				<div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+					<span class="font-mono text-xs uppercase tracking-wider text-muted-foreground">
+						Coverage by severity
+					</span>
+					<div class="flex flex-wrap items-baseline gap-x-5 gap-y-1">
+						<span class="inline-flex items-baseline gap-1.5">
+							<span class="font-mono text-base font-bold leading-none"
+								>{data.summary.totalRules}</span
+							>
+							<span class="text-xs text-muted-foreground">rules</span>
 						</span>
-					</div>
-				</Card.Content>
-			</Card.Root>
-
-			<Card.Root>
-				<Card.Header class="pb-2">
-					<Card.Description>Last Results</Card.Description>
-				</Card.Header>
-				<Card.Content>
-					<div class="flex items-center gap-4">
-						<CheckCircleIcon class="h-5 w-5 text-muted-foreground" />
-						<span class="text-xl font-semibold text-status-success">
-							{passingCount} passing
+						<span class="inline-flex items-baseline gap-1.5">
+							<span class="font-mono text-base font-bold leading-none text-status-success"
+								>{data.summary.coveredRules}</span
+							>
+							<span class="text-xs text-muted-foreground">covered</span>
+						</span>
+						<span class="inline-flex items-baseline gap-1.5">
+							<span class="font-mono text-base font-bold leading-none text-status-success"
+								>{passingCount}</span
+							>
+							<span class="text-xs text-muted-foreground">passing</span>
 						</span>
-						<span class="text-xl font-semibold text-status-error">
-							{failingCount} failing
+						<span class="inline-flex items-baseline gap-1.5">
+							<span class="font-mono text-base font-bold leading-none text-status-error"
+								>{failingCount}</span
+							>
+							<span class="text-xs text-muted-foreground">failing</span>
 						</span>
 					</div>
-				</Card.Content>
-			</Card.Root>
+				</div>
+
+				<div class="mt-3 space-y-2">
+					{#each severityBreakdown as row}
+						<div class="grid grid-cols-[80px_1fr_auto] items-center gap-3">
+							<span
+								class="inline-flex items-center gap-1.5 font-mono text-xs font-semibold uppercase tracking-wide {sevClass(
+									row.severity
+								).text}"
+							>
+								<span class="h-1.5 w-1.5 rounded-sm {sevClass(row.severity).bar}"></span>
+								{row.severity}
+							</span>
+							<div class="h-2 overflow-hidden rounded-full bg-muted">
+								<div
+									class="h-full rounded-full transition-all duration-700 ease-out {sevClass(
+										row.severity
+									).bar}"
+									style="width: {row.pct}%"
+								></div>
+							</div>
+							<span class="font-mono text-xs whitespace-nowrap text-muted-foreground">
+								<span class="font-medium text-foreground">{row.covered}</span>/{row.total} · {Math.round(
+									row.pct
+								)}%
+							</span>
+						</div>
+					{/each}
+				</div>
+			</div>
 		</div>
 
+		<!-- Actionable gap callout -->
+		{#if highSevGaps > 0}
+			<div
+				class="animate-fade-up stagger-2 flex items-center gap-3 rounded-lg border border-status-error/30 bg-status-error/[0.07] px-4 py-3 text-sm"
+			>
+				<ShieldAlertIcon class="h-4 w-4 shrink-0 text-status-error" />
+				<span>
+					<span class="font-mono font-semibold">{highSevGaps}</span>
+					critical &amp; high-severity rule{highSevGaps === 1 ? '' : 's'} have no simulation coverage
+					— your most important gaps.
+				</span>
+			</div>
+		{/if}
+
 		<!-- Filter bar -->
-		<div class="flex items-center gap-4">
-			<div class="max-w-sm flex-1">
+		<div class="flex flex-wrap items-end gap-4">
+			<div class="flex flex-col gap-1.5">
+				<label for="rule-search" class="text-xs font-medium text-muted-foreground">Search</label>
 				<Input
-					placeholder="Search rules or tags..."
+					id="rule-search"
+					placeholder="Search rules or tags…"
+					class="h-9 w-[260px]"
 					bind:value={search}
 				/>
 			</div>
 
-			<Select.Root type="single" bind:value={coverageFilter}>
-				<Select.Trigger class="w-[160px]">
-					{coverageFilterLabel}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="all" label="All Rules" />
-					<Select.Item value="covered" label="Covered" />
-					<Select.Item value="uncovered" label="Not Covered" />
-				</Select.Content>
-			</Select.Root>
-
-			<Select.Root type="single" bind:value={severityFilter}>
-				<Select.Trigger class="w-[160px]">
-					{severityFilterLabel}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="all" label="All Severities" />
-					<Select.Item value="critical" label="Critical" />
-					<Select.Item value="high" label="High" />
-					<Select.Item value="medium" label="Medium" />
-					<Select.Item value="low" label="Low" />
-				</Select.Content>
-			</Select.Root>
-
-			<span class="text-sm text-muted-foreground">
+			<div class="flex flex-col gap-1.5">
+				<span class="text-xs font-medium text-muted-foreground">Coverage</span>
+				<Select.Root type="single" bind:value={coverageFilter}>
+					<Select.Trigger class="h-9 w-[150px]">{coverageFilterLabel}</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="all" label="All Rules" />
+						<Select.Item value="covered" label="Covered" />
+						<Select.Item value="uncovered" label="Not Covered" />
+					</Select.Content>
+				</Select.Root>
+			</div>
+
+			<div class="flex flex-col gap-1.5">
+				<span class="text-xs font-medium text-muted-foreground">Severity</span>
+				<Select.Root type="single" bind:value={severityFilter}>
+					<Select.Trigger class="h-9 w-[150px]">{severityFilterLabel}</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="all" label="All Severities" />
+						<Select.Item value="critical" label="Critical" />
+						<Select.Item value="high" label="High" />
+						<Select.Item value="medium" label="Medium" />
+						<Select.Item value="low" label="Low" />
+					</Select.Content>
+				</Select.Root>
+			</div>
+
+			<span class="ml-auto self-center text-sm text-muted-foreground">
 				{filteredRules.length} rule{filteredRules.length === 1 ? '' : 's'}
 			</span>
 		</div>
 
 		<!-- Rules table -->
-		<div class="overflow-hidden rounded-lg border">
+		<div class="animate-fade-up stagger-3 overflow-hidden rounded-lg border">
 			<Table.Root>
 				<Table.Header class="bg-muted">
 					<Table.Row>
-						<Table.Head class="w-10"></Table.Head>
+						<Table.Head class="w-8"></Table.Head>
 						<Table.Head>
 							<Button
 								variant="ghost"
@@ -244,7 +371,7 @@
 								onclick={() => toggleSort('name')}
 							>
 								Rule Name
-								<ArrowUpDownIcon class="ml-1 h-4 w-4" />
+								<ArrowUpDownIcon data-icon="inline-end" />
 							</Button>
 						</Table.Head>
 						<Table.Head>
@@ -255,7 +382,7 @@
 								onclick={() => toggleSort('severity')}
 							>
 								Severity
-								<ArrowUpDownIcon class="ml-1 h-4 w-4" />
+								<ArrowUpDownIcon data-icon="inline-end" />
 							</Button>
 						</Table.Head>
 						<Table.Head>Tags</Table.Head>
@@ -265,12 +392,12 @@
 					</Table.Row>
 				</Table.Header>
 				<Table.Body>
-					{#each filteredRules as rule (rule.ruleId)}
+					{#each pagedRules as rule (rule.ruleId)}
 						<Table.Row
-							class={rule.covered ? 'cursor-pointer hover:bg-accent/50 transition-colors' : ''}
+							class={rule.covered ? 'cursor-pointer transition-colors hover:bg-accent/50' : ''}
 							onclick={() => rule.covered && toggleRow(rule.ruleId)}
 						>
-							<Table.Cell class="w-10">
+							<Table.Cell class="w-8 border-l-2 {sevClass(rule.severity).accent}">
 								{#if rule.covered}
 									{#if expandedRows.has(rule.ruleId)}
 										<ChevronDownIcon class="h-4 w-4 text-muted-foreground" />
@@ -281,9 +408,13 @@
 							</Table.Cell>
 							<Table.Cell class="font-medium">{rule.name}</Table.Cell>
 							<Table.Cell>
-								<Badge variant={severityVariant(rule.severity)}>
+								<span
+									class="inline-flex h-5 items-center rounded-md border px-1.5 font-mono text-[0.65rem] font-semibold uppercase tracking-wide {sevClass(
+										rule.severity
+									).chip}"
+								>
 									{rule.severity}
-								</Badge>
+								</span>
 							</Table.Cell>
 							<Table.Cell>
 								<div class="flex flex-wrap gap-1">
@@ -291,30 +422,55 @@
 										<Badge variant="outline" class="text-xs">{tag}</Badge>
 									{/each}
 									{#if rule.tags.length > 3}
-										<Badge variant="outline" class="text-xs">
-											+{rule.tags.length - 3}
-										</Badge>
+										<Badge variant="outline" class="text-xs">+{rule.tags.length - 3}</Badge>
 									{/if}
 								</div>
 							</Table.Cell>
 							<Table.Cell>
 								{#if rule.covered}
-									<Badge variant="success">Covered</Badge>
+									<span
+										class="inline-flex items-center gap-1.5 font-mono text-xs font-medium text-status-success"
+									>
+										<span class="h-1.5 w-1.5 rounded-full bg-status-success"></span>
+										Covered
+									</span>
 								{:else}
-									<Badge variant="secondary">Not Covered</Badge>
+									<span
+										class="inline-flex items-center gap-1.5 font-mono text-xs text-muted-foreground"
+									>
+										<span class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></span>
+										Not covered
+									</span>
 								{/if}
 							</Table.Cell>
-							<Table.Cell>
+							<Table.Cell
+								class="font-mono text-xs {rule.scenarios.length === 0
+									? 'text-muted-foreground'
+									: ''}"
+							>
 								{rule.scenarios.length}
 							</Table.Cell>
 							<Table.Cell>
 								{#if rule.lastResult}
-									<a href="/assessments/{rule.lastResult.runId}" class="inline-block">
-										{#if rule.lastResult.passed}
-											<Badge variant="success">Passed</Badge>
-										{:else}
-											<Badge variant="destructive">Failed</Badge>
-										{/if}
+									<a
+										href="/assessments/{rule.lastResult.runId}"
+										class="inline-flex items-center gap-2"
+										onclick={(e: Event) => e.stopPropagation()}
+									>
+										<span
+											class="inline-flex h-5 items-center rounded-md border px-1.5 font-mono text-[0.65rem] font-semibold {rule
+												.lastResult.passed
+												? 'border-status-success/25 bg-status-success/10 text-status-success'
+												: 'border-status-error/30 bg-status-error/10 text-status-error'}"
+										>
+											{rule.lastResult.passed ? 'PASS' : 'FAIL'}
+										</span>
+										<Tooltip.Root>
+											<Tooltip.Trigger class="cursor-default text-xs text-muted-foreground">
+												{formatRelativeTime(rule.lastResult.timestamp)}
+											</Tooltip.Trigger>
+											<Tooltip.Content>{formatTime(rule.lastResult.timestamp)}</Tooltip.Content>
+										</Tooltip.Root>
 									</a>
 								{:else}
 									<span class="text-sm text-muted-foreground">--</span>
@@ -326,9 +482,9 @@
 						{#if expandedRows.has(rule.ruleId)}
 							{#each rule.scenarios as scenario}
 								<Table.Row class="bg-muted/30">
-									<Table.Cell></Table.Cell>
+									<Table.Cell class="border-l-2 {sevClass(rule.severity).accent}"></Table.Cell>
 									<Table.Cell colspan={6} class="pl-8">
-										<div class="flex items-center gap-4 text-sm">
+										<div class="flex items-center gap-3 text-sm">
 											<a
 												href="/scenarios/{scenario.scenarioId}"
 												class="font-medium text-primary hover:underline"
@@ -336,7 +492,7 @@
 												{scenario.scenarioName}
 											</a>
 											{#if scenario.packName && scenario.simulationId}
-												<span class="text-muted-foreground">
+												<span class="font-mono text-xs text-muted-foreground">
 													{scenario.packName}.{scenario.simulationId}
 												</span>
 											{/if}
@@ -349,7 +505,7 @@
 
 					{#if filteredRules.length === 0}
 						<Table.Row>
-							<Table.Cell colspan={7} class="text-center py-8 text-muted-foreground">
+							<Table.Cell colspan={7} class="py-8 text-center text-muted-foreground">
 								No rules match the current filters.
 							</Table.Cell>
 						</Table.Row>
@@ -357,5 +513,47 @@
 				</Table.Body>
 			</Table.Root>
 		</div>
+
+		{#if filteredRules.length > 0}
+			<div class="flex flex-wrap items-center justify-between gap-3 pt-1">
+				<div class="text-sm text-muted-foreground">
+					Showing <span class="font-medium text-foreground">{startIndex}–{endIndex}</span>
+					of <span class="font-medium text-foreground">{filteredRules.length}</span>
+				</div>
+
+				{#if filteredRules.length > PER_PAGE}
+					<Pagination.Root
+						count={filteredRules.length}
+						perPage={PER_PAGE}
+						bind:page={coveragePage}
+						class="mx-0 w-auto"
+					>
+						{#snippet children({ pages, currentPage })}
+							<Pagination.Content>
+								<Pagination.Item>
+									<Pagination.PrevButton />
+								</Pagination.Item>
+								{#each pages as p (p.key)}
+									{#if p.type === 'ellipsis'}
+										<Pagination.Item>
+											<Pagination.Ellipsis />
+										</Pagination.Item>
+									{:else}
+										<Pagination.Item>
+											<Pagination.Link page={p} isActive={currentPage === p.value}>
+												{p.value}
+											</Pagination.Link>
+										</Pagination.Item>
+									{/if}
+								{/each}
+								<Pagination.Item>
+									<Pagination.NextButton />
+								</Pagination.Item>
+							</Pagination.Content>
+						{/snippet}
+					</Pagination.Root>
+				{/if}
+			</div>
+		{/if}
 	{/if}
 </div>
diff --git a/web/frontend/src/routes/scenarios/+page.svelte b/web/frontend/src/routes/scenarios/+page.svelte
index af2a4fa..ce78532 100644
--- a/web/frontend/src/routes/scenarios/+page.svelte
+++ b/web/frontend/src/routes/scenarios/+page.svelte
@@ -325,7 +325,7 @@
 	<div class="flex items-center justify-between">
 		<h1 class="text-2xl font-bold">Scenarios</h1>
 		<Button onclick={() => (newDialogOpen = true)}>
-			<PlusIcon class="mr-2 h-4 w-4" />
+			<PlusIcon data-icon="inline-start" />
 			New Scenario
 		</Button>
 	</div>
@@ -381,7 +381,7 @@
 
 		{#if hasActiveFilters}
 			<Button variant="ghost" size="sm" class="h-9" onclick={clearFilters}>
-				<XIcon class="mr-1 h-4 w-4" />
+				<XIcon data-icon="inline-start" />
 				Clear filters
 			</Button>
 		{/if}
@@ -417,7 +417,7 @@
 			<Empty.Content>
 				{#if hasActiveFilters}
 					<Button variant="outline" onclick={clearFilters}>
-						<XIcon class="mr-2 h-4 w-4" />
+						<XIcon data-icon="inline-start" />
 						Clear filters
 					</Button>
 				{:else}
diff --git a/web/frontend/src/routes/scenarios/[id]/+page.svelte b/web/frontend/src/routes/scenarios/[id]/+page.svelte
index a0ea406..42ccb05 100644
--- a/web/frontend/src/routes/scenarios/[id]/+page.svelte
+++ b/web/frontend/src/routes/scenarios/[id]/+page.svelte
@@ -312,22 +312,22 @@
 					class="text-muted-foreground hover:text-destructive"
 					onclick={() => (deleteDialogOpen = true)}
 				>
-					<TrashIcon class="h-4 w-4 mr-1.5" />
+					<TrashIcon data-icon="inline-start" />
 					Delete
 				</Button>
 				<Button variant="outline" size="sm" onclick={() => (scheduleDialogOpen = true)}>
-					<CalendarIcon class="h-4 w-4 mr-1.5" />
+					<CalendarIcon data-icon="inline-start" />
 					{schedule ? 'Schedule' : 'Set schedule'}
 				</Button>
 				<Button variant="outline" size="sm" onclick={() => goto(`/scenarios/${scenario!.id}/edit`)}>
-					<PenLineIcon class="h-4 w-4 mr-1.5" />
+					<PenLineIcon data-icon="inline-start" />
 					Edit
 				</Button>
 				<Button size="sm" onclick={handleRun} disabled={running}>
 					{#if running}
-						<LoaderIcon class="h-4 w-4 mr-1.5 animate-spin" />
+						<LoaderIcon data-icon="inline-start" class="animate-spin" />
 					{:else}
-						<PlayIcon class="h-4 w-4 mr-1.5" />
+						<PlayIcon data-icon="inline-start" />
 					{/if}
 					Run
 				</Button>
@@ -378,9 +378,7 @@
 							<ul class="space-y-1.5">
 								{#each packsUsed as p}
 									<li class="flex items-center gap-2 text-sm">
-										<span
-											class="h-1 w-1 rounded-full bg-primary/60 shrink-0"
-											aria-hidden="true"
+										<span class="h-1 w-1 rounded-full bg-primary/60 shrink-0" aria-hidden="true"
 										></span>
 										<span class="font-mono text-foreground/90 truncate">{p}</span>
 									</li>
@@ -419,7 +417,9 @@
 					</div>
 				</div>
 			{:else}
-				<div class="rounded-lg border border-dashed bg-card/40 px-5 py-4 text-sm text-muted-foreground">
+				<div
+					class="rounded-lg border border-dashed bg-card/40 px-5 py-4 text-sm text-muted-foreground"
+				>
 					This scenario uses a detonator type that isn't introspected. Review the source below.
 				</div>
 			{/if}
diff --git a/web/frontend/src/routes/scenarios/[id]/edit/+page.svelte b/web/frontend/src/routes/scenarios/[id]/edit/+page.svelte
index 4707026..8dd10d0 100644
--- a/web/frontend/src/routes/scenarios/[id]/edit/+page.svelte
+++ b/web/frontend/src/routes/scenarios/[id]/edit/+page.svelte
@@ -84,9 +84,9 @@
 		mode="edit"
 		type={scenario.type}
 		initialName={scenario.name}
-		initialScenarios={initialScenarios}
-		initialTarget={initialTarget}
-		initialYaml={initialYaml}
+		{initialScenarios}
+		{initialTarget}
+		{initialYaml}
 		initialBuilderSupported={builderSupported}
 		onsave={handleSave}
 		oncancel={handleCancel}